@font-face{font-family:"DM";font-weight:400;font-display:swap;src:url(fonts/dm-sans-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DM";font-weight:400;font-display:swap;src:url(fonts/dm-sans-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"DM";font-weight:500;font-display:swap;src:url(fonts/dm-sans-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DM";font-weight:500;font-display:swap;src:url(fonts/dm-sans-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"DM";font-weight:600;font-display:swap;src:url(fonts/dm-sans-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DM";font-weight:600;font-display:swap;src:url(fonts/dm-sans-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"DM";font-weight:700;font-display:swap;src:url(fonts/dm-sans-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DM";font-weight:700;font-display:swap;src:url(fonts/dm-sans-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Control data – administrace. Světlý vzhled jako aplikace k elektrárnám: menu vlevo, obsah v bílých kartách.
   Barvy energií: výroba jantarová, dům grafit, baterie zelená, síť modrá. */
:root{--bg:#F4F6F8;--card:#fff;--line:#EEF0F3;--line2:#E3E6EB;--text:#111827;--soft:#374151;--muted:#6B7280;--faint:#9CA3AF;
  --accent:#F08A00;--accent-d:#9A5B00;--accent-bg:#FFF4DC;--pv:#F0A500;--pv-d:#B45309;--house:#4B5563;--bat:#16A36B;--grid:#2F6FDB;
  --ok:#15803D;--ok-bg:#DCFCE7;--bad:#B91C1C;--bad-bg:#FEE2E2;--shadow:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.07)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:"DM",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:15px;line-height:1.45;font-variant-numeric:tabular-nums}
a{color:var(--accent-d);text-decoration:none}a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* rozvržení: menu vlevo */
.app{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100vh}
.side{background:#fff;border-right:1px solid var(--line2);padding:22px 14px;display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh;overflow-y:auto}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;padding:0 10px 20px}
.logo .mk{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#FFC23D,#F08A00);flex:none}
.logo small{display:block;font-weight:500;font-size:12px;color:var(--faint)}
.side nav{display:flex;flex-direction:column;gap:2px}
.side nav a,.side nav button{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:#4B5563;text-decoration:none;font:inherit;font-size:15px;font-weight:500;background:none;border:0;cursor:pointer;width:100%;text-align:left}
.side nav a:hover,.side nav button:hover{background:#F6F7F9;text-decoration:none}
.side nav a.active{background:var(--accent-bg);color:var(--accent-d)}
.side nav svg{flex:none}
.side nav .cnt{margin-left:auto;font-size:12px;background:var(--bad-bg);color:var(--bad);border-radius:999px;padding:1px 8px}
.side nav form{margin:0}
.side .bottom{margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.mobtop{display:none}

/* stránka */
main{padding:28px 34px 56px;display:flex;flex-direction:column;gap:20px;max-width:1240px;width:100%}
h1{margin:0;font-size:26px;font-weight:700;letter-spacing:-.01em}
h2{margin:0;font-size:17px;font-weight:700}
h3{margin:0 0 6px;font-size:14px;font-weight:600;color:var(--soft)}
.sub{margin:4px 0 0;color:var(--muted);font-size:14px;max-width:780px}
.muted{color:var(--muted)}
.row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.back{align-self:flex-start;color:var(--muted);font-size:14px;margin-bottom:-12px}
.mono{font-family:inherit;font-size:13.5px;color:var(--muted);letter-spacing:.01em}
.sr{position:absolute;left:-9999px}

/* karty */
.panel,.card-box{background:var(--card);border-radius:18px;box-shadow:var(--shadow);padding:20px 22px}
.panel-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-bottom:10px}
.panel-body{display:flex;flex-direction:column;gap:12px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.card{background:var(--card);border-radius:16px;box-shadow:var(--shadow);padding:16px 18px;display:flex;flex-direction:column;gap:4px;min-width:0}
.label{font-size:13px;color:var(--muted);margin:0;font-weight:400}
.big{font-size:27px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.big small{font-size:14px;color:var(--faint);font-weight:500;margin-left:3px}
.mid{font-size:18px;font-weight:600}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cell{background:#F9FAFB;border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:2px;min-width:0}
.cell .l{font-size:13px;color:var(--muted)}.cell .n{font-size:18px;font-weight:600}.cell .s{font-size:13px;color:var(--soft)}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px}
.kv{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid var(--line);font-size:14px}
.kv:first-of-type{border-top:0}
.kv>span:first-child{color:var(--soft)}.kv>span:last-child,.kv b{font-weight:600;text-align:right}

/* tabulky (uvnitř karet) */
.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th{text-align:left;color:var(--muted);font-size:13px;font-weight:500;padding:8px 12px;white-space:nowrap;border-bottom:1px solid var(--line2)}
th:first-child,td:first-child{padding-left:0}
td{padding:12px;border-bottom:1px solid var(--line);color:var(--soft);vertical-align:middle}
tr:last-child td{border-bottom:0}
td.strong{color:var(--text);font-weight:600}
td.right{text-align:right;white-space:nowrap}

/* štítky stavu */
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap;background:#F3F4F6;color:var(--muted)}
.pill.on{background:var(--ok-bg);color:var(--ok)}.pill.off{background:var(--bad-bg);color:var(--bad)}.pill.blk{background:#F3F4F6;color:var(--muted)}
.pill.new{background:var(--accent-bg);color:var(--accent-d);margin-left:6px}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}

/* tlačítka a formuláře */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 15px;border-radius:10px;border:1px solid var(--line2);background:#fff;color:var(--text);font:inherit;font-size:14px;font-weight:500;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{background:#F9FAFB;text-decoration:none}
.btn.primary{background:var(--text);border-color:var(--text);color:#fff}
.btn.primary:hover{background:#1F2937}
.btn.warn,.btn.del{border-color:#F3C1BC;color:var(--bad)}
.btn.link{border-color:transparent;background:none;color:var(--accent-d);padding:0}
.btns{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.btns form{margin:0}
input[type=text],input[type=password],input[type=search],input[type=number],input[type=date],input[type=url],select{min-height:38px;padding:0 12px;border-radius:10px;border:1px solid var(--line2);background:#fff;color:var(--text);font:inherit;font-size:14px;max-width:100%}
input:focus,select:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px rgba(240,138,0,.15)}
.form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin:0}
.field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);font-weight:500}
.msg{padding:12px 16px;border-radius:12px;background:var(--bad-bg);color:#7F1D1D}
.okmsg{padding:12px 16px;border-radius:12px;background:var(--ok-bg);color:#14532D}
.tokenbox{border-radius:14px;background:#FFF7E6;border:1px solid #F7D69A;padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.tokenbox strong{color:var(--accent-d)}
.tokenbox code{display:block;padding:10px 12px;background:#fff;border:1px solid var(--line2);border-radius:10px;overflow-x:auto;white-space:nowrap;color:var(--text);font-family:ui-monospace,Consolas,monospace;font-size:14px;user-select:all}
.tokenbox p{margin:0;font-size:14px;color:#6B4E16}
details{background:var(--card);border-radius:14px;box-shadow:var(--shadow);padding:14px 18px}
summary{cursor:pointer;font-weight:600;font-size:14.5px;color:var(--soft)}
pre{margin:12px 0 0;padding:14px;background:#F9FAFB;border:1px solid var(--line);border-radius:10px;overflow-x:auto;font-family:ui-monospace,Consolas,monospace;font-size:12.5px;line-height:1.5;color:var(--soft)}
details.confirm{display:inline-block;background:none;box-shadow:none;padding:0}
details.confirm summary{list-style:none;display:inline-flex;align-items:center;min-height:38px;padding:0 15px;border-radius:10px;border:1px solid var(--line2);background:#fff;font-weight:500;font-size:14px}
details.confirm summary::-webkit-details-marker{display:none}
details.confirm.del summary{border-color:#F3C1BC;color:var(--bad)}
details.confirm[open] .pop{display:flex}
details.confirm .pop{margin-top:8px;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--line2);border-radius:12px;background:#fff;box-shadow:var(--shadow);text-align:left;white-space:normal;max-width:320px}

/* přepínače */
.switch{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.switch .t{display:flex;flex-direction:column;gap:2px;min-width:240px;flex:1}
.switch .t b{font-size:15px;font-weight:600}.switch .t span{font-size:13.5px;color:var(--muted)}
.tgl{position:relative;width:46px;height:26px;flex:none}
.tgl input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.tgl span{position:absolute;inset:0;border-radius:999px;background:#D1D5DB;transition:background .15s}
.tgl span::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:left .15s}
.tgl input:checked+span{background:var(--accent)}.tgl input:checked+span::after{left:23px}

/* odpočet */
.odpocet{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;padding:9px 16px;background:#FFF4DC;border-bottom:1px solid #F7D69A;color:var(--accent-d);font-size:14px;font-weight:500}
.odpocet[hidden]{display:none}
.odpocet button{min-height:34px;padding:0 14px;border-radius:9px;border:0;background:var(--text);color:#fff;font:inherit;font-weight:600;cursor:pointer}

/* období, grafy */
.tabs{display:inline-flex;gap:2px;background:#EEF0F3;padding:3px;border-radius:999px}
.tab{min-height:32px;display:inline-flex;align-items:center;padding:0 14px;border-radius:999px;color:var(--muted);text-decoration:none;font-size:14px;font-weight:500}
.tab:hover{color:var(--text);text-decoration:none}
.tab.on{background:#fff;color:var(--text);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:7px 14px;border-radius:999px;background:#fff;border:1px solid var(--line2);font-size:14px;color:var(--soft);text-decoration:none}
.chip:hover{text-decoration:none;background:#F9FAFB}.chip.on{background:var(--text);color:#fff;border-color:var(--text)}
.chart{width:100%;height:auto;display:block}.chart .ax{fill:var(--faint);font-size:11px;font-family:"DM",system-ui,sans-serif}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--soft);margin-bottom:6px}
.legend i{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:6px;vertical-align:-2px}
.meterline{display:inline-block;width:100px;height:6px;border-radius:3px;background:#EEF0F3;overflow:hidden;margin-right:10px;vertical-align:middle}.meterline span{display:block;height:100%;background:var(--pv)}
.meter{height:6px;border-radius:3px;background:#EEF0F3;overflow:hidden}.meter div{height:100%;background:var(--pv)}
.bar{height:6px;border-radius:3px;background:#EEF0F3;overflow:hidden}.bar div{height:100%;background:var(--bat)}
.flowbar{display:flex;height:14px;border-radius:7px;overflow:hidden}
.flowleg{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 24px;margin-top:10px}
.flowleg div{display:flex;justify-content:space-between;gap:8px;font-size:14px;padding:8px 0;border-top:1px solid var(--line)}
.flowleg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:7px}

/* přehled: karty jednotek */
.units{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.unit{background:var(--card);border-radius:18px;box-shadow:var(--shadow);padding:18px;display:flex;flex-direction:column;gap:10px;color:inherit;text-decoration:none;transition:box-shadow .15s,transform .15s}
.unit:hover{text-decoration:none;box-shadow:0 4px 12px rgba(16,24,40,.10);transform:translateY(-1px)}
.unit .t{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.unit .nm{font-weight:600;font-size:16px;color:var(--text)}.unit .sn{font-size:12.5px;color:var(--faint);margin-top:1px}
.unit .now{display:flex;align-items:baseline;justify-content:space-between}
.unit .kw{font-size:30px;font-weight:700;letter-spacing:-.02em;color:var(--pv-d)}.unit .kw small{font-size:14px;color:var(--faint);font-weight:500;margin-left:3px}
.unit.off .kw{color:var(--faint)}
.unit .mini{display:flex;gap:16px;font-size:13px;color:var(--muted)}.unit .mini b{color:var(--text);font-weight:600}
.spark{width:100%;height:46px;display:block}
.batt{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--soft)}
.batt span{width:26px;height:13px;border:1.6px solid #9CA3AF;border-radius:3px;padding:1px;display:inline-block;position:relative}
.batt span::after{content:"";position:absolute;right:-4px;top:3px;width:2px;height:5px;background:#9CA3AF;border-radius:0 1px 1px 0}
.batt span i{display:block;height:100%;border-radius:1px;background:var(--bat)}

/* detail */
.dtop{display:grid;grid-template-columns:1.05fr 1fr;gap:18px}
.flowsvg{width:100%;height:auto;display:block}
.flowsvg .fl{font-size:13px;fill:var(--muted);font-family:"DM",sans-serif}.flowsvg .fv{font-size:19px;font-weight:700;font-family:"DM",sans-serif}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.st{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:#F9FAFB}
.st .ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none}
.st b{display:block;font-size:17px;font-weight:700}.st span{font-size:12.5px;color:var(--muted)}
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.src{font-size:12px;color:var(--faint);font-weight:400;margin-left:6px}
.foot{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:14px;align-items:center;padding:4px 2px}
.foot a,.foot .lnk{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 15px;border-radius:10px;border:1px solid var(--line2);background:#fff;color:var(--text);font:inherit;font-size:14px;font-weight:500;cursor:pointer;text-decoration:none}
.foot a:hover,.foot .lnk:hover{background:#F9FAFB;text-decoration:none}
.foot .lnk.main{background:var(--text);border-color:var(--text);color:#fff}
.foot .lnk.main:hover{background:#1F2937}
.foot .lnk.w,.foot details.confirm.del summary{border-color:#F3C1BC;color:var(--bad);background:#fff}
.foot .lnk:disabled{opacity:.5;cursor:default}
.foot .muted{margin-right:auto}
.foot form{margin:0}
.facts{display:flex;flex-wrap:wrap;gap:12px 32px;font-size:14px;color:var(--soft)}
.facts span{display:flex;flex-direction:column;gap:2px}.facts small{font-size:12.5px;color:var(--muted)}.facts b{color:var(--text);font-weight:600}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:10px;overflow:hidden;background:#fff}
.seg label{display:flex;align-items:center;gap:6px;padding:8px 12px;font-size:14px;color:var(--soft);cursor:pointer}
.seg input{accent-color:var(--accent)}
.sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:12px}
.sum div{background:#F9FAFB;border-radius:12px;padding:10px 12px}.sum b{display:block;font-size:17px;font-weight:700}.sum span{font-size:12.5px;color:var(--muted)}

/* mobil */
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .side{display:none}
  .mobtop{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:#fff;border-bottom:1px solid var(--line2);position:sticky;top:0;z-index:15}
  .mobtop .logo{padding:0}
  .mobtop details{background:none;box-shadow:none;padding:0}
  .mobtop summary{list-style:none;min-height:40px;display:inline-flex;align-items:center;padding:0 14px;border:1px solid var(--line2);border-radius:10px;font-size:14px}
  .mobtop summary::-webkit-details-marker{display:none}
  .mobtop details[open]{position:static}
  .mobtop details nav{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line2);box-shadow:0 8px 16px rgba(16,24,40,.08);padding:8px 12px 12px;display:flex;flex-direction:column}
  .mobtop details nav a,.mobtop details nav button{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 10px;border-radius:10px;color:#374151;font:inherit;font-size:16px;font-weight:500;background:none;border:0;width:100%;text-align:left}
  .mobtop details nav a.active{background:var(--accent-bg);color:var(--accent-d)}
  .mobtop details nav form{margin:0}
  main{padding:18px 14px 48px}
  .dtop,.cols{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
}
@media (max-width:700px){
  table.rt{min-width:0!important}
  table.rt thead{display:none}
  table.rt,table.rt tbody,table.rt tr,table.rt td{display:block;width:auto}
  table.rt tr{border-bottom:1px solid var(--line2);padding:6px 0}
  table.rt td{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 0!important;border:0!important;text-align:right;white-space:normal}
  table.rt td::before{color:var(--muted);font-size:13px;text-align:left;flex:0 0 auto}
  .t-src td:nth-child(1)::before{content:"Název"} .t-src td:nth-child(2)::before{content:"Stav"} .t-src td:nth-child(3)::before{content:"Zařízení"} .t-src td:nth-child(4)::before{content:"Naposledy poslal"}
  .t-cli td:nth-child(1)::before{content:"Název"} .t-cli td:nth-child(2)::before{content:"Stav"} .t-cli td:nth-child(3)::before{content:"Naposledy četl"} .t-cli td:nth-child(4)::before{content:"Vytvořen"}
  .t-rej td:nth-child(1)::before{content:"Naposledy"} .t-rej td:nth-child(2)::before{content:"Odkud"} .t-rej td:nth-child(3)::before{content:"Kód"} .t-rej td:nth-child(4)::before{content:"Důvod"} .t-rej td:nth-child(5)::before{content:"Počet"}
  .t-aud td:nth-child(1)::before{content:"Čas"} .t-aud td:nth-child(2)::before{content:"Uživatel"} .t-aud td:nth-child(3)::before{content:"IP"} .t-aud td:nth-child(4)::before{content:"Akce"}
  .t-ses td:nth-child(1)::before{content:"Přihlášeno"} .t-ses td:nth-child(2)::before{content:"Aktivní"} .t-ses td:nth-child(3)::before{content:"IP"}
  .t-rank td::before{content:attr(data-l)}
  .meterline{width:60px}
  .btn,button{min-height:44px}
  .stats{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr;gap:10px}
  .card{padding:12px 14px}
  .big{font-size:22px}
}

.flowline{stroke-dasharray:7 8;animation:cdflow 1.1s linear infinite}
@keyframes cdflow{to{stroke-dashoffset:-15}}
@media (prefers-reduced-motion:reduce){.flowline{animation:none}}

/* stránka SolaX */
.sx-add{background:none;box-shadow:none;padding:0;position:relative}
.sx-add summary{list-style:none;cursor:pointer}
.sx-add summary::-webkit-details-marker{display:none}
.sx-pop{position:absolute;right:0;top:48px;z-index:10;width:min(720px,92vw);background:#fff;border-radius:18px;box-shadow:0 12px 32px rgba(16,24,40,.16);padding:22px;display:flex;flex-direction:column;gap:14px}
.sx-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sx-opt{border:2px solid var(--line2);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:4px;cursor:pointer}
.sx-opt b{font-size:15px}.sx-opt span{font-size:13px;color:var(--muted)}
#k_token:checked~.sx-opts .sx-o-token,#k_client:checked~.sx-opts .sx-o-client{border-color:var(--accent);background:#FFF7E6}
.sx-f{display:grid;grid-template-columns:1.3fr 1fr 1fr .6fr;gap:12px}
.sx-f-client{grid-template-columns:1fr 1fr;display:none}
#k_client:checked~.sx-f-token{display:none}
#k_client:checked~.sx-f-client{display:grid}
.sx-it{display:grid;grid-template-columns:1.6fr 1.1fr 1fr auto;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.sx-it:first-child{border-top:0}
.sx-nm{font-weight:600;font-size:16px}
.sx-v{font-weight:700;font-size:16px}.sx-v small{color:var(--faint);font-weight:500;font-size:13px}
.sx-edit summary{font-size:15px}
.sx-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.sx-check{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line2);border-radius:10px;font-size:14px;cursor:pointer}
.sx-check input{accent-color:var(--accent);width:16px;height:16px}
@media (max-width:760px){.sx-it{grid-template-columns:1fr 1fr}.sx-f,.sx-opts{grid-template-columns:1fr}}
.sx-f input,.sx-grid input{width:100%;min-width:0}.sx-f .field{min-width:0}

/* záložky detailu a spot */
.dtabs{display:flex;gap:26px;border-bottom:1px solid var(--line2);margin-top:-6px}
.dtabs a{padding:8px 0;color:var(--muted);font-size:15px;font-weight:500;border-bottom:2px solid transparent;text-decoration:none}
.dtabs a.on{color:var(--text);font-weight:600;border-bottom-color:var(--accent)}
.seg2{display:inline-flex;background:#EEF0F3;border-radius:999px;padding:3px}
.seg2 span{padding:6px 14px;border-radius:999px;font-size:14px;color:var(--muted)}
.seg2 span.on{background:#fff;color:var(--text);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.seg2 span.dis{opacity:.5;cursor:not-allowed}
.spot-ico{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;font-size:24px;font-weight:700;flex:none}
.spot-sell{background:#DCFCE7;color:#15803D}.spot-noexport{background:#DBEAFE;color:#1D4ED8}.spot-self{background:#F3F4F6;color:#374151}
.sw{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}.sw input{accent-color:var(--accent);width:16px;height:16px}
.unit[hidden]{display:none}

/* v21 – žebříček: řazení a sbalená upozornění */
.sortable th[data-col]{cursor:pointer;user-select:none;white-space:nowrap}
.sortable th[data-col]:hover{color:var(--ink)}
.sortable th .ar{color:#C4C9D1;margin-left:4px;font-size:11px}
.sortable th.on{color:var(--ink)}
.sortable th.on .ar{color:var(--accent,#E8890C)}
.sortsel{display:none;align-items:center;gap:8px;font-size:14px;color:var(--soft);margin:0 0 8px}
.sortsel select{min-height:40px;border:1px solid var(--line2);border-radius:10px;padding:0 10px;font:inherit;background:#fff}
details.warnsum{margin:0 0 10px;font-size:14px;color:var(--soft)}
details.warnsum summary{cursor:pointer;list-style:none;padding:4px 0}
details.warnsum summary::-webkit-details-marker{display:none}
details.warnsum[open] summary .muted{display:none}
details.warnsum ul{margin:6px 0 4px;padding-left:20px;display:flex;flex-direction:column;gap:4px;color:#7A4A00}
@media (max-width:700px){.sortsel{display:flex}}

/* v22 – stav elektrárny na kartě */
.unit{border:2px solid transparent}
.unit.eps{border-color:#F59E0B}.unit.fault{border-color:#EF4444}.unit.remote{border-color:#3B82F6}
.unit.off{border:2px dashed #C4C9D1;opacity:.62}
.unit .tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.pill.mode{background:#F3F4F6;color:#374151;font-weight:500}
.pill.eps{background:#FFEDD5;color:#C2410C}.pill.rem{background:#DBEAFE;color:#1D4ED8}
.pill.soh{align-self:flex-start;font-weight:500}
.unote{font-size:13px;color:var(--soft)}.unote.bad{color:#B91C1C}
.clients{display:flex;flex-direction:column;gap:5px;margin-top:6px;font-size:14px}
.clients>div{display:flex;justify-content:space-between;gap:10px}.clients>div>span:first-child{font-weight:600}
.clients .old{color:#C2410C;font-weight:600}.clients .blk{color:var(--faint);font-weight:400}
.zstat{font-size:14px;color:var(--soft);background:var(--card);border-radius:14px;padding:10px 14px;box-shadow:var(--shadow)}
.kv{display:grid;grid-template-columns:1fr auto;row-gap:8px;column-gap:12px;font-size:14px}.kv span{color:var(--muted)}.kv b{text-align:right;font-weight:600}
.ztab{width:100%;border-collapse:collapse;font-size:13.5px}.ztab th{font-size:12px;color:var(--muted);font-weight:600;text-align:right;padding:6px 4px;border-bottom:1px solid var(--line2)}
.ztab td{padding:7px 4px;border-bottom:1px solid #F3F4F6;text-align:right;white-space:nowrap}.ztab td:last-child{white-space:normal}.ztab th,.ztab td{padding-left:3px;padding-right:3px}.ztab th:first-child,.ztab td:first-child{text-align:left}
.ztab tr.dead td{color:#B91C1C;font-weight:600}
.zal{display:flex;flex-direction:column;gap:8px;font-size:13.5px}.zal .a{border-left:3px solid #EF4444;padding:2px 0 2px 10px}.zal .a.h{border-color:#D1D5DB;color:var(--muted)}

/* v23 – šířka podle monitoru, rámeček u každé karty, filtr podle stavu */
main.wide{max-width:2200px}main.mid{max-width:1600px}
.unit{border:2px solid #22A06B}
.unit.idle{border-color:#D1D5DB}
.unit.eps{border:3px solid #F59E0B}.unit.fault{border:3px solid #EF4444}.unit.remote{border:2px solid #3B82F6}
.unit.off{border:2px dashed #C4C9D1;opacity:.62}.unit.blk{border:2px dashed #6B7280;opacity:.7}
.stchips{display:flex;gap:8px;flex-wrap:wrap}
.stchips a{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 14px;border-radius:999px;background:#fff;border:1px solid var(--line2);font-size:14px;color:var(--soft);text-decoration:none}
.stchips a b{font-weight:600;color:var(--text)}.stchips a:hover{text-decoration:none;border-color:#C4C9D1}
.stchips a.on{background:var(--text);color:#fff;border-color:var(--text)}.stchips a.on b{color:#fff}
.stchips a.zero{color:#C4C9D1}.stchips a.zero b{color:#C4C9D1}
.stchips i{width:9px;height:9px;border-radius:50%;display:inline-block}
@media (max-width:700px){.stchips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}.stchips a{flex:none}}
.zted{border-top:1px solid var(--line2);margin-top:6px;padding-top:12px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}

/* v23.3 – výraznější rámečky tlačítek */
.btn{border:1.5px solid #9CA3AF}
.btn:hover{border-color:#4B5563;background:#F9FAFB}
.btn.primary{border-color:var(--text)}
.btn.warn,.btn.del{border-color:#E8A39B}
.btn.warn:hover,.btn.del:hover{border-color:var(--bad)}
details.confirm summary{border:1.5px solid #9CA3AF;color:var(--text)}
details.confirm summary:hover{border-color:#4B5563;background:#F9FAFB}
details.confirm.del summary,.foot details.confirm.del summary{border-color:#E8A39B;color:var(--bad)}

/* v24 – decentní rámečky všude */
.panel,.card-box,.card{border:1.5px solid #C9CED6}
.panel .two>div,.panel .two>form{border:1px solid #EAECEF;border-radius:12px;padding:12px 14px;background:#FCFCFD;min-width:0}
input[type=text],input[type=password],input[type=search],input[type=number],input[type=date],input[type=url],select,textarea{border:1.5px solid #C4C9D1}
input:focus,select:focus,textarea:focus{border-color:#6B7280;outline:none}
@media (min-width:701px){
  .panel table:not(.ztab){border:1px solid #EAECEF;border-radius:10px;border-collapse:separate;border-spacing:0;overflow:hidden}
  .panel table:not(.ztab) th{background:#F9FAFB;border-bottom:1px solid #EAECEF}
  .panel table:not(.ztab) tr:last-child td{border-bottom:0}
}

/* v25 – útoky a pokusy o přihlášení */
a.kvlink{color:inherit;text-decoration:none}a.kvlink:hover span:last-child{color:var(--accent-d)}a.kvlink span:last-child{color:var(--accent-d)}
.utiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.utiles>div{border:1px solid #EAECEF;border-radius:12px;padding:10px 14px;background:#FCFCFD;display:flex;flex-direction:column;gap:2px}
.utiles span{font-size:12.5px;color:var(--muted)}.utiles b{font-size:22px}.utiles small{font-size:12px;color:var(--muted)}
@media (max-width:700px){.t-ut td::before,.t-ut2 td::before{content:attr(data-l)}}

/* v26 – Face ID */
.pkbtn{min-height:48px;gap:10px;font-size:15px}
details.pkalt>summary{list-style:none;display:flex;justify-content:center;min-height:44px;width:100%;box-sizing:border-box}
details.pkalt>summary::-webkit-details-marker{display:none}
details.pkalt[open]>summary{display:none}
details.pkalt>form{margin-top:4px}
details.pkalt{background:none;box-shadow:none;border:0;padding:0;margin:0}