/* ================================================================
       RESET & BASE
       ================================================================ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { height: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overscroll-behavior-x: none; }
    body {
      height: 100%;
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      background: var(--bg);
      color: var(--text-secondary);
      font-size: 14px;
      line-height: 1.5;
      overflow: hidden;
    }
    img, svg { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
    ::selection { background: rgba(59,130,246,0.3); color: #fff; }

    /* ============================================================
       APP-WIDE TOUCH HANDLING (TANG-12)
       ============================================================
       Pairs with the JS touch-movement guard in js/app.js. iOS Safari
       defaults to firing tap on touchstart with zero scroll-vs-tap
       discrimination, so users flicking past tappable rows / pills /
       tabs accidentally trigger them. The JS guard swallows the
       synthetic click on capture phase when the finger moved >10px;
       these CSS rules are the upstream half:

         touch-action: pan-y
             Tells the browser "this element participates in vertical
             scrolling." The browser owns the first 10px of vertical
             movement before any tap handler can fire. Matches native
             iOS scroll-passive UI behavior.
         -webkit-tap-highlight-color: transparent
             Kills the gray iOS flash so accidental contact doesn't
             visually feel like a tap registered.

       Applied to broad selectors here so we cover all 163 click
       handlers in the codebase without per-handler annotation. Form
       controls keep their default touch-action (they need pinch-zoom
       + selection on text inputs to work).
       ============================================================ */
    button,
    a,
    [onclick],
    [role="button"],
    [data-route],
    [data-pwa-route],
    .clickable,
    .tab,
    .m-tab,
    .pwa-nav-item,
    .rankings-row,
    .rankings-tbody tr,
    .ticker-pill,
    .ticker-chip,
    .heatmap-cell,
    .intel-v2-card,
    .report-card,
    .briefing-context-btn,
    .briefing-back-btn {
      touch-action: pan-y;
      -webkit-tap-highlight-color: transparent;
    }
    /* Horizontal-scroll containers need pan-x explicitly so the
       browser owns horizontal flicks too. The descendant selectors
       (TAN-415) restore pan-x on tappable children (e.g. <tr onclick>)
       whose touch-action would otherwise be set to pan-y by the
       app-wide rule above, blocking horizontal swipes that start on
       a row inside the scroller. */
    .table-scroll,
    .horizontal-scroll,
    [data-scroll="horizontal"],
    .table-scroll *,
    .horizontal-scroll *,
    [data-scroll="horizontal"] * {
      touch-action: pan-x pan-y;
    }

    /* Auth gate — base styles ensure no flash before Clerk SDK loads */
    #auth-gate {
      background: #0B1120;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    }
    .auth-gate-logo {
      display: block;
      height: 48px;
      width: auto;
      max-width: 240px;
      margin: 0 auto 12px auto;
    }

    /* ================================================================
       DESIGN TOKENS
       ================================================================ */
    :root {
      --bg: #0B1120;
      --bg-alt: #0D1526;
      --chart-bg: #141B2D;    /* canon v3 chart panel bg (validator-aligned) */
      --surface: #111827;
      --surface-2: #1A2332;
      --border: #1E293B;

      --text-primary: #F1F5F9;
      --text-secondary: #94A3B8;
      --text-muted: #8A99B0;
      --text-faint: #64748B;

      --blue: #3B82F6;
      --blue-hover: #2563EB;
      --blue-dim: rgba(59,130,246,0.08);
      --blue-glow: rgba(59,130,246,0.20);

      --emerald: #10B981;
      --emerald-br: #34D399;
      --emerald-dim: rgba(16,185,129,0.12);
      --red: #EF4444;
      --red-dim: rgba(239,68,68,0.12);
      --amber: #F59E0B;
      --amber-dim: rgba(245,158,11,0.12);

      /* TAN-971: triage rail position-flag ticker colours
         (gold = held, cyan = watchlisted). No amber HELD pill. */
      --gold: #F5C451;
      --cyan: #38BDF8;

      /* TAN-782: hot-pink visual family for script-derived alerts/signals
         (Fisher Transform + future Pine-script families). Deliberately
         distinct from confluence purple (--rsi-3os #A855F7) so a glance
         separates "script said so" from "structural confluence". */
      --script-pink: #EC4899;
      --script-pink-dim: rgba(236,72,153,0.14);
      --script-pink-border: rgba(236,72,153,0.45);

      /* Analyst rating palette */
      --rating-strong-buy: #c084fc;
      --rating-buy: #4ade80;
      --rating-hold: #3b82f6;
      --rating-sell: #f97316;
      --rating-strong-sell: #ef4444;

      --font-display: 'DM Sans', system-ui, sans-serif;
      --font-body: 'Inter', system-ui, sans-serif;
      --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

      --ease: cubic-bezier(0.16, 1, 0.3, 1);
      --sidebar-w: 240px;
      --topbar-h: 56px;
      --radius: 8px;
      --radius-sm: 6px;
      --detail-w: 520px;
    }

    /* ================================================================
       SCROLLBAR
       ================================================================ */
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: var(--border); }
    ::-webkit-scrollbar-thumb { background: #374151; border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: #4B5563; }

    /* ================================================================
       LAYOUT SHELL
       ================================================================ */
    .app {
      display: grid;
      grid-template-columns: var(--sidebar-w) 1fr;
      grid-template-rows: var(--topbar-h) 1fr;
      height: 100dvh;
      overflow: hidden;
    }

    /* ================================================================
       SIDEBAR
       ================================================================ */
    .sidebar {
      grid-row: 1 / -1;
      grid-column: 1;
      background: linear-gradient(180deg, #0B1120 0%, #0D1526 100%);
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      padding: 24px 0 20px;
      z-index: 100;
      overflow-y: auto;
      overflow-x: hidden;
      overscroll-behavior: contain;
    }
    .sidebar::-webkit-scrollbar { width: 0; }

    .sidebar-header {
      padding: 0 20px;
      margin-bottom: 28px;
    }
    .sidebar-brand-name {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 18px;
      color: #fff;
      letter-spacing: 0.02em;
      line-height: 1;
    }
    .sidebar-brand-sub {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-top: 2px;
    }

    .sidebar-section-label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-muted);
      padding: 0 20px;
      margin-bottom: 8px;
    }
    .sidebar-divider {
      height: 1px;
      background: var(--border);
      margin: 16px 20px;
    }

    .sidebar-nav {
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding: 0 12px;
    }
    .sidebar-nav-item {
      position: relative;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 9px 12px;
      border-radius: var(--radius-sm);
      color: var(--text-muted);
      font-size: 14px;
      font-weight: 500;
      font-family: var(--font-body);
      transition: all 150ms var(--ease);
      white-space: nowrap;
      cursor: pointer;
    }
    .sidebar-nav-item:hover {
      background: var(--surface-2);
      color: var(--text-secondary);
    }
    .sidebar-nav-item.active {
      background: var(--blue-dim);
      color: var(--blue);
    }
    .sidebar-nav-item svg.nav-icon {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
    }
    .sidebar-nav-item .lock-icon {
      width: 12px;
      height: 12px;
      color: var(--text-muted);
      margin-left: auto;
      flex-shrink: 0;
    }
    .sidebar-nav-item .nav-label { flex: 1; }

    .sidebar-nav-item.disabled-nav {
      opacity: 0.5;
      cursor: default;
      pointer-events: none;
    }
    .coming-soon-badge {
      font-family: var(--font-mono);
      font-size: 8px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #94A3B8;
      background: rgba(100,116,139,0.18);
      padding: 1px 5px;
      border-radius: 3px;
      flex-shrink: 0;
    }

    .sidebar-external {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .sidebar-external svg.ext-icon {
      width: 12px;
      height: 12px;
      opacity: 0.5;
      flex-shrink: 0;
    }

    .sidebar-bottom {
      margin-top: auto;
      padding: 0 12px;
    }
    .sidebar-login-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 9px 12px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      color: var(--text-muted);
      font-size: 13px;
      font-weight: 500;
      transition: all 150ms var(--ease);
      width: 100%;
    }
    .sidebar-login-btn:hover {
      border-color: rgba(255,255,255,0.12);
      color: var(--text-primary);
      background: rgba(255,255,255,0.03);
    }
    .sidebar-join-btn { display: none; }

    /* Signed-in user row in sidebar */
    .sidebar-user-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 12px;
      border-radius: var(--radius-sm);
      background: rgba(255,255,255,0.03);
      border: 1px solid var(--border);
    }
    .sidebar-user-info {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }
    .sidebar-user-avatar {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--surface-2);
      flex-shrink: 0;
      overflow: hidden;
    }
    .sidebar-user-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .sidebar-user-meta {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }
    .sidebar-user-name {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-primary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .sidebar-user-email {
      font-size: 10px;
      color: var(--text-faint);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .sidebar-signout-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: var(--radius-sm);
      border: none;
      background: none;
      color: var(--text-muted);
      cursor: pointer;
      flex-shrink: 0;
      transition: all 150ms var(--ease);
    }
    .sidebar-signout-btn:hover {
      color: var(--red);
      background: rgba(239,68,68,0.1);
    }
    /* Clerk UserButton in topbar — hidden, avatar only shown in sidebar */
    #topbar-user-btn {
      display: none !important;
    }

    /* ================================================================
       HAMBURGER (mobile)
       ================================================================ */
    .hamburger-btn {
      display: none;
      position: fixed;
      top: 8px;
      left: 12px;
      z-index: 200;
      width: 40px;
      height: 40px;
      align-items: center;
      justify-content: center;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--text-primary);
    }
    .hamburger-btn svg { width: 20px; height: 20px; }
    .sidebar-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.6);
      z-index: 90;
    }
    .sidebar-close-btn {
      display: none;
      position: absolute;
      top: 12px;
      right: 12px;
      width: 40px;
      height: 40px;
      align-items: center;
      justify-content: center;
      color: var(--text-primary);
      background: rgba(255,255,255,0.08);
      border-radius: 10px;
      -webkit-tap-highlight-color: transparent;
    }
    .sidebar-close-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
    .sidebar-close-btn:active { background: rgba(255,255,255,0.16); }
    .sidebar-close-btn svg { width: 18px; height: 18px; stroke-width: 2.5; }

    /* ================================================================
       TOP BAR
       ================================================================ */
    .topbar {
      grid-column: 2;
      grid-row: 1;
      background: var(--bg);
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 24px;
      z-index: 50;
      gap: 12px;
      position: relative;
    }
    .topbar-left {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .topbar-title {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 18px;
      color: var(--text-primary);
    }
    /* Topbar Command Center link with NEW badge */
    .topbar-cc-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-left: 4px;
      padding: 5px 10px;
      border-radius: 6px;
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 13px;
      color: var(--text-secondary);
      text-decoration: none;
      border: 1px solid var(--border);
      background: var(--surface-2, rgba(255,255,255,0.02));
      transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
    }
    .topbar-cc-link:hover {
      color: var(--text-primary);
      border-color: rgba(59,130,246,0.45);
      background: rgba(59,130,246,0.08);
    }
    .topbar-cc-label { white-space: nowrap; }
    .topbar-cc-badge {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 8px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #fff;
      background: linear-gradient(135deg, #3B82F6, #2563EB);
      padding: 2px 5px;
      border-radius: 3px;
      line-height: 1;
      box-shadow: 0 0 0 1px rgba(59,130,246,0.35), 0 0 8px rgba(59,130,246,0.35);
    }
    .topbar-cc-badge--icon {
      padding: 3px 4px;
      line-height: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .topbar-cc-badge--icon svg {
      display: block;
    }
    /* Command Center is desktop-only — hide entirely on mobile/PWA (no NEW badge, no chip) */
    @media (max-width: 900px) {
      .topbar-cc-link { display: none !important; }
    }
    /* Belt-and-suspenders: hide in PWA standalone mode regardless of viewport */
    @media (display-mode: standalone) {
      .topbar-cc-link { display: none !important; }
    }
    .topbar-center {
      display: flex;
      align-items: center;
      gap: 8px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
    #sentiment-bar-wrap[role="button"] {
      cursor: pointer;
      padding: 4px 10px;
      border-radius: 6px;
      transition: background 0.15s ease, transform 0.15s ease;
      user-select: none;
    }
    #sentiment-bar-wrap[role="button"]:hover {
      background: rgba(255, 255, 255, 0.04);
    }
    #sentiment-bar-wrap[role="button"]:active {
      transform: translateX(-50%) scale(0.98);
    }
    #sentiment-bar-wrap[role="button"]:focus-visible {
      outline: 2px solid var(--accent, #F59E0B);
      outline-offset: 2px;
    }
    .sentiment-label {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.08em;
      color: var(--text-muted);
      text-transform: uppercase;
    }
    .sentiment-bar {
      display: flex;
      gap: 3px;
    }
    .sentiment-bar .sblock {
      width: 14px;
      height: 14px;
      border-radius: 2px;
      transition: background 0.3s ease;
    }
    .sentiment-bar .sblock.active { /* color set inline */ }
    .sentiment-bar .sblock.inactive { background: #2A2E3A; }
    .sentiment-score-label {
      white-space: nowrap;
    }
    .topbar-right {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .btn-ghost {
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 500;
      color: var(--text-muted);
      padding: 7px 16px;
      border-radius: var(--radius);
      transition: all 150ms var(--ease);
    }
    .btn-ghost:hover { color: var(--text-primary); background: rgba(255,255,255,0.04); }
    .btn-primary {
      background: var(--blue);
      color: #fff;
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 500;
      padding: 7px 18px;
      border-radius: var(--radius);
      transition: all 150ms var(--ease);
    }
    .btn-primary:hover {
      background: var(--blue-hover);
      box-shadow: 0 0 20px var(--blue-glow);
    }

    /* ================================================================
       FINNHUB WEBSOCKET — CONNECTION STATUS & PRICE FLASH
       ================================================================ */
    .ws-status {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.04em;
      color: var(--text-muted);
      text-transform: uppercase;
      white-space: nowrap;
      flex-shrink: 0;
      cursor: default;
    }
    .ws-status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #64748B;
      transition: background 0.3s ease;
    }
    .ws-status-dot.live {
      background: var(--emerald);
      box-shadow: 0 0 6px rgba(16,185,129,0.5);
    }
    .ws-status-dot.reconnecting {
      background: var(--amber);
      animation: ws-pulse 1s ease-in-out infinite;
    }
    .ws-status-dot.closed {
      background: #64748B;
    }
    @keyframes ws-pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.4; }
    }
    @keyframes price-flash-up {
      0% { background: rgba(16,185,129,0.25); }
      100% { background: transparent; }
    }
    @keyframes price-flash-down {
      0% { background: rgba(239,68,68,0.25); }
      100% { background: transparent; }
    }
    .price-flash-up {
      animation: price-flash-up 0.8s ease-out;
    }
    .price-flash-down {
      animation: price-flash-down 0.8s ease-out;
    }

    /* ================================================================
       MAIN CONTENT
       ================================================================ */
    .main {
      grid-column: 2;
      grid-row: 2;
      overflow-y: auto;
      overflow-x: hidden;
      min-width: 0;
      max-width: 100%;
      overscroll-behavior: contain;
      scroll-behavior: smooth;
      background: var(--bg);
      transition: padding-right 300ms var(--ease);
    }
    /* TAN-1006: when the detail sidecar is open, reserve its width on the right
       of the main grid column so the Pulse/feed right edge aligns with the
       sidecar's left edge instead of clipping under the fixed panel.
       Rail floats and Pulse stays its natural width — we only shift the column. */
    body.detail-open .main {
      padding-right: var(--detail-w);
    }
    /* On mobile the sidecar goes full-width, so it overlays everything by design —
       no reserved space needed (the overlay handles dismissal). */
    @media (max-width: 768px) {
      body.detail-open .main { padding-right: 0; }
    }
    /* TAN-975: the Terminal (/command-center/) content root is .views-wrap, not
       .main — so PR #2464's .main rule had zero effect there and the fixed
       detail sidecar clipped the Pulse hero right edge. Apply the same width
       compensation to .views-wrap so the Terminal aligns like the SPA. */
    body.detail-open .views-wrap {
      padding-right: var(--detail-w);
      transition: padding-right 300ms var(--ease);
    }
    @media (max-width: 768px) {
      body.detail-open .views-wrap { padding-right: 0; }
    }

    .content-wrap {
      max-width: 1400px;
      min-width: 0;
      margin: 0 auto;
      padding: 24px 32px;
    }
    .content-wrap.wide {
      max-width: 2400px;
    }
    .content-wrap.heatmaps-wide {
      max-width: 1600px;
      overflow-x: auto;
    }
    /* On mobile, kill the heatmaps-wide horizontal scroll — it was used to
       accommodate the desktop treemap's 6-column layout, but the mobile
       breakpoints now reflow everything into 1–3 columns that fit the
       viewport, so horizontal scroll just causes content to be hidden. */
    @media (max-width: 768px) {
      .content-wrap.heatmaps-wide { overflow-x: visible; }
    }

    /* ================================================================
       PAGE ANIMATIONS
       ================================================================ */
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    .page-anim { animation: fadeIn 300ms ease-out; }

    /* ================================================================
       SECTION HEADERS
       ================================================================ */
    .section-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 16px;
    }
    .section-title {
      font-family: var(--font-display);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-muted);
    }
    .section-subtitle {
      font-size: 12px;
      color: var(--text-faint);
      margin-top: 2px;
    }
    .legal-disclaimer {
      font-size: 12px;
      color: var(--text-faint);
      margin-top: 32px;
      padding-bottom: 24px;
      line-height: 1.6;
    }
    .badge-live {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--blue);
      background: var(--blue-dim);
      padding: 3px 10px;
      border-radius: 3px;
    }
    .badge-live::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--blue);
      animation: pulse-dot 2s ease-in-out infinite;
    }
    @keyframes pulse-dot {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.4; transform: scale(0.8); }
    }

    /* ================================================================
       KPI CARDS
       ================================================================ */
    .kpi-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-bottom: 24px;
    }
    .kpi-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 18px;
      border-left: 4px solid var(--emerald);
      transition: all 180ms var(--ease);
    }
    .kpi-card:hover { border-color: rgba(255,255,255,0.08); }
    .kpi-card.kpi-green { border-left-color: var(--emerald); }
    .kpi-card.kpi-green:hover { border-left-color: var(--emerald); }
    .kpi-card.kpi-blue { border-left-color: var(--blue); }
    .kpi-card.kpi-blue:hover { border-left-color: var(--blue); }
    .kpi-card.kpi-amber { border-left-color: var(--amber); }
    .kpi-card.kpi-amber:hover { border-left-color: var(--amber); }
    .kpi-card.kpi-red { border-left-color: var(--red); }
    .kpi-card.kpi-red:hover { border-left-color: var(--red); }
    .kpi-card.kpi-purple { border-left-color: #8B5CF6; }
    .kpi-card.kpi-purple:hover { border-left-color: #8B5CF6; }
    .kpi-card.kpi-orange { border-left-color: #F97316; }
    .kpi-card.kpi-orange:hover { border-left-color: #F97316; }
    .kpi-card.kpi-yellow { border-left-color: #F59E0B; }
    .kpi-card.kpi-yellow:hover { border-left-color: #F59E0B; }
    .kpi-card.kpi-cyan { border-left-color: #06B6D4; }
    .kpi-card.kpi-cyan:hover { border-left-color: #06B6D4; }
    .kpi-row.kpi-6 { grid-template-columns: repeat(6, 1fr); }
    @media (max-width: 1200px) { .kpi-row.kpi-6 { grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 768px) { .kpi-row.kpi-6 { grid-template-columns: repeat(2, 1fr); } }
    .kpi-card.clickable { cursor: pointer; }
    .kpi-card.clickable:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.2); }

    .kpi-label {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 8px;
    }
    .kpi-value {
      font-family: var(--font-mono);
      font-size: 22px;
      font-weight: 600;
      color: var(--text-primary);
      font-variant-numeric: tabular-nums lining-nums;
    }
    .kpi-sub {
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 4px;
    }

    /* 8-KPI single-row compact layout */
    .kpi-row-8 {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 10px;
      margin-bottom: 24px;
    }
    .kpi-row-8 .kpi-card { padding: 14px 12px; border-left-width: 3px; }
    .kpi-row-8 .kpi-label { font-size: 10px; margin-bottom: 4px; }
    .kpi-row-8 .kpi-value { font-size: 16px; }
    .kpi-row-8 .kpi-sub { font-size: 10px; margin-top: 2px; }
    @media (max-width: 1200px) { .kpi-row-8 { grid-template-columns: repeat(4, 1fr); } }
    @media (max-width: 768px) { .kpi-row-8 { grid-template-columns: repeat(2, 1fr); width: 100%; box-sizing: border-box; } }
    .kpi-card.kpi-slate { border-left-color: #64748B; }
    .kpi-card.kpi-slate:hover { border-left-color: #64748B; }

    /* KPI tooltip (CSS-only, uses data-tooltip attr) */
    .kpi-card[data-tooltip] { position: relative; cursor: help; }
    .kpi-card[data-tooltip]::after {
      content: attr(data-tooltip);
      position: absolute;
      top: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%);
      background: #1E293B;
      color: #F1F5F9;
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.02em;
      padding: 6px 10px;
      border-radius: 5px;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 150ms ease;
      z-index: 100;
      border: 1px solid var(--border);
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }
    .kpi-card[data-tooltip]:hover::after { opacity: 1; }

    /* ================================================================
       KPI TILES V2 — Two-tier decision cockpit (Dashboard only)
       ================================================================ */

    /* Row 1: Market Context — 4-col grid */
    .kpi-context-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-bottom: 10px;
    }

    .kpi-tile {
      position: relative;
      background: var(--surface-2, #1A2332);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 0;
      overflow: hidden;
      transition: transform 200ms var(--ease), border-color 200ms var(--ease), box-shadow 200ms var(--ease);
      cursor: default;
      display: flex;
      flex-direction: column;
    }
    .kpi-tile:hover {
      transform: translateY(-1px);
      border-color: rgba(255,255,255,0.06);
      box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    }

    /* Top zone: label + context */
    .tile-top {
      padding: 12px 14px 0;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }
    .tile-label {
      font-family: var(--font-display);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-secondary);
    }
    .tile-context {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 500;
      color: var(--text-muted);
      text-align: right;
      line-height: 1.4;
    }

    /* Middle zone: price + delta */
    .tile-mid {
      padding: 4px 14px 0;
      display: flex;
      align-items: baseline;
      gap: 8px;
    }
    .tile-price {
      font-family: var(--font-mono);
      font-size: 22px;
      font-weight: 700;
      color: var(--text-primary);
      font-variant-numeric: tabular-nums lining-nums;
      line-height: 1.2;
    }
    .tile-delta {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
    }

    /* Bottom zone: sparkline — dedicated space */
    .tile-spark {
      flex: 1;
      min-height: 44px;
      position: relative;
      margin-top: 4px;
    }
    .tile-spark svg {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: block;
    }

    /* Sparkline draw-on animation */
    .spark-line {
      stroke-dasharray: var(--spark-len, 600);
      stroke-dashoffset: var(--spark-len, 600);
      animation: sparkDraw 800ms var(--ease) forwards;
      animation-delay: var(--spark-d, 0ms);
    }
    @keyframes sparkDraw { to { stroke-dashoffset: 0; } }
    .spark-fill {
      opacity: 0;
      animation: sparkFadeIn 400ms ease forwards;
      animation-delay: var(--spark-fd, 600ms);
    }
    @keyframes sparkFadeIn { to { opacity: 1; } }

    /* Live pulsing dot */
    .spark-dot {
      opacity: 0;
      animation: sparkDotIn 200ms ease forwards;
      animation-delay: var(--spark-dd, 900ms);
    }
    @keyframes sparkDotIn {
      from { opacity: 0; transform: scale(0); }
      to { opacity: 1; transform: scale(1); }
    }
    .spark-pulse {
      opacity: 0;
      animation: sparkDotIn 200ms ease forwards, sparkPulse 2s ease-out infinite;
      animation-delay: var(--spark-dd, 900ms), calc(var(--spark-dd, 900ms) + 200ms);
    }
    /* After-hours: slow pulse */
    .spark-pulse.after-hours {
      animation-delay: var(--spark-dd, 900ms), calc(var(--spark-dd, 900ms) + 200ms);
      animation-duration: 200ms, 4s;
    }
    @keyframes sparkPulse {
      0% { opacity: 0.4; r: 3.5; }
      100% { opacity: 0; r: 9; }
    }

    /* Crosshair on hover */
    .spark-crosshair {
      opacity: 0;
      transition: opacity 150ms ease;
    }
    .kpi-tile:hover .spark-crosshair { opacity: 1; }

    /* Dashed guide for empty session time */
    .spark-guide {
      stroke: var(--border);
      stroke-width: 1;
      stroke-dasharray: 2,4;
    }

    /* VIX 52-week range bar */
    .tile-vix-range {
      padding: 0 14px;
      margin-top: 2px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .tile-vix-range-label {
      font-size: 9px;
      font-weight: 500;
      color: var(--text-muted);
      font-family: var(--font-mono);
    }
    .tile-vix-range-track {
      flex: 1;
      height: 3px;
      /* Match the Radar page VIX gradient exactly */
      background: linear-gradient(to right, #10B981 0%, #10B981 2%, #3B82F6 6%, #3B82F6 14%, #F59E0B 20%, #F97316 35%, #EF4444 45%, #EF4444 100%);
      border-radius: 2px;
      position: relative;
    }
    .tile-vix-range-dot {
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--amber);
      border: 1.5px solid var(--surface-2, #1A2332);
      z-index: 1;
    }

    /* US10Y 2–10 spread: INSIDE .tile-mid, LEFT of yield % (Matt 2026-07-15).
       A separate 4th row under mid was clipped by Terminal 3-row tile grid. */
    .kpi-tile--ust .tile-mid {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 5px;
      min-width: 0;
    }
    .kpi-tile--ust .tile-yield-spread {
      order: 0;
      flex: 0 1 auto;
    }
    .kpi-tile--ust .tile-price {
      order: 1;
    }
    .kpi-tile--ust .tile-delta {
      order: 2;
    }
    .tile-yield-spread {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      padding: 1px 5px;
      border-radius: 3px;
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 600;
      white-space: nowrap;
      line-height: 1.2;
    }
    .tile-yield-spread.spread-pos { background: rgba(16,185,129,0.1); color: var(--emerald); }
    .tile-yield-spread.spread-neg { background: rgba(239,68,68,0.1); color: var(--red); }

    /* Row 2: Action Strip — 4-col grid */
    .kpi-action-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-bottom: 24px;
    }
    .kpi-action-tile {
      position: relative;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 14px 14px 14px 40px;
      transition: transform 200ms var(--ease), border-color 200ms var(--ease), box-shadow 200ms var(--ease);
      cursor: default;
    }
    .kpi-action-tile:hover {
      transform: translateY(-1px);
      border-color: rgba(255,255,255,0.06);
      box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    }
    .action-tile-icon {
      position: absolute;
      left: 14px;
      top: 16px;
      width: 16px;
      height: 16px;
      color: var(--text-faint);
      opacity: 0.6;
    }
    .action-tile-label {
      font-family: var(--font-display);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-secondary);
      margin-bottom: 4px;
    }
    .action-tile-value {
      font-family: var(--font-mono);
      font-size: 20px;
      font-weight: 700;
      color: var(--text-primary);
      font-variant-numeric: tabular-nums;
      line-height: 1.2;
    }
    .action-tile-sub {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 2px;
    }
    .action-tile-detail {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 500;
      color: var(--text-muted);
      margin-top: 2px;
    }

    /* Target bar */
    .tile-target-bar {
      display: flex;
      gap: 2px;
      height: 6px;
      border-radius: 3px;
      overflow: hidden;
      margin-top: 8px;
      background: var(--border);
    }
    .tile-target-seg {
      height: 100%;
      border-radius: 3px;
      width: 0;
      animation: targetSegGrow 400ms var(--ease) forwards;
    }
    .tile-target-seg.t1 { background: var(--emerald); animation-delay: 200ms; }
    .tile-target-seg.t2 { background: var(--blue); animation-delay: 300ms; }
    .tile-target-seg.t3 { background: #8B5CF6; animation-delay: 400ms; }
    @keyframes targetSegGrow { to { width: var(--seg-w); } }
    .tile-target-legend {
      display: flex;
      gap: 10px;
      margin-top: 4px;
    }
    .tile-target-legend-item {
      display: flex;
      align-items: center;
      gap: 3px;
      font-size: 10px;
      color: var(--text-muted);
      font-family: var(--font-mono);
    }
    .tile-target-legend-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
    }

    /* Alert glow */
    .kpi-action-tile.alerts-glow {
      animation: alertGlow 2.5s ease-in-out infinite;
      animation-delay: 1s;
    }
    @keyframes alertGlow {
      0% { box-shadow: 0 0 0 0 rgba(16,185,129,0.12); }
      50% { box-shadow: 0 0 10px 2px rgba(16,185,129,0.06); }
      100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
    }

    /* Responsive */
    @media (max-width: 1200px) {
      .kpi-context-row { grid-template-columns: repeat(2, 1fr); }
      .kpi-action-row { grid-template-columns: repeat(2, 1fr); }
    }
    /* Earnings tile: structured 2-col grid (ticker + day), fixed rows so tile height stays stable */
    .er-tile-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4px 10px;
      margin-top: 6px;
      font-family: var(--font-mono);
    }
    .er-tile-item {
      display: flex;
      align-items: baseline;
      gap: 6px;
      min-width: 0;
    }
    .er-tile-ticker {
      color: var(--text-secondary);
      font-weight: 600;
      font-size: 11px;
      letter-spacing: 0.02em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .er-tile-day {
      color: var(--text-faint);
      font-size: 10px;
      letter-spacing: 0.02em;
      flex-shrink: 0;
    }
    .er-tile-more {
      margin-top: 4px;
      font-family: var(--font-mono);
      font-size: 10px;
      color: var(--text-faint);
      letter-spacing: 0.04em;
    }

    @media (max-width: 768px) {
      .kpi-context-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
      .kpi-action-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
      .tile-price { font-size: 18px; }
      .action-tile-value { font-size: 16px; }

      /* Drop the decorative icon on mobile and reclaim the 40px left padding
         on the four action tiles (SENTIMENT, NEAR TARGETS, EARNINGS, ALERTS ACTIVE). */
      .kpi-action-tile { padding: 12px 12px 12px 12px; }
      .kpi-action-tile .action-tile-icon { display: none; }

      /* Earnings tile: single column on very narrow tiles so "MSFT Wed" never wraps mid-line */
      .er-tile-grid { gap: 3px 8px; }
      .er-tile-ticker { font-size: 10.5px; }
      .er-tile-day { font-size: 9.5px; }

      /* Auth gate: explicit centering + safe insets + width bound for the Clerk card */
      #auth-gate {
        padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
        gap: 20px;
      }
      #clerk-auth-mount {
        width: 100%;
        max-width: 420px;
        display: flex;
        justify-content: center;
      }
      #clerk-auth-mount > div,
      #clerk-auth-mount .cl-rootBox,
      #clerk-auth-mount .cl-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
      }
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
      .spark-line, .spark-fill, .spark-dot, .spark-pulse,
      .tile-target-seg {
        animation: none !important;
        opacity: 1 !important;
        stroke-dashoffset: 0 !important;
        width: var(--seg-w, 30%) !important;
      }
      .kpi-action-tile.alerts-glow { animation: none !important; }
    }

    /* ================================================================
       MARKET INTELLIGENCE BRIEFING
       ================================================================ */
    .mi-section {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
      margin-bottom: 16px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 4px 16px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.03);
    }
    .mi-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 20px;
      border-bottom: 1px solid var(--border);
      background: linear-gradient(180deg, rgba(17,24,39,1) 0%, rgba(17,24,39,0.6) 100%);
    }
    .mi-title-row {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .mi-pulse {
      width: 7px;
      height: 7px;
      background: var(--emerald);
      border-radius: 50%;
      position: relative;
      flex-shrink: 0;
    }
    .mi-pulse::after {
      content: '';
      position: absolute;
      inset: -3px;
      border-radius: 50%;
      background: var(--emerald);
      opacity: 0;
      animation: mi-pulse-ring 2s ease-out infinite;
    }
    @keyframes mi-pulse-ring {
      0% { transform: scale(0.8); opacity: 0.6; }
      100% { transform: scale(2.2); opacity: 0; }
    }
    .mi-title {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-secondary);
    }
    .mi-ai-badge {
      font-size: 9px;
      font-weight: 500;
      letter-spacing: 0.04em;
      color: var(--text-muted);
      background: rgba(55,65,81,0.4);
      border: 1px solid var(--border);
      border-radius: 3px;
      padding: 2px 6px;
    }
    .mi-meta {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;              /* TAN-41: timestamp/badge/toggle wrap to 2 lines if cramped, never overlap */
      row-gap: 6px;
    }
    .mi-timestamp {
      font-size: 11px;
      color: var(--text-muted);
      font-family: var(--font-mono);
      font-weight: 400;
    }
    .mi-session-badge {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 3px 8px;
      border-radius: 3px;
    }
    .mi-session-badge.pre {
      background: rgba(245,158,11,0.12);
      color: var(--amber);
      border: 1px solid rgba(245,158,11,0.2);
    }
    .mi-session-badge.mid {
      background: rgba(59,130,246,0.12);
      color: var(--blue);
      border: 1px solid rgba(59,130,246,0.2);
    }
    .mi-session-badge.post {
      background: rgba(59,130,246,0.12);
      color: var(--blue);
      border: 1px solid rgba(59,130,246,0.2);
    }
    .mi-session-badge.closed {
      background: rgba(148,163,184,0.12);
      color: var(--text-faint);
      border: 1px solid rgba(148,163,184,0.2);
    }
    /* TAN-1052: staging-only agentic MI twin — keep visible for A/B QA */
    .mi-section-agentic {
      margin-top: 12px;
      border-color: rgba(168, 85, 247, 0.22);
    }
    .mi-agentic-status {
      margin: 0;
      padding: 10px 2px;
      font-size: 12.5px;
      line-height: 1.45;
      color: #9ca3af;
    }
    .mi-agentic-status--error { color: #fbbf24; }
    .mi-agentic-status--loading { color: #93c5fd; }
    /* TAN-1052: staging-only agentic MI twin A/B badge. Plain muted chip,
       modeled on .mi-ai-badge — no top accent / gradient rail (handoff rule 20),
       no emoji (rule 16). Marks the twin card so Matt can tell the A/B apart. */
    .mi-badge-agentic {
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-secondary);
      background: rgba(55,65,81,0.4);
      border: 1px solid var(--border);
      border-radius: 3px;
      padding: 2px 6px;
    }
    .mi-body {
      padding: 20px;
    }
    @media (max-width: 768px) {
      .mi-header { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 16px; }
      .mi-meta { align-self: flex-start; }
      .mi-body { padding: 16px; }
      .mi-timestamp { font-size: 10px; }
      .mi-chips { gap: 6px; }
      .mi-chip { font-size: 10px; padding: 3px 8px; }
    }
    .mi-narrative ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .mi-narrative li {
      color: var(--text-primary);
      font-size: 13px;
      line-height: 1.65;
      padding: 8px 0 8px 16px;
      position: relative;
      border-bottom: 1px solid rgba(55,65,81,0.25);
    }
    .mi-narrative li:last-child { border-bottom: none; }
    .mi-narrative li::before {
      content: '\2022';
      position: absolute;
      left: 0;
      color: var(--text-muted);
    }
    .mi-narrative p {
      color: var(--text-primary);
      font-size: 13px;
      line-height: 1.65;
      margin-bottom: 14px;
    }
    .mi-narrative p:last-child { margin-bottom: 0; }
    .mi-narrative strong { color: #F9FAFB; font-weight: 600; }
    .mi-narrative .tk {
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 500;
      padding: 1px 4px;
      border-radius: 3px;
      white-space: nowrap;
      cursor: pointer;
      /* v2.4.0: match Street Intel .clickable-ticker affordance */
      text-decoration: underline;
      text-decoration-color: rgba(148,163,184,0.45);
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
      transition: color 0.15s ease, text-decoration-color 0.15s ease, background 0.15s ease;
    }
    .mi-narrative .tk:hover {
      text-decoration-color: rgba(59,130,246,0.85);
    }
    /* v2.4.1: inline MI tickers render blue to match app-wide ticker affordance
       (Street Intel .clickable-ticker, watchlist, weekly reports). Previous
       near-white made tickers visually indistinguishable from prose. */
    .mi-narrative .tk-neutral { color: var(--blue); background: rgba(59,130,246,0.08); }
    .mi-narrative .tk-up { color: var(--emerald); background: rgba(16,185,129,0.15); }
    .mi-narrative .tk-down { color: var(--red); background: rgba(239,68,68,0.15); }
    /* v2.4.0: bullet headline leader — purple accent for at-a-glance scanning,
       matching the Street Intel card pattern. Falls back to white if .lead is
       absent (older briefings remain unchanged). */
    .mi-narrative .lead { color: #C4B5FD; font-weight: 600; }
    .mi-narrative .num {
      font-family: var(--font-mono);
      font-variant-numeric: tabular-nums;
      font-weight: 500;
    }
    .mi-narrative .pct-up {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 600;
      padding: 2px 6px;
      border-radius: 4px;
      background: rgba(16, 185, 129, 0.15);
      color: #10B981;
      white-space: nowrap;
    }
    .mi-narrative .pct-down {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 600;
      padding: 2px 6px;
      border-radius: 4px;
      background: rgba(239, 68, 68, 0.15);
      color: #EF4444;
      white-space: nowrap;
    }
    .mi-narrative .pct-neutral {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 600;
      padding: 2px 6px;
      border-radius: 4px;
      background: rgba(255, 255, 255, 0.06);
      color: var(--text-secondary);
      white-space: nowrap;
    }
    /* v2.4.0: distance-to-target pill (amber) — setup metric, distinct from P&L */
    .mi-narrative .pct-target {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 600;
      padding: 2px 6px;
      border-radius: 4px;
      background: rgba(245, 158, 11, 0.15);
      color: #F59E0B;
      white-space: nowrap;
    }
    .mi-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid var(--border);
    }
    .mi-chip {
      font-size: 11px;
      font-weight: 500;
      padding: 4px 10px;
      border-radius: 20px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      white-space: nowrap;
      cursor: default;
      transition: all 0.15s ease;
    }
    .mi-chip:hover { transform: translateY(-1px); }
    .mi-chip-amber { color: var(--amber); background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.2); }
    .mi-chip-emerald { color: var(--emerald); background: rgba(16,185,129,0.15); border: 1px solid rgba(16,185,129,0.2); }
    .mi-chip-red { color: var(--red); background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.2); }
    .mi-chip-blue { color: var(--blue); background: rgba(59,130,246,0.12); border: 1px solid rgba(59,130,246,0.2); }
    .mi-right {
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .mi-widget {
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 6px;
      overflow: hidden;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .mi-widget:hover { border-color: rgba(55,65,81,0.7); box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
    .mi-widget-header {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 12px;
      border-bottom: 1px solid var(--border);
      background: rgba(255,255,255,0.015);
    }
    .mi-widget-header svg { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; }
    .mi-widget-title {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-muted);
    }
    .mi-widget-body { padding: 10px 12px; }
    .mi-regime-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    @media (max-width: 480px) { .mi-regime-grid { grid-template-columns: 1fr; } }
    .mi-regime-item { display: flex; flex-direction: column; gap: 2px; }
    .mi-regime-label {
      font-size: 10px;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
    .mi-regime-value {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-primary);
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .mi-regime-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .mi-dot-amber { background: var(--amber); box-shadow: 0 0 6px rgba(245,158,11,0.4); }
    .mi-dot-green { background: var(--emerald); box-shadow: 0 0 6px rgba(16,185,129,0.4); }
    .mi-dot-red { background: var(--red); box-shadow: 0 0 6px rgba(239,68,68,0.4); }
    .mi-sent-bar { display: flex; gap: 2px; margin-top: 2px; }
    .mi-sent-block { width: 12px; height: 8px; border-radius: 1px; }
    .mi-sent-green { background: var(--emerald); opacity: 0.8; }
    .mi-sent-red { background: var(--red); opacity: 0.8; }
    .mi-sent-gray { background: var(--text-faint); opacity: 0.4; }
    .mi-movers-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 4px 0;
      border-bottom: 1px solid rgba(55,65,81,0.25);
    }
    .mi-movers-row:last-child { border-bottom: none; }
    .mi-mover-ticker {
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 600;
      color: var(--text-primary);
      min-width: 50px;
    }
    .mi-mover-name {
      font-size: 10px;
      color: var(--text-muted);
      flex: 1;
      padding: 0 8px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .mi-mover-change {
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 3px;
      min-width: 65px;
      justify-content: flex-end;
    }
    .mi-mover-change.up { color: var(--emerald); }
    .mi-mover-change.down { color: var(--red); }
    .mi-movers-divider { height: 1px; background: var(--border); margin: 4px 0; }
    .mi-catalyst-item {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      margin-bottom: 6px;
    }
    .mi-catalyst-item:last-child { margin-bottom: 0; }
    .mi-catalyst-time {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 500;
      color: var(--text-muted);
      min-width: 48px;
      flex-shrink: 0;
      padding-top: 1px;
    }
    .mi-catalyst-icon {
      width: 18px;
      height: 18px;
      border-radius: 3px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .mi-catalyst-icon svg { width: 11px; height: 11px; }
    .mi-cat-macro { background: rgba(59,130,246,0.12); color: var(--blue); border: 1px solid rgba(59,130,246,0.2); }
    .mi-cat-earnings { background: rgba(16,185,129,0.15); color: var(--emerald); border: 1px solid rgba(16,185,129,0.2); }
    .mi-cat-fed { background: rgba(239,68,68,0.15); color: var(--red); border: 1px solid rgba(239,68,68,0.2); }
    .mi-cat-alert { background: rgba(245,158,11,0.12); color: var(--amber); border: 1px solid rgba(245,158,11,0.2); }
    .mi-catalyst-text { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
    .mi-catalyst-text strong { color: var(--text-primary); font-weight: 600; }
    .mi-footer {
      padding: 10px 20px;
      border-top: 1px solid var(--border);
      background: rgba(0,0,0,0.15);
    }
    .mi-disclaimer {
      font-size: 10px;
      color: var(--text-faint);
    }
    @media (prefers-reduced-motion: reduce) {
      .mi-pulse::after { animation: none; }
    }

    /* ================================================================
       MI HISTORY TOGGLE — TAN-26
       Top-right toggle in MI header that reveals up to 3 prior
       briefings from today. Additive only — does not modify any
       existing .mi-* rule. Mockup approved 2026-05-07.
       ================================================================ */
    .mi-history { position: relative; }
    /* When the popover is open we need .mi-section to allow overflow so the
       absolutely-positioned popover (anchored to .mi-history inside the
       header) isn't clipped. .mi-section is overflow:hidden by default to
       maintain the rounded corners on the briefing body. Scoping this to
       :has() keeps the default clipping intact whenever the popover is
       closed. The mobile bottom-sheet uses position:fixed and doesn't need
       this. Browsers without :has() (none of our supported targets) will
       clip the popover — acceptable graceful degradation. */
    .mi-section:has(.mi-history-btn[aria-expanded="true"]) { overflow: visible; }
    .mi-history-btn {
      display: inline-flex; align-items: center; gap: 6px;
      height: 24px; padding: 0 8px 0 10px;
      font-family: var(--font-sans, inherit);
      font-size: 11px; font-weight: 500;
      letter-spacing: 0.04em;
      color: var(--text-secondary);
      background: rgba(31,41,55,0.6);
      border: 1px solid var(--border);
      border-radius: 4px;
      cursor: pointer;
      white-space: nowrap;          /* TAN-41: prevent label wrap on narrow viewports */
      flex-shrink: 0;               /* TAN-41: keep toggle intact when meta row crowds */
      transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }
    /* TAN-41: shorten label on narrow viewports. The button always carries
       both spans; CSS shows the appropriate one for the viewport. Avoids
       any JS branching on width. */
    .mi-history-btn-label-short { display: none; }
    @media (max-width: 480px) {
      .mi-history-btn-label-full { display: none; }
      .mi-history-btn-label-short { display: inline; }
    }
    .mi-history-btn:hover {
      background: rgba(55,65,81,0.7);
      color: var(--text-primary);
      border-color: rgba(148,163,184,0.25);
    }
    .mi-history-btn[aria-expanded="true"] {
      background: rgba(55,65,81,0.85);
      color: var(--text-primary);
      border-color: rgba(148,163,184,0.25);
    }
    .mi-history-btn:disabled {
      opacity: 0.5; cursor: default;
    }
    .mi-history-btn .chev {
      width: 10px; height: 10px;
      transition: transform 0.15s ease;
    }
    .mi-history-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
    .mi-history-count {
      font-family: var(--font-mono);
      font-size: 10px; color: var(--text-muted);
      background: rgba(148,163,184,0.12);
      padding: 1px 5px; border-radius: 3px; margin-left: 2px;
    }
    .mi-history-popover {
      position: absolute;
      top: calc(100% + 6px); right: 0;
      min-width: 280px; max-width: 340px;
      background: var(--surface);
      border: 1px solid rgba(148,163,184,0.25);
      border-radius: 6px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.25);
      z-index: 50;
      overflow: hidden;
    }
    .mi-history-pop-header {
      padding: 10px 14px 8px;
      border-bottom: 1px solid var(--border);
      font-size: 10px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-faint);
      font-weight: 600;
    }
    .mi-history-list { list-style: none; margin: 0; padding: 4px; }
    .mi-history-item {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 10px;
      border-radius: 4px;
      cursor: pointer;
      transition: background 0.12s ease;
      outline: none;
    }
    .mi-history-item:hover,
    .mi-history-item:focus-visible { background: rgba(55,65,81,0.5); }
    .mi-history-item.active { background: rgba(59,130,246,0.10); }
    .mi-history-item.active .mi-history-session { color: var(--blue, #3B82F6); }
    .mi-history-marker {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: rgba(148,163,184,0.35);
      flex-shrink: 0;
    }
    .mi-history-item.active .mi-history-marker {
      background: var(--blue, #3B82F6);
      box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
    }
    .mi-history-text { flex: 1; min-width: 0; }
    .mi-history-session {
      font-size: 12px; font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 2px;
    }
    .mi-history-time {
      font-size: 10px; color: var(--text-muted);
      font-family: var(--font-mono);
    }
    .mi-history-active-tag {
      font-size: 9px; font-weight: 600;
      letter-spacing: 0.06em; text-transform: uppercase;
      color: var(--blue, #3B82F6);
      background: rgba(59,130,246,0.12);
      border: 1px solid rgba(59,130,246,0.2);
      padding: 2px 5px; border-radius: 3px;
    }
    .mi-history-pop-footer {
      padding: 8px 14px;
      border-top: 1px solid var(--border);
      font-size: 10px; color: var(--text-faint);
    }
    .mi-backdrop { display: none; }
    /* TAN-46: when backdrop carries the [hidden] attribute (closed state),
       force display:none regardless of viewport. Without this rule the
       mobile media query below sets display:block, the implicit
       display:none from [hidden] is overridden, and the invisible-but-
       present backdrop intercepts every tap inside #main-content. The
       MI history popover code does `backdrop.hidden = true` initially
       — that intent must win on mobile too. */
    .mi-backdrop[hidden] { display: none !important; }
    /* Mobile: bottom-sheet pattern — only on actually narrow viewports */
    @media (max-width: 480px) {
      .mi-backdrop {
        display: block;
        position: fixed; inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 40;
      }
      .mi-history-popover {
        position: fixed;
        /* Sit above the bottom tab bar (~64px) + iOS home indicator safe-area
           so the last history item isn't clipped behind the nav. */
        top: auto; left: 0; right: 0;
        bottom: calc(64px + env(safe-area-inset-bottom, 0px));
        /* Cap height so the sheet always leaves a peek at the top and an
           internal scroll kicks in if briefings ever exceed visible space. */
        max-height: calc(100dvh - 64px - 80px);
        display: flex; flex-direction: column;
        width: 100%; min-width: 0; max-width: none;
        border-radius: 12px 12px 0 0;
        border: 1px solid rgba(148,163,184,0.25);
        border-bottom: none;
        box-shadow: 0 -10px 30px rgba(0,0,0,0.5);
        padding-bottom: 8px;
        animation: mi-history-sheet-up 0.18s ease-out;
      }
      .mi-history-popover::before { flex-shrink: 0; }
      .mi-history-popover .mi-history-pop-header,
      .mi-history-popover .mi-history-pop-footer { flex-shrink: 0; }
      .mi-history-popover .mi-history-list {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex: 1 1 auto;
        min-height: 0;
      }
      .mi-history-popover::before {
        content: ''; display: block;
        width: 36px; height: 4px;
        background: rgba(148,163,184,0.4);
        border-radius: 2px;
        margin: 8px auto 4px;
      }
      .mi-history-pop-header { text-align: center; }
      .mi-history-pop-footer { text-align: center; }
      .mi-history-item { padding: 12px 14px; min-height: 44px; }
      .mi-history-session { font-size: 13px; }
      .mi-history-time { font-size: 11px; }
      /* TAN-58: re-assert [hidden] intent on mobile. The display:flex above
         (needed for the flex column layout that pins header/footer and lets
         the list scroll) overrides the implicit display:none from the
         [hidden] attribute that JS sets on init. Without this, the popover
         renders OPEN on cold PWA load before the user taps anything.
         Same class of bug as TAN-47 (.mi-backdrop), different element. */
      .mi-history-popover[hidden] { display: none !important; }
    }
    @keyframes mi-history-sheet-up {
      from { transform: translateY(100%); }
      to   { transform: translateY(0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .mi-history-popover { animation: none; }
    }

    /* ================================================================
       ALERT CARDS
       ================================================================ */
    .alert-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-bottom: 8px;
    }
    .alert-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 16px;
      transition: all 180ms var(--ease);
    }
    .alert-card:hover { background: var(--surface-2); }
    .alert-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }
    .alert-ticker {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 16px;
      color: var(--text-primary);
    }
    .alert-price {
      font-family: var(--font-mono);
      font-size: 14px;
      font-weight: 600;
      color: var(--text-secondary);
      font-variant-numeric: tabular-nums lining-nums;
    }
    .alert-meta {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 12px;
      flex-wrap: wrap;
    }

    /* Target row with price axis */
    .alert-target-entry { margin-bottom: 8px; }
    .alert-target-entry:last-child { margin-bottom: 0; }
    .alert-axis {
      display: flex;
      align-items: center;
      gap: 0;
      height: 28px;
    }
    .alert-axis-price {
      font-family: var(--font-mono);
      font-size: 12px;
      font-variant-numeric: tabular-nums lining-nums;
      white-space: nowrap;
      min-width: 64px;
    }
    .alert-axis-price.left {
      color: var(--text-primary);
      font-weight: 600;
      text-align: right;
      padding-right: 8px;
    }
    .alert-axis-price.right {
      color: var(--text-muted);
      text-align: left;
      padding-left: 8px;
    }
    .alert-axis-track {
      position: relative;
      flex: 1;
      height: 6px;
      background: rgba(255,255,255,0.06);
      border-radius: 3px;
      overflow: visible;
    }
    .alert-axis-fill {
      position: absolute;
      top: 0;
      height: 100%;
      border-radius: 3px;
    }
    .alert-axis-fill.buy {
      right: 0;
      background: var(--blue);
      opacity: 0.7;
      border-radius: 3px;
    }
    .alert-axis-fill.sell {
      left: 0;
      background: var(--amber);
      opacity: 0.7;
      border-radius: 3px;
    }
    .alert-axis-marker {
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: 2px solid var(--bg);
      z-index: 2;
    }
    .alert-axis-marker.buy { background: var(--blue); }
    .alert-axis-marker.sell { background: var(--amber); }
    .alert-target-label-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 2px;
    }
    .alert-target-badge {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      padding: 2px 6px;
      border-radius: 3px;
      letter-spacing: 0.05em;
    }
    .alert-target-badge.buy {
      background: var(--blue-dim);
      color: var(--blue);
    }
    .alert-target-badge.sell {
      background: var(--amber-dim);
      color: var(--amber);
    }
    .alert-target-delta {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--text-muted);
      font-variant-numeric: tabular-nums lining-nums;
    }
    .alert-section-label {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-muted);
      margin-bottom: 6px;
      margin-top: 10px;
    }
    .alert-section-label:first-child { margin-top: 0; }
    .alert-section-label.buy-label { color: var(--blue); }
    .alert-section-label.sell-label { color: var(--amber); }

    /* ================================================================
       ALERT CARDS V2 — Ring Gauge + Blue Bars
       ================================================================ */
    .alert-v2-header {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 6px;
    }
    .alert-v2-ticker-name {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1.2;
      white-space: nowrap;
    }
    .alert-v2-ticker-price {
      position: relative;
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      gap: 8px;
      min-width: 0;
      padding-right: 95px;
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--text-secondary);
      margin-bottom: 6px;
    }
    .alert-v2-chgpct {
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
    }
    .alert-v2-signals-row {
      display: flex;
      flex-wrap: nowrap;
      align-items: baseline;
      gap: 4px;
      margin-bottom: 14px;
    }
    /* Medium desktop (MacBook Air ~1280–1440): natural wrap only —
       do NOT force R/R onto its own line (Coord #29). */
    @media (min-width: 1025px) and (max-width: 1440px) {
      .alert-v2-signals-row {
        display: flex;
        flex-wrap: wrap;
      }
    }
    .alert-v2-pill-stack {
      position: absolute;
      top: 0;
      right: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
      align-items: flex-end;
    }
    /* TAN-510: when ER pill + zone badge stack two-deep, the absolutely-
       positioned .alert-v2-pill-stack (40px = 18 + 4 + 18) overflows the
       ticker-price row (~22px) and visually overlaps the signals row below.
       Reserve enough min-height on the parent to contain both pills. Single-
       pill stacks (zone only, ER only) are unaffected because they're 18px. */
    .alert-v2-ticker-price:has(.alert-v2-pill-stack .alert-v2-er-pill + .alert-v2-zone-badge),
    .alert-v2-ticker-price:has(.alert-v2-pill-stack .alert-v2-zone-badge + .alert-v2-er-pill) {
      min-height: 44px;
    }
    .alert-v2-zone-badge {
      font-family: var(--font-body);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.05em;
      line-height: 1;
      padding: 4px 10px;
      border-radius: var(--radius);
      white-space: nowrap;
      text-transform: uppercase;
      display: inline-block;
    }
    .alert-v2-zone-badge.buy {
      background: rgba(16,185,129,0.12);
      color: var(--emerald);
    }
    .alert-v2-zone-badge.sell {
      background: rgba(239,68,68,0.12);
      color: var(--red);
    }
    .alert-v2-targets {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 14px;
    }
    .alert-v2-target-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .alert-v2-target-badge {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 600;
      padding: 2px 6px;
      border-radius: 3px;
      white-space: nowrap;
      min-width: 30px;
      text-align: center;
      background: rgba(255,255,255,0.08);
      color: var(--text-secondary);
    }
    .alert-v2-target-price {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--text-secondary);
      min-width: 52px;
    }
    .alert-v2-bar-container {
      flex: 1;
      height: 4px;
      background: rgba(255,255,255,0.06);
      border-radius: 2px;
      overflow: hidden;
    }
    .alert-v2-bar-fill {
      height: 100%;
      border-radius: 2px;
      background: var(--blue);
    }
    .alert-v2-distance {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--text-muted);
      min-width: 38px;
      text-align: right;
    }
    .alert-v2-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }
    .alert-v2-pills .pill {
      text-align: center;
    }
    @media (max-width: 768px) {
      .alert-v2-pills .pill {
        flex: 1 1 auto;
        min-width: 0;
      }
      /* PTA card mobile: ticker + price + % on row 1, ER/Zone can wrap to row 2 */
      .alert-v2-ticker-price {
        flex-wrap: wrap;
        row-gap: 4px;
        padding-right: 0;
      }
      .alert-v2-pill-stack {
        position: static;
        margin-left: auto;
      }
      /* Signals row stays on its own line (matches desktop) */
      .alert-v2-signals-row {
        flex-wrap: wrap;
        gap: 6px;
      }
      .alert-v2-signal {
        margin-left: 0;
      }
    }
    /* Conviction + R/R inline signals (header row, after SCORE) */
    .alert-v2-signal {
      display: inline-flex;
      align-items: baseline;
      gap: 4px;
      font-size: 10px;
      letter-spacing: 0.08em;
      white-space: nowrap;
      margin-left: 8px;
    }
    .alert-v2-signals-row > .alert-v2-signal:first-child {
      margin-left: 0;
    }
    .alert-v2-signal-label {
      color: var(--text-muted);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.1em;
    }
    .alert-v2-signal-value {
      font-weight: 600;
      text-transform: uppercase;
    }

    /* Global technicals toggle for Price Target cards */
    .alert-v2-tech-toggle {
      background: none; border: 1px solid var(--border); cursor: pointer;
      font-family: var(--font-mono); font-size: 10px; font-weight: 500;
      color: var(--text-muted); padding: 3px 10px;
      border-radius: 4px;
      letter-spacing: 0.03em;
      transition: all 0.15s;
    }
    .alert-v2-tech-toggle:hover { color: var(--text-secondary); border-color: var(--text-muted); }
    .alert-v2-tech-body {
      display: none;
      margin-top: 6px;
    }
    .alert-grid.show-technicals .alert-v2-tech-body { display: block; }


    .alert-v2-divider {
      height: 1px;
      background: var(--border);
      margin: 12px 0;
    }

    /* ER pill base + urgency tiers — TAN-425: match .alert-v2-zone-badge box
       metrics exactly so ER TODAY / SELL ZONE / BUY ZONE render at identical
       size when stacked in .alert-v2-pill-stack. line-height:1 collapses the
       inherited line-box (Inter's normal ~1.2 expands the box otherwise). */
    .alert-v2-er-pill {
      font-family: var(--font-body);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.05em;
      line-height: 1;
      padding: 4px 10px;
      border-radius: var(--radius);
      white-space: nowrap;
      text-transform: uppercase;
      display: inline-block;
    }
    .alert-v2-er-pill-today {
      color: var(--red);
      background: rgba(239, 68, 68, 0.12);
      position: relative;
      overflow: hidden;
    }
    .alert-v2-er-pill-today::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 60%;
      height: 100%;
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(239, 68, 68, 0.55) 50%,
        transparent 100%
      );
      animation: er-today-shimmer 2.2s linear infinite;
      pointer-events: none;
    }
    @keyframes er-today-shimmer {
      0%   { transform: translateX(-120%); }
      100% { transform: translateX(220%); }
    }
    .alert-v2-er-pill-soon {
      color: var(--amber);
      background: rgba(245, 158, 11, 0.12);
    }
    .alert-v2-er-pill-upcoming {
      color: #FACC15;
      background: rgba(250, 204, 21, 0.12);
    }

    /* ================================================================
       BULL/BEAR SCENARIO — Sidebar Detail Panel
       ================================================================ */
    .scenario-cards-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    .scenario-card {
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 14px;
    }
    .scenario-card-header { margin-bottom: 12px; }
    .scenario-pill {
      display: inline-block;
      font-family: var(--font-body);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.06em;
      padding: 3px 10px;
      border-radius: 3px;
    }
    .scenario-pill.bull-pill {
      background: rgba(16,185,129,0.15);
      color: var(--emerald);
    }
    .scenario-pill.bear-pill {
      background: rgba(239,68,68,0.15);
      color: var(--red);
    }
    .scenario-bullets {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .scenario-bullets li {
      font-family: var(--font-body);
      font-size: 11.5px;
      color: var(--text-secondary);
      line-height: 1.45;
      padding-left: 12px;
      position: relative;
    }
    .scenario-bullets li::before {
      content: '•';
      position: absolute;
      left: 0;
      color: var(--text-muted);
    }

    .pill {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.04em;
      padding: 2px 8px;
      border-radius: 100px;
      background: rgba(55,65,81,0.5);
      color: var(--text-muted);
      text-transform: uppercase;
      font-family: var(--font-mono);
    }
    .pill-score { background: var(--blue-dim); color: var(--blue); }
    .view-all-link {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 13px;
      font-weight: 500;
      color: var(--blue);
      margin: 12px 0 8px;
      cursor: pointer;
      transition: color 150ms var(--ease);
    }
    .view-all-link:hover { color: var(--blue-hover); }

    /* ================================================================
       IV RANK TABLE (email style)
       ================================================================ */
    .iv-table-wrap {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      margin-bottom: 32px;
    }
    .iv-table-header {
      padding: 14px 20px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .iv-table {
      width: 100%;
      border-collapse: collapse;
    }
    .iv-table thead th {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-muted);
      text-align: left;
      padding: 10px 16px;
      background: var(--surface-2);
      border-bottom: 1px solid var(--border);
      white-space: nowrap;
    }
    .iv-table tbody td {
      padding: 12px 16px;
      border-bottom: 1px solid var(--border);
      font-size: 13px;
      color: var(--text-secondary);
      white-space: nowrap;
      font-variant-numeric: tabular-nums lining-nums;
    }
    .iv-table tbody tr:last-child td { border-bottom: none; }
    .iv-table tbody tr:hover { background: var(--surface-2); }
    .iv-ticker {
      font-family: var(--font-body);
      font-weight: 600;
      color: var(--text-primary);
    }
    .iv-value {
      font-family: var(--font-mono);
      font-weight: 600;
    }
    .iv-badge {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.06em;
      padding: 2px 6px;
      border-radius: 3px;
      text-transform: uppercase;
      font-family: var(--font-mono);
    }
    .iv-badge.high { background: var(--red-dim); color: var(--red); }
    .iv-badge.elevated { background: var(--amber-dim); color: var(--amber); }
    .iv-progress-track {
      width: 80px;
      height: 6px;
      background: var(--border);
      border-radius: 3px;
      overflow: hidden;
      display: inline-block;
      vertical-align: middle;
    }
    .iv-progress-bar {
      height: 100%;
      border-radius: 3px;
      transition: width 500ms var(--ease);
    }
    .iv-context {
      font-size: 12px;
      font-weight: 600;
    }
    .iv-context-sub {
      font-size: 11px;
      font-weight: 400;
      color: var(--text-muted);
    }

    /* ================================================================
       RS HEATMAP
       ================================================================ */
    .rs-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 6px;
      margin-bottom: 32px;
    }
    .rs-tile {
      border-radius: var(--radius);
      padding: 12px 8px;
      text-align: center;
      min-height: 80px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      cursor: pointer;
      transition: opacity 150ms var(--ease);
    }
    .rs-tile:hover { opacity: 0.8; }
    .rs-tile-ticker {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 13px;
    }
    .rs-tile-value {
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 600;
      font-variant-numeric: tabular-nums lining-nums;
    }

    /* ================================================================
       SECTOR PERFORMANCE TREEMAP HEATMAP
       ================================================================ */
    .sector-time-toggle {
      display: flex;
      gap: 0;
      margin-bottom: 18px;
    }
    .sector-time-btn {
      padding: 6px 16px;
      background: none;
      border: 1px solid #2A2D3E;
      color: #8B8FA3;
      font-size: 12px;
      font-weight: 600;
      font-family: var(--font-mono);
      cursor: pointer;
      transition: all 0.15s;
    }
    .sector-time-btn:first-child { border-radius: 6px 0 0 6px; }
    .sector-time-btn:last-child { border-radius: 0 6px 6px 0; }
    .sector-time-btn:not(:first-child) { border-left: none; }
    .sector-time-btn.active {
      background: #10B981;
      color: #fff;
      border-color: #10B981;
    }
    .sector-time-btn:disabled {
      opacity: 0.35;
      cursor: not-allowed;
    }
    .sector-time-btn:not(:disabled):not(.active):hover {
      background: rgba(255,255,255,0.04);
      color: #CBD5E1;
    }
    .sector-cluster {
      margin-bottom: 20px;
    }
    .sector-cluster-label {
      font-size: 11px;
      font-weight: 600;
      color: #6B7280;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: 8px;
      padding-left: 2px;
    }
    .sector-cluster-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
      gap: 5px;
    }
    .sector-tile {
      border-radius: 6px;
      padding: 14px 6px 12px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      transition: opacity 150ms ease, transform 150ms ease;
      min-height: 68px;
    }
    .sector-tile:hover {
      opacity: 0.85;
      transform: scale(1.03);
    }
    .sector-tile-ticker {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 13px;
      color: #fff;
    }
    .sector-tile-pct {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 600;
      font-variant-numeric: tabular-nums lining-nums;
    }
    .sector-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 16px;
      padding: 10px 0;
      border-top: 1px solid #1F2234;
    }
    .sector-legend-item {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      color: #8B8FA3;
      font-family: var(--font-mono);
    }
    .sector-legend-swatch {
      width: 12px;
      height: 12px;
      border-radius: 3px;
      display: inline-block;
    }

    /* ================================================================
       RANKINGS TABLE
       ================================================================ */
    .filter-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 16px;
      flex-wrap: wrap;
    }
    .filter-select, .filter-input {
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--text-secondary);
      font-family: var(--font-body);
      font-size: 13px;
      padding: 7px 12px;
      border-radius: var(--radius-sm);
      transition: border-color 150ms var(--ease);
      outline: none;
    }
    .filter-select:focus, .filter-input:focus { border-color: var(--blue); }
    .filter-select option { background: var(--surface); color: var(--text-secondary); }
    .filter-input { width: 140px; }
    .filter-reset {
      font-size: 12px;
      font-weight: 500;
      color: var(--text-muted);
      padding: 7px 12px;
      border-radius: var(--radius-sm);
      transition: all 150ms var(--ease);
      cursor: pointer;
    }
    .filter-reset:hover { color: var(--text-primary); background: rgba(255,255,255,0.04); }
    /* TAN-821: Portfolio+Watchlist filter button */
    .filter-btn {
      font-size: 12px;
      font-weight: 500;
      color: var(--text-muted);
      padding: 7px 12px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      background: var(--surface);
      cursor: pointer;
      transition: all 150ms var(--ease);
      white-space: nowrap;
    }
    .filter-btn:hover { color: var(--text-primary); border-color: var(--blue); }
    .filter-btn.active {
      color: var(--text-primary);
      border-color: var(--blue);
      background: var(--blue-dim);
    }

    .table-wrap {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      max-width: 100%;
      margin-bottom: 32px;
    }
    .table-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 20px;
      border-bottom: 1px solid var(--border);
      flex-wrap: wrap;
      gap: 8px;
    }
    .table-toolbar-title {
      font-family: var(--font-display);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-muted);
    }
    .table-toolbar-badge {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.08em;
      color: var(--blue);
      background: var(--blue-dim);
      padding: 3px 8px;
      border-radius: 3px;
    }
    .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; max-width: 100%; background: var(--surface); }
    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }
    #rankings-table {
      width: 100%;
      min-width: 1920px;
      table-layout: fixed;
      background: var(--surface);
    }
    /* Explicit column widths — total 1798px + 122px slack distributed by table-layout:fixed.
       min-width:1920px guarantees no column is compressed below its declared width. */
    #rankings-table col.col-ticker     { width: 90px; }
    #rankings-table col.col-sparkline  { width: 76px; }
    #rankings-table col.col-price      { width: 82px; }
    #rankings-table col.col-1d         { width: 56px; }
    #rankings-table col.col-mktcap     { width: 82px; }
    #rankings-table col.col-alignment  { width: 104px; }
    #rankings-table col.col-score      { width: 92px; }
    #rankings-table col.col-aiscore    { width: 82px; }
    #rankings-table col.col-near       { width: 60px; }
    #rankings-table col.col-far        { width: 56px; }
    #rankings-table col.col-conviction { width: 82px; }
    #rankings-table col.col-rr         { width: 78px; }
    #rankings-table col.col-rsi        { width: 54px; }
    #rankings-table col.col-rsspy      { width: 64px; }
    #rankings-table col.col-rsqqq      { width: 64px; }
    #rankings-table col.col-rsmag7     { width: 70px; }
    #rankings-table col.col-dayser     { width: 68px; }
    #rankings-table col.col-sma50      { width: 64px; }
    #rankings-table col.col-sma200     { width: 70px; }
    #rankings-table col.col-smax       { width: 62px; }
    #rankings-table col.col-rvol       { width: 58px; }
    #rankings-table col.col-1w         { width: 56px; }
    #rankings-table col.col-2w         { width: 56px; }
    #rankings-table col.col-1m         { width: 56px; }
    #rankings-table col.col-3m         { width: 56px; }
    #rankings-table col.col-1y         { width: 56px; }
    #rankings-table col.col-ytd        { width: 56px; }
    #rankings-table col.col-52wk       { width: 170px; }
    thead tr {
      background: var(--surface-2);
    }

    thead th {
      position: sticky;
      top: 0;
      background: var(--surface-2);
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-muted);
      text-align: left;
      padding: 10px 8px;
      border-bottom: 1px solid var(--border);
      white-space: nowrap;
      cursor: pointer;
      user-select: none;
      transition: color 150ms var(--ease);
    }
    thead th:hover { color: var(--text-secondary); }
    thead th[title] { text-decoration: underline dotted var(--text-muted); text-underline-offset: 3px; cursor: help; }
    thead th .sort-arrow {
      display: inline-block;
      margin-left: 4px;
      font-size: 10px;
      opacity: 0.5;
    }
    thead th.sorted .sort-arrow { opacity: 1; color: var(--blue); }
    tbody tr {
      transition: background 180ms ease;
    }
    tbody tr:hover { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--blue); }
    /* Cell-level hover background fills only in non-heatmap mode. In heatmap mode,
       per-cell colors are the entire information channel of the view, so the row
       hover must not flatten them — the row's own background tint plus the inset
       blue accent remain as hover indicators, and each td keeps its inline
       heatmap color (cells without one fall through to the row tint). */
    #rankings-table:not(.heatmap-mode) tbody tr:hover td { background: var(--surface-2) !important; }
    tbody td {
      padding: 9px 8px;
      border-bottom: 1px solid var(--border);
      font-variant-numeric: tabular-nums lining-nums;
      white-space: nowrap;
      color: var(--text-secondary);
    }
    .td-perf {
      font-family: var(--font-mono);
      font-size: 12px;
      padding: 9px 6px;
      text-align: right;
      min-width: 48px;
    }
    /* Sticky first column for rankings table */
    #rankings-table thead th:first-child,
    #rankings-table tbody td:first-child {
      position: sticky;
      left: 0;
      z-index: 2;
      background: var(--surface);
    }
    #rankings-table thead th:first-child {
      background: var(--surface-2);
      z-index: 3;
    }
    #rankings-table tbody tr:hover td:first-child {
      background: var(--surface-2);
    }
    tbody tr:last-child td { border-bottom: none; }

    .td-ticker {
      font-family: var(--font-body);
      font-weight: 600;
      font-size: 13px;
      color: var(--text-primary);
    }
    .td-mono {
      font-family: var(--font-mono);
      font-size: 13px;
    }
    /* Coord #21: consolidated Score column (display = algo±AI effective).
       Blue tint marks primary score col; default row ORDER still uses hidden
       _netScore sort (netScore) — no reorder in v1. */
    #rankings-table th[data-col="Score"],
    .td-score {
      font-family: var(--font-mono);
      font-weight: 600;
      min-width: 70px;
      white-space: nowrap;
    }
    thead th.th-score-primary {
      min-width: 70px;
      white-space: nowrap;
      background: rgba(59, 130, 246, 0.10);
      color: #4dabf7;
      font-weight: 700;
    }
    thead th.th-score-primary:hover { color: #4dabf7; }
    thead th.th-score-primary.sorted { color: #4dabf7; }
    .td-score {
      background: rgba(59, 130, 246, 0.06);
    }
    .td-score-wrap {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      white-space: nowrap;
      min-width: 56px;
      overflow: visible;
    }

    /* Legacy NET / AI column classes kept for any residual markup; columns removed from table. */
    .td-aiscore { white-space: nowrap; }
    .td-aiscore .ai-diverge-mark { color: var(--orange, #F59E0B); font-size: 10px; margin-left: 2px; vertical-align: middle; }
    thead th.th-netscore { min-width: 82px; white-space: nowrap; background: rgba(59, 130, 246, 0.10); color: #4dabf7; font-weight: 700; }
    .td-netscore { white-space: nowrap; background: rgba(59, 130, 246, 0.08); }
    /* TAN-1052: Sector Rotation 1D/1W/1M toggle (Market Model + Terminal) */
    .sr-tf-toggle {
      display: inline-flex;
      gap: 2px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 6px;
      padding: 2px;
    }
    .sr-tf-btn {
      font-family: var(--font-mono, ui-monospace, monospace);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.04em;
      padding: 2px 7px;
      border: none;
      border-radius: 4px;
      background: transparent;
      color: #64748b;
      cursor: pointer;
      line-height: 1.2;
    }
    .sr-tf-btn:hover:not(:disabled) { color: #94a3b8; }
    .sr-tf-btn.active {
      background: rgba(255,255,255,0.08);
      color: #f1f5f9;
    }
    .sr-tf-btn:disabled { opacity: 0.35; cursor: not-allowed; }

    /* SCORE: inline arrow + digit (▲3). ALIGNMENT: .rank-delta-stack only. */
    .rank-delta {
      display: inline-flex;
      align-items: center;
      gap: 1px;
      font-size: 9px;
      font-weight: 700;
      line-height: 1;
      font-family: var(--font-mono);
      flex-shrink: 0;
      margin-left: 3px;
      vertical-align: middle;
    }
    .rank-delta.up { color: var(--emerald); }
    .rank-delta.down { color: var(--red); }
    .rank-delta svg { width: 7px; height: 7px; flex-shrink: 0; }
    /* Alignment tier only — vertical admiral stack, no digits */
    .rank-delta-stack {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0;
      margin-left: 5px;
      line-height: 1;
      overflow: visible;
      vertical-align: middle;
    }
    .rank-delta-stack .rank-chev {
      display: block;
      font-size: 9px;
      font-weight: 800;
      line-height: 0.62;
      height: 0.62em;
      margin: 0;
      padding: 0;
    }
    td.td-align { overflow: visible; }
    .td-delta-pos { color: var(--emerald); }
    .td-delta-neg { color: var(--red); }
    .td-mktcap {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--text-muted);
      white-space: nowrap;
    }

    /* Sparkline */
    .sparkline-cell {
      padding: 4px 2px;
      width: 72px;
      min-width: 72px;
      max-width: 72px;
    }
    .sparkline-svg {
      display: block;
      width: 64px;
      height: 26px;
    }

    /* 52-week range indicator */
    .range-52wk {
      display: flex;
      align-items: center;
      gap: 4px;
      width: 100%;
    }
    .range-52wk-bar {
      position: relative;
      flex: 1;
      height: 4px;
      background: rgba(255,255,255,0.08);
      border-radius: 2px;
      min-width: 60px;
    }
    .range-52wk-fill {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      border-radius: 2px;
      background: linear-gradient(90deg, var(--red), var(--amber), var(--emerald));
      opacity: 0.35;
    }
    .range-52wk-marker {
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--blue);
      border: 1.5px solid var(--bg);
      box-shadow: 0 0 4px rgba(59,130,246,0.5);
    }
    .status-badge {
      display: inline-flex;
      align-items: center;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.06em;
      padding: 3px 10px;
      border-radius: 100px;
      font-family: var(--font-mono);
      text-transform: uppercase;
    }
    .status-badge.buy-zone { color: var(--emerald); background: var(--emerald-dim); }
    .status-badge.sell-zone { color: var(--red); background: rgba(239,68,68,0.12); }
    .status-badge.buy-sell-zone { color: var(--text-muted); background: rgba(100,116,139,0.12); }
    .status-badge.buy-approaching { color: rgba(96,165,250,0.7); background: rgba(59,130,246,0.08); }
    .status-badge.sell-approaching { color: rgba(251,191,36,0.7); background: rgba(245,158,11,0.08); }
    .status-badge.buy-sell-approaching { color: rgba(16,185,129,0.7); background: rgba(16,185,129,0.08); }
    .status-badge.watching { color: var(--text-muted); background: rgba(55,65,81,0.5); }

    .risk-badge {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.04em;
      padding: 2px 8px;
      border-radius: 100px;
      font-family: var(--font-mono);
      text-transform: uppercase;
    }
    .risk-reduced { color: var(--emerald); background: var(--emerald-dim); }
    .risk-neutral { color: var(--text-muted); background: rgba(55,65,81,0.5); }
    .risk-elevated { color: var(--amber); background: var(--amber-dim); }
    .risk-high { color: var(--red); background: var(--red-dim); }

    /* ================================================================
       PRE-EARNINGS CARDS (email style)
       ================================================================ */
    #pre-earnings-section {
      max-width: 900px;
      margin: 0 auto;
    }
    .er-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 12px;
      transition: all 180ms var(--ease);
    }
    .er-card:hover { background: var(--surface-2); }
    .er-card-top {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
    }
    .er-ticker {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 18px;
      color: var(--text-primary);
    }
    .er-date {
      font-size: 13px;
      color: var(--text-muted);
    }
    .er-days-badge {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.06em;
      padding: 3px 10px;
      border-radius: 4px;
      text-transform: uppercase;
      font-family: var(--font-mono);
      margin-left: auto;
    }
    .er-days-badge.today-badge { background: var(--amber-dim); color: var(--amber); }
    .er-days-badge.upcoming-badge { background: var(--blue-dim); color: var(--blue); }
    .er-days-badge.reported-badge { background: rgba(55,65,81,0.5); color: var(--text-muted); }
    .er-body {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 12px;
    }
    .er-stat-group label {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-muted);
      display: block;
      margin-bottom: 2px;
    }
    .er-stat-group .er-stat-value {
      font-family: var(--font-mono);
      font-weight: 600;
      font-size: 16px;
      color: var(--text-primary);
      font-variant-numeric: tabular-nums lining-nums;
    }
    .er-iv-callout {
      background: var(--emerald-dim);
      border-radius: var(--radius-sm);
      padding: 8px 12px;
      font-size: 12px;
      font-weight: 600;
      color: var(--emerald);
      margin-bottom: 12px;
    }
    .er-footer {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: var(--text-muted);
    }

    /* ================================================================
       PREMIUM / PAYWALL (inline)
       ================================================================ */
    .premium-page {
      position: relative;
      min-height: 60vh;
    }
    .premium-preview {
      filter: blur(8px);
      opacity: 0.5;
      pointer-events: none;
      user-select: none;
    }
    .premium-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: linear-gradient(180deg, rgba(11,17,32,0) 0%, rgba(11,17,32,0.9) 40%, rgba(11,17,32,0.95) 100%);
      z-index: 2;
      text-align: center;
      padding: 40px 20px;
    }
    .premium-lock-icon {
      width: 48px;
      height: 48px;
      color: var(--blue);
      margin-bottom: 16px;
    }
    .premium-title {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 22px;
      color: var(--text-primary);
      margin-bottom: 8px;
    }
    .premium-desc {
      font-size: 14px;
      color: var(--text-secondary);
      max-width: 400px;
      line-height: 1.6;
      margin-bottom: 24px;
    }
    .premium-price {
      font-family: var(--font-mono);
      font-weight: 600;
      font-size: 28px;
      color: var(--text-primary);
      font-variant-numeric: tabular-nums lining-nums;
      margin-bottom: 4px;
    }
    .premium-price-sub {
      font-size: 14px;
      color: var(--text-muted);
      margin-bottom: 20px;
    }
    .premium-cta {
      background: var(--blue);
      color: #fff;
      font-family: var(--font-display);
      font-size: 14px;
      font-weight: 600;
      padding: 12px 40px;
      border-radius: var(--radius-sm);
      transition: all 200ms var(--ease);
      display: inline-block;
      margin-bottom: 12px;
    }
    .premium-cta:hover {
      background: var(--blue-hover);
      box-shadow: 0 0 28px var(--blue-glow);
      transform: translateY(-1px);
    }
    .premium-signin {
      font-size: 13px;
      color: var(--text-muted);
    }
    .premium-signin a {
      color: var(--blue);
      cursor: pointer;
    }
    .premium-signin a:hover { text-decoration: underline; }

    /* ================================================================
       PAYWALL MODAL
       ================================================================ */
    .modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.7);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      z-index: 1000;
      align-items: center;
      justify-content: center;
    }
    .modal-overlay.visible { display: flex; }
    .modal-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      max-width: 480px;
      width: 90%;
      padding: 40px;
      text-align: center;
      position: relative;
      animation: fadeIn 200ms ease-out;
    }
    .modal-close {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-sm);
      color: var(--text-muted);
      transition: all 150ms var(--ease);
    }
    .modal-close:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }
    .modal-close svg { width: 18px; height: 18px; }
    .modal-lock {
      width: 48px;
      height: 48px;
      color: var(--blue);
      margin: 0 auto 16px;
    }
    .modal-title {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 24px;
      color: var(--text-primary);
      margin-bottom: 8px;
    }
    .modal-desc {
      font-size: 14px;
      color: var(--text-secondary);
      line-height: 1.6;
      margin-bottom: 24px;
    }
    .modal-price {
      font-family: var(--font-mono);
      font-weight: 600;
      font-size: 28px;
      color: var(--text-primary);
      font-variant-numeric: tabular-nums lining-nums;
    }
    .modal-price-sub {
      font-size: 14px;
      color: var(--text-muted);
      margin-bottom: 24px;
    }
    .modal-cta {
      display: block;
      width: 100%;
      background: var(--blue);
      color: #fff;
      font-family: var(--font-display);
      font-size: 15px;
      font-weight: 600;
      padding: 12px 24px;
      border-radius: var(--radius-sm);
      transition: all 200ms var(--ease);
      margin-bottom: 12px;
    }
    .modal-cta:hover { background: var(--blue-hover); box-shadow: 0 0 28px var(--blue-glow); }
    .modal-signin {
      font-size: 13px;
      color: var(--text-muted);
    }
    .modal-signin a { color: var(--blue); cursor: pointer; }

    /* ================================================================
       NO DATA STATE
       ================================================================ */
    .no-data {
      text-align: center;
      padding: 40px 20px;
      color: var(--text-muted);
    }
    .no-data-icon {
      width: 40px;
      height: 40px;
      margin: 0 auto 12px;
      color: var(--text-faint);
    }
    .no-data-title {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 15px;
      color: var(--text-secondary);
      margin-bottom: 4px;
    }
    .no-data-desc {
      font-size: 13px;
    }

    /* ================================================================
       LOADING
       ================================================================ */
    .loading-state {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 60vh;
      flex-direction: column;
      gap: 16px;
    }
    .loading-spinner {
      width: 32px;
      height: 32px;
      border: 3px solid var(--border);
      border-top-color: var(--blue);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .loading-text {
      font-size: 13px;
      color: var(--text-muted);
    }

    /* ================================================================
       FOCUS
       ================================================================ */
    :focus-visible {
      outline: 2px solid var(--blue);
      outline-offset: 2px;
    }

    /* ================================================================
       BRIEFING ROUTE (inline briefing + sidebar)
       ================================================================ */
    .briefing-route-wrap {
      position: relative;
      /* No fixed height — the wrapper grows with the iframe so the parent
         .main can scroll naturally (scrollbar lives at the viewport's
         far-right edge, matching every other app page). */
      padding: 0 !important;
      /* Clip any stale iframe overrun. On iOS Safari the URL-bar collapse
         briefly re-evaluates 100dvh inside the iframe, which can leave
         iframe.style.height set 200-500px taller than the actual content
         (TAN-128). Hidden overflow on the wrap means the user can never
         scroll past the real content end even if the resize race loses. */
      overflow: hidden;
    }
    .briefing-route-iframe {
      width: 100%;
      /* Initial height — JS resizes to scrollHeight on load and a
         ResizeObserver keeps it in sync after that. The min-height keeps
         the area filled while the iframe is still loading; the skeleton
         layers behind during the same window. Previously 100vh which
         could leave 200-500px of empty space below short briefings
         (TAN-128). */
      min-height: 320px;
      display: block;
      border: 0;
      /* Match the app shell --bg (#0B1120) so any gap between the iframe
         content background and the parent .main is invisible. */
      background: var(--bg);
      /* Fade the iframe in once content has painted. js/app.js adds the
         .loaded class in the iframe load handler. Prevents the flash-of-
         blank-black that users on slow cellular saw while the ~2 MB
         base64 HTML payload was still being parsed by the browser. */
      opacity: 0;
      transition: opacity 180ms var(--ease);
    }
    .briefing-route-iframe.loaded { opacity: 1; }

    /* Loading skeleton shown BEHIND the iframe while it's still loading.
       Kept as a sibling (not child) of the iframe so we can layer it
       behind via z-index. As soon as the iframe fires its load event,
       js/app.js removes this element and adds .loaded to the iframe so
       it fades in. */
    .briefing-route-skeleton {
      position: absolute;
      inset: 0;
      background: var(--bg);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      z-index: 1;
      pointer-events: none;
      color: var(--text-secondary);
      font-family: var(--font-body);
      font-size: 13px;
    }
    .briefing-route-skeleton .m21-spinner {
      width: 28px; height: 28px;
      border: 2px solid rgba(148, 163, 184, 0.18);
      border-top-color: var(--text-secondary);
      border-radius: 50%;
      animation: m21-briefing-spin 700ms linear infinite;
    }
    @keyframes m21-briefing-spin {
      to { transform: rotate(360deg); }
    }

    /* Chart lightbox overlay — sits at app-shell level so position:fixed
       works against the real viewport. The in-iframe report posts a
       m21:expand-chart message and the parent app renders the overlay
       here instead of inside the iframe (where position:fixed is pinned
       to iframe-top, off-screen from the user's parent scroll). */
    #m21-chart-lightbox {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 10000;
      background: rgba(0, 0, 0, 0.92);
      align-items: center;
      justify-content: center;
      cursor: zoom-out;
    }
    #m21-chart-lightbox.active { display: flex; }
    #m21-chart-lightbox .m21-chart-lightbox-img {
      max-width: 92vw;
      max-height: 88vh;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
    }
    #m21-chart-lightbox .m21-chart-lightbox-close {
      position: fixed;
      top: 16px;
      right: 20px;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.15);
      border: 1px solid rgba(255, 255, 255, 0.25);
      color: #fff;
      font-size: 22px;
      font-weight: 700;
      cursor: pointer;
      z-index: 10001;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      font-family: var(--font-body);
      transition: background 150ms var(--ease);
      -webkit-tap-highlight-color: transparent;
    }
    #m21-chart-lightbox .m21-chart-lightbox-close:hover {
      background: rgba(255, 255, 255, 0.3);
    }
    @media (max-width: 680px) {
      #m21-chart-lightbox .m21-chart-lightbox-close {
        top: 12px; right: 12px; width: 48px; height: 48px; font-size: 24px;
      }
    }

    /* Topbar back button injected on briefing routes. Matches .btn-ghost
       style but tuned for the topbar height so it sits cleanly before
       the briefing title. */
    .briefing-back-btn {
      background: none;
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 6px 12px;
      color: var(--text-secondary);
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: border-color 150ms var(--ease), color 150ms var(--ease);
      -webkit-tap-highlight-color: transparent;
    }
    .briefing-back-btn:hover {
      border-color: var(--text-secondary);
      color: var(--text-primary);
    }
    /* "Show {TICKER} detail" floating button on briefing routes — bottom-right.
       Mobile default position clears the PWA bottom nav (84px).
       Desktop override (TAN-98) tightens position + bumps size since there
       is no bottom nav to clear and the button is the primary affordance
       for opening the stock detail panel. */
    .briefing-context-btn {
      position: fixed;
      bottom: 84px;
      right: 16px;
      z-index: 180;
      padding: 8px 16px;
      border-radius: 8px;
      border: 1px solid var(--text-muted);
      background: var(--surface);
      color: var(--text-secondary);
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: border-color 150ms var(--ease), color 150ms var(--ease);
      -webkit-tap-highlight-color: transparent;
    }
    .briefing-context-btn:hover {
      border-color: #22d3ee;
      color: #22d3ee;
    }
    @media (min-width: 1024px) {
      .briefing-context-btn {
        bottom: 24px;
        right: 24px;
        padding: 10px 18px;
        font-size: 13px;
      }
    }

    /* ================================================================
       STOCK DETAIL PANEL
       ================================================================ */
    .detail-panel {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      width: var(--detail-w);
      background: var(--bg-alt);
      border-left: 1px solid var(--border);
      z-index: 200;
      transform: translateX(100%);
      transition: transform 300ms var(--ease);
      overflow-y: auto;
      overflow-x: hidden;
      overscroll-behavior: contain;
    }
    .detail-panel.open { transform: translateX(0); }
    .detail-panel::-webkit-scrollbar { width: 4px; }
    .detail-panel::-webkit-scrollbar-track { background: transparent; }
    .detail-panel::-webkit-scrollbar-thumb { background: #374151; border-radius: 2px; }

    .detail-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.3);
      z-index: 190;
    }
    .detail-overlay.visible { display: block; }

    .detail-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      border-bottom: 1px solid var(--border);
      position: sticky;
      top: 0;
      background: var(--bg-alt);
      z-index: 2;
    }
    .detail-header-label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .detail-header-label svg { width: 14px; height: 14px; color: var(--blue); }
    .detail-close {
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-sm);
      color: var(--text-muted);
      transition: all 150ms var(--ease);
      -webkit-tap-highlight-color: transparent;
    }
    .detail-close:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }
    .detail-close svg { width: 20px; height: 20px; }

    /* Hero block */
    .detail-hero {
      padding: 20px 16px 16px;
      border-bottom: 1px solid var(--border);
    }
    .detail-ticker-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 4px;
    }
    .detail-ticker {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 22px;
      color: var(--text-primary);
    }
    .detail-risk-pill {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.06em;
      padding: 2px 8px;
      border-radius: 3px;
      text-transform: uppercase;
      font-family: var(--font-mono);
    }
    .detail-company {
      font-size: 12px;
      color: var(--text-muted);
      margin-bottom: 12px;
    }
    .detail-price-row {
      display: flex;
      align-items: baseline;
      gap: 10px;
      margin-bottom: 4px;
    }
    .detail-price {
      font-family: var(--font-mono);
      font-size: 26px;
      font-weight: 600;
      color: var(--text-primary);
      font-variant-numeric: tabular-nums lining-nums;
    }
    .detail-meta-row {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 8px;
    }
    .detail-meta-item {
      font-size: 11px;
      color: var(--text-muted);
    }
    .detail-meta-item span {
      color: var(--text-secondary);
      font-weight: 600;
    }

    /* Section dividers */
    .detail-section {
      padding: 16px;
      border-bottom: 1px solid var(--border);
    }
    .detail-section-title {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    /* TAN-630: small (i) info-dot beside a section title; native title= tooltip */
    .info-dot {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 13px;
      height: 13px;
      border-radius: 50%;
      border: 1px solid var(--border);
      color: var(--text-muted);
      font-size: 9px;
      font-weight: 700;
      cursor: help;
      font-family: var(--font-mono);
      text-transform: none;
      letter-spacing: 0;
    }
    .info-dot:hover { color: var(--text-primary); border-color: rgba(255,255,255,0.3); }

    /* TAN-586 / TAN-620 — "Moves With" (correlation) + "Targets Aligned" (ladder) strips */
    #moves-with-body,
    #targets-aligned-body {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    /* Correlation rows have no ladder bars beneath the head, so drop its margin. */
    .mw-row-corr .mw-row-head {
      margin-bottom: 0;
    }
    .mw-row {
      padding: 8px 10px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: rgba(255,255,255,0.02);
      cursor: pointer;
      transition: background 120ms ease, border-color 120ms ease;
    }
    .mw-row:hover,
    .mw-row:focus-visible {
      background: rgba(255,255,255,0.05);
      border-color: rgba(255,255,255,0.18);
      outline: none;
    }
    .mw-row-head {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 6px;
    }
    .mw-ticker {
      font-family: var(--font-mono);
      font-size: 13px;
      font-weight: 700;
      color: var(--text-primary);
    }
    .mw-sector {
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-muted);
    }
    .mw-corr {
      margin-left: auto;
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 600;
      color: var(--emerald);
      background: rgba(16,185,129,0.12);
      border: 1px solid rgba(16,185,129,0.25);
      border-radius: 4px;
      padding: 1px 6px;
    }
    .mw-corr.mw-corr-weak {
      color: var(--text-muted);
      background: rgba(255,255,255,0.04);
      border-color: var(--border);
    }
    .mw-ladders {
      display: flex;
      align-items: center;
      gap: 3px;
    }
    .mw-ladder-label {
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 700;
      color: var(--emerald);
      margin-right: 2px;
    }
    .mw-ladder-label.mw-ladder-label-sell {
      color: var(--red);
      margin-left: 8px;
    }
    .mw-bar {
      position: relative;
      display: inline-block;
      width: 22px;
      height: 6px;
      border-radius: 3px;
      background: rgba(255,255,255,0.07);
      overflow: hidden;
    }
    .mw-bar-fill {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      border-radius: 3px;
      opacity: 0.85;
    }
    .mw-bar-empty {
      opacity: 0.4;
    }

    /* TAN-630 — single overall meter (Alignment = emerald, Correlation = blue) */
    .mw-meter-wrap {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 10px;
    }
    .mw-meter-label {
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--text-muted);
      flex-shrink: 0;
      width: 62px;
    }
    .mw-meter {
      position: relative;
      flex: 1;
      height: 8px;
      border-radius: 5px;
      background: rgba(255,255,255,0.07);
      overflow: hidden;
    }
    .mw-meter-fill {
      position: absolute;
      left: 0; top: 0; bottom: 0;
      border-radius: 5px;
      background: linear-gradient(90deg, var(--emerald), #34d399);
      opacity: 0.9;
      transition: width 200ms ease;
    }
    .mw-meter-fill.mw-meter-fill-blue {
      background: linear-gradient(90deg, var(--blue), #60a5fa);
    }
    .mw-meter-val {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 600;
      color: var(--text-muted);
      flex-shrink: 0;
      width: 38px;
      text-align: right;
    }

    /* TAN-630 — shared floating hover tooltip for both sidebar buckets */
    .mw-tip {
      position: fixed;
      z-index: 4000;
      width: 360px;
      max-width: calc(100vw - 24px);
      background: #0A0F1C;
      border: 1px solid #2A3850;
      border-radius: 8px;
      padding: 13px 15px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.55);
      pointer-events: none;
    }
    .mw-tip-title {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 8px;
    }
    .mw-tip-lead {
      font-size: 11.5px;
      line-height: 1.5;
      color: var(--text-primary);
      margin-bottom: 11px;
    }
    .mw-tip-lead b { color: #fff; }
    .mw-tip-lead.mw-tip-muted { color: var(--text-muted); }
    .mw-tip-foot {
      margin-top: 9px;
      padding-top: 9px;
      border-top: 1px solid #1E293B;
      font-size: 10px;
      color: var(--text-muted);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .mw-tip-foot b { color: var(--emerald); font-family: var(--font-mono); }

    /* side-by-side BT/ST ladder comparison table (Targets Aligned tooltip) */
    .mw-cmp {
      width: 100%;
      border-collapse: collapse;
      font-family: var(--font-mono);
      font-size: 10.5px;
    }
    .mw-cmp th {
      font-size: 8.5px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--text-muted);
      font-weight: 600;
      text-align: right;
      padding: 3px 6px 5px;
      border-bottom: 1px solid #1E293B;
    }
    .mw-cmp th:first-child { text-align: left; }
    .mw-cmp th[colspan='2'] {
      text-align: center;
      color: var(--text-primary);
      font-weight: 700;
      border-left: 1px solid #1E293B;
    }
    .mw-cmp .mw-cmp-sub th {
      font-size: 8px;
      color: #5d6b82;
      border-bottom: 1px solid #1E293B;
      padding-top: 0;
      text-align: right;
      font-weight: 600;
    }
    .mw-cmp .mw-cmp-sub th:nth-child(2),
    .mw-cmp .mw-cmp-sub th:nth-child(4) { border-left: 1px solid #1E293B; }
    .mw-cmp td {
      padding: 3px 6px;
      text-align: right;
      color: var(--text-primary);
    }
    .mw-cmp td:first-child {
      text-align: left;
      color: var(--text-muted);
      font-weight: 700;
    }
    .mw-cmp td:nth-child(2),
    .mw-cmp td:nth-child(4) { border-left: 1px solid #1E293B; }
    .mw-cmp td.mw-cmp-bt { color: var(--emerald); }
    .mw-cmp td.mw-cmp-st { color: var(--red); }
    .mw-cmp .mw-dist { color: var(--red); }
    .mw-cmp .mw-dist.up { color: var(--emerald); }

    /* Mini chart — Overview stock detail (canon v4 canvas host) */
    .detail-chart-wrap {
      width: 100%;
      height: 320px;
      border-radius: var(--radius-sm);
      overflow: hidden;
      background: #0B1120;
      border: 1px solid var(--border);
      position: relative;
      z-index: 0;
      isolation: isolate;
    }
    .detail-overview-chart-host {
      position: relative;
      width: 100%;
      height: 100%;
      cursor: zoom-in;
    }
    .detail-overview-chart-host canvas {
      display: block;
      width: 100%;
      height: 100%;
    }
    .detail-overview-load {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-muted);
      font-size: 12px;
      font-family: var(--font-mono);
      pointer-events: none;
      background: rgba(11, 17, 32, 0.55);
    }
    .detail-overview-load[hidden] {
      display: none;
    }
    .detail-chart-intervals {
      display: flex;
      gap: 2px;
      margin-left: auto;
      background: rgba(255,255,255,0.04);
      border-radius: 6px;
      padding: 2px;
    }
    .chart-interval-btn {
      background: none;
      border: none;
      color: var(--text-muted);
      font-size: 10px;
      font-family: var(--font-mono);
      font-weight: 600;
      padding: 3px 7px;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.15s ease;
      letter-spacing: 0.02em;
    }
    .chart-interval-btn:hover {
      color: var(--text-primary);
      background: rgba(255,255,255,0.06);
    }
    .chart-interval-btn.active {
      color: var(--blue);
      background: rgba(59,130,246,0.12);
    }

    /* ================================================================
       DETAIL PANEL TABS — Overview / Valuation / Analysts
       ================================================================ */
    .detail-tab-bar {
      display: flex;
      gap: 2px;
      padding: 10px 16px 0;
      background: var(--bg-alt);
      border-bottom: 1px solid var(--border);
    }
    .detail-tab-btn {
      background: none;
      border: none;
      color: var(--text-muted);
      font-size: 10px;
      font-family: var(--font-mono);
      font-weight: 600;
      padding: 5px 10px;
      border-radius: 4px 4px 0 0;
      cursor: pointer;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      transition: all 0.15s ease;
      border-bottom: 2px solid transparent;
      margin-bottom: -1px;
    }
    .detail-tab-btn:hover {
      color: var(--text-primary);
      background: rgba(255,255,255,0.04);
    }
    .detail-tab-btn.active {
      color: var(--blue);
      border-bottom-color: var(--blue);
      background: rgba(59,130,246,0.06);
    }
    .detail-tab-content {
      display: none;
    }
    .detail-tab-content.active {
      display: block;
    }

    /* ================================================================
       TECHNICALS TAB — SVG Chart + Key Levels + Badges
       ================================================================ */
    .tech-chart-area {
      padding: 0 8px 8px;
      cursor: zoom-in;
    }
    .tech-chart-area svg {
      width: 100%;
      height: 300px;
      display: block;
      border-radius: 6px;
      background: rgba(20, 27, 45, 0.95);
    }
    .tech-levels-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 11px;
    }
    .tech-levels-table th {
      font-size: 9px;
      letter-spacing: 0.5px;
      color: var(--text-muted);
      text-align: left;
      padding: 4px 8px;
      border-bottom: 1px solid var(--border);
      font-weight: 600;
    }
    .tech-levels-table td {
      padding: 4px 8px;
      border-bottom: 1px solid rgba(255,255,255,0.04);
      font-size: 11px;
    }
    .tech-badges-wrap {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding: 0;
    }
    .tech-badge {
      display: inline-flex;
      align-items: center;
      padding: 4px 10px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 500;
      font-family: var(--font-mono);
      white-space: nowrap;
      letter-spacing: 0.3px;
    }

    /* ================================================================
       CLOUD CONFLUENCE COMPONENTS
       ================================================================ */
    .cloud-nearfar-wrap {
      display: flex;
      align-items: center;
      gap: 2px;
      margin-left: auto;
      background: rgba(255,255,255,0.04);
      border-radius: 4px;
      padding: 2px;
    }
    .cloud-nearfar-btn {
      background: none;
      border: none;
      color: var(--text-muted);
      font-size: 10px;
      font-family: var(--font-mono);
      font-weight: 600;
      padding: 3px 8px;
      border-radius: 3px;
      cursor: pointer;
      transition: all 0.15s ease;
      letter-spacing: 0.04em;
    }
    .cloud-nearfar-btn:hover {
      color: var(--text-primary);
      background: rgba(255,255,255,0.06);
    }
    .cloud-nearfar-btn.active {
      color: var(--blue);
      background: rgba(59,130,246,0.12);
    }
    .cloud-loading-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,0.5);
      color: var(--text-muted);
      font-size: 12px;
      font-family: var(--font-mono);
      z-index: 10;
      pointer-events: none;
    }
    /* Cloud layer legend — TF-style pill toggles.
       Mirrors the price-chart TF toggle pattern: rounded container with
       colored pills for each timeframe. Each active pill is filled with its
       cloud layer color (see .cloud-tf-pill.active.c-<key>); click to toggle
       the layer's visibility on the chart. Colors match `_cloudFarColors`
       in js/app.js. Right-aligned via `justify-content: space-between`. */
    .cloud-legend-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 16px;
      border-bottom: none;
    }
    .cloud-legend-title {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.08em;
      color: var(--text-muted);
      font-family: var(--font-mono);
      white-space: nowrap;
    }
    .cloud-tf-toggle {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      padding: 2px;
      background: rgba(255,255,255,0.04);
      border-radius: 6px;
      margin-left: auto;
    }
    .cloud-tf-pill {
      padding: 3px 7px;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.02em;
      border-radius: 4px;
      cursor: pointer;
      user-select: none;
      transition: background 0.15s ease, color 0.15s ease;
      border: none;
      background: transparent;
      color: var(--text-muted, #6B7280);
      font-family: var(--font-mono);
      text-align: center;
    }
    .cloud-tf-pill:hover { color: var(--text-primary); }
    .cloud-tf-pill.active { color: #0a0e1a; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
    /* Active pill colors — must match _cloudFarColors in js/app.js */
    .cloud-tf-pill.active.c-daily    { background: #10B981; }
    .cloud-tf-pill.active.c-twoDay   { background: #3B82F6; }
    .cloud-tf-pill.active.c-weekly   { background: #A855F7; }
    .cloud-tf-pill.active.c-twoWeek  { background: #06B6D4; }
    .cloud-tf-pill.active.c-monthly  { background: #F59E0B; }
    /* B-7 D3 — Gaps toggle pill. White background so it reads as distinct
       from the colored cloud-layer pills while sitting in the same row. */
    .cloud-tf-pill.active.c-gaps     { background: #F5F5F5; color: #0a0e1a; }
    /* NEAR mode pills — use the near-color palette from _cloudNearColors */
    .cloud-tf-pill.active.c-n5m   { background: #10B981; }
    .cloud-tf-pill.active.c-n15m  { background: #06B6D4; }
    .cloud-tf-pill.active.c-n30m  { background: #3B82F6; }
    .cloud-tf-pill.active.c-n1h   { background: #8B5CF6; }
    .cloud-tf-pill.active.c-n2h   { background: #D946EF; }
    .cloud-tf-pill.active.c-n4h   { background: #EC4899; }
    .cloud-tf-pill.active.c-n1d   { background: #F59E0B; }
    /* Toggled-off pill — muted text with subtle strikethrough */
    .cloud-tf-pill.off {
      background: transparent;
      color: #4B5563;
      text-decoration: line-through;
      text-decoration-thickness: 1px;
      text-decoration-color: rgba(255,255,255,0.15);
    }
    .cloud-chart-wrap {
      position: relative;
      width: 100%;
      background: var(--chart-bg);  /* canon v3: #141B2D */
      cursor: zoom-in;
    }
    #cloud-chart-canvas {
      display: block;
      width: 100%;
    }
    #cloud-crosshair-canvas,
    .cloud-modal-crosshair {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }
    .cloud-chart-expand {
      position: absolute;
      bottom: 6px;
      right: 6px;
      width: 24px;
      height: 24px;
      background: rgba(0,0,0,0.5);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-muted);
      font-size: 14px;
      opacity: 0;
      transition: opacity 0.15s ease;
      pointer-events: none;
      cursor: zoom-in;
    }
    .cloud-chart-wrap:hover .cloud-chart-expand {
      opacity: 1;
    }
    .cloud-modal-overlay {
      position: fixed;
      inset: 0;
      /* Above ⌘K palette (12000) so fullscreen opens over palette without dismiss */
      z-index: 13000;
      background: rgba(0,0,0,0.9);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .cloud-modal-header {
      width: 90vw;
      max-width: 1400px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 0;
    }
    .cloud-modal-legend {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .cloud-modal-close {
      background: transparent;
      border: none;
      color: var(--text-muted);
      font-size: 28px;
      cursor: pointer;
      line-height: 1;
      padding: 0 4px;
    }
    .cloud-modal-close:hover {
      color: var(--text-primary);
    }
    .cloud-modal-body {
      position: relative;
      width: 90vw;
      max-width: 1400px;
    }
    .cloud-modal-body canvas.cloud-modal-main {
      display: block;
      width: 100%;
      background: var(--surface-2, #1A1D2E);
      border-radius: 8px;
    }
    .cloud-heatmap-wrap {
      border-top: none;
      padding: 6px 0 2px;
    }
    .cloud-heatmap-label {
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 0.08em;
      color: var(--text-muted);
      padding: 0 16px 4px;
      font-family: var(--font-mono);
    }
    .cloud-heatmap-explainer {
      font-size: 10px;
      color: var(--text-muted);
      padding: 0 16px 4px;
      font-family: var(--font-body);
      opacity: 0.7;
    }
    #cloud-heatmap-canvas {
      display: block;
      width: 100%;
    }
    .cloud-expand-hint {
      position: absolute;
      top: 8px;
      right: 10px;
      font-size: 18px;
      color: var(--text-muted);
      opacity: 0;
      transition: opacity 0.2s;
      pointer-events: none;
    }
    .cloud-chart-wrap:hover .cloud-expand-hint { opacity: 0.7; }

    /* ─── Cloud Confluence Enlarge Modal ───────────────────────────────────────── */
    .cloud-chart-modal-overlay {
      position: fixed; inset: 0; z-index: 9999;
      background: rgba(0,0,0,0.85);
      display: flex; align-items: center; justify-content: center;
    }
    .cloud-chart-modal-container {
      /* B-4 D9: enlarged modal now fills 90vw × 85vh (was min(90vw, 85vh)
         which effectively capped at ~40% of viewport because height was
         the binding dim on landscape). On portrait viewports the flex box
         still fits because both dims cap to the viewport. */
      width: 90vw;
      height: 85vh;
      max-width: 100vw;
      max-height: 95vh;
      background: var(--surface-2);
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 10px;
      display: flex; flex-direction: column;
      overflow: hidden;
    }
    .cloud-chart-modal-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 18px;
      border-bottom: 1px solid var(--border);
    }
    .cloud-chart-modal-header--with-ticker {
      gap: 12px;
    }
    .cloud-chart-modal-header-right {
      display: flex; align-items: center; gap: 10px; margin-left: auto;
    }
    /* TAN-1122: ticker switcher top-left of fullscreen chart */
    .cloud-modal-ticker-wrap {
      display: flex; align-items: center; gap: 8px;
      flex-shrink: 0;
    }
    .cloud-modal-ticker-label {
      font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
      text-transform: uppercase; color: var(--text-muted, #9ca3af);
    }
    .cloud-modal-ticker-input {
      width: 96px;
      font: 700 13px/1.2 var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #e5e7eb;
      background: rgba(0,0,0,0.35);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 6px;
      padding: 6px 8px;
      outline: none;
    }
    .cloud-modal-ticker-input:focus {
      border-color: rgba(59,130,246,0.55);
      box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
    }
    .cloud-modal-ticker-go {
      font: 650 11px/1 inherit;
      color: #e5e7eb;
      background: rgba(59,130,246,0.22);
      border: 1px solid rgba(59,130,246,0.4);
      border-radius: 6px;
      padding: 6px 10px;
      cursor: pointer;
    }
    .cloud-modal-ticker-go:hover {
      background: rgba(59,130,246,0.35);
    }
    .m21-chart-loading {
      position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
      z-index: 13050;
      font: 650 12px/1.2 inherit;
      color: #e5e7eb;
      background: rgba(15, 23, 42, 0.92);
      border: 1px solid rgba(59,130,246,0.35);
      border-radius: 8px;
      padding: 8px 14px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.45);
      pointer-events: none;
    }
    .m21-chart-loading[hidden] { display: none !important; }
    .cloud-chart-modal-title {
      font-size: clamp(12px, 1.2vw, 18px);
      font-weight: 600;
      color: var(--text-muted);
      font-family: var(--font-mono);
    }
    .cloud-chart-modal-close {
      background: transparent; border: none;
      color: var(--text-muted); font-size: 22px;
      cursor: pointer; line-height: 1; padding: 0 4px;
    }
    .cloud-chart-modal-close:hover { color: var(--text-primary); }
    .cloud-chart-modal-body {
      flex: 1; min-height: 0; overflow-y: auto;
      padding: 0;
      display: flex;
      flex-direction: column;
    }
    .cloud-modal-legend {
      border-bottom: 1px solid var(--border);
      flex: 0 0 auto;
    }
    .cloud-modal-chart-wrap {
      position: relative;
      width: 100%;
      background: var(--bg);
      /* B-4 D9: fill the remaining modal body height so the canvas gets the
         full 90vw × 85vh (minus header/legend) and doesn't collapse to
         canvas intrinsic height. */
      flex: 1 1 auto;
      min-height: 0;
    }
    .cloud-modal-chart-wrap canvas {
      display: block;
      width: 100%;
      height: 100%;
    }
    .cloud-modal-heatmap-wrap {
      padding: 8px 0 4px;
    }
    .cloud-modal-heatmap-wrap canvas {
      display: block;
      width: 100%;
    }

    /* ================================================================
       VALUATION TAB COMPONENTS
       ================================================================ */

    /* Fair Value summary stats — 3 boxes in a row */
    .val-fv-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-bottom: 4px;
    }
    .val-fv-box {
      background: rgba(255,255,255,0.02);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 10px 12px;
      text-align: center;
    }
    .val-fv-box.highlight {
      border-color: rgba(16,185,129,0.3);
      background: var(--emerald-dim);
    }
    .val-fv-box-label {
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 4px;
      font-family: var(--font-mono);
    }
    .val-fv-box-value {
      font-family: var(--font-mono);
      font-size: 18px;
      font-weight: 600;
      color: var(--text-primary);
      font-variant-numeric: tabular-nums lining-nums;
      line-height: 1.2;
    }
    .val-fv-box-value.green { color: var(--emerald); }
    .val-fv-box-value.amber { color: var(--amber); }
    .val-fv-box-delta {
      font-family: var(--font-mono);
      font-size: 10px;
      margin-top: 2px;
    }
    .val-fv-box-delta.up { color: var(--emerald); }
    .val-fv-box-delta.down { color: var(--red); }


    /* ================================================================
       EARNINGS TAB COMPONENTS
       ================================================================ */
    .earn-summary-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      margin-bottom: 16px;
    }
    .earn-summary-box {
      background: rgba(255,255,255,0.02);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 10px 12px;
      text-align: center;
    }
    .earn-summary-box-label {
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 4px;
      font-family: var(--font-mono);
    }
    .earn-summary-box-value {
      font-family: var(--font-mono);
      font-size: 16px;
      font-weight: 600;
      color: var(--text-primary);
      line-height: 1.2;
    }
    .earn-summary-box-value.green { color: var(--emerald); }
    .earn-summary-box-value.red { color: var(--red); }

    /* EPS/Revenue bar charts */
    .earn-chart-container {
      display: flex;
      align-items: flex-end;
      gap: 4px;
      height: 140px;
      padding: 8px 0;
      overflow-x: auto;
    }
    .earn-chart-container::-webkit-scrollbar { height: 4px; }
    .earn-chart-container::-webkit-scrollbar-thumb { background: #374151; border-radius: 2px; }
    .earn-bar-group {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
      min-width: 36px;
    }
    .earn-bars {
      display: flex;
      align-items: flex-end;
      gap: 2px;
      height: 110px;
      position: relative;
    }
    .earn-bar {
      width: 12px;
      border-radius: 2px 2px 0 0;
      transition: height 0.3s ease;
    }
    .earn-bar.est { background: var(--text-faint); opacity: 0.5; }
    .earn-bar.act-beat { background: var(--emerald); }
    .earn-bar.act-miss { background: var(--red); }
    .earn-bar-value {
      font-family: var(--font-mono);
      font-size: 8px;
      color: var(--text-muted);
      position: absolute;
      top: -14px;
      left: 50%;
      transform: translateX(-50%);
      white-space: nowrap;
    }
    .earn-bar-label {
      font-family: var(--font-mono);
      font-size: 8px;
      color: var(--text-faint);
      margin-top: 6px;
      white-space: nowrap;
    }

    /* Chart legend */
    .earn-legend {
      display: flex;
      gap: 16px;
      margin-bottom: 8px;
    }
    .earn-legend-item {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 10px;
      color: var(--text-muted);
    }
    .earn-legend-dot {
      width: 8px;
      height: 8px;
      border-radius: 2px;
    }
    .earn-legend-dot.est { background: var(--text-faint); opacity: 0.5; }
    .earn-legend-dot.beat { background: var(--emerald); }
    .earn-legend-dot.miss { background: var(--red); }

    /* Earnings detail table */
    .earn-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 11px;
    }
    .earn-table thead th {
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 600;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      padding: 6px 6px;
      border-bottom: 1px solid var(--border);
      text-align: right;
      white-space: nowrap;
    }
    .earn-table thead th:first-child { text-align: left; }
    .earn-table tbody td {
      font-family: var(--font-mono);
      font-size: 11px;
      padding: 6px 6px;
      border-bottom: 1px solid rgba(30,41,59,0.4);
      text-align: right;
      color: var(--text-secondary);
      white-space: nowrap;
    }
    .earn-table tbody td:first-child {
      text-align: left;
      color: var(--text-primary);
      font-weight: 500;
    }
    .earn-table .cell-green { color: var(--emerald); }
    .earn-table .cell-red { color: var(--red); }
    .earn-cell-stack {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 0;
      line-height: 1.2;
    }
    .earn-cell-delta {
      font-size: 8px;
      font-weight: 600;
      opacity: 0.9;
    }
    .earn-badge {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 8px;
      font-weight: 700;
      letter-spacing: 0.08em;
      padding: 2px 6px;
      border-radius: 3px;
      text-transform: uppercase;
    }
    .earn-badge.beat { background: var(--emerald-dim); color: var(--emerald); }
    .earn-badge.miss { background: var(--red-dim); color: var(--red); }
    .earn-badge.inline { background: var(--amber-dim); color: var(--amber); }
    .earn-badge.pending { background: rgba(255,255,255,0.04); color: var(--text-faint); }

    /* Reaction bar */
    .earn-reaction {
      display: flex;
      align-items: center;
      gap: 4px;
      justify-content: flex-end;
    }
    .earn-reaction-bar {
      height: 6px;
      border-radius: 3px;
      min-width: 4px;
    }
    .earn-reaction-bar.pos { background: var(--emerald); }
    .earn-reaction-bar.neg { background: var(--red); }

    /* Margin trend chart */
    .earn-margin-chart {
      display: flex;
      align-items: flex-end;
      gap: 6px;
      height: 100px;
      padding: 8px 0;
    }
    .earn-margin-group {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
      min-width: 30px;
    }
    .earn-margin-bars {
      display: flex;
      gap: 2px;
      align-items: flex-end;
      height: 80px;
    }
    .earn-margin-bar {
      width: 6px;
      border-radius: 2px 2px 0 0;
    }
    .earn-margin-bar.gm { background: var(--blue); opacity: 0.7; }
    .earn-margin-bar.om { background: var(--emerald); opacity: 0.7; }
    .earn-margin-bar.nm { background: var(--amber); opacity: 0.7; }
    .earn-margin-label {
      font-family: var(--font-mono);
      font-size: 8px;
      color: var(--text-faint);
      margin-top: 4px;
    }
    .earn-margin-legend {
      display: flex;
      gap: 16px;
      margin-bottom: 6px;
    }
    .earn-margin-legend-item {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 10px;
      color: var(--text-muted);
    }
    .earn-margin-legend-dot {
      width: 8px;
      height: 8px;
      border-radius: 2px;
    }

    /* Next earnings countdown */
    .earn-next-er {
      display: flex;
      align-items: center;
      gap: 12px;
      background: rgba(59,130,246,0.06);
      border: 1px solid rgba(59,130,246,0.15);
      border-radius: var(--radius-sm);
      padding: 10px 14px;
      margin-bottom: 12px;
    }
    .earn-next-er-icon {
      width: 18px;
      height: 18px;
      color: var(--blue);
      flex-shrink: 0;
    }
    .earn-next-er-text {
      font-size: 12px;
      color: var(--text-secondary);
    }
    .earn-next-er-text strong {
      color: var(--text-primary);
      font-weight: 600;
    }
    .earn-next-er-badge {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 600;
      padding: 3px 8px;
      border-radius: 4px;
      margin-left: auto;
    }
    .earn-next-er-badge.soon { background: var(--amber-dim); color: var(--amber); }
    .earn-next-er-badge.week { background: var(--red-dim); color: var(--red); }
    .earn-next-er-badge.normal { background: var(--blue-dim); color: var(--blue); }

    /* Valuation tables */
    .val-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 11px;
    }
    .val-table thead th {
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 600;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      padding: 8px 6px;
      text-align: right;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .val-table thead th:first-child { text-align: left; }
    .val-table tbody td {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--text-secondary);
      padding: 7px 6px;
      text-align: right;
      border-bottom: 1px solid rgba(255,255,255,0.03);
    }
    .val-table tbody td:first-child {
      text-align: left;
      color: var(--text-secondary);
      font-family: var(--font-body);
      font-size: 11px;
      font-weight: 500;
    }
    .val-table tbody tr:last-child td { border-bottom: none; }
    .val-table .row-highlight td {
      background: var(--blue-dim);
      color: var(--text-primary);
    }
    .val-table .row-highlight td:first-child { color: var(--text-primary); }
    .val-table .cell-green { color: var(--emerald) !important; }
    .val-table .cell-red { color: var(--red) !important; }
    .val-table .cell-blue { color: var(--blue) !important; background: var(--blue-dim); border-radius: 3px; }
    .val-est-badge {
      font-size: 8px;
      color: var(--blue);
      font-weight: 600;
      margin-left: 3px;
    }

    /* FCF bar chart */
    .val-fcf-chart {
      display: flex;
      align-items: flex-end;
      gap: 5px;
      height: 110px;
      padding: 6px 0 0;
    }
    .val-fcf-bar-group {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      gap: 3px;
      height: 100%;
    }
    .val-fcf-bar {
      width: 100%;
      border-radius: 3px 3px 0 0;
      min-height: 3px;
      transition: height 0.3s;
    }
    .val-fcf-bar.actual { background: var(--blue); }
    .val-fcf-bar.projected {
      background: rgba(59,130,246,0.35);
      border: 1px dashed rgba(59,130,246,0.6);
    }
    .val-fcf-bar-label {
      font-family: var(--font-mono);
      font-size: 8px;
      color: var(--text-muted);
      text-align: center;
      white-space: nowrap;
    }
    .val-fcf-bar-value {
      font-family: var(--font-mono);
      font-size: 8px;
      color: var(--text-faint);
      text-align: center;
    }
    .val-fcf-legend {
      display: flex;
      gap: 14px;
      margin-top: 8px;
      font-size: 9px;
      color: var(--text-muted);
    }
    .val-fcf-legend-item {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .val-fcf-legend-swatch {
      width: 8px;
      height: 8px;
      border-radius: 2px;
    }

    /* Sensitivity matrix */
    .val-sensitivity-wrap {
      overflow-x: auto;
    }
    .val-sensitivity-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 10px;
    }
    .val-sensitivity-table th {
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 600;
      color: var(--text-muted);
      padding: 5px 6px;
      text-align: center;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .val-sensitivity-table th:first-child { text-align: left; }
    .val-sensitivity-table td {
      font-family: var(--font-mono);
      font-size: 10px;
      color: var(--text-secondary);
      padding: 5px 6px;
      text-align: center;
      border-bottom: 1px solid rgba(255,255,255,0.03);
    }
    .val-sensitivity-table td:first-child {
      text-align: left;
      color: var(--text-muted);
    }
    .val-sensitivity-table tr:last-child td { border-bottom: none; }
    .val-sensitivity-table .cell-highlight {
      background: var(--blue-dim);
      color: var(--blue);
      font-weight: 600;
      border-radius: 3px;
    }

    /* Comparable peer cards */
    .val-comp-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
    }
    .val-comp-card {
      background: rgba(255,255,255,0.02);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 10px;
      text-align: center;
    }
    .val-comp-card.active-comp {
      border-color: rgba(59,130,246,0.3);
      background: var(--blue-dim);
    }
    .val-comp-ticker {
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 6px;
    }
    .val-comp-card.active-comp .val-comp-ticker { color: var(--blue); }
    .val-comp-metric {
      font-size: 9px;
      color: var(--text-muted);
      margin-bottom: 1px;
      font-family: var(--font-body);
    }
    .val-comp-val {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--text-secondary);
      margin-bottom: 4px;
    }

    /* Placeholder/loading states */
    .val-loading-placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      color: var(--text-faint);
      font-size: 11px;
      font-family: var(--font-mono);
      letter-spacing: 0.05em;
    }
    .val-loading-placeholder::before {
      content: '';
      width: 12px;
      height: 12px;
      border: 2px solid var(--border);
      border-top-color: var(--blue);
      border-radius: 50%;
      animation: val-spin 0.8s linear infinite;
      margin-right: 8px;
      flex-shrink: 0;
    }
    @keyframes val-spin {
      to { transform: rotate(360deg); }
    }

    /* ================================================================
       ANALYSTS TAB COMPONENTS
       ================================================================ */

    /* Consensus bar */
    .ana-consensus-wrap {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .ana-rating-label {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      color: var(--emerald);
    }
    .ana-rating-bar {
      display: flex;
      height: 8px;
      border-radius: 4px;
      overflow: hidden;
      gap: 2px;
    }
    .ana-rating-bar .seg { height: 100%; border-radius: 2px; }
    .ana-rating-bar .seg-sbuy  { background: var(--rating-strong-buy); }
    .ana-rating-bar .seg-buy   { background: var(--rating-buy); }
    .ana-rating-bar .seg-hold  { background: var(--rating-hold); }
    .ana-rating-bar .seg-sell  { background: var(--rating-sell); }
    .ana-rating-bar .seg-ssell { background: var(--rating-strong-sell); }
    .ana-rating-legend {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      font-size: 9px;
      color: var(--text-muted);
    }
    .ana-rating-legend-item {
      display: flex;
      align-items: center;
      gap: 3px;
    }
    .ana-legend-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    /* PT stats 4-up row */
    .ana-pt-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      margin-top: 12px;
    }
    @media (max-width: 480px) {
      .ana-pt-stats { grid-template-columns: repeat(2, 1fr); }
    }
    .ana-pt-stat {
      background: rgba(255,255,255,0.02);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 8px 10px;
      text-align: center;
    }
    .ana-pt-stat-label {
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 4px;
      font-family: var(--font-mono);
    }
    .ana-pt-stat-value {
      font-family: var(--font-mono);
      font-size: 16px;
      font-weight: 600;
      color: var(--text-primary);
      font-variant-numeric: tabular-nums lining-nums;
      line-height: 1.2;
    }
    .ana-pt-stat-value.green { color: var(--emerald); }
    .ana-pt-stat-value.red   { color: var(--red); }
    .ana-pt-stat-delta {
      font-family: var(--font-mono);
      font-size: 9px;
      margin-top: 2px;
    }
    .ana-pt-stat-delta.up   { color: var(--emerald); }
    .ana-pt-stat-delta.down { color: var(--red); }

    /* PT distribution bar */
    .ana-pt-dist-bar {
      position: relative;
      height: 32px;
      background: rgba(255,255,255,0.03);
      border-radius: var(--radius-sm);
      overflow: visible;
      margin-bottom: 6px;
    }
    .ana-pt-dist-range {
      position: absolute;
      top: 6px;
      height: 20px;
      background: rgba(59,130,246,0.12);
      border-radius: 3px;
      border: 1px solid rgba(59,130,246,0.25);
    }
    .ana-pt-dist-median {
      position: absolute;
      top: 2px;
      width: 3px;
      height: 28px;
      background: var(--blue);
      border-radius: 2px;
      z-index: 2;
    }
    .ana-pt-dist-current {
      position: absolute;
      top: 2px;
      width: 3px;
      height: 28px;
      background: var(--amber);
      border-radius: 2px;
      z-index: 2;
    }
    .ana-pt-dist-labels {
      display: flex;
      justify-content: space-between;
      font-family: var(--font-mono);
      font-size: 8px;
      color: var(--text-faint);
      margin-bottom: 4px;
    }
    .ana-pt-dist-legend {
      display: flex;
      gap: 14px;
      font-size: 9px;
      color: var(--text-muted);
      flex-wrap: wrap;
    }
    .ana-pt-dist-legend-item {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .ana-pt-dist-marker {
      width: 12px;
      height: 3px;
      border-radius: 2px;
    }

    /* Recent analyst activity table */
    .ana-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 11px;
      table-layout: fixed;
    }
    .ana-table thead th {
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 600;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      padding: 8px 4px;
      text-align: left;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      white-space: nowrap;
    }
    .ana-table thead th:last-child { text-align: right; }
    .ana-table tbody td {
      font-size: 11px;
      color: var(--text-secondary);
      padding: 8px 4px;
      border-bottom: 1px solid rgba(255,255,255,0.03);
      vertical-align: top;
    }
    .ana-table tbody tr:last-child td { border-bottom: none; }
    .ana-firm-name { word-break: break-word; line-height: 1.3; }
    .ana-date-col { white-space: nowrap; width: 62px; }
    .ana-firm-col { width: 22%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ana-action-col { width: 64px; }
    .ana-rating-col { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ana-target-col { width: 80px; }
    .ana-pt-change { text-align: right; white-space: nowrap; }
    @media (max-width: 480px) {
      .ana-table .ana-action-col { display: none; }
      .ana-table tbody td { font-size: 10px; padding: 6px 3px; }
      .ana-table thead th { padding: 6px 3px; font-size: 8px; }
    }
    .ana-action-badge {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 600;
      padding: 2px 6px;
      border-radius: 3px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .ana-action-badge.upgrade   { background: var(--emerald-dim); color: var(--emerald); }
    .ana-action-badge.downgrade { background: var(--red-dim); color: var(--red); }
    .ana-action-badge.maintain  { background: rgba(100,116,139,0.15); color: var(--text-secondary); }
    .ana-action-badge.initiate  { background: var(--blue-dim); color: var(--blue); }
    .ana-rating-text {
      font-family: var(--font-mono);
      font-size: 10px;
    }
    .ana-rating-arrow { color: var(--text-faint); margin: 0 3px; }
    .ana-pt-change {
      font-family: var(--font-mono);
      font-size: 11px;
      text-align: right;
      white-space: nowrap;
    }
    .ana-pt-old {
      color: var(--text-faint);
      text-decoration: line-through;
      margin-right: 3px;
      font-size: 9px;
    }
    .ana-pt-new { font-weight: 600; }
    .ana-pt-delta { font-size: 9px; margin-left: 3px; }
    .ana-firm-name { font-weight: 500; color: var(--text-primary); }
    .ana-date-col {
      font-family: var(--font-mono);
      font-size: 10px;
      color: var(--text-muted);
    }

    /* Radar chart */
    .detail-radar-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 200px;
    }
    .detail-radar-wrap svg { overflow: visible; }

    /* Target map */
    .detail-target-group {
      margin-bottom: 14px;
    }
    .detail-target-group:last-child { margin-bottom: 0; }
    .detail-target-group-label {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 8px;
    }
    .detail-target-group-label.buy-label { color: var(--blue); }
    .detail-target-group-label.sell-label { color: var(--amber); }
    .detail-target-entry {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 6px;
    }
    .detail-target-entry:last-child { margin-bottom: 0; }
    .detail-target-badge {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      padding: 2px 6px;
      border-radius: 3px;
      letter-spacing: 0.05em;
      min-width: 32px;
      text-align: center;
    }
    .detail-target-badge.buy { background: var(--blue-dim); color: var(--blue); }
    .detail-target-badge.sell { background: var(--amber-dim); color: var(--amber); }
    .detail-target-price {
      font-family: var(--font-mono);
      font-size: 13px;
      font-weight: 600;
      color: var(--text-primary);
      font-variant-numeric: tabular-nums lining-nums;
      min-width: 70px;
    }
    .detail-target-bar-wrap {
      flex: 1;
      height: 6px;
      background: rgba(255,255,255,0.06);
      border-radius: 3px;
      overflow: hidden;
    }
    .detail-target-bar {
      height: 100%;
      border-radius: 3px;
      transition: width 300ms var(--ease);
    }
    .detail-target-bar.buy { background: var(--blue); }
    .detail-target-bar.sell { background: var(--amber); }
    .detail-target-delta {
      font-family: var(--font-mono);
      font-size: 11px;
      font-variant-numeric: tabular-nums lining-nums;
      min-width: 55px;
      text-align: right;
    }
    .detail-target-stale {
      font-size: 10px;
      color: var(--amber);
      margin-left: 2px;
    }

    /* Stats grid */
    .detail-stats-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      overflow: hidden;
    }
    .detail-stat-cell {
      background: var(--surface);
      padding: 10px 12px;
    }
    .detail-stat-label {
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 2px;
    }
    .detail-stat-value {
      font-family: var(--font-mono);
      font-size: 15px;
      font-weight: 600;
      color: var(--text-primary);
      font-variant-numeric: tabular-nums lining-nums;
    }
    .detail-stat-value.small {
      font-size: 13px;
      font-weight: 500;
    }

    /* Highlight selected row */
    tbody tr.selected-row {
      background: var(--blue-dim) !important;
      box-shadow: inset 2px 0 0 var(--blue) !important;
    }

    /* ================================================================
       RESPONSIVE — 1024px
       ================================================================ */
    @media (max-width: 1024px) {
      :root { --sidebar-w: 64px; }
      .sidebar-brand-sub,
      .sidebar-section-label,
      .sidebar-nav-item .nav-label,
      .sidebar-nav-item .lock-icon,
      .sidebar-login-btn span,
      .sidebar-external .nav-label,
      .sidebar-external .ext-icon { display: none; }
      .sidebar-header { padding: 0 16px; text-align: center; }
      .sidebar-collapse-btn { display: none; }
      .sidebar-brand-name { font-size: 14px; }
      .sidebar-nav { padding: 0 8px; }
      .sidebar-nav-item { justify-content: center; padding: 9px; gap: 0; }
      .sidebar-nav-item svg.nav-icon { width: 20px; height: 20px; }
      .sidebar-bottom { padding: 0 8px; }
      .sidebar-login-btn { justify-content: center; padding: 9px; }
      .sidebar-divider { margin: 12px 8px; }
      .content-wrap { padding: 24px 16px; }
      .kpi-row { grid-template-columns: repeat(2, 1fr); }
      .alert-grid { grid-template-columns: repeat(2, 1fr); }
      .rs-grid { grid-template-columns: repeat(4, 1fr); }
      .sector-cluster-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
    }

    /* ================================================================
       RESPONSIVE — 768px
       ================================================================ */
    @media (max-width: 768px) {
      .app {
        grid-template-columns: 1fr;
        grid-template-rows: var(--topbar-h) 1fr;
      }
      .sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: 280px;
        transform: translateX(-100%);
        transition: transform 300ms var(--ease);
        z-index: 150;
      }
      .sidebar.open { transform: translateX(0); }
      .sidebar-close-btn { display: flex; }
      .sidebar-overlay.visible { display: block; }
      .hamburger-btn { display: flex; }

      /* Restore labels in mobile drawer */
      .sidebar-brand-sub,
      .sidebar-section-label,
      .sidebar-nav-item .nav-label,
      .sidebar-nav-item .lock-icon,
      .sidebar-login-btn span,
      .sidebar-external .nav-label,
      .sidebar-external .ext-icon { display: inline; }
      .sidebar-header { padding: 0 20px; padding-right: 56px; text-align: left; }
      .sidebar-brand-name { font-size: 18px; }
      .sidebar-nav { padding: 0 12px; }
      .sidebar-nav-item { justify-content: flex-start; padding: 9px 12px; gap: 12px; }
      .sidebar-bottom { padding: 0 12px 72px; }
      .sidebar-login-btn { justify-content: center; }
      .sidebar-divider { margin: 16px 20px; }

      .main { grid-column: 1; }
      .topbar { grid-column: 1; }
      .content-wrap { padding: 20px 16px; }
      .kpi-row { grid-template-columns: repeat(2, 1fr); }
      .alert-grid { grid-template-columns: 1fr; }
      .rs-grid { grid-template-columns: repeat(3, 1fr); }
      .sector-cluster-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
      .sector-tile { padding: 10px 4px 8px; min-height: 58px; }
      .sector-tile-ticker { font-size: 12px; }
      .sector-tile-pct { font-size: 10px; }
      /* scroll fade removed — was hiding header/hover at right edge */
    }

    @media (max-width: 480px) {
      .kpi-row { grid-template-columns: 1fr; }
      .rs-grid { grid-template-columns: repeat(3, 1fr); }
      .sector-cluster-grid { grid-template-columns: repeat(3, 1fr); }
      .sector-legend { gap: 8px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .page-anim { animation: none; }
      .badge-live::before { animation: none; }
      .loading-spinner { animation: none; }
      * { transition-duration: 0.01ms !important; }
    }

    /* ================================================================
       OPTIONS FLOW PAGE
       ================================================================ */
    .flow-overview-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-bottom: 24px;
    }
    @media (max-width: 1100px) { .flow-overview-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 700px) { .flow-overview-grid { grid-template-columns: 1fr; } }
    .flow-expiry-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 7px 0;
    }
    .flow-expiry-row:not(:last-child) { border-bottom: 1px solid var(--border); }
    .flow-expiry-label { font-size: 12px; color: var(--text-secondary); }
    .flow-expiry-val { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--text-primary); }
    .flow-expiry-pct { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); margin-left: 6px; }
    .flow-ticker-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 5px 0;
    }
    .flow-ticker-row:not(:last-child) { border-bottom: 1px solid var(--border); }
    .flow-ticker-sym { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--text-primary); width: 42px; }
    .flow-ticker-bar-wrap { flex: 1; height: 14px; border-radius: 3px; overflow: hidden; display: flex; background: var(--border); }
    .flow-ticker-bar-bull { height: 100%; background: var(--emerald); }
    .flow-ticker-bar-bear { height: 100%; background: var(--red); }
    .flow-ticker-total { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); width: 48px; text-align: right; }
    .flow-panel {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
    }
    .flow-panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      border-bottom: 1px solid var(--border);
    }
    .flow-panel-title {
      font-family: var(--font-display);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-muted);
    }
    .flow-panel-title.bullish { color: var(--emerald); }
    .flow-panel-title.bearish { color: var(--red); }
    .flow-panel-badge {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 3px;
      letter-spacing: 0.06em;
    }
    .flow-panel-badge.bullish-badge { background: var(--emerald-dim); color: var(--emerald); }
    .flow-panel-badge.bearish-badge { background: var(--red-dim); color: var(--red); }

    .flow-mini-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
    }
    .flow-mini-table thead th {
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-faint);
      text-align: left;
      padding: 7px 12px;
      background: var(--surface-2);
      border-bottom: 1px solid var(--border);
      white-space: nowrap;
    }
    .flow-mini-table thead th:last-child { text-align: right; }
    .flow-mini-table tbody td {
      padding: 6px 12px;
      border-bottom: 1px solid rgba(30,41,59,0.5);
      font-variant-numeric: tabular-nums lining-nums;
      color: var(--text-secondary);
      white-space: nowrap;
    }
    .flow-mini-table tbody tr:last-child td { border-bottom: none; }
    .flow-mini-table .fmt-ticker {
      font-weight: 600;
      color: var(--text-primary);
      font-size: 12px;
    }
    .flow-mini-table .fmt-orders {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--text-muted);
    }
    .flow-mini-table .fmt-premium {
      font-family: var(--font-mono);
      font-weight: 600;
      font-size: 12px;
      text-align: right;
    }
    .flow-mini-table .fmt-premium.green { color: var(--emerald); }
    .flow-mini-table .fmt-premium.red { color: var(--red); }
    .flow-mini-table .fmt-premium.neutral { color: var(--text-primary); }

    /* Bullish rows */
    .flow-mini-table tr.flow-row-bullish { background: rgba(16,185,129,0.04); }
    .flow-mini-table tr.flow-row-bullish:hover { background: rgba(16,185,129,0.08); }
    /* Bearish rows */
    .flow-mini-table tr.flow-row-bearish { background: rgba(239,68,68,0.04); }
    .flow-mini-table tr.flow-row-bearish:hover { background: rgba(239,68,68,0.08); }
    /* Neutral rows */
    .flow-mini-table tr.flow-row-neutral:hover { background: var(--surface-2); }

    /* Sector color rows */
    .flow-mini-table tr.flow-sector-tech { background: rgba(139,92,246,0.05); }
    .flow-mini-table tr.flow-sector-tech:hover { background: rgba(139,92,246,0.10); }
    .flow-mini-table tr.flow-sector-consumer { background: rgba(59,130,246,0.05); }
    .flow-mini-table tr.flow-sector-consumer:hover { background: rgba(59,130,246,0.10); }
    .flow-mini-table tr.flow-sector-comms { background: rgba(16,185,129,0.05); }
    .flow-mini-table tr.flow-sector-comms:hover { background: rgba(16,185,129,0.10); }
    .flow-mini-table tr.flow-sector-energy { background: rgba(245,158,11,0.05); }
    .flow-mini-table tr.flow-sector-energy:hover { background: rgba(245,158,11,0.10); }
    .flow-mini-table tr.flow-sector-financial { background: rgba(236,72,153,0.05); }
    .flow-mini-table tr.flow-sector-financial:hover { background: rgba(236,72,153,0.10); }
    .flow-mini-table tr.flow-sector-industrials { background: rgba(148,163,184,0.06); }
    .flow-mini-table tr.flow-sector-industrials:hover { background: rgba(148,163,184,0.12); }

    /* Signal badges for Options Flow */
    .signal-badge {
      display: inline-flex;
      align-items: center;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.06em;
      padding: 3px 8px;
      border-radius: 3px;
      text-transform: uppercase;
      font-family: var(--font-mono);
    }
    .signal-badge.sweep { background: var(--blue-dim); color: var(--blue); }
    .signal-badge.block { background: var(--amber-dim); color: var(--amber); }
    .signal-badge.unusual { background: var(--emerald-dim); color: var(--emerald); }

    /* Side text colors */
    .side-above-ask { color: var(--emerald); font-weight: 600; }
    .side-below-bid { color: var(--red); font-weight: 600; }
    .side-at-ask { color: var(--blue); font-weight: 600; }

    /* Flow table type column colors */
    .flow-type-call { color: var(--emerald); font-weight: 600; }
    .flow-type-put { color: var(--red); font-weight: 600; }

    /* Flow table call/put row left borders */
    .flow-main-table tbody tr.flow-call-row {
      box-shadow: inset 3px 0 0 var(--emerald);
    }
    .flow-main-table tbody tr.flow-put-row {
      box-shadow: inset 3px 0 0 var(--red);
    }
    .flow-main-table tbody tr:hover {
      background: var(--surface-2);
    }

    /* Flow KPI specific tweaks */
    .flow-kpi-pct {
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 600;
      margin-top: 4px;
    }
    .flow-kpi-arrow {
      font-size: 14px;
      vertical-align: middle;
    }

    /* Old responsive override removed — handled inline above */

    /* ================================================================
       DARK POOL PAGE
       ================================================================ */
    .dp-top-bar {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }
    .dp-search-input {
      flex: 1;
      min-width: 180px;
      max-width: 340px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 10px 14px;
      font-family: var(--font-body);
      font-size: 13px;
      color: var(--text-primary);
      outline: none;
      transition: border-color 180ms var(--ease);
    }
    .dp-search-input:focus { border-color: var(--blue); }
    .dp-search-input::placeholder { color: var(--text-faint); }
    .dp-date-input {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 10px 14px;
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--text-secondary);
      width: 130px;
      cursor: pointer;
      outline: none;
    }
    .dp-search-btn {
      background: var(--blue);
      color: #fff;
      font-size: 13px;
      font-weight: 600;
      padding: 10px 24px;
      border-radius: var(--radius-sm);
      transition: background 180ms var(--ease);
    }
    .dp-search-btn:hover { background: var(--blue-hover); }

    /* Dark Pool chart + donut layout */
    .dp-chart-section {
      display: grid;
      grid-template-columns: 1fr 280px;
      gap: 16px;
      margin-bottom: 20px;
    }
    @media (max-width: 900px) {
      .dp-chart-section { grid-template-columns: 1fr; }
    }
    .dp-chart-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 16px;
      min-height: 240px;
    }
    .dp-chart-timeframes {
      display: flex;
      gap: 4px;
      margin-bottom: 12px;
    }
    .dp-tf-btn {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: 3px;
      color: var(--text-muted);
      background: transparent;
      border: 1px solid var(--border);
      transition: all 180ms var(--ease);
      cursor: pointer;
    }
    .dp-tf-btn.active { background: var(--surface-2); color: var(--text-primary); border-color: var(--text-faint); }
    .dp-tf-btn:hover { color: var(--text-primary); }

    /* Canvas chart area */
    .dp-chart-canvas {
      width: 100%;
      height: 180px;
      position: relative;
    }
    .dp-chart-canvas canvas {
      width: 100%;
      height: 100%;
    }

    /* Donut card */
    .dp-donut-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .dp-donut-title {
      font-family: var(--font-display);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 16px;
      align-self: flex-start;
    }
    .dp-donut-wrap {
      position: relative;
      width: 160px;
      height: 160px;
      margin-bottom: 16px;
    }
    .dp-donut-wrap canvas {
      width: 160px;
      height: 160px;
    }
    .dp-donut-center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
    }
    .dp-donut-center-val {
      font-family: var(--font-mono);
      font-size: 20px;
      font-weight: 700;
      color: var(--text-primary);
    }
    .dp-donut-center-sub {
      font-size: 10px;
      color: var(--text-muted);
      margin-top: 2px;
    }
    .dp-donut-legend {
      display: flex;
      flex-direction: column;
      gap: 6px;
      width: 100%;
    }
    .dp-donut-legend-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      color: var(--text-secondary);
    }
    .dp-legend-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .dp-legend-pct {
      margin-left: auto;
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--text-muted);
    }

    /* Dark Pool levels table */
    .dp-levels-table {
      width: 100%;
      border-collapse: collapse;
    }
    .dp-levels-table thead th {
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-faint);
      text-align: left;
      padding: 10px 16px;
      border-bottom: 1px solid var(--border);
      white-space: nowrap;
    }
    .dp-levels-table thead th:nth-child(n+2) { text-align: right; }
    .dp-levels-table tbody td {
      padding: 10px 16px;
      font-size: 13px;
      font-variant-numeric: tabular-nums lining-nums;
      border-bottom: 1px solid rgba(30,41,59,0.4);
      white-space: nowrap;
    }
    .dp-levels-table tbody td:nth-child(n+2) { text-align: right; }
    .dp-levels-table tbody tr:last-child td { border-bottom: none; }
    .dp-level-price {
      font-family: var(--font-mono);
      font-weight: 600;
      color: var(--text-primary);
    }
    .dp-level-prints { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); }
    .dp-level-size { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); }
    .dp-level-premium { font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
    .dp-level-premium.major { color: #c084fc; }
    .dp-level-premium.medium { color: #a78bfa; }
    .dp-level-premium.minor { color: var(--text-secondary); }
    /* Row highlight for large prints */
    .dp-levels-table tbody tr.dp-row-major {
      background: rgba(192,132,252,0.06);
    }
    .dp-levels-table tbody tr.dp-row-major:hover {
      background: rgba(192,132,252,0.12);
    }
    .dp-levels-table tbody tr.dp-row-medium {
      background: rgba(167,139,250,0.04);
    }
    .dp-levels-table tbody tr.dp-row-medium:hover {
      background: rgba(167,139,250,0.08);
    }
    .dp-levels-table tbody tr:hover {
      background: var(--surface-2);
    }
    /* Volume bar inside table */
    .dp-vol-bar-cell {
      position: relative;
      padding-right: 16px !important;
    }
    .dp-vol-bar {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      height: 20px;
      border-radius: 2px;
      opacity: 0.15;
    }
    .dp-vol-bar.purple { background: #c084fc; }

    /* ================================================================
       GEX PAGE
       ================================================================ */
    .gex-kpi-row {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 12px;
      margin-bottom: 20px;
    }
    @media (max-width: 1100px) { .gex-kpi-row { grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 768px) { .gex-kpi-row { grid-template-columns: repeat(2, 1fr); } }
    .gex-kpi {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 14px 16px;
    }
    .gex-kpi-label {
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-faint);
      margin-bottom: 6px;
    }
    .gex-kpi-value {
      font-family: var(--font-mono);
      font-size: 18px;
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1.2;
    }
    .gex-kpi-sub {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 4px;
    }

    /* GEX bar chart */
    .gex-chart-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 16px;
      margin-bottom: 20px;
    }
    .gex-chart-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }
    .gex-chart-title {
      font-family: var(--font-display);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-muted);
    }
    .gex-chart-legend {
      display: flex;
      gap: 16px;
    }
    .gex-legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      color: var(--text-muted);
    }
    .gex-legend-swatch {
      width: 10px;
      height: 10px;
      border-radius: 2px;
    }
    .gex-legend-swatch.call { background: var(--emerald); }
    .gex-legend-swatch.put { background: var(--red); }

    /* Horizontal bar chart rows */
    .gex-bar-chart {
      display: flex;
      flex-direction: column;
      gap: 2px;
      position: relative;
    }
    .gex-bar-row {
      display: grid;
      grid-template-columns: 200px 1fr 1fr;
      align-items: center;
      height: 28px;
      position: relative;
    }
    .gex-bar-strike {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 600;
      color: var(--text-secondary);
      text-align: right;
      padding-right: 12px;
    }
    .gex-bar-strike.spot { color: var(--blue); font-weight: 700; }
    .gex-bar-strike.call-wall { color: var(--amber); font-weight: 700; }
    .gex-bar-strike.put-wall { color: var(--red); font-weight: 700; }
    .gex-bar-strike.max-move { color: var(--emerald); font-weight: 700; }
    .gex-bar-call {
      height: 18px;
      border-radius: 2px 0 0 2px;
      justify-self: end;
    }
    .gex-bar-put {
      height: 18px;
      border-radius: 0 2px 2px 0;
    }
    /* Key level markers */
    .gex-bar-row.gex-spot-row {
      background: rgba(59,130,246,0.06);
      border: 1px solid rgba(59,130,246,0.2);
      border-radius: 3px;
    }
    .gex-bar-row.gex-callwall-row {
      background: rgba(245,158,11,0.06);
      border: 1px solid rgba(245,158,11,0.2);
      border-radius: 3px;
    }
    .gex-bar-row.gex-putwall-row {
      background: rgba(239,68,68,0.06);
      border: 1px solid rgba(239,68,68,0.2);
      border-radius: 3px;
    }
    .gex-bar-row.gex-maxmove-row {
      background: rgba(16,185,129,0.06);
      border: 1px solid rgba(16,185,129,0.2);
      border-radius: 3px;
    }
    /* Label tags on key levels */
    .gex-label-tag {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.06em;
      padding: 2px 6px;
      border-radius: 3px;
      margin-left: 8px;
      font-family: var(--font-mono);
      white-space: nowrap;
    }
    .gex-label-tag.spot-tag { background: var(--blue-dim); color: var(--blue); }
    .gex-label-tag.callwall-tag { background: var(--amber-dim); color: var(--amber); }
    .gex-label-tag.putwall-tag { background: var(--red-dim); color: var(--red); }
    .gex-label-tag.maxmove-tag { background: var(--emerald-dim); color: var(--emerald); }

    /* GEX data table */
    .gex-data-table {
      width: 100%;
      border-collapse: collapse;
    }
    .gex-data-table thead th {
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-faint);
      text-align: right;
      padding: 10px 12px;
      border-bottom: 1px solid var(--border);
      white-space: nowrap;
    }
    .gex-data-table thead th:first-child { text-align: left; }
    .gex-data-table tbody td {
      padding: 8px 12px;
      font-family: var(--font-mono);
      font-size: 12px;
      font-variant-numeric: tabular-nums lining-nums;
      border-bottom: 1px solid rgba(30,41,59,0.4);
      text-align: right;
      white-space: nowrap;
    }
    .gex-data-table tbody td:first-child { text-align: left; font-weight: 600; color: var(--text-primary); }
    .gex-data-table tbody tr:last-child td { border-bottom: none; }
    .gex-data-table tbody tr:hover { background: var(--surface-2); }
    .gex-val-pos { color: var(--emerald); }
    .gex-val-neg { color: var(--red); }
    .gex-val-neutral { color: var(--text-secondary); }
    /* Highlighted rows */
    .gex-data-table tbody tr.gex-table-spot {
      background: rgba(59,130,246,0.06);
    }
    .gex-data-table tbody tr.gex-table-callwall {
      background: rgba(245,158,11,0.06);
    }
    .gex-data-table tbody tr.gex-table-putwall {
      background: rgba(239,68,68,0.06);
    }

    /* ================================================================
       HEATMAP TOGGLE
       ================================================================ */
    .heatmap-toggle {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 12px; border-radius: 20px;
      font-size: 12px; font-weight: 500; font-family: var(--font-body);
      color: var(--text-muted); border: 1px solid var(--border);
      background: transparent; cursor: pointer; transition: all 0.18s ease;
      margin-left: 12px;
    }
    .heatmap-toggle:hover { border-color: var(--blue); color: var(--text-secondary); }
    .heatmap-toggle.active { background: var(--blue-dim); border-color: var(--blue); color: var(--blue); }
    .heatmap-toggle svg { opacity: 0.7; }
    .heatmap-toggle.active svg { opacity: 1; stroke: var(--blue); }

    /* ================================================================
       CORRELATION MATRIX
       ================================================================ */
    .corr-container {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
    }
    .corr-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px 20px;
      border-bottom: 1px solid var(--border);
    }
    .corr-header-title {
      font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--text-primary);
    }
    .corr-header-sub {
      font-size: 12px; color: var(--text-muted);
    }
    .corr-scroll {
      overflow-x: auto;
      overflow-y: visible;
      padding: 12px 16px 16px 8px;
      position: relative;
    }
    .corr-insights {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      padding: 16px 20px;
      border-bottom: 1px solid var(--border);
    }
    @media (max-width: 900px) { .corr-insights { grid-template-columns: 1fr; } }
    .corr-insight-card {
      background: var(--bg-base);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 14px 16px;
    }
    .corr-insight-title {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--text-muted);
      margin-bottom: 8px;
      font-weight: 600;
    }
    .corr-insight-pair {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 4px 0;
    }
    .corr-insight-pair:not(:last-child) {
      border-bottom: 1px solid var(--border);
    }
    .corr-insight-tickers {
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--text-primary);
      font-weight: 500;
    }
    .corr-insight-val {
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 600;
    }
    .corr-insight-stat {
      display: flex;
      align-items: baseline;
      gap: 8px;
      margin-bottom: 6px;
    }
    .corr-insight-stat-value {
      font-family: var(--font-mono);
      font-size: 22px;
      font-weight: 700;
      color: var(--text-primary);
    }
    .corr-insight-stat-label {
      font-size: 12px;
      color: var(--text-muted);
    }
    .corr-insight-desc {
      font-size: 11px;
      color: var(--text-faint);
      line-height: 1.5;
    }
    .corr-matrix {
      border-collapse: separate;
      border-spacing: 0;
      margin: 0;
    }
    .corr-matrix th {
      font-family: var(--font-mono); font-size: 9px; font-weight: 500;
      color: var(--text-muted); padding: 2px 4px;
      position: sticky; background: var(--surface); z-index: 2;
    }
    .corr-matrix thead th {
      top: 0; text-align: center; vertical-align: bottom;
      height: 60px; white-space: nowrap;
    }
    .corr-matrix thead th > span {
      display: inline-block;
      transform: rotate(-45deg);
      transform-origin: left bottom;
      width: 20px;
    }
    .corr-matrix th.corr-row-label {
      left: 0; text-align: right; padding-right: 6px;
      z-index: 3; min-width: 36px; cursor: pointer;
    }
    .corr-matrix th.corr-row-label:hover { color: var(--text-primary); }
    .corr-matrix thead th.corr-col-clickable { cursor: pointer; }
    .corr-matrix thead th.corr-col-clickable:hover span { color: var(--text-primary); }
    /* Cluster label row */
    .corr-cluster-row th {
      font-family: var(--font-display); font-size: 9px; font-weight: 600;
      color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.5px;
      text-align: center; padding: 4px 0 2px; border: none;
      position: sticky; top: 0; z-index: 4; background: var(--surface);
    }
    .corr-cluster-label {
      border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    }
    /* Cluster border separators */
    .corr-cluster-border-right {
      border-right: 1px solid rgba(255,255,255,0.08) !important;
    }
    .corr-cluster-border-bottom td,
    .corr-cluster-border-bottom th {
      border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    }
    .corr-matrix td {
      width: 28px; height: 28px; min-width: 28px;
      text-align: center; vertical-align: middle;
      font-family: var(--font-mono); font-size: 9px;
      color: transparent; border-radius: 2px;
      cursor: crosshair; transition: color 0.12s ease, outline 0.12s ease;
      position: relative;
      border: 0.5px solid rgba(0,0,0,0.3);
    }
    .corr-matrix td:hover {
      color: #fff !important;
      outline: 1.5px solid rgba(255,255,255,0.4);
      outline-offset: -1px;
      z-index: 1;
    }
    .corr-matrix td.corr-diag {
      color: rgba(255,255,255,0.5);
      font-weight: 600;
    }
    /* Tooltip */
    .corr-tooltip {
      position: absolute;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.12s ease;
      background: rgba(15,17,23,0.95);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 6px;
      padding: 6px 10px;
      display: flex;
      flex-direction: column;
      gap: 2px;
      z-index: 100;
      white-space: nowrap;
      box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    }
    .corr-tooltip-pair {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--text-secondary);
      font-weight: 500;
    }
    .corr-tooltip-val {
      font-family: var(--font-mono);
      font-size: 14px;
      font-weight: 700;
      color: var(--text-primary);
    }
    .corr-legend {
      display: flex; align-items: center; gap: 6px;
      margin-top: 16px; padding: 0 12px 16px;
      justify-content: center;
    }
    .corr-legend-label {
      font-family: var(--font-mono); font-size: 10px; color: var(--text-muted);
    }
    .corr-legend-bar {
      flex: 0 1 300px; height: 12px; border-radius: 6px;
      background: linear-gradient(to right,
        rgb(59,130,246) 0%,
        rgb(35,75,148) 20%,
        rgb(26,35,50) 40%,
        rgb(26,35,50) 60%,
        rgb(20,110,90) 80%,
        rgb(16,185,129) 100%
      );
    }
    .corr-loading {
      display: flex; align-items: center; justify-content: center;
      padding: 80px 20px;
      color: var(--text-muted); font-size: 13px;
    }
    .corr-loading-spinner {
      width: 20px; height: 20px; border: 2px solid var(--border);
      border-top-color: var(--blue); border-radius: 50%;
      animation: spin 0.8s linear infinite;
      margin-right: 10px;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ================================================================
       ATR PERCENTILE HEATMAP
       ================================================================ */
    .atr-container {
      background: var(--surface-1); border: 1px solid var(--border);
      border-radius: 12px; padding: 20px; margin-bottom: 20px;
    }
    .atr-header { margin-bottom: 16px; }
    .atr-header-title {
      font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px;
    }
    .atr-header-sub {
      font-size: 12px; color: var(--text-muted);
    }
    .atr-scroll {
      overflow-x: auto; overflow-y: visible;
      border: 1px solid var(--border); border-radius: 8px;
    }
    .atr-matrix {
      border-collapse: collapse; font-size: 11px; width: 100%;
      table-layout: fixed;
    }
    .atr-matrix th {
      position: sticky; background: var(--surface-1); z-index: 2;
      padding: 0; color: var(--text-muted); font-weight: 500;
    }
    .atr-matrix thead th {
      top: 0; z-index: 3; border-bottom: 1px solid var(--border);
    }
    .atr-col-header > span {
      display: block; writing-mode: vertical-lr; transform: rotate(180deg);
      padding: 8px 2px; font-size: 11px; font-family: 'JetBrains Mono', monospace;
      white-space: nowrap; letter-spacing: 0.03em; min-height: 72px;
      color: var(--text-muted);
    }
    .atr-col-header { cursor: pointer; }
    .atr-col-header:hover > span { color: var(--text-primary); }
    .atr-corner { width: 88px; min-width: 88px; }
    .atr-row-label {
      position: sticky; left: 0; z-index: 2;
      font-size: 11px; padding: 2px 16px 2px 8px; text-align: right; white-space: nowrap;
      overflow: visible;
      font-family: 'JetBrains Mono', monospace; color: var(--text-muted);
      background: var(--surface-1); border-right: 1px solid var(--border);
      min-width: 88px;
    }
    .atr-cell {
      width: 22px; height: 18px; min-width: 22px;
      padding: 0; border: 1px solid rgba(42,45,62,0.3);
      transition: opacity 0.1s;
    }
    .atr-cell:hover { opacity: 0.7; outline: 1px solid rgba(255,255,255,0.3); }
    .atr-no-data { background: transparent; }
    .atr-legend {
      display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
      padding: 14px 0 4px; font-size: 11px; color: var(--text-muted);
    }
    .atr-legend-item { display: flex; align-items: center; gap: 5px; }
    .atr-legend-swatch {
      width: 14px; height: 14px; border-radius: 3px;
      border: 1px solid rgba(255,255,255,0.08);
    }
    .atr-alerts {
      margin-top: 24px; background: var(--surface-1); border: 1px solid var(--border);
      border-radius: 12px; padding: 20px;
    }
    .atr-alerts-title {
      font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px;
    }
    .atr-alerts-sub {
      font-size: 12px; color: var(--text-muted); margin-bottom: 14px;
    }
    .atr-alerts-list { display: flex; flex-direction: column; gap: 8px; }
    .atr-alert-row {
      display: flex; align-items: center; gap: 12px;
      background: var(--surface-2); border: 1px solid var(--border);
      border-radius: 8px; padding: 10px 14px; transition: background 0.15s;
    }
    .atr-alert-row:hover { background: rgba(59,130,246,0.06); }
    .atr-alert-left { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
    .atr-alert-ticker {
      font-family: 'JetBrains Mono', monospace; font-weight: 600;
      font-size: 13px; color: #60A5FA; min-width: 50px;
    }
    .atr-badge {
      font-size: 9px; font-weight: 700; letter-spacing: 0.05em;
      padding: 2px 6px; border-radius: 4px; text-transform: uppercase; white-space: nowrap;
    }
    .atr-badge-compress { background: rgba(59,130,246,0.15); color: #60A5FA; }
    .atr-badge-confluence { background: rgba(16,185,129,0.15); color: #10B981; }
    .atr-alert-desc {
      flex: 1; font-size: 12px; color: var(--text-muted); min-width: 0;
    }
    .atr-alert-weight {
      font-family: 'JetBrains Mono', monospace; font-weight: 600;
      font-size: 13px; padding: 4px 10px; border-radius: 6px;
      background: rgba(139,143,163,0.1); color: var(--text-secondary);
      flex-shrink: 0;
    }
    @media (max-width: 700px) {
      .atr-cell { width: 16px; height: 14px; min-width: 16px; }
      .atr-col-header > span { font-size: 8px; min-height: 36px; }
      .atr-row-label { font-size: 8px; min-width: 60px; width: 60px; padding: 0 6px 0 4px; }
      .atr-corner { width: 60px; min-width: 60px; }
      .atr-matrix tr { height: 14px; }
      .atr-alert-row { flex-wrap: wrap; gap: 6px; }
      .atr-alert-desc { width: 100%; order: 3; }
    }

    /* ================================================================
       VALUATION TAB — New Fair Value Estimate + DCF Assumptions styles
       ================================================================ */
    .val-fv-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 0;
    }
    .val-fv-badge {
      display: inline-flex;
      align-items: center;
      padding: 2px 7px;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.06em;
      border-radius: 4px;
      background: rgba(59,130,246,0.15);
      color: #60A5FA;
      border: 1px solid rgba(59,130,246,0.3);
      font-family: var(--font-mono);
    }
    .val-fv-source {
      font-size: 9px;
      color: var(--text-faint);
      font-family: var(--font-mono);
      text-align: right;
    }
    /* Heat bar */
    .val-heatbar-wrap {
      position: relative;
      padding-top: 28px;
      padding-bottom: 20px;
    }
    .val-heatbar-marker-row {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 28px;
    }
    .val-heatbar-marker {
      position: absolute;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .val-heatbar-marker-label {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.08em;
      color: #E2E8F0;
      font-family: var(--font-mono);
      white-space: nowrap;
      margin-bottom: 3px;
    }
    .val-heatbar-marker-arrow {
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 6px solid #E2E8F0;
    }
    .val-heatbar {
      height: 14px;
      border-radius: 7px;
      background: linear-gradient(to right, #EF4444 0%, #F59E0B 40%, #EAB308 60%, #10B981 100%);
      position: relative;
    }
    .val-heatbar-labels {
      display: flex;
      justify-content: space-between;
      margin-top: 5px;
    }
    .val-heatbar-bear,
    .val-heatbar-base,
    .val-heatbar-bull {
      font-size: 9px;
      font-family: var(--font-mono);
      color: var(--text-faint);
    }
    .val-heatbar-base { text-align: center; }
    .val-heatbar-bull { text-align: right; }
    /* Price targets row (below bar) */
    .val-fv-metrics-row {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      margin-top: 14px;
      padding: 12px 0 4px;
      border-top: 1px solid var(--border);
    }
    .val-fv-right-item {
      text-align: center;
      flex: 1;
    }
    .val-fv-right-item:first-child { text-align: left; }
    .val-fv-right-item:last-child { text-align: right; }
    .val-fv-right-label {
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-faint);
      font-family: var(--font-mono);
      margin-bottom: 2px;
    }
    .val-fv-right-value {
      font-family: var(--font-mono);
      font-size: 18px;
      font-weight: 700;
      color: #E2E8F0;
      line-height: 1.1;
    }
    .val-fv-right-value.green { color: var(--emerald); }
    .val-fv-right-value.amber { color: var(--amber); }
    .val-fv-right-value.red   { color: var(--red); }
    .val-fv-right-delta {
      font-family: var(--font-mono);
      font-size: 10px;
      margin-top: 1px;
    }
    .val-fv-right-delta.up   { color: var(--emerald); }
    .val-fv-right-delta.down { color: var(--red); }
    /* DCF Assumption Cards */
    .val-dcf-cards {
      display: flex;
      gap: 10px;
      margin-top: 12px;
    }
    .val-dcf-card {
      flex: 1;
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 12px 14px;
      min-width: 0;
    }
    .val-dcf-card-label {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-faint);
      font-family: var(--font-mono);
      margin-bottom: 6px;
    }
    .val-dcf-card-value {
      font-family: var(--font-mono);
      font-size: 24px;
      font-weight: 600;
      color: var(--emerald);
      line-height: 1.1;
      margin-bottom: 4px;
    }
    .val-dcf-card-sub {
      font-size: 9px;
      color: var(--text-faint);
      font-family: var(--font-mono);
    }

    /* ================================================================
       ALGORITHM SCORE PAGE
       ================================================================ */
    .sa-page-header {
      padding: 24px 32px 20px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .sa-page-header h1 {
      font-family: var(--font-display);
      font-size: 20px;
      font-weight: 600;
      color: var(--text-primary);
    }
    .sa-page-header .sa-subtitle {
      font-size: 13px;
      color: var(--text-faint);
      margin-left: auto;
      font-family: var(--font-mono);
    }
    .sa-content { padding: 24px 32px; }

    /* Distribution Section */
    .dist-section {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 24px;
      margin-bottom: 24px;
    }
    .dist-section h2 {
      font-family: var(--font-display);
      font-size: 15px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 4px;
    }
    .dist-subtitle {
      font-size: 12px;
      color: var(--text-faint);
      margin-bottom: 20px;
    }
    /* Segmented Gauge Strip */
    .gauge-wrapper {
      position: relative;
      padding-top: 28px;
    }
    .gauge-avg-label {
      position: absolute;
      top: 0;
      transform: translateX(-50%);
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 600;
      color: var(--text-secondary);
      white-space: nowrap;
      z-index: 10;
    }
    .gauge-avg-caret {
      position: absolute;
      top: 14px;
      transform: translateX(-50%);
      z-index: 10;
      width: 0; height: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 7px solid var(--text-secondary);
    }
    .gauge-strip {
      position: relative;
      display: flex;
      height: 52px;
      border-radius: 8px;
      overflow: hidden;
    }
    .gauge-seg {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      min-width: 48px;
      transition: filter 0.2s;
      cursor: default;
    }
    .gauge-seg:hover { filter: brightness(1.18); }
    .gauge-seg .seg-count {
      font-family: var(--font-mono);
      font-size: 18px;
      font-weight: 700;
      color: #fff;
      line-height: 1;
    }
    .gauge-seg .seg-pct {
      font-size: 10px;
      color: rgba(255,255,255,0.65);
      margin-top: 2px;
    }
    .gauge-marker-line {
      position: absolute;
      top: 0; bottom: 0;
      width: 2px;
      background: rgba(255,255,255,0.6);
      transform: translateX(-50%);
      z-index: 5;
      pointer-events: none;
    }
    .gauge-labels {
      display: flex;
      margin-top: 6px;
    }
    .gauge-label {
      text-align: center;
      line-height: 1.3;
    }
    .gauge-label .gl-range {
      font-family: var(--font-mono);
      font-size: 10px;
      color: var(--text-secondary);
      display: block;
    }
    .gauge-label .gl-tag {
      font-size: 10px;
      color: var(--text-faint);
    }
    .dist-stats {
      display: flex;
      gap: 32px;
      margin-top: 20px;
      padding-top: 16px;
      border-top: 1px solid var(--border);
    }
    .dist-stat {
      display: flex;
      align-items: baseline;
      gap: 8px;
    }
    .dist-stat .stat-label {
      font-size: 12px;
      color: var(--text-faint);
    }
    .dist-stat .stat-value {
      font-family: var(--font-mono);
      font-size: 16px;
      font-weight: 600;
      color: var(--text-primary);
    }

    /* Methodology Cards */
    .method-section-header {
      font-family: var(--font-display);
      font-size: 15px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 4px;
    }
    .method-section-subtitle {
      font-size: 12px;
      color: var(--text-faint);
      margin-bottom: 20px;
    }
    .method-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 24px;
    }
    .method-pill {
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 8px 14px;
      height: 40px;
      transition: background 0.15s;
    }
    .method-pill:hover {
      background: var(--surface-2);
    }
    .method-icon {
      width: 24px;
      height: 24px;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      flex-shrink: 0;
    }
    .method-pill-name {
      font-family: var(--font-display);
      font-size: 13px;
      font-weight: 600;
      color: var(--text-primary);
    }
    .method-pill-weight {
      font-family: var(--font-mono);
      font-size: 13px;
      font-weight: 700;
      color: var(--text-muted);
      margin-left: 2px;
    }

    /* Live Scoring Example */
    .live-section {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 24px;
      margin-bottom: 24px;
    }
    .live-section h2 {
      font-family: var(--font-display);
      font-size: 15px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 4px;
    }
    .live-subtitle {
      font-size: 12px;
      color: var(--text-faint);
      margin-bottom: 20px;
    }
    .live-header {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 20px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--border);
    }
    .live-ticker {
      font-family: var(--font-mono);
      font-size: 14px;
      font-weight: 600;
      color: var(--blue);
      background: var(--blue-dim);
      padding: 6px 12px;
      border-radius: 6px;
    }
    .live-score-display {
      font-family: var(--font-mono);
      font-size: 28px;
      font-weight: 600;
      color: var(--emerald);
    }
    .live-score-display span {
      font-size: 16px;
      color: var(--text-muted);
    }
    .live-score-label {
      font-size: 12px;
      color: var(--text-muted);
    }

    /* Stacked bar */
    .stacked-bar-wrap {
      margin-bottom: 24px;
    }
    .stacked-bar {
      display: flex;
      height: 24px;
      border-radius: 6px;
      overflow: hidden;
      margin-bottom: 10px;
    }
    .stacked-seg {
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 600;
      color: white;
      transition: width 0.6s ease;
    }
    .stacked-legend {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }
    .stacked-legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--text-secondary);
    }
    .stacked-legend-item .sl-dot {
      width: 10px;
      height: 10px;
      border-radius: 3px;
    }

    /* Breakdown table */
    .breakdown-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }
    .breakdown-table thead th {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      color: var(--text-faint);
      padding: 10px 14px;
      text-align: left;
      border-bottom: 1px solid var(--border);
      white-space: nowrap;
    }
    .breakdown-table thead th:nth-child(n+2) {
      text-align: right;
    }
    .breakdown-table thead th:last-child {
      text-align: left;
    }
    .breakdown-table tbody tr {
      border-bottom: 1px solid var(--border);
      transition: background 0.15s;
    }
    .breakdown-table tbody tr:hover {
      background: var(--surface-2);
    }
    .breakdown-table tbody tr:last-child {
      border-bottom: none;
    }
    .breakdown-table td {
      padding: 14px 14px;
      font-family: var(--font-body);
      font-size: 13px;
      color: var(--text-secondary);
      vertical-align: top;
    }
    .breakdown-table td:first-child {
      font-family: var(--font-display);
      font-weight: 500;
      color: var(--text-primary);
    }
    .breakdown-table td:nth-child(2),
    .breakdown-table td:nth-child(3),
    .breakdown-table td:nth-child(4) {
      text-align: right;
      font-family: var(--font-mono);
      font-size: 13px;
      white-space: nowrap;
    }
    .breakdown-table td:last-child {
      font-size: 12px;
      color: var(--text-muted);
      line-height: 1.5;
    }
    .breakdown-total {
      display: flex;
      justify-content: flex-end;
      align-items: baseline;
      gap: 8px;
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid var(--border);
    }
    .breakdown-total .total-label {
      font-family: var(--font-display);
      font-size: 14px;
      font-weight: 600;
      color: var(--text-primary);
    }
    .breakdown-total .total-value {
      font-family: var(--font-mono);
      font-size: 24px;
      font-weight: 600;
      color: var(--emerald);
    }
    .breakdown-total .total-max {
      font-family: var(--font-mono);
      font-size: 14px;
      color: var(--text-muted);
    }

    /* Score Interpretation Guide */
    .guide-section {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 24px;
      margin-bottom: 24px;
    }
    .guide-section h2 {
      font-family: var(--font-display);
      font-size: 15px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 4px;
    }
    .guide-subtitle {
      font-size: 12px;
      color: var(--text-faint);
      margin-bottom: 20px;
    }
    .guide-tiers {
      display: flex;
      flex-direction: column;
      gap: 0;
    }
    .guide-tier {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 14px 16px;
      border-bottom: 1px solid var(--border);
      transition: background 0.15s;
    }
    .guide-tier:last-child {
      border-bottom: none;
    }
    .guide-tier:hover {
      background: var(--surface-2);
    }
    .tier-color-bar {
      width: 6px;
      height: 36px;
      border-radius: 3px;
      flex-shrink: 0;
    }
    .tier-range {
      font-family: var(--font-mono);
      font-size: 14px;
      font-weight: 600;
      color: var(--text-primary);
      min-width: 70px;
    }
    .tier-name {
      font-family: var(--font-display);
      font-size: 14px;
      font-weight: 600;
      min-width: 110px;
    }
    .tier-desc {
      font-size: 13px;
      color: var(--text-secondary);
    }

    /* Changelog */
    .changelog-section {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 24px;
      margin-bottom: 24px;
    }
    .changelog-section h2 {
      font-family: var(--font-display);
      font-size: 15px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 16px;
    }
    .changelog-item {
      display: flex;
      gap: 16px;
      padding: 12px 0;
      border-bottom: 1px solid var(--border);
    }
    .changelog-item:last-child {
      border-bottom: none;
    }
    .changelog-version {
      font-family: var(--font-mono);
      font-size: 13px;
      font-weight: 600;
      color: var(--blue);
      background: var(--blue-dim);
      padding: 2px 10px;
      border-radius: 4px;
      height: fit-content;
      white-space: nowrap;
    }
    .changelog-date {
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--text-faint);
      min-width: 80px;
      white-space: nowrap;
    }
    .changelog-desc {
      font-size: 13px;
      color: var(--text-secondary);
      line-height: 1.5;
    }

    /* Version toggle pills (Algorithm Score page) */
    .version-toggle-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 28px;
    }
    .version-toggle-label {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-muted);
    }
    .version-toggle-group {
      display: flex;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 3px;
      gap: 2px;
    }
    .version-pill {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 600;
      padding: 5px 14px;
      border-radius: 4px;
      cursor: pointer;
      color: var(--text-muted);
      background: transparent;
      border: none;
      transition: all 0.15s ease;
      white-space: nowrap;
    }
    .version-pill:hover {
      color: var(--text-secondary);
      background: rgba(255,255,255,0.04);
    }
    .version-pill.active {
      background: var(--blue);
      color: #fff;
    }
    .version-pill .version-tag {
      font-size: 8px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin-left: 6px;
      padding: 1px 5px;
      border-radius: 3px;
      vertical-align: middle;
    }
    .version-pill.active .version-tag {
      background: rgba(255,255,255,0.2);
      color: #fff;
    }
    .version-pill:not(.active) .version-tag {
      background: rgba(16,185,129,0.15);
      color: var(--emerald);
    }
    .version-content {
      display: none;
      animation: saFadeIn 0.2s ease;
    }
    .version-content.active {
      display: block;
    }
    @keyframes saFadeIn {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .changelog-active-tag {
      font-size: 8px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 1px 5px;
      border-radius: 3px;
      background: rgba(16,185,129,0.15);
      color: var(--emerald);
      margin-left: 4px;
      vertical-align: middle;
    }

    /* Component bar for live scoring */
    .comp-bar-row {
      margin-bottom: 10px;
    }
    .comp-bar-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 4px;
    }
    .comp-bar-header .comp-name {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 12px;
      color: var(--text-secondary);
    }
    .comp-bar-header .comp-val {
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--text-secondary);
    }
    .comp-bar-track {
      height: 8px;
      background: var(--bg-alt);
      border-radius: 4px;
      overflow: hidden;
    }
    .comp-bar-fill {
      height: 100%;
      border-radius: 4px;
      transition: width 0.6s ease;
    }
    /* ================================================================
       MARKET MODEL PAGE
       ================================================================ */
    .mm-regime-card {
      background: var(--surface-1);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 28px 32px;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      gap: 40px;
      flex-wrap: wrap;
    }
    .mm-regime-status {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .mm-regime-label {
      font-size: 11px;
      font-weight: 500;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.8px;
    }
    .mm-regime-value {
      font-family: var(--font-display);
      font-size: 32px;
      font-weight: 700;
      color: var(--emerald);
      letter-spacing: 1px;
    }
    .mm-regime-composite {
      flex: 1;
      min-width: 250px;
    }
    .mm-composite-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 8px;
    }
    .mm-composite-header .mm-ch-label {
      font-size: 11px;
      font-weight: 500;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.8px;
    }
    .mm-composite-header .mm-ch-score {
      font-family: var(--font-mono);
      font-size: 20px;
      font-weight: 600;
      color: var(--emerald);
    }
    .mm-composite-header .mm-ch-score span {
      font-size: 14px;
      color: var(--text-muted);
    }
    .mm-progress-track {
      height: 12px;
      background: var(--border);
      border-radius: 6px;
      overflow: hidden;
      position: relative;
    }
    .mm-progress-fill {
      height: 100%;
      border-radius: 6px;
      background: linear-gradient(90deg, var(--emerald), var(--emerald-bright, #34D399));
      transition: width 0.6s ease;
    }
    .mm-progress-markers {
      display: flex;
      justify-content: space-between;
      margin-top: 4px;
      font-family: var(--font-mono);
      font-size: 10px;
      color: var(--text-faint);
    }
    .mm-regime-history {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .mm-regime-history .mm-rh-label {
      font-size: 11px;
      font-weight: 500;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.8px;
    }
    .mm-history-strip {
      display: flex;
      gap: 4px;
    }
    .mm-history-square {
      width: 24px;
      height: 24px;
      border-radius: 4px;
      position: relative;
    }
    .mm-history-square.green { background: var(--emerald); }
    .mm-history-square.yellow { background: #F59E0B; }
    .mm-history-square.red { background: var(--red); }
    .mm-regime-timestamp {
      font-size: 12px;
      color: var(--text-faint);
      font-family: var(--font-mono);
      white-space: nowrap;
      align-self: flex-end;
    }

    /* Signal Components Grid */
    .mm-signal-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-bottom: 24px;
    }
    .mm-signal-card {
      background: var(--surface-1);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 20px 22px;
      transition: background 0.15s;
    }
    .mm-signal-card:hover {
      background: var(--surface-2);
    }
    .mm-signal-card-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 16px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--border);
    }
    .mm-signal-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      flex-shrink: 0;
    }
    .mm-signal-card-header h3 {
      font-family: var(--font-display);
      font-size: 14px;
      font-weight: 600;
      color: var(--text-primary);
    }
    .mm-signal-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 0;
    }
    .mm-signal-row:not(:last-child) {
      border-bottom: 1px solid rgba(30,41,59,0.5);
    }
    .mm-signal-row .mm-metric-label {
      font-size: 12px;
      color: var(--text-secondary);
      font-family: var(--font-body);
      font-weight: 400;
    }
    .mm-signal-row .mm-metric-value {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .mm-signal-row .mm-metric-data {
      font-family: var(--font-mono);
      font-size: 13px;
      font-weight: 500;
      color: var(--text-primary);
    }
    .mm-badge {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 600;
      font-family: var(--font-display);
      letter-spacing: 0.3px;
      white-space: nowrap;
    }
    .mm-badge.bullish { background: rgba(16,185,129,0.12); color: var(--emerald-bright, #34D399); }
    .mm-badge.bearish { background: rgba(239,68,68,0.12); color: #F87171; }
    .mm-badge.neutral { background: rgba(245,158,11,0.12); color: #F59E0B; }
    .mm-badge.data-only {
      background: rgba(59,130,246,0.1);
      color: var(--blue);
    }

    /* RRG Chart Section */
    .mm-chart-section {
      background: var(--surface-1);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 24px;
      margin-bottom: 24px;
      overflow: hidden;
      position: relative;
    }
    .mm-chart-section h2 {
      font-family: var(--font-display);
      font-size: 15px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 4px;
    }
    .mm-chart-section .mm-chart-subtitle {
      font-size: 12px;
      color: var(--text-muted);
      margin-bottom: 20px;
    }
    /* Sector-rotation data freshness badge — top-right of the RRG section.
       Relative age text + absolute ET time on hover (title tooltip). */
    .mm-rrg-updated {
      position: absolute;
      top: 22px;
      right: 24px;
      font-size: 11px;
      color: var(--text-muted);
      font-family: var(--font-mono, var(--font-display));
      letter-spacing: 0.02em;
      white-space: nowrap;
      cursor: help;
    }
    .mm-canvas-wrap {
      position: relative;
      width: 100%;
      overflow: hidden;
    }
    .mm-canvas-wrap canvas {
      display: block;
      width: 100%;
      height: auto;
    }

    /* RRG Legend (quadrant buckets) */
    .mm-rrg-legend {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid var(--border);
    }
    .mm-rrg-bucket {
      background: rgba(255,255,255,0.015);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 10px 12px 12px;
      display: flex;
      flex-direction: column;
      min-height: 84px;
    }
    .mm-rrg-bucket-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      margin-bottom: 8px;
    }
    .mm-rrg-bucket-title {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }
    .mm-rrg-bucket-count {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 500;
      color: var(--text-muted);
    }
    .mm-rrg-bucket-empty {
      font-size: 12px;
      color: var(--text-faint, #475569);
    }
    .mm-rrg-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .mm-rrg-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 9px 4px 7px;
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--border-alt, #263045);
      border-radius: 999px;
      font-size: 11px;
      color: var(--text-primary);
      cursor: default;
      white-space: nowrap;
      transition: transform .12s ease, background .12s ease;
    }
    .mm-rrg-chip:hover {
      background: rgba(255,255,255,0.07);
      transform: translateY(-1px);
    }
    .mm-rrg-chip-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .mm-rrg-chip-ticker {
      font-family: var(--font-mono);
      font-weight: 500;
      color: var(--text-primary);
    }
    .mm-rrg-chip-sep {
      color: var(--text-muted);
      margin: 0 1px;
    }
    .mm-rrg-chip-name {
      color: var(--text-secondary);
      font-weight: 400;
    }
    @media (max-width: 1200px) { .mm-rrg-legend { grid-template-columns: repeat(2, 1fr); } }

    /* RRG Tooltip */
    .mm-rrg-tooltip {
      position: absolute;
      pointer-events: none;
      background: rgba(11,17,32,0.95);
      border: 1px solid var(--border-alt, #263045);
      border-radius: 8px;
      padding: 10px 14px;
      font-size: 12px;
      color: var(--text-primary);
      display: none;
      z-index: 10;
      backdrop-filter: blur(8px);
      min-width: 160px;
    }
    .mm-rrg-tooltip .mm-tt-ticker {
      font-family: var(--font-mono);
      font-weight: 600;
      font-size: 13px;
      margin-bottom: 2px;
    }
    .mm-rrg-tooltip .mm-tt-name {
      font-size: 11px;
      color: var(--text-muted);
      margin-bottom: 8px;
    }
    .mm-rrg-tooltip .mm-tt-row {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 2px;
    }
    .mm-rrg-tooltip .mm-tt-label {
      color: var(--text-muted);
      font-size: 11px;
    }
    .mm-rrg-tooltip .mm-tt-val {
      font-family: var(--font-mono);
      font-weight: 500;
      font-size: 12px;
    }
    .mm-rrg-tooltip .mm-tt-quadrant {
      margin-top: 6px;
      padding-top: 6px;
      border-top: 1px solid var(--border);
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    /* Sector Performance Table */
    .mm-perf-table-section {
      background: var(--surface-1);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 24px;
      margin-bottom: 24px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .mm-perf-table-section h2 {
      font-family: var(--font-display);
      font-size: 15px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 4px;
    }
    .mm-perf-subtitle {
      font-size: 12px;
      color: var(--text-muted);
      margin-bottom: 16px;
    }
    .mm-perf-table {
      width: 100%;
      min-width: 540px;
      border-collapse: collapse;
      font-size: 13px;
    }
    .mm-perf-table thead th {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      color: var(--text-muted);
      padding: 10px 12px;
      text-align: center;
      border-bottom: 1px solid var(--border);
      white-space: nowrap;
    }
    .mm-perf-table thead th:first-child {
      text-align: left;
      min-width: 120px;
    }
    .mm-perf-table tbody tr {
      border-bottom: 1px solid var(--border);
      transition: background 0.15s;
    }
    .mm-perf-table tbody tr:hover {
      background: var(--surface-2);
    }
    .mm-perf-table tbody tr:last-child {
      border-bottom: none;
    }
    .mm-perf-table td {
      padding: 10px 12px;
      text-align: center;
      font-family: var(--font-mono);
      font-size: 13px;
      font-weight: 500;
    }
    .mm-perf-table td:first-child {
      text-align: left;
      font-family: var(--font-display);
      font-weight: 500;
      color: var(--text-primary);
    }
    .mm-perf-table td:first-child .mm-sector-dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin-right: 8px;
      vertical-align: middle;
    }
    .mm-perf-cell {
      display: inline-block;
      padding: 3px 10px;
      border-radius: 4px;
      min-width: 68px;
      text-align: center;
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 500;
    }

    /* Portfolio Impact */
    .mm-impact-section {
      background: var(--surface-1);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 24px;
      margin-bottom: 24px;
    }
    .mm-impact-section h2 {
      font-family: var(--font-display);
      font-size: 15px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 4px;
    }
    .mm-impact-subtitle {
      font-size: 12px;
      color: var(--text-muted);
      margin-bottom: 20px;
    }
    .mm-impact-advice {
      background: rgba(16,185,129,0.12);
      border: 1px solid rgba(16,185,129,0.2);
      border-radius: 8px;
      padding: 16px 20px;
      margin-bottom: 20px;
    }
    .mm-impact-advice p {
      font-size: 13px;
      color: var(--text-secondary);
      line-height: 1.6;
    }
    .mm-impact-advice strong {
      color: var(--emerald-bright, #34D399);
    }
    .mm-watchlist-picks {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-bottom: 20px;
    }
    .mm-pick-card {
      background: var(--bg-base);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 16px;
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .mm-pick-ticker {
      font-family: var(--font-mono);
      font-size: 14px;
      font-weight: 600;
      color: var(--blue);
      background: rgba(59,130,246,0.15);
      padding: 4px 10px;
      border-radius: 5px;
    }
    .mm-pick-info {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .mm-pick-score {
      font-family: var(--font-mono);
      font-size: 18px;
      font-weight: 600;
      color: var(--text-primary);
    }
    .mm-pick-label {
      font-size: 11px;
      color: var(--text-muted);
    }
    .mm-regime-alignment {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 18px;
      background: var(--bg-base);
      border: 1px solid var(--border);
      border-radius: 8px;
    }
    .mm-alignment-label {
      font-size: 12px;
      color: var(--text-secondary);
    }
    .mm-alignment-value {
      font-family: var(--font-mono);
      font-size: 16px;
      font-weight: 600;
      color: var(--emerald);
    }
    .mm-alignment-bar-track {
      flex: 1;
      height: 8px;
      background: var(--border);
      border-radius: 4px;
      overflow: hidden;
    }
    .mm-alignment-bar-fill {
      height: 100%;
      border-radius: 4px;
      background: var(--emerald);
    }

    @media (max-width: 900px) {
      .mm-signal-grid { grid-template-columns: repeat(2, 1fr); }
      .mm-watchlist-picks { grid-template-columns: repeat(2, 1fr); }
      .mm-regime-card { gap: 20px; }
    }
    @media (max-width: 600px) {
      .mm-signal-grid { grid-template-columns: 1fr; }
      .mm-watchlist-picks { grid-template-columns: 1fr; }
      .mm-regime-card { padding: 20px 16px; }
    }


    /* ========================== RADAR PAGE STYLES ========================== */
    .radar-main-container {
      display: flex;
      gap: 28px;
      align-items: flex-start;
      margin-bottom: 8px;
    }
    .radar-visual-container {
      position: relative;
      width: 560px;
      min-width: 560px;
      height: 560px;
    }
    .radar-svg { width: 100%; height: 100%; }

    @keyframes radarSweepAnim {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    .radar-sweep-arm {
      transform-origin: 220px 220px;
      animation: radarSweepAnim 8s linear infinite;
    }
    .radar-blip { cursor: pointer; transition: transform 0.2s; transform-box: fill-box; transform-origin: center; }
    .radar-blip:hover { transform: scale(1.3); }

    .radar-right-panel {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 16px;
      min-width: 0;
    }
    .radar-legend-container {
      display: flex;
      flex-direction: column;
      gap: 5px;
      max-height: 480px;
      overflow-y: auto;
    }
    .radar-legend-container::-webkit-scrollbar { width: 4px; }
    .radar-legend-container::-webkit-scrollbar-track { background: transparent; }
    .radar-legend-container::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

    .radar-legend-title {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 14px;
      color: var(--text-primary);
      margin-bottom: 4px;
    }
    .radar-legend-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 7px 12px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 6px;
      transition: border-color 0.2s, background 0.2s;
    }
    .radar-legend-item:hover {
      border-color: var(--blue);
      background: var(--surface-2);
    }
    .radar-legend-ticker {
      font-family: var(--font-mono);
      font-weight: 600;
      font-size: 12px;
      color: var(--text-primary);
      min-width: 42px;
    }
    .radar-legend-event {
      font-size: 11px;
      color: var(--text-secondary);
      flex: 1;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .radar-legend-days {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 600;
      white-space: nowrap;
    }
    .radar-days-critical { color: var(--red); }
    .radar-days-soon { color: var(--amber); }
    .radar-days-normal { color: var(--text-muted); }

    /* Quadrant key */
    .radar-quadrant-key {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 12px 14px;
    }
    .radar-qk-title {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.06em;
      color: var(--text-muted);
      text-transform: uppercase;
      margin-bottom: 8px;
    }
    .radar-qk-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
    }
    .radar-qk-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      color: var(--text-secondary);
    }
    .radar-qk-swatch {
      width: 14px;
      height: 14px;
      border-radius: 3px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 8px;
      font-weight: 700;
      flex-shrink: 0;
    }
    .radar-blip-key {
      display: flex;
      gap: 14px;
      align-items: center;
      margin-top: 8px;
      flex-wrap: wrap;
    }
    .radar-bk-item {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 10px;
      color: var(--text-muted);
      font-family: var(--font-mono);
    }

    .radar-divider {
      height: 1px;
      background: var(--border);
      margin: 32px 0;
    }

    /* Macro calendar within radar tab */
    .radar-macro-timeline {
      position: relative;
      padding-left: 24px;
    }
    .radar-macro-timeline::before {
      content: '';
      position: absolute;
      left: 7px;
      top: 0;
      bottom: 0;
      width: 2px;
      background: var(--border);
    }
    .radar-macro-week {
      position: relative;
      margin-bottom: 24px;
    }
    .radar-macro-week-label {
      position: relative;
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.05em;
      color: var(--text-muted);
      text-transform: uppercase;
      margin-bottom: 12px;
      padding-left: 8px;
    }
    .radar-macro-week-label::before {
      content: '';
      position: absolute;
      left: -20px;
      top: 50%;
      transform: translateY(-50%);
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--surface);
      border: 2px solid var(--blue);
    }
    .radar-macro-events-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
      gap: 10px;
    }
    .radar-macro-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 12px 14px;
      transition: border-color 0.2s;
    }
    .radar-macro-card:hover { border-color: var(--blue); }
    .radar-macro-card-top {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 8px;
    }
    .radar-macro-icon {
      width: 32px;
      height: 32px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 600;
      font-family: var(--font-mono);
      flex-shrink: 0;
    }
    .radar-macro-info { flex: 1; min-width: 0; }
    .radar-macro-name {
      font-size: 13px;
      font-weight: 500;
      color: var(--text-primary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .radar-macro-date {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--text-muted);
    }
    .radar-macro-impact {
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 0.05em;
      padding: 2px 6px;
      border-radius: 3px;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .radar-macro-data-row {
      display: flex;
      gap: 16px;
      margin-top: 6px;
      padding-top: 6px;
      border-top: 1px solid rgba(30,41,59,0.5);
    }
    .radar-macro-data-item {
      display: flex;
      flex-direction: column;
      gap: 1px;
    }
    .radar-macro-data-label {
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-faint);
      font-family: var(--font-mono);
    }
    .radar-macro-data-val {
      font-family: var(--font-mono);
      font-size: 13px;
      font-weight: 600;
      color: var(--text-primary);
    }

    /* Macro icon colors (reuse from existing) */
    .macro-icon-fed { background: rgba(139,92,246,0.15); color: var(--purple); }
    .macro-icon-cpi { background: rgba(236,72,153,0.15); color: var(--pink); }
    .macro-icon-jobs { background: rgba(59,130,246,0.15); color: var(--blue); }
    .macro-icon-gdp { background: rgba(16,185,129,0.15); color: var(--emerald); }
    .macro-icon-ppi { background: rgba(245,158,11,0.15); color: var(--amber); }
    .macro-icon-pce { background: rgba(236,72,153,0.15); color: var(--pink); }

    @media (max-width: 1060px) {
      .radar-main-container { flex-direction: column; align-items: center; }
      .radar-visual-container { width: 440px; min-width: 440px; height: 440px; }
      .radar-right-panel { max-width: 100%; }
    }

    /* ================================================================
       TOP MOVERS WIDGET
       ================================================================ */
    .movers-section { margin: 24px 0; }
    .movers-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }
    .movers-title {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      color: var(--text-primary);
    }
    .movers-summary {
      font-size: 12px;
      color: var(--text-muted);
      font-family: var(--font-mono);
    }
    .movers-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    @media (max-width: 700px) {
      .movers-grid { grid-template-columns: 1fr; }
    }
    .movers-col-header {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 8px;
      padding-left: 4px;
    }
    .movers-col-header.gainers { color: var(--emerald); }
    .movers-col-header.losers { color: var(--red); }
    .movers-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 10px 14px;
      display: flex;
      align-items: center;
      gap: 12px;
      transition: border-color 0.15s;
      cursor: pointer;
    }
    .movers-card:hover { border-color: var(--blue); }
    .movers-card + .movers-card { margin-top: 6px; }
    .movers-rank {
      font-family: var(--font-mono);
      font-size: 10px;
      color: var(--text-muted);
      min-width: 14px;
      text-align: center;
    }
    .movers-ticker {
      font-family: var(--font-mono);
      font-weight: 600;
      font-size: 13px;
      color: var(--text-primary);
      min-width: 48px;
    }
    .movers-price {
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--text-secondary);
      min-width: 56px;
      text-align: right;
    }
    .movers-chg {
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 600;
      min-width: 52px;
      text-align: right;
    }
    .movers-chg.up { color: var(--emerald); }
    .movers-chg.down { color: var(--red); }
    .movers-range-wrap {
      flex: 1;
      min-width: 60px;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .movers-range-label {
      font-size: 9px;
      color: var(--text-muted);
      text-align: center;
      font-family: var(--font-mono);
    }
    .movers-range-bar {
      height: 4px;
      background: var(--border);
      border-radius: 2px;
      position: relative;
      overflow: visible;
    }
    .movers-range-fill {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      border-radius: 2px;
      background: linear-gradient(90deg, var(--blue-dim), var(--blue));
    }
    .movers-range-dot {
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--blue);
      border: 2px solid var(--surface);
      box-shadow: 0 0 4px rgba(59,130,246,0.4);
    }

    /* ================================================================
       TOP MOVERS v4 (tier labels + sparklines + signal badges)
       ================================================================ */
    .mv4-container {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      margin: 0;
    }
    .mv4-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px 20px;
      border-bottom: 1px solid var(--border);
    }
    .mv4-header-title {
      font-family: var(--font-display);
      font-size: 14px; font-weight: 700;
    }
    .mv4-header-summary {
      font-family: var(--font-mono);
      font-size: 11px; color: var(--text-muted);
    }
    .mv4-header-summary .up-ct { color: var(--emerald); font-weight: 600; }
    .mv4-header-summary .dn-ct { color: var(--red); font-weight: 600; }
    .mv4-grid { display: flex; flex-direction: column; }
    .mv4-col { padding: 14px 12px; overflow: hidden; }
    .mv4-col + .mv4-col { border-top: 1px solid var(--border); }
    .mv4-col-label {
      font-family: var(--font-body);
      font-size: 10px; font-weight: 600;
      letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--text-muted); margin-bottom: 10px;
      display: flex; align-items: center; gap: 6px;
    }
    .mv4-dot { width: 6px; height: 6px; border-radius: 50%; }
    .mv4-dot.green { background: var(--emerald); }
    .mv4-dot.red { background: var(--red); }
    .mv4-col-headers {
      display: grid;
      grid-template-columns: 2.4fr 2.8fr 2fr 3fr 2fr 2.2fr; /* Signal column removed */
      gap: 6px; padding: 0 10px 6px;
    }
    .mv4-col-h {
      font-family: var(--font-body);
      font-size: 8.5px; font-weight: 600;
      letter-spacing: 0.03em; text-transform: uppercase;
      color: var(--text-muted);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .mv4-col-h.right { text-align: right; }
    .mv4-row {
      display: grid;
      grid-template-columns: 2.4fr 2.8fr 2fr 3fr 2fr 2.2fr; /* Signal column removed */
      gap: 6px; align-items: center;
      padding: 9px 10px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      margin-bottom: 5px; cursor: pointer;
      transition: border-color 0.15s, background 0.15s;
    }
    .mv4-row:hover { border-color: rgba(255,255,255,0.12); background: var(--surface-2); }
    .mv4-ticker { font-family: var(--font-mono); font-size: 13px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mv4-price { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mv4-spark { padding-right: 4px; }
    .mv4-spark svg { width: 70px; height: 20px; }
    .mv4-tier {
      font-family: var(--font-mono);
      font-size: 9px; font-weight: 700;
      letter-spacing: 0.02em;
      white-space: nowrap;
    }
    .mv4-signal {
      font-family: var(--font-mono);
      font-size: 8px; font-weight: 700;
      letter-spacing: 0.03em;
      padding: 3px 6px; border-radius: 3px;
      text-align: center; white-space: nowrap;
    }
    .mv4-signal.buy-zone { background: var(--emerald-dim); color: var(--emerald); }
    .mv4-signal.buy-approaching { background: rgba(52,211,153,0.08); color: #34D399; }
    .mv4-signal.sell-zone { background: rgba(239,68,68,0.12); color: var(--red); }
    .mv4-signal.sell-approaching { background: rgba(245,158,11,0.08); color: var(--amber); }
    .mv4-signal.watching { background: rgba(55,65,81,0.5); color: var(--text-muted); }
    .mv4-signal.buy-sell-zone { background: rgba(100,116,139,0.12); color: var(--text-muted); }
    .mv4-signal.buy-sell-approaching { background: rgba(16,185,129,0.08); color: rgba(16,185,129,0.7); }
    .mv4-chg { font-family: var(--font-mono); font-size: 12px; font-weight: 700; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mv4-chg.positive { color: var(--emerald); }
    .mv4-chg.negative { color: var(--red); }
    .mv4-footer {
      padding: 10px 16px; border-top: 1px solid var(--border);
      text-align: center; font-size: 10px; color: var(--text-muted); font-style: italic;
    }
    @media (max-width: 768px) {
      .mv4-col-headers, .mv4-row {
        gap: 4px;
      }
      .mv4-ticker { font-size: 12px; }
      .mv4-price { font-size: 10px; }
      .mv4-chg { font-size: 11px; }
    }
    @media (max-width: 900px) {
      .mv4-col + .mv4-col { border-top: 1px solid var(--border); }
      .mv4-ticker { font-size: 13px; }
      .mv4-price { font-size: 11px; }
      .mv4-chg { font-size: 12px; }
    }
    /* Signal column removed from grid — mobile override no longer needed */

    /* ================================================================
       NEWS FEED
       ================================================================ */
    .newsfeed-container { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-sizing: border-box; }
    .newsfeed-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
    .newsfeed-title-group { display: flex; align-items: center; gap: 10px; }
    .newsfeed-title { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--text-primary); }
    .newsfeed-powered { font-size: 11px; color: var(--text-faint); }
    .newsfeed-list { overflow-y: auto; }
    .nf-row { display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-top: 1px solid var(--border); cursor: pointer; transition: background 150ms; }
    .nf-row:hover { background: var(--surface-2); }
    .nf-ticker-badge { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--text-primary); background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 4px 8px; min-width: 52px; text-align: center; flex-shrink: 0; }
    .nf-content { flex: 1; min-width: 0; }
    .nf-headline { font-size: 14px; font-weight: 500; color: var(--text-primary); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .nf-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
    .nf-sentiment { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; padding: 4px 12px; border-radius: 4px; flex-shrink: 0; text-align: center; min-width: 72px; }
    .nf-sentiment.bullish { background: var(--emerald-dim); color: var(--emerald); }
    .nf-sentiment.bearish { background: var(--red-dim); color: var(--red); }
    .nf-sentiment.neutral { background: rgba(55,65,81,0.5); color: var(--text-muted); }

    /* ================================================================
       NEWS + MOVERS 1:1 SPLIT
       ================================================================ */
    .dash-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; align-items: stretch; }
    .dash-split > .mv4-container { overflow: hidden; }
    .dash-split > .newsfeed-container { display: flex; flex-direction: column; overflow: hidden; }
    .dash-split > .newsfeed-container .newsfeed-list { flex: 1 1 0; overflow-y: auto; min-height: 0; }
    @media (max-width: 1100px) { .dash-split { grid-template-columns: 1fr; } }

    /* ================================================================
       NEWS SLIDE-OUT PANEL
       ================================================================ */
    .panel-backdrop {
      position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 999;
      opacity: 0; pointer-events: none; transition: opacity 250ms var(--ease);
    }
    .panel-backdrop.open { opacity: 1; pointer-events: auto; }
    .panel-drawer {
      position: fixed; right: 0; top: 0; height: 100vh; width: 480px;
      background: var(--surface); border-left: 1px solid var(--border);
      z-index: 1000; transform: translateX(100%); transition: transform 300ms var(--ease);
      display: flex; flex-direction: column; overflow-y: auto;
    }
    .panel-drawer.open { transform: translateX(0); }
    .panel-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 24px 24px 16px; border-bottom: 1px solid var(--border); }
    .panel-header-left { flex: 1; min-width: 0; }
    .panel-header-ticker { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--text-primary); background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 4px 8px; display: inline-block; margin-bottom: 10px; }
    .panel-header-headline { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--text-primary); line-height: 1.3; }
    .panel-close { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--text-muted); flex-shrink: 0; margin-left: 8px; font-size: 20px; transition: background 150ms, color 150ms; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .panel-close:hover { background: var(--surface-2); color: var(--text-primary); }
    .panel-body { padding: 24px; flex: 1; }
    .panel-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
    .panel-meta-source { font-size: 12px; color: var(--text-muted); }
    .panel-meta-sentiment { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; padding: 4px 12px; border-radius: 4px; }
    .panel-meta-sentiment.bullish { background: var(--emerald-dim); color: var(--emerald); }
    .panel-meta-sentiment.bearish { background: var(--red-dim); color: var(--red); }
    .panel-meta-sentiment.neutral { background: rgba(55,65,81,0.5); color: var(--text-muted); }
    .panel-text { font-size: 14px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 16px; }
    .panel-read-more { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 12px; color: var(--blue); margin-top: 8px; cursor: pointer; }
    .panel-read-more:hover { text-decoration: underline; }
    @media (max-width: 600px) { .panel-drawer { width: 100%; padding-bottom: 72px; } }

    /* ================================================================
       VIX + FOMC RADAR WIDGETS
       ================================================================ */
    .radar-widget-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
    .radar-widget-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
    .radar-widget-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
    .radar-widget-title { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
    .radar-widget-tag { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--text-faint); }
    .vix-value-row { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
    .vix-big { font-family: var(--font-mono); font-size: 36px; font-weight: 600; color: var(--text-primary); line-height: 1; }
    .vix-status-badge { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; padding: 4px 10px; border-radius: 4px; }
    .vix-status-badge.elevated { background: var(--amber-dim); color: var(--amber); }
    .vix-status-badge.low { background: var(--emerald-dim); color: var(--emerald); }
    .vix-status-badge.high { background: var(--red-dim); color: var(--red); }
    .vix-change { font-family: var(--font-mono); font-size: 13px; font-weight: 600; margin-left: auto; }
    .vix-change.up { color: var(--red); }
    .vix-change.down { color: var(--emerald); }
    .vix-range-bar { height: 8px; border-radius: 4px; position: relative; margin: 12px 0 8px; background: linear-gradient(to right, #10B981 0%, #10B981 2%, #3B82F6 6%, #3B82F6 14%, #F59E0B 20%, #F97316 35%, #EF4444 45%, #EF4444 100%); }
    .vix-range-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--amber); border: 2px solid var(--text-primary); position: absolute; top: -2px; transform: translateX(-50%); }
    .vix-range-labels { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }
    .fomc-main-row { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
    .fomc-date-big { font-family: var(--font-mono); font-size: 28px; font-weight: 600; color: var(--text-primary); line-height: 1.2; }
    .fomc-date-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
    .fomc-countdown { text-align: right; }
    .fomc-countdown-num { font-family: var(--font-mono); font-size: 36px; font-weight: 700; color: var(--red); line-height: 1; }
    .fomc-countdown-label { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-top: 2px; }
    .fomc-stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
    .fomc-stat-label { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
    .fomc-stat-value { font-family: var(--font-mono); font-size: 16px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
    .fomc-prob-badge { font-family: var(--font-mono); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; background: var(--emerald-dim); color: var(--emerald); }
    .fomc-decisions-label { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
    .fomc-decisions-table { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
    .fomc-dec-cell { padding: 8px 6px; text-align: center; border-right: 1px solid var(--border); }
    .fomc-dec-cell:last-child { border-right: none; }
    .fomc-dec-cell.header-cell { font-size: 11px; font-weight: 600; color: var(--text-muted); border-bottom: 1px solid var(--border); background: var(--surface-2); }
    .fomc-dec-cell.value-cell { font-family: var(--font-mono); font-size: 12px; font-weight: 700; }
    .fomc-dec-cell.value-cell.cut { color: var(--emerald); }
    .fomc-dec-cell.value-cell.hold { color: var(--text-secondary); }
    .fomc-dec-cell.value-cell.upcoming { color: var(--blue); background: var(--blue-dim); border-bottom: 2px solid var(--blue); }
    .fomc-dec-cell.header-cell.upcoming-header { color: var(--blue); background: var(--blue-dim); }
    @media (max-width: 900px) { .radar-widget-row { grid-template-columns: 1fr; } }

    /* Widget classes (matching approved mockup-radar-v2) */
    .widget-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
    .widget-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
    .widget-top-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
    .widget-top-title { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
    .widget-top-tag { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--text-faint); }
    .vix-trend-label { font-size: 11px; color: var(--text-faint); margin: 12px 0 6px; }
    .vix-trend-chart { width: 100%; height: 60px; margin-bottom: 16px; }
    .vix-trend-chart svg { width: 100%; height: 100%; }
    .vix-range-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
    .vix-range-label { font-size: 12px; color: var(--text-secondary); }
    .vix-range-values { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--text-primary); }
    .vix-legend { display: flex; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
    .vix-legend-item { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; color: var(--text-muted); }
    .vix-legend-dot { width: 6px; height: 6px; border-radius: 50%; }
    @media (max-width: 900px) { .widget-row { grid-template-columns: 1fr; } }

    /* ================================================================
       PRE-EARNINGS: Last 4 Earnings dots
       ================================================================ */
    .pre-er-history { margin-top: 10px; }
    .pre-er-history-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
    .pre-er-history-row { display: flex; gap: 6px; }
    .pre-er-dot { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 9px; font-weight: 700; }
    .pre-er-dot.beat { background: var(--emerald-dim); color: var(--emerald); }
    .pre-er-dot.miss { background: var(--red-dim); color: var(--red); }
    .pre-er-dot.inline { background: rgba(55,65,81,0.5); color: var(--text-muted); }

    /* Earnings timing badge (PRE / AFTER) with CSS tooltip */
    .er-timing-badge {
      position: relative;
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.06em;
      padding: 1px 6px;
      border-radius: 3px;
      cursor: help;
    }
    .er-timing-badge::after {
      content: attr(data-tooltip);
      position: absolute;
      bottom: calc(100% + 6px);
      left: 50%;
      transform: translateX(-50%);
      background: #1E293B;
      color: #F1F5F9;
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.02em;
      padding: 4px 8px;
      border-radius: 4px;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 150ms ease;
      z-index: 100;
    }
    .er-timing-badge:hover::after { opacity: 1; }
    @media (max-width: 768px) {
      .er-timing-badge::after {
        white-space: normal;
        max-width: calc(100vw - 32px);
        left: 0; right: auto; transform: none;
      }
    }

    /* ================================================================
       BENCHMARK PAGE
       ================================================================ */
    .benchmark-page { max-width: 1100px; }
    .benchmark-title {
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 4px;
    }
    .benchmark-subtitle {
      font-size: 13px;
      color: var(--text-muted);
      margin-bottom: 20px;
    }
    .benchmark-timeframe-bar {
      display: flex;
      gap: 6px;
      margin-bottom: 20px;
    }
    .benchmark-tf-btn {
      padding: 6px 14px;
      font-size: 12px;
      font-weight: 600;
      font-family: var(--font-body);
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      background: transparent;
      color: var(--text-muted);
      cursor: pointer;
      transition: all 0.15s;
    }
    .benchmark-tf-btn:hover { color: var(--text-primary); border-color: var(--text-muted); }
    .benchmark-tf-btn.active {
      background: var(--blue);
      color: #fff;
      border-color: var(--blue);
    }
    .benchmark-chart-wrap {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 20px;
      margin-bottom: 20px;
    }
    .benchmark-chart-container {
      position: relative;
      width: 100%;
      overflow: hidden;
    }
    .benchmark-chart-container canvas {
      display: block;
      max-height: 480px;
    }
    .benchmark-legend {
      display: flex;
      gap: 20px;
      margin-bottom: 16px;
      flex-wrap: wrap;
    }
    .benchmark-legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--text-secondary);
    }
    .benchmark-legend-swatch {
      width: 24px;
      height: 3px;
      border-radius: 2px;
    }
    .benchmark-stats-row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
      gap: 12px;
      margin-bottom: 20px;
    }
    .benchmark-stat-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 14px 16px;
      text-align: center;
    }
    .benchmark-stat-label {
      font-size: 11px;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: 4px;
    }
    .benchmark-stat-value {
      font-family: var(--font-mono);
      font-size: 18px;
      font-weight: 700;
      color: var(--text-primary);
    }
    .benchmark-stat-value.positive { color: var(--emerald); }
    .benchmark-stat-value.negative { color: var(--red); }
    .benchmark-note {
      font-size: 12px;
      color: var(--text-muted);
      font-style: italic;
      line-height: 1.6;
      padding: 12px 16px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      margin-bottom: 16px;
    }
    .benchmark-disclaimer {
      font-size: 11px;
      color: var(--text-muted);
      text-align: center;
      padding: 12px 0;
      border-top: 1px solid var(--border);
      margin-top: 8px;
    }

    /* ================================================================
       SIDEBAR DISCLAIMER
       ================================================================ */
    .sidebar-disclaimer {
      padding: 6px 12px;
      margin: 0 8px 6px;
      font-size: 9px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      line-height: 1.5;
      color: var(--text-muted);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: rgba(255,255,255,0.02);
      text-align: center;
    }

    /* Hide mobile-only elements on desktop */
    .m-bottombar,
    .m-tools-overlay,
    .m-tools-popup { display: none; }

    /* ================================================================
       MOBILE: Bottom Tab Bar, Tools Popup, Layout Overrides
       All mobile-only styles in a single @media block at max-width: 768px
       ================================================================ */
    @media (max-width: 768px) {

      /* --- Bottom Tab Bar --- */
      .m-bottombar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        padding: 10px 0 max(calc(env(safe-area-inset-bottom, 12px) + 6px), 18px);
        background: var(--surface);
        border-top: 1px solid var(--border);
        z-index: 100;
      }
      /* Hide m-bottombar when PWA standalone nav is active */
      body.pwa-standalone .m-bottombar { display: none; }
      .m-bottombar .m-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        font-size: 10px;
        text-align: center;
        color: var(--text-muted);
        font-family: var(--font-body);
        font-weight: 500;
        cursor: pointer;
        background: none;
        border: none;
        padding: 4px 8px;
        -webkit-tap-highlight-color: transparent;
      }
      .m-bottombar .m-tab.active { color: var(--blue); }
      .m-bottombar .m-tab svg { width: 20px; height: 20px; }

      /* --- Tools Popup Overlay --- */
      .m-tools-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.4);
        z-index: 9100;
      }
      .m-tools-overlay.visible { display: block; }

      /* --- Tools Popup --- */
      .m-tools-popup {
        display: none;
        position: fixed;
        bottom: 80px;
        left: 8px;
        right: 8px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 12px;
        z-index: 9200;
        box-shadow: 0 -8px 32px rgba(0,0,0,0.5);
      }
      .m-tools-popup.visible { display: block; }
      .m-tools-popup .popup-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--border);
      }
      .m-tools-popup .popup-header span {
        font-family: var(--font-display);
        font-size: 14px;
        font-weight: 700;
        color: var(--text-primary);
      }
      .m-tools-popup .popup-close {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-muted);
        cursor: pointer;
        background: none;
        border: none;
      }
      .m-tools-popup .popup-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }
      .m-tools-popup .popup-item {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 12px;
        background: var(--surface-2);
        border-radius: var(--radius-sm);
        color: var(--text-secondary);
        font-size: 12px;
        font-weight: 500;
        font-family: var(--font-body);
        cursor: pointer;
        border: none;
      }
      .m-tools-popup .popup-item svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        color: var(--blue);
      }

      /* --- Top bar compact --- */
      .topbar { padding-left: 60px; padding-right: 16px; }
      .topbar-title { display: none; }
      .topbar-right { position: absolute; right: 16px; }
      .topbar-right .btn-ghost { display: none; }
      .topbar-right .btn-primary { display: none; }
      .ws-status span { font-size: 9px; }

      /* --- Sentiment bar: viewport-centered on mobile with label below --- */
      .topbar-center {
        position: fixed;
        top: 0;
        left: 50vw;
        transform: translateX(-50%);
        height: 48px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        padding-bottom: 6px;
        gap: 0px;
        z-index: 51;
        pointer-events: none;
      }
      .sentiment-label { display: none; }
      .sentiment-score-label { font-size: 7px; letter-spacing: 0.06em; opacity: 0.7; }
      .sentiment-bar { gap: 2px; }
      .sentiment-bar .sblock { width: 7px; height: 7px; }

      /* --- Join Tangency button in sidebar drawer --- */
      .sidebar-join-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 9px 12px;
        border-radius: var(--radius-sm);
        background: var(--blue);
        color: #fff;
        font-size: 13px;
        font-weight: 600;
        width: 100%;
        margin-bottom: 8px;
        transition: all 150ms var(--ease);
        border: none;
        cursor: pointer;
      }
      .sidebar-join-btn:hover {
        background: var(--blue-hover);
        box-shadow: 0 0 20px var(--blue-glow);
      }

      /* --- Detail panel full-width on mobile --- */
      .detail-panel { width: 100vw; padding-bottom: 72px; }
      .detail-header { padding-right: 16px; }

      /* --- Body padding for bottom bar --- */
      .main { padding-bottom: 64px; }

      /* --- KPI tooltip: constrain within viewport on mobile --- */
      .kpi-card[data-tooltip]::after {
        white-space: normal;
        max-width: calc(100vw - 32px);
        left: 0;
        right: auto;
        transform: none;
      }

      /* --- KPI 8-card: 2x4 grid on mobile --- */
      .kpi-row-8 { grid-template-columns: repeat(2, 1fr); gap: 8px; }

      /* --- Dash split: stack vertically --- */
      .dash-split { grid-template-columns: 1fr; }

      /* --- Alert grid full-width --- */
      .alert-grid { grid-template-columns: 1fr; }

      /* --- News feed: show all items vertically on mobile (no scroll) --- */
      .newsfeed-list { max-height: none !important; overflow-y: visible !important; }
      .dash-split > .newsfeed-container { overflow: visible; height: auto !important; max-height: none !important; }
      .dash-split > .newsfeed-container .newsfeed-list { flex: none; overflow-y: visible; }

      /* --- Radar widget row stack on mobile --- */
      .radar-widget-row { grid-template-columns: 1fr; }

      /* --- RRG chart: maximize size on mobile --- */
      .mm-chart-section { padding: 12px; }
      .mm-chart-section .mm-chart-subtitle { font-size: 11px; margin-bottom: 12px; }

      /* --- RRG legend buckets: stack vertically on mobile --- */
      .mm-rrg-legend { grid-template-columns: 1fr; gap: 10px; }

      /* --- Radar SVG: fit viewport instead of fixed 440px --- */
      .radar-visual-container { width: 100% !important; min-width: 0 !important; max-width: 440px; height: auto !important; aspect-ratio: 1 / 1; }

      /* --- Prevent horizontal wiggle on all pages --- */
      .main { overflow-x: hidden; }

      /* --- Algorithm Score page mobile fixes --- */
      .sa-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 16px 16px 14px;
      }
      .sa-page-header .sa-subtitle {
        margin-left: 0;
        font-size: 12px;
      }
      .sa-content {
        padding: 16px;
      }
      .guide-tier {
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px 12px;
      }
      .tier-range {
        min-width: 60px;
        font-size: 13px;
      }
      .tier-name {
        min-width: unset;
        font-size: 13px;
      }
      .tier-desc {
        flex-basis: 100%;
        font-size: 12px;
        padding-left: 22px;
        margin-top: -2px;
      }
      .live-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
      }
      .dist-stats {
        flex-direction: row;
        gap: 12px;
      }
      .version-toggle-row {
        flex-wrap: wrap;
      }
    }

    /* ================================================================
       PWA INSTALL PROMPT
       ================================================================ */
    .pwa-install-banner {
      display: none;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 9999;
      background: var(--surface);
      border-top: 1px solid var(--border);
      border-radius: 16px 16px 0 0;
      padding: 20px 16px 16px;
      box-shadow: 0 -8px 40px rgba(0,0,0,0.5);
      animation: pwaSlideUp 0.4s var(--ease) forwards;
    }
    .pwa-install-banner.visible { display: block; }
    @keyframes pwaSlideUp {
      from { transform: translateY(100%); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }
    .pwa-install-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
    }
    .pwa-install-icon {
      width: 44px;
      height: 44px;
      background: linear-gradient(135deg, #3B82F6, #1D4ED8);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 14px;
      color: white;
      letter-spacing: -0.02em;
    }
    .pwa-install-title {
      font-family: var(--font-display);
      font-size: 14px;
      font-weight: 700;
      color: var(--text-primary);
    }
    .pwa-install-sub {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 1px;
    }
    .pwa-install-features {
      display: flex;
      flex-direction: column;
      gap: 5px;
      margin-bottom: 14px;
    }
    .pwa-install-feat {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      color: var(--text-secondary);
    }
    .pwa-install-feat::before {
      content: '';
      width: 5px;
      height: 5px;
      background: var(--blue);
      border-radius: 50%;
      flex-shrink: 0;
    }
    .pwa-install-actions {
      display: flex;
      gap: 8px;
    }
    .pwa-install-btn {
      flex: 1;
      padding: 10px 0;
      border: none;
      border-radius: var(--radius-sm);
      background: var(--blue);
      color: white;
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
    }
    .pwa-install-btn:hover { background: var(--blue-hover); }
    .pwa-dismiss-btn {
      padding: 10px 16px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: transparent;
      color: var(--text-muted);
      font-family: var(--font-body);
      font-size: 12px;
      cursor: pointer;
    }
    /* iOS manual instructions */
    .pwa-ios-steps {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 14px;
    }
    .pwa-ios-step {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      color: var(--text-secondary);
    }
    .pwa-ios-num {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--blue-dim);
      color: var(--blue);
      font-size: 10px;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    /* ================================================================
       PWA STANDALONE BOTTOM NAV
       ================================================================ */
    .pwa-bottom-nav {
      display: none;
    }
    @media (display-mode: standalone) {
      .pwa-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9000;
        justify-content: space-evenly;
        align-items: center;
        padding: 10px 0 max(calc(env(safe-area-inset-bottom, 12px) + 6px), 18px);
        background: #1a2438;
        border-top: 1px solid rgba(148,163,184,0.15);
      }
      /* Only show on mobile in standalone */
      @media (min-width: 769px) {
        .pwa-bottom-nav { display: none; }
      }
      /* Add bottom padding to main content so it's not hidden behind nav */
      .main { padding-bottom: 60px; }
    }
    /* Also trigger via JS class for iOS standalone */
    body.pwa-standalone .pwa-bottom-nav {
      display: flex;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 9000;
      justify-content: space-evenly;
      align-items: center;
      padding: 10px 0 max(calc(env(safe-area-inset-bottom, 12px) + 6px), 18px);
      background: #1a2438;
      border-top: 1px solid rgba(148,163,184,0.15);
    }
    body.pwa-standalone .main { padding-bottom: 60px; }
    @media (min-width: 769px) {
      body.pwa-standalone .pwa-bottom-nav { display: none; }
      body.pwa-standalone .main { padding-bottom: 0; }
    }
    /* Mobile Safari (browser, not standalone) — show the same 5-tab nav so
       the Home/Pulse/Radar/Rankings/Tools dock is visible without installing
       the PWA. Hide the legacy .m-bottombar on the same breakpoint to avoid
       a doubled bar. Mirrors the standalone block above. */
    @media (max-width: 768px) {
      .pwa-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9000;
        justify-content: space-evenly;
        align-items: center;
        padding: 10px 0 max(calc(env(safe-area-inset-bottom, 12px) + 6px), 18px);
        background: #1a2438;
        border-top: 1px solid rgba(148,163,184,0.15);
      }
      .m-bottombar { display: none !important; }
      .main { padding-bottom: 60px; }
    }
    .pwa-nav-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      font-size: 9px;
      font-family: var(--font-body);
      color: var(--text-muted);
      text-decoration: none;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      padding: 4px 8px;
      border-radius: 6px;
      transition: color 0.15s;
    }
    .pwa-nav-item svg {
      width: 20px;
      height: 20px;
    }
    .pwa-nav-item.active {
      color: var(--blue);
    }
    .pwa-nav-item:active {
      color: var(--blue);
    }

    /* ================================================================
       PWA PULL-TO-REFRESH (standalone mode only)
       ================================================================ */
    .ptr-indicator {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 8999;
      height: 0;
      overflow: hidden;
      background: var(--bg);
      transition: height 0.2s ease;
    }
    body.pwa-standalone .ptr-indicator { display: block; }
    .ptr-indicator-inner {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 48px;
      color: var(--text-muted);
      font-size: 11px;
      font-family: var(--font-body);
      gap: 8px;
    }
    .ptr-spinner {
      width: 16px;
      height: 16px;
      border: 2px solid var(--border);
      border-top-color: var(--blue);
      border-radius: 50%;
      animation: ptr-spin 0.6s linear infinite;
      opacity: 0;
    }
    .ptr-indicator.pulling .ptr-spinner { opacity: 1; animation: none; }
    .ptr-indicator.refreshing .ptr-spinner { opacity: 1; }
    @keyframes ptr-spin {
      to { transform: rotate(360deg); }
    }

    /* ================================================================
       SETTINGS PAGE
       ================================================================ */
    .settings-wrap { max-width: 600px; }
    .settings-section {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      margin-bottom: 16px;
      overflow: hidden;
    }
    .settings-section-header {
      padding: 16px 20px 12px;
      display: flex; align-items: center; gap: 10px;
    }
    .settings-section-icon {
      width: 32px; height: 32px; border-radius: 8px;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
      background: rgba(59,130,246,0.08);
    }
    .settings-section-icon svg { width: 16px; height: 16px; color: var(--blue); }
    .settings-section-title { font-family: var(--font-display); font-size: 15px; font-weight: 600; }
    .settings-section-desc { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
    .settings-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 20px; border-top: 1px solid var(--border); gap: 12px;
    }
    .settings-row-label { font-size: 13px; font-weight: 500; }
    .settings-row-desc { font-size: 11px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }
    .settings-toggle {
      position: relative; width: 40px; height: 22px; flex-shrink: 0; cursor: pointer;
    }
    .settings-toggle input { display: none; }
    .settings-toggle-track {
      position: absolute; inset: 0; background: #2a2e3a; border-radius: 12px; transition: background 0.2s ease;
    }
    .settings-toggle-thumb {
      position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
      background: var(--text-muted); border-radius: 50%; transition: all 0.2s ease;
    }
    .settings-toggle input:checked + .settings-toggle-track { background: var(--blue); }
    .settings-toggle input:checked + .settings-toggle-track + .settings-toggle-thumb {
      left: 20px; background: #fff;
    }
    .settings-status {
      display: flex; align-items: center; gap: 6px;
      padding: 10px 20px; border-top: 1px solid var(--border);
      font-family: var(--font-mono); font-size: 10px; color: var(--text-muted);
    }
    .settings-status-dot {
      width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
    }
    .settings-status-dot.on { background: var(--emerald); }
    .settings-status-dot.off { background: var(--text-faint); }
    .settings-status-dot.blocked { background: var(--red); }
    .settings-footer {
      padding: 10px 20px 14px; font-size: 11px; color: var(--text-faint);
      line-height: 1.4; border-top: 1px solid var(--border);
    }
    .settings-account-btn {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 20px; border-top: 1px solid var(--border); cursor: pointer;
      transition: background 0.15s;
    }
    .settings-account-btn:hover { background: rgba(255,255,255,0.015); }
    .ios-install-banner {
      display: none; margin: 0 20px 14px; padding: 12px 14px;
      background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.2); border-radius: 8px;
      font-size: 12px; color: var(--text-secondary); line-height: 1.5;
    }
    .ios-install-banner strong { color: var(--amber); font-weight: 600; }
    @media (max-width: 768px) {
      .settings-row { padding: 12px 16px; }
      .settings-section-header { padding: 14px 16px 10px; }
    }

    /* ================================================================
       TOS / PRIVACY ACCEPTANCE GATE
       ================================================================ */
    .tos-overlay {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.75);
      backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
      z-index: 10000;
      display: none; align-items: center; justify-content: center;
      padding: 16px;
    }
    .tos-overlay.visible { display: flex; }
    .tos-card {
      background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
      width: 100%; max-width: 640px; max-height: 85vh;
      display: flex; flex-direction: column; overflow: hidden;
      animation: tosSlideUp 0.3s ease-out;
      position: relative;
    }
    .tos-close-btn {
      position: absolute; top: 12px; right: 12px; z-index: 1;
      width: 32px; height: 32px; border: none; border-radius: 8px;
      background: transparent; color: var(--text-muted);
      font-size: 22px; line-height: 1; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.15s, color 0.15s;
    }
    .tos-close-btn:hover { background: var(--surface-2); color: var(--text-primary); }
    @keyframes tosSlideUp {
      from { opacity: 0; transform: translateY(24px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .tos-header { padding: 28px 28px 0; text-align: center; flex-shrink: 0; }
    .tos-logo {
      font-family: var(--font-display); font-size: 16px; font-weight: 800;
      letter-spacing: 0.15em; color: var(--text-primary); margin-bottom: 12px;
    }
    .tos-logo span { color: var(--blue); }
    .tos-title {
      font-family: var(--font-display); font-size: 20px; font-weight: 700;
      color: var(--text-primary); margin-bottom: 6px;
    }
    .tos-subtitle { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 20px; }
    .tos-scroll-wrap {
      margin: 0 28px; border: 1px solid var(--border); border-radius: var(--radius);
      overflow: hidden; position: relative; flex: 1; min-height: 0;
    }
    .tos-scroll-inner {
      height: 50vh; overflow-y: auto; padding: 20px;
      scrollbar-width: thin; scrollbar-color: var(--border) transparent;
    }
    .tos-scroll-inner::-webkit-scrollbar { width: 5px; }
    .tos-scroll-inner::-webkit-scrollbar-track { background: transparent; }
    .tos-scroll-inner::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
    .tos-scroll-wrap::after {
      content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 48px;
      background: linear-gradient(transparent, var(--surface)); pointer-events: none; transition: opacity 0.3s;
    }
    .tos-scroll-wrap.scrolled-bottom::after { opacity: 0; }
    .tos-scroll-prompt {
      position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
      display: flex; align-items: center; gap: 6px;
      font-size: 11px; font-weight: 600; color: var(--blue); letter-spacing: 0.03em;
      z-index: 2; animation: tosBounce 2s infinite; transition: opacity 0.3s;
    }
    .tos-scroll-wrap.scrolled-bottom .tos-scroll-prompt { opacity: 0; pointer-events: none; }
    @keyframes tosBounce {
      0%, 100% { transform: translateX(-50%) translateY(0); }
      50% { transform: translateX(-50%) translateY(-4px); }
    }
    .tos-scroll-prompt svg { width: 14px; height: 14px; }
    .tos-legal h3 {
      font-family: var(--font-display); font-size: 13px; font-weight: 700;
      color: var(--text-primary); margin: 16px 0 8px; letter-spacing: 0.02em;
    }
    .tos-legal h3:first-child { margin-top: 0; }
    .tos-legal p { font-size: 12px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 10px; }
    .tos-legal strong { color: var(--text-primary); font-weight: 600; }
    .tos-legal .nfa-highlight {
      background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2);
      border-radius: 8px; padding: 14px 16px; margin: 0 0 16px;
    }
    .tos-legal .nfa-highlight p { color: var(--text-primary); font-weight: 500; }
    .tos-legal .nfa-label {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
      color: var(--red); text-transform: uppercase; margin-bottom: 8px;
    }
    .tos-legal a { color: var(--blue); text-decoration: none; }
    .tos-legal a:hover { text-decoration: underline; }
    .tos-legal .section-divider { border: none; border-top: 1px solid var(--border); margin: 20px 0; }
    .tos-footer { padding: 20px 28px 28px; flex-shrink: 0; }
    .tos-checkbox-row {
      display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; cursor: pointer;
    }
    .tos-checkbox-row input[type="checkbox"] {
      appearance: none; -webkit-appearance: none;
      width: 18px; height: 18px; min-width: 18px;
      border: 2px solid var(--border); border-radius: 4px;
      background: var(--surface-2); cursor: pointer;
      position: relative; margin-top: 1px; transition: all 0.15s;
    }
    .tos-checkbox-row input[type="checkbox"]:checked {
      background: var(--blue); border-color: var(--blue);
    }
    .tos-checkbox-row input[type="checkbox"]:checked::after {
      content: ''; position: absolute; left: 5px; top: 2px;
      width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0;
      transform: rotate(45deg);
    }
    .tos-checkbox-row input[type="checkbox"]:disabled { opacity: 0.35; cursor: not-allowed; }
    .tos-checkbox-label {
      font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; user-select: none;
    }
    .tos-checkbox-label a { color: var(--blue); text-decoration: none; }
    .tos-checkbox-label a:hover { text-decoration: underline; }
    .tos-accept-btn {
      width: 100%; padding: 13px; border: none; border-radius: var(--radius);
      background: var(--blue); color: #fff;
      font-family: var(--font-display); font-size: 14px; font-weight: 600;
      cursor: pointer; transition: all 0.15s; letter-spacing: 0.01em;
    }
    .tos-accept-btn:hover:not(:disabled) { background: var(--blue-hover); }
    .tos-accept-btn:disabled { opacity: 0.35; cursor: not-allowed; }
    .tos-footer-note { text-align: center; font-size: 11px; color: var(--text-muted); margin-top: 12px; }
    @media (max-width: 600px) {
      .tos-overlay { padding: 8px; align-items: flex-end; }
      .tos-card { max-width: 90vw; max-height: 95vh; border-radius: 16px 16px 0 0; }
      .tos-header { padding: 24px 20px 0; }
      .tos-scroll-wrap { margin: 0 20px; }
      .tos-scroll-inner { height: 40vh; padding: 16px; }
      .tos-footer { padding: 16px 20px 24px; }
    }


    /* ================================================================
       INTEL TAB — Sprint 5
       ================================================================ */
    /* Feed container */
    .intel-feed { max-width: 1400px; margin: 0 auto; }
    .intel-feed-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
    .intel-feed-header h2 { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--text-primary); margin: 0; }
    .intel-event-count { font-family: var(--font-mono); font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; background: rgba(59,130,246,0.12); color: var(--blue); letter-spacing: 0.03em; }
    .intel-filtered-count { color: rgba(255,255,255,0.3); font-size: 0.85em; font-weight: 400; }
    .intel-last-scan { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.35); margin-left: auto; letter-spacing: 0.02em; }

    /* Filter bar */
    .intel-filter-bar { display: flex; gap: 8px; margin-bottom: 24px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
    .intel-filter-chip { font-family: var(--font-mono); font-size: 11px; font-weight: 600; padding: 6px 16px; border-radius: 2px; border: 1px solid var(--border); background: rgba(255,255,255,0.03); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--text-secondary); cursor: pointer; transition: all 0.15s ease; white-space: nowrap; letter-spacing: 0.04em; text-transform: uppercase; } /* TAN-1036 (Matt 2026-07-09): square corners to match terminal pulse aesthetic */
    .intel-filter-chip:hover { border-color: var(--text-muted); color: var(--text-primary); }
    .intel-filter-chip.active { background: color-mix(in srgb, var(--blue) 4%, rgba(255,255,255,0.02)); border-color: color-mix(in srgb, var(--blue) 55%, var(--border)); color: color-mix(in srgb, var(--blue) 80%, var(--text-secondary)); } /* TAN-1051: muted even further (8%->4% tint, dimmed border/text) */
    /* TAN-975: color-coordinate pills to their alert-row gradients.
       HOLDINGS = navy->teal (teal holdings accent, #14b8a6);
       CONFLUENCE = navy->purple (purple confluence rows, #8B5CF6).
       Inactive = thin colored border hint; active = full navy->accent
       gradient fill + white text. ALL keeps the neutral blue style above. */
    .intel-filter-chip.chip-holdings { border-color: rgba(245,196,81,0.4); color: #F5C451; }
    .intel-filter-chip.chip-holdings:hover { border-color: #F5C451; color: #F5D98A; }
    .intel-filter-chip.chip-holdings.active { background: color-mix(in srgb, #F5C451 4%, rgba(255,255,255,0.02)); border-color: color-mix(in srgb, #F5C451 50%, var(--border)); color: color-mix(in srgb, #F5C451 75%, var(--text-secondary)); } /* TAN-1051: muted further (8%->4%) */
    .intel-filter-chip.chip-confluence { border-color: rgba(139,92,246,0.4); color: #a855f7; }
    .intel-filter-chip.chip-confluence:hover { border-color: #8B5CF6; color: #c4b5fd; }
    .intel-filter-chip.chip-confluence.active { background: color-mix(in srgb, #8B5CF6 4%, rgba(255,255,255,0.02)); border-color: color-mix(in srgb, #8B5CF6 50%, var(--border)); color: color-mix(in srgb, #a855f7 75%, var(--text-secondary)); } /* TAN-1051: muted further (8%->4%) */

    /* TAN-1023: per-type visibility toggle pills. One pill per alert TYPE
       present in the feed; all ON by default (STAND ASIDE defaults OFF).
       Pills are now NEUTRAL — they mirror the .intel-filter-chip (all/holdings)
       style exactly (no per-color gradient / coordination). The inline --pill
       custom property is still injected by the JS but is no longer referenced
       here (harmless). ON = neutral blue; OFF = dimmed but neutral. */
    .pulse-type-pill { font-family: var(--font-mono); font-size: 11px; font-weight: 600; padding: 6px 16px; border-radius: 2px; border: 1px solid var(--border); background: rgba(255,255,255,0.03); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--text-secondary); cursor: pointer; transition: all 0.15s ease; white-space: nowrap; letter-spacing: 0.04em; text-transform: uppercase; } /* TAN-1036: square corners */
    .pulse-type-pill[data-on="0"] { opacity: 0.32; } /* TAN-1051: muted further (0.55->0.32) */
    .pulse-type-pill[data-on="1"] { background: color-mix(in srgb, var(--pill, var(--blue)) 4%, rgba(255,255,255,0.02)); border-color: color-mix(in srgb, var(--pill, var(--blue)) 50%, var(--border)); color: color-mix(in srgb, var(--pill, var(--blue)) 78%, var(--text-secondary)); opacity: 0.8; } /* TAN-1021 (Matt 2026-07-09): per-family --pill var. TAN-1051: muted further (8%->4% tint, opacity 1->0.8). */
    .pulse-type-pill:hover { border-color: var(--text-muted); color: var(--text-primary); }
    /* TAN-1074 A/B: SETUP source control (CLI / DUAL / SRV) + row badges.
       Own full-width row so portrait doesn't lose it in pill h-scroll. */
    .setup-ab-row {
      display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
      margin: 0 0 12px; width: 100%;
    }
    .setup-ab-bar {
      display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
      padding: 4px 6px 4px 10px; border-radius: 2px;
      border: 1px solid rgba(250, 204, 21, 0.28); background: rgba(250, 204, 21, 0.05);
    }
    .setup-ab-label {
      font-family: var(--font-mono); font-size: 9px; font-weight: 700;
      letter-spacing: 0.06em; color: #FACC15; opacity: 0.85; margin-right: 2px;
    }
    .setup-ab-btn {
      font-family: var(--font-mono); font-size: 10px; font-weight: 700;
      letter-spacing: 0.04em; padding: 3px 8px; border-radius: 2px; cursor: pointer;
      border: 1px solid var(--border); background: transparent; color: var(--text-secondary);
    }
    .setup-ab-btn:hover { border-color: #FACC15; color: var(--text-primary); }
    .setup-ab-btn.is-on {
      border-color: rgba(250, 204, 21, 0.7); color: #141B2D; background: #FACC15;
    }
    .setup-ab-meta {
      font-family: var(--font-mono); font-size: 9px; color: var(--text-muted);
      margin-left: 6px; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis;
    }
    .setup-src-badge {
      display: inline-block; font-family: var(--font-mono); font-size: 8px; font-weight: 800;
      letter-spacing: 0.06em; padding: 1px 5px; border-radius: 2px; margin-left: 6px;
      vertical-align: middle; line-height: 1.4;
    }
    .setup-src-badge.setup-src-srv { background: rgba(56, 189, 248, 0.18); color: #7DD3FC; border: 1px solid rgba(56, 189, 248, 0.45); }
    .setup-src-badge.setup-src-cli { background: rgba(148, 163, 184, 0.15); color: #94A3B8; border: 1px solid rgba(148, 163, 184, 0.35); }
    .setup-src-badge.setup-src-both { background: rgba(52, 211, 153, 0.16); color: #6EE7B7; border: 1px solid rgba(52, 211, 153, 0.45); }
    .pulse-v3-row.setup-src--server { box-shadow: inset 3px 0 0 0 rgba(56, 189, 248, 0.55); }
    .pulse-v3-row.setup-src--client { box-shadow: inset 3px 0 0 0 rgba(148, 163, 184, 0.45); }
    .pulse-v3-row.setup-src--both { box-shadow: inset 3px 0 0 0 rgba(52, 211, 153, 0.6); }
    .pulse-type-sep { display: inline-block; width: 1px; height: 18px; margin: 0 6px; background: var(--border); vertical-align: middle; }

    /* TAN-1023: type-pill CSS show/hide. togglePulseType adds `family-off--<key>`
       to the .intel-feed root; the matching [data-pulse-family] rows collapse
       instantly (no full re-render). Empty time-divider buckets are collapsed
       in JS (_applyPulseTypeVisibility). */
    .intel-feed.family-off--confluence [data-pulse-family="confluence"],
    .intel-feed.family-off--scripts [data-pulse-family="scripts"],
    .intel-feed.family-off--cloud [data-pulse-family="cloud"],
    .intel-feed.family-off--trendlines [data-pulse-family="trendlines"],
    .intel-feed.family-off--gaps [data-pulse-family="gaps"],
    .intel-feed.family-off--fib [data-pulse-family="fib"],
    .intel-feed.family-off--rsi [data-pulse-family="rsi"],
    .intel-feed.family-off--macd [data-pulse-family="macd"],
    .intel-feed.family-off--sma [data-pulse-family="sma"] { display: none !important; }

    /* TAN-1016: ALL/HOLDINGS scope CSS show/hide. intelSetFilter's scope
       fast-path (_applyPulseScopeVisibility) adds `scope-holdings-only` to the
       .intel-feed root when HOLDINGS is active; every row tagged
       data-held="false" collapses instantly (no full re-render). Removed for
       ALL. Composes with family-off--* (type pills) and the ticker-search inline
       display via the shared _pulseRowEffectivelyVisible predicate. The class is
       present ONLY while HOLDINGS is active, so ALL scope never hides any row. */
    .intel-feed.scope-holdings-only [data-held="false"] { display: none !important; }

    /* TAN-443 — stale-data banner (/pulse) */
    .pulse-stale-banner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 14px;
      border-radius: var(--radius-sm);
      border: 1px solid transparent;
      margin-bottom: 16px;
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.02em;
    }
    .pulse-stale-banner--yellow {
      background: var(--amber-dim);
      border-color: var(--amber);
      color: var(--amber);
    }
    .pulse-stale-banner--red {
      background: var(--red-dim);
      border-color: var(--red);
      color: var(--red);
    }
    .pulse-stale-banner__msg { flex: 1; line-height: 1.4; }
    .pulse-stale-banner__dismiss {
      flex-shrink: 0;
      background: none;
      border: none;
      cursor: pointer;
      font-size: 16px;
      line-height: 1;
      padding: 0 2px;
      color: inherit;
      opacity: 0.7;
    }
    .pulse-stale-banner__dismiss:hover { opacity: 1; }
    .intel-fresh-toggle { margin-left: 4px; margin-right: 6px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; padding: 6px 16px; border-radius: 20px; border: 1px solid var(--border); background: transparent; color: var(--text-secondary); cursor: pointer; transition: all 0.15s ease; white-space: nowrap; text-transform: uppercase; }
    .intel-fresh-toggle:hover { border-color: var(--text-muted); color: var(--text-primary); }
    .intel-fresh-toggle.active { background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.4); color: #22C55E; }

    /* Section headers */
    .intel-section-header { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; margin: 28px 0 14px; display: flex; align-items: center; gap: 10px; }
    .intel-section-header .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--emerald); animation: pulse 2s infinite; }
    .intel-section-count { font-size: 10px; color: var(--text-faint); font-weight: 500; }

    /* Card base */
    .intel-card-list { display: flex; flex-direction: column; gap: 10px; }
    .intel-card-list.grid-2x2 { display: grid; grid-template-columns: 1fr 1fr; }
    .intel-card-list.grid-2x2 > .intel-card { min-width: 0; }
    /* Per-type row grid (Latest Reports: earnings row, weekly row, midweek row) */
    .ltr-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 10px; }
    .ltr-row:last-child { margin-bottom: 0; }
    .ltr-row > .intel-card { min-width: 0; }
    .intel-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; transition: border-color 0.15s ease; position: relative; container-type: inline-size; }
    /* Long-standing clip bug (Matt): on EARNINGS report cards the header row is
       [EARNINGS badge][ticker][Strong Beat / Beat / Miss verdict pill] with the
       "5d ago" time-ago pushed to the right edge (margin-left:auto). When the
       card narrows (2-up grid on smaller screens / scaled displays) the verdict
       pill and the time-ago collide and the time-ago slides BEHIND the pill
       ("5d" peeks out, "ago" clipped). Rather than guess every mount + viewport
       breakpoint, gate purely on the CARD's own rendered width via a container
       query: below 270px there isn't room for both, so drop the time-ago and
       let the verdict pill own the row. Weekly cards carry an absolute date
       ("May 31") that sits cleanly with no pill, so this is scoped to
       .intel-card--earnings only. ≥270px keeps the label. */
    @container (max-width: 270px) {
      .intel-card--earnings .intel-time-ago { display: none; }
    }
    /* Hover affordance only on cards that are actually clickable (those carry cursor:pointer inline). */
    .intel-card[style*="cursor:pointer"]:hover,
    .intel-card[style*="cursor: pointer"]:hover { border-color: var(--text-faint); }

    /* Card variants */
    .intel-card--poi { border-left: 3px solid var(--border); }
    .intel-card--earnings { }
    .intel-card--weekly { }

    /* FALLBACK — breathing border pulse (commented out, revert here if needed)
    .intel-card-fresh { animation: intel-border-pulse 3s ease-in-out infinite; }
    @keyframes intel-border-pulse {
      0%, 100% { border-color: rgba(255,255,255,0.08); }
      50%       { border-color: rgba(255,255,255,0.22); }
    }
    */

    /* Rotating border glow — DISABLED (Option B mockup: no card-level glow) */
    .intel-card-fresh {
      position: relative;
    }
    .intel-card-fresh::before {
      display: none;
    }

    /* Card top row */
    .intel-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
    .intel-card-left { display: flex; align-items: center; gap: 10px; }
    .intel-ticker { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--text-primary); }
    .intel-price { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); }

    /* Badges */
    .intel-badge { font-family: var(--font-mono); font-size: 10px; font-weight: 600; padding: 3px 10px; border-radius: 4px; letter-spacing: 0.04em; text-transform: uppercase; overflow: visible; position: relative; }
    .intel-badge.poi-badge { background: rgba(168,85,247,0.22); color: #C084FC; }
    .intel-badge.earnings-badge { background: rgba(245,158,11,0.22); color: #FCD34D; }
    .intel-badge.weekly-badge { background: rgba(168,85,247,0.22); color: #C084FC; }
    .intel-badge.signal-type-macd { background: transparent; color: #C084FC; border: 1px solid rgba(168,85,247,0.45); }
    .intel-badge.signal-type-cloud { background: transparent; color: #67E8F9; border: 1px solid rgba(6,182,212,0.45); }
    .intel-badge.signal-type-rsi { background: transparent; color: #93C5FD; border: 1px solid rgba(59,130,246,0.45); }
    .intel-badge.signal-type-fib { background: transparent; color: #67E8F9; border: 1px solid rgba(6,182,212,0.45); }
    .intel-badge.signal-type-sma { background: transparent; color: #93C5FD; border: 1px solid rgba(59,130,246,0.45); }
    .intel-badge.signal-type-confirm { background: transparent; color: #6EE7B7; border: 1px solid rgba(16,185,129,0.45); }
    .intel-badge.signal-type-gap { background: transparent; color: #fb923c; border: 1px solid rgba(249,115,22,0.45); }
    /* TAN-782: Fisher Transform is script-derived → hot-pink family (kept
       distinct from confluence purple), so the intel-badge glyph matches the
       script-family chips on the Pulse surfaces. */
    .intel-badge.signal-type-fisher { background: transparent; color: var(--script-pink); border: 1px solid var(--script-pink-border); }
    .intel-badge.category-spotlight { background: rgba(245,158,11,0.22); color: #FCD34D; }
    .intel-badge.category-promotion { background: rgba(168,85,247,0.22); color: #C084FC; }
    .intel-badge.category-discovery { background: rgba(6,182,212,0.22); color: #67E8F9; }
    .intel-badge.aligned-badge { background: rgba(16,185,129,0.22); color: #6EE7B7; }
    .intel-badge.mixed-badge { background: rgba(245,158,11,0.22); color: #FCD34D; }

    /* Direction */
    .intel-direction { font-family: var(--font-mono); font-size: 13px; font-weight: 700; }
    .intel-direction.bullish { color: var(--emerald); }
    .intel-direction.bearish { color: var(--red); }
    .intel-direction.neutral { color: var(--text-muted); }

    /* Weight badge */
    .intel-weight-badge { font-family: var(--font-mono); font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 3px; background: rgba(255,255,255,0.05); color: var(--text-secondary); }

    /* Timeframe badge */
    .intel-tf-badge { font-family: var(--font-mono); font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 3px; background: rgba(255,255,255,0.04); color: var(--text-muted); letter-spacing: 0.02em; }

    /* Card blurb */
    .intel-blurb { font-family: var(--font-body); font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin: 6px 0; }

    /* Card meta row */
    .intel-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

    /* Time-ago */
    .intel-time-ago { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.03em; margin-left: auto; }
    .intel-time-ago.fresh { color: var(--text-primary); font-weight: 700; opacity: 1; }
    .intel-time-ago.recent { color: var(--text-primary); font-weight: 500; opacity: 1; }
    .intel-time-ago.aging { color: var(--text-secondary); opacity: 0.7; }
    .intel-time-ago.stale { color: var(--text-muted); opacity: 0.5; }

    /* Confluence score display */
    .intel-confluence-score { font-family: var(--font-mono); font-size: 20px; font-weight: 700; line-height: 1; }
    .intel-confluence-score.strong { color: var(--emerald); }
    .intel-confluence-score.moderate { color: var(--amber); }
    .intel-confluence-label { font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }

    /* Signal list inside card */
    .intel-signal-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
    .intel-signal-tag { font-family: var(--font-mono); font-size: 10px; font-weight: 600; padding: 3px 9px; border-radius: 3px; letter-spacing: 0.02em; }

    /* KPI grid for earnings */
    .intel-kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
    .intel-kpi-tile { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.04); border-radius: 6px; padding: 8px 10px; text-align: center; }
    .intel-kpi-label { font-family: var(--font-mono); font-size: 9px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 3px; }
    .intel-kpi-value { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--text-primary); }
    .intel-kpi-value.positive { color: var(--emerald); }
    .intel-kpi-value.negative { color: var(--red); }

    /* Picks grid for weekly */
    .intel-picks-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 10px 0; }
    .intel-pick-tile { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.04); border-radius: 6px; padding: 10px; }
    .intel-pick-ticker { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--text-primary); margin-bottom: 4px; }
    .intel-pick-score { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); }

    /* Heatmap tiles (confluence overview) */
    .intel-heatmap { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
    .intel-heatmap-tile { font-family: var(--font-mono); font-size: 10px; font-weight: 600; padding: 4px 8px; border-radius: 4px; background: rgba(255,255,255,0.04); color: var(--text-secondary); }
    .intel-heatmap-tile.hot { background: rgba(16,185,129,0.15); color: var(--emerald); }
    .intel-heatmap-tile.warm { background: rgba(245,158,11,0.12); color: var(--amber); }
    .intel-heatmap-tile.bearish-hot { background: rgba(239,68,68,0.15); color: var(--red); }

    /* View all link */
    .intel-view-all { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--blue); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; transition: color 0.15s; }
    .intel-view-all:hover { color: #60a5fa; }

    /* Card link */
    .intel-card-link { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--blue); cursor: pointer; text-decoration: none; transition: color 0.15s; display: block; margin-top: 8px; }
    .intel-card-link:hover { color: #60a5fa; }

    /* Weekly card grid — full-width stacked (matches alert/earnings cards) */
    .weekly-card-grid { display: flex; flex-direction: column; gap: 10px; }
    .intel-card--weekly-compact { padding: 16px 18px; }
    .intel-weekly-title { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--text-primary); line-height: 1.35; margin: 4px 0 2px; }
    .intel-weekly-subtitle { font-family: var(--font-body); font-size: 12px; color: var(--text-secondary); line-height: 1.4; margin: 0 0 8px; }
    .intel-weekly-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 6px; }
    .intel-weekly-tag { font-family: var(--font-mono); font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 4px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); color: var(--text-secondary); letter-spacing: 0.03em; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; }
    .intel-weekly-tag:hover { border-color: var(--text-faint); color: var(--text-primary); }
    .intel-weekly-tag.tag-spotlight { color: var(--amber); border-color: rgba(245,158,11,0.25); }
    .intel-weekly-tag.tag-promotion { color: var(--emerald); border-color: rgba(16,185,129,0.25); }
    .intel-weekly-tag.tag-discovery { color: var(--blue); border-color: rgba(59,130,246,0.25); }

    /* Latest-reports inline-colorized bullet list (replaces tone pills) */
    .ltr-bullets { list-style: none; padding: 0; margin: 8px 0 6px; display: flex; flex-direction: column; gap: 4px; }
    .ltr-bullet { font-family: var(--font-body); font-size: 11px; color: var(--text-secondary); line-height: 1.45; padding-left: 12px; position: relative; }
    .ltr-bullet::before { content: '\2022'; position: absolute; left: 0; color: var(--text-faint); }
    .ltr-bullet .num--pos { font-weight: 700; color: #4ade80; }
    .ltr-bullet .num--neg { font-weight: 700; color: #ef4444; }
    .ltr-bullet .num--caution { font-weight: 700; color: #f59e0b; }

    /* Earnings flash target tags */
    .intel-er-targets { display: flex; gap: 8px; margin-top: 6px; }
    .er-target-tag { font-family: var(--font-mono); font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 4px; letter-spacing: 0.03em; }
    .er-target-tag.buy { background: rgba(16,185,129,0.15); color: var(--emerald); }
    .er-target-tag.sell { background: rgba(239,68,68,0.15); color: var(--red); }

    /* Empty state */
    .intel-empty { text-align: center; padding: 32px 20px; }
    .intel-empty-title { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
    .intel-empty-desc { font-family: var(--font-body); font-size: 12px; color: var(--text-muted); }

    /* Dashboard widget */
    .latest-intel { margin-top: 24px; }
    .latest-intel .intel-card-list { gap: 8px; }
    .latest-intel .intel-card { padding: 12px 14px; }
    .latest-intel .intel-card-top { margin-bottom: 4px; }
    .latest-intel .intel-ticker { font-size: 14px; }
    .latest-intel .intel-blurb { font-size: 11px; margin: 4px 0; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }

    /* Mobile responsive */
    @media (max-width: 768px) {
      .intel-feed { padding: 0 4px; }
      .intel-feed-header h2 { display: none; }
      /* TAN-975 v2: type-toggle pills can outnumber the viewport width on
         mobile — let the filter bar scroll horizontally instead of clipping. */
      .intel-filter-bar { gap: 6px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
      .intel-filter-chip { padding: 5px 12px; font-size: 10px; }
      .pulse-type-pill { padding: 5px 12px; font-size: 10px; flex-shrink: 0; }
      .intel-card { padding: 12px 14px; }
      .intel-card-list.grid-2x2 { grid-template-columns: 1fr; }
      .ltr-row { grid-template-columns: 1fr; }
      .intel-kpi-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
      .intel-picks-grid { grid-template-columns: 1fr; gap: 6px; }
      .intel-confluence-score { font-size: 16px; }
      .intel-heatmap { gap: 4px; }
      .latest-intel .intel-card-list.grid-2x2 { grid-template-columns: 1fr; }
    }

    /* ================================================================
       PHASE C — Tiered Alert Cards + Dashboard Confluence Widget
       ================================================================ */

    /* Tier section containers */
    .intel-tier-section { margin-bottom: 28px; }
    .intel-tier-header {
      font-family: var(--font-mono); font-size: 11px; font-weight: 700;
      color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase;
      margin: 0 0 14px; display: flex; align-items: center; gap: 10px;
      padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.04);
    }
    .intel-tier-header .tier-dot {
      width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
    }
    .intel-tier-header .tier-dot.red { background: #EF4444; box-shadow: 0 0 6px rgba(239,68,68,0.4); }
    .intel-tier-header .tier-dot.teal { background: #14b8a6; box-shadow: 0 0 6px rgba(20,184,166,0.4); }
    .intel-tier-header .tier-dot.amber { background: #F59E0B; box-shadow: 0 0 6px rgba(245,158,11,0.4); }
    .intel-tier-header .tier-dot.blue { background: #3B82F6; box-shadow: 0 0 6px rgba(59,130,246,0.4); }
    .intel-tier-header .tier-dot.purple { background: #a855f7; box-shadow: 0 0 6px rgba(168,85,247,0.4); }
    .intel-tier-count {
      font-size: 10px; font-weight: 500; color: var(--text-faint);
      margin-left: auto;
    }

    /* ─── Recency Bucket Dividers ─────────────────────────────────────── */
    .confluence-time-divider {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 24px 0 16px;
      padding: 8px 0;
      animation: divider-fade-in 0.4s ease-out;
    }
    .confluence-time-divider::before {
      content: '';
      width: 3px;
      height: 14px;
      border-radius: 2px;
      background: var(--blue);
    }
    .confluence-time-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: linear-gradient(to right, rgba(255,255,255,0.1), transparent);
    }
    .confluence-time-divider span {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.7);
      white-space: nowrap;
    }
    @keyframes divider-fade-in {
      from { opacity: 0; transform: translateX(-8px); }
      to { opacity: 1; transform: translateX(0); }
    }

    /* ─── Alert Card Base ─────────────────────────────────────────────── */
    .alert-card-tier {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 10px; padding: 16px 18px; position: relative;
      transition: border-color 0.15s ease, transform 0.15s ease;
      border-left: 4px solid var(--border);
    }
    .alert-card-tier:hover {
      border-color: var(--text-faint);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }
    .alert-card-tier + .alert-card-tier { margin-top: 10px; }

    /* Tier 1 — Positional (Red) */
    .alert-card-tier1 { border-left-color: #EF4444; background: linear-gradient(135deg, rgba(239,68,68,0.04), var(--surface)); }
    .alert-card-tier1:hover { border-left-color: #F87171; }
    .alert-card-tier1 .alert-tier-label { color: #EF4444; }

    /* Tier 2 High (Amber) */
    .alert-card-tier2-high { border-left-color: #F59E0B; background: linear-gradient(135deg, rgba(245,158,11,0.03), var(--surface)); }
    .alert-card-tier2-high:hover { border-left-color: #FBBF24; }
    .alert-card-tier2-high .alert-tier-label { color: #F59E0B; }

    /* Tier 2 Standard (Blue) */
    .alert-card-tier2-standard { border-left-color: #3B82F6; }
    .alert-card-tier2-standard:hover { border-left-color: #60A5FA; }
    .alert-card-tier2-standard .alert-tier-label { color: #3B82F6; }

    /* ─── Card Inner Layout ───────────────────────────────────────────── */
    .alert-card-header {
      display: flex; align-items: flex-start; justify-content: space-between;
      margin-bottom: 10px; gap: 12px;
    }
    .alert-card-header-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
    .alert-card-header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

    .alert-tier-label {
      font-family: var(--font-mono); font-size: 10px; font-weight: 700;
      letter-spacing: 0.06em; text-transform: uppercase;
    }
    .alert-card-ticker {
      font-family: var(--font-display); font-weight: 700; font-size: 18px;
      color: var(--text-primary); line-height: 1;
    }
    .alert-card-price {
      font-family: var(--font-mono); font-size: 13px; color: var(--text-secondary);
    }
    .alert-card-chg {
      font-family: var(--font-mono); font-size: 11px; font-weight: 600;
    }
    .alert-card-chg.positive { color: var(--emerald); }
    .alert-card-chg.negative { color: var(--red); }

    /* Rating badge */
    .alert-rating-badge {
      font-family: var(--font-mono); font-size: 11px; font-weight: 700;
      padding: 3px 10px; border-radius: 20px; letter-spacing: 0.02em;
      white-space: nowrap; line-height: 1.3;
    }
    .alert-rating-badge.rating-high {
      background: rgba(16,185,129,0.15); color: var(--emerald);
      border: 1px solid rgba(16,185,129,0.25);
    }
    .alert-rating-badge.rating-mid {
      background: rgba(245,158,11,0.12); color: var(--amber);
      border: 1px solid rgba(245,158,11,0.2);
    }
    .alert-rating-badge.rating-low {
      background: rgba(148,163,184,0.1); color: var(--text-secondary);
      border: 1px solid rgba(148,163,184,0.15);
    }

    /* Confluence score tiers — all purple, 3 bands (0-100 normalised scale) */
    .conf-tier-high {
      color: #c084fc;                        /* light purple */
      background: rgba(192, 132, 252, 0.12);
      border: 1px solid rgba(192, 132, 252, 0.3);
    }
    .conf-tier-mid {
      color: #a855f7;                        /* mid purple */
      background: rgba(168, 85, 247, 0.10);
      border: 1px solid rgba(168, 85, 247, 0.25);
    }
    .conf-tier-low {
      color: #7c3aed;                        /* deep purple */
      background: rgba(124, 58, 237, 0.08);
      border: 1px solid rgba(124, 58, 237, 0.20);
    }

    /* Position info row (Tier 1) */
    .alert-position-info {
      display: flex; flex-wrap: wrap; gap: 8px 16px;
      font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary);
      margin-bottom: 10px; padding: 8px 12px;
      background: rgba(239,68,68,0.04); border-radius: 6px;
      border: 1px solid rgba(239,68,68,0.08);
    }
    .alert-position-info .pos-label { color: var(--text-muted); font-weight: 500; }
    .alert-position-info .pos-value { font-weight: 600; color: var(--text-primary); }
    .alert-position-info .pos-value.positive { color: var(--emerald); }
    .alert-position-info .pos-value.negative { color: var(--red); }

    /* Meta line (rank, score context) */
    .alert-card-meta-line {
      font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
      margin-bottom: 8px; display: flex; flex-wrap: wrap; gap: 4px 12px;
    }
    .alert-card-meta-line .meta-highlight { color: var(--text-secondary); font-weight: 600; }

    /* Blurb */
    .alert-card-blurb {
      font-family: var(--font-body); font-size: 12px; color: var(--text-secondary);
      line-height: 1.55; margin-bottom: 10px;
    }

    /* Signal badges row */
    .alert-signal-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; overflow: visible; }
    .alert-signal-badge {
      font-family: var(--font-mono); font-size: 10px; font-weight: 600;
      padding: 3px 10px; border-radius: 4px; letter-spacing: 0.04em;
      text-transform: uppercase;
      position: relative; overflow: visible;
    }

    /* Targets row */
    .alert-targets-row {
      display: flex; flex-wrap: wrap; gap: 6px 14px;
      font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary);
      margin-bottom: 8px;
    }
    .alert-target-item { display: flex; align-items: center; gap: 4px; }
    .alert-target-label {
      font-weight: 700; font-size: 9px; padding: 1px 5px; border-radius: 3px;
      letter-spacing: 0.04em;
    }
    .alert-target-label.bt { background: rgba(16,185,129,0.12); color: var(--emerald); }
    .alert-target-label.st { background: rgba(245,158,11,0.12); color: var(--amber); }
    .alert-target-dist { font-size: 10px; color: var(--text-muted); }

    /* Context row (Tier 1 bottom) */
    .alert-context-row {
      font-family: var(--font-mono); font-size: 10px; color: var(--text-muted);
      line-height: 1.6; padding: 8px 12px; border-radius: 6px;
      background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.04);
      margin-top: 8px;
    }

    /* Card footer with timestamp */
    .alert-card-footer {
      display: flex; align-items: center; justify-content: space-between;
      margin-top: 10px; padding-top: 8px;
      border-top: 1px solid rgba(255,255,255,0.04);
    }

    /* ─── Freshness: Beacon + Sweep Bar System ────────────────────────── */

    /* Fresh (< 1h) — glow DISABLED (Option B mockup: no card-level pulse) */
    .alert-fresh { position: relative; overflow: hidden; }
    .alert-fresh.beacon-white {
      border-top: none;
      animation: none;
      box-shadow: none;
    }

    /* (live-bar / live-sweep removed — replaced by intel-border-pulse) */

    /* Radar dot — green pulsing ring next to timestamp */
    .beacon-dot {
      position: relative; display: inline-flex; align-items: center;
      justify-content: center; flex-shrink: 0; width: 10px; height: 10px;
      margin-right: 12px;
    }
    .beacon-dot .dot-core {
      width: 10px; height: 10px; border-radius: 50%;
      background: #22C55E; box-shadow: 0 0 8px 3px rgba(34,197,94,0.5); z-index: 1;
    }
    .beacon-dot::before {
      content: ''; position: absolute; width: 10px; height: 10px; border-radius: 50%;
      border: 2px solid #22C55E; animation: radar-ping 2s ease-out infinite;
    }
    @keyframes radar-ping {
      0% { transform: scale(1); opacity: 0.8; }
      100% { transform: scale(3.2); opacity: 0; }
    }

    /* Recent (1-6h) — glow DISABLED (Option B mockup) */
    .alert-recent.beacon-white {
      box-shadow: none;
    }
    .alert-recent .beacon-dot::before { animation: none; opacity: 0; }
    .beacon-dot-static {
      display: inline-flex; align-items: center; justify-content: center;
      flex-shrink: 0; margin-right: 8px;
    }
    .beacon-dot-static .dot-core-small {
      width: 7px; height: 7px; border-radius: 50%;
      background: #22C55E; opacity: 0.8;
    }

    /* Moderate (6-24h) — no glow/dot/animation */

    /* Stale (24h+) — no glow, NO opacity reduction */
    .alert-stale.beacon-white { box-shadow: none; animation: none; }

    /* Intel card freshness: stale (>48h) — dimmed */
    .intel-card-stale {
      opacity: 0.45;
      filter: grayscale(0.3);
    }
    /* Brighten on hover only when the card is actually clickable. */
    .intel-card-stale[style*="cursor:pointer"]:hover,
    .intel-card-stale[style*="cursor: pointer"]:hover {
      opacity: 0.75;
      filter: none;
    }

    /* (intel-card-fresh sweep / ::after removed — border-pulse defined above) */

    /* TAN-83 push-notification deep-link: brief outline pulse on the target row */
    .pulse-row-highlight {
      animation: pulse-row-highlight 2s ease-out 1;
      box-shadow: 0 0 0 2px var(--blue-glow), 0 0 18px var(--blue-glow);
      border-radius: 6px;
    }
    @keyframes pulse-row-highlight {
      0%   { box-shadow: 0 0 0 0 var(--blue-glow), 0 0 0 var(--blue-glow); }
      30%  { box-shadow: 0 0 0 2px var(--blue), 0 0 22px var(--blue-glow); }
      100% { box-shadow: 0 0 0 0 rgba(59,130,246,0), 0 0 0 rgba(59,130,246,0); }
    }

    /* Respect prefers-reduced-motion */
    @media (prefers-reduced-motion: reduce) {
      .alert-fresh, .beacon-dot::before { animation: none !important; }
      .alert-fresh.beacon-white { animation: none !important; }
      .intel-card-fresh::before { animation: none !important; background: none !important; }
      .pulse-row-highlight { animation: none !important; }
    }

    /* ─── Clickable Tickers ────────────────────────────────────────────── */
    .clickable-ticker {
      cursor: pointer;
      text-decoration: underline;
      text-decoration-color: rgba(148,163,184,0.45);
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
      transition: color 0.15s ease, text-decoration-color 0.15s ease;
    }
    .clickable-ticker:hover {
      color: var(--blue) !important;
      text-decoration-color: rgba(59,130,246,0.85);
      text-underline-offset: 3px;
    }
    /* Top Movers: the whole .mv4-row is clickable (openDetailPanel), so the
       ticker needs no underline affordance. Underline/highlight is reserved
       for portfolio holdings (not built yet). Keep the click affordance via
       the row's cursor:pointer; suppress the inherited underline here only. */
    .mv4-ticker.clickable-ticker,
    .mv4-ticker.clickable-ticker:hover {
      text-decoration: none;
    }

    /* ─── Confluence Rating Display ────────────────────────────────────── */
    .confluence-rating-display {
      display: flex; align-items: baseline; gap: 8px;
      font-family: var(--font-mono); margin-bottom: 8px;
    }
    .confluence-rating-primary {
      font-size: 15px; font-weight: 700; color: var(--text-primary);
    }
    .confluence-rating-label {
      font-size: 11px; font-weight: 500; color: var(--text-secondary);
    }
    .confluence-rating-raw {
      font-size: 10px; color: var(--text-muted);
    }

    /* ─── Jargon Tooltips (CSS-only) ───────────────────────────────────── */
    .jargon-tooltip {
      position: relative; cursor: help;
      border-bottom: 1px dotted rgba(255,255,255,0.25);
    }
    /* Tooltip popup */
    .jargon-tooltip::after {
      content: attr(data-tooltip);
      position: absolute; bottom: calc(100% + 10px); left: 50%;
      transform: translateX(-50%);
      background: #0F172A; color: #F1F5F9;
      font-family: var(--font-body); font-size: 12px; font-weight: 400;
      line-height: 1.5; text-transform: none; letter-spacing: 0;
      padding: 8px 12px; border-radius: 8px;
      white-space: normal; max-width: 300px; min-width: 180px;
      border: 1px solid rgba(148,163,184,0.25);
      box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3);
      pointer-events: none; opacity: 0; z-index: 200;
      transition: opacity 0.15s ease;
    }
    /* Tooltip arrow */
    .jargon-tooltip::before {
      content: '';
      position: absolute; bottom: calc(100% + 4px); left: 50%;
      transform: translateX(-50%);
      border: 6px solid transparent;
      border-top-color: #0F172A;
      pointer-events: none; opacity: 0; z-index: 200;
      transition: opacity 0.15s ease;
    }
    .jargon-tooltip:hover::after,
    .jargon-tooltip:hover::before { opacity: 1; }
    @media (max-width: 768px) {
      .jargon-tooltip::after {
        left: 0; right: auto; transform: none;
        max-width: calc(100vw - 32px);
      }
      .jargon-tooltip::before {
        left: 12px; transform: none;
      }
    }

    /* ─── Desktop Font Sizing — Intel Tab ──────────────────────────────── */
    @media (min-width: 769px) {
      .alert-card-ticker { font-size: 16px; }
      .alert-card-blurb { font-size: 14px; }
      .alert-card-price { font-size: 14px; }
      .alert-card-chg { font-size: 12px; }
      .alert-signal-badge, .intel-badge {
        font-size: 12px; padding: 3px 10px;
      }
      .alert-card-meta-line { font-size: 12px; }
      .alert-tier-label { font-size: 11px; }
      .alert-context-row { font-size: 11px; }
    }

    /* ─── Dashboard Confluence Alerts Widget ──────────────────────────── */
    .confluence-widget { margin-top: 24px; margin-bottom: 8px; }
    .confluence-widget-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 14px;
    }
    .confluence-widget-title {
      display: flex; align-items: center; gap: 10px;
    }
    .confluence-widget-title .section-title { margin: 0; }
    .confluence-widget-title .live-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--emerald); animation: pulse 2s infinite;
    }
    .confluence-widget-count {
      font-family: var(--font-mono); font-size: 11px; font-weight: 600;
      padding: 3px 10px; border-radius: 20px;
      background: rgba(59,130,246,0.12); color: var(--blue);
    }
    .confluence-widget-controls {
      display: flex; align-items: center; gap: 8px;
    }
    .confluence-layout-toggle {
      background: none; border: 1px solid var(--border); border-radius: 5px;
      padding: 4px 8px; cursor: pointer; color: var(--text-muted);
      font-size: 12px; transition: all 0.15s;
    }
    .confluence-layout-toggle:hover { border-color: var(--text-faint); color: var(--text-secondary); }
    .confluence-layout-toggle.active { border-color: var(--blue); color: var(--blue); background: rgba(59,130,246,0.08); }

    /* Grid layout (2x2) */
    .confluence-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    }
    .confluence-grid.list-view {
      grid-template-columns: 1fr; gap: 8px;
    }

    /* Compact alert card for dashboard */
    .confluence-compact-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 8px; padding: 12px 14px;
      cursor: pointer; transition: all 0.15s ease;
      display: flex; flex-direction: column; gap: 8px;
      border-left: 3px solid var(--border);
    }
    .confluence-compact-card:hover {
      border-color: var(--text-faint);
      transform: translateY(-1px);
      box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    }
    .confluence-compact-card.tier-1 { border-left-color: #EF4444; }
    .confluence-compact-card.tier-2-high { border-left-color: #F59E0B; }
    .confluence-compact-card.tier-2-standard { border-left-color: #3B82F6; }

    .compact-card-top {
      display: flex; align-items: center; justify-content: space-between;
    }
    .compact-card-left { display: flex; align-items: center; gap: 8px; }
    .compact-card-ticker {
      font-family: var(--font-display); font-weight: 700; font-size: 15px;
      color: var(--text-primary);
    }
    .compact-card-price {
      font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary);
    }
    .compact-card-dir {
      font-family: var(--font-mono); font-size: 11px; font-weight: 700;
    }
    .compact-card-dir.bullish { color: var(--emerald); }
    .compact-card-dir.bearish { color: var(--red); }
    .compact-card-dir.mixed { color: var(--amber); }
    .compact-card-right { display: flex; align-items: center; gap: 6px; }
    .compact-card-tier-dot {
      width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
    }

    .compact-card-bottom {
      display: flex; align-items: center; justify-content: space-between;
    }
    .compact-card-badges { display: flex; flex-wrap: wrap; gap: 4px; }
    .compact-card-badge {
      font-family: var(--font-mono); font-size: 8px; font-weight: 600;
      padding: 2px 6px; border-radius: 3px; letter-spacing: 0.03em;
      text-transform: uppercase;
    }
    .compact-card-time {
      font-family: var(--font-mono); font-size: 10px; color: var(--text-muted);
      white-space: nowrap;
    }

    .confluence-view-all {
      font-family: var(--font-mono); font-size: 11px; font-weight: 600;
      color: var(--blue); cursor: pointer; display: inline-flex;
      align-items: center; gap: 4px; margin-top: 12px; transition: color 0.15s;
    }
    .confluence-view-all:hover { color: #60a5fa; }

    /* ================================================================
       INTEL CARD REDESIGN v6 — Wide Gauge, Proximity Bars, Chart Panel
       ================================================================ */

    /* ─── Card outer: 3-column grid ──────────────────────────────────── */
    .intel-v2-card {
      display: grid;
      grid-template-columns: 130px 1fr 300px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      overflow: hidden;
      min-height: 260px;
      position: relative;
      transition: border-color 0.15s ease, transform 0.15s ease;
    }
    /* Suppress all transitions during data-refresh re-renders to prevent card flash */
    .no-transition .intel-v2-card,
    .no-transition .intel-v2-health-fill,
    .no-transition .intel-v2-prox-bar {
      transition: none !important;
    }
    .intel-v2-card:hover {
      border-color: var(--text-faint);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }
    .intel-v2-card + .intel-v2-card { margin-top: 10px; }

    /* Tier color variants — uniform border, subtle background tints */
    .intel-v2-card.tier1 { background: linear-gradient(135deg, rgba(20,184,166,0.04), var(--surface)); border-left: 2px solid rgba(20,184,166,0.3); }
    .intel-v2-card.tier1 .intel-v2-tier-label { color: #14b8a6; }
    .intel-v2-tier-label.concentration-alert { color: var(--amber); }
    .intel-v2-card.tier2-high { background: linear-gradient(135deg, rgba(245,158,11,0.03), var(--surface)); }
    .intel-v2-card.tier2-high .intel-v2-tier-label { color: var(--amber); }
    .intel-v2-card.tier2-std .intel-v2-tier-label { color: var(--blue); }

    /* ─── Gauge column (left) ────────────────────────────────────────── */
    .intel-v2-gauge-area {
      padding: 16px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      background: rgba(20, 27, 45, 0.95);
      border-right: 1px solid var(--border);
    }
    .intel-v2-gauge-wrap {
      position: relative;
      width: 90px;
      height: 90px;
      flex-shrink: 0;
    }
    .intel-v2-gauge-wrap svg { width: 90px; height: 90px; }
    .intel-v2-gauge-score {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      font-family: var(--font-mono);
      font-size: 24px; font-weight: 800;
      line-height: 1;
    }
    @keyframes intelGaugeArc {
      from { stroke-dashoffset: var(--gauge-circ); }
      to { stroke-dashoffset: var(--gauge-off); }
    }
    .intel-gauge-arc-anim {
      animation: intelGaugeArc 1.2s cubic-bezier(0.16,1,0.3,1) forwards;
    }
    .intel-v2-score-line {
      font-family: var(--font-mono);
      font-size: 12px; font-weight: 700;
      color: var(--text-secondary);
      display: flex; align-items: center; gap: 4px;
    }
    .intel-v2-star { color: var(--amber); font-size: 14px; }
    .intel-v2-quality {
      font-family: var(--font-mono);
      font-size: 10px; font-weight: 600;
      letter-spacing: 0.04em; text-transform: uppercase;
    }

    /* SCORE block (full-width, above NEAR/FAR) — no box, plain text only */
    .intel-v2-nf-block {
      width: 100%;
      display: flex; flex-direction: column; align-items: center;
      padding: 4px 4px 3px;
      border-radius: 0;
      background: none;
      border: none;
      margin-bottom: 4px;
    }
    .intel-v2-nf-value {
      font-family: var(--font-mono);
      font-size: 15px; font-weight: 700; line-height: 1.1;
    }

    /* NEAR / FAR pills */
    .intel-v2-nf-row {
      display: flex; gap: 4px; width: 100%;
    }
    .intel-v2-nf-pill {
      flex: 1;
      display: flex; flex-direction: column; align-items: center;
      padding: 4px 4px 3px;
      border-radius: 6px;
      background: rgba(255,255,255,0.03);
      border: 1px solid var(--border);
    }
    .intel-v2-nf-label {
      font-family: var(--font-mono);
      font-size: 7px; font-weight: 700;
      letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--text-muted);
    }
    .intel-v2-nf-val {
      font-family: var(--font-mono);
      font-size: 15px; font-weight: 700; line-height: 1.1;
    }

    /* RSI Ensemble / RS row — visual separator from NEAR/FAR */
    .intel-v2-rsi-rs-row {
      margin-top: 3px;
      padding-top: 3px;
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    /* RSI Ensemble pill — preserve pre-line newlines in tooltip */
    .intel-v2-rsi-pill[data-score-tip]::after {
      white-space: pre-line;
    }

    /* Score tooltip (CSS-only, uses data-score-tip attr) */
    .score-tooltip-wrap {
      position: relative; cursor: help;
    }
    .score-tooltip-wrap::after {
      content: attr(data-score-tip);
      position: absolute; bottom: calc(100% + 10px); left: 50%;
      transform: translateX(-50%);
      background: #242738; color: #94a3b8;
      border: 1px solid #2A2D3E; border-radius: 8px;
      padding: 8px 10px;
      font-family: var(--font-body);
      font-size: 12px; font-weight: 400; line-height: 1.5;
      white-space: normal; max-width: 280px; min-width: 180px;
      text-align: left;
      pointer-events: none; opacity: 0;
      transition: opacity 0.15s ease 0.2s;
      z-index: 100;
    }
    .score-tooltip-wrap:hover::after { opacity: 1; }
    @media (max-width: 768px) {
      .score-tooltip-wrap::after {
        left: 0; right: auto; transform: none;
        max-width: calc(100vw - 32px);
      }
    }

    /* Health bar (replaces bull/bear bar) */
    .intel-v2-health-bar {
      width: 100%;
      display: flex; flex-direction: column; gap: 2px;
      margin-top: 2px;
    }
    /* Gauge-area tooltips: reposition to the right so they aren't clipped by card overflow:hidden */
    .intel-v2-gauge-area .score-tooltip-wrap::after {
      bottom: auto; left: calc(100% + 8px); top: 50%;
      transform: translateY(-50%);
      z-index: 9999;
      white-space: normal;
    }
    .intel-v2-health-label {
      font-family: var(--font-mono);
      font-size: 7px; font-weight: 700;
      letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--text-muted);
    }
    .intel-v2-health-track {
      width: 100%; height: 5px;
      border-radius: 3px; overflow: hidden;
      background: rgba(255,255,255,0.06);
    }
    .intel-v2-health-fill {
      height: 100%;
      border-radius: 3px;
      transition: width 0.4s ease;
    }
    /* Detected time string */
    .intel-v2-detected-time {
      font-family: var(--font-mono);
      font-size: 8px; font-weight: 500;
      color: var(--text-muted);
      opacity: 0.7;
      margin-top: 1px;
    }

    /* ─── Card body (center) ─────────────────────────────────────────── */
    .intel-v2-body {
      padding: 16px 18px;
      display: flex; flex-direction: column; gap: 8px;
      background: rgba(20, 27, 45, 0.95);
    }
    .intel-v2-top { display: flex; flex-direction: column; gap: 6px; }
    .intel-v2-bottom { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }

    /* Header row: tier label + zone + time */
    .intel-v2-header {
      display: flex; align-items: center; justify-content: space-between; gap: 8px;
    }
    .intel-v2-header-left { display: flex; align-items: center; gap: 8px; }
    .intel-v2-header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
    .intel-v2-tier-label {
      font-family: var(--font-mono);
      font-size: 10px; font-weight: 700;
      letter-spacing: 0.06em; text-transform: uppercase;
    }
    .intel-v2-zone-pill {
      font-family: var(--font-mono);
      font-size: 9px; font-weight: 700;
      padding: 2px 8px; border-radius: 4px;
      letter-spacing: 0.04em; text-transform: uppercase;
    }
    .intel-v2-zone-pill.buy-zone { background: rgba(16,185,129,0.15); color: var(--emerald); border: 1px solid rgba(16,185,129,0.25); }
    .intel-v2-zone-pill.sell-zone { background: rgba(245,158,11,0.15); color: var(--amber); border: 1px solid rgba(245,158,11,0.25); }

    /* Ticker line */
    .intel-v2-ticker-line {
      display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    }
    .intel-v2-ticker-meta {
      display: flex; align-items: baseline; gap: 6px;
      font-family: var(--font-mono);
      font-size: 11px; color: var(--text-muted);
    }
    .intel-v2-held-pill {
      font-family: var(--font-mono);
      font-size: 9px; font-weight: 600;
      padding: 2px 6px; border-radius: 3px;
      background: rgba(255,255,255,0.05); color: var(--text-secondary);
    }

    /* Meta line (score, rank) */
    .intel-v2-meta {
      font-family: var(--font-mono);
      font-size: 11px; color: var(--text-muted);
    }

    /* Blurb */
    .intel-v2-blurb {
      font-family: var(--font-body);
      font-size: 12px; color: var(--text-secondary);
      line-height: 1.5; font-style: italic;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    /* Signal badges row with group dividers */
    .intel-v2-signals {
      display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
    }
    .intel-v2-signal-divider { display: none; }

    /* Position info row (Tier 1) — kept from existing */

    /* ─── Proximity bars ─────────────────────────────────────────────── */
    .intel-v2-prox-section {
      display: flex; flex-direction: column; gap: 3px;
    }
    .intel-v2-prox-row {
      display: grid;
      grid-template-columns: 36px 60px 1fr 42px;
      align-items: center; gap: 6px; height: 20px;
    }
    .intel-v2-prox-label {
      font-family: var(--font-mono);
      font-size: 10px; font-weight: 700;
      color: #000; text-align: center;
      padding: 2px 4px; border-radius: 3px; line-height: 1;
    }
    .intel-v2-prox-label.bt1 { background: var(--blue); }
    .intel-v2-prox-label.bt2 { background: var(--emerald); }
    .intel-v2-prox-label.bt3 { background: #8B5CF6; color: #fff; }
    .intel-v2-prox-label.st1 { background: var(--amber); }
    .intel-v2-prox-label.st2 { background: #F97316; color: #000; }
    .intel-v2-prox-label.st3 { background: var(--red); color: #fff; }
    .intel-v2-prox-price {
      font-family: var(--font-mono);
      font-size: 11px; font-weight: 600;
      color: var(--text-muted); text-align: right;
    }
    .intel-v2-prox-bar-wrap {
      height: 6px;
      background: rgba(255,255,255,0.04);
      border-radius: 3px; overflow: hidden;
    }
    .intel-v2-prox-bar {
      height: 100%; border-radius: 3px;
      transition: width 1s cubic-bezier(0.16,1,0.3,1);
    }
    .intel-v2-prox-bar.bt1 { background: linear-gradient(90deg, var(--blue), #60a5fa); }
    .intel-v2-prox-bar.bt2 { background: linear-gradient(90deg, var(--emerald), #34d399); }
    .intel-v2-prox-bar.bt3 { background: linear-gradient(90deg, #8B5CF6, #a78bfa); }
    .intel-v2-prox-bar.st1 { background: linear-gradient(90deg, var(--amber), #fbbf24); }
    .intel-v2-prox-bar.st2 { background: linear-gradient(90deg, #F97316, #fb923c); }
    .intel-v2-prox-bar.st3 { background: linear-gradient(90deg, var(--red), #f87171); }
    .intel-v2-prox-pct {
      font-family: var(--font-mono);
      font-size: 10px; font-weight: 600;
      color: var(--text-muted); text-align: right;
    }
    .intel-v2-prox-hit {
      font-family: var(--font-mono);
      font-size: 10px; font-weight: 700;
      color: var(--emerald);
    }

    /* ─── Footer ─────────────────────────────────────────────────────── */
    .intel-v2-footer {
      display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
      margin-top: 4px; padding-top: 6px;
      border-top: 1px solid rgba(255,255,255,0.04);
      font-family: var(--font-mono); font-size: 10px; color: var(--text-muted);
    }
    .intel-v2-er-pill {
      font-family: var(--font-mono);
      font-size: 9px; font-weight: 700;
      padding: 2px 8px; border-radius: 4px;
      letter-spacing: 0.04em; text-transform: uppercase;
    }
    .intel-v2-er-pill.er-warn { background: rgba(245,158,11,0.15); color: var(--amber); }
    .intel-v2-er-pill.er-muted { background: rgba(255,255,255,0.05); color: var(--text-muted); }

    /* ─── Chart panel (right) ────────────────────────────────────────── */
    .intel-v2-chart-panel {
      background: rgba(20, 27, 45, 0.95);
      border-left: 1px solid var(--border);
      padding: 12px 14px;
      display: flex; flex-direction: column; gap: 8px;
      cursor: zoom-in;
      position: relative;
    }
    .intel-v2-chart-header {
      display: flex; align-items: center; justify-content: space-between;
    }
    .intel-v2-chart-ticker {
      font-family: var(--font-mono);
      font-size: 11px; font-weight: 700;
      color: var(--text-muted);
    }
    .intel-v2-chart-tf-row { display: flex; gap: 2px; }
    .intel-v2-chart-tf {
      font-family: var(--font-mono);
      font-size: 9px; font-weight: 600;
      color: var(--text-muted);
      padding: 2px 6px; border-radius: 3px;
      cursor: pointer; background: transparent; border: none;
    }
    .intel-v2-chart-tf.active {
      background: rgba(255,255,255,0.08);
      color: var(--text-primary);
    }
    .intel-v2-chart-area {
      flex: 1; min-height: 160px; position: relative;
    }
    .intel-v2-chart-area svg { width: 100%; height: 100%; }
    .chart-gap-label { fill: #F97316; font-size: 9px; font-weight: 500; }
    .chart-expand-hint {
      position: absolute;
      top: 6px;
      right: 8px;
      font-size: 12px;
      color: rgba(255,255,255,0.0);
      transition: color 0.2s ease;
      pointer-events: none;
      line-height: 1;
      font-style: normal;
    }
    .intel-v2-chart-panel:hover .chart-expand-hint {
      color: rgba(255,255,255,0.45);
    }

    /* ─── Responsive: stack chart panel below card body on tablet ────── */
    @media (max-width: 900px) {
      .intel-v2-card { grid-template-columns: 110px 1fr; }
      .intel-v2-chart-panel {
        grid-column: 1 / -1;
        width: 100% !important;
        min-width: 0 !important;
        border-left: none;
        border-top: 1px solid var(--border);
        min-height: 200px;
      }
    }
    @media (max-width: 600px) {
      .intel-v2-card { grid-template-columns: 1fr; }
      .intel-v2-gauge-area { flex-direction: row; flex-wrap: wrap; padding: 10px; border-right: none; border-bottom: 1px solid var(--border); }
      .intel-v2-gauge-wrap { width: 60px; height: 60px; }
      .intel-v2-gauge-wrap svg { width: 60px; height: 60px; }
      .intel-v2-gauge-score { font-size: 18px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .intel-gauge-arc-anim { animation: none !important; }
    }

    /* ─── Mobile overrides ────────────────────────────────────────────── */
    @media (max-width: 768px) {
      .confluence-grid { grid-template-columns: 1fr; }
      .alert-card-tier { padding: 12px 14px; }
      .alert-card-ticker { font-size: 16px; }
      .alert-position-info { flex-direction: column; gap: 4px; }
      .alert-targets-row { flex-direction: column; gap: 4px; }
      .intel-v2-chart-panel {
        grid-column: 1 / -1;
        width: 100% !important;
        min-width: 0 !important;
        border-left: none;
        border-top: 1px solid var(--border);
        min-height: 200px;
      }
    }


    /* ER warning box */
    .intel-v2-er-box { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; padding: 7px 12px; border-radius: 6px; margin-top: 6px; line-height: 1.4; }
    .intel-v2-er-box.er-box-urgent { background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.25); color: var(--red); }
    .intel-v2-er-box.er-box-warn   { background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.3); color: var(--amber); }
    .intel-v2-er-box.er-box-notice { background: rgba(148,163,184,0.06); border: 1px solid rgba(148,163,184,0.18); color: var(--text-muted); }

    /* ── MAJOR CONFLUENCE card treatment ─────────────────────────────────────── */
    /* Full purple border + outer glow — immediately visually distinct */
    .intel-v2-card.intel-v2-major {
    }

    /* ◆ MAJOR badge — small purple pill next to alert type */
    .intel-v2-major-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #a855f7;
      background: rgba(168, 85, 247, 0.1);
      border: 1px solid rgba(168, 85, 247, 0.3);
      border-radius: 4px;
      padding: 2px 8px;
      margin-left: 8px;
      vertical-align: middle;
    }

    /* Independence context line — "3 independent anchors · 22yr avg age · ACTIVE" */
    .intel-v2-major-context {
      font-family: var(--font-mono, monospace);
      font-size: 10px;
      color: rgba(168, 85, 247, 0.75);
      letter-spacing: 0.04em;
      margin-top: 4px;
      margin-bottom: 2px;
    }

    .intel-first-test-badge {
      font-size: 9px;
      font-weight: 700;
      color: #a855f7;
      letter-spacing: 0.08em;
      margin-top: 2px;
    }

    /* ─── Intel chart enlarge modal ──────────────────────────────────── */
    .intel-chart-modal-overlay {
      position: fixed; inset: 0; z-index: 9999;
      background: rgba(0,0,0,0.85);
      display: flex; align-items: center; justify-content: center;
    }
    .intel-chart-modal-container {
      width: min(85vw, 80vh); height: min(85vw, 80vh);
      max-width: 900px; max-height: 900px;
      background: var(--surface-2);
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 10px;
      display: flex; flex-direction: column;
      overflow: hidden;
    }
    .intel-chart-modal-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 18px;
      border-bottom: 1px solid var(--border);
    }
    .intel-chart-modal-header .intel-v2-chart-ticker {
      font-size: clamp(12px, 1.2vw, 18px);
      font-weight: 600;
      color: var(--text-muted);
    }
    .intel-chart-modal-close {
      background: transparent; border: none;
      color: var(--text-muted); font-size: 22px;
      cursor: pointer; line-height: 1; padding: 0 4px;
    }
    .intel-chart-modal-close:hover { color: var(--text-primary); }
    .intel-chart-modal-body {
      flex: 1; padding: 14px 18px; min-height: 0;
      background: var(--surface-2);
    }
    .intel-chart-modal-body svg {
      width: 100%; height: 100%;
    }
    .intel-chart-modal-body canvas {
      background: var(--surface-2);
    }

    /* ─── Dashboard Pulse Widget ─────────────────────────────────────────────── */
    .dashboard-pulse-section {
      padding: 16px 0 8px;
      margin-top: 32px;
    }
    .dashboard-pulse-header {
      display: flex; align-items: center; gap: 10px;
      margin-bottom: 10px; padding: 0 2px;
    }
    .dp-title {
      font-family: var(--font-display);
      font-size: 11px; font-weight: 600;
      letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--text-muted);
    }
    .dp-count {
      font-size: 11px; color: var(--text-faint);
    }
    .dp-viewall-row {
      text-align: left;
      margin-top: 8px;
      margin-bottom: 24px;
      padding-right: 2px;
    }
    .dp-viewall-link {
      font-size: 12px;
      font-weight: 600;
      color: var(--blue);
      text-decoration: none;
      letter-spacing: 0.02em;
    }
    .dp-viewall-link:hover {
      color: #60a5fa;
      text-decoration: underline;
    }

    .dashboard-pulse-cards {
      display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    }
    @media (max-width: 768px) {
      .dashboard-pulse-cards { grid-template-columns: 1fr; }
    }
    .dashboard-pulse-card {
      display: flex; gap: 10px; padding: 10px 12px;
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 8px;
    }
    .dp-gauge-col {
      flex: 0 0 64px; display: flex; flex-direction: column; align-items: center;
    }
    .dp-gauge-wrap {
      width: 60px; height: 60px;
    }
    .dp-gauge-wrap .intel-v2-gauge-wrap { width: 60px; height: 60px; }
    .dp-gauge-wrap svg { width: 60px; height: 60px; }
    .dp-gauge-wrap .intel-v2-gauge-score { font-size: 13px; }
    .dp-quality {
      font-family: var(--font-mono);
      font-size: 8px; font-weight: 700;
      letter-spacing: 0.08em; text-transform: uppercase;
      margin-top: 2px;
    }
    .dp-body-col {
      flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px;
      justify-content: center; text-align: left;
    }
    .dp-row0 {
      display: flex; align-items: baseline; gap: 6px;
    }
    .dp-row1 {
      display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
    }
    .dp-alert-type {
      font-family: var(--font-mono);
      font-size: 9px; font-weight: 600;
      letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--text-muted);
    }
    .dp-ticker {
      font-size: 14px; font-weight: 700; color: var(--text-primary); cursor: pointer;
    }
    .dp-ticker:hover { text-decoration: underline; }
    .dp-price {
      font-family: var(--font-mono);
      font-size: 12px; color: var(--text-secondary);
    }
    .dp-time {
      font-size: 10px; color: var(--text-muted); margin-left: auto;
    }
    .dp-row2 {
      display: flex; flex-wrap: wrap; gap: 4px;
    }
    .dp-badge {
      font-size: 9px !important; padding: 1px 5px !important;
    }
    .dp-row3 {
      font-family: var(--font-mono);
      font-size: 11px; color: var(--text-muted);
    }
    .dp-earnings-warn {
      color: var(--amber);
      font-weight: 600;
    }
    .dp-chg {
      font-family: var(--font-mono);
      font-size: 11px; color: var(--text-muted);
    }
    .dp-chg-up { color: var(--emerald); }
    .dp-chg-down { color: var(--red); }

    /* ─── Dashboard Pulse Widget v2 (Variant C) ───────────────────────────────
       Row layout that mirrors Pulse v3 .feed-xl row grammar (gauge on RIGHT,
       inline ts/ticker/price/chg/chips). Halo + orbit appear only on rank
       ≥ 100 alerts to match the Pulse v3 portal canvas gating. Scoped under
       .dpv2-section so the legacy .dp-* rules above are unaffected. */
    .dpv2-section { padding: 16px 0 8px; margin-top: 32px; }
    .dpv2-card {
      background: var(--surface, #0D1526);
      border: 1px solid var(--border, #1E293B);
      border-radius: 10px;
      overflow: hidden;
    }
    .dpv2-bucket-head {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--text-secondary, #94A3B8);
      font-weight: 700;
      padding: 8px 14px 6px 14px;
      background: rgba(255,255,255,0.015);
      border-bottom: 1px solid var(--border, #1E293B);
      border-top: 1px solid var(--border, #1E293B);
    }
    .dpv2-card > .dpv2-bucket-head:first-child { border-top: none; }
    .dpv2-row {
      display: grid;
      grid-template-columns: 80px auto auto minmax(0,1fr) 60px;
      grid-template-areas:
        "ticker price chg . gauge"
        "ticker chip  chip chip gauge";
      column-gap: 12px;
      row-gap: 8px;
      padding: 18px 14px;
      align-items: center;
      border-bottom: 1px solid var(--border, #1E293B);
      position: relative;
      isolation: isolate;
      transition: background 0.12s;
    }
    .dpv2-row > .dpv2-ticker { grid-area: ticker; align-self: start; padding-top: 1px; }
    .dpv2-row > .dpv2-price  { grid-area: price; }
    .dpv2-row > .dpv2-chg-up,
    .dpv2-row > .dpv2-chg-down { grid-area: chg; }
    .dpv2-row > .dpv2-chip-row { grid-area: chip; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
    .dpv2-row > .dpv2-gauge-cell { grid-area: gauge; }
    .dpv2-row:last-of-type { border-bottom: none; }
    /* PR #820 — accent stripes removed per UX (dashboard only shows confluence,
       so per-row color-coding adds noise). Keep --row-accent CSS variable
       for the hover sweep gradient (used by .dpv2-row::before). */
    .dpv2-row.feed-confluence { --row-accent: rgba(139,92,246,0.25); }
    .dpv2-row.feed-bull       { --row-accent: rgba(16,185,129,0.25); }
    .dpv2-row.feed-bear       { --row-accent: rgba(239,68,68,0.25); }
    .dpv2-row.feed-amber      { --row-accent: rgba(245,158,11,0.25); }
    .dpv2-row.feed-sma        { --row-accent: rgba(59,130,246,0.25); }
    .dpv2-row.feed-fib        { --row-accent: rgba(20,184,166,0.25); }
    /* TAN-519: row accents for gap_filled (white) + rsi bear (orange) so chip and row align */
    .dpv2-row.feed-gap-fill   { --row-accent: rgba(255,255,255,0.25); }
    .dpv2-row.feed-rsi-bear   { --row-accent: rgba(255,102,0,0.25); }
    .dpv2-row.feed-neutral    { --row-accent: rgba(100,116,139,0.25); }
    /* TAN-940 (Pulse v4 surface) — SETUP alert-type accents.
       Patterns (yellow, vision-gated) | Scripts (pink, cheap/frequent).
       Confluence reuses feed-confluence (purple) above. */
    .dpv2-row.feed-pattern    { --row-accent: rgba(250,204,21,0.25); }
    .dpv2-row.feed-script     { --row-accent: rgba(236,72,153,0.25); }

    /* TAN-974 — SETUP alert rows (patterns/scripts). These rows carry the
       native feed-m/s/n tier class (for layout) PLUS a feed-pattern /
       feed-script accent class. The tier class drives border-left-color by
       default (green/red/grey); these rules OVERRIDE the stripe to the
       type color (yellow pattern / pink script) and lay a subtle tinted
       gradient across the row so it reads as pattern/script, not bullish/
       bearish. Scoped to [data-setup="1"] (unique to renderPulseV4SetupRow)
       so this never collides with a real alert row. */
    .pulse-v3-active [data-setup="1"].feed-pattern,
    .pulse-v3-active [data-setup="1"].feed-pattern.feed-m,
    .pulse-v3-active [data-setup="1"].feed-pattern.feed-s,
    .pulse-v3-active [data-setup="1"].feed-pattern.feed-n {
      border-left-color: #FACC15 !important;
      background: linear-gradient(90deg, rgba(250,204,21,0.10) 0%, transparent 16%);
    }
    .pulse-v3-active [data-setup="1"].feed-script,
    .pulse-v3-active [data-setup="1"].feed-script.feed-m,
    .pulse-v3-active [data-setup="1"].feed-script.feed-s,
    .pulse-v3-active [data-setup="1"].feed-script.feed-n {
      border-left-color: #EC4899 !important;
      background: linear-gradient(90deg, rgba(236,72,153,0.10) 0%, transparent 16%);
    }
    .pulse-v3-active [data-setup="1"].feed-pattern:hover {
      background: linear-gradient(90deg, rgba(250,204,21,0.18) 0%, transparent 16%);
    }
    .pulse-v3-active [data-setup="1"].feed-script:hover {
      background: linear-gradient(90deg, rgba(236,72,153,0.18) 0%, transparent 16%);
    }
    /* Hover sweep — matches PR #817 Pulse v3 tab pattern */
    @media (hover: hover) {
      .dpv2-row::before {
        content: "";
        position: absolute;
        inset: 0 40% 0 0;
        pointer-events: none;
        background: linear-gradient(90deg, var(--row-accent, transparent) 0%, transparent 100%);
        opacity: 0;
        transition: opacity 0.18s ease;
        z-index: -1;
      }
      .dpv2-row:hover::before { opacity: 0.50; }
    }
    .dpv2-ticker {
      font-size: 14px;
      font-weight: 700;
      color: var(--text-primary, #F1F5F9);
      letter-spacing: 0.02em;
      cursor: pointer;
      text-decoration: underline;
      text-decoration-color: rgba(255,255,255,0.2);
      text-underline-offset: 3px;
    }
    .dpv2-ticker:hover { text-decoration-color: rgba(255,255,255,0.6); }
    .dpv2-price {
      font-family: var(--font-mono);
      font-size: 13px;
      color: var(--text-secondary, #94A3B8);
      font-weight: 600;
      white-space: nowrap;
    }
    .dpv2-chg-up {
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 700;
      color: var(--emerald, #10B981);
      white-space: nowrap;
    }
    .dpv2-chg-down {
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 700;
      color: var(--red, #EF4444);
      white-space: nowrap;
    }
    .dpv2-chip-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      min-width: 0;
    }
    .dpv2-chip-row .chip {
      font-size: 11px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 3px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      background: #0B1120;
      border: 1px solid #1E293B;
      color: var(--text-secondary);
      white-space: nowrap;
      font-family: var(--font-mono);
    }
    /* Mirror live Pulse v3 chip color system for FIB/MACD/RSI/CLOUD/SMA/etc. */
    .dpv2-chip-row .chip.signal { color: var(--info); border-color: rgba(59,130,246,0.40); background: rgba(59,130,246,0.10); }
    .dpv2-chip-row .chip.macd   { color: var(--warn); border-color: rgba(245,158,11,0.40); background: rgba(245,158,11,0.10); }
    .dpv2-chip-row .chip.macd.bull { color: #00cc44; border-color: rgba(0,204,68,0.30); background: rgba(0,204,68,0.15); }
    .dpv2-chip-row .chip.macd.bear { color: #ef4444; border-color: rgba(239,68,68,0.40); background: rgba(239,68,68,0.12); }
    .dpv2-chip-row .chip.signal.bull { color: #00cc44; border-color: rgba(0,204,68,0.30); background: rgba(0,204,68,0.15); }
    .dpv2-chip-row .chip.signal.bear { color: #ef4444; border-color: rgba(239,68,68,0.40); background: rgba(239,68,68,0.12); }
    .dpv2-chip-row .chip.signal.cloud-amber {
      color: #FBBF24;
      border: 1px solid rgba(245, 158, 11, 0.55);
      background: rgba(245, 158, 11, 0.16);
    }
    .dpv2-chip-row .chip.signal.gap-fill { color: #FFFFFF; border-color: rgba(255,255,255,0.40); background: rgba(255,255,255,0.10); }
    .dpv2-chip-row .chip.signal.fib { color: #14B8A6; border-color: rgba(20,184,166,0.40); background: rgba(20,184,166,0.10); }
    .dpv2-chip-row .chip.signal.sma-50 { color: #60A5FA; border-color: rgba(96,165,250,0.40); background: rgba(96,165,250,0.10); }
    .dpv2-chip-row .chip.signal.sma-200 { color: #2563EB; border-color: rgba(37,99,235,0.45); background: rgba(37,99,235,0.12); }
    .dpv2-chip-row .chip.rsi.bull { color: #00cc44; border-color: rgba(0,204,68,0.30); background: rgba(0,204,68,0.15); }
    .dpv2-chip-row .chip.rsi.bear { color: #ff6600; border-color: rgba(255,102,0,0.30); background: rgba(255,102,0,0.15); }
    .dpv2-chip-row .chip.rsi.hc   { border-width: 1.5px; }
    /* TAN-974 + Matt 2026-07-13: pattern (yellow) + script/TCM (pink) chips.
       Outline-first parity with .chip.signal / cloud-amber (border + light fill),
       not heavy gradient “missing border” look. */
    .pulse-v3-row .chip.pattern,
    .pulse-v3-active .chip.pattern {
      color: #FACC15;
      border: 1px solid rgba(250,204,21,0.45);
      background: rgba(250,204,21,0.10);
      display: inline-flex; align-items: center; gap: 6px;
    }
    .pulse-v3-row .chip.pattern.bull,
    .pulse-v3-row .chip.pattern.bear,
    .pulse-v3-active .chip.pattern.bull,
    .pulse-v3-active .chip.pattern.bear {
      color: #FACC15;
      border-color: rgba(250,204,21,0.45);
      background: rgba(250,204,21,0.10);
    }
    .pulse-v3-row .chip.script,
    .pulse-v3-active .chip.script {
      color: #F472B6;
      border: 1px solid rgba(236,72,153,0.50);
      background: rgba(236,72,153,0.10);
      display: inline-flex; align-items: center; gap: 6px;
    }
    .pulse-v3-row .chip.script.bull,
    .pulse-v3-row .chip.script.bear,
    .pulse-v3-active .chip.script.bull,
    .pulse-v3-active .chip.script.bear {
      color: #F472B6;
      border-color: rgba(236,72,153,0.50);
      background: rgba(236,72,153,0.10);
    }
    .pulse-v3-row .chip .setup-grade {
      font-size: 10px; font-weight: 800;
      width: 16px; height: 16px;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: 3px;
      letter-spacing: 0;
    }
    .pulse-v3-row .chip .setup-grade-a { background: rgba(52,211,153,0.25); color: #34D399; }
    .pulse-v3-row .chip .setup-grade-b { background: rgba(148,163,184,0.22); color: #CBD5E1; }
    .pulse-v3-row .chip .setup-grade-c { background: rgba(148,163,184,0.12); color: #64748B; }
    .pulse-v3-row .chip .tcm-candle-icon {
      display: inline-flex; align-items: center; justify-content: center;
      width: 13px; height: 14px; margin-right: 3px; opacity: 0.85;
      color: inherit; vertical-align: middle; cursor: help;
    }
    .pulse-v3-row .chip .tcm-candle-icon svg { display: block; }
    /* Setup detail panel (expand) */
    .pulse-v3-detail-panel .setup-detail-body { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
    .pulse-v3-detail-panel .setup-detail-head { display: flex; align-items: center; gap: 10px; }
    .pulse-v3-detail-panel .setup-grade-badge { font-size: 12px; font-weight: 800; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; }
    .pulse-v3-detail-panel .setup-grade-badge.grade-a { background: rgba(52,211,153,0.25); color: #34D399; }
    .pulse-v3-detail-panel .setup-grade-badge.grade-b { background: rgba(148,163,184,0.22); color: #CBD5E1; }
    .pulse-v3-detail-panel .setup-grade-badge.grade-c { background: rgba(148,163,184,0.12); color: #64748B; }
    .pulse-v3-detail-panel .setup-detail-label { font-size: 13px; font-weight: 700; color: var(--text-primary, #F1F5F9); text-transform: capitalize; }
    .pulse-v3-detail-panel .setup-detail-price { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary, #94A3B8); }
    .pulse-v3-detail-panel .setup-detail-note { font-size: 11px; color: var(--text-muted, #8A99B0); font-style: italic; }
    .pulse-v3-detail-panel .setup-detail-reason { font-size: 11px; color: var(--text-secondary, #94A3B8); line-height: 1.4; padding: 6px 10px; border-left: 2px solid rgba(148,163,184,0.25); margin-top: 2px; }
    .pulse-v3-detail-panel .setup-detail-narrative { font-size: 13px; font-weight: 500; color: var(--text-primary, #F1F5F9); line-height: 1.5; padding: 4px 0 2px; }
    .dpv2-gauge-cell {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 8px;
    }
    .dpv2-rank {
      position: relative;
      width: 52px; height: 52px;
      flex-shrink: 0;
      border-radius: 50%;
      border: 1.5px solid var(--purple, #8B5CF6);
      display: flex; align-items: center; justify-content: center;
    }
    .dpv2-rank .dpv2-num {
      font-size: 17px;
      font-weight: 700;
      color: var(--text-primary, #F1F5F9);
      line-height: 1;
      z-index: 3;
      position: relative;
    }
    .dpv2-viewall {
      display: block;
      padding: 12px 14px;
      font-size: 12px;
      color: var(--blue, #3B82F6);
      text-decoration: none;
      text-align: left;
      font-weight: 600;
      border-top: 1px solid var(--border, #1E293B);
    }
    .dpv2-viewall:hover { color: #60A5FA; text-decoration: underline; }
    @media (max-width: 768px) {
      .dpv2-row {
        grid-template-columns: 64px auto auto minmax(0,1fr) 56px;
        grid-template-areas:
          "ticker price chg . gauge"
          "ticker chip  chip chip gauge";
        column-gap: 10px;
        row-gap: 6px;
        padding: 14px 10px;
      }
      .dpv2-bucket-head { padding: 6px 10px 4px 10px; font-size: 9.5px; }
    }

    /* ─── Mobile (≤480px) — dashboard preview card ───────────────────────────
       Plan B: 2-row grid. Row 1 = ticker/price/chg/gauge. Row 2 = chip
       spanning under ticker+price+chg. Gauge spans both rows, vertically
       centered. No per-row timestamp (bucket header above provides date). */
    @media (max-width: 480px) {
      .dpv2-row {
        grid-template-columns: 64px auto auto minmax(0,1fr) 52px;
        grid-template-areas:
          "ticker price chg . gauge"
          "ticker chip  chip chip gauge";
        column-gap: 6px;
        row-gap: 4px;
        padding: 12px 8px;
      }
      .dpv2-ticker { font-size: 13px; }
      .dpv2-price  { font-size: 12px; }
      .dpv2-chg-up, .dpv2-chg-down { font-size: 11px; }
      .dpv2-chip-row {
        min-width: 0;
        overflow: hidden;
      }
      .dpv2-chip-row .chip {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .dpv2-gauge-cell {
        padding-right: 0;
        justify-content: center;
      }
      /* Gauge kept at 52×52 to preserve shared orbit math (PR #813 lesson). */
      .dpv2-rank {
        width: 52px;
        height: 52px;
      }
      .dpv2-rank .dpv2-num { font-size: 14px; }
      .dpv2-bucket-head { padding: 6px 8px 4px 8px; font-size: 9.5px; }
    }

    /* ─── Pulse Grid View ──────────────────────────────────────────────────── */
    .pulse-grid-active .content-wrap,
    .pulse-grid-active.content-wrap {
      max-width: none;
      padding-left: 16px;
      padding-right: 16px;
    }
    .pulse-grid {
      display: grid;
      gap: 10px;
      grid-template-columns: repeat(auto-fill, minmax(390px, 1fr));
    }

    .pulse-grid-tile {
      background: rgba(20, 27, 45, 0.95);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 10px;
      overflow: hidden;
      cursor: default;
      transition: border-color 0.15s ease;
      padding: 10px;
      position: relative;
    }
    .pulse-grid-tile:hover {
      border-color: rgba(255,255,255,0.25);
    }

    .pulse-grid-chart {
      aspect-ratio: 1 / 1;
      width: 100%;
      border-radius: 6px;
      overflow: hidden;
      margin-bottom: 8px;
      cursor: zoom-in;
      position: relative;
    }
    .pulse-grid-chart svg {
      width: 100%;
      height: 100%;
      display: block;
    }
    .pulse-grid-expand {
      position: absolute;
      top: 6px;
      right: 6px;
      width: 24px;
      height: 24px;
      background: rgba(0,0,0,0.5);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-muted);
      font-size: 14px;
      opacity: 0;
      transition: opacity 0.15s ease;
      pointer-events: none;
    }
    .pulse-grid-tile:hover .pulse-grid-expand {
      opacity: 1;
    }

    .pulse-grid-info {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }
    .pulse-grid-ticker {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 18px;
      color: var(--text-primary);
    }
    .pulse-grid-price {
      font-family: var(--font-mono);
      font-size: 14px;
      color: var(--text-secondary);
    }
    .pulse-grid-change {
      font-family: var(--font-mono);
      font-size: 14px;
      font-weight: 600;
    }
    .pulse-grid-change.positive { color: var(--emerald); }
    .pulse-grid-change.negative { color: var(--red); }
    .pulse-grid-score {
      margin-left: auto;
      flex-shrink: 0;
    }
    .pulse-grid-score .intel-v2-gauge-wrap {
      width: 54px;
      height: 54px;
    }
    .pulse-grid-score .intel-v2-gauge-score {
      font-size: 14px;
    }
    .pulse-grid-score svg {
      width: 54px !important;
      height: 54px !important;
    }
    .pulse-grid-tier {
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-top: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* View toggle buttons */
    .pulse-view-toggle {
      display: inline-flex;
      gap: 2px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 8px;
      padding: 3px;
      margin-right: 12px;
    }
    .pulse-view-btn {
      padding: 6px 12px;
      border-radius: 6px;
      border: none;
      background: transparent;
      color: var(--text-muted);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s;
    }
    .pulse-view-btn:hover {
      color: var(--text-primary);
      background: rgba(255,255,255,0.06);
    }
    .pulse-view-btn.active {
      background: rgba(59,130,246,0.15);
      color: var(--blue);
      border: 1px solid rgba(59,130,246,0.25);
    }

    /* ================================================================
       HEATMAPS: Single Scrollable Page Sections
       ================================================================ */
    .heatmaps-section {
      margin-bottom: 32px;
      padding-bottom: 24px;
      border-bottom: 1px solid var(--border);
    }
    .heatmaps-section:last-of-type {
      border-bottom: none;
    }
    .heatmaps-section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }
    .heatmaps-section-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--text-primary);
    }

    /* ================================================================
       SECTOR TREEMAP (finviz-style)
       ================================================================ */
    .treemap-grid {
      display: grid;
      gap: 3px;
      width: 100%;
      grid-template-columns: 3fr 1.3fr 1.2fr 1fr 0.9fr 0.8fr;
      grid-template-rows: minmax(120px, auto) minmax(100px, auto) minmax(60px, auto);
    }
    .treemap-w30 { grid-column: 1 / 3; grid-row: 1 / 4; min-height: 280px; }
    .treemap-w13 { grid-column: 3; grid-row: 1; }
    .treemap-w12 { grid-column: 4; grid-row: 1; }
    .treemap-w10 { grid-column: 5; grid-row: 1; }
    .treemap-w9  { grid-column: 6; grid-row: 1; }
    .treemap-w8  { grid-column: 3; grid-row: 2; }
    .treemap-w6  { grid-column: 4; grid-row: 2; }
    .treemap-w4  { grid-column: 5; grid-row: 2; }
    .treemap-w3:nth-child(9)  { grid-column: 6; grid-row: 2; }
    .treemap-w3:nth-child(10) { grid-column: 3; grid-row: 3; }
    .treemap-w2  { grid-column: 4; grid-row: 3; }

    .treemap-block {
      border-radius: 6px;
      padding: 12px 10px 8px;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
      min-height: 100px;
      transition: opacity 150ms ease;
    }
    .treemap-block:hover { opacity: 0.88; }
    .treemap-block-name {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 13px;
      color: #fff;
      line-height: 1.2;
    }
    .treemap-block-ticker {
      font-family: var(--font-mono);
      font-size: 11px;
      color: rgba(255,255,255,0.55);
      margin-top: 1px;
    }
    .treemap-block-pct {
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 600;
      color: #fff;
      margin-top: 4px;
    }
    .treemap-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 3px;
      margin-top: auto;
      padding-top: 8px;
    }
    .treemap-chip {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 600;
      padding: 2px 6px;
      border-radius: 3px;
      color: #fff;
      cursor: pointer;
      white-space: nowrap;
      transition: opacity 150ms ease;
      line-height: 1.4;
    }
    .treemap-chip:hover { opacity: 0.75; }
    .treemap-chip-pct {
      font-size: 9px;
      opacity: 0.8;
    }
    .treemap-other-section {
      margin-top: 12px;
      padding-top: 10px;
      border-top: 1px solid var(--border);
    }
    .treemap-other-label {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 600;
      color: var(--text-muted);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin-bottom: 8px;
    }
    .treemap-other-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
    }

    @media (max-width: 900px) {
      .treemap-grid {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto;
      }
      /* Reset every weight-class AND the :nth-child overrides from the base
         rule so they don't force columns 3/6 on a 3-col (or narrower) grid. */
      .treemap-w30,
      .treemap-w13,
      .treemap-w12,
      .treemap-w10,
      .treemap-w9,
      .treemap-w8,
      .treemap-w6,
      .treemap-w4,
      .treemap-w3,
      .treemap-w3:nth-child(9),
      .treemap-w3:nth-child(10),
      .treemap-w2 {
        grid-column: auto;
        grid-row: auto;
        min-height: auto;
      }
      .treemap-block { min-height: auto; }
      .treemap-w30 { grid-column: span 3; }
    }
    @media (max-width: 600px) {
      .treemap-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
      }
      /* Belt-and-suspenders: explicit auto placement on the two :nth-child
         rules so they can't re-introduce column 3/6 on a 2-col grid. */
      .treemap-w3:nth-child(9),
      .treemap-w3:nth-child(10) {
        grid-column: auto;
        grid-row: auto;
      }
      .treemap-w30 { grid-column: span 2; }
      .treemap-block {
        padding: 10px 10px 8px;
        min-height: 72px;
      }
      .treemap-block-name { font-size: 12px; line-height: 1.2; }
      .treemap-block-ticker { font-size: 10px; }
      .treemap-block-pct { font-size: 12px; margin-top: 2px; }
      .treemap-chips { padding-top: 6px; gap: 3px; }
      .treemap-chip { font-size: 9px; padding: 2px 5px; }
      .treemap-chip-pct { font-size: 9px; }
    }
    /* Very narrow phones (<=340px, e.g. iPhone 5/SE-1) only: drop to single
       column. Keep 2-col at iPhone SE-2/3 (375px) and up. */
    @media (max-width: 340px) {
      .treemap-grid { grid-template-columns: 1fr; }
      .treemap-w30 { grid-column: span 1; }
    }

    /* ================================================================
       TARGET ZONE TICKERS (Rankings tab)
       ================================================================ */
    .target-zones-row {
      display: flex;
      gap: 12px;
      margin-bottom: 16px;
    }
    .target-zone-card {
      flex: 1;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 12px 14px;
      min-width: 0;
    }
    .tz-card-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
    }
    .tz-card-title {
      font-size: 11px;
      font-weight: 700;
      font-family: var(--font-mono);
      color: var(--text-secondary);
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }
    .tz-card-count {
      font-size: 10px;
      font-weight: 700;
      font-family: var(--font-mono);
      padding: 1px 6px;
      border-radius: 4px;
      display: inline-flex;
      align-items: center;
      gap: 0;
      font-variant-numeric: tabular-nums;
    }
    /* TAN-603/604 held suffix — must live in app.css so Terminal/CC popover
       (which does NOT load portfolio.css) does not glue total+held → "111".
       Rankings already gets the same rules from portfolio.css; these mirror. */
    .tz-card-count .tz-held-suffix {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      margin-left: 8px;
      padding-left: 8px;
      border-left: 1px solid rgba(255, 255, 255, 0.18);
      color: var(--pf-held-counter-fg, #FBBF24);
      font-variant-numeric: tabular-nums;
    }
    .tz-card-count .tz-held-suffix::before {
      content: '';
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--pf-held-counter-fg, #FBBF24);
      box-shadow: 0 0 6px var(--pf-held-counter-fg, #FBBF24);
    }
    .tz-card-body {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .tz-side {
      display: flex;
      align-items: flex-start;
      gap: 8px;
    }
    .tz-side-label {
      font-size: 10px;
      font-weight: 700;
      font-family: var(--font-mono);
      letter-spacing: 0.5px;
      min-width: 30px;
      padding-top: 3px;
    }
    .tz-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 3px;
      align-items: center;
    }
    .tz-chip {
      display: inline-flex;
      align-items: center;
      font-size: 10px;
      font-family: var(--font-mono);
      font-weight: 600;
      color: var(--text-primary);
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 1px 5px;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s;
      white-space: nowrap;
    }
    .tz-chip:hover {
      background: var(--blue-dim);
      border-color: var(--blue);
    }
    @media (max-width: 900px) {
      .target-zones-row {
        flex-direction: column;
      }
    }

    /* Coord #20: CC Near Targets hover popover — large T1/T2/T3 panel */
    .cc-near-targets-popover {
      position: fixed;
      z-index: 12000;
      background: var(--surface, #0f1624);
      border: 1px solid var(--border, rgba(148,163,184,0.18));
      border-radius: 12px;
      box-shadow: 0 24px 64px rgba(0,0,0,0.55), 0 0 0 1px rgba(59,130,246,0.12);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      min-width: 0;
      max-width: calc(100vw - 24px);
      box-sizing: border-box;
    }
    .cc-near-targets-popover .nt-pop-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 14px;
      border-bottom: 1px solid var(--border, rgba(148,163,184,0.12));
      flex-shrink: 0;
      background: rgba(15,22,36,0.96);
    }
    .cc-near-targets-popover .nt-pop-title {
      font-family: var(--font-mono, ui-monospace, monospace);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-secondary, #94a3b8);
    }
    .cc-near-targets-popover .nt-pop-close {
      border: 0;
      background: transparent;
      color: var(--text-muted, #64748b);
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
      padding: 2px 6px;
      border-radius: 6px;
    }
    .cc-near-targets-popover .nt-pop-close:hover {
      color: var(--text-primary, #e2e8f0);
      background: rgba(255,255,255,0.06);
    }
    .cc-near-targets-popover .nt-pop-body {
      padding: 14px 16px 16px;
      overflow: auto;
      flex: 1 1 auto;
    }
    .cc-near-targets-popover .target-zones-row--popover {
      margin-bottom: 0;
      gap: 14px;
    }
    .cc-near-targets-popover .target-zone-card {
      padding: 14px 16px;
      min-height: 120px;
    }
    .cc-near-targets-popover .tz-chip {
      font-size: 11px;
      padding: 3px 8px;
    }
    /* Held chips gold in CC popover (portfolio.css not loaded on Terminal) */
    .cc-near-targets-popover .tz-chip.pf-held {
      border-color: rgba(251, 191, 36, 0.55);
      background: rgba(251, 191, 36, 0.14);
      color: #FBBF24;
    }
    .cc-near-targets-popover .tz-chip.pf-watched {
      border-color: rgba(6, 182, 212, 0.55);
      background: rgba(6, 182, 212, 0.12);
      color: #22D3EE;
    }
    .cc-near-targets-popover .tz-card-count {
      font-size: 11px;
      padding: 2px 8px;
    }
    .cc-near-targets-popover .nt-pop-empty {
      color: var(--text-muted, #64748b);
      font-size: 13px;
      padding: 24px 8px;
      text-align: center;
    }
    .kpi-action-tile--near-targets:focus-visible {
      outline: 2px solid rgba(59,130,246,0.55);
      outline-offset: 2px;
    }

    /* ================================================================
       POI SIGNAL BADGES (Rankings tab)
       ================================================================ */
    .poi-badge {
      display: inline-flex;
      align-items: center;
      font-size: 10px;
      font-family: var(--font-mono);
      padding: 1px 5px;
      border-radius: 4px;
      margin-left: 6px;
      background: rgba(139, 92, 246, 0.15);
      color: #A78BFA;
      border: 1px solid rgba(139, 92, 246, 0.25);
      cursor: pointer;
      position: relative;
      transition: background 0.15s, border-color 0.15s;
      vertical-align: middle;
    }
    .poi-badge:hover {
      background: rgba(139, 92, 246, 0.25);
      border-color: rgba(139, 92, 246, 0.4);
    }
    .poi-tooltip {
      position: absolute;
      top: calc(100% + 4px);
      left: 0;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 4px 8px;
      font-size: 10px;
      font-family: var(--font-mono);
      color: var(--text-secondary);
      white-space: nowrap;
      z-index: 100;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.15s;
      line-height: 1.3;
    }
    .poi-tooltip::after {
      content: '';
      position: absolute;
      bottom: 100%;
      left: 12px;
      border: 4px solid transparent;
      border-bottom-color: var(--border);
    }
    .poi-badge:hover .poi-tooltip {
      opacity: 1;
    }
    .poi-portal-tip {
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 8px 12px;
      font-family: var(--font-mono);
      color: var(--text-secondary);
      white-space: nowrap;
      box-shadow: 0 4px 12px rgba(0,0,0,0.4);
      max-width: 320px;
    }

    /* ─── PR2: Grid tile "X ago" timestamp ─────────────────────── */
    .pulse-grid-rsi {
      padding: 2px 12px 0;
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 600;
    }
    .pulse-grid-rsi-badge {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 2px 8px;
      border-radius: 4px;
      letter-spacing: 0.02em;
    }
    .pulse-grid-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 4px;
      margin-top: 4px;
    }
    .pulse-grid-time {
      font-family: var(--font-mono);
      font-size: 10px;
      color: var(--text-muted);
      opacity: 0.6;
      white-space: nowrap;
      flex-shrink: 0;
    }

    /* ─── PR2: Sound toggle button ─────────────────────────────── */
    .poll-sound-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      border-radius: 6px;
      border: 1px solid rgba(255,255,255,0.1);
      background: rgba(255,255,255,0.04);
      color: var(--text-muted);
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
      margin-left: auto;
      flex-shrink: 0;
    }
    .poll-sound-btn:hover {
      background: rgba(255,255,255,0.1);
      color: var(--text-primary);
    }

    /* ─── PR2: New alert slide-in animation ────────────────────── */
    @keyframes poll-slide-in {
      0% {
        opacity: 0;
        transform: translateY(-20px);
        max-height: 0;
      }
      100% {
        opacity: 1;
        transform: translateY(0);
        max-height: 600px;
      }
    }
    .poll-new-alert.poll-slide-in {
      animation: poll-slide-in 0.4s var(--ease) forwards, poll-border-glow 3s ease-out forwards;
    }
    /* TAN-987: pulse feed rows (setup + confluence/EV) get `poll-new-alert`
       baked in at render time when the alert is genuinely new (per dedup-key
       diff in renderIntel). Fire the slide-in + border-glow directly off the
       class — no JS rAF needed, so it works for EVERY new alert in a batch,
       not just the deep-link row. */
    .pulse-v3-row.poll-new-alert,
    .dpv2-row.poll-new-alert {
      animation: poll-slide-in 0.4s var(--ease) forwards, poll-border-glow 4s ease-out forwards;
    }
    @keyframes poll-border-glow {
      0% { box-shadow: 0 0 0 1px rgba(34,197,94,0.6), 0 0 12px 2px rgba(34,197,94,0.25); }
      70% { box-shadow: 0 0 0 1px rgba(34,197,94,0.3), 0 0 8px 1px rgba(34,197,94,0.1); }
      100% { box-shadow: none; }
    }

    /* ════════════════════════════════════════════════════════════════════
       TERMINAL LIVENESS — TAN-633 (epic TAN-631)
       PTA target HIT callout. Restraint-first: a thin blue/cyan light traces
       the card border for a couple of passes, then the card SETTLES into a
       static, plainly-visible resolved HIT state (no perpetual motion, never
       hidden/muted). NO gold, NO scale-pop, NO flash. Palette: --blue / cyan.
       JS (js/liveness.js) adds/removes .pta-hit-sweep and toggles .is-hit.
       ════════════════════════════════════════════════════════════════════ */

    /* Solution C — Soft feathered shimmer sweep. Matt picked this 2026-06-08.
       A wide, gentle cyan glow gradient sweeps the perimeter with a slight
       blur, wrapping every corner smoothly (no rigid line, no tangent-scrape).
       The glow IS the border, so it bends perfectly around the rounded corners.
       ~4.2s linear lap (linear is required for a smooth seamless rotation —
       see note on the animation rule). JS removes .pta-hit-sweep after the const
       so it stops and settles to the static HIT. NO gold; blue/cyan only. */
    @property --pta-hit-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
    @keyframes pta-hit-shimmer { to { --pta-hit-ang: 360deg; } }
    /* Conic glow confined to the border RING via mask-composite (widely
       supported in Chromium/WebKit/FF). The ::before sits ABOVE the card
       (z-index:2) but only the 2.5px ring is painted — mask cuts out the
       center — so it never washes over the card content. The card body is
       forced fully opaque so even if an engine ignores the mask, content
       stays readable rather than glowing through. */
    .alert-card.pta-hit-sweep {
      position: relative;
      isolation: isolate;
    }
    .alert-card.pta-hit-sweep::before {
      content: "";
      position: absolute;
      inset: -1px;
      border-radius: calc(var(--radius, 8px) + 1px);
      padding: 2.5px;             /* ring thickness */
      background: conic-gradient(from var(--pta-hit-ang),
        rgba(34,211,238,0)    0deg,
        rgba(59,130,246,0.25) 120deg,
        rgba(34,211,238,0.75) 200deg,
        rgba(103,232,249,1)   250deg,
        rgba(34,211,238,0.75) 300deg,
        rgba(59,130,246,0.25) 340deg,
        rgba(34,211,238,0)    360deg);
      -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
              mask-composite: exclude;
      pointer-events: none;
      z-index: 2;
      /* MUST be linear: a continuously rotating conic loop with ease-in-out
         decelerates hard toward 100% then snaps back to 0deg, which reads as a
         ~2s stall at the seam. linear keeps the rotation perfectly constant.
         BOUNDED to --pta-hit-laps (default 3) rather than `infinite`: if a
         re-render ever leaves the class on a stale node, the glow still
         self-terminates instead of spinning forever. JS still removes the
         class on schedule; this is the belt-and-suspenders stop. */
      --pta-hit-laps: 3;
      animation: pta-hit-shimmer 4.2s linear var(--pta-hit-laps);
      will-change: --pta-hit-ang;
    }
    /* soft ambient bloom OUTSIDE the card (behind it) so the HIT reads at a
       glance — this one is safe to sit behind since it's a pure box-shadow. */
    .alert-card.pta-hit-sweep::after {
      content: "";
      position: absolute;
      inset: -5px;
      border-radius: calc(var(--radius, 8px) + 5px);
      box-shadow: 0 0 22px 3px rgba(34,211,238,0.20);
      pointer-events: none;
      z-index: -1;
    }
    /* Fallback for engines without @property animated angle — a subtle static
       ring so the HIT still reads, never a slash. */
    @supports not (background: conic-gradient(from var(--pta-hit-ang), #000, #000)) {
      .alert-card.pta-hit-sweep::before { display: none; }
      .alert-card.pta-hit-sweep {
        box-shadow: 0 0 0 1px rgba(34,211,238,0.45), 0 0 10px 1px rgba(59,130,246,0.18);
      }
    }

    /* Static resolved HIT state — persists after the sweep ends. A HIT is the
       MOST prominent target state now (supersedes the old opacity:0.6 fade). */
    .alert-v2-target-row.is-hit {
      opacity: 1;
    }
    .alert-v2-target-row.is-hit .alert-v2-bar-fill {
      /* solid cyan fill so a resolved HIT reads instantly even at a glance */
      background: #22d3ee !important;
      box-shadow: 0 0 6px rgba(34,211,238,0.45);
    }
    .alert-v2-target-row.is-hit .alert-v2-distance {
      color: #22d3ee !important;
      font-weight: 800;
      letter-spacing: 0.04em;
    }
    /* TAN-655 (Matt 2026-06-08): removed the cyan ring around the BT/ST badge
       on HIT — it read as an ugly box. The solid cyan bar-fill + cyan HIT
       distance label already signal the HIT clearly. */

    /* ── TAN-665: Unified new-event shimmer ──────────────────────────────────
       .evt-sweep is the SAME feathered-cyan shimmer as the PTA HIT, but as a
       standalone class (not tied to .alert-card) so it can paint ANY new-event
       element: news item, MI briefing card, report card, pulse row. It runs a
       run of N laps (TAN-665 tiers: Tier 1 = 1 lap, Tier 2 = 2 laps) then ends.
       Lap TIME is always 4.2s linear on EVERY element regardless of size, so
       nothing animates faster/slower (Matt: 'same speed, do not want to get
       dizzy'). Tier only changes lap COUNT, set by --evt-laps (JS supplies it).
       Reuses the same @property angle + @keyframes pta-hit-shimmer as the HIT
       so it's one visual family. reduced-motion + @supports fallbacks cover it. */
    .evt-sweep {
      position: relative;
      isolation: isolate;
      --evt-laps: 1;            /* lap count; JS sets to 2 for Tier 2 */
      /* Ring corner radius. Real cards (.intel-card) override via their own
         border-radius cascade; square rows (.nf-row, .feed-xl) and the bare
         MI text div (#mi-narrative) have NO radius of their own, so the ring
         would otherwise trace a hard rectangle. Give a sane default here so
         every surface gets the same tidy rounded ring as the report card. */
      --evt-ring-radius: 8px;
    }
    /* Square rows / bare containers: hug the box tightly with a small radius so
       the ring reads as an intentional outline, not a clipped slab. The report
       card keeps its own 10px geometry. */
    .nf-row.evt-sweep {
      border-radius: var(--evt-ring-radius);
    }
    /* TAN-681: the Pulse v3 row (.feed-xl) is a flush, square-cornered row with a
       3px colored left accent + a 90deg tinted gradient background. A rounded
       8px cyan ring traced inside that square, left-accented row clashes badly
       ("looks nothing like the others"). Make the pulse ring SQUARE so it hugs
       the row's real geometry, and align it flush over the left accent. */
    .feed-xl.evt-sweep { --evt-ring-radius: 0px; }
    .feed-xl.evt-sweep::before,
    .feed-xl.evt-sweep::after { border-radius: 0; }
    /* shimmerEverywhere: dashboard compact pulse rows get the same square ring */
    .dpv2-row.evt-sweep { --evt-ring-radius: 0px; }
    .dpv2-row.evt-sweep::before,
    .dpv2-row.evt-sweep::after { border-radius: 0; }
    /* TAN-684 (Matt 2026-06-16, mockup): the pulse-row ring read as a
       millisecond flicker vs the PTA card. Make it pop to match the PTA family
       — pulse-SCOPED overrides only (do NOT touch the default .evt-sweep::before
       or the other surfaces). Thicker band (2.5px -> 3.5px), brighter conic
       shoulders (0.25 -> 0.40 alpha; keep the 0.75/1.0 peaks, angles, seam, and
       mask identical), and a CONTAINED inset hairline glow on the row itself so
       it reads without the rejected outward ::after bloom (no neighbor bleed —
       inset stays within the row's own box). Lap COUNT bumped to 3 from the JS
       call site. Square corners kept (TAN-681). */
    .feed-xl.evt-sweep::before {
      padding: 3.5px;
      background: conic-gradient(from var(--pta-hit-ang),
        rgba(34,211,238,0)    0deg,
        rgba(59,130,246,0.40) 120deg,
        rgba(34,211,238,0.75) 200deg,
        rgba(103,232,249,1)   250deg,
        rgba(34,211,238,0.75) 300deg,
        rgba(59,130,246,0.40) 340deg,
        rgba(34,211,238,0)    360deg);
    }
    /* TAN-684 (2026-06-17): static inset cyan hairline (box-shadow inset 0 0 0 1px
       rgba(34,211,238,.35)) removed — it left a resting cyan outline at rest /
       during sweep. The animated conic ring is the only treatment now. */
    /* Pulse-scoped color-variant parity: lift the 0.25 shoulders to 0.40 so the
       gold (held) / neutral (unclassified) pulse rings are as visible as the
       brightened cyan one. Peaks/angles/seam/mask unchanged. */
    .feed-xl.evt-sweep.evt-sweep--gold::before {
      background: conic-gradient(from var(--pta-hit-ang),
        rgba(251,191,36,0)    0deg,
        rgba(251,191,36,0.40) 120deg,
        rgba(251,191,36,0.75) 200deg,
        rgba(251,191,36,1)    250deg,
        rgba(251,191,36,0.75) 300deg,
        rgba(251,191,36,0.40) 340deg,
        rgba(251,191,36,0)    360deg);
    }
    .feed-xl.evt-sweep.evt-sweep--neutral::before {
      background: conic-gradient(from var(--pta-hit-ang),
        rgba(255,255,255,0)    0deg,
        rgba(255,255,255,0.40) 120deg,
        rgba(255,255,255,0.75) 200deg,
        rgba(255,255,255,1)    250deg,
        rgba(255,255,255,0.75) 300deg,
        rgba(255,255,255,0.40) 340deg,
        rgba(255,255,255,0)    360deg);
    }
    /* TAN-681: ring the whole MI card (.mi-section, 8px radius already) instead
       of the inner scrolling #mi-narrative text block. The card's radius matches
       --evt-ring-radius so the inset ring traces its corners cleanly. */
    .mi-section.evt-sweep { border-radius: 8px; }
    .evt-sweep::before {
      content: "";
      position: absolute;
      /* inset:0 (was -1px): the ring stays INSIDE the element's own box so a
         parent scroller (.newsfeed-list / pulse feed body have overflow:auto)
         can never clip it down to a one-sided sliver — which was rendering the
         full conic peak as a solid vertical bar on news + pulse rows. */
      inset: 0;
      border-radius: var(--evt-ring-radius);
      padding: 2.5px;             /* ring thickness — matches the HIT ring */
      background: conic-gradient(from var(--pta-hit-ang),
        rgba(34,211,238,0)    0deg,
        rgba(59,130,246,0.25) 120deg,
        rgba(34,211,238,0.75) 200deg,
        rgba(103,232,249,1)   250deg,
        rgba(34,211,238,0.75) 300deg,
        rgba(59,130,246,0.25) 340deg,
        rgba(34,211,238,0)    360deg);
      -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
              mask-composite: exclude;
      pointer-events: none;
      z-index: 2;
      /* Lap TIME fixed at 4.2s linear (constant velocity, size-independent —
         same seam reasoning as the HIT). Lap COUNT = --evt-laps (tier). */
      animation: pta-hit-shimmer 4.2s linear var(--evt-laps);
      will-change: --pta-hit-ang;
    }
    /* TAN-684: pulse-arrival color variants. ONLY the ::before conic color stops
       change — identical angles, alpha ramp shape, mask, and 4.2s/var(--evt-laps)
       animation as the default cyan ring above. No new blur/glow/box-shadow/layer.
       Default .evt-sweep (no modifier) stays cyan = watchlist; gold = held;
       neutral white = unclassified. The @supports-not + reduced-motion fallbacks
       below target .evt-sweep generically, so these modifiers inherit them. */
    .evt-sweep.evt-sweep--gold::before {
      background: conic-gradient(from var(--pta-hit-ang),
        rgba(251,191,36,0)    0deg,
        rgba(251,191,36,0.25) 120deg,
        rgba(251,191,36,0.75) 200deg,
        rgba(251,191,36,1)    250deg,
        rgba(251,191,36,0.75) 300deg,
        rgba(251,191,36,0.25) 340deg,
        rgba(251,191,36,0)    360deg);
    }
    .evt-sweep.evt-sweep--neutral::before {
      background: conic-gradient(from var(--pta-hit-ang),
        rgba(255,255,255,0)    0deg,
        rgba(255,255,255,0.25) 120deg,
        rgba(255,255,255,0.75) 200deg,
        rgba(255,255,255,1)    250deg,
        rgba(255,255,255,0.75) 300deg,
        rgba(255,255,255,0.25) 340deg,
        rgba(255,255,255,0)    360deg);
    }
    .evt-sweep::after {
      content: "";
      position: absolute;
      /* anchored to the visible box (inset:0, was -4px) so the bloom isn't
         clipped one-sided inside a scroller; the blur radius still feathers
         it softly outward where the parent allows. */
      inset: 0;
      border-radius: var(--evt-ring-radius);
      /* slightly lighter bloom than the HIT (lower-priority events) */
      box-shadow: 0 0 16px 2px rgba(34,211,238,0.16);
      pointer-events: none;
      z-index: -1;
    }
    /* Flush, stacked rows (pulse .feed-xl, news .nf-row) sit edge-to-edge with
       no separating margin, so the soft 16px ::after bloom bleeds over the
       neighbouring rows and reads as a blurry, washed-out smear (Matt: 'looks
       very bad ... gaussian blur'). Cards (.intel-card) have margins and room
       to glow, so they keep the bloom. On rows: drop the bloom entirely and
       keep ONLY the crisp traveling ring. */
    .feed-xl.evt-sweep::after, .nf-row.evt-sweep::after { display: none; }
    /* .mi-section is overflow:hidden, so the outward bloom would be clipped into
       a hard rectangular slab inside the card (same artifact as flush rows).
       Keep only the crisp traveling ring on the MI card. */
    .mi-section.evt-sweep::after { display: none; }
    @supports not (background: conic-gradient(from var(--pta-hit-ang), #000, #000)) {
      .evt-sweep::before { display: none; }
      .evt-sweep { box-shadow: 0 0 0 1px rgba(34,211,238,0.40), 0 0 8px 1px rgba(59,130,246,0.16); }
    }

    /* TAN-1120: reduced-motion pulse arrival — static cyan ring (no conic spin).
       liveness.js fanout adds .pulse-arrival-static for 4s when motion is off. */
    .pulse-arrival-static,
    .pulse-v3-row.pulse-arrival-static,
    .dpv2-row.pulse-arrival-static,
    .feed-xl.pulse-arrival-static {
      box-shadow: 0 0 0 1px rgba(34,211,238,0.50), 0 0 12px 1px rgba(59,130,246,0.22);
      outline: 1px solid rgba(34,211,238,0.35);
      outline-offset: -1px;
      transition: box-shadow 0.25s ease, outline-color 0.25s ease;
    }

    @media (prefers-reduced-motion: reduce) {
      .alert-card.pta-hit-sweep::before { animation: none; opacity: 0; }
      /* keep the subtle static ring so a HIT still reads without motion */
      .alert-card.pta-hit-sweep { box-shadow: 0 0 0 1px rgba(34,211,238,0.45), 0 0 10px 1px rgba(59,130,246,0.18); }
      /* Silent events are purely decorative — fully suppress under reduced-motion
         (no static ring, since there's no chime to pair a persistent state with). */
      .evt-sweep::before, .evt-sweep::after { animation: none; opacity: 0; display: none; }
      /* TAN-684: also drop the pulse-row contained inset glow so nothing lingers. */
      .feed-xl.evt-sweep,
      .feed-xl.evt-sweep.evt-sweep--gold,
      .feed-xl.evt-sweep.evt-sweep--neutral { box-shadow: none; }
      /* Static pulse arrival still visible under reduced-motion (paired with WAV). */
      .pulse-arrival-static {
        box-shadow: 0 0 0 1px rgba(34,211,238,0.55), 0 0 10px 1px rgba(59,130,246,0.20);
      }
    }

    /* Freshness indicator */
    .detail-freshness{text-align:center;color:var(--text-faint);font-size:.7rem;padding:12px 0 4px;letter-spacing:.03em}

    /* ─── PR2: Bucket divider refinements ──────────────────────── */
    .confluence-time-divider span {
      text-transform: uppercase;
    }

    /* ═══════════════════════════════════════════════════════════ */
    /* Unified Chart — scoped styles (PR 1)                         */
    /* All rules namespaced under .unified-chart to avoid bleed.    */
    /* ═══════════════════════════════════════════════════════════ */
    .unified-chart{
      position:relative;
      width:100%;
      height:100%;
      display:flex;
      flex-direction:column;
      background:#0F172A;
      color:#E2E8F0;
      font-family:'Inter',system-ui,sans-serif;
      overflow:hidden;
      contain:layout style paint;
    }
    .unified-chart *{box-sizing:border-box}
    .unified-chart__header{
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:8px 12px 4px;
      flex-shrink:0;
      min-height:28px;
    }
    .unified-chart__title{
      font-family:'DM Sans',system-ui,sans-serif;
      font-weight:700;
      font-size:14px;
      color:#E2E8F0;
      letter-spacing:.01em;
    }
    .unified-chart__title em{
      font-style:normal;
      color:#94A3B8;
      font-weight:600;
      margin-left:6px;
    }
    .unified-chart__readout{
      font-family:'JetBrains Mono',ui-monospace,monospace;
      font-size:11px;
      color:#C4B5FD;
      background:rgba(196,181,253,.08);
      border:1px solid rgba(196,181,253,.2);
      border-radius:4px;
      padding:2px 6px;
      font-weight:600;
      font-variant-numeric:tabular-nums;
    }
    .unified-chart__panels{
      flex:1;
      display:flex;
      flex-direction:column;
      position:relative;
      min-height:0;
    }
    .unified-chart__panel{
      position:relative;
      width:100%;
      flex-shrink:0;
    }
    .unified-chart__panel--price{flex:0 0 60%}
    .unified-chart__panel--rsi{flex:0 0 20%;border-top:1px solid #1E293B}
    .unified-chart__panel--macd{flex:0 0 10%;border-top:1px solid #1E293B}
    .unified-chart__panel--heatmap{flex:0 0 10%;border-top:1px solid #1E293B}
    .unified-chart__panel-label{
      position:absolute;
      top:4px;
      left:6px;
      font-family:'DM Sans',system-ui,sans-serif;
      font-size:9px;
      font-weight:600;
      color:#64748B;
      letter-spacing:.05em;
      text-transform:uppercase;
      pointer-events:none;
      z-index:2;
    }
    .unified-chart__price-host{
      position:absolute;
      inset:0;
    }
    .unified-chart__overlay{
      position:absolute;
      inset:0;
      pointer-events:none;
      z-index:1;
    }
    .unified-chart__canvas{
      display:block;
      width:100%;
      height:100%;
    }
    .unified-chart__placeholder{
      display:flex;
      align-items:center;
      justify-content:center;
      height:100%;
      color:#475569;
      font-size:11px;
      font-family:'Inter',sans-serif;
    }
    .unified-chart__placeholder--error{color:#F87171}
    .unified-chart__rsi-chip{
      position:absolute;
      top:4px;
      right:6px;
      font-family:'JetBrains Mono',ui-monospace,monospace;
      font-size:10px;
      font-weight:600;
      color:#C4B5FD;
      font-variant-numeric:tabular-nums;
      pointer-events:none;
      z-index:2;
      text-shadow:0 0 3px rgba(15,23,42,.9);
    }
    .unified-chart__mobile-expand-chevron{
      display:none;
      position:absolute;
      top:6px;
      right:6px;
      width:20px;
      height:20px;
      align-items:center;
      justify-content:center;
      background:rgba(15,23,42,.7);
      border-radius:50%;
      font-size:10px;
      color:#94A3B8;
      cursor:pointer;
      z-index:3;
    }
    /* Compact mode (grid tiles) */
    .unified-chart--compact .unified-chart__header{
      padding:4px 6px 2px;
      min-height:20px;
    }
    .unified-chart--compact .unified-chart__title{font-size:11px}
    .unified-chart--compact .unified-chart__readout{font-size:9px;padding:1px 4px}
    .unified-chart--compact .unified-chart__panel--price{flex:0 0 70%}
    .unified-chart--compact .unified-chart__panel--rsi{flex:0 0 20%}
    .unified-chart--compact .unified-chart__panel--macd{flex:0 0 10%}
    .unified-chart--compact .unified-chart__panel--heatmap{display:none}
    .unified-chart--compact .unified-chart__panel-label{font-size:8px}
    /* Mobile (<480px): price-only, tap to expand */
    @media (max-width:479px){
      .unified-chart__panel--rsi,
      .unified-chart__panel--macd,
      .unified-chart__panel--heatmap{display:none}
      .unified-chart__panel--price{flex:1 1 100%}
      .unified-chart{border-bottom:3px solid #1E293B}
      .unified-chart__mobile-expand-chevron{display:flex}
      .unified-chart--rsi-expanded .unified-chart__panel--price{flex:0 0 45%}
      .unified-chart--rsi-expanded .unified-chart__panel--rsi{
        display:block;flex:0 0 30%;
        animation:unified-chart-slide-up 200ms ease-out;
      }
      .unified-chart--rsi-expanded .unified-chart__panel--macd{
        display:block;flex:0 0 25%;
        animation:unified-chart-slide-up 200ms ease-out;
      }
      .unified-chart--rsi-expanded .unified-chart__mobile-expand-chevron{transform:rotate(180deg)}
    }
    @media (prefers-reduced-motion:reduce){
      .unified-chart--rsi-expanded .unified-chart__panel--rsi,
      .unified-chart--rsi-expanded .unified-chart__panel--macd{animation:none}
    }
    @keyframes unified-chart-slide-up{
      from{opacity:0;transform:translateY(8px)}
      to{opacity:1;transform:translateY(0)}
    }
    /* Pulse grid tile host — apply .unified-chart--compact at the tile level */
    .pulse-grid-chart.unified-chart{height:100%}

    /* B-8 D7 — Canon v3 top-right toolbar. Consolidates Cloud Layer pills,
       Near/Far toggle, and Timeframe pills into a single horizontal strip
       anchored to the chart canvas's top-right corner. Translucent dark
       panel with subtle border + backdrop blur. Applies to sidebar
       (.cloud-chart-wrap) and modal (.cloud-chart-modal-body). */
    .canon-v3-toolbar {
      position: absolute;
      top: 10px;
      right: 12px;
      z-index: 5;
      display: flex;
      align-items: center;
      gap: 0;
      padding: 4px 6px;
      background: rgba(11, 17, 32, 0.72);
      border: 1px solid rgba(255, 255, 255, 0.10);
      border-radius: 8px;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      pointer-events: auto;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    }
    .canon-v3-toolbar .tb-group {
      display: flex;
      align-items: center;
      gap: 3px;
      padding: 0 6px;
    }
    .canon-v3-toolbar .tb-label {
      font-size: 9px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: rgba(203, 213, 225, 0.65);
      margin-right: 3px;
      font-weight: 600;
    }
    .canon-v3-toolbar .tb-divider {
      width: 1px;
      height: 16px;
      background: rgba(255, 255, 255, 0.12);
      margin: 0 2px;
    }
    .canon-v3-toolbar .tb-pill {
      appearance: none;
      border: 1px solid rgba(255, 255, 255, 0.12);
      background: rgba(255, 255, 255, 0.04);
      color: #9CA3AF;
      font-size: 10px;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 4px;
      cursor: pointer;
      line-height: 1;
      min-height: 18px;
      transition: background 80ms ease, color 80ms ease, border-color 80ms ease;
    }
    .canon-v3-toolbar .tb-pill:hover { color: #E2E8F0; border-color: rgba(255,255,255,0.25); }
    .canon-v3-toolbar .tb-pill.active { color: #0a0e1a; border-color: transparent; }
    /* Cloud-layer color palette (matches .cloud-tf-pill.active.c-*). */
    .canon-v3-toolbar .tb-pill.c-daily.active   { background: #10B981; }
    .canon-v3-toolbar .tb-pill.c-twoDay.active  { background: #3B82F6; }
    .canon-v3-toolbar .tb-pill.c-weekly.active  { background: #A855F7; }
    .canon-v3-toolbar .tb-pill.c-twoWeek.active { background: #06B6D4; }
    .canon-v3-toolbar .tb-pill.c-monthly.active { background: #F59E0B; }
    .canon-v3-toolbar .tb-pill.c-gaps.active    { background: #F5F5F5; color: #0a0e1a; }
    /* Split SMA toggles — SMA50 light blue, SMA200 purple (matches confluence accent). */
    .canon-v3-toolbar .tb-pill.c-sma50.active   { background: #3B82F6; }
    .canon-v3-toolbar .tb-pill.c-sma200.active  { background: #A855F7; }
    /* TAN-840: c-signals was missing an active background — dark text on
       transparent = invisible. Matches c-gaps (white overlay pill) since
       both are binary overlay toggles, not timeframes. */
    .canon-v3-toolbar .tb-pill.c-signals.active { background: #EC4899; color: #0a0e1a; } /* Coord (GLM 5.2, 2026-07-09): pink #EC4899 = --script-pink (L132), matches the hot-pink script/setup pulse alert family. Was white #E2E8F0 (TAN-840). */
    /* TAN-1017 fix (Coord / GLM 5.2, 2026-07-09): c-trendline active state was MISSING —
       fell through to the generic .tb-pill.active { color:#0a0e1a } = dark text on a
       near-transparent dark bg = looked black when ON (the TrendlineTL toolbar button
       in both the sidebar drawer + expanded pulse alert). Same class of bug as the
       TAN-840 c-signals fix above. Yellow #FACC15 matches the KEY TRENDLINE alert row
       color + the overlay line. Dark text for contrast on yellow.
       NOTE: this rule was added in PR #2582 but accidentally deleted by the PR #2585
       signals-pink edit (a sloppy find/replace swept up the adjacent block). */
    .canon-v3-toolbar .tb-pill.c-trendline.active { background: #FACC15; color: #0a0e1a; }
    /* TAN-1071: Momentum (Trend Strength Candles) — cyan, off by default. */
    .canon-v3-toolbar .tb-pill.c-momentum.active { background: #22D3EE; color: #0a0e1a; }
    /* N-1 D3 — Near cloud-layer palette. Reuses the same 5 hues as Far so the
       color semantics stay consistent (tightest layer green, widest amber). */
    /* N-5: revert pill colors to pre-N-4 values; align JS render colors to match these */
    .canon-v3-toolbar .tb-pill.c-n15m.active { background: #10B981; }
    .canon-v3-toolbar .tb-pill.c-n30m.active { background: #3B82F6; }
    .canon-v3-toolbar .tb-pill.c-n1h.active  { background: #A855F7; }
    .canon-v3-toolbar .tb-pill.c-n2h.active  { background: #06B6D4; }
    .canon-v3-toolbar .tb-pill.c-n4h.active  { background: #F59E0B; }
    /* Near/Far + TF pills use a teal accent when active. */
    .canon-v3-toolbar .tb-pill.tb-mode.active,
    .canon-v3-toolbar .tb-pill.tb-tf.active {
      background: rgba(94,234,212,0.22);
      color: #5EEAD4;
      border-color: rgba(94,234,212,0.55);
    }
    /* N-1 D4 — Log scale pill. Same teal accent as Near/Far/TF when active. */
    .canon-v3-toolbar .tb-pill.tb-log.active {
      background: rgba(94,234,212,0.22);
      color: #5EEAD4;
      border-color: rgba(94,234,212,0.55);
    }
    /* Sidebar compresses Near/Far to N/F when narrow (tile widths < 520px). */
    .cloud-chart-wrap .canon-v3-toolbar { top: 6px; right: 8px; }
    .cloud-chart-wrap .canon-v3-toolbar .tb-label { font-size: 8px; }
    /* B-13 D1 — Option B responsive collapse now keys off a container-based
       class (.canon-v3-toolbar--narrow) attached by a ResizeObserver on the
       toolbar row, instead of a viewport media query. The stock-detail
       sidebar toolbar is ~400-450px wide while the viewport can be 1200px+,
       so a viewport media query never fired and the toolbar clipped off
       the left edge. The class-based approach lets the SAME rule fire for
       any container narrower than the threshold, regardless of viewport. */
    .canon-v3-toolbar .tb-mode-short { display: none; }
    .canon-v3-toolbar .tb-gaps-short { display: none; }
    /* Split-SMA short labels (50 / 200). Hidden by default so every route
       keeps the full SMA50 / SMA200 labels; only the CC Pulse-v3 toolbar
       scope (below) swaps to the short form to shrink the band width. */
    .canon-v3-toolbar .tb-sma50-short { display: none; }
    .canon-v3-toolbar .tb-sma200-short { display: none; }
    /* TAN-684 — Signals chip: full label by default, short ("Sig") only in the
       narrow CC Pulse-v3 toolbar scope (mirrors the SMA short-label rule). */
    .canon-v3-toolbar .tb-signals-short { display: none; }
    /* TAN-1017 — Key Trendline toggle: full label by default. The short "TL"
       span was never hidden by default (missed when the button was added), so
       both spans rendered concatenated as "TrendlineTL" in every view. Hide
       the short span by default; sidebar still gets 'TL' via the _sidebarShort
       JS path (hardcoded), not these CSS spans. */
    .canon-v3-toolbar .tb-trendline-short { display: none; }
    /* TAN-1071: Momentum — hide short "Mom" by default (same TrendlineTL trap). */
    .canon-v3-toolbar .tb-momentum-short { display: none; }
    /* B-15 D1: --narrow label abbreviation rules removed. Width analysis
       confirmed all 4 full labels (CLOUDS + Near + Far + Gaps) fit at
       --xnarrow pill padding within the 501px sidebar content box with
       ~29px margin. Full labels improve scannability. */
    /* B-13 D1 — xnarrow: tighter pill padding + tighter group gap so even
       after Option B condensation the full row (CLOUDS pills + G + N/F +
       TF pills + Log) fits inside a ~400-420px container without clipping. */
    .canon-v3-toolbar.canon-v3-toolbar--xnarrow .tb-pill  { padding: 2px 4px; }
    .canon-v3-toolbar.canon-v3-toolbar--xnarrow .tb-group { padding: 0 3px; gap: 2px; }
    .canon-v3-toolbar.canon-v3-toolbar--xnarrow .tb-divider { margin: 0 1px; }
    /* Mobile/PWA: at very narrow containers (~<420px, e.g. 360-390px PWA
       viewports) the xnarrow tier still clips the 1D pill. Tighten one more
       step: drop pill horizontal padding to 3px, font-size to 9px, group
       padding to 0 2px / gap 1px, dividers to 0 margin, and shrink the CLOUDS
       label margin so all 5 cloud pills + Gaps + N/F + 5 TFs + Log fit on a
       single row without clipping. Desktop/tablet unaffected. */
    .canon-v3-toolbar.canon-v3-toolbar--xxnarrow .tb-pill  { padding: 2px 3px; font-size: 9px; }
    .canon-v3-toolbar.canon-v3-toolbar--xxnarrow .tb-group { padding: 0 2px; gap: 1px; }
    .canon-v3-toolbar.canon-v3-toolbar--xxnarrow .tb-divider { margin: 0; }
    .canon-v3-toolbar.canon-v3-toolbar--xxnarrow .tb-label { margin-right: 2px; }
    .canon-v3-toolbar.canon-v3-toolbar--xxnarrow { padding: 4px 4px; }

    /* B-9 D1 — toolbar row sits ABOVE the chart canvas in its own horizontal
       band. Toolbar is right-aligned inside the row. Overrides the default
       absolute positioning of .canon-v3-toolbar so it flows statically in
       the row and does NOT overlap chart pixels. */
    .canon-v3-toolbar-row {
      display: flex;
      justify-content: flex-end; /* B-14.3: revert to flex-end; --xnarrow at <530 already prevents overflow */
      align-items: center;
      background: #141B2D;
      padding: 6px 8px 4px 8px;
      border-top: 1px solid #2A3246;
      border-bottom: 1px solid #2A3246;
    }
    .canon-v3-toolbar-row .canon-v3-toolbar {
      position: static;
      top: auto;
      right: auto;
    }
    .canon-v3-toolbar-row-sidebar {
      padding: 4px 6px 3px 6px; /* B-14.2: reverted B-14.1 12px bump — flex-start + xnarrow fix the overflow structurally */
    }
    .canon-v3-toolbar-row-sidebar .canon-v3-toolbar .tb-label {
      font-size: 8px;
    }
    /* B-13 D1 — class-based narrow collapse replaces the prior viewport
       media query here. The JS ResizeObserver attaches .canon-v3-toolbar--narrow
       on the .canon-v3-toolbar element when its container width crosses the
       threshold, so the rules above cover this row (and the enlarged modal
       row) automatically. No separate selector needed. */

    /* ================================================================
       GRID TOGGLE — tile grid view (rankings tab)
       ================================================================ */
    .grid-controls {
      display: flex;
      align-items: center;
      gap: 18px;
      padding: 8px 2px 12px 2px;
      flex-wrap: wrap;
    }
    .grid-control-group {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .grid-control-label {
      font-size: 10px;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-right: 4px;
    }
    .grid-tf-btn,
    .grid-sort-btn,
    .grid-chart-btn {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: transparent;
      color: var(--text-muted);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 3px 10px;
      font-size: 11px;
      font-weight: 500;
      font-family: var(--font-body);
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .grid-tf-btn:hover,
    .grid-sort-btn:hover,
    .grid-chart-btn:hover {
      color: var(--text-secondary);
      border-color: var(--blue);
    }
    .grid-tf-btn.active,
    .grid-sort-btn.active,
    .grid-chart-btn.active {
      background: var(--blue-dim);
      color: var(--blue);
      border-color: var(--blue);
    }
    .grid-tile-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 12px;
    }
    .grid-tile {
      position: relative;
      background: var(--surface-2, #1A2332);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 14px 14px 12px;
      cursor: pointer;
      transition: border-color 0.15s ease, transform 0.15s ease, order 0.2s ease;
      aspect-ratio: 1 / 1;
      display: flex;
      flex-direction: column;
    }
    .grid-tile:hover {
      border-color: #2D3B52;
      transform: translateY(-1px);
    }
    .grid-tile-top {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      margin-bottom: 2px;
    }
    .grid-ticker {
      font-family: var(--font-mono, 'JetBrains Mono', monospace);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.3px;
      color: var(--text-primary);
    }
    .grid-delta {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      font-size: 12px;
      font-weight: 600;
      font-family: var(--font-mono, 'JetBrains Mono', monospace);
      color: var(--text-secondary);
    }
    .grid-delta.up { color: var(--emerald); }
    .grid-delta.down { color: var(--red); }
    .grid-delta svg { width: 10px; height: 10px; }
    .grid-company {
      font-size: 11px;
      color: var(--text-muted);
      font-weight: 400;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 10px;
    }
    .grid-spark {
      flex: 1;
      min-height: 84px;
      margin: 6px 0;
      position: relative;
    }
    .grid-spark svg {
      width: 100%;
      height: 100%;
      display: block;
    }
    /* 3-tick price axis overlay (high / mid / low) anchored to right edge of
       the chart cell. Width is small enough not to obscure the right-most
       candle/line, and labels are absolutely positioned so they do not
       affect candle/line drawing geometry. */
    .grid-axis {
      position: absolute;
      top: 0;
      right: 0;
      width: 38px;
      height: 100%;
      pointer-events: none;
    }
    .grid-axis-tick {
      position: absolute;
      right: 2px;
      font-family: var(--font-mono, 'JetBrains Mono', monospace);
      font-size: 8.5px;
      line-height: 1;
      color: var(--text-muted);
      text-align: right;
      letter-spacing: 0.1px;
      /* faint pill-style backdrop so labels stay legible against the chart */
      background: rgba(15, 23, 41, 0.65);
      padding: 1px 3px;
      border-radius: 2px;
    }
    .grid-price-line {
      display: flex;
      align-items: baseline;
      gap: 6px;
      margin-top: 6px;
    }
    .grid-price {
      font-family: var(--font-mono, 'JetBrains Mono', monospace);
      font-size: 18px;
      font-weight: 600;
      color: var(--text-primary);
      letter-spacing: -0.3px;
    }
    .grid-price-sep {
      color: var(--text-muted);
      opacity: 0.6;
      font-size: 12px;
    }
    .grid-footer {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 8px;
      margin-top: 6px;
      min-height: 18px;
    }
    .grid-mktcap {
      font-family: var(--font-mono, 'JetBrains Mono', monospace);
      font-size: 11px;
      font-weight: 500;
      color: var(--text-muted);
      letter-spacing: 0.2px;
      flex-shrink: 0;
    }
    .grid-pills {
      display: flex;
      align-items: center;
      gap: 3px;
      flex-wrap: wrap;
      justify-content: flex-start;
    }
    .grid-pill {
      display: inline-flex;
      align-items: center;
      height: 16px;
      padding: 0 5px;
      border-radius: 3px;
      font-size: 9.5px;
      font-weight: 600;
      font-family: var(--font-body, 'Inter', sans-serif);
      letter-spacing: 0.2px;
      line-height: 1;
      white-space: nowrap;
      color: #0B1120;
      cursor: help;
      position: relative;
    }
    .grid-pill--num {
      font-family: var(--font-mono, 'JetBrains Mono', monospace);
    }
    /* Hidden inline tooltip — content is rendered in the body-level portal tip */
    .grid-pill .grid-pill-tip { display: none; }
    .grid-pill-portal-tip {
      background: #0F1729;
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 7px 10px;
      width: 200px;
      font-family: var(--font-body, 'Inter', sans-serif);
      font-size: 10px;
      font-weight: 400;
      color: var(--text-secondary);
      text-align: left;
      line-height: 1.45;
      box-shadow: 0 4px 14px rgba(0,0,0,0.5);
    }
    .grid-pill-portal-tip strong {
      color: var(--text-primary);
      font-weight: 600;
      letter-spacing: 0.4px;
      display: block;
      margin-bottom: 3px;
      font-size: 9.5px;
      text-transform: uppercase;
    }
    .grid-pill-portal-tip .grid-pill-tip-val {
      color: var(--text-primary);
      font-weight: 600;
      font-family: var(--font-mono, 'JetBrains Mono', monospace);
      display: block;
      margin-bottom: 3px;
    }
    .grid-pill-portal-tip .grid-pill-tip-desc {
      color: var(--text-muted);
      display: block;
    }
    .grid-conf-badge {
      margin-left: 1px;
    }

    @media (max-width: 1439px) {
      .grid-tile-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      }
    }
    @media (max-width: 767px) {
      .grid-tile-grid {
        grid-template-columns: 1fr 1fr;
      }
    }
    @media (max-width: 479px) {
      .grid-tile-grid {
        grid-template-columns: 1fr;
      }
      .grid-price { font-size: 16px; }
      .grid-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
      }
      .grid-pills { justify-content: flex-start; }
    }

/* ============================================================================
 * FLOAT FIELD — sector rhythm visualization (v2.0.0 2026-04-28)
 *
 * Renders below the Market Intelligence briefing as a full-width section.
 * All selectors namespaced .ff-* to avoid collisions with existing app rules.
 * Uses live-app palette tokens.
 * ============================================================================ */
.ff-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 4px 16px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.03);
}
.ff-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(17,24,39,1) 0%, rgba(17,24,39,0.6) 100%);
  gap: 14px;
}
.ff-title-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ff-title-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-secondary);
}
.ff-title {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-secondary);
}
.ff-meta {
  font-size: 11px; color: var(--text-muted);
  font-family: var(--font-mono); letter-spacing: .04em;
}
.ff-head-right { display: flex; align-items: center; gap: 14px; }
.ff-legend {
  display: flex; align-items: center; gap: 12px; font-size: 10.5px;
  color: var(--text-muted); font-family: var(--font-mono); letter-spacing: .04em;
}
.ff-legend span { display: inline-flex; align-items: center; gap: 5px; }
.ff-legend-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  box-sizing: border-box;
}
.ff-legend-dot.hold  { background: var(--text-secondary); }
.ff-legend-dot.watch {
  background: transparent; border: 1.5px solid var(--text-secondary);
}
.ff-canvas-wrap {
  position: relative; height: 340px; background: var(--bg-alt);
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.ff-canvas-wrap canvas { display: block; width: 100%; height: 100%; }
.ff-canvas-wrap::after {
  content: ''; position: sticky; left: 100%; top: 0; bottom: 0;
  width: 36px; height: 100%;
  background: linear-gradient(to right, rgba(11,17,32,0), rgba(11,17,32,0.92));
  pointer-events: none; display: none;
}
@media (max-width: 600px) { .ff-canvas-wrap::after { display: block; } }

/* Tooltip — HTML overlay, crisp text, no canvas-rendered overflow */
.ff-tooltip {
  background: rgba(11,17,32,0.97);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 11px 13px 11px;
  min-width: 220px;
  max-width: 290px;
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
  box-shadow: 0 10px 28px rgba(0,0,0,0.55);
  color: var(--text-primary);
}
.ff-tt-row1 {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 5px;
}
.ff-tt-tk {
  font-weight: 700; letter-spacing: .06em; font-size: 15px;
  color: var(--text-primary);
}
.ff-tt-price {
  font-family: var(--font-mono); font-weight: 500; font-size: 12.5px;
  color: var(--text-muted); margin-left: 6px;
}
.ff-tt-chg {
  font-family: var(--font-mono); font-weight: 600; font-size: 14px;
}
/* Off-scale qualifier — appended to .ff-tt-chg when |chg| ≥ 10% (clamped at y-axis edge). */
.ff-tt-offscale {
  font-family: var(--font-mono); font-weight: 500; font-size: 10.5px;
  color: var(--text-muted); letter-spacing: .04em; margin-left: 2px;
  text-transform: uppercase; opacity: 0.85;
}
.ff-tt-row2 {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-muted); letter-spacing: .04em;
  margin-bottom: 8px; text-transform: uppercase;
}
/* Time-window strip (5D / 1M / YTD) */
.ff-tt-windows {
  display: flex; gap: 12px;
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: .03em;
  padding: 6px 0; margin-bottom: 4px;
  border-top: 1px solid rgba(148,163,184,0.10);
  border-bottom: 1px solid rgba(148,163,184,0.10);
}
.ff-tt-windows .ff-tt-cell { color: var(--text-faint); }
.ff-tt-windows .ff-tt-cell.muted { color: var(--text-faint); opacity: 0.55; }
.ff-tt-windows .ff-tt-cell b { font-weight: 600; }
/* Context strip (vs sector / RSI / 52W) */
.ff-tt-context {
  display: flex; gap: 12px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .03em;
  padding: 5px 0 7px; margin-bottom: 4px;
  border-bottom: 1px solid rgba(148,163,184,0.10);
  flex-wrap: wrap;
}
.ff-tt-context .ff-tt-cell { color: var(--text-faint); }
.ff-tt-context .ff-tt-cell.muted { opacity: 0.55; }
.ff-tt-context .ff-tt-cell b { font-weight: 600; }
/* Position context (only when held) */
.ff-tt-position {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-secondary); letter-spacing: .03em;
  padding: 4px 0 7px; margin-bottom: 4px;
  border-bottom: 1px solid rgba(148,163,184,0.10);
}
.ff-tt-pos-label {
  display: inline-block; padding: 1px 5px; border-radius: 3px;
  background: rgba(148,163,184,0.16); color: var(--text-primary);
  font-weight: 700; font-size: 9.5px; letter-spacing: .08em;
  margin-right: 5px;
}
.ff-tt-position b { color: var(--text-primary); font-weight: 600; }
/* Top-signal hint */
.ff-tt-signal {
  margin-top: 6px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-muted); letter-spacing: .06em;
  text-transform: uppercase;
}
.ff-tt-row3 {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: .06em;
  margin-top: 2px;
}
.ff-tag {
  display: inline-block; padding: 3px 7px; border-radius: 3px;
  font-weight: 600; font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase;
}
.ff-tag.hold {
  background: rgba(148,163,184,0.16);
  color: var(--text-primary);
}
.ff-tag.watch {
  background: rgba(148,163,184,0.10);
  color: var(--text-muted);
}
.ff-tt-score {
  font-family: var(--font-mono); color: var(--text-faint);
  letter-spacing: .06em; font-size: 10.5px;
}
.ff-tt-score b { color: var(--text-primary); font-weight: 600; }

.ff-foot {
  padding: 9px 20px 11px; border-top: 1px solid var(--border);
  font-size: 10.5px; color: var(--text-muted);
  font-family: var(--font-mono); letter-spacing: .02em;
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  background: rgba(0,0,0,0.12);
}
.ff-foot span { white-space: nowrap; }
.ff-foot-axis { color: var(--text-muted); }
.ff-foot-hint { color: var(--text-faint); }

/* ---- v2.2.0 playback controls --------------------------------------------
   Play button lives in .ff-head-right (inline) and .ff-modal-head-right
   (enlarged). Progress strip is full-width, hidden until first play. */
.ff-play-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 9px 0 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-secondary);
  font-family: var(--font-mono); font-size: 10.5px;
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; user-select: none;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease, transform 80ms ease;
}
.ff-play-btn:hover {
  color: var(--text-primary);
  border-color: var(--text-faint);
  background: rgba(255,255,255,0.07);
}
.ff-play-btn:active { transform: translateY(1px); }
.ff-play-btn:focus-visible {
  outline: 2px solid var(--blue, #3B82F6); outline-offset: 2px;
}
.ff-play-btn .ff-play-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 12px; height: 12px;
}
.ff-play-btn .ff-play-label { line-height: 1; }
.ff-play-btn[data-state="playing"] {
  color: var(--emerald, #10B981);
  border-color: rgba(16,185,129,0.45);
  background: rgba(16,185,129,0.08);
}
.ff-play-btn[data-state="loading"] {
  color: var(--text-faint); cursor: wait;
}
.ff-play-btn[data-state="loading"] .ff-spin {
  transform-origin: 12px 12px;
  animation: ff-spin 700ms linear infinite;
}
@keyframes ff-spin { to { transform: rotate(360deg); } }

/* Progress strip — hidden until first play so it claims zero vertical
   space pre-playback. Speed toggle lives in the head, not here. */
.ff-playback-strip {
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px; background: rgba(0,0,0,0.18);
  border-bottom: 1px solid transparent;
  opacity: 0; pointer-events: none;
  max-height: 0; overflow: hidden;
  transition: opacity 200ms ease, max-height 220ms ease, padding 220ms ease, border-color 220ms ease;
}
.ff-playback-strip[aria-hidden="false"] {
  opacity: 1; pointer-events: auto;
  max-height: 36px; padding: 6px 20px;
  border-bottom-color: var(--border);
}
.ff-playback-bar {
  flex: 1; height: 3px; background: rgba(148,163,184,0.14);
  border-radius: 2px; overflow: hidden; position: relative;
}
.ff-playback-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--blue, #3B82F6), var(--emerald, #10B981));
  box-shadow: 0 0 6px rgba(59,130,246,0.45);
  border-radius: 2px;
  transition: width 80ms linear;
}
.ff-playback-meta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--text-muted); letter-spacing: .06em;
  min-width: 56px; justify-content: flex-end;
}
.ff-playback-clock { color: var(--text-secondary); font-weight: 600; }

/* Segmented playback-speed toggle. Lives in the widget head (and modal
   head) immediately to the LEFT of the play button so users can pre-pick
   a speed before pressing play. Active chip is filled; others are subtle. */
.ff-speed-toggle {
  display: inline-flex; align-items: center; gap: 0;
  background: rgba(148,163,184,0.10);
  border: 1px solid var(--border, rgba(148,163,184,0.18));
  border-radius: 5px;
  padding: 1px;
}
.ff-speed-btn {
  appearance: none; -webkit-appearance: none;
  background: transparent; border: 0;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-weight: 700; font-size: 9.5px; letter-spacing: .04em;
  padding: 3px 7px;
  border-radius: 4px;
  cursor: pointer;
  line-height: 1;
  transition: background-color 120ms ease, color 120ms ease;
}
.ff-speed-btn:hover { color: var(--text-primary); background: rgba(148,163,184,0.10); }
.ff-speed-btn:focus-visible {
  outline: 2px solid var(--blue, #3B82F6); outline-offset: 1px;
}
.ff-speed-btn.is-active {
  background: var(--blue, #3B82F6);
  color: #fff;
  box-shadow: 0 0 6px rgba(59,130,246,0.35);
}
.ff-speed-btn.is-active:hover { background: var(--blue, #3B82F6); }
.ff-modal-head-right {
  display: inline-flex; align-items: center; gap: 10px;
}
.ff-modal .ff-playback-strip { padding: 8px 22px; }
@media (max-width: 600px) {
  .ff-play-btn .ff-play-label { display: none; }
  .ff-play-btn { padding: 0 7px; }
  .ff-playback-strip { padding: 6px 14px; gap: 8px; }
  .ff-playback-meta { gap: 6px; font-size: 10px; }
  .ff-speed-btn { padding: 2px 5px; font-size: 9px; }
}

/* Enlarge modal — aspect-aware, scrollable, min-height-safe */
.ff-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.65);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: 32px; animation: ff-fade .18s ease-out;
}
@keyframes ff-fade { from { opacity: 0; } to { opacity: 1; } }
.ff-modal {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; width: 92vw; height: 88vh; max-width: 1600px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  display: flex; flex-direction: column; overflow: hidden;
}
.ff-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(17,24,39,1) 0%, rgba(17,24,39,0.6) 100%);
}
.ff-modal-title {
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-secondary);
}
.ff-modal-title::before {
  content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-secondary); margin-right: 9px; vertical-align: middle; transform: translateY(-1px);
}
.ff-modal-close {
  background: transparent; border: 1px solid var(--border);
  color: var(--text-muted); width: 32px; height: 32px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  font-size: 16px; line-height: 1;
}
.ff-modal-close:hover {
  color: var(--text-primary); border-color: var(--text-faint);
  background: rgba(255,255,255,0.04);
}
.ff-modal-canvas-wrap {
  position: relative; flex: 1; background: var(--bg-alt);
  overflow-x: auto; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ff-modal-canvas-wrap canvas { display: block; width: 100%; height: 100%; }

/* Tablet: shorter canvas */
@media (max-width: 1100px) {
  .ff-canvas-wrap { height: 300px; }
}

/* Mobile: stack header, tighten paddings */
@media (max-width: 768px) {
  .ff-head {
    flex-direction: column; align-items: flex-start; gap: 10px; padding: 11px 14px;
  }
  .ff-head-right { width: 100%; justify-content: space-between; align-items: center; }
  .ff-title-wrap { flex-wrap: wrap; gap: 8px; }
  .ff-title { font-size: 10.5px; }
  .ff-meta { font-size: 10px; }
  .ff-legend { flex-wrap: wrap; gap: 8px 10px; font-size: 9.5px; }
  .ff-canvas-wrap { height: 260px; }
  .ff-foot {
    padding: 8px 14px; font-size: 9.5px;
    flex-direction: column; gap: 4px; align-items: flex-start;
  }
}

@media (max-width: 420px) {
  .ff-foot span:nth-child(n+3) { display: none; }
}
/* ============================================================
   Pulse v3 — flagged styles. Active only when body has class
   .pulse-v3-active (set by JS when ?pulseV3=1). All selectors
   are scoped under .pulse-v3-active to guarantee zero impact on
   the v2 path.
   ============================================================ */

/* v3-only vars (not already in :root) */
.pulse-v3-active {
  --row-hover: rgba(255,255,255,0.04);
  --t7: #8B5CF6;
  --t7-bg: rgba(139,92,246,0.10);
  --t7-glow: rgba(139,92,246,0.40);
  --t6: #10B981;
  --t6-bg: rgba(16,185,129,0.08);
  --t6-glow: rgba(16,185,129,0.35);
  --t1: #EF4444;
  --t2: #F59E0B;
  --t2-bg: rgba(245,158,11,0.08);
  --border-soft: #141B2D;
  --rsi-3os: #A855F7;
  --info: #3B82F6;
  --warn: #F59E0B;
  --purple: #8B5CF6;
}

/* XL ALERT ROW */
.pulse-v3-active .feed-xl {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border-soft);
  border-left: 3px solid var(--t7);
  background: linear-gradient(90deg, var(--t7-bg) 0%, transparent 65%);
  cursor: pointer;
  transition: background 0.12s ease;
}
.pulse-v3-active .feed-xl:hover { background: linear-gradient(90deg, var(--t7-bg) 0%, var(--row-hover) 80%); }
.pulse-v3-active .feed-xl.expanded { border-bottom: none; }
.pulse-v3-active .feed-xl .ts {
  font-size: 11px; color: var(--text-muted);
  width: 44px; flex-shrink: 0; align-self: center;
  letter-spacing: 0.04em;
}
.pulse-v3-active .feed-xl .rank {
  width: 52px; height: 52px; flex-shrink: 0;
  align-self: center;
  /* TAN-418: pin rank + right-col to the row's right gutter on /pulse.
     TAN-371 removed the .body > .row1 wrappers globally; .body had
     flex:1 and was the spacer that pushed .rank/.right-col right.
     CC compensates via .ff-section--cc .feed-xl .rank { position:absolute }
     at line ~13258, so this margin-left:auto is ignored under CC (auto
     margins don't apply to absolutely-positioned elements) and only
     re-pins the rank on standalone /pulse. */
  margin-left: auto;
  border-radius: 50%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  position: relative;
}
.pulse-v3-active .feed-xl .rank .num { font-size: 17px; font-weight: 700; color: var(--text-primary); line-height: 1; }
.pulse-v3-active .feed-xl .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.pulse-v3-active .feed-xl .row1 { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pulse-v3-active .feed-xl .ticker { font-size: 14px; font-weight: 700; color: var(--text-primary); letter-spacing: 0.02em; width: 56px; flex-shrink: 0; }
.pulse-v3-active .feed-xl .price { font-size: 14px; color: var(--text-secondary); font-weight: 600; width: 72px; flex-shrink: 0; }
.pulse-v3-active .feed-xl .change-down { font-size: 13px; color: var(--red); font-weight: 600; width: 48px; flex-shrink: 0; }
.pulse-v3-active .feed-xl .change-up   { font-size: 13px; color: var(--emerald); font-weight: 600; width: 48px; flex-shrink: 0; }
.pulse-v3-active .feed-xl .event-type {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  color: var(--t7); text-transform: uppercase;
}
.pulse-v3-active .feed-xl .row2 { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pulse-v3-active .feed-xl .row3 { font-size: 12px; color: var(--text-secondary); }
.pulse-v3-active .feed-xl .row3 strong { color: var(--text-primary); font-weight: 700; }

/* Chips — base 11px (this-morning metrics). CC only lifts purple feed-xl
   to match; do not globally shrink/force mono (desktop 2K looked thin/bad). */
.pulse-v3-active .chip {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 3px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: #0B1120;
  border: 1px solid #1E293B;
  color: var(--text-secondary);
}
.pulse-v3-active .chip.signal { color: var(--info); border-color: rgba(59,130,246,0.40); background: rgba(59,130,246,0.10); }
.pulse-v3-active .chip.macd   { color: var(--warn); border-color: rgba(245,158,11,0.40); background: rgba(245,158,11,0.10); }
.pulse-v3-active .chip.macd.bull { color: #00cc44; border-color: rgba(0,204,68,0.30); background: rgba(0,204,68,0.15); }
.pulse-v3-active .chip.macd.bear { color: #ef4444; border-color: rgba(239,68,68,0.40); background: rgba(239,68,68,0.12); }
.pulse-v3-active .chip.signal.bull { color: #00cc44; border-color: rgba(0,204,68,0.30); background: rgba(0,204,68,0.15); }
.pulse-v3-active .chip.signal.bear { color: #ef4444; border-color: rgba(239,68,68,0.40); background: rgba(239,68,68,0.12); }
/* Issue 2a — ALL cloud events render amber regardless of direction.
   Outline-first parity with script/pattern (was under-chroma vs pink TCM chips;
   AXTI THIN CLOUD read as muted slate). Hard #FBBF24 + stronger fill/border. */
.pulse-v3-active .chip.signal.cloud-amber {
  color: #FBBF24;
  border: 1px solid rgba(245, 158, 11, 0.55);
  background: rgba(245, 158, 11, 0.16);
}
/* Issue 2c — GAP FILL chip white regardless of direction. */
.pulse-v3-active .chip.signal.gap-fill {
  color: #FFFFFF;
  border-color: rgba(255,255,255,0.40);
  background: rgba(255,255,255,0.10);
}
/* FIB chip — teal (#14B8A6) so fib events distinguish from SMA blue. The
   .fib qualifier wins over .signal.bull / .signal.bear if both happen to
   be set (defense-in-depth — _pulseV3FibChip emits .signal.fib alone). */
.pulse-v3-active .chip.signal.fib {
  color: #14B8A6;
  border-color: rgba(20,184,166,0.40);
  background: rgba(20,184,166,0.10);
}
/* Issue 2c — SMA 50 / SMA 200 cross chips render blue (lighter for SMA 50,
   darker for SMA 200). Golden / Death cross keep their direction colors. */
.pulse-v3-active .chip.signal.sma-50 {
  color: #60A5FA;
  border-color: rgba(96,165,250,0.40);
  background: rgba(96,165,250,0.10);
}
.pulse-v3-active .chip.signal.sma-200 {
  color: #2563EB;
  border-color: rgba(37,99,235,0.45);
  background: rgba(37,99,235,0.12);
}

/* Canvas-based portal halo on rank >= 100 alerts — universal score-badge
   gauge. Emitted by _pulseV3PortalCanvasMount() and inserted inside both
   the Pulse v3 .feed-xl .rank wrapper and the dashboard preview card's
   .dpv2-rank wrapper. The actual crackle is drawn imperatively by
   _pulseV3PortalTick (single shared rAF) which queries every
   `canvas.rank-portal-canvas` on screen — so equal-scored badges across
   surfaces share a single time source and stay phase-locked.

   Sizing: 96px CSS box absolute-positioned over the 52px gauge wrapper.
   Backing store is 192x192 (2x DPR) for crispness on retina/HiDPI. */
.feed-xl .rank-portal-canvas,
.dpv2-rank .rank-portal-canvas {
  position: absolute;
  width: 96px;
  height: 96px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .feed-xl .rank-portal-canvas,
  .dpv2-rank .rank-portal-canvas { display: none; }
}

/* Permanent static halo ring under the canvas portal — only rendered when
   a .rank-portal-canvas child is mounted (i.e. score ≥ 100 confluence alerts).
   Same purple as the orbiting bolt; sits beneath the canvas (z-index 0 vs 1)
   so the moving bolt traces over a visible track. Generalized selector
   covers both Pulse v3 rows and the dashboard preview card. */
.pulse-v3-active .feed-xl .rank:has(canvas.rank-portal-canvas)::before,
.dpv2-rank:has(canvas.rank-portal-canvas)::before {
  content: '';
  position: absolute;
  /* Bolt orbit radius is 30 CSS px from center (see _pulseV3PortalTick).
     Gauge is 52px (radius 26). Ring sits at inset -4px (60px diameter,
     radius 30) so the orbiting bolt traces directly along the static ring. */
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(168, 85, 247, 0.55);
  box-shadow:
    0 0 8px rgba(168, 85, 247, 0.30),
    inset 0 0 4px rgba(168, 85, 247, 0.12);
  pointer-events: none;
  z-index: 0;
}

/* When the canvas portal is mounted, the ::before halo IS the visible ring.
   Suppress the wrapper's own border so it doesn't render as a second
   inner ring (root cause of "two rings" reported on live since #808).
   !important is required to override the inline border-color:tierColor
   set by JS at js/app.js:5490 (.feed-xl .rank) and js/app.js:7304. */
.pulse-v3-active .feed-xl .rank:has(canvas.rank-portal-canvas),
.dpv2-rank:has(canvas.rank-portal-canvas) {
  border-color: transparent !important;
}

/* TAN-375: elite-tier halo for confluence scores >= 200. JS adds the
   .dpv2-rank-halo-elite class on top of the base canvas-portal ring so
   200+ rings visually pop vs the 100-199 band. Brighter border opacity
   (0.55 -> 0.95), thicker ring (2px -> 3px), and a stronger outer glow.
   Only takes effect when the canvas portal is mounted (i.e. rankNum >= 100),
   so <100 rows are unaffected. */
.pulse-v3-active .feed-xl .rank.dpv2-rank-halo-elite:has(canvas.rank-portal-canvas)::before,
.dpv2-rank.dpv2-rank-halo-elite:has(canvas.rank-portal-canvas)::before {
  border-width: 3px;
  border-color: rgba(168, 85, 247, 0.95);
  box-shadow:
    0 0 16px rgba(168, 85, 247, 0.65),
    0 0 32px rgba(168, 85, 247, 0.35),
    inset 0 0 6px rgba(168, 85, 247, 0.22);
}

/* ─── Pin lane chrome (display score ≥ 50) ───────────────────────────────
   Sort already pins strong conf above EV/setups. These classes make the
   purple ring *look* pinned vs weak conf (Matt 2026-07-14).
   Selectors are NOT scoped only under .pulse-v3-active so Terminal/CC rows
   that share .feed-xl.rank / .dpv2-rank still get the badge. */
.feed-xl .rank.dpv2-rank-pinned,
.pulse-v3-active .feed-xl .rank.dpv2-rank-pinned,
.dpv2-rank.dpv2-rank-pinned {
  overflow: visible !important;
  /* Double-ring track: outer solid pin ring + soft inner glow */
  box-shadow:
    0 0 0 2px rgba(168, 85, 247, 0.65),
    0 0 16px 4px rgba(168, 85, 247, 0.5),
    0 0 32px 4px rgba(139, 92, 246, 0.28) !important;
}
/* PIN chip — sit just BELOW the ring (top:-7 was clipped by feed overflow) */
.feed-xl .rank.dpv2-rank-pinned::after,
.pulse-v3-active .feed-xl .rank.dpv2-rank-pinned::after,
.dpv2-rank.dpv2-rank-pinned::after {
  content: 'PIN';
  position: absolute;
  bottom: -11px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1;
  color: #f5f3ff;
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
  border: 1px solid rgba(233, 213, 255, 0.65);
  border-radius: 4px;
  padding: 2px 6px 2px;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.55);
  white-space: nowrap;
}
/* Unpinned conf: thinner/dimmer ring so ≥50 is the obvious tier */
.feed-xl .rank.dpv2-rank-unpinned,
.pulse-v3-active .feed-xl .rank.dpv2-rank-unpinned,
.dpv2-rank.dpv2-rank-unpinned {
  opacity: 0.72;
  filter: saturate(0.8);
  border-style: dashed !important;
}
/* Portal-mounted pinned: reinforce the static halo track */
.feed-xl .rank.dpv2-rank-pinned:has(canvas.rank-portal-canvas)::before,
.pulse-v3-active .feed-xl .rank.dpv2-rank-pinned:has(canvas.rank-portal-canvas)::before,
.dpv2-rank.dpv2-rank-pinned:has(canvas.rank-portal-canvas)::before {
  border-width: 3px;
  border-color: rgba(192, 132, 252, 0.95);
  box-shadow:
    0 0 14px rgba(168, 85, 247, 0.55),
    0 0 28px rgba(139, 92, 246, 0.3),
    inset 0 0 6px rgba(168, 85, 247, 0.2);
}
/* Let PIN chip paint outside the row box */
.pulse-v3-active .feed-xl,
.feed-xl.pulse-v3-row {
  overflow: visible;
}


.pulse-v3-active .chip.rsi.bull { color: #00cc44; border-color: rgba(0,204,68,0.30); background: rgba(0,204,68,0.15); }
.pulse-v3-active .chip.rsi.bear { color: #ff6600; border-color: rgba(255,102,0,0.30); background: rgba(255,102,0,0.15); }
.pulse-v3-active .chip.rsi.hc   { border-width: 1.5px; }

/* Pulse v3 #762 — Collapsed CONFLUENCE rows render chips muted so the
   score circle dominates. Single-event EV rows (feed-m/s/n without
   .feed-confluence, and feed-xl EV rows that aren't confluence) keep
   their colored chip so the chip telegraphs the event type at a glance.
   Expanded detail-panel chips are unaffected (they live on a sibling
   element, not a descendant of the row). */
.pulse-v3-active .feed-confluence:not(.expanded) .chip {
  color: var(--text-secondary, #94A3B8) !important;
  background: rgba(148,163,184,0.10) !important;
  border-color: rgba(148,163,184,0.30) !important;
}

/* Tooltip portal */
.pulse-v3-active .pulse-tip {
  position: fixed; z-index: 9999;
  background: #0F1729;
  border: 1px solid #1E293B;
  border-radius: 6px;
  padding: 7px 10px;
  width: 220px;
  font-size: 10px; font-weight: 400;
  color: var(--text-secondary);
  text-align: left; line-height: 1.45;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
  pointer-events: none;
  opacity: 0; transition: opacity 0.12s ease;
}
.pulse-v3-active .pulse-tip strong {
  color: var(--text-primary);
  font-weight: 600; letter-spacing: 0.4px;
  display: block; margin-bottom: 3px;
  font-size: 9.5px; text-transform: uppercase;
}
.pulse-v3-active .pulse-tip .tip-val {
  color: var(--text-primary);
  font-weight: 600;
  font-family: ui-monospace, Menlo, monospace;
  display: block; margin-bottom: 3px;
}
.pulse-v3-active .pulse-tip .tip-desc { color: var(--text-muted); display: block; }
.pulse-v3-active [data-tip] { cursor: help; }

/* Right column + toggle */
.pulse-v3-active .feed-xl .right-col {
  flex-shrink: 0;
  display: flex; flex-direction: column;
  align-items: flex-end; justify-content: center; gap: 6px;
  width: 88px;
}
.pulse-v3-active .feed-xl .toggle {
  background: transparent; border: none;
  color: var(--text-muted); cursor: pointer;
  font-size: 14px; line-height: 1;
  padding: 6px 8px; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color 0.12s, transform 0.18s ease;
}
.pulse-v3-active .feed-xl:hover .toggle { color: var(--text-primary); }
.pulse-v3-active .feed-xl .toggle:hover { background: var(--row-hover); }
.pulse-v3-active .feed-xl .toggle .caret { display: inline-block; transition: transform 0.18s ease; }
.pulse-v3-active .feed-xl.expanded .toggle .caret { transform: rotate(180deg); }

/* M/S/N row expand toggle — mirror XL toggle so non-XL rows have a visible
   caret + working click target (Issue 1 — non-XL row expand parity).
   Pin absolute-right so yellow/pink KEY TL + CLI/SRV badges cannot shove the
   caret off the shared column (Matt: 27" 2K portrait Terminal misalignment). */
.pulse-v3-active .feed-m,
.pulse-v3-active .feed-s,
.pulse-v3-active .feed-n {
  position: relative;
  padding-right: 34px; /* gutter for absolute caret */
}
.pulse-v3-active .feed-m .toggle,
.pulse-v3-active .feed-s .toggle,
.pulse-v3-active .feed-n .toggle {
  background: transparent; border: none;
  color: var(--text-muted); cursor: pointer;
  font-size: 12px; line-height: 1;
  padding: 4px 6px; border-radius: 4px;
  margin-left: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color 0.12s, background 0.12s ease;
  flex-shrink: 0;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.pulse-v3-active .feed-m:hover .toggle,
.pulse-v3-active .feed-s:hover .toggle,
.pulse-v3-active .feed-n:hover .toggle { color: var(--text-primary); }
.pulse-v3-active .feed-m .toggle:hover,
.pulse-v3-active .feed-s .toggle:hover,
.pulse-v3-active .feed-n .toggle:hover { background: var(--row-hover); }
.pulse-v3-active .feed-m .toggle .caret,
.pulse-v3-active .feed-s .toggle .caret,
.pulse-v3-active .feed-n .toggle .caret { display: inline-block; transition: transform 0.18s ease; }
.pulse-v3-active .feed-m.expanded .toggle .caret,
.pulse-v3-active .feed-s.expanded .toggle .caret,
.pulse-v3-active .feed-n.expanded .toggle .caret { transform: rotate(180deg); }

/* Chip + CLI/SRV badge share one mid column; long KEY TL blurbs truncate instead
   of pushing layout. Setup rows append badge after chip as siblings. */
.pulse-v3-active .feed-m > .chip,
.pulse-v3-active .feed-s > .chip,
.pulse-v3-active .feed-n > .chip {
  min-width: 0;
  max-width: min(52vw, 420px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pulse-v3-active .feed-m > .setup-src-badge,
.pulse-v3-active .feed-s > .setup-src-badge,
.pulse-v3-active .feed-n > .setup-src-badge {
  flex-shrink: 0;
}

/* M and S rows */
.pulse-v3-active .feed-m, .pulse-v3-active .feed-s, .pulse-v3-active .feed-n {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 22px;
  border-bottom: 1px solid var(--border-soft);
  border-left: 3px solid var(--t6);
  cursor: pointer;
  transition: background 0.12s;
}
.pulse-v3-active .feed-m { background: linear-gradient(90deg, var(--t6-bg) 0%, transparent 60%); }
.pulse-v3-active .feed-s { background: transparent; border-left-color: var(--t1); padding: 8px 22px; font-size: 13px; }
.pulse-v3-active .feed-n { background: transparent; border-left-color: var(--text-muted, #64748B); padding: 8px 22px; font-size: 13px; }
.pulse-v3-active .feed-m:hover, .pulse-v3-active .feed-s:hover, .pulse-v3-active .feed-n:hover { background: var(--row-hover); }
/* Bundle 2 — Issue C: accent class overrides the row's left-border color
   to match the HEADLINE event's direction (cloud → amber, bullish → green,
   bearish → red, neutral / unknown → grey). Applied alongside the
   structural feed-xl/m/s/n class so layout / padding / bg gradient remain
   tier-driven, only the stripe color is event-driven. */
.pulse-v3-active .feed-xl.feed-bull,
.pulse-v3-active .feed-m.feed-bull,
.pulse-v3-active .feed-s.feed-bull,
.pulse-v3-active .feed-n.feed-bull { border-left-color: var(--emerald, #10B981); }
.pulse-v3-active .feed-xl.feed-bear,
.pulse-v3-active .feed-m.feed-bear,
.pulse-v3-active .feed-s.feed-bear,
.pulse-v3-active .feed-n.feed-bear { border-left-color: var(--red, #EF4444); }
.pulse-v3-active .feed-xl.feed-amber,
.pulse-v3-active .feed-m.feed-amber,
.pulse-v3-active .feed-s.feed-amber,
.pulse-v3-active .feed-n.feed-amber { border-left-color: var(--warn, #F59E0B); }
/* SMA-headline rows: blue accent (matches the SMA 50/200 chip palette) so
   the row stripe stays SMA-identified instead of being overridden by
   bullish/bearish direction colors. Applies to sma_*/golden_cross/death_cross
   headlines (confluence still wins via feed-confluence). */
.pulse-v3-active .feed-xl.feed-sma,
.pulse-v3-active .feed-m.feed-sma,
.pulse-v3-active .feed-s.feed-sma,
.pulse-v3-active .feed-n.feed-sma { border-left-color: #3B82F6; }
/* Fib-headline rows: teal accent (#14B8A6) so fib events visually separate
   from SMA blue. Matches the FIB chip color below (.chip.signal.fib). */
.pulse-v3-active .feed-xl.feed-fib,
.pulse-v3-active .feed-m.feed-fib,
.pulse-v3-active .feed-s.feed-fib,
.pulse-v3-active .feed-n.feed-fib { border-left-color: #14B8A6; }
.pulse-v3-active .feed-xl.feed-neutral,
.pulse-v3-active .feed-m.feed-neutral,
.pulse-v3-active .feed-s.feed-neutral,
.pulse-v3-active .feed-n.feed-neutral { border-left-color: #FFFFFF; }
/* TAN-519: gap_filled rows render white left-tick to match .chip.gap-fill */
.pulse-v3-active .feed-xl.feed-gap-fill,
.pulse-v3-active .feed-m.feed-gap-fill,
.pulse-v3-active .feed-s.feed-gap-fill,
.pulse-v3-active .feed-n.feed-gap-fill { border-left-color: #FFFFFF; }
/* TAN-519: RSI bearish-divergence rows render orange left-tick to match .chip.rsi.bear (#ff6600) */
.pulse-v3-active .feed-xl.feed-rsi-bear,
.pulse-v3-active .feed-m.feed-rsi-bear,
.pulse-v3-active .feed-s.feed-rsi-bear,
.pulse-v3-active .feed-n.feed-rsi-bear { border-left-color: #ff6600; }
/* Confluence rows always show the purple accent (pre-existing behavior the
   bundle 2 event-driven accent mapping accidentally overrode). */
.pulse-v3-active .feed-xl.feed-confluence,
.pulse-v3-active .feed-m.feed-confluence,
.pulse-v3-active .feed-s.feed-confluence,
.pulse-v3-active .feed-n.feed-confluence { border-left-color: var(--purple, #a855f7); }
/* Per-accent row gradient backgrounds applied uniformly across all row tiers
   (feed-xl / feed-m / feed-s / feed-n) so every EV row shows its accent fade
   regardless of template. Previously scoped to feed-m/feed-xl only, leaving
   plain bearish (feed-s) and neutral (feed-n) rows with flat dark bg. */
.pulse-v3-active .feed-xl.feed-amber,
.pulse-v3-active .feed-m.feed-amber,
.pulse-v3-active .feed-s.feed-amber,
.pulse-v3-active .feed-n.feed-amber {
  background: linear-gradient(90deg, rgba(245,158,11,0.10) 0%, transparent 60%);
}
.pulse-v3-active .feed-xl.feed-sma,
.pulse-v3-active .feed-m.feed-sma,
.pulse-v3-active .feed-s.feed-sma,
.pulse-v3-active .feed-n.feed-sma {
  background: linear-gradient(90deg, rgba(59,130,246,0.10) 0%, transparent 60%);
}
.pulse-v3-active .feed-xl.feed-fib,
.pulse-v3-active .feed-m.feed-fib,
.pulse-v3-active .feed-s.feed-fib,
.pulse-v3-active .feed-n.feed-fib {
  background: linear-gradient(90deg, rgba(20,184,166,0.10) 0%, transparent 60%);
}
.pulse-v3-active .feed-xl.feed-bear,
.pulse-v3-active .feed-m.feed-bear,
.pulse-v3-active .feed-s.feed-bear,
.pulse-v3-active .feed-n.feed-bear {
  background: linear-gradient(90deg, rgba(239,68,68,0.10) 0%, transparent 60%);
}
.pulse-v3-active .feed-xl.feed-bull,
.pulse-v3-active .feed-m.feed-bull,
.pulse-v3-active .feed-s.feed-bull,
.pulse-v3-active .feed-n.feed-bull {
  background: linear-gradient(90deg, rgba(16,185,129,0.10) 0%, transparent 60%);
}
.pulse-v3-active .feed-xl.feed-neutral,
.pulse-v3-active .feed-m.feed-neutral,
.pulse-v3-active .feed-s.feed-neutral,
.pulse-v3-active .feed-n.feed-neutral {
  background: linear-gradient(90deg, rgba(100,116,139,0.10) 0%, transparent 60%);
}
/* TAN-519: gap_filled row gradient (white wash) */
.pulse-v3-active .feed-xl.feed-gap-fill,
.pulse-v3-active .feed-m.feed-gap-fill,
.pulse-v3-active .feed-s.feed-gap-fill,
.pulse-v3-active .feed-n.feed-gap-fill {
  background: linear-gradient(90deg, rgba(255,255,255,0.08) 0%, transparent 60%);
}
/* TAN-519: RSI bear row gradient (orange wash) */
.pulse-v3-active .feed-xl.feed-rsi-bear,
.pulse-v3-active .feed-m.feed-rsi-bear,
.pulse-v3-active .feed-s.feed-rsi-bear,
.pulse-v3-active .feed-n.feed-rsi-bear {
  background: linear-gradient(90deg, rgba(255,102,0,0.10) 0%, transparent 60%);
}
.pulse-v3-active .feed-xl.feed-confluence,
.pulse-v3-active .feed-m.feed-confluence,
.pulse-v3-active .feed-s.feed-confluence,
.pulse-v3-active .feed-n.feed-confluence {
  background: linear-gradient(90deg, rgba(139,92,246,0.10) 0%, transparent 60%);
}
/* Hover sweep — bloom outward from the existing left-edge accent stripe.
   Constrained to the same 0-60% width as the static accent gradient so it
   doesn't wash the full row. Only on hover-capable devices (no touch). */
.pulse-v3-active .feed-xl,
.pulse-v3-active .feed-m,
.pulse-v3-active .feed-s,
.pulse-v3-active .feed-n {
  position: relative;
  isolation: isolate;
}
@media (hover: hover) {
  .pulse-v3-active .feed-xl::before,
  .pulse-v3-active .feed-m::before,
  .pulse-v3-active .feed-s::before,
  .pulse-v3-active .feed-n::before {
    content: "";
    position: absolute;
    inset: 0 40% 0 0;
    pointer-events: none;
    background: linear-gradient(90deg, var(--row-accent, transparent) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.18s ease;
    z-index: -1;
  }
  .pulse-v3-active .feed-xl:hover::before,
  .pulse-v3-active .feed-m:hover::before,
  .pulse-v3-active .feed-s:hover::before,
  .pulse-v3-active .feed-n:hover::before { opacity: 0.35; }
}

/* ── TAN-684 (2026-06-17): terminal pulse-row event shimmer — WRONG-SURFACE FIX ──
   The .evt-sweep conic-ring shimmer paints on the standalone /pulse tab but NOT
   on the command-center TERMINAL surface (rows under .intel-feed-wrap carrying
   .pulse-v3-row--surface-cc + .feed-confluence). Root cause: the hover-sweep
   accent rule `.pulse-v3-active .feed-xl::before` directly above (specificity
   0,2,1) is a more-specific, later-source sibling of the `.feed-xl.evt-sweep
   ::before` shimmer rule (0,2,1) — on the terminal surface (where .pulse-v3-
   active is always an ancestor) it overrides the ring's background to a static
   linear-gradient and forces opacity:0, so the conic ring never paints and the
   --pta-hit-ang animation has nothing visible to drive.

   Fix: re-bind the EXACT pulse-tab evt-sweep treatment to the terminal surface
   with a higher-specificity, terminal-scoped selector (.intel-feed-wrap …,
   specificity 0,4,1) so it wins every contested property. This re-applies the
   identical conic ring, mask, 3.5px band, 0.40 shoulders, 3-lap animation,
   contained inset glow, hidden ::after bloom, and reduced-motion suppression
   that already work on the /pulse tab. The /pulse tab itself (no .intel-feed-
   wrap ancestor) is untouched. */
.pulse-v3-active .intel-feed-wrap .feed-xl.evt-sweep::before,
.pulse-v3-active .intel-feed-wrap .feed-m.evt-sweep::before,
.pulse-v3-active .intel-feed-wrap .feed-s.evt-sweep::before,
.pulse-v3-active .intel-feed-wrap .feed-n.evt-sweep::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--evt-ring-radius);
  padding: 3.5px;             /* match the pulse-tab feed-xl band (TAN-684) */
  background: conic-gradient(from var(--pta-hit-ang),
    rgba(34,211,238,0)    0deg,
    rgba(59,130,246,0.40) 120deg,
    rgba(34,211,238,0.75) 200deg,
    rgba(103,232,249,1)   250deg,
    rgba(34,211,238,0.75) 300deg,
    rgba(59,130,246,0.40) 340deg,
    rgba(34,211,238,0)    360deg);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
  opacity: 1;                 /* override the hover-sweep opacity:0 */
  transition: none;           /* override the hover-sweep opacity transition */
  animation: pta-hit-shimmer 4.2s linear var(--evt-laps);
  will-change: --pta-hit-ang;
}
/* Gold (held) / neutral (unclassified) conic color variants — terminal scope. */
.pulse-v3-active .intel-feed-wrap .feed-xl.evt-sweep.evt-sweep--gold::before,
.pulse-v3-active .intel-feed-wrap .feed-m.evt-sweep.evt-sweep--gold::before,
.pulse-v3-active .intel-feed-wrap .feed-s.evt-sweep.evt-sweep--gold::before,
.pulse-v3-active .intel-feed-wrap .feed-n.evt-sweep.evt-sweep--gold::before {
  background: conic-gradient(from var(--pta-hit-ang),
    rgba(251,191,36,0)    0deg,
    rgba(251,191,36,0.40) 120deg,
    rgba(251,191,36,0.75) 200deg,
    rgba(251,191,36,1)    250deg,
    rgba(251,191,36,0.75) 300deg,
    rgba(251,191,36,0.40) 340deg,
    rgba(251,191,36,0)    360deg);
}
.pulse-v3-active .intel-feed-wrap .feed-xl.evt-sweep.evt-sweep--neutral::before,
.pulse-v3-active .intel-feed-wrap .feed-m.evt-sweep.evt-sweep--neutral::before,
.pulse-v3-active .intel-feed-wrap .feed-s.evt-sweep.evt-sweep--neutral::before,
.pulse-v3-active .intel-feed-wrap .feed-n.evt-sweep.evt-sweep--neutral::before {
  background: conic-gradient(from var(--pta-hit-ang),
    rgba(255,255,255,0)    0deg,
    rgba(255,255,255,0.40) 120deg,
    rgba(255,255,255,0.75) 200deg,
    rgba(255,255,255,1)    250deg,
    rgba(255,255,255,0.75) 300deg,
    rgba(255,255,255,0.40) 340deg,
    rgba(255,255,255,0)    360deg);
}
/* Square corners — match feed-xl tab. TAN-684 (2026-06-17): the static inset
   hairline glows (box-shadow inset 0 0 0 1px ...) for cyan/gold/neutral were
   removed here too — they left a resting outline on the terminal pulse rows.
   Only the square-corner ring radius is kept; the animated conic sweep stands
   alone. */
.pulse-v3-active .intel-feed-wrap .feed-xl.evt-sweep,
.pulse-v3-active .intel-feed-wrap .feed-m.evt-sweep,
.pulse-v3-active .intel-feed-wrap .feed-s.evt-sweep,
.pulse-v3-active .intel-feed-wrap .feed-n.evt-sweep {
  --evt-ring-radius: 0px;
}
/* Drop the outward ::after bloom on flush terminal rows (same as pulse tab). */
.pulse-v3-active .intel-feed-wrap .feed-xl.evt-sweep::after,
.pulse-v3-active .intel-feed-wrap .feed-m.evt-sweep::after,
.pulse-v3-active .intel-feed-wrap .feed-s.evt-sweep::after,
.pulse-v3-active .intel-feed-wrap .feed-n.evt-sweep::after { display: none; }
/* Reduced-motion: suppress the sweep on the terminal too. (The static inset
   glow was removed in TAN-684; the box-shadow:none below is now a harmless
   defensive no-op kept in case any future variant re-adds a resting shadow.) */
@media (prefers-reduced-motion: reduce) {
  .pulse-v3-active .intel-feed-wrap .feed-xl.evt-sweep::before,
  .pulse-v3-active .intel-feed-wrap .feed-m.evt-sweep::before,
  .pulse-v3-active .intel-feed-wrap .feed-s.evt-sweep::before,
  .pulse-v3-active .intel-feed-wrap .feed-n.evt-sweep::before {
    animation: none;
    opacity: 0;
    display: none;
  }
  .pulse-v3-active .intel-feed-wrap .feed-xl.evt-sweep,
  .pulse-v3-active .intel-feed-wrap .feed-m.evt-sweep,
  .pulse-v3-active .intel-feed-wrap .feed-s.evt-sweep,
  .pulse-v3-active .intel-feed-wrap .feed-n.evt-sweep { box-shadow: none; }
}

/* Per-accent palette for hover sweep */
.pulse-v3-active .feed-confluence { --row-accent: rgba(139,92,246,0.20); }
.pulse-v3-active .feed-bear       { --row-accent: rgba(239,68,68,0.20); }
.pulse-v3-active .feed-bull       { --row-accent: rgba(16,185,129,0.20); }
.pulse-v3-active .feed-amber      { --row-accent: rgba(245,158,11,0.20); }
.pulse-v3-active .feed-sma        { --row-accent: rgba(59,130,246,0.20); }
.pulse-v3-active .feed-fib        { --row-accent: rgba(20,184,166,0.20); }
/* TAN-519: gap_filled + rsi-bear row accents */
.pulse-v3-active .feed-gap-fill   { --row-accent: rgba(255,255,255,0.20); }
.pulse-v3-active .feed-rsi-bear   { --row-accent: rgba(255,102,0,0.20); }
.pulse-v3-active .feed-neutral    { --row-accent: rgba(100,116,139,0.20); }
.pulse-v3-active .feed-m .ts, .pulse-v3-active .feed-s .ts, .pulse-v3-active .feed-n .ts {
  font-size: 11px; color: var(--text-muted);
  width: 44px; flex-shrink: 0;
}
.pulse-v3-active .feed-m .ticker, .pulse-v3-active .feed-s .ticker, .pulse-v3-active .feed-n .ticker {
  font-size: 14px; font-weight: 700;
  color: var(--text-primary); width: 56px; flex-shrink: 0;
}
.pulse-v3-active .feed-m .price, .pulse-v3-active .feed-s .price, .pulse-v3-active .feed-n .price {
  font-size: 13px; color: var(--text-secondary); font-weight: 600;
  width: 72px; flex-shrink: 0;
}
.pulse-v3-active .feed-m .change-up   { font-size: 12px; color: var(--emerald); font-weight: 600; width: 48px; flex-shrink: 0; }
.pulse-v3-active .feed-m .change-down { font-size: 12px; color: var(--red); font-weight: 600; width: 48px; flex-shrink: 0; }
.pulse-v3-active .feed-s .change-up   { font-size: 12px; color: var(--emerald); font-weight: 600; width: 48px; flex-shrink: 0; }
.pulse-v3-active .feed-s .change-down { font-size: 12px; color: var(--red); font-weight: 600; width: 48px; flex-shrink: 0; }
.pulse-v3-active .feed-n .change-up   { font-size: 12px; color: var(--emerald); font-weight: 600; width: 48px; flex-shrink: 0; }
.pulse-v3-active .feed-n .change-down { font-size: 12px; color: var(--red); font-weight: 600; width: 48px; flex-shrink: 0; }
.pulse-v3-active .feed-m .event-type, .pulse-v3-active .feed-s .event-type, .pulse-v3-active .feed-n .event-type {
  font-size: 11px; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase;
}
.pulse-v3-active .feed-m .event-type { color: var(--emerald); }
.pulse-v3-active .feed-s .event-type { color: var(--red); }
.pulse-v3-active .feed-n .event-type { color: var(--text-secondary); }
.pulse-v3-active .feed-m .detail, .pulse-v3-active .feed-s .detail {
  flex: 1; font-size: 12px; color: var(--text-secondary);
}
.pulse-v3-active .feed-m .detail .num, .pulse-v3-active .feed-s .detail .num { color: var(--text-primary); font-weight: 700; }

/* Blurb in expanded panel */
.pulse-v3-active .blurb {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.5;
  margin: 0 0 12px;
  padding-left: 1px;
  padding-right: 200px;
}
.pulse-v3-active .blurb .accent { color: var(--rsi-3os); font-weight: 700; }
.pulse-v3-active .blurb .num { color: var(--text-primary); font-weight: 700; }
.pulse-v3-active .blurb strong { color: var(--text-primary); font-weight: 700; }

/* Neutral chip fallback (used when zone has no derivable Fib/MACD/RSI signal) */
.pulse-v3-active .chip.neutral {
  color: var(--text-secondary);
  border-color: var(--border);
  background: var(--bg-deep);
}

/* Inline expand panel — copied from mockup. M/S panels skip chart-mount. */
.pulse-v3-active .pulse-v3-detail-panel {
  position: relative;
  border-bottom: 1px solid var(--border-soft);
  border-left: 3px solid var(--t7);
  background: linear-gradient(180deg, rgba(139,92,246,0.04) 0%, transparent 40%);
  padding: 14px 22px 18px;
}
.pulse-v3-active .feed-xl.expanded + .pulse-v3-detail-panel,
.pulse-v3-active .feed-m.expanded + .pulse-v3-detail-panel,
.pulse-v3-active .feed-s.expanded + .pulse-v3-detail-panel,
.pulse-v3-active .feed-n.expanded + .pulse-v3-detail-panel { display: block !important; }

/* Detail-panel left accent + bg gradient match the parent row's tier
   (PR #708 made the row stripe event-direction-driven; this mirrors it).
   panel-feed-xl keeps the purple default; M/S/N override. */
.pulse-v3-active .pulse-v3-detail-panel.panel-feed-m {
  border-left-color: var(--t6);
  background: linear-gradient(180deg, rgba(16,185,129,0.04) 0%, transparent 40%);
}
.pulse-v3-active .pulse-v3-detail-panel.panel-feed-s {
  border-left-color: var(--t1);
  background: linear-gradient(180deg, rgba(239,68,68,0.04) 0%, transparent 40%);
}
.pulse-v3-active .pulse-v3-detail-panel.panel-feed-n {
  border-left-color: var(--text-muted, #64748B);
  background: linear-gradient(180deg, rgba(100,116,139,0.04) 0%, transparent 40%);
}
/* TAN-974: setup (pattern/script) panels - left edge + bg match the row's
   type color (yellow pattern / pink script), NOT the purple default. */
.pulse-v3-active .pulse-v3-detail-panel.feed-pattern {
  border-left-color: #FACC15;
  background: linear-gradient(180deg, rgba(250,204,21,0.05) 0%, transparent 40%);
}
.pulse-v3-active .pulse-v3-detail-panel.feed-script {
  border-left-color: #EC4899;
  background: linear-gradient(180deg, rgba(236,72,153,0.05) 0%, transparent 40%);
}

/* Mirror accent onto the expanded detail panel so its left stripe + bg
   gradient match the row. Placed after the panel-feed-* tier rules so
   the headline-derived accent (feed-fib teal, feed-sma blue, feed-amber
   cloud, feed-confluence purple, feed-neutral grey) wins on source order
   when both panel-feed-* and feed-* classes are present. */
.pulse-v3-active .pulse-v3-detail-panel.feed-bull {
  border-left-color: var(--emerald, #10B981);
  background: linear-gradient(180deg, rgba(16,185,129,0.04) 0%, transparent 40%);
}
.pulse-v3-active .pulse-v3-detail-panel.feed-bear {
  border-left-color: var(--red, #EF4444);
  background: linear-gradient(180deg, rgba(239,68,68,0.04) 0%, transparent 40%);
}
.pulse-v3-active .pulse-v3-detail-panel.feed-amber {
  border-left-color: var(--warn, #F59E0B);
  background: linear-gradient(180deg, rgba(245,158,11,0.04) 0%, transparent 40%);
}
.pulse-v3-active .pulse-v3-detail-panel.feed-sma {
  border-left-color: #3B82F6;
  background: linear-gradient(180deg, rgba(59,130,246,0.04) 0%, transparent 40%);
}
.pulse-v3-active .pulse-v3-detail-panel.feed-fib {
  border-left-color: #14B8A6;
  background: linear-gradient(180deg, rgba(20,184,166,0.04) 0%, transparent 40%);
}
.pulse-v3-active .pulse-v3-detail-panel.feed-neutral {
  border-left-color: var(--text-muted, #64748B);
  background: linear-gradient(180deg, rgba(100,116,139,0.04) 0%, transparent 40%);
}
.pulse-v3-active .pulse-v3-detail-panel.feed-confluence {
  border-left-color: var(--purple, #a855f7);
  background: linear-gradient(180deg, rgba(168,85,247,0.05) 0%, transparent 40%);
}

.pulse-v3-active .pulse-v3-detail-panel .panel-top {
  position: absolute;
  top: 12px;
  right: 22px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 2;
}
/* Issue 3a — chip strip showing every event in this alert (the headline
   chip on the row only renders the top-by-weight event + "+N MORE"). Sits
   between panel-top (Snooze) and the blurb. */
.pulse-v3-active .pulse-v3-detail-panel .panel-events-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 0 10px;
  margin-top: -2px;
  padding-right: 200px; /* leave room for the absolute-positioned Snooze */
}
/* Issue 5 — pill row uses .grid-pill markup so the body-level
   grid-pill-portal-tip handler shows the same styled tooltip as Rankings
   grid view. Need a layout container that flexes the pills. */
.pulse-v3-active .pulse-v3-detail-panel .pulse-v3-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 14px;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-bottom: 12px;
  align-items: center;
}
.pulse-v3-active .pulse-v3-detail-panel .pulse-v3-pill-row .grid-pill {
  height: 18px;
  padding: 0 7px;
  font-size: 10px;
}
.pulse-v3-active .panel-btn {
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 5px 12px;
  cursor: pointer;
  transition: all 0.12s ease;
}
.pulse-v3-active .panel-btn:hover { border-color: var(--text-muted); background: var(--row-hover); color: var(--text-primary); }
.pulse-v3-active .pulse-snooze-btn.snoozed {
  color: var(--text-muted);
  font-style: italic;
  border-color: var(--border);
  background: transparent;
}
.pulse-v3-active .pulse-snooze-btn.snoozed:hover {
  color: var(--text-secondary);
  border-color: var(--text-muted);
}

/* Pulse v3 chart-mount canvas — chart-stack/chart-wrap come from the
   detail panel HTML; stretch the canvas to fill its wrap and match the
   mockup's dark backdrop. */
.pulse-v3-active .pulse-v3-detail-panel .chart-stack {
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  background: #141B2D;
  margin-top: 8px;
}
.pulse-v3-active .pulse-v3-detail-panel .chart-wrap {
  position: relative;
  background: #141B2D;
}
.pulse-v3-active .pulse-v3-detail-panel .pulse-v3-chart-canvas {
  display: block;
  width: 100%;
  height: 380px;
  background: #141B2D;
}

.pulse-v3-active .signals-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 10px 14px;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-bottom: 12px;
}
/* TAN-168: Realtime signal chips (.grid-pill.pulse-chip) inside the
   detail-panel signals-row lacked text/bg overrides, so the grid-pill
   default color (#0B1120) was invisible on the dark signals-row
   background.  Mirror the .chip base palette so they read correctly. */
.pulse-v3-active .pulse-v3-signal-chips .grid-pill.pulse-chip {
  color: var(--text-secondary);
  background: #0B1120;
  border: 1px solid #1E293B;
}
.pulse-v3-active .pulse-v3-signal-chips .grid-pill.pulse-chip-multi-rsi,
.pulse-v3-active .pulse-v3-signal-chips .grid-pill.pulse-chip-rsi-div.bull,
.pulse-v3-active .pulse-v3-signal-chips .grid-pill.pulse-chip-gap.up {
  color: #00cc44; border-color: rgba(0,204,68,0.30); background: rgba(0,204,68,0.15);
}
.pulse-v3-active .pulse-v3-signal-chips .grid-pill.pulse-chip-rsi-div.bear,
.pulse-v3-active .pulse-v3-signal-chips .grid-pill.pulse-chip-gap.down {
  color: #ef4444; border-color: rgba(239,68,68,0.40); background: rgba(239,68,68,0.12);
}
/* TAN-959: list/feed + dashboard RSI-divergence chip. Mirrors the grid
   .pulse-chip-rsi-div colors above (bull green, bear red) for the .chip
   surface used by feed-xl rows (.pulse-v3-active) + dashboard preview
   (.dpv2-chip-row). Fisher chips reuse .chip.signal.script (TAN-782). */
.pulse-v3-active .chip.rsi-div.bull,
.dpv2-chip-row .chip.rsi-div.bull {
  color: #00cc44; border-color: rgba(0,204,68,0.30); background: rgba(0,204,68,0.15);
}
.pulse-v3-active .chip.rsi-div.bear,
.dpv2-chip-row .chip.rsi-div.bear {
  color: #ef4444; border-color: rgba(239,68,68,0.40); background: rgba(239,68,68,0.12);
}
/* TAN-782: script-derived family (Fisher Transform) renders hot-pink on every
   chip surface. Direction (bull/bear) and tier (hc/std) are preserved in the
   chip classes for source-script parity — the arrow glyph and HC tag carry
   direction/tier; the pink fill carries "this came from a script". The hc tier
   gets a thicker border. This block intentionally OVERRIDES the old green/red
   direction recolor for Fisher chips. Distinct from confluence purple. */
.pulse-v3-active .pulse-v3-signal-chips .grid-pill.pulse-chip-fisher,
.pulse-v3-active .chip.fisher,
.pulse-v3-active .chip.signal.script,
.dpv2-chip-row .chip.fisher,
.dpv2-chip-row .chip.signal.script {
  color: var(--script-pink); border-color: var(--script-pink-border); background: var(--script-pink-dim);
}
.pulse-v3-active .pulse-v3-signal-chips .grid-pill.pulse-chip-fisher.hc,
.pulse-v3-active .chip.fisher.hc,
.pulse-v3-active .chip.signal.script.hc,
.dpv2-chip-row .chip.fisher.hc,
.dpv2-chip-row .chip.signal.script.hc {
  border-width: 1.5px;
}
.pulse-v3-active .signal { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.pulse-v3-active .signal-label {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
}
.pulse-v3-active .signal-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}
.pulse-v3-active .signal-value.bull   { color: var(--emerald); }
.pulse-v3-active .signal-value.bear   { color: var(--red); }
.pulse-v3-active .signal-value.warn   { color: var(--amber, #F59E0B); }
.pulse-v3-active .signal-value.purple { color: var(--rsi-3os); }
.pulse-v3-active .signal-value.info   { color: var(--info); }

.pulse-v3-active .chart-mount {
  min-height: 240px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-top: 4px;
}

/* ──────────────────────────────────────────────────────────────────
   PULSE V3 — chart toolbar + Multi-RSI legend + fullscreen button
   Ported verbatim from pulse-v3-mockups/v3.html lines 439-541.
   Scoped under .pulse-v3-active .pulse-v3-detail-panel to avoid
   collision with the production stock-detail sidebar.
   ──────────────────────────────────────────────────────────────── */

.pulse-v3-active .pulse-v3-detail-panel .chart-toolbar {
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: #0B1120;
  border: 1px solid var(--border);
  border-radius: 4px 4px 0 0;
  border-bottom: none;
}
.pulse-v3-active .pulse-v3-detail-panel .tf-group {
  display: flex; gap: 4px; align-items: center;
}
.pulse-v3-active .pulse-v3-detail-panel .tf-label {
  font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-faint);
  margin-right: 6px; font-weight: 700;
}
.pulse-v3-active .pulse-v3-detail-panel .tf-btn {
  font: inherit;
  font-size: 11px;
  padding: 4px 9px;
  background: transparent;
  color: #94A3B8;
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.12s;
  font-weight: 600;
}
.pulse-v3-active .pulse-v3-detail-panel .tf-btn:hover {
  color: #CDCCCA;
  border-color: #64748B;
}
.pulse-v3-active .pulse-v3-detail-panel .tf-btn.active {
  color: #0a0e1a;
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.pulse-v3-active .pulse-v3-detail-panel .tf-btn.active.c-daily   { background: #10B981; }
.pulse-v3-active .pulse-v3-detail-panel .tf-btn.active.c-twoDay  { background: #3B82F6; }
.pulse-v3-active .pulse-v3-detail-panel .tf-btn.active.c-weekly  { background: #A855F7; }
.pulse-v3-active .pulse-v3-detail-panel .tf-btn.active.c-twoWeek { background: #06B6D4; }
.pulse-v3-active .pulse-v3-detail-panel .tf-btn.active.c-monthly { background: #F59E0B; }
.pulse-v3-active .pulse-v3-detail-panel .tf-btn.active.c-gaps    { background: #F5F5F5; color: #0a0e1a; }
.pulse-v3-active .pulse-v3-detail-panel .tf-btn.active.c-near    { background: #06B6D4; }
.pulse-v3-active .pulse-v3-detail-panel .tf-btn.active.c-far     { background: #F59E0B; }
.pulse-v3-active .pulse-v3-detail-panel .tf-btn.active.c-log {
  background: rgba(255,255,255,0.10);
  color: #CDCCCA;
  border-color: rgba(255,255,255,0.18);
}

.pulse-v3-active .pulse-v3-detail-panel .ch-rsi-key {
  position: absolute;
  top: 8px;
  right: 48px;
  display: flex; align-items: center; gap: 10px;
  padding: 4px 10px;
  background: rgba(11,17,32,0.85);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 9px;
  color: #94A3B8;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  z-index: 2;
}
.pulse-v3-active .pulse-v3-detail-panel .ch-rsi-key .lbl {
  color: #64748B;
}
.pulse-v3-active .pulse-v3-detail-panel .ch-rsi-key .swatch {
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 4px;
  vertical-align: middle;
  border-radius: 1px;
}
.pulse-v3-active .pulse-v3-detail-panel .ch-rsi-key .item {
  display: flex; align-items: center;
}

/* Legend hidden on all viewports — replaced by hover/touch tooltip on triangles. */
.pulse-v3-active .pulse-v3-detail-panel .ch-rsi-key { display: none; }

.ch-rsi-tip {
  position: absolute;
  background: #0F1729;
  border: 1px solid #1E293B;
  border-radius: 6px;
  padding: 7px 10px;
  width: 220px;
  font-size: 10px;
  color: var(--text-secondary);
  line-height: 1.45;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
  pointer-events: none;
  z-index: 10;
  display: none;
}
.ch-rsi-tip.visible { display: block; }
.ch-rsi-tip strong { color: var(--text-primary); font-weight: 600; letter-spacing: 0.4px; display: block; margin-bottom: 3px; font-size: 9.5px; text-transform: uppercase; }
.ch-rsi-tip .tip-val { color: var(--text-primary); font-weight: 600; font-family: ui-monospace, Menlo, monospace; display: block; margin-bottom: 3px; }
.ch-rsi-tip .tip-desc { color: var(--text-muted); display: block; }
.ch-rsi-tip .swatch { display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:6px; vertical-align:middle; }

.pulse-v3-active .pulse-v3-detail-panel .ch-fullscreen {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 3;
  background: rgba(11,17,32,0.92);
  color: #CBD5E1;
  border: 1px solid var(--border);
  border-radius: 4px;
  width: 30px; height: 30px;
  padding: 0;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.12s;
}
.pulse-v3-active .pulse-v3-detail-panel .ch-fullscreen svg {
  display: block;
}
.pulse-v3-active .pulse-v3-detail-panel .ch-fullscreen:hover {
  color: #FFFFFF;
  border-color: #94A3B8;
  background: rgba(11,17,32,1);
}

/* ─── Mobile (≤768px) — Pulse v3 row + expanded panel + chart toolbar polish.
   Bucket 1: hide caret column (whole row already toggles via row-level click
   handler at js/app.js:25463), so the score gauge becomes the visual
   right edge of the collapsed row.
   Bucket 2: blurb spans full panel width (no 200px right reserve for the
   absolute-positioned Snooze on desktop) and renders in primary white text;
   Snooze button moves above the blurb, right-aligned in its own row.
   Bucket 3: shorten chart-toolbar pill labels (SMA50/SMA200/Log) by hiding
   the full text and revealing a short label via an inline-flex span pair.
   Desktop unaffected. */
@media (max-width: 768px) {
  /* Bucket 1A — hide the dropdown-caret button. Whole-row click already
     toggles expansion (see _pulseV3ToggleRow). The .right-col wrapper only
     holds the toggle button on Pulse v3 rows; collapsing it lets the rank
     gauge sit at the rightmost edge. */
  .pulse-v3-active .feed-xl .right-col,
  .pulse-v3-active .feed-m .toggle,
  .pulse-v3-active .feed-s .toggle,
  .pulse-v3-active .feed-n .toggle {
    display: none !important;
  }

  /* Bucket 2A — Snooze button moves above the blurb. The desktop layout
     uses absolute positioning for .panel-top (top:12px right:22px) which
     overlaps the blurb's right edge. On mobile, return it to flow and
     right-align it as its own row. */
  .pulse-v3-active .pulse-v3-detail-panel .panel-top {
    position: static;
    top: auto;
    right: auto;
    justify-content: flex-end;
    margin-bottom: 8px;
  }

  /* Bucket 2B — blurb is full panel width and primary-white text. Drop
     the desktop 200px right reserve (which existed only because Snooze was
     absolute-positioned at top-right). */
  .pulse-v3-active .blurb {
    color: var(--text-primary);
    padding-right: 0;
  }
  /* The panel-events-strip uses the same 200px right reserve — drop it on
     mobile too so chips can wrap into the freed space. */
  .pulse-v3-active .pulse-v3-detail-panel .panel-events-strip {
    padding-right: 0;
  }

  /* Toolbar wraps to 2 rows on mobile so full pill text ("Gaps", "Near",
     "Far", "SMA50", "SMA200") stays readable. Row 1: cloud chips. Row 2:
     mode pills + timeframes + log toggle, right-aligned. The divider that
     would land at the start of row 2 is hidden so it doesn't dangle. */
  .canon-v3-toolbar { flex-wrap: wrap; row-gap: 4px; }
  .canon-v3-toolbar > .tb-group.tb-clouds { flex-basis: 100%; justify-content: flex-end; }
  .canon-v3-toolbar > .tb-clouds + .tb-divider { display: none; }
  .canon-v3-toolbar > .tb-group.tb-modes { margin-left: auto; }
}

/* Pulse v3 pill labels — desktop default: show the full word, hide the
   abbreviated mobile form. The @media (max-width:480px) block below
   inverts these so "Very Strong" becomes "V. Strong" on phone width. */
.pulse-v3-active .grid-pill .lbl-full { display: inline; }
.pulse-v3-active .grid-pill .lbl-mobile { display: none; }

/* ─── Mobile (≤480px) — /pulse tab compaction ─────────────────────────────
   Fix: post-#806 the .feed-xl rows were too tall on iPhone-width, the
   gauge oversized, and the recency-bucket "FRI MAY 1 ▸ +N" pill cramped.
   Tighten vertical padding, shrink gauge + canvas, and make the bucket
   divider sticky to the top of the scroll container so it stays on
   screen as the user scrolls a long list. */
@media (max-width: 480px) {
  .pulse-v3-active .feed-xl {
    gap: 10px;
    padding: 14px 12px;
  }
  .pulse-v3-active .feed-xl .ts {
    width: 38px;
    font-size: 10px;
    align-self: center;
  }
  /* same fix as .dpv2-rank — see PR #813: orbit traces 60 CSS-px, halo inset:-4px, 44→52 closes "two rings" gap */
  .pulse-v3-active .feed-xl .rank {
    width: 52px;
    height: 52px;
  }
  .pulse-v3-active .feed-xl .rank .num {
    font-size: 14px;
  }
  .pulse-v3-active .feed-xl .ticker {
    width: 48px;
    font-size: 13px;
  }
  .pulse-v3-active .feed-xl .price {
    width: auto;
    min-width: 56px;
    font-size: 13px;
  }
  .pulse-v3-active .feed-xl .change-up,
  .pulse-v3-active .feed-xl .change-down {
    width: auto;
    min-width: 40px;
    font-size: 12px;
  }
  .pulse-v3-active .feed-xl .row1 {
    gap: 8px;
    min-width: 0;
  }
  .pulse-v3-active .feed-xl .row2 {
    gap: 4px;
  }
  .pulse-v3-active .feed-xl .body {
    min-width: 0;
    gap: 8px;
  }
  .pulse-v3-active .chip {
    font-size: 10px;
    padding: 2px 5px;
    letter-spacing: 0.04em;
  }
  /* "Very *" → "V. *" pill-label swap. Pulse v3 detail-panel pills emit
     paired .lbl-full + .lbl-mobile spans (see _pulseV3LabelDual). At
     ≤480px we hide the long form and show the abbreviation so the
     pill strip fits on one row at iPhone-13-mini width (375px). */
  .pulse-v3-active .grid-pill .lbl-full { display: none; }
  .pulse-v3-active .grid-pill .lbl-mobile { display: inline; }
  /* Bucket 4 — keep all chips on one row at iPhone-13-mini width (375px).
     row1/row2 flex containers default to flex-wrap:wrap, so a single tight
     row remains preferred when total chip width fits. */
  .pulse-v3-active .feed-xl .row1,
  .pulse-v3-active .feed-xl .row2 {
    gap: 3px;
  }
  /* Recency bucket header — make sticky + give the trailing pill its own
     non-shrinking width so "FRI MAY 1 ▸ +139" doesn't crush together. */
  .confluence-time-divider {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--surface, #0B1120);
    margin: 12px 0 8px;
    padding: 6px 10px;
    gap: 10px;
  }
  .confluence-time-divider span {
    flex-shrink: 0;
  }
  .confluence-time-divider .chip {
    flex-shrink: 0;
  }
  /* PR #818 — match .feed-xl mobile padding/gap/ts/ticker so EV rows align
     horizontally with confluence rows (time and ticker columns at same x). */
  .pulse-v3-active .feed-m { padding: 8px 12px; gap: 10px; }
  .pulse-v3-active .feed-s,
  .pulse-v3-active .feed-n { padding: 6px 12px; gap: 10px; }
  .pulse-v3-active .feed-m .ts,
  .pulse-v3-active .feed-s .ts,
  .pulse-v3-active .feed-n .ts {
    width: 38px;
    font-size: 10px;
  }
  .pulse-v3-active .feed-m .ticker,
  .pulse-v3-active .feed-s .ticker,
  .pulse-v3-active .feed-n .ticker {
    width: 48px;
    font-size: 13px;
  }
  /* EV alert rows: chip wraps below ticker/price line on mobile.
     The chip (.chip) is a direct child of .feed-m/.feed-s/.feed-n,
     sandwiched between .change-* and .detail/.toggle. Push it to row 2
     via flex-wrap + order so row 1 = ts/ticker/price/change, row 2 = chip+caret. */
  .pulse-v3-active .feed-m,
  .pulse-v3-active .feed-s,
  .pulse-v3-active .feed-n {
    flex-wrap: wrap;
    row-gap: 4px;
  }
  /* PR #818 — line-break pseudo: forces chip onto a new flex row
     without making the chip itself fill the row. The chip stays intrinsic. */
  .pulse-v3-active .feed-m::after,
  .pulse-v3-active .feed-s::after,
  .pulse-v3-active .feed-n::after {
    content: '';
    flex-basis: 100%;
    height: 0;
    order: 9;
  }
  .pulse-v3-active .feed-m > .chip,
  .pulse-v3-active .feed-s > .chip,
  .pulse-v3-active .feed-n > .chip {
    margin-left: 50px;
    order: 10;
    max-width: calc(100% - 50px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pulse-v3-active .feed-m > .detail,
  .pulse-v3-active .feed-s > .detail,
  .pulse-v3-active .feed-n > .detail {
    order: 11;
  }
  /* Absolute caret: keep top-right of first flex line, not wrapped order 11. */
  .pulse-v3-active .feed-m > .toggle,
  .pulse-v3-active .feed-s > .toggle,
  .pulse-v3-active .feed-n > .toggle {
    order: 0;
    top: 10px;
    transform: none;
  }
  .pulse-v3-active .feed-m.expanded > .toggle .caret,
  .pulse-v3-active .feed-s.expanded > .toggle .caret,
  .pulse-v3-active .feed-n.expanded > .toggle .caret {
    transform: rotate(180deg);
  }
}

/* Sidebar collapse toggle button (in .sidebar-header, hidden on mobile) */
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sidebar-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-muted, #94a3b8);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  position: relative;
}
.sidebar-collapse-btn:hover {
  background: var(--surface-2, rgba(148,163,184,0.08));
  border-color: var(--border);
  color: var(--text, #e5e7eb);
}
.sidebar-collapse-btn:focus-visible {
  outline: 2px solid var(--blue, #3b82f6);
  outline-offset: 2px;
}
/* Floating tooltip — portaled to <body> so it escapes sidebar overflow */
.floating-tooltip {
  position: fixed;
  background: #1E293B;
  color: #F1F5F9;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
  z-index: 9999;
  border: 1px solid var(--border);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transform: translateY(-50%);
}
.floating-tooltip.visible { opacity: 1; }
@media (max-width: 768px) {
  .sidebar-collapse-btn { display: none; }
}

/* ── Sidebar collapsed state (desktop) ── */
body.sidebar-collapsed { --sidebar-w: 64px; }
body.sidebar-collapsed .sidebar-brand-sub,
body.sidebar-collapsed .sidebar-section-label,
body.sidebar-collapsed .sidebar-nav-item .nav-label,
body.sidebar-collapsed .sidebar-nav-item .lock-icon,
body.sidebar-collapsed .sidebar-nav-item .coming-soon-badge,
body.sidebar-collapsed .sidebar-login-btn span,
body.sidebar-collapsed .sidebar-external .nav-label,
body.sidebar-collapsed .sidebar-external .ext-icon { display: none; }
body.sidebar-collapsed .sidebar-header { padding: 0 16px; justify-content: center; }
body.sidebar-collapsed .sidebar-header img { display: none; }
body.sidebar-collapsed .sidebar-brand-name { font-size: 14px; }
body.sidebar-collapsed .sidebar-nav { padding: 0 8px; }
body.sidebar-collapsed .sidebar-nav-item { justify-content: center; padding: 9px; gap: 0; }
body.sidebar-collapsed .sidebar-nav-item svg.nav-icon { width: 20px; height: 20px; }
body.sidebar-collapsed .sidebar-bottom { padding: 0 8px; }
body.sidebar-collapsed .sidebar-login-btn { justify-content: center; padding: 9px; }
body.sidebar-collapsed .sidebar-divider { margin: 12px 8px; }
body.sidebar-collapsed .sidebar-user-meta { display: none; }
body.sidebar-collapsed .sidebar-join-btn { display: none; }
body.sidebar-collapsed .sidebar-collapse-btn svg { transform: scaleX(-1); }

/* ================================================================
   Global Progress Bar — TAN-125
   Top-of-viewport indicator driven by js/progress.js (fetch hook).
   Light blue, matches existing brand var(--blue) family.
   ================================================================ */
#tng-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, #60A5FA 0%, #93C5FD 60%, #60A5FA 100%);
  box-shadow: 0 0 8px rgba(96, 165, 250, 0.55), 0 0 2px rgba(147, 197, 253, 0.9);
  opacity: 0;
  pointer-events: none;
  z-index: 9999; /* above topbar/sidebar (typ. 100-1000), below auth-gate (10000) */
  transition: width 200ms cubic-bezier(0.1, 0.5, 0.2, 1), opacity 220ms ease-out;
  will-change: width, opacity;
}
#tng-progress.is-active { opacity: 1; }
#tng-progress.is-done {
  /* faster snap to 100% then fade */
  transition: width 120ms ease-out, opacity 220ms ease-out 60ms;
  opacity: 0;
}
@media (max-width: 768px) {
  #tng-progress { height: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  #tng-progress {
    transition: width 80ms linear, opacity 120ms linear;
    box-shadow: none;
  }
}

/* ============================================================
   TAN-260 — CC Pulse Phase 1: Compact CSS overrides

   Activated by the `.pulse-v3-row--compact` modifier class emitted
   by renderPulseV3Row when called with `opts.compact = true`.
   Contract layer landed in TAN-264 (PR #1170).

   Scope guarantees:
   - All selectors require `.pulse-v3-row--compact` on the row root.
     The standalone /pulse tab (no modifier) is visually unchanged.
   - Surface-specific tweaks live under `.pulse-v3-row--surface-cc`
     in case CC ever needs theming beyond density (currently a no-op).

   Geometry: ~35% row shrink across the board. Rank wrapper 52 → 34,
   ticker font 14 → 11, padding 14/22 → 8/14. Portal canvas backing
   is unchanged in JS (still 96px CSS in _pulseV3PortalTick) — we
   shrink the canvas CSS box to 62px so the browser downscales the
   backing store. Orbit radius (30 CSS px in JS) scales proportionally
   via that downscale: 30 * (62/96) ≈ 19.4 CSS px from canvas center.
   Static halo ::before inset is tightened to -2px so the orbit ring
   still rides along the bolt's path on the smaller wrapper.

   Screen-2 scope (pill consistency) is folded in below: uniform
   smaller chips inside compact rows so XL and M/S/N rows show the
   same chip footprint instead of mixed sizes.
   ============================================================ */

/* ISSUE 5 (Grok Build 4.5, 2026-07-13): restore pre-TAN-1050-densify compact
   sizing. TAN-1050 v2.0.426 crushed padding 8/14→3/8 (~20px rows, wall of
   text) while yellow setup rows retained more natural height from content.
   Combined with CC .app-body zoom:1.15 (also removed in ISSUE 5) this made
   non-yellow rows look "too tight". Values below = pre-#2628 compact. */
/* XL row — padding, gap, ticker block fonts */
.pulse-v3-active .feed-xl.pulse-v3-row--compact {
  gap: 8px;
  padding: 8px 14px;
}
.pulse-v3-active .feed-xl.pulse-v3-row--compact .ts {
  font-size: 10px;
  width: 36px;
}
.pulse-v3-active .feed-xl.pulse-v3-row--compact .body {
  gap: 4px;
}
.pulse-v3-active .feed-xl.pulse-v3-row--compact .row1 {
  gap: 10px;
}
.pulse-v3-active .feed-xl.pulse-v3-row--compact .ticker {
  font-size: 11px;
  width: 44px;
}
.pulse-v3-active .feed-xl.pulse-v3-row--compact .price {
  font-size: 11px;
  width: 58px;
}
.pulse-v3-active .feed-xl.pulse-v3-row--compact .change-down,
.pulse-v3-active .feed-xl.pulse-v3-row--compact .change-up {
  font-size: 10px;
  width: 38px;
}
.pulse-v3-active .feed-xl.pulse-v3-row--compact .event-type {
  font-size: 10px;
  letter-spacing: 0.12em;
}
.pulse-v3-active .feed-xl.pulse-v3-row--compact .row2 { gap: 4px; }
.pulse-v3-active .feed-xl.pulse-v3-row--compact .row3 { font-size: 11px; }

/* XL rank wrapper — 52 → 34. overflow:visible so the portal canvas
   (62px CSS) which is wider than the wrapper still paints its full
   orbit ring without clipping. */
.pulse-v3-active .feed-xl.pulse-v3-row--compact .rank {
  width: 34px;
  height: 34px;
  overflow: visible;
}
.pulse-v3-active .feed-xl.pulse-v3-row--compact .rank .num,
.pulse-v3-active .feed-xl.pulse-v3-row--compact .rank .dpv2-num {
  font-size: 12px;
}

/* XL right column + toggle */
.pulse-v3-active .feed-xl.pulse-v3-row--compact .right-col {
  width: 64px;
  gap: 4px;
}
.pulse-v3-active .feed-xl.pulse-v3-row--compact .toggle {
  font-size: 12px;
  padding: 4px 6px;
}

/* Portal canvas — shrink CSS box. Browser downscales the 96px backing
   store (set imperatively in JS) so orbit radius / glow / trail scale
   proportionally as part of the CSS transform. */
.pulse-v3-active .feed-xl.pulse-v3-row--compact .rank-portal-canvas {
  width: 62px;
  height: 62px;
}

/* Static halo ::before — ring tracks portal orbit after rank shrink. */
.pulse-v3-active .feed-xl.pulse-v3-row--compact .rank:has(canvas.rank-portal-canvas)::before {
  inset: -4px;
  border-width: 2px;
}

/* M / S / N rows — same density treatment, scaled to their tier. */
.pulse-v3-active .feed-m.pulse-v3-row--compact,
.pulse-v3-active .feed-s.pulse-v3-row--compact,
.pulse-v3-active .feed-n.pulse-v3-row--compact {
  gap: 8px;
  padding: 6px 14px;
}
.pulse-v3-active .feed-s.pulse-v3-row--compact,
.pulse-v3-active .feed-n.pulse-v3-row--compact {
  padding: 5px 14px;
  font-size: 11px;
}
.pulse-v3-active .feed-m.pulse-v3-row--compact .ts,
.pulse-v3-active .feed-s.pulse-v3-row--compact .ts,
.pulse-v3-active .feed-n.pulse-v3-row--compact .ts {
  font-size: 10px;
  width: 36px;
}
.pulse-v3-active .feed-m.pulse-v3-row--compact .ticker,
.pulse-v3-active .feed-s.pulse-v3-row--compact .ticker,
.pulse-v3-active .feed-n.pulse-v3-row--compact .ticker {
  font-size: 11px;
  /* TAN-373: match XL compact ticker width so columns align in CC. */
  width: 44px;
}
.pulse-v3-active .feed-m.pulse-v3-row--compact .price,
.pulse-v3-active .feed-s.pulse-v3-row--compact .price,
.pulse-v3-active .feed-n.pulse-v3-row--compact .price {
  font-size: 11px;
  width: 58px;
}
.pulse-v3-active .feed-m.pulse-v3-row--compact .change-down,
.pulse-v3-active .feed-s.pulse-v3-row--compact .change-down,
.pulse-v3-active .feed-n.pulse-v3-row--compact .change-down,
.pulse-v3-active .feed-m.pulse-v3-row--compact .change-up,
.pulse-v3-active .feed-s.pulse-v3-row--compact .change-up,
.pulse-v3-active .feed-n.pulse-v3-row--compact .change-up {
  font-size: 10px;
  width: 38px;
}
.pulse-v3-active .feed-m.pulse-v3-row--compact .detail,
.pulse-v3-active .feed-s.pulse-v3-row--compact .detail,
.pulse-v3-active .feed-n.pulse-v3-row--compact .detail {
  font-size: 10px;
}
.pulse-v3-active .feed-m.pulse-v3-row--compact .toggle,
.pulse-v3-active .feed-s.pulse-v3-row--compact .toggle,
.pulse-v3-active .feed-n.pulse-v3-row--compact .toggle {
  font-size: 10px;
  padding: 3px 5px;
}

/* Screen-2 fix — uniform chips inside compact rows. */
.pulse-v3-active .pulse-v3-row--compact .chip {
  font-size: 10px;
  padding: 2px 6px;
  letter-spacing: 0.05em;
}

/* Surface-cc hook — currently a no-op. Reserved for any CC-specific
   theming beyond density that doesn't apply to other surfaces. */
.pulse-v3-active .pulse-v3-row--surface-cc {
  /* intentionally empty (TAN-260) */
}

/* ============================================================
   TAN-261 — CC Pulse Phase 2: Card wrapper via Float Field chrome

   No new wrapper component, no FloatField module refactor — the CC
   Pulse output now sits inside a DOM-level reuse of the existing
   .ff-section / .ff-head / .ff-title* classes. This block contains
   only the CC-only modifier overrides needed to make those classes
   work inside CC's flex scroll containers (their FF defaults assume
   a fixed-height canvas section, not a flexing list).

   Standalone /pulse never emits .ff-section--cc — that route calls
   window.renderIntel() with no opts and renders byte-identical.
   ============================================================ */

/* CC modifier — neutralize FF defaults that fight CC layout.
   - margin-bottom: 24px → 0 (CC slots are already gap-spaced)
   - overflow: hidden → visible at the section level so the body's
     own overflow:auto can scroll; chrome border still clips visually
     because of border-radius + the body's overflow:auto on the inner. */
.ff-section--cc {
  margin-bottom: 0;
  overflow: hidden;            /* keep border-radius clipping */
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

/* TAN-357: FF card inside CC lacks the .ff-section--cc modifier (only the
   Pulse-side .cc-pulse-card gets it per init.js:613). The base
   .ff-section { margin-bottom: 24px } leaks a 24px ghost gap between FF
   and Pulse inside .vc-hero. Scope by .vc-hero so /pulse is byte-identical. */
.vc-hero .ff-section { margin-bottom: 0; }
.ff-section--cc .ff-head {
  flex: 0 0 auto;              /* header stays put */
}
.ff-section--cc .ff-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ============================================================
   TAN-342 / TAN-343 — CC Pulse header/filter-bar UI pass (CC-only)
   All rules scoped under .ff-section--cc. /pulse untouched.
   ============================================================ */
/* TAN-374: removed dead 48px override (superseded by 64px rule below at line ~13216) */
.ff-section--cc .intel-filter-bar { margin-bottom: 10px; }
.ff-section--cc .confluence-time-divider span { font-size: 9px; }

/* TAN-343 — .intel-last-scan uses margin-left:auto to push to the right.
   On CC the filter chips now sit between search and last-scan; ensure the
   margin-left:auto on .intel-last-scan still does its job by relying on its
   ordering (chips inherit no auto margins). Also ensure the inline filter
   chips don't stretch — prevent flex-grow from blowing them out. */
.ff-section--cc .intel-feed-header .intel-filter-chip,
.ff-section--cc .intel-feed-header .pulse-type-pill,
.ff-section--cc .intel-feed-header .intel-fresh-toggle {
  flex-shrink: 0;
}

/* ============================================================
   TAN-345 — CC Pulse header polish v2 (CC-only)
   - tighter chip spacing (gap 12px -> 6px between siblings)
   - horizontal edge padding on header so search/sound don't hug card edges
   - sound button 48 -> 64 (icon 22 -> 32)
   - search input slightly larger so it matches the new sound size
   All rules remain scoped under .ff-section--cc; /pulse untouched.
   ============================================================ */
.ff-section--cc .intel-feed-header {
  gap: 6px;
  /* TAN-349: revert TAN-348 overshoot. The .ff-title-dot is hidden in CC
     scope (rule at line ~13638), so the PULSE title text actually starts
     at the .ff-head padding-left of 20px from card edge. Match that with
     padding-left: 20px so search box left edge aligns with the 'P' in
     PULSE. */
  padding: 12px 20px;
  margin-bottom: 0;
}
.ff-section--cc .intel-feed-header .intel-ticker-search {
  height: 36px;
  /* TAN-350: pull the input box 12px to the left so the placeholder text
     ('Search ticker...') aligns with the PULSE title text above. The input
     has padding-left 12px; the negative margin offsets that so its inner
     text starts at the same x as the 'P' in PULSE. */
  padding: 6px 12px;
  margin-left: -12px;
  font-size: 13px;
  margin-right: 4px;
}
.ff-section--cc .intel-feed-header .intel-last-scan {
  /* TAN-349: push Last scan + sound button to the right of the header row,
     leaving search + chip group flush-left. margin-left: auto on the first
     of the right-side elements (.intel-last-scan) consumes free space.
     TAN-374: zero the gap between last-scan and sound button (consume the
     parent's `gap: 12px` with negative right margin) so last-scan sits flush
     against the sound button's left edge. */
  margin-left: auto;
  margin-right: -12px;
}

/* TAN-349: compress the gap above EARLIER TODAY (and other date dividers)
   inside CC — the default 24px top margin doubles with header padding to
   create a visible dead zone. Tighten to 8px so the rows pack closer. */
.ff-section--cc .confluence-time-divider {
  margin-top: 8px;
  margin-bottom: 8px;
}
.ff-section--cc .poll-sound-btn { width: 64px; height: 64px; }
.ff-section--cc .poll-sound-btn svg { width: 32px; height: 32px; }

/* ============================================================
   TAN-353 — CC Pulse confluence row column-align fix v2 (CC-only)
   Earlier TAN-348(D) anchored .rank/.right-col absolutely, but the
   .feed-xl .body > .row1 wrapper still made ticker/price/change/chip
   members of a NESTED flex container with its own gap (which is
   visually distinct from .feed-m where they are direct flex children
   of the row). Result: price/%/chip column on confluence rows ended
   up ~12px left of the same columns on .feed-m/s/n EV rows below.

   Fix: flatten .body and .row1 with display:contents in CC scope so
   their children become direct grid/flex members of .feed-xl — then
   the row's own gap:14px applies between ts → ticker → price →
   change → chip identically to .feed-m. The .rank and .right-col
   stay absolutely anchored from TAN-348(D) so they don't consume
   inline width.

   /pulse byte-identical (no .ff-section--cc wrapper).
   ============================================================ */
.ff-section--cc .pulse-v3-active .feed-xl { position: relative; padding-right: 88px; }
.ff-section--cc .pulse-v3-active .feed-xl .body { display: contents; }
.ff-section--cc .pulse-v3-active .feed-xl .row1 { display: contents; }
.ff-section--cc .pulse-v3-active .feed-xl .rank {
  position: absolute;
  right: 56px;
  top: 50%;
  transform: translateY(-50%);
}
.ff-section--cc .pulse-v3-active .feed-xl .right-col {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
}

/* CC Pulse card body — drop the .intel-feed-wrap's inline overflow
   when the FF body is now the scroller. Selector chain matches the
   .cc-pulse-card emitted by getFullPulseTabHTML (CC only). */
.cc-pulse-card-body { background: var(--bg-alt, transparent); }

/* TAN-456 — CC Pulse toolbar clipping fix (CC-only).
   The .ff-body.cc-pulse-card-body wraps the rendered intel body, but
   carries no horizontal padding of its own, so the interval/tools row
   inside the feed clips against the left card edge. Add symmetric x-padding
   so the toolbar row clears the card edge. Scoped under .ff-section--cc;
   standalone /pulse never emits that wrapper → byte-identical. */
.ff-section--cc .ff-body.cc-pulse-card-body {
  padding-left: 12px;
  padding-right: 12px;
}

/* Suppress duplicate "PULSE" header in CC slot wrappers when the FF
   card is rendered inside. Wrappers (renderHeroLandscape at line ~439
   and renderPulsePtaRow at line ~581) include a <div class="cc-widget-header">
   PULSE</div> for the fallback path; when the FF chrome renders the
   title, hide the wrapper-level header via :has(). Fallback path (no
   .cc-pulse-card descendant) keeps the wrapper header visible. */
.vc-pulse-wrap:has(.cc-pulse-card) > .cc-widget-header,
.vc-pulse-panel:has(.cc-pulse-card) > .cc-widget-header {
  display: none;
}

/* CC slot scrollers — when the FF card is the scroller, the wrapper's
   .intel-feed-wrap should not also try to scroll. Drop its overflow so
   the FF body owns the scroll surface and the chrome stays put. */
.intel-feed-wrap:has(> .cc-pulse-card) {
  overflow: visible;
  display: flex;
  min-height: 0;
}

/* ============================================================
   TAN-262 — CC Pulse Phase 3: Expanded-row + Cloud Intervals shrink

   Phase 1 (TAN-260) shrunk the row body. Phase 2 (TAN-261) wrapped the
   CC Pulse output in FF .ff-section chrome. Phase 3 (this block) tightens
   the *expanded* (.pulse-v3-detail-panel) area + the Cloud Intervals
   pill row when rendered inside CC.

   Scoping rule:
   - All selectors are gated on `.ff-section--cc` as the CC-only ancestor.
     The detail panel is a *sibling* of the row (not a descendant), so the
     existing `.pulse-v3-row--compact` modifier can't reach it; the CC card
     wrapper from TAN-261 is the only safe ancestor scope.
   - Standalone /pulse never emits `.ff-section--cc` → byte-identical.
   - Lightbox renders into `.cloud-chart-modal-body` (separate DOM, not
     under `.ff-section--cc`) → untouched.
   - The Cloud Intervals row (`.cloud-tf-toggle` + `.cloud-tf-pill`) and
     the chart toolbar (`.canon-v3-toolbar-row`) are also only shrunk
     when inside `.ff-section--cc` — global usage outside CC unaffected.
   ============================================================ */

/* Detail panel container — tighten outer padding so the expanded area
   doesn't dwarf the compact rows above it. Pre-CC: 14px 22px 18px. */
.ff-section--cc .pulse-v3-active .pulse-v3-detail-panel {
  padding: 8px 14px 10px;
}

/* Snooze button (panel-top) — smaller hit area + font. */
.ff-section--cc .pulse-v3-active .panel-btn {
  font-size: 10px;
  padding: 3px 8px;
}
.ff-section--cc .pulse-v3-active .pulse-v3-detail-panel .panel-top {
  top: 6px;
  right: 12px;
  gap: 6px;
}

/* Blurb — shrink leading typography one tier. */
.ff-section--cc .pulse-v3-active .pulse-v3-detail-panel .blurb {
  font-size: 11px;
  line-height: 1.4;
  padding-right: 140px; /* keeps clear of the (now smaller) Snooze button */
}

/* Panel events strip (event chips above pill row) — tighten padding. */
.ff-section--cc .pulse-v3-active .pulse-v3-detail-panel .panel-events-strip {
  gap: 4px;
  padding: 0 0 6px;
  padding-right: 140px;
}

/* Filter/parameters block — the .pulse-v3-pill-row (Confluence / Setup /
   Conviction / R-R / Near / Far / RS / Earnings). Drop chip footprint and
   row padding so the row reads as a tight metadata strip rather than the
   block-level feature it is on /pulse. */
.ff-section--cc .pulse-v3-active .pulse-v3-detail-panel .pulse-v3-pill-row {
  gap: 4px;
  padding: 6px 10px;
  margin-bottom: 8px;
}
.ff-section--cc .pulse-v3-active .pulse-v3-detail-panel .pulse-v3-pill-row .grid-pill {
  height: 16px;
  padding: 0 6px;
  font-size: 9px;
}

/* Signals row (Multi-RSI / RSI Div / Fisher / Gap chips) — same density. */
.ff-section--cc .pulse-v3-active .signals-row {
  gap: 10px;
  padding: 6px 10px;
  margin-bottom: 8px;
}

/* Chart toolbar (TF buttons — 1D / 2D / 1W / 2W / 1M / Gaps / Near / Far /
   Log inside the expanded panel). Shrink to match the compact aesthetic. */
.ff-section--cc .pulse-v3-active .pulse-v3-detail-panel .chart-toolbar {
  gap: 10px;
  padding: 6px 8px;
}
.ff-section--cc .pulse-v3-active .pulse-v3-detail-panel .tf-label {
  font-size: 9px;
  margin-right: 4px;
}
.ff-section--cc .pulse-v3-active .pulse-v3-detail-panel .tf-btn {
  font-size: 10px;
  padding: 2px 6px;
}

/* Cloud Intervals row — the `.cloud-tf-toggle` group (`1D 2D 1W 2W 1M`
   pills). Lives in the cloud chart toolbar row inside the expanded
   panel; we tighten both the wrapper toggle and individual pills.
   Scoped strictly under `.ff-section--cc` so global usage and the
   lightbox/modal cloud toolbar are untouched. */
.ff-section--cc .pulse-v3-active .cloud-tf-toggle {
  gap: 1px;
  padding: 1px;
}
.ff-section--cc .pulse-v3-active .cloud-tf-pill {
  padding: 2px 5px;
  font-size: 9px;
}

/* Canon-v3 toolbar row (sits above the cloud chart canvas inside the
   expanded panel — it hosts the cloud TF pills + Near/Far + Log). Pre-CC
   padding: 6px 8px 4px 8px. Shrink to keep the band thin without breaking
   the toolbar's own --narrow / --xnarrow responsive classes. */
.ff-section--cc .pulse-v3-active .canon-v3-toolbar-row {
  padding: 3px 6px;
}
.ff-section--cc .pulse-v3-active .canon-v3-toolbar .tb-pill {
  padding: 2px 5px;
  font-size: 9px;
}
.ff-section--cc .pulse-v3-active .canon-v3-toolbar .tb-label {
  font-size: 8px;
  margin-right: 4px;
}

/* ──────────────────────────────────────────────────────────────────────────
   TAN-265 — CC: PTA multi-zone R/R wrap + Latest Reports time-ago suppression
   ──────────────────────────────────────────────────────────────────────────
   Two CC-only presentation fixes. No JS changes, no zone math touched.

   FIX 1: PTA card R/R clipping when both BUY + SELL zone pills are present
   ─────────────────────────────────────────────────────────────────────────
   On wide CC grid cards (3-col) the absolutely-positioned .alert-v2-pill-stack
   (top:0;right:0) overlaps the inline R/R signal in .alert-v2-signals-row when
   it holds 2+ zone badges (BUY Zone + SELL Zone stacked vertically). The
   existing media-query wrap at css/app.css:2012-2033 only kicks in between
   1025-1440px; CC's 3-col grid lives outside that range. Force the R/R signal
   onto its own row whenever both zone pills are present, in CC scope only.

   Scope: .cc-pta-grid is emitted only by command-center/init.js mount sites
   (lines 589, 615, 821, 836, 859). Never emitted by /pulse standalone or by
   renderPTAGridHTML() itself → /pulse + Latest Reports widget on dashboard
   render byte-identical. Lightbox does not render PTA → untouched.

   FIX 2: time-ago suppression on CC Latest Reports EARNINGS cards only
   ─────────────────────────────────────────────────────────────────────
   The .intel-time-ago label clips the verdict-badge labels (Beat / Strong Beat
   / Miss / etc.) inside the narrow CC reports tile — BUT ONLY ON EARNINGS
   CARDS. Weekly cards (.intel-card--weekly) carry an absolute date like
   "May 17" instead of a relative "6d ago" badge — the date does not clip
   and is useful context, so it stays. Scope the suppression to
   .intel-card--earnings only. /pulse standalone, the dashboard Latest
   Reports widget elsewhere, and the Pulse Earnings Flashes feed (line
   7797) all keep their time-ago labels.
   ────────────────────────────────────────────────────────────────────────── */

/* FIX 1 — PTA: line-break R/R signal when 2+ zone pills present (CC only).
   Mirrors the existing 1025-1440px media-query pattern at css/app.css:2014-2033
   (force R/R onto its own row), but triggered structurally by multi-zone
   presence rather than viewport width. CC-scoped via .cc-pta-grid ancestor. */
/* Multi-zone CC PTA cards: natural wrap only — keep R/R inline with SCORE/CONV when space allows (Coord #29). */
.cc-pta-grid .alert-card:has(.alert-v2-pill-stack .alert-v2-zone-badge + .alert-v2-zone-badge) .alert-v2-signals-row {
  flex-wrap: wrap;
}

/* FIX 2 — Latest Reports: hide "6d ago" / time-ago label inside CC mount,
   EARNINGS CARDS ONLY. Weekly cards keep their absolute "May 17" date —
   which renders cleanly and is useful context (no clipping behind a badge). */
.cc-mount[data-mount="reports-portrait"] .intel-card--earnings .intel-time-ago {
  display: none;
}

/* TAN-471 / TAN-472 — Same suppression on LANDSCAPE mount when viewport is
   narrow. Reports widget in landscape lives inside .vc-reports-wrap inside
   the left-landscape mount (command-center/init.js:933-936).

   Breakpoint history:
     TAN-471 first shipped 1025-1599px. That covered MBA M4 default scaling
     (~1470px) but missed More Space mode (~1680-1710px logical) where the
     overlap still occurred. Verified on Matt's 14" MBA M4 in More Space.

   TAN-472 set ceiling 1799px but Matt's MBA M4 in More Space reports overlap
   still visible — viewport is ≥1800px. TAN-478 widens ceiling to 1919px to
   cover all MBA/MBP scaling modes; ≥1920px is true external-monitor territory
   where there's room for both pill and time-ago label.
     - MBA M4 14" default      ~1470px  hidden
     - MBA M4 14" More Space   1680-1800px+ hidden (TAN-478)
     - MBP 14" default         ~1512px  hidden
     - MBP 14" More Space      ~1800px  hidden (TAN-478)
     - MBP 16" default         ~1728px  hidden
     - MBP 16" More Space      ~1920px  VISIBLE (external-monitor class width)
     - 2K external monitor     >=2048px VISIBLE */
@media (min-width: 1025px) and (max-width: 1919px) {
  .cc-mount[data-mount="left-landscape"] .vc-reports-wrap .intel-card--earnings .intel-time-ago {
    display: none;
  }
}

/* ============ TAN-282 — CC Pulse expanded card body font shrink ============
   Scoped under .ff-section--cc (the wrapper CC's pulse-portrait-full mount
   emits at command-center/init.js:497) so /pulse and /dashboard stay
   byte-identical. Goal: bring the expanded body text (blurb headline, signal
   chip glyphs, snooze button copy, panel-events-strip chips) down ~15-20%
   so it visually aligns with the compact CC rows above it. Chart canvas
   (.chart-stack) is explicitly excluded — its layout depends on absolute
   pixel anchors. */
/* TAN-367: selector order fix — .pulse-v3-active is on <body> (ancestor),
   .ff-section--cc is a descendant. The original order had .ff-section--cc
   first which required .pulse-v3-active to be a DESCENDANT — matched zero
   elements. Swap so the cascade reflects the actual DOM. Per the post-PR
   #1269 plan: re-activate dormant CC-scoped rules one at a time and
   screenshot-verify before stacking the next. */
.pulse-v3-active .ff-section--cc .pulse-v3-detail-panel .blurb {
  font-size: 10px;
  line-height: 1.35;
}
.ff-section--cc .pulse-v3-active .pulse-v3-detail-panel .panel-events-strip .grid-pill,
.ff-section--cc .pulse-v3-active .pulse-v3-detail-panel .panel-events-strip .event-chip {
  font-size: 8px;
  height: 14px;
  padding: 0 5px;
  line-height: 14px;
}
.ff-section--cc .pulse-v3-active .pulse-v3-detail-panel .signals-row .grid-pill {
  font-size: 8px;
  height: 14px;
  padding: 0 5px;
}
.ff-section--cc .pulse-v3-active .panel-btn {
  font-size: 9px;
  padding: 2px 6px;
}
.ff-section--cc .pulse-v3-active .pulse-v3-detail-panel .pulse-v3-pill-row .grid-pill {
  font-size: 8px;
  height: 14px;
  padding: 0 5px;
}

/* ============ TAN-284 — CC section title + chrome parity (9 widgets) + Power Hour badge fix ============
   Goal: every CC card header uses the same visual language as MI / Latest Reports
   (the established benchmark): 10px / 700 / 0.08em / uppercase / text-secondary,
   font-display. Top Movers is the chrome benchmark (.mv4-container border + radius).

   Outliers normalized:
   - .mv4-header-title (CC scope only): 11px / 700 / text-primary, no uppercase
       -> 10px / 700 / 0.08em / uppercase / text-secondary
   - .section-title inside CC mounts: 8.7px / 600 / 0.12em / text-muted
       -> 10px / 700 / 0.08em / text-secondary
   - sr-title (0.1em) and ue-title (0.08em): unified to 0.08em
   - mi-title (0.12em / 600): unified to 0.08em / 700

   Container chrome parity: every section card under a .cc-mount uses
   .surface border + 1px var(--border) + 6px radius (matches .mv4-container).

   Power Hour badge fix: .mi-session-badge can clip on narrow MI widths when
   "POWER HOUR" + padding overflows the .mi-meta flex container next to the
   timestamp. Fix by tightening letter-spacing, locking flex-shrink:0, and
   trimming padding by 1px on each side. Folded in from TAN-285 (Linear hit
   workspace usage_limit_exceeded when filing — bundled here per session log).

   All selectors scoped under #view-c so /pulse, /dashboard, lightbox stay
   byte-identical. */

/* ---- 1. Unified section title ---- */
#view-c .cc-mount .section-title,
#view-c .cc-mount .mv4-header-title,
#view-c .cc-mount .mi-title,
#view-c .cc-mount .ue-title,
#view-c .cc-mount .sr-title,
#view-c .cc-widget-header,
#view-c .cc-mount .intel-title {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  line-height: 1.3;
}

/* ---- 2. Container chrome parity — Top Movers' .mv4-container is the benchmark ---- */
#view-c .cc-mount .mv4-container,
#view-c .cc-mount .upcoming-events,
#view-c .cc-mount .sector-rotation,
#view-c .cc-mount .mi-container,
#view-c .cc-mount .intel-section,
#view-c .cc-mount .cc-pulse-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  overflow: hidden;
}

/* ---- 3. Header row consistency (padding parity) ---- */
#view-c .cc-mount .mv4-header,
#view-c .cc-mount .ue-header,
#view-c .cc-mount .sr-header,
#view-c .cc-mount .mi-header,
#view-c .cc-mount .intel-header {
  padding: 5px 10px;
}

/* ---- 4. Power Hour badge clipping fix (rolled in from TAN-285) ----
   .mi-session-badge could overflow the .mi-meta flex on narrow MI widths
   when label = "POWER HOUR" (10 chars + padding > available row width).
   Tighten letter-spacing, lock flex-shrink, trim padding. */
#view-c .mi-session-badge,
.cc-mount .mi-session-badge {
  letter-spacing: 0.03em;
  padding: 2px 4px;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 7.5px;
}
#view-c .mi-meta,
.cc-mount .mi-meta {
  min-width: 0;
  flex-shrink: 0;
}

/* ============ TAN-288 — CC Pulse expanded card chrome shrink ============
   Goal: bring expanded Pulse card chrome (blurb, chip rows, chart toolbar)
   down further so it visually matches the compact CC rows above. Builds on
   TAN-282 (which set blurb 10px / chips 8px) — this PR is more aggressive
   AND adds the chart toolbar shrink (which TAN-283 mistargeted to FF).

   All selectors scoped under #view-c .ff-section--cc .pulse-v3-active so
   /pulse standalone, /dashboard, and the fullscreen lightbox stay
   byte-identical. Chart canvas (.chart-stack) explicitly excluded — its
   layout depends on absolute pixel anchors. */

/* ---- 1. Blurb headline — 10px -> 9px (more aggressive than TAN-282) ---- */
#view-c .ff-section--cc .pulse-v3-active .pulse-v3-detail-panel .blurb {
  font-size: 9px;
  line-height: 1.3;
}

/* ---- 2. Top chip row (Confluence / Setup / Conviction / R/R / N / F / RS / Earnings) ---- */
#view-c .ff-section--cc .pulse-v3-active .pulse-v3-detail-panel .signals-row.pulse-v3-pill-row .grid-pill,
#view-c .ff-section--cc .pulse-v3-active .pulse-v3-detail-panel .pulse-v3-pill-row .grid-pill {
  font-size: 7px;
  height: 13px;
  padding: 0 4px;
  line-height: 13px;
}

/* ---- 3. Realtime signal chips row (Multi-RSI / RSI Div / FT / Gap) ---- */
#view-c .ff-section--cc .pulse-v3-active .pulse-v3-signal-chips .grid-pill.pulse-chip {
  font-size: 7px;
  height: 13px;
  padding: 0 4px;
  line-height: 13px;
}

/* ---- 4. Panel events strip (legacy chip pattern) ---- */
#view-c .ff-section--cc .pulse-v3-active .pulse-v3-detail-panel .panel-events-strip .grid-pill,
#view-c .ff-section--cc .pulse-v3-active .pulse-v3-detail-panel .panel-events-strip .event-chip {
  font-size: 7px;
  height: 13px;
  padding: 0 4px;
  line-height: 13px;
}

/* ---- 5. Chart toolbar — ~25% shrink (TF pills, CLOUDS label, cloud-tf pills) ----
   This is what TAN-283 intended but mistargeted to .ff-canon-toolbar-row.
   Scope: #view-c (terminal). TAN-640b: dropped the .ff-section--cc .pulse-v3-active
   chain because the full Pulse tab mounts as .cc-pulse-full (no .ff-section--cc)
   and pulse-v3-active sits on <body>, so the old chain never matched. */
#view-c .canon-v3-toolbar-row.canon-v3-toolbar-row-pulse-v3 {
  padding: 2px 5px;
  gap: 3px;
}
#view-c .canon-v3-toolbar-row-pulse-v3 .tb-pill {
  font-size: 7px;
  padding: 1px 4px;
  letter-spacing: 0.02em;
  line-height: 1.2;
}
#view-c .canon-v3-toolbar-row-pulse-v3 .tb-label {
  font-size: 7px;
  margin-right: 3px;
  letter-spacing: 0.04em;
}
#view-c .canon-v3-toolbar-row-pulse-v3 .tb-divider {
  margin: 0 3px;
}
#view-c .canon-v3-toolbar-row-pulse-v3 .cloud-tf-toggle {
  gap: 2px;
}
#view-c .canon-v3-toolbar-row-pulse-v3 .cloud-tf-pill {
  font-size: 7px;
  padding: 1px 4px;
  line-height: 1.2;
}

/* ---- 5b. Width reduction (TAN-640) — toolbar was still overflowing the
   left edge of the CC Pulse section on expand. The SMA50 / SMA200 / Gaps pills
   carry the widest text, so swap them to their short forms (50 / 200 / G) and
   tighten group padding + dividers a further ~25%. Scope is CC Pulse-v3 only,
   so /pulse standalone (never wrapped in #view-c) is byte-identical.
   TAN-1047 (2026-07-10): label short-swap REMOVED — it truncated buttons
   (Sig / 50 / 200 / G) in the full-width CC pulse feed expanded charts,
   not just the narrow sidebar. The sidebar already gets short labels via
   the _sidebarShort JS path (hardcoded 'Sig'/'50'/'TL'), so it does not
   rely on this CSS swap. Keep the group/divider tightening below for
   overflow safety; full labels now show everywhere except the sidebar. */
#view-c .canon-v3-toolbar-row-pulse-v3 .tb-group {
  padding: 0 2px;
  gap: 2px;
}
#view-c .canon-v3-toolbar-row-pulse-v3 .tb-divider {
  margin: 0 2px;
}

/* ============ TAN-289 — CC title + chrome parity follow-ups (TAN-284 misses) ============
   User-reported on TAN-284 screenshot review:
   - .newsfeed-title still bold white (missing from unified rule)
   - PULSE title had &#9670; diamond glyph baked into literal (stray "circle")
     -> stripped from js/app.js:8365 in this PR; CSS adds .dp-title to rule
   - Float Field title-dot stray dot in CC scope
   - Latest Reports + Price Target Alerts had no container chrome because
     they use .section-header (not .intel-section / .mv4-container)

   All selectors scoped under #view-c .cc-mount so /pulse, /dashboard,
   /heatmaps, and lightbox stay byte-identical. */

/* ---- 1. Add missed titles to unified CC section-title rule ---- */
#view-c .cc-mount .newsfeed-title,
#view-c .cc-mount .dp-title,
#view-c .cc-mount .dp-count,
#view-c .newsfeed-title {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  line-height: 1.3;
}
#view-c .cc-mount .dp-count {
  /* count badge is secondary info — keep slightly fainter */
  color: var(--text-faint);
}

/* ---- 2. Hide stray live-data dot on Float Field title in CC scope ----
   The .ff-title-dot is a live indicator on /pulse standalone, but in CC
   it reads as inconsistent decoration next to the unified title row. */
#view-c .cc-mount .ff-title-dot,
#view-c .ff-section--cc .ff-title-dot {
  display: none;
}

/* ---- 3. Container chrome for Latest Reports + Price Target Alerts ----
   Both use .section-header wrappers (not .intel-section). TAN-284's chrome
   rule never applied. Wrap the section-header + its sibling content row
   visually by styling the .section-header rows themselves and the grid
   that follows. Border + radius + background match Top Movers' .mv4-container. */

/* Header band */
#view-c .cc-mount .section-header {
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  background: var(--surface);
  padding: 5px 10px; /* TAN-338: match .mv4/.ue/.sr/.mi/.intel-header compact benchmark */
  margin-top: 5px; /* TAN-490: was 16px — dead space below MI / News Feed before next section
                      header (LATEST REPORTS, PRICE TARGET ALERTS). 5px matches the
                      .vc-left/.vc-right column gap so spacing is visually uniform. */
  margin-bottom: 0;
}
/* Force unified title style inside section-header too */
#view-c .cc-mount .section-header .section-title {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  line-height: 1.3;
}
/* Content body that immediately follows a section-header */
#view-c .cc-mount .section-header + #pta-grid,
#view-c .cc-mount .section-header + .ltr-row,
#view-c .cc-mount .section-header + .dash-split {
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 6px 6px;
  background: var(--surface);
  padding: 4px 12px 8px; /* TAN-338: tighten top padding under section-header (was 10px 12px) */
}
/* TAN-485: Latest Reports bifurcation fix.
   When a second .ltr-row follows the first, the first row was rendering with
   border-radius:0 0 6px 6px AND base margin-bottom:10px — producing a visible
   gap between two separately-bordered boxes (the "bifurcation" Matt reported).
   Strip the bottom radius + bottom border + margin from the FIRST ltr-row
   when it has an .ltr-row sibling after it, so the two rows visually merge
   into one continuous chrome'd container. */
#view-c .cc-mount .section-header + .ltr-row:has(+ .ltr-row) {
  border-bottom: none;
  border-radius: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
/* Multi-row Latest Reports: subsequent .ltr-row keeps the side borders */
#view-c .cc-mount .section-header + .ltr-row + .ltr-row {
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 6px 6px;
  background: var(--surface);
  padding: 10px 12px 10px; /* TAN-485: top padding so the merged row breathes */
  margin-top: 0;
}

/* ---- 4. Tone down dashboard-pulse-header spacing in CC scope ---- */
#view-c .cc-mount .dashboard-pulse-header {
  padding: 4px 12px 4px;
}

/* ============ TAN-292 — CC MI history "Earlier today" dropdown shrink + clip fix ============
   User-reported on TAN-287 follow-up:
   1. The "Earlier today" button in CC reads way too large vs the unified
      10px CC title bar. Base .mi-history-btn is 11px / 24px high — feels
      huge next to the 10px MI title and 7.5px session badge.
   2. The dropdown popover (.mi-history-popover) clips outside the MI card
      in CC landscape because the popover is moved into #mi-history-lg via
      command-center/init.js mirroring, but only the canonical #mi-history
      gets its parent .mi-section[:has(...)] overflow:visible. The -lg copy
      lives under #market-intelligence-lg which stays overflow:hidden.

   All selectors scoped #view-c .cc-mount / #market-intelligence-lg so
   /dashboard, /pulse, /heatmaps stay byte-identical. */

/* ---- 1. Shrink the trigger button to match CC's smaller chrome ---- */
/* TAN-389: drop height 18→14 + tighten padding/font to bottom-align with the
   adjacent .mi-session-badge (which is ~11.5px effective via 7.5px font +
   2px block padding). Parent .mi-meta uses align-items:center, so when the
   button is taller than the badge it hangs below by half the diff — visible
   ~3.25px gap at the baseline. Tightening to 14px closes the visible gap. */
#view-c .cc-mount .mi-history-btn {
  height: 14px;
  padding: 0 4px 0 6px;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.03em;
  gap: 3px;
  border-radius: 3px;
  /* TAN-392: even with height shrunk to 14px the button still sits ~2px low
     vs the OVERNIGHT badge's visual bottom on the .mi-meta row. The badge's
     uppercase glyphs ride high in their padded box, so flex align-items:
     center leaves the button hanging. Lift the button up to match. */
  transform: translateY(-2px);
}
#view-c .cc-mount .mi-history-btn .chev {
  width: 7px;
  height: 7px;
}
#view-c .cc-mount .mi-history-count {
  font-size: 8px;
  padding: 0 4px;
  border-radius: 2px;
  margin-left: 0;
}

/* ---- 2. Stop popover clipping in CC landscape ----
   The -lg copy of .mi-section keeps overflow:hidden when the canonical
   (hidden) .mi-history-btn is open — the :has() base rule can't reach it.
   Force overflow:visible on the CC MI section whenever the popover is in
   open state (either via aria-expanded or via presence of the popover
   element inside the -lg wrap). */
#view-c #market-intelligence-lg,
#view-c .cc-mount #market-intelligence,
#view-c .cc-mount .mi-section {
  /* Allow popover to escape the card edge for the entire CC MI section.
     The MI card uses padding/border for chrome, not overflow:hidden, so
     this doesn't break the rounded corners (the inner .mi-body/.mi-footer
     don't have content that needs clipping). */
  overflow: visible;
}

/* ---- 3. Re-anchor popover to the -lg button so it sits inside the card ----
   Default popover is anchored to .mi-history (right:0, top:100%+6px). When
   command-center/init.js moves the popover into #mi-history-lg, that anchor
   is correct, but the popover's min-width:280px / max-width:340px can still
   push beyond the card right edge in landscape. Cap width to fit the card. */
#view-c #mi-history-lg .mi-history-popover,
#view-c .cc-mount .mi-history-popover {
  top: calc(100% + 4px);
  right: 0;
  /* Smaller min-width so the popover doesn't force horizontal overflow in
     narrow landscape MI cards. Tightened max-width too. */
  min-width: 220px;
  max-width: 280px;
  font-size: 11px;
}
#view-c .cc-mount .mi-history-pop-header,
#view-c #mi-history-lg .mi-history-pop-header {
  padding: 7px 10px 6px;
  font-size: 9px;
}
#view-c .cc-mount .mi-history-item,
#view-c #mi-history-lg .mi-history-item {
  padding: 6px 8px;
  gap: 8px;
}
#view-c .cc-mount .mi-history-session,
#view-c #mi-history-lg .mi-history-session {
  font-size: 11px;
}
#view-c .cc-mount .mi-history-time,
#view-c #mi-history-lg .mi-history-time {
  font-size: 9px;
}
#view-c .cc-mount .mi-history-active-tag,
#view-c #mi-history-lg .mi-history-active-tag {
  font-size: 8px;
  padding: 1px 5px;
}
#view-c .cc-mount .mi-history-pop-footer,
#view-c #mi-history-lg .mi-history-pop-footer {
  padding: 6px 10px;
  font-size: 9px;
}

/* ============ TAN-293 — CC title tighten + MI clipping fix + cache bust ============
   User-reported after TAN-289 landed:
   1. CC section titles still feel a touch too large — drop unified 10px ->
      9px and tighten letter-spacing so they read as labels, not headers.
   2. MI title clipping: "MARKET INTELLIGENCE" wraps onto 2 lines and
      overlaps the meta row (timestamp + session badge + Earlier today
      dropdown). Cause: TAN-284 shrunk .mi-header padding to 5px 10px,
      flex layout doesn't have room for the title to stay on one line.
      Fix: force .mi-title to nowrap with a hard cap on max-width that
      lets it truncate via ellipsis if absolutely needed (but at 9px it
      fits comfortably).

   Cache bust: index.html + command-center/index.html ?v=tan176 -> tan292
   so existing PWA users get fresh CSS/JS instead of stale tan176 cache. */

/* ---- 1. Tighten the unified CC section title to 9px ---- */
#view-c .cc-mount .section-title,
#view-c .cc-mount .mv4-header-title,
#view-c .cc-mount .mi-title,
#view-c .cc-mount .ue-title,
#view-c .cc-mount .sr-title,
#view-c .cc-widget-header,
#view-c .cc-mount .intel-title,
#view-c .cc-mount .newsfeed-title,
#view-c .cc-mount .dp-title,
#view-c .cc-mount .section-header .section-title,
#view-c .newsfeed-title {
  font-size: 9px;
  letter-spacing: 0.06em;
  line-height: 1.25;
}
#view-c .cc-mount .dp-count {
  font-size: 9px;
  line-height: 1.25;
}

/* ---- 2. MI title clip fix ----
   .mi-header is flex; .mi-title-row holds .mi-pulse + .mi-title; .mi-meta
   holds timestamp + badge + Earlier today. On narrow CC widths the title
   wraps. Force single-line nowrap; let meta shrink instead. */
#view-c .cc-mount .mi-title-row {
  flex-shrink: 1;
  min-width: 0;
}
#view-c .cc-mount .mi-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
#view-c .cc-mount .mi-header {
  /* Ensure the title row + meta row sit side-by-side with proper gap; if
     anything must wrap it's the meta row dropping below the title, not
     the title splitting across lines. */
  flex-wrap: wrap;
  row-gap: 4px;
  align-items: center;
}

/* ---- 3. Same tightening for the -lg landscape MI copy ---- */
#view-c #market-intelligence-lg .mi-title {
  font-size: 9px;
  letter-spacing: 0.06em;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
#view-c #market-intelligence-lg .mi-title-row {
  flex-shrink: 1;
  min-width: 0;
}

/* ============ TAN-294 — CC wasted-space cleanup ============
   User-reported after TAN-289/293 landed:
   1. Latest Reports has a visible vertical gap above the chrome'd
      section-header. Source: TAN-289 added `margin-top: 16px` to
      `#view-c .cc-mount .section-header` to visually detach the wrap
      from preceding content. With `.vc-left { gap: 5px }` already
      providing column separation, this extra 16px is wasted space.
   2. MI / FF / News Feed don't grow downward to touch the next card.
      The 16px above Latest Reports steals the space MI's `flex: 1`
      would otherwise consume \u2014 removing it lets the flex container
      naturally fill the column.

   Surgical: zero out the chrome margin-top. Chrome (border + radius)
   stays intact; only the extra leading whitespace goes. */
#view-c .cc-mount .section-header {
  margin-top: 0;
}

/* ============ TAN-270 — CC FF-title unification (audit closure) ============
   Coordinator audit 2026-05-21 PT against main HEAD 72d346a showed 7 of 9
   CC sections from TAN-270's acceptance criteria already unified via
   TAN-284 (10px/0.08em), TAN-289 (newsfeed + dp-title + PTA/Latest Reports
   chrome), and TAN-293 (final tighten to 9px/0.06em).

   Remaining gap: `.ff-title` is not in any unified rule. Two surfaces miss:
   - Float Field title ("FLOAT FIELD" from js/floatfield.js:1666)
   - CC portrait Pulse card title ("PULSE" from command-center/init.js:581)
   Both render at base 11px / 0.14em instead of unified 9px / 0.06em.

   (CC landscape Pulse uses .cc-widget-header which is already unified.)

   Scoped strictly under `#view-c .cc-mount` so /pulse, /float-field
   standalone routes stay byte-identical. Values match TAN-293's final
   tightened spec. */
#view-c .cc-mount .ff-title {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  line-height: 1.25;
}

/* ================================================================
   ONBOARDING TOUR (TAN-740) — first-run DOM-anchored SPOTLIGHT
   A dimmed full-viewport backdrop with a transparent SVG-mask cutout
   punched around a real live element, plus a callout tooltip anchored
   beside the cutout. Backdrop svg z-index 10002; tooltip 10003 — both
   sit above the highest existing layer (chart lightbox 10001).
   No emojis; no colored top accent rails (uniform 1px border per rule 20).
   ================================================================ */
body.ob-tour-lock { overflow: hidden; }

.ob-spotlight-root { position: fixed; inset: 0; z-index: 10002; display: none; }
.ob-spotlight-root.ob-active { display: block; }

/* dimmed backdrop with the punched cutout */
.ob-spot-svg {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  pointer-events: none;
}
.ob-spot-dim {
  fill: rgba(7,10,15,0.74);
  pointer-events: none;
  transition: opacity .2s var(--ease);
}

/* full-screen click swallower — NO-OP on click (tour never dismisses on
   backdrop click); sits above the dim svg, below ring/cursor/hit/tooltip */
.ob-spot-block {
  position: fixed; inset: 0; z-index: 1;
  pointer-events: auto; cursor: default; background: transparent;
}

/* transparent forwarding hit-region for ACTION steps — captures the click
   over the live target and forwards it (above the backdrop block) */
.ob-spot-hit {
  position: fixed; z-index: 10003; display: none;
  pointer-events: auto; cursor: pointer; background: transparent;
  border-radius: 10px;
}

.ob-spotlight-root:not(.ob-no-motion) .ob-spot-svg { animation: ob-spot-fade .22s var(--ease); }
@keyframes ob-spot-fade { from { opacity: 0; } to { opacity: 1; } }

/* callout mode: target ~= whole viewport — flat dim, no cutout, floating
   tooltip (see js/onboarding.js paint() isCallout branch) */
.ob-spotlight-root.ob-callout .ob-spot-dim { fill: rgba(0,0,0,0.55); }

/* same-route step move (e.g. step 3 → 4): tween the cutout + tooltip instead
   of teleporting. geometry-/position-based, ~180ms ease-out. */
.ob-spotlight-root.ob-animating .ob-mask-hole {
  transition: x .18s ease-out, y .18s ease-out, width .18s ease-out, height .18s ease-out;
}
/* Cross-step tooltip transition: fade-out → reposition (instant) →
   fade-in. Avoids long diagonal slides between distant targets which
   read as glitchy. Applied via the .ob-fade-out helper class. */
.ob-spotlight-root.ob-animating .ob-spot-tooltip {
  transition: opacity .14s ease-out;
}
.ob-spotlight-root.ob-animating .ob-spot-tooltip.ob-fade-out {
  opacity: 0;
}

/* highlight ring tracing an ACTION cutout: static 2px Tangency-blue border +
   subtle outer glow (no pulse — replaced by the click-ripple below) */
.ob-spot-ring {
  position: fixed; pointer-events: none; border-radius: 10px;
  box-shadow: 0 0 0 2px #2D7FF9, 0 0 0 6px rgba(45,127,249,0.22);
  transition: all .25s var(--ease);
}
.ob-spotlight-root.ob-no-motion .ob-spot-ring { transition: none; }

/* white click-ripple on ACTION targets — a SINGLE ring with a discrete
   tap-rest-tap cadence (~3s loop). The ring expands + fades over the first
   ~1.2s (0-40% of the cycle) then holds invisible for ~1.8s of dead time, so
   it reads as TAP → expand/fade → rest → TAP rather than a pulsing blob.
   pointer-events:none so the real click passes through to the forwarding
   hit-region; z-index sits above the dim/cutout, below tooltip + hit (10003). */
.ob-ripple { position: fixed; z-index: 2; width: 0; height: 0; pointer-events: none; }
.ob-ripple-ring {
  position: absolute; left: 0; top: 0; margin: -6px 0 0 -6px;
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.6); background: transparent;
  opacity: 0; transform: scale(1);
}
.ob-spotlight-root:not(.ob-no-motion) .ob-ripple-ring {
  animation: ob-ripple-tap 3.5s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
/* Water-ripple tap: 4 concentric rings on one 3.5s loop, staggered 150ms
   apart via nth-child delays. Each ring expands 12px→~156px (scale 13) while
   fading out over the first 57% (≈2s) of the loop, then holds invisible for
   the ~1.1s rest phase. Last ring starts at 450ms, so the tap stays visible
   ≈2.45s before the quiet gap. */
.ob-spotlight-root:not(.ob-no-motion) .ob-ripple-ring:nth-child(2) { animation-delay: .15s; }
.ob-spotlight-root:not(.ob-no-motion) .ob-ripple-ring:nth-child(3) { animation-delay: .3s; }
.ob-spotlight-root:not(.ob-no-motion) .ob-ripple-ring:nth-child(4) { animation-delay: .45s; }
@keyframes ob-ripple-tap {
  0%   { transform: scale(0.08); border-color: rgba(255,255,255,0.6); opacity: .6; }
  57%  { transform: scale(13);   border-color: rgba(255,255,255,0);   opacity: 0; }
  100% { transform: scale(13);   border-color: rgba(255,255,255,0);   opacity: 0; }
}
/* reduced-motion: a single static ring still marks the target */
.ob-spotlight-root.ob-no-motion .ob-ripple-ring {
  opacity: .4; transform: scale(3); border-color: rgba(255,255,255,0.45);
}

/* persistent post-tour Terminal pill pulse — gentler/slower than the
   action ring (~3s loop, low-opacity glow). Survives reloads until first
   click of the pill (see js/onboarding.js applyTerminalNudge). */
.topbar-cc-link.ob-terminal-pulse {
  animation: ob-terminal-pulse 3s var(--ease) infinite;
}
@keyframes ob-terminal-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59,130,246,0.0); }
  50%      { box-shadow: 0 0 0 4px rgba(59,130,246,0.22); }
}
@media (prefers-reduced-motion: reduce) {
  .topbar-cc-link.ob-terminal-pulse { animation: none !important; }
}

/* ── TAN-889 Terminal-tour backdrop modes (opt-in per step) ──────────────
   light-dim: a light (~28%) full-screen scrim, NO cutout — the anchor is
   marked only by the blue ring + tooltip. The .ob-spot-block still swallows
   backdrop clicks (tour never dismisses on backdrop).
   transparent: no scrim at all so the live UI shows through AND stays
   interactive (the click-swallower is disabled) — used by the live-demo
   steps (PTA hit / Pulse fire / FF pulse) so the animations play in place. */
.ob-spotlight-root.ob-light-dim .ob-spot-dim { fill: rgba(7,10,15,0.28); }
.ob-spotlight-root.ob-transparent .ob-spot-dim { fill: transparent; }
.ob-spotlight-root.ob-transparent .ob-spot-block { pointer-events: none; }
/* focused-dim: a deeper (~40%) scrim with a REAL mask cutout at the anchor —
   the anchor stays bright + interactive (scrim is click-through) so the live
   demo animates in place while the rest of the Terminal recedes. */
.ob-spotlight-root.ob-focused-dim .ob-spot-dim { fill: rgba(7,10,15,0.40); }
.ob-spotlight-root.ob-focused-dim .ob-spot-block { pointer-events: none; }

/* extra slot under the body (e.g. the steps 3/4 "Replay demo" link) */
.ob-spot-extra:empty { display: none; }
.ob-spot-extra { margin: -6px 0 12px; }
.tour-replay-demo {
  display: inline-block; font-family: var(--font-body); font-size: 12px;
  font-weight: 600; color: var(--blue); text-decoration: none; cursor: pointer;
  padding: 2px 0; border-bottom: 1px dashed rgba(45,127,249,0.5);
}
.tour-replay-demo:hover { color: var(--blue-hover); border-bottom-color: var(--blue-hover); }
.tour-replay-demo:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* header Replay-Tour pill — reuses .ws-status typography (see markup), but
   is a real button: interactive cursor + hover brighten + sized glyph. */
.terminal-tour-replay {
  background: none; border: 0; padding: 2px 4px; cursor: pointer;
  border-radius: 6px; color: var(--text-muted);
  transition: color .15s ease, background .15s ease;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase;
}
.terminal-tour-replay svg { width: 12px; height: 12px; display: block; flex-shrink: 0; }
.terminal-tour-replay:hover { color: var(--text-primary); background: rgba(255,255,255,0.05); }
.terminal-tour-replay:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Tour live demos (Rankings heatmap/grid + Pulse rails/chips) — same energy
   as KPI Sankey node-focus: hard isolate + glow pulse so the step isn't dead. */
@keyframes tt-demo-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(96,165,250,0.0), 0 0 0 1px rgba(96,165,250,0.35); }
  45% { box-shadow: 0 0 0 6px rgba(96,165,250,0.18), 0 0 18px 2px rgba(96,165,250,0.45); }
}
@keyframes tt-demo-row-flash {
  0%, 100% { filter: brightness(1); outline-color: transparent; }
  40% { filter: brightness(1.18); outline-color: rgba(96,165,250,0.85); }
}
.tt-demo-lit {
  position: relative;
  z-index: 2;
  outline: 2px solid rgba(96,165,250,0.9);
  outline-offset: 1px;
  border-radius: 6px;
  animation: tt-demo-ring 1.35s ease-in-out infinite;
}
#rankings-table tbody tr.tt-demo-lit td {
  filter: brightness(1.12);
}
#rankings-table.heatmap-mode tbody tr.tt-demo-lit td {
  filter: brightness(1.2) saturate(1.15);
}
.grid-tile.tt-demo-lit {
  border-color: rgba(96,165,250,0.75) !important;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 0 0 1px rgba(96,165,250,0.4);
  animation: tt-demo-ring 1.35s ease-in-out infinite;
}
.tr-tile.tt-demo-lit {
  border-radius: 8px;
  outline: 2px solid rgba(167,139,250,0.9);
  animation: tt-demo-ring 1.2s ease-in-out infinite;
  filter: brightness(1.15);
}
.pulse-v3-detail-panel .grid-pill.tt-demo-lit,
.pulse-v3-row.expanded .grid-pill.tt-demo-lit,
.pulse-v3-signal-chips .grid-pill.tt-demo-lit {
  outline: 2px solid rgba(52,211,153,0.85);
  outline-offset: 1px;
  filter: brightness(1.2);
  animation: tt-demo-ring 1.1s ease-in-out infinite;
}

/* TAN-1077: main-app per-tab Replay pill (same chrome as Terminal) */
.tab-tour-replay[hidden] { display: none !important; }
.tab-tour-replay .tab-tour-replay-label { display: inline; }
@media (max-width: 720px) {
  .tab-tour-replay .tab-tour-replay-label { display: none; }
}

/* TAN-1077: tab-tour hero glyph panel (reuses .tt-intro-* card layout) */
.tab-tour-intro-card .tab-tour-hero-frame {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 220px;
  border-radius: 16px;
  background:
    radial-gradient(ellipse 80% 70% at 70% 60%, rgba(45,127,249,0.28) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 30% 30%, rgba(167,139,250,0.18) 0%, transparent 50%),
    linear-gradient(160deg, #121826 0%, #0a0d14 100%);
  border: 1px solid rgba(255,255,255,0.07);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden;
}
.tab-tour-intro-card .tab-tour-hero-glyph {
  font-family: var(--font-display);
  font-size: 72px; font-weight: 700; line-height: 1;
  background: linear-gradient(135deg, #93c5fd 0%, #a78bfa 55%, #c4b5fd 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 28px rgba(45,127,249,0.35));
}
.tab-tour-intro-card .tab-tour-hero-sub {
  margin-top: 10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(255,255,255,0.45);
}
@media (max-width: 720px) {
  .tab-tour-intro-card.tt-intro-card {
    grid-template-columns: 1fr;
    padding: 28px 22px;
  }
  .tab-tour-intro-card .tt-intro-hero { display: none; }
}

/* callout tooltip */
.ob-spot-tooltip {
  position: fixed; z-index: 10003; width: 320px; max-width: calc(100vw - 24px);
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.5);
  padding: 16px 18px 14px;
  font-family: var(--font-body);
}
.ob-spotlight-root:not(.ob-no-motion) .ob-spot-tooltip { animation: ob-spot-pop .26s var(--ease); }
@keyframes ob-spot-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.ob-spot-counter {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px;
}
.ob-spot-title {
  font-family: var(--font-display); font-size: 18px; font-weight: 700;
  line-height: 1.25; margin: 0 0 7px; color: var(--text-primary);
}
.ob-spot-body { font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); margin: 0 0 14px; }

.ob-spot-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ob-spot-nav { display: flex; gap: 8px; }
.ob-spot-skip {
  background: none; border: none; color: var(--text-faint); font-size: 12px;
  cursor: pointer; padding: 6px 4px; border-radius: 6px;
  font-family: var(--font-body); transition: color .15s;
}
.ob-spot-skip:hover { color: var(--text-secondary); }
.ob-spot-back, .ob-spot-next {
  font-family: var(--font-body); font-size: 13px; font-weight: 600; border-radius: 8px;
  padding: 8px 16px; cursor: pointer; transition: all .15s var(--ease); border: 1px solid var(--border);
}
.ob-spot-back { background: transparent; color: var(--text-secondary); }
.ob-spot-back:hover { color: var(--text-primary); border-color: var(--text-faint); }
.ob-spot-next { background: var(--blue); color: #fff; border-color: var(--blue); }
.ob-spot-next:hover { background: var(--blue-hover); }
.ob-spot-back:focus-visible, .ob-spot-next:focus-visible, .ob-spot-skip:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 2px;
}

/* arrow nub — colored by placement edge */
.ob-spot-arrow { position: absolute; width: 0; height: 0; }
.ob-spot-arrow.ob-arrow-bottom {
  top: -8px; border-left: 8px solid transparent; border-right: 8px solid transparent;
  border-bottom: 8px solid var(--border);
}
.ob-spot-arrow.ob-arrow-top {
  bottom: -8px; border-left: 8px solid transparent; border-right: 8px solid transparent;
  border-top: 8px solid var(--border);
}
.ob-spot-arrow.ob-arrow-right {
  left: -8px; border-top: 8px solid transparent; border-bottom: 8px solid transparent;
  border-right: 8px solid var(--border);
}
.ob-spot-arrow.ob-arrow-left {
  right: -8px; border-top: 8px solid transparent; border-bottom: 8px solid transparent;
  border-left: 8px solid var(--border);
}

/* mobile: tooltip becomes a bottom sheet */
.ob-spot-tooltip.ob-sheet {
  left: 12px; right: 12px; bottom: 14px; top: auto; width: auto; max-width: none;
  transform: none; border-radius: 14px;
}
.ob-spot-tooltip.ob-sheet .ob-spot-arrow { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ob-spot-svg, .ob-spot-tooltip, .ob-spot-ring, .ob-ripple-ring,
  .ob-mask-hole, .ob-intro-backdrop, .ob-intro-card { animation: none !important; transition: none !important; }
}

/* ── Intro modal ("step 0") — centered welcome card shown before the
      spotlight tour. Backdrop + ESC are NO-OPs; only Skip/Begin act. ── */
.ob-intro-root {
  position: fixed; inset: 0; z-index: 10010;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.ob-intro-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  -webkit-backdrop-filter: blur(6px) saturate(115%);
  backdrop-filter: blur(6px) saturate(115%);
}
.ob-intro-root:not(.ob-no-motion) .ob-intro-backdrop { animation: ob-intro-fade .25s ease-out both; }
@keyframes ob-intro-fade { from { opacity: 0; } to { opacity: 1; } }

.ob-intro-card {
  position: relative; z-index: 1;
  width: 520px; max-width: calc(100vw - 32px);
  background: #0f1115; border: 1px solid rgba(255,255,255,0.08); border-radius: 16px;
  padding: 32px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 60px -10px rgba(45,127,249,0.18);
  font-family: var(--font-body);
}
.ob-intro-root:not(.ob-no-motion) .ob-intro-card { animation: ob-intro-pop .32s cubic-bezier(0.22,1,0.36,1) both; }
@keyframes ob-intro-pop { from { transform: translateY(8px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }

.ob-intro-eyebrow {
  display: inline-block; font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: #60a5fa; font-weight: 600;
}
.ob-intro-title {
  font-family: var(--font-display); font-size: 28px; font-weight: 600;
  line-height: 1.2; letter-spacing: -0.015em; margin: 14px 0 10px; color: #fff;
}
.ob-intro-tg {
  background: linear-gradient(90deg, #93c5fd 0%, #a78bfa 60%, #c4b5fd 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ob-intro-lead {
  font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.7); margin: 0 0 22px;
}
.ob-intro-meta {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: rgba(255,255,255,0.5); margin-bottom: 22px;
}
.ob-intro-pips { display: inline-flex; gap: 5px; align-items: center; }
.ob-intro-pip { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.15); }
.ob-intro-pip.on { width: 6px; height: 6px; background: #2D7FF9; box-shadow: 0 0 0 3px rgba(45,127,249,0.18); }

.ob-intro-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.ob-intro-skip {
  appearance: none; cursor: pointer; font: inherit;
  background: transparent; color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.16); border-radius: 10px; padding: 10px 16px;
  transition: color .15s, border-color .15s;
}
.ob-intro-skip:hover { color: #fff; border-color: rgba(255,255,255,0.28); }
.ob-intro-begin {
  appearance: none; cursor: pointer; font: inherit; font-weight: 600;
  background: #2D7FF9; color: #fff; border: 1px solid #2D7FF9; border-radius: 10px;
  padding: 10px 18px; box-shadow: 0 6px 18px -4px rgba(45,127,249,0.55);
  transition: filter .15s, transform .06s ease;
}
.ob-intro-begin:hover { filter: brightness(1.06); }
.ob-intro-begin:active { transform: translateY(1px); }
.ob-intro-arrow { margin-left: 6px; display: inline-block; transition: transform .18s ease; }
.ob-intro-begin:hover .ob-intro-arrow { transform: translateX(2px); }
.ob-intro-skip:focus-visible, .ob-intro-begin:focus-visible { outline: 2px solid #2D7FF9; outline-offset: 2px; }

.ob-intro-foot { margin-top: 18px; text-align: center; font-size: 12px; color: rgba(255,255,255,0.5); }

/* scroll-lock the page while the intro modal is open */
body.ob-intro-open { overflow: hidden; }

@media (max-width: 640px) { .ob-intro-card { padding: 24px; } }

/* ── TAN-889 Terminal Tour hero intro — full-screen welcome shown before the
      Terminal spotlight walkthrough. Own .tt-intro-* namespace (won't collide
      with the main-app .ob-intro-* card). Two-column card w/ animated hero. ── */
.tt-intro-root {
  position: fixed; inset: 0; z-index: 10010;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.tt-intro-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.78);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
}
.tt-intro-root:not(.tt-no-motion) .tt-intro-backdrop { animation: tt-intro-fade .3s ease-out both; }
@keyframes tt-intro-fade { from { opacity: 0; } to { opacity: 1; } }

.tt-intro-card {
  position: relative; z-index: 1;
  width: 880px; max-width: calc(100vw - 40px);
  background: linear-gradient(180deg, #10141c 0%, #0b0e14 100%);
  border: 1px solid rgba(255,255,255,0.09); border-radius: 20px;
  padding: 44px 48px;
  box-shadow: 0 40px 100px rgba(0,0,0,0.6), 0 0 80px -20px rgba(45,127,249,0.22);
  display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: center;
  font-family: var(--font-body);
}
.tt-intro-root:not(.tt-no-motion) .tt-intro-card { animation: tt-intro-pop .38s cubic-bezier(0.22,1,0.36,1) both; }
@keyframes tt-intro-pop { from { transform: translateY(8px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }

.tt-intro-main { min-width: 0; text-align: left; }

.tt-intro-eyebrow {
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: #60a5fa; font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
}
.tt-intro-eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #2D7FF9; box-shadow: 0 0 0 3px rgba(45,127,249,0.18);
  animation: tt-intro-dot 2s ease-in-out infinite;
}
@keyframes tt-intro-dot { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

.tt-intro-title {
  font-family: var(--font-display); font-size: 40px; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.08; margin: 16px 0 14px; color: #fff;
}
.tt-intro-tg {
  background: linear-gradient(90deg, #93c5fd 0%, #a78bfa 60%, #c4b5fd 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tt-intro-lead {
  font-size: 16px; line-height: 1.6; color: rgba(255,255,255,0.72);
  margin: 0 0 26px; max-width: 480px;
}
.tt-intro-meta {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: rgba(255,255,255,0.5); margin-bottom: 22px;
}
.tt-intro-pips { display: inline-flex; gap: 5px; align-items: center; }
.tt-intro-pip { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.15); }
.tt-intro-pip.on { width: 6px; height: 6px; background: #2D7FF9; box-shadow: 0 0 0 3px rgba(45,127,249,0.18); }

.tt-intro-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.tt-intro-skip {
  appearance: none; cursor: pointer; font: inherit;
  background: transparent; color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.16); border-radius: 10px; padding: 10px 16px;
  transition: color .15s, border-color .15s;
}
.tt-intro-skip:hover { color: #fff; border-color: rgba(255,255,255,0.28); }
.tt-intro-begin {
  appearance: none; cursor: pointer; font: inherit; font-weight: 600;
  background: #2D7FF9; color: #fff; border: 1px solid #2D7FF9; border-radius: 10px;
  padding: 10px 18px; box-shadow: 0 6px 18px -4px rgba(45,127,249,0.55);
  transition: filter .15s, transform .06s ease;
}
.tt-intro-begin:hover { filter: brightness(1.06); }
.tt-intro-begin:active { transform: translateY(1px); }
.tt-intro-arrow { margin-left: 6px; display: inline-block; transition: transform .18s ease; }
.tt-intro-begin:hover .tt-intro-arrow { transform: translateX(2px); }
.tt-intro-skip:focus-visible, .tt-intro-begin:focus-visible { outline: 2px solid #2D7FF9; outline-offset: 2px; }

.tt-intro-foot { margin-top: 22px; font-size: 12px; color: rgba(255,255,255,0.5); text-align: left; }

.tt-intro-hero { width: 100%; height: 320px; }
.tt-intro-hero-frame {
  /* No background: the streak canvas blends into the card (pure/no panel). */
  width: 100%; height: 100%;
  overflow: hidden;
  position: relative;
}
.tt-intro-hero-canvas {
  width: 100%; height: 100%; display: block;
  /* Soft-feather every edge so the streaks emerge from the modal's dark
     interior instead of a hard rectangular box. Fully opaque in the middle
     with a smooth fade in the outer ~14% band on each side. */
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right,  transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-composite: intersect;
}

/* scroll-lock the page while the hero intro is open */
body.tt-intro-open { overflow: hidden; }

@media (max-width: 780px) {
  .tt-intro-card {
    grid-template-columns: 1fr; width: auto; padding: 28px;
  }
  .tt-intro-hero { display: none; }
  .tt-intro-title { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .tt-intro-card, .tt-intro-backdrop { animation: none !important; }
  .tt-intro-eyebrow::before { animation: none !important; }
}

/* ================================================================
   TAN-971: Vertical Triage Signal Rail (Pulse sidebar)
   Fixed, non-scrolling. Mounted as body-level element so Pulse
   re-renders never destroy it. Feed gets left padding to make room.
   Desktop-only (≥1180px); hidden on smaller viewports.
   ================================================================ */
/* ================================================================
   TAN-971 (Mode A — 2K 27" wide default): Vertical Triage Signal Rail.
   A SELF-CONTAINED floating CARD next to the Pulse content — inset on
   all sides (below the top bar, right of the left nav, off the bottom)
   with rounded corners on all four sides, sitting on the page bg. It is
   NOT fused to the chrome. Wider + responsive via clamp(). NO borders/
   lines anywhere (per Matt: "nowhere in the UI do we use lines like
   that") — card elevation only. Gradient tiles, gold/cyan ticker fonts.
   ================================================================ */
.triage-rail {
  position: fixed;
  /* Dual landscape rails: JS (positionDualRails) pins NEAR to the left edge of
     the pulse content and FAR to the right edge — not the nav bar. Fallback
     left keeps a sensible default before first measure. */
  left: calc(var(--sidebar-w) + 20px);
  top: calc(var(--topbar-h) + 20px);
  bottom: 20px;
  max-height: calc(100vh - var(--topbar-h) - 40px);
  width: clamp(200px, 14vw, 260px);
  z-index: 40;
  background: transparent;
  display: flex;
  flex-direction: column;
  font-family: var(--font-mono);
  overflow: hidden;
  pointer-events: auto;
}
/* Collapsed panel = header only (user can hide Near or Far independently). */
.triage-rail.is-collapsed {
  bottom: auto;
  max-height: none;
  height: auto;
  overflow: visible;
}
.triage-rail.is-collapsed .tr-body { display: none !important; }
.triage-rail .tr-collapse-chev {
  margin-left: 6px;
  flex-shrink: 0;
}
.triage-rail.is-collapsed .tr-collapse-chev { transform: rotate(-90deg); }
.triage-rail .tr-hz-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  padding: 4px 9px;
  border-radius: 5px;
  background: var(--surface-2, rgba(255,255,255,0.04));
  flex-shrink: 0;
  margin-left: 0; /* left chrome — was margin-left:auto when title sat left */
}
.triage-rail .tr-hz-badge--near {
  color: #5eead4;
  background: rgba(94, 234, 212, 0.12);
  border: 1px solid rgba(94, 234, 212, 0.28);
}
.triage-rail .tr-hz-badge--far {
  color: #a5b4fc;
  background: rgba(165, 180, 252, 0.12);
  border: 1px solid rgba(165, 180, 252, 0.28);
}
/* Compact dual-rail head: chip left, chev right */
.triage-rail .tr-head--compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px 6px;
}
.triage-rail .tr-head--compact .tr-collapse-chev {
  margin-left: auto;
}
.triage-widget .tr-hz-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  padding: 4px 9px;
  border-radius: 5px;
  background: var(--surface-2, rgba(255,255,255,0.04));
  flex-shrink: 0;
  margin-right: 8px;
}
.triage-widget .tr-hz-badge--near {
  color: #5eead4;
  background: rgba(94, 234, 212, 0.12);
  border: 1px solid rgba(94, 234, 212, 0.28);
}
.triage-widget .tr-hz-badge--far {
  color: #a5b4fc;
  background: rgba(165, 180, 252, 0.12);
  border: 1px solid rgba(165, 180, 252, 0.28);
}
.triage-widget.is-collapsed .triage-grid { display: none !important; }
.triage-rail .tr-head-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.triage-rail .tr-head-left {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.triage-rail .tr-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  line-height: 1.2;
}
.triage-rail .tr-sub {
  font-size: 8.5px;
  color: var(--text-faint);
  font-family: var(--font-mono, ui-monospace, monospace);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Legacy orange n/a badge removed from chrome (Matt) — keep hidden if old DOM */
.triage-rail .tr-near-na,
.triage-widget .tr-near-na {
  display: none !important;
}
.triage-rail .tr-head {
  padding: 8px 12px 7px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  /* NO border-bottom */
}
/* NEAR / FAR — compact segmented control (mock: top-right of head) */
.triage-rail .tr-horizon,
.triage-widget .tr-horizon {
  display: inline-flex;
  background: var(--surface-2, rgba(255,255,255,0.04));
  border-radius: 6px;
  padding: 1px;
  gap: 1px;
  flex-shrink: 0;
  margin-left: auto;
}
.triage-rail .tr-hz,
.triage-widget .tr-hz {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-mono);
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--text-faint);
  padding: 3px 8px; border-radius: 5px; line-height: 1;
  transition: color 0.12s ease, background 0.12s ease;
}
.triage-rail .tr-hz:hover,
.triage-widget .tr-hz:hover { color: var(--text-secondary); }
.triage-rail .tr-hz.on,
.triage-widget .tr-hz.on {
  color: var(--text-primary);
  background: var(--surface-3, rgba(255,255,255,0.08));
}
.triage-rail .tr-expand {
  margin-left: auto; color: var(--text-faint); cursor: pointer;
  font-size: 13px; line-height: 1;
}
.triage-rail .tr-expand:hover { color: var(--text-secondary); }

/* Single non-scrolling card: body fills remaining height, NO scrollbar.
   Only the top actionables are rendered (see rail render()), so everything
   fits without overflow. */
.triage-rail .tr-body {
  overflow: hidden; flex: 1; padding: 4px 12px 4px;
  /* Stack the bull/coiling/bear groups tight from the top — no spread. Groups keep
     their 5px margin; the column fills DOWN as cell count grows instead of dumping
     leftover height as gaps between sections (Matt, 2026-07-12: "sidecar separated
     when not filling vertical space — stack without much space between"). */
  display: flex; flex-direction: column; justify-content: flex-start;
}

/* TAN-1120: desk search chip — topbar, left of SW version. Opens ⌘K palette. */
.topbar-cmdk {
  display: inline-flex; align-items: center; gap: 6px;
  margin-right: 8px;
  font: inherit;
  font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,0.62);
  padding: 4px 8px 4px 7px; border-radius: 7px;
  cursor: pointer; user-select: none;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.topbar-cmdk:hover, .topbar-cmdk:focus-visible {
  color: #fff;
  background: rgba(59, 130, 246, 0.14);
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.15);
  outline: none;
}
.topbar-cmdk-icon { flex-shrink: 0; opacity: 0.85; }
.topbar-cmdk-label { letter-spacing: 0.01em; }
.topbar-cmdk-kbd {
  font: 650 9.5px/1 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0.02em;
  padding: 2px 5px; border-radius: 4px;
  color: rgba(255,255,255,0.55);
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.1);
}
.topbar-cmdk:hover .topbar-cmdk-kbd,
.topbar-cmdk:focus-visible .topbar-cmdk-kbd {
  color: rgba(226, 232, 240, 0.95);
  border-color: rgba(147, 197, 253, 0.35);
}
@media (max-width: 720px) {
  .topbar-cmdk-label { display: none; }
}

/* TAN-1059: SW version chip (tap to copy). Topbar order: Search → version → Replay → auth → OPEN/CLOSED. */
.nav-sw-version {
  display: inline-flex; align-items: center; margin-right: 6px;
  font: 600 10px/1 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .04em; color: rgba(255,255,255,0.45);
  padding: 3px 7px; border-radius: 5px; cursor: pointer; user-select: none;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
  transition: color .15s ease, background .15s ease;
}
.nav-sw-version:hover, .nav-sw-version:focus-visible { color: #fff; background: rgba(255,255,255,0.10); outline: none; }
/* the last group carries no trailing margin so the card packs tight to its cap */
.triage-rail .tr-group:last-child { margin-bottom: 0; }
.triage-rail .tr-group:last-child .tr-tile:last-child { margin-bottom: 0; }

.triage-rail .tr-group { margin-bottom: 5px; }
.triage-rail .tr-group-h {
  font-size: 9px; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 6px 2px 4px; display: flex; align-items: center; gap: 7px;
}
.triage-rail .tr-group-c { font-size: 9px; color: var(--text-faint); font-weight: 400; }
/* Muted placeholder shown when a group has no qualifying names (no lines). */
.triage-rail .tr-empty {
  font-size: 10px; color: var(--text-faint); font-style: italic;
  padding: 6px 4px 4px; opacity: 0.6;
}

/* fix #5: taller tile toward Pulse feed row rhythm. fix (NO LINES): no border. */
.triage-rail .tr-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 6px 12px;
  min-height: 38px;
  margin-bottom: 5px;
  border-radius: 9px;
  cursor: pointer;
  transition: transform 0.1s ease, filter 0.1s ease;
}
.triage-rail .tr-tile:hover { transform: translateX(2px); filter: brightness(1.08); }
/* row 1: ticker + direction marker (left) + grade chip (right) */
.triage-rail .tr-tile-top {
  display: flex; align-items: center; gap: 7px;
}
/* Lean glyph sits left of ticker in vertical rails; grade stays flush right. */
.triage-rail .tr-tile-top .tr-mark { flex-shrink: 0; order: 0; }
.triage-rail .tr-tile-top .tr-tk { order: 1; min-width: 0; }
.triage-rail .tr-tile-top .tr-grade { margin-left: auto; order: 2; }
/* row 2: pattern name (left, flexes) + tf · N-setups pushed to the RIGHT edge */
.triage-rail .tr-tile-meta {
  display: flex; align-items: center; gap: 6px; min-width: 0;
}
.triage-rail .tr-pat {
  font-size: 10px; font-weight: 600; letter-spacing: 0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1 1 auto; min-width: 0;
}
/* meta (tf · N setups) hard-right-aligned on its row */
.triage-rail .tr-meta-sep {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9px; color: var(--text-faint); font-weight: 500;
  white-space: nowrap; flex-shrink: 0; margin-left: auto;
}
.triage-rail .tr-tf, .triage-rail .tr-n {
  font-variant-numeric: tabular-nums; letter-spacing: 0.03em;
}
.triage-rail .tr-dot { opacity: 0.5; }
/* grade chip — backend-authoritative, only when populated */
.triage-rail .tr-grade {
  font-size: 9px; font-weight: 700; line-height: 1;
  padding: 2px 5px; border-radius: 4px; letter-spacing: 0.04em;
  flex-shrink: 0;
}
.triage-rail .tr-grade-a { background: rgba(16,185,129,0.22); color: var(--emerald); }
.triage-rail .tr-grade-b { background: rgba(59,130,246,0.20); color: var(--blue); }
.triage-rail .tr-grade-c { background: rgba(148,163,184,0.16); color: var(--text-secondary); }
/* TAN-1035: COILING-EXTENDED watch flag — duration awareness on coiling tiles.
   Blue-tinted chip (coiling = blue) carrying the pre-coil direction arrow +
   session count. Only renders for COILING-EXTENDED; transient coiling is bare. */
.triage-rail .tr-coil-ext {
  margin-left: 5px;
  font-size: 9px; font-weight: 700; line-height: 1;
  padding: 2px 4px; border-radius: 4px; letter-spacing: 0.02em;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-variant-numeric: tabular-nums; flex-shrink: 0;
  background: rgba(59,130,246,0.14); color: var(--blue);
  border: 1px solid rgba(59,130,246,0.30);
}
.triage-rail .tr-tile-top .tr-mo + .tr-coil-ext,
.triage-rail .tr-tile-top .tr-grade + .tr-coil-ext { margin-left: 5px; }

/* ── Live momentum layer (TAN-971 #5) ──────────────────────────────
   Subtle & premium. Client-side score/rank deltas across LIVE ticks drive:
   • rank-change chip (↑N / ↓N) that AUTO-FADES (tr-mo-fade) — never permanent
   • tr-climbing  → soft side-tinted lift+glow when a name strengthens/climbs
   • tr-fading    → brief dim when it truly weakens
   • tr-hot       → slow ambient breathing glow on the top-3 names
   No "new" cue: a name appearing in the shortlist is not signal, only real
   movement animates. All motion respects prefers-reduced-motion. */
/* momentum badge: sits to the right of the marker, before the grade chip */
.triage-rail .tr-mo {
  margin-left: auto;
  font-size: 9px; font-weight: 700; line-height: 1;
  padding: 2px 5px; border-radius: 4px; letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
/* when a momentum badge is present, the grade chip no longer needs to push
   right on its own — the badge already owns the margin-left:auto slot */
.triage-rail .tr-tile-top .tr-mo + .tr-grade { margin-left: 6px; }
.triage-rail .tr-mo-up { background: rgba(16,185,129,0.20); color: var(--emerald); }
.triage-rail .tr-mo-down { background: rgba(239,68,68,0.18); color: var(--red); }
/* rank-change chip auto-fades: visible on the tick it appears, then dissolves
   over ~4s so the rail never accumulates permanent badges. */
.triage-rail .tr-mo-fade { animation: tr-mo-fadeout 4.2s ease-out 1 forwards; }
@keyframes tr-mo-fadeout {
  0%   { opacity: 1; transform: translateY(0); }
  55%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-2px); }
}

/* climbing: a soft side-tinted lift + glow when a name strengthens or climbs.
   Subtle & premium — a gentle rise and a single warm halo, then settle. */
.triage-rail .tr-tile.tr-climbing { animation: tr-climb 1.5s cubic-bezier(0.22,1,0.36,1) 1; }
@keyframes tr-climb {
  0%   { transform: translateY(3px); box-shadow: 0 0 0 0 rgba(16,185,129,0.0); }
  35%  { transform: translateY(0);   box-shadow: 0 4px 16px -2px rgba(16,185,129,0.45); }
  100% { transform: translateY(0);   box-shadow: 0 0 0 0 rgba(16,185,129,0.0); }
}
.triage-rail .tr-bear.tr-climbing { animation: tr-climb-bear 1.5s cubic-bezier(0.22,1,0.36,1) 1; }
@keyframes tr-climb-bear {
  0%   { transform: translateY(3px); box-shadow: 0 0 0 0 rgba(239,68,68,0.0); }
  35%  { transform: translateY(0);   box-shadow: 0 4px 16px -2px rgba(239,68,68,0.45); }
  100% { transform: translateY(0);   box-shadow: 0 0 0 0 rgba(239,68,68,0.0); }
}
.triage-rail .tr-coiling.tr-climbing { animation: tr-climb-coil 1.5s cubic-bezier(0.22,1,0.36,1) 1; }
@keyframes tr-climb-coil {
  0%   { transform: translateY(3px); box-shadow: 0 0 0 0 rgba(59,130,246,0.0); }
  35%  { transform: translateY(0);   box-shadow: 0 4px 16px -2px rgba(59,130,246,0.45); }
  100% { transform: translateY(0);   box-shadow: 0 0 0 0 rgba(59,130,246,0.0); }
}

/* fading: a quick dim so a weakening name reads without stealing attention */
.triage-rail .tr-tile.tr-fading { animation: tr-fade 1.1s ease-out 1; }
@keyframes tr-fade { 0% { opacity: 1; } 45% { opacity: 0.5; } 100% { opacity: 1; } }

/* hot: the top-3 names get a slow ambient breathing glow (side-tinted) so the
   eye is drawn to the strongest setups even when nothing is moving. */
.triage-rail .tr-tile.tr-hot::after {
  content: ''; position: absolute; inset: 0; border-radius: 9px;
  pointer-events: none;
}
.triage-rail .tr-bull.tr-hot::after { animation: tr-breathe-bull 3.4s ease-in-out infinite; }
.triage-rail .tr-bear.tr-hot::after { animation: tr-breathe-bear 3.4s ease-in-out infinite; }
.triage-rail .tr-coiling.tr-hot::after { animation: tr-breathe-coil 3.4s ease-in-out infinite; }
@keyframes tr-breathe-bull {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(16,185,129,0.0); }
  50%      { box-shadow: inset 0 0 14px 0 rgba(16,185,129,0.22); }
}
@keyframes tr-breathe-bear {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(239,68,68,0.0); }
  50%      { box-shadow: inset 0 0 14px 0 rgba(239,68,68,0.20); }
}
@keyframes tr-breathe-coil {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(59,130,246,0.0); }
  50%      { box-shadow: inset 0 0 14px 0 rgba(59,130,246,0.20); }
}

@media (prefers-reduced-motion: reduce) {
  .triage-rail .tr-tile.tr-climbing,
  .triage-rail .tr-tile.tr-fading,
  .triage-rail .tr-tile.tr-hot::after,
  .triage-rail .tr-mo-fade { animation: none; }
  .triage-rail .tr-mo-fade { opacity: 1; }
}

/* fix #3: gradient backgrounds per chip (dir -> darker diagonal), NOT flat */
.triage-rail .tr-bull.lv5 { background: linear-gradient(135deg, rgba(16,185,129,0.34), rgba(16,185,129,0.12)); }
.triage-rail .tr-bull.lv4 { background: linear-gradient(135deg, rgba(16,185,129,0.26), rgba(16,185,129,0.08)); }
.triage-rail .tr-bull.lv3 { background: linear-gradient(135deg, rgba(16,185,129,0.18), rgba(16,185,129,0.05)); }
.triage-rail .tr-bull.lv2 { background: linear-gradient(135deg, rgba(16,185,129,0.11), rgba(16,185,129,0.03)); }
.triage-rail .tr-coiling.lv4 { background: linear-gradient(135deg, rgba(59,130,246,0.24), rgba(59,130,246,0.07)); }
.triage-rail .tr-coiling.lv3 { background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(59,130,246,0.04)); }
.triage-rail .tr-bear.lv5 { background: linear-gradient(135deg, rgba(239,68,68,0.32), rgba(239,68,68,0.10)); }
.triage-rail .tr-bear.lv4 { background: linear-gradient(135deg, rgba(239,68,68,0.24), rgba(239,68,68,0.07)); }
.triage-rail .tr-bear.lv3 { background: linear-gradient(135deg, rgba(239,68,68,0.16), rgba(239,68,68,0.05)); }
.triage-rail .tr-bear.lv2 { background: linear-gradient(135deg, rgba(239,68,68,0.10), rgba(239,68,68,0.03)); }

.triage-rail .tr-tk {
  font-size: 15px; font-weight: 700; color: var(--text-primary);
  letter-spacing: 0.02em;
}
/* fix #4: ticker FONT colour = position flag (no amber pill) */
.triage-rail .tr-tk-held { color: var(--gold); }
.triage-rail .tr-tk-watch { color: var(--cyan); }
.triage-rail .tr-mark { display: flex; align-items: center; }

.triage-rail .tr-bars { display: inline-flex; gap: 4px; align-items: center; margin-left: auto; flex-shrink: 0; }
.triage-rail .tr-bar {
  /* fixed-width discrete ticks (4 of them) — wider/longer dashes to match
     the approved mockup density; read as signal segments, not a stretched
     progress bar; leaves dark space on lighter rows */
  width: 22px; height: 4px; border-radius: 2px; display: inline-block; flex: 0 0 22px;
}

/* The rail is a floating CARD overlay — it does NOT reserve layout space,
   so the Pulse feed keeps its native centered full width (do not shrink or
   shift Pulse). The rail simply floats over the left gutter of the content
   area. Intentionally NO .content-wrap overrides here. */

/* ─── TAN-971: triage rail responsive fit ─────────────────────────────── */
/* DESIGN: the rail FLOATS over the content area's left gutter. Pulse (the
   hero) keeps its FULL centered max-width:1400px — never narrowed.
   The rail sits in the natural gutter between sidebar and the centered
   feed; at narrower widths it overlaps the feed's left padding zone
   (empty space, not content). NO content-wrap padding-left overrides —
   that was the bug that shrank Pulse.

   Breakpoints derived from empirical Playwright sweep (1025-2200px, 25px
   steps) measuring rail width vs available gutter. Rail width LOCKED per
   tier (no vw clamps — they drifted and clipped). */

/* Tier 1 — Desktop 2K (>2100px): wide rail in the generous gutter. */
@media (min-width: 2101px) {
  .triage-rail { left: calc(var(--sidebar-w) + 20px); width: clamp(232px, 16vw, 288px); }
}

/* Tier 2 — 13" laptop (1367px-2100px): medium rail (locked 144px) floats
   in the gutter / over the feed's left padding. Dashes on top row.
   TAN-1038 (Matt 2026-07-09): width 160→144 to give ~16px more breathing
   room on the rail's right edge / pulse feed's left edge on MacBook Air. */
@media (min-width: 1367px) and (max-width: 2100px) {
  .triage-rail { left: calc(var(--sidebar-w) + 8px); width: 144px; }
  .triage-rail .tr-head { padding: 9px 10px 7px; gap: 6px; }
  .triage-rail .tr-hz { font-size: 8.5px; padding: 3px 8px; }
  .triage-rail .tr-body { padding: 4px 8px 4px; }
  .triage-rail .tr-group-h { font-size: 8.5px; padding: 5px 2px 3px; letter-spacing: 0.06em; }
  .triage-rail .tr-tile { padding: 5px 9px; min-height: 34px; margin-bottom: 4px; }
  .triage-rail .tr-tile-top { gap: 5px; }
  .triage-rail .tr-bars { gap: 3px; }
  .triage-rail .tr-bar { width: 11px; flex: 0 0 11px; }
  .triage-rail .tr-grade { font-size: 8px; }
}

/* Tier 3 — 11"/12" (1025px-1366px): compact rail (locked 120px), dashes
   stacked UNDER ticker. */
@media (min-width: 1025px) and (max-width: 1366px) {
  .triage-rail { left: calc(var(--sidebar-w) + 6px); width: 120px; }
  .triage-rail .tr-bars { margin-left: 0; margin-top: 3px; display: flex; }
  .triage-rail .tr-bar { width: 10px; flex: 0 0 10px; }
  .triage-rail .tr-tile { padding: 5px 8px; }
  .triage-rail .tr-head { padding: 8px 9px 6px; }
  .triage-rail .tr-hz { font-size: 8px; padding: 2px 7px; }
  .triage-rail .tr-group-h { font-size: 8px; padding: 4px 2px 2px; }
  .triage-rail .tr-tk { font-size: 11px; }
}

/* Tier 4 — portrait/tablet (≤1024px): hide. */
@media (max-width: 1024px) {
  .triage-rail { display: none; }
}

/* ─── M4 Air / laptop dual-flank densify (POST-CASCADE) ────────────────
   Pulse dual NEAR/FAR floating sidecars ONLY (body.triage-dual-flanks from
   triage-rail.js when width ≥ 1600). Terminal #view-c grid untouched.

   Why previous airsort failed:
   1) Compact block lived BEFORE base .tr-tk { 15px } and Tier 2 tiles, so
      later rules re-expanded cells and ticker font never shrank.
   2) max-width:1680 missed MacBook Air "More Space" (~1710–1800 CSS px).

   Gate: landscape + max-height 1200 ≈ laptop class (Air Default + More Space);
   tall 2K/4K desktops keep Tier 1–2 size. Higher specificity than Tier 2.

   v2 densify was calibrated at 110% browser zoom (too tight at 100%).
   Matt 2026-07-15: +~20% bump toward Tier 2 (144/15px) — not full restore.

   REVERT 2026-07-16: removed Coord#26 feed-padding + left:!important gutters
   (broke FAR + feed edge alignment). Layout owned by positionDualRails only. */
@media (orientation: landscape) and (max-height: 1200px) {
  body.triage-dual-flanks .triage-rail {
    width: 136px;
    top: calc(var(--topbar-h) + 10px);
    bottom: 10px;
    max-height: calc(100vh - var(--topbar-h) - 20px);
  }
  body.triage-dual-flanks .triage-rail .tr-body { padding: 3px 6px 3px; }
  body.triage-dual-flanks .triage-rail .tr-head--compact { padding: 5px 7px 4px; gap: 5px; }
  body.triage-dual-flanks .triage-rail .tr-hz-badge { font-size: 8.5px; padding: 3px 6px; }
  body.triage-dual-flanks .triage-rail .tr-group { margin-bottom: 3px; }
  body.triage-dual-flanks .triage-rail .tr-group-h {
    font-size: 8.5px; padding: 4px 2px 2px; gap: 4px; letter-spacing: 0.05em;
  }
  body.triage-dual-flanks .triage-rail .tr-group-c { font-size: 8.5px; }
  body.triage-dual-flanks .triage-rail .tr-tile {
    min-height: 26px;
    padding: 3px 7px;
    margin-bottom: 3px;
    border-radius: 6px;
    gap: 1px;
  }
  body.triage-dual-flanks .triage-rail .tr-tile-top { gap: 4px; }
  /* Was 10px at over-dense setting; ~20% bump → 12px (base 15 / Tier3 11). */
  body.triage-dual-flanks .triage-rail .tr-tk {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
  }
  body.triage-dual-flanks .triage-rail .tr-grade { font-size: 8px; padding: 1px 4px; }
  body.triage-dual-flanks .triage-rail .tr-mo { font-size: 8px; padding: 1px 4px; }
  body.triage-dual-flanks .triage-rail .tr-bars { gap: 2px; }
  body.triage-dual-flanks .triage-rail .tr-bar { width: 10px; flex: 0 0 10px; height: 3px; }
  body.triage-dual-flanks .triage-rail .tr-empty { font-size: 9px; padding: 4px 2px; }
  body.triage-dual-flanks .triage-rail .tr-title { font-size: 9px; }
  body.triage-dual-flanks .triage-rail .tr-sub { font-size: 8px; }
}

/* ================================================================
   TAN-1038 (Matt 2026-07-09): Terminal triage condense on laptop landscape.
   MacBook Air landscape has limited vertical real estate; the triage grid's
   default cell padding/font stack made the widget tall enough to push Top
   Movers off-screen. Condense triage bubble sizes + fonts in the CC terminal (#view-c)
   — UNCONDITIONAL across all orientations + widths (incl. 2K/4K >1700px). Reversible.
   ================================================================ */
/* TAN-1056 rev2 (Coord / GLM 5.2, 2026-07-12): densify CC terminal triage cells ~-50%,
   UNCONDITIONAL. rev1 (v2.0.430) gated this behind @media landscape 1025-1700px — that
   gate is why Matt saw NO change: live-DOM inspection (2026-07-12) confirmed the #view-c
   selector matched but the max-width:1700 excluded his wide display (and landscape-only
   excluded portrait). Ungated now; #view-c specificity (1 ID) wins over base +
   .pulse-triage-sticky portrait override, so densify applies in every CC-terminal mode.
   TRIAGE grid (.triage-grid .tr-grid-cell) — NOT the PTA grid (.cc-pta-grid .alert-card,
   v2.0.427). CC-only (#view-c); main-app .triage-rail untouched. */
#view-c .triage-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; padding: 4px 5px 5px; }
#view-c .triage-grid .tr-grid-cell { padding: 3px 4px 3px; border-radius: 5px; }
#view-c .triage-grid .tr-tk { font-size: 9px; }
#view-c .triage-grid .tr-grade { font-size: 7.5px; top: 3px; right: 4px; }
#view-c .triage-grid .tr-lean { font-size: 7px; margin-top: 1px; }
#view-c .triage-grid .tr-sig { margin-top: 2px; }
#view-c .triage-grid .tr-sig i { height: 2.5px; }

/* Portrait orientation densify for CC #view-c triage (v2.0.447, Coord / GLM 5.2, 2026-07-13).
   A 2K 27" monitor in portrait yields ~1440px CSS width — above the ≤900px CC→main-app
   redirect threshold + non-mobile UA, so it STAYS on CC and hits the fixed 6-col rule above
   → cells stretch far too wide (6 cells across 1440px = ~240px each). Matt 2026-07-13:
   "should be 10-12 per row on portrait not 6". Fixed 12 cols in portrait ONLY; landscape
   #view-c (MacBook Air M4 + desktop, Matt-confirmed-good) keeps the 6-col rule above.
   min-width:0 + ellipsis so long tickers clip cleanly at narrow portrait widths. Scoped to
   #view-c portrait ONLY — main-app .pulse-triage-sticky (its own 32px auto-fill) +
   .triage-rail (hidden in portrait) untouched. CSS-only, no alert logic, no Coord 4.
   Revert: delete this block (landscape 6-col is the base rule above). */
@media (orientation: portrait) {
  /* 12-col densify + readable cell height/type (match sticky restore). */
  #view-c .triage-grid,
  #view-c .triage-widget .triage-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 5px !important;
    padding: 7px 8px 9px !important;
  }
  #view-c .triage-grid .tr-grid-cell,
  #view-c .triage-widget .triage-grid .tr-grid-cell {
    min-width: 0 !important;
    overflow: hidden;
    padding: 8px 6px 7px !important;
    border-radius: 7px !important;
  }
  #view-c .triage-grid .tr-tk,
  #view-c .triage-widget .triage-grid .tr-tk {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #view-c .triage-grid .tr-grade,
  #view-c .triage-widget .triage-grid .tr-grade {
    font-size: 10px !important;
    top: 6px !important;
    right: 6px !important;
  }
  #view-c .triage-grid .tr-sig i,
  #view-c .triage-widget .triage-grid .tr-sig i {
    height: 3.5px !important;
  }
}

/* Portrait: hide floating dual rails; use in-flow stacked sticky grids. */
@media (orientation: portrait) {
  .triage-rail { display: none !important; }
}

/* ─── Dual triage stack (NEAR over FAR) ───────────────────────────────────
   Default: scrolls with the page (Dashboard + landscape).
   Sticky freeze ONLY with .pulse-triage-stack--sticky in portrait (Pulse tab).
   Matt 2026-07-14: Dashboard was freezing cells on vertical scroll — unwanted. */

.pulse-triage-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative; /* not sticky — Dashboard + default */
  z-index: 6;
  background: var(--bg);
  padding-bottom: 6px;
}
/* Terminal · MacBook Air 14" landscape exclusive: single NEAR|FAR panel (no double stack) */
.pulse-triage-stack--exclusive {
  gap: 0;
}
.pulse-triage-stack--exclusive .pulse-triage-sticky {
  padding-bottom: 0;
}
.pulse-triage-stack--exclusive .triage-widget-head--exclusive {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.pulse-triage-stack--exclusive .triage-widget-head--exclusive .tr-horizon {
  margin-left: 0;
  flex-shrink: 0;
}
.pulse-triage-stack--exclusive .triage-widget-head--exclusive .triage-grid-legend {
  margin-left: auto;
}
/* Slightly stronger active segment on Terminal exclusive chrome */
#view-c .pulse-triage-stack--exclusive .tr-hz.on {
  color: var(--text-primary);
  background: rgba(139, 92, 246, 0.18);
  box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.28);
}
/* Pulse tab + portrait: show full NEAR+FAR stack (no inner scrollbar) on
   tall monitors (2K 27" portrait). The old min(38vh, 320px) + overflow-y:auto
   clipped FAR on tall portrait. Scroll only on short portrait (phones). */
@media (orientation: portrait) {
  .pulse-triage-stack.pulse-triage-stack--sticky {
    position: sticky;
    top: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: visible;
  }
}
@media (orientation: portrait) and (max-height: 900px) {
  .pulse-triage-stack.pulse-triage-stack--sticky {
    max-height: min(42vh, 360px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}
/* Never sticky in landscape (floating dual rails or in-flow stack scrolls) */
@media (orientation: landscape) {
  .pulse-triage-stack.pulse-triage-stack--sticky {
    position: relative;
  }
}
.pulse-triage-sticky {
  position: relative; /* stack parent is sticky; children stack inside */
  z-index: 6;
  background: var(--bg);
  padding-bottom: 0;
}
.pulse-triage-sticky-body { padding: 0; }
.pulse-triage-sticky .triage-widget {
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  overflow: hidden;
}
.pulse-triage-sticky .triage-widget-head { background: var(--bg); }
.triage-collapse-chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-left: 10px;
  margin-right: -4px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text-secondary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s ease, border-color .15s ease, color .15s ease, background .15s ease;
  flex-shrink: 0;
}
.triage-collapse-chev:hover {
  border-color: var(--text-muted);
  color: var(--text-primary);
  background: rgba(255,255,255,0.06);
}
.triage-collapse-chev:active { background: rgba(255,255,255,0.10); }
.pulse-triage-sticky.collapsed .triage-collapse-chev,
.triage-widget.is-collapsed .triage-collapse-chev { transform: rotate(-90deg); }
.pulse-triage-sticky.collapsed .triage-grid { display: none; }

/* SPA Pulse landscape only: drop NEAR/FAR collapse notches/buttons.
   Keep chevrons on portrait SPA + Terminal (#view-c). Floating dual rails
   only mount on SPA Pulse (triage-rail.js → body); Terminal uses grid pair
   inside #view-c and is intentionally not matched here. */
@media (orientation: landscape) {
  /* Floating dual rails (wide SPA Pulse) */
  body.triage-rail-active .triage-rail .tr-collapse-chev,
  body.triage-rail-active .triage-rail .triage-collapse-chev {
    display: none !important;
  }
  /* Force panels open when chev is gone (stuck LS collapse must not blank rail) */
  body.triage-rail-active .triage-rail.is-collapsed .tr-body,
  body.triage-rail-active .triage-rail.is-collapsed .tr-body[hidden] {
    display: block !important;
  }
  /* Sticky dual stack on SPA Pulse content (narrow landscape) — not Terminal */
  #main-content .pulse-triage-stack .triage-collapse-chev,
  .content-wrap .pulse-triage-stack .triage-collapse-chev,
  .intel-feed-wrap .pulse-triage-stack .triage-collapse-chev,
  .pulse-v3-active .pulse-triage-stack .triage-collapse-chev {
    display: none !important;
  }
  #main-content .pulse-triage-stack .pulse-triage-sticky.collapsed .triage-grid,
  .content-wrap .pulse-triage-stack .pulse-triage-sticky.collapsed .triage-grid,
  .intel-feed-wrap .pulse-triage-stack .pulse-triage-sticky.collapsed .triage-grid,
  .pulse-v3-active .pulse-triage-stack .pulse-triage-sticky.collapsed .triage-grid {
    display: grid !important;
  }
  #main-content .pulse-triage-stack .triage-widget.is-collapsed .triage-grid,
  .content-wrap .pulse-triage-stack .triage-widget.is-collapsed .triage-grid,
  .pulse-v3-active .pulse-triage-stack .triage-widget.is-collapsed .triage-grid {
    display: grid !important;
  }
}

/* landscape + floating dual rails: hide sticky stack only when flanks are
   active (body.triage-dual-flanks, JS: width ≥ 1500). Narrow landscape
   (MacBook Air) keeps the sticky dual stack so Near/Far stay usable. */
@media (orientation: landscape) {
  body.triage-rail-active.triage-dual-flanks .pulse-triage-stack { display: none; }
  /* Explicit: stack mode on narrow landscape */
  body.triage-rail-active.triage-dual-stack .pulse-triage-stack { display: flex; }
  body.triage-rail-active.triage-dual-stack .triage-rail { display: none !important; }
}
/* portrait sticky: FIXED 12 cols × up to 4 rows — KEEP width densify, restore
   readable HEIGHT/type (Matt 2026-07-14: densify crush was ~-50% height + 9px
   type illegible). Cell padding/fonts match base .tr-grid-cell (8/11.5), not
   the 3px/9px densify. min-width:0 + ellipsis for 12 narrow tracks. */
@media (orientation: portrait) {
  .pulse-triage-sticky .triage-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 5px;
    padding: 7px 8px 9px;
  }
  .pulse-triage-sticky .triage-grid .tr-grid-cell {
    min-width: 0;
    padding: 8px 6px 7px;
    border-radius: 7px;
    overflow: hidden;
  }
  .pulse-triage-sticky .triage-grid .tr-tk {
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pulse-triage-sticky .triage-grid .tr-grade {
    font-size: 10px;
    top: 6px;
    right: 6px;
  }
  .pulse-triage-sticky .triage-grid .tr-lean { font-size: 9px; margin-top: 2px; }
  .pulse-triage-sticky .triage-grid .tr-sig { margin-top: 5px; gap: 2px; }
  .pulse-triage-sticky .triage-grid .tr-sig i { height: 3.5px; border-radius: 2px; }
}

/* ─── TAN-971: Terminal triage heatmap widget (spec-exact rebuild) ──────
   Source of truth: TAN-971-heatmap-widget-spec.md §1–§3. Replaces the earlier
   TAN-996 flat-pack grid. This block implements the card shell + 8-col grid +
   flat rgba tier fills (calm heatmap, NOT neon) + 4-bar .sig tick strip with
   currentColor lit ticks. No A/B/C grade badges (spec uses lean glyph + score). */

/* §1 Widget shell — a card like every other terminal widget. */
.triage-widget {
  background: var(--surface, #111827);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border-soft, #141B2D);
}
.triage-widget-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--bg-alt, #0D1526);
  flex-wrap: nowrap;
  min-height: 0;
}
.triage-widget-head .tw-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--emerald, #10B981);
  box-shadow: 0 0 7px var(--emerald, #10B981);
  flex-shrink: 0;
}
/* Legacy "Triage · Near" title — dual panels use NEAR/FAR chip only */
.triage-grid-title {
  display: none !important;
}
.triage-widget-head .tr-horizon {
  margin-left: 0; /* sits immediately after title; legend takes auto */
}
.triage-grid-legend {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 8px; font-weight: 600; letter-spacing: 0.05em;
  display: inline-flex; gap: 6px; text-transform: uppercase; opacity: 0.9;
  margin-left: auto;
  flex-shrink: 1;
  min-width: 0;
  white-space: nowrap;
}
.triage-grid-legend span { opacity: 0.95; }

/* CC Terminal densify — keep head chrome tight on all orientations (M4 Air 14") */
#view-c .triage-widget-head {
  padding: 2px 6px 4px !important;
  background: transparent !important;
  gap: 6px;
}
#view-c .triage-grid-title {
  font-size: 8.7px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
}
#view-c .triage-widget-head .tr-hz {
  font-size: 8px;
  padding: 2px 7px;
}
#view-c .triage-grid-legend {
  font-size: 7.5px;
  gap: 5px;
}

/* §2 The grid — 8 columns, gap 6px. Auto-fills rows. */
.triage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 6px;
  padding: 9px 10px 11px;
}
.triage-grid-empty {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px; color: var(--faint, #64748B);
  padding: 14px 4px; text-align: center; letter-spacing: 0.04em;
}

/* §2 Cell base — position:relative for the HELD tag; flat fill from tier class. */
.triage-grid .tr-grid-cell {
  position: relative;
  border-radius: 7px;
  padding: 8px 9px 7px;
  background: var(--surface-2, #1A2332);
  cursor: pointer;
  transition: transform 0.1s ease;
  border: 1px solid transparent;
}
.triage-grid .tr-grid-cell:hover { transform: translateY(-1px); }
.triage-grid .tr-grid-cell.sel { outline: 2px solid var(--purple, #8B5CF6); outline-offset: 1px; }
/* Dual NEAR/FAR same-ticker spotlight (hover one → light both).
   Purple — NOT gold/yellow (held) or cyan (watch). Matches .tr-grid-cell.sel. */
.triage-grid .tr-grid-cell.tr-tk-spotlight,
.triage-rail .tr-tile.tr-tk-spotlight {
  outline: 1.5px solid rgba(167, 139, 250, 0.95);
  outline-offset: 1px;
  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.28), 0 0 14px rgba(139, 92, 246, 0.28);
  z-index: 3;
  position: relative;
  filter: brightness(1.05);
}
/* Twin marker when ticker exists on the other horizon */
.triage-grid .tr-grid-cell.tr-tk-spotlight[data-twin="1"]::after,
.triage-rail .tr-tile.tr-tk-spotlight[data-twin="1"]::after {
  content: "↔";
  position: absolute;
  top: 1px;
  left: 3px;
  font-size: 8px;
  font-weight: 800;
  color: #c4b5fd;
  line-height: 1;
  opacity: 0.95;
  pointer-events: none;
  z-index: 4;
}

/* §2 Cell contents */
.triage-grid .tr-tk {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11.5px; font-weight: 700;
  color: var(--tx, #F1F5F9); letter-spacing: 0.01em;
  display: block;
}
/* Held tickers gold, watched cyan (spec §2: held renders gold OR HELD tag). */
.triage-grid .tr-tk-held { color: var(--amber, #F59E0B); }
.triage-grid .tr-tk-watch { color: var(--cyan, #22d3ee); }

.triage-grid .tr-lean {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 9px; font-weight: 600;
  margin-top: 2px;
  color: inherit;            /* §2: takes the tier text tint */
  white-space: nowrap;
}

/* TAN-971g: GRADE letter (A/B/C) top-right of each bubble. Replaces the removed
   lean-glyph + signed-score row. Visible (not muted) — inherits the tier text
   tint via currentColor so it always agrees with the gradient colour. */
.triage-grid .tr-grade {
  position: absolute; top: 6px; right: 8px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px; font-weight: 700;
  color: currentColor; opacity: 0.95;
  letter-spacing: 0.02em; line-height: 1;
}

/* §2 The 4-bar .sig firing-signal tick strip. Lit ticks = currentColor (tier
   text tint); empty = rgba(148,163,184,.16). 4 ticks per cell. */
.triage-grid .tr-sig { display: flex; gap: 2px; margin-top: 5px; }
.triage-grid .tr-sig i {
  flex: 1; height: 3px; border-radius: 2px;
  background: rgba(148,163,184,0.16);   /* empty track */
}
.triage-grid .tr-sig i.on { background: currentColor; }   /* lit = lean color */

/* §3 Cell tier gradients — vertical gradient fills (darker top, luminous
   bottom) matching the mockup screen2. Still calm, NOT neon blocks. Colour =
   tier text tint. */
/* BULL — green */
.triage-grid .b5 { background: linear-gradient(180deg, rgba(16,185,129,0.16), rgba(16,185,129,0.42)); border-color: rgba(16,185,129,0.55); color: var(--emerald-br, #34D399); }
.triage-grid .b4 { background: linear-gradient(180deg, rgba(16,185,129,0.10), rgba(16,185,129,0.28)); border-color: rgba(16,185,129,0.42); color: var(--emerald-br, #34D399); }
.triage-grid .b3 { background: linear-gradient(180deg, rgba(16,185,129,0.06), rgba(16,185,129,0.18)); border-color: rgba(16,185,129,0.30); color: var(--emerald, #10B981); }
.triage-grid .b2 { background: linear-gradient(180deg, rgba(16,185,129,0.04), rgba(16,185,129,0.11)); border-color: rgba(16,185,129,0.20); color: var(--emerald, #10B981); }
/* BEAR — red */
.triage-grid .r5 { background: linear-gradient(180deg, rgba(239,68,68,0.15), rgba(239,68,68,0.40)); border-color: rgba(239,68,68,0.52); color: #FCA5A5; }
.triage-grid .r4 { background: linear-gradient(180deg, rgba(239,68,68,0.10), rgba(239,68,68,0.26)); border-color: rgba(239,68,68,0.40); color: #F87171; }
.triage-grid .r3 { background: linear-gradient(180deg, rgba(239,68,68,0.06), rgba(239,68,68,0.16)); border-color: rgba(239,68,68,0.28); color: #F87171; }
.triage-grid .r2 { background: linear-gradient(180deg, rgba(239,68,68,0.04), rgba(239,68,68,0.10)); border-color: rgba(239,68,68,0.18); color: #F87171; }
/* COILING — blue */
.triage-grid .c4 { background: linear-gradient(180deg, rgba(59,130,246,0.09), rgba(59,130,246,0.24)); border-color: rgba(59,130,246,0.42); color: #93C5FD; }
.triage-grid .c3 { background: linear-gradient(180deg, rgba(59,130,246,0.06), rgba(59,130,246,0.15)); border-color: rgba(59,130,246,0.28); color: #93C5FD; }
/* NEUTRAL / FLAT */
.triage-grid .n1 { background: var(--surface-2, #1A2332); border-color: var(--border, #1E293B); color: var(--mut, #8A99B0); }

/* §4 Coiling near-trigger corner dot */
.triage-grid .tr-grid-cell.coil:after {
  content: ""; position: absolute; top: 7px; right: 8px;
  width: 4px; height: 4px; border-radius: 50%;
  background: #60A5FA; box-shadow: 0 0 5px #60A5FA;
}

/* Slide-in for freshly-ranked cells mirrors the rail poll-new animation. */
.triage-grid .tr-grid-cell.poll-slide-in { animation: trGridSlideIn 0.32s ease both; }
@keyframes trGridSlideIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── TAN-971 + hover v2: grade explainer + stance chrome (mock language) ─
   Same Tangency mono / navy system; stance gradient + chips for why-act. */
.tr-tip-root { will-change: transform, opacity; }
.tr-tip-root .tr-tip-card {
  border-radius: 14px; padding: 14px 16px 13px; width: 320px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  background: linear-gradient(165deg, #141c28 0%, #0b0f16 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 20px 48px rgba(0,0,0,0.55);
}
.tr-tip-card--bull {
  box-shadow:
    0 0 0 1px rgba(16,185,129,0.22),
    0 0 32px rgba(16,185,129,0.08),
    0 20px 48px rgba(0,0,0,0.55);
}
.tr-tip-card--bear {
  box-shadow:
    0 0 0 1px rgba(239,68,68,0.22),
    0 0 32px rgba(239,68,68,0.08),
    0 20px 48px rgba(0,0,0,0.55);
}
.tr-tip-card--coil {
  box-shadow:
    0 0 0 1px rgba(59,130,246,0.28),
    0 0 36px rgba(59,130,246,0.12),
    0 20px 48px rgba(0,0,0,0.55);
}
.tr-tip-head {
  border-radius: 10px; padding: 10px 12px; margin: -4px -4px 8px;
  display: flex; align-items: flex-start; gap: 9px; justify-content: space-between;
  background: linear-gradient(135deg, rgba(255,255,255,0.04), transparent);
}
.tr-tip-card--bull .tr-tip-head { background: linear-gradient(135deg, rgba(16,185,129,0.16), rgba(16,185,129,0.02)); }
.tr-tip-card--bear .tr-tip-head { background: linear-gradient(135deg, rgba(239,68,68,0.16), rgba(239,68,68,0.02)); }
.tr-tip-card--coil .tr-tip-head { background: linear-gradient(135deg, rgba(59,130,246,0.18), rgba(59,130,246,0.02)); }
.tr-tip-head-l { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tr-tip-tk { font-size: 15px; font-weight: 700; color: var(--text-primary, #fff); letter-spacing: 0.02em; }
.tr-tip-tk.tr-tk-held { color: var(--gold, #f5b73d); }
.tr-tip-tk.tr-tk-watch { color: var(--cyan, #22d3ee); }
.tr-tip-dir { font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.tr-tip-story {
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.02em;
  color: rgba(255,255,255,0.78); line-height: 1.35; max-width: 210px;
}
.tr-tip-diverge {
  font-size: 10px; font-weight: 600; letter-spacing: 0.03em;
  color: #fbbf24;
  background: rgba(245,158,11,0.10);
  border: 1px solid rgba(245,158,11,0.22);
  border-radius: 8px;
  padding: 7px 10px; margin: 0 0 8px;
}
.tr-tip-gauge { display: flex; justify-content: center; margin: 2px 0 10px; }
/* Factor lean axes — hover mock v1: 50 = center, bull right / bear left (not LTR heat). */
.tr-tip-factors { display: flex; flex-direction: column; gap: 8px; margin-bottom: 9px; }
.tr-tip-factors-label {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.72);
  margin-bottom: 2px;
}
.tr-tip-row { display: flex; align-items: center; gap: 8px; }
.tr-tip-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary, rgba(255,255,255,0.7));
  width: 64px;
  flex: 0 0 64px;
  white-space: nowrap;
  letter-spacing: 0.02em;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.tr-tip-spark {
  position: relative;
  flex: 1 1 auto;
  height: 8px;
  border-radius: 999px;
  /* low = bear (left) · 50 = neutral · high = bull (right) — matches score semantics */
  background: linear-gradient(90deg,
    rgba(239, 68, 68, 0.55) 0%,
    rgba(239, 68, 68, 0.12) 42%,
    rgba(255, 255, 255, 0.06) 50%,
    rgba(16, 185, 129, 0.12) 58%,
    rgba(16, 185, 129, 0.55) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  overflow: visible;
}
.tr-tip-spark::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -3px;
  bottom: -3px;
  width: 1px;
  background: rgba(255, 255, 255, 0.22);
  transform: translateX(-0.5px);
  pointer-events: none;
  z-index: 1;
}
.tr-tip-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  opacity: 0.55;
  pointer-events: none;
}
.tr-tip-fill--bull {
  background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.85));
}
.tr-tip-fill--bear {
  background: linear-gradient(270deg, transparent, rgba(239, 68, 68, 0.85));
}
.tr-tip-thumb {
  position: absolute;
  top: 50%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.45), 0 0 10px rgba(255, 255, 255, 0.12);
  pointer-events: none;
}
.tr-tip-thumb--bull {
  background: #10b981;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.45), 0 0 12px rgba(16, 185, 129, 0.55);
}
.tr-tip-thumb--bear {
  background: #ef4444;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.45), 0 0 12px rgba(239, 68, 68, 0.55);
}
.tr-tip-thumb--neu {
  background: #94a3b8;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.45), 0 0 8px rgba(148, 163, 184, 0.35);
}
.tr-tip-meta {
  flex: 0 0 44px;
  width: 44px;
  text-align: right;
  line-height: 1.15;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.tr-tip-val {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary, #fff);
}
.tr-tip-lean {
  display: block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tr-tip-lean--bull { color: #34d399; }
.tr-tip-lean--bear { color: #f87171; }
.tr-tip-lean--neu  { color: #94a3b8; }
.tr-tip-scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 8px;
  color: rgba(148, 163, 184, 0.65);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0 2px;
  margin: -2px 0 0;
}
.tr-tip-scale span:nth-child(2) { opacity: 0.7; }
.tr-tip-coil {
  font-size: 10px; color: rgba(255,255,255,0.55); margin: 0 0 6px;
  display: flex; align-items: center; gap: 6px;
}
.tr-tip-coil-mark { color: #3b82f6; }

/* TAN-971: rank-movement atoms (grid-cell delta pill + tooltip RANK block). */
.rk { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-weight: 700; display: inline-flex; align-items: center; gap: 2px; line-height: 1; }
.rk.up   { color: #34D399; }
.rk.dn   { color: #F87171; }
.rk.flat { color: #64748B; }
.rk .ar  { font-size: 8px; }
.rk .n   { font-size: 9.5px; }
/* Grid-cell delta pill — directly under the grade chip (top:6px;right:8px). */
.triage-grid .tr-grid-cell .rk.cell-rank { position: absolute; top: 22px; right: 8px; font-size: 9px; }
/* Tooltip RANK block (top-right of head). */
.tr-tip-rank {
  flex: 0 0 auto;
  background: rgba(255,255,255,.05);
  border-radius: 8px;
  padding: 6px 10px;
  text-align: center;
  min-width: 52px;
}
.tr-tip-rank-lbl { font-size: 7.5px; color: #64748B; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 4px; font-family: var(--font-mono, 'JetBrains Mono', monospace); font-weight: 600; }
.tr-tip-rank-pos { font-size: 17px; font-weight: 700; color: #F1F5F9; line-height: 1; font-family: var(--font-mono, 'JetBrains Mono', monospace); }
.tr-tip-rank-dlt { margin-top: 4px; }
.tr-tip-hint { font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em; padding-top: 2px; color: rgba(255,255,255,0.4); }
.sentiment-smooth-note {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 8px; font-weight: 700; letter-spacing: 0.1em;
  color: rgba(148,163,184,0.75);
  border: 1px solid rgba(148,163,184,0.22);
  border-radius: 4px;
  padding: 2px 5px;
  margin-left: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .tr-tip-root { transition: opacity 0.1s ease !important; transform: none !important; }
}

/* ─── TAN-971e: revert TAN-971d margin-left reservation (REGRESSION) ─────
   TAN-971d added margin-left on .intel-feed when the rail was active, to
   reserve layout space so the rail never overlapped feed content. But that
   margin-left overrode .intel-feed's native margin:0 auto centering, so on
   narrower viewports the fixed left margin + max-width:1400 overflowed the
   available width and SHRANK Pulse, leaving dead space on the right —
   exactly what Matt rejected ("keep pulse a fixed width").

   Pulse is the hero and must keep its FULL centered max-width:1400 at every
   viewport. The rail floats (position:fixed) over the content gutter / left
   padding zone and NEVER reserves layout space. NO .intel-feed or
   .content-wrap overrides. This restores TAN-971c behavior. */

    /* ================================================================
       TAN-972 · REPORTS TAB (Mockup F: Hybrid Rich + Expand)
       New layout primitives only. Report CARDS reuse the existing
       .intel-card / .intel-badge / .intel-card-link / .intel-blurb /
       .ltr-bullets / .verdict-badge / .intel-weekly-* rules — NOT
       restyled here. Cadence colours map to the real tokens:
       earnings=--blue, weekly=#C084FC (purple family), midweek=--cyan,
       daily=--amber.
       ================================================================ */
    .reports-view { max-width: none; margin: 0 auto; padding: 0 4px 24px; }
    /* Full-height columns in side-by-side (landscape) mode: the view fills the
       viewport below the topbar, the grid takes the remaining height, and each
       column's card list scrolls internally — no show-more collapse. Stacked
       (portrait) mode keeps natural-height columns + page scroll. */
    @media (min-width: 1101px) {
      /* Clamp the view to the viewport (height, not min-height) so the grid +
         columns can never grow the page — each column's card list scrolls
         internally and the footer stays pinned at the bottom of the viewport. */
      .reports-view { display: flex; flex-direction: column; height: calc(100dvh - var(--topbar-h) - 48px); max-height: calc(100dvh - var(--topbar-h) - 48px); overflow: hidden; }
      .cadence-grid { flex: 1 1 auto; min-height: 0; }
      .cadence-col { min-height: 0; }
      .cadence-list { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
    }

    /* ── Sticky toolbar ── */
    .reports-toolbar {
      position: sticky; top: 0; z-index: 20;
      display: flex; flex-direction: column; gap: 10px;
      padding: 12px 4px; margin-bottom: 16px;
      background: var(--bg);
      border-bottom: 1px solid var(--border);
    }
    .reports-toolbar-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
    .reports-search {
      flex: 1 1 240px; min-width: 0;
      background: var(--surface); color: var(--text-primary);
      border: 1px solid var(--border); border-radius: var(--radius-sm);
      padding: 8px 12px; font-size: 13px; font-family: var(--font-body);
    }
    .reports-search::placeholder { color: var(--text-faint); }
    .reports-search:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-glow); }
    .reports-select {
      background: var(--surface); color: var(--text-secondary);
      border: 1px solid var(--border); border-radius: var(--radius-sm);
      padding: 8px 10px; font-size: 12px; font-family: var(--font-body);
      max-width: 160px;
    }
    .reports-select:focus { outline: none; border-color: var(--blue); }

    /* ── Section rail titles ── */
    .reports-rail-title {
      font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
      color: var(--text-secondary); text-transform: uppercase;
      margin: 4px 4px 12px;
    }

    /* ── Hero rail ── */
    .hero-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 16px; }
    .hero-card {
      min-width: 0;
      display: flex; flex-direction: column; gap: 8px;
      /* 160° linear gradient surface→surface-2 for depth (mockup spec) */
      background: linear-gradient(160deg, var(--surface-2) 0%, var(--surface) 100%);
      border: 1px solid var(--border);
      border-radius: var(--radius); padding: 18px;
      cursor: pointer; position: relative; overflow: hidden;
      transition: transform 140ms var(--ease), box-shadow 140ms var(--ease), border-color 140ms var(--ease);
    }
    /* Saturated top-right radial glow per cadence (mockup: ::after, 0.5 opacity, 40px blur) */
    .hero-card::after {
      content: ''; position: absolute; top: -30px; right: -30px;
      width: 160px; height: 160px; border-radius: 50%;
      filter: blur(40px); opacity: 0.5; pointer-events: none; z-index: 0;
    }
    .hero-card > * { position: relative; z-index: 1; }
    .hero-card:hover { transform: translateY(-2px); border-color: var(--text-faint); }
    .hero-card:hover::after { opacity: 0.7; }
    /* Glow colors: purple (weekly), teal (mid-week), amber (daily) */
    .hero-card.wk { border-color: rgba(168,85,247,0.30); }
    .hero-card.wk::after { background: var(--purple); }
    .hero-card.mw { border-color: rgba(45,212,191,0.30); }
    .hero-card.mw::after { background: #2dd4bf; }
    .hero-card.dy { border-color: rgba(245,158,11,0.30); }
    .hero-card.dy::after { background: var(--amber); }
    /* Empty/placeholder hero — dimmed, non-interactive */
    .hero-card.is-empty { cursor: default; opacity: 0.82; }
    .hero-card.is-empty::after { opacity: 0.22; }
    .hero-card.is-empty:hover { transform: none; border-color: var(--border); }
    .hero-card.is-empty:hover::after { opacity: 0.22; }
    .hc-type { align-self: flex-start; }
    .hc-date { font-size: 11px; color: var(--text-faint); font-family: var(--font-mono); }
    .hc-headline {
      font-size: 15px; font-weight: 600; color: var(--text-primary);
      line-height: 1.35; font-family: var(--font-display);
      display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    }
    .hc-headline-muted { color: var(--text-muted); font-weight: 500; font-size: 13px; -webkit-line-clamp: 2; }
    .hc-cta { margin-top: auto; font-size: 12px; font-weight: 600; color: var(--blue); }
    .hc-cta-muted { color: var(--text-faint); }

    /* ── 3-column cadence grid (Weekly / Daily / ER) ── */
    .cadence-grid {
      display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px; align-items: stretch; margin-bottom: 24px;
    }
    .cadence-col {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius);
      display: flex; flex-direction: column; min-width: 0;
    }
    .cadence-col-header {
      position: sticky; top: 0; z-index: 2;
      display: flex; align-items: center; gap: 8px;
      padding: 12px; background: var(--surface);
      border-bottom: 1px solid var(--border);
      border-radius: var(--radius) var(--radius) 0 0;
    }
    .cadence-col-name { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; color: var(--text-secondary); }
    .cadence-col-count {
      margin-left: auto; font-size: 11px; font-weight: 700; color: var(--text-faint);
      background: var(--surface-2); border: 1px solid var(--border);
      border-radius: 999px; padding: 1px 8px;
    }
    .cadence-list { display: flex; flex-direction: column; gap: 10px; padding: 12px; min-width: 0; }

    .cadence-placeholder {
      border: 1px dashed var(--border); border-radius: var(--radius-sm);
      padding: 24px 16px; text-align: center;
      color: var(--text-muted); font-size: 12px; line-height: 1.5;
    }

    .cadence-foot {
      display: flex; align-items: center; justify-content: center;
      gap: 8px; padding: 12px; border-top: 1px solid var(--border);
      flex: 0 0 auto; background: var(--surface);
      border-radius: 0 0 var(--radius) var(--radius);
    }
    .expand-btn {
      background: var(--surface-2); color: var(--text-secondary);
      border: 1px solid var(--border); border-radius: var(--radius-sm);
      padding: 6px 12px; font-size: 12px; font-weight: 600;
    }
    .expand-btn:hover { color: var(--text-primary); border-color: var(--text-faint); }
    /* "View all" — a proper centered button, not a right-aligned text link. */
    .viewall-link {
      display: inline-flex; align-items: center; gap: 6px;
      margin: 0 auto;
      background: var(--surface-2); color: var(--text-primary);
      border: 1px solid var(--border); border-radius: var(--radius-sm);
      padding: 9px 20px; font-size: 13.5px; font-weight: 600;
      font-family: var(--font-body); cursor: pointer; text-decoration: none;
      transition: background 140ms var(--ease), border-color 140ms var(--ease), color 140ms var(--ease);
    }
    .viewall-link:hover { background: var(--surface); border-color: var(--blue); color: var(--blue); }
    .viewall-link:active { transform: translateY(1px); }

    /* ── Cadence type-pills ── */
    .type-pill {
      display: inline-block; padding: 2px 8px; border-radius: 4px;
      font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
    }
    .t-earnings { color: var(--blue); background: var(--blue-dim); border: 1px solid rgba(59,130,246,0.35); }
    .t-weekly   { color: #C084FC; background: rgba(168,85,247,0.14); border: 1px solid rgba(168,85,247,0.35); }
    .t-midweek  { color: var(--cyan); background: rgba(56,189,248,0.14); border: 1px solid rgba(56,189,248,0.35); }
    .t-daily    { color: var(--amber); background: var(--amber-dim); border: 1px solid rgba(245,158,11,0.35); }

    /* ── Drill-down / archive ── */
    .reports-drill { max-width: 1200px; margin: 0 auto; padding: 0 4px 60px; }
    .drill-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 4px; flex-wrap: wrap; }
    .drill-back { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
    .drill-back:hover { color: var(--text-primary); }
    .drill-jump { display: flex; gap: 6px; }
    .archive-jump {
      background: var(--surface); color: var(--text-secondary);
      border: 1px solid var(--border); border-radius: var(--radius-sm);
      padding: 6px 12px; font-size: 12px; font-weight: 600;
    }
    .archive-jump:hover { color: var(--text-primary); border-color: var(--text-faint); }
    .archive-count { font-size: 12px; color: var(--text-faint); padding: 4px 4px 12px; }

    .archive-layout { display: grid; grid-template-columns: 160px 1fr; gap: 20px; align-items: start; }
    .archive-rail { position: sticky; top: 64px; align-self: start; display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 120px); overflow-y: auto; }
    .archive-year { font-size: 12px; font-weight: 700; color: var(--text-primary); margin-top: 10px; padding: 4px 6px; }
    .archive-month {
      text-align: left; font-size: 12px; color: var(--text-muted);
      padding: 4px 10px; border-radius: var(--radius-sm); background: none;
    }
    .archive-month:hover { color: var(--text-primary); background: var(--surface); }

    .archive-list { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
    .archive-month-header {
      position: sticky; top: 0; z-index: 10;
      background: var(--bg); color: var(--text-secondary);
      font-size: 12px; font-weight: 700; letter-spacing: 0.05em;
      padding: 8px 4px; border-bottom: 1px solid var(--border);
    }
    .archive-fallback { display: flex; flex-direction: column; gap: 6px; }
    .archive-fallback-link { color: var(--blue); font-size: 13px; }

    /* ── Responsive ── */
    @media (max-width: 1100px) {
      .hero-rail { grid-template-columns: 1fr; }
      .cadence-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 820px) {
      .archive-layout { grid-template-columns: 1fr; }
      .archive-rail { position: static; flex-direction: row; flex-wrap: wrap; max-height: none; overflow: visible; gap: 6px; }
      .archive-year { margin-top: 0; }
    }
    @media (max-width: 480px) {
      .reports-select { max-width: 46%; }
      .hero-card { flex-basis: 100%; }
      .reports-view, .reports-drill { padding-left: 2px; padding-right: 2px; }
    }

/* TAN-1050 — PTA triage-grid densification (~-50%), CC scope only.
   Targets the .cc-pta-grid mount (command-center/init.js) — the triage grid
   Matt sees. Base .alert-grid/.alert-card are shared with /pulse + dashboard
   Latest Reports + main-app #pta-grid, so scope stays on .cc-pta-grid to leave
   those byte-identical. Padding 16px→8px, gap 12px→6px. Border/radius/colors
   untouched. Fonts left at ≥14px (already readable, none >11px eligible). */
.cc-pta-grid.alert-grid { gap: 6px; }
.cc-pta-grid .alert-card { padding: 8px; }