:root {
  --bg: #061217;
  --bg-soft: #0a1a20;
  --panel: #0d2027;
  --panel-2: #10262e;
  --line: rgba(143, 188, 182, .16);
  --line-strong: rgba(143, 188, 182, .3);
  --text: #e7ece4;
  --muted: #89a09f;
  --muted-2: #5d777a;
  --teal: #7ab6ab;
  --teal-bright: #9bd1bf;
  --gold: #d8bd74;
  --coral: #ed8b65;
  --shadow: 0 20px 60px rgba(0, 0, 0, .28);
  font-family: Inter, "Noto Sans SC", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text);
  background: var(--bg);
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; min-height: 100%; overflow: hidden; background: var(--bg); }
body { overflow: hidden; }
button, input, select { font: inherit; }
button { color: inherit; }

.app-shell { width: 100%; height: 100vh; min-height: 0; overflow: hidden; display: grid; grid-template-columns: 275px minmax(0, 1fr); background: radial-gradient(circle at 52% 45%, #112a30 0, var(--bg) 55%); }
.sidebar { background: linear-gradient(180deg, rgba(11, 30, 36, .97), rgba(6, 19, 24, .98)); height: 100vh; min-height: 0; }
.sidebar { padding: 31px 22px 20px; border-right: 1px solid var(--line); display: flex; flex-direction: column; overflow-y: auto; }
.main-panel { min-width: 0; height: 100vh; overflow: hidden; background: rgba(4, 15, 19, .52); }

.brand-kicker { color: var(--teal); font-size: 9px; letter-spacing: 2.3px; font-weight: 800; }
h1 { margin: 20px 0 15px; font-size: clamp(29px, 3vw, 42px); line-height: .98; letter-spacing: -1.8px; font-weight: 800; }
h1 span { color: var(--teal-bright); }
.brand-copy { color: #8aa09e; font-size: 12px; line-height: 1.75; margin: 0 0 24px; max-width: 220px; }
.side-section { border-top: 1px solid var(--line); padding-top: 17px; margin-top: 2px; }
.section-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.section-label { color: #a9b9b1; font-size: 12px; font-weight: 800; letter-spacing: .2px; }
.section-label em { font-style: normal; color: var(--gold); background: rgba(216, 189, 116, .12); border: 1px solid rgba(216, 189, 116, .27); border-radius: 20px; padding: 4px 8px; font-size: 8px; letter-spacing: .8px; }
.live-dot { color: var(--teal-bright) !important; border-color: rgba(122, 182, 171, .35) !important; background: rgba(122, 182, 171, .1) !important; }
.live-dot::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--teal-bright); margin: 0 5px 1px 0; box-shadow: 0 0 9px var(--teal); }

.summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.summary-stat { border: 1px solid var(--line); border-radius: 8px; padding: 11px 10px 9px; min-height: 79px; background: rgba(21, 50, 57, .27); }
.summary-stat strong { display: block; color: var(--text); font-size: 22px; letter-spacing: -.7px; line-height: 1; }
.summary-stat span { display: block; color: #aac0b8; font-size: 10px; margin-top: 8px; }
.summary-stat small { display: block; color: var(--muted-2); font-size: 8px; margin-top: 3px; }
.control-panel { margin-top: 21px; }
.control-block { margin-top: 17px; }
.control-block label, .search-block label { display: block; color: #9eafab; font-size: 10px; margin-bottom: 8px; }
.segmented, .floor-pills { display: flex; gap: 4px; flex-wrap: wrap; }
.seg-btn, .floor-pill { border: 1px solid var(--line); background: rgba(17, 46, 53, .62); color: var(--muted); cursor: pointer; transition: .18s ease; }
.seg-btn { flex: 1 1 calc(50% - 4px); min-width: 0; border-radius: 7px; padding: 8px 4px; font-size: 10px; }
.floor-pill { border-radius: 6px; padding: 6px 12px; font-size: 10px; }
.seg-btn:hover, .floor-pill:hover, .seg-btn.is-active, .floor-pill.is-active { color: #061217; background: var(--teal); border-color: var(--teal); }
select, .search-wrap { width: 100%; border: 1px solid var(--line); background: #112b33; color: var(--text); border-radius: 7px; }
select { padding: 8px 10px; outline: none; font-size: 11px; }
.search-wrap { display: flex; align-items: center; padding: 0 10px; color: var(--muted); }
.search-wrap input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); padding: 8px 7px; font-size: 11px; }
.search-wrap input::placeholder { color: #587176; }
.switch-row { margin-top: 19px; display: flex; align-items: center; gap: 9px; color: #9eafab; font-size: 10px; cursor: pointer; }
.switch-row input { display: none; }
.switch-ui { width: 32px; height: 17px; border-radius: 20px; background: #28434a; display: inline-block; position: relative; margin-left: auto; transition: .2s; }
.switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 11px; height: 11px; border-radius: 50%; background: #718a88; transition: .2s; }
.switch-row input:checked + .switch-ui { background: #3a7e7b; }
.switch-row input:checked + .switch-ui::after { left: 18px; background: #d8f1d9; }
.control-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 17px; }
.action-btn, .download-btn { border: 1px solid var(--line); border-radius: 7px; background: rgba(17, 46, 53, .62); color: #9fb4ae; cursor: pointer; font-size: 10px; padding: 8px 5px; transition: .18s ease; }
.action-btn:hover, .download-btn:hover { color: var(--text); border-color: var(--teal); }
.action-btn.primary { color: #1d2925; border-color: var(--gold); background: var(--gold); }
.download-btn { width: 100%; margin-top: 7px; color: var(--teal-bright); }
.control-note { color: #607a7b; font-size: 9px; line-height: 1.65; margin: 11px 2px 0; }
.scale-section { margin-top: 19px; padding-bottom: 15px; }
.scale-item { margin-top: 15px; color: #9fb5ae; font-size: 9px; }
.scale-item > div:first-child { display: flex; justify-content: space-between; gap: 6px; }
.scale-item small { color: #6d8b87; font-size: 8px; }
.scale-item > i { display: block; height: 8px; border-radius: 8px; margin-top: 7px; }
.gradient-node { background: linear-gradient(90deg, #317477, #7aad85, #dcb966, #ec7450); }
.gradient-edge { background: linear-gradient(90deg, #3e7b86, #75aca0, #d8b96b, #e87a57); }
.scale-values { display: flex; justify-content: space-between; margin-top: 4px; color: #5e7b7c; font-variant-numeric: tabular-nums; }
.sidebar-footer { margin-top: auto; border-top: 1px solid var(--line); padding-top: 14px; display: flex; align-items: center; gap: 7px; color: var(--muted-2); font-size: 9px; }
.status-dot { display: inline-block; width: 6px; height: 6px; background: var(--teal); border-radius: 50%; box-shadow: 0 0 8px var(--teal); }
.footer-mark { margin-left: auto; color: #415b60; }

.topbar { height: 66px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 22px; color: #a1b6b0; font-size: 11px; white-space: nowrap; }
.query-line { overflow: hidden; text-overflow: ellipsis; }
.query-prompt { color: var(--teal-bright); font-weight: 800; margin-right: 8px; }
.query-comment { color: #4b6b70; margin-left: 10px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.top-action { border: 0; border-radius: 16px; padding: 6px 13px; color: #12232a; background: var(--gold); font-size: 9px; font-weight: 900; letter-spacing: 1px; cursor: pointer; }
.data-badge { color: var(--teal); font-size: 10px; }
.workspace { height: calc(100% - 66px); padding: 23px 20px 20px; overflow: hidden; }
.workspace-header { height: 35px; display: flex; justify-content: space-between; align-items: flex-start; }
.view-tabs { display: flex; gap: 6px; }
.view-tab { border: 0; background: transparent; color: #738d8d; cursor: pointer; padding: 7px 11px; font-size: 10px; font-weight: 800; letter-spacing: .5px; border-radius: 5px; }
.view-tab.is-active { color: #0a2427; background: var(--teal); }
.b1-model { height: calc(100% - 35px); display: flex; flex-direction: column; gap: 8px; padding: 14px; overflow: auto; border: 1px solid rgba(113,161,157,.2); border-radius: 12px; background: #061318; }
.b1-model.hidden { display: none; }
.b1-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.b1-heading h2 { margin: 3px 0; font-size: 16px; }
.b1-heading span, .b1-note { color: #96b5af; font-size: 11px; line-height: 1.5; }
.b1-note { margin: 0; }
.b1-controls { display: flex; align-items: end; flex-wrap: wrap; gap: 8px; }
.b1-controls label { display: flex; flex-direction: column; gap: 4px; color: #9bb8b4; font-size: 11px; }
.b1-controls select, .b1-controls button { padding: 7px 9px; border: 1px solid #33565c; border-radius: 5px; background: #102a30; color: #d9e7db; }
.b1-controls button { cursor: pointer; }
.gate-importance-report { margin-top: 7px; padding: 8px; border: 1px solid rgba(237,139,101,.3); border-radius: 6px; background: rgba(237,139,101,.06); color: #b9cfca; font-size: 10px; line-height: 1.6; }
.gate-importance-report p { margin: 0 0 7px; color: #8aaba6; }
.gate-importance-report strong { display: block; margin-top: 6px; color: #ffab7f; }
.gate-importance-report div { overflow-wrap: anywhere; }
#b1-path-status { color: #e9c46a; font-size: 11px; }
.b1-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(210px, 270px); gap: 10px; min-height: 360px; flex: 1; }
#b1-svg, #functions-svg { width: 100%; height: 100%; min-height: 360px; background: #091c20; border: 1px solid #24474b; border-radius: 8px; touch-action: none; user-select: none; cursor: grab; }
.function-destination { display: block; width: 100%; text-align: left; margin: 5px 0; padding: 8px; border: 1px solid #33565c; border-radius: 5px; color: #d9e7db; background: #102a30; cursor: pointer; font-size: 11px; }
.function-destination:hover { border-color: #e9bc65; }
#route-extra-svg { position: absolute; inset: 0; width: 100%; height: 100%; background: #07171b; touch-action: none; user-select: none; cursor: grab; }
#route-extra-controls label { display: block; margin-top: 8px; font-size: 11px; color: #9bb8b4; }
#route-extra-controls input { width: 100%; }
.view-tabs { flex-wrap: wrap; }
.b1-details { overflow: auto; padding: 10px; border: 1px solid #24474b; border-radius: 8px; color: #c8d9d2; font-size: 11px; line-height: 1.55; }
.b1-details h3 { margin-top: 0; font-size: 13px; }
.b1-details p { margin: 5px 0; overflow-wrap: anywhere; }
.b1-turns { padding-left: 18px; }
@media (max-width: 800px) { .b1-body { grid-template-columns: 1fr; } .b1-details { max-height: 200px; } }
.workspace-meta { color: #718d8d; font-size: 10px; padding-top: 6px; }
.workspace-meta strong { color: var(--teal-bright); font-weight: 500; }
.graph-card { height: calc(100% - 35px); min-height: 0; border: 1px solid rgba(113, 161, 157, .15); border-radius: 14px; background: radial-gradient(circle at 50% 45%, rgba(20, 53, 56, .25), transparent 55%), #061318; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.graph-card, .graph-card * { user-select: none; -webkit-user-select: none; }
.graph-split { height: 100%; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 12px 12px 38px; }
.graph-pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; border: 1px solid rgba(113, 161, 157, .18); border-radius: 10px; background: rgba(4, 17, 21, .68); overflow: hidden; }
.pane-heading { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px 9px; border-bottom: 1px solid rgba(143, 188, 182, .11); }
.pane-heading .eyebrow { margin-bottom: 4px; }
.pane-heading h2 { margin: 0; color: var(--text); font-size: 14px; letter-spacing: .2px; }
.pane-count { color: #7faeaa; font-size: 9px; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.pane-heading-right { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; min-width: 0; }
.right-layer-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 5px; flex-wrap: wrap; }
.right-layer-pills { display: flex; gap: 3px; flex-wrap: wrap; justify-content: flex-end; }
.right-layer-pill { border: 1px solid rgba(143, 188, 182, .2); border-radius: 5px; background: rgba(17, 46, 53, .55); color: #769b98; cursor: pointer; padding: 4px 6px; font-size: 8px; line-height: 1; }
.right-layer-pill:hover, .right-layer-pill.is-active { color: #071519; background: var(--teal); border-color: var(--teal); }
.right-wall-toggle { border-color: rgba(233, 196, 106, .35); }
.right-wall-toggle.is-active { color: #171407; background: rgba(233, 196, 106, .88); border-color: rgba(233, 196, 106, .95); }
.pane-canvas { flex: 1; min-height: 0; position: relative; overflow: hidden; }
#graph-svg, #right-graph-svg { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
#graph-svg.is-panning, #right-graph-svg.is-panning { cursor: grabbing; }
#right-graph-svg.is-rotating { cursor: grabbing; }
.graph-backdrop { fill: #061318; }
.graph-grid { opacity: .75; }
#graph-svg .graph-grid { fill: url(#left-grid-pattern); }
#right-graph-svg .graph-grid { fill: url(#right-grid-pattern); }
.graph-empty { fill: #789592; font-size: 16px; letter-spacing: 1px; }
.edge-line { stroke: rgba(99, 153, 145, .72); stroke-width: 1.5; opacity: .45; transition: opacity .2s, stroke-width .2s; cursor: pointer; }
#graph-svg .edge-line { stroke: url(#left-edge-gradient); }
#right-graph-svg .right-edge-line { stroke: url(#right-edge-gradient); stroke-width: 1.35; opacity: .7; cursor: pointer; }
.right-edge-line.floor-b2 { stroke: rgba(237, 139, 101, .72); }
.right-edge-line.floor-b1 { stroke: rgba(76, 159, 112, .78); }
.right-edge-line.floor-ground { stroke: rgba(233, 196, 106, .78); }
#right-graph-svg .right-edge-line.linked-highlight { stroke: #f6e6ae !important; stroke-width: 3.6px; opacity: 1; filter: url(#right-glow); }
#right-graph-svg .right-edge-line.linked-highlight.vertical { stroke: #f6e6ae !important; stroke-dasharray: 8 4; }
#graph-svg .edge-line.gate-important-edge, #right-graph-svg .right-edge-line.gate-important-edge { stroke: #ff895f !important; stroke-width: 4px !important; opacity: 1 !important; filter: none; }
#graph-svg .node-circle.gate-important-node, #right-graph-svg .node-circle.gate-important-node { fill: #ff895f !important; stroke: #fff0b5 !important; stroke-width: 3px !important; opacity: 1 !important; }
.legend-important { width: 11px; height: 4px; display: inline-block; background: #ff895f; border-radius: 2px; }
.edge-line.vertical { stroke: var(--gold); stroke-dasharray: 5 4; opacity: .65; }
.edge-line.fare-boundary-candidate { stroke: #c6a6ff !important; stroke-width: 2.6px; stroke-dasharray: 3 4; opacity: .95; }
.right-edge-line.fare-boundary-candidate { stroke: #c6a6ff !important; stroke-width: 2.4px; stroke-dasharray: 3 4; opacity: .95; }
.edge-line.is-dim { opacity: .06; }
.edge-line.is-highlight { opacity: 1; stroke-width: 3; filter: url(#left-glow); }
.edge-line.structural-bridge-edge { stroke: var(--coral) !important; stroke-dasharray: 7 4; opacity: .95; }
#graph-svg .tree-edge { stroke: rgba(126, 177, 166, .9); stroke-width: 2.1px; opacity: .9; }
#graph-svg .tree-edge.vertical { stroke: var(--gold); stroke-width: 2.2px; stroke-dasharray: 7 4; opacity: .95; }
#graph-svg .tree-edge.structural-bridge-edge { stroke: var(--coral) !important; stroke-width: 3.4px; stroke-dasharray: 8 4; opacity: 1; }
#graph-svg .spt-context-edge { stroke: rgba(119, 155, 151, .28); stroke-width: .9px; opacity: .18; pointer-events: none; }
#graph-svg .spt-context-edge.vertical { stroke: rgba(216, 189, 116, .42); stroke-dasharray: 4 4; opacity: .24; }
#graph-svg .spt-context-edge { pointer-events: stroke; cursor: pointer; }
#graph-svg .spt-tree-edge { stroke: rgba(126, 177, 166, .98); stroke-width: 2.4px; opacity: .96; }
#graph-svg .spt-tree-edge.vertical { stroke: var(--gold); stroke-width: 2.6px; stroke-dasharray: 7 4; opacity: 1; }
#graph-svg .tree-edge.spt-path-edge { stroke: #f6e6ae !important; stroke-width: 4px; opacity: 1; filter: url(#left-glow); }
#graph-svg .tree-edge.spt-path-edge.vertical { stroke: #f6e6ae !important; stroke-dasharray: 8 4; }
#graph-svg .edge-line.is-highlight { stroke: #f6e6ae !important; stroke-width: 3.8px; opacity: 1; filter: url(#left-glow); }
#graph-svg .edge-line.is-highlight.vertical { stroke: #f6e6ae !important; stroke-dasharray: 8 4; }
#graph-svg .tree-edge.spt-path-edge.is-highlight { stroke: #f6e6ae !important; stroke-width: 4px; opacity: 1; filter: url(#left-glow); }
#graph-svg .spt-context-edge.is-highlight { stroke: #f6e6ae !important; stroke-width: 3px; opacity: 1; filter: url(#left-glow); }
#graph-svg .gate-path-edge { stroke: rgba(126, 177, 166, .96); stroke-width: 2.15px; opacity: .96; }
#graph-svg .gate-path-edge.vertical { stroke: var(--gold); stroke-dasharray: 7 4; }
#graph-svg .gate-selected-path-edge { stroke: #f6e6ae !important; stroke-width: 4px; opacity: 1; filter: url(#left-glow); }
#graph-svg .gate-selected-path-edge.vertical { stroke-dasharray: 8 4; }
#graph-svg .exit-start-path-edge { stroke: rgba(126, 177, 166, .96); stroke-width: 2.15px; opacity: .96; }
#graph-svg .exit-start-path-edge.vertical { stroke: var(--gold); stroke-dasharray: 7 4; }
#graph-svg .exit-start-selected-path-edge { stroke: #f6e6ae !important; stroke-width: 4px; opacity: 1; filter: url(#left-glow); }
#graph-svg .exit-start-selected-path-edge.vertical { stroke-dasharray: 8 4; }
#right-graph-svg .right-edge-line.linked-highlight { stroke: #f6e6ae !important; stroke-width: 3.6px; opacity: 1; filter: url(#right-glow); }
#right-graph-svg .right-edge-line.linked-highlight.vertical { stroke: #f6e6ae !important; stroke-dasharray: 8 4; }
.exploded-floor-label { font-size: 13px; font-weight: 800; letter-spacing: 1px; paint-order: stroke; stroke: #061318; stroke-width: 4px; pointer-events: none; }
.exploded-floor-label.floor-b2 { fill: var(--coral); }
.exploded-floor-label.floor-b1 { fill: var(--teal-bright); }
.exploded-floor-label.floor-ground { fill: var(--gold); }
.exploded-floor-slab { stroke-width: 1.4; opacity: .5; pointer-events: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.exploded-floor-slab.floor-b2 { fill: rgba(237, 139, 101, .08); stroke: rgba(237, 139, 101, .58); }
.exploded-floor-slab.floor-b1 { fill: rgba(76, 159, 112, .08); stroke: rgba(122, 182, 171, .58); }
.exploded-floor-slab.floor-ground { fill: rgba(233, 196, 106, .08); stroke: rgba(233, 196, 106, .58); }
.exploded-floor-leader { stroke-width: 1; stroke-dasharray: 3 3; opacity: .75; pointer-events: none; vector-effect: non-scaling-stroke; }
.exploded-floor-leader.floor-b2 { stroke: var(--coral); }
.exploded-floor-leader.floor-b1 { stroke: var(--teal-bright); }
.exploded-floor-leader.floor-ground { stroke: var(--gold); }
.right-b1-wall-face { pointer-events: none; stroke-width: .45px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.right-b1-wall-face.wall-top { opacity: .4; }
.right-b1-wall-face.wall-side { opacity: .24; }
.node-group { cursor: pointer; }
.node-circle { stroke: var(--type-stroke, rgba(211, 238, 220, .28)); stroke-width: 1.5; transition: .15s ease; }
.graph-pane-left .node-group:hover .node-circle, .graph-pane-left .node-circle.is-selected { stroke: #f6e6ae; stroke-width: 3; filter: url(#left-glow); }
.graph-pane-left .spt-root-node { stroke: #f6e6ae; stroke-width: 2; stroke-dasharray: 2 2; opacity: .95; }
.graph-pane-left .gate-root-node { stroke: #f6e6ae; stroke-width: 2.4; stroke-dasharray: 3 2; opacity: 1; }
.graph-pane-left .gate-exit-node { stroke: #ed876f; stroke-width: 2; opacity: .98; }
.graph-pane-left .exit-start-root-node { stroke: #ed876f; stroke-width: 2.6; stroke-dasharray: 3 2; opacity: 1; }
.graph-pane-left .exit-start-target-node { stroke: #f6e6ae; stroke-width: 2.2; opacity: .98; }
.graph-pane-left .depth-root-node { stroke: #c6a6ff; stroke-width: 2.4; stroke-dasharray: 3 2; opacity: .98; pointer-events: none; }
.wall-top { fill: rgba(219, 206, 158, .86); stroke: rgba(247, 232, 181, .82); stroke-width: 1; stroke-linejoin: round; }
.wall-side { stroke: rgba(65, 102, 108, .85); stroke-width: 1; stroke-linejoin: round; }
.wall-side-a { fill: rgba(85, 128, 132, .78); }
.wall-side-b { fill: rgba(51, 82, 89, .86); }
.wall-type-legend { gap: 7px; }
.wall-type-legend-item { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.wall-type-swatch { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.wall-annotation-panel { fill: rgba(7, 22, 27, .9); stroke: rgba(219, 206, 158, .42); stroke-width: 1; pointer-events: none; }
.wall-annotation-title { fill: #e7d48d; font-size: 11px; font-weight: 800; letter-spacing: .35px; pointer-events: none; }
.wall-annotation-text { fill: #b6c8be; font-size: 9px; pointer-events: none; }
.wall-annotation-note { fill: #78a9a1; font-size: 8px; pointer-events: none; }
.graph-pane-left .node-circle.structure-bridge-node { stroke: var(--coral); stroke-width: 2.3; }
.graph-pane-left .node-circle.structure-junction { stroke: var(--teal-bright); stroke-width: 2; }
.graph-pane-left .node-circle.structure-endpoint { stroke-dasharray: 2 2; }
.right-node-circle { stroke: var(--type-stroke, rgba(211, 238, 220, .42)); stroke-width: 1.7; }
.graph-pane-right .node-group:hover .right-node-circle, .graph-pane-right .right-node-circle.is-selected { stroke: #f6e6ae; stroke-width: 2.4; filter: url(#right-glow); }
.node-circle.is-dim { opacity: .17; }
.node-label { fill: #c4d3ce; font-size: 9px; font-weight: 700; pointer-events: none; paint-order: stroke; stroke: #061318; stroke-width: 3px; stroke-linejoin: round; }
.node-label.is-dim { opacity: .15; }
.node-tooltip { position: absolute; display: none; min-width: 172px; max-width: 220px; padding: 10px 11px; border: 1px solid rgba(155, 209, 191, .35); border-radius: 8px; background: rgba(7, 22, 27, .96); color: #bcd1c9; box-shadow: 0 14px 35px rgba(0, 0, 0, .35); pointer-events: none; z-index: 2; font-size: 10px; line-height: 1.55; }
.node-tooltip.is-visible { display: block; }
.node-tooltip strong { display: block; color: var(--gold); font-size: 13px; margin-bottom: 3px; }
.node-tooltip span { display: block; color: #8aa49e; }
.pane-caption { flex: 0 0 auto; min-height: 32px; display: flex; align-items: center; flex-wrap: wrap; gap: 7px 13px; padding: 7px 12px 8px; border-top: 1px solid rgba(143, 188, 182, .1); color: #6c8685; font-size: 9px; pointer-events: none; }
.split-caption { position: absolute; left: 18px; right: 18px; bottom: 10px; display: flex; justify-content: space-between; gap: 12px; color: #6c8685; font-size: 9px; pointer-events: none; }
.legend { display: inline-flex; align-items: center; gap: 5px; }
.legend-node { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); display: inline-block; }
.legend-vertical { width: 15px; border-top: 2px dashed var(--gold); display: inline-block; }
.mode-legend i { width: 15px; border-top: 2px solid var(--teal); display: inline-block; }
.legend-floor-b2, .legend-floor-b1, .legend-floor-ground { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.legend-floor-b2 { background: #ed8b65; }
.legend-floor-b1 { background: #4c9f70; }
.legend-floor-ground { background: #e9c46a; }
.legend-bridge { width: 15px; border-top: 3px dashed var(--coral); display: inline-block; }
.legend-root { width: 10px; height: 10px; border: 2px dashed var(--gold); border-radius: 50%; display: inline-block; }
.legend-depth-root { width: 10px; height: 10px; border: 2px dashed #c6a6ff; border-radius: 50%; display: inline-block; }
.legend-wall { width: 13px; height: 9px; border: 1px solid #e7d48d; background: rgba(85, 128, 132, .78); display: inline-block; }
.legend-fare-boundary { width: 16px; border-top: 2px dashed #c6a6ff; display: inline-block; }
.legend-spt { width: 17px; border-top: 3px solid var(--teal-bright); display: inline-block; }
.legend-spt-path { width: 17px; border-top: 3px solid #f6e6ae; display: inline-block; }
.legend-exit { width: 8px; height: 8px; border: 2px solid #ed876f; border-radius: 50%; display: inline-block; }
.tree-note { flex: 1 0 100%; color: #89a09f; line-height: 1.45; padding-top: 2px; border-top: 1px solid rgba(143, 188, 182, .08); }
.spt-target-block select { margin-top: 0; }
.structure-annotation-panel { fill: rgba(7, 22, 27, .9); stroke: rgba(155, 209, 191, .3); stroke-width: 1; pointer-events: none; }
.structure-annotation-title { fill: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: .3px; pointer-events: none; }
.structure-annotation-text { fill: #a9c0b7; font-size: 9px; pointer-events: none; }
.structure-annotation-filter { fill: var(--teal-bright); font-size: 9px; pointer-events: none; }
.legend-type-hall, .legend-type-default { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.legend-type-hall { background: #d8bd74; }
.legend-type-default { background: #5f9d91; }
.type-legend { gap: 8px; }
.type-legend-item { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.legend-type-swatch { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.canvas-hint { color: #4f6a6c; }
.canvas-tools { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 5px; z-index: 2; }
.canvas-tools button { width: 27px; height: 27px; border: 1px solid var(--line); border-radius: 6px; background: rgba(11, 31, 37, .9); color: var(--muted); cursor: pointer; font-size: 14px; }
.canvas-tools button:hover { color: var(--text); border-color: var(--teal); }
.content-card { height: calc(100% - 35px); min-height: 0; border: 1px solid rgba(113, 161, 157, .15); border-radius: 14px; background: rgba(7, 22, 27, .94); box-shadow: var(--shadow); padding: 26px; overflow: hidden; }
.hidden { display: none !important; }
.content-card-heading { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid var(--line); padding-bottom: 18px; }
.eyebrow { display: block; color: var(--teal); font-size: 9px; font-weight: 800; letter-spacing: 1.5px; margin-bottom: 8px; }
.content-card h2 { margin: 0; font-size: 24px; letter-spacing: -.8px; }
.count-chip { color: var(--gold); border: 1px solid rgba(216, 189, 116, .28); border-radius: 20px; padding: 6px 10px; font-size: 10px; }
.metrics-table-wrap { height: calc(100% - 80px); overflow: auto; margin-top: 16px; }
.metrics-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.metrics-table th { text-align: left; color: #668182; font-weight: 500; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.metrics-table td { padding: 12px; border-bottom: 1px solid rgba(143, 188, 182, .08); color: #afc1bb; }
.metrics-table tbody tr { cursor: pointer; transition: background .15s; }
.metrics-table tbody tr:hover { background: rgba(122, 182, 171, .09); }
.metrics-table td:first-child { color: #5e797b; }
.table-node-id { color: var(--teal-bright); font-weight: 800; }
.selection-content { padding-top: 24px; }
.empty-selection { border: 1px dashed var(--line-strong); border-radius: 10px; padding: 40px; text-align: center; color: var(--muted); font-size: 12px; }
.selection-hero { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 19px; }
.selection-hero h3 { margin: 0; color: var(--teal-bright); font-size: 31px; }
.selection-hero small { color: var(--muted); }
.selection-value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 20px 0; }
.selection-value { background: rgba(19, 54, 58, .33); border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
.selection-value span { display: block; color: var(--muted); font-size: 9px; }
.selection-value strong { display: block; color: var(--text); font-size: 15px; margin-top: 8px; }
.neighbor-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.neighbor-chip { border: 1px solid var(--line); color: var(--teal); background: rgba(17, 46, 53, .62); border-radius: 14px; padding: 6px 9px; font-size: 10px; cursor: pointer; }
.neighbor-chip:hover { background: var(--teal); color: var(--bg); }

.selection-coordinate { color: #8aa49e; font-size: 10px; margin: 13px 0 21px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 15px); opacity: 0; pointer-events: none; background: #16363a; color: var(--text); border: 1px solid rgba(155, 209, 191, .35); box-shadow: var(--shadow); border-radius: 7px; padding: 10px 15px; font-size: 11px; transition: .2s; z-index: 5; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1180px) {
  .app-shell { grid-template-columns: 235px minmax(0, 1fr); }
  .sidebar { padding-left: 16px; padding-right: 16px; }
  .query-comment { display: none; }
}
@media (max-width: 900px) {
  body { overflow: auto; }
  .app-shell { display: block; }
  .sidebar { min-height: auto; }
  .sidebar { border-right: 0; border-bottom: 1px solid var(--line); }
  .sidebar-footer { margin-top: 25px; }
  .graph-card { height: auto; min-height: 900px; }
  .content-card { height: 610px; }
  .graph-split { grid-template-columns: 1fr; grid-template-rows: minmax(410px, 1fr) minmax(410px, 1fr); overflow: auto; }
  .main-panel { min-height: 660px; }
}