/* EMS 2.0 – vzhled. Barvy energie: slunce (amber), baterie (zelenomodrá), síť (indigo). */
@font-face { font-family: "Instrument Sans"; font-weight: 400; font-display: swap;
  src: url(vendor/fonts/instrument-sans-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: "Instrument Sans"; font-weight: 400; font-display: swap;
  src: url(vendor/fonts/instrument-sans-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2190-21FF, U+2212; }
@font-face { font-family: "Instrument Sans"; font-weight: 500; font-display: swap;
  src: url(vendor/fonts/instrument-sans-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: "Instrument Sans"; font-weight: 500; font-display: swap;
  src: url(vendor/fonts/instrument-sans-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2190-21FF, U+2212; }
@font-face { font-family: "Instrument Sans"; font-weight: 600; font-display: swap;
  src: url(vendor/fonts/instrument-sans-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: "Instrument Sans"; font-weight: 600; font-display: swap;
  src: url(vendor/fonts/instrument-sans-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2190-21FF, U+2212; }
@font-face { font-family: "Instrument Sans"; font-weight: 700; font-display: swap;
  src: url(vendor/fonts/instrument-sans-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: "Instrument Sans"; font-weight: 700; font-display: swap;
  src: url(vendor/fonts/instrument-sans-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2190-21FF, U+2212; }

:root {
  --paper: #eaeef2; --surface: #ffffff; --raised: #f5f7f9; --ink: #15212c; --muted: #5b6b78; --faint: #8796a2;
  --line: #d6dde4; --focus: #4f5bd5;
  --sun: #e9a100; --sun-soft: #fbefcc; --batt: #0f9d74; --batt-soft: #d3f0e6; --grid: #4f5bd5; --grid-soft: #e1e4fb;
  --vt: #d9452b; --vt-soft: #f8ddd7; --soc: #7b5cf0; --export: #23a15a; --ok: #0f9d74; --warn: #b26a00; --bad: #c4321d;
  --m-self_use: #9aaab6; --m-hold: #e3b341; --m-charge: #4f5bd5; --m-sell: #d9452b; --m-pv_export: #e9a100; --m-no_export: #5b6b78;
  --r-lg: 18px; --r: 12px; --r-sm: 8px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0e151c; --surface: #16212b; --raised: #1b2833; --ink: #e7eef3; --muted: #9aabb8; --faint: #6e808e;
    --line: #26343f; --focus: #8f98ff;
    --sun-soft: #3a2f10; --soc: #9d86ff; --export: #3cc276; --batt-soft: #0f3a2e; --grid-soft: #222852; --vt-soft: #4a2018;
    --m-self_use: #6e808e; --m-no_export: #9aabb8;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink);
  font: 15px/1.5 "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; font-feature-settings: "tnum" 1; }
a { color: var(--grid); text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
h1 { font-size: 26px; line-height: 1.2; font-weight: 650; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: 17px; line-height: 1.3; font-weight: 600; margin: 0 0 12px; }
p { margin: 0 0 10px; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; }

/* ── rozvržení: boční panel + obsah ─────────────────────── */
.shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; padding: 22px 14px; display: flex; flex-direction: column; gap: 18px;
  border-right: 1px solid var(--line); background: var(--surface); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 700;
  font-size: 18px; padding: 0 8px; }
.brand-mark { width: 26px; height: 26px; border-radius: 7px; position: relative;
  background: conic-gradient(from 200deg, var(--sun), var(--batt), var(--grid), var(--sun)); }
.brand-mark::after { content: ""; position: absolute; inset: 6px; border-radius: 3px; background: var(--surface); }
.side-site { padding: 10px 10px; border-radius: var(--r); background: var(--raised); }
.side-site strong { display: block; font-size: 14px; line-height: 1.3; }
.side-site .chip { margin-top: 6px; }
.side nav { display: flex; flex-direction: column; gap: 2px; }
.side nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm);
  text-decoration: none; color: var(--muted); font-weight: 500; }
.side nav a svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; }
.side nav a:hover { color: var(--ink); background: var(--raised); }
.side nav a.on { color: var(--ink); background: var(--raised); box-shadow: inset 3px 0 0 var(--batt); }
.side .nav-sep { height: 1px; background: var(--line); margin: 8px 6px; }
.side-foot { margin-top: auto; font-size: 13px; color: var(--muted); padding: 0 8px; }
.side-foot form { margin-top: 6px; }
.main { min-width: 0; padding: 26px 32px 40px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head .sub { color: var(--muted); margin-top: 4px; }
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { min-width: 0; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px;
    padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .side-site { display: none; }
  .side nav { flex-direction: row; overflow-x: auto; flex-basis: 100%; min-width: 0; max-width: 100%; order: 3; gap: 4px; scrollbar-width: none; }
  .side nav a { white-space: nowrap; padding: 6px 10px; }
  .side nav a.on { box-shadow: inset 0 -2px 0 var(--batt); }
  .side .nav-sep { display: none; }
  .side-foot { margin: 0 0 0 auto; display: flex; gap: 8px; align-items: center; }
  .side-foot form { margin: 0; }
  .side-foot .who { display: none; }
  .main { padding: 18px 16px 32px; }
}

/* ── základní prvky ──────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; margin-bottom: 16px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 99px; font-size: 13px;
  font-weight: 500; background: var(--raised); color: var(--muted); white-space: nowrap; }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip.pending { background: var(--sun-soft); color: var(--warn); }
.chip.shadow { background: var(--grid-soft); color: var(--grid); }
.chip.control { background: var(--batt-soft); color: var(--batt); }
.chip.disabled { color: var(--faint); }
.alert { padding: 11px 14px; border-radius: var(--r-sm); margin-bottom: 14px; border: 1px solid var(--line); background: var(--surface); }
.alert.bad { border-color: var(--bad); color: var(--bad); background: var(--vt-soft); }
.alert.ok { border-color: var(--ok); color: var(--ok); background: var(--batt-soft); }
.alert.warn { border-color: var(--warn); color: var(--warn); background: var(--sun-soft); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 500; font-size: 13px; }
td.r, th.r { text-align: right; }
tr:last-child td { border-bottom: 0; }
.table-scroll { overflow-x: auto; }
form.stack label { display: block; margin: 12px 0 5px; font-weight: 500; font-size: 14px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--raised);
  color: var(--ink); font: inherit; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--focus); outline-offset: -1px; background: var(--surface); }
textarea { font-family: ui-monospace, Menlo, monospace; font-size: 13px; line-height: 1.45; }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.row label { margin-top: 6px !important; }
button, .btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; border-radius: var(--r-sm);
  padding: 8px 15px; background: var(--ink); color: var(--surface); font: inherit; font-weight: 600; cursor: pointer;
  text-decoration: none; line-height: 1.3; }
button:hover, .btn:hover { opacity: .88; }
button:disabled { opacity: .45; cursor: not-allowed; }
button.ghost, .btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
button.ghost:hover, .btn.ghost:hover { background: var(--raised); opacity: 1; }
button.danger { background: var(--bad); color: #fff; }
button.small, .btn.small { padding: 4px 10px; font-size: 13px; }
.inline { display: inline; }
.toggle { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.toggle:last-child { border-bottom: 0; }
.toggle input { width: 18px; height: 18px; accent-color: var(--batt); }
.token { font-size: 15px; padding: 12px; background: var(--raised); border-radius: var(--r-sm); word-break: break-all; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-top: 10px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.mode { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: 0; }
.m-self_use { background: var(--m-self_use); } .m-hold { background: var(--m-hold); } .m-charge { background: var(--m-charge); }
.m-sell { background: var(--m-sell); } .m-pv_export { background: var(--m-pv_export); } .m-no_export { background: var(--m-no_export); }
.check { padding-left: 0; margin: 0; } .check li { list-style: none; margin: 6px 0; display: flex; gap: 8px; }
.check .y::before { content: "✓"; color: var(--ok); font-weight: 700; width: 16px; }
.check .n::before { content: "○"; color: var(--warn); font-weight: 700; width: 16px; }
.narrow { max-width: 440px; margin: 8vh auto; }
.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.auth-shell .brand { justify-content: center; margin-bottom: 18px; }

/* ── přehled: tok energie ───────────────────────────────── */
.hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
@media (max-width: 1000px) { .hero { grid-template-columns: 1fr; } }
.flow { position: relative; display: flex; flex-direction: column; justify-content: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px 10px; }
.flow svg { width: 100%; height: auto; display: block; }
.flow .node-label { fill: var(--muted); font-size: 13px; }
.flow .node-value { fill: var(--ink); font-size: 21px; font-weight: 650; }
.flow .node-sub { fill: var(--muted); font-size: 12.5px; }
.flow .wire { fill: none; stroke: var(--line); stroke-width: 3; stroke-linecap: round; }
.flow .pulse { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 2 14; opacity: 0;
  transition: opacity .4s; animation: run 1.1s linear infinite; }
.flow .pulse.on { opacity: 1; }
.flow .pulse.rev { animation-direction: reverse; }
@keyframes run { to { stroke-dashoffset: -32; } }
/* animace toku jsou informace (směr energie), proto běží i při omezených animacích systému, jen pomaleji */
@media (prefers-reduced-motion: reduce) { .flow .pulse { animation-duration: 2.4s !important; } }
.flow .node .ripple { opacity: 0; transform-box: fill-box; transform-origin: center; }
.flow .node.on .ripple { animation: ripple 2.2s ease-out infinite; }
@keyframes ripple { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.45); } }
.flow .rays { transform-box: view-box; transform-origin: 280px 56px; }
.flow #n-pv.on .rays { animation: spin 14s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.flow .batt-arrow { fill: var(--batt); font-size: 15px; font-weight: 700; }
.flow .batt-arrow.up { animation: bob 1.2s ease-in-out infinite; }
.flow .batt-arrow.down { animation: bob 1.2s ease-in-out infinite reverse; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.flow .ring-bg { fill: none; stroke: var(--raised); stroke-width: 7; }
.flow .ring { fill: none; stroke: var(--batt); stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset .8s; }
@media (max-width: 600px) { .flow .node-label { font-size: 16px; } .flow .node-value { font-size: 26px; } .flow .node-sub { font-size: 17px; } }
.flow-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--muted); padding: 2px 4px 4px; }
.stale { color: var(--warn); }

.now { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; display: flex; flex-direction: column; }
.now-mode { display: flex; align-items: center; gap: 12px; margin: 4px 0 6px; }
.now-mode .dot { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.now-mode strong { font-size: 28px; line-height: 1.15; font-weight: 650; letter-spacing: -0.01em; }
.now-reason { color: var(--muted); margin-bottom: 14px; }
.prices { display: flex; gap: 22px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.prices div { display: flex; flex-direction: column; }
.prices b { font-size: 20px; font-weight: 650; }
.prices span { font-size: 13px; color: var(--muted); }
.timeline { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; }
.timeline li { display: grid; grid-template-columns: 62px 12px 1fr; gap: 10px; align-items: start; padding: 6px 0; }
.timeline time { font-weight: 600; text-align: right; }
.timeline time small { display: block; font-weight: 400; color: var(--faint); font-size: 12px; }
.timeline .tl-dot { width: 10px; height: 10px; border-radius: 3px; margin-top: 6px; }
.timeline .tl-text b { font-weight: 600; }
.timeline .tl-text span { display: block; color: var(--muted); font-size: 13px; }

.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); margin-bottom: 16px; }
.kpis > div { padding: 14px 18px; border-left: 1px solid var(--line); }
.kpis > div:first-child { border-left: 0; }
.kpis b { display: block; font-size: 24px; font-weight: 650; line-height: 1.2; letter-spacing: -0.01em; }
.kpis b small { font-size: 14px; font-weight: 500; color: var(--muted); margin-left: 3px; }
.kpis span { font-size: 13px; color: var(--muted); }
.kpis .good b { color: var(--batt); }
@media (max-width: 900px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis > div { border-left: 0; border-top: 1px solid var(--line); } .kpis > div:nth-child(-n+2) { border-top: 0; }
  .kpis > div:nth-child(even) { border-left: 1px solid var(--line); } }

.chart-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; margin-bottom: 16px; }
.chart-card header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.chart-card header h2 { margin: 0; }
.chart-wrap { position: relative; height: 300px; }
.chart-wrap.tall { height: 360px; }
.chart-wrap.short { height: 220px; }
.modeband { display: flex; height: 24px; border-radius: 5px; overflow: hidden; margin-top: 4px; }
.modeband i { position: relative; min-width: 0; overflow: hidden; display: flex; align-items: center; justify-content: center;
  border-right: 1px solid var(--surface); font-style: normal; }
.modeband i:last-child { border-right: 0; }
.modeband i.past { opacity: .35; }
.m-none { background: var(--raised); }
.modeband span { font-size: 11.5px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; }
.band-label { font-size: 13px; color: var(--muted); margin-top: 12px; }
.empty { padding: 36px 12px; text-align: center; color: var(--muted); }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1000px) { .two { grid-template-columns: 1fr; } }

/* ── statistiky ─────────────────────────────────────────── */
.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 3px; }
.seg a { padding: 5px 12px; border-radius: 6px; text-decoration: none; color: var(--muted); font-weight: 500; font-size: 14px; }
.seg a.on { background: var(--ink); color: var(--surface); }
.period-nav { display: flex; align-items: center; gap: 10px; }
.period-nav h1 { min-width: 0; }
.period-nav a { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: var(--ink); font-size: 18px; }
.period-nav a.off { opacity: .35; pointer-events: none; }

/* ── admin ──────────────────────────────────────────────── */
.sites { display: flex; flex-direction: column; gap: 10px; }
.site-row { display: grid; grid-template-columns: minmax(180px, 1.4fr) 110px minmax(120px, 1fr) minmax(130px, 1fr) auto;
  gap: 16px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; }
.site-row .name a { font-weight: 600; color: var(--ink); text-decoration: none; }
.site-row .name small { display: block; color: var(--muted); }
.site-row .soc { display: flex; flex-direction: column; gap: 4px; }
.site-row .socbar { height: 6px; border-radius: 3px; background: var(--raised); overflow: hidden; }
.site-row .socbar i { display: block; height: 100%; background: var(--batt); }
.site-row svg.spark { width: 100%; height: 34px; }
.site-row .acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.online { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); margin-right: 6px; }
.online.on { background: var(--ok); box-shadow: 0 0 0 3px var(--batt-soft); }
details.row-more summary { cursor: pointer; list-style: none; }
details.row-more summary::-webkit-details-marker { display: none; }
details.row-more[open] .menu { display: flex; }
.menu { display: none; flex-direction: column; gap: 4px; position: absolute; right: 0; top: 100%; margin-top: 4px; z-index: 5;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px; min-width: 180px; }
.menu button { width: 100%; justify-content: flex-start; }
.rel { position: relative; }
@media (max-width: 900px) { .site-row { grid-template-columns: 1fr 1fr; } .site-row .name { grid-column: 1 / -1; }
  .site-row .acts { grid-column: 1 / -1; justify-content: flex-start; } }
footer.foot { color: var(--faint); font-size: 12px; padding-top: 24px; }

.main > h1 { margin-bottom: 18px; }

/* ── tarif, srovnání, ideál ─────────────────────────────── */
.tariff-strip { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: baseline; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r); padding: 12px 18px; margin-bottom: 16px; font-size: 14px; }
.tariff-strip > div { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; min-width: 0; }
.tariff-strip .tk { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); font-weight: 600; }
.tariff-strip b.sell { color: var(--export); }
.tariff-strip .tlink { margin-left: auto; font-size: 13px; }
.kind { display: inline-block; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 99px; background: var(--raised); }
.k-fix { color: var(--ink); }
.k-dynamic { color: var(--grid); }
.k-spot { color: var(--warn); }
.kind.k-dynamic { background: var(--grid-soft); }
.kind.k-spot { background: var(--sun-soft); }
.sub.tline a { color: var(--muted); text-decoration: none; }
.sub.tline a:hover b { text-decoration: underline; }
.sec-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.sec-head h2 { margin: 0; }
.sec-head .muted { font-size: 13px; }
table.cmp td:first-child { white-space: nowrap; }
table.cmp td.r, table.cmp th.r { white-space: nowrap; font-variant-numeric: tabular-nums; }
table.cmp th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
table.cmp.three th.r, table.cmp.three td.r { width: 24%; }
table.cmp .own { background: color-mix(in srgb, var(--grid-soft) 45%, transparent); }
table.cmp tr.sub td { color: var(--muted); font-size: 13px; }
table.cmp tr.sell td:first-child { color: var(--export); }
table.cmp tr.ideal td:first-child { color: var(--batt); }
table.cmp tr.total td { font-weight: 650; border-top: 1px solid var(--muted); background: var(--raised); }
table.cmp tr.total td.own { background: color-mix(in srgb, var(--grid-soft) 70%, var(--raised)); }
table.cmp tr.gap td { font-weight: 650; color: var(--soc); background: color-mix(in srgb, var(--soc) 10%, transparent); }
.good { color: var(--ok); }
.bad { color: var(--bad); }
.note { font-size: 12.5px; margin: 10px 0 0; }
.minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.minis figure { margin: 0; min-width: 0; }
.minis figcaption { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.mini-wrap { position: relative; height: 150px; }
.legend i.dash { width: 14px; height: 0; border-top: 2px dashed; border-radius: 0; vertical-align: 3px; background: none; }
.when { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.when > div { min-width: 0; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px 8px; }
.when > div.own { border-color: var(--grid); }
.when table { font-size: 13.5px; }
.when th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.when td.r { font-variant-numeric: tabular-nums; }
.when tr.grp td { font-weight: 600; color: var(--grid); border-bottom: 0; padding-top: 10px; }
.when tr.grp.sell td { color: var(--export); }
@media (max-width: 900px) { .minis, .when { grid-template-columns: 1fr; } .tariff-strip .tlink { margin-left: 0; } }
.when th.r { text-transform: none; letter-spacing: 0; }

/* ── odhad spotřeby (Nastavení) ─────────────────────────── */
.choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
label.radio { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 12px 14px; cursor: pointer; font-weight: 400; }
label.radio:has(input:checked) { border-color: var(--grid); background: color-mix(in srgb, var(--grid-soft) 50%, transparent); }
label.radio input { margin-top: 3px; accent-color: var(--grid); }
.load-state { margin-top: 12px; font-size: 14px; }
.load-state p { margin: 6px 0; }
.warn-text { color: var(--warn); }
@media (max-width: 700px) { .choice { grid-template-columns: 1fr; } }
#spotreba select { max-width: 220px; }

/* ── model spotřeby ─────────────────────────────────────── */
.model-state { margin-top: 14px; font-size: 14px; }
.model-state h3 { font-size: 14px; margin: 14px 0 8px; }
.pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 99px; margin-right: 6px;
  background: var(--raised); color: var(--muted); }
.pill.ok { background: var(--batt-soft); color: var(--batt); }
.pill.warn { background: var(--sun-soft); color: var(--warn); }
.pill.bad { background: var(--vt-soft); color: var(--bad); }
.mkpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.mkpis > div { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; }
.mkpis b { display: block; font-size: 20px; font-weight: 650; }
.mkpis b small { font-size: 13px; color: var(--muted); font-weight: 500; margin-left: 3px; }
.mkpis span { font-size: 12.5px; color: var(--muted); }
.mkpis .good b { color: var(--ok); }
.mkpis .bad b { color: var(--bad); }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.ibar { display: grid; grid-template-columns: minmax(120px, 190px) 1fr 44px; gap: 8px; align-items: center; margin: 5px 0; font-size: 13.5px; }
.ibar i { display: block; height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--grid) var(--w), var(--raised) var(--w)); }
.ibar b { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
table.cmp.small td, table.cmp.small th { padding: 5px 8px; }
td.good { color: var(--ok); font-weight: 600; }
@media (max-width: 800px) { .mkpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .two-col { grid-template-columns: 1fr; } }
table.cmp tr.win td { font-weight: 600; }

/* ── Přehled: dnešní skutečnost ─────────────────────────── */
.prices { flex-wrap: wrap; gap: 14px 22px; }
.today { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; margin-bottom: 16px; }
.today header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.today header h2 { margin: 0; }
.today header .muted { font-size: 13px; }
.tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.tile { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px;
  border-top: 3px solid var(--line); min-width: 0; }
.tile .tl { font-size: 13px; color: var(--muted); font-weight: 500; }
.tile b { font-size: 24px; font-weight: 650; line-height: 1.2; }
.tile b small { font-size: 14px; font-weight: 500; color: var(--muted); margin-left: 3px; }
.tile .ts { font-size: 12.5px; color: var(--muted); }
.t-pv { border-top-color: var(--sun); } .t-pv b { color: var(--sun); }
.t-load { border-top-color: var(--ink); }
.t-imp { border-top-color: var(--grid); } .t-imp b { color: var(--grid); }
.t-exp { border-top-color: var(--export); } .t-exp b { color: var(--export); }
.t-batt { border-top-color: var(--soc); } .t-batt b { color: var(--soc); }
.t-batt .tb { display: flex; justify-content: space-between; align-items: stretch; gap: 10px; }
.socbar { position: relative; width: 14px; min-height: 46px; border-radius: 4px; background: var(--raised); overflow: hidden; flex: none; }
.socbar i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--soc); border-radius: 4px; }
.socbar em { position: absolute; left: -2px; right: -2px; height: 2px; background: var(--bad); }
.kpis.three { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 0; }
@media (max-width: 1000px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .t-batt { grid-column: 1 / -1; } }
@media (max-width: 900px) { .kpis.three { grid-template-columns: 1fr; } .kpis.three > div { border-left: 0 !important; border-top: 1px solid var(--line); }
  .kpis.three > div:first-child { border-top: 0; } }

/* ── plán po hodinách + ruční úpravy ────────────────────── */
table.hours td { vertical-align: middle; font-variant-numeric: tabular-nums; }
table.hours th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; white-space: nowrap; }
table.hours .hr-t b { display: block; font-size: 15px; }
table.hours .hr-t small { color: var(--muted); font-size: 12px; }
table.hours .hr-why { font-size: 12px; color: var(--muted); margin-top: 2px; max-width: 360px; }
table.hours tr.is-now { background: color-mix(in srgb, var(--grid-soft) 35%, transparent); }
table.hours tr.is-manual td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.nowrap { white-space: nowrap; }
.socmini { display: inline-block; width: 34px; height: 7px; border-radius: 4px; background: var(--raised); vertical-align: middle; overflow: hidden; }
.socmini i { display: block; height: 100%; background: var(--soc); }
.mchip { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: var(--sun-soft); color: var(--warn); vertical-align: 1px; }
.chip.vtchip { color: var(--vt); background: var(--vt-soft); font-size: 11px; padding: 0 7px; }
.chip.vtchip::before { display: none; }
button.pen { background: var(--raised); color: var(--ink); border: 1px solid var(--line); width: 34px; height: 34px; padding: 0;
  border-radius: 8px; font-size: 16px; cursor: pointer; }
button.pen:hover { border-color: var(--grid); color: var(--grid); }
dialog.ovr { border: 1px solid var(--line); border-radius: var(--r); padding: 0; width: min(640px, calc(100vw - 24px));
  background: var(--surface); color: var(--ink); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
dialog.ovr::backdrop { background: rgba(15, 20, 30, .45); }
dialog.ovr form { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
dialog.ovr header, dialog.ovr footer { display: flex; align-items: center; gap: 8px; }
dialog.ovr header h2 { margin: 0; flex: 1; }
dialog.ovr .muted { margin: 0; font-size: 14px; }
.ovr-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ovr-modes label.radio { padding: 9px 11px; }
.ovr-modes .mode { margin-right: 6px; }
.ovr-params { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ovr-params [hidden] { display: none; }
@media (max-width: 600px) { .ovr-modes, .ovr-params { grid-template-columns: 1fr; } }
.t-batt .tb > div:first-child { display: flex; flex-direction: column; gap: 2px; }

/* ── úprava hodiny v řádku ──────────────────────────────── */
table.hours tr.editing td { background: color-mix(in srgb, var(--grid-soft) 40%, transparent); }
table.hours tr.edit-row > td { padding: 0 0 12px; border-bottom: 2px solid var(--grid); background: color-mix(in srgb, var(--grid-soft) 40%, transparent); }
form.ed { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 14px; padding: 12px 14px; align-items: end; }
form.ed label, form.ed legend { font-size: 12.5px; color: var(--muted); font-weight: 600; display: flex; flex-direction: column; gap: 4px; }
form.ed select, form.ed input { width: 100%; min-width: 0; }
form.ed .ed-h { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
form.ed .f-op { grid-column: span 2; }
form.ed .f-sp { grid-column: span 2; }
form.ed .f-pw, form.ed .f-soc { grid-column: span 1; }
form.ed .f-pred { grid-column: span 4; border: 1px dashed var(--line); border-radius: var(--r-sm); padding: 6px 10px 10px; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; }
form.ed .f-pred legend { padding: 0 4px; flex-direction: row; }
form.ed .f-pred label.chk { flex-direction: row; align-items: center; font-weight: 500; white-space: nowrap; }
form.ed .f-pred label.chk input { width: auto; }
form.ed .f-h { grid-column: span 2; }
form.ed .ed-b { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; }
form.ed .ed-err { grid-column: 1 / -1; margin: 0; }
form.ed [hidden] { display: none !important; }

/* plán po hodinách na mobilu: každá hodina jako karta */
@media (max-width: 760px) {
  table.hours thead { display: none; }
  table.hours, table.hours tbody { display: block; }
  table.hours tr:not(.edit-row) { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px 8px; padding: 10px 4px;
    border-bottom: 1px solid var(--line); }
  table.hours tr:not(.edit-row) > td { border: 0; padding: 0; text-align: left; }
  table.hours td.hr-t { grid-column: 1 / 2; }
  table.hours td.hr-mode { grid-column: 2 / 6; }
  table.hours td.hr-pen { grid-column: 6 / 7; text-align: right; }
  table.hours td.hr-s { grid-column: span 2; font-size: 14px; }
  table.hours td.hr-s::before { content: attr(data-label); display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
  table.hours td.hr-s .hr-why { display: inline; margin-left: 4px; }
  table.hours tr.edit-row { display: block; }
  table.hours tr.edit-row > td { display: block; }
  form.ed { grid-template-columns: 1fr 1fr; }
  form.ed .f-op, form.ed .f-sp, form.ed .f-h, form.ed .f-pred { grid-column: 1 / -1; }
  form.ed .f-pred { grid-template-columns: 1fr 1fr; }
  form.ed .f-pred label.chk { grid-column: 1 / -1; }
  form.ed .ed-b button { flex: 1; }
  .hours-card .table-scroll, #hours-card .table-scroll { overflow: visible; }
}

/* ── mobil: horní lišta s domem, spodní lišta jako v aplikaci ── */
.m-site, .tabbar, .more { display: none; }
fieldset { min-width: 0; }
@media (max-width: 900px) {
  .side { flex-wrap: nowrap; gap: 12px; padding: 10px 16px; position: sticky; top: 0; z-index: 20;
    background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(8px); }
  .side nav, .side-foot { display: none; }
  .m-site { display: flex; align-items: center; gap: 8px; min-width: 0; margin-left: auto; }
  .m-site strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw; }
  .m-site .chip { font-size: 12px; padding: 1px 8px; flex: none; }
  .main { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--surface); border-top: 1px solid var(--line); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
  .tabbar a, .tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 54px;
    font-size: 11.5px; font-weight: 600; color: var(--muted); text-decoration: none; background: none; border: 0; border-radius: 10px; padding: 4px 2px; cursor: pointer; }
  .tabbar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
  .tabbar #more-btn svg { fill: currentColor; stroke: none; }
  .tabbar .on { color: var(--batt); }
  .tabbar .on svg { stroke-width: 2.2; }
  .more:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 25; background: rgba(15, 20, 30, .35); }
  .more-sheet { position: absolute; left: 8px; right: 8px; bottom: calc(70px + env(safe-area-inset-bottom)); background: var(--surface);
    border: 1px solid var(--line); border-radius: 16px; padding: 8px; display: flex; flex-direction: column; box-shadow: 0 12px 40px rgba(0,0,0,.2); }
  .more-sheet a { padding: 14px 14px; border-radius: 10px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 16px;
    display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
  .more-sheet a small { color: var(--muted); font-weight: 400; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
  .more-sheet a.on { background: var(--raised); color: var(--batt); }
  .more-sheet form { padding: 8px 6px 4px; border-top: 1px solid var(--line); margin-top: 4px; }
  .more-sheet form button { width: 100%; min-height: 44px; }
  /* prst: větší ovládací prvky */
  button, .button { min-height: 40px; }
  button.small, .ghost.small { min-height: 36px; padding-left: 12px; padding-right: 12px; }
  input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], select, textarea { min-height: 42px; font-size: 16px; }
  .page-head h1 { font-size: 26px; }
  .table-scroll { -webkit-overflow-scrolling: touch; }
}
.two-col > div { min-width: 0; }
.two-col table.cmp td:first-child { white-space: normal; }
@media (max-width: 600px) { .ibar { grid-template-columns: minmax(0, 1fr) 70px 40px; } }
.brand { white-space: nowrap; flex: none; }
@media (max-width: 760px) { table.hours td.hr-t, table.hours td.hr-mode, table.hours td.hr-pen { grid-row: 1; } }

/* ── mobil: graf se záložkami ───────────────────────────── */
.mtabs, .mread, .m-help { display: none; }
@media (max-width: 600px) {
  .mtabs { display: flex; gap: 4px; background: var(--raised); border-radius: 12px; padding: 4px; margin: 2px 0 10px; }
  .mtabs button { flex: 1; min-height: 38px; border: 0; border-radius: 9px; background: transparent; color: var(--muted);
    font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
  .mtabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
  .mread { display: grid; grid-template-columns: 1fr; gap: 0; min-height: 66px; margin-bottom: 6px; }
  .mread .mr-when { font-size: 12.5px; color: var(--muted); }
  .mread .mr-when em { font-style: normal; font-weight: 600; color: var(--ink); margin-left: 4px; }
  .mread b { font-size: 26px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
  .mread .mr-sub { font-size: 13px; color: var(--muted); min-height: 18px; }
  .chart-card .chart-wrap.tall { height: 250px; }
  .chart-card { padding: 14px 12px; border-radius: 16px; }
  .chart-card header h2 { font-size: 18px; }
  .chart-card header .muted { font-size: 13px; }
  .chart-card #zoom-reset { display: none; }
  .chart-help { display: none; }
  .m-help { display: block; font-size: 12.5px; margin: 8px 0 0; }
  .price-card { display: none; }
  .modeband { height: 12px; border-radius: 6px; }
  .modeband span { display: none; }
  .band-label { font-size: 12.5px; }
  .chart-card .legend { gap: 6px 12px; font-size: 12px; }
}

/* ── PWA: horní okraj pod výřezem iPhonu, nabídka instalace ── */
@media (max-width: 900px) { .side { padding-top: calc(10px + env(safe-area-inset-top)); } }
.auth-shell { padding-top: calc(16px + env(safe-area-inset-top)); }
.install { display: flex; gap: 14px; align-items: center; }
.install[hidden] { display: none; }
.install p { margin: 2px 0 0; font-size: 14px; }
.install-ico { width: 44px; height: 44px; border-radius: 11px; flex: none; background: url(/static/icons/icon-192.png) center / cover; }
.install-b { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.install { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.install-b { margin-left: 0; }
.install button[hidden] { display: none; }
@media (max-width: 600px) { .install { grid-template-columns: 44px minmax(0, 1fr) 40px; } .install-b { flex-direction: column-reverse; }
  .install-b #install-go { grid-column: 1 / -1; } }

/* ── upozornění ─────────────────────────────────────────── */
.push-box { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; margin-bottom: 12px; }
.push-box p { margin: 0 0 10px; font-size: 14px; }
.push-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.push-actions button[hidden] { display: none; }
.push-devices { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 6px; }
.push-devices li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px;
  background: var(--raised); border-radius: var(--r-sm); font-size: 14px; }
.push-devices li span small { display: block; font-size: 12px; }
@media (max-width: 600px) { .push-actions button { flex: 1 1 100%; } }

/* široké obrazovky: obsah přes celou šířku, víc sloupců */
@media (min-width: 1500px) {
  .main { padding: 28px 40px 44px; }
  .chart-wrap.tall { height: 460px; }
  .hero { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}
/* mobil: štítky řad, rychlý rozsah */
.mchips, .mrange { display: none; }
@media (max-width: 600px) {
  .mrange { display: flex; gap: 6px; margin: 4px 0 8px; overflow-x: auto; scrollbar-width: none; }
  .mrange button { flex: none; min-height: 32px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface);
    color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; }
  .mrange button.on { background: var(--ink); color: var(--surface); border-color: var(--ink); }
  .mchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; }
  .mchips button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 99px;
    border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; }
  .mchips button i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
  .mchips button.off { color: var(--faint); text-decoration: line-through; }
  .mchips button.off i { opacity: .3; }
  .chart-card canvas { touch-action: pan-y; }
}

.flow svg { max-height: 430px; margin: 0 auto; display: block; }

/* čtvrthodiny v plánu po hodinách */
table.hours button.q-tog { display: block; margin-top: 4px; min-height: 26px; padding: 0 8px; border-radius: 99px; border: 1px solid var(--line);
  background: var(--surface); color: var(--muted); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
table.hours button.q-tog[aria-expanded="true"] { color: var(--grid); border-color: var(--grid); }
table.hours tr.q-row td { font-size: 13px; background: color-mix(in srgb, var(--raised) 70%, transparent); }
table.hours tr.q-row td.hr-t { padding-left: 22px; }
table.hours tr.q-row td.hr-t b { font-size: 13.5px; font-weight: 600; }
table.hours tr.q-row button.pen { width: 30px; height: 30px; font-size: 14px; }
@media (max-width: 760px) {
  table.hours tr.q-row { margin-left: 14px; border-left: 2px solid var(--line); padding-left: 10px !important; }
  table.hours tr.q-row td { background: transparent; }
  table.hours tr.q-row td.hr-t { padding-left: 0; }
  table.hours button.q-tog { min-height: 30px; }
}

/* mobil: graf jako v aplikaci – podbarvení podle záložky, graf od okraje k okraji */
@media (max-width: 600px) {
  .chart-card.mt-batt { background: linear-gradient(180deg, color-mix(in srgb, var(--soc) 24%, var(--surface)) 0, var(--surface) 62%); }
  .chart-card.mt-pv { background: linear-gradient(180deg, color-mix(in srgb, var(--sun) 26%, var(--surface)) 0, var(--surface) 62%); }
  .chart-card.mt-load { background: linear-gradient(180deg, color-mix(in srgb, var(--bad) 22%, var(--surface)) 0, var(--surface) 62%); }
  .chart-card.mt-price { background: linear-gradient(180deg, color-mix(in srgb, var(--batt) 24%, var(--surface)) 0, var(--surface) 62%); }
  .chart-card.mt-batt .mtabs button[aria-selected="true"] { background: var(--soc); color: #fff; }
  .chart-card.mt-pv .mtabs button[aria-selected="true"] { background: var(--sun); color: #1b1300; }
  .chart-card.mt-load .mtabs button[aria-selected="true"] { background: var(--bad); color: #fff; }
  .chart-card.mt-price .mtabs button[aria-selected="true"] { background: var(--batt); color: #fff; }
  .chart-card .mtabs { background: color-mix(in srgb, var(--surface) 70%, transparent); }
  .chart-card .chart-wrap.tall { margin: 0 -12px; height: 270px; }
  .mchips i.mgrad { background: linear-gradient(90deg, var(--m-charge), var(--m-hold), var(--m-sell)); }
}

/* vytápění */
.heat-now { margin: 12px 0 0; }
.heat-on { color: var(--warn, #e0662f); }
#vytapeni small.muted { display: block; margin-top: 4px; font-size: .82em; }
.heat-label { fill: var(--vt); font-weight: 600; }
.chip.tier-premium { background: color-mix(in srgb, var(--sun) 22%, transparent); color: var(--warn); margin-left: 4px; }
#model small.muted { display: block; margin-top: 4px; font-size: .82em; }
#bojler small.muted { display: block; margin-top: 4px; font-size: .82em; }
label.toggle small.help { display: block; font-size: .82em; margin-top: 2px; font-weight: 400; }
label.toggle.sub { margin-left: 26px; }
label.toggle:has(small.help) { align-items: flex-start; } label.toggle:has(small.help) input { margin-top: 2px; flex: none; }

/* víc domů na účet: přepínač */
details.site-switch summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
details.site-switch summary::-webkit-details-marker { display: none; }
details.site-switch .caret { color: var(--muted); font-size: 12px; margin-left: auto; }
details.site-switch { position: relative; }
.switch-menu { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
details.m-site .switch-menu { position: absolute; left: auto; right: 0; top: 100%; z-index: 30; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r); padding: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.25); min-width: 220px; }
.switch-menu a { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm);
  text-decoration: none; color: var(--ink); font-weight: 600; font-size: 14px; }
.switch-menu a small { color: var(--muted); font-weight: 400; }
.switch-menu a.on { background: var(--raised); color: var(--batt); }
.switch-menu a.add { color: var(--grid); font-weight: 500; }
.add-site { display: block; font-size: 13px; color: var(--grid); text-decoration: none; margin-bottom: 6px; }

/* Plán / Rozbor – přepínač nahoře */
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--raised); border: 1px solid var(--line); margin: 0 0 14px; }
.seg a { padding: 7px 18px; border-radius: 9px; text-decoration: none; color: var(--muted); font-weight: 600; font-size: 14px; }
.seg a.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.rozbor-link a { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; text-decoration: none; color: var(--ink); }
.rozbor-link .muted { grid-column: 1; font-size: 13px; }
.rozbor-link .arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 22px; color: var(--muted); }
@media (max-width: 760px) { .seg { display: flex; } .seg a { flex: 1; text-align: center; } }
.tl-energy { display: block; font-size: 13px; color: var(--ink); margin-top: 3px; }
.tl-energy small { color: var(--muted); }
.now-block { margin-top: 6px; }
.tg-test { margin: 6px 0 10px; }

/* hlavička grafu Dnes a zítra: odhad nákladů a baterie */
#plan-meta { display: inline-grid; grid-template-columns: auto auto; gap: 2px 14px; text-align: left; vertical-align: middle; }
#plan-meta .pm-cap { grid-column: 1 / -1; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
#plan-meta .pm-d { display: flex; flex-direction: column; line-height: 1.25; }
#plan-meta .pm-d em { font-style: normal; font-size: 11.5px; color: var(--muted); }
#plan-meta .pm-d b { font-size: 15px; color: var(--ink); font-weight: 650; }
#plan-meta .pm-d i { font-style: normal; font-size: 11.5px; color: var(--soc); }
@media (max-width: 760px) { .chart-card > header { flex-wrap: wrap; } .chart-card > header > .muted { width: 100%; margin-top: 6px; } }

/* sbalitelné bloky nastavení */
.card.fold > h2 { cursor: pointer; display: flex; align-items: center; gap: 8px; user-select: none; margin-bottom: 0; }
.card.fold > h2::after { content: "▾"; margin-left: auto; color: var(--muted); font-size: 14px; transition: transform .15s; }
.card.fold:not(.closed) > h2 { margin-bottom: 12px; }
.card.fold.closed > h2::after { transform: rotate(-90deg); }
.card.fold.closed > :not(h2) { display: none !important; }
.card.fold.closed { padding-top: 14px; padding-bottom: 14px; }
.fold-tools { display: flex; gap: 8px; justify-content: flex-end; margin: 0 0 8px; }

/* správa – detail domu */
.admin-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; align-items: start; }
.admin-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1100px) { .admin-grid, .admin-grid.two { grid-template-columns: 1fr; } }
.admin-grid .btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-grid h3 { font-size: 14px; margin: 18px 0 6px; color: var(--muted); font-weight: 600; }
.admin-grid .links { line-height: 1.9; }
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
dl.kv dt { color: var(--muted); }
dl.kv dd { margin: 0; overflow-wrap: anywhere; }
.small-cell { font-size: 12px; }
.site-row .name a.detail { font-size: 13px; margin-left: 6px; }

/* strategie */
.strat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 800px) { .strat { grid-template-columns: 1fr; } }
.strat-opt { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: 12px;
  cursor: pointer; background: var(--surface); transition: border-color .15s, background .15s; position: relative; }
.strat-opt input { position: absolute; opacity: 0; pointer-events: none; }
.strat-opt b { display: block; margin-bottom: 3px; }
.strat-opt small { display: block; line-height: 1.4; }
.strat-opt:has(input:checked) { border-color: var(--batt); background: var(--batt-soft); }
.strat-opt:has(input:focus-visible) { outline: 2px solid var(--batt); outline-offset: 2px; }
.strat-ico { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--paper); }
.strat-opt:has(input:checked) .strat-ico { background: var(--batt); color: var(--surface); }
.strat-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.risk { margin-top: 14px; max-width: 520px; }
.risk input[type=range] { width: 100%; accent-color: var(--batt); margin: 8px 0 2px; }
.risk-ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
/* další spotřebiče */
.appl-list { display: grid; gap: 8px; margin-bottom: 8px; }
.appl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: 8px; align-items: center; }
@media (max-width: 600px) { .appl { grid-template-columns: 1fr auto; } .appl input:nth-child(2) { grid-column: 1; } .appl .appl-del { grid-row: 1 / span 2; grid-column: 2; } }
.strat-opt { flex-wrap: nowrap; flex-direction: row; }
.strat-opt > span:last-child { flex: 1; min-width: 0; }
@media (max-width: 800px) { .strat-opt { padding: 12px; } }

/* zařízení Shelly – nastavení */
.dev-edit-list { display: grid; gap: 12px; margin-bottom: 10px; }
.dev-edit { border: 1px solid var(--line); border-radius: var(--r); padding: 14px; margin: 0; min-width: 0; }
.dev-edit-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; margin-bottom: 6px; }
.dev-edit-head input[type=text] { font-weight: 600; }
.dev-edit .row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
@media (max-width: 800px) { .dev-edit .row3 { grid-template-columns: 1fr; } }
.dev-edit[data-conn="ha"] .c-cloud, .dev-edit[data-conn="cloud"] .c-ha { display: none; }
.dev-edit:not([data-rule="surplus"]) .r-surplus, .dev-edit:not([data-rule="cheap"]) .r-cheap,
.dev-edit:not([data-rule="window"]) .r-window { display: none; }
.dev-edit .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dev-edit .c-cloud .pair { grid-template-columns: 1fr 64px; }
.dev-edit .unit { display: flex; align-items: center; gap: 6px; } .dev-edit .unit i { font-style: normal; color: var(--muted); font-size: 13px; white-space: nowrap; }
.dev-now { margin: 0 0 4px; font-size: 13px; }
/* zařízení – přehled */
.devs-head { display: flex; justify-content: space-between; align-items: baseline; }
.devs-head h2 { margin: 0; }
.dev-list { display: grid; gap: 8px; margin-top: 12px; }
.dev { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm); }
.dev-led { width: 12px; height: 12px; border-radius: 50%; background: var(--line); box-shadow: 0 0 0 3px var(--paper); }
.dev.on .dev-led { background: var(--batt); box-shadow: 0 0 0 3px var(--batt-soft); }
.dev-main { display: flex; flex-direction: column; min-width: 0; }
.dev-main b { font-weight: 600; }
.dev-state { font-size: 14px; }
.dev.on .dev-state { color: var(--batt); font-weight: 600; }
.dev-why { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.dev-err { font-size: 12.5px; color: var(--bad); }
.dev-acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.dev-acts select { width: auto; padding: 4px 8px; font-size: 13px; }
@media (max-width: 600px) { .dev { grid-template-columns: auto minmax(0, 1fr); } .dev-acts { grid-column: 1 / -1; justify-content: flex-start; } }
form.stack label.strat-opt { display: flex; margin: 0; font-weight: 400; font-size: 14px; }
form.stack label.strat-opt b { font-size: 15px; }
form.stack .dev-edit-head label.toggle { margin: 0; }

/* správa domů – akce u domu */
.site-row .acts { align-items: center; flex-wrap: nowrap; }
.site-row .acts form.inline { margin: 0; }
.site-row .acts .icon-only { min-width: 34px; justify-content: center; font-size: 18px; line-height: 1; padding-inline: 8px; }
.menu { min-width: 230px; padding: 6px; gap: 0; box-shadow: 0 12px 32px rgb(0 0 0 / .18); border-radius: var(--r); }
.menu form { margin: 0; display: block; }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; }
.menu button.mi { display: flex; width: 100%; justify-content: flex-start; text-align: left; gap: 6px; background: none; border: 0;
  color: var(--ink); font-weight: 500; font-size: 14px; padding: 8px 10px; border-radius: var(--r-sm); box-shadow: none; }
.menu button.mi:hover, .menu button.mi:focus-visible { background: var(--raised); }
.menu button.mi.danger-text { color: var(--bad); }
@media (max-width: 900px) { .site-row .acts { flex-wrap: wrap; } .menu { right: auto; left: 0; } }

/* průběh učení modelu */
.model-progress { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-top: 10px; color: var(--grid); }
.model-progress.idle { display: none; }
.model-progress .spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
  animation: ems-spin .9s linear infinite; flex: none; }
@keyframes ems-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .model-progress .spin { animation: none; } }
.price-notify { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
form.stack .price-notify label.step { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; }
.price-notify label.step input { width: 70px; }
/* mobilní graf: řádek „teď“ nad bilancí */
@media (max-width: 900px) {
  .mread .mr-now { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
  .mread .mr-now > span { display: inline-flex; flex-direction: column; padding: 6px 10px; border-radius: 10px;
    background: color-mix(in srgb, var(--ink) 7%, transparent); line-height: 1.2; }
  .mread .mr-now em { font-style: normal; font-size: 11.5px; color: var(--muted); }
  .mread .mr-now b { font-size: 16px; font-weight: 650; letter-spacing: 0; }
  .mread .mr-now .faint { background: none; padding: 6px 0; font-size: 12.5px; }
}
@media (max-width: 900px) {
  .mread .mr-now { flex-wrap: nowrap; gap: 5px; }
  .mread .mr-now > span { flex: 1 1 0; min-width: 0; padding: 5px 8px; }
  .mread .mr-now em, .mread .mr-now b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mread .mr-now b { font-size: 15px; }
  .mread .mr-now .faint { flex: 2 1 0; white-space: normal; }
}
/* Přehled – dlaždice Dnes: zbytek dne podle plánu */
.tile .tr { margin-top: auto; padding-top: 9px; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 1px; }
.tile .tr:empty { display: none; }
.tile .tts, .tile .tr { margin-top: 10px; }
.tile .tr-l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); font-weight: 600; }
.tile .tr-v { font-size: 13.5px; color: var(--ink); }
.tile .tr-v b { font-size: 15px; font-weight: 650; line-height: 1.3; }
.tile .tr-s { font-size: 12.5px; color: var(--muted); }
.tile.t-pv .tr-v b { color: var(--sun); } .tile.t-imp .tr-v b { color: var(--grid); }
.tile.t-exp .tr-v b { color: var(--export); } .tile.t-batt .tr-v b { color: var(--soc); }
.tile .tr-v b { font-size: 17px; }
.tile .tr-v b small { font-size: 12px; font-weight: 500; color: var(--muted); margin-left: 2px; }
/* zítra podle plánu */
.tomorrow { margin: 12px 0; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 14px;
  background: color-mix(in srgb, var(--raised) 55%, transparent); }
.tomorrow .tm-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.tomorrow .tm-h b { font-size: 14px; }
.tomorrow .tm-h .muted { font-size: 13px; }
.tm-cells { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.tm-c { display: flex; flex-direction: column; min-width: 0; padding-left: 10px; border-left: 3px solid var(--line); }
.tm-c span { font-size: 12px; color: var(--muted); }
.tm-c b { font-size: 17px; font-weight: 650; line-height: 1.3; }
.tm-c b small { font-size: 12px; font-weight: 500; color: var(--muted); margin-left: 2px; }
.tm-c small { font-size: 12px; color: var(--muted); }
.tm-c.t-pv { border-color: var(--sun); } .tm-c.t-load { border-color: var(--ink); } .tm-c.t-imp { border-color: var(--grid); }
.tm-c.t-exp { border-color: var(--export); } .tm-c.t-batt { border-color: var(--soc); }
@media (max-width: 900px) { .tm-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 10px; } .tm-c.t-batt { grid-column: 1 / -1; } }

/* Přehled – karta „Teď“ */
.now { gap: 0; padding: 18px 20px; }
.now-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.now-top .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.strat-badge { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 8px; border-radius: 99px; font-size: 12.5px;
  color: var(--ink); text-decoration: none; background: var(--raised); border: 1px solid var(--line); }
.strat-badge:hover { border-color: var(--batt); }
.strat-badge b { font-weight: 600; }
.strat-badge svg { width: 15px; height: 15px; fill: none; stroke: var(--batt); stroke-width: 1.9; stroke-linecap: round; }
.strat-badge[data-k="savings"] svg { stroke: var(--export); } .strat-badge[data-k="battery"] svg { stroke: var(--soc); }
.now-hero { --mc: var(--muted); position: relative; border-radius: var(--r); padding: 14px 16px 14px 18px; margin-bottom: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--mc) 16%, transparent), color-mix(in srgb, var(--mc) 4%, transparent));
  border: 1px solid color-mix(in srgb, var(--mc) 30%, transparent); }
.now-hero::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: var(--mc); }
.now-hero .now-mode { margin: 0; }
.now-hero .now-mode .dot { display: none; }
.now-hero .now-mode strong { font-size: 26px; }
.now-until { font-size: 13px; font-weight: 600; color: var(--mc); margin-top: 2px; }
.now-until:empty { display: none; }
.now-hero .now-reason { margin: 6px 0 0; color: var(--ink); opacity: .8; font-size: 14px; }
.now-hero .now-block { margin-top: 10px; padding-top: 10px; border-top: 1px dashed color-mix(in srgb, var(--mc) 35%, transparent);
  font-size: 13.5px; color: var(--ink); display: block; }
.now .prices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 0; border: 0; margin-bottom: 16px; }
.now .prices > div { background: var(--raised); border-radius: var(--r-sm); padding: 9px 11px; display: flex; flex-direction: column; min-width: 0; }
.now .prices span { font-size: 12px; color: var(--muted); }
.now .prices b { font-size: 20px; font-weight: 650; line-height: 1.25; }
.now .prices small { font-size: 11.5px; color: var(--faint); }
@media (max-width: 600px) { .now .prices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.next-h { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.now .timeline li { position: relative; grid-template-columns: 52px 14px 1fr; padding: 8px 0; }
.now .timeline li::after { content: ""; position: absolute; left: calc(52px + 10px + 6px); top: 26px; bottom: -8px; width: 2px; background: var(--line); }
.now .timeline li:last-child::after { display: none; }
.now .timeline .tl-dot { width: 14px; height: 14px; border-radius: 50%; margin-top: 3px; background: var(--mc);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mc) 22%, transparent); position: relative; z-index: 1; }
.now .timeline time { font-variant-numeric: tabular-nums; }
.now .timeline .tl-energy { margin-top: 4px; padding: 5px 8px; border-radius: 8px; background: var(--raised); display: inline-block; }
.now-hero .now-block[hidden], .now-hero .now-block:empty { display: none; }

/* Přehled – tok energie na počítači (karty kolem domu) */
.fd { display: none; }
@media (min-width: 700px) {
  .hero > .flow { display: none; }
  .fd { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px 14px; }
}
.fd-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.fd-head .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fd-live { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); }
.fd-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); animation: live 2s infinite; }
.fd-live.stale i { background: var(--warn); animation: none; }
@keyframes live { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.fd-grid { position: relative; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, .8fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(150px, 1fr) auto; grid-template-areas: "pv . grid" ". house ." "batt . cons"; gap: 14px; }
.fd-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.fd-lines .w { fill: none; stroke: var(--line); stroke-width: 2.5; }
.fd-lines .p { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 2 13; opacity: 0; transition: opacity .4s;
  animation: run 1s linear infinite; }
.fd-lines .p.on { opacity: 1; } .fd-lines .p.rev { animation-direction: reverse; }
.fd-lines .p.pv { stroke: var(--sun); } .fd-lines .p.grid { stroke: var(--grid); } .fd-lines .p.batt { stroke: var(--soc); }
.fd-lines .p.cons { stroke: var(--m-sell); }
.fd-card { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line); --c: var(--muted); transition: border-color .3s, box-shadow .3s; min-width: 0; }
.fd-card.on { border-color: color-mix(in srgb, var(--c) 55%, var(--line)); box-shadow: 0 6px 22px color-mix(in srgb, var(--c) 16%, transparent); }
.c-pv { grid-area: pv; --c: var(--sun); } .c-grid { grid-area: grid; --c: var(--grid); }
.c-batt { grid-area: batt; --c: var(--soc); } .c-cons { grid-area: cons; --c: var(--m-sell); }
.fd-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 6px;
  background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); }
.fd-ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.c-pv.on .fd-ic svg { animation: spin 14s linear infinite; }
.fd-l { font-size: 13px; color: var(--muted); font-weight: 500; }
.fd-l em { font-style: normal; color: var(--c); font-weight: 600; }
.fd-card > b, .fd-house > b { font-size: 26px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
.fd-card > b small { font-size: 15px; font-weight: 500; color: var(--muted); margin-left: 2px; }
.c-pv > b { color: var(--sun); } .c-batt > b { color: var(--soc); }
.fd-s { font-size: 12.5px; color: var(--muted); }
.fd-house { grid-area: house; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2px; }
.fd-hc { width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 6px;
  background: var(--surface); border: 2px solid var(--ink); box-shadow: 0 0 0 8px var(--raised); }
.fd-hc svg { width: 36px; height: 36px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; }
.fd-bar { position: relative; height: 8px; border-radius: 4px; background: var(--raised); margin: 6px 0 4px; overflow: visible; }
.fd-bar i { display: block; height: 100%; border-radius: 4px; background: var(--soc); transition: width .8s; }
.fd-bar u { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--bad); border-radius: 1px; }
.fd-ph { display: grid; gap: 4px; margin-top: 6px; }
.fd-ph .ph { display: grid; grid-template-columns: 22px 1fr 64px; align-items: center; gap: 6px; font-size: 12px; }
.fd-ph .ph span { color: var(--muted); }
.fd-ph .ph > div { height: 5px; border-radius: 3px; background: var(--raised); overflow: hidden; }
.fd-ph .ph i { display: block; height: 100%; border-radius: 3px; background: var(--grid); }
.fd-ph .ph.exp i { background: var(--export); }
.fd-ph .ph b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.fd-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; font-size: 12.5px; }
.fd-list li { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); }
.fd-list li b { font-weight: 600; color: var(--muted); }
.fd-list li.on b { color: var(--m-sell); }
.fd-foot { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--muted); margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.fd-bar.pv i { background: var(--sun); }
.fd-bar[hidden] { display: none; }
.fd-house > .fd-l { margin-top: 2px; }
/* kompaktnější tok energie: nenatahovat na výšku pravé karty */
@media (min-width: 700px) {
  .hero { align-items: start; }
  .fd { padding: 14px 16px 10px; }
  .fd-head { margin-bottom: 10px; }
  .fd-grid { grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr); grid-template-rows: auto 96px auto; gap: 10px; flex: none; }
  .fd-card { padding: 10px 12px; }
  .fd-ic { width: 28px; height: 28px; border-radius: 8px; margin-bottom: 4px; }
  .fd-ic svg { width: 16px; height: 16px; }
  .fd-card > b, .fd-house > b { font-size: 22px; }
  .fd-hc { width: 58px; height: 58px; box-shadow: 0 0 0 6px var(--raised); margin-bottom: 4px; }
  .fd-hc svg { width: 26px; height: 26px; }
  .fd-house > .fd-s { display: none; }
  .fd-foot { margin-top: 10px; padding-top: 8px; }
}
@media (min-width: 1000px) { .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 700px) {
  .fd-grid { grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1fr); grid-template-rows: auto 124px auto; }
}
/* levý sloupec přehledu: tok energie + ceny */
.hero-l { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.hero-l .price-card { margin: 0; }
.price-sum { display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 0 10px; }
.price-sum .ps { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 10px; border-radius: 10px; background: var(--raised); font-size: 13px; }
.price-sum .ps em { font-style: normal; color: var(--muted); font-size: 12px; }
.price-sum .ps b { font-weight: 650; font-size: 15px; }
.price-sum .ps small { color: var(--muted); font-size: 12px; }
.price-sum .ps.lo b { color: var(--grid); } .price-sum .ps.hi b { color: var(--export); }
@media (min-width: 700px) { .hero-l > .flow { display: none; } }
.price-sum .ps { flex-direction: row; align-items: baseline; height: auto; white-space: nowrap; }
.price-sum .ps > * { display: inline; margin: 0; }
.hero-l .chart-wrap.short { height: 120px; }
.hero-l .chart-wrap.short { height: 175px; }
/* karta Teď se na počítači roztáhne na výšku levého sloupce, časová osa vyplní zbytek (posouvá se) */
@media (min-width: 1000px) {
  .hero { align-items: stretch; }
  .now { min-height: 0; }
  .now .next-box { position: relative; flex: 1 1 auto; min-height: 160px; }
  .now .next-scroll { position: absolute; inset: 0; overflow-y: auto; padding-right: 4px; scrollbar-width: thin;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); }
}

/* vlastní rozložení přehledu */
.head-r { display: flex; align-items: center; gap: 10px; }
#layout-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.lay-off { display: none !important; }
@media (min-width: 1000px) { .hero.single { grid-template-columns: 1fr; } }
.layout-panel { margin-bottom: 16px; border-color: var(--grid); }
.layout-panel .lp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.layout-panel .lp-head h2 { margin: 0; }
.lp-hint { margin: 6px 0 12px; }
.lp-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.lp-list li { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; background: var(--surface); }
.lp-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.lp-row label.toggle, .lp-parts label.toggle { margin: 0; }
.lp-mv { display: inline-flex; gap: 4px; }
.lp-mv button { min-width: 34px; justify-content: center; }
.lp-parts { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 6px 0 0 26px; font-size: 14px; }
.lp-acts { display: flex; gap: 8px; }
.lp-list label.toggle { border: 0 !important; padding: 2px 0 !important; }

/* plán po hodinách – historie dneška */
.hours tr.hist-tog td { padding: 0 0 6px; border: 0; }
.hours #hist-btn { width: 100%; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; text-align: left; justify-content: flex-start;
  background: var(--raised); border: 1px dashed var(--line); color: var(--ink); padding: 9px 12px; border-radius: var(--r-sm); font-weight: 500; }
.hours #hist-btn:hover { border-color: var(--muted); }
.hours #hist-btn .ht-arrow { width: 12px; color: var(--muted); }
.hours #hist-btn .muted { font-size: 13px; }
.hours #hist-btn .ht-hint { margin-left: auto; font-size: 12.5px; color: var(--grid); }
.hours tr.past td { color: var(--muted); background: color-mix(in srgb, var(--raised) 60%, transparent); }
.hours tr.past td b { color: var(--muted); font-weight: 600; }
.hours tr.past .mode { opacity: .45; filter: saturate(.5); }
.hours tr.past .socmini i { opacity: .5; }
.hours tr.past .hr-t small { color: var(--faint); }
.hours tr.past .lock { font-size: 12px; opacity: .45; }
.hours tr.hist-sep td { padding: 4px 0; border: 0; }
.hours tr.hist-sep span { display: block; position: relative; text-align: center; font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--grid); }
.hours tr.hist-sep span::before, .hours tr.hist-sep span::after { content: ""; position: absolute; top: 50%; width: calc(50% - 24px); height: 1px; background: var(--grid); opacity: .5; }
.hours tr.hist-sep span::before { left: 0; } .hours tr.hist-sep span::after { right: 0; }
@media (max-width: 700px) {
  .hours tr.hist-tog, .hours tr.hist-sep { display: block !important; grid-template-columns: none !important; padding: 0 !important; border: 0 !important; }
  .hours tr.hist-tog td, .hours tr.hist-sep td { display: block !important; width: 100% !important; grid-column: 1 / -1; }
  .hours #hist-btn .ht-hint { margin-left: 0; width: 100%; }
}
@media (max-width: 700px) {
  .hours tr.past { background: color-mix(in srgb, var(--raised) 60%, transparent); border-radius: var(--r-sm); }
  .hours tr.past td { background: none; }
}
.hours .ht-wrap { display: flex; gap: 8px; align-items: stretch; }
.hours .ht-wrap #hist-btn { flex: 1; width: auto; }
.hours .ht-day { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--surface); }
.hours .ht-day button { border: 0; border-radius: 0; background: none; color: var(--muted); padding: 0 12px; font-size: 13px; font-weight: 500; box-shadow: none; }
.hours .ht-day button.on { background: var(--ink); color: var(--surface); }
@media (max-width: 700px) { .hours .ht-wrap { flex-direction: column; } .hours .ht-day button { padding: 7px 14px; flex: 1; } }

/* časy HDO */
.hdo-card.hdo-off .hdo-on { display: none; }
.hdo-form .row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 700px) { .hdo-form .row3 { grid-template-columns: 1fr; } }
.hdo-acts { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.hdo-status { margin-top: 14px; display: flex; flex-direction: column; gap: 4px; }
.hdo-now { display: inline-flex; gap: 6px; align-items: baseline; font-size: 15px; }
.hdo-now b { padding: 2px 10px; border-radius: 99px; font-size: 14px; }
.hdo-now.nt b { background: var(--batt-soft); color: var(--batt); } .hdo-now.vt b { background: var(--vt-soft); color: var(--vt); }
.hdo-days { margin-top: 12px; display: grid; gap: 4px; }
.hdo-day, .hdo-axis { display: grid; grid-template-columns: 52px 1fr minmax(120px, 34%); gap: 10px; align-items: center; font-size: 13px; }
.hdo-day small { color: var(--muted); font-size: 12px; }
.hdo-bar { position: relative; height: 12px; border-radius: 6px; background: var(--vt-soft); overflow: hidden; }
.hdo-bar i { position: absolute; top: 0; bottom: 0; background: var(--batt); opacity: .75; }
.hdo-axis div { display: flex; justify-content: space-between; font-size: 11px; color: var(--faint); grid-column: 2; }
.hdo-axis b { font-weight: 500; }
@media (max-width: 700px) { .hdo-day { grid-template-columns: 44px 1fr; } .hdo-day small { grid-column: 2; } .hdo-axis { grid-template-columns: 44px 1fr; } }
.hdo-manual { margin-top: 14px; padding: 12px; border: 1px dashed var(--line); border-radius: var(--r-sm); }
.hdo-cap { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.hdo-cap img { height: 44px; border-radius: 6px; border: 1px solid var(--line); background: #fff; }
.hdo-cap input { width: 140px; }
.hdo-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.hdo-cap-err { color: var(--bad); font-size: 13px; max-width: 520px; }
.hdo-cap img { height: auto; min-height: 60px; max-width: 100%; width: 260px; image-rendering: auto; }
.advice-only{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-top:12px;padding-top:12px;border-top:1px solid var(--line, rgba(127,127,127,.2))}
.advice-only code{font-size:12px}
.pl-table input{width:110px;text-align:right}
.pl-table td{vertical-align:middle}
.kpi-sub { display: block; font-style: normal; font-size: 12px; color: var(--muted); margin-top: 2px; }
.bill-kpis .bad b { color: var(--bad); }
.bill-sum td { padding: 6px 4px; }
.bill-sum tr.tot td { font-weight: 650; border-top: 1px solid var(--line); }
.bill-sum tr.good td { color: var(--batt); } .bill-sum tr.bad td { color: var(--bad); }
.bill-months input { width: 90px; text-align: right; padding: 4px 6px; }
.bill-months input::placeholder { color: var(--muted); opacity: .8; }
.bill-months tr.cur td { background: color-mix(in srgb, var(--accent, #4f8cff) 8%, transparent); }
.bill-months tr.future td:nth-child(n+4) { color: var(--muted); }
.card h3 { font-size: 14px; margin: 16px 0 6px; }
@media (max-width: 900px) { .two { grid-template-columns: 1fr; } }
.bill-months td { white-space: nowrap; }
.bill-form > fieldset > .card { margin-top: 16px; }
.bill-sum td.r { white-space: nowrap; padding-left: 10px; }
.pl-bands span { display: inline-block; margin: 0 10px 2px 0; font-size: 12px; color: var(--muted); white-space: nowrap; }
.pl-bands b { color: var(--text, inherit); font-weight: 600; }
table.daysplit .whole { background: var(--raised); font-weight: 600; }
table.daysplit th small { font-size: 10px; letter-spacing: .04em; color: var(--faint); }
.st3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .st3 { grid-template-columns: 1fr; } }
.stc { border: 1px solid var(--line); border-radius: var(--r); padding: 14px; position: relative; }
.stc.on { background: var(--batt-soft); border-color: var(--batt); }
.stc .tag { position: absolute; top: 12px; right: 12px; font-size: 11px; font-weight: 700; color: var(--batt);
  background: var(--surface); border: 1px solid var(--batt); border-radius: 999px; padding: 1px 8px; }
.stc .tag.best { color: var(--export); border-color: var(--export); }
.stc h3 { margin: 0 0 2px; font-size: 15px; padding-right: 90px; }
.stc .sub { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.stc .big { font-size: 24px; font-weight: 650; }
.stc .big small { font-size: 13px; color: var(--muted); font-weight: 500; }
.stc .diff { font-size: 12.5px; margin: 2px 0 10px; }
.stc .diff.good, .note.good { color: var(--export); } .stc .diff.bad { color: var(--vt); }
.stc table td { padding: 4px 0; font-size: 13px; border-bottom: 1px dashed var(--line); }
/* předpověď dnes a zítra */
.fc-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .fc-grid { grid-template-columns: 1fr; } }
.fc-tab th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.fc-tab td, .fc-tab th { padding: 7px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.fc-tab td.r b { font-weight: 650; }
.fc-tab .d { font-size: 12px; color: var(--muted); display: block; }
.fc-tab .d.up { color: var(--export); } .fc-tab .d.dn { color: var(--vt); }
.fc-tab .dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
#fc-svg { width: 100%; height: auto; display: block; }
#fc-svg .fg { stroke: var(--line); } #fc-svg .ft { font-size: 10px; fill: var(--faint); } #fc-svg .ft.now { fill: var(--grid); }
#fc-svg .fnow { stroke: var(--grid); }
#fc-svg .fl { fill: none; stroke-width: 2; } #fc-svg .fl.sun { stroke: var(--sun); stroke-width: 2.2; } #fc-svg .fl.ink { stroke: var(--ink); }
#fc-svg .fl.dot { stroke-dasharray: 1.5 3; stroke-width: 1.6; opacity: .85; }
#fc-svg .fl.plan { stroke-dasharray: 5 4; } #fc-svg .fl.plan:not(.sun) { stroke: var(--muted); }
.fc-leg { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 6px; }
.fc-leg i { display: inline-block; width: 18px; height: 0; border-top: 2px solid; margin-right: 5px; vertical-align: 3px; }
.fc-leg .l-sun { border-color: var(--sun); } .fc-leg .l-ink { border-color: var(--ink); } .fc-leg .l-plan { border-color: var(--muted); border-top-style: dashed; }
.fc-leg i.dot { border-top-style: dotted; }
.fc-tab thead tr:first-child th { border-bottom: 0; padding-bottom: 0; color: var(--ink); }
.fc-tab tr.sub th { font-size: 10.5px; font-weight: 500; text-transform: none; letter-spacing: 0; }
@media (max-width: 600px) {
  .fcday .table-scroll { overflow: visible; }
  .fc-tab td, .fc-tab th { padding: 6px 3px; font-size: 13px; }
  .fc-tab td:first-child { white-space: normal; }
  .fc-tab .dot { display: none; }
  .fc-tab .d { font-size: 11px; }
}

/* Spotové ceny */
.sec-title { margin: 26px 0 4px; }
.sec-sub { margin: 0 0 14px; }
.sp-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sp-ctl { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sp-ctl select { width: auto; }
.sp-ctl .seg, .sp-head .seg { margin: 0; }
.sp-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.sp-head h2 { margin: 0; }
.sp-how { margin: 0; padding-left: 18px; line-height: 1.6; }
.sp-how li { margin-bottom: 4px; }
@media (max-width: 760px) { .sp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sp-kpis > div:nth-child(3) { border-left: 0; } }

/* akce pod přihlašovacími formuláři */
.form-acts { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 22px; }