/* ═══════════════════════════════════════════════════════════════
   PV-App 2.0 — Design-Tokens, Komponenten, Layout
   ═══════════════════════════════════════════════════════════════ */

@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 100 700; font-display: swap;
  src: url("vendor/fonts/ibm-plex-sans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 100 700; font-display: swap;
  src: url("vendor/fonts/ibm-plex-sans-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url("vendor/fonts/ibm-plex-mono-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url("vendor/fonts/ibm-plex-mono-400-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url("vendor/fonts/ibm-plex-mono-500-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url("vendor/fonts/ibm-plex-mono-500-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
  color-scheme: dark;
  --bg: #0A0D12; --sf: #12161D; --sf2: #1B212B; --tx: #F2F4F7; --mu: #8B94A3;
  --ln: rgba(255,255,255,.07); --ac: #F97316; --warn: #F97316; --err: #EF4444;
  --bat: #34D399; --grd: #2DD4BF; --hp: #D69BEA; --wb: #5CCBDD;
  --s1: #1084FF; --s2: #FF10C3;
  /* 3D-Haus */
  --h-ground: #1f2733; --h-wall: #3a4658; --h-gable: #46546a; --h-roof: #4d5b72;
  --h-dormer: #4a586e; --h-window: #6f88a8; --h-panel: #182232; --h-arc: #F97316;
  --h-garden: #1a2230; --h-terrace: #2b3545; --h-context: #151b26; --h-neighbor: #222a37;
  --font: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F3F4F6; --sf: #FFFFFF; --sf2: #EDEFF2; --tx: #0F1419; --mu: #6B7280;
  --ln: rgba(0,0,0,.07); --err: #DC2626;
  --bat: #059669; --grd: #0D9488; --hp: #9A5BB0; --wb: #1F8598;
  --h-ground: #dfe3e8; --h-wall: #e7ebf0; --h-gable: #d9dee6; --h-roof: #c9d0da;
  --h-dormer: #d3d9e2; --h-window: #9fb3c8; --h-panel: #2b3648; --h-arc: #F97316;
  --h-garden: #d5dbe3; --h-terrace: #e9ecf0; --h-context: #d9dde3; --h-neighbor: #b9c1cc;
}

@keyframes dash { to { stroke-dashoffset: -24; } }
@keyframes dashr { to { stroke-dashoffset: 24; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* ── Basis ──────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--tx);
  font: 15px/1.35 var(--font); font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ac); text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
::-webkit-scrollbar { width: 0; height: 0; }

.mono { font-family: var(--mono); }
.lbl { font: 500 10px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mu); }
.lbl-9 { font: 500 9px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mu); }
.lbl-11 { font: 500 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mu); }
.mu { color: var(--mu); }
.ac { color: var(--ac); }
.small { font-size: 12px; color: var(--mu); }
.tiny { font-size: 11px; color: var(--mu); }
.sec-lbl { margin: 4px 0 -6px 4px; }
.h-page { font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.big { font-size: 28px; font-weight: 600; letter-spacing: -.03em; margin-top: 6px; line-height: 1.15; }
.big small, .val small { font-size: 14px; color: var(--mu); font-weight: 500; margin-left: 4px; letter-spacing: 0; }
.val { font-size: 26px; font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
.val small { font-size: 13px; }
.empty { color: var(--mu); font-size: 13px; }

/* ── Header ─────────────────────────────────────────────────── */
.hdr {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(14px + env(safe-area-inset-top)) 16px 10px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.hdr-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hdr-title { font-size: 24px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr-title:empty { display: none; }
.hdr-r { display: flex; align-items: center; gap: 8px; flex: none; }
.iconbtn {
  width: 34px; height: 34px; border-radius: 50%; background: var(--sf); border: 1px solid var(--ln);
  display: inline-flex; align-items: center; justify-content: center; color: var(--tx); flex: none;
  font-size: 18px; line-height: 1;
}
.iconbtn svg { width: 18px; height: 18px; }
.iconbtn.back { color: var(--mu); font-size: 20px; }
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 99px;
  background: var(--sf); border: 1px solid var(--ln); font: 500 11px var(--mono); color: var(--mu);
  letter-spacing: .04em;
}
.pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--bat); animation: pulse 2s infinite; }
.pill.standby i { background: var(--mu); animation: none; }
.pill.offline i { background: var(--err); animation: none; }
.pill.fault i { background: var(--warn); }
.topnav { display: none; }

/* ── Seiten-Layout ──────────────────────────────────────────── */
.page {
  max-width: 560px; margin: 0 auto; padding: 4px 16px calc(84px + env(safe-area-inset-bottom));
}
.pg { display: flex; flex-direction: column; gap: 14px; }
.col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pg-head { display: flex; align-items: center; gap: 10px; }

/* ── Karten & Listen ────────────────────────────────────────── */
.card { background: var(--sf); border: 1px solid var(--ln); border-radius: 18px; padding: 16px; min-width: 0; }
.card-lg { border-radius: 22px; }
.card-dashed { border-style: dashed; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.rows { padding: 4px 16px; }
.row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid var(--ln); font-size: 14px;
}
.row:last-child { border-bottom: 0; }
.row .l { color: var(--mu); }
.row .v { font-weight: 600; text-align: right; }
.row .grow { flex: 1; min-width: 0; }
.row .t { font-size: 14px; font-weight: 600; }
.row .t.n { font-weight: 500; font-size: 15px; }
.row .s { font-size: 12px; color: var(--mu); margin-top: 1px; }
.row .chev { color: var(--mu); font-size: 16px; }
.row.link { cursor: pointer; padding: 15px 0; }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; }
.dot.ring { background: var(--sf2); border: 1.5px solid currentColor; }
.sq { width: 8px; height: 8px; border-radius: 2px; display: inline-block; flex: none; }
.ico-box { width: 32px; height: 32px; border-radius: 10px; background: var(--sf2); display: inline-flex; align-items: center; justify-content: center; flex: none; font-weight: 600; color: var(--ac); }
.badge { background: var(--warn); color: #fff; font-size: 11px; font-weight: 600; border-radius: 99px; padding: 2px 8px; }
.legend { display: flex; gap: 12px; font-size: 11px; color: var(--mu); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.span2 { grid-column: 1 / -1; }
.tile { background: var(--sf2); border-radius: 12px; padding: 10px; }
.tile .v { font-size: 15px; font-weight: 600; margin-top: 3px; }
.strip-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 14px 8px; }
.strip-4 > div { text-align: center; border-right: 1px solid var(--ln); padding: 0 4px; min-width: 0; }
.strip-4 > div:last-child { border-right: 0; }
.strip-4 .v { font-size: 18px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.strip-4 .lbl-9 { margin-top: 3px; white-space: nowrap; }

.kpi .sub { font-size: 11px; color: var(--mu); margin-top: 6px; line-height: 1.4; }
.kpi .sub.gap { margin-top: 14px; }
.kpi.ring-kpi { display: flex; align-items: center; gap: 14px; }
.ring { flex: none; transform: rotate(-90deg); }

.bar { height: 4px; border-radius: 2px; background: var(--sf2); overflow: hidden; display: flex; margin-top: 10px; }
.bar > i { display: block; height: 100%; background: var(--ac); border-radius: 2px; transition: width .4s ease; }
.bar.h6 { height: 6px; border-radius: 3px; margin-top: 6px; }
.bar.h8 { height: 8px; border-radius: 4px; margin-top: 18px; }
.bar.h14 { height: 14px; border-radius: 7px; gap: 2px; margin-top: 12px; }
.bar.h14 > i { border-radius: 0; }
.bar.h14 > i:first-child { border-radius: 7px 0 0 7px; }
.bar.h14 > i:last-child { border-radius: 0 7px 7px 0; }

.seg { display: flex; background: var(--sf2); border-radius: 12px; padding: 3px; gap: 2px; }
.seg button { flex: 1; text-align: center; padding: 8px 0; border-radius: 10px; font-size: 13px; font-weight: 500; color: var(--mu); }
.seg button.active { background: var(--sf); color: var(--tx); }
.seg.sm button { font-size: 12px; }

.toggle { width: 46px; height: 28px; border-radius: 99px; position: relative; background: var(--sf2); transition: background .2s; flex: none; }
.toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left .2s; }
.toggle.on { background: var(--ac); }
.toggle.on::after { left: 21px; }

.datenav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.inp { padding: 9px 12px; border-radius: 10px; border: 1px solid var(--ln); background: var(--sf2); color: var(--tx); font: 14px var(--mono); }
.inp:focus { outline: 2px solid var(--ac); outline-offset: 1px; }
.btn { padding: 9px 14px; border-radius: 10px; background: var(--ac); color: #fff; font-weight: 600; font-size: 13px; white-space: nowrap; }
.btn:disabled { opacity: .5; cursor: default; }
.datenav .lbl-11 { text-transform: none; letter-spacing: .02em; font-size: 12px; color: var(--tx); text-align: center; flex: 1; }

/* ── Energiefluss-Hero ──────────────────────────────────────── */
.hero { position: relative; height: 392px; min-height: 392px; padding: 16px; overflow: hidden; }
.stage { position: relative; width: 338px; height: 360px; margin: 0 auto; transform-origin: top center; }
.stage > svg { position: absolute; left: 0; top: 0; width: 338px; height: 360px; overflow: visible; }
.stage .sky-lbl { font: 9px var(--mono); fill: var(--mu); }
.fl-base { stroke-width: 2; stroke-opacity: .12; }
.fl-base.on { stroke-opacity: .3; }
.fl { stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 3 10; opacity: 0; }
.fl.on { opacity: 1; animation: dash 1.1s linear infinite; }
.fl.on.rev { animation-name: dashr; }
.node-abs { position: absolute; z-index: 1; }
.node { display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 1; text-align: center; transition: opacity .4s; margin: 0 auto; }
.node.str { position: absolute; }
.brow { position: absolute; left: 0; top: 274px; width: 338px; display: flex; z-index: 1; }
.brow .slot { flex: 1; min-width: 0; display: flex; justify-content: center; align-items: flex-start; }
.node.dim { opacity: .45; }
.node .ic { width: 44px; height: 44px; border-radius: 50%; background: var(--sf2); border: 1.5px solid var(--c, var(--tx)); display: flex; align-items: center; justify-content: center; color: var(--c, var(--tx)); }
.node.inv .ic { width: 48px; height: 48px; box-shadow: 0 0 24px color-mix(in srgb, var(--ac) 30%, transparent); }
.node .v { font-size: 16px; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.node.inv .v { font-size: 20px; }
.node.house .v { font-size: 18px; }
.node.str .v { font-size: 14px; }
.node .l { margin-top: 3px; white-space: nowrap; }
.node .panel { width: 44px; height: 30px; border-radius: 7px; background: var(--sf2); border: 1px solid var(--c, var(--ac)); display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 4px; }
.node .panel i { background: var(--c, var(--ac)); border-radius: 1px; }
.nometer { display: block; margin-top: 8px; width: 116px; max-width: 100%; padding: 8px 10px; border-radius: 12px; border: 1px dashed var(--ln); text-align: center; font-size: 10px; line-height: 1.4; color: var(--mu); }

/* ── Simpel: große Zahl & Sparkline ─────────────────────────── */
.bignum { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
.bignum .n { font-size: 72px; font-weight: 600; letter-spacing: -.05em; line-height: 1.05; }
.bignum .u { font-size: 22px; color: var(--mu); font-weight: 500; }
.spark { width: 100%; height: 80px; margin-top: 10px; overflow: visible; display: block; }
.axis { display: flex; justify-content: space-between; font: 500 9px var(--mono); color: var(--mu); margin-top: 4px; }
.fc-bars { display: flex; gap: 8px; margin-top: 14px; align-items: flex-end; height: 64px; }
.fc-bars > div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.fc-bars .b { width: 100%; border-radius: 4px; background: var(--ac); }
.fc-rows { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 12px; }
.wk-day { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px; border-radius: 12px; min-width: 0; }
.wk-day.today { background: var(--sf2); }
.wk-ico { font-size: 20px; line-height: 1.2; }
.wk-t { font-size: 13px; font-weight: 600; }
.wk-bar { width: 100%; max-width: 22px; height: 44px; border-radius: 4px; background: var(--sf2); display: flex; align-items: flex-end; overflow: hidden; }
.wk-day.today .wk-bar { background: color-mix(in srgb, var(--sf2) 60%, var(--bg)); }
.wk-bar i { display: block; width: 100%; background: var(--ac); border-radius: 4px; }
.wk-kwh { font: 500 10px var(--mono); color: var(--mu); }
.fc-row { display: grid; grid-template-columns: 56px 1fr 72px; align-items: center; gap: 10px; }

/* ── Statistik ──────────────────────────────────────────────── */
.chart-wrap { position: relative; height: 200px; margin-top: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chips:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 99px; border: 1px solid var(--ln); background: var(--sf2); font-size: 12px; color: var(--mu); cursor: pointer; user-select: none; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip .sq { width: 9px; height: 9px; opacity: .35; }
.chip.on { color: var(--tx); border-color: var(--c, var(--ln)); }
.chip.on .sq { opacity: 1; }
.totals { display: flex; gap: 20px; margin-top: 10px; flex-wrap: wrap; }
.best { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.best .bv { font-size: 22px; font-weight: 600; letter-spacing: -.03em; color: var(--ac); white-space: nowrap; }

/* ── Tab-Bar ────────────────────────────────────────────────── */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; justify-content: space-around; padding: 10px 8px calc(14px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  border-top: 1px solid var(--ln);
}
.tab { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 64px; color: var(--mu); font-size: 10px; font-weight: 500; }
.tab svg { width: 22px; height: 22px; }
.tab.active { color: var(--ac); }

/* ── Anlage: 3D & Dachplan ──────────────────────────────────── */
.hero-3d { position: relative; aspect-ratio: 16 / 9; min-height: 240px; padding: 0; overflow: hidden; }
.hero-3d canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.string-badge {
  position: absolute; display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; border-radius: 12px;
  background: color-mix(in srgb, var(--sf) 70%, transparent); border: 1px solid var(--ln);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); pointer-events: none;
}
.string-badge .cv { font-size: 13px; font-weight: 600; }
.string-badge .cl { font: 500 9px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mu); }
.string-badge.s1 { right: 12px; top: 12px; text-align: right; border-right: 3px solid var(--s1); }
.string-badge.s2 { left: 12px; top: 12px; border-left: 3px solid var(--s2); }
.sun-controls { position: absolute; left: 12px; right: 12px; bottom: 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sun-controls input[type="date"] { border: 1px solid var(--ln); background: var(--sf); color: var(--tx); border-radius: 10px; padding: 4px 8px; font: 500 12px var(--mono); flex: none; -webkit-appearance: none; appearance: none; min-height: 28px; }
.sun-controls input[type="date"]::-webkit-calendar-picker-indicator { opacity: .6; }
.sun-controls input[type="range"] { flex: 1; min-width: 0; accent-color: var(--ac); height: 4px; }
.sun-controls button { border: 1px solid var(--ln); background: var(--sf); border-radius: 10px; padding: 4px 10px; font-size: 12px; font-weight: 600; }
#sunLabel { min-width: 3rem; text-align: right; font: 500 11px var(--mono); }

#anlageLayout svg { display: block; width: 100%; height: auto; margin-top: 10px; }
.rp-roof { fill: var(--sf2); stroke: var(--ln); }
.rp-dormer { fill: var(--h-window); stroke: var(--ln); }
.rp-mod { stroke: var(--sf); fill-opacity: .9; }
.rp-mod.s1 { fill: var(--s1); }
.rp-mod.s2 { fill: var(--s2); }
.rp-text { fill: var(--mu); font-family: var(--mono); font-size: 11px; }
.rp-ridge { stroke: var(--mu); }
.rp-north { fill: var(--tx); stroke: var(--tx); }
.spec-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; }
.spec-table td, .spec-table th { padding: 11px 4px; border-bottom: 1px solid var(--ln); text-align: left; font-weight: 500; }
.spec-table tr:last-child td { border-bottom: 0; }
.spec-table td:first-child { color: var(--mu); }
.spec-table td.num, .spec-table th.num { text-align: right; }
.spec-table tfoot td { font-weight: 600; }
.string-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 6px; vertical-align: baseline; }

/* ── Meldungen ──────────────────────────────────────────────── */
.alert { display: flex; gap: 12px; padding: 14px 16px; }
.alert .dot { margin-top: 5px; }
.alert .t { font-size: 14px; font-weight: 600; }
.alert .d { font-size: 13px; color: var(--mu); margin-top: 3px; line-height: 1.4; }
.alert .w { font: 500 10px var(--mono); color: var(--mu); white-space: nowrap; }

/* ── Desktop ────────────────────────────────────────────────── */
@media (min-width: 900px) {
  .hdr { padding: 14px 24px 12px; }
  .tabbar { display: none; }
  .topnav { display: flex; gap: 4px; }
  .topnav a { padding: 8px 14px; border-radius: 99px; font-size: 13px; font-weight: 500; color: var(--mu); display: inline-flex; align-items: center; gap: 8px; }
  .topnav a svg { width: 18px; height: 18px; }
  .topnav a.active { color: var(--ac); background: var(--sf); border: 1px solid var(--ln); }
  .page { max-width: 1100px; padding: 8px 24px 32px; }
  .pg { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
  .col { gap: 16px; }
  .pg.narrow { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
  .pg > .span2, .pg > .h-page, .pg > .pg-head, .pg > .sec-lbl { grid-column: 1 / -1; }
  .pg > .sec-lbl { margin-bottom: -8px; }
  .hero { height: 100%; min-height: 392px; display: flex; align-items: center; }
  .stage { margin: 0 auto; }
  .chart-wrap { height: 280px; }
  .hero-3d { min-height: 380px; }
}