.kwh-sec{padding:clamp(56px,9vw,120px) 0;background:var(--paper)}
.kwh-sec .kwh-head{max-width:760px;margin-bottom:clamp(22px,3vw,34px)}
.kwh-sec .kwh-head .lead{margin-top:14px}

.kwh-static{background:linear-gradient(170deg,#fff,#fbfcfe);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:clamp(16px,2.4vw,26px);overflow:hidden}
.kwh-static svg{width:100%;height:auto;display:block}
.kwh-static-cap{font-size:.82rem;color:var(--ink-3);margin:12px 2px 0;text-align:center}

.js .kwh-live .kwh-static{display:none}

.kwh-wrap{position:relative}
.kwh-live.kwh-wrap{height:420svh}
@media (max-width:640px){.kwh-live.kwh-wrap{height:300svh}}

.kwh-stage{display:none}
.kwh-live .kwh-stage{display:block;position:sticky;top:0;height:100svh;
  display:flex;align-items:center;justify-content:center;padding:calc(var(--nav-h) + 10px) 0 14px}

.kwh-frame{position:relative;width:100%;max-width:960px;margin-inline:auto;
  --p:0;
  background:var(--kwh-sky, linear-gradient(180deg,#eaf2fc,#fff));
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-3);
  overflow:hidden;isolation:isolate}
.kwh-barrow{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:12px clamp(14px,2vw,20px);border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.55);backdrop-filter:blur(6px);position:relative;z-index:4}
.kwh-title{font:600 .74rem/1.2 var(--ff-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.kwh-tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kwh-model{display:inline-flex;align-items:center;gap:.4em;font:600 .68rem/1 var(--ff-mono);letter-spacing:.06em;
  color:var(--eco);background:var(--eco-tint);border-radius:var(--r-pill);padding:.42em .7em}
.kwh-model i{width:7px;height:7px;border-radius:50%;background:var(--eco)}
.kwh-echo{font:600 .68rem/1 var(--ff-mono);color:var(--sun-ink);background:var(--sun-tint);
  border:1px solid #ffe2ad;border-radius:var(--r-pill);padding:.42em .7em;cursor:pointer;transition:.2s;max-width:100%}
.kwh-echo:hover{border-color:var(--sun);box-shadow:0 0 0 3px var(--sun-tint)}
.kwh-echo:focus-visible{outline:3px solid var(--sun);outline-offset:2px}

.kwh-scene{position:relative;width:100%;aspect-ratio:1000/600}
.kwh-svg{position:absolute;inset:0;width:100%;height:100%}
.kwh-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;mix-blend-mode:normal}
.kwh-scene .kwh-phase{position:absolute;left:clamp(12px,2vw,20px);top:clamp(10px,1.6vw,16px);z-index:3;
  font:700 clamp(1rem,2.4vw,1.5rem)/1 var(--ff);letter-spacing:-.02em;color:var(--ink);
  text-shadow:0 1px 0 rgba(255,255,255,.6)}
.kwh-scene .kwh-phase .sub{display:block;font:500 .72rem/1.2 var(--ff-mono);letter-spacing:.04em;color:var(--ink-2);margin-top:5px}

.kwh-now{position:absolute;z-index:3;pointer-events:none;background:rgba(255,255,255,.92);
  border:1px solid var(--line-2);border-radius:12px;padding:8px 11px;box-shadow:var(--sh-1);
  font:600 .72rem/1.25 var(--ff-mono);color:var(--ink);white-space:nowrap;transition:opacity .3s}
.kwh-now b{color:var(--sun-ink)}
.kwh-now .now-sub{display:block;font-weight:500;color:var(--ink-3);letter-spacing:0;font-size:.68rem;margin-top:2px}

.kwh-hud{position:relative;z-index:3;display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;
  padding:10px clamp(14px,2vw,20px) 12px;border-top:1px solid var(--line);
  background:rgba(255,255,255,.62);backdrop-filter:blur(6px);min-height:52px}
.kwh-chip{display:inline-flex;align-items:center;gap:.45em;font:600 .78rem/1.25 var(--ff);
  color:var(--ink-2);background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:.42em .8em}
.kwh-chip b{font-family:var(--ff-mono);color:var(--ink)}
.kwh-chip.sun b{color:var(--sun-ink)} .kwh-chip.sky b{color:var(--sky)} .kwh-chip.eco b{color:var(--eco)}
.kwh-cap-note{font:600 .72rem/1 var(--ff-mono);color:var(--sun-ink);background:var(--sun-tint);
  border-radius:var(--r-pill);padding:.4em .7em}
.kwh-hud .spacer{margin-left:auto}

.kwh-hold{display:inline-flex;align-items:center;gap:.5em;font:600 .74rem/1 var(--ff);color:var(--ink-2);
  background:#fff;border:1px solid var(--line-2);border-radius:var(--r-pill);padding:.5em .85em;
  cursor:pointer;transition:.2s;touch-action:none;user-select:none}
.kwh-hold:hover{border-color:var(--ink-3)}
.kwh-hold:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.kwh-hold[data-holding="1"]{color:var(--sun-ink);border-color:var(--sun);background:var(--sun-tint);box-shadow:0 0 0 3px var(--sun-tint)}
.kwh-hold svg{width:15px;height:15px}
.kwh-hold .hold-rate{font-family:var(--ff-mono);font-size:.7rem;color:var(--ink-3);min-width:2.6em;text-align:right}

.kwh-receipt{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;
  width:min(440px,88%);max-height:calc(100% - 18px);overflow:auto;background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:var(--sh-3);padding:clamp(16px,2.4vw,24px);opacity:0;visibility:hidden;pointer-events:none;
  font-family:var(--ff);transition:opacity .25s,visibility 0s linear .25s}
.kwh-receipt.show{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .25s}
.kwh-receipt h4{font:700 .82rem/1 var(--ff-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:0 0 14px}
.kwh-rline{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 0;
  opacity:0;transform:translateY(6px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.kwh-rline.in{opacity:1;transform:none}
.kwh-rline .lab{color:var(--ink-2);font-size:.9rem}
.kwh-rline .lab small{display:block;color:var(--ink-3);font-size:.74rem;margin-top:2px}
.kwh-rline .num{font-family:var(--ff-mono);font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.kwh-rline.base .num{color:var(--ink);text-decoration:line-through;text-decoration-color:var(--bad);opacity:.75}
.kwh-rline.save .num{color:var(--eco)}
.kwh-rline.total{border-top:1.5px solid var(--line);margin-top:6px;padding-top:12px}
.kwh-rline.total .lab{color:var(--ink);font-weight:640}
.kwh-rline.total .num{color:var(--sun-ink);font-size:1.24rem}
.kwh-rfoot{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.kwh-rfoot .pay{font:600 .82rem/1 var(--ff);color:var(--ink-2)}
.kwh-rfoot .pay b{font-family:var(--ff-mono);color:var(--ink)}
.kwh-rfoot .co2{display:inline-flex;align-items:center;gap:.4em;font:600 .76rem/1 var(--ff-mono);
  color:var(--eco);background:var(--eco-tint);border-radius:var(--r-pill);padding:.4em .7em}
.kwh-rsub{margin-top:10px;font-size:.74rem;color:var(--ink-3);line-height:1.45}
.kwh-rsub.indic{color:var(--sun-ink)}
.kwh-rcta{display:inline-flex;align-items:center;gap:.4em;margin-top:14px;font-weight:640;font-size:.9rem;color:var(--sun-ink)}
.kwh-rcta svg{width:1.05em;height:1.05em;transition:transform .3s var(--ease)}
.kwh-rcta:hover svg{transform:translateX(4px)}

.kwh-rail{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:5;background:var(--line)}
.kwh-rail i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--p,0) * 100%);
  background:linear-gradient(90deg,var(--sun-3),var(--sun));transition:none}

.kwh-strip{margin-top:clamp(26px,4vw,42px)}
.kwh-strip .kwh-strip-lead{font:600 .8rem/1 var(--ff-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--sun-2);margin-bottom:16px}
.kwh-strip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,18px)}
@media (max-width:860px){.kwh-strip-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.kwh-strip-grid{grid-template-columns:1fr}}
.kwh-strip-card{padding:clamp(16px,2vw,20px)!important}
.kwh-strip-card .ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:var(--sun-tint);color:var(--sun-2);margin-bottom:12px}
.kwh-strip-card .ic svg{width:21px;height:21px}
.kwh-strip-card h3{font-size:1.04rem;margin-bottom:6px}
.kwh-strip-card p{color:var(--ink-2);margin:0;font-size:.9rem}
.kwh-strip-card .more-chip{margin-top:12px!important;font-size:.86rem}

@media (max-width:640px){
  .kwh-hud{gap:6px 8px}
  .kwh-chip{font-size:.72rem;padding:.4em .66em}
  
  .kwh-receipt{width:94%;padding:14px 15px}
  .kwh-receipt h4{margin-bottom:9px}
  .kwh-rline{padding:5px 0}
  .kwh-rline .lab{font-size:.82rem}
  .kwh-rline .lab small{font-size:.68rem;margin-top:1px}
  .kwh-rline.total .num{font-size:1.1rem}
  .kwh-rfoot{margin-top:10px;padding-top:9px;gap:6px 10px}
  .kwh-rsub{margin-top:7px}
  .kwh-rcta{margin-top:10px}
  .kwh-phase{font-size:1rem}
}

@media (prefers-reduced-motion:reduce){
  .kwh-live.kwh-wrap{height:auto}
  .kwh-live .kwh-stage{position:static;height:auto;display:block;padding:0}
  .kwh-live .kwh-static{display:block}
  .kwh-live .kwh-frame,.kwh-live .kwh-canvas{display:none}
}