:root{--page: #f4f2ee;--surface: #fbfaf7;--surface-strong: #ffffff;--surface-soft: #f0eee9;--glass: rgba(255, 255, 255, .72);--line: #d8d3ca;--line-strong: #c7c0b6;--text: #25231f;--text-2: #5c5750;--text-3: #8a8379;--studio-blue: #315f7d;--studio-indigo: #5c5f8e;--studio-teal: #34766c;--studio-gold: #9a6a25;--studio-rose: #a35f58;--studio-green: #4f7b4f;--studio-ink: #33312c;--ok: #4d7b54;--warn: #a26a21;--err: #a44f47;--muted: #8a8379;--shadow-sm: 0 1px 2px rgba(42, 38, 32, .05);--shadow-md: 0 8px 20px rgba(42, 38, 32, .08);--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--font-ui: Aptos, "Avenir Next", "Helvetica Neue", sans-serif;--font-mono: "Cascadia Mono", Consolas, monospace}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;color:var(--text);font-family:var(--font-ui);font-size:13px;line-height:1.4;background:linear-gradient(180deg,#ffffff94,#f4f2ee66),var(--page);overflow:hidden;letter-spacing:0;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid rgba(49,95,125,.35);outline-offset:2px}.studio-app{height:100vh;display:grid;grid-template-columns:216px minmax(0,1fr);background:var(--page)}.studio-sidebar{min-width:0;display:flex;flex-direction:column;border-right:1px solid var(--line);background:#f4f2eec7;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);padding:14px 10px}.studio-brand{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:center;padding:4px 7px 14px;border-bottom:1px solid var(--line)}.studio-mark{width:28px;height:28px;border:1px solid rgba(37,35,31,.18);border-radius:var(--radius-md);display:grid;place-items:center;color:#fff;background:#34312d;font-weight:700;font-size:12px}.studio-brand strong,.studio-brand span{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.studio-brand strong{font-size:13px;font-weight:650}.studio-brand span{margin-top:2px;color:var(--text-3);font-size:11px}.studio-nav{display:grid;gap:2px;padding:12px 0}.studio-nav button{width:100%;min-width:0;border:0;background:transparent;border-radius:var(--radius-md);display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:9px;align-items:center;padding:7px 8px;color:var(--text-2);cursor:pointer;text-align:left}.studio-nav button:hover{background:#ffffff94;color:var(--text)}.studio-nav button.active{background:#34312d;color:#fff;box-shadow:var(--shadow-sm)}.studio-nav span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:560}.studio-nav em{color:currentColor;opacity:.72;font-family:var(--font-mono);font-size:10px;font-style:normal}.sidebar-status{margin-top:auto;border-top:1px solid var(--line);padding:12px 8px 4px}.sidebar-status strong{display:block;font-family:var(--font-mono);font-size:18px;line-height:1}.sidebar-status span,.sidebar-status p{color:var(--text-3);font-size:11px}.sidebar-status p{margin:8px 0 0}.mini-status-line{height:5px;margin-top:10px;border-radius:3px;overflow:hidden;background:#25231f1a}.mini-status-line i{display:block;height:100%;background:var(--ok)}.studio-main{min-width:0;min-height:0;display:grid;grid-template-rows:58px minmax(0,1fr)}.studio-toolbar{min-width:0;display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);background:#fbfaf7e6;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.workspace-select{height:36px;min-width:220px;display:flex;align-items:center;gap:8px;padding:0 8px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-strong)}.workspace-select select{min-width:0;width:100%;border:0;background:transparent;color:var(--text);outline:0;font-weight:580}.studio-search{min-width:180px;max-width:420px;flex:1;height:36px;display:flex;align-items:center;gap:8px;padding:0 10px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-strong);color:var(--text-3)}.studio-search input{min-width:0;width:100%;border:0;background:transparent;outline:0;color:var(--text)}.studio-search input::placeholder{color:var(--text-3)}.toolbar-group{display:flex;align-items:center;gap:4px;padding-left:9px;border-left:1px solid var(--line)}.tool-button{height:32px;display:inline-flex;align-items:center;gap:6px;border:1px solid transparent;border-radius:var(--radius-md);background:transparent;color:var(--text-2);padding:0 8px;cursor:pointer;white-space:nowrap}.tool-button:hover,.tool-button.is-active{background:var(--surface-strong);border-color:var(--line);color:var(--text)}.tool-button.is-primary{background:#34312d;border-color:#34312d;color:#fff}.studio-workspace{min-height:0;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) 318px;gap:10px;padding:10px}.workspace-center{min-height:0;min-width:0;display:grid;grid-template-rows:42px minmax(0,1fr) 40px;gap:10px}.mode-bar{min-width:0;display:flex;align-items:center;gap:4px;padding:4px;border:1px solid var(--line);border-radius:var(--radius-lg);background:#ffffff8a;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);overflow:hidden}.mode-bar button{height:32px;border:1px solid transparent;border-radius:var(--radius-md);background:transparent;color:var(--text-2);padding:0 13px;cursor:pointer;font-weight:580}.mode-bar button:hover{color:var(--text);background:#ffffffad}.mode-bar button.active{background:var(--surface-strong);border-color:var(--line);color:var(--text);box-shadow:var(--shadow-sm)}.canvas-and-rack{min-height:0;min-width:0;display:grid;grid-template-columns:minmax(560px,1fr) 266px;gap:10px}.glass-panel,.canvas-shell{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--glass);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:var(--shadow-sm)}.canvas-shell{min-height:0;min-width:0;overflow:auto;background:linear-gradient(180deg,#ffffff6b,#f4f2ee2e),var(--surface)}.topology-canvas{position:relative;min-width:620px;min-height:650px;height:100%;overflow:hidden;background:linear-gradient(rgba(61,58,52,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(61,58,52,.045) 1px,transparent 1px),radial-gradient(circle at 60% 35%,#ffffffc7,#fff0 38%),#f7f5f0;background-size:28px 28px,28px 28px,auto,auto}.topology-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.topology-links line{stroke:#433e3661;stroke-width:.22;vector-effect:non-scaling-stroke}.link-label{position:absolute;z-index:3;max-width:190px;transform:translate(-50%,-50%);border:1px solid rgba(199,192,182,.84);border-radius:var(--radius-sm);background:#ffffffd1;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--text-2);font-family:var(--font-mono);font-size:10px;line-height:1.2;padding:4px 6px;white-space:nowrap;box-shadow:var(--shadow-sm)}.canvas-guide{position:absolute;z-index:1;pointer-events:none;background:#315f7d2e}.canvas-guide.vertical{top:8%;bottom:8%;width:1px}.canvas-guide.horizontal{left:7%;right:7%;height:1px}.vlan-zone{position:absolute;z-index:2;display:grid;gap:2px;border:1px solid rgba(199,192,182,.72);border-radius:var(--radius-md);background:#ffffff6b;color:var(--text-2);padding:7px 9px;pointer-events:none}.vlan-zone strong{font-family:var(--font-mono);font-size:11px;color:var(--text)}.vlan-zone span{font-size:11px}.zone-corp{left:7%;top:43%}.zone-wireless{left:7%;bottom:8%}.zone-server{right:6%;top:42%}.topology-node{position:absolute;z-index:5;width:158px;min-height:62px;transform:translate(-50%,-50%);border:1px solid var(--line);border-radius:var(--radius-lg);background:#ffffffd6;box-shadow:var(--shadow-sm);display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;align-items:center;padding:9px;text-align:left;cursor:pointer}.topology-node:hover{border-color:var(--line-strong);background:#fffffff5}.topology-node.selected{border-color:#315f7db8;box-shadow:0 0 0 2px #315f7d1f,var(--shadow-md)}.node-icon{width:28px;height:28px;display:grid;place-items:center;border-radius:var(--radius-md);color:var(--text);background:var(--surface-soft)}.topology-node.firewall .node-icon{color:var(--studio-rose)}.topology-node.switch .node-icon{color:var(--studio-blue)}.topology-node.server .node-icon{color:var(--studio-indigo)}.topology-node.ap .node-icon{color:var(--studio-teal)}.topology-node.camera .node-icon{color:var(--studio-rose)}.topology-node.printer .node-icon{color:var(--studio-gold)}.topology-node.ups .node-icon{color:var(--warn)}.node-copy{min-width:0;display:grid;gap:2px}.node-copy strong,.node-copy em{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.node-copy strong{font-size:12.5px;font-weight:650}.node-copy em{color:var(--text-3);font-size:11px;font-style:normal}.node-status{grid-column:2;width:max-content;border:1px solid var(--line);border-radius:var(--radius-sm);padding:2px 6px;color:var(--text-2);background:#ffffffa8;font-size:10px;font-weight:650}.node-status.ok{color:var(--ok);border-color:#4d7b5440;background:#4d7b5414}.node-status.warn{color:var(--warn);border-color:#a26a2147;background:#a26a2114}.node-status.muted{color:var(--muted)}.context-popover{position:absolute;z-index:8;left:58%;top:38%;display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:var(--radius-md);background:#ffffffdb;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--shadow-md)}.context-popover button{height:28px;border:0;border-radius:var(--radius-sm);background:transparent;display:inline-flex;align-items:center;gap:5px;padding:0 7px;color:var(--text-2);cursor:pointer}.context-popover button:hover{background:var(--surface-soft);color:var(--text)}.rack-preview{min-width:0;min-height:0;display:flex;flex-direction:column;padding:10px;overflow:hidden}.panel-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--line)}.panel-top strong,.panel-top span{display:block}.panel-top strong{font-size:13px;font-weight:650}.panel-top span{color:var(--text-3);font-size:11px}.mini-seg{display:flex;gap:2px;padding:2px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-soft)}.mini-seg button{height:24px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--text-2);padding:0 8px;cursor:pointer;text-transform:capitalize}.mini-seg button.active{background:var(--surface-strong);color:var(--text)}.rack-meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:10px 0}.rack-meta-grid div{border:1px solid var(--line);border-radius:var(--radius-md);background:#ffffff8a;padding:7px}.rack-meta-grid strong{display:block;font-family:var(--font-mono);font-size:13px}.rack-meta-grid span{color:var(--text-3);font-size:10px}.rack-frame-studio{min-height:0;display:grid;grid-template-columns:24px minmax(0,1fr);gap:6px;border:1px solid var(--line-strong);border-radius:var(--radius-md);background:#e9e5dd;padding:7px;overflow:auto}.rack-rail-studio,.rack-body-studio{height:546px}.rack-rail-studio{display:grid;grid-template-rows:repeat(42,13px);border:1px solid rgba(37,35,31,.14);border-radius:var(--radius-sm);overflow:hidden;background:#ddd8cf}.rack-rail-studio span{display:grid;place-items:center;border-bottom:1px solid rgba(37,35,31,.08);color:var(--text-3);font-family:var(--font-mono);font-size:8px}.rack-body-studio{position:relative;border:1px solid rgba(37,35,31,.18);border-radius:var(--radius-sm);overflow:hidden;background:repeating-linear-gradient(180deg,#fbfaf7 0 12px,#ddd8cf 12px 13px)}.rack-unit-asset{position:absolute;left:4px;right:4px;border:1px solid rgba(37,35,31,.16);border-left-width:4px;border-radius:var(--radius-sm);background:#ffffffe6;display:grid;grid-template-columns:14px minmax(0,1fr) auto;align-items:center;gap:5px;padding:0 5px;color:var(--text);cursor:pointer}.rack-unit-asset span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:650}.rack-unit-asset em{color:var(--text-3);font-family:var(--font-mono);font-size:8px;font-style:normal}.rack-unit-asset.switch{border-left-color:var(--studio-blue)}.rack-unit-asset.patch{border-left-color:var(--studio-teal)}.rack-unit-asset.server{border-left-color:var(--studio-indigo)}.rack-unit-asset.storage{border-left-color:#6d668e}.rack-unit-asset.ups{border-left-color:var(--warn)}.rack-unit-asset.pdu{border-left-color:var(--studio-gold)}.rack-unit-asset.cable{border-left-color:var(--text-3)}.rack-unit-asset.blank{border-left-color:var(--line-strong);color:var(--text-3)}.rack-unit-asset.active{border-color:#315f7dad;border-left-color:var(--studio-blue);box-shadow:0 0 0 2px #315f7d1f}.rack-unit-asset.connected:after{content:"";width:5px;height:5px;border-radius:50%;background:var(--ok);position:absolute;right:5px;top:4px}.rack-footer{display:grid;gap:6px;padding-top:9px;color:var(--text-2);font-size:11px}.rack-footer div{display:flex;align-items:center;gap:7px}.inspector{min-width:0;min-height:0;overflow:auto;padding:12px}.inspector-head{display:grid;gap:5px;padding-bottom:12px;border-bottom:1px solid var(--line)}.inspector-head h2{margin:0;color:var(--text);font-size:19px;line-height:1.2;font-weight:680}.inspector-head p{margin:0;color:var(--text-2)}.quick-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:12px 0;border-bottom:1px solid var(--line)}.quick-actions button{min-width:0;height:52px;border:1px solid var(--line);border-radius:var(--radius-md);background:#ffffff8f;display:grid;place-items:center;gap:3px;color:var(--text-2);cursor:pointer}.quick-actions button:hover{background:var(--surface-strong);color:var(--text)}.quick-actions span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}.inspector-section{padding:12px 0;border-bottom:1px solid var(--line)}.inspector-section h3{margin:0 0 9px;color:var(--text-2);font-size:11px;font-weight:680}.detail-list{display:grid;grid-template-columns:110px minmax(0,1fr);gap:7px 10px;margin:0}.detail-list dt{color:var(--text-3);font-size:11px}.detail-list dd{min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-mono);font-size:11px}.port-map{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.port-cell{min-width:0;border:1px solid var(--line);border-radius:var(--radius-sm);background:#ffffff80;padding:6px}.port-cell strong,.port-cell span,.port-cell em{display:block}.port-cell strong{font-family:var(--font-mono)}.port-cell span,.port-cell em{color:var(--text-3);font-size:10px;font-style:normal}.port-cell.ok{border-left:3px solid var(--ok)}.port-cell.warn{border-left:3px solid var(--warn)}.port-cell.free{color:var(--text-3);border-style:dashed}.vlan-list{display:grid;gap:6px}.vlan-list div{min-width:0;display:grid;grid-template-columns:34px minmax(0,1fr);gap:2px 8px;align-items:center;border:1px solid var(--line);border-left:4px solid var(--vlan-color);border-radius:var(--radius-sm);background:#ffffff80;padding:6px 7px}.vlan-list span{grid-row:span 2;color:var(--text);font-family:var(--font-mono);font-weight:650}.vlan-list strong,.vlan-list em{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vlan-list strong{font-size:12px}.vlan-list em{color:var(--text-3);font-family:var(--font-mono);font-size:10px;font-style:normal}.connected-list,.doc-list{display:grid;gap:5px}.connected-list button,.doc-list button{min-width:0;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--text-2);display:flex;align-items:center;gap:7px;padding:5px 2px;cursor:pointer;text-align:left}.connected-list button:hover,.doc-list button:hover{color:var(--text);background:#ffffff80}.change-list{margin:0;padding-left:18px;color:var(--text-2)}.change-list li+li{margin-top:6px}.canvas-bar{min-width:0;display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--line);border-radius:var(--radius-lg);background:#ffffffb8;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:5px 8px;overflow:hidden}.canvas-bar div{min-width:0;display:flex;align-items:center;gap:6px}.canvas-bar button,.canvas-bar span{height:28px;display:inline-flex;align-items:center;gap:6px;border:1px solid transparent;border-radius:var(--radius-sm);background:transparent;color:var(--text-2);padding:0 7px;white-space:nowrap}.canvas-bar button{cursor:pointer}.canvas-bar button.active,.canvas-bar button:hover{background:var(--surface-strong);border-color:var(--line);color:var(--text)}.studio-loading{min-height:100vh;display:grid;place-items:center;background:var(--page)}.studio-loading>div{width:min(360px,calc(100vw - 48px));border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface-strong);padding:18px;display:grid;gap:8px;text-align:center;box-shadow:var(--shadow-md)}.studio-loading strong{font-size:16px}.studio-loading span{color:var(--text-2)}@media(max-width:1320px){.studio-workspace{grid-template-columns:minmax(0,1fr) 300px}.canvas-and-rack{grid-template-columns:minmax(0,1fr)}.rack-preview,.tool-button span{display:none}}@media(max-width:1080px){.studio-app{grid-template-columns:64px minmax(0,1fr)}.studio-brand{grid-template-columns:1fr;justify-items:center;padding-inline:0}.studio-brand div:last-child,.studio-nav span,.studio-nav em,.sidebar-status{display:none}.studio-nav button{grid-template-columns:1fr;place-items:center}.studio-workspace{grid-template-columns:minmax(0,1fr)}.inspector{display:none}.topology-canvas{min-width:760px}.topology-node{width:178px;min-height:66px}}@media(max-width:760px){.studio-toolbar{gap:6px}.workspace-select{min-width:154px}.studio-search{display:none}.mode-bar{overflow-x:auto}.mode-bar button{flex:0 0 auto}.canvas-bar span{display:none}}