:root {
      --bg: #0C1526;
      --surface: #111C2E;
      --surface2: #19253A;
      --surface3: #1F2D44;
      --border: rgba(255,255,255,0.07);
      --border2: rgba(255,255,255,0.13);
      --text: #E4EAF2;
      --text2: #8FA3BC;
      --text3: #4E6278;
      --accent: #3B82F6;
      --accent2: #2563EB;
      --green: #22C55E;
      --green2: #16A34A;
      --red: #EF4444;
      --amber: #F59E0B;
      --purple: #A78BFA;
      --orange: #E07820;
      --teal: #14B8A6;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box
    }

    html {
      font-size: 14px
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: 'DM Mono', monospace;
      min-height: 100vh;
      overflow-x: hidden
    }

    body::before {
      display: none
    }

    /* ── Header ── */
    .header {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 9px 20px;
      background: #18202E;
      border-bottom: 1px solid rgba(255, 255, 255, 0.07);
      position: sticky;
      top: 0;
      z-index: 200
    }

    /* Brand left, status right, spacer between. A centred wordmark left the
       left-hand zone ~450px wide holding a single 29px cog — a lot of dead
       space on a dense dashboard. Left-aligning the brand uses the width and
       matches how the rest of the app reads. */
    .h-zone { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; min-width: 0 }
    .h-spacer { flex: 1 1 auto; min-width: 8px }
    .h-right { justify-content: flex-end }

    .h-icon {
      width: 29px; height: 29px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      border-radius: 7px; border: 1px solid var(--border2);
      background: rgba(255, 255, 255, .03); color: var(--text2);
      cursor: pointer; font-size: 14px; line-height: 1;
      transition: background .12s, color .12s
    }
    .h-icon:hover { background: rgba(255, 255, 255, .08); color: var(--text) }

    /* Connection state is the one thing that must read instantly, so it gets
       a pill of its own rather than being the first item in a list. */
    .h-pill {
      display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
      padding: 4px 10px; border-radius: 20px;
      background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .09);
      font-size: 9px; letter-spacing: 1.4px; color: rgba(255, 255, 255, .62)
    }

    .h-days {
      display: flex; flex-direction: column; align-items: flex-start;
      line-height: 1.1; cursor: pointer; padding: 2px 9px; border-radius: 7px;
      border: 1px solid var(--border2); background: rgba(255, 255, 255, .03)
    }
    .h-days:hover { background: rgba(255, 255, 255, .07) }
    .h-days-num { font-size: 14px; font-weight: 700; color: #6DBF60; font-variant-numeric: tabular-nums }
    .h-days-num #hDaysTotalNum { font-size: 11px; color: rgba(255, 255, 255, .3); font-weight: 600 }
    .h-days em { font-size: 6.5px; letter-spacing: 1.4px; color: rgba(255, 255, 255, .32); font-style: normal }

    /* Label above value, so each figure is self-describing. The old row was
       "OFFLINE | ASX | +$1,234 | 44 OPEN" with no indication of what any of
       it meant. */
    .h-stat {
      display: flex; flex-direction: column; line-height: 1.2;
      white-space: nowrap; min-width: 0
    }
    .h-stat em {
      font-size: 6.5px; letter-spacing: 1.3px; font-style: normal;
      color: rgba(255, 255, 255, .3); margin-bottom: 1px
    }
    .h-stat b {
      font-size: 11px; font-weight: 600; letter-spacing: .4px;
      color: rgba(255, 255, 255, .78); font-variant-numeric: tabular-nums
    }
    .h-clickable { cursor: pointer }
    .h-clickable:hover b { color: #fff }

    .h-user {
      display: flex; align-items: center; gap: 8px; flex-shrink: 0;
      padding-left: 13px; margin-left: 2px;
      border-left: 1px solid rgba(255, 255, 255, .09);
      font-size: 10px; white-space: nowrap
    }

    .logo-group {
      text-align: left;
      flex: 0 0 auto;
      padding-right: 4px;
      border-right: 1px solid rgba(255, 255, 255, .08);
      margin-right: 4px;
      padding-right: 14px
    }

    .logo {
      font-family: 'Syne', sans-serif;
      font-weight: 800;
      font-size: 19px;
      letter-spacing: 4.5px;
      line-height: 1.1;
      color: var(--accent);
      white-space: nowrap
    }

    .logo-sub {
      font-size: 7.5px;
      letter-spacing: 2.2px;
      color: rgba(255, 255, 255, 0.32);
      margin-top: 3px;
      text-transform: uppercase;
      white-space: nowrap
    }

    .hstatus {
      display: flex;
      align-items: center;
      gap: 16px;
      min-width: 0;
      color: rgba(255, 255, 255, 0.5)
    }

    .dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 8px var(--green);
      animation: pulse 2s infinite
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: .35
      }
    }

    /* ── Layout ── */
    .body {
      display: grid;
      grid-template-columns: 280px 1fr;
      min-height: calc(100vh - 55px)
    }

    .body.no-sidebar {
      grid-template-columns: 1fr
    }

    .body.no-sidebar .sidebar {
      display: none
    }

    /* ── Sidebar ── */
    .sidebar {
      background: #0D1421;
      border-right: 1px solid rgba(255,255,255,0.07);
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      overflow-x: hidden;
      --surface: #111C2E;
      --surface2: #19253A;
      --surface3: #1F2D44;
      --border: rgba(255,255,255,0.07);
      --border2: rgba(255,255,255,0.13);
      --text: #E4EAF2;
      --text2: #8FA3BC;
      --text3: #4E6278;
    }

    .sb-section {
      padding: 16px;
      border-bottom: 1px solid var(--border)
    }

    .sb-label {
      font-size: 9px;
      letter-spacing: 2.5px;
      color: var(--text3);
      text-transform: uppercase;
      margin-bottom: 10px
    }

    .ctrl-select,
    .ctrl-input {
      background: var(--surface2);
      border: 1px solid var(--border2);
      color: var(--text);
      font-family: 'DM Mono', monospace;
      font-size: 12px;
      padding: 9px 12px;
      border-radius: 4px;
      outline: none;
      cursor: pointer;
      width: 100%;
      margin-bottom: 8px;
      -webkit-appearance: none;
      transition: border-color .2s
    }

    .ctrl-select:focus,
    .ctrl-input:focus {
      border-color: var(--accent2)
    }

    .ctrl-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px
    }

    .ctrl-row .ctrl-select {
      margin-bottom: 0
    }

    .run-btn {
      width: 100%;
      background: var(--accent);
      color: #FFFFFF;
      font-family: 'Syne', sans-serif;
      font-weight: 700;
      font-size: 11px;
      letter-spacing: 2px;
      padding: 12px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      text-transform: uppercase;
      transition: background .2s;
      margin-top: 4px
    }

    .run-btn:hover {
      background: var(--accent2)
    }

    .run-btn:disabled {
      opacity: .35;
      cursor: not-allowed
    }

    /* Progress bar */
    .progress-wrap {
      padding: 12px 16px;
      border-bottom: 1px solid var(--border);
      display: none
    }

    .progress-wrap.active {
      display: block
    }

    .progress-label {
      font-size: 10px;
      color: var(--text3);
      letter-spacing: 1px;
      margin-bottom: 6px;
      display: flex;
      justify-content: space-between
    }

    .progress-track {
      height: 3px;
      background: var(--surface3);
      border-radius: 2px;
      overflow: hidden
    }

    .progress-fill {
      height: 100%;
      background: var(--accent);
      border-radius: 2px;
      transition: width .1s linear;
      width: 0
    }

    .progress-stock {
      font-size: 10px;
      color: var(--text2);
      margin-top: 5px;
      letter-spacing: .5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    /* Pattern toggles */
    .ptog {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 7px 10px;
      border-radius: 3px;
      border: 1px solid var(--border2);
      background: var(--surface2);
      cursor: pointer;
      font-size: 11px;
      letter-spacing: 1px;
      margin-bottom: 6px;
      user-select: none;
      transition: all .2s
    }

    .ptog-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--border2);
      transition: all .2s;
      flex-shrink: 0
    }

    .ptog.active {
      border-color: currentColor
    }

    .ptog.p-vwap {
      color: var(--accent)
    }

    .ptog.p-vwap.active .ptog-dot {
      background: var(--accent);
      box-shadow: 0 0 6px var(--accent)
    }

    .ptog.p-rsi {
      color: var(--green)
    }

    .ptog.p-rsi.active .ptog-dot {
      background: var(--green);
      box-shadow: 0 0 6px var(--green)
    }

    .ptog.p-macd {
      color: var(--amber)
    }

    .ptog.p-macd.active .ptog-dot {
      background: var(--amber);
      box-shadow: 0 0 6px var(--amber)
    }

    .ptog.p-boll {
      color: var(--purple)
    }

    .ptog.p-boll.active .ptog-dot {
      background: var(--purple);
      box-shadow: 0 0 6px var(--purple)
    }

    .ptog.p-ema {
      color: var(--orange)
    }

    .ptog.p-ema.active .ptog-dot {
      background: var(--orange);
      box-shadow: 0 0 6px var(--orange)
    }

    .ptog.p-vols {
      color: #14B8A6
    }

    .ptog.p-vols.active .ptog-dot {
      background: #14B8A6;
      box-shadow: 0 0 6px #14B8A6
    }

    .ptog.p-ma200 { color: var(--amber) }
    .ptog.p-ma200.active .ptog-dot { background: var(--amber); box-shadow: 0 0 6px var(--amber) }

    .ptog.p-rsidiv { color: #c084fc }
    .ptog.p-rsidiv.active .ptog-dot { background: #c084fc; box-shadow: 0 0 6px #c084fc }

    .ptog.p-fib { color: #fb923c }
    .ptog.p-fib.active .ptog-dot { background: #fb923c; box-shadow: 0 0 6px #fb923c }

    .ptog.p-ichi { color: #34d399 }
    .ptog.p-ichi.active .ptog-dot { background: #34d399; box-shadow: 0 0 6px #34d399 }

    .ptog.p-ha { color: #f472b6 }
    .ptog.p-ha.active .ptog-dot { background: #f472b6; box-shadow: 0 0 6px #f472b6 }

    .ptog.p-vwapb { color: #38bdf8 }
    .ptog.p-vwapb.active .ptog-dot { background: #38bdf8; box-shadow: 0 0 6px #38bdf8 }

    /* Sector filter */
    .sector-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 5px
    }

    .spill {
      padding: 4px 9px;
      border-radius: 2px;
      border: 1px solid var(--border2);
      background: var(--surface2);
      font-size: 9px;
      letter-spacing: 1px;
      color: var(--text3);
      cursor: pointer;
      transition: all .15s;
      text-transform: uppercase
    }

    .spill.active {
      background: rgba(37, 99, 235, 0.15);
      border-color: rgba(37, 99, 235, 0.4);
      color: var(--accent)
    }

    /* Quick stats strip */
    .sb-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      padding: 14px 16px;
      border-bottom: 1px solid var(--border)
    }

    .sb-stat {
      background: var(--surface2);
      border-radius: 4px;
      padding: 10px
    }

    .sb-stat-label {
      font-size: 8px;
      letter-spacing: 2px;
      color: var(--text3);
      text-transform: uppercase;
      margin-bottom: 5px
    }

    .sb-stat-val {
      font-family: 'Syne', sans-serif;
      font-size: 16px;
      font-weight: 700
    }

    /* ── Main content ── */
    .content {
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 0
    }

    .tabs {
      display: flex;
      border-bottom: 1px solid var(--border);
      background: var(--surface);
      position: sticky;
      top: 0;
      z-index: 100
    }

    .tab {
      padding: 14px 22px;
      font-size: 10px;
      letter-spacing: 2px;
      color: var(--text3);
      cursor: pointer;
      border-bottom: 2px solid transparent;
      transition: all .2s;
      text-transform: uppercase;
      user-select: none
    }

    .tab:hover {
      color: var(--text2)
    }

    .tab.active {
      color: var(--accent);
      border-bottom-color: var(--accent)
    }

    .tab-panel {
      display: none;
      padding: 20px;
      flex-direction: column;
      gap: 16px;
      flex: 1
    }

    .tab-panel.active {
      display: flex
    }

    /* Leaderboard */
    .lb-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 11px
    }

    .lb-table th {
      text-align: left;
      padding: 9px 14px;
      font-size: 9px;
      letter-spacing: 2px;
      color: var(--text3);
      text-transform: uppercase;
      border-bottom: 1px solid var(--border);
      background: var(--surface2);
      position: sticky;
      top: 0;
      cursor: pointer;
      user-select: none;
      white-space: nowrap
    }

    .lb-table th:hover {
      color: var(--text2)
    }

    .lb-table th .sort-arrow {
      margin-left: 4px;
      opacity: .4
    }

    .lb-table th.sorted .sort-arrow {
      opacity: 1;
      color: var(--accent)
    }

    .lb-table td {
      padding: 9px 14px;
      border-bottom: 1px solid var(--border);
      color: var(--text2);
      transition: background .1s;
      cursor: pointer;
      white-space: nowrap
    }

    .lb-table tr:hover td {
      background: var(--surface2)
    }

    .lb-table tr.selected td {
      background: rgba(37, 99, 235, 0.05);
      border-left: 2px solid var(--accent)
    }

    .lb-scroll {
      max-height: 600px;
      overflow-y: auto;
      border: 1px solid var(--border);
      border-radius: 6px
    }

    .lb-scroll::-webkit-scrollbar {
      width: 4px
    }

    .lb-scroll::-webkit-scrollbar-track {
      background: var(--surface)
    }

    .lb-scroll::-webkit-scrollbar-thumb {
      background: var(--border2);
      border-radius: 2px
    }

    /* Badges */
    .badge {
      display: inline-block;
      padding: 2px 7px;
      border-radius: 2px;
      font-size: 9px;
      letter-spacing: 1px;
      text-transform: uppercase
    }

    .badge-green {
      background: rgba(22, 163, 74, .12);
      color: var(--green)
    }

    .badge-red {
      background: rgba(220, 38, 38, .1);
      color: var(--red)
    }

    .badge-amber {
      background: rgba(217, 119, 6, .12);
      color: var(--amber)
    }

    .badge-blue {
      background: rgba(37, 99, 235, .1);
      color: var(--accent)
    }

    .badge-purple {
      background: rgba(124, 58, 237, .1);
      color: var(--purple)
    }

    .badge-orange {
      background: rgba(234, 88, 12, .1);
      color: var(--orange)
    }

    .badge-teal {
      background: rgba(13, 148, 136, .1);
      color: var(--teal)
    }

    /* Win rate bar */
    .wr-bar {
      display: flex;
      align-items: center;
      gap: 6px
    }

    .wr-track {
      width: 60px;
      height: 3px;
      background: var(--surface3);
      border-radius: 2px;
      overflow: hidden
    }

    .wr-fill {
      height: 100%;
      border-radius: 2px
    }

    /* Combo optimizer */
    .combo-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px
    }

    .combo-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 16px;
      transition: border-color .2s;
      cursor: pointer
    }

    .combo-card:hover {
      border-color: var(--border2)
    }

    .combo-card.rank-1 {
      border-color: rgba(255, 215, 0, .3);
      background: rgba(255, 215, 0, .02)
    }

    .combo-card.rank-2 {
      border-color: rgba(192, 192, 192, .25)
    }

    .combo-card.rank-3 {
      border-color: rgba(205, 127, 50, .25)
    }

    .cc-rank {
      font-family: 'Syne', sans-serif;
      font-size: 28px;
      font-weight: 800;
      color: var(--surface3);
      margin-bottom: 8px
    }

    .rank-1 .cc-rank {
      color: #ffd700;
      text-shadow: 0 0 12px rgba(255, 215, 0, .3)
    }

    .rank-2 .cc-rank {
      color: #c0c0c0
    }

    .rank-3 .cc-rank {
      color: #cd7f32
    }

    .cc-name {
      font-family: 'Syne', sans-serif;
      font-size: 13px;
      font-weight: 600;
      margin-bottom: 3px
    }

    .cc-tags {
      display: flex;
      gap: 4px;
      margin-bottom: 10px;
      flex-wrap: wrap
    }

    .cc-metric {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 5px
    }

    .cc-mlabel {
      font-size: 9px;
      letter-spacing: 1.5px;
      color: var(--text3);
      text-transform: uppercase
    }

    .cc-mval {
      font-size: 13px;
      font-family: 'Syne', sans-serif;
      font-weight: 600
    }

    .cc-bigwr {
      font-family: 'Syne', sans-serif;
      font-size: 36px;
      font-weight: 800;
      margin: 10px 0 4px
    }

    .cc-subtitle {
      font-size: 10px;
      color: var(--text3);
      letter-spacing: .5px;
      margin-bottom: 12px
    }

    .cc-bar-bg {
      height: 4px;
      background: var(--surface3);
      border-radius: 2px;
      overflow: hidden;
      margin-top: 8px
    }

    .cc-bar-fill {
      height: 100%;
      border-radius: 2px;
      transition: width 1.2s ease
    }

    /* Heatmap */
    .heatmap-grid {
      display: grid;
      gap: 3px
    }

    .hm-cell {
      border-radius: 3px;
      padding: 5px 7px;
      font-size: 9px;
      letter-spacing: .5px;
      cursor: pointer;
      transition: opacity .15s;
      position: relative
    }

    .hm-cell:hover {
      opacity: .8
    }

    .hm-ticker {
      font-weight: 500;
      color: rgba(255, 255, 255, .9);
      font-size: 9px
    }

    .hm-wr {
      font-size: 8px;
      color: rgba(255, 255, 255, .6);
      margin-top: 1px
    }

    /* Sector performance */
    .sector-bars {
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    .sec-row {
      display: flex;
      align-items: center;
      gap: 10px
    }

    .sec-name {
      width: 130px;
      font-size: 10px;
      color: var(--text2);
      letter-spacing: .5px;
      flex-shrink: 0;
      text-align: right
    }

    .sec-bar-track {
      flex: 1;
      height: 6px;
      background: var(--surface3);
      border-radius: 3px;
      overflow: hidden
    }

    .sec-bar-fill {
      height: 100%;
      border-radius: 3px;
      transition: width 1s ease
    }

    .sec-val {
      width: 50px;
      font-size: 10px;
      text-align: right;
      flex-shrink: 0
    }

    /* Detail drawer */
    .detail-panel {
      background: var(--surface2);
      border-top: 1px solid var(--border);
      padding: 20px;
      display: none
    }

    .detail-panel.open {
      display: flex;
      gap: 20px;
      flex-wrap: wrap
    }

    .detail-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      width: 100%;
      margin-top: 12px
    }

    .ds-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 12px
    }

    .ds-label {
      font-size: 8px;
      letter-spacing: 2px;
      color: var(--text3);
      text-transform: uppercase;
      margin-bottom: 6px
    }

    .ds-val {
      font-family: 'Syne', sans-serif;
      font-size: 18px;
      font-weight: 700
    }

    /* Chart panel */
    .panel {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 6px;
      overflow: hidden
    }

    .ph {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      border-bottom: 1px solid var(--border);
      background: var(--surface2)
    }

    .pt {
      font-family: 'Syne', sans-serif;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--text2)
    }

    .pb {
      padding: 16px
    }

    .pb.collapsed { display: none }

    .panel-toggle {
      background: none; border: none; cursor: pointer;
      color: var(--text3); font-size: 11px; padding: 0 0 0 6px;
      line-height: 1; transition: color .15s
    }
    .panel-toggle:hover { color: var(--text2) }

    /* Empty state */
    .empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 60px;
      color: var(--text3);
      text-align: center;
      gap: 10px
    }

    .empty-icon {
      font-size: 32px;
      opacity: .3
    }

    .empty-text {
      font-size: 11px;
      letter-spacing: 2px;
      text-transform: uppercase
    }

    .empty-sub {
      font-size: 10px;
      opacity: .6
    }

    /* ══════════════════════════════════════════════
       ML ENGINE + LIVE MONITOR STYLES
    ══════════════════════════════════════════════ */
    .tab.ml-tab.active {
      color: var(--purple);
      border-bottom-color: var(--purple);
    }

    .tab.live-tab.active {
      color: var(--green);
      border-bottom-color: var(--green);
    }

    .tab.at-tab.active {
      color: var(--amber);
      border-bottom-color: var(--amber);
    }

    /* Analytics sub-tabs */
    .analytics-subtab {
      padding: 10px 18px;
      font-size: 10px;
      font-family: 'DM Mono', monospace;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--text3);
      cursor: pointer;
      border-bottom: 2px solid transparent;
      transition: color 0.15s;
      user-select: none
    }
    .analytics-subtab:hover { color: var(--text2) }
    .analytics-subtab.active {
      color: var(--text);
      border-bottom-color: var(--accent)
    }
    .analytics-panel { display: flex; flex-direction: column; flex: 1 }

    /* ══════════════════════════════════════════════
       AUTO-TRADER TAB STYLES
    ══════════════════════════════════════════════ */

    /* Section headers inside auto-trader */
    .at-section {
      border: 1px solid var(--border);
      border-radius: 6px;
      margin-bottom: 16px;
      overflow: hidden;
    }

    .at-section-hdr {
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      padding: 12px 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .at-section-title {
      font-family: 'Syne', sans-serif;
      font-weight: 700;
      font-size: 11px;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--amber);
    }

    .at-section-body {
      padding: 16px 18px;
      background: var(--surface2);
    }

    /* Training progress bar */
    .at-prog-wrap {
      background: var(--surface3);
      border-radius: 3px;
      height: 6px;
      overflow: hidden;
      margin: 10px 0 4px;
    }

    .at-prog-bar {
      height: 100%;
      background: var(--amber);
      border-radius: 3px;
      width: 0%;
      transition: width .4s ease;
      box-shadow: 0 0 8px rgba(217,119,6,.4);
    }

    /* Metric cards for model quality */
    .at-metric-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: 10px;
      margin-top: 12px;
    }

    .at-metric-card {
      background: var(--surface3);
      border: 1px solid var(--border);
      border-radius: 5px;
      padding: 10px 12px;
    }

    .at-metric-card.good  { border-color: rgba(22,163,74,.3); }
    .at-metric-card.warn  { border-color: rgba(217,119,6,.35); }
    .at-metric-card.bad   { border-color: rgba(220,38,38,.3); }

    .at-metric-label {
      font-size: 9px;
      letter-spacing: 2px;
      color: var(--text3);
      text-transform: uppercase;
      margin-bottom: 4px;
    }

    .at-metric-value {
      font-family: 'Syne', sans-serif;
      font-weight: 700;
      font-size: 18px;
    }

    .at-metric-sub {
      font-size: 9px;
      color: var(--text3);
      margin-top: 2px;
    }

    /* Feature importance bars */
    .at-fi-row {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 6px;
    }

    .at-fi-name {
      font-size: 10px;
      color: var(--text2);
      width: 140px;
      flex-shrink: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .at-fi-track {
      flex: 1;
      height: 7px;
      background: var(--surface3);
      border-radius: 3px;
      overflow: hidden;
    }

    .at-fi-fill {
      height: 100%;
      background: var(--amber);
      border-radius: 3px;
      transition: width .8s cubic-bezier(.4,0,.2,1);
    }

    .at-fi-val {
      font-size: 10px;
      font-family: 'Syne', sans-serif;
      font-weight: 600;
      color: var(--amber);
      width: 38px;
      text-align: right;
      flex-shrink: 0;
    }

    /* Disclaimer banner */
    .at-disclaimer {
      background: rgba(220,38,38,.06);
      border: 1px solid rgba(220,38,38,.2);
      border-radius: 5px;
      padding: 12px 16px;
      margin-bottom: 14px;
    }

    .at-disclaimer-ttl {
      font-family: 'Syne', sans-serif;
      font-weight: 700;
      font-size: 10px;
      letter-spacing: 2px;
      color: var(--red);
      text-transform: uppercase;
      margin-bottom: 6px;
    }

    .at-disclaimer-bod {
      font-size: 10px;
      color: var(--text2);
      line-height: 1.6;
    }

    /* Filter badge (suggested filters) */
    .at-filter-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 10px;
      border-radius: 20px;
      font-size: 10px;
      background: var(--surface3);
      border: 1px solid var(--border2);
      color: var(--text2);
      cursor: pointer;
      margin: 4px 4px 4px 0;
      transition: all .2s;
      user-select: none;
    }

    .at-filter-badge.active {
      background: rgba(217,119,6,.1);
      border-color: rgba(217,119,6,.4);
      color: var(--amber);
    }

    .at-filter-badge:hover { border-color: var(--amber); }

    /* Donut chart wrapper */
    .at-donut-wrap {
      position: relative;
      width: 160px;
      height: 160px;
      flex-shrink: 0;
    }

    /* Edge stat — big number */
    .at-edge-stat {
      text-align: center;
      padding: 18px;
    }

    .at-edge-num {
      font-family: 'Syne', sans-serif;
      font-size: 48px;
      font-weight: 800;
      transition: color .4s;
    }

    .at-edge-label {
      font-size: 9px;
      letter-spacing: 2.5px;
      color: var(--text3);
      text-transform: uppercase;
      margin-top: 4px;
    }

    /* Overfit warning banner */
    .at-overfit-warn {
      background: rgba(217,119,6,.08);
      border: 1px solid rgba(217,119,6,.3);
      border-radius: 4px;
      padding: 8px 12px;
      font-size: 10px;
      color: var(--amber);
      margin-top: 8px;
    }

    /* Pattern×Regime matrix table */
    .at-matrix {
      width: 100%;
      border-collapse: collapse;
      font-size: 10px;
    }

    .at-matrix th {
      color: var(--text3);
      font-size: 9px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      padding: 6px 8px;
      border-bottom: 1px solid var(--border);
      text-align: left;
    }

    .at-matrix td {
      padding: 6px 8px;
      border-bottom: 1px solid var(--border);
      color: var(--text2);
      font-family: 'DM Mono', monospace;
    }

    .at-matrix tr:hover td { background: var(--surface3); }

    /* Amber primary button variant */
    .at-btn-primary {
      background: var(--amber);
      color: #0d0d0d;
    }

    .at-btn-primary:hover {
      background: #B45309;
    }

    .at-btn-primary:disabled {
      opacity: .35;
      cursor: not-allowed;
    }

    /* Training log (reuse ML engine .tl styles) */
    .at-log {
      background: var(--surface3);
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 10px 12px;
      height: 110px;
      overflow-y: auto;
      font-size: 10px;
      line-height: 1.7;
    }

    .at-log .tl { display: flex; gap: 8px; }
    .at-log .tl-t { color: var(--text3); flex-shrink: 0; }
    .at-log .tl-m { color: var(--text2); }
    .at-log .tl-m.ok   { color: var(--green); }
    .at-log .tl-m.warn { color: var(--amber); }
    .at-log .tl-m.err  { color: var(--red); }

    /* ── Two / three col grids ── */
    .ml-two {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .ml-three {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 16px;
    }

    /* ── Training hero ── */
    .train-hero {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 20px 24px;
      display: flex;
      align-items: center;
      gap: 28px;
      flex-wrap: wrap;
      position: relative;
      overflow: hidden;
    }

    .train-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 20% 50%, rgba(168, 85, 247, .07) 0%, transparent 70%);
      pointer-events: none;
    }

    .th-gen {
      font-family: 'Syne', sans-serif;
      font-size: 64px;
      font-weight: 800;
      color: var(--purple);
      line-height: 1;
      text-shadow: 0 0 40px rgba(168, 85, 247, .3);
      min-width: 96px;
      text-align: center;
      transition: all .35s;
    }

    .th-stats {
      display: flex;
      gap: 24px;
      flex-wrap: wrap;
      flex: 1;
    }

    .th-stat {
      display: flex;
      flex-direction: column;
    }

    .th-lbl {
      font-size: 9px;
      letter-spacing: 2.5px;
      color: var(--text3);
      text-transform: uppercase;
      margin-bottom: 3px;
    }

    .th-val {
      font-family: 'Syne', sans-serif;
      font-size: 20px;
      font-weight: 700;
      transition: all .3s;
    }

    .th-ctrl {
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-width: 148px;
    }

    /* ── ML Buttons ── */
    .ml-btn {
      padding: 10px 16px;
      border-radius: 6px;
      border: none;
      font-family: 'Syne', sans-serif;
      font-weight: 700;
      font-size: 10px;
      letter-spacing: 2px;
      text-transform: uppercase;
      cursor: pointer;
      transition: background .2s, border-color .2s, color .2s;
    }

    .ml-primary {
      background: var(--purple);
      color: #fff;
    }

    .ml-primary:hover {
      background: #8a4aaa;
    }

    .ml-primary:disabled {
      opacity: .35;
      cursor: not-allowed;
    }

    .ml-ghost {
      background: var(--surface2);
      color: var(--text2);
      border: 1px solid var(--border2);
    }

    .ml-ghost:hover {
      border-color: var(--purple);
      color: var(--purple);
    }

    .ml-danger {
      background: rgba(220, 38, 38, .1);
      color: var(--red);
      border: 1px solid rgba(220, 38, 38, .25);
    }

    .ml-danger:hover {
      background: rgba(220, 38, 38, .2);
    }

    /* ── Config sliders ── */
    .cfg-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 10px;
    }

    .cfg-lbl {
      font-size: 10px;
      color: var(--text2);
      width: 155px;
      flex-shrink: 0;
    }

    .cfg-val {
      font-size: 11px;
      color: var(--purple);
      width: 44px;
      text-align: right;
      font-family: 'Syne', sans-serif;
      font-weight: 600;
      flex-shrink: 0;
    }

    .cfg-sl {
      flex: 1;
      accent-color: var(--purple);
      cursor: pointer;
    }

    /* ── Gene weight bars ── */
    .gene-row {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 8px;
    }

    .gene-name {
      width: 145px;
      font-size: 10px;
      color: var(--text2);
      flex-shrink: 0;
    }

    .gene-trk {
      flex: 1;
      height: 8px;
      background: var(--surface3);
      border-radius: 4px;
      overflow: hidden;
    }

    .gene-fill {
      height: 100%;
      border-radius: 4px;
      transition: width .9s cubic-bezier(.4, 0, .2, 1);
    }

    .gene-val {
      width: 44px;
      font-size: 11px;
      font-family: 'Syne', sans-serif;
      font-weight: 600;
      text-align: right;
      flex-shrink: 0;
    }

    .gene-d {
      width: 36px;
      font-size: 9px;
      text-align: right;
      flex-shrink: 0;
    }

    .gene-sec {
      font-size: 9px;
      letter-spacing: 2px;
      color: var(--text3);
      text-transform: uppercase;
      margin: 10px 0 8px;
      padding-top: 10px;
      border-top: 1px solid var(--border);
    }

    /* ── Training log ── */
    .tlog {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 12px;
      max-height: 220px;
      overflow-y: auto;
      font-size: 10px;
      line-height: 1.9;
      font-family: 'DM Mono', monospace;
    }

    .tlog::-webkit-scrollbar {
      width: 3px;
    }

    .tlog::-webkit-scrollbar-thumb {
      background: var(--border2);
      border-radius: 2px;
    }

    .tl {
      display: flex;
      gap: 10px;
    }

    .tl-t {
      color: var(--text3);
      flex-shrink: 0;
      min-width: 52px;
    }

    .tl-m {
      color: var(--text2);
    }

    .tl-m.ok {
      color: var(--green);
    }

    .tl-m.warn {
      color: var(--amber);
    }

    .tl-m.hi {
      color: var(--purple);
    }

    .tl-m.info {
      color: var(--accent);
    }

    /* ── Evolved pattern card ── */
    .ev-card {
      background: var(--surface);
      border: 1px solid rgba(168, 85, 247, .35);
      border-radius: 6px;
      padding: 20px;
      position: relative;
      overflow: hidden;
    }

    .ev-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 50% 0%, rgba(168, 85, 247, .08) 0%, transparent 55%);
      pointer-events: none;
    }

    .ev-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 3px 10px;
      background: rgba(168, 85, 247, .1);
      border: 1px solid rgba(168, 85, 247, .3);
      border-radius: 2px;
      font-size: 9px;
      letter-spacing: 2px;
      color: var(--purple);
      text-transform: uppercase;
      margin-bottom: 14px;
    }

    .ev-wr {
      font-family: 'Syne', sans-serif;
      font-size: 48px;
      font-weight: 800;
      line-height: 1;
      margin-bottom: 4px;
      transition: all .5s;
    }

    .ev-sub {
      font-size: 10px;
      color: var(--text3);
      letter-spacing: 1px;
      margin-bottom: 14px;
    }

    .ev-dna {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-bottom: 14px;
    }

    .dna-chip {
      padding: 3px 8px;
      border-radius: 2px;
      font-size: 9px;
      letter-spacing: 1px;
      font-family: 'Syne', sans-serif;
      font-weight: 600;
    }

    .ev-rule {
      padding: 9px 14px;
      background: var(--surface2);
      border-left: 2px solid var(--purple);
      border-radius: 0 4px 4px 0;
      font-size: 10px;
      color: var(--text2);
      line-height: 1.8;
      margin-bottom: 6px;
    }

    .ev-rule code {
      color: var(--purple);
      font-family: 'DM Mono', monospace;
      font-size: 10px;
    }

    /* ── Population grid ── */
    .pop-grid {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      gap: 4px;
    }

    .pop-cell {
      aspect-ratio: 1;
      border-radius: 3px;
      border: 1px solid transparent;
      cursor: pointer;
      transition: all .12s;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 7px;
      color: rgba(255, 255, 255, .6);
    }

    .pop-cell:hover {
      transform: scale(1.12);
      z-index: 2;
    }

    .pop-cell.elite {
      border-color: #ffd700 !important;
    }

    .pop-cell.chosen {
      border-color: var(--purple) !important;
      box-shadow: 0 0 7px rgba(168, 85, 247, .5);
    }

    /* ── Insight cards ── */
    .insight {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 12px;
      border-left: 3px solid var(--purple);
      margin-bottom: 8px;
    }

    .insight-ttl {
      font-size: 9px;
      letter-spacing: 2px;
      color: var(--text3);
      text-transform: uppercase;
      margin-bottom: 5px;
    }

    .insight-bod {
      font-size: 10px;
      color: var(--text2);
      line-height: 1.7;
    }

    .insight-bod strong {
      color: var(--text);
    }

    /* ── Train pulse animation ── */
    @keyframes tpulse {

      0%,
      100% {
        box-shadow: 0 0 0 0 rgba(168, 85, 247, 0)
      }

      50% {
        box-shadow: 0 0 0 8px rgba(168, 85, 247, .12)
      }
    }

    .is-training .th-gen {
      animation: tpulse 1.1s ease infinite;
    }

    /* ═══ STRATEGY CARDS ═══ */
    .strat-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 13px;
      position: relative;
      overflow: hidden;
      min-width: 0;
    }

    .strat-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
    }

    .strat-card.sc-blue::before   { background: #3B82F6 }
    .strat-card.sc-teal::before   { background: #14B8A6 }
    .strat-card.sc-orange::before { background: #E07820 }
    .strat-card.sc-purple::before { background: #A78BFA }
    .strat-card.sc-green::before  { background: #22C55E }
    .strat-card.sc-cyan::before   { background: #06B6D4 }

    .sc-head { display: flex; align-items: center; gap: 6px; margin-bottom: 5px }
    .sc-dot  { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0 }
    /* min-width:0 so the name can actually ellipsis inside the flex row —
       without it the name pushes the UNPROVEN flag off the card edge. */
    .sc-name { font-size: 9px; font-weight: 500; letter-spacing: .8px; color: var(--text);
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
               flex: 1 1 auto; min-width: 0 }
    .sc-desc { font-size: 8px; color: var(--text2); line-height: 1.5; margin-bottom: 10px; min-height: 20px }
    .sc-pnl  { font-family: 'Syne', sans-serif; font-size: 20px; font-weight: 800; margin-bottom: 1px }
    .sc-pnl-lbl { font-size: 7px; letter-spacing: 1.5px; color: var(--text2); margin-bottom: 9px }

    /* Realised and unrealised, both visible. One headline number used to mean
       realised only, so a strategy with 39 open positions and +$2,591 of
       unrealised P&L rendered as a flat "—" and read as idle.
       Stacked rows, not two columns: the cards are ~190px wide, and two
       columns left ~77px each — too narrow for a currency figure, so every
       number ellipsised. Label left, value right, one row each. The caption
       truncates if it must; the number never does. */
    .sc-split { display: flex; flex-direction: column; gap: 5px; margin-bottom: 9px }
    .sc-row   { display: flex; align-items: baseline; justify-content: space-between; gap: 6px }
    .sc-big   { font-family: 'Syne', sans-serif; font-size: 15px; font-weight: 800; line-height: 1.1;
                white-space: nowrap; flex: 0 0 auto }
    .sc-cap   { font-size: 7px; letter-spacing: 1px; color: var(--text2);
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0 }
    .sc-flag  { margin-left: auto; font-size: 6.5px; letter-spacing: 1px; padding: 2px 5px;
                border-radius: 3px; white-space: nowrap; flex-shrink: 0;
                background: rgba(224,168,96,.12); color: var(--amber); border: 1px solid rgba(224,168,96,.3) }
    .sc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 9px }
    .sc-sl   { font-size: 7px; letter-spacing: .8px; color: var(--text2); margin-bottom: 2px }
    .sc-sv   { font-size: 10px; font-weight: 600; color: var(--text) }
    .sc-bar-bg   { height: 2px; background: var(--border); border-radius: 1px }
    .sc-bar-fill { height: 2px; border-radius: 1px; transition: width .4s }
    .sc-pos  { color: var(--green) }
    .sc-neg  { color: var(--red) }
    .sc-neu  { color: var(--text3) }
    .sc-pf-good { color: var(--green) }
    .sc-pf-ok   { color: var(--amber) }
    .sc-pf-bad  { color: var(--red) }

    /* ═══ LIVE MONITOR ═══ */
    .live-hero {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 20px 24px;
      display: flex;
      align-items: center;
      gap: 24px;
      flex-wrap: wrap;
    }

    .live-pill {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 5px 14px;
      border-radius: 20px;
      font-size: 10px;
      letter-spacing: 2px;
      font-weight: 600;
      text-transform: uppercase;
      transition: all .3s;
    }

    .live-pill.offline {
      background: rgba(61, 90, 115, .2);
      color: var(--text3);
      border: 1px solid var(--border2);
    }

    .live-pill.running {
      background: rgba(22, 163, 74, .1);
      color: var(--green);
      border: 1px solid rgba(22, 163, 74, .3);
    }

    .live-pill.paused {
      background: rgba(217, 119, 6, .1);
      color: var(--amber);
      border: 1px solid rgba(217, 119, 6, .3);
    }

    .live-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .offline .live-dot {
      background: var(--text3);
    }

    .running .live-dot {
      background: var(--green);
      box-shadow: 0 0 6px var(--green);
      animation: pulse 1.4s infinite;
    }

    .paused .live-dot {
      background: var(--amber);
    }

    /* Live stat strip */
    .live-strip {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 10px;
    }

    .live-stat {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 14px 16px;
      position: relative;
    }

    .live-stat::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--green);
      opacity: 0;
      transition: .3s;
      border-radius: 2px 2px 0 0;
    }

    .live-stat.lit::before {
      opacity: 1;
    }

    .ls-lbl {
      font-size: 9px;
      letter-spacing: 2px;
      color: var(--text3);
      text-transform: uppercase;
      margin-bottom: 7px;
    }

    .ls-val {
      font-family: 'Syne', sans-serif;
      font-size: 22px;
      font-weight: 700;
    }

    /* Pattern checkboxes for live monitor */
    .pat-ck {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 7px 10px;
      border-radius: 3px;
      border: 1px solid var(--border2);
      background: var(--surface2);
      cursor: pointer;
      font-size: 11px;
      letter-spacing: 1px;
      color: var(--text);
      margin-bottom: 5px;
      user-select: none;
      transition: border-color .2s, background .2s;
    }

    .pat-ck.on {
      border-color: var(--pk-color, var(--accent));
      background: var(--surface);
    }

    .pk-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--pk-color, var(--border2));
      opacity: 0.28;
      transition: all .2s;
      flex-shrink: 0;
    }

    .pat-ck.on .pk-dot {
      opacity: 1;
      box-shadow: 0 0 5px var(--pk-color, var(--accent));
    }

    /* Unique color per pattern — cascades to .pk-dot via CSS var */
    .pk-vwap  { --pk-color: #F97316 }
    .pk-rsi   { --pk-color: #22C55E }
    .pk-macd  { --pk-color: #EAB308 }
    .pk-boll  { --pk-color: #A855F7 }
    .pk-ema   { --pk-color: #FB923C }
    .pk-vols  { --pk-color: #14B8A6 }
    .pk-cust  { --pk-color: #EC4899 }

    /* Live feed table */
    .live-feed {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 4px;
      /* Taller than the old 300px — this panel now carries the open book as
         well as the closed trades. */
      max-height: 460px;
      overflow-y: auto;
      overflow-x: auto;
    }
    .live-feed .feed-row { min-width: 712px }

    .live-feed::-webkit-scrollbar {
      width: 4px;
    }

    .live-feed::-webkit-scrollbar-thumb {
      background: var(--border2);
      border-radius: 2px;
    }

    /* One row shape for open positions AND closed trades. They used to live in
       two panels with different columns, which is how a trade could appear in
       one and not the other. Open rows fill NOW/R/HELD; closed rows fill EXIT
       and leave HELD blank. */
    .feed-row {
      display: grid;
      grid-template-columns: 74px minmax(72px, 1fr) 62px 46px 60px 60px 48px 78px 46px 66px;
      gap: 8px;
      align-items: center;
      padding: 8px 14px;
      border-bottom: 1px solid var(--border);
      font-size: 10px;
      color: var(--text2);
    }

    .feed-row:hover {
      background: var(--surface3);
    }

    /* Sortable headings. First click on a column sorts high→low, second
       flips to low→high; the arrow shows which is active. */
    .feed-hdr span { cursor: pointer; user-select: none; display: inline-flex;
                     align-items: center; gap: 3px; white-space: nowrap }
    .feed-hdr span:hover { color: var(--text) }
    .feed-hdr span:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px }
    .feed-hdr span.sorted { color: var(--accent) }
    .fh-arrow { font-size: 7px; opacity: 0 }
    .feed-hdr span.sorted .fh-arrow { opacity: 1 }

    .feed-hdr {
      font-size: 9px;
      letter-spacing: 1.5px;
      color: var(--text3);
      text-transform: uppercase;
      background: var(--surface2);
      border-bottom: 1px solid var(--border);
      position: sticky;
      top: 0;
    }

    .feed-new {
      animation: fnew .5s ease;
    }

    @keyframes fnew {
      from {
        background: rgba(22, 163, 74, .1)
      }

      to {
        background: transparent
      }
    }

    /* News drawer — sits between feed rows, no grid columns of its own */
    .feed-news-drawer {
      border-bottom: 1px solid var(--border2);
      background: rgba(0,0,0,.04);
    }
    .feed-news-drawer .feed-news-summary:hover {
      background: rgba(0,0,0,.04);
    }

    /* Watchlist */
    .wl-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      background: rgba(22, 163, 74, .08);
      border: 1px solid rgba(22, 163, 74, .25);
      border-radius: 3px;
      font-size: 10px;
      color: var(--green);
      letter-spacing: 1px;
      margin: 3px;
      cursor: pointer;
      transition: all .15s;
    }

    .wl-chip:hover {
      background: rgba(22, 163, 74, .16);
    }

    /* Interval buttons */
    .iv-btns {
      display: flex;
      gap: 6px;
    }

    .iv-btn {
      padding: 5px 12px;
      border-radius: 3px;
      border: 1px solid var(--border2);
      background: var(--surface2);
      color: var(--text3);
      font-family: 'DM Mono', monospace;
      font-size: 10px;
      letter-spacing: 1px;
      cursor: pointer;
      transition: all .15s;
    }

    .iv-btn.on {
      background: rgba(22, 163, 74, .1);
      border-color: rgba(22, 163, 74, .3);
      color: var(--green);
    }

    /* Backend note banner */
    .note-banner {
      padding: 12px 16px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 4px;
      border-left: 3px solid var(--amber);
    }

    .note-ttl {
      font-size: 9px;
      letter-spacing: 2px;
      color: var(--amber);
      text-transform: uppercase;
      margin-bottom: 5px;
    }

    .note-bod {
      font-size: 10px;
      color: var(--text2);
      line-height: 1.7;
    }

    .note-bod code {
      color: var(--accent);
      font-family: 'DM Mono', monospace;
    }

    /* ── Profitability Verdict Panel ─────────────────────────── */
    .vcheck {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 4px;
      border: 1px solid var(--border);
      background: var(--surface2);
    }
    .vcheck-icon {
      font-size: 16px;
      flex-shrink: 0;
      margin-top: 1px;
    }
    .vcheck-body { flex: 1; min-width: 0; }
    .vcheck-label {
      font-size: 9px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--text3);
      margin-bottom: 3px;
    }
    .vcheck-value {
      font-size: 15px;
      font-family: 'Syne', sans-serif;
      font-weight: 700;
    }
    .vcheck-sub {
      font-size: 9px;
      color: var(--text3);
      margin-top: 2px;
      line-height: 1.5;
    }
    .vcheck.pass  { border-color: rgba(0,230,118,.25); background: rgba(0,230,118,.04); }
    .vcheck.warn  { border-color: rgba(217,119,6,.25); background: rgba(217,119,6,.04); }
    .vcheck.fail  { border-color: rgba(255,68,68,.25);  background: rgba(255,68,68,.04); }
    .vcheck.info  { border-color: rgba(224,122,63,.2);   background: rgba(224,122,63,.03); }
    #verdictTitle.profitable  { color: var(--green); }
    #verdictTitle.marginal    { color: var(--amber); }
    #verdictTitle.notprof     { color: var(--red); }
    #verdictTitle.redflag     { color: var(--red); }

    /* ── Modal (Save/Export Algorithm) ───────────────────────── */
    .modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(5,8,12,.65);
      backdrop-filter: blur(2px);
      z-index: 1000;
      align-items: center;
      justify-content: center;
    }
    .modal-overlay.show { display: flex; }
    .modal-box {
      background: var(--surface);
      border: 1px solid var(--border2);
      border-radius: 8px;
      width: 380px;
      max-width: calc(100vw - 32px);
      box-shadow: 0 20px 60px rgba(0,0,0,.5);
    }
    .modal-box .ph { border-radius: 8px 8px 0 0; }
    .modal-box .pb { display: flex; flex-direction: column; gap: 12px; }
    .modal-input {
      width: 100%;
      background: var(--surface2);
      border: 1px solid var(--border2);
      color: var(--text);
      font-family: 'DM Mono', monospace;
      font-size: 12px;
      padding: 9px 12px;
      border-radius: 4px;
      outline: none;
      box-sizing: border-box;
    }
    .modal-input:focus { border-color: var(--purple); }
    .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

    /* ── Algorithm Runner (Live Monitor) ─────────────────────── */
    .algo-row {
      display: grid;
      grid-template-columns: 70px 64px 1fr 56px 70px 70px 78px 56px;
      gap: 8px;
      align-items: center;
      padding: 8px 14px;
      border-bottom: 1px solid var(--border);
      font-size: 10px;
      color: var(--text2);
    }
    .algo-row:hover { background: var(--surface3); }
    .algo-hdr {
      font-size: 9px;
      letter-spacing: 1.5px;
      color: var(--text3);
      text-transform: uppercase;
      background: var(--surface2);
      border-bottom: 1px solid var(--border);
      position: sticky;
      top: 0;
    }

    /* ─── MOBILE RESPONSIVE ─────────────────────────────────────────────── */

    /* Hamburger — hidden on desktop */
    .mob-menu-btn { display: none; }
    /* Sidebar close btn — hidden on desktop */
    .mob-sidebar-close { display: none; }
    /* Sidebar overlay — hidden on desktop */
    .sidebar-overlay { display: none; }

    @media (max-width: 768px) {

      /* ── Header ──
         The zones now wrap instead of being repositioned by hand: brand on
         the first line, status on the second. No more !important overrides
         to stop the cog landing on the logo. */
      .header { padding: 9px 13px; row-gap: 8px; flex-wrap: wrap; }
      .logo { font-size: 16px; letter-spacing: 3px; }
      .logo-sub { display: none; }
      .logo-group { border-right: 0; margin-right: 0; padding-right: 0; }
      .h-spacer { display: none; }
      .h-left { margin-left: auto; }          /* cog to the right of the brand row */
      .h-right { width: 100%; justify-content: space-between; }
      .h-days { display: none !important; }   /* recoverable from the Trial panel */
      .hstatus { gap: 12px; }
      .h-stat b { font-size: 10px; }
      .h-user { padding-left: 10px; }

      @media (max-width: 430px) {
        .h-pill span:not(.dot) { display: none; }   /* dot alone carries state */
        .h-pill { padding: 5px; }
        #authWho span:first-child { display: none; }  /* keep the role chip only */
      }

      /* ── Hamburger button ── */
      .mob-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        left: 14px; top: 50%;
        transform: translateY(-50%);
        width: 38px; height: 38px;
        background: rgba(255,255,255,.07);
        border: 1px solid rgba(255,255,255,.15);
        color: #E8ECF2;
        font-size: 20px;
        border-radius: 8px;
        cursor: pointer;
        line-height: 1;
      }

      /* ── Layout ── */
      .body { grid-template-columns: 1fr; }

      /* ── Sidebar: slide-in drawer ── */
      .sidebar {
        position: fixed;
        left: 0; top: 0; bottom: 0;
        width: 290px;
        z-index: 600;
        transform: translateX(-100%);
        transition: transform .28s cubic-bezier(.4,0,.2,1);
        box-shadow: 6px 0 32px rgba(0,0,0,.5);
        overflow-y: auto;
      }
      body.sidebar-open .sidebar { transform: translateX(0); }

      .sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.55);
        backdrop-filter: blur(3px);
        z-index: 599;
        opacity: 0;
        pointer-events: none;
        transition: opacity .28s;
      }
      body.sidebar-open .sidebar-overlay {
        opacity: 1;
        pointer-events: auto;
      }

      /* ── Sidebar close button ── */
      .mob-sidebar-close {
        display: block;
        width: 100%;
        background: none;
        border: none;
        border-bottom: 1px solid rgba(255,255,255,.08);
        color: rgba(255,255,255,.4);
        font-family: 'DM Mono', monospace;
        font-size: 10px;
        letter-spacing: 2px;
        padding: 14px 16px;
        text-align: left;
        cursor: pointer;
      }
      .mob-sidebar-close:hover { color: rgba(255,255,255,.7); }

      /* ── Tabs ── */
      .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
      .tabs::-webkit-scrollbar { display: none; }
      .tab { flex-shrink: 0; padding: 11px 14px; font-size: 9px; letter-spacing: 1.5px; }

      /* ── Tab panels ── */
      .tab-panel { padding: 10px; gap: 10px; }

      /* ── Live disclaimer ── */
      #liveDisclaimer { font-size: 9px; padding: 6px 10px; }

      /* ── Live hero: stack vertically ── */
      .live-hero { flex-direction: column; padding: 14px; gap: 12px; align-items: stretch; }
      .live-hero > div { min-width: 0; }

      /* Stats: 3-col grid */
      #liveHeroStats {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
      }
      .th-stat { min-width: 0; }
      .th-val { font-size: 16px; }
      .th-lbl { font-size: 8px; letter-spacing: 1.5px; }

      /* ── Live stat strip: 2 col ── */
      .live-strip { grid-template-columns: 1fr 1fr; gap: 8px; }
      .ls-val { font-size: 16px; }
      .ls-lbl { font-size: 8px; letter-spacing: 1.5px; }
      .live-stat { padding: 10px 12px; }

      /* ── Two / three col → 1 col ── */
      .ml-two { grid-template-columns: 1fr; }
      .ml-three { grid-template-columns: 1fr; }

      /* ── Feed: horizontal scroll ── */
      .live-feed { overflow-x: auto; -webkit-overflow-scrolling: touch; }
      .feed-row { min-width: 560px; }

      /* ── Combo grid ── */
      .combo-grid { grid-template-columns: 1fr; }

      /* ── Detail stats ── */
      .detail-stats { grid-template-columns: 1fr 1fr; }

      /* ── Sectors tab ── */
      #tab-sectors > div[style] { grid-template-columns: 1fr !important; }

      /* ── Research tab ── */
      #tab-research > div { max-width: 100% !important; }
      #tab-research > div > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
      }
      #tab-research .panel > .pb > div[style*="repeat(4"] {
        grid-template-columns: 1fr 1fr !important;
      }

      /* ── Analytics ── */
      .analytics-subtab { padding: 8px 10px; font-size: 9px; }
      #sortCol, #patternFilter, #hmMetric { width: 100% !important; }

      /* ── Interval buttons ── */
      .iv-btns { flex-wrap: wrap; }
      .iv-btn { font-size: 9px; padding: 5px 8px; }

      /* ── Config slider ── */
      .cfg-lbl { width: 110px; font-size: 9px; }

      /* ── Buttons ── */
      .ml-btn { font-size: 9px; padding: 8px 10px; letter-spacing: 1px; }
      .run-btn { font-size: 10px; }

      /* ── Watchlist chips ── */
      .wl-chip { font-size: 9px; padding: 3px 8px; }

      /* ── Modal ── */
      .modal-box { width: calc(100vw - 24px); }

      /* ── Sector bars ── */
      .sec-name { width: 80px; font-size: 9px; }

      /* ── Panels ── */
      .pt { font-size: 9px; letter-spacing: 2px; }
      .ph { padding: 10px 12px; }
      .pb { padding: 12px; }
    }

    /* ── Research tab ──────────────────────────────────────────────────
       Gallery treatment: the page is meant to be read by someone who did
       not build it, so findings lead and the raw matrix is one click away
       rather than dumped on arrival. */
    .rs-hero { padding: 30px 26px 26px; margin-bottom: 16px; border-radius: 10px;
               background: linear-gradient(160deg, #16223A 0%, #111C2E 60%, #0F1A2B 100%);
               border: 1px solid var(--border) }
    .rs-eyebrow { font-size: 8px; letter-spacing: 2.6px; color: var(--text3); margin-bottom: 14px }
    .rs-eyebrow span { margin-left: 10px; opacity: .65 }
    .rs-h1 { font-family: 'Syne', sans-serif; font-size: clamp(21px, 3.4vw, 33px); font-weight: 800;
             line-height: 1.14; letter-spacing: -.4px; color: var(--text); margin: 0 0 14px;
             max-width: 20ch }
    .rs-lede { font-size: 12px; line-height: 1.75; color: var(--text2); max-width: 74ch; margin: 0 }
    .rs-hero-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
                     gap: 1px; margin-top: 24px; background: var(--border); border: 1px solid var(--border) }
    .rs-hero-stats > div { background: #111C2E; padding: 12px 13px; display: flex; flex-direction: column; gap: 4px }
    .rs-hero-stats b { font-family: 'Syne', sans-serif; font-size: 21px; font-weight: 800;
                       color: var(--text); font-variant-numeric: tabular-nums; line-height: 1 }
    .rs-hero-stats em { font-size: 6.5px; letter-spacing: 1.5px; color: var(--text3); font-style: normal }

    .rs-note { font-size: 10px; line-height: 1.75; color: var(--text2); max-width: 82ch }
    .rs-sub { font-size: 7.5px; letter-spacing: 1.8px; color: var(--text3); margin: 12px 0 5px }
    .rs-stack { display: flex; flex-direction: column; gap: 7px }
    .rs-n { font-size: 9px; color: var(--text3); font-variant-numeric: tabular-nums }

    /* Findings */
    .rs-find { border: 1px solid var(--border2); border-radius: 6px; padding: 12px 14px;
               background: var(--surface2); cursor: pointer; transition: border-color .15s, background .15s }
    .rs-find:hover, .rs-find:focus-visible { border-color: var(--accent); background: var(--surface3); outline: none }
    .rs-find.open { background: var(--surface3) }
    .rs-find-head { display: flex; align-items: center; gap: 10px }
    .rs-badge { font-size: 6.5px; letter-spacing: 1.4px; padding: 3px 7px; border-radius: 3px;
                flex-shrink: 0; font-weight: 600 }
    .rs-find-t { font-size: 12px; font-weight: 600; color: var(--text); flex: 1; min-width: 0 }
    .rs-caret { font-size: 14px; color: var(--text3); flex-shrink: 0; width: 12px; text-align: center }
    .rs-find-sum { font-size: 10px; line-height: 1.7; color: var(--text2); margin-top: 7px; max-width: 84ch }
    .rs-find-body { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border2) }
    .rs-find-body p { font-size: 10px; line-height: 1.75; color: var(--text2); margin: 0; max-width: 84ch }

    /* Coverage matrix */
    .rs-controls { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 10px }
    .rs-chips { display: flex; align-items: center; gap: 5px }
    .rs-chips-l { font-size: 7px; letter-spacing: 1.5px; color: var(--text3); margin-right: 3px }
    .rs-chip { font-size: 8.5px; letter-spacing: 1px; padding: 4px 9px; border-radius: 4px;
               border: 1px solid var(--border2); background: transparent; color: var(--text3);
               cursor: pointer; font-family: inherit; transition: all .12s }
    .rs-chip:hover { color: var(--text); border-color: var(--text3) }
    .rs-chip.on { background: rgba(59,130,246,.14); color: var(--accent); border-color: rgba(59,130,246,.45) }
    .rs-legend { display: flex; gap: 14px; margin-bottom: 11px; font-size: 8.5px; color: var(--text3) }
    .rs-legend i { display: inline-block; width: 12px; height: 8px; border-radius: 2px;
                   margin-right: 5px; vertical-align: middle }

    .rs-grid { display: flex; flex-direction: column; gap: 4px }
    .rs-cell { background: var(--surface2); border: 1px solid var(--border2); border-radius: 5px;
               cursor: pointer; transition: background .12s, border-color .12s }
    .rs-cell:hover, .rs-cell:focus-visible { background: var(--surface3); border-color: var(--text3); outline: none }
    .rs-cell.open { background: var(--surface3) }
    .rs-cell-head { display: grid; grid-template-columns: 40px 72px 52px 92px 1fr 16px;
                    align-items: center; gap: 10px; padding: 9px 12px; font-size: 11px }
    .rs-mkt { font-size: 8px; letter-spacing: 1.2px; color: var(--text3) }
    .rs-pat { font-weight: 600; color: var(--text); font-size: 11px }
    .rs-pf { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right }
    .rs-pnl { font-variant-numeric: tabular-nums; text-align: right; font-size: 10px }
    .rs-cell-body { padding: 0 12px 12px; border-top: 1px solid var(--border2); margin-top: 2px }
    .rs-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
             gap: 9px; padding: 11px 0 9px }
    .rs-kv > div { display: flex; flex-direction: column; gap: 2px }
    .rs-kv em { font-size: 6.5px; letter-spacing: 1.3px; color: var(--text3); font-style: normal }
    .rs-kv b { font-size: 12px; color: var(--text); font-variant-numeric: tabular-nums }

    /* Live vs backtest table */
    .rs-table { width: 100%; border-collapse: collapse; font-size: 10.5px;
                font-family: 'DM Mono', monospace; min-width: 560px }
    .rs-table th { font-size: 7px; letter-spacing: 1.4px; color: var(--text3); font-weight: 600;
                   text-align: right; padding: 7px 9px; border-bottom: 1px solid var(--border2) }
    .rs-table td { text-align: right; padding: 8px 9px; border-bottom: 1px solid var(--border);
                   color: var(--text2); font-variant-numeric: tabular-nums }
    .rs-table tbody tr:last-child td { border-bottom: 0 }

    /* Architecture */
    .rs-arch-diagram { overflow-x: auto }
    .rs-ascii { font-family: 'DM Mono', monospace; font-size: 10px; line-height: 1.45;
                color: var(--text2); white-space: pre; margin: 0 0 14px;
                padding: 16px; background: var(--surface2); border: 1px solid var(--border2);
                border-radius: 6px; overflow-x: auto }

    /* History */
    .rs-hist { display: flex; flex-direction: column; gap: 14px; max-height: 460px; overflow-y: auto }
    .rs-month-h { display: flex; justify-content: space-between; align-items: baseline;
                  font-size: 10px; letter-spacing: 1.4px; color: var(--accent);
                  padding-bottom: 5px; border-bottom: 1px solid var(--border2); margin-bottom: 6px }
    .rs-commit { display: flex; gap: 10px; font-size: 10px; color: var(--text2);
                 line-height: 1.65; padding: 2px 0 }
    .rs-date { color: var(--text3); flex-shrink: 0; width: 18px; font-variant-numeric: tabular-nums }

    /* Archive */
    .rs-arch { border: 1px solid var(--border2); border-left: 3px solid var(--text3);
               border-radius: 5px; padding: 11px 13px; background: var(--surface2) }
    .rs-arch-h { display: flex; align-items: baseline; gap: 10px; font-size: 11px;
                 color: var(--text); font-weight: 600; margin-bottom: 7px }
    .rs-round { font-size: 7px; letter-spacing: 1.4px; color: var(--text3); flex-shrink: 0 }
    .rs-arch-claim, .rs-arch-why { font-size: 10px; line-height: 1.7; color: var(--text2); margin-top: 4px }
    .rs-arch-claim em, .rs-arch-why em { font-size: 6.5px; letter-spacing: 1.3px; color: var(--text3);
                                         font-style: normal; display: block; margin-bottom: 2px }
    .rs-arch-claim { text-decoration: line-through; text-decoration-color: rgba(230,103,103,.5) }
    .rs-arch-claim em { text-decoration: none }
    .rs-tags { display: flex; flex-wrap: wrap; gap: 5px }
    .rs-tag { font-size: 9px; padding: 3px 8px; border-radius: 3px; color: var(--text3);
              background: var(--surface2); border: 1px solid var(--border2) }

    @media (max-width: 700px) {
      .rs-hero { padding: 22px 16px }
      .rs-cell-head { grid-template-columns: 34px 1fr 46px 16px; row-gap: 4px }
      .rs-cell-head .rs-pnl, .rs-cell-head .rs-n { display: none }
    }

    /* ── Investment: page-level risk bar + modal ───────────────────────── */
    .inv-riskbar { padding: 13px 16px 14px; margin-bottom: 14px; border-radius: 8px;
                   background: var(--surface); border: 1px solid var(--border2) }
    .inv-riskbar-top { display: flex; align-items: baseline; gap: 12px;
                       flex-wrap: wrap; margin-bottom: 10px }
    .inv-riskbar-l { font-size: 8px; letter-spacing: 1.6px; color: var(--text2) }
    .inv-riskbar-note { flex: 1; min-width: 0; font-size: 9px; color: var(--text3) }
    .inv-riskbar-warn { font-size: 9.5px; line-height: 1.65; color: var(--text3); margin-top: 10px }

    .inv-modal { position: fixed; inset: 0; z-index: 900; background: rgba(6,12,22,.72);
                 display: flex; align-items: center; justify-content: center; padding: 20px;
                 backdrop-filter: blur(3px) }
    .inv-modal-box { width: 100%; max-width: 430px; background: var(--surface);
                     border: 1px solid var(--border2); border-radius: 10px;
                     box-shadow: 0 18px 60px rgba(0,0,0,.5) }
    .inv-modal-h { display: flex; align-items: center; justify-content: space-between;
                   padding: 15px 18px; border-bottom: 1px solid var(--border);
                   font-size: 12px; letter-spacing: 1.4px; color: var(--text); font-weight: 600 }
    .inv-modal-x { background: none; border: 0; color: var(--text3); font-size: 22px;
                   line-height: 1; cursor: pointer; padding: 0 2px }
    .inv-modal-x:hover { color: var(--text) }
    .inv-modal-b { padding: 18px }

    /* ── Admin: account management ─────────────────────────────────────── */
    .acct-row { display: grid; grid-template-columns: 1fr 78px 74px auto; gap: 9px;
                align-items: center; padding: 9px 11px; border-radius: 5px;
                background: var(--surface2); border: 1px solid var(--border2); font-size: 11px }
    .acct-name { color: var(--text); font-weight: 600; min-width: 0; overflow: hidden;
                 text-overflow: ellipsis; white-space: nowrap }
    .acct-name small { display: block; font-size: 8px; color: var(--text3); font-weight: 400 }
    .acct-role { font-size: 7px; letter-spacing: 1.2px; padding: 2px 6px; border-radius: 3px; text-align: center }
    .acct-state { font-size: 8px; letter-spacing: 1px; text-align: center }
    .acct-btns { display: flex; gap: 5px }
    .acct-btn { font-size: 8px; letter-spacing: .8px; padding: 3px 7px; border-radius: 3px;
                border: 1px solid var(--border2); background: transparent; color: var(--text3);
                cursor: pointer; font-family: inherit }
    .acct-btn:hover { color: var(--text); border-color: var(--text3) }
    .acct-btn.danger:hover { color: var(--red); border-color: rgba(239,68,68,.5) }
    @media (max-width: 620px) {
      .acct-row { grid-template-columns: 1fr auto; row-gap: 6px }
      .acct-role, .acct-state { text-align: left }
    }

    /* ── Research hero: PF progression + architecture graph link ───────── */
    .rs-hero-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(300px,1.05fr);
                    gap: 26px; align-items: start }
    .rs-hero-chart { background: rgba(0,0,0,.16); border: 1px solid var(--border2);
                     border-radius: 8px; padding: 13px 15px 11px }
    .rs-chart-t { font-size: 7.5px; letter-spacing: 1.7px; color: var(--text3); margin-bottom: 9px }
    .rs-chart-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 9px;
                       font-size: 8px; color: var(--text2) }
    .rs-chart-legend i { display: inline-block; width: 11px; height: 3px; border-radius: 2px;
                         margin-right: 5px; vertical-align: middle }

    .rs-graph-link { display: flex; align-items: center; gap: 14px; padding: 15px 17px;
                     border-radius: 8px; text-decoration: none;
                     background: linear-gradient(135deg, rgba(59,130,246,.10), rgba(59,130,246,.03));
                     border: 1px solid rgba(59,130,246,.3); transition: border-color .15s, background .15s }
    .rs-graph-link:hover { border-color: rgba(59,130,246,.65);
                           background: linear-gradient(135deg, rgba(59,130,246,.17), rgba(59,130,246,.06)) }
    .rs-graph-icon { font-size: 25px; color: var(--accent); flex-shrink: 0; line-height: 1 }
    .rs-graph-link strong { display: block; font-size: 12px; color: var(--text); margin-bottom: 4px }
    .rs-graph-link em { display: block; font-size: 9.5px; line-height: 1.65; color: var(--text2);
                        font-style: normal; max-width: 72ch }
    .rs-graph-arrow { margin-left: auto; color: var(--accent); font-size: 16px; flex-shrink: 0 }

    @media (max-width: 860px) { .rs-hero-grid { grid-template-columns: 1fr } }

    /* ── Inline module dependency graph ────────────────────────────────── */
    .rs-mg-wrap { background: rgba(0,0,0,.16); border: 1px solid var(--border2);
                  border-radius: 8px; padding: 13px 15px 11px; margin-bottom: 12px }
    .rs-mg-head { display: flex; align-items: baseline; justify-content: space-between;
                  gap: 12px; margin-bottom: 6px }
    .rs-mg-svg { display: block; width: 100%; height: auto; overflow: visible }
    .rs-mg-node { cursor: pointer; transition: opacity .12s }
    .rs-mg-node:focus-visible circle { stroke: var(--accent); stroke-width: 3 }
    .rs-mg-edge { transition: opacity .12s, stroke .12s }
    .rs-mg-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
                    font-size: 8px; color: var(--text3) }

    /* ── Risk: four discrete options, not a slider ─────────────────────── */
    .risk-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
                border: 1px solid var(--border2); border-radius: 8px; overflow: hidden }
    .risk-opt { display: flex; flex-direction: column; align-items: center; gap: 3px;
                padding: 14px 6px; background: var(--surface2); border: 0;
                border-right: 1px solid var(--border2); cursor: pointer;
                font-family: inherit; transition: background .12s, color .12s }
    .risk-opt:last-child { border-right: 0 }
    .risk-opt b { font-family: 'Syne', sans-serif; font-size: 21px; font-weight: 800;
                  color: var(--text2); line-height: 1 }
    .risk-opt em { font-size: 7px; letter-spacing: 1.1px; color: var(--text3);
                   font-style: normal; text-align: center }
    .risk-opt:hover { background: var(--surface3) }
    .risk-opt.on { background: rgba(59,130,246,.16) }
    .risk-opt.on b { color: var(--accent) }
    .risk-opt.on em { color: var(--accent) }
    .risk-opt[data-r="3"].on, .risk-opt[data-r="4"].on { background: rgba(239,68,68,.14) }
    .risk-opt[data-r="3"].on b, .risk-opt[data-r="4"].on b,
    .risk-opt[data-r="3"].on em, .risk-opt[data-r="4"].on em { color: var(--red) }

    /* ── Variable registry (admin) ─────────────────────────────────────── */
    .vs-admin { font-size: 6.5px; letter-spacing: 1.3px; padding: 2px 5px; border-radius: 3px;
                margin-left: 7px; vertical-align: middle;
                background: rgba(34,197,94,.14); color: var(--green); border: 1px solid rgba(34,197,94,.35) }
    .vs-split { display: grid; grid-template-columns: minmax(0,340px) minmax(0,1fr); gap: 14px;
                align-items: start }
    .vs-list { display: flex; flex-direction: column; gap: 4px; max-height: 560px; overflow-y: auto }
    .vs-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 9px; align-items: center;
              padding: 8px 10px; border-radius: 5px; background: var(--surface2);
              border: 1px solid var(--border2); cursor: pointer; font-size: 10px;
              transition: background .12s, border-color .12s }
    .vs-row:hover, .vs-row:focus-visible { background: var(--surface3); border-color: var(--text3); outline: none }
    .vs-row.on { background: var(--surface3); border-color: var(--accent) }
    .vs-name { min-width: 0; color: var(--text); font-weight: 600; overflow: hidden;
               text-overflow: ellipsis; white-space: nowrap }
    .vs-name small { display: block; font-size: 7.5px; color: var(--text3); font-weight: 400;
                     overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
    .vs-val { font-size: 9px; color: var(--text2); font-variant-numeric: tabular-nums; white-space: nowrap }
    .vs-badge { font-size: 6.5px; letter-spacing: 1.1px; padding: 2px 6px; border-radius: 3px;
                white-space: nowrap; font-weight: 600 }
    .vs-has { font-size: 7px; letter-spacing: .8px; color: var(--accent); white-space: nowrap }
    .vs-detail { background: var(--surface2); border: 1px solid var(--border2);
                 border-radius: 6px; padding: 14px 16px; min-width: 0 }
    .vs-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
    .vs-title { font-size: 14px; font-weight: 600; color: var(--text) }
    .vs-empty { margin-top: 14px; padding: 12px 14px; border-radius: 5px; font-size: 10px;
                line-height: 1.7; color: var(--text2);
                background: rgba(255,179,0,.06); border: 1px solid rgba(255,179,0,.24) }
    @media (max-width: 900px) {
      .vs-split { grid-template-columns: 1fr }
      .vs-list { max-height: 300px }
      .vs-row { grid-template-columns: 1fr auto }
      .vs-row .vs-val, .vs-row .vs-has { display: none }
    }
    .vs-ok { margin-top: 10px; padding: 11px 13px; border-radius: 5px; font-size: 10px;
             line-height: 1.7; color: var(--text2);
             background: rgba(34,197,94,.07); border: 1px solid rgba(34,197,94,.26) }