:root{
  --bg:#0d1117; --panel:#161b22; --border:#30363d; --muted:#8b949e; --fg:#c9d1d9;
  --accent:#58a6ff; --primary:#2563eb; --green:#1a7f37; --red:#b62324; --blue:#1f6feb;
  --cat-bg:#fff3cd; --cat-fg:#7a5d00; --danger:#f85149;
  --tabbar-h:58px;
  color-scheme:dark;
}
*{box-sizing:border-box;} html,body{margin:0;height:100%;}
body{background:var(--bg);color:var(--fg);font:14px/1.4 -apple-system,system-ui,Roboto,sans-serif;
  -webkit-tap-highlight-color:transparent;}
a,button{-webkit-tap-highlight-color:transparent;outline:none;}
#app{display:flex;flex-direction:column;height:100dvh;}
#view{flex:1;min-height:0;position:relative;overflow:hidden;}
/* tab bar */
.tabbar{display:flex;background:#11161d;border-top:1px solid #222b36;
  padding:6px 2px calc(8px + env(safe-area-inset-bottom));}
.tabbar button{flex:1;background:none;border:0;color:#6e7681;font-size:9px;line-height:1.5;
  display:flex;flex-direction:column;align-items:center;gap:2px;padding:2px;}
.tabbar .ic{font-size:18px;}
.tabbar button.act{color:var(--accent);}
.tabbar button.act .ic{filter:drop-shadow(0 0 6px rgba(88,166,255,.6));}
/* generic */
.scroll{position:absolute;inset:0;overflow-y:auto;padding:12px;}
.field{width:100%;background:var(--panel);border:1px solid var(--border);border-radius:9px;
  padding:13px;font-size:14px;color:var(--fg);margin:8px 0;}
.btn-primary{width:100%;background:var(--primary);color:#fff;border:0;text-align:center;
  padding:14px;border-radius:10px;font-weight:700;font-size:15px;}
.btn-primary[disabled]{opacity:.4;}
.muted{color:var(--muted);font-size:12px;}
.error{color:var(--danger);font-size:13px;margin:8px 0;}
/* events */
.evhead{font-size:10px;text-transform:uppercase;color:#6e7681;margin:8px 2px 4px;letter-spacing:.5px;}
.ev{display:flex;align-items:center;gap:10px;padding:11px;border-radius:9px;background:var(--panel);
  margin-bottom:7px;font-size:13px;width:100%;border:0;color:var(--fg);text-align:left;}
.ev .box{width:18px;height:18px;border:2px solid var(--accent);border-radius:5px;flex:none;}
.ev .box.on{background:var(--accent);}
.ev.old{opacity:.5;}
.events-scroll{position:absolute;top:0;left:0;right:0;bottom:74px;overflow-y:auto;padding:12px;}
.pinned{position:absolute;left:12px;right:12px;bottom:12px;}
/* camera + reticle + sheet */
.cam-host{position:absolute;inset:0;background:#000;}
.cam-host video{width:100%;height:100%;object-fit:cover;}
.reticle{position:absolute;top:24%;left:18%;right:18%;height:150px;border:3px solid rgba(255,255,255,.7);
  border-radius:14px;pointer-events:none;}
.reticle.err{border-color:rgba(255,80,80,.8);}
.torch{position:absolute;top:14px;right:14px;background:rgba(0,0,0,.5);color:#fff;border:0;
  padding:9px 11px;border-radius:10px;font-size:18px;}
.torch.on{background:rgba(255,200,0,.35);}
.eco-hint{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:#fff;font-size:13px;text-shadow:0 1px 4px #000;}
.cam-msg{position:absolute;inset:0;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;padding:24px;text-align:center;}
.sheet{position:absolute;left:0;right:0;bottom:0;background:var(--bg);
  border-top-left-radius:18px;border-top-right-radius:18px;box-shadow:0 -6px 24px rgba(0,0,0,.5);}
.progress{height:6px;background:#21262d;} .progress i{display:block;height:100%;background:var(--accent);width:100%;transition:width .1s linear;}
.banner{color:#fff;text-align:center;padding:14px;font-weight:800;font-size:20px;letter-spacing:.5px;}
.banner.ok{background:var(--green);} .banner.used{background:var(--red);} .banner.inside{background:#1a4f7f;}
.cat-big{background:var(--cat-bg);color:var(--cat-fg);text-align:center;padding:14px;font-weight:800;font-size:28px;}
.cat-row{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--cat-bg);}
.cat-row .cat{font-size:24px;font-weight:800;color:var(--cat-fg);}
.count{font-size:13px;font-weight:700;color:var(--cat-fg);background:#ffe48a;padding:5px 10px;border-radius:20px;}
.row{display:flex;justify-content:space-between;padding:8px 16px;font-size:13px;border-top:1px solid #21262d;}
.row .lbl{font-size:11px;text-transform:uppercase;color:var(--muted);letter-spacing:.4px;}
.row b{color:#fff;}
.warn{background:#3a2a00;color:#f2c94c;text-align:center;padding:10px;font-size:13px;font-weight:600;}
.sheet-actions{display:flex;gap:10px;padding:12px 16px calc(16px + env(safe-area-inset-bottom));}
.sheet-actions .btn{flex:1;padding:15px;color:#fff;text-align:center;border-radius:12px;font-weight:700;font-size:15px;border:0;}
.btn.enter{background:var(--green);} .btn.exit{background:var(--blue);} .btn.confirm{background:var(--primary);}
.btn.neutral{background:#30363d;} .btn.dim{opacity:.32;pointer-events:none;}
/* stats */
.srow{display:flex;align-items:center;justify-content:space-between;padding:13px;border-radius:10px;background:var(--panel);margin-bottom:9px;}
.srow .n{font-size:24px;font-weight:800;color:#fff;}
.srow.ppl{background:#10241a;border:1px solid var(--green);} .srow.ppl .n{color:#7ee787;}
/* settings */
.tg{display:flex;justify-content:space-between;align-items:center;padding:13px 2px;border-bottom:1px solid #1c2530;}
.sw{width:40px;height:22px;border-radius:20px;background:#30363d;position:relative;flex:none;border:0;}
.sw.on{background:var(--green);}
.sw::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:2px;left:2px;transition:left .12s;}
.sw.on::after{left:20px;}
.logout{margin-top:16px;text-align:center;color:var(--danger);font-size:14px;font-weight:600;
  border:1px solid #5c2326;border-radius:9px;padding:12px;width:100%;background:none;}
.sub-field{display:flex;align-items:center;gap:8px;padding:10px 2px;}
.sub-field input{width:70px;background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:8px;color:var(--fg);}
.lat-overlay { position: absolute; left: 8px; bottom: 8px; z-index: 5;
  font: 600 11px/1.3 ui-monospace, monospace; color: #9effa0;
  background: rgba(0,0,0,.55); padding: 4px 7px; border-radius: 6px;
  pointer-events: none; -webkit-tap-highlight-color: transparent; }