@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap";:root{--bg-page:#0a0a0d;--bg-panel:#131318;--bg-panel-alt:#1a1a20;--bg-input:#17171d;--bg-hover:#1e1e26;--border:#2a2a35;--border-strong:#3a3a47;--accent:#a855f7;--accent-dim:#8b3fe0;--accent-soft:#a855f724;--text-primary:#f2f2f5;--text-muted:#9a9aa6;--text-faint:#6b6b76;--font-sans:"Inter", Arial, Helvetica, sans-serif;--font-mono:"JetBrains Mono", "SFMono-Regular", Consolas, monospace;--danger:#ef4444;--danger-soft:#ef444424;--success:#22c55e;--port-hover:#ec4899;--cable-copper:#a4b0ca;--cable-fiber:#c9a83e;--connector-selected:#22d3ee}*{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--bg-page);color:var(--text-primary);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;background-image:radial-gradient(900px 500px at 15% 100%,#8b3fe01a,#0000 60%);margin:0;font-size:13px;line-height:1.4}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:5px}::-webkit-scrollbar-thumb:hover{background:var(--text-faint)}.mono-label{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}.dropdown-root{display:inline-block;position:relative}.dropdown-panel{background:var(--bg-panel-alt);border:1px solid var(--border-strong);z-index:50;border-radius:6px;flex-direction:column;gap:1px;min-width:180px;padding:5px;display:flex;position:absolute;top:calc(100% + 4px);left:0;box-shadow:0 10px 30px #00000080}.dropdown-item{text-align:left;width:100%;color:var(--text-primary);background:0 0;border:none;border-radius:4px;align-items:center;gap:8px;padding:7px 9px;font-size:12px;display:flex}.dropdown-item:hover:not(:disabled){background:var(--bg-hover)}.dropdown-item:disabled{opacity:.4;cursor:default}.dropdown-separator{background:var(--border);height:1px;margin:4px 2px}.modal-backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:100;background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--bg-panel-alt);border-radius:10px;width:360px;max-width:calc(100vw - 40px);overflow:hidden;box-shadow:0 20px 60px #0009,0 2px 8px #0006,0 0 0 1px #a855f70f}.modal-header{background:var(--bg-panel);border-bottom:1px solid var(--border);padding:14px 18px}.modal-header h2{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--text-primary);margin:0;font-size:12px;font-weight:700}.modal-body{padding:18px}.modal-footer{border-top:1px solid var(--border);background:var(--bg-panel);justify-content:flex-end;gap:8px;padding:12px 18px;display:flex}.top-bar{background:var(--bg-panel);border-bottom:1px solid var(--border);align-items:center;gap:18px;height:40px;padding:0 12px;display:flex}.wordmark{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--text-primary);white-space:nowrap;font-size:13px;font-weight:700}.wordmark-accent{text-decoration:underline;-webkit-text-decoration-color:var(--accent);text-decoration-color:var(--accent);text-underline-offset:6px;text-decoration-thickness:2px}.top-bar-menus{align-items:center;gap:2px;display:flex}.export-textarea{resize:vertical;border:1px solid var(--border-strong);background:var(--bg-input);width:100%;height:220px;color:var(--text-primary);font-family:var(--font-mono);border-radius:5px;padding:10px;font-size:11px}.export-textarea:focus{border-color:var(--accent);outline:none}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.import-error{color:var(--danger);margin:0}.btn{height:26px;color:var(--text-primary);white-space:nowrap;background:0 0;border:none;border-radius:4px;align-items:center;gap:6px;padding:0 9px;font-size:12px;display:inline-flex}.btn:hover:not(:disabled){background:var(--bg-hover)}.btn:disabled{opacity:.4;cursor:default}.btn.active{background:var(--accent-soft);color:var(--accent)}.btn-primary{background:var(--accent-dim);border:1px solid var(--accent);color:#fff;font-weight:600}.btn-primary:hover:not(:disabled){background:var(--accent-dim);filter:brightness(1.08)}.btn-danger{background:var(--danger-soft);color:var(--danger)}.btn-danger:hover:not(:disabled){background:var(--danger-soft);filter:brightness(1.15)}.icon-btn{width:26px;height:26px;color:var(--text-muted);background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;display:inline-flex}.icon-btn:hover:not(:disabled){background:var(--bg-hover);color:var(--text-primary)}.icon-btn.active{color:var(--accent);background:var(--accent-soft)}.icon-btn:disabled{opacity:.4;cursor:default}.text-input,.select-input{border:1px solid var(--border-strong);background:var(--bg-input);width:100%;color:var(--text-primary);border-radius:5px;padding:6px 9px;font-size:12px}.text-input:focus,.select-input:focus{border-color:var(--accent);outline:none}.text-input:disabled,.select-input:disabled{opacity:.5}.property-label{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:6px;font-size:10px;display:block}.field-row{gap:8px;margin-bottom:14px;display:grid}.field-row.cols-2{grid-template-columns:1fr 1fr}.section-heading{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted);border-top:1px solid var(--border);margin-top:24px;margin-bottom:14px;padding-top:14px;font-size:11px;font-weight:700}.section-heading:first-child{border-top:none;margin-top:0;padding-top:0}.list-row{cursor:pointer;border-radius:4px;grid-template-columns:20px 1fr auto;align-items:center;gap:8px;padding:6px 8px;display:grid}.list-row:hover{background:var(--bg-hover)}.list-row.selected{background:var(--accent-soft);outline:1px solid var(--accent-dim);outline-offset:-1px}.list-row.dragging{opacity:.45}.list-row-name{text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;overflow:hidden}.list-row-actions{gap:2px;display:flex}.sidebar{background:var(--bg-panel);border-right:1px solid var(--border);flex-direction:column;min-height:0;display:flex}.sidebar-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:12px 12px 10px;display:flex}.sidebar-header-actions{align-items:center;gap:4px;display:flex}.device-list-body{-webkit-user-select:none;user-select:none;flex-direction:column;flex:1;gap:2px;min-height:0;padding:8px;display:flex;overflow-y:auto}.empty-hint{color:var(--text-faint);padding:10px 4px;font-size:12px;line-height:1.5}.list-row-grip{color:var(--text-faint);opacity:.6;cursor:grab;justify-content:center;justify-self:center;align-items:center;display:flex}.list-row.dragging .list-row-grip{cursor:grabbing}.device-group-section{outline-offset:-1px;border-radius:5px;outline:1px solid #0000;flex-direction:column;gap:2px;margin-bottom:4px;transition:background .1s;display:flex}.device-group-section.drag-over{background:var(--accent-soft);outline-color:var(--accent-dim)}.device-group-header{border-radius:4px;align-items:center;gap:4px;padding:4px 4px 4px 2px;display:flex}.device-group-header:hover .group-delete-btn{opacity:1}.group-chevron{width:16px;height:16px;color:var(--text-faint);background:0 0;border:none;border-radius:3px;justify-content:center;align-items:center;transition:transform .12s;display:flex}.group-chevron:hover{color:var(--text-primary);background:var(--bg-hover)}.group-chevron.collapsed{transform:rotate(-90deg)}.device-group-name{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:10px;overflow:hidden}.group-rename-input{min-width:0;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--text-primary);background:var(--bg-input);border:1px solid var(--accent);border-radius:3px;flex:1;padding:2px 4px;font-size:10px}.group-rename-input:focus{outline:none}.device-group-count{font-family:var(--font-mono);color:var(--text-faint);padding:0 2px;font-size:9px}.group-delete-btn{opacity:0;width:20px;height:20px}.device-group-section .list-row{margin-left:18px}.properties-panel{border-right:none;border-left:1px solid var(--border)}.properties-body{flex:1;min-height:0;padding:14px;overflow-y:auto}.port-list{flex-direction:column;gap:4px;margin-bottom:8px;display:flex}.port-row{background:var(--bg-input);border-radius:4px;outline:1px solid #0000;grid-template-columns:8px 1fr auto;align-items:center;gap:8px;padding:5px 6px;font-size:12px;transition:outline-color .15s,background-color .15s;display:grid}.port-row.selected{background:var(--accent-soft);outline-color:var(--accent-dim)}.port-kind-dot{background:var(--text-faint);border-radius:50%;width:6px;height:6px}.port-kind-dot[data-kind=in]{background:#3b82f6}.port-kind-dot[data-kind=out]{background:#22c55e}.port-kind-dot[data-kind=io]{background:var(--accent)}.port-kind-dot[data-speed="1G"]{background:#22c55e}.port-kind-dot[data-speed="2.5G"]{background:#14b8a6}.port-kind-dot[data-speed="10G"]{background:#3b82f6}.port-kind-dot[data-speed="25G"]{background:#a855f7}.port-kind-dot[data-speed="100G"]{background:#f59e0b}.port-kind-label{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint);font-size:9px}.port-connected-to{color:var(--text-faint);grid-column:2/-1;font-size:10px}.port-access-device-input{grid-column:2/-1;height:auto;padding:3px 6px;font-size:10px}.port-access-device-add{color:var(--text-faint);cursor:pointer;background:0 0;border:none;grid-column:2/-1;justify-self:start;padding:0;font-size:10px}.port-access-device-add:hover{color:var(--text-primary)}.port-access-device-set{color:var(--text-faint);grid-column:2/-1;align-items:center;gap:6px;font-size:10px;display:flex}.port-access-device-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.port-access-device-edit{color:var(--text-faint);cursor:pointer;background:0 0;border:none;flex:none;padding:0;font-size:10px;text-decoration:underline}.port-access-device-edit:hover{color:var(--text-primary)}.bulk-vlan-banner{background:var(--accent-soft);border-radius:6px;margin-bottom:10px;padding:8px}.port-vlan-select{grid-column:2/-1;height:auto;padding:3px 6px;font-size:10px}.vlan-manager-list{flex-direction:column;gap:6px;max-height:320px;margin-bottom:12px;display:flex;overflow-y:auto}.vlan-manager-header,.vlan-manager-row{grid-template-columns:64px 1fr 32px 26px;align-items:center;gap:8px;display:grid}.vlan-manager-header{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint);padding:0 2px;font-size:9px}.vlan-number-input{text-align:center}.vlan-color-input{border:1px solid var(--border-strong);background:var(--bg-input);cursor:pointer;border-radius:5px;width:32px;height:26px;padding:2px}.vlan-legend{border:1px solid var(--border-strong);background:#131318f2;border-radius:5px;flex-direction:column;gap:4px;max-height:220px;padding:8px 10px;display:flex;position:absolute;bottom:12px;right:12px;overflow-y:auto}.vlan-legend-row{align-items:center;gap:7px;display:flex}.vlan-legend-swatch{border-radius:2px;flex:none;width:9px;height:9px}.vlan-legend-label{color:var(--text-primary);white-space:nowrap;font-size:11px}.canvas-wrap{background-color:var(--bg-page);background-image:radial-gradient(circle, var(--border) 1px, transparent 1px);background-size:22px 22px;min-height:0;position:relative;overflow:hidden}.graph-canvas{cursor:default;width:100%;height:100%;display:block}.marquee-rect{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1px;pointer-events:none}.box-rect{fill:var(--bg-panel);stroke:var(--border-strong);stroke-width:1px;stroke-dasharray:5 4;cursor:grab}.box-rect.selected{stroke:var(--accent-dim);stroke-width:1.5px}.box-rect:active{cursor:grabbing}.box-title{fill:var(--text-muted);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;pointer-events:none;font-size:9px;font-weight:600}.box-empty-hint{fill:var(--text-faint);font-family:var(--font-sans);pointer-events:none;font-size:10px}.node-rect{fill:var(--bg-panel-alt);stroke:var(--border-strong);stroke-width:1px;cursor:grab}.node-rect.selected{stroke:var(--accent-dim);stroke-width:1.5px}.node-rect:active{cursor:grabbing}.node-title{fill:var(--text-primary);font-family:var(--font-sans);pointer-events:none;font-size:11px;font-weight:600}.node-type{fill:var(--text-faint);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;pointer-events:none;font-size:8px}.switch-port-square{fill:var(--port-fill);stroke:var(--port-stroke);stroke-width:1px;cursor:default;opacity:.85}.switch-port-square:hover{fill:var(--port-hover);stroke:var(--port-hover);opacity:1}.switch-port-square.port-selected{stroke:var(--connector-selected);stroke-width:1.75px;opacity:1}.switch-port-dot{pointer-events:none}.switch-port-dot.medium-copper{fill:var(--cable-copper)}.switch-port-dot.medium-fiber{fill:var(--cable-fiber)}.switch-port-dot.access-device{fill:var(--text-faint)}.port-context-menu{z-index:110;background:var(--bg-panel-alt);border:1px solid var(--border);border-radius:8px;flex-direction:column;min-width:170px;padding:4px;display:flex;position:fixed;box-shadow:0 12px 30px #00000080,0 2px 8px #00000059}.port-context-menu-item{width:100%;color:var(--text-primary);text-align:left;cursor:pointer;background:0 0;border:none;border-radius:5px;padding:7px 10px;font-size:12px;display:block}button.port-context-menu-item:hover{background:var(--bg-input)}.port-context-menu-item.disabled{color:var(--text-faint);cursor:default}.graph-canvas.connecting .switch-port-square:hover{fill:var(--port-fill);stroke:var(--port-stroke);opacity:.85}.graph-canvas.connecting .switch-port-square.drag-target{fill:var(--port-hover);stroke:var(--port-hover);opacity:1}.connector-hit{fill:none;stroke:#0000;stroke-width:14px;cursor:pointer}.connector-line{fill:none;stroke-width:2px}.connector-line.medium-copper{stroke:var(--cable-copper)}.connector-line.medium-fiber{stroke:var(--cable-fiber)}.connector-line.selected{stroke:var(--connector-selected);stroke-width:2.4px}.connector-label-bg{fill:var(--bg-panel);stroke:var(--border-strong);stroke-width:1px;opacity:.95}.connector-label-line1{fill:var(--text-faint);font-family:var(--font-sans);text-anchor:middle;pointer-events:none;font-size:8px}.connector-label-line2{fill:var(--text-primary);font-family:var(--font-sans);text-anchor:middle;pointer-events:none;font-size:9px;font-weight:600}.connector-waypoint-handle{fill:var(--connector-selected);stroke:var(--bg-panel);stroke-width:1px;cursor:grab}.connector-waypoint-handle:active{cursor:grabbing}.connector-pending{fill:none;stroke:var(--accent);stroke-width:1.6px;stroke-dasharray:4 3;pointer-events:none}.view-toggle-bar{align-items:center;gap:8px;display:flex;position:absolute;top:12px;left:12px}.view-toggle-pill{border:1px solid var(--border-strong);background:#131318f2;border-radius:8px;gap:2px;padding:3px;display:flex}.view-toggle-option{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:5px 14px;font-size:12px;font-weight:500}.view-toggle-option:hover{color:var(--text-primary)}.view-toggle-option.active{background:var(--accent-dim);color:#fff}.canvas-toolbar{border:1px solid var(--border-strong);background:#131318f2;border-radius:5px;align-items:center;gap:6px;padding:4px 6px;display:flex;position:absolute;bottom:12px;left:12px}.box-layout-choice{gap:16px;display:flex}.box-layout-choice label{color:var(--text-primary);cursor:pointer;align-items:center;gap:6px;font-size:12px;display:flex}.canvas-zoom-readout{font-family:var(--font-mono);color:var(--text-faint);text-align:center;min-width:34px;padding:0 4px;font-size:10px}.number-field{border:1px solid var(--border-strong);background:var(--bg-input);border-radius:5px;align-items:stretch;height:28px;display:flex;position:relative;overflow:hidden}.number-field:focus-within{border-color:var(--accent)}.number-field.disabled{opacity:.5}.number-field.compact{width:52px;height:26px}.number-field.compact .number-field-input{text-align:right;padding:0 2px 0 6px}.number-field.compact .number-field-steppers{width:13px}.number-field-input{min-width:0;color:var(--text-primary);cursor:ew-resize;background:0 0;border:none;flex:1;padding:0 8px;font-size:12px}.number-field-input:focus{cursor:text;outline:none}.number-field-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.number-field-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.number-field-input{appearance:textfield}.number-field-suffix{color:var(--text-faint);pointer-events:none;align-items:center;padding-right:4px;font-size:11px;display:flex}.number-field-steppers{border-left:1px solid var(--border-strong);flex-direction:column;width:14px;display:flex}.number-field-stepper{color:var(--text-faint);background:0 0;border:none;flex:1;justify-content:center;align-items:center;padding:0;display:flex}.number-field-stepper:first-child{border-bottom:1px solid var(--border-strong)}.number-field-stepper:hover:not(:disabled){background:var(--bg-hover);color:var(--text-primary)}.number-field-stepper:disabled{cursor:default}.switch-editor-backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:100;background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.switch-editor-wrap{flex-direction:column;align-items:flex-end;gap:10px;max-width:96vw;display:flex}.switch-editor-box{background:var(--bg-panel-alt);border:1.5px solid var(--accent-dim);border-radius:10px;width:min(1040px,96vw);overflow:hidden;box-shadow:0 20px 60px #0009,0 2px 8px #0006,0 0 0 1px #a855f71a}.switch-editor-header{border-bottom:1px solid var(--border);grid-template-columns:repeat(4,1fr);display:grid}.switch-editor-field{border-right:1px solid var(--border);padding:12px 16px}.switch-editor-field.last{border-right:none}.switch-editor-label{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:7px;font-size:10px;display:block}.switch-editor-input{width:100%;color:var(--text-primary);background:0 0;border:none;border-bottom:1px solid #0000;padding:2px 0;font-size:14px;font-weight:600}.switch-editor-input::placeholder{color:var(--text-faint);font-weight:400}.switch-editor-input:focus{border-bottom-color:var(--accent);outline:none}.switch-editor-groups{gap:10px;padding:16px;display:flex;overflow-x:auto}.switch-editor-group{border-radius:6px;flex-direction:column;flex:1 0 0;align-items:center;gap:8px;min-width:max-content;padding:8px 6px;display:flex}.switch-editor-group.dragging{background:var(--accent-soft)}.switch-editor-group-head{cursor:grab;-webkit-user-select:none;user-select:none;flex-direction:column;align-items:center;gap:5px;display:flex}.switch-editor-group.dragging .switch-editor-group-head{cursor:grabbing}.switch-editor-medium-label{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;border:1px solid var(--border-strong);border-radius:4px;padding:2px 7px;font-size:10px;font-weight:700}.switch-editor-medium-label[data-medium=rj45]{background:var(--bg-input);color:var(--text-primary)}.switch-editor-medium-label[data-medium=sfp]{background:var(--accent-soft);border-color:var(--accent-dim);color:var(--accent)}.switch-editor-speed-label{font-family:var(--font-mono);letter-spacing:.02em;font-size:17px;font-weight:700}.switch-editor-count{flex-direction:column;align-items:center;gap:4px;display:flex}.switch-editor-min-hint{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.04em;color:var(--text-faint);white-space:nowrap;font-size:9px}.switch-editor-grid{justify-content:center;gap:3px;min-height:18px;display:grid}.switch-editor-square{opacity:.85;border-style:solid;border-width:1px;border-radius:3px;width:18px;height:18px}.switch-editor-actions{align-items:center;gap:10px;display:flex}.switch-editor-hint{font-family:var(--font-mono);color:var(--text-faint);letter-spacing:.02em;font-size:10px}.switch-picker-item{text-align:left;border:1px solid var(--border-strong);background:var(--bg-input);border-radius:5px;flex-direction:column;align-items:flex-start;gap:3px;width:100%;margin-bottom:8px;padding:8px 10px;display:flex}.switch-picker-item:last-child{margin-bottom:0}.switch-picker-item:hover{background:var(--bg-hover);border-color:var(--accent-dim)}.switch-picker-id{font-family:var(--font-mono);color:var(--text-primary);font-size:12px;font-weight:700}.switch-picker-description{color:var(--text-muted);font-size:11px}.switch-picker-category{grid-template-columns:18px 1fr;align-items:center;gap:2px 8px;display:grid}.switch-picker-category svg{color:var(--text-muted);grid-row:1/span 2}.mini-switch-preview{flex-wrap:wrap;align-items:flex-start;gap:6px;display:flex}.mini-switch-group{gap:1.5px;display:grid}.mini-switch-square{opacity:.9;border-style:solid;border-width:1px;border-radius:1.5px}.generic-library-back{color:var(--text-muted);background:0 0;border:none;align-items:center;padding:0 0 21px;font-size:18px;display:inline-flex}.generic-library-back:hover{color:var(--text-primary)}.generic-library-grid{grid-template-columns:repeat(4,1fr);gap:15px;max-height:690px;display:grid;overflow-y:auto}.generic-tile{text-align:left;border:1px solid var(--border-strong);background:var(--bg-input);border-radius:9px;flex-direction:column;align-items:flex-start;gap:12px;min-height:126px;padding:15px;display:flex}.generic-tile:hover{background:var(--bg-hover);border-color:var(--accent-dim)}.generic-tile-id{font-family:var(--font-mono);color:var(--text-primary);font-size:16px;font-weight:700}.generic-tile-bullets{color:var(--text-faint);margin:0;padding-left:14px;font-size:11px;line-height:1.5;list-style:outside}.generic-tile-bullets li{white-space:nowrap}.app-shell{grid-template-rows:40px 1fr;height:100%;display:grid}.app-body{grid-template-columns:240px minmax(0,1fr) 290px;min-height:0;display:grid}