:root{--bg0:#eaf6ff;--bg1:#f7fbff;--card:rgba(255,255,255,.86);--ink:#0b1b2a;--muted:#4a6b85;--primary:#0b67c2;--primary2:#0a4f96;--border:rgba(11,103,194,.22);--shadow:0 10px 30px rgba(10,79,150,.12);--radius:16px}*{box-sizing:border-box}html,body{height:100%}body{margin:0;min-height:100vh;background:radial-gradient(1200px 600px at 20% 0%,rgba(11,103,194,.18),transparent 55%),radial-gradient(900px 500px at 80% 30%,rgba(0,196,255,.15),transparent 60%),linear-gradient(180deg,var(--bg0),var(--bg1));color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;display:flex;flex-direction:column;align-items:center}a{color:var(--primary)}.app-header{width:100%;position:sticky;top:0;z-index:10;background:linear-gradient(90deg,#063a72,#0b67c2);color:#fff;box-shadow:0 8px 24px #0000002e}.app-header .brand{max-width:1000px;margin:0 auto;padding:16px 18px;display:flex;gap:14px;align-items:center}.logo{width:75px;height:75px;border-radius:10px;background:#ffffff2e;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.25);overflow:hidden}.logo img{width:65px;height:65px;object-fit:contain}.brand-text h1{margin:0;font-size:1.2rem;letter-spacing:.2px;line-height:1.15}.brand-text p{margin:2px 0 0;font-size:.92rem;opacity:.9}.app-main{width:100%;max-width:1000px;padding:22px 18px}.container{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px;width:100%;margin:0 auto 18px}.size-box{background:linear-gradient(180deg,#fffffff2,#ffffffbf);border:1px solid var(--border);border-radius:var(--radius);padding:18px 14px;text-align:center;font-size:1.05rem;font-weight:700;cursor:pointer;-webkit-user-select:none;user-select:none;box-shadow:0 6px 18px #0a4f961a;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}.size-box:hover{transform:translateY(-1px);box-shadow:0 10px 26px #0a4f9624;border-color:#0b67c273}.size-box.selected{background:linear-gradient(180deg,#0b67c224,#ffffffe6);border-color:#0b67c2cc;box-shadow:0 14px 34px #0a4f962e}#aquarium-ui{display:none;width:100%;text-align:left;background:var(--card);border:1px solid rgba(11,103,194,.22);border-radius:calc(var(--radius) + 2px);box-shadow:var(--shadow);padding:18px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}#aquarium-ui h3{margin:14px 0 8px;font-size:1.05rem}#aquarium{width:100%;height:210px;border:1px solid rgba(11,103,194,.28);border-radius:18px;margin:6px auto 18px;position:relative;overflow:hidden;background:#ffffffb3}#aquarium:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(900px 220px at 50% -40px,rgba(255,255,255,.9),transparent 60%),linear-gradient(180deg,#ffffffbf,#ffffff59);pointer-events:none}#water{position:absolute;bottom:0;width:100%;height:70%;background:linear-gradient(180deg,#38bdf859,#0ea5e98c);transition:height .5s}#water:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(1100px 220px at 30% 5%,rgba(255,255,255,.35),transparent 55%),radial-gradient(900px 180px at 75% 20%,rgba(255,255,255,.18),transparent 55%);opacity:.9;pointer-events:none}.slider-container{margin-bottom:16px}.slider-container label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px;font-weight:800;color:var(--ink)}.slider-container label span{font-weight:900;color:var(--primary2)}.slider-container input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:10px;border-radius:999px;background:linear-gradient(90deg,#0b67c240,#00c4ff40);outline:none;margin:0}.slider-container input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:linear-gradient(180deg,#fff,#ffffffbf);border:2px solid rgba(11,103,194,.85);box-shadow:0 8px 18px #0a4f9638;cursor:pointer}.slider-container input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid rgba(11,103,194,.85);box-shadow:0 8px 18px #0a4f9638;cursor:pointer}.load-container,.planting-container,.load-plants-container,.fish-db-ui,.maxfish-container{margin-bottom:18px;text-align:left;width:100%}.load-plants-container{display:none!important}.load-container p,.load-plants-container p,.maxfish-container p{margin:10px 0;padding:12px;background:#0b67c20f;border:1px solid rgba(11,103,194,.18);border-radius:14px}.plant-btn{background:linear-gradient(180deg,#fffffff2,#ffffffbf);border:1px solid rgba(11,103,194,.22);border-radius:14px;padding:12px 14px;margin:8px 0 4px;cursor:pointer;width:100%;text-align:left;font-weight:800;color:var(--ink);transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease,background .12s ease}.plant-btn:hover{transform:translateY(-1px);border-color:#0b67c273;box-shadow:0 10px 26px #0a4f961f}.plant-btn.selected{background:linear-gradient(180deg,#0b67c224,#ffffffeb);border-color:#0b67c2bf;box-shadow:0 14px 34px #0a4f9629}.definition{font-size:.92rem;margin:0 0 10px 12px;color:var(--muted);line-height:1.35}.fish-db-ui{border:1px solid rgba(11,103,194,.18);background:#fff9;padding:14px;border-radius:16px}.fish-row{display:flex;gap:10px;align-items:center;margin:10px 0;flex-wrap:wrap}.fish-row select{flex:1 1 360px;padding:10px 12px;border-radius:12px;border:1px solid rgba(11,103,194,.22);background:#ffffffe6}.fish-row input[type=search]{flex:1 1 260px;padding:10px 12px;border-radius:12px;border:1px solid rgba(11,103,194,.22);background:#ffffffe6}.fish-row input[type=number]{width:110px;padding:10px 12px;border-radius:12px;border:1px solid rgba(11,103,194,.22);background:#ffffffe6}.fish-row button{padding:10px 12px;border-radius:12px;border:1px solid rgba(11,103,194,.32);background:linear-gradient(180deg,#0b67c21f,#ffffffe6);font-weight:900;color:var(--primary2);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}.fish-row button:hover{transform:translateY(-1px);border-color:#0b67c299;box-shadow:0 10px 26px #0a4f9624}.selected-list{margin-top:10px}.selected-item{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:10px 6px;border-bottom:1px solid rgba(11,103,194,.1)}.selected-item:last-child{border-bottom:none}.selected-item-name{font-weight:800}.selected-item button{padding:8px 10px;border-radius:12px;border:1px solid rgba(11,103,194,.28);background:#ffffffe6;font-weight:800;color:var(--primary2);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease,background .12s ease}.selected-item button:hover{transform:translateY(-1px);border-color:#0b67c299;box-shadow:0 10px 26px #0a4f9624;background:#0b67c214}.stocking-summary{margin-top:12px;font-weight:900;padding:12px;border-radius:14px;background:#00c4ff14;border:1px solid rgba(0,196,255,.2)}.percent{padding:4px 10px;border-radius:999px;background:#0b67c224;color:var(--primary2);display:inline-block;margin-left:6px}.inches-label{font-weight:900}.inches-unit{color:var(--muted)}button:focus-visible,select:focus-visible,input:focus-visible,.size-box:focus-visible{outline:3px solid rgba(0,196,255,.55);outline-offset:3px}.app-footer{width:100%;max-width:1000px;padding:0 18px 26px;color:#0b1b2aa6;font-size:.9rem}.app-footer .foot-card{background:#ffffff8c;border:1px solid rgba(11,103,194,.14);border-radius:16px;padding:12px 14px;box-shadow:0 10px 28px #0a4f9614}@media (max-width:520px){.brand-text p{display:none}#aquarium{height:190px}.fish-row input[type=number],.fish-row input[type=search]{width:100%;flex:1 1 160px}.fish-row button{width:100%}}
