/* ============================================================
   Meridian Freight Systems — Ask Atlas
   Shared design system (dark neo-industrial "aero glass").
   All data in this demo is synthetic. No real customers, drivers,
   carriers or PII appear anywhere.
   ============================================================ */
:root{
  --bg-0:#0b0c10;
  --bg-1:#101218;
  --bg-2:#161922;
  --bg-3:#1d2230;
  --ink:#ece8db;
  --muted:#878d9a;
  --muted-2:#5c616d;
  --border:#262b34;
  --amber:#f4c84a;
  --amber-soft:#f3d479;
  --amber-deep:#c8962a;
  --online:#74e0a6;
  --green:#74e0a6;
  --yellow:#f3d479;
  --warn:#f0913f;
  --red:#f85149;
  --purple:#bc8cff;
  --blue:#6db3f2;
  --glass:rgba(26,30,39,.52);
  --glass-2:rgba(34,39,50,.46);
  --hair:rgba(244,200,74,.14);
  --hair-2:rgba(255,255,255,.06);
  --shadow:0 18px 40px -22px rgba(0,0,0,.8);
  --r:14px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:"Inter",system-ui,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(244,200,74,.10), transparent 60%),
    radial-gradient(900px 700px at 6% 8%, rgba(60,72,96,.22), transparent 55%),
    linear-gradient(180deg,#0c0e13 0%, #090a0e 100%);
  background-attachment:fixed;
  min-height:100%;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 85%);
}
a{color:inherit}
.wrap{position:relative;z-index:1;max-width:1320px;margin:0 auto;padding:26px 26px 60px}
.wrap--wide{max-width:1560px}

/* ── Top telemetry bar ─────────────────────────────────────── */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  flex-wrap:wrap;padding:6px 4px 22px;
}
.brand{display:flex;align-items:center;gap:14px;min-width:0;text-decoration:none}
.brand__mark{width:48px;height:46px;flex:none;display:grid;place-items:center;
  filter:drop-shadow(0 4px 11px rgba(244,200,74,.30));}
.brand__name{font-family:"Chakra Petch",sans-serif;font-weight:700;
  font-size:25px;letter-spacing:.14em;line-height:1;margin:0;text-transform:uppercase;
  background:linear-gradient(180deg,#fff 10%, var(--amber-soft) 130%);
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.brand__sub{font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--muted);margin-top:5px;font-weight:500;}
.brand__sub b{color:var(--amber);font-weight:600}

.telemetry{display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  font-style:italic;font-size:13px;color:var(--muted);}
.telemetry .sep{width:1px;height:20px;background:var(--hair-2)}
.metric{display:flex;align-items:baseline;gap:7px;white-space:nowrap}
.metric .num{font-family:"JetBrains Mono",monospace;font-style:normal;
  font-size:15px;font-weight:500;color:var(--ink);letter-spacing:.01em;}
.metric .lbl{font-size:11.5px;letter-spacing:.04em}
.status{display:flex;align-items:center;gap:8px;font-style:italic}
.status .dot{width:8px;height:8px;border-radius:50%;background:var(--online);
  box-shadow:0 0 0 0 rgba(116,224,166,.55);animation:pulse 2.6s infinite}
.status .nm{font-style:normal;font-family:"Chakra Petch",sans-serif;
  font-size:12px;letter-spacing:.06em;color:var(--ink)}
.status .on{font-size:11px;color:var(--online)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(116,224,166,.5)}70%{box-shadow:0 0 0 7px rgba(116,224,166,0)}100%{box-shadow:0 0 0 0 rgba(116,224,166,0)}}

.seam{height:2px;margin:0 4px 22px;border-radius:2px;
  background:repeating-linear-gradient(115deg,var(--amber) 0 14px,#1a1c22 14px 28px);
  opacity:.5;}

/* ── Sub-page header (back arrow + crumb + drawer) ─────────── */
.subhead{display:flex;align-items:center;gap:14px;padding:4px 4px 18px;flex-wrap:wrap}
.subhead .back{display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  color:var(--muted);font-size:12.5px;font-family:"Chakra Petch",sans-serif;letter-spacing:.04em;
  padding:7px 11px;border:1px solid var(--hair-2);border-radius:9px;transition:.15s}
.subhead .back:hover{color:#fff;border-color:rgba(244,200,74,.5)}
.subhead__title{font-family:"Chakra Petch",sans-serif;font-weight:600;font-size:20px;
  letter-spacing:.02em;margin:0;display:flex;align-items:center;gap:11px}
.subhead__title small{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-2);font-weight:600}
.subhead .spacer{flex:1}

/* ── Invisible tiling grid ─────────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(184px,auto);gap:18px;}
.t-oe{grid-column:span 3}.t-csr{grid-column:span 3}
.t-fleet{grid-column:span 6;grid-row:span 2}
.t-data{grid-column:span 3}.t-rep{grid-column:span 3}.t-drivers{grid-column:span 3}
.t-dispatch{grid-column:span 3}.t-stream{grid-column:span 6}.t-pipeline{grid-column:span 3}

.tile{position:relative;border-radius:var(--r);padding:20px;background:var(--glass);
  -webkit-backdrop-filter:blur(16px) saturate(118%);backdrop-filter:blur(16px) saturate(118%);
  border:1px solid var(--hair);box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.05);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;}
.tile::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 38%);}
.tile--link{cursor:pointer;text-decoration:none;color:inherit}
.tile--link:hover{transform:translateY(-2px);border-color:rgba(244,200,74,.34);
  box-shadow:0 22px 46px -22px rgba(0,0,0,.85), 0 0 0 1px rgba(244,200,74,.18), inset 0 1px 0 rgba(255,255,255,.06);}
.tile__head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.tile__eyebrow{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted-2);font-weight:600}
.tile__title{font-family:"Chakra Petch",sans-serif;font-weight:600;font-size:19px;letter-spacing:.02em;margin:3px 0 0;line-height:1.15}
.tile p{color:var(--muted);font-size:12.5px;line-height:1.5;margin:12px 0 0}
.tile__stat{margin-top:auto;display:flex;gap:18px;padding-top:14px;flex-wrap:wrap}
.stat{display:flex;flex-direction:column;gap:2px}
.stat .v{font-family:"JetBrains Mono",monospace;font-size:18px;color:var(--ink);font-weight:500;line-height:1}
.stat .k{font-size:10.5px;color:var(--muted);letter-spacing:.04em}

/* ── Chips / badges ────────────────────────────────────────── */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--c,var(--online));
  border:1px solid color-mix(in srgb,var(--c,var(--online)) 30%,transparent);border-radius:20px;padding:3px 9px;
  font-weight:600;flex:none;background:color-mix(in srgb,var(--c,var(--online)) 7%,transparent)}
.chip .d{width:6px;height:6px;border-radius:50%;background:var(--c,var(--online))}
.badge{display:inline-flex;align-items:center;gap:5px;font-family:"JetBrains Mono",monospace;
  font-size:10.5px;letter-spacing:.04em;padding:2px 7px;border-radius:6px;
  color:var(--c,var(--muted));background:color-mix(in srgb,var(--c,var(--muted)) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--c,var(--muted)) 26%,transparent);white-space:nowrap}
.badge--strike{text-decoration:line-through;opacity:.5;--c:var(--muted-2)}

/* ── Buttons ───────────────────────────────────────────────── */
.btns{display:flex;gap:9px;margin-top:15px;flex-wrap:wrap}
.btn{font-family:"Chakra Petch",sans-serif;font-size:12.5px;font-weight:500;letter-spacing:.04em;
  color:var(--ink);cursor:pointer;padding:9px 13px;border-radius:9px;flex:1 1 auto;min-width:max-content;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01));
  border:1px solid var(--hair-2);text-align:center;transition:.15s ease;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;}
.btn:hover{border-color:rgba(244,200,74,.5);color:#fff;background:linear-gradient(180deg,rgba(244,200,74,.14),rgba(244,200,74,.03))}
.btn:active{transform:translateY(1px)}
.btn:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,button:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.btn--primary{flex:none;color:#1a1405;font-weight:600;
  background:linear-gradient(180deg,var(--amber-soft),var(--amber-deep));
  border-color:rgba(244,200,74,.6);box-shadow:0 6px 16px -8px rgba(244,200,74,.7)}
.btn--primary:hover{color:#120e02;background:linear-gradient(180deg,#ffe08a,var(--amber))}
.btn--sm{padding:6px 10px;font-size:11.5px;flex:none}
.btn--ghost{flex:none}
.btn--danger{flex:none;color:var(--red);border-color:color-mix(in srgb,var(--red) 30%,transparent)}
.btn--danger:hover{color:#fff;background:color-mix(in srgb,var(--red) 18%,transparent);border-color:var(--red)}
.btn .ic{width:13px;height:13px;flex:none}

/* ── Panels / generic surfaces ─────────────────────────────── */
.panel{position:relative;border-radius:var(--r);padding:18px 20px;background:var(--glass);
  -webkit-backdrop-filter:blur(16px) saturate(118%);backdrop-filter:blur(16px) saturate(118%);
  border:1px solid var(--hair);box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.05);overflow:hidden}
.panel + .panel{margin-top:18px}
.panel__head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.panel__title{font-family:"Chakra Petch",sans-serif;font-weight:600;font-size:15px;letter-spacing:.03em;margin:0}
.panel__sub{font-size:11.5px;color:var(--muted);margin:4px 0 0;line-height:1.5}

/* ── KPI hero strip ────────────────────────────────────────── */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:18px}
.kpi{border-radius:12px;padding:15px 16px;background:var(--glass);border:1px solid var(--hair);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.05)}
.kpi .v{font-family:"JetBrains Mono",monospace;font-size:26px;font-weight:500;color:var(--c,var(--ink));line-height:1}
.kpi .k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:8px}

/* ── Toolbar / controls ────────────────────────────────────── */
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.field{display:flex;flex-direction:column;gap:4px}
.field > label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);font-weight:600}
input[type=text],input[type=search],input[type=password],input[type=date],input[type=time],select,textarea{
  font-family:"Inter",system-ui,sans-serif;font-size:13px;color:var(--ink);background:var(--bg-2);
  border:1px solid var(--border);border-radius:8px;padding:8px 10px;outline:none;transition:.15s}
select{font-family:"Chakra Petch",sans-serif;font-size:12px;letter-spacing:.03em;cursor:pointer}
input:hover,select:hover{border-color:rgba(244,200,74,.4)}
textarea{resize:vertical;min-height:70px;line-height:1.5}
.check{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);cursor:pointer}
.check input{accent-color:var(--amber)}

/* ── Tables ────────────────────────────────────────────────── */
.tbl-wrap{overflow:auto;border-radius:10px;border:1px solid var(--hair-2)}
table.data{width:100%;border-collapse:collapse;font-size:12.5px}
table.data th{position:sticky;top:0;background:var(--bg-2);z-index:1;text-align:left;
  font-family:"Chakra Petch",sans-serif;font-weight:600;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--border);white-space:nowrap}
table.data td{padding:10px 12px;border-bottom:1px solid var(--hair-2);vertical-align:middle}
table.data tr:last-child td{border-bottom:0}
table.data tbody tr{transition:background .12s}
table.data tbody tr:hover{background:rgba(244,200,74,.04)}
table.data .num{font-family:"JetBrains Mono",monospace;text-align:right}
table.data .mono{font-family:"JetBrains Mono",monospace}
table.data a{color:var(--amber-soft);text-decoration:none}
table.data a:hover{text-decoration:underline}
tr.inactive{opacity:.5}
tr.row-over{box-shadow:inset 3px 0 0 var(--red)}
tr.row-warn{box-shadow:inset 3px 0 0 var(--yellow)}
.muted{color:var(--muted)}
.dash{color:var(--muted-2)}

/* ── Tabs ──────────────────────────────────────────────────── */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.tab{font-family:"Chakra Petch",sans-serif;font-size:12.5px;letter-spacing:.04em;color:var(--muted);
  padding:8px 14px;border-radius:9px;border:1px solid var(--hair-2);background:transparent;cursor:pointer;transition:.15s}
.tab:hover{color:var(--ink);border-color:rgba(244,200,74,.4)}
.tab.active{color:#1a1405;background:linear-gradient(180deg,var(--amber-soft),var(--amber-deep));border-color:rgba(244,200,74,.6)}
.tabpane{display:none}
.tabpane.active{display:block}

/* ── Mode banner (Relay) ───────────────────────────────────── */
.modebar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border-radius:12px;padding:13px 18px;margin-bottom:18px;font-family:"Chakra Petch",sans-serif;letter-spacing:.04em}
.modebar--dry{background:color-mix(in srgb,var(--amber) 12%,transparent);border:1px solid color-mix(in srgb,var(--amber) 40%,transparent);color:var(--amber-soft)}
.modebar--live{background:color-mix(in srgb,var(--red) 14%,transparent);border:1px solid color-mix(in srgb,var(--red) 50%,transparent);color:#ffb4ad;animation:livepulse 2.2s infinite}
@keyframes livepulse{0%,100%{box-shadow:0 0 0 0 rgba(248,81,73,0)}50%{box-shadow:0 0 0 4px rgba(248,81,73,.18)}}
.modebar .meta{font-family:"Inter";font-size:11px;letter-spacing:0;color:var(--muted)}

/* ── Message cards (Relay feed) ────────────────────────────── */
.feed{display:flex;flex-direction:column;gap:12px}
.mcard{border-radius:12px;border:1px solid var(--hair-2);background:var(--glass);overflow:hidden}
.mcard__head{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:13px 16px;cursor:pointer}
.mcard__icon{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:14px;flex:none;
  background:color-mix(in srgb,var(--c,var(--muted)) 14%,transparent);color:var(--c,var(--muted));
  border:1px solid color-mix(in srgb,var(--c,var(--muted)) 34%,transparent)}
.mcard__body{min-width:0}
.mcard__text{font-size:13.5px;color:var(--ink);line-height:1.4}
.mcard__meta{font-size:11px;color:var(--muted);margin-top:3px;font-family:"JetBrains Mono",monospace}
.mcard__chips{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.confbar{width:74px;height:6px;border-radius:3px;background:var(--bg-3);overflow:hidden;position:relative}
.confbar > i{position:absolute;left:0;top:0;bottom:0;background:var(--c,var(--green));border-radius:3px}
.conf-label{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--c,var(--green))}
.mcard__detail{display:none;padding:0 16px 16px;border-top:1px solid var(--hair-2);margin-top:0;font-size:12.5px}
.mcard.open .mcard__detail{display:block}
.detrow{padding:11px 0;border-bottom:1px solid var(--hair-2)}
.detrow:last-child{border-bottom:0}
.detrow .lbl{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);font-weight:600;margin-bottom:5px}
.detrow .resp{color:var(--green);font-style:italic}
.detrow pre{font-family:"JetBrains Mono",monospace;font-size:11.5px;color:var(--muted);background:var(--bg-1);
  border:1px solid var(--hair-2);border-radius:8px;padding:10px;overflow:auto;margin:0;white-space:pre-wrap}
.statusbar{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:8px;font-size:11.5px;
  font-family:"JetBrains Mono",monospace;background:var(--bg-1);border:1px solid var(--hair-2);flex-wrap:wrap}

/* ── Email mockup (customer comms) ─────────────────────────── */
.email{background:#f6f3ea;color:#23262d;border-radius:10px;padding:16px 18px;margin-top:10px;
  font-family:"Inter",system-ui,sans-serif;font-size:13px;line-height:1.55}
.email .eh{font-size:11.5px;color:#5c616d;border-bottom:1px solid #d9d4c5;padding-bottom:8px;margin-bottom:10px}
.email .eh b{color:#23262d}
.email .quote{border-left:3px solid #c8962a;padding:6px 10px;margin:8px 0;color:#5c616d;background:#efe9d8;border-radius:0 6px 6px 0;font-style:italic}
.email .efoot{margin-top:12px;padding-top:10px;border-top:1px solid #d9d4c5;font-size:11.5px;color:#5c616d}

/* ── Toggle switch ─────────────────────────────────────────── */
.switch{position:relative;width:44px;height:24px;flex:none}
.switch input{opacity:0;width:0;height:0}
.switch .track{position:absolute;inset:0;background:var(--bg-3);border:1px solid var(--border);border-radius:20px;transition:.2s;cursor:pointer}
.switch .track::before{content:"";position:absolute;width:18px;height:18px;left:2px;top:2px;border-radius:50%;background:var(--muted);transition:.2s}
.switch input:checked + .track{background:color-mix(in srgb,var(--green) 30%,transparent);border-color:var(--green)}
.switch input:checked + .track::before{transform:translateX(20px);background:var(--green)}

/* ── HOS clocks ────────────────────────────────────────────── */
.clocks{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.clock{border:1px solid var(--hair-2);border-radius:10px;padding:11px;text-align:center;background:var(--bg-1)}
.clock .cv{font-family:"JetBrains Mono",monospace;font-size:18px;color:var(--c,var(--ink))}
.clock .ck{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:5px}

/* ── Console / toast ───────────────────────────────────────── */
.console{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;
  width:min(560px,calc(100% - 40px));font-family:"JetBrains Mono",monospace;font-size:12px;
  background:rgba(14,16,22,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid var(--hair);border-radius:11px;box-shadow:var(--shadow);padding:11px 14px;color:var(--muted);
  opacity:0;pointer-events:none;transition:opacity .25s, transform .25s;}
.console.show{opacity:1;transform:translateX(-50%) translateY(0)}
.console b{color:var(--amber)}
.console .ok{color:var(--online)}
.console .warn{color:var(--warn)}

/* ── Nav drawer ────────────────────────────────────────────── */
.drawer-btn{width:40px;height:40px;border-radius:9px;border:1px solid var(--hair-2);background:transparent;
  color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:.15s}
.drawer-btn:hover{border-color:rgba(244,200,74,.5)}
.overlay{position:fixed;inset:0;background:rgba(4,5,8,.55);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:.2s;z-index:70}
.overlay.show{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:272px;background:var(--bg-1);border-left:1px solid var(--hair);
  z-index:80;transform:translateX(100%);transition:transform .22s ease;display:flex;flex-direction:column;padding:18px}
.drawer.show{transform:translateX(0)}
.drawer h3{font-family:"Chakra Petch",sans-serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin:0 0 12px}
.drawer a{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--muted);font-size:13.5px;
  padding:9px 11px;border-radius:9px;transition:.12s}
.drawer a:hover{color:var(--ink);background:rgba(244,200,74,.07)}
.drawer a.active{color:var(--amber);background:rgba(244,200,74,.1)}
.drawer a.head{color:var(--ink);font-family:"Chakra Petch",sans-serif;letter-spacing:.04em}
.drawer .div{height:1px;background:var(--hair-2);margin:10px 2px}

/* ── Misc ──────────────────────────────────────────────────── */
.note{font-size:12px;color:var(--muted);line-height:1.55;background:var(--bg-1);border:1px solid var(--hair-2);
  border-radius:10px;padding:11px 14px;margin-bottom:16px}
.note b{color:var(--amber-soft)}
.pillrow{display:flex;gap:7px;flex-wrap:wrap}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--hair-2);border:1px solid var(--hair-2);border-radius:10px;overflow:hidden}
.facts .f{background:var(--bg-1);padding:11px 13px}
.facts .fk{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.facts .fv{font-size:13px;color:var(--ink);margin-top:4px;font-family:"JetBrains Mono",monospace}
.cols{display:grid;grid-template-columns:1.3fr 1fr;gap:18px;align-items:start}
.lede{color:var(--muted);font-size:13.5px;line-height:1.6;max-width:70ch}

/* Fleet stage */
.fleet__stage{position:relative;width:100%;aspect-ratio:960/600;border-radius:12px;overflow:hidden;border:1px solid var(--hair-2);background:rgba(10,12,17,.5)}
.fleet__map{position:absolute;inset:0;width:100%;height:100%}
.fleet__states{fill:none;stroke:rgba(180,196,224,.10);stroke-width:.7}
.fleet__nation-fill{fill:rgba(120,140,176,.06)}
.fleet__nation-line{fill:none;stroke:rgba(244,200,74,.28);stroke-width:1.1;filter:drop-shadow(0 0 6px rgba(244,200,74,.12))}
.fleet__canvas{position:absolute;inset:0;width:100%;height:100%}
.fleet__glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 60% at 50% 45%,rgba(244,200,74,.06),transparent 70%)}
.fleet__legend{display:flex;gap:16px;align-items:center;font-size:11px;color:var(--muted);flex-wrap:wrap}
.lg{display:flex;align-items:center;gap:6px}
.lg .d{width:8px;height:8px;border-radius:50%}

/* Stacked-area / pipeline shared */
.pipe__row{display:grid;grid-template-columns:8px 1fr auto;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid var(--hair-2)}
.pipe__row:last-child{border-bottom:0}
.pipe__dot{width:8px;height:8px;border-radius:50%;background:var(--c,var(--muted));box-shadow:0 0 7px 0 color-mix(in srgb,var(--c,var(--muted)) 60%,transparent)}
.pipe__name{font-family:"JetBrains Mono",monospace;font-size:12.5px;color:var(--ink)}
.pipe__name small{color:var(--muted);font-size:10px;margin-left:6px}
.pipe__rate{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--muted);text-align:right}
.pipe__rate b{color:var(--ink);font-weight:500}

/* responsive */
@media (max-width:1000px){
  .grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(168px,auto)}
  .t-oe,.t-csr,.t-data,.t-rep,.t-drivers,.t-dispatch,.t-pipeline{grid-column:span 1}
  .t-fleet,.t-stream{grid-column:span 2;grid-row:auto}
  .t-fleet{order:-1}
  .cols{grid-template-columns:1fr}
}
@media (max-width:620px){
  .wrap{padding:18px 16px 80px}
  .grid{grid-template-columns:1fr}
  .grid > *{grid-column:span 1 !important}
  .telemetry{gap:14px;font-size:12px}.telemetry .sep{display:none}
  .brand__name{font-size:21px}
  .clocks{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .status .dot{animation:none}
  .modebar--live{animation:none}
}