:root{--navy: #1e2761;--navy-2: #2a357f;--ink: #0e1330;--panel: #151b3d;--panel-2: #1d2550;--line: #33407e;--text: #f4f6ff;--muted: #a7b0dd;--accent: #4fd1a5;--green: #2fae6b;--amber: #e0a500;--red: #e0483d;--tap: 64px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:Segoe UI,system-ui,-apple-system,Arial,sans-serif;background:var(--ink);color:var(--text);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}.app{display:flex;flex-direction:column;min-height:100%;max-width:720px;margin:0 auto}.topbar{display:flex;align-items:center;gap:12px;padding:14px 16px calc(14px + env(safe-area-inset-bottom,0));padding-top:max(14px,env(safe-area-inset-top,0));background:var(--navy);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}.topbar h1{font-size:18px;margin:0;flex:1;line-height:1.2}.topbar .sub{color:var(--muted);font-size:12px;font-weight:400;display:block}.content{flex:1;padding:16px;display:flex;flex-direction:column;gap:12px}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--line);background:var(--panel-2);color:var(--text);font-size:18px;font-weight:600;min-height:var(--tap);border-radius:14px;padding:0 18px;cursor:pointer;touch-action:manipulation}.btn:active{transform:translateY(1px)}.btn.primary{background:var(--accent);color:#06231a;border-color:transparent}.btn.ghost{background:transparent}.btn.wide{width:100%}.btn:disabled{opacity:.45}.iconbtn{min-width:var(--tap);min-height:48px;border-radius:12px;background:transparent;border:1px solid var(--line);color:var(--text);font-size:18px;padding:0 14px;cursor:pointer}.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px}.list{display:flex;flex-direction:column;gap:12px}.rowbtn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;min-height:76px;padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer}.rowbtn .title{font-size:19px;font-weight:700}.rowbtn .meta{color:var(--muted);font-size:13px;margin-top:2px}.chev{color:var(--muted);font-size:26px}.muted{color:var(--muted)}.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;border:1px solid var(--line)}.badge.pending{background:#e0a50029;border-color:var(--amber);color:#ffdf8a}.badge.done{background:#2fae6b29;border-color:var(--green);color:#9be9bf}.badge.offline{background:#e0483d29;border-color:var(--red);color:#ffb3ac}.dot{width:9px;height:9px;border-radius:50%;display:inline-block}.dot.green{background:var(--green)}.dot.amber{background:var(--amber)}.dot.red{background:var(--red)}.dot.none{background:var(--muted)}.ing{border:1px solid var(--line);border-radius:16px;padding:14px 16px;background:var(--panel);display:flex;flex-direction:column;gap:6px}.ing.active{border-color:var(--accent);background:var(--panel-2)}.ing.state-green{border-left:8px solid var(--green)}.ing.state-amber{border-left:8px solid var(--amber)}.ing.state-red{border-left:8px solid var(--red)}.ing .name{font-size:18px;font-weight:700}.ing .target{font-size:15px;color:var(--muted)}.ing .big{font-size:30px;font-weight:800;letter-spacing:.5px}.readout{text-align:center;padding:8px 0 4px}.readout .val{font-size:46px;font-weight:800;font-variant-numeric:tabular-nums}.readout .unit{font-size:20px;color:var(--muted);margin-left:6px}.variance{font-size:16px;font-weight:700;margin-top:4px}.variance.green{color:#9be9bf}.variance.amber{color:#ffdf8a}.variance.red{color:#ffb3ac}.variance.none{color:var(--muted)}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.key{min-height:68px;font-size:26px;font-weight:700;border-radius:14px;border:1px solid var(--line);background:var(--panel-2);color:var(--text);cursor:pointer;touch-action:manipulation}.key:active{background:var(--navy-2)}.field{display:flex;flex-direction:column;gap:6px}.field label{font-size:13px;color:var(--muted);font-weight:600}.field input{min-height:52px;border-radius:12px;border:1px solid var(--line);background:var(--ink);color:var(--text);font-size:18px;padding:0 14px}.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.progress{font-size:14px;color:var(--muted);font-weight:600}.error{color:#ffb3ac;font-weight:600;min-height:22px}.banner{background:var(--accent);color:#06231a;text-align:center;padding:10px;font-weight:700;cursor:pointer}.center{text-align:center}.stack{display:flex;flex-direction:column;gap:10px}.spread{display:flex;align-items:center;justify-content:space-between;gap:10px}