:root {
  color-scheme: dark;
  --bg: #0b1120; --bg-elevated: #111a2b; --panel: #10192a; --panel-2: #151f32; --panel-hover: #1b2940;
  --line: #26334a; --line-strong: #34445f; --text: #e7edf7; --muted: #8e9db5; --subtle: #64748b;
  --accent: #3b9af5; --accent-strong: #1876d2; --accent-soft: #142e4b; --good: #35c58a; --good-soft: #12372d;
  --warn: #f1b957; --warn-soft: #392b16; --bad: #f06a75; --bad-soft: #421d28; --canvas: #0a1322;
  --shadow: 0 12px 34px rgba(0,0,0,.22); --radius: 10px; --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
html[data-theme="light"] {
  color-scheme: light;
  --bg: #edf2f8; --bg-elevated: #f7f9fc; --panel: #ffffff; --panel-2: #f4f7fb; --panel-hover: #e8eff8;
  --line: #d8e1ed; --line-strong: #c2cfdf; --text: #18263a; --muted: #64748b; --subtle: #8493a7;
  --accent: #1976cf; --accent-strong: #125ea9; --accent-soft: #e3f1ff; --good: #15865b; --good-soft: #ddf6eb;
  --warn: #a96d0a; --warn-soft: #fff2d8; --bad: #c73c4c; --bad-soft: #ffe5e8; --canvas: #f7faff;
  --shadow: 0 12px 34px rgba(30,56,85,.12);
}
* { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; height: 100%; margin: 0; }
body { background: var(--bg); color: var(--text); font: 13px/1.45 var(--font); overflow: hidden; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button { cursor: pointer; }
button:disabled { opacity: .45; cursor: not-allowed; }
.app-shell { height: 100dvh; display: flex; flex-direction: column; min-height: 0; background: var(--bg); }
.topbar { display: flex; align-items: center; gap: 18px; height: 62px; flex: 0 0 62px; padding: 0 17px; background: var(--panel); border-bottom: 1px solid var(--line); z-index: 5; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); min-width: 210px; }
.brand-mark { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 9px; background: linear-gradient(145deg,#45b2ff,#1676d3); color: white; font-size: 25px; font-weight: 700; line-height: 1; box-shadow: 0 4px 14px #137bd444; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.12; gap: 4px; }
.brand-copy strong { font-size: 15px; letter-spacing: -.3px; }
.brand-copy small { font-size: 9px; letter-spacing: 1.4px; color: var(--muted); font-weight: 750; }
.project-title-wrap { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; }
.status-dot { width: 7px; height: 7px; flex: 0 0 auto; background: var(--good); border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in srgb,var(--good) 15%,transparent); }
.project-name { max-width: 250px; min-width: 80px; width: 32%; background: transparent; border: 1px solid transparent; color: var(--text); font-size: 13px; font-weight: 650; padding: 7px 9px; border-radius: 6px; }
.project-name:hover, .project-name:focus { border-color: var(--line-strong); background: var(--panel-2); outline: none; }
.save-status { font-size: 11px; color: var(--muted); white-space: nowrap; }
.top-actions { display: flex; gap: 5px; align-items: center; }
.toolbar-divider { height: 23px; width: 1px; background: var(--line); margin: 0 5px; display: inline-block; }
.icon-btn { width: 33px; height: 33px; border: 1px solid transparent; background: transparent; display: inline-grid; place-items: center; border-radius: 7px; color: var(--muted); font-size: 19px; transition: background .15s,border-color .15s,color .15s; }
.icon-btn:hover { background: var(--panel-hover); border-color: var(--line); color: var(--text); }
.icon-btn.small { width: 27px; height: 27px; font-size: 17px; }
.tool-btn, .primary-btn { min-height: 32px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2); color: var(--text); font-weight: 600; font-size: 11px; white-space: nowrap; transition: background .15s,border-color .15s; }
.tool-btn:hover { background: var(--panel-hover); border-color: var(--line-strong); }
.tool-btn span { font-size: 14px; color: var(--muted); }
.tool-btn.primary, .primary-btn { color: #fff; border-color: var(--accent); background: var(--accent-strong); }
.tool-btn.primary:hover, .primary-btn:hover { background: var(--accent); }
.primary-btn { border: 1px solid var(--accent-strong); padding: 0 13px; min-height: 34px; }
.primary-btn.danger { background: var(--bad); border-color: var(--bad); }
.subbar { height: 49px; flex: 0 0 49px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 0 17px; border-bottom: 1px solid var(--line); background: var(--bg-elevated); }
.mode-switch { display: flex; gap: 4px; align-items: center; background: var(--panel-2); padding: 3px; border: 1px solid var(--line); border-radius: 8px; }
.mode-btn { height: 29px; border: 0; background: transparent; color: var(--muted); border-radius: 6px; padding: 0 12px; font-size: 11px; font-weight: 700; }
.mode-btn.active { color: var(--text); background: var(--panel); box-shadow: 0 1px 2px #0002; }
.mode-btn[data-mode="simulation"].active { color: var(--accent); }
.subbar-actions { display: flex; align-items: center; gap: 7px; }
.select-wrap { display: flex; align-items: center; gap: 7px; font-size: 10px; color: var(--muted); white-space: nowrap; }
select, input:not([type="file"]), textarea { color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; }
select { padding: 6px 24px 6px 8px; max-width: 210px; }
.workspace { display: grid; grid-template-columns: 235px minmax(300px,1fr) 270px; gap: 0; min-height: 0; flex: 1; padding: 10px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; min-height: 0; }
.device-panel { display: flex; flex-direction: column; overflow: hidden; margin-right: 10px; }
.inspector-panel { display: flex; flex-direction: column; overflow: hidden; margin-left: 10px; }
.panel-heading { min-height: 58px; padding: 12px 13px 10px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.panel-heading h2 { font-size: 14px; margin: 2px 0 0; font-weight: 750; letter-spacing: -.2px; }
.eyebrow { font-size: 9px; letter-spacing: 1.2px; color: var(--muted); font-weight: 800; }
.panel-collapse { border: 1px solid transparent; background: transparent; color: var(--muted); width: 26px; height: 26px; border-radius: 6px; font-size: 19px; }
.panel-collapse:hover { background: var(--panel-hover); border-color: var(--line); color: var(--text); }
.search-box { margin: 12px 11px 9px; display: flex; align-items: center; gap: 7px; padding: 0 8px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; color: var(--muted); height: 32px; }
.search-box span { font-size: 20px; }
.search-box input { flex: 1; min-width: 0; border: 0; outline: none; box-shadow: none; padding: 0; background: transparent; font-size: 11px; }
.device-palette { overflow-y: auto; padding: 0 8px 8px; flex: 1; }
.device-group-label { color: var(--subtle); font-size: 9px; font-weight: 800; letter-spacing: 1.1px; padding: 10px 6px 6px; }
.device-tile { width: 100%; display: flex; align-items: center; gap: 9px; padding: 8px; margin: 2px 0; border-radius: 7px; background: transparent; border: 1px solid transparent; text-align: left; }
.device-tile:hover { background: var(--panel-2); border-color: var(--line); }
.device-tile > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.device-tile strong { font-size: 11px; font-weight: 700; }
.device-tile small { color: var(--muted); font-size: 9px; }
.device-glyph { flex: 0 0 35px; height: 34px; width: 35px; display: grid; place-items: center; border-radius: 8px; font-size: 22px; font-weight: 600; border: 1px solid color-mix(in srgb,var(--glyph) 35%, transparent); color: var(--glyph); background: color-mix(in srgb,var(--glyph) 12%, transparent); }
.router-glyph { --glyph: #56aaf5; } .switch-glyph { --glyph: #2fcba0; } .l3-glyph { --glyph: #a78bfa; } .firewall-glyph { --glyph: #f08d68; }
.pc-glyph,.laptop-glyph { --glyph: #5bc6d8; } .server-glyph { --glyph: #eeae4b; } .printer-glyph { --glyph: #9caec4; } .ap-glyph { --glyph: #c38cff; } .cloud-glyph { --glyph: #7fa6d8; }
.add-mark { font-size: 17px; opacity: 0; color: var(--accent); transition: opacity .1s; }
.device-tile:hover .add-mark { opacity: 1; }
.panel-footer { border-top: 1px solid var(--line); padding: 10px 12px; color: var(--muted); font-size: 9px; display: flex; gap: 7px; align-items: center; }
.tiny-status { width: 6px; height: 6px; border-radius: 50%; background: var(--good); }
.canvas-column { display: flex; min-width: 0; min-height: 0; flex-direction: column; gap: 8px; }
.canvas-toolbar { height: 43px; flex: 0 0 43px; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.canvas-tool-group, .canvas-toolbar-right { display: flex; align-items: center; gap: 3px; min-width: 0; }
.canvas-tool { border: 1px solid transparent; background: transparent; border-radius: 6px; height: 29px; padding: 0 9px; color: var(--muted); font-weight: 650; font-size: 11px; white-space: nowrap; }
.canvas-tool span { margin-left: 4px; }
.canvas-tool:hover { color: var(--text); background: var(--panel-2); }
.canvas-tool.active { color: var(--accent); background: var(--accent-soft); border-color: color-mix(in srgb,var(--accent) 28%, transparent); }
.selection-hint { color: var(--muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.zoom-label { font-size: 10px; font-weight: 650; color: var(--muted); min-width: 33px; text-align: center; }
.canvas-status { padding: 7px 12px; background: var(--accent-soft); border: 1px solid color-mix(in srgb,var(--accent) 25%,var(--line)); border-radius: 7px; color: var(--accent); font-size: 11px; }
.canvas-wrap { position: relative; background: var(--canvas); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; flex: 1 1 280px; min-height: 230px; isolation: isolate; }
.topology-canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: default; }
.grid-line { stroke: var(--line); opacity: .58; }
.link-line { stroke: #62758e; stroke-width: 2.5; fill: none; vector-effect: non-scaling-stroke; }
.link-line.up { stroke: #30ba8a; }
.link-line.down { stroke: #e35e6a; stroke-dasharray: 6 5; }
.link-hit-area { stroke: transparent; stroke-width: 16; fill: none; cursor: pointer; pointer-events: stroke; }
.link-label { fill: var(--muted); text-anchor: middle; paint-order: stroke; stroke: var(--canvas); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.link-device-label { font-size: 9px; font-weight: 750; fill: var(--text); }
.link-port-label { font-size: 7.5px; fill: var(--muted); }
.link-group.selected .link-line { stroke: var(--accent); stroke-width: 4; }
.node-group { cursor: grab; outline: none; }
.node-group:active { cursor: grabbing; }
.node-card { fill: var(--panel); stroke: var(--line-strong); stroke-width: 1.2; rx: 10; }
.node-group.selected .node-card { stroke: var(--accent); stroke-width: 2.5; }
.node-group:focus .node-card { stroke: var(--accent); stroke-width: 2; }
.node-label { fill: var(--text); font-size: 12px; font-weight: 700; text-anchor: middle; pointer-events: none; }
.node-sub { fill: var(--muted); font-size: 9px; text-anchor: middle; pointer-events: none; }
.node-symbol { font-size: 24px; text-anchor: middle; dominant-baseline: middle; pointer-events: none; font-weight: 700; }
.node-status { stroke: var(--canvas); stroke-width: 3; }
.canvas-empty { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; flex-direction: column; text-align: center; padding: 22px; pointer-events: none; }
.canvas-empty.visible { display: flex; }
.empty-orbit { height: 68px; width: 68px; border: 1px solid var(--line-strong); border-radius: 20px; display: grid; place-items: center; color: var(--accent); background: var(--panel); font-size: 38px; margin-bottom: 15px; box-shadow: 0 0 0 9px color-mix(in srgb,var(--accent) 4%,transparent); }
.canvas-empty h3 { margin: 0 0 5px; font-size: 16px; }
.canvas-empty p { max-width: 290px; margin: 0 0 15px; color: var(--muted); font-size: 11px; }
.canvas-empty button { pointer-events: auto; }
.text-btn { border: 0; padding: 5px 7px; border-radius: 5px; background: transparent; color: var(--accent); font-weight: 650; font-size: 10px; }
.text-btn:hover { background: var(--accent-soft); }
.canvas-minimap { position: absolute; right: 13px; bottom: 48px; width: 112px; height: 78px; border: 1px solid var(--line-strong); border-radius: 6px; background: color-mix(in srgb,var(--panel) 90%,transparent); box-shadow: var(--shadow); padding: 5px; pointer-events: none; overflow: hidden; }
.minimap-label { color: var(--muted); font-size: 7px; letter-spacing: .8px; font-weight: 800; }
#miniMapContent { display: flex; flex-wrap: wrap; gap: 3px; padding: 4px 1px; }
.minimap-node { width: 10px; height: 6px; border-radius: 2px; background: var(--accent); opacity: .8; }
.canvas-hud { position: absolute; bottom: 9px; left: 10px; display: flex; flex-wrap: wrap; gap: 10px; font-size: 9px; color: var(--muted); pointer-events: none; }
kbd { font: inherit; font-size: 8px; border: 1px solid var(--line-strong); background: var(--panel); border-radius: 3px; padding: 1px 4px; }
.canvas-footer { min-height: 28px; display: flex; gap: 8px; justify-content: space-between; align-items: center; padding: 0 4px; color: var(--muted); }
.canvas-stats, .canvas-footer-right { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
.canvas-stats > span { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; }
.canvas-stats b { color: var(--text); }
.stat-icon { width: 6px; height: 6px; border-radius: 2px; background: var(--accent); }
.link-stat { background: var(--good); } .issue-stat { background: var(--warn); }
.legend-item { display: inline-flex; align-items: center; gap: 5px; font-size: 9px; }
.legend-dot { height: 6px; width: 6px; border-radius: 50%; display: inline-block; }.legend-dot.up { background: var(--good); }.legend-dot.down { background: var(--bad); }
.mode-status { border-radius: 4px; padding: 3px 6px; color: var(--accent); background: var(--accent-soft); font-size: 8px; letter-spacing: .7px; font-weight: 800; }
.bottom-panel { display: flex; flex-direction: column; flex: 0 0 184px; overflow: hidden; transition: flex-basis .2s; }
.bottom-panel.collapsed { flex-basis: 40px; }
.bottom-tabs { display: flex; align-items: center; min-height: 39px; border-bottom: 1px solid var(--line); padding: 0 8px; gap: 5px; flex: 0 0 39px; }
.bottom-tab { height: 38px; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-weight: 650; font-size: 10px; white-space: nowrap; }
.bottom-tab.active { color: var(--text); border-bottom-color: var(--accent); }
.count-badge { color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; font-size: 9px; }
.count-badge.warning { color: var(--warn); }
.bottom-tab-actions { margin-left: auto; display: flex; align-items: center; gap: 3px; }
.bottom-content { overflow: auto; flex: 1; min-height: 0; }
.event-empty { color: var(--muted); font-size: 11px; text-align: center; padding: 25px 10px; }
.event-list { display: flex; flex-direction: column; }
.event-row { display: grid; grid-template-columns: 58px 65px minmax(100px,1fr) minmax(90px,.8fr); gap: 8px; align-items: center; padding: 6px 11px; border-bottom: 1px solid var(--line); font-size: 10px; }
.event-row:hover { background: var(--panel-2); }
.event-time { color: var(--muted); font-variant-numeric: tabular-nums; }
.event-type { font-size: 8px; letter-spacing: .4px; font-weight: 800; color: var(--accent); }
.event-type.success { color: var(--good); }.event-type.warning { color: var(--warn); }.event-type.error { color: var(--bad); }
.event-message { color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.event-detail { color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.cli-pane { display: flex; flex-direction: column; padding: 8px 10px; gap: 7px; }
.cli-head { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; }
.cli-head select { padding: 4px 22px 4px 7px; font-size: 10px; }
.cli-tip { margin-left: auto; }
.cli-output { overflow: auto; flex: 1; min-height: 35px; background: var(--canvas); border-radius: 5px; padding: 7px 9px; font: 10px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; color: var(--text); }
.cli-welcome { color: var(--muted); }
.cli-line { white-space: pre-wrap; overflow-wrap: anywhere; }
.cli-line.command { color: var(--accent); }.cli-line.error { color: var(--bad); }
.cli-form { display: flex; align-items: center; gap: 7px; }
.cli-prompt { font: 10px ui-monospace,monospace; color: var(--good); white-space: nowrap; }
.cli-form input { flex: 1; min-width: 0; height: 31px; font: 11px ui-monospace,monospace; padding: 0 8px; }
.diagnostics-list { padding: 6px 8px; }
.diagnostic-item { border-bottom: 1px solid var(--line); padding: 8px 5px; display: flex; gap: 9px; align-items: flex-start; }
.diagnostic-item:last-child { border-bottom: 0; }
.diagnostic-icon { width: 21px; height: 21px; border-radius: 6px; display: grid; place-items: center; color: var(--warn); background: var(--warn-soft); flex: 0 0 auto; }
.diagnostic-icon.error { color: var(--bad); background: var(--bad-soft); }
.diagnostic-copy strong { display: block; font-size: 10px; margin: 0 0 3px; }
.diagnostic-copy p { color: var(--muted); font-size: 10px; margin: 0; }
.inspector-content { overflow: auto; flex: 1; padding: 12px; }
.inspector-empty { min-height: 220px; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 18px; }
.inspector-empty-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); font-size: 25px; margin-bottom: 12px; }
.inspector-empty h3 { font-size: 12px; margin: 0 0 5px; }
.inspector-empty p { max-width: 195px; color: var(--muted); font-size: 10px; margin: 0; line-height: 1.6; }
.inspector-device-header { display: flex; align-items: center; gap: 10px; padding: 1px 0 13px; border-bottom: 1px solid var(--line); }
.inspector-device-icon { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; font-size: 24px; color: var(--accent); background: var(--accent-soft); }
.inspector-device-title { min-width: 0; flex: 1; }
.inspector-device-title strong { font-size: 13px; display: block; overflow-wrap: anywhere; }
.inspector-device-title small { display: block; color: var(--muted); font-size: 9px; margin-top: 3px; text-transform: uppercase; letter-spacing: .7px; }
.small-delete-btn { border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 6px; width: 28px; height: 28px; }
.small-delete-btn:hover { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }
.form-section { padding: 13px 0 5px; border-bottom: 1px solid var(--line); }
.form-section:last-child { border-bottom: 0; }
.section-title { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 10px; }
.form-row { margin-bottom: 10px; display: flex; flex-direction: column; gap: 4px; }
.form-row label { color: var(--muted); font-size: 10px; font-weight: 600; }
.form-row input, .form-row select { min-width: 0; width: 100%; font-size: 11px; padding: 7px 8px; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.inline-toggle { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 10px; color: var(--muted); margin: 7px 0 10px; }
.toggle { position: relative; width: 33px; height: 18px; border: 0; border-radius: 20px; background: var(--line-strong); padding: 2px; flex: 0 0 auto; }
.toggle::after { content: ""; display: block; height: 14px; width: 14px; background: #fff; border-radius: 50%; transition: transform .15s; }
.toggle[aria-checked="true"] { background: var(--good); }.toggle[aria-checked="true"]::after { transform: translateX(15px); }
.interface-card { background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; padding: 9px; margin: 7px 0; }
.interface-card-head { display: flex; justify-content: space-between; align-items: center; gap: 7px; margin-bottom: 8px; }
.interface-card-head strong { font-size: 10px; }
.interface-state { border-radius: 4px; padding: 2px 5px; color: var(--good); background: var(--good-soft); font-size: 8px; font-weight: 800; }
.interface-state.down { color: var(--bad); background: var(--bad-soft); }
.interface-card .form-row { margin-bottom: 7px; }
.interface-card .form-row:last-child { margin-bottom: 0; }
.interface-card input, .interface-card select { background: var(--panel); }
.route-list { display: flex; flex-direction: column; gap: 7px; }
.route-card { padding: 7px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-2); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 22px; gap: 5px; }
.route-card input { width: 100%; min-width: 0; font-size: 9px; padding: 6px; background: var(--panel); }
.route-card button { background: transparent; border: 0; color: var(--bad); font-size: 15px; }
.add-route-btn { width: 100%; margin-top: 7px; border: 1px dashed var(--line-strong); background: transparent; color: var(--accent); border-radius: 6px; padding: 7px; font-size: 10px; font-weight: 650; }
.add-route-btn:hover { background: var(--accent-soft); }
.connection-card { display: flex; gap: 8px; align-items: center; padding: 8px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; margin: 7px 0; }
.connection-card div { flex: 1; min-width: 0; }
.connection-card strong { font-size: 10px; display: block; }
.connection-card small { font-size: 9px; color: var(--muted); overflow-wrap: anywhere; }
.connection-card .link-state { color: var(--good); font-size: 8px; font-weight: 800; }
.property-chip { display: inline-flex; margin: 2px 3px 2px 0; padding: 3px 6px; border: 1px solid var(--line); background: var(--panel-2); border-radius: 5px; color: var(--muted); font-size: 9px; }
.inspector-actions { display: flex; gap: 7px; margin-top: 10px; }
.inspector-actions button { flex: 1; }
.toast-region { position: fixed; z-index: 20; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; max-width: min(360px,calc(100vw - 36px)); pointer-events: none; }
.toast { border: 1px solid var(--line-strong); background: var(--panel); box-shadow: var(--shadow); border-radius: 9px; padding: 10px 13px; color: var(--text); font-size: 11px; animation: toast-in .18s ease-out; }
.toast.success { border-left: 3px solid var(--good); }.toast.warning { border-left: 3px solid var(--warn); }.toast.error { border-left: 3px solid var(--bad); }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.app-dialog { width: min(410px,calc(100vw - 30px)); padding: 0; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--panel); color: var(--text); box-shadow: var(--shadow); }
.app-dialog::backdrop { background: #020712aa; backdrop-filter: blur(2px); }
.app-dialog form { padding: 24px; }
.dialog-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--warn-soft); color: var(--warn); font-weight: 800; }
.app-dialog h2 { font-size: 17px; margin: 13px 0 7px; }
.app-dialog p { color: var(--muted); font-size: 12px; margin: 0 0 22px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.mobile-menu-btn { display: none; }
body.is-panning .topology-canvas { cursor: grabbing; }
body.connect-mode .topology-canvas { cursor: crosshair; }
body.simulation-mode .device-tile { opacity: .75; }
body.simulation-mode .canvas-tool#connectToolBtn { opacity: .55; }
[hidden] { display: none !important; }

.subnet-dialog { max-height: min(90dvh,760px); overflow: auto; }
.subnet-dialog form { padding: 22px; }
.subnet-dialog .form-row { margin: 13px 0; }
.subnet-dialog .form-row input { padding: 9px 10px; width: 100%; font-size: 12px; }
.subnet-results { margin-top: 15px; padding: 10px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; }
.subnet-result-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 3px; border-bottom: 1px solid var(--line); font-size: 11px; }
.subnet-result-row:last-child { border-bottom: 0; }
.subnet-result-row span { color: var(--muted); }
.subnet-result-row strong { font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
/* Desktop workspace tracks are rebalanced when side panels are collapsed. */
.workspace.device-collapsed { grid-template-columns: minmax(0,1fr) 270px; }
.workspace.inspector-collapsed { grid-template-columns: 235px minmax(0,1fr); }
.workspace.device-collapsed.inspector-collapsed { grid-template-columns: minmax(0,1fr); }

/* Device-scoped console modal: the global Event log and Diagnostics remain docked. */
.console-dialog { width: min(820px,calc(100vw - 24px)); max-height: min(88dvh,780px); overflow: hidden; }
.console-dialog[open] { display: flex; flex-direction: column; }
.console-shell { display: flex; flex-direction: column; gap: 12px; min-height: 0; width: 100%; padding: 18px; }
.console-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.console-dialog-header h2 { font-size: 17px; margin: 4px 0 3px; }
.console-dialog-header p { color: var(--muted); font-size: 10px; margin: 0; line-height: 1.5; }
.console-protocol-note { border: 1px solid var(--line); background: var(--panel-2); border-radius: 7px; padding: 8px 10px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.console-protocol-note code { color: var(--accent); white-space: nowrap; }
.console-output { min-height: 180px; max-height: 52dvh; flex: 1 1 280px; overflow: auto; background: var(--canvas); border: 1px solid var(--line); border-radius: 8px; padding: 12px; font: 12px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.console-output .cli-line { white-space: pre-wrap; overflow-wrap: anywhere; }
.console-output .cli-line.command { color: var(--accent); margin-top: 5px; }
.console-output .cli-line.error { color: var(--bad); }
.console-form { display: flex; align-items: center; gap: 8px; }
.console-form input { flex: 1; min-width: 0; min-height: 40px; background: var(--panel-2); border: 1px solid var(--line-strong); color: var(--text); border-radius: 7px; padding: 0 10px; font: 12px ui-monospace,SFMono-Regular,Consolas,monospace; }
.console-form .cli-prompt { font: 11px ui-monospace,monospace; color: var(--good); max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.console-dialog-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 10px; }
.node-group { user-select: none; -webkit-user-select: none; touch-action: none; }
.node-group text { pointer-events: none; }
.console-dialog .console-form { padding: 0; margin: 0; }

/* Distinct local SVG artwork for every toolbox and canvas device. */
.device-glyph svg, .inline-device-icon { width: 27px; height: 27px; display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.inline-device-icon { width: 30px; height: 30px; }
.node-icon { pointer-events: none; }
body.ping-mode .topology-canvas { cursor: crosshair; }
body.ping-mode .canvas-tool#pingToolBtn { color: var(--accent); background: var(--accent-soft); }

/* Device configuration opens in a centered modal instead of occupying the right inspector. */
.properties-dialog { width: min(900px,calc(100vw - 24px)); max-height: min(92dvh,860px); overflow: hidden; }
.properties-dialog[open] { display: flex; flex-direction: column; }
.properties-shell { width: 100%; min-height: 0; max-height: inherit; flex: 1 1 auto; display: flex; flex-direction: column; }
.properties-dialog-header { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.properties-title-icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 48px; background: var(--panel-2); border: 1px solid var(--line); color: var(--accent); }
.properties-title-icon .inline-device-icon { width: 34px; height: 34px; }
.properties-title-copy { flex: 1; min-width: 0; }
.properties-title-copy h2 { font-size: 17px; line-height: 1.25; margin: 3px 0 3px; }
.properties-title-copy p { color: var(--muted); font-size: 10px; margin: 0; overflow-wrap: anywhere; }
.properties-content { overflow: auto; min-height: 0; padding: 15px 18px; }
.properties-content .inspector-device-header { padding-bottom: 10px; }
.properties-content .inspector-device-icon .inline-device-icon { width: 27px; height: 27px; }
.properties-content .form-section { margin-top: 13px; }
.properties-content .form-row { margin-bottom: 10px; }
.properties-dialog-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.properties-dialog-footer .primary-btn { min-width: 80px; }
.properties-content .inspector-actions button { min-height: 36px; }
.properties-content { flex: 1 1 auto; }


/* Single-workspace layout: the redundant right-side Inspector has been removed. */
.workspace { grid-template-columns: 235px minmax(0,1fr); gap: 0; }
.workspace.device-collapsed { grid-template-columns: minmax(0,1fr); }
.device-panel { margin-right: 10px; }
.workspace .inspector-panel { display: none !important; }
.phone-glyph { --glyph: #63b7ff; }
.link-line.wireless { stroke: #c38cff; stroke-dasharray: 7 4; }
.link-line.wireless.up { stroke: #c38cff; }

/* The guide is a real second page inside the static app shell. */
.learning-page { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 22px clamp(14px,3vw,34px) 26px; background: var(--bg); display: flex; flex-direction: column; gap: 17px; }
.learning-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.learning-page-header h1 { margin: 4px 0 7px; font-size: clamp(22px,2.5vw,30px); letter-spacing: -.7px; }
.learning-page-header p { margin: 0; max-width: 780px; color: var(--muted); font-size: 12px; }
.learning-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.learning-controls .search-box { margin: 0; width: min(430px,100%); }
.learning-tabs { display: flex; flex-wrap: wrap; gap: 5px; padding: 4px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }
.learn-tab { min-height: 31px; padding: 0 13px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted); font-weight: 700; font-size: 11px; }
.learn-tab.active { color: var(--text); background: var(--accent-soft); border-color: color-mix(in srgb,var(--accent) 30%,transparent); }
.learn-panel { width: 100%; }
.learning-card-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,280px),1fr)); gap: 13px; align-items: stretch; }
.learning-card { min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: 0 4px 16px rgba(0,0,0,.04); }
.learning-card-header { display: flex; align-items: center; gap: 12px; }
.guide-device-icon { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; border-radius: 11px; color: var(--accent); background: var(--accent-soft); border: 1px solid color-mix(in srgb,var(--accent) 22%,transparent); }
.guide-device-icon .inline-device-icon { width: 34px; height: 34px; }
.guide-device-icon svg { width: 34px; height: 34px; }
.learning-card h3 { font-size: 14px; margin: 0; line-height: 1.3; }
.learning-card .guide-category, .challenge-number { display: block; margin-bottom: 3px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; }
.learning-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.guide-section { padding: 10px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); }
.guide-section strong { display: block; margin-bottom: 4px; font-size: 10px; }
.guide-section.issue { border-left: 3px solid var(--warn); }
.guide-section.task { border-left: 3px solid var(--good); }
.guide-add-btn { margin-top: auto; align-self: flex-start; }
.challenge-card h3 { font-size: 15px; }
.challenge-card .challenge-skills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; }
.challenge-skills span { padding: 4px 7px; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); border-radius: 20px; font-size: 9px; }
.challenge-card .primary-btn { align-self: flex-start; margin-top: 2px; }
.learning-disclaimer { padding: 11px 13px; color: var(--muted); border: 1px solid var(--line); border-radius: 8px; background: var(--panel); font-size: 10px; }
body.learning-view .mode-switch { display: none; }
body.learning-view .subbar-actions > :not(#learnPageBtn) { display: none; }
body.learning-view .subbar-actions #learnPageBtn { font-size: 11px; }
body.learning-view .subbar { justify-content: flex-end; }

/* Device-config forms for DHCP, firewall rules and the simulated HTTP service. */
.properties-content textarea, .properties-content select, .properties-content input:not([type="checkbox"]) { max-width: 100%; }
.properties-content textarea { width: 100%; min-height: 105px; resize: vertical; padding: 9px 10px; border: 1px solid var(--line); border-radius: 7px; color: var(--text); background: var(--panel-2); font: 11px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; }
.properties-content .wide-field { width: 100%; }
.field-help { display: block; margin: 4px 0 9px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.renew-lease-btn { width: 100%; margin: 2px 0 9px; }
.firewall-rule-card { margin: 8px 0; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); }
.firewall-rule-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: 11px; font-weight: 750; }
.firewall-rule-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.firewall-rule-grid label { display: flex; flex-direction: column; gap: 4px; min-width: 0; color: var(--muted); font-size: 10px; }
.firewall-rule-grid input, .firewall-rule-grid select { width: 100%; min-width: 0; padding: 7px; font-size: 10px; }
.check-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 28px; font-size: 11px; }
.form-section-note { color: var(--muted); font-size: 10px; margin: 5px 0 9px; }

/* In-app browser for simulated HTTP service. Its iframe is intentionally sandboxed. */
.web-browser-dialog { width: min(1050px,calc(100vw - 20px)); height: min(86dvh,820px); max-height: 94dvh; overflow: hidden; }
.web-browser-dialog[open] { display: flex; flex-direction: column; }
.web-browser-shell { width: 100%; min-width: 0; min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.web-browser-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 17px; border-bottom: 1px solid var(--line); }
.web-browser-header h2 { margin: 3px 0; font-size: 16px; }
.web-browser-header p { margin: 0; color: var(--muted); font-size: 10px; }
.web-browser-toolbar { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.web-browser-toolbar input { flex: 1; min-width: 0; min-height: 34px; padding: 0 10px; font-size: 11px; }
.browser-lock { display: inline-grid; place-items: center; width: 22px; height: 22px; color: var(--good); font-size: 12px; }
.web-browser-dialog iframe { display: block; flex: 1 1 auto; width: 100%; min-height: 180px; border: 0; background: #fff; }
.web-browser-error { padding: 12px 15px; color: var(--bad); background: var(--bad-soft); border-bottom: 1px solid var(--line); font-size: 11px; }
.web-browser-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }

@media (max-width: 1270px) { .workspace { grid-template-columns: 205px minmax(0,1fr); } }
@media (max-width: 1050px) { .workspace { grid-template-columns: 190px minmax(0,1fr); } }
@media (max-width: 720px) {
  .workspace { display: flex; flex-direction: column; }
  .device-panel { margin-right: 0; }
  .learning-page { padding: 13px 10px 20px; gap: 12px; }
  .learning-page-header { flex-direction: column; gap: 12px; }
  .learning-page-header h1 { font-size: 21px; }
  .learning-controls { align-items: stretch; }
  .learning-controls .search-box { width: 100%; }
  .learning-tabs { align-self: flex-start; }
  .learning-card-grid { grid-template-columns: 1fr; gap: 9px; }
  .learning-card { padding: 12px; }
  .web-browser-dialog { width: calc(100vw - 10px); height: 92dvh; max-height: 96dvh; }
  .web-browser-header { padding: 10px; }
  .web-browser-toolbar { padding: 7px; gap: 5px; }
  .web-browser-dialog iframe { min-height: 140px; }
  .firewall-rule-grid { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { .link-packet, .packet-marker { animation: none !important; } }

.firewall-rule-actions { display: inline-flex; align-items: center; gap: 3px; }
.firewall-rule-actions .small-delete-btn { min-width: 24px; width: 24px; height: 24px; }
.firewall-rule-actions .small-delete-btn:disabled { opacity: .3; cursor: not-allowed; }


/* Wi-Fi scanner and SSH client modals. */
.service-dialog-shell { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 13px; padding: 18px; }
.app-dialog form.service-dialog-shell { padding: 18px; }
.service-dialog-shell > p { margin: 0; }
.service-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.service-dialog-header h2 { margin: 4px 0 4px; font-size: 17px; }
.service-dialog-header p { color: var(--muted); margin: 0; font-size: 10px; line-height: 1.5; max-width: 580px; }
.wifi-scan-dialog { width: min(570px,calc(100vw - 24px)); max-height: min(88dvh,760px); overflow: hidden; }
.wifi-scan-dialog[open] { display: flex; flex-direction: column; }
.wifi-scan-dialog .service-dialog-shell { overflow: hidden; min-height: 0; }
.wifi-scan-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wifi-network-list { display: flex; flex-direction: column; gap: 7px; overflow: auto; min-height: 70px; max-height: 40dvh; }
.wifi-network-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 9px; text-align: left; color: var(--text); background: var(--panel-2); cursor: pointer; }
.wifi-network-option:hover, .wifi-network-option.selected { border-color: var(--accent); background: var(--accent-soft); }
.wifi-network-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; flex: 0 0 32px; color: var(--accent); background: var(--panel); font-size: 22px; }
.wifi-network-copy { display: flex; flex: 1; flex-direction: column; min-width: 0; gap: 3px; }
.wifi-network-copy strong { font-size: 12px; overflow-wrap: anywhere; }
.wifi-network-copy small { font-size: 9px; color: var(--muted); }
.wifi-network-signal { display: flex; align-items: flex-end; gap: 2px; height: 16px; }
.wifi-network-signal span { width: 3px; display: block; border-radius: 2px; background: var(--good); }
.wifi-lock { min-width: 35px; text-align: right; font-size: 9px; color: var(--muted); }
.wifi-empty { padding: 22px 12px; border: 1px dashed var(--line-strong); border-radius: 8px; color: var(--muted); font-size: 11px; text-align: center; }
.wifi-connect-form { display: flex; flex-direction: column; gap: 11px; border-top: 1px solid var(--line); padding-top: 12px; }
.wifi-selected-info { color: var(--muted); font-size: 10px; line-height: 1.5; }
.wifi-connect-form .form-row { margin: 0; }
.wifi-connect-form input, .service-dialog-shell input { width: 100%; min-height: 36px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 7px; color: var(--text); background: var(--panel-2); font-size: 11px; }
.wifi-connect-form .primary-btn { align-self: flex-end; }
.ssh-client-dialog { width: min(470px,calc(100vw - 24px)); max-height: 92dvh; overflow: auto; }
.ssh-client-dialog .service-dialog-shell { gap: 11px; }
.ssh-client-dialog .form-row { margin: 0; }
.ssh-client-dialog .dialog-actions { margin-top: 4px; }
.ssh-client-dialog .field-help { margin: 0; }
@media (max-width: 600px) {
  .service-dialog-shell { padding: 12px; gap: 10px; }
  .app-dialog form.service-dialog-shell { padding: 12px; }
  .wifi-scan-dialog { width: calc(100vw - 12px); max-height: 94dvh; }
  .wifi-network-list { max-height: 36dvh; }
  .wifi-network-option { gap: 7px; padding: 8px; }
  .wifi-lock { min-width: 29px; }
  .ssh-client-dialog { width: calc(100vw - 12px); }
}

/* VLAN/SSID configuration cards and accessible password reveal controls */
.password-input-wrap { display:flex; align-items:stretch; gap:6px; width:100%; min-width:0; }
.password-input-wrap input { flex:1; min-width:0; width:100%; }
.password-show-btn { flex:0 0 auto; min-height:32px; padding:0 10px; border:1px solid var(--line-strong); border-radius:7px; color:var(--accent); background:var(--panel-2); font-size:10px; font-weight:700; cursor:pointer; }
.password-show-btn:hover { border-color:var(--accent); background:var(--accent-soft); }
.vlan-scope-list,.wireless-ssid-list { display:flex; flex-direction:column; gap:9px; }
.vlan-scope-card,.wireless-ssid-card { min-width:0; border:1px solid var(--line); background:var(--panel-2); border-radius:9px; padding:10px; margin:8px 0; }
.vlan-scope-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; color:var(--text); font-size:11px; margin-bottom:8px; }
.vlan-scope-heading .small-delete-btn { flex:0 0 auto; }
.vlan-scope-card .field-pair,.wireless-ssid-card .field-pair { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; }
.vlan-scope-card .form-row,.wireless-ssid-card .form-row { min-width:0; }
.vlan-scope-card .form-row input,.wireless-ssid-card .form-row input,.vlan-scope-card select,.wireless-ssid-card select { width:100%; min-width:0; }
.vlan-scope-card .inline-toggle { margin:8px 0; }
.vlan-scope-card .field-help,.wireless-ssid-card .field-help { display:block; line-height:1.4; }
@media (max-width:720px) {
  .vlan-scope-card .field-pair,.wireless-ssid-card .field-pair { grid-template-columns:minmax(0,1fr); }
  .password-show-btn { padding:0 8px; }
}