/* Tokens: reference palette of the dataviz method (validated light and dark steps).
   Text colors pass WCAG AA on every surface: secondary ≥ 7:1, muted ≥ 4.9:1, links ≥ 5.6:1. */
:root {
  color-scheme: light;
  --page: #f4f4f1;
  --surface: #ffffff;
  --surface-2: #f8f8f6;     /* inset areas: table heads, inputs, segmented controls */
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #6b6a64;
  --grid: #e6e5df;
  --axis: #c3c2b7;
  --border: rgba(11, 11, 11, 0.09);
  --border-strong: rgba(11, 11, 11, 0.18);
  --accent: #1f66bd;        /* links, focus, selected controls */
  --accent-soft: rgba(42, 120, 214, 0.12);
  --shadow: 0 1px 2px rgba(11, 11, 11, 0.04), 0 2px 8px rgba(11, 11, 11, 0.04);
  --radius: 14px;
  --good-text: #006300;
  --bad-text: #b42323;
  /* entities: one color each, the same on every page */
  --c-pv: #eda100;        /* PV production (yellow) */
  --c-load: #2a78d6;      /* consumption (blue) */
  --c-grid: #e34948;      /* grid import (red) */
  --c-battery: #1baf7a;   /* battery (aqua) */
  --c-export: #eb6834;    /* export (orange) */
  --c-roof: #eda100;      /* roof string, PV1 */
  --c-carport: #6250d6;   /* carport string, PV2 */
  --c-day: #eb6834;       /* day tariff */
  --c-night: #6250d6;     /* night tariff */
  --c-money: #008300;     /* net benefit */
  --c-temp: #e87ba4;      /* temperature */
  --seq-0: #cde2fb; --seq-1: #86b6ef; --seq-2: #3987e5; --seq-3: #1c5cab; --seq-4: #0d366b;
  /* ordinal ramps, low -> high (validated --ordinal): temperature bands (red), SOC bands (blue) */
  --heat-0: #ef8f8e; --heat-1: #e86766; --heat-2: #d63f3e; --heat-3: #b13030; --heat-4: #872323; --heat-5: #5e1717;
  --soc-0: #86b6ef; --soc-1: #3987e5; --soc-2: #1c5cab; --soc-3: #0d366b;
  /* status palette: always paired with an icon and a label */
  --s-good: #0ca30c; --s-warn: #fab219; --s-bad: #d03b3b;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #0d0d0d; --surface: #1a1a19; --surface-2: #222220; --text-primary: #f0efec; --text-secondary: #c3c2b7;
    --text-muted: #9c9a93; --grid: #2c2c2a; --axis: #383835; --border: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.2); --accent: #5b9bea; --accent-soft: rgba(91, 155, 234, 0.16);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    --good-text: #0ca30c; --bad-text: #e66767;
    --c-pv: #c98500; --c-load: #3987e5; --c-grid: #e66767; --c-battery: #199e70; --c-export: #d95926;
    --c-roof: #c98500; --c-carport: #9085e9; --c-day: #d95926; --c-night: #9085e9; --c-money: #008300;
    --c-temp: #d55181;
    --seq-0: #184f95; --seq-1: #256abf; --seq-2: #3987e5; --seq-3: #86b6ef; --seq-4: #cde2fb;
    --heat-0: #922727; --heat-1: #b13232; --heat-2: #cf4545; --heat-3: #e26c6b; --heat-4: #ee9897; --heat-5: #f7c6c5;
    --soc-0: #256abf; --soc-1: #3987e5; --soc-2: #86b6ef; --soc-3: #cde2fb;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0d0d0d; --surface: #1a1a19; --surface-2: #222220; --text-primary: #f0efec; --text-secondary: #c3c2b7;
  --text-muted: #9c9a93; --grid: #2c2c2a; --axis: #383835; --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.2); --accent: #5b9bea; --accent-soft: rgba(91, 155, 234, 0.16);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --good-text: #0ca30c; --bad-text: #e66767;
  --c-pv: #c98500; --c-load: #3987e5; --c-grid: #e66767; --c-battery: #199e70; --c-export: #d95926;
  --c-roof: #c98500; --c-carport: #9085e9; --c-day: #d95926; --c-night: #9085e9; --c-money: #008300;
  --c-temp: #d55181;
  --seq-0: #184f95; --seq-1: #256abf; --seq-2: #3987e5; --seq-3: #86b6ef; --seq-4: #cde2fb;
  --heat-0: #922727; --heat-1: #b13232; --heat-2: #cf4545; --heat-3: #e26c6b; --heat-4: #ee9897; --heat-5: #f7c6c5;
  --soc-0: #256abf; --soc-1: #3987e5; --soc-2: #86b6ef; --soc-3: #cde2fb;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--page); color: var(--text-primary);
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-underline-offset: 2px; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
main:focus { outline: none; }
.skip {
  position: absolute; left: 12px; top: -48px; z-index: 100; background: var(--surface); padding: 8px 14px;
  border-radius: 8px; box-shadow: var(--shadow); border: 1px solid var(--border-strong);
}
.skip:focus { top: 12px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } .ecg .beat { stroke-dasharray: none; } }

/* ------------------------------------------------------------ shell: sidebar + content */
.shell { display: flex; min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; width: 236px; flex-shrink: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px; padding: 18px 12px 14px;
  background: var(--surface); border-right: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--text-primary); text-decoration: none; padding: 0 6px; }
.brand b { display: block; font-size: 15px; letter-spacing: -0.01em; }
.brand small { display: block; color: var(--text-muted); font-size: 12px; }
.logo {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(135deg, #f7c548, #eda100); color: #3b2a00;
}
.logo svg { width: 20px; height: 20px; stroke-width: 2.2; }
nav.pages { display: flex; flex-direction: column; gap: 14px; }
.nav-title { color: var(--text-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding: 0 10px 4px; }
nav.pages a {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; min-height: 36px;
  color: var(--text-secondary); text-decoration: none; font-weight: 500;
}
nav.pages a:hover { background: var(--surface-2); color: var(--text-primary); }
nav.pages a.active { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding: 0 4px; }
.live { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 12px; font-variant-numeric: tabular-nums; }
.live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); flex-shrink: 0; }
.live.ok .dot { background: var(--s-good); box-shadow: 0 0 0 3px rgba(12, 163, 12, .18); }
.live.stale .dot { background: var(--s-warn); }
.live.down .dot { background: var(--s-bad); }
.sys-alert { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 1.35; color: var(--text-primary); text-decoration: none; padding: 6px 8px; border-radius: 6px; border-left: 3px solid var(--s-warn); background: var(--surface-2, rgba(0,0,0,.04)); }
.sys-alert.bad { border-left-color: var(--s-bad); }
.sys-alert svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2; }
.sys-alert[hidden] { display: none; }
.theme-toggle {
  display: inline-flex; align-items: center; gap: 8px; background: none; border: 1px solid var(--border);
  color: var(--text-secondary); border-radius: 8px; padding: 6px 10px; cursor: pointer; font: inherit; font-size: 13px;
}
.theme-toggle:hover { color: var(--text-primary); border-color: var(--border-strong); }
.content { flex: 1; min-width: 0; }
.topbar { display: none; }
.scrim { display: none; }
main { padding: 20px 32px 56px; max-width: 1440px; margin: 0 auto; }

@media (max-width: 1023px) {
  .sidebar {
    position: fixed; left: 0; top: 0; z-index: 50; transform: translateX(-100%); transition: transform .2s ease;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .2); width: 264px;
  }
  .sidebar.open { transform: none; }
  .scrim { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .35); }
  .scrim[hidden] { display: none; }
  .topbar {
    display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 30;
    padding: 8px 16px; background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border);
  }
  .topbar .brand { padding: 0; }
  .topbar .logo { width: 28px; height: 28px; border-radius: 8px; }
  .topbar .live { margin-left: auto; }
  main { padding: 16px 16px 48px; }
}
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: -8px;
  background: none; border: 0; border-radius: 10px; color: var(--text-primary); cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); }
.icon-btn svg { width: 22px; height: 22px; }

/* ------------------------------------------------------------ page header */
h1 { font-size: 26px; line-height: 1.2; letter-spacing: -0.02em; margin: 6px 0 6px; font-weight: 700; }
.lead { color: var(--text-secondary); margin: 0 0 18px; max-width: 900px; }
h2.section {
  font-size: 17px; font-weight: 650; letter-spacing: -0.01em; margin: 32px 0 12px; scroll-margin-top: 72px;
  display: flex; align-items: center; gap: 10px;
}
h2.section::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.toc { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: -6px 0 18px; font-size: 13px; }
.toc span { color: var(--text-muted); margin-right: 2px; }
.toc a {
  text-decoration: none; color: var(--text-secondary); background: var(--surface); border: 1px solid var(--border);
  padding: 3px 10px; border-radius: 999px;
}
.toc a:hover { color: var(--accent); border-color: var(--accent); }

/* ------------------------------------------------------------ filter row */
.filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: -8px -12px 14px;
  position: sticky; top: 0; z-index: 5; padding: 10px 12px;
  background: color-mix(in srgb, var(--page) 90%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.filters .presets {
  display: inline-flex; gap: 2px; padding: 3px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow);
}
.filters .presets button {
  font: inherit; font-size: 13px; color: var(--text-secondary); background: none; border: 0; border-radius: 7px;
  padding: 5px 11px; cursor: pointer; white-space: nowrap; min-height: 30px;
}
.filters .presets button:hover { color: var(--text-primary); background: var(--surface-2); }
.filters .presets button[aria-pressed="true"] { color: #fff; background: var(--accent); font-weight: 600; }
.filters .dates { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filters input {
  font: inherit; font-size: 13px; color: var(--text-primary); background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px; padding: 5px 8px; min-height: 34px; cursor: pointer;
}
.filters label { color: var(--text-secondary); display: flex; align-items: center; gap: 6px; font-size: 13px; }
.filters .sep { width: 1px; height: 24px; background: var(--border); margin: 0 2px; }
.filters .range-note { color: var(--text-muted); font-size: 13px; }
@media (max-width: 1023px) {
  .filters { top: 57px; }
}
@media (max-width: 640px) {
  .filters { position: static; margin: 0 0 12px; padding: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .filters .presets { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .filters .presets::-webkit-scrollbar { display: none; }
  .filters .sep { display: none; }
  .filters .range-note { width: 100%; }
}

/* ------------------------------------------------------------ tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tile {
  position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow); min-width: 0;
}
.tile .label { color: var(--text-secondary); font-size: 13px; }
.tile .label::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tile-c, transparent);
  display: var(--tile-dot, none); vertical-align: 1px; margin-right: 6px;
}
.tile[data-c] { --tile-dot: inline-block; }
.tile[data-c="pv"] { --tile-c: var(--c-pv); }
.tile[data-c="load"] { --tile-c: var(--c-load); }
.tile[data-c="grid"] { --tile-c: var(--c-grid); }
.tile[data-c="export"] { --tile-c: var(--c-export); }
.tile[data-c="battery"] { --tile-c: var(--c-battery); }
.tile[data-c="money"] { --tile-c: var(--c-money); }
.tile[data-c="temp"] { --tile-c: var(--c-temp); }
.tile[data-c="muted"] { --tile-c: var(--axis); }
.tile .value { font-size: 26px; font-weight: 650; margin-top: 4px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.tile .value .unit { font-size: 14px; font-weight: 400; color: var(--text-secondary); margin-left: 3px; letter-spacing: 0; }
.tile .sub { color: var(--text-muted); font-size: 12px; margin-top: 4px; }
.info-btn {
  display: inline-flex; align-items: center; justify-content: center; position: relative; vertical-align: -3px;
  width: 16px; height: 16px; margin-left: 5px; padding: 0; border: 0; background: none; color: var(--text-muted); cursor: help;
  border-radius: 50%;
}
.info-btn::after { content: ""; position: absolute; inset: -12px; }   /* bigger touch target */
.info-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.info-btn:hover, .info-btn[aria-expanded="true"] { color: var(--accent); }
.info-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.info-pop {
  position: fixed; z-index: 1000; background: var(--surface); color: var(--text-primary); border: 1px solid var(--border-strong);
  border-radius: 10px; padding: 12px 14px; box-shadow: 0 10px 30px rgba(11, 11, 11, .16); font-size: 13px; line-height: 1.45;
}
.info-pop[hidden] { display: none; }
.info-pop .info-title { display: block; font-size: 14px; margin-bottom: 4px; }
.info-pop p { margin: 6px 0 0; color: var(--text-secondary); }
.info-pop p span { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.tile .code, .card .card-head .code {
  color: var(--text-muted); font-size: 10.5px; font-weight: 500; letter-spacing: .02em;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 0 5px; line-height: 17px;
}
.tile .code { float: right; margin: 1px 0 4px 8px; }
.tile .code:empty { display: none; }
.tile.cond .value::after { content: " *"; color: var(--text-muted); font-weight: 400; }
.hero {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 22px;
  margin-bottom: 16px; box-shadow: var(--shadow);
}
.hero .label { color: var(--text-secondary); }
.hero .value { font-size: 44px; font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hero .sub { color: var(--text-secondary); margin-top: 6px; }
.meter { height: 10px; background: var(--seq-0); border-radius: 999px; margin-top: 12px; overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--c-money); border-radius: 999px; }

/* ------------------------------------------------------------ cards */
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(520px, 100%), 1fr)); gap: 16px; }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px;
  margin-bottom: 16px; min-width: 0; box-shadow: var(--shadow);
}
.card h2 { font-size: 15px; margin: 0; font-weight: 650; letter-spacing: -0.01em; }
.card .card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.card .card-head button {
  margin-left: auto; font: inherit; font-size: 12px; color: var(--text-secondary); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 8px; padding: 3px 10px; cursor: pointer; min-height: 28px;
}
.card .card-head button:hover { color: var(--text-primary); border-color: var(--border-strong); }
.card .card-head button[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
.card .subtitle { color: var(--text-secondary); font-size: 13px; margin: 4px 0 10px; }
.chart { width: 100%; height: 320px; transition: opacity .2s; }
.chart.tall { height: 420px; }
.chart.short { height: 220px; }
.loading .chart { opacity: .5; }
.empty { color: var(--text-muted); padding: 24px 0; }
.note { color: var(--text-secondary); font-size: 13px; }
.note.box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 16px; }

/* ------------------------------------------------------------ tables */
.table-wrap { overflow-x: auto; max-height: 420px; }
table.data { border-collapse: collapse; width: 100%; font-size: 13px; }
table.data th, table.data td { padding: 7px 10px; border-bottom: 1px solid var(--grid); text-align: right; white-space: nowrap; }
table.data th:first-child, table.data td:first-child { text-align: left; }
table.data th { color: var(--text-secondary); font-weight: 600; font-size: 12px; position: sticky; top: 0; background: var(--surface); z-index: 1; }
table.data td { font-variant-numeric: tabular-nums; }
table.data tbody tr:hover td { background: var(--surface-2); }
table.data td.muted { color: var(--text-muted); }
table.compare td.code, table.goals-list td.code { color: var(--text-muted); text-align: left; width: 48px; font-size: 12px; }
table.compare td:nth-child(2), table.compare th:nth-child(2) { text-align: left; }
.pos { color: var(--good-text); }
.neg { color: var(--bad-text); }

@media (max-width: 640px) {
  h1 { font-size: 22px; }
  .hero .value { font-size: 34px; }
  .card { padding: 14px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile { padding: 12px; }
  .tile .value { font-size: 21px; }
  .tile .code { display: none; }
  .chart { height: 260px; }
  .chart.tall { height: 320px; }
  /* keep the row label in view while the values scroll */
  table.compare th:nth-child(2), table.compare td:nth-child(2) {
    position: sticky; left: 0; background: var(--surface); white-space: normal; min-width: 140px; z-index: 1;
  }
  table.compare th:first-child, table.compare td:first-child { display: none; }
  /* goals table becomes a list of cards */
  table.goals-list thead { display: none; }
  table.goals-list, table.goals-list tbody, table.goals-list tr, table.goals-list td { display: block; width: 100%; }
  table.goals-list tr { padding: 10px 0; border-bottom: 1px solid var(--grid); display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; }
  table.goals-list td { border: 0; padding: 0; text-align: left; white-space: normal; }
  table.goals-list td.code { display: none; }
  table.goals-list td:nth-child(2) { font-weight: 600; grid-column: 1; }
  table.goals-list td:nth-child(7) { grid-column: 2; grid-row: 1; text-align: right; }
  table.goals-list td[data-label] { grid-column: 1 / -1; color: var(--text-secondary); font-size: 12px; }
  table.goals-list td[data-label]::before { content: attr(data-label) ": "; color: var(--text-muted); }
  table.goals-list tbody tr:hover td { background: none; }
}

/* ------------------------------------------------------------ goals: status badges carry an icon and a label, never color alone */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-primary); white-space: nowrap; }
.badge .ico {
  display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%;
  font-size: 11px; font-weight: 700; color: #fff; background: var(--text-muted);
}
.badge.s-met .ico, .badge.s-on_track .ico { background: var(--s-good); }
.badge.s-at_risk .ico { background: var(--s-warn); color: #0b0b0b; }
.badge.s-behind .ico { background: var(--s-bad); }
.status-strip { margin: 0 0 16px; color: var(--text-secondary); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.status-strip a { text-decoration: none; }
.goal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr)); gap: 16px; }
.goal-grid .card { margin-bottom: 0; }
.card.goal.inactive { opacity: .6; }
.goal-row { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: flex-end; margin: 4px 0; }
.goal-row .label { color: var(--text-secondary); font-size: 12px; }
.goal-row .big { font-size: 24px; font-weight: 650; font-variant-numeric: tabular-nums; }
.goal-row .big.muted { color: var(--text-secondary); font-weight: 500; }
.goal-row .unit { font-size: 13px; font-weight: 400; color: var(--text-secondary); margin-left: 3px; }
.goal-row .goal-status { margin-left: auto; align-self: center; }
.card .sub { color: var(--text-muted); font-size: 12px; }
.chart.mini { height: 150px; }

/* ------------------------------------------------------------ forms */
.btn {
  font: inherit; color: var(--text-primary); background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 8px; padding: 6px 14px; cursor: pointer; min-height: 34px;
}
.btn:hover { background: var(--surface-2); }
.btn.primary { border-color: var(--accent); background: var(--accent); color: #fff; font-weight: 600; }
.btn.primary:hover { filter: brightness(1.08); background: var(--accent); }
.btn.danger { color: var(--bad-text); }
dialog {
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text-primary);
  max-width: 640px; width: calc(100% - 32px); box-shadow: 0 16px 48px rgba(0, 0, 0, .25); padding: 20px;
}
dialog::backdrop { background: rgba(0, 0, 0, .4); }
.form { display: flex; flex-direction: column; gap: 10px; }
.form h2 { font-size: 16px; margin: 0 0 4px; }
.form label { display: flex; flex-direction: column; gap: 4px; color: var(--text-secondary); font-size: 13px; }
.form label.check { flex-direction: row; align-items: center; gap: 6px; }
.form .row { display: flex; flex-wrap: wrap; gap: 10px; }
.form .row label { flex: 1 1 150px; }
.form input, .form select, table.scen input {
  font: inherit; color: var(--text-primary); background: var(--surface-2); border: 1px solid var(--border-strong);
  border-radius: 8px; padding: 6px 9px; min-width: 0; min-height: 34px;
}
.form .actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.form.plan { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-bottom: 12px; }
.form.plan .actions { grid-column: 1 / -1; }
.form-error { color: var(--bad-text); font-size: 13px; margin: 4px 0 0; min-height: 1em; }
table.scen input { width: 110px; text-align: right; }
table.scen tr.result td { border-bottom-color: transparent; }
[hidden] { display: none !important; }
.card .card-head a.more { margin-left: auto; font-size: 13px; }
table.goals-list td:nth-child(2), table.goals-list th:nth-child(2), table.goals-list td:nth-child(3), table.goals-list th:nth-child(3) { text-align: left; }

/* ------------------------------------------------------------ health */
.health-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; margin-bottom: 16px; }
.health-grid .card { margin-bottom: 0; }
.checks { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 8px; }
.checks li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: baseline; }
.checks .v { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.checks li > span:first-child { min-width: 0; }
.checks .badge { white-space: normal; align-items: flex-start; }
.checks .badge .ico { flex-shrink: 0; }
.checks .rule { grid-column: 1 / -1; color: var(--text-muted); font-size: 12px; }
.badge.s-good .ico { background: var(--s-good); }
.badge.s-watch .ico { background: var(--s-warn); color: #0b0b0b; }
.badge.s-bad .ico { background: var(--s-bad); }
.badge.big { font-size: 16px; font-weight: 600; }
.badge.big .ico { width: 24px; height: 24px; font-size: 14px; }
.health-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px 18px; margin-top: 10px; }
.health-strip > div { padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.health-strip .lbl { color: var(--text-secondary); font-size: 13px; margin-bottom: 4px; }
.health-strip .sub { color: var(--text-muted); font-size: 12px; margin-top: 4px; }
.health-strip .big-num { font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.2; }

/* ------------------------------------------------------------ overview: energy flow now + selected day */
.ov-top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; }
.ov-top > .card { margin-bottom: 16px; }
@media (max-width: 1100px) { .ov-top { grid-template-columns: 1fr; } }
.flow { width: 100%; max-width: 560px; margin: 4px auto 0; display: block; height: auto; }
.flow svg, svg.flow { width: 100%; height: auto; stroke: none; }
.flow .wire { fill: none; stroke: var(--grid); stroke-width: 3; }
.flow .wire.on { stroke-width: 3; stroke-dasharray: 2 10; animation: flow-run 0.9s linear infinite; }
.flow .wire.rev { animation-direction: reverse; }
@keyframes flow-run { to { stroke-dashoffset: -12; } }
.flow .node-bg { fill: var(--surface); stroke-width: 2; }
.flow .node-ico { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.flow .kw { font-size: 22px; font-weight: 700; fill: var(--text-primary); font-variant-numeric: tabular-nums; }
.flow .lbl { font-size: 15px; fill: var(--text-secondary); }
.flow .hub { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 1.5; }
@media (max-width: 640px) { .flow .kw { font-size: 25px; } .flow .lbl { font-size: 18px; } }
.day-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.day-tiles .tile { box-shadow: none; background: var(--surface-2); }
.card-head .stamp { color: var(--text-muted); font-size: 12px; margin-left: auto; font-variant-numeric: tabular-nums; }
/* pages with their own sticky section bar sit under the top bar on tablets and phones */
@media (max-width: 1023px) { main .set-nav { top: 57px; } main section.set { scroll-margin-top: 110px; } }

/* Качество на данните: guard checks */
.guard-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.guard-list li { padding: 6px 10px; border-left: 3px solid var(--text-muted); border-radius: 4px; background: var(--surface-2); }
.guard-list li.ok { border-left-color: var(--s-good); }
.guard-list li.warn { border-left-color: var(--s-warn); }
.guard-list li.bad { border-left-color: var(--s-bad); }

/* ------------------------------------------------------------ motion (all of it off under prefers-reduced-motion, see the top) */
.enter { animation: enter .55s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes enter { from { opacity: 0; transform: translateY(12px); } }
.card, .tile, .hero { transition: box-shadow .2s, transform .2s; }
.tile:hover, .health-strip > div:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(11, 11, 11, .08); }
.meter > span { position: relative; transition: width 1.4s cubic-bezier(.2, .7, .2, 1); }
.meter > span::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  animation: shine 2.8s 1.6s ease-in-out infinite;
}
@keyframes shine { 60%, 100% { transform: translateX(100%); } }
.live { position: relative; }
.live.ok .dot { position: relative; box-shadow: none; }
.live.ok .dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--s-good);
  animation: ping 1.8s ease-out infinite;
}
@keyframes ping { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
.badge .ico { animation: pop .45s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: .5s; }
@keyframes pop { from { transform: scale(0); } }
.badge.s-watch .ico, .badge.s-at_risk .ico { animation: pop .45s cubic-bezier(.3, 1.6, .5, 1) .5s both, blink 1.6s 1s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .45; } }
.logo svg { animation: spin 18s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ring-fg { transition: stroke-dashoffset 1.4s cubic-bezier(.2, .7, .2, 1); }

/* heartbeat line on the health cards: runs in the status color, stands still without data */
.ecg { display: block; width: 100%; height: 34px; margin: 6px 0 2px; }
.ecg path { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ecg .base { stroke: var(--grid); }
.ecg .beat { stroke-dasharray: 60 400; animation: ecg 2.2s linear infinite; }
.ecg.idle .beat { animation: none; stroke-dasharray: none; stroke: var(--axis); }
@keyframes ecg { from { stroke-dashoffset: 460; } to { stroke-dashoffset: 0; } }

/* overview: energy flow dots and node glow */
.flow .pv-on .node-bg { animation: glow 2.4s ease-in-out infinite; }
@keyframes glow { 50% { stroke-width: 6; } }
.flow .spin { transform-box: view-box; animation: spin 14s linear infinite; }
.flow .soc { fill: var(--c-battery); opacity: .18; transition: height 1.4s, y 1.4s; }

/* day ring next to the day tiles */
.day-wrap { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 10px; }
.day-wrap .day-tiles { flex: 1 1 260px; margin-top: 0; }
.ring { position: relative; width: 150px; height: 150px; flex-shrink: 0; margin: 0 auto; }
.ring svg { width: 150px; height: 150px; stroke: none; }
.ring .ring-bg { fill: none; stroke: var(--grid); stroke-width: 14; }
.ring .ring-fg { fill: none; stroke-width: 14; stroke-linecap: round; }
.ring .ring-txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ring .ring-txt b { font-size: 28px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.ring .ring-txt span { color: var(--text-secondary); font-size: 11px; max-width: 104px; line-height: 1.2; }

/* battery page: live battery */
.live-batt { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.cell { display: flex; flex-direction: column; align-items: center; }
.cell .cap { width: 52px; height: 12px; background: var(--axis); border-radius: 6px 6px 0 0; }
.cell .body {
  position: relative; width: 140px; height: 230px; border: 4px solid var(--axis); border-radius: 22px;
  overflow: hidden; background: var(--surface-2);
}
.cell .liquid {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0; overflow: hidden;
  background: linear-gradient(180deg, #3fd19d, var(--c-battery)); transition: height 1.8s cubic-bezier(.2, .7, .2, 1);
}
.cell .wave { position: absolute; left: -50%; width: 200%; height: 400px; top: -388px; border-radius: 42%; background: var(--surface-2); animation: spin 7s linear infinite; }
.cell .wave.b { border-radius: 38%; opacity: .5; animation-duration: 10s; }
.cell .bubble { position: absolute; bottom: -10px; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .55); animation: bubble 3.2s ease-in infinite; }
.cell.idle .bubble { display: none; }
@keyframes bubble { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-220px); opacity: 0; } }
.cell .pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 38px; font-weight: 700; letter-spacing: -0.03em; color: var(--text-primary); }
.batt-info { flex: 1 1 240px; display: flex; flex-direction: column; gap: 14px; }
.batt-info .kw { display: flex; align-items: center; gap: 12px; }
.batt-info .kw b { font-size: 30px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.chev { width: 28px; height: 44px; stroke: var(--c-battery); stroke-width: 3; }
.chev.down { transform: rotate(180deg); stroke: var(--c-load); }
.chev path { opacity: .2; animation: chev 1.2s ease-in-out infinite; }
.chev path:nth-child(2) { animation-delay: .2s; } .chev path:nth-child(3) { animation-delay: .4s; }
.chev.idle path { animation: none; opacity: .25; }
@keyframes chev { 40% { opacity: 1; } 80%, 100% { opacity: .2; } }
.tempbar { position: relative; height: 10px; border-radius: 999px; margin-top: 6px; background: linear-gradient(90deg, var(--c-load) 0%, var(--c-battery) 30%, var(--c-battery) 50%, var(--s-warn) 70%, var(--c-grid) 100%); }
.tempbar .mk { position: absolute; top: -5px; left: 0; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: var(--surface); border: 3px solid var(--text-primary); transition: left 1.6s cubic-bezier(.2, .7, .2, 1); }
.scale { display: flex; justify-content: space-between; color: var(--text-muted); font-size: 12px; margin-top: 4px; }

/* production page: sun arc and roof/carport race */
.sun-arc { position: relative; width: 100%; max-width: 600px; margin: 0 auto; }
.sun-arc svg { width: 100%; height: auto; stroke: none; display: block; }
.sun-arc .track { fill: none; stroke: var(--grid); stroke-width: 3; stroke-dasharray: 4 8; }
.sun-arc .done { fill: none; stroke: var(--c-pv); stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset 2.2s cubic-bezier(.3, .6, .3, 1); }
.sun-arc .horizon { stroke: var(--axis); stroke-width: 1; }
.sun-arc .sunball { fill: var(--c-pv); transition: transform 2.2s cubic-bezier(.3, .6, .3, 1); }
.sun-arc .halo { fill: var(--c-pv); opacity: .18; animation: halo 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes halo { 50% { transform: scale(1.5); opacity: .05; } }
.sun-arc .t { fill: var(--text-muted); font-size: 13px; }
.sun-arc .big { fill: var(--text-primary); font-size: 34px; font-weight: 700; }
.sun-arc .mid { fill: var(--text-secondary); font-size: 14px; }
.race { display: flex; flex-direction: column; gap: 16px; margin-top: 10px; }
.race .row { display: flex; justify-content: space-between; gap: 8px; }
.race .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; }
.race .track { height: 14px; background: var(--surface-2); border-radius: 999px; margin-top: 6px; overflow: hidden; }
.race .fill { height: 100%; width: 0; border-radius: 999px; transition: width 1.8s cubic-bezier(.2, .7, .2, 1); }
.day-tiles .tile .code { display: none; }
.i18n-pending body { visibility: hidden; }