/* power-pc web — HUD theme. Dark only: it's a control-room display. */
:root {
  --bg: #04070d;
  --bg-2: #070d18;
  --panel: rgba(10, 20, 36, 0.62);
  --panel-solid: #0a1424;
  --line: rgba(0, 229, 255, 0.18);
  --line-strong: rgba(0, 229, 255, 0.45);
  --text: #d6e6f7;
  --muted: #6f89a8;
  --dim: #3b506b;
  --cyan: #00e5ff;
  --teal: #1de9b6;
  --violet: #9d7bff;
  --magenta: #ff3dc8;
  --amber: #ffc22e;
  --orange: #ff8a1f;
  --red: #ff3d5a;
  --green: #3dffa2;
  --accent: var(--cyan);
  --glow: 0 0 18px rgba(0, 229, 255, 0.35);
  --radius: 14px;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --display: "Orbitron", "Rajdhani", "Segoe UI", sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- background ---------- */
.bg-grid, .bg-glow { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.bg-grid {
  background-image:
    linear-gradient(rgba(0, 229, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.055) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 78%);
  animation: grid-drift 40s linear infinite;
}
.bg-glow {
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(0, 229, 255, 0.13), transparent 60%),
    radial-gradient(800px 600px at 105% 15%, rgba(157, 123, 255, 0.12), transparent 60%),
    radial-gradient(900px 500px at 50% 120%, rgba(29, 233, 182, 0.08), transparent 60%);
}
body::after { /* scanlines */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}
@keyframes grid-drift { to { background-position: 44px 44px, 44px 44px; } }

/* ---------- header ---------- */
.hud-top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 24px;
  padding: 14px 28px;
  background: linear-gradient(180deg, rgba(4, 7, 13, 0.92), rgba(4, 7, 13, 0.7));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.hud-top::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: 0.6;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark { width: 30px; height: 30px; fill: var(--cyan); filter: drop-shadow(0 0 8px var(--cyan)); }
.brand-name { font: 800 20px/1 var(--display); letter-spacing: 0.12em; }
.brand-name span { color: var(--cyan); margin: 0 2px; }
.brand-sub { font: 500 10px/1.6 var(--display); letter-spacing: 0.22em; color: var(--muted); }

.tabs { display: flex; gap: 4px; margin-left: auto; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: rgba(0,0,0,0.25); }
.tabs a {
  font: 600 12px/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; padding: 10px 18px; border-radius: 999px;
  transition: color .2s, background .2s, box-shadow .2s;
}
.tabs a:hover { color: var(--text); }
.tabs a.active { color: #001318; background: var(--cyan); box-shadow: var(--glow); }

.status-cluster { display: flex; align-items: center; gap: 18px; }
.clock { text-align: right; font: 600 18px/1.1 var(--mono); letter-spacing: 0.04em; }
.clock small { display: block; font: 500 11px/1.4 var(--mono); color: var(--muted); }
.link { display: flex; align-items: center; gap: 8px; font: 600 10px/1 var(--display); letter-spacing: 0.18em; color: var(--muted); }
.link .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dim); }
.link.ok .dot { background: var(--green); box-shadow: 0 0 10px var(--green); animation: pulse 2s ease-in-out infinite; }
.link.ok { color: var(--green); }
.link.warn .dot { background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.link.warn { color: var(--amber); }
.link.bad .dot { background: var(--red); box-shadow: 0 0 10px var(--red); animation: pulse 0.9s ease-in-out infinite; }
.link.bad { color: var(--red); }
@keyframes pulse { 50% { opacity: 0.35; } }

.countdown { width: 40px; height: 40px; transform: rotate(-90deg); }
.cd-track { fill: none; stroke: var(--line); stroke-width: 3; }
.cd-arc { fill: none; stroke: var(--cyan); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 94.25; transition: stroke-dashoffset 1s linear; filter: drop-shadow(0 0 4px var(--cyan)); }
.countdown text { transform: rotate(90deg); transform-origin: 18px 18px; fill: var(--text); font: 600 9px var(--mono); text-anchor: middle; }

.banner {
  position: relative; z-index: 15; margin: 12px 28px 0; padding: 12px 18px; border-radius: 10px;
  font: 600 13px/1.4 var(--display); letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid; display: flex; gap: 12px; align-items: center;
}
.banner.alert { color: var(--amber); border-color: rgba(255,194,46,.5); background: rgba(255,194,46,.08); }
.banner.warn { color: var(--orange); border-color: rgba(255,138,31,.55); background: rgba(255,138,31,.1); }
.banner.off, .banner.bad { color: var(--red); border-color: rgba(255,61,90,.6); background: rgba(255,61,90,.1); animation: banner-flash 1.6s ease-in-out infinite; }
@keyframes banner-flash { 50% { box-shadow: 0 0 26px rgba(255,61,90,.35); } }
.banner { flex-direction: column; align-items: stretch; gap: 6px; }
.banner .bl.alert { color: var(--amber); } .banner .bl.warn { color: var(--orange); } .banner .bl.off, .banner .bl.bad { color: var(--red); }

/* ---------- layout ---------- */
main { position: relative; z-index: 1; padding: 20px 28px 40px; max-width: 1880px; margin: 0 auto; }
.view[hidden], .banner[hidden] { display: none !important; }

.panel {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  backdrop-filter: blur(14px) saturate(130%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 10px 40px rgba(0,0,0,0.35);
  min-width: 0;
}
/* HUD corner brackets */
.panel::before, .panel::after {
  content: ""; position: absolute; width: 16px; height: 16px; pointer-events: none;
  border: 2px solid var(--cyan); opacity: 0.7;
}
.panel::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: var(--radius); }
.panel::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-bottom-right-radius: var(--radius); }

.panel-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font: 600 11px/1 var(--display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 12px;
}
.tag, .chip {
  font: 600 10px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 8px; border-radius: 6px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap;
}
.chip { color: var(--cyan); border-color: var(--line-strong); }
.chip.who.ro { color: var(--amber); border-color: rgba(255,194,46,.5); }
.chip.who.ctl { color: var(--green); border-color: rgba(61,255,162,.45); }
.tabs a[hidden], .chip[hidden] { display: none; }

/* ---------- live ---------- */
.live-grid {
  display: grid; gap: 18px;
  grid-template-columns: minmax(330px, 1.15fr) repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "hero rtm da ici"
    "hero dev bud ici"
    "day day day day";
}
.hero { grid-area: hero; display: flex; flex-direction: column; align-items: center; }
#card-rtm { grid-area: rtm; } #card-da { grid-area: da; } #card-ici { grid-area: ici; }
#card-dev { grid-area: dev; } #card-budget { grid-area: bud; } #panel-day { grid-area: day; }
.hero .panel-head { align-self: stretch; }

.gauge-wrap { position: relative; width: min(100%, 300px); aspect-ratio: 1; margin: 6px 0 4px; }
.gauge { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.g-ticks { fill: none; stroke: var(--line-strong); stroke-width: 6; stroke-dasharray: 1.2 10.1; opacity: 0.55; }
.g-track { fill: none; stroke: rgba(0, 229, 255, 0.08); stroke-width: 16; }
.g-arc {
  fill: none; stroke: url(#g-arc-grad); stroke-width: 16; stroke-linecap: round;
  stroke-dasharray: 590.6; stroke-dashoffset: 590.6;
  transition: stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1), stroke .4s;
  filter: drop-shadow(0 0 10px var(--accent));
}
.g-inner { fill: rgba(0, 229, 255, 0.03); stroke: var(--line); stroke-width: 1; }
.gauge-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.gauge-center .big { font: 700 64px/1 var(--display); color: var(--text); text-shadow: 0 0 22px var(--accent); }
.gauge-center .unit { font: 600 10px/1 var(--display); letter-spacing: 0.3em; color: var(--muted); margin-top: 6px; }
.gauge-center .ma { font: 600 18px/1 var(--mono); color: var(--accent); margin-top: 12px; }

.state-badge {
  margin-top: 6px; padding: 9px 18px; border-radius: 999px; border: 1px solid currentColor;
  font: 700 13px/1 var(--display); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--green); box-shadow: 0 0 18px -4px currentColor; background: rgba(0,0,0,0.25);
}
.reason { color: var(--muted); text-align: center; margin: 12px 4px 0; font-size: 13px; max-width: 34ch; }

.hero.s-ok { --accent: var(--teal); }
.hero.s-stale { --accent: var(--red); }
.hero.s-over_max, .hero.s-spend_error { --accent: var(--orange); }
.hero.s-ici_peak { --accent: var(--red); }
.hero.s-stale .g-arc, .hero.s-ici_peak .g-arc { stroke: var(--red); }
.hero.s-over_max .g-arc, .hero.s-spend_error .g-arc { stroke: var(--orange); }

.metric { display: flex; flex-direction: column; }
/* the price card the output follows (Price/Budget mode, selected source) */
.tag.driver { display: none; color: #001318; background: var(--cyan); border-color: var(--cyan); box-shadow: var(--glow); }
.metric.driving .tag.driver { display: inline-block; }
.metric.driving .tag.src { display: none; }
.metric.driving { border-color: var(--line-strong); box-shadow: inset 0 0 0 1px rgba(0,229,255,.35), 0 0 32px rgba(0,229,255,.18), 0 10px 40px rgba(0,0,0,.35); }
.metric.driving::before, .metric.driving::after { width: 26px; height: 26px; opacity: 1; filter: drop-shadow(0 0 6px var(--cyan)); }
.metric.idle .metric-val span { opacity: 0.55; }
.metric-val { display: flex; align-items: baseline; gap: 8px; font: 700 42px/1.05 var(--display); letter-spacing: 0.02em; }
.metric-val small { font: 600 12px/1 var(--mono); color: var(--muted); letter-spacing: 0.04em; }
.metric-val span { text-shadow: 0 0 18px currentColor; transition: color .4s; }
.metric-sub { color: var(--muted); font: 500 12px/1.5 var(--mono); margin-top: 6px; }
.spark { margin-top: auto; height: 4px; border-radius: 4px; background: rgba(255,255,255,0.05); overflow: hidden; }
.spark i, .bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--magenta)); box-shadow: 0 0 10px var(--cyan); transition: width 1s ease; }
.bar { height: 8px; border-radius: 8px; background: rgba(255,255,255,0.05); overflow: hidden; margin: 12px 0 4px; }
.bar i { background: linear-gradient(90deg, var(--teal), var(--cyan)); }

.ici-meter { position: relative; height: 14px; margin: 18px 0 8px; border-radius: 8px; background: linear-gradient(90deg, rgba(61,255,162,.12), rgba(255,194,46,.12) 75%, rgba(255,61,90,.2)); border: 1px solid var(--line); overflow: visible; }
.ici-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--teal), var(--cyan)); box-shadow: 0 0 14px var(--cyan); transition: width 1s ease, background .4s; }
.ici-mark { position: absolute; top: -6px; bottom: -6px; width: 2px; border-radius: 2px; }
.ici-mark[data-k="alert"] { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.ici-mark[data-k="warn"] { background: var(--orange); box-shadow: 0 0 8px var(--orange); }
.ici-mark[data-k="off"] { background: var(--red); box-shadow: 0 0 8px var(--red); }
.ici-legend { display: flex; justify-content: space-between; font: 500 12px var(--mono); color: var(--muted); }
.next-hours { margin-top: 18px; display: grid; gap: 7px; }
.next-hours .nh-title { font: 600 9px var(--display); letter-spacing: 0.2em; color: var(--muted); text-transform: uppercase; display: flex; justify-content: space-between; }
.nh { display: grid; grid-template-columns: 54px 1fr 92px; align-items: center; gap: 10px; font: 500 12px var(--mono); color: var(--muted); }
.nh .nb { height: 6px; border-radius: 6px; background: rgba(255,255,255,0.05); overflow: hidden; }
.nh .nb i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--teal), var(--cyan)); }
.nh.l1 .nb i { background: var(--amber); } .nh.l2 .nb i { background: var(--orange); } .nh.l3 .nb i { background: var(--red); box-shadow: 0 0 8px var(--red); }
.nh b { color: var(--text); font-weight: 600; text-align: right; }
.nh.now { color: var(--cyan); }
#card-ici .metric-val { font-size: 50px; }
.ici.l1 .ici-fill { background: var(--amber); box-shadow: 0 0 14px var(--amber); }
.ici.l2 .ici-fill { background: var(--orange); box-shadow: 0 0 14px var(--orange); }
.ici.l3 .ici-fill { background: var(--red); box-shadow: 0 0 14px var(--red); }
/* ICI alarm (actual demand at a level): same treatment as the output-device fault, coloured by
   level; the pulse gets faster as the level climbs */
#card-ici.a1 { --al: var(--amber); --al-rgb: 255,194,46; --al-ink: #1a1200; --al-t: 2s; }
#card-ici.a2 { --al: var(--orange); --al-rgb: 255,138,31; --al-ink: #1a0b00; --al-t: 1.4s; }
#card-ici.a3 { --al: var(--red); --al-rgb: 255,61,90; --al-ink: #fff; --al-t: 0.9s; }
#card-ici.alarm {
  border-color: var(--al); background: linear-gradient(180deg, rgba(var(--al-rgb),.16), rgba(var(--al-rgb),.05)), var(--panel);
  animation: ici-alarm var(--al-t) ease-in-out infinite;
}
#card-ici.alarm::before, #card-ici.alarm::after { border-color: var(--al); opacity: 1; }
#card-ici.alarm .panel-head { color: var(--al); }
#card-ici.alarm #ici-tag {
  color: var(--al-ink); background: var(--al); border-color: var(--al); font-size: 11px; padding: 6px 10px;
  box-shadow: 0 0 14px var(--al); animation: pulse var(--al-t) ease-in-out infinite;
}
#card-ici.alarm #ici-tag::before { content: "⚠ "; }
#card-ici.alarm .ici-legend #ici-pct { color: var(--al); font-weight: 700; }
.ici-msg[hidden] { display: none; }
#card-ici.alarm .ici-msg {
  color: #fff; font: 700 14px/1.4 var(--mono); margin-top: 12px; padding: 10px 12px; border-radius: 8px;
  background: rgba(var(--al-rgb),.28); border: 1px solid var(--al);
}
#card-ici.alarm .ici-msg::before { content: "⚠ "; font-weight: 800; }
@keyframes ici-alarm {
  50% { box-shadow: 0 0 0 1px var(--al), 0 0 34px rgba(var(--al-rgb),.55), inset 0 0 26px rgba(var(--al-rgb),.18); }
}
@media (prefers-reduced-motion: reduce) {
  #card-ici.alarm { box-shadow: 0 0 0 1px var(--al), 0 0 28px rgba(var(--al-rgb),.45); }
}

.dev-rows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dev-rows div { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 10px; background: rgba(0,0,0,0.22); border: 1px solid var(--line); min-width: 0; }
.dev-rows small { font: 600 9px/1 var(--display); letter-spacing: 0.18em; color: var(--muted); text-transform: uppercase; }
.dev-rows b { font: 600 18px/1.1 var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* output device fault: the signal is not reaching the greenhouse - must grab attention */
#card-dev.fault {
  border-color: var(--red); background: linear-gradient(180deg, rgba(255,61,90,.16), rgba(255,61,90,.05)), var(--panel);
  animation: dev-fault 1.2s ease-in-out infinite;
}
#card-dev.fault::before, #card-dev.fault::after { border-color: var(--red); opacity: 1; }
#card-dev.fault .panel-head { color: var(--red); }
#card-dev.fault #usb-tag {
  color: #fff; background: var(--red); border-color: var(--red); font-size: 11px; padding: 6px 10px;
  box-shadow: 0 0 14px var(--red); animation: pulse 0.9s ease-in-out infinite;
}
#card-dev.fault #usb-tag::before { content: "⚠ "; }
#card-dev.fault .dev-rows div { border-color: rgba(255,61,90,.45); }
#card-dev.fault #dev-actual { color: var(--red); }
#card-dev.fault #usb-msg {
  color: #fff; font: 700 14px/1.4 var(--mono); margin-top: 12px; padding: 10px 12px; border-radius: 8px;
  background: rgba(255,61,90,.28); border: 1px solid var(--red);
}
#card-dev.fault #usb-msg::before { content: "⚠ FAULT · "; font-weight: 800; }
@keyframes dev-fault {
  50% { box-shadow: 0 0 0 1px var(--red), 0 0 34px rgba(255,61,90,.55), inset 0 0 26px rgba(255,61,90,.18); }
}
/* reduced motion: no pulse, keep a static glow so the fault still stands out */
@media (prefers-reduced-motion: reduce) {
  #card-dev.fault { box-shadow: 0 0 0 1px var(--red), 0 0 28px rgba(255,61,90,.45); }
}

/* plot height comes from --h (uPlot adds its legend below, so the box itself is auto-height) */
.chart { width: 100%; --h: 250; }
.chart.tall { --h: 470; }
.chart-panel .chart { --h: 300; }
.chart-panel .chart.tall { --h: 470; }
.chart canvas { filter: drop-shadow(0 0 3px rgba(0, 229, 255, 0.35)); }

.hour-strip { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; margin-top: 10px; }
.hour-strip div { padding: 7px 0; border-radius: 6px; text-align: center; font: 600 11px/1.15 var(--mono); color: #e9f6ff; border: 1px solid transparent; }
.hour-strip div small { display: block; font-size: 9px; color: rgba(255,255,255,0.55); }
.hour-strip div.past { opacity: 0.35; }
.hour-strip div.now { border-color: var(--cyan); box-shadow: 0 0 14px var(--cyan), inset 0 0 10px rgba(0,229,255,.35); }

/* ---------- uPlot dark ---------- */
.u-legend { font: 500 12px var(--mono); color: var(--muted); }
.u-legend .u-marker { border-radius: 2px; }
.u-legend th { font-weight: 500; }
.u-select { background: rgba(0, 229, 255, 0.12); }
.u-cursor-x, .u-cursor-y { border-color: rgba(0, 229, 255, 0.5) !important; }

/* ---------- history ---------- */
#view-history { display: grid; gap: 18px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button, .segmented button {
  font: 600 11px/1 var(--display); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); background: rgba(0,0,0,0.25); border: 1px solid var(--line);
  padding: 9px 13px; border-radius: 8px; cursor: pointer; transition: all .18s;
}
.chips.small button { font: 500 11px/1 var(--sans); letter-spacing: 0.02em; text-transform: none; padding: 7px 10px; }
.chips button:hover, .segmented button:hover { color: var(--text); border-color: var(--line-strong); }
.chips button.on, .segmented button.on { color: #001318; background: var(--cyan); border-color: var(--cyan); box-shadow: var(--glow); }
.range-inputs { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.range-inputs label { font: 600 10px var(--display); letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; display: flex; gap: 8px; align-items: center; }
input[type="datetime-local"], input[type="number"] {
  background: rgba(0,0,0,0.35); color: var(--text); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; font: 500 13px var(--mono); min-width: 0;
}
input:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.h-meta { margin-left: auto; font: 500 12px var(--mono); color: var(--muted); }

.btn {
  font: 700 11px/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase;
  color: #001318; background: var(--cyan); border: 1px solid var(--cyan); border-radius: 9px;
  padding: 11px 16px; cursor: pointer; box-shadow: var(--glow); transition: transform .12s, opacity .2s, box-shadow .2s;
}
.btn:hover { box-shadow: 0 0 26px rgba(0, 229, 255, 0.6); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: none; }
.btn.ghost { color: var(--cyan); background: transparent; box-shadow: none; }
.btn.danger { color: var(--red); background: transparent; border-color: rgba(255,61,90,.6); box-shadow: none; }
.btn.danger:hover { box-shadow: 0 0 20px rgba(255,61,90,.4); }

/* ---------- cost ---------- */
.cost-grid { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 18px; }
.cost-form form { display: grid; gap: 4px; }
.cost-form h4 { margin: 14px 0 6px; font: 600 10px var(--display); letter-spacing: 0.18em; color: var(--cyan); text-transform: uppercase; }
.cost-form label, .settings-panel label {
  display: grid; grid-template-columns: 1fr 130px; align-items: center; gap: 10px; padding: 4px 0;
  color: var(--text); font-size: 13px;
}
.cost-form label input, .settings-panel label input { width: 100%; text-align: right; }
.cost-form .btn { margin-top: 14px; }
.note { color: var(--muted); font-size: 12px; margin: 10px 0 0; }
.note.warn { color: var(--red); }

/* ---------- control ---------- */
.control-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.settings-panel { grid-column: 1 / -1; }
.output-panel { grid-column: 1 / -1; }
.mb-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.mb-grid select, .mb-grid input { width: 100%; }
.mb-grid .wide { grid-column: span 2; }
select {
  font: 500 13px var(--mono); color: var(--text); background: rgba(0,0,0,0.35); border: 1px solid var(--line-strong);
  border-radius: 8px; padding: 9px 10px; min-width: 0;
}
.mb-stats { margin-bottom: 8px; }
#o-err { color: var(--red); min-height: 1em; }
#o-modbus.dim { opacity: 0.45; }
.mb-map { margin-top: 16px; }
.mb-map summary { cursor: pointer; font: 600 10px var(--display); letter-spacing: 0.18em; color: var(--cyan); text-transform: uppercase; }
.mb-map table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 12px; }
.mb-map th { text-align: left; font: 600 9px var(--display); letter-spacing: 0.16em; color: var(--muted); text-transform: uppercase; padding: 6px 8px; border-bottom: 1px solid var(--line-strong); }
.mb-map td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.mb-map td:nth-child(-n+3) { font-family: var(--mono); white-space: nowrap; }
.field-block { margin: 6px 0 16px; }
.field-block .label { font: 600 10px var(--display); letter-spacing: 0.18em; color: var(--muted); text-transform: uppercase; margin-bottom: 8px; display: flex; justify-content: space-between; }
.field-block .label b { color: var(--cyan); font: 700 16px var(--mono); letter-spacing: 0; }
.segmented { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.segmented button { padding: 12px 18px; font-size: 12px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.num { display: flex; flex-direction: column; gap: 6px; }
.num span { font: 600 10px var(--display); letter-spacing: 0.18em; color: var(--muted); text-transform: uppercase; }
.num small { color: var(--muted); font: 500 11px var(--mono); }
input[type="range"] { width: 100%; accent-color: var(--cyan); height: 28px; }
.actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.pending { font: 500 12px var(--mono); color: var(--muted); }
.pending.ok { color: var(--green); } .pending.err { color: var(--red); }
.log { margin-top: 14px; display: grid; gap: 6px; max-height: 220px; overflow: auto; }
.log div { font: 500 12px/1.4 var(--mono); color: var(--muted); padding: 6px 10px; border-left: 2px solid var(--line-strong); background: rgba(0,0,0,0.2); border-radius: 0 6px 6px 0; }
.log div.err { border-left-color: var(--red); color: #ffb3c0; }
.log div.ok { border-left-color: var(--green); }
#settings-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 8px 32px; }
#settings-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
#settings-form legend { font: 600 10px var(--display); letter-spacing: 0.18em; color: var(--cyan); text-transform: uppercase; margin: 8px 0 6px; padding: 0; }
.settings-panel label { grid-template-columns: 1fr 120px 44px; }
.settings-panel label .suf { color: var(--muted); font: 500 11px var(--mono); }
.settings-panel label.dirty input { border-color: var(--amber); box-shadow: 0 0 10px rgba(255,194,46,.3); }
.settings-panel label .lbl { cursor: help; border-bottom: 1px dotted var(--dim); justify-self: start; }

/* ---------- modal + toasts ---------- */
.modal { border: 1px solid var(--line-strong); border-radius: 14px; background: var(--panel-solid); color: var(--text); padding: 22px 24px; max-width: 460px; box-shadow: 0 0 60px rgba(0,229,255,.18); }
.modal::backdrop { background: rgba(2,4,8,0.7); backdrop-filter: blur(3px); }
.modal h3 { margin: 0 0 8px; font: 700 15px var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); }
.modal p { color: var(--muted); margin: 0; white-space: pre-line; }
.toasts { position: fixed; right: 20px; bottom: 20px; display: grid; gap: 8px; z-index: 60; }
.toast { padding: 12px 16px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--panel-solid); font: 500 13px var(--sans); box-shadow: 0 0 24px rgba(0,229,255,.2); animation: toast-in .25s ease-out; max-width: 380px; }
.toast.err { border-color: rgba(255,61,90,.6); box-shadow: 0 0 24px rgba(255,61,90,.25); }
.toast.ok { border-color: rgba(61,255,162,.5); }
@keyframes toast-in { from { transform: translateY(10px); opacity: 0; } }

/* ---------- responsive ---------- */
@media (max-width: 1280px) {
  .live-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "hero hero" "rtm da" "ici ici" "dev bud" "day day"; }
  .hero { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0 28px; }
  .hero .panel-head { flex-basis: 100%; }
}
@media (max-width: 900px) {
  .hud-top { flex-wrap: wrap; gap: 10px 16px; padding: 10px 16px; }
  .tabs { order: 3; margin: 0; width: 100%; justify-content: space-between; }
  .tabs a { flex: 1; text-align: center; padding: 10px 6px; }
  .status-cluster { margin-left: auto; gap: 12px; }
  .brand-sub, .link #link-text { display: none; }
  main { padding: 14px 14px 32px; }
  .banner { margin: 10px 14px 0; }
  .cost-grid, .control-grid { grid-template-columns: 1fr; }
  .mb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mb-grid .wide { grid-column: 1 / -1; }
  .mb-map td:nth-child(3), .mb-map th:nth-child(3) { display: none; }
  .chart.tall, .chart-panel .chart.tall { --h: 360; }
  .hour-strip { grid-template-columns: repeat(12, 1fr); }
  .h-meta { margin-left: 0; }
}
@media (max-width: 560px) {
  .live-grid { grid-template-columns: 1fr; grid-template-areas: "hero" "rtm" "da" "ici" "dev" "bud" "day"; }
  .gauge-center .big { font-size: 52px; }
  .metric-val { font-size: 36px; }
  .clock { font-size: 15px; }
  .cost-form label, .settings-panel label { grid-template-columns: 1fr 110px; }
  .settings-panel label .suf { display: none; }
  .field-row { grid-template-columns: 1fr; }
  .chart, .chart-panel .chart { --h: 220; }
  .chart-panel .chart.tall { --h: 300; }
  .hour-strip { grid-template-columns: repeat(6, 1fr); }
  .hour-strip div { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}