:root{--ink:#f2f6f1;--muted:rgba(235,244,239,.62);--line:rgba(255,255,255,.14);--glass:rgba(7,20,25,.54);--green:#9bd4b4;--amber:#e1b875;--danger:#dc826e}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:#03090b;color:var(--ink);overscroll-behavior:none}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Noto Sans SC",sans-serif}
button{font:inherit;color:inherit}
.aquarium{position:fixed;inset:0;overflow:hidden;background:#061014;isolation:isolate}
#tank{display:block;width:100%;height:100%;touch-action:none}
.glass-reflection{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(107deg,transparent 16%,rgba(255,255,255,.055) 25%,transparent 38%),linear-gradient(90deg,rgba(255,255,255,.025),transparent 9%,transparent 90%,rgba(255,255,255,.02));mix-blend-mode:screen}
.topbar{position:absolute;z-index:3;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;padding:max(23px,env(safe-area-inset-top)) 20px 0;text-shadow:0 2px 18px rgba(0,0,0,.72);pointer-events:none}
.eyebrow{margin:0 0 1px;color:rgba(236,246,240,.52);font-size:8px;font-weight:700;letter-spacing:.24em}
h1{margin:0;font-family:"Times New Roman","Songti SC",serif;font-size:38px;font-weight:500;letter-spacing:.13em}
.tank-age{margin:1px 0 0;color:rgba(236,246,240,.57);font-size:10px;letter-spacing:.1em}
.round-button{display:grid;place-items:center;width:39px;height:39px;margin-top:5px;border:1px solid var(--line);border-radius:50%;background:rgba(5,17,22,.38);font-family:serif;font-size:20px;backdrop-filter:blur(12px);pointer-events:auto}
.water-summary{position:absolute;z-index:3;top:max(110px,calc(env(safe-area-inset-top) + 84px));right:14px;display:grid;grid-template-columns:38px 1fr 12px;align-items:center;gap:9px;width:160px;padding:9px 10px;border:1px solid var(--line);border-radius:17px;background:rgba(7,22,27,.45);box-shadow:0 10px 35px rgba(0,0,0,.22);backdrop-filter:blur(18px) saturate(125%);text-align:left}
.quality-ring{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:conic-gradient(var(--green) var(--quality-angle,270deg),rgba(255,255,255,.12) 0);position:relative}
.quality-ring:after{position:absolute;inset:3px;border-radius:50%;background:#17332f;content:""}
.quality-ring strong{position:relative;z-index:1;font-size:11px}.summary-copy small,.summary-copy strong{display:block}.summary-copy small{margin-bottom:2px;color:var(--muted);font-size:8px;letter-spacing:.08em}.summary-copy strong{font-size:11px}.summary-arrow{color:rgba(255,255,255,.45);font-size:21px}
.observation{position:absolute;z-index:2;left:50%;bottom:calc(105px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:7px;width:max-content;max-width:calc(100vw - 36px);padding:7px 11px;transform:translateX(-50%);border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(4,15,19,.34);backdrop-filter:blur(12px);color:rgba(238,246,241,.72);font-size:10px;letter-spacing:.04em;text-shadow:0 2px 10px rgba(0,0,0,.5);pointer-events:none}
.observation-dot{width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
.controls{position:absolute;z-index:4;left:50%;bottom:max(15px,env(safe-area-inset-bottom));display:grid;grid-template-columns:62px 70px 62px 62px;align-items:center;transform:translateX(-50%);padding:7px;border:1px solid var(--line);border-radius:28px;background:rgba(4,15,19,.58);box-shadow:0 18px 50px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.05);backdrop-filter:blur(22px) saturate(125%)}
.controls button{display:grid;place-items:center;gap:3px;min-height:54px;border:0;border-radius:21px;background:transparent;color:rgba(234,243,238,.62);font-size:9px}.control-icon{height:24px;color:rgba(245,249,246,.9);font-family:serif;font-size:23px;line-height:1}
.controls .feed-button{position:relative;width:58px;height:58px;min-height:58px;margin:-14px auto 0;border:1px solid rgba(239,247,242,.31);border-radius:50%;background:linear-gradient(145deg,rgba(230,240,233,.24),rgba(83,123,107,.17));box-shadow:0 8px 24px rgba(0,0,0,.36),inset 0 1px rgba(255,255,255,.24)}
.feed-button strong{font-family:"Songti SC",serif;font-size:18px;font-weight:500}.feed-grains{position:absolute;top:8px;font-size:10px;letter-spacing:3px}.controls button:active,.round-button:active{transform:scale(.94)}
.sheet-backdrop{position:absolute;inset:0;z-index:7;background:rgba(0,5,7,.43);backdrop-filter:blur(3px)}.sheet-backdrop[hidden]{display:none}
.sheet{position:absolute;z-index:8;left:0;right:0;bottom:0;max-height:82%;padding:9px 18px calc(24px + env(safe-area-inset-bottom));overflow:auto;border-top:1px solid rgba(255,255,255,.17);border-radius:28px 28px 0 0;background:linear-gradient(160deg,rgba(17,37,39,.97),rgba(6,18,22,.98));box-shadow:0 -25px 70px rgba(0,0,0,.45);transform:translateY(105%);transition:transform .38s cubic-bezier(.2,.75,.2,1)}
.sheet.open{transform:translateY(0)}.sheet-handle{width:35px;height:4px;margin:0 auto 14px;border-radius:4px;background:rgba(255,255,255,.22)}
.sheet-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px}.sheet-kicker{margin:0 0 3px;color:rgba(230,242,236,.45);font-size:8px;font-weight:700;letter-spacing:.22em}.sheet h2{margin:0;font-family:"Songti SC",serif;font-size:25px;font-weight:500;letter-spacing:.08em}.close-sheet{width:35px;height:35px;border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.04);font-size:22px;font-weight:200}
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px}.metrics article{padding:13px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(255,255,255,.035)}.metrics small,.metrics strong{display:block}.metrics small{color:var(--muted);font-size:10px}.metrics strong{margin:5px 0 9px;font-size:19px;font-weight:500}.meter{display:block;height:3px;overflow:hidden;border-radius:3px;background:rgba(255,255,255,.1)}.meter i{display:block;width:0;height:100%;border-radius:inherit;background:var(--green);transition:width .4s}.meter.danger i{background:var(--danger)}
.care-note{margin:11px 0 18px;padding:11px 13px;border-left:2px solid var(--amber);border-radius:0 10px 10px 0;background:rgba(224,184,117,.08);color:rgba(244,239,225,.75);font-size:11px;line-height:1.55}
.sheet h3{margin:18px 0 9px;color:rgba(239,246,242,.72);font-size:11px;font-weight:500;letter-spacing:.08em}.water-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.water-options button{padding:12px 4px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.035)}.water-options strong,.water-options span{display:block}.water-options strong{font-size:18px;font-weight:500}.water-options span{margin-top:4px;color:var(--muted);font-size:8px}
.secondary-action{width:100%;margin-top:10px;padding:12px;border:1px solid rgba(255,255,255,.12);border-radius:13px;background:rgba(255,255,255,.06);font-size:11px}
.history-stats{display:grid;grid-template-columns:repeat(3,1fr);padding:14px 0;border-top:1px solid rgba(255,255,255,.09);border-bottom:1px solid rgba(255,255,255,.09)}.history-stats div{text-align:center}.history-stats div+div{border-left:1px solid rgba(255,255,255,.09)}.history-stats strong,.history-stats span{display:block}.history-stats strong{font-family:Georgia,serif;font-size:24px;font-weight:400}.history-stats span{margin-top:4px;color:var(--muted);font-size:8px}
.fish-list{display:grid;gap:7px}.fish-row{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:10px;padding:9px 10px;border:1px solid rgba(255,255,255,.09);border-radius:14px;background:rgba(255,255,255,.025)}.fish-thumb{width:38px;height:28px;object-fit:cover;object-position:var(--fish-position);filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}.fish-row strong,.fish-row small{display:block}.fish-row strong{font-size:11px}.fish-row small{margin-top:2px;color:var(--muted);font-size:8px}.health{font-size:9px}.health.good{color:var(--green)}.health.warn{color:var(--amber)}.health.bad{color:var(--danger)}
.backup-card{margin-top:17px;padding:14px;border:1px solid rgba(255,255,255,.1);border-radius:17px;background:rgba(255,255,255,.035)}.backup-card strong{font-size:12px}.backup-card p{margin:5px 0 12px;color:var(--muted);font-size:9px;line-height:1.5}.backup-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.backup-actions button{padding:11px;border:1px solid rgba(255,255,255,.13);border-radius:11px;background:rgba(255,255,255,.06);font-size:10px}
.toast{position:absolute;z-index:12;left:50%;top:48%;max-width:80%;padding:10px 15px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(3,14,18,.8);box-shadow:0 12px 35px rgba(0,0,0,.35);backdrop-filter:blur(14px);color:#eff6f2;font-size:11px;text-align:center;opacity:0;transform:translate(-50%,8px);transition:.25s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(min-width:700px){.aquarium{left:50%;width:min(100vw,540px);transform:translateX(-50%);box-shadow:0 0 100px rgba(0,0,0,.8)}}
@media(max-width:350px){.controls{grid-template-columns:57px 64px 57px 57px}.water-summary{width:148px}}