/* A nyitolap also grafikonjai. A szinek a meglevo energiagrafikonbol jonnek
   (nap = var(--flow-pv), halozat = var(--flow-grid)), hogy a lap egyetlen rendszernek lassek,
   es a `history-key` jelmagyarazat ugyanezt jelentse feljebb is. */

.energy-visuals {
  display: grid; grid-template-columns: minmax(240px, .8fr) minmax(0, 1.4fr);
  gap: 18px; margin-top: 20px;
}
.viz-card {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 18px; padding: 20px;
  box-shadow: var(--card-shadow, 0 9px 25px #34417a0b); min-width: 0;
}
.viz-card > header { margin-bottom: 16px; }
.viz-card h3 { margin: 0; font-size: 15px; font-family: Inter, system-ui, sans-serif; }
.viz-card header p { margin: 5px 0 0; color: var(--ink-3); font-size: 12px; }
.viz-months { grid-column: 1 / -1; }
.viz-empty { color: var(--ink-3); font-size: 13px; margin: 0; padding: 14px 0; }

/* Gyuru: ket kor, dasharray-jel kettevagva - nincs ivszamitas. */
.viz-balance .viz-body { display: grid; gap: 14px; justify-items: center; }
.donut { width: 100%; max-width: 168px; }
.donut-value {
  text-anchor: middle; font: 700 27px Inter, system-ui, sans-serif; fill: var(--ink);
  letter-spacing: -.04em;
}
.donut-label { text-anchor: middle; font: 600 11px Inter, system-ui, sans-serif; fill: var(--ink-3); }
.viz-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; width: 100%; }
.viz-legend li { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--ink-3); }
.viz-legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.viz-legend i.viz-total { background: color-mix(in srgb,var(--ink-3) 45%,transparent); }
.viz-legend b { font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; }
.viz-legend small { margin-left: auto; }

/* Telephelyenkenti savok: a hossz a meret, a belso osztas az osszetetel. */
.viz-bars { display: grid; gap: 12px; }
.viz-bar-row { display: grid; grid-template-columns: minmax(90px, 24%) 1fr auto; gap: 12px; align-items: center; }
.viz-bar-name {
  font-size: 12.5px; color: var(--ink); font-weight: 650;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* A savok magassaga 26 -> 34 px. Ez a diagram lenyege: a hasab hossza az
   adat, es egy vekony csik mellett a szem a feliratot olvassa, nem a savot
   hasonlitja. Ugyanez a szabaly szolgalja az energiamenedzsment es a
   napelem-halozat lapot is - egy helyen all. */
.viz-bar-track { background: var(--surface-3); border-radius: 8px; height: 34px; overflow: hidden; }
/* Vizszintes sav: a rampa a NULLA fele all, ami itt a bal szel - a halvanyulas
   mindig az ertek tengelye menten fut, csak ennek a savnak az a tengelye
   vizszintes. Rovidebb rampa (12 px), mert egy kis telephely savja maga sem hosszabb
   sokkal - 18 px-en a rovid sav aranyosan tul sokat vesztett. */
.viz-bar { display: flex; height: 100%; border-radius: 8px; overflow: hidden; min-width: 3px; transition: width .3s ease;
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, var(--bar-fade)) 0, #000 12px);
  mask-image: linear-gradient(to right, rgba(0, 0, 0, var(--bar-fade)) 0, #000 12px); }
.viz-bar i { display: block; height: 100%; }
.viz-bar-value {
  text-align: right; font: 650 12.5px Inter, system-ui, sans-serif; color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.viz-bar-value small { display: block; font-weight: 500; color: var(--ink-3); font-size: 11px; }

/* Havi oszlopok: alul halozat, folotte nap - ugyanaz a sorrend, mint a savokban. */
.viz-months .viz-body { overflow-x: auto; }
.viz-month-chart { display: flex; align-items: end; gap: 10px; height: 200px; min-width: 460px; }
.viz-month {
  flex: 1; min-width: 42px; height: 100%;
  display: grid; grid-template-rows: 16px 1fr 18px; justify-items: center; gap: 6px;
}
.viz-month-value { font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.viz-month-bar {
  align-self: end; width: min(58px, 90%); display: flex; flex-direction: column-reverse;
  border-radius: 7px 7px 3px 3px; overflow: hidden; min-height: 3px; background: var(--surface-3);
  transition: height .3s ease;
  /* Padlo-rampa: a sav a nullanal atlatszo, 34 px-en belul telitodik. Fix
     magassag, nem arany - igy egy alacsony honap halvany marad, ami helyes,
     mert keves is. Ugyanaz a szam, mint az SVG-s diagramon. */
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, var(--bar-fade)) 0, #000 34px);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, var(--bar-fade)) 0, #000 34px);
}
.viz-month-bar i { display: block; width: 100%; }
.viz-month small { color: var(--ink-3); font-size: 10.5px; }

/* A ket folyam. Csukva egy sor, nyitva a mai tartalom - a lista maga valtozatlan. */
.dashboard-streams { display: grid; gap: 12px; margin-top: 20px; }
.stream-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 18px; overflow: hidden; }
.stream-card > summary {
  display: flex; align-items: center; gap: 10px; padding: 15px 20px; cursor: pointer;
  list-style: none; font-size: 14px;
}
.stream-card > summary::-webkit-details-marker { display: none; }
.stream-card > summary b { font-size: 14px; color: var(--ink); }
.stream-card > summary small { margin-left: auto; font-size: 12px; color: var(--ink-3); }
.stream-card > summary:hover { background: var(--surface-2); }
.stream-caret { display: inline-block; color: var(--ink-3); transition: transform .15s ease; }
.stream-card[open] .stream-caret { transform: rotate(90deg); }
.stream-card > .stream { padding: 0 20px 18px; }

@media (max-width: 900px) {
  .energy-visuals { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .viz-card { padding: 14px; }
  .viz-bar-row { grid-template-columns: 1fr; gap: 5px; }
  .viz-bar-value { text-align: left; }
  .viz-bar-value small { display: inline; margin-left: 6px; }
}

.energy-dashboard { max-width: 1220px; }
.energy-dashboard-sites { display:grid; gap:16px; }
/* A telephely-kartya csukhato. A csukott fejsor onmagaban is dontesi sav: benne
   all az onellatas, a toltes, a hoszivattyu es a patron allapota - tehat nem
   kell kinyitni ahhoz, hogy lassam, melyiket erdemes. Tobb telephelynel a lap
   igy nem egyetlen hosszu gorgetes. */
.energy-site-card { background:var(--surface); border:1px solid var(--hairline); border-radius:18px; box-shadow:var(--card-shadow,0 9px 25px #34417a0b); overflow:hidden; }
.energy-site-summary { display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:15px 18px; cursor:pointer; list-style:none; }
.energy-site-summary::-webkit-details-marker { display:none; }
.energy-site-summary:hover { background:var(--surface-2); }
.energy-site-summary:focus-visible { outline:2px solid var(--accent,#4f61f3); outline-offset:-2px; }
.site-caret { flex:none; color:var(--ink-3); font-size:15px; line-height:1; transition:transform .15s ease; }
.energy-site-card[open] .site-caret { transform:rotate(90deg); }
.energy-site-card[open] .energy-site-summary { border-bottom:1px solid var(--hairline-2); }
.site-name { display:grid; gap:1px; min-width:170px; }
.site-name small { color:var(--ink-3); font-size:10.5px; font-weight:750; letter-spacing:.08em; }
.site-name b { color:var(--ink); font-size:19px; letter-spacing:-.02em; line-height:1.2; }
.site-name i { font-style:normal; color:var(--ink-3); font-size:12px; }
.site-systems { display:grid; gap:4px; margin-left:auto; }
.site-systems > small { color:var(--ink-3); font-size:9.5px; font-weight:750; letter-spacing:.08em; }
.site-chips { display:flex; flex-wrap:wrap; gap:7px; }
.site-chip { display:grid; gap:1px; padding:6px 10px; border-radius:10px; background:var(--surface-2,var(--ground)); border:1px solid var(--hairline-2); }
.site-chip small { color:var(--ink-3); font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.site-chip b { color:var(--ink); font-size:13.5px; font-weight:650; font-variant-numeric:tabular-nums; }
/* Szin csak ott, ahol allapotot jelent: elo toltes, elo hoszivattyu, hianyzo
   gateway. A "nincs bekotve" es a "—" szandekosan halvany. */
.site-chip.is-self b { color:var(--accent-ink); }
.site-chip.is-pv b { color:var(--flow-pv); }
.site-chip.is-ev-on b { color:var(--ok,var(--ok-ink)); }
.site-chip.is-hp-on b { color:var(--live,#0ba8a4); }
.site-chip.is-ev b,.site-chip.is-hp b,.site-chip.is-patron b { color:var(--ink-3); }
.site-chip.is-warn { background:var(--warn-tint); border-color:transparent; }
.site-chip.is-warn b,.site-chip.is-warn small { color:var(--warn,var(--warn-ink)); }
.site-limit { text-align:right; }
.site-limit small,.energy-site-card h4 { color:var(--ink-3); font-size:11px; font-weight:750; }
.site-limit b { display:block; font-size:19px; color:var(--accent-ink); }
.energy-site-body { padding:2px 18px 18px; }
/* Egy hasab: a karika mellol kikerult a toltohalozat-kartya, tehat nincs mit
   melle tenni - es igy a karika a teljes szelesseget kapja. */
/* A karika merete a KARTYA-TORZS szelessegehez igazodik, nem a kepernyoehez: a
   `vw` nem tud a bal menurol, ezert ~780 es ~1000 px kozott a hub szelesebb
   lett a kartyanal, es a jobb oldali ket gomb szovege levagva vegzodott. A
   `cqw` a torzs sajat szelessegehez mer - ehhez kell a `container-type`.

   A meret AZERT itt all es nem a `.site-hub`-on, mert ket elem hasznalja: a
   karika a negy gombbal es alatta a grafikon. A ketto szelessege egy szam
   (`--hub-w`), tehat nem tud egymastol elcsuszni. */
.energy-site-body{container-type:inline-size;
  --ring:clamp(240px,40vw,430px);
  --depth:clamp(74px,12vw,150px);
  --hub-w:calc(var(--ring) + 2 * var(--depth))}
@supports (width: 1cqw){
  /* A blokk KITOLTI a kartyat. A karikanak van felso merethatara (egy 700px-es
     korong nem olvashatobb, csak nagyobb), a maradek szelesseget viszont nem
     hagyjuk parlagon: a `--depth` felszivja, amit a karika nem kert. Igy a hub
     szelessege mindig a kartya belmerete, es a negy gomb kapja a pluszt - ott
     szoveg van, aminek jol jon a hely.

     A `max(72px, ...)` also korlat: ez alatt a gomb savja mar keskenyebb, mint
     a benne allo szoveg. */
  .energy-site-body{
    --ring:clamp(200px,46cqw,470px);
    --depth:max(72px,calc((100cqw - var(--ring)) / 2 - 8px))}
}
.energy-live{display:flex;justify-content:center;margin:16px 0 8px}
.energy-live > *{min-width:0}
/* A kartya lableceje megszunt: a gateway-allapot az "Epp most" sor vegen ul, az "Aktiv rendszerek" a csukhato fejsorban. */
@media(max-width:800px){.energy-site-summary{gap:10px}.site-systems{margin-left:0}.site-limit{text-align:left;margin-left:auto}}

/* -------------------------------------------------- élő energiaáramlás-kép ---

   Egy SVG, egy koordinátarendszer: a doboz helye és a vezeték végpontja
   ugyanabból a számból készül, ezért nem tud elcsúszni. Balra a termelés és a
   tárolás, jobbra a fogyasztás, középen a CORE.

   A kép mindkét témában működik: sötétben világító vezetékkel, világosban
   telített színnel és fényudvar nélkül - fehér háttéren a neon olvashatatlan.
   Témánként csak néhány változó cserélődik, a szabályok közösek.

   A `vector-effect:non-scaling-stroke` azért kell, mert a rajz a konténer
   szélességéhez skálázódik: enélkül az 1 px-es keret 1,3 px-t rajzolna. */
:root{
  --stage-bg:#eaeef7; --stage-plate:#ffffff; --stage-disc:#ffffff; --stage-edge:.85;
  --stage-ink:#101f36; --stage-muted:#5c6880; --stage-faint:#8b95a8; --stage-track:#dfe5f2;
  --stage-chip:#eef2fa;
  --flow-pv:#b07d00; --flow-grid:#3558d4; --flow-ess:#7245cf; --flow-load:#cc2f60;
  --flow-ev:#0a8f61; --flow-heat:#0b7ead; --flow-patron:#b85a24;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --stage-bg:#131416; --stage-plate:#ffffff08; --stage-disc:#14151a; --stage-edge:.38;
    --stage-ink:#ffffff; --stage-muted:#ffffff8c; --stage-faint:#ffffff59; --stage-track:#ffffff14;
    --stage-chip:#ffffff0f;
    --flow-pv:#f0c25e; --flow-grid:#8ea6ff; --flow-ess:#b48cff; --flow-load:#ff85ab;
    --flow-ev:#43e0a6; --flow-heat:#5cd2ff; --flow-patron:#ff9d63;
  }
}
:root[data-theme="dark"]{
  --stage-bg:#131416; --stage-plate:#ffffff08; --stage-disc:#14151a; --stage-edge:.38;
  --stage-ink:#ffffff; --stage-muted:#ffffff8c; --stage-faint:#ffffff59; --stage-track:#ffffff14;
  --stage-chip:#ffffff0f;
  --flow-pv:#f0c25e; --flow-grid:#8ea6ff; --flow-ess:#b48cff; --flow-load:#ff85ab;
  --flow-ev:#43e0a6; --flow-heat:#5cd2ff; --flow-patron:#ff9d63;
}

/* Hero: kör alakú termelés/fogyasztás-gyűrű, napi visszalapozással, mellette
   a tételek. A gyűrű fix méretű, nem a konténer százaléka: így minden
   (újra)rajzolás - naplapozás, élő frissítés - ugyanilyen nagyra jön ki. */
.hero{display:block;margin:0;padding:0}
/* A napvalaszto a sor JOBB szelen all - ott, ahol korabban a heti szalag volt.
   Az elozo/kovetkezo nyil, a nap es a naptar egy csoport, elottuk az idojaras. */
.hero-nav{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-bottom:10px}
.hero-nav-step{border:1px solid var(--hairline);border-radius:8px;width:26px;height:24px;
  background:var(--surface);color:var(--stage-muted);font-family:inherit;font-weight:600;font-size:14px;cursor:pointer;line-height:1}
.hero-nav-step:hover:not(:disabled){color:var(--stage-ink);border-color:var(--stage-muted)}
.hero-nav-step:disabled{opacity:.35;cursor:default}
.hero-nav-label{color:var(--stage-ink);font-size:13px;font-weight:650;display:flex;align-items:center;gap:6px}
/* Naptar-gomb: ugy nez ki, mint a ket nyil mellette, de a natív datummezo
   LATHATATLANUL fekszik rajta - igy a bongeszo (es mobilon a rendszer) sajat
   naptara nyilik meg, ahelyett hogy egy sajat naptarat rajzolnank ala. */
.hero-nav-cal{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:24px;border:1px solid var(--hairline);border-radius:8px;
  background:var(--surface);color:var(--stage-muted);cursor:pointer;transition:color .15s,border-color .15s}
.hero-nav-cal:hover,.hero-nav-cal:focus-within{color:var(--stage-ink);border-color:var(--stage-muted)}
.hero-nav-cal svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.hero-nav-cal input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;
  opacity:0;cursor:pointer}
/* A natív mezo sajat naptar-ikonja is a teljes felületet fedje: barhova kattintva
   a naptar nyiljon, ne csak egy nehany pixeles ikonon. */
.hero-nav-cal input::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:100%;height:100%;
  margin:0;padding:0;opacity:0;cursor:pointer}
.hero-live-dot{width:6px;height:6px;border-radius:50%;background:var(--live,#0ba8a4);flex:none;
  animation:hero-live-pulse 2s cubic-bezier(.4,0,.3,1) infinite}
@keyframes hero-live-pulse{0%{box-shadow:0 0 0 0 rgba(11,168,164,.45)}70%{box-shadow:0 0 0 6px rgba(11,168,164,0)}100%{box-shadow:0 0 0 0 rgba(11,168,164,0)}}
/* Idojaras-piktogram. Ez az EGYETLEN szines rajz a kartyan, ahol a szin nem egy
   energiacsatornat jelol, hanem magat a dolgot - ezert nem is a `--flow-*`
   tokenekbol jon. Kulon vilagos es sotet ertek: a szurke felho a vilagos lapon
   sotetebb kell legyen, kulonben eltunik a feher hatterben. */
/* Kozvetlenul a napvalaszto ELOTT, nem a sor masik vegen: a ketto egy csoport
   (mikor - es milyen ido van), nem ket kulon sarok. */
.hero-weather{display:flex;align-items:center;margin-right:2px;
  --wx-sun:#f0a500;--wx-moon:#7f8dc9;--wx-cloud:#8494ab;--wx-drop:#2f8fd8;--wx-flake:#5aa9d8;--wx-bolt:#e0a400}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .hero-weather{--wx-sun:#ffc94d;--wx-moon:#cbd8ff;--wx-cloud:#9fb0c9;
    --wx-drop:#5aa9ef;--wx-flake:#bfe4ff;--wx-bolt:#f5c518}
}
:root[data-theme="dark"] .hero-weather{--wx-sun:#ffc94d;--wx-moon:#cbd8ff;--wx-cloud:#9fb0c9;
  --wx-drop:#5aa9ef;--wx-flake:#bfe4ff;--wx-bolt:#f5c518}
.hero-weather svg{width:26px;height:28px;display:block;overflow:visible}
/* A homerseklet a piktogram mellett. Tabularis szamjegyek, hogy a szam
   ne ugraljon, amikor 9-rol 10 fokra valt. */
.hero-weather .wx-temp{margin-left:5px;font:650 14px Inter,system-ui,sans-serif;
  color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.hero-weather .wx-sun{fill:var(--wx-sun);stroke:none}
.hero-weather .wx-ray{stroke:var(--wx-sun);stroke-width:1.8;stroke-linecap:round;fill:none}
.hero-weather .wx-moon{fill:var(--wx-moon);stroke:none}
.hero-weather .wx-cloud{fill:var(--wx-cloud);stroke:none}
.hero-weather .wx-drop{stroke:var(--wx-drop);stroke-width:1.9;stroke-linecap:round;fill:none}
.hero-weather .wx-flake{stroke:var(--wx-flake);stroke-width:1.6;stroke-linecap:round;fill:none}
.hero-weather .wx-fog{stroke:var(--wx-cloud);stroke-width:1.8;stroke-linecap:round;fill:none}
.hero-weather .wx-bolt{stroke:var(--wx-bolt);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}

.hero-body{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;
  transition:opacity .2s ease}
/* Fix meret, nem a kontener szazaleka: lapozaskor ugyanaz a rajz ugyanilyen
   nagy marad. Korabban JS meretezte (`fitDiagrams`) - a friss rajz eloszor
   100%-on jelent meg, es csak a kovetkezo pollra ugrott a helyere. */
.hero-ring{flex:none;display:block;width:min(260px,100%);aspect-ratio:1;font-family:Inter,system-ui,sans-serif}
/* A palya halkabb, hogy a szeletek lebegjenek elotte. Csak a gyurun, es csak
   vilagos temaban: sotetben a `--stage-track` mar eleve 8% feher, azt tovabb
   halkitva eltunne. A tokenhez nem nyulok - azt a hoszivattyu-lap zona-savjai
   is hasznaljak. */
.hero-ring .ring-track{fill:none;stroke:var(--stage-track);opacity:.55}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hero-ring .ring-track{opacity:1}
}
:root[data-theme="dark"] .hero-ring .ring-track{opacity:1}
/* A szelet kitoltott ivszelet, nem vastag vonal: igy a sarok-radiusz szabadon
   megadhato (a JS-ben a szelesseg otode), mig a `stroke-linecap:round` fel
   vonalvastagsagot kerekitett volna. A `fill-rule` a teli kor kivagasahoz kell.
   Halvany kontur a szomszedos szeletek kozott: sotet temaban a ket telitett szin
   erintkezesenel enelkul osszefolyik a hatar. */
.hero-ring .ring-arc{fill:currentColor;fill-rule:evenodd;stroke:none}
/* Az allapotjelzo a karika kozepen, a szazalek FOLOTT. Ez valtotta le a lap
   tetejen allo "● Élő telephelyi adatok" jelvenyt: az mindig ugyanazt mondta,
   ez a gateway valodi allapotat - zold, ha van elo gateway, szurke, ha nincs
   friss adat. Ott all, amire vonatkozik: a szam mellett. */
/* A pont ORÖKLI a szoveg szinet (a tspan nem kap sajat `fill`-t): igy egy
   helyen dol el, mit mond a jelzo - zoldet vagy szurket. */
.hero-status{fill:var(--stage-muted);font-size:11px;font-weight:750;letter-spacing:.09em}
.hero-status .hero-status-dot{font-size:12px}
.hero-status.is-online{fill:var(--ok,var(--ok-ink))}
.hero-pct{fill:var(--stage-ink);font-size:42px;font-weight:700;letter-spacing:-.04em}
.hero-pct-label{fill:var(--stage-muted);font-size:11.5px;font-weight:650;letter-spacing:.04em}

/* A pillanatnyi teljesítmény: a napi mix ALATT, halkabban. Külön sor, mert más
   kérdésre válaszol - és mert százalékként korábban félrevezetett (napos időben
   végig 100% önellátás). Itt kW-ban áll, ahol nem lehet napi adatnak olvasni. */
.hero-live-now{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0 0;
  padding-top:11px;border-top:1px solid var(--hairline-2,var(--hairline))}
.hero-live-now>span{color:var(--stage-faint);font-size:10.5px;font-weight:750;
  letter-spacing:.08em;text-transform:uppercase}
.hero-live-now b{margin-left:6px;color:var(--stage-muted);font-size:13px;font-weight:650;
  font-variant-numeric:tabular-nums}
.hero-live-now small{color:var(--stage-faint);font-size:11px}
.hero-live-now .hero-live-dot{margin-right:2px}
/* A gatewayek allapota a sor VEGEN: `margin-left:auto` tolja oda, hogy a
   kW-ok es a jelzo ne folyjanak ossze. */
.gw-pill{display:inline-flex;align-items:center;gap:6px;margin-left:auto;padding:3px 9px;
  border-radius:999px;font-size:11px;font-weight:650;white-space:nowrap;
  background:var(--surface-2,var(--ground));color:var(--stage-muted)}
.gw-pill i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.gw-pill.is-on{color:var(--ok,var(--ok-ink))}
.gw-pill.is-part{color:var(--warn,var(--warn-ink))}
.gw-pill.is-off{color:var(--bad,var(--bad-ink))}
.hero-live-now .live-none{color:var(--stage-faint)}

/* Lapozás közben a kártya nem ürül ki, csak halkabb lesz. */
.hero.is-loading .hero-body{opacity:.4}

.hero-empty{display:grid;gap:7px;place-content:center;min-height:260px;margin:0;
  border:1px solid var(--hairline);border-radius:15px;background:var(--surface);
  text-align:center;color:var(--ink-3)}
.hero-empty b{color:var(--ink-2);font-size:15px;font-weight:650;letter-spacing:-.02em}
.hero-empty span{max-width:380px;font-size:12.5px;line-height:1.5}

/* --- Fűtés- és patron-kártyák --------------------------------------------

   Ezek a kártyák ma a saját menüpontjuk lapján állnak (Hőszivattyú,
   Fűtőpatron), nem az energia-nyitólapon. A rács maradt: hat zóna rácsban
   olvasható, listában nem, és a csempéknek kell a szélesség - a hőmérséklet
   110 px-en nem szám, hanem dísz.

   A zónarács a középső (legszélesebb) hasábot kapja, mert ott van a legtöbb
   tétel. Szűkülésnél a rács egy hasábra vált, és a zónák maguktól kevesebb
   kolumnára rendeződnek - a csempe minimum 120 px, ez alá nem megy. */
.hems-band{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.hems-band-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.hems-band-head span{color:var(--ink-3);font-size:10.5px;font-weight:750;letter-spacing:.1em;text-transform:uppercase}
.hems-band-head small{color:var(--ink-3);font-size:12px}
.hems-band-head .card-action{margin-left:auto}
/* Meg nem bekotott futes: egy sor, nem egy ures keret. Annyit mond, hogy van
   ilyen es innen indul - tobbet nem. */
.hems-band.is-empty .hems-band-head{padding:11px 14px;border:1px dashed var(--hairline);
  border-radius:13px;background:var(--surface-2,var(--ground))}
/* A hasabok egy magassagban allnak. Eddig `start` volt: minden oszlop a sajat
   tartalmara zsugorodott, ezert a hoszivattyu-lapon a termosztat-kartya
   alacsonyabb volt a HP-kartyanal, es a sor letort. */
.hems-band-cols{display:grid;grid-template-columns:minmax(215px,.85fr) minmax(0,1.5fr) minmax(190px,.8fr);gap:14px;align-items:stretch}
.hems-band-cols>.hems-col{display:flex;flex-direction:column}
/* Kevesebb hasáb esetén ne maradjon üres sáv a helyén. */
.hems-band-cols:has(.hems-col:nth-child(2):last-child){grid-template-columns:minmax(215px,.9fr) minmax(0,1.6fr)}
.hems-band-cols:has(.hems-col:only-child){grid-template-columns:minmax(0,1fr)}
/* Aloldalon: ott a kartya a lap fotartalma, tehat elorebb allo hasabokkal es
   nagyobb legzessel. Ket kartyanal (hoszivattyu + zonak) a zonarács kapja a
   tobbet, egynel (patron) a teljes szelesseget - ezt a fenti `:has` szabalyok
   mar intezik, itt csak a savkent viselkedo felso margo esik ki. */
.hems-band-cols.is-page{margin:0 0 4px}
/* Egyetlen kartya (patron) nem nyulhat el a teljes lapszelessegen: a
   KI/AUTO/KEZI gombsor 1200 px-en abszurd meretu lenne, es a rele-sorokban a
   nev es az ertek koze fel kepernyonyi uresseg kerulne. */
.hems-band-cols.is-page:has(.hems-col:only-child){grid-template-columns:minmax(0,620px)}
@media(max-width:1000px){.hems-band-cols,.hems-band-cols:has(.hems-col:nth-child(2):last-child){grid-template-columns:1fr}}

.hems-col{background:var(--surface);border:1px solid var(--hairline);border-radius:15px;
  padding:14px 15px;box-shadow:0 8px 22px rgba(48,61,122,.04);min-width:0}
.hems-col>header{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:11px}
.hems-col h4{margin:0;color:var(--ink);font-size:13.5px;font-weight:650;letter-spacing:-.01em;white-space:nowrap}
.hems-col .empty{margin:10px 0 0;color:var(--ink-3);font-size:12.5px}
.hems-col .badge{flex:none;padding:3px 9px;border-radius:999px;font-size:10px;font-weight:750;letter-spacing:.04em;white-space:nowrap}
.hems-col .badge.is-on{background:var(--ok-tint);color:var(--ok,var(--ok-ink))}
.hems-col .badge.is-off{background:var(--stage-chip);color:var(--stage-muted)}
.hems-col .badge.is-live{background:var(--live-tint);color:var(--live,#0ba8a4)}
.hems-col .badge.is-manual{background:var(--warn-tint);color:var(--warn,var(--warn-ink))}
.hems-col .badge.is-bad{background:var(--bad-tint);color:var(--bad,var(--bad-ink))}
.hems-count{margin-left:auto;color:var(--ink-3);font-size:11.5px;font-variant-numeric:tabular-nums}

.hems-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hems-tile{padding:9px 10px;border-radius:10px;background:var(--surface-2,var(--ground));border:1px solid var(--hairline-2);min-width:0}
.hems-tile.is-wide{grid-column:1/-1}
.hems-tile small{display:block;color:var(--ink-3);font-size:10.5px}
.hems-tile b{display:block;margin-top:2px;color:var(--ink);font-size:16px;font-weight:650;
  font-variant-numeric:tabular-nums}
.hems-tile b i{font-style:normal;font-size:12px;font-weight:500;color:var(--ink-3)}

/* A diagnosztika nem a napi képernyő kérdése: üzemóra, ventilátor, WiFi, FTC. */
.hems-more{margin-top:10px}
.hems-diag-open{margin-top:10px;border:0;background:transparent;padding:0;font:inherit;font-size:11.5px;color:var(--ink-3);cursor:pointer}
.hems-diag-open:hover{color:var(--ink)}
#hems-diag-dialog{width:min(620px,94vw)}
#hems-diag-dialog .hems-diag-dialog-body{padding:6px 28px 10px}
#hems-diag-dialog .hems-diag{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px 16px}
#hems-diag-dialog .hems-diag span{font-size:12.5px}
.site-page-card{margin-bottom:16px}
.site-page-card>.energy-site-body{padding-top:12px}
.pv-day-nav{margin:0 0 0 auto}
.page-chart>header{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hems-more summary{cursor:pointer;color:var(--ink-3);font-size:11.5px;list-style:none}
.hems-more summary::-webkit-details-marker{display:none}
.hems-more summary:before{content:'▸ '}
.hems-more[open] summary:before{content:'▾ '}
.hems-more summary:focus-visible{outline:2px solid var(--accent,#4f61f3);outline-offset:2px;border-radius:4px}
/* A diagnosztika csoportokra bomlik (szamlalok, hidraulika, hutokor, korok,
   HMV, potfutes, engedelyek, eszkoz) - kulonben a kilencvenmezos blokk egyetlen
   olvashatatlan oszloppa allna ossze. */
/* A kikenyszeritett atkapcsolas sora: a gomb alatt MINDIG ott all, mi hianyzik
   a feltetelbol. Egy "fuggoben" felirat magaban nem informacio. */
.forced-switch{flex:1 1 100%;display:grid;gap:4px;margin-top:8px;padding-top:9px;
  border-top:1px solid var(--hairline-2)}
.forced-switch .card-action{justify-self:start;white-space:nowrap}
.forced-switch small{color:var(--ink-3);font-size:11px;line-height:1.4}
.forced-switch.is-pending small{color:var(--warn,var(--warn-ink))}
.hems-diag-head{margin:12px 0 0;color:var(--ink-3);font-size:9.5px;font-weight:750;
  letter-spacing:.08em;text-transform:uppercase}
.hems-diag-head:first-child{margin-top:8px}
.hems-diag{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:5px 12px;margin-top:5px}
.hems-diag span{display:flex;justify-content:space-between;gap:8px;color:var(--ink-3);
  font-size:11.5px;font-variant-numeric:tabular-nums}
.hems-diag b{color:var(--ink-2);font-weight:650}

.hems-zones{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.hems-zone{padding:10px;border-radius:11px;background:var(--surface-2,var(--ground));
  border:1px solid var(--hairline-2);display:grid;gap:3px;min-width:0}
.hems-zone .zone-head{display:flex;align-items:center;gap:6px;min-width:0}
.hems-zone .zone-head b{color:var(--ink);font-size:12.5px;font-weight:650;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zone-dot{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:none}
.zone-dot.is-stale{background:var(--ink-3,#7b8597)}
.hems-zone .zone-now{color:var(--ink);font-size:21px;font-weight:650;letter-spacing:-.03em;
  line-height:1.1;font-variant-numeric:tabular-nums}
.hems-zone .zone-target{color:var(--ink-3);font-size:11.5px;font-variant-numeric:tabular-nums}
/* Sárga csak akkor, ha VAN mit tenni: még nem áll a célon. A kikapcsolt zóna
   nem hiba, csak nem szól bele - ezért halvány, nem színes. */
.hems-zone.is-adjusting{background:var(--warn-tint);border-color:transparent}
.hems-zone.is-adjusting .zone-now,.hems-zone.is-adjusting .zone-target{color:var(--warn,var(--warn-ink))}
.hems-zone.is-off{opacity:.55}
.hems-why{display:block;margin-top:9px;color:var(--ink-3);font-size:11px;line-height:1.45}
.hems-why b{color:var(--ink-2)}

/* --- HEMS: profilváltó, patron-kártya, beállítás-ablak --------------------

   A viselkedés a kártyán állítható (profil, üzemmód), a leltár az ablakban
   (hitelesítő, IP, relé-lista). A patron relé-soraiban a BE állapot kap színt:
   az a drága állapot, azt kell egy pillantással látni. */
/* Kisgomb a kartyafejlecekben. A szelektor korabban `.side-card header`-hez volt
   kotve; amikor a HEMS atkerult a savba (`.hems-col`), a gomb stilus nelkul
   maradt es bongeszo-alapgombnak latszott. Onallo osztaly, es ugyanazt a nyelvet
   beszeli, mint az elemzes-sav modvalasztoi - egy lapon egy gombforma legyen. */
.card-action{border:1px solid var(--hairline);border-radius:9px;padding:5px 11px;
  background:var(--surface-2,var(--ground));color:var(--ink-3);font-family:inherit;font-weight:600;font-size:12px;cursor:pointer;
  white-space:nowrap}
.card-action:hover{color:var(--ink-2);border-color:var(--ink-3,#7b8597)}
.card-action:focus-visible{outline:2px solid var(--accent,#4f61f3);outline-offset:2px}
.side-card header .card-action,.hems-col>header .card-action{margin-left:auto}

/* A gepi kapcsolok sora. Ugyanaz a gombforma, mint a tobbi kartya-muvelete -
   de az ALLAPOT is rajta van, mert egy "Hutes" feliratu gombrol magabol nem
   derul ki, hogy epp engedi vagy tiltja. A tiltott/kikapcsolt allas kap szint;
   az engedett a semleges alapallapot, hogy a szin a RENDELLENESET jelentse. */
.machine-switches{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  margin:0 0 10px;padding-top:9px;border-top:1px solid var(--hairline-2)}
.machine-switches small{color:var(--ink-3);font-size:11.5px;margin-right:auto}
.machine-switches .card-action{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;
  font-size:11.5px;font-weight:550}
.machine-switches .card-action b{font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--ok)}
.machine-switches .card-action.is-off{border-color:color-mix(in srgb, var(--bad) 40%, transparent);
  background:var(--bad-tint,color-mix(in srgb, var(--bad) 12%, transparent))}
.machine-switches .card-action.is-off b{color:var(--bad)}
.machine-switches .card-action[disabled]{opacity:.55;cursor:progress}

/* A melegviz-cel. Ugyanaz a sorforma, mint a gepi kapcsoloke, de itt ERTEKET
   allitunk: ezert kap kozepen egy nagy, tabularis szamot ket leptetovel, es
   melle harom keszletet (Eco / Kenyelem / Forro).

   Az `is-dirty` a KOZTES allapot: a szam mar a felhasznaloe, de meg nem ment ki
   a gephez. Enelkul egy fuggo ertek ugyanugy nez ki, mint a gep valodi celja -
   es a felhasznalo egy meg nem letezo allapotra alapozna a kovetkezo dontest. */
.tank-target{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:0 0 10px;padding-top:9px;border-top:1px solid var(--hairline-2)}
.tank-target>small{display:flex;flex-direction:column;color:var(--ink-3);font-size:11.5px;
  margin-right:auto}
.tank-target>small i{font-style:normal;font-size:10.5px;color:var(--ink-3);opacity:.8}
.tank-set{display:inline-flex;align-items:center;gap:4px}
.tank-set .card-action{padding:2px 9px;font-size:14px;line-height:1.3;font-weight:600}
.tank-set b{min-width:52px;text-align:center;color:var(--ink);font-size:15px;font-weight:650;
  font-variant-numeric:tabular-nums}
.tank-presets{display:inline-flex;gap:4px;flex-wrap:wrap}
.tank-presets button{padding:3px 9px;border:1px solid var(--hairline);border-radius:999px;
  background:transparent;color:var(--ink-2);font:inherit;font-size:11px;cursor:pointer}
.tank-presets button:hover{border-color:var(--accent)}
.tank-presets button.is-on{border-color:var(--accent);color:var(--accent);
  background:color-mix(in srgb, var(--accent) 10%, transparent)}
.tank-target.is-dirty .tank-set b{color:var(--warn-ink,var(--accent))}
.tank-target.is-dirty>small i{color:var(--warn-ink,var(--accent));opacity:1}

/* A sor tordelhet: a profilvalaszto es a kikenyszerites egymas melle all, ha
   van hely, es egymas ala, ha nincs - a gomb felirata nem vaghat le. */
.profile-switch{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.profile-switch small{color:var(--ink-3);font-size:11.5px}
.profile-buttons{display:flex;gap:4px;margin-left:auto}
.profile-buttons button{border:1px solid var(--hairline);border-radius:8px;padding:4px 12px;
  background:var(--surface-2,var(--ground));color:var(--ink-3);font-family:inherit;font-weight:700;font-size:11px;letter-spacing:.04em;cursor:pointer}
.profile-buttons button:hover{color:var(--ink-2)}
.profile-buttons button.is-on{background:var(--live-tint);border-color:transparent;color:var(--live,#0ba8a4)}


.patron-modes{display:flex;gap:4px;margin-bottom:10px}
.patron-modes button{flex:1;border:1px solid var(--hairline);border-radius:8px;padding:5px 0;
  background:var(--surface-2,var(--ground));color:var(--ink-3);font-family:inherit;font-weight:700;font-size:11px;letter-spacing:.04em;cursor:pointer}
.patron-modes button:hover{color:var(--ink-2)}
.patron-modes button.is-on{background:var(--accent-tint);border-color:transparent;color:var(--accent-ink)}
.patron-relays{display:grid;gap:6px}
.patron-relay{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;
  background:var(--surface-2,var(--ground));font-size:12px}
.patron-relay b{color:var(--ink);font-weight:650}
.patron-relay span{margin-left:auto;color:var(--ink-3);font-variant-numeric:tabular-nums}
.patron-relay.is-on{background:var(--warn-tint)}
.patron-relay.is-on b,.patron-relay.is-on span{color:var(--warn,var(--warn-ink))}
.patron-relay button{border:1px solid var(--hairline);border-radius:7px;padding:3px 9px;
  background:var(--surface);color:var(--ink-2);font-family:inherit;font-weight:700;font-size:10.5px;cursor:pointer}
.patron-relay button:disabled{opacity:.5;cursor:default}
.patron-note{display:block;margin-top:8px;color:var(--ink-3);font-size:11px}

.site-chip.is-patron-on b{color:var(--warn,var(--warn-ink))}

.hems-dialog form{display:flex;flex-direction:column;gap:16px;max-width:620px}
.hems-block{display:flex;flex-direction:column;gap:10px;padding:14px 15px;border:1px solid var(--hairline);
  border-radius:13px;background:var(--surface-2,var(--ground))}
.hems-block h3{margin:0;font-size:14px;font-weight:650;color:var(--ink)}
.hems-block label{display:grid;gap:4px;font-size:11.5px;color:var(--ink-3)}
.hems-block input{border:1px solid var(--hairline);border-radius:8px;padding:7px 9px;
  background:var(--surface);color:var(--ink);font-family:inherit;font-size:13px}
.hems-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hems-relays{display:grid;gap:8px}
.hems-hint{margin:0;color:var(--ink-3);font-size:11.5px;line-height:1.5}
.hems-hint code{font-size:11px;padding:1px 4px;border-radius:4px;background:var(--surface-3);color:var(--ink-2)}
.hems-check{display:flex!important;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-2)}
.hems-check input{width:16px;height:16px;flex:none}
.profile-switch small i{font-style:normal;color:var(--warn,var(--warn-ink))}
.profile-switch.is-read-only .profile-buttons button.is-on{background:var(--surface-3);color:var(--ink-2)}
@media(max-width:600px){.hems-two{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){.hero-live-dot{animation:none}}

/* Színmagyarázat az „Épp most" sorban, a gateway-jelző előtt. A pötty
   ugyanabból a `channel-*` osztályból veszi a színét, mint a szelet - egy szín,
   egy forrás, nincs mit szinkronban tartani. */
.hero-live-now .hero-legend-item{display:inline-flex;align-items:center;gap:5px;
  color:var(--stage-faint);font-size:11px;white-space:nowrap;
  text-transform:none;font-weight:500;letter-spacing:0}
.hero-live-now .hero-legend-item:first-of-type{margin-left:4px}
.hero-legend-item i{width:8px;height:8px;border-radius:2px;background:currentColor;flex:none}
.hero-live-now .channel-pv i{color:var(--flow-pv)}
.hero-live-now .channel-grid i{color:var(--flow-grid)}
.hero-live-now .channel-load i{color:var(--flow-load)}
.hero-live-now .channel-ev i{color:var(--flow-ev)}

/* --- csatornánkénti színek: a gyűrűn, az oszlopon és a kártya pöttyén ugyanaz --- */
.hero-ring .channel-pv{color:var(--flow-pv)}
/* Vekony vizszintes segedvonalak es a kWh-tengely: enelkul az oszlop magassaga
   csak egymashoz kepest mondott valamit, abszolut ertekben semmit. */
/* A racs szine nem a `--hairline` tokenbol jon: az a KARTYAK elvalasztasara
   valo, es sotet temaban (#222941) egy rajzon belul gyakorlatilag lathatatlan.
   Itt a szoveg szinebol keverjuk ki - igy vilagos es sotet lapon is ugyanolyan
   halkan latszik. */
.analytics-chart .chart-grid{stroke:color-mix(in srgb,var(--stage-muted,var(--ink-3)) 26%,transparent);
  stroke-width:1;shape-rendering:crispEdges}
.analytics-chart .chart-axis{fill:var(--stage-muted,var(--ink-3));font-size:10.5px;text-anchor:end;
  font-variant-numeric:tabular-nums}
.analytics-chart .chart-unit{fill:var(--stage-faint,var(--ink-3));font-size:9.5px;font-weight:700;
  letter-spacing:.04em;text-anchor:end}
.analytics-chart .bar-pv{fill:var(--flow-pv)}
.analytics-card.channel-pv{color:var(--flow-pv)}
.history-chart .bar-pv{fill:var(--flow-pv)}
.history-key .key-pv:before{background:var(--flow-pv)}
.hero-ring .channel-grid{color:var(--flow-grid)}
.analytics-chart .bar-grid{fill:var(--flow-grid)}
.analytics-card.channel-grid{color:var(--flow-grid)}
.history-chart .bar-grid{fill:var(--flow-grid)}
.history-key .key-grid:before{background:var(--flow-grid)}
.analytics-card.channel-ess{color:var(--flow-ess)}
.history-chart .bar-ess{fill:var(--flow-ess)}
.history-key .key-ess:before{background:var(--flow-ess)}
.hero-ring .channel-load{color:var(--flow-load)}
.analytics-chart .bar-load{fill:var(--flow-load)}
.analytics-card.channel-load{color:var(--flow-load)}
.hero-ring .channel-ev{color:var(--flow-ev)}
.analytics-chart .bar-ev{fill:var(--flow-ev)}
.analytics-card.channel-ev{color:var(--flow-ev)}
.analytics-card.channel-heat{color:var(--flow-heat)}
.analytics-card.channel-patron{color:var(--flow-patron)}
.history-key .key-none:before{background:var(--ink-3,#7b8597)}
.history-chart .bar-none{fill:var(--ink-3)}
.history-key .key-live:before{background:var(--live,#0ba8a4)}
.history-chart .bar-live{fill:var(--live,#0ba8a4)}

/* ------------------------------------------------------------------ elemzés ---

   A rajz fölötte az ÉPPEN MOST állapota kW-ban; ez itt kWh-ban a megtörtént.
   A `.energy-analytics` alá minden a saját névterében él - a `.history-nav`
   és `.history-key` névre a nyitólap alsó grafikonja (`overview.css`) is
   hallgat, ezért itt mindenütt a szülő szűkíti a hatókört. */
/* Ugyanolyan szeles, mint a karika a negy gombbal: a ketto egy blokk, nem ket
   kulon szeles doboz egymas alatt. */
.energy-analytics{width:min(100%,var(--hub-w,100%));margin-left:auto;margin-right:auto;
  background:var(--surface);border:1px solid var(--hairline);border-radius:15px;
  padding:14px 15px;margin-top:14px;box-shadow:0 8px 22px rgba(48,61,122,.04)}
.energy-analytics h4{margin:2px 0 0;color:var(--ink);font-size:15px;font-weight:650;letter-spacing:-.02em}
.energy-analytics .empty{margin:18px 0;color:var(--ink-3);font-size:12.5px;text-align:center}

.energy-analytics .analytics-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.energy-analytics .analytics-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.energy-analytics .analytics-modes{display:flex;gap:4px}
.energy-analytics .analytics-modes button{border:1px solid var(--hairline);border-radius:9px;padding:6px 13px;
  background:var(--surface-2,var(--ground));color:var(--ink-3);font-family:inherit;font-weight:600;font-size:12.5px;cursor:pointer}
.energy-analytics .analytics-modes button:hover{color:var(--ink-2)}
.energy-analytics .analytics-modes button.is-on{background:var(--accent-tint);border-color:transparent;color:var(--accent-ink)}



.energy-analytics .history-total{margin:14px 0 10px;display:flex;align-items:baseline;gap:8px}
.energy-analytics .history-total b{color:var(--ink);font-size:22px;font-weight:650;letter-spacing:-.04em}
.energy-analytics .history-total span{color:var(--ink-3);font-size:12px}

.history-chart{display:block;width:100%;height:132px}
.history-chart .bar-floor{stroke:var(--hairline,#e3e8f1);stroke-width:1;vector-effect:non-scaling-stroke}
.history-chart .bar-label{fill:var(--ink-3);font-size:8px;text-anchor:middle;font-family:Inter,system-ui,sans-serif}

.energy-analytics .history-key{display:flex;flex-wrap:wrap;gap:4px 12px;margin:10px 0 0;padding:0;list-style:none}
.energy-analytics .history-key li{display:flex;align-items:center;gap:5px;color:var(--ink-3);font-size:11.5px}
.energy-analytics .history-key li:before{content:"";width:8px;height:8px;border-radius:2px;background:currentColor}

.analytics-lead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:16px 0 10px}
.analytics-lead b{color:var(--ink);font-size:34px;font-weight:650;letter-spacing:-.045em}
.analytics-lead span{color:var(--ink-3);font-size:13px}
.analytics-lead em{font-style:normal;font-size:12px;font-weight:650;padding:3px 9px;border-radius:999px}
.analytics-lead .is-down{background:var(--ok-tint);color:var(--ok,var(--ok-ink))}
.analytics-lead .is-up{background:var(--warn-tint);color:var(--warn,var(--warn-ink))}
.analytics-lead .is-solar{background:var(--live-tint);color:var(--live,#0ba8a4)}

.analytics-chart{display:block;width:100%;height:168px}
/* A halvanyulo hasab also atlatszosaga a kozos `--bar-fade` tokenbol jon
   (`theme.css`), tehat a temavaltas es a negy diagram egy helyen all. */
.analytics-chart .fade-low{stop-opacity:var(--bar-fade)}
.analytics-chart .bar-floor{stroke:var(--hairline,#e3e8f1);stroke-width:1;vector-effect:non-scaling-stroke}
.analytics-chart .bar-label{fill:var(--ink-3);font-size:8.5px;text-anchor:middle;font-family:Inter,system-ui,sans-serif}

.analytics-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:10px;margin-top:16px}
.analytics-card{display:flex;align-items:center;gap:10px;padding:11px 13px;
  border:1px solid var(--hairline);border-radius:12px;background:var(--surface-2,var(--ground))}
.analytics-card .card-dot{width:10px;height:10px;border-radius:3px;background:currentColor;flex:none}
.analytics-card div{flex:1;min-width:0}
.analytics-card b{display:block;color:var(--ink);font-size:17px;font-weight:650;letter-spacing:-.03em}
.analytics-card small{display:block;margin-top:1px;color:var(--ink-3);font-size:11.5px}
.analytics-card em{font-style:normal;color:var(--ink-2);font-size:12px;font-weight:650}
.analytics-card.is-planned{opacity:.6;border-style:dashed;background:none}
.analytics-card.is-planned em{color:var(--ink-3);font-size:10.5px;font-weight:500}

.analytics-note{margin:12px 0 0;color:var(--ink-3);font-size:11.5px}

/* Uzemmod-jelzo a hoszivattyu fejlecen. Sajat szin: ez nem allapot-jo/rossz,
   hanem tenyallitas arrol, hogy a gep eppen mit csinal. */
.hems-col .badge.is-mode {
  background: color-mix(in srgb, var(--accent-2, var(--accent)) 18%, transparent);
  color: var(--accent-2, var(--accent-ink));
  border: 1px solid color-mix(in srgb, var(--accent-2, var(--accent)) 35%, transparent);
}

/* A vezerles varakozasa: nem hibajelzes, hanem magyarazat. Ezert nem piros. */
.profile-switch .profile-pending {
  grid-column: 1 / -1;
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink-3);
}

/* A hivo zona: ez tartja jarasban a hoszivattyut. */
.hems-zone .zone-dot.is-calling { background: var(--accent-warm, var(--warn)); box-shadow: 0 0 0 3px
  color-mix(in srgb, var(--accent-warm, #f2b544) 22%, transparent); }
/* ECO modu zona: nem a komfort-celertek szabalyoz, tehat a profil is az ECO
   erteket irja - ezt latni kell, kulonben a szam megmagyarazhatatlan. */
.hems-zone .zone-eco { font-style: normal; font-size: 9.5px; font-weight: 650; letter-spacing: .06em;
  margin-left: 5px; padding: 1px 4px; border-radius: 4px; color: var(--ink-3);
  background: color-mix(in srgb, var(--ink-3, #8b95a8) 16%, transparent); }


/* ===================================================== a telephely-hub ===
   Negy gomb a karika korul: a kulso oldaluk egyenes, a belso eluk a karika iven
   fut. A gomb BELENYUL a karika dobozaba, es egy radialis maszk vagja ki belole
   a kort - a kivagas kore a karika kozepen all, sugara a karika LATSZO kulso ele
   + res. A latszo el nem a doboz szele: a gyuru r=102, vonala 20, tehat a kulso
   ele 112 a 130-as felboxban - ezt tartja a `--ring-edge`. */
.hero-body.is-hub { display: flex; flex-direction: column; align-items: center; gap: 14px; }

.site-hub {
  /* A karika a nyitolap fohangsulya, ezert nagy - de nem fix: `clamp` tartja a
     hasab szelessegen belul. A gombok absztolut pozicioban ulnek, tehat egy
     fix meret egy szuk hasabban kilogott volna. */
  --ring-edge: .862;      /* (102 + 20/2) / 130 - a latszo kulso el aranya */
  /* Fuggolegesen a gomb ALACSONYABB, mint oldalra szeles: a mezo igy nem
     negyzet, hanem fekvo teglalap. Nem eszteticai szeszely - a gombban harom
     sor all (cimke, ertek, alcim), az fuggolegesen keves helyet kiven, mig
     vizszintesen a hosszabb ertekek ("Nincs toltes", "2,41 kW") kellenek a
     helyet. A negyzetes valtozatban a gombok belseje uresen tatongott, es a
     karika lejjebb csuszott a hajtas ala. */
  --depth-y: clamp(22px, 2.4vw, 34px); /* mennyire nyulik a gomb fel/le */
  --gap: 10px;            /* res a karika es a gomb ive kozott */
  --split: 6px;           /* res a negy gomb kozott: negy gomb, nem egy tabla */
  --half: calc(var(--ring) / 2);
  --cut: calc(var(--half) * var(--ring-edge) + var(--gap));
  position: relative;
  width: calc(var(--ring) + 2 * var(--depth));
  height: calc(var(--ring) + 2 * var(--depth-y));
  max-width: 100%;
}

.site-hub .hub-ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: var(--ring); height: var(--ring); }
.site-hub .hub-ring .hero-ring { width: 100%; height: 100%; display: block; }

.site-hub .hub-tile {
  position: absolute; overflow: hidden; padding: 14px 16px;
  width: calc(var(--half) + var(--depth) - var(--split));
  height: calc(var(--half) + var(--depth-y) - var(--split));
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface-2, #1b2030); border: 1px solid var(--line, #262d40);
  color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.site-hub .hub-tile > * { max-width: calc(var(--depth) + 46px); }
.site-hub .hub-tile small { font-family: inherit; font-weight: 650; font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.site-hub .hub-tile b { font-family: inherit; font-weight: 650; font-size: 20px; letter-spacing: -.01em; }
.site-hub .hub-tile i { font-style: normal; font-size: 12px; line-height: 1.35; color: var(--ink-2, #aab4c8); }

/* A gomb csatorna-szine ugyanabbol a tokenkeszletbol jon, mint a karika ivei:
   a "napelem" ugyanaz a sarga a gombon es az iven. Ez koti ossze a ketto - nem
   diszites, hanem az, hogy a gomb arrol a szeletrol beszel. */
.site-hub .hub-tile.channel-pv { --tile-accent: var(--flow-pv); }
.site-hub .hub-tile.channel-ev { --tile-accent: var(--flow-ev); }
.site-hub .hub-tile.channel-heat { --tile-accent: var(--flow-heat); }
.site-hub .hub-tile.channel-patron { --tile-accent: var(--flow-patron); }
/* A piktogram a megnevezes MELLETT all, egy sorban, hatter nelkul: a rajz maga
   a cimke resze. A jobbra zart gomboknal (ne/se) a sor megfordul, hogy a rajz a
   kulso szelhez keruljon - ugyanugy, ahogy a szoveg is oda igazodik. */
.site-hub .hub-head { display: flex; align-items: center; gap: 9px; }
.site-hub .ne .hub-head, .site-hub .se .hub-head { flex-direction: row-reverse; }
.site-hub .hub-icon { flex: none; display: block; color: var(--tile-accent, currentColor); }
.site-hub .hub-icon .ui-icon { width: 26px; height: 26px; stroke-width: 1.7; }

/* Mi erheto el a gomb mogott: harom rovid sor, halkan. A gomb ERTEKE a fo
   uzenet (az mondja meg, hogy all a rendszer most), ez a masodik olvasat -
   ezert kisebb es szurkebb, es csak ravezetesre elenkul. */
.site-hub .hub-tile .hub-services { display: grid; gap: 1px; margin-top: 7px; }
.site-hub .hub-tile .hub-services em { font-style: normal; font-size: 11.5px; line-height: 1.55;
  color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color .15s; }
.site-hub .hub-tile .hub-services em:before { content: '·'; margin-right: 5px; font-weight: 800;
  color: var(--tile-accent, currentColor); }
/* Keskeny hasabban a szolgaltatas-lista ELTUNIK, nem osszemegy. Merve: ~750px
   hasab-szelesseg alatt a sorok vege mar a karika ala fut, es a maszk levagja
   oket - egy felig levagott sor rosszabb, mint a hianya. Ilyenkor a gomb
   visszaall a harom soros formara (piktogram + cimke, ertek, alcim), a
   reszletek pedig ott vannak, ahova a gomb visz. */
@container (max-width: 750px) {
  .site-hub .hub-tile .hub-services { display: none; }
}
/* Tartalek container-query nelkuli bongeszore: ott a `vw`-s geometria fut, es
   ~1030px kepernyo alatt ugyanez a hasab-szelesseg all elo. */
@supports not (width: 1cqw) {
  @media (max-width: 1030px) {
    .site-hub .hub-tile .hub-services { display: none; }
  }
}
.site-hub .ne .hub-services em:before, .site-hub .se .hub-services em:before { content: none; }
.site-hub .ne .hub-services em:after, .site-hub .se .hub-services em:after { content: '·'; margin-left: 5px;
  font-weight: 800; color: var(--tile-accent, currentColor); }

/* A nyil csak ravezetesre jelenik meg, de a helyet nyugalomban is elfoglalja:
   igy a gomb tartalma nem ugrik egyet, amikor rateszed az egeret. */
.site-hub .hub-go { margin-top: 6px; font-size: 13px; font-weight: 700; opacity: 0;
  color: var(--tile-accent, currentColor); transform: translateX(-4px);
  transition: opacity .15s ease, transform .15s ease; }
.site-hub .ne .hub-go, .site-hub .se .hub-go { transform: translateX(4px); }
.site-hub button.hub-tile:hover .hub-go, .site-hub button.hub-tile:focus-visible .hub-go {
  opacity: 1; transform: none; }
.site-hub button.hub-tile:hover .hub-services em { color: var(--ink-2, #aab4c8); }
.site-hub button.hub-tile:hover { background: var(--surface-3, #202638);
  border-color: color-mix(in srgb, var(--tile-accent, #3a4560) 55%, var(--line, #262d40)); }

.site-hub .nw { left: 0; top: 0; border-radius: 16px 0 0 0; align-items: flex-start; justify-content: flex-start;
  mask: radial-gradient(circle var(--cut) at calc(100% + var(--split)) calc(100% + var(--split)), transparent 99%, #000 100%); }
.site-hub .ne { right: 0; top: 0; border-radius: 0 16px 0 0; align-items: flex-end; justify-content: flex-start; text-align: right;
  mask: radial-gradient(circle var(--cut) at calc(0px - var(--split)) calc(100% + var(--split)), transparent 99%, #000 100%); }
.site-hub .sw { left: 0; bottom: 0; border-radius: 0 0 0 16px; align-items: flex-start; justify-content: flex-end;
  mask: radial-gradient(circle var(--cut) at calc(100% + var(--split)) calc(0px - var(--split)), transparent 99%, #000 100%); }
.site-hub .se { right: 0; bottom: 0; border-radius: 0 0 16px 0; align-items: flex-end; justify-content: flex-end; text-align: right;
  mask: radial-gradient(circle var(--cut) at calc(0px - var(--split)) calc(0px - var(--split)), transparent 99%, #000 100%); }

/* Nincs kiepitve: ott van a helye, de nem kattinthato - es megmondja, mi hianyzik. */
.site-hub .hub-tile.is-empty { cursor: default; background: transparent; border-style: dashed; }
.site-hub .hub-tile.is-empty b { color: var(--ink-3); font-size: 13px; font-weight: 600; }
/* Uzemzavar: az eszkoz ott van, csak nem ad adatot. Javitas kell, nem beruhazas. */
.site-hub .hub-tile.is-fault { border-color: color-mix(in srgb, var(--bad) 50%, var(--line, #262d40));
  background: color-mix(in srgb, var(--bad) 8%, var(--surface-2, #1b2030)); }
.site-hub .hub-tile.is-fault b { color: var(--bad, var(--bad-ink)); font-size: 15px; }
/* Nincs elofizetve: a gomb LATSZIK, kiszurkitve. Ami nincs megvasarolva, arrol
   nem hallgatunk - de nem is ugy nez ki, mint egy elo gomb. */
.site-hub .hub-tile.is-locked { cursor: default; opacity: .5;
  background: var(--surface-1, #151926);
  border-style: solid; border-color: var(--line, #262d40); }
.site-hub .hub-tile.is-locked b { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.site-hub .hub-tile.is-locked i { font-size: 10.5px; }

/* Telefonon a sarkos elrendezes megszunik: a karika fole kerul, a negy gomb
   ala, 2x2-ben.

   Nem szepitesi kerdes. A sarkos forma ket dolgot kiven egyszerre: egy olvashato
   meretu karikat es negy olyan savot, ahol elfer harom sor szoveg. Egy ~330px
   szeles hasabban a ketto osszege nem fer ki - a karika ravolt a cimkekre, es a
   maszk levagta oket ("HŐSZIV…", "…ATRON"). Egymas ala teve mindketto egesz
   marad, es a gombok nagyobb celpontok is lesznek ujjra. */
@media (max-width: 720px) {
  .site-hub {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    width: 100%; height: auto;
  }
  /* A karika a racs teljes szelesseget kapja, es elore kerul. */
  .site-hub .hub-ring {
    position: static; transform: none; grid-column: 1 / -1; order: -1;
    width: min(250px, 62vw); height: auto; margin: 2px auto 10px;
  }
  /* A gombokrol lekerul minden, ami a sarkos formahoz kellett: az abszolut
     helyzet, a kor alaku maszk es a sarkonkent kulon lekerekites. */
  .site-hub .hub-tile {
    position: static; width: auto; height: auto; mask: none; -webkit-mask: none;
    border-radius: 14px; padding: 12px 13px;
    align-items: flex-start; justify-content: flex-start; text-align: left;
  }
  .site-hub .hub-tile > * { max-width: 100%; }
  .site-hub .hub-tile b { font-size: 17px; }
  .site-hub .hub-icon .ui-icon { width: 22px; height: 22px; }
  /* A tukrozes is elmarad: minden gomb balra zart, tehat a piktogram mindenutt
     a szoveg elott all. */
  .site-hub .ne .hub-head, .site-hub .se .hub-head { flex-direction: row; }
  .site-hub .ne .hub-go, .site-hub .se .hub-go { transform: translateX(-4px); }
  .site-hub button.hub-tile:hover .hub-go { transform: none; }
}

/* Rovid kiemeles, amikor a hub-gomb a kartya egy szakaszara visz. */
.is-flash { animation: hub-flash 1.2s ease-out; }
@keyframes hub-flash {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent, #5b8def) 55%, transparent); }
  100% { box-shadow: 0 0 0 14px transparent; }
}

/* A gateway-állapot mindig ott van, nem csak bajban.

   Az „online" nem dísz: aki egy üres lapot lát, nem tudja eldönteni, hogy
   nincs mit mutatni, vagy nem jön az adat. A rendben lévő állapot halkabb,
   mint a figyelmeztetés — ott van, de nem versenyez a számokkal. */
.site-chip.is-gw-on b { color: var(--ok, var(--ok-ink)); }

/* A grid keret is kártya, mint a többi.

   Eddig egy csupasz szám állt a csipek mellett: ugyanaz az adatfajta -
   „ez a neve, ez az értéke" -, két különböző formában. A keret marad a sor
   végén, mert az a telephely FELSŐ KORLÁTJA, nem egy rendszer állapota; a
   kerete és a betűi viszont a csipekével egyeznek, csak a szám marad
   nagyobb, mert azt keresi a szem. */
.site-limit {
  display: grid; gap: 1px; padding: 6px 12px; border-radius: 10px;
  background: var(--surface-2, var(--ground)); border: 1px solid var(--hairline-2);
  text-align: right; align-content: center;
}
.site-limit small {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
/* A szam tipografiaja is a csipeke.

   Elobb nagyobbra vettem, mert "azt keresi a szem" - de ettol a doboz ket
   pixellel magasabb lett, es egy sorban allo kartyaknal a ket pixel is
   latszik. A `min-height` nem segit: az also hatart szabja, a nagyobb szam
   viszont kifeszíti. Azonos tipografiaval a dobozok KONSTRUKCIO SZERINT
   egyeznek, nem egy beallitott ertek jovoltabol - a keret pedig az akcentus
   szinevel igy is elkulonul. */
.site-limit b { font-size: 13.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.site-chip, .site-limit { min-height: 48px; align-content: center; }

/* A keret-kártya a CSIPEK sorához igazodjon, ne a blokk közepéhez.

   Az „Aktív rendszerek" felirat a csipek FÖLÖTT áll, tehát az a blokk
   magasabb, mint a keret-kártya. A sor `align-items: center`-rel dolgozik,
   így a keret a magasabb blokk közepére került - egy hajszállal a csipek
   fölé, és pont ez a fél sornyi eltérés az, ami rendezetlennek látszik.

   Alsó élre igazítva a két kártya egy vonalban áll. A felirat pedig jobbra
   zárt: a csipek balról nőnek, a felirat így a keret-kártya mellé kerül,
   és a két jobb szél egy vonalba esik. */
.site-systems > small { text-align: right; }
.site-limit { align-self: end; }