/* NetPorta – vzhled (drive soucast index.html) */
/* ---- barvy: vse se bere odsud, nove prvky pouzivaji jen tyto promenne ---- */
:root{
  --bg:#eef3f5;--surface:#ffffff;--surface2:#f4f8f9;--ink:#0d1b1e;--mute:#4f6168;--line:rgba(13,27,30,.10);--accent:#0f9f6e;--accent-ink:#ffffff;
  --ok:#0f9f6e;--bad:#e03131;--warn:#e67700;--idle:#b6bec8;
  --p-down:#8a95a3;--p-off:#3a4350;--p-100:#f08c00;--p-1g:#2f9e44;--p-25:#0ca678;--p-10g:#1971c2;
  --k-uplink:#7048e8;--k-ap:#c2255c;--k-trunk:#f5a400;--k-virt:#fab005;--k-fw:#e03131;--k-hv:#1971c2;--chassis:#fbfdfd;--chassis-line:#d3dfe3;--shadow:0 1px 1px rgba(13,27,30,.03),0 20px 40px -12px rgba(13,60,70,.14);
  --vlan-s:62%;--vlan-l:40%;
  /* Sklo (vzhled webu smiratech.cz): pruhledne plochy, barevne skvrny na pozadi, zaobleni */
  --glass:rgba(255,255,255,.72);--glass-strong:rgba(255,255,255,.86);--glass-line:rgba(13,27,30,.09);
  --page:radial-gradient(1200px 600px at 85% -10%,#d7f0ea 0,transparent 60%),radial-gradient(900px 500px at -10% 20%,#dceaf7 0,transparent 55%),#eef3f5;
  --glow:color-mix(in srgb,var(--accent) 20%,transparent);--r:18px;--r-s:12px;
  --font:'Wix Madefor Text',system-ui,"Segoe UI",sans-serif;--font-head:'Wix Madefor Display','Wix Madefor Text',system-ui,sans-serif;
}
[data-theme="dark"]{
  --bg:#0a1115;--surface:#111b20;--surface2:#16232a;--ink:#e8f0f2;--mute:#9fb3ba;--line:rgba(255,255,255,.08);--accent:#34d399;--accent-ink:#04261a;--ok:#34d399;
  --idle:#4a5564;--p-down:#465260;--p-off:#0a0d11;--chassis:#121c21;--chassis-line:rgba(255,255,255,.12);--shadow:inset 0 1px 0 rgba(255,255,255,.04),0 24px 48px -16px rgba(0,0,0,.5);
  --glass:rgba(255,255,255,.045);--glass-strong:rgba(17,27,32,.86);--glass-line:rgba(255,255,255,.08);
  --page:radial-gradient(1100px 600px at 85% -10%,rgba(20,184,166,.20) 0,transparent 60%),radial-gradient(900px 520px at -10% 25%,rgba(59,130,246,.16) 0,transparent 55%),#0a1115;--k-uplink:#9775fa;--k-ap:#f06595;--k-fw:#ff8787;--k-hv:#4dabf7;
  --vlan-s:55%;--vlan-l:46%;
}
*{box-sizing:border-box}
a{color:var(--accent)}
body{margin:0;font:14px/1.45 var(--font);background:var(--bg);color:var(--ink)}
/* pozadi se skvrnami (Sklo) jako pevna vrstva pod vsim – nepreskresluje se pri posunu */
body::before{content:'';position:fixed;inset:0;z-index:-1;background:var(--page);pointer-events:none}
header{display:flex;gap:4px;align-items:center;padding:10px 20px;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;flex-wrap:wrap}
header h1{font-size:16px;margin:0 18px 0 0;letter-spacing:.2px}
header{flex-direction:column;align-items:stretch;gap:6px;padding:8px 20px}
.hrow{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.hrow.sub{min-height:0}.hrow.sub:empty{display:none}
h1 .ver{font-size:11px;font-weight:500;color:var(--mute);margin-left:8px}
.tgrp{display:inline-flex;gap:2px;align-items:center;flex-wrap:wrap;border:1px solid var(--line);border-radius:10px;padding:2px 6px}
.tgrp.site{border-color:#2f8f6f;background:rgba(47,143,111,.08)}.tgrp.main{border-color:#3d6fc4;background:rgba(61,111,196,.08)}
.glab{font-size:11px;font-weight:700;letter-spacing:.5px;padding:0 6px}.tgrp.site .glab{color:#2f9f7a}.tgrp.main .glab{color:#4d82dd}
.tgrp.site button.tab.on{box-shadow:inset 0 -2px #2f9f7a}.tgrp.main button.tab.on{box-shadow:inset 0 -2px #4d82dd}
.modeb.br{display:inline-flex;gap:6px;align-items:center}
[hidden]{display:none!important}
.accbar{display:flex;gap:8px;margin-bottom:8px}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}.prn{margin:0}
.tagx{border-radius:6px;padding:2px 8px;font-size:12px;border:1px solid var(--line);white-space:nowrap}.tagx.ok{color:var(--ok)}.tagx.warn{color:var(--warn);border-color:var(--warn)}.tagx.bad{color:var(--bad);border-color:var(--bad)}
.perr{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}.perr span{color:var(--warn);font-size:12.5px}
.sups{display:flex;flex-direction:column;gap:5px;margin-top:10px}.sup{display:grid;grid-template-columns:minmax(80px,38%) 1fr 46px;gap:8px;align-items:center;font-size:12.5px}
.supn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.supb{height:9px;border-radius:5px;background:var(--surface2);overflow:hidden;border:1px solid var(--line)}.supb i{display:block;height:100%}.sup b{text-align:right}
body.focusing #world>*:not(.focused){opacity:.13;filter:blur(2px);pointer-events:none;transition:opacity .2s,filter .2s}
body.focusing #world #links{opacity:.15}body.focusing #world .focused{z-index:9}
body.focusing #world .focused .lab span{max-height:none;overflow:visible}
.focusbar{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:16;display:flex;gap:10px;align-items:center;background:var(--surface);border:1px solid var(--accent);border-radius:10px;padding:6px 10px;box-shadow:0 8px 24px #0004;white-space:nowrap}
.credsbox .card{border:0;padding:0;margin:0 0 12px;background:none;box-shadow:none}.credsbox #credsin h2{font-size:15px}
#side .scoll{margin-top:6px;width:100%;justify-content:flex-start}
.sidehot{position:fixed;left:0;top:0;bottom:0;width:10px;z-index:30;display:none}body.sidehide .sidehot{display:block}
body.sidehide #side{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .18s;box-shadow:8px 0 30px #0005;width:224px}
body.sidehide.peek #side{transform:none}body.sidehide #side .lbl,body.sidehide #side .sgrp{display:revert}
.mtb{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px}.mopt{position:relative}
.mopt>summary{list-style:none;cursor:pointer;border:1px solid var(--line);border-radius:8px;padding:6px 11px;background:var(--surface);user-select:none}
.mopt>summary::-webkit-details-marker{display:none}.mopt[open]>summary{border-color:var(--accent);color:var(--accent)}
.moptb{position:absolute;left:0;top:calc(100% + 6px);z-index:15;width:min(760px,90vw);display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px;box-shadow:0 12px 30px #0005}
.moptb .legend{width:100%;margin:2px 0}.moptb .mleg{width:100%;border-top:1px solid var(--line);padding-top:8px;margin-top:2px}.vlnl{margin:0 0 4px!important;display:inline-flex!important;gap:6px;align-items:center;color:var(--ink)!important;font-size:13px}.vlnl input{width:auto}
.layout{display:flex;min-height:100vh}.mainwrap{flex:1;min-width:0;display:flex;flex-direction:column}
#side{width:224px;flex:none;position:sticky;top:0;height:100vh;overflow:auto;background:var(--surface);border-right:1px solid var(--line);padding:10px 8px;display:flex;flex-direction:column;gap:1px;transition:width .15s;z-index:6}
#side .sbrand{display:flex;align-items:center;gap:10px;padding:4px 6px 12px}.slogo{width:30px;height:30px;flex:none;border-radius:8px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-weight:800}
#side .sgrp{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--mute);padding:12px 10px 4px}
#side button.tab{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px 10px;border-radius:8px;box-shadow:none;color:var(--ink);font-weight:400;white-space:nowrap}
#side button.tab:hover{background:var(--surface2)}#side button.tab.on{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);font-weight:600;box-shadow:none;border-radius:8px}
#side .ico{width:20px;text-align:center;flex:none}#side .tcnt{margin-left:auto}
#side .ssite{display:flex;flex-direction:column;gap:4px;padding:0 6px 8px}#side .ssite select{width:100%}
.sidegrip{position:fixed;left:216px;top:50%;transform:translateY(-50%);z-index:7;width:16px;height:46px;padding:0;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--mute);font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.75;transition:left .15s,opacity .15s,color .15s,border-color .15s}
.sidegrip:hover{opacity:1;color:var(--accent);border-color:var(--accent)}body.sidecol .sidegrip{left:50px}body.sidehide .sidegrip{display:none}
#side .sfoot{margin-top:auto;padding:10px 6px 4px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
/* sbalene menu: texty zmizi, ale misto si drzi (visibility) – ikony zustanou presne na svem miste, nic neposkoci */
body.sidecol #side{width:58px;overflow-x:hidden}body.sidecol #side .lbl,body.sidecol #side .sgrp,body.sidecol #side .tcnt{visibility:hidden}body.sidecol #side .sgrp,body.sidecol #side button.tab,body.sidecol #side .sbrand{white-space:nowrap;overflow:hidden}body.sidecol #side .ssite{overflow:hidden}
header{position:sticky;top:0;z-index:5;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:8px;padding:8px 16px;background:var(--surface);border-bottom:1px solid var(--line)}
.gsw{position:relative;flex:0 1 460px;min-width:180px}.gsw input{width:100%;padding:7px 12px;border-radius:10px}
.gres{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px #0004;max-height:60vh;overflow:auto;z-index:20}
.gi{display:flex;gap:10px;align-items:baseline;padding:8px 12px;cursor:pointer}.gi.on,.gi:hover{background:var(--surface2)}.gi b{white-space:nowrap}.gi .mute{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hstats{display:flex;gap:8px;flex-wrap:nowrap;overflow:hidden;min-width:0;margin-right:10px}#clock{white-space:nowrap;font-size:12px}header button{white-space:nowrap}.hs{border:1px solid var(--line);border-radius:20px;padding:3px 10px;font-size:12px;cursor:pointer;white-space:nowrap;color:var(--mute)}
.hs:first-child{color:var(--ok)}.hs.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent)}.hs.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
#toasts{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:8px;z-index:50}
.toast{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--ok);border-radius:10px;padding:10px 14px;box-shadow:0 8px 24px #0004;max-width:420px;transition:opacity .4s}
.toast.err{border-left-color:var(--bad)}.toast.out{opacity:0}
main{margin:0 auto!important;width:100%;box-sizing:border-box;align-self:stretch}main.wide{max-width:none!important}main:not(.wide){max-width:1560px}
.licb{border-radius:6px;padding:2px 8px;font-size:12px;font-weight:700;margin-left:8px}.licb.demo{background:var(--warn);color:#1b1300}.licb.grace{border:1px solid var(--warn);color:var(--warn)}
.dtab th{position:relative}.dtab td input,.dtab td select{width:100%;min-width:0;box-sizing:border-box}
.dtab th.sortable{cursor:pointer;user-select:none}.dtab th[data-sort=asc]::after{content:' ▲'}.dtab th[data-sort=desc]::after{content:' ▼'}
.colrs{position:absolute;right:-3px;top:0;bottom:0;width:7px;cursor:col-resize;z-index:2}.colrs:hover{background:var(--accent);opacity:.5}
.tblreset{display:inline-block;font-size:12px;margin:0 0 6px;color:var(--mute)}
.dtab:not([style*=fixed]) td:nth-child(4) input{min-width:150px}.dtab:not([style*=fixed]) td:nth-child(8) input{min-width:125px}
.dtab td:nth-child(3){min-width:150px}.fcatb{padding:2px 4px;margin-left:2px}
#panel{border-left-width:3px}
.tl{margin:8px 0 4px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}.tl.past{border-color:var(--warn);background:rgba(245,159,0,.08)}
.tlrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.tl.past #tllab{color:var(--warn)}
.tlbar{position:relative;margin-top:6px;padding-top:18px}.tlticks{position:absolute;left:8px;right:8px;top:0;height:18px}
.tlticks i{position:absolute;bottom:0;width:2px;background:var(--accent);opacity:.7;transform:translateX(-1px)}
.tlbar input[type=range]{width:100%}
body.histmode #world{outline:2px dashed var(--warn);outline-offset:-2px}
.node.virt .prow{display:flex;gap:10px;align-items:flex-end;flex:none}.node.virt .prow .sports{margin-left:auto}
.sports{border-color:#8e6bd8}.dstrip{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:8px;width:0;min-width:100%;font-size:11px;position:relative;z-index:4;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:5px 7px;box-sizing:border-box}.dstrip.um{width:auto;margin:6px 0}.dport{display:flex;flex-wrap:wrap;gap:3px;align-items:center}.dpn{font-weight:600;color:var(--mute);cursor:pointer;min-width:18px}.dtile{display:inline-flex;gap:4px;align-items:center;max-width:150px;padding:1px 6px;border:1px solid var(--line);border-radius:6px;background:var(--surface);cursor:pointer;white-space:nowrap}.dtile .dtn{overflow:hidden;text-overflow:ellipsis}.agb{font-size:10px;margin-left:2px;white-space:nowrap}.agb.warn{color:var(--warn)}.aghelp{margin:10px 0}.aghelp summary{cursor:pointer}.aghelp summary b{display:inline-block;width:18px;height:18px;border-radius:50%;background:var(--accent);color:var(--accent-ink);text-align:center;line-height:18px;margin-right:6px}.aghelp li{margin:4px 0}.dtile.stale{opacity:.55}.dtile.more{font-weight:600}.dtile:hover{border-color:var(--accent)}.dlgback{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000;display:flex;align-items:center;justify-content:center}.dlg{width:min(480px,92vw);margin:0;box-shadow:var(--shadow)}.mtabs{margin-bottom:10px}.mpane{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}.mpane[hidden]{display:none}.mpane .legend{width:100%}details.psec{border-top:1px solid var(--line);padding:6px 0}details.psec>summary{cursor:pointer;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--mute);padding:6px 0}details.psec[open]>summary{color:var(--ink)}.card.folded .pbody{display:none}.ptab td[rowspan]{vertical-align:top}.dscroll{overflow:auto;max-height:calc(100vh - 230px)}.dscroll #t th{position:sticky;top:0;z-index:2;background:var(--surface)}.dscroll .stk{position:sticky;left:0;z-index:1;background:var(--surface)}.dscroll th.stk{z-index:3}#t.ro tr[data-mac]{cursor:pointer}#t.ro tr[data-mac]:hover td{background:var(--surface2)}.chip.click{cursor:pointer}.colpick{position:relative}.colpick>summary{list-style:none;cursor:pointer;border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:13px}.colpick>summary::-webkit-details-marker{display:none}.colpickb{position:absolute;z-index:20;top:110%;left:0;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;box-shadow:var(--shadow);min-width:210px}.colpickb label{display:flex;gap:8px;align-items:center;margin:3px 0;color:var(--ink);font-size:13px}.colpickb input{width:auto}#catcard>summary{cursor:pointer}.port.sas{background:#3b2f5c;color:#e6dcff}.port.sas.on{background:#7b5cd6;color:#fff}.port.sas.fc{background:#5c3a1f;color:#ffe6cc}.port.sas.fc.on{background:#d9822b;color:#fff}
#links path.sas{stroke:#9b7be8;stroke-width:2;stroke-dasharray:6 3}#links path.fc{stroke:#e8963b;stroke-width:2;stroke-dasharray:6 3}
.accgrp{font-size:11px;font-weight:700;letter-spacing:.6px;color:var(--mute);text-transform:uppercase;margin:16px 2px 6px}
.card.acc>h2{cursor:pointer;display:flex;align-items:center;gap:10px;margin:0;user-select:none}
.card.acc>h2 .accarr::before{content:'▸';color:var(--mute);font-size:13px}.card.acc.open>h2 .accarr::before{content:'▾'}
.card.acc>h2 .accsum{margin-left:auto;font-size:12px;font-weight:400;color:var(--mute)}
.card.acc:not(.open)>:not(h2){display:none!important}.card.acc.open>h2{margin-bottom:12px}
.card.acc{padding-top:12px;padding-bottom:12px;margin-bottom:8px}.card.acc.accwarn{border-color:var(--warn)}
h2{font-size:15px;margin:0 0 10px}h3{font-size:13px;margin:18px 0 6px;color:var(--mute);text-transform:uppercase;letter-spacing:.6px}
button,input,select{font:inherit;color:inherit}
button{padding:6px 12px;border:1px solid var(--line);background:var(--surface);border-radius:8px;cursor:pointer}
button:hover{border-color:var(--mute)}
button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
button.ghost{border-color:transparent;background:none}
button.tab{border-color:transparent;background:none;color:var(--mute);padding:6px 10px}
button.tab.on{color:var(--ink);font-weight:600;box-shadow:inset 0 -2px var(--accent);border-radius:0}
button.danger{color:var(--bad)}
button.icon{padding:4px 8px;line-height:1}
input,select{padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:var(--surface);width:100%}
input:focus,select:focus{outline:2px solid var(--accent);outline-offset:-1px}
label{display:block;margin:10px 0 3px;color:var(--mute);font-size:12px}
main{padding:20px;max-width:1560px;margin:auto;position:relative}
main.wide{max-width:none;padding-bottom:0}
#viewport{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:14px;background:var(--bg);cursor:grab;touch-action:none;
  background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:20px 20px}
#viewport.panning{cursor:grabbing}
#world{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0}
#world.far .lab span,#world.far .lab::after{visibility:hidden}
.hint{position:absolute;left:12px;bottom:10px;font-size:12px;color:var(--mute);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:4px 10px;pointer-events:none;z-index:6}
.zoom{position:absolute;right:12px;bottom:10px;display:flex;gap:4px;z-index:6}
.zoom button{padding:4px 10px}
.member{margin:0}.member>.mute{height:22px;display:flex;align-items:flex-end}
.card.sw .face{margin:8px 0 26px}
.card.sw .swhead{display:block;margin-bottom:4px}
.swhead .r1{display:flex;gap:14px;align-items:center}
.node{cursor:default}
/* switch na plose: jen panel portu bez ramecku, chyta se za telo; informace jsou ve stitku u jeho boku */
.unit{position:absolute;user-select:none;cursor:grab;touch-action:none}
.unit:active{cursor:grabbing}
.unit .port,.unit .lab.has{cursor:pointer}
.unit .block{padding-left:26px}
.grip{position:absolute;left:4px;top:170px;height:75px;width:18px;display:flex;align-items:center;justify-content:center;color:#8f9aaa;font-size:15px;z-index:2}
.mtag{position:absolute;left:0;top:-20px;white-space:nowrap}
/* tlacitko v tele switche vpravo od portu: rozbali seznam portu primo pod switchem */
.unit .block.last{padding-right:40px}
.pbtn{position:absolute;right:6px;top:193px;width:28px;height:30px;padding:0;z-index:2;border-radius:6px;background:#3a4452;border:1px solid #556070;color:#e7ecf2;font-size:14px;line-height:1}
.pbtn:hover{background:#4a5666}
/* seznam vyjede od tlacitka doprava a nahoru: levy dolni roh ma u spodni hrany tela switche. Prekryva ostatni prvky, nic neodsouva. */
.plist{position:absolute;left:calc(100% + 12px);bottom:calc(100% - 251px);z-index:8;max-height:900px;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:4px 8px;cursor:default;user-select:text;box-shadow:var(--shadow)}
.plist td,.plist th{font-size:12px;padding:5px 7px;white-space:nowrap}
.node .pbtn.apb{top:6px;right:6px;width:24px;height:24px}
/* pristupovy bod: velka znacka Wi-Fi s poctem klientu, ramecek v barve AP; chyta se za horni cast */
.node.ap{border-color:var(--k-ap)}
.aprow{display:flex;gap:10px;align-items:center;padding-right:26px;cursor:grab;user-select:none;touch-action:none}
.aprow:active{cursor:grabbing}
.aprow .nh{display:block;cursor:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apico{position:relative;flex:0 0 42px;height:42px;border-radius:10px;background:color-mix(in srgb,var(--k-ap) 16%,transparent);color:var(--k-ap);display:flex;align-items:center;justify-content:center}
.apico svg{width:30px;height:30px}
/* ikona druhu prvku: switch, firewall, virtualizace (obecna, Proxmox, Hyper-V, ESXi) */
.kico{flex:0 0 30px;width:30px;height:30px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,currentColor 16%,transparent)}
.kico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kico.sw{color:var(--accent)}.kico.fw{color:var(--k-fw)}.kico.vm{color:var(--k-virt)}.kico.px{color:var(--ink)}.kico.hv{color:var(--k-hv)}.kico.esx{color:var(--mute)}
.info h2{min-width:0}
/* zaruky a licence: pocitadlo na zalozce, barvy terminu, tlacitka skryta uctu jen pro cteni */
.tcnt{display:inline-block;margin-left:6px;min-width:18px;padding:0 5px;border-radius:9px;background:var(--bad);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}
.tcnt:empty{display:none}
.exp-bad{color:var(--bad);font-weight:600}.exp-warn{color:var(--warn);font-weight:600}.exp-soon{color:#b08800;font-weight:600}
[data-theme="dark"] .exp-soon{color:#ffd43b}
.ro .awrite{display:none!important}
.inv .iwrite.iwrite{display:revert!important}.inv #panel .iwrite button,.inv #panel button.iwrite,.inv #panel form.iwrite button{display:inline-block!important}
.inv #panel .iinp,.inv #panel .iwrite input,.inv #panel .iwrite select,.inv #panel form.iwrite input{pointer-events:auto;opacity:1}
.ro #panel .mypw input{pointer-events:auto;opacity:1}.inv #panel.iform input,.inv #panel.iform select,.inv #panel.iform textarea{pointer-events:auto;opacity:1}
.inv #panel.iform form button,.inv #panel.iform .danger{display:inline-block!important}.ro #panel .mypw button{display:inline-block!important}
.apn{position:absolute;right:-7px;top:-7px;min-width:18px;height:18px;border-radius:9px;background:var(--k-ap);color:#fff;font-size:10px;font-weight:700;line-height:18px;text-align:center;padding:0 5px}
.plist.apl{bottom:0}
.node.um .nh{padding-right:30px}
.info{position:absolute;width:250px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 10px;z-index:4;box-shadow:var(--shadow);font-size:12px;cursor:default}
.info h2{margin:0;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.info .r1{display:flex;gap:8px;align-items:center;margin-bottom:3px}
.info .icon{padding:2px 7px}
#links path.il{stroke:var(--mute);stroke-width:1.5;opacity:.8}
/* ucet jen pro cteni: bez sprav a bez tlacitek, ktera neco meni */
.ro .tab[data-v=creds],.ro .tab[data-v=sources],.ro .tab[data-v=settings],.ro .tab[data-v=backups],.ro .tab[data-v=sites],.ro .tab[data-v=logs]{display:none}
.ro #panel form button,.ro #panel .danger,.ro #addum,.ro [data-rf],.ro #lr,.ro #hl,.ro #panel [data-hdel],.ro #la,.ro #ln{display:none}
.ro #panel input,.ro #panel select{pointer-events:none;opacity:.75}
.ro .node.virt{resize:none}
.ro .grip{display:none}
#links path.hit{stroke:transparent;stroke-width:14;stroke-dasharray:none;opacity:1;pointer-events:stroke;cursor:pointer}
.pop{position:fixed;z-index:30;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;box-shadow:0 10px 34px #0007;font-size:13px;max-width:380px}
#links{position:absolute;left:0;top:0;width:1px;height:1px;overflow:visible;pointer-events:none;z-index:3}
#links path{fill:none;stroke:var(--k-uplink);stroke-width:2;stroke-linejoin:round;opacity:.85}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:16px;box-shadow:var(--shadow)}
.center{max-width:400px;margin:10vh auto}
.swhead{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.swhead h2{margin:0}
.mute{color:var(--mute);font-size:12px}
.err{color:var(--bad)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--idle);vertical-align:1px}
.dot.ok{background:var(--ok)}.dot.bad{background:var(--bad)}
.stat{display:inline-flex;gap:5px;align-items:center;font-size:11px;color:var(--mute);cursor:default}
.scroll{overflow-x:auto;padding:0 0 4px}
.face{display:inline-flex;gap:22px;align-items:stretch;margin-top:6px}
.block{display:grid;grid-auto-flow:column;grid-template-rows:176px 30px 30px 176px;column-gap:4px;row-gap:3px;padding:0 10px;position:relative}
.block::before{content:"";position:absolute;left:0;right:0;top:170px;height:75px;border-radius:8px;background:var(--chassis);border:1px solid var(--chassis-line);box-sizing:border-box;z-index:0}
.port{width:30px;height:30px;border-radius:5px;background:var(--p-down);position:relative;z-index:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;font-weight:600;border:2px solid transparent;transition:opacity .15s}
.port.off{background:var(--p-off);color:#7a8494}
.port.s100{background:var(--p-100)}.port.s1g{background:var(--p-1g)}.port.s25{background:var(--p-25)}.port.s10g{background:var(--p-10g)}
.port.uplink{border-color:var(--k-uplink)}.port.ap{border-color:var(--k-ap)}.port.trunk{border:2px dashed var(--ink)}
.port.virt{border:3px double var(--k-virt)}
/* zdravi portu: oranzovy / cerveny prstenec a vykricnik */
.port.phw{box-shadow:0 0 0 3px var(--warn)}.port.phb{box-shadow:0 0 0 3px var(--bad)}
.port .phx{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--bad);color:#fff;font-size:10px;line-height:14px;text-align:center;font-weight:800;z-index:2}
.port.phw .phx{background:var(--warn)}
.phbox{border-left:4px solid var(--warn)}.phbox.bad{border-left-color:var(--bad)}
.node.virt{border:3px double var(--k-virt);overflow:hidden;min-width:200px;min-height:80px;display:flex;flex-direction:column}
/* okno serveru: obsah se posouva uvnitr, rada portu zustava vzdy videt, prichycena k levemu dolnimu rohu */
.node.virt .vbody{flex:1 1 auto;min-height:0;overflow:auto}
/* uchyty pro roztazeni okna serveru ve vsech ctyrech rozich (zvyrazni se po najeti mysi na okno) */
.rh{position:absolute;width:12px;height:12px;z-index:5;border-radius:3px}
.rh[data-c=nw]{left:0;top:0;cursor:nwse-resize}.rh[data-c=ne]{right:0;top:0;cursor:nesw-resize}
.rh[data-c=sw]{left:0;bottom:0;cursor:nesw-resize}.rh[data-c=se]{right:0;bottom:0;cursor:nwse-resize}
.node.virt:hover .rh{background:color-mix(in srgb,var(--k-virt) 45%,transparent)}
.ro .rh{display:none}
/* detail portu: zarizeni jako kompaktni radky, akce pod sebou, pripojene prvky se zelenym obrysem */
.box.dev{padding:8px 10px}.devrow{display:flex;gap:10px;align-items:center}.devrow b{font-weight:600}
.dico{flex:0 0 22px;text-align:center;font-size:16px}.devedit{margin-top:8px;border-top:1px solid var(--line);padding-top:4px}
.pacts{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:12px 0}
.pacts .linked{border:2px solid var(--ok)}
/* Main: vybrana pobocka v horni liste, vyrazne */
#sitebar{display:inline-flex;gap:8px;align-items:center;margin-right:8px}
#sitebar select{width:auto;max-width:220px;padding:4px 8px}
.siteb{background:#f59f00;color:#1b1300;border-radius:8px;padding:4px 12px;font-weight:800;font-size:14px;letter-spacing:.3px}
.siteage{font-size:12px;color:var(--mute)}.siteage.old{color:var(--bad);font-weight:700}
.mainadm .tab[data-v=settings],.mainadm .tab[data-v=backups],.mainadm .tab[data-v=sites],.mainadm .tab[data-v=logs]{display:flex!important}
.mainadm .tab[data-v=creds],.mainadm .tab[data-v=sources],.mainadm .tab[data-v=tools],.mainadm .mainhide{display:none!important}
.modeb{background:var(--accent);color:var(--accent-ink);border-radius:6px;padding:2px 8px;font-size:12px;font-weight:700;margin-right:14px;letter-spacing:.5px}
/* ramecky casti v bocnim panelu */
.psec{border:1px solid var(--line);border-radius:10px;padding:6px 12px 10px;margin:12px 0;background:var(--surface2)}
.psec>h3:first-child,.psec>form:first-child>h3:first-child{margin-top:6px}
.psec .box{background:var(--surface)}
.psec>p:last-child,.psec>form:last-child>p:last-child{margin-bottom:0}
.ro .psec:has(> .awrite:only-child){display:none}
.node.virt .vports{flex:none;align-self:flex-start;margin:6px 0 0}
.port .mm{position:absolute;right:-7px;bottom:-7px;min-width:16px;height:16px;border-radius:8px;background:var(--ink);color:var(--bg);font-size:9px;line-height:16px;text-align:center;padding:0 3px;font-weight:700}
.port.sel{outline:3px solid var(--accent);outline-offset:1px}
.port .poe{position:absolute;right:-5px;top:-6px;font-size:10px;background:#fcc419;color:#000;border-radius:50%;width:14px;height:14px;line-height:14px;text-align:center}
.port .lagb{position:absolute;left:7px;right:8px;bottom:-5px;height:9px;border-radius:5px;background:var(--lc);color:#fff;font-size:7px;line-height:9px;text-align:center;font-weight:800;z-index:2;letter-spacing:.02em}
.port .lagb.guess{background:var(--chassis);color:var(--lc);border:1px dashed var(--lc);line-height:7px}.port .lagb.off{background:var(--mute)}.port .lagb.agg{left:2px;right:2px;font-size:6px}
.lagchip{display:inline-block;margin-left:4px;padding:0 6px;border-radius:8px;font-size:11px;font-weight:600;color:#fff;background:var(--lc);vertical-align:1px}.lagchip.guess{background:transparent;color:var(--lc);border:1px dashed var(--lc)}
#links path.lagl{stroke-width:4}#links text.lagt{font-size:11px;font-weight:700;fill:var(--ink);paint-order:stroke;stroke:var(--bg);stroke-width:4px;stroke-linejoin:round}#links text.lagt.warn{fill:var(--warn)}
.port .pp{position:absolute;left:-4px;bottom:-5px;width:8px;height:8px;border-radius:50%;background:var(--accent);border:1px solid var(--chassis)}
.dim{opacity:.16}
.lab{width:30px;position:relative;z-index:1;display:flex;justify-content:center;cursor:pointer;transition:opacity .15s}
.lab span{writing-mode:vertical-rl;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-height:162px}
.lab.top{align-items:flex-end}.lab.top span{transform:rotate(180deg)}
.lab.bot{align-items:flex-start}
.lab.has::after{content:"";position:absolute;left:14px;width:1px;height:12px;background:var(--mute)}
.lab.top.has::after{bottom:-3px}.lab.bot.has::after{top:-3px}
.lab.top.has{padding-bottom:11px}.lab.bot.has{padding-top:11px}
.k-uplink{color:var(--k-uplink);font-weight:600}.k-ap{color:var(--k-ap);font-weight:600}.k-trunk{color:var(--ink);font-weight:600}
.stale{color:var(--mute);font-style:italic}
.toolbar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.toolbar select{width:auto}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{border:0;border-radius:0;background:var(--surface);color:var(--mute)}
.seg button.on{background:var(--accent);color:var(--accent-ink);font-weight:600}
.legend{display:flex;gap:12px;flex-wrap:wrap;color:var(--mute);font-size:12px}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-2px;margin-right:4px}
#panel{position:fixed;right:0;top:0;bottom:0;width:420px;max-width:100vw;background:var(--surface);border-left:1px solid var(--line);
  padding:18px;overflow:auto;z-index:10;box-shadow:-8px 0 30px #0003}
table{border-collapse:collapse;width:100%}
th,td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:middle}
th{color:var(--mute);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.5px}
td input,td select{padding:4px 6px}
tr.click{cursor:pointer}tr.click:hover td{background:var(--surface2)}
.row{display:flex;gap:10px;flex-wrap:wrap}.row>*{flex:1;min-width:140px}
code{font-family:ui-monospace,Consolas,monospace;font-size:12px}
details summary{cursor:pointer;color:var(--accent);margin-top:10px;font-size:13px}
.box{padding:10px 12px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:var(--surface2)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:3px 14px;font-size:13px}.kv span:nth-child(odd){color:var(--mute)}
#links path.nl{stroke:var(--mute);stroke-dasharray:5 3}
#links path.blk{stroke:var(--mute);stroke-dasharray:7 5}
/* pripojeni serveru podle ucelu: data plne, management tenci, iDRAC/iLO teckovane, jine carkovane, navrh tenky sedy */
#links path.vl-data{stroke:var(--k-virt)}#links path.vl-mgmt{stroke:var(--k-virt);stroke-width:1.2}
#links path.vl-oob{stroke:var(--k-virt);stroke-dasharray:2 4}#links path.vl-other{stroke:var(--k-virt);stroke-dasharray:8 3}
#links path.vl-sug{stroke:var(--mute);stroke-width:1;stroke-dasharray:2 5;opacity:.75}
.srvl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* porty serveru ve spodni casti jeho okna: jako na switchi, v jedne rade, barva podle linky na portu switche */
.vports{display:flex;gap:4px;margin:8px 0 2px;padding:6px 8px;border-radius:8px;background:var(--chassis);border:1px solid var(--chassis-line);width:max-content;max-width:100%;overflow:hidden}
.vports .port{font-size:9px;flex:0 0 30px}.srvl.bad{color:var(--bad)}.srvl.warn{color:var(--warn)}
.stage{position:relative}
#map{position:relative}
.card.sw{position:absolute;width:max-content;margin:0}
.card.sw .swhead,.card.sw>p,.card.sw>details{width:0;min-width:100%}
.card.sw>details{overflow-x:auto}
h2.grab{cursor:grab;user-select:none;touch-action:none}h2.grab:active{cursor:grabbing}
.node .nh{touch-action:none}
.node{position:absolute;width:262px;background:var(--surface2);border:1px solid var(--line);border-radius:10px;padding:8px 10px;z-index:4;font-size:12px;box-shadow:var(--shadow)}
.node .nh{font-weight:600;font-size:13px;cursor:grab;user-select:none;display:flex;gap:6px;align-items:center}
.node .nh:active{cursor:grabbing}
.node .ln{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nps{display:flex;gap:3px;flex-wrap:wrap;margin:6px 0}
.np{width:18px;height:18px;border-radius:3px;background:var(--p-down);color:#fff;font-size:9px;font-weight:600;display:flex;align-items:center;justify-content:center}
.np.on{background:var(--p-1g)}
#side button.tab[data-v="find"]{display:none}
.fitem{display:flex;gap:12px;align-items:center;padding:10px 4px;border-bottom:1px solid var(--line);cursor:pointer}.fitem .fic{font-size:22px}.fitem .mute{overflow:hidden;text-overflow:ellipsis}
@media (max-width:900px){
  #side{position:fixed;left:0;top:0;bottom:0;z-index:60;width:250px!important;transform:translateX(-100%);transition:transform .18s;box-shadow:8px 0 30px #0006}
  body.mnav #side{transform:none}#side .lbl,#side .sgrp{display:revert!important}#side button.tab[data-v="find"]{display:flex!important}.sidehot{display:none!important}
  header{gap:6px!important;padding:8px 10px!important}header .hstats,#clock,#sidecolb,header .gsw{display:none!important}header{justify-content:space-between}
  #main{padding:10px!important}.card{padding:12px}#panel{width:100vw!important;max-width:100vw}
  .row{flex-wrap:wrap}.row>div{min-width:min(100%,220px)}table{font-size:13px}main .card{overflow-x:auto;max-width:100%}main{overflow-x:hidden}
}
.chip{display:inline-block;padding:1px 8px;border-radius:999px;background:var(--surface2);border:1px solid var(--line);font-size:12px;margin:0 6px 6px 0}
.settabs{margin-bottom:12px;flex-wrap:wrap}.bksec{margin-top:12px;border-top:1px solid var(--line);padding-top:8px}.bksec>summary{cursor:pointer;font-weight:600;padding:4px 0}.swstep[hidden]{display:none}
#world.nolagt .port .lagb{font-size:0}#world.nolagt #links text.lagt{display:none}#zq{font-weight:700}
header .langsel{width:auto;padding:4px 6px;background:transparent;border:1px solid var(--line);border-radius:8px;color:var(--ink);font-size:13px;cursor:pointer}
.nasm{display:flex;flex-wrap:wrap;gap:18px;margin:10px 0}.nasm div{display:flex;flex-direction:column}.nasm b{font-size:17px}.nasm span{font-size:12px;color:var(--mute)}
.nas h3{font-size:13px;margin:12px 0 6px;color:var(--mute);text-transform:uppercase;letter-spacing:.04em}.nasv{display:grid;grid-template-columns:minmax(120px,40%) 1fr;gap:8px;align-items:center;font-size:12.5px;margin:4px 0}.nasv .sup{grid-template-columns:auto 1fr 40px}
.nasl{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px}.nasd{font-size:12.5px}.nasd td,.nasd th{padding:3px 6px}.warnt{color:var(--warn)}.nasgrid{grid-template-columns:repeat(auto-fill,minmax(420px,1fr))}
/* karty koncovych zarizeni na mape */
.node.dcard{width:196px;padding:8px 10px;cursor:grab;touch-action:none;border-color:color-mix(in srgb,var(--accent) 45%,var(--line));font-size:11.5px}
.node.dcard.stale{opacity:.72}.node.dcard:hover{border-color:var(--accent)}
.dcard .dch{display:flex;gap:6px;align-items:center;color:var(--mute);font-size:10.5px;text-transform:uppercase;letter-spacing:.4px}
.dcard .dch .dot{margin-left:auto}
.dcard .dcn{font-weight:700;font-size:13px;margin:3px 0 5px;color:var(--ink)}
.dcard .dcr{display:flex;justify-content:space-between;gap:8px;line-height:1.45}.dcard .dcr span{color:var(--mute);flex:none}
.dcard .dcr b{font-weight:500;text-align:right;overflow-wrap:anywhere}.dcard .dcr b.ok{color:var(--ok,#3fb950)}.dcard .dcr b.warn{color:var(--warn)}.dcard .dcr b.err{color:var(--bad,#f85149)}
.dcard code{font-size:10.5px}
#links path.dl{stroke:color-mix(in srgb,var(--accent) 75%,var(--mute));stroke-width:1.6}#links path.dl.est{stroke-dasharray:4 3}
.node.um .np.est{border-style:dashed;border-color:var(--accent)}
/* panel Vrstvy a pohledy */
.lyrp{width:100%;flex-direction:column;align-items:stretch!important}.lyrp:not([hidden]){display:flex}
.lyrrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.lyrtg{margin:0!important;display:inline-flex!important;gap:8px;align-items:center;color:var(--ink)!important;font-size:14px;cursor:pointer}.lyrtg input{width:auto}
.lyrcat{border:1px solid var(--line);border-radius:10px;padding:10px;margin:8px 0;background:var(--surface2)}
.lyrhd{display:flex;gap:10px;align-items:center;margin-bottom:8px}.lyrhd .sp{flex:1}.lyrhd button{padding:4px 10px;font-size:12px}
.catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:6px;max-height:300px;overflow:auto}
.catgrid .chip{position:relative;margin:0!important;display:flex!important;gap:7px;align-items:center;padding:6px 9px;border:1px solid var(--line);border-radius:8px;cursor:pointer;color:var(--ink)!important;font-size:12.5px;background:var(--surface);user-select:none}
.catgrid .chip input{position:absolute;opacity:0;pointer-events:none;width:1px}.catgrid .chip:hover{border-color:var(--accent)}
.catgrid .chip.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--surface))}.catgrid .chip.on .cn{font-weight:600}
.catgrid .chip .ci{width:18px;text-align:center;flex:none}.catgrid .chip .cn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.catgrid .chip .cc{color:var(--mute);font-size:11px;flex:none}
.catgrid .chip.empty:not(.on){opacity:.55}.catgrid .chip:focus-within{outline:2px solid var(--accent);outline-offset:1px}
.lyrnote{margin:8px 0 0;font-size:12px}.lyrview{border-top:1px solid var(--line);padding-top:8px;margin-top:2px}
/* zalohy konfigurace switche */
.cfgwarn{border:1px solid var(--warn);background:color-mix(in srgb,var(--warn) 12%,var(--surface));border-radius:10px;padding:10px 12px;margin:10px 0;font-size:13px}
.cfgcols{display:grid;grid-template-columns:190px 1fr;gap:14px;align-items:start}@media(max-width:700px){.cfgcols{grid-template-columns:1fr}}
.cfgver{display:flex;flex-direction:column;gap:4px;max-height:60vh;overflow:auto}.cfgver b{margin-bottom:4px}
.cfgver button{text-align:left;display:flex;flex-direction:column;padding:6px 9px;font-size:12.5px}.cfgver button small{color:var(--mute);font-size:11px}
.cfgver button.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--surface))}
.cfgbody{min-width:0}.cfgpre{margin-top:10px;max-height:60vh;overflow:auto;background:var(--surface2);border:1px solid var(--line);border-radius:8px;padding:10px;font-size:12px;line-height:1.45;white-space:pre}
.cfgpre .dadd{color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent)}.cfgpre .ddel{color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,transparent)}.cfgpre .dhunk{color:var(--accent)}
.ptab tr.cfgch td{background:color-mix(in srgb,var(--warn) 18%,transparent)}.cfgraw{margin:10px 0 0!important;display:inline-flex!important;gap:6px;align-items:center;color:var(--ink)!important;font-size:13px}.cfgraw input{width:auto}

/* ==== Sklo: vzhled podle webu smiratech.cz (1.7.1) – skleněné plochy, zaoblení, záře akcentu ==== */
h1,h2,h3,.info h2,.node .nh,.dcard .dcn{font-family:var(--font-head);letter-spacing:-.01em}
/* skleněné plochy: menu, hlavička, karty, panely, okna */
#side{background:var(--glass);backdrop-filter:saturate(1.4) blur(16px);border-right:1px solid var(--glass-line)}
header{background:var(--glass);backdrop-filter:saturate(1.4) blur(16px);border-bottom:1px solid var(--glass-line)}
.card,#panel,.moptb,.pop,dialog,.dlg{background:var(--glass-strong);backdrop-filter:saturate(1.4) blur(18px);border:1px solid var(--glass-line);border-radius:var(--r);box-shadow:var(--shadow)}
#panel{border-radius:var(--r) 0 0 var(--r)}
.slogo{border-radius:11px}
#side button.tab{border-radius:12px}
#side button.tab.on{background:color-mix(in srgb,var(--accent) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent)}
button,select,input,.mopt>summary{border-radius:var(--r-s)}
.seg button.on,.mtabs button.on{box-shadow:0 3px 10px -5px var(--glow)}
.hs{border-radius:999px;background:var(--glass)}

/* mapa: plocha bez rámu, jen jemná mřížka na pozadí stránky */
#viewport{background:transparent;border:1px solid var(--glass-line);border-radius:var(--r);background-image:radial-gradient(circle,color-mix(in srgb,var(--ink) 14%,transparent) 1px,transparent 1.2px);background-size:22px 22px}
.unit .face{border-radius:16px}
.block{border-radius:12px}
.info,.node{background:var(--glass-strong);backdrop-filter:blur(14px);border:1px solid var(--glass-line);border-radius:16px;box-shadow:var(--shadow)}
.port{border-radius:6px}
.zoom button,.hint{background:var(--glass-strong);backdrop-filter:blur(10px);border-radius:var(--r-s)}

/* karty zařízení: sklo + jemná záře u zařízení online (statická, nic se nepřekresluje) */
.node.dcard{border-radius:16px;border-color:var(--glass-line);background:var(--glass-strong)}
.dcard .dch .dot.ok,.dot.ok{background:var(--accent)}
.node.virt{border-radius:16px}
#links path.dl{stroke:color-mix(in srgb,var(--accent) 70%,#0ea5e9)}

/* tabulky */
.ptab th{background:transparent}.ptab tr:hover td{background:color-mix(in srgb,var(--accent) 6%,transparent)}
table{border-radius:var(--r-s)}

/* pozadí stránky (skvrny jako na webu) prosvítá pod hlavní plochou */
.layout,.mainwrap,main,#main{background:transparent}
#side button.tab.on{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent),0 0 14px -6px var(--glow)}

/* ikony menu ve stylu webu: skleněná dlaždička, lineární ikona, barevná záře (u aktivní položky výraznější) */
#side .ico.sic{position:relative;width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:9px;
  background:var(--glass-strong);border:1px solid var(--glass-line);box-shadow:0 1px 1px rgba(13,27,30,.04);isolation:isolate}
#side .ico.sic::before{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--gc);filter:blur(9px);opacity:0;z-index:-1;transition:opacity .2s}
#side .ico.sic svg{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#side .sic-g{--gc:#34d399}#side .sic-b{--gc:#38bdf8}#side .sic-v{--gc:#a78bfa}#side .sic-a{--gc:#ffb02e}
#side button.tab.on .ico.sic{border-color:color-mix(in srgb,var(--gc) 55%,transparent)}
#side button.tab.on .ico.sic::before{opacity:.35}
#side button.tab.on .ico.sic svg{stroke:color-mix(in srgb,var(--gc) 60%,var(--ink))}
#side button.tab{padding:6px 8px}

/* logo „Signál“: NetP○rta, „o“ = port se zeleně svítící LED (stejné jako na webu) */
.np-logo{display:inline-flex;flex-direction:column;align-items:flex-end;gap:4px;color:var(--ink);text-decoration:none;line-height:1}
.np-logo-word{display:inline-flex;align-items:center;font:800 28px/1 var(--font-head);letter-spacing:-.03em}
.np-logo-o{width:.68em;height:.68em;margin:0 .02em;transform:translateY(.07em);overflow:visible}
.np-logo-led{fill:var(--accent);filter:drop-shadow(0 0 3px var(--accent))}
.np-logo small{margin-right:1px;font:500 10px/1 var(--font);letter-spacing:.06em;color:var(--mute)}.np-logo small b{font-weight:600;color:var(--ink)}
#side .sbrand{height:52px;padding:2px 6px 10px;gap:0}#side .sbrand .lbl{flex:1;min-width:0}
#side .sbrand .np-logo-word{font-size:26px}
.np-logo small{display:flex;align-self:stretch;justify-content:flex-end;gap:4px}#side .sbrand .np-logo small .sver{margin-right:auto;letter-spacing:.02em}
#side .slogo{display:none;background:var(--glass-strong);border:1px solid var(--glass-line);color:var(--ink)}#side .slogo svg{width:20px;height:20px;overflow:visible}
body.sidecol #side .slogo{display:grid}body.sidecol #side .sbrand .lbl{display:none}
.authlogo{display:flex;justify-content:center;margin:6px 0 18px}.authlogo .np-logo-word{font-size:40px}.authlogo .np-logo small{font-size:12px}
.card.center{padding:26px 28px}
/* zare jen u oznaceneho: vybrany port a prvek mapy otevreny v panelu (switch, AP, server, karta zarizeni) */
.port.sel{box-shadow:0 0 12px -2px var(--glow)}
#world .picked{box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent),0 0 18px -4px var(--glow)!important}
/* ikony kategorii zarizeni (stejny styl jako menu): v textu linearni ikona, v karte na mape ve sklenene dlazdicce */
.cico{display:inline-flex;width:1.15em;height:1.15em;vertical-align:-.2em;flex:none;color:color-mix(in srgb,var(--gc,var(--ink)) 70%,var(--ink))}
.cico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cico.cg-g{--gc:#10b981}.cico.cg-b{--gc:#0ea5e9}.cico.cg-v{--gc:#8b5cf6}.cico.cg-a{--gc:#f59e0b}
.dcard .dch .cico{width:20px;height:20px;padding:3px;border-radius:6px;background:color-mix(in srgb,var(--gc,var(--ink)) 14%,transparent);border:1px solid color-mix(in srgb,var(--gc,var(--ink)) 22%,transparent)}
/* tipy (rady, ne problemy): fialova – znacka i u portu / switche, ramecek v detailu a v Problemech */
.port .tpx{position:absolute;right:-6px;top:-6px;width:13px;height:13px;border-radius:50%;background:#8b5cf6;color:#fff;font:700 9px/13px var(--font);text-align:center;z-index:2;font-style:italic}
.tpx.in{position:static;display:inline-block;width:14px;height:14px;border-radius:50%;background:#8b5cf6;color:#fff;font:700 10px/14px var(--font);text-align:center;font-style:italic;vertical-align:2px}
.tipbox{border:1px solid color-mix(in srgb,#8b5cf6 40%,transparent);background:color-mix(in srgb,#8b5cf6 8%,var(--glass-strong));border-radius:var(--r-s);padding:10px 12px;margin:10px 0;font-size:13px}
.tipbox .tiph{font-weight:700;margin-bottom:4px}.tipbox .tipa{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px}.tipbox .tipa a{margin-left:4px}
.hs.tip{color:#8b5cf6;border-color:color-mix(in srgb,#8b5cf6 45%,transparent)}
/* vyber ikony kategorie (skleneny set) */
.icgrid{display:grid;grid-template-columns:repeat(6,44px);gap:6px;margin:6px 0 12px}.icgrid button{width:44px;height:44px;padding:0;display:grid;place-items:center;border-radius:10px}
.icgrid button .cico{width:24px;height:24px}.icgrid button.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.icpick{width:38px;height:36px;padding:0;display:grid;place-items:center}.icpick .cico{width:20px;height:20px}
/* zjednodusena mapa: male sklenene ikonky zarizeni u portu, bez kategorie = vykricnik s oranzovou zari */
.lab .sdi,.sdrow .sdi{position:relative;display:inline-grid;place-items:center;width:26px;height:26px;margin:1px;border-radius:7px;cursor:pointer;
  background:var(--glass-strong);border:1px solid var(--glass-line);vertical-align:middle}
.sdi .cico{width:17px;height:17px}.sdi.off{opacity:.45}.sdi:hover{border-color:var(--accent)}
.sdi.nocat{border-color:color-mix(in srgb,#f59e0b 60%,transparent);box-shadow:0 0 10px -2px color-mix(in srgb,#f59e0b 55%,transparent)}
.sdi .sdq{font:800 16px/1 var(--font-head);color:#f59e0b}
.sdi .sdn{position:absolute;right:-6px;bottom:-6px;min-width:14px;height:14px;padding:0 3px;border-radius:7px;background:var(--ink);color:var(--bg);font:700 9px/14px var(--font);text-align:center}
.sdi.multi::after{content:'';position:absolute;inset:2px -3px -3px 2px;border-radius:7px;border:1px solid var(--glass-line);z-index:-1}
.sdrow{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 2px}.sdcell{display:inline-flex;flex-direction:column;align-items:center;gap:1px}.sdcell small{font-size:9px;color:var(--mute)}
.sdpop{position:fixed;z-index:60;max-width:min(420px,92vw);max-height:70vh;overflow:auto;background:var(--glass-strong);backdrop-filter:blur(18px);border:1px solid var(--glass-line);
  border-radius:var(--r-s);box-shadow:var(--shadow);padding:10px 12px;font-size:13px}
.sdpop h4{margin:2px 0 8px;font-size:14px;display:flex;gap:6px;align-items:center}.sdpop table{width:100%;border-collapse:collapse}.sdpop th{text-align:left;color:var(--mute);font-weight:500;padding:2px 10px 2px 0;white-space:nowrap}
.sdpop td{padding:2px 0}.sdpop .sdlist td,.sdpop .sdlist th{padding:3px 8px 3px 0;border-bottom:1px solid var(--line)}.sdpop .sdlist tr[data-dev]:hover td{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.sdpop .warnt,.sdpop .warn{color:var(--warn)}.sdpop .err{color:var(--bad)}.sdpop p{margin:8px 0 0}
.nocatb{color:#d97706;border-color:color-mix(in srgb,#f59e0b 50%,transparent)}
.lab span.sdi{writing-mode:horizontal-tb;transform:none;overflow:visible;max-height:none;font-size:13px}#world.far .lab span.sdi{visibility:visible}
.diagsw{display:flex;flex-wrap:wrap;gap:4px 18px;margin:4px 0 8px}
/* Main, vyber Vse: dlazdice pobocek a stitek pobocky u radku */
.sitetile{margin:0;cursor:pointer}.sitetile:hover{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent)}.sitetile.old .xt{color:var(--bad)}
.sitenums{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px}.sitenums b{font-size:18px}
.sitechip{display:inline-block;font-size:11px;padding:1px 7px;border-radius:999px;border:1px solid var(--line);color:var(--mute);margin-right:4px;vertical-align:1px}
/* pruvodce prvni instalaci */
.wiz{max-width:560px}.wiz h2{margin:6px 0 10px}.wizsteps{font-size:12px;color:var(--mute);text-align:center;margin:-6px 0 6px}
.wizchoice{display:grid;gap:10px;margin:8px 0 12px}.wizbig{display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r,12px);background:var(--glass,transparent);cursor:pointer;color:var(--ink);font:inherit}
.wizbig:hover{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent)}.wizbig input{width:auto;margin:0 6px 0 0}.wizlist{margin:6px 0 4px;padding-left:20px;line-height:1.9}
#wizback .dlg{max-width:600px;width:calc(100% - 32px)}
/* sprava IT partnerem: zaskrtavatka souhlasu */
label.chk{display:flex;gap:8px;align-items:flex-start;margin:6px 0;color:var(--ink);font-size:13px}label.chk input{margin-top:2px}
.custh{margin:18px 4px 8px;font-size:15px}
/* ---- zvyrazneni spojeni zarizeni: najeti mysi a vybrane zarizeni (jina barva, vybrane pulzuje) ---- */
#links path.lhov,#links path.lsel{stroke:#38bdf8!important;stroke-width:3px!important;stroke-dasharray:none!important;stroke-opacity:1!important;filter:drop-shadow(0 0 3px rgba(56,189,248,.85))}
#links path.lsel{animation:lselp 1.3s ease-in-out infinite}
@keyframes lselp{0%,100%{filter:drop-shadow(0 0 2px rgba(56,189,248,.9));stroke-opacity:1}50%{filter:drop-shadow(0 0 10px rgba(56,189,248,1));stroke-opacity:.55}}
#world .port.lhov,#world .port.lsel{box-shadow:0 0 0 2px #38bdf8,0 0 14px 2px rgba(56,189,248,.7)!important}
#world .port.lsel{animation:lselb 1.3s ease-in-out infinite}
@keyframes lselb{50%{box-shadow:0 0 0 2px #38bdf8,0 0 4px 0 rgba(56,189,248,.35)}}
#world .lab.lhov::after,#world .lab.lsel::after{background:#38bdf8;width:3px;left:13.5px;box-shadow:0 0 8px #38bdf8}
#world .dcard.lhov,#world .dcard.lsel,#world .sdw.lhov .sdi,#world .sdw.lsel .sdi,#world .node.lhov{box-shadow:0 0 0 1px #38bdf8,0 0 16px -2px #38bdf8!important}
#world .sdw.lsel .sdi{animation:lselb 1.3s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){#links path.lsel,#world .port.lsel,#world .sdw.lsel .sdi{animation:none}}
/* ---- zjednodusena mapa: vetsi ikony dal od switche, nad ikonou jmeno, posun tazenim ---- */
#world.simple .lab.has.top{padding-bottom:22px}#world.simple .lab.has.bot{padding-top:22px}#world.simple .lab.has::after{height:20px}
#world.simple .lab.sdmoved::after{display:none}
#world.simple .lab .sdi{width:30px;height:30px;margin:0}#world.simple .lab .sdi .cico{width:20px;height:20px}#world.simple .lab .sdi .sdq{font-size:18px}
.lab.top span.sdw,.lab.bot span.sdw,.lab span.sdw{display:flex;flex-direction:column;align-items:center;gap:3px;writing-mode:horizontal-tb;transform:none;overflow:visible;max-height:none;cursor:grab;touch-action:none;position:relative;z-index:3}
.lab.bot span.sdw{flex-direction:column-reverse}.lab span.sdw.moved{z-index:5}
.lab span.sdw .sdname{writing-mode:vertical-rl;font-size:10.5px;max-height:118px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);opacity:.85}
.lab span.sdw .sdname .sdnic{display:block;font-size:9.5px;color:var(--mute);opacity:.95}.lab.top span.sdw .sdname{transform:rotate(180deg)}.lab.bot span.sdw .sdname{transform:none}
#world.far .lab span.sdw,#world.far .lab span.sdw .sdi{visibility:visible}#world.far .lab span.sdw .sdname{visibility:hidden}
#links path.sdl{stroke:var(--mute);stroke-width:1.4;fill:none}
#links path.vbus{stroke-linejoin:round}
/* ---- automaticky zalozeny nespravovany switch ---- */
.autot{color:#f59e0b;font-weight:600;font-size:12px}
.autotip{margin-top:6px;padding:6px 8px;border:1px solid color-mix(in srgb,#f59e0b 55%,transparent);border-radius:8px;background:color-mix(in srgb,#f59e0b 9%,transparent);font-size:12px;line-height:1.4;white-space:normal}
.autotip button{margin-top:5px;font-size:12px;padding:3px 10px}
.oobl .cico{width:15px;height:15px;vertical-align:-3px}
/* ---- pred prihlasenim: zare za mysi a zarici okraj karty u kurzoru (barvy NetPorty) ---- */
body.authglow::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,35%),color-mix(in srgb,#2dd4a7 14%,transparent),color-mix(in srgb,#38bdf8 6%,transparent) 38%,transparent 68%)}
body.authglow #app{position:relative;z-index:1}
/* skleneme ikony zarizeni pod povrchem prihlasovaci obrazovky: zamlzene, u kurzoru se vynori a rozzari okraj */
#authdeco{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
#authdeco .adi{position:absolute;width:var(--s);height:var(--s);border-radius:24%;display:grid;place-items:center;
  background:linear-gradient(150deg,color-mix(in srgb,var(--gc) 18%,transparent),color-mix(in srgb,var(--gc) 5%,transparent) 60%,color-mix(in srgb,var(--surface,#0f172a) 30%,transparent));
  border:1px solid color-mix(in srgb,var(--gc) 16%,transparent);
  opacity:.1;filter:blur(3px) saturate(.5);transform:translateY(8px) scale(.9) rotate(var(--r));
  transition:opacity 2.2s ease,filter 2.2s ease,transform 2.2s ease,box-shadow 2.2s ease}
#authdeco .adi .cico{width:50%;height:50%;color:color-mix(in srgb,var(--gc) 75%,var(--ink))}
#authdeco .adi .cico svg{stroke-width:1.6}
#authdeco .adi::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;transition:opacity 1.6s ease;
  background:radial-gradient(90px circle at var(--cx,50%) var(--cy,0),#2dd4a7,color-mix(in srgb,#38bdf8 60%,transparent) 45%,transparent 75%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
#authdeco .adi.up{opacity:.85;filter:none;transform:translateY(0) scale(1) rotate(var(--r));transition-duration:1.1s;
  box-shadow:0 14px 34px -16px color-mix(in srgb,var(--gc) 70%,transparent),inset 0 1px 0 color-mix(in srgb,#fff 12%,transparent)}
#authdeco .adi.up::before{opacity:.9;transition-duration:.8s}
@media (prefers-reduced-motion:reduce){#authdeco .adi,#authdeco .adi::before{transition:none}}
body.authglow .card.center{position:relative}
body.authglow .card.center::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:radial-gradient(220px circle at var(--cx,50%) var(--cy,0),#2dd4a7,color-mix(in srgb,#38bdf8 60%,transparent) 45%,transparent 75%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.85}
@media (prefers-reduced-motion:reduce){body.authglow::after{background:radial-gradient(600px circle at 50% 30%,color-mix(in srgb,#2dd4a7 10%,transparent),transparent 70%)}}

/* zaškrtávátka ve skleněném stylu (1.7.1) */
input[type=checkbox]{appearance:none;-webkit-appearance:none;width:18px!important;min-width:18px;height:18px;padding:0;margin:0;flex:0 0 auto;vertical-align:middle;border:1px solid var(--glass-line);border-radius:6px;background:var(--glass-strong);backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s}
input[type=checkbox]:hover{border-color:var(--accent)}
input[type=checkbox]:checked{background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23061a14' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;border-color:var(--accent);box-shadow:0 0 10px -3px var(--glow)}
[data-theme="light"] input[type=checkbox]:checked,:root:not([data-theme]) input[type=checkbox]:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
input[type=checkbox]:disabled{opacity:.5;cursor:default}
input[type=checkbox]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* výběr sloupců: tlačítko stejné výšky jako filtry vedle, seznam zůstane otevřený */
.colpick{display:inline-flex}.colpick>summary{display:inline-flex;align-items:center;gap:4px;margin:0;padding:6px 12px;font-size:inherit;line-height:inherit;border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface);white-space:nowrap}
.colpick>summary:hover,.colpick[open]>summary{border-color:var(--accent)}
.colpickb{background:var(--glass-strong);backdrop-filter:saturate(1.4) blur(18px);border-color:var(--glass-line);border-radius:var(--r-s)}
.colpickf{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.colpickf button{padding:4px 12px}
/* chybí jméno nebo přidělený uživatel (karta, dlaždice) */
.dmiss{display:inline-grid;place-items:center;width:14px;height:14px;flex:0 0 auto;margin-left:4px;border-radius:50%;font-size:10px;font-weight:800;line-height:1;color:var(--warn);background:color-mix(in srgb,var(--warn) 18%,transparent);border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);cursor:help}
/* okno serveru / nespravovaneho switche: klik kamkoli otevre detail */
.node[data-n]{cursor:pointer}.node[data-n] .np{cursor:default}

/* vyber vice prvku na mape (Ctrl / Shift + klik) */
#world .msel:not(.sdw):not(.lab){box-shadow:0 0 0 2px #38bdf8,0 0 18px -2px #38bdf8!important}
#world .sdw.msel .sdi{box-shadow:0 0 0 2px #38bdf8,0 0 14px #38bdf8!important}
.info,.node[data-ap]{cursor:pointer}

/* dlazdice tiskarny / uloziste s upravou a nazev v tabulce Zarizeni se SNMP: klikatelne */
.card.tedit{cursor:pointer;transition:border-color .2s,box-shadow .2s}.card.tedit:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
b.swname{cursor:pointer}b.swname:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}