/* Welín 2 — základní vzhled.
   Převzato z odsouhlaseného návrhu WELIN_NAVRH_v7_20260918.html (směr A „Živý dům",
   verze 11, 18.–19. 9. 2026) prvek po prvku. Barvy, rozestupy a typografie se tu
   nemění; to, co přibylo při stavbě (načítání, hlášky, „nevím"), je v shell.css,
   aby zůstalo poznat, co je návrh a co doplněk.

   Tmavý režim se přepíná JEN ručně přes data-theme="dark" (Michalovo rozhodnutí),
   žádný automat podle systému ani podle času. */

:root{
  --ground:#EEF1F4;--surface:#FFFFFF;--surface-2:#F6F8F9;--line:#D6DDE3;--line-soft:#E6EBEF;
  --ink:#151C23;--ink-2:#4A5762;--ink-3:#77848F;
  --heat:#C9871F;--heat-ink:#8A5B0E;--heat-wash:#FBF0DC;
  --volt:#2F7CA8;--volt-ink:#205875;--volt-wash:#E2EFF6;
  --ok:#3B7F55;--ok-wash:#E3F0E8;--warn:#B4553C;--warn-wash:#FAE9E3;--crit:#9E2B20;--crit-wash:#FBE5E2;
  --focus:#2F7CA8;
  --shadow:0 1px 2px rgba(21,28,35,.06),0 8px 24px -12px rgba(21,28,35,.18);
  --shadow-panel:-8px 0 40px -12px rgba(21,28,35,.28);
  --r:14px;
  --f-display:"Archivo","Segoe UI",system-ui,sans-serif;
  --f-body:"Public Sans","Segoe UI",system-ui,sans-serif;
  /* toky */
  --f-sun:#CF8A0A;--f-house:#2B7FC0;--f-batt:#178F6B;--f-grid:#A24E8D;--f-buy:#C4402E;
  /* scéna */
  --sky-1:#BFD9EC;--sky-2:#EDF3F8;--sky-3:#F7F4EC;--soil:#D9D2C4;--soil-2:#CCC3B2;
  --wall:#FBF8F1;--wall-line:#C9C2B4;--roof:#5C6771;--roof-2:#4A545D;--pv:#1E3A56;--pv-cell:#2E5A84;
  --room-cold:#D9E7F1;--room-mid:#F3EEE3;--room-warm:#F8E3C1;--room-hot:#F6CFA0;
  --glass:rgba(255,255,255,.72);
  --frame:100vw;
}
:root[data-theme="dark"]{
  --ground:#10151A;--surface:#1A2129;--surface-2:#212A33;--line:#2E3A45;--line-soft:#252F39;
  --ink:#EDF2F6;--ink-2:#AAB8C4;--ink-3:#7C8A97;
  --heat:#E8AD48;--heat-ink:#F0C173;--heat-wash:#2E2416;
  --volt:#65B4DC;--volt-ink:#8FCAE9;--volt-wash:#16262F;
  --ok:#6FBE8C;--ok-wash:#152618;--warn:#E08B6C;--warn-wash:#2E1B14;--crit:#F0857A;--crit-wash:#331613;
  --focus:#65B4DC;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-panel:-8px 0 40px -12px rgba(0,0,0,.7);
  --f-sun:#E8A93A;--f-house:#4FA9E3;--f-batt:#33BF92;--f-grid:#CF7FB8;--f-buy:#F0785F;
  --sky-1:#0B1526;--sky-2:#14243A;--sky-3:#1C2B3D;--soil:#1D2329;--soil-2:#171C22;
  --wall:#232B34;--wall-line:#3A4652;--roof:#2C363F;--roof-2:#1F272E;--pv:#0F2238;--pv-cell:#1D4468;
  --room-cold:#1C2C3A;--room-mid:#262B30;--room-warm:#3A2E1C;--room-hot:#4A3319;
  --glass:rgba(26,33,41,.78);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--f-display);margin:0;text-wrap:balance;letter-spacing:-.01em}
button{font:inherit;color:inherit}
button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.num{font-family:var(--f-display);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.k{font-family:var(--f-display);font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3)}
.soon{position:relative}
.soon::after{content:"â—Ś";font-size:.72em;color:var(--warn);margin-left:3px;vertical-align:super;line-height:0}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- rám (šířka) ----------
   Rozvržení se řídí skutečnou šířkou rámu (container queries), přesně jako
   v návrhu; tam se přepínala ručně, tady je rám vždy celé okno. */
.stage{container:stage/inline-size;width:min(100%,var(--frame));margin:0 auto;min-height:100%;background:var(--ground);position:relative}

/* ---------- horní lišta ---------- */
.top{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:16px;
  padding:10px 22px;background:var(--glass);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft);
}
.brand{width:36px;height:36px;border-radius:10px;background:var(--heat);color:#fff;display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:18px;flex:0 0 auto}
:root[data-theme="dark"] .brand{color:#191207}
.top h1{font-size:19px;font-weight:700;line-height:1.1}
.top .stamp{display:block;font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;font-family:var(--f-body);font-weight:400;letter-spacing:0}
.top .stamp .hodiny{font-family:var(--f-display);font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.01em;margin-right:2px}
.tabs{display:flex;gap:4px;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:12px;padding:4px;margin-left:8px}
.tabs button{border:0;background:transparent;border-radius:9px;padding:8px 16px;cursor:pointer;font-family:var(--f-display);font-weight:600;font-size:13.5px;color:var(--ink-2);display:flex;gap:7px;align-items:center}
.tabs button[aria-current="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.tabs svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tools{margin-left:auto;display:flex;gap:6px}
.tools button{width:38px;height:38px;border:1px solid var(--line-soft);background:var(--surface);border-radius:11px;cursor:pointer;display:grid;place-items:center;color:var(--ink-2)}
.tools button:hover{border-color:var(--ink-3)}
.tools button[aria-pressed="true"]{background:var(--heat-wash);color:var(--heat-ink);border-color:var(--heat)}
.tools svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

main{padding:16px 22px 48px;max-width:1500px;margin:0 auto}
/* pruh „EC neřídí" — vidět vždy, na každé obrazovce */
.ecstrip{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:10px 22px;background:var(--crit-wash);color:var(--crit);font-family:var(--f-display);font-weight:600;font-size:13.5px;border-bottom:1px solid var(--crit)}
.ecstrip.paused{background:var(--warn-wash);color:var(--warn);border-color:var(--warn)}
.ecstrip[hidden]{display:none}
.ecstrip span{font-family:var(--f-body);font-weight:400;color:var(--ink-2)}
.ecstrip button{margin-left:auto;border:1px solid currentColor;background:transparent;border-radius:9px;padding:7px 12px;cursor:pointer;font:inherit;color:inherit}
.ecstrip svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

/* ---------- pruh reĹľimu domu ---------- */
.modebar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.homeseg{display:flex;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:4px;box-shadow:var(--shadow)}
.homeseg button{border:0;background:transparent;border-radius:9px;padding:9px 18px;cursor:pointer;font-family:var(--f-display);font-weight:600;font-size:13.5px;color:var(--ink-2);display:flex;align-items:center;gap:7px}
.homeseg button[aria-pressed="true"]{background:var(--heat);color:#fff}
:root[data-theme="dark"] .homeseg button[aria-pressed="true"]{color:#191207}
.homeseg svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.arrival{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px 14px;cursor:pointer;box-shadow:var(--shadow);text-align:left}
.arrival:hover{border-color:var(--ink-3)}
.arrival .v{font-family:var(--f-display);font-size:14.5px;font-weight:600;display:block}
.arrival .v.unset{color:var(--warn)}
.arrival svg{width:19px;height:19px;flex:0 0 auto;fill:none;stroke:var(--heat);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bigact{margin-left:auto;display:flex;align-items:center;gap:9px;background:var(--ink);color:var(--ground);border:0;border-radius:12px;padding:12px 20px;cursor:pointer;font-family:var(--f-display);font-weight:700;font-size:14.5px;box-shadow:var(--shadow)}
.bigact:hover{opacity:.88}
.bigact svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.arrange-btn{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:10px 14px;cursor:pointer;font-family:var(--f-display);font-weight:600;font-size:13px;color:var(--ink-2);display:flex;gap:7px;align-items:center}
.arrange-btn[aria-pressed="true"]{background:var(--volt-wash);border-color:var(--volt);color:var(--volt-ink)}
.arrange-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ---------- zámek chalupy (Nuki) ---------- */
.lockchip{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px 14px;cursor:pointer;box-shadow:var(--shadow);text-align:left;font:inherit;color:inherit}
.lockchip:hover{border-color:var(--ink-3)}
.lockchip .v{font-family:var(--f-display);font-size:14.5px;font-weight:600;display:block}
.lockchip svg{width:19px;height:19px;flex:0 0 auto;fill:none;stroke:var(--ink-3);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lockchip.zamceno{border-color:var(--ok)}
.lockchip.zamceno svg{stroke:var(--ok)}
.lockchip.odemceno{border-color:var(--warn);background:var(--warn-wash)}
.lockchip.odemceno svg{stroke:var(--warn)}
.lockchip.odemceno .v{color:var(--warn)}
.lockchip.nevim .v{color:var(--ink-3)}
.lockstate{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.lockstate svg{width:34px;height:34px;flex:0 0 auto;fill:none;stroke:var(--ink-3);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lockstate b{font-family:var(--f-display);font-size:19px;font-weight:700;display:block}
.lockstate span{font-size:13.5px;color:var(--ink-2);display:block}
.lockstate.zamceno{border-color:var(--ok)}.lockstate.zamceno svg{stroke:var(--ok)}.lockstate.zamceno b{color:var(--ok)}
.lockstate.odemceno{border-color:var(--warn);background:var(--warn-wash)}.lockstate.odemceno svg{stroke:var(--warn)}.lockstate.odemceno b{color:var(--warn)}
.lockacts{margin-top:14px}

/* ---------- společné karty ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow)}
.card > h3{font-size:15.5px;font-weight:700;margin-bottom:3px}
.card .cap{font-size:13px;color:var(--ink-3);margin-bottom:12px}
.sec{margin-top:18px;position:relative}
.sec-head{display:flex;align-items:baseline;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.sec-head h2{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.11em;color:var(--ink-3)}
.sec-head .note{font-size:13px;color:var(--ink-3)}
.mv{display:none;margin-left:auto;gap:4px}
.arrange .mv{display:flex}
.mv button{width:30px;height:30px;border:1px solid var(--volt);background:var(--volt-wash);color:var(--volt-ink);border-radius:8px;cursor:pointer;font-size:15px;line-height:1}
.mv button:disabled{opacity:.3;cursor:default}
.arrange .sec{outline:2px dashed var(--volt);outline-offset:6px;border-radius:6px}
.two{display:grid;gap:14px;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:start}
.chip{font-family:var(--f-display);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:3px 9px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);white-space:nowrap}
.chip.crit{background:var(--crit-wash);color:var(--crit)}
.chip.warn{background:var(--warn-wash);color:var(--warn)}
.chip.ok{background:var(--ok-wash);color:var(--ok)}
.chip.heat{background:var(--heat-wash);color:var(--heat-ink)}
.chip.volt{background:var(--volt-wash);color:var(--volt-ink)}
.rows{display:grid;gap:0}
.row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:14px}
.row:last-child{border-bottom:0}
.row .k{color:var(--ink-2);font:inherit;text-transform:none;letter-spacing:0}
.row .v{font-family:var(--f-display);font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.hint{font-size:12.8px;color:var(--ink-3);margin:9px 0 0}
.plainspeak{font-size:13.6px;color:var(--ink-2);margin:0}
.plainspeak b{color:var(--ink);font-weight:600}
.btn{display:block;width:100%;border:1px solid var(--line);background:var(--surface);border-radius:11px;padding:12px;cursor:pointer;font-family:var(--f-display);font-weight:600;font-size:14px;text-align:center}
.btn:hover{border-color:var(--ink-3)}
.btn + .btn{margin-top:8px}
.btn.primary{background:var(--heat);border-color:var(--heat);color:#fff}
:root[data-theme="dark"] .btn.primary{color:#191207}
.btn.volt{background:var(--volt);border-color:var(--volt);color:#fff}
.btn.danger{color:var(--crit);border-color:var(--crit)}
/* druhé klepnutí u zámku — musí přebít i tmavý režim .btn.primary */
.btn.confirm,:root[data-theme="dark"] .btn.confirm{background:var(--crit-wash);border-color:var(--crit);color:var(--crit)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.seg{display:grid;grid-auto-flow:column;gap:6px;background:var(--ground);border-radius:11px;padding:4px;border:1px solid var(--line-soft)}
.seg button{border:0;background:transparent;border-radius:8px;padding:9px 6px;cursor:pointer;font-family:var(--f-display);font-weight:600;font-size:12.5px;color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--heat);color:#fff;box-shadow:var(--shadow)}
:root[data-theme="dark"] .seg button[aria-pressed="true"]{color:#191207}
.seg.v button[aria-pressed="true"]{background:var(--volt);color:#fff}
.seg button:disabled{opacity:.4;cursor:not-allowed}
.stepper{display:flex;align-items:center;gap:10px;margin-top:12px}
.stepper button{width:44px;height:44px;border:1px solid var(--line);background:var(--surface);border-radius:11px;cursor:pointer;font-size:21px;font-family:var(--f-display);line-height:1}
.stepper .val{flex:1;text-align:center;font-family:var(--f-display);font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:8px 4px}
.bar{height:5px;border-radius:99px;background:var(--line-soft);overflow:hidden;margin-top:9px}
.bar i{display:block;height:100%;border-radius:99px;background:var(--heat)}
.bar.v i{background:var(--volt)}
.bar.g i{background:var(--ok)}
.barline{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-3);margin-top:5px;font-variant-numeric:tabular-nums}
.ico{width:19px;height:19px;flex:0 0 auto;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ico.heat{stroke:var(--heat)}.ico.volt{stroke:var(--volt)}.ico.ink{stroke:var(--ink-2)}.ico.ok{stroke:var(--ok)}
.blk{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--surface-2)}
.blk > .k{margin-bottom:10px;font-weight:700}
/* Zařízení v místnosti (Michal: „naklikat si, jaká zařízení v místnosti chci")
   Jméno zařízení má přednost před tlačítkem: `.btn` je jinak na celou šířku
   a dlouhé názvy („Puk — čidlo u stropu") by se lámaly po slabikách. */
.dev{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line-soft)}
.dev:last-of-type{border-bottom:0}
.dev > div:first-child{min-width:0;flex:1 1 auto}
.dev .k{font:inherit;font-weight:600;text-transform:none;letter-spacing:0;color:var(--ink)}
.dev .v{font-size:13.5px;color:var(--ink-2)}
.dev .btn{display:inline-block;width:auto;flex:0 0 auto;padding:8px 14px;font-size:13.5px}
.devpick{display:grid;gap:2px}
.devpick-row{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:9px;cursor:pointer}
.devpick-row:hover{background:var(--surface)}
.devpick-row input{width:19px;height:19px;flex:0 0 auto;accent-color:var(--heat)}
.devpick-row b{font-weight:600}
.devpick-row i{font-style:normal;color:var(--ink-3);font-size:12.5px}
.reading{display:flex;align-items:baseline;gap:9px;margin-bottom:12px;flex-wrap:wrap}
.reading .now{font-family:var(--f-display);font-size:33px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.reading .goal{font-size:13.5px;color:var(--ink-2)}
.mine{background:var(--heat-wash);border:1px solid var(--heat);border-radius:12px;padding:13px 14px}
.mine .t{font-family:var(--f-display);font-weight:700;font-size:14.5px;color:var(--heat-ink);margin-bottom:4px}
.mine p{margin:0 0 10px;font-size:13.5px;color:var(--ink-2)}
.tiles4{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.qa{display:flex;flex-direction:column;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:13px 8px;cursor:pointer;font-family:var(--f-display);font-weight:600;font-size:12.5px}
.qa svg{width:22px;height:22px;fill:none;stroke:var(--ink-3);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.qa.on{background:var(--volt-wash);border-color:var(--volt);color:var(--volt-ink)}
.qa.on svg{stroke:var(--volt)}
.qa:disabled{opacity:.55;cursor:not-allowed}
.qa small{font-weight:500;font-size:11px;color:var(--ink-3)}
.qa.on small{color:var(--volt-ink)}
/* stav se nevymyslí: neznámý je přerušovaný, ne „vypnuto" */
.qa.nevim{border-style:dashed}
.qa.nevim small{font-style:italic}
.qa.confirm{background:var(--crit-wash);border-color:var(--crit);color:var(--crit)}
.qa.confirm svg{stroke:var(--crit)}
.qa.confirm small{color:var(--crit);font-weight:700}

/* co dům dělá */
.doing{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--ok);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow);display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.doing .dot{width:9px;height:9px;border-radius:50%;background:var(--ok);flex:0 0 auto;margin-top:8px;box-shadow:0 0 0 0 var(--ok);animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(59,127,85,.5)}100%{box-shadow:0 0 0 12px rgba(59,127,85,0)}}
.doing-text{flex:1;min-width:220px}
.doing-text .lead{font-family:var(--f-display);font-size:17.5px;font-weight:600;line-height:1.35;margin:0}
.doing-text .why{color:var(--ink-2);font-size:14px;margin:5px 0 0}
.doing-next{flex:0 0 auto;background:var(--surface-2);border-radius:10px;padding:10px 14px;border:1px solid var(--line-soft);min-width:190px}
.doing-next .v{font-size:14px;margin-top:3px}

/* varování / závada */
.ahead{background:var(--surface);border:1px solid var(--heat);border-left:4px solid var(--heat);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow);display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.ahead .txt{flex:1;min-width:240px}
.ahead .lead{font-family:var(--f-display);font-size:16px;font-weight:600;line-height:1.35;margin:0 0 5px}
.ahead .why{color:var(--ink-2);font-size:14px;margin:0}
.ahead .acts{display:flex;gap:8px;flex-wrap:wrap;flex:0 0 auto}
.ahead .acts button{border:1px solid var(--line);background:var(--surface-2);border-radius:10px;padding:10px 16px;cursor:pointer;font-family:var(--f-display);font-weight:600;font-size:13.5px}
.ahead .acts button.yes{background:var(--heat);border-color:var(--heat);color:#fff}
.ahead .acts button:disabled{opacity:.45;cursor:not-allowed}
.ahead.crit{border-color:var(--crit);border-left-color:var(--crit)}
.ahead .txt .chip{display:inline-block;margin-bottom:7px}
:root[data-theme="dark"] .ahead .acts button.yes{color:#191207}
.fault{background:var(--surface);border:1px solid var(--crit);border-left:4px solid var(--crit);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow)}
.fault + .fault{margin-top:12px}
.fault-head{display:flex;gap:10px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.fault-head h2{font-size:16.5px;font-weight:700}
.fault dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14.2px}
.fault dt{padding-top:3px}
.fault dd{margin:0;color:var(--ink-2)}
.fault dd strong{color:var(--ink);font-weight:600}
.fault-do{margin-top:12px;background:var(--crit-wash);border-radius:10px;padding:11px 14px;font-size:14.2px;color:var(--ink)}
.fault-do b{font-family:var(--f-display)}

/* dlaždice (obrazovka Zařízení a panely je používají dál) */
.tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(216px,1fr))}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 15px 13px;text-align:left;cursor:pointer;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:2px;position:relative;transition:transform .12s ease,border-color .12s ease}
.tile:hover{transform:translateY(-2px);border-color:var(--ink-3)}
.tile::after{content:"›";position:absolute;right:13px;top:11px;color:var(--ink-3);font-size:20px;line-height:1;font-family:var(--f-display)}
.tile-top{display:flex;align-items:center;gap:7px;margin-bottom:6px;padding-right:18px}
.tile-top .name{font-family:var(--f-display);font-size:13.5px;font-weight:600}
.tile .big{font-size:31px;font-weight:700;line-height:1.05;display:block}
.tile .big .unit{font-size:16px;font-weight:600;color:var(--ink-3);margin-left:1px}
.tile .sub{font-size:13px;color:var(--ink-2);margin-top:3px;display:block}
.tile .foot{margin-top:9px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}

/* týden / peníze */
.week{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.wk{background:var(--surface-2);border:1px solid var(--line-soft);border-radius:12px;padding:13px 14px}
.wk .v{font-family:var(--f-display);font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:3px}
.wk .s{font-size:12.5px;color:var(--ink-2);margin-top:3px}
.wk.good .v{color:var(--ok)}.wk.warn .v{color:var(--warn)}
.tline{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.tl{display:flex;gap:12px;padding:8px 0;font-size:13.8px;align-items:flex-start}
.tl .d{font-family:var(--f-display);font-weight:600;color:var(--ink-3);flex:0 0 78px;font-size:12.5px;padding-top:1px}
.tl .t{flex:1;color:var(--ink-2)}
.tl .t b{color:var(--ink);font-weight:600}
.tl .m{flex:0 0 auto;width:7px;height:7px;border-radius:50%;margin-top:6px}
.tl .m.ok{background:var(--ok)}.tl .m.warn{background:var(--warn)}.tl .m.info{background:var(--line)}
.money{width:100%;height:auto;max-width:100%;display:block}
.money .grid{stroke:var(--line-soft);stroke-width:1}
.money .grid.zero{stroke:var(--line);stroke-width:1.5}
.money .plus rect{fill:var(--ok)}.money .minus rect{fill:var(--warn)}.money .today{fill:var(--heat)}
.money text{fill:var(--ink-3);font-family:var(--f-body);font-size:10px;font-variant-numeric:tabular-nums}
.plan-sum{margin-top:12px;background:var(--ok-wash);border-radius:10px;padding:11px 14px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.plan-sum .l{font-size:13.5px;color:var(--ink-2)}
.plan-sum .r{font-family:var(--f-display);font-size:21px;font-weight:700;color:var(--ok);font-variant-numeric:tabular-nums}
.why-not{margin-top:12px;border:1px dashed var(--line);border-radius:10px;padding:12px 14px;background:var(--surface-2)}
.why-not .k{margin-bottom:5px}
.why-not p{margin:0;font-size:13.8px;color:var(--ink-2)}
.why-not p + p{margin-top:6px}
.planwrap{overflow-x:auto}
table.plan{width:100%;border-collapse:collapse;font-size:14px;min-width:420px}
table.plan th{font-family:var(--f-display);font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);text-align:right;padding:0 0 7px;border-bottom:1px solid var(--line)}
table.plan th:first-child,table.plan td:first-child{text-align:left}
table.plan td{padding:9px 0;border-bottom:1px solid var(--line-soft);text-align:right;font-variant-numeric:tabular-nums}
table.plan tr:last-child td{border-bottom:0}
table.plan .when{font-family:var(--f-display);font-weight:600}
table.plan .when small{display:block;font-family:var(--f-body);font-weight:400;color:var(--ink-3);font-size:12px}
.sell{color:var(--ok);font-weight:600}
/* měsíce (faktura) — převzato z v6, v7 tuhle kartu nemění */
.months{margin-top:16px;display:grid;gap:8px}
.mo{display:flex;align-items:center;gap:12px;font-size:13.5px}
.mo .l{flex:0 0 82px;color:var(--ink-2);font-family:var(--f-display);font-weight:600;font-size:12.5px}
.mo .b{flex:1;height:22px;background:var(--surface-2);border-radius:6px;overflow:hidden;min-width:60px}
.mo .b i{display:block;height:100%;background:var(--volt);border-radius:6px}
.mo .c{flex:0 0 auto;font-family:var(--f-display);font-weight:700;font-variant-numeric:tabular-nums;min-width:74px;text-align:right}
.mo .c small{display:block;font-weight:500;font-size:10.5px;color:var(--ink-3);letter-spacing:.04em}
.mo.now .b i{background:var(--heat)}
.mo.now .c{color:var(--heat-ink)}

/* ceny */
.pchart{width:100%;height:auto;max-width:100%;display:block;margin:8px 0 2px}
.pchart .grid{stroke:var(--line-soft);stroke-width:1}
.pchart .b{fill:var(--line)}.pchart .b.cheap{fill:var(--ok)}.pchart .b.dear{fill:var(--warn)}.pchart .b.now{fill:var(--heat)}
.pchart text{fill:var(--ink-3);font-family:var(--f-body);font-size:10px;font-variant-numeric:tabular-nums}
.pchart text.tag{font-family:var(--f-display);font-weight:700;font-size:11px;fill:var(--ink)}
.pchart text.tag.now{fill:var(--heat-ink)}
.pchart text.tag.cheap{fill:var(--ok)}
.pchart text.tag.dear{fill:var(--warn)}
.prices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.price{background:var(--surface-2);border-radius:10px;padding:10px 12px;border:1px solid var(--line-soft)}
.price .v{font-family:var(--f-display);font-size:21px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px}
.price .u{font-size:12.5px;font-weight:500;color:var(--ink-3)}
/* ceny — klepnutí na sloupec */
.pchart .b{cursor:pointer}
.pchart .b.sel{stroke:var(--ink);stroke-width:2}
.price-info{margin-top:8px;font-size:13px;color:var(--ink-2);background:var(--surface-2);border-radius:10px;padding:9px 12px;border:1px solid var(--line-soft);min-height:40px}
.price-info b{font-family:var(--f-display);color:var(--ink)}

/* poÄŤasĂ­ */
.wx-now{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.wx-now .t{font-family:var(--f-display);font-size:42px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.wx-meta{font-size:13.5px;color:var(--ink-2)}
.stale{display:inline-flex;align-items:center;gap:6px;margin-top:7px;background:var(--warn-wash);color:var(--warn);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600}
.curve{width:100%;height:auto;max-width:100%;display:block;margin-top:6px}
.curve .grid{stroke:var(--line-soft);stroke-width:1}
.curve .fcst-fill{fill:var(--volt);opacity:.14}
.curve .fcst-line{fill:none;stroke:var(--volt);stroke-width:2;stroke-dasharray:5 4;opacity:.75}
.curve .real{fill:none;stroke:var(--volt);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.curve .nowline{stroke:var(--heat);stroke-width:1.6;stroke-dasharray:3 3}
.curve .nowdot{fill:var(--heat)}
.curve text{fill:var(--ink-3);font-family:var(--f-body);font-size:10.5px}
.curve text.strong{fill:var(--ink);font-family:var(--f-display);font-weight:600;font-size:11px}
.wxgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:9px;margin-top:14px}
.wxi{background:var(--surface-2);border:1px solid var(--line-soft);border-radius:11px;padding:10px 12px}
.wxi .v{display:block;font-family:var(--f-display);font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px}
.wxi .s{display:block;font-size:11.5px;color:var(--ink-3);margin-top:1px}
.hours{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:14px}
.hour{text-align:center;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:10px;padding:8px 2px}
.hour .h{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.hour .d{font-size:17px;margin:3px 0}
.hour .c{font-family:var(--f-display);font-weight:600;font-size:13.5px;font-variant-numeric:tabular-nums}
.hour .p{font-size:11px;color:var(--volt);font-variant-numeric:tabular-nums;font-weight:600}
.therm{width:100%;height:auto;max-width:100%;display:block;margin-top:4px}
.therm .grid{stroke:var(--line-soft);stroke-width:1}
.therm .goal{stroke:var(--ok);stroke-width:1.4;stroke-dasharray:5 4}
.therm .past{fill:none;stroke:var(--ink-2);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.therm .fut{fill:none;stroke:var(--heat);stroke-width:2.4;stroke-dasharray:6 4;stroke-linecap:round}
.therm .nowline{stroke:var(--ink-3);stroke-width:1.2;stroke-dasharray:3 3}
.therm .dot{fill:var(--heat)}
.therm text{fill:var(--ink-3);font-family:var(--f-body);font-size:10px;font-variant-numeric:tabular-nums}
.therm text.s{fill:var(--ink);font-family:var(--f-display);font-weight:600;font-size:10.5px}

/* ========== SMĚR A · ŽIVÝ DŮM ========== */
.scene-wrap{position:relative;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line)}
.scene{width:100%;height:auto;display:block}
.scene text{font-family:var(--f-body);fill:var(--ink)}
.scene .lab{font-family:var(--f-display);font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;fill:var(--ink-3)}
.scene .big{font-family:var(--f-display);font-weight:700;font-size:30px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.scene .mid{font-family:var(--f-display);font-weight:700;font-size:19px;font-variant-numeric:tabular-nums}
.scene .sub{font-size:13.5px;fill:var(--ink-2)}
.scene .tiny{font-size:11.5px;fill:var(--ink-3)}
.scene .chipr{fill:var(--surface);stroke:var(--line)}
.scene .chipt{font-family:var(--f-display);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;fill:var(--ink-2)}
.scene .chipr.crit{fill:var(--crit-wash);stroke:var(--crit)}.scene .chipt.crit{fill:var(--crit)}
.scene .chipr.heat{fill:var(--heat-wash);stroke:var(--heat)}.scene .chipt.heat{fill:var(--heat-ink)}
.scene .chipr.ok{fill:var(--ok-wash);stroke:var(--ok)}.scene .chipt.ok{fill:var(--ok)}
.scene .chipr.volt{fill:var(--volt-wash);stroke:var(--volt)}.scene .chipt.volt{fill:var(--volt-ink)}
.scene .chipr.warn{fill:var(--warn-wash);stroke:var(--warn)}.scene .chipt.warn{fill:var(--warn)}
.scene .hot{cursor:pointer}
.scene .hot .hit{fill:transparent;stroke:transparent;stroke-width:2;transition:stroke .12s}
.scene .hot:hover .hit{stroke:var(--heat)}
.scene .hot:focus-visible{outline:none}
.scene .hot:focus-visible .hit{stroke:var(--focus)}
.scene .wall{fill:var(--wall);stroke:var(--wall-line);stroke-width:1.5}
.scene .iw{stroke:var(--wall-line);stroke-width:1.5;stroke-dasharray:none}
.scene .roof{fill:var(--roof)}.scene .roof2{fill:var(--roof-2)}
.scene .soil{fill:var(--soil)}.scene .soil2{fill:var(--soil-2)}
.scene .glyph{fill:none;stroke:var(--ink-3);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.55}
.scene .stove{fill:var(--surface);stroke:var(--ink-3);stroke-width:1.5}
.scene .core{fill:url(#coreGrad)}
.scene .core.charging{animation:coreGlow 1.2s ease-in-out infinite}
@keyframes coreGlow{0%,100%{opacity:.55}50%{opacity:1}}
/* Blesk „teď se nabíjí" u kamen i u baterie. Bliká zřetelně, ať je nabíjení
   vidět přes celou obrazovku — Michal na to upozornil, samotný nápis stačit
   nemůže. Při prefers-reduced-motion se animace vypne globálně (ř. 57). */
.scene .zap{animation:zapBlink 1.15s ease-in-out infinite}
@keyframes zapBlink{0%,100%{opacity:1}50%{opacity:.2}}
/* Kontrolka přetoků u sloupu: zelená povolené, červená zakázané, šedá nevím. */
.scene .led{stroke:var(--surface);stroke-width:1.5}
/* Podložka pod kontrolkou přetoků — stojí u paty sloupu a bez ní přes ni
   přebíhá sloup i dráty. */
.scene .ledchip{fill:var(--surface);stroke:var(--line);opacity:.94}
.scene .led.on{filter:drop-shadow(0 0 5px var(--ok))}
.scene .led.off{filter:drop-shadow(0 0 5px var(--crit))}
.scene .flame{fill:var(--heat);transform-origin:center bottom;animation:flick .5s ease-in-out infinite alternate}
@keyframes flick{from{transform:scaleY(.92) scaleX(1.04)}to{transform:scaleY(1.06) scaleX(.96)}}
.scene .smoke{fill:var(--ink-3);opacity:0;transform-box:fill-box;transform-origin:center;animation:smoke 3.6s linear infinite}
.scene .smoke:nth-child(2){animation-delay:1.2s}.scene .smoke:nth-child(3){animation-delay:2.4s}
@keyframes smoke{0%{opacity:0;transform:translate(0,0) scale(.6)}20%{opacity:.5}100%{opacity:0;transform:translate(14px,-46px) scale(1.6)}}
.scene .wire{fill:none;stroke-linecap:round;stroke-linejoin:round}
.scene .wire.idle{stroke:var(--line);stroke-dasharray:4 6;stroke-width:2}
.scene .wire.sun{stroke:var(--f-sun)}.scene .wire.house{stroke:var(--f-house)}.scene .wire.batt{stroke:var(--f-batt)}.scene .wire.grid{stroke:var(--f-grid)}.scene .wire.buy{stroke:var(--f-buy)}
.scene .ah.sun{fill:var(--f-sun)}.scene .ah.house{fill:var(--f-house)}.scene .ah.batt{fill:var(--f-batt)}.scene .ah.grid{fill:var(--f-grid)}.scene .ah.buy{fill:var(--f-buy)}
.scene .sunbody{fill:#F7C14B}.scene .sunglow{fill:#F7C14B;opacity:.22}
.scene .moon{fill:#E9EEF2}.scene .star{fill:#E9EEF2}
.scene .cloud{fill:#fff;opacity:.85}
:root[data-theme="dark"] .scene .cloud{fill:#3A4652;opacity:.7}
.scene .bulb{fill:#FFD66B}.scene .bulbglow{fill:#FFD66B;opacity:.25}
.scene .lvl.water{fill:var(--f-house);opacity:.55}
.scene .lvl.batt{fill:var(--f-batt)}
.scene .lvl.batt.charging,.scene .lvl.water.charging{animation:coreGlow 1.2s ease-in-out infinite}
/* Rozsvícená místnost (Michal: „místnosti by se mohly rozsvěcet podle toho,
   jestli se tam svítí"). Je to teplý přeliv PŘES barvu podle teploty, ne
   její náhrada — teplota zůstává čitelná. */
.scene .litroom{fill:#F2B01E;opacity:.14;pointer-events:none}
:root[data-theme="dark"] .scene .litroom{opacity:.2}
.scene .bulb .glow{animation:bulbGlow 2.6s ease-in-out infinite}
@keyframes bulbGlow{0%,100%{opacity:.22}50%{opacity:.34}}
.scene .node{fill:var(--surface);stroke:var(--line);stroke-width:1.5}
.scene .meter{fill:var(--surface);stroke:var(--line)}
.scene .car{fill:var(--surface);stroke:var(--ink-2);stroke-width:1.6}
.scene .tyre{fill:var(--ink-2)}
.scene .post{fill:var(--ink-3)}
.scene-tools{position:absolute;right:12px;top:12px;display:flex;flex-direction:column;align-items:flex-end;gap:6px;z-index:2}
.scene-tools .seg{padding:3px;background:var(--glass);backdrop-filter:blur(8px)}
.scene-tools .seg button{padding:6px 10px;font-size:12px}
.scene-cap{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px;font-size:12.5px;color:var(--ink-3);padding:0 4px}
.scene-cap span{display:inline-flex;align-items:center;gap:6px}
.scene-cap i{width:16px;height:3px;border-radius:2px;display:inline-block}
.scene-cap .capnote{display:block;width:100%;margin-top:2px;color:var(--ink-2)}
.scene-cap .capnote b{color:var(--ink);font-weight:600}

/* poÄŤasĂ­ na obloze */
.scene .cloud.dark{fill:#94A0AC;opacity:.92}
:root[data-theme="dark"] .scene .cloud.dark{fill:#2A343E;opacity:.95}
.scene .rain line{stroke:var(--f-house);stroke-width:1.6;stroke-linecap:round;opacity:.5;animation:rain 1.1s linear infinite}
@keyframes rain{from{transform:translateY(-40px)}to{transform:translateY(130px)}}
.scene .snow circle{fill:#fff;opacity:.95;animation:snow 5s linear infinite}
:root[data-theme="dark"] .scene .snow circle{fill:#DCE3E9}
@keyframes snow{0%{transform:translate(0,-30px)}50%{transform:translate(9px,70px)}100%{transform:translate(-5px,170px)}}
.scene .bolt{fill:none;stroke:#F7C14B;stroke-width:3.5;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 6px #F7C14B);animation:flash 3.2s linear infinite;opacity:0}
@keyframes flash{0%,60%{opacity:0}62%{opacity:1}64%{opacity:0}67%{opacity:1}70%{opacity:0}86%{opacity:0}88%{opacity:1}90%{opacity:0}}
/* ovládání auta nad autem */
.scene .ctl{cursor:pointer}
.scene .ctl circle{fill:var(--surface);stroke:var(--line);stroke-width:1.5;transition:stroke .12s;r:20px}
.scene .ctl[aria-pressed="true"] circle{fill:var(--volt-wash);stroke:var(--volt)}
.scene .ctl path{fill:none;stroke:var(--ink-3);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.scene .ctl[aria-pressed="true"] path{stroke:var(--volt)}
.scene .ctl:hover circle{stroke:var(--heat)}
.scene .ctl .tiny{font-size:11.5px;font-weight:600;fill:var(--ink-2)}
.scene .ctl .tiny.stav{font-size:10.5px;font-weight:500;fill:var(--ink-3)}
.scene .ctl[aria-pressed="true"] .tiny.stav{fill:var(--volt)}
/* Neznámý stav se nesmí tvářit jako „vypnuto" — přerušovaný obrys a kurzíva. */
.scene .ctl.nevim circle{stroke-dasharray:4 3}
.scene .ctl.nevim .tiny.stav{font-style:italic}
.scene .ctl.zamcene{cursor:not-allowed;opacity:.6}
/* Odemknout auto je nevratné a jde to z internetu — druhé klepnutí potvrzuje. */
.scene .ctl.confirm circle{fill:var(--crit-wash);stroke:var(--crit);stroke-dasharray:none}
.scene .ctl.confirm path{stroke:var(--crit)}
.scene .ctl.confirm .tiny,.scene .ctl.confirm .tiny.stav{fill:var(--crit);font-weight:700;font-style:normal}
/* vířivka */
.scene .tub{fill:var(--soil-2);stroke:var(--ink-3);stroke-width:1.4}
.scene .water{fill:var(--f-house);opacity:.45}
.scene .steam{fill:none;stroke:var(--ink-3);stroke-width:1.6;stroke-linecap:round;opacity:0;animation:steam 3s ease-out infinite}
.scene .steam:nth-child(2){animation-delay:1s}.scene .steam:nth-child(3){animation-delay:2s}
@keyframes steam{0%{opacity:0;transform:translateY(0)}30%{opacity:.5}100%{opacity:0;transform:translateY(-22px)}}
.scene .pct{font-family:var(--f-display);font-size:14px;font-weight:700;fill:var(--ink);letter-spacing:-.01em}

/* ========== OBRAZOVKA POÄŚASĂŤ ========== */
.wx-hero{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.wx-hero svg{display:block;width:100%;height:auto}
.wx-hero .scene-tools{top:12px}
.wx-days{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.wxday{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow)}
.wxday h3{font-size:15px;font-weight:700;display:flex;align-items:center;gap:10px}
.wxday h3 .ic{font-size:26px;line-height:1}
.wxday .mm{font-family:var(--f-display);font-size:26px;font-weight:700;margin:6px 0 2px;font-variant-numeric:tabular-nums}
.wxday .mm small{font-size:15px;color:var(--ink-3);font-weight:600}
.wxday .rows{margin-top:6px}
.wxday.dim{background:var(--surface-2);box-shadow:none}
.w48{width:100%;height:auto;display:block}
.w48 text{fill:var(--ink-2);font-family:var(--f-body);font-size:15px;font-variant-numeric:tabular-nums}
.w48 .lab{font-family:var(--f-display);font-weight:700;fill:var(--ink);font-size:18px}
.w48 .grid{stroke:var(--line-soft);stroke-width:1}
.w48 .night{fill:var(--ink);opacity:.05}
.w48 .tline{fill:none;stroke:var(--heat);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.w48 .traw{fill:none;stroke:var(--ink-3);stroke-width:1.4;stroke-dasharray:4 4}
.w48 .pvfill{fill:var(--f-sun);opacity:.22}
.w48 .pvline{fill:none;stroke:var(--f-sun);stroke-width:2}
.w48 .cl{fill:var(--ink-3)}
.w48 .rn{fill:var(--f-house)}
.w48 .tag{font-family:var(--f-display);font-weight:700;fill:var(--ink);font-size:15px}
.w48 .col{fill:transparent}
.w48 .col:hover{fill:var(--ink);opacity:.06}
.w48 .nowline{stroke:var(--ink);stroke-width:1.4}
.srcs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.src{background:var(--surface-2);border:1px solid var(--line-soft);border-radius:11px;padding:10px 12px;font-size:13px}
.src b{font-family:var(--f-display);display:block;margin-bottom:2px}
.src .st{display:inline-block;margin-top:6px}

/* klasickĂ˝ pavouk (Ăşzko) */
.flow{width:100%;height:auto;max-width:100%;display:block;margin:4px 0 2px}
.flow .wire{fill:none;stroke-linecap:round}
.flow .wire.sun{stroke:var(--f-sun)}.flow .wire.house{stroke:var(--f-house)}.flow .wire.batt{stroke:var(--f-batt)}.flow .wire.grid{stroke:var(--f-grid)}.flow .wire.buy{stroke:var(--f-buy)}
.flow .wire.idle{stroke:var(--line);stroke-dasharray:5 5}
.flow .ah.sun{fill:var(--f-sun)}.flow .ah.house{fill:var(--f-house)}.flow .ah.batt{fill:var(--f-batt)}.flow .ah.grid{fill:var(--f-grid)}.flow .ah.buy{fill:var(--f-buy)}
.flow .node{fill:var(--surface);stroke:var(--line);stroke-width:1.5}
.flow .nlabel{fill:var(--ink-3);font-family:var(--f-display);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.flow .nval{fill:var(--ink);font-family:var(--f-display);font-size:19px;font-weight:700}
.flow .nsub{fill:var(--ink-3);font-family:var(--f-body);font-size:11px}
.flow .hub{fill:var(--ink-3)}
.flow .hot{cursor:pointer}
.flow .hot:hover .node{stroke:var(--heat)}

/* zařízení */
.rooms{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.roomcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:15px 16px;box-shadow:var(--shadow)}
.roomcard h3{font-size:15.5px;font-weight:700;margin-bottom:2px}
.roomcard .rsum{font-size:12.5px;color:var(--ink-3);margin:0 0 11px}
.dev{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--line-soft)}
.dev:last-child{border-bottom:0}
.dev .di{width:32px;height:32px;border-radius:9px;background:var(--surface-2);display:grid;place-items:center;flex:0 0 auto}
.dev .di svg{width:17px;height:17px;fill:none;stroke:var(--ink-3);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dev.on .di{background:var(--heat-wash)}.dev.on .di svg{stroke:var(--heat)}
.dev .dn{flex:1;min-width:0}
.dev .dn b{font-family:var(--f-display);font-weight:600;font-size:14px;display:block}
.dev .dn span{font-size:12.2px;color:var(--ink-3)}
.sw{width:48px;height:28px;border-radius:99px;border:1px solid var(--line);background:var(--surface-2);position:relative;cursor:pointer;flex:0 0 auto;padding:0}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:var(--ink-3);transition:transform .16s ease,background .16s ease}
.sw[aria-pressed="true"]{background:var(--heat);border-color:var(--heat)}
.sw[aria-pressed="true"]::after{transform:translateX(20px);background:#fff}
.dev-scenes{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.dev-scenes button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:9px 16px;cursor:pointer;font-family:var(--f-display);font-weight:600;font-size:13px;display:flex;gap:7px;align-items:center;box-shadow:var(--shadow)}
.dev-scenes svg{width:16px;height:16px;fill:none;stroke:var(--heat);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ---------- boÄŤnĂ­ panel ---------- */
.scrim{position:fixed;inset:0;background:rgba(10,14,18,.44);z-index:70;opacity:0;pointer-events:none;transition:opacity .18s ease}
.scrim.open{opacity:1;pointer-events:auto}
.panel{position:fixed;top:0;bottom:0;right:max(0px,calc((100vw - var(--frame)) / 2));width:min(440px,100vw,var(--frame));z-index:80;background:var(--surface);border-left:1px solid var(--line);box-shadow:var(--shadow-panel);transform:translateX(102%);transition:transform .22s cubic-bezier(.32,.72,0,1);display:flex;flex-direction:column}
.panel:not(.open){visibility:hidden;transition:transform .22s cubic-bezier(.32,.72,0,1),visibility 0s .22s}
.panel.open{transform:none;visibility:visible}
.panel[hidden]{display:none}
.panel-head{display:flex;align-items:center;gap:11px;padding:16px 18px;border-bottom:1px solid var(--line);padding-top:calc(16px + env(safe-area-inset-top,0px))}
.panel-head h2{font-size:17px;font-weight:700;flex:1}
.panel-head .x{width:34px;height:34px;border:1px solid var(--line);background:var(--surface-2);border-radius:9px;cursor:pointer;display:grid;place-items:center;color:var(--ink-2)}
.panel-body{overflow-y:auto;padding:16px 18px calc(24px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:14px}

/* ---------- spodní lišta ---------- */
.tabbar{display:none}

/* ========== ŠÍŘKY (container queries) ========== */
@container stage (max-width:1120px){
  .tiles.strip{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@container stage (max-width:1040px){
  .two{grid-template-columns:minmax(0,1fr)}
}
@container stage (max-width:760px){
  .top{padding:8px 14px;gap:10px}
  .top h1{font-size:16px}
  .tabs{display:none}
  main{padding:12px 16px 100px}
  .tiles{grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:10px}
  .tile .big{font-size:26px}
  .doing{flex-direction:column;gap:12px}
  .doing-next{width:100%}
  .hours{grid-template-columns:repeat(3,1fr)}
  .bigact{margin-left:0;width:100%;justify-content:center}
  .arrange-btn{width:100%;justify-content:center}
  .scene-tools{position:static;margin-bottom:8px}
  .scene-tools .seg{width:100%}
  .tabbar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:50%;transform:translateX(-50%);width:min(100vw,var(--frame));bottom:0;z-index:30;background:var(--surface);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))}
  .tabbar button{border:0;background:transparent;display:grid;justify-items:center;gap:3px;padding:6px 2px;border-radius:10px;cursor:pointer;color:var(--ink-3);font-size:10.5px;font-family:var(--f-display);font-weight:600}
  .tabbar button[aria-current="true"]{color:var(--heat-ink);background:var(--heat-wash)}
  .tabbar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .panel{width:min(100vw,var(--frame));border-left:0}
}
@container stage (max-width:420px){
  .tiles{grid-template-columns:1fr 1fr;gap:9px}
  .tile{padding:12px 12px 11px}
  .tile .big{font-size:23px}
  .prices{grid-template-columns:1fr}
  .top .stamp{display:none}
  .tools button{width:34px;height:34px}
}