:root {
  --night:#0A0920; --glow:#241B4E; --gold:#FFDDA6; --coral:#FF7E6B; --magenta:#C4328F;
  --sos:#E8456A; --safe:#10B981; --late:#F59E0B; --duress:#9333EA; --blue:#4C7DF0;
  --bg:#F4F3F9; --card:#FFFFFF; --ink:#14122B; --muted:#5E5A78; --line:#E3E0EE;
  --sos-soft:#FDECF0; --sos-ink:#B4234A; --safe-soft:#E7F8F1; --safe-ink:#047857; --late-soft:#FEF3C7; --late-ink:#B45309;
  --blue-soft:#E8EFFE; --blue-ink:#2952C4; --duress-soft:#F3E8FF; --duress-ink:#7E22CE;
  --grad:linear-gradient(120deg,var(--gold),var(--coral) 48%,var(--magenta));
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0B0A1C; --card:#15132E; --ink:#ECEAF6; --muted:#A29DBE; --line:#2A2650;
    --sos-soft:#3A1424; --sos-ink:#FF9BB3; --safe-soft:#0E2E25; --safe-ink:#6EE7B7; --late-soft:#3A2A0C; --late-ink:#FCD34D;
    --blue-soft:#1C2752; --blue-ink:#9DB8FF; --duress-soft:#2C1645; --duress-ink:#D8B4FE;
  }
}
* { box-sizing:border-box }
html, body { margin:0; height:100% }
body { font:15px/1.5 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--ink); background:var(--bg); display:flex; flex-direction:column }
button, input { font:inherit; color:inherit }
a { color:var(--blue) }
.hidden { display:none !important }
.muted { color:var(--muted) }
.small { font-size:13px }
:focus-visible { outline:3px solid var(--coral); outline-offset:2px }

.top { display:flex; align-items:center; gap:10px; padding:10px 16px; background:linear-gradient(135deg,var(--night),var(--glow)); color:#fff; position:sticky; top:0; z-index:1000 }
.top img { display:block }
.spacer { flex:1 }
.live { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:#C9C3DC; background:rgba(255,255,255,.08); padding:5px 10px; border-radius:999px }
.live i { width:8px; height:8px; border-radius:50%; background:var(--safe) }
.live.down i { background:var(--sos) }
.hbtn { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:#fff; border-radius:10px; padding:6px 10px; cursor:pointer; font-size:13px; font-weight:600 }
.hbtn[aria-pressed=true] { background:var(--safe); border-color:var(--safe) }

.redbar { background:var(--sos); color:#fff; font-weight:700; padding:10px 16px; text-align:center; animation:flash 1.2s ease-in-out infinite alternate }
@keyframes flash { from { background:var(--sos) } to { background:#B4234A } }
@media (prefers-reduced-motion: reduce) { .redbar { animation:none } }

.btn { border:0; border-radius:999px; padding:11px 20px; font-weight:700; cursor:pointer }
.btn.primary { background:var(--grad); color:var(--night) }
.btn.ghost { background:transparent; border:1px solid var(--line) }
.btn.small { padding:7px 14px; font-size:13px }
.btn.sos { background:var(--sos); color:#fff }
.btn.safe { background:var(--safe); color:#fff }
.btn:disabled { opacity:.6; cursor:wait }
.link { background:none; border:0; padding:0; cursor:pointer; color:var(--blue); font-size:13px; font-weight:600 }
.link.danger { color:var(--muted) }
.link.danger:hover { color:var(--sos-ink) }

label { display:block; font-weight:600; font-size:13px; margin:14px 0 6px }
input { width:100%; padding:11px 14px; border:1px solid var(--line); border-radius:12px; background:var(--card) }
input.code { font:700 18px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.15em; text-transform:uppercase }
.error { color:var(--sos-ink); font-size:13px; min-height:1em; margin:8px 0 }

/* Pairing */
.pair { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px 16px }
.pair-card { width:100%; max-width:440px; background:var(--card); border:1px solid var(--line); border-radius:20px; padding:28px }
.pair-card h1 { font-size:24px; letter-spacing:-.02em; margin:0 0 8px; line-height:1.2 }
.pair-card .btn { width:100%; margin-top:6px }
.desk { font-size:14px; color:var(--muted) }

/* Dashboard */
.dash { flex:1; display:grid; grid-template-columns:1fr 420px; min-height:0 }
.mapwrap { position:relative; min-height:320px }
#map { position:absolute; inset:0 }
.map-empty { position:absolute; left:50%; top:16px; transform:translateX(-50%); z-index:500; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:8px 14px; font-size:13px; color:var(--muted); max-width:90%; text-align:center }
.people { border-left:1px solid var(--line); overflow:auto; padding:16px }
.people-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px }
.people-head h2 { font-size:17px; margin:0 }
.add { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:4px 14px 8px; margin-bottom:12px }
.add .row { display:flex; gap:8px }
.list { list-style:none; margin:0; padding:0; display:grid; gap:12px }
.person { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px }
.person.alerting { border-color:var(--sos); box-shadow:0 0 0 3px var(--sos-soft) }
.p-head { display:flex; align-items:center; gap:10px }
.avatar { width:38px; height:38px; flex:none; border-radius:50%; display:grid; place-items:center; font-weight:800; color:var(--night); background:var(--grad) }
.p-name { flex:1; min-width:0 }
.p-name b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.presence { color:var(--muted); font-size:12.5px }
.presence::before { content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--muted); margin-right:6px; vertical-align:1px }
.presence.on::before { background:var(--safe) }
.status { margin-top:10px }
.status:empty { display:none }
.badge { display:inline-block; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:3px 9px; border-radius:999px }
.badge.sos { background:var(--sos-soft); color:var(--sos-ink) }
.badge.late { background:var(--late-soft); color:var(--late-ink) }
.badge.journey { background:var(--blue-soft); color:var(--blue-ink) }
.badge.duress { background:var(--duress-soft); color:var(--duress-ink) }
.badge.safe { background:var(--safe-soft); color:var(--safe-ink) }
.facts { margin:8px 0 0; padding:0; list-style:none; font-size:13.5px; color:var(--muted) }
.facts b { color:var(--ink); font-weight:600 }
.actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px }
.actions:empty { display:none }
.actions a.btn { text-decoration:none; color:inherit }

.pin { width:18px; height:18px; border-radius:50%; border:3px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.4) }
.pin.sos { background:var(--sos) } .pin.journey { background:var(--blue) }

@media (max-width:860px) {
  .dash { grid-template-columns:1fr; grid-template-rows:42vh auto }
  .people { border-left:0; border-top:1px solid var(--line) }
}