/* ============================================================
   KAirOS — Mobile MVP stylesheet
   Design: deep slate canvas · coral-orange primary · cyan accent
   ponytail: tokens locked once; all spacing/type/color via vars
   ============================================================ */

:root {
  /* Colors — dark slate canvas, coral primary, cyan emphasis */
  --brand: #FF8551;          /* coral-orange — primary accent */
  --brand-strong: #FF6A2E;   /* deeper orange for hover/active */
  --brand-soft: #3A2417;     /* warm-tinted dark surface for accents */
  --on-brand: #1A0F08;       /* dark text on coral fills */
  --cyan: #4FD4E8;           /* cyan-blue — sparing emphasis */
  --cyan-soft: #0E2D33;      /* dark cyan-tinted surface */
  --on-cyan: #0A1018;        /* dark text on cyan fills */
  --success: #4FD4A8;        /* mint (re-tuned for dark bg) */
  --success-soft: #10352A;
  --warn: #FFB454;           /* warm yellow-orange (re-tuned for dark bg) */
  --warn-soft: #3A2A0E;
  --danger: #FF6B6B;         /* soft red (re-tuned for dark bg) */
  --danger-soft: #3A1A1A;
  --info: #8FA0B5;
  --info-soft: #1F2A38;

  --surface: #1A2233;        /* main card surface (charcoal-navy) */
  --surface-2: #141A28;      /* app background (deeper slate) */
  --surface-3: #232E42;      /* elevated card / input bg */
  --shell: #080B12;          /* page backdrop behind the phone (desktop demo) */
  --bezel: #050810;          /* phone-frame border */
  --inset: #05080F;          /* deep inset canvas (CCTV wells, map beds) */
  --text: #F2F4F8;           /* off-white body text */
  --muted: #8FA0B5;          /* slate-gray muted text */
  --border: #2A3447;         /* subtle border on dark */
  --shadow-card: 0 1px 0 rgba(255, 255, 255, .03);  /* hairline, not drop shadow */
  --shadow-pop: 0 10px 30px rgba(0, 0, 0, .5);

  /* Type scale */
  --t-10: 10px;
  --t-11: 11px;
  --t-12: 12px;
  --t-14: 14px;
  --t-16: 16px;
  --t-22: 22px;
  --t-28: 28px;

  /* Spacing scale */
  --s-4: 4px;
  --s-8: 8px;
  --s-12: 12px;
  --s-16: 16px;
  --s-24: 24px;
  --s-32: 32px;

  /* Radii */
  --r-4: 4px;
  --r-6: 6px;
  --r-8: 8px;
  --r-10: 10px;
  --r-12: 12px;
  --r-16: 16px;
  --r-24: 24px;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Menlo, Consolas, monospace;

  /* Phone shell */
  --phone-w: 460px;
  --header-h: 52px;
  --nav-h: 60px;
}

/* ===== Reset / base ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--t-14);
  color: var(--text);
  background: var(--surface-2);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }

/* ===== Phone chrome (laptop demo bezel) ===== */
.phone-frame {
  display: contents;
}
.status-bar {
  display: none;
}

  /* ponytail: on desktop, lock body so the PAGE never scrolls — only screens scroll internally */
@media (min-width: 480px) {
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    padding: 16px;
    background: var(--shell);
  }
  .phone-frame {
    display: flex;
    flex-direction: column;
    /* ponytail: fill viewport height exactly; width follows phone aspect */
    height: 100%;
    width: auto;
    aspect-ratio: 9 / 19.42;
    max-width: var(--phone-w);
    background: var(--surface-2);
    border-radius: 44px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
    overflow: hidden;
    position: relative;
    border: 8px solid var(--bezel);
  }
  .phone-frame::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 28px;
    background: #000;
    border-radius: 20px;
    z-index: 60;
    pointer-events: none;
  }
  .status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 28px 6px;
    height: 44px;
    font-size: var(--t-14);
    font-weight: 600;
    color: var(--text);
    background: var(--surface-2);
    flex-shrink: 0;
    position: relative;
    z-index: 5;
  }
  .status-right { display: flex; align-items: center; gap: 6px; }
  .status-right .battery { font-size: var(--t-12); }
  .status-right [data-lucide] { width: 14px; height: 14px; }
}

/* ===== App shell ===== */
.phone-screen {
  background: var(--surface-2);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
/* ponytail: on desktop the phone-screen fills the rest of phone-frame */
@media (min-width: 480px) {
  .phone-screen {
    height: auto;
    flex: 1;
    min-height: 0;
  }
}
.app-shell {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* ===== App header ===== */
.app-header {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--s-8);
  padding: 0 var(--s-16);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 10;
}
.header-back {
  width: 36px;
  height: 36px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-8);
  color: var(--text);
}
.header-back.show { display: inline-flex; }
.header-back:hover { background: var(--surface-3); }
.header-back [data-lucide] { width: 20px; height: 20px; }
.header-title {
  flex: 1;
  font-size: var(--t-16);
  font-weight: 600;
}
.on-device-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--cyan-soft);
  color: var(--cyan);
  font-size: var(--t-11);
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid rgba(79, 212, 232, .25);
}
.on-device-badge [data-lucide] { width: 12px; height: 12px; }

/* ===== Screens (one visible at a time) ===== */
.screens {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background: var(--surface-2);
}
.screen {
  display: none;
  padding: var(--s-12) var(--s-16);
  padding-bottom: calc(var(--nav-h) + var(--s-16));
}
.screen[data-active="1"] {
  display: block;
  animation: fade .25s ease;
}
/* ponytail: onboarding must stay flex even when active (later rule wins on ties) */
.screen-onboard[data-active="1"] {
  display: flex;
}
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ===== Bottom nav ===== */
.bottom-nav {
  height: var(--nav-h);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: var(--t-11);
  font-weight: 500;
  color: var(--muted);
  position: relative;
}
.nav-item [data-lucide] { width: 22px; height: 22px; }
.nav-item.active { color: var(--brand); }
.nav-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  background: var(--brand);
  border-radius: 0 0 4px 4px;
}
.nav-dot {
  position: absolute;
  top: 8px;
  right: calc(50% - 24px);
  background: var(--brand);
  color: var(--surface-2);
  font-size: var(--t-10);
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 6px;
  min-width: 16px;
  text-align: center;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
  padding: var(--s-12) var(--s-16);
  border-radius: var(--r-12);
  font-size: var(--t-14);
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
}
.btn [data-lucide] { width: 16px; height: 16px; }
.btn-primary { background: var(--brand); color: var(--on-brand); }  /* dark text on orange for contrast */
.btn-primary:hover { background: var(--brand-strong); }
.btn-ghost { background: var(--surface-3); color: var(--text); }
.btn-ghost:hover { background: var(--border); }
.btn-outline {
  background: transparent;
  color: var(--brand);
  border: 1.5px solid var(--brand);
}
.btn-block { display: flex; width: 100%; }
.btn-cta {
  margin-top: var(--s-16);
  padding: var(--s-16) var(--s-24);
  font-size: var(--t-16);
}
.btn-mini {
  padding: var(--s-8) var(--s-12);
  font-size: var(--t-12);
  background: var(--brand);
  color: var(--on-brand);
  border-radius: var(--r-8);
}

/* ===== Chip ===== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  font-size: var(--t-12);
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: all .15s ease;
}
.chip [data-lucide] { width: 14px; height: 14px; }
.chip-active, .chip:hover {
  background: var(--brand-soft);
  color: var(--brand);
  border-color: rgba(255, 133, 81, .4);
}

/* ===== Cards ===== */
.card {
  background: var(--surface);
  border-radius: var(--r-16);
  padding: var(--s-12) var(--s-16);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  margin-bottom: var(--s-8);
}
.card.clickable { cursor: pointer; }
.card-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-11);
  font-weight: 600;
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: var(--s-8);
}
.card-eyebrow [data-lucide] { width: 14px; height: 14px; }
.card-title {
  font-size: var(--t-16);
  font-weight: 600;
  margin-bottom: var(--s-4);
}
.card-title-big {
  font-size: 36px;
  font-weight: 700;
  color: var(--brand);
  margin: var(--s-8) 0;
}

/* ===== Section title ===== */
.section-title {
  font-size: var(--t-12);
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: var(--s-16) 0 var(--s-8);
}
.page-title {
  font-size: var(--t-22);
  font-weight: 700;
  margin: 0;
}
.page-sub {
  font-size: var(--t-14);
  color: var(--muted);
  margin: 4px 0 var(--s-16);
}

/* ===== Onboarding ===== */
.screen-onboard {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  background: var(--surface-2);
  position: relative;
  overflow: hidden;
}
.onboard-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 133, 81, .18), transparent 50%),
    radial-gradient(circle at 80% 100%, rgba(79, 212, 232, .12), transparent 50%),
    var(--surface-2);
  z-index: 0;
}
.onboard-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--s-32) var(--s-24);
  position: relative;
  z-index: 1;
}

/* ===== Persona selector (onboarding + profile) ===== */
.persona-grid {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
  margin-top: var(--s-24);
}
.persona-grid-compact { gap: var(--s-8); margin-top: var(--s-12); }
.persona-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--s-12);
  align-items: center;
  text-align: left;
  padding: var(--s-16);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-16);
  color: var(--text);
  cursor: pointer;
  transition: border-color .15s ease, transform .1s ease, background .15s ease;
}
.persona-grid-compact .persona-card { padding: var(--s-12); }
.persona-card:hover { border-color: var(--brand); }
.persona-card:active { transform: scale(.99); }
.persona-card.selected {
  border-color: var(--brand);
  background: linear-gradient(180deg, rgba(255, 133, 81, .10), rgba(255, 133, 81, .03));
  box-shadow: 0 0 0 1px var(--brand) inset;
}
.persona-grid-compact .persona-card { grid-template-columns: auto 1fr; grid-template-rows: auto; }
.persona-icon {
  grid-row: 1 / span 2;
  width: 40px;
  height: 40px;
  border-radius: var(--r-12);
  background: var(--surface-3);
  display: grid;
  place-items: center;
  color: var(--brand);
}
.persona-grid-compact .persona-icon { grid-row: auto; width: 34px; height: 34px; }
.persona-icon [data-lucide] { width: 20px; height: 20px; }
.persona-grid-compact .persona-icon [data-lucide] { width: 17px; height: 17px; }
.persona-name { font-size: var(--t-14); font-weight: 600; color: var(--text); }
.persona-desc { font-size: var(--t-12); color: var(--muted); margin-top: 2px; }
.persona-note {
  margin-top: var(--s-12);
  font-size: var(--t-12);
  color: var(--muted);
  line-height: 1.45;
  padding: var(--s-12);
  background: var(--surface-3);
  border-radius: var(--r-12);
}
.onboard-brand {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  margin-bottom: var(--s-32);
}
.brand-mark {
  width: 48px;
  height: 48px;
  border-radius: var(--r-12);
  background: var(--brand);
  color: var(--on-brand);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 16px rgba(255, 133, 81, .35);
}
.brand-mark [data-lucide] { width: 28px; height: 28px; }
.brand-name { font-size: var(--t-22); font-weight: 700; }
.brand-tag { font-size: var(--t-12); color: var(--brand); font-weight: 500; }
.onboard-title {
  font-size: var(--t-28);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 var(--s-12);
}
.onboard-sub {
  font-size: var(--t-14);
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

.trust-pills {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
  margin: var(--s-24) 0;
}
.trust-pills li {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  padding: var(--s-12) var(--s-16);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-12);
  font-weight: 500;
}
.trust-pills li [data-lucide] { color: var(--brand); width: 20px; height: 20px; }

.permissions { margin-top: var(--s-16); }
.permission-row {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  padding: var(--s-12) 0;
  border-bottom: 1px solid var(--border);
}
.permission-row:last-child { border-bottom: 0; }
.permission-row > [data-lucide] { color: var(--cyan); width: 22px; height: 22px; }
.permission-text { flex: 1; }
.permission-title { font-weight: 500; }
.permission-sub { font-size: var(--t-12); color: var(--muted); }
.perm-allow {
  background: var(--brand);
  color: var(--on-brand);
  padding: var(--s-8) var(--s-12);
  border-radius: var(--r-8);
  font-size: var(--t-12);
  font-weight: 600;
}

.onboard-actions {
  padding: var(--s-16) var(--s-24) var(--s-32);
  position: relative;
  z-index: 1;
  background: var(--surface-2);
}
.onboard-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: var(--s-16);
}
.dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--border);
}
.dot.active { background: var(--brand); width: 24px; }
.onboard-actions .btn-block { margin-bottom: var(--s-12); }
.onboard-actions .btn-ghost { margin-top: 0; }

/* ===== Home ===== */
.lang-toggle {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px;
  margin-bottom: var(--s-12);
}
.lang {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: var(--t-11);
  font-weight: 600;
  color: var(--muted);
}
.lang.active { background: var(--brand); color: var(--on-brand); }

.hero-greeting { margin-bottom: var(--s-12); }
.hello-line { font-size: var(--t-22); font-weight: 700; }
.hello-sub { font-size: var(--t-14); color: var(--muted); }

.nl-input {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  background: var(--surface);
  border-radius: var(--r-16);
  padding: var(--s-12) var(--s-16);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  margin-bottom: var(--s-8);
}
.nl-input > [data-lucide]:first-child { width: 18px; height: 18px; color: var(--brand); }
.nl-input input {
  flex: 1;
  border: 0;
  outline: 0;
  font-size: var(--t-14);
  background: transparent;
  color: var(--text);
}
.nl-input input::placeholder { color: var(--muted); }
.mic-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--on-brand);
  display: grid; place-items: center;
}
.mic-btn [data-lucide] { width: 18px; height: 18px; }

.quick-chips {
  display: flex;
  gap: var(--s-8);
  overflow-x: auto;
  margin-bottom: var(--s-16);
  margin-left: calc(-1 * var(--s-16));
  margin-right: calc(-1 * var(--s-16));
  padding: 0 var(--s-16);
  scrollbar-width: none;
}
.quick-chips::-webkit-scrollbar { display: none; }

.kpi-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-8);
  margin-bottom: var(--s-12);
}
.kpi-tile {
  background: var(--surface);
  border-radius: var(--r-12);
  padding: var(--s-8) var(--s-12);
  text-align: center;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
}
.kpi-num {
  font-size: var(--t-22);
  font-weight: 700;
  color: var(--brand);
}
.kpi-num .kpi-unit { font-size: var(--t-12); font-weight: 500; color: var(--muted); margin-left: 2px; }
.kpi-label { font-size: var(--t-11); color: var(--muted); margin-top: 2px; }

/* ===== Departure advisor ===== */
.advisor {
  background: linear-gradient(135deg, var(--brand-soft), var(--surface));
  border: 1px solid var(--brand);
  border-left: 4px solid var(--brand);
}
.advisor-head {
  display: flex;
  align-items: center;
  gap: var(--s-12);
}
.advisor-head > [data-lucide] {
  width: 24px; height: 24px;
  color: var(--brand);
  flex-shrink: 0;
}
.advisor-pill {
  margin-left: auto;
  background: var(--brand);
  color: var(--on-brand);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--t-11);
  font-weight: 600;
}
.advisor-body {
  font-size: var(--t-12);
  color: var(--muted);
  margin: var(--s-8) 0;
  line-height: 1.4;
}
.timeofday {
  width: 100%;
  height: 44px;
  display: block;
}

/* ===== Station crowding card ===== */
.station-row {
  display: flex;
  gap: var(--s-8);
  overflow-x: auto;
  margin: var(--s-8) calc(-1 * var(--s-16)) calc(-1 * var(--s-16));
  padding: var(--s-4) var(--s-16) var(--s-16);
  scrollbar-width: none;
}
.station-row::-webkit-scrollbar { display: none; }
.station-note {
  font-size: var(--t-12);
  color: var(--muted);
  line-height: 1.35;
  margin-top: var(--s-4);
}
.station-mini {
  flex: 0 0 140px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-12);
  padding: var(--s-12);
}
.station-name { font-size: var(--t-12); font-weight: 600; }
.station-meta {
  font-size: var(--t-11);
  color: var(--muted);
  display: flex; align-items: center; gap: 4px;
  margin: 4px 0 6px;
}
.dot-mini {
  width: 6px; height: 6px;
  border-radius: 999px;
  display: inline-block;
}
.dot-success { background: var(--success); }
.dot-warn { background: var(--warn); }
.dot-danger { background: var(--danger); }
.sparkline { width: 100%; height: 22px; display: block; }

/* ===== Recent trips ===== */
.recent-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-8);
  margin-bottom: var(--s-16);
}
.recent-card {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  background: var(--surface);
  border-radius: var(--r-12);
  padding: var(--s-12);
  text-align: left;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
}
.recent-icon {
  width: 36px; height: 36px;
  border-radius: var(--r-10);
  background: var(--brand-soft);
  color: var(--brand);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.recent-icon [data-lucide] { width: 18px; height: 18px; }
.recent-title { font-size: var(--t-12); font-weight: 600; }
.recent-sub { font-size: var(--t-11); color: var(--muted); }

/* ===== Attribution pill ===== */
.attribution-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: var(--s-24);
  padding: var(--s-8) var(--s-12);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-8);
  font-size: var(--t-11);
  color: var(--muted);
  text-align: center;
}
.attribution-pill [data-lucide] { width: 12px; height: 12px; color: var(--cyan); }

/* ===== Map canvas ===== */
.map-canvas {
  border-radius: var(--r-16);
  overflow: hidden;
  margin-bottom: var(--s-16);
  position: relative;
  background: var(--surface-3);
  border: 1px solid var(--border);
}
.map-canvas svg { width: 100%; height: 120px; display: block; }
.map-canvas-live svg { height: 160px; }
.kairos-map { width: 100%; height: 160px; z-index: 0; overflow: hidden; }
.map-canvas-live .kairos-map { height: 200px; }
.kairos-map-admin { height: 420px; }
.kmap-svg { width: 100%; height: 100%; display: block; }
.kmap-layer text { pointer-events: none; }
.map-legend {
  display: flex;
  gap: var(--s-12);
  padding: var(--s-12);
  background: var(--surface);
  border-top: 1px solid var(--border);
  font-size: var(--t-11);
  color: var(--muted);
}
.legend-swatch {
  display: inline-block;
  width: 12px; height: 3px;
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 4px;
}
.swatch-walk { background: var(--muted); background: repeating-linear-gradient(90deg, var(--muted) 0 3px, transparent 3px 6px); }
.swatch-jeepney { background: var(--warn); }
.swatch-mrt { background: var(--brand); }
.swatch-bus { background: var(--success); }

/* ===== Route results ===== */
.route-summary { margin-bottom: var(--s-12); }
.route-od {
  display: flex;
  align-items: center;
  gap: var(--s-8);
}
.od-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--surface);
  border-radius: 999px;
  font-size: var(--t-12);
  font-weight: 600;
  border: 1px solid var(--border);
}
.od-pill [data-lucide] { width: 12px; height: 12px; color: var(--brand); }
.od-arrow { color: var(--brand); width: 14px; height: 14px; }
.route-when { font-size: var(--t-12); color: var(--muted); margin-top: 6px; }

.route-card {
  background: var(--surface);
  border-radius: var(--r-16);
  padding: var(--s-12) var(--s-16);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--s-8);
  border: 1px solid var(--border);
}
.route-card-best { border-color: var(--brand); }
.route-card-head {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  margin-bottom: var(--s-12);
}
.route-tag {
  font-size: var(--t-11);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 4px 10px;
  border-radius: 999px;
}
.tag-best { background: var(--brand); color: var(--on-brand); }
.tag-safest { background: var(--success-soft); color: var(--success); border: 1px solid rgba(79, 212, 168, .3); }
.tag-coding { background: var(--warn-soft); color: var(--warn); border: 1px solid rgba(255, 180, 84, .3); }
.route-time {
  font-size: var(--t-28);
  font-weight: 700;
  color: var(--text);
}
.route-time span { font-size: var(--t-14); font-weight: 500; color: var(--muted); }
.safety-badge, .uvvrp-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--t-11);
  font-weight: 600;
  padding: 4px 8px;
  border-radius: var(--r-8);
}
.safety-badge { background: var(--success-soft); color: var(--success); }
.uvvrp-badge { background: var(--warn-soft); color: var(--warn); }
.safety-badge [data-lucide], .uvvrp-badge [data-lucide] { width: 12px; height: 12px; }

.route-legs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: var(--s-12);
}
.leg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: var(--surface-3);
  border-radius: var(--r-8);
  font-size: var(--t-11);
  color: var(--text);
  border: 1px solid var(--border);
}
.leg [data-lucide] { width: 12px; height: 12px; color: var(--brand); }
.leg-arrow { color: var(--brand); }
.leg-arrow [data-lucide] { width: 14px; height: 14px; }

.route-meta {
  display: flex;
  gap: var(--s-12);
  flex-wrap: wrap;
  margin-bottom: var(--s-12);
  font-size: var(--t-12);
  color: var(--muted);
}
.route-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.route-meta [data-lucide] { width: 12px; height: 12px; }

/* ===== Persona strip (drive insights / commute nudge on Results) ===== */
.persona-strip {
  margin-top: var(--s-12);
  display: flex;
  align-items: flex-start;
  gap: var(--s-12);
  padding: var(--s-12) var(--s-16);
  border-radius: var(--r-16);
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.persona-strip-drive { border-color: rgba(255, 133, 81, .35); background: linear-gradient(180deg, rgba(255, 133, 81, .08), var(--surface-2)); }
.persona-strip-commute { border-color: rgba(79, 212, 232, .30); background: linear-gradient(180deg, rgba(79, 212, 232, .07), var(--surface-2)); }
.persona-strip-ico {
  flex: none;
  width: 34px; height: 34px;
  border-radius: var(--r-12);
  background: var(--surface-3);
  display: grid; place-items: center;
  color: var(--brand);
}
.persona-strip-commute .persona-strip-ico { color: var(--cyan); }
.persona-strip-ico [data-lucide] { width: 18px; height: 18px; }
.persona-strip-body { flex: 1; font-size: var(--t-12); color: var(--text); line-height: 1.45; }
.persona-strip-body strong { color: var(--text); }
.persona-strip-cta { display: block; margin-top: 4px; color: var(--muted); font-size: var(--t-11); }
.ps-bits { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.ps-bit { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-11); }
.ps-bit [data-lucide] { width: 14px; height: 14px; flex: none; }
.ps-good { color: var(--success); }
.ps-bad { color: var(--danger); }
.ps-neutral { color: var(--muted); }
.ps-cta { flex: none; white-space: nowrap; }
.ps-cta [data-lucide] { width: 15px; height: 15px; }

/* ===== Choose your impact (TDM decision panel on Results) ===== */
.impact-panel {
  margin-top: var(--s-16);
  padding: var(--s-16);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-16);
}
.impact-head {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  margin-bottom: var(--s-12);
}
.impact-head .card-eyebrow { margin: 0; }
.impact-head .impact-badge {
  margin-left: auto;
  font-size: var(--t-10);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--brand);
  background: var(--brand-soft);
  padding: 3px 8px;
  border-radius: 999px;
}
.impact-options { display: flex; flex-direction: column; gap: var(--s-8); }
.impact-option {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  padding: var(--s-12);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-12);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
  text-align: left;
  width: 100%;
  font: inherit;
  color: var(--text);
}
.impact-option:hover { border-color: var(--brand); }
.impact-option:active { transform: scale(.99); }
.impact-option.smart {
  border-color: var(--success);
  background: var(--success-soft);
}
.impact-opt-icon {
  width: 34px; height: 34px;
  border-radius: var(--r-10);
  display: grid; place-items: center;
  flex-shrink: 0;
  background: var(--surface-3);
  color: var(--muted);
}
.impact-option.smart .impact-opt-icon { background: var(--success-soft); color: var(--success); }
.impact-opt-icon [data-lucide] { width: 18px; height: 18px; }
.impact-opt-body { flex: 1; min-width: 0; }
.impact-opt-top {
  display: flex;
  align-items: baseline;
  gap: var(--s-8);
  margin-bottom: 2px;
}
.impact-opt-when { font-weight: 700; font-size: var(--t-14); }
.impact-opt-time { font-size: var(--t-22); font-weight: 700; margin-left: auto; font-variant-numeric: tabular-nums; }
.impact-opt-time .unit { font-size: var(--t-12); font-weight: 500; color: var(--muted); }
.impact-opt-tag { font-size: var(--t-11); color: var(--muted); }
.impact-opt-gains {
  font-size: var(--t-11);
  font-weight: 600;
  color: var(--success);
  display: flex;
  gap: var(--s-8);
  flex-wrap: wrap;
  margin-top: 4px;
}
.impact-opt-gains .gain-pts { color: var(--brand); }
.impact-opt-gains .gain-co2 { color: var(--cyan); }
.impact-smart-flag {
  font-size: var(--t-10);
  font-weight: 700;
  color: var(--success);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.impact-note {
  font-size: var(--t-10);
  color: var(--muted);
  margin-top: var(--s-12);
  display: flex;
  align-items: center;
  gap: 4px;
}
.impact-note [data-lucide] { width: 11px; height: 11px; flex-shrink: 0; }

/* ===== Drive vs Commute compare ===== */
.compare-cta { margin-top: var(--s-8); }
.compare-cta .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.compare-header {
  display: flex; flex-direction: column; gap: var(--s-8);
  padding: var(--s-12) var(--s-16);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-16);
  margin-bottom: var(--s-12);
}
.compare-eyebrow {
  font-size: var(--t-11); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brand); font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
}
.compare-eyebrow [data-lucide] { width: 14px; height: 14px; }
.compare-od {
  font-size: var(--t-16); font-weight: 700; color: var(--text);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.compare-od [data-lucide] { width: 16px; height: 16px; color: var(--brand); }
.compare-od .od-arrow { color: var(--muted); }
.compare-chip {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-11); color: var(--muted);
  padding: 4px 10px; border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.compare-chip [data-lucide] { width: 12px; height: 12px; }

.compare-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-12);
  margin-bottom: var(--s-12);
}
.compare-card { display: flex; flex-direction: column; gap: var(--s-12); }
.compare-coding { border-color: var(--warn); background: var(--warn-soft); }
.compare-meta { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--t-12); color: var(--muted); }
.compare-meta li { display: flex; align-items: center; gap: 6px; }
.compare-meta [data-lucide] { width: 14px; height: 14px; color: var(--muted); }
.compare-meta .compare-ok { color: var(--success); }
.compare-meta .compare-ok [data-lucide] { color: var(--success); }
.compare-meta .compare-warn { color: var(--warn); font-weight: 600; }
.compare-meta .compare-warn [data-lucide] { color: var(--warn); }
.tag-driving { background: var(--brand); color: var(--on-brand); display: inline-flex; align-items: center; gap: 4px; }
.tag-driving [data-lucide] { width: 12px; height: 12px; }
.tag-commuting { background: var(--cyan); color: var(--on-cyan); display: inline-flex; align-items: center; gap: 4px; }
.tag-commuting [data-lucide] { width: 12px; height: 12px; }

.compare-rec { display: flex; flex-direction: column; gap: var(--s-12); }
.compare-rec-empty { color: var(--muted); font-size: var(--t-12); text-align: center; padding: var(--s-16); }
.compare-rec-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--s-16); border-radius: var(--r-16);
  background: var(--surface);
  border: 1.5px solid var(--brand);
  border-left: 4px solid var(--brand);
}
.compare-rec-commute { border-color: var(--cyan); border-left-color: var(--cyan); }
.compare-rec-drive { border-color: var(--brand); border-left-color: var(--brand); }
.compare-rec-eyebrow {
  font-size: var(--t-11); letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 700; color: var(--brand);
  display: inline-flex; align-items: center; gap: 6px;
}
.compare-rec-commute .compare-rec-eyebrow { color: var(--cyan); }
.compare-rec-eyebrow [data-lucide] { width: 12px; height: 12px; }
.compare-rec-headline { font-size: var(--t-16); color: var(--text); }
.compare-rec-reason { font-size: var(--t-12); color: var(--muted); }

/* ===== Schedule-ahead · predictive ETA ===== */
.btn-sm { padding: var(--s-8) var(--s-12); font-size: var(--t-12); border-radius: var(--r-8); }
.route-when-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-8);
  margin-top: 6px;
}
.route-when-row .route-when { margin-top: 0; display: inline-flex; align-items: center; gap: 4px; }
.route-when-row .route-when [data-lucide] { width: 13px; height: 13px; color: var(--brand); }
.sched-trigger {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--t-12); font-weight: 600; color: var(--brand);
  background: var(--brand-soft); border: 1px solid rgba(255, 133, 81, .35);
  padding: 6px 12px; border-radius: 999px;
}
.sched-trigger [data-lucide] { width: 14px; height: 14px; }
.sched-trigger:hover { background: rgba(255, 133, 81, .22); }

.sched-banner {
  display: flex; gap: var(--s-12); align-items: flex-start;
  margin-top: var(--s-12); padding: var(--s-12);
  background: linear-gradient(135deg, var(--brand-soft), var(--surface-2));
  border: 1px solid rgba(255, 133, 81, .35); border-left: 3px solid var(--brand);
  border-radius: var(--r-12);
}
.sched-banner-ico { width: 32px; height: 32px; border-radius: var(--r-10); background: var(--brand); color: var(--on-brand); display: grid; place-items: center; flex-shrink: 0; }
.sched-banner-ico [data-lucide] { width: 18px; height: 18px; }
.sched-banner-body { flex: 1; min-width: 0; }
.sched-banner-top { display: flex; align-items: center; gap: var(--s-8); margin-bottom: 2px; }
.sched-banner-pill { font-size: var(--t-10); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--brand); background: rgba(255, 133, 81, .15); padding: 2px 8px; border-radius: 999px; }
.sched-banner-line { font-size: var(--t-12); color: var(--text); }
.sched-banner-cta { display: flex; gap: var(--s-8); margin-top: var(--s-8); }

/* schedule bottom sheet */
.sched-body { text-align: left; }
.sched-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-11); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; color: var(--brand);
}
.sched-eyebrow [data-lucide] { width: 14px; height: 14px; }
.sched-sub { font-size: var(--t-12); color: var(--muted); margin: var(--s-8) 0 var(--s-12); }
.sched-sub em { color: var(--text); font-style: normal; font-weight: 600; }
.sched-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-12); margin-bottom: var(--s-16); }
.sched-field { display: flex; flex-direction: column; gap: 6px; }
.sched-field span { display: inline-flex; align-items: center; gap: 5px; font-size: var(--t-12); color: var(--muted); font-weight: 600; }
.sched-field span [data-lucide] { width: 13px; height: 13px; }
.sched-field input {
  background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--r-8);
  padding: 10px 12px; color: var(--text); font-size: var(--t-14); width: 100%;
}
.sched-field input::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; }
.sched-preview {
  background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--r-12);
  padding: var(--s-12) var(--s-16); display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.sched-preview-row { display: flex; align-items: baseline; justify-content: space-between; width: 100%; gap: var(--s-8); }
.sched-preview-label { font-size: var(--t-11); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.sched-preview-row strong { font-size: var(--t-14); color: var(--text); font-variant-numeric: tabular-nums; }
.sched-preview-big strong { font-size: var(--t-28); font-weight: 700; color: var(--brand); }
.sched-preview-big strong span { font-size: var(--t-14); color: var(--muted); font-weight: 500; }
.sched-preview-arrow [data-lucide] { width: 16px; height: 16px; color: var(--muted); }
.sched-preview-curve { width: 100%; margin-top: 4px; }
.sched-preview-curve svg { width: 100%; height: 46px; }
.sched-preview-vs { font-size: var(--t-11); font-weight: 600; margin-top: 2px; }
.sched-preview-vs.is-worse { color: var(--danger); }
.sched-preview-vs.is-better { color: var(--success); }
.sched-preview-vs.is-same { color: var(--muted); }
.sched-chip {
  display: inline-flex; align-items: center; gap: 6px; align-self: center; margin: var(--s-12) auto 0;
  font-size: var(--t-10); color: var(--muted); padding: 4px 10px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.sched-chip [data-lucide] { width: 12px; height: 12px; }
.sched-actions { display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--s-8); margin-top: var(--s-16); }

/* ===== Upcoming scheduled trips (Home) ===== */
.upcoming-card { margin-bottom: var(--s-12); }
.upcoming-head { display: flex; align-items: center; gap: var(--s-8); margin-bottom: 4px; }
.upcoming-head .card-eyebrow { margin: 0; }
.upcoming-count {
  margin-left: auto; font-size: var(--t-11); font-weight: 700; color: var(--brand);
  background: var(--brand-soft); padding: 2px 8px; border-radius: 999px;
}
.upcoming-sub { font-size: var(--t-11); color: var(--muted); margin: 0 0 var(--s-12); }
.upcoming-list { display: flex; flex-direction: column; gap: var(--s-8); }
.upcoming-item {
  display: flex; align-items: center; gap: var(--s-12);
  padding: var(--s-12); background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--r-12);
}
.upcoming-when {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  font-size: var(--t-10); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--cyan);
  background: var(--cyan-soft); padding: 4px 8px; border-radius: 999px; white-space: nowrap;
}
.upcoming-when [data-lucide] { width: 11px; height: 11px; }
.upcoming-main { flex: 1; min-width: 0; }
.upcoming-dest { display: flex; align-items: center; gap: 5px; font-size: var(--t-14); font-weight: 600; }
.upcoming-dest [data-lucide] { width: 13px; height: 13px; color: var(--brand); flex-shrink: 0; }
.upcoming-eta { font-size: var(--t-11); color: var(--muted); margin-top: 2px; }
.upcoming-del { color: var(--muted); padding: 6px; flex-shrink: 0; }
.upcoming-del [data-lucide] { width: 15px; height: 15px; }
.upcoming-del:hover { color: var(--danger); }

/* ===== CCTV parking panel (Drive vs Commute) ===== */
.parking-panel {
  padding: var(--s-12) var(--s-16); background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-16); margin-bottom: var(--s-12);
}
.parking-head { display: flex; align-items: center; gap: var(--s-8); }
.parking-head .card-eyebrow { margin: 0; }
.parking-status {
  margin-left: auto; font-size: var(--t-10); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 999px;
}
.parking-status.is-open { color: var(--success); background: var(--success-soft); }
.parking-status.is-tight { color: var(--danger); background: var(--danger-soft); }
.parking-sub { font-size: var(--t-11); color: var(--muted); margin: 6px 0 var(--s-12); }
.lot-list { display: flex; flex-direction: column; gap: 6px; }
.lot-row {
  display: flex; align-items: center; gap: var(--s-8);
  padding: 8px 10px; border-radius: var(--r-8); background: var(--surface);
  border-left: 3px solid var(--muted); font-size: var(--t-12);
}
.lot-row.lot-open { border-left-color: var(--success); }
.lot-row.lot-filling { border-left-color: var(--warn); }
.lot-row.lot-full { border-left-color: var(--danger); }
.lot-row [data-lucide] { width: 14px; height: 14px; color: var(--muted); flex-shrink: 0; }
.lot-row.lot-open [data-lucide] { color: var(--success); }
.lot-row.lot-filling [data-lucide] { color: var(--warn); }
.lot-row.lot-full [data-lucide] { color: var(--danger); }
.lot-name { font-weight: 600; color: var(--text); display: inline-flex; align-items: center; gap: 6px; }
.lot-pick { font-size: var(--t-10); font-weight: 700; color: var(--brand); background: var(--brand-soft); padding: 1px 6px; border-radius: 999px; text-transform: uppercase; }
.lot-dist { margin-left: auto; color: var(--muted); white-space: nowrap; }
.lot-occ { color: var(--muted); white-space: nowrap; }
.parking-note { display: flex; align-items: center; gap: 5px; font-size: var(--t-10); color: var(--muted); margin-top: var(--s-12); }
.parking-note [data-lucide] { width: 11px; height: 11px; flex-shrink: 0; }
.compare-driving.parking-tight { border-color: var(--danger); }

/* ===== Live navigation ===== */
.live-banner {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  padding: var(--s-12);
  background: var(--warn-soft);
  border: 1px solid rgba(255, 180, 84, .4);
  border-left: 3px solid var(--warn);
  border-radius: var(--r-12);
  margin-bottom: var(--s-12);
  font-size: var(--t-12);
}
.live-banner [data-lucide] { color: var(--warn); width: 20px; height: 20px; flex-shrink: 0; }
.live-banner strong { display: block; color: var(--text); }
.live-banner span { color: var(--text); opacity: .8; }
.banner-cta {
  margin-left: auto;
  background: var(--brand);
  color: var(--on-brand);
  padding: var(--s-8) var(--s-12);
  border-radius: var(--r-8);
  font-size: var(--t-12);
  font-weight: 600;
  flex-shrink: 0;
}

.live-eta {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-12);
  padding: var(--s-12);
  margin-bottom: var(--s-12);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-12);
  align-items: center;
}
.eta-eyebrow { font-size: var(--t-11); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.eta-time { font-size: var(--t-22); font-weight: 700; }
.eta-time span { font-size: var(--t-14); font-weight: 500; color: var(--muted); }
.eta-progress { flex: 1; height: 6px; background: var(--border); border-radius: 999px; overflow: hidden; }
.eta-progress-bar { height: 100%; background: var(--brand); border-radius: 999px; }
.eta-remaining { font-size: var(--t-12); color: var(--muted); white-space: nowrap; }

.current-leg, .next-leg {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  padding: var(--s-16);
}
.current-leg {
  background: linear-gradient(135deg, var(--brand-soft), var(--surface));
  border: 1px solid var(--brand);
  border-left: 4px solid var(--brand);
}
.leg-badge {
  padding: 4px 10px;
  border-radius: var(--r-8);
  font-size: var(--t-11);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.leg-now { background: var(--brand); color: var(--on-brand); }
.leg-next { background: var(--surface-3); color: var(--muted); }
.leg-title { font-size: var(--t-14); font-weight: 600; }
.leg-sub { font-size: var(--t-12); color: var(--muted); margin-top: 2px; }
.leg-sub-filipino { color: var(--cyan); font-style: italic; }

.live-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-8);
  margin-top: var(--s-12);
}
.live-actions .btn { width: 100%; }

/* ===== Alerts ===== */
.filter-row {
  display: flex;
  gap: var(--s-8);
  overflow-x: auto;
  margin: 0 calc(-1 * var(--s-16)) var(--s-16);
  padding: 0 var(--s-16);
  scrollbar-width: none;
}
.filter-row::-webkit-scrollbar { display: none; }

.alert-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-12);
  padding: var(--s-12);
  margin-bottom: var(--s-8);
  box-shadow: var(--shadow-card);
  border-left: 4px solid var(--muted);
}
.sev-high { border-left-color: var(--danger); }
.sev-medium { border-left-color: var(--warn); }
.sev-low { border-left-color: var(--info); }
.sev-info { border-left-color: var(--cyan); }
.alert-head {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  margin-bottom: 6px;
}
.severity {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--r-8);
  font-size: var(--t-11);
  font-weight: 600;
}
.severity [data-lucide] { width: 12px; height: 12px; }
.severity-high { background: var(--danger-soft); color: var(--danger); }
.severity-medium { background: var(--warn-soft); color: var(--warn); }
.severity-low { background: var(--info-soft); color: var(--info); }
.severity-info { background: var(--cyan-soft); color: var(--cyan); }
.alert-time { margin-left: auto; font-size: var(--t-11); color: var(--muted); }
.alert-title { font-weight: 600; font-size: var(--t-14); }
.alert-meta { font-size: var(--t-12); color: var(--muted); margin-top: 2px; }
.alert-affects {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--s-8);
  padding: 4px 8px;
  background: var(--cyan-soft);
  color: var(--cyan);
  border: 1px solid rgba(79, 212, 232, .25);
  border-radius: var(--r-8);
  font-size: var(--t-11);
  font-weight: 600;
}
.alert-affects [data-lucide] { width: 12px; height: 12px; }

/* ===== AI summary card (Alerts screen) ===== */
.ai-summary-card {
  background: linear-gradient(160deg, var(--cyan-soft) 0%, var(--surface) 80%);
  border: 1px solid rgba(79, 212, 232, .22);
  border-radius: var(--r-16);
  padding: var(--s-12) var(--s-16);
  margin: 0 0 var(--s-16);
  position: relative;
  overflow: hidden;
}
.ai-summary-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(79, 212, 232, .12), transparent 55%);
  pointer-events: none;
}
.ai-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-8);
  position: relative;
}
.ai-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: rgba(79, 212, 232, .12);
  color: var(--cyan);
  border-radius: var(--r-8);
  font-size: var(--t-11);
  font-weight: 600;
}
.ai-pill [data-lucide] { width: 12px; height: 12px; }
.ai-latency { font-size: var(--t-10); color: var(--muted); font-variant-numeric: tabular-nums; }
.ai-summary-body { position: relative; margin-bottom: var(--s-8); }
.ai-summary-en, .ai-summary-tl {
  margin: 0 0 6px;
  font-size: var(--t-14);
  line-height: 1.45;
  color: var(--text);
}
.ai-summary-tl { color: var(--cyan); font-style: italic; font-size: var(--t-12); }
.ai-summary-body strong { color: var(--brand); font-weight: 600; }
.ai-summary-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-12);
  padding-top: var(--s-8);
  border-top: 1px dashed rgba(79, 212, 232, .18);
  position: relative;
}
.ai-summary-foot span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--t-10);
  color: var(--muted);
}
.ai-summary-foot [data-lucide] { width: 11px; height: 11px; color: var(--cyan); }

/* ===== Smart announcement card (Live screen) ===== */
.announce-card {
  background: linear-gradient(160deg, var(--brand-soft) 0%, var(--surface) 80%);
  border: 1px solid rgba(255, 133, 81, .25);
  border-radius: var(--r-16);
  padding: var(--s-12) var(--s-16);
  margin: 0 0 var(--s-16);
  position: relative;
  overflow: hidden;
}
.announce-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 0% 100%, rgba(255, 133, 81, .12), transparent 55%);
  pointer-events: none;
}
.announce-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-8);
  position: relative;
}
.announce-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: rgba(255, 133, 81, .14);
  color: var(--brand);
  border-radius: var(--r-8);
  font-size: var(--t-11);
  font-weight: 600;
}
.announce-pill [data-lucide] { width: 12px; height: 12px; }
.announce-body { position: relative; }
.announce-en, .announce-tl {
  margin: 0 0 6px;
  font-size: var(--t-14);
  line-height: 1.45;
  color: var(--text);
}
.announce-tl { color: var(--brand); font-style: italic; font-size: var(--t-12); }
.announce-en strong, .announce-tl strong { font-weight: 600; }
.announce-en strong { color: var(--brand); }
.announce-tl strong { color: var(--brand); }
.announce-foot {
  font-size: var(--t-10);
  color: var(--muted);
  margin-top: var(--s-8);
  padding-top: var(--s-8);
  border-top: 1px dashed rgba(255, 133, 81, .2);
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
}
.announce-foot [data-lucide] { width: 11px; height: 11px; color: var(--brand); }

/* ===== Station crowding screen ===== */
.station-tabs {
  display: flex;
  gap: var(--s-8);
  margin-bottom: var(--s-16);
  overflow-x: auto;
  scrollbar-width: none;
}
.station-tabs::-webkit-scrollbar { display: none; }
.station-tab {
  flex: 1;
  padding: var(--s-8) var(--s-12);
  border-radius: var(--r-12);
  background: var(--surface);
  font-size: var(--t-12);
  font-weight: 500;
  color: var(--muted);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.station-tab.active {
  background: var(--brand);
  color: var(--on-brand);
  border-color: var(--brand);
}

.heatmap {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  margin: var(--s-16) 0 var(--s-8);
}
.heat-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.heat-cell span {
  font-size: var(--t-10);
  color: var(--muted);
  font-weight: 500;
}
.heat-cell i {
  width: 100%;
  height: 28px;
  border-radius: var(--r-4);
}
.heat-low { background: rgba(79, 212, 168, .25); }
.heat-warn { background: rgba(255, 180, 84, .35); }
.heat-high { background: rgba(255, 107, 107, .4); }
.heat-legend {
  display: flex;
  justify-content: center;
  gap: var(--s-12);
  font-size: var(--t-11);
  color: var(--muted);
  margin-top: var(--s-8);
}
.heat-legend i {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 3px;
  vertical-align: middle;
  margin-right: 4px;
}

.tip-card {
  display: flex;
  gap: var(--s-12);
  background: var(--cyan-soft);
  border: 1px solid rgba(79, 212, 232, .25);
  border-left: 3px solid var(--cyan);
  border-radius: var(--r-12);
  padding: var(--s-12);
}
.tip-card [data-lucide] {
  color: var(--cyan);
  width: 22px; height: 22px;
  flex-shrink: 0;
}
.tip-title { font-weight: 600; font-size: var(--t-14); }
.tip-body { font-size: var(--t-12); color: var(--text); line-height: 1.4; margin-top: 4px; }

/* ===== Challenges ===== */
.streak-card {
  display: flex;
  align-items: center;
  gap: var(--s-16);
  padding: var(--s-16);
  border-radius: var(--r-16);
  background: linear-gradient(135deg, var(--brand-strong), var(--brand));
  color: var(--on-brand);
  margin-bottom: var(--s-16);
  border: 1px solid rgba(255, 133, 81, .5);
}
.streak-icon {
  width: 48px; height: 48px;
  border-radius: var(--r-12);
  background: color-mix(in srgb, var(--on-brand) 20%, transparent);
  display: grid; place-items: center;
}
.streak-icon [data-lucide] { width: 26px; height: 26px; color: var(--on-brand); }
.streak-eyebrow { font-size: var(--t-11); opacity: .7; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.streak-num { font-size: var(--t-28); font-weight: 700; }
.streak-num span { font-size: var(--t-14); font-weight: 500; opacity: .7; }
.streak-pts { margin-left: auto; text-align: right; }
.pts-num { font-size: var(--t-22); font-weight: 700; }
.pts-label { font-size: var(--t-11); opacity: .7; }

.badges-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-8);
  margin-bottom: var(--s-16);
}
.badge-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--s-12);
  background: var(--surface);
  border-radius: var(--r-12);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
}
.badge-card [data-lucide] { width: 26px; height: 26px; transition: color .2s ease, transform .2s ease; }
.badge-card.earned {
  --badge-accent: var(--brand);
  border-color: color-mix(in srgb, var(--badge-accent) 45%, var(--border));
  background: color-mix(in srgb, var(--badge-accent) 12%, var(--surface));
}
.badge-card.earned [data-lucide] { color: var(--badge-accent); transform: scale(1.05); }
.badge-card.locked { opacity: .45; }
.badge-card.locked [data-lucide] { color: var(--muted); }
#badgeOffpeak    { --badge-accent: var(--cyan); }
#badgeCoding     { --badge-accent: var(--warn); }
#badgeMultimodal { --badge-accent: var(--brand); }
#badgeCO2        { --badge-accent: var(--success); }
#badgeStreak30   { --badge-accent: var(--brand-strong); }
#badgeSafety     { --badge-accent: var(--info); }
.badge-name { font-size: var(--t-11); text-align: center; font-weight: 500; }

.challenge-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-12);
  padding: var(--s-12);
  margin-bottom: var(--s-8);
  box-shadow: var(--shadow-card);
}
.challenge-card.done { border-color: var(--success); border-left: 3px solid var(--success); }
.challenge-head {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  margin-bottom: var(--s-8);
}
.challenge-title { font-size: var(--t-14); font-weight: 600; }
.challenge-sub { font-size: var(--t-11); color: var(--muted); }
.progress-pct {
  margin-left: auto;
  font-weight: 700;
  color: var(--brand);
  font-size: var(--t-14);
}
.progress {
  height: 6px;
  background: var(--surface-3);
  border-radius: 999px;
  overflow: hidden;
}
.progress-bar { height: 100%; background: var(--brand); border-radius: 999px; }
.progress-text {
  font-size: var(--t-11);
  color: var(--muted);
  margin-top: 6px;
  text-align: right;
}
.challenge-card.done .progress-text { color: var(--success); font-weight: 600; }

/* ===== Stats ===== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-8);
  margin: var(--s-16) 0;
}
.stat-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-12);
  padding: var(--s-12);
  box-shadow: var(--shadow-card);
}
.stat-tile [data-lucide] {
  width: 22px; height: 22px;
  color: var(--brand);
  margin-bottom: var(--s-8);
}
.stat-num {
  font-size: var(--t-28);
  font-weight: 700;
  color: var(--brand);
}
.stat-label { font-size: var(--t-12); color: var(--muted); }

.fuel-card { border-left: 3px solid var(--success); }
.fuel-card .card-eyebrow { display: flex; align-items: center; gap: 6px; }
.fuel-card .card-eyebrow [data-lucide] { width: 16px; height: 16px; color: var(--success); }
.fuel-card-body { margin: var(--s-12) 0 var(--s-8); }
.fuel-mode-row { display: flex; align-items: center; gap: var(--s-8); margin-bottom: var(--s-12); font-size: var(--t-12); }
.fuel-mode-row .muted { color: var(--muted); }
.fuel-mode-select {
  background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--r-8);
  padding: 4px 8px; color: var(--text); font: inherit; font-size: var(--t-12); cursor: pointer;
}
.fuel-mode-select:focus { outline: none; border-color: var(--brand); }
.fuel-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-8); }
.fuel-stat { text-align: center; background: var(--surface-3); border-radius: var(--r-8); padding: var(--s-8); }
.fuel-stat-num { font-size: var(--t-22); font-weight: 700; color: var(--success); font-variant-numeric: tabular-nums; }
.fuel-stat-label { font-size: var(--t-10); color: var(--muted); margin-top: 2px; }
.fuel-note { font-size: var(--t-10); color: var(--muted); margin-top: var(--s-8); }

.comparison-row { margin: var(--s-8) 0; }
.cmp-bar {
  position: relative;
  height: 30px;
  border-radius: var(--r-8);
  display: flex;
  align-items: center;
  padding: 0 var(--s-12);
  font-size: var(--t-12);
  font-weight: 500;
  color: white;
  min-width: 80px;
}
.cmp-you { background: var(--brand); color: var(--on-brand); }
.cmp-mm { background: var(--info); opacity: .5; }
.on-target {
  margin-top: var(--s-12);
  padding: var(--s-8) var(--s-12);
  background: var(--success-soft);
  color: var(--success);
  border: 1px solid rgba(79, 212, 168, .25);
  border-radius: var(--r-8);
  font-size: var(--t-12);
  font-weight: 600;
  text-align: center;
}

.trend-chart { width: 100%; height: 100px; display: block; }

/* ===== KPI row (behavioral change) ===== */
.kpi-row {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  padding: var(--s-12) 0;
  border-bottom: 1px solid var(--border);
}
.kpi-row:last-child { border-bottom: 0; padding-bottom: 0; }
.kpi-row:first-child { padding-top: 0; }
.kpi-row > [data-lucide] {
  width: 22px; height: 22px;
  color: var(--cyan);
  flex-shrink: 0;
}
.kpi-row-text { flex: 1; }
.kpi-row-title { font-size: var(--t-14); font-weight: 600; }
.kpi-row-sub { font-size: var(--t-11); color: var(--muted); margin-top: 2px; }
.kpi-row-val {
  font-size: var(--t-22);
  font-weight: 700;
  color: var(--brand);
}
.kpi-row-val .kpi-unit { font-size: var(--t-12); font-weight: 500; color: var(--muted); margin-left: 2px; }

/* ===== Profile ===== */
.profile-head {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  padding: var(--s-16);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-16);
  margin-bottom: var(--s-16);
  box-shadow: var(--shadow-card);
}
.avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--on-brand);
  display: grid; place-items: center;
  font-weight: 700;
  font-size: var(--t-22);
}
.profile-name { font-weight: 600; }
.profile-sub { font-size: var(--t-12); color: var(--brand); }

.form-label {
  display: block;
  font-size: var(--t-12);
  font-weight: 600;
  color: var(--brand);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.input-affix {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-12);
  padding: 10px var(--s-12);
}
.input-affix:focus-within { border-color: var(--brand); }
.input-affix input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: var(--t-14);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.input-affix [data-lucide] {
  width: 16px; height: 16px;
  color: var(--success);
}
.form-hint { font-size: var(--t-11); color: var(--muted); margin-top: var(--s-8); }
.chip-row { display: flex; gap: var(--s-8); margin-top: var(--s-12); }

.route-row {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  padding: var(--s-12) var(--s-16);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-12);
  margin-bottom: var(--s-8);
  box-shadow: var(--shadow-card);
}
.route-row > [data-lucide]:first-child {
  width: 20px; height: 20px;
  color: var(--brand);
}
.route-row-text { flex: 1; }
.route-row-title { font-weight: 600; font-size: var(--t-14); }
.route-row-sub { font-size: var(--t-11); color: var(--muted); }
.route-row > [data-lucide]:last-child { color: var(--muted); width: 16px; height: 16px; }

.settings-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-16);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.settings-row {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  padding: var(--s-12) var(--s-16);
  border-bottom: 1px solid var(--border);
}
.settings-row:last-child { border-bottom: 0; }
.settings-row > [data-lucide] {
  width: 20px; height: 20px;
  color: var(--brand);
}
.settings-text { flex: 1; font-size: var(--t-14); }
.muted-icon { color: var(--muted) !important; }

.seg {
  display: inline-flex;
  background: var(--surface-3);
  border-radius: var(--r-8);
  padding: 2px;
}
.seg-btn {
  padding: var(--s-4) var(--s-12);
  border-radius: var(--r-6);
  font-size: var(--t-11);
  font-weight: 600;
  color: var(--muted);
}
.seg-btn.active {
  background: var(--brand);
  color: var(--on-brand);
}

.switch { position: relative; display: inline-block; width: 40px; height: 22px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute; inset: 0;
  background: var(--border);
  border-radius: 999px;
  transition: .2s;
}
.slider::before {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  left: 2px; top: 2px;
  background: var(--text);
  border-radius: 50%;
  transition: .2s;
}
.switch input:checked + .slider { background: var(--brand); }
.switch input:checked + .slider::before { transform: translateX(18px); background: var(--on-brand); }

.app-footer {
  margin-top: var(--s-32);
  padding: var(--s-16) 0;
  text-align: center;
  font-size: var(--t-11);
  color: var(--muted);
}
.app-footer div + div { margin-top: 4px; }
.privacy-row {
  display: flex;
  align-items: flex-start;
  gap: var(--s-8);
  padding: var(--s-12);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-12);
  margin: 0 0 var(--s-12);
  text-align: left;
  font-size: var(--t-11);
  line-height: 1.45;
  color: var(--text);
}
.privacy-row [data-lucide] { width: 16px; height: 16px; color: var(--success); flex-shrink: 0; margin-top: 1px; }
.privacy-row strong { color: var(--success); font-weight: 600; }

/* ===== Bottom sheet ===== */
.bottom-sheet {
  border: 0;
  border-radius: var(--r-24) var(--r-24) 0 0;
  padding: 0;
  width: 100%;
  max-width: 420px;
  margin: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-pop);
  color: var(--text);
}
.bottom-sheet::backdrop {
  background: rgba(0, 0, 0, .6);
}
.sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: var(--border);
  margin: var(--s-12) auto;
}
.sheet-body {
  padding: var(--s-16) var(--s-24) var(--s-32);
  text-align: center;
}
.voice-orb {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--on-brand);
  display: grid;
  place-items: center;
  margin: var(--s-12) auto;
  box-shadow: 0 0 0 16px rgba(255, 133, 81, .15);
  animation: pulse 1.6s ease-in-out infinite;
}
.voice-orb [data-lucide] { width: 36px; height: 36px; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 16px rgba(255, 133, 81, .15); }
  50% { box-shadow: 0 0 0 24px rgba(255, 133, 81, .05); }
}
@keyframes map-current-pulse {
  0% { transform: scale(1); opacity: 0.45; }
  100% { transform: scale(2.6); opacity: 0; }
}
.map-current-pulse {
  animation: map-current-pulse 1.6s ease-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.voice-status { font-weight: 600; }
.voice-transcript {
  font-style: italic;
  color: var(--muted);
  margin: var(--s-8) 0 var(--s-24);
}
.sheet-body .btn { width: 100%; }

/* ===== Utility ===== */
[hidden] { display: none !important; }

/* ===== Toast (ephemeral feedback) ===== */
.toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--surface);
  color: var(--text);
  padding: 12px 20px;
  border-radius: var(--r-12);
  border: 1px solid var(--border);
  border-left: 3px solid var(--success);
  box-shadow: var(--shadow-pop);
  font-size: var(--t-14);
  font-weight: 500;
  z-index: 200;
  opacity: 0;
  transition: all .3s ease;
  pointer-events: none;
  max-width: 360px;
  text-align: center;
}
.toast:not([hidden]) {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================
   ADMIN DASHBOARD — MMDA planner view
   ponytail: same tokens, same palette; desktop layout only
   ============================================================ */

/* ===== Mode toggle (always visible) ===== */
.mode-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 100;
  display: inline-flex;
  background: var(--surface);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
  border: 1px solid var(--border);
}
.mode-seg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: var(--t-12);
  font-weight: 600;
  color: var(--muted);
  transition: all .15s ease;
}
.mode-seg [data-lucide] { width: 14px; height: 14px; }
.mode-seg.active {
  background: var(--brand);
  color: var(--on-brand);
  box-shadow: 0 2px 6px rgba(255, 133, 81, .35);
}

/* ===== Mode visibility ===== */
body[data-mode="mobile"] .admin-shell,
body[data-mode="mobile"] .architecture-shell { display: none; }
body[data-mode="admin"] .phone-frame,
body[data-mode="admin"] .architecture-shell { display: none; }
body[data-mode="admin"] { background: var(--surface-2); overflow: hidden; height: 100vh; }
body[data-mode="admin"] .mode-toggle { background: var(--surface); }
body[data-mode="architecture"] .phone-frame,
body[data-mode="architecture"] .admin-shell { display: none; }
body[data-mode="architecture"] { background: var(--surface-2); overflow: auto; height: 100vh; }
body[data-mode="architecture"] .mode-toggle { background: var(--surface); }

/* ===== Admin shell layout ===== */
.admin-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  height: 100vh;
  background: var(--surface-2);
}

/* ===== Sidebar (deeper than main surface for layering) ===== */
.admin-sidebar {
  background: color-mix(in srgb, var(--surface-2) 82%, var(--shell));
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: var(--s-16);
  gap: var(--s-16);
}
.admin-brand {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  padding: var(--s-8) var(--s-8);
}
.admin-brand .brand-mark { width: 36px; height: 36px; border-radius: var(--r-10); }
.admin-brand .brand-mark [data-lucide] { width: 22px; height: 22px; }
.admin-brand .brand-name { font-size: var(--t-16); font-weight: 700; }
.admin-brand .brand-tag { font-size: var(--t-11); color: var(--muted); }

.admin-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.admin-nav-item {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  padding: 10px var(--s-12);
  border-radius: var(--r-8);
  font-size: var(--t-14);
  font-weight: 500;
  color: var(--text);
  text-align: left;
  transition: all .15s ease;
}
.admin-nav-item [data-lucide] { width: 18px; height: 18px; color: var(--muted); }
.admin-nav-item:hover { background: var(--surface-2); }
.admin-nav-item.active {
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 600;
}
.admin-nav-item.active [data-lucide] { color: var(--brand); }

.admin-user {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  padding: var(--s-12);
  border-top: 1px solid var(--border);
}
.avatar-sm { width: 36px; height: 36px; font-size: var(--t-14); }
.admin-user-name { font-size: var(--t-12); font-weight: 600; }
.admin-user-sub { font-size: var(--t-11); color: var(--muted); }

/* ===== Main area ===== */
.admin-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.admin-topbar {
  display: flex;
  align-items: center;
  gap: var(--s-16);
  padding: var(--s-16) var(--s-24);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.admin-title {
  font-size: var(--t-22);
  font-weight: 700;
  margin: 0;
}
.admin-topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s-8);
}
.data-sources-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--brand-soft);
  color: var(--brand);
  border-radius: 999px;
  font-size: var(--t-11);
  font-weight: 600;
}
.data-sources-pill [data-lucide] { width: 12px; height: 12px; }
.privacy-badge-admin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--success-soft);
  color: var(--success);
  border-radius: 999px;
  font-size: var(--t-11);
  font-weight: 600;
}
.privacy-badge-admin [data-lucide] { width: 12px; height: 12px; }
.admin-date-range {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-8);
  font-size: var(--t-12);
  font-weight: 500;
}
.admin-date-range [data-lucide] { width: 14px; height: 14px; color: var(--muted); }

.admin-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--s-24);
}
.admin-view { animation: fade .25s ease; }

/* ===== Admin KPI cards ===== */
.admin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-16);
  margin-bottom: var(--s-24);
}
.admin-kpi {
  background: var(--surface);
  border-radius: var(--r-12);
  padding: var(--s-16);
  box-shadow: var(--shadow-card);
}
.admin-kpi-icon {
  width: 36px; height: 36px;
  border-radius: var(--r-10);
  background: var(--brand-soft);
  color: var(--brand);
  display: grid; place-items: center;
  margin-bottom: var(--s-12);
}
.admin-kpi-icon [data-lucide] { width: 20px; height: 20px; }
.admin-kpi-num {
  font-size: var(--t-28);
  font-weight: 700;
}
.admin-kpi-num .kpi-unit { font-size: var(--t-14); font-weight: 500; color: var(--muted); margin-left: 2px; }
.admin-kpi-label { font-size: var(--t-12); color: var(--muted); margin-top: 2px; }
.admin-kpi-trend { font-size: var(--t-11); font-weight: 600; margin-top: var(--s-8); }
.trend-up { color: var(--success); }
.trend-down { color: var(--success); }
.trend-warn { color: var(--warn); }

/* ===== Admin card ===== */
.admin-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-16);
  padding: var(--s-16);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--s-16);
}
.admin-card-clickable { cursor: pointer; transition: box-shadow .15s ease; }
.admin-card-clickable:hover { box-shadow: var(--shadow-pop); }
.admin-card-head {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  margin-bottom: var(--s-12);
}
.admin-card-head .card-eyebrow { margin-bottom: 0; }
.admin-card-head > [data-lucide]:last-child:not(.card-eyebrow [data-lucide]) {
  margin-left: auto;
  color: var(--muted);
  width: 18px; height: 18px;
}
.admin-count {
  margin-left: auto;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: var(--t-11);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.admin-target {
  margin-left: auto;
  font-size: var(--t-11);
  color: var(--muted);
  font-weight: 500;
}

.admin-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-16);
  margin-bottom: var(--s-16);
}
.admin-grid-2 .admin-card { margin-bottom: 0; }

/* ===== Admin charts ===== */
.admin-chart { width: 100%; height: 140px; display: block; }
.admin-chart-tall { height: 180px; }
.mini-heatmap-preview svg { width: 100%; height: 180px; display: block; }
.chart-legend {
  display: flex;
  gap: var(--s-16);
  margin-top: var(--s-8);
  font-size: var(--t-11);
  color: var(--muted);
}
.legend-square {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 4px;
}
.sq-muted { background: var(--muted); opacity: .5; }
.sq-brand { background: var(--brand); }
.admin-callout {
  margin-top: var(--s-12);
  padding: var(--s-8) var(--s-12);
  background: var(--success-soft);
  color: var(--success);
  border-radius: var(--r-8);
  font-size: var(--t-12);
}

/* ===== Incident list ===== */
.admin-incident-list { display: flex; flex-direction: column; }
.admin-incident {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-12);
  align-items: center;
  padding: var(--s-12) 0;
  border-bottom: 1px solid var(--border);
}
.admin-incident:last-child { border-bottom: 0; }
.incident-loc { font-size: var(--t-14); font-weight: 500; }
.incident-time { font-size: var(--t-11); color: var(--muted); }

/* ===== Heatmap view ===== */
.admin-grid-heatmap {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--s-16);
}
.admin-card-map { padding: var(--s-12); }
.zone-map { width: 100%; height: 400px; display: block; }
.zone-hot { animation: zonePulse 2s ease-in-out infinite; }
@keyframes zonePulse {
  0%, 100% { opacity: .55; }
  50% { opacity: .75; }
}
.admin-legend {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  padding: var(--s-8) var(--s-12);
  font-size: var(--t-11);
  color: var(--muted);
  border-top: 1px solid var(--border);
}
.admin-legend i {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: middle;
}
.legend-spacer { flex: 1; }
.legend-line {
  display: inline-block;
  width: 16px; height: 2px;
  background: var(--brand);
  vertical-align: middle;
  margin-right: 4px;
  opacity: .5;
}
.admin-live-dot {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-11);
  font-weight: 600;
  color: var(--danger);
}
.live-pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--danger);
  animation: livePulse 1.5s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(216, 58, 58, .4); }
  50% { box-shadow: 0 0 0 6px rgba(216, 58, 58, 0); }
}

/* ===== Live activity feed ===== */
.live-activity { padding-bottom: var(--s-12); }
.live-activity .card-eyebrow { display: flex; align-items: center; gap: 8px; }
.live-feed {
  list-style: none; margin: var(--s-12) 0 0; padding: 0;
  max-height: 168px; overflow: hidden;
  display: flex; flex-direction: column; gap: 6px;
}
.live-feed li {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--t-12); color: var(--text);
  padding: 8px 10px; border-radius: var(--r-8);
  background: var(--surface-3);
  animation: liveFeedIn .35s ease-out;
}
@keyframes liveFeedIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.live-feed .lf-route { font-weight: 600; }
.live-feed .lf-mode {
  font-size: var(--t-10); padding: 2px 6px; border-radius: var(--r-4);
  background: var(--brand-soft); color: var(--brand);
  text-transform: uppercase; letter-spacing: .04em;
}
.live-feed .lf-dur { color: var(--muted); margin-left: auto; font-variant-numeric: tabular-nums; }
.live-feed .lf-just {
  font-size: var(--t-10); color: var(--muted); margin-left: 4px;
}
.live-note { font-size: var(--t-11); color: var(--muted); margin-top: var(--s-12); line-height: 1.45; }

/* ===== Time scrubber ===== */
.scrubber-label {
  font-size: var(--t-14);
  font-weight: 600;
  margin-bottom: var(--s-8);
}
.scrubber-track {
  position: relative;
  height: 6px;
  background: var(--border);
  border-radius: 999px;
}
.scrubber-fill {
  height: 100%;
  background: var(--brand);
  border-radius: 999px;
}
.scrubber-thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 18px; height: 18px;
  background: var(--brand);
  border: 3px solid white;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.scrubber-marks {
  display: flex;
  justify-content: space-between;
  margin-top: var(--s-8);
  font-size: var(--t-10);
  color: var(--muted);
}

/* ===== Zone detail ===== */
.zone-detail-name {
  font-size: var(--t-22);
  font-weight: 700;
  margin-bottom: var(--s-12);
}
.zone-detail-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-8);
  margin-bottom: var(--s-16);
}
.zone-stat {
  background: var(--surface-2);
  border-radius: var(--r-8);
  padding: var(--s-8);
  text-align: center;
}
.zone-stat-num { font-size: var(--t-16); font-weight: 700; }
.zone-stat-num .kpi-unit { font-size: var(--t-11); color: var(--muted); }
.zone-stat-label { font-size: var(--t-10); color: var(--muted); }
.zone-od { display: flex; flex-direction: column; gap: 6px; }
.od-bar {
  display: grid;
  grid-template-columns: 90px 1fr 40px;
  align-items: center;
  gap: var(--s-8);
  font-size: var(--t-11);
}
.od-fill {
  height: 8px;
  background: var(--brand);
  border-radius: 999px;
  opacity: .7;
}
.od-num { text-align: right; color: var(--muted); font-weight: 600; }

/* ===== Simulation ===== */
.sim-builder {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: var(--s-12);
  align-items: end;
}
.sim-field label {
  display: block;
  font-size: var(--t-11);
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.sim-select {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  padding: 10px var(--s-12);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-8);
  font-size: var(--t-14);
  font-weight: 500;
}
.sim-select [data-lucide] { width: 16px; height: 16px; color: var(--brand); }

.sim-panel { border-left: 4px solid var(--border); }
.sim-before { border-left-color: var(--muted); }
.sim-after { border-left-color: var(--warn); }
.sim-tag {
  margin-left: auto;
  font-size: var(--t-11);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--r-8);
  background: var(--surface-2);
  color: var(--muted);
}
.sim-tag-warn { background: var(--warn-soft); color: var(--warn); }
.sim-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-16);
}
.sim-metric-label { font-size: var(--t-11); color: var(--muted); }
.sim-metric-val {
  font-size: var(--t-22);
  font-weight: 700;
  margin-top: 4px;
}
.delta { font-size: var(--t-12); font-weight: 600; }
.sim-note {
  font-size: var(--t-12);
  color: var(--muted);
  line-height: 1.4;
  margin-top: var(--s-12);
}
.admin-sim-actions {
  display: flex;
  gap: var(--s-12);
  justify-content: flex-end;
}

/* ===== Analytics ===== */
.donut-wrap {
  display: flex;
  align-items: center;
  gap: var(--s-24);
}
.donut { width: 140px; height: 140px; flex-shrink: 0; }
.donut-legend {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--t-12);
}
.donut-legend li {
  display: flex;
  align-items: center;
  gap: 6px;
}
.donut-legend strong { margin-left: auto; }

/* ===== Admin table ===== */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-14);
}
.admin-table th {
  text-align: left;
  font-size: var(--t-11);
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: var(--s-8) var(--s-12);
  border-bottom: 1px solid var(--border);
}
.admin-table td {
  padding: var(--s-12);
  border-bottom: 1px solid var(--border);
}
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.admin-table-compact td, .admin-table-compact th { padding: 6px var(--s-12); font-size: var(--t-12); }
.admin-table .muted { color: var(--muted); }

/* ===== Data ingestion view ===== */
.status-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: var(--t-11);
  font-weight: 600;
  white-space: nowrap;
}
.status-ingested { background: var(--success-soft); color: var(--success); }
.status-synthetic { background: var(--warn-soft); color: var(--warn); }
.status-partial   { background: var(--cyan-soft);   color: var(--cyan); }
.status-missing   { background: var(--danger-soft); color: var(--danger); }

.ingest-flow {
  display: flex;
  align-items: stretch;
  gap: var(--s-12);
  margin-top: var(--s-12);
  flex-wrap: wrap;
}
.ingest-stage {
  flex: 1;
  min-width: 160px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-10);
  padding: var(--s-12);
}
.ingest-stage-title {
  font-size: var(--t-11);
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: var(--s-8);
}
.ingest-stage-body { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ingest-stage-sub { font-size: var(--t-11); color: var(--muted); width: 100%; margin-top: 4px; }
.src-chip {
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--r-6);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: var(--t-12);
  font-family: var(--mono, ui-monospace, monospace);
}
.src-chip em { font-style: normal; color: var(--muted); font-size: var(--t-10); }
.src-chip.muted { color: var(--muted); }
.src-chip.brand { border-color: var(--brand); color: var(--brand); }
.ingest-arrow {
  align-self: center;
  width: 20px; height: 20px;
  color: var(--muted);
  flex-shrink: 0;
}

/* ===== Dummy processing animation (visual only) ===== */
.ingest-status {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  padding: var(--s-12) var(--s-12);
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-10);
  font-size: var(--t-12);
}
.ingest-spinner {
  width: 16px; height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: ingest-spin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes ingest-spin { to { transform: rotate(360deg); } }
.ingest-status-text { flex: 1; color: var(--text); font-family: ui-monospace, monospace; font-size: var(--t-12); }
.ingest-progress-track {
  width: 120px; height: 6px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
}
.ingest-progress-fill {
  display: block;
  width: 40%; height: 100%;
  background: var(--brand);
  border-radius: 999px;
  animation: ingest-fill 2.4s ease-in-out infinite;
}
@keyframes ingest-fill {
  0%   { width: 5%;  opacity: .6; }
  50%  { width: 95%; opacity: 1; }
  100% { width: 100%; opacity: .4; }
}

/* Cascade pulse on flow stages — loops forever, decorative */
.ingest-stage { position: relative; }
.ingest-stage::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: var(--r-10);
  border: 1px solid transparent;
  pointer-events: none;
  animation: ingest-pulse 4.8s ease-in-out infinite;
}
.ingest-stage:nth-child(1)::after { animation-delay: 0s; }
.ingest-stage:nth-child(3)::after { animation-delay: 1.6s; }
.ingest-stage:nth-child(5)::after { animation-delay: 3.2s; }
@keyframes ingest-pulse {
  0%, 100% { border-color: transparent; box-shadow: none; }
  10%, 30% { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(255,133,81,.15); }
}

/* ===== Data sources health strip ===== */
.data-health { border-left: 4px solid var(--cyan); }
.data-health-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-12);
  margin-top: var(--s-8);
}
.dh-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-8) var(--s-12);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-8);
}
.dh-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--t-11);
  font-weight: 600;
}
.dh-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  display: inline-block;
}
.dh-live { color: var(--success); }
.dh-live .dh-dot { background: var(--success); animation: livePulse 1.5s ease-in-out infinite; }
.dh-sync { color: var(--warn); }
.dh-sync .dh-dot { background: var(--warn); }
.dh-name { font-size: var(--t-12); font-weight: 600; }
.dh-meta { font-size: var(--t-10); color: var(--muted); }

/* ===== Incident action buttons ===== */
.incident-main {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-12);
  align-items: center;
}
.incident-actions {
  display: flex;
  gap: 6px;
  margin-top: var(--s-8);
  padding-left: 0;
}
.incident-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-12);
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-8);
  font-size: var(--t-11);
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: all .15s ease;
}
.incident-btn [data-lucide] { width: 12px; height: 12px; }
.incident-btn:hover { background: var(--brand-soft); color: var(--brand); border-color: var(--brand); }
.incident-btn-warn { color: var(--danger); }
.incident-btn-warn:hover { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }

/* ===== CCTV camera tiles ===== */
.cctv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-12);
  margin-top: var(--s-12);
}
.cctv-tile {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-12);
  overflow: hidden;
}
.cctv-feed {
  height: 120px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--s-8);
}
/* ponytail: stylized camera "feeds" — gradients stand in for real CCTV frames */
.cctv-edsa    { background: linear-gradient(135deg, var(--border), var(--surface), var(--danger-soft)); }
.cctv-shaw    { background: linear-gradient(135deg, var(--surface), var(--border), var(--success-soft)); }
.cctv-c5      { background: linear-gradient(135deg, var(--border), var(--warn-soft), var(--surface)); }
.cctv-roxas   { background: linear-gradient(135deg, var(--surface), var(--border), var(--success-soft)); }
.cctv-espana  { background: linear-gradient(135deg, var(--surface), var(--cyan-soft), var(--border)); }
.cctv-ortigas { background: linear-gradient(135deg, var(--border), var(--surface), var(--success-soft)); }
.cctv-feed::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 2px,
    rgba(0, 0, 0, .08) 2px,
    rgba(0, 0, 0, .08) 4px
  );
  pointer-events: none;
}
.cctv-label {
  font-size: var(--t-10);
  font-weight: 700;
  color: var(--text);
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
  z-index: 1;
}
.cctv-status {
  align-self: flex-start;
  font-size: var(--t-10);
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--r-4);
  z-index: 1;
}
.cctv-ok    { background: rgba(79, 212, 168, .2); color: var(--success); }
.cctv-warn  { background: rgba(255, 180, 84, .2); color: var(--warn); }
.cctv-alert { background: rgba(255, 107, 107, .2); color: var(--danger); }
.cctv-pending { background: rgba(255, 180, 84, .15); color: var(--warn); border: 1px solid rgba(255, 180, 84, .3); }
.cctv-info {
  display: flex;
  justify-content: space-between;
  padding: 6px var(--s-8);
  font-size: var(--t-11);
  color: var(--muted);
}
.cctv-speed { font-weight: 700; color: var(--brand); }

/* ===== CCTV status banner (footage pending) ===== */
.cctv-status-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--s-12);
  border-left: 4px solid var(--warn);
  background: var(--warn-soft);
}
.cctv-banner-icon {
  width: 40px; height: 40px;
  border-radius: var(--r-10);
  background: var(--warn-soft);
  color: var(--warn);
  display: grid; place-items: center;
  flex-shrink: 0;
  border: 1px solid rgba(255, 180, 84, .3);
}
.cctv-banner-icon [data-lucide] { width: 22px; height: 22px; }
.cctv-banner-text { flex: 1; }
.cctv-banner-title { font-size: var(--t-14); font-weight: 600; color: var(--text); margin-bottom: 4px; }
.cctv-banner-sub { font-size: var(--t-12); color: var(--muted); line-height: 1.45; }
.cctv-banner-sub code {
  background: var(--surface-3);
  padding: 1px 5px;
  border-radius: var(--r-4);
  font-size: var(--t-11);
  color: var(--brand);
}
.cctv-pending-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--warn);
  color: var(--on-brand);
  border-radius: 999px;
  font-size: var(--t-11);
  font-weight: 600;
  flex-shrink: 0;
}
.cctv-pending-pill [data-lucide] { width: 12px; height: 12px; }

/* ===== Pipeline flow diagram ===== */
.pipeline-flow {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  margin-top: var(--s-12);
  flex-wrap: wrap;
}
.pipeline-step {
  flex: 1;
  min-width: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: var(--s-12);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-12);
}
.pipeline-step [data-lucide] {
  width: 22px; height: 22px;
  color: var(--brand);
  margin-bottom: 4px;
}
.pipeline-step strong { font-size: var(--t-12); }
.pipeline-step span { font-size: var(--t-10); color: var(--muted); }
.pipeline-arrow {
  color: var(--brand);
  width: 20px; height: 20px;
  flex-shrink: 0;
}

/* ===== UVVRP / Coding ===== */
.uvvrp-big {
  text-align: center;
  padding: var(--s-16) 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s-12);
}
.uvvrp-plates {
  font-size: 64px;
  font-weight: 700;
  color: var(--brand);
  line-height: 1;
}
.uvvrp-plates .uvvrp-and { font-size: var(--t-14); color: var(--muted); font-weight: 400; margin: 0 8px; }
.uvvrp-label { font-size: var(--t-12); color: var(--muted); margin-top: var(--s-8); }
.uvvrp-window { margin-top: var(--s-12); }
.window-row {
  display: flex;
  align-items: flex-start;
  gap: var(--s-12);
  padding: var(--s-8) 0;
  border-bottom: 1px solid var(--border);
}
.window-row:last-child { border-bottom: 0; }
.window-row > [data-lucide] { color: var(--brand); width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.window-row strong { display: block; font-size: var(--t-14); }
.window-row span { font-size: var(--t-11); color: var(--muted); }

.uvvrp-compliance-ring { display: flex; justify-content: center; padding: var(--s-8) 0 var(--s-16); }
.compliance-svg { width: 140px; height: 140px; }
.compliance-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-8);
}
.cs-item {
  text-align: center;
  padding: var(--s-8);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-8);
}
.cs-num { font-size: var(--t-16); font-weight: 700; color: var(--brand); }
.cs-label { font-size: var(--t-10); color: var(--muted); margin-top: 2px; }

/* ===== Restricted-roads pills ===== */
.pill-yes, .pill-no {
  display: inline-block;
  font-size: var(--t-10);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.pill-yes { background: var(--warn-soft); color: var(--warn); }
.pill-no { background: var(--surface-3); color: var(--muted); }

/* ===== Responsive: stack on narrow ===== */
@media (max-width: 1100px) {
  .admin-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-grid-2, .admin-grid-heatmap { grid-template-columns: 1fr; }
  .sim-builder { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-sidebar { display: none; }
  .admin-topbar-right { flex-wrap: wrap; }
}

/* ============================================================
   ARCHITECTURE — target production topology (aspirational view)
   ============================================================ */
.architecture-shell {
  display: none;
  min-height: 100vh;
  background: var(--surface-2);
  animation: fade .25s ease;
}
body[data-mode="architecture"] .architecture-shell { display: block; }

body[data-mode="architecture"] .arch-head,
body[data-mode="architecture"] .arch-callout,
body[data-mode="architecture"] .arch-diagram {
  opacity: 0;
  animation: arch-rise .6s cubic-bezier(.2,.7,.2,1) forwards;
}
body[data-mode="architecture"] .arch-head      { animation-delay: .05s; }
body[data-mode="architecture"] .arch-callout   { animation-delay: .18s; }
body[data-mode="architecture"] .arch-diagram   { animation-delay: .30s; }
body[data-mode="architecture"] .arch-grid .admin-card:nth-child(1) { animation: arch-rise .5s ease .9s backwards; }
body[data-mode="architecture"] .arch-grid .admin-card:nth-child(2) { animation: arch-rise .5s ease 1.0s backwards; }
body[data-mode="architecture"] .arch-grid .admin-card:nth-child(3) { animation: arch-rise .5s ease 1.1s backwards; }
body[data-mode="architecture"] .arch-grid .admin-card:nth-child(4) { animation: arch-rise .5s ease 1.2s backwards; }
body[data-mode="architecture"] .arch-grid .admin-card:nth-child(5) { animation: arch-rise .5s ease 1.3s backwards; }
body[data-mode="architecture"] .arch-grid .admin-card:nth-child(6) { animation: arch-rise .5s ease 1.4s backwards; }
body[data-mode="architecture"] .arch-note { animation: arch-rise .5s ease 1.5s backwards; }
@keyframes arch-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.arch-diagram { position: relative; }
.arch-diagram::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.06), transparent);
  transform: skewX(-14deg);
  pointer-events: none;
  z-index: 2;
}
body[data-mode="architecture"] .arch-diagram::after {
  animation: arch-sweep 1.5s ease-out .35s;
}
@keyframes arch-sweep {
  from { left: -60%; }
  to   { left: 115%; }
}

body[data-mode="architecture"] .arch-node {
  opacity: 0;
  animation: arch-node-in .55s cubic-bezier(.2,.8,.3,1.2) forwards;
}
body[data-mode="architecture"] .arch-node { animation-delay: calc(var(--d, 0s) * .45 + .45s); }
@keyframes arch-node-in {
  from { opacity: 0; transform: scale(.6); }
  to   { opacity: 1; transform: scale(1); }
}
.arch-node { transform-box: fill-box; transform-origin: center; }

.arch-burst { opacity: 0; transform-box: fill-box; transform-origin: center; }
body[data-mode="architecture"] .arch-burst {
  animation: arch-burst 1.1s ease-out 1.15s;
}
@keyframes arch-burst {
  0%   { opacity: .9; r: 8; stroke-width: 3; }
  100% { opacity: 0; r: 70; stroke-width: .5; }
}

.arch-content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 72px var(--s-24) var(--s-32);
}

.arch-head {   margin-bottom: var(--s-16); }
.arch-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-12);
  flex-wrap: wrap;
  margin: 0 0 var(--s-4);
}
.arch-head-row .arch-title { margin: 0; }
.arch-title {
  font-size: var(--t-28);
  font-weight: 700;
  margin: 0 0 var(--s-4);
  color: var(--text);
}
.arch-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-12);
  font-weight: 600;
  color: var(--success);
  background: var(--success-soft);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(79, 212, 168, 0.25);
}
.arch-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--success);
  box-shadow: 0 0 6px var(--success);
  animation: arch-blink 2s ease-in-out infinite;
}
.arch-sub {
  font-size: var(--t-14);
  color: var(--muted);
  margin: 0;
  max-width: 64ch;
}

.arch-callout {   margin-bottom: var(--s-16); }
.arch-callout code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t-11);
  background: var(--surface-3);
  padding: 1px 5px;
  border-radius: var(--r-4);
}

.arch-diagram {
  width: 100%;
  margin: var(--s-8) 0 var(--s-16);
  border: 1px solid var(--border);
  border-radius: var(--r-12);
  overflow: hidden;
  background: color-mix(in srgb, var(--surface-2) 82%, var(--shell));
  position: relative;
}
.arch-diagram::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 38%, rgba(255,133,81,.07), transparent 60%);
  pointer-events: none;
}
.arch-diagram svg {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
}

.arch-link {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.6;
  stroke-dasharray: 6 6;
  animation: arch-flow 1.1s linear infinite;
  opacity: 0.9;
}
.arch-link.arch-out {
  stroke: var(--brand);
  opacity: 0.85;
}
.arch-link.arch-loop {
  stroke: var(--success);
  stroke-dasharray: 4 6;
  animation-duration: 1.6s;
  opacity: 0.7;
}
.arch-link.arch-sync {
  stroke: var(--info);
  stroke-dasharray: none;
  animation: none;
  stroke-width: 1.4;
  opacity: 0.6;
}
@keyframes arch-flow {
  to { stroke-dashoffset: -24; }
}

.arch-pkt {
  filter: drop-shadow(0 0 5px currentColor);
}

.arch-led {
  animation: arch-blink 2.4s ease-in-out infinite;
}
.arch-node .arch-led { animation-delay: var(--d, 0s); }
@keyframes arch-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.arch-node circle { transition: stroke-width .15s ease, opacity .15s ease; }
.arch-node:hover circle:nth-child(2) { stroke-width: 2.5; }
.arch-node:hover circle:first-child { opacity: 0.16; }

.arch-broker {
  transform-box: fill-box;
  transform-origin: center;
  animation: arch-broker-pulse 3.6s ease-in-out infinite;
}
@keyframes arch-broker-pulse {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(255,133,81,.25)); }
  50% { filter: drop-shadow(0 0 9px rgba(255,133,81,.5)); }
}

.arch-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8) var(--s-16);
  margin-top: var(--s-4);
  padding-top: var(--s-12);
  border-top: 1px solid var(--border);
}
.arch-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-12);
  color: var(--muted);
}
.arch-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  display: inline-block;
}

.arch-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-16);
  margin-top: var(--s-16);
}
.arch-grid .admin-card { margin-bottom: 0; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; border: 1px solid var(--border); }
.arch-grid .admin-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); border-color: rgba(255,133,81,0.3); }
.arch-grid .admin-card p {
  font-size: var(--t-12);
  line-height: 1.55;
  color: var(--text);
  margin: var(--s-8) 0 0;
}
.arch-grid .admin-card strong { color: var(--text); }

.arch-note { margin-top: var(--s-16); }
.arch-note code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t-11);
  background: var(--surface-3);
  padding: 1px 5px;
  border-radius: var(--r-4);
}

@media (max-width: 768px) {
  .arch-grid { grid-template-columns: 1fr; }
  .arch-content { padding: 64px var(--s-16) var(--s-24); }
}

/* ============================================================
   Admin CCTV counting styles (boxes, counters, CCTV stage)
   Shared by the Admin → CCTV Feeds view. Fleet-only blocks removed.
   ============================================================ */
.ent-content { padding: 72px var(--s-32) var(--s-32); max-width: 1320px; margin: 0 auto; }

.ent-head { position: relative; margin-bottom: var(--s-24); }
.ent-head-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-16); flex-wrap: wrap;
}
.ent-title { font-size: var(--t-28); font-weight: 700; color: var(--text); margin: 0; }
.ent-sub { font-size: var(--t-14); color: var(--muted); margin: 4px 0 0; }

.ent-tabs { display: inline-flex; gap: var(--s-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-12); padding: var(--s-4); }
.ent-tab {
  display: inline-flex; align-items: center; gap: var(--s-8);
  padding: 8px 14px; border: 0; background: transparent; cursor: pointer;
  color: var(--muted); font-size: var(--t-12); font-weight: 600; border-radius: var(--r-8);
  transition: background .15s ease, color .15s ease;
}
.ent-tab [data-lucide] { width: 15px; height: 15px; }
.ent-tab:hover { color: var(--text); }
.ent-tab.active { background: var(--brand); color: var(--on-brand); }

.ent-demo-chip {
  position: absolute; top: -4px; right: 0;
  font-size: var(--t-10); letter-spacing: .02em;
  color: var(--muted); opacity: 0.6;
  border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px;
  background: var(--surface); max-width: 340px; text-align: right;
}
.ent-cam-sub { display: block; font-size: var(--t-11); font-weight: 500; color: var(--cyan); margin-top: 2px; }

.ent-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-16); padding: var(--s-16); box-shadow: var(--shadow-card);
}
.ent-card .admin-card-head { margin-bottom: var(--s-12); }

/* ===== AI Counting ===== */
.ent-aigrid { display: grid; grid-template-columns: 1.7fr 1fr; gap: var(--s-16); }

.cctv-stage {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: var(--inset); border-radius: var(--r-12); overflow: hidden;
  border: 1px solid var(--border);
}
.cctv-feedimg { position: absolute; inset: 0; background-size: cover; background-position: center; background-color: var(--inset); }
.cctv-overlay { position: absolute; inset: 0; pointer-events: none; }

.det-box {
  position: absolute; border: 2px solid; border-radius: 2px;
  background: transparent; box-sizing: border-box;
  transition: transform .2s linear;
}
.det-label {
  position: absolute; top: -15px; left: -2px;
  font-size: var(--t-10); font-weight: 700; letter-spacing: .03em;
  color: var(--on-brand); padding: 1px 5px; border-radius: 3px;
  white-space: nowrap; line-height: 1.4;
}

.cctv-hud {
  position: absolute; top: 8px; left: 10px; right: 10px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--t-10); font-weight: 600; letter-spacing: .05em;
  color: rgba(242, 244, 248, .85); text-shadow: 0 1px 2px rgba(0,0,0,.7);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.cctv-hud-rec { display: inline-flex; align-items: center; gap: 5px; }
.cctv-rec-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--danger); animation: cctvRec 1.2s infinite; }
@keyframes cctvRec { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.cctv-scanline {
  position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(79, 212, 232, .35), transparent);
  animation: cctvScan 4.5s linear infinite; pointer-events: none;
}
@keyframes cctvScan { 0% { top: -2%; } 100% { top: 102%; } }

.cctv-drop-hint {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  font-size: var(--t-10); color: var(--muted); background: rgba(10, 15, 24, .82);
  border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px;
  white-space: nowrap; max-width: 92%; overflow: hidden; text-overflow: ellipsis;
}
.cctv-stage.has-media .cctv-drop-hint { display: none; }

.cctv-footstats {
  display: flex; flex-wrap: wrap; gap: var(--s-16);
  margin-top: var(--s-12); font-size: var(--t-12); color: var(--muted);
}
.cctv-footstats strong { color: var(--text); font-weight: 600; }
.cctv-footstats [data-lucide] { width: 14px; height: 14px; vertical-align: -2px; }

.ent-total {
  display: flex; align-items: baseline; gap: var(--s-12);
  padding: var(--s-12) 0 var(--s-16); border-bottom: 1px solid var(--border);
}
.ent-total-num { font-size: 44px; font-weight: 700; color: var(--brand); line-height: 1; font-variant-numeric: tabular-nums; }
.ent-total-label { font-size: var(--t-12); color: var(--muted); }
.ent-total-label strong { color: var(--text); }

.ent-type-list { display: flex; flex-direction: column; gap: var(--s-8); padding: var(--s-12) 0; }
.ent-type-row {
  display: grid; grid-template-columns: 10px 1fr 1.4fr auto; align-items: center;
  gap: var(--s-12); padding: 6px 8px; border-radius: var(--r-8);
  transition: background .15s ease;
}
.ent-type-row.flash { background: rgba(255, 133, 81, .10); }
.ent-type-dot { width: 10px; height: 10px; border-radius: 50%; }
.ent-type-name { font-size: var(--t-12); color: var(--text); }
.ent-type-bar { height: 6px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.ent-type-fill { display: block; height: 100%; border-radius: 999px; transition: width .5s ease; }
.ent-type-num { font-size: var(--t-14); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; min-width: 40px; text-align: right; }

.ent-issues-block { margin-top: var(--s-12); padding-top: var(--s-12); border-top: 1px dashed var(--border); }
.ent-issues-eyebrow { font-size: var(--t-10); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.ent-issues-eyebrow [data-lucide] { width: 12px; height: 12px; }
.ent-issue-row { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: var(--s-12); padding: 4px 8px; border-radius: var(--r-8); }
.ent-issue-dot { width: 8px; height: 8px; border-radius: 50%; }
.ent-issue-name { font-size: var(--t-12); color: var(--text); }
.ent-issue-num { font-size: var(--t-14); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; min-width: 24px; text-align: right; }

.ent-counter-note {
  display: flex; align-items: flex-start; gap: var(--s-8);
  font-size: var(--t-11); color: var(--muted); margin-top: var(--s-8);
}
.ent-counter-note [data-lucide] { width: 14px; height: 14px; flex: none; margin-top: 1px; }

/* ===== Fleet Routing ===== */
.ent-fleetgrid { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--s-16); align-items: start; }

.ent-form { display: flex; flex-direction: column; gap: var(--s-12); }
.ent-field { display: flex; flex-direction: column; gap: 5px; font-size: var(--t-12); color: var(--muted); }
.ent-field span { font-weight: 600; }
.ent-field input, .ent-field select {
  background: var(--surface-3); border: 1px solid var(--border); color: var(--text);
  padding: 9px 10px; border-radius: var(--r-8); font-size: var(--t-14); font-family: inherit;
}
.ent-field input:focus, .ent-field select:focus { outline: none; border-color: var(--brand); }

.ent-gen-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-8);
  margin-top: var(--s-4); padding: var(--s-12) var(--s-16); border: 0; cursor: pointer;
  background: var(--brand); color: var(--on-brand); font-weight: 600; font-size: var(--t-14);
  border-radius: var(--r-12); transition: background .15s ease, transform .1s ease;
}
.ent-gen-btn:hover { background: var(--brand-strong); }
.ent-gen-btn:active { transform: scale(.99); }
.ent-gen-btn[disabled] { opacity: 0.6; cursor: progress; }
.ent-gen-btn.loading { background: var(--brand-strong); }
.ent-gen-btn [data-lucide] { width: 16px; height: 16px; }

.ent-loading {
  display: flex; align-items: center; gap: var(--s-12); justify-content: center;
  padding: var(--s-24); color: var(--muted); font-size: var(--t-14);
}
.ent-spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid var(--surface-3); border-top-color: var(--brand);
  animation: entSpin .8s linear infinite;
}
@keyframes entSpin { to { transform: rotate(360deg); } }

.ent-result { margin-top: var(--s-16); padding-top: var(--s-12); border-top: 1px solid var(--border); }
.ent-result-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-8); margin: var(--s-12) 0; }
.ent-rstat { text-align: center; background: var(--surface-3); border-radius: var(--r-8); padding: var(--s-8); }
.ent-rstat-num { font-size: var(--t-22); font-weight: 700; color: var(--brand); }
.ent-rstat-label { font-size: var(--t-11); color: var(--muted); margin-top: 2px; }

.ent-fuel {
  display: flex; align-items: center; gap: var(--s-12);
  background: var(--success-soft); border: 1px solid rgba(79, 212, 168, .25);
  border-radius: var(--r-8); padding: var(--s-12); margin: var(--s-8) 0 var(--s-12);
}
.ent-fuel-icon {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--r-8); flex: none;
  background: rgba(79, 212, 168, .12); color: var(--success);
}
.ent-fuel-icon [data-lucide] { width: 18px; height: 18px; }
.ent-fuel-body { flex: 1; min-width: 0; }
.ent-fuel-line { font-size: var(--t-12); color: var(--text); }
.ent-fuel-line strong { color: var(--text); }
.ent-fuel-cost { color: var(--success) !important; font-weight: 700; }
.ent-fuel-save { display: flex; align-items: center; gap: 5px; font-size: var(--t-11); color: var(--success); margin-top: 4px; }
.ent-fuel-save [data-lucide] { width: 13px; height: 13px; }
.ent-fuel-save strong { color: var(--success); }

.ent-badges { display: flex; flex-direction: column; gap: var(--s-8); margin: var(--s-12) 0; }
.ent-badge {
  display: inline-flex; align-items: center; gap: var(--s-8);
  font-size: var(--t-12); font-weight: 500; padding: 7px 10px; border-radius: var(--r-8);
  border: 1px solid var(--border);
}
.ent-badge [data-lucide] { width: 14px; height: 14px; flex: none; }
.ent-badge-warn { background: var(--warn-soft); color: var(--warn); border-color: rgba(255, 180, 84, .3); }
.ent-badge-info { background: var(--cyan-soft); color: var(--cyan); border-color: rgba(79, 212, 232, .3); }

.ent-stops-list { list-style: none; padding: 0; margin: var(--s-8) 0 0; display: flex; flex-direction: column; gap: 6px; }
.ent-stops-list li { display: flex; align-items: center; gap: var(--s-8); font-size: var(--t-12); color: var(--text); }
.ent-stop-idx {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: var(--brand-soft); color: var(--brand); font-size: var(--t-10); font-weight: 700;
}

.ent-fleet-map {
  width: 100%; aspect-ratio: 4 / 3; background: var(--inset);
  border-radius: var(--r-12); overflow: hidden; border: 1px solid var(--border);
}
.ent-route-draw { stroke-dasharray: 200; stroke-dashoffset: 200; animation: entRouteDraw 1.1s ease forwards; }
@keyframes entRouteDraw { to { stroke-dashoffset: 0; } }

/* Fleet roster table */
.ent-roster-card { margin-top: var(--s-16); }
.ent-roster { width: 100%; border-collapse: collapse; font-size: var(--t-12); }
.ent-roster th, .ent-roster td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--border); }
.ent-roster th { color: var(--muted); font-weight: 600; font-size: var(--t-11); text-transform: uppercase; letter-spacing: .04em; }
.ent-roster td.num { font-variant-numeric: tabular-nums; text-align: right; }
.ent-roster tbody tr:last-child td { border-bottom: 0; }
.ent-roster tbody tr:hover td { background: var(--surface-3); }
.ent-plate { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text); font-weight: 600; }
.ent-roster td.muted { color: var(--muted); }

.ent-roster-filters { display: flex; gap: var(--s-8); margin-bottom: var(--s-12); flex-wrap: wrap; }
.ent-filter {
  background: var(--surface-3); border: 1px solid var(--border); color: var(--muted);
  padding: 5px 12px; border-radius: 999px; font-size: var(--t-12); font-weight: 600;
  cursor: pointer; transition: all .15s ease;
}
.ent-filter:hover { color: var(--text); }
.ent-filter.active { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }

.ent-add-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--brand); color: var(--on-brand); border: 0;
  padding: var(--s-8) var(--s-12); border-radius: var(--r-8); font-weight: 600; font-size: var(--t-12);
  cursor: pointer; transition: background .15s ease;
}
.ent-add-btn:hover { background: var(--brand-strong); }
.ent-add-btn [data-lucide] { width: 14px; height: 14px; }

.ent-row-del {
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  border-radius: var(--r-6); padding: var(--s-4); cursor: pointer;
  transition: all .15s ease; display: inline-flex;
}
.ent-row-del:hover { color: var(--danger); border-color: rgba(255,107,107,.4); background: var(--danger-soft); }
.ent-row-del [data-lucide] { width: 13px; height: 13px; }

.ent-svc-soon { color: var(--warn); font-weight: 600; }
.ent-svc-due { color: var(--danger); font-weight: 600; }

/* ===== CCTV Feeds control room ===== */
.cctv-control-room { display: grid; grid-template-columns: 280px 1fr; gap: var(--s-16); margin-top: var(--s-16); align-items: start; }
@media (max-width: 920px) { .cctv-control-room { grid-template-columns: 1fr; } }

.cctv-picker-card { padding: var(--s-12); }
.cctv-picker { display: grid; grid-template-columns: 1fr; gap: var(--s-8); }
.cctv-pick {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--r-8);
  padding: 10px 12px; text-align: left; cursor: pointer;
  color: var(--text); transition: all .15s ease; font-family: inherit;
}
.cctv-pick:hover { border-color: rgba(255,133,81,0.45); transform: translateX(2px); }
.cctv-pick.active {
  background: var(--brand-soft); border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(255,133,81,0.18) inset;
}
.cctv-pick-tag { font-size: var(--t-10); font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.cctv-pick.active .cctv-pick-tag { color: var(--brand); }
.cctv-pick-name { font-size: var(--t-12); font-weight: 600; color: var(--text); }
.cctv-pick-status {
  font-size: var(--t-10); font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  display: inline-flex; align-items: center; gap: 5px;
}
.cctv-pick-live { color: var(--success); }
.cctv-pick-live .cctv-rec-dot { background: var(--success); }
.cctv-pick-pending { color: var(--muted); }
.cctv-pick-meta { font-size: var(--t-10); color: var(--muted); }

.cctv-pick-hint { display: flex; align-items: flex-start; gap: 6px; font-size: var(--t-11); color: var(--muted); margin-top: var(--s-8); }
.cctv-pick-hint [data-lucide] { width: 13px; height: 13px; flex: none; }

.cctv-stage-card { padding: var(--s-16); }
.cctv-stage-card .cctv-stage { width: 100%; }
.cctv-stage.is-awaiting .cctv-feedimg,
.cctv-stage.is-awaiting .cctv-overlay,
.cctv-stage.is-awaiting .cctv-scanline { display: none; }

.cctv-awaiting {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  text-align: center; padding: var(--s-24); color: var(--muted);
}
.cctv-awaiting-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--surface-3); display: flex; align-items: center; justify-content: center;
}
.cctv-awaiting-icon [data-lucide] { width: 26px; height: 26px; color: var(--brand); }
.cctv-awaiting-title { font-size: var(--t-16); color: var(--text); font-weight: 600; }
.cctv-awaiting-sub { font-size: var(--t-12); max-width: 380px; }

/* ===== Active Dispatches ===== */
.ent-dispatch-card { margin-top: var(--s-16); }
.ent-dispatch-list { list-style: none; display: flex; flex-direction: column; gap: var(--s-12); margin: var(--s-12) 0; padding: 0; }
.ent-dispatch-empty {
  padding: var(--s-16); text-align: center; color: var(--muted); font-size: var(--t-12);
  background: var(--surface-3); border-radius: var(--r-8); border: 1px dashed var(--border);
}
.ent-dispatch-row {
  background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--r-8);
  padding: 10px 12px; display: flex; flex-direction: column; gap: 6px;
}
.ent-dispatch-row.is-done { opacity: 0.55; }
.ent-dispatch-top { display: flex; align-items: center; gap: var(--s-8); flex-wrap: wrap; }
.ent-dispatch-id {
  font-size: var(--t-10); font-weight: 700; color: var(--brand); padding: 2px 6px;
  background: var(--brand-soft); border-radius: var(--r-4); letter-spacing: .04em;
}
.ent-dispatch-vehicle { font-size: var(--t-12); color: var(--text); font-weight: 500; }
.ent-dispatch-eta { font-size: var(--t-12); color: var(--muted); margin-left: auto; font-variant-numeric: tabular-nums; }
.ent-dispatch-route { font-size: var(--t-12); color: var(--muted); }
.ent-dispatch-action { display: flex; justify-content: flex-end; margin-top: 2px; }
.ent-dispatch-done {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--brand); color: var(--on-brand); border: 0;
  padding: 4px 10px; border-radius: var(--r-6); font-size: var(--t-11); font-weight: 700;
  cursor: pointer; transition: background .15s ease;
}
.ent-dispatch-done:hover { background: var(--brand-strong); }
.ent-dispatch-done [data-lucide] { width: 12px; height: 12px; }

.ent-st {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--t-11); font-weight: 600; padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--border);
}
.ent-st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.ent-st-transit { color: var(--success); background: var(--success-soft); border-color: rgba(79, 212, 168, .25); }
.ent-st-transit::before { background: var(--success); animation: live-pulse 1.6s infinite; }
.ent-st-idle { color: var(--muted); background: var(--surface-3); }
.ent-st-idle::before { background: var(--muted); }
.ent-st-maint { color: var(--warn); background: var(--warn-soft); border-color: rgba(255, 180, 84, .25); }
.ent-st-maint::before { background: var(--warn); }
.ent-st-delivered { color: var(--success); background: var(--success-soft); border-color: rgba(79, 212, 168, .25); }
.ent-st-delivered::before { background: var(--success); }
.ent-st-danger { color: var(--danger); background: var(--danger-soft); border-color: rgba(255, 107, 107, .25); }
.ent-st-danger::before { background: var(--danger); }

/* ===== POD sheet + View POD button ===== */
.ent-dispatch-pod {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--surface-3); color: var(--cyan); border: 1px solid var(--border);
  padding: 4px 10px; border-radius: var(--r-6); font-size: var(--t-11); font-weight: 600;
  cursor: pointer; transition: border-color .15s ease, color .15s ease;
}
.ent-dispatch-pod:hover { border-color: var(--cyan); color: var(--cyan); }
.ent-dispatch-pod [data-lucide] { width: 12px; height: 12px; }

.pod-sheet { max-width: 440px; }
.pod-head { display: flex; align-items: center; gap: var(--s-8); margin-bottom: var(--s-4); }
.pod-head .pod-id { margin-left: auto; font-family: var(--mono, monospace); font-size: var(--t-11); color: var(--muted); }
.pod-route { font-size: var(--t-14); font-weight: 600; color: var(--text); margin-bottom: var(--s-12); }
.pod-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--s-12); font-size: var(--t-12); color: var(--muted); }
.pod-field input {
  background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--r-8);
  padding: 8px 10px; color: var(--text); font: inherit; font-size: var(--t-14);
}
.pod-field input:focus { outline: none; border-color: var(--brand); }
.pod-sig-row { margin-bottom: var(--s-12); }
.pod-sig-line {
  height: 48px; border: 1px dashed var(--border); border-radius: var(--r-8);
  background: repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(255,255,255,.02) 8px, rgba(255,255,255,.02) 16px);
}
.pod-sig-row.captured .pod-sig-line {
  border-style: solid; border-color: rgba(79, 212, 168, .4);
  background:
    radial-gradient(circle at 20% 60%, var(--success) 0 2px, transparent 3px),
    radial-gradient(circle at 35% 40%, var(--success) 0 2px, transparent 3px),
    var(--success-soft);
}
.pod-sig-label { font-size: var(--t-10); color: var(--muted); display: block; margin-top: 4px; }
.pod-time-row { display: flex; align-items: center; gap: 6px; font-size: var(--t-12); color: var(--muted); margin-bottom: var(--s-12); }
.pod-time-row [data-lucide] { width: 13px; height: 13px; }
.pod-actions { display: flex; gap: var(--s-8); }
.pod-actions .btn-ghost { flex: 1; }
.pod-actions .ent-gen-btn { flex: 2; justify-content: center; }

/* ===== Driver cells in roster ===== */
.ent-driver { font-size: var(--t-12); font-weight: 500; color: var(--text); }
.ent-driver-assign, .ent-driver-reassign {
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent; border: 1px solid var(--border); color: var(--cyan);
  padding: 2px 8px; border-radius: var(--r-6); font-size: var(--t-10); font-weight: 600;
  cursor: pointer; transition: border-color .15s ease;
}
.ent-driver-assign:hover, .ent-driver-reassign:hover { border-color: var(--cyan); }
.ent-driver-assign [data-lucide], .ent-driver-reassign [data-lucide] { width: 11px; height: 11px; }
.ent-driver-reassign { color: var(--muted); border-color: transparent; }
.ent-driver-reassign:hover { color: var(--cyan); }

/* ===== Exceptions feed (Overview) ===== */
.ent-exception-row {
  list-style: none; display: flex; align-items: center; gap: var(--s-12);
  padding: var(--s-12); background: var(--surface-3); border-radius: var(--r-8);
  border: 1px solid var(--border); cursor: pointer; transition: border-color .15s ease;
}
.ent-exception-row:hover { border-color: var(--brand); }
.ent-exception-row.all-clear { cursor: default; }
.ent-exception-row.all-clear:hover { border-color: var(--border); }
.ent-exception-icon { width: 30px; height: 30px; border-radius: var(--r-8); display: grid; place-items: center; background: var(--surface); color: var(--warn); flex-shrink: 0; }
.ent-exception-row.all-clear .ent-exception-icon { color: var(--success); }
.ent-exception-icon [data-lucide] { width: 16px; height: 16px; }
.ent-exception-body { flex: 1; min-width: 0; }
.ent-exception-title { font-size: var(--t-12); font-weight: 600; color: var(--text); display: block; }
.ent-exception-meta { font-size: var(--t-11); color: var(--muted); display: block; margin-top: 2px; }

/* ===== Enterprise toast ===== */
.ent-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-left: 3px solid var(--success); padding: 10px 16px; border-radius: var(--r-8);
  font-size: var(--t-14); font-weight: 500; box-shadow: var(--shadow-pop); z-index: 9999;
  opacity: 0; transition: opacity .2s ease, transform .2s ease; pointer-events: none;
}
.ent-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== Admin Fleet & Automation view ===== */
.fleet-row {
  list-style: none; padding: var(--s-12);
  background: var(--surface-3); border-radius: var(--r-8); margin-bottom: var(--s-8);
  border: 1px solid var(--border);
}
.fleet-row-top { display: flex; align-items: center; gap: var(--s-8); margin-bottom: 6px; }
.fleet-type { font-size: var(--t-10); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--brand); }
.fleet-plate { font-size: var(--t-12); font-weight: 600; color: var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.fleet-eta { margin-left: auto; font-size: var(--t-12); color: var(--muted); }
.fleet-route { font-size: var(--t-12); color: var(--text); margin-bottom: 8px; }
.fleet-bar { height: 6px; background: var(--surface); border-radius: 999px; overflow: hidden; }
.fleet-bar-fill { display: block; height: 100%; background: var(--brand); border-radius: 999px; transition: width 2s linear; }

/* ===== Enterprise Overview (KPI grid + donut) ===== */
.ent-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-16);
  margin-bottom: var(--s-24);
}
.ent-kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-12);
  padding: var(--s-16);
  box-shadow: var(--shadow-card);
}
.ent-kpi-icon {
  width: 36px; height: 36px;
  border-radius: var(--r-10);
  background: var(--brand-soft);
  color: var(--brand);
  display: grid; place-items: center;
  margin-bottom: var(--s-12);
}
.ent-kpi-icon [data-lucide] { width: 20px; height: 20px; }
.ent-kpi-num { font-size: var(--t-28); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.ent-kpi-num .kpi-unit { font-size: var(--t-14); font-weight: 500; color: var(--muted); margin-left: 2px; }
.ent-kpi-label { font-size: var(--t-12); color: var(--muted); margin-top: 6px; }
.ent-kpi-trend { font-size: var(--t-11); font-weight: 600; margin-top: var(--s-8); color: var(--muted); }

.ent-overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-16);
  align-items: start;
}
.ent-donut-wrap { display: flex; align-items: center; gap: var(--s-24); }
.ent-donut { width: 140px; height: 140px; flex-shrink: 0; }
.ent-donut-legend {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
  font-size: var(--t-12);
}
.ent-donut-legend li { display: flex; align-items: center; gap: 6px; }
.ent-donut-legend .legend-square { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.ent-donut-legend strong { margin-left: auto; color: var(--text); }
.ent-coding-strip {
  display: flex; flex-direction: column; gap: var(--s-8);
  padding: var(--s-12);
  background: var(--warn-soft);
  border: 1px solid rgba(255, 180, 84, .25);
  border-radius: var(--r-8);
}
.ent-coding-strip.all-clear {
  background: var(--success-soft);
  border-color: rgba(79, 212, 168, .25);
}
.ent-coding-strip .ent-coding-title { font-size: var(--t-14); font-weight: 700; color: var(--text); }
.ent-coding-strip .ent-coding-meta { font-size: var(--t-12); color: var(--muted); }
.ent-coding-strip .ent-coding-plates { font-weight: 700; color: var(--warn); }
.ent-coding-strip.all-clear .ent-coding-plates { color: var(--success); }

.ent-hero-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-16);
  padding: var(--s-16);
  background: var(--surface-3);
  border-radius: var(--r-12);
}
.ent-hero-stat { text-align: center; }
.ent-hero-num { font-size: 26px; font-weight: 700; color: var(--success); line-height: 1; font-variant-numeric: tabular-nums; }
.ent-hero-label { font-size: var(--t-11); color: var(--muted); margin-top: 6px; }
.ent-hero-note { font-size: var(--t-11); color: var(--muted); margin-top: var(--s-12); text-align: center; }

@media (max-width: 920px) {
  .ent-aigrid, .ent-fleetgrid, .ent-overview-grid { grid-template-columns: 1fr; }
  .ent-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .ent-hero-strip { grid-template-columns: 1fr; }
  .ent-content { padding: 68px var(--s-16) var(--s-24); }
}