:root {
  color-scheme: light;
  --bg: #eff1f7; --paper: #fff; --text: #16172c; --muted: #62687e;
  --line: #e7e9f3; --accent: #5143cb; --soft: #eeebff; --well: #f5f5fa;
  --mint: #08796f; --gas: #af4e26; --shadow: 0 4px 20px #20204712;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
  font-synthesis: none;
}
:root[data-theme=dark] {
  color-scheme: dark;
  --bg: #151526; --paper: #212236; --text: #f1f0fa; --muted: #aeb1ca;
  --line: #373952; --accent: #b9afff; --soft: #39335d; --well: #292b40;
  --mint: #79e2d1; --gas: #ffae8f; --shadow: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #151526; --paper: #212236; --text: #f1f0fa; --muted: #aeb1ca;
    --line: #373952; --accent: #b9afff; --soft: #39335d; --well: #292b40;
    --mint: #79e2d1; --gas: #ffae8f; --shadow: none;
  }
}
* { box-sizing: border-box }
[hidden] { display: none !important }
.off-page { display:none !important }
body { margin: 0; background: var(--bg); color: var(--text); padding-bottom: calc(95px + env(safe-area-inset-bottom)); }
h1,h2,h3,p { margin: 0 }
h1 { font-size: clamp(2.35rem,7vw,3.8rem); letter-spacing: -.065em; line-height: 1.04 }
h2 { font-size: 1.22rem; letter-spacing: -.035em }
h3 { font-size: 1rem; letter-spacing: -.015em }
a { color: inherit }
button,input,select { font: inherit; color: inherit }
button { min-height: 44px; border: 0; background: var(--well); color: var(--accent); padding: 8px 14px; border-radius: 13px; font-weight: 680; cursor: pointer }
button:disabled { opacity: .46; cursor: default }
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,[tabindex]:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px }
.symbols { position:absolute;width:0;height:0 }
button svg,.live-symbol svg,.room-icon svg { width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round }
.frame { width: min(100%,1120px); padding-inline: 25px; margin-inline: auto }
.masthead { background: color-mix(in srgb,var(--bg) 87%,transparent); position: sticky; top: 0; z-index: 2; backdrop-filter: blur(20px); padding-top: env(safe-area-inset-top); border-bottom: 1px solid var(--line) }
.bar,.toolbar,.section-head,.intro { display:flex; align-items:center; justify-content:space-between; gap:12px }
.bar { min-height: 66px }
.brand { display:flex;align-items:center;gap:10px;font-size:1.08rem;font-weight:770;white-space:nowrap;text-decoration:none;letter-spacing:-.035em }
.brand img { border-radius: 11px }
.connection,.subtle,#rooms-count,#last-update { color:var(--muted);font-size:.84rem }
.connection { display:flex;align-items:center;gap:6px }
.connection::before { content:""; width:7px;height:7px;background:var(--mint);border-radius:50% }
.intro { padding-block: 37px 24px; align-items: end }
#date { color:var(--muted); margin-bottom:7px; font-weight:600;font-size:.81rem }
#date::first-letter { text-transform:capitalize }
.dashboard { display:grid;grid-template-columns:1.15fr 1fr;gap:18px }
.panel { min-width:0;padding:22px;background:var(--paper);border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow) }
.energy,.dashboard[data-page=energy] .flow,.dashboard[data-page=climate] .climate { grid-column:1/-1 }
.flow { background:linear-gradient(145deg,#393088,#252051 62%,#191a38);color:#fff;border-color:transparent }
.flow .pill { background:#ffffff20;color:#fff }
.pill { padding:6px 10px;display:inline-flex;align-items:center;white-space:nowrap; border-radius:999px;background:var(--soft);color:var(--accent);font-size:.75rem;font-weight:700 }
.live-main { display:flex;justify-content:space-between;align-items:center;gap:14px }
.current { padding:24px 0 21px }
.current strong { display:block; font-size:clamp(2.6rem,8vw,4.25rem);letter-spacing:-.075em;line-height:1;font-variant-numeric:tabular-nums }
.current p { color:#ddd9ff;margin-top:7px;font-size:.95rem }
.live-symbol { color:#e4ddff;display:grid;place-items:center;width:62px;height:62px;flex:none;border-radius:20px;background:#ffffff16;border:1px solid #ffffff25 }
.live-symbol svg { width:29px;height:29px }
.phases,.totals { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px }
.phases>div,.totals>div { min-width:0;padding:11px 10px;border-radius:15px }
.phases>div { background:#ffffff13 }
.totals>div { background:var(--well) }
.phases span,.totals span { display:block;font-size:.73rem;line-height:1.2 }
.phases span { color:#dedbfa }
.phases strong,.totals strong { display:block;margin-block:5px 3px;font-size:clamp(.86rem,2.8vw,1.19rem);font-variant-numeric:tabular-nums;letter-spacing:-.03em }
.phases small { font-size:.71rem;color:#dfdcfb }
.totals span { color:var(--muted) }
.totals .electricity { color:var(--accent) }
.totals .export { color:var(--mint) }
.totals .gas { color:var(--gas) }
.totals { margin-block:14px 18px }
.room { padding:13px 0;display:flex;align-items:center;justify-content:space-between;gap:11px }
.room+.room { border-top:1px solid var(--line) }
.room p { margin-top:4px }
.room-main { display:flex;align-items:center;gap:11px;min-width:0 }
.room-title,.room-state { display:block }
.room-state { margin-top:4px }
.room-icon { display:grid;place-items:center;background:var(--soft);color:var(--accent);width:44px;height:44px;flex:none;border-radius:14px }
.room-temp { margin-left:auto;text-align:right;white-space:nowrap }
.room-temp strong { font-size:1.28rem;letter-spacing:-.045em }
.room-temp small { display:block;color:var(--muted);font-size:.75rem }
.climate .section-head { margin-bottom:8px }
.climate .room button { min-width:44px;flex:none;font-size:1.45rem;padding:5px 11px }
.room-action { width:100%;background:none;text-align:left;color:inherit;border-radius:14px;padding:12px 0 }
.room-action::after { content:"›";color:var(--muted);font-size:1.45rem;line-height:1;flex:none }
.energy-head { flex-wrap:wrap }
.segments { display:flex;gap:3px;background:var(--well);padding:4px;border-radius:14px }
.segments button { min-height:39px;flex:1;padding:6px 11px;color:var(--muted);background:transparent;font-size:.83rem;border-radius:10px }
.segments [aria-pressed=true] { background:var(--paper);color:var(--accent);box-shadow:var(--shadow) }
.period-picker { display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;text-align:center;margin-top:14px;gap:8px }
.period-picker button { font-size:1.55rem;line-height:1 }
.chart-switch { margin-bottom:10px }
#chart-detail { font-size:.84rem;font-weight:700;min-height:24px;color:var(--muted) }
.chart { background:var(--well);padding:8px 6px;border-radius:17px;min-height:120px;display:grid;align-items:center;color:var(--muted) }
.chart svg { display:block;width:100%;height:auto;overflow:visible;touch-action:pan-y }
.chart svg text { fill:var(--muted);font-size:12px }
.chart line { stroke:var(--line) }
.chart .marker { stroke:var(--muted);stroke-dasharray:3 4 }
.chart .series { fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke }
.chart .import { fill:var(--accent) }
.chart .export { fill:var(--mint) }
.chart .gas { fill:var(--gas) }
.chart-legend { display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:.76rem;color:var(--muted) }
.chart-legend span::before { content:"";display:inline-block;width:8px;height:8px;background:var(--accent);border-radius:50%;margin-right:6px }
.chart-legend .export::before { background:var(--mint) }
.chart-legend .gas::before { background:var(--gas) }
#coverage,#gas-update,#schedules-mode,#presence .subtle { margin-top:9px }
.empty { padding:12px;text-align:center;font-size:.86rem }
.settings-list { display:grid;gap:10px;margin-top:14px;justify-items:start }
.tabbar { display:grid;grid-template-columns:repeat(4,1fr); gap:4px;width:min(490px,calc(100% - 28px));position:fixed;z-index:3;bottom:calc(12px + env(safe-area-inset-bottom));left:50%;translate:-50% 0;border:1px solid var(--line);border-radius:23px;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(24px);box-shadow:0 12px 36px #13143232;padding:5px }
.tabbar button { min-width:0;display:grid;justify-items:center;gap:4px;background:none;color:var(--muted);font-size:.74rem;padding:6px 2px;border-radius:17px }
.tabbar [aria-current] { background:var(--soft);color:var(--accent) }
.tabbar button svg { width:21px;height:21px }
dialog { width:min(485px,calc(100% - 28px)); max-height:calc(100dvh - 32px); overflow:auto;border:1px solid var(--line);background:var(--paper);color:var(--text);border-radius:26px;padding:22px;box-shadow:var(--shadow) }
dialog::backdrop { background:#14112d8a;backdrop-filter:blur(5px) }
dialog .section-head button { font-size:1.2rem }
.fields { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0 }
.fields label { display:grid;gap:6px;font-size:.83rem;font-weight:630;color:var(--muted) }
.fields input,.fields select { min-width:0;width:100%;min-height:46px;border:1px solid var(--line);border-radius:13px;background:var(--well);padding:8px 11px;font-size:16px;color:var(--text) }
.fields input[type=checkbox] { width:23px;height:23px;min-height:0;accent-color:var(--accent) }
.primary { background:#5346cc;color:#fff;margin-top:10px;min-height:48px }
#login-panel { max-width:480px;margin-inline:auto }
#login-panel .fields { grid-template-columns:1fr }
#login-panel .primary,#save { width:100% }
#offline-message { margin-bottom:16px }
.thermostat { grid-column:1/-1;background:var(--well);border-radius:20px;text-align:center;padding:15px }
.temperature-stepper { display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:10px;margin:8px auto;width:min(100%,260px) }
.temperature-stepper button { font-size:1.4rem }
.temperature-stepper output { color:var(--text);font-size:2.45rem;letter-spacing:-.07em;font-weight:750 }
.control-modes { grid-column:1/-1;display:grid;gap:7px }
.mode-options { display:flex;gap:5px;overflow-x:auto;padding-bottom:3px }
.mode-options button { flex:1;white-space:nowrap;font-size:.78rem;padding-inline:9px }
.mode-options button[aria-pressed=true],.power-toggle[aria-pressed=true] { background:var(--soft);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent) }
.power-toggle { grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:8px }
#control-message { color:var(--muted);font-size:.86rem }
@media(max-width:700px) {
  .frame { padding-inline:15px }
  .bar { min-height:58px }
  .toolbar { gap:6px }
  .toolbar .connection,#last-update { display:none }
  .toolbar button { padding-inline:8px; font-size:.77rem }
  .intro { padding-block:24px 18px }
  .dashboard { grid-template-columns:1fr; gap:13px }
  .panel { padding:16px;border-radius:22px }
  .energy-head>.segments { width:100% }
  .tabbar { bottom:0; width:100%;border-radius:20px 20px 0 0;padding-bottom:calc(6px + env(safe-area-inset-bottom)) }
  dialog { margin:auto auto 0;width:100%;border-radius:25px 25px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));max-height:92dvh }
}