/* Arrive Alive sign-in and admin pages: design v2 tokens (same as the console), three blocks per theme rule. */
:root{
  --f:'Figtree',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif; --mono:'Martian Mono',ui-monospace,Menlo,monospace;
  --bg:#EDEEF6; --sheet:#FFFFFF; --sheet-2:#F6F6FB; --glass:rgba(255,255,255,.78); --glass-bar:rgba(237,238,246,.82);
  --ink:#13102B; --ink-2:#3C3A57; --ink-3:#5A5873; --ink-4:#9C9BB3;
  --rule:#E1E2EE; --rule-2:#D2D4E5;
  --accent:#2457E6; --accent-2:#0B8FA8; --accent-ink:#1A43B8; --accent-soft:#E7EDFF; --accent-line:#C9D5FA;
  --gold:#F5B547; --gold-ink:#8A5A00; --gold-strong:#6B4600; --gold-soft:#FFF1D2; --gold-line:#EBD9AE; --gold-wash:#FFF8E8;
  --lime:#A3D919; --lime-ink:#4F6B00; --lime-soft:#F1F8DE;
  --mint:#2FD39A; --mint-ink:#0B7A57; --mint-soft:#E2F5EC;
  --coral:#E0485F; --coral-ink:#B8374B; --coral-soft:#FDF1F2;
  --amber:#B97A12; --red:#E0485F; --track:#E3E4EF; --na:#9A9DB3;
  --primary:#13102B; --on-primary:#FFFFFF;
  --shadow:0 16px 40px rgba(19,16,43,.08); --shadow-lg:0 30px 70px rgba(19,16,43,.12);
  --grad:linear-gradient(90deg,#2457E6 0%,#0B8FA8 100%); --grad-gold:linear-gradient(90deg,#B97A12 0%,#E39A1C 100%);
  --glow-a:rgba(36,87,230,.12); --glow-b:rgba(245,181,71,.12);
  --term:#0A0C16; --term-ink:#C5CAD8;
  --c-fatigue:#2457E6; --c-negligent:#C2410C; --c-speed:#0B8FA8; --c-tyre:#BE185D; --c-other:#8A8BA3;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#05060B; --sheet:#121522; --sheet-2:#0B0D18; --glass:rgba(18,21,34,.72); --glass-bar:rgba(5,6,11,.74);
  --ink:#EEF0F7; --ink-2:#C5CAD8; --ink-3:#9399AD; --ink-4:#5A6078;
  --rule:rgba(255,255,255,.08); --rule-2:rgba(255,255,255,.15);
  --accent:#7AA2FF; --accent-2:#4DE1FF; --accent-ink:#A9C2FF; --accent-soft:rgba(122,162,255,.14); --accent-line:rgba(122,162,255,.38);
  --gold-ink:#E8C37A; --gold-strong:#F5CB80; --gold-soft:rgba(245,181,71,.14); --gold-line:rgba(245,181,71,.38); --gold-wash:rgba(245,181,71,.07);
  --lime:#C8FF4D; --lime-ink:#C8FF4D; --lime-soft:rgba(200,255,77,.10);
  --mint:#7EE3C4; --mint-ink:#7EE3C4; --mint-soft:rgba(126,227,196,.12);
  --coral:#FF9C84; --coral-ink:#FF9C84; --coral-soft:rgba(255,138,107,.10);
  --amber:#F5B547; --red:#E5484D; --track:#262B3F; --na:#5A6078;
  --primary:#EEF0F7; --on-primary:#05060B;
  --shadow:0 18px 44px rgba(0,0,0,.35); --shadow-lg:0 30px 80px rgba(0,0,0,.45);
  --grad:linear-gradient(90deg,#7AA2FF 0%,#4DE1FF 100%); --grad-gold:linear-gradient(90deg,#F5B547 0%,#FFD88A 100%);
  --glow-a:rgba(122,162,255,.16); --glow-b:rgba(77,225,255,.07);
  --term:#05060B; --term-ink:#C5CAD8;
  --c-fatigue:#7AA2FF; --c-negligent:#FF9C6B; --c-speed:#4DE1FF; --c-tyre:#F472B6; --c-other:#8C93AB;
  color-scheme:dark;
} }
:root[data-theme="dark"]{
  --bg:#05060B; --sheet:#121522; --sheet-2:#0B0D18; --glass:rgba(18,21,34,.72); --glass-bar:rgba(5,6,11,.74);
  --ink:#EEF0F7; --ink-2:#C5CAD8; --ink-3:#9399AD; --ink-4:#5A6078;
  --rule:rgba(255,255,255,.08); --rule-2:rgba(255,255,255,.15);
  --accent:#7AA2FF; --accent-2:#4DE1FF; --accent-ink:#A9C2FF; --accent-soft:rgba(122,162,255,.14); --accent-line:rgba(122,162,255,.38);
  --gold-ink:#E8C37A; --gold-strong:#F5CB80; --gold-soft:rgba(245,181,71,.14); --gold-line:rgba(245,181,71,.38); --gold-wash:rgba(245,181,71,.07);
  --lime:#C8FF4D; --lime-ink:#C8FF4D; --lime-soft:rgba(200,255,77,.10);
  --mint:#7EE3C4; --mint-ink:#7EE3C4; --mint-soft:rgba(126,227,196,.12);
  --coral:#FF9C84; --coral-ink:#FF9C84; --coral-soft:rgba(255,138,107,.10);
  --amber:#F5B547; --red:#E5484D; --track:#262B3F; --na:#5A6078;
  --primary:#EEF0F7; --on-primary:#05060B;
  --shadow:0 18px 44px rgba(0,0,0,.35); --shadow-lg:0 30px 80px rgba(0,0,0,.45);
  --grad:linear-gradient(90deg,#7AA2FF 0%,#4DE1FF 100%); --grad-gold:linear-gradient(90deg,#F5B547 0%,#FFD88A 100%);
  --glow-a:rgba(122,162,255,.16); --glow-b:rgba(77,225,255,.07);
  --term:#05060B; --term-ink:#C5CAD8;
  --c-fatigue:#7AA2FF; --c-negligent:#FF9C6B; --c-speed:#4DE1FF; --c-tyre:#F472B6; --c-other:#8C93AB;
  color-scheme:dark;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font:400 16px/1.5 var(--f); -webkit-font-smoothing:antialiased; min-height:100vh}
body::before{content:""; position:fixed; inset:0; pointer-events:none; z-index:0; background:radial-gradient(900px 600px at 85% -10%,var(--glow-a),transparent 70%),radial-gradient(700px 520px at -10% 40%,var(--glow-b),transparent 70%)}
a{color:var(--accent)} a:hover{color:var(--accent-ink)}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,p{margin:0}
h1{font-size:clamp(34px,4.6vw,52px); font-weight:400; line-height:1.04; letter-spacing:-.045em}
h2{font-size:22px; font-weight:600; letter-spacing:-.02em}
.eyebrow{font:400 11px/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.muted{color:var(--ink-3)} .small{font-size:14px} .mono{font-family:var(--mono)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
[hidden]{display:none!important}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 18px; border-radius:999px; border:1px solid var(--rule-2); background:var(--sheet); color:var(--ink); font-weight:600; font-size:15px; cursor:pointer; text-decoration:none; white-space:nowrap}
.btn:hover{border-color:var(--ink-3)}
.btn.primary{background:var(--primary); color:var(--on-primary); border-color:var(--primary)}
.btn.lg{min-height:52px; padding:0 26px; font-size:16px}
.btn.sm{min-height:36px; padding:0 12px; font-size:13px}
.btn.deny{color:var(--coral-ink); border-color:transparent; background:transparent}
.btn:disabled{opacity:.55; cursor:progress}
.btns{display:flex; flex-wrap:wrap; gap:8px}
.theme{display:flex; gap:2px; padding:3px; border-radius:999px; background:var(--sheet); border:1px solid var(--rule)}
.theme button{width:36px; height:36px; border:0; border-radius:999px; background:transparent; color:var(--ink-3); display:grid; place-items:center; cursor:pointer}
.theme button svg{width:16px; height:16px}
.theme button[aria-pressed="true"]{background:var(--bg); color:var(--ink)}
input.field,select.field,.gate input{width:100%; min-height:48px; padding:0 14px; border-radius:14px; border:1px solid var(--rule-2); background:var(--sheet); font-size:16px}
input.field:focus,select.field:focus,.gate input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft)}

/* ---------- sign-in ---------- */
.gate-tools{position:fixed; top:14px; right:14px; z-index:5}
.gate{position:relative; z-index:1; min-height:100vh; display:grid; place-items:center; padding:72px 16px 32px}
.gate-card{width:min(460px,100%); display:flex; flex-direction:column; gap:22px; padding:28px; border-radius:32px; background:var(--glass); -webkit-backdrop-filter:saturate(170%) blur(18px); backdrop-filter:saturate(170%) blur(18px); border:1px solid var(--rule); box-shadow:var(--shadow-lg)}
.gate-crew{display:flex; justify-content:center; align-items:flex-end; margin:-74px 0 -8px}
.gate-crew img{display:block; width:84px; height:84px; margin:0 -8px}
.gate-crew img.lead{width:120px; height:120px; margin:0 -4px; position:relative; z-index:1}
.brand{display:flex; align-items:center; gap:14px}
.brand svg{width:44px; height:44px; flex:none}
.gate form{display:flex; flex-direction:column; gap:10px}
.gate label{font-size:14px; font-weight:600}
.gate input{font-family:var(--mono); letter-spacing:.08em; text-transform:uppercase}
.gate input::placeholder{letter-spacing:.08em; color:var(--ink-4)}
.gate .btn.lg{width:100%}
.gate .btns .btn{flex:1 1 160px}
.msg{min-height:1.4em; font-size:14px; color:var(--coral-ink)}
.fine{font-size:12px; color:var(--ink-3); border-top:1px solid var(--rule); padding-top:14px}
@media (max-width:420px){ .gate-crew img{width:62px; height:62px} .gate-crew img.lead{width:96px; height:96px} .gate-card{padding:22px} }

/* ---------- admin ---------- */
.admin{position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:28px 20px 64px; display:flex; flex-direction:column; gap:22px}
.admin-h{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px}
.admin-h .lede{max-width:44em; color:var(--ink-2); margin-top:8px}
.panel{background:var(--sheet); border:1px solid var(--rule); border-radius:24px; padding:20px}
.panel-h{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.form-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); gap:12px 16px; align-items:end}
.form-grid label{display:block; font-size:13px; color:var(--ink-3); margin-bottom:6px}
.check{display:flex; align-items:center; gap:8px; font-size:14px; min-height:48px}
.check input{width:18px; height:18px; accent-color:var(--accent)}
.out{margin-top:14px; padding:16px; border-radius:18px; background:var(--gold-wash); border:1px solid var(--gold-line); display:flex; flex-direction:column; gap:10px}
.out .code{font:500 26px var(--mono); letter-spacing:.06em}
.out textarea{width:100%; min-height:80px; padding:10px 12px; border-radius:12px; border:1px solid var(--rule-2); background:var(--sheet); font-size:14px}
.scroll-x{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:14px}
th{font:400 10.5px/1.4 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); text-align:left; padding:10px 12px; border-bottom:1px solid var(--rule-2); white-space:nowrap}
td{padding:11px 12px; border-bottom:1px solid var(--rule); vertical-align:top}
tr:last-child td{border-bottom:0}
.tag{display:inline-flex; padding:3px 10px; border-radius:999px; font:400 10px/1.6 var(--mono); letter-spacing:.06em; text-transform:uppercase; background:var(--sheet-2); color:var(--ink-3); border:1px solid var(--rule)}
.tag.on{background:var(--mint-soft); color:var(--mint-ink); border-color:transparent}
.tag.off{background:var(--coral-soft); color:var(--coral-ink); border-color:transparent}
.tag.exp{background:var(--gold-soft); color:var(--gold-strong); border-color:transparent}
.actions{display:flex; flex-wrap:wrap; gap:6px}
.toast{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:50; padding:12px 18px; border-radius:16px; background:var(--primary); color:var(--on-primary); font-size:14px; box-shadow:var(--shadow-lg)}