:root{
  --bg:#0B0D10; --panel:#151A20; --panel-2:#1D242C; --line:#2A323C;
  --text:#E8ECEF; --text-dim:#8B95A1;
  --green:#1FE071; --red:#FF3B3F; --amber:#FFB020; --blue:#2FB6E0; --purple:#A855F7;
  --radius:14px;
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--font-body);}
a{color:inherit;text-decoration:none;}
.app{max-width:480px;margin:0 auto;min-height:100vh;padding:0 0 90px;}
.topbar{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(11,13,16,.92);backdrop-filter:blur(6px);z-index:5;}
.back-btn{width:38px;height:38px;border-radius:10px;background:var(--panel);border:1px solid var(--line);color:var(--text);font-size:18px;display:flex;align-items:center;justify-content:center;}
.topbar h1{font-family:var(--font-display);font-size:16px;font-weight:600;margin:0;flex:1;}
h2.title{font-family:var(--font-display);font-size:22px;font-weight:700;margin:14px 18px 4px;}
p.lede{color:var(--text-dim);font-size:14px;margin:0 18px 22px;line-height:1.5;}
.tally{width:13px;height:13px;border-radius:50%;display:inline-block;flex-shrink:0;box-shadow:0 0 0 2px rgba(255,255,255,.15);}
.tally.red{background:var(--red);box-shadow:0 0 0 2px rgba(255,255,255,.15),0 0 12px rgba(255,59,63,.8);}
.tally.amber{background:var(--amber);box-shadow:0 0 0 2px rgba(255,255,255,.15),0 0 12px rgba(255,176,32,.75);}
.tally.green{background:var(--green);box-shadow:0 0 0 2px rgba(255,255,255,.15),0 0 12px rgba(31,224,113,.8);}
.tally.blue{background:var(--blue);box-shadow:0 0 0 2px rgba(255,255,255,.15),0 0 12px rgba(47,182,224,.85);}
.tally.purple{background:var(--purple);box-shadow:0 0 0 2px rgba(255,255,255,.15),0 0 12px rgba(168,85,247,.85);}
.field{padding:0 18px;margin-bottom:14px;}
.field label{font-size:12px;color:var(--text-dim);display:block;margin-bottom:6px;font-weight:500;}
.field input,.field textarea,.field select{width:100%;padding:14px 16px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--text);font-size:16px;font-family:var(--font-mono);}
.btn{display:block;width:calc(100% - 36px);margin:0 18px 14px;padding:16px;border-radius:12px;border:none;font-family:var(--font-display);font-weight:600;font-size:16px;cursor:pointer;text-align:center;}
.btn-primary{background:var(--blue);color:#04202C;}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--text);}
.btn-big{padding:26px;font-size:19px;border-radius:16px;}
.btn-yes{background:var(--green);color:#06280F;}
.btn-amber{background:var(--amber);color:#2E1D00;}
.btn-no{background:var(--red);color:#2A0709;}
.btn-purple{background:var(--purple);color:#2A0940;}
.btn-blue{background:var(--blue);color:#04202C;}
.tabgrid{padding:0 18px;display:flex;flex-direction:column;gap:14px;}
.tabcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px;display:flex;align-items:center;justify-content:space-between;}
.tabcard .lbl{font-family:var(--font-display);font-size:18px;font-weight:600;}
.num-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 18px;}
.num-btn{aspect-ratio:1;background:var(--panel);border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;}
.num-btn .n{font-family:var(--font-mono);font-size:20px;font-weight:600;}
.cam-list{display:flex;flex-direction:column;gap:10px;padding:0 18px;}
.cam-row{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px;display:flex;align-items:center;gap:12px;}
.cam-row .name{font-family:var(--font-display);font-weight:600;font-size:16px;flex:1;}
.cam-row .meta{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);}
.qtext{font-family:var(--font-display);font-size:20px;font-weight:600;margin:20px 18px 26px;line-height:1.35;}
.chip-grid{display:flex;flex-wrap:wrap;gap:10px;margin:4px 18px 20px;}
.chip{padding:12px 16px;border-radius:999px;border:1px solid var(--line);background:var(--panel);font-size:14px;color:var(--text);cursor:pointer;}
.chip.on{background:var(--amber);color:#2E1D00;border-color:var(--amber);font-weight:600;}
.section-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--text-dim);text-transform:uppercase;margin:18px 18px 8px;}
.mini-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;padding:0 18px;}
.mini-cell{aspect-ratio:1;border-radius:7px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:10px;font-weight:700;}
.mini-cell.red{background:var(--red);color:#3A0505;} .mini-cell.amber{background:var(--amber);color:#2E1D00;}
.mini-cell.green{background:var(--green);color:#04280F;} .mini-cell.blue{background:var(--blue);color:#04202C;}
.mini-cell.purple{background:var(--purple);color:#fff;}
.courts-super-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 18px;}
.court-block{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:6px;}
.court-block .clabel{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);}
.court-block .cams{display:flex;gap:5px;}
.progress-bar{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;margin:0 18px 10px;}
.progress-bar .num{font-family:var(--font-mono);font-size:20px;font-weight:700;color:var(--green);}
.bottomnav{position:fixed;bottom:0;left:0;right:0;max-width:480px;margin:0 auto;display:flex;border-top:1px solid var(--line);background:rgba(11,13,16,.97);}
.bottomnav a{flex:1;background:none;border:none;color:var(--text-dim);font-size:11px;padding:12px 4px 14px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;}
.bottomnav a.active{color:var(--blue);}
.admin-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;margin:0 18px 12px;}
.admin-card h4{margin:0 0 10px;font-family:var(--font-display);font-size:14px;}
.pill{font-family:var(--font-mono);font-size:11px;background:var(--panel-2);padding:4px 10px;border-radius:999px;color:var(--text-dim);}
.row-between{display:flex;justify-content:space-between;align-items:center;}
.thumb{width:70px;height:70px;border-radius:10px;background:var(--panel-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:22px;overflow:hidden;}
.thumb img{width:100%;height:100%;object-fit:cover;}
.login-wrap{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 24px;}
.error-msg{background:#3A0F10;border:1px solid var(--red);color:#FFD8D8;padding:12px 16px;border-radius:10px;margin:0 18px 16px;font-size:14px;}
.histline{border-left:2px solid var(--line);padding:2px 0 2px 14px;margin:0 18px 10px;font-size:13px;}
.histline .t{color:var(--text-dim);font-family:var(--font-mono);font-size:11px;}
.todo-row{background:var(--panel);border:1px solid var(--amber);border-radius:12px;padding:14px 16px;margin:0 18px 10px;}
.todo-row .reasons{color:var(--amber);font-size:13px;font-weight:600;margin-top:4px;}
.badge-count{background:var(--amber);color:#2E1D00;border-radius:999px;padding:2px 8px;font-size:11px;font-weight:700;font-family:var(--font-mono);}
@media (min-width:900px){
  .app{max-width:1180px;padding-bottom:60px;}
  .tabgrid{flex-direction:row;flex-wrap:wrap;} .tabcard{flex:1 1 220px;}
  .courts-super-grid{grid-template-columns:repeat(8,1fr);}
  .mini-grid{grid-template-columns:repeat(10,1fr) !important;}
  .bottomnav{position:sticky;}
}