*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg:     #07090e;
      --s1:     #0d1218;
      --s2:     #111b26;
      --border: #1a2535;
      --b2:     #253550;
      --text:   #dce8f5;
      --muted:  #4d6880;
      --dms:    #4a96ff;
      --apc:    #2dcc65;
      --warn:   #f59e0b;
      --danger: #ef4444;
      --mono: "JetBrains Mono", monospace;
      --sans: "Inter", system-ui, sans-serif;
    }

    /* ── Light mode overrides ── */
    [data-theme="light"] {
      --bg:     #f0f4f8;
      --s1:     #ffffff;
      --s2:     #f5f8fc;
      --border: #dde5ef;
      --b2:     #c5d0df;
      --text:   #1a2333;
      --muted:  #7a92a8;
      --dms:    #1a6fd4;
      --apc:    #16a34a;
      --warn:   #d97706;
      --danger: #dc2626;
    }
    [data-theme="light"] header {
      background: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%);
      border-bottom-color: #d9e2ee;
      box-shadow: 0 1px 6px rgba(15,23,42,.06);
    }
    [data-theme="light"] .tab-bar {
      background: #f7fbff;
      border-bottom-color: #d9e2ee;
    }
    [data-theme="light"] .tab-btn { color: #7a92a8; }
    [data-theme="light"] .tab-btn:hover { color: var(--text); }
    [data-theme="light"] .hdr-logo { color: #1a2333; }
    [data-theme="light"] .hdr-slash { color: #c3cedd; }
    [data-theme="light"] .hdr-clock { color: #7f96ad; }
    [data-theme="light"] #theme-btn {
      background: #fff;
      border-color: #c5d0df !important;
      color: #56697f !important;
    }
    [data-theme="light"] #panel-dms   .pband { background: linear-gradient(90deg,#dbeafe,#eff6ff); border-color: #bfdbfe; color: var(--dms);    box-shadow: none; }
    [data-theme="light"] #panel-apc   .pband { background: linear-gradient(90deg,#dcfce7,#f0fdf4); border-color: #bbf7d0; color: var(--apc);    box-shadow: none; }
    [data-theme="light"] #panel-theft .pband { background: linear-gradient(90deg,#fee2e2,#fff1f2); border-color: #fecaca; color: var(--danger); box-shadow: none; }
    [data-theme="light"] .video-area          { background: #d4dae3; }
    [data-theme="light"] .vid-offline         { color: #aab; }
    [data-theme="light"] .ll                  { color: #b8c8d8; }
    [data-theme="light"] .ll.info             { color: #9ab0c0; }
    [data-theme="light"] .ll.npu              { color: #c2410c; }
    [data-theme="light"] .ll.count-in         { color: var(--apc); }
    [data-theme="light"] .ll.count-out        { color: var(--dms); }
    [data-theme="light"] .ll.warn             { color: var(--danger); }
    [data-theme="light"] .ll-ts               { color: #c8d8e8; }
    [data-theme="light"] .mc-val.blue         { color: #2563eb; }
    [data-theme="light"] .kv-v                { color: var(--dms); }
    /* Active flag light-mode backgrounds */
    [data-theme="light"] .flag.f-drowsy       { background: #fee2e2; border-color: rgba(220,38,38,.35); box-shadow: none; }
    [data-theme="light"] .flag.f-yawn         { background: #fef3c7; border-color: rgba(217,119,6,.35); box-shadow: none; }
    [data-theme="light"] .flag.f-dist         { background: #ede9fe; border-color: #818cf8; color: #4f46e5; box-shadow: none; }
    [data-theme="light"] .flag.f-phone        { background: #fce7f3; border-color: #e879a0; color: #be185d; box-shadow: none; }
    /* Active ctrl-btn states */
    [data-theme="light"] .ctrl-btn.active     { background: #dbeafe; border-color: rgba(26,111,212,.5); color: var(--dms); }
    [data-theme="light"] .ctrl-btn.active.green { background: #dcfce7; border-color: rgba(22,163,74,.5); color: var(--apc); }
    /* Alert card light overrides */
    [data-theme="light"] .dms-alert-card.ac-clear  { background: linear-gradient(180deg,#f0fdf4,#fff); border-color: rgba(22,163,74,.15); }
    [data-theme="light"] .dms-alert-card.ac-warn   { background: #fffbeb; border-color: rgba(217,119,6,.4); }
    [data-theme="light"] .dms-alert-card.ac-danger { background: #fef2f2; border-color: rgba(220,38,38,.4); }

    html, body { height: 100%; overflow: hidden; }
    body {
      background: var(--bg);
      color: var(--text);
      font-family: var(--sans);
      font-size: 14px;
      display: flex;
      flex-direction: column;
    }

    /* ── Header ── */
    header {
      background: linear-gradient(180deg, var(--s1) 0%, rgba(13,18,24,0.97) 100%);
      border-bottom: 1px solid var(--border);
      height: 46px;
      padding: 0 18px;
      display: flex;
      align-items: center;
      gap: 12px;
      flex-shrink: 0;
      z-index: 10;
      box-shadow: 0 1px 16px rgba(0,0,0,0.35);
    }
    .hdr-logo { font-weight: 900; font-size: 15px; letter-spacing: 3px; color: var(--text); text-transform: uppercase; }
    .hdr-slash { color: var(--b2); }

    .hdr-clock { margin-left: auto; font-family: var(--mono); font-size: 13px; color: var(--muted); letter-spacing: 1px; }

    #wt-dot {
      width: 10px; height: 10px; border-radius: 50%; display: inline-block;
      background: var(--warn); flex-shrink: 0;
      transition: background .4s, box-shadow .4s;
    }
    #wt-dot.connected    { background: var(--apc);    box-shadow: 0 0 7px var(--apc); }
    #wt-dot.lost         { background: var(--danger); box-shadow: 0 0 7px var(--danger); }

    /* ── Tab bar — hidden in multi-device mode; switchTab() still runs internally ── */
    .tab-bar { display: none; }
    .tab-btn {
      padding: 0 18px; height: 38px;
      font-size: 11px; font-weight: 800;
      text-transform: uppercase; letter-spacing: 1.5px;
      background: none; border: none;
      border-bottom: 2px solid transparent; margin-bottom: -1px;
      color: var(--muted); cursor: pointer; font-family: var(--sans);
      transition: color .2s, border-color .2s, background .2s;
      display: flex; align-items: center; gap: 8px; white-space: nowrap;
    }
    .tab-btn:hover { color: var(--text); }
    .tab-btn.tab-dms.active   { color: var(--dms);    border-bottom-color: var(--dms); }
    .tab-btn.tab-ods.active   { color: var(--apc);    border-bottom-color: var(--apc); }
    .tab-btn.tab-theft.active { color: var(--danger); border-bottom-color: var(--danger); }
    .tab-label { color: inherit; }
    .tab-status {
      font-size: 9px; line-height: 1;
      font-weight: 800; letter-spacing: 1px;
      text-transform: uppercase;
      padding: 3px 7px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--s2);
      color: var(--muted);
      flex-shrink: 0;
    }
    .tab-status.ok { color: var(--apc); border-color: rgba(45,204,101,0.3); }
    .tab-status.warn { color: var(--warn); border-color: rgba(245,158,11,0.35); }
    .tab-status.err { color: var(--danger); border-color: rgba(239,68,68,0.35); }
    [data-theme="light"] .tab-status { background: #fff; }

    /* ── Main columns ── */
    .columns {
      display: flex;
      flex: 1;
      overflow: hidden;
      min-height: 0;
    }

    /* ── Panel ── */
    .panel {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      min-width: 280px;
      position: relative;
    }

    /* ── Panel banner (replaces ctrl-msg toasts) ── */
    .panel-banner {
      position: absolute; left: 0; right: 0; top: 36px;
      padding: 5px 14px;
      font-size: 12px; font-weight: 700; letter-spacing: 0.3px;
      text-align: center; font-family: var(--mono);
      z-index: 20; pointer-events: none;
      opacity: 0; transition: opacity 0.3s;
    }
    .panel-banner.visible { opacity: 1; }
    .panel-banner.dms-ok  { background: rgba(7,17,30,0.95);  color: var(--dms);    border-bottom: 1px solid rgba(74,150,255,0.2); }
    .panel-banner.dms-err { background: rgba(32,13,13,0.95); color: var(--danger); border-bottom: 1px solid rgba(239,68,68,0.2); }
    .panel-banner.apc-ok  { background: rgba(7,18,9,0.95);   color: var(--apc);    border-bottom: 1px solid rgba(45,204,101,0.2); }
    .panel-banner.apc-err { background: rgba(32,13,13,0.95); color: var(--danger); border-bottom: 1px solid rgba(239,68,68,0.2); }

    /* ── Calibration progress overlay (top of DMS video) ── */
    .calib-overlay {
      position: absolute; top: 0; left: 0; right: 0;
      padding: 5px 12px;
      background: rgba(7,17,30,0.92);
      border-bottom: 1px solid rgba(74,150,255,0.2);
      font-size: 12px; font-weight: 700; font-family: var(--mono);
      color: var(--dms); text-align: center; letter-spacing: 0.5px;
    }

    /* ── Head pose metric card ── */
    .mc-pose { display: flex; flex-direction: column; align-items: center; gap: 4px; }
    #dms-pose-canvas { display: block; border-radius: 6px; background: rgba(0,0,0,0.3); }
    .mc-pose-zone { font-family: var(--mono); font-size: 17px; font-weight: 700; color: var(--dms); }
    .mc-pose-angles { display: flex; align-items: center; gap: 4px; margin-top: 3px; font-family: var(--mono); }
    .mc-pose-angle-lbl { font-size: 9px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
    .mc-pose-angle-val { font-size: 11px; font-weight: 700; color: var(--dms); margin-right: 4px; }
    /* ── Combined metric sub-value ── */
    .mc-sub { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--text); margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); width: 100%; }
    .mc-sub-lbl { font-size: 9px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); display: block; margin-bottom: 1px; }

    /* ── Panel header band ── */
    .pband {
      display: flex; align-items: center; gap: 8px;
      height: 36px; padding: 0 14px;
      font-size: 10px; font-weight: 800;
      text-transform: uppercase; letter-spacing: 2px;
      flex-shrink: 0;
    }
    #panel-dms   .pband { background: linear-gradient(90deg, #071220 0%, #0a1828 100%); border-bottom: 1px solid rgba(74,150,255,0.18); color: var(--dms);    box-shadow: 0 1px 0 rgba(74,150,255,0.08); }
    #panel-apc   .pband { background: linear-gradient(90deg, #071510 0%, #0a1d14 100%); border-bottom: 1px solid rgba(45,204,101,0.18); color: var(--apc);    box-shadow: 0 1px 0 rgba(45,204,101,0.08); }
    #panel-theft .pband { background: linear-gradient(90deg, #200d0d 0%, #280e0e 100%); border-bottom: 1px solid rgba(239,68,68,0.18);  color: var(--danger); box-shadow: 0 1px 0 rgba(239,68,68,0.08); }
    .pbadge {
      background: rgba(0,0,0,0.25); border: 1px solid var(--border);
      padding: 2px 8px; border-radius: 5px;
      font-size: 11px; font-family: var(--mono);
      color: var(--muted); font-weight: 500;
    }
    .pbadge span { color: var(--text); }
    .pbadge span.red { color: var(--danger); }
    .pband-max {
      margin-left: auto; background: none;
      border: 1px solid var(--border); color: var(--muted);
      cursor: pointer; width: 22px; height: 22px;
      border-radius: 4px; font-size: 13px; line-height: 1;
      display: flex; align-items: center; justify-content: center;
      padding: 0; flex-shrink: 0;
      transition: background .15s, color .15s, border-color .15s;
    }
    .pband-max:hover { background: rgba(255,255,255,0.07); color: var(--text); border-color: var(--b2); }
    .pband-max.active { color: var(--text); border-color: var(--b2); background: rgba(255,255,255,0.07); }

    /* ── Panel body / feed / sidebar ── */
    .panel-body {
      display: flex; flex-direction: column;
      flex: 1; overflow: hidden; min-height: 0;
    }
    .panel-feed {
      display: flex; flex-direction: column;
      flex: 1; overflow: hidden; min-height: 0;
    }
    /* Normal mode: sidebar is transparent wrapper — children flow in column */
    .panel-sidebar { display: contents; }

    /* ── Maximized two-column layout ── */
    .panel.maximized { flex: 1 !important; }
    .panel.maximized .panel-body { flex-direction: row; }
    .panel.maximized .panel-feed { flex: 1; min-width: 0; }
    .panel.maximized .panel-sidebar {
      display: flex; flex-direction: column;
      width: 450px; flex-shrink: 0;
      overflow: hidden;
      border-left: 1px solid var(--border);
    }
    #panel-dms.maximized .panel-sidebar { border-color: rgba(74,150,255,0.15); }
    #panel-apc.maximized .panel-sidebar { border-color: rgba(45,204,101,0.15); }
    /* DMS maximized — metric strip becomes a vertical stack */
    #panel-dms.maximized .metric-strip { flex-direction: column; }
    #panel-dms.maximized .metric-strip .mc {
      border-right: none; border-bottom: 1px solid var(--border);
      flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 16px;
      padding: 14px 18px;
    }
    #panel-dms.maximized .metric-strip .mc:last-child { border-bottom: none; }
    #panel-dms.maximized .metric-strip .mc-lbl { width: 100%; margin-bottom: 4px; font-size: 12px; }
    #panel-dms.maximized .metric-strip .mc-val { font-size: 38px; }
    #panel-dms.maximized .metric-strip .mc-unit { font-size: 15px; align-self: flex-end; margin-bottom: 4px; }
    #panel-dms.maximized .metric-strip .mc-sub { width: auto; border-top: none; border-left: 1px solid var(--border); padding: 0 0 0 16px; margin: 0; align-self: center; }
    #panel-dms.maximized .metric-strip .mc-sub-lbl { font-size: 11px; }
    #panel-dms.maximized .metric-strip .mc-pose { flex-direction: row; gap: 12px; align-items: center; }
    #panel-dms.maximized #dms-pose-canvas { width: 80px; height: 80px; }
    #panel-dms.maximized .mc-pose-zone { font-size: 28px; }
    #panel-dms.maximized .mc-pose-angles { margin-top: 0; gap: 6px; }
    #panel-dms.maximized .mc-pose-angle-val { font-size: 15px; }
    .panel.maximized #sec-apc-log { flex: 1; }

    /* ── Video area ── */
    .video-area {
      position: relative; background: #000;
      display: flex; align-items: center; justify-content: center;
      overflow: hidden;
      flex-shrink: 0;
    }
    .video-area.expanded { flex: 1; min-height: 120px; }
    .video-area.collapsed { display: none; }
    .video-area img, .video-area canvas {
      width: 100%; height: auto; display: block;
    }
    /* Surveillance two-column layout: video left, metrics right */
    #surv-layout {
      display: flex; flex-direction: row;
      flex: 1; overflow: hidden; min-height: 0;
      align-items: flex-start; gap: 20px; padding: 16px;
    }
    #surv-feed {
      flex: 1; min-width: 0; position: relative;
      display: flex; flex-direction: column;
    }
    #surv-feed .video-area { flex: 0 0 auto; width: 100%; }
    /* Scale the stream up to fill available width; cap by viewport height and
       letterbox via object-fit so aspect ratio is never distorted. */
    #surv-vid canvas {
      display: block; width: 100%; height: auto;
      max-height: calc(100vh - 160px);
      object-fit: contain;
    }
    #surv-metrics {
      flex: 0 0 220px;
      display: flex; flex-direction: column; gap: 12px;
    }
    .surv-mc {
      background: rgba(245,158,11,0.06);
      border: 1px solid rgba(245,158,11,0.14);
      border-radius: 8px; padding: 14px 18px;
    }
    .surv-mc-lbl {
      font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
      color: var(--warn); opacity: 0.75; margin-bottom: 6px;
      font-family: var(--mono);
    }
    .surv-mc-val {
      font-size: 26px; font-weight: 700; font-family: var(--mono);
      color: var(--fg); line-height: 1;
    }
    .surv-mc-val.sm { font-size: 18px; }
    .surv-mc-unit { font-size: 11px; color: var(--fg2); margin-left: 4px; }
    .alert-overlay {
      position: absolute; inset: 0;
      display: none; align-items: flex-end; pointer-events: none;
    }
    .alert-overlay.on { display: flex; }
    .alert-bar {
      width: 100%; padding: 14px 20px;
      font-size: 16px; font-weight: 900;
      letter-spacing: 4px; text-transform: uppercase;
      text-align: center; font-family: var(--mono);
      position: relative; overflow: hidden;
    }
    .alert-bar::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0;
      height: 2px;
    }
    .alert-bar.danger {
      background: rgba(160,15,15,0.96);
      color: #fff;
      text-shadow: 0 0 20px rgba(255,100,100,0.8);
      box-shadow: 0 -8px 30px rgba(239,68,68,0.5);
      animation: alert-pulse-danger 1s ease-in-out infinite;
    }
    .alert-bar.danger::before { background: linear-gradient(90deg, transparent, #ff4444, transparent); }
    .alert-bar.caution {
      background: rgba(160,90,0,0.96);
      color: #fff;
      text-shadow: 0 0 16px rgba(255,200,50,0.6);
      box-shadow: 0 -8px 26px rgba(245,158,11,0.45);
      animation: alert-pulse-caution 1.4s ease-in-out infinite;
    }
    .alert-bar.caution::before { background: linear-gradient(90deg, transparent, #f59e0b, transparent); }
    @keyframes alert-pulse-danger  { 0%,100%{opacity:1} 50%{opacity:.8} }
    @keyframes alert-pulse-caution { 0%,100%{opacity:1} 50%{opacity:.84} }
    .vid-offline {
      position: absolute; color: var(--b2);
      font-size: 12px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 3px;
      font-family: var(--mono);
    }

    /* ── Section wrapper (collapsible) ── */
    .section { flex-shrink: 0; }
    .section.hidden .sec-body { display: none; }

    .sec-hdr {
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 14px; height: 27px;
      font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px;
      color: var(--muted); background: var(--bg);
      border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
      cursor: pointer; user-select: none;
      transition: background .15s, color .15s;
    }
    .sec-hdr:hover { background: var(--s1); color: var(--text); }
    .sec-toggle { font-size: 10px; color: var(--muted); }

    /* ── Metric strip ── */
    .metric-strip { display: flex; background: var(--s1); }
    .mc {
      flex: 1; padding: 12px 14px;
      border-right: 1px solid var(--border);
      display: flex; flex-direction: column; gap: 4px;
    }
    .mc:last-child { border-right: none; }
    .mc-lbl { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
    .mc-val { font-family: var(--mono); font-size: 28px; font-weight: 700; color: var(--dms); line-height: 1; }
    .mc-val.green  { color: var(--apc); }
    .mc-val.blue   { color: #60a5fa; }
    .mc-val.orange { color: var(--warn); }
    .mc-val.red    { color: var(--danger); }
    .mc-val.big    { font-size: 42px; }
    .mc-unit { font-size: 11px; color: var(--muted); font-family: var(--mono); }

    /* ── Flag row ── */
    .flag-strip {
      display: flex; gap: 6px; padding: 10px 14px;
      background: var(--s1); border-bottom: 1px solid var(--border);
    }
    .flag {
      flex: 1; text-align: center;
      padding: 5px 8px; border-radius: 20px; font-size: 11px;
      font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
      border: 1px solid var(--border); color: var(--muted); background: var(--bg);
      transition: all .25s;
    }
    .flag.f-drowsy { background: rgba(45,8,8,0.85); border-color: rgba(239,68,68,0.5); color: #ff7070; box-shadow: 0 0 10px rgba(239,68,68,0.12); }
    .flag.f-yawn   { background: rgba(42,21,0,0.85); border-color: rgba(245,158,11,0.5); color: #fbbf24; box-shadow: 0 0 10px rgba(245,158,11,0.12); }
    .flag.f-dist   { background: rgba(14,13,46,0.85); border-color: rgba(129,140,248,0.5); color: #a5b4fc; box-shadow: 0 0 10px rgba(129,140,248,0.12); }
    .flag.f-phone  { background: rgba(40,8,32,0.85); border-color: rgba(232,121,160,0.5); color: #f9a8d4; box-shadow: 0 0 10px rgba(232,121,160,0.12); }

    /* ── Latest Alert Card ── */
    .dms-alert-card {
      position: relative; overflow: hidden;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 6px; padding: 20px 18px; text-align: center;
      background: var(--s1); border-bottom: 1px solid var(--border);
      transition: background .3s, border-color .3s;
      min-height: 110px;
    }
    .dms-alert-card.ac-clear {
      background: linear-gradient(180deg, rgba(7,25,14,0.6) 0%, var(--s1) 100%);
      border-color: rgba(45,204,101,0.12);
    }
    .dms-alert-card.ac-warn {
      background: linear-gradient(180deg, rgba(31,18,0,0.9) 0%, var(--s1) 100%);
      border-color: rgba(245,158,11,0.45);
      animation: ac-pulse-warn 1.6s ease-in-out infinite;
    }
    .dms-alert-card.ac-danger {
      background: linear-gradient(180deg, rgba(31,5,5,0.9) 0%, var(--s1) 100%);
      border-color: rgba(239,68,68,0.45);
      animation: ac-pulse-danger 1s ease-in-out infinite;
    }
    @keyframes ac-pulse-warn   { 0%,100%{box-shadow:inset 0 0 0 0 transparent} 50%{box-shadow:inset 0 0 28px 0 rgba(245,158,11,.14)} }
    @keyframes ac-pulse-danger { 0%,100%{box-shadow:inset 0 0 0 0 transparent} 50%{box-shadow:inset 0 0 36px 0 rgba(239,68,68,.2)} }
    .dms-alert-lbl {
      font-size: 9px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase;
      color: var(--muted);
    }
    .dms-alert-icon { font-size: 28px; font-family: var(--mono); font-weight: 900; line-height: 1; color: var(--apc); letter-spacing: 2px; }
    .dms-alert-card.ac-warn   .dms-alert-icon { color: var(--warn); }
    .dms-alert-card.ac-danger .dms-alert-icon { color: var(--danger); }
    .dms-alert-text {
      font-family: var(--mono); font-size: 28px; font-weight: 900;
      letter-spacing: 2px; text-transform: uppercase; line-height: 1.1;
      color: var(--apc); transition: color .3s;
    }
    .dms-alert-card.ac-warn  .dms-alert-text { color: var(--warn); }
    .dms-alert-card.ac-danger .dms-alert-text { color: var(--danger); }
    .dms-alert-since {
      font-size: 11px; font-family: var(--mono); color: var(--muted);
      letter-spacing: .5px;
    }
    /* maximized — make the card taller & text bigger */
    #panel-dms.maximized .dms-alert-card { min-height: 140px; padding: 24px 20px; }
    #panel-dms.maximized .dms-alert-icon { font-size: 38px; }
    #panel-dms.maximized .dms-alert-text { font-size: 40px; }
    #panel-dms.maximized .dms-alert-since { font-size: 13px; }

    /* ── KV grid ── */
    .kv-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 1px; background: var(--border);
    }
    .kv {
      background: var(--s1); padding: 9px 14px;
      display: flex; justify-content: space-between; align-items: center;
    }
    .kv-k { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .8px; font-weight: 600; }
    .kv-v { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--dms); }
    .kv-v.green { color: var(--apc); }
    .kv-v.red { color: var(--danger); }

    /* ── Controls ── */
    .ctrl-body {
      padding: 10px 14px; background: var(--s1);
      display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
    }
    .ctrl-btn {
      padding: 5px 12px; border-radius: 6px; font-size: 11px;
      font-family: var(--sans); font-weight: 700; cursor: pointer;
      border: 1px solid var(--border); background: var(--s2); color: var(--text);
      transition: background .15s, border-color .15s, color .15s;
      display: flex; align-items: center; gap: 5px;
    }
    .ctrl-btn:hover:not(:disabled) { background: var(--bg); border-color: var(--b2); }
    .ctrl-btn:disabled { opacity: .35; cursor: not-allowed; }
    .ctrl-btn.danger  { border-color: rgba(74,16,16,0.8); color: var(--danger); }
    .ctrl-btn.danger:hover:not(:disabled)  { background: rgba(239,68,68,0.07); border-color: rgba(239,68,68,0.4); }
    .ctrl-btn.active  { background: rgba(13,32,64,0.8); border-color: rgba(74,150,255,0.45); color: var(--dms); }
    .ctrl-btn.active.green { background: rgba(7,32,14,0.8); border-color: rgba(45,204,101,0.45); color: var(--apc); }
    .ctrl-sep { width: 1px; height: 22px; background: var(--border); flex-shrink: 0; }
    .ctrl-lbl { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
    .ctrl-msg {
      font-size: 11px; padding: 4px 10px; border-radius: 4px;
      background: rgba(7,32,14,0.8); color: var(--apc); border: 1px solid rgba(45,204,101,0.2);
    }
    .ctrl-msg.err { background: rgba(32,13,13,0.8); color: var(--danger); border-color: rgba(239,68,68,0.2); }

    /* ── Log ── */
    .log-scroll {
      flex: 1; overflow-y: auto; padding: 8px 14px;
      font-size: 11.5px; font-family: var(--mono); line-height: 1.9;
      min-height: 0;
    }
    .log-scroll::-webkit-scrollbar { width: 4px; }
    .log-scroll::-webkit-scrollbar-track { background: transparent; }
    .log-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
    .log-scroll::-webkit-scrollbar-thumb:hover { background: var(--b2); }

    .ll          { color: #2a3f58; }
    .ll.info     { color: #3a5270; }
    .ll.npu      { color: #f97316; }
    .ll.zone     { color: #60a5fa; }
    .ll.count-in { color: var(--apc); font-weight: 700; }
    .ll.count-out{ color: #60a5fa; font-weight: 700; }
    .ll.warn     { color: var(--danger); }
    .ll-ts       { color: #1e2e40; margin-right: 8px; }

    /* Log section: fills remaining space when expanded, collapses to header only */
    #sec-apc-log { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
    #sec-apc-log.hidden { flex: 0 0 auto; min-height: unset; }
    #sec-apc-log.hidden .sec-body { display: none; }  /* beats #sec-apc-log .sec-body specificity */
    #sec-apc-log .sec-body { flex: 1; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }

    /* ── Detection log entries ── */
    .det-entry {
      display: flex; align-items: baseline; gap: 10px;
      padding: 4px 14px; border-bottom: 1px solid rgba(26,37,53,0.7);
      animation: det-fadein 0.18s ease;
    }
    @keyframes det-fadein { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } }
    .det-ts    { font-family: var(--mono); font-size: 8px; color: var(--muted); flex-shrink: 0; min-width: 48px; }
    .det-class { font-family: var(--mono); font-size: 22px; font-weight: 700; color: var(--warn); flex: 1; line-height: 1.1; }
    .det-conf  { font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--apc); flex-shrink: 0; align-self: flex-end; padding-bottom: 2px; }
    .det-class.det-alert   { color: var(--danger); }
    .det-class.det-safe    { color: var(--apc); }
    /* .det-class.det-warning inherits var(--warn) from .det-class */
    .det-badge {
      font-family: var(--mono); font-size: 8px; font-weight: 800;
      letter-spacing: 1px; text-transform: uppercase;
      padding: 1px 5px; border-radius: 3px; flex-shrink: 0; align-self: center;
    }
    .det-badge.det-alert   { background: rgba(239,68,68,0.15);  color: var(--danger); border: 1px solid rgba(239,68,68,0.35); }
    .det-badge.det-warning { background: rgba(245,158,11,0.15); color: var(--warn);   border: 1px solid rgba(245,158,11,0.35); }
    .det-badge.det-safe    { background: rgba(45,204,101,0.10); color: var(--apc);    border: 1px solid rgba(45,204,101,0.25); }
    .det-snap-btn { background: none; border: none; cursor: pointer; font-size: 12px; padding: 0 0 0 4px; opacity: 0.65; flex-shrink: 0; line-height: 1; color: var(--apc); }
    .det-snap-btn:hover { opacity: 1; }
    .det-entry.det-has-snap { background: rgba(45,204,101,0.045); }
    .det-entry.det-has-snap .det-snap-btn { opacity: 1; }
    .det-filter-btn { background: none; border: 1px solid transparent; border-radius: 3px; cursor: pointer; font-size: 11px; padding: 0 4px; margin-left: auto; opacity: 0.5; line-height: 1.6; }
    .det-filter-btn.active { opacity: 1; border-color: var(--apc); background: rgba(45,204,101,0.12); }
    .det-entry.snap-hidden { display: none; }

    .snap-dl { font-size: 10px; color: var(--apc); text-decoration: none; }
    .snap-dl:hover { text-decoration: underline; }
    /* ── Snapshot modal ── */
    .snap-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.82); z-index: 1000; display: none; align-items: center; justify-content: center; padding: 20px; }
    .snap-modal-overlay.open { display: flex; }
    .snap-modal { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; max-width: 900px; width: 100%; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; }
    .snap-modal-hdr { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 700; color: var(--apc); }
    .snap-modal-close { background: none; border: none; color: var(--muted); font-size: 18px; cursor: pointer; padding: 0 4px; line-height: 1; }
    .snap-modal-close:hover { color: var(--text); }
    .snap-modal-canvas-wrap { flex: 1; overflow: hidden; position: relative; background: #050d14; }
    #snap-modal-canvas { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; }
    .snap-modal-footer { padding: 8px 14px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 12px; font-size: 10px; color: var(--muted); }
    .snap-modal-dl { font-size: 11px; color: var(--apc); text-decoration: none; }
    .snap-modal-dl:hover { text-decoration: underline; }
    [data-theme="light"] .snap-modal { background: #fff; }
    [data-theme="light"] .snap-modal-canvas-wrap { background: #e8edf2; }

    /* ═══════════════════════════════════════════════════════════
       Navigation screens — home / vehicles / stream
    ═══════════════════════════════════════════════════════════ */
    #home-screen, #vehicles-screen, #stream-screen {
      display: flex; flex-direction: column; flex: 1; min-height: 0;
    }
    #home-screen     { overflow-y: auto; }
    #vehicles-screen { overflow-y: auto; }
    #home-screen.hidden, #vehicles-screen.hidden, #stream-screen.hidden, #home-empty.hidden { display: none; }

    /* ── Fleet summary bar ── */
    .fleet-bar {
      display: flex; align-items: center; justify-content: space-between;
      padding: 28px 36px 6px; flex-shrink: 0;
    }
    .fleet-title { font-size: 20px; font-weight: 800; letter-spacing: .3px; color: var(--text); }
    .fleet-sub   { font-size: 12px; color: var(--muted); margin-top: 3px; }
    .fleet-stats { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; }
    .stat-online { color: var(--apc); font-weight: 700; }
    .stat-sep    { color: var(--border); }
    .stat-total  { color: var(--muted); }

    /* ── Category grid (landing tiles) ── */
    .cat-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(230px, 290px));
      gap: 18px; padding: 22px 36px 36px;
      justify-content: center; align-content: start;
    }
    .cat-tile {
      background: var(--s1); border: 1px solid var(--border);
      border-radius: 14px; overflow: hidden; cursor: pointer;
      display: flex; flex-direction: column;
      min-height: 190px;
      transition: transform .2s ease, border-color .2s, box-shadow .25s;
    }
    .cat-tile:hover { transform: translateY(-5px); box-shadow: 0 18px 52px rgba(0,0,0,.6); }
    .cat-tile[data-type="dms"]:hover          { border-color: rgba(74,150,255,.35);  box-shadow: 0 18px 52px rgba(0,0,0,.55), 0 0 0 1px rgba(74,150,255,.15); }
    .cat-tile[data-type="ods"]:hover          { border-color: rgba(45,204,101,.35);  box-shadow: 0 18px 52px rgba(0,0,0,.55), 0 0 0 1px rgba(45,204,101,.15); }
    .cat-tile[data-type="surveillance"]:hover { border-color: rgba(245,158,11,.35);  box-shadow: 0 18px 52px rgba(0,0,0,.55), 0 0 0 1px rgba(245,158,11,.15); }
    .cat-tile[data-type="ibvas"]:hover        { border-color: rgba(167,139,250,.35); box-shadow: 0 18px 52px rgba(0,0,0,.55), 0 0 0 1px rgba(167,139,250,.15); }
    .cat-tile[data-type="dms"]          { background: linear-gradient(155deg, rgba(74,150,255,.07) 0%, var(--s1) 55%); }
    .cat-tile[data-type="ods"]          { background: linear-gradient(155deg, rgba(45,204,101,.07) 0%, var(--s1) 55%); }
    .cat-tile[data-type="surveillance"] { background: linear-gradient(155deg, rgba(245,158,11,.07) 0%, var(--s1) 55%); }
    .cat-tile[data-type="ibvas"]        { background: linear-gradient(155deg, rgba(167,139,250,.07) 0%, var(--s1) 55%); }
    .cat-tile-bar { height: 3px; flex-shrink: 0; border-radius: 14px 14px 0 0; }
    .cat-tile-body { padding: 20px 22px 8px; flex: 1; display: flex; flex-direction: column; }
    .cat-tile-icon { font-size: 34px; display: block; margin-bottom: 12px; }
    .cat-tile-type-lbl {
      font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 2.5px;
      margin-bottom: 3px;
    }
    .cat-tile-name { font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.25; }
    .cat-tile-desc { font-size: 11px; color: var(--muted); margin-top: auto; padding-top: 8px; }
    .cat-tile-footer {
      padding: 11px 22px 13px; border-top: 1px solid var(--border);
      background: rgba(0,0,0,.18);
      display: flex; align-items: center; gap: 10px; flex-shrink: 0;
    }
    .cat-count-num { font-family: var(--mono); font-size: 24px; font-weight: 700; line-height: 1; }
    .cat-count-sub { font-size: 10px; color: var(--muted); margin-top: 2px; }
    .cat-count-sub strong { font-weight: 700; color: var(--text); display: block; }
    .cat-arrow { margin-left: auto; font-size: 22px; color: var(--b2); transition: color .15s, transform .18s; }
    .cat-tile:hover .cat-arrow { color: var(--text); transform: translateX(4px); }
    [data-theme="light"] .cat-tile:hover { box-shadow: 0 12px 36px rgba(0,0,0,.12); }
    [data-theme="light"] .cat-tile-footer { background: var(--s2); }
    [data-theme="light"] .cat-tile[data-type="dms"]          { background: linear-gradient(155deg, rgba(74,150,255,.05) 0%, var(--s1) 55%); }
    [data-theme="light"] .cat-tile[data-type="ods"]          { background: linear-gradient(155deg, rgba(45,204,101,.05) 0%, var(--s1) 55%); }
    [data-theme="light"] .cat-tile[data-type="surveillance"] { background: linear-gradient(155deg, rgba(245,158,11,.05) 0%, var(--s1) 55%); }
    [data-theme="light"] .cat-tile[data-type="ibvas"]        { background: linear-gradient(155deg, rgba(167,139,250,.05) 0%, var(--s1) 55%); }

    /* ── Vehicles screen nav bar ── */
    .vehicles-nav {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 16px 8px 14px; flex-shrink: 0;
      border-bottom: 1px solid var(--border); background: var(--s1);
    }
    .vehicles-type-badge {
      font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px;
      padding: 3px 9px; border-radius: 999px; border: 1px solid;
    }
    .vehicles-title { font-size: 13px; font-weight: 700; color: var(--text); }
    .vehicles-count { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--muted); }

    /* ── Vehicle grid ── */
    .vehicle-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 14px; padding: 18px 22px 28px; align-content: start;
    }
    .vehicle-card {
      background: var(--s1); border: 1px solid var(--border);
      border-radius: 10px; overflow: hidden; cursor: pointer;
      transition: transform .15s, border-color .2s, box-shadow .2s;
    }
    .vehicle-card:hover   { transform: translateY(-2px); border-color: var(--b2); box-shadow: 0 6px 24px rgba(0,0,0,.38); }
    .vehicle-card.offline { opacity: .55; cursor: default; }
    .vehicle-card-bar { height: 3px; }
    .vehicle-card-body { padding: 14px 16px 10px; }
    .vehicle-card-vid {
      font-size: 14px; font-weight: 800; color: var(--text); font-family: var(--mono);
      margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      letter-spacing: .4px; text-transform: uppercase;
    }
    .vehicle-card-id  { font-size: 11px; color: var(--muted); margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .vehicle-card-stream-tag {
      display: inline-block; background: var(--s2); border: 1px solid var(--border);
      border-radius: 4px; padding: 2px 7px; font-size: 10px; margin: 2px 3px 2px 0;
      font-family: var(--mono); color: var(--muted);
    }
    .vehicle-card-footer {
      display: flex; align-items: center; justify-content: space-between;
      padding: 9px 16px 11px; border-top: 1px solid var(--border);
    }
    .vehicle-card-badge {
      font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
      padding: 3px 8px; border-radius: 999px; border: 1px solid transparent;
    }
    .vehicle-card-badge.online  { color: var(--apc);   border-color: rgba(45,204,101,.3);  background: rgba(45,204,101,.07); }
    .vehicle-card-badge.offline { color: var(--muted); border-color: var(--border); }
    .vehicle-card-view {
      padding: 5px 12px; border-radius: 6px; font-size: 11px; font-weight: 700;
      letter-spacing: .5px; border: 1px solid var(--border);
      color: var(--muted); background: none; cursor: pointer;
      transition: background .15s, border-color .15s, color .15s;
    }
    .vehicle-card-view.live { border-color: var(--dms); color: var(--dms); background: rgba(74,150,255,.08); }
    .vehicle-card-view.live:hover { background: rgba(74,150,255,.18); }
    .vehicle-card-view:disabled { cursor: default; }
    [data-theme="light"] .vehicle-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.10); }

    /* ── Home empty state ── */
    .home-empty {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      flex: 1; gap: 8px; color: var(--muted); padding: 60px 0; text-align: center;
    }
    .home-empty-icon { font-size: 48px; opacity: .3; margin-bottom: 8px; display: block; }
    .home-empty-sub  { font-size: 12px; }

    /* ── Stream nav (back button + breadcrumb) ── */
    .stream-nav {
      display: flex; align-items: center; gap: 10px;
      padding: 6px 16px; border-bottom: 1px solid var(--border);
      background: var(--s1); flex-shrink: 0;
    }
    .nav-back {
      background: none; border: 1px solid var(--border); border-radius: 5px;
      color: var(--muted); font-size: 12px; font-weight: 700; padding: 3px 10px;
      cursor: pointer; transition: color .15s, border-color .15s; letter-spacing: .5px;
    }
    .nav-back:hover    { color: var(--text); border-color: var(--b2); }
    .nav-breadcrumb    { font-size: 12px; color: var(--muted); font-family: var(--mono); }
    .bc-sep            { color: var(--b2); }
    .bc-current        { color: var(--text); font-weight: 600; }

    /* ── Connection banner (server link lost / restored) ── */
    #conn-banner {
      display: flex; align-items: center; justify-content: center; gap: 10px;
      padding: 8px 16px; flex-shrink: 0;
      font-family: var(--mono); font-size: 12px; font-weight: 700;
      letter-spacing: 1.5px; text-transform: uppercase;
      background: rgba(239,68,68,.12); color: #ef4444;
      border-bottom: 1px solid rgba(239,68,68,.35);
    }
    #conn-banner.hidden { display: none; }
    #conn-banner.restored {
      background: rgba(45,204,101,.12); color: var(--apc);
      border-bottom-color: rgba(45,204,101,.35);
    }
    #conn-banner-dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: currentColor;
      animation: conn-pulse 1s ease-in-out infinite;
    }
    #conn-banner.restored #conn-banner-dot { animation: none; }
    @keyframes conn-pulse {
      0%, 100% { opacity: 1; }
      50%      { opacity: .25; }
    }

    /* ── Last-seen on offline vehicle cards ── */
    .vehicle-card-badge .last-seen {
      font-weight: 400; opacity: .8; text-transform: none; letter-spacing: 0;
    }

    /* ════════════════════════════════════════════════════════════════════
       Styles migrated from inline HTML attributes
       ════════════════════════════════════════════════════════════════════ */
    #theme-btn {
      margin-left: 10px; background: none; border: 1px solid var(--b2);
      border-radius: 6px; padding: 4px 8px; cursor: pointer;
      font-size: 18px; line-height: 1; color: var(--muted);
      transition: border-color .15s, background .15s;
    }
    #panel-dms  { flex: 1; }
    #panel-surv { display: none; flex: 1; }
    #panel-apc  { display: none; flex: 1; }
    #panel-surv .pband {
      background: linear-gradient(90deg, #1a0d00, #221505);
      border-bottom: 1px solid rgba(245,158,11,.18);
      color: var(--warn);
      box-shadow: 0 1px 0 rgba(245,158,11,.08);
    }
    [data-theme="light"] #panel-surv .pband {
      background: linear-gradient(90deg, #fef3c7, #fffbeb);
      border-color: #fde68a; color: var(--warn); box-shadow: none;
    }
    #d-kss-info { font-size: 13px; display: block; margin-top: 2px; }
    #sec-apc-status .kv-grid { margin-top: 6px; }

    /* ── Latency sparkline (surveillance) ── */
    #surv-spark { display: block; width: 100%; height: 64px; }

    /* ── Event log (home screen) ── */
    .event-log-wrap {
      margin: 8px 26px 26px;
      background: var(--s1); border: 1px solid var(--border);
      border-radius: 12px; overflow: hidden;
    }
    .event-log-hdr {
      display: flex; align-items: center; justify-content: space-between;
      padding: 10px 16px;
      font-size: 11px; font-weight: 700; letter-spacing: 2px;
      text-transform: uppercase; color: var(--muted);
      font-family: var(--mono);
      border-bottom: 1px solid var(--border);
    }
    .event-log-clear {
      background: none; border: 1px solid var(--border); border-radius: 5px;
      color: var(--muted); font-size: 10px; font-family: var(--mono);
      padding: 2px 8px; cursor: pointer; letter-spacing: 1px;
      transition: color .15s, border-color .15s;
    }
    .event-log-clear:hover { color: var(--text); border-color: var(--b2); }
    .event-log {
      max-height: 220px; overflow-y: auto;
      font-family: var(--mono); font-size: 12px;
    }
    .event-log-empty { padding: 18px 16px; color: var(--b2); font-size: 11px; }
    .event-row {
      display: flex; gap: 14px; align-items: baseline;
      padding: 6px 16px;
      border-bottom: 1px solid rgba(255,255,255,.03);
    }
    .event-row:last-child { border-bottom: none; }
    .event-time { color: var(--b2); flex-shrink: 0; font-size: 11px; }
    .event-src  { color: var(--muted); flex-shrink: 0; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .event-text { color: var(--text); }
    .event-row.sev-ok   .event-text { color: var(--apc); }
    .event-row.sev-err  .event-text { color: #ef4444; }
    .event-row.sev-warn .event-text { color: var(--warn); }
    [data-theme="light"] .event-row { border-bottom-color: rgba(15,23,42,.05); }

    /* ── Rich offline / reconnecting overlay (all stream panels) ── */
    .vid-offline {
      display: flex; flex-direction: column; align-items: center;
      gap: 8px; text-align: center;
    }
    .vo-icon  { font-size: 42px; opacity: .25; line-height: 1; }
    .vo-title { font-size: 13px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; }
    .vo-meta  {
      font-size: 11px; font-weight: 400; letter-spacing: .5px;
      text-transform: none; color: var(--muted); opacity: .85;
    }

    /* ════════════════════════════════════════════════════════════════════
       Theme refresh — subtle depth gradients
       ════════════════════════════════════════════════════════════════════ */
    /* ── Decorated background: gradient base + colored glows on <html>,
          fine grid texture on body::before (z-index -1 keeps it behind
          all content but above the html gradient). ── */
    html {
      min-height: 100%;
      background:
        radial-gradient(1400px 900px at 80% -20%, rgba(76,110,245,.16), transparent 55%),
        radial-gradient(1200px 800px at -15% 55%, rgba(124,58,237,.10), transparent 55%),
        radial-gradient(1000px 700px at 110% 100%, rgba(13,148,136,.10), transparent 55%),
        linear-gradient(160deg, #0c1122 0%, #07090e 45%, #0b0f17 100%);
      background-attachment: fixed;
    }
    html[data-theme="light"] {
      background:
        radial-gradient(1400px 900px at 80% -20%, rgba(59,130,246,.12), transparent 55%),
        radial-gradient(1200px 800px at -15% 55%, rgba(147,51,234,.06), transparent 55%),
        radial-gradient(1000px 700px at 110% 100%, rgba(217,119,6,.08), transparent 55%),
        linear-gradient(160deg, #eef3fb 0%, #f4f6f9 45%, #f6f2ea 100%);
      background-attachment: fixed;
    }
    body { background: transparent; }
    body::before {
      content: ""; position: fixed; inset: 0;
      pointer-events: none; z-index: -1;
      background-image:
        linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
      background-size: 44px 44px;
    }
    [data-theme="light"] body::before {
      background-image:
        linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
    }
    /* Glowing gradient divider under the header */
    header { position: relative; }
    header::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
      background: linear-gradient(90deg,
        transparent, rgba(110,168,255,.55) 25%, rgba(155,123,255,.55) 55%,
        rgba(245,158,11,.35) 85%, transparent);
    }
    .hdr-logo {
      background: linear-gradient(92deg, var(--text) 60%, #8fb4e8 115%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    [data-theme="light"] .hdr-logo {
      background: linear-gradient(92deg, #1a2333 35%, #2563eb 90%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .fleet-title {
      background: linear-gradient(90deg, var(--text) 70%, #9cb8de 130%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    /* Soft top sheen on cards so surfaces feel layered, not flat */
    .vehicle-card {
      background: linear-gradient(168deg, rgba(255,255,255,.035) 0%, transparent 45%), var(--s1);
    }
    .event-log-wrap, .surv-mc {
      background-image: linear-gradient(168deg, rgba(255,255,255,.02) 0%, transparent 50%);
    }
    [data-theme="light"] .vehicle-card {
      background: linear-gradient(168deg, #ffffff 0%, #f8fafc 100%);
    }
    .vehicle-card:hover {
      box-shadow: 0 8px 28px rgba(0,0,0,.4), 0 0 0 1px rgba(110,168,255,.12);
    }
    [data-theme="light"] .vehicle-card:hover {
      box-shadow: 0 8px 24px rgba(15,23,42,.1), 0 0 0 1px rgba(37,99,235,.15);
    }