/* HELIOSTAT — application styles, in the Helionovus v3/v4 system (../v4/css/v4.css; v4 = v3 styling + the fluid-ink hover):
   Hanken Grotesk throughout (Saans if licensed), cool paper + ink neutrals, one live accent colour
   shared with the website's colour switcher, hairline cards and small radii. Never Inter. */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,300..700;1,400&display=swap');

/* ------------------------------------------------------------------ system */
:root {
  --accent: #FF6A2B;               /* set live by the accent switcher (shared with the site as 'hn-accent') */
  --on-accent: #12110E;
  --f-sans: 'Saans', 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --f-display: var(--f-sans);
  --f-text: var(--f-sans);
  --f-mono: var(--f-sans);         /* data and labels: the same face with tabular figures, as on the site */
  --paper: #FAFBF8; --paper-2: #F1F2EE; --band: #E9EAE5; --ink: #12110E; --white: #FFFFFF;
  --void: #12110E; --carbon: #1A1915; --bone: #F1F2EE;
  /* the UI accent (legacy name kept so components read naturally) */
  --flare: var(--accent);
  --ember: color-mix(in srgb, var(--accent) 82%, #FFFFFF);
  --flare-ink: color-mix(in srgb, var(--accent) 70%, var(--ink));
  --flare-soft: color-mix(in srgb, var(--accent) 45%, #FFFFFF);
  /* fixed physical/data hues */
  --gold: #E3A22A; --plasma: #C45BD6; --plasma-deep: #7B4DFF; --sky: #5B9BEA; --leaf: #3FB67A; --alert: #E5484D;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);
  --t-fast: .18s; --t-med: .45s; --t-slow: .9s;
  --z-nav: 50; --z-overlay: 80;
}

/* ------------------------------------------------------------------ themes */
:root,
[data-theme="light"] {
  color-scheme: light;
  --bg: var(--paper);
  --bg-2: var(--paper-2);
  --surface: var(--white);
  --panel: #FFFFFF;
  --panel-2: var(--paper-2);
  --panel-border: rgba(18, 17, 14, .1);
  --panel-float: rgba(255, 255, 255, .9);
  --panel-solid: #FFFFFF;
  --text: var(--ink);
  --text-2: rgba(18, 17, 14, .64);
  --text-3: rgba(18, 17, 14, .46);
  --line: rgba(18, 17, 14, .09);
  --line-2: rgba(18, 17, 14, .17);
  --track: rgba(18, 17, 14, .07);
  --tip-bg: rgba(255, 255, 255, .98);
  --shadow: 0 18px 44px -24px rgba(18, 17, 14, .3);
  --ink-flare: var(--flare-ink);
  --c-solar: #F26A1B;
  --c-wind: #D6980F;
  --c-grid: #2F6FD0;
  --c-load: #2F6FD0;
  --c-fusion: #A845C2;
  --c-charge: #1E9A5C;
  --c-discharge: #E0782E;
  --c-ok: #1E9A5C;
  --c-bad: #D93A3F;
  --c-muted: #D3D4CE;
  --glow-a: 0;
  --rail-bg: var(--paper);
  --scrim: rgba(18, 17, 14, .2);
  --skel-a: rgba(18, 17, 14, .035);
  --skel-b: rgba(18, 17, 14, .075);
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--ink);
  --bg-2: #181713;
  --surface: #1B1A16;
  --panel: #1A1915;
  --panel-2: #23221D;
  --panel-border: rgba(250, 251, 248, .08);
  --panel-float: rgba(24, 23, 19, .86);
  --panel-solid: #1A1915;
  --text: var(--paper);
  --text-2: rgba(250, 251, 248, .64);
  --text-3: rgba(250, 251, 248, .42);
  --line: rgba(250, 251, 248, .08);
  --line-2: rgba(250, 251, 248, .16);
  --track: rgba(250, 251, 248, .08);
  --tip-bg: rgba(26, 25, 21, .97);
  --shadow: 0 24px 60px -28px rgba(0, 0, 0, .75);
  --ink-flare: var(--accent);
  --c-solar: #FF7A33;
  --c-wind: #F2C14E;
  --c-grid: #8EC3FF;
  --c-load: #8EC3FF;
  --c-fusion: #D98BF0;
  --c-charge: #6FE0A8;
  --c-discharge: #FFA36B;
  --c-ok: #6FE0A8;
  --c-bad: #FF6B6B;
  --c-muted: #45433D;
  --glow-a: .1;
  --rail-bg: var(--ink);
  --scrim: rgba(0, 0, 0, .5);
  --skel-a: rgba(250, 251, 248, .03);
  --skel-b: rgba(250, 251, 248, .07);
}

/* app-only tokens */
:root {
  --rail-w: 76px;
  --top-h: 60px;
  --pad: 24px;
  --gap: 16px;
  --r-card: 8px;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 14px/1.5 var(--f-text);
  letter-spacing: -.005em;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out);
}
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }
svg { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--flare); outline-offset: 2px; border-radius: 6px; }
svg:focus-visible { outline: 2px solid var(--flare); outline-offset: 4px; border-radius: 8px; }
.skip {
  position: fixed; left: 12px; top: -60px; z-index: 300; padding: 10px 14px; border-radius: 10px;
  background: var(--flare); color: var(--on-accent); font: 500 12px var(--f-mono); text-decoration: none;
}
.skip:focus { top: 12px; }
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }

.mono, .eyebrow, .label { font-family: var(--f-mono); }
.eyebrow {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); font-weight: 400;
}
.num {
  font-family: var(--f-display); font-weight: 200; font-variant-numeric: tabular-nums;
  letter-spacing: -.02em; line-height: 1;
}
.unit { font-family: var(--f-mono); font-size: 10.5px; color: var(--text-3); letter-spacing: .04em; margin-left: 4px; font-weight: 400; }
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.c-solar { color: var(--c-solar); } .c-wind { color: var(--c-wind); } .c-grid { color: var(--c-grid); }
.c-fusion { color: var(--c-fusion); } .c-charge { color: var(--c-charge); } .c-bad { color: var(--c-bad); } .c-discharge { color: var(--c-discharge); }
.tnum { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ shell */
.shell { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.frame { min-width: 0; display: flex; flex-direction: column; }

.rail {
  position: sticky; top: 0; height: 100vh; height: 100dvh; z-index: var(--z-nav);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 14px 0 16px; border-right: 1px solid var(--line);
  background: var(--rail-bg); backdrop-filter: blur(20px);
}
.rail__brand { position: relative; padding-bottom: 12px; margin-bottom: 4px; }
.rail__brand::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; height: 1px; background: var(--line); }
.rail__logo {
  width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px;
  border: 1px solid transparent; background: none; color: var(--text); transition: background var(--t-fast), border-color var(--t-fast);
}
.rail__logo:hover, .rail__logo[aria-expanded="true"] { background: var(--panel-2); border-color: var(--panel-border); }
.rail__logo svg { transition: transform var(--t-slow) var(--ease-out); }
.rail__logo:hover svg { transform: rotate(45deg); }
.logo-menu {
  position: absolute; left: 58px; top: 0; width: 240px; padding: 16px 8px 8px; z-index: 90;
  background: var(--panel-solid); border: 1px solid var(--panel-border); border-radius: 16px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 2px; animation: pop var(--t-med) var(--ease-out);
}
.logo-menu[hidden] { display: none; }
.logo-menu__word { color: var(--text); padding: 0 10px 6px; }
.logo-menu__prod { padding: 0 10px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line); font: 500 10px var(--f-mono); letter-spacing: .18em; color: var(--ink-flare); }
.logo-menu__prod span { color: var(--text-3); letter-spacing: .06em; margin-left: 6px; }
.logo-menu a, .logo-menu button {
  text-align: left; padding: 9px 10px; border-radius: 9px; border: 0; background: none; text-decoration: none; font-size: 13px; color: var(--text-2);
}
.logo-menu a:hover, .logo-menu button:hover, .logo-menu a:focus-visible, .logo-menu button:focus-visible { background: var(--panel-2); color: var(--text); outline-offset: -2px; }
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }

.rail__nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.rail__link {
  position: relative; width: 56px; height: 52px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: var(--text-3); text-decoration: none; transition: color var(--t-fast), background var(--t-fast);
}
.rail__label { font: 400 8.5px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.rail__link:hover { color: var(--text); background: var(--panel); }
.rail__link[aria-current="page"] { color: var(--text); background: var(--panel-2); }
.rail__link[aria-current="page"] .ico { color: var(--flare); }
.rail__link[aria-current="page"]::before {
  content: ''; position: absolute; left: -10px; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: var(--flare); box-shadow: 0 0 12px var(--flare);
}
.rail__tip {
  position: absolute; left: calc(100% + 12px); top: 50%; transform: translate(-4px, -50%); white-space: nowrap; pointer-events: none;
  padding: 6px 10px; border-radius: 8px; background: var(--panel-solid); border: 1px solid var(--panel-border); box-shadow: var(--shadow);
  font: 400 11px var(--f-text); color: var(--text); opacity: 0; transition: opacity var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.rail__link:hover .rail__tip, .rail__link:focus-visible .rail__tip { opacity: 1; transform: translate(0, -50%); }
.rail__foot { display: flex; flex-direction: column; gap: 8px; }

.icon-btn {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--panel-border);
  background: var(--panel); color: var(--text-2); transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.icon-btn:hover { color: var(--text); background: var(--panel-2); border-color: var(--line-2); }
.icon-btn--flare { background: var(--flare); border-color: var(--flare); color: var(--on-accent); }
.icon-btn--flare:hover { background: var(--ember); color: var(--on-accent); }

.topbar {
  position: sticky; top: 0; z-index: 40; height: var(--top-h); display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 var(--pad); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(18px) saturate(1.2);
}
.topbar__lead { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; overflow: hidden; }
.crumbs { min-width: 0; }
.crumbs li:last-child { overflow: hidden; }
.crumbs li:last-child span { overflow: hidden; text-overflow: ellipsis; }
.topbar__mark { display: none; color: var(--text); }
.crumbs ol { list-style: none; display: flex; align-items: center; gap: 0; margin: 0; padding: 0; min-width: 0; }
.crumbs li { display: flex; align-items: center; font: 400 10.5px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.crumbs li + li::before { content: '/'; margin: 0 10px; color: var(--line-2); }
.crumbs a { text-decoration: none; color: var(--text-3); border-radius: 4px; }
.crumbs a:hover { color: var(--text); }
.crumbs [aria-current] span { color: var(--text); }
.topbar__tools { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.clock { font: 400 11px var(--f-mono); color: var(--text-2); letter-spacing: .04em; font-variant-numeric: tabular-nums; min-width: 104px; text-align: right; }

.badge {
  display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 11px; border-radius: 99px;
  font: 400 10px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2);
  border: 1px solid var(--panel-border); background: var(--panel); white-space: nowrap;
}
.badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); position: relative; }
.badge--live i { background: var(--c-ok); box-shadow: 0 0 0 0 var(--c-ok); animation: ping 2.4s var(--ease-out) infinite; }
.badge--off i { background: var(--gold); }
.badge--off { color: var(--gold); }
[data-theme="light"] .badge--off { color: #946300; }
.badge--wait i { animation: blink 1s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(126, 217, 160, .6); } 70%, 100% { box-shadow: 0 0 0 7px rgba(126, 217, 160, 0); } }
@keyframes blink { 50% { opacity: .3; } }

.pill {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 11px; border-radius: 99px; border: 1px solid var(--panel-border);
  font: 500 12.5px var(--f-text); text-decoration: none; white-space: nowrap; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.pill__ico svg { width: 16px; height: 16px; }
.pill--ghost { background: var(--panel); color: var(--text); }
.pill--ghost:hover, .pill--ghost[aria-current] { border-color: var(--line-2); background: var(--panel-2); }
.pill--ghost[aria-current] .pill__ico { color: var(--flare); }
.pill--flare { background: var(--flare); border-color: var(--flare); color: var(--on-accent); }
.pill--flare:hover { background: var(--ember); }
.pill--flare[aria-expanded="true"] { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }

.main { flex: 1; padding: var(--pad); min-width: 0; }
.main:focus { outline: none; }

/* ------------------------------------------------------------------ view scaffold */
.view { animation: viewIn var(--t-slow) var(--ease-out) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.view__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 20px; }
.view__title { display: flex; flex-direction: column; gap: 8px; }
.view h1 { font: 300 30px/1.1 var(--f-display); letter-spacing: -.025em; }
.view h1 em { font-style: normal; color: var(--text-3); }
.view__meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tag {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 7px; border: 1px solid var(--panel-border);
  background: var(--panel); font: 400 10px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); white-space: nowrap;
}
.tag i { width: 6px; height: 6px; border-radius: 2px; background: currentColor; }
.tag--flare { color: var(--ink-flare); border-color: color-mix(in srgb, var(--accent) 30%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.tag--plasma { color: var(--c-fusion); border-color: color-mix(in srgb, var(--c-fusion) 35%, transparent); background: color-mix(in srgb, var(--c-fusion) 8%, transparent); }
.tag--ok { color: var(--c-ok); }
.tag--warn { color: var(--gold); }
[data-theme="light"] .tag--warn { color: #946300; }
.tag--bad { color: var(--c-bad); }

.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.s-2 { grid-column: span 2; } .s-3 { grid-column: span 3; } .s-4 { grid-column: span 4; } .s-5 { grid-column: span 5; }
.s-6 { grid-column: span 6; } .s-7 { grid-column: span 7; } .s-8 { grid-column: span 8; } .s-9 { grid-column: span 9; } .s-12 { grid-column: span 12; }
.stack { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.row { display: flex; gap: 12px; align-items: center; }
.between { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

.card {
  position: relative; min-width: 0; padding: 18px 18px 16px; border-radius: var(--r-card);
  background: var(--panel); border: 1px solid var(--panel-border);
  backdrop-filter: blur(22px) saturate(1.15); -webkit-backdrop-filter: blur(22px) saturate(1.15);
}
[data-theme="light"] .card { box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 12px 32px -22px rgba(90, 56, 20, .25); }
.card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), transparent 40%);
}
[data-theme="light"] .card::before { display: none; }
.card--float { background: var(--panel-float); box-shadow: var(--shadow); }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; min-height: 22px; }
.card__title { font: 400 10.5px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); display: flex; align-items: center; gap: 8px; }
.card__title .ico { width: 14px; height: 14px; color: var(--text-3); }
.card__sub { font-size: 12px; color: var(--text-3); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font: 400 10px var(--f-mono); color: var(--text-2); letter-spacing: .04em; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 3px; border-radius: 2px; background: currentColor; }
.legend i.dot { width: 7px; height: 7px; border-radius: 50%; }
.legend i.band { height: 8px; border-radius: 2px; opacity: .45; }

/* KPI */
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); }
.kpi { padding: 14px 16px 14px; }
.kpi__label { display: flex; align-items: center; gap: 8px; font: 400 10px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; }
.kpi__label i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.kpi__value { margin-top: 10px; display: flex; align-items: baseline; white-space: nowrap; }
.kpi__value .num { font-size: 34px; }
.kpi__foot { margin-top: 8px; font: 400 10.5px var(--f-mono); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi__foot b { font-weight: 400; color: var(--text-2); }
.bar-mini { height: 3px; border-radius: 2px; background: var(--track); overflow: hidden; margin-top: 10px; }
.bar-mini i { display: block; height: 100%; border-radius: inherit; background: currentColor; transform-origin: left; transition: transform var(--t-slow) var(--ease-out); box-shadow: 0 0 10px currentColor; }

/* stat blocks */
.stat { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.stat__l { font: 400 9.5px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.stat__v { display: flex; align-items: baseline; }
.stat__v .num { font-size: 26px; }
.stat__v--s .num { font-size: 20px; font-weight: 300; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 16px 20px; }
.stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ------------------------------------------------------------------ charts */
.ch { position: relative; height: var(--h, 200px); min-width: 0; }
.chart svg { width: 100%; height: 100%; overflow: visible; }
.chart { font-family: var(--f-mono); }
.ch-grid line { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
.ch-grid line.zero { stroke: var(--line-2); }
.ch-axis text { font: 400 9.5px var(--f-mono); fill: var(--text-3); letter-spacing: .02em; }
.ch-axis .ch-unit { fill: var(--text-3); font-size: 8.5px; text-transform: uppercase; letter-spacing: .08em; }
.ch-line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ch-glow { fill: none; stroke-width: 7px; opacity: var(--glow-a); filter: blur(5px); stroke-linecap: round; }
.ch-now line { stroke: var(--text-2); stroke-dasharray: 2 3; stroke-width: 1; opacity: .7; }
.ch-now text { font: 500 8.5px var(--f-mono); fill: var(--text-2); letter-spacing: .12em; }
.ch-hover line { stroke: var(--text-2); stroke-width: 1; opacity: .45; }
.ch-hover circle { stroke: var(--bg); stroke-width: 2px; }
.ch-bar { transition: opacity var(--t-fast); }
.ch-bar.is-hover { filter: brightness(1.25); }
.ch-nowcol { fill: var(--panel-2); }
.ch-region { opacity: .07; }
.ch-region-label { font: 400 8.5px var(--f-mono); fill: var(--text-3); letter-spacing: .1em; text-transform: uppercase; }
.ch-marker { color: var(--flare); }
.ch-marker line { stroke: currentColor; stroke-dasharray: 2 3; opacity: .6; }
.ch-marker circle { fill: currentColor; }
.ch-marker circle.halo { opacity: .2; animation: halo 2s var(--ease-out) infinite; transform-box: fill-box; transform-origin: center; }
.ch-marker text { font: 500 10px var(--f-mono); fill: currentColor; }
@keyframes halo { from { transform: scale(.6); opacity: .45; } to { transform: scale(1.8); opacity: 0; } }
.gauge-ticks line { stroke: var(--line-2); stroke-width: 1; }
.gauge-ticks line.maj { stroke: var(--text-3); }
.gauge-track { fill: none; stroke: var(--track); stroke-linecap: round; }
.gauge-arc { fill: none; stroke-linecap: round; }
.gauge-glow { fill: none; stroke-linecap: round; opacity: calc(var(--glow-a) * 1.3); filter: blur(6px); }
.gauge-cap { stroke: var(--bg); stroke-width: 2px; }
.gauge-marker { stroke: var(--text); stroke-width: 2; stroke-linecap: round; }
.hm-cell { transition: stroke var(--t-fast); }
.hm-cell.is-sel { stroke: var(--text); stroke-width: 1.5px; }
.hm-empty { fill: none; stroke: var(--line-2); stroke-dasharray: 2 2; }
.polar-grid circle { fill: none; stroke: var(--line); }
.polar-grid line { stroke: var(--line); }
.polar-card { font-weight: 500; fill: var(--text-2) !important; }
.polar-ring { font-size: 8.5px !important; }
.polar-cell { stroke: var(--bg); stroke-width: .75px; transition: opacity var(--t-fast); }
.polar-cell.is-hi { filter: brightness(1.3); }
.polar-needle line { stroke: var(--text); stroke-width: 1.5; stroke-dasharray: 3 3; }
.polar-needle circle { fill: var(--text); }

.gauge-wrap { position: relative; }
.gauge-center { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; pointer-events: none; }
.gauge-center .num { font-size: 40px; }
.ring-wrap { position: relative; width: var(--size, 120px); height: var(--size, 120px); flex-shrink: 0; }
.ring-wrap .ch { height: 100%; }
.ring-center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; pointer-events: none; }
.ring-center .num { font-size: 26px; }
.ring-center small { display: block; font: 400 9px var(--f-mono); letter-spacing: .12em; color: var(--text-3); text-transform: uppercase; margin-top: 4px; }

.hbars { display: flex; flex-direction: column; gap: 12px; }
.hbar { display: flex; flex-direction: column; gap: 6px; padding: 4px 6px; margin: -4px -6px; border-radius: 8px; }
.hbar:hover { background: var(--panel); }
.hbar__top { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--text-2); }
.hbar__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar__val { font: 400 11px var(--f-mono); color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hbar__val b { font-weight: 400; }
.hbar__val small { color: var(--text-3); font-size: 9.5px; }
.hbar__track { height: 6px; border-radius: 4px; background: var(--track); overflow: hidden; }
.hbar__track i { display: block; height: 100%; border-radius: inherit; transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease-out); box-shadow: 0 0 12px -2px var(--glow); }

.tip {
  position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none; min-width: 168px; max-width: 280px;
  padding: 10px 12px; border-radius: 11px; background: var(--tip-bg); border: 1px solid var(--line-2); box-shadow: var(--shadow);
  font: 400 11px var(--f-mono); color: var(--text); backdrop-filter: blur(12px);
}
.tip__t { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
.tip__row { display: flex; align-items: center; gap: 8px; line-height: 1.9; }
.tip__row i { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.tip__row span { color: var(--text-2); flex: 1; white-space: nowrap; }
.tip__row b { font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tip__row small { color: var(--text-3); font-size: 9px; }
.tip__sub { color: var(--text-3); font-size: 10px; margin-top: 4px; }

/* skeletons */
.skel { border-radius: 12px; background: linear-gradient(100deg, var(--skel-a) 30%, var(--skel-b) 50%, var(--skel-a) 70%); background-size: 300% 100%; animation: shimmer 1.6s linear infinite; }
.skel--title { width: 280px; height: 36px; }
.skel--card { height: 260px; border-radius: var(--r-card); }
.skel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -200% 0; } }

/* tables */
.table-wrap { overflow-x: auto; margin: 0 -4px; }
table.t { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.t th { text-align: left; font: 400 9.5px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); padding: 0 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.t td { padding: 10px 8px; border-bottom: 1px solid var(--line); color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.t td.n, .t th.n { text-align: right; font-family: var(--f-mono); font-size: 11px; }
.t td:first-child { color: var(--text); }
.t tr:last-child td { border-bottom: 0; }
.t tr.is-hi td { background: color-mix(in srgb, var(--flare) 8%, transparent); color: var(--text); }
.t tr.is-hi td:first-child { box-shadow: inset 2px 0 0 var(--flare); }
.t tbody tr { transition: background var(--t-fast); }
.t tbody tr:hover td { background: var(--panel); }
.t tr.is-new td { animation: rowIn 1.2s var(--ease-out); }
@keyframes rowIn { from { background: color-mix(in srgb, var(--c-fusion) 18%, transparent); } }
.dotl { display: inline-flex; align-items: center; gap: 7px; }
.dotl::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* alerts */
.alerts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.alert { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); align-items: start; }
.alert:first-child { border-top: 0; padding-top: 2px; }
.alert__ico { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--panel-2); }
.alert__ico svg { width: 15px; height: 15px; }
.alert--bad .alert__ico { color: var(--c-bad); background: color-mix(in srgb, var(--c-bad) 12%, transparent); }
.alert--warn .alert__ico { color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); }
.alert--ok .alert__ico { color: var(--c-ok); background: color-mix(in srgb, var(--c-ok) 12%, transparent); }
.alert--info .alert__ico { color: var(--c-grid); background: color-mix(in srgb, var(--c-grid) 12%, transparent); }
.alert__t { font-size: 13px; color: var(--text); line-height: 1.35; }
.alert__d { font-size: 12px; color: var(--text-3); margin-top: 2px; line-height: 1.4; }
.alert__time { font: 400 10px var(--f-mono); color: var(--text-3); padding-top: 2px; }

/* AI / prose */
.ai { font-size: 13.5px; line-height: 1.6; color: var(--text-2); }
.ai b { color: var(--text); font-weight: 500; }
.ai p + p { margin-top: 10px; }
.ai__badge { display: inline-flex; align-items: center; gap: 6px; font: 400 9.5px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-flare); }
.ai__badge svg { width: 14px; height: 14px; }
.confidence { display: flex; align-items: center; gap: 10px; margin-top: 14px; font: 400 10px var(--f-mono); color: var(--text-3); }
.confidence .bar-mini { flex: 1; margin: 0; color: var(--flare); }

/* segmented control */
.seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--panel); border: 1px solid var(--panel-border); gap: 2px; }
.seg button { border: 0; background: none; padding: 5px 10px; border-radius: 7px; font: 400 10px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.seg button[aria-pressed="true"] { background: var(--panel-2); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
[data-theme="light"] .seg button[aria-pressed="true"] { background: #fff; }

/* ------------------------------------------------------------------ overview */
.view--overview { margin: calc(var(--pad) * -1); }
.ov { position: relative; height: calc(100dvh - var(--top-h)); min-height: 760px; overflow: hidden; }
.ov__twin { position: absolute; inset: 0; }
.ov__twin canvas { display: block; width: 100%; height: 100%; outline: none; }
.ov__twin::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 55%, transparent 55%, color-mix(in srgb, var(--bg) 70%, transparent) 100%);
}
.ov__hud {
  position: relative; z-index: 2; height: 100%; padding: var(--pad); pointer-events: none;
  display: grid; grid-template-columns: 330px minmax(0, 1fr) 360px; grid-template-rows: auto minmax(0, 1fr); gap: var(--gap);
}
.ov__hud > * { pointer-events: auto; }
.ov__top { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.ov__title h1 { font-size: 32px; }
.ov__left, .ov__right { display: flex; flex-direction: column; gap: var(--gap); min-height: 0; overflow: auto; scrollbar-width: none; padding-bottom: 2px; }
.ov__left::-webkit-scrollbar, .ov__right::-webkit-scrollbar { display: none; }
.ov__left { grid-column: 1; }
.ov__right { grid-column: 3; }
.ov__mid { grid-column: 2; pointer-events: none; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.ov .kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ov .kpi { background: var(--panel-float); }
.twin-hint { pointer-events: none; font: 400 10px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); display: flex; gap: 14px; align-items: center; }
.twin-hint kbd { font: inherit; padding: 2px 6px; border: 1px solid var(--line-2); border-radius: 5px; }
.twin-legend { pointer-events: auto; display: flex; gap: 14px; padding: 8px 14px; border-radius: 99px; background: var(--panel-float); border: 1px solid var(--panel-border); backdrop-filter: blur(16px); margin-bottom: 10px; }

.power-list { display: flex; flex-direction: column; gap: 2px; }
.power-row { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); }
.power-row:first-child { border-top: 0; }
.power-row__ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, currentColor 12%, transparent); }
.power-row__ico svg { width: 16px; height: 16px; }
.power-row__name { font-size: 13px; color: var(--text); }
.power-row__sub { font: 400 10px var(--f-mono); color: var(--text-3); margin-top: 1px; }
.power-row__v { text-align: right; white-space: nowrap; }
.power-row__v .num { font-size: 22px; font-weight: 300; }
.flow-arrow { display: inline-block; width: 12px; height: 12px; margin-left: 4px; vertical-align: -1px; }

.twin-labels { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.twin-label { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; transition: opacity var(--t-med); }
.twin-label__pin { position: absolute; left: -4.5px; top: -4.5px; width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--flare)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--flare)) 25%, transparent), 0 0 14px var(--c, var(--flare)); }
.twin-label__stem { position: absolute; left: -.5px; bottom: 0; width: 1px; height: 38px; background: linear-gradient(to top, var(--c, var(--flare)), transparent); opacity: .8; }
.twin-label__body { position: absolute; left: -10px; bottom: 38px; white-space: nowrap; padding: 6px 10px 7px; border-radius: 10px; background: var(--panel-float); border: 1px solid var(--panel-border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.twin-label__n { font: 400 8.5px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.twin-label__v { font: 300 15px/1.25 var(--f-display); color: var(--text); font-variant-numeric: tabular-nums; }
.twin-label__v small { font: 400 9px var(--f-mono); color: var(--text-3); margin-left: 4px; }
.twin-label__s { display: none; font: 400 8.5px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-right: 6px; font-style: normal; }
.twin-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-3); font: 400 11px var(--f-mono); }

/* ------------------------------------------------------------------ solar */
.array { position: relative; }
.array__svg { width: 100%; height: auto; }
.array__tile { transition: fill .6s var(--ease-out); cursor: pointer; }
.array__tile:hover, .array__tile.is-focus { stroke: var(--text); stroke-width: 1.5; }
.array__block { fill: none; stroke: var(--line-2); stroke-dasharray: 2 3; }
.array__block.is-sel { stroke: var(--flare); stroke-dasharray: none; stroke-width: 1.5; }
.array__cable { fill: none; stroke: var(--flare); stroke-width: 1.4; opacity: .55; stroke-dasharray: 3 7; animation: cable 1.4s linear infinite; }
.array__cable--dim { opacity: .12; animation: none; }
.array__label { font: 400 9px var(--f-mono); fill: var(--text-3); letter-spacing: .08em; }
.array__inv { fill: var(--panel-2); stroke: var(--line-2); }
.array__inv.is-sel { stroke: var(--flare); }
@keyframes cable { to { stroke-dashoffset: -20; } }
.scale { display: flex; align-items: center; gap: 10px; font: 400 9.5px var(--f-mono); color: var(--text-3); }
.scale__bar { width: 140px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #1d2a45, #6b3a2a 45%, var(--flare) 80%, var(--gold)); }
[data-theme="light"] .scale__bar { background: linear-gradient(90deg, #E7E1D6, #F4B08E 45%, var(--flare) 80%, #C63D0A); }
.readouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.readout { background: var(--bg-2); padding: 12px; display: flex; flex-direction: column; gap: 6px; }
[data-theme="light"] .readout { background: #FBF9F5; }
.readout .num { font-size: 20px; font-weight: 300; }
.tech { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; }
.tech__av { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font: 500 14px var(--f-display); color: var(--on-accent); background: linear-gradient(135deg, var(--gold), var(--flare)); }
.tech__n { font-size: 14px; color: var(--text); }
.tech__s { font: 400 10px var(--f-mono); color: var(--text-3); margin-top: 2px; }
.match { font: 300 22px var(--f-display); color: var(--c-ok); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 10px;
  border: 1px solid var(--panel-border); background: var(--panel-2); color: var(--text); font: 500 12.5px var(--f-text); text-decoration: none; transition: background var(--t-fast), border-color var(--t-fast);
}
.btn:hover { border-color: var(--line-2); }
.btn svg { width: 15px; height: 15px; }
.btn--flare { background: var(--flare); border-color: var(--flare); color: var(--on-accent); }
.btn--flare:hover { background: var(--ember); }
.btn[aria-pressed="true"] { border-color: var(--flare); color: var(--ink-flare); }

/* ------------------------------------------------------------------ wind */
.turbines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.turbine { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: center; }
.turbine__art { width: 92px; height: 112px; color: var(--c-wind); }
.turbine__rotor { transform-origin: 46px 38px; animation: spin var(--dur, 6s) linear infinite; }
.turbine__disc { transform-origin: 46px 38px; animation: spin calc(var(--dur, 6s) * 4) linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.turbine .num { font-size: 30px; }
.beaufort td { padding-top: 7px; padding-bottom: 7px; }
.beaufort td:nth-child(1) { font-family: var(--f-mono); }

/* ------------------------------------------------------------------ fusion */
.pilot-banner {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px; margin-bottom: var(--gap);
  border: 1px dashed color-mix(in srgb, var(--c-fusion) 45%, transparent); background: color-mix(in srgb, var(--c-fusion) 6%, transparent);
  font-size: 13px; color: var(--text-2);
}
.pilot-banner b { color: var(--c-fusion); font: 500 10.5px var(--f-mono); letter-spacing: .16em; text-transform: uppercase; }
.lanes { display: flex; flex-direction: column; gap: 4px; }
.lane { display: grid; grid-template-columns: 140px 1fr; gap: 12px; align-items: stretch; }
.lane__meta { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding-left: 10px; border-left: 2px solid var(--c); }
.lane__n { font: 400 9.5px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.lane__v { font: 300 22px var(--f-display); font-variant-numeric: tabular-nums; color: var(--text); }
.lane__v small { font: 400 9.5px var(--f-mono); color: var(--text-3); margin-left: 4px; }
.lane .ch { --h: 76px; }
.phase { display: flex; gap: 4px; margin-top: 12px; padding-left: 152px; }
.phase span { flex: var(--w); padding: 5px 0 0; border-top: 2px solid var(--line-2); font: 400 9px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); text-align: center; transition: border-color var(--t-med), color var(--t-med); }
.phase span.is-on { border-color: var(--c-fusion); color: var(--c-fusion); }
.q-read { display: flex; align-items: baseline; gap: 6px; }
.q-read .num { font-size: 64px; font-weight: 200; background: linear-gradient(180deg, var(--text), var(--c-fusion)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.torus { width: 100%; max-width: 220px; margin: 0 auto; aspect-ratio: 1; }

/* ------------------------------------------------------------------ storage */
.rings { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.ring-meta { display: flex; flex-direction: column; gap: 10px; min-width: 130px; }
.soc-cell { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.soc-bar { flex: 1; height: 6px; border-radius: 4px; background: var(--track); overflow: hidden; min-width: 60px; }
.soc-bar i { display: block; height: 100%; border-radius: inherit; background: var(--c-charge); transition: width 1s var(--ease-out); }

/* ------------------------------------------------------------------ grid */
.linemap { width: 100%; height: auto; }
.lm-terrain { fill: none; stroke: var(--line); }
.lm-line { fill: none; stroke: var(--c-grid); stroke-width: 2; opacity: .55; }
.lm-line--flow { stroke-dasharray: 2 10; stroke-width: 2.5; opacity: .9; animation: cable 1s linear infinite; stroke-linecap: round; }
.lm-node { cursor: pointer; }
.lm-node circle.core { fill: var(--bg); stroke-width: 2; }
.lm-node circle.ring { fill: none; opacity: .25; }
.lm-node text { font: 400 9.5px var(--f-mono); fill: var(--text-2); letter-spacing: .06em; }
.lm-node:hover circle.core, .lm-node:focus-visible circle.core, .lm-node.is-sel circle.core { fill: currentColor; }
.lm-node:focus-visible { outline: none; }
.lm-node:focus-visible circle.ring { opacity: .8; stroke-width: 2; }
.lm-sub rect { fill: var(--panel-2); stroke: var(--line-2); }
.lm-sub text { font: 500 10px var(--f-mono); fill: var(--text); letter-spacing: .08em; }
.lm-sub text.s { font-weight: 400; fill: var(--text-3); font-size: 9px; }

/* ------------------------------------------------------------------ simulate */
.sliders { display: flex; flex-direction: column; gap: 22px; }
.slider { display: flex; flex-direction: column; gap: 10px; }
.slider__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.slider__l { font-size: 13px; color: var(--text); }
.slider__l small { display: block; font: 400 10px var(--f-mono); color: var(--text-3); margin-top: 2px; }
.slider__v { font: 300 20px var(--f-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.slider__v small { font: 400 10px var(--f-mono); color: var(--text-3); margin-left: 3px; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: none; margin: 0; --p: 50%; --c: var(--flare); }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 3px; background: linear-gradient(90deg, var(--c) var(--p), var(--track) var(--p)); }
input[type=range]::-moz-range-track { height: 4px; border-radius: 3px; background: linear-gradient(90deg, var(--c) var(--p), var(--track) var(--p)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: var(--bg); border: 2px solid var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent), 0 0 14px var(--c); transition: transform var(--t-fast); }
input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 2px solid var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent); }
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.15); }
input[type=range]:focus-visible { outline: 2px solid var(--flare); outline-offset: 4px; border-radius: 6px; }
.slider__ticks { display: flex; justify-content: space-between; font: 400 9px var(--f-mono); color: var(--text-3); }
.mix { display: flex; height: 38px; border-radius: 10px; overflow: hidden; gap: 2px; }
.mix span { height: 100%; min-width: 0; transition: flex-grow .7s var(--ease-out); position: relative; }
.mix span b { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font: 500 10px var(--f-mono); color: rgba(10, 6, 2, .8); white-space: nowrap; }
.delta { font: 400 10.5px var(--f-mono); }
.delta--up { color: var(--c-bad); } .delta--down { color: var(--c-ok); }
.delta--good-up { color: var(--c-ok); }

/* ------------------------------------------------------------------ global */
.map-wrap { position: relative; }
.map-wrap svg { width: 100%; height: auto; }
.country { stroke: var(--bg); stroke-width: .4; transition: opacity var(--t-fast); cursor: pointer; }
.country--nodata { fill: var(--track); cursor: default; }
.country:hover, .country.is-hi { stroke: var(--text); stroke-width: 1.2; }
.country:focus-visible { outline: none; stroke: var(--flare); stroke-width: 1.5; }
.sphere { fill: none; stroke: var(--line-2); }
.graticule { fill: none; stroke: var(--line); stroke-width: .5; }
.site-pin circle { fill: var(--flare); }
.site-pin circle.p { fill: none; stroke: var(--flare); animation: halo 2.2s var(--ease-out) infinite; transform-box: fill-box; transform-origin: center; }
.site-pin text { font: 500 9.5px var(--f-mono); fill: var(--text); letter-spacing: .08em; }
.rank { list-style: none; margin: 0; padding: 0; counter-reset: r; max-height: 560px; overflow: auto; scrollbar-width: thin; }
.rank li { display: grid; grid-template-columns: 26px 1fr 64px; gap: 10px; align-items: center; padding: 7px 6px; border-radius: 8px; font-size: 12.5px; color: var(--text-2); cursor: default; }
.rank li:hover, .rank li.is-hi, .rank li:focus-visible { background: var(--panel-2); color: var(--text); }
.rank li .i { font: 400 10px var(--f-mono); color: var(--text-3); }
.rank li .b { height: 4px; border-radius: 2px; background: var(--track); overflow: hidden; margin-top: 5px; }
.rank li .b i { display: block; height: 100%; background: var(--flare); border-radius: inherit; }
.rank li .v { font: 400 10.5px var(--f-mono); text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.map-scale { display: flex; align-items: center; gap: 8px; font: 400 9.5px var(--f-mono); color: var(--text-3); }
.map-scale__bar { width: 180px; height: 6px; border-radius: 3px; }
.source { font: 400 10px var(--f-mono); color: var(--text-3); letter-spacing: .04em; }

/* ------------------------------------------------------------------ copilot */
.copilot {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-overlay); width: min(440px, 100vw);
  display: flex; flex-direction: column; background: var(--panel-solid); border-left: 1px solid var(--line-2); box-shadow: -30px 0 80px -30px rgba(0, 0, 0, .6);
  transform: translateX(104%); transition: transform var(--t-med) var(--ease-out); visibility: hidden;
}
.copilot.is-open { transform: none; visibility: visible; }
.copilot::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 220px; pointer-events: none; background: radial-gradient(400px 200px at 80% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%); }
.copilot__head { display: flex; justify-content: space-between; align-items: flex-start; padding: 22px 22px 16px; border-bottom: 1px solid var(--line); position: relative; }
.copilot__title { font: 300 26px var(--f-display); letter-spacing: -.02em; margin-top: 6px; }
.copilot__log { flex: 1; overflow: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 92%; padding: 12px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.55; animation: viewIn var(--t-med) var(--ease-out); }
.msg--bot { align-self: flex-start; background: var(--panel-2); border: 1px solid var(--panel-border); color: var(--text-2); border-top-left-radius: 4px; }
.msg--bot b { color: var(--text); font-weight: 500; }
.msg--user { align-self: flex-end; background: color-mix(in srgb, var(--flare) 14%, transparent); color: var(--text); border: 1px solid color-mix(in srgb, var(--flare) 30%, transparent); border-top-right-radius: 4px; }
.msg.is-typing { mask-image: linear-gradient(90deg, #000 40%, transparent 60%); mask-size: 250% 100%; animation: typing .7s var(--ease-out) forwards; }
@keyframes typing { from { mask-position: 100% 0; } to { mask-position: 0 0; } }
.copilot__suggest { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 22px 14px; }
.chip { border: 1px solid var(--panel-border); background: var(--panel); color: var(--text-2); border-radius: 99px; padding: 7px 12px; font-size: 12px; text-align: left; transition: border-color var(--t-fast), color var(--t-fast); }
.chip:hover { border-color: var(--flare); color: var(--text); }
.copilot__form { display: flex; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--line); }
.copilot__form input { flex: 1; height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--panel-border); background: var(--panel); font-size: 13.5px; }
.copilot__form input:focus-visible { outline: 2px solid var(--flare); outline-offset: 0; }
.copilot__note { padding: 0 22px 18px; font: 400 9.5px var(--f-mono); color: var(--text-3); letter-spacing: .02em; }
.scrim { position: fixed; inset: 0; z-index: calc(var(--z-overlay) - 1); background: var(--scrim); opacity: 0; transition: opacity var(--t-med); backdrop-filter: blur(2px); }
.scrim.is-on { opacity: 1; }
.err { color: var(--c-bad); font: 400 12px var(--f-mono); }

/* ------------------------------------------------------------------ v3 skin
   Editorial and flat, like the website: medium-weight Hanken numerals, small spaced-capital labels,
   hairline cards, 4–8px radii, rectangular buttons, no glows. */
:focus-visible { outline-color: var(--text); }
svg:focus-visible { outline-color: var(--text); }
.skip { background: var(--ink); color: var(--paper); border-radius: 6px; font: 500 13px var(--f-sans); }
::selection { background: var(--accent); color: var(--on-accent); }

/* type */
.num, .lane__v, .slider__v, .twin-label__v, .match, .power-row__v .num, .readout .num, .stat__v--s .num, .q-read .num, .ring-center .num, .gauge-center .num { font-weight: 500; letter-spacing: -.045em; }
.view h1, .ov__title h1 { font: 500 36px/1.02 var(--f-sans); letter-spacing: -.045em; }
.view h1 em { color: var(--text-3); }
.copilot__title { font: 500 28px var(--f-sans); letter-spacing: -.04em; }
.eyebrow, .card__title, .kpi__label, .stat__l, .t th, .crumbs li, .badge, .tag, .legend, .seg button, .rail__label, .lane__n, .twin-label__n,
.ring-center small, .tip__t, .ch-region-label, .twin-hint, .logo-menu__prod, .pilot-banner b, .ai__badge, .phase span, .slider__ticks, .map-scale, .scale, .source {
  font-weight: 500; letter-spacing: .07em;
}
.card__title, .kpi__label { font-size: 11px; color: var(--text-2); }
.eyebrow { font-size: 11px; }
.rail__label { font-size: 9px; letter-spacing: .05em; }
.crumbs li { font-size: 11px; }
.kpi__value .num { font-size: 36px; }
.unit, .kpi__foot, .power-row__sub, .alert__time, .tech__s, .clock, .hbar__val, .delta, .rank li .v, .t td.n { letter-spacing: 0; }
.ch-axis text { font-size: 10px; }

/* surfaces */
.card { backdrop-filter: none; -webkit-backdrop-filter: none; }
.card::before { display: none; }
[data-theme="light"] .card { box-shadow: none; }
.card--float, .ov .kpi { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.rail { backdrop-filter: none; }
.topbar { background: color-mix(in srgb, var(--bg) 88%, transparent); }
.copilot::before { display: none; }
.copilot { box-shadow: -30px 0 80px -40px rgba(18, 17, 14, .35); }

/* radii */
.rail__logo, .rail__link, .icon-btn, .logo-menu a, .logo-menu button, .seg, .chip, .copilot__form input, .alert__ico, .power-row__ico, .tech__av, .readouts, .mix, .rank li, .hbar, .twin-label__body, .tip, .rail__tip { border-radius: 6px; }
.logo-menu, .msg, .pilot-banner, .skel { border-radius: 8px; }
.badge, .tag, .seg button, .twin-hint kbd { border-radius: 4px; }
.msg--bot { border-top-left-radius: 2px; }
.msg--user { border-top-right-radius: 2px; }

/* buttons: the site's rectangular buttons */
.pill { height: 36px; border-radius: 6px; padding: 0 14px 0 12px; font: 500 13.5px var(--f-sans); letter-spacing: -.01em; }
.pill--ghost { background: transparent; border-color: var(--line-2); }
.pill--ghost:hover, .pill--ghost[aria-current] { background: var(--text); color: var(--bg); border-color: var(--text); }
.pill--ghost:hover .pill__ico, .pill--ghost[aria-current]:hover .pill__ico { color: inherit; }
.pill--flare:hover { background: var(--text); border-color: var(--text); color: var(--bg); }
.pill--flare[aria-expanded="true"] { box-shadow: none; background: var(--text); border-color: var(--text); color: var(--bg); }
.btn { border-radius: 6px; font: 500 13.5px var(--f-sans); letter-spacing: -.01em; background: transparent; border-color: var(--line-2); }
.btn:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn--flare { background: var(--flare); border-color: var(--flare); }
.btn--flare:hover { background: var(--text); border-color: var(--text); color: var(--bg); }
.icon-btn { background: transparent; }
.icon-btn:hover { background: var(--panel-2); }
.icon-btn--flare { background: var(--flare); border-color: var(--flare); color: var(--on-accent); }
.icon-btn--flare:hover { background: var(--text); border-color: var(--text); color: var(--bg); }
.chip:hover { border-color: var(--text); }
.tech__av { background: var(--accent); color: var(--on-accent); font-family: var(--f-sans); }

/* no glows */
.rail__link[aria-current="page"]::before { box-shadow: none; }
.bar-mini i, .hbar__track i { box-shadow: none; }
.twin-label__pin { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--flare)) 25%, transparent); }
.seg button[aria-pressed="true"] { background: var(--text); color: var(--bg); box-shadow: none; }
[data-theme="light"] .seg button[aria-pressed="true"] { background: var(--text); }
.q-read .num { background: none; color: var(--c-fusion); }
.badge--live i { animation: ping3 2.4s var(--ease-out) infinite; }
@keyframes ping3 { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-ok) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
input[type=range]::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 16%, transparent); }
[data-theme="light"] .readout { background: var(--paper); }
[data-theme="light"] .scale__bar { background: linear-gradient(90deg, #E6E7E1, #F4C3A1 45%, #FF6A2B 80%, #C63D0A); }

/* accent switcher (same swatches and storage as the website's) */
.accent { position: relative; }
.accent__btn i { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); box-shadow: inset 0 0 0 1px rgba(18, 17, 14, .18); }
.accent__pop {
  position: absolute; left: 52px; bottom: 0; z-index: 90; width: 232px; padding: 14px; display: flex; flex-direction: column; gap: 12px;
  background: var(--panel-solid); border: 1px solid var(--panel-border); border-radius: 8px; box-shadow: var(--shadow); animation: pop var(--t-med) var(--ease-out);
}
.accent__pop[hidden] { display: none; }
.accent__sw { display: flex; flex-wrap: wrap; gap: 9px; }
.accent__sw label { position: relative; width: 24px; height: 24px; border-radius: 50%; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(18, 17, 14, .15); transition: transform .3s var(--ease-out); }
.accent__sw label:hover { transform: scale(1.12); }
.accent__sw input[type=radio] { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.accent__sw input[type=radio]:checked + span { position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--text); }
.accent__sw input[type=radio]:focus-visible + span { position: absolute; inset: -4px; border-radius: 50%; outline: 2px solid var(--text); }
.accent__sw .custom { width: 24px; height: 24px; border-radius: 50%; overflow: hidden; position: relative; background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); box-shadow: inset 0 0 0 1px rgba(18, 17, 14, .15); }
.accent__sw .custom input { position: absolute; inset: -6px; width: 36px; height: 36px; opacity: 0; cursor: pointer; }
.accent__name { font-size: 12px; color: var(--text-2); }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1360px) {
  .ov__hud { grid-template-columns: 300px minmax(0, 1fr) 330px; }
  .ov .kpi__value .num { font-size: 28px; }
}
@media (max-width: 1200px) {
  .s-3 { grid-column: span 6; }
  .s-4, .s-5 { grid-column: span 6; }
  .s-7, .s-8 { grid-column: span 12; }
  .s-4.keep, .s-8.keep { grid-column: span var(--keep); }
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .turbines { grid-template-columns: 1fr; }
  .turbine { grid-template-columns: 92px 1fr; }
  /* overview becomes a scrolling page: twin on top, cards below */
  .ov { height: auto; min-height: 0; overflow: visible; }
  .ov__twin { position: relative; height: 58vh; min-height: 420px; max-height: 720px; }
  .ov__hud { grid-template-columns: 1fr 1fr; grid-template-rows: none; height: auto; padding: var(--pad); }
  .ov__top { order: -2; position: absolute; left: var(--pad); right: var(--pad); top: var(--pad); flex-direction: column; align-items: stretch; }
  .ov__top .kpis { display: none; }
  .ov__kpis-inline { display: grid !important; grid-column: 1 / -1; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .ov__kpis-inline .kpi { grid-column: span 2; }
  .ov__kpis-inline .kpi:nth-child(n+4) { grid-column: span 3; }
  .ov__left, .ov__right { grid-column: auto; overflow: visible; }
  .ov__mid { display: none; }
  .ov__hud { position: static; }
}
@media (min-width: 1201px) { .ov__kpis-inline { display: none !important; } }
@media (max-width: 1024px) {
  .s-6 { grid-column: span 12; }
  .s-3 { grid-column: span 6; }
  .s-4, .s-5 { grid-column: span 12; }
  .skel-grid { grid-template-columns: 1fr 1fr; }
  .clock { display: none; }
}
@media (max-width: 820px) {
  :root { --pad: 16px; --gap: 12px; --top-h: 56px; }
  .shell { grid-template-columns: minmax(0, 1fr); }
  .rail {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: auto; flex-direction: row; padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    border-right: 0; border-top: 1px solid var(--line); gap: 4px;
  }
  .rail__brand { display: none; }
  .rail__nav { flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: 2px; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); padding-right: 24px; }
  .rail__nav::-webkit-scrollbar { display: none; }
  .rail__link { width: 58px; height: 50px; flex-shrink: 0; }
  .rail__link[aria-current="page"]::before { left: 16px; right: 16px; top: -7px; bottom: auto; width: auto; height: 2px; }
  .rail__tip { display: none; }
  .rail__foot { flex-direction: row; align-items: center; padding-left: 4px; border-left: 1px solid var(--line); }
  .accent__pop { left: auto; right: -48px; bottom: 54px; }
  .main { padding-bottom: calc(var(--pad) + 76px); }
  .topbar__mark { display: block; }
  .crumbs li:not(:last-child) { display: none; }
  .crumbs li + li::before { display: none; }
  #simBtn { display: none; }
  .pill { padding: 0 11px; }
  .badge span { max-width: 92px; overflow: hidden; text-overflow: ellipsis; }
  .view h1 { font-size: 24px; }
  .ov__title h1 { font-size: 24px; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .grid > * { grid-column: 1 / -1 !important; }
  .ov__hud { grid-template-columns: minmax(0, 1fr); }
  .ov__twin { height: 58vh; min-height: 380px; }
  .kpis, .ov__kpis-inline { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ov__kpis-inline .kpi, .ov__kpis-inline .kpi:nth-child(n+4) { grid-column: span 1; }
  .ov__kpis-inline .kpi:last-child { grid-column: 1 / -1; }
  .kpi__value .num { font-size: 28px; }
  .skel-grid { grid-template-columns: 1fr; }
  .lane { grid-template-columns: 96px 1fr; gap: 8px; }
  .lane__v { font-size: 17px; }
  .phase { padding-left: 104px; }
  .readouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card__head { flex-wrap: wrap; }
  .twin-label__body { padding: 4px 8px; bottom: 26px; }
  .twin-label__stem { height: 26px; }
  .twin-label__n { display: none; }
  .twin-label__s { display: inline; }
  .twin-label__v { font-size: 12px; }
  .twin-label[data-k="umbraL"], .twin-label[data-k="grid"], .twin-label[data-k="sub"] { display: none; }
  .kpi__foot { white-space: normal; }
  .copilot { width: 100vw; }
}
@media (max-width: 480px) {
  .crumbs { display: none; }
  .topbar__lead { flex: 1; }
  .badge span { max-width: none; }
  .topbar { gap: 8px; }
  .topbar__tools { gap: 6px; }
  #copilotBtn span:last-child { display: none; }
  #copilotBtn { padding: 0 9px; }
  .badge { padding: 0 9px; }
  .phase span { font-size: 7.5px; letter-spacing: .04em; }
  .turbine { grid-template-columns: 70px 1fr; }
  .turbine__art { width: 70px; height: 86px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}