:root{--bg:#111418;--card:#1b2027;--line:#2a313b;--fg:#eef1f4;--mut:#8f9aa7;--acc:#e3342f;--ok:#2fbf71;--warn:#f0a020}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.hidden{display:none!important}
.muted{color:var(--mut);font-size:.85rem}
.err{color:#ff7b72;min-height:1.2em}
header{display:flex;justify-content:space-between;align-items:baseline;padding:14px 16px 6px;padding-top:max(14px,env(safe-area-inset-top))}
.title{font-weight:700;font-size:1.15rem}
main{padding:8px 12px 96px;max-width:1100px;margin:0 auto}
.tab{display:none}.tab.on{display:block}
nav{position:fixed;bottom:0;left:0;right:0;display:flex;background:#0c0f12;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);z-index:5}
nav button{flex:1;background:none;border:0;color:var(--mut);font-size:.68rem;padding:8px 0 10px;display:flex;flex-direction:column;align-items:center;gap:2px}
nav button span{font-size:1.2rem}
nav button.on{color:var(--fg)}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin:10px 0}
.card h2{margin:0 0 10px;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);font-weight:600}
.big{font-size:3rem;font-weight:700;line-height:1}
.mid{font-size:1.6rem;font-weight:600}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line)}
.row:first-of-type{border-top:0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{background:#252c35;border-radius:999px;padding:5px 12px;font-size:.88rem}
.chip.bad{color:var(--warn)}
button{font:inherit;color:inherit}
.btn{background:#2a323d;border:0;border-radius:12px;padding:14px 16px;font-weight:600;min-height:50px;width:100%;position:relative}
.btn.primary,.primary{background:var(--acc);color:#fff;border:0;border-radius:12px;padding:14px 16px;font-weight:600}
.btn:disabled{opacity:.6}
.btn.done::after{content:"✓";position:absolute;right:16px;color:var(--ok);font-size:1.2rem}
.btn.fail::after{content:"!";position:absolute;right:16px;color:#ff7b72;font-size:1.2rem}
.btn.busy::after{content:"";position:absolute;right:16px;top:50%;width:16px;height:16px;margin-top:-8px;border:2px solid var(--mut);border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.seg{display:flex;background:#252c35;border-radius:12px;padding:4px;gap:4px}
.seg button{flex:1;border:0;background:none;padding:11px 0;border-radius:9px;font-weight:600;color:var(--mut)}
.seg button.on{background:#3a4452;color:var(--fg)}
.stepper{display:flex;align-items:center;justify-content:center;gap:22px;margin:4px 0 12px}
.stepper button{width:48px;height:48px;border-radius:50%;border:0;background:#2a323d;font-size:1.4rem}
.toggle{appearance:none;width:50px;height:30px;border-radius:999px;background:#3a4452;position:relative;flex:none;margin:0;cursor:pointer}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:.15s}
.toggle:checked{background:var(--ok)}.toggle:checked::after{left:23px}
.sched{cursor:pointer}
.sched .name{font-weight:600}
.num{width:70px;background:#252c35;border:1px solid var(--line);color:var(--fg);border-radius:8px;padding:8px;font:inherit;text-align:center}
.status-line{color:var(--mut);font-size:.9rem;margin:4px 2px 8px}
.ok{color:var(--ok)}.bad{color:#ff7b72}
.note{color:var(--mut);font-size:.82rem;margin-top:10px}
a{color:#7fb3ff}
.dry{position:fixed;top:0;left:0;right:0;background:var(--warn);color:#111;font-size:.75rem;text-align:center;padding:2px;z-index:9}
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login form{width:100%;max-width:360px;display:flex;flex-direction:column;gap:12px}
.login h1{margin:0 0 8px;text-align:center}
input[type=password],input[type=text],input[type=time],input[type=date],input[inputmode]{background:#1b2027;border:1px solid var(--line);color:var(--fg);border-radius:10px;padding:13px;font:inherit;width:100%}
dialog{background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:16px;width:min(460px,94vw);padding:18px}
dialog::backdrop{background:#000a}
dialog label{display:block;margin:12px 0 6px;color:var(--mut);font-size:.85rem}
.days{display:flex;gap:5px}
.days button{flex:1;padding:10px 0;border-radius:9px;border:0;background:#252c35;color:var(--mut);font-size:.82rem;font-weight:600}
.days button.on{background:var(--acc);color:#fff}
.actions{display:flex;gap:10px;margin-top:18px}
.actions .btn{flex:1}
.link{background:none;border:0;color:#ff7b72;padding:10px 0;margin-top:6px}
@media (min-width:900px){
  nav{position:sticky;top:0;bottom:auto;border:0;border-bottom:1px solid var(--line);justify-content:center;gap:6px;padding:0}
  nav button{flex:none;flex-direction:row;font-size:.95rem;padding:12px 18px;gap:8px}
  nav button.on{box-shadow:inset 0 -2px 0 var(--acc)}
  header{max-width:1100px;margin:0 auto}
  main{padding-bottom:40px}
  .tab.on{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;align-items:start}
  .tab.on>.status-line,.tab.on>.full{grid-column:1/-1}
}
.mt{margin-top:12px}
.stack{display:grid;gap:10px}
body.dry-on header{padding-top:26px}
.center{text-align:center;margin:0}
/* MG Ready – "Tron" theme (MOCKUP). Loaded after base.css; overrides colours, borders, fonts and controls only. */
:root{
  --bg:#04070c; --card:rgba(7,20,31,.86); --line:#1d5468; --fg:#e2f9ff; --mut:#93c6d6;
  --acc:#22e1ff; --acc-dim:rgba(34,225,255,.14); --ok:#3dff9a; --warn:#ffb020; --red:#ff5c7a;
  --mono: ui-monospace, "JetBrains Mono", "SF Mono", "Roboto Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
  --cut: 12px;
}
html,body{background:var(--bg);color:var(--fg)}
body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(ellipse 80% 45% at 50% 0%, rgba(34,225,255,.10), transparent 70%),
    linear-gradient(rgba(34,225,255,.035) 1px, transparent 1px) 0 0/28px 28px,
    linear-gradient(90deg, rgba(34,225,255,.035) 1px, transparent 1px) 0 0/28px 28px,
    var(--bg);
  background-attachment: fixed;
}
.title{font-family:var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--acc);text-shadow:0 0 10px rgba(34,225,255,.55)}
#updated,.muted{color:var(--mut)}
.num,.big,.mid,.num input{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* angular panels */
.card,dialog{
  background:
    linear-gradient(135deg, transparent calc(var(--cut) - 1.5px), var(--acc) calc(var(--cut) - 1.5px) var(--cut), transparent var(--cut)) top left/var(--cut) var(--cut) no-repeat,
    linear-gradient(-45deg, transparent calc(var(--cut) - 1.5px), var(--acc) calc(var(--cut) - 1.5px) var(--cut), transparent var(--cut)) bottom right/var(--cut) var(--cut) no-repeat,
    var(--card);
  border:0; border-radius:0;
  box-shadow: inset 0 0 0 1px var(--line), inset 0 0 24px rgba(34,225,255,.05);
  clip-path: polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
}
.card h2,dialog label{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);font-weight:600}
.row{border-top:1px solid rgba(29,84,104,.6)}
.chip{background:var(--acc-dim);border-radius:0;font-family:var(--mono);font-size:.8rem;letter-spacing:.06em;box-shadow:inset 0 0 0 1px var(--line)}
.ok{color:var(--ok)} .chip.bad{color:var(--warn)} .bad{color:var(--warn)}
.note{color:var(--mut)}
a{color:var(--acc)}

/* buttons */
.btn,.primary,.seg,.days button,.stepper button,.num,input[type=password],input[type=text],input[type=time],input[type=date],input[inputmode]{
  border-radius:0;
  clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.btn{background:var(--acc-dim);color:var(--fg);box-shadow:inset 0 0 0 1px var(--line);font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:.88rem}
.btn:active{background:rgba(34,225,255,.28)}
.btn.primary,.primary{background:var(--acc);color:#001219;box-shadow:none;text-shadow:none;font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em}
.btn.done::after{color:var(--ok)} .btn.primary.done::after{color:#00351c}
.stepper button{background:var(--acc-dim);box-shadow:inset 0 0 0 1px var(--line);color:var(--acc)}

/* segmented + days */
.seg{background:rgba(7,20,31,.9);box-shadow:inset 0 0 0 1px var(--line);padding:3px}
.seg button{border-radius:0;color:var(--mut);font-family:var(--mono)}
.seg button.on{background:var(--acc);color:#001219}
.days button{background:var(--acc-dim);color:var(--mut);font-family:var(--mono)}
.days button.on{background:var(--acc);color:#001219}

/* toggles */
.toggle{border-radius:0;background:#0b2230;box-shadow:inset 0 0 0 1px var(--line);clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.toggle::after{border-radius:0;background:var(--mut)}
.toggle:checked{background:rgba(34,225,255,.25);box-shadow:inset 0 0 0 1px var(--acc)}
.toggle:checked::after{background:var(--acc);box-shadow:0 0 8px var(--acc)}

/* inputs + dialog */
input[type=password],input[type=text],input[type=time],input[type=date],input[inputmode],.num{background:#061520;border:0;box-shadow:inset 0 0 0 1px var(--line);color:var(--fg);font-family:var(--mono)}
input:focus{outline:none;box-shadow:inset 0 0 0 1px var(--acc)}
dialog{color:var(--fg)} dialog::backdrop{background:rgba(0,6,10,.8)}
.link{color:var(--red)}

/* tab bar */
nav{background:rgba(2,6,10,.96);border-top:1px solid var(--line);box-shadow:0 -1px 12px rgba(34,225,255,.12)}
nav button{color:var(--mut);font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;font-size:.6rem}
nav button.on{color:var(--acc);text-shadow:0 0 8px rgba(34,225,255,.7);box-shadow:inset 0 2px 0 var(--acc)}
@media (min-width:900px){ nav{border-bottom:1px solid var(--line);border-top:0} nav button{font-size:.8rem} nav button.on{box-shadow:inset 0 -2px 0 var(--acc)} }

/* ---------- Tron Home ---------- */
.stage{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"a b" "car car" "c d";gap:10px 12px;margin:6px 0 4px;align-items:start}
.stage .panels{display:contents}
.carbox{grid-area:car;margin:6px -8px 0}
.car{width:100%;height:auto;display:block;overflow:visible}
.leaders{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:visible}
.leaders polyline{fill:none;stroke:var(--acc);stroke-width:1.2;stroke-dasharray:4 3;filter:drop-shadow(0 0 3px rgba(34,225,255,.8));animation:flow 1.6s linear infinite}
.leaders .ring{fill:none;stroke:var(--acc);stroke-width:1.2;transform-box:fill-box;transform-origin:center;animation:ping 2.4s ease-out infinite}
.leaders .dot{fill:var(--acc)}
.leaders .warn{stroke:var(--warn)} .leaders .dot.warn{fill:var(--warn)}
.wire path,.wire circle,.wire rect{fill:none;stroke:var(--acc);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.wire .body{stroke-width:2.8;fill:rgba(34,225,255,.035)}
.wire .glass{fill:rgba(34,225,255,.07);stroke-width:1.8}
.wire .thin{stroke-width:1.2;stroke:rgba(34,225,255,.7)}
.wire .handle{stroke-width:1.4;fill:rgba(34,225,255,.25)}
.wire .lightbar{stroke:#e9fdff;stroke-width:4}
.wire .taillight{stroke:var(--red);stroke-width:4}
.wire .port{stroke:var(--acc);stroke-width:1.6;fill:rgba(34,225,255,.15)}
.wire .tyre{stroke-width:2.6}.wire .rim{stroke-width:1.4}
.floor line{stroke:rgba(34,225,255,.16);stroke-width:1}
.battery .pack{fill:none;stroke:rgba(61,255,154,.55);stroke-width:1.2;stroke-dasharray:3 2}
.anchor{fill:transparent}
.homeacts{margin-top:6px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
header{padding-top:24px}
@keyframes ping{0%{transform:scale(.6);opacity:1}80%,100%{transform:scale(1.9);opacity:0}}
@media (min-width:900px){
  .stage{grid-template-columns:210px 1fr 210px;grid-template-areas:"a car b" "c car d";gap:24px 26px;align-items:center;min-height:430px}
  .carbox{margin:0}
  }
@media (prefers-reduced-motion: reduce){
  .leaders polyline,.leaders .ring{animation:none}
  }
.btn.primary,.primary{border-radius:0}

/* ---------- 3D Home ---------- */
.car{overflow:hidden;touch-action:pan-y;cursor:grab}
.car:active{cursor:grabbing}
.wire .rib{stroke-width:1;stroke:rgba(34,225,255,.45)}
.wire .thin2{stroke-width:.9;stroke:rgba(34,225,255,.35)}
.wire path{fill:none}
.battery .pack{fill:none}
/* charging: power flows from the port into the pack */
.energy{fill:none;stroke:var(--ok);stroke-width:3;stroke-linecap:round;stroke-dasharray:2 16;animation:flow 0.9s linear infinite}
.leaders .live{stroke:var(--ok);stroke-width:1.6;stroke-dasharray:2 7;animation:flow .7s linear infinite}
@keyframes shimmer{0%,100%{fill-opacity:1}50%{fill-opacity:.35}}

/* ---------- Charging tab: live battery ---------- */
.chargeviz .bviz{width:100%;height:auto;display:block;margin:4px 0 6px;overflow:visible}
.bviz .bshell{fill:rgba(7,20,31,.6);stroke:var(--acc);stroke-width:1.6;filter:drop-shadow(0 0 4px rgba(34,225,255,.7))}
.bviz .bnub{fill:none;stroke:var(--acc);stroke-width:1.4}
.bviz .bcell{fill:rgba(61,255,154,.08);stroke:rgba(61,255,154,.35);stroke-width:.8}
.bviz .bcell.lit{fill:var(--ok);stroke:var(--ok);filter:drop-shadow(0 0 3px var(--ok))}
.bviz .bcell.top{animation:shimmer 1.4s ease-in-out infinite}
.bviz .cable{fill:none;stroke:rgba(34,225,255,.55);stroke-width:5;stroke-linecap:round}
.bviz .plug{fill:rgba(34,225,255,.15);stroke:var(--acc);stroke-width:1.4}
.bviz .pulses{fill:none;stroke:#eafff4;stroke-width:3;stroke-linecap:round;stroke-dasharray:2 18;filter:drop-shadow(0 0 4px var(--ok));animation:flow .9s linear infinite}
.bviz .tgt{stroke:var(--warn);stroke-width:1.2;stroke-dasharray:3 3}
.bviz .tgtl{fill:var(--warn);font:600 11px var(--mono)}
.cstats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cstats .lbl{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
.big2{font-size:1.6rem;font-weight:700;color:var(--fg)} .big2 small{font-size:.8rem;color:var(--mut)}
@keyframes flow{to{stroke-dashoffset:-18}}
@media (prefers-reduced-motion: reduce){
  .energy,.leaders .live,.bviz .bcell.top,.bviz .pulses{animation:none}
  .bviz .pulses{stroke-dasharray:2 8}
}

/* ---------- cyberpunk accents (secondary magenta, HUD micro-details, glitch) ---------- */
:root{--mag:#ff3fd2;--mag-dim:rgba(255,63,210,.18)}
/* faint scanline texture over the whole app */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:30;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px);mix-blend-mode:screen}
/* selected states get a magenta edge */
.seg button.on,.days button.on{box-shadow:inset 0 -2px 0 var(--mag)}
nav button.on{box-shadow:inset 0 2px 0 var(--acc),0 -1px 0 var(--mag)}
@media (min-width:900px){ nav button.on{box-shadow:inset 0 -2px 0 var(--mag)} }
.toggle:checked{box-shadow:inset 0 0 0 1px var(--acc),0 0 0 1px var(--mag-dim)}
.btn.primary{box-shadow:inset 0 -2px 0 var(--mag)}
/* HUD micro-details around the car */
.carbox{position:relative}
.hud{position:absolute;inset:0;pointer-events:none;font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;color:var(--mut)}
.hud .br{position:absolute;width:10px;height:10px;border:1px solid var(--mag);opacity:.8}
.hud .tl{left:2px;top:0;border-right:0;border-bottom:0}.hud .tr{right:2px;top:0;border-left:0;border-bottom:0}
.hud .bl{left:2px;bottom:0;border-right:0;border-top:0}.hud .brr{right:2px;bottom:0;border-left:0;border-top:0}
.hud-l{position:absolute;left:16px;top:-1px;color:var(--mag)}
.hud-r{position:absolute;right:16px;bottom:-2px}
.ruler{position:absolute;left:16px;right:16px;bottom:12px;height:4px;opacity:.5;
  background:repeating-linear-gradient(90deg, rgba(34,225,255,.6) 0 1px, transparent 1px 10px),repeating-linear-gradient(90deg, rgba(255,63,210,.8) 0 1px, transparent 1px 50px);
  -webkit-mask:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
/* panel that is opening: magenta edge */
/* charging flow highlights in magenta pulses over the green flow */
.energy{stroke:var(--mag);filter:drop-shadow(0 0 4px var(--mag))}
.leaders .live{stroke:var(--mag);filter:drop-shadow(0 0 3px var(--mag))}
.bviz .pulses{stroke:#ffd6f5;filter:drop-shadow(0 0 4px var(--mag))}
/* glitch: under 150 ms chromatic split + jitter */
.glitch{animation:glitch 140ms steps(3) 1}
@keyframes glitch{
  0%{text-shadow:-2px 0 rgba(255,63,210,.8),2px 0 rgba(34,225,255,.8);transform:translateX(1px)}
  50%{text-shadow:2px 0 rgba(255,63,210,.8),-2px 0 rgba(34,225,255,.8);transform:translateX(-1px);clip-path:polygon(0 8%,100% 8%,100% 100%,0 100%)}
  100%{text-shadow:none;transform:none}}
@media (prefers-reduced-motion: reduce){ .glitch{animation:none} }

/* ================= Home v3: compact chips that expand (MOCKUP) ================= */
.stage{display:block!important;position:relative;min-height:0}
.stage .chips{display:grid;gap:8px;position:relative;z-index:3}
.stage .chips.a{grid-template-columns:1fr 1fr}
.stage .chips.b{grid-template-columns:1fr 1fr 1fr}
.chip{--cut:7px;display:flex;align-items:baseline;justify-content:space-between;gap:6px;min-width:0;padding:8px 10px;border:0;cursor:pointer;color:var(--fg);
  background:linear-gradient(135deg,transparent 5.5px,var(--acc) 5.5px 7px,transparent 7px) top left/7px 7px no-repeat,var(--card);
  box-shadow:inset 0 0 0 1px var(--line);clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  transition:opacity .2s ease,transform .2s ease;will-change:transform,opacity;font:inherit;text-align:left}
.chip .lbl{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.chip .cv{font-family:var(--mono);font-size:.86rem;font-weight:700;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip.warn{box-shadow:inset 0 0 0 1px rgba(255,176,32,.7)} .chip.warn .cv,.chip.warn .lbl{color:var(--warn)}
.chip.on{box-shadow:inset 0 0 0 1px var(--mag)} .chip.on .lbl{color:var(--mag)}
.has-open .chip:not(.on){opacity:.35}
.carbox{position:relative;margin:8px -8px;overflow:hidden}
.carbox canvas.car{display:block;width:100%;touch-action:pan-y;cursor:grab}
.carfx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.scan{position:absolute;left:0;right:0;top:0;height:22%;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(34,225,255,.10),transparent);
  animation:scan2 5.5s linear infinite;will-change:transform}
@keyframes scan2{from{transform:translateY(-100%)}to{transform:translateY(480%)}}
.leaders{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible}
.leaders polyline{fill:none;stroke:var(--acc);stroke-width:1.2;stroke-dasharray:4 3;filter:none}
.leaders .warn{stroke:var(--warn)} .leaders .dot.warn{fill:var(--warn)}
.leaders .mag{stroke:var(--mag)} .leaders .dot.mag{fill:var(--mag)}
.leaders .ring{fill:none;stroke-width:1.2}
/* drawer: the expanded detail (transform + opacity only) */
.drawer{position:absolute;left:0;right:0;z-index:4;padding:12px 14px;opacity:0;transform:translate3d(0,10px,0) scale(.97);transform-origin:50% 0;pointer-events:none;
  transition:opacity .22s ease,transform .26s cubic-bezier(.2,.8,.2,1);will-change:transform,opacity;
  background:linear-gradient(135deg,transparent 10.5px,var(--mag) 10.5px 12px,transparent 12px) top left/12px 12px no-repeat,
             linear-gradient(-45deg,transparent 10.5px,var(--mag) 10.5px 12px,transparent 12px) bottom right/12px 12px no-repeat,#06101a;
  box-shadow:inset 0 0 0 1px var(--mag),inset 0 0 30px rgba(255,63,210,.06);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.drawer.show{opacity:1;transform:none;pointer-events:auto}
.drawer .dh{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.drawer .dh .lbl{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mag)}
.golink{border:0;background:none;color:var(--acc);font-family:var(--mono);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;padding:6px 0 6px 12px;cursor:pointer}
.dgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.dgrid.g4{grid-template-columns:repeat(4,1fr)}
.dgrid .lbl{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.dv{font-family:var(--mono);font-size:1.25rem;font-weight:700;color:var(--fg)} .dv small{font-size:.7rem;color:var(--mut);font-weight:500}
.dv.big{font-size:1.4rem;letter-spacing:.06em} .dv.ok{color:var(--ok)} .dv.bad{color:var(--warn)}
.dsub{font-family:var(--mono);font-size:.76rem;color:var(--mut);margin-top:6px;line-height:1.4} .dsub.live{color:var(--ok)}
/* tyre mini panels: absolutely placed by transform only */
.minis{position:absolute;inset:0;pointer-events:none;z-index:3}
.tmini{position:absolute;left:0;top:0;display:flex;align-items:baseline;gap:5px;padding:5px 8px;opacity:0;transition:opacity .25s ease;will-change:transform,opacity;
  background:rgba(6,16,26,.94);box-shadow:inset 0 0 0 1px var(--line);clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.tmini .lbl{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;color:var(--acc)} .tmini .mono{font-size:.95rem;font-weight:700} .tmini small{font-size:.62rem;color:var(--mut)}
.tmini.warn{box-shadow:inset 0 0 0 1px var(--warn)} .tmini.warn .mono{color:var(--warn)}
.open-tyres .tmini{opacity:1}
.carfx .energy{fill:none;stroke:var(--mag);stroke-width:3;stroke-linecap:round;stroke-dasharray:2 16;animation:flow .9s linear infinite;filter:drop-shadow(0 0 4px var(--mag))}
.hud{z-index:1}
@media (min-width:900px){
  .stage{display:grid!important;grid-template-columns:200px 1fr 200px;grid-template-areas:"a car b";gap:0 24px;align-items:center;min-height:420px}
  .stage .chips.a{grid-area:a;grid-template-columns:1fr} .stage .chips.b{grid-area:b;grid-template-columns:1fr}
  .carbox{grid-area:car;margin:0}
  .drawer{left:calc(200px + 24px);right:calc(200px + 24px)}
}
@media (prefers-reduced-motion: reduce){ .scan{display:none} .chip,.drawer,.tmini{transition:none} .carfx .energy{animation:none} }

/* INITIALISE preview line: subtle, one line */
.initprev{font:500 12px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;color:#8fb8c8;letter-spacing:.02em;margin:-2px 2px 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.initprev .ip-k{color:#22e1ff;opacity:.85;margin-right:4px}
.card .initprev{margin:2px 0 10px}
.btn.init{letter-spacing:.14em;font-weight:700}
/* bottom chip row is 3-up on phones: tighten so 'INFO 7,945 mi' fits at 360px+ */
.chips.b .chip{padding:8px 8px;gap:4px}
.chips.b .chip .lbl{letter-spacing:.1em}
.chips.b .chip .cv{letter-spacing:0;font-size:.82rem}
@media (max-width:380px){ .chips.b .chip{padding:8px 6px;gap:3px} .chips.b .chip .lbl{font-size:.56rem;letter-spacing:.06em} .chips.b .chip .cv{font-size:.74rem} }

/* ---------------- OVERRIDE (charge to 100% once) ---------------- */
:root{--red:#ff3b52;--red-hi:#ff6a7c;--red-dim:rgba(255,59,82,.14)}
.tri{width:30px;height:28px;flex:none;color:var(--red)}
.tri.sm{width:20px;height:18px}
.ovr-card{position:relative}
.ovr-btn{position:relative;display:flex;align-items:center;gap:14px;width:100%;padding:16px 18px;cursor:pointer;color:#fff;font:inherit;text-align:left;
  background:linear-gradient(90deg,rgba(255,59,82,.28),rgba(255,59,82,.10));border:0;box-shadow:inset 0 0 0 2px var(--red),0 0 18px rgba(255,59,82,.35);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}
.ovr-btn::after{content:"";position:absolute;right:0;top:0;bottom:0;width:64px;opacity:.5;
  background:repeating-linear-gradient(-45deg,var(--red) 0 6px,transparent 6px 12px);-webkit-mask:linear-gradient(90deg,transparent,#000);mask:linear-gradient(90deg,transparent,#000)}
.ovr-btn b{display:block;font-family:var(--mono);font-size:1.15rem;letter-spacing:.24em;color:#fff}
.ovr-btn small{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--red-hi);margin-top:2px}
.ovr-btn .tri{width:34px;height:31px;color:#fff;filter:drop-shadow(0 0 6px var(--red))}
.ovr-btn:active{transform:scale(.985)}
.ovr-btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:inset 0 0 0 1px var(--red)}
.ovr-note{font-size:.78rem;color:var(--mut);margin-top:8px}
.ovr-on{box-shadow:inset 0 0 0 2px var(--red),0 0 22px rgba(255,59,82,.3)!important;background:linear-gradient(180deg,rgba(255,59,82,.16),rgba(255,59,82,.04))!important}
.ovr-head{display:flex;align-items:center;gap:10px}
.ovr-title{font-family:var(--mono);font-weight:700;font-size:1.1rem;letter-spacing:.18em;color:var(--red-hi)}
.ovr-sub{font-size:.85rem;color:#ffd5db;margin:8px 0 12px}
.btn.ovr-cancel{box-shadow:inset 0 0 0 1px var(--red);color:#fff;background:rgba(255,59,82,.12)}
.chip.ovr{box-shadow:inset 0 0 0 1px var(--red),0 0 12px rgba(255,59,82,.35);background:rgba(255,59,82,.14)}
.chip.ovr .lbl,.chip.ovr .cv{color:var(--red-hi)}
.ovr-line{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-family:var(--mono);font-size:.8rem;color:var(--red-hi);letter-spacing:.1em}
.ovr-line .link{color:#fff;font-size:.78rem;text-decoration:underline;background:none;border:0;cursor:pointer;letter-spacing:0}
/* full-screen confirm */
body.ovr-lock{overflow:hidden}
.ovr-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px;background:radial-gradient(ellipse at center,rgba(60,0,10,.92),rgba(5,0,3,.97));color:#fff}
.ovr-frame{position:absolute;inset:10px;pointer-events:none;box-shadow:inset 0 0 0 2px var(--red),inset 0 0 40px rgba(255,59,82,.45);animation:ovrPulse 1.6s ease-in-out infinite}
.ovr-scan{position:absolute;inset:0;pointer-events:none;opacity:.35;background:repeating-linear-gradient(0deg,rgba(255,59,82,.16) 0 1px,transparent 1px 4px);animation:ovrScan 6s linear infinite}
.ovr-box{position:relative;max-width:420px;width:100%;text-align:center}
.ovr-box .tri.big{width:120px;height:110px;color:var(--red);filter:drop-shadow(0 0 14px var(--red));animation:ovrTri 1.6s ease-in-out infinite;transform-origin:50% 60%}
.ovr-kicker{font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;color:var(--red-hi);margin:10px 0 6px}
.ovr-box h2{font-family:var(--mono);font-size:1.45rem;letter-spacing:.08em;margin:0 0 12px;color:#fff;text-shadow:0 0 12px rgba(255,59,82,.8)}
.ovr-box p{color:#ffe1e5;font-size:.95rem;line-height:1.45;margin:0 0 8px}
.ovr-box .ovr-small{color:#ff9aa8;font-size:.82rem}
.ovr-hold{position:relative;display:grid;place-items:center;width:150px;height:150px;margin:18px auto 14px;border-radius:50%;border:0;cursor:pointer;
  background:radial-gradient(circle,rgba(255,59,82,.28),rgba(255,59,82,.06) 70%);color:#fff;font:700 .95rem/1.25 var(--mono);letter-spacing:.14em;touch-action:none;user-select:none;-webkit-user-select:none}
.ovr-hold svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ovr-hold .trk{fill:none;stroke:rgba(255,59,82,.3);stroke-width:5}
.ovr-hold .ring{fill:none;stroke:var(--red);stroke-width:7;stroke-linecap:round;stroke-dasharray:339.3;stroke-dashoffset:339.3;transition:stroke-dashoffset .25s ease-out;filter:drop-shadow(0 0 6px var(--red))}
.ovr-hold.holding .ring{stroke-dashoffset:0;transition:stroke-dashoffset 1.5s linear}
.ovr-hold.holding{transform:scale(.97)}
.ovr-hold:focus-visible{outline:2px solid #fff;outline-offset:4px}
.btn.ovr-x{max-width:220px;margin:0 auto;display:block;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);background:transparent;color:#fff}
.ovr-modal.glitching .ovr-box{animation:glitch 140ms steps(3) 1}
@keyframes ovrPulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes ovrScan{from{transform:translateY(0)}to{transform:translateY(16px)}}
@keyframes ovrTri{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.06);opacity:1}}
@media (prefers-reduced-motion: reduce){ .ovr-frame,.ovr-scan,.ovr-box .tri.big{animation:none} .ovr-frame{opacity:1} .ovr-modal.glitching .ovr-box{animation:none} }

/* ---------------- display flicker (fx.js) — opacity/transform only; <=2 dips per event ---------------- */
.fx-dip{animation:fxDip 110ms linear 1}
@keyframes fxDip{0%,100%{opacity:1}40%{opacity:.74}70%{opacity:.9}}
.fx-buzz{display:inline-block;animation:fxBuzz 200ms steps(1,end) 1}
@keyframes fxBuzz{0%{opacity:1}20%{opacity:.6}35%{opacity:1}60%{opacity:.72}75%,100%{opacity:1}}
@media (prefers-reduced-motion: reduce){ .fx-dip,.fx-buzz{animation:none!important} }

/* succinct confirm: title breaks cleanly between its two halves */
.ovr-box h2 span{display:inline-block;white-space:nowrap}
.ovr-box p{margin:0 0 4px}

/* ---- spacing v4: one 10px rhythm; content below the diagram is pushed (transform) when a panel expands ---- */
#home{padding-bottom:0}
.stage{margin:4px 0 0!important}
.stage .chips{gap:10px!important}
.carbox{margin:10px -8px!important}
/* push-down: JS sets one translateY per open/close; the compositor runs the transition */
#home .stage ~ *{transition:transform 280ms cubic-bezier(.16,1,.3,1)}            /* open: ease-out */
#home.push-closing .stage ~ *{transition:transform 280ms cubic-bezier(.65,0,.35,1)} /* close: ease-in-out */
#home.push-moving .stage ~ *,#home.push-moving .drawer{will-change:transform,opacity}
.drawer{transition:opacity 220ms ease-out,transform 280ms cubic-bezier(.16,1,.3,1)!important;will-change:auto!important}
#home.push-closing .drawer{transition:opacity 200ms ease-in-out,transform 280ms cubic-bezier(.65,0,.35,1)!important}
#home .homeacts{margin-top:10px!important}
.open-tyres .hud-l,.open-tyres .hud-r,.open-tyres .ruler{opacity:0;transition:opacity .2s}
@media (min-width:900px){ .carbox{margin:0!important} }
@media (prefers-reduced-motion: reduce){ #home .stage ~ *{transition:none} }
@media (min-width:900px){ .stage{min-height:0!important;padding:10px 0} }
@media (max-width:899px){ .carbox{margin:10px -8px 8px!important} }
.ovr-modal{background:radial-gradient(ellipse at center,rgba(42,0,8,.985),rgba(4,0,2,.995))}
/* wide: place each panel on the side of the car it points at (front is on the left) so leader lines never cross */
@media (min-width:900px){
  .stage{grid-template-columns:200px 1fr 200px!important;grid-template-areas:"pi car pc" "pd car pt" "pb car .";row-gap:12px!important;align-content:center}
  .stage .chips{display:contents!important}
  .carbox{grid-row:1 / span 3}
  .chip[data-part=info]{grid-area:pi} .chip[data-part=doors]{grid-area:pd} .chip[data-part=battery]{grid-area:pb}
  .chip[data-part=cabin]{grid-area:pc} .chip[data-part=tyres]{grid-area:pt}
}

/* ===== live build additions (21 Oct) ===== */
.hud-init{position:absolute;left:50%;top:24px;transform:translateX(-50%);font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;color:var(--mag);
  text-shadow:0 0 8px rgba(255,63,210,.7);white-space:nowrap;padding:2px 8px;border:1px solid rgba(255,63,210,.55);background:rgba(10,2,10,.6);animation:initpulse 1.6s ease-in-out infinite}
.hud-init b{font-weight:700}
@keyframes initpulse{50%{opacity:.6}}
.initprev.on{border-color:rgba(255,63,210,.5);color:var(--fg)} .initprev.on .ip-k{color:var(--mag)}
.notact{margin:6px 0 8px;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:#1a1200;background:var(--warn);padding:3px 7px;display:inline-block;line-height:1.5}
.ovr-small.na{color:var(--warn)}
.toast{position:fixed;left:50%;bottom:86px;transform:translate(-50%,20px);opacity:0;transition:opacity .2s,transform .2s;z-index:30;max-width:92vw;
  background:rgba(2,8,14,.96);border:1px solid var(--acc);color:var(--fg);font-size:.85rem;padding:8px 14px;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}
dialog.ask .ask-t{font-family:var(--mono);font-size:1rem;letter-spacing:.08em;color:var(--fg);margin:0 0 8px;text-transform:none}
dialog.ask p{margin:0 0 6px}
.agile .agrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:6px 0 10px}
.agile .sm{font-size:.72rem;line-height:1.3;margin-top:2px}
.pchart{width:100%;height:auto;display:block;margin:4px 0 6px}
.pchart .pb{fill:rgba(34,225,255,.22)} .pchart .pb.floor{fill:var(--acc)} .pchart .pb.cheap{fill:var(--mag)} .pchart .pb.negative{fill:var(--ok)}
.pchart .pz{stroke:rgba(34,225,255,.4);stroke-width:1} .pchart .pcl{stroke:var(--mag);stroke-width:1;stroke-dasharray:4 4;opacity:.7}
.pchart .pt{fill:var(--mut);font-family:var(--mono);font-size:11px}
.map{position:relative;height:300px;overflow:hidden;border:1px solid var(--line);background:#071018;margin-top:6px}
.map .tile{position:absolute;left:0;top:0;width:256px;height:256px;filter:invert(1) hue-rotate(180deg) brightness(.85) contrast(.9) saturate(.6)}
.map .pin{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--mag);box-shadow:0 0 0 4px rgba(255,63,210,.3),0 0 14px var(--mag)}
.map .attr{position:absolute;right:0;bottom:0;font-size:.6rem;background:rgba(0,0,0,.6);color:#bbb;padding:1px 4px}
.map .mapmsg{padding:20px}
.maprow{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:6px;font-size:.8rem}
@media (max-width:420px){ nav button{font-size:.54rem;letter-spacing:.02em} nav button span{font-size:1.05rem} }
@media (prefers-reduced-motion: reduce){ .hud-init{animation:none} .toast{transition:none} }

/* ===== tab change: HUD sweep (replaces the whole-tab flicker) ===== */
.hudfx{position:fixed;z-index:4;pointer-events:none;overflow:hidden;display:none;contain:strict}
.hudfx.run{display:block}
.hx-curtain{position:absolute;left:0;right:0;top:0;height:100%;background:var(--bg);will-change:transform}
.hx-line{position:absolute;left:0;right:0;top:-1px;height:2.5px;background:var(--mag,#ff3fd2);opacity:.85;box-shadow:0 0 4px rgba(255,63,210,.7),0 0 12px rgba(255,63,210,.35)}
.hx-trail{position:absolute;left:0;right:0;top:-84px;height:84px;background:linear-gradient(to top,rgba(255,63,210,.30),rgba(255,63,210,.12) 30%,rgba(255,63,210,.03) 70%,rgba(255,63,210,0))}
.hx-br{position:absolute;width:16px;height:16px;border:0 solid var(--acc);filter:drop-shadow(0 0 3px var(--acc));will-change:transform,opacity;opacity:0}
.hx-br.tl{top:4px;left:4px;border-top-width:2px;border-left-width:2px;transform-origin:0 0}
.hx-br.tr{top:4px;right:4px;border-top-width:2px;border-right-width:2px;transform-origin:100% 0}
.hx-br.bl{bottom:4px;left:4px;border-bottom-width:2px;border-left-width:2px;transform-origin:0 100%}
.hx-br.br{bottom:4px;right:4px;border-bottom-width:2px;border-right-width:2px;transform-origin:100% 100%}
.hx-label{position:absolute;top:8px;left:26px;font-family:var(--mono);font-size:.64rem;letter-spacing:.22em;color:var(--acc);
  text-shadow:0 0 6px rgba(34,225,255,.8);background:rgba(2,8,14,.72);padding:1px 6px;white-space:nowrap}
.hx-label span{opacity:0}

/* Charging tab: charge status in plain words; Climate tab: keep "value °C" on one line */
.cstatus{font-size:.85rem}
.chargeviz .cstatus{margin-top:4px}
.nw{white-space:nowrap}
/* 22 Oct: wheel heat, Initialise defaults, Pre-Drive */
.ntbadge{display:inline-block;margin-left:6px;padding:1px 5px;font:600 .58rem/1.4 var(--mono);letter-spacing:.12em;color:var(--mag);box-shadow:inset 0 0 0 1px var(--mag);vertical-align:middle;white-space:nowrap}
.card h3.sub{margin:14px 0 4px;font:600 .66rem/1.2 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
.defs .drow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.defs .drow>span{flex:1 1 120px;font-size:.92rem}
.defs .drow .seg{flex:0 1 260px;min-width:200px}
.seg.sm button{padding:7px 0;font-size:.8rem}
select{background:rgba(7,20,31,.9);border:1px solid var(--line);color:var(--fg);border-radius:0;padding:8px;font:500 .85rem var(--mono);max-width:100%}
.defs select{flex:0 1 260px;min-width:160px}
dialog select{width:100%;padding:12px}
.btn.mini{width:auto;min-height:36px;padding:6px 12px;font-size:.78rem;flex:none}
.pdcard .row .sched{flex:1;min-width:0}
.note.bad{color:#ff7b72;margin-top:2px}
/* session stage bar (Initialise card + Home). Animation is opacity/transform only (compositor). */
.stage-bar{margin:6px 0 10px}
.stage-bar .sb-segs{display:grid;grid-template-columns:1fr 1fr 1.75fr .8fr;gap:4px}
.sb-seg{position:relative;overflow:hidden;height:26px;display:flex;align-items:center;justify-content:center;font:600 .6rem/1 var(--mono);letter-spacing:.14em;color:var(--mut);background:rgba(7,20,31,.9);box-shadow:inset 0 0 0 1px var(--line);clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);white-space:nowrap}
.sb-seg.past{color:#b78ad6;background:rgba(255,63,210,.08);box-shadow:inset 0 0 0 1px rgba(255,63,210,.3)}
.sb-seg.on{color:#fff;background:var(--mag-dim);box-shadow:inset 0 0 0 1px var(--mag),0 0 12px rgba(255,63,210,.45)}
.sb-seg.on::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(255,63,210,.45),transparent 70%);animation:sbPulse 2.4s ease-in-out infinite;will-change:opacity}
.sb-seg.on::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);animation:sbScan 2.4s linear infinite;will-change:transform}
.sb-seg[data-k="off"].on{background:rgba(7,20,31,.9);box-shadow:inset 0 0 0 1px var(--line)}
.sb-seg[data-k="off"].on::before,.sb-seg[data-k="off"].on::after{display:none}
.sb-lab{margin-top:6px;font:500 .78rem/1.3 var(--mono);color:var(--mut);letter-spacing:.04em}
.sb-lab b{color:var(--mag);font-weight:700;letter-spacing:.14em}
.stage-bar.compact{margin:4px 2px 2px}
.stage-bar.compact .sb-seg{height:6px}
.stage-bar.compact .sb-lab{margin-top:4px;font-size:.7rem}
@keyframes sbPulse{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes sbScan{from{transform:translateX(-110%)}to{transform:translateX(260%)}}
@media (prefers-reduced-motion:reduce){.sb-seg.on::before,.sb-seg.on::after{animation:none}}
/* INITIALISE press-and-hold: fill grows while held (transform only), glow when full */
.btn.init.hold{overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.btn.init.hold .hfill{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,63,210,.25),rgba(255,63,210,.6));transform:scaleX(0);transform-origin:left center;transition:transform .2s ease-out;pointer-events:none;will-change:transform}
.btn.init.hold.holding .hfill{transform:scaleX(1);transition:transform 1.6s linear}
.btn.init.hold.held .hfill{transform:scaleX(1);transition:none}
.btn.init.hold.holding,.btn.init.hold.held{box-shadow:0 0 18px rgba(255,63,210,.55),inset 0 0 0 1px var(--mag)}
.btn.init.hold .hlab{position:relative}
.btn.init.hold .hhint{position:relative;margin-left:10px;font:600 .6rem/1 var(--mono);letter-spacing:.2em;opacity:.7;vertical-align:middle}
@media (max-width:480px){.sb-seg{letter-spacing:.06em;font-size:.56rem}}
.v12warn{display:flex;flex-direction:column;gap:2px;margin:0 0 10px;padding:8px 10px;font-size:.8rem;color:var(--warn);box-shadow:inset 0 0 0 1px currentColor}
.v12warn b{font:600 .72rem/1.3 var(--mono);letter-spacing:.12em}
.v12warn.urgent{color:var(--red)}

/* ---------- holiday mode (b24): low-power look on Home, header badge, Settings card ---------- */
.holbadge{display:inline-block;margin-left:10px;padding:2px 7px 2px 6px;font-size:.6rem;letter-spacing:.16em;vertical-align:middle;color:#cfeeff;
  text-shadow:none;box-shadow:inset 0 0 0 1px rgba(191,233,255,.45);background:rgba(120,170,210,.10)}
.holbadge.hidden{display:none}
.stage.is-holiday .carbox canvas.car{filter:grayscale(.85) brightness(.5) contrast(.95);transition:filter 1.2s ease}
.stage.is-holiday .scan,.stage.is-holiday .carfx .energy{display:none}
.stage.is-holiday .chip{opacity:.6} .stage.is-holiday .chip .lbl{color:#8fb0c4}
.stage.is-holiday .hud{color:#4f6a7a} .stage.is-holiday .hud .br{opacity:.4}
.stage.is-holiday .leaders,.stage.is-holiday .minis{opacity:.45}
.holsleep{position:absolute;inset:0;pointer-events:none;z-index:2}
.holsleep .moon{position:absolute;right:12%;top:10%;width:46px;height:46px;filter:drop-shadow(0 0 10px rgba(191,233,255,.35));animation:moonglow 6s ease-in-out infinite}
@keyframes moonglow{0%,100%{opacity:.8}50%{opacity:1}}
.holsleep .zz{position:absolute;right:calc(12% + 50px);top:30%;font-family:var(--mono);font-weight:700;color:#cfeeff;opacity:0;animation:zdrift 6s ease-in-out infinite}
.holsleep .z1{font-size:.7rem} .holsleep .z2{font-size:.9rem;animation-delay:2s} .holsleep .z3{font-size:1.1rem;animation-delay:4s}
@keyframes zdrift{0%{opacity:0;transform:translate(0,10px)}20%{opacity:.75}80%{opacity:.25}100%{opacity:0;transform:translate(-26px,-34px)}}
.holpill{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:3;white-space:nowrap;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
  color:#dff4ff;padding:5px 10px;background:rgba(10,28,42,.82);box-shadow:inset 0 0 0 1px rgba(191,233,255,.4)}
.btn.fetch{box-shadow:inset 0 0 0 1px rgba(191,233,255,.5);background:rgba(120,170,210,.10);color:#e6f6ff}
.btn.fetch:disabled{opacity:.55}
.initprev.hol{white-space:normal} .initprev.hol .ip-k{color:#bfe9ff}
.holcard .holon{color:#bfe9ff;font-family:var(--mono);font-size:.8rem;letter-spacing:.06em}
.holdates{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.holdates label{display:grid;gap:6px;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.holdates input[type=date]{width:100%;min-height:46px;padding:8px 10px;font-size:.95rem;color-scheme:dark;box-sizing:border-box}
@media (prefers-reduced-motion: reduce){ .holsleep .moon{animation:none} .holsleep .zz{animation:none;opacity:.55} .holsleep .z1{transform:translate(0,0)} .holsleep .z2{transform:translate(-12px,-14px)} .holsleep .z3{transform:translate(-24px,-30px)} .stage.is-holiday .carbox canvas.car{transition:none} }
.stage.is-holiday .hud-l{color:#5d7d90}
/* ---------- b25: smart charging presets, stasis hold, feature use ---------- */
.agile h2 .agst{margin-left:8px;font:700 .58rem/1 var(--mono);letter-spacing:.16em;padding:3px 6px;vertical-align:middle;box-shadow:inset 0 0 0 1px currentColor}
.agst.live{color:var(--ok)} .agst.plan{color:var(--warn)} .agst.off{color:var(--mut)} .agst.paused{color:#bfe9ff}
.seg.presets button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 0}
.seg.presets button small{font-size:.62rem;opacity:.75;letter-spacing:.02em}
.agile .row.rb{margin-top:8px} .agile .pline{margin:6px 0 10px}
.nowarn{display:flex;flex-direction:column;gap:3px;margin:6px 0 10px;padding:9px 11px;background:rgba(255,176,32,.12);box-shadow:inset 0 0 0 1px var(--warn);color:var(--fg)}
.nowarn b{color:var(--warn);font-family:var(--mono);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase} .nowarn span{font-size:.84rem;color:var(--mut)}
.nowarn.soft{background:rgba(34,225,255,.06);box-shadow:inset 0 0 0 1px var(--line)} .nowarn.soft b{color:var(--acc)}
.agile .blocks{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.agile .blk{font:600 .78rem/1 var(--mono);padding:6px 8px;color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc);background:rgba(34,225,255,.08)}
.agile .row.cmp span:first-child{color:var(--mut);font-size:.86rem}
.pchart .pcap{fill:var(--mag)}
.aglog .row{font-size:.8rem}
.lbl2{display:block;margin:10px 0 6px;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
#holC button,#ssC button{font-size:.74rem;padding:9px 4px;line-height:1.25}
.btn.shold{position:relative;overflow:hidden;width:100%;margin-top:12px;display:flex;flex-direction:column;align-items:center;gap:5px;padding:14px 10px;
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;background:rgba(7,20,31,.92);box-shadow:inset 0 0 0 1px rgba(191,233,255,.45);color:#cfeeff}
.btn.shold .hlab{position:relative;font:700 .92rem/1 var(--mono);letter-spacing:.3em}
.btn.shold .hhint{position:relative;font:600 .58rem/1 var(--mono);letter-spacing:.2em;opacity:.65}
.btn.shold .hfill{position:absolute;inset:0;background:linear-gradient(90deg,rgba(191,233,255,.12),rgba(191,233,255,.45));transform:scaleX(0);transform-origin:left center;transition:transform .2s ease-out;pointer-events:none}
.btn.shold.holding .hfill{transform:scaleX(1);transition:transform 2s linear}
.btn.shold.held .hfill{transform:scaleX(1);transition:none}
.btn.shold.holding,.btn.shold.held{box-shadow:0 0 18px rgba(191,233,255,.45),inset 0 0 0 1px #bfe9ff}
.btn.shold.is-on{color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)}
.btn.shold.is-on .hfill{background:linear-gradient(90deg,rgba(34,225,255,.15),rgba(34,225,255,.55))}
.ssheet .holdates{margin-top:6px}
.usecard .urow{display:grid;grid-template-columns:1fr 70px 38px;gap:8px;padding:7px 0;border-bottom:1px solid rgba(34,225,255,.08);font-size:.84rem;align-items:center}
.usecard .urow span:nth-child(n+2){text-align:right;color:var(--mut);font-size:.76rem}
.usecard .urow.uh{font:600 .6rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.usecard .urow.unused span:first-child{color:var(--mut)}
.usecard .uauto,.usecard .uflag{font-style:normal;font:600 .54rem/1 var(--mono);letter-spacing:.1em;padding:2px 4px;margin-left:4px;vertical-align:middle}
.usecard .uauto{color:var(--acc);box-shadow:inset 0 0 0 1px var(--line)} .usecard .uflag{color:var(--warn);box-shadow:inset 0 0 0 1px rgba(255,176,32,.5)}
.seg.presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.seg.presets button{min-width:0;font-size:.8rem;line-height:1.2;padding:9px 2px}
.agile .row.rb > :first-child{white-space:nowrap;margin-right:12px}
.agile .row.cmp > :first-child{flex:1 1 auto}
.agile .row.cmp > :last-child{white-space:nowrap}
.aglog .row{justify-content:flex-start;gap:12px;text-align:left} .aglog .row > :first-child{flex:0 0 auto;color:var(--mut);font-family:var(--mono);font-size:.74rem}
h2 .h2sub{margin-left:8px;font-size:.62rem;letter-spacing:.14em;color:var(--mut);font-weight:500;text-transform:lowercase}

/* b26: header refresh stages (UPLINK… / WAKING CORE… / SYNCING TELEMETRY… / LINK ESTABLISHED / SIGNAL LOST / NO SIGNAL) */
#updated.lk{font-size:.74rem;letter-spacing:.12em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:62vw;position:relative;padding-bottom:2px}
#updated.lk-busy{color:var(--acc);animation:lkpulse 1.6s ease-in-out infinite}
#updated.lk-busy::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:30%;background:linear-gradient(90deg,transparent,var(--acc),transparent);animation:lkscan 1.8s linear infinite}
#updated.lk-ok{color:var(--ok);animation:lkflash .7s ease-out 1}
#updated.lk-lost{color:var(--warn);animation:lkpulse 1.2s ease-in-out infinite}
#updated.lk-nosig{color:var(--warn);cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
@keyframes lkpulse{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes lkscan{0%{left:-30%}100%{left:100%}}
@keyframes lkflash{0%{opacity:.2;text-shadow:0 0 10px var(--ok)}40%{opacity:1;text-shadow:0 0 8px var(--ok)}100%{text-shadow:none}}
#updated.lk-est{color:var(--ok);opacity:.85}
#updated.lk-last,#updated.lk-dark{color:var(--mut)}
#updated.lk-dark{letter-spacing:.06em}
@media (prefers-reduced-motion: reduce){#updated.lk{animation:none}#updated.lk::after{display:none}}
/* ---------- b27: Stasis power-down / jack-in overlay (transform/opacity only; never takes pointer events) ---------- */
.sfx{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden}
.sfx .sfx-snap{position:absolute;left:0;top:0;width:100%;height:100%;will-change:opacity}
.sfx .sfx-r,.sfx .sfx-c{mix-blend-mode:screen;opacity:0;will-change:transform,opacity}
.sfx-scan{position:absolute;left:0;right:0;top:0;height:10%;opacity:0;will-change:transform,opacity;
  background:linear-gradient(180deg,rgba(255,63,210,0),rgba(255,63,210,.18) 60%,rgba(230,250,255,.9) 96%,rgba(255,63,210,0));box-shadow:0 2px 14px rgba(255,63,210,.5)}
.sfx-up .sfx-scan{background:linear-gradient(0deg,rgba(61,255,154,0),rgba(61,255,154,.18) 60%,rgba(230,255,245,.9) 96%,rgba(61,255,154,0));box-shadow:0 -2px 14px rgba(61,255,154,.5)}
.sfx-txt{position:absolute;left:0;right:0;top:44%;text-align:center;font:700 1.15rem/1 var(--mono);letter-spacing:.34em;color:#e6f6ff;
  text-shadow:0 0 10px rgba(191,233,255,.7),2px 0 rgba(255,32,80,.55),-2px 0 rgba(32,240,255,.55)}
.sfx-txt span{opacity:0}
.sfx-up .sfx-txt{color:#dfffee;text-shadow:0 0 12px rgba(61,255,154,.8),2px 0 rgba(255,32,80,.45),-2px 0 rgba(32,240,255,.45)}
.sfx-moon{position:absolute;right:12%;top:10%;width:46px;height:46px}
/* ---------- b27: DC rapid charging layer ---------- */
.carbox canvas.rfx{position:absolute;left:0;top:0;z-index:4;pointer-events:none;transition:opacity .4s ease}
.rhud{position:absolute;inset:0;z-index:5;pointer-events:none;font-family:var(--mono);transition:opacity .4s ease;--rp:1.2s}
.rfx-dim canvas.rfx{opacity:.35} .rfx-dim .rhud{opacity:.5}
.rh-ban{position:absolute;left:50%;top:22px;transform:translateX(-50%);font-weight:800;font-size:1rem;letter-spacing:.32em;color:#fff;white-space:nowrap;
  text-shadow:0 0 8px #ff3fd2,0 0 18px rgba(255,63,210,.7)}
.rh-ban span{position:relative;display:inline-block}
.rh-ban::before,.rh-ban::after{content:attr(data-t);position:absolute;left:0;top:0;width:100%;letter-spacing:.32em;opacity:.75;will-change:transform}
.rh-ban::before{color:#ff2050;animation:rglitch 2.4s steps(1) infinite}
.rh-ban::after{color:#20f0ff;animation:rglitch 2.4s steps(1) infinite reverse}
.rhud.wild .rh-ban::before,.rhud.wild .rh-ban::after{animation-duration:1.1s}
@keyframes rglitch{0%,100%{transform:translate3d(0,0,0)}8%{transform:translate3d(3px,-1px,0)}12%{transform:translate3d(-2px,1px,0)}16%{transform:translate3d(0,0,0)}
  55%{transform:translate3d(-3px,0,0)}58%{transform:translate3d(2px,1px,0)}61%{transform:translate3d(0,0,0)}}
.rh-kw,.rh-soc{position:absolute;bottom:30px;display:grid;line-height:1}
.rh-kw{left:10px} .rh-soc{right:10px;text-align:right}
.rh-kw b{font-size:2.6rem;font-weight:800;color:#f3fbff;text-shadow:0 0 10px rgba(80,230,255,.9),0 0 26px rgba(80,230,255,.55);animation:kwpulse var(--rp) ease-in-out infinite;transform-origin:left bottom;will-change:transform,opacity}
.rh-soc b{font-size:1.6rem;font-weight:800;color:#dfffee;text-shadow:0 0 10px rgba(61,255,154,.8)}
.rh-kw small,.rh-soc small{font-size:.7rem;letter-spacing:.2em;color:var(--acc)}
.rh-kw em,.rh-soc em{font-style:normal;font-size:.55rem;letter-spacing:.24em;color:var(--mut);margin-top:3px}
.rh-kw{grid-template-columns:auto auto;align-items:end;column-gap:4px} .rh-kw em{grid-column:1 / span 2}
.rh-soc{grid-template-columns:auto auto;align-items:end;column-gap:2px;justify-content:end} .rh-soc em{grid-column:1 / span 2}
@keyframes kwpulse{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.045);opacity:1}}
.rhud.calm .rh-kw b{animation-duration:2.2s}
.rfx-done .rh-ban{color:#dfffee;text-shadow:0 0 10px rgba(61,255,154,.8)} .rfx-done .rh-ban::before,.rfx-done .rh-ban::after{display:none}
.rfx-done .rhud{animation:rdone 2.5s ease-in forwards} @keyframes rdone{0%,70%{opacity:1}100%{opacity:0}}
.rfx-done .rh-kw b{animation:none}
@media (prefers-reduced-motion: reduce){ .rh-ban::before,.rh-ban::after,.rh-kw b{animation:none} .rfx-done .rhud{animation:none} }
/* b27: charge status headline + plain sub-line */
.cstatus{display:flex;flex-direction:column;gap:2px}
.cstatus .cs-head{font:700 .9rem/1.2 var(--mono);letter-spacing:.16em;color:var(--acc);text-shadow:0 0 6px rgba(34,225,255,.45)}
.cstatus .cs-sub{font-size:.82rem;color:var(--mut)}
.cstatus.cs-full .cs-head{color:#3dff9a;text-shadow:0 0 6px rgba(61,255,154,.4)}
.cstatus.cs-fault .cs-head{color:#ff4d6d;text-shadow:0 0 6px rgba(255,77,109,.5)}
.cstatus.cs-rapid .cs-head,.cstatus.cs-override .cs-head{color:var(--mag,#ff3fd2);text-shadow:0 0 7px rgba(255,63,210,.55)}
.cstatus.cs-unplugged .cs-head,.cstatus.cs-idle .cs-head,.cstatus.cs-public .cs-head{color:#9fb6c4;text-shadow:none}
.cstatus.cs-dark .cs-head{color:#7d8a99;text-shadow:none;letter-spacing:.2em}
.cstatus.cs-handshake .cs-head{animation:cshs 1.4s steps(2) infinite}
@keyframes cshs{50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.cstatus.cs-handshake .cs-head{animation:none}}
.dsub .cstatus{margin:0}