: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;
      justify-content: center;
      position: relative;
      padding: 18px 28px;
      background: #18202E;
      border-bottom: 1px solid rgba(255, 255, 255, 0.07);
      position: sticky;
      top: 0;
      z-index: 200
    }

    .logo-group {
      text-align: center
    }

    .logo {
      font-family: 'Syne', sans-serif;
      font-weight: 800;
      font-size: 26px;
      letter-spacing: 8px;
      color: var(--accent)
    }

    .logo-sub {
      font-size: 9px;
      letter-spacing: 3px;
      color: rgba(255, 255, 255, 0.4);
      margin-top: 2px;
      text-transform: uppercase
    }

    .hstatus {
      position: absolute;
      right: 28px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
      gap: 14px;
      font-size: 11px;
      color: rgba(255, 255, 255, 0.5);
      letter-spacing: 1px
    }

    .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 }

    .sc-head { display: flex; align-items: center; gap: 6px; margin-bottom: 5px }
    .sc-dot  { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0 }
    .sc-name { font-size: 9px; font-weight: 500; letter-spacing: .8px; color: var(--text);
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
    .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 }
    .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;
      max-height: 300px;
      overflow-y: auto;
    }

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

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

    .feed-row {
      display: grid;
      grid-template-columns: 72px 56px 62px 1fr 68px 68px 74px 52px;
      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);
    }

    .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 ── */
      .header { padding: 10px 16px; min-height: 56px; }
      .logo { font-size: 18px; letter-spacing: 4px; }
      .logo-sub { display: none; }
      .hstatus {
        position: static;
        transform: none;
        font-size: 9px;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
      }
      /* hide pipe separators */
      .hstatus > span[style*="opacity:.25"] { display: none; }

      /* ── 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; }
    }