/* map.css — CSS do mapa, extraído do <style> do map.html (2026-07-03). */
*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#0b0e11;--panel:#161b22;--ph:#1c2128;--border:#21262d;--text:#c9d1d9;--muted:#8b949e;--accent:#a371f7;--green:#3fb950;--yellow:#e3b341;--red:#f85149;--blue:#58a6ff}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,sans-serif;font-size:13px;overflow:hidden}
#app{display:flex;flex-direction:column;height:100vh}
/* flex-wrap: botões que não cabem descem pra 2ª/3ª linha em vez de sumirem à
   direita (nada escondido num NOC). Altura vira mín. e cresce com as linhas;
   min-width:0 no searchWrap deixa a busca encolher antes de forçar quebra. */
#topbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:5px 10px;min-height:44px;background:#111418;border-bottom:1px solid var(--border);flex-shrink:0;z-index:1000}
#body{display:flex;flex:1;overflow:hidden;position:relative}
.tb-brand{font-weight:700;font-size:14px;color:var(--accent);white-space:nowrap;display:flex;align-items:center;gap:6px;flex-shrink:0}
.tb-sep{width:1px;height:24px;background:var(--border);margin:0 3px;flex-shrink:0}
.tb-btn{background:#1c2128;border:1px solid var(--border);border-radius:4px;color:var(--muted);padding:4px 8px;cursor:pointer;font-size:12px;display:flex;align-items:center;gap:4px;white-space:nowrap;flex-shrink:0}
.tb-btn:hover{border-color:var(--accent);color:var(--text)}
.tb-btn.active{border-color:var(--accent);color:var(--accent);background:rgba(163,113,247,.12)}
.tb-btn.danger-active{border-color:var(--red);color:var(--red);background:rgba(248,81,73,.12)}
#searchWrap{position:relative;flex:0 1 230px;min-width:130px}
#searchBox{background:#1c2128;border:1px solid var(--border);border-radius:4px;color:var(--text);padding:4px 10px;font-size:12px;width:100%;outline:none}
#searchBox:focus{border-color:var(--accent)}
#searchResults{position:absolute;top:32px;left:0;background:var(--panel);border:1px solid var(--border);border-radius:4px;z-index:2000;min-width:260px;max-height:340px;overflow-y:auto;display:none}
.sr-head{padding:5px 12px 3px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);background:rgba(255,255,255,.03);position:sticky;top:0}
.sr-item{padding:7px 12px;cursor:pointer;font-size:12px;border-bottom:1px solid var(--border)}
.sr-item:last-child{border-bottom:none}
.sr-item:hover{background:rgba(255,255,255,.06);color:var(--accent)}
#sidebar{width:44px;background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;padding:6px 4px;gap:4px;z-index:100;flex-shrink:0}
.tool-btn{width:36px;height:36px;background:transparent;border:1px solid transparent;border-radius:4px;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px}
.tool-btn:hover{border-color:var(--border);color:var(--text)}
.tool-btn.active{border-color:var(--accent);color:var(--accent);background:rgba(163,113,247,.15)}
.tool-sep{width:28px;height:1px;background:var(--border);margin:2px 0}
/* Tree panel */
#treePanel{width:0;background:var(--panel);border-right:1px solid var(--border);overflow:hidden;transition:width .2s ease;flex-shrink:0;display:flex;flex-direction:column}
#treePanel.open{width:260px}
.tp-hdr{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-bottom:1px solid var(--border);background:var(--ph);flex-shrink:0}
.tp-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.tp-body{flex:1;overflow-y:auto;padding:4px 0}
.tree-pop{cursor:pointer;padding:5px 10px;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;border-bottom:1px solid var(--border)}
.tree-pop:hover{background:rgba(255,255,255,.04)}
.tree-cto{cursor:pointer;padding:3px 10px 3px 24px;display:flex;align-items:center;gap:5px;font-size:11px}
.tree-cto:hover{background:rgba(255,255,255,.04)}
.tree-client{cursor:pointer;padding:2px 10px 2px 40px;display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted)}
.tree-client:hover{background:rgba(255,255,255,.04);color:var(--text)}
.tree-alert{color:var(--red) !important;font-weight:600}
.tree-offline{color:#555 !important}
.tree-badge{font-size:9px;padding:1px 4px;border-radius:3px;background:rgba(248,81,73,.15);color:var(--red);margin-left:auto}
#map{flex:1;z-index:0}
/* Pulsing alert marker */
@keyframes pulse-alert{0%{transform:scale(1);opacity:1}50%{transform:scale(1.8);opacity:.4}100%{transform:scale(1);opacity:1}}
.alert-pulse{animation:pulse-alert 1.4s ease-in-out infinite}
/* Halo suave que respira ao redor do cliente alertado (o anel sólido fica firme) */
@keyframes alert-halo{0%{transform:translate(-50%,-50%) scale(.85);opacity:.9}50%{transform:translate(-50%,-50%) scale(1.5);opacity:.15}100%{transform:translate(-50%,-50%) scale(.85);opacity:.9}}
.alert-halo{animation:alert-halo 1.6s ease-in-out infinite;pointer-events:none}
/* Selo de causa do incidente em massa (⚡ energia · ✂ rompimento) — pisca */
@keyframes incident-blink{0%,100%{opacity:1}50%{opacity:.25}}
.incident-badge{animation:incident-blink 1.2s ease-in-out infinite}
/* Heatmap dropdown */
#heatDropdown{position:absolute;top:48px;right:10px;z-index:9999;background:var(--panel);border:1px solid var(--border);border-radius:4px;min-width:160px;display:none;box-shadow:0 4px 12px rgba(0,0,0,.5)}
.heat-item{padding:7px 12px;cursor:pointer;font-size:12px;display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--border)}
.heat-item:last-child{border-bottom:none}
.heat-item:hover{background:rgba(255,255,255,.06);color:var(--accent)}
.heat-item.active{color:var(--accent)}
/* Mode badge on topbar */
#modeBadge{font-size:10px;padding:2px 6px;border-radius:3px;font-weight:700;background:rgba(88,166,255,.15);color:var(--blue);border:1px solid var(--blue);flex-shrink:0}
/* Base layer dropdown */
#baseDropdown{position:absolute;top:48px;right:10px;z-index:9999;background:var(--panel);border:1px solid var(--border);border-radius:4px;min-width:190px;display:none;box-shadow:0 4px 12px rgba(0,0,0,.5)}
.base-item{padding:7px 12px;cursor:pointer;font-size:12px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border)}
.base-item:last-child{border-bottom:none}
.base-item:hover{background:rgba(255,255,255,.06);color:var(--accent)}
.base-item.active{color:var(--accent)}
.base-thumb{width:28px;height:20px;border-radius:2px;object-fit:cover;flex-shrink:0;border:1px solid var(--border)}
.leaflet-container{background:var(--map-bg,#0b0e11)}
.leaflet-control-zoom a{background:var(--panel) !important;color:var(--text) !important;border-color:var(--border) !important}
.leaflet-control-zoom a:hover{background:var(--ph) !important;color:var(--accent) !important}
.leaflet-control-scale-line{background:rgba(11,14,17,.8) !important;border-color:var(--muted) !important;color:var(--muted) !important;font-size:10px !important}
.leaflet-control-attribution{background:rgba(11,14,17,.7) !important;color:var(--muted) !important;font-size:10px !important}
.leaflet-control-attribution a{color:var(--blue) !important}
.leaflet-popup-content-wrapper{background:var(--panel) !important;border:1px solid var(--border) !important;border-radius:4px !important;box-shadow:0 4px 16px rgba(0,0,0,.5) !important;color:var(--text) !important;padding:0 !important}
.leaflet-popup-content{margin:10px 14px !important;font-size:12px !important}
.leaflet-popup-tip{background:var(--panel) !important}
.leaflet-popup-close-button{color:var(--muted) !important}
.leaflet-tooltip{background:var(--panel);border:1px solid var(--border);color:var(--text);font-size:11px;padding:4px 8px;border-radius:3px;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.leaflet-tooltip-top:before{border-top-color:var(--border)}
#legend{position:absolute;bottom:30px;left:10px;z-index:500;background:var(--panel);border:1px solid var(--border);border-radius:4px;padding:8px 12px;font-size:11px;pointer-events:auto;user-select:none}
#legToggle{display:flex;align-items:center;gap:6px;cursor:pointer;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.6px}
#legToggle:hover{color:var(--text)}
#legBody{margin-top:6px}
#legBody.collapsed{display:none}
.leg-item{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.leg-item:last-child{margin-bottom:0}
.leg-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.leg-pop{width:13px;height:13px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:7px;font-weight:700;color:#fff}
.leg-square{width:10px;height:10px;border-radius:2px;flex-shrink:0}
.leg-hex{width:11px;height:11px;clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);flex-shrink:0}
.leg-diamond{width:8px;height:8px;transform:rotate(45deg);border-radius:1px;flex-shrink:0;margin:1px}
.leg-tri{font-size:11px;line-height:1;flex-shrink:0;user-select:none}
.leg-line{width:20px;height:3px;flex-shrink:0;border-radius:2px}
.leg-sec{font-size:9px;text-transform:uppercase;color:var(--muted);margin:5px 0 2px;letter-spacing:.5px}
#detailPanel{width:300px;background:var(--panel);border-left:1px solid var(--border);display:none;flex-direction:column;overflow-y:auto;flex-shrink:0}
#detailPanel.open{display:flex}
.dp-hdr{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--ph);flex-shrink:0}
.dp-title{font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px}
.dp-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:20px;line-height:1}
.dp-body{padding:12px;flex:1}
.dp-row{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid #1c2128;font-size:12px}
.dp-row:last-child{border-bottom:none}
.dp-lbl{color:var(--muted)}
.dp-val{font-weight:500;text-align:right;max-width:170px;word-break:break-word}
/* ── Painel de reconciliação (sumiram do ERP) ─────────────────────────────── */
#reconcilePanel{position:absolute;top:56px;right:10px;width:340px;max-height:calc(100vh - 120px);
  background:var(--panel);border:1px solid #e3b341;border-radius:8px;display:none;flex-direction:column;
  z-index:1200;box-shadow:0 8px 30px rgba(0,0,0,.6);overflow:hidden}
#reconcilePanel.open{display:flex}
#reconcilePanel .dp-body{overflow-y:auto}
.rc-footer{display:flex;gap:8px;justify-content:flex-end;padding:10px 12px;border-top:1px solid var(--border);flex-shrink:0}
.rc-row{display:flex;align-items:center;gap:8px;padding:7px 6px;border-bottom:1px solid #1c2128;cursor:pointer}
.rc-row:hover{background:rgba(255,255,255,.03)}
.rc-cb{width:15px;height:15px;flex-shrink:0;accent-color:#e3b341;cursor:pointer}
.rc-mini{background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:4px;
  color:var(--muted);padding:2px 8px;cursor:pointer;font-size:10px;flex-shrink:0}
.rc-mini:hover{border-color:var(--accent);color:var(--accent)}
body.noc-wall #reconcilePanel{display:none !important}
.dp-section{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:10px 0 4px}
.dp-badge{display:inline-block;padding:2px 6px;border-radius:3px;font-size:10px;font-weight:600}
.badge-ok{background:rgba(63,185,80,.15);color:var(--green)}
.badge-warn{background:rgba(227,179,65,.15);color:var(--yellow)}
.badge-err{background:rgba(248,81,73,.15);color:var(--red)}
.badge-unk{background:rgba(139,148,158,.15);color:var(--muted)}
.dp-btn{background:#1c2128;border:1px solid var(--border);border-radius:3px;color:var(--muted);padding:5px 10px;font-size:11px;cursor:pointer;margin-top:6px;width:100%;text-align:left;display:flex;align-items:center;gap:6px}
.dp-btn:hover{border-color:var(--accent);color:var(--accent)}
.dp-btn.danger:hover{border-color:var(--red);color:var(--red)}
#modal{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:5000;display:none;align-items:center;justify-content:center}
#modal.open{display:flex}
.modal-box{background:var(--panel);border:1px solid var(--border);border-radius:6px;width:400px;max-height:88vh;overflow-y:auto;display:flex;flex-direction:column}
.modal-hdr{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--ph);flex-shrink:0}
.modal-title{font-weight:600;font-size:14px}
.modal-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:20px;line-height:1}
.modal-body{padding:16px;display:flex;flex-direction:column;gap:10px}
.modal-footer{padding:12px 16px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;flex-shrink:0}
.form-group{display:flex;flex-direction:column;gap:4px}
.form-group label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.form-group input,.form-group select,.form-group textarea{background:#0d1117;border:1px solid var(--border);border-radius:4px;color:var(--text);padding:6px 10px;font-size:12px;outline:none;font-family:inherit}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--accent)}
.form-group textarea{resize:vertical;min-height:56px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.btn-primary{background:var(--accent);border:none;border-radius:4px;color:#fff;padding:6px 16px;cursor:pointer;font-size:12px;font-weight:600}
.btn-cancel{background:#1c2128;border:1px solid var(--border);border-radius:4px;color:var(--muted);padding:6px 16px;cursor:pointer;font-size:12px}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:9999;background:var(--ph);border:1px solid var(--border);border-radius:4px;padding:10px 20px;font-size:12px;display:none;white-space:nowrap}
#toast.show{display:block}
#toast.success{border-color:var(--green);color:var(--green)}
#toast.error{border-color:var(--red);color:var(--red)}
#toast.info{border-color:var(--blue);color:var(--blue)}
#elCount{position:absolute;bottom:30px;right:10px;z-index:500;background:var(--panel);border:1px solid var(--border);border-radius:4px;padding:5px 10px;font-size:11px;color:var(--muted)}
#citiesPanel{position:fixed;top:48px;right:10px;z-index:9999;background:var(--panel);border:1px solid var(--border);border-radius:4px;width:250px;display:none;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.cp-hdr{padding:8px 12px;border-bottom:1px solid var(--border);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
.city-item{display:flex;align-items:center;justify-content:space-between;padding:7px 12px;border-bottom:1px solid #1c2128;font-size:12px;cursor:pointer}
.city-item:hover{background:rgba(255,255,255,.04)}
.city-item.default{color:var(--accent)}
.gis-icon{background:none !important;border:none !important}

/* ── POP Diagram Modal ─────────────────────────────────────────────────────── */
#popDiagModal{position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:4000;display:none;align-items:center;justify-content:center}
#popDiagModal.open{display:flex}
.pdm-box{background:var(--panel);border:1px solid var(--border);border-radius:8px;width:94vw;max-width:1280px;max-height:92vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.7)}
.pdm-hdr{display:flex;align-items:flex-start;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--border);background:var(--ph);flex-shrink:0;gap:12px}
.pdm-hdr-left{flex:1;min-width:0}
.pdm-hdr-right{display:flex;gap:8px;align-items:center;flex-shrink:0}
.pdm-title{font-size:15px;font-weight:700;margin-bottom:5px;display:flex;align-items:center;gap:8px}
.pdm-sub{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pdm-body{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:20px}
.pdm-section-hdr{font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);font-weight:600;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px}
/* Equipment cards row */
.pdm-eq-row{display:flex;gap:12px;flex-wrap:wrap}
/* Base card */
.eq-card{background:#0d1117;border:1px solid var(--border);border-radius:6px;width:210px;flex-shrink:0;display:flex;flex-direction:column;overflow:hidden;transition:border-color .2s}
.eq-card:hover{border-color:#30363d}
.eq-card-hdr{padding:9px 12px;display:flex;align-items:center;gap:7px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;border-bottom:1px solid var(--border);flex-shrink:0}
.eq-card-body{padding:10px 12px;flex:1;display:flex;flex-direction:column;gap:4px;font-size:11px}
/* Card type accent colors */
.eq-card.router .eq-card-hdr{background:rgba(88,166,255,.07);border-bottom-color:rgba(88,166,255,.18)}
.eq-card.olt    .eq-card-hdr{background:rgba(163,113,247,.07);border-bottom-color:rgba(163,113,247,.18)}
.eq-card.switch .eq-card-hdr{background:rgba(139,148,158,.05);border-bottom-color:rgba(139,148,158,.12)}
/* Card internals */
.eq-lbl{color:var(--muted);font-size:10px}
.eq-val{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eq-ip{font-size:10px;color:var(--muted);font-family:monospace}
.eq-bar-wrap{background:#1c2128;border-radius:2px;height:4px;overflow:hidden;margin-top:1px}
.eq-bar{height:100%;border-radius:2px}
.eq-mon-badge{font-size:9px;padding:1px 5px;border-radius:10px;margin-left:auto;font-weight:700;flex-shrink:0}
.eq-row{display:flex;justify-content:space-between;align-items:center;padding:2px 0}
/* PON ports visualization */
.pon-grid{display:flex;gap:3px;flex-wrap:wrap;margin-top:3px}
.pon-sq{width:14px;height:14px;border-radius:2px;background:var(--accent);opacity:.75;font-size:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
/* DIO panel */
.dio-panel{background:#0d1117;border:1px solid var(--border);border-radius:6px;padding:12px 14px;flex:1;min-width:280px}
.dio-panel-hdr{font-size:11px;font-weight:700;display:flex;align-items:center;gap:6px;margin-bottom:8px}
.dio-ports{display:flex;flex-wrap:wrap;gap:3px;margin:6px 0}
.dio-port{width:16px;height:16px;border-radius:3px;cursor:default;border:1px solid #2a2f36;position:relative}
.dio-port.used{background:#3fb950;border-color:#2ea043}
.dio-port.free{background:#1c2128;border-color:#2a2f36}
.dio-port:hover::after{content:attr(data-tip);position:absolute;bottom:20px;left:50%;transform:translateX(-50%);background:#0d1117;border:1px solid var(--border);padding:3px 6px;border-radius:3px;font-size:9px;white-space:nowrap;color:var(--text);z-index:10;pointer-events:none}
.dio-stat{font-size:10px;color:var(--muted);display:flex;align-items:center;gap:8px}
/* Cable rows */
.cable-list{display:flex;flex-direction:column;gap:5px}
.cable-row{display:flex;align-items:center;gap:8px;padding:7px 10px;background:#0d1117;border:1px solid var(--border);border-radius:4px;font-size:11px}
.cable-layer-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.cable-code{color:var(--accent);font-weight:600;min-width:80px}
.cable-meta{color:var(--muted);flex:1}
/* OLT offline badge */
.olt-offline{color:var(--yellow);font-size:10px;font-weight:600}
/* Empty state */
.pdm-empty{color:var(--muted);font-size:12px;padding:16px;background:#0d1117;border:1px dashed var(--border);border-radius:4px}
/* DIO ABNT ports */
.dio-port{width:22px;height:22px;border-radius:3px;cursor:default;border:1px solid #2a2f36;position:relative;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;color:rgba(255,255,255,.7)}
.dio-port.free{background:#1c2128;border-color:#2a2f36;color:#555}
.dio-port.white-fiber{color:#333}
.dio-port:hover::after{content:attr(data-tip);position:absolute;bottom:26px;left:50%;transform:translateX(-50%);background:#0d1117;border:1px solid var(--border);padding:4px 8px;border-radius:3px;font-size:9px;white-space:nowrap;color:var(--text);z-index:10;pointer-events:none;min-width:100px;text-align:center}
/* DIO connector type badge */
.dio-connector{font-size:9px;padding:2px 6px;border-radius:10px;font-weight:700;letter-spacing:.3px}
.dio-connector.apc{background:rgba(0,180,0,.15);color:#00cc44;border:1px solid rgba(0,180,0,.3)}
.dio-connector.upc{background:rgba(0,120,255,.15);color:#3399ff;border:1px solid rgba(0,120,255,.3)}
/* Uplink cards */
.eq-card.uplink-fiber{border-color:rgba(163,113,247,.25)}
.eq-card.uplink-fiber .eq-card-hdr{background:rgba(163,113,247,.07);border-bottom-color:rgba(163,113,247,.2)}
.eq-card.uplink-radio{border-color:rgba(227,179,65,.25)}
.eq-card.uplink-radio .eq-card-hdr{background:rgba(227,179,65,.07);border-bottom-color:rgba(227,179,65,.2)}
.eq-card.uplink-starlink{border-color:rgba(88,166,255,.25)}
.eq-card.uplink-starlink .eq-card-hdr{background:rgba(88,166,255,.07);border-bottom-color:rgba(88,166,255,.2)}
.eq-card.uplink-vsat{border-color:rgba(88,166,255,.2)}
.eq-card.uplink-vsat .eq-card-hdr{background:rgba(88,166,255,.05);border-bottom-color:rgba(88,166,255,.15)}
.eq-card.uplink-4g{border-color:rgba(63,185,80,.25)}
.eq-card.uplink-4g .eq-card-hdr{background:rgba(63,185,80,.07);border-bottom-color:rgba(63,185,80,.2)}
.uplink-bw{font-size:13px;font-weight:700;color:var(--green)}
.uplink-primary{font-size:9px;padding:1px 5px;border-radius:10px;background:rgba(63,185,80,.15);color:var(--green);border:1px solid rgba(63,185,80,.3);font-weight:700}
.uplink-backup{font-size:9px;padding:1px 5px;border-radius:10px;background:rgba(227,179,65,.15);color:var(--yellow);border:1px solid rgba(227,179,65,.3);font-weight:700}

/* ═══ Visual Detail Modals — CTO / CEO ═══════════════════════════════════════ */
#ctoVisualModal,#ceoVisualModal{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:4500;display:none;align-items:center;justify-content:center;padding:12px}
#ctoVisualModal.open,#ceoVisualModal.open{display:flex}
.vdm-box{background:#0d1117;border:1px solid #30363d;border-radius:12px;width:100%;max-width:1060px;max-height:92vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 100px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.04)}
/* CTO Overview layout */
.cto-ov-wrap{display:grid;grid-template-columns:300px 1fr;gap:20px;align-items:start}
.cto-ov-right{display:flex;flex-direction:column;gap:16px}
.cto-util-block{background:#161b22;border:1px solid #21262d;border-radius:10px;padding:16px;display:flex;gap:18px;align-items:center}
.cto-util-stats{display:flex;flex-direction:column;gap:8px;flex:1}
.cto-util-stat{display:flex;justify-content:space-between;align-items:center;font-size:12px;padding:6px 10px;background:#0d1117;border-radius:6px;border:1px solid #21262d}
.cto-util-stat-lbl{color:#8b949e}
.cto-util-stat-val{font-weight:700;font-size:14px}
/* CTO port grid — large visual cells */
.cto-port-grid-wrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;padding:4px 0}
.cto-pc{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;background:#161b22;border:1px solid #21262d;border-radius:8px;cursor:pointer;transition:border-color .15s,background .15s;position:relative}
.cto-pc:hover{border-color:#a371f7;background:#1a1f27}
.cto-pc.pc-online{border-color:rgba(63,185,80,.35);background:rgba(63,185,80,.05)}
.cto-pc.pc-online:hover{border-color:#3fb950}
.cto-pc.pc-offline{border-color:rgba(248,81,73,.3);background:rgba(248,81,73,.05)}
.cto-pc-circle{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.cto-pc.pc-online .cto-pc-circle{background:rgba(63,185,80,.2);color:#3fb950;border:2px solid #3fb950}
.cto-pc.pc-offline .cto-pc-circle{background:rgba(248,81,73,.15);color:#f85149;border:2px solid #f85149}
.cto-pc.pc-free .cto-pc-circle{background:#1c2128;color:#444;border:2px solid #2a2f36}
.cto-pc-num{font-size:10px;font-weight:700;color:#8b949e;line-height:1}
.cto-pc-name{font-size:9px;color:#c9d1d9;text-align:center;max-width:68px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}
.cto-pc-badge{position:absolute;top:4px;right:4px;width:6px;height:6px;border-radius:50%}
.cto-pc-badge.online{background:#3fb950}
.cto-pc-badge.offline{background:#f85149}
.cto-ports-bar{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:#161b22;border:1px solid #21262d;border-radius:8px;margin-bottom:12px;font-size:11px}
.cto-ports-bar-seg{display:flex;gap:14px}
.cto-ports-bar-item{display:flex;align-items:center;gap:5px;color:#8b949e}
.cto-ports-bar-dot{width:8px;height:8px;border-radius:50%}
/* Splitter diagram */
.cto-splitter-wrap{background:#161b22;border:1px solid #21262d;border-radius:10px;padding:20px;overflow-x:auto}
.cto-splitter-title{font-size:10px;text-transform:uppercase;letter-spacing:.7px;color:#8b949e;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:6px}
.cto-spl-row{display:flex;align-items:center;gap:0;margin-bottom:4px}
.cto-spl-port{display:flex;align-items:center;gap:8px;padding:5px 10px;border-radius:6px;font-size:11px;cursor:pointer;transition:background .12s;flex:1;min-width:180px}
.cto-spl-port:hover{background:rgba(163,113,247,.08)}
.cto-spl-port-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}
.cto-spl-port-dot.online{background:#3fb950;box-shadow:0 0 6px rgba(63,185,80,.5)}
.cto-spl-port-dot.offline{background:#f85149;box-shadow:0 0 6px rgba(248,81,73,.4)}
.cto-spl-port-dot.free{background:#2a2f36;border:1px solid #3d444d}
.cto-spl-port-name{font-weight:500;color:#e6edf3}
.cto-spl-port-sub{font-size:10px;color:#8b949e;font-family:monospace}
.cto-spl-line{width:24px;height:1px;background:#2d333b;flex-shrink:0}
.cto-spl-box{background:#1c2128;border:1px solid #30363d;border-radius:8px;padding:10px 16px;text-align:center;flex-shrink:0;min-width:110px}
.cto-spl-box-label{font-size:9px;text-transform:uppercase;letter-spacing:.5px;color:#8b949e;margin-bottom:4px}
.cto-spl-box-type{font-size:16px;font-weight:700;color:#a371f7}
.cto-spl-source{background:#0d1117;border:1px solid #21262d;border-radius:8px;padding:10px 14px;flex-shrink:0;text-align:center;min-width:110px}
.cto-spl-source-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.5px;color:#8b949e;margin-bottom:4px}
.cto-spl-source-val{font-size:12px;font-weight:600;color:#58a6ff}
.cto-spl-source-sub{font-size:10px;color:#8b949e;margin-top:2px}
/* CEO — Bandejas e Emendas */
.ceo-ov-wrap{display:grid;grid-template-columns:300px 1fr;gap:20px;align-items:start}
.ceo-ov-right{display:flex;flex-direction:column;gap:14px}
.ceo-tray-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.ceo-tray-card{background:#0d1117;border:1px solid #21262d;border-radius:8px;padding:10px 12px;transition:border-color .15s}
.ceo-tray-card:hover{border-color:#a371f7}
.ceo-tray-hdr{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.ceo-tray-num{width:26px;height:26px;background:rgba(163,113,247,.15);border:1px solid rgba(163,113,247,.3);border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#a371f7;font-size:11px;flex-shrink:0}
.ceo-tray-title{font-size:11px;font-weight:600;color:#e6edf3;flex:1}
.ceo-tray-stat{font-size:9.5px;color:#8b949e;font-weight:500}
.ceo-fiber-grid{display:flex;flex-wrap:wrap;gap:3px}
.ceo-fiber-cell{width:18px;height:18px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:7.5px;font-weight:700;cursor:pointer;transition:transform .1s;position:relative}
.ceo-fiber-cell:hover{transform:scale(1.4);z-index:5}
.ceo-fiber-cell.fb-used{background:rgba(163,113,247,.2);color:#a371f7;border:1px solid rgba(163,113,247,.4)}
.ceo-fiber-cell.fb-free{background:#1c2128;color:#3d444d;border:1px solid #2a2f36}
.ceo-fiber-cell.fb-broken{background:rgba(248,81,73,.2);color:#f85149;border:1px solid rgba(248,81,73,.4)}
.ceo-fiber-cell.fb-degraded{background:rgba(227,179,65,.2);color:#e3b341;border:1px solid rgba(227,179,65,.4)}
.ceo-spl-row{display:grid;grid-template-columns:34px 1fr 24px 1fr 70px;gap:10px;align-items:center;padding:9px 12px;background:#161b22;border:1px solid #21262d;border-radius:6px;margin-bottom:5px;font-size:11.5px}
.ceo-spl-row:hover{border-color:#a371f7}
.ceo-spl-tray{background:rgba(163,113,247,.15);color:#a371f7;border-radius:4px;padding:3px 6px;font-weight:700;font-size:10px;text-align:center}
.ceo-spl-side{display:flex;flex-direction:column;line-height:1.3}
.ceo-spl-cable{font-weight:600;color:#c9d1d9}
.ceo-spl-fiber{font-size:10px;color:#8b949e;font-family:monospace}
.ceo-spl-arrow{color:#8b949e;text-align:center}
.ceo-spl-loss{font-size:10px;color:#8b949e;text-align:right;font-family:monospace}
.ceo-add-splice{background:#161b22;border:1px dashed #30363d;border-radius:6px;padding:14px;text-align:center;cursor:pointer;color:#8b949e;font-size:12px;transition:border-color .15s,color .15s;margin-top:8px}
.ceo-add-splice:hover{border-color:#a371f7;color:#a371f7}
.ceo-tray-empty{font-size:10px;color:#666;font-style:italic;padding:8px;text-align:center}
/* POP — Visão Geral redesenhada */
.pop-ov-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.pop-ov-card{background:#0d1117;border:1px solid #21262d;border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:8px}
.pop-ov-card-title{font-size:10px;color:#8b949e;text-transform:uppercase;letter-spacing:.6px;font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:6px}
.pop-info-stack{display:flex;flex-direction:column;gap:6px}
.pop-info-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid #1c2128;font-size:11.5px}
.pop-info-row:last-child{border-bottom:none}
.pop-info-row-lbl{color:#8b949e}
.pop-info-row-val{font-weight:500;color:#e6edf3;text-align:right}
/* Mini topology SVG */
.pop-topo{background:#0b0e11;border:1px solid #1c2128;border-radius:8px;padding:12px;min-height:300px;display:flex;align-items:center;justify-content:center;position:relative}
.pop-topo svg{display:block;max-width:100%;height:auto}
/* Performance row (4 cards) */
.pop-perf-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.pop-perf-card{background:#0d1117;border:1px solid #21262d;border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:3px;min-height:74px;position:relative;overflow:hidden}
.pop-perf-card-lbl{font-size:9.5px;color:#8b949e;text-transform:uppercase;letter-spacing:.6px;font-weight:600}
.pop-perf-card-val{font-size:22px;font-weight:700;line-height:1.1}
.pop-perf-card-sub{font-size:10px;color:#8b949e}
.pop-perf-card-icon{position:absolute;top:10px;right:12px;font-size:18px;opacity:.3}
/* Circuit Trace (rastreamento completo OLT → CTO → Cliente) */
.cir-flow{display:flex;align-items:stretch;gap:0;flex-wrap:wrap;padding:18px;background:linear-gradient(180deg,#0a0d12 0%,#0d1117 100%);border:1px solid #21262d;border-radius:10px;overflow-x:auto;margin-bottom:14px}
.cir-node{display:flex;flex-direction:column;align-items:center;gap:5px;padding:14px 16px;background:#161b22;border:1px solid #30363d;border-radius:10px;min-width:140px;text-align:center;position:relative;flex-shrink:0}
.cir-node.cir-olt{border-color:#58a6ff;background:rgba(31,111,235,.08)}
.cir-node.cir-dio{border-color:#db6d28;background:rgba(219,109,40,.08)}
.cir-node.cir-pop{border-color:#a371f7;background:rgba(163,113,247,.08)}
.cir-node.cir-ceo{border-color:#a371f7;background:rgba(163,113,247,.06)}
.cir-node.cir-cto{border-color:#3fb950;background:rgba(63,185,80,.08)}
.cir-node.cir-client{border-color:#e3b341;background:rgba(227,179,65,.08)}
.cir-node-icon{font-size:26px;margin-bottom:2px}
.cir-node.cir-olt .cir-node-icon{color:#58a6ff}
.cir-node.cir-dio .cir-node-icon{color:#db6d28}
.cir-node.cir-pop .cir-node-icon{color:#a371f7}
.cir-node.cir-ceo .cir-node-icon{color:#a371f7}
.cir-node.cir-cto .cir-node-icon{color:#3fb950}
.cir-node.cir-client .cir-node-icon{color:#e3b341}
.cir-node-label{font-size:11px;font-weight:700;color:#e6edf3;line-height:1.2;max-width:130px;word-break:break-word}
.cir-node-sub{font-size:9.5px;color:#8b949e;font-family:monospace;line-height:1.3}
.cir-node-tag{position:absolute;top:-8px;left:50%;transform:translateX(-50%);background:#0d1117;color:#8b949e;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 8px;border:1px solid #21262d;border-radius:8px;white-space:nowrap}
.cir-arrow{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 4px;flex-shrink:0;min-width:60px}
.cir-arrow-line{height:2px;width:100%;background:linear-gradient(90deg,#30363d,#8b949e,#30363d);position:relative}
.cir-arrow-line:after{content:'';position:absolute;right:-2px;top:-3px;width:0;height:0;border-left:6px solid #8b949e;border-top:4px solid transparent;border-bottom:4px solid transparent}
.cir-arrow-cable{font-size:9px;color:#8b949e;font-family:monospace;margin-top:2px;text-align:center;line-height:1.3}
.cir-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin-bottom:12px}
.cir-stat{background:#161b22;border:1px solid #21262d;border-radius:8px;padding:10px 14px}
.cir-stat-lbl{font-size:9px;color:#8b949e;text-transform:uppercase;letter-spacing:.6px;font-weight:700;margin-bottom:3px}
.cir-stat-val{font-size:18px;font-weight:700;color:#e6edf3}
.cir-stat-sub{font-size:10px;color:#8b949e;margin-top:1px}
.cir-empty{padding:50px;text-align:center;color:#8b949e}
.cir-empty i{font-size:36px;display:block;margin-bottom:10px;opacity:.3}
.cir-cable-trail{display:flex;flex-direction:column;gap:5px;margin-top:5px}
.cir-cable-row{display:flex;align-items:center;gap:8px;padding:7px 10px;background:#0d1117;border:1px solid #21262d;border-radius:5px;font-size:11px}
.cir-cable-layer-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.vdm-hdr{background:linear-gradient(180deg,#1c2128 0%,#161b22 100%);border-bottom:1px solid #21262d;padding:16px 20px 0;flex-shrink:0}
.vdm-hdr-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px}
.vdm-title-block{display:flex;align-items:center;gap:12px}
.vdm-type-badge{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.vdm-type-badge.cto{background:rgba(63,185,80,.1);color:#3fb950;border:1px solid rgba(63,185,80,.2)}
.vdm-type-badge.ceo{background:rgba(163,113,247,.1);color:#a371f7;border:1px solid rgba(163,113,247,.2)}
.vdm-type-badge.dio{background:rgba(88,166,255,.1);color:#58a6ff;border:1px solid rgba(88,166,255,.2)}
.vdm-title-text{font-size:16px;font-weight:700;line-height:1.2}
.vdm-title-sub{font-size:11px;color:#8b949e;margin-top:3px}
.vdm-hdr-actions{display:flex;gap:6px;align-items:center;flex-shrink:0}
.vdm-tabs{display:flex;margin:0 -20px;padding:0 20px}
.vdm-tab{padding:9px 15px 11px;font-size:12px;font-weight:500;color:#8b949e;cursor:pointer;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;white-space:nowrap;user-select:none}
.vdm-tab:hover{color:#c9d1d9}
.vdm-tab.active{color:#a371f7;border-bottom-color:#a371f7}
.vdm-body{flex:1;overflow-y:auto;padding:20px;scrollbar-width:thin;scrollbar-color:#30363d transparent}
.vdm-tab-pane{display:none}.vdm-tab-pane.active{display:block}
.vdm-2col{display:grid;grid-template-columns:290px 1fr;gap:20px;align-items:start}
.vdm-photo-box{background:#0d1117;border:1px solid #21262d;border-radius:8px;height:155px;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:14px;position:relative}
.vdm-photo-gradient{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 25%,#0d1117 100%)}
.vdm-info-table{display:flex;flex-direction:column}
.vdm-ir{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid #1c2128;font-size:11.5px;gap:8px}
.vdm-ir:last-child{border-bottom:none}
.vdm-il{color:#8b949e;flex-shrink:0}
.vdm-iv{font-weight:500;text-align:right;word-break:break-word}
.vdm-sec{font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:#8b949e;font-weight:600;margin:16px 0 10px;padding-bottom:6px;border-bottom:1px solid #21262d;display:flex;align-items:center;gap:6px}
.vdm-metrics-row{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;margin-bottom:4px}
.vdm-donut-container{display:flex;flex-direction:column;align-items:center;gap:6px}
.vdm-stats-col{flex:1;display:flex;flex-direction:column;gap:7px;min-width:130px}
.vdm-stat-card{background:#0d1117;border:1px solid #21262d;border-radius:8px;padding:10px 14px;display:flex;justify-content:space-between;align-items:center}
.vdm-stat-num{font-size:22px;font-weight:700}
.vdm-stat-lbl{font-size:10px;color:#8b949e;text-transform:uppercase;letter-spacing:.4px;margin-top:2px}
.vdm-port-grid{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.vdm-port{width:26px;height:26px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:7.5px;font-weight:700;cursor:pointer;transition:transform .1s,box-shadow .1s;border:1px solid transparent;position:relative}
.vdm-port:hover{transform:scale(1.25);z-index:5;box-shadow:0 0 10px rgba(0,0,0,.5)}
.vdm-port.p-online{background:rgba(63,185,80,.18);border-color:rgba(63,185,80,.45);color:#3fb950}
.vdm-port.p-offline{background:rgba(248,81,73,.13);border-color:rgba(248,81,73,.4);color:#f85149}
.vdm-port.p-free{background:#1c2128;border-color:#2a2f36;color:#444}
.vdm-port:after{content:attr(data-tip);position:absolute;bottom:115%;left:50%;transform:translateX(-50%);background:#0d1117;border:1px solid #30363d;padding:4px 8px;border-radius:4px;font-size:10px;white-space:nowrap;color:#c9d1d9;z-index:20;pointer-events:none;display:none;min-width:120px;text-align:center}
.vdm-port:hover:after{display:block}
.vdm-client-item{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#0d1117;border:1px solid #21262d;border-radius:6px;margin-bottom:4px;font-size:12px;cursor:pointer;transition:border-color .15s}
.vdm-client-item:hover{border-color:#a371f7}
.vdm-port-num{width:30px;height:30px;background:rgba(163,113,247,.1);border:1px solid rgba(163,113,247,.2);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#a371f7;flex-shrink:0}
.vdm-client-name{font-weight:500;flex:1}
.vdm-client-pppoe{color:#8b949e;font-size:10px;font-family:monospace;margin-top:1px}
.vdm-tray{background:#0d1117;border:1px solid #21262d;border-radius:6px;padding:10px 12px;margin-bottom:6px}
.vdm-tray-hdr{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:11px;font-weight:600}
.vdm-tray-num{width:28px;height:28px;background:rgba(163,113,247,.1);border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#a371f7;font-size:12px;flex-shrink:0}
.vdm-tray-dots{display:flex;gap:2px;flex-wrap:wrap;flex:1}
.vdm-splice-dot{width:9px;height:9px;border-radius:50%}
.vdm-splice-dot.used{background:#a371f7}
.vdm-splice-dot.free{background:#1c2128;border:1px solid #2a2f36}
/* POP modal tabs */
#pdmTabRow{display:flex;background:var(--ph);border-bottom:1px solid var(--border);padding:0 20px;flex-shrink:0}
.pdm-tab{padding:9px 14px 11px;font-size:12px;font-weight:500;color:#8b949e;cursor:pointer;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;white-space:nowrap;user-select:none}
.pdm-tab:hover{color:#c9d1d9}
.pdm-tab.active{color:#a371f7;border-bottom-color:#a371f7}
.pdm-pane{display:none}.pdm-pane.active{display:block}
/* NOC metric cards (POP Visão Geral) */
.noc-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.noc-card{background:#0d1117;border:1px solid #21262d;border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.noc-card-icon{font-size:16px;margin-bottom:4px;opacity:.75}
.noc-card-val{font-size:20px;font-weight:700;line-height:1.1}
.noc-card-lbl{font-size:10px;color:#8b949e;text-transform:uppercase;letter-spacing:.4px}
.pop-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.pop-info-card{background:#0d1117;border:1px solid #21262d;border-radius:6px;padding:10px 12px}
.pop-info-card-lbl{font-size:10px;color:#8b949e;text-transform:uppercase;letter-spacing:.4px;margin-bottom:5px}
.pop-info-card-val{font-size:12px;font-weight:500;word-break:break-word}
/* Rack visual (datacenter) */
.rack-tab-wrap{display:grid;grid-template-columns:180px 1fr 240px;gap:14px;height:100%;min-height:620px}
.rack-side{background:#0d1117;border:1px solid #21262d;border-radius:8px;padding:10px;overflow-y:auto}
.rack-side h4{margin:0 0 8px;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#8b949e;font-weight:600}
.rack-card{background:#161b22;border:1px solid #21262d;border-radius:6px;padding:9px 11px;margin-bottom:6px;cursor:pointer;transition:border-color .12s,background .12s;display:flex;align-items:center;gap:8px}
.rack-card:hover{border-color:#a371f7;background:#1c2129}
.rack-card.active{border-color:#a371f7;background:rgba(163,113,247,.08)}
.rack-card-icon{width:28px;height:28px;background:#0d1117;border:1px solid #30363d;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#8b949e;flex-shrink:0;font-size:14px}
.rack-card.active .rack-card-icon{color:#a371f7;border-color:rgba(163,113,247,.4)}
.rack-card-info{flex:1;min-width:0}
.rack-card-name{font-size:12px;font-weight:600;color:#e6edf3;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rack-card-meta{font-size:10px;color:#8b949e;display:flex;gap:6px}
.rack-add-btn{width:100%;padding:8px;background:transparent;border:1px dashed #30363d;border-radius:6px;color:#8b949e;font-size:11px;cursor:pointer;transition:all .12s;display:flex;align-items:center;justify-content:center;gap:5px}
.rack-add-btn:hover{border-color:#a371f7;color:#a371f7}
.rack-canvas-wrap{background:linear-gradient(180deg,#0a0d12 0%,#0d1117 100%);border:1px solid #21262d;border-radius:8px;padding:18px;display:flex;justify-content:center;overflow:auto}
.rack-canvas-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#8b949e;font-size:13px;padding:60px 20px;text-align:center;width:100%}
.rack-canvas-empty i{font-size:48px;margin-bottom:12px;opacity:.4}
.rack-svg{display:block}
.rack-eq-block{cursor:grab;transition:filter .12s}
.rack-eq-block:hover{filter:brightness(1.18)}
.rack-eq-block:active{cursor:grabbing}
.rack-eq-border{opacity:0;transition:opacity .15s}
.rack-eq-block:hover .rack-eq-border{opacity:1}
.rack-eq-border.show{opacity:1}
.rack-info-side{background:#0d1117;border:1px solid #21262d;border-radius:8px;padding:12px;overflow-y:auto}
.rack-info-side h4{margin:0 0 10px;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#8b949e;font-weight:600}
.rack-eq-row{display:flex;justify-content:space-between;align-items:center;background:#161b22;border:1px solid #21262d;border-radius:6px;padding:7px 10px;margin-bottom:5px;font-size:11px}
.rack-eq-row-label{color:#e6edf3;font-weight:500}
.rack-eq-row-pos{color:#8b949e;font-family:monospace;font-size:10px}
.rack-form{display:grid;gap:8px;margin-top:10px;padding:10px;background:#161b22;border:1px solid #21262d;border-radius:6px}
.rack-form label{font-size:10px;color:#8b949e;text-transform:uppercase;letter-spacing:.4px;display:block;margin-bottom:3px}
.rack-form input,.rack-form select{width:100%;background:#0d1117;border:1px solid #30363d;color:#e6edf3;padding:6px 8px;border-radius:4px;font-size:12px}
.rack-form-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rack-form-actions{display:flex;gap:6px;justify-content:flex-end;margin-top:4px}
.rack-form-btn{padding:6px 12px;border-radius:4px;font-size:11px;cursor:pointer;border:1px solid #30363d;background:#21262d;color:#e6edf3}
.rack-form-btn.primary{background:#a371f7;border-color:#a371f7;color:#fff}
.rack-form-btn.danger{background:transparent;border-color:#f85149;color:#f85149}
/* Reservas Técnicas (estoque) */
.stock-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.stock-cat-card{background:#0d1117;border:1px solid #21262d;border-radius:8px;padding:14px;cursor:pointer;transition:border-color .12s,background .12s;position:relative}
.stock-cat-card:hover{border-color:#a371f7}
.stock-cat-card.active{border-color:#a371f7;background:rgba(163,113,247,.08)}
.stock-cat-icon{font-size:20px;margin-bottom:6px;opacity:.85}
.stock-cat-val{font-size:24px;font-weight:700;color:#e6edf3;line-height:1}
.stock-cat-lbl{font-size:11px;color:#8b949e;margin-top:4px;text-transform:uppercase;letter-spacing:.4px}
.stock-cat-meta{font-size:10px;color:#6e7681;margin-top:2px}
.stock-cat-low{position:absolute;top:8px;right:8px;background:#f85149;color:#fff;border-radius:10px;padding:2px 7px;font-size:9px;font-weight:700}
.stock-table-wrap{background:#0d1117;border:1px solid #21262d;border-radius:8px;overflow:hidden}
.stock-toolbar{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid #21262d}
.stock-toolbar-title{font-size:12px;font-weight:600;color:#c9d1d9}
.stock-table{width:100%;border-collapse:collapse;font-size:11px}
.stock-table th{background:#161b22;color:#8b949e;font-weight:600;text-transform:uppercase;letter-spacing:.4px;font-size:10px;padding:8px 10px;text-align:left;border-bottom:1px solid #21262d}
.stock-table td{padding:8px 10px;border-bottom:1px solid #161b22;color:#c9d1d9}
.stock-table tr:hover td{background:#0f1419}
.stock-qty{font-weight:600;font-family:monospace}
.stock-qty.low{color:#f85149}
.stock-qty.warn{color:#e3b341}
.stock-row-actions{display:flex;gap:4px}
.stock-mini-btn{width:22px;height:22px;border-radius:4px;border:1px solid #30363d;background:#21262d;color:#c9d1d9;cursor:pointer;font-size:10px;display:inline-flex;align-items:center;justify-content:center}
.stock-mini-btn:hover{background:#30363d}
.stock-mini-btn.danger{color:#f85149;border-color:#f85149;background:transparent}
.stock-empty{padding:30px;text-align:center;color:#6e7681;font-size:12px}
.stock-low-banner{background:rgba(248,81,73,.08);border:1px solid rgba(248,81,73,.3);border-radius:6px;padding:10px 14px;margin-bottom:12px;color:#f0a8a4;font-size:11px;display:flex;align-items:center;gap:10px}
.stock-low-banner i{color:#f85149;font-size:14px}
/* Modal global de Reservas Técnicas */
#stockGlobalModal{position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:4000;display:none;align-items:center;justify-content:center}
#stockGlobalModal.open{display:flex}
.stkg-box{background:#0d1117;border:1px solid #30363d;border-radius:10px;width:min(1200px,95vw);max-height:92vh;display:flex;flex-direction:column;overflow:hidden}
.stkg-hdr{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid #21262d;background:#161b22;flex-shrink:0}
.stkg-title{font-size:15px;font-weight:600;color:#e6edf3;display:flex;align-items:center;gap:10px}
.stkg-close{margin-left:auto;background:transparent;border:none;color:#8b949e;font-size:18px;cursor:pointer;padding:4px 10px;border-radius:4px}
.stkg-close:hover{color:#fff;background:#21262d}
.stkg-body{padding:18px 20px;overflow-y:auto;flex:1}
.stkg-totals-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px}
.stkg-bucket{background:#161b22;border:1px solid #21262d;border-radius:8px;margin-bottom:10px;overflow:hidden;transition:border-color .12s}
.stkg-bucket.has-low{border-color:rgba(248,81,73,.5)}
.stkg-bucket-hdr{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#0d1117;cursor:pointer;user-select:none}
.stkg-bucket-hdr:hover{background:#10151c}
.stkg-bucket-icon{width:30px;height:30px;background:#1f2933;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#a371f7;font-size:14px;flex-shrink:0}
.stkg-bucket-icon.central{color:#e3b341;background:rgba(227,179,65,.1)}
.stkg-bucket-name{font-size:13px;font-weight:600;color:#e6edf3}
.stkg-bucket-meta{font-size:11px;color:#8b949e;margin-top:2px}
.stkg-bucket-cats{display:flex;gap:14px;margin-left:auto;font-size:11px;color:#8b949e;align-items:center}
.stkg-bucket-cat{display:flex;flex-direction:column;align-items:center;min-width:46px}
.stkg-bucket-cat .v{font-size:13px;font-weight:700;color:#e6edf3}
.stkg-bucket-cat .l{font-size:9px;text-transform:uppercase;letter-spacing:.4px}
.stkg-low-badge{background:#f85149;color:#fff;border-radius:10px;padding:2px 8px;font-size:10px;font-weight:700}
.stkg-bucket-toggle{color:#8b949e;font-size:14px;transition:transform .15s}
.stkg-bucket.expanded .stkg-bucket-toggle{transform:rotate(90deg)}
.stkg-bucket-detail{display:none;padding:0 14px 12px}
.stkg-bucket.expanded .stkg-bucket-detail{display:block}
.stkg-detail-table{width:100%;border-collapse:collapse;font-size:11px;margin-top:6px}
.stkg-detail-table th{background:#10151c;color:#8b949e;text-transform:uppercase;letter-spacing:.4px;font-size:10px;padding:6px 10px;text-align:left;border-bottom:1px solid #21262d}
.stkg-detail-table td{padding:6px 10px;border-bottom:1px solid #161b22;color:#c9d1d9}
.stkg-detail-table tr:hover td{background:#0f1419}
/* Modal de Predições */
#predictModal{position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:4000;display:none;align-items:center;justify-content:center}
#predictModal.open{display:flex}
.prd-box{background:#0d1117;border:1px solid #30363d;border-radius:10px;width:min(1300px,96vw);max-height:92vh;display:flex;flex-direction:column;overflow:hidden}
.prd-tabs{display:flex;background:#0d1117;border-bottom:1px solid #21262d;padding:0 20px;flex-shrink:0}
.prd-tab{padding:12px 16px;font-size:12px;font-weight:500;color:#8b949e;cursor:pointer;border-bottom:2px solid transparent;transition:all .12s}
.prd-tab:hover{color:#c9d1d9}
.prd-tab.active{color:#a371f7;border-bottom-color:#a371f7}
.prd-pane{display:none;padding:18px 20px;overflow-y:auto;flex:1}
.prd-pane.active{display:block}
.prd-table{width:100%;border-collapse:collapse;font-size:11px}
.prd-table th{background:#161b22;color:#8b949e;font-weight:600;text-transform:uppercase;letter-spacing:.4px;font-size:10px;padding:9px 10px;text-align:left;border-bottom:1px solid #21262d;position:sticky;top:0}
.prd-table td{padding:9px 10px;border-bottom:1px solid #161b22;color:#c9d1d9}
.prd-table tr:hover td{background:#0f1419}
.prd-risk-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.prd-risk-critical{background:rgba(248,81,73,.18);color:#f85149;border:1px solid rgba(248,81,73,.4)}
.prd-risk-warning{background:rgba(227,179,65,.18);color:#e3b341;border:1px solid rgba(227,179,65,.4)}
.prd-risk-attention{background:rgba(88,166,255,.18);color:#58a6ff;border:1px solid rgba(88,166,255,.4)}
.prd-verdict-fisico_confirmado{background:rgba(248,81,73,.18);color:#f85149;border:1px solid rgba(248,81,73,.4)}
.prd-verdict-cliente{background:rgba(227,179,65,.18);color:#e3b341;border:1px solid rgba(227,179,65,.4)}
.prd-verdict-leitura_ruim{background:rgba(163,113,247,.18);color:#a371f7;border:1px solid rgba(163,113,247,.4)}
.prd-stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px}
.prd-stat{background:#161b22;border:1px solid #21262d;border-radius:8px;padding:14px}
.prd-stat-val{font-size:24px;font-weight:700}
.prd-stat-lbl{font-size:11px;color:#8b949e;margin-top:4px;text-transform:uppercase;letter-spacing:.4px}
.prd-trend{font-family:monospace;font-size:11px}
.prd-trend.bad{color:#f85149}
.prd-trend.warn{color:#e3b341}
.prd-trend.ok{color:#3fb950}
.prd-empty{padding:40px;text-align:center;color:#8b949e;font-size:13px}
.prd-empty i{font-size:42px;display:block;margin-bottom:12px;opacity:.3}
/* Galeria de fotos */
.photo-gal-wrap{position:relative;background:#0d1117;border:1px solid #21262d;border-radius:8px;overflow:hidden;margin-bottom:14px}
.photo-gal-main{height:300px;display:flex;align-items:center;justify-content:center;background:#0d1117;cursor:pointer;position:relative;overflow:hidden}
.photo-gal-main img{width:100%;height:100%;object-fit:cover;display:block}
.photo-gal-empty-svg{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.photo-gal-thumbs{display:flex;gap:6px;padding:8px;overflow-x:auto;background:#161b22;border-top:1px solid #21262d}
.photo-gal-thumb{width:54px;height:42px;border-radius:4px;background:#0d1117;border:2px solid transparent;cursor:pointer;flex-shrink:0;overflow:hidden;position:relative;transition:border-color .12s}
.photo-gal-thumb:hover{border-color:#a371f7}
.photo-gal-thumb.active{border-color:#a371f7}
.photo-gal-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.photo-gal-thumb-add{display:flex;align-items:center;justify-content:center;color:#8b949e;font-size:18px;border:2px dashed #30363d;background:transparent;cursor:pointer}
.photo-gal-thumb-add:hover{border-color:#a371f7;color:#a371f7}
.photo-gal-toolbar{position:absolute;top:8px;right:8px;display:flex;gap:4px;z-index:2;opacity:0;transition:opacity .15s}
.photo-gal-wrap:hover .photo-gal-toolbar{opacity:1}
.photo-gal-btn{width:28px;height:28px;border-radius:4px;background:rgba(13,17,23,.75);color:#fff;border:1px solid #30363d;font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.photo-gal-btn:hover{background:rgba(163,113,247,.85);border-color:#a371f7}
.photo-gal-btn.danger:hover{background:rgba(248,81,73,.85);border-color:#f85149}
.photo-gal-caption{position:absolute;bottom:0;left:0;right:0;padding:8px 12px;background:linear-gradient(0deg,rgba(0,0,0,.85) 0%,transparent 100%);color:#fff;font-size:11px;z-index:1;pointer-events:none}
.photo-gal-empty-overlay{position:absolute;top:6px;right:6px;display:flex;flex-direction:row;align-items:center;gap:6px;z-index:3;background:rgba(13,17,23,.78);border:1px solid rgba(163,113,247,.4);border-radius:18px;padding:4px 10px 4px 8px;backdrop-filter:blur(4px);transition:all .15s}
.photo-gal-empty-overlay:hover{background:rgba(163,113,247,.18);border-color:#a371f7}
.photo-gal-empty-overlay i.bi-camera{font-size:13px !important;color:#a371f7 !important}
.photo-gal-empty-overlay button{padding:0;background:none;border:none;color:#e6edf3;font-size:10.5px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:4px}
.photo-gal-empty-overlay button:hover{color:#a371f7}
/* Lightbox */
#photoLightbox{position:fixed;inset:0;background:rgba(0,0,0,.95);z-index:6000;display:none;align-items:center;justify-content:center}
#photoLightbox.open{display:flex}
#photoLightbox img{max-width:96vw;max-height:92vh;object-fit:contain;display:block}
.lightbox-close{position:fixed;top:20px;right:20px;width:40px;height:40px;background:rgba(255,255,255,.1);border:none;border-radius:50%;color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lightbox-close:hover{background:rgba(255,255,255,.2)}
.lightbox-caption{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);color:#fff;font-size:13px;background:rgba(0,0,0,.6);padding:8px 18px;border-radius:6px;backdrop-filter:blur(4px);max-width:80vw;text-align:center}
.lightbox-nav{position:fixed;top:50%;transform:translateY(-50%);width:48px;height:48px;background:rgba(255,255,255,.1);border:none;border-radius:50%;color:#fff;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lightbox-nav:hover{background:rgba(255,255,255,.25)}
.lightbox-prev{left:20px}
.lightbox-next{right:20px}
/* Portas físicas (Pilar 1) */
.ports-wrap{padding:14px 0}
.ports-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.ports-toolbar .left{font-size:12px;color:#8b949e}
.ports-toolbar .right{margin-left:auto;display:flex;gap:6px}
.ports-section{background:#0d1117;border:1px solid #21262d;border-radius:8px;margin-bottom:14px;overflow:hidden}
.ports-section-hdr{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid #21262d;font-size:12px;font-weight:600;color:#c9d1d9;background:#161b22}
.ports-section-hdr .badge{margin-left:auto;background:#21262d;border-radius:10px;padding:1px 8px;font-size:10px;color:#8b949e}
.ports-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(95px,1fr));gap:6px;padding:10px}
.port-cell{background:#161b22;border:1px solid #21262d;border-radius:6px;padding:8px 10px;cursor:pointer;transition:all .12s;position:relative}
.port-cell:hover{border-color:#a371f7;background:#1c2129}
.port-cell.connected{border-left:3px solid #3fb950}
.port-cell.free{border-left:3px solid #30363d}
.port-cell.disabled{border-left:3px solid #6e7681;opacity:.5}
.port-cell.reserved{border-left:3px solid #e3b341}
.port-cell.selected{border-color:#ffd33d;background:rgba(255,211,61,.08);box-shadow:0 0 0 2px rgba(255,211,61,.4)}
.port-num{font-size:10px;color:#8b949e;font-family:monospace}
.port-label{font-size:12px;font-weight:600;color:#e6edf3;font-family:monospace;margin-top:2px}
.port-meta{font-size:10px;color:#8b949e;margin-top:2px;display:flex;gap:6px;flex-wrap:wrap}
.port-meta .chip{background:#0d1117;border-radius:3px;padding:1px 5px;font-size:9px}
.port-peer{font-size:10px;color:#a371f7;margin-top:4px;font-family:monospace;cursor:pointer;display:flex;align-items:center;gap:3px}
.port-peer:hover{text-decoration:underline}
.port-status-dot{position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%}
.port-status-dot.connected{background:#3fb950}
.port-status-dot.free{background:#30363d}
.port-status-dot.disabled{background:#6e7681}
.port-status-dot.reserved{background:#e3b341}
.ports-cx-banner{background:rgba(255,211,61,.12);border:1px solid rgba(255,211,61,.4);border-radius:6px;padding:10px 14px;font-size:11px;color:#e3b341;margin-bottom:10px;display:flex;align-items:center;gap:10px}
.ports-empty{padding:40px;text-align:center;color:#6e7681}
.ports-empty i{font-size:42px;opacity:.3;display:block;margin-bottom:10px}
/* Topologia (Pilar 2) */
#topoModal{position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:4000;display:none;align-items:center;justify-content:center}
#topoModal.open{display:flex}
/* Grafo de Topologia (Pilar 3) */
#graphModal{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:4600;display:none;align-items:center;justify-content:center}
#graphModal.open{display:flex}
.graph-box{background:#0d1117;border:1px solid #30363d;border-radius:10px;width:min(1480px,99vw);height:94vh;display:flex;flex-direction:column;overflow:hidden}
.graph-hdr{display:flex;align-items:center;gap:8px;padding:9px 14px;border-bottom:1px solid #21262d;background:#161b22;flex-shrink:0}
.graph-hdr-title{font-size:13px;font-weight:600;flex:1;color:#e6edf3}
.graph-hdr select{background:#0d1117;border:1px solid #30363d;color:#c9d1d9;padding:4px 8px;border-radius:4px;font-size:11px}
.graph-body{display:flex;flex:1;min-height:0}
#cytoscapeContainer{flex:1;background:#0b0e11;min-width:0}
.graph-info{width:230px;border-left:1px solid #21262d;background:#0d1117;padding:10px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;flex-shrink:0}
.graph-info-empty{color:#8b949e;font-size:11px;text-align:center;padding:30px 8px;line-height:1.6}
.graph-legend{display:flex;gap:12px;padding:7px 14px;border-top:1px solid #21262d;background:#161b22;flex-shrink:0;flex-wrap:wrap;align-items:center}
.graph-leg-item{display:flex;align-items:center;gap:5px;font-size:10px;color:#8b949e}
.graph-leg-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.graph-leg-sep{width:1px;height:14px;background:#21262d}
.graph-stat{background:#161b22;border:1px solid #21262d;border-radius:6px;padding:8px 10px}
.graph-stat-title{font-size:9px;color:#8b949e;margin-bottom:5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.graph-stat-val{font-size:22px;font-weight:700;color:#e6edf3;line-height:1}
.graph-stat-sub{font-size:10px;color:#8b949e;margin-top:3px}
.graph-action-btn{background:#161b22;border:1px solid #30363d;color:#c9d1d9;padding:6px 10px;border-radius:4px;font-size:11px;cursor:pointer;text-align:center;width:100%;display:block;margin-top:2px}
.graph-action-btn:hover{border-color:#a371f7;color:#a371f7}
.graph-node-hdr{display:flex;align-items:center;gap:8px;padding-bottom:8px;border-bottom:1px solid #21262d;margin-bottom:6px}
.graph-node-icon{font-size:22px;color:#a371f7}
.graph-node-name{font-weight:600;font-size:13px;color:#e6edf3;word-break:break-word}
.graph-node-type{font-size:10px;color:#8b949e;text-transform:uppercase;letter-spacing:.5px}
.topo-box{background:#0d1117;border:1px solid #30363d;border-radius:10px;width:min(1200px,96vw);max-height:92vh;display:flex;flex-direction:column;overflow:hidden}
.topo-search-row{display:flex;gap:8px;padding:14px 18px;border-bottom:1px solid #21262d;background:#161b22;align-items:center}
.topo-search-row input{flex:1;background:#0d1117;border:1px solid #30363d;color:#e6edf3;padding:8px 12px;border-radius:6px;font-size:12px}
.topo-search-row select{background:#0d1117;border:1px solid #30363d;color:#e6edf3;padding:8px 10px;border-radius:6px;font-size:12px}
.topo-go-btn{background:#a371f7;color:#fff;border:none;padding:8px 18px;border-radius:6px;font-size:12px;font-weight:500;cursor:pointer}
.topo-go-btn:hover{background:#bc8cff}
.topo-body{padding:18px;overflow-y:auto;flex:1}
/* Path visual */
.topo-path{display:flex;align-items:stretch;gap:0;flex-wrap:wrap;background:#161b22;border:1px solid #21262d;border-radius:10px;padding:18px;margin-bottom:14px}
.topo-hop{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 14px;background:#0d1117;border:1px solid #21262d;border-radius:8px;min-width:140px;text-align:center;position:relative}
.topo-hop.origin{border-color:#a371f7;background:rgba(163,113,247,.1)}
.topo-hop.destination{border-color:#3fb950;background:rgba(63,185,80,.1)}
.topo-hop.olt{border-color:#a371f7}
.topo-hop.router{border-color:#1f6feb}
.topo-hop.switch{border-color:#238636}
.topo-hop.dio{border-color:#db6d28}
.topo-hop-icon{font-size:20px;opacity:.85}
.topo-hop-label{font-size:11px;font-weight:600;color:#e6edf3}
.topo-hop-sub{font-size:10px;color:#8b949e;font-family:monospace}
.topo-arrow{display:flex;align-items:center;color:#30363d;font-size:18px;padding:0 6px;align-self:center}
.topo-arrow.cable{color:#a371f7}
.topo-info{background:#161b22;border:1px solid #21262d;border-radius:8px;padding:12px 16px;margin-bottom:10px;font-size:11px}
.topo-info b{color:#c9d1d9}
.topo-impact-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.topo-impact-card{background:#161b22;border:1px solid #21262d;border-radius:8px;padding:14px;text-align:center}
.topo-impact-val{font-size:24px;font-weight:700;color:#f85149}
.topo-impact-lbl{font-size:11px;color:#8b949e;margin-top:4px;text-transform:uppercase;letter-spacing:.4px}
.topo-blame-banner{background:rgba(248,81,73,.12);border:1px solid rgba(248,81,73,.5);border-radius:8px;padding:14px 18px;color:#f0a8a4;font-size:13px;margin-bottom:16px;display:flex;gap:12px;align-items:center}
.topo-blame-banner i{font-size:20px;color:#f85149}
.topo-blame-bar{display:grid;grid-template-columns:120px 1fr 60px;gap:8px;align-items:center;font-size:11px;margin-bottom:6px}
.topo-blame-track{height:18px;background:#0d1117;border-radius:9px;overflow:hidden;border:1px solid #21262d}
.topo-blame-fill{height:100%;background:linear-gradient(90deg,#f85149,#e3b341);transition:width .3s}
#cableHud{position:absolute;bottom:55px;left:50%;transform:translateX(-50%);z-index:600;
  background:var(--panel);border:1px solid var(--border);border-radius:20px;
  padding:5px 14px;font-size:11px;display:none;align-items:center;gap:10px;white-space:nowrap;
  box-shadow:0 4px 16px rgba(0,0,0,.5)}
#cableHud .hud-btn{background:rgba(255,255,255,0.06);border:1px solid var(--border);
  border-radius:12px;color:var(--muted);padding:3px 10px;cursor:pointer;font-size:11px;
  display:inline-flex;align-items:center;gap:5px;transition:all .15s}
#cableHud .hud-btn.active{background:rgba(163,113,247,0.15);border-color:#a371f7;color:#a371f7}
#cableHud .hud-sep{color:var(--border)}
.hud-len-pill{background:rgba(163,113,247,0.18);border:1px solid #a371f7;border-radius:12px;
  padding:3px 10px;color:#d4bff7;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;
  display:inline-flex;align-items:center;gap:6px}
.hud-len-pill i{color:#a371f7}
#routeSpinner{display:none;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#vertexEditHud{position:absolute;bottom:55px;left:50%;transform:translateX(-50%);z-index:600;
  background:var(--panel);border:1px solid var(--border);border-radius:20px;
  padding:5px 14px;font-size:11px;display:none;align-items:center;gap:10px;white-space:nowrap;
  box-shadow:0 4px 16px rgba(0,0,0,.5)}
/* ── Replay 24h ─────────────────────────────────────────────────────────── */
#replayBar{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:750;
  background:var(--panel);border:1px solid var(--border);border-radius:20px;
  padding:7px 16px;font-size:11px;display:none;align-items:center;gap:10px;
  min-width:520px;max-width:82vw;box-shadow:0 4px 16px rgba(0,0,0,.5)}
#replayBar.open{display:flex}
#replayBar .hud-btn,#nocBanner .hud-btn{background:rgba(255,255,255,0.06);border:1px solid var(--border);
  border-radius:12px;color:var(--muted);padding:3px 10px;cursor:pointer;font-size:11px;
  display:inline-flex;align-items:center;gap:5px;transition:all .15s;white-space:nowrap}
#replayBar .hud-btn:hover,#nocBanner .hud-btn:hover{border-color:#a371f7;color:#a371f7}
#replayTime{font-weight:700;font-size:12px;color:#d4bff7;font-variant-numeric:tabular-nums;white-space:nowrap}
#replaySlider{flex:1;min-width:220px;accent-color:#a371f7;cursor:pointer}
/* ── Modo NOC Wall ──────────────────────────────────────────────────────── */
#nocBanner{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:900;
  background:rgba(13,17,23,.88);border:1px solid var(--border);border-radius:24px;
  padding:10px 20px;display:none;align-items:center;gap:14px;font-size:15px;
  box-shadow:0 6px 24px rgba(0,0,0,.6);backdrop-filter:blur(6px);max-width:88vw;white-space:nowrap}
#nocBanner #nocBannerLabel{overflow:hidden;text-overflow:ellipsis}
body.noc-wall #nocBanner{display:flex}
body.noc-wall #topbar,body.noc-wall #sidebar,body.noc-wall #treePanel,
body.noc-wall #detailPanel,body.noc-wall #legend,body.noc-wall #replayBar,
body.noc-wall #heatDropdown,body.noc-wall #baseDropdown{display:none !important}
body.noc-wall #elCount{font-size:14px;padding:8px 14px}
#deleteConfirmModal{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9000;display:none;align-items:center;justify-content:center}
#deleteConfirmModal.open{display:flex}
.dc-box{background:#161b22;border:1px solid #30363d;border-radius:8px;padding:22px 28px;min-width:320px;max-width:400px}
.dc-box h3{margin:0 0 10px;font-size:14px;color:#e6edf3}
.dc-box p{margin:0 0 16px;font-size:12px;color:#8b949e;line-height:1.5}
.dc-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.dc-btn{padding:5px 14px;border-radius:5px;border:1px solid #30363d;cursor:pointer;font-size:12px}
.dc-danger{background:#f85149;border-color:#f85149;color:#fff}
.dc-muted{background:transparent;color:#8b949e}
.dc-cancel{background:transparent;color:#8b949e;border-color:#30363d}
#rerouteBar{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:8000;
  background:#1c2128;border:1px solid #30363d;border-radius:8px;padding:10px 16px;
  display:none;align-items:center;gap:10px;font-size:12px;box-shadow:0 4px 20px rgba(0,0,0,.6)}
#rerouteBar.open{display:flex}
#rerouteBar .rb-btn{padding:4px 12px;border-radius:5px;border:1px solid #30363d;cursor:pointer;font-size:11px}
#rerouteBar .rb-yes{background:#a371f7;border-color:#a371f7;color:#fff}
#rerouteBar .rb-no{background:transparent;color:#8b949e}
#autoPolesModal{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:8000;display:none;align-items:center;justify-content:center}
#autoPolesModal.open{display:flex}
.ap-box{background:#161b22;border:1px solid #30363d;border-radius:8px;padding:22px 28px;min-width:320px;max-width:400px}
.ap-box h3{margin:0 0 14px;font-size:14px;color:#e6edf3}
.ap-row{display:flex;gap:10px;margin-bottom:12px}
.ap-row .form-group{flex:1;margin:0}
.ap-preview{background:#0d1117;border:1px solid #21262d;border-radius:4px;padding:8px 10px;font-size:11px;color:#8b949e;margin-bottom:14px;min-height:36px}
.ap-actions{display:flex;gap:8px;justify-content:flex-end}