/* Fey-DNA dark surface system — pure black like Fey, warm amber accent.
       Per codex_briefs/themis_app_fey_polish.md commit #1. */
    :root, body[data-theme="dark"] {
      --bg: #0c0d10;
      --bg-2: #0f1115;
      --panel: #14161b;
      --panel2: #1a1d23;
      --panel-2: #1a1d23;
      --panel3: #20242c;
      --border: rgba(255,255,255,0.06);
      --border-strong: rgba(255,255,255,0.10);
      --border-faint: rgba(255,255,255,0.06);
      --hairline: rgba(255,255,255,0.04);
      --text: #ebecef;
      --fg: #ebecef;
      --fg-2: #c8cad0;
      --muted: #8a8f99;
      --muted2: #5d6370;
      --muted-2: #5d6370;
      --accent: #7cd8c0;
      --accent2: #92e3ce;
      --accent-soft: rgba(124,216,192,0.10);
      --accent-strong: #92e3ce;
      --accent-dim: #3d6c62;
      --accent-bg: rgba(124,216,192,0.10);
      --danger: #f87171;
      --warn: #d8c873;
      --pos: #6fdc8c;
      --neg: #ef8470;
      --shadow: 0 18px 60px rgba(0,0,0,0.40);
      --shadow-soft: 0 10px 32px rgba(0,0,0,0.28);
      --glow: 0 0 0 1px rgba(124,216,192,0.16);
      --overlay: rgba(0,0,0,0.70);
      --modal-surface: var(--panel2);
      --header-bg: rgba(0,0,0,0.86);
      --surface-subtle: rgba(255,255,255,0.012);
      --surface-hover: rgba(255,255,255,0.045);
      --surface-active: rgba(255,255,255,0.10);
      --surface-strong: rgba(255,255,255,0.14);
      --scroll-thumb: rgba(255,255,255,0.18);
      --skeleton-sheen: rgba(255,255,255,0.04);
      --chart-muted-stroke: rgba(255,255,255,0.20);
      --tint-pos: rgba(34,197,94,0.06);
      --tint-pos-border: rgba(34,197,94,0.30);
      --tint-warn: rgba(255,184,77,0.06);
      --tint-warn-border: rgba(255,184,77,0.30);
      --tint-neg: rgba(248,113,113,0.06);
      --tint-neg-border: rgba(248,113,113,0.30);
      --tint-info: rgba(110,168,254,0.06);
      --tint-info-border: rgba(110,168,254,0.30);
      --radius: 10px;
      --radius-sm: 6px;
      /* Polish-pass tokens (Tier 1):
         - elev: layered shadow scale for consistent depth
         - dur:  motion timing scale (150-300ms per UX spec)
         - ease: standard easing curve
         - ring: focus-visible halo, accent-tinted */
      --elev-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.4);
      --elev-2: 0 1px 0 rgba(255,255,255,0.05) inset, 0 4px 14px rgba(0,0,0,0.45);
      --elev-3: 0 1px 0 rgba(255,255,255,0.06) inset, 0 10px 32px rgba(0,0,0,0.55);
      --dur-fast: 120ms;
      --dur:      180ms;
      --dur-slow: 280ms;
      --ease:     cubic-bezier(.2,.7,.2,1);
      --ring:     0 0 0 2px rgba(124,216,192,0.45);
      --font-mono: 'Geist Mono', "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
      --font-sans: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, 'Inter', "Segoe UI", Roboto, sans-serif;
      /* Tier 2: spacing + radius scale — use these over hard-coded px values
         going forward so density/proportion stay consistent. */
      --space-1: 4px;
      --space-2: 8px;
      --space-3: 12px;
      --space-4: 16px;
      --space-5: 24px;
      --space-6: 32px;
      --radius-xs: 6px;
      --radius-lg: 14px;
      /* Subtle row hover for dense tables */
      --row-hover: rgba(124,216,192,0.06);
    }
    body[data-theme="light"] {
      --bg: #fafbfc;
      --panel: #ffffff;
      --panel2: #f3f5f8;
      --panel-2: #f3f5f8;
      --panel3: #eef1f5;
      --border: #e1e5eb;
      --border-strong: #d7dce5;
      --border-faint: #edf0f4;
      --text: #0f172a;
      --fg: #0f172a;
      --muted: #64748b;
      --muted2: #94a3b8;
      --accent: #2f8f79;
      --accent2: #247a66;
      --danger: #dc2626;
      --warn: #d97706;
      --pos: #22c55e;
      --neg: #f87171;
      --shadow: 0 1px 3px rgba(15,23,42,0.06);
      --shadow-soft: 0 10px 32px rgba(15,23,42,0.08);
      --glow: 0 0 0 1px rgba(47,143,121,0.18);
      --overlay: rgba(0,0,0,0.70);
      --modal-surface: var(--panel2);
      --header-bg: rgba(255,255,255,0.86);
      --surface-subtle: rgba(15,23,42,0.018);
      --surface-hover: rgba(15,23,42,0.045);
      --surface-active: rgba(15,23,42,0.075);
      --surface-strong: rgba(15,23,42,0.10);
      --scroll-thumb: rgba(15,23,42,0.24);
      --skeleton-sheen: rgba(255,255,255,0.55);
      --chart-muted-stroke: rgba(100,116,139,0.36);
      --tint-pos: rgba(5,150,105,0.08);
      --tint-pos-border: rgba(5,150,105,0.32);
      --tint-warn: rgba(217,119,6,0.10);
      --tint-warn-border: rgba(217,119,6,0.36);
      --tint-neg: rgba(220,38,38,0.08);
      --tint-neg-border: rgba(220,38,38,0.30);
      --tint-info: rgba(37,99,235,0.08);
      --tint-info-border: rgba(37,99,235,0.30);
      --radius: 10px;
      --radius-sm: 6px;
      /* Polish-pass tokens (Tier 1) — light variant */
      --elev-1: 0 1px 2px rgba(15,23,42,0.05);
      --elev-2: 0 4px 14px rgba(15,23,42,0.07);
      --elev-3: 0 10px 32px rgba(15,23,42,0.10);
      --dur-fast: 120ms;
      --dur:      180ms;
      --dur-slow: 280ms;
      --ease:     cubic-bezier(.2,.7,.2,1);
      --ring:     0 0 0 2px rgba(47,143,121,0.35);
      --font-mono: 'Geist Mono', "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
      /* Tier 2 — light variant */
      --space-1: 4px;
      --space-2: 8px;
      --space-3: 12px;
      --space-4: 16px;
      --space-5: 24px;
      --space-6: 32px;
      --radius-xs: 6px;
      --radius-lg: 14px;
      --row-hover: rgba(47,143,121,0.08);
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      /* Fey-DNA: Geist Sans for prose, slight negative tracking */
      font-family: var(--font-sans);
      font-size: 13px;
      line-height: 1.5;
      letter-spacing: -0.005em;
      background: var(--bg);
      color: var(--text);
      text-rendering: geometricPrecision;
      -webkit-font-smoothing: antialiased;
    }
    /* Headlines: slightly tighter tracking per Fey audit */
    h1, h2, h3, h4 {
      font-family: var(--font-sans);
      font-weight: 600;
      letter-spacing: -0.02em;
    }
    /* Gradient text utility — peach → coral, the Fey signature.
       Apply via class="gradient-headline" on h1/h2/wordmarks. */
    .gradient-headline {
      color: var(--fg);
    }
    .num, .mono, code, table, #rank-table, .output {
      font-variant-numeric: tabular-nums;
      font-feature-settings: "tnum" 1, "ss01" 1;
    }
    /* Use a true monospace for data-dense displays — JetBrains Mono has
       slightly narrower glyphs and clearer disambiguation (0/O, 1/l/I) than
       fallback monospaces. Inter remains the prose face. */
    .num, .mono, code, pre, kbd,
    table#rank-table td, table#rank-table th,
    #scan-output, .output {
      font-family: var(--font-mono);
    }
    /* Global focus-visible ring — accent-tinted halo, only on keyboard nav.
       Avoids the cluttered "focus-on-click" outline in modern browsers. */
    *:focus { outline: none; }
    button:focus-visible,
    a:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    [role="button"]:focus-visible,
    [tabindex]:focus-visible {
      outline: none;
      box-shadow: var(--ring);
      border-radius: var(--radius-sm);
    }
    /* Default interactive transition — applies to anything that doesn't
       already declare its own. Layered-via-cascade with existing rules. */
    button, a, input, select, textarea, [role="button"] {
      transition: background-color var(--dur) var(--ease),
                  border-color   var(--dur) var(--ease),
                  color          var(--dur) var(--ease),
                  box-shadow     var(--dur) var(--ease),
                  transform      var(--dur-fast) var(--ease);
    }
    /* Respect users who prefer reduced motion (UX accessibility spec). */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
      }
    }
    header {
      padding: 10px 28px;
      border-bottom: 1px solid var(--border);
      background: var(--header-bg);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      display: flex;
      flex-direction: column;
      gap: 0;
    }
    .header-row {
      display: flex;
      align-items: center;
      gap: 14px;
      min-width: 0;
    }
    .header-row-top {
      justify-content: space-between;
      padding: 6px 0 10px;
      border-bottom: 1px solid var(--border);
    }
    .header-row-macro {
      padding: 10px 0 4px;
      gap: 18px;
    }
    .header-row-macro .macro-strip { flex: 1; min-width: 0; }
    header .brand {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    header .brand-mark {
      width: 24px; height: 24px;
      display: block;
      filter: drop-shadow(0 2px 6px rgba(124,216,192,0.22));
    }
    header h1 {
      margin: 0;
      font-size: 13px;
      font-weight: 500;
      letter-spacing: -0.02em;
    }
    .macro-strip {
      display: flex;
      gap: 0;
      flex-wrap: nowrap;
      align-items: center;
      flex: 1;
      justify-content: flex-start;
      overflow-x: auto;
      /* Hide scrollbar visually — horizontal scroll still works via
         mousewheel / trackpad / drag. Subtle fade-mask on right edge
         hints there's more to see. */
      scrollbar-width: none;
      -ms-overflow-style: none;
      -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
              mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
    }
    .macro-strip::-webkit-scrollbar { display: none; }
    .macro-item {
      display: inline-flex;
      align-items: baseline;
      gap: 6px;
      margin-right: 18px;
      white-space: nowrap;
      flex: 0 0 auto;
    }
    .macro-item:last-child { margin-right: 0; }
    .macro-sym {
      color: var(--muted);
      font-weight: 500;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0;
    }
    .macro-price,
    .macro-delta {
      font-family: var(--font-mono);
      font-variant-numeric: tabular-nums;
    }
    .macro-price {
      color: var(--fg);
      font-size: 12px;
      font-weight: 500;
    }
    .macro-delta {
      font-size: 11px;
      font-weight: 500;
    }
    .macro-delta.pos { color: var(--pos); }
    .macro-delta.neg { color: var(--neg); }
    .macro-delta.flat { color: var(--muted); }
    .theme-toggle {
      padding: 6px 12px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: var(--panel2);
      color: var(--text);
      font-size: 12px;
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s;
    }
    .theme-toggle:hover { border-color: var(--accent); background: var(--panel); }
    .header-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .saved-scan-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      border-radius: 10px;
      cursor: pointer;
      transition: background 0.12s;
    }
    .saved-scan-item:hover { background: var(--surface-hover); }
    .saved-scan-item .meta { flex: 1; min-width: 0; }
    .saved-scan-item .name { font-size: 12px; color: var(--fg); font-weight: 500; }
    .saved-scan-item .sub { font-size: 10px; color: var(--muted); margin-top: 2px; }
    .saved-scan-item .del {
      padding: 2px 7px; font-size: 10px; color: var(--neg);
      background: transparent; border: 1px solid transparent; border-radius: 999px;
      cursor: pointer; opacity: 0.5;
    }
    .saved-scan-item:hover .del { opacity: 1; border-color: var(--tint-neg-border); }
    .saved-scans-empty { padding: 24px 12px; color: var(--muted); font-size: 12px; text-align: center; }
    main {
      display: grid;
      /* minmax(0, 1fr) (instead of plain 1fr) lets the right column shrink
         below its content's natural width — without this, a wide rank-table
         (Top Plays, Pre-Earnings, etc.) pushes the whole grid past the
         viewport and the page scrolls horizontally. With minmax(0, 1fr) the
         scroll happens inside .table-scroll where it belongs. */
      grid-template-columns: 340px minmax(0, 1fr);
      gap: 20px;
      padding: 20px 24px 96px;
      height: calc(100vh - 68px);
    }
    .controls {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 16px 12px;
      overflow: visible;          /* let domain flyouts escape the sidebar */
      box-shadow: var(--shadow-soft);
    }
    .sidebar-greeting {
      margin: 0 0 16px;
    }
    .sidebar-greeting-date {
      font-size: 11px;
      color: var(--muted);
      letter-spacing: 0.04em;
      margin-bottom: 2px;
    }
    .sidebar-greeting-time {
      font-size: 11px;
      color: var(--muted);
      letter-spacing: 0.06em;
      font-family: var(--font-mono);
      margin-bottom: 6px;
    }
    .sidebar-greeting-hi {
      font-size: 22px;
      font-weight: 500;
      color: var(--fg);
      line-height: 1.15;
      letter-spacing: -0.01em;
    }

    /* One-tab-per-domain sidebar — each section is a compact tab; its strategy
       menu (.direction-menu) pops out as a flyout to the right on click. */
    .sidebar-section {
      display: block;
      position: relative;
      margin: 1px 0;
      padding: 0;
      border: 0;
      background: transparent;
    }
    .sidebar-section-label {
      font-family: var(--font-mono);
      font-size: 10.5px;
      color: var(--muted);
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.13em;
      cursor: pointer;
      transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      padding: 7px 9px;
      border-radius: 8px;
      user-select: none;
    }
    .sidebar-section-label::after {
      content: "›";
      margin-left: auto;
      font-family: var(--font-sans);
      color: var(--muted-2);
      font-size: 14px;
      line-height: 1;
      transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
    }
    .sidebar-section.flyout-open > .sidebar-section-label::after { transform: rotate(90deg); color: var(--accent); }
    .sidebar-section-label::before {
      content: "";
      display: block;
      width: 14px;
      height: 1px;
      background: var(--accent);
      opacity: 0.5;
      flex-shrink: 0;
      transition: opacity var(--dur) var(--ease);
    }
    .sidebar-section-label:hover {
      color: var(--fg);
      background: var(--surface-hover);
    }
    .sidebar-section-label:hover::before { opacity: 1; }
    .sidebar-section.flyout-open > .sidebar-section-label {
      color: var(--accent);
      background: var(--accent-bg);
    }
    .sidebar-section.directional-options { display: block; }
    /* ─── Beginner / Power mode toggle ─── */
    .app-mode-toggle {
      display: inline-flex;
      align-items: center;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: var(--panel2);
      padding: 2px;
      gap: 0;
      margin-right: 6px;
      flex-shrink: 0;
    }
    .app-mode-toggle button {
      background: transparent;
      border: 0;
      color: var(--muted);
      padding: 4px 10px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      cursor: pointer;
      border-radius: 999px;
      transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
    }
    .app-mode-toggle button:hover { color: var(--fg); }
    .app-mode-toggle button.active {
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
      color: #0a0d12;
      box-shadow: var(--elev-1);
    }
    /* Mode-gated visibility. Default (no attribute) treats as beginner so
       first paint matches the post-init state and there's no flash of
       advanced sections to first-time visitors. */
    body[data-app-mode="beginner"] .power-only { display: none !important; }
    body[data-app-mode="power"] .beginner-only { display: none !important; }
    body:not([data-app-mode]) .power-only { display: none !important; }
    /* Beginner section gets a subtle accent tint to telegraph "this is the
       simplified path" without competing visually with the other sections. */
    .sidebar-section.beginner-section {
      background: linear-gradient(135deg, rgba(124,216,192,0.06) 0%, rgba(146,227,206,0.03) 100%);
      border-color: rgba(124,216,192,0.20);
    }
    .sidebar-section.beginner-section .sidebar-section-label {
      color: var(--accent2);
    }
    /* Beginner home page ("Today's Picks") layout */
    .beginner-home {
      padding: 22px 24px 40px;
      max-width: 1180px;
      margin: 0 auto;
    }
    .beginner-home-hero {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 22px;
    }
    .beginner-home-hero h1 {
      margin: 0;
      font-size: 26px;
      letter-spacing: -0.01em;
    }
    .beginner-home-hero .sub {
      color: var(--muted);
      font-size: 13px;
      max-width: 640px;
      line-height: 1.5;
    }
    /* Compact "Today's Picks" box on the home overview (renderIntroHome). */
    .home-picks-box { border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); padding: 14px 16px; margin-bottom: 18px; box-shadow: var(--elev-1); }
    .home-picks-box .hpb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
    .home-picks-box .hpb-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent2); }
    .home-picks-box .hpb-all { font-size: 11px; color: var(--accent); cursor: pointer; text-decoration: none; white-space: nowrap; }
    .home-picks-box .hpb-all:hover { text-decoration: underline; }
    .home-picks-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
    .home-pick { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--border-faint); border-radius: 8px; cursor: pointer; min-width: 0; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
    .home-pick:hover { border-color: var(--accent); background: var(--surface-hover); }
    .home-pick .hp-sym { font-family: var(--font-mono); font-weight: 700; font-size: 13px; flex-shrink: 0; }
    .home-pick .hp-strat { font-size: 11px; color: var(--muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .home-pick .hp-stat { font-size: 10px; color: var(--muted); white-space: nowrap; flex-shrink: 0; }
    .beginner-picks-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: 16px;
    }
    .beginner-card {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--panel);
      padding: 18px 18px 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      box-shadow: var(--elev-1);
      transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
    }
    .beginner-card:hover {
      border-color: var(--border-strong);
      transform: translateY(-1px);
    }
    .beginner-card .card-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 8px;
    }
    .beginner-card .card-strategy {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--accent2);
      font-weight: 700;
    }
    .beginner-card .card-symbol {
      font-family: var(--font-mono);
      font-size: 18px;
      font-weight: 700;
      color: var(--fg);
    }
    .beginner-card .card-trade {
      font-size: 13px;
      color: var(--fg);
      line-height: 1.5;
    }
    .beginner-card .card-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4px 14px;
      font-size: 12px;
      padding: 8px 0;
      border-top: 1px solid var(--border-faint);
      border-bottom: 1px solid var(--border-faint);
    }
    .beginner-card .card-stats .lbl {
      color: var(--muted);
    }
    .beginner-card .card-stats .val {
      font-family: var(--font-mono);
      font-weight: 600;
    }
    .beginner-card .card-stats .val.pos { color: var(--pos); }
    .beginner-card .card-stats .val.neg { color: var(--neg); }
    .beginner-card .card-why {
      font-size: 12px;
      line-height: 1.55;
      color: var(--muted);
    }
    .beginner-card .card-why strong {
      color: var(--fg);
      font-weight: 600;
    }
    .beginner-card .card-edge {
      font-size: 11px;
      padding: 4px 8px;
      border-radius: var(--radius-xs);
      background: var(--accent-soft);
      color: var(--accent2);
      align-self: flex-start;
      font-weight: 600;
    }
    .beginner-card .card-pnl {
      width: 100%;
      height: 70px;
    }
    .beginner-card .card-actions {
      display: flex;
      gap: 8px;
      margin-top: auto;
      padding-top: 8px;
    }
    .beginner-card .card-actions button {
      flex: 1;
      padding: 7px 10px;
      font-size: 11px;
      border-radius: var(--radius-xs);
      background: var(--panel2);
      color: var(--fg);
      border: 1px solid var(--border);
      cursor: pointer;
      font-weight: 600;
      transition: all var(--dur) var(--ease);
    }
    .beginner-card .card-actions button:hover {
      background: var(--surface-hover);
      border-color: var(--accent);
      color: var(--accent2);
    }
    .beginner-card .card-disclaimer {
      font-size: 10px;
      color: var(--muted2);
      line-height: 1.4;
      margin-top: 4px;
    }
    .beginner-empty {
      padding: 40px;
      text-align: center;
      color: var(--muted);
      font-size: 13px;
    }
    /* Educational tooltip */
    .b-term {
      border-bottom: 1px dotted var(--muted2);
      cursor: help;
      position: relative;
    }
    .b-tip-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 13px;
      height: 13px;
      border-radius: 50%;
      background: var(--panel2);
      color: var(--muted);
      font-size: 9px;
      font-weight: 700;
      margin-left: 3px;
      cursor: help;
      border: 1px solid var(--border);
      vertical-align: middle;
    }
    .b-tip-icon:hover { color: var(--accent2); border-color: var(--accent); }
    .b-tip-pop {
      position: absolute;
      bottom: calc(100% + 8px);
      left: 0;
      transform: translateX(-20%);
      background: var(--panel3);
      color: var(--fg);
      padding: 8px 12px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border-strong);
      font-size: 11px;
      font-weight: 400;
      line-height: 1.45;
      max-width: 260px;
      white-space: normal;
      text-transform: none;
      letter-spacing: 0;
      box-shadow: var(--elev-3);
      z-index: 9999;
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--dur) var(--ease);
    }
    .b-tip-wrap { position: relative; display: inline-block; }
    .b-tip-wrap:hover .b-tip-pop,
    .b-tip-wrap:focus-within .b-tip-pop { opacity: 1; pointer-events: auto; }
    /* Per-strategy beginner screener tables share the .rank-table look but
       want a slightly looser line-height for readability. */
    .beginner-screener-wrap { padding: 18px 22px; }
    .beginner-screener-wrap h2 {
      margin: 0 0 4px;
      font-size: 20px;
      letter-spacing: -0.01em;
    }
    .beginner-screener-wrap .lede {
      color: var(--muted);
      font-size: 12px;
      margin-bottom: 14px;
      max-width: 720px;
      line-height: 1.5;
    }
    .beginner-screener-wrap table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12.5px;
    }
    .beginner-screener-wrap th {
      text-align: left;
      padding: 8px 10px;
      border-bottom: 1px solid var(--border);
      color: var(--muted);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      font-size: 10.5px;
    }
    .beginner-screener-wrap td {
      padding: 10px;
      border-bottom: 1px solid var(--border-faint);
      font-family: var(--font-mono);
    }
    .beginner-screener-wrap tr:hover td {
      background: var(--row-hover);
    }
    @media (max-width: 720px) {
      .beginner-home { padding: 14px 12px 30px; }
      .beginner-picks-grid { grid-template-columns: 1fr; }
      .beginner-card { padding: 14px; }
      .beginner-screener-wrap { padding: 12px 8px; }
      .beginner-screener-wrap table { font-size: 11.5px; }
      .beginner-screener-wrap td { padding: 8px 6px; }
    }

    /* ─── GEX / Dealer Positioning page ─── */
    .gex-wrap { padding: 14px 18px 26px; max-width: 1500px; margin: 0 auto; }
    .gex-header {
      display: flex;
      flex-wrap: wrap;
      gap: 12px 18px;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }
    .gex-header h1 {
      margin: 0;
      font-size: 19px;
      letter-spacing: -0.01em;
    }
    .gex-header .gex-as-of {
      font-size: 11px;
      color: var(--muted);
      font-family: var(--font-mono);
    }
    .gex-controls {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      margin-bottom: 14px;
    }
    .gex-controls select {
      background: var(--panel2);
      color: var(--fg);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 6px 10px;
      font-size: 12.5px;
      font-family: var(--font-mono);
      min-width: 120px;
    }
    .gex-pills { display: flex; gap: 6px; }
    .gex-pill {
      background: var(--panel2);
      color: var(--muted);
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 5px 14px;
      font-size: 11.5px;
      cursor: pointer;
      transition: all var(--dur) var(--ease);
    }
    .gex-pill:hover { color: var(--fg); border-color: var(--border-strong); }
    .gex-pill.active {
      background: var(--accent);
      color: #0a0d12;
      border-color: var(--accent);
      font-weight: 600;
    }
    .gex-expiry-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 6px 4px 10px; font-size: 12px; }
    .gex-expiry-summary .ges-kv { color: var(--muted); }
    .gex-expiry-summary .ges-kv b { color: var(--fg); font-variant-numeric: tabular-nums; margin-left: 3px; }
    .gex-expiry-summary .ges-kv b.pos { color: var(--pos); }
    .gex-expiry-summary .ges-kv b.neg { color: var(--neg); }
    .gex-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 360px;
      gap: 16px;
      align-items: start;
    }
    .gex-chart-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 10px 12px 14px;
      min-height: 460px;
    }
    .gex-chart-card .gex-chart-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin: 0 4px 6px;
      font-size: 11px;
      color: var(--muted);
    }
    .gex-chart-host {
      width: 100%;
      height: 520px;
      position: relative;
    }
    .gex-live-wrap {
      width: 100%;
      height: 100%;
      display: grid;
      grid-template-rows: minmax(0, 1.5fr) minmax(0, 1fr);
      gap: 6px;
      position: relative;
    }
    .gex-live-panel {
      position: relative;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }
    .gex-live-title {
      font-size: 10.5px;
      color: var(--muted);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      margin: 0 4px 2px;
    }
    .gex-live-svg {
      flex: 1 1 auto;
      width: 100%;
      height: 100%;
      display: block;
    }
    .gex-live-bar {
      cursor: crosshair;
      transition: fill 0.12s ease;
    }
    .gex-live-bar:hover { fill: #fde68a !important; }
    .gex-live-tooltip {
      position: absolute;
      display: none;
      pointer-events: none;
      background: rgba(8,12,18,0.92);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 8px 10px;
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--fg);
      z-index: 20;
      max-width: 280px;
      white-space: nowrap;
    }
    .gex-live-tooltip .gex-tt-strike { font-weight: 700; font-size: 12px; color: #fde68a; margin-bottom: 4px; }
    .gex-live-tooltip .gex-tt-row { color: var(--muted); font-size: 10.5px; line-height: 1.5; }
    .gex-live-tooltip .gex-tt-row b { color: var(--fg); font-weight: 600; }
    .gex-chart-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin: 8px 4px 0;
      font-size: 11px;
      color: var(--muted);
      font-family: var(--font-mono);
    }
    .gex-chart-legend .swatch {
      display: inline-block;
      width: 12px;
      height: 3px;
      margin-right: 5px;
      vertical-align: middle;
      border-radius: 2px;
    }
    .gex-grid.cache-empty {
      grid-template-columns: minmax(0, 1fr);
    }
    .gex-chart-card.cache-empty .gex-chart-host {
      height: auto;
      min-height: 260px;
    }
    .gex-empty-banner {
      min-height: 244px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 10px;
      border: 1px solid rgba(96,165,250,0.28);
      border-radius: 8px;
      background: color-mix(in srgb, var(--panel2) 82%, rgba(96,165,250,0.18));
      padding: 22px;
      color: var(--fg);
    }
    .gex-empty-banner h2 {
      margin: 0;
      font-size: 18px;
      letter-spacing: 0;
    }
    .gex-empty-banner p {
      margin: 0;
      max-width: 680px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.55;
    }
    .gex-refresh-row {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 2px;
    }
    .gex-refresh-btn {
      border: 1px solid var(--accent);
      background: var(--accent);
      color: #0a0d12;
      border-radius: 8px;
      padding: 8px 13px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
    }
    .gex-refresh-btn:disabled {
      opacity: 0.58;
      cursor: not-allowed;
    }
    .gex-refresh-status {
      color: var(--muted);
      font-size: 12px;
      min-height: 18px;
    }
    .gex-side { display: flex; flex-direction: column; gap: 12px; }
    .gex-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 12px 14px;
    }
    .gex-card-label {
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-size: 10px;
      font-weight: 600;
      margin-bottom: 8px;
    }
    .gex-regime-pill {
      display: inline-block;
      padding: 5px 14px;
      border-radius: 999px;
      font-weight: 700;
      font-size: 13px;
      letter-spacing: 0.02em;
    }
    .gex-regime-pill.dampening { background: rgba(74,222,128,0.18); color: #4ade80; border: 1px solid rgba(74,222,128,0.35); }
    .gex-regime-pill.amplifying { background: rgba(248,113,113,0.18); color: #f87171; border: 1px solid rgba(248,113,113,0.35); }
    .gex-regime-pill.flat { background: var(--panel2); color: var(--muted); border: 1px solid var(--border); }
    .gex-regime-tagline {
      color: var(--muted2, var(--muted));
      font-size: 12px;
      margin-top: 8px;
      line-height: 1.45;
    }
    .gex-net {
      font-family: var(--font-mono);
      font-size: 18px;
      margin-top: 8px;
    }
    .gex-net.pos { color: #4ade80; }
    .gex-net.neg { color: #f87171; }
    .gex-rvc {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-top: 10px;
      font-family: var(--font-mono);
      font-size: 11px;
    }
    .gex-rvc .lbl { color: var(--muted); font-size: 10px; }
    .gex-rvc .val { font-size: 13px; }
    .gex-rvc .val.pos { color: #4ade80; }
    .gex-rvc .val.neg { color: #f87171; }
    .gex-levels { display: flex; flex-direction: column; gap: 8px; }
    .gex-level-row {
      display: grid;
      grid-template-columns: 90px 1fr auto;
      gap: 10px;
      align-items: center;
      font-family: var(--font-mono);
      font-size: 12px;
    }
    .gex-level-row .kind {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--muted);
    }
    .gex-level-row .strike { font-weight: 600; color: var(--fg); }
    .gex-level-row .dist { color: var(--muted); font-size: 11px; }
    .gex-level-row .mag { color: var(--muted); font-size: 11px; text-align: right; }
    .gex-level-row.closest .strike::after {
      content: "CLOSEST";
      font-size: 9px;
      background: var(--accent);
      color: #0a0d12;
      padding: 2px 6px;
      border-radius: 4px;
      margin-left: 6px;
      font-weight: 700;
      letter-spacing: 0.04em;
    }
    .gex-level-row.call .kind { color: #f59e0b; }
    .gex-level-row.put .kind  { color: #4ade80; }
    .gex-level-row.flip .kind { color: #a78bfa; }
    .gex-bar-list { display: flex; flex-direction: column; gap: 4px; font-family: var(--font-mono); font-size: 11px; }
    .gex-bar-row {
      display: grid;
      grid-template-columns: 36px 84px minmax(0, 1fr) 70px;
      gap: 8px;
      align-items: center;
    }
    .gex-bar-row .dte-label { color: var(--muted); }
    .gex-bar-row .expiry-label { color: var(--muted); font-size: 10px; }
    .gex-bar-row .bar {
      position: relative;
      height: 10px;
      background: var(--panel2);
      border-radius: 3px;
      overflow: hidden;
    }
    .gex-bar-row .bar-fill {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: 0;
      background: #4ade80;
      transform-origin: left;
      transition: width var(--dur) var(--ease);
    }
    .gex-bar-row.neg .bar-fill {
      background: #f87171;
      left: auto;
      right: 50%;
    }
    .gex-bar-row .val { color: var(--fg); text-align: right; font-size: 10.5px; }
    .gex-ai-btn {
      margin-top: 10px;
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
      color: #0a0d12;
      border: none;
      border-radius: 8px;
      padding: 8px 14px;
      font-weight: 700;
      font-size: 12px;
      cursor: pointer;
      width: 100%;
    }
    .gex-ai-btn:hover { filter: brightness(1.05); }
    .gex-ai-result {
      margin-top: 10px;
      padding: 10px 12px;
      background: var(--panel2);
      border-radius: 6px;
      font-size: 12px;
      line-height: 1.5;
      color: var(--fg);
      white-space: pre-wrap;
    }
    .gex-empty {
      color: var(--muted);
      font-size: 12.5px;
      padding: 18px 4px;
      text-align: center;
    }
    .gex-watchlist-card {
      margin-top: 16px;
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 12px 14px 4px;
    }
    .gex-watchlist-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 8px;
    }
    .gex-watchlist-title {
      font-size: 12.5px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--fg);
    }
    .gex-watchlist-sub {
      color: var(--muted);
      font-size: 11px;
      font-family: var(--font-mono);
      margin-top: 2px;
    }
    .gex-watchlist-refresh {
      background: var(--panel2);
      color: var(--fg);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 6px 12px;
      font-size: 11.5px;
      cursor: pointer;
    }
    .gex-watchlist-refresh:hover { border-color: var(--border-strong); }
    .gex-watchlist-refresh:disabled { opacity: 0.6; cursor: not-allowed; }
    /* ── Net GEX Heat Map (strike × expiration · gamma/vanna/charm) ── */
    .gex-heatmap-card {
      margin-top: 16px;
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 12px 14px 10px;
    }
    .gex-hm-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 10px;
    }
    .gex-hm-scroll { overflow: auto; max-height: 70vh; }
    .gex-hm-table {
      border-collapse: collapse;
      font-family: var(--font-mono);
      font-size: 10.5px;
      white-space: nowrap;
    }
    .gex-hm-table th, .gex-hm-table td {
      padding: 3px 7px;
      text-align: right;
      border: 1px solid var(--bg);
      min-width: 56px;
    }
    .gex-hm-table thead th {
      position: sticky;
      top: 0;
      background: var(--panel);
      color: var(--muted);
      font-weight: 600;
      text-align: center;
      z-index: 2;
    }
    .gex-hm-dte {
      display: block;
      font-size: 9px;
      font-weight: 400;
      color: var(--muted);
    }
    .gex-hm-table td.gex-hm-strike, .gex-hm-table th.gex-hm-strike {
      position: sticky;
      left: 0;
      background: var(--panel);
      color: var(--fg);
      font-weight: 600;
      z-index: 1;
    }
    .gex-hm-table thead th.gex-hm-strike { z-index: 3; }
    .gex-hm-spotrow td {
      background: var(--accent-bg, rgba(124, 216, 192, 0.16));
      color: var(--accent, #7cd8c0);
      text-align: center;
      font-weight: 700;
      font-size: 10px;
      letter-spacing: 0.08em;
      padding: 2px 6px;
    }
    .gex-hm-units {
      margin-top: 8px;
      color: var(--muted);
      font-size: 10.5px;
      font-family: var(--font-mono);
    }
    .gex-watchlist-table {
      width: 100%;
      border-collapse: collapse;
      font-family: var(--font-mono);
      font-size: 11.5px;
    }
    .gex-watchlist-table th {
      text-align: left;
      color: var(--muted);
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      font-size: 10px;
      padding: 6px 8px;
      border-bottom: 1px solid var(--border);
    }
    .gex-watchlist-table th.num { text-align: right; }
    .gex-watchlist-table td {
      padding: 6px 8px;
      border-bottom: 1px solid var(--border);
      color: var(--fg);
      vertical-align: middle;
    }
    .gex-watchlist-table td.num { text-align: right; }
    .gex-watchlist-table tr.row {
      cursor: pointer;
      transition: background 0.15s;
    }
    .gex-watchlist-table tr.row:hover td { background: var(--row-hover, rgba(255,255,255,0.04)); }
    .gex-watchlist-table tr.row.active td { background: rgba(96,165,250,0.12); }
    .gex-watchlist-table .sym { font-weight: 700; color: var(--fg); }
    .gex-watchlist-table .pos { color: #4ade80; }
    .gex-watchlist-table .neg { color: #f87171; }
    .gex-watchlist-table .pill {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .gex-watchlist-table .pill.dampening { background: rgba(74,222,128,0.16); color: #4ade80; }
    .gex-watchlist-table .pill.amplifying { background: rgba(248,113,113,0.16); color: #f87171; }
    .gex-watchlist-table .pill.flat { background: var(--panel2); color: var(--muted); }
    .gex-watchlist-table .pill.err { background: rgba(148,163,184,0.16); color: var(--muted); }
    @media (max-width: 1024px) {
      .gex-grid { grid-template-columns: 1fr; }
      .gex-chart-host { height: 440px; }
      .gex-watchlist-table { font-size: 11px; }
    }
    .direction-menu {
      display: none;
      flex-direction: column;
      gap: 7px;
      min-width: 0;
      position: absolute;
      left: calc(100% + 6px);
      top: -2px;
      width: 268px;
      max-height: 74vh;
      overflow-y: auto;
      background: var(--panel);
      border: 1px solid var(--border-strong);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 12px;
      z-index: 200;
    }
    .sidebar-section.flyout-open > .direction-menu { display: flex; }
    .direction-quick {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
    }
    .direction-action,
    .direction-leaf {
      width: 100%;
      min-height: 30px;
      border: 1px solid transparent;
      background: transparent;
      color: var(--fg-2);
      border-radius: 7px;
      padding: 6px 9px;
      font-size: 12.5px;
      text-align: left;
      cursor: pointer;
      transition: background var(--dur-fast) var(--ease),
                  border-color var(--dur-fast) var(--ease),
                  color var(--dur-fast) var(--ease);
    }
    /* Quick-actions keep a faint surface so they read as buttons;
       leaves are flat rows in the indented tree. */
    .direction-action {
      background: var(--panel2);
      border-color: var(--border);
      font-weight: 500;
    }
    .direction-action:hover,
    .direction-leaf:hover {
      background: var(--accent-bg);
      border-color: transparent;
      color: var(--fg);
    }
    .direction-action.active,
    .direction-leaf.active {
      background: var(--accent-bg);
      border-color: transparent;
      color: var(--accent);
      font-weight: 600;
    }
    /* Groups are flat now — no boxing/gradient cards; direction read
       from the colored summary label, not a tinted container. */
    .direction-group {
      border: none;
      border-radius: 0;
      background: transparent;
      overflow: visible;
    }
    .direction-group.bullish,
    .direction-group.bearish,
    .direction-group.pre-earnings {
      border: none;
      background: transparent;
    }
    .direction-group.bullish summary {
      color: var(--pos);
    }
    .direction-group.bearish summary {
      color: var(--neg);
    }
    .direction-group.pre-earnings summary {
      color: var(--warn);
    }
    .direction-group.bullish .direction-leaf:hover {
      background: rgba(111,220,140,0.12);
      color: var(--fg);
    }
    .direction-group.bearish .direction-leaf:hover {
      background: rgba(239,132,112,0.12);
      color: var(--fg);
    }
    .direction-group summary {
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 8px 2px 4px;
      cursor: pointer;
      font-family: var(--font-mono);
      font-size: 10.5px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted);
    }
    .direction-group summary::-webkit-details-marker { display: none; }
    .direction-group summary::after {
      content: "▾";
      color: var(--muted);
      font-size: 10px;
      transition: transform var(--dur-fast) var(--ease);
    }
    .direction-group:not([open]) summary::after { transform: rotate(-90deg); }
    .direction-group-body {
      display: grid;
      gap: 2px;
      padding: 0 0 6px 9px;
      margin-left: 5px;
      border-left: 1px solid var(--hairline);
    }
    .direction-leaf {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      min-width: 0;
      flex-wrap: nowrap;   /* single-line rows so verdict badges never wrap to line 2 */
    }
    .direction-leaf > span:first-child {
      display: block;
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .direction-leaf .direction-key {
      color: var(--muted2);
      font-size: 10px;
      flex: 0 0 auto;
      max-width: 45%;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .direction-leaf.has-strategy-badges {
      row-gap: 4px;
    }
    .direction-leaf .sidebar-strategy-badges {
      flex: 0 0 100%;
      min-width: 0;
      overflow: hidden;
    }
    .direction-leaf .strategy-badges {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 4px;
      min-width: 0;
      width: 100%;
    }
    .direction-leaf .strategy-badge {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .dir-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      border: 1px solid currentColor;
      border-radius: 999px;
      padding: 2px 8px;
      font-size: 11px;
      line-height: 1.35;
      font-weight: 700;
      white-space: nowrap;
      vertical-align: middle;
    }
    .dir-badge.bullish {
      background: rgba(34,197,94,0.13);
      color: #22c55e;
    }
    .dir-badge.bearish {
      background: rgba(239,68,68,0.13);
      color: #ef4444;
    }
    .dir-badge.neutral {
      background: rgba(148,163,184,0.14);
      color: #94a3b8;
    }
    .ap-empty-state-card {
      margin: 12px;
      padding: 32px;
      text-align: center;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: linear-gradient(180deg, var(--panel), var(--panel2));
    }
    .ap-empty-state-card h3 {
      margin: 0 0 8px;
      color: var(--fg);
      font-size: 18px;
      letter-spacing: 0;
    }
    .ap-empty-state-card p {
      max-width: 560px;
      margin: 0 auto 18px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.55;
    }
    .ap-empty-actions,
    .ap-strategy-filter-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
    }
    .ap-strategy-filter-row {
      justify-content: flex-start;
      padding: 8px 12px;
      border-bottom: 1px solid var(--border);
      background: var(--bg);
      align-items: center;
    }
    .ap-strategy-pill {
      padding: 3px 10px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: var(--panel2);
      color: var(--muted);
      font-size: 11px;
      line-height: 1.5;
      cursor: pointer;
    }
    .ap-strategy-pill.active {
      background: var(--accent);
      border-color: var(--accent);
      color: #0f1419;
      font-weight: 700;
    }
    .ap-positions-scroll {
      max-height: 520px;
      overflow: auto;
    }
    .ap-positions-scroll.ap-sticky thead th {
      position: sticky;
      top: 0;
      background: var(--panel);
      z-index: 2;
    }
    .ap-sparkline {
      display: block;
      width: 96px;
      height: 28px;
      max-width: 100%;
      overflow: visible;
    }
    .ap-sparkline-empty {
      color: var(--muted);
      font-size: 11px;
      white-space: nowrap;
    }
    .ap-drift-chip {
      display: inline-flex;
      align-items: center;
      padding: 2px 8px;
      border: 1px solid currentColor;
      border-radius: 999px;
      font-size: 11px;
      line-height: 1.35;
      font-weight: 700;
      white-space: nowrap;
    }
    .ap-drift-chip.promote { background: rgba(34,197,94,0.13); color: #22c55e; }
    .ap-drift-chip.watch { background: rgba(148,163,184,0.14); color: #94a3b8; }
    .ap-drift-chip.pause { background: var(--tint-warn); color: var(--warn); }
    .ap-drift-chip.kill { background: rgba(239,68,68,0.13); color: #ef4444; }
    .ap-closed-details {
      margin: 0;
      border-top: 1px solid var(--border);
      background: var(--panel);
    }
    .ap-closed-details > summary {
      display: flex;
      padding: 8px 12px;
      color: var(--fg);
      font-weight: 700;
    }
    .stock-play-badge {
      display: none;
      align-items: center;
      gap: 4px;
      border: 1px solid currentColor;
      border-radius: 999px;
      padding: 2px 8px;
      font-size: 10.5px;
      line-height: 1.35;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      white-space: nowrap;
    }
    .stock-play-badge.inline {
      display: inline-flex;
      flex: 0 0 auto;
      margin-left: auto;
    }
    .stock-play-badge.momentum {
      background: rgba(34,197,94,0.12);
      color: #86efac;
    }
    .stock-play-badge.reversal {
      background: rgba(245,158,11,0.13);
      color: #fbbf24;
    }
    .stock-play-badge.quality-other {
      background: rgba(96,165,250,0.13);
      color: #93c5fd;
    }
    .intro-card .stock-meta-line {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      margin-top: 12px;
      padding-top: 10px;
      border-top: 1px solid rgba(255,255,255,0.06);
      color: var(--muted2);
      font-family: var(--font-mono);
      font-size: 10.5px;
      line-height: 1.55;
    }
    .intro-card .stock-meta-pill {
      display: inline-flex;
      align-items: center;
      max-width: 100%;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 999px;
      padding: 2px 7px;
      background: rgba(255,255,255,0.025);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .stock-home-preview {
      display: grid;
      gap: 5px;
    }
    .stock-preview-row {
      display: block;
      min-width: 0;
    }
    .stock-preview-category {
      color: var(--accent);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-right: 6px;
    }
    .direction-filter-row {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      margin-top: 8px;
    }
    .findings-direction-row {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 8px;
    }
    /* Intro page styling — used by intro_home + per-section intros.
       Renders inside #rank-table area like other modes. */
    .intro-page {
      padding: 24px 28px;
      max-width: 1100px;
      margin: 0 auto;
      box-sizing: border-box;
      width: 100%;
    }
    /* When the rank-table is hosting a full-width intro page, opt the table
       into fixed layout so its cells inherit parent column width instead
       of growing to fit the largest child. The .intro-host class is set
       on rank-table by renderIntroHome / renderSectionIntro and removed
       when a normal data screener takes over (so screener tables keep
       natural sizing). */
    #rank-table.intro-host { table-layout: fixed; width: 100%; }
    #rank-table.intro-host td { word-break: break-word; white-space: normal; }
    .intro-page h1 {
      font-size: 28px;
      font-weight: 600;
      margin: 0 0 6px;
      color: var(--fg);
      letter-spacing: -0.01em;
    }
    /* Hero brand block on the home page — bigger, gradient-text Aperture wordmark
       with the camera-iris logo glow. Distinct from the persistent header brand
       (which stays compact). */
    .home-hero {
      display: flex;
      align-items: center;
      gap: 22px;
      padding: 36px 8px 18px;
      margin-bottom: 8px;
    }
    .home-hero-mark {
      width: 84px; height: 84px;
      flex: 0 0 auto;
      filter: drop-shadow(0 6px 24px rgba(217,144,79,0.35));
      animation: home-hero-pulse 4.5s ease-in-out infinite;
    }
    @keyframes home-hero-pulse {
      0%, 100% { filter: drop-shadow(0 6px 24px rgba(217,144,79,0.32)); }
      50%      { filter: drop-shadow(0 8px 32px rgba(146,227,206,0.55)); }
    }
    .home-hero-text {
      display: flex;
      flex-direction: column;
      gap: 0;
      min-width: 0;
    }
    .intro-page .home-hero-name {
      font-size: clamp(64px, 9vw, 96px);
      font-weight: 600;
      letter-spacing: -0.04em;
      line-height: 0.95;
      margin: 0;
      /* Sage gradient wordmark — same ramp as the hero brand mark beside it.
         The transparent text fill below REQUIRES this clipped background;
         without it "Themis" renders invisible on the page background (the
         gradient+clip pair was lost in the CSS extraction — restored). */
      background-image: linear-gradient(135deg, #aef0e0 0%, #92e3ce 35%, #7cd8c0 70%, #3d6c62 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
    }
    /* Light mode: the dark-theme ramp's pale stops wash out on near-white —
       use the light theme's deeper sage accents for contrast. */
    body[data-theme="light"] .intro-page .home-hero-name {
      background-image: linear-gradient(135deg, #2f8f79 0%, #247a66 55%, #19564a 100%);
    }
    .home-hero-tag {
      font-family: var(--font-mono);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.22em;
      color: var(--accent);
      margin: 0 0 2px;
    }
    .home-hero-sub {
      font-size: 15px;
      color: var(--muted);
      max-width: 720px;
      line-height: 1.55;
      margin: 14px 0 0;
      padding-left: 2px;
    }
    .home-trust-line {
      display: flex;
      gap: 12px;
      align-items: baseline;
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--muted);
      letter-spacing: 0.06em;
      margin: 28px 0 36px;
      flex-wrap: wrap;
    }
    .home-trust-line strong {
      color: var(--fg);
      font-weight: 500;
      letter-spacing: 0;
      font-variant-numeric: tabular-nums;
    }
    .home-trust-line .trust-sep { color: var(--border-strong); }
    @media (max-width: 720px) {
      .home-hero { gap: 14px; padding: 24px 4px 12px; }
      .home-hero-mark { width: 60px; height: 60px; }
    }
    .intro-page .intro-back {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 500;
      color: var(--muted);
      text-decoration: none;
      margin-bottom: 18px;
      padding: 6px 12px;
      background: var(--panel2);
      border: 1px solid var(--border);
      border-radius: 999px;
      transition: color var(--dur) var(--ease),
                  background var(--dur) var(--ease),
                  border-color var(--dur) var(--ease),
                  transform var(--dur-fast) var(--ease);
    }
    .intro-page .intro-back:hover {
      color: var(--accent);
      background: var(--panel3);
      border-color: var(--border-strong);
      transform: translateX(-2px);
    }
    .intro-page .intro-tagline {
      color: var(--muted);
      font-size: 14px;
      margin-bottom: 28px;
      max-width: 720px;
      line-height: 1.5;
    }
    .intro-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 14px;
    }
    .intro-card {
      background: var(--panel);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 14px;
      padding: 22px 24px;
      cursor: pointer;
      transition: border-color var(--dur) var(--ease),
                  transform var(--dur-fast) var(--ease),
                  background var(--dur) var(--ease);
      overflow: hidden;
      min-width: 0;
    }
    .intro-card * {
      max-width: 100%;
      box-sizing: border-box;
    }
    .intro-card:hover {
      border-color: rgba(255,255,255,0.14);
      background: var(--panel2);
      transform: scale(1.01);
    }
    .intro-card[data-direction-filter="bullish"] {
      border-color: rgba(34,197,94,0.26);
      background: linear-gradient(135deg, rgba(34,197,94,0.10), rgba(34,197,94,0.025) 62%, var(--panel));
    }
    .intro-card[data-direction-filter="bullish"]:hover {
      border-color: rgba(34,197,94,0.45);
    }
    .intro-card[data-direction-filter="bearish"] {
      border-color: rgba(239,68,68,0.28);
      background: linear-gradient(135deg, rgba(239,68,68,0.11), rgba(239,68,68,0.025) 62%, var(--panel));
    }
    .intro-card[data-direction-filter="bearish"]:hover {
      border-color: rgba(239,68,68,0.48);
    }
    .intro-card .card-title {
      font-family: var(--font-sans);
      font-weight: 500;
      font-size: 18px;
      letter-spacing: -0.015em;
      color: var(--fg);
      margin: 0 0 8px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .intro-card .card-icon {
      flex-shrink: 0;
      font-size: 18px;
      line-height: 1;
    }
    .intro-card .card-label {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .intro-card .card-arrow {
      flex-shrink: 0;
      color: var(--muted);
      font-size: 13px;
      font-weight: 400;
      transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
    }
    .intro-card:hover .card-arrow {
      color: var(--accent);
      transform: translateX(3px);
    }
    .intro-card .card-desc {
      font-family: var(--font-sans);
      font-weight: 400;
      font-size: 13px;
      line-height: 1.55;
      color: var(--muted);
      margin: 0 0 12px;
      white-space: normal;
      overflow-wrap: anywhere;
    }
    .intro-card .card-desc:last-child { margin-bottom: 0; }
    .intro-card .card-tabs-preview {
      font-family: var(--font-mono);
      font-size: 10.5px;
      color: var(--muted2);
      line-height: 1.7;
      padding-top: 10px;
      border-top: 1px solid rgba(255,255,255,0.06);
      letter-spacing: 0.02em;
      white-space: normal;
      overflow-wrap: anywhere;
    }
    .intro-grid .intro-card { animation: card-fade-in 0.6s var(--ease) backwards; }
    .intro-grid .intro-card:nth-child(1) { animation-delay: 0.20s; }
    .intro-grid .intro-card:nth-child(2) { animation-delay: 0.27s; }
    .intro-grid .intro-card:nth-child(3) { animation-delay: 0.34s; }
    .intro-grid .intro-card:nth-child(4) { animation-delay: 0.41s; }
    .intro-grid .intro-card:nth-child(5) { animation-delay: 0.48s; }
    .intro-grid .intro-card:nth-child(6) { animation-delay: 0.55s; }
    .intro-grid .intro-card:nth-child(7) { animation-delay: 0.62s; }
    @keyframes card-fade-in {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .intro-grid .intro-card { animation: none; }
    }
    .intro-section-title {
      font-size: 11px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      font-weight: 600;
      margin: 32px 0 10px;
    }
    .intro-section-title:first-child { margin-top: 0; }
    select.mode-select {
      width: 100%;
      padding: 7px 26px 7px 10px;
      background-color: var(--panel2);
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: 999px;
      font-size: 12px;
      cursor: pointer;
      color-scheme: dark;
      appearance: none;
      background-image:
        linear-gradient(45deg, transparent 50%, var(--muted) 50%),
        linear-gradient(135deg, var(--muted) 50%, transparent 50%);
      background-position:
        calc(100% - 14px) 50%,
        calc(100% - 9px) 50%;
      background-size: 5px 5px, 5px 5px;
      background-repeat: no-repeat;
      transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
    }
    select.mode-select:hover {
      background-color: var(--panel3);
      border-color: var(--border-strong);
      color: var(--fg);
    }
    select.mode-select:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: var(--ring);
    }
    select.mode-select option {
      background: var(--panel);
      color: var(--text);
    }
    #cache-history-menu {
      background: rgba(16,16,19,0.94) !important;
      border-color: var(--border) !important;
      border-radius: 14px !important;
      box-shadow: var(--shadow-soft) !important;
      backdrop-filter: blur(12px);
    }
    /* Hide the source-of-truth buttons in the hidden container */
    #hidden-mode-buttons { display: none !important; }
    .output-wrap {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      display: flex;
      flex-direction: column;
      min-height: 0;
      box-shadow: var(--shadow-soft);
    }
    .output-head {
      padding: 10px 14px;
      border-bottom: 1px solid var(--border);
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      font-size: 13px;
      color: var(--muted);
    }
    .output-head > span:first-child {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      order: 2;
      margin-left: auto;
    }
    .output-head code {
      color: var(--muted);
      font-size: 11px;
      order: 3;
      flex-basis: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      opacity: 0.7;
      min-width: 0;
    }
    .output-head code:empty { display: none; }
    #active-mode-label {
      background: var(--accent2);
      color: #0f1419;
      padding: 3px 12px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.03em;
      white-space: nowrap;
      flex-shrink: 0;
      order: 1;
    }
    .output-head code {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      min-width: 0;
      max-width: 100%;
    }
    .output-head > span:first-child { flex-shrink: 0; }
    #active-mode-label:empty { display: none; }
    .output {
      flex: 1;
      overflow: auto;
      padding: 14px;
      margin: 0;
      font-family: "Cascadia Mono", "Consolas", monospace;
      font-size: 12px;
      line-height: 1.45;
      white-space: pre;
      color: var(--text);
    }
    .status-dot {
      display: inline-block;
      width: 8px; height: 8px;
      border-radius: 50%;
      background: #555;
      margin-right: 6px;
    }
    .status-dot.running { background: var(--warn); animation: pulse 1.2s infinite; }
    .status-dot.done    { background: var(--pos); }
    @keyframes pulse { 50% { opacity: 0.3; } }

    h3 {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--muted);
      margin: 18px 0 8px;
      font-weight: 600;
    }
    h3:first-child { margin-top: 0; }
    h1, h2, h3, h4 {
      color: var(--fg);
      letter-spacing: 0;
    }
    .section-title {
      font-size: 24px;
      line-height: 1.15;
      font-weight: 600;
      letter-spacing: 0;
      color: var(--fg);
    }
    .hero-price {
      font-size: clamp(48px, 6vw, 56px);
      line-height: 0.95;
      font-weight: 400;
      letter-spacing: -0.02em;
      color: var(--fg);
      font-variant-numeric: tabular-nums;
    }

    .actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    .actions > button { text-align: center; }
    button {
      background: var(--panel2);
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 10px 12px;
      font-size: 13px;
      cursor: pointer;
      font-family: inherit;
      text-align: left;
      box-shadow: var(--elev-1);
      transition: transform var(--dur-fast) var(--ease),
                  background var(--dur) var(--ease),
                  border-color var(--dur) var(--ease),
                  color var(--dur) var(--ease),
                  box-shadow var(--dur) var(--ease);
    }
    button:hover:not(:disabled) {
      background: var(--panel3);
      border-color: var(--border-strong);
      transform: translateY(-1px);
      box-shadow: var(--elev-2);
    }
    /* Tactile press state — subtle compress + reset shadow */
    button:active:not(:disabled) {
      transform: translateY(0);
      box-shadow: var(--elev-1);
      transition-duration: var(--dur-fast);
    }
    button:disabled { opacity: 0.4; cursor: not-allowed; }
    button.primary { background: var(--accent); color: #0f0f11; border-color: var(--accent); font-weight: 600; }
    button.primary:hover:not(:disabled) {
      background: var(--accent2);
      box-shadow: var(--elev-2), 0 0 24px rgba(217,144,79,0.18);
    }
    button.danger  { background: var(--tint-neg); color: var(--neg); border-color: var(--tint-neg-border); font-weight: 600; }
    button.danger:hover:not(:disabled) {
      background: var(--tint-neg);
      border-color: var(--tint-neg-border);
      box-shadow: var(--elev-2);
    }
    button.big {
      grid-column: 1 / -1;
      padding: 14px;
      text-align: center;
    }

    label {
      display: block;
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 3px;
      margin-top: 10px;
    }
    input, select, textarea {
      width: 100%;
      background: var(--bg);
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 7px 9px;
      font-size: 13px;
      font-family: inherit;
    }
    textarea {
      resize: vertical;
      font-family: var(--font-mono);   /* Tier 2: align with global mono */
      font-size: 12px;
      line-height: 1.5;
      margin-top: 6px;
    }
    .wl-actions {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 8px;
      margin-top: 6px;
    }
    /* Tier 2: richer input focus — accent border + faint accent glow ring,
       no awkward double-border. Works for both keyboard and mouse focus. */
    input:focus, select:focus, textarea:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(217,144,79,0.12);
    }
    body[data-theme="light"] input:focus,
    body[data-theme="light"] select:focus,
    body[data-theme="light"] textarea:focus {
      box-shadow: 0 0 0 3px rgba(47,143,121,0.16);
    }

    /* Tracked-symbols panel */
    .tracked-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 18px;
      margin-bottom: 4px;
    }
    .tracked-head .label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted);
      font-weight: 600;
    }
    .tracked-head .label .count { color: var(--accent); margin-left: 4px; }
    .tracked-head button {
      padding: 3px 8px;
      font-size: 11px;
    }
    .chips {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      padding: 8px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 6px;
      max-height: 140px;
      overflow-y: auto;
    }
    .chips:empty::after {
      content: "(empty)";
      color: var(--muted);
      font-size: 12px;
    }
    .chip {
      display: inline-block;
      padding: 3px 10px;
      background: var(--panel2);
      border: 1px solid var(--border);
      border-radius: 999px;
      font-size: 11px;
      font-family: "Cascadia Mono", "Consolas", monospace;
      color: var(--text);
      line-height: 1.4;
    }
    .chip.port { border-color: #3a6a8f; }
    .chip.wl   { border-color: #4a7a5a; }
    .chip.both { border-color: var(--accent); color: var(--accent); }
    .tracked-err {
      font-size: 11px;
      color: var(--danger);
      margin-top: 4px;
    }

    /* Rankings table panel */
    #table-out {
      flex: 1;
      display: none;
      flex-direction: column;
      overflow: hidden;
      padding: 16px 18px;
      min-height: 0;
    }
    #table-out.show { display: flex; }
    /* Belt-and-braces: even with minmax(0, 1fr) on main, ensure the table
       scroll container itself can shrink below its natural width so wide
       tables scroll horizontally INSIDE this box rather than expanding it. */
    #table-out, .table-scroll { min-width: 0; }
    /* Screener banner host — a definite-width block above the scrolling table.
       :empty collapses it so non-banner screeners reclaim the space. */
    #screener-banner { flex: 0 0 auto; min-width: 0; }
    #screener-banner:empty { display: none; }
    .table-controls {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
      font-size: 12px;
      color: var(--muted);
      flex-shrink: 0;
    }
    .table-controls .spacer { flex: 1; }
    .table-controls select,
    .table-controls button {
      padding: 4px 10px;
      font-size: 11px;
    }
    #table-title { color: var(--text); font-weight: 600; }
    /* Bottom clearance so the fixed .bottom-dock (bottom:16px, ~52px tall)
       never occludes the last rows of a scrolled table (trades, screeners). */
    .table-scroll { flex: 1; overflow: auto; padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
    .table-scroll,
    table {
      scrollbar-color: var(--scroll-thumb) transparent;
    }
    table {
      border-color: var(--border);
    }
    table th {
      color: var(--muted);
      font-weight: 600;
      letter-spacing: 0;
    }
    table td {
      color: var(--text);
      border-color: var(--border) !important;
    }
    /* Subtle row hover — accent-tinted for a richer dark-mode feel */
    table tbody tr {
      transition: background-color var(--dur-fast) var(--ease);
    }
    table tbody tr:hover td {
      background: var(--row-hover);
    }
    #rank-table {
      /* width:max-content + min-width:100% lets the table grow with its
         (nowrap) cells and overflow horizontally INSIDE .table-scroll
         instead of forcing the page wide. min-width:100% keeps it filling
         the container when the natural cell-sum is narrower. Mirrors the
         pattern from f10a0cc on the single-symbol-report strategy section. */
      min-width: 100%;
      width: max-content;
      border-collapse: collapse;
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--text);
    }
    #rank-table th {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted);
      padding: 4px 6px;
      border-bottom: 1px solid var(--border);
      background: var(--panel);
      position: sticky;
      top: 0;
      text-align: left;
      cursor: pointer;
      user-select: none;
      white-space: nowrap;
    }
    #rank-table th.active { color: var(--accent); }
    #rank-table td {
      padding: 3px 6px;
      font-size: 11px;
      border-bottom: 1px solid var(--border);
      white-space: nowrap;
      transition: background-color var(--dur-fast) var(--ease);
    }
    #rank-table.single-report-host {
      table-layout: fixed;
      width: 100%;
    }
    #rank-table.single-report-host > tbody > tr > td {
      white-space: normal;
      word-break: break-word;
    }
    .single-report-news-card {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      box-sizing: border-box;
      white-space: normal !important;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .single-report-news-card,
    .single-report-news-card * {
      max-width: 100%;
      white-space: normal !important;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .single-report-news-card ol {
      margin: 0;
      padding-left: 18px;
    }
    #rank-table .dense-table-wrap {
      overflow-x: auto;
      max-width: 100%;
    }
    #rank-table table.dense-table {
      border-collapse: collapse !important;
      table-layout: auto !important;
      width: max-content !important;
      min-width: 100% !important;
      font-size: 11px !important;
    }
    #rank-table table.dense-table th {
      padding: 4px 6px !important;
      font-size: 10px !important;
      text-transform: uppercase;
      font-weight: 600;
      white-space: nowrap;
      color: var(--muted);
      border-bottom: 1px solid var(--border);
    }
    #rank-table table.dense-table td {
      padding: 3px 6px !important;
      font-size: 11px !important;
      white-space: nowrap;
    }
    #rank-table .dense-cell-pill {
      display: inline-block;
      padding: 1px 5px;
      font-size: 10px;
      line-height: 1.2;
      white-space: nowrap;
    }
    /* Tier 2: Loading skeleton — replaces "Scanning…" text with a shimmering
       row placeholder so the user gets immediate visual feedback that
       something is happening. Use class="skeleton" on any element. */
    .skeleton {
      position: relative;
      overflow: hidden;
      background: var(--panel2);
      border-radius: var(--radius-xs);
      color: transparent !important;
      user-select: none;
    }
    .skeleton::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(
        90deg,
        transparent 0%,
        var(--skeleton-sheen) 50%,
        transparent 100%
      );
      animation: skel-shimmer 1.4s var(--ease) infinite;
    }
    @keyframes skel-shimmer {
      from { transform: translateX(-100%); }
      to   { transform: translateX(100%); }
    }
    /* Loading state for table-message — shows subtle pulse instead of static text */
    .scanning-pulse::before {
      content: "";
      display: inline-block;
      width: 6px; height: 6px;
      margin-right: 8px;
      border-radius: 50%;
      background: var(--accent);
      vertical-align: middle;
      animation: scan-pulse 1.2s var(--ease) infinite;
    }
    @keyframes scan-pulse {
      0%, 100% { opacity: 0.3; transform: scale(0.85); }
      50%      { opacity: 1; transform: scale(1.1); }
    }
    /* Findings panels contain prose — let text wrap naturally */
    #rank-table td:has(.findings-panel),
    .findings-panel,
    .findings-panel * {
      white-space: normal;
    }
    .findings-panel {
      word-wrap: break-word;
      overflow-wrap: break-word;
      padding: 20px;
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 16px;
      color: var(--text);
      line-height: 1.58;
    }
    /* Normalize left edges so headings, paragraphs, lists, tables, and the
       wrapper <div style="padding:16px 20px"> blocks inside each *_HTML
       template all start at the same horizontal position. Previously each
       block element pulled its own left indent and the column read as
       zig-zagging text. */
    .findings-panel > div { padding-left: 0 !important; padding-right: 0 !important; }
    .findings-panel p,
    .findings-panel h2,
    .findings-panel h3,
    .findings-panel h4,
    .findings-panel ul,
    .findings-panel ol,
    .findings-panel table,
    .findings-panel blockquote,
    .findings-panel pre {
      margin-left: 0;
    }
    .findings-panel ul,
    .findings-panel ol { padding-left: 1.25em; }
    .findings-panel li { margin-left: 0; padding-left: 0.25em; }
    .findings-panel h2,
    .findings-panel h3 {
      font-size: 22px;
      font-weight: 600;
      color: var(--fg);
      text-transform: none;
      letter-spacing: 0;
      margin: 20px 0 10px;
    }
    .findings-panel h3:first-child { margin-top: 0; }
    .findings-panel table {
      margin-top: 12px;
      width: 100%;
      border-radius: 12px;
      overflow: hidden;
      background: var(--surface-subtle);
      font-size: 12.5px;
      margin-bottom: 24px;
    }
    .findings-summary {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 12px;
      margin-bottom: 24px;
    }
    .findings-summary .stat {
      background: var(--panel);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 12px;
      padding: 14px 16px;
    }
    .findings-summary .stat-label {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.10em;
      margin: 0 0 6px;
    }
    .findings-summary .stat-value {
      font-family: var(--font-mono);
      font-variant-numeric: tabular-nums;
      font-size: 22px;
      font-weight: 500;
      color: var(--fg);
      letter-spacing: -0.01em;
    }
    .findings-summary .stat-value.pos { color: var(--pos); }
    .findings-summary .stat-value.neg { color: var(--neg); }
    .holm-significance-summary {
      background: var(--panel);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 10px;
      padding: 12px 16px;
      margin: 0 0 16px;
      font-size: 13px;
      line-height: 1.55;
      color: var(--fg);
    }
    .holm-significance-summary b {
      color: var(--fg);
      font-weight: 600;
    }
    .holm-significance-summary .muted { color: var(--muted); }
    .holm-significance-summary b.pos { color: var(--pos); }
    .findings-panel td.predictor-name {
      font-family: var(--font-mono);
      font-size: 11.5px;
      color: var(--fg);
      white-space: nowrap;
    }
    .findings-panel td.num {
      font-family: var(--font-mono);
      font-variant-numeric: tabular-nums;
      text-align: right;
    }
    .findings-panel td.spread.pos { color: var(--pos); }
    .findings-panel td.spread.neg { color: var(--neg); }
    .findings-panel th.survives-correction-heading,
    .findings-panel td.survives-correction {
      text-align: center;
    }
    .findings-panel .survives-yes {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 1px solid var(--pos);
      color: var(--pos);
      font-size: 11px;
      font-weight: 600;
      background: transparent;
    }
    .findings-panel .survives-no {
      color: var(--muted);
      font-size: 13px;
      letter-spacing: 0.10em;
    }
    .findings-panel .decile-spread-table-row td {
      padding: 3px 10px 10px !important;
      border-top: 0;
    }
    .findings-panel .decile-spread-row {
      display: flex;
      align-items: center;
      gap: 2px;
      height: 22px;
      min-width: 220px;
    }
    .findings-panel .decile-bar {
      flex: 1;
      height: 100%;
      border-radius: 3px;
      position: relative;
      transition: opacity var(--dur-fast) var(--ease);
    }
    .findings-panel .decile-bar.decile-0 { background: rgba(124,216,192,0.10); }
    .findings-panel .decile-bar.decile-1 { background: rgba(124,216,192,0.18); }
    .findings-panel .decile-bar.decile-2 { background: rgba(124,216,192,0.27); }
    .findings-panel .decile-bar.decile-3 { background: rgba(124,216,192,0.36); }
    .findings-panel .decile-bar.decile-4 { background: rgba(124,216,192,0.45); }
    .findings-panel .decile-bar.decile-5 { background: rgba(124,216,192,0.55); }
    .findings-panel .decile-bar.decile-6 { background: rgba(124,216,192,0.65); }
    .findings-panel .decile-bar.decile-7 { background: rgba(124,216,192,0.75); }
    .findings-panel .decile-bar.decile-8 { background: rgba(124,216,192,0.85); }
    .findings-panel .decile-bar.decile-9 { background: rgba(124,216,192,1.00); }
    .findings-panel .decile-spread-row.negative .decile-bar.decile-0 { background: rgba(248,113,113,0.10); }
    .findings-panel .decile-spread-row.negative .decile-bar.decile-1 { background: rgba(248,113,113,0.18); }
    .findings-panel .decile-spread-row.negative .decile-bar.decile-2 { background: rgba(248,113,113,0.27); }
    .findings-panel .decile-spread-row.negative .decile-bar.decile-3 { background: rgba(248,113,113,0.36); }
    .findings-panel .decile-spread-row.negative .decile-bar.decile-4 { background: rgba(248,113,113,0.45); }
    .findings-panel .decile-spread-row.negative .decile-bar.decile-5 { background: rgba(248,113,113,0.55); }
    .findings-panel .decile-spread-row.negative .decile-bar.decile-6 { background: rgba(248,113,113,0.65); }
    .findings-panel .decile-spread-row.negative .decile-bar.decile-7 { background: rgba(248,113,113,0.75); }
    .findings-panel .decile-spread-row.negative .decile-bar.decile-8 { background: rgba(248,113,113,0.85); }
    .findings-panel .decile-spread-row.negative .decile-bar.decile-9 { background: rgba(248,113,113,1.00); }
    .findings-panel .decile-bar:hover { opacity: 0.85; }
    .findings-panel .decile-bar-value {
      position: absolute;
      bottom: calc(100% + 4px);
      left: 50%;
      transform: translateX(-50%);
      background: var(--panel2);
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 6px;
      padding: 4px 8px;
      font-family: var(--font-mono);
      font-size: 10.5px;
      color: var(--fg);
      white-space: nowrap;
      pointer-events: none;
      opacity: 0;
      transition: opacity var(--dur-fast) var(--ease);
      z-index: 2;
    }
    .findings-panel .decile-bar:hover .decile-bar-value { opacity: 1; }
    .findings-panel .stability-footer {
      background: var(--panel);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 12px;
      padding: 16px 20px;
      margin-top: 24px;
    }
    .findings-panel .stability-footer-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      font-size: 12px;
      color: var(--muted);
    }
    .findings-panel .stability-verdict {
      font-family: var(--font-mono);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.10em;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: 999px;
      display: inline-flex;
    }
    .findings-panel .stability-verdict.stable {
      background: rgba(34,197,94,0.10);
      color: var(--pos);
      border: 1px solid rgba(34,197,94,0.30);
    }
    .findings-panel .stability-verdict.moderate {
      background: rgba(255,184,77,0.10);
      color: var(--warn);
      border: 1px solid rgba(255,184,77,0.30);
    }
    .findings-panel .stability-verdict.unstable {
      background: rgba(248,113,113,0.10);
      color: var(--neg);
      border: 1px solid rgba(248,113,113,0.30);
    }
    .findings-panel .stability-windows {
      display: flex;
      gap: 4px;
      margin-top: 12px;
    }
    .findings-panel .stability-window {
      flex: 1;
      height: 14px;
      min-width: 12px;
      border-radius: 2px;
      background: var(--panel2);
    }
    .findings-panel .stability-window.win-pos { background: var(--pos); opacity: 0.7; }
    .findings-panel .stability-window.win-neg { background: var(--neg); opacity: 0.7; }
    .findings-panel .stability-window.win-flat { background: var(--muted); opacity: 0.3; }
    .findings-panel .correlation-footprint {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid rgba(255,255,255,0.06);
      font-size: 12px;
      color: var(--muted);
    }
    .findings-panel .correlation-footprint b {
      color: var(--fg);
      font-weight: 500;
    }
    .findings-tab {
      border-radius: 999px !important;
      border: 1px solid transparent !important;
      background: transparent !important;
      color: var(--muted) !important;
      transform: none !important;
    }
    .findings-tab:hover {
      background: var(--surface-hover) !important;
      color: var(--fg) !important;
    }
    .findings-tab.active {
      background: var(--surface-active) !important;
      color: var(--fg) !important;
      border-color: var(--border) !important;
    }
    /* But preserve nowrap inside data tables nested in findings panels */
    .findings-panel table th,
    .findings-panel table td {
      white-space: nowrap;
    }
    #rank-table th.num,
    #rank-table td.num {
      text-align: right;
      font-variant-numeric: tabular-nums;
    }
    #rank-table td.pos, .pos { color: var(--pos); }
    #rank-table td.neg, .neg { color: var(--neg); }
    #rank-table td.warn, .warn { color: var(--warn); }
    #rank-table td.sym { color: var(--accent2); font-weight: 600; cursor: pointer; }
    #rank-table td.sym:hover { text-decoration: underline; }
    #rank-table td.src { color: var(--muted); font-size: 10px; }
    .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    details { margin-top: 8px; }
    summary {
      cursor: pointer;
      color: var(--muted);
      font-size: 12px;
      padding: 6px 0;
      user-select: none;
      list-style: none;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    summary::-webkit-details-marker { display: none; }
    summary::before {
      content: "›";
      display: inline-block;
      font-size: 14px;
      line-height: 1;
      color: var(--muted2);
      transition: transform 0.16s ease;
      transform: rotate(0deg);
    }
    details[open] > summary::before { transform: rotate(90deg); }
    summary:hover { color: var(--text); }
    summary:hover::before { color: var(--fg); }
    .single-form { display: none; padding: 10px; background: var(--bg); border-radius: 6px; margin-top: 8px; }
    .single-form.show { display: block; }
    .help {
      font-size: 11px;
      color: var(--muted);
      margin-top: 4px;
      line-height: 1.4;
    }

    /* Sidebar collapsible groups */
    .sidebar-group {
      margin-top: 12px;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: var(--surface-subtle);
      overflow: hidden;
    }
    .sidebar-group > summary {
      padding: 10px 12px;
      font-size: 12px;
      font-weight: 600;
      color: var(--text);
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .sidebar-group > summary .count { color: var(--accent); font-size: 11px; font-weight: 400; }
    .sidebar-group > summary:hover { background: var(--surface-hover); }
    .sidebar-group[open] > summary { border-bottom: 1px solid var(--border); }
    .sidebar-group > .actions,
    .sidebar-group > .chips,
    .sidebar-group > .tracked-err,
    .sidebar-group > div { padding: 8px 12px; }
    .sidebar-group .chips { padding-top: 6px; padding-bottom: 6px; }

    /* Market Events & News */
    .event-timeline { display: flex; flex-direction: column; gap: 0; }
    .event-day-header {
      font-size: 12px; font-weight: 600; color: var(--accent2);
      padding: 10px 10px 4px; border-bottom: 1px solid var(--border);
      position: sticky; top: 0; background: var(--panel); z-index: 1;
    }
    .event-day-header.today { color: var(--accent); }
    .event-card {
      display: grid; grid-template-columns: 60px 1fr auto;
      gap: 8px; align-items: center;
      padding: 8px 10px; border-bottom: 1px solid var(--border);
      font-size: 12px; transition: background 0.15s;
    }
    .event-card:hover { background: var(--panel2); }
    .event-card .ev-time { color: var(--muted); font-family: "Cascadia Mono", "Consolas", monospace; font-size: 11px; }
    .event-card .ev-title { font-weight: 500; }
    .event-card .ev-badge {
      display: inline-block; padding: 2px 8px; border-radius: 10px;
      font-size: 10px; font-weight: 600; text-transform: uppercase;
    }
    .ev-badge.fomc { background: #3a1a4e; color: #c49bff; }
    .ev-badge.cpi  { background: #1a3a4e; color: #7bc8f6; }
    .ev-badge.ppi  { background: #1a4e3a; color: #7bf6c8; }
    .ev-badge.jobs { background: #4e3a1a; color: #f6c87b; }
    .ev-badge.trump { background: #4e1a1a; color: #f67b7b; }
    .ev-badge.tariff { background: #4e2a1a; color: #f6a07b; }
    .ev-badge.other { background: #2d3846; color: var(--muted); }
    .ev-badge.high { border: 1px solid currentColor; }
    .event-card .ev-notes { grid-column: 2/4; color: var(--muted); font-size: 11px; padding-top: 2px; }
    .event-card .ev-actions { display: flex; gap: 6px; }
    .event-card .ev-actions button {
      padding: 2px 8px; font-size: 10px; border-radius: 4px;
    }
    .ev-past { opacity: 0.5; }
    .add-event-form {
      display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
      padding: 12px; border-bottom: 2px solid var(--border);
      background: var(--bg);
    }
    .add-event-form .full { grid-column: 1 / -1; }
    .add-event-form label { margin: 0; font-size: 11px; }
    .add-event-form input, .add-event-form select, .add-event-form textarea {
      padding: 5px 8px; font-size: 12px;
    }
    .news-item {
      padding: 10px 12px; border-bottom: 1px solid var(--border);
      font-size: 12px;
    }
    .news-item:hover { background: var(--panel2); }
    .news-item .news-title { font-weight: 500; color: var(--text); }
    .news-item .news-title a { color: var(--accent2); text-decoration: none; }
    .news-item .news-title a:hover { text-decoration: underline; }
    .news-item .news-meta { color: var(--muted); font-size: 11px; margin-top: 3px; }
    .news-item .news-desc { color: var(--muted); font-size: 11px; margin-top: 4px; line-height: 1.4; }
    .news-headline-row { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
    .news-headline-row .news-title { flex: 1 1 320px; min-width: 180px; }
    .news-sentiment-badge {
      display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
      padding: 2px 7px; border-radius: 4px; border: 1px solid var(--border);
      font-size: 10px; font-weight: 700; line-height: 1.4; letter-spacing: 0;
    }
    .news-sentiment-badge.bullish { color: var(--pos); background: var(--tint-pos); border-color: color-mix(in srgb, var(--pos) 42%, var(--border)); }
    .news-sentiment-badge.bearish { color: var(--neg); background: var(--tint-neg); border-color: color-mix(in srgb, var(--neg) 42%, var(--border)); }
    .news-sentiment-badge.neutral { color: var(--muted); background: var(--panel2); }
    .news-catalyst-chip {
      display: inline-flex; align-items: center; padding: 1px 5px; border-radius: 4px;
      background: var(--panel2); color: var(--muted); border: 1px solid var(--border);
      font-size: 10px; font-weight: 600; text-transform: uppercase;
    }
    .news-local-summary { color: var(--text); font-size: 11px; margin-top: 5px; line-height: 1.4; }
    .event-filter-bar {
      display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px;
      border-bottom: 1px solid var(--border); background: var(--bg);
      align-items: center; font-size: 11px;
    }
    .event-filter-bar label { margin: 0; display: flex; align-items: center; gap: 3px; cursor: pointer; }

    /* Scan tabs strip (right panel, above table) */
    #scan-tabs {
      display: none;
      gap: 4px;
      padding: 8px 12px;
      border-bottom: 1px solid var(--border);
      background: var(--panel);
      flex-shrink: 0;
      align-items: center;
    }
    #scan-tabs.show { display: flex; }
    #scan-tabs .scan-tab {
      padding: 7px 16px;
      background: transparent;
      color: var(--muted);
      border: 1px solid transparent;
      border-radius: 999px;
      cursor: pointer;
      font-size: 13px;
      font-weight: 500;
    }
    #scan-tabs .scan-tab:hover { color: var(--fg); }
    #scan-tabs .scan-tab.active {
      color: var(--fg);
      background: var(--surface-active);
      border-color: var(--border-strong);
      font-weight: 600;
    }

    /* Scan options panel (revealed by Options tab) */
    #scan-options-bar {
      display: none;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      border-bottom: 1px solid var(--border);
      font-size: 12px;
      flex-shrink: 0;
      background: var(--panel);
    }
    #scan-options-bar.show { display: flex; }
    #scan-options-bar label {
      display: flex;
      align-items: center;
      gap: 4px;
      cursor: pointer;
    }
    #scan-options-bar .sep {
      width: 1px;
      height: 18px;
      background: var(--border);
    }
    #scan-options-bar .universe-group {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
    }
    #scan-options-bar .universe-header {
      color: var(--muted);
      font-weight: 600;
      font-size: 11px;
      margin-right: 2px;
      min-width: 56px;
    }
    /* Pill-style toggle for universe + scope checkboxes — mirrors trade modal aesthetic.
       Hides the raw checkbox; the surrounding label becomes the visual control. */
    #scan-options-bar label.universe-pill {
      padding: 4px 11px;
      border: 1px solid var(--border);
      background: var(--bg);
      color: var(--muted);
      cursor: pointer;
      font-size: 12px;
      font-weight: 500;
      border-radius: 14px;
      transition: background 0.12s, border-color 0.12s, color 0.12s;
      user-select: none;
      line-height: 1.4;
      display: inline-flex;
      align-items: center;
    }
    #scan-options-bar label.universe-pill input[type=checkbox] {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
      pointer-events: none;
    }
    #scan-options-bar label.universe-pill:hover {
      border-color: var(--accent);
      color: var(--fg);
    }
    #scan-options-bar label.universe-pill:has(input:checked) {
      background: var(--accent);
      color: #fff;
      border-color: var(--accent);
    }
    #scan-options-bar .dte-group {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    #scan-options-bar .dte-label {
      color: var(--muted);
      font-size: 11px;
      margin-right: 2px;
    }
    .pill-row,
    .range-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
      padding: 8px 12px;
      border-bottom: 1px solid var(--border);
      background: var(--surface-subtle);
    }
    .pill-row .pill-label,
    .range-row .pill-label {
      color: var(--muted);
      font-size: 11px;
      margin-right: 4px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
    .pill-row button,
    .range-pill,
    .port-chart-period,
    .port-chart-mode,
    .port-chart-metric,
    .jl-wing-pill,
    .dp-strat,
    .dp-tier,
    .pre-earn-filter {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 28px;
      padding: 4px 11px !important;
      border: 1px solid var(--border) !important;
      border-radius: 999px !important;
      background: transparent !important;
      color: var(--muted) !important;
      font-size: 11px !important;
      font-weight: 600;
      text-align: center;
    }
    .pill-row button:hover:not(:disabled),
    .range-pill:hover:not(:disabled),
    .port-chart-period:hover:not(:disabled),
    .port-chart-mode:hover:not(:disabled),
    .port-chart-metric:hover:not(:disabled) {
      background: var(--surface-hover) !important;
      color: var(--fg) !important;
      transform: none;
    }
    .pill-row button.primary,
    .pill-row button.active,
    .range-pill.primary,
    .range-pill.active,
    .port-chart-period.primary,
    .port-chart-mode.primary,
    .port-chart-metric.primary {
      background: var(--fg) !important;
      border-color: var(--fg) !important;
      color: var(--bg) !important;
      font-weight: 600 !important;
    }
    .modal-overlay,
    .dialog-overlay,
    .ai-passcode-overlay,
    body > div[style*="position:fixed"][style*="justify-content:center"] {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(0, 0, 0, 0.70) !important;
      backdrop-filter: blur(12px) !important;
      -webkit-backdrop-filter: blur(12px) !important;
      animation: overlay-in 180ms var(--ease);
    }
    .ai-passcode-overlay { z-index: 99999; }
    @keyframes overlay-in {
      from {
        opacity: 0;
        backdrop-filter: blur(0);
        -webkit-backdrop-filter: blur(0);
      }
      to {
        opacity: 1;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .modal-overlay,
      .dialog-overlay,
      .ai-passcode-overlay,
      body > div[style*="position:fixed"][style*="justify-content:center"] {
        animation: none;
      }
    }
    .modal,
    .modal-card,
    .modal-panel,
    .tinfo-shell,
    dialog,
    .ai-passcode-overlay > div,
    body > div[style*="position:fixed"][style*="justify-content:center"] > div {
      position: relative;
      background: var(--panel2) !important;
      border: 1px solid rgba(255, 255, 255, 0.10) !important;
      border-radius: 14px !important;
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.50) !important;
      color: var(--fg);
      font-family: var(--font-sans) !important;
      max-height: calc(100vh - 80px);
      max-width: calc(100vw - 32px);
      overflow: auto;
    }
    .modal,
    .modal-panel,
    dialog {
      max-width: 540px;
      width: calc(100vw - 32px);
      padding: 24px 28px;
    }
    .modal-wide { max-width: 760px; }
    .modal-xl { max-width: 960px; }
    .modal h2,
    .modal-title,
    dialog h2,
    .modal-card > div:first-child > div:first-child,
    .modal-card > div:first-child > div:first-child > div:first-child,
    .tinfo-symbol,
    .ai-passcode-overlay > div > div:first-child,
    body > div[style*="position:fixed"][style*="justify-content:center"] > div > div:first-child > div:first-child,
    body > div[style*="position:fixed"][style*="justify-content:center"] > div > div:first-child > div:first-child > div:first-child {
      font-family: var(--font-sans) !important;
      font-weight: 600 !important;
      font-size: 22px !important;
      letter-spacing: -0.02em !important;
      color: var(--fg) !important;
      margin: 0 0 6px !important;
    }
    .modal h2 + p,
    .modal-subtitle,
    dialog h2 + p,
    .modal-card > div:first-child > div:nth-child(2),
    .modal-card > div:first-child > div:first-child > div:nth-child(2),
    .tinfo-subtitle,
    .ai-passcode-overlay > div > div:nth-child(2),
    body > div[style*="position:fixed"][style*="justify-content:center"] > div > div:first-child > div:nth-child(2),
    body > div[style*="position:fixed"][style*="justify-content:center"] > div > div:first-child > div:first-child > div:nth-child(2) {
      font-size: 13px !important;
      color: var(--muted) !important;
      margin: 0 0 20px !important;
      line-height: 1.55 !important;
    }
    .modal-close,
    .dialog-close,
    #tinfo-close,
    #ai-picker-close,
    #ai-modal-close,
    #ta-ai-close,
    #ssr-ai-close {
      position: absolute !important;
      top: 14px !important;
      right: 14px !important;
      width: 32px !important;
      height: 32px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 0 !important;
      background: transparent !important;
      border: 1px solid rgba(255, 255, 255, 0.08) !important;
      border-radius: 50% !important;
      color: var(--muted) !important;
      cursor: pointer;
      font-size: 0 !important;
      line-height: 1 !important;
      box-shadow: none !important;
      transition: border-color var(--dur) var(--ease),
                  color var(--dur) var(--ease);
    }
    .modal-close::before,
    .dialog-close::before,
    #tinfo-close::before,
    #ai-picker-close::before,
    #ai-modal-close::before,
    #ta-ai-close::before,
    #ssr-ai-close::before {
      content: "\00d7";
      font-size: 18px;
      line-height: 1;
    }
    .modal-close:hover,
    .dialog-close:hover,
    #tinfo-close:hover,
    #ai-picker-close:hover,
    #ai-modal-close:hover,
    #ta-ai-close:hover,
    #ssr-ai-close:hover {
      border-color: rgba(255, 255, 255, 0.18) !important;
      color: var(--fg) !important;
      background: transparent !important;
      transform: none !important;
      box-shadow: none !important;
    }
    .modal .btn-primary,
    .modal-card button.primary,
    button[type="submit"].primary,
    .submit-btn,
    #ai-passcode-ok,
    body > div[style*="position:fixed"][style*="justify-content:center"] > div > div:last-child button:last-child {
      background: #f5f5f5 !important;
      color: #000 !important;
      border: 1px solid #f5f5f5 !important;
      border-radius: 999px !important;
      padding: 9px 22px !important;
      font-family: var(--font-sans) !important;
      font-weight: 500 !important;
      font-size: 13px !important;
      letter-spacing: -0.005em !important;
      cursor: pointer;
      box-shadow: none !important;
      text-align: center;
      transition: transform var(--dur-fast) var(--ease),
                  background var(--dur) var(--ease);
    }
    .modal .btn-primary:hover,
    .modal-card button.primary:hover,
    button[type="submit"].primary:hover,
    .submit-btn:hover,
    #ai-passcode-ok:hover,
    body > div[style*="position:fixed"][style*="justify-content:center"] > div > div:last-child button:last-child:hover {
      background: #fff !important;
      transform: scale(1.01) !important;
      box-shadow: none !important;
    }
    .modal .btn-primary:disabled,
    .modal-card button.primary:disabled,
    button[type="submit"].primary:disabled,
    .submit-btn:disabled,
    #ai-passcode-ok:disabled,
    body > div[style*="position:fixed"][style*="justify-content:center"] > div > div:last-child button:last-child:disabled {
      background: #2a2a2e !important;
      color: var(--muted) !important;
      border-color: var(--border) !important;
      cursor: not-allowed;
      transform: none !important;
    }
    .modal .btn-secondary,
    .modal .cancel-btn,
    .modal-card > div:last-child button:not(.primary),
    #ai-passcode-cancel,
    body > div[style*="position:fixed"][style*="justify-content:center"] > div > div:last-child button:first-child {
      background: transparent !important;
      color: var(--fg) !important;
      border: 1px solid rgba(255, 255, 255, 0.12) !important;
      border-radius: 999px !important;
      padding: 9px 22px !important;
      font-family: var(--font-sans) !important;
      font-weight: 500 !important;
      font-size: 13px !important;
      cursor: pointer;
      box-shadow: none !important;
      text-align: center;
      transition: border-color var(--dur) var(--ease);
    }
    .modal .btn-secondary:hover,
    .modal .cancel-btn:hover,
    .modal-card > div:last-child button:not(.primary):hover,
    #ai-passcode-cancel:hover,
    body > div[style*="position:fixed"][style*="justify-content:center"] > div > div:last-child button:first-child:hover {
      border-color: rgba(255, 255, 255, 0.24) !important;
      background: transparent !important;
      transform: none !important;
      box-shadow: none !important;
    }
    .modal input[type="text"],
    .modal input[type="number"],
    .modal input[type="email"],
    .modal input[type="password"],
    .modal select,
    .modal textarea,
    .modal-card input,
    .modal-card select,
    .modal-card textarea,
    .ai-passcode-overlay input,
    body > div[style*="position:fixed"][style*="justify-content:center"] > div input,
    body > div[style*="position:fixed"][style*="justify-content:center"] > div select,
    body > div[style*="position:fixed"][style*="justify-content:center"] > div textarea {
      background: var(--bg) !important;
      color: var(--fg) !important;
      border: 1px solid var(--border-strong) !important;
      caret-color: var(--accent) !important;
      border-radius: 8px !important;
      padding: 10px 12px !important;
      font-family: var(--font-sans) !important;
      font-size: 14px !important;
      width: 100%;
      box-shadow: none !important;
      transition: border-color var(--dur) var(--ease);
    }
    .modal input:focus,
    .modal select:focus,
    .modal textarea:focus,
    .modal-card input:focus,
    .modal-card select:focus,
    .modal-card textarea:focus,
    .ai-passcode-overlay input:focus,
    body > div[style*="position:fixed"][style*="justify-content:center"] > div input:focus,
    body > div[style*="position:fixed"][style*="justify-content:center"] > div select:focus,
    body > div[style*="position:fixed"][style*="justify-content:center"] > div textarea:focus {
      outline: none;
      border-color: var(--accent) !important;
      box-shadow: none !important;
    }
    .modal label,
    .modal-card label,
    .ai-passcode-overlay label,
    body > div[style*="position:fixed"][style*="justify-content:center"] > div label {
      font-size: 11px !important;
      color: var(--muted) !important;
      text-transform: uppercase;
      letter-spacing: 0.08em !important;
      margin: 0 0 6px !important;
      display: block;
    }
    .modal input[type="number"],
    .modal-card input[type="number"],
    body > div[style*="position:fixed"][style*="justify-content:center"] > div input[type="number"] {
      font-family: var(--font-mono) !important;
      font-variant-numeric: tabular-nums;
      text-align: right;
    }
    .tinfo-shell {
      width: min(1180px, 94vw);
      max-height: 88vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .tinfo-shell,
    .tinfo-shell * {
      box-sizing: border-box;
    }
    .tinfo-header {
      padding: 18px 20px 14px;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
    }
    .tinfo-symbol {
      font-size: 40px;
      line-height: 1;
      font-weight: 400;
      letter-spacing: -0.01em;
      color: var(--fg);
    }
    .tinfo-subtitle {
      font-size: 11px;
      color: var(--muted);
      margin-top: 6px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }
    .tinfo-tabs {
      display: flex;
      gap: 5px;
      padding: 10px 16px;
      border-bottom: 1px solid var(--border);
      background: var(--surface-subtle);
      min-width: 0;
      max-width: 100%;
      overflow-x: auto;
    }
    .tinfo-tab {
      padding: 7px 13px !important;
      border: 1px solid transparent !important;
      border-radius: 999px !important;
      background: transparent !important;
      color: var(--muted) !important;
      font-size: 12px !important;
      min-height: 30px;
      transform: none !important;
    }
    .tinfo-tab:hover {
      background: var(--surface-hover) !important;
      color: var(--fg) !important;
    }
    .tinfo-tab.active {
      background: var(--surface-active) !important;
      color: var(--fg) !important;
      border-color: var(--border) !important;
    }
    .tinfo-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 300px;
      gap: 0;
      min-height: 0;
      min-width: 0;
      flex: 1;
    }
    .tinfo-main {
      padding: 18px 20px;
      overflow-y: auto;
      overflow-x: hidden;
      min-width: 0;
      font-size: 12px;
    }
    .tinfo-side {
      padding: 18px;
      border-left: 1px solid var(--border);
      background: var(--surface-subtle);
      overflow-y: auto;
      overflow-x: hidden;
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-width: 0;
    }
    .info-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 14px;
      min-width: 0;
      max-width: 100%;
    }
    .info-card h4 {
      margin: 0 0 10px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }
    .tinfo-kpi-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .tinfo-kpi-label {
      color: var(--muted);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
    .tinfo-kpi-value {
      margin-top: 2px;
      color: var(--fg);
      font-size: 18px;
      font-weight: 500;
      font-variant-numeric: tabular-nums;
    }
    .tinfo-chart-shell {
      min-width: 0;
      max-width: 100%;
      overflow: hidden;
    }
    .tradingview-widget-container {
      background: var(--panel);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 14px;
      padding: 1px;
      height: 480px;
      overflow: hidden;
      min-width: 0;
      max-width: 100%;
    }
    .tradingview-widget-container > div,
    .tradingview-widget-container iframe {
      width: 100%;
      height: 100%;
    }
    .tv-symbol-chart {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      height: 360px;
      border-radius: 0;
      border-left: 0;
      border-right: 0;
    }
    .tinfo-news-list {
      width: 100%;
      max-width: 90ch;
      min-width: 0;
    }
    .tinfo-news-row,
    .tinfo-news-row a,
    .tinfo-news-meta,
    .tinfo-news-summary,
    .tinfo-news-reason {
      max-width: 100%;
      min-width: 0;
      overflow-wrap: anywhere;
      word-break: break-word;
      white-space: normal;
    }
    .tv-trade-chart {
      height: 280px;
      border-radius: 10px;
      margin-bottom: 14px;
    }
    .lw-chart-container {
      height: 440px;
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 14px;
      overflow: hidden;
    }
    .lw-chart-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 14px;
      padding: 8px 2px 0;
      color: var(--muted);
      font-size: 11px;
      font-variant-numeric: tabular-nums;
    }
    .lw-chart-legend span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
    }
    .lw-chart-legend i {
      display: inline-block;
      width: 18px;
      height: 2px;
      border-radius: 99px;
      background: currentColor;
    }
    @media (max-width: 980px) {
      .tinfo-layout { grid-template-columns: 1fr; }
      .tinfo-side { border-left: 0; border-top: 1px solid var(--border); }
      .tv-symbol-chart { height: 300px; }
    }
    .bottom-dock {
      position: fixed;
      bottom: calc(16px + env(safe-area-inset-bottom, 0px));
      left: 50%;
      transform: translateX(-50%);
      z-index: 80;
      display: flex;
      align-items: center;
      gap: 8px;
      max-width: calc(100vw - 24px);
      overflow-x: auto;
      padding: 8px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 999px;
      background: rgba(19, 19, 22, 0.90);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      scrollbar-width: none;
    }
    .bottom-dock::-webkit-scrollbar { display: none; }
    .bottom-dock .dock-divider {
      width: 1px;
      height: 22px;
      flex: 0 0 auto;
      background: rgba(255, 255, 255, 0.10);
      margin: 0 2px;
    }
    .dock-pill,
    .bottom-dock button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 38px;
      padding: 8px 14px;
      border-radius: 999px;
      background: transparent;
      border: 1px solid transparent;
      color: var(--muted);
      font-family: var(--font-sans);
      font-weight: 500;
      font-size: 12.5px;
      text-align: center;
      cursor: pointer;
      box-shadow: none;
      transform: none;
      white-space: nowrap;
      flex: 0 0 auto;
      transition: background var(--dur) var(--ease),
                  color var(--dur) var(--ease),
                  border-color var(--dur) var(--ease);
    }
    .dock-pill:hover,
    .bottom-dock button:hover:not(:disabled) {
      background: rgba(255, 255, 255, 0.05);
      color: var(--fg);
      border-color: rgba(255, 255, 255, 0.08);
      box-shadow: none;
      transform: none;
    }
    .dock-pill.active,
    .bottom-dock button.active {
      background: rgba(255, 255, 255, 0.08);
      color: var(--fg);
      border-color: rgba(255, 255, 255, 0.12);
      box-shadow: none;
    }
    .dock-pill .pill-icon {
      font-size: 14px;
      line-height: 1;
    }
    .dock-pill .pill-label {
      font-variant-numeric: tabular-nums;
    }
    .bottom-dock .dock-watch-wrap {
      position: relative;
      display: inline-flex;
    }
    .bottom-dock button.position-watch-pill,
    .bottom-dock button.dock-pill {
      position: relative;
    }
    .dock-pill .pill-badge,
    .position-watch-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      margin-left: 4px;
      background: var(--accent);
      color: #000;
      border-radius: 999px;
      border: 1px solid transparent;
      font-family: var(--font-mono);
      font-size: 10px;
      line-height: 18px;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      text-align: center;
      box-shadow: none;
    }
    .dock-pill .pill-badge.severity-high,
    .position-watch-badge.severity-high {
      background: var(--neg);
      color: #fff;
    }
    .dock-pill .dock-spend-badge {
      display: inline-flex;
      align-items: center;
      padding: 0 5px;
      margin-left: 5px;
      height: 16px;
      background: transparent;
      color: var(--muted);
      border: 1px solid var(--border);
      border-radius: 4px;
      font-family: var(--font-mono);
      font-size: 9px;
      line-height: 14px;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
      pointer-events: none;
    }
    .dock-pill .dock-spend-badge.dock-spend-cap-warn {
      color: var(--warn);
      border-color: var(--warn);
    }
    .dock-pill .pill-badge.empty,
    .position-watch-badge.empty {
      background: transparent;
      color: var(--muted);
      border-color: rgba(255, 255, 255, 0.10);
    }
    .dock-dropdown,
    .position-watch-menu {
      display: none;
      position: fixed;
      bottom: calc(64px + env(safe-area-inset-bottom, 0px));
      left: 50%;
      transform: translateX(-50%);
      width: min(420px, calc(100vw - 32px));
      max-height: 60vh;
      overflow-y: auto;
      padding: 14px 16px;
      background: var(--panel2);
      border: 1px solid rgba(255, 255, 255, 0.10);
      border-radius: 14px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.50);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      color: var(--fg);
      font-size: 13px;
      z-index: 90;
      animation: dropdown-in 180ms var(--ease);
    }
    #saved-scans-menu.dock-dropdown {
      position: fixed !important;
      right: auto !important;
      top: auto !important;
      bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      min-width: 0 !important;
      width: min(420px, calc(100vw - 32px)) !important;
      max-height: 60vh !important;
      padding: 14px 16px !important;
      background: var(--panel2) !important;
      border: 1px solid rgba(255, 255, 255, 0.10) !important;
      border-radius: 14px !important;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.50) !important;
      backdrop-filter: blur(20px) !important;
      -webkit-backdrop-filter: blur(20px) !important;
      z-index: 90 !important;
    }
    .dock-dropdown.open,
    .position-watch-menu.open {
      display: block;
    }
    @keyframes dropdown-in {
      from { opacity: 0; transform: translate(-50%, 6px); }
      to   { opacity: 1; transform: translate(-50%, 0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .dock-dropdown,
      .position-watch-menu {
        animation: none;
      }
    }
    .position-watch-alert {
      display: flex;
      gap: 10px;
      padding: 10px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      font-size: 13px;
      line-height: 1.5;
    }
    .dock-dropdown .alert-row:last-child,
    .position-watch-alert:last-child {
      border-bottom: 0;
    }
    .dock-dropdown .alert-severity {
      flex-shrink: 0;
      width: 3px;
      min-height: 28px;
      height: auto;
      margin-top: 4px;
      border-radius: 2px;
      background: var(--muted);
    }
    .dock-dropdown .alert-severity.high { background: var(--neg); }
    .dock-dropdown .alert-severity.medium { background: var(--warn); }
    .dock-dropdown .alert-severity.low { background: var(--muted); }
    .dock-dropdown .alert-rule {
      font-family: var(--font-mono);
      font-size: 10.5px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
    .dock-dropdown .alert-message { color: var(--fg); }
    .dock-dropdown .alert-symbol {
      font-weight: 600;
      color: var(--accent);
    }
    .dock-dropdown .alert-timestamp {
      font-family: var(--font-mono);
      font-size: 10.5px;
      color: var(--muted);
      margin-left: auto;
    }
    @media (max-width: 720px) {
      .bottom-dock {
        gap: 6px;
        padding: 6px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
      }
      .dock-pill,
      .bottom-dock button {
        min-height: 38px;
        padding: 8px 10px;
        gap: 6px;
      }
      .bottom-dock .pill-label { display: none; }
      .dock-dropdown,
      .position-watch-menu,
      #saved-scans-menu.dock-dropdown {
        bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
      }
    }

    /* ─────────────────────────────────────────────────────────────────
       Themis Quant redesign — component layer (tq-*)
       Namespaced so it never clashes with the existing Fey-DNA system.
       Ported from design_handoff_themis_quant_redesign/styles.css and
       wired to the live token set. Used by the reshaped views (Phase 3+).
       ───────────────────────────────────────────────────────────────── */
    .tq-page { padding: 4px 2px 24px; }
    .tq-eyebrow {
      font-family: var(--font-mono);
      font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em;
      color: var(--muted); display: inline-flex; align-items: center; gap: 8px;
    }
    .tq-eyebrow::before { content:""; display:block; width:18px; height:1px; background:var(--accent); }
    .tq-h-display { font-size: clamp(28px,4vw,44px); line-height:1.04; letter-spacing:-0.03em; font-weight:500; color:var(--fg); margin:0; }
    .tq-h-section { font-size: clamp(21px,2.6vw,30px); line-height:1.1; letter-spacing:-0.024em; font-weight:500; color:var(--fg); margin:0; }
    .tq-h-block { font-size:18px; line-height:1.25; letter-spacing:-0.015em; font-weight:600; color:var(--fg); margin:0; }
    .tq-lede { font-size:15px; line-height:1.55; color:var(--fg-2); margin:0; }
    .tq-card { background: var(--panel); border:1px solid var(--border); border-radius: var(--radius); }
    .tq-card-pad { padding: 18px; }
    .tq-divider { height:1px; background:var(--border); width:100%; }
    .tq-grid-2 { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap:14px; }
    .tq-grid-3 { display:grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap:14px; }
    /* KV / stat tiles */
    .tq-stat-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap:12px; }
    .tq-kv { background: var(--panel); border:1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; display:flex; flex-direction:column; gap:6px; }
    .tq-kv-label { font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:0.12em; color:var(--muted); }
    .tq-kv-value { font-size:22px; font-weight:600; color:var(--fg); font-variant-numeric:tabular-nums; line-height:1.1; }
    .tq-kv-sub { font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; }
    /* Chips */
    .tq-chip { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; font-family:var(--font-mono); font-size:11px; letter-spacing:0.04em; border-radius:999px; border:1px solid var(--border-strong); color:var(--muted); background:rgba(255,255,255,0.02); }
    .tq-chip .dot { width:6px; height:6px; border-radius:999px; background:currentColor; }
    .tq-chip.pos { color:var(--pos); border-color:rgba(111,220,140,0.22); background:rgba(111,220,140,0.06); }
    .tq-chip.neg { color:var(--neg); border-color:rgba(239,132,112,0.22); background:rgba(239,132,112,0.06); }
    .tq-chip.warn { color:var(--warn); border-color:rgba(216,200,115,0.22); background:rgba(216,200,115,0.06); }
    .tq-chip.accent { color:var(--accent); border-color:rgba(124,216,192,0.25); background:var(--accent-bg); }
    /* Mini bars */
    .tq-bar-track { width:100%; height:6px; background:rgba(255,255,255,0.05); border-radius:999px; overflow:hidden; }
    .tq-bar-fill { height:100%; background:var(--accent); border-radius:999px; }
    /* SubNav (content-top horizontal tabs) */
    .tq-subnav { display:flex; align-items:center; gap:2px; flex-wrap:wrap; border-bottom:1px solid var(--border); margin-bottom:14px; }
    .tq-subnav-tab { position:relative; padding:9px 14px; font-size:13px; font-weight:500; color:var(--muted); background:none; border:none; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition: color 160ms var(--ease); }
    .tq-subnav-tab:hover { color:var(--fg-2); }
    .tq-subnav-tab.active { color:var(--fg); border-bottom-color:var(--accent); }
    .tq-subnav-tab .tq-count { color:var(--muted-2); font-size:11px; margin-left:5px; font-variant-numeric:tabular-nums; }
    /* Second-row chip filters */
    .tq-chiprow { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:14px; }
    .tq-chiprow-chip { padding:5px 12px; font-size:12px; font-weight:500; color:var(--fg-2); cursor:pointer; background:var(--panel); border:1px solid var(--border); border-radius:999px; transition: border-color 160ms var(--ease), color 160ms var(--ease), background 160ms var(--ease); }
    .tq-chiprow-chip:hover { border-color:var(--border-strong); color:var(--fg); }
    .tq-chiprow-chip.active { color:#0a0b0d; background:var(--accent); border-color:var(--accent); font-weight:600; }
    /* Clean data table */
    .tq-table { width:100%; border-collapse:collapse; font-size:13px; }
    .tq-table th { text-align:left; font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:0.1em; color:var(--muted); font-weight:500; padding:8px 12px; border-bottom:1px solid var(--border); white-space:nowrap; }
    .tq-table td { padding:10px 12px; border-bottom:1px solid var(--hairline); color:var(--fg-2); font-variant-numeric:tabular-nums; }
    .tq-table tr:last-child td { border-bottom:0; }
    .tq-table tbody tr:hover td { background:var(--surface-subtle); }
    .tq-table .tq-tk { color:var(--fg); font-weight:600; }
    /* Section header row (eyebrow + title + meta) */
    .tq-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:14px; flex-wrap:wrap; }
    .tq-spark { display:block; }
    /* ── Friction-verdict classification (Options strategies) ──
       GO = net-credit + held-to-expiry + loss-bounded (survives 10% friction).
       CAUTION = qualified (cash-secured basis only). NO-GO = open-tail / debit-fragile.
       "Winners only" hides NO-GO leaves via display:none — the buttons stay in the
       DOM (wiring intact) so a future backtest that flips a verdict re-shows them. */
    .strat-verdict-bar { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:2px 2px 8px; }
    .strat-verdict-cap { font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:0.1em; color:var(--muted-2); }
    .strat-winners-toggle { display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-size:11px; color:var(--muted); background:none; border:none; padding:2px; transition:color var(--dur) var(--ease); }
    .strat-winners-toggle:hover { color:var(--fg-2); }
    .strat-winners-toggle .swt-track { width:26px; height:15px; border-radius:999px; background:var(--panel3); border:1px solid var(--border); position:relative; transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease); flex-shrink:0; }
    .strat-winners-toggle .swt-thumb { position:absolute; top:1px; left:1px; width:11px; height:11px; border-radius:999px; background:var(--muted); transition:left var(--dur) var(--ease), background var(--dur) var(--ease); }
    body.winners-only .strat-winners-toggle { color:var(--accent); }
    body.winners-only .strat-winners-toggle .swt-track { background:var(--accent-bg); border-color:rgba(124,216,192,0.4); }
    body.winners-only .strat-winners-toggle .swt-thumb { left:12px; background:var(--accent); }
    /* Preferences sidebar panel (winners toggle · mode toggle · Anthropic key) */
    .pref-rows { display:flex; flex-direction:column; gap:14px; margin-top:4px; }
    .pref-row { display:flex; flex-direction:column; gap:5px; align-items:flex-start; }
    .pref-row .pref-hint { font-size:10px; color:var(--muted); line-height:1.35; }
    .pref-label { font-size:11px; color:var(--fg-2); font-weight:600; }
    .pref-label .pref-hint { font-weight:400; }
    .pref-key-actions { display:flex; gap:6px; margin-top:2px; }
    #prefs-group #anthropic_key { margin-bottom:0; }
    #anthropic-key-status { font-size:10px; line-height:1.35; color:var(--muted); }
    #anthropic-key-status.ok { color:var(--accent); }
    #anthropic-key-status.warn { color:var(--warn); }
    #anthropic-key-status.err { color:var(--neg); }
    .verdict-badge { font-family:var(--font-mono); font-size:8.5px; font-weight:600; letter-spacing:0.03em; padding:1px 5px; border-radius:999px; flex-shrink:0; line-height:1.5; order:-1; text-align:center; }
    .verdict-badge.go { color:#0a0b0d; background:var(--accent); }
    .verdict-badge.caution { color:var(--warn); background:rgba(216,200,115,0.10); border:1px solid rgba(216,200,115,0.3); }
    .verdict-badge.nogo { color:var(--muted-2); background:rgba(255,255,255,0.03); border:1px solid var(--border); }
    body.winners-only .direction-menu[data-section="options"] .direction-leaf.verdict-nogo,
    body.winners-only .direction-menu[data-section="stocks"] .direction-leaf.verdict-nogo { display:none; }
    body.winners-only .direction-menu[data-section="options"] .direction-group.all-nogo,
    body.winners-only .direction-menu[data-section="stocks"] .direction-group.all-nogo { display:none; }
    /* Single-symbol full report: hide friction NO-GO strategy sections (iron condor,
       verticals, calendars, butterflies, PMCC…) under "Winning trades only". */
    body.winners-only .ssr-strategy-section.verdict-nogo { display:none; }
    /* Strategy Landscape tier board (Options overview) */
    .strat-landscape { margin: 4px 0 18px; }
    .strat-land-legend { font-family:var(--font-mono); font-size:10px; color:var(--muted-2); letter-spacing:0.04em; white-space:nowrap; }
    .strat-land-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(258px,1fr)); gap:14px; margin-top:14px; }
    .strat-land-tier { border:1px solid var(--border); border-radius:var(--radius); padding:14px; background:var(--bg-2); }
    .strat-land-tier.go { border-color:rgba(124,216,192,0.25); }
    .strat-land-tier.caution { border-color:rgba(216,200,115,0.22); }
    .strat-land-tier-head { display:flex; align-items:center; gap:8px; margin-bottom:2px; }
    .strat-land-tier-sub { font-size:12px; color:var(--fg-2); font-weight:500; }
    .strat-land-blurb { font-size:11.5px; color:var(--muted); margin:8px 0 12px; line-height:1.5; }
    .strat-land-items { display:flex; flex-direction:column; gap:7px; }
    .strat-land-item { display:block; width:100%; text-align:left; padding:9px 10px; border:1px solid var(--border); border-radius:8px; background:var(--panel); }
    .strat-land-item.is-clickable { cursor:pointer; transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
    .strat-land-item.is-clickable:hover { border-color:var(--accent); background:var(--accent-bg); }
    .strat-land-item-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
    .strat-land-name { font-size:13px; font-weight:600; color:var(--fg); }
    .strat-land-go { color:var(--accent); font-size:14px; }
    .strat-land-stat { font-family:var(--font-mono); font-size:10.5px; color:var(--fg-2); margin-top:4px; font-variant-numeric:tabular-nums; line-height:1.45; }
    .strat-land-note { font-size:10.5px; color:var(--muted); margin-top:3px; font-style:italic; }
    /* Covered straddle/strangle friction-verdict hero */
    .cov-verdict-hd { margin:8px 12px 0; padding:14px 16px; max-width:1040px; }
    .cov-vh-top { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
    .cov-vh-title { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
    .cov-vh-name { font-size:15px; font-weight:600; color:var(--fg); }
    .cov-vh-tag { font-size:10.5px; color:var(--accent); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.06em; }
    .cov-vh-today { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
    .cov-vh-today-lbl { font-size:9.5px; color:var(--muted-2); text-transform:uppercase; letter-spacing:0.1em; }
    .cov-vh-tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:10px; }
    .cov-vh-note { font-size:11.5px; color:var(--muted); line-height:1.55; margin-top:12px; padding-top:10px; border-top:1px solid var(--hairline); white-space:normal; overflow-wrap:anywhere; }
    /* ── Market Monitor ── */
    /* UW-style market overview page (static/js/themis-monitor.js). All colors
       come from the live token set so dark AND light themes both render;
       rgba() is only used for translucent accent tints. */
    .mm-wrap { padding: 10px 14px 28px; max-width: 1480px; margin: 0 auto; }
    .mm-header { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
    .mm-title { font-size: clamp(22px,3vw,32px); line-height:1.08; letter-spacing:-0.025em; font-weight:500; color:var(--fg); margin:6px 0 2px; }
    .mm-asof { font-family:var(--font-mono); font-size:11px; color:var(--muted); }
    .mm-note { font-size:11px; color:var(--muted); margin-top:3px; font-style:italic; }
    .mm-refresh {
      align-self:center; padding:7px 14px; font-size:12px; font-weight:600;
      color:var(--accent); background:var(--accent-bg); border:1px solid rgba(124,216,192,0.3);
      border-radius:999px; cursor:pointer; transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
    }
    .mm-refresh:hover { border-color:var(--accent); }
    .mm-refresh:disabled { opacity:0.55; cursor:default; }
    /* tile strip */
    .mm-tiles { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
    .mm-tile { flex:1 1 150px; min-width:140px; padding:12px 14px; gap:4px; }
    .mm-tval { font-size:20px; }
    .mm-tval.pos { color:var(--pos); }
    .mm-tval.neg { color:var(--neg); }
    .mm-tval.warn { color:var(--warn); }
    .mm-tsub { min-height:14px; }
    /* 2-col row grid (collapses under 1100px) */
    .mm-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; align-items:start; }
    @media (max-width: 1100px) { .mm-grid { grid-template-columns:1fr; } }
    .mm-card { min-width:0; }
    .mm-card-head {
      display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap;
      font-size:13px; font-weight:600; color:var(--fg); margin-bottom:10px;
    }
    .mm-card-sub { font-family:var(--font-mono); font-size:10px; color:var(--muted); font-weight:400; letter-spacing:0.04em; }
    .mm-card-body { min-width:0; }
    .mm-empty { font-size:12px; color:var(--muted); font-style:italic; padding:14px 4px; }
    .mm-foot { font-size:10px; color:var(--muted); margin-top:8px; line-height:1.4; }
    .mm-num { text-align:right; font-variant-numeric:tabular-nums; font-family:var(--font-mono); font-size:12px; }
    .mm-num.pos { color:var(--pos); }
    .mm-num.neg { color:var(--neg); }
    /* fear & greed gauge */
    .mm-gauge-host { display:flex; justify-content:center; }
    .mm-gauge-svg { width:100%; max-width:330px; height:auto; display:block; }
    .mm-gauge-needle { stroke:var(--fg); stroke-width:2.2; stroke-linecap:round; }
    .mm-gauge-hub { fill:var(--fg); }
    .mm-gauge-num { font-family:var(--font-mono); font-size:34px; font-weight:600; fill:var(--fg); }
    .mm-gauge-num.pos { fill:var(--pos); }
    .mm-gauge-num.warn { fill:var(--warn); }
    .mm-gauge-num.neg { fill:var(--neg); }
    .mm-gauge-lbl { font-size:11px; letter-spacing:0.08em; text-transform:uppercase; fill:var(--muted); }
    .mm-gauge-tick { font-family:var(--font-mono); font-size:9px; fill:var(--muted); }
    .mm-cats { margin-top:12px; display:flex; flex-direction:column; gap:8px; }
    .mm-cat-row { display:grid; grid-template-columns:130px 1fr 34px; align-items:center; gap:10px; cursor:default; }
    .mm-cat-label { font-size:11.5px; color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .mm-cat-track { display:block; }
    .mm-cat-track .tq-bar-fill { display:block; }
    .mm-fill-pos { background:var(--pos); }
    .mm-fill-warn { background:var(--warn); }
    .mm-fill-neg { background:var(--neg); }
    .mm-fill-mid { background:var(--accent); }
    .mm-cat-score { font-family:var(--font-mono); font-size:11.5px; text-align:right; color:var(--fg); }
    .mm-cat-score.pos { color:var(--pos); }
    .mm-cat-score.warn { color:var(--warn); }
    .mm-cat-score.neg { color:var(--neg); }
    /* global markets map */
    .mm-map {
      border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
      background:
        radial-gradient(120% 90% at 50% 0%, rgba(124,216,192,0.06), rgba(124,216,192,0) 60%),
        linear-gradient(180deg, var(--panel-2), var(--panel));
      margin-bottom:12px;
    }
    .mm-map-svg { display:block; width:100%; height:auto; }
    .mm-land {
      fill: rgba(124, 216, 192, 0.07);
      stroke: rgba(124, 216, 192, 0.30);
      stroke-width: 0.6;
      stroke-linejoin: round;
    }
    .mm-grat { stroke:var(--border-strong); stroke-width:0.6; opacity:0.55; }
    .mm-grat.eq { opacity:0.9; }
    .mm-pin { stroke:none; }
    .mm-pin.pos { fill:var(--pos); }
    .mm-pin.neg { fill:var(--neg); }
    .mm-pin.flat { fill:var(--muted); }
    .mm-pin-glow.pos { fill:var(--pos); opacity:0.16; }
    .mm-pin-glow.neg { fill:var(--neg); opacity:0.16; }
    .mm-pin-glow.flat { fill:var(--muted); opacity:0.10; }
    .mm-pin-lbl { font-family:var(--font-mono); font-size:9.5px; fill:var(--fg); opacity:0.85; }
    .mm-world-table td, .mm-world-table th { padding:6px 10px; }
    /* seasonality heat table */
    .mm-szn-scroll { overflow-x:auto; }
    .mm-szn-table { width:100%; border-collapse:collapse; font-size:10.5px; }
    .mm-szn-table th {
      font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:0.06em;
      color:var(--muted); font-weight:500; padding:5px 4px; text-align:right; border-bottom:1px solid var(--border); white-space:nowrap;
    }
    .mm-szn-table th.mm-szn-tk { text-align:left; }
    .mm-szn-table td { padding:4px 5px; border-bottom:1px solid var(--border-faint); color:var(--fg); }
    .mm-szn-tk { font-weight:600; white-space:nowrap; }
    .mm-szn-cell { font-family:var(--font-mono); text-align:right; font-variant-numeric:tabular-nums; min-width:30px; }
    .mm-szn-cell.empty { color:var(--muted); }
    .mm-szn-cur { box-shadow: inset 0 0 0 1px rgba(124,216,192,0.45); }
    /* news feed */
    .mm-news-list { display:flex; flex-direction:column; }
    .mm-news-item { display:flex; gap:10px; padding:7px 2px; border-bottom:1px solid var(--border-faint); }
    .mm-news-item:last-child { border-bottom:0; }
    .mm-news-time { flex:0 0 46px; font-family:var(--font-mono); font-size:10px; color:var(--muted); padding-top:2px; white-space:nowrap; }
    .mm-news-bodycol { min-width:0; display:flex; flex-direction:column; gap:2px; }
    .mm-news-title { font-size:12.5px; line-height:1.4; color:var(--fg); text-decoration:none; }
    a.mm-news-title:hover { color:var(--accent); }
    .mm-news-meta { font-size:10px; color:var(--muted); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
    .mm-news-sym { color:var(--accent); font-family:var(--font-mono); }
    .mm-chip-s { padding:1px 7px; font-size:9px; }
    /* earnings + congress */
    .mm-sym-chip {
      display:inline-block; padding:2px 8px; font-family:var(--font-mono); font-size:11px; font-weight:600;
      color:var(--accent); background:var(--accent-bg); border:1px solid rgba(124,216,192,0.25); border-radius:6px;
    }
    .mm-when { font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.06em; padding:1px 7px; border-radius:999px; border:1px solid var(--border-strong); color:var(--muted); }
    .mm-when.bmo { color:var(--accent); border-color:rgba(124,216,192,0.3); background:var(--accent-bg); }
    .mm-when.amc { color:var(--warn); border-color:rgba(216,200,115,0.3); background:rgba(216,200,115,0.07); }
    .mm-earn-table td, .mm-earn-table th { padding:7px 10px; }
    .mm-cg-scroll { overflow-x:auto; }
    .mm-cg-table td, .mm-cg-table th { padding:7px 10px; }
    .mm-cg-meta { display:block; font-size:9.5px; color:var(--muted); font-family:var(--font-mono); margin-top:1px; }
    .mm-cg-dates { white-space:nowrap; }
    /* placeholder (Phase 4) slot cards — deliberately ghosted */
    .mm-ghost {
      border:1.5px dashed var(--border-strong); border-radius:var(--radius);
      padding:20px 18px; background:transparent; min-height:108px;
      display:flex; flex-direction:column; gap:6px; justify-content:center; opacity:0.75;
    }
    .mm-ghost-tag { font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:0.12em; color:var(--muted); }
    .mm-ghost-title { font-size:15px; font-weight:600; color:var(--muted); }
    .mm-ghost-blurb { font-size:11.5px; color:var(--muted); line-height:1.5; max-width:520px; }
    /* ── /Market Monitor ── */