:root{
  --bg:#0b1220; --panel:#141d2e; --panel-2:#1b2639; --line:#26334a;
  --ink:#e8eef8; --muted:#8ea1bd; --accent:#f97316; --accent-ink:#1a1005;
  --good:#16a34a; --warn:#f59e0b; --bad:#dc2626; --radius:14px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-text-size-adjust:100%; overscroll-behavior-y:contain;
}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent)}

/* ---------- chrome ---------- */
.topbar{
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  background:var(--panel);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:500;
}
.brand{font-weight:800;letter-spacing:.14em;font-size:13px;color:var(--accent)}
.topbar .spacer{flex:1}
.who{
  background:var(--panel-2);border:1px solid var(--line);border-radius:99px;
  padding:6px 12px;max-width:44vw;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;
}
.nav{display:flex;gap:2px;background:var(--panel-2);border-radius:99px;padding:3px}
.nav a{
  padding:6px 13px;border-radius:99px;text-decoration:none;color:var(--muted);font-size:13px;font-weight:600;
}
.nav a.on{background:var(--accent);color:var(--accent-ink)}

@media (max-width:540px){
  .topbar{flex-wrap:wrap;row-gap:8px;padding:10px 12px}
  .nav{flex:1 0 100%;justify-content:stretch}
  .nav a{flex:1;text-align:center;padding:8px 6px}
  .who{max-width:none;flex:1;min-width:0}
}

.wrap{padding:14px;max-width:1100px;margin:0 auto}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:14px}
.card h2{margin:0 0 12px;font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.grow{flex:1;min-width:130px}
.muted{color:var(--muted)}
.small{font-size:13px}

/* ---------- controls ---------- */
input,select,textarea{
  background:var(--panel-2);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;width:100%;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}
label.field{display:block;margin-bottom:10px}
label.check{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
label.check input[type=checkbox]{width:18px;height:18px;flex:none;accent-color:var(--accent)}
label.field span{display:block;font-size:12px;color:var(--muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:.06em}
.btn{
  background:var(--panel-2);border:1px solid var(--line);border-radius:10px;
  padding:10px 15px;font-weight:600;cursor:pointer;min-height:42px;
}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.ghost{background:transparent}
.btn.danger{border-color:#5b2020;color:#fca5a5}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- knock screen ---------- */
.knock-stage{display:flex;flex-direction:column;align-items:center;gap:14px;padding:18px 14px 8px}
.knock-btn{
  width:min(74vw,300px);aspect-ratio:1;border-radius:50%;border:none;
  background:radial-gradient(circle at 34% 30%,#fdba74,var(--accent) 62%);
  color:var(--accent-ink);font-size:34px;font-weight:900;letter-spacing:.06em;
  box-shadow:0 14px 40px rgba(249,115,22,.32);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.knock-btn small{font-size:13px;font-weight:700;opacity:.75;letter-spacing:.1em}
.knock-btn:active{transform:scale(.97)}
.knock-btn.armed{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 14px 60px rgba(249,115,22,.6)}}

.timer{font-size:58px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1;letter-spacing:-.02em}
.timer.alerting{color:var(--warn);animation:flash .7s steps(2,end) infinite}
@keyframes flash{50%{opacity:.35}}
.stop-meta{text-align:center;max-width:420px}
.stop-meta .addr{font-weight:600;margin-bottom:2px;min-height:20px}

.outcomes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;width:100%;max-width:560px}
.outcome-btn{
  border:none;border-radius:12px;padding:16px 12px;font-weight:700;font-size:16px;
  color:#fff;cursor:pointer;min-height:60px;text-shadow:0 1px 2px rgba(0,0,0,.3);
}
.outcome-btn:active{transform:scale(.98)}

#map{height:min(46vh,340px);border-radius:var(--radius);border:1px solid var(--line);background:#0f1626}
.lp-map{height:min(38vh,260px);border-radius:12px;border:1px solid var(--line);background:#0f1626}
.leaflet-container{background:#0f1626;font:inherit}

.notice{
  background:#2a2010;border:1px solid #7c5e12;color:#fde68a;
  border-radius:10px;padding:9px 12px;margin:0 0 10px;font-size:13px;
}

/* ---------- alert overlay ---------- */
.overlay{
  position:fixed;inset:0;background:rgba(5,9,18,.9);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:16px;z-index:1000;
}
.overlay[hidden]{display:none}
.sheet{
  background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px;
  width:100%;max-width:520px;max-height:92vh;overflow:auto;
}
.sheet h3{margin:0 0 4px;font-size:21px}
.sheet .lead{color:var(--muted);margin:0 0 16px}

/* ---------- report ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:10px}
.stat{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:11px 13px}
.stat b{display:block;font-size:24px;font-variant-numeric:tabular-nums}
.stat span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.tally{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pill{border-radius:99px;padding:4px 11px;font-size:13px;font-weight:600;color:#fff;white-space:nowrap}

.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:640px}
th,td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);white-space:nowrap}
tbody tr:hover{background:var(--panel-2)}
td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td.actions{white-space:nowrap;text-align:right}
.icon-btn{background:none;border:1px solid var(--line);border-radius:8px;padding:5px 9px;cursor:pointer;font-size:13px}
.export-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:9px}

/* ---------- admin dashboard ---------- */
/* A standing visual cue that this is the admin surface, not a knocker's. */
.admin-badge{background:#3b2a08;border-color:#a16207;color:#fcd34d;font-weight:800;letter-spacing:.08em}
body.admin .brand{color:#fcd34d}

.out-row{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--panel-2);border:1px solid var(--line);border-radius:11px;
  padding:10px 12px;margin-bottom:8px;
}
.out-who{font-weight:700}
.out-where{flex:1;min-width:120px}
.out-clock{
  font-variant-numeric:tabular-nums;font-weight:700;
  background:#132a1c;border:1px solid #166534;color:#86efac;
  border-radius:99px;padding:3px 10px;font-size:13px;
}
.out-clock.stale{background:#3b2a08;border-color:#a16207;color:#fcd34d}

.spark{display:flex;align-items:flex-end;gap:4px;height:110px}
.spark-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:4px}
.spark-bar{width:100%;min-height:2px;background:var(--accent);border-radius:3px 3px 0 0;opacity:.85}
.spark-label{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}

/* A password link is long and needs to be selectable in one gesture on a
   phone, so it gets its own full-width, monospaced, scrollable field. */
.link-box{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;background:var(--bg);border:1px solid var(--line);
  border-radius:10px;padding:11px 12px;width:100%;
}
.badge.pending{background:#3b2a08;border-color:#a16207;color:#fcd34d;flex:none}

/* ---------- misc ---------- */
.toast{
  position:fixed;left:50%;transform:translateX(-50%);bottom:calc(18px + var(--safe-b));
  background:var(--panel-2);border:1px solid var(--line);border-radius:99px;
  padding:10px 18px;z-index:2000;box-shadow:0 8px 30px rgba(0,0,0,.5);max-width:90vw;
}
.toast[hidden]{display:none}
.badge{font-size:11px;padding:2px 8px;border-radius:99px;background:var(--panel-2);border:1px solid var(--line);color:var(--muted)}
.badge.offline{background:#4a1d1d;border-color:#7f1d1d;color:#fecaca}
.timer-badge{
  background:#132a1c;border-color:#166534;color:#86efac;font-variant-numeric:tabular-nums;
  font-weight:700;cursor:pointer;padding:4px 10px;
}
.timer-badge::before{content:'⏱ ';}
.back-btn{padding:6px 12px;min-height:auto;font-size:13px;white-space:nowrap;flex:none;text-decoration:none}
.drag-list li{display:flex;align-items:center;gap:9px;flex-wrap:wrap;background:var(--panel-2);
  border:1px solid var(--line);border-radius:11px;padding:9px;margin-bottom:8px;list-style:none}
.drag-list li input[data-k="label"]{flex:1 1 90px;min-width:0}
.drag-list li select{flex:0 1 auto;min-width:100px;padding:10px 6px}
.row-btns{display:flex;gap:6px;margin-left:auto;flex:none}
.row-btns .icon-btn{padding:7px 9px;line-height:1}
.drag-list{padding:0;margin:0}
.swatch{width:34px;height:34px;padding:0;border-radius:8px;border:1px solid var(--line);flex:none;background:none}