/* ── RESET & TOKENS ──────────────────────────────────────────────────── */
:root {
  --bg:#0d1117; --sf:#161b22; --sf2:#21262d; --sf3:#2d333b;
  --br:#30363d; --br2:#444c56;
  --tx:#e6edf3; --tx2:#adbac7; --mu:#7d8590;
  --ac:#58a6ff; --gn:#3fb950; --yw:#d29922;
  --rd:#f85149; --og:#db6d28; --pu:#bc8cff; --tl:#39d353;
  --fm:'IBM Plex Mono',monospace; --fs:'IBM Plex Sans',sans-serif;
  --r:4px; --r2:6px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--tx);font-family:var(--fs);font-size:13px;height:100vh;overflow:hidden;display:flex;flex-direction:column}
button{font-family:var(--fs);cursor:pointer}
input,select{font-family:var(--fs)}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--br);border-radius:2px}

/* ── HEADER ─────────────────────────────────────────────────────────── */
#header{display:flex;align-items:center;gap:10px;padding:0 14px;height:44px;border-bottom:1px solid var(--br);background:var(--sf);flex-shrink:0;z-index:50}
.logo{font-family:var(--fm);font-size:12px;font-weight:600;color:var(--ac);letter-spacing:.06em;white-space:nowrap}
.logo span{color:var(--mu);font-weight:400}
#nav-tabs{display:flex;gap:1px}
.ntab{background:none;border:none;font-family:var(--fm);font-size:11px;color:var(--mu);padding:5px 10px;border-radius:var(--r);transition:all .15s;white-space:nowrap}
.ntab:hover{color:var(--tx);background:var(--sf2)}
.ntab.active{color:var(--ac);background:rgba(88,166,255,.1)}
.ntab .badge{font-size:9px;background:rgba(248,81,73,.2);color:var(--rd);border:1px solid rgba(248,81,73,.3);padding:0 4px;border-radius:2px;margin-left:3px}
#hright{margin-left:auto;display:flex;align-items:center;gap:8px}
.sdot{width:7px;height:7px;border-radius:50%;background:var(--gn);box-shadow:0 0 5px var(--gn)}
#dirty{font-family:var(--fm);font-size:10px;background:rgba(210,153,34,.15);color:var(--yw);border:1px solid rgba(210,153,34,.3);padding:1px 6px;border-radius:3px;display:none}
#dirty.on{display:inline}
.save-btn{font-family:var(--fm);font-size:11px;background:rgba(63,185,80,.12);color:var(--gn);border:1px solid rgba(63,185,80,.3);padding:4px 10px;border-radius:var(--r);transition:all .15s}
.save-btn:hover{background:rgba(63,185,80,.22)}

/* ── LAYOUT ──────────────────────────────────────────────────────────── */
#main{flex:1;display:flex;overflow:hidden}
#sidebar{width:196px;flex-shrink:0;border-right:1px solid var(--br);background:var(--sf);overflow-y:auto}
#content{flex:1;overflow:hidden;display:flex}
.panel{flex:1;overflow-y:auto;padding:18px 22px;display:none}
.panel.active{display:block}
#canvas-panel.active,#rack-panel.active{display:flex;flex-direction:column;padding:0;overflow:hidden}

/* ── SIDEBAR ─────────────────────────────────────────────────────────── */
.sb-sec{padding:5px 0}
.sb-h{font-family:var(--fm);font-size:9px;font-weight:600;color:var(--mu);text-transform:uppercase;letter-spacing:.1em;padding:4px 10px 2px}
.sb-item{display:flex;align-items:center;gap:7px;padding:5px 10px;cursor:pointer;font-size:11px;color:var(--mu);border-left:2px solid transparent;transition:all .12s;line-height:1.3}
.sb-item:hover{color:var(--tx);background:var(--sf2)}
.sb-item.active{color:var(--ac);border-left-color:var(--ac);background:rgba(88,166,255,.06)}
.sb-item.warn{color:var(--rd)}
.sb-item.warn.active{color:var(--rd);border-left-color:var(--rd)}
.sb-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.sb-cap{margin-left:auto;font-family:var(--fm);font-size:9px;white-space:nowrap}
.sb-cap.full{color:var(--rd)}.sb-cap.near{color:var(--yw)}.sb-cap.ok{color:var(--mu)}
.sb-div{height:1px;background:var(--br);margin:3px 0}

/* ── COMMON ──────────────────────────────────────────────────────────── */
.ph{margin-bottom:14px}
.ph h1{font-family:var(--fm);font-size:15px;font-weight:600;margin-bottom:4px}
.ph p{font-size:12px;color:var(--mu);line-height:1.5}
.tags{display:flex;gap:5px;flex-wrap:wrap;margin:5px 0 8px}
.tag{font-family:var(--fm);font-size:9px;color:var(--mu);border:1px solid var(--br);padding:1px 6px;border-radius:3px}
.sec-h{font-family:var(--fm);font-size:9px;font-weight:600;color:var(--mu);text-transform:uppercase;letter-spacing:.08em;margin:14px 0 7px}
.warn-b{background:rgba(248,81,73,.08);border:1px solid rgba(248,81,73,.25);border-radius:var(--r2);padding:7px 10px;margin-bottom:7px;font-size:11px;color:var(--rd);line-height:1.5}
.info-b{background:rgba(88,166,255,.07);border:1px solid rgba(88,166,255,.18);border-radius:var(--r2);padding:7px 10px;margin-bottom:7px;font-size:11px;color:var(--ac);line-height:1.5;cursor:pointer}
.note-b{background:rgba(125,133,144,.07);border:1px solid var(--br);border-radius:var(--r2);padding:7px 10px;margin-bottom:7px;font-size:11px;color:var(--mu);line-height:1.5}
.cap-row{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.cap-lbl{font-family:var(--fm);font-size:10px;color:var(--mu);min-width:52px}
.cap-bar{flex:1;height:3px;background:var(--sf2);border-radius:2px;overflow:hidden}
.cap-fill{height:3px;border-radius:2px;transition:width .3s}
.cap-num{font-family:var(--fm);font-size:10px;min-width:36px;text-align:right}
.dl-btn{font-family:var(--fm);font-size:11px;background:rgba(88,166,255,.12);color:var(--ac);border:1px solid rgba(88,166,255,.25);padding:6px 12px;border-radius:var(--r);margin-right:6px;margin-bottom:10px;transition:all .15s;display:inline-block}
.dl-btn:hover{background:rgba(88,166,255,.22)}

/* ── PORT TABLE ──────────────────────────────────────────────────────── */
.pt-hdr{display:grid;grid-template-columns:34px 1fr 100px 1fr 28px;gap:4px;padding:3px 7px;font-family:var(--fm);font-size:9px;color:var(--mu);text-transform:uppercase}
.pe{display:grid;grid-template-columns:34px 1fr 100px 1fr 28px;gap:4px;padding:5px 7px;border-radius:var(--r);border:1px solid transparent;transition:border-color .1s,background .1s;align-items:center}
.pe:hover{border-color:var(--br);background:var(--sf2)}
.pe.editing{border-color:var(--ac);background:rgba(88,166,255,.05)}
.pe.pw{background:rgba(248,81,73,.04)}
.p-num{font-family:var(--fm);font-size:10px;color:var(--mu);font-weight:500}
.p-lbl{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-lbl.free{color:var(--mu)}
.p-lbl input,.p-note input{background:none;border:none;color:inherit;font-family:var(--fs);font-size:inherit;width:100%;outline:none}
.p-note{font-size:11px;color:var(--mu);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-note.wt{color:var(--og)}
.p-edit{background:none;border:1px solid transparent;color:var(--mu);font-size:10px;border-radius:3px;padding:2px 4px;transition:all .1s;font-family:var(--fm)}
.p-edit:hover{border-color:var(--br);color:var(--tx)}
.p-edit.on{border-color:var(--ac);color:var(--ac)}
.tb{font-family:var(--fm);font-size:9px;padding:1px 5px;border-radius:3px;display:inline-block;white-space:nowrap}
.tb-uplink{background:rgba(88,166,255,.15);color:var(--ac);border:1px solid rgba(88,166,255,.3)}
.tb-switch{background:rgba(188,140,255,.15);color:var(--pu);border:1px solid rgba(188,140,255,.3)}
.tb-server{background:rgba(210,153,34,.15);color:var(--yw);border:1px solid rgba(210,153,34,.3)}
.tb-ap{background:rgba(57,211,83,.15);color:var(--tl);border:1px solid rgba(57,211,83,.3)}
.tb-pc{background:rgba(230,237,243,.08);color:#adbac7;border:1px solid rgba(230,237,243,.12)}
.tb-security{background:rgba(248,81,73,.15);color:var(--rd);border:1px solid rgba(248,81,73,.3)}
.tb-passive{background:rgba(125,133,144,.1);color:var(--mu);border:1px solid rgba(125,133,144,.2)}
.tb-iot{background:rgba(57,211,83,.1);color:#56d364;border:1px solid rgba(57,211,83,.2)}
.tb-mgmt{background:rgba(188,140,255,.1);color:var(--pu);border:1px solid rgba(188,140,255,.2)}
.tb-wan{background:rgba(219,109,40,.15);color:var(--og);border:1px solid rgba(219,109,40,.3)}
.tb-infra{background:rgba(125,133,144,.12);color:var(--mu);border:1px solid rgba(125,133,144,.25)}
.tb-free{background:transparent;color:var(--mu);border:1px solid var(--br)}
.tb-select{background:var(--sf2);color:var(--tx);border:1px solid var(--br);font-family:var(--fm);font-size:9px;padding:1px 3px;border-radius:3px;outline:none;width:96px}

/* ── DEVICE GRID ─────────────────────────────────────────────────────── */
.dev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:6px}
.dev-card{background:var(--sf);border:1px solid var(--br);border-radius:var(--r2);padding:7px 9px;border-left:3px solid var(--br)}
.dev-card.pc{border-left-color:#4a9fd4}.dev-card.server{border-left-color:var(--yw)}
.dev-card.ap{border-left-color:var(--tl)}.dev-card.security{border-left-color:var(--rd)}
.dev-card.av{border-left-color:var(--pu)}.dev-card.iot{border-left-color:#56d364}
.dev-card.wan{border-left-color:var(--og)}.dev-card.passive{border-left-color:var(--mu)}
.dev-card.infra{border-left-color:var(--mu)}.dev-card.periph{border-left-color:#6e7681}
.dev-name{font-size:12px;font-weight:500;margin-bottom:2px;line-height:1.3}
.dev-desc{font-size:10px;color:var(--mu);line-height:1.4}

/* ── ISSUES ──────────────────────────────────────────────────────────── */
.issue-card{border:1px solid var(--br);border-radius:var(--r2);padding:9px 12px;margin-bottom:6px}
.issue-card.critical{border-left:3px solid var(--rd)}.issue-card.medium{border-left:3px solid var(--yw)}.issue-card.low{border-left:3px solid var(--mu)}
.issue-prio{font-family:var(--fm);font-size:9px;text-transform:uppercase;letter-spacing:.07em;margin-bottom:3px}
.issue-prio.critical{color:var(--rd)}.issue-prio.medium{color:var(--yw)}.issue-prio.low{color:var(--mu)}
.issue-title{font-size:13px;font-weight:500;margin-bottom:3px}
.issue-desc{font-size:12px;color:var(--mu);line-height:1.4}

/* ── DIFF ────────────────────────────────────────────────────────────── */
.diff-entry{font-family:var(--fm);font-size:10px;margin-bottom:4px;padding:5px 9px;border-radius:var(--r)}
.diff-entry.ch{background:rgba(210,153,34,.08);color:var(--yw);border:1px solid rgba(210,153,34,.2)}
.diff-entry.mv{background:rgba(88,166,255,.08);color:var(--ac);border:1px solid rgba(88,166,255,.2)}
.diff-empty{color:var(--mu);font-family:var(--fm);font-size:12px;padding:16px 0}

/* ── EXPORT ──────────────────────────────────────────────────────────── */
.exp-block{background:var(--sf);border:1px solid var(--br);border-radius:var(--r2);overflow:hidden;margin-bottom:12px}
.exp-block-h{display:flex;justify-content:space-between;align-items:center;padding:7px 10px;border-bottom:1px solid var(--br);background:var(--sf2)}
.exp-block-t{font-family:var(--fm);font-size:10px;color:var(--mu)}
.copy-btn{font-family:var(--fm);font-size:9px;background:none;border:1px solid var(--br);color:var(--mu);padding:2px 7px;border-radius:3px;transition:all .12s}
.copy-btn:hover{border-color:var(--ac);color:var(--ac)}
pre.exp-code{padding:10px;font-family:var(--fm);font-size:10px;color:var(--gn);line-height:1.6;overflow-x:auto;white-space:pre-wrap;word-break:break-all}

/* ── CANVAS ──────────────────────────────────────────────────────────── */
#canvas-toolbar{display:flex;align-items:center;gap:8px;padding:7px 12px;border-bottom:1px solid var(--br);background:var(--sf);flex-shrink:0;flex-wrap:wrap}
#canvas-toolbar .tool-btn{font-family:var(--fm);font-size:10px;background:none;border:1px solid var(--br);color:var(--mu);padding:3px 9px;border-radius:var(--r);transition:all .12s}
#canvas-toolbar .tool-btn:hover{border-color:var(--ac);color:var(--ac)}
#canvas-toolbar .tool-btn.active{background:rgba(88,166,255,.15);border-color:var(--ac);color:var(--ac)}
#canvas-toolbar select{background:var(--sf2);color:var(--tx);border:1px solid var(--br);font-family:var(--fm);font-size:10px;padding:3px 6px;border-radius:var(--r);outline:none}
#canvas-wrap{flex:1;overflow:hidden;position:relative;background:var(--bg)}
#canvas-svg{display:block;user-select:none}
.c-wall{fill:var(--sf2);stroke:var(--br2);stroke-width:1.5}
.c-wall.neighbor{fill:var(--sf);stroke:var(--br);stroke-width:1;opacity:.5}
.c-device{cursor:pointer}
.c-device.selected .c-dev-rect{stroke-width:2.5;stroke:var(--ac) !important}
.c-dev-rect{rx:3;transition:filter .1s}
.c-device:hover .c-dev-rect{filter:brightness(1.4)}
.c-dev-label{font-family:var(--fs);font-size:9px;fill:var(--tx);pointer-events:none;dominant-baseline:middle;text-anchor:middle}
.c-dev-type{font-family:var(--fm);font-size:7px;fill:var(--mu);pointer-events:none;dominant-baseline:middle;text-anchor:middle}
.ct-pc .c-dev-rect{fill:#192233;stroke:#4a9fd4;stroke-width:1}
.ct-switch .c-dev-rect{fill:#1e1530;stroke:var(--pu);stroke-width:1.5}
.ct-server .c-dev-rect{fill:#211a00;stroke:var(--yw);stroke-width:1}
.ct-ap .c-dev-rect{fill:#0d2218;stroke:var(--tl);stroke-width:1}
.ct-security .c-dev-rect{fill:#220d0d;stroke:var(--rd);stroke-width:1}
.ct-av .c-dev-rect{fill:#1a1028;stroke:var(--pu);stroke-width:1}
.ct-iot .c-dev-rect{fill:#0d2218;stroke:#56d364;stroke-width:1}
.ct-infra .c-dev-rect{fill:#161b22;stroke:var(--br2);stroke-width:1}
.ct-periph .c-dev-rect{fill:#161b22;stroke:#6e7681;stroke-width:1}
.ct-passive .c-dev-rect{fill:#0d1117;stroke:var(--br);stroke-width:1;stroke-dasharray:4 2}
#canvas-tooltip{position:absolute;background:var(--sf);border:1px solid var(--br2);border-radius:var(--r2);padding:7px 10px;font-size:11px;pointer-events:none;display:none;z-index:100;max-width:260px;line-height:1.6;box-shadow:0 4px 16px rgba(0,0,0,.5)}
#canvas-tooltip .tt-name{font-weight:500;margin-bottom:2px}
#canvas-tooltip .tt-note{color:var(--mu);font-size:10px}
#canvas-tooltip .tt-type{font-family:var(--fm);font-size:9px;color:var(--ac);margin-bottom:2px}
#ctx-menu{position:fixed;background:var(--sf);border:1px solid var(--br2);border-radius:var(--r2);padding:4px 0;z-index:500;display:none;min-width:170px;box-shadow:0 4px 20px rgba(0,0,0,.6)}
.ctx-item{padding:6px 14px;font-size:12px;cursor:pointer;color:var(--tx2)}
.ctx-item:hover{background:var(--sf2);color:var(--tx)}
.ctx-item.danger{color:var(--rd)}
.ctx-item.danger:hover{background:rgba(248,81,73,.1)}
.ctx-sep{height:1px;background:var(--br);margin:3px 0}
#edit-modal{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:600;display:none;align-items:center;justify-content:center}
#edit-modal.open{display:flex}
#edit-modal-box{background:var(--sf);border:1px solid var(--br2);border-radius:var(--r2);padding:20px;width:340px;box-shadow:0 8px 32px rgba(0,0,0,.7)}
#edit-modal-box h3{font-family:var(--fm);font-size:13px;margin-bottom:14px}
.em-row{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.em-row label{font-size:11px;color:var(--mu)}
.em-row input,.em-row select,.em-row textarea{background:var(--sf2);border:1px solid var(--br);color:var(--tx);padding:6px 8px;border-radius:var(--r);font-family:var(--fs);font-size:12px;outline:none;width:100%}
.em-row input:focus,.em-row select:focus,.em-row textarea:focus{border-color:var(--ac)}
.em-row textarea{resize:vertical;min-height:56px}
.em-actions{display:flex;gap:8px;margin-top:14px}
.em-save{flex:1;padding:7px;background:rgba(88,166,255,.15);color:var(--ac);border:1px solid rgba(88,166,255,.3);border-radius:var(--r);font-family:var(--fm);font-size:11px}
.em-save:hover{background:rgba(88,166,255,.25)}
.em-cancel{padding:7px 14px;background:none;color:var(--mu);border:1px solid var(--br);border-radius:var(--r);font-family:var(--fm);font-size:11px}
.em-del{padding:7px 14px;background:none;color:var(--rd);border:1px solid rgba(248,81,73,.3);border-radius:var(--r);font-family:var(--fm);font-size:11px}
.em-del:hover{background:rgba(248,81,73,.1)}

/* ── RACK ────────────────────────────────────────────────────────────── */
#rack-toolbar{display:flex;align-items:center;gap:8px;padding:7px 12px;border-bottom:1px solid var(--br);background:var(--sf);flex-shrink:0}
#rack-wrap{flex:1;overflow-y:auto;display:flex;gap:0;padding:16px;align-items:flex-start}
#rack-visual{width:340px;flex-shrink:0}
#rack-detail{flex:1;padding-left:20px}
.rack-title{font-family:var(--fm);font-size:11px;color:var(--mu);margin-bottom:8px;letter-spacing:.04em}
.rack-chassis{border:2px solid var(--br2);border-radius:var(--r2);overflow:hidden;background:var(--bg)}
.rack-unit{display:flex;align-items:stretch;gap:0;border-bottom:1px solid var(--br)}
.rack-unit:last-child{border-bottom:none}
.rack-u-num{font-family:var(--fm);font-size:8px;color:var(--mu);min-width:28px;display:flex;align-items:center;justify-content:flex-end;padding:0 5px;border-right:1px solid var(--br);background:var(--sf)}
.rack-u-slot{flex:1;display:flex;align-items:center;padding:0 10px;cursor:pointer;transition:all .12s;min-height:26px;position:relative}
.rack-u-slot:hover{background:rgba(88,166,255,.06)}
.rack-u-slot.selected{background:rgba(88,166,255,.1);outline:1px solid var(--ac)}
.rack-u-slot.free{background:var(--bg)}
.rack-u-slot.server{background:#181200}
.rack-u-slot.switch{background:#120d1e}
.rack-u-slot.infra{background:#111518}
.rack-u-slot.passive{background:#0d1117}
.rack-u-slot.note{background:rgba(248,81,73,.05)}
.rack-slot-name{font-size:11px;font-weight:500;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rack-slot-type{font-family:var(--fm);font-size:8px;color:var(--mu);margin-left:8px;flex-shrink:0}
.rack-slot-edit{background:none;border:1px solid transparent;color:var(--mu);font-size:9px;border-radius:2px;padding:1px 4px;margin-left:6px;font-family:var(--fm);opacity:0;transition:opacity .12s}
.rack-unit:hover .rack-slot-edit{opacity:1}
.rack-slot-edit:hover{border-color:var(--ac);color:var(--ac)}
#rack-detail-box{background:var(--sf);border:1px solid var(--br);border-radius:var(--r2);padding:14px}
#rack-detail-box h3{font-family:var(--fm);font-size:12px;margin-bottom:10px;color:var(--tx)}
.rd-row{display:flex;justify-content:space-between;align-items:center;font-size:11px;padding:5px 0;border-bottom:1px solid var(--br)}
.rd-row:last-child{border-bottom:none}
.rd-key{color:var(--mu)}
.rd-val{font-weight:500;text-align:right}
.rd-input{background:var(--sf2);border:1px solid var(--br);color:var(--tx);font-family:var(--fs);font-size:11px;padding:3px 6px;border-radius:3px;text-align:right;outline:none;width:180px}
.rd-input:focus{border-color:var(--ac)}
.rd-select{background:var(--sf2);border:1px solid var(--br);color:var(--tx);font-family:var(--fm);font-size:10px;padding:3px 5px;border-radius:3px;outline:none}
.rack-add-unit{margin-top:8px;width:100%;padding:7px;background:rgba(63,185,80,.08);color:var(--gn);border:1px solid rgba(63,185,80,.25);border-radius:var(--r);font-family:var(--fm);font-size:10px;transition:all .15s}
.rack-add-unit:hover{background:rgba(63,185,80,.18)}

/* ── LAYER TOGGLES (canvas toolbar) ─────────────────────────────────── */
#c-layer-toggles{display:flex;gap:5px;align-items:center}
.layer-btn{
  display:flex;align-items:center;gap:5px;
  font-family:var(--fm);font-size:10px;
  background:none;border:1px solid var(--br);color:var(--mu);
  padding:3px 8px;border-radius:var(--r);transition:all .15s;
  opacity:.5;
}
.layer-btn .layer-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--lc,var(--mu));flex-shrink:0;
}
.layer-btn:hover{opacity:.8;border-color:var(--lc,var(--br))}
.layer-btn.on{
  opacity:1;
  background:color-mix(in srgb,var(--lc,var(--ac)) 15%,transparent);
  border-color:var(--lc,var(--ac));
  color:var(--lc,var(--ac));
}

/* ── CANVAS toolbar sep ───────────────────────────────────────────────── */
.toolbar-sep{width:1px;height:20px;background:var(--br);flex-shrink:0;margin:0 2px}

/* ── MODAL FIXES ─────────────────────────────────────────────────────── */
#edit-modal{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:600;display:none;align-items:center;justify-content:center}
#edit-modal.open{display:flex}
#edit-modal-box{background:var(--sf);border:1px solid var(--br2);border-radius:var(--r2);padding:20px;width:360px;box-shadow:0 8px 32px rgba(0,0,0,.7);max-height:90vh;overflow-y:auto}
#edit-modal-box h3{font-family:var(--fm);font-size:13px;margin-bottom:14px}
.em-row{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.em-row label{font-size:11px;color:var(--mu)}
.em-row input,.em-row select,.em-row textarea{
  background:var(--sf2);border:1px solid var(--br);color:var(--tx);
  padding:6px 8px;border-radius:var(--r);font-family:var(--fs);font-size:12px;outline:none;width:100%
}
.em-row input:focus,.em-row select:focus,.em-row textarea:focus{border-color:var(--ac)}
.em-row textarea{resize:vertical;min-height:52px}
.em-actions{display:flex;gap:8px;margin-top:14px}
.em-save{flex:1;padding:7px;background:rgba(88,166,255,.15);color:var(--ac);border:1px solid rgba(88,166,255,.3);border-radius:var(--r);font-family:var(--fm);font-size:11px;cursor:pointer}
.em-save:hover{background:rgba(88,166,255,.28)}
.em-cancel{padding:7px 14px;background:none;color:var(--mu);border:1px solid var(--br);border-radius:var(--r);font-family:var(--fm);font-size:11px;cursor:pointer}
.em-cancel:hover{border-color:var(--tx);color:var(--tx)}
.em-del{padding:7px 14px;background:none;color:var(--rd);border:1px solid rgba(248,81,73,.3);border-radius:var(--r);font-family:var(--fm);font-size:11px;cursor:pointer}
.em-del:hover{background:rgba(248,81,73,.1)}

/* ── ARCH ELEMENTS (window / door) ───────────────────────────────────── */
.ct-window use,.ct-door use{pointer-events:fill}
.ct-utp_outlet,.ct-schuko_outlet{cursor:pointer}

/* ── CANVAS tooltip update ────────────────────────────────────────────── */
#canvas-tooltip .tt-type{font-family:var(--fm);font-size:9px;color:var(--ac);margin-bottom:3px;text-transform:uppercase;letter-spacing:.05em}

/* ── CABLE TOOL ───────────────────────────────────────────────────────── */
#canvas-svg[data-tool=cable]{cursor:cell}
.c-anchor{transition:r .1s,opacity .1s}
.c-anchor:hover{r:7;opacity:0.9 !important}
.c-cable{cursor:pointer}
.c-cable.selected path[data-cable-id]{stroke:var(--ac)}
/* kábel modal megnyílik */
#cable-modal.open{display:flex}

/* ── TYPED CABLE BUTTONS ──────────────────────────────────────────────── */
.cable-tool-btn {
  display: flex; align-items: center; gap: 5px;
}
.cable-tool-btn .cable-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cc, var(--mu));
  flex-shrink: 0;
  transition: transform .15s;
}
.cable-tool-btn:hover .cable-dot { transform: scale(1.3); }
.cable-tool-btn.active {
  color: var(--cc, var(--ac));
  border-color: var(--cc, var(--ac));
  background: color-mix(in srgb, var(--cc, var(--ac)) 15%, transparent);
}
.cable-tool-btn.active .cable-dot {
  box-shadow: 0 0 5px var(--cc, var(--ac));
}

/* ── GRAPH PANEL ──────────────────────────────────────────────────────── */
.graph-tabs{display:flex;gap:4px;margin-bottom:16px;border-bottom:1px solid var(--br);padding-bottom:8px}
.gtab{font-family:var(--fm);font-size:11px;background:none;border:1px solid var(--br);color:var(--mu);padding:4px 12px;border-radius:var(--r);transition:all .15s}
.gtab:hover{border-color:var(--ac);color:var(--tx)}
.gtab.active{background:rgba(88,166,255,.12);border-color:var(--ac);color:var(--ac)}

/* ── TREE VIEW ───────────────────────────────────────────────────────── */
.tree-wan{display:flex;align-items:center;gap:7px;padding:6px 0;font-size:12px;color:var(--mu);border-bottom:1px solid var(--br);margin-bottom:6px}
.tree-node{padding:2px 0;position:relative}
.tree-sw{display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:var(--r);border:1px solid transparent;transition:border-color .1s,background .1s;font-size:12px}
.tree-sw:hover{border-color:var(--br);background:var(--sf2)}
.tree-sw.warn{background:rgba(248,81,73,.04)}
.tree-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.tree-name{font-weight:500;flex:1}
.tree-loc{font-size:10px;color:var(--mu)}
.tree-cap{font-family:var(--fm);font-size:10px;min-width:36px;text-align:right}
.tree-ep{font-size:9px;color:var(--mu);border:1px solid var(--br);padding:0 5px;border-radius:10px}
.tree-warn{color:var(--rd)}
/* fa vonal */
.tree-node{border-left:1px solid var(--br);margin-left:8px}
.tree-node>.tree-sw{position:relative}
.tree-node>.tree-sw::before{content:'';position:absolute;left:-12px;top:50%;width:10px;height:1px;background:var(--br)}

/* ── HOP TABLE ───────────────────────────────────────────────────────── */
.hop-table{border-collapse:collapse;font-size:11px;width:100%}
.hop-table th{font-family:var(--fm);font-size:9px;font-weight:500;color:var(--mu);padding:5px 7px;border-bottom:1px solid var(--br);text-align:center;white-space:nowrap}
.hop-table td{padding:4px 7px;border-bottom:0.5px solid var(--br);text-align:center;font-family:var(--fm);font-size:10px}
.hop-row-label{text-align:left !important;color:var(--tx2);font-family:var(--fs) !important;font-size:11px !important;white-space:nowrap;max-width:120px;overflow:hidden;text-overflow:ellipsis}
.hop-wan{border-left:2px solid rgba(248,81,73,.3)}
.hop-self{color:var(--mu);background:var(--sf2)}
.hop-direct{color:var(--gn);font-weight:500}
.hop-near{color:var(--yw)}
.hop-far{color:var(--rd)}
.row-warn{background:rgba(248,81,73,.04)}
.hop-legend{font-family:var(--fm);font-size:9px;padding:2px 8px;border-radius:3px}
.hop-legend.hop-direct{background:rgba(63,185,80,.1);color:var(--gn);border:1px solid rgba(63,185,80,.2)}
.hop-legend.hop-near{background:rgba(210,153,34,.1);color:var(--yw);border:1px solid rgba(210,153,34,.2)}
.hop-legend.hop-far{background:rgba(248,81,73,.1);color:var(--rd);border:1px solid rgba(248,81,73,.2)}

/* ── SPOF CARDS ──────────────────────────────────────────────────────── */
.spof-card{border:1px solid var(--br);border-radius:var(--r2);padding:10px 12px;margin-bottom:8px}
.spof-card.critical{border-left:3px solid var(--rd)}
.spof-card.medium{border-left:3px solid var(--yw)}
.spof-card.low{border-left:3px solid var(--mu)}
.spof-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:7px}
.spof-name{font-size:13px;font-weight:500;display:block}
.spof-loc{font-size:10px;color:var(--mu)}
.spof-count{font-family:var(--fm);font-size:11px;background:var(--sf2);padding:2px 8px;border-radius:10px;white-space:nowrap}
.spof-body{font-size:11px}
.spof-meta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:5px;color:var(--mu)}
.spof-section{margin-top:5px;color:var(--mu)}
.spof-chip{display:inline-block;background:var(--sf2);border:1px solid var(--br);padding:1px 7px;border-radius:3px;font-size:10px;margin:2px 2px 0;color:var(--tx2)}
.spof-eps{margin-top:3px;display:flex;flex-wrap:wrap;gap:3px}
.spof-ep{background:var(--sf2);border:1px solid var(--br);padding:1px 6px;border-radius:3px;font-size:10px;color:var(--tx2)}

/* ── ENDPOINT TABLE ──────────────────────────────────────────────────── */
.ep-table{width:100%;border-collapse:collapse;font-size:11px}
.ep-table th{font-family:var(--fm);font-size:9px;font-weight:500;color:var(--mu);padding:4px 8px;border-bottom:1px solid var(--br);text-align:left;text-transform:uppercase;letter-spacing:.04em}
.ep-table td{padding:4px 8px;border-bottom:0.5px solid var(--br)}
.ep-floor-header td{font-family:var(--fm);font-size:9px;font-weight:600;color:var(--ac);background:var(--sf2);padding:5px 8px;text-transform:uppercase;letter-spacing:.06em}
.ep-name{font-size:12px}
.ep-type{font-family:var(--fm);font-size:9px;color:var(--mu)}
.ep-sw{color:var(--tx2);font-size:11px}
.ep-port{font-family:var(--fm);font-size:9px;color:var(--mu)}
.ep-hops{font-family:var(--fm);font-size:11px;text-align:center}

/* ── PLANNED STATUS ───────────────────────────────────────────────────── */

/* Port sor – planned */
.pe-planned { background: rgba(88,166,255,.04); }
.pe-planned .p-num { color: var(--ac); }
.tb-planned { opacity: .7; border-style: dashed !important; }

/* Port státusz gomb */
.p-status-btn {
  background: none; border: 1px solid transparent;
  color: var(--mu); font-size: 11px; border-radius: 3px;
  padding: 1px 4px; transition: all .12s; font-family: var(--fm);
  cursor: pointer;
}
.p-status-btn:hover { border-color: var(--ac); color: var(--ac); }
.p-status-btn.is-planned { color: var(--ac); border-color: rgba(88,166,255,.4); }

/* Tag – tervezett összesítő */
.tag-planned {
  color: var(--ac) !important;
  border-color: rgba(88,166,255,.4) !important;
  border-style: dashed !important;
}

/* Canvas planned device */
.c-device.c-planned { /* opacity az inline style-ban */ }

/* Canvas planned cable */
.c-cable.planned { /* opacity az inline style-ban */ }

/* Gráf fülön planned elemek jelzése (jövőbeli) */
.planned-badge {
  font-family: var(--fm); font-size: 9px;
  color: var(--ac); border: 1px dashed rgba(88,166,255,.4);
  padding: 0 5px; border-radius: 3px; margin-left: 5px;
}

/* ── RACK PLANNED STÍLUSOK ───────────────────────────────────────────── */
.rack-unit-planned .rack-u-slot {
  opacity: 0.65;
}
.slot-planned {
  border-left: 3px dashed var(--ac) !important;
  background: rgba(88,166,255,.04) !important;
}
.rack-chassis-planned {
  border: 2px dashed var(--br2);
  opacity: 0.85;
}
.rack-chassis-planned .rack-unit { border-bottom-color: var(--br); }

/* ── ROOMS PLANNED DEV-CARD ──────────────────────────────────────────── */
.dev-card-planned {
  opacity: 0.65;
  border-style: dashed !important;
  border-left-style: dashed !important;
}

/* Paper nézet – rack planned */
[data-view="paper"] .slot-planned {
  border-left: 3px dashed #888 !important;
  background: #f8f8f8 !important;
}
[data-view="paper"] .rack-chassis-planned { border: 2px dashed #aaa; }
[data-view="paper"] .dev-card-planned { border-style: dashed !important; border-left-style: dashed !important; }

/* ── SEARCH OVERLAY (Ctrl+K) ─────────────────────────────────────────── */
#search-overlay {
  position: fixed; inset: 0; z-index: 800;
  background: rgba(0,0,0,.55);
  display: none; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
}
#search-overlay.open { display: flex; }

#search-box {
  width: min(560px, 92vw);
  background: var(--sf);
  border: 1px solid var(--br2);
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,.7);
  overflow: hidden;
}

#search-input-wrap {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--br);
}
#search-icon { font-size: 16px; color: var(--mu); flex-shrink: 0; }
#search-input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--tx); font-family: var(--fs); font-size: 15px;
}
#search-input::placeholder { color: var(--mu); }
#search-esc {
  font-family: var(--fm); font-size: 9px; color: var(--mu);
  border: 1px solid var(--br); padding: 2px 5px; border-radius: 3px;
  flex-shrink: 0;
}

#search-results {
  max-height: 340px; overflow-y: auto;
  padding: 4px 0;
}

.sr-hint, .sr-empty {
  padding: 20px 16px;
  font-size: 12px; color: var(--mu); text-align: center;
}
.sr-empty em { color: var(--tx2); font-style: normal; }

.sr-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; cursor: pointer;
  transition: background .08s;
}
.sr-item:hover, .sr-item.active { background: var(--sf2); }
.sr-icon { font-size: 14px; flex-shrink: 0; width: 20px; text-align: center; }
.sr-text { flex: 1; min-width: 0; }
.sr-title {
  display: block; font-size: 13px; color: var(--tx);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sr-sub {
  display: block; font-size: 11px; color: var(--mu);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sr-kind {
  font-family: var(--fm); font-size: 9px; color: var(--mu);
  border: 1px solid var(--br); padding: 1px 6px; border-radius: 3px;
  flex-shrink: 0;
}

#search-footer {
  display: flex; gap: 16px; padding: 7px 14px;
  border-top: 1px solid var(--br);
  font-family: var(--fm); font-size: 9px; color: var(--mu);
}

/* Paper nézet */
[data-view="paper"] #search-overlay { background: rgba(0,0,0,.4); }
[data-view="paper"] #search-box     { background: #fff; border-color: #bbb; }
[data-view="paper"] #search-input   { color: #111; }
[data-view="paper"] .sr-title       { color: #111; }
[data-view="paper"] .sr-sub         { color: #666; }
[data-view="paper"] .sr-item.active { background: #f0f0f0; }
[data-view="paper"] #search-btn     { color: #555; border-color: #bbb; }

/* ── CABLE ROUTING ───────────────────────────────────────────────────── */
.ctx-routing { font-family: var(--fm); font-size: 11px; }
.ctx-routing.active {
  color: var(--ac);
  background: rgba(88,166,255,.08);
}
.ctx-routing.active::after {
  content: ' ✓';
  color: var(--ac);
}
[data-view="paper"] .ctx-routing.active { color: #111; background: #eee; }

/* ── FURNITURE LAYER ─────────────────────────────────────────────────── */
.ct-furniture .c-dev-rect { rx: 2; }
.ct-furniture:hover rect  { filter: brightness(1.2); }

/* Paper nézet – bútorok */
[data-view="paper"] .ct-furniture rect {
  fill: transparent !important;
  stroke: #555 !important;
  stroke-width: 1 !important;
}
[data-view="paper"] .ct-furniture text { fill: #444 !important; }