:root {
  color-scheme: light;
  --bg: #f2f5f8;
  --surface: #ffffff;
  --text: #192b3b;
  --muted: #526477;
  --border: #dbe3eb;
  --green: #238266;
  --green-dark: #14563f;
  --green-soft: #edf8f2;
  --gold: #b77814;
  --blue: #386fa8;
  --slate: #5e7286;
  --shadow: 0 3px 14px rgb(28 48 69 / 4%);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5; }
button, input { font: inherit; }
button, input, a, summary { -webkit-tap-highlight-color: transparent; outline-offset: 4px; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible { outline: 3px solid #6ba476; }
button { cursor: pointer; }
button:disabled { opacity: .5; cursor: not-allowed; }
a { color: inherit; }
h1, h2, p { margin-top: 0; }
[hidden] { display: none !important; }
.skip-link { position: fixed; top: -80px; left: 20px; z-index: 10; padding: 12px; background: var(--green-dark); color: white; }
.skip-link:focus { top: 10px; }

/* App shell */
.topbar { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 15px max(28px, calc((100vw - 1384px) / 2)); border-bottom: 1px solid var(--border); background: var(--surface); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 42px; height: 44px; display: grid; place-items: center; border-radius: 13px; background: var(--green-dark); }
.brand-mark svg { width: 27px; fill: #e2efb0; }
.brand strong { display: block; font-size: 20px; font-weight: 750; line-height: 1.25; letter-spacing: -.6px; }
.brand div > span { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }
.header-status { display: flex; align-items: center; gap: 20px; }
.header-link { font-size: 13px; color: #536c5d; text-decoration: none; }
.header-link:hover { color: var(--green-dark); text-decoration: underline; text-underline-offset: 4px; }
.header-link span { margin-left: 4px; }
.status-pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #dedfcb; border-radius: 30px; padding: 7px 12px; background: #f6f5e9; color: #777041; font-size: 12px; font-weight: 700; white-space: nowrap; }
.status-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #b19c43; }
.status-pill[data-state="active"] { color: #28643c; background: #edf5e7; border-color: #ccdfbf; }
.status-pill[data-state="active"] .status-dot { background: #3b8748; box-shadow: 0 0 0 3px rgb(59 135 72 / 9%); }
.status-pill[data-state="blocked"] { color: #8a5c25; background: #fff2dc; border-color: #e7cfaa; }
.status-pill[data-state="blocked"] .status-dot { background: #bc812e; }
.status-pill[data-state="unknown"] { color: #82632d; background: #fbf1df; border-color: #dec99e; }
.status-pill[data-state="unknown"] .status-dot { background: #a78542; }
.status-pill[data-state="monitoring"] { color: #607565; background: #eef2e9; border-color: #dbe3d5; }
.page { max-width: 1440px; margin: auto; padding: 29px 28px 20px; }
.heading-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.eyebrow { margin: 0 0 7px; color: var(--muted); font-size: 11px; font-weight: 750; letter-spacing: 1.2px; line-height: 1.45; }
h1 { margin-bottom: 7px; font-size: clamp(26px, 2.6vw, 34px); font-weight: 700; line-height: 1.2; letter-spacing: -1.15px; }
.subtitle { margin-bottom: 0; color: var(--muted); font-size: 13px; }
.heading-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 7px; min-height: 40px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; font-size: 12px; font-weight: 650; line-height: 1.35; text-decoration: none; transition: background .15s, border-color .15s; }
.button svg { width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.button-secondary { background: var(--surface); color: #4c6655; }
.button-secondary:hover:not(:disabled) { background: #eff4e9; border-color: #b8cbb5; }
.button-primary { background: var(--green-dark); color: white; border-color: var(--green-dark); }
.button-primary:hover:not(:disabled) { background: #256344; border-color: #256344; }
.message { margin: 0 0 18px; padding: 13px 16px; border: 1px solid #cfdfc5; border-radius: 10px; background: var(--green-soft); color: var(--green-dark); font-size: 13px; }
.message.error { color: #85472d; background: #fff0e8; border-color: #eacaba; }

.status-pill[data-state="recovering"] { color: #8a6327; background: #fff3dc; border-color: #dec89c; }
.status-pill[data-state="recovering"] .status-dot { background: #bd8c35; }
.control-state[data-state="recovering"] { color: #8a6327; background: #fff3dc; }
.recovery-box { margin: 12px 0; padding: 12px; border: 1px solid #ded6b8; border-radius: 9px; background: #faf6e9; color: #705f31; font-size: 12px; }
.recovery-box strong { display: block; font-weight: 700; }
.recovery-box p { margin: 5px 0 0; line-height: 1.6; }
/* The three essential cards */
.overview { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.overview > article { min-width: 0; min-height: 268px; border-radius: 16px; }
.overview-card { padding: 21px 23px 18px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); }
.overview-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 24px; }
.overview-card-head .eyebrow { margin: 0; }
.card-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; background: #f0f3e9; color: #75846c; }
.card-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.battery-card { position: relative; padding: 19px 22px 16px; overflow: hidden; background: radial-gradient(ellipse at 95% 5%, #355f45 0, transparent 65%), #193e30; color: #f5f7e9; box-shadow: 0 5px 18px rgb(28 62 41 / 9%); }
.battery-card .eyebrow { color: #c1d1ba; }
.measurement-tag { padding: 4px 8px; border: 1px solid #628063; border-radius: 6px; color: #d8e5c9; background: rgb(255 255 255 / 4%); font-size: 11px; white-space: nowrap; }
.battery-visual { display: flex; align-items: center; justify-content: center; gap: 3px; min-height: 174px; padding: 2px 0 0; }
.battery-gauge { display: block; width: 74%; max-width: 270px; height: auto; overflow: visible; flex-shrink: 1; }
.gauge-track, .gauge-reserve, .gauge-fill { fill: none; stroke-width: 13; }
.gauge-track { stroke: #45634a; }
.gauge-reserve { stroke: #be9252; }
.gauge-fill { stroke: #c9e79b; stroke-linecap: round; transition: stroke-dasharray .5s ease; }
.gauge-marker { stroke: #f0c47b; stroke-width: 3; stroke-linecap: round; }
.gauge-number { fill: #fbfce9; font-family: inherit; font-size: 46px; font-weight: 650; letter-spacing: -2px; font-variant-numeric: tabular-nums; }
.gauge-caption { fill: #c7d4bc; font-family: inherit; font-size: 12px; }
.gauge-edge { fill: #b0c2a8; font-family: inherit; font-size: 11px; }
.battery-energy { flex: 0 0 auto; padding-top: 26px; }
.battery-energy strong { display: block; color: #ebf4cf; font-size: 29px; font-weight: 600; line-height: 1.2; letter-spacing: -.9px; font-variant-numeric: tabular-nums; }
.battery-energy > span { display: block; margin-top: 5px; color: #c0d0b8; font-size: 12px; line-height: 1.5; }
.battery-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid #466149; padding-top: 11px; }
.reserve-badge { display: inline-flex; align-items: center; gap: 6px; color: #efd4a2; font-size: 11px; font-weight: 600; line-height: 1.45; }
.reserve-badge svg { width: 17px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.reserve-badge[data-verified="true"] { color: #d7eab3; }
.reserve-badge[data-verified="false"] { color: #f7c483; }
#battery-freshness { color: #bbccb4; font-size: 11px; text-align: right; }
.battery-card[data-quality="stale"] .measurement-tag, .battery-card[data-quality="manual"] .measurement-tag { color: #f4d3a1; border-color: #aa8c5e; background: #69583940; }
.battery-card[data-quality="stale"] .gauge-fill, .battery-card[data-quality="manual"] .gauge-fill { stroke: #d8bf83; }
.battery-card[data-quality="missing"] .gauge-number { fill: #c7d0be; }
.next-card { display: flex; flex-direction: column; }
.next-time { margin: 14px 0 0; font-size: clamp(30px, 2.7vw, 39px); font-weight: 650; letter-spacing: -1.5px; line-height: 1.25; font-variant-numeric: tabular-nums; }
.next-day { margin: 4px 0 15px; font-size: 13px; color: var(--muted); }
.next-details { display: flex; align-items: flex-start; gap: 20px; }
.next-details > div { display: flex; flex-direction: column; gap: 3px; }
.next-details > div > span { color: var(--muted); font-size: 12px; }
.next-details strong { font-size: 20px; font-weight: 650; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.next-state { margin: 12px 0 0; color: #667867; font-size: 12px; line-height: 1.5; }
.next-state[data-state="active"] { color: #367247; }
.next-state[data-state="blocked"] { color: #99662b; font-weight: 600; }
.next-state[data-state="monitoring"] { color: #64776a; }
.text-link { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; padding-top: 10px; margin-top: auto; color: var(--green-dark); font-size: 12px; font-weight: 650; text-decoration: none; }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.solar-card { background: linear-gradient(135deg, #fffdf5, #f6f3e4); border-color: #e3dfc8; }
.sun-symbol { background: #f3ead1; color: #b2852c; }
.solar-value { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 1px; font-size: 47px; font-weight: 650; letter-spacing: -1.8px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.solar-value small { font-size: 15px; font-weight: 500; letter-spacing: 0; color: #8a8669; }
.metric-detail { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.solar-coverage { margin-top: 18px; }
.solar-coverage > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 7px; font-size: 12px; color: #7e7e62; }
.solar-coverage strong { color: #6d703b; font-size: 13px; }
.coverage-track { height: 7px; overflow: hidden; border-radius: 8px; background: #e7e2c8; }
.coverage-track > span { display: block; width: 0; height: 100%; border-radius: inherit; background: #b4ab64; transition: width .5s ease; }
.solar-note { margin: 12px 0 0; color: #858366; font-size: 12px; line-height: 1.5; }

/* Compact secondary totals */
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.metric { padding: 14px 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }
.metric-top { display: flex; align-items: center; justify-content: space-between; gap: 9px; color: #617465; font-size: 12px; font-weight: 600; }
.metric-icon { width: 19px; height: 19px; fill: none; stroke: #7d8e78; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.metric-euro { color: #588251; font-size: 19px; line-height: 19px; }
.metric-value { display: flex; align-items: baseline; gap: 6px; margin: 4px 0 0; font-size: 31px; font-weight: 650; line-height: 1.3; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.metric-value small { font-size: 13px; font-weight: 500; letter-spacing: 0; color: #7c8977; }
.metric .metric-detail { margin-top: 2px; }
.metric-cost { border-color: #d5e1c8; background: #edf3e5; }
.metric-cost .metric-value { color: var(--green-dark); }

/* Upcoming weather */
.panel { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 21px 22px 17px; }
.panel-header .eyebrow { margin-bottom: 4px; font-size: 10px; letter-spacing: 1.1px; }
h2 { margin-bottom: 0; font-size: 19px; font-weight: 650; line-height: 1.3; letter-spacing: -.5px; }
.subtle-tag { padding: 4px 8px; border: 1px solid #e0e6d8; border-radius: 6px; background: #f3f5ee; color: #6f7e68; font-size: 11px; line-height: 1.4; white-space: nowrap; }
.subtle-tag.demo { color: #90662c; background: #fff5df; border-color: #ead7af; }
.weather-panel { margin-bottom: 22px; }
.weather-panel .panel-header { padding: 17px 22px 8px; }
.weather-panel h2 { font-size: 20px; }
.weather-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 22px 12px; }
.weather-days { display: flex; flex-shrink: 0; gap: 5px; }
.weather-day-button { border: 1px solid transparent; border-radius: 7px; padding: 5px 10px; background: transparent; color: #7a8674; font-size: 12px; font-weight: 550; }
.weather-day-button:hover { background: #f0f3e9; color: #3c6446; }
.weather-day-button[aria-pressed="true"] { border-color: #dbe4cc; background: #eaf1df; color: #365d35; font-weight: 700; }
#weather-summary { margin: 0; color: #73806c; font-size: 12px; text-align: right; line-height: 1.5; }
.weather-strip { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 7px; padding: 0 22px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #c0ceaf transparent; }
.weather-hour-card { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 9px 5px 8px; border: 1px solid #e8ebdf; border-radius: 10px; background: #f9faf4; text-align: center; }
.weather-hour-card.current { border-color: #b0c59a; background: #f0f6e6; }
.weather-hour-card.is-night { background: #f2f4f0; border-color: #e2e7de; }
.weather-hour-card.is-night.current { background: #eaf0e5; border-color: #b0c59a; }
.weather-hour-label { margin: 0; color: #5c705a; font-size: 12px; font-weight: 650; }
.weather-art { width: 39px; height: 39px; display: block; margin: 4px 0 3px; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.weather-art svg { display: block; width: 100%; height: 100%; }
.weather-sun { fill: #f2ce72; stroke: #c49a3a; stroke-width: 1.3; }
.weather-rays { fill: none; stroke: #d5a743; stroke-width: 1.7; }
.weather-moon { fill: #e1e5bf; stroke: #929f83; stroke-width: 1.3; }
.weather-cloud { fill: #e2e9e4; stroke: #758f83; stroke-width: 1.3; }
.weather-drop { fill: none; stroke: #78a0b8; stroke-width: 2; }
.weather-snow { fill: none; stroke: #93b0bd; stroke-width: 1.8; }
.weather-lightning { fill: #d8ae48; stroke: #c19836; stroke-width: 1; }
.weather-fog { fill: none; stroke: #a0aea3; stroke-width: 1.6; }
.weather-unknown { fill: #8a9c7c; stroke: none; font-family: inherit; font-size: 28px; }
.weather-condition { min-height: 18px; max-width: 100%; margin: 0; color: #7a8371; font-size: 11px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.weather-temperature { display: block; margin: 2px 0 0; color: #354f39; font-size: 22px; line-height: 1.3; font-weight: 600; letter-spacing: -.6px; font-variant-numeric: tabular-nums; }
.weather-temperature small { margin-left: 2px; color: #728269; font-size: 12px; font-weight: 500; letter-spacing: 0; }
.weather-rain { display: flex; align-items: center; gap: 3px; margin: 0; color: #5e8195; font-size: 11px; line-height: 1.5; }
.weather-rain svg { width: 11px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.weather-solar { display: flex; flex-direction: column; gap: 3px; width: 100%; max-width: 85px; margin-top: 7px; }
.weather-pv-track { display: block; height: 4px; overflow: hidden; border-radius: 6px; background: #e5e9da; }
.weather-pv-track > i { display: block; height: 100%; background: #b4a255; border-radius: inherit; }
.weather-pv-label { color: #898265; font-size: 10px; line-height: 1.3; white-space: nowrap; }
.weather-footnote { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 23px 12px; color: #7b8775; font-size: 11px; }
.weather-footnote > span:first-child { display: flex; align-items: center; gap: 5px; }
.weather-footnote > span:last-child { text-align: right; }
.rain-key { display: inline-block; width: 6px; height: 8px; border-radius: 70% 30% 55% 45%; transform: rotate(25deg); background: #7d9eb0; }
.weather-unavailable { grid-column: 1 / -1; margin: 0; padding: 25px 15px; border: 1px dashed #d8e0d0; border-radius: 9px; color: #7b8870; background: #fafbf6; text-align: center; font-size: 13px; }

/* Charts and charge windows */
.workspace { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(300px, 1fr); align-items: start; gap: 20px; }
.main-column, .side-column { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.chart-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin: 0 22px 14px; font-size: 12px; color: #70806a; }
.chart-legend > span { display: flex; align-items: center; gap: 6px; }
.legend-line { display: inline-block; width: 17px; height: 3px; border-radius: 3px; }
.legend-line.soc { background: var(--green); }
.legend-line.pv { background: var(--gold); }
.legend-line.load { background: var(--slate); }
.legend-square { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.legend-square.charge { background: #9ab9cf; }
.chart-frame { max-width: 100%; padding: 0 17px 0 10px; }
.chart-frame svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.empty-chart { display: flex; align-items: center; justify-content: center; flex-direction: column; height: 285px; color: #8e9b85; font-size: 13px; }
.empty-chart svg { width: 45px; height: 45px; margin-bottom: 15px; fill: none; stroke: #b5c3ac; stroke-width: 1.5; }
.chart-explorer { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 15px; padding: 5px 22px 13px; }
.chart-explorer label { color: #72826a; font-size: 12px; }
.chart-explorer input { width: 100%; height: 18px; margin: 0; accent-color: var(--green); }
.chart-explorer output { grid-column: 1 / -1; min-height: 27px; margin-top: 8px; color: #607455; font-size: 12px; line-height: 1.65; font-variant-numeric: tabular-nums; }
.chart-footnote { display: flex; align-items: center; justify-content: space-between; gap: 13px; padding: 12px 22px; border-top: 1px solid #e9ede2; color: #73816b; font-size: 11px; }
.chart-footnote > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.chart-footnote > span:last-child { text-align: right; }
.chart-footnote strong { font-weight: 650; color: #5f7455; }
.reserve-line { display: inline-block; width: 15px; border-top: 1px dashed #ae9466; }
.chart-grid { stroke: #e8ede1; stroke-width: 1; }
.chart-tick { font-family: inherit; font-size: 12px; fill: #7a8a70; }
.chart-label { font-family: inherit; font-size: 12px; fill: #718568; }
.chart-reserve { stroke: #b29d70; stroke-width: 1.3; stroke-dasharray: 4 4; }
.chart-focus-line { stroke: #9aaf8b; stroke-width: 1; stroke-dasharray: 3 3; }
.chart-area { fill: #edf3e4; }
.chart-soc { fill: none; stroke: var(--green); stroke-width: 2.8; stroke-linejoin: round; stroke-linecap: round; }
.chart-pv { fill: none; stroke: var(--gold); stroke-width: 2.1; stroke-linejoin: round; stroke-linecap: round; }
.chart-load { fill: none; stroke: #738175; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.chart-charge { fill: #9bbad0; opacity: .75; }
.chart-soc-dot { fill: var(--green); stroke: white; stroke-width: 2; }
.chart-selected-time { font-family: inherit; font-size: 12px; font-weight: 650; fill: #617a56; }
.chart-night { fill: #f6f8f0; }
.chart-tooltip { pointer-events: none; }
.chart-tooltip rect { fill: #fffef9; stroke: #d5e0ca; stroke-width: 1; }
.chart-tooltip text { font-family: inherit; font-size: 11px; fill: #5c7250; }
.chart-tooltip .tooltip-title { font-weight: 700; fill: #3e6435; }
.chart-tooltip .tooltip-soc { fill: var(--green); font-weight: 600; }
.table-scroll { max-width: 100%; overflow: auto; }
.windows-table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; white-space: nowrap; }
.windows-table thead { border-top: 1px solid #e9ede2; border-bottom: 1px solid #e9ede2; background: #f8faf2; color: #72826b; font-size: 11px; }
.windows-table th { padding: 11px 14px; font-weight: 600; }
.windows-table td { padding: 15px 14px; border-bottom: 1px solid #e9ede2; vertical-align: top; font-variant-numeric: tabular-nums; }
.windows-table th:first-child, .windows-table td:first-child { padding-left: 22px; }
.windows-table th:last-child, .windows-table td:last-child { padding-right: 22px; }
.window-time { display: block; color: #3c5e42; font-weight: 650; }
.window-day { display: block; margin-top: 2px; color: #75856c; font-size: 12px; }
.window-reason { display: block; max-width: 260px; margin-top: 4px; color: #7a886f; font-size: 11px; line-height: 1.5; white-space: normal; }
.window-target { color: var(--green); font-weight: 650; }
.empty-cell { padding: 27px 22px !important; color: #7d8b72; font-size: 13px; text-align: center; }
.planning-note { display: flex; align-items: flex-start; gap: 12px; padding: 16px 21px; background: #f8faf1; }
.planning-note p { margin: 0; color: #7b866c; font-size: 12px; line-height: 1.7; }
.planning-note strong { color: #64764f; font-weight: 650; }
.note-symbol { color: #b4a954; font-size: 24px; line-height: 25px; }

/* Financial estimates */
.energy-costs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 22px 20px; overflow: hidden; border: 1px solid #dfe7d3; border-radius: 10px; background: #f8faf2; }
.energy-costs > div { display: flex; flex-direction: column; gap: 5px; padding: 15px; border-left: 1px solid #dfe7d3; }
.energy-costs > div:first-child { border: 0; }
.energy-costs > div > span { color: #718269; font-size: 12px; }
.energy-costs strong { font-size: 26px; font-weight: 600; letter-spacing: -.6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.energy-costs small { color: #7c8c73; font-size: 12px; font-weight: 450; }
.energy-costs .export-credit strong { color: #4f8151; }
.energy-costs .net-cost { background: #eaf2df; }
.energy-costs .net-cost strong { color: var(--green-dark); }
.injection-table caption { padding: 0 22px 12px; color: #607652; font-size: 12px; font-weight: 600; text-align: left; }
.injection-table td { padding-top: 12px; padding-bottom: 12px; }
.injection-receipt { color: var(--green); font-weight: 600; }
.injection-panel .fine-print { border-top: 0; }
.tariff-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin: 1px 22px 18px; }
.tariff-grid > div { display: flex; flex-direction: column; padding: 0 16px; border-left: 1px solid var(--border); }
.tariff-grid > div:first-child { padding-left: 0; border: 0; }
.tariff-grid > div:last-child { padding-right: 0; }
.tariff-hours { color: #5c7456; font-size: 13px; font-weight: 650; }
.tariff-grid strong { margin: 5px 0; color: #3c644b; font-size: 24px; font-weight: 600; letter-spacing: -.6px; white-space: nowrap; }
.tariff-grid strong small { color: #7d8c72; font-size: 11px; font-weight: 450; letter-spacing: 0; }
.tariff-grid > div > span:last-child { color: #79896f; font-size: 11px; line-height: 1.6; }
.fine-print { margin: 0; padding: 14px 22px 18px; border-top: 1px solid #e9ede2; color: #7b886f; font-size: 12px; line-height: 1.7; }

/* Inverter connection: accessible stop remains available while calculating */
.connection-panel { padding: 21px; }
.connection-head { display: flex; align-items: center; gap: 11px; }
.connection-symbol { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 10px; background: #eef3e5; }
.connection-symbol svg { width: 24px; height: 24px; fill: none; stroke: #729265; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.connection-head h2 { font-size: 18px; }
.connection-head p { margin: 3px 0 0; color: #75876a; font-size: 12px; }
.connection-description { margin: 15px 0; color: #78866e; font-size: 12px; line-height: 1.75; }
.connection-description strong { font-weight: 650; }
.control-state { margin: 14px 0 12px; padding: 10px 12px; border: 1px solid #dfe7d6; border-radius: 8px; background: #f1f5e9; color: #60734f; font-size: 13px; font-weight: 650; }
.control-state[data-state="active"] { background: #eaf4e2; border-color: #ccdfbe; color: #326c3c; }
.control-state[data-state="blocked"] { background: #fff2dc; border-color: #ead3ac; color: #8d6229; }
.control-facts { margin: 0; font-size: 12px; line-height: 1.6; }
.control-facts > div { padding: 10px 0; border-bottom: 1px solid #e9ede2; }
.control-facts dt { color: #79896d; }
.control-facts dd { margin: 3px 0 0; color: #3e5c3c; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.control-facts dd.verified { color: #35783c; }
.control-action { margin: 12px 0 0; color: #506a48; font-size: 12px; line-height: 1.7; }
.preflight-list { list-style: none; margin: 15px 0 17px; padding: 0; color: #758568; font-size: 12px; }
.preflight-list li { position: relative; margin: 8px 0; padding-left: 15px; line-height: 1.6; }
.preflight-list li::before { content: ""; position: absolute; top: 7px; left: 0; width: 6px; height: 6px; border: 1px solid #b8c8a8; border-radius: 50%; background: #eaf1df; }
.connection-actions { display: grid; gap: 8px; }
.read-button { width: 100%; }
.stop-button { width: 100%; color: #8a5132; border: 1px solid #d8bba5; background: #fff4e9; font-size: 12px; }
.stop-button:hover:not(:disabled) { background: #fae8d5; border-color: #b98b65; }
.control-note { margin: 14px 0 0; padding-top: 13px; border-top: 1px solid #e7eddf; color: #738368; font-size: 12px; line-height: 1.75; }
.busy .button { pointer-events: none; }
.busy .stop-button { pointer-events: auto; }
.button[data-loading="true"] { opacity: .6; }

/* Collapsible settings */
.settings-summary { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 18px 21px; list-style: none; cursor: pointer; font-size: 14px; font-weight: 650; color: #536d47; }
.settings-summary::-webkit-details-marker { display: none; }
.settings-summary > span:last-child { color: #8ba279; font-size: 23px; font-weight: 400; line-height: 1; transition: transform .15s; }
.settings-panel[open] .settings-summary { border-bottom: 1px solid #e4ebdc; }
.settings-panel[open] .settings-summary > span:last-child { transform: rotate(45deg); }
.settings-panel .panel-header { padding: 19px 21px; }
.settings-panel .panel-header h2 { font-size: 17px; }
.settings-panel form { padding: 0 21px 22px; }
.manual-dot { width: 7px; height: 7px; border-radius: 50%; background: #bfcdb3; }
.field { margin-bottom: 19px; }
.field > label, .power-field legend { display: block; margin-bottom: 7px; color: #637855; font-size: 12px; font-weight: 650; }
.input-unit { position: relative; display: flex; align-items: center; }
.input-unit input { width: 100%; min-width: 0; padding: 11px 47px 11px 12px; appearance: textfield; color: #3d5838; border: 1px solid #d5e0ca; border-radius: 8px; background: #fffefa; font-size: 14px; font-weight: 550; }
.input-unit input::-webkit-inner-spin-button { appearance: none; }
.input-unit > span { position: absolute; right: 12px; color: #87977a; font-size: 12px; pointer-events: none; }
.input-unit:focus-within input { border-color: #78a577; }
.input-unit input[readonly] { background: #f1f5e9; color: #506a46; border-style: dashed; cursor: default; }
.field-help { margin: 7px 0 0; color: #7e8e70; font-size: 12px; line-height: 1.6; }
.field-help.stale { color: #97682c; font-weight: 550; }
.soc-confirm-button { padding: 6px 0 0; border: 0; background: transparent; color: var(--green); font-size: 12px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.soc-confirm-button:hover { color: var(--green-dark); }
.soc-confirm-button:disabled { opacity: .6; cursor: default; }
.power-field { margin: 0 0 20px; padding: 0; border: 0; }
.power-field legend { padding: 0; }
.segmented-control { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.segmented-control label { position: relative; cursor: pointer; }
.segmented-control input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.segmented-control label > span { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 2px; padding: 10px 4px; border: 1px solid #dae3cf; border-radius: 8px; background: #fafcf5; color: #7d8f6d; font-size: 16px; font-weight: 650; }
.segmented-control small { color: #7e906f; font-size: 10px; font-weight: 450; letter-spacing: 0; }
.segmented-control input:checked + span { border-color: #7b9e69; box-shadow: inset 0 0 0 .5px #7b9e69; background: #edf4e3; color: var(--green-dark); }
.segmented-control input:checked + span small { color: #69895a; }
.segmented-control input:focus-visible + span { outline: 3px solid #62a581; outline-offset: 3px; }
.reserve-box { position: relative; margin-bottom: 18px; padding: 14px 13px 12px 42px; border: 1px solid #d5e5c7; border-radius: 9px; background: #eff6e6; }
.shield-icon { position: absolute; top: 16px; left: 12px; }
.shield-icon svg { width: 19px; height: 21px; fill: none; stroke: #74955e; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.reserve-box > div { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.reserve-box label { color: #607f4e; font-size: 12px; font-weight: 650; }
.reserve-control { display: flex; align-items: center; gap: 3px; }
.reserve-control input { width: 38px; padding: 0 0 2px; border: 0; border-bottom: 1px solid #b5cda5; appearance: textfield; background: transparent; color: #3a6636; font-size: 18px; font-weight: 650; text-align: right; }
.reserve-control input::-webkit-inner-spin-button { appearance: none; }
.reserve-control > span { color: #6a8562; font-size: 12px; }
.reserve-box p { margin: 7px 0 0; color: #7c9269; font-size: 11px; line-height: 1.5; }
.advanced-settings { border-top: 1px solid #e2ead8; }
.advanced-settings summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 0; list-style: none; cursor: pointer; color: #748a62; font-size: 12px; font-weight: 600; }
.advanced-settings summary::-webkit-details-marker { display: none; }
.advanced-settings summary > span { color: #91a47e; font-size: 19px; font-weight: 400; }
.advanced-settings[open] summary > span { transform: rotate(45deg); }
.advanced-content { padding-top: 4px; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.field-pair .input-unit input { padding-right: 36px; }
.field-pair .field { margin-bottom: 11px; }
.offset-help { margin: -5px 0 18px; }
.save-button { width: 100%; margin: 0 0 15px; }
.calculate-button { width: 100%; margin-top: 6px; padding: 12px 10px; font-size: 13px; }
.calculate-button svg { width: 15px; }

/* Context and footnotes */
.warnings-box { padding: 17px 20px; border: 1px solid #e4d5b3; border-radius: 12px; background: #fff7e6; }
.warnings-box h2 { color: #8c6b32; font-size: 14px; }
.warnings-box ul { margin: 10px 0 0; padding-left: 16px; color: #967b4d; font-size: 12px; line-height: 1.8; }
.scenario-details { margin-top: 22px; border-top: 1px solid #dfe5d6; padding-top: 15px; color: #768769; font-size: 12px; }
.scenario-details > summary { width: fit-content; cursor: pointer; font-weight: 600; }
.scenario-banner { display: flex; align-items: flex-start; gap: 12px; margin: 14px 0 0; padding: 14px 16px; border: 1px solid #dae4de; border-radius: 10px; background: #edf3ed; color: #62796a; font-size: 12px; line-height: 1.75; }
.scenario-banner p { margin: 0; }
.scenario-banner strong { font-weight: 700; }
.info-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; border: 1.5px solid #849c88; border-radius: 50%; font-family: serif; font-size: 12px; font-weight: 700; }
.page-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 22px; padding: 17px 0 0; border-top: 1px solid #dfe5d6; color: #7b8d6d; font-size: 11px; }
.page-footer > span:first-child { display: flex; align-items: center; gap: 7px; }
.footer-dot { display: inline-block; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: #96ae7c; }

/* Narrower desktop */
@media (max-width: 1200px) {
  .heading-row { align-items: flex-start; }
  .heading-actions { flex-direction: column; align-items: stretch; }
  .heading-actions .button { min-height: 36px; font-size: 11px; }
  .overview { grid-template-columns: 1.15fr 1fr 1fr; gap: 12px; }
  .overview-card, .battery-card { padding: 19px 18px 16px; }
  .overview-card-head .eyebrow { font-size: 10px; letter-spacing: .8px; }
  .measurement-tag { padding: 4px 6px; font-size: 10px; }
  .battery-energy strong { font-size: 26px; }
  .battery-energy > span, .reserve-badge, #battery-freshness { font-size: 10px; }
  .next-time { font-size: 32px; }
  .next-day { font-size: 12px; }
  .next-details { gap: 12px; }
  .next-details > div > span { font-size: 11px; }
  .next-details strong { font-size: 19px; }
  .solar-value { font-size: 43px; }
  .solar-coverage > div:first-child, .solar-note { font-size: 11px; }
  .workspace { grid-template-columns: minmax(0, 2fr) minmax(285px, 1fr); gap: 16px; }
  .main-column, .side-column { gap: 17px; }
  .weather-strip { gap: 6px; }
  .weather-condition { font-size: 10px; }
  .tariff-grid > div { padding: 0 10px; }
  .tariff-grid strong { font-size: 20px; }
  .tariff-grid strong small, .tariff-grid > div > span:last-child { font-size: 10px; }
}

/* Tablet */
@media (max-width: 960px) {
  .topbar { padding: 14px 22px; }
  .page { padding: 25px 22px 18px; }
  .heading-row { gap: 18px; }
  .heading-actions .button { padding: 8px 10px; }
  .overview { grid-template-columns: 1.15fr 1fr; }
  .overview > article { min-height: 265px; }
  .solar-card { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; align-items: center; min-height: 125px !important; padding: 17px 22px; }
  .solar-card .overview-card-head { grid-column: 1; }
  .solar-card .solar-value { grid-column: 1; grid-row: 2 / 4; margin: 2px 0 0; font-size: 40px; }
  .solar-card .metric-detail { grid-column: 2; grid-row: 1; font-size: 12px; }
  .solar-card .solar-coverage { grid-column: 2; grid-row: 2; margin-top: 3px; }
  .solar-card .solar-note { grid-column: 2; grid-row: 3; margin-top: 8px; }
  .solar-card .sun-symbol { display: none; }
  .battery-gauge { max-width: 250px; }
  .battery-energy strong { font-size: 29px; }
  .next-card { padding-left: 23px; padding-right: 23px; }
  .next-time { font-size: 37px; }
  .metrics { gap: 12px; margin-bottom: 18px; }
  .metric { padding: 14px 16px; }
  .metric-top, .metric .metric-detail { font-size: 11px; }
  .metric-value { font-size: 29px; }
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .side-column { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .warnings-box { grid-column: 1 / -1; }
  .weather-panel .panel-header, .weather-toolbar { padding-left: 19px; padding-right: 19px; }
  .weather-strip { grid-template-columns: repeat(8, minmax(83px, 1fr)); padding-left: 19px; padding-right: 19px; }
  .weather-footnote { padding-left: 19px; padding-right: 19px; font-size: 10px; }
  .chart-frame { padding-left: 8px; }
  .tariff-grid strong { font-size: 24px; }
  .tariff-grid > div > span:last-child { font-size: 11px; }
}

/* Mobile: meaningful order, larger touch controls, scrollable forecast */
@media (max-width: 620px) {
  .topbar { min-height: 72px; gap: 10px; padding: 13px 16px; }
  .brand { gap: 9px; }
  .brand-mark { width: 36px; height: 39px; border-radius: 11px; }
  .brand-mark svg { width: 24px; }
  .brand strong { font-size: 18px; }
  .brand div > span { font-size: 11px; }
  .header-status { gap: 8px; }
  .header-link { display: none; }
  .status-pill { gap: 6px; padding: 6px 9px; font-size: 11px; }
  .status-dot { width: 6px; height: 6px; }
  .page { padding: 23px 14px 18px; }
  .heading-row { display: block; margin-bottom: 19px; }
  .heading-row .eyebrow { font-size: 10px; letter-spacing: .9px; }
  h1 { max-width: 350px; margin-bottom: 8px; font-size: 29px; letter-spacing: -.9px; }
  .subtitle { max-width: 340px; font-size: 13px; line-height: 1.65; }
  .heading-actions { flex-direction: row; justify-content: flex-start; gap: 8px; margin-top: 15px; }
  .heading-actions .button { min-height: 38px; padding: 9px 10px; font-size: 11px; }
  .heading-actions .button svg { width: 15px; height: 15px; }
  .overview { grid-template-columns: 1fr; gap: 12px; }
  .overview > article { min-height: 0; }
  .battery-card { padding: 19px 21px 16px; }
  .battery-card .overview-card-head .eyebrow, .measurement-tag { font-size: 11px; }
  .battery-visual { min-height: 185px; gap: 7px; }
  .battery-gauge { width: 73%; max-width: 270px; }
  .battery-energy { padding-top: 30px; }
  .battery-energy strong { font-size: 30px; }
  .battery-energy > span { font-size: 12px; }
  .reserve-badge, #battery-freshness { font-size: 11px; }
  .next-card { padding: 19px 21px; }
  .next-card .overview-card-head .eyebrow { font-size: 11px; }
  .next-time { margin-top: 12px; font-size: 35px; }
  .next-day { margin: 3px 0 14px; font-size: 13px; }
  .next-details { gap: 24px; }
  .next-details > div > span { font-size: 12px; }
  .next-details strong { font-size: 21px; }
  .next-state { margin-top: 12px; font-size: 12px; }
  .text-link { padding-top: 10px; font-size: 12px; }
  .solar-card { display: block; grid-column: auto; padding: 19px 21px; min-height: 0 !important; }
  .solar-card .overview-card-head .eyebrow { font-size: 11px; }
  .solar-card .sun-symbol { display: grid; }
  .solar-card .solar-value { margin: 8px 0 0; font-size: 44px; }
  .solar-card .solar-coverage { margin-top: 16px; }
  .solar-coverage > div:first-child { font-size: 12px; }
  .solar-card .solar-note { margin-top: 10px; font-size: 12px; }
  .metrics { grid-template-columns: 1fr; gap: 8px; margin-bottom: 17px; }
  .metric { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; padding: 14px 17px; }
  .metric-top { grid-column: 1; align-self: end; font-size: 12px; }
  .metric-icon, .metric-euro { display: none; }
  .metric-value { grid-column: 2; grid-row: 1 / 3; align-self: center; margin: 0; font-size: 29px; white-space: nowrap; }
  .metric-value small { font-size: 12px; }
  .metric .metric-detail { grid-column: 1; margin-top: 4px; padding-right: 7px; font-size: 11px; }
  .panel { border-radius: 12px; }
  .panel-header { padding: 19px 17px 15px; gap: 8px; }
  .panel-header .eyebrow { font-size: 9px; letter-spacing: .9px; }
  h2 { font-size: 18px; }
  .subtle-tag { padding: 4px 6px; font-size: 10px; }
  .weather-panel { margin-bottom: 17px; }
  .weather-panel .panel-header { padding: 17px 17px 11px; }
  .weather-panel .panel-header .eyebrow { font-size: 9px; }
  .weather-panel h2 { font-size: 21px; }
  .weather-toolbar { display: block; padding: 0 17px 12px; }
  .weather-days { gap: 4px; margin-bottom: 9px; }
  .weather-day-button { padding: 6px 9px; font-size: 12px; }
  #weather-summary { font-size: 12px; text-align: left; }
  .weather-strip { grid-template-columns: repeat(8, 102px); gap: 7px; padding: 0 17px 6px; scroll-snap-type: x proximity; }
  .weather-hour-card { padding: 10px 7px 9px; scroll-snap-align: start; }
  .weather-hour-label { font-size: 13px; }
  .weather-art { width: 44px; height: 44px; }
  .weather-condition { font-size: 11px; }
  .weather-temperature { font-size: 24px; }
  .weather-rain { font-size: 12px; }
  .weather-solar { margin-top: 8px; }
  .weather-pv-label { font-size: 11px; }
  .weather-footnote { display: block; padding: 8px 17px 13px; font-size: 10px; line-height: 1.6; }
  .weather-footnote > span:last-child { display: block; margin-top: 5px; text-align: left; }
  .workspace, .main-column, .side-column { gap: 17px; }
  .side-column { display: flex; flex-direction: column; }
  .side-column > * { width: 100%; }
  .chart-legend { margin: 0 17px 10px; gap: 9px 14px; font-size: 11px; }
  .legend-line { width: 14px; height: 2px; }
  .legend-square { width: 8px; height: 8px; }
  .chart-frame { overflow-x: auto; padding: 0 8px 0 2px; }
  .chart-frame svg { min-width: 540px; }
  .chart-explorer { padding: 8px 17px 12px; gap: 10px; }
  .chart-explorer label { font-size: 11px; }
  .chart-explorer output { font-size: 12px; line-height: 1.75; }
  .chart-footnote { align-items: flex-start; padding: 12px 17px; font-size: 10px; line-height: 1.6; }
  .empty-chart { height: 250px; padding: 0 25px; text-align: center; }
  .windows-table { font-size: 12px; }
  .windows-table th, .windows-table td { padding: 12px 11px; }
  .windows-table th { font-size: 11px; }
  .windows-table th:first-child, .windows-table td:first-child { padding-left: 17px; }
  .windows-table th:last-child, .windows-table td:last-child { padding-right: 17px; }
  .window-time { font-size: 13px; }
  .window-day { font-size: 11px; }
  .window-reason { min-width: 180px; font-size: 11px; }
  .planning-note { gap: 9px; padding: 15px 17px; }
  .planning-note p { font-size: 12px; }
  .energy-costs { margin: 0 17px 17px; }
  .energy-costs > div { padding: 12px 8px; }
  .energy-costs > div > span { font-size: 10px; line-height: 1.5; }
  .energy-costs strong { font-size: 21px; }
  .energy-costs small { font-size: 11px; }
  .injection-table caption { padding-left: 17px; padding-right: 17px; font-size: 12px; }
  .injection-table th { white-space: normal; font-size: 10px; }
  .injection-table td { font-size: 11px; }
  .injection-table th, .injection-table td { padding-left: 8px; padding-right: 8px; }
  .tariff-grid { grid-template-columns: 1fr; gap: 12px; margin: 0 17px 18px; }
  .tariff-grid > div { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 12px 0 0; border: 0; border-top: 1px solid var(--border); }
  .tariff-grid > div:first-child { padding-top: 0; }
  .tariff-grid strong { grid-column: 2; grid-row: 1 / 3; align-self: center; margin: 0; font-size: 24px; }
  .tariff-grid strong small { font-size: 11px; }
  .tariff-grid > div > span:last-child { font-size: 11px; }
  .fine-print { padding: 14px 17px 18px; font-size: 12px; }
  .connection-panel { padding: 21px; }
  .connection-head h2 { font-size: 19px; }
  .control-state { font-size: 14px; }
  .connection-actions .button { min-height: 43px; font-size: 13px; }
  .field > label, .power-field legend { font-size: 13px; }
  .input-unit input { padding-top: 12px; padding-bottom: 12px; font-size: 16px; }
  .input-unit > span { font-size: 13px; }
  .segmented-control label > span { padding: 12px 5px; font-size: 18px; }
  .segmented-control small { font-size: 11px; }
  .reserve-box { padding-top: 15px; padding-bottom: 13px; }
  .reserve-box label { font-size: 13px; }
  .reserve-box p { font-size: 12px; }
  .advanced-settings summary { font-size: 13px; }
  .calculate-button { min-height: 45px; font-size: 14px; }
  .warnings-box { padding: 18px 21px; }
  .scenario-details { margin-top: 20px; font-size: 12px; }
  .scenario-banner { gap: 9px; padding: 13px; font-size: 12px; }
  .page-footer { align-items: flex-start; flex-direction: column; gap: 8px; margin-top: 20px; font-size: 11px; }
}

@media (max-width: 360px) {
  .page { padding-left: 11px; padding-right: 11px; }
  .topbar { padding-left: 13px; padding-right: 13px; }
  .brand strong { font-size: 17px; }
  .status-pill { font-size: 10px; }
  .battery-card { padding-left: 17px; padding-right: 17px; }
  .battery-energy strong { font-size: 27px; }
  .battery-energy > span, .reserve-badge, #battery-freshness { font-size: 10px; }
  .metric-value { font-size: 25px; }
  .metric-top { font-size: 11px; }
  .heading-actions { gap: 6px; }
  .heading-actions .button { padding-left: 8px; padding-right: 8px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* Professional dashboard: consistent hierarchy and readable data at every width. */
html { scroll-behavior: smooth; scroll-padding-top: 86px; }
body { font-size: 15px; line-height: 1.55; }
[id] { scroll-margin-top: 86px; }
.topbar { min-height: 76px; background: #fff; border-color: var(--border); }
.brand-mark { background: #173d35; }
.brand-mark svg { fill: #c8eede; }
.brand div > span, .header-link, .subtitle { color: var(--muted); font-size: 14px; }
.brand strong { color: #18323c; }
.page { padding-top: 30px; }
.heading-row { margin-bottom: 24px; }
h1 { color: #172f40; font-size: clamp(27px, 2.7vw, 36px); letter-spacing: -1px; }
h2 { color: #233b4d; font-size: 21px; letter-spacing: -.45px; }
.eyebrow, .panel-header .eyebrow, .overview-card-head .eyebrow,
.battery-card .overview-card-head .eyebrow, .next-card .overview-card-head .eyebrow,
.solar-card .overview-card-head .eyebrow, .heading-row .eyebrow,
.weather-panel .panel-header .eyebrow { color: var(--muted); font-size: 12px; letter-spacing: .85px; }
.button, .heading-actions .button, .connection-actions .button { min-height: 42px; font-size: 13px; }
.button-secondary { color: #35516b; border-color: #d4dfe9; }
.button-secondary:hover:not(:disabled) { background: #f0f5fa; border-color: #9db8ce; }
.button-primary { background: #176847; border-color: #176847; }
.status-pill { font-size: 13px; padding: 8px 13px; }
.status-pill[data-state="active"] { color: #186343; background: #ecf8f1; border-color: #c9e6d6; }
.status-pill[data-state="blocked"], .status-pill[data-state="recovering"] { color: #87500e; background: #fff4e2; border-color: #efd4a5; }

/* Navigation is available while reading the longer programme and cost sections. */
.dashboard-nav { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 4px; margin: 0 0 20px; padding: 7px; border: 1px solid var(--border); border-radius: 12px; background: #fffffffa; box-shadow: 0 4px 14px rgb(28 48 69 / 4%); overflow-x: auto; scrollbar-width: thin; }
.dashboard-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 39px; padding: 9px 17px; border-radius: 7px; color: #53687c; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.dashboard-nav a:hover { color: #244d73; background: #f0f5fa; }
.dashboard-nav a[aria-current] { color: #204e75; background: #e9f1f9; }
.operations-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-bottom: 27px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.operations-strip > div { min-width: 0; margin: 17px 0; padding: 0 22px; border-left: 1px solid #e1e8ef; }
.operations-strip > div:first-child { border: 0; }
.operation-label { display: block; margin-bottom: 3px; color: #526477; font-size: 13px; }
.operations-strip strong { display: block; color: #254357; font-size: 15px; line-height: 1.5; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.operations-strip strong[data-state="fresh"], .operations-strip strong[data-state="verified"], .operations-strip strong[data-state="active"] { color: #17704d; }
.operations-strip strong[data-state="stale"], .operations-strip strong[data-state="blocked"], .operations-strip strong[data-state="unknown"], .operations-strip strong[data-state="recovering"] { color: #955d10; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 24px; margin: 0 0 15px; }
.section-heading h2 { font-size: 19px; letter-spacing: -.3px; }
.section-heading p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; color: var(--muted); font-size: 13px; }
.section-heading.compact { margin-top: 27px; }
.data-key { display: inline-block; width: 7px; height: 7px; margin-left: 10px; border-radius: 50%; }
.data-key:first-child { margin-left: 0; }
.data-key.measured { background: #238266; }
.data-key.planned { background: #477eb0; }
.data-key.forecast { background: #bd8528; }
.data-badge { display: inline-flex; align-items: center; padding: 4px 9px; border: 1px solid; border-radius: 6px; font-size: 13px; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.data-badge.planned { color: #2f628b; border-color: #c8dceb; background: #edf5fc; }
.data-badge.forecast { color: #8c611a; border-color: #ebd8b1; background: #fff6e5; }

/* Colour has a stable meaning: measured green, calculated blue, forecast amber. */
.overview { gap: 18px; margin-bottom: 0; grid-template-columns: 1.2fr 1fr 1fr; }
.overview > article { min-height: 288px; border-radius: 14px; }
.overview-card-head { align-items: flex-start; }
.overview-card-head > .eyebrow { min-width: 0; margin-top: 3px; }
.battery-card { background: radial-gradient(ellipse at 95% 5%, #25664e 0, transparent 65%), #163f32; }
.battery-card .eyebrow, .battery-card .overview-card-head .eyebrow { color: #d1e5da; }
.measurement-tag { color: #e1f0e9; border-color: #6e9580; font-size: 13px; white-space: normal; text-align: center; }
.battery-visual { min-height: 183px; gap: 6px; }
.gauge-track { stroke: #3d6854; }
.gauge-fill { stroke: #b9e9cb; }
.gauge-number { fill: #f5fff9; font-size: 46px; }
.gauge-caption { fill: #d1e6d9; font-size: 13px; }
.gauge-edge { fill: #c1d8cb; font-size: 12px; }
.battery-energy strong { color: #f1fff5; font-size: 31px; }
.battery-energy > span { color: #cce3d6; font-size: 13px; }
.battery-footer { align-items: flex-start; gap: 12px; border-color: #46725d; }
.reserve-badge, #battery-freshness { font-size: 13px; }
.reserve-badge { color: #ffe0ab; }
.reserve-badge[data-verified="true"] { color: #ccefd9; }
#battery-freshness { color: #cee2d6; }
.next-card { border-color: #d0e0ef; background: linear-gradient(145deg, #ffffff 35%, #f0f6fc); }
.next-card .overview-card-head .eyebrow { color: #4b6580; }
.next-time { color: #234e75; font-size: clamp(29px, 2.5vw, 38px); }
.next-day, .next-details > div > span, .next-state, .text-link { font-size: 13px; }
.next-day, .next-details > div > span { color: #526a80; }
.next-details { gap: 25px; }
.next-details strong { color: #294f72; font-size: 22px; }
.next-state { color: #556d80; }
.text-link { color: #245f91; }
.solar-card { border-color: #ebddc0; background: linear-gradient(145deg, #fffefa, #fff8e9); }
.solar-card .overview-card-head .eyebrow { color: #7c642f; }
.solar-value { color: #886014; font-size: 47px; }
.solar-value small { color: #806b43; font-size: 16px; }
.solar-coverage > div:first-child, .solar-note, .solar-card .solar-note { color: #746340; font-size: 13px; }
.solar-coverage strong { color: #805f23; font-size: 14px; }
.coverage-track { background: #eee1c3; }
.coverage-track > span { background: #be8c37; }

/* Secondary totals use one horizon and a quieter presentation. */
.metrics { gap: 18px; margin-bottom: 27px; }
.metric { padding: 17px 21px; }
.metric-top, .metric .metric-top { color: #50657a; font-size: 14px; }
.metric-detail, .metric .metric-detail, .solar-card .metric-detail { color: var(--muted); font-size: 13px; }
.metric-value { color: #26475f; font-size: 34px; }
.metric-value small { color: #587086; font-size: 14px; }
.metric-icon, .metric-euro { color: #607b92; stroke: #607b92; }
.metric-cost { border-color: #d1e2ef; background: #ecf4fb; }
.metric-cost .metric-value { color: #235d8a; }
.panel { border-color: var(--border); }
.panel-header { padding-top: 22px; }
.subtle-tag, .weather-footnote, .chart-footnote { color: #526b80; font-size: 13px; }
.subtle-tag { border-color: #d9e4ee; background: #f2f6fa; white-space: normal; text-align: center; }

/* Weather remains a readable horizontal forecast on small screens. */
.weather-panel { margin-bottom: 25px; }
.weather-toolbar { align-items: flex-end; padding-top: 4px; padding-bottom: 16px; }
.weather-days { gap: 5px; }
.weather-day-button { min-height: 39px; padding: 8px 13px; color: #536c81; font-size: 14px; }
.weather-day-button:hover { color: #2d5f87; background: #f1f6fa; }
.weather-day-button[aria-pressed="true"] { color: #245d88; border-color: #cadfef; background: #eaf3fb; }
#weather-summary { color: #50677b; font-size: 14px; }
.weather-strip { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 9px; padding-bottom: 3px; }
.weather-hour-card { padding: 12px 6px; border-color: #e0e8ef; background: #f8fafc; }
.weather-hour-card.current { border-color: #93b5d0; background: #edf5fb; }
.weather-hour-card.is-night { background: #f0f3f8; border-color: #dce4ee; }
.weather-hour-card.is-night.current { background: #e9f1f9; border-color: #93b5d0; }
.weather-hour-label { color: #3f5a72; font-size: 14px; }
.weather-art { width: 44px; height: 44px; margin-top: 5px; }
.weather-condition { color: #52697b; font-size: 13px; }
.weather-temperature { color: #24475f; font-size: 25px; }
.weather-temperature small { color: #556f84; font-size: 13px; }
.weather-rain { color: #366f96; font-size: 13px; }
.weather-rain svg { width: 13px; height: 15px; }
.weather-solar { gap: 5px; max-width: 94px; margin-top: 11px; }
.weather-pv-track { height: 5px; background: #e5e9ee; }
.weather-pv-track > i { background: #bc8b38; }
.weather-pv-label { color: #7c622c; font-size: 13px; white-space: normal; }
.weather-footnote { font-size: 13px; line-height: 1.65; }
.weather-unavailable { color: #5c7185; border-color: #d6e1eb; background: #f8fafc; font-size: 14px; }

/* Plans and tables retain their full detail without tiny data. */
.chart-legend { color: #516b80; font-size: 13px; }
.chart-frame { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: #adc1d2 #f1f5f8; }
.chart-frame svg { min-width: 0; }
.chart-label, .chart-tick { fill: #526d83; font-size: 14px; }
.chart-selected-time { font-size: 14px; }
.chart-grid { stroke: #e3eaf1; }
.chart-night { fill: #f5f8fb; }
.chart-area { fill: #eaf6ef; }
.chart-load { stroke: #697c8f; }
.chart-explorer label, .chart-explorer output { color: #4c667a; font-size: 13px; }
.chart-footnote strong { color: #41647d; }
.chart-tooltip rect { fill: #fff; stroke: #c6d6e4; }
.chart-tooltip text { fill: #3f5d74; font-size: 13px; }
.chart-tooltip .tooltip-title { fill: #2a516e; }
.windows-table, .injection-table td { font-size: 14px; }
.windows-table thead { background: #f5f8fb; color: #486177; font-size: 13px; }
.windows-table th, .windows-table td { border-color: #e4ebf2; }
.windows-table th { font-size: 13px; }
.window-time { color: #294f6a; font-size: 14px; }
.window-day, .window-reason { color: #587086; font-size: 13px; }
.window-target { color: #1f7052; }
.planning-note { background: #f4f8fb; }
.planning-note p, .fine-print, .injection-table caption { color: #536b7e; font-size: 13px; }
.planning-note strong { color: #355b76; }
.energy-costs { border-color: #d8e3ec; background: #f5f8fb; }
.energy-costs > div { border-color: #d8e3ec; }
.energy-costs > div > span, .energy-costs small { color: #526b80; font-size: 13px; }
.energy-costs strong { color: #294c65; }
.energy-costs .net-cost { background: #eaf3fa; }
.energy-costs .net-cost strong { color: #245d88; }
.programme-saving { margin: 0 22px 20px; padding: 12px 14px; border-left: 3px solid #90b6d2; border-radius: 0 6px 6px 0; background: #f0f6fb; color: #365f7d; font-size: 14px; line-height: 1.65; }
.detail-block { border-top: 1px solid #e2eaf1; }
.detail-block > summary, .panel-summary { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 17px 22px; list-style: none; cursor: pointer; color: #3c5c75; font-size: 14px; font-weight: 600; }
.detail-block > summary::-webkit-details-marker, .panel-summary::-webkit-details-marker { display: none; }
.detail-block > summary:hover, .panel-summary:hover { background: #f7fafc; }
.detail-block > summary > span:last-child, .panel-summary > span:last-child { font-size: 23px; line-height: 1; font-weight: 400; color: #6c879c; }
.detail-block[open] > summary > span:last-child, .tariff-panel[open] > .panel-summary > span:last-child { transform: rotate(45deg); }
.detail-block[open] > summary { margin-bottom: 7px; }
.tariff-panel[open] > .panel-summary { border-bottom: 1px solid var(--border); }
.tariff-content { min-width: 0; }
.tariff-hours { color: #46647c; font-size: 14px; }
.tariff-grid strong { color: #2c5676; }
.tariff-grid strong small, .tariff-grid > div > span:last-child { color: #577185; font-size: 13px; }

/* Operational detail and controls stay available, with explicit warning states. */
.connection-panel { padding: 22px; }
.connection-head h2 { font-size: 20px; }
.connection-symbol { background: #eaf3fa; }
.connection-symbol svg { stroke: #4f7b9d; }
.connection-head p, .connection-description, .control-facts, .control-action,
.preflight-list, .control-note, .recovery-box { color: #526b7e; font-size: 13px; }
.control-state { font-size: 14px; }
.control-facts dt { color: #5a7083; }
.control-facts dd { color: #2b4c65; font-size: 14px; }
.control-facts > div { padding: 11px 0; border-color: #e5ecf2; }
.control-facts dd.verified { color: #1b724e; }
.preflight-list li::before { border-color: #8cb7a4; background: #e4f2eb; }
.control-note { border-color: #e2eaf1; }
.stop-button { color: #934824; border-color: #e5c6b5; background: #fff6f0; }
.settings-summary { color: #3b5b74; font-size: 15px; }
.settings-summary > span:last-child { color: #6d879a; }
.settings-panel[open] .settings-summary { border-color: #e1e9f0; }
.settings-panel .panel-header h2 { font-size: 19px; }
.field > label, .power-field legend, .field-help, .soc-confirm-button,
.input-unit > span, .segmented-control small, .reserve-box label,
.reserve-box p, .advanced-settings summary { color: #506c80; font-size: 13px; }
.input-unit input { color: #284d67; border-color: #cddce7; background: #fff; font-size: 16px; }
.input-unit input[readonly] { color: #41677f; background: #f0f5fa; border-color: #cedde8; }
.segmented-control label > span { color: #4d6b82; border-color: #d6e3ed; background: #f7fafc; }
.segmented-control input:checked + span { color: #24577e; border-color: #7ea9c8; background: #edf5fb; box-shadow: inset 0 0 0 .5px #7ea9c8; }
.segmented-control input:checked + span small { color: #426c89; }
.reserve-box { border-color: #cfe6d9; background: #eff8f3; }
.reserve-box label, .reserve-box p, .reserve-control > span { color: #426d55; }
.reserve-control input { color: #1c6948; border-color: #afd3be; }
.advanced-settings { border-color: #dfe8ef; }
.warnings-box { padding: 0; border-color: #ead3a8; background: #fff8ec; }
.warnings-box > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 20px; cursor: pointer; list-style: none; color: #805a24; font-size: 14px; }
.warnings-box > summary::-webkit-details-marker { display: none; }
.warnings-box > summary::after { content: "+"; color: #9b7641; font-size: 22px; line-height: 1; }
.warnings-box[open] > summary::after { content: "−"; }
#warnings-count { margin-left: auto; padding: 1px 8px; border-radius: 12px; background: #f4e4c6; color: #7b561e; font-size: 13px; }
.warnings-box ul { margin: 0; padding: 0 22px 18px 38px; color: #806332; font-size: 13px; }
.scenario-details, .scenario-banner, .page-footer { color: #5a7184; font-size: 13px; }
.scenario-details, .page-footer { border-color: #d9e3ec; }
.scenario-banner { border-color: #d5e3ee; background: #eff5fa; }
.footer-dot { background: #7da490; }

@media (max-width: 1200px) {
  .overview { gap: 14px; grid-template-columns: 1.15fr 1fr 1fr; }
  .overview-card, .battery-card { padding-left: 18px; padding-right: 18px; }
  .battery-gauge { width: 70%; }
  .battery-energy strong { font-size: 29px; }
  .overview-card-head { gap: 7px; }
  .battery-footer { flex-direction: column; gap: 5px; }
  #battery-freshness { text-align: left; }
  .next-time { font-size: 30px; }
  .next-details { gap: 16px; }
  .weather-strip { grid-template-columns: repeat(8, minmax(112px, 1fr)); }
  .weather-toolbar { align-items: flex-start; }
  .tariff-grid { gap: 10px; }
  .tariff-grid > div { padding-left: 10px; padding-right: 10px; }
  .tariff-grid strong { font-size: 23px; }
  .tariff-grid strong small { display: block; }
}

@media (max-width: 960px) {
  .overview { grid-template-columns: 1.15fr 1fr; }
  .overview > article { min-height: 286px; }
  .solar-card { grid-column: 1 / -1; min-height: 145px !important; }
  .solar-card .overview-card-head { grid-column: 1; justify-content: flex-start; gap: 12px; }
  .solar-card .solar-value { font-size: 43px; }
  .solar-card .solar-note { font-size: 13px; }
  .battery-footer { flex-direction: row; }
  #battery-freshness { text-align: right; }
  .battery-gauge { width: 72%; }
  .next-time { font-size: 35px; }
  .operations-strip > div { padding-left: 16px; padding-right: 16px; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 6px; }
  .metrics { gap: 12px; }
  .metric { padding-left: 16px; padding-right: 16px; }
  .metric-value { font-size: 31px; }
  .weather-toolbar { flex-wrap: wrap; gap: 10px; }
  #weather-summary { text-align: left; }
  .weather-strip { grid-template-columns: repeat(8, minmax(112px, 1fr)); }
  .weather-footnote { align-items: flex-start; font-size: 13px; }
  .tariff-grid strong small { display: inline; }
}

@media (max-width: 620px) {
  html { scroll-padding-top: 75px; }
  [id] { scroll-margin-top: 75px; }
  .page { padding: 23px 14px 18px; }
  .topbar { padding-left: 16px; padding-right: 16px; }
  .brand div > span { font-size: 13px; }
  .status-pill { font-size: 12px; padding: 7px 9px; }
  .heading-row { margin-bottom: 18px; }
  h1 { max-width: 100%; font-size: 29px; }
  .subtitle { max-width: 100%; font-size: 14px; }
  .heading-actions { flex-wrap: wrap; }
  .heading-actions .button { padding: 10px 11px; font-size: 13px; }
  .chart-frame svg { min-width: 900px; }
  .dashboard-nav { gap: 3px; margin-bottom: 14px; padding: 5px; border-radius: 10px; }
  .dashboard-nav a { min-height: 40px; padding: 9px 12px; font-size: 13px; }
  .operations-strip { grid-template-columns: 1fr; margin-bottom: 23px; padding: 3px 16px; }
  .operations-strip > div { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: baseline; gap: 10px; margin: 0; padding: 11px 0; border-left: 0; border-top: 1px solid #e4ebf2; }
  .operations-strip > div:first-child { border: 0; }
  .operation-label { margin: 0; font-size: 13px; }
  .operations-strip strong { font-size: 14px; }
  .section-heading { margin-bottom: 13px; gap: 7px; }
  .section-heading h2 { font-size: 19px; }
  .section-heading p { font-size: 13px; gap: 5px; }
  .section-heading.compact { margin-top: 24px; }
  .data-key { margin-left: 4px; width: 6px; height: 6px; }
  .overview { grid-template-columns: 1fr; gap: 13px; }
  .overview > article { min-height: 0; }
  .overview-card, .battery-card { padding: 19px 20px; }
  .overview-card-head { gap: 9px; }
  .measurement-tag, .data-badge { font-size: 13px; }
  .battery-visual { min-height: 193px; gap: 7px; }
  .battery-gauge { width: 72%; }
  .battery-energy strong { font-size: 30px; }
  .battery-energy > span { font-size: 13px; }
  .battery-footer { flex-direction: column; gap: 5px; padding-top: 13px; }
  #battery-freshness { text-align: left; }
  .next-time { font-size: 35px; }
  .next-day { font-size: 14px; }
  .next-details { gap: 28px; }
  .next-details strong { font-size: 23px; }
  .solar-card { display: block; grid-column: auto; min-height: 0 !important; }
  .solar-card .solar-value { font-size: 45px; }
  .metrics { grid-template-columns: 1fr; gap: 9px; margin-bottom: 23px; }
  .metric { padding: 15px 17px; }
  .metric .metric-top { font-size: 14px; }
  .metric .metric-detail { font-size: 13px; }
  .metric-value { font-size: 31px; }
  .metric-value small { font-size: 14px; }
  .weather-panel { margin-bottom: 20px; }
  .weather-panel .panel-header { align-items: flex-start; }
  .weather-panel .panel-header > div { min-width: 0; }
  .weather-panel .subtle-tag { max-width: 110px; }
  .weather-day-button { font-size: 14px; }
  .weather-days { overflow-x: auto; }
  .weather-strip { grid-template-columns: repeat(8, 116px); gap: 8px; }
  .weather-hour-card { padding: 12px 7px; }
  .weather-hour-label { font-size: 14px; }
  .weather-condition, .weather-rain, .weather-pv-label { font-size: 13px; }
  .weather-temperature { font-size: 26px; }
  .weather-footnote { font-size: 13px; }
  .weather-footnote > span:first-child { align-items: baseline; }
  .rain-key { flex-shrink: 0; }
  .chart-legend, .chart-explorer label, .chart-explorer output, .chart-footnote { font-size: 13px; }
  .chart-footnote { flex-direction: column; gap: 5px; }
  .chart-footnote > span:last-child { text-align: left; }
  .windows-table { font-size: 14px; }
  .windows-table th, .injection-table th { font-size: 13px; white-space: nowrap; }
  .injection-table td, .window-time { font-size: 14px; }
  .window-day, .window-reason { font-size: 13px; }
  .energy-costs > div { padding: 13px 9px; }
  .energy-costs > div > span, .energy-costs small { font-size: 13px; }
  .energy-costs strong { font-size: 23px; }
  .programme-saving { margin: 0 17px 17px; padding: 12px; font-size: 13px; }
  .detail-block > summary, .panel-summary { padding-left: 17px; padding-right: 17px; font-size: 14px; }
  .tariff-grid { grid-template-columns: 1fr; }
  .tariff-grid > div { padding: 12px 0 0; }
  .tariff-grid strong { font-size: 24px; }
  .tariff-grid strong small { display: block; font-size: 13px; }
  .tariff-grid > div > span:last-child { font-size: 13px; }
  .connection-head h2 { font-size: 20px; }
  .field > label, .power-field legend, .advanced-settings summary { font-size: 14px; }
  .segmented-control label > span { font-size: 19px; }
  .segmented-control small { font-size: 13px; }
  .scenario-details, .scenario-banner, .page-footer { font-size: 13px; }
}

@media (max-width: 360px) {
  .page { padding-left: 11px; padding-right: 11px; }
  .heading-actions .button { padding-left: 9px; padding-right: 9px; font-size: 12px; }
  .status-pill { font-size: 11px; }
  .battery-card { padding-left: 17px; padding-right: 17px; }
  .battery-gauge { width: 69%; }
  .battery-energy strong { font-size: 27px; }
  .next-time { font-size: 32px; }
  .energy-costs { grid-template-columns: 1fr; }
  .energy-costs > div { flex-direction: row; justify-content: space-between; align-items: center; border-left: 0; border-top: 1px solid #d8e3ec; }
  .operations-strip > div { grid-template-columns: 121px minmax(0, 1fr); }
}

/* The meter is the result of solar production, household use and battery flow. */
.payment-overview { margin-bottom: 29px; }
.payment-overview .section-heading p { font-size: 14px; }
.finance-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.finance-period { min-width: 0; display: flex; flex-direction: column; padding: 15px; border: 1px solid #d2e4dc; border-radius: 17px; background: #edf5f1; }
.finance-period-planned { border-color: #cadbed; background: #edf3fa; }
.finance-period-annual { border-color: #d8d0e8; background: #f1eef7; }
.finance-period-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 1px 4px 16px; }
.finance-period-kind { margin: 0 0 5px; color: #246c52; font-size: 12px; font-weight: 750; letter-spacing: 1px; }
.finance-period-planned .finance-period-kind { color: #365f89; }
.finance-period-annual .finance-period-kind { color: #655080; }
.finance-period-annual .finance-period-date { padding: 5px 11px; border: 1px solid #d9d0e8; border-radius: 8px; color: #5d4878; background: #faf8fd; }
.finance-period-head h3 { margin: 0; color: #203b50; font-size: 22px; line-height: 1.3; letter-spacing: -.4px; }
.finance-period-head h3 + p { margin: 6px 0 0; color: #51697d; font-size: 13px; line-height: 1.5; }
.finance-period-date { flex-shrink: 0; padding-top: 3px; color: #496778; font-size: 13px; font-weight: 600; }
.finance-period > .finance-card { flex: 1; }
.finance-card { --finance-state: #5f7283; display: flex; flex-direction: column; min-width: 0; padding: 20px 22px 14px; overflow: hidden; border: 1px solid var(--border); border-top: 3px solid #90a4b5; border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.finance-card[data-state="purchase"] { --finance-state: #b63b3f; border-top-color: #c94d51; }
.finance-card[data-state="export"], .finance-card[data-state="autonomy"] { --finance-state: #177452; border-top-color: #24936c; }
.finance-card[data-state="unknown"] { border-top-color: #90a4b5; }
.finance-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.finance-card-head h4 { margin: 0; color: #203b50; font-size: 16px; font-weight: 700; line-height: 1.5; letter-spacing: -.15px; }
.finance-card-head h3 > span { color: #586f83; font-size: 14px; font-weight: 500; white-space: nowrap; }
.data-badge.measured { color: #1e7052; border-color: #c5e3d6; background: #eef8f3; }
.finance-card-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 12px; margin: 15px 0 14px; }
.finance-dial { min-width: 0; }
.finance-gauge { display: block; width: 100%; max-width: 280px; height: auto; margin: auto; overflow: visible; }
.finance-arc { fill: none; stroke-width: 14px; }
.finance-arc-green { stroke: #4ca782; }
.finance-arc-red { stroke: #de787a; }
.finance-zero { stroke: #fff; stroke-width: 5px; }
.finance-zero-label { fill: #5b7083; font-family: inherit; font-size: 14px; font-weight: 600; }
.finance-needle { stroke: #263f53; stroke-width: 5px; stroke-linecap: round; transition: transform .45s ease; }
.finance-gauge-value { fill: var(--finance-state); font-family: inherit; font-size: 40px; font-weight: 700; letter-spacing: -1.3px; font-variant-numeric: tabular-nums; }
.finance-gauge-unit { fill: #50697e; font-family: inherit; font-size: 16px; font-weight: 500; }
.finance-axis-label { font-family: inherit; font-size: 15px; font-weight: 600; }
.finance-axis-green { fill: #177452; }
.finance-axis-red { fill: #ac3e43; }
.finance-scale { margin: 1px 0 0; color: #607486; font-size: 13px; text-align: center; font-variant-numeric: tabular-nums; }
.finance-reading { min-width: 0; padding-bottom: 8px; }
.finance-status { display: block; color: var(--finance-state); font-size: clamp(21px, 1.8vw, 26px); font-weight: 700; line-height: 1.25; letter-spacing: -.5px; }
.finance-detail { margin: 9px 0 0; color: #51697d; font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
.finance-live-flows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: auto 0 0; padding: 12px 0 0; border-top: 1px solid #e1e9f0; }
.finance-live-flows > div { min-width: 0; }
.finance-live-flows dt { margin: 0 0 3px; color: #587083; font-size: 14px; }
.finance-live-flows dd { margin: 0; color: #264c65; font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.finance-timestamp { margin: 12px 0 0; color: #5b7184; font-size: 13px; font-variant-numeric: tabular-nums; }
.finance-instant { margin: 12px 0 0; color: #36576e; font-size: 13px; line-height: 1.6; }
.battery-reserve-eta { margin-top: 9px; padding: 9px 10px; border: 1px solid #dbe5ed; border-radius: 8px; background: #f5f8fb; }
.battery-reserve-eta > div { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; }
.battery-reserve-eta > div > span { color: #526b7e; font-size: 12px; }
.battery-reserve-eta strong { color: #315876; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.battery-reserve-eta p { margin: 5px 0 0; color: #5b7184; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.battery-reserve-eta[data-status="at_reserve"] { border-color: #ead7b6; background: #fff8ec; }
.battery-reserve-eta[data-status="at_reserve"] strong { color: #8a571f; }
.battery-reserve-eta[data-status="unknown"] strong { color: #5b7184; }
.finance-card[data-coverage="partial"] .finance-timestamp { color: #8b571d; font-weight: 600; }
.finance-forecast .finance-timestamp { margin-top: auto; padding-top: 12px; border-top: 1px solid #e1e9f0; }
.finance-card[data-state="unknown"] .finance-needle { visibility: hidden; }
.finance-card[data-state="unknown"] .data-badge { color: #53697b; background: #f0f3f6; border-color: #d8e0e7; }
.finance-card[data-state="unknown"] .finance-arc { opacity: .5; }
.finance-card[data-coverage="partial"] .data-badge.measured { color: #8a551b; border-color: #ead6ae; background: #fff6e6; }
.finance-annual .finance-card-body { grid-template-columns: 260px minmax(0, 1fr); column-gap: 36px; margin-top: 18px; }
.finance-annual .finance-reading { max-width: 650px; }
.finance-annual-totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 16px 0 0; border-top: 1px solid #e1e5ec; }
.finance-annual-totals > div { min-width: 0; }
.finance-annual-totals dt { margin: 0 0 5px; color: #587083; font-size: 14px; }
.finance-annual-totals dd { margin: 0; color: #264c65; font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.finance-annual-totals > div:last-child dd { color: #177452; }
.finance-annual-footer { display: flex; align-items: baseline; justify-content: space-between; gap: 10px 22px; margin-top: 14px; }
.finance-annual-footer .finance-timestamp { margin: 0; line-height: 1.6; }
.finance-annual-footer .finance-timestamp:last-child { flex-shrink: 0; color: #5b7184; font-weight: 400; }
.annual-cost-note { margin: 12px 0 0; padding: 9px 10px; border: 1px solid #ead9b7; border-radius: 8px; color: #81551e; background: #fff8eb; font-size: 13px; line-height: 1.55; }
.annual-priced-subset { margin: 8px 0 0; color: #526a7d; font-size: 13px; line-height: 1.6; }
.finance-annual[data-unit="energy"] #finance-annual-buy-cost,
.finance-annual[data-unit="energy"] #finance-annual-credit { color: #617185; font-size: 14px; font-weight: 500; }
.forecast-check { --finance-state: #617185; display: grid; grid-template-columns: 185px minmax(0, 1fr); align-items: center; gap: 28px; margin-top: 16px; padding: 18px 24px; border: 1px solid #d6e1eb; border-radius: 15px; background: #fff; }
.forecast-check[data-state="purchase"] { --finance-state: #b63b3f; }
.forecast-check[data-state="export"], .forecast-check[data-state="autonomy"] { --finance-state: #177452; }
.forecast-check[data-state="unknown"] .finance-needle { visibility: hidden; }
.forecast-check[data-state="unknown"] .finance-arc { opacity: .45; }
.forecast-check-dial { min-width: 0; }
.forecast-check-dial .finance-gauge { max-width: 185px; }
.forecast-check-dial .finance-scale { margin-top: 3px; font-size: 12px; }
.forecast-check-content { min-width: 0; }
.forecast-check-content > header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 8px 18px; }
.forecast-check-content .eyebrow { margin-bottom: 4px; font-size: 11px; color: #5c7084; }
.forecast-check-content h3 { margin: 0; color: #203b50; font-size: 18px; line-height: 1.4; }
.forecast-check-detail { margin: 7px 0 12px; color: #52697d; font-size: 13px; line-height: 1.6; }
.forecast-check-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.forecast-check-facts > div { min-width: 0; }
.forecast-check-facts dt { margin-bottom: 4px; color: #607488; font-size: 12px; line-height: 1.5; }
.forecast-check-facts dd { margin: 0; color: #264c65; font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.forecast-check-issued { margin: 10px 0 0; color: #607488; font-size: 12px; line-height: 1.6; }
.forecast-buffer { display: inline-block; margin: 9px 0 0; padding: 6px 10px; border: 1px solid #d4e1ee; border-radius: 7px; color: #3b5f7d; background: #f0f5fa; font-size: 12px; line-height: 1.6; }
.finance-note { margin: 10px 2px 0; color: #526b7e; font-size: 13px; line-height: 1.65; }
.finance-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin: 0; padding: 0; border-top: 1px solid #e1e9f0; }
.finance-metrics > div { min-width: 0; padding: 10px 0; border-bottom: 1px solid #e7edf2; }
.finance-metrics dt { margin: 0 0 4px; color: #526a7d; font-size: 13px; line-height: 1.4; }
.finance-metrics dt span { display: block; color: #6c7e8d; font-size: 11px; }
.finance-metrics dd { margin: 0; color: #234961; font-size: 19px; font-weight: 700; line-height: 1.4; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.finance-metrics > .finance-metric-pv { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 0; }
.finance-metric-pv dt { margin: 0; }
.finance-metric-pv dd { color: #18734f; }
.finance-metric-period { margin: 0; color: #5b7184; font-size: 12px; line-height: 1.5; }
.finance-explanations { margin-top: 14px; padding: 12px 16px; border: 1px solid #d6e1e9; border-radius: 11px; background: #fff; }
.finance-explanations > summary { width: fit-content; color: #3e5c72; font-size: 13px; font-weight: 600; cursor: pointer; }
.finance-explanation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; padding: 17px 0 8px; }
.finance-explanation-grid > section { min-width: 0; }
.finance-explanation-grid h3 { margin: 0; color: #203b50; font-size: 15px; }
.finance-explanation-grid p { font-size: 13px; line-height: 1.6; }
.finance-cost-breakdown { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 12px 0; }
.finance-cost-breakdown dt { color: #5b7184; font-size: 12px; }
.finance-cost-breakdown dd { margin: 3px 0 0; color: #234961; font-size: 16px; font-weight: 650; }
.billing-evidence { padding: 16px 0 8px; border-top: 1px solid #e0e8ef; }
.billing-evidence > h3 { margin: 0; color: #203b50; font-size: 16px; }
.billing-evidence-note { margin: 6px 0 16px; color: #5b7184; font-size: 13px; line-height: 1.6; }
.billing-evidence-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.billing-evidence-grid > div { min-width: 0; }
.billing-evidence-grid h4 { margin: 0 0 8px; color: #3d5b71; font-size: 13px; }
.billing-contracts, .billing-bills { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.billing-contracts li, .billing-bills li { display: grid; gap: 3px; min-width: 0; padding: 10px 12px; border: 1px solid #dfe7ee; border-radius: 8px; background: #f7f9fb; color: #526b7e; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.billing-contracts strong, .billing-bill-total strong { color: #284c65; font-size: 13px; font-weight: 650; }
.billing-contracts .billing-index { color: #536d82; }
.billing-bill-total { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.billing-bill-total b { color: #284c65; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.billing-bill-scope { color: #80551f; }
.billing-blockers { display: grid; gap: 5px; margin: 14px 0 0; padding-left: 18px; color: #80551f; font-size: 12px; line-height: 1.6; }
.finance-net-energy { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; padding: 8px 0 0; border-top: 1px solid #e4ebf1; }
.finance-net-energy > span { color: #587083; font-size: 12px; }
.finance-net-energy strong { color: #264c65; font-size: 18px; line-height: 1.4; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.finance-net-energy strong[data-state="purchase"] { color: #b13e43; }
.finance-net-energy strong[data-state="export"], .finance-net-energy strong[data-state="autonomy"] { color: #177452; }
.finance-net-energy strong[data-state="unknown"] { color: #617185; }
.finance-explanation-grid .finance-status { margin: 6px 0; color: #3d5b71; font-size: 13px; letter-spacing: 0; font-weight: 600; }
.finance-explanation-grid .finance-scale { text-align: left; font-size: 12px; }
.meter-reading { margin-top: 12px; padding: 11px 15px; border: 1px solid #d6e1e9; border-radius: 11px; background: #fff; }
.meter-reading > summary { display: flex; align-items: baseline; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; color: #3e5c72; font-size: 13px; font-weight: 600; cursor: pointer; list-style: none; }
.meter-reading > summary::after { content: "+"; color: #61788a; }
.meter-reading > summary small { color: #61788a; font-size: 12px; font-weight: 400; }
.meter-reading[open] > summary::after { content: "−"; }
.meter-reading-values { display: flex; align-items: baseline; gap: 8px 24px; flex-wrap: wrap; margin-left: auto; color: #61788a; font-size: 12px; font-weight: 400; }
.meter-reading-values b { margin-left: 5px; color: #264c65; font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.meter-reading-details { padding-top: 10px; border-top: 1px solid #e4ebf1; margin-top: 10px; }
.meter-reading-details p { margin: 3px 0; color: #5b7184; font-size: 12px; line-height: 1.6; }

/* Equal columns and aligned dials make the three periods easy to compare. */
@media (min-width: 861px) {
  .topbar { min-height: 64px; padding-top: 10px; padding-bottom: 10px; }
  .page { padding-top: 20px; }
  .heading-row { margin-bottom: 16px; }
  .dashboard-nav { margin-bottom: 14px; }
  .operations-strip { margin-bottom: 20px; }
  .operations-strip > div { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin: 11px 0; padding: 0 17px; }
  .operation-label { margin: 0; }
  .finance-period { padding: 12px; }
  .finance-period-head { position: relative; min-height: 99px; padding: 1px 3px 13px; }
  .finance-period-kind { padding-right: 90px; font-size: 11px; }
  .finance-period-head h3 { font-size: 24px; }
  .finance-period-head h3 + p { max-width: 270px; }
  .finance-period-date { position: absolute; top: 0; right: 3px; padding: 0; font-size: 12px; }
  .finance-period-annual .finance-period-date { padding: 2px 8px; }
  .finance-card { padding: 15px 17px; }
  .finance-card-head { flex-wrap: wrap; align-content: flex-start; min-height: 27px; gap: 6px 10px; }
  .finance-card-head h4 { font-size: 14px; }
  .finance-card-head .data-badge { font-size: 12px; padding: 3px 8px; }
  .finance-card-body, .finance-annual .finance-card-body { grid-template-columns: 1fr; gap: 12px; margin: 10px 0 16px; }
  .finance-gauge { max-width: 240px; }
  .finance-reading { padding-bottom: 0; text-align: center; }
  .finance-status { font-size: 23px; }
  .finance-reading { min-height: 30px; display: flex; align-items: center; justify-content: center; }
  .finance-detail { font-size: 13px; line-height: 1.6; }
  .finance-live-flows dt { font-size: 13px; }
  .finance-annual-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: 12px; }
  .finance-annual-totals dt { font-size: 13px; }
  .finance-annual-totals dd { font-size: 17px; }
  .finance-annual-footer { flex-direction: column; gap: 6px; }
  .finance-annual-footer .finance-timestamp:last-child { flex-shrink: 1; }
}

@media (max-width: 1100px) and (min-width: 861px) {
  .finance-period { padding: 12px; }
  .finance-period-head { flex-direction: column; min-height: 112px; }
  .finance-card { padding-left: 17px; padding-right: 17px; }
  .finance-card-body { gap: 12px; }
  .finance-card-head { flex-wrap: wrap; min-height: 56px; gap: 7px; }
  .finance-card-head h4 { width: 100%; }
  .finance-card-head .data-badge { font-size: 12px; }
  .finance-status { font-size: 22px; }
}

@media (max-width: 860px) {
  .finance-grid { grid-template-columns: 1fr; gap: 13px; }
  .finance-card-body { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 22px; margin-top: 13px; }
  .finance-status { font-size: 26px; }
  .finance-live-flows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-annual .finance-card-body { grid-template-columns: 240px minmax(0, 1fr); column-gap: 24px; }
  .finance-annual-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .finance-annual-footer { flex-direction: column; gap: 5px; }
  .finance-explanation-grid { grid-template-columns: 1fr; gap: 18px; }
  .billing-evidence-grid { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 600px) {
  .finance-annual .finance-card-body { grid-template-columns: 1fr; gap: 15px; }
  .finance-annual .finance-reading { padding-bottom: 0; text-align: center; }
  .finance-annual .finance-gauge { width: 260px; max-width: 100%; }
  .finance-annual-totals dd { font-size: 18px; }
  .finance-annual-footer .finance-timestamp:last-child { flex-shrink: 1; }
  .forecast-check { grid-template-columns: 1fr; gap: 15px; padding: 18px; }
  .forecast-check-dial { width: 185px; margin: auto; }
  .forecast-check-content h3 { font-size: 18px; }
  .forecast-check-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .forecast-check-facts > div:last-child { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .payment-overview { margin-bottom: 26px; }
  .finance-card { padding: 17px 18px 14px; }
  .finance-card-head { gap: 8px; }
  .finance-period { padding: 11px; }
  .finance-period-head { flex-direction: column; gap: 5px; padding-bottom: 13px; }
  .finance-period-head h3 { font-size: 21px; }
  .finance-card-head h4 { font-size: 16px; }
  .finance-card-head h3 > span { display: block; white-space: normal; font-size: 14px; }
  .finance-card-head .data-badge { font-size: 12px; }
  .finance-card-body { grid-template-columns: 1fr; gap: 12px; margin-bottom: 16px; }
  .finance-gauge { width: 260px; max-width: 100%; }
  .finance-reading { padding-bottom: 0; text-align: center; }
  .finance-status { font-size: 25px; }
  .finance-detail { margin-top: 7px; font-size: 14px; }
  .finance-live-flows dt { font-size: 13px; }
  .finance-live-flows dd { font-size: 15px; }
  .finance-note { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .finance-needle { transition: none; }
}

/* Keep euros and net kWh together; supporting explanations stay in disclosure. */
.finance-period-head { position: static; min-height: 0; flex-direction: row; align-items: center; gap: 8px; padding: 1px 2px 11px; }
.finance-period-head h3 { font-size: 22px; line-height: 1.35; }
.finance-period-date { position: static; padding: 0; font-size: 12px; }
.finance-card-head { min-height: 24px; flex-wrap: nowrap; align-items: baseline; gap: 8px; }
.finance-card-head h4 { width: auto; font-size: 13px; }
.finance-card-head .data-badge { font-size: 11px; padding: 3px 7px; }
.finance-card-body, .finance-annual .finance-card-body { grid-template-columns: 1fr; gap: 7px; margin: 7px 0 10px; }
.finance-card .finance-gauge { width: 100%; max-width: 205px; }
.finance-metrics > div { padding: 8px 0; }
.finance-metrics dd { font-size: 18px; }
.finance-card .finance-timestamp { margin-top: 8px; font-size: 11px; line-height: 1.5; }
.finance-forecast .finance-timestamp { padding-top: 0; border-top: 0; }
.finance-card .annual-cost-note { margin-top: 8px; padding: 5px 8px; font-size: 11px; line-height: 1.45; }
.finance-card .finance-metric-period { font-size: 11px; }
.finance-annual[data-valuation="estimated"] .finance-card-head h4 { display: none; }
.data-badge.estimated { color: #885313; border-color: #ead1aa; background: #fff4e0; }
.annual-estimate-note { margin: 6px 0; color: #885313; font-size: 11px; line-height: 1.5; }
.annual-estimate-details { margin-top: 12px; padding-top: 8px; border-top: 1px solid #e0e7ee; color: #526b7e; font-size: 12px; line-height: 1.6; }
.annual-estimate-details p { margin: 4px 0; }
.annual-estimate-details ul { display: grid; gap: 5px; margin: 8px 0; padding-left: 17px; font-size: 12px; }
.annual-estimate-warnings { color: #885313; }
@media (max-width: 1100px) and (min-width: 861px) {
  .finance-period { padding: 10px; }
  .finance-period-head h3 { font-size: 20px; }
  .finance-period-date { font-size: 11px; }
  .finance-card { padding: 12px 13px; }
  .finance-card-head { flex-wrap: wrap; }
  .finance-net-energy strong { font-size: 16px; }
  .finance-metrics dd { font-size: 16px; }
}
@media (max-width: 600px) {
  .finance-period-head h3 { font-size: 21px; }
  .finance-card .finance-gauge { max-width: 205px; }
  .meter-reading > summary { align-items: flex-start; }
  .meter-reading-values { order: 2; width: 100%; margin-left: 0; gap: 6px 18px; }
  .meter-reading > summary::after { margin-left: auto; }
}

/* Fit the three complete balances in the first desktop screen. */
@media (min-width: 861px) {
  .topbar { min-height: 44px; padding-top: 6px; padding-bottom: 6px; }
  .brand { gap: 9px; }
  .brand-mark { width: 30px; height: 30px; border-radius: 9px; }
  .brand-mark svg { width: 23px; }
  .brand > div { display: flex; align-items: baseline; gap: 9px; }
  .brand strong { font-size: 18px; }
  .brand div > span { margin-top: 0; font-size: 12px; }
  .status-pill { padding: 5px 11px; font-size: 12px; }
  .header-link { font-size: 12px; }
  .page { padding-top: 8px; }
  .heading-row { gap: 18px; margin-bottom: 8px; }
  .heading-row .eyebrow, .heading-row .subtitle { display: none; }
  .heading-row h1 { margin: 0; font-size: 24px; line-height: 1.25; letter-spacing: -.6px; }
  .heading-actions .button { min-height: 32px; padding: 6px 11px; font-size: 12px; }
  .dashboard-nav { gap: 3px; margin-bottom: 8px; padding: 2px; border-radius: 10px; }
  .dashboard-nav a { min-height: 30px; padding: 4px 14px; font-size: 13px; }
  .operations-strip { margin-bottom: 8px; border-radius: 10px; }
  .operations-strip > div { margin: 6px 0; padding: 0 12px; gap: 5px 8px; flex-wrap: nowrap; }
  .operation-label { margin: 0; font-size: 12px; }
  .operations-strip strong { font-size: 13px; line-height: 1.5; }
  .payment-overview > .section-heading { margin-bottom: 7px; }
  .payment-overview .section-heading h2 { font-size: 18px; }
  .payment-overview .section-heading p { font-size: 12px; }
  .finance-grid { gap: 12px; }
  .finance-period { padding: 9px; border-radius: 13px; }
  .finance-period-head { padding: 0 2px 6px; }
  .finance-period-head h3 { font-size: 21px; line-height: 1.3; }
  .finance-period-annual .finance-period-date { padding: 1px 7px; }
  .finance-card { padding: 11px 14px; border-radius: 11px; }
  .finance-card-head { min-height: 22px; flex-wrap: nowrap; }
  .finance-card-head h4 { font-size: 13px; }
  .finance-card-body, .finance-annual .finance-card-body { gap: 5px; margin: 5px 0 8px; }
  .finance-card .finance-gauge { max-width: 170px; }
  .finance-card .finance-gauge-value { font-size: 44px; }
  .finance-card .finance-gauge-unit { font-size: 20px; }
  .finance-card .finance-axis-label, .finance-card .finance-zero-label { font-size: 18px; }
  .finance-net-energy { padding-top: 6px; }
  .finance-net-energy > span { font-size: 13px; }
  .finance-net-energy strong { font-size: 18px; }
  .finance-metrics { column-gap: 14px; }
  .finance-metrics > div { padding: 6px 0; }
  .finance-metrics dt { margin-bottom: 2px; font-size: 13px; line-height: 1.4; }
  .finance-metrics dt span { display: inline; margin-left: 3px; font-size: 11px; }
  .finance-metrics dt span::before { content: "· "; }
  .finance-metrics dd { font-size: 17px; line-height: 1.4; }
  .finance-card .finance-timestamp { margin-top: 6px; }
  .finance-card .finance-metric-period { font-size: 11px; line-height: 1.5; }
}

/* Period finances use matching energy and money rows; live powers stand apart. */
.finance-network { display: grid; margin: 0; padding: 0; border-top: 1px solid #dfe8ef; }
.finance-network > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 10px 0; border-bottom: 1px solid #e7edf2; }
.finance-network dt { margin: 0; color: #526a7d; font-size: 12px; line-height: 1.5; }
.finance-network dd { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 2px 8px; min-width: 0; margin: 0; font-variant-numeric: tabular-nums; }
.finance-network dd > span { color: #264c65; font-size: 14px; font-weight: 600; white-space: nowrap; }
.finance-network .finance-money { color: #b13e43; font-size: 17px; font-weight: 700; white-space: nowrap; }
.finance-network .finance-sale .finance-money { color: #177452; }
.finance-network[data-cost-quality="stale"] .finance-money,
.finance-network[data-cost-quality="unknown"] .finance-money { color: #748493; }
.finance-cost-scope { margin: 7px 0 10px; color: #607486; font-size: 11px; line-height: 1.5; }
.finance-energy-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 9px 0 0; border-top: 1px solid #e7edf2; }
.finance-energy-totals > div { min-width: 0; }
.finance-energy-totals dt { margin: 0 0 4px; color: #607486; font-size: 11px; line-height: 1.45; }
.finance-energy-totals dd { margin: 0; color: #264c65; font-size: 14px; font-weight: 650; line-height: 1.45; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.finance-energy-pv dd { color: #177452; }
.finance-card .annual-estimate-note { margin: 7px 0 4px; }
.finance-card .finance-timestamp:last-child { margin-top: auto; padding-top: 9px; }
.finance-card .finance-metric-period + .finance-timestamp:last-child { margin-top: 0; padding-top: 4px; }
.live-overview { margin: 14px 0; padding: 13px 16px 10px; border: 1px solid #d5e1e9; border-radius: 12px; background: #fff; }
.live-overview > header { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 5px 16px; margin-bottom: 12px; }
.live-overview h2 { font-size: 18px; }
.live-overview > header > span { color: #177452; font-size: 12px; }
.instant-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; }
.instant-metrics > div { min-width: 0; padding: 0 15px; border-left: 1px solid #e3ebf1; }
.instant-metrics > div:first-child { padding-left: 0; border-left: 0; }
.instant-metrics > div:last-child { padding-right: 0; }
.instant-metrics dt { margin: 0 0 4px; color: #526b7e; font-size: 12px; line-height: 1.5; }
.instant-metrics dd { margin: 0; color: #284e67; font-size: 21px; font-weight: 700; line-height: 1.4; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.instant-grid[data-direction="purchase"] dd { color: #b13e43; }
.instant-grid[data-direction="export"] dd, .instant-grid[data-direction="autonomy"] dd, .instant-pv dd { color: #177452; }
.live-overview[data-quality="stale"] .instant-metrics dd,
.live-overview[data-quality="unknown"] .instant-metrics dd { color: #748493; }
.live-overview[data-quality="stale"] > header > span { color: #8b6226; }
.live-overview[data-quality="unknown"] > header > span { color: #748493; }
.instant-note { margin: 10px 0 0; color: #687d8e; font-size: 11px; line-height: 1.5; }
.secondary-panel { margin: 14px 0; border: 1px solid #d6e1e9; border-radius: 11px; background: #fff; }
.secondary-panel > summary { padding: 12px 16px; color: #3e5c72; font-size: 14px; font-weight: 600; cursor: pointer; }
.secondary-panel-content { padding: 0 16px 16px; }
.secondary-panel-content > .section-heading.compact { margin-top: 4px; }
.secondary-panel-content > .metrics { margin-bottom: 0; }
.secondary-panel-content > .injection-panel { border: 0; box-shadow: none; }
.cost-programme .secondary-panel-content { padding: 0; }
.cost-programme .panel-header { padding-top: 10px; }
.connection-message { margin-bottom: 12px; }
.reserve-safety-note { color: #68430b; background: #fff6df; border-color: #e7c87c; font-weight: 600; line-height: 1.55; }
@media (min-width: 861px) {
  html { scroll-padding-top: 52px; }
  [id] { scroll-margin-top: 52px; }
  .finance-network > div { padding-top: 9px; padding-bottom: 9px; }
  .finance-period-today .finance-card { min-height: 0; }
}
@media (min-width: 861px) and (max-width: 1100px) {
  .finance-network > div { grid-template-columns: 1fr; gap: 3px; padding-top: 8px; padding-bottom: 8px; }
  .finance-network dd > span { font-size: 13px; }
  .finance-network .finance-money { font-size: 16px; }
  .finance-energy-totals { gap: 7px; }
  .finance-energy-totals dd { font-size: 12px; }
  .instant-metrics > div { padding-left: 11px; padding-right: 11px; }
  .instant-metrics dd { font-size: 19px; }
}
@media (max-width: 600px) {
  .live-overview { padding: 14px; }
  .instant-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
  .instant-metrics > div { padding: 0; border: 0; }
  .instant-metrics > div:last-child { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; padding-top: 10px; border-top: 1px solid #e3ebf1; }
  .finance-energy-totals { column-gap: 12px; }
  .finance-energy-totals dd { font-size: 14px; }
  .secondary-panel-content { padding-left: 12px; padding-right: 12px; }
}

/* V3_2 : palette chaleureuse, hiérarchie commune au bureau et au web. */
:root { --bg:#f3e7d6; --surface:#fff8ec; --text:#35291f; --muted:#715a49; --border:#dcc7ac; --green:#16835d; --green-dark:#79503c; --green-soft:#f6ecdc; --gold:#996300; --blue:#087a87; --shadow:0 4px 18px rgb(85 54 31 / 6%); }
.topbar { background:#fff8ec; }
.brand-mark { background:#a65b3c; }
.brand-mark svg { fill:#fff4dd; }
.payment-overview > .section-heading { padding:4px 0 8px; }
.finance-period { background:#f5e8d4; border-color:#dfc8aa; }
.finance-period-planned { background:#f5e7d5; border-color:#e2c6a5; }
.finance-period-compare { background:#efe8d8; border-color:#d6c7ae; }
.finance-period-head h3,.finance-card-head h4,.forecast-check-content h3 { color:#35291f; }
.finance-period-date,.finance-cost-scope,.finance-timestamp { color:#715a49; }
.finance-card,.forecast-check,.live-overview,.purchase-panel { background:#fffaf1; }
.forecast-check { display:flex; flex-direction:column; align-items:stretch; gap:8px; flex:1; margin:0; padding:18px; border-color:#dcc7ac; }
.forecast-check-dial { width:100%; text-align:center; }
.forecast-check-dial .finance-gauge { max-width:205px; margin:auto; }
.forecast-check-content > header { display:flex; }
.forecast-check-facts { grid-template-columns:1fr; gap:8px; }
.forecast-check-facts > div { display:flex; justify-content:space-between; gap:12px; }
.forecast-check-detail,.forecast-check-issued,.forecast-buffer { color:#715a49; }
.forecast-check-facts dt { color:#715a49; }
.forecast-check-facts dd { color:#35291f; }
.v32-annual { margin-top:14px; }
.v32-annual .finance-period { margin:0; max-width:650px; }
.purchase-panel { margin:16px 0; padding:18px 20px; border:1px solid #dcc7ac; border-radius:14px; box-shadow:var(--shadow); }
.purchase-panel header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; }
.purchase-panel header p { margin:4px 0 12px; color:#715a49; }
.purchase-scroll { overflow-x:auto; }
.purchase-panel table { width:100%; border-collapse:collapse; text-align:left; }
.purchase-panel th,.purchase-panel td { padding:10px 12px; border-bottom:1px solid #eadbc7; vertical-align:top; }
.purchase-panel thead th { color:#715a49; font-size:12px; font-weight:700; }
.purchase-panel tbody th { color:#35291f; }
.purchase-panel tbody td:nth-child(3) { font-weight:700; color:#a44f34; white-space:nowrap; }
.purchase-panel tbody td:nth-child(4) { white-space:nowrap; }
.purchase-note { margin:10px 0 0; color:#715a49; font-size:12px; }
@media (max-width:600px) { .purchase-panel { padding:15px; } .purchase-panel table { min-width:610px; } .purchase-panel th,.purchase-panel td { padding:9px 8px; } .forecast-check-facts { grid-template-columns:1fr; } .forecast-check-facts > div:last-child { grid-column:auto; } }

.purchase-week { min-width:1000px; table-layout:fixed; }
.purchase-week th:first-child { width:160px; }
.purchase-week td strong,.purchase-week td span,.purchase-week td small { display:block; }
.purchase-week td strong { color:#a44f34; font-size:14px; white-space:nowrap; }
.purchase-week td span { color:#35291f; margin-top:3px; font-size:12px; white-space:nowrap; }
.purchase-week td small { color:#715a49; margin-top:3px; white-space:nowrap; }
.purchase-panel tbody td:nth-child(3) { color:inherit; font-weight:normal; }
.purchase-panel .purchase-week { min-width:1000px; }
.purchase-week th:first-child { position:sticky; left:0; z-index:1; background:#fffaf1; }
.purchase-week thead th:first-child { z-index:2; }
@media (max-width:700px) { .purchase-scroll::after { content:'Faire défiler le tableau horizontalement →'; position:sticky; left:0; display:block; width:max-content; padding:7px 0; color:#715a49; font-size:12px; } }
/* Cosmetic only: the proxy must independently deny all mutating methods. */
body.remote-readonly #export-button,
body.remote-readonly #weather-button,
body.remote-readonly #read-button,
body.remote-readonly #recover-button,
body.remote-readonly #stop-button,
body.remote-readonly #settings-panel,
body.remote-readonly .dashboard-nav [data-reveal="settings-panel"] { display: none !important; }

/* Tariff scope shown near the balances: the fixed fee is never silently added. */
.tariff-summary { margin: 0 0 16px; padding: 11px 14px; border: 1px solid #cbdadf; border-radius: 10px; background: #f4fafb; color: #344d5e; font-size: 13px; line-height: 1.5; }
.tariff-summary a { color: #165b79; text-decoration: underline; }