@import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300&family=Inter:wght@400;500;600;700&display=swap');

  /*
   * ── Design System ──────────────────────────────────────────────────────────
   *
   * SURFACES          --bg / --surface / --surface2 / --surface3
   * BORDERS           --border
   * TEXT              --text (primary) / --muted (secondary) / --slate (tertiary)
   * ACCENT            --accent (cyan) / --accent2 (purple) / --sage (section titles)
   * SEMANTIC          --green (positive) / --red (negative) / --yellow (neutral-hold)
   *   SOFT VARIANTS   --green-soft / --red-soft / --yellow-soft (tables, badges, inline data)
   *   MUTED BG        --sage-muted (soft positive bg) / --rose-muted (soft negative bg)
   * TYPOGRAPHY        --font-ui (Inter) for labels & nav / --font-data (DM Mono) for values & tables
   *
   * COMPONENTS
   *   .rc-tab         Small pill tabs (period selectors, momentum tabs)
   *   .filter-tab     Larger filter tabs (All / Portfolio / Watchlist)
   *   .change-badge   Colored status badges — .upgrade / .downgrade / .init
   *   .stat-card      KPI cards in header strips
   *   .data-table     Sortable tables with monospace data cells
   *   .section-header / .section-title   Page section headings (sage green, uppercase)
   *   .news-pagination                    Prev / Next pagination controls
   *   .fh-ticker-select                   Styled <select> dropdowns
   * ──────────────────────────────────────────────────────────────────────────
   */

  :root {
    /* Surfaces */
    --bg:         #2a2a2e;
    --surface:    #1e1e22;
    --surface2:   #252528;
    --surface3:   #2f2f33;
    --border:     #3a3a40;

    /* Accent */
    --accent:     #00e5ff;
    --accent2:    #7c3aed;
    --sage:       #4e7a63;
    --sage-muted: rgba(78,122,99,0.12);
    --heading:    #8a9bb5;
    --heading-muted: rgba(138,155,181,0.12);
    --rose-muted: rgba(192,128,128,0.12);

    /* Semantic — full intensity (KPI strips, nav highlights, charts) */
    --green:      #5aac7a;
    --red:        #c86a6a;
    --yellow:     #c9a84c;
    /* Semantic — muted (table cells, badges, inline data) */
    --green-soft: #66bb9a;
    --red-soft:   #c08080;
    --yellow-soft:#c0b464;

    /* Text */
    --text:       #e8e8ec;
    --muted:      #9a9aaa;
    --slate:      #b0b8c8;

    /* Typography */
    --font-ui:    'Inter', sans-serif;
    --font-data:  'DM Mono', monospace;

    /* Responsive font scale — clamp(min, preferred, max) */
    --fs-hero:    clamp(22px, 1.8vw, 28px);    /* welcome h1, stat-value large */
    --fs-xl:      clamp(17px, 1.4vw, 22px);    /* stat-value, metrics-stat-value */
    --fs-lg:      clamp(14px, 1.1vw, 17px);    /* td-headline, sector-panel-title */
    --fs-md:      clamp(12px, 0.9vw, 15px);    /* section-title, config-title, nav-popup-item, td */
    --fs-body:    clamp(11px, calc(0.6vw + 0.4vh), 14px);   /* nav-item, table td, form-input, desc-popup */
    --fs-sm:      clamp(10px, calc(0.5vw + 0.35vh), 13px);   /* filter-tab, chart-title, badge, th */
    --fs-xs:      clamp(9px, calc(0.45vw + 0.3vh), 12px);    /* nav-section, stat-label, info-tip, nav-subsection */
    --fs-xxs:     clamp(8px, calc(0.4vw + 0.25vh), 11px);    /* nav-section-sm, chip-count, tiny labels */
  }

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

  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-ui);
    min-height: 100vh;
    overflow-x: auto;
  }

  /* ── Micro-interactions & transitions (#93) ── */

  /* Page crossfade on navigation */
  .page { opacity: 0; transition: opacity 0.15s ease; }
  .page.active { opacity: 1; }

  /* KPI value pulse on change */
  @keyframes kpi-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); color: var(--accent); }
    100% { transform: scale(1); }
  }
  .kpi-pulse { animation: kpi-pulse 0.4s ease; }

  /* Stat card subtle highlight on data refresh */
  .stat-value { transition: color 0.3s ease; }

  /* Table row transition support for FLIP reorder animation */
  tbody tr { will-change: transform; }

  /* Skeleton fade-in (already exists, reinforce) */
  .skel-fade-in { animation: fadeIn 0.25s ease; }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

  /* ── Accessibility: focus rings ── */
  *:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
  }
  /* Suppress focus ring for mouse clicks, show only for keyboard nav */
  *:focus:not(:focus-visible) { outline: none; }

  /* Skip-to-content link (hidden until focused via Tab) */
  .skip-link {
    position: absolute; top: -40px; left: 0; z-index: 10000;
    padding: 8px 16px; background: var(--accent); color: #fff;
    font-size: 14px; font-weight: 600; text-decoration: none;
    transition: top 0.2s;
  }
  .skip-link:focus { top: 0; }

  /* ── Noise overlay ── */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
    opacity: 0.4;
  }

  /* ── Layout ── */
  .shell { display: flex; height: 100vh; position: relative; z-index: 1; }

  /* ── Sidebar ── */
  .sidebar {
    width: 220px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 28px 0;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 10;
    overflow-y: auto;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }
  .sidebar::-webkit-scrollbar { width: 4px; }
  .sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
  .sidebar::-webkit-scrollbar-track { background: transparent; }

  .logo {
    padding: 0 24px 32px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
  }
  .logo-mark {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .logo-name {
    font-size: 18px;
    font-weight: 800;
    color: var(--heading);
    margin-top: 4px;
    line-height: 1.1;
  }
  .guide-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--muted);
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    font-style: italic;
    font-family: Georgia, serif;
    text-decoration: none;
    flex-shrink: 0;
    margin-top: 2px;
    transition: border-color .15s, color .15s, background .15s;
  }
  .guide-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(0,229,255,.08);
    text-decoration: none;
  }
  /* Contextual guide deep-links on info-tips */
  a.guide-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px; height: 12px;
    border-radius: 50%;
    border: 1px solid var(--muted);
    color: var(--muted);
    font-size: 8px;
    font-weight: 700;
    text-decoration: none;
    margin-left: 4px;
    vertical-align: middle;
    flex-shrink: 0;
    transition: border-color .15s, color .15s;
  }
  a.guide-link:hover {
    border-color: var(--accent);
    color: var(--accent);
    text-decoration: none;
  }

  .nav { flex: 1; display: flex; flex-direction: column; }
  .nav-section {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--heading);
    padding: 0 24px 6px;
    margin-top: 8px;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .nav-section::after {
    content: '\25BE'; /* ▾ */
    font-size: 10px;
    opacity: 0.4;
    transition: transform 0.2s, opacity 0.15s;
    margin-right: 4px;
  }
  .nav-section:hover::after { opacity: 0.8; }
  .nav-section.collapsed::after { transform: rotate(-90deg); }
  .nav-section[data-nav-section="monitor"]::after { display: none; }
  .nav-section-body {
    overflow: hidden;
    transition: max-height 0.25s ease, opacity 0.2s ease;
    max-height: 500px;
    opacity: 1;
  }
  .nav-section-body.collapsed {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
  }
  .nav-section.nav-section-sm {
    font-size: var(--fs-xxs);
    letter-spacing: 0.1em;
    margin-top: 6px;
    padding-bottom: 4px;
  }
  .nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: clamp(5px, 0.6vh, 9px) 24px;
    font-size: var(--fs-body);
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.15s;
    border-left: 2px solid transparent;
    user-select: none;
  }
  .nav-item:hover { color: var(--text); background: var(--surface2); }
  .nav-item.active {
    color: var(--accent);
    border-left-color: var(--accent);
    background: rgba(0,229,255,0.05);
  }
  .nav-icon { font-size: var(--fs-body); width: 16px; text-align: center; }

  .nav-subsection {
    font-size: var(--fs-xxs); font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--muted);
    padding: 6px 24px 2px; margin-top: 2px; transition: color 0.15s;
  }
  .nav-subsection[onclick]:hover, .nav-subsection[style*="cursor"]:hover { color: var(--heading); }
  .nav-section.active { color: var(--accent); }
  .nav-subsection.active { color: var(--heading); }
  .nav-group { position: relative; }
  .nav-group-toggle {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 24px 5px 34px;
    font-size: var(--fs-xs); font-weight: 600; color: var(--muted);
    cursor: pointer; user-select: none; transition: color 0.15s;
    letter-spacing: 0.04em;
  }
  .nav-group-toggle:hover { color: var(--text); }
  .nav-group-toggle::after { content: '›'; font-size: 12px; margin-left: auto; margin-right: 12px; opacity: 0.5; transition: opacity 0.15s; }
  .nav-group-toggle:hover::after { opacity: 1; }
  .nav-group .nav-item { display: none; }
  .nav-group-popup {
    display: none; position: fixed; z-index: 600;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; padding: 8px 0; min-width: 180px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.45);
    animation: navPopIn 0.12s ease-out;
  }
  .nav-group-popup.open { display: block; }
  .nav-group-popup .nav-popup-title {
    padding: 6px 16px 8px; font-family: var(--font-ui); font-size: var(--fs-xs);
    font-weight: 700; color: var(--heading); text-transform: uppercase;
    letter-spacing: 0.08em; border-bottom: 1px solid var(--border); margin-bottom: 4px;
  }
  .nav-group-popup .nav-popup-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 16px; font-family: var(--font-ui); font-size: var(--fs-body);
    color: var(--text); cursor: pointer; transition: background 0.1s;
  }
  .nav-group-popup .nav-popup-item:hover { background: var(--surface2); }
  .nav-group-popup .nav-popup-item.active { color: var(--accent); }
  .nav-group-popup .nav-popup-icon { font-size: 12px; opacity: 0.6; width: 16px; text-align: center; }
  @keyframes navPopIn { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: translateX(0); } }

  .td-actions-dropdown {
    display: none; position: absolute; right: 0; top: calc(100% + 4px);
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    min-width: 170px; z-index: 100; box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    overflow: hidden;
  }
  .td-actions-dropdown.open { display: block; }
  .td-action-item {
    padding: 10px 16px; font-size: 12px; font-family: var(--font-ui);
    color: var(--text); cursor: pointer; transition: background 0.1s;
  }
  .td-action-item:hover { background: var(--surface2); }

  .td-tab-pane { display: none; }
  .td-tab-pane.active { display: block; }
  .mkts-view-pane { display: none; }
  .mkts-view-pane.active { display: block; }

  /* Pro-forma table + sensitivity matrix */
  .pf-table { width:100%; border-collapse:collapse; font-family:'DM Mono',monospace; font-size:12px; font-variant-numeric:tabular-nums; }
  .pf-table th, .pf-table td { padding:6px 10px; text-align:right; white-space:nowrap; border-bottom:1px solid var(--border); }
  .pf-table th { color:var(--muted); font-weight:500; font-size:11px; text-transform:uppercase; letter-spacing:0.5px; }
  .pf-table th:first-child, .pf-table td:first-child { text-align:left; font-weight:600; color:var(--text); position:sticky; left:0; background:var(--surface); }
  .pf-actual { color:rgba(180,180,195,0.55); }
  .pf-projected { color:rgba(220,220,230,0.85); cursor:pointer; background:rgba(255,255,255,0.015); }
  .pf-projected:hover { background:rgba(255,255,255,0.05); }
  .pf-edited { border-bottom:2px solid rgba(0,229,255,0.45) !important; position:relative; color:var(--text) !important; }
  .pf-edited::after { content:'✎'; position:absolute; top:2px; right:2px; font-size:9px; color:rgba(0,229,255,0.5); }
  .pf-separator { border-left:2px solid var(--border); }
  .pf-cagr { color:rgba(0,229,255,0.55); font-weight:600; font-size:11px; }
  .pf-cell[contenteditable="true"] { outline:1px solid var(--accent); background:rgba(102,187,154,0.08); border-radius:3px; color:var(--text) !important; }
  .sens-table { width:100%; border-collapse:collapse; font-family:'DM Mono',monospace; font-size:12px; font-variant-numeric:tabular-nums; }
  .sens-table th, .sens-table td { padding:8px 10px; text-align:center; border:1px solid var(--border); }
  .sens-table th { color:var(--muted); font-weight:500; font-size:11px; background:var(--bg); }
  .sens-current { background:rgba(102,187,154,0.15) !important; font-weight:700; outline:2px solid var(--accent); }
  .sens-upside { color:var(--green-soft); }
  .sens-downside { color:var(--red-soft); }
  .pf-driver td:first-child { font-style:italic; color:rgba(102,187,154,0.7); font-weight:500; }
  .pf-driver td { background:rgba(102,187,154,0.025); }
  .pf-driver .pf-actual { color:rgba(160,160,175,0.45); }
  .pf-drivers-collapsed .pf-driver { display:none; }
  .pf-defaulted { color:var(--muted) !important; font-style:italic; }
  .pf-hdr-clickable { cursor:pointer; text-decoration:underline dotted var(--muted); text-underline-offset:3px; }
  .pf-hdr-clickable:hover { color:rgba(0,229,255,0.6); }
  .qtr-panel { position:fixed; top:0; right:-480px; width:460px; height:100vh; background:var(--surface); border-left:1px solid var(--border); z-index:400; display:flex; flex-direction:column; transition:right 0.28s cubic-bezier(0.4,0,0.2,1); box-shadow:-12px 0 40px rgba(0,0,0,0.45); }
  .qtr-panel.open { right:0; }
  .qtr-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.35); z-index:399; }
  .qtr-backdrop.open { display:block; }
  @media (max-width:900px) { #page-workspace > div:last-child { grid-template-columns:1fr; } }

  .ee-tab-pane { display: none; }
  .ee-tab-pane.active { display: block; }
  .xray-tab-pane { display: none; }
  .xray-tab-pane.active { display: block; }

  /* ── Info Tooltips ── */
  .kpi-info {
    display: inline-flex; align-items: center; justify-content: center;
    width: 12px; height: 12px; border-radius: 50%;
    border: 1px solid var(--muted); color: var(--muted);
    font-size: 8px; font-weight: 700; font-style: italic;
    cursor: help; margin-left: 4px; vertical-align: middle; flex-shrink: 0;
    font-family: Georgia, serif;
  }
  .kpi-info:hover { border-color: var(--text-secondary); color: var(--text-secondary); }
  .kpi-tip-overlay {
    position: fixed; z-index: 9999; background: var(--surface2); border: 1px solid var(--border);
    border-radius: 8px; padding: 14px 16px; max-width: 320px; min-width: 200px;
    box-shadow: 0 8px 24px rgba(0,0,0,.45); font-family: var(--font-ui); font-size: 11px;
    color: var(--text); line-height: 1.5; pointer-events: auto;
  }
  .kpi-tip-overlay .tip-title { font-weight: 700; font-size: 12px; color: var(--heading); margin-bottom: 6px; }
  .kpi-tip-overlay .tip-row { display: flex; justify-content: space-between; gap: 8px; margin: 3px 0; }
  .kpi-tip-overlay .tip-label { color: var(--muted); }
  .kpi-tip-overlay .tip-val { font-family: var(--font-data); font-weight: 600; }
  .kpi-tip-overlay .tip-list { margin: 6px 0 0; padding: 0; list-style: none; }
  .kpi-tip-overlay .tip-list li { font-family: var(--font-data); font-size: 10px; color: var(--text-secondary); padding: 2px 0; display: flex; justify-content: space-between; }
  .kpi-tip-overlay .tip-list li span:last-child { color: var(--muted); }
  .info-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 1px solid var(--muted);
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    cursor: help;
    margin-left: 4px;
    vertical-align: middle;
    flex-shrink: 0;
  }
  .info-tip:hover { border-color: var(--text-secondary); color: var(--text-secondary); }
  .info-tip .info-tip-text {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    width: 260px;
    padding: 10px 12px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
    text-transform: none;
    letter-spacing: 0;
    white-space: normal;
    z-index: 10000;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  }
  .info-tip .info-tip-text::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--border);
  }
  .info-tip:hover .info-tip-text { visibility: visible; opacity: 1; }

  .sidebar-footer {
    padding: 20px 24px 0;
    border-top: 1px solid var(--border);
  }
  .connection-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-family: var(--font-data);
    color: var(--muted);
  }
  .status-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--green);
    animation: pulse 2s infinite;
  }
  .status-dot.offline { background: var(--red); animation: none; }
  .status-dot.checking { background: var(--yellow); }
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }
  .server-connect-btn {
    margin-left: auto; padding: 2px 8px; font-size: 10px;
    font-family: var(--font-data); background: var(--surface2);
    border: 1px solid var(--border); color: var(--text-secondary);
    border-radius: 4px; cursor: pointer; transition: border-color 0.15s;
  }
  .server-connect-btn:hover { border-color: var(--heading); color: var(--heading); }
  .server-connect-btn:disabled { opacity: 0.4; cursor: default; }

  /* ── Main ── */
  .main {
    margin-left: 220px;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  .topbar {
    height: 60px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    position: sticky;
    top: 0;
    z-index: 5;
  }
  .prompt-pane { display: none; }
  .prompt-pane.active { display: block; }

  /* Auth */
  .auth-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: var(--bg); display: flex; align-items: center; justify-content: center;
  }
  .auth-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
    padding: 48px 40px; max-width: 380px; width: 100%; text-align: center;
    box-shadow: 0 16px 48px rgba(0,0,0,0.4);
  }
  .auth-card .auth-logo { width: auto; height: 36px; margin: 0 auto 16px; }
  .auth-card h2 {
    font-family: var(--font-ui); font-size: 20px; font-weight: 700;
    color: var(--text); margin: 0 0 4px; letter-spacing: 0.02em;
  }
  .auth-card .auth-sub {
    font-family: var(--font-data); font-size: 12px; color: var(--muted); margin-bottom: 28px;
  }
  .auth-input {
    width: 100%; padding: 10px 14px; font-family: var(--font-data); font-size: 13px;
    background: var(--bg); color: var(--text); border: 1px solid var(--border);
    border-radius: 8px; outline: none; margin-bottom: 16px; box-sizing: border-box;
  }
  .auth-input:focus { border-color: var(--heading); }
  .auth-btn {
    width: 100%; padding: 10px; font-family: var(--font-ui); font-size: 13px;
    font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    background: var(--heading); color: var(--bg); border: none; border-radius: 8px;
    cursor: pointer; transition: opacity 0.15s;
  }
  .auth-btn:hover { opacity: 0.85; }
  .auth-btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .auth-status {
    font-family: var(--font-data); font-size: 11px; color: var(--muted);
    margin-top: 12px; min-height: 16px;
  }
  .auth-status.error { color: var(--red-soft); }
  .auth-status.success { color: var(--green-soft); }
  .logout-btn {
    background: none; border: none; color: var(--muted); font-family: var(--font-data);
    font-size: 11px; cursor: pointer; padding: 4px 8px; transition: color 0.15s;
  }
  .logout-btn:hover { color: var(--text); }
  .role-badge {
    display: inline-block; font-family: var(--font-data); font-size: 9px;
    font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 2px 8px; border-radius: 10px; margin-left: 8px;
  }
  .role-badge.owner { background: rgba(99,102,241,0.15); color: var(--accent); }
  .role-badge.client { background: rgba(148,163,184,0.15); color: var(--muted); }
  .nav-back-btn {
    background: none; border: 1px solid var(--border); border-radius: 6px;
    color: var(--muted); font-size: 16px; width: 30px; height: 30px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    margin-right: 10px; transition: color 0.15s, border-color 0.15s;
    flex-shrink: 0;
  }
  .nav-back-btn:hover { color: var(--text); border-color: var(--heading); }
  .page-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--heading);
    letter-spacing: 0.02em;
  }
  .topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .topbar-logo {
    width: 36px;
    height: 36px;
    margin-left: 12px;
    flex-shrink: 0;
  }
  .last-updated {
    font-family: var(--font-data);
    font-size: 11px;
    color: var(--muted);
  }
  .btn-refresh {
    background: var(--surface3);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 0.05em;
  }
  .btn-refresh:hover {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
  }
  .btn-refresh.loading {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
  }
  .btn-refresh.loading::before {
    content: '';
    display: inline-block;
    width: 10px; height: 10px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    margin-right: 6px;
    vertical-align: -1px;
  }
  .btn-live {
    background: var(--surface3);
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: var(--font-data);
    font-size: 11px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    gap: 7px;
  }
  .btn-live .live-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--muted);
    transition: background 0.2s, box-shadow 0.2s;
  }
  .btn-live.on {
    border-color: var(--green);
    color: var(--green);
  }
  .btn-live.on .live-dot {
    background: var(--green);
    animation: pulse 2s infinite;
  }

  .content { padding: 32px; flex: 1; overflow-y: auto; }

  /* ── Pages ── */
  .page { display: none; }
  .page.active { display: block; }

  /* ── Stats strip ── */
  /* Conviction vs Consensus deep-dive */
  .cc-strip { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
  .cc-strip .cc-kpi { flex:1 1 140px; background:var(--surface); border-radius:8px; padding:12px 16px; }
  .cc-kpi-label { font-size:9px; text-transform:uppercase; color:var(--muted); margin-bottom:2px; letter-spacing:.5px; }
  .cc-kpi-value { font-size:18px; font-weight:700; font-family:var(--font-data); }
  .cc-badge { display:inline-block; font-size:10px; font-weight:700; padding:3px 10px; border-radius:6px; letter-spacing:.5px; text-transform:uppercase; }
  .cc-compare { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:18px; }
  .cc-panel { background:var(--surface); border-radius:8px; padding:16px; }
  .cc-bar { height:8px; background:var(--surface2); border-radius:4px; overflow:hidden; margin:8px 0; }
  .cc-bar-fill { height:100%; border-radius:4px; }
  .cc-range { position:relative; height:32px; background:var(--surface2); border-radius:4px; margin:10px 0; }
  .cc-range-marker { position:absolute; top:0; width:2px; height:100%; border-radius:1px; }
  .cc-range-label { position:absolute; top:34px; font-size:9px; font-family:var(--font-data); transform:translateX(-50%); white-space:nowrap; }
  .cc-dim-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); }
  .cc-dim-row:last-child { border-bottom:none; }
  .cc-comp-bar { display:flex; align-items:center; gap:6px; margin-bottom:3px; }
  .cc-comp-bar .bar-track { flex:1; height:5px; background:var(--surface2); border-radius:3px; overflow:hidden; }
  .cc-comp-bar .bar-fill { height:100%; border-radius:3px; }
  @media (max-width:700px) { .cc-compare { grid-template-columns:1fr; } }

  .conv-div-bucket { padding:10px 12px; border-radius:6px; margin-bottom:6px; }
  .conv-div-bucket-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px; }
  .conv-div-tickers { display:flex; flex-wrap:wrap; gap:4px; }
  .conv-div-chip { font-size:10px; padding:2px 8px; border-radius:4px; cursor:pointer; font-family:var(--font-data); }
  .conv-div-dim-bar { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
  .conv-div-dim-bar .bar-track { flex:1; height:8px; background:var(--surface2); border-radius:4px; overflow:hidden; }
  .conv-div-dim-bar .bar-fill { height:100%; border-radius:4px; }

  .stats-strip {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    margin-bottom: 32px;
  }
  .stats-strip .stat-card {
    flex: 0 0 auto;
    min-width: 120px;
    padding: 16px 20px;
  }
  .stat-frac {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    gap: 3px;
  }
  .stat-frac-num {
    font-family: var(--font-data);
    font-size: 26px;
    font-weight: 500;
    color: var(--green);
    border-bottom: 1.5px solid var(--border);
    padding-bottom: 4px;
    width: 100%;
    text-align: center;
  }
  .stat-frac-den {
    font-family: var(--font-data);
    font-size: 18px;
    font-weight: 400;
    color: var(--muted);
    text-align: center;
  }
  details.stat-card > summary::-webkit-details-marker { display:none; }
  details.stat-card > summary::marker { content:''; }
  .stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px 24px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.2s;
  }
  .stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--accent);
    opacity: 0;
    transition: opacity 0.2s;
  }
  .stat-card:hover { border-color: var(--accent); }
  .stat-card:hover::before { opacity: 1; }
  .stat-label {
    font-size: var(--fs-xxs);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
  }
  .stat-value {
    font-family: var(--font-data);
    font-size: var(--fs-hero);
    font-weight: 500;
    color: var(--text);
    line-height: 1;
  }
  .stat-sub {
    font-size: var(--fs-xs);
    color: var(--muted);
    margin-top: 6px;
    font-family: var(--font-data);
  }
  .stat-accent { color: var(--accent); }
  .stat-green  { color: var(--green-soft);  }
  .stat-red    { color: var(--red-soft);    }

  /* ── Section header ── */
  .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
  }
  .section-title {
    font-size: var(--fs-body);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--heading);
  }
  #page-ticker .section-title { color: var(--text); font-size: var(--fs-md); text-decoration: underline; text-underline-offset: 4px; }
  .section-title span {
    color: var(--accent);
    margin-left: 8px;
    font-size: var(--fs-xs);
  }
  .section-subtitle {
    font-size: var(--fs-xs);
    color: var(--slate);
    font-family: var(--font-data);
  }

  /* ── Filter tabs ── */
  .filter-tabs {
    display: flex;
    gap: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px;
    width: fit-content;
    margin-bottom: 20px;
  }
  .filter-tab {
    padding: 6px 16px;
    font-size: var(--fs-sm);
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    color: var(--muted);
    transition: all 0.15s;
    letter-spacing: 0.05em;
    user-select: none;
  }
  .filter-tab:hover { color: var(--text); }
  .filter-tab.active {
    background: var(--accent);
    color: var(--bg);
  }
  /* ── Table ── */
  .table-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow-x: auto;
    overflow-y: auto;
    max-height: 75vh;
  }
  thead tr { position: sticky; top: 0; z-index: 3; background: var(--surface); }
  thead th { background: var(--surface); }
  /* ── Freeze first column on horizontal scroll — global utility (originally #239) ──
     Apply to any `.table-wrap` whose first column is the row's primary identifier
     (ticker, name, etc.) and whose width forces horizontal scroll. The first
     th/td gets sticky positioning + opaque background to stay visible while the
     rest of the row scrolls. Currently used on: peers, performance positions,
     overview, conviction movers/snapshots, AI Resilience table, discoveries
     recommendations, earnings/estimates trackers. */
  .freeze-ticker th:first-child,
  .freeze-ticker td:first-child {
    position: sticky; left: 0; z-index: 2;
    background: var(--surface);
    box-shadow: 2px 0 6px rgba(0,0,0,0.20);
  }
  .freeze-ticker thead th:first-child { z-index: 4; background: var(--surface); }
  .freeze-ticker tbody tr:hover td:first-child { background: var(--surface2); }
  .freeze-ticker .table-group-header td { position: static; box-shadow: none; }
  /* Table horizontal scroll slider */
  .table-slider {
    -webkit-appearance: none; appearance: none;
    width: 120px; height: 4px; border-radius: 2px;
    background: var(--border); outline: none; cursor: pointer;
  }
  .table-slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%;
    background: var(--accent); cursor: pointer;
  }
  .table-slider::-moz-range-thumb {
    width: 14px; height: 14px; border-radius: 50%; border: none;
    background: var(--accent); cursor: pointer;
  }
  .scroll-btn {
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--muted);
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
  }
  .scroll-btn:hover { color: var(--text); border-color: var(--accent); }
  table { width: max-content; min-width: 100%; border-collapse: collapse; }
  /* ── .data-table — standard data table class ──────────────────────────────
     Adds DM Mono to all cells and tightens padding to a data-dense default.
     Wrap in .table-wrap for border/scroll/sticky-header, or in a .card when
     the card already provides the container. All th/td inline styles (colour,
     alignment, per-column overrides) are preserved and always win via cascade.
  */
  .data-table td,
  .data-table th  { font-family: var(--font-data); }
  .data-table th  { padding: 6px 10px; }
  .data-table td  { padding: 7px 10px; }
  thead tr {
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
  }
  th {
    padding: 12px 16px;
    text-align: left;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
  }
  th:hover { color: var(--text); }
  th.wrap-hdr { white-space: normal; text-align: center; min-width: 64px; line-height: 1.4; }
  th.sort-asc::after  { content: ' ▲'; color: var(--accent); }
  th.sort-desc::after { content: ' ▼'; color: var(--accent); }
  td {
    padding: 13px 16px;
    font-size: var(--fs-body);
    border-bottom: 1px solid rgba(42,42,53,0.5);
    vertical-align: middle;
  }
  tr:last-child td { border-bottom: none; }
  tbody tr { transition: background 0.1s; }
  tbody tr:hover { background: var(--surface2); cursor: pointer; }

  /* Compact tables (realized gains) */
  .realized-compact th { padding: 8px 12px; font-size: 10px; }
  .realized-compact td { padding: 7px 12px; font-size: 12px; }
  /* Category section header rows within tables */
  tr.cat-header td {
    background: var(--surface2);
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 6px 16px;
    border-bottom: 1px solid var(--border);
    border-top: 1px solid var(--border);
  }
  tr.cat-header:hover { background: var(--surface2) !important; cursor: default; }
  /* Sortable column headers */
  th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
  th.sortable:hover { color: var(--accent); }
  th.sortable::after { content: ' ⇅'; opacity: 0.3; font-size: 9px; }
  th.sort-asc::after  { content: ' ▲'; opacity: 1; color: var(--accent); }
  th.sort-desc::after { content: ' ▼'; opacity: 1; color: var(--accent); }
  /* Open positions table: center data */
  #perfPosWrap th,
  #perfPosWrap td { text-align: center; }
  #perfPosWrap td:first-child,
  #perfPosWrap th:first-child { text-align: left; }
  /* Totals row in open positions table */
  tr.pos-totals td {
    border-top: 2px solid var(--border);
    font-weight: 600;
    font-size: 12px;
    padding: 8px 12px;
    background: var(--surface1);
  }
  tr.pos-totals:hover { background: var(--surface1) !important; cursor: default; }
  /* Quarter header rows in realized table */
  tr.qtr-header td {
    background: var(--surface2);
    padding: 7px 14px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid rgba(80,80,88,0.4);
  }
  tr.qtr-header:hover { background: var(--surface2) !important; cursor: default; }
  tr.qtr-header.collapsible { cursor: pointer; }
  tr.qtr-header.collapsible:hover { background: var(--surface3) !important; }
  .qtr-chevron { font-size: 8px; margin-right: 7px; opacity: 0.7; display: inline-block; width: 10px; }

  .ticker-cell { display: flex; align-items: center; gap: 10px; }
  .ticker-badge {
    font-family: var(--font-data);
    font-size: var(--fs-sm);
    font-weight: 500;
    background: var(--surface3);
    border: 1px solid var(--border);
    padding: 3px 8px;
    border-radius: 4px;
    color: var(--accent);
    letter-spacing: 0.05em;
  }
  .company-name { font-size: 12px; color: var(--muted); }
  .ticker-hover-tip {
    position: fixed; z-index: 10000; max-width: 420px; padding: 12px 16px;
    background: var(--surface2); border: 1px solid var(--border); border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3); pointer-events: auto;
    animation: tipFadeIn 0.15s ease;
  }
  /* Company description centered popup */
  .desc-popup {
    position: fixed; z-index: 9999;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 600px; max-width: 90vw; max-height: 75vh;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    animation: tipFadeIn 0.15s ease;
    display: flex; flex-direction: column;
  }
  .desc-popup-close {
    position: absolute; top: 8px; right: 10px;
    background: none; border: none; color: var(--muted); font-size: 20px;
    cursor: pointer; line-height: 1; padding: 4px 8px; border-radius: 4px;
  }
  .desc-popup-close:hover { color: var(--text); background: var(--surface2); }
  .desc-popup-body {
    padding: 20px 24px; overflow-y: auto;
    font-size: var(--fs-body); color: var(--text); line-height: 1.7;
    white-space: pre-line;
  }
  .desc-popup-title {
    padding: 16px 24px 0; font-size: var(--fs-md); font-weight: 700; color: var(--heading);
    font-family: var(--font-ui);
  }
  .desc-more-btn {
    display: inline-block; margin-top: 6px; font-size: 11px; font-weight: 600;
    color: var(--accent); cursor: pointer; padding: 2px 0;
  }
  .desc-more-btn:hover { text-decoration: underline; }
  .ticker-hover-tip .tip-more {
    display: inline-block; margin-top: 8px; font-size: 11px; font-weight: 600;
    color: var(--accent); cursor: pointer;
  }
  .ticker-hover-tip .tip-more:hover { text-decoration: underline; }
  @keyframes tipFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

  .badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 4px;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.03em;
    font-family: var(--font-data);
  }
  .badge-portfolio { background: rgba(138,127,173,0.15); color: #9a8fb5; border: 1px solid rgba(138,127,173,0.3); }
  .badge-watchlist { background: rgba(0,229,255,0.08); color: var(--accent); border: 1px solid rgba(0,229,255,0.2); }
  .ticker-badge-portfolio { background: rgba(138,127,173,0.15); color: #9a8fb5; border-color: rgba(138,127,173,0.3); }
  .badge-bullish    { background: rgba(102,187,154,0.10); color: var(--green-soft); border: 1px solid rgba(102,187,154,0.25); }
  .badge-neutral    { background: rgba(200,180,100,0.10); color: var(--yellow-soft); border: 1px solid rgba(200,180,100,0.25); }
  .badge-cautious   { background: rgba(192,128,128,0.10); color: var(--red-soft); border: 1px solid rgba(192,128,128,0.25); }
  .badge-raised     { background: rgba(102,187,154,0.10); color: var(--green-soft); border: 1px solid rgba(102,187,154,0.25); }
  .badge-lowered    { background: rgba(192,128,128,0.10); color: var(--red-soft); border: 1px solid rgba(192,128,128,0.25); }
  .badge-maintained { background: rgba(200,180,100,0.10); color: var(--yellow-soft); border: 1px solid rgba(200,180,100,0.25); }
  /* ── Sector table grouping ── */
  .sect-group-header td { background: var(--surface2); border-bottom: 1px solid var(--border); }
  .sect-group-header:hover td { background: rgba(255,255,255,0.04); }
  .sect-group-chev { display: inline-block; width: 14px; font-size: 10px; color: var(--muted); }
  .sect-sub-row td:first-child { font-size: 12px; }
  /* ── Peer rank pills ── */
  .peer-rank-pill {
    display: inline-block; font-family: var(--font-data); font-size: 11px; font-weight: 600;
    padding: 2px 8px; border-radius: 5px; margin: 1px 3px 1px 0; cursor: pointer;
    transition: opacity 0.12s;
  }
  .peer-rank-pill:hover { opacity: 0.75; }
  .peer-rank-pill.rank-top { background: rgba(72,199,142,0.12); color: var(--sage); border: 1px solid rgba(72,199,142,0.25); }
  /* ── KPI strip ── */
  .kpi-strip {
    display: flex; flex-wrap: wrap; gap: 12px;
  }
  .kpi-card {
    flex: 1 1 150px; min-width: 140px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    padding: 14px 16px; text-align: center;
  }
  .kpi-label {
    font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 6px;
  }
  .kpi-value {
    font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.3;
  }
  .kpi-value.pos { color: var(--sage); }
  .kpi-value.neg { color: var(--red-soft); }
  .kpi-sub {
    font-size: 11px; color: var(--muted); margin-top: 4px; font-family: var(--font-data);
  }
  /* ── Sector map ── */
  .sector-map {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin: 28px 0;
  }
  .sector-map-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
  }
  .sector-map-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: 8px;
  }
  .sector-map-card-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.02em;
  }
  .sector-map-card-count {
    font-family: var(--font-data);
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
  }
  .sector-map-group { margin-bottom: 7px; }
  .sector-map-group:last-child { margin-bottom: 0; }
  .sector-map-group-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 5px;
  }
  .sector-map-tickers { display: flex; flex-wrap: wrap; gap: 4px; }
  .sm-ticker-port {
    font-family: var(--font-data);
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(138,127,173,0.15);
    color: #9a8fb5;
    border: 1px solid rgba(138,127,173,0.3);
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.12s;
  }
  .sm-ticker-port:hover { background: rgba(124,58,237,0.3); }
  .sm-ticker-watch {
    font-family: var(--font-data);
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(0,229,255,0.08);
    color: var(--accent);
    border: 1px solid rgba(0,229,255,0.2);
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.12s;
  }
  .sm-ticker-watch:hover { background: rgba(0,229,255,0.18); }

  /* ── Sector drill-down side panel ── */
  .sector-panel-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 299;
  }
  .sector-panel-backdrop.open { display: block; }
  .sector-panel {
    position: fixed;
    top: 0;
    right: -500px;
    width: 460px;
    max-width: min(460px, 95vw);
    height: 100vh;
    background: var(--surface);
    border-left: 1px solid var(--border);
    z-index: 300;
    display: flex;
    flex-direction: column;
    transition: right 0.28s cubic-bezier(0.4,0,0.2,1);
    box-shadow: -12px 0 40px rgba(0,0,0,0.45);
  }
  .sector-panel.open { right: 0; }
  .sector-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .sector-panel-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
  }
  .sector-panel-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
  }
  .sector-panel-close {
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: 6px;
    padding: 5px 11px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.12s;
  }
  .sector-panel-close:hover { background: var(--surface2); color: var(--text); }
  .sector-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 20px;
  }
  .sector-panel-body .sector-map {
    grid-template-columns: 1fr;
    margin: 0;
  }

  /* Chat Drawer */
  .chat-fab {
    position: fixed; bottom: 24px; right: 24px; z-index: 200;
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--sage); color: #fff; border: none;
    font-size: 20px; cursor: pointer; display: flex;
    align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    transition: transform 0.15s, box-shadow 0.15s;
  }
  .chat-fab:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(0,0,0,0.4); }
  .chat-fab .fab-dot {
    position: absolute; top: 2px; right: 2px; width: 10px; height: 10px;
    border-radius: 50%; border: 2px solid var(--surface);
    background: var(--red); transition: background 0.3s;
  }
  .chat-fab .fab-dot.online { background: var(--green); }
  .chat-backdrop {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.35); z-index: 399;
  }
  .chat-backdrop.open { display: block; }
  .chat-drawer {
    position: fixed; top: 0; right: -440px; width: 420px; max-width: min(420px, 95vw); height: 100vh;
    background: var(--surface); border-left: 1px solid var(--border);
    z-index: 400; display: flex; flex-direction: column;
    transition: right 0.28s cubic-bezier(0.4,0,0.2,1);
    box-shadow: -12px 0 40px rgba(0,0,0,0.45);
  }
  .chat-drawer.open { right: 0; }
  .chat-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0;
  }
  .chat-header-title {
    font-family: var(--font-ui); font-weight: 700; font-size: 14px; color: var(--heading);
    text-transform: uppercase; letter-spacing: 0.05em;
  }
  .chat-messages {
    flex: 1; overflow-y: auto; padding: 16px 18px;
    display: flex; flex-direction: column; gap: 10px;
  }
  .chat-bubble {
    max-width: 88%; padding: 10px 14px; border-radius: 12px;
    font-family: var(--font-data); font-size: 12px; line-height: 1.6;
    word-wrap: break-word;
  }
  .chat-bubble.user {
    align-self: flex-end; background: var(--sage); color: #fff; border-bottom-right-radius: 4px;
  }
  .chat-bubble.assistant {
    align-self: flex-start; background: var(--surface2); color: var(--text); border-bottom-left-radius: 4px;
  }
  .chat-bubble.error {
    align-self: flex-start; background: rgba(255,23,68,0.08); color: var(--red-soft);
    border: 1px solid rgba(255,23,68,0.2); border-bottom-left-radius: 4px;
  }
  .chat-typing {
    align-self: flex-start; padding: 10px 18px; color: var(--muted);
    font-family: var(--font-data); font-size: 12px;
  }
  .chat-typing span { animation: chatDots 1.4s infinite; display: inline-block; }
  .chat-typing span:nth-child(2) { animation-delay: 0.2s; }
  .chat-typing span:nth-child(3) { animation-delay: 0.4s; }
  @keyframes chatDots { 0%,80%,100% { opacity: 0.2; } 40% { opacity: 1; } }
  .chat-input-row {
    display: flex; gap: 8px; padding: 12px 18px;
    border-top: 1px solid var(--border); flex-shrink: 0;
  }
  .chat-input {
    flex: 1; padding: 8px 12px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--surface2);
    color: var(--text); font-family: var(--font-data); font-size: 12px;
    outline: none; resize: none;
  }
  .chat-input:focus { border-color: var(--heading); }
  .chat-send {
    background: var(--heading); color: #fff; border: none; border-radius: 8px;
    padding: 8px 14px; cursor: pointer; font-family: var(--font-ui);
    font-size: 12px; font-weight: 600; white-space: nowrap;
  }
  .chat-send:disabled { opacity: 0.4; cursor: default; }
  .chat-suggestion {
    padding: 8px 12px; background: var(--surface2); border: 1px solid var(--border);
    border-radius: 8px; font-family: var(--font-data); font-size: 11px;
    color: var(--text-secondary); cursor: pointer; transition: border-color 0.15s;
  }
  .chat-suggestion:hover { border-color: var(--heading); color: var(--text); }

  #thesesSubSectorDrop.open { display:block !important; }
  #thesesSubSectorDrop label { display:flex;align-items:center;gap:6px;padding:4px 6px;font-size:13px;color:var(--text);cursor:pointer;border-radius:4px; }
  #thesesSubSectorDrop label:hover { background:var(--surface2); }
  #thesesSubSectorDrop input[type=checkbox] { accent-color:var(--accent);width:14px;height:14px; }
  .subsector-tag {
    display: inline-block;
    background: rgba(0,229,255,0.06);
    border: 1px solid rgba(0,229,255,0.18);
    color: var(--accent);
    font-family: var(--font-data);
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 10px;
    margin: 1px 2px 1px 0;
    white-space: nowrap;
  }
  .subsector-tag.clickable { cursor: pointer; }
  .subsector-tag.clickable:hover { background: rgba(0,229,255,0.14); }
  .meta-tag {
    display: inline-block;
    font-size: 8px;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(106,90,205,0.2);
    color: #a29bfe;
    font-weight: 600;
    letter-spacing: 0.5px;
    font-family: var(--font-data);
    margin-left: 4px;
    white-space: nowrap;
    vertical-align: middle;
  }
  .table-group-header td {
    background: var(--surface2); font-family: var(--font-ui); font-size: 11px;
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--heading); padding: 8px 12px !important; border-bottom: 1px solid var(--border);
  }
  .table-group-header td .group-count {
    font-weight: 400; color: var(--muted); font-size: 10px; margin-left: 6px;
  }
  .weight-badge {
    display: inline-block;
    font-family: var(--font-data);
    font-size: 12px;
    color: var(--heading);
    background: rgba(245,245,240,0.12);
    border: 1px solid rgba(245,245,240,0.20);
    border-radius: 10px;
    padding: 2px 9px;
    white-space: nowrap;
  }
  /* ── Collapsible section header ── */
  .collapsible-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0;
    user-select: none;
    transition: background 0.15s;
  }
  .collapsible-header:hover { background: var(--surface2); color: var(--text); }
  .collapsible-header.open  { border-radius: 8px 8px 0 0; margin-bottom: 0; }
  .collapsible-chevron { font-size: 10px; transition: transform 0.2s; }
  .collapsible-header.open .collapsible-chevron { transform: rotate(90deg); }

  /* ── Earnings quality score ── */
  .score-badge { display:inline-block; font-family:var(--font-data); font-size:13px; font-weight:700; padding:3px 10px; border-radius:5px; letter-spacing:0.04em; }
  .score-hi  { background:rgba(102,187,154,0.12); color:var(--green-soft); }
  .score-mid { background:rgba(200,180,100,0.12); color:var(--yellow-soft); }
  .score-lo  { background:rgba(192,128,128,0.12); color:var(--red-soft); }

  .num { font-family: var(--font-data); font-size: 13px; text-align: right; }
  .num.pos { color: var(--green-soft); }
  .num.neg { color: var(--red-soft); }
  .num.neu { color: var(--muted); }

  /* ── Summary modal ── */
  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 32px;
  }
  .modal-overlay.open { display: flex; }
  .modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    width: 100%;
    max-width: 720px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 32px;
    position: relative;
    animation: slideUp 0.2s ease;
  }
  @keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }
  .modal-close {
    position: absolute;
    top: 20px; right: 20px;
    background: var(--surface3);
    border: 1px solid var(--border);
    color: var(--muted);
    width: 32px; height: 32px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
  }
  .modal-close:hover { color: var(--text); border-color: var(--text); }

  /* ── Welcome screen ── */
  .welcome-overlay {
    position: fixed; inset: 0; z-index: 500;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    animation: fadeIn 0.25s ease;
  }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  .welcome-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    width: 75vw; max-width: 960px;
    height: 75vh; max-height: 680px;
    padding: 40px 48px;
    position: relative;
    display: flex; flex-direction: column;
    box-shadow: 0 24px 64px rgba(0,0,0,0.5);
    animation: slideUp 0.3s ease;
    overflow-y: auto;
  }
  .welcome-close {
    position: absolute; top: 20px; right: 20px;
    background: var(--surface3); border: 1px solid var(--border);
    color: var(--muted); width: 36px; height: 36px;
    border-radius: 8px; cursor: pointer; font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
  }
  .welcome-close:hover { color: var(--text); border-color: var(--text); }
  .welcome-header {
    text-align: center; margin-bottom: 32px;
  }
  .welcome-header h1 {
    font-family: var(--font-ui); font-size: var(--fs-hero); font-weight: 800;
    color: var(--heading); margin: 0 0 4px; letter-spacing: 0.02em;
  }
  .welcome-header .welcome-date {
    font-family: var(--font-data); font-size: var(--fs-body); color: var(--muted);
  }
  .welcome-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px;
    margin-bottom: 24px;
  }
  .welcome-stat {
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: 10px; padding: 16px 20px; text-align: center;
  }
  .welcome-stat .ws-label {
    font-family: var(--font-ui); font-size: var(--fs-xxs); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 6px;
  }
  .welcome-stat .ws-value {
    font-family: var(--font-data); font-size: var(--fs-xl); font-weight: 700; color: var(--text);
  }
  .welcome-movers {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    flex: 1; min-height: 0;
  }
  .welcome-movers-col {
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: 10px; padding: 16px; overflow-y: auto;
  }
  .welcome-movers-col .wm-title {
    font-family: var(--font-ui); font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 10px;
  }
  .welcome-mover-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 5px 0; border-bottom: 1px solid var(--border);
    font-family: var(--font-data); font-size: 12px;
  }
  .welcome-mover-row:last-child { border-bottom: none; }
  .welcome-mover-row .wm-ticker { color: var(--accent); font-weight: 600; }
  .welcome-mover-row .wm-name { color: var(--muted); font-size: 11px; margin-left: 8px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .modal-ticker {
    font-family: var(--font-data);
    font-size: 11px;
    color: var(--accent);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .modal-headline {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
    margin-bottom: 20px;
    padding-right: 40px;
  }
  .modal-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 24px;
  }
  .modal-metric {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
  }
  .modal-metric-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
  }
  .modal-metric-value {
    font-family: var(--font-data);
    font-size: 18px;
    color: var(--text);
  }
  .modal-section-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
    margin-top: 20px;
  }
  .modal-themes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
  }
  .theme-chip {
    background: var(--surface3);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 11px;
    padding: 4px 12px;
    border-radius: 20px;
    font-family: var(--font-data);
  }
  .modal-summary {
    font-size: 14px;
    line-height: 1.7;
    color: rgba(232,232,240,0.8);
  }
  .modal-summary p { margin-bottom: 12px; }

  /* ── Sentiment chart ── */
  .chart-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 32px;
  }
  .chart-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 24px;
  }
  .chart-title {
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 20px;
  }
  .chart-wrap { position: relative; height: 200px; }

  /* ── Markets two-column layout ── */
  .mkts-row {
    display: flex;
    gap: 0;
    margin-bottom: 32px;
    align-items: stretch;
  }
  .mkts-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 20px;
  }
  .mkts-row > .mkts-col:first-child { padding-left: 0; }
  .mkts-row > .mkts-col:last-child  { padding-right: 0; }
  .mkts-divider {
    width: 1.5px;
    flex-shrink: 0;
    background: var(--border);
    align-self: stretch;
  }
  .mkts-group-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 4px;
  }
  .mkts-reset-btn {
    font-size: 10px;
    padding: 2px 8px;
    background: var(--surface3);
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: 4px;
    cursor: pointer;
    line-height: 1.6;
  }
  .mkts-stats-strip {
    display: flex;
    gap: 12px;
    padding: 8px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
  }
  .mkts-stats-strip .mkts-stat {
    flex: 1;
    min-width: 0;
    text-align: center;
  }
  .mkts-stat-label {
    font-size: 9px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 2px;
  }
  .mkts-stat-val {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
  }
  .mkts-stat-sub {
    font-size: 10px;
    color: var(--muted);
    margin-top: 1px;
  }
  /* Scrollable table wrapper + custom thumb */
  .mkts-table-wrap {
    position: relative;
  }
  .mkts-table-wrap .mkts-table-scroll {
    overflow-y: auto;
    scrollbar-width: none;
  }
  .mkts-table-wrap .mkts-table-scroll::-webkit-scrollbar { display: none; }
  .mkts-table-wrap .data-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
  }
  .mkts-table-wrap .data-table thead th {
    background: var(--surface);
  }
  .mkts-scroll-track {
    position: absolute;
    right: 6px;
    top: 40px;
    bottom: 8px;
    width: 4px;
    border-radius: 2px;
    background: var(--surface3);
    opacity: 0;
    transition: opacity .25s;
    pointer-events: none;
    z-index: 2;
  }
  .mkts-table-wrap:hover .mkts-scroll-track,
  .mkts-table-wrap.mkts-scrolling .mkts-scroll-track { opacity: 1; }
  .mkts-scroll-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border-radius: 2px;
    background: var(--muted);
    opacity: .5;
    min-height: 18px;
    cursor: pointer;
    pointer-events: auto;
    transition: opacity .15s;
  }
  .mkts-scroll-thumb:hover,
  .mkts-scroll-thumb.active { opacity: .85; }
  .mkts-row-sep {
    border: none;
    border-top: 1.5px solid var(--border);
    margin: 8px 0 28px;
  }

  /* ── Wide-screen: larger sidebar text + wider sidebar ── */
  @media (min-width: 1600px) {
    .sidebar { width: 240px; }
    .main { margin-left: 240px; }
    .nav-item { font-size: var(--fs-body); }
    .nav-section { font-size: calc(var(--fs-xs) + 1px); }
    .nav-section.nav-section-sm { font-size: calc(var(--fs-xxs) + 1px); }
  }

  @media (max-width: 1100px) {
    .mkts-row { flex-direction: column; gap: 28px; }
    .mkts-col { padding: 0 !important; }
    .mkts-divider { width: 100%; height: 1.5px; }
  }

  /* ── iPad / Tablet responsive (portrait + landscape) ── */
  .sidebar-hamburger {
    display: none;
    position: fixed;
    top: 14px; left: 14px;
    z-index: 25;
    width: 36px; height: 36px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 20px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
  }
  .sidebar-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 8;
    -webkit-tap-highlight-color: transparent;
  }
  .sidebar-overlay.open { display: block; }

  @media (max-width: 1024px) {
    .sidebar-hamburger { display: flex; }
    .sidebar {
      transform: translateX(-100%);
      transition: transform .25s ease;
      z-index: 20;
    }
    .sidebar.open { transform: translateX(0); }
    .main { margin-left: 0; }
    .topbar { padding: 0 16px 0 60px; }
    .page { padding: 20px 16px !important; }
    .stats-strip { flex-wrap: wrap; gap: 8px; }
    .stats-strip .stat-card { min-width: 140px; flex: 1 1 140px; }
    .section-header { flex-wrap: wrap; gap: 8px; }
    #posGroupByBtns { flex-wrap: wrap; }
    .table-wrap { -webkit-overflow-scrolling: touch; }
    .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* Nav groups expand inline on tablet instead of flyout popups */
    .nav-group-popup { display: none !important; }
    .nav-group-toggle::after { content: '▸'; transition: transform .15s; }
    .nav-group.expanded .nav-group-toggle::after { content: '▾'; }
    .nav-group.expanded .nav-item {
      display: flex !important;
      padding-left: 36px;
      font-size: 12px;
    }
  }

  @media (max-width: 768px) {
    .topbar { height: 50px; padding: 0 12px 0 54px; }
    .topbar .search-bar { max-width: 180px; }
    .page { padding: 16px 12px !important; }
    .stats-strip .stat-card { min-width: 100%; }
    .stat-value { font-size: 22px !important; }
    .section-title { font-size: 14px; }
    .kpi-grid { grid-template-columns: 1fr !important; }
    .coverage-summary-grid { grid-template-columns: 1fr !important; }
    .fh-grid { grid-template-columns: 1fr !important; }
    .thesis-scenarios { grid-template-columns: 1fr !important; }
    .thesis-lists { grid-template-columns: 1fr !important; }
  }

  /* ── Calendar ── */
  .calendar-list { display: flex; flex-direction: column; gap: 8px; }
  .cal-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: border-color 0.15s;
  }
  .cal-item:hover { border-color: var(--accent); }
  .cal-date {
    font-family: var(--font-data);
    font-size: 12px;
    color: var(--muted);
    width: 90px;
    flex-shrink: 0;
  }
  .cal-ticker {
    font-family: var(--font-data);
    font-size: 13px;
    font-weight: 500;
    color: var(--accent);
    width: 60px;
    flex-shrink: 0;
  }
  .cal-name { font-size: 13px; color: var(--text); flex: 1; }
  .cal-quarter {
    font-family: var(--font-data);
    font-size: 11px;
    color: var(--muted);
  }
  .cal-impact {
    font-family: var(--font-data);
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .cal-impact-high   { background: rgba(180,100,100,0.25); color: #d4a0a0; }
  .cal-impact-medium { background: rgba(180,160,100,0.25); color: #d4c89e; }
  /* ── Sentiment bar ── */
  .sentiment-bar-wrap { display: flex; align-items: center; gap: 10px; }
  .sentiment-bar {
    flex: 1;
    height: 4px;
    background: var(--surface3);
    border-radius: 2px;
    overflow: hidden;
  }
  .sentiment-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.5s ease;
  }
  .sentiment-val {
    font-family: var(--font-data);
    font-size: 11px;
    width: 36px;
    text-align: right;
  }

  /* ── Empty state ── */
  .empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--muted);
  }
  .empty-icon { font-size: 36px; margin-bottom: 12px; opacity: 0.4; }
  .empty-text { font-size: var(--fs-body); color: var(--slate); }

  /* ── Loading ── */
  .loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
    color: var(--muted);
    font-size: var(--fs-body);
    gap: 12px;
  }
  .spinner {
    width: 18px; height: 18px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* ── Skeleton loading states ── */
  @keyframes shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
  }
  .skeleton {
    background: linear-gradient(90deg, var(--surface) 25%, var(--surface3) 50%, var(--surface) 75%);
    background-size: 800px 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
  }
  .skeleton-text {
    height: 12px;
    margin-bottom: 10px;
    border-radius: 4px;
  }
  .skeleton-text.w-60 { width: 60%; }
  .skeleton-text.w-80 { width: 80%; }
  .skeleton-text.w-40 { width: 40%; }
  .skeleton-chart {
    height: 200px;
    border-radius: 8px;
    margin-bottom: 16px;
  }
  .skeleton-row {
    display: flex;
    gap: 16px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
  }
  .skeleton-row .skeleton-cell {
    height: 14px;
    border-radius: 3px;
    flex: 1;
  }
  .skeleton-row .skeleton-cell:first-child { max-width: 80px; }
  .skeleton-table {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
  }
  .skeleton-table .skeleton-header {
    display: flex;
    gap: 16px;
    padding: 10px 12px;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
  }
  .skeleton-table .skeleton-header .skeleton-cell {
    height: 10px;
    border-radius: 3px;
    flex: 1;
    opacity: 0.5;
  }
  .skeleton-kpi-strip {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
  }
  .skeleton-kpi {
    flex: 1;
    padding: 18px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
  }
  .skeleton-kpi .skeleton-label { height: 8px; width: 50%; margin-bottom: 12px; }
  .skeleton-kpi .skeleton-value { height: 20px; width: 40%; }

  /* Fade-in when data replaces skeleton */
  .skel-fade-in {
    animation: skelFadeIn 0.3s ease forwards;
  }
  @keyframes skelFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ── Config panel ── */
  .config-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 28px 32px;
    max-width: 560px;
  }
  .config-title {
    font-size: var(--fs-md);
    font-weight: 700;
    margin-bottom: 6px;
  }
  .config-sub {
    font-size: var(--fs-sm);
    color: var(--muted);
    margin-bottom: 24px;
    line-height: 1.6;
  }
  .form-row { margin-bottom: 16px; }
  .form-label {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
  }
  .form-input {
    width: 100%;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: var(--font-data);
    font-size: var(--fs-body);
    padding: 10px 14px;
    border-radius: 6px;
    outline: none;
    transition: border-color 0.15s;
  }
  .form-input:focus { border-color: var(--accent); }
  .btn-save {
    background: var(--accent);
    color: var(--bg);
    border: none;
    font-family: var(--font-ui);
    font-size: var(--fs-body);
    font-weight: 700;
    padding: 10px 24px;
    border-radius: 6px;
    cursor: pointer;
    letter-spacing: 0.05em;
    transition: opacity 0.15s;
    margin-top: 8px;
  }
  .btn-save:hover { opacity: 0.85; }
  .btn-autopilot {
    font-size: var(--fs-xxs); padding: 2px 8px; border-radius: 4px; border: 1px solid;
    cursor: pointer; font-weight: 600; transition: opacity 0.15s;
  }
  .btn-autopilot:hover { opacity: 0.85; }
  .btn-ap-prep { background: var(--yellow-soft); color: var(--bg); border-color: var(--yellow-soft); }
  .btn-ap-process { background: var(--accent); color: var(--bg); border-color: var(--accent); }
  .btn-autopilot:disabled { opacity: 0.5; cursor: default; }
  .form-hint { font-size: 11px; color: var(--muted); margin-top: 4px; line-height: 1.7; }
  .prompt-textarea {
    width: 100%;
    min-height: 340px;
    resize: vertical;
    font-size: 12px;
    line-height: 1.6;
    font-family: var(--font-data);
    white-space: pre;
    overflow-x: auto;
  }
  .prompt-placeholder {
    display: inline-block;
    background: rgba(0,229,255,0.08);
    border: 1px solid rgba(0,229,255,0.2);
    color: var(--accent);
    font-family: var(--font-data);
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 3px;
    margin: 0 2px;
  }

  /* ── Ticker autocomplete ── */
  .ticker-autocomplete { position: relative; }
  .autocomplete-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 6px;
    max-height: 220px;
    overflow-y: auto;
    z-index: 50;
    display: none;
  }
  .autocomplete-dropdown.open { display: block; }
  .autocomplete-item {
    padding: 7px 12px;
    font-family: var(--font-data);
    font-size: 12px;
    color: var(--muted);
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
  }
  .autocomplete-item:hover,
  .autocomplete-item.focused { background: var(--surface3); color: var(--accent); }
  .autocomplete-item.clear-item { border-bottom: 1px solid var(--border); color: var(--muted); font-style: italic; }

  /* ── Ticker detail page ── */
  .ticker-page-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 28px;
  }
  .btn-back {
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 6px;
    cursor: pointer;
    letter-spacing: 0.04em;
    transition: all 0.15s;
    white-space: nowrap;
  }
  .btn-back:hover { color: var(--text); border-color: var(--text); }
  .ticker-page-identity {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
  }
  .td-ticker-badge { font-size: var(--fs-md); padding: 5px 12px; }
  .td-company-name { font-size: var(--fs-md); font-weight: 700; color: var(--text); }
  .td-sector { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; font-family: var(--font-data); }

  /* ── Condensed first-row stats strip on company page ── */
  #tdStats { gap: 10px; }
  #tdStats > .stat-card { padding: 12px 16px; }
  #tdStats .stat-label { margin-bottom: 4px; font-size: 9px; }
  #tdStats .stat-value { font-size: 18px; line-height: 1.1; }
  #tdStats .stat-sub { margin-top: 2px; font-size: 10px; }
  .price-widget {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 16px;
    text-align: center;
    min-width: 120px;
    transition: border-color 0.15s;
  }
  .price-widget:hover { border-color: var(--accent); }
  .price-widget-label { font-size: var(--fs-xxs); color: var(--muted); font-family: var(--font-ui); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 3px; }
  .price-widget-price { font-size: var(--fs-lg); font-weight: 700; font-family: var(--font-data); color: var(--text); line-height: 1.1; }
  .price-widget-52wk  { font-size: var(--fs-xs); font-weight: 700; font-family: var(--font-data); margin-top: 4px; }
  .price-widget .stat-red   { color: var(--red-soft); }
  .price-widget .stat-green { color: var(--green-soft); }
  .td-narrative-section {
    margin-top: 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 24px 28px;
  }
  .td-headline { font-size: var(--fs-lg); font-weight: 700; color: var(--text); margin-bottom: 16px; line-height: 1.4; }

  /* ── News filter bar ── */
  .news-filter-bar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .news-filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .news-filter-label {
    font-size: var(--fs-xxs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    white-space: nowrap;
    min-width: 76px;
    flex-shrink: 0;
  }
  .news-chip-scroll {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .news-chip-scroll::-webkit-scrollbar { display: none; }
  .news-filter-chip {
    font-family: var(--font-data);
    font-size: var(--fs-xs);
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid var(--border);
    color: var(--muted);
    background: var(--surface2);
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.12s;
    user-select: none;
  }
  .news-filter-chip .chip-count {
    font-size: var(--fs-xxs);
    opacity: 0.7;
    margin-left: 3px;
  }
  .news-filter-chip:hover { border-color: var(--accent); color: var(--accent); }
  .news-filter-chip.active { background: var(--accent); color: var(--bg); border-color: var(--accent); }
  .news-filter-chip.active .chip-count { opacity: 0.8; }
  .news-filter-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2px;
  }

  /* ── News pagination ── */
  .news-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 20px 0 4px;
    border-top: 1px solid var(--border);
    margin-top: 4px;
  }
  .news-page-btn {
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 0.03em;
  }
  .news-page-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
  .news-page-btn:disabled { opacity: 0.35; cursor: default; }
  .news-page-label {
    font-family: var(--font-data);
    font-size: 12px;
    color: var(--muted);
    min-width: 90px;
    text-align: center;
  }

  /* ── News ── */
  .news-item {
    display: block;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
  }
  .news-item:last-child { border-bottom: none; }
  .news-item:hover .news-title { color: var(--accent); }
  .news-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 2px;
  }
  .news-date {
    font-family: var(--font-data);
    font-size: var(--fs-xs);
    color: var(--slate);
    white-space: nowrap;
  }
  .news-publisher {
    font-size: var(--fs-xxs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--slate);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 128px;
  }
  .news-title {
    font-size: var(--fs-body);
    color: var(--slate);
    line-height: 1.5;
    text-decoration: none;
    transition: color 0.12s;
    display: block;
  }
  .news-teaser {
    font-size: var(--fs-xs);
    color: var(--muted);
    line-height: 1.5;
    margin-top: 4px;
  }
  .news-tickers {
    display: contents; /* let chips flow into the parent flex row */
  }
  .news-ticker-chip {
    font-family: var(--font-data);
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid var(--border);
    color: var(--accent);
    background: var(--surface2);
    transition: background 0.12s, border-color 0.12s;
    white-space: nowrap;
  }
  .news-ticker-chip:hover,
  .news-ticker-chip.active { background: var(--accent); color: var(--bg); border-color: var(--accent); }
  /* Compact widget on company page */
  .td-news-widget { margin-top: 28px; }
  .td-news-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
  }
  .btn-news-all {
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 6px;
    cursor: pointer;
    letter-spacing: 0.04em;
    transition: all 0.15s;
  }
  .btn-news-all:hover { color: var(--text); border-color: var(--text); }
  .news-widget-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
  }
  .news-widget-item:last-child { border-bottom: none; }
  .news-widget-item:hover .news-title { color: var(--accent); }
  .news-widget-item .news-title { font-size: var(--fs-md); }
  .news-widget-meta { display: flex; gap: 10px; align-items: center; }
  /* News panel */
  .news-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 200;
  }
  .news-panel {
    display: none;
    position: fixed;
    top: 0; right: 0;
    width: 600px;
    max-width: 95vw;
    height: 100vh;
    background: var(--surface);
    border-left: 1px solid var(--border);
    z-index: 201;
    overflow-y: auto;
    padding: 28px 28px 40px;
    box-sizing: border-box;
    transform: translateX(100%);
    transition: transform 0.25s ease;
  }
  .news-backdrop.open { display: block; }
  .news-panel.open { display: block; transform: translateX(0); }
  .news-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .news-panel-title { font-size: 16px; font-weight: 700; color: var(--text); }
  .news-panel-sub { font-size: 11px; color: var(--muted); font-family: var(--font-data); margin-top: 4px; }
  .news-panel-item {
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
  }
  .news-panel-item:last-child { border-bottom: none; }
  .news-panel-item:hover .news-title { color: var(--accent); }

  /* ── Radar Drill-down Panel ── */
  /* AI Resilience popup modal */
  .aires-modal-backdrop {
    display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.5); z-index: 310; justify-content: center; align-items: center;
  }
  .aires-modal-backdrop.open { display: flex; }
  .aires-modal {
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    width: 780px; max-width: 94vw; max-height: 85vh; overflow-y: auto;
    padding: 28px; box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  }
  .aires-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border);
  }
  .aires-modal-close {
    background: none; border: none; color: var(--muted); font-size: 20px;
    cursor: pointer; padding: 4px 8px; border-radius: 4px;
  }
  .aires-modal-close:hover { color: var(--text); background: var(--surface2); }

  /* AI Resilience Evolution side panel */
  .aires-evo-panel {
    display: none; position: fixed; top: 0; right: 0; width: 480px; max-width: 96vw;
    height: 100vh; background: var(--surface); border-left: 1px solid var(--border);
    z-index: 320; overflow-y: auto; padding: 24px; box-shadow: -8px 0 32px rgba(0,0,0,0.4);
    transform: translateX(100%); transition: transform 0.25s ease;
  }
  .aires-evo-panel.open { display: block; transform: translateX(0); }
  .aires-evo-backdrop {
    display: none; position: fixed; inset: 0; z-index: 315; background: rgba(0,0,0,0.35);
  }
  .aires-evo-backdrop.open { display: block; }

  /* Technicals side panel */
  .tech-panel {
    display: none; position: fixed; top: 0; right: 0; width: 480px; max-width: 96vw;
    height: 100vh; background: var(--surface); border-left: 1px solid var(--border);
    z-index: 320; overflow-y: auto; padding: 24px; box-shadow: -8px 0 32px rgba(0,0,0,0.4);
    transform: translateX(100%); transition: transform 0.25s ease;
  }
  .tech-panel.open { display: block; transform: translateX(0); }
  .tech-panel-backdrop {
    display: none; position: fixed; inset: 0; z-index: 315; background: rgba(0,0,0,0.35);
  }
  .tech-panel-backdrop.open { display: block; }

  /* Financial Health trend modal */
  .fh-trend-backdrop {
    display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
    z-index: 310; justify-content: center; align-items: center;
  }
  .fh-trend-backdrop.open { display: flex; }
  .fh-trend-modal {
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
    width: 720px; max-width: 94vw; max-height: 88vh; overflow-y: auto;
    padding: 28px 32px; box-shadow: 0 16px 48px rgba(0,0,0,0.55);
    animation: slideUp 0.2s ease;
  }
  .fh-trend-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border);
  }
  .fh-trend-title { font-size: 16px; font-weight: 600; color: var(--text); }
  .fh-trend-close {
    background: var(--surface3); border: 1px solid var(--border); color: var(--muted);
    width: 32px; height: 32px; border-radius: 6px; cursor: pointer;
    font-size: 16px; display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
  }
  .fh-trend-close:hover { color: var(--text); border-color: var(--text); }

  /* Ranked strips magnifier */
  .strip-row-mag {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border-radius: 4px; padding: 3px 4px;
  }
  .strip-row-mag:hover {
    transform: scale(1.35); transform-origin: left center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4); background: var(--surface2);
    z-index: 5; position: relative;
  }

  .radar-backdrop {
    display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.4); z-index: 300;
  }
  .radar-backdrop.open { display: block; }
  .radar-panel {
    display: none; position: fixed; top: 0; right: 0;
    width: 480px; max-width: 95vw; height: 100vh;
    background: var(--surface); border-left: 1px solid var(--border);
    z-index: 301; overflow-y: auto; padding: 24px 24px 40px;
    box-sizing: border-box; transform: translateX(100%);
    transition: transform 0.25s ease;
  }
  .radar-panel.open { display: block; transform: translateX(0); }
  .radar-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border);
  }
  .radar-ticker { font-size: 20px; font-weight: 700; color: var(--text); font-family: var(--font-ui); }
  .radar-name { font-size: 12px; color: var(--muted); margin-top: 2px; }
  .radar-score-ring {
    width: 56px; height: 56px; border-radius: 50%; border: 3px solid;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .radar-score-val { font-size: 20px; font-weight: 700; font-family: var(--font-data); }
  .radar-dim {
    margin-bottom: 16px; padding: 14px; background: var(--surface2);
    border-radius: 8px; border: 1px solid var(--border);
  }
  .radar-dim-header {
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer; user-select: none;
  }
  .radar-dim-title {
    font-size: 13px; font-weight: 700; color: var(--text);
    font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 0.04em;
  }
  .radar-dim-score { font-size: 16px; font-weight: 700; font-family: var(--font-data); }
  .radar-dim-bar {
    height: 5px; background: rgba(100,100,110,0.2); border-radius: 3px;
    margin-top: 8px; overflow: hidden;
  }
  .radar-dim-bar-fill { height: 100%; border-radius: 3px; transition: width 0.3s ease; }
  .radar-dim-detail {
    margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
    font-size: 11px; font-family: var(--font-data); color: var(--muted);
  }
  .radar-dim-detail .comp-row {
    display: flex; justify-content: space-between; padding: 3px 0;
  }
  .radar-dim-detail .comp-row .comp-val { color: var(--text); font-weight: 600; }
  .radar-ai-commentary {
    margin-top: 8px; padding: 8px 10px; background: rgba(102,187,154,0.06);
    border-left: 3px solid var(--sage); border-radius: 0 6px 6px 0;
    font-size: 12px; line-height: 1.6; color: var(--text);
  }
  .radar-ai-commentary.loading { color: var(--muted); font-style: italic; }
  .radar-section-title {
    font-size: 11px; font-weight: 700; color: var(--muted); font-family: var(--font-ui);
    text-transform: uppercase; letter-spacing: 0.06em; margin: 20px 0 10px;
  }

  /* ── Private AI deep-dive panel ── */
  .pvtai-panel {
    position: fixed; top: 0; right: -500px; width: 480px; max-width: 95vw;
    height: 100vh; background: var(--surface); border-left: 1px solid var(--border);
    z-index: 9999; overflow-y: auto; padding: 0;
    transition: right 0.25s ease; box-shadow: -4px 0 24px rgba(0,0,0,0.3);
    display: flex; flex-direction: column;
  }
  .pvtai-panel.open { right: 0; }
  .pvtai-panel-header { padding: 20px 24px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
  .pvtai-panel-body { flex: 1; overflow-y: auto; padding: 18px 24px 40px; }
  .pvtai-panel-close {
    background: none; border: 1px solid var(--border); color: var(--muted);
    border-radius: 6px; padding: 5px 11px; cursor: pointer; font-size: 14px;
  }
  .pvtai-panel-close:hover { background: var(--surface2); color: var(--text); }
  .pvtai-ipo-ring {
    width: 64px; height: 64px; border-radius: 50%; border: 3px solid;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    flex-direction: column;
  }
  .pvtai-section-title {
    font-size: 11px; font-weight: 700; color: var(--muted); font-family: var(--font-ui);
    text-transform: uppercase; letter-spacing: 0.06em; margin: 20px 0 10px;
  }
  .pvtai-ai-deepdive {
    padding: 12px 14px; background: rgba(102,187,154,0.06);
    border-left: 3px solid var(--sage); border-radius: 0 6px 6px 0;
    font-size: 12px; line-height: 1.7; color: var(--text);
  }
  .pvtai-ai-deepdive.loading { color: var(--muted); font-style: italic; }

  /* ── Reddit button ── */
  .btn-reddit {
    margin-left: auto;
    background: rgba(255,69,0,0.15);
    border: 1px solid rgba(255,69,0,0.25);
    color: var(--muted);
    font-family: var(--font-ui);
    font-size: 9px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    letter-spacing: 0.04em;
    white-space: nowrap;
    transition: opacity 0.15s;
    flex-shrink: 0;
  }
  .btn-reddit:hover { opacity: 0.85; }

  /* ── Metrics chart panel ── */
  .metrics-backdrop {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.5); z-index: 200;
  }
  .metrics-panel {
    display: none; position: fixed; top: 0; right: 0;
    width: 680px; max-width: min(680px, 95vw); height: 100vh; z-index: 201;
    background: var(--surface); border-left: 1px solid var(--border);
    transform: translateX(100%); transition: transform 0.25s ease;
    display: flex; flex-direction: column;
  }
  .metrics-backdrop.open { display: block; }
  .metrics-panel.open { display: flex; transform: translateX(0); }
  .metrics-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px; border-bottom: 1px solid var(--border); flex-shrink: 0;
  }
  .metrics-panel-title { font-size: 15px; font-weight: 700; color: var(--text); }
  .metrics-close {
    background: none; border: none; color: var(--muted); font-size: 18px;
    cursor: pointer; line-height: 1; padding: 4px;
  }
  .metrics-close:hover { color: var(--text); }
  .metrics-panel-body { flex: 1; overflow-y: auto; padding: 24px; }
  .metrics-stat-row {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 28px;
  }
  .metrics-stat {
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: 8px; padding: 14px 16px;
  }
  .metrics-stat-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
  .metrics-stat-value { font-family: var(--font-data); font-size: 22px; font-weight: 700; color: var(--text); }
  .btn-expand {
    float: right; background: none; border: 1px solid var(--border);
    color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; padding: 4px 10px; border-radius: 5px;
    cursor: pointer; transition: all 0.15s; margin-top: -2px;
  }
  .btn-expand:hover { color: var(--accent); border-color: var(--accent); }

  /* ── Reddit overlay ── */
  .reddit-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 200;
  }
  .reddit-panel {
    display: none;
    position: fixed;
    top: 0; right: 0;
    width: 520px;
    max-width: 95vw;
    height: 100vh;
    background: var(--surface);
    border-left: 1px solid var(--border);
    z-index: 201;
    overflow-y: auto;
    padding: 28px 28px 40px;
    box-sizing: border-box;
    transform: translateX(100%);
    transition: transform 0.25s ease;
  }
  .reddit-backdrop.open { display: block; }
  .reddit-panel.open { display: block; transform: translateX(0); }

  /* ── Analyst Ratings Panel ── */
  .ratings-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 200;
  }
  .ratings-panel {
    display: none;
    position: fixed;
    top: 0; right: 0;
    width: 480px;
    max-width: 95vw;
    height: 100vh;
    background: var(--surface);
    border-left: 1px solid var(--border);
    z-index: 201;
    overflow-y: auto;
    padding: 28px 28px 40px;
    box-sizing: border-box;
    transform: translateX(100%);
    transition: transform 0.25s ease;
  }
  .ratings-backdrop.open { display: block; }
  .ratings-panel.open { display: block; transform: translateX(0); }

  .ratings-bar-container {
    display: flex;
    height: 28px;
    border-radius: 6px;
    overflow: hidden;
    margin: 12px 0 8px;
  }
  .ratings-bar-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--bg);
    min-width: 0;
    transition: flex 0.3s ease;
  }
  .ratings-legend {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-secondary);
  }
  .ratings-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .ratings-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
  }
  .ratings-consensus-badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
  }
  .ratings-target-range {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0;
    font-size: 13px;
  }
  .ratings-target-bar {
    flex: 1;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    position: relative;
  }
  .ratings-target-marker {
    position: absolute;
    top: -5px;
    width: 3px;
    height: 16px;
    border-radius: 2px;
    transform: translateX(-50%);
  }
  .consensus-card-clickable {
    cursor: pointer;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
  }
  .consensus-card-clickable:hover {
    box-shadow: 0 0 0 1px var(--accent);
    border-color: var(--accent);
  }

  /* ── Earnings Event Panel ── */
  .earnings-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 200;
  }
  .earnings-panel {
    display: none;
    position: fixed;
    top: 0; right: 0;
    width: 50vw;
    min-width: 600px;
    max-width: 95vw;
    height: 100vh;
    background: var(--surface);
    border-left: 1px solid var(--border);
    z-index: 201;
    overflow-y: auto;
    padding: 28px 32px 48px;
    box-sizing: border-box;
    transform: translateX(100%);
    transition: transform 0.25s ease;
  }
  .earnings-backdrop.open { display: block; }
  .earnings-panel.open { display: block; transform: translateX(0); }
  .earnings-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
  }
  .earnings-panel-identity { display: flex; align-items: center; gap: 12px; }
  .ep-ticker { font-size: 15px; }
  .ep-company { font-size: 15px; font-weight: 700; color: var(--text); }
  .ep-meta { font-size: 12px; color: var(--muted); margin-top: 3px; font-family: var(--font-data); }
  .ep-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

  .reddit-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 24px;
  }
  .reddit-panel-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.03em;
  }
  .reddit-panel-sub {
    font-size: 11px;
    color: var(--muted);
    font-family: var(--font-data);
    margin-top: 4px;
  }
  .reddit-close {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    flex-shrink: 0;
  }
  .reddit-close:hover { color: var(--text); }
  .rd-score-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
  }
  .rd-score-badge {
    font-size: 36px;
    font-weight: 800;
    font-family: var(--font-data);
    line-height: 1;
  }
  .rd-score-badge.bullish  { color: var(--green-soft); }
  .rd-score-badge.bearish  { color: var(--red-soft); }
  .rd-score-badge.neutral  { color: var(--muted); }
  .rd-score-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 4px;
  }
  .rd-score-label.bullish  { color: var(--green-soft); }
  .rd-score-label.bearish  { color: var(--red-soft); }
  .rd-score-label.neutral  { color: var(--muted); }
  .rd-post-stats {
    display: flex;
    gap: 16px;
    font-size: 11px;
    font-family: var(--font-data);
    color: var(--muted);
    margin-bottom: 20px;
  }
  .rd-post-stats span { display: flex; flex-direction: column; gap: 2px; }
  .rd-post-stats strong { font-size: 15px; font-weight: 700; color: var(--text); }
  .rd-chart-wrap {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
  }
  .rd-chart-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--muted);
    margin-bottom: 12px;
  }
  .rd-chart-canvas-wrap { height: 140px; }
  .rd-themes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
  }
  .rd-theme-chip {
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 20px;
    font-family: var(--font-data);
  }
  .rd-theme-history { margin-top: 16px; margin-bottom: 20px; }
  .rd-theme-history-title {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--heading); margin-bottom: 8px;
  }
  .rd-theme-history table {
    width: 100%; border-collapse: collapse; font-family: var(--font-data); font-size: 10px;
  }
  .rd-theme-history th {
    text-align: left; padding: 4px 8px; color: var(--muted); font-size: 9px;
    text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border);
  }
  .rd-theme-history td { padding: 5px 8px; border-bottom: 1px solid var(--border); color: var(--text); }
  .rd-theme-history tr:last-child td { border-bottom: none; }
  .rd-theme-active-dot {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--green); margin-right: 4px; vertical-align: middle;
  }
  /* Trending themes (overview) */
  .trending-themes-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    padding: 20px 24px; margin-bottom: 20px;
  }
  .trending-themes-title {
    font-size: 13px; font-weight: 700; color: var(--heading); margin-bottom: 12px;
    text-transform: uppercase; letter-spacing: 0.5px;
  }
  .trending-theme-row {
    display: flex; align-items: center; gap: 10px; padding: 6px 0;
    border-bottom: 1px solid var(--border);
  }
  .trending-theme-row:last-child { border-bottom: none; }
  .trending-theme-name {
    font-family: var(--font-data); font-size: 12px; color: var(--text);
    min-width: 160px; flex-shrink: 0;
  }
  .trending-theme-tickers { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
  .trending-theme-ticker {
    background: var(--surface2); border: 1px solid var(--border); border-radius: 4px;
    font-family: var(--font-data); font-size: 9px; padding: 2px 6px; color: var(--muted);
  }
  .trending-theme-count {
    font-family: var(--font-data); font-size: 10px; color: var(--muted);
    min-width: 40px; text-align: right;
  }
  .trending-theme-date {
    font-family: var(--font-data); font-size: 10px; color: var(--muted);
    min-width: 70px; text-align: right;
  }
  .trending-theme-sources { display: flex; gap: 3px; align-items: center; min-width: 50px; }
  .source-dot {
    width: 7px; height: 7px; border-radius: 50%; display: inline-block;
  }
  .source-dot.reddit   { background: var(--green-soft); }
  .source-dot.earnings { background: #5b9bd5; }
  .source-dot.news     { background: #e6a23c; }
  .source-dot.file     { background: #b07cdb; }
  .source-dot.research { background: #d17b82; }
  .source-dot.user     { background: var(--sage); }
  /* Theme category badges */
  .theme-cat {
    font-size: 9px; padding: 2px 6px; border-radius: 3px;
    font-family: var(--font-data); color: #fff; display: inline-block;
    text-transform: uppercase; letter-spacing: 0.3px; line-height: 1.4;
  }
  .theme-cat.financial   { background: #5b9bd5; }
  .theme-cat.operational { background: #66bb9a; }
  .theme-cat.macro       { background: #e6a23c; }
  .theme-cat.industry    { background: #b07cdb; }
  .theme-cat.competitive { background: #d17b82; }
  .theme-cat.regulatory  { background: #8b8b9a; }
  /* Theme category filter chips */
  .theme-filter-bar {
    display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px;
  }
  .theme-filter-chip {
    font-size: 10px; padding: 3px 10px; border-radius: 12px;
    font-family: var(--font-data); cursor: pointer; border: 1px solid var(--border);
    background: var(--surface2); color: var(--muted); transition: all 0.15s;
    text-transform: capitalize;
  }
  .theme-filter-chip.active {
    border-color: var(--heading); color: var(--text); background: var(--surface3);
  }
  .theme-filter-chip:hover { border-color: var(--heading); }
  /* User theme input */
  .theme-add-row {
    display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap;
  }
  .theme-add-row input, .theme-add-row select {
    background: var(--surface2); border: 1px solid var(--border); color: var(--text);
    border-radius: 6px; padding: 5px 10px; font-family: var(--font-data); font-size: 11px;
  }
  .theme-add-row input { flex: 1; min-width: 120px; }
  .theme-add-btn {
    background: var(--heading); color: #fff; border: none; border-radius: 6px;
    padding: 5px 14px; font-size: 11px; cursor: pointer; font-family: var(--font-ui);
  }
  .theme-add-btn:hover { opacity: 0.85; }
  .theme-del-btn {
    background: none; border: none; color: var(--red-soft); cursor: pointer;
    font-size: 12px; padding: 2px 6px; border-radius: 4px;
  }
  .theme-del-btn:hover { background: rgba(192,128,128,0.15); }
  /* Peer group intelligence */
  .pg-member-chip {
    background: var(--surface2); border: 1px solid var(--border); border-radius: 4px;
    font-family: var(--font-data); font-size: 10px; padding: 3px 8px; color: var(--text);
    cursor: pointer; transition: border-color 0.15s;
  }
  .pg-member-chip:hover { border-color: var(--heading); }
  .pg-ticker-chip {
    background: var(--surface2); border: 1px solid var(--border); border-radius: 3px;
    font-family: var(--font-data); font-size: 9px; padding: 1px 5px; color: var(--heading);
    cursor: pointer; transition: border-color 0.15s; display: inline-block;
  }
  .pg-ticker-chip:hover { border-color: var(--heading); color: var(--text); }

  .rd-summary-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-bottom: 10px;
  }
  .rd-summary-text {
    font-size: 13px;
    color: var(--text);
    line-height: 1.65;
  }
  .rd-stale { font-size: 11px; color: #f59e0b; margin-top: 16px; font-family: var(--font-data); }
  .rd-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
  }
  .rd-empty code {
    display: block;
    margin-top: 12px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 14px;
    font-family: var(--font-data);
    font-size: 12px;
    color: var(--accent);
  }

  /* scrollbar */
  ::-webkit-scrollbar { width: 6px; }
  ::-webkit-scrollbar-track { background: var(--surface); }
  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--muted); }

  /* ── Daily Recap ── */
  .recap-section      { max-width:1100px; margin:0 auto; padding:20px 24px; }
  .recap-day-group    { margin-bottom:32px; }
  .recap-day-header   { font-size:18px; font-weight:600; margin-bottom:12px;
                        display:flex; align-items:center; gap:10px; }
  .recap-weekly-badge { background:rgba(124,58,237,0.25); color:var(--accent2); font-size:11px;
                        padding:2px 8px; border-radius:10px; }
  .recap-card         { background:var(--surface); border:1px solid var(--border);
                        border-radius:12px; padding:20px; margin-bottom:16px; }
  .recap-card-title   { font-size:13px; font-weight:600; color:var(--muted);
                        text-transform:uppercase; letter-spacing:.05em; margin-bottom:16px; }
  .recap-movers-grid  { display:grid; grid-template-columns:1fr 1fr; gap:16px;
                        margin-bottom:16px; }
  .recap-movers-label { font-size:11px; font-weight:600; color:var(--muted);
                        text-transform:uppercase; margin-bottom:8px; }
  .recap-mover-row    { display:flex; align-items:center; gap:8px;
                        padding:5px 0; border-bottom:1px solid var(--border); font-size:13px; }
  .recap-mover-row:last-child { border-bottom:none; }
  .recap-events       { background:var(--surface2); border-radius:8px; padding:12px 14px;
                        margin-bottom:14px; font-size:13px; }
  .recap-narrative    { font-size:13px; line-height:1.65; color:var(--text); }
  .recap-narrative p  { margin:0 0 8px; }
  .recap-date-nav     { display:flex; gap:8px; margin-bottom:20px; align-items:center; }
  .recap-date-btn     { padding:5px 14px; border-radius:16px; border:1px solid var(--border);
                        background:var(--surface); font-size:12px; cursor:pointer;
                        color:var(--text); font-family:var(--font-ui); white-space:nowrap; }
  .recap-date-btn.active { background:var(--accent); color:#000; border-color:var(--accent); }
  .recap-older-wrap   { margin-left:auto; position:relative; }
  .recap-older-btn    { padding:5px 14px; border-radius:16px; border:1px solid var(--border);
                        background:var(--surface); font-size:12px; cursor:pointer;
                        color:var(--muted); font-family:var(--font-ui); white-space:nowrap; }
  .recap-older-btn:hover { color:var(--text); border-color:var(--text); }
  .recap-older-btn.active { color:var(--accent); border-color:var(--accent); }
  .recap-older-dropdown { position:absolute; right:0; top:calc(100% + 6px); min-width:180px;
                          background:var(--surface2); border:1px solid var(--border);
                          border-radius:10px; padding:8px 0; z-index:50;
                          box-shadow:0 8px 24px rgba(0,0,0,.4); display:none; }
  .recap-older-dropdown.open { display:block; }
  .recap-older-week   { padding:4px 14px 2px; font-size:10px; font-weight:600;
                        text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
  .recap-older-day    { display:block; width:100%; text-align:left; padding:6px 14px;
                        background:none; border:none; color:var(--text); font-size:13px;
                        font-family:var(--font-ui); cursor:pointer; }
  .recap-older-day:hover { background:var(--surface3); color:var(--accent); }
  .recap-pct-pos { color:var(--green-soft); background:rgba(102,187,154,.12); border-radius:6px;
                   padding:2px 7px; font-family:var(--font-data); }
  .recap-pct-neg { color:var(--red-soft); background:rgba(192,128,128,.12); border-radius:6px;
                   padding:2px 7px; font-family:var(--font-data); }

  /* ── Peer Comparison Metrics Table ── */
  .metric-label { white-space:nowrap; }

  /* ── Search Bar ── */
  .search-wrapper { position:relative; width:200px; transition:width .2s; }
  .search-wrapper:focus-within { width:260px; }
  .search-icon { position:absolute; left:10px; top:50%; transform:translateY(-50%); font-size:14px; color:var(--muted); pointer-events:none; }
  .search-input { width:100%; height:32px; padding:0 10px 0 30px; font-size:13px; font-family:var(--font-data);
                  background:var(--surface); border:1px solid var(--border); border-radius:6px;
                  color:var(--text); outline:none; }
  .search-input:focus { border-color:var(--accent); }
  .search-input::placeholder { color:var(--muted); }
  .search-results { position:absolute; top:36px; left:0; right:0; max-height:300px; overflow-y:auto;
                    background:var(--surface2); border:1px solid var(--border); border-radius:6px;
                    z-index:100; display:none; box-shadow:0 8px 24px rgba(0,0,0,.4); }
  .search-results.open { display:block; }
  .search-result { padding:8px 12px; cursor:pointer; display:flex; align-items:center; gap:8px; }
  .search-result:hover, .search-result.focused { background:var(--surface3); }
  .search-result-ticker { font-family:var(--font-data); font-weight:600; color:var(--accent); font-size:13px; min-width:50px; }
  .search-result-name { font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cmd-result-page { font-size:11px; color:var(--muted); min-width:90px; }
  .cmd-result-label { font-size:13px; color:var(--accent); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cmd-result.active { background:var(--surface3); }
  .cmd-kbd { font-size:10px; color:var(--muted); margin-left:auto; font-family:var(--font-data); opacity:.5; }
  @keyframes section-highlight {
    0% { outline:2px solid var(--accent); outline-offset:4px; }
    100% { outline:2px solid transparent; outline-offset:4px; }
  }
  .section-highlight { animation:section-highlight 1.5s ease-out; }

  /* ── Expand Button ── */
  .btn-expand { padding:4px 10px; font-size:11px; font-family:var(--font-data); background:var(--surface2);
                border:1px solid var(--border); border-radius:4px; color:var(--accent); cursor:pointer; white-space:nowrap; }
  .btn-expand:hover { background:var(--surface3); }

  /* ── Coverage Page ── */
  .coverage-stats-strip { display:flex; gap:16px; margin-bottom:24px; flex-wrap:wrap; }
  .coverage-stats-strip .stat-card { flex:1; min-width:160px; }
  .coverage-summary-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:24px; }
  @media (max-width:900px) { .coverage-summary-grid { grid-template-columns:1fr; } }
  .coverage-summary-card { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:20px; }
  .coverage-summary-card h3 { font-size:15px; font-weight:600; margin:0 0 12px 0; color:var(--text); }
  .coverage-narrative { font-size:14px; color:#b0b0c0; line-height:1.6; margin-bottom:16px; white-space:pre-wrap; }
  .change-badge { display:inline-block; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:600; font-family:var(--font-data); text-transform:capitalize; }
  .change-badge.upgrade { background:rgba(102,187,154,.12); color:var(--green-soft); }
  .change-badge.downgrade { background:rgba(192,128,128,.12); color:var(--red-soft); }
  .change-badge.init { background:rgba(0,229,255,.10); color:var(--accent); }

  /* ── Ticker Notes ── */
  .notes-card { background:#2a2a2f; border:1px solid #3a3a40; border-radius:6px; padding:8px 12px; }
  .notes-input-area { display:flex; gap:6px; align-items:flex-end; }
  .notes-textarea { flex:1; min-height:20px; max-height:54px; padding:3px 8px; font-size:12px; font-family:var(--font-data);
                    background:var(--surface); border:1px solid var(--border); border-radius:4px;
                    color:var(--text); resize:none; outline:none; line-height:1.4; overflow-y:auto; }
  .notes-textarea:focus { border-color:var(--accent); }
  .notes-textarea::placeholder { color:#555; }
  .notes-save-btn { padding:3px 10px; font-size:11px; font-family:var(--font-data);
                    background:#3a3a40; color:var(--muted); border:none; border-radius:4px;
                    cursor:pointer; font-weight:500; white-space:nowrap; }
  .notes-save-btn:hover { background:#4a4a50; color:var(--text); }
  .notes-save-btn:disabled { opacity:.3; cursor:default; }
  .notes-preview { margin-top:6px; font-size:11px; color:#555; font-family:var(--font-data);
                   cursor:pointer; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
                   opacity:0; transition:opacity .15s; line-height:1.4; }
  .notes-card:hover .notes-preview { opacity:1; }
  .notes-preview:hover { color:var(--muted); }
  .notes-expanded { margin-top:8px; border-top:1px solid #3a3a40; padding-top:6px; }
  .note-entry { padding:6px 0; border-bottom:1px solid var(--border); }
  .note-entry:last-child { border-bottom:none; }
  .note-date { font-size:10px; font-family:var(--font-data); color:#555; margin-bottom:2px;
               display:flex; align-items:center; justify-content:space-between; }
  .note-text { font-size:12px; color:var(--muted); line-height:1.4; white-space:pre-wrap; }
  .note-delete { font-size:10px; color:#444; cursor:pointer; background:none; border:none; padding:1px 4px; }
  .note-delete:hover { color:var(--red); }

  /* ── Company Files ── */
  .files-card { background:#2a2a2f; border:1px solid #3a3a40; border-radius:6px; padding:8px 12px; }
  .files-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
  .files-header-label { font-size:11px; font-family:var(--font-data); color:#666; text-transform:uppercase; letter-spacing:0.5px; }
  .file-upload-btn { padding:3px 10px; font-size:11px; font-family:var(--font-data);
                     background:var(--heading); color:#fff; border:none; border-radius:4px; cursor:pointer; }
  .file-upload-btn:hover { opacity:0.85; }
  .file-row { display:flex; align-items:center; gap:8px; padding:5px 0; border-bottom:1px solid var(--border);
              font-size:12px; font-family:var(--font-data); color:var(--muted); }
  .file-row:last-child { border-bottom:none; }
  .file-icon { font-size:13px; flex-shrink:0; width:16px; text-align:center; }
  .file-name { flex:1; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .file-name:hover { color:var(--text); }
  .file-meta { font-size:10px; color:#555; flex-shrink:0; }
  .file-delete { font-size:10px; color:#444; cursor:pointer; background:none; border:none; padding:1px 4px; flex-shrink:0; }
  .file-delete:hover { color:var(--red); }
  .files-empty { font-size:11px; color:#555; font-family:var(--font-data); padding:4px 0; }

  /* ── Thesis Version History ── */
  .version-history { border-top:1px solid var(--border); margin-top:24px; padding-top:16px; }
  .version-history-title { font-size:13px; font-weight:600; color:var(--muted); font-family:var(--font-ui);
                           text-transform:uppercase; letter-spacing:0.5px; margin-bottom:10px; cursor:pointer; user-select:none; }
  .version-history-title:hover { color:var(--text); }
  .version-row { display:flex; align-items:center; gap:12px; padding:8px 12px; border-radius:6px;
                 font-size:12px; font-family:var(--font-data); color:var(--muted); cursor:pointer;
                 border-left:3px solid transparent; transition:background .15s; }
  .version-row:hover { background:rgba(255,255,255,.04); }
  .version-row.active { border-left-color:var(--sage); background:rgba(78,122,99,.08); color:var(--text); }
  .version-label { font-weight:700; min-width:32px; }
  .version-date { flex:1; }
  .version-score { font-weight:700; min-width:32px; text-align:right; }
  .version-current-badge { font-size:10px; background:var(--sage); color:#fff; padding:1px 6px; border-radius:3px;
                           text-transform:uppercase; letter-spacing:0.3px; font-weight:600; }
  .version-banner { background:rgba(78,122,99,.12); border:1px solid rgba(78,122,99,.25); border-radius:6px;
                    padding:10px 16px; margin-bottom:16px; display:flex; align-items:center; justify-content:space-between;
                    font-size:13px; font-family:var(--font-data); color:var(--heading); }
  .version-banner .btn-back-current { background:var(--heading); color:#fff; border:none; border-radius:4px;
                                      padding:5px 14px; font-size:12px; font-family:var(--font-data);
                                      cursor:pointer; font-weight:600; }
  .version-banner .btn-back-current:hover { opacity:.85; }

  /* ── Thesis Delta Badges & Panel ── */
  .delta-badge { display:inline-block; font-size:10px; font-weight:700; font-family:var(--font-data);
                 padding:1px 5px; border-radius:3px; margin-left:6px; vertical-align:middle; }
  .delta-badge.significant { background:var(--yellow-soft); color:#1a1a2e; }
  .delta-badge.minor { background:rgba(255,255,255,.08); color:var(--muted); }
  .thesis-delta-panel { background:rgba(78,122,99,.06); border:1px solid rgba(78,122,99,.2); border-radius:8px;
                        padding:14px 18px; margin-bottom:16px; font-size:13px; font-family:var(--font-data); }
  .thesis-delta-panel .delta-summary { font-style:italic; color:var(--text); margin-bottom:12px; line-height:1.5; }
  .thesis-delta-panel .delta-section { margin-bottom:10px; }
  .thesis-delta-panel .delta-section-title { font-size:11px; text-transform:uppercase; letter-spacing:.5px;
                                              color:var(--muted); font-family:var(--font-ui); margin-bottom:4px; }
  .delta-up { color:var(--green-soft); }
  .delta-down { color:var(--red-soft); }
  .delta-added { color:var(--green-soft); }
  .delta-removed { color:var(--red-soft); text-decoration:line-through; }
  .delta-arrow { font-weight:700; margin:0 4px; }

  /* ── Financial Health Page ── */
  .fh-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px; }
  @media (max-width:900px) { .fh-grid { grid-template-columns:1fr; } }
  .fh-card { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:16px; }
  .fh-card h3 { font-size:14px; font-weight:600; margin:0 0 12px 0; color:var(--text);
                text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--border); }
  .fh-metric-row { display:flex; justify-content:space-between; align-items:center;
                   padding:5px 0; border-bottom:1px solid rgba(80,80,88,.25); font-size:12px; }
  .fh-metric-row:last-child { border-bottom:none; }
  .fh-metric-label { color:var(--muted); }
  .fh-metric-value { font-family:var(--font-data); color:var(--text); font-weight:500; }
  .fh-sparkline { display:inline-block; vertical-align:middle; margin-left:6px; }
  .fh-ticker-select { background:var(--surface2); border:1px solid var(--border); border-radius:6px;
                      color:var(--text); font-size:14px; font-family:var(--font-data); padding:6px 12px;
                      outline:none; min-width:100px; letter-spacing:0.04em; font-weight:600; }
  .fh-ticker-select:focus { border-color:var(--accent); }
  .fh-quarter-tabs { display:flex; gap:4px; flex-wrap:wrap; }
  .fh-quarter-tab { padding:3px 8px; font-size:11px; font-family:var(--font-data); border-radius:4px;
                    cursor:pointer; background:var(--surface2); color:var(--muted); border:1px solid transparent; }
  .fh-quarter-tab.active { border-color:var(--accent); color:var(--accent); }
  .fh-quarter-tab:hover { color:var(--text); }
  .fh-section-header { display:flex; align-items:center; justify-content:space-between; gap:12px;
                       margin-bottom:16px; flex-wrap:wrap; }

  /* ── Peer Comparison Page ── */
  .peers-selector { display:flex; align-items:center; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
  .peers-selector select { background:var(--surface2); border:1px solid var(--border); border-radius:6px;
                           color:var(--text); font-size:13px; font-family:var(--font-data); padding:8px 12px;
                           outline:none; min-width:260px; }
  .peers-selector select:focus { border-color:var(--accent); }
  .peers-stats-strip { display:flex; gap:24px; align-items:center; padding:12px 16px; background:var(--surface2);
                       border-radius:8px; margin-bottom:20px; font-size:12px; font-family:var(--font-data);
                       color:var(--text-dim); flex-wrap:wrap; }
  .peers-stats-strip .ps-label { color:var(--muted); margin-right:4px; }
  .peers-stats-strip .ps-value { color:var(--text); font-weight:600; }
  /* alignment + functional — structural handled by .data-table */
  .peers-table th { text-align:right; }
  .peers-table th:first-child { text-align:left; }
  .peers-table td { text-align:right; }
  .peers-table td:first-child, .peers-table td:nth-child(2) { text-align:left; }
  .peers-table tbody tr.peers-highlight { background:rgba(96,165,250,0.08); border-left:3px solid var(--accent); }
  .peers-table .pct-q1 { color:var(--green-soft); } /* top quartile */
  .peers-table .pct-q2 { color:#9aaa6b; }
  .peers-table .pct-q3 { color:var(--yellow-soft); }
  .peers-table .pct-q4 { color:var(--red-soft); } /* bottom quartile */
  .peers-chart-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:24px; }
  .peers-chart-card { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:16px; }
  .peers-chart-card .chart-title { font-size:13px; margin-bottom:10px; }
  .peers-chart-card .chart-wrap { height:280px; }
  /* alignment + functional — structural handled by .data-table */
  .peers-compact-table th { text-align:right; }
  .peers-compact-table th:first-child { text-align:left; }
  .peers-compact-table td { text-align:right; }
  .peers-compact-table td:first-child { text-align:left; }
  .peers-compact-table tbody tr.peers-highlight { background:rgba(96,165,250,0.08); border-left:3px solid var(--accent); }
  .peers-view-link { display:inline-block; margin-top:10px; font-size:12px; color:var(--accent); cursor:pointer;
                     font-family:var(--font-data); }
  .peers-view-link:hover { text-decoration:underline; }
  @media (max-width:900px) { .peers-chart-grid { grid-template-columns:1fr; } }

  /* ── Thesis styles ── */
  .thesis-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
  .thesis-header .section-title { margin:0; }
  .thesis-meta { font-size:11px; color:var(--muted); font-family:var(--font-data); }
  .thesis-scorecard { display:flex; align-items:stretch; gap:20px; margin-bottom:24px; }
  .thesis-scorecard-left {
    background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:20px 28px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-width:120px;
  }
  /* Peer Ranking Widget */
  .peer-rank-bar { height:6px; border-radius:3px; background:var(--surface2); overflow:hidden; flex:1; }
  .peer-rank-bar-fill { height:100%; border-radius:3px; }
  .peer-rank-dim { display:flex; align-items:center; gap:6px; font-size:11px; }
  .peer-rank-dim-label { width:55px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.03em; font-size:9px; }
  .peer-rank-dim-val { width:28px; text-align:right; font-family:var(--font-data); font-weight:600; font-size:10px; }

  /* Alert Banner */
  .alerts-container {
    background:var(--surface); border:1px solid var(--border); border-radius:10px;
    padding:12px 16px; font-size:12px;
  }
  .alerts-header {
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:8px; padding-bottom:6px; border-bottom:1px solid var(--border);
  }
  .alerts-header-actions { display:flex; align-items:center; gap:8px; }
  .alerts-filter-tabs { display:flex; gap:4px; margin-bottom:10px; }
  .alerts-filter-tab {
    padding:3px 10px; border-radius:10px; font-size:10px; font-family:var(--font-ui);
    cursor:pointer; border:1px solid var(--surface2); background:var(--surface2);
    color:var(--muted); transition:all 0.15s;
  }
  .alerts-filter-tab.active { border-color:var(--heading); background:var(--heading-muted); color:var(--heading); }
  .alerts-group { margin-bottom:8px; }
  .alerts-group-toggle {
    display:flex; align-items:center; gap:6px; cursor:pointer; padding:4px 0;
    font-family:var(--font-ui); font-size:11px; font-weight:600; color:var(--muted);
    text-transform:uppercase; letter-spacing:0.4px; user-select:none;
  }
  .alerts-group-toggle .chevron { font-size:9px; transition:transform 0.15s; }
  .alerts-group.collapsed .alerts-group-items { display:none; }
  .alerts-group.collapsed .chevron { transform:rotate(-90deg); }
  .alerts-group-count {
    font-size:9px; font-family:var(--font-data); background:var(--surface2);
    padding:1px 6px; border-radius:8px; color:var(--muted);
  }
  .alerts-list { display:flex; flex-direction:column; gap:4px; }
  .alert-item {
    display:flex; align-items:flex-start; gap:8px; padding:6px 10px;
    background:var(--surface2); border-radius:6px; transition:opacity 0.2s; flex-wrap:wrap;
  }
  .alert-row { display:flex; align-items:center; gap:8px; width:100%; }
  .alert-icon { font-size:13px; flex-shrink:0; margin-top:1px; }
  .alert-body {
    flex:1; font-family:var(--font-data); font-size:11px; color:var(--text-secondary);
    line-height:1.4; cursor:pointer;
  }
  .alert-body:hover { color:var(--text); }
  .alert-age { font-size:10px; color:var(--muted); font-family:var(--font-data); flex-shrink:0; }
  .alert-btn {
    background:none; border:none; color:var(--muted); cursor:pointer; font-size:11px;
    padding:0 3px; line-height:1; opacity:0.5; transition:opacity 0.15s;
  }
  .alert-btn:hover { opacity:1; }
  .alert-btn.dismiss:hover { color:var(--red-soft); }
  .alert-btn.snooze:hover { color:var(--yellow-soft); }
  .alert-detail {
    width:100%; margin-top:4px; padding:6px 10px 4px 28px;
    font-family:var(--font-data); font-size:10px; color:var(--muted);
    line-height:1.5; border-top:1px solid var(--border); display:none;
  }
  .alert-detail.open { display:block; }
  .alert-detail-key { color:var(--heading); font-weight:600; }
  .btn-text {
    background:none; border:none; color:var(--heading); cursor:pointer;
    font-family:var(--font-ui); font-size:11px; text-decoration:underline;
    text-underline-offset:2px;
  }
  .btn-text:hover { color:var(--accent); }

  /* Conviction Score Widget */
  .conviction-ring {
    width:48px; height:48px; border-radius:50%; display:flex; align-items:center;
    justify-content:center; font-size:16px; font-weight:700; font-family:var(--font-data);
    border:2.5px solid; flex-shrink:0; background:var(--surface2);
  }
  .conviction-dim {
    display:flex; align-items:center; gap:6px; font-size:11px; font-family:var(--font-data);
  }
  .conviction-dim-label { width:80px; color:var(--muted); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
  .conviction-bar-track { flex:1; height:6px; background:var(--surface2); border-radius:3px; overflow:hidden; }
  .conviction-bar-fill { height:100%; border-radius:3px; transition:width 0.3s ease; }
  .conviction-dim-val { width:24px; text-align:right; font-weight:600; font-size:10px; color:var(--text-secondary); }

  /* Conviction Sparkline */
  .conviction-sparkline-wrap {
    display:inline-flex; align-items:center; gap:6px; margin-top:4px; position:relative;
  }
  .conviction-sparkline-wrap svg { display:block; }
  .conviction-sparkline-tip {
    position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%);
    background:var(--surface2); border:1px solid var(--border); border-radius:6px;
    padding:4px 8px; font-size:10px; font-family:var(--font-data); color:var(--text-secondary);
    white-space:nowrap; pointer-events:none; z-index:100; display:none;
    box-shadow:0 2px 8px rgba(0,0,0,0.3);
  }
  .conviction-sparkline-wrap:hover .conviction-sparkline-tip { display:block; }

  /* AI Score Widget */
  .ai-score-widget {
    display:flex; align-items:center; gap:14px; padding:12px 16px;
    background:var(--surface); border:1px solid var(--border); border-radius:10px;
  }
  .ai-score-ring {
    width:48px; height:48px; border-radius:50%; display:flex; align-items:center;
    justify-content:center; font-size:16px; font-weight:700; font-family:var(--font-data);
    border:2.5px solid; flex-shrink:0;
  }
  .ai-score-ring.ai-native  { color:#42a5f5; border-color:#42a5f5; background:rgba(66,165,245,0.10); }
  .ai-score-ring.high       { color:#42a5f5; border-color:#42a5f5; background:rgba(66,165,245,0.08); }
  .ai-score-ring.moderate   { color:var(--sage); border-color:var(--sage); background:rgba(78,122,99,0.08); }
  .ai-score-ring.emerging   { color:var(--yellow-soft); border-color:var(--yellow-soft); background:rgba(192,180,100,0.08); }
  .ai-score-ring.minimal    { color:var(--muted); border-color:var(--border); background:var(--surface2); }
  .ai-score-label { font-size:13px; text-transform:uppercase; letter-spacing:0.12em; font-weight:700; }
  .ai-score-rationale { font-size:16px; color:var(--text-secondary); line-height:1.4; max-width:500px; }
  .ai-score-drivers { display:flex; flex-wrap:wrap; gap:5px; margin-top:5px; }
  .ai-score-driver-chip {
    font-size:12px; padding:3px 9px; border-radius:4px; font-family:var(--font-data);
    background:rgba(66,165,245,0.10); color:#42a5f5; font-weight:600;
  }

  .thesis-conviction-badge {
    width:64px; height:64px; border-radius:50%; display:flex; align-items:center;
    justify-content:center; font-size:24px; font-weight:700; font-family:var(--font-data);
    border:2.5px solid; flex-shrink:0;
  }
  .thesis-conviction-badge.green  { color:var(--green); border-color:var(--green); background:rgba(90,172,122,0.08); }
  .thesis-conviction-badge.yellow { color:var(--yellow); border-color:var(--yellow); background:rgba(201,168,76,0.08); }
  .thesis-conviction-badge.red    { color:var(--red); border-color:var(--red); background:rgba(200,106,106,0.08); }
  .thesis-conviction-label { font-size:10px; text-transform:uppercase; letter-spacing:0.12em; color:var(--muted); font-weight:700; }
  .thesis-scorecard-right {
    background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:20px;
    flex:1; display:flex; align-items:center; gap:24px; min-height:260px;
  }
  .thesis-radar-wrap { width:320px; height:260px; flex-shrink:0; }
  .thesis-scores-list { flex:1; display:flex; flex-direction:column; gap:10px; }
  .thesis-score-row { display:flex; align-items:center; gap:10px; }
  .thesis-score-label { font-size:11px; font-weight:600; color:var(--muted); width:80px; text-transform:uppercase; letter-spacing:0.05em; }
  .thesis-score-bar { flex:1; height:8px; background:var(--surface2); border-radius:4px; overflow:hidden; }
  .thesis-score-bar-fill { height:100%; border-radius:4px; transition:width 0.4s ease; }
  .thesis-score-val { font-size:13px; font-weight:600; font-family:var(--font-data); width:32px; text-align:right; }
  .thesis-narrative { background:var(--surface); border:1px solid var(--border); border-radius:10px;
                      padding:20px 24px; margin-bottom:20px; font-size:14px; line-height:1.7; color:var(--text); white-space:pre-wrap; }
  .thesis-assumptions-table {
    background:var(--surface); border:1px solid var(--border); border-radius:10px;
    padding:16px 20px; margin-bottom:20px;
  }
  .thesis-assumptions-table table td, .thesis-assumptions-table table th { white-space:nowrap; }
  .thesis-scenarios { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; margin-bottom:20px; }
  .thesis-scenario { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:16px 20px; }
  .thesis-scenario-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; margin-bottom:10px; }
  .thesis-scenario-title.bull { color:var(--green); }
  .thesis-scenario-title.base { color:var(--accent); }
  .thesis-scenario-title.bear { color:var(--red); }
  .thesis-scenario p { font-size:13px; line-height:1.6; color:var(--text); margin:0; white-space:pre-wrap; }
  .thesis-lists { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px; }
  .thesis-list-card { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:16px 20px; }
  .thesis-list-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--muted); margin-bottom:10px; }
  .thesis-list-card ul { list-style:none; padding:0; margin:0; }
  .thesis-list-card li { font-size:13px; color:var(--text); padding:4px 0; border-bottom:1px solid var(--border); }
  .thesis-list-card li:last-child { border-bottom:none; }
  .thesis-list-card li::before { content:'→ '; color:var(--accent); }
  .thesis-list-card.risks li::before { color:var(--red); }
  .thesis-edit-btn { background:none; border:1px solid var(--border); color:var(--muted); border-radius:4px;
                     padding:2px 8px; font-size:11px; cursor:pointer; font-family:var(--font-data); }
  .thesis-edit-btn:hover { color:var(--accent); border-color:var(--accent); }
  .thesis-edited-badge { font-size:10px; color:var(--yellow); font-family:var(--font-data); margin-left:8px; }
  .thesis-edit-area { width:100%; min-height:100px; padding:10px; font-size:13px; font-family:var(--font-data);
                      background:var(--surface2); border:1px solid var(--accent); border-radius:6px;
                      color:var(--text); resize:vertical; outline:none; line-height:1.6; }
  .thesis-edit-actions { display:flex; gap:8px; margin-top:8px; }
  .thesis-edit-actions button { padding:4px 12px; border-radius:4px; font-size:12px; cursor:pointer; border:none; }
  .thesis-edit-actions .save { background:var(--accent); color:#000; font-weight:600; }
  .thesis-edit-actions .cancel { background:var(--surface2); color:var(--muted); border:1px solid var(--border); }
  .btn-regenerate { padding:6px 14px; font-size:12px; font-family:var(--font-data); background:var(--surface2);
                    color:var(--accent); border:1px solid var(--accent); border-radius:6px; cursor:pointer; }
  .btn-regenerate:hover { background:var(--accent); color:#000; }
  @media (max-width:900px) { .thesis-scenarios { grid-template-columns:1fr; } .thesis-lists { grid-template-columns:1fr; } }
  .btn-download-pdf { padding:6px 14px; font-size:12px; font-family:var(--font-data); background:var(--surface2);
                      color:var(--green); border:1px solid var(--green); border-radius:6px; cursor:pointer; }
  .btn-download-pdf:hover { background:var(--green); color:#000; }

  /* ── Thesis popup modal ── */
  .thesis-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(6px);
    z-index: 200;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 24px;
    overflow-y: auto;
  }
  .thesis-modal-overlay.open { display: flex; }
  .thesis-modal {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    width: 100%;
    max-width: 960px;
    padding: 32px;
    position: relative;
    animation: slideUp 0.2s ease;
  }
  .thesis-modal-close {
    position: sticky; top: 0; float: right;
    background: var(--surface3); border: 1px solid var(--border); color: var(--muted);
    width: 32px; height: 32px; border-radius: 6px; cursor: pointer;
    font-size: 16px; display: flex; align-items: center; justify-content: center;
    transition: all 0.15s; z-index: 1;
  }
  .thesis-modal-close:hover { color: var(--text); border-color: var(--text); }
  .rc-tab { padding:4px 12px; border-radius:4px; font-size:12px; font-weight:500; color:var(--text-muted); cursor:pointer; background:var(--surface); border:1px solid var(--border); }
  .rc-tab:hover { color:var(--text-primary); border-color:var(--text-secondary); }
  .rc-tab.active { color:#fff; background:var(--accent); border-color:var(--accent); }

  /* Toast notifications */
  .toast-container { position:fixed; bottom:24px; right:24px; z-index:9999; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
  .toast { pointer-events:auto; padding:10px 16px; border-radius:8px; font-size:12px; font-family:var(--font-data);
    color:var(--text); background:var(--surface); border:1px solid var(--border);
    box-shadow:0 4px 12px rgba(0,0,0,0.3); opacity:0; transform:translateY(12px);
    animation:toastIn 0.2s ease forwards; max-width:340px; }
  .toast.dismiss { animation:toastOut 0.2s ease forwards; }
  .toast.toast-success { border-color:var(--sage); }
  .toast.toast-error { border-color:var(--red-soft); }
  .toast .toast-icon { margin-right:8px; }
  @keyframes toastIn { to { opacity:1; transform:translateY(0); } }
  @keyframes toastOut { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(12px); } }

  /* Error state with retry */
  .fetch-error { text-align:center; padding:32px 20px; color:var(--muted); font-size:12px; }
  .fetch-error-icon { font-size:20px; margin-bottom:8px; opacity:0.5; }
  .fetch-error-btn { margin-top:10px; padding:6px 14px; font-size:11px; font-family:var(--font-data);
    background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:6px; cursor:pointer; }
  .fetch-error-btn:hover { border-color:var(--accent); color:var(--accent); }

  /* Peer-comparison cohort summary rows (pinned at top when a sector pack is loaded) */
  .cohort-row { background: var(--surface3); font-weight: 600; }
  .cohort-row td { border-bottom: 1px solid var(--border); color: var(--text); }
  .cohort-row .cohort-label {
    color: var(--sage); text-transform: uppercase; font-size: var(--fs-xs);
    letter-spacing: 0.5px; font-family: var(--font-ui);
  }
  .cohort-iqr { font-weight: 400; color: var(--muted); font-size: var(--fs-xs); background: transparent; }
  .cohort-iqr td { border-bottom: 1px solid var(--border); }

  /* Catalysts & Risks evolution surface (Thesis sub-tab) */
  .cr-row { padding: 10px 12px; border-bottom: 1px solid var(--border); cursor: pointer; }
  .cr-row > summary { display: flex; gap: 10px; align-items: center; list-style: none;
                      font-family: var(--font-data); font-size: var(--fs-sm); }
  .cr-row > summary::-webkit-details-marker { display: none; }
  .cr-row[open] .cr-chevron { transform: rotate(90deg); }
  .cr-chevron { transition: transform 0.15s; color: var(--muted); display: inline-block; flex: 0 0 auto; }
  /* Title takes ~30% less than the prior flex:1 by capping at 35ch.
     Full text accessible via the title="..." attribute on hover. */
  .cr-title { flex: 0 1 35ch; min-width: 0; max-width: 35ch;
              color: var(--text); font-weight: 600; overflow: hidden;
              text-overflow: ellipsis; white-space: nowrap; }
  .cr-cat-chip { flex: 0 0 auto; font-size: var(--fs-xxs); padding: 1px 6px; background: var(--surface3);
                 border-radius: 3px; color: var(--muted); text-transform: uppercase; }
  .cr-status-badge { flex: 0 0 auto; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.5px; }
  .cr-conf, .cr-trans-count { flex: 0 0 auto; color: var(--muted); font-size: var(--fs-xs); }
  .cr-impact { flex: 0 0 auto; font-size: var(--fs-xs); }
  .cr-impact.pos { color: var(--green-soft); }
  .cr-impact.neg { color: var(--red-soft); }
  .cr-last-changed { flex: 0 0 auto; margin-left: auto; color: var(--muted); font-size: var(--fs-xs); }
  .cr-expanded { padding: 12px 0 8px 24px; }
  .cr-description { color: var(--slate); font-size: var(--fs-sm); margin-bottom: 10px;
                    line-height: 1.5; }

  /* Transition timeline — structured grid with status-colored dots */
  .cr-timeline { list-style: none; padding-left: 0; margin: 12px 0 0 0; }
  .cr-tl-row { display: grid;
               grid-template-columns: 14px 90px minmax(170px, 0.6fr) minmax(200px, 1.3fr) 110px;
               gap: 14px; align-items: baseline;
               padding: 8px 0 8px 14px;
               border-left: 2px solid var(--border);
               margin-left: 6px;
               font-size: var(--fs-xs); color: var(--text); }
  .cr-tl-dot { width: 9px; height: 9px; border-radius: 50%;
               margin-left: -23px; align-self: center; }
  .cr-tl-date { color: var(--muted); font-family: var(--font-data); }
  .cr-tl-delta { font-family: var(--font-data); display: flex; gap: 6px; align-items: baseline; }
  .cr-tl-old { color: var(--muted); font-size: var(--fs-xxs); text-transform: uppercase; letter-spacing: 0.5px; }
  .cr-tl-arrow { color: var(--muted); }
  .cr-tl-new { font-weight: 700; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.5px; }
  .cr-tl-evidence { color: var(--text); font-style: italic; line-height: 1.45;
                    overflow: hidden; text-overflow: ellipsis; }
  .cr-tl-source { color: var(--accent); font-family: var(--font-data); font-size: var(--fs-xxs);
                  text-align: right; text-transform: uppercase; letter-spacing: 0.5px; }
  .cr-tl-created { opacity: 0.7; }

  .cr-section-header { display: flex; align-items: center; justify-content: space-between;
                       padding: 10px 12px; background: var(--surface3); border-radius: 6px 6px 0 0;
                       font-family: var(--font-ui); color: var(--sage);
                       text-transform: uppercase; font-size: var(--fs-sm); letter-spacing: 0.5px; }
  .cr-col-h-activity { font-family: var(--font-data); font-size: var(--fs-xxs);
                       color: var(--muted); text-transform: none; letter-spacing: 0; }

  /* Sortable column headers — sit above the data rows. Click to toggle sort. */
  .cr-table-headers { display: flex; gap: 10px; align-items: center;
                      padding: 8px 12px;
                      border-bottom: 2px solid var(--border);
                      background: var(--surface2);
                      font-family: var(--font-ui); font-size: var(--fs-xxs);
                      color: var(--slate); text-transform: uppercase; letter-spacing: 0.5px;
                      user-select: none; }
  .cr-col-h { cursor: pointer; transition: color 0.1s; flex: 0 0 auto;
              padding: 2px 0; }
  .cr-col-h:hover { color: var(--text); }
  .cr-col-h.active { color: var(--accent); font-weight: 700; }
  /* Match approximate widths of the data row's flex cells so headers
     visually line up with the columns. Title gets the same 35ch cap. */
  .cr-col-h.col-title   { flex: 0 1 35ch; min-width: 0; max-width: 35ch;
                          padding-left: 24px; /* offset for chevron */ }
  .cr-col-h.col-status  { min-width: 120px; }
  .cr-col-h.col-measure { min-width: 60px; }
  .cr-col-h.col-impact  { min-width: 96px; }
  .cr-col-h.col-count   { min-width: 110px; }
  .cr-col-h.col-last    { margin-left: auto; min-width: 80px; text-align: right; }

  /* Slightly stronger row dividers + zebra alternation now that the rows
     read as a real table rather than a list of cards. */
  .cr-row { border-bottom: 1px solid var(--border); }
  .cr-row:nth-of-type(even) > summary { background: rgba(255, 255, 255, 0.015); }
  .cr-row:hover > summary { background: var(--surface2); }
  .cr-superseded-toggle { font-size: var(--fs-xs); color: var(--accent); cursor: pointer;
                          background: none; border: none; padding: 6px 12px;
                          font-family: var(--font-data); }
  .cr-superseded-list .cr-row { opacity: 0.6; }

  /* Probability chart Y-axis toolbar */
  .cr-prob-y-toolbar { display: inline-flex; align-items: center; gap: 4px;
                       padding: 2px 6px; background: var(--surface3);
                       border-radius: 4px; font-family: var(--font-data); }
  .cr-prob-y-label { color: var(--muted); font-size: var(--fs-xxs);
                     text-transform: uppercase; letter-spacing: 0.5px; margin-right: 4px; }
  .cr-prob-y-btn { background: transparent; border: 1px solid transparent;
                   color: var(--slate); cursor: pointer; padding: 2px 8px;
                   font-family: var(--font-data); font-size: var(--fs-xxs);
                   border-radius: 3px; transition: all 0.1s; }
  .cr-prob-y-btn:hover { color: var(--text); border-color: var(--border); }
  .cr-prob-y-btn.active { color: var(--accent); border-color: var(--accent);
                          background: rgba(0, 229, 255, 0.08); }