/* ============================================================
     TOKENS - Institutional Modern
     ============================================================ */
  .esv2-app{
    --bg:#EDF1F6;
    --surface:#FFFFFF;
    --surface-2:#F6F8FB;
    --ink:#101B2C;
    --ink-soft:#54627A;
    --ink-faint:#8D99AC;
    --line:#E1E7EE;
    --line-strong:#C7D1DC;
    --navy:#0E2A47;
    --navy-2:#123655;
    --brass:#A9781F;
    --brass-soft:#F1E4C4;
    --water:#1D6FA5;
    --water-track:#DCEAF4;
    --dry:#93602C;
    --dry-track:#EFE1CC;
    --noreport:#97A2AF;
    --noreport-track:#E9ECF0;
    --alert:#B23A26;
    --structure:#1E7A4C;
    --selected:#0B3D66;
    --focus:#1D6FA5;
    --lining-done:#C0392B;
    --lining-pending:#94A0AC;
    --font-ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    --font-mono:ui-monospace,'SFMono-Regular','JetBrains Mono','Roboto Mono',Menlo,Consolas,monospace;
  }
  @media (prefers-color-scheme: dark){
    .esv2-app:not([data-theme="light"]){
      --bg:#0A121F; --surface:#101A2B; --surface-2:#0C1626;
      --ink:#E7ECF2; --ink-soft:#9AA8BC; --ink-faint:#5E6B80;
      --line:#1E2C40; --line-strong:#2A3B54;
      --navy:#060D18; --navy-2:#0B1626;
      --brass:#D4A94A; --brass-soft:#2A2213;
      --water:#4FA9E0; --water-track:#16324A;
      --dry:#C99257; --dry-track:#3A2A16;
      --noreport:#6E7A8C; --noreport-track:#1B2330;
      --alert:#E2604A; --structure:#48B37E; --selected:#7EC1F5; --focus:#4FA9E0;
      --lining-done:#E2604A; --lining-pending:#6E7A8C;
    }
  }
  .esv2-app[data-theme="dark"]{
    --bg:#0A121F; --surface:#101A2B; --surface-2:#0C1626;
    --ink:#E7ECF2; --ink-soft:#9AA8BC; --ink-faint:#5E6B80;
    --line:#1E2C40; --line-strong:#2A3B54;
    --navy:#060D18; --navy-2:#0B1626;
    --brass:#D4A94A; --brass-soft:#2A2213;
    --water:#4FA9E0; --water-track:#16324A;
    --dry:#C99257; --dry-track:#3A2A16;
    --noreport:#6E7A8C; --noreport-track:#1B2330;
    --alert:#E2604A; --structure:#48B37E; --selected:#7EC1F5; --focus:#4FA9E0;
    --lining-done:#E2604A; --lining-pending:#6E7A8C;
  }

  *{box-sizing:border-box;}
  /* html/body height skipped — lives inside WRD theme */
  .esv2-app{
    color:var(--ink);
    font-family:var(--font-ui); font-size:13px; line-height:1.45;
    -webkit-font-smoothing:antialiased;
  }
  .esv2-app button, .esv2-app input, .esv2-app select{font-family:inherit; font-size:inherit; color:inherit;}
  .esv2-app button{cursor:pointer;}
  .esv2-app ::selection{background:var(--brass-soft); color:var(--ink);}
  .esv2-app :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:3px;}
  .num{font-family:var(--font-mono); font-variant-numeric:tabular-nums;}

  .app{
    min-height:100vh; display:flex; flex-direction:column;
    max-width:1680px; margin:0 auto;
    background:var(--bg);
  }

  /* ---------------- Toolbar ---------------- */
  .toolbar{
    display:flex; align-items:flex-end; gap:18px; flex-wrap:wrap;
    background:var(--surface-2); border-bottom:1px solid var(--line);
    padding:10px 20px; flex:0 0 auto;
  }
  .tb-group{display:flex; flex-direction:column; gap:4px; min-width:150px;}
  .tb-group label{
    font-size:10px; text-transform:uppercase; letter-spacing:.06em;
    color:var(--ink-faint); font-weight:600;
  }
  .tb-group select, .tb-group input[type="date"], .tb-group input[type="text"]{
    background:var(--surface); border:1px solid var(--line-strong);
    border-radius:5px; padding:6px 8px; height:32px; min-width:170px;
  }
  .tb-group select:hover, .tb-group input:hover{border-color:var(--ink-faint);}
  .search-group{position:relative; min-width:210px;}
  .search-results{
    position:absolute; top:100%; left:0; margin-top:4px; width:100%;
    background:var(--surface); border:1px solid var(--line-strong); border-radius:6px;
    max-height:220px; overflow-y:auto; display:none; z-index:40;
  }
  .search-results.open{display:block;}
  .search-result{
    padding:7px 10px; font-size:12px; cursor:pointer; display:flex; justify-content:space-between; gap:8px;
    border-bottom:1px solid var(--line);
  }
  .search-result:last-child{border-bottom:none;}
  .search-result:hover, .search-result.active{background:var(--surface-2);}
  .search-result .sr-code{color:var(--ink-faint); font-family:var(--font-mono); font-size:10.5px;}
  .tb-spacer{flex:1 1 auto;}

  .view-tabs{display:flex; align-self:flex-end; border:1px solid var(--line-strong); border-radius:6px; overflow:hidden;}
  .view-tab{
    background:var(--surface); border:none; padding:7px 14px; font-size:12px; font-weight:600;
    color:var(--ink-soft); border-right:1px solid var(--line-strong);
  }
  .view-tab:last-child{border-right:none;}
  .view-tab.active{background:var(--water-track); color:var(--ink);}

  .tb-actions{display:flex; align-self:flex-end; gap:8px;}
  .icon-btn{
    background:var(--surface); border:1px solid var(--line-strong); border-radius:6px;
    padding:7px 12px; font-size:12px; font-weight:600; color:var(--ink);
    display:flex; align-items:center; gap:6px;
  }
  .icon-btn:hover{border-color:var(--water); color:var(--water);}
  .icon-btn.primary{background:var(--navy); border-color:var(--navy); color:#fff;}
  .icon-btn.primary:hover{background:var(--navy-2); color:#fff;}
  .icon-btn:disabled{opacity:.4; cursor:not-allowed;}
  .icon-btn:disabled:hover{border-color:var(--line-strong); color:var(--ink);}

  /* ---------------- Stage ---------------- */
  .stage{flex:1 1 auto; display:flex; flex-direction:column; min-height:0; position:relative;}
  .canvas-region{flex:1 1 auto; display:flex; flex-direction:column; min-height:0; position:relative;}
  .hidden{display:none !important;}

  .canvas-toolbar{
    display:flex; align-items:center; justify-content:space-between;
    padding:8px 20px; border-bottom:1px solid var(--line); background:var(--surface);
    flex:0 0 auto; gap:14px; flex-wrap:wrap;
  }
  .zoom-controls{display:flex; align-items:center; gap:6px;}
  .zoom-controls button{
    width:26px; height:26px; border-radius:5px; border:1px solid var(--line-strong);
    background:var(--surface); font-size:14px; line-height:1;
  }
  .zoom-controls button:hover{border-color:var(--water); color:var(--water);}
  #zoomLabel{font-family:var(--font-mono); font-size:11.5px; width:42px; text-align:center; color:var(--ink-soft);}
  #zoomReset{width:auto; padding:0 10px; font-size:11px; font-family:var(--font-ui); font-weight:600;}
  .size-slider{display:flex; align-items:center; gap:8px; margin-left:6px;}
  .size-slider span{font-size:10.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em;}
  .size-slider input[type="range"]{width:120px; accent-color:var(--water);}

  .scale-note{font-size:10.5px; color:var(--ink-faint); font-style:italic; border-left:1px solid var(--line-strong); padding-left:14px;}
  .col-toggles{display:flex; gap:14px; flex-wrap:wrap;}
  .col-toggles label{display:flex; align-items:center; gap:5px; font-size:11.5px; color:var(--ink-soft);}
  .col-toggles input{accent-color:var(--water);}

  /* ---------------- Fallback banner (BR-09) ---------------- */
  .fallback-banner{
    display:flex; align-items:center; gap:10px; padding:9px 20px;
    background:var(--brass-soft); border-bottom:1px solid var(--brass);
    font-size:12.5px; color:var(--ink); flex:0 0 auto;
  }
  .fallback-banner.hidden{display:none;}
  .fallback-banner .dot{width:7px; height:7px; border-radius:50%; background:var(--brass); flex:0 0 auto;}
  .fallback-banner b{font-family:var(--font-mono);}
  .fallback-banner .fb-spacer{flex:1;}
  .fallback-banner button{
    background:transparent; border:1px solid var(--brass); color:var(--brass);
    border-radius:5px; padding:4px 10px; font-size:11px; font-weight:600;
  }

  .canvas-scroll{
    flex:1 1 auto; overflow:auto; position:relative; background:var(--surface);
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size:28px 28px; background-position:-1px -1px;
    cursor:grab;
  }
  .canvas-scroll.dragging{cursor:grabbing;}
  #schematicSvg{display:block; user-select:none;}

  .legend-chip{
    position:absolute; top:14px; right:14px; z-index:20;
    background:var(--surface); border:1px solid var(--line-strong); border-radius:8px;
    padding:12px 14px; min-width:200px;
    font-size:11.5px;
  }
  .legend-chip h4{
    margin:0 0 8px; font-size:10px; text-transform:uppercase; letter-spacing:.07em;
    color:var(--ink-faint); font-weight:700;
  }
  .legend-sub{font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); font-weight:700; margin:8px 0 2px; padding-top:6px; border-top:1px solid var(--line);}
  .legend-row{display:flex; align-items:center; gap:8px; padding:3px 0;}
  .legend-icon{width:14px; height:14px; flex:0 0 auto;}
  .legend-swatch{width:20px; height:8px; border-radius:2px; flex:0 0 auto;}
  .legend-swatch.dot{width:10px; height:10px; border-radius:50%;}
  .legend-row span.lbl{color:var(--ink-soft);}
  .legend-chip.hidden{display:none;}

  .tooltip{
    position:fixed; z-index:100; pointer-events:none;
    background:var(--navy); color:#EAF1F8; border-radius:6px; padding:9px 11px;
    font-size:11.5px; max-width:230px; opacity:0; transform:translateY(4px);
    transition:opacity .1s ease, transform .1s ease;
  }
  .tooltip.show{opacity:1; transform:translateY(0);}
  .tooltip .tt-title{font-weight:700; margin-bottom:4px; font-size:12px;}
  .tooltip .tt-row{display:flex; justify-content:space-between; gap:12px; color:#C4D4E4;}
  .tooltip .tt-row b{color:#fff; font-family:var(--font-mono); font-weight:600;}

  /* ---------------- SVG canal styling ---------------- */
  #layer-labels, #layer-grid{pointer-events:none;}
  .canal-hit{fill:none; stroke:transparent; stroke-width:16; cursor:pointer;}
  /* Butt caps, not round - every canal is a flat-ended engineering bar
     sharing its exact centerline with its parent at a junction (see
     drawLiningRails() and the junction notes in buildSchematic()). A
     round cap would paint a small semicircular "cap" past each true
     endpoint, which is exactly the rounded/blobby look the redesign
     moved away from. */
  .canal-track{fill:none; stroke-linecap:butt;}
  .canal-fill{fill:none; stroke-linecap:butt;}
  .canal-meniscus{stroke:var(--selected); stroke-width:2;}
  .canal-group.selected .sel-ring{opacity:1;}
  .sel-ring{fill:none; stroke:var(--selected); stroke-width:1.4; stroke-dasharray:2 2; opacity:0;}
  .canal-label{font-family:var(--font-ui); font-weight:600; fill:var(--ink); font-size:11.5px;}
  .canal-meta{font-family:var(--font-mono); fill:var(--ink-faint); font-size:9.5px;}
  /* The trunk's length label sits inside its own (thick, always-blue) bar,
     not beside it like every other canal's - var(--ink-faint) reads as a
     near-invisible smudge on top of var(--water). White on the trunk's
     solid fill is legible in both themes without needing a second colour
     token, since the trunk is always rendered in the one "flowing" blue. */
  .canal-labelgroup[data-role="trunk"] .canal-meta{fill:#fff; font-weight:700; font-size:10px;}
  .canal-code{font-family:var(--font-mono); font-weight:600; font-size:9px; fill:var(--ink-soft); letter-spacing:.02em;}
  /* A thin dashed line back to a label's own geometry, for whenever the
     settled position lands far enough away that the text could read as
     belonging to a different canal. First used for the Lalbakiya feeder
     stub (see the feeder-stub block above); now shared with any regular
     canal code chip that needs the same treatment (see buildSchematic's
     LEADER_MIN_DIST check). */
  .code-leader{fill:none; stroke:var(--ink-faint); stroke-width:1; stroke-dasharray:2 2; opacity:0.5;}
  .canal-labelgroup[data-role="trunk"] .canal-label{opacity:1;}
  .canal-labelgroup[data-role="branch"] .canal-label,
  .canal-labelgroup[data-role="comb"] .canal-label,
  .canal-labelgroup[data-role="branch"] .label-detail,
  .canal-labelgroup[data-role="comb"] .label-detail{opacity:0; transition:opacity .12s ease;}
  .canal-labelgroup[data-role="comb"] .canal-label{font-size:9.5px; font-weight:500; fill:var(--ink-soft);}
  /* Mouse hover never reveals the on-canvas name/length/offtake block -
     only .show (click-selection) and .show-focus (keyboard tab, which has
     no tooltip to fall back on) do. A plain mouse hover already gets the
     same detail from the floating tooltip; showing it a second time on
     the canvas, right next to the popup showing it a first time, is
     exactly the duplicate-text clutter this was built to avoid - for
     every canal, branch and distributary alike, not a per-node patch. */
  .canal-labelgroup.show .canal-label,
  .canal-labelgroup.show .label-detail,
  .canal-labelgroup.show-focus .canal-label,
  .canal-labelgroup.show-focus .label-detail{opacity:1;}
  /* The code chip sits right where the full name/length/offtake block
     lands once revealed. Hide it for exactly as long as that block is up
     (selection or keyboard focus - hover no longer reveals it at all). */
  .canal-labelgroup.show .canal-code,
  .canal-labelgroup.show-focus .canal-code{opacity:0; transition:opacity .12s ease;}
  .col-hide-length .canal-meta.meta-length{display:none;}
  .col-hide-offtake .canal-meta.meta-offtake{display:none;}
  /* Whatever text the floating tooltip is currently sitting on top of -
     any canal's code chip, any currently-revealed name/length/offtake
     block, not just the hovered one's own - see updateOcclusion().
     !important because this must win over the .show/.show-focus rules
     above. */
  .tooltip-occluded{opacity:0 !important;}

  .structure-icon{fill:var(--structure); stroke:var(--surface); stroke-width:1.2; cursor:pointer;}
  .structure-icon:hover{fill:var(--navy);}
  .river-bar{fill:var(--water); opacity:.9;}
  /* settleStructurePositions() (section 3) moves every structure icon
     clear of its own canal body - this dot+leader is what still shows
     exactly which point on the canal it marks, same visual language as
     the code-leader class already used for label callouts. */
  .structure-anchor-dot{fill:var(--structure); opacity:.6;}
  .structure-leader{stroke:var(--structure); opacity:.45;}

  /* ---------------- Canal lining outline (independent of water reach) ----------------
     Two thin rails (not a wide stroke), one on each long edge of the
     canal, offset just outside the track/fill bar's own width - never
     a filled shape, never wrapped around a junction. See
     drawLiningRails() in buildSchematic(): each canal draws only its
     own straight rails along its own centerline, trimmed at the start
     so they never cross over a parent canal's body; the "welded"
     T-junction look comes from later-drawn children painting their
     own opaque track/fill on top of the parent at the shared
     centerline point, not from any rail geometry. Butt-capped, never
     animates - lining doesn't change while you're looking at the
     diagram. */
  .canal-outline{fill:none; stroke-linecap:butt;}

  /* ---------------- Water flow marker (SCADA telltale) ----------------
     Exactly one small bubble + arrow per flowing/partial canal, riding
     together via a single animateMotion (see animateFlow()) - the
     canal body itself (track/fill/outline above) is a plain, stable,
     solid-colour fill with no animation of its own; this marker is
     the only thing that moves. pointer-events:none so it never steals
     the canal's own hover/click target. */
  .flow-marker{pointer-events:none;}
  .flow-marker-dot{fill:#fff; stroke:var(--navy); stroke-width:1; opacity:.95;}
  .flow-marker-arrow{fill:none; stroke:var(--navy); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; opacity:.85;}
  @media (prefers-color-scheme: dark){
    .esv2-app:not([data-theme="light"]) .flow-marker-dot{stroke:var(--ink);}
    .esv2-app:not([data-theme="light"]) .flow-marker-arrow{stroke:var(--ink);}
  }
  .esv2-app[data-theme="dark"] .flow-marker-dot{stroke:var(--ink);}
  .esv2-app[data-theme="dark"] .flow-marker-arrow{stroke:var(--ink);}

  /* Selected canal breathes gently rather than sitting at a flat, static
     opacity - a soft, professional pulse, not a flashing alert. Kept
     behind prefers-reduced-motion like every other animated effect here. */
  .canal-group.selected .sel-ring{opacity:1;}
  @media (prefers-reduced-motion: no-preference){
    .canal-group.selected .sel-ring{animation:selPulse 2.6s ease-in-out infinite;}
  }
  @keyframes selPulse{ 0%,100%{opacity:.4;} 50%{opacity:1;} }

  /* ---------------- Info panel ---------------- */
  .info-panel{
    flex:0 0 auto; background:var(--surface); border-top:1px solid var(--line-strong);
    max-height:64px; overflow:hidden; transition:max-height .18s ease;
  }
  .info-panel.expanded{max-height:280px;}
  .info-panel-handle{
    width:100%; text-align:left; background:var(--surface-2); border:none;
    padding:10px 20px; font-size:11.5px; font-weight:700; color:var(--ink-soft);
    text-transform:uppercase; letter-spacing:.05em; display:flex; justify-content:space-between; align-items:center;
    border-bottom:1px solid var(--line);
  }
  .info-panel-handle .chev{transition:transform .15s ease; color:var(--ink-faint);}
  .info-panel.expanded .info-panel-handle .chev{transform:rotate(180deg);}
  .info-panel-body{padding:16px 20px; display:flex; gap:32px; flex-wrap:wrap;}
  .info-empty{color:var(--ink-faint); font-size:12px; padding:2px 0;}
  .info-block{min-width:150px;}
  .info-block h5{
    margin:0 0 8px; font-size:9.5px; text-transform:uppercase; letter-spacing:.06em;
    color:var(--ink-faint); font-weight:700;
  }
  .info-title{font-size:16px; font-weight:700; margin:0 0 3px;}
  .info-code{font-family:var(--font-mono); font-size:11px; color:var(--ink-faint);}
  .info-fields{display:grid; grid-template-columns:auto auto; gap:4px 16px; font-size:12px;}
  .info-fields dt{color:var(--ink-faint);}
  .info-fields dd{margin:0; font-family:var(--font-mono); font-weight:600;}
  .coverage-bar{width:150px; height:8px; border-radius:4px; background:var(--water-track); overflow:hidden; margin-top:4px;}
  .coverage-bar > span{display:block; height:100%; background:var(--water);}
  .lining-bar{width:150px; height:8px; border-radius:4px; background:var(--lining-pending); overflow:hidden; margin-top:4px;}
  .lining-bar > span{display:block; height:100%; background:var(--lining-done);}
  .status-pill{
    display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:12px;
    font-size:10.5px; font-weight:700; letter-spacing:.03em;
  }
  .status-pill .dot{width:7px; height:7px; border-radius:50%;}
  .status-FLOWING{background:var(--water-track); color:var(--water);}
  .status-FLOWING .dot{background:var(--water);}
  .status-PARTIAL{background:var(--water-track); color:var(--water);}
  .status-PARTIAL .dot{background:var(--water);}
  .status-DRY{background:var(--dry-track); color:var(--dry);}
  .status-DRY .dot{background:var(--dry);}
  .status-NO_REPORT{background:var(--noreport-track); color:var(--noreport);}
  .status-NO_REPORT .dot{background:var(--noreport);}
  .journey{display:flex; align-items:center; gap:4px; overflow-x:auto; padding-bottom:4px; max-width:520px;}
  .journey-node{
    display:flex; align-items:center; gap:5px; padding:5px 9px; border-radius:6px;
    background:var(--surface-2); border:1px solid var(--line); font-size:11px; white-space:nowrap; cursor:pointer;
  }
  .journey-node:hover{border-color:var(--water);}
  .journey-node .dot{width:6px; height:6px; border-radius:50%;}
  .journey-arrow{color:var(--ink-faint); font-size:11px;}
  .structures-list{display:flex; flex-direction:column; gap:5px; font-size:11.5px;}
  .structures-list li{display:flex; align-items:center; gap:6px; list-style:none;}
  .structures-list .sdot{width:8px; height:8px; border-radius:2px; background:var(--structure); flex:0 0 auto;}

  /* ---------------- Data view ---------------- */
  .data-region{flex:1 1 auto; overflow:auto; padding:18px 20px; background:var(--surface);}
  .data-region table{border-collapse:collapse; width:100%; font-size:12px;}
  .data-region thead th{
    position:sticky; top:0; background:var(--surface-2); text-align:left;
    padding:9px 12px; font-size:10px; text-transform:uppercase; letter-spacing:.05em;
    color:var(--ink-faint); border-bottom:1px solid var(--line-strong); cursor:pointer; white-space:nowrap;
  }
  .data-region thead th:hover{color:var(--water);}
  .data-region thead th.sorted::after{content:" \25be"; font-size:9px;}
  .data-region thead th.sorted.asc::after{content:" \25b4";}
  .data-region tbody td{padding:8px 12px; border-bottom:1px solid var(--line); font-family:var(--font-mono);}
  .data-region tbody td.name-cell{font-family:var(--font-ui); font-weight:600;}
  .data-region tbody td.name-cell .parent{display:block; font-family:var(--font-mono); font-weight:400; font-size:10.5px; color:var(--ink-faint);}
  .data-region tbody tr{cursor:pointer;}
  .data-region tbody tr:hover{background:var(--surface-2);}
  .dv-bar{width:80px; height:6px; border-radius:3px; background:var(--water-track); display:inline-block; overflow:hidden; vertical-align:middle; margin-right:6px;}
  .dv-bar>span{display:block; height:100%; background:var(--water);}

  /* Input Data view removed */

  /* ---------------- Footer ---------------- */
  .foot{
    flex:0 0 auto; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
    padding:8px 20px; font-size:10.5px; color:var(--ink-faint);
    background:var(--navy); border-top:1px solid var(--navy-2);
  }
  .foot span:first-child{color:#B9CADD;}
  .foot-credit{font-family:var(--font-mono); color:#7E93A8;}

  /* ---------------- Toast ---------------- */
  .toast{
    position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(12px);
    background:var(--navy); color:#EAF1F8; padding:12px 20px; border-radius:8px;
    font-size:12.5px; z-index:200; opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease;
    display:flex; align-items:center; gap:10px;
  }
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
  .toast .tdot{width:8px; height:8px; border-radius:50%; background:#4FD08A;}

  /* ---------------- Print ---------------- */
  @media print{
    .chrome, .toolbar, .canvas-toolbar, .info-panel, .foot .foot-credit{ }
    .chrome-actions, .search-group, .tb-actions .icon-btn:not(.print-keep){display:none;}
    body{background:#fff;}
    .canvas-scroll{overflow:visible; background-image:none;}
    .data-region{overflow:visible;}
  }

  @media (max-width:900px){
    .tb-group{min-width:130px;}
    .info-panel-body{gap:20px;}
  }

  /* ============================================================
     DASHBOARD SHELL - added for the "look like a dashboard" pass.
     Everything above this line is the proven rendering engine and
     is untouched; everything below is new chrome wrapped around it.
     ============================================================ */
  .dash-header{
    background:var(--surface); color:var(--ink); padding:14px 24px 12px;
    display:flex; align-items:flex-start; gap:16px; flex:0 0 auto;
    border-bottom:1px solid var(--line-strong);
  }
  .dash-logo{
    width:40px; height:40px; border-radius:50%; background:var(--surface); color:var(--water);
    border:1.6px solid var(--water);
    display:flex; align-items:center; justify-content:center; flex:0 0 auto; margin-top:2px;
  }
  .dash-logo svg{width:22px; height:22px;}
  .dash-brand-text{display:flex; flex-direction:column; line-height:1.2; margin-top:1px;}
  .dash-brand-name{font-size:14px; font-weight:800; letter-spacing:.03em; color:var(--ink);}
  .dash-brand-sub{font-size:10px; color:var(--ink-faint); max-width:150px;}
  .dash-title-block{flex:1; text-align:center;}
  .dash-title{font-size:22px; font-weight:800; margin:0; letter-spacing:.01em; color:var(--ink);}
  .dash-meta{display:flex; align-items:center; justify-content:center; gap:16px; margin-top:6px; font-size:12px; color:var(--ink-soft);}
  .dash-meta span{display:flex; align-items:center; gap:5px;}
  .dash-meta svg{width:13px; height:13px; opacity:.75;}
  .dash-hint{
    background:var(--water-track); color:var(--ink); border-radius:8px; padding:9px 14px;
    font-size:11.5px; font-weight:600; max-width:190px; text-align:center; flex:0 0 auto;
    border:1px solid var(--water);
  }

  .dash-body{position:relative; display:grid; grid-template-columns:var(--left-w,224px) 1fr var(--right-w,252px); flex:1 1 auto; min-height:0;}
  .dash-side{
    background:var(--surface-2); border-right:1px solid var(--line); padding:16px 14px;
    overflow-y:auto; display:flex; flex-direction:column; gap:18px; transition:padding .15s ease;
  }
  .dash-side.right{border-right:none; border-left:1px solid var(--line);}
  .side-h{font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-faint); font-weight:800; margin:0 0 8px;}

  /* Collapsible left/right panels: a small pinned toggle stays clickable at
     the boundary with the schematic in both states; everything else in the
     panel is simply hidden while collapsed, and the grid column shrinks to
     a slim rail (--left-w / --right-w) so the schematic reclaims the room.
     The toggle buttons live as direct children of .dash-body, NOT inside
     the aside they control - an aside with overflow-y:auto forces
     overflow-x to auto too (a real CSS rule, not a bug), which clips
     anything that pokes past its edge via negative positioning. Sitting
     outside that box and tracking it with calc(var(--left-w)/--right-w)
     keeps the button fully visible and clickable in both states without
     fighting the aside's own scroll clipping. */
  .side-collapse-btn{
    position:absolute; top:10px; z-index:20; width:22px; height:22px; padding:0;
    border-radius:50%; background:var(--surface); border:1px solid var(--line-strong);
    display:flex; align-items:center; justify-content:center; color:var(--ink-soft); cursor:pointer;
  }
  .side-collapse-btn:hover{background:var(--surface-2); color:var(--ink); border-color:var(--water);}
  .side-collapse-btn svg{width:12px; height:12px; transition:transform .15s ease;}
  .side-collapse-btn.is-collapsed svg{transform:rotate(180deg);}
  #leftCollapseBtn{left:calc(var(--left-w,224px) - 11px);}
  #rightCollapseBtn{right:calc(var(--right-w,252px) - 11px);}
  .dash-side.collapsed{overflow:hidden; padding:16px 2px;}
  .dash-side.collapsed > *{display:none;}

  .side-legend .legend-row{padding:2px 0; font-size:11px;}
  .side-legend .legend-sub{margin-top:10px;}
  .legend-code{
    flex:0 0 auto; min-width:34px; padding:1px 5px; border-radius:3px;
    background:#e8eef6; color:#012970; font-weight:700; font-size:10px;
    text-align:center; letter-spacing:.02em;
  }

  .view-nav{display:flex; flex-direction:column; gap:2px;}
  .view-nav button{
    display:flex; align-items:center; gap:9px; text-align:left; background:transparent; border:none;
    padding:8px 9px; border-radius:6px; font-size:12.5px; font-weight:600; color:var(--ink-soft);
  }
  .view-nav button svg{width:15px; height:15px; flex:0 0 auto; opacity:.75;}
  .view-nav button:hover{background:var(--surface);}
  .view-nav button.active{background:var(--water-track); color:var(--ink);}
  .view-nav button.active svg{opacity:1;}
  .view-nav button:disabled{opacity:.45; cursor:not-allowed;}
  .view-nav .nav-badge{
    margin-left:auto; background:var(--alert); color:#fff; font-size:10px; font-weight:800;
    border-radius:9px; min-width:17px; height:17px; display:flex; align-items:center; justify-content:center; padding:0 4px;
  }

  .tools-nav{display:flex; flex-direction:column; gap:2px;}
  .tools-nav button{
    display:flex; align-items:center; gap:9px; text-align:left; background:transparent; border:none;
    padding:7px 9px; border-radius:6px; font-size:12px; color:var(--ink-soft); font-weight:600;
  }
  .tools-nav button svg{width:14px; height:14px; opacity:.7;}
  .tools-nav button:hover{background:var(--surface); color:var(--ink);}

  .center-col{display:flex; flex-direction:column; min-width:0; min-height:0;}
  .center-col .stage{flex:1 1 auto;}

  .stat-strip{
    display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:var(--line);
    border-top:1px solid var(--line); flex:0 0 auto;
  }
  .stat-cell{background:var(--surface); padding:10px 14px; display:flex; flex-direction:column; gap:2px;}
  .stat-cell .sc-label{font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); font-weight:700; display:flex; align-items:center; gap:5px;}
  .stat-cell .sc-label svg{width:12px; height:12px; opacity:.6;}
  .stat-cell .sc-value{font-family:var(--font-mono); font-size:15px; font-weight:700; color:var(--ink);}

  .summary-card{background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:12px 13px;}
  .summary-row{display:flex; align-items:center; gap:9px; padding:7px 0; border-bottom:1px solid var(--line);}
  .summary-row:last-child{border-bottom:none;}
  .summary-icon{width:20px; height:20px; display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
  .summary-icon svg{width:15px; height:15px;}
  .summary-text{flex:1; min-width:0;}
  .summary-label{font-size:10.5px; color:var(--ink-faint); font-weight:600;}
  .summary-value{font-family:var(--font-mono); font-size:13px; font-weight:700; color:var(--ink);}
  .summary-value .pct{font-size:10px; color:var(--ink-faint); font-weight:600;}

  .alert-card{background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:12px 13px;}
  .alert-card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:4px;}
  .alert-card-head a{font-size:10.5px; color:var(--water); font-weight:700; text-decoration:none;}
  .alert-row{display:flex; align-items:center; gap:9px; padding:6px 0; border-bottom:1px solid var(--line); font-size:11.5px;}
  .alert-row:last-child{border-bottom:none;}
  .alert-dot{width:8px; height:8px; border-radius:50%; flex:0 0 auto;}
  .alert-row .lbl{flex:1; color:var(--ink-soft);}
  .alert-row .cnt{font-family:var(--font-mono); font-weight:700;}

  .health-card{background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:14px 13px; text-align:center;}
  .health-gauge-wrap{position:relative; width:150px; height:88px; margin:4px auto 2px;}
  .health-num{position:absolute; bottom:2px; left:0; right:0; font-family:var(--font-mono); font-size:26px; font-weight:800; color:var(--ink);}
  .health-num sup{font-size:12px; font-weight:600; color:var(--ink-faint);}
  .health-band{font-size:11.5px; font-weight:700; margin-top:2px;}
  .health-formula{font-size:9.5px; color:var(--ink-faint); margin-top:6px; line-height:1.4;}

  .dash-foot{
    background:var(--surface-2); color:var(--ink-faint); font-size:10.5px; padding:8px 20px;
    display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; flex:0 0 auto;
    border-top:1px solid var(--line);
  }

  #alertsView{flex:1 1 auto; overflow:auto; background:var(--surface); padding:20px;}
  .alerts-list-full{max-width:640px; margin:0 auto;}
  .alerts-list-full .alert-row{font-size:13px; padding:10px 4px;}

  @media (max-width:1200px){
    .dash-body{--left-w:200px; --right-w:224px;}
    .stat-strip{grid-template-columns:repeat(3,1fr);}
  }