/* Voltdeer — a home-battery cockpit.
   Apple's restraint (glass, space, springy motion) · Samsung's colour coding (each energy flow owns a hue) ·
   Xiaomi's depth (rich gradient hero, big soft radii). Light + dark share one set of tokens via light-dark(). */
:root{color-scheme:light dark}
:root[data-theme=light]{color-scheme:light}
:root[data-theme=dark]{color-scheme:dark}
:root{
  /* surfaces */
  --paper:light-dark(#f3f0ea,#0a0d13);
  --glass:light-dark(rgba(255,255,255,.72),rgba(22,28,40,.64));
  --card:light-dark(#ffffff,#1a2230);
  --soft:light-dark(rgba(70,45,10,.05),rgba(190,210,255,.07));
  --track:light-dark(rgba(70,45,10,.10),rgba(190,210,255,.12));
  --hair:light-dark(rgba(70,45,10,.08),rgba(190,210,255,.09));
  --hair2:light-dark(rgba(70,45,10,.15),rgba(190,210,255,.16));
  /* text: three tones, all >= 4.5:1 on glass */
  --ink:light-dark(#17130f,#f1f4fa);
  --ink2:light-dark(#4f493f,#b8c1d1);
  --ink3:light-dark(#686156,#92a0b4);
  /* the energy palette: every flow owns a hue */
  --amber:#ff7a1a;--amber2:#ffb340;--coral:#ff4d6a;
  --blue:light-dark(#2f7bff,#5a97ff);--green:light-dark(#1fae5b,#3ad07a);--violet:light-dark(#7357ff,#957fff);
  --warn:#f5a300;--err:light-dark(#ff453a,#ff6259);
  --amber-ink:light-dark(#a8430a,#ffa466);--blue-ink:light-dark(#1b52c4,#9cbfff);--green-ink:light-dark(#157038,#74e6a3);
  --violet-ink:light-dark(#5236d1,#bbadff);--warn-ink:light-dark(#8a5d00,#ffcf5c);--err-ink:light-dark(#b8312a,#ff908a);
  --amber-soft:light-dark(rgba(255,122,26,.13),rgba(255,122,26,.20));
  --blue-soft:light-dark(rgba(47,123,255,.11),rgba(90,151,255,.18));
  --green-soft:light-dark(rgba(31,174,91,.12),rgba(58,208,122,.17));
  --violet-soft:light-dark(rgba(115,87,255,.11),rgba(149,127,255,.19));
  --warn-soft:light-dark(rgba(245,163,0,.16),rgba(245,163,0,.20));
  --err-soft:light-dark(rgba(255,69,58,.12),rgba(255,98,89,.18));
  --amber-win:rgba(255,255,255,.17);
  /* depth */
  --rim:light-dark(rgba(255,255,255,.8),rgba(255,255,255,.08));
  --lift:0 0 0 1px var(--rim),0 1px 2px light-dark(rgba(60,35,5,.05),rgba(0,0,0,.3)),0 22px 44px -26px light-dark(rgba(80,40,5,.38),rgba(0,0,0,.75));
  --press:0 0 0 1px var(--hair2),0 1px 3px light-dark(rgba(60,35,5,.16),rgba(0,0,0,.5));
  /* motion */
  --ease:cubic-bezier(.23,1,.32,1);
  --spring:cubic-bezier(.34,1.45,.64,1);
  /* radii: soft, continuous */
  --r-s:12px;--r-m:24px;--r-l:32px;
  /* ----- type system -----
     sizes  : 12 label/caption · 14 body · 24 value · 40 runtime (hero) · 56 charge (hero)
     weights: 400 text · 600 emphasis. Hierarchy comes from size, weight AND tone (ink / ink2 / ink3). */
  --fs-1:12px;--fs-2:12px;--fs-3:14px;--fs-4:14px;--fs-5:24px;--fs-6:24px;--fs-7:24px;--fs-8:40px;--fs-9:56px;
  --lh-tight:1.08;--lh-snug:1.25;--lh-body:1.45;
  --font-text:"Segoe UI Variable Text","SF Pro Text",-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-display:"Segoe UI Variable Display","SF Pro Display",-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,"Cascadia Mono","SF Mono",Consolas,monospace;
  /* ----- space scale (4px base) ----- */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;
}
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
html{background:var(--paper);-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font:var(--fs-3)/var(--lh-body) var(--font-text);font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden}
[hidden]{display:none!important}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
svg{display:block}
b,u,s,i{font-style:normal;text-decoration:none;font-weight:inherit}
h1,h2,h3{text-wrap:balance}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:8px}
.v b,.fv b,.soc b,.runtime,.stp b,.kpi b,.col b{font-variant-numeric:tabular-nums}

/* ---------- living background ---------- */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bg i{position:absolute;border-radius:50%;will-change:transform;animation:drift 26s ease-in-out infinite alternate}
.bg i:nth-child(1){width:60vmax;height:60vmax;left:-20vmax;top:-24vmax;background:radial-gradient(circle,light-dark(rgba(255,160,100,.55),rgba(60,120,255,.22)) 0,transparent 68%)}
.bg i:nth-child(2){width:52vmax;height:52vmax;right:-18vmax;top:12vh;background:radial-gradient(circle,light-dark(rgba(110,160,255,.42),rgba(110,80,255,.20)) 0,transparent 68%);animation-duration:32s;animation-delay:-8s}
.bg i:nth-child(3){width:56vmax;height:56vmax;left:6vw;bottom:-30vmax;background:radial-gradient(circle,light-dark(rgba(190,150,255,.42),rgba(20,184,166,.14)) 0,transparent 68%);animation-duration:38s;animation-delay:-14s}

.app{max-width:1120px;margin:0 auto;padding:0 20px calc(104px + env(safe-area-inset-bottom))}

/* ---------- header + navigation ---------- */
.hdr{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(16px + env(safe-area-inset-top)) 0 16px;animation:fade .6s var(--ease) backwards}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.mark{width:36px;height:36px;flex:none;filter:drop-shadow(0 6px 8px rgba(255,90,30,.28))}
.bt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.bt b{font-size:var(--fs-4);font-weight:600;letter-spacing:-.01em}
.sn{font:11px/1.3 var(--font-mono);letter-spacing:-.04em;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.status{display:flex;align-items:center;gap:4px}
.pill{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:99px;background:var(--glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--lift);font-size:var(--fs-2);font-weight:600;white-space:nowrap;margin-right:4px}
.pill b{width:8px;height:8px;border-radius:50%;background:var(--ink3)}
.pill.live b{background:var(--green)}
.pill.stale b{background:var(--warn)}.pill.bad b{background:var(--err)}
.ibtn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;transition:background .2s,transform .25s var(--spring)}
.ibtn svg{width:20px;height:20px;fill:none;stroke:var(--ink2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s,transform .5s var(--spring)}
.ibtn:hover{background:var(--soft)}.ibtn:hover svg{stroke:var(--ink)}
.ibtn:active{transform:scale(.9)}
#theme svg{display:none;color:var(--ink2)}
#theme[data-mode=auto] .i-auto,#theme[data-mode=light] .i-light,#theme[data-mode=dark] .i-dark{display:block;animation:spinin .5s var(--spring)}
#theme .i-auto path:last-child{fill:var(--ink2)}

/* mobile: a floating glass tab bar */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;
  padding:6px 12px calc(6px + env(safe-area-inset-bottom));border-radius:24px 24px 0 0;background:light-dark(rgba(255,255,255,.94),rgba(20,26,38,.94));-webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);
  box-shadow:var(--lift),0 24px 40px -18px rgba(40,20,0,.35);animation:dock .7s var(--spring) .15s both}
.tab{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border-radius:22px;color:var(--ink3);font-size:var(--fs-1);font-weight:600;transition:color .2s,background .3s var(--ease),transform .25s var(--spring)}
.tab svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--spring)}
.tab[aria-selected=true]{color:var(--amber-ink);background:var(--amber-soft)}
.tab[aria-selected=true] svg{transform:translateY(-1px) scale(1.12);stroke-width:2}
.tab:active{transform:scale(.94)}

@media (min-width:860px){
  .app{padding-bottom:48px}
  .hdr{display:grid;grid-template-columns:1fr auto 1fr;padding-top:20px;padding-bottom:20px}
  .status{justify-content:flex-end}
  .tabs{position:static;display:flex;gap:4px;padding:4px;border-radius:16px;box-shadow:var(--lift);animation:none}
  .tab{flex-direction:row;gap:8px;padding:0 16px;height:40px;border-radius:12px;font-size:var(--fs-3)}
  .tab svg{width:18px;height:18px}
  .tab:hover:not([aria-selected=true]){color:var(--ink);background:var(--soft)}
  .tab[aria-selected=true]{background:var(--ink);color:var(--paper)}
}

.alerts{display:grid;gap:8px;margin-bottom:16px}
.alerts:empty{display:none}
.al{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-radius:var(--r-s);font-size:var(--fs-3);background:var(--warn-soft);color:var(--ink);box-shadow:inset 3px 0 0 var(--warn);animation:rise .4s var(--spring) both}
.al.err{background:var(--err-soft);box-shadow:inset 3px 0 0 var(--err)}

/* ---------- panels & glass cards ---------- */
.panel{display:none;grid-template-columns:repeat(12,1fr);gap:16px;align-items:stretch}
.panel.on{display:grid}
.card{grid-column:1/-1;position:relative;isolation:isolate;border-radius:var(--r-m);padding:20px;min-width:0}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;background:var(--glass);
  -webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);box-shadow:var(--lift)}
.panel.on>.card{animation:rise .7s var(--spring) backwards}  /* backwards, not both: a lingering transform would trap the fixed Apply bar inside the card */
.panel.on>.card:nth-child(2){animation-delay:.07s}.panel.on>.card:nth-child(3){animation-delay:.14s}
.panel.on>.card:nth-child(4){animation-delay:.21s}.panel.on>.card:nth-child(5){animation-delay:.28s}
.ch{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;min-height:28px;flex-wrap:wrap}
.ch.sub{margin:24px 0 8px}
.ch h2{font-size:var(--fs-3);font-weight:600;letter-spacing:-.005em}
.unit-note{font-size:var(--fs-2);color:var(--ink3)}
.note{color:var(--ink3);font-size:var(--fs-2);margin-top:12px}.note:empty{display:none}
.chip{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px;border-radius:99px;background:var(--soft);color:var(--ink2);font-size:var(--fs-2);font-weight:600;white-space:nowrap}
.chip.ghost{background:transparent;box-shadow:inset 0 0 0 1px var(--hair2);color:var(--ink3);font-weight:400}
.chip.ok{background:var(--green-soft);color:var(--green-ink)}.chip.warn{background:var(--warn-soft);color:var(--warn-ink)}
.chip.err{background:var(--err-soft);color:var(--err-ink)}.chip.acc{background:var(--amber-soft);color:var(--amber-ink)}
.chip.blue{background:var(--blue-soft);color:var(--blue-ink)}

@media (min-width:860px){
  .p-overview .hero{grid-column:span 7}.p-overview .flowc{grid-column:span 5}
  .p-grid .card{grid-column:span 6}
  .p-battery #ctl-sec{grid-column:span 7}.p-battery .card:nth-child(2){grid-column:span 5}
  .card{padding:24px}
}

/* ---------- HERO: a dark, glowing instrument ---------- */
.hero{--ink:#fff;--ink2:rgba(255,255,255,.80);--ink3:rgba(255,255,255,.66);--track:rgba(255,255,255,.12);--soft:rgba(255,255,255,.10);--hair2:rgba(255,255,255,.2);
  --amber-ink:#ffbd8a;--green-ink:#8ee8ae;--err-ink:#ffa099;
  display:grid;grid-template-columns:200px 1fr;gap:32px;align-items:center;padding:32px;overflow:hidden;color:#fff;border-radius:var(--r-l)}
.hero::before{background:linear-gradient(150deg,light-dark(#2b1a12,#14203a) 0%,light-dark(#170f0d,#0b1222) 48%,light-dark(#1b1030,#1c1440) 100%);-webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 30px 60px -30px rgba(255,100,20,.55),0 2px 4px rgba(0,0,0,.3)}
.hero>*{position:relative;z-index:1}
.orbs{position:absolute!important;inset:0;z-index:0!important;transition:transform .8s var(--ease);transform:translate3d(var(--px,0),var(--py,0),0)}
.orbs i{position:absolute;border-radius:50%;will-change:transform;opacity:.85}
.o1{width:380px;height:380px;left:-120px;top:-140px;background:radial-gradient(circle,#ff7a1a 0,transparent 66%);animation:float1 16s ease-in-out infinite alternate}
.o2{width:360px;height:360px;right:-130px;bottom:-150px;background:radial-gradient(circle,#7357ff 0,transparent 66%);animation:float2 20s ease-in-out infinite alternate}
.o3{width:240px;height:240px;right:14%;top:-110px;background:radial-gradient(circle,#ff3d6e 0,transparent 66%);opacity:.45;animation:float1 24s ease-in-out infinite alternate-reverse}
.ringbox{position:relative;width:200px;height:200px}
.ringbox svg{width:100%;height:100%;overflow:visible}
.r-track,.r-win,.r-fill,.r-glow{fill:none;stroke-width:12}
.r-track{stroke:var(--track)}
.r-win{stroke:var(--amber-win);stroke-dasharray:0 100;transition:stroke-dasharray .8s var(--ease),stroke-dashoffset .8s var(--ease)}
.r-fill{stroke:url(#gRing);stroke-linecap:round;stroke-dasharray:0 100;transition:stroke-dasharray 1.4s var(--spring)}
.r-glow{stroke:url(#gRing);stroke-width:21;stroke-linecap:round;stroke-dasharray:0 100;opacity:.3;transition:stroke-dasharray 1.4s var(--spring);animation:breathe 3.4s ease-in-out infinite}
.r-fill.low,.r-glow.low{stroke:#ff453a}.r-fill.mid,.r-glow.mid{stroke:#ffb340}
.r-notch{stroke:#fff;stroke-width:2.5;stroke-linecap:round;opacity:.9}
.r-dot{fill:#fff;filter:drop-shadow(0 0 6px rgba(255,255,255,.9))}
#r-dotg{transform-origin:100px 100px;transform:rotate(-90deg);transition:transform 1.4s var(--spring),opacity .4s}
.rc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.soc{display:flex;align-items:baseline;gap:4px;line-height:1}
.soc b{font-size:var(--fs-9);font-weight:600;letter-spacing:-.05em}
.soc i{font-size:var(--fs-5);color:var(--ink3);font-weight:400}
.kwh{font-size:var(--fs-2);color:var(--ink3);margin-top:8px}
.eyebrow{font-size:var(--fs-2);color:var(--ink3);font-weight:400}
.runtime{font-size:var(--fs-8);font-weight:600;letter-spacing:-.04em;line-height:var(--lh-tight);margin-top:4px;text-wrap:balance;
  color:#fff}
.runtime.dim{font-size:var(--fs-5)}
.rsub{font-size:var(--fs-3);color:var(--ink2);margin-top:8px;overflow:hidden;text-overflow:ellipsis}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.hero .chip{background:rgba(255,255,255,.12);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hero .chip.acc{background:rgba(255,138,61,.26);color:#ffd0ad}.hero .chip.ok{background:rgba(52,199,110,.26);color:#a6f0c0}
.hero .chip.ghost{background:transparent;color:rgba(255,255,255,.72)}
.legend-r{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:var(--fs-2);color:var(--ink3)}
.sw{width:20px;height:8px;border-radius:4px;background:var(--amber-win);display:inline-block}
@media (max-width:640px){
  .hero{grid-template-columns:1fr;justify-items:center;text-align:center;gap:24px;padding:28px 20px}
  .chips,.legend-r{justify-content:center}
  .rt{width:100%}
}

/* ---------- energy flow: every node owns a colour ---------- */
.flow{display:flex;flex-direction:column}
.fnode{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:4px 0}
.fic{position:relative;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:#fff;box-shadow:0 10px 18px -10px var(--ic)}
.fic.blue{--ic:#2f7bff;background:linear-gradient(145deg,#79b0ff,#2f7bff)}
.fic.amber{--ic:#ff6a1a;background:linear-gradient(145deg,#ffc247,#ff6a1a)}
.fic.violet{--ic:#7357ff;background:linear-gradient(145deg,#b3a0ff,#7357ff)}
.fic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fnode.live .fic::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 2px var(--ic);animation:pulseT 2s ease-out infinite}
.ftx{min-width:0}.ftx b{display:block;font-size:var(--fs-3);font-weight:600}
.ftx span{display:block;font-size:var(--fs-2);color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fv{display:flex;align-items:baseline;gap:4px}
.fv b{font-size:var(--fs-5);font-weight:600;letter-spacing:-.03em}.fv i{font-size:var(--fs-2);color:var(--ink3)}
.wire{width:3px;height:28px;margin:4px 0 4px 20px;background:var(--track);border-radius:3px;position:relative;overflow:hidden}
.wire::after{content:"";position:absolute;left:0;right:0;top:-14px;height:calc(100% + 14px);opacity:0;transition:opacity .4s;
  background:repeating-linear-gradient(180deg,var(--wc,var(--amber)) 0 6px,transparent 6px 14px)}
.wire.on::after{opacity:1;animation:runY .8s linear infinite}
.wire.rev::after{animation-direction:reverse}
.wire.g{--wc:var(--blue)}

/* ---------- colour-coded tiles (One UI style) ---------- */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.tile{--t:var(--green);--t2:#79e5a6;--ts:var(--green-soft);position:relative;overflow:hidden;display:flex;flex-direction:column;gap:4px;min-width:0;
  padding:16px;border-radius:20px;background:var(--ts);transition:transform .35s var(--spring)}
.tile.amber{--t:var(--amber);--t2:var(--amber2);--ts:var(--amber-soft)}
.tile.blue{--t:var(--blue);--t2:#79b0ff;--ts:var(--blue-soft)}
.tile.violet{--t:var(--violet);--t2:#b3a0ff;--ts:var(--violet-soft)}
.tile::before{content:"";position:absolute;right:-28px;top:-28px;width:100px;height:100px;border-radius:50%;background:radial-gradient(circle,var(--t),transparent 70%);opacity:.20}
.tile:hover{transform:translateY(-3px)}.tile:active{transform:scale(.97)}
.tic{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;margin-bottom:8px;color:#fff;background:linear-gradient(145deg,var(--t2),var(--t));box-shadow:0 8px 14px -8px var(--t)}
.tic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tile .mbar i{background:var(--t)}
.tile .mbar{background:light-dark(rgba(255,255,255,.7),rgba(0,0,0,.25))}

/* ---------- metrics ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr)}
.kpi{padding:0 16px;border-left:1px solid var(--hair);display:flex;flex-direction:column;gap:4px;min-width:0}
.kpi:first-child{padding-left:0;border-left:0}
.k{font-size:var(--fs-2);color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.v,.cov-h b,.nums,.rsub,.stp b{white-space:nowrap}
.v{display:flex;align-items:baseline;gap:4px}
.v b{font-size:var(--fs-5);font-weight:600;letter-spacing:-.03em;line-height:1.1}
.v i{font-size:var(--fs-2);color:var(--ink3)}
.na{color:var(--ink3)}
.mbar{height:4px;border-radius:2px;background:var(--track);overflow:hidden;margin-top:8px}
.mbar i{display:block;height:100%;width:0;border-radius:2px;background:var(--ink2);transition:width 1.2s var(--spring)}
.cover{margin-top:24px;padding-top:20px;border-top:1px solid var(--hair)}
.cov-h{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--fs-3);color:var(--ink2);margin-bottom:12px;gap:12px}
.cov-h b{font-size:var(--fs-5);font-weight:600;color:var(--ink);letter-spacing:-.03em;flex:none}
.cov-h span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cov-bar{height:8px;border-radius:4px;background:var(--track);overflow:hidden}
.cov-bar i{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,var(--amber2),var(--amber),var(--coral));transition:width 1.4s var(--spring)}
.meta{font-size:var(--fs-2);color:var(--ink3);margin-top:16px}.meta b{color:var(--ink2);font-weight:600}
@media (max-width:720px){
  .tiles{grid-template-columns:1fr 1fr}
  .kpis{grid-template-columns:1fr 1fr;gap:24px 0}
  .kpi{padding:0 16px 0 0;border-left:0}
  .kpi:nth-child(2n){padding-left:16px;border-left:1px solid var(--hair)}
}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);margin-top:24px}
.col{padding:0 16px;border-left:1px solid var(--hair);display:flex;flex-direction:column;gap:4px;min-width:0}
.col:first-child{padding-left:0;border-left:0}
.cols3.gap{margin-top:16px}
.cols3.second{grid-template-columns:1fr;margin-top:20px;padding-top:20px;border-top:1px solid var(--hair)}
.cols3.second .col{padding-left:0;border-left:0}

/* ---------- system care ---------- */
.care-h{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.shield{width:56px;height:56px;flex:none}
.shield svg{width:100%;height:100%;overflow:visible}
.sh-bg{fill:var(--green-soft);stroke:var(--green);stroke-width:2.5;stroke-linejoin:round;transition:fill .4s,stroke .4s}
.sh-ck{fill:none;stroke:var(--green);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;transition:stroke .4s}
.care.ok .sh-ck{animation:draw .9s var(--ease) .3s forwards}
.care.warn .sh-bg{fill:var(--warn-soft);stroke:var(--warn)}.care.warn .sh-ck{stroke:var(--warn);stroke-dashoffset:0}
.care.err .sh-bg{fill:var(--err-soft);stroke:var(--err)}.care.err .sh-ck{stroke:var(--err);stroke-dashoffset:0}
.care-t b{white-space:nowrap;display:block;font-size:var(--fs-5);font-weight:600;letter-spacing:-.03em;line-height:1.15}
.care-t span{font-size:var(--fs-3);color:var(--ink3)}
.care-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.crw{display:flex;gap:12px;align-items:center;padding:12px 16px;border-radius:var(--r-s);background:var(--soft);min-width:0;animation:rise .5s var(--spring) both}
.cdot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--green);box-shadow:0 0 0 4px var(--green-soft)}
.cdot.warn{background:var(--warn);box-shadow:0 0 0 4px var(--warn-soft)}.cdot.err{background:var(--err);box-shadow:0 0 0 4px var(--err-soft)}
.cdot.info{background:var(--blue);box-shadow:0 0 0 4px var(--blue-soft)}
.ctx{min-width:0}.ctx b{display:block;font-size:var(--fs-3);font-weight:600}
.ctx span{display:block;font-size:var(--fs-2);color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- grid tab ---------- */
.gstate{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.gstate b{font-size:var(--fs-5);font-weight:600;letter-spacing:-.03em}
.led{width:12px;height:12px;border-radius:50%;background:var(--ink3);flex:none}
.led.ok{background:var(--green);box-shadow:0 0 0 4px var(--green-soft)}.led.err{background:var(--err);box-shadow:0 0 0 4px var(--err-soft)}
.vscale{margin-top:40px}
.vtrack{position:relative;height:12px;border-radius:8px;background:var(--track)}
.vband{position:absolute;top:0;bottom:0;left:41.11%;width:41.11%;border-radius:8px;background:linear-gradient(90deg,var(--green-soft),var(--green-soft))}
.vmark{position:absolute;top:-4px;height:20px;width:6px;margin-left:-3px;border-radius:3px;background:linear-gradient(var(--blue),var(--violet));left:0;opacity:0;transition:left 1.2s var(--spring),opacity .3s;box-shadow:0 4px 10px -2px var(--blue)}
.vmark.on{opacity:1}
.vmark>span{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);font-size:var(--fs-2);font-weight:600;padding:4px 8px;border-radius:8px;white-space:nowrap}
.vmark[data-edge="l"]>span{left:-3px;transform:none}
.vmark[data-edge="r"]>span{left:auto;right:-3px;transform:none}
.vlab{display:flex;justify-content:space-between;font-size:var(--fs-2);color:var(--ink3);margin-top:12px}

/* ---------- controls: an Apple-style segmented control with a live thumb ---------- */
.seg{position:relative;display:inline-flex;background:var(--soft);border-radius:var(--r-s);padding:4px;gap:0}
.seg .thumb{position:absolute;top:4px;bottom:4px;left:0;width:0;border-radius:8px;background:var(--card);box-shadow:var(--press);transition:transform .45s var(--spring),width .45s var(--spring);z-index:0}
.seg button{position:relative;z-index:1;height:32px;padding:0 12px;border-radius:8px;font-size:var(--fs-2);font-weight:600;color:var(--ink3);transition:color .2s}
.seg button:hover:not(.on):not(:disabled){color:var(--ink)}
.seg button.on{color:var(--ink)}
.seg.two{display:grid;grid-template-columns:1fr 1fr}
.seg.two button{height:40px;font-size:var(--fs-3)}
.seg button:disabled{opacity:.5;cursor:default}
.window{margin:32px 4px 8px}
.wtrack{position:relative;height:12px;border-radius:8px;background:var(--track)}
.wfill{position:absolute;top:0;bottom:0;left:0;width:0;border-radius:8px;background:linear-gradient(90deg,var(--amber2),var(--amber));opacity:.55;transition:left .7s var(--spring),width .7s var(--spring)}
.wsoc{position:absolute;top:-6px;left:0;width:6px;height:24px;margin-left:-3px;border-radius:3px;background:var(--ink);box-shadow:0 4px 10px -2px rgba(0,0,0,.4);transition:left 1.2s var(--spring)}
.wsoc::after{content:"зараз";position:absolute;bottom:32px;left:50%;transform:translateX(-50%);font-size:var(--fs-2);color:var(--ink3);font-weight:600}
.wlab{position:relative;height:20px;margin-top:12px;font-size:var(--fs-2);color:var(--ink3)}
.wlab span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap;transition:left .7s var(--spring)}
.crow{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;border-top:1px solid var(--hair)}
.crow:first-of-type{margin-top:8px}
.crow.off{opacity:.4;pointer-events:none}
.ct{min-width:0;flex:1}
.ct b{display:block;font-size:var(--fs-3);font-weight:600;white-space:nowrap}
.ct span{display:block;font-size:var(--fs-2);color:var(--ink3);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stp{display:flex;align-items:center;gap:0;background:var(--soft);border-radius:var(--r-s);padding:4px;flex:none}
.stp b{min-width:72px;text-align:center;font-size:var(--fs-3);font-weight:600;transition:color .2s}
.stp b.dirty{color:var(--amber-ink)}
.stp button{width:36px;height:36px;border-radius:8px;font-size:var(--fs-5);font-weight:400;color:var(--ink2);transition:background .15s,transform .25s var(--spring),color .15s}
.stp button:hover:not(:disabled){background:var(--card);color:var(--ink);box-shadow:var(--press)}
.stp button:active:not(:disabled){transform:scale(.88)}
.stp button:disabled{opacity:.35;cursor:default}
.cact{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap}
.cbtn{height:44px;padding:0 20px;border-radius:var(--r-s);background:var(--soft);font-weight:600;font-size:var(--fs-3);transition:background .2s,transform .25s var(--spring),box-shadow .2s}
.cbtn:hover:not(:disabled){background:var(--track)}
.cbtn:active:not(:disabled){transform:scale(.96)}
.cbtn.pri,.btn{background:linear-gradient(180deg,var(--amber2),var(--amber));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 20px -10px var(--amber)}
.cbtn.pri:hover:not(:disabled){background:linear-gradient(180deg,#ffc15c,#ff6d0a)}
.cbtn:disabled{opacity:.4;cursor:default;box-shadow:none}

.cells{margin-top:24px}
.cell-h{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--fs-3);color:var(--ink2);margin-bottom:12px}
.cell-h b{font-size:var(--fs-3);font-weight:600;color:var(--ink)}
.cbar{height:8px;border-radius:4px;background:var(--track);overflow:hidden}
.cbar i{display:block;height:100%;width:0;border-radius:4px;background:var(--green);transition:width 1.2s var(--spring),background .3s}
.cell-f{display:flex;justify-content:space-between;font-size:var(--fs-2);color:var(--ink3);margin-top:8px}
.cell-f b{color:var(--ink2);font-weight:600;font-variant-numeric:tabular-nums}
.sep{height:1px;background:var(--hair);margin:24px 0 20px}
.temps{display:grid;gap:16px}
.trow{display:grid;grid-template-columns:104px 1fr 64px;align-items:center;gap:12px;font-size:var(--fs-3)}
.trow span{color:var(--ink3)}
.trow b{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.tbar{height:6px;border-radius:3px;background:var(--track);overflow:hidden}
.tbar i{display:block;height:100%;width:0;border-radius:3px;transition:width 1.2s var(--spring),background .3s}

/* ---------- history ---------- */
.legend{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.lg{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:99px;box-shadow:inset 0 0 0 1px var(--hair2);font-size:var(--fs-2);font-weight:600;color:var(--ink3);transition:all .2s var(--ease)}
.lg::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c);opacity:.35;transition:opacity .2s,transform .3s var(--spring)}
.lg.on{color:var(--ink);background:var(--soft)}.lg.on::before{opacity:1;transform:scale(1.25)}
.chartw{position:relative;height:220px;padding-left:40px;touch-action:pan-y}
.chartw svg{width:100%;height:100%;overflow:visible}
.chartw.small{height:72px}
.yl{position:absolute;left:0;font-size:var(--fs-2);color:var(--ink3);width:36px;font-variant-numeric:tabular-nums}
.yt{top:0}.ym{transform:translateY(-50%)}.yb{bottom:0}
.xl{display:flex;justify-content:space-between;color:var(--ink3);font-size:var(--fs-2);margin:8px 0 0 40px}
.xhair{position:absolute;top:0;bottom:0;width:1px;background:var(--ink3);opacity:.5;display:none;pointer-events:none}
.ctip{position:absolute;top:-8px;display:none;background:var(--ink);color:var(--paper);font-size:var(--fs-2);padding:8px 12px;border-radius:12px;white-space:nowrap;pointer-events:none;max-width:92%;overflow:hidden;text-overflow:ellipsis}
.reveal{animation:reveal 1.2s var(--ease) both}
.lgd{display:flex;gap:16px;color:var(--ink3);font-size:var(--fs-2)}
.lgd i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px}
.energy{display:grid;gap:16px}
.erow{display:grid;grid-template-columns:88px 1fr;gap:4px 16px;align-items:center}
.erow time{font-size:var(--fs-2);color:var(--ink2);grid-row:span 2;text-transform:capitalize}
.bars{display:grid;gap:4px}
.bar{height:8px;border-radius:4px;min-width:4px;transform-origin:left;animation:bar 1s var(--spring) both}
.bar.chg{background:linear-gradient(90deg,#7ae6a6,var(--green))}.bar.dis{background:linear-gradient(90deg,var(--amber2),var(--amber))}
.nums{font-size:var(--fs-2);color:var(--ink3)}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;background:rgba(6,9,16,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:grid;place-items:center;padding:16px;z-index:60;animation:fade .25s}
.mbox{background:var(--card);border-radius:var(--r-l);padding:24px;width:min(440px,100%);box-shadow:0 40px 90px -24px rgba(0,0,0,.6);animation:pop .4s var(--spring)}
.mbox h3{font-size:var(--fs-5);font-weight:600;letter-spacing:-.03em;margin-bottom:16px}
.mdiff{display:grid;gap:8px}
.mrow{display:flex;justify-content:space-between;gap:12px;padding:12px 16px;background:var(--soft);border-radius:var(--r-s);font-size:var(--fs-3)}
.mrow>span:last-child{display:flex;gap:8px;align-items:center}
.mrow .arrow{color:var(--amber-ink)}
.mstatus{margin-top:16px;font-size:var(--fs-3);color:var(--ink3);min-height:20px}
.mstatus.ok{color:var(--green-ink);font-weight:600}.mstatus.err{color:var(--err-ink);font-weight:600}
.mstatus.wait::before{content:"";display:inline-block;width:12px;height:12px;margin-right:8px;border:2px solid var(--track);border-top-color:var(--amber);border-radius:50%;animation:spin .8s linear infinite;vertical-align:-2px}
.mstatus.ok::before{content:"✓";display:inline-grid;place-items:center;width:20px;height:20px;margin-right:8px;border-radius:50%;background:var(--green-soft);font-size:var(--fs-2);animation:pop .45s var(--spring)}

/* ---------- login ---------- */
.login{position:fixed;inset:0;display:grid;place-items:center;padding:16px}
.login-card{width:min(400px,100%);display:grid;gap:12px;padding:32px 28px;text-align:center;animation:rise .8s var(--spring) both}
.lg-ico{width:56px;height:56px;margin:0 auto 4px;filter:drop-shadow(0 12px 18px rgba(255,90,30,.45))}
.login-card h1{font-size:var(--fs-5);font-weight:600;letter-spacing:-.03em}
.login-card p{color:var(--ink3);font-size:var(--fs-3)}
.login-card input{height:48px;border-radius:var(--r-s);border:0;background:var(--soft);box-shadow:inset 0 0 0 1px var(--hair2);color:var(--ink);padding:0 16px;font:inherit;font-size:16px;outline:none;transition:box-shadow .2s}
.login-card input:focus{box-shadow:inset 0 0 0 2px var(--amber)}
.btn{height:48px;border-radius:var(--r-s);font-weight:600;transition:transform .25s var(--spring)}
.btn:hover{transform:translateY(-1px)}.btn:active{transform:scale(.97)}
.err:not(.card){color:var(--err-ink);font-size:var(--fs-2);min-height:16px}

/* ---------- loading: values shimmer until the first data arrives ---------- */
.app:not(.ready) :is(.v b,.fv b,.soc b,.runtime,.kpi b,.col b){color:transparent!important;-webkit-text-fill-color:transparent!important;border-radius:8px;
  background:linear-gradient(90deg,var(--track) 20%,var(--soft) 50%,var(--track) 80%);background-size:200% 100%;animation:shimmer 1.3s linear infinite}

/* thumb zone: once something changed, Apply / Cancel float above the tab bar */
@media (max-width:859px){
  #ctl-sec.has-changes{margin-bottom:80px;z-index:26}   /* the card is its own layer: lift the whole card, or the next cards paint over the Apply bar */
  #ctl-sec.has-changes .cact{position:fixed;left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:25;margin:0;padding:8px;
    background:var(--glass);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);border-radius:var(--r-m);
    box-shadow:var(--lift),0 20px 34px -14px rgba(60,25,0,.4);animation:rise .45s var(--spring) both}
  #ctl-sec.has-changes .cact .cbtn{flex:1}
  #ctl-sec.has-changes #c-stop{display:none}
}
@media (max-width:480px){
  .crow{flex-direction:column;align-items:stretch;gap:12px}
  .crow .stp{width:100%}.crow .stp b{flex:1}
  .cols3{grid-template-columns:1fr;margin-top:16px}
  .cols3 .col{flex-direction:row;align-items:baseline;justify-content:space-between;gap:12px;padding:12px 0;border-left:0;border-top:1px solid var(--hair)}
  .cols3 .col:first-child{border-top:0}
}
@media (pointer:coarse),(max-width:640px){
  .stp button{width:44px;height:44px}
  .stp b{min-width:60px}
  .seg button{height:40px}
  .seg.two button{height:44px}
  .lg{height:40px}
}

/* ---------- motion ---------- */
@keyframes rise{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
@keyframes dock{from{opacity:0;transform:translateY(40px) scale(.95)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes spinin{from{opacity:0;transform:rotate(-90deg) scale(.5)}to{opacity:1;transform:none}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(31,174,91,.5)}70%,100%{box-shadow:0 0 0 8px rgba(31,174,91,0)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ic) 55%,transparent)}80%,100%{box-shadow:0 0 0 14px transparent}}
@keyframes runY{to{transform:translateY(14px)}}
@keyframes breathe{0%,100%{opacity:.18}50%{opacity:.42}}
@keyframes drift{to{transform:translate3d(6vw,4vh,0) scale(1.12)}}
@keyframes float1{to{transform:translate3d(70px,50px,0) scale(1.2)}}
@keyframes float2{to{transform:translate3d(-80px,-40px,0) scale(1.15)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes reveal{from{clip-path:inset(-10% 100% -10% 0)}to{clip-path:inset(-10% 0 -10% 0)}}
@keyframes bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s}
@media (hover:none){
  .bg i,.orbs i{animation:none;will-change:auto}
  .orbs{transition:none;transform:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .sh-ck{stroke-dashoffset:0}
}

/* exact watt-hours under every energy figure */
.wh{font-size:var(--fs-2);color:var(--ink3);font-variant-numeric:tabular-nums;letter-spacing:.005em}
.tile .wh{margin-top:-4px}

/* ---------- charging: the hero turns green and flows ---------- */
.hero.charging .o1{background:radial-gradient(circle,#22c55e 0,transparent 66%)}.hero.charging .o3{background:radial-gradient(circle,#14b8a6 0,transparent 66%)}
.hero.charging .r-fill,.hero.charging .r-glow{stroke:url(#gRingCh)}
.hero.charging::before{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 30px 60px -30px rgba(34,197,94,.55),0 2px 4px rgba(0,0,0,.3)}
.r-mask{fill:none;stroke:#fff;stroke-width:12;stroke-linecap:round;stroke-dasharray:0 100;transition:stroke-dasharray 1.4s var(--spring)}
.r-sheen{fill:none;stroke:#fff;stroke-width:12;stroke-linecap:round;stroke-dasharray:7 93;opacity:0;transition:opacity .6s}
.hero.charging .r-sheen{opacity:.6;animation:sheen 2.4s linear infinite}
.ringbox .bolt{position:absolute;top:32px;left:calc(50% - 11px);width:22px;height:22px;fill:#ffd24a;stroke:none;opacity:0;transform:scale(.4);
  transition:opacity .4s,transform .6s var(--spring);filter:drop-shadow(0 0 8px rgba(255,210,74,.85))}
.hero.charging .bolt{opacity:1;transform:none;animation:zap 1.6s ease-in-out infinite}
@keyframes sheen{from{stroke-dashoffset:0}to{stroke-dashoffset:-100}}
@keyframes zap{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}

/* ---------- events: toasts + log ---------- */
.evic{--c:var(--green);--c2:#7ae6a6;width:40px;height:40px;border-radius:14px;display:grid;place-items:center;flex:none;color:#fff;
  background:linear-gradient(145deg,var(--c2),var(--c));box-shadow:0 8px 14px -8px var(--c)}
.evic.amber{--c:var(--amber);--c2:var(--amber2)}.evic.blue{--c:var(--blue);--c2:#79b0ff}
.evic.warn{--c:var(--warn);--c2:#ffd36b}.evic.err{--c:var(--err);--c2:#ff9a93}
.evic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.toasts{position:fixed;left:12px;right:12px;top:calc(12px + env(safe-area-inset-top));z-index:80;display:grid;gap:8px;justify-items:center;pointer-events:none}
.toast{pointer-events:auto;display:flex;gap:12px;align-items:center;width:min(420px,100%);padding:12px 16px 12px 12px;border-radius:20px;cursor:pointer;
  background:light-dark(rgba(255,255,255,.93),rgba(26,34,48,.93));-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  box-shadow:var(--lift),0 24px 44px -18px rgba(40,20,0,.5);animation:toastin .6s var(--spring) both}
.toast.out{animation:toastout .3s var(--ease) forwards}
.toast .ftx span{white-space:normal}
@keyframes toastin{from{opacity:0;transform:translateY(-28px) scale(.92)}to{opacity:1;transform:none}}
@keyframes toastout{to{opacity:0;transform:translateY(-18px) scale(.96)}}
.evlist{display:grid;gap:4px}
.evr{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;padding:8px 0;border-top:1px solid var(--hair)}
.evr:first-child{border-top:0}
.evr.fresh{animation:rise .6s var(--spring) both}
.evr b{display:block;font-size:var(--fs-3);font-weight:600}
.evr span{display:block;font-size:var(--fs-2);color:var(--ink3)}
.evr time{font-size:var(--fs-2);color:var(--ink3);font-variant-numeric:tabular-nums;white-space:nowrap}
.evempty{color:var(--ink3);font-size:var(--fs-3);padding:8px 0;text-wrap:pretty}

/* ---------- several batteries: switcher, rail, sheet ---------- */
.stsw{display:flex;align-items:center;gap:8px;min-height:44px;padding:4px 8px 4px 8px;border-radius:14px;text-align:left;min-width:0;transition:background .2s,transform .25s var(--spring)}
.stsw:hover{background:var(--soft)}.stsw:active{transform:scale(.97)}
.stsw-t{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.stsw-t b{font-family:var(--font-display);font-size:var(--fs-4);font-weight:600;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}
.stsw .chev{width:16px;height:16px;fill:none;stroke:var(--ink3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;transition:transform .35s var(--spring)}
.stsw[aria-expanded=true] .chev{transform:rotate(180deg)}
.stsw.single .chev{display:none}
.stdot{width:8px;height:8px;border-radius:50%;background:var(--ink3);flex:none;display:inline-block}
.stdot.ok{background:var(--green)}.stdot.warn{background:var(--warn)}.stdot.err{background:var(--err)}
@media (max-width:420px){.mark{display:none}}
@media (max-width:480px){.pill{padding:0;width:32px;justify-content:center;margin-right:0}#live-t{display:none}}

.railwrap{grid-column:1/-1}
.railwrap .ch{margin-bottom:12px}
.rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 12px;margin:-4px -4px 0;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.sc{position:relative;isolation:isolate;display:flex;align-items:center;gap:12px;text-align:left;padding:12px 16px 12px 12px;border-radius:20px;min-width:0;
  scroll-snap-align:start;flex:0 0 min(272px,82%);transition:transform .35s var(--spring)}
.sc::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);box-shadow:var(--lift);transition:box-shadow .3s}
.sc.on::before{box-shadow:var(--lift),inset 0 0 0 2px var(--amber)}
.sc:hover{transform:translateY(-2px)}.sc:active{transform:scale(.98)}
.sc-t{display:flex;flex-direction:column;min-width:0;flex:1}
.sc-t b{font-size:var(--fs-3);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-t .sn-place{font-size:var(--fs-2);color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-t .sn-state{font-size:var(--fs-2);color:var(--ink2);font-weight:600;margin-top:4px}
.sc[data-mode=charge] .sn-state{color:var(--green-ink)}.sc[data-mode=discharge] .sn-state{color:var(--amber-ink)}.sc[data-mode=off] .sn-state{color:var(--err-ink)}
.sc .stdot{align-self:flex-start;margin-top:4px}
.mr-slot{flex:none;width:56px;height:56px}
.mr{width:56px;height:56px;color:var(--ink)}
.mr-t{fill:none;stroke:var(--track);stroke-width:5}
.mr-f{fill:none;stroke:var(--ink2);stroke-width:5;stroke-linecap:round}
.mr.charge .mr-f{stroke:var(--green)}.mr.discharge .mr-f{stroke:var(--amber)}.mr.off .mr-f{stroke:var(--ink3)}
.mr text{font-size:var(--fs-3);font-weight:600;fill:currentColor;font-variant-numeric:tabular-nums}
@media (min-width:860px){.rail{overflow:visible;flex-wrap:wrap;scroll-snap-type:none;padding-bottom:0}.sc{flex:1 1 260px;max-width:400px}}

.sheet{position:fixed;inset:0;z-index:70;display:grid;align-items:end;justify-items:center}
.sheet-bg{position:absolute;inset:0;background:rgba(6,9,16,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity .3s}
.sheet.open .sheet-bg{opacity:1}
.sheet-box{position:relative;width:min(560px,100%);max-height:88vh;overflow:auto;padding:12px 16px calc(24px + env(safe-area-inset-bottom));border-radius:32px 32px 0 0;
  background:light-dark(rgba(255,255,255,.97),rgba(20,26,38,.97));-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
  box-shadow:0 -20px 60px -20px rgba(0,0,0,.5);transform:translateY(100%);transition:transform .5s var(--spring)}
.sheet.open .sheet-box{transform:none}
.sheet-grab{width:40px;height:4px;border-radius:2px;background:var(--hair2);margin:0 auto 12px}
.sheet-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.sheet-h h3{font-family:var(--font-display);font-size:var(--fs-5);font-weight:600;letter-spacing:-.03em}
.sheet-list{display:grid;gap:8px}
.srow{display:flex;align-items:center;gap:4px}
.srow .sc{flex:1}
.srow.editing{display:block}
.sedit{display:grid;gap:12px;padding:16px;border-radius:20px;background:var(--soft)}
.sedit label{display:grid;gap:4px;font-size:var(--fs-2);color:var(--ink3)}
.sedit input{height:44px;border-radius:var(--r-s);border:0;background:var(--card);box-shadow:inset 0 0 0 1px var(--hair2);color:var(--ink);padding:0 12px;font:inherit;font-size:16px;outline:none}
.sedit input:focus{box-shadow:inset 0 0 0 2px var(--amber)}
.sedit .cact{margin-top:0}
@media (min-width:860px){
  .sheet{align-items:start;padding-top:72px}
  .sheet-box{border-radius:28px;opacity:0;transform:translateY(-16px) scale(.97);transition:transform .45s var(--spring),opacity .25s}
  .sheet.open .sheet-box{opacity:1;transform:none}
  .sheet-grab{display:none}
}
.st-tag{color:var(--ink3);font-weight:400;margin-left:4px}
.m-st{font-size:var(--fs-2);color:var(--ink3);margin:-8px 0 16px}
@keyframes swap{from{opacity:0;transform:translateX(20px) scale(.985)}to{opacity:1;transform:none}}
.panel.swap>.card{animation:swap .55s var(--spring) backwards}

/* compositor-only pulses (transform + opacity): no repaints, no flicker */
.pill.live b,.stdot.ok,.led.ok{position:relative}
.pill.live b::after,.stdot.ok::after,.led.ok::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--green);animation:pingT 2.4s ease-out infinite}
@keyframes pingT{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(2.8);opacity:0}}
@keyframes pulseT{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.55);opacity:0}}
@media (prefers-reduced-motion:reduce){.pill.live b::after,.stdot.ok::after,.led.ok::after,.fnode.live .fic::after{animation:none;opacity:0}}

/* ---------- grid voltage: big number + a live AC waveform ---------- */
.volt .vhero{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:4px}
.vnum{display:flex;align-items:baseline;gap:8px;line-height:1;min-width:0}
.vnum b{font-family:var(--font-display);font-size:var(--fs-9);font-weight:600;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.vnum i{font-size:var(--fs-5);color:var(--ink3)}
.volt .gstate{margin:0 0 8px;gap:8px}
.volt .gstate b{font-size:var(--fs-3);font-weight:600;letter-spacing:0}
.wave{--wc:var(--green);display:block;width:100%;height:96px;margin-top:16px;border-radius:16px;background:var(--soft);overflow:hidden}
.wave.warn{--wc:var(--warn)}.wave.err{--wc:var(--err)}.wave.off{--wc:var(--ink3)}
.wave .wv{animation:wavemove 2.6s linear infinite}
.wave .wv.b{animation-duration:4.4s;animation-direction:reverse}
.wave .amp{transform-origin:0 48px;transform:scaleY(var(--amp,.9));transition:transform 1.4s var(--spring)}
.wave.off .wv{animation-play-state:paused}
@keyframes wavemove{to{transform:translateX(-180px)}}

/* legend colours as classes (the server CSP blocks inline style attributes) */
.lg.amb{--c:var(--amber)}.lg.blu{--c:var(--blue)}
.lgd i.dg{background:var(--green)}.lgd i.da{background:var(--amber)}

/* ---------- very narrow phones (layout patch 2) ---------- */
.meta b{white-space:nowrap}
@media (max-width:360px){
  .kpis{grid-template-columns:1fr;gap:0}
  .kpi,.kpi:nth-child(2n){padding:12px 0;border-left:0;border-top:1px solid var(--hair);display:grid;grid-template-columns:1fr auto;align-items:baseline;column-gap:12px}
  .kpi:first-child{border-top:0;padding-top:0}
  .kpi .k{grid-row:1/3;align-self:center}
  .kpi .v,.kpi .wh{justify-self:end}
  .stsw .sn{display:none}
  .tile .v b{font-size:20px}
}

/* ---------- read-only parameters page ---------- */
.pm-entry{padding:0}
.pm-open{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:56px;padding:0 20px;font-size:var(--fs-3);font-weight:600;border-radius:inherit}
.pm-open svg{width:20px;height:20px;fill:none;stroke:var(--ink3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pm-note{font-size:var(--fs-3);color:var(--ink3);margin-bottom:12px}
.pm-search input,.pm-tools select{width:100%;min-width:0;height:44px;border:0;border-radius:var(--r-s);background:var(--soft);color:var(--ink);padding:0 12px;font:inherit;font-size:var(--fs-3);box-shadow:inset 0 0 0 1px var(--hair2);outline:none}
.pm-search input:focus,.pm-tools select:focus{box-shadow:inset 0 0 0 2px var(--amber)}
.pm-search{margin-bottom:8px}
.pm-tools{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.pm-legend{display:flex;align-items:center;gap:12px;font-size:var(--fs-2);color:var(--ink3);white-space:nowrap;overflow:hidden}
.pm-count{font-size:var(--fs-2);color:var(--ink3);font-variant-numeric:tabular-nums;margin-top:8px}
.pm-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none;margin-right:6px}
.pm-legend .pm-dot{vertical-align:baseline}
.pm-dot.safe{background:var(--green)}.pm-dot.care{background:var(--warn)}.pm-dot.danger{background:var(--err)}
.pm-g{font-size:var(--fs-2);font-weight:600;color:var(--ink3);text-transform:uppercase;letter-spacing:.04em;margin:24px 0 4px}
.pm-row{display:grid;grid-template-columns:8px minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:12px;row-gap:2px;align-items:center;width:100%;text-align:left;padding:12px 0;border-top:1px solid var(--hair)}
.pm-row .pm-dot{grid-row:1/3;margin:0;align-self:center}
.pm-n{grid-column:2;font-size:var(--fs-3);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-o{grid-column:2;grid-row:2;font-size:var(--fs-2);color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-v{grid-column:3;grid-row:1/3;font-size:var(--fs-3);font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink)}
.pm-more{padding:0 0 12px 20px;font-size:var(--fs-2);color:var(--ink2)}
.pm-more p+p{margin-top:4px;color:var(--ink3)}
.pm-empty{padding:24px 0;color:var(--ink3);font-size:var(--fs-3);text-align:center}
@media (max-width:340px){.pm-row{column-gap:8px}.pm-v{font-size:var(--fs-2)}.pm-n{letter-spacing:-.01em}.pm-tools select{padding:0 6px;font-size:var(--fs-2)}}

/* ---------- segmented controls (layout patch 3) ---------- */
.seg button{white-space:nowrap}
@media (max-width:360px){.seg:not(.two) button{padding:0 6px}}

/* rolling digits (odometer): the digit that changes slides in from below/above, the old one slides out; the element is clipped only while it rolls */
.dg{display:inline-block;position:relative}
.dg .nw{display:inline-block}
.dg .od{position:absolute;left:0;top:0}
.rolling{clip-path:inset(-2px -8px)}
@media (prefers-reduced-motion:reduce){.dg .od{display:none}}


/* energy by days: column chart (7 calendar days) */
.esum{display:flex;gap:12px;align-items:baseline;font-size:var(--fs-3);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;min-width:0;overflow:hidden;margin-bottom:12px}
.esum .c{color:var(--green-ink)}.esum .d{color:var(--amber-ink)}.esum .u{font-weight:400;font-size:var(--fs-2);color:var(--ink3)}
.echart{display:grid;grid-template-columns:26px minmax(0,1fr);gap:6px;align-items:start}
.eaxis{position:relative;height:132px;font-size:var(--fs-2);color:var(--ink3);font-variant-numeric:tabular-nums}
.eaxis span{position:absolute;right:0;transform:translateY(-50%);white-space:nowrap;line-height:1}
.eaxis .a0{top:0}.eaxis .a1{top:66px}.eaxis .a2{top:132px}
.ewrap{position:relative;min-width:0}
.egrid{position:absolute;left:0;right:0;height:0;border-top:1px dashed var(--hair)}
.egrid.g0{top:0}.egrid.g1{top:66px}
.ecols{position:relative;display:grid;grid-template-columns:repeat(var(--n,7),minmax(0,1fr));gap:4px;align-items:start}
.ecol{display:grid;grid-template-rows:132px auto;justify-items:center;min-width:0;cursor:pointer;border-radius:10px;outline:none}
.eplot{display:flex;align-items:flex-end;justify-content:center;gap:3px;height:132px;width:100%;border-bottom:1px solid var(--hair2);border-radius:10px 10px 0 0;transition:background .25s}
.ebar{width:min(12px,36%);border-radius:6px 6px 2px 2px;transform-origin:bottom;animation:vbar .9s var(--spring) both;animation-delay:calc(var(--i,0) * 70ms)}
.ebar.chg{--b:linear-gradient(0deg,var(--green),#7ae6a6);background:var(--b);box-shadow:0 8px 18px -8px var(--green)}
.ebar.dis{--b:linear-gradient(0deg,var(--amber),var(--amber2));background:var(--b);box-shadow:0 8px 18px -8px var(--amber)}
.ebar.z{height:2px;border-radius:1px;opacity:.4;box-shadow:none}
.ecol.part .ebar:not(.z){background:repeating-linear-gradient(135deg,rgba(255,255,255,.32) 0 3px,transparent 3px 6px),var(--b)}
.ecol.sel .eplot{background:linear-gradient(0deg,var(--soft),transparent)}
.ecol:focus-visible{box-shadow:0 0 0 2px var(--amber)}
@media (hover:hover){.ecol:hover .eplot{background:linear-gradient(0deg,var(--soft),transparent)}}
.elab{display:grid;justify-items:center;gap:1px;margin-top:8px;font-size:var(--fs-2);color:var(--ink3);min-width:0;font-variant-numeric:tabular-nums}
.elab b{font-weight:600;color:var(--ink2)}
.elab span{font-size:var(--fs-2)}
.ecol.empty .elab{opacity:.45}
.ecol.today .elab b,.ecol.today .elab span{color:var(--amber-ink)}
.ecol.sel .elab b{color:var(--ink)}.ecol.today.sel .elab b{color:var(--amber-ink)}
.edetail{display:grid;gap:10px;margin-top:16px;padding:14px 16px;border-radius:var(--r-s);background:var(--soft);min-width:0}
.eh{display:flex;justify-content:space-between;align-items:baseline;gap:8px;min-width:0}
.eh b{font-size:var(--fs-3);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eh small{font-size:var(--fs-2);color:var(--ink3);white-space:nowrap;flex:none}
.en{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.n{min-width:0}.n b{display:block;font-size:var(--fs-5);font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.n span{display:block;font-size:var(--fs-2);color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.n.c b{color:var(--green-ink)}.n.d b{color:var(--amber-ink)}
.eno{font-size:var(--fs-2);color:var(--ink3)}
@keyframes vbar{from{transform:scaleY(0)}to{transform:scaleY(1)}}
/* ---------- polish 2026-11-07: even grids and one type scale ---------- */
.cact{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px}
.cact .cbtn{width:100%;min-width:0;padding:0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ctl-sec .cact{grid-template-columns:1fr 1fr}
#ctl-sec .cact #c-apply{grid-column:1/-1}
#ctl-sec.has-changes .cact #c-apply{grid-column:auto}
#range{display:flex;width:100%}
#range button{flex:1 1 0;min-width:0;padding:0 4px}
.trow{font-size:var(--fs-2)}.trow b{font-size:var(--fs-3)}
.care-list{gap:8px}.crw{padding:10px 14px}
/* ---------- end of polish 2026-11-07 ---------- */

/* ---------- battery card: gauges and state ---------- */
:root{--ok:var(--green)}
.tbar,.cbar{position:relative;height:8px;border-radius:4px;overflow:visible;background:var(--track)}
.tbar.zoned{background:linear-gradient(90deg,color-mix(in srgb,var(--green) 30%,transparent) 0 var(--z1),color-mix(in srgb,var(--warn) 36%,transparent) var(--z1) var(--z2),color-mix(in srgb,var(--err) 40%,transparent) var(--z2) 100%)}
.cbar{background:linear-gradient(90deg,color-mix(in srgb,var(--green) 30%,transparent) 0 33.3%,color-mix(in srgb,var(--warn) 36%,transparent) 33.3% 66.7%,color-mix(in srgb,var(--err) 40%,transparent) 66.7% 100%)}
.tbar i,.cbar i{position:absolute;top:50%;left:0;width:12px;height:12px;margin:0;border-radius:50%;transform:translate(-50%,-50%);border:2px solid var(--card);box-shadow:0 1px 4px rgba(0,0,0,.35);transition:left 1.2s var(--spring),background .3s}
.cell-h b.ok{color:var(--green-ink)}.cell-h b.warn{color:var(--warn-ink)}.cell-h b.err{color:var(--err-ink)}
.bstat{display:grid;gap:10px;margin-top:20px;padding-top:20px;border-top:1px solid var(--hair)}
.bs{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:var(--fs-3);min-width:0}
.bs span{color:var(--ink3);white-space:nowrap}
.bs b{font-weight:600;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* ---------- end of battery card ---------- */