/* ===== Wspólny wygląd: przyrząd pomiarowy (granat tablicy, kolory przewodów faz) ===== */
:root{
  /* przyrząd pomiarowy: ciemny granat tablicy rozdzielczej, kolory faz jak kolory przewodów */
  --bg:#0d1522; --bg2:#111c2c; --panel:#13202f; --panel2:#172738;
  --line:#22354b; --line2:#2d4560;
  --ink:#e6edf6; --mute:#8395ad; --dim:#5a6c84;
  --l1:#e0894c;   /* brązowy przewód L1 */
  --l2:#dfe7f1;   /* czarny przewód L2 – na ciemnym tle jasny grafit */
  --l3:#86a2c0;   /* szary przewód L3 */
  --n:#4f8dff;    /* niebieski przewód N */
  --gold:#f2b84b; --acc:#f2b84b;
  --ok:#5fd08a; --bad:#ff6b6b; --warn:#f2b84b;
  --fd:"Saira Condensed","Arial Narrow",system-ui,sans-serif;
  --fb:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;
  --cut:14px;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;color:var(--ink);font:15px/1.5 var(--fb);background:
  radial-gradient(1200px 600px at 80% -10%,rgba(79,141,255,.10),transparent 60%),
  radial-gradient(900px 500px at -10% 10%,rgba(224,137,76,.07),transparent 60%),var(--bg);min-height:100vh}
a{color:inherit}
:focus-visible{outline:2px solid var(--n);outline-offset:2px}
.wrap{max-width:1240px;margin:0 auto;padding:22px 18px 48px}
.num{font-family:var(--fd);font-variant-numeric:tabular-nums;letter-spacing:.01em}

/* nagłówek */
header{display:flex;align-items:center;gap:14px 18px;flex-wrap:wrap;margin-bottom:18px}
.brand{display:flex;align-items:center;gap:12px;flex:1 1 auto;min-width:0}
.logo{width:38px;height:38px;flex:none}
h1{font:600 24px/1.1 var(--fd);margin:0;letter-spacing:.02em}
.brand small{display:block;color:var(--mute);font-size:13px;margin-top:2px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border:1px solid var(--line);background:rgba(19,32,47,.7);
  font-size:13px;color:var(--mute);text-decoration:none;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
a.pill:hover,button.pill:hover{color:var(--ink);border-color:var(--line2)}
button.pill{font:500 13px var(--fb);cursor:pointer;line-height:1}
header form{margin:0}
.dot{width:9px;height:9px;border-radius:50%;background:var(--dim);flex:none}
.dot.on{background:var(--ok);box-shadow:0 0 0 0 rgba(95,208,138,.6);animation:ping 1.8s infinite}
.dot.off{background:var(--bad)}
@keyframes ping{to{box-shadow:0 0 0 9px rgba(95,208,138,0)}}

/* panele ze ściętymi narożnikami */
.panel{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 40%),var(--panel);
  border:1px solid var(--line);padding:18px;
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}
.panel::before,.panel::after{content:"";position:absolute;width:calc(var(--cut)*1.42);height:1px;background:var(--line);pointer-events:none}
.panel::before{top:0;right:0;transform-origin:right top;transform:translateY(-.5px) rotate(45deg) translateX(0)}
.panel::after{bottom:0;left:0;transform-origin:left bottom;transform:translateY(.5px) rotate(45deg)}
.lbl{color:var(--mute);font-size:13px;font-weight:500}
.sub{color:var(--mute);font-size:13px}
.grid{display:grid;gap:14px}

/* HERO – oscyloskop */
.hero{position:relative;overflow:hidden;border:1px solid var(--line);background:
  linear-gradient(var(--bg2),var(--bg2)) padding-box;
  clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,26px 100%,0 calc(100% - 26px));
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.9fr);min-height:400px}
.hero .graticule{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(130,165,210,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(130,165,210,.07) 1px,transparent 1px),
    linear-gradient(rgba(130,165,210,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(130,165,210,.035) 1px,transparent 1px);
  background-size:80px 80px,80px 80px,16px 16px,16px 16px;background-position:-1px -1px}
#scope{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,var(--bg2) 0,rgba(17,28,44,.82) 34%,rgba(17,28,44,.15) 62%,rgba(17,28,44,.55) 100%)}
.readout{position:relative;z-index:2;padding:30px 30px 26px;display:flex;flex-direction:column;justify-content:space-between;gap:22px}
.flow{display:flex;align-items:center;gap:10px;color:var(--mute);font-weight:600;font-size:14px}
.flow .arrow{display:inline-block;width:46px;height:2px;background:linear-gradient(90deg,transparent,var(--n));position:relative;overflow:hidden}
.flow .arrow::after{content:"";position:absolute;top:-2px;left:-12px;width:12px;height:6px;border-radius:3px;background:var(--n);box-shadow:0 0 10px var(--n);animation:run 1.4s linear infinite}
.flow.out .arrow{transform:scaleX(-1)}
@keyframes run{to{left:46px}}
.watts{font:700 clamp(76px,11vw,148px)/.86 var(--fd);letter-spacing:-.01em;margin-top:10px;
  background:linear-gradient(180deg,#fff 0,#cbd8e8 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 40px rgba(79,141,255,.18)}
.watts small{font-size:.32em;font-weight:500;color:var(--mute);-webkit-text-fill-color:var(--mute);margin-left:8px;letter-spacing:0}
.cost{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;font-size:15px;color:var(--mute)}
.cost b{color:var(--gold);font:600 22px var(--fd);margin-right:3px}
.split{display:flex;height:6px;gap:3px}
.split i{display:block;height:100%;min-width:3px;transition:flex-grow .8s cubic-bezier(.2,.8,.2,1)}
.splitlbl{display:flex;justify-content:space-between;gap:10px;margin-top:8px;font-size:13px;color:var(--mute)}
.splitlbl span b{font:600 15px var(--fd);color:var(--ink);margin-left:4px}
.heroStats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.heroStats>div{background:rgba(17,28,44,.92);padding:12px 14px}
.heroStats .v{font:600 26px/1.15 var(--fd);margin-top:2px}
.heroStats .v small{font-size:.6em;color:var(--mute);font-weight:500;margin-left:3px}
.phasorBox{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 22px;
  border-left:1px solid var(--line);background:rgba(13,21,34,.55);backdrop-filter:blur(2px)}
#phasor{width:100%;max-width:300px;aspect-ratio:1;overflow:visible}
.phasorBox figcaption{text-align:center;font-size:13px;color:var(--mute);margin-top:8px;max-width:280px}
.legend3{display:flex;gap:14px;justify-content:center;font-size:13px;color:var(--mute);margin-top:6px;flex-wrap:wrap}
.legend3 i{display:inline-block;width:14px;height:3px;border-radius:2px;vertical-align:middle;margin-right:6px}

/* fazy */
.phases{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:14px}
.ph{--c:var(--l1);padding:18px 18px 14px}
.ph .top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ph h2{display:flex;align-items:center;gap:10px;margin:0;font:600 22px var(--fd);letter-spacing:.03em}
.wire{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.35),transparent 45%),var(--c);
  box-shadow:0 0 0 3px rgba(255,255,255,.04),0 0 18px color-mix(in srgb,var(--c) 45%,transparent)}
.ph .pw{font:700 46px/1 var(--fd);margin:14px 0 2px}
.ph .pw small{font-size:.42em;color:var(--mute);font-weight:500;margin-left:4px}
.load{height:4px;background:var(--line);position:relative;margin:10px 0 4px}
.load i{position:absolute;inset:0 auto 0 0;width:0;background:var(--c);box-shadow:0 0 12px var(--c);transition:width .9s cubic-bezier(.2,.8,.2,1)}
.loadlbl{display:flex;justify-content:space-between;font-size:12.5px;color:var(--mute)}
.gauge{display:block;width:100%;max-width:240px;margin:14px auto 0}
.gauge .needle{transition:transform .9s cubic-bezier(.2,.8,.2,1);transform-origin:120px 112px}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;margin-top:6px}
.kv div{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0;border-top:1px solid var(--line);font-size:13.5px;color:var(--mute)}
.kv b{font:600 17px var(--fd);color:var(--ink);font-variant-numeric:tabular-nums}
.err{color:var(--bad);font-size:13px;margin-top:8px}

/* parametry ogólne */
.totals{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:14px}
.stat .v{font:600 32px/1.15 var(--fd);margin-top:4px;font-variant-numeric:tabular-nums}
.stat .v small{font-size:.55em;color:var(--mute);font-weight:500;margin-left:4px}

/* wykresy */
.row2{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:14px;margin-top:14px}
.chead{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:10px;flex-wrap:wrap}
.chead h3{font:600 19px var(--fd);margin:0;letter-spacing:.02em}
.tabs{display:flex;border:1px solid var(--line)}
.tabs button{border:0;background:transparent;color:var(--mute);padding:6px 12px;font:600 13px var(--fb);cursor:pointer}
.tabs button+button{border-left:1px solid var(--line)}
.tabs button.on{background:var(--n);color:#fff}
.chart{position:relative;height:280px}
.stale .watts,.stale .pw,.stale .v{opacity:.45}

/* rozliczenia */
h2.sec{font:600 30px/1.1 var(--fd);margin:0;letter-spacing:.02em}
.secHead{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin:40px 0 14px}
.btn{border:1px solid var(--n);background:var(--n);color:#fff;padding:8px 16px;font:600 14px var(--fb);cursor:pointer;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line2)}
.btn:hover{filter:brightness(1.12)}
.btn:disabled{opacity:.5;cursor:default}
#billCards .panel:first-child{background:linear-gradient(135deg,rgba(242,184,75,.14),transparent 60%),var(--panel);border-color:rgba(242,184,75,.4)}
#billCards .panel:first-child .mid{color:var(--gold)}
.mid{font:700 34px/1.15 var(--fd);margin-top:4px;font-variant-numeric:tabular-nums}
.unit{font-size:.55em;color:var(--mute);font-weight:500;margin-left:4px}
.legend{display:flex;gap:14px;font-size:13px;color:var(--mute)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:12px;height:12px;display:inline-block}
.hatch{background:repeating-linear-gradient(135deg,rgba(242,184,75,.55) 0 3px,transparent 3px 6px);border:1px solid var(--gold)}
.tblwrap{overflow-x:auto;padding:0}
table.bt{width:100%;border-collapse:collapse;font-size:14px;min-width:760px}
table.bt th{font-size:12.5px;color:var(--mute);font-weight:600;text-align:right;padding:13px 14px;border-bottom:1px solid var(--line2);white-space:nowrap}
table.bt th:first-child,table.bt td:first-child{text-align:left}
table.bt td{padding:11px 14px;border-bottom:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.bt tr.p{cursor:pointer;transition:background .2s}
table.bt tr.p:hover td{background:rgba(79,141,255,.06)}
table.bt tr.cur td{background:rgba(242,184,75,.07)}
table.bt tr.cur td:first-child{box-shadow:inset 3px 0 0 var(--gold)}
table.bt tr.fut td{color:var(--mute)}
table.bt tr.fut td.b{color:var(--ink)}
table.bt td.b{font:600 17px var(--fd)}
table.bt tr.det td{background:var(--bg2);padding:14px 16px 18px}
.tag{display:inline-block;font-size:11.5px;font-weight:600;padding:2px 8px;margin-left:8px;vertical-align:1px;border:1px solid}
.tag.closed{color:var(--ok);border-color:rgba(95,208,138,.4)}
.tag.current{color:var(--gold);border-color:rgba(242,184,75,.5)}
.tag.future{color:var(--mute);border-color:var(--line2)}
.comp{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:4px 28px;text-align:left}
.comp div{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:4px 0;border-bottom:1px dashed var(--line)}
.comp div b{font:600 15px var(--fd)}
.comp h4{grid-column:1/-1;margin:10px 0 2px;font:600 15px var(--fd);color:var(--mute);letter-spacing:.03em}
.mbar{display:inline-block;width:60px;height:4px;background:var(--line);vertical-align:middle;margin-right:8px;overflow:hidden}
.mbar i{display:block;height:100%;background:var(--gold)}
.note{color:var(--mute);font-size:13px;margin-top:14px;line-height:1.6;max-width:90ch}

/* historia */
details summary{cursor:pointer;font-weight:600;font-size:14px}
.steps{font-size:14px;color:var(--mute);padding-left:20px}
.steps code{font-size:12.5px;background:var(--bg);padding:1px 6px;color:var(--ink);word-break:break-all}
.imp{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:6px}
.imp input{color:var(--mute);font:14px var(--fb)}
.imp input[type=password]{padding:8px 10px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.bar{height:4px;background:var(--line);overflow:hidden;margin-top:12px}
.bar i{display:block;height:100%;width:0;background:var(--ok);box-shadow:0 0 10px var(--ok);transition:width .3s}

/* logowanie */
.login{max-width:380px;margin:16vh auto;padding:30px}
.login h1{margin:14px 0 4px}
.login input{width:100%;padding:12px;border:1px solid var(--line2);background:var(--bg);color:var(--ink);font:15px var(--fb);margin:18px 0 12px}
.login .btn{width:100%;padding:12px}

/* wejście strony – jedna sekwencja */
@media (prefers-reduced-motion:no-preference){
  .boot .hero{animation:bootIn .9s cubic-bezier(.2,.8,.2,1) both}
  .boot .watts{animation:glowIn 1.4s .2s ease-out both}
  .boot .ph{animation:bootIn .7s cubic-bezier(.2,.8,.2,1) both}
  .boot .ph:nth-child(2){animation-delay:.08s}.boot .ph:nth-child(3){animation-delay:.16s}
}
@keyframes bootIn{from{opacity:0;transform:translateY(10px);filter:blur(4px)}}
@keyframes glowIn{from{text-shadow:0 0 0 transparent;opacity:.2}}
@media (prefers-reduced-motion:reduce){.dot.on,.flow .arrow::after{animation:none}*{transition:none!important}}

@media (max-width:980px){
  .hero{grid-template-columns:1fr}
  .phasorBox{border-left:0;border-top:1px solid var(--line)}
  .hero::after{background:linear-gradient(180deg,rgba(17,28,44,.78),rgba(17,28,44,.45) 60%,rgba(17,28,44,.7))}
  .phases{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr}
  .totals{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .wrap{padding:16px 12px 40px}
  .readout{padding:22px 18px 18px}
  .heroStats{grid-template-columns:1fr 1fr}
  .heroStats>div:last-child{grid-column:1/-1}
  .mid{font-size:28px}
}
@media (max-width:700px){table.bt{min-width:0}table.bt tr>:is(:nth-child(3),:nth-child(4),:nth-child(5),:nth-child(6),:nth-child(8)){display:none}.comp{grid-template-columns:1fr}table.bt .mbar{display:none}table.bt th,table.bt td{padding:10px}.tag{display:block;width:max-content;margin:4px 0 0}}

/* ===== Zakładki sekcji ===== */
.tabsnav{display:flex;gap:2px;margin:-4px 0 18px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabsnav::-webkit-scrollbar{display:none}
.tabsnav a{position:relative;padding:10px 16px 11px;color:var(--mute);text-decoration:none;font:600 15px var(--fd);letter-spacing:.04em;white-space:nowrap;transition:color .2s}
.tabsnav a:hover{color:var(--ink)}
.tabsnav a.on{color:var(--ink)}
.tabsnav a.on::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;background:var(--n);box-shadow:0 0 12px var(--n)}
header form{display:inline}

/* ===== Strony analiz ===== */
.lead{color:var(--mute);font-size:14.5px;max-width:78ch;margin:6px 0 0}
.secblock{margin-top:34px}
.secblock:first-of-type{margin-top:6px}
.sechead{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.span2{grid-column:span 2}
.big2{font:700 52px/1 var(--fd);font-variant-numeric:tabular-nums;margin-top:6px}
.big2 small{font-size:.42em;color:var(--mute);font-weight:500;margin-left:5px}
.gold{color:var(--gold)}
.okc{color:var(--ok)}.badc{color:var(--bad)}
.chip{display:inline-block;font-size:12px;font-weight:600;padding:2px 9px;border:1px solid var(--line2);color:var(--mute)}
.chip.gold{border-color:rgba(242,184,75,.55);color:var(--gold)}
.chip.ok{border-color:rgba(95,208,138,.45);color:var(--ok)}
.chip.bad{border-color:rgba(255,107,107,.5);color:var(--bad)}
.callout{border-left:3px solid var(--gold);background:rgba(242,184,75,.07);padding:12px 14px;font-size:14px;margin-top:14px}
.callout.warn{border-color:var(--bad);background:rgba(255,107,107,.07)}
.empty{color:var(--mute);font-size:14px;padding:18px 0}
.locked{display:flex;gap:12px;align-items:center;color:var(--mute)}

/* taryfy: tarcze zegara */
.tcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.tcard{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:48px 18px 18px}
.tcard h3{font:700 30px/1 var(--fd);margin:0;letter-spacing:.03em}
.tcard .desc{color:var(--mute);font-size:13px;margin-top:4px;min-height:2.6em}
.tcard .dial{width:100%;max-width:230px;margin:10px 0 6px}
.tcard .tcost{font:700 40px/1 var(--fd);font-variant-numeric:tabular-nums;margin-top:6px}
.tcard .tcost small{font-size:.42em;color:var(--mute);font-weight:500;margin-left:4px}
.tcard .delta{margin-top:6px;font-size:13.5px;color:var(--mute)}
.tcard .rates{display:flex;gap:16px;justify-content:center;margin-top:12px;font-size:12.5px;color:var(--mute);flex-wrap:wrap}
.tcard .rates b{display:block;font:600 17px var(--fd);color:var(--ink)}
.tcard.best{border-color:rgba(242,184,75,.6);background:linear-gradient(180deg,rgba(242,184,75,.10),transparent 45%),var(--panel)}
.tcard.best::before{background:rgba(242,184,75,.6)}
.tcard .crown{position:absolute;top:12px;left:14px;font:700 12px var(--fb);color:#1a1405;background:var(--gold);padding:3px 9px;letter-spacing:.02em}
.tcard.cur .crown{background:transparent;color:var(--mute);border:1px solid var(--line2)}
.dial text{font-family:var(--fd)}

/* mapa godzin */
.hm{display:grid;grid-template-columns:34px repeat(24,minmax(0,1fr));gap:3px;font-size:11.5px;color:var(--mute)}
.hm .c{aspect-ratio:1/1;min-height:14px;position:relative;transition:transform .15s}
.hm .c:hover{transform:scale(1.25);z-index:2;outline:1px solid var(--ink)}
.hm .rl{display:flex;align-items:center;font-weight:600}
.hm .hl{text-align:center;font-size:10.5px}
.ramp{height:8px;margin-top:12px;background:linear-gradient(90deg,#16263a,#1e4f8f,#4f8dff,#e0894c,#f2b84b)}
.rampl{display:flex;justify-content:space-between;font-size:12px;color:var(--mute);margin-top:4px}

/* taśma pracy pompy */
.strip{display:grid;grid-template-columns:70px 1fr 120px;gap:10px;align-items:center;margin:6px 0}
.strip .dl{font-size:13px;color:var(--mute)}
.strip .tr{position:relative;height:22px;background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),rgba(130,165,210,.12) calc(25% - 1px) 25%),#0f1a28;border:1px solid var(--line)}
.strip .tr i{position:absolute;top:3px;bottom:3px;background:linear-gradient(180deg,#f0a066,#c8692c);box-shadow:0 0 10px rgba(224,137,76,.55)}
.strip .st{font-size:12.5px;color:var(--mute);text-align:right}
.strip .st b{color:var(--ink);font:600 15px var(--fd)}
.stripaxis{display:grid;grid-template-columns:70px 1fr 120px;gap:10px;font-size:11px;color:var(--dim)}
.stripaxis div:nth-child(2){display:flex;justify-content:space-between}

/* kalendarz pobytów */
.cal{display:grid;grid-template-columns:28px repeat(7,minmax(0,1fr));gap:4px;font-size:11.5px;color:var(--mute)}
.cal .dh{text-align:center;font-weight:600}
.cal .wk{display:flex;align-items:center;font-size:10.5px}
.cal .d{aspect-ratio:1.6/1;display:flex;align-items:flex-end;justify-content:flex-end;padding:3px 5px;font:600 12px var(--fd);color:var(--dim);background:#0f1a28;border:1px solid var(--line)}
.cal .d.p{background:linear-gradient(135deg,rgba(242,184,75,.9),rgba(224,137,76,.75));color:#1a1405;border-color:transparent;box-shadow:0 0 14px rgba(242,184,75,.25)}
.cal .d.a{color:var(--mute)}
.cal .d.x{background:transparent;border-style:dashed;opacity:.5}
.stays{list-style:none;margin:10px 0 0;padding:0}
.stays li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:14px}
.stays li b{font:600 17px var(--fd)}

/* oś zdarzeń */
.tl{list-style:none;margin:0;padding:0}
.tl li{position:relative;display:grid;grid-template-columns:150px 1fr auto;gap:14px;align-items:baseline;padding:11px 0 11px 22px;border-top:1px solid var(--line);font-size:14px}
.tl li::before{content:"";position:absolute;left:2px;top:17px;width:9px;height:9px;border-radius:50%;background:var(--dim)}
.tl li.power::before{background:var(--bad);box-shadow:0 0 10px var(--bad)}
.tl li.internet::before{background:var(--n);box-shadow:0 0 10px var(--n)}
.tl li.volt::before{background:var(--gold)}
.tl .when{color:var(--mute);font-size:13px}
.tl .dur{font:600 16px var(--fd);white-space:nowrap}

/* formularze ustawień */
.form{display:grid;gap:14px}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px}
.field label{display:block;font-size:13px;color:var(--mute);margin-bottom:5px;font-weight:600}
.field input[type=text],.field input[type=email],.field input[type=number],.field input[type=password],.field input[type=url],.field input[type=date],.field input[type=datetime-local],.field select,.emrow select{
  width:100%;padding:10px 12px;border:1px solid var(--line2);background:var(--bg);color:var(--ink);font:14.5px var(--fb)}
.field input:focus,.field select:focus,.emrow select:focus{outline:none;border-color:var(--n);box-shadow:0 0 0 3px rgba(79,141,255,.2)}
.field .hint{font-size:12.5px;color:var(--dim);margin-top:5px}
.switch{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;border-top:1px solid var(--line);font-size:14px}
.switch input{appearance:none;-webkit-appearance:none;width:42px;height:24px;background:var(--line2);position:relative;cursor:pointer;flex:none;border-radius:12px;transition:background .2s}
.switch input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--ink);transition:transform .2s}
.switch input:checked{background:var(--n)}
.switch input:checked::after{transform:translateX(18px)}
.days7{display:flex;gap:6px;flex-wrap:wrap}
.days7 label{display:inline-flex;align-items:center;justify-content:center;min-width:44px;padding:8px 6px;border:1px solid var(--line2);cursor:pointer;font:600 14px var(--fd);color:var(--mute);margin:0}
.days7 input{display:none}
.days7 input:checked+span{color:#1a1405}
.days7 label:has(input:checked){background:var(--gold);border-color:var(--gold);color:#1a1405}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.toast{padding:11px 14px;border:1px solid rgba(95,208,138,.45);background:rgba(95,208,138,.08);color:var(--ink);font-size:14px;margin-bottom:14px}
.toast.err{border-color:rgba(255,107,107,.5);background:rgba(255,107,107,.08)}
code.k{font-size:12.5px;background:var(--bg);padding:2px 6px;color:var(--ink);word-break:break-all}

/* notatki na wykresie */
.notes{list-style:none;margin:10px 0 0;padding:0;font-size:13.5px}
.notes li{display:flex;gap:10px;align-items:baseline;padding:6px 0;border-top:1px solid var(--line)}
.notes li .t{color:var(--gold);font:600 14px var(--fd);white-space:nowrap}
.notes li button{margin-left:auto;background:none;border:0;color:var(--dim);cursor:pointer;font-size:15px}
.noteform{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.noteform input{padding:8px 10px;border:1px solid var(--line2);background:var(--bg);color:var(--ink);font:14px var(--fb)}
.noteform input[type=text]{flex:1 1 220px}

/* próg opłaty mocowej */
.moc{margin-top:14px}
.moc .bar{position:relative;height:14px;background:#0f1a28;border:1px solid var(--line);margin:30px 0 8px;overflow:visible}
.moc .bar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#4f8dff,#f2b84b);box-shadow:0 0 14px rgba(242,184,75,.35);transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.moc .tick{position:absolute;top:-24px;transform:translateX(-50%);font-size:11.5px;color:var(--mute);white-space:nowrap}
.moc .tick::after{content:"";position:absolute;left:50%;top:18px;width:1px;height:26px;background:var(--line2)}
.moc .tick.on{color:var(--gold);font-weight:700}

@media (max-width:980px){.g3,.tcards{grid-template-columns:1fr}.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g2{grid-template-columns:1fr}.span2{grid-column:auto}.fgrid{grid-template-columns:1fr}}
@media (max-width:560px){.tabsnav{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}.big2{font-size:42px}.hm{gap:2px;grid-template-columns:26px repeat(24,minmax(0,1fr))}.hm .hl:nth-child(odd){visibility:hidden}
  .strip,.stripaxis{grid-template-columns:52px 1fr}.strip .st{grid-column:2;text-align:left}.stripaxis div:last-child{display:none}
  .tl li{grid-template-columns:1fr auto}.tl .when{grid-column:1/-1}.g4{grid-template-columns:1fr 1fr}}

/* raport do druku */
@media print{
  :root{--bg:#fff;--panel:#fff;--panel2:#fff;--line:#d9dee5;--line2:#c6ced8;--ink:#111;--mute:#555;--dim:#777}
  body{background:#fff!important}
  .tabsnav,header .pill,header form,.noprint{display:none!important}
  .panel{clip-path:none;box-shadow:none;break-inside:avoid}
}
.ph3{font:600 19px var(--fd);margin:0 0 12px;letter-spacing:.02em}

/* ===== doradca pompy ciepła ===== */
.advsum{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap}
.advsave{display:flex;flex-direction:column;align-items:flex-end;line-height:1}
.advsave span{font-size:12px;color:var(--mute);margin-bottom:4px}
.advsave b{font:600 38px/1 var(--fd);color:var(--gold);text-shadow:0 0 24px rgba(242,184,75,.35)}
.advsave small{font-size:15px;color:var(--mute);font-family:var(--fb);font-weight:500}
.advcnt{display:flex;gap:6px;flex-wrap:wrap}
.advcnt span{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 9px;border:1px solid var(--line2);color:var(--mute)}
.advcnt i{width:7px;height:7px;border-radius:50%;background:var(--c)}
.lv-ok{--c:var(--ok)} .lv-info{--c:var(--n)} .lv-warn{--c:var(--gold)} .lv-bad{--c:var(--bad)}
.advgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.adv{position:relative;padding:16px 18px 14px 20px;background:linear-gradient(105deg,color-mix(in srgb,var(--c) 9%,transparent),transparent 45%),var(--panel);
  border:1px solid var(--line);clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%);display:flex;flex-direction:column;gap:8px}
.adv::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c);box-shadow:0 0 14px var(--c)}
.adv.lv-ok{opacity:.88}
.advh{display:flex;align-items:center;gap:10px}
.advh svg{width:26px;height:26px;flex:none;fill:none;stroke:var(--c);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.advh svg circle{stroke-opacity:.45}
.advh h3{margin:0;font:600 19px/1.15 var(--fd);letter-spacing:.02em;flex:1}
.adv p{margin:0;font-size:14px;color:#c8d3e1}
.advstep{font-size:14px;padding:9px 12px;background:rgba(255,255,255,.03);border:1px dashed var(--line2)}
.advstep b{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--c);margin-bottom:2px}
.advsrc{font-size:12px;color:var(--dim);margin-top:auto}
@media (prefers-reduced-motion:no-preference){.adv{animation:bootIn .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0ms)}
  .adv.lv-bad::before{animation:advPulse 1.6s ease-in-out infinite}}
@keyframes advPulse{50%{box-shadow:0 0 2px var(--c);opacity:.55}}
.sgrp+.sgrp{margin-top:14px}
.stiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin-top:6px}
.stile{padding:8px 10px;border:1px solid var(--line);background:var(--panel2);display:flex;flex-direction:column;gap:2px;min-width:0}
.stile span{font-size:12px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stile b{font:600 22px/1.1 var(--fd)}
.stile small{font-size:12px;color:var(--mute);margin-left:2px;font-family:var(--fb)}
.stile.old{opacity:.45}
.sensempty{margin-top:14px}
.flowsteps{display:flex;align-items:center;gap:10px;margin:14px 0;flex-wrap:wrap}
.flowsteps div{flex:1 1 140px;padding:10px 12px;border:1px solid var(--line2);font-size:13px;color:var(--mute);background:var(--panel2)}
.flowsteps b{display:inline-grid;place-items:center;width:22px;height:22px;margin-right:8px;background:var(--gold);color:#111;font:700 13px var(--fd);float:left}
.flowsteps i{width:26px;height:2px;background:linear-gradient(90deg,var(--gold),transparent);flex:none}
@media (max-width:980px){.advgrid{grid-template-columns:1fr}.advsave{align-items:flex-start}}
@media (max-width:560px){.flowsteps i{display:none}.advsave b{font-size:32px}}
.lv-wait{--c:var(--dim)}
.adv.lv-wait{opacity:.8}
.advprog{height:6px;background:var(--panel2);border:1px solid var(--line);overflow:hidden}
.advprog i{display:block;height:100%;background:linear-gradient(90deg,var(--n),var(--gold))}
.emtab{margin-top:10px;border:1px solid var(--line)}
.emrow{display:grid;grid-template-columns:minmax(0,1.4fr) 110px minmax(0,1.2fr);gap:10px;align-items:center;padding:7px 10px;border-top:1px solid var(--line)}
.emrow:first-child{border-top:0}
.emrow.emh{font-size:12px;color:var(--mute);background:var(--panel2)}
.emrow b{font:600 18px var(--fd)}.emrow small{font-size:12px;color:var(--mute);font-family:var(--fb)}
.emrow select{width:100%}
@media (max-width:560px){.emrow{grid-template-columns:1fr auto}.emrow select{grid-column:1/-1}}

/* ===== rekuperator ===== */
.pill.ok .dot{background:var(--ok);box-shadow:0 0 10px var(--ok)}
.pill.bad .dot{background:var(--bad)}
.ruHero{margin-top:14px}
#ru{width:100%;height:auto;display:block;margin-top:6px}
.ruZone{font:600 13px var(--fb);letter-spacing:.16em;fill:var(--dim)}
.ruBox{fill:rgba(255,255,255,.015);stroke:var(--line2);stroke-width:1.5;stroke-dasharray:3 5}
.ruDuct{fill:none;stroke:var(--panel2);stroke-width:30;stroke-linejoin:round}
.ruFlow{fill:none;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:2 22;animation:ruMove 3s linear infinite}
/* realistyczniejszy przepływ: smugi (rozmyte, wolniej się zmieniające), strumień i drobinki o tej samej prędkości powietrza */
.ruAir{--dur:3s}
.ruAir .ruFlow{animation:ruMove var(--dur) linear infinite;opacity:.9}
.ruStreak{fill:none;stroke-width:12;stroke-linecap:round;stroke-dasharray:34 62;opacity:.5;filter:url(#fBlur);animation:ruMove96 calc(var(--dur) * 1.2) linear infinite}
.ruMote{fill:none;stroke:rgba(255,255,255,.75);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:.5 37.5;animation:ruMove38 calc(var(--dur) * .83) linear infinite}
.ruAir.stop .ruFlow,.ruAir.stop .ruStreak,.ruAir.stop .ruMote{animation-play-state:paused}
@keyframes ruMove96{to{stroke-dashoffset:-288}}
@keyframes ruMove38{to{stroke-dashoffset:-228}}
.ruDuctHi{fill:none;stroke:rgba(255,255,255,.045);stroke-width:12;stroke-linejoin:round}
.ruDuct{filter:drop-shadow(0 6px 8px rgba(0,0,0,.35))}
@keyframes ruMove{to{stroke-dashoffset:-240}}
.ruBypass{fill:none;stroke:var(--line2);stroke-width:4;stroke-dasharray:6 6;transition:stroke .4s}
.ruBypass.on{stroke:var(--gold);stroke-dasharray:2 14;animation:ruMove 2.5s linear infinite;filter:drop-shadow(0 0 6px var(--gold))}
#ru.bypass #ruTop{opacity:.25!important}
.ruHx{fill:var(--bg2);stroke:var(--l3);stroke-width:2}
.ruFanC{fill:var(--bg2);stroke:var(--line2);stroke-width:1.5}
.ruFan{fill:var(--l2);transform-box:fill-box;transform-origin:center;animation:ruSpin 1s linear infinite}
.ruFan.stop{animation:none;opacity:.4}
@keyframes ruSpin{to{transform:rotate(360deg)}}
.ruLbl text{font:500 17px var(--fb);fill:var(--mute)}
.ruLbl .ruT{font:600 54px var(--fd);fill:var(--ink)}
.ruSmall{font:500 15px var(--fb);fill:var(--mute)}
.ruEff{font:700 46px var(--fd);fill:var(--ok);filter:drop-shadow(0 0 10px rgba(95,208,138,.35))}
@media (prefers-reduced-motion:reduce){.ruFlow,.ruFan,.ruBypass.on,.ruStreak,.ruMote{animation:none}}
.ruOpts{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.ruOpt{position:relative;padding:16px 18px;background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;gap:8px;
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%)}
.ruOptH{display:flex;align-items:center;gap:10px}
.ruOptH svg{width:30px;height:30px;flex:none;fill:none;stroke:var(--gold);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;padding:5px;border:1px solid var(--line2);background:var(--panel2)}
.ruOptH h3{margin:0;font:600 19px var(--fd);flex:1}
.ruSt{font-size:12px;font-weight:700;padding:3px 9px;border:1px solid var(--line2);color:var(--mute);white-space:nowrap}
.ruSt.on{color:#111;background:var(--gold);border-color:var(--gold);box-shadow:0 0 14px rgba(242,184,75,.4)}
.ruOpt p{margin:0;font-size:14px;color:#c8d3e1}
.ruOpt .ruTip{font-size:13px;color:var(--mute);border-left:2px solid var(--line2);padding-left:10px}
@media (prefers-reduced-motion:no-preference){.ruOpt{animation:bootIn .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0ms)}}
@media (max-width:560px){.ruLbl .ruT{font-size:64px}.ruLbl text{font-size:22px}.ruEff{font-size:56px}.ruSmall{font-size:19px}.ruZone{font-size:17px}}

/* ===== prognoza pompy ===== */
.fcStrip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(78px,1fr);gap:8px;overflow-x:auto;margin-top:14px;padding-bottom:6px;scrollbar-width:thin}
.fcDay{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 6px 9px;background:var(--panel);border:1px solid var(--line);min-width:0}
.fcDay.now{border-color:var(--gold);box-shadow:inset 0 0 0 1px rgba(242,184,75,.35)}
.fcDay.far{opacity:.62}
.fcDn{font:600 15px var(--fd);letter-spacing:.04em;text-transform:uppercase}
.fcDt{font-size:11px;color:var(--dim)}
.fcDay svg{width:30px;height:30px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin:2px 0}
.fcT{display:flex;gap:6px;align-items:baseline;font:600 16px var(--fd)}.fcT i{font-style:normal;font-size:13px;opacity:.85}
.fcBar{width:16px;height:54px;background:var(--panel2);border:1px solid var(--line);display:flex;align-items:flex-end;margin:4px 0}
.fcBar i{display:block;width:100%;transition:height .8s cubic-bezier(.2,.7,.2,1)}
.fcK{font:600 17px var(--fd)}.fcK small{font-size:11px;color:var(--mute);font-family:var(--fb)}
.fcZ{font-size:12px;color:var(--gold)}
.fcHome{position:absolute;top:6px;right:7px;font-size:9px;color:var(--ok)}
@media (prefers-reduced-motion:no-preference){.fcDay{animation:bootIn .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0ms)}}
#fcNotes .advh svg{stroke:var(--c)}
.btn.sm{padding:4px 10px;font-size:13px;min-height:0}
.invt td small{font-size:12px}
.meterbox{display:flex;flex-wrap:wrap;gap:18px;align-items:baseline}

/* ===== straty ciepła domu ===== */
.hsHero{padding:18px 20px 26px}
.hsTop{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.hsBig{font:700 56px/1 var(--fd);color:var(--ink);text-shadow:0 0 26px rgba(122,184,255,.25)}
.hsBig small{font:500 16px var(--fb);color:var(--mute)}
.hsCls{display:flex;flex-direction:column;align-items:flex-end;gap:2px;padding:8px 14px;border:1px solid var(--line2);background:var(--panel2)}
.hsCls span{font:600 22px var(--fd)}.hsCls b{font-size:13px;color:var(--mute);font-weight:600}
.hsScale{position:relative;display:flex;height:14px;margin-top:22px;gap:2px}
.hsScale i{position:relative;display:block}
.hsScale i span{position:absolute;top:18px;left:4px;font-size:11px;color:var(--dim);white-space:nowrap;font-style:normal}
.cl-very{--k:#5fd08a}.cl-eco{--k:#9ad06a}.cl-good{--k:#d6c95a}.cl-mid{--k:#f2a54b}.cl-poor{--k:#ff6b6b}
.hsScale i{background:var(--k);opacity:.75}
.hsCls.cl-very span,.hsCls.cl-eco span,.hsCls.cl-good span,.hsCls.cl-mid span,.hsCls.cl-poor span{color:var(--k)}
.hsMark{position:absolute;top:-7px;width:4px;height:28px;margin-left:-2px;background:var(--ink);box-shadow:0 0 0 3px var(--bg),0 0 14px rgba(255,255,255,.6)}
.hsTicks{position:relative;height:14px;margin-top:22px;font-size:11px;color:var(--dim)}
.hsTicks span{position:absolute;transform:translateX(-50%)}.hsTicks span:first-child{transform:none}.hsTicks span:last-child{transform:translateX(-100%);white-space:nowrap}
@media (max-width:700px){.hsScale i span{display:none}.hsCls{align-items:flex-start}.hsBig{font-size:46px}}

/* ===== co zjada prąd ===== */
.nmGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.nmCard{padding:14px 16px;background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;gap:9px;
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%)}
@media (prefers-reduced-motion:no-preference){.nmCard{animation:bootIn .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0ms)}}
.nmHead{display:flex;gap:10px;align-items:center}
.nmName{flex:1;min-width:0;background:transparent;border:0;border-bottom:1px dashed var(--line2);color:var(--ink);font:600 18px var(--fd);padding:3px 0;outline:none}
.nmName::placeholder{color:var(--mute);font-weight:500}
.nmName:focus{border-bottom-color:var(--gold)}.nmName.saving{opacity:.6}.nmName.saved{border-bottom-color:var(--ok)}
.nmCost{font:700 26px var(--fd);color:var(--gold);white-space:nowrap}.nmCost small{font:500 12px var(--fb);color:var(--mute)}
.nmBar{height:4px;background:var(--panel2)}.nmBar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--l1))}
.nmChips{display:flex;flex-wrap:wrap;gap:5px}
.nmChips span{font-size:12px;padding:2px 8px;border:1px solid var(--line2);color:var(--mute)}
.nmChips span:first-child{color:var(--ink);border-color:var(--l2)}
.nmHours{display:grid;grid-template-columns:repeat(24,1fr);gap:2px;height:16px}
.nmHours i{background:var(--gold);display:block}
.nmAxis{display:flex;justify-content:space-between;font-size:10px;color:var(--dim);margin-top:-5px}
.field input[type=date]{color-scheme:dark}
.meterp{margin-top:14px}
@media (max-width:700px){table.bt.invt tr>*{display:table-cell!important}table.bt.invt{min-width:640px}}
.secblock,.secblock>.panel{min-width:0;max-width:100%}

/* ===== pokoje ===== */
.rmGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.rmCard{position:relative;padding:14px 16px 14px 19px;background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;gap:8px;
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%)}
.rmCard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c);box-shadow:0 0 12px var(--c)}
@media (prefers-reduced-motion:no-preference){.rmCard{animation:bootIn .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0ms)}}
.rmCard h3{margin:0;font:600 19px var(--fd);letter-spacing:.02em}
.rmNow{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.rmT{font:700 44px/1 var(--fd)}.rmH{font:600 28px/1 var(--fd);color:var(--n)}
.rmNow small{font:500 14px var(--fb);color:var(--mute);margin-left:2px}
.rmT.cold{color:#7ab8ff}.rmT.hot{color:var(--bad)}.rmH.dry{color:var(--gold)}.rmH.wet{color:var(--bad)}
.rmGauge{position:relative;height:6px;background:var(--panel2);border:1px solid var(--line)}
.rmGauge b{position:absolute;top:0;bottom:0;background:rgba(95,208,138,.35)}
.rmGauge i{position:absolute;top:-4px;width:3px;height:12px;margin-left:-1px;background:var(--n);box-shadow:0 0 8px var(--n)}
.rmMeta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--mute)}
.rmWeek{font-size:12px;color:var(--dim)}
.emrow small.k{font-size:11px;color:var(--dim)}

/* ===== czujniki zalania ===== */
.leakbar{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;margin-top:14px;padding:10px;border:1px solid var(--line);background:var(--panel)}
.lkHead{display:flex;align-items:center;gap:8px;flex:1 1 220px;min-width:0}
.lkHead svg{width:26px;height:26px;fill:none;stroke:var(--n);stroke-width:1.8;flex:none}
.lkHead b{font:600 17px var(--fd);letter-spacing:.03em}.lkHead span{font-size:12px;color:var(--mute)}
.lk{display:flex;flex-direction:column;gap:1px;padding:6px 12px;border:1px solid var(--line2);background:var(--panel2);min-width:110px}
.lkN{font-size:12px;color:var(--mute)}.lk b{font:600 18px var(--fd)}.lk small{font-size:11px;color:var(--dim)}
.lk.dry b{color:var(--ok)}.lk.old{opacity:.55}.lk.wet{border-color:var(--bad);background:rgba(255,107,107,.15)}.lk.wet b{color:var(--bad)}
.leakbar.alarm{border-color:var(--bad);box-shadow:0 0 0 1px var(--bad),0 0 30px rgba(255,107,107,.35)}
.leakbar.alarm .lkHead svg{stroke:var(--bad)}.leakbar.alarm .lkHead b{color:var(--bad)}
@media (prefers-reduced-motion:no-preference){.leakbar.alarm{animation:lkPulse 1.2s ease-in-out infinite}}
@keyframes lkPulse{50%{box-shadow:0 0 0 1px var(--bad),0 0 6px rgba(255,107,107,.2)}}
@media (max-width:560px){.lk{flex:1 1 30%;min-width:0;padding:6px 8px}}

/* ===== przygotuj się na rachunek ===== */
.dueBox{margin-bottom:14px;border-color:rgba(242,184,75,.45);background:linear-gradient(120deg,rgba(242,184,75,.10),transparent 55%),var(--panel)}
.dueTop{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:flex-end}
.dueBig{font:700 52px/1 var(--fd);color:var(--gold);text-shadow:0 0 28px rgba(242,184,75,.3);margin:4px 0}
.dueBig small{font:500 16px var(--fb);color:var(--mute)}
.dueSide{text-align:right}
.dueList{list-style:none;margin:14px 0 8px;padding:0;border-top:1px solid var(--line)}
.dueList li{display:grid;grid-template-columns:1fr auto auto;gap:14px;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px;align-items:center}
.dueList li span:nth-child(2){color:var(--mute);font-size:13px}
.dueList li b{font:600 17px var(--fd);min-width:90px;text-align:right}
.dueList li.cur{color:var(--mute)}
@media (max-width:560px){.dueBig{font-size:40px}.dueSide{text-align:left}.dueList li{grid-template-columns:1fr auto}.dueList li span:nth-child(2){display:none}}
.field input[type=datetime-local]{color-scheme:dark}

/* strażnik domu */
.safebar{margin-top:14px;padding:12px;border:1px solid var(--line);background:var(--panel);display:grid;gap:10px}
.sfHead{display:flex;align-items:center;gap:10px;min-width:0}.sfHead>div{min-width:0;display:grid}
.sfHead svg{width:28px;height:28px;fill:none;stroke:var(--ok,#4cc38a);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sfHead b{font:600 17px var(--fd);letter-spacing:.03em}.sfHead span{font-size:12px;color:var(--mute)}
.sfList{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px}
.sf{display:grid;grid-template-columns:10px 1fr;column-gap:8px;align-items:center;padding:6px 8px;border:1px solid var(--line);min-width:0}
.sf i{width:8px;height:8px;border-radius:50%;background:var(--ok,#4cc38a);grid-row:span 2}
.sf span{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sf small{font-size:11px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sf.warn i{background:var(--gold,#f5b942)}.sf.bad i{background:var(--bad)}.sf.na i{background:var(--dim)}.sf.na{opacity:.6}
.sf.bad{border-color:var(--bad)}.sf.bad small{color:var(--bad)}
.safebar.bad{border-color:var(--bad);box-shadow:0 0 0 1px var(--bad)}.safebar.bad .sfHead svg{stroke:var(--bad)}.safebar.bad .sfHead b{color:var(--bad)}
.safebar.warn .sfHead svg{stroke:var(--gold,#f5b942)}

.leakbar.blind{border-color:var(--warn)}.leakbar.blind .lkHead svg{stroke:var(--warn)}
.dstn{color:var(--dim);font-size:11px}
.hsBand{position:absolute;top:-3px;bottom:-3px;border:2px solid var(--txt,#e8eef7);border-radius:3px;background:rgba(255,255,255,.12);pointer-events:none}
/* telefon: elementy siatek nie mogą rozpychać strony (długie nazwy encji w listach, duże liczby w kafelkach) */
.g4>*,.g3>*,.g2>*,.form>*,.panel{min-width:0}
select,input,textarea{max-width:100%}
@media (max-width:420px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.emrow[hidden]{display:none!important}

/* temperatura na zewnątrz na górze strony Na żywo */
.outbar{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin:4px 0 14px;padding:10px 14px;border:1px solid var(--line);background:var(--panel)}
.outbar svg{width:24px;height:24px;fill:none;stroke:var(--n);stroke-width:1.8;stroke-linecap:round;flex:none}
.outbar .lbl{font-size:13px;color:var(--mute)}
.outbar b{font:600 26px var(--fd);line-height:1}.outbar b small{font-size:14px;color:var(--mute)}
.outbar .sub{font-size:12px;color:var(--dim);flex:1 1 220px;min-width:0}
.outbar.frost b{color:var(--n)}

/* zdjęcie centrali na schemacie rekuperatora */
.ruPhoto{filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
.ruShadow{fill:rgba(0,0,0,.35);filter:blur(6px)}
#ru .ruBypass{opacity:.45}
#ru.bypass .ruBypass{opacity:1}
#ru .ruBypass{opacity:0;transition:opacity .4s}
#ru.bypass .ruBypass{opacity:1}
@media (max-width:560px){#ru .ruLbl .ruT{font-size:56px}#ru .ruLbl text{font-size:20px}}

/* zakładki działów na stronie Analizy */
.subtabs{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px;position:sticky;top:0;z-index:5;padding:8px 0;background:var(--bg)}
.subtabs button{flex:0 0 auto}
.secblock.grpOff{display:none!important}
.secblock.grpFirst{margin-top:10px}
@media (max-width:560px){.subtabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.subtabs::-webkit-scrollbar{display:none}}