*{box-sizing:border-box}body{margin:0;height:100vh;display:flex;font-family:Inter,Segoe UI,Arial,sans-serif;color:#172033;background:#f6f7f9}.auth-screen{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:28px;background:linear-gradient(135deg,rgba(23,32,51,.96),rgba(31,57,77,.94))}.auth-screen[hidden]{display:none}.auth-shell{width:min(980px,100%);display:grid;grid-template-columns:1fr 420px;gap:22px;align-items:stretch}.auth-copy,.auth-panel{background:white;border:1px solid #d9e1ea;border-radius:8px;box-shadow:0 24px 70px rgba(0,0,0,.24)}.auth-copy{padding:38px;display:flex;flex-direction:column;justify-content:center}.auth-brand{margin-bottom:28px}.auth-kicker{margin:0 0 12px;color:#2166a5;font-size:12px;text-transform:uppercase;letter-spacing:.14em;font-weight:800}.auth-copy h1{font-size:38px;line-height:1.05;margin:0 0 16px;max-width:520px}.auth-text{margin:0;color:#546274;font-size:16px;line-height:1.55;max-width:540px}.auth-panel{padding:22px}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:#edf2f7;border-radius:8px;padding:4px;margin-bottom:18px}.auth-tabs button{height:38px;border:0;border-radius:6px;background:transparent;color:#546274;font-weight:750;cursor:pointer}.auth-tabs button.active{background:white;color:#172033;box-shadow:0 1px 3px rgba(15,23,42,.1)}.auth-form{display:grid;gap:12px}.auth-form label{display:grid;gap:6px;color:#546274;font-size:12px;font-weight:750;text-transform:uppercase;letter-spacing:.08em}.auth-form input{height:42px;border:1px solid #c4ccd8;border-radius:8px;padding:0 12px;font-size:14px;color:#172033;background:white;outline:0}.auth-form input:focus{border-color:#2166a5;box-shadow:0 0 0 3px rgba(33,102,165,.14)}.auth-submit{height:44px;border:1px solid #2166a5;background:#2166a5;color:white;border-radius:8px;font-weight:800;cursor:pointer;margin-top:4px}.auth-submit:hover{background:#1b568c}.auth-divider{display:flex;align-items:center;gap:10px;margin:18px 0 12px;color:#68778a;font-size:11px;text-transform:uppercase;letter-spacing:.1em}.auth-divider:before,.auth-divider:after{content:"";height:1px;background:#dde3ea;flex:1}.provider-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}.provider-list button{height:38px;border:1px solid #c4ccd8;background:white;border-radius:8px;color:#172033;font-weight:700}.provider-list button:disabled{color:#8a96a8;background:#f6f8fb;cursor:not-allowed}.auth-status{min-height:18px;margin-top:14px;color:#c0392b;font-size:13px;line-height:1.35}.account-badge{max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid #dde3ea;background:#f8fafc;color:#546274;border-radius:8px;padding:10px 12px;font-size:12px;font-weight:700}.sidebar{width:350px;background:#172033;color:#e9eef6;display:flex;flex-direction:column;padding:18px 14px;gap:14px;border-right:1px solid #263449}.brand{display:flex;align-items:center;gap:12px;padding:6px 4px 8px}.brand-icon{width:38px;height:38px;border-radius:8px;display:grid;place-items:center;background:#16a085;font-weight:800;color:white}.brand-title{font-weight:750;font-size:18px}.brand-subtitle{font-size:12px;color:#aeb9c9;margin-top:2px}.workspace-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.wide{width:100%;height:38px;border:1px solid #3a4a63;background:#202c3d;color:#e9eef6;border-radius:8px;cursor:pointer;font-size:13px}.wide:hover{background:#2a3a50}.wide.primary{background:#2166a5;border-color:#2166a5;color:white}.search-box{height:40px;border:1px solid #3a4a63;background:#202c3d;border-radius:8px;display:flex;align-items:center;gap:8px;padding:0 11px;color:#aeb9c9}.search-box input{border:0;outline:0;background:transparent;color:#e9eef6;width:100%;font-size:13px}.nav-section{min-height:0}.nav-section.compact{margin-top:auto}.section-line{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.section-title{font-size:11px;text-transform:uppercase;letter-spacing:.11em;color:#aeb9c9;margin:0 4px}.mini-actions{display:flex;gap:4px}.mini-actions button{width:29px;height:29px;border:1px solid #3a4a63;background:#202c3d;color:#d5dce8;border-radius:7px;cursor:pointer}.mini-actions button:hover{background:#2a3a50;color:white}.tree-modern{overflow:auto;max-height:calc(100vh - 454px);padding-right:2px}.tree-node{border-radius:8px;margin:2px 0}.tree-row{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:8px;cursor:pointer;color:#d5dce8;transition:.15s}.tree-row:hover{background:#2a3a50;color:white}.tree-row.active{background:#2166a5;color:white}.tree-row.selected:not(.active){outline:1px solid #607089;background:#202c3d}.tree-row .chev{width:14px;color:#aeb9c9}.tree-row .icon{width:20px;text-align:center}.tree-children{margin-left:18px;border-left:1px solid #34445b;padding-left:8px}.map-actions{display:grid;gap:7px}.status-card{font-size:12px;line-height:1.45;color:#d5dce8;background:#202c3d;border:1px solid #3a4a63;border-radius:8px;padding:12px}.workspace{flex:1;min-width:0;display:flex;flex-direction:column}.topbar{height:74px;background:rgba(255,255,255,.94);border-bottom:1px solid #dde3ea;display:flex;align-items:center;justify-content:space-between;padding:0 18px 0 22px;gap:14px}.breadcrumb{font-size:12px;color:#68778a}.map-title{font-size:18px;font-weight:750;margin-top:3px}.toolbar{display:flex;gap:8px;align-items:center}.toolbtn{height:38px;min-width:38px;padding:0 12px;border:1px solid #c4ccd8;background:white;border-radius:8px;cursor:pointer;font-size:16px;color:#172033;box-shadow:0 1px 2px rgba(15,23,42,.06);transition:.15s}.toolbtn:hover{background:#eef2f6;transform:translateY(-1px)}.toolbtn:disabled{opacity:.45;cursor:not-allowed;transform:none}.toolbtn:disabled:hover{background:white;transform:none}.toolbtn.primary{background:#2166a5;color:white;border-color:#2166a5}.toolbtn.save{font-size:12px;font-weight:750}.toolbtn.save.dirty{background:#c0392b;border-color:#c0392b;color:white}.toolbtn.active{background:#172033;color:white;border-color:#172033}.canvas-wrap{position:relative;flex:1;overflow:hidden;background-color:#f7f7f7;background-image:linear-gradient(#e1e5ea 1px,transparent 1px),linear-gradient(90deg,#e1e5ea 1px,transparent 1px);background-size:24px 24px}svg{width:100%;height:100%;cursor:grab}.floating-hint{position:absolute;left:24px;bottom:22px;background:white;border:1px solid #dde3ea;border-radius:8px;padding:12px 14px;font-size:13px;color:#546274;box-shadow:0 10px 30px rgba(15,23,42,.09)}.node{fill:white;stroke:#2166a5;stroke-width:1.6}.node.selnode{stroke:#d46b08;stroke-width:3}.edge{fill:none;stroke:#63738a;stroke-width:1.8}.edge.primary,.edge.trunk{stroke:#c0392b;stroke-width:2.6}.edge.backup{stroke:#2166a5;stroke-width:2.4}.edge.port-channel{stroke:#7d3c98;stroke-width:3}.edge-gap{fill:none;stroke:#f7f7f7;stroke-width:8;stroke-linecap:round;pointer-events:none}.edge-hit{fill:none;stroke:transparent;stroke-width:16;cursor:move}.portbox{fill:white;stroke:#9aa7b7}.porttext{font-size:10px;fill:#172033;dominant-baseline:middle}.edit-handle{fill:#d46b08;stroke:#172033;stroke-width:1.5;cursor:move}.edit-handle.endpoint{fill:#239b56}.edit-handle.selected{stroke:#172033;stroke-width:3;fill:#f1c40f}.anchor-dot{fill:#4f8ecb;stroke:#1e4f7a;stroke-width:.8;opacity:.65}.anchor-dot.hot{fill:#239b56;opacity:1}@media(max-width:970px){.sidebar{width:300px}.topbar{height:auto;min-height:74px;align-items:flex-start;flex-direction:column;padding:12px}.toolbar{flex-wrap:wrap}.auth-shell{grid-template-columns:1fr}.auth-copy{display:none}.auth-panel{width:min(420px,100%)}}
.tree-count{margin-left:auto;color:#aeb9c9;font-size:11px}.device-leaf{font-size:12px}.node.external-node{stroke:#7f8c8d;stroke-dasharray:6 4;fill:#f2f4f5}.node.context-node{stroke:#2166a5;fill:#fff}.external-badge{font-size:9px;fill:#7f8c8d;font-weight:700}.legend-external{color:#7f8c8d}
[hidden]{display:none!important}.auth-screen{background:rgba(23,32,51,.84);backdrop-filter:blur(3px)}.auth-shell{width:min(440px,calc(100vw - 40px));display:block}.auth-panel{padding:26px}.auth-heading{display:flex;align-items:center;gap:12px;margin-bottom:22px}.auth-heading h1{margin:0;font-size:24px;line-height:1.1}.auth-heading .auth-kicker{margin:0 0 4px}.auth-secondary{width:100%;height:42px;border:1px solid #c4ccd8;background:white;color:#172033;border-radius:8px;font-weight:800;cursor:pointer;margin-top:10px}.auth-secondary:hover{background:#eef2f6}.auth-dialog{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:24px;background:rgba(12,18,31,.46)}.auth-dialog-card{width:min(420px,100%);display:grid;gap:12px;background:white;border:1px solid #d9e1ea;border-radius:8px;box-shadow:0 24px 70px rgba(0,0,0,.3);padding:22px}.dialog-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.dialog-title-row h2{margin:0;font-size:22px}.dialog-close{width:32px;height:32px;border:1px solid #c4ccd8;background:white;border-radius:8px;cursor:pointer;color:#172033}.dialog-copy{margin:0 0 4px;color:#546274;font-size:13px;line-height:1.45}.auth-dialog-card label{display:grid;gap:6px;color:#546274;font-size:12px;font-weight:750;text-transform:uppercase;letter-spacing:.08em}.auth-dialog-card input{height:42px;border:1px solid #c4ccd8;border-radius:8px;padding:0 12px;font-size:14px;color:#172033;background:white;outline:0}.auth-dialog-card input:focus{border-color:#2166a5;box-shadow:0 0 0 3px rgba(33,102,165,.14)}@media(max-width:970px){.auth-shell{width:min(440px,calc(100vw - 28px))}.auth-panel{width:100%}}
.sidebar-actions{display:flex;gap:8px}.side-tool{width:38px;height:38px;border:1px solid #3a4a63;background:#202c3d;color:#e9eef6;border-radius:8px;cursor:pointer;font-size:16px;display:grid;place-items:center}.side-tool:hover{background:#2a3a50}.side-tool.primary{background:#2166a5;border-color:#2166a5;color:white}.mini-actions{justify-content:flex-end;flex-wrap:wrap}.mini-actions button{display:grid;place-items:center;font-size:14px;line-height:1}.tree-modern{max-height:calc(100vh - 350px)}.tree-row .tree-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-row.host-active{background:#1d4ed8;color:white}.host-details-panel{position:absolute;right:18px;top:18px;width:min(340px,calc(100% - 36px));max-height:calc(100% - 36px);overflow:auto;background:white;border:1px solid #cbd5e1;border-radius:8px;box-shadow:0 16px 40px rgba(15,23,42,.18);padding:14px;z-index:5;color:#0f172a}.host-details-panel[hidden]{display:none}.host-details-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px}.host-details-kicker{font-size:11px;text-transform:uppercase;color:#64748b;letter-spacing:.08em}.host-details-title{font-size:16px;font-weight:800;margin-top:2px}.host-details-actions{display:flex;gap:6px}.host-details-collapse,.host-details-close{border:1px solid #cbd5e1;background:white;border-radius:8px;width:28px;height:28px;cursor:pointer;font-size:17px;line-height:1}.host-details-collapse:hover,.host-details-close:hover{background:#f1f5f9}.host-details-panel.collapsed{width:auto;min-width:220px;max-height:none;overflow:hidden}.host-details-panel.collapsed .selection-meta,.host-details-panel.collapsed .host-list,.host-details-panel.collapsed .connection-list{display:none}.selection-meta{color:#64748b;margin-bottom:8px}.connection-list{display:grid;gap:6px}.connection-item{border-top:1px solid #e2e8f0;padding-top:6px}.connection-peer{font-weight:800;color:#0f172a}.connection-ports{color:#475569;margin-top:2px}.host-list{display:grid;gap:4px;margin-bottom:8px}.host-chip{border:1px solid #cbd5e1;background:white;color:#0f172a;border-radius:8px;padding:7px 8px;text-align:left;cursor:pointer}.host-chip:hover{background:#f8fafc;border-color:#2166a5}.modal-backdrop{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:rgba(15,23,42,.48);padding:22px}.modal-backdrop[hidden]{display:none}.modal-card{width:min(480px,100%);background:white;color:#0f172a;border:1px solid #cbd5e1;border-radius:8px;box-shadow:0 24px 70px rgba(15,23,42,.28);padding:18px}.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}.modal-head h2{font-size:20px;line-height:1.2;margin:2px 0 0}.modal-kicker{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#64748b}.modal-x{width:30px;height:30px;border:1px solid #cbd5e1;background:white;border-radius:8px;cursor:pointer;font-size:18px}.modal-x:hover{background:#f1f5f9}.field-label{display:grid;gap:7px;font-size:12px;font-weight:700;color:#334155;margin:12px 0}.field-label input,.field-label select{height:40px;border:1px solid #cbd5e1;border-radius:8px;padding:0 11px;font:inherit;font-size:14px;color:#0f172a;background:white}.icon-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.icon-choice input{position:absolute;opacity:0;pointer-events:none}.icon-choice span{height:38px;display:grid;place-items:center;border:1px solid #cbd5e1;border-radius:8px;background:#f8fafc;cursor:pointer;font-size:18px}.icon-choice input:checked+span{background:#dbeafe;border-color:#2166a5;box-shadow:0 0 0 2px rgba(33,102,165,.18)}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.modal-btn{height:38px;border:1px solid #cbd5e1;background:white;color:#0f172a;border-radius:8px;padding:0 14px;cursor:pointer;font-weight:700}.modal-btn:hover{background:#f8fafc}.modal-btn.primary{background:#2166a5;border-color:#2166a5;color:white}.modal-btn.danger{background:#c0392b;border-color:#c0392b;color:white}.modal-text{color:#475569;line-height:1.45;margin:4px 0 8px}.modal-note{font-size:12px;line-height:1.45;color:#64748b;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:10px;margin:10px 0}.node.multisel{stroke:#f59e0b;stroke-width:3}.select-box{fill:rgba(33,102,165,.12);stroke:#2166a5;stroke-width:1.5;stroke-dasharray:6 4;pointer-events:none}.canvas-wrap,.canvas-wrap *{-webkit-user-select:none;user-select:none}.edge.hoveredge{stroke-width:3.4;filter:drop-shadow(0 2px 4px rgba(33,102,165,.28))}.edge.selectededge{stroke:#d46b08;stroke-width:3.8;filter:drop-shadow(0 2px 5px rgba(212,107,8,.3))}.map-node{cursor:default}.map-node:hover .node{filter:drop-shadow(0 5px 10px rgba(33,102,165,.24));stroke-width:2.4}.node-context-menu{position:fixed;z-index:80;width:238px;background:white;border:1px solid #cbd5e1;border-radius:8px;box-shadow:0 18px 45px rgba(15,23,42,.22);padding:6px;color:#0f172a}.node-context-menu button{width:100%;height:36px;border:0;background:white;border-radius:6px;text-align:left;padding:0 10px;font-weight:700;color:#0f172a;cursor:pointer}.node-context-menu button:hover{background:#eff6ff}.node-context-note{border-top:1px solid #e2e8f0;margin-top:5px;padding:7px 10px 5px;font-size:11px;line-height:1.35;color:#64748b}svg{cursor:default}.edge-hit{cursor:default}.auth-screen{background:linear-gradient(135deg,#101827 0%,#1b2a3b 52%,#f4f7fb 52%,#eef3f8 100%)!important;backdrop-filter:none!important}.auth-screen:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px);background-size:28px 28px;opacity:.22;pointer-events:none}.auth-shell{position:relative;z-index:1}

.toolbtn.danger{border-color:#f1b3ad;color:#b42318;background:#fff7f6}.toolbtn.danger:hover{background:#fff1f0;border-color:#d92d20;color:#912018}

.modal-card:has(.device-form){width:min(760px,100%);max-height:calc(100vh - 44px);overflow:auto}.create-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.create-choice{border:1px solid #cbd5e1;background:#fff;border-radius:8px;padding:14px;text-align:left;cursor:pointer;color:#0f172a}.create-choice:hover{border-color:#2166a5;background:#eff6ff}.create-choice strong{display:block;font-size:15px;margin-bottom:5px}.create-choice span{display:block;color:#64748b;font-size:12px;line-height:1.35}.device-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}.connection-builder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px;border:1px solid #e2e8f0;border-radius:8px;background:#f8fafc;padding:12px}.connection-builder [hidden]{display:none!important}.connection-add{grid-column:1/-1;justify-self:end}.device-section-title{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#64748b;margin:14px 0 8px}.manual-connection-list{display:grid;gap:8px;margin-top:10px}.manual-connection-item{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid #e2e8f0;border-radius:8px;padding:10px 12px;background:#fff}.manual-connection-item strong{display:block;color:#0f172a}.manual-connection-item span{display:block;margin-top:2px;color:#64748b;font-size:12px}@media(max-width:820px){.create-choice-grid,.device-form-grid,.connection-builder{grid-template-columns:1fr}.connection-add{justify-self:stretch}}