:root{
  color-scheme:light;
  --bg:#f3f2ef;--surface:#fcfcfb;--surface-2:#f0efec;--line:#e2e0db;
  --tx:#0b0b0b;--tx-2:#52514e;--tx-3:#7a7974;
  --accent:#d9661f;--accent-ink:#fff;
  --s-col:#eb6834;--s-a:#2a78d6;--s-b:#1baf7a;--s-x:#7a7974;
  --good:#1f8a4c;--warn:#b7791f;--bad:#c53030;
  --band-pump:rgba(42,120,214,.16);--band-heat:rgba(197,48,48,.16);
  --s-col2:#c48a0c;--s-m1:#8a5cc7;--s-m2:#5f6b78;--s-other:#8f8e86;
  --band-cool:rgba(95,107,120,.22);--band-src:rgba(138,92,199,.2);--band-fault:rgba(197,48,48,.10);
  --pipe:#c9c6bf;--pipe-hot:#eb6834;--pipe-cold:#2a78d6;--warn-bg:#fdf3e1;
  --radius:12px;--shadow:0 1px 2px rgba(0,0,0,.05);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --bg:#121211;--surface:#1a1a19;--surface-2:#242422;--line:#33332f;
  --tx:#ffffff;--tx-2:#c3c2b7;--tx-3:#8f8e86;
  --accent:#e2783a;
  --s-col:#d95926;--s-a:#3987e5;--s-b:#199e70;--s-x:#8f8e86;
  --good:#3fb877;--warn:#e0a842;--bad:#ef6b6b;
  --band-pump:rgba(57,135,229,.22);--band-heat:rgba(239,107,107,.2);
  --s-col2:#e0b040;--s-m1:#a881e0;--s-m2:#9aa5b1;--s-other:#8f8e86;
  --band-cool:rgba(154,165,177,.22);--band-src:rgba(168,129,224,.22);--band-fault:rgba(239,107,107,.14);
  --pipe:#4a4a45;--pipe-hot:#e2783a;--pipe-cold:#3987e5;--warn-bg:#3a2e17;
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#121211;--surface:#1a1a19;--surface-2:#242422;--line:#33332f;
  --tx:#ffffff;--tx-2:#c3c2b7;--tx-3:#8f8e86;
  --accent:#e2783a;
  --s-col:#d95926;--s-a:#3987e5;--s-b:#199e70;--s-x:#8f8e86;
  --good:#3fb877;--warn:#e0a842;--bad:#ef6b6b;
  --band-pump:rgba(57,135,229,.22);--band-heat:rgba(239,107,107,.2);
  --s-col2:#e0b040;--s-m1:#a881e0;--s-m2:#9aa5b1;--s-other:#8f8e86;
  --band-cool:rgba(154,165,177,.22);--band-src:rgba(168,129,224,.22);--band-fault:rgba(239,107,107,.14);
  --pipe:#4a4a45;--pipe-hot:#e2783a;--pipe-cold:#3987e5;--warn-bg:#3a2e17;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--tx);font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--surface);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:8px;font-weight:650;text-decoration:none;letter-spacing:-.01em}
.brand svg{width:24px;height:24px}
.top nav{margin-left:auto;display:flex;gap:4px}
.top nav a{padding:6px 10px;border-radius:8px;text-decoration:none;color:var(--tx-2);font-size:14px}
.top nav a.on,.top nav a:hover{background:var(--surface-2);color:var(--tx)}
main{max-width:980px;margin:0 auto;padding:16px;display:grid;gap:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);min-width:0}
.card h2{margin:0 0 12px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--tx-3)}
.head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.head h1{margin:0;font-size:22px;letter-spacing:-.015em}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--tx-3);flex:none}
.dot.on{background:var(--good)}
.muted{color:var(--tx-2)}.small{font-size:13px}.tiny{font-size:12px;color:var(--tx-3)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.tile{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--surface)}
.tile .k{font-size:12px;color:var(--tx-3);display:flex;align-items:center;gap:6px}
.tile .k i{width:10px;height:3px;border-radius:2px;display:inline-block}
.tile .v{font-size:24px;font-weight:620;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tile .v2{display:flex;flex-direction:column;font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.tile .v2 span{display:flex;justify-content:space-between;gap:8px}
.tile .v2 small{font-weight:400;color:var(--tx-3);font-size:12px}
.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:99px;font-size:12px;font-weight:550;background:var(--surface-2);color:var(--tx-2)}
.badge.good{color:var(--good)}.badge.warn{color:var(--warn)}.badge.bad{color:var(--bad)}.badge.ai{color:var(--accent)}
.state{margin-top:12px;font-weight:550}
.state.bad{color:var(--bad)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.plan-why{font-size:16px;line-height:1.5;margin:0 0 10px}
.kv{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--tx-2)}
.kv b{color:var(--tx);font-weight:600}
.fc{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.fc>div{border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.fc .d{font-size:12px;color:var(--tx-3)}
.fc .e{font-size:20px;font-weight:620;font-variant-numeric:tabular-nums}
.fc .m{font-size:12px;color:var(--tx-2)}
.btns{display:flex;flex-wrap:wrap;gap:8px}
button,.btn{padding:8px 14px;border-radius:9px;border:1px solid var(--line);background:var(--surface);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
button:hover{background:var(--surface-2)}
button.sel,button.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
button.danger{color:var(--bad)}
button:disabled{opacity:.5;cursor:default}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.seg button{border:0;border-radius:0;padding:6px 12px;font-size:13px}
.seg button+button{border-left:1px solid var(--line)}
form.f{display:grid;gap:12px}
fieldset{border:1px solid var(--line);border-radius:10px;margin:0;padding:12px;min-width:0}
legend{padding:0 6px;color:var(--tx-3);font-size:13px}
.fg{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 14px}
label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--tx-2)}
label.cb{flex-direction:row;align-items:center;gap:8px;color:var(--tx)}
input,select,textarea{padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);width:100%;min-width:0}
input[type=checkbox]{width:auto}
.hint{font-size:12px;color:var(--tx-3)}
details>summary{cursor:pointer;font-weight:600;list-style:none;display:flex;align-items:center;gap:8px}
details>summary::-webkit-details-marker{display:none}
details>summary::before{content:"▸";color:var(--tx-3);transition:transform .15s}
details[open]>summary::before{transform:rotate(90deg)}
details[open]>summary{margin-bottom:12px}
.chart-wrap{position:relative}
canvas{display:block;width:100%;height:260px;touch-action:pan-y}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font-size:13px;color:var(--tx-2)}
.legend button{padding:2px 6px;border:0;background:none;color:inherit;font-size:13px;gap:6px}
.legend button.off{opacity:.4}
.legend i{display:inline-block;width:16px;height:0;border-top:2px solid}
.legend i.dash{border-top-style:dashed}
.legend i.band{height:8px;border:0;border-radius:2px}
.tip{position:absolute;pointer-events:none;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:12px;box-shadow:0 4px 14px rgba(0,0,0,.12);white-space:nowrap;display:none;z-index:2}
.tip b{font-weight:600}
.tip .r{display:flex;justify-content:space-between;gap:12px;font-variant-numeric:tabular-nums}
.tip .r i{display:inline-block;width:10px;height:2px;margin-right:6px;vertical-align:middle}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--tx-3);font-weight:550}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
.scroll{overflow-x:auto}
.ev{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;font-size:13px}
.ev .t{color:var(--tx-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.list a.dev{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:10px;text-decoration:none;background:var(--surface)}
.list a.dev:hover{border-color:var(--tx-3)}
.list{display:grid;gap:8px}
.login{max-width:360px;margin:12vh auto 0}
.login h1{font-size:22px;margin:0 0 4px}
.msg{font-size:13px;min-height:1.2em}
.msg.err{color:var(--bad)}.msg.ok{color:var(--good)}
.secret{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;background:var(--surface-2);border-radius:8px;padding:10px;white-space:pre-wrap;word-break:break-all}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--tx);color:var(--bg);padding:10px 16px;border-radius:10px;font-size:14px;z-index:20;opacity:0;transition:opacity .2s;pointer-events:none;max-width:calc(100% - 32px)}
.toast.show{opacity:1}
.flags{margin:8px 0 0;padding-left:18px;font-size:13px;color:var(--warn)}
@media (max-width:560px){main{padding:12px}.top nav a{padding:6px 8px}.fc .e{font-size:17px}.head h1{font-size:19px}}

/* ---- záložky zařízení ---- */
.tabs{display:flex;gap:2px;margin-top:14px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs a{padding:8px 14px;text-decoration:none;color:var(--tx-2);font-size:14px;font-weight:550;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs a.on{color:var(--tx);border-bottom-color:var(--accent)}
.tabs a:hover{color:var(--tx)}
/* ---- schéma (SVG) ---- */
.scheme{width:100%;height:auto;display:block;max-height:440px}
.scheme text{fill:var(--tx);font-family:system-ui,sans-serif}
.scheme .lbl{fill:var(--tx-3);font-size:16px}
.scheme .tv{font-size:28px;font-weight:650;font-variant-numeric:tabular-nums}
.scheme .pipe{fill:none;stroke:var(--pipe);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.scheme .pipe.hot{stroke:var(--pipe-hot)}.scheme .pipe.cold{stroke:var(--pipe-cold)}
.scheme .box{fill:var(--surface-2);stroke:var(--line);stroke-width:2}
.scheme .col{fill:var(--surface-2);stroke:var(--tx-3);stroke-width:2}
.scheme .col line{stroke:var(--tx-3);stroke-width:1.2;opacity:.5}
.scheme .pump circle{fill:var(--surface);stroke:var(--tx-3);stroke-width:3}
.scheme .pump path{fill:var(--tx-3)}
.scheme .pump.on circle{stroke:var(--accent)}.scheme .pump.on path{fill:var(--accent)}
.scheme .pump.on .rot{animation:sv-spin 1.2s linear infinite;transform-box:fill-box;transform-origin:center}
.scheme .valve path{fill:var(--surface);stroke:var(--tx-3);stroke-width:2.5}
.scheme .valve .on{fill:var(--accent);stroke:var(--accent)}
.scheme .heat{stroke:var(--tx-3);stroke-width:3;fill:none}.scheme .heat.on{stroke:var(--bad)}
.scheme .badge-on{fill:var(--accent);font-size:13px;font-weight:650}
@keyframes sv-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.scheme .pump.on .rot{animation:none}}
.status{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin-top:12px;font-size:15px}
.status b{font-weight:600;color:var(--tx-2)}
.status .bad{color:var(--bad)}.status .ok{color:var(--good)}
.tiles.mini .tile .v{font-size:20px}
/* ---- grafy ---- */
.gnav{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
.gnav .title{font-weight:600;min-width:0;flex:1 1 160px}
.seg.small button{padding:5px 10px;font-size:13px}
.legend .band{height:8px;border:0;border-radius:2px}
/* ---- nastavení ---- */
.warnbox{background:var(--warn-bg);color:var(--tx);border-radius:9px;padding:10px 12px;font-size:14px;border-left:4px solid var(--warn)}
.tri{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:6px 0;border-bottom:1px solid var(--line)}
.tri:last-child{border-bottom:0}
.tri>span{font-size:14px}
.stepper{display:flex;align-items:center;gap:6px}
.stepper input{width:80px;text-align:center}
.stepper button{padding:6px 12px}
.wins{display:grid;gap:6px}
.wins .w{display:flex;align-items:center;gap:6px}
.wins .w input{width:auto;flex:0 1 120px}
input:disabled,select:disabled{opacity:.6}
/* ---- programy ---- */
.progs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.prog{border:1px solid var(--line);border-radius:12px;padding:12px;display:grid;gap:8px;background:var(--surface)}
.prog.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.prog h3{margin:0;font-size:15px}
.prog p{margin:0;font-size:13px;color:var(--tx-2)}
@media (max-width:560px){
  .scheme .lbl{font-size:22px}.scheme .tv{font-size:34px}
  .tabs a{padding:8px 9px;font-size:13.5px}
  .status{font-size:14px}
}
.prog .scheme .lbl{font-size:20px}