.viz-root {
  color-scheme: dark;
  --page: #0b1222;
  --surface-1: #131c2e;
  --surface-2: #18233a;
  --surface-3: #1e2b45;
  --border: rgba(148, 163, 184, 0.14);
  --text-primary: #e8edf6;
  --text-secondary: #aab4c8;
  --muted: #7c879c;
  --grid: #22304a;
  --axis: #34425e;
  /* entity colors (dark steps of the validated categorical palette, checked against #131c2e) */
  --solar: #c98500;
  --load: #3987e5;
  --battery: #199e70;
  --grid-c: #9085e9;
  --discharge: #d95926;
  --string1: #d55181;
  --string2: #008300;
  --good: #0ca30c;
  --warning: #fab219;
  --critical: #d03b3b;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: #0b1222; }
body { min-height: 100vh; background: radial-gradient(1200px 600px at 20% -10%, #15223d 0%, #0b1222 60%); }

.viz-root {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text-primary);
  max-width: 1400px;
  margin: 0 auto;
  padding: 14px;
}
h1, h2, p { margin: 0; }
button { font: inherit; color: inherit; }

.card {
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
}

/* ---------- top bar ---------- */
.topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding: 12px 16px; }
.brand { display: flex; align-items: center; gap: 12px; }
.logo { width: 42px; height: 42px; border-radius: 12px; background: #2a2a20; color: var(--solar); display: grid; place-items: center; border: 1px solid rgba(201,133,0,.35); }
.logo svg { width: 24px; height: 24px; }
h1 { font-size: 16px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.state { font-size: 12px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.state .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.state .lbl { font-weight: 700; letter-spacing: .04em; }
.weather { display: flex; align-items: center; gap: 10px; background: var(--surface-3); border: 1px solid var(--border); border-radius: 14px; padding: 8px 14px; font-size: 15px; font-weight: 600; }
.weather svg { width: 30px; height: 30px; color: var(--warning); }
.weather small { display: block; font-size: 11px; font-weight: 400; color: var(--text-secondary); }

/* ---------- layout ---------- */
.layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (min-width: 1100px) {
  .layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
  .scene { position: sticky; top: 14px; }
}

/* ---------- scene ---------- */
.scene { padding: 0; overflow: hidden; background: radial-gradient(500px 360px at 85% 8%, rgba(255,190,80,.10), transparent 70%), linear-gradient(180deg, #16223a, #111a2c); }
.scene.night { background: radial-gradient(420px 300px at 83% 12%, rgba(150,170,255,.08), transparent 70%), linear-gradient(180deg, #0f172a, #0c1324); }
.scene-inner { position: relative; width: 100%; aspect-ratio: 600 / 560; }
.house-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.house-svg .sky-night, .house-svg .lamp-glow { display: none; }
.house-svg.night .sky-day { display: none; }
.house-svg.night .sky-night, .house-svg.night .lamp-glow { display: inline; }
.house-svg .win { fill: url(#winDay); }
.house-svg .win-glare { fill: url(#glare); }
.house-svg.night .win { fill: url(#winNight); filter: drop-shadow(0 0 5px rgba(255,170,70,.7)); }
.house-svg.night .win-glare { display: none; }
.house-svg.night .sheen { opacity: .25; }
.house-svg .inv-led { animation: blink 2.4s ease-in-out infinite; }
.house-svg .inv-bar { animation: blink 3s ease-in-out infinite; }
.house-svg .star { animation: twinkle 3.2s ease-in-out infinite; }
.house-svg .sun-rays { transform-origin: 510px 66px; animation: spin 40s linear infinite; }
.house-svg .cloud { animation: drift 46s linear infinite alternate; }
.house-svg .cloud.c2 { animation-duration: 60s; animation-direction: alternate-reverse; }
.house-svg .bat-pct { font: 700 11px system-ui, sans-serif; fill: #6ff0c0; }
@keyframes blink { 50% { opacity: .35; } }
@keyframes twinkle { 50% { opacity: .25; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes drift { to { transform: translateX(60px); } }

.flow-track { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; opacity: 0; transition: opacity .5s; }
.flow-track.on { opacity: .45; }
.flow-track.flow-pv { stroke: #ffd36b; }
.flow-track.flow-load { stroke: #7db6ff; }
.flow-track.flow-battery { stroke: #4fe3ad; }
.flow-track.flow-grid { stroke: #b9b0ff; }
.dots { transition: opacity .5s; }
@media (prefers-reduced-motion: reduce) { .house-svg * { animation: none !important; } }
.callout {
  --c: #aab4c8;
  position: absolute; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  background: rgba(13, 21, 37, .78); backdrop-filter: blur(8px);
  border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
  border-radius: 14px; padding: 6px 12px 6px 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.04);
}
.callout .ci { width: 30px; height: 30px; border-radius: 10px; flex: none; display: grid; place-items: center;
  color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); }
.callout .ci svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.callout div { display: flex; flex-direction: column; }
.callout b { font-size: clamp(14px, 2vw, 19px); font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.callout b small { font-size: .62em; font-weight: 500; color: var(--text-secondary); margin-left: 2px; }
.callout span { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.callout[data-anchor="pv"] { --c: #ffc94d; }
.callout[data-anchor="load"] { --c: #6aa8f0; }
.callout[data-anchor="battery"] { --c: #3fd39f; }
.callout[data-anchor="grid"] { --c: #a99ff0; }
@media (max-width: 520px) { .callout { padding: 4px 8px 4px 4px; gap: 6px; } .callout .ci { width: 24px; height: 24px; } .callout .ci svg { width: 15px; height: 15px; } }.scene-foot { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 16px 14px; font-size: 12px; color: var(--text-secondary); border-top: 1px solid var(--border); }
.scene-foot b { color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- battery card ---------- */
.battery-card { padding: 10px 14px; }
.battery-head { width: 100%; display: flex; align-items: center; gap: 14px; background: none; border: 0; padding: 4px 0; cursor: pointer; text-align: left; }
.ring { width: 52px; height: 52px; flex: none; }
.ring svg { width: 100%; height: 100%; }
.bh-title { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.bh-sub { font-size: 12px; color: var(--text-secondary); margin-top: 3px; }
.bh-sub em { font-style: normal; color: var(--text-primary); font-weight: 600; }
.chev { width: 20px; height: 20px; margin-left: auto; color: var(--muted); transition: transform .2s; }
.battery-head[aria-expanded="true"] .chev { transform: rotate(180deg); }
.battery-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 4px 20px; padding: 10px 2px 4px; border-top: 1px solid var(--border); margin-top: 8px; font-size: 13px; }
.battery-more div { display: flex; justify-content: space-between; padding: 4px 0; }
.battery-more span:first-child { color: var(--text-secondary); }

/* ---------- card titles & controls ---------- */
.card-title { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.ct-icon { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }
.ct-icon svg { width: 20px; height: 20px; }
h2 { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.card-title p { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 3px; margin-bottom: 12px; }
.seg button { background: none; border: 1px solid transparent; border-radius: 9px; padding: 7px 8px; font-size: 13px; color: var(--text-secondary); cursor: pointer; }
.seg button.on { background: #1f3a5c; border-color: #3b6ea8; color: var(--text-primary); font-weight: 600; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: var(--surface-1); border: 1px solid var(--border); cursor: pointer; color: var(--text-primary); }
.chip i { width: 9px; height: 9px; border-radius: 3px; }
.chip.off { opacity: .45; }
.chip.off i { background: transparent !important; outline: 1.5px solid var(--muted); outline-offset: -1.5px; }
.hint { font-size: 11px; color: var(--muted); margin: 0 0 6px; }
.mini-title { font-size: 11px; color: var(--text-secondary); margin: 6px 0 2px; font-weight: 600; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 14px; height: 2px; border-radius: 1px; }

.period { display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; text-align: center; margin-bottom: 12px; }
.period button { height: 32px; border-radius: 9px; background: var(--surface-1); border: 1px solid var(--border); cursor: pointer; font-size: 16px; }
.period button:disabled { opacity: .35; cursor: default; }
.p-title { font-weight: 700; font-size: 14px; }
.p-now { font-size: 11px; color: var(--good); }

/* ---------- KPI tiles ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 12px 0 4px; }
.kpi { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.kpi .k { font-size: 11px; font-weight: 700; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; text-transform: uppercase; letter-spacing: .03em; }
.kpi .k i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.kpi .v { font-size: 18px; font-weight: 700; margin-top: 4px; }
.kpi .v small { font-size: 12px; font-weight: 400; color: var(--text-secondary); margin-left: 2px; }
.kpi .n { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ---------- donuts ---------- */
.donuts { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; }
.donut-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; padding: 12px; display: flex; align-items: center; gap: 14px; }
.donut { width: 92px; height: 92px; flex: none; position: relative; }
.donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut .c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.donut .c b { font-size: 18px; }
.donut .c small { font-size: 10px; color: var(--text-secondary); }
.donut-legend { flex: 1; min-width: 0; }
.donut-legend h3 { font-size: 12px; margin: 0 0 6px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.donut-legend .row { display: grid; grid-template-columns: 10px 1fr auto auto; gap: 6px; align-items: center; font-size: 12px; padding: 2px 0; }
.donut-legend .row i { width: 8px; height: 8px; border-radius: 2px; }
.donut-legend .row span { color: var(--text-secondary); }
.donut-legend .row b { font-variant-numeric: tabular-nums; }
.donut-legend .row em { font-style: normal; color: var(--muted); font-size: 11px; min-width: 32px; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- charts ---------- */
.chart { width: 100%; height: 250px; position: relative; }
.chart.short { height: 90px; }
.chart.tall { height: 260px; }
.chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.chart .empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 13px; text-align: center; padding: 0 20px; }
.chart text { font-size: 11px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.chart text.dl { font-size: 11px; fill: var(--text-secondary); font-weight: 600; }
.chart .bar { cursor: pointer; }

.detail-box { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin-top: 8px; }
.detail-box h4 { margin: 0 0 8px; font-size: 12px; }
.detail-box .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; }
.detail-box .cell { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; background: var(--surface-2); border-radius: 8px; padding: 6px 8px; }
.detail-box .cell span { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); }
.detail-box .cell i { width: 8px; height: 8px; border-radius: 2px; }
.detail-box .cell b { font-variant-numeric: tabular-nums; }

.tooltip {
  position: fixed; pointer-events: none; z-index: 10; display: none; min-width: 150px;
  background: #0f172a; color: #e8edf6; border: 1px solid rgba(148,163,184,.25); border-radius: 10px; padding: 8px 10px;
  font: 12px system-ui, -apple-system, "Segoe UI", sans-serif; box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.tooltip .t { font-weight: 700; margin-bottom: 4px; }
.tooltip .r { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.tooltip .r span { display: inline-flex; align-items: center; gap: 6px; color: #aab4c8; }
.tooltip .r i { width: 10px; height: 3px; border-radius: 1px; }
.tooltip .r b { font-variant-numeric: tabular-nums; }

details { margin-top: 10px; font-size: 12px; }
summary { cursor: pointer; color: var(--text-secondary); }
.table-wrap { max-height: 300px; overflow: auto; margin-top: 8px; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { text-align: right; padding: 4px 8px; border-bottom: 1px solid var(--grid); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
th { color: var(--text-secondary); position: sticky; top: 0; background: var(--surface-1); }

footer { font-size: 11px; color: var(--muted); margin: 18px 4px 4px; text-align: center; }