:root { --bg:#0f1419; --card:#1a2029; --fg:#e6edf3; --muted:#8b949e; --acc:#ffb000; --ok:#3fb950; --err:#f85149;
        --solar:#ffb000; --house:#58a6ff; --batt:#3fb950; --grid:#bc8cff; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background:var(--bg); color:var(--fg); }
header { padding:calc(14px + env(safe-area-inset-top)) 20px 14px; display:flex; align-items:center; gap:14px;
         border-bottom:1px solid #222b36; flex-wrap:wrap;
         position:sticky; top:0; z-index:50; background:var(--bg); }
header h1 { font-size:18px; margin:0; font-weight:600; }
.status { font-size:13px; color:var(--muted); display:flex; align-items:center; gap:8px; }
.dot { width:9px; height:9px; border-radius:50%; background:var(--err); display:inline-block; }
.dot.on { background:var(--ok); }
.layout { display:flex; align-items:flex-start; }
main { padding:20px; max-width:1200px; flex:1; min-width:0; }
.sidebar { width:300px; flex-shrink:0; border-right:1px solid #222b36; padding:14px 12px;
           position:sticky; top:57px; max-height:calc(100vh - 57px); overflow-y:auto; }
@media (max-width:760px){ .layout{flex-direction:column;} .sidebar{width:100%;position:static;max-height:none;border-right:none;border-bottom:1px solid #222b36;} }

/* ----- navigační menu ----- */
.nav { display:flex; flex-direction:column; gap:4px; }
.navitem { display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none; text-decoration:none;
           border:0; color:var(--fg); padding:10px 12px; border-radius:9px; font-size:14px; cursor:pointer; font-family:inherit; }
.navitem:not(.disabled):not(.active):hover { background:#0f1620; }
.navitem.active { background:var(--acc); color:#1a1200; font-weight:700; }
.navitem.disabled { color:#5a6470; cursor:default; }
.navitem .soon { margin-left:auto; font-size:10px; color:var(--muted); border:1px solid #2a3441; border-radius:5px; padding:1px 5px; }
@media (max-width:760px){ .nav{flex-direction:row; flex-wrap:wrap;} .navitem{width:auto;} }

/* ----- seznam entit ----- */
.enthead { font-size:13px; color:var(--muted); margin:0 0 10px; font-weight:600; }
.enthead b { color:var(--fg); }
#entFilter { width:100%; box-sizing:border-box; background:#0f1620; border:1px solid #222b36; color:var(--fg);
             border-radius:8px; padding:7px 10px; font-size:13px; margin-bottom:10px; }
.ent { display:block; padding:6px 6px; border-radius:6px; font-size:12.5px; }
.ent:hover { background:#0f1620; }
.ent-row { display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
.ent .ek { color:var(--muted); font-family:ui-monospace,Menlo,Consolas,monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ent .ev { font-weight:600; white-space:nowrap; }
.ent .ev span { color:var(--muted); font-weight:400; font-size:11px; margin-left:2px; }
.ent .ed { color:#6b7785; font-size:11px; line-height:1.35; margin-top:2px; }
.ent.cfg { border-left:3px solid #39d7e6; padding-left:5px; background:#0d1a1d; }
.ent.cfg:hover { background:#10242a; }
.ent.cfg .ek { color:#6fd8e8; }
.ent.cfg .ek::before { content:"⚙ "; opacity:.7; }
.ent.calc { border-left:3px solid var(--acc); padding-left:5px; background:#1a1402; }
.ent.calc:hover { background:#241c05; }
.ent.calc .ek { color:#ffcf66; }
.ent.calc .ek::before { content:"∑ "; opacity:.7; }

/* ----- karty / grafy ----- */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:22px; }
.card { background:var(--card); border:1px solid #222b36; border-radius:12px; padding:16px; }
.card .label { font-size:13px; color:var(--muted); margin-bottom:6px; }
.card .value { font-size:28px; font-weight:700; }
.card .unit { font-size:14px; color:var(--muted); font-weight:400; margin-left:4px; }
.ranges { display:flex; gap:8px; margin-bottom:14px; }
.ranges button { background:var(--card); color:var(--fg); border:1px solid #222b36; border-radius:8px; padding:6px 14px; cursor:pointer; font-size:13px; }
.ranges button.active { background:var(--acc); color:#000; border-color:var(--acc); font-weight:600; }
.chartbox { background:var(--card); border:1px solid #222b36; border-radius:12px; padding:16px; margin-bottom:18px; }
.chartbox h2 { font-size:14px; margin:0 0 12px; font-weight:600; color:var(--muted); }
.banner { background:#3d2b00; border:1px solid var(--acc); color:#ffd479; padding:10px 14px; border-radius:8px; margin-bottom:18px; font-size:14px; }
canvas { max-height:320px; }
/* vysoký graf (kumulativní vývoj roku): Chart.js plní výšku kontejneru, ne max-height canvasu */
.chartbox.cez-tall { height:620px; }
.chartbox.cez-tall canvas { max-height:none; height:100% !important; }
.st-note { color:var(--muted); font-size:12.5px; margin:6px 2px 0; }
.st-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.st-bar .ranges { margin-bottom:0; }
.st-nav { display:flex; align-items:center; gap:10px; }
.st-navbtn { background:var(--card); color:var(--fg); border:1px solid #222b36; border-radius:8px;
             width:34px; height:34px; cursor:pointer; font-size:13px; }
.st-navbtn:hover:not(:disabled) { border-color:#3a4655; }
.st-navbtn:disabled { opacity:.35; cursor:default; }
.st-label { font-size:14px; font-weight:600; min-width:120px; text-align:center; }
.fve-ctrl { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.fve-ctrl .ranges { margin-bottom:0; }
.date-pick { background:var(--card); color:var(--fg); border:1px solid #222b36; border-radius:8px;
             padding:6px 10px; font-size:13px; color-scheme:dark; }
.date-pick:focus { outline:none; border-color:var(--acc); }

/* ----- Shelly zásuvky ----- */
.sh-add { display:flex; gap:8px; align-items:center; margin-bottom:18px; flex-wrap:wrap; }
.sh-add input { flex:1; min-width:200px; background:#0f1620; border:1px solid #222b36; color:var(--fg);
                border-radius:9px; padding:9px 12px; font-size:13px; }
.sh-add input:focus { outline:none; border-color:var(--acc); }
.sh-add button { background:var(--acc); color:#1a1200; border:0; border-radius:9px;
                 padding:9px 16px; cursor:pointer; font-size:13px; font-weight:700; white-space:nowrap; }
.sh-add button:hover { filter:brightness(1.06); }
.sh-add-err { color:var(--err); font-size:12.5px; }

.sh-cards { grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:16px; }
.sh-card { position:relative; overflow:hidden; display:flex; flex-direction:column;
           background:linear-gradient(180deg,#1c232d 0%,#161b23 100%);
           border:1px solid #232c38; border-radius:16px; padding:18px 18px 16px;
           box-shadow:0 4px 18px rgba(0,0,0,.28); transition:transform .15s, box-shadow .15s, border-color .15s; }
.sh-card:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.42); border-color:#2f3a48; }
.sh-card.offline { opacity:.6; }
.sh-accent { position:absolute; top:0; left:0; right:0; height:3px; }

.sh-head { display:flex; align-items:center; gap:10px; }
.sh-grip { cursor:grab; color:#3f4855; font-size:15px; line-height:1; letter-spacing:-2px; align-self:flex-start;
           user-select:none; flex-shrink:0; padding-top:2px; touch-action:none; }
.sh-grip:hover { color:var(--muted); }
.sh-grip:active { cursor:grabbing; }
.sh-card.dragging { opacity:.45; outline:2px dashed var(--acc); outline-offset:-2px; }
.sh-ico { width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center;
          font-size:23px; flex-shrink:0; }
.sh-titles { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.sh-name { font-size:15.5px; font-weight:700; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sh-name:hover { color:var(--acc); }
.sh-name-edit { font-size:15.5px; font-weight:700; width:100%; background:#0f1620; border:1px solid var(--acc);
                color:var(--fg); border-radius:7px; padding:3px 7px; outline:none; }
.sh-meta { font-size:11px; color:var(--muted); font-family:ui-monospace,Menlo,Consolas,monospace;
           overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sh-status { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:4px 10px;
             border-radius:20px; background:#222932; color:#5a6470; display:flex; align-items:center; gap:6px; flex-shrink:0; }
.sh-status::before { content:""; width:7px; height:7px; border-radius:50%; background:#5a6470; }
.sh-status.on { background:rgba(63,185,80,.14); color:#5fd07a; }
.sh-status.on::before { background:var(--ok); box-shadow:0 0 7px var(--ok); }
.sh-x { background:none; border:0; color:#3f4855; font-size:13px; cursor:pointer; padding:2px; line-height:1; align-self:flex-start; }
.sh-x:hover { color:var(--err); }

.sh-powerwrap { margin-top:16px; }
.sh-power { font-size:42px; font-weight:800; line-height:1; letter-spacing:-1px; color:var(--fg); }
.sh-power span { font-size:15px; color:var(--muted); font-weight:500; letter-spacing:0; }
.sh-spark { width:100%; height:42px; display:block; margin-top:6px; }
.sh-spark-empty { height:42px; margin-top:6px; }

.sh-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px; margin-bottom:16px; }
.sh-tile { background:#0f1620; border:1px solid #1d2530; border-radius:10px; padding:9px 6px; text-align:center; min-width:0; overflow:hidden; }
.sh-l { font-size:10px; color:var(--muted); margin-bottom:3px; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sh-v { font-size:16px; font-weight:700; white-space:nowrap; }
.sh-v span { font-size:10px; color:var(--muted); font-weight:400; }

.sh-toggle { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto;
             padding:11px 14px; border-radius:12px; background:#0f1620; border:1px solid #222b36;
             cursor:pointer; user-select:none; transition:background .15s, border-color .15s; }
.sh-toggle:hover { border-color:#3a4655; }
.sh-toggle.is-on { background:rgba(63,185,80,.10); border-color:rgba(63,185,80,.32); }
.sh-toggle.disabled { opacity:.45; cursor:default; pointer-events:none; }
.sh-toggle-txt { font-size:13.5px; font-weight:600; color:var(--muted); }
.sh-toggle.is-on .sh-toggle-txt { color:#5fd07a; }
.sw { position:relative; width:52px; height:30px; flex-shrink:0; }
.sw input { position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.sw .knob { position:absolute; inset:0; border-radius:15px; background:#2a3441; transition:background .18s; pointer-events:none; }
.sw .knob::after { content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%;
                   background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.45); transition:transform .18s; }
.sw input:checked + .knob { background:var(--ok); }
.sw input:checked + .knob::after { transform:translateX(22px); }

/* ----- časová osa stavu zásuvky (zap/vyp, 24 h) ----- */
.sh-tl { margin-bottom:16px; }
.sh-tl:last-child { margin-bottom:0; }
.sh-tl-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:5px; }
.sh-tl-name { font-size:13.5px; font-weight:700; }
.sh-tl-pct { font-size:12px; color:var(--muted); }
.sh-tl-bar { position:relative; height:24px; border-radius:6px; background:#0f1620;
             border:1px solid #1d2530; overflow:hidden; }
.sh-tl-on { position:absolute; top:0; bottom:0; background:var(--ok); border-radius:2px; }
.sh-tl-axis { display:flex; justify-content:space-between; margin-top:3px; font-size:10.5px; color:var(--muted); }

/* ----- placeholder (připravované sekce) ----- */
.placeholder { background:var(--card); border:1px dashed #2a3441; border-radius:12px; padding:40px 24px; text-align:center; color:var(--muted); }
.placeholder .pic { font-size:42px; margin-bottom:10px; }
.placeholder h2 { color:var(--fg); margin:0 0 6px; font-size:18px; }

/* ----- energy flow ----- */
.flowbox { background:radial-gradient(circle at 50% 42%, #19222e 0%, #141a22 70%); border:1px solid #222b36;
           border-radius:16px; padding:8px; margin-bottom:22px; }
#flowSvg { width:100%; height:auto; display:block; }
.node-box { fill:#1a2029; stroke:#2b3644; stroke-width:1.5; }
.node-ico { font-size:30px; text-anchor:middle; dominant-baseline:central; }
.node-lbl { font-size:13px; fill:var(--muted); text-anchor:middle; }
.node-val { font-size:22px; font-weight:700; text-anchor:middle; fill:var(--fg); }
.node-sub { font-size:12px; text-anchor:middle; }
.link { stroke-width:3; fill:none; stroke-linecap:round; }
.inv-ring { fill:none; stroke:var(--acc); stroke-width:2; opacity:.55; }
/* blesk v baterii – pulzuje jen při nabíjení (třída se přidává z fve.js) */
#battBolt { opacity:0; }
#battBolt.charging { animation: battpulse 1.1s ease-in-out infinite; }
@keyframes battpulse { 0%,100% { opacity:.3; } 50% { opacity:1; } }

/* ----- gauge (horseshoe) klastry ----- */
.gauges { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin-bottom:22px; }
/* horní řada gaugů (FV celkem / PV1 / PV2 / baterie) – menší mezera k load řadě */
#gaugesTop { margin-bottom:14px; }
.gauge { position:relative; background:var(--card); border:1px solid #222b36; border-radius:14px; padding:6px; aspect-ratio:1/1; }
.gauge svg { width:100%; height:100%; display:block; }
.g-track { fill:none; stroke:#222b36; stroke-width:7; stroke-linecap:round; }
.g-val { fill:none; stroke-width:7; stroke-linecap:round; transition:stroke-dasharray .5s ease, stroke .5s; }
.g-top, .g-main, .g-row, .g-big, .g-name { position:absolute; left:0; right:0; text-align:center; }
.g-top { top:24%; font-size:18px; font-weight:700; color:var(--muted); }
.g-top i { font-style:normal; font-size:10px; }
.g-hline { position:absolute; height:2px; background:var(--muted); opacity:.3; border-radius:2px; }
.g-pre { font-size:9px; color:var(--muted); }
.g-main { top:37%; font-size:27px; font-weight:800; letter-spacing:-.5px; }
.g-unit { font-size:13px; color:var(--muted); font-weight:500; }
.g-row { top:54%; display:flex; justify-content:center; align-items:center; gap:12px; font-size:15px; font-weight:700; }
.g-row i, .g-big i { font-style:normal; font-size:10px; color:var(--muted); font-weight:400; margin-left:1px; }
.g-div { width:1px; height:15px; background:#2a3441; }
.g-big { top:68%; font-size:18px; font-weight:700; }
.g-name { bottom:7%; font-size:12px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.g-corner { position:absolute; top:9%; display:flex; flex-direction:column; gap:1px; }
.g-corner.gl { left:9%; align-items:flex-start; }
.g-corner.gr { right:9%; align-items:flex-end; }
.gc-l { font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; }
.gc-v { font-size:12px; font-weight:600; }

/* ----- denní bilance ----- */
.bgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.btile { background:#0f1620; border:1px solid #222b36; border-radius:10px; padding:12px 14px; display:flex; align-items:center; gap:12px; }
.btile .ic { font-size:24px; line-height:1; }
.btile .bl { font-size:12px; color:var(--muted); margin-bottom:2px; }
.btile .bv { font-size:22px; font-weight:700; }
.btile .bv span { font-size:12px; color:var(--muted); font-weight:400; margin-left:3px; }

/* ----- obecný modal (historie entity) ----- */
.modal { position:fixed; inset:0; z-index:900; display:none; align-items:center; justify-content:center;
  background:rgba(7,11,16,.8); backdrop-filter:blur(3px); padding:16px; }
.modal.show { display:flex; }
.modal-card { background:var(--card); border:1px solid #222b36; border-radius:14px; padding:18px;
  width:min(900px,96vw); max-height:92vh; overflow:auto; box-shadow:0 18px 50px rgba(0,0,0,.55); }
.modal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.modal-title { font-size:15px; font-weight:700; font-family:ui-monospace,Menlo,Consolas,monospace; color:var(--acc);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.modal-htext { min-width:0; }
.modal-sub { font-size:12px; color:var(--muted); margin-top:3px; line-height:1.35; max-width:620px; }
.modal-x { background:none; border:1px solid #2a3441; color:var(--muted); border-radius:8px;
  width:32px; height:32px; cursor:pointer; flex-shrink:0; }
.modal-x:hover { color:var(--fg); border-color:#3a4655; }
.ent { cursor:pointer; }

/* ----- klikací entity na FVE (uzly diagramu / gauge / karty / bilance) ----- */
#flowSvg .node { cursor:pointer; }
#flowSvg .node:hover .node-box { stroke:var(--acc); stroke-width:2; }
.gauge.clk, .card.clk, .btile.clk { cursor:pointer; transition:border-color .15s, background .15s; }
.gauge.clk:hover, .card.clk:hover, .btile.clk:hover { border-color:var(--acc); }
.btile.clk:hover { background:#13202b; }

/* ----- login modal ----- */
#loginOverlay { position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center;
  background:rgba(7,11,16,.92); backdrop-filter:blur(4px); }
#loginOverlay.show { display:flex; }
.login-card { width:min(360px,92vw); background:var(--card); border:1px solid #222b36; border-radius:16px;
  padding:30px 28px; box-shadow:0 18px 50px rgba(0,0,0,.55); }
.login-card h2 { margin:0 0 4px; font-size:20px; }
.login-card p.sub { margin:0 0 22px; color:var(--muted); font-size:13px; }
.login-card label { display:block; font-size:12px; color:var(--muted); margin:14px 0 5px; }
.login-card input { width:100%; background:#0f1620; border:1px solid #2a3441; border-radius:9px; color:var(--fg);
  padding:11px 12px; font-size:15px; outline:none; }
.login-card input:focus { border-color:var(--acc); }
.login-card button { width:100%; margin-top:22px; background:var(--acc); color:#1a1200; border:0; border-radius:9px;
  padding:12px; font-size:15px; font-weight:700; cursor:pointer; }
.login-card button:disabled { opacity:.6; cursor:default; }
.login-err { margin-top:14px; color:var(--err); font-size:13px; min-height:16px; text-align:center; }
header .logout { background:none; border:1px solid #2a3441; color:var(--muted); border-radius:8px;
  padding:6px 12px; font-size:13px; cursor:pointer; }
header .logout:hover { color:var(--fg); border-color:#3a4655; }

/* ===== Mobil / PWA (přepisuje dřívější mobilní pravidla – musí být na konci) ===== */
@media (max-width:760px){
  /* blok místo flexu: jinak se main (flex:1) ve sloupci neroztáhne na šířku */
  .layout { display:block; }
  main { width:100%; max-width:none; }
  /* boční menu -> spodní tab bar (iOS styl) */
  .sidebar { position:fixed; left:0; right:0; bottom:0; top:auto; width:100%; max-height:none; overflow:visible;
             padding:0; z-index:100; border:none; border-top:1px solid #222b36;
             background:rgba(15,20,25,.96); backdrop-filter:blur(10px);
             padding-bottom:env(safe-area-inset-bottom); }
  .nav { flex-direction:row; flex-wrap:nowrap; gap:0; }
  .navitem { flex:1; flex-direction:column; align-items:center; justify-content:center; gap:3px;
             padding:8px 2px 6px; border-radius:0; color:var(--muted); min-width:0; }
  .navitem:not(.disabled):not(.active):hover { background:none; }
  .navitem.active { background:none; color:var(--acc); font-weight:600; }
  .navitem.disabled { color:#3a434e; }
  .ni-ico { font-size:21px; line-height:1; }
  .ni-lbl { font-size:10px; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
  .navitem .soon { display:none; }
  /* obsah ať nemizí pod spodním barem; menší boční padding = blíž k okrajům */
  main { padding:14px 12px calc(72px + env(safe-area-inset-bottom)); }

  /* Zásuvky: karty pod sebe přes celou šířku (NEbrat FVE pravidlem níže) */
  .sh-cards { grid-template-columns:1fr; }
  /* FVE: úzké hodnotové boxy 2–3 vedle sebe místo jednoho širokého */
  .cards:not(.sh-cards) { grid-template-columns:repeat(auto-fit,minmax(108px,1fr)); gap:10px; }
  .card { padding:13px 12px; }
  .card .value { font-size:23px; }
  .bgrid { grid-template-columns:repeat(auto-fit,minmax(104px,1fr)); gap:8px; }
  .btile { padding:10px 12px; gap:10px; }
  .btile .bv { font-size:18px; }
  header h1 { font-size:16px; }

  /* větší dotyková políčka + iOS nezoomuje při focusu (musí být ≥16px) */
  input, .login-card input, #entFilter, .sh-add input { font-size:16px; }
  /* Přepínače: karty pod sebe přes celou šířku */
  .ctl-cards { grid-template-columns:1fr; }
}

/* ===== Přepínače (ovládání střídače) + Automatizace ===== */
/* segmentové přepínače (mód / spouštěč / cíl akce) */
.seg { display:flex; flex-wrap:wrap; gap:6px; }
.seg-btn { background:#0f1620; color:var(--fg); border:1px solid #2a3441; border-radius:9px;
  padding:8px 14px; font-size:13.5px; cursor:pointer; font-family:inherit; }
.seg-btn:hover { border-color:#3a4655; }
.seg-btn.active { background:var(--acc); color:#1a1200; border-color:var(--acc); font-weight:700; }

.btn-apply { background:var(--acc); color:#1a1200; border:0; border-radius:9px; padding:9px 16px;
  font-size:13.5px; font-weight:700; cursor:pointer; font-family:inherit; }
.btn-apply:hover { filter:brightness(1.06); }
.btn-ghost { background:none; color:var(--muted); border:1px solid #2a3441; border-radius:9px;
  padding:9px 16px; font-size:13.5px; cursor:pointer; font-family:inherit; }
.btn-ghost:hover { color:var(--fg); border-color:#3a4655; }

.ctl-warn { background:#3d2b00; border:1px solid var(--acc); color:#ffd479; padding:9px 13px;
  border-radius:8px; font-size:13px; margin:0 0 16px; }
.ctl-quick { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 18px; }
.qa { background:#0f1620; color:var(--fg); border:1px solid #2a3441; border-radius:10px;
  padding:11px 16px; font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; }
.qa:hover { border-color:#3a4655; }
.qa-charge { border-color:#3fb95066; color:#7ee2a0; }
.qa-charge:hover { background:#10241a; }
.qa-discharge { border-color:#f5a62366; color:#ffce7a; }
.qa-discharge:hover { background:#241c05; }
.seg-btn.danger { border-color:#f8514955; color:#ff9b94; }
.seg-btn.danger.active { background:var(--err); color:#fff; border-color:var(--err); }
.ctl-cards { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.ctl-card { display:flex; flex-direction:column; gap:12px; }
.ctl-h { display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600; }
.ctl-ico { font-size:18px; }
.ctl-now { margin-left:auto; font-size:12px; color:var(--acc); font-weight:700;
  font-family:ui-monospace,Menlo,Consolas,monospace; }
.ctl-eco { display:flex; flex-direction:column; gap:8px; border-top:1px solid #222b36; padding-top:10px; }
.ctl-eco label { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); }
.ctl-eco input[type=range] { flex:1; }
.ctl-eco output { min-width:54px; text-align:right; color:var(--fg); font-weight:600; }
.ctl-row { display:flex; align-items:center; gap:10px; }
.ctl-row input[type=number] { width:120px; background:#0f1620; border:1px solid #2a3441; color:var(--fg);
  border-radius:8px; padding:8px 10px; font-size:14px; }
.ctl-row input[type=range] { flex:1; }
.ctl-row output { min-width:48px; text-align:right; font-weight:600; }
.ctl-unit { color:var(--muted); font-size:13px; }
.ctl-hint { font-size:12px; color:var(--muted); margin:0; }

/* ===== Synology NAS ===== */
.nas-ip { font-size:11px; color:var(--muted); font-family:ui-monospace,Menlo,Consolas,monospace; font-weight:400; }
.nas-dstatus { font-size:12px; margin-top:6px; font-weight:600; }
.nas-vols { display:flex; flex-direction:column; gap:12px; margin-bottom:22px; }
.nas-vol { background:var(--card); border:1px solid #222b36; border-radius:12px; padding:14px 16px; }
.nas-vol-head { display:flex; justify-content:space-between; gap:10px; font-size:13px; margin-bottom:8px; }
.nas-vol-num { color:var(--muted); font-family:ui-monospace,Menlo,Consolas,monospace; }
.nas-bar { height:10px; background:#0f1620; border-radius:6px; overflow:hidden; }
.nas-bar-fill { height:100%; border-radius:6px; transition:width .4s; }
.nas-net-row { display:flex; justify-content:space-between; gap:10px; font-size:20px; font-weight:700; margin-top:2px; }
.nas-net-row .unit { font-size:12px; color:var(--muted); font-weight:400; margin-left:2px; }
/* ASUS router – seznam klientů */
.asus-clients { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:8px; margin-bottom:22px; }
.asus-cl { background:var(--card); border:1px solid #222b36; border-radius:10px; padding:9px 12px;
  display:flex; flex-direction:column; gap:2px; min-width:0; }
.asus-cl-name { font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.asus-cl-meta { font-size:11px; color:var(--muted); font-family:ui-monospace,Menlo,Consolas,monospace;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Škoda – ovládání intervalu */
.car-ctl { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 16px; font-size:13px; color:var(--muted); }
.car-ctl select { background:#0f1620; border:1px solid #2a3441; color:var(--fg); border-radius:8px;
  padding:7px 10px; font-size:14px; margin-left:6px; }
.car-ctl-msg { color:var(--ok); font-size:12.5px; }
/* ovládání NASu */
.nas-ctl-sec { margin-bottom:18px; }
.nas-ctl-h { font-size:13px; color:var(--muted); font-weight:600; margin:0 0 8px; }
.nas-ctl-list { display:flex; flex-direction:column; gap:8px; }
.nas-ctl-row { display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid #222b36;
  border-radius:10px; padding:10px 14px; }
.nas-ctl-name { flex:1; min-width:0; font-size:14px; font-weight:600; }
.nas-cstate, .nas-off { font-size:11px; font-weight:400; font-style:normal; }
.nas-off { color:var(--muted); }
.nas-ctl-btns { display:flex; gap:8px; flex-shrink:0; }
.nas-reboot { border-color:#f8514955; color:#ff9b94; }
.nas-reboot:hover { background:#241010; }

/* ----- ČEZ stránka ----- */
.cez-updated { color:var(--muted); font-size:13px; margin-right:auto; }
.cez-info { display:flex; gap:14px; align-items:stretch; flex-wrap:wrap; margin-bottom:22px; }
.cez-cards-mini { flex:1 1 420px; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin-bottom:0; }
.cez-cards-mini .card { padding:9px 12px; display:flex; flex-direction:column; justify-content:center; }
.cez-cards-mini .card .label { font-size:11px; margin-bottom:3px; }
.cez-cards-mini .card .value { font-size:18px; }
.cez-ean { flex:0 1 300px; display:flex; flex-direction:column; justify-content:center; }
.cez-ean .label { font-size:13px; color:var(--muted); margin-bottom:8px; }
.cez-ean-row { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:17px; font-weight:600; line-height:1.7; display:flex; align-items:center; }
.cez-arr { font-weight:800; font-size:18px; margin-right:9px; width:1em; text-align:center; flex-shrink:0; }
.cez-arr.up { color:#3fb950; }
.cez-arr.dn { color:#f85149; }
.cez-chip { display:inline-block; font-size:12px; font-weight:600; padding:3px 11px; border-radius:20px; vertical-align:middle; margin-left:10px; white-space:nowrap; }
.cez-chip.ok { background:#10241a; border:1px solid #1f6f3f; color:#7fe0a0; }
.cez-chip.warn { background:#2a1d10; border:1px solid #7a5a1a; color:#ffcf8f; white-space:normal; }

/* ----- LG ovládání ----- */
.lg-ctl { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:10px; }
.lg-step { display:flex; align-items:center; gap:9px; background:var(--card); border:1px solid #222b36; border-radius:10px; padding:6px 12px; }
.lg-step-l { font-size:13px; color:var(--muted); margin-right:2px; }
.lg-step-b { width:30px; height:30px; border-radius:8px; border:1px solid #2a3441; background:#0f1620; color:var(--fg); font-size:18px; line-height:1; cursor:pointer; }
.lg-step-b:hover:not(:disabled) { border-color:var(--acc); }
.lg-step-b:disabled { opacity:.35; cursor:default; }
.lg-step-v { font-size:16px; font-weight:700; min-width:56px; text-align:center; }
.cez-om { margin-bottom:30px; }
.cez-sub { margin:18px 0 8px; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
.cez-tariff { border-radius:14px; padding:15px 18px; border:1px solid #222b36; background:var(--card); }
.cez-tariff.nt { border-color:#1f6f3f; background:linear-gradient(180deg,#10241a,#0f1620); }
.cez-tariff.vt { border-color:#7a5a1a; background:linear-gradient(180deg,#251c08,#0f1620); }
.cez-t-state { font-size:22px; font-weight:800; }
.cez-tariff.nt .cez-t-state b { color:var(--ok); }
.cez-tariff.vt .cez-t-state b { color:#f5a623; }
.cez-t-next { margin-top:4px; color:var(--muted); font-size:14px; }
.cez-t-next b { color:var(--fg); font-weight:700; }
.cez-tl { position:relative; height:24px; background:#0f1620; border:1px solid #222b36; border-radius:7px; overflow:hidden; }
.cez-tl-nt { position:absolute; top:0; bottom:0; background:#3fb95055; border-left:1px solid #3fb95088; border-right:1px solid #3fb95088; }
.cez-tl-now { position:absolute; top:-2px; bottom:-2px; width:2px; background:#fff; box-shadow:0 0 5px #fff; }
.cez-tl-axis { position:relative; height:14px; margin-top:1px; }
.cez-tl-h { position:absolute; transform:translateX(-50%); font-size:10px; color:var(--muted); }
.cez-tl-h:first-child { transform:none; }
.cez-tl-h:last-child { transform:translateX(-100%); }
.cez-det { margin-top:8px; }
.cez-det summary { cursor:pointer; color:var(--acc); font-size:13px; padding:6px 0; }
.cez-tbl { width:100%; border-collapse:collapse; font-size:13px; margin-top:6px; }
.cez-tbl th { text-align:right; color:var(--muted); font-weight:600; padding:5px 8px; border-bottom:1px solid #222b36; }
.cez-tbl th:first-child { text-align:left; }
.cez-tbl td { text-align:right; padding:4px 8px; border-bottom:1px solid #161c24; }
.cez-tbl td:first-child { text-align:left; }
.cez-d { color:var(--muted); }
.cez-week td { text-align:left; }
.cez-day { font-weight:700; width:90px; }
.cez-date { color:var(--muted); width:105px; }
.cez-win { display:inline-block; background:#10241a; border:1px solid #1f6f3f; color:#7fe0a0; border-radius:6px; padding:1px 7px; font-size:12px; margin:1px 0; }
.cez-ok { color:var(--ok); font-size:14px; padding:4px 0; }