:root{--bg: #0a0e15;--surface: #11182280;--surface-solid: #111822;--surface-2: #16202c;--surface-3: #1a2634;--border: #1e3348;--border-soft: #16273a;--border-strong: #2f87ba;--text: #eef6ff;--text-dim: #a9bdd0;--text-dim2: #7591a8;--text-faint: #546e84;--accent: #39a6ff;--accent-2: #9b6fe0;--accent-grad: linear-gradient(135deg, #39a6ff, #9b6fe0);--danger: #e96b6b;--warn: #edb23b;--good: #3fd17a;--r-lg: 16px;--r-md: 12px;--r-sm: 8px;--shadow-card: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.28);--shadow-pop: 0 12px 32px rgba(0,0,0,.45);font-family:Google Sans,Inter,ui-sans-serif,system-ui,sans-serif;color:var(--text);background:var(--bg);font-size:13px}*{box-sizing:border-box}body{margin:0;min-width:1100px;background:radial-gradient(1200px 800px at 12% -10%,#12203a55,transparent),var(--bg)}.app-shell{display:flex;min-height:100vh}.sidebar{width:236px;border-right:1px solid var(--border-soft);background:var(--surface-solid);padding:20px 12px;display:flex;flex-direction:column;gap:0;transition:width .18s ease;position:relative;z-index:5}.sidebar-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 6px}.brand{font-family:Arial Narrow,Arial,Helvetica,sans-serif;font-size:18px;font-weight:800;letter-spacing:.02em;color:var(--text);text-transform:uppercase;overflow:hidden;white-space:nowrap}.brand span{font-weight:700;color:var(--text)}.brand-mark{color:#cf0a0a}.collapse-toggle{border:1px solid var(--border);background:var(--surface-2);color:var(--text-dim2);cursor:pointer;width:26px;height:26px;border-radius:var(--r-sm);flex:0 0 auto;font:inherit;line-height:1}.collapse-toggle:hover{color:var(--text);border-color:var(--border-strong)}.subbrand{font-size:9px;color:var(--text-faint);letter-spacing:.12em;margin-top:8px;padding:0 9px;overflow:hidden;white-space:nowrap}.sidebar nav{display:grid;gap:3px;margin-top:30px}.sidebar button,.toolbar button,.lifecycle button{border:0;background:transparent;color:var(--text-dim2);text-align:left;padding:10px;font:inherit;cursor:pointer;border-radius:var(--r-sm);white-space:nowrap;overflow:hidden}.sidebar button{display:flex;align-items:center}.sidebar button:hover{background:var(--surface-2);color:var(--text-dim)}.sidebar button.active{background:linear-gradient(135deg,#18355622,#9b6fe022),var(--surface-2);color:var(--text);box-shadow:inset 2px 0 0 var(--accent)}.nav-mark{display:inline-block;width:24px;color:var(--accent);font-size:16px;flex:0 0 auto}.sidebar-foot{margin-top:auto;border-top:1px solid var(--border-soft);padding:16px 9px 4px;color:var(--text-dim2);font-size:11px;line-height:1.8;overflow:hidden;white-space:nowrap}.sidebar-foot span{color:var(--text-faint)}.app-shell.collapsed .sidebar{width:68px;padding:20px 10px}.app-shell.collapsed .brand,.app-shell.collapsed .subbrand,.app-shell.collapsed .sidebar-foot{opacity:0;pointer-events:none}.app-shell.collapsed .sidebar button span.nav-label{display:none}.app-shell.collapsed .sidebar button{justify-content:center;padding:10px 0}.app-shell.collapsed .nav-mark{width:auto}.main{flex:1;display:flex;flex-direction:column;min-width:0}.topbar{height:68px;border-bottom:1px solid var(--border-soft);display:flex;align-items:center;gap:16px;padding:0 28px;background:var(--surface-solid)}.search{height:38px;border:1px solid var(--border);border-radius:999px;display:flex;align-items:center;gap:12px;padding:0 16px;color:var(--text-dim2);flex:1;max-width:590px;background:var(--surface-2);transition:border-color .15s;font:inherit;text-align:left;cursor:pointer}.search:hover{border-color:var(--border-strong)}.search span{color:var(--text-dim2);flex:1}.search kbd{border:1px solid #334e65;border-radius:6px;padding:3px 7px;color:var(--text-dim)}.topbar select{background:var(--surface-2);border:1px solid var(--border);border-radius:999px;color:var(--text-dim);padding:9px 40px 9px 16px}.top-icon{font-size:22px;color:var(--text-dim2);margin-left:auto}.icon-row{display:flex;align-items:center;gap:6px;margin-left:auto}.icon-row .top-icon{margin-left:0;font-size:15px;position:relative;cursor:pointer;width:34px;height:34px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center}.icon-row .top-icon:hover{background:var(--surface-2)}.icon-row .top-icon.disabled{opacity:.35;cursor:default}.icon-row .top-icon.disabled:hover{background:transparent}.icon-row .bell .badge{position:absolute;top:5px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--danger);display:block}.avatar{background:var(--accent-grad);border-radius:50%;padding:8px;color:#fff;font-size:11px;font-weight:700;box-shadow:var(--shadow-card)}.palette-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#050810cc;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:100;display:flex;align-items:flex-start;justify-content:center;padding-top:14vh}.palette-box{width:560px;max-width:90vw;background:var(--surface-solid);border:1px solid var(--border-strong);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);overflow:hidden}.palette-input{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--border-soft);color:var(--text-dim2)}.palette-input input{flex:1;background:transparent;border:0;outline:0;color:var(--text);font:inherit;font-size:14px}.palette-input kbd{border:1px solid var(--border);border-radius:4px;padding:2px 6px;color:var(--text-faint);font-size:10px}.palette-list{list-style:none;margin:0;padding:8px;max-height:340px;overflow-y:auto}.palette-list li{display:flex;align-items:center;padding:10px;border-radius:var(--r-sm);color:var(--text-dim);cursor:pointer;font-size:12px}.palette-list li:hover{background:var(--surface-2);color:var(--text)}.palette-list li.empty{color:var(--text-faint);cursor:default;justify-content:center}.palette-list li.empty:hover{background:transparent}.notif-dropdown{position:absolute;top:calc(100% + 10px);right:-10px;width:320px;background:var(--surface-solid);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-pop);z-index:50;text-align:left;cursor:default;overflow:hidden}.notif-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border-soft);color:var(--text-dim2);font-size:10px;letter-spacing:.08em;text-transform:uppercase}.notif-head b{color:var(--text);font-size:14px}.notif-dropdown ul{list-style:none;margin:0;padding:6px;max-height:260px;overflow-y:auto}.notif-dropdown li{display:flex;flex-direction:column;gap:3px;padding:9px 10px;border-radius:var(--r-sm);font-size:10px;color:var(--text-dim)}.notif-dropdown li b{font-size:9px;letter-spacing:.06em;color:var(--danger)}.notif-dropdown li.warn-line b{color:var(--warn)}.notif-dropdown li.empty{color:var(--text-faint);text-align:center}.notif-dropdown>button{display:block;width:100%;border:0;border-top:1px solid var(--border-soft);background:var(--surface-2);color:var(--accent);padding:10px;font:inherit;font-size:10px;letter-spacing:.04em;cursor:pointer}.notif-dropdown>button:hover{color:var(--text)}.help-dropdown{width:280px}.help-list{list-style:none;margin:0;padding:10px 14px;display:grid;gap:12px}.help-list li{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--text-dim)}.help-list kbd{border:1px solid var(--border);border-radius:4px;padding:2px 6px;color:var(--text-dim2);font-size:9px}.help-list .help-note{color:var(--text-faint);line-height:1.6}.command-hint{width:100%;border:0;text-align:left;font:inherit;cursor:pointer}.command-hint:hover{color:var(--text-dim)}.insights-row{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:16px;margin-bottom:16px}.insight-card{border:1px solid var(--border-soft);border-radius:var(--r-lg);background:var(--surface-solid);box-shadow:var(--shadow-card);padding:18px}.insight-title{display:block;font-size:9px;letter-spacing:.1em;color:var(--text-dim2);margin-bottom:14px}.donut-card{cursor:pointer;transition:border-color .15s}.donut-card:hover{border-color:var(--border-strong)}.donut-wrap{display:flex;align-items:center;gap:20px}.donut{width:96px;height:96px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center}.donut-hole{width:62px;height:62px;border-radius:50%;background:var(--surface-solid);display:flex;flex-direction:column;align-items:center;justify-content:center}.donut-hole b{font-size:18px;color:var(--text)}.donut-hole span{font-size:8px;color:var(--text-faint);letter-spacing:.06em}.donut-legend{list-style:none;margin:0;padding:0;display:grid;gap:8px;flex:1}.donut-legend li{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--text-dim2)}.donut-legend i{width:8px;height:8px;border-radius:2px;display:inline-block}.donut-legend b{margin-left:auto;color:var(--text);font-size:12px}.gauge-card{display:flex;flex-direction:column;align-items:center;text-align:center}.gauge-ring{width:92px;height:92px;border-radius:50%;display:flex;align-items:center;justify-content:center}.gauge-hole{width:68px;height:68px;border-radius:50%;background:var(--surface-solid);display:flex;align-items:center;justify-content:center}.gauge-hole b{font-size:16px;color:var(--text)}.gauge-value{margin-top:10px;font-size:10px;color:var(--text-dim2)}@media(max-width:1300px){.insights-row{grid-template-columns:1fr}}.workspace{padding:26px 28px;flex:1}.content-head,.toolbar{display:flex;align-items:center;justify-content:space-between}.crumb{color:var(--text-dim2);font-size:10px;letter-spacing:.12em}h1{font-size:25px;margin:7px 0 20px;color:var(--text);font-weight:600;letter-spacing:-.01em}h1 small{font-size:13px;color:var(--text-dim2);font-weight:500;margin-left:12px}.lifecycle{display:flex;gap:4px;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:4px}.lifecycle button{font-size:11px;letter-spacing:.04em;border-radius:999px;padding:8px 16px}.lifecycle .selected{color:#06121f;background:var(--accent-grad);font-weight:600}.toolbar{border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);padding:12px 0;color:var(--text-dim)}.toolbar button{border:1px solid var(--border);border-radius:var(--r-sm);margin-left:10px;padding:8px 12px}.fixture{font-size:10px;color:var(--warn);letter-spacing:.08em;margin-left:auto;margin-right:20px}.fixture.live{color:var(--good)}.engineering-grid{display:grid;grid-template-columns:260px minmax(460px,1fr) 320px;gap:20px;align-items:start}.rack-panel{min-width:0}.orientation-line{display:flex;justify-content:space-between;align-items:center;padding:16px 0;color:var(--text-dim2);font-size:10px;letter-spacing:.08em}.orientation-line select{background:var(--surface-2);border:1px solid var(--border-strong);border-radius:var(--r-sm);color:#62d2eb;padding:7px 28px 7px 9px;margin-left:8px;font:inherit}.rack-canvas{min-height:790px;border:1px solid var(--border);border-radius:var(--r-lg);background-color:#0a1826;background-image:linear-gradient(#112b3e 1px,transparent 1px),linear-gradient(90deg,#112b3e 1px,transparent 1px);background-size:24px 24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:22px 0;box-shadow:var(--shadow-card)}.rack{width:390px;border:8px solid #293b4a;border-radius:10px;background:#101820;padding:5px 8px 10px;box-shadow:0 0 0 1px #4b6575,0 20px 40px #0008}.rack-label{text-align:center;color:#70c9df;font-size:10px;letter-spacing:.08em;padding:3px}.ru{height:13px;border:1px solid #334b5c;border-radius:3px;display:flex;align-items:center;font-size:9px;margin:1px 0;background:#1b3548}.ru b{width:27px;color:var(--text-dim2);padding-left:5px}.ru span{font-weight:650;flex:1;color:#d1e0ec}.ru em{font-style:normal;color:#77a2bc;font-size:8px;margin-right:8px}.ru.blue{border-left:3px solid #328fff;background:#153451}.ru.cyan{border-left:3px solid #43d1dd;background:#163a43}.ru.amber{border-left:3px solid var(--warn);background:#3a2c12}.ru.purple{border-left:3px solid var(--accent-2);background:#241a3a}.ru.slate{border-left:3px solid #5c7891;background:#182a38}.ru.teal{border-left:3px solid #2fbfa8;background:#0f3630}.ru.empty{background:#111e29;color:#536b7d;border-style:dashed}.ru.selected{outline:2px solid var(--accent);outline-offset:1px;box-shadow:0 0 0 3px #39a6ff33;z-index:1;position:relative}.compass-row{display:flex;align-items:center;gap:8px;width:72px;text-align:center;border:1px solid var(--border-strong);border-radius:var(--r-sm);padding:6px 8px;color:var(--text-dim);background:var(--surface-2);flex-direction:column}.compass-row b,.compass-row span,.compass-row i{display:block}.compass-row span{font-size:17px;color:#4acbe5}.compass-row i{font-style:normal;font-size:8px;letter-spacing:.08em}.compass-mid{display:flex;align-items:center;gap:22px}.compass-side{width:60px;text-align:center;border:1px solid var(--border-strong);border-radius:var(--r-sm);padding:8px 4px;color:var(--text-dim);background:var(--surface-2)}.compass-side b,.compass-side i{display:block}.compass-side i{font-style:normal;font-size:8px;letter-spacing:.08em;margin-top:4px}.inspector{border:1px solid var(--border-soft);border-radius:var(--r-lg);background:var(--surface-solid);padding:20px;box-shadow:var(--shadow-card);position:sticky;top:20px}.contents-panel{min-width:0;display:flex;flex-direction:column;border:1px solid var(--border-soft);border-radius:var(--r-lg);background:var(--surface-solid);padding:18px;box-shadow:var(--shadow-card)}.contents-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid var(--border-soft)}.contents-head h3{font-size:11px;letter-spacing:.1em;color:var(--text);margin:0}.filter-btn{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text-dim2);cursor:pointer;padding:4px 8px}.filter-btn:hover{color:var(--text);border-color:var(--border-strong)}.contents-table{width:100%;border-collapse:collapse;font-size:9px;margin-top:8px}.contents-table th{text-align:left;color:var(--text-dim2);letter-spacing:.06em;padding:6px 4px;border-bottom:1px solid var(--border-soft)}.contents-table td{padding:5px 4px;border-bottom:1px solid var(--border-soft);color:#d1e0ec;white-space:nowrap}.contents-table tr:hover td{background:var(--surface-2)}.contents-table tr.selected td{background:#39a6ff1a;color:var(--text)}.selected-component{border:1px solid var(--border-strong);border-radius:var(--r-md);background:#39a6ff0d;padding:12px;margin-bottom:18px}.selected-component-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.selected-component-head b{color:var(--text);font-size:12px}.add-component{margin-top:20px;border-top:1px solid var(--border-soft);padding-top:14px}.add-component h4{font-size:10px;letter-spacing:.1em;color:var(--text-dim2);margin:0 0 10px}.add-component input{width:100%;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);color:#dceaf5;padding:8px;font:inherit;font-size:10px;margin-bottom:8px}.add-component ul{list-style:none;margin:0;padding:0}.add-component li{display:flex;justify-content:space-between;padding:9px 6px;border-radius:var(--r-sm);border-bottom:1px solid var(--border-soft);color:var(--text-dim);font-size:10px;cursor:pointer}.add-component li:hover{background:var(--surface-2)}.add-component li span{color:var(--text-faint)}.inspector h2{font-size:12px;text-transform:uppercase;letter-spacing:.1em;margin:4px 0 22px;color:var(--text)}.inspector label{display:block;color:var(--text-dim2);font-size:9px;letter-spacing:.1em;margin:15px 0}.inspector input{display:block;width:100%;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);color:#dceaf5;padding:9px;margin-top:6px;font:inherit}.inspector h3{border-top:1px solid var(--border-soft);padding-top:18px;color:#d8e5ef;text-transform:uppercase;font-size:10px;letter-spacing:.1em;margin-top:23px}.health{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.health div{border:1px solid #2c788d;border-radius:var(--r-md);text-align:center;padding:10px;background:var(--surface-2)}.health b,.health span{display:block}.health b{font-size:20px}.health span{font-size:9px;color:#69c9dc}.health .warn{border-color:#b98b32}.health .warn b,.health .warn span{color:var(--warn)}.health .critical{border-color:#bd4f4f}.health .critical b,.health .critical span{color:#f27575}.health .high{border-color:#c47a3a}.health .high b,.health .high span{color:#e0964a}.health .ok{border-color:#2c8d54}.health .ok b,.health .ok span{color:var(--good)}.validation-health{grid-template-columns:repeat(4,1fr);margin-bottom:22px}.validation-filters{margin-bottom:16px}.data-layout.single{grid-template-columns:1fr}.metrics p,.sides span{display:flex;justify-content:space-between;border-bottom:1px solid var(--border-soft);padding:10px 0;color:var(--text-dim2);font-size:9px}.metrics strong,.sides b{color:#d9e6f0;font-weight:500}.metrics i{color:#54cfe1;font-style:normal;margin-left:8px}.metrics .amber{color:var(--warn)}.finding{border-bottom:1px solid var(--border-soft);padding:10px 4px;border-radius:var(--r-sm);font-size:10px;color:#c6d5e0}.critical-line{border-left:2px solid var(--danger);padding-left:8px;background:#e96b6b0d}.warn-line{border-left:2px solid var(--warn);padding-left:8px;background:#edb23b0d}.info-line{border-left:2px solid var(--accent);padding-left:8px;background:#39a6ff0d}.actions{display:flex;gap:10px;margin-top:22px}.actions button{flex:1;background:var(--surface-2);border:1px solid #e8a92f;border-radius:999px;color:#efb738;padding:12px 5px;font-size:10px;letter-spacing:.08em;cursor:pointer;transition:transform .1s}.actions button:hover{transform:translateY(-1px)}.actions button+button{border-color:#42ccde;color:#52d2e4}@media(max-width:1200px){.sidebar{width:205px}.workspace{padding:20px}.engineering-grid{grid-template-columns:minmax(500px,1fr) 300px}}.view-switcher{display:flex;gap:4px;border:1px solid var(--border);border-radius:999px;margin:0 0 14px;background:var(--surface-2);padding:4px;width:fit-content}.view-switcher button{border:0;background:transparent;color:var(--text-dim2);border-radius:999px;padding:9px 16px;font:inherit;font-size:10px;letter-spacing:.06em;cursor:pointer}.view-switcher button:hover{color:var(--text-dim)}.view-switcher button.selected{color:#06121f;background:var(--accent-grad);font-weight:600}.mapping-toolbar{display:flex;gap:8px;align-items:center;border:1px solid var(--border-soft);border-radius:var(--r-lg);background:var(--surface-solid);box-shadow:var(--shadow-card);padding:12px;margin-bottom:14px}.mapping-toolbar select,.mapping-toolbar input,.mapping-toolbar button{height:34px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-2);color:#dbe8f4;padding:0 12px;font:inherit;font-size:11px}.mapping-toolbar input{min-width:190px;flex:1}.mapping-toolbar button{cursor:pointer}.mapping-toolbar button:hover{border-color:var(--border-strong)}.mapping-toolbar .primary{background:var(--accent-grad);border-color:transparent;color:#06121f;font-weight:600}.data-layout{display:grid;grid-template-columns:minmax(700px,1fr) 315px;gap:16px;align-items:start}.data-layout>div{min-width:0}table{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface-solid);border:1px solid var(--border-soft);border-radius:var(--r-lg);overflow:hidden;font-size:10px;box-shadow:var(--shadow-card)}th{background:var(--surface-2);color:var(--text-dim2);text-align:left;font-size:9px;letter-spacing:.06em;padding:11px 10px;border-bottom:1px solid var(--border-soft);white-space:nowrap}td{padding:10px;border-bottom:1px solid var(--border-soft);color:#d9e6f4;white-space:nowrap}tbody tr:last-child td{border-bottom:0}tbody tr:hover{background:#14263c}tbody tr.selected td{background:#39a6ff1f}.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:9px}.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:#4a6178}.status-dot.valid{background:var(--good);box-shadow:0 0 0 3px #3fd17a22}.summary-strip{display:flex;gap:16px;align-items:center;border:1px solid var(--border-soft);border-radius:var(--r-lg);background:var(--surface-solid);box-shadow:var(--shadow-card);padding:15px 16px;color:var(--text-dim2);font-size:10px;margin-top:14px;white-space:nowrap;overflow-x:auto}.summary-strip strong{font-size:18px;color:var(--text)}.amber-text{color:var(--warn)!important}.green-text{color:var(--good)!important}.path-preview{border:1px solid var(--border-soft);border-radius:var(--r-lg);background:var(--surface-solid);margin-top:14px;padding:16px;color:var(--text-dim2);font-size:11px;letter-spacing:.04em;box-shadow:var(--shadow-card)}.label-inspector{border:1px solid var(--border-soft);border-radius:var(--r-lg);background:var(--surface-solid);box-shadow:var(--shadow-card);padding:20px;color:var(--text-dim);position:sticky;top:20px}.label-inspector h2{font-size:12px;text-transform:uppercase;letter-spacing:.1em;margin:0 0 20px;color:var(--text)}.label-inspector h3{font-size:10px;text-transform:uppercase;letter-spacing:.08em;border-top:1px solid var(--border-soft);padding-top:14px;margin-top:18px;color:#d8e5ef}.label-inspector p{line-height:1.8}.label-inspector label{display:block;font-size:9px;color:var(--text-dim2);margin:12px 0}.label-inspector label input:not([type=checkbox]),.label-inspector select{display:block;width:100%;height:32px;margin-top:5px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-2);padding:5px 8px;color:#dceaf5;font:inherit}.validation-box{border:1px solid #1e4a2c;border-radius:var(--r-md);background:#0b1f13;color:#4fd17e;padding:12px;font-size:10px;margin-top:18px}.inspector-list{display:grid;gap:12px;font-size:9px}.inspector-list span{display:flex;justify-content:space-between;color:var(--text-dim2);border-bottom:1px solid var(--border-soft);padding-bottom:8px}.inspector-list b{color:#dceaf5;text-align:right;font-weight:600}.switch-face{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;background:var(--surface-2);padding:10px;border:1px solid var(--border);border-radius:var(--r-md)}.switch-face span{font-size:8px;background:#0d2036;border:1px solid var(--border);border-radius:4px;text-align:center;padding:5px 0;color:var(--text-dim2);position:relative}.switch-face .port-available{background:#123a19;border-color:#22a42d;color:#5fd472}.switch-face .port-server{background:#0c2410;border-color:#195f22;color:#4a9a57}.switch-face .port-uplink{background:#0a2454;border-color:#065ced;color:#7fa8ff}.switch-face .port-spine{background:#0b3435;border-color:#2fbfa8;color:#5fe0cb}.switch-face .port-breakout{background:#3a2c0a;border-color:#fcc517;color:#fcd873}.switch-face .port-reserved{background:#251a3a;border-color:#783fc9;color:#b28fe8}.switch-face .port-disabled{background:#111a24;border-color:#233246;color:#465a6e}.switch-face .port-error{background:#3a1010;border-color:#ee1312;color:#ff8181}.switch-face .port-warning{background:#3a250c;border-color:#ff8a3d;color:#ffb578}.switch-face .port-selected{outline:2px solid var(--text);outline-offset:1px;font-weight:700;color:var(--text)}.switch-face-legend{display:flex;flex-wrap:wrap;gap:10px 16px;margin-top:12px;font-size:8px;color:var(--text-dim)}.switch-face-legend span{display:flex;align-items:center;gap:5px}.switch-face-legend i{width:10px;height:10px;display:inline-block;border-radius:3px;border:1px solid var(--border)}.path-preview-icons{border:1px solid var(--border-soft);border-radius:var(--r-lg);background:var(--surface-solid);box-shadow:var(--shadow-card);margin-top:14px;padding:18px}.path-preview-title{color:var(--text-dim2);font-size:10px;letter-spacing:.08em;margin-bottom:14px}.path-preview-title i{font-style:normal;color:var(--text-faint);margin-left:6px}.path-preview-row{display:flex;align-items:center;gap:0;overflow-x:auto}.path-step-wrap{display:flex;align-items:center}.path-arrow{color:var(--accent);margin:0 10px;font-size:14px}.path-step{display:flex;flex-direction:column;align-items:center;min-width:76px}.path-icon{width:34px;height:34px;border:1px solid var(--border);background:var(--surface-2);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:15px;margin-bottom:6px}.path-step label{font-size:8px;letter-spacing:.06em;color:var(--text-dim2);margin:0}.path-step b{font-size:10px;color:var(--text);font-weight:600;margin-top:2px;text-align:center;white-space:nowrap}.topo-grid{grid-template-columns:minmax(700px,1fr) 320px}.topo-canvas{position:relative;min-height:600px;border:1px solid var(--border);border-radius:var(--r-lg);background-color:#0a1826;background-image:linear-gradient(#112b3e 1px,transparent 1px),linear-gradient(90deg,#112b3e 1px,transparent 1px);background-size:24px 24px;display:flex;flex-direction:column;justify-content:space-between;padding:26px 60px;box-shadow:var(--shadow-card)}.topo-lines{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.topo-lines line{stroke-width:.3}.line-100g{stroke:var(--accent)}.line-mlag{stroke:var(--good)}.line-mgmt{stroke:var(--warn);stroke-dasharray:1.5,1.2}.line-compute{stroke:var(--good)}.topo-spine-label{position:absolute;top:6px;left:60px;color:var(--accent);font-size:9px;letter-spacing:.1em}.topo-row{display:flex;justify-content:space-between;position:relative;z-index:1}.topo-link-label{text-align:center;color:var(--text-faint);font-size:8px;letter-spacing:.06em;margin:6px 0}.topo-switch{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-2);width:230px;padding:10px}.topo-switch-head{display:flex;align-items:center;justify-content:space-between;color:var(--text);font-size:11px;font-weight:700;margin-bottom:6px}.topo-switch-face{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}.topo-switch-face span{background:#132a3c;border:1px solid var(--border);border-radius:3px;color:var(--text-dim2);font-size:7px;text-align:center;padding:3px 0}.topo-compute{border:1px solid #1e4a2c;border-radius:var(--r-md);background:#0b1f13;padding:12px;width:220px}.topo-compute h4{color:var(--good);font-size:10px;letter-spacing:.06em;margin:0 0 8px}.topo-compute label{display:block;color:var(--text-dim2);font-size:8px;margin-bottom:8px}.topo-node-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.topo-node-grid span{background:#0d2036;border:1px solid var(--border);border-radius:3px;color:var(--text-dim);font-size:7px;text-align:center;padding:5px 0}.topo-bmc{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-2);padding:12px;width:220px;text-align:center}.topo-bmc h4{color:var(--text-dim2);font-size:10px;letter-spacing:.06em;margin:0 0 8px}.topo-bmc label{display:block;color:var(--text-dim2);font-size:8px;margin-top:8px}.topo-legend{display:flex;gap:40px;border:1px solid var(--border-soft);border-radius:var(--r-lg);background:var(--surface-solid);box-shadow:var(--shadow-card);padding:16px 20px;margin-top:18px}.topo-legend h5{font-size:9px;letter-spacing:.08em;color:var(--text-dim2);margin:0 0 8px}.topo-legend p{font-size:10px;color:var(--text-dim);margin:4px 0;display:flex;align-items:center;gap:6px}.swatch{width:16px;height:2px;display:inline-block;background:var(--accent)}.swatch.green{background:var(--good)}.swatch.orange,.status-dot.warn-dot{background:var(--warn)}.status-dot.crit-dot{background:#e35b5b}.spm-typeahead{position:relative;flex:1;min-width:220px}.spm-typeahead input{width:100%}.spm-suggestions{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:20;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-pop);max-height:260px;overflow-y:auto;list-style:none;margin:0;padding:4px}.spm-suggestions li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);cursor:pointer;border-bottom:1px solid var(--border-soft)}.spm-suggestions li:last-child{border-bottom:0}.spm-suggestions li:hover{background:#132a3c}.spm-suggestions li b{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:10px;color:var(--text);white-space:nowrap}.spm-suggestions li span{color:var(--text-dim);font-size:10px;flex:1}.spm-suggestions li i{font-style:normal;color:var(--text-dim2);font-size:8px;letter-spacing:.06em;border:1px solid var(--border);border-radius:999px;padding:2px 6px}.spm-suggestions li.empty{color:var(--text-dim2);cursor:default;justify-content:center}.spm-suggestions li.empty:hover{background:transparent}.kpi-strip{display:flex;border-top:1px solid var(--border-soft);background:var(--surface-solid);padding:16px 28px;gap:0;overflow-x:auto}.kpi-strip>div{flex:1;min-width:130px;padding:0 22px;border-left:1px solid var(--border-soft)}.kpi-strip>div:first-child{border-left:0;padding-left:0}.kpi-strip label{display:block;font-size:9px;letter-spacing:.08em;color:var(--text-dim2);margin-bottom:6px}.kpi-strip .kpi-value{font-size:14px;color:var(--text);font-weight:600}.kpi-strip .kpi-value small{font-size:10px;color:var(--text-dim2);font-weight:400;margin-left:6px}.kpi-bar{height:3px;border-radius:2px;background:var(--border-soft);margin-top:7px}.kpi-bar span{display:block;height:100%;border-radius:2px;background:var(--accent)}.kpi-bar.warn span{background:var(--warn)}.command-hint{border-top:1px solid var(--border-soft);background:#060d17;color:var(--text-dim2);font-size:10px;letter-spacing:.06em;padding:8px 28px}.command-hint kbd{border:1px solid var(--border);border-radius:4px;padding:2px 6px;margin:0 4px;color:var(--text-dim2)}