* { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: 'Segoe UI', system-ui, sans-serif; background: #0f1117; color: #e2e8f0; min-height: 100vh; transition: background 0.2s, color 0.2s; }

  /* ── Light theme overrides ─────────────────────────────────────────── */
  html[data-theme="light"] body { background: #f8fafc; color: #1f2937; }
  html[data-theme="light"] header { background: #ffffff; border-bottom: 1px solid #e2e8f0; }
  html[data-theme="light"] header h1 { color: #4f46e5; }
  html[data-theme="light"] header span { color: #64748b; }
  html[data-theme="light"] .toolbar { background: #f1f5f9; border-bottom: 1px solid #e2e8f0; }
  html[data-theme="light"] .search-box { background: #ffffff; border: 1px solid #cbd5e1; }
  html[data-theme="light"] .header-search-toggle { background: #ffffff; border-color: #cbd5e1; color: #64748b; }
  html[data-theme="light"] .header-search-toggle:hover { border-color: #7c3aed; color: #7c3aed; }
  html[data-theme="light"] .search-box input { color: #1f2937; }
  html[data-theme="light"] .search-box input::placeholder { color: #94a3b8; }
  html[data-theme="light"] .btn-columns { background: #ffffff; border-color: #cbd5e1; color: #475569; }
  html[data-theme="light"] .section-collapse-btn.filters-toggle { background: #eef2ff; border-color: #c7d2fe; color: #4338ca; }
  html[data-theme="light"] .section-collapse-btn.filters-toggle:hover { background: #e0e7ff; border-color: #6366f1; color: #3730a3; }
  html[data-theme="light"] .section-collapse-btn.filters-toggle.is-collapsed { background: #4f46e5; border-color: #4f46e5; color: #ffffff; box-shadow: 0 0 0 3px rgba(79,70,229,0.20); }
  html[data-theme="light"] .section-collapse-btn.filters-toggle.is-collapsed:hover { background: #4338ca; }
  html[data-theme="light"] .btn-columns:hover, html[data-theme="light"] .btn-columns.open { border-color: #4f46e5; color: #4f46e5; background: #eef2ff; }
  html[data-theme="light"] .col-picker { background: #f1f5f9; border-bottom: 1px solid #e2e8f0; }
  html[data-theme="light"] .col-group { background: #ffffff; border: 1px solid #cbd5e1; }
  html[data-theme="light"] .col-chip { background: #f8fafc; border: 1px solid #cbd5e1; color: #475569; }
  html[data-theme="light"] .col-chip:hover { border-color: #4f46e5; color: #4f46e5; }
  html[data-theme="light"] .col-chip.active { background: #e0e7ff; border-color: #4f46e5; color: #4338ca; }
  html[data-theme="light"] thead th { background: #f1f5f9; color: #475569; border-bottom: 1px solid #cbd5e1; }
  html[data-theme="light"] thead th:hover { color: #1f2937; }
  html[data-theme="light"] tbody tr { border-bottom: 1px solid #e2e8f0; }
  html[data-theme="light"] tbody tr:hover { background: #f1f5f9; }
  html[data-theme="light"] td.ticker-cell { color: #4f46e5; }
  html[data-theme="light"] .stat-bar { background: #f1f5f9; border-bottom: 1px solid #e2e8f0; color: #475569; }
  html[data-theme="light"] .stat-bar span b { color: #1f2937; }
  html[data-theme="light"] .neutral { color: #64748b; }
  html[data-theme="light"] .tag { background: #e2e8f0; color: #475569; }
  html[data-theme="light"] .region-toggle { background: #f1f5f9; border: 1px solid #cbd5e1; }
  html[data-theme="light"] .region-btn { color: #64748b; }
  html[data-theme="light"] .region-btn:hover { color: #1f2937; }
  /* Active pill keeps white text on the indigo fill — needs higher specificity than
     the .region-btn light override above, which otherwise greys it out. */
  html[data-theme="light"] .region-btn.active { color: #ffffff; }
  html[data-theme="light"] .price-range { background: #f1f5f9; border: 1px solid #cbd5e1; }
  html[data-theme="light"] .price-range::-webkit-scrollbar-thumb { background: #cbd5e1; }
  html[data-theme="light"] .price-range-btn { color: #64748b; }
  html[data-theme="light"] .price-range-btn:hover { color: #1f2937; }
  html[data-theme="light"] .price-range-btn.active { color: #ffffff; }
  /* Base flag styling (region selector + flyout override sizes locally). */
  .region-flag { font-size: 1.1em; margin-right: 2px; }
  html[data-theme="light"] .invested-select { background: #ffffff; border-color: #cbd5e1; color: #475569; }
  html[data-theme="light"] .invested-select.val-yes  { background: #d1fae5; color: #047857; border-color: #6ee7b7; }
  html[data-theme="light"] .invested-select.val-no   { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
  html[data-theme="light"] .invested-select.val-maybe { background: #fef3c7; color: #b45309; border-color: #fcd34d; }
  html[data-theme="light"] .modal { background: #ffffff; border: 1px solid #cbd5e1; }
  html[data-theme="light"] .modal h2 { color: #1f2937; }
  html[data-theme="light"] .modal label { color: #475569; }
  html[data-theme="light"] .modal input[type=text],
  html[data-theme="light"] .modal input[type=email],
  html[data-theme="light"] .modal input[type=tel],
  html[data-theme="light"] .modal textarea { background: #f8fafc; border-color: #cbd5e1; color: #1f2937; }
  html[data-theme="light"] .btn-cancel { background: #f1f5f9; color: #475569; border-color: #cbd5e1 !important; }
  html[data-theme="light"] .btn-cancel:hover { color: #1f2937; }
  html[data-theme="light"] .modal-message { color: #475569; }
  html[data-theme="light"] .news-panel { background: #ffffff; border: 1px solid #cbd5e1; }
  html[data-theme="light"] .news-header { background: #f1f5f9; border-bottom-color: #e2e8f0; }
  html[data-theme="light"] .ann-panel { background: #ffffff; border: 1px solid #cbd5e1; }
  html[data-theme="light"] .ann-header { background: #f1f5f9; border-bottom-color: #e2e8f0; }
  html[data-theme="light"] .ann-item { border-bottom-color: #e2e8f0; }
  html[data-theme="light"] .ann-title { color: #0f172a; }
  html[data-theme="light"] .ann-date, html[data-theme="light"] .ann-meta, html[data-theme="light"] .ann-detail { color: #64748b; }
  html[data-theme="light"] .ann-src { color: #475569; }
  html[data-theme="light"] .news-card { background: #f8fafc; border-color: #cbd5e1; }
  html[data-theme="light"] .news-card-title { color: #1f2937; }
  html[data-theme="light"] .news-card-source { color: #64748b; }
  html[data-theme="light"] #btn-guide { background: #ffffff !important; border-color: #cbd5e1 !important; color: #475569 !important; }
  html[data-theme="light"] #btn-guide:hover { color: #4f46e5 !important; border-color: #4f46e5 !important; }
  html[data-theme="light"] #dcf-info-bar { background: #f1f5f9 !important; border-bottom-color: #e2e8f0 !important; color: #475569; }
  html[data-theme="light"] #dcf-info-bar b { color: #1f2937; }
  html[data-theme="light"] .help-card { background: #ffffff; border-color: #cbd5e1; }
  html[data-theme="light"] .help-card-name { color: #1f2937; }
  html[data-theme="light"] .help-card-desc { color: #475569; }
  html[data-theme="light"] .help-card-formula { background: #f1f5f9; color: #1f2937; }

  /* Theme toggle button */
  .btn-theme { background: #1e2035; border: 1px solid #2d3148; border-radius: 8px; padding: 7px 10px; color: #94a3b8; font-size: 0.8rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.15s; }
  .btn-theme:hover { color: #a78bfa; border-color: #4f46e5; }
  html[data-theme="light"] .btn-theme { background: #ffffff; border-color: #cbd5e1; color: #475569; }
  html[data-theme="light"] .btn-theme:hover { color: #4f46e5; border-color: #4f46e5; }

  header { background: #1a1d2e; border-bottom: 1px solid #2d3148; padding: 8px 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; position: sticky; top: 0; z-index: 100; margin-left: 200px; transition: margin-left 0.2s ease; }
  header h1 { font-size: 1.25rem; font-weight: 600; color: #a78bfa; }
  header span { font-size: 0.8rem; color: #64748b; }

  .toolbar { padding: 16px 24px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; background: #13151f; border-bottom: 1px solid #1e2035; }
  .search-box { position: relative; display: flex; align-items: center; gap: 8px; background: #1e2035; border: 1px solid #2d3148; border-radius: 8px; padding: 8px 12px; flex: 1; max-width: 320px; }
  /* Collapsed-search trigger: mobile only (see the 768px block) */
  .header-search-toggle { display: none; align-items: center; justify-content: center; background: #1e2035; border: 1px solid #2d3148; border-radius: 8px; padding: 8px; color: #94a3b8; cursor: pointer; flex: 0 0 auto; }
  .header-search-toggle:hover { border-color: #4f46e5; color: #a78bfa; }
  /* Decorative on desktop (the box never collapses there); the mobile block
     turns it into the collapse control so one magnifier does both. */
  .search-box-icon { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; padding: 0; color: inherit; pointer-events: none; flex: 0 0 auto; }
  /* Mobile only: the app nav, opposite the profile menu (see the 768px block) */
  .app-nav { display: none; position: relative; flex: 0 0 auto; }
  .app-nav-burger { display: flex; align-items: center; justify-content: center; background: #1e2035; border: 1px solid #2d3148; border-radius: 8px; padding: 7px; color: #94a3b8; cursor: pointer; }
  .app-nav-burger:hover { border-color: #4f46e5; color: #a78bfa; }
  .app-nav-menu { left: 0; right: auto; }
  /* The burger SVG uses stroke="currentColor", so colour alone re-themes it. */
  html[data-theme="light"] .app-nav-burger { background: #ffffff; border-color: #cbd5e1; color: #475569; }
  html[data-theme="light"] .app-nav-burger:hover { background: #f1f5f9; border-color: #4f46e5; color: #4338ca; }
  .search-box input { background: none; border: none; outline: none; color: #e2e8f0; font-size: 0.875rem; width: 100%; }
  .search-box input::placeholder { color: #475569; }
  /* Column picker */
  .btn-columns { background: #1e2035; border: 1px solid #2d3148; border-radius: 8px; padding: 8px 14px; color: #94a3b8; font-size: 0.8rem; cursor: pointer; display: flex; align-items: center; gap: 6px; }
  .btn-columns:hover, .btn-columns.open { border-color: #4f46e5; color: #a78bfa; background: #1a1d2e; }
  .col-picker { background: #13151f; border-bottom: 1px solid #2d3148; padding: 16px 24px; display: none; max-height: 42vh; overflow-y: auto; }
  .col-picker.open { display: block; }
  .col-picker-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
  .col-picker-header h3 { font-size: 0.82rem; color: #94a3b8; font-weight: 500; }
  .col-picker-actions { display: flex; gap: 8px; }
  .col-picker-actions button { background: none; border: 1px solid #2d3148; border-radius: 5px; padding: 4px 10px; font-size: 0.72rem; color: #64748b; cursor: pointer; }
  .col-picker-actions button:hover { color: #e2e8f0; border-color: #4f46e5; }
  .col-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
  .col-group { background: #1a1d2e; border: 1px solid #2d3148; border-radius: 8px; padding: 12px; }
  .col-group-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
  .col-group-label { font-size: 0.7rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.06em; }
  .col-group-toggle-all { font-size: 0.75rem; color: #94a3b8; background: none; border: none; cursor: pointer; padding: 0; }
  html[data-theme="light"] .col-group-toggle-all { color: #475569; }
  .col-group-toggle-all:hover { color: #a78bfa; }
  .col-chips { display: flex; flex-wrap: wrap; gap: 5px; }
  .col-chip { background: #0f1117; border: 1px solid #2d3148; border-radius: 5px; padding: 3px 8px; font-size: 0.75rem; cursor: pointer; color: #94a3b8; transition: all 0.12s; user-select: none; white-space: nowrap; }
  .col-chip:hover { border-color: #4f46e5; color: #a78bfa; }
  .col-chip.active { background: #1e1b4b; border-color: #4f46e5; color: #a78bfa; }
  .btn-refresh-all { background: #4f46e5; border: none; border-radius: 8px; padding: 8px 16px; color: white; font-size: 0.8rem; cursor: pointer; display: flex; align-items: center; gap: 6px; }
  .btn-refresh-all:hover { background: #4338ca; }

  /* Horizontal gutter is margin (outside the scroll area), not padding, so the
     sticky first column sticks flush to the wrapper edge with no peek-through gap. */
  .table-wrapper { overflow: auto; padding: 0 0 24px; margin: 0 24px; }
  table { border-collapse: collapse; width: 100%; font-size: 0.8rem; min-width: 1200px; }
  thead th { background: #1a1d2e; color: #94a3b8; padding: 10px 12px; text-align: left; white-space: nowrap; position: sticky; top: 0; z-index: 10; border-bottom: 1px solid #2d3148; cursor: pointer; user-select: none; }
  thead th:hover { color: #e2e8f0; }
  thead th .sort-icon { display: inline-block; width: 9px; margin-left: 4px; text-align: center; opacity: 0; transition: opacity 0.12s; }
  thead th:hover .sort-icon { opacity: 0.55; }
  thead th.sorted .sort-icon { opacity: 1; color: #a78bfa; }
  /* Touch devices never hover, so the affordance has to stay visible there. */
  @media (hover: none) {
    thead th .sort-icon { opacity: 0.45; }
    .info-ico { opacity: 0.75; }
  }
  /* Small "info" button on column headers that carry a tooltip (the th title).
     It is a real button because a native title never renders on touch. */
  .info-ico { font-style: normal; font-size: 0.66rem; opacity: 0.4; cursor: pointer; vertical-align: super; margin-left: 1px; background: none; border: 0; padding: 0; color: inherit; font-family: inherit; line-height: 1; }
  thead th:hover .info-ico { opacity: 0.85; color: #a78bfa; }
  .info-ico:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; border-radius: 3px; opacity: 1; }
  html[data-theme="light"] thead th:hover .info-ico { color: #4f46e5; }
  html[data-theme="light"] .info-ico:focus-visible { outline-color: #4f46e5; }
  /* The help text the ⓘ opens. Fixed-positioned like the row menu. */
  .col-info { position: fixed; z-index: 4100; max-width: 320px; background: #1e2035; border: 1px solid #2d3148; border-radius: 10px; padding: 10px 12px 12px; box-shadow: 0 12px 32px rgba(0,0,0,0.45); }
  .col-info-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
  .col-info-title { flex: 1 1 auto; font-size: 0.78rem; font-weight: 700; color: #a78bfa; }
  .col-info-close { flex: 0 0 auto; background: none; border: 0; padding: 0; width: 22px; height: 22px; border-radius: 6px; color: #94a3b8; font-size: 1.05rem; line-height: 1; cursor: pointer; }
  .col-info-close:hover, .col-info-close:focus-visible { background: #262a44; color: #ffffff; outline: none; }
  .col-info-body { font-size: 0.76rem; line-height: 1.5; color: #cbd5e1; white-space: pre-wrap; }
  html[data-theme="light"] .col-info { background: #ffffff; border-color: #cbd5e1; box-shadow: 0 12px 32px rgba(15,23,42,0.16); }
  html[data-theme="light"] .col-info-title { color: #4f46e5; }
  html[data-theme="light"] .col-info-close { color: #64748b; }
  html[data-theme="light"] .col-info-close:hover, html[data-theme="light"] .col-info-close:focus-visible { background: #f1f5f9; color: #0f172a; }
  html[data-theme="light"] .col-info-body { color: #334155; }
  tbody tr { border-bottom: 1px solid #1a1d2e; transition: background 0.1s; }
  tbody tr:hover { background: #1a1d2e; }
  tbody td { padding: 9px 12px; white-space: nowrap; }
  td.ticker-cell { font-weight: 600; color: #a78bfa; display: flex; align-items: center; gap: 6px; }
  .btn-refresh.spinning { animation: spin 0.8s linear infinite; pointer-events: none; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .positive { color: #34d399; }
  .negative { color: #f87171; }
  .neutral { color: #94a3b8; }
  /* Cells for the metrics that drive the row's lifecycle Stage (parsed from the
     Stage label, e.g. 2-HG(P/S,P/OCF) bolds P/S & P/OCF). */
  td.key-metric { font-weight: 700; }
  /* Watchlist columns are kept compact so more of the ~30 metrics fit on screen
     before the reader has to scroll sideways. Scoped to #stocks-table (an id, so
     it also wins over the mobile tbody td rule) rather than being made a toggle —
     there is nothing here a reader would want to trade width for. */
  #stocks-table thead th { padding: 7px 8px; }
  #stocks-table tbody td { padding: 6px 8px; font-variant-numeric: tabular-nums; }
  #stocks-table .editable-text { min-width: 84px; max-width: 140px; }
  #stocks-table .editable-num { width: 54px; }
  #stocks-table .invested-select { width: 62px; }
  .tag { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 0.7rem; background: #1e2035; }
  .refreshed { animation: flash 0.5s ease; }
  @keyframes flash { 0%,100% { background: transparent; } 50% { background: #1e3a5f; } }

  /* News panel */
  .news-panel { margin: 0 24px 16px; background: #13151f; border: 1px solid #2d3148; border-radius: 12px; overflow: hidden; display: none; }
  .news-panel.visible { display: block; }
  .news-header { padding: 14px 20px; background: #1a1d2e; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #2d3148; }
  .news-header h3 { font-size: 0.95rem; color: #a78bfa; }
  .btn-close-news { background: none; border: none; color: #64748b; cursor: pointer; font-size: 1.1rem; line-height: 1; }
  .btn-close-news:hover { color: #e2e8f0; }
  .news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; padding: 16px 20px; max-height: 42vh; overflow-y: auto; }
  .news-card { background: #1a1d2e; border: 1px solid #2d3148; border-radius: 10px; overflow: hidden; transition: border-color 0.15s; }
  .news-card:hover { border-color: #4f46e5; }
  .news-card img { width: 100%; height: 140px; object-fit: cover; background: #0f1117; }
  .news-card-body { padding: 12px; }
  .news-card-source { font-size: 0.7rem; color: #64748b; margin-bottom: 4px; }
  .news-card-title { font-size: 0.85rem; font-weight: 600; color: #e2e8f0; line-height: 1.4; margin-bottom: 6px; }
  .news-card-title a { color: inherit; text-decoration: none; }
  .news-card-title a:hover { color: #a78bfa; }
  .news-card-date { font-size: 0.7rem; color: #94a3b8; }
  .news-loading { padding: 32px; text-align: center; color: #94a3b8; }
  html[data-theme="light"] .news-card-date, html[data-theme="light"] .news-loading { color: #475569; }
  .news-error { padding: 32px; text-align: center; color: #f87171; }

  /* ── Announcements panel (watchlist) ──────────────────────────────────
     Recent exchange filings for every ticker in the open watchlist. There is
     no global .hidden rule, so this component carries its own. */
  .ann-panel { margin: 0 24px 16px; background: #13151f; border: 1px solid #2d3148; border-radius: 12px; overflow: hidden; }
  .ann-panel.hidden { display: none; }
  .ann-header { padding: 12px 20px; background: #1a1d2e; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #2d3148; }
  .ann-header h3 { font-size: 0.95rem; color: #a78bfa; }
  .ann-meta { font-size: 0.72rem; color: #64748b; margin-right: auto; }
  .ann-refresh { background: none; border: none; color: #64748b; cursor: pointer; font-size: 1rem; line-height: 1; }
  .ann-refresh:hover { color: #a78bfa; }
  .ann-list { max-height: 42vh; overflow-y: auto; padding: 6px 0; }
  .ann-item { padding: 10px 20px; border-bottom: 1px solid #1e2233; }
  .ann-item:last-child { border-bottom: none; }
  .ann-item-head { display: flex; align-items: center; gap: 10px; margin-bottom: 3px; }
  .ann-tick { font-size: 0.72rem; font-weight: 700; color: #a78bfa; letter-spacing: 0.02em; }
  .ann-date { font-size: 0.7rem; color: #64748b; }
  .ann-src { font-size: 0.75rem; color: #94a3b8; margin-left: auto; text-transform: uppercase; letter-spacing: 0.04em; }
  .ann-title { font-size: 0.84rem; font-weight: 600; color: #e2e8f0; line-height: 1.4; }
  .ann-title a { color: inherit; text-decoration: none; }
  .ann-title a:hover { color: #a78bfa; text-decoration: underline; }
  .ann-detail { font-size: 0.74rem; color: #64748b; line-height: 1.5; margin-top: 3px; }
  .ann-empty { padding: 26px; text-align: center; color: #94a3b8; font-size: 0.82rem; }
  html[data-theme="light"] .ann-empty { color: #475569; }

  .loading-overlay { position: fixed; inset: 0; background: rgba(15,17,23,0.85); display: flex; align-items: center; justify-content: center; z-index: 999; flex-direction: column; gap: 12px; }
  .spinner { width: 40px; height: 40px; border: 3px solid #2d3148; border-top-color: #a78bfa; border-radius: 50%; animation: spin 0.7s linear infinite; }
  .loading-overlay p { color: #94a3b8; font-size: 0.875rem; }

  /* ── "We're updating" overlay (shown during deploy restarts) ────────── */
  .updating-overlay { position: fixed; inset: 0; z-index: 4000; display: none; align-items: center; justify-content: center; padding: 24px;
    background: radial-gradient(900px 500px at 50% 30%, rgba(79,70,229,0.20), transparent 65%), rgba(7,8,13,0.92);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .updating-overlay.show { display: flex; animation: fadeIn 0.25s ease; }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  .updating-card { max-width: 420px; width: 100%; text-align: center; padding: 36px 30px; border-radius: 20px;
    background: linear-gradient(135deg, rgba(26,29,46,0.95), rgba(19,21,31,0.95)); border: 1px solid rgba(167,139,250,0.3);
    box-shadow: 0 30px 70px rgba(0,0,0,0.6); }
  .updating-rocket { font-size: 2.6rem; line-height: 1; margin-bottom: 14px; animation: rocketBob 1.6s ease-in-out infinite; }
  @keyframes rocketBob { 0%,100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-8px) rotate(-2deg); } }
  .updating-card h2 { font-size: 1.4rem; font-weight: 700; color: #e2e8f0; margin-bottom: 10px; }
  .updating-card p { color: #94a3b8; font-size: 0.92rem; line-height: 1.55; margin-bottom: 22px; }
  .updating-bar { height: 5px; border-radius: 999px; background: rgba(167,139,250,0.18); overflow: hidden; }
  .updating-bar span { display: block; height: 100%; width: 40%; border-radius: 999px;
    background: linear-gradient(90deg, #4f46e5, #818cf8, #38bdf8); animation: updatingSlide 1.4s ease-in-out infinite; }
  @keyframes updatingSlide { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }
  html[data-theme="light"] .updating-overlay { background: radial-gradient(900px 500px at 50% 30%, rgba(124,58,237,0.12), transparent 65%), rgba(248,250,252,0.94); }
  html[data-theme="light"] .updating-card { background: linear-gradient(135deg, #ffffff, #f8fafc); border-color: rgba(124,58,237,0.22); box-shadow: 0 24px 56px rgba(15,23,42,0.18); }
  html[data-theme="light"] .updating-card h2 { color: #1f2937; }
  html[data-theme="light"] .updating-card p { color: #475569; }

  /* ── Install as app (PWA) ──────────────────────────────────────────── */
  /* Bottom sheet nudge. Hidden by default; pwa.js adds .show on mobile only. */
  .install-banner { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 115;
    display: none; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px;
    background: linear-gradient(135deg, rgba(26,29,46,0.98), rgba(19,21,31,0.98));
    border: 1px solid rgba(167,139,250,0.34); box-shadow: 0 18px 44px rgba(0,0,0,0.5);
    padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .install-banner.show { display: flex; animation: installRise 0.32s cubic-bezier(.4,0,.2,1); }
  @keyframes installRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
  .install-banner-icon { width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0; }
  .install-banner-text { flex: 1; min-width: 0; }
  .install-banner-title { font-size: 0.92rem; font-weight: 700; color: #e2e8f0; }
  .install-banner-sub { font-size: 0.76rem; color: #94a3b8; line-height: 1.4; margin-top: 2px; }
  .install-banner-continue { margin-top: 6px; padding: 0; border: 0; background: transparent; cursor: pointer;
    font-size: 0.76rem; font-weight: 600; color: #a78bfa; text-decoration: underline; text-underline-offset: 2px; }
  .install-banner-continue:hover { color: #c4b5fd; }
  .install-banner-cta { flex-shrink: 0; padding: 9px 16px; border: 0; border-radius: 10px; cursor: pointer;
    background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #fff; font-size: 0.84rem; font-weight: 700;
    min-height: 38px; }
  .install-banner-cta:active { transform: scale(0.97); }
  .install-banner-close { flex-shrink: 0; width: 30px; height: 30px; display: flex; align-items: center;
    justify-content: center; border: 0; border-radius: 8px; background: transparent; color: #64748b; cursor: pointer; }
  .install-banner-close:hover { color: #e2e8f0; background: rgba(148,163,184,0.12); }
  html[data-theme="light"] .install-banner { background: #ffffff; border-color: rgba(124,58,237,0.24);
    box-shadow: 0 18px 40px rgba(15,23,42,0.18); }
  html[data-theme="light"] .install-banner-title { color: #1f2937; }
  html[data-theme="light"] .install-banner-sub { color: #64748b; }
  html[data-theme="light"] .install-banner-continue { color: #7c3aed; }
  html[data-theme="light"] .install-banner-continue:hover { color: #6d28d9; }
  html[data-theme="light"] .install-banner-close:hover { color: #1f2937; background: rgba(100,116,139,0.12); }
  /* On wider screens the bottom sheet becomes a compact bottom-right card. */
  @media (min-width: 769px) {
    .install-banner { left: auto; right: 20px; bottom: 20px; max-width: 380px; }
  }

  /* iOS Safari can't be prompted programmatically — show the manual steps. */
  .install-ios { position: fixed; inset: 0; z-index: 2200; display: none; align-items: center;
    justify-content: center; padding: 20px; background: rgba(7,8,13,0.72);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
  .install-ios.show { display: flex; animation: fadeIn 0.2s ease; }
  .install-ios-card { position: relative; max-width: 380px; width: 100%; padding: 26px 24px 22px;
    border-radius: 18px; text-align: center; max-height: 88vh; overflow-y: auto;
    background: linear-gradient(135deg, rgba(26,29,46,0.98), rgba(19,21,31,0.98));
    border: 1px solid rgba(167,139,250,0.3); box-shadow: 0 30px 70px rgba(0,0,0,0.6); }
  .install-ios-close { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; display: flex;
    align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent;
    color: #64748b; cursor: pointer; }
  .install-ios-close:hover { color: #e2e8f0; background: rgba(148,163,184,0.12); }
  .install-ios-icon { width: 62px; height: 62px; border-radius: 16px; }
  .install-ios-card h2 { font-size: 1.12rem; font-weight: 700; color: #e2e8f0; margin: 14px 0 16px; line-height: 1.4; }
  .install-ios-steps { text-align: left; margin: 0 0 14px; padding-left: 22px; color: #cbd5e1;
    font-size: 0.88rem; line-height: 1.7; }
  .install-ios-steps li { margin-bottom: 8px; }
  .install-ios-steps b { color: #a78bfa; }
  .install-ios-share { vertical-align: -2px; color: #60a5fa; }
  .install-ios-note { font-size: 0.76rem; color: #94a3b8; margin: 0; }
  html[data-theme="light"] .install-ios { background: rgba(15,23,42,0.45); }
  html[data-theme="light"] .install-ios-card { background: linear-gradient(135deg, #ffffff, #f8fafc);
    border-color: rgba(124,58,237,0.22); box-shadow: 0 24px 56px rgba(15,23,42,0.2); }
  html[data-theme="light"] .install-ios-card h2 { color: #1f2937; }
  html[data-theme="light"] .install-ios-steps { color: #334155; }
  html[data-theme="light"] .install-ios-steps b { color: #6d28d9; }
  html[data-theme="light"] .install-ios-note { color: #64748b; }
  html[data-theme="light"] .install-ios-close:hover { color: #1f2937; background: rgba(100,116,139,0.12); }

  /* Standalone (installed) — no browser chrome, so pad around the notch. */
  @media (display-mode: standalone) {
    header { padding-top: calc(env(safe-area-inset-top)); }
  }

  /* ── Guided Tour ───────────────────────────────────────────────────── */
  .tour-backdrop { position: fixed; inset: 0; z-index: 3000; pointer-events: auto; }
  .tour-backdrop.hidden { display: none; }
  .tour-highlight-box { position: absolute; z-index: 3001; border: 2px solid #a78bfa; border-radius: 10px;
    box-shadow: 0 0 0 9999px rgba(10,12,20,0.82), 0 0 30px rgba(167,139,250,0.35); pointer-events: none;
    transition: top 0.35s cubic-bezier(.4,0,.2,1), left 0.35s cubic-bezier(.4,0,.2,1),
                width 0.35s cubic-bezier(.4,0,.2,1), height 0.35s cubic-bezier(.4,0,.2,1); }
  .tour-tooltip { position: absolute; z-index: 3002; width: 340px; padding: 22px 24px 18px;
    background: linear-gradient(145deg, #1e2035, #181a2e); border: 1px solid #2d3148;
    border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,0.5); color: #e2e8f0;
    transition: top 0.35s cubic-bezier(.4,0,.2,1), left 0.35s cubic-bezier(.4,0,.2,1); }
  .tour-tooltip-title { font-size: 1rem; font-weight: 700; margin-bottom: 8px; color: #c4b5fd; display: flex; align-items: center; gap: 8px; }
  .tour-tooltip-body  { font-size: 0.82rem; line-height: 1.6; color: #94a3b8; margin-bottom: 16px; }
  .tour-tooltip-footer { display: flex; justify-content: space-between; align-items: center; }
  .tour-dots { display: flex; gap: 5px; }
  .tour-dot { width: 7px; height: 7px; border-radius: 50%; background: #2d3148; transition: background 0.2s; }
  .tour-dot.active { background: #a78bfa; }
  .tour-btns { display: flex; gap: 8px; }
  .tour-btn { padding: 7px 16px; border-radius: 8px; border: none; cursor: pointer; font-size: 0.78rem; font-weight: 600; transition: all 0.15s; }
  .tour-btn-skip { background: transparent; color: #94a3b8; border: 1px solid #2d3148; }
  .tour-btn-skip:hover { border-color: #475569; color: #e2e8f0; }
  .tour-btn-next { background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #fff; }
  .tour-btn-next:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(79,70,229,0.5); }
  .tour-step-badge { font-size: 0.75rem; background: #312e81; color: #c4b5fd; padding: 2px 8px; border-radius: 99px; }
  html[data-theme="light"] .tour-highlight-box { border-color: #4f46e5; box-shadow: 0 0 0 9999px rgba(200,210,230,0.85), 0 0 30px rgba(79,70,229,0.25); }
  html[data-theme="light"] .tour-tooltip { background: linear-gradient(145deg, #fff, #f1f5f9); border-color: #cbd5e1; color: #1f2937; }
  html[data-theme="light"] .tour-tooltip-title { color: #4f46e5; }
  html[data-theme="light"] .tour-tooltip-body  { color: #475569; }
/* The tooltip is a light gradient in light theme, so the dark-theme #94a3b8 skip
   label lands at 2.56:1 on it. It had no light override at all. */
html[data-theme="light"] .tour-btn-skip { color: #475569; }
html[data-theme="light"] .tour-btn-skip:hover { color: #1e293b; }
  html[data-theme="light"] .tour-dot.active { background: #4f46e5; }

  /* ── Welcome / landing overlay ─────────────────────────────────────── */
  /* The overlay now scrolls: a full-viewport hero (sign-in card) followed by
     a "Getting Started" preview section below the fold. Background gradient
     lives on the overlay itself; the grid/orbs are position:fixed so they
     stay put as decoration while `.welcome-scroll` scrolls over them. */
  .welcome-overlay { position: fixed; inset: 0; z-index: 2000; overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: radial-gradient(1200px 600px at 20% 10%, rgba(79,70,229,0.20), transparent 60%),
                radial-gradient(900px 500px at 85% 90%, rgba(14,165,233,0.18), transparent 60%),
                radial-gradient(700px 400px at 50% 50%, rgba(167,139,250,0.10), transparent 70%),
                #07080d; }
  .welcome-overlay.hidden { display: none; }
  .welcome-scroll { position: relative; z-index: 1; min-height: 100%; }
  .welcome-scroll.hidden { display: none; }
  .welcome-hero { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
    align-items: center; justify-content: center; padding: 24px; position: relative; }

  /* Bouncing "scroll for more" cue below the hero card */
  .welcome-scroll-cue { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 26px;
    background: none; border: none; color: #64748b; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.03em;
    text-transform: uppercase; cursor: pointer; padding: 6px 10px; transition: color 0.2s; }
  .welcome-scroll-cue:hover { color: #a78bfa; }
  .welcome-scroll-cue svg { animation: welcomeCueBounce 1.8s ease-in-out infinite; }
  @keyframes welcomeCueBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

  /* Floating blurred orbs */
  .welcome-orb { position: fixed; border-radius: 50%; filter: blur(60px); opacity: 0.55; pointer-events: none; }
  .welcome-orb.o1 { width: 360px; height: 360px; background: #4f46e5; top: -80px; left: -80px; animation: orbDrift1 18s ease-in-out infinite; }
  .welcome-orb.o2 { width: 280px; height: 280px; background: #0ea5e9; bottom: -60px; right: -40px; animation: orbDrift2 22s ease-in-out infinite; }
  .welcome-orb.o3 { width: 220px; height: 220px; background: #a78bfa; top: 60%; left: 70%; animation: orbDrift3 26s ease-in-out infinite; }
  .welcome-orb.o4 { width: 180px; height: 180px; background: #22d3ee; top: 12%; right: 18%; animation: orbDrift1 30s ease-in-out infinite reverse; }
  @keyframes orbDrift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(60px,40px) scale(1.1); } }
  @keyframes orbDrift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-50px,-30px) scale(0.95); } }
  @keyframes orbDrift3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,-50px) scale(1.08); } }

  /* Faint grid */
  .welcome-grid { position: fixed; inset: 0; opacity: 0.08; pointer-events: none;
    background-image:
      linear-gradient(to right,  rgba(167,139,250,0.5) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(167,139,250,0.5) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%); }

  .welcome-card { position: relative; z-index: 1; max-width: 880px; width: 100%; text-align: center;
    padding: 56px 48px; border-radius: 24px;
    background: linear-gradient(135deg, rgba(26,29,46,0.85) 0%, rgba(19,21,31,0.85) 100%);
    border: 1px solid rgba(167,139,250,0.25);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 32px 80px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.04);
    animation: welcomeIn 0.7s cubic-bezier(0.16,1,0.3,1); }
  @keyframes welcomeIn { from { opacity: 0; transform: translateY(24px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

  .welcome-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
    background: rgba(79,70,229,0.15); border: 1px solid rgba(167,139,250,0.35);
    color: #c4b5fd; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 18px; }
  .welcome-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #34d399; box-shadow: 0 0 8px #34d399; animation: pulse 2s ease-in-out infinite; }
  @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

  .welcome-card h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 700; line-height: 1.1; margin-bottom: 14px; letter-spacing: -0.02em;
    background: linear-gradient(120deg, #a78bfa 0%, #818cf8 35%, #38bdf8 70%, #22d3ee 100%);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    animation: gradientShift 6s ease-in-out infinite; }
  @keyframes gradientShift { 0%,100% { background-position: 0% center; } 50% { background-position: 100% center; } }

  .welcome-greeting { color: #cbd5e1; font-size: 1.05rem; margin-bottom: 8px; min-height: 1.3em; font-weight: 400; }
  .welcome-tagline { color: #94a3b8; font-size: 0.98rem; line-height: 1.6; margin: 0 auto 32px; max-width: 560px; }
  .welcome-tagline b { color: #e2e8f0; font-weight: 600; }

  .welcome-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 36px; max-width: 640px; margin-left: auto; margin-right: auto; }
  .welcome-stat { padding: 18px 12px; border-radius: 12px;
    background: rgba(15,17,23,0.55); border: 1px solid rgba(167,139,250,0.18);
    transition: transform 0.2s, border-color 0.2s; }
  .welcome-stat:hover { transform: translateY(-3px); border-color: rgba(167,139,250,0.5); }
  .welcome-stat-num { font-size: 1.7rem; font-weight: 700; color: #e2e8f0; line-height: 1; margin-bottom: 6px;
    background: linear-gradient(135deg, #a78bfa, #38bdf8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
  .welcome-stat-label { font-size: 0.72rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; }

  .welcome-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 36px; }
  .welcome-feature { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px;
    background: rgba(15,17,23,0.45); border: 1px solid rgba(45,49,72,0.7); text-align: left;
    font-size: 0.82rem; color: #cbd5e1; transition: all 0.2s; }
  .welcome-feature:hover { border-color: rgba(167,139,250,0.4); background: rgba(30,32,53,0.6); }
  .welcome-feature-ico { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(79,70,229,0.25), rgba(14,165,233,0.25));
    border: 1px solid rgba(167,139,250,0.3); flex-shrink: 0; }

  .welcome-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; align-items: center; }
  .welcome-cta { display: inline-flex; align-items: center; gap: 10px; padding: 14px 32px; border: none; border-radius: 12px;
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 50%, #818cf8 100%); background-size: 200% auto;
    color: white; font-size: 1rem; font-weight: 600; cursor: pointer; letter-spacing: 0.01em; text-decoration: none;
    box-shadow: 0 12px 32px rgba(79,70,229,0.4), inset 0 1px 0 rgba(255,255,255,0.18);
    transition: transform 0.18s, box-shadow 0.18s, background-position 0.4s;
    position: relative; overflow: hidden; }
  .welcome-cta::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%); transform: translateX(-100%); transition: transform 0.6s; }
  .welcome-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(79,70,229,0.55); background-position: right center; }
  .welcome-cta:hover::after { transform: translateX(100%); }
  .welcome-cta.hidden { display: none; }
  .welcome-cta-arrow { display: inline-block; transition: transform 0.2s; }
  .welcome-cta:hover .welcome-cta-arrow { transform: translateX(4px); }

  /* Secondary Sign-in button (Google) */
  .welcome-cta-secondary { display: inline-flex; align-items: center; gap: 10px; padding: 13px 24px; border-radius: 12px;
    background: rgba(255,255,255,0.96); color: #1f2937; font-size: 0.95rem; font-weight: 600; text-decoration: none;
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    transition: transform 0.18s, box-shadow 0.18s, background 0.18s; }
  .welcome-cta-secondary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,0.35); background: #ffffff; }
  .welcome-cta-secondary.hidden { display: none; }
  .welcome-g-icon { width: 18px; height: 18px; flex-shrink: 0; }

  /* Attention pulse when an anonymous visitor clicks anywhere on the overlay */
  @keyframes welcomeNudge {
    0%   { transform: scale(1);              box-shadow: 0 0 0 0 rgba(99,102,241,0.55), 0 8px 20px rgba(0,0,0,0.25); }
    25%  { transform: scale(1.08) translateX(-5px); box-shadow: 0 0 0 6px rgba(99,102,241,0.35), 0 14px 30px rgba(0,0,0,0.35); }
    50%  { transform: scale(1.06) translateX(5px); }
    75%  { transform: scale(1.04) translateX(-3px); }
    100% { transform: scale(1);              box-shadow: 0 0 0 16px rgba(99,102,241,0), 0 8px 20px rgba(0,0,0,0.25); }
  }
  .welcome-cta-secondary.welcome-nudge { animation: welcomeNudge 0.7s ease; }

  /* Sign-in hint that appears after a click (anonymous visitors) */
  .welcome-signin-hint { margin-top: 14px; font-size: 0.82rem; font-weight: 500; color: #c4b5fd;
    opacity: 0; transform: translateY(-4px); transition: opacity 0.25s, transform 0.25s; pointer-events: none; }
  .welcome-signin-hint.show { opacity: 1; transform: translateY(0); }

  /* Email/password auth block on the welcome hero (sits below the Google button). */
  .welcome-orsep { display: flex; align-items: center; gap: 12px; margin: 18px auto 4px; max-width: 320px;
    color: #64748b; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
  .welcome-orsep::before, .welcome-orsep::after { content: ''; flex: 1; height: 1px; background: rgba(148,163,184,0.25); }
  .welcome-emailauth { display: flex; flex-direction: column; gap: 10px; max-width: 320px; margin: 12px auto 0; text-align: left; }
  .welcome-auth-input { width: 100%; padding: 11px 14px; border-radius: 10px; box-sizing: border-box;
    border: 1px solid rgba(148,163,184,0.3); background: rgba(15,23,42,0.55); color: #e2e8f0;
    font-size: 0.9rem; transition: border-color 0.15s, box-shadow 0.15s; }
  .welcome-auth-input::placeholder { color: #64748b; }
  .welcome-auth-input:focus { outline: none; border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139,92,246,0.25); }
  .welcome-auth-btn { width: 100%; padding: 12px 18px; border-radius: 10px; border: none; cursor: pointer;
    background: linear-gradient(135deg, #7c3aed, #6366f1); color: #fff; font-size: 0.9rem; font-weight: 700;
    transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s; }
  .welcome-auth-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(99,102,241,0.4); }
  .welcome-auth-btn:disabled { opacity: 0.6; cursor: default; transform: none; box-shadow: none; }
  .welcome-auth-msg { min-height: 1em; font-size: 0.8rem; font-weight: 500; color: #cbd5e1; }
  .welcome-auth-msg.err { color: #fca5a5; }
  .welcome-auth-msg.ok { color: #86efac; }
  .welcome-auth-resend { color: #c4b5fd; font-weight: 600; text-decoration: underline; cursor: pointer; }
  .welcome-auth-switch { font-size: 0.8rem; color: #94a3b8; text-align: center; }
  .welcome-auth-switch a { color: #c4b5fd; font-weight: 600; text-decoration: none; cursor: pointer; }
  .welcome-auth-switch a:hover { text-decoration: underline; }

  /* "Write to us" feedback link on the welcome hero — opens the shared feedback
     modal so anonymous visitors can reach out before signing in. */
  .welcome-feedback-btn { display: inline-block; margin-top: 16px; padding: 8px 18px; border-radius: 999px;
    border: 1px solid rgba(167,139,250,0.35); background: rgba(167,139,250,0.08); color: #c4b5fd;
    font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: all 0.15s; }
  .welcome-feedback-btn:hover { background: rgba(167,139,250,0.16); border-color: rgba(167,139,250,0.6); color: #ddd6fe; transform: translateY(-1px); }

  .welcome-footer { margin-top: 24px; font-size: 0.74rem; color: #94a3b8; }
  html[data-theme="light"] .welcome-footer { color: #475569; }

  /* ── Getting Started preview (below the hero, reached by scrolling) ── */
  .welcome-guide-preview { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; padding: 8px 24px 72px; }
  .welcome-guide-head { text-align: center; margin-bottom: 26px; }
  .welcome-guide-head h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); font-weight: 700; margin-bottom: 8px; letter-spacing: -0.01em;
    background: linear-gradient(120deg, #a78bfa 0%, #38bdf8 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
  .welcome-guide-head p { color: #94a3b8; font-size: 0.92rem; max-width: 520px; margin: 0 auto; line-height: 1.55; }

  .welcome-guide-scroller { display: flex; gap: 16px; overflow-x: auto; padding: 4px 4px 16px;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .welcome-guide-scroller::-webkit-scrollbar { height: 6px; }
  .welcome-guide-scroller::-webkit-scrollbar-thumb { background: rgba(167,139,250,0.35); border-radius: 6px; }

  .welcome-guide-card { flex: 0 0 240px; scroll-snap-align: start; text-align: left; cursor: pointer;
    background: rgba(15,17,23,0.55); border: 1px solid rgba(167,139,250,0.18); border-radius: 14px;
    padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 6px;
    font: inherit; color: inherit; transition: transform 0.2s, border-color 0.2s, background 0.2s; }
  .welcome-guide-card:hover, .welcome-guide-card:focus-visible { transform: translateY(-3px);
    border-color: rgba(167,139,250,0.5); background: rgba(30,32,53,0.65); outline: none; }
  .welcome-guide-card-num { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; color: #6366f1; }
  .welcome-guide-card-icon { font-size: 1.4rem; line-height: 1; margin: 2px 0 4px; }
  .welcome-guide-card-title { font-size: 0.9rem; font-weight: 600; color: #e2e8f0; line-height: 1.3; }
  .welcome-guide-card-lead { font-size: 0.78rem; color: #94a3b8; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

  .welcome-guide-cta { display: flex; align-items: center; gap: 8px; justify-content: center; margin: 22px auto 0;
    background: none; border: 1px solid rgba(167,139,250,0.35); border-radius: 10px; padding: 11px 22px;
    color: #c4b5fd; font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: all 0.2s; }
  .welcome-guide-cta:hover { border-color: rgba(167,139,250,0.7); background: rgba(79,70,229,0.12); transform: translateY(-2px); }
  .welcome-guide-cta .welcome-cta-arrow { transition: transform 0.2s; }
  .welcome-guide-cta:hover .welcome-cta-arrow { transform: translateX(4px); }

  /* ── Landing sections (welcome overlay, below the hero) ─────────────── */
  .welcome-topbar { position: sticky; top: 0; z-index: 6; padding: 10px 0;
    background: rgba(7,8,13,0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(167,139,250,0.14); opacity: 0; transform: translateY(-100%);
    transition: opacity 0.25s ease, transform 0.25s ease; pointer-events: none; }
  .welcome-topbar.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .welcome-topbar-inner { max-width: 1120px; margin: 0 auto; padding: 0 24px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .welcome-topbar-brand { display: inline-flex; align-items: center; gap: 9px;
    font-size: 0.98rem; font-weight: 700; color: #e2e8f0; letter-spacing: -0.01em; }
  .welcome-topbar-actions { display: inline-flex; align-items: center; gap: 10px; }
  .welcome-topbar-cta { display: inline-flex; align-items: center; padding: 8px 18px; border-radius: 10px; border: none;
    background: linear-gradient(135deg, #4f46e5, #6366f1); color: #fff; font-size: 0.85rem; font-weight: 600;
    text-decoration: none; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
  .welcome-topbar-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(79,70,229,0.4); }
  .welcome-topbar-cta.hidden { display: none; }

  .welcome-cta-ghost { display: inline-flex; align-items: center; padding: 13px 24px; border-radius: 12px;
    background: transparent; border: 1px solid rgba(167,139,250,0.35); color: #c4b5fd;
    font-size: 0.92rem; font-weight: 600; cursor: pointer; transition: all 0.18s; }
  .welcome-cta-ghost:hover { border-color: rgba(167,139,250,0.7); background: rgba(79,70,229,0.12); transform: translateY(-2px); }

  .welcome-section { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; padding: 64px 24px; text-align: center; }
  .welcome-eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: #8b5cf6; margin-bottom: 10px; }
  .welcome-h2 { font-size: clamp(1.5rem, 3.6vw, 2.2rem); font-weight: 700; letter-spacing: -0.02em;
    line-height: 1.15; margin: 0 0 10px; color: #e2e8f0; }
  .welcome-sub { color: #94a3b8; font-size: 0.95rem; line-height: 1.6; max-width: 600px; margin: 0 auto 32px; }

  /* Product screenshot band */
  .welcome-shot-frame { position: relative; max-width: 940px; margin: 8px auto 0; border-radius: 16px; overflow: hidden;
    border: 1px solid rgba(167,139,250,0.22); background: #0b0d14;
    box-shadow: 0 40px 90px rgba(0,0,0,0.55); }
  .welcome-shot-bar { display: flex; align-items: center; gap: 6px; padding: 9px 14px;
    background: rgba(19,21,31,0.95); border-bottom: 1px solid rgba(167,139,250,0.15); }
  .welcome-shot-bar span { width: 9px; height: 9px; border-radius: 50%; background: #334155; }
  .welcome-shot-bar span:first-child { background: #f87171; }
  .welcome-shot-bar span:nth-child(2) { background: #fbbf24; }
  .welcome-shot-bar span:nth-child(3) { background: #34d399; }
  .welcome-shot-bar em { margin-left: 12px; font-style: normal; font-size: 0.72rem; color: #64748b; }
  .welcome-shot-frame > img { display: block; width: 100%; height: auto; }
  .welcome-shot-inset { position: absolute; right: 18px; bottom: 18px; width: 34%; max-width: 300px;
    border-radius: 10px; overflow: hidden; border: 1px solid rgba(167,139,250,0.3);
    box-shadow: 0 20px 45px rgba(0,0,0,0.6); }
  .welcome-shot-inset img { display: block; width: 100%; height: auto; }

  /* Stats band */
  .welcome-statband { position: relative; z-index: 1; padding: 34px 24px;
    background: rgba(15,17,23,0.5); border-top: 1px solid rgba(167,139,250,0.14); border-bottom: 1px solid rgba(167,139,250,0.14); }
  .welcome-statband-inner { max-width: 900px; margin: 0 auto; }
  .welcome-statband .welcome-stats { margin-bottom: 0; max-width: 100%; }
  .welcome-statband .welcome-stat { background: none; border: none; padding: 6px 12px; }
  .welcome-statband .welcome-stat:hover { transform: none; }
  .welcome-statband .welcome-stat-num { font-size: clamp(1.8rem, 3.6vw, 2.5rem); margin-bottom: 8px; }

  /* Product cards */
  .welcome-section .welcome-features { margin-bottom: 0; gap: 16px; }
  .welcome-section .welcome-feature { display: grid; grid-template-columns: auto 1fr auto; align-items: start;
    gap: 14px; padding: 22px 20px; border-radius: 16px; cursor: pointer; font: inherit; text-align: left; }
  .welcome-section .welcome-feature:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0,0,0,0.35); }
  /* The grid is 3-up, so a count that isn't a multiple of 3 leaves the last row
     ragged. A card that is BOTH the last one and the first of its row spans the
     full width instead of sitting alone in column one. */
  .welcome-section .welcome-features > .welcome-feature:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
  .welcome-section .welcome-feature-ico { width: 38px; height: 38px; border-radius: 11px; }
  .welcome-feature-body { display: flex; flex-direction: column; gap: 6px; }
  .welcome-feature-title { font-size: 0.98rem; font-weight: 700; color: #e2e8f0; line-height: 1.25; }
  .welcome-feature-desc { font-size: 0.83rem; color: #94a3b8; line-height: 1.55; }
  .welcome-feature-go { font-size: 1.3rem; color: #6366f1; line-height: 1; transition: transform 0.2s; }
  .welcome-feature:hover .welcome-feature-go { transform: translateX(3px); }

  /* 3 steps */
  .welcome-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; position: relative; }
  .welcome-step { text-align: center; padding: 8px 14px; }
  .welcome-step-num { width: 42px; height: 42px; margin: 0 auto 14px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 1.05rem; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, #4f46e5, #6366f1); box-shadow: 0 10px 24px rgba(79,70,229,0.35); }
  .welcome-step-title { font-size: 1rem; font-weight: 700; color: #e2e8f0; margin-bottom: 6px; }
  .welcome-step-desc { font-size: 0.85rem; color: #94a3b8; line-height: 1.55; max-width: 260px; margin: 0 auto; }

  /* Pricing */
  .welcome-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; text-align: left; }
  .welcome-plan { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px 22px 24px;
    border-radius: 18px; background: linear-gradient(160deg, rgba(26,29,46,0.85) 0%, rgba(19,21,31,0.9) 100%);
    border: 1px solid rgba(45,49,72,0.9); }
  .welcome-plan-basic { border-color: rgba(167,139,250,0.4); box-shadow: 0 24px 60px rgba(0,0,0,0.45); }
  .welcome-plan-soon { opacity: 0.82; }
  .welcome-plan-badge { position: absolute; top: -11px; left: 22px; padding: 4px 11px; border-radius: 999px;
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #fff;
    background: linear-gradient(135deg, #4f46e5, #6366f1); }
  .welcome-plan-badge-soon { background: rgba(45,49,72,0.95); color: #94a3b8; }
  .welcome-plan-name { font-size: 1.15rem; font-weight: 700; color: #e2e8f0; margin-top: 4px; }
  .welcome-plan-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .welcome-plan-amount { font-size: 1.9rem; font-weight: 800; color: #a78bfa; line-height: 1.1; }
  .welcome-plan-per { font-size: 0.82rem; color: #94a3b8; }
  .welcome-plan-desc { font-size: 0.85rem; color: #94a3b8; line-height: 1.55; }
  .welcome-plan-heading { margin-top: 6px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: #64748b; }
  .welcome-plan-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .welcome-plan-list li { position: relative; padding-left: 22px; font-size: 0.85rem; color: #cbd5e1; line-height: 1.5; }
  .welcome-plan-list li::before { content: '\2713'; position: absolute; left: 0; top: 0; color: #34d399; font-weight: 700; }
  .welcome-plan-list li b { color: #e2e8f0; }
  .welcome-plan-limits li::before { content: '\2022'; color: #a78bfa; }
  .welcome-plan-cta { margin-top: auto; width: 100%; justify-content: center; }
.admin-card-subtitle { margin: 18px 0 8px; font-size: 0.86rem; font-weight: 700; color: #94a3b8;
  letter-spacing: 0.04em; text-transform: uppercase; }
/* Billing cycle switch + trial button. The cycle row sits ABOVE the CTA and is
   the only place `margin-top:auto` may live, otherwise the toggle and the
   button both try to claim the card's spare vertical space and separate. */
.welcome-plan-cycle { margin-top: auto; display: flex; gap: 6px; padding: 4px; border-radius: 10px;
  background: rgba(15,17,23,0.55); border: 1px solid rgba(45,49,72,0.9); }
.welcome-plan-cycle + .welcome-plan-cta { margin-top: 10px; }
.welcome-cycle-btn { flex: 1; padding: 8px 10px; border: 0; border-radius: 7px; background: transparent;
  color: #94a3b8; font-size: 0.82rem; font-weight: 600; cursor: pointer; }
.welcome-cycle-btn.is-active { background: rgba(99,102,241,0.18); color: #e2e8f0; }
.welcome-cycle-btn:hover { color: #e2e8f0; }
.welcome-plan-fineprint { margin: 10px 0 0; font-size: 0.72rem; line-height: 1.5; color: #64748b; text-align: center; }
.billing-note { margin: 0 0 10px; font-size: 0.88rem; line-height: 1.6; color: #94a3b8; }
.billing-note b { color: #e2e8f0; }
.billing-link { color: #a78bfa; font-weight: 600; text-decoration: none; }
.billing-link:hover { text-decoration: underline; }
/* ── The subscribe form (free Advanced trial) ──────────────────────────────
   Shares the modal shell with the paid checkout, so it inherits the backdrop,
   the width and the close button and only has to style its own fields. */
.billing-field { margin: 0 0 12px; }
.billing-label { display: block; margin: 0 0 5px; font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.02em; color: #94a3b8; }
.billing-input, .billing-phone { width: 100%; box-sizing: border-box; padding: 9px 11px;
  border-radius: 9px; border: 1px solid rgba(45,49,72,0.9); background: rgba(15,17,23,0.6);
  color: #e2e8f0; font-size: 0.88rem; font-family: inherit; }
.billing-input:focus, .billing-phone:focus { outline: none; border-color: rgba(99,102,241,0.8); }
.billing-row { display: flex; gap: 10px; }
.billing-row .billing-field { flex: 1; min-width: 0; }
.billing-choice { display: flex; gap: 8px; }
.billing-choice-btn { flex: 1; padding: 9px 10px; border-radius: 9px;
  border: 1px solid rgba(45,49,72,0.9); background: rgba(15,17,23,0.6); color: #94a3b8;
  font-size: 0.85rem; font-weight: 600; font-family: inherit; cursor: pointer; }
.billing-choice-btn.is-active { background: rgba(99,102,241,0.2); border-color: rgba(99,102,241,0.8); color: #e2e8f0; }
.billing-submit { width: 100%; margin-top: 4px; }
@media (max-width: 520px) { .billing-row { flex-direction: column; gap: 0; } }
html[data-theme="light"] .billing-label { color: #475569; }
html[data-theme="light"] .billing-input, html[data-theme="light"] .billing-phone,
html[data-theme="light"] .billing-choice-btn { background: #fff; border-color: #cbd5e1; color: #1e293b; }
html[data-theme="light"] .billing-choice-btn { color: #475569; }
html[data-theme="light"] .billing-choice-btn.is-active { background: rgba(99,102,241,0.14); border-color: #6366f1; color: #1e293b; }
/* The subscriber list. Scrolls inside its own box rather than widening the
   card — an email address is arbitrarily long and would otherwise push the
   whole admin console into a horizontal scroll. */
#admin-billing-subs { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.admin-table th { text-align: left; padding: 6px 10px; color: #64748b; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.7rem;
  border-bottom: 1px solid rgba(45,49,72,0.9); white-space: nowrap; }
.admin-table td { padding: 7px 10px; color: #cbd5e1; border-bottom: 1px solid rgba(45,49,72,0.5);
  white-space: nowrap; }
html[data-theme="light"] .admin-table td { color: #334155; }
html[data-theme="light"] .welcome-cycle-btn.is-active { background: rgba(99,102,241,0.14); color: #1e293b; }
html[data-theme="light"] .billing-note b { color: #1e293b; }
  .welcome-plan-cta-soon { margin-top: auto; width: 100%; padding: 13px 18px; border-radius: 12px; border: 1px dashed rgba(45,49,72,0.9);
    background: rgba(15,17,23,0.55); color: #94a3b8; font-size: 0.88rem; font-weight: 600; cursor: not-allowed; }
  .welcome-plan-contact { margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; gap: 4px; font-size: 0.84rem; }
  .welcome-plan-contact-label { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: #64748b; font-weight: 700; }
  .welcome-plan-contact a { color: #a78bfa; text-decoration: none; word-break: break-word; }
  .welcome-plan-contact a:hover { text-decoration: underline; }
  .welcome-plan-contact + .welcome-plan-cta-soon { margin-top: 14px; }
  .welcome-plan-note { margin: 22px auto 0; max-width: 640px; font-size: 0.8rem; color: #64748b; line-height: 1.6; }

  /* Contact Us page */
  .welcome-contact { display: flex; flex-wrap: wrap; gap: 16px; }
  .welcome-contact-card { flex: 1 1 240px; min-width: 0; padding: 20px 22px; border-radius: 16px;
    background: rgba(26,29,46,0.6); border: 1px solid rgba(167,139,250,0.22);
    display: flex; flex-direction: column; gap: 8px; }
  .welcome-contact-label { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: #64748b; font-weight: 700; }
  .welcome-contact-value { color: #a78bfa; text-decoration: none; font-size: 1rem; font-weight: 600;
    word-break: break-word; }
  .welcome-contact-value:hover { text-decoration: underline; }

  /* Sign-up card */
  .welcome-authsec.hidden { display: none; }
  .welcome-authbox { max-width: 460px; margin: 0 auto; padding: 34px 28px; border-radius: 20px;
    background: linear-gradient(135deg, rgba(26,29,46,0.9) 0%, rgba(19,21,31,0.9) 100%);
    border: 1px solid rgba(167,139,250,0.25); box-shadow: 0 28px 70px rgba(0,0,0,0.5); }
  .welcome-authbox .welcome-sub { margin-bottom: 22px; }

  /* Trust strip */
  .welcome-trust-sources { font-size: 0.9rem; font-weight: 600; color: #cbd5e1; margin-bottom: 22px; }
  .welcome-trust-badges { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
  .welcome-trust-badge { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: 999px;
    background: rgba(15,17,23,0.55); border: 1px solid rgba(45,49,72,0.8); font-size: 0.84rem; color: #cbd5e1; }
  .welcome-trust-badge b { color: #e2e8f0; font-weight: 700; }
  .welcome-trust-note { margin: 22px auto 0; max-width: 560px; font-size: 0.76rem; color: #64748b; line-height: 1.55; }

  /* FAQ accordion (native <details>) */
  .welcome-faq-list { max-width: 720px; margin: 0 auto; text-align: left; display: flex; flex-direction: column; gap: 10px; }
  .welcome-faq-item { border-radius: 12px; border: 1px solid rgba(45,49,72,0.8); background: rgba(15,17,23,0.5);
    overflow: hidden; transition: border-color 0.2s; }
  .welcome-faq-item[open] { border-color: rgba(167,139,250,0.4); }
  .welcome-faq-item summary { list-style: none; cursor: pointer; padding: 16px 46px 16px 18px; position: relative;
    font-size: 0.92rem; font-weight: 600; color: #e2e8f0; }
  .welcome-faq-item summary::-webkit-details-marker { display: none; }
  .welcome-faq-item summary::after { content: '+'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
    font-size: 1.2rem; font-weight: 400; color: #8b5cf6; transition: transform 0.2s; }
  .welcome-faq-item[open] summary::after { content: '\2212'; }
  .welcome-faq-item p { margin: 0; padding: 0 18px 16px; font-size: 0.85rem; color: #94a3b8; line-height: 1.65; }

  /* ── Dedicated sign-in / sign-up page (split screen, inside the overlay) ── */
  .welcome-login { position: absolute; inset: 0; z-index: 8; display: grid; grid-template-columns: 400px 1fr;
    background: #0b0d14; overflow-y: auto; }
  .welcome-login.hidden { display: none; }
  .wlogin-aside { background: linear-gradient(170deg, #12152a 0%, #0d1020 60%, #0b0d14 100%);
    border-right: 1px solid rgba(167,139,250,0.16); padding: 34px 30px; display: flex; flex-direction: column; gap: 26px; }
  .wlogin-brand { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; font-weight: 800; color: #f1f5f9; letter-spacing: -0.02em; }
  .wlogin-brand img { border-radius: 7px; }
  .wlogin-aside-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: #e2e8f0; }
  .wlogin-news { display: flex; flex-direction: column; gap: 20px; }
  .wlogin-news-item { display: flex; gap: 13px; align-items: flex-start; }
  .wlogin-news-ico { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center;
    justify-content: center; background: rgba(139,92,246,0.14); border: 1px solid rgba(167,139,250,0.26); }
  .wlogin-news-body { min-width: 0; }
  .wlogin-news-tag { display: inline-block; margin-bottom: 5px; padding: 2px 8px; border-radius: 999px;
    background: rgba(52,211,153,0.16); color: #6ee7b7; font-size: 0.75rem; font-weight: 800;
    letter-spacing: 0.09em; text-transform: uppercase; }
  .wlogin-news-title { font-size: 0.9rem; font-weight: 700; color: #f1f5f9; margin-bottom: 3px; }
  .wlogin-news-body p { margin: 0; font-size: 0.79rem; color: #94a3b8; line-height: 1.55; }
  .wlogin-aside-foot { margin-top: auto; font-size: 0.7rem; color: #64748b; line-height: 1.6; }

  .wlogin-main { position: relative; display: flex; align-items: center; justify-content: center; padding: 60px 24px; }
  .wlogin-back { position: absolute; top: 22px; left: 24px; background: none; border: none; cursor: pointer;
    color: #94a3b8; font-size: 0.85rem; font-weight: 600; padding: 8px 10px; border-radius: 8px; transition: color 0.2s, background 0.2s; }
  .wlogin-back:hover { color: #a78bfa; background: rgba(139,92,246,0.1); }
  .wlogin-mobile-brand { display: none; align-items: center; justify-content: center; gap: 10px;
    font-size: 1.2rem; font-weight: 800; color: #f1f5f9; letter-spacing: -0.02em; }
  .wlogin-mobile-brand img { border-radius: 8px; }
  .wlogin-box { width: 100%; max-width: 400px; }
  .wlogin-title { margin: 0 0 6px; font-size: 1.75rem; font-weight: 800; color: #f1f5f9; letter-spacing: -0.02em; text-align: center; }
  .wlogin-lead { margin: 0 0 26px; font-size: 0.9rem; color: #94a3b8; text-align: center; }
  .wlogin-opts { display: flex; flex-direction: column; gap: 12px; }
  .wlogin-opt { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 18px; border-radius: 12px;
    border: 1px solid rgba(45,49,72,0.9); background: rgba(15,17,23,0.6); color: #e2e8f0; font-size: 0.92rem;
    font-weight: 600; font-family: inherit; text-decoration: none; cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.15s; }
  .wlogin-opt:hover { border-color: rgba(167,139,250,0.55); background: rgba(139,92,246,0.1); transform: translateY(-1px); }
  .wlogin-opt-ico { flex: 0 0 auto; width: 20px; height: 20px; }
  .wlogin-opt.hidden { display: none; }
  .wlogin-form { margin-top: 16px; }
  .wlogin-form.hidden { display: none; }
  .wlogin-switch { margin-top: 22px; text-align: center; font-size: 0.85rem; color: #94a3b8; }
  .wlogin-switch a { color: #a78bfa; font-weight: 700; text-decoration: none; }
  .wlogin-switch a:hover { text-decoration: underline; }
  .wlogin-note { margin: 14px 0 0; text-align: center; font-size: 0.75rem; color: #64748b; }

  /* ── Landing ribbon nav (Research / Learn mega-menus) ────────────────── */
  .welcome-topbar-nav { display: inline-flex; align-items: center; gap: 4px; margin-right: auto; margin-left: 10px; }
  .wnav-item { position: relative; }
  .wnav-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: none;
    border-radius: 9px; background: transparent; color: #cbd5e1; font-size: 0.88rem; font-weight: 600;
    font-family: inherit; cursor: pointer; transition: color 0.15s, background 0.15s; }
  .wnav-direct { text-decoration: none; }
  .wnav-trigger:hover, .wnav-item.open .wnav-trigger { color: #fff; background: rgba(139,92,246,0.14); }
  .wnav-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-top: 5px solid currentColor; opacity: 0.75; transition: transform 0.18s; }
  .wnav-item.open .wnav-caret { transform: rotate(180deg); }
  .wnav-menu { position: absolute; top: calc(100% + 10px); left: 0; z-index: 30; display: none;
    min-width: 300px; padding: 16px; border-radius: 14px; background: #12131f;
    border: 1px solid rgba(167,139,250,0.22); box-shadow: 0 24px 60px rgba(0,0,0,0.55); }
  .wnav-menu-wide { min-width: 720px; }
  .wnav-item.open .wnav-menu { display: block; }
  .wnav-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
  .wnav-menu:not(.wnav-menu-wide) .wnav-cols { grid-template-columns: 1fr; }
  .wnav-col-title { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: #8b5cf6; margin-bottom: 8px; padding-left: 10px; }
  .wnav-link { display: flex; align-items: flex-start; gap: 11px; width: 100%; padding: 9px 10px; border: none;
    border-radius: 10px; background: transparent; text-align: left; font-family: inherit; cursor: pointer;
    text-decoration: none; transition: background 0.14s; }
  .wnav-link:hover, .wnav-link:focus-visible { background: rgba(139,92,246,0.13); outline: none; }
  .wnav-link-icon { flex: 0 0 auto; font-size: 1.05rem; line-height: 1.3; }
  .wnav-link-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .wnav-link-title { font-size: 0.87rem; font-weight: 600; color: #e2e8f0; }
  .wnav-link-blurb { font-size: 0.76rem; color: #94a3b8; line-height: 1.45; }

  /* ── Mobile ribbon hamburger (Research / Learn / Sign in live in here) ── */
  .welcome-burger { display: none; align-items: center; justify-content: center; width: 42px; height: 38px;
    padding: 0; border: 1px solid rgba(167,139,250,0.28); border-radius: 10px; background: transparent;
    color: #e2e8f0; cursor: pointer; }
  .welcome-burger-box { position: relative; display: block; width: 18px; height: 12px; }
  .welcome-burger-bar, .welcome-burger-box::before, .welcome-burger-box::after {
    position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
    background: currentColor; transition: transform 0.2s, opacity 0.15s; }
  .welcome-burger-bar { top: 5px; }
  .welcome-burger-box::before { content: ''; top: 0; }
  .welcome-burger-box::after { content: ''; bottom: 0; }
  .welcome-burger.open .welcome-burger-bar { opacity: 0; }
  .welcome-burger.open .welcome-burger-box::before { transform: translateY(5px) rotate(45deg); }
  .welcome-burger.open .welcome-burger-box::after { transform: translateY(-5px) rotate(-45deg); }

  .welcome-mobile-menu { display: none; margin: 8px 8px 0; padding: 4px 14px 14px; border-radius: 14px;
    background: #12131f; border: 1px solid rgba(167,139,250,0.22); box-shadow: 0 24px 60px rgba(0,0,0,0.55);
    max-height: calc(100vh - 78px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .wmenu-nav { display: block; }
  .wmenu-nav .wnav-item { position: static; display: block; border-bottom: 1px solid rgba(148,163,184,0.14); }
  .wmenu-nav .wnav-trigger { display: flex; width: 100%; justify-content: space-between; align-items: center;
    padding: 14px 4px; font-size: 0.95rem; color: #e2e8f0; }
  .wmenu-nav .wnav-menu, .wmenu-nav .wnav-menu-wide { position: static; min-width: 0; max-height: none;
    padding: 0 0 10px; border: none; border-radius: 0; background: transparent; box-shadow: none; }
  .wmenu-nav .wnav-cols { grid-template-columns: 1fr; gap: 14px; }
  .wmenu-actions { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; }
  .wmenu-cta { display: block; width: 100%; padding: 13px 18px; border: none; border-radius: 11px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; font-size: 0.95rem; font-weight: 700;
    font-family: inherit; cursor: pointer; }
  .wmenu-cta.hidden { display: none; }

  /* ── Public Research / Learn content pages ───────────────────────────── */
  .welcome-pages { position: absolute; inset: 0; z-index: 8; overflow-y: auto;
    background: #07080d; -webkit-overflow-scrolling: touch; }
  .welcome-pages.hidden { display: none; }
  .wpage-topbar { position: sticky; top: 0; z-index: 20; padding: 10px 0;
    background: rgba(7,8,13,0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(167,139,250,0.14); }
  .wpage-topbar-inner { max-width: 1000px; margin: 0 auto; padding: 0 24px;
    display: flex; align-items: center; gap: 14px; }
  .wpage-home { display: inline-flex; align-items: center; gap: 9px; padding: 4px 6px; border: none;
    border-radius: 9px; background: transparent; color: #e2e8f0; font-size: 0.98rem; font-weight: 700;
    font-family: inherit; letter-spacing: -0.01em; cursor: pointer; }
  .wpage-home:hover { color: #fff; background: rgba(139,92,246,0.12); }
  .wpage-nav { display: inline-flex; align-items: center; gap: 4px; margin-right: auto; }
  .wpage-topbar-actions { display: inline-flex; align-items: center; gap: 10px; }
  .wpage-cta { display: inline-flex; align-items: center; padding: 8px 18px; border-radius: 10px; border: none;
    background: linear-gradient(135deg, #4f46e5, #6366f1); color: #fff; font-size: 0.85rem; font-weight: 600;
    font-family: inherit; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
  .wpage-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(79,70,229,0.4); }
  .wpage-cta.hidden { display: none; }

  .wpage { display: block; max-width: 1000px; margin: 0 auto; padding: 44px 24px 12px; }
  .wpage-eyebrow { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: #8b5cf6; margin-bottom: 12px; }
  .wpage-title { display: flex; align-items: center; gap: 12px; margin: 0 0 14px;
    font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 800; color: #f1f5f9; letter-spacing: -0.02em; line-height: 1.15; }
  .wpage-title-icon { font-size: 1.6rem; line-height: 1; }
  .wpage-lede { margin: 0 0 30px; font-size: 1.05rem; line-height: 1.65; color: #cbd5e1; max-width: 74ch; }
  /* Legal pages: effective/updated stamp under the title, and the footer link
     row that appears on the landing page, the page shell and the sign-in page. */
  .wpage-legal-dates { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 22px;
    font-size: 0.78rem; font-weight: 600; color: #94a3b8; }
  .wpage-legal-dates span { display: inline-flex; align-items: center; gap: 6px; }
  .wpage-legal-dates span::before { content: ''; width: 5px; height: 5px; border-radius: 50%;
    background: rgba(167,139,250,0.7); }
  .welcome-legal-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 8px; margin-top: 14px; font-size: 0.75rem; color: #64748b; }
  .wlegal-link { padding: 0; background: none; border: 0; font-family: inherit; font-size: inherit;
    font-weight: 600; color: #a78bfa; text-decoration: underline; text-underline-offset: 2px;
    cursor: pointer; }
  .wlegal-link:hover { color: #c4b5fd; }
  .wlogin-legal { margin: 10px 0 0; text-align: center; font-size: 0.72rem; line-height: 1.6;
    color: #64748b; }
  .wlegal-copy { margin-top: 8px; text-align: center; font-size: 0.72rem; color: #64748b; }
  .wpage-legal-copy { margin: 30px 0 0; padding-top: 18px; border-top: 1px solid rgba(148,163,184,0.16);
    font-size: 0.75rem; color: #64748b; }
  .wpage-hls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 38px; }
  .wpage-hl { padding: 20px; border-radius: 14px; background: rgba(23,25,42,0.6);
    border: 1px solid rgba(167,139,250,0.16); }
  .wpage-hl h3 { margin: 0 0 8px; font-size: 0.95rem; font-weight: 700; color: #e2e8f0; }
  .wpage-hl p { margin: 0; font-size: 0.85rem; line-height: 1.6; color: #94a3b8; }
  .wpage-section { margin-bottom: 34px; }
  .welcome-pages .welcome-pricing { margin-top: 10px; }
  .welcome-pages .welcome-plan-note { text-align: center; }
  .wpage-h2 { margin: 0 0 12px; font-size: 1.2rem; font-weight: 700; color: #f1f5f9; letter-spacing: -0.01em; }
  .wpage-section p { margin: 0 0 12px; font-size: 0.94rem; line-height: 1.72; color: #cbd5e1; max-width: 78ch; }
  .wpage-list { margin: 0; padding-left: 20px; max-width: 78ch; }
  .wpage-list li { margin-bottom: 9px; font-size: 0.94rem; line-height: 1.68; color: #cbd5e1; }
  .wpage-list li strong { color: #e2e8f0; }
  .wpage-inline-link { margin-top: 6px; padding: 9px 16px; border-radius: 10px; background: transparent;
    border: 1px solid rgba(167,139,250,0.35); color: #c4b5fd; font-size: 0.85rem; font-weight: 600;
    font-family: inherit; cursor: pointer; transition: all 0.18s; }
  .wpage-inline-link:hover { border-color: rgba(167,139,250,0.7); background: rgba(79,70,229,0.12); }
  .wpage-empty { color: #94a3b8; font-size: 0.92rem; }

  .wpage-related-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .wpage-related-card { display: flex; flex-direction: column; gap: 5px; padding: 16px; border-radius: 12px;
    background: rgba(23,25,42,0.5); border: 1px solid rgba(167,139,250,0.16); text-align: left;
    font-family: inherit; cursor: pointer; transition: transform 0.16s, border-color 0.16s; }
  .wpage-related-card:hover { transform: translateY(-2px); border-color: rgba(167,139,250,0.45); }
  .wpage-related-icon { font-size: 1.2rem; line-height: 1; }
  .wpage-related-title { font-size: 0.9rem; font-weight: 600; color: #e2e8f0; }
  .wpage-related-blurb { font-size: 0.78rem; line-height: 1.5; color: #94a3b8; }

  /* Chip table-of-contents (Learn pages) */
  .wpage-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px;
    padding-bottom: 22px; border-bottom: 1px solid rgba(167,139,250,0.14); }
  .wpage-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px;
    background: rgba(139,92,246,0.1); border: 1px solid rgba(167,139,250,0.24); color: #c4b5fd;
    font-size: 0.79rem; font-weight: 600; text-decoration: none; transition: all 0.15s; }
  .wpage-chip:hover { background: rgba(139,92,246,0.2); border-color: rgba(167,139,250,0.5); color: #ddd6fe; }
  .wpage-chip span { font-size: 0.7rem; opacity: 0.7; }

  /* Learn ▸ Financial metrics */
  .wpage-metric-group { margin-bottom: 38px; }
  .wpage-metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .wpage-metric { padding: 16px 18px; border-radius: 12px; background: rgba(23,25,42,0.5);
    border: 1px solid rgba(167,139,250,0.14); }
  .wpage-metric-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
  .wpage-metric-head h3 { margin: 0; font-size: 0.92rem; font-weight: 700; color: #e2e8f0; }
  .wpage-metric p { margin: 0 0 9px; font-size: 0.83rem; line-height: 1.6; color: #94a3b8; }
  .wpage-src { flex: 0 0 auto; padding: 3px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase; background: rgba(100,116,139,0.2); color: #94a3b8; }
  .wpage-src-yfinance { background: rgba(99,102,241,0.18); color: #a5b4fc; }
  .wpage-src-computed { background: rgba(16,185,129,0.16); color: #6ee7b7; }
  .wpage-src-excel { background: rgba(245,158,11,0.16); color: #fcd34d; }
  .wpage-formula { display: block; padding: 8px 11px; border-radius: 8px; background: rgba(2,6,23,0.6);
    border: 1px solid rgba(148,163,184,0.14); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.74rem; line-height: 1.5; color: #94a3b8; white-space: pre-wrap; word-break: break-word; }

  /* Learn ▸ chart guides (bodies come from CHART_LEARN) */
  .wpage-learn-entry { margin-bottom: 34px; padding-bottom: 30px; border-bottom: 1px solid rgba(167,139,250,0.12); }
  .wpage-learn-entry:last-child { border-bottom: none; }
  .wpage-learn-block { margin-top: 14px; padding: 16px 18px; border-radius: 12px;
    background: rgba(23,25,42,0.5); border: 1px solid rgba(167,139,250,0.14); }
  .wpage-learn-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: #8b5cf6; margin-bottom: 9px; }
  .wpage-learn-block p { margin: 0 0 10px; font-size: 0.9rem; line-height: 1.7; color: #cbd5e1; }
  .wpage-learn-block p:last-child { margin-bottom: 0; }
  .wpage-learn-block ul { margin: 0; padding-left: 20px; }
  .wpage-learn-block li { margin-bottom: 9px; font-size: 0.9rem; line-height: 1.66; color: #cbd5e1; }
  .wpage-learn-block li:last-child { margin-bottom: 0; }
  .wpage-learn-block strong { color: #e2e8f0; }
  .wpage-learn-block .learn-formula { display: block; padding: 10px 13px; margin: 10px 0; border-radius: 8px;
    background: rgba(2,6,23,0.6); border: 1px solid rgba(148,163,184,0.14);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; color: #a5b4fc; }

  /* Learn ▸ Getting started (bodies come from GUIDE_STEPS) */
  .wpage-guide-head { display: flex; align-items: center; gap: 10px; }
  .wpage-guide-num { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 999px; background: rgba(139,92,246,0.16);
    border: 1px solid rgba(167,139,250,0.3); color: #c4b5fd; font-size: 0.76rem; font-weight: 700; }
  .wpage-guide-icon { font-size: 1.1rem; line-height: 1; }
  .wpage-guide-lead { margin: 10px 0 14px; font-size: 0.95rem; line-height: 1.7; color: #cbd5e1; max-width: 78ch; }
  .wpage-guide-list { margin: 0; padding-left: 20px; max-width: 78ch; }
  .wpage-guide-list li { margin-bottom: 9px; font-size: 0.9rem; line-height: 1.68; color: #cbd5e1; }
  .wpage-guide-list li b { color: #e2e8f0; }
  .wpage-guide-shot { margin: 18px 0 0; padding: 0; }
  .wpage-guide-shot img { display: block; width: 100%; height: auto; border-radius: 12px;
    border: 1px solid rgba(167,139,250,0.16); background: rgba(2,6,23,0.4); }
  .wpage-guide-shot figcaption { margin-top: 8px; font-size: 0.78rem; line-height: 1.5; color: #94a3b8; }
  .wpage-guide-tip { margin: 16px 0 0; padding: 12px 15px; border-radius: 10px;
    background: rgba(245,158,11,0.09); border: 1px solid rgba(245,158,11,0.22);
    font-size: 0.86rem; line-height: 1.6; color: #cbd5e1; }
  .wpage-guide-tip b { margin-right: 6px; color: #fcd34d; text-transform: uppercase;
    font-size: 0.75rem; letter-spacing: 0.08em; }

  .wpage-foot { max-width: 1000px; margin: 0 auto; padding: 44px 24px 64px; text-align: center; }
  .wpage-foot h2 { margin: 0 0 10px; font-size: 1.45rem; font-weight: 800; color: #f1f5f9; letter-spacing: -0.02em; }
  .wpage-foot p { margin: 0 0 22px; font-size: 0.92rem; color: #94a3b8; }
  .wpage-foot-actions { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
  .wpage-foot-cta { padding: 13px 26px; border-radius: 12px; border: none;
    background: linear-gradient(135deg, #4f46e5, #6366f1); color: #fff; font-size: 0.94rem; font-weight: 600;
    font-family: inherit; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
  .wpage-foot-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(79,70,229,0.42); }
  .wpage-foot-ghost { padding: 13px 24px; border-radius: 12px; background: transparent;
    border: 1px solid rgba(167,139,250,0.35); color: #c4b5fd; font-size: 0.92rem; font-weight: 600;
    font-family: inherit; cursor: pointer; transition: all 0.18s; }
  .wpage-foot-ghost:hover { border-color: rgba(167,139,250,0.7); background: rgba(79,70,229,0.12); }

  @media (max-width: 720px) {
    .welcome-hero { padding: 20px 14px; min-height: auto; padding-top: 74px; padding-bottom: 34px; }
    .welcome-card { margin: auto; padding: 30px 20px; }
    .welcome-card h1 { font-size: clamp(1.75rem, 7vw, 2.4rem); margin-bottom: 12px; }
    .welcome-tagline { margin-bottom: 22px; }
    .welcome-stats { grid-template-columns: repeat(2, 1fr); margin-bottom: 22px; }
    .welcome-features { grid-template-columns: 1fr; margin-bottom: 22px; }
    .welcome-actions { flex-direction: column; }
    .welcome-actions .welcome-cta,
    .welcome-actions .welcome-cta-secondary { width: 100%; justify-content: center; }
    .welcome-topbar-inner { padding: 0 14px; }
    .welcome-section { padding: 44px 16px; }
    .welcome-shot-inset { display: none; }
    .welcome-statband { padding: 24px 14px; }
    .welcome-steps { grid-template-columns: 1fr; gap: 22px; }
    .welcome-plans { grid-template-columns: 1fr; gap: 22px; }
    .welcome-plan { padding: 24px 18px 22px; }
    .welcome-pages .welcome-pricing { margin-top: 0; }
    .welcome-authbox { padding: 26px 18px; }
    .welcome-trust-badges { flex-direction: column; align-items: stretch; }
    .welcome-actions .welcome-cta-ghost { width: 100%; justify-content: center; }
    .welcome-login { grid-template-columns: 1fr; }
    /* The auth choice owns the first screen (Vested-style), news is demoted below it */
    .wlogin-main { order: 1; min-height: 100dvh; box-sizing: border-box; flex-direction: column;
      justify-content: center; gap: 26px; padding: 64px 20px 110px; }
    .wlogin-mobile-brand { display: flex; }
    .wlogin-box { max-width: 420px; }
    .wlogin-title { font-size: 1.6rem; }
    .wlogin-lead { margin-bottom: 22px; }
    .wlogin-opts { gap: 10px; }
    .wlogin-opt { min-height: 60px; padding: 16px 18px; font-size: 0.95rem; border-radius: 14px; }
    .wlogin-opt:hover { transform: none; }
    .welcome-emailauth { max-width: none; }
    /* 16px keeps iOS Safari from zooming the page when a field takes focus */
    .welcome-auth-input { font-size: 16px; padding: 14px; }
    .welcome-auth-btn { padding: 15px 18px; font-size: 0.95rem; }
    .wlogin-back { top: 10px; left: 8px; min-height: 44px; display: inline-flex; align-items: center; }
    .wlogin-aside { order: 2; border-right: none; border-top: 1px solid rgba(167,139,250,0.16); }
    .wlogin-aside { padding: 26px 20px 30px; gap: 16px; }
    .wlogin-brand { display: none; }
    .wlogin-aside-title { font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase; color: #94a3b8; }
    .wlogin-news { gap: 14px; }
    .wlogin-news-item { gap: 11px; align-items: center; }
    .wlogin-news-ico { width: 30px; height: 30px; }
    .wlogin-news-tag { margin-bottom: 2px; }
    .wlogin-news-title { font-size: 0.85rem; margin-bottom: 0; }
    .wlogin-news-body p { display: none; }
    .wlogin-aside-foot { margin-top: 14px; }
    .welcome-guide-preview { padding: 4px 16px 56px; }
    .welcome-guide-card { flex-basis: 208px; }

    /* Ribbon nav: Research / Learn / Sign in collapse into the hamburger */
    .welcome-topbar-nav { display: none; }
    .welcome-topbar-actions { margin-left: auto; }
    .welcome-topbar-actions > .welcome-topbar-cta { display: none; }
    .welcome-burger { display: inline-flex; }
    .welcome-mobile-menu { display: block; }
    .welcome-mobile-menu.hidden { display: none; }

    /* Content-page nav: the mega-menus become full-width sheets under the bar */
    .wnav-trigger { padding: 8px 9px; font-size: 0.82rem; }
    .wnav-item { position: static; }
    .wnav-menu, .wnav-menu-wide { position: fixed; left: 8px; right: 8px; top: 58px; min-width: 0;
      max-height: calc(100vh - 74px); overflow-y: auto; padding: 14px; }
    .wnav-cols, .wnav-menu-wide .wnav-cols { grid-template-columns: 1fr; gap: 14px; }

    .wpage-topbar-inner { padding: 0 12px; gap: 8px; }
    .wpage-home span { display: none; }
    .wpage-nav { gap: 0; }
    .wpage-cta { padding: 8px 14px; font-size: 0.8rem; }
    .wpage { padding: 30px 16px 8px; }
    .wpage-lede { font-size: 0.96rem; }
    .wpage-hls { grid-template-columns: 1fr; gap: 12px; margin-bottom: 30px; }
    .wpage-related-row { grid-template-columns: 1fr; }
    .wpage-metric-grid { grid-template-columns: 1fr; }
    .wpage-guide-head { flex-wrap: wrap; gap: 8px; }
    .wpage-guide-lead, .wpage-guide-list li { font-size: 0.88rem; }
    .wpage-foot { padding: 34px 16px 52px; }
    .wpage-foot-actions { flex-direction: column; }
    .wpage-foot-cta, .wpage-foot-ghost { width: 100%; }
  }

  /* ---------- Mobile / small screens ---------- */
  @media (max-width: 768px) {
    /* Header: single row — the search field collapses behind a magnifier so the
       profile chip can never be pushed onto a second line. */
    header { padding: 10px 12px; gap: 8px 10px; flex-wrap: nowrap; }
    header h1 { font-size: 1rem; }
    header h1 img { width: 22px !important; height: 22px !important; margin-right: 6px !important; }
    #last-load { display: none; }
    .region-toggle .region-btn { padding: 5px 11px; font-size: 0.75rem; }
    .price-range-btn { padding: 5px 10px; font-size: 0.72rem; }
    #btn-guide {
      font-size: 0 !important; gap: 0 !important; padding: 8px !important;
      flex: 0 0 auto;
    }
    .user-chip { padding: 4px; flex: 0 0 auto; }
    .app-nav { display: block; }
    .header-search-toggle { display: inline-flex; }
    header .search-box { display: none; }
    /* The expanded field overlays the ribbon rather than competing for width,
       and it opens exactly where the collapsed magnifier stood — the toggle and
       the Getting Started button stand down for the duration, so ONE magnifier
       is ever on screen and tapping it collapses the field again. The hamburger
       and the profile chip both stay put. */
    header.search-open .search-box {
      display: flex; position: absolute; left: 52px; right: 54px;
      top: 50%; transform: translateY(-50%);
      max-width: none; flex: 0 0 auto; z-index: 6;
    }
    header.search-open #btn-guide { display: none !important; }
    /* The expanded field budgets `left:52px; right:54px` — exactly the burger
       and the profile chip. The bell stands down for the duration, like the
       Getting Started button above it. */
    header.search-open #notif-bell { display: none !important; }
    /* The phone full-bleed rules for .notif-drawer / .notif-drawer-head used to
       live here. They were dead: the base `.notif-drawer { width: min(380px,
       100vw) }` is declared ~3700 lines later at equal (0,1,0) specificity, so
       source order won and the drawer measured 380px on a 390px phone. They now
       sit in their own max-width:768px block AFTER the base rule, at the end of
       the notifications section. */
    header.search-open .header-search-toggle { display: none !important; }
    header.search-open .user-chip { z-index: 7; margin-left: auto; }
    .search-box-icon { pointer-events: auto; cursor: pointer; }

    /* The left sidebar is REMOVED on mobile entirely — its nav moved into the
       top-LEFT hamburger (#app-nav), deliberately apart from the profile menu
       in the top-right corner, so a rail competing for 48px of a 390px screen
       buys nothing. Desktop rules are untouched. */
    nav.sidebar, .sidebar-backdrop, .sidebar-backdrop.visible { display: none !important; }
    /* NOTE: the margin-left reset for .app-body / header lives in the LATE
       @media block (search "sidebar gutter"), because the desktop
       `.app-body.sidebar-collapsed { margin-left: 48px }` rule is defined
       further down this file at equal specificity and would win here. */

    /* Toolbar: search gets its own full-width row, controls wrap below it */
    .toolbar { padding: 10px 12px; gap: 8px; }
    .search-box { max-width: none; flex: 1 1 100%; }

    /* Tighter padding + denser table so more fits on a phone */
    .col-picker, .stat-bar, .valuation-controls { padding-left: 12px; padding-right: 12px; }
    /* The control row can be collapsed behind a toggle; expanded it stays on a
       single line that scrolls sideways — wrapping it onto two or three rows
       pushed the table itself below the fold, which is what the toggle was
       invented to avoid in the first place. */
    .stat-bar { gap: 8px; overflow: hidden; flex-wrap: nowrap; justify-content: flex-start; padding-top: 6px; padding-bottom: 6px; }
    .stat-bar-toggle { display: inline-flex; flex: 0 0 auto; padding: 5px 9px; min-height: 34px; font-size: 0.72rem; }
    .stat-bar.controls-collapsed .stat-bar-controls { display: none; }
    .stat-bar:not(.controls-collapsed) .stat-bar-controls { flex: 1 1 auto; flex-wrap: nowrap; overflow-x: auto; margin-left: 8px; min-width: 0; gap: 6px; }
    /* Compact controls: shorter labels (see .lbl-long/.lbl-short), tighter
       padding and a smaller font, but the 44px touch target is preserved. */
    .stat-bar-controls .invested-filter,
    .stat-bar-controls .btn-add,
    .stat-bar-controls .btn-columns,
    .stat-bar-controls .btn-refresh-all,
    .stat-bar-controls .btn-select { padding: 5px 9px; font-size: 0.72rem; gap: 5px; }
    .stat-bar-controls .table-market-select { padding: 5px 8px; font-size: 0.72rem; min-width: 0; }
    .stat-bar-controls .btn-columns #col-count { padding: 1px 4px; font-size: 0.62rem; }
    .col-groups { grid-template-columns: 1fr; }
    .table-wrapper { padding: 0 0 16px; margin: 0 8px; }
    .wide-view { padding: 14px 12px 0; }
    table { font-size: 0.74rem; }
    thead th { padding: 8px 9px; }
    tbody td { padding: 7px 9px; }
  }
  #no-results { text-align: center; padding: 48px; color: #94a3b8; display: none; }
  html[data-theme="light"] #no-results { color: #475569; }

  .stat-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: nowrap; padding: 8px 24px; background: #13151f; border-bottom: 1px solid #1e2035; font-size: 0.78rem; color: #94a3b8; }
  .stat-bar span b { color: #e2e8f0; }
  /* Mobile-only collapse toggle for the control row (hidden on desktop). */
  .stat-bar-toggle { display: none; align-items: center; gap: 6px; background: #1e2035; border: 1px solid #2d3148; border-radius: 8px; padding: 6px 12px; min-height: 36px; color: #94a3b8; font-size: 0.78rem; cursor: pointer; }
  .stat-bar-toggle:hover { background: #262a44; color: #e2e8f0; }
  .stat-bar-toggle.open { background: #312e81; border-color: #6366f1; color: #c7d2fe; }
  .stat-bar-toggle .stat-bar-toggle-chevron { transition: transform 0.15s ease; }
  .stat-bar-toggle.open .stat-bar-toggle-chevron { transform: rotate(180deg); }
  html[data-theme="light"] .stat-bar-toggle { background: #ffffff; border-color: #e2e8f0; color: #475569; }
  /* The table controls scroll sideways rather than wrapping onto a second row —
     on a phone a wrapped row pushed the table itself below the fold. */
  .stat-bar-controls { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; min-width: 0; scrollbar-width: thin; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .stat-bar-controls > * { flex: 0 0 auto; }
  .stat-bar-controls::-webkit-scrollbar { height: 4px; }
  .stat-bar-controls::-webkit-scrollbar-thumb { background: #2d3148; border-radius: 999px; }
  html[data-theme="light"] .stat-bar-controls::-webkit-scrollbar-thumb { background: #cbd5e1; }
  .stat-bar-controls .invested-filter, .stat-bar-controls .btn-add, .stat-bar-controls .btn-columns, .stat-bar-controls .btn-refresh-all, .stat-bar-controls .btn-select { padding: 6px 12px; font-size: 0.78rem; }
  /* Every control in this row shares one height so nothing sits taller than its
     neighbours — the Select button used to be the only one with a min-height. */
  .stat-bar-controls > button, .stat-bar-controls > select, .stat-bar-controls > .tpl-control { min-height: 36px; }
  /* Long/short label pairs: phones show the short word, everything else the
     full one. Both are always in the DOM so nothing depends on JS. */
  .lbl-short { display: none; }
  @media (max-width: 768px) {
    .lbl-long { display: none; }
    .lbl-short { display: inline; }
    .stat-bar-controls > button, .stat-bar-controls > select, .stat-bar-controls > .tpl-control { min-height: 44px; }
  }

  /* ── Multi-select (Stocks table) ───────────────────────────────────── */
  .btn-select { background: #1e2035; border: 1px solid #2d3148; border-radius: 8px; padding: 8px 14px; color: #94a3b8; font-size: 0.8rem; cursor: pointer; display: flex; align-items: center; gap: 6px; }
  .btn-select:hover { background: #262a44; color: #e2e8f0; }
  .btn-select.active { background: #312e81; border-color: #6366f1; color: #c7d2fe; }
  .selection-info { display: flex; align-items: center; gap: 8px; }
  .selection-info b { color: #c7d2fe; }
  .btn-clear-selection { background: none; border: 1px solid #2d3148; border-radius: 6px; padding: 4px 9px; color: #94a3b8; font-size: 0.74rem; cursor: pointer; }
  .btn-clear-selection:hover { border-color: #6366f1; color: #c7d2fe; }
  .row-select { width: 14px; height: 14px; margin: 0; accent-color: #6366f1; cursor: pointer; flex: 0 0 auto; vertical-align: middle; }
  thead th .row-select { margin-right: 6px; }
  html[data-theme="light"] .btn-select { background: #ffffff; border-color: #cbd5e1; color: #475569; }
  html[data-theme="light"] .btn-select:hover { background: #f1f5f9; color: #1f2937; }
  html[data-theme="light"] .btn-select.active { background: #e0e7ff; border-color: #6366f1; color: #4338ca; }
  html[data-theme="light"] .selection-info b { color: #4338ca; }
  html[data-theme="light"] .btn-clear-selection { border-color: #cbd5e1; color: #475569; }

  .btn-add { background: #065f46; border: 1px solid #059669; border-radius: 8px; padding: 8px 16px; color: #6ee7b7; font-size: 0.8rem; cursor: pointer; display: flex; align-items: center; gap: 6px; }
  .btn-add:hover { background: #047857; }
  /* Row actions menu — right-click (desktop) / long-press (touch) on a table row */
  .row-menu { position: fixed; z-index: 4000; min-width: 168px; background: #1e2035; border: 1px solid #2d3148; border-radius: 10px; padding: 6px; box-shadow: 0 12px 32px rgba(0,0,0,0.45); }
  .row-menu-head { padding: 4px 10px 6px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; color: #a78bfa; text-transform: uppercase; border-bottom: 1px solid #2d3148; margin-bottom: 4px; }
  .row-menu-item { display: flex; align-items: center; gap: 9px; width: 100%; background: none; border: 0; border-radius: 7px; padding: 9px 10px; color: #cbd5e1; font-size: 0.82rem; text-align: left; cursor: pointer; }
  .row-menu-item:hover, .row-menu-item:focus-visible { background: #262a44; color: #ffffff; outline: none; }
  .row-menu-item.danger { color: #f87171; }
  .row-menu-item.danger:hover, .row-menu-item.danger:focus-visible { background: #3b1d22; color: #fca5a5; }
  html[data-theme="light"] .row-menu { background: #ffffff; border-color: #cbd5e1; box-shadow: 0 12px 32px rgba(15,23,42,0.16); }
  html[data-theme="light"] .row-menu-head { color: #4f46e5; border-bottom-color: #e2e8f0; }
  html[data-theme="light"] .row-menu-item { color: #334155; }
  html[data-theme="light"] .row-menu-item:hover, html[data-theme="light"] .row-menu-item:focus-visible { background: #f1f5f9; color: #0f172a; }
  html[data-theme="light"] .row-menu-item.danger { color: #dc2626; }
  html[data-theme="light"] .row-menu-item.danger:hover, html[data-theme="light"] .row-menu-item.danger:focus-visible { background: #fee2e2; color: #b91c1c; }
  /* Inline remove (×) on each watchlist row. Coexists with the context menu
     above — the menu is discoverable only once you know it's there. */
  .row-remove { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 0; border-radius: 5px; background: none; color: #94a3b8; font-size: 1rem; line-height: 1; cursor: pointer; padding: 0; }
  .row-remove:hover, .row-remove:focus-visible { background: #3b1d22; color: #fca5a5; outline: none; }
  html[data-theme="light"] .row-remove { color: #475569; }
  html[data-theme="light"] .row-remove:hover, html[data-theme="light"] .row-remove:focus-visible { background: #fee2e2; color: #b91c1c; }
  /* Watchlist first-cell wrapper + ticker symbol. Extracted from inline styles
     on the rendered row so the mobile block can trim the gap without touching
     the JS. Desktop values match the previous inline styles exactly. */
  .tkr-cell { display: flex; align-items: center; gap: 6px; }
  .tkr-sym { color: #a78bfa; font-weight: 600; }
  /* NOT the dark value repeated: #a78bfa on the light sticky first column
     (#f8fafc) is 2.72:1, below WCAG AA for the one cell that identifies the
     row. #6d28d9 is the same hue and clears AA against every light row
     background this cell can take — plain, hover, selected and
     selected-hover (7.10 / 6.79 / 5.77 / 4.76). */
  html[data-theme="light"] .tkr-sym { color: #6d28d9; }
  @media (max-width: 768px) {
    /* Long-press opens the row menu — suppress the OS text-selection callout. */
    #stocks-table tbody tr { -webkit-touch-callout: none; }
    .row-menu { min-width: 190px; }
    .row-menu-item { padding: 12px 12px; font-size: 0.88rem; min-height: 44px; }
    /* Thumb-sized target without widening the sticky first column: the box is
       28px and a transparent ::after pads the hit area out to 44px. */
    .row-remove { width: 28px; height: 28px; position: relative; }
    .row-remove::after { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
  }
  /* Per-row market/currency marker ($ = US$ millions, ₹ = ₹ Crore) */
  .mkt-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 15px; height: 15px; padding: 0 3px; margin-left: 3px; border-radius: 4px; font-size: 0.66rem; font-weight: 700; line-height: 1; vertical-align: middle; flex: 0 0 auto; }
  .mkt-usa { background: rgba(59,130,246,0.18); color: #60a5fa; }
  .mkt-india { background: rgba(245,158,11,0.20); color: #fbbf24; }
  html[data-theme="light"] .mkt-usa { background: rgba(37,99,235,0.12); color: #2563eb; }
  html[data-theme="light"] .mkt-india { background: rgba(217,119,6,0.15); color: #b45309; }
  /* Editable per-row units picker ($M / ₹Cr) — Stocks table only (derived tables
     keep the read-only .mkt-badge). Tiny so it never overflows the ticker cell on
     mobile; colour tint reuses the .mkt-usa/.mkt-india rules above. */
  .mkt-select { height: 16px; padding: 0 14px 0 4px; margin-left: 3px; border: 1px solid transparent; border-radius: 4px; font-size: 0.66rem; font-weight: 700; line-height: 1; vertical-align: middle; flex: 0 0 auto; cursor: pointer; outline: none; appearance: none; -webkit-appearance: none; font-family: inherit;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%2394a3b8' stroke-width='1.5'/></svg>"); background-repeat: no-repeat; background-position: right 3px center; }
  .mkt-select:focus { border-color: #4f46e5; }
  .mkt-select.mkt-usa { border-color: rgba(59,130,246,0.35); }
  .mkt-select.mkt-india { border-color: rgba(245,158,11,0.35); }
  html[data-theme="light"] .mkt-select.mkt-usa { border-color: rgba(37,99,235,0.30); }
  html[data-theme="light"] .mkt-select.mkt-india { border-color: rgba(217,119,6,0.30); }

  /* Invested dropdown */
  .invested-select { background: #1e2035; border: 1px solid #2d3148; border-radius: 5px; padding: 3px 6px; color: #94a3b8; font-size: 0.75rem; cursor: pointer; outline: none; appearance: none; -webkit-appearance: none; width: 72px; text-align: center; }
  .invested-select:focus { border-color: #4f46e5; }
  .invested-select.val-yes  { border-color: #059669; color: #6ee7b7; background: #064e3b; }
  .invested-select.val-no   { border-color: #dc2626; color: #fca5a5; background: #450a0a; }
  .invested-select.val-maybe { border-color: #d97706; color: #fcd34d; background: #451a03; }
  .invested-select.saving { opacity: 0.5; pointer-events: none; }

  /* Inline-editable numeric override fields (Growth Guide%, Insider Share) */
  .editable-num { background: #1e2035; border: 1px solid #2d3148; border-radius: 5px; padding: 3px 6px; color: #e2e8f0; font-size: 0.75rem; width: 62px; outline: none; text-align: right; }
  .editable-num:focus { border-color: #4f46e5; }
  .editable-num:hover { border-color: #475569; }
  .editable-num.saving { opacity: 0.5; pointer-events: none; }
  html[data-theme="light"] .editable-num { background: #ffffff; border-color: #cbd5e1; color: #1f2937; }
  .editable-text { background: #1e2035; border: 1px solid #2d3148; border-radius: 5px; padding: 3px 7px; color: #e2e8f0; font-size: 0.75rem; min-width: 110px; max-width: 240px; outline: none; }
  .editable-text:focus { border-color: #4f46e5; }
  .editable-text:hover { border-color: #475569; }
  .editable-text.saving { opacity: 0.5; pointer-events: none; }
  html[data-theme="light"] .editable-text { background: #ffffff; border-color: #cbd5e1; color: #1f2937; }

  /* Invested filter */
  .invested-filter { background: #1e2035; border: 1px solid #2d3148; border-radius: 8px; padding: 8px 12px; color: #94a3b8; font-size: 0.8rem; cursor: pointer; outline: none; }
  .invested-filter:focus { border-color: #4f46e5; }
  .invested-filter.active { border-color: #d97706; color: #fcd34d; background: #1a1408; }

  /* Table-level market/units selector ($M vs ₹Cr), in the stat bar */
  .table-market-select { background: #1e2035; border: 1px solid #2d3148; border-radius: 8px; padding: 8px 10px; color: #cbd5e1; font-size: 0.8rem; font-weight: 600; cursor: pointer; outline: none; min-width: 62px; }
  .table-market-select:focus { border-color: #4f46e5; }
  .table-market-select:disabled { opacity: 0.55; cursor: progress; }

  /* Add ticker modal */
  .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 200; display: flex; align-items: center; justify-content: center; }
  .modal-backdrop.hidden { display: none; }
  /* The feedback modal can be opened from the welcome overlay (z-index 2000),
     so it must sit above it. */
  #feedback-modal { z-index: 2100; }
  .modal { background: #1a1d2e; border: 1px solid #2d3148; border-radius: 14px; padding: 28px; width: 360px; max-width: 90vw; }
  .modal h2 { font-size: 1rem; color: #e2e8f0; margin-bottom: 18px; }
  .modal label { font-size: 0.78rem; color: #94a3b8; display: block; margin-bottom: 6px; }
  .modal input[type=text] { width: 100%; background: #0f1117; border: 1px solid #2d3148; border-radius: 8px; padding: 10px 14px; color: #e2e8f0; font-size: 0.95rem; outline: none; text-transform: uppercase; letter-spacing: 0.05em; }
  .modal input[type=text]:focus { border-color: #4f46e5; }
  .modal input[type=email] { width: 100%; background: #0f1117; border: 1px solid #2d3148; border-radius: 8px; padding: 10px 14px; color: #e2e8f0; font-size: 0.9rem; outline: none; font-family: inherit; }
  .modal input[type=email]:focus { border-color: #4f46e5; }
  /* The trial modal's mobile-number field. Not styled as [type=text] on
     purpose: that rule uppercases its value, which is meaningless for digits
     and makes the placeholder shout. */
  .modal input[type=tel] { width: 100%; background: #0f1117; border: 1px solid #2d3148; border-radius: 8px; padding: 10px 14px; color: #e2e8f0; font-size: 0.95rem; outline: none; letter-spacing: 0.05em; font-family: inherit; }
  .modal input[type=tel]:focus { border-color: #4f46e5; }
  .modal textarea { width: 100%; background: #0f1117; border: 1px solid #2d3148; border-radius: 8px; padding: 10px 14px; color: #e2e8f0; font-size: 0.9rem; outline: none; resize: vertical; min-height: 120px; font-family: inherit; line-height: 1.5; }
  .modal textarea:focus { border-color: #4f46e5; }
  .add-market-select { width: 100%; background: #0f1117; border: 1px solid #2d3148; border-radius: 8px; padding: 10px 14px; color: #e2e8f0; font-size: 0.9rem; outline: none; cursor: pointer; font-family: inherit; }
  .add-market-select:focus { border-color: #4f46e5; }
  html[data-theme="light"] .add-market-select { background: #f8fafc; border-color: #cbd5e1; color: #1f2937; }
  /* Add Ticker autocomplete */
  .add-ticker-field { position: relative; }
  .add-suggest-list { list-style: none; margin: 4px 0 0; padding: 4px; position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: #12141f; border: 1px solid #2d3148; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); max-height: 260px; overflow-y: auto; }
  .add-suggest-item { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 7px 10px; border-radius: 6px; cursor: pointer; }
  .add-suggest-item:hover, .add-suggest-item.active { background: #1e2035; }
  .add-suggest-sym { font-weight: 700; color: #a78bfa; font-size: 0.85rem; flex: 0 0 auto; }
  .add-suggest-name { color: #cbd5e1; font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
  .add-suggest-meta { color: #94a3b8; font-size: 0.75rem; flex: 0 0 auto; }
  /* Non-interactive loading / empty states */
  .add-suggest-msg { padding: 9px 12px; color: #94a3b8; font-size: 0.78rem; cursor: default; list-style: none; }
  .add-suggest-msg.add-suggest-loading::before { content: '⏳ '; }
  /* A failed search is not an empty search — it gets its own state so the reader
     can tell "this ticker isn't there" from "we couldn't go and look". */
  .add-suggest-msg.add-suggest-error { color: #fca5a5; }
  .add-suggest-msg.add-suggest-error::before { content: '⚠ '; }
  html[data-theme="light"] .add-suggest-list { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
  html[data-theme="light"] .add-suggest-item:hover, html[data-theme="light"] .add-suggest-item.active { background: #f1f5f9; }
  html[data-theme="light"] .add-suggest-sym { color: #6d28d9; }
  html[data-theme="light"] .add-suggest-name { color: #334155; }
  html[data-theme="light"] .add-suggest-meta { color: #475569; }
  html[data-theme="light"] .add-suggest-msg { color: #475569; }
  html[data-theme="light"] .add-suggest-msg.add-suggest-error { color: #b91c1c; }
  .modal-actions { display: flex; gap: 10px; margin-top: 20px; justify-content: flex-end; }
  .modal-actions button { border-radius: 8px; padding: 9px 18px; font-size: 0.82rem; cursor: pointer; border: none; }
  .btn-cancel { background: #1e2035; color: #94a3b8; border: 1px solid #2d3148 !important; }
  .btn-cancel:hover { color: #e2e8f0; }
  .btn-submit { background: #4f46e5; color: white; }
  .btn-submit:hover:not(:disabled) { background: #4338ca; }
  .btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }
  .modal-error { margin-top: 10px; color: #f87171; font-size: 0.78rem; min-height: 1.2em; }
  .modal-message { color: #cbd5e1; font-size: 0.86rem; line-height: 1.55; }
  .btn-danger { background: #dc2626; color: #ffffff; }
  .btn-danger:hover:not(:disabled) { background: #b91c1c; }
  .modal-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.3); border-top-color: white; border-radius: 50%; animation: spin 0.7s linear infinite; vertical-align: middle; margin-right: 6px; }

  /* Region toggle */
  .region-toggle { display: inline-flex; background: #1e2035; border: 1px solid #2d3148; border-radius: 999px; padding: 2px; gap: 2px; }
  .region-btn { background: none; border: none; padding: 5px 14px; color: #94a3b8; font-size: 0.78rem; font-weight: 500; cursor: pointer; border-radius: 999px; transition: all 0.15s; }
  .region-btn:hover { color: #e2e8f0; }
  .region-btn.active { background: #4f46e5; color: white; }

  /* Price-chart range chips (native/Basic price chart only). Scrolls rather than
     wraps on narrow screens, matching the watchlist/stat-bar control rows. */
  .price-range { display: inline-flex; align-items: center; gap: 4px; background: #1e2035; border: 1px solid #2d3148; border-radius: 999px; padding: 2px; max-width: 100%; overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; min-width: 0; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .price-range::-webkit-scrollbar { height: 4px; }
  .price-range::-webkit-scrollbar-thumb { background: #2d3148; border-radius: 999px; }
  .price-range-btn { flex: 0 0 auto; background: none; border: none; padding: 5px 12px; color: #94a3b8; font-size: 0.76rem; font-weight: 600; cursor: pointer; border-radius: 999px; transition: all 0.15s; white-space: nowrap; }
  .price-range-btn:hover { color: #e2e8f0; }
  .price-range-btn.active { background: #4f46e5; color: #ffffff; }

  /* User chip */
  .user-chip { position: relative; display: flex; align-items: center; gap: 8px; background: #1e2035; border: 1px solid #2d3148; border-radius: 999px; padding: 4px; cursor: pointer; transition: border-color 0.15s; }
  .user-chip:hover { border-color: #4f46e5; }
  .user-chip.hidden { display: none; }
  .user-chip-avatar { width: 28px; height: 28px; border-radius: 50%; background: #4f46e5; color: white; display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 600; overflow: hidden; }
  .user-chip-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .user-menu { position: absolute; top: calc(100% + 6px); right: 0; background: #1a1d2e; border: 1px solid #2d3148; border-radius: 8px; min-width: 220px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); display: none; z-index: 200; overflow: hidden; }
  .user-menu.open { display: block; }
  .user-menu-info { padding: 12px 14px; border-bottom: 1px solid #2d3148; }
  .user-menu-info .name { font-size: 0.82rem; color: #e2e8f0; font-weight: 600; }
  .user-menu-info .email { font-size: 0.74rem; color: #64748b; margin-top: 2px; word-break: break-all; }
  .user-menu-action { display: block; width: 100%; text-align: left; background: none; border: none; padding: 10px 14px; color: #f87171; font-size: 0.8rem; cursor: pointer; }
  .user-menu-action:hover { background: #2d1b1b; }
  /* Rolled-up action rows (Help / Tour / Feedback / Share / Sign in) */
  .user-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none; padding: 9px 14px; color: #cbd5e1; font-size: 0.8rem; cursor: pointer; text-decoration: none; box-sizing: border-box; }
  .user-menu-item:hover { background: #23263a; }
  .user-menu-item svg { flex: 0 0 auto; color: #94a3b8; }
  .user-menu-divider { height: 1px; background: #2d3148; margin: 4px 0; }
  .user-chip:not(.authed) #user-menu-info { display: none; }
  .user-chip.authed .menu-signin { display: none; }
  .user-chip:not(.authed) .menu-signout { display: none; }
  html[data-theme="light"] .user-menu-item { color: #334155; }
  html[data-theme="light"] .user-menu-item:hover { background: #f1f5f9; }
  html[data-theme="light"] .user-menu-item svg { color: #64748b; }
  html[data-theme="light"] .user-menu-divider { background: #e2e8f0; }

  /* Mobile nav inside the profile dropdown. Base state is hidden — on desktop
     the left sidebar owns navigation and the hamburger doesn't exist. */
  .user-menu-nav { display: none; }
  .mnav-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none; padding: 10px 14px; color: #cbd5e1; font-size: 0.82rem; font-weight: 500; cursor: pointer; box-sizing: border-box; }
  .mnav-item:hover { background: #23263a; }
  .mnav-item svg { flex: 0 0 auto; color: #94a3b8; }
  .mnav-icon { flex: 0 0 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem; line-height: 1; }
  .mnav-item.active { background: #23263a; color: #a5b4fc; box-shadow: inset 3px 0 0 #4f46e5; }
  .mnav-item.active svg { color: #a5b4fc; }
  html[data-theme="light"] .mnav-item { color: #334155; }
  html[data-theme="light"] .mnav-item:hover { background: #f1f5f9; }
  html[data-theme="light"] .mnav-item svg { color: #64748b; }
  html[data-theme="light"] .mnav-item.active { background: #eef2ff; color: #4338ca; }
  html[data-theme="light"] .mnav-item.active svg { color: #4338ca; }

  /* ── Metric template control ──────────────────────────────────────────
     Replaces the per-page Compact/Detailed toggle. Sized to sit in the same
     toolbar slot the toggle held, so the stat bar's wrap behaviour and the
     44px mobile touch floor below still apply unchanged. */
  .tpl-control { display: inline-flex; flex: 0 1 auto; max-width: 100%; min-width: 0; align-items: center; gap: 6px; padding: 2px 2px 2px 8px; border: 1px solid #2d3148; border-radius: 999px; background: #12141f; }
  .tpl-label { font-size: 0.72rem; font-weight: 600; color: #94a3b8; white-space: nowrap; }
  .tpl-select { border: none; background: none; color: #e2e8f0; font-size: 0.75rem; font-weight: 600; padding: 4px 6px; border-radius: 999px; cursor: pointer; flex: 0 1 auto; min-width: 0; max-width: 150px; text-overflow: ellipsis; }
  .tpl-select:focus-visible { outline: 2px solid #6366f1; outline-offset: 1px; }
  .tpl-btn { border: none; background: #23263a; color: #94a3b8; font-size: 0.72rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s; }
  .tpl-btn:hover { background: #312e81; color: #c7d2fe; }
  .tpl-btn-del { padding: 4px 9px; font-size: 0.85rem; line-height: 1; }
  .tpl-btn-del:hover { background: #7f1d1d; color: #fecaca; }
  .tpl-save-input { width: 100%; box-sizing: border-box; margin: 4px 0 12px; padding: 9px 11px; border: 1px solid #2d3148; border-radius: 8px; background: #12141f; color: #e2e8f0; font-size: 0.85rem; }
  .tpl-save-input:focus-visible { outline: 2px solid #6366f1; outline-offset: 1px; }
  html[data-theme="light"] .tpl-control { border-color: #e2e8f0; background: #f8fafc; }
  html[data-theme="light"] .tpl-label { color: #64748b; }
  html[data-theme="light"] .tpl-select { color: #1e293b; }
  html[data-theme="light"] .tpl-btn { background: #e2e8f0; color: #475569; }
  html[data-theme="light"] .tpl-btn:hover { background: #e0e7ff; color: #4338ca; }
  html[data-theme="light"] .tpl-btn-del:hover { background: #fee2e2; color: #b91c1c; }
  html[data-theme="light"] .tpl-save-input { border-color: #cbd5e1; background: #ffffff; color: #1f2937; }

  /* Share row (WhatsApp / X / Instagram / LinkedIn) */
  .user-menu-share { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px 7px 14px; }
  .user-menu-share-label { font-size: 0.8rem; color: #cbd5e1; }
  .user-menu-share-icons { display: flex; gap: 2px; }
  .share-ico { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: none; background: none; border-radius: 6px; cursor: pointer; padding: 0; color: #94a3b8; transition: background 0.15s; }
  .share-ico svg { width: 18px; height: 18px; }
  .share-ico:hover { background: #23263a; }
  .share-wa { color: #25d366; }
  .share-ig { color: #e4405f; }
  .share-li { color: #0a66c2; }
  .share-x  { color: #e2e8f0; }
  html[data-theme="light"] .user-menu-share-label { color: #334155; }
  html[data-theme="light"] .share-ico:hover { background: #f1f5f9; }
  html[data-theme="light"] .share-x { color: #1f2937; }

  /* Contact-us row (Email / Call / WhatsApp) — same shape as the Share row above,
     but the targets are anchors so the browser hands off to the mail client,
     the dialer or WhatsApp natively. */
  .user-menu-contact { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px 7px 14px; }
  .user-menu-contact-label { font-size: 0.8rem; color: #cbd5e1; }
  .user-menu-contact-icons { display: flex; gap: 2px; }
  .contact-ico { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: none; background: none; border-radius: 6px; cursor: pointer; padding: 0; text-decoration: none; color: #94a3b8; transition: background 0.15s; }
  .contact-ico svg { width: 18px; height: 18px; }
  .contact-ico:hover { background: #23263a; }
  .contact-email { color: #818cf8; }
  .contact-call { color: #38bdf8; }
  .contact-wa { color: #25d366; }
  html[data-theme="light"] .user-menu-contact-label { color: #334155; }
  html[data-theme="light"] .contact-ico:hover { background: #f1f5f9; }
  html[data-theme="light"] .contact-email { color: #4f46e5; }
  html[data-theme="light"] .contact-call { color: #0284c7; }

  /* Transient toast — now the app's general notification channel (see showToast
     in valuation.js), not just the Instagram copy path it was written for. */
  .share-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #1a1d2e; color: #e2e8f0; border: 1px solid #2d3148; border-radius: 8px; padding: 10px 16px; font-size: 0.82rem; box-shadow: 0 8px 24px rgba(0,0,0,0.4); z-index: 9999; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
  .share-toast.show { opacity: 1; }
  html[data-theme="light"] .share-toast { background: #ffffff; color: #1f2937; border-color: #cbd5e1; box-shadow: 0 8px 24px rgba(15,23,42,0.15); }
  /* Error copy is a sentence, not a word — it has to be allowed to wrap, or a
     centred single line runs off both edges of a 320px screen. */
  .share-toast { max-width: min(92vw, 460px); text-align: center; line-height: 1.45; }
  .share-toast.toast-error { background: #2a1416; color: #fecaca; border-color: #7f1d1d; }
  html[data-theme="light"] .share-toast.toast-error { background: #fef2f2; color: #991b1b; border-color: #fca5a5; }

  /* Tabs — now a collapsible sidebar */
  .sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: 200px; background: #13151f; border-right: 1px solid #2d3148; display: flex; flex-direction: column; padding-top: 48px; z-index: 90; transition: transform 0.2s ease, width 0.2s ease; }
  .sidebar.collapsed { width: 48px; }
  .sidebar-toggle { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 6px; background: none; border: none; color: #94a3b8; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 91; }
  .sidebar-toggle:hover { background: #1e2035; color: #e2e8f0; }
  .sidebar.collapsed .sidebar-toggle { right: 8px; }

  .sidebar-nav { display: flex; flex-direction: column; gap: 4px; padding: 12px 8px; }
  .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 14px 12px 8px; }
  .sidebar.collapsed .sidebar-brand { justify-content: center; padding: 14px 4px 8px; }
  .sidebar-section { padding: 8px 12px; }
  .sidebar-section-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; margin-bottom: 6px; font-weight: 600; }
  .sidebar.collapsed .sidebar-section { padding: 8px 4px; overflow: hidden; }
  .sidebar-bottom { margin-top: auto; padding: 12px 8px; border-top: 1px solid #2d3148; }
  .sidebar-last-load { display: block; font-size: 0.75rem; color: #94a3b8; padding: 0 12px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sidebar.collapsed .sidebar-last-load { display: none; }
  .sidebar-item { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; color: #94a3b8; font-size: 0.88rem; font-weight: 600; cursor: pointer; border: none; background: none; text-align: left; white-space: nowrap; transition: all 0.15s; }
  .sidebar-item:hover { background: #1e2035; color: #e2e8f0; }
  .sidebar-item.active { background: #2d1b69; color: #a78bfa; }
  /* Left accent bar marks the active tab — visible in both expanded & collapsed states */
  .sidebar-item.active::before { content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: #a78bfa; }
  .sidebar-item .sidebar-icon { font-size: 18px; min-width: 20px; text-align: center; display: flex; align-items: center; justify-content: center; }
  .sidebar-item .sidebar-label { overflow: hidden; transition: opacity 0.2s; }
  .sidebar.collapsed .sidebar-label { opacity: 0; width: 0; }
  /* Collapsed rail: center the icons (drop the label gap / side padding) */
  .sidebar.collapsed .sidebar-item { padding: 10px 0; gap: 0; justify-content: center; }
  .app-body { margin-left: 200px; transition: margin-left 0.2s ease; }
  .app-body.sidebar-collapsed { margin-left: 48px; }
  header.sidebar-collapsed { margin-left: 48px; }
  /* Mobile drawer backdrop — only shown (via .visible) on small screens */
  .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 105; }
  html[data-theme="light"] .sidebar-item.active::before { background: #7c3aed; }
  html[data-theme="light"] .sidebar-last-load { color: #475569; }
  html[data-theme="light"] .sidebar { background: #ffffff; border-right-color: #e2e8f0; }
  html[data-theme="light"] .sidebar-toggle { color: #64748b; }
  html[data-theme="light"] .sidebar-toggle:hover { background: #f1f5f9; color: #1f2937; }
  html[data-theme="light"] .sidebar-item { color: #64748b; }
  html[data-theme="light"] .sidebar-item:hover { background: #f1f5f9; color: #1f2937; }
  html[data-theme="light"] .sidebar-item.active { background: #ede9fe; color: #6d28d9; }
  html[data-theme="light"] .sidebar-brand span { color: #1f2937 !important; }
  html[data-theme="light"] .sidebar-bottom { border-top-color: #e2e8f0; }

  /* ── Dashboard watchlist bar ───────────────────────────────────────────
     The user's watchlists, moved out of the sidebar to the bottom of the
     dashboard. Lives in normal document flow (fitTableWrapper() probes its
     offsetParent to subtract its height — a fixed/absolute bar would measure
     as hidden and silently zero that subtraction). */
  .wlbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 24px 12px; padding: 8px 10px; background: #13151f; border: 1px solid #2d3148; border-radius: 10px; }
  .wlbar.hidden { display: none; }
  .wlbar-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; font-weight: 600; flex: 0 0 auto; }
  /* Chips scroll sideways instead of wrapping, at every width — a wrapped row
     pushed the "+" onto a second line and stole height from the table. */
  .wlbar-chips { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; min-width: 0; flex: 1 1 0%; scrollbar-width: thin; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .wlbar-chips::-webkit-scrollbar { height: 4px; }
  .wlbar-chips::-webkit-scrollbar-thumb { background: #2d3148; border-radius: 999px; }
  html[data-theme="light"] .wlbar-chips::-webkit-scrollbar-thumb { background: #cbd5e1; }
  .wlbar-chip { display: inline-flex; align-items: baseline; gap: 6px; flex: 0 0 auto; min-height: 32px; padding: 6px 12px; border: 1px solid #2d3148; background: #1a1d2e; border-radius: 999px; color: #94a3b8; font-size: 0.82rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all 0.15s; }
  .wlbar-chip:hover { background: #1e2035; color: #e2e8f0; border-color: #3b3f5c; }
  .wlbar-chip.active { background: #2d1b69; border-color: #4c1d95; color: #a78bfa; }
  .wlbar-chip-name { overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
  .wlbar-chip-unit { font-size: 0.75rem; font-weight: 500; opacity: 0.75; }
  /* Icon-only "+": the label lives in title/aria-label so the control can never
     be the thing that forces the bar onto a second row. */
  .wlbar-add { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 32px; min-width: 32px; height: 32px; min-height: 32px; padding: 0; border: 1px dashed #2d3148; background: none; border-radius: 999px; color: #94a3b8; font-size: 1.05rem; font-weight: 700; line-height: 1; cursor: pointer; }
  .wlbar-add:hover { background: #1e2035; color: #a78bfa; border-color: #3b3f5c; }
  .wlbar-form { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1 0 100%; }
  .wlbar-add-input { min-height: 32px; box-sizing: border-box; padding: 6px 10px; border: 1px solid #3b3f5c; background: #12141f; color: #e2e8f0; border-radius: 8px; font-size: 0.82rem; }
  .wlbar-add-input:focus { outline: none; border-color: #a78bfa; }
  .wlbar-add-market { min-height: 32px; box-sizing: border-box; padding: 6px 8px; border: 1px solid #3b3f5c; background: #12141f; color: #e2e8f0; border-radius: 8px; font-size: 0.8rem; }
  .wlbar-add-go, .wlbar-add-cancel { min-height: 32px; padding: 6px 12px; border-radius: 8px; font-size: 0.8rem; font-weight: 600; cursor: pointer; border: 1px solid #3b3f5c; background: #1a1d2e; color: #e2e8f0; }
  .wlbar-add-go { background: #2d1b69; border-color: #4c1d95; color: #a78bfa; }
  .wlbar-add-err { color: #f87171; font-size: 0.72rem; line-height: 1.3; flex-basis: 100%; }

  html[data-theme="light"] .wlbar { background: #ffffff; border-color: #e2e8f0; }
  html[data-theme="light"] .wlbar-label { color: #475569; }
  html[data-theme="light"] .wlbar-chip { background: #f8fafc; border-color: #e2e8f0; color: #64748b; }
  html[data-theme="light"] .wlbar-chip:hover { background: #f1f5f9; color: #1f2937; border-color: #cbd5e1; }
  html[data-theme="light"] .wlbar-chip.active { background: #ede9fe; border-color: #ddd6fe; color: #6d28d9; }
  html[data-theme="light"] .wlbar-add { color: #475569; border-color: #e2e8f0; }
  html[data-theme="light"] .wlbar-add:hover { background: #f1f5f9; color: #7c3aed; border-color: #cbd5e1; }
  html[data-theme="light"] .wlbar-add-input,
  html[data-theme="light"] .wlbar-add-market { background: #ffffff; color: #1f2937; border-color: #cbd5e1; }
  html[data-theme="light"] .wlbar-add-input:focus { border-color: #7c3aed; }
  html[data-theme="light"] .wlbar-add-go { background: #ede9fe; border-color: #ddd6fe; color: #6d28d9; }
  html[data-theme="light"] .wlbar-add-cancel { background: #ffffff; border-color: #cbd5e1; color: #64748b; }
  html[data-theme="light"] .wlbar-add-err { color: #dc2626; }

  /* ── Analysis empty state (first child of #detail-view) ──────────────── */
  .analysis-empty { max-width: 560px; margin: 24px auto 64px; padding: 0 24px; text-align: center; }
  .analysis-empty.hidden { display: none; }
  .analysis-empty-title { font-size: 1.35rem; font-weight: 700; color: #e2e8f0; margin: 0 0 6px; }
  .analysis-empty-lead { font-size: 0.88rem; color: #64748b; margin: 0 0 18px; }
  .analysis-empty-field { position: relative; text-align: left; }
  .analysis-empty-input { width: 100%; box-sizing: border-box; min-height: 42px; padding: 10px 14px; border: 1px solid #3b3f5c; background: #12141f; color: #e2e8f0; border-radius: 10px; font-size: 0.95rem; }
  .analysis-empty-input:focus { outline: none; border-color: #a78bfa; }
  html[data-theme="light"] .analysis-empty-title { color: #1f2937; }
  html[data-theme="light"] .analysis-empty-lead { color: #64748b; }
  html[data-theme="light"] .analysis-empty-input { background: #ffffff; color: #1f2937; border-color: #cbd5e1; }
  html[data-theme="light"] .analysis-empty-input:focus { border-color: #7c3aed; }

  @media (max-width: 768px) {
    /* Reclaim the sidebar gutter. The rail is display:none on mobile, but
       sidebar.js still stamps .sidebar-collapsed on the body/header, and the
       desktop `.app-body.sidebar-collapsed { margin-left: 48px }` rule above
       has equal specificity — a media query adds none — so it beat the reset
       in the earlier mobile block and left 48px of dead space to the left of
       every table. These rules must stay AFTER that definition. */
    .app-body, .app-body.sidebar-collapsed { margin-left: 0; }
    header, header.sidebar-collapsed { margin-left: 0; }

    /* Chips scroll horizontally rather than wrapping into a tall block that
       would eat the table's vertical space. */
    .wlbar { margin: 8px 12px 10px; gap: 8px; padding: 8px; }
    .wlbar-chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .wlbar-chip { flex: 0 0 auto; min-height: 32px; }
    .wlbar-chip-name { max-width: 120px; }
    .wlbar-add { flex: 0 0 auto; width: 32px; min-width: 32px; height: 32px; min-height: 32px; }
    .wlbar-form { flex-direction: column; align-items: stretch; width: 100%; }
    .wlbar-add-input, .wlbar-add-market, .wlbar-add-go, .wlbar-add-cancel { width: 100%; min-height: 36px; }
    .analysis-empty { margin: 16px auto 32px; padding: 0 16px; }
    .analysis-empty-input { width: 100%; min-height: 42px; font-size: 1rem; }
  }

  /* Help view */
  .help-card { background: #1a1d2e; border: 1px solid #2d3148; border-radius: 10px; padding: 16px 20px; margin-bottom: 12px; }
  .help-card-header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
  .help-card-name { font-size: 0.95rem; font-weight: 600; color: #a78bfa; }
  .help-card-group { font-size: 0.72rem; color: #94a3b8; background: #0f1117; border: 1px solid #2d3148; border-radius: 4px; padding: 2px 7px; }
  .help-card-source { font-size: 0.72rem; padding: 2px 7px; border-radius: 4px; }
  .help-card-source.yfinance { background: #0c2a1a; color: #34d399; border: 1px solid #065f46; }
  .help-card-source.excel    { background: #1e1a00; color: #fbbf24; border: 1px solid #78350f; }
  .help-card-source.computed { background: #1a1040; color: #818cf8; border: 1px solid #3730a3; }
  .help-card-desc { font-size: 0.82rem; color: #94a3b8; line-height: 1.6; }
  /* pre-line so a multi-line formula (Q-Score's anchor table, the DCF stages)
     keeps its line breaks here AND in the native title tooltip, which is the
     same string. overflow-x lets a long anchor row scroll instead of wrapping. */
  .help-card-formula { font-family: monospace; font-size: 0.78rem; color: #e2e8f0; background: #0f1117; border: 1px solid #2d3148; border-radius: 6px; padding: 8px 12px; margin-top: 8px; white-space: pre-line; overflow-x: auto; }

  /* Getting Started (Guide) view */
  #guide-view { padding: 24px; max-width: 920px; margin: 0 auto; }
  .guide-hero { margin-bottom: 24px; }
  .guide-hero h1 { font-size: 1.5rem; font-weight: 700; color: #e2e8f0; margin: 0 0 8px; }
  .guide-hero p { font-size: 0.9rem; color: #94a3b8; line-height: 1.6; margin: 0; }
  .guide-toc { background: #1a1d2e; border: 1px solid #2d3148; border-radius: 12px; padding: 16px 20px; margin-bottom: 24px; }
  .guide-toc-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #64748b; margin-bottom: 10px; }
  .guide-toc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 16px; counter-reset: toc; }
  .guide-toc-list li { counter-increment: toc; }
  .guide-toc-link { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; font-size: 0.84rem; color: #cbd5e1; text-decoration: none; cursor: pointer; }
  .guide-toc-link::before { content: counter(toc); flex: none; width: 20px; height: 20px; border-radius: 50%; background: #312e81; color: #c4b5fd; font-size: 0.72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
  .guide-toc-link:hover { background: #232744; color: #fff; }
  .guide-toc-ico { font-size: 0.95rem; }
  html[data-theme="light"] .guide-toc { background: #ffffff; border-color: #e2e8f0; }
  html[data-theme="light"] .guide-toc-link { color: #334155; }
  html[data-theme="light"] .guide-toc-link::before { background: #e0e7ff; color: #4338ca; }
  html[data-theme="light"] .guide-toc-link:hover { background: #f1f5f9; color: #1f2937; }
  @media (max-width: 640px) { .guide-toc-list { grid-template-columns: 1fr; } }
  .guide-step { background: #1a1d2e; border: 1px solid #2d3148; border-radius: 12px; padding: 20px 24px; margin-bottom: 20px; scroll-margin-top: 12px; }
  .guide-step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
  .guide-step-num { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #312e81; color: #c4b5fd; font-size: 0.82rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
  .guide-step-icon { font-size: 1.1rem; }
  .guide-step-title { font-size: 1.05rem; font-weight: 600; color: #a78bfa; }
  .guide-step-lead { font-size: 0.86rem; color: #cbd5e1; line-height: 1.6; margin: 0 0 12px; }
  .guide-step-list { margin: 0; padding-left: 22px; }
  .guide-step-list li { font-size: 0.84rem; color: #94a3b8; line-height: 1.7; margin-bottom: 6px; }
  .guide-step-list li b { color: #e2e8f0; font-weight: 600; }
  .guide-tip { margin-top: 12px; font-size: 0.8rem; color: #93c5fd; background: #0f1830; border: 1px solid #1e3a5f; border-left: 3px solid #3b82f6; border-radius: 6px; padding: 8px 12px; line-height: 1.5; }
  .guide-shot { margin: 16px 0 0; }
  .guide-shot img { width: 100%; display: block; border: 1px solid #2d3148; border-radius: 8px; }
  .guide-shot figcaption { font-size: 0.76rem; color: #64748b; text-align: center; margin-top: 8px; font-style: italic; }
  .guide-shot-placeholder { width: 100%; min-height: 200px; border: 1px dashed #3a4060; border-radius: 8px; background: #0f1117; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #64748b; font-size: 0.82rem; text-align: center; padding: 24px; }
  .guide-shot-ph-ico { font-size: 1.8rem; opacity: 0.7; }
  html[data-theme="light"] .guide-hero h1 { color: #1f2937; }
  html[data-theme="light"] .guide-step { background: #ffffff; border-color: #e2e8f0; }
  html[data-theme="light"] .guide-step-num { background: #e0e7ff; color: #4338ca; }
  html[data-theme="light"] .guide-step-title { color: #4f46e5; }
  html[data-theme="light"] .guide-step-lead { color: #334155; }
  html[data-theme="light"] .guide-step-list li b { color: #1f2937; }
  html[data-theme="light"] .guide-tip { color: #1e40af; background: #eff6ff; border-color: #bfdbfe; border-left-color: #3b82f6; }
  html[data-theme="light"] .guide-shot img { border-color: #e2e8f0; }
  html[data-theme="light"] .guide-shot-placeholder { background: #f8fafc; border-color: #cbd5e1; color: #94a3b8; }

  /* DCF view */
  .dcf-info { padding: 10px 24px; background: #13151f; border-bottom: 1px solid #1e2035; font-size: 0.78rem; color: #64748b; display: none; }
  .dcf-info b { color: #a78bfa; }
  .valuation-controls { padding: 12px 24px; background: #13151f; border-bottom: 1px solid #1e2035; display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
  .valuation-controls label { display: flex; flex-direction: column; gap: 4px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; font-weight: 600; }
  .valuation-controls select, .valuation-controls input { background: #1e2035; border: 1px solid #2d3148; border-radius: 6px; padding: 7px 10px; color: #e2e8f0; font-size: 0.82rem; outline: none; }
  .valuation-controls select:focus, .valuation-controls input:focus { border-color: #4f46e5; }
  .valuation-controls input[type=number] { width: 90px; }
  .valuation-controls select:disabled { opacity: 0.45; cursor: not-allowed; }
  .val-avg-toggle { flex-direction: row !important; align-items: center; gap: 7px !important; text-transform: none !important; font-size: 0.82rem !important; color: #a78bfa !important; cursor: pointer; }
  .val-avg-toggle input { width: 15px; height: 15px; accent-color: #4f46e5; cursor: pointer; }
  .val-warning { color: #f87171; font-size: 0.78rem; align-self: center; }
  html[data-theme="light"] .valuation-controls { background: #f1f5f9; border-bottom-color: #e2e8f0; }
  html[data-theme="light"] .valuation-controls select, html[data-theme="light"] .valuation-controls input { background: #ffffff; border-color: #cbd5e1; color: #1f2937; }
  .dcf-table { border-collapse: collapse; width: 100%; font-size: 0.8rem; min-width: 800px; }
  .dcf-table thead th { background: #1a1d2e; color: #94a3b8; padding: 10px 12px; text-align: left; white-space: nowrap; position: sticky; top: 0; z-index: 10; border-bottom: 1px solid #2d3148; cursor: pointer; user-select: none; }
  .dcf-table thead th:hover { color: #e2e8f0; }
  .dcf-table thead th .sort-icon { display: inline-block; width: 9px; margin-left: 4px; text-align: center; opacity: 0; transition: opacity 0.12s; }
  .dcf-table thead th:hover .sort-icon { opacity: 0.55; }
  .dcf-table thead th.sorted .sort-icon { opacity: 1; color: #a78bfa; }
  .dcf-table tbody tr { border-bottom: 1px solid #1a1d2e; transition: background 0.1s; }
  .dcf-table tbody tr:hover { background: #1a1d2e; }
  .dcf-table tbody td { padding: 9px 12px; white-space: nowrap; }

  /* ── Mobile: turn the wide Valuation table into stacked cards ──────────
     On a phone the 800px-wide table forced most of a searched stock's row
     off-screen behind an easy-to-miss horizontal scroll. Below 768px each
     row becomes a self-contained card with label:value pairs (label from
     each cell's data-label), so a single searched stock is fully readable
     with no horizontal scrolling. */
  @media (max-width: 768px) {
    .dcf-table { min-width: 0; width: 100%; font-size: 0.82rem; }
    .dcf-table thead { display: none; }               /* header labels move into each cell */
    .dcf-table tbody tr {
      display: block; margin: 0 0 12px; border: 1px solid #2d3148; border-radius: 12px;
      background: #13151f; overflow: hidden; transition: none;
    }
    .dcf-table tbody tr:hover { background: #13151f; }
    /* Neutralise sticky/zebra/heat backgrounds so cells stack cleanly */
    .dcf-table tbody td,
    .dcf-table tbody tr:nth-child(even) td,
    .dcf-table tbody tr:hover td,
    .dcf-table tbody tr:hover td:first-child {
      display: flex; justify-content: space-between; align-items: center; gap: 16px;
      padding: 9px 14px; white-space: normal; text-align: right;
      position: static !important; background: transparent !important;
      box-shadow: none !important; color: inherit !important;
      border-bottom: 1px solid #1e2035;
    }
    .dcf-table tbody td:last-child { border-bottom: none; }
    .dcf-table tbody td::before {
      content: attr(data-label); flex: 0 0 44%; text-align: left;
      font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
      letter-spacing: 0.03em; color: #64748b;
    }
    /* Ticker cell = card header (bigger, no label, accent bg) */
    .dcf-table tbody td:first-child {
      background: #1a1d2e !important; padding: 11px 14px; border-bottom: 1px solid #2d3148;
    }
    .dcf-table tbody td:first-child::before { display: none; }
    .dcf-table tbody td:first-child .val-ticker-link { font-size: 1rem; font-weight: 700; }
    .dcf-table tbody td:first-child .val-ticker-chevron { opacity: 1; }
    .dcf-table tbody td .invested-select { max-width: 130px; }
    html[data-theme="light"] .dcf-table tbody tr,
    html[data-theme="light"] .dcf-table tbody tr:hover { background: #ffffff; border-color: #e2e8f0; }
    html[data-theme="light"] .dcf-table tbody td,
    html[data-theme="light"] .dcf-table tbody tr:nth-child(even) td,
    html[data-theme="light"] .dcf-table tbody tr:hover td,
    html[data-theme="light"] .dcf-table tbody tr:hover td:first-child { border-bottom-color: #f1f5f9; }
    html[data-theme="light"] .dcf-table tbody td:first-child { background: #f8fafc !important; border-bottom-color: #e2e8f0; }
  }

  /* ── Light theme: components that default to dark ─────────────────────── */
  /* Inline-styled header button (#btn-guide) light overrides live above. */
  html[data-theme="light"] #col-count { background: #e0e7ff !important; color: #4338ca !important; }
  /* Sorted-column arrow, toggle-all, average toggle: purple → primary indigo for contrast on light */
  html[data-theme="light"] thead th.sorted .sort-icon,
  html[data-theme="light"] .dcf-table thead th.sorted .sort-icon { color: #4f46e5; }
  html[data-theme="light"] .col-group-toggle-all:hover { color: #4f46e5; }
  html[data-theme="light"] .val-avg-toggle { color: #4338ca !important; }
  /* Add Ticker button + NEW badge (branded green) */
  html[data-theme="light"] .btn-add { background: #d1fae5; border-color: #6ee7b7; color: #047857; }
  html[data-theme="light"] .btn-add:hover { background: #a7f3d0; }
  /* Invested filter pill */
  html[data-theme="light"] .invested-filter { background: #ffffff; border-color: #cbd5e1; color: #475569; }
  html[data-theme="light"] .invested-filter.active { background: #fef3c7; border-color: #fcd34d; color: #b45309; }
  html[data-theme="light"] .table-market-select { background: #ffffff; border-color: #cbd5e1; color: #334155; }
  /* Loading overlay */
  html[data-theme="light"] .loading-overlay { background: rgba(248,250,252,0.88); }
  html[data-theme="light"] .spinner { border-color: #cbd5e1; border-top-color: #4f46e5; }
  html[data-theme="light"] .loading-overlay p { color: #475569; }
  /* User chip + dropdown menu */
  html[data-theme="light"] .user-chip { background: #f8fafc; border-color: #cbd5e1; }
  html[data-theme="light"] .user-menu { background: #ffffff; border-color: #cbd5e1; box-shadow: 0 8px 24px rgba(15,23,42,0.15); }
  html[data-theme="light"] .user-menu-info { border-bottom-color: #e2e8f0; }
  html[data-theme="light"] .user-menu-info .name { color: #1f2937; }
  html[data-theme="light"] .user-menu-info .email { color: #64748b; }
  html[data-theme="light"] .user-menu-action { color: #dc2626; }
  html[data-theme="light"] .user-menu-action:hover { background: #fee2e2; }
  /* Help-card group/source badges (dark pills → light tints) */
  html[data-theme="light"] .help-card-group { background: #f1f5f9; border-color: #cbd5e1; color: #475569; }
  html[data-theme="light"] .help-card-source.yfinance { background: #d1fae5; color: #047857; border-color: #6ee7b7; }
  html[data-theme="light"] .help-card-source.excel    { background: #fef3c7; color: #b45309; border-color: #fcd34d; }
  html[data-theme="light"] .help-card-source.computed { background: #e0e7ff; color: #4338ca; border-color: #c7d2fe; }
  /* Welcome / landing splash → light (theme-aware: light in the default light mode, dark in dark mode) */
  html[data-theme="light"] .welcome-overlay {
    background: radial-gradient(1200px 600px at 20% 10%, rgba(79,70,229,0.10), transparent 60%),
                radial-gradient(900px 500px at 85% 90%, rgba(14,165,233,0.10), transparent 60%),
                radial-gradient(700px 400px at 50% 50%, rgba(167,139,250,0.06), transparent 70%),
                #f8fafc; }
  html[data-theme="light"] .welcome-orb { opacity: 0.22; }
  html[data-theme="light"] .welcome-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.96) 0%, rgba(241,245,249,0.96) 100%);
    border-color: #e2e8f0;
    box-shadow: 0 32px 80px rgba(15,23,42,0.16), inset 0 1px 0 rgba(255,255,255,0.6); }
  html[data-theme="light"] .welcome-badge { background: rgba(79,70,229,0.10); border-color: rgba(79,70,229,0.30); color: #4338ca; }
  html[data-theme="light"] .welcome-card h1 { background-image: linear-gradient(120deg, #6d28d9 0%, #4f46e5 35%, #0284c7 70%, #0891b2 100%); }
  html[data-theme="light"] .welcome-greeting { color: #1f2937; }
  html[data-theme="light"] .welcome-tagline { color: #475569; }
  html[data-theme="light"] .welcome-tagline b { color: #0f172a; }
  html[data-theme="light"] .welcome-signin-hint { color: #6d28d9; }
  html[data-theme="light"] .welcome-feedback-btn { border-color: rgba(79,70,229,0.35); background: rgba(79,70,229,0.06); color: #4338ca; }
  html[data-theme="light"] .welcome-feedback-btn:hover { background: rgba(79,70,229,0.12); border-color: rgba(79,70,229,0.55); color: #3730a3; }
  html[data-theme="light"] .welcome-orsep { color: #94a3b8; }
  html[data-theme="light"] .welcome-orsep::before, html[data-theme="light"] .welcome-orsep::after { background: rgba(100,116,139,0.25); }
  html[data-theme="light"] .welcome-auth-input { background: #ffffff; border-color: #cbd5e1; color: #1f2937; }
  html[data-theme="light"] .welcome-auth-input::placeholder { color: #94a3b8; }
  html[data-theme="light"] .welcome-auth-input:focus { border-color: #6d28d9; box-shadow: 0 0 0 3px rgba(109,40,217,0.18); }
  html[data-theme="light"] .welcome-auth-msg { color: #475569; }
  html[data-theme="light"] .welcome-auth-msg.err { color: #dc2626; }
  html[data-theme="light"] .welcome-auth-msg.ok { color: #16a34a; }
  html[data-theme="light"] .welcome-auth-switch { color: #64748b; }
  html[data-theme="light"] .welcome-auth-switch a, html[data-theme="light"] .welcome-auth-resend { color: #6d28d9; }
  html[data-theme="light"] .welcome-stat { background: #ffffff; border-color: #e2e8f0; }
  html[data-theme="light"] .welcome-stat:hover { border-color: rgba(79,70,229,0.4); }
  html[data-theme="light"] .welcome-stat-num { background-image: linear-gradient(135deg, #6d28d9, #0284c7); }
  html[data-theme="light"] .welcome-feature { background: #f8fafc; border-color: #e2e8f0; color: #334155; }
  html[data-theme="light"] .welcome-feature:hover { background: #eef2ff; border-color: rgba(79,70,229,0.4); }
  html[data-theme="light"] .welcome-feature-ico { background: linear-gradient(135deg, rgba(79,70,229,0.12), rgba(14,165,233,0.12)); border-color: #c7d2fe; }
  html[data-theme="light"] .welcome-cta-secondary { border-color: #cbd5e1; box-shadow: 0 8px 20px rgba(15,23,42,0.12); }
  html[data-theme="light"] .welcome-scroll-cue { color: #94a3b8; }
  html[data-theme="light"] .welcome-scroll-cue:hover { color: #4f46e5; }
  html[data-theme="light"] .welcome-guide-head p { color: #475569; }
  html[data-theme="light"] .welcome-guide-card { background: #ffffff; border-color: #e2e8f0; }
  html[data-theme="light"] .welcome-guide-card:hover, html[data-theme="light"] .welcome-guide-card:focus-visible { background: #eef2ff; border-color: rgba(79,70,229,0.4); }
  html[data-theme="light"] .welcome-guide-card-title { color: #1f2937; }
  html[data-theme="light"] .welcome-guide-card-lead { color: #64748b; }
  html[data-theme="light"] .welcome-guide-cta { color: #4338ca; border-color: rgba(79,70,229,0.35); }
  html[data-theme="light"] .welcome-guide-cta:hover { background: rgba(79,70,229,0.08); border-color: rgba(79,70,229,0.6); }

  html[data-theme="light"] .welcome-topbar { background: rgba(255,255,255,0.85); border-bottom-color: #e2e8f0; }
  html[data-theme="light"] .welcome-login { background: #fff; }
  html[data-theme="light"] .wlogin-aside { background: linear-gradient(170deg, #0f172a 0%, #131c34 100%); border-right-color: #e2e8f0; }
  html[data-theme="light"] .wlogin-back { color: #64748b; }
  html[data-theme="light"] .wlogin-mobile-brand { color: #0f172a; }
  html[data-theme="light"] .wlogin-back:hover { color: #6d28d9; background: rgba(109,40,217,0.08); }
  html[data-theme="light"] .wlogin-title { color: #0f172a; }
  html[data-theme="light"] .wlogin-lead { color: #64748b; }
  html[data-theme="light"] .wlogin-opt { background: #fff; border-color: #e2e8f0; color: #0f172a; box-shadow: 0 1px 2px rgba(15,23,42,0.05); }
  html[data-theme="light"] .wlogin-opt:hover { border-color: #a78bfa; background: #faf8ff; }
  html[data-theme="light"] .wlogin-switch { color: #64748b; }
  html[data-theme="light"] .wlogin-switch a { color: #6d28d9; }
  html[data-theme="light"] .wlogin-note { color: #94a3b8; }
  html[data-theme="light"] .welcome-topbar-brand { color: #0f172a; }

  /* Landing ribbon nav + public content pages */
  html[data-theme="light"] .wnav-trigger { color: #475569; }
  html[data-theme="light"] .wnav-direct { text-decoration: none; }
  html[data-theme="light"] .wnav-trigger:hover,
  html[data-theme="light"] .wnav-item.open .wnav-trigger { color: #0f172a; background: rgba(109,40,217,0.08); }
  html[data-theme="light"] .wnav-menu { background: #fff; border-color: #e2e8f0; box-shadow: 0 24px 60px rgba(15,23,42,0.16); }
  html[data-theme="light"] .wnav-col-title { color: #6d28d9; }
  html[data-theme="light"] .wnav-link:hover, html[data-theme="light"] .wnav-link:focus-visible { background: #f5f3ff; }
  html[data-theme="light"] .wnav-link-title { color: #0f172a; }
  html[data-theme="light"] .wnav-link-blurb { color: #64748b; }
  html[data-theme="light"] .welcome-burger { color: #0f172a; border-color: #e2e8f0; }
  html[data-theme="light"] .welcome-mobile-menu { background: #fff; border-color: #e2e8f0;
    box-shadow: 0 24px 60px rgba(15,23,42,0.16); }
  html[data-theme="light"] .wmenu-nav .wnav-item { border-bottom-color: #e2e8f0; }
  html[data-theme="light"] .wmenu-nav .wnav-trigger { color: #0f172a; }
  html[data-theme="light"] .wmenu-nav .wnav-menu { background: transparent; border: none; box-shadow: none; }

  html[data-theme="light"] .welcome-pages { background: #f8fafc; }
  html[data-theme="light"] .welcome-pages .welcome-pricing { margin-top: 10px; }
  html[data-theme="light"] .welcome-pages .welcome-plan-note { text-align: center; }
  html[data-theme="light"] .wpage-topbar { background: rgba(255,255,255,0.9); border-bottom-color: #e2e8f0; }
  html[data-theme="light"] .wpage-home { color: #0f172a; }
  html[data-theme="light"] .wpage-home:hover { background: rgba(109,40,217,0.08); }
  html[data-theme="light"] .wpage-eyebrow { color: #6d28d9; }
  html[data-theme="light"] .wpage-title { color: #0f172a; }
  html[data-theme="light"] .wpage-lede { color: #475569; }
html[data-theme="light"] .wpage-legal-dates { color: #64748b; }
html[data-theme="light"] .welcome-legal-bar { color: #94a3b8; }
html[data-theme="light"] .wlogin-legal { color: #94a3b8; }
html[data-theme="light"] .wlegal-copy { color: #94a3b8; }
html[data-theme="light"] .wpage-legal-copy { color: #94a3b8; border-top-color: #e2e8f0; }
html[data-theme="light"] .wlegal-link { color: #7c3aed; }
html[data-theme="light"] .wlegal-link:hover { color: #5b21b6; }
  html[data-theme="light"] .wpage-hl { background: #fff; border-color: #e2e8f0; box-shadow: 0 1px 3px rgba(15,23,42,0.05); }
  html[data-theme="light"] .wpage-hl h3 { color: #0f172a; }
  html[data-theme="light"] .wpage-hl p { color: #64748b; }
  html[data-theme="light"] .wpage-h2 { color: #0f172a; }
  html[data-theme="light"] .wpage-section p,
  html[data-theme="light"] .wpage-list li { color: #475569; }
  html[data-theme="light"] .wpage-list li strong { color: #0f172a; }
  html[data-theme="light"] .wpage-inline-link { color: #4338ca; border-color: rgba(79,70,229,0.35); }
  html[data-theme="light"] .wpage-inline-link:hover { background: rgba(79,70,229,0.08); border-color: rgba(79,70,229,0.6); }
  html[data-theme="light"] .wpage-related-card { background: #fff; border-color: #e2e8f0; }
  html[data-theme="light"] .wpage-related-card:hover { border-color: #a78bfa; }
  html[data-theme="light"] .wpage-related-title { color: #0f172a; }
  html[data-theme="light"] .wpage-related-blurb { color: #64748b; }
  html[data-theme="light"] .wpage-toc { border-bottom-color: #e2e8f0; }
  html[data-theme="light"] .wpage-chip { background: #f5f3ff; border-color: #ddd6fe; color: #6d28d9; }
  html[data-theme="light"] .wpage-chip:hover { background: #ede9fe; border-color: #a78bfa; color: #5b21b6; }
  html[data-theme="light"] .wpage-metric { background: #fff; border-color: #e2e8f0; box-shadow: 0 1px 2px rgba(15,23,42,0.04); }
  html[data-theme="light"] .wpage-metric-head h3 { color: #0f172a; }
  html[data-theme="light"] .wpage-metric p { color: #64748b; }
  html[data-theme="light"] .wpage-src { background: #f1f5f9; color: #64748b; }
  html[data-theme="light"] .wpage-src-yfinance { background: #eef2ff; color: #4338ca; }
  html[data-theme="light"] .wpage-src-computed { background: #ecfdf5; color: #047857; }
  html[data-theme="light"] .wpage-src-excel { background: #fffbeb; color: #b45309; }
  html[data-theme="light"] .wpage-formula { background: #f8fafc; border-color: #e2e8f0; color: #475569; }
  html[data-theme="light"] .wpage-learn-entry { border-bottom-color: #e2e8f0; }
  html[data-theme="light"] .wpage-learn-block { background: #fff; border-color: #e2e8f0; box-shadow: 0 1px 2px rgba(15,23,42,0.04); }
  html[data-theme="light"] .wpage-learn-label { color: #6d28d9; }
  html[data-theme="light"] .wpage-learn-block p,
  html[data-theme="light"] .wpage-learn-block li { color: #475569; }
  html[data-theme="light"] .wpage-learn-block strong { color: #0f172a; }
  html[data-theme="light"] .wpage-learn-block .learn-formula { background: #f8fafc; border-color: #e2e8f0; color: #4338ca; }
  html[data-theme="light"] .wpage-guide-num { background: #f5f3ff; border-color: #ddd6fe; color: #6d28d9; }
  html[data-theme="light"] .wpage-guide-lead,
  html[data-theme="light"] .wpage-guide-list li { color: #475569; }
  html[data-theme="light"] .wpage-guide-list li b { color: #0f172a; }
  html[data-theme="light"] .wpage-guide-shot img { background: #fff; border-color: #e2e8f0; box-shadow: 0 6px 18px rgba(15,23,42,0.07); }
  html[data-theme="light"] .wpage-guide-shot figcaption { color: #64748b; }
  html[data-theme="light"] .wpage-guide-tip { background: #fffbeb; border-color: #fde68a; color: #475569; }
  html[data-theme="light"] .wpage-guide-tip b { color: #b45309; }
  html[data-theme="light"] .wpage-foot h2 { color: #0f172a; }
  html[data-theme="light"] .wpage-foot p { color: #64748b; }
  html[data-theme="light"] .wpage-foot-ghost { color: #4338ca; border-color: rgba(79,70,229,0.35); }
  html[data-theme="light"] .wpage-foot-ghost:hover { background: rgba(79,70,229,0.08); border-color: rgba(79,70,229,0.6); }
  html[data-theme="light"] .wpage-empty { color: #64748b; }
  html[data-theme="light"] .welcome-cta-ghost { color: #4338ca; border-color: rgba(79,70,229,0.35); }
  html[data-theme="light"] .welcome-cta-ghost:hover { background: rgba(79,70,229,0.08); border-color: rgba(79,70,229,0.6); }
  html[data-theme="light"] .welcome-eyebrow { color: #6d28d9; }
  html[data-theme="light"] .welcome-h2 { color: #0f172a; }
  html[data-theme="light"] .welcome-sub { color: #475569; }
  html[data-theme="light"] .welcome-shot-frame { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 30px 70px rgba(15,23,42,0.18); }
  html[data-theme="light"] .welcome-shot-bar { background: #f1f5f9; border-bottom-color: #e2e8f0; }
  html[data-theme="light"] .welcome-shot-bar em { color: #94a3b8; }
  html[data-theme="light"] .welcome-shot-inset { border-color: #cbd5e1; box-shadow: 0 16px 36px rgba(15,23,42,0.22); }
  html[data-theme="light"] .welcome-statband { background: rgba(255,255,255,0.7); border-color: #e2e8f0; }
  html[data-theme="light"] .welcome-statband .welcome-stat { background: none; border: none; }
  html[data-theme="light"] .welcome-feature-title { color: #0f172a; }
  html[data-theme="light"] .welcome-feature-desc { color: #64748b; }
  html[data-theme="light"] .welcome-feature-go { color: #4f46e5; }
  html[data-theme="light"] .welcome-section .welcome-feature:hover { box-shadow: 0 16px 34px rgba(15,23,42,0.10); }
  html[data-theme="light"] .welcome-step-title { color: #0f172a; }
  html[data-theme="light"] .welcome-step-desc { color: #64748b; }
  html[data-theme="light"] .welcome-authbox { background: linear-gradient(160deg, #ffffff 0%, #f8fafc 100%); border-color: #e2e8f0; box-shadow: 0 24px 60px rgba(15,23,42,0.12); }
  html[data-theme="light"] .welcome-plan { background: linear-gradient(160deg, #ffffff 0%, #f8fafc 100%); border-color: #e2e8f0; }
  html[data-theme="light"] .welcome-plan-basic { border-color: rgba(79,70,229,0.35); box-shadow: 0 24px 60px rgba(15,23,42,0.12); }
  html[data-theme="light"] .welcome-plan-badge-soon { background: #e2e8f0; color: #64748b; }
  html[data-theme="light"] .welcome-plan-name { color: #0f172a; }
  html[data-theme="light"] .welcome-plan-amount { color: #6d28d9; }
  html[data-theme="light"] .welcome-plan-per { color: #64748b; }
  html[data-theme="light"] .welcome-plan-desc { color: #64748b; }
  html[data-theme="light"] .welcome-plan-heading { color: #94a3b8; }
  html[data-theme="light"] .welcome-plan-list li { color: #475569; }
  html[data-theme="light"] .welcome-plan-list li b { color: #0f172a; }
  html[data-theme="light"] .welcome-plan-list li::before { color: #059669; }
  html[data-theme="light"] .welcome-plan-limits li::before { color: #6d28d9; }
  html[data-theme="light"] .welcome-plan-cta-soon { background: #f1f5f9; border-color: #e2e8f0; color: #64748b; }
  html[data-theme="light"] .welcome-plan-contact-label { color: #94a3b8; }
  html[data-theme="light"] .welcome-plan-contact a { color: #6d28d9; }
  html[data-theme="light"] .welcome-contact-card { background: #ffffff; border-color: #e2e8f0; }
  html[data-theme="light"] .welcome-contact-label { color: #64748b; }
  html[data-theme="light"] .welcome-contact-value { color: #6d28d9; }
  html[data-theme="light"] .welcome-plan-note { color: #94a3b8; }
  html[data-theme="light"] .welcome-trust-sources { color: #334155; }
  html[data-theme="light"] .welcome-trust-badge { background: #ffffff; border-color: #e2e8f0; color: #334155; }
  html[data-theme="light"] .welcome-trust-badge b { color: #0f172a; }
  html[data-theme="light"] .welcome-trust-note { color: #94a3b8; }
  html[data-theme="light"] .welcome-faq-item { background: #ffffff; border-color: #e2e8f0; }
  html[data-theme="light"] .welcome-faq-item[open] { border-color: rgba(79,70,229,0.4); }
  html[data-theme="light"] .welcome-faq-item summary { color: #0f172a; }
  html[data-theme="light"] .welcome-faq-item summary::after { color: #6d28d9; }
  html[data-theme="light"] .welcome-faq-item p { color: #64748b; }

  /* ── Freeze the first column (Ticker) during horizontal scroll ────────── */
  /* Applies to both the Stocks table and the .dcf-table (Valuation). The header
     cell is already position:sticky (top:0); add left:0 + a higher z so the
     top-left corner stays above everything. Body cells need an opaque bg so
     scrolled columns don't show through. */
  thead th:first-child { left: 0; z-index: 20; }
  tbody td:first-child { position: sticky; left: 0; z-index: 5; background: #0f1117; }
  tbody tr:hover td:first-child { background: #1a1d2e; }
  thead th:first-child, tbody td:first-child { box-shadow: 6px 0 8px -6px rgba(0,0,0,0.45); }
  html[data-theme="light"] tbody td:first-child { background: #f8fafc; }
  html[data-theme="light"] tbody tr:hover td:first-child { background: #f1f5f9; }
  html[data-theme="light"] thead th:first-child, html[data-theme="light"] tbody td:first-child { box-shadow: 6px 0 8px -6px rgba(15,23,42,0.12); }

  /* Zebra striping — alternate row shading on every table for readability.
     Applied on td (not tr) so it also covers the opaque sticky first column;
     the :hover rules sit after so hover always wins. */
  tbody tr:nth-child(even) td { background: #15171f; }
  tbody tr:hover td, tbody tr:hover td:first-child { background: #1f2230; }
  html[data-theme="light"] tbody tr:nth-child(even) td { background: #f4f6f9; }
  html[data-theme="light"] tbody tr:hover td, html[data-theme="light"] tbody tr:hover td:first-child { background: #eef2f7; }
  /* Selected rows (multi-select mode) — declared after zebra/hover so the
     highlight always wins, including over the opaque sticky first column. */
  tbody tr.row-selected td, tbody tr.row-selected td:first-child { background: #262a54; }
  tbody tr.row-selected:hover td, tbody tr.row-selected:hover td:first-child { background: #2f3468; }
  tbody tr.row-selected td:first-child { box-shadow: inset 3px 0 0 0 #818cf8, 6px 0 8px -6px rgba(0,0,0,0.45); }
  html[data-theme="light"] tbody tr.row-selected td, html[data-theme="light"] tbody tr.row-selected td:first-child { background: #e0e7ff; }
  html[data-theme="light"] tbody tr.row-selected:hover td, html[data-theme="light"] tbody tr.row-selected:hover td:first-child { background: #c7d2fe; }
  html[data-theme="light"] tbody tr.row-selected td:first-child { box-shadow: inset 3px 0 0 0 #6366f1, 6px 0 8px -6px rgba(15,23,42,0.12); }
  /* Green/Black-Sum heatmap: the td carries an inline bg + readable text colour;
     force the inner sign-coloured span to inherit it so the heat shade shows through. */
  .heat-cell span { color: inherit !important; font-weight: 600; }
  /* ...except a NEGATIVE value, which stays red. These are the Q-Score contributor
     columns, and the sign is the single most important thing about them: a negative
     margin or a loss-making multiple must never read as an ordinary number just
     because the cell it sits in is shaded. Higher specificity than the inherit rule
     above, and a lighter/darker red than the plain .negative so it stays legible
     against the saturated heat background in each theme. */
  .heat-cell span.negative { color: #fca5a5 !important; }
  html[data-theme="light"] .heat-cell span.negative { color: #7f1d1d !important; }

  /* ── Stock Detail Page ───────────────────────────────────────────────── */
  .detail-header { display: flex; align-items: center; gap: 14px; padding: 16px 24px; border-bottom: 1px solid #1e2035; }
  .detail-back { background: none; border: 1px solid #2d3148; border-radius: 8px; padding: 7px 14px; color: #94a3b8; font-size: 0.85rem; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all 0.15s; }
  .detail-back:hover { border-color: #4f46e5; color: #a78bfa; }
  .detail-title { font-size: 1.15rem; font-weight: 700; color: #a78bfa; }
  /* Market badge: a plain, always-present signal next to the ticker so a
     resolved-but-surprising market (or a genuine mix-up) is visible instead of
     looking like an ordinary answer. Sourced only from the record the page
     actually rendered — never the active watchlist — see _detailSetMarketBadge. */
  .detail-market { font-size: 0.78rem; font-weight: 600; color: #94a3b8; background: rgba(148, 163, 184, 0.12); border: 1px solid #2d3148; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
  .detail-subtitle { font-size: 0.82rem; color: #64748b; margin-left: 4px; }
  .detail-meta { display: flex; gap: 18px; font-size: 0.8rem; color: #94a3b8; margin-left: auto; }
  .detail-meta b { color: #e2e8f0; }
  .detail-body { padding: 24px; display: flex; flex-direction: column; }
  .detail-nav { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
  .detail-nav-btn { background: none; border: 1px solid #2d3148; border-radius: 8px; padding: 6px 14px; color: #94a3b8; font-size: 0.82rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all 0.15s; }
  .detail-nav-btn:hover { border-color: #4f46e5; color: #a78bfa; }
  .detail-nav-btn.active { background: #4f46e5; border-color: #4f46e5; color: #fff; }
  /* Sub-row for the three chart pages grouped under the "Charting" button.
     Deliberately its own classes — .detail-nav-btn is shared with #mf-detail-nav. */
  .detail-subnav { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: -12px 0 20px; padding-left: 12px; border-left: 2px solid #2d3148; }
  .detail-subnav-btn { background: none; border: 1px solid transparent; border-radius: 999px; padding: 4px 12px; color: #8b93ad; font-size: 0.78rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all 0.15s; }
  .detail-subnav-btn:hover { color: #a78bfa; border-color: #4f46e5; }
  .detail-subnav-btn.active { background: rgba(79, 70, 229, 0.18); border-color: #4f46e5; color: #c4b5fd; }
  .sankey-title { font-size: 0.95rem; font-weight: 600; color: #94a3b8; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.06em; }
  .sankey-container { width: 100%; position: relative; }
  /* Mobile: let a vertical swipe scroll the page and a pinch zoom in, instead of
     the chart trapping the touch gesture. ECharts' inside-dataZoom otherwise
     captures single-finger drags (blocking scroll) and pinches. `pan-y` hands
     vertical panning back to the browser (page scroll wins) and `pinch-zoom`
     re-enables native zoom so any detail chart — fundamental, technical or
     options — can be inspected on a phone. */
  #detail-view canvas { touch-action: pan-y pinch-zoom !important; }
  .tech-cap { font-size: 0.78rem; color: #94a3b8; margin: -8px 0 12px; line-height: 1.4; max-width: 760px; }
  html[data-theme="light"] .tech-cap { color: #64748b; }
  /* Overview ▸ key metrics grid (sits above the price chart) */
  .ov-metrics { margin-bottom: 18px; }
  .ov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
  .ov-tile { background: #1a1c2e; border: 1px solid #2d3148; border-radius: 10px; padding: 9px 11px; min-width: 0; }
  .ov-lbl { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; font-weight: 700; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ov-val { font-size: 0.98rem; font-weight: 600; color: #e2e8f0; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ov-val.positive { color: #34d399; }
  .ov-val.negative { color: #f87171; }
  html[data-theme="light"] .ov-tile { background: #fff; border-color: #e2e8f0; }
  html[data-theme="light"] .ov-lbl { color: #64748b; }
  html[data-theme="light"] .ov-val { color: #1e293b; }
  html[data-theme="light"] .ov-val.positive { color: #059669; }
  html[data-theme="light"] .ov-val.negative { color: #dc2626; }

  /* Overview ▸ earnings-call summary + AI insights. Both are read-only views of
     already-cached summaries, so they are styled as quiet reference cards rather
     than as the interactive cards on the AI Insight / Earnings Call pages. */
  .ov-ai { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
  .ov-ai-card { background: #1a1c2e; border: 1px solid #2d3148; border-radius: 12px; padding: 14px 16px; }
  .ov-ai-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
  .ov-ai-link { background: none; border: none; color: #818cf8; font-size: 0.82rem; font-weight: 600; cursor: pointer; padding: 4px 2px; }
  .ov-ai-link:hover { text-decoration: underline; }
  .ov-ai-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.74rem; color: #64748b; margin-bottom: 8px; }
  .ov-ai-badge { background: #312e81; color: #c7d2fe; border-radius: 999px; padding: 2px 8px; font-weight: 700; font-size: 0.75rem; }
  .ov-ai-headline { font-size: 0.98rem; font-weight: 600; color: #e2e8f0; margin-bottom: 8px; }
  .ov-ai-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
  .ov-ai-tile { background: #14162a; border: 1px solid #2d3148; border-radius: 10px; padding: 10px 12px; min-width: 0; }
  .ov-ai-tile-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.8rem; font-weight: 700; color: #cbd5e1; margin-bottom: 5px; }
  .ov-ai-verdict { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #818cf8; }
  .ov-ai-tile-text { font-size: 0.85rem; line-height: 1.45; color: #94a3b8; }
  html[data-theme="light"] .ov-ai-card { background: #fff; border-color: #e2e8f0; }
  html[data-theme="light"] .ov-ai-link { color: #4f46e5; }
  html[data-theme="light"] .ov-ai-badge { background: #e0e7ff; color: #3730a3; }
  html[data-theme="light"] .ov-ai-headline { color: #1e293b; }
  html[data-theme="light"] .ov-ai-tile { background: #f8fafc; border-color: #e2e8f0; }
  html[data-theme="light"] .ov-ai-tile-head { color: #334155; }
  html[data-theme="light"] .ov-ai-verdict { color: #4f46e5; }
  html[data-theme="light"] .ov-ai-tile-text { color: #475569; }
  /* Empty state: a card with nothing cached yet. It stays visible and offers
     the generate action, because a section that disappears reads as a missing
     feature rather than as an ungenerated one. */
  .ov-ai-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
  .ov-ai-empty-text { font-size: 0.85rem; line-height: 1.45; color: #94a3b8; }
  .ov-ai-empty-err { color: #f87171; }
  .ov-ai-tile-empty { border-style: dashed; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
  .ov-ai-tile-empty .ov-ai-empty-text { font-size: 0.8rem; }
  .ov-ai-gen { background: #312e81; color: #c7d2fe; border: 1px solid #4338ca; border-radius: 8px; padding: 6px 12px; font-size: 0.78rem; font-weight: 700; cursor: pointer; }
  .ov-ai-gen:hover:not(:disabled) { background: #3730a3; color: #e0e7ff; }
  .ov-ai-gen:disabled { opacity: 0.6; cursor: default; }
  html[data-theme="light"] .ov-ai-empty-text { color: #475569; }
  html[data-theme="light"] .ov-ai-empty-err { color: #dc2626; }
  html[data-theme="light"] .ov-ai-gen { background: #e0e7ff; color: #3730a3; border-color: #c7d2fe; }
  html[data-theme="light"] .ov-ai-gen:hover:not(:disabled) { background: #c7d2fe; }
  /* Loading skeleton for the Overview cards — the fetch can take a second or
     two, and an empty card is indistinguishable from "nothing to show". */
  .ov-skel { display: flex; flex-direction: column; gap: 8px; }
  .ov-skel-bar { height: 11px; border-radius: 6px; background: linear-gradient(90deg, #232741 25%, #2d3148 37%, #232741 63%); background-size: 400% 100%; animation: ovSkel 1.4s ease infinite; width: 72%; }
  .ov-skel-bar.ov-skel-wide { width: 94%; height: 14px; }
  @keyframes ovSkel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
  html[data-theme="light"] .ov-skel-bar { background: linear-gradient(90deg, #eef2f7 25%, #e2e8f0 37%, #eef2f7 63%); background-size: 400% 100%; }
  /* Recent announcements (Overview) */
  .ov-ann { margin-top: 14px; }
  .ov-ann-meta { font-size: 0.72rem; color: #64748b; }
  .ov-ann-list { display: flex; flex-direction: column; gap: 9px; }
  .ov-ann-item { display: flex; gap: 10px; align-items: flex-start; }
  .ov-ann-date { flex: 0 0 auto; font-size: 0.72rem; color: #64748b; font-variant-numeric: tabular-nums; padding-top: 2px; min-width: 78px; }
  .ov-ann-text { min-width: 0; font-size: 0.85rem; line-height: 1.4; color: #cbd5e1; }
  .ov-ann-link { color: #818cf8; text-decoration: none; }
  .ov-ann-link:hover { text-decoration: underline; }
  .ov-ann-src { font-size: 0.7rem; color: #64748b; margin-top: 2px; }
  html[data-theme="light"] .ov-ann-meta,
  html[data-theme="light"] .ov-ann-date,
  html[data-theme="light"] .ov-ann-src { color: #94a3b8; }
  html[data-theme="light"] .ov-ann-text { color: #334155; }
  html[data-theme="light"] .ov-ann-link { color: #4f46e5; }
  /* In the news (Overview) — reuses the announcements list, plus a clamped
     standfirst. Yahoo's summaries run to a full paragraph, which would make
     one story taller than the other seven combined. */
  .ov-news-summary {
    font-size: 0.76rem; color: #94a3b8; line-height: 1.45; margin-top: 3px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  html[data-theme="light"] .ov-news-summary { color: #64748b; }
  /* Chart show/hide + reorder (chart detail pages) */
  .chart-card.chart-hidden { display: none !important; }
  /* Fundamental charts sit two-up when the viewport can afford it. A single
     full-width chart stretches a 4-bar series until the bars are absurdly fat,
     so `auto-fit` packs as many ~460px columns as fit and collapses to one on a
     narrow screen. The cards stay DIRECT children of #charting-cards on purpose
     — chartlayout.js reorders by appendChild, so an inner wrapper would break
     drag-to-reorder; grid source order is appendChild order, so this is safe. */
  #charting-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); gap: 8px 24px; align-items: start; }
  #charting-cards > .chart-card { min-width: 0; }
  /* The charts that genuinely need the width: a Sankey, a waterfall, a time
     overlay, and the three whose y-axis is a column of long holder names. */
  #charting-cards > .chart-card[data-chart="sankey"],
  #charting-cards > .chart-card[data-chart="rev2profit"],
  #charting-cards > .chart-card[data-chart="seasonality"],
  #charting-cards > .chart-card[data-chart="institutional"],
  #charting-cards > .chart-card[data-chart="secform4"] { grid-column: 1 / -1; }
  /* The two institutional views are one card so the reader compares them rather
     than treating them as unrelated charts. They measure different things —
     Yahoo's % of shares outstanding vs the position value on a 13F — so each
     pane names its own source instead of implying one number. */
  .own-inst-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 8px 24px; align-items: start; }
  .own-inst-pane { min-width: 0; }
  .own-inst-subtitle { font-size: 0.85rem; font-weight: 700; color: #e2e8f0; margin: 8px 0 2px; }
  .own-inst-src { font-size: 0.7rem; color: #64748b; margin-bottom: 4px; }
  html[data-theme="light"] .own-inst-subtitle { color: #1e293b; }
  html[data-theme="light"] .own-inst-src { color: #94a3b8; }
  /* Each title carries an inline margin-top:32px that used to space the stack.
     In a grid the row gap does that, and the inline margin would misalign the
     two cards in a row, so it is overridden here rather than in 17 places. */
  #charting-cards > .chart-card .sankey-title { margin-top: 24px !important; }
  /* Below the two-column threshold `auto-fit` would still lay a 460px track and
     overflow the viewport, so the phone gets an explicit single column. */
  @media (max-width: 768px) {
    #charting-cards { grid-template-columns: minmax(0, 1fr); gap: 4px 0; }
    .own-inst-grid { grid-template-columns: minmax(0, 1fr); gap: 4px 0; }
  }
  .chart-arrange-btn { background: #1e2035; border: 1px solid #2d3148; border-radius: 8px; padding: 6px 12px; color: #a78bfa; font-size: 0.75rem; font-weight: 600; cursor: pointer; }
  .chart-arrange-btn:hover { border-color: #a78bfa; }
  html[data-theme="light"] .chart-arrange-btn { background: #f1f5f9; border-color: #e2e8f0; color: #6d28d9; }
  .chart-arrange-panel { position: absolute; z-index: 60; top: 36px; right: 0; width: 290px; max-height: 64vh; overflow-y: auto; background: #1a1c2e; border: 1px solid #2d3148; border-radius: 10px; padding: 8px; box-shadow: 0 12px 32px rgba(0,0,0,0.4); }
  html[data-theme="light"] .chart-arrange-panel { background: #fff; border-color: #e2e8f0; box-shadow: 0 12px 32px rgba(15,23,42,0.15); }
  .arrange-head { display: flex; justify-content: space-between; align-items: center; font-size: 0.78rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 6px 8px; }
  .arrange-reset { cursor: pointer; color: #a78bfa; font-weight: 600; text-transform: none; letter-spacing: 0; }
  html[data-theme="light"] .arrange-reset { color: #6d28d9; }
  .arrange-row { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 6px; cursor: grab; user-select: none; }
  .arrange-row:hover { background: #1e2035; }
  html[data-theme="light"] .arrange-row:hover { background: #f1f5f9; }
  .arrange-row.dragging { opacity: 0.45; background: #312e81; }
  html[data-theme="light"] .arrange-row.dragging { background: #ede9fe; }
  .arrange-handle { color: #64748b; font-size: 0.95rem; cursor: grab; }
  .arrange-label { display: flex; align-items: center; gap: 7px; flex: 1; font-size: 0.82rem; color: #e2e8f0; cursor: pointer; }
  html[data-theme="light"] .arrange-label { color: #1f2937; }
  .arrange-label input { cursor: pointer; accent-color: #8b5cf6; }
  .sankey-loading { text-align: center; padding: 80px 0; color: #64748b; font-size: 0.9rem; }
  .sankey-error { text-align: center; padding: 80px 0; color: #f87171; font-size: 0.9rem; }
  html[data-theme="light"] .detail-header { border-bottom-color: #e2e8f0; }
  html[data-theme="light"] .detail-back { border-color: #cbd5e1; color: #64748b; }
  html[data-theme="light"] .detail-back:hover { border-color: #4f46e5; color: #4f46e5; }
  html[data-theme="light"] .detail-title { color: #4f46e5; }
  html[data-theme="light"] .detail-market { color: #475569; background: rgba(100, 116, 139, 0.1); border-color: #cbd5e1; }
  html[data-theme="light"] .detail-meta { color: #64748b; }
  html[data-theme="light"] .detail-meta b { color: #1f2937; }
  html[data-theme="light"] .detail-nav-btn { border-color: #cbd5e1; color: #64748b; }
  html[data-theme="light"] .detail-nav-btn:hover { border-color: #4f46e5; color: #4f46e5; }
  html[data-theme="light"] .detail-nav-btn.active { background: #4f46e5; border-color: #4f46e5; color: #fff; }
  html[data-theme="light"] .detail-subnav { border-left-color: #cbd5e1; }
  html[data-theme="light"] .detail-subnav-btn { color: #64748b; }
  html[data-theme="light"] .detail-subnav-btn:hover { color: #4f46e5; border-color: #4f46e5; }
  html[data-theme="light"] .detail-subnav-btn.active { background: #eef2ff; border-color: #4f46e5; color: #4338ca; }
  @media (max-width: 720px) {
    .detail-subnav { margin: -10px 0 16px; padding-left: 8px; }
    .detail-subnav-btn { padding: 5px 10px; font-size: 0.74rem; }
  }
  html[data-theme="light"] .sankey-title { color: #64748b; }

  /* Charting table */
  .charting-table { width: 100%; border-collapse: collapse; }
  .charting-table thead th { padding: 10px 16px; text-align: left; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; color: #64748b; border-bottom: 1px solid #2d3148; }
  .charting-table tbody tr { border-bottom: 1px solid #1e2035; transition: background 0.1s; }
  .charting-table tbody tr:hover { background: #1e2035; }
  html[data-theme="light"] .charting-table thead th { border-bottom-color: #e2e8f0; color: #64748b; }
  html[data-theme="light"] .charting-table tbody tr { border-bottom-color: #f1f5f9; }
  html[data-theme="light"] .charting-table tbody tr:hover { background: #f8fafc; }

  /* Chart-page "click a ticker" affordance */
  .chart-table-hint { display: flex; align-items: center; gap: 8px; margin: 4px 16px 14px; padding: 10px 14px;
    font-size: 0.85rem; font-weight: 500; color: #c4b5fd;
    background: rgba(79,70,229,0.10); border: 1px solid rgba(167,139,250,0.28); border-radius: 10px; }
  html[data-theme="light"] .chart-table-hint { color: #6d28d9; background: rgba(124,58,237,0.07); border-color: rgba(124,58,237,0.22); }
  .charting-table thead th:first-child, .charting-table tbody td:first-child { width: 1%; white-space: nowrap; }
  .charting-table .chart-cta-col { text-align: left; padding-left: 0 !important; }
  .chart-row-cta { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
    color: #a78bfa; font-weight: 600; font-size: 0.82rem; opacity: 0.7; transition: opacity 0.12s, transform 0.12s; }
  html[data-theme="light"] .chart-row-cta { color: #7c3aed; }
  .charting-table tbody tr:hover .chart-row-cta { opacity: 1; transform: translateX(3px); }

  /* Backtesting detail page */
  .bt-controls { display: flex; align-items: center; gap: 12px; margin: 4px 0 16px; flex-wrap: wrap; }
  .bt-explain { background: rgba(79,70,229,0.08); border: 1px solid rgba(167,139,250,0.25); border-radius: 10px;
    padding: 14px 16px; margin-bottom: 18px; font-size: 0.88rem; line-height: 1.55; color: #cbd5e1; }
  .bt-explain p { margin: 0; }
  .bt-explain-title { font-weight: 700; font-size: 0.95rem; color: #c4b5fd; margin-bottom: 6px; }
  html[data-theme="light"] .bt-explain { background: rgba(124,58,237,0.06); border-color: rgba(124,58,237,0.2); color: #334155; }
  html[data-theme="light"] .bt-explain-title { color: #6d28d9; }
  .bt-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 8px; }
  .bt-metric { background: var(--bg-card, #1a1c2e); border: 1px solid var(--border, #2d3148); border-radius: 10px; padding: 12px 14px; }
  .bt-metric-big { grid-column: span 1; border-color: rgba(139,92,246,0.5); }
  .bt-metric-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: #64748b; font-weight: 600; margin-bottom: 6px; }
  .bt-metric-val { font-size: 1.3rem; font-weight: 700; }
  .bt-metric-big .bt-metric-val { font-size: 1.6rem; }
  .bt-metric-sub { font-size: 0.72rem; color: #64748b; margin-top: 4px; }
  .bt-metric-val.positive { color: #22c55e; }
  .bt-metric-val.negative { color: #ef4444; }
  .bt-metric-val.neutral  { color: var(--text, #e2e8f0); }
  html[data-theme="light"] .bt-metric { background: #fff; }
  .bt-summary { margin-bottom: 8px; }
  .bt-summary .bt-explain-title { font-weight: 700; font-size: 0.95rem; color: #c4b5fd; margin-bottom: 6px; }
  html[data-theme="light"] .bt-summary .bt-explain-title { color: #6d28d9; }
  .bt-summary > p { margin: 0 0 6px; font-size: 0.86rem; line-height: 1.55; color: #cbd5e1; }
  html[data-theme="light"] .bt-summary > p { color: #475569; }
  .bt-summary-table tbody tr:hover { background: rgba(139,92,246,0.08); }
  .bt-summary-note { margin-top: 12px; font-size: 0.82rem; color: #94a3b8; background: rgba(139,92,246,0.06);
    border-left: 3px solid #8b5cf6; border-radius: 0 8px 8px 0; padding: 10px 14px; line-height: 1.5; }
  html[data-theme="light"] .bt-summary-note { color: #475569; }

  /* Analytics ▸ Strategy page */
  .strategy-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
  .strategy-title { font-size: 1.4rem; font-weight: 700; margin: 0 0 6px; }
  .strategy-back-btn { background: none; border: 1px solid #2d3148; border-radius: 8px; padding: 4px 12px; margin-bottom: 10px; color: #94a3b8; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
  .strategy-back-btn:hover { border-color: #4f46e5; color: #a78bfa; }
  .strategy-sub { margin: 0; font-size: 0.88rem; color: #94a3b8; max-width: 640px; line-height: 1.5; }
  html[data-theme="light"] .strategy-sub { color: #64748b; }
  html[data-theme="light"] .strategy-back-btn { border-color: #cbd5e1; color: #64748b; }
  html[data-theme="light"] .strategy-back-btn:hover { border-color: #4f46e5; color: #4f46e5; }
  .strategy-head-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
  .strategy-updated { font-size: 0.78rem; color: #64748b; }
  .strategy-refresh-btn { display: inline-flex; align-items: center; gap: 6px; background: #8b5cf6; color: #fff;
    border: none; border-radius: 8px; padding: 8px 14px; font-size: 0.85rem; font-weight: 600; cursor: pointer;
    transition: background 0.15s; }
  .strategy-refresh-btn:hover { background: #7c3aed; }
  .strategy-refresh-btn:disabled { opacity: 0.6; cursor: not-allowed; }
  .strategy-refresh-btn-lg { margin-top: 14px; padding: 10px 20px; font-size: 0.9rem; }

  .strategy-empty, .strategy-loading, .strategy-error { text-align: center; padding: 60px 24px; color: #94a3b8; }
  .strategy-empty p, .strategy-loading p { max-width: 520px; margin: 0 auto 6px; line-height: 1.6; font-size: 0.92rem; }
  .strategy-loading { display: flex; flex-direction: column; align-items: center; gap: 14px; }
  .strategy-error { color: #f87171; }
  html[data-theme="light"] .strategy-empty, html[data-theme="light"] .strategy-loading { color: #64748b; }

  .strategy-section { margin-bottom: 36px; }
  .strategy-section h3 { font-size: 1.08rem; font-weight: 700; margin: 0 0 4px; }
  .strategy-section-sub { margin: 0 0 14px; font-size: 0.82rem; color: #94a3b8; }
  html[data-theme="light"] .strategy-section-sub { color: #64748b; }

  .strategy-heat-wrap { margin-top: 24px; }
  .strategy-heat-title { font-size: 0.82rem; font-weight: 600; color: #cbd5e1; margin-bottom: 8px; }
  html[data-theme="light"] .strategy-heat-title { color: #475569; }

  .strategy-index-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
  .strategy-index-card { background: var(--bg-card, #1a1c2e); border: 1px solid var(--border, #2d3148); border-radius: 12px; padding: 16px; }
  html[data-theme="light"] .strategy-index-card { background: #fff; }
  .strategy-index-card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
  .strategy-index-name { font-weight: 700; font-size: 1rem; }
  .strategy-index-symbol { font-size: 0.76rem; color: #64748b; font-family: monospace; }
  .strategy-index-bh { font-size: 0.82rem; color: #94a3b8; margin-bottom: 10px; }
  html[data-theme="light"] .strategy-index-bh { color: #64748b; }
  .strategy-index-table { width: 100%; }
  .strategy-empty-inline { color: #64748b; font-size: 0.85rem; }
  .strategy-bench-toggle { display: inline-flex; border: 1px solid var(--border, #2d3148); border-radius: 8px; overflow: hidden; margin-bottom: 14px; }
  .strategy-bench-btn { background: transparent; color: var(--text-sub, #94a3b8); border: none; padding: 7px 16px; font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s; }
  .strategy-bench-btn + .strategy-bench-btn { border-left: 1px solid var(--border, #2d3148); }
  .strategy-bench-btn.active { background: var(--accent, #8b5cf6); color: #fff; }
  .strategy-index-chooser { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 14px; }
  .strategy-idx-chooser-label { font-size: 0.78rem; font-weight: 700; color: var(--text-sub, #94a3b8); margin-right: 2px; }
  .strategy-idx-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .strategy-idx-group-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--accent, #8b5cf6); margin-right: 2px; }
  .strategy-idx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--border, #2d3148); border-radius: 999px; font-size: 0.8rem; font-weight: 600; color: var(--text-sub, #94a3b8); cursor: pointer; user-select: none; transition: background 0.15s, border-color 0.15s, color 0.15s; }
  .strategy-idx-chip:hover { border-color: var(--accent, #8b5cf6); }
  .strategy-idx-chip input { accent-color: var(--accent, #8b5cf6); cursor: pointer; margin: 0; }
  .strategy-idx-chip:has(input:checked) { background: rgba(139,92,246,0.12); border-color: var(--accent, #8b5cf6); color: var(--text, #e2e8f0); }
  html[data-theme="light"] .strategy-idx-chip:has(input:checked) { color: #1e293b; }
  .strategy-fetch-msg { font-size: 0.82rem; color: #94a3b8; line-height: 1.5; margin-bottom: 10px; padding: 10px 12px; background: rgba(139,92,246,0.08); border: 1px solid rgba(139,92,246,0.25); border-radius: 8px; }
  html[data-theme="light"] .strategy-fetch-msg { color: #64748b; }
  .strategy-index-card-muted { opacity: 0.75; border-style: dashed; }
  .strategy-fetch-loading { animation: stratPulse 1.2s ease-in-out infinite; }
  @keyframes stratPulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
  .const-meta { font-size: 0.74rem; color: #64748b; margin-top: 8px; }
  .const-link { background: none; border: none; color: var(--accent, #8b5cf6); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }
  .const-skip { color: #64748b; cursor: help; border-bottom: 1px dotted currentColor; }
  .const-heat-actions { margin-top: 10px; }
  .const-heat-btn { background: transparent; color: var(--accent, #8b5cf6); border: 1px solid var(--border, #2d3148); border-radius: 6px; padding: 5px 12px; font-size: 0.78rem; font-weight: 600; cursor: pointer; }
  .const-heat-btn:hover { background: rgba(139,92,246,0.08); }
  .const-heat-wrap { margin-top: 10px; max-height: 520px; overflow-y: auto; border: 1px solid var(--border, #2d3148); border-radius: 8px; }
  .const-heat-chart { width: 100%; }

  #strategy-portfolio-table table.bt-summary-table,
  .strategy-index-table.bt-summary-table { width: 100%; border-collapse: collapse; margin-top: 4px; }
  #strategy-portfolio-table .bt-summary-table th, .strategy-index-table th {
    text-align: left; padding: 8px 12px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--text-sub, #94a3b8); font-weight: 700; border-bottom: 1px solid var(--border, #2d3148); }
  #strategy-portfolio-table .bt-summary-table td, .strategy-index-table td {
    padding: 9px 12px; font-size: 0.85rem; border-top: 1px solid var(--border, #2d3148); }
  #strategy-portfolio-table tr.bt-summary-best, .strategy-index-table tr.bt-summary-best { background: rgba(34,197,94,0.08); }
  .strategy-index-table td, .strategy-index-table th { padding: 6px 8px; font-size: 0.8rem; }
  .strategy-index-table.bt-summary-table { table-layout: fixed; min-width: 0; }
  .strategy-index-table th:nth-child(1), .strategy-index-table td:nth-child(1) { width: 26px; }
  .strategy-index-table th:nth-child(2), .strategy-index-table td:nth-child(2) { white-space: normal; word-break: break-word; }
  .strategy-index-table th:nth-child(3), .strategy-index-table td:nth-child(3),
  .strategy-index-table th:nth-child(4), .strategy-index-table td:nth-child(4) { width: 64px; white-space: nowrap; text-align: right; }

  @media (max-width: 720px) {
    .strategy-head { flex-direction: column; }
    .strategy-index-cards { grid-template-columns: 1fr; }
  }

  /* Trial (live replay) detail page */
  .trial-controls { display: flex; align-items: center; gap: 12px; margin: 4px 0 16px; flex-wrap: wrap; }
  .trial-ctl-label { font-size: 0.82rem; color: var(--text-sub, #94a3b8); font-weight: 600; }
  .trial-ctl-label select { margin-left: 8px; padding: 5px 10px; border-radius: 6px; border: 1px solid var(--border, #2d3148);
    background: var(--bg-card, #1a1c2e); color: var(--text, #e2e8f0); font-size: 0.82rem; outline: none; }
  .trial-btn { padding: 6px 14px; border-radius: 7px; border: 1px solid var(--border, #2d3148); background: var(--bg-card, #1a1c2e);
    color: var(--text, #e2e8f0); font-size: 0.84rem; font-weight: 600; cursor: pointer; transition: background 0.12s, border-color 0.12s; }
  .trial-btn:hover { border-color: #8b5cf6; }
  .trial-btn-primary { background: #8b5cf6; border-color: #8b5cf6; color: #fff; }
  .trial-btn-primary:hover { background: #7c3aed; border-color: #7c3aed; }
  html[data-theme="light"] .trial-btn { background: #fff; }
  html[data-theme="light"] .trial-btn-primary { background: #7c3aed; color: #fff; }
  .trial-status { font-size: 0.8rem; color: #94a3b8; font-weight: 600; margin-left: 4px; }
  .trial-status.live { color: #22c55e; }
  .trial-status.done { color: #8b5cf6; }
  .trial-explain { background: rgba(79,70,229,0.08); border: 1px solid rgba(167,139,250,0.25); border-radius: 10px;
    padding: 14px 16px; margin-bottom: 18px; font-size: 0.88rem; line-height: 1.55; color: #cbd5e1; }
  html[data-theme="light"] .trial-explain { background: rgba(124,58,237,0.06); border-color: rgba(124,58,237,0.2); color: #334155; }
  .trial-pnl { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 8px; }
  .trial-card { background: var(--bg-card, #1a1c2e); border: 1px solid var(--border, #2d3148); border-radius: 10px; padding: 12px 14px; }
  html[data-theme="light"] .trial-card { background: #fff; }
  .trial-card-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: #64748b; font-weight: 600; margin-bottom: 6px; }
  .trial-card-val { font-size: 1.25rem; font-weight: 700; }
  .trial-card-val.positive { color: #22c55e; }
  .trial-card-val.negative { color: #ef4444; }
  .trial-card-val.neutral  { color: var(--text, #e2e8f0); }
  .trial-log-wrap { max-height: 340px; overflow-y: auto; border: 1px solid var(--border, #2d3148); border-radius: 10px; margin-top: 8px; }
  .trial-log { width: 100%; border-collapse: collapse; font-size: 0.83rem; }
  .trial-log thead th { position: sticky; top: 0; background: var(--bg-card, #1a1c2e); color: #64748b; text-transform: uppercase;
    font-size: 0.7rem; letter-spacing: 0.03em; text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border, #2d3148); }
  html[data-theme="light"] .trial-log thead th { background: #fff; }
  .trial-log tbody td { padding: 7px 12px; border-bottom: 1px solid var(--border, #2d3148); color: var(--text, #e2e8f0); }
  .trial-log tbody td.positive { color: #22c55e; }
  .trial-log tbody td.negative { color: #ef4444; }
  .trial-log tbody td.neutral { color: #94a3b8; }
  .trial-log tbody tr:hover { background: rgba(139,92,246,0.08); }

  /* Trade (forward paper-trading) */
  .trade-picker { display: flex; align-items: center; gap: 12px; margin: 8px 0 4px; }
  .trade-picker-label { font-size: 0.82rem; color: var(--text-sub, #94a3b8); font-weight: 600; }
  .trade-picker-label select { margin-left: 8px; padding: 7px 12px; border-radius: 7px; border: 1px solid var(--border, #2d3148);
    background: var(--bg-card, #1a1c2e); color: var(--text, #e2e8f0); font-size: 0.88rem; outline: none; min-width: 180px; }
  .trade-add { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 8px; }
  .trade-add select { margin-left: 8px; padding: 6px 10px; border-radius: 6px; border: 1px solid var(--border, #2d3148);
    background: var(--bg-card, #1a1c2e); color: var(--text, #e2e8f0); font-size: 0.84rem; outline: none; }
  .trade-config-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
  .trade-empty { color: var(--text-sub, #94a3b8); font-size: 0.88rem; padding: 16px; border: 1px dashed var(--border, #2d3148); border-radius: 10px; text-align: center; }
  .trade-config-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer;
    background: var(--bg-card, #1a1c2e); border: 1px solid var(--border, #2d3148); border-radius: 10px; padding: 12px 16px; transition: border-color 0.12s, background 0.12s; }
  html[data-theme="light"] .trade-config-item { background: #fff; }
  .trade-config-item:hover { border-color: #8b5cf6; background: rgba(139,92,246,0.06); }
  .trade-config-main { display: flex; flex-direction: column; gap: 3px; }
  .trade-config-since { font-size: 0.76rem; color: #64748b; font-weight: 500; }
  .trade-config-x { background: none; border: none; color: #94a3b8; font-size: 0.95rem; cursor: pointer; padding: 4px 8px; border-radius: 6px; line-height: 1; }
  .trade-config-x:hover { color: #ef4444; background: rgba(239,68,68,0.1); }
  .trade-strat-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding-bottom: 14px;
    border-bottom: 1px solid var(--border, #2d3148); flex-wrap: wrap; }
  .trade-strat-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 1.05rem; font-weight: 700; color: var(--text, #e2e8f0); }
  /* Prominent "← Strategies" back button (was an easy-to-miss plain outline) */
  .trade-back-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 8px;
    background: rgba(139,92,246,0.14); border: 1px solid rgba(139,92,246,0.55); color: #a78bfa; font-weight: 700; font-size: 0.86rem; }
  .trade-back-btn:hover { background: #8b5cf6; border-color: #8b5cf6; color: #fff; }
  .trade-back-btn .trade-back-arrow { font-size: 1.05rem; line-height: 1; transition: transform 0.12s; }
  .trade-back-btn:hover .trade-back-arrow { transform: translateX(-3px); }
  html[data-theme="light"] .trade-back-btn { background: rgba(124,58,237,0.10); border-color: rgba(124,58,237,0.5); color: #6d28d9; }
  html[data-theme="light"] .trade-back-btn:hover { background: #7c3aed; color: #fff; }
  /* Strategy name pops in accent; the "active since" is a subtle chip */
  .trade-strat-name { font-size: 1.2rem; font-weight: 800; color: #a78bfa; letter-spacing: -0.01em; }
  html[data-theme="light"] .trade-strat-name { color: #6d28d9; }
  .trade-strat-since-chip { font-size: 0.72rem; font-weight: 600; color: #64748b; background: var(--bg-card, #1a1c2e);
    border: 1px solid var(--border, #2d3148); border-radius: 999px; padding: 3px 10px; text-transform: uppercase; letter-spacing: 0.03em; }
  html[data-theme="light"] .trade-strat-since-chip { background: #f1f5f9; border-color: #e2e8f0; color: #64748b; }

  /* Valuation-table ticker reads as a link → valuation detail page */
  .val-ticker-link { color: #a78bfa; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
  html[data-theme="light"] .val-ticker-link { color: #7c3aed; }
  .val-ticker-chevron { font-size: 1.1em; line-height: 1; opacity: 0.55; transition: opacity 0.12s, transform 0.12s; }
  .dcf-table tbody tr:hover .val-ticker-link,
  .charting-table tbody tr:hover .val-ticker-link { text-decoration: underline; }
  .dcf-table tbody tr:hover .val-ticker-chevron,
  .charting-table tbody tr:hover .val-ticker-chevron { opacity: 1; transform: translateX(2px); }

  /* Valuation detail grid */
  .val-detail-grid { width: 100%; overflow-x: auto; }
  .val-detail-table { width: 100%; border-collapse: collapse; border-radius: 12px; overflow: hidden; }
  .val-detail-table thead th { padding: 10px 12px; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; color: #64748b; text-align: center; border-bottom: 2px solid #2d3148; white-space: nowrap; }
  .val-detail-table thead th:first-child, .val-detail-table thead th:nth-child(2) { text-align: left; }
  .val-detail-table tbody td { padding: 12px; text-align: center; border-bottom: 1px solid #1e2035; white-space: nowrap; }
  .val-detail-table .val-row-label { text-align: left; font-weight: 600; font-size: 0.88rem; color: #e2e8f0; white-space: nowrap; }
  .val-detail-table .val-cell { vertical-align: middle; }
  .val-detail-table .val-iv { font-size: 1rem; font-weight: 700; color: #e2e8f0; }
  .val-detail-table .val-upside { font-size: 0.78rem; margin-top: 2px; font-weight: 600; }
  .val-detail-table .val-up .val-upside { color: #10b981; }
  .val-detail-table .val-down .val-upside { color: #ef4444; }
  .val-detail-table .val-na { color: #94a3b8; font-style: italic; }
  html[data-theme="light"] .val-detail-table .val-na { color: #475569; }
  html[data-theme="light"] .val-detail-table thead th { border-bottom-color: #e2e8f0; }
  html[data-theme="light"] .val-detail-table tbody td { border-bottom-color: #f1f5f9; }
  html[data-theme="light"] .val-detail-table .val-row-label { color: #1f2937; }
  html[data-theme="light"] .val-detail-table .val-iv { color: #1f2937; }
  /* Highlight the 4 averaged scenarios (Intrinsic & DCF × Revenue Growth% & Growth Guide%) */
  .val-detail-table tbody tr.val-scenario td { background: rgba(124, 58, 237, 0.16); }
  .val-detail-table tbody tr.val-scenario td:first-child { box-shadow: inset 3px 0 0 #a78bfa; }
  html[data-theme="light"] .val-detail-table tbody tr.val-scenario td { background: rgba(124, 58, 237, 0.10); }

  /* Legend explaining what the highlighted (core) scenario rows mean */
  .val-detail-legend { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; padding: 10px 14px;
    font-size: 0.82rem; line-height: 1.55; color: #94a3b8;
    background: rgba(124, 58, 237, 0.07); border: 1px solid rgba(124, 58, 237, 0.22); border-radius: 10px; }
  .val-detail-legend b { color: #c4b5fd; font-weight: 600; }
  .val-legend-swatch { flex-shrink: 0; width: 18px; height: 18px; border-radius: 5px; margin-top: 1px;
    background: rgba(124, 58, 237, 0.16); box-shadow: inset 3px 0 0 #a78bfa; }
  html[data-theme="light"] .val-detail-legend { color: #475569; background: rgba(124, 58, 237, 0.06); border-color: rgba(124, 58, 237, 0.18); }
  html[data-theme="light"] .val-detail-legend b { color: #6d28d9; }
  html[data-theme="light"] .val-legend-swatch { background: rgba(124, 58, 237, 0.10); }

  @media (max-width: 768px) {
    .detail-header { flex-wrap: wrap; padding: 12px; gap: 8px; }
    .detail-meta { margin-left: 0; flex-wrap: wrap; gap: 10px; }
    .detail-body { padding: 12px; }
  }

  /* ---- Learn: per-chart "how it works" guide ---- */
  .chart-card--learn { position: relative; }
  .chart-learn-btn { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; gap: 5px;
    background: #1e2035; border: 1px solid #2d3148; border-radius: 8px; padding: 5px 10px; color: #a78bfa;
    font-size: 0.72rem; font-weight: 600; cursor: pointer; z-index: 3; transition: border-color 0.15s, color 0.15s, background 0.15s; }
  .chart-card--learn .sankey-title { padding-right: 84px; }
  .chart-learn-btn:hover { border-color: #a78bfa; color: #c4b5fd; background: #262a44; }
  .chart-learn-btn svg { flex-shrink: 0; }
  html[data-theme="light"] .chart-learn-btn { background: #f1f5f9; border-color: #e2e8f0; color: #6d28d9; }
  html[data-theme="light"] .chart-learn-btn:hover { border-color: #8b5cf6; color: #5b21b6; background: #ede9fe; }

  .learn-overlay { position: fixed; inset: 0; z-index: 120; background: rgba(10, 12, 20, 0.72);
    display: flex; align-items: stretch; justify-content: center; backdrop-filter: blur(2px); }
  html[data-theme="light"] .learn-overlay { background: rgba(30, 41, 59, 0.42); }
  .learn-panel { display: flex; flex-direction: column; width: 100%; max-width: 920px; height: 100%;
    background: #12141f; border-left: 1px solid #2d3148; border-right: 1px solid #2d3148; box-shadow: 0 0 60px rgba(0,0,0,0.5); }
  html[data-theme="light"] .learn-panel { background: #fff; border-color: #e2e8f0; box-shadow: 0 0 60px rgba(15,23,42,0.18); }
  .learn-header { display: flex; align-items: center; gap: 14px; padding: 16px 24px; border-bottom: 1px solid #2d3148; flex-shrink: 0; }
  html[data-theme="light"] .learn-header { border-bottom-color: #e2e8f0; }
  .learn-back { background: #1e2035; border: 1px solid #2d3148; border-radius: 8px; padding: 7px 14px; color: #a78bfa;
    font-size: 0.82rem; font-weight: 600; cursor: pointer; flex-shrink: 0; }
  .learn-back:hover { border-color: #a78bfa; }
  html[data-theme="light"] .learn-back { background: #f1f5f9; border-color: #e2e8f0; color: #6d28d9; }
  html[data-theme="light"] .learn-back:hover { border-color: #8b5cf6; }
  .learn-title { font-size: 1rem; font-weight: 700; color: #e2e8f0; margin: 0; line-height: 1.3; }
  html[data-theme="light"] .learn-title { color: #1f2937; }
  .learn-body { flex: 1; overflow-y: auto; padding: 24px 28px 60px; }
  .learn-group { margin-bottom: 8px; }
  .learn-group-title { font-size: 0.8rem; font-weight: 700; color: #8b5cf6; text-transform: uppercase; letter-spacing: 0.08em;
    margin: 24px 0 4px; padding-bottom: 8px; border-bottom: 1px solid #2d3148; }
  html[data-theme="light"] .learn-group-title { color: #6d28d9; border-bottom-color: #e2e8f0; }
  .learn-entry { padding: 20px 0; border-bottom: 1px solid #1e2035; scroll-margin-top: 12px; }
  html[data-theme="light"] .learn-entry { border-bottom-color: #eef2f7; }
  .learn-entry-title { font-size: 1.05rem; font-weight: 700; color: #e2e8f0; margin: 0 0 12px; }
  html[data-theme="light"] .learn-entry-title { color: #111827; }
  .learn-block { margin-bottom: 14px; }
  .learn-block-label { font-size: 0.72rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
  html[data-theme="light"] .learn-block-label { color: #64748b; }
  .learn-block p { font-size: 0.9rem; color: #cbd5e1; line-height: 1.6; margin: 0 0 8px; }
  html[data-theme="light"] .learn-block p { color: #334155; }
  .learn-block ul { margin: 0 0 8px; padding-left: 20px; }
  .learn-block li { font-size: 0.9rem; color: #cbd5e1; line-height: 1.6; margin-bottom: 5px; }
  html[data-theme="light"] .learn-block li { color: #334155; }
  .learn-block strong { color: #e2e8f0; }
  html[data-theme="light"] .learn-block strong { color: #111827; }
  .learn-formula { font-family: 'Consolas', 'SF Mono', 'Menlo', monospace; font-size: 0.84rem !important; color: #93c5fd !important;
    background: #171a29; border-left: 3px solid #8b5cf6; border-radius: 4px; padding: 8px 12px; margin: 4px 0 10px !important; overflow-x: auto; }
  html[data-theme="light"] .learn-formula { color: #1d4ed8 !important; background: #f5f3ff; border-left-color: #8b5cf6; }
  .learn-entry-flash { animation: learnFlash 1.4s ease-out; }
  @keyframes learnFlash { 0% { background: rgba(139, 92, 246, 0.16); } 100% { background: transparent; } }

  @media (max-width: 768px) {
    .learn-header { padding: 12px 14px; }
    .learn-title { font-size: 0.9rem; }
    .learn-body { padding: 16px 16px 48px; }
    .chart-learn-btn span { display: none; }
    .chart-learn-btn { padding: 5px 7px; }
    .chart-card--learn .sankey-title { padding-right: 40px; }
  }
  /* ── Discover ▸ Screener ─────────────────────────────────────────────── */
  /* Sidebar flyout (mirrors the watchlist sub-list styling; floats by the nav). */
  .screener-flyout { position: fixed; z-index: 130; min-width: 200px; max-width: 260px; max-height: 70vh; overflow-y: auto;
    display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 10px;
    background: #14162a; border: 1px solid #2d3148; box-shadow: 0 12px 32px rgba(0,0,0,0.45); }
  .screener-fly-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; font-weight: 700; padding: 2px 8px 6px; }
  .screener-fly-item { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 7px 10px; border: none; background: none; border-radius: 6px; color: #cbd5e1; font-size: 0.82rem; font-weight: 500; cursor: pointer; text-align: left; white-space: nowrap; overflow: hidden; }
  .screener-fly-item:hover { background: #1e2035; color: #e2e8f0; }
  .screener-fly-dot { width: 6px; height: 6px; border-radius: 50%; background: #7c3aed; flex: 0 0 auto; }
  .screener-fly-name { overflow: hidden; text-overflow: ellipsis; }
  .screener-fly-empty { padding: 4px 10px 8px; font-size: 0.76rem; color: #64748b; }
  .screener-fly-add-row { margin-top: 4px; border-top: 1px solid #2d3148; padding-top: 6px; }
  .screener-fly-add-btn { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 7px 10px; border: 1px dashed #3b3f5c; background: none; border-radius: 6px; color: #94a3b8; font-size: 0.8rem; font-weight: 600; cursor: pointer; text-align: left; }
  .screener-fly-add-btn:hover { background: #1e2035; color: #a78bfa; border-color: #4b4f6c; }
  .screener-fly-add-plus { font-size: 1rem; line-height: 1; flex: 0 0 auto; }
  .screener-fly-add-wrap { display: flex; flex-direction: column; gap: 4px; padding: 4px 2px 0; }
  .screener-fly-add-input { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid #3b3f5c; background: #0f1120; color: #e2e8f0; border-radius: 6px; font-size: 0.8rem; }
  .screener-fly-add-input:focus { outline: none; border-color: #a78bfa; }
  .screener-fly-add-err { color: #f87171; font-size: 0.78rem; line-height: 1.3; }

  /* View: header + controls */
  /* Full-bleed page shell for the Screener / Fund Screener / Portfolio views —
     they use the whole content width like the watchlist rather than a centred
     max-width column, so their tables get every available pixel. */
  .wide-view { padding: 10px 14px 0; }
  /* Detail pages inside the now full-bleed views stay a readable width. */
  #mf-detail-view, #pf-mf-detail-view { max-width: 1200px; margin: 0 auto; }
  /* One-line header band: title + screen picker + actions. The old subtitle
     paragraph moved into the title's tooltip so the table starts higher. */
  .screener-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 2px; }
  .screener-title { font-size: 1.1rem; font-weight: 700; color: #e2e8f0; margin: 0; }
  .screener-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .screener-select-wrap { display: inline-flex; align-items: center; gap: 6px; }
  .screener-select-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; font-weight: 600; }
  .screener-select { padding: 7px 10px; border-radius: 8px; border: 1px solid #2d3148; background: #14162a; color: #e2e8f0; font-size: 0.85rem; font-weight: 600; max-width: 220px; }
  .screener-select:focus { outline: none; border-color: #a78bfa; }
  .screener-add-wrap { display: inline-flex; align-items: center; gap: 8px; }
  .screener-add-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; border: 1px dashed #3b3f5c; background: none; color: #94a3b8; font-size: 0.82rem; font-weight: 600; cursor: pointer; }
  .screener-add-btn:hover { background: #1e2035; color: #a78bfa; border-color: #4b4f6c; }
  .screener-add-plus { font-size: 1rem; line-height: 1; }
  .screener-add-inline { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .screener-add-input { padding: 7px 10px; border-radius: 8px; border: 1px solid #3b3f5c; background: #0f1120; color: #e2e8f0; font-size: 0.82rem; min-width: 160px; }
  .screener-add-input:focus { outline: none; border-color: #a78bfa; }
  .screener-add-go { padding: 7px 12px; border-radius: 8px; border: 1px solid #7c3aed; background: #2d1b69; color: #c4b5fd; font-size: 0.82rem; font-weight: 600; cursor: pointer; }
  .screener-add-go:hover { background: #3a2585; }
  .screener-add-cancel { padding: 7px 10px; border-radius: 8px; border: 1px solid #2d3148; background: none; color: #94a3b8; font-size: 0.82rem; font-weight: 600; cursor: pointer; }
  .screener-add-cancel:hover { background: #1e2035; color: #cbd5e1; }
  .screener-add-err { color: #f87171; font-size: 0.7rem; }
  .screener-add-region { padding: 7px 10px; border-radius: 8px; border: 1px solid #3b3f5c; background: #0f1120; color: #e2e8f0; font-size: 0.82rem; cursor: pointer; }
  .screener-add-region:focus { outline: none; border-color: #a78bfa; }
  .screener-add-count { color: #94a3b8; font-size: 0.74rem; font-weight: 600; white-space: nowrap; }
  .screener-meta { font-size: 0.72rem; color: #64748b; }
  /* Toggle that collapses a wide view's chrome (filter params / summary tiles)
     so the table gets the reclaimed vertical space. */
  .section-collapse-btn { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; border: 1px solid #2d3148; background: none; color: #94a3b8; font-size: 0.72rem; font-weight: 600; cursor: pointer; transition: all 0.12s; }
  .section-collapse-btn:hover { color: #a78bfa; border-color: #4f46e5; }
  .section-collapse-chev { transition: transform 0.15s ease; }
  .section-collapse-btn.is-collapsed .section-collapse-chev { transform: rotate(-90deg); }
  /* The two screeners' toggle is not a decorative disclosure — it is the only
   * way back to the page's primary control, and as a ghost pill among four
   * look-alike buttons it was being missed. It gets a funnel icon, leads the
   * row, and reads as accent-coloured chrome when open; when it is COLLAPSED
   * (the state where the reader is stranded with a table and no filters) it
   * becomes a solid call-to-action with a ring. The Portfolio summary toggle
   * deliberately keeps the quiet styling — hiding tiles strands nobody. */
  .section-collapse-btn.filters-toggle { padding: 5px 13px; font-size: 0.76rem; letter-spacing: 0.01em; color: #c4b5fd; border-color: #4c1d95; background: rgba(124,58,237,0.14); }
  .section-collapse-btn.filters-toggle:hover { color: #e9e4ff; border-color: #a78bfa; background: rgba(124,58,237,0.28); }
  .section-collapse-btn.filters-toggle .section-collapse-funnel { flex: none; }
  .section-collapse-btn.filters-toggle.is-collapsed { color: #ffffff; background: #7c3aed; border-color: #a78bfa; box-shadow: 0 0 0 3px rgba(124,58,237,0.25); }
  .section-collapse-btn.filters-toggle.is-collapsed:hover { background: #6d28d9; }
  .section-collapse-btn.filters-toggle:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }
  .chrome-collapsed .collapsible-chrome { display: none !important; }
  .screener-banner { margin: 8px 0; padding: 9px 13px; border-radius: 8px; font-size: 0.8rem; line-height: 1.4; }
  .screener-banner-warming { color: #fbbf24; background: rgba(251,191,36,0.10); border: 1px solid rgba(251,191,36,0.28); }
  .screener-banner-partial { color: #f87171; background: rgba(248,113,113,0.10); border: 1px solid rgba(248,113,113,0.28); }

  /* Param panel */
  .screener-params { margin: 8px 0 4px; }
  .screener-params-inner { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; padding: 12px 14px; border-radius: 10px; background: #14162a; border: 1px solid #2d3148; }
  .screener-param { display: flex; flex-direction: column; gap: 4px; }
  .screener-param-label { font-size: 0.72rem; font-weight: 600; color: #94a3b8; }
  .screener-param-mm { display: inline-flex; flex-direction: column; font-size: 0.75rem; color: #64748b; gap: 2px; }
  .screener-param-input { width: 84px; box-sizing: border-box; padding: 5px 7px; border: 1px solid #3b3f5c; background: #0f1120; color: #e2e8f0; border-radius: 6px; font-size: 0.8rem; }
  .screener-param-mm .screener-param-input { width: 74px; }
  .screener-param-input:focus { outline: none; border-color: #a78bfa; }
  .screener-param-cat { min-width: 150px; }
  .screener-param-multi { min-width: 140px; padding: 4px; border: 1px solid #3b3f5c; background: #0f1120; color: #e2e8f0; border-radius: 6px; font-size: 0.78rem; }
  .screener-param-multi:focus { outline: none; border-color: #a78bfa; }
  .screener-param-none { font-size: 0.78rem; color: #64748b; }
  .screener-param { position: relative; }
  .screener-param-remove { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; line-height: 16px; text-align: center; padding: 0; border-radius: 50%; border: 1px solid #4c1d24; background: #2a1114; color: #f87171; font-size: 0.85rem; cursor: pointer; opacity: 0; transition: opacity .12s; }
  .screener-param:hover .screener-param-remove, .screener-param-remove:focus { opacity: 1; }
  .screener-param-remove:hover { background: #3a171c; border-color: #7f1d1d; }
  .screener-param-add { justify-content: flex-end; }
  .screener-param-add-select { padding: 6px 9px; border-radius: 8px; border: 1px dashed #7c3aed; background: #1a1533; color: #c4b5fd; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
  .screener-param-add-select:focus { outline: none; border-style: solid; border-color: #a78bfa; }
  .screener-save-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
  .screener-save-name { width: 200px; }
  .screener-save-btn { padding: 7px 14px; border-radius: 8px; border: 1px solid #7c3aed; background: #2d1b69; color: #c4b5fd; font-size: 0.82rem; font-weight: 600; cursor: pointer; }
  .screener-save-btn:hover { background: #3a2585; }
  .screener-save-err { color: #f87171; font-size: 0.72rem; }
  /* Save confirmation. Sits beside the error span so the two never move the
     row's layout as they swap. */
  .screener-save-ok { color: #34d399; font-size: 0.72rem; font-weight: 600; }
  .screener-preview-count { font-size: 0.8rem; font-weight: 700; color: #a78bfa; white-space: nowrap; }
  #mf-preview-count { white-space: normal; min-width: 0; max-width: 100%; }
  .screener-save-sep { flex: 1 1 auto; }
  .screener-save-region-wrap { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: #94a3b8; font-weight: 600; }
  .screener-save-region { padding: 7px 10px; border-radius: 8px; border: 1px solid #3b3f5c; background: #0f1120; color: #e2e8f0; font-size: 0.82rem; cursor: pointer; }
  .screener-save-region:focus { outline: none; border-color: #a78bfa; }
  .screener-delete-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; border: 1px solid #4c1d24; background: #2a1114; color: #f87171; font-size: 0.82rem; font-weight: 600; cursor: pointer; }
  .screener-delete-btn:hover { background: #3a171c; border-color: #7f1d1d; }
  .screener-notice { margin: 8px 0; padding: 9px 13px; border-radius: 8px; font-size: 0.78rem; color: #93c5fd; background: rgba(59,130,246,0.10); border: 1px solid rgba(59,130,246,0.28); }

  /* Results table */
  .screener-table-wrap { margin-top: 6px; overflow-x: auto; }
  /* Wrappers that fill the rest of the viewport and scroll both ways, exactly
     like the watchlist's .table-wrapper. `fitScrollWrapper()` (tables.js) sets
     the pixel height; the sticky header needs a real scrollport to stick to. */
  .fill-wrap { overflow: auto; padding-bottom: 4px; }
  .screener-loading { display: flex; align-items: center; gap: 10px; padding: 22px 14px; color: #94a3b8; font-size: 0.85rem; }
  .screener-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(167,139,250,0.30); border-top-color: #a78bfa; animation: screener-spin 0.7s linear infinite; flex: none; }
  @keyframes screener-spin { to { transform: rotate(360deg); } }
  .screener-table-wrap.is-loading { opacity: 0.45; pointer-events: none; transition: opacity 0.15s; }
  .screener-table .screener-col-num { text-align: right; }
  /* Cell padding used to be set inline per <td> by screener.js/mf_screener.js;
     it lives here so the density toggle can override it. */
  .screener-table tbody td { padding: 10px 16px; }
  .screener-table thead th.screener-col-num { text-align: right; white-space: nowrap; }
  .screener-table thead th:first-child, .screener-table tbody td:first-child { width: 1%; white-space: nowrap; }
  .screener-empty { text-align: center; padding: 40px; color: #64748b; font-size: 0.9rem; }

  /* Fund Screener: fund-name first column (name + AMC sub-line, allowed to wrap). */
  .mf-table thead th:first-child, .mf-table tbody td:first-child { width: auto; white-space: normal; max-width: 340px; }
  .mf-fund-name { display: block; font-size: 0.9rem; font-weight: 600; color: #e2e8f0; line-height: 1.25; }
  .mf-fund-amc { display: block; font-size: 0.72rem; color: #64748b; margin-top: 2px; }
  html[data-theme="light"] .mf-fund-name { color: #1e293b; }
  html[data-theme="light"] .mf-fund-amc { color: #64748b; }
  .mf-col-text { text-align: left; font-size: 0.82rem; color: #cbd5e1; white-space: normal; min-width: 150px; max-width: 240px; }
  html[data-theme="light"] .mf-col-text { color: #334155; }
  .mf-row-clickable:hover { background: #1a1d2e; }
  html[data-theme="light"] .mf-row-clickable:hover { background: #f1f5f9; }
  /* ── Fund detail page ── */
  .mf-detail-back { background: none; border: 1px solid #2d3148; border-radius: 8px; padding: 7px 14px; color: #94a3b8; font-size: 0.85rem; cursor: pointer; transition: all 0.15s; margin-bottom: 18px; }
  .mf-detail-back:hover { border-color: #4f46e5; color: #a78bfa; }
  .mf-detail-head { margin-bottom: 22px; }
  .mf-detail-nav { margin-bottom: 22px; }
  .mf-detail-name { font-size: 1.3rem; font-weight: 700; color: #e2e8f0; margin: 0 0 4px; line-height: 1.3; }
  .mf-detail-sub { font-size: 0.85rem; color: #94a3b8; }
  .mf-detail-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-bottom: 28px; }
  .mf-nav-section { background: #14162a; border: 1px solid #232741; border-radius: 12px; padding: 14px 16px; margin-bottom: 22px; }
  .mf-nav-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
  .mf-nav-head h3 { font-size: 1rem; font-weight: 700; color: #e2e8f0; margin: 0; }
  .mf-nav-ranges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .mf-nav-chip { padding: 4px 10px; border-radius: 999px; border: 1px solid #2d3148; background: none; color: #94a3b8; font-size: 0.74rem; font-weight: 600; cursor: pointer; }
  .mf-nav-chip:hover { background: #1e2035; color: #cbd5e1; }
  .mf-nav-chip.active { background: #2d1b69; border-color: #7c3aed; color: #c4b5fd; }
  .mf-nav-benches { flex-basis: 100%; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .mf-nav-bchip { padding: 4px 10px; border-radius: 999px; border: 1px solid #2d3148; background: none; color: #94a3b8; font-size: 0.74rem; font-weight: 600; cursor: pointer; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mf-nav-bchip:hover { background: #1e2035; color: #cbd5e1; }
  .mf-nav-bchip.active { background: #2d1b69; border-color: #7c3aed; color: #c4b5fd; }
  .mf-nav-chart { width: 100%; height: 300px; }
  .mf-nav-note { margin-top: 8px; font-size: 0.75rem; color: #64748b; line-height: 1.5; }
  .mf-mgroup { background: #14162a; border: 1px solid #232741; border-radius: 12px; padding: 14px 16px; }
  .mf-mgroup-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #818cf8; margin-bottom: 10px; }
  .mf-mgroup-items { display: flex; flex-direction: column; gap: 7px; }
  .mf-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 0.84rem; flex-wrap: wrap; }
  .mf-stat-label { color: #94a3b8; }
  .mf-stat-value { color: #e2e8f0; font-weight: 600; text-align: right; }
  .mf-stat-value.positive { color: #34d399; }
  .mf-stat-value.negative { color: #f87171; }
  .mf-stat-sub { flex-basis: 100%; text-align: right; font-size: 0.72rem; font-weight: 500; color: #818cf8; margin-top: 1px; }
  .mf-detail-section { margin-bottom: 28px; }
  .mf-detail-h3 { font-size: 1rem; font-weight: 700; color: #e2e8f0; margin: 0 0 14px; }
  .mf-detail-info { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 20px; }
  .mf-detail-muted { color: #64748b; font-size: 0.85rem; }
  .mf-hold-note { margin-top: 10px; }
  .mf-hold-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
  .mf-hold-table th { text-align: left; color: #94a3b8; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; padding: 8px 12px; border-bottom: 1px solid #232741; }
  .mf-hold-table td { padding: 9px 12px; border-bottom: 1px solid #1a1d2e; vertical-align: middle; }
  .mf-hold-rank { color: #64748b; width: 32px; }
  .mf-hold-name { color: #e2e8f0; font-weight: 600; }
  .mf-hold-sector { display: block; font-size: 0.72rem; color: #64748b; font-weight: 400; margin-top: 2px; }
  .mf-hold-pct-h { text-align: right; }
  .mf-hold-pct { width: 26%; min-width: 170px; }
  .mf-hold-scroll { overflow-x: auto; }
  .mf-hold-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .mf-hold-head .mf-detail-h3 { margin-right: auto; }
  .mf-hold-table td.mf-num, .mf-hold-table th.mf-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .mf-hold-table td.mf-pos { color: #22c55e; }
  .mf-hold-table td.mf-neg { color: #ef4444; }
  .mf-hold-link { color: #818cf8; text-decoration: none; }
  .mf-hold-link:hover { text-decoration: underline; }
  .mf-hold-chevron { margin-left: 4px; opacity: 0.7; transition: transform 0.15s ease; display: inline-block; }
  .mf-hold-link:hover .mf-hold-chevron { transform: translateX(2px); }
  .mf-hold-bar { display: inline-block; width: calc(100% - 56px); height: 8px; background: #232741; border-radius: 4px; overflow: hidden; vertical-align: middle; margin-right: 8px; }
  .mf-hold-bar-fill { display: block; height: 100%; background: linear-gradient(90deg, #6366f1, #8b5cf6); border-radius: 4px; }
  .mf-hold-pct-val { display: inline-block; width: 46px; text-align: right; color: #e2e8f0; font-weight: 600; vertical-align: middle; }
  /* Sortable headers — same affordance as every other table in the app: a
     neutral ⇅ advertises that the column sorts, ▲/▼ marks the active one. */
  .mf-hold-table th.mf-hold-sortable { cursor: pointer; user-select: none; }
  .mf-hold-table th.mf-hold-sortable:hover { color: #cbd5e1; }
  .mf-hold-table th.sorted { color: #a5b4fc; }
  .mf-hold-table th .sort-icon { margin-left: 4px; font-size: 0.7em; opacity: 0.55; }
  .mf-hold-table th.sorted .sort-icon { opacity: 1; }
  .mf-hold-rank-h { width: 32px; }
  /* Portfolio-level aggregates: a concentration band above the table and a
     weighted-average footer row pinned under it. */
  .mf-hold-conc { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 10px; font-size: 0.8rem; color: #94a3b8; }
  .mf-hold-conc-item b { color: #e2e8f0; font-weight: 700; font-variant-numeric: tabular-nums; }
  .mf-hold-table tfoot td { border-top: 2px solid #232741; border-bottom: none; background: #171a2b; font-weight: 700; position: sticky; bottom: 0; }
  .mf-hold-agg-row .mf-hold-name { color: #94a3b8; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.03em; }
  .mf-hold-agg-pct { text-align: right; color: #e2e8f0; font-variant-numeric: tabular-nums; }
  /* Compact first column. `max-width` alone is a hint on a `table-layout: auto`
     table, so the width is pinned three ways and the cell's own text clamped —
     the full name stays in the cell's title tooltip. */
  body.firstcol-compact .mf-hold-table td.mf-hold-name,
  body.firstcol-compact .mf-hold-table th.mf-hold-sortable:nth-child(2) {
    width: 150px; min-width: 110px; max-width: 170px;
  }
  body.firstcol-compact .mf-hold-table td.mf-hold-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  body.firstcol-compact .mf-hold-table td.mf-hold-name .mf-hold-link {
    display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
  }
  body.firstcol-compact .mf-hold-sector { display: none; }
  /* ── Your Transactions (Portfolio → fund detail) ─────────────────── */
  .mf-txn-summary { font-size: 0.78rem; color: #94a3b8; margin: -6px 0 12px; }
  .mf-txn-wrap { max-height: 420px; overflow: auto; border: 1px solid #232741; border-radius: 8px; }
  .mf-txn-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
  .mf-txn-table th { position: sticky; top: 0; z-index: 1; background: #14172a; text-align: left; color: #94a3b8; font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; padding: 8px 12px; border-bottom: 1px solid #232741; }
  .mf-txn-table td { padding: 8px 12px; border-bottom: 1px solid #1a1d2e; color: #cbd5e1; white-space: nowrap; }
  .mf-txn-table tr:last-child td { border-bottom: none; }
  .mf-txn-table .mf-num { text-align: right; font-variant-numeric: tabular-nums; }
  .mf-txn-date { color: #94a3b8; }
  .mf-txn-out { color: #fca5a5; }
  html[data-theme="light"] .mf-txn-wrap { border-color: #e2e8f0; }
  html[data-theme="light"] .mf-txn-table th { background: #f8fafc; color: #64748b; border-bottom-color: #e2e8f0; }
  html[data-theme="light"] .mf-txn-table td { color: #334155; border-bottom-color: #f1f5f9; }
  html[data-theme="light"] .mf-txn-date { color: #64748b; }
  html[data-theme="light"] .mf-txn-out { color: #b91c1c; }
  @media (max-width: 768px) {
    .mf-txn-table th, .mf-txn-table td { padding: 7px 8px; font-size: 0.76rem; }
    .mf-hold-table th, .mf-hold-table td { padding: 7px 8px; font-size: 0.78rem; }
    .mf-hold-pct { min-width: 140px; }
    .mf-hold-conc { gap: 6px 12px; font-size: 0.74rem; }
    body.firstcol-compact .mf-hold-table td.mf-hold-name,
    body.firstcol-compact .mf-hold-table th.mf-hold-sortable:nth-child(2) {
      width: 108px; min-width: 88px; max-width: 120px;
    }
  }
  html[data-theme="light"] .mf-detail-back { border-color: #cbd5e1; color: #64748b; }
  html[data-theme="light"] .mf-detail-back:hover { border-color: #4f46e5; color: #4f46e5; }
  html[data-theme="light"] .mf-detail-name, html[data-theme="light"] .mf-detail-h3, html[data-theme="light"] .mf-stat-value, html[data-theme="light"] .mf-hold-name { color: #1e293b; }
  html[data-theme="light"] .mf-detail-sub, html[data-theme="light"] .mf-stat-label { color: #64748b; }
  html[data-theme="light"] .mf-stat-sub { color: #6366f1; }
  html[data-theme="light"] .mf-stat-value.positive { color: #059669; }
  html[data-theme="light"] .mf-stat-value.negative { color: #dc2626; }
  html[data-theme="light"] .mf-nav-section { background: #ffffff; border-color: #e2e8f0; }
  html[data-theme="light"] .mf-nav-head h3 { color: #1e293b; }
  html[data-theme="light"] .mf-nav-chip { border-color: #cbd5e1; color: #64748b; }
  html[data-theme="light"] .mf-nav-chip:hover { background: #f1f5f9; color: #334155; }
  html[data-theme="light"] .mf-nav-chip.active { background: #ede9fe; border-color: #c4b5fd; color: #6d28d9; }
  html[data-theme="light"] .mf-nav-bchip { border-color: #cbd5e1; color: #64748b; }
  html[data-theme="light"] .mf-nav-bchip:hover { background: #f1f5f9; color: #334155; }
  html[data-theme="light"] .mf-nav-bchip.active { background: #ede9fe; border-color: #c4b5fd; color: #6d28d9; }
  html[data-theme="light"] .mf-nav-note { color: #64748b; }
  html[data-theme="light"] .mf-mgroup { background: #f8fafc; border-color: #e2e8f0; }
  html[data-theme="light"] .mf-mgroup-title { color: #6366f1; }
  html[data-theme="light"] .mf-hold-table th { color: #64748b; border-bottom-color: #e2e8f0; }
  html[data-theme="light"] .mf-hold-table td { border-bottom-color: #f1f5f9; }
  html[data-theme="light"] .mf-hold-bar { background: #e2e8f0; }
  html[data-theme="light"] .mf-hold-pct-val { color: #1e293b; }
  html[data-theme="light"] .mf-hold-link { color: #4f46e5; }
  html[data-theme="light"] .mf-hold-table th.mf-hold-sortable:hover { color: #334155; }
  html[data-theme="light"] .mf-hold-table th.sorted { color: #4f46e5; }
  html[data-theme="light"] .mf-hold-conc { color: #64748b; }
  html[data-theme="light"] .mf-hold-conc-item b { color: #1e293b; }
  html[data-theme="light"] .mf-hold-table tfoot td { background: #f8fafc; border-top-color: #e2e8f0; }
  html[data-theme="light"] .mf-hold-agg-row .mf-hold-name { color: #64748b; }
  html[data-theme="light"] .mf-hold-agg-pct { color: #1e293b; }
  .admin-btn-cancel { margin-left: auto; background: #7f1d1d; color: #fecaca; border-color: #991b1b; }
  .admin-btn-cancel:hover:not(:disabled) { background: #991b1b; }

  /* Light overrides */
  html[data-theme="light"] .screener-flyout { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 12px 32px rgba(0,0,0,0.14); }
  html[data-theme="light"] .screener-fly-item { color: #334155; }
  html[data-theme="light"] .screener-fly-item:hover { background: #f1f5f9; color: #1f2937; }
  html[data-theme="light"] .screener-fly-dot { background: #7c3aed; }
  html[data-theme="light"] .screener-fly-empty { color: #94a3b8; }
  html[data-theme="light"] .screener-fly-add-row { border-top-color: #e2e8f0; }
  html[data-theme="light"] .screener-fly-add-btn { color: #64748b; border-color: #cbd5e1; }
  html[data-theme="light"] .screener-fly-add-btn:hover { background: #f1f5f9; color: #7c3aed; border-color: #cbd5e1; }
  html[data-theme="light"] .screener-fly-add-input { background: #ffffff; color: #1f2937; border-color: #cbd5e1; }
  html[data-theme="light"] .screener-fly-add-input:focus { border-color: #7c3aed; }
  html[data-theme="light"] .screener-title { color: #1f2937; }
  html[data-theme="light"] .screener-select { background: #ffffff; color: #1f2937; border-color: #cbd5e1; }
  html[data-theme="light"] .screener-select:focus { border-color: #7c3aed; }
  html[data-theme="light"] .screener-add-btn { color: #64748b; border-color: #cbd5e1; }
  html[data-theme="light"] .screener-add-btn:hover { background: #f1f5f9; color: #7c3aed; border-color: #cbd5e1; }
  html[data-theme="light"] .screener-add-input { background: #ffffff; color: #1f2937; border-color: #cbd5e1; }
  html[data-theme="light"] .screener-add-input:focus { border-color: #7c3aed; }
  html[data-theme="light"] .screener-add-go { background: #ede9fe; color: #6d28d9; border-color: #c4b5fd; }
  html[data-theme="light"] .screener-add-go:hover { background: #ddd6fe; }
  html[data-theme="light"] .screener-add-cancel { color: #64748b; border-color: #cbd5e1; }
  html[data-theme="light"] .screener-add-cancel:hover { background: #f1f5f9; color: #334155; }
  html[data-theme="light"] .screener-add-region { background: #ffffff; color: #1f2937; border-color: #cbd5e1; }
  html[data-theme="light"] .screener-add-region:focus { border-color: #7c3aed; }
  html[data-theme="light"] .screener-add-count { color: #64748b; }
  html[data-theme="light"] .screener-meta { color: #94a3b8; }
  html[data-theme="light"] .screener-loading { color: #64748b; }
  html[data-theme="light"] .screener-banner-warming { color: #b45309; background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.30); }
  html[data-theme="light"] .screener-banner-partial { color: #b91c1c; background: rgba(220,38,38,0.08); border-color: rgba(220,38,38,0.25); }
  html[data-theme="light"] .screener-params-inner { background: #f8fafc; border-color: #e2e8f0; }
  html[data-theme="light"] .screener-param-label { color: #475569; }
  html[data-theme="light"] .screener-param-input, html[data-theme="light"] .screener-param-multi { background: #ffffff; color: #1f2937; border-color: #cbd5e1; }
  html[data-theme="light"] .screener-param-input:focus, html[data-theme="light"] .screener-param-multi:focus { border-color: #7c3aed; }
  html[data-theme="light"] .screener-param-none { color: #94a3b8; }
  html[data-theme="light"] .screener-param-remove { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
  html[data-theme="light"] .screener-param-remove:hover { background: #fee2e2; border-color: #fca5a5; }
  html[data-theme="light"] .screener-param-add-select { background: #f5f3ff; color: #6d28d9; border-color: #c4b5fd; }
  html[data-theme="light"] .screener-param-add-select:focus { border-color: #7c3aed; }
  html[data-theme="light"] .screener-save-btn { background: #ede9fe; color: #6d28d9; border-color: #c4b5fd; }
  html[data-theme="light"] .screener-save-btn:hover { background: #ddd6fe; }
  html[data-theme="light"] .screener-preview-count { color: #7c3aed; }
  html[data-theme="light"] .screener-save-region-wrap { color: #64748b; }
  html[data-theme="light"] .screener-save-region { background: #ffffff; color: #1f2937; border-color: #cbd5e1; }
  html[data-theme="light"] .screener-save-region:focus { border-color: #7c3aed; }
  html[data-theme="light"] .screener-delete-btn { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
  html[data-theme="light"] .screener-delete-btn:hover { background: #fee2e2; border-color: #fca5a5; }
  html[data-theme="light"] .screener-notice { color: #1d4ed8; background: rgba(59,130,246,0.08); border-color: rgba(59,130,246,0.25); }

  @media (max-width: 768px) {
    #screener-view, #mf-screener-view, #portfolio-view { padding: 10px 10px 0; }
    /* Title and the chrome rows below it each stay on ONE line that scrolls
       sideways. Wrapped rows stacked three deep and left the table a sliver of
       a phone screen. */
    .screener-head { gap: 6px; flex-wrap: wrap; margin-bottom: 0; }
    .screener-title { font-size: 0.98rem; }
    .screener-head-actions { width: 100%; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 6px; margin: 4px 0; padding-bottom: 2px; }
    .screener-head-actions::-webkit-scrollbar { display: none; }
    .screener-head-actions > * { flex: 0 0 auto; }
    .screener-select-wrap { flex: 0 0 auto; }
    .screener-select { flex: 0 0 auto; max-width: 44vw; font-size: 0.78rem; padding: 5px 8px; }
    .screener-select-label { font-size: 0.75rem; }
    .screener-add-btn, .screener-delete-btn { padding: 5px 9px; font-size: 0.74rem; }
    .screener-params-inner { gap: 8px 10px; padding: 10px; }
    .mf-nav-section { padding: 10px 12px; }
    .mf-nav-chart { height: 220px; }
    .mf-nav-chip { padding: 4px 8px; font-size: 0.7rem; }
    .mf-nav-bchip { padding: 4px 8px; font-size: 0.7rem; max-width: 150px; }
    .screener-param-input { width: 72px; }
    .screener-save-name { width: 100%; }
    .screener-save-row { gap: 8px; }
    .screener-flyout { max-width: calc(100vw - 24px); }
  }

  /* ── Admin page ─────────────────────────────────────────────── */
  .admin-head { margin-bottom: 18px; }
  .admin-title { font-size: 1.4rem; font-weight: 700; color: #e2e8f0; margin: 0; }

  /* Profile page. Reuses .admin-card/.admin-head for the frame — it is the
     same "settings page" shape — and adds only the form primitives, which the
     admin console did not have because every one of its inputs is inline. */
  .prof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px 18px; margin: 12px 0 4px; }
  .prof-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
  .prof-label { font-size: 0.76rem; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; }
  .prof-input {
    width: 100%; box-sizing: border-box; padding: 9px 11px; border-radius: 8px;
    border: 1px solid #2d3148; background: #0f1120; color: #e2e8f0;
    font-size: 0.88rem; outline: none; transition: border-color 0.15s;
  }
  .prof-input:focus { border-color: #4f46e5; }
  .prof-input:disabled { color: #94a3b8; background: #12142400; cursor: not-allowed; }
  .prof-hint { font-size: 0.72rem; color: #64748b; line-height: 1.45; }
  .prof-actions { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
  .prof-btn {
    /* 44px tall so it is a real target on a phone, matching .row-remove and
       the mobile nav rows rather than the 30px desktop-only buttons. */
    min-height: 44px; padding: 0 18px; border-radius: 8px; border: none;
    background: #4f46e5; color: #fff; font-size: 0.85rem; font-weight: 600;
    cursor: pointer;
  }
  .prof-btn:hover { background: #4338ca; }
  .prof-btn:disabled { opacity: 0.55; cursor: default; }
  .prof-status { font-size: 0.8rem; font-weight: 600; color: #94a3b8; }
  .prof-status.ok { color: #10b981; }
  .prof-status.err { color: #f87171; }
  html[data-theme="light"] .prof-label { color: #64748b; }
  html[data-theme="light"] .prof-input { background: #fff; border-color: #e2e8f0; color: #1f2937; }
  html[data-theme="light"] .prof-input:disabled { color: #64748b; background: #f8fafc; }
  html[data-theme="light"] .prof-hint { color: #94a3b8; }
  html[data-theme="light"] .prof-status { color: #64748b; }
  .admin-sub { font-size: 0.85rem; color: #94a3b8; margin: 5px 0 0; }
  .admin-gate-msg { display: inline-block; margin-top: 12px; padding: 10px 14px; border-radius: 8px; font-size: 0.85rem; color: #f87171; background: rgba(248,113,113,0.10); border: 1px solid rgba(248,113,113,0.28); }
  .admin-sections { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
  .admin-sections-label { font-size: 0.76rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; }
  .admin-section-chip { padding: 5px 12px; border-radius: 999px; border: 1px solid #2d3148; background: #0f1120; color: #94a3b8; font-size: 0.78rem; font-weight: 600; cursor: pointer; }
  .admin-section-chip:hover { color: #cbd5e1; border-color: #3b4166; }
  .admin-section-chip.active { background: #2d1b69; border-color: #4c1d95; color: #c4b5fd; }
  .admin-card { background: #14162a; border: 1px solid #2d3148; border-radius: 12px; padding: 18px 18px 16px; margin-bottom: 18px; }
  .admin-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
  .admin-card-title { font-size: 1.02rem; font-weight: 700; color: #e2e8f0; margin: 0 0 2px; }
  .admin-card-desc { font-size: 0.8rem; color: #94a3b8; margin: 0 0 12px; }
  .admin-refresh-status { padding: 5px 11px; border-radius: 7px; border: 1px solid #2d3148; background: #0f1120; color: #a78bfa; font-size: 0.78rem; font-weight: 600; cursor: pointer; }
  .admin-refresh-status:hover { background: #1e2035; }
  .admin-hint { font-size: 0.74rem; color: #64748b; margin: 12px 0 0; line-height: 1.5; }
  .admin-hint b { color: #94a3b8; }

  /* Job progress bar */
  .admin-job-bar { margin: 6px 0 14px; padding: 12px 14px; border-radius: 10px; background: rgba(167,139,250,0.08); border: 1px solid rgba(167,139,250,0.28); }
  .admin-job-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
  .admin-job-text { font-size: 0.82rem; color: #c4b5fd; font-weight: 600; }
  .admin-job-text b { color: #e2e8f0; }
  .admin-job-live { color: #4ade80 !important; }
  .admin-job-count { color: #e2e8f0; }
  .admin-job-step { margin-left: 8px; padding: 1px 8px; border-radius: 6px; background: rgba(167,139,250,0.18); color: #c4b5fd; font-size: 0.72rem; font-weight: 600; }
  .admin-job-meta { margin-left: auto; font-size: 0.72rem; color: #64748b; font-weight: 600; white-space: nowrap; }
  .admin-job-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(167,139,250,0.35); border-top-color: #a78bfa; animation: adminSpin 0.8s linear infinite; flex: none; }
  @keyframes adminSpin { to { transform: rotate(360deg); } }
  .admin-job-track { height: 8px; border-radius: 6px; background: rgba(15,17,32,0.7); overflow: hidden; }
  .admin-job-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, #7c3aed, #a78bfa); transition: width 0.4s ease; }
  .admin-job-fill-indet { width: 35%; transition: none; animation: adminIndet 1.1s ease-in-out infinite; }
  @keyframes adminIndet { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }
  .admin-stk-errors { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: rgba(248,113,113,0.07); border: 1px solid rgba(248,113,113,0.3); }
  .admin-stk-err-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 0.8rem; font-weight: 700; color: #fca5a5; margin-bottom: 8px; }
  .admin-stk-err-head b { padding: 1px 7px; border-radius: 999px; background: rgba(248,113,113,0.2); }
  .admin-stk-err-note { font-size: 0.72rem; font-weight: 500; color: var(--text-dim); }
  .admin-stk-err-table { width: 100%; border-collapse: collapse; font-size: 0.76rem; }
  .admin-stk-err-table th { text-align: left; padding: 4px 8px; color: var(--text-dim); font-weight: 600; border-bottom: 1px solid rgba(248,113,113,0.22); }
  .admin-stk-err-table td { padding: 4px 8px; border-bottom: 1px solid rgba(148,163,184,0.12); vertical-align: top; }
  .admin-stk-err-tkr { font-weight: 700; }
  .admin-stk-err-stuck { color: #f87171; font-weight: 700; }
  .admin-stk-err-why { color: var(--text-dim); word-break: break-word; max-width: 460px; }
  /* Data integrity — XBRL coverage */
  .admin-di-summary { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
  .admin-di-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
  .admin-di-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .admin-di-chip { padding: 4px 11px; border-radius: 999px; font-size: 0.74rem; font-weight: 600; cursor: pointer; background: transparent; color: var(--text-dim); border: 1px solid rgba(148,163,184,0.3); }
  .admin-di-chip:hover { border-color: rgba(167,139,250,0.5); color: var(--text); }
  .admin-di-chip.active { background: rgba(167,139,250,0.16); border-color: rgba(167,139,250,0.5); color: #a78bfa; }
  .admin-di-tablewrap { overflow-x: auto; border-radius: 10px; border: 1px solid rgba(148,163,184,0.18); }
  .admin-di-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
  .admin-di-th { position: sticky; top: 0; z-index: 1; text-align: right; white-space: nowrap; padding: 7px 10px; cursor: pointer; user-select: none; font-size: 0.72rem; font-weight: 600; color: var(--text-dim); background: var(--card-bg, #171a2e); border-bottom: 1px solid rgba(148,163,184,0.25); }
  .admin-di-th:first-child { text-align: left; }
  .admin-di-th:hover { color: #a78bfa; }
  .admin-di-th.active { color: #a78bfa; }
  .admin-di-table td { padding: 6px 10px; border-bottom: 1px solid rgba(148,163,184,0.1); white-space: nowrap; }
  .admin-di-table tr:hover td { background: rgba(167,139,250,0.05); }
  .admin-di-metric { text-align: left; }
  .admin-di-col { display: block; font-size: 0.68rem; color: var(--text-dim); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
  .admin-di-kind { padding: 1px 7px; border-radius: 999px; font-size: 0.66rem; font-weight: 600; background: rgba(148,163,184,0.16); color: var(--text-dim); }
  .admin-di-kind-current { background: rgba(167,139,250,0.16); color: #a78bfa; }
  .admin-di-kind-guidance { background: rgba(56,189,248,0.14); color: #38bdf8; }
  .admin-di-num { text-align: right; font-variant-numeric: tabular-nums; }
  .admin-di-blank { color: var(--text-dim); }
  .admin-di-na { text-align: right; color: var(--text-dim); }
  .admin-di-pct { text-align: right; min-width: 120px; }
  .admin-di-bar { display: inline-block; width: 56px; height: 6px; border-radius: 4px; background: rgba(148,163,184,0.2); overflow: hidden; vertical-align: middle; margin-right: 7px; }
  .admin-di-bar i { display: block; height: 100%; border-radius: 4px; background: currentColor; }
  .admin-di-pctnum { font-variant-numeric: tabular-nums; }
  .admin-di-pct.di-good { color: #4ade80; }
  .admin-di-pct.di-warn { color: #fbbf24; }
  .admin-di-pct.di-bad { color: #fb923c; }
  .admin-di-pct.di-zero { color: #f87171; font-weight: 700; }
  .admin-di-empty { padding: 16px; text-align: center; color: var(--text-dim); }
  .admin-di-breakdown { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
  .admin-di-subhead { flex: 0 0 100%; font-size: 0.74rem; font-weight: 700; color: var(--text-dim); }
  .admin-di-subtitle { margin: 26px 0 6px; padding-top: 18px; border-top: 1px solid rgba(148,163,184,0.18); font-size: 0.92rem; font-weight: 700; color: var(--text); }
  /* The global `table { min-width: 1200px }` is right for the wide metric grid
     next door and wrong for this 3-column one, which would scroll for nothing. */
  .admin-cov-table { min-width: 0; }
  .admin-cov-table td:first-child { white-space: normal; }
  /* This table opts out of the global wide-table chrome: the sticky first
     column (and its edge shadow) exist for tables that actually scroll, and
     the zebra stripe is what makes the un-pinned first cell look detached
     from the rest of its row. `!important` because the theme rules that paint
     both are more specific than a single class can be. */
  .admin-cov-table tbody td:first-child,
  .admin-cov-table thead th:first-child {
    position: static; box-shadow: none !important; }
  .admin-cov-table tbody tr td,
  .admin-cov-table tbody tr:nth-child(even) td { background: transparent !important; }
  .admin-cov-table tbody tr:hover td { background: rgba(167,139,250,0.07) !important; }
  /* The reason a quarter is absent needs a sentence, not a label — the counts
     are meaningless without it, and a tooltip hides exactly the thing the
     reader opened the card to learn. */
  .admin-di-hint { display: block; margin-top: 2px; font-size: 0.7rem; font-weight: 400; color: var(--text-dim); white-space: normal; }
  .admin-cov-classes { margin-top: 14px; }
  .admin-cov-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
  .admin-uni-warming { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; font-size: 0.74rem; font-weight: 600; color: #a78bfa; vertical-align: middle; }
  .admin-uni-warming .admin-job-spin { width: 11px; height: 11px; border-width: 2px; }

  /* Universe table */
  .admin-uni-wrap { overflow-x: auto; }
  .admin-uni-table { width: 100%; min-width: 0; border-collapse: collapse; font-size: 0.85rem; }
  .admin-uni-table thead th { text-align: left; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; font-weight: 700; padding: 6px 12px; border-bottom: 1px solid #2d3148; white-space: nowrap; }
  .admin-uni-table th.admin-uni-actions { text-align: right; }
  .admin-uni-row td { padding: 9px 12px; border-bottom: 1px solid #23263c; vertical-align: middle; }
  .admin-uni-row:hover td { background: rgba(167,139,250,0.05); }
  .admin-uni-loading td { padding: 16px 12px; color: #94a3b8; font-size: 0.85rem; }
  .admin-uni-loading .admin-job-spin { display: inline-block; vertical-align: middle; margin-right: 8px; }
  .admin-row-active td { background: rgba(167,139,250,0.10) !important; }
  .admin-uni-market { font-weight: 700; color: #e2e8f0; white-space: nowrap; vertical-align: top; }
  .admin-uni-market-name { display: block; }
  .admin-uni-market-cont { color: transparent; }
  .admin-btn-market { display: inline-block; margin: 6px 0 0; font-weight: 600; background: #131a2e; color: #7dd3fc; border-color: #1e3a5f; }
  .admin-btn-market:hover:not(:disabled) { background: #1c2740; }
  .admin-market-full { display: block; margin-top: 6px; font-size: 0.72rem; font-weight: 600; color: #4ade80; white-space: nowrap; }
  .admin-uni-name { color: #cbd5e1; }
  .admin-uni-loaded { white-space: nowrap; }
  .admin-loaded-badge { display: inline-block; padding: 2px 8px; border-radius: 6px; background: rgba(148,163,184,0.14); color: #cbd5e1; font-weight: 600; font-variant-numeric: tabular-nums; }
  .admin-loaded-badge.full { background: rgba(34,197,94,0.16); color: #4ade80; }
  .admin-loaded-pct { margin-left: 8px; color: #64748b; font-size: 0.74rem; font-variant-numeric: tabular-nums; }
  .admin-uni-updated { color: #94a3b8; white-space: nowrap; font-size: 0.8rem; }
  .admin-ec-cal { display: block; margin-top: 3px; font-size: 0.74rem; color: #64748b; }
  .admin-ec-cal b { color: #94a3b8; }
  .admin-ec-cal b.admin-ec-due { color: #fbbf24; }
  .admin-uni-actions { text-align: right; white-space: nowrap; }
  .admin-btn { padding: 5px 12px; border-radius: 7px; font-size: 0.78rem; font-weight: 600; cursor: pointer; margin-left: 6px; border: 1px solid #2d3148; }
  .admin-btn:disabled { opacity: 0.45; cursor: default; }
  .admin-btn-warm { background: #0f1120; color: #a78bfa; }
  .admin-btn-warm:hover:not(:disabled) { background: #1e2035; }
  .admin-btn-refresh { background: #2d1b69; color: #c4b5fd; border-color: #7c3aed; }
  .admin-btn-refresh:hover:not(:disabled) { background: #3a2585; }

  /* Schedule */
  .admin-sched-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
  /* Sets the cadence apart from the manual controls it sits under. */
  .admin-sched-block { margin-top: 16px; padding-top: 14px; border-top: 1px solid #2d3148; }
  .admin-sched-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.72rem; font-weight: 600; color: #94a3b8; }
  .admin-sched-select { padding: 7px 10px; border-radius: 8px; border: 1px solid #3b3f5c; background: #0f1120; color: #e2e8f0; font-size: 0.85rem; font-weight: 600; min-width: 140px; }
  .admin-sched-select:focus { outline: none; border-color: #a78bfa; }
  .admin-sched-save { padding: 8px 16px; border-radius: 8px; border: 1px solid #7c3aed; background: #2d1b69; color: #c4b5fd; font-size: 0.82rem; font-weight: 600; cursor: pointer; }
  .admin-sched-save:hover:not(:disabled) { background: #3a2585; }
  .admin-sched-save:disabled { opacity: 0.55; cursor: default; }
  .admin-sched-status { font-size: 0.8rem; font-weight: 600; color: #94a3b8; }
  .admin-sched-status.ok { color: #4ade80; }
  .admin-sched-status.err { color: #f87171; }
  .admin-sched-meta { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
  .admin-sched-off { font-size: 0.8rem; color: #64748b; }
  .admin-sched-chip { font-size: 0.78rem; color: #94a3b8; padding: 5px 11px; border-radius: 7px; background: rgba(148,163,184,0.10); border: 1px solid #2d3148; }
  .admin-sched-chip b { color: #cbd5e1; }

  /* SEC filings — the coverage table is grouped by market, and the group
     header must read as a heading rather than as one more dataset row. */
  .admin-sec-mkt-row th { text-align: left; padding: 14px 10px 6px; font-size: 0.84rem; font-weight: 700; color: #e2e8f0; border-bottom: 1px solid #2d3148; }
  .admin-sec-mkt-row:first-child th { padding-top: 4px; }
  .admin-sec-mkt-row th .admin-loaded-pct { margin-left: 8px; font-weight: 600; }

  /* SEC filings — per-run counts. The first question of a morning is "did last
     night's run do anything", so it sits above the per-ticker trail. */
  .admin-sec-runs { margin-top: 16px; }
  .admin-sec-runs-head { margin-bottom: 4px; }
  .admin-sec-runs-empty { padding: 10px 12px; border: 1px dashed #2d3148; border-radius: 8px; }
  .admin-sec-runs .admin-uni-wrap { max-height: 300px; overflow-y: auto; }
  .admin-sec-runs .admin-uni-table thead th { position: sticky; top: 0; z-index: 2; background: #14162a; }
  .admin-sec-run-na { color: #64748b; }

  /* SEC filings — one self-contained control group per market. Block-level and
     separately framed on purpose: these are two different multi-hour
     production jobs, and a wrapped flex row let the wrong market's "Full sync"
     end up under the other market's heading on a phone. */
  .admin-sec-group { display: block; margin-top: 18px; padding: 14px 14px 4px; border: 1px solid #2d3148; border-radius: 10px; background: rgba(148,163,184,0.04); }
  .admin-sec-group-title { margin: 0 0 2px; font-size: 0.95rem; font-weight: 700; color: #e2e8f0; }
  .admin-sec-group-title .admin-sec-group-src { margin-left: 8px; font-size: 0.78rem; font-weight: 600; color: #94a3b8; }
  .admin-sec-group .admin-sched-block:first-of-type { margin-top: 10px; }
  .admin-sec-cancel-row { margin-top: 16px; align-items: center; }

  /* SEC filings — per-ticker sync log. Capped and scrollable: this is an audit
     trail that can run to hundreds of rows and must not push the cards below
     it off the page. */
  .admin-sec-items { margin-top: 16px; }
  .admin-sec-items-head { margin-bottom: 4px; }
  .admin-sec-items-window { margin-left: 8px; }
  .admin-sec-items-empty { padding: 10px 12px; border: 1px dashed #2d3148; border-radius: 8px; }
  .admin-sec-items .admin-uni-wrap { max-height: 340px; overflow-y: auto; }
  .admin-sec-items .admin-uni-table thead th { position: sticky; top: 0; z-index: 2; background: #14162a; }

  /* External data sources — a read-only reference card, one table per group. */
  .admin-ds-summary { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
  .admin-ds-count { font-size: 0.82rem; color: #94a3b8; font-weight: 600; }
  .admin-ds-pill { font-size: 0.7rem; font-weight: 700; border-radius: 999px; padding: 2px 9px; }
  .admin-ds-group { margin-bottom: 18px; }
  .admin-ds-grouphead { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; font-weight: 700; margin: 0 0 8px; }
  .admin-ds-empty { font-size: 0.82rem; color: #94a3b8; padding: 10px 12px; border: 1px dashed #2d3148; border-radius: 8px; }
  .admin-ds-key { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.7rem; color: #64748b; margin-top: 2px; }
  .admin-ds-note { font-size: 0.72rem; color: #64748b; margin-top: 2px; white-space: normal; }
  .admin-ds-link { color: #818cf8; text-decoration: none; }
  .admin-ds-link:hover { text-decoration: underline; }
  .admin-ds-ok { background: rgba(34,197,94,0.16); color: #4ade80; }
  .admin-ds-keyless { background: rgba(148,163,184,0.16); color: #94a3b8; }
  .admin-ds-missing { background: rgba(251,191,36,0.16); color: #fbbf24; }
  .admin-ds-groups .admin-uni-table td { white-space: normal; }

  /* API reference — an expandable list, not a table. Each endpoint collapses to
     one line so 120+ of them stay scannable, and only the opened one pays the
     vertical cost of its samples. */
  .admin-api-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
  .admin-api-search { flex: 1 1 260px; min-width: 0; font: inherit; font-size: 0.82rem; color: #cbd5e1; background: rgba(148,163,184,0.07); border: 1px solid #2d3148; border-radius: 8px; padding: 7px 11px; }
  .admin-api-search:focus { outline: none; border-color: #6366f1; }
  .admin-api-expand { font: inherit; font-size: 0.74rem; font-weight: 600; color: #94a3b8; background: rgba(148,163,184,0.08); border: 1px solid #2d3148; border-radius: 999px; padding: 5px 12px; cursor: pointer; }
  .admin-api-expand:hover { color: #cbd5e1; background: rgba(148,163,184,0.14); }
  .admin-api-group { margin-bottom: 20px; }
  .admin-api-gcount { font-size: 0.68rem; font-weight: 700; color: #64748b; background: rgba(148,163,184,0.12); border-radius: 999px; padding: 1px 7px; margin-left: 6px; }
  .admin-api-row { border: 1px solid #2d3148; border-radius: 8px; margin-bottom: 6px; overflow: hidden; }
  .admin-api-row-open { border-color: #3f455f; }
  .admin-api-head { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: rgba(148,163,184,0.05); border: none; cursor: pointer; text-align: left; font: inherit; color: #cbd5e1; }
  .admin-api-head:hover { background: rgba(148,163,184,0.10); }
  .admin-api-method { flex: 0 0 auto; min-width: 52px; text-align: center; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.04em; border-radius: 4px; padding: 3px 6px; }
  .admin-api-get { background: rgba(56,189,248,0.16); color: #38bdf8; }
  .admin-api-post { background: rgba(34,197,94,0.16); color: #4ade80; }
  .admin-api-delete { background: rgba(248,113,113,0.16); color: #f87171; }
  .admin-api-path { flex: 1 1 auto; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem; overflow-wrap: anywhere; }
  .admin-api-auth { flex: 0 0 auto; font-size: 0.66rem; font-weight: 700; border-radius: 999px; padding: 2px 8px; }
  .admin-api-auth-admin { background: rgba(251,191,36,0.16); color: #fbbf24; }
  .admin-api-auth-user { background: rgba(148,163,184,0.16); color: #94a3b8; }
  .admin-api-auth-public { background: rgba(34,197,94,0.14); color: #4ade80; }
  .admin-api-undoc { flex: 0 0 auto; font-size: 0.64rem; font-weight: 700; border-radius: 999px; padding: 2px 8px; background: rgba(248,113,113,0.16); color: #f87171; }
  .admin-api-caret { flex: 0 0 auto; color: #64748b; font-size: 0.72rem; }
  .admin-api-teaser { padding: 0 12px 9px 74px; font-size: 0.76rem; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .admin-api-detail { padding: 4px 12px 12px; border-top: 1px solid #2d3148; }
  .admin-api-purpose { font-size: 0.82rem; color: #cbd5e1; line-height: 1.55; margin: 10px 0; }
  .admin-api-notes { font-size: 0.76rem; color: #fbbf24; background: rgba(251,191,36,0.08); border-left: 2px solid rgba(251,191,36,0.5); border-radius: 0 6px 6px 0; padding: 7px 10px; margin-bottom: 10px; line-height: 1.5; }
  .admin-api-block { margin-bottom: 10px; }
  .admin-api-block-head { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; font-weight: 700; margin-bottom: 4px; }
  .admin-api-pre { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.72rem; line-height: 1.5; color: #cbd5e1; background: rgba(148,163,184,0.06); border: 1px solid #2d3148; border-radius: 6px; padding: 9px 11px; overflow-x: auto; white-space: pre; }
  .admin-api-curl .admin-api-pre { color: #a5b4fc; }
  .admin-api-note { font-size: 0.76rem; color: #94a3b8; }
  .admin-api-params { width: 100%; border-collapse: collapse; }
  .admin-api-params td { font-size: 0.76rem; color: #94a3b8; padding: 4px 8px 4px 0; border-bottom: 1px solid #23263a; vertical-align: top; white-space: normal; }
  .admin-api-param { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #cbd5e1; white-space: nowrap; }

  /* Earnings-call recent syncs */
  .admin-ec-syncs { margin-top: 16px; }  .admin-ec-sync-head { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; font-weight: 700; margin-bottom: 8px; }
  .admin-ec-sync-window { text-transform: none; letter-spacing: 0; font-weight: 600; color: #64748b; background: rgba(148,163,184,0.12); border-radius: 999px; padding: 1px 8px; margin-left: 8px; }
  .admin-ec-sync-empty { font-size: 0.82rem; color: #94a3b8; padding: 10px 12px; border: 1px dashed #2d3148; border-radius: 8px; }
  .admin-ec-sync-item { border: 1px solid #2d3148; border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
  .admin-ec-sync-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 12px; background: rgba(148,163,184,0.05); border: none; cursor: pointer; text-align: left; font: inherit; color: #cbd5e1; }
  .admin-ec-sync-row:hover { background: rgba(148,163,184,0.10); }
  .admin-ec-sync-caret { display: inline-block; transition: transform 0.15s; color: #64748b; font-size: 0.8rem; }
  .admin-ec-sync-caret.open { transform: rotate(90deg); }
  .admin-ec-sync-when { min-width: 150px; font-size: 0.82rem; color: #e2e8f0; }
  .admin-ec-sync-mode { font-size: 0.72rem; font-weight: 700; padding: 1px 8px; border-radius: 6px; background: rgba(96,165,250,0.16); color: #93c5fd; }
  .admin-ec-sync-mkt { font-size: 0.8rem; color: #94a3b8; }
  .admin-ec-sync-count { margin-left: auto; font-size: 0.8rem; color: #94a3b8; }
  .admin-ec-sync-count b { color: #4ade80; }
  .admin-ec-sync-cal { color: #7dd3fc; }
  .admin-ec-sync-badge { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; padding: 2px 8px; border-radius: 6px; }
  .admin-ec-sync-badge.done { background: rgba(74,222,128,0.15); color: #4ade80; }
  .admin-ec-sync-badge.run { background: rgba(250,204,21,0.16); color: #fde047; }
  .admin-ec-sync-badge.cancel { background: rgba(248,113,113,0.16); color: #fca5a5; }
  .admin-ec-sync-detail { padding: 4px 12px 12px; overflow-x: auto; }
  .admin-ec-sync-loading { font-size: 0.82rem; color: #94a3b8; padding: 10px 2px; }
  .admin-ec-rep-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
  .admin-ec-rep-table thead th { text-align: left; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; font-weight: 700; padding: 5px 10px; border-bottom: 1px solid #2d3148; white-space: nowrap; }
  .admin-ec-rep-table tbody td { padding: 5px 10px; border-bottom: 1px solid rgba(45,49,72,0.5); color: #cbd5e1; white-space: nowrap; }
  .admin-ec-rep-tk { font-weight: 700; color: #e2e8f0; }

  /* Sync queue console */
  .admin-ec-sync-badge.part { background: rgba(251,146,60,0.16); color: #fdba74; }
  .admin-sync-jobs { display: grid; gap: 10px; margin: 4px 0 16px; }
  .admin-sync-job { border: 1px solid #2d3148; border-radius: 10px; padding: 10px 12px; }
  .admin-sync-job-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .admin-sync-job-name { font-size: 0.88rem; font-weight: 700; color: #e2e8f0; }
  .admin-sync-cadence { font-size: 0.72rem; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: rgba(148,163,184,0.12); color: #94a3b8; }
  .admin-sync-toggle { margin-left: auto; font-size: 0.78rem; color: #94a3b8; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
  .admin-sync-job-desc { font-size: 0.78rem; color: #94a3b8; margin: 5px 0 7px; }
  .admin-sync-job-last { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.79rem; color: #94a3b8; }
  .admin-sync-when { color: #e2e8f0; }
  .admin-sync-nums { color: #94a3b8; }
  .admin-sync-none { font-size: 0.79rem; color: #64748b; font-style: italic; }
  .admin-sync-job-controls { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 9px; }
  .admin-sync-field { display: flex; flex-direction: column; gap: 3px; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: #64748b; font-weight: 700; }
  .admin-sync-field input { width: 78px; padding: 4px 7px; border-radius: 6px; border: 1px solid #2d3148; background: rgba(148,163,184,0.06); color: #e2e8f0; font: inherit; font-size: 0.8rem; }
  .admin-btn-mini { padding: 3px 9px; font-size: 0.74rem; }
  .admin-sync-filterrow label { font-size: 0.78rem; color: #94a3b8; }
  .admin-sync-run-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 0 9px; }
  .admin-sync-runerr { font-size: 0.78rem; color: #fca5a5; }
  .admin-sync-task-table td { white-space: normal; }
  .admin-sync-taskfail td { background: rgba(248,113,113,0.07); }
  .admin-sync-err { max-width: 380px; overflow: hidden; text-overflow: ellipsis; color: #fca5a5 !important; }

  /* Alerts — the daily summary in the sync console, and the Alerts summary card */
  .admin-sync-alerts { margin-top: 22px; padding-top: 16px; border-top: 1px solid #2d3148; }
  .admin-sync-sub-head { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
  .admin-alert-h { margin: 14px 0 6px; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; font-weight: 700; }
  .admin-alert-table td { vertical-align: top; }
  .admin-alert-table td b { color: #e2e8f0; }
  .admin-alert-sub { display: block; font-size: 0.7rem; color: #64748b; margin-top: 2px; }
  .admin-alert-day, .admin-alert-kind { color: #e2e8f0 !important; font-weight: 600; }
  .admin-alert-none { color: #475569; }
  .admin-alert-na { color: #3b4252; }
  .admin-alert-total b { color: #93c5fd; }
  .admin-alert-foot td { border-top: 1px solid #2d3148; font-weight: 600; color: #94a3b8 !important; }
  .admin-alertsum-block { margin-top: 18px; overflow-x: auto; }
  .admin-alertsum-note { margin: 10px 0; padding: 9px 12px; border-radius: 8px; font-size: 0.8rem; background: rgba(248,113,113,0.08); border: 1px solid rgba(248,113,113,0.3); color: #fca5a5; }
  .admin-alert-runs { overflow-x: auto; }
  .admin-alert-table td.admin-sync-taskfail { background: rgba(248,113,113,0.07); }
  .admin-alert-failnote { margin: 10px 0 4px; }
  .admin-sync-alerttoggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
  .admin-sync-alerttoggle input { accent-color: #60a5fa; }

  /* Warm not-synced report */
  .admin-job-un { margin-left: 8px; padding: 1px 8px; border-radius: 6px; background: rgba(248,113,113,0.16); color: #fca5a5; font-size: 0.72rem; font-weight: 600; }
  .admin-warm-report { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: rgba(248,113,113,0.06); border: 1px solid rgba(248,113,113,0.28); }
  .admin-warm-report-head { font-size: 0.8rem; font-weight: 600; color: #fca5a5; margin-bottom: 6px; line-height: 1.5; }
  .admin-warm-report-uni { margin-top: 8px; }
  .admin-warm-report-uni-h { font-size: 0.8rem; color: #e2e8f0; }
  .admin-warm-report-tks { margin-top: 3px; font-size: 0.74rem; color: #94a3b8; line-height: 1.5; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

  /* User analytics */
  .admin-analytics-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .admin-window { display: inline-flex; background: #0f1120; border: 1px solid #2d3148; border-radius: 8px; padding: 2px; }
  .admin-window-btn { padding: 5px 11px; border: none; background: transparent; color: #94a3b8; font-size: 0.76rem; font-weight: 600; cursor: pointer; border-radius: 6px; }
  .admin-window-btn:hover { color: #cbd5e1; }
  .admin-window-btn.active { background: #2d1b69; color: #c4b5fd; }
  .admin-stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 14px 0; }
  .admin-stat-card { padding: 14px 16px; border-radius: 10px; background: rgba(167,139,250,0.06); border: 1px solid rgba(167,139,250,0.18); }
  .admin-stat-val { font-size: 1.5rem; font-weight: 700; color: #e2e8f0; font-variant-numeric: tabular-nums; }
  .admin-stat-lbl { margin-top: 3px; font-size: 0.72rem; font-weight: 600; color: #94a3b8; }
  .admin-num { font-variant-numeric: tabular-nums; color: #cbd5e1; }
  .admin-user-email { color: #cbd5e1; word-break: break-all; }
  .admin-user-actions-cell { max-width: 340px; }
  .admin-action-chip { display: inline-block; margin: 2px 5px 2px 0; padding: 2px 8px; border-radius: 6px; background: rgba(148,163,184,0.12); color: #cbd5e1; font-size: 0.72rem; font-weight: 600; }
  .admin-action-chip b { color: #a78bfa; }
  .admin-muted { color: #64748b; }
  .admin-users-empty { padding: 16px 12px; color: #94a3b8; font-size: 0.85rem; text-align: center; }
  .menu-admin svg { flex: none; }

  /* Admin — reliability & performance */
  .admin-rel-subhead { margin: 20px 0 4px; font-size: 0.84rem; font-weight: 700; color: #cbd5e1; }
  .admin-rel-hint { margin-top: 0; }
  .admin-rel-note { margin: 10px 0; padding: 9px 12px; border-radius: 8px; font-size: 0.78rem; background: rgba(251,191,36,0.10); border: 1px solid rgba(251,191,36,0.28); color: #fbbf24; }
  /* Five stat cards here, not the four the analytics grid assumes — and they
     must not squeeze to an unreadable width on a narrow viewport. */
  #admin-rel-api-cards, #admin-rel-job-cards { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .admin-rel-ep { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem; word-break: break-all; }
  .admin-rel-pill { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 0.74rem; font-weight: 700; font-variant-numeric: tabular-nums; }
  .admin-rel-good { color: #4ade80; background: rgba(74,222,128,0.12); }
  .admin-rel-warn { color: #fbbf24; background: rgba(251,191,36,0.14); }
  .admin-rel-bad { color: #f87171; background: rgba(248,113,113,0.14); }
  td.admin-rel-bad { background: none; }
  .admin-rel-drill > td { background: rgba(148,163,184,0.06); padding: 12px 14px; }
  .admin-rel-reasons { margin-bottom: 8px; }
  .admin-rel-drill-table { font-size: 0.76rem; }
  .admin-rel-msg-cell { max-width: 420px; }
  .admin-rel-msg { color: #94a3b8; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.72rem; line-height: 1.5; word-break: break-word; }
  .admin-rel-taskerr { margin-top: 4px; color: #94a3b8; font-size: 0.72rem; line-height: 1.5; word-break: break-word; }
  .admin-rel-taskerr b { color: #cbd5e1; }

  /* Admin — sync settings */
  .admin-ss-note { margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; background: rgba(251,191,36,0.10); border: 1px solid rgba(251,191,36,0.28); color: #fbbf24; font-size: 0.78rem; }
  .admin-ss-groups { display: flex; flex-direction: column; gap: 18px; }
  .admin-ss-group { border-top: 1px solid #1f2937; padding-top: 12px; }
  .admin-ss-group:first-child { border-top: none; padding-top: 0; }
  .admin-ss-group-title { margin: 0 0 10px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #94a3b8; }
  .admin-ss-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; padding: 9px 10px; border-radius: 8px; }
  .admin-ss-row + .admin-ss-row { border-top: 1px solid rgba(148,163,184,0.10); }
  .admin-ss-row-set { background: rgba(124,58,237,0.10); }
  .admin-ss-label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 240px; flex: 1 1 320px; }
  .admin-ss-name { font-size: 0.86rem; font-weight: 600; color: #e2e8f0; }
  .admin-ss-badge { padding: 1px 7px; border-radius: 999px; background: rgba(124,58,237,0.22); color: #a78bfa; font-size: 0.68rem; font-weight: 700; }
  .admin-ss-key { padding: 1px 6px; border-radius: 5px; background: rgba(148,163,184,0.12); color: #94a3b8; font-size: 0.7rem; }
  .admin-ss-help { flex: 1 1 100%; color: #64748b; font-size: 0.76rem; line-height: 1.45; }
  .admin-ss-control { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .admin-ss-input { width: 108px; padding: 6px 8px; border-radius: 7px; border: 1px solid #334155; background: #0f172a; color: #e2e8f0; font-size: 0.82rem; font-weight: 600; }
  .admin-ss-input:focus { outline: none; border-color: #7c3aed; }
  .admin-ss-unit { color: #94a3b8; font-size: 0.75rem; min-width: 34px; }
  .admin-ss-default { color: #64748b; font-size: 0.72rem; }
  .admin-ss-empty { padding: 14px 10px; color: #94a3b8; font-size: 0.85rem; text-align: center; }
  .admin-ss-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 12px; border-top: 1px solid #1f2937; }

  /* Admin — Admin management (delegated admins + per-email AI limits) */
  .admin-acc-list { margin: 4px 0 12px; }
  .admin-acc-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 9px 10px; border-radius: 8px; }
  .admin-acc-row + .admin-acc-row { border-top: 1px solid rgba(148,163,184,0.10); }
  .admin-acc-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; flex: 1 1 320px; min-width: 0; }
  .admin-acc-name { font-size: 0.86rem; font-weight: 600; color: #e2e8f0; overflow-wrap: anywhere; }
  .admin-acc-actions { display: flex; align-items: center; gap: 8px; }
  .admin-acc-email { width: 240px; font-weight: 500; }
  .admin-acc-num { width: 92px; }

  /* Admin — AI settings & prompts */
  .admin-ai-state { margin: 0 0 12px; padding: 8px 10px; border-radius: 8px; font-size: 0.78rem; font-weight: 600; }
  .admin-ai-state.ok { background: rgba(34,197,94,0.10); border: 1px solid rgba(34,197,94,0.28); color: #4ade80; }
  .admin-ai-state.warn { background: rgba(251,191,36,0.10); border: 1px solid rgba(251,191,36,0.28); color: #fbbf24; }
  .admin-ai-subhead { margin: 22px 0 6px; padding-top: 14px; border-top: 1px solid #1f2937; font-size: 0.9rem; font-weight: 700; color: #e2e8f0; }
  .admin-ai-promptnote { margin-bottom: 14px; }
  /* A prompt needs the full row width, so its label stacks above the editor
     instead of sitting beside a 108px number box. */
  .admin-ai-row-wide { flex-direction: column; align-items: stretch; }
  .admin-ai-control-wide { flex-direction: column; align-items: stretch; width: 100%; }
  .admin-ai-input { width: 100%; font-family: inherit; font-weight: 500; }
  .admin-ai-textarea { width: 100%; box-sizing: border-box; padding: 9px 10px; border-radius: 7px; border: 1px solid #334155; background: #0f172a; color: #e2e8f0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.78rem; line-height: 1.5; resize: vertical; }
  .admin-ai-textarea:focus { outline: none; border-color: #7c3aed; }
  .admin-ai-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .admin-ai-hint { padding: 1px 6px; border-radius: 5px; background: rgba(148,163,184,0.12); color: #94a3b8; font-size: 0.7rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.04em; }

  /* Admin — light theme */
  html[data-theme="light"] .admin-title { color: #1f2937; }
  html[data-theme="light"] .admin-sub { color: #64748b; }
  html[data-theme="light"] .admin-sections-label { color: #94a3b8; }
  html[data-theme="light"] .admin-section-chip { background: #ffffff; border-color: #cbd5e1; color: #64748b; }
  html[data-theme="light"] .admin-section-chip:hover { color: #334155; border-color: #94a3b8; }
  html[data-theme="light"] .admin-section-chip.active { background: #ede9fe; border-color: #ddd6fe; color: #6d28d9; }
  html[data-theme="light"] .admin-card { background: #ffffff; border-color: #e2e8f0; }
  html[data-theme="light"] .admin-sched-block { border-top-color: #e2e8f0; }
  html[data-theme="light"] .admin-card-title { color: #1f2937; }
  html[data-theme="light"] .admin-card-desc { color: #64748b; }
  html[data-theme="light"] .admin-rel-subhead { color: #1f2937; }
  html[data-theme="light"] .admin-rel-good { color: #166534; background: rgba(21,128,61,0.10); }
  html[data-theme="light"] .admin-rel-warn { color: #92400e; background: rgba(180,83,9,0.10); }
  html[data-theme="light"] .admin-rel-bad { color: #b91c1c; background: rgba(185,28,28,0.10); }
  /* ⚠️ `html[data-theme="light"] .admin-num` is (0,2,1) too and sits LATER in
     the file, so it would win and paint the Failures column slate — the one
     column whose whole job is to read as a failure. The `td` lifts this to
     (0,2,2) and settles it regardless of order. */
  html[data-theme="light"] td.admin-rel-bad { background: none; color: #b91c1c; }
  html[data-theme="light"] .admin-rel-note { color: #92400e; border-color: rgba(180,83,9,0.35); }
  html[data-theme="light"] .admin-rel-drill > td { background: #f8fafc; }
  html[data-theme="light"] .admin-rel-msg, html[data-theme="light"] .admin-rel-taskerr { color: #475569; }
  html[data-theme="light"] .admin-rel-taskerr b { color: #334155; }
  html[data-theme="light"] .admin-refresh-status { background: #ffffff; color: #7c3aed; border-color: #cbd5e1; }
  html[data-theme="light"] .admin-refresh-status:hover { background: #f1f5f9; }
  html[data-theme="light"] .admin-hint { color: #94a3b8; }
  html[data-theme="light"] .admin-hint b { color: #475569; }
  html[data-theme="light"] .admin-job-bar { background: rgba(124,58,237,0.06); border-color: rgba(124,58,237,0.22); }
  html[data-theme="light"] .admin-job-text { color: #6d28d9; }
  html[data-theme="light"] .admin-job-text b { color: #1f2937; }
  html[data-theme="light"] .admin-job-count { color: #1f2937; }
  html[data-theme="light"] .admin-job-step { background: rgba(124,58,237,0.12); color: #6d28d9; }
  html[data-theme="light"] .admin-job-meta { color: #94a3b8; }
  html[data-theme="light"] .admin-uni-warming { color: #7c3aed; }
  html[data-theme="light"] .admin-job-track { background: #e2e8f0; }
  html[data-theme="light"] .admin-stk-errors { background: rgba(220,38,38,0.05); border-color: rgba(220,38,38,0.22); }
  html[data-theme="light"] .admin-stk-err-head { color: #b91c1c; }
  html[data-theme="light"] .admin-stk-err-head b { background: rgba(220,38,38,0.12); }
  html[data-theme="light"] .admin-stk-err-stuck { color: #dc2626; }
  html[data-theme="light"] .admin-di-tablewrap { border-color: #e2e8f0; }
  html[data-theme="light"] .admin-di-th { background: #fff; border-bottom-color: #e2e8f0; }
  html[data-theme="light"] .admin-di-table td { border-bottom-color: #eef2f7; }
  html[data-theme="light"] .admin-di-table tr:hover td { background: rgba(124,58,237,0.04); }
  html[data-theme="light"] .admin-di-th:hover, html[data-theme="light"] .admin-di-th.active { color: #7c3aed; }
  html[data-theme="light"] .admin-di-chip.active { background: rgba(124,58,237,0.1); border-color: rgba(124,58,237,0.4); color: #7c3aed; }
  html[data-theme="light"] .admin-di-kind-current { background: rgba(124,58,237,0.1); color: #7c3aed; }
  html[data-theme="light"] .admin-di-kind-guidance { background: rgba(2,132,199,0.1); color: #0284c7; }
  html[data-theme="light"] .admin-di-bar { background: #e2e8f0; }
  html[data-theme="light"] .admin-di-pct.di-good { color: #16a34a; }
  html[data-theme="light"] .admin-di-pct.di-warn { color: #b45309; }
  html[data-theme="light"] .admin-di-pct.di-bad { color: #c2410c; }
  html[data-theme="light"] .admin-di-pct.di-zero { color: #dc2626; }
  html[data-theme="light"] .admin-uni-table thead th { color: #94a3b8; border-bottom-color: #e2e8f0; }
  html[data-theme="light"] .admin-sec-items .admin-uni-table thead th { background: #ffffff; }
  html[data-theme="light"] .admin-sec-runs .admin-uni-table thead th { background: #ffffff; }
  html[data-theme="light"] .admin-sec-runs-empty { border-color: #e2e8f0; }
  html[data-theme="light"] .admin-sec-run-na { color: #94a3b8; }
  html[data-theme="light"] .admin-sec-mkt-row th { color: #1f2937; border-bottom-color: #e2e8f0; }
  html[data-theme="light"] .admin-sec-group { border-color: #e2e8f0; background: #f8fafc; }
  html[data-theme="light"] .admin-sec-group-title { color: #1f2937; }
  html[data-theme="light"] .admin-sec-group-title .admin-sec-group-src { color: #64748b; }
  html[data-theme="light"] .admin-ds-grouphead,
  html[data-theme="light"] .admin-ds-key,
  html[data-theme="light"] .admin-ds-note { color: #94a3b8; }
  html[data-theme="light"] .admin-ds-empty { color: #64748b; border-color: #e2e8f0; }
  html[data-theme="light"] .admin-ds-ok { background: rgba(22,163,74,0.12); color: #15803d; }
  html[data-theme="light"] .admin-ds-keyless { background: rgba(100,116,139,0.12); color: #475569; }
  html[data-theme="light"] .admin-ds-missing { background: rgba(217,119,6,0.12); color: #b45309; }
  html[data-theme="light"] .admin-ds-link { color: #4f46e5; }

  html[data-theme="light"] .admin-api-search { color: #1e293b; background: #fff; border-color: #e2e8f0; }
  html[data-theme="light"] .admin-api-expand { color: #475569; background: #f1f5f9; border-color: #e2e8f0; }
  html[data-theme="light"] .admin-api-expand:hover { color: #1e293b; background: #e2e8f0; }
  html[data-theme="light"] .admin-api-gcount { color: #64748b; background: #f1f5f9; }
  html[data-theme="light"] .admin-api-row { border-color: #e2e8f0; }
  html[data-theme="light"] .admin-api-row-open { border-color: #cbd5e1; }
  html[data-theme="light"] .admin-api-head { color: #1e293b; background: #f8fafc; }
  html[data-theme="light"] .admin-api-head:hover { background: #f1f5f9; }
  html[data-theme="light"] .admin-api-get { background: rgba(2,132,199,0.12); color: #0369a1; }
  html[data-theme="light"] .admin-api-post { background: rgba(22,163,74,0.12); color: #15803d; }
  html[data-theme="light"] .admin-api-delete { background: rgba(220,38,38,0.12); color: #b91c1c; }
  html[data-theme="light"] .admin-api-auth-admin { background: rgba(217,119,6,0.12); color: #b45309; }
  html[data-theme="light"] .admin-api-auth-user { background: rgba(100,116,139,0.12); color: #475569; }
  html[data-theme="light"] .admin-api-auth-public { background: rgba(22,163,74,0.12); color: #15803d; }
  html[data-theme="light"] .admin-api-undoc { background: rgba(220,38,38,0.12); color: #b91c1c; }
  html[data-theme="light"] .admin-api-teaser { color: #94a3b8; }
  html[data-theme="light"] .admin-api-detail { border-top-color: #e2e8f0; }
  html[data-theme="light"] .admin-api-purpose { color: #334155; }
  html[data-theme="light"] .admin-api-notes { color: #b45309; background: rgba(217,119,6,0.07); border-left-color: rgba(217,119,6,0.45); }
  html[data-theme="light"] .admin-api-pre { color: #1e293b; background: #f8fafc; border-color: #e2e8f0; }
  html[data-theme="light"] .admin-api-curl .admin-api-pre { color: #4338ca; }
  html[data-theme="light"] .admin-api-note { color: #64748b; }
  html[data-theme="light"] .admin-api-params td { color: #475569; border-bottom-color: #eef1f6; }
  html[data-theme="light"] .admin-api-param { color: #1e293b; }
  html[data-theme="light"] .admin-uni-row td { border-bottom-color: #eef1f6; }
  html[data-theme="light"] .admin-uni-row:hover td { background: #f7f5ff; }
  html[data-theme="light"] .admin-row-active td { background: #f2edff !important; }
  html[data-theme="light"] .admin-uni-market { color: #1f2937; }
  html[data-theme="light"] .admin-btn-market { background: #ffffff; color: #0369a1; border-color: #bae6fd; }
  html[data-theme="light"] .admin-btn-market:hover:not(:disabled) { background: #f0f9ff; }
  html[data-theme="light"] .admin-market-full { color: #16a34a; }
  html[data-theme="light"] .admin-uni-name { color: #334155; }
  html[data-theme="light"] .admin-loaded-badge { background: #eef1f6; color: #475569; }
  html[data-theme="light"] .admin-loaded-badge.full { background: rgba(34,197,94,0.14); color: #16a34a; }
  html[data-theme="light"] .admin-uni-updated { color: #64748b; }
  html[data-theme="light"] .admin-ec-cal { color: #94a3b8; }
  html[data-theme="light"] .admin-ec-cal b { color: #475569; }
  html[data-theme="light"] .admin-ec-cal b.admin-ec-due { color: #b45309; }
  html[data-theme="light"] .admin-btn-warm { background: #ffffff; color: #7c3aed; border-color: #cbd5e1; }
  html[data-theme="light"] .admin-btn-warm:hover:not(:disabled) { background: #f1f5f9; }
  html[data-theme="light"] .admin-btn-refresh { background: #7c3aed; color: #ffffff; border-color: #7c3aed; }
  html[data-theme="light"] .admin-btn-refresh:hover:not(:disabled) { background: #6d28d9; }
  html[data-theme="light"] .admin-sched-field { color: #64748b; }
  html[data-theme="light"] .admin-sched-select { background: #ffffff; color: #1f2937; border-color: #cbd5e1; }
  html[data-theme="light"] .admin-sched-save { background: #7c3aed; color: #ffffff; border-color: #7c3aed; }
  html[data-theme="light"] .admin-sched-save:hover:not(:disabled) { background: #6d28d9; }
  html[data-theme="light"] .admin-sched-chip { background: #f1f5f9; border-color: #e2e8f0; color: #64748b; }
  html[data-theme="light"] .admin-sched-chip b { color: #334155; }
  html[data-theme="light"] .admin-ec-sync-empty { border-color: #e2e8f0; color: #64748b; }
  html[data-theme="light"] .admin-ec-sync-item { border-color: #e2e8f0; }
  html[data-theme="light"] .admin-ec-sync-row { background: #f8fafc; color: #334155; }
  html[data-theme="light"] .admin-ec-sync-row:hover { background: #f1f5f9; }
  html[data-theme="light"] .admin-ec-sync-when { color: #1f2937; }
  html[data-theme="light"] .admin-ec-sync-mkt, html[data-theme="light"] .admin-ec-sync-count { color: #64748b; }
  html[data-theme="light"] .admin-ec-sync-cal { color: #0369a1; }
  html[data-theme="light"] .admin-ec-rep-table thead th { color: #94a3b8; border-bottom-color: #e2e8f0; }
  html[data-theme="light"] .admin-ec-rep-table tbody td { color: #334155; border-bottom-color: #eef2f7; }
  html[data-theme="light"] .admin-ec-rep-tk { color: #1f2937; }
  html[data-theme="light"] .admin-sync-job { border-color: #e2e8f0; }
  html[data-theme="light"] .admin-sync-job-name, html[data-theme="light"] .admin-sync-when { color: #1f2937; }
  html[data-theme="light"] .admin-sync-job-desc, html[data-theme="light"] .admin-sync-job-last,
  html[data-theme="light"] .admin-sync-nums, html[data-theme="light"] .admin-sync-toggle { color: #64748b; }
  html[data-theme="light"] .admin-sync-field input { border-color: #e2e8f0; background: #f8fafc; color: #1f2937; }
  html[data-theme="light"] .admin-sync-taskfail td { background: rgba(220,38,38,0.05); }
  html[data-theme="light"] .admin-sync-err, html[data-theme="light"] .admin-sync-runerr { color: #b91c1c !important; }
  html[data-theme="light"] .admin-sync-alerts { border-top-color: #e2e8f0; }
  html[data-theme="light"] .admin-alert-table td b { color: #1f2937; }
  html[data-theme="light"] .admin-alert-day, html[data-theme="light"] .admin-alert-kind { color: #1f2937 !important; }
  html[data-theme="light"] .admin-alert-sub { color: #94a3b8; }
  html[data-theme="light"] .admin-alert-none { color: #cbd5e1; }
  html[data-theme="light"] .admin-alert-na { color: #e2e8f0; }
  html[data-theme="light"] .admin-alert-total b { color: #1d4ed8; }
  html[data-theme="light"] .admin-alert-foot td { border-top-color: #e2e8f0; color: #64748b !important; }
  html[data-theme="light"] .admin-alertsum-note { background: rgba(220,38,38,0.05); border-color: rgba(220,38,38,0.20); color: #b91c1c; }
  html[data-theme="light"] .admin-alert-table td.admin-sync-taskfail { background: rgba(220,38,38,0.05); }
  html[data-theme="light"] .admin-sched-off { color: #94a3b8; }
  html[data-theme="light"] .admin-job-un { background: rgba(220,38,38,0.10); color: #b91c1c; }
  html[data-theme="light"] .admin-warm-report { background: rgba(220,38,38,0.05); border-color: rgba(220,38,38,0.20); }
  html[data-theme="light"] .admin-warm-report-head { color: #b91c1c; }
  html[data-theme="light"] .admin-warm-report-uni-h { color: #1f2937; }
  html[data-theme="light"] .admin-warm-report-tks { color: #64748b; }
  html[data-theme="light"] .admin-window { background: #ffffff; border-color: #cbd5e1; }
  html[data-theme="light"] .admin-window-btn { color: #64748b; }
  html[data-theme="light"] .admin-window-btn.active { background: #ede9fe; color: #6d28d9; }
  html[data-theme="light"] .admin-stat-card { background: #ffffff; border-color: #e2e8f0; }
  html[data-theme="light"] .admin-stat-val { color: #1f2937; }
  html[data-theme="light"] .admin-stat-lbl { color: #64748b; }
  html[data-theme="light"] .admin-num { color: #334155; }
  html[data-theme="light"] .admin-user-email { color: #334155; }
  html[data-theme="light"] .admin-action-chip { background: #f1f5f9; color: #475569; }
  html[data-theme="light"] .admin-action-chip b { color: #7c3aed; }
  html[data-theme="light"] .admin-muted { color: #94a3b8; }
  html[data-theme="light"] .admin-users-empty { color: #94a3b8; }
  html[data-theme="light"] .admin-ss-note { background: #fffbeb; border-color: #fde68a; color: #b45309; }
  html[data-theme="light"] .admin-ss-group { border-top-color: #e2e8f0; }
  html[data-theme="light"] .admin-ss-group-title { color: #64748b; }
  html[data-theme="light"] .admin-ss-row + .admin-ss-row { border-top-color: #eef1f6; }
  html[data-theme="light"] .admin-ss-row-set { background: #f5f2ff; }
  html[data-theme="light"] .admin-ss-name { color: #1f2937; }
  html[data-theme="light"] .admin-ss-badge { background: #ede9fe; color: #6d28d9; }
  html[data-theme="light"] .admin-ss-key { background: #f1f5f9; color: #64748b; }
  html[data-theme="light"] .admin-ss-help { color: #64748b; }
  html[data-theme="light"] .admin-ss-input { background: #ffffff; border-color: #cbd5e1; color: #1f2937; }
  html[data-theme="light"] .admin-ss-unit { color: #64748b; }
  html[data-theme="light"] .admin-ss-default { color: #94a3b8; }
  html[data-theme="light"] .admin-ss-empty { color: #94a3b8; }
  html[data-theme="light"] .admin-ss-footer { border-top-color: #e2e8f0; }
  html[data-theme="light"] .admin-acc-row + .admin-acc-row { border-top-color: #eef1f6; }
  html[data-theme="light"] .admin-acc-name { color: #1f2937; }
  html[data-theme="light"] .admin-ai-state.ok { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
  html[data-theme="light"] .admin-ai-state.warn { background: #fffbeb; border-color: #fde68a; color: #b45309; }
  html[data-theme="light"] .admin-ai-subhead { border-top-color: #e2e8f0; color: #1f2937; }
  html[data-theme="light"] .admin-ai-textarea { background: #ffffff; border-color: #cbd5e1; color: #1f2937; }
  html[data-theme="light"] .admin-ai-hint { background: #f1f5f9; color: #64748b; }

  @media (max-width: 720px) {
    .admin-ss-row { flex-direction: column; align-items: stretch; }
    .admin-ss-label { min-width: 0; }
    .admin-ss-control { justify-content: flex-start; }
    .admin-ss-input { flex: 1 1 90px; width: auto; }
    .admin-ai-input, .admin-ai-textarea { flex: 1 1 100%; width: 100%; }
    .admin-ai-actions { width: 100%; }
    .admin-ss-footer { flex-direction: column; align-items: stretch; gap: 8px; }
    .admin-acc-row { flex-direction: column; align-items: stretch; }
    .admin-acc-email, .admin-acc-num { flex: 1 1 120px; width: auto; }
  }

  @media (max-width: 768px) {
    #admin-view { padding: 16px 12px !important; }
    .admin-uni-table { font-size: 0.8rem; }
    .admin-btn { display: block; width: 100%; margin: 4px 0 0; }
    .admin-uni-actions { min-width: 96px; }
    .admin-stat-cards { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    /* The id override above is (1,0,0) and would otherwise beat the rule on the
       line before, leaving these two rows the only 1-up card grids on the page. */
    #admin-rel-api-cards, #admin-rel-job-cards { grid-template-columns: repeat(2, 1fr); }
    .admin-stat-val { font-size: 1.25rem; }
    .admin-analytics-controls { width: 100%; }
    .admin-window { flex: 1; }
    .admin-window-btn { flex: 1; padding: 6px 4px; }
    /* The endpoint header is method + path + auth + caret on one line, which
       does not survive a phone. Wrap it and let the path own the full width. */
    .admin-api-head { flex-wrap: wrap; gap: 6px 8px; }
    .admin-api-path { flex: 1 0 100%; order: 3; font-size: 0.74rem; }
    .admin-api-caret { margin-left: auto; }
    .admin-api-teaser { padding-left: 12px; white-space: normal; }
    .admin-api-expand { flex: 1; }
    .admin-api-pre { font-size: 0.68rem; }
  }

  /* ── Portfolio ▸ Mutual Funds ──────────────────────────────────────── */
  .pf-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 14px 0 6px; }
  .pf-card { padding: 12px 14px; border-radius: 10px; background: #14162a; border: 1px solid #2d3148; }
  .pf-card-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; font-weight: 600; }
  .pf-card-value { font-size: 1.3rem; font-weight: 700; color: #e2e8f0; margin-top: 4px; }
  .pf-card-sub { font-size: 0.78rem; font-weight: 600; margin-top: 2px; color: #94a3b8; }
  .pf-pos { color: #34d399; }
  .pf-neg { color: #f87171; }

  .pf-add-manual { border-style: solid; }
  /* Toolbar above the holdings table: metric-column picker + sort hint */
  .pf-mf-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 6px; }
  .pf-mf-tools .btn-columns { padding: 5px 10px; font-size: 0.76rem; }
  .pf-mf-tools .screener-meta { margin-right: auto; }
  .firstcol-btn.active { border-color: #4f46e5; color: #a78bfa; background: #1a1d2e; }
  html[data-theme="light"] .firstcol-btn.active { border-color: #4f46e5; color: #4f46e5; background: #eef2ff; }
  /* ── Table density ───────────────────────────────────────────────────
     The three wide tables (Screener, Fund Screener, Mutual Funds) always run
     compact: the trimmed row box fits ~40% more rows above the fold, which is
     what these tables are for. `density-compact` is set on <body> in the
     template, so this applies on the first paint and without JavaScript.
     Numeric columns use tabular figures so digits line up. */
  .screener-table td, .pf-mf-table td { font-variant-numeric: tabular-nums; }
  body.density-compact .screener-table thead th,
  body.density-compact .pf-mf-table thead th { padding: 5px 9px; font-size: 0.72rem; }
  body.density-compact .screener-table tbody td { padding: 4px 9px; font-size: 0.78rem; }
  body.density-compact .pf-mf-table tbody td { padding: 4px 8px; font-size: 0.78rem; }
  body.density-compact .mf-fund-name, body.density-compact .pf-fund-name { font-size: 0.8rem; }
  body.density-compact .mf-fund-amc, body.density-compact .pf-fund-sub { font-size: 0.68rem; margin-top: 0; }
  body.density-compact .pf-tag { margin-top: 2px; }
  body.density-compact .pf-remove { width: 20px; height: 20px; font-size: 0.95rem; }
  .pf-metric-count { background: #312e81; border-radius: 4px; padding: 1px 5px; font-size: 0.75rem; color: #a78bfa; }
  /* A column the active screener filters on is always shown, so its chip reads
     as a pinned "on" state (full-strength, with a lock badge) rather than a
     greyed-out / disabled look. */
  .col-chip-locked { opacity: 1; cursor: default; }
  .col-chip-locked::after { content: '\1F512'; font-size: 0.62rem; margin-left: 5px; opacity: 0.75; }
  .col-chip-locked:hover { border-color: #4f46e5; color: #a78bfa; }
  .mf-table thead th, .screener-table thead th { user-select: none; }
  .mf-table thead th:hover, .mf-table thead th.sorted,
  .screener-table thead th:hover, .screener-table thead th.sorted { color: #a78bfa; }
  /* The holdings table follows the watchlist table styling (sticky header,
     zebra rows, sort icons) — those rules are global, so it only needs its own
     column widths and the right-aligned money columns. */
  .pf-mf-table { width: 100%; min-width: 760px; }
  .pf-mf-table th.pf-num, .pf-mf-table td.pf-num { text-align: right; white-space: nowrap; }
  .pf-mf-table th.pf-act, .pf-mf-table td.pf-act { width: 34px; text-align: center; }
  .pf-fund { max-width: 340px; }
  .pf-mf-table td.pf-fund { white-space: normal; }
  .pf-fund-name { display: block; color: #e2e8f0; font-weight: 600; }
  .pf-fund-sub { display: block; font-size: 0.74rem; color: #64748b; margin-top: 2px; }
  .pf-fund-link { cursor: pointer; }
  .pf-fund-link:hover .pf-fund-name { color: #a78bfa; }
  .pf-fund-chev { color: #a78bfa; transition: transform 0.15s; display: inline-block; }
  .pf-fund-link:hover .pf-fund-chev { transform: translateX(3px); }
  /* ── Compact first column ────────────────────────────────────────────
     The fund/ticker column is by far the widest on these tables, so
     clamping it to a few characters is what buys room for extra metric
     columns. `table-layout: auto` treats max-width as a hint, so the width
     is stated too, and the inner spans are clamped as well. */
  body.firstcol-compact .mf-table thead th:first-child,
  body.firstcol-compact .mf-table tbody td:first-child,
  body.firstcol-compact .pf-mf-table th:first-child,
  body.firstcol-compact .pf-mf-table td.pf-fund,
  body.firstcol-compact .screener-table thead th:first-child,
  body.firstcol-compact .screener-table tbody td:first-child {
    width: 96px; min-width: 96px; max-width: 96px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  body.firstcol-compact .mf-fund-name,
  body.firstcol-compact .pf-fund-name {
    display: block; max-width: 100%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    -webkit-line-clamp: none;
  }
  body.firstcol-compact .mf-fund-amc,
  body.firstcol-compact .pf-fund-sub,
  body.firstcol-compact .pf-tag { display: none; }
  /* ── Horizontal scroll cues ──────────────────────────────────────────
     An INSET shadow paints against the padding box and stays put while the
     content scrolls under it; an ::after child would scroll away with the
     content. Classes are applied by refreshScrollCues() in tables.js. */
  .scroll-cue.cue-left { box-shadow: inset 14px 0 12px -12px rgba(0,0,0,0.55); }
  .scroll-cue.cue-right { box-shadow: inset -14px 0 12px -12px rgba(0,0,0,0.55); }
  .scroll-cue.cue-left.cue-right { box-shadow: inset 14px 0 12px -12px rgba(0,0,0,0.55), inset -14px 0 12px -12px rgba(0,0,0,0.55); }
  html[data-theme="light"] .scroll-cue.cue-left { box-shadow: inset 14px 0 12px -12px rgba(15,23,42,0.22); }
  html[data-theme="light"] .scroll-cue.cue-right { box-shadow: inset -14px 0 12px -12px rgba(15,23,42,0.22); }
  html[data-theme="light"] .scroll-cue.cue-left.cue-right { box-shadow: inset 14px 0 12px -12px rgba(15,23,42,0.22), inset -14px 0 12px -12px rgba(15,23,42,0.22); }
  .pf-gain-pct { font-size: 0.78rem; opacity: 0.85; }
  .pf-tag { display: inline-block; margin-top: 4px; padding: 1px 7px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; background: rgba(148,163,184,0.14); color: #94a3b8; }
  .pf-remove { width: 24px; height: 24px; border-radius: 6px; border: none; background: none; color: #64748b; font-size: 1.1rem; line-height: 1; cursor: pointer; }
  .pf-remove:hover { background: rgba(248,113,113,0.14); color: #f87171; }

  /* MF Portfolio / MF Wishlist section switch, and the hearts that feed it. */
  .pf-sec-tabs { display: inline-flex; gap: 2px; padding: 2px; margin-left: 12px; border: 1px solid #2d3148; border-radius: 999px; background: #12141f; vertical-align: middle; }
  .pf-sec-btn { border: none; background: none; color: #94a3b8; font-size: 0.74rem; font-weight: 600; padding: 4px 11px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s; }
  .pf-sec-btn:hover { color: #e2e8f0; }
  .pf-sec-btn.active { background: #6366f1; color: #fff; }
  html[data-theme="light"] .pf-sec-tabs { border-color: #e2e8f0; background: #f8fafc; }
  html[data-theme="light"] .pf-sec-btn { color: #64748b; }
  html[data-theme="light"] .pf-sec-btn:hover { color: #1e293b; }
  html[data-theme="light"] .pf-sec-btn.active { background: #4f46e5; color: #fff; }

  /* A cross-page jump, not a section switch — so it reads as a link beside the
     switch rather than a third segment inside it. */
  .pf-sec-link { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; padding: 4px 10px; border: 1px solid #2d3148; border-radius: 999px; background: none; color: #94a3b8; font-size: 0.74rem; font-weight: 600; white-space: nowrap; cursor: pointer; vertical-align: middle; transition: border-color 0.15s, color 0.15s; }
  .pf-sec-link:hover { border-color: #6366f1; color: #a5b4fc; }
  html[data-theme="light"] .pf-sec-link { border-color: #e2e8f0; color: #64748b; }
  html[data-theme="light"] .pf-sec-link:hover { border-color: #4f46e5; color: #4f46e5; }

  .mf-fund-line { display: flex; align-items: center; gap: 6px; }
  .mf-fund-line .mf-fund-name { flex: 1 1 auto; min-width: 0; }
  .mf-heart, .pf-heart { flex: 0 0 auto; width: 26px; height: 26px; border: none; border-radius: 6px; background: none; color: #64748b; font-size: 1rem; line-height: 1; cursor: pointer; transition: color 0.15s, background 0.15s; }
  .mf-heart:hover, .pf-heart:hover { background: rgba(244,114,182,0.14); color: #f472b6; }
  .mf-heart.on, .pf-heart.on { color: #f472b6; }
  .mf-heart:disabled { opacity: 0.5; cursor: default; }
  html[data-theme="light"] .mf-heart, html[data-theme="light"] .pf-heart { color: #94a3b8; }
  html[data-theme="light"] .mf-heart.on, html[data-theme="light"] .pf-heart.on { color: #db2777; }

  .pf-empty { text-align: center; padding: 48px 20px; }
  .pf-empty-icon { font-size: 2.4rem; }
  .pf-empty-title { font-size: 1.05rem; font-weight: 700; color: #e2e8f0; margin-top: 8px; }
  .pf-empty-sub { font-size: 0.85rem; color: #94a3b8; margin: 6px auto 0; max-width: 420px; line-height: 1.5; }
  .pf-empty-actions { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
  .pf-notice-success { color: #34d399 !important; background: rgba(52,211,153,0.10) !important; border-color: rgba(52,211,153,0.28) !important; }
  .pf-notice-error { color: #f87171 !important; background: rgba(248,113,113,0.10) !important; border-color: rgba(248,113,113,0.28) !important; }

  /* Modals */
  .pf-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
  .pf-modal-backdrop { position: absolute; inset: 0; background: rgba(2,6,23,0.66); backdrop-filter: blur(2px); }
  .pf-modal-card { position: relative; z-index: 1; width: 100%; max-width: 460px; background: #14162a; border: 1px solid #2d3148; border-radius: 14px; padding: 22px 22px 20px; box-shadow: 0 24px 60px rgba(0,0,0,0.5); max-height: 90vh; overflow-y: auto; }
  .pf-modal-x { position: absolute; top: 12px; right: 14px; width: 24px; height: 24px; padding: 0; display: flex; align-items: center; justify-content: center; border: none; background: none; color: #64748b; font-size: 1.5rem; line-height: 1; cursor: pointer; }
  .pf-modal-x:hover { color: #e2e8f0; }
  .pf-modal-title { font-size: 1.15rem; font-weight: 700; color: #e2e8f0; margin: 0 0 8px; }
  .pf-modal-desc { font-size: 0.82rem; color: #94a3b8; line-height: 1.55; margin: 0 0 16px; }
  .pf-modal-desc a { color: #a78bfa; }
  .pf-steps { font-size: 0.82rem; color: #94a3b8; line-height: 1.5; margin: 0 0 16px; padding-left: 20px; }
  .pf-steps li { margin-bottom: 7px; }
  .pf-steps b { color: #cbd5e1; }
  /* Reference screenshot of the CAMS request form, shown under the steps above.
     The source image is very wide (1613x466), so the import modal is widened
     specifically for it — at the default 460px card the labels are unreadable. */
  #pf-import-modal .pf-modal-card { max-width: 760px; }
  .pf-steps-fig { margin: 0 0 16px; }
  .pf-steps-fig a { display: block; border: 1px solid #2d3148; border-radius: 10px; overflow: hidden; background: #0f1120; }
  .pf-steps-fig img { display: block; width: 100%; height: auto; }
  .pf-steps-fig figcaption { font-size: 0.74rem; color: #7c869b; line-height: 1.45; margin-top: 6px; }
  .pf-field { display: block; margin-bottom: 14px; }
  .pf-field-row { display: flex; gap: 12px; }
  .pf-field-row .pf-field { flex: 1; }
  .pf-field-label { display: block; font-size: 0.76rem; font-weight: 600; color: #cbd5e1; margin-bottom: 5px; }
  .pf-field-opt { color: #64748b; font-weight: 400; }
  .pf-field input[type="text"], .pf-field input[type="password"], .pf-field input[type="number"], .pf-field input[type="file"] { width: 100%; padding: 9px 11px; border-radius: 8px; border: 1px solid #2d3148; background: #0e1020; color: #e2e8f0; font-size: 0.88rem; }
  .pf-field input:focus { outline: none; border-color: #a78bfa; }
  .pf-typeahead { position: relative; }
  .pf-typeahead-list { position: absolute; top: 100%; left: 0; right: 0; z-index: 5; margin-top: 4px; max-height: 240px; overflow-y: auto; background: #0e1020; border: 1px solid #2d3148; border-radius: 8px; box-shadow: 0 12px 30px rgba(0,0,0,0.45); }
  .pf-typeahead-item { padding: 8px 11px; cursor: pointer; border-bottom: 1px solid rgba(45,49,72,0.6); }
  .pf-typeahead-item:last-child { border-bottom: none; }
  .pf-typeahead-item:hover, .pf-typeahead-item.active { background: #1e2035; }
  .pf-ta-name { display: block; font-size: 0.82rem; color: #e2e8f0; }
  .pf-ta-amc { display: block; font-size: 0.72rem; color: #64748b; margin-top: 1px; }
  .pf-typeahead-empty { padding: 10px 11px; font-size: 0.8rem; color: #64748b; }
  .pf-form-err { font-size: 0.8rem; color: #f87171; margin: -4px 0 12px; }
  .pf-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
  .pf-btn-ghost { padding: 9px 16px; border-radius: 8px; border: 1px solid #2d3148; background: none; color: #94a3b8; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
  .pf-btn-ghost:hover { background: #1e2035; color: #e2e8f0; }
  .pf-btn-primary { padding: 9px 18px; border-radius: 8px; border: none; background: #7c3aed; color: #fff; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
  .pf-btn-primary:hover:not(:disabled) { background: #6d28d9; }
  .pf-btn-primary:disabled { opacity: 0.6; cursor: default; }

  /* Light theme */
  html[data-theme="light"] .pf-card { background: #ffffff; border-color: #e2e8f0; }
  html[data-theme="light"] .pf-metric-count { background: #e0e7ff; color: #4338ca; }

  html[data-theme="light"] .col-chip-locked:hover { border-color: #4f46e5; color: #4338ca; }
  html[data-theme="light"] .mf-table thead th:hover,
  html[data-theme="light"] .mf-table thead th.sorted { color: #4f46e5; }
  html[data-theme="light"] .pf-card-value { color: #1f2937; }
  html[data-theme="light"] .pf-card-label, html[data-theme="light"] .pf-card-sub { color: #64748b; }
  html[data-theme="light"] .pf-pos { color: #059669; }
  html[data-theme="light"] .pf-neg { color: #dc2626; }
  html[data-theme="light"] .pf-fund-name { color: #1f2937; }
  html[data-theme="light"] .pf-fund-link:hover .pf-fund-name { color: #7c3aed; }
  html[data-theme="light"] .pf-fund-chev, html[data-theme="light"] .pf-modal-desc a, html[data-theme="light"] .pf-fund-link:hover .pf-fund-chev { color: #7c3aed; }
  html[data-theme="light"] .pf-empty-title { color: #1f2937; }
  html[data-theme="light"] .pf-tag { background: #f1f5f9; color: #64748b; }
  html[data-theme="light"] .pf-modal-card { background: #ffffff; border-color: #e2e8f0; }
  html[data-theme="light"] .pf-modal-title { color: #1f2937; }
  html[data-theme="light"] .pf-steps { color: #475569; }
  html[data-theme="light"] .pf-steps b { color: #1f2937; }
  html[data-theme="light"] .pf-steps-fig a { border-color: #e2e8f0; background: #f8fafc; }
  html[data-theme="light"] .pf-steps-fig figcaption { color: #64748b; }
  html[data-theme="light"] .pf-modal-x:hover { color: #1f2937; }
  html[data-theme="light"] .pf-field-label { color: #334155; }
  html[data-theme="light"] .pf-field input { background: #f8fafc; border-color: #cbd5e1; color: #1f2937; }
  html[data-theme="light"] .pf-field input:focus { border-color: #7c3aed; }
  html[data-theme="light"] .pf-typeahead-list { background: #ffffff; border-color: #e2e8f0; }
  html[data-theme="light"] .pf-typeahead-item:hover, html[data-theme="light"] .pf-typeahead-item.active { background: #f1f5f9; }
  html[data-theme="light"] .pf-ta-name { color: #1f2937; }
  html[data-theme="light"] .pf-btn-ghost { border-color: #cbd5e1; color: #64748b; }
  html[data-theme="light"] .pf-btn-ghost:hover { background: #f1f5f9; color: #1f2937; }
  html[data-theme="light"] .pf-btn-primary { background: #7c3aed; }
  html[data-theme="light"] .pf-btn-primary:hover:not(:disabled) { background: #6d28d9; }

  @media (max-width: 768px) {
    /* Mobile navigation: the app nav lives behind the top-LEFT hamburger
       (#app-nav) while the profile chip at the top right keeps account options
       only. These must sit in a LATE media block — the base definitions are at
       equal specificity, so source order decides. */
    .user-menu-nav { display: block; }
    .user-menu { min-width: 240px; max-height: calc(100vh - 70px); overflow-y: auto; }
    .app-nav-menu { min-width: 220px; }
    .mnav-item { min-height: 44px; }

    .pf-summary { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .pf-card-value { font-size: 1.1rem; }
    .pf-fund { max-width: 180px; }
    .pf-field-row { flex-direction: column; gap: 0; }
    .pf-modal-card { max-width: 100%; }
    /* ⚠️ ID specificity — the desktop `#pf-import-modal .pf-modal-card` widening
       beats a bare `.pf-modal-card` rule, so it has to be restated here. */
    #pf-import-modal .pf-modal-card { max-width: 100%; }
    /* ⚠️ These rules must live *after* the desktop `.pf-mf-tools` / density /
       `.pf-mf-table` definitions above — same specificity, so source order is
       what decides. Putting them in the earlier screener media block silently
       lost. */
    .pf-mf-tools { width: 100%; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 6px; margin: 4px 0; padding-bottom: 2px; }
    .pf-mf-tools::-webkit-scrollbar { display: none; }
    .pf-mf-tools > * { flex: 0 0 auto; }
    .pf-mf-tools .btn-columns, .pf-mf-tools .section-collapse-btn { padding: 5px 8px; font-size: 0.72rem; }
    /* ...but the filters toggle keeps its size on a phone. The row scrolls
       horizontally there, so a control that shrank to match its neighbours
       would be the easiest of all of them to scroll past. */
    .pf-mf-tools .section-collapse-btn.filters-toggle { padding: 6px 12px; font-size: 0.75rem; }
    .pf-mf-tools .screener-meta { font-size: 0.68rem; margin-right: 0; }
    /* The wide tables carry class-level padding, which beats the generic
       mobile `tbody td` rule — restate it or a phone shows two columns of a
       twelve-column table. */
    .screener-table thead th, .pf-mf-table thead th, .charting-table thead th { padding: 7px 8px; font-size: 0.68rem; }
    .screener-table tbody td, .pf-mf-table tbody td, .charting-table tbody td { padding: 7px 8px; font-size: 0.74rem; }
    body.density-compact .screener-table thead th,
    body.density-compact .pf-mf-table thead th { padding: 4px 7px; font-size: 0.64rem; }
    body.density-compact .screener-table tbody td,
    body.density-compact .pf-mf-table tbody td { padding: 4px 7px; font-size: 0.7rem; }
    /* min-width: 760px forced a phone to scroll even when few columns are on;
       the fund name is clamped to two lines so a row can't become a paragraph. */
    .pf-mf-table { min-width: 0; }
    .pf-mf-table th:first-child, .pf-mf-table td.pf-fund { width: 40vw; min-width: 120px; max-width: 46vw; }
    .mf-table thead th:first-child, .mf-table tbody td:first-child { width: 40vw; min-width: 120px; max-width: 46vw; }
    /* max-width on a `table-layout: auto` cell is only a hint, so the clamp has
       to live on the block-level spans inside it to actually hold. */
    .mf-fund-name, .mf-fund-amc, .pf-fund-name, .pf-fund-sub { max-width: 44vw; }
    .mf-fund-name { font-size: 0.8rem; }
    .mf-fund-name, .pf-fund-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    /* Compact wins over the mobile clamps above — it has to come after them,
       since a media query adds no specificity of its own. */
    body.firstcol-compact .mf-table thead th:first-child,
    body.firstcol-compact .mf-table tbody td:first-child,
    body.firstcol-compact .pf-mf-table th:first-child,
    body.firstcol-compact .pf-mf-table td.pf-fund,
    body.firstcol-compact .screener-table thead th:first-child,
    body.firstcol-compact .screener-table tbody td:first-child {
      width: 84px; min-width: 84px; max-width: 84px;
    }
    body.firstcol-compact .mf-fund-name,
    body.firstcol-compact .pf-fund-name {
      display: block; max-width: 100%; -webkit-line-clamp: none;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    /* .mf-fund-name is max-width-clamped above; inside the flex line that would
       leave the heart floating in dead space, so let the name take the slack. */
    .mf-fund-line .mf-fund-name { max-width: none; }
    .mf-heart, .pf-heart { width: 32px; height: 32px; font-size: 1.05rem; }
  }

  /* ── Visual — multi-company fundamental charting ─────────────────── */
  .vis-basis { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid #2d3148; border-radius: 8px; background: #14162a; }
  .vis-basis-btn { border: none; background: none; border-radius: 6px; padding: 5px 11px; color: #94a3b8; font-size: 0.75rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
  .vis-basis-btn:hover { color: #a78bfa; }
  .vis-basis-btn.active { background: #4f46e5; color: #fff; }
  /* The company row stays one line and scrolls, like every other control band
     above a wide table — wrapping it stacks chrome on the screen with the
     least room to spare. */
  .vis-tickers { display: flex; align-items: center; gap: 10px; padding: 0 20px 8px; flex-wrap: wrap; }
  .vis-chips { display: flex; align-items: center; gap: 6px; flex: 1 1 0%; min-width: 0; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .vis-chips::-webkit-scrollbar { display: none; }
  .vis-chip { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 4px 6px 4px 9px; border: 1px solid #2d3148; border-radius: 999px; background: #1a1c2e; color: #e2e8f0; font-size: 0.78rem; font-weight: 600; }
  .vis-chip-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
  .vis-chip-x { border: none; background: none; color: #64748b; font-size: 1rem; line-height: 1; cursor: pointer; padding: 0 3px; }
  .vis-chip-x:hover { color: #f87171; }
  /* Show/hide a selected company without giving up its slot (and its colour). */
  .vis-chip-eye { border: none; background: none; color: #94a3b8; font-size: 0.72rem; line-height: 1; cursor: pointer; padding: 0 3px; }
  .vis-chip-eye:hover { color: #a78bfa; }
  .vis-chip-eye.off { color: #475569; position: relative; }
  .vis-chip-eye.off::after { content: ""; position: absolute; left: 1px; right: 1px; top: 50%; height: 1px; background: currentColor; transform: rotate(-20deg); }
  .vis-chip-off { opacity: 0.55; }
  .vis-chip-off .vis-chip-sym { text-decoration: line-through; }
  .vis-search { position: relative; flex: 0 0 auto; }
  .vis-search-input { width: 190px; padding: 6px 11px; border-radius: 8px; border: 1px solid #2d3148; background: #14162a; color: #e2e8f0; font-size: 0.8rem; }
  .vis-search-input:focus { outline: none; border-color: #7c3aed; }
  .vis-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 0 20px 20px; align-items: start; }
  .vis-card { background: #1a1c2e; border: 1px solid #2d3148; border-radius: 12px; padding: 12px 14px 6px; min-width: 0; }
  .vis-card-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
  .vis-card-title { font-size: 0.88rem; font-weight: 700; color: #e2e8f0; }
  .vis-card-unit { font-size: 0.7rem; color: #64748b; flex: 1 1 auto; }
  .vis-unit-warn { color: #fbbf24; }
  .vis-card-x { border: none; background: none; color: #94a3b8; font-size: 1rem; line-height: 1; cursor: pointer; padding: 0 2px; }
  html[data-theme="light"] .vis-card-x { color: #475569; }
  .vis-card-x:hover { color: #f87171; }
  .vis-card-canvas { height: 260px; font-size: 0.78rem; color: #94a3b8; }
  .vis-empty { margin: 10px 20px 24px; padding: 22px 16px; border: 1px dashed #2d3148; border-radius: 10px; color: #94a3b8; font-size: 0.85rem; text-align: center; }

  html[data-theme="light"] .vis-basis { background: #f1f5f9; border-color: #e2e8f0; }
  html[data-theme="light"] .vis-basis-btn { color: #64748b; }
  html[data-theme="light"] .vis-basis-btn:hover { color: #7c3aed; }
  html[data-theme="light"] .vis-basis-btn.active { background: #4f46e5; color: #fff; }
  html[data-theme="light"] .vis-chip { background: #ffffff; border-color: #e2e8f0; color: #1f2937; }
  html[data-theme="light"] .vis-chip-eye { color: #64748b; }
  html[data-theme="light"] .vis-chip-eye.off { color: #cbd5e1; }
  html[data-theme="light"] .vis-search-input { background: #ffffff; border-color: #cbd5e1; color: #1f2937; }
  html[data-theme="light"] .vis-card { background: #ffffff; border-color: #e2e8f0; }
  html[data-theme="light"] .vis-card-title { color: #1f2937; }
  html[data-theme="light"] .vis-card-canvas { color: #64748b; }
  html[data-theme="light"] .vis-unit-warn { color: #b45309; }
  html[data-theme="light"] .vis-empty { border-color: #e2e8f0; color: #64748b; }

  /* Saved visuals. Mirrors the watchlist bar: one scrolling row of chips with
     the "+" as the LAST CHILD of the scroller, so it sits beside the thing it
     creates rather than pinned across the bar. It lives at the bottom of
     .app-body beside #watchlist-bar and owns its own visibility. */
  .vis-saved { display: flex; align-items: center; gap: 10px; margin: 8px 24px 12px; padding: 8px 10px; background: #13151f; border: 1px solid #2d3148; border-radius: 10px; }
  .vis-saved.hidden { display: none; }
  .vis-saved-label { flex: 0 0 auto; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #64748b; }
  .vis-saved-chips { display: flex; align-items: center; gap: 6px; flex: 1 1 0%; min-width: 0; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .vis-saved-chips::-webkit-scrollbar { display: none; }
  .vis-saved-chip { display: inline-flex; align-items: center; flex: 0 0 auto; border: 1px solid #2d3148; border-radius: 999px; background: #1a1c2e; }
  /* The page writes every change into the chip marked active, so which one that
     is has to be visible at a glance. */
  .vis-saved-chip.active { border-color: #7c3aed; background: #221a3a; }
  .vis-saved-chip.active .vis-saved-open { color: #c4b5fd; }
  .vis-saved-open { border: none; background: none; padding: 4px 4px 4px 11px; color: #e2e8f0; font-size: 0.78rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
  .vis-saved-open:hover { color: #a78bfa; }
  .vis-saved-edit { border: none; background: none; color: #64748b; font-size: 0.72rem; line-height: 1; cursor: pointer; padding: 0 3px; }
  .vis-saved-edit:hover { color: #a78bfa; }
  .vis-saved-x { border: none; background: none; color: #64748b; font-size: 1rem; line-height: 1; cursor: pointer; padding: 0 8px 0 3px; border-radius: 999px; }
  .vis-saved-x:hover { color: #f87171; }
  .vis-saved-add { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px dashed #2d3148; border-radius: 50%; background: none; color: #a78bfa; font-size: 1.05rem; line-height: 1; cursor: pointer; padding: 0; }
  .vis-saved-add:hover { border-color: #7c3aed; background: #1a1c2e; }

  html[data-theme="light"] .vis-saved-label { color: #94a3b8; }
  html[data-theme="light"] .vis-saved-chip { background: #ffffff; border-color: #e2e8f0; }
  html[data-theme="light"] .vis-saved-chip.active { border-color: #7c3aed; background: #f5f3ff; }
  html[data-theme="light"] .vis-saved-chip.active .vis-saved-open { color: #6d28d9; }
  html[data-theme="light"] .vis-saved-open { color: #1f2937; }
  html[data-theme="light"] .vis-saved-open:hover { color: #7c3aed; }
  html[data-theme="light"] .vis-saved { background: #ffffff; border-color: #e2e8f0; }
  html[data-theme="light"] .vis-saved-edit { color: #94a3b8; }
  html[data-theme="light"] .vis-saved-edit:hover { color: #7c3aed; }
  html[data-theme="light"] .vis-saved-x { color: #94a3b8; }
  html[data-theme="light"] .vis-saved-add { border-color: #cbd5e1; color: #7c3aed; }
  html[data-theme="light"] .vis-saved-add:hover { background: #f5f3ff; border-color: #7c3aed; }

  @media (max-width: 768px) {
    .vis-tickers { padding: 0 10px 8px; gap: 8px; }
    .vis-search-input { width: 100%; }
    .vis-search { flex: 1 1 140px; }
    .vis-saved { margin: 8px 12px 10px; padding: 8px; gap: 8px; }
    .vis-saved-add { width: 34px; height: 34px; }
    /* One chart per row: two 260px charts side by side on a phone are both
       unreadable, and the axis labels collide. */
    .vis-charts { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 0 10px 16px; }
    .vis-card-canvas { height: 220px; }
    .vis-empty { margin: 10px 10px 20px; }
  }

  /* ── AI Insight ──────────────────────────────────────────────────── */
  .ai-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
  .ai-head .tech-cap { max-width: 640px; margin: 6px 0 0; }
  .ai-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .ai-quota { font-size: 0.72rem; color: #94a3b8; }
  .ai-btn { padding: 5px 12px; border-radius: 7px; border: 1px solid #2d3148; background: #1a1c2e; color: #cbd5e1; font-size: 0.75rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
  .ai-btn:hover:not(:disabled) { border-color: #a78bfa; color: #a78bfa; }
  .ai-btn:disabled { opacity: 0.55; cursor: default; }
  .ai-btn-primary { background: #7c3aed; border-color: #7c3aed; color: #fff; padding: 8px 16px; font-size: 0.8rem; }
  .ai-btn-primary:hover:not(:disabled) { background: #6d28d9; border-color: #6d28d9; color: #fff; }
  .ai-disclaimer { font-size: 0.72rem; color: #94a3b8; background: #1a1c2e; border: 1px dashed #2d3148; border-radius: 8px; padding: 8px 12px; margin-bottom: 16px; }
  .ai-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .ai-grid-single { grid-template-columns: minmax(0, 1fr); }
  .ai-periods { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
  .ai-periods-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #64748b; margin-right: 2px; }
  .ai-period-chip { background: none; border: 1px solid #2d3148; border-radius: 999px; padding: 5px 14px; color: #94a3b8; font-size: 0.8rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all 0.15s; }
  .ai-period-chip:hover { border-color: #4f46e5; color: #a78bfa; }
  .ai-period-chip.active { background: #4f46e5; border-color: #4f46e5; color: #fff; }
  /* Which document a quarter is on file as — a verbatim call or an SEC form. */
  .ai-chip-doc { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: #2d3148; color: #94a3b8; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em; vertical-align: 1px; }
  .ai-period-chip.active .ai-chip-doc { background: rgba(255,255,255,0.22); color: #fff; }
  /* Manual "check for new calls" row — only offered when the schedule can't help. */
  .ai-sync { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -6px 0 14px; }
  .ai-sync:empty { display: none; }
  .ai-sync-btn { background: none; border: 1px solid #2d3148; border-radius: 8px; padding: 5px 12px; color: #a78bfa; font-size: 0.78rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all 0.15s; }
  .ai-sync-btn:hover:not(:disabled) { border-color: #4f46e5; background: rgba(79,70,229,0.12); }
  .ai-sync-btn:disabled { color: #64748b; cursor: not-allowed; opacity: 0.75; }
  .ai-sync-note { font-size: 0.75rem; color: #64748b; }
  .ai-sync-note.ai-sync-ok { color: #4ade80; }
  .ai-sync-note.ai-sync-err { color: #f87171; }
  .ai-doc-badge { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 8px; border-radius: 10px; background: #334155; color: #cbd5e1; cursor: help; }
  .ai-doc-filing { background: #1e3a5f; color: #93c5fd; }
  .ai-doc-call { background: #3b2f5e; color: #c4b5fd; }
  .ai-card { background: #1a1c2e; border: 1px solid #2d3148; border-radius: 12px; padding: 16px 18px; }
  .ai-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .ai-card-title { font-size: 0.95rem; font-weight: 700; color: #e2e8f0; flex: 1; min-width: 120px; }
  .ai-card-blurb { font-size: 0.72rem; color: #94a3b8; margin: 2px 0 12px; }
  .ai-verdict { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 8px; border-radius: 10px; background: #334155; color: #cbd5e1; }
  .ai-verdict-bullish { background: #064e3b; color: #6ee7b7; }
  .ai-verdict-bearish { background: #4c1d24; color: #fca5a5; }
  .ai-verdict-mixed { background: #422006; color: #fcd34d; }
  .ai-headline { font-size: 0.9rem; font-weight: 600; color: #e2e8f0; line-height: 1.45; margin-bottom: 12px; }
  .ai-block { margin-bottom: 12px; }
  .ai-block-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; margin-bottom: 5px; }
  .ai-list { margin: 0; padding-left: 18px; }
  .ai-list li { font-size: 0.82rem; color: #cbd5e1; line-height: 1.5; margin-bottom: 4px; }
  .ai-para, .ai-theme { font-size: 0.82rem; color: #cbd5e1; line-height: 1.5; margin-bottom: 4px; }
  .ai-theme b { color: #e2e8f0; }
  .ai-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
  .ai-metric { background: #15171f; border: 1px solid #2d3148; border-radius: 8px; padding: 7px 10px; }
  .ai-metric-label { font-size: 0.75rem; color: #94a3b8; }
  .ai-metric-value { font-size: 0.9rem; font-weight: 700; color: #e2e8f0; }
  .ai-metric-note { font-size: 0.75rem; color: #94a3b8; margin-top: 2px; }

  /* Sentiment tinting. The hues are the verdict badge's, deliberately, so the
     badge at the top of a card and the lines below it read as one scale rather
     than two colour schemes that happen to share a card.

     The tint is carried on a left rule and a faint wash, not on the body text:
     these are full sentences, and setting a paragraph of prose in saturated
     green or red costs more legibility than the signal is worth.

     Every bullet gets a rule and a marker, including the neutral ones. Tinting
     only some of them would leave the list ragged -- tinted rows indented
     differently from untinted ones -- and a uniform baseline is also what makes
     a colour read as a deliberate signal rather than as stray emphasis.

     Colour is never the only channel: each tinted item carries a title
     attribute naming its sentiment, and the marker glyph differs by tone
     (up / down / dot), so the meaning survives a colour-blind reader, a screen
     reader and a black-and-white print. */
  .ai-list { list-style: none; padding-left: 0; }
  .ai-list li { padding: 3px 0 3px 9px; border-left: 3px solid #334155;
    border-radius: 0 4px 4px 0; }
  .ai-list li::before { content: '● '; color: #64748b; font-size: 0.62rem; }
  .ai-para[class*="ai-tone-"], .ai-theme[class*="ai-tone-"] {
    padding: 3px 0 3px 9px; border-left: 3px solid transparent; border-radius: 0 4px 4px 0; }
  .ai-tone-positive { border-left-color: #34d399 !important; background: rgba(6, 78, 59, 0.28); }
  .ai-tone-negative { border-left-color: #f87171 !important; background: rgba(76, 29, 36, 0.34); }
  .ai-tone-caution  { border-left-color: #fbbf24 !important; background: rgba(66, 32, 6, 0.34); }
  .ai-list li.ai-tone-positive::before { content: '▲ '; color: #6ee7b7; }
  .ai-list li.ai-tone-negative::before { content: '▼ '; color: #fca5a5; }
  .ai-list li.ai-tone-caution::before  { content: '● '; color: #fcd34d; }
  /* A metric is already a bordered tile, so it takes the hue on its own border
     and its value rather than growing a second rule inside the card. */
  .ai-metric.ai-tone-positive { border-color: #34d399; }
  .ai-metric.ai-tone-negative { border-color: #f87171; }
  .ai-metric.ai-tone-caution  { border-color: #fbbf24; }
  .ai-metric.ai-tone-positive .ai-metric-value { color: #6ee7b7; }
  .ai-metric.ai-tone-negative .ai-metric-value { color: #fca5a5; }
  .ai-metric.ai-tone-caution  .ai-metric-value { color: #fcd34d; }

  /* The key to the above. Without it the colours are decoration; with it they
     are a legend the reader can act on. */
  .ai-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
    font-size: 0.7rem; color: #94a3b8; margin-bottom: 12px; }
  .ai-legend-item { display: inline-flex; align-items: center; gap: 5px; }
  .ai-legend-swatch { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
  .ai-legend-positive .ai-legend-swatch { background: #34d399; }
  .ai-legend-negative .ai-legend-swatch { background: #f87171; }
  .ai-legend-caution .ai-legend-swatch { background: #fbbf24; }
  .ai-legend-neutral .ai-legend-swatch { background: #64748b; }
  .ai-card-foot { font-size: 0.7rem; color: #94a3b8; border-top: 1px solid #2d3148; padding-top: 8px; margin-top: 12px; }
  .ai-stale { color: #fbbf24; font-weight: 600; }
  .ai-generated-at { white-space: nowrap; color: #cbd5e1; cursor: help; }
  .ai-note { font-size: 0.8rem; color: #94a3b8; line-height: 1.5; padding: 10px 0; }
  .ai-note-error { color: #fca5a5; }
  .ai-transcript-toggle { margin-top: 4px; padding: 0; border: none; background: none; color: #a78bfa; font-size: 0.78rem; font-weight: 600; cursor: pointer; }
  .ai-transcript-toggle:hover { text-decoration: underline; }
  .ai-transcript-box { margin-top: 10px; background: #15171f; border: 1px solid #2d3148; border-radius: 8px; padding: 10px 12px; }
  .ai-transcript-meta { font-size: 0.7rem; color: #94a3b8; margin-bottom: 6px; }
  .ai-transcript-text { font-size: 0.78rem; color: #cbd5e1; line-height: 1.6; white-space: pre-wrap; max-height: 340px; overflow-y: auto; }

  /* Light theme */
  html[data-theme="light"] .ai-quota, html[data-theme="light"] .ai-card-blurb,
  html[data-theme="light"] .ai-block-label, html[data-theme="light"] .ai-card-foot,
  html[data-theme="light"] .ai-note, html[data-theme="light"] .ai-metric-label,
  html[data-theme="light"] .ai-metric-note, html[data-theme="light"] .ai-transcript-meta { color: #64748b; }
  html[data-theme="light"] .ai-btn { background: #ffffff; border-color: #cbd5e1; color: #475569; }
  html[data-theme="light"] .ai-btn:hover:not(:disabled) { border-color: #7c3aed; color: #7c3aed; }
  html[data-theme="light"] .ai-btn-primary { background: #7c3aed; border-color: #7c3aed; color: #fff; }
  html[data-theme="light"] .ai-btn-primary:hover:not(:disabled) { background: #6d28d9; border-color: #6d28d9; color: #fff; }
  html[data-theme="light"] .ai-disclaimer { background: #f8fafc; border-color: #cbd5e1; color: #64748b; }
  html[data-theme="light"] .ai-period-chip { border-color: #cbd5e1; color: #64748b; }
  html[data-theme="light"] .ai-period-chip:hover { border-color: #4f46e5; color: #4f46e5; }
  html[data-theme="light"] .ai-period-chip.active { background: #4f46e5; border-color: #4f46e5; color: #fff; }
  html[data-theme="light"] .ai-chip-doc { background: #e2e8f0; color: #64748b; }
  html[data-theme="light"] .ai-period-chip.active .ai-chip-doc { background: rgba(255,255,255,0.26); color: #fff; }
  html[data-theme="light"] .ai-sync-btn { border-color: #cbd5e1; color: #4f46e5; }
  html[data-theme="light"] .ai-sync-btn:hover:not(:disabled) { border-color: #4f46e5; background: rgba(79,70,229,0.08); }
  html[data-theme="light"] .ai-sync-btn:disabled { color: #94a3b8; }
  html[data-theme="light"] .ai-sync-note { color: #64748b; }
  html[data-theme="light"] .ai-sync-note.ai-sync-ok { color: #15803d; }
  html[data-theme="light"] .ai-sync-note.ai-sync-err { color: #b91c1c; }
  html[data-theme="light"] .ai-doc-badge { background: #e2e8f0; color: #475569; }
  html[data-theme="light"] .ai-doc-filing { background: #dbeafe; color: #1d4ed8; }
  html[data-theme="light"] .ai-doc-call { background: #ede9fe; color: #6d28d9; }
  html[data-theme="light"] .ai-card { background: #ffffff; border-color: #e2e8f0; }
  html[data-theme="light"] .ai-card-title, html[data-theme="light"] .ai-headline,
  html[data-theme="light"] .ai-metric-value, html[data-theme="light"] .ai-theme b { color: #1f2937; }
  html[data-theme="light"] .ai-list li, html[data-theme="light"] .ai-para,
  html[data-theme="light"] .ai-theme, html[data-theme="light"] .ai-transcript-text { color: #334155; }
  html[data-theme="light"] .ai-verdict { background: #e2e8f0; color: #475569; }
  html[data-theme="light"] .ai-verdict-bullish { background: #d1fae5; color: #047857; }
  html[data-theme="light"] .ai-verdict-bearish { background: #fee2e2; color: #b91c1c; }
  html[data-theme="light"] .ai-verdict-mixed { background: #fef3c7; color: #b45309; }
  html[data-theme="light"] .ai-metric, html[data-theme="light"] .ai-transcript-box { background: #f8fafc; border-color: #e2e8f0; }
  /* Light-theme sentiment. Same hues as the light verdict badges, and the wash
     has to be re-stated rather than reused: the dark tints are near-black and
     would read as a smudge on white. */
  html[data-theme="light"] .ai-list li { border-left-color: #e2e8f0; }
  html[data-theme="light"] .ai-list li::before { color: #94a3b8; }
  html[data-theme="light"] .ai-tone-positive { border-left-color: #059669 !important; background: #ecfdf5; }
  html[data-theme="light"] .ai-tone-negative { border-left-color: #dc2626 !important; background: #fef2f2; }
  html[data-theme="light"] .ai-tone-caution  { border-left-color: #d97706 !important; background: #fffbeb; }
  html[data-theme="light"] .ai-list li.ai-tone-positive::before { color: #047857; }
  html[data-theme="light"] .ai-list li.ai-tone-negative::before { color: #b91c1c; }
  html[data-theme="light"] .ai-list li.ai-tone-caution::before  { color: #b45309; }
  html[data-theme="light"] .ai-metric.ai-tone-positive { border-color: #059669; background: #ecfdf5; }
  html[data-theme="light"] .ai-metric.ai-tone-negative { border-color: #dc2626; background: #fef2f2; }
  html[data-theme="light"] .ai-metric.ai-tone-caution  { border-color: #d97706; background: #fffbeb; }
  html[data-theme="light"] .ai-metric.ai-tone-positive .ai-metric-value { color: #047857; }
  html[data-theme="light"] .ai-metric.ai-tone-negative .ai-metric-value { color: #b91c1c; }
  html[data-theme="light"] .ai-metric.ai-tone-caution  .ai-metric-value { color: #b45309; }
  html[data-theme="light"] .ai-legend { color: #64748b; }
  html[data-theme="light"] .ai-legend-positive .ai-legend-swatch { background: #059669; }
  html[data-theme="light"] .ai-legend-negative .ai-legend-swatch { background: #dc2626; }
  html[data-theme="light"] .ai-legend-caution .ai-legend-swatch { background: #d97706; }
  html[data-theme="light"] .ai-legend-neutral .ai-legend-swatch { background: #94a3b8; }
  html[data-theme="light"] .ai-card-foot { border-top-color: #e2e8f0; }
  html[data-theme="light"] .ai-note-error { color: #b91c1c; }
  html[data-theme="light"] .ai-stale { color: #b45309; }
  html[data-theme="light"] .ai-generated-at { color: #475569; }

  @media (max-width: 900px) {
    .ai-grid { grid-template-columns: minmax(0, 1fr); }
    .ai-head-actions { width: 100%; justify-content: space-between; }
  }

/* ── Financials (stock detail ▸ Financials) ─────────────────────────────── */
.fin-head { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 24px 0 14px; }
.fin-sub { font-size: 0.78rem; color: #94a3b8; margin-top: 4px; }
#fin-tabs { flex-wrap: wrap; }
.fin-empty { padding: 28px 20px; text-align: center; color: #94a3b8;
  font-size: 0.86rem; line-height: 1.6; background: #1a1c2e;
  border: 1px solid #2d3148; border-radius: 10px; }
.fin-table-wrap { overflow-x: auto; border: 1px solid #2d3148; border-radius: 10px;
  background: #1a1c2e; }
.fin-table { width: 100%; border-collapse: collapse; min-width: 520px; font-size: 0.82rem; }
.fin-table th, .fin-table td { padding: 9px 14px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid #23263c; }
.fin-table thead th { position: sticky; top: 0; z-index: 2; background: #21243a;
  color: #cbd5e1; font-weight: 600; font-size: 0.78rem; }
/* The line-item name is what a reader tracks across a wide scroll, so it stays put. */
.fin-table .fin-label-col { position: sticky; left: 0; z-index: 1; text-align: left;
  background: #1a1c2e; font-weight: 500; white-space: normal; min-width: 190px; }
.fin-table thead th.fin-label-col { z-index: 3; background: #21243a; }
.fin-table tbody tr:hover td { background: #20233a; }
.fin-table tbody tr:hover td.fin-label-col { background: #20233a; }
.fin-th-sub { font-size: 0.75rem; font-weight: 400; color: #8b93a7; margin-top: 2px; }
.fin-strong td { font-weight: 700; }
.fin-na { color: #64748b; }
.fin-pos { color: #22c55e; }
.fin-neg { color: #ef4444; }
.fin-note { margin-top: 10px; font-size: 0.74rem; color: #8b93a7; line-height: 1.5; }

/* ── Plan-locked history ───────────────────────────────────────────────────
   Columns older than the reader's plan covers are rendered, not dropped: a
   truncated table cannot tell anyone that more history exists. They read as a
   deliberately inert band — violet, the colour Advanced is marked with
   everywhere else — rather than as data that failed to load. */
/* Specificity, not !important: `.fin-table thead th` sets both background AND
   colour, so a bare `.fin-th-locked` loses the colour and an !important
   background then outranks the light-theme override too — which put a navy band
   across the light page and left the violet label at 2.25:1. Matching that
   selector's shape wins honestly and lets light override in turn. */
.fin-table thead th.fin-th-locked { color: #a78bfa; background: #241e44; }
.fin-table thead th.fin-th-locked .fin-th-sub { color: #9b8cd0; }
.fin-lock-i { width: 11px; height: 11px; fill: currentColor; vertical-align: -1px;
  margin-right: 5px; }
/* `height: 1px` is a minimum in table layout, so the cell still grows to the
   row -- but it makes the height DEFINITE, which is what lets the button's
   `height: 100%` resolve. Without it the button sizes to its own 7px bar plus
   padding and stops 12px short of the row on a phone, leaving a dead strip
   along the bottom of every locked cell. */
.fin-table td.fin-locked-cell { background: rgba(124,58,237,0.07); padding: 0;
  height: 1px; }
/* A bar, not a padlock per cell: one lock in the heading says it once, where a
   grid of padlocks reads as an error state. Sized in ch so it tracks the
   column's own text width instead of stretching a narrow column.

   It is a <button>, so every UA default has to be undone explicitly — there is
   no global button reset in this stylesheet, and without this it shipped as
   grey OS chrome with its own border. It absorbs the cell's padding instead of
   sitting inside it (hence `padding: 0` on the td above) so the whole cell is
   the target: a 4ch x 7px bar is a 7px-tall tap target, which no thumb can
   hit. Row height is unchanged — the padding simply moved outward one box. */
.fin-locked-bar { display: block; width: 100%; height: 100%; padding: 9px 14px;
  margin: 0; box-sizing: border-box;
  appearance: none; -webkit-appearance: none; border: none; background: none;
  font: inherit; color: inherit; cursor: pointer; text-align: right;
  line-height: 0; }
/* Rest-state alpha measured, not guessed: the bar IS the only thing on screen
   that says this cell does anything, so it is a UI component under WCAG 1.4.11
   and owes 3:1 against the cell it sits in. At the alphas it shipped with it
   was 1.87:1 dark / 1.55:1 light — a ghost. 0.62 dark measures 3.09:1 and 0.68
   light 3.35:1 against the rendered cell background. Hover is no longer the
   first moment the bar becomes legible, because a phone has no hover. */
.fin-locked-bar::before { content: ""; display: inline-block; width: 4ch;
  height: 7px; border-radius: 4px; vertical-align: middle;
  background: repeating-linear-gradient(135deg, rgba(167,139,250,0.62) 0 4px,
    rgba(167,139,250,0.28) 4px 8px);
  transition: background 0.15s ease; }
/* :active is listed alongside hover/focus so a TAP brightens the bar. The
   blanket `button:active { opacity: .72 }` alone dimmed it, which is the
   vocabulary of a disabled control — the opposite acknowledgement. */
.fin-locked-bar:hover::before, .fin-locked-bar:focus-visible::before,
.fin-locked-bar:active::before {
  background: repeating-linear-gradient(135deg, rgba(167,139,250,0.9) 0 4px,
    rgba(167,139,250,0.5) 4px 8px); }
/* Inset, because an outset ring on a zero-padding table cell is clipped by the
   neighbouring cell's background rather than drawn over it. */
.fin-locked-bar:focus-visible { outline: 2px solid #a78bfa; outline-offset: -2px;
  border-radius: 4px; }
.fin-table tbody tr:hover td.fin-locked-cell { background: rgba(124,58,237,0.12); }
.fin-lock-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid #4c1d95;
  background: linear-gradient(135deg, rgba(76,29,149,0.28), rgba(20,22,42,0.6));
  font-size: 0.8rem; color: #cbd5e1; line-height: 1.5; }
.fin-lock-banner b { color: #e2e8f0; }
.fin-lock-mark { display: inline-flex; color: #c4b5fd; vertical-align: -2px;
  margin-right: 7px; }
.fin-lock-mark .fin-lock-i { width: 15px; height: 15px; margin: 0; }
.fin-lock-copy { flex: 1 1 240px; min-width: 0; }
/* `.btn-primary` is only defined under #alerts-view, so this button shipped as
   raw OS chrome: 19px tall, grey, square, with the UA's black focus ring that
   is invisible on the dark theme. Styled here rather than by borrowing that
   selector, which would tie the Financials page to the Alerts page's scope. */
.fin-lock-cta { white-space: nowrap; flex: 0 0 auto; appearance: none;
  -webkit-appearance: none; display: inline-flex; align-items: center;
  justify-content: center; min-height: 44px; padding: 0 18px; border: none;
  border-radius: 10px; background: #7c3aed; color: #fff; font-size: 0.82rem;
  font-weight: 600; font-family: inherit; cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease; }
.fin-lock-cta:hover { background: #6d28d9; }
.fin-lock-cta:active { opacity: 0.82; }
.fin-lock-cta:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }
/* The capped tail: one summary column standing in for the rest of the locked
   history, so a quarterly reader is not handed twenty inert columns. */
.fin-th-more { font-variant-numeric: tabular-nums; }
/* Segments & KPIs stacks full-width matrices, so it is a single column — the
   old auto-fill grid was for the retired per-period cards. */
.fin-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.fin-basis-row { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; flex-wrap: wrap; }
.fin-basis-label { font-size: 0.76rem; font-weight: 600; color: #94a3b8; }
#fin-basis .region-btn.fin-basis-off { opacity: 0.45; cursor: not-allowed; }
/* Deliberately not styled as another pill in the basis group beside it: the
   basis pills are a one-of-three choice, this is an independent on/off. */
.fin-chg-toggle { background: #1e2035; border: 1px solid #2d3148; border-radius: 999px;
  padding: 5px 14px; color: #94a3b8; font-size: 0.78rem; font-weight: 600;
  cursor: pointer; transition: all 0.15s; }
.fin-chg-toggle:hover:not(:disabled) { color: #e2e8f0; border-color: #4f46e5; }
.fin-chg-toggle.active { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.fin-chg-toggle:disabled { opacity: 0.45; cursor: not-allowed; }
.fin-unit { font-size: 0.7rem; font-weight: 400; color: #8b93a7; }
/* Metric templates — a named selection of statement lines, spanning sections. */
.fin-tpl-row { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; flex-wrap: wrap; }
.fin-tpl-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
/* The template dropdown. Sized like .fin-chg-toggle beside it so the row reads
   as one set of controls, and allowed to shrink so a long template name cannot
   push the row past a phone's width. */
.fin-tpl-select { background: #1e2035; border: 1px solid #2d3148; border-radius: 999px;
  padding: 5px 12px; color: #e2e8f0; font-size: 0.78rem; font-weight: 600;
  cursor: pointer; transition: all 0.15s; min-height: 32px;
  flex: 0 1 auto; min-width: 0; max-width: 220px; text-overflow: ellipsis; }
.fin-tpl-select:hover { border-color: #4f46e5; }
.fin-tpl-select:focus-visible { outline: 2px solid #6366f1; outline-offset: 1px; }
.fin-tpl-chip { background: #1e2035; border: 1px solid #2d3148; border-radius: 999px;
  padding: 5px 14px; color: #94a3b8; font-size: 0.78rem; font-weight: 600;
  cursor: pointer; transition: all 0.15s; min-height: 32px; }
.fin-tpl-chip:hover { color: #e2e8f0; border-color: #4f46e5; }
.fin-tpl-chip.active { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.fin-tpl-empty { font-size: 0.74rem; color: #94a3b8; }
.fin-tpl-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fin-tpl-btn { background: transparent; border: 1px solid #2d3148; border-radius: 8px;
  padding: 5px 12px; color: #94a3b8; font-size: 0.76rem; font-weight: 600;
  cursor: pointer; transition: all 0.15s; min-height: 32px; }
.fin-tpl-btn:hover:not(:disabled) { color: #e2e8f0; border-color: #4f46e5; }
.fin-tpl-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.fin-tpl-name { background: #1e2035; border: 1px solid #2d3148; border-radius: 8px;
  padding: 5px 10px; color: #e2e8f0; font-size: 0.78rem; min-height: 32px; width: 180px; }
.fin-tpl-name::placeholder { color: #8b93a7; }
.fin-tpl-name:focus { outline: 2px solid #4f46e5; outline-offset: 1px; border-color: #4f46e5; }
.fin-tpl-danger:hover:not(:disabled) { color: #fca5a5; border-color: #f87171; }
.fin-tpl-status { font-size: 0.74rem; color: #94a3b8; }
.fin-tpl-status-bad { color: #fca5a5; }
/* The metric fly-out. Takes the whole row's width (flex-basis 100%) rather than
   floating over the statements: it is a working surface a reader ticks through
   several groups of, and an overlay would hide the chart it is feeding. Reuses
   .col-picker / .col-groups / .col-chip so it matches every other metric picker
   in the app, and only adds the bits that differ. */
.fin-tpl-picker { flex: 1 0 100%; border: 1px solid #2d3148; border-bottom: 1px solid #2d3148;
  border-radius: 12px; padding: 14px 16px; margin-top: 4px; max-height: 46vh; }
.fin-tpl-picker-head { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 12px; font-size: 0.76rem; color: #94a3b8; }
.fin-tpl-picker-head-actions { display: flex; gap: 6px; }
/* The count rides inside the button, so it needs its own separation — a plain
   text node next to the label collapsed into "Choose metrics0". */
.fin-tpl-pill { display: inline-block; margin-left: 7px; min-width: 18px; padding: 1px 6px;
  border-radius: 999px; background: #262a44; color: #c7d2fe; font-size: 0.7rem;
  font-weight: 700; line-height: 1.5; }
html[data-theme="light"] .fin-tpl-pill { background: #e0e7ff; color: #3730a3; }
html[data-theme="light"] .fin-tpl-picker { border-color: #e2e8f0; }
html[data-theme="light"] .fin-tpl-picker-head { color: #64748b; }
/* % Chg reports direction only, so its colours are muted rather than the
   full-strength good/bad green and red used in the Ratios table. The change
   row is subordinate to the line it measures, so the pair reads as one block:
   the value row drops its rule and the change row is set smaller and dimmer. */
.fin-table tbody tr.fin-has-chg > td { border-bottom: none; padding-bottom: 2px; }
.fin-table tbody tr.fin-chg-row > td { font-size: 0.71rem; font-weight: 500;
  padding-top: 0; padding-bottom: 8px; color: #7c8496; }
.fin-table tbody tr.fin-chg-row > td.fin-label-col { padding-left: 28px;
  font-weight: 500; color: #6b7280; text-transform: uppercase; letter-spacing: 0.04em;
  font-size: 0.75rem; }
/* Written at the same specificity as the row's own colour above, which would
   otherwise grey the direction out. */
.fin-table tbody tr.fin-chg-row > td.fin-chg-up, .fin-chg-up { color: #4ade80; }
.fin-table tbody tr.fin-chg-row > td.fin-chg-down, .fin-chg-down { color: #f87171; }
/* Collapsible sub-group inside a statement table (the price-based ratios).
   The header is two cells, not one spanning cell: the title rides the sticky
   label column so it lines up with every other row's name and stays on screen
   when the wrapper scrolls sideways, and the note takes the figure columns.
   ⚠️ The sticky cell must stay ONE column wide -- a sticky cell stretched
   across the table sits on top of the figures the moment the reader scrolls. */
.fin-table tbody tr.fin-group-row > td { padding: 10px 12px 8px;
  background: #16182a; border-bottom: 1px solid #2d3148; }
.fin-table tbody tr.fin-group-row > td.fin-group-label,
.fin-table tbody tr.fin-group-row:hover > td.fin-group-label { background: #16182a; }
.fin-group-toggle { background: none; border: 0; padding: 0; cursor: pointer;
  color: inherit; font: inherit; font-weight: 700; font-size: 0.8rem;
  display: inline-flex; align-items: center; gap: 6px; }
.fin-group-toggle:hover { color: #8b5cf6; }
.fin-group-toggle:hover .fin-group-caret { color: #8b5cf6; }
/* There is no blanket button focus ring in this stylesheet — only inputs and
   selects get one — so a <button> falls back to the UA `outline: auto`, which
   measured as a 1px rgb(16,16,16) ring: near-invisible on the #16182a header
   row it sits on. This is the ONLY route into ten multiples, so it takes the
   repo's focus token explicitly, exactly like .fin-lock-cta beside it. */
.fin-group-toggle:focus-visible { outline: 2px solid #a78bfa; outline-offset: 3px;
  border-radius: 4px; }
.fin-group-caret { font-size: 0.7rem; color: #8b93a7; }
/* How many multiples are behind the caret. Without it a collapsed row reads as
   a footnote rather than as ten numbers the reader has not seen yet. */
.fin-group-count { font-size: 0.68rem; font-weight: 700; line-height: 1;
  padding: 3px 6px; border-radius: 999px; color: #c4b5fd;
  background: rgba(124,58,237,0.22); }
.fin-group-note { font-size: 0.7rem; font-weight: 400; color: #8b93a7; }
/* A block under the title in the sticky label column, not an inline tail on
   the right: it wraps rather than pushing the column wider, and it is the one
   message here that must be readable without scrolling a table sideways. */
.fin-group-empty { display: block; white-space: normal; margin-top: 3px;
  font-size: 0.7rem; font-weight: 400; line-height: 1.4; color: #8b93a7; }
@media (max-width: 640px) { .fin-group-note { display: none; } }
.fin-row-hidden { display: none; }
/* A rollup component sits under the total it makes up, so it is indented and
   quieter than a statement line of its own. The indent is padding on the label
   cell, not a margin: the cell is sticky, and a margin would slide out from
   under it when the wrapper scrolls sideways. */
.fin-table tbody tr.fin-rollup-row > td.fin-label-col { padding-left: 28px; }
.fin-table tbody tr.fin-rollup-row > td { color: #b6bdd0; }
/* The +/− that opens the block, on the statement line it breaks down. Sized to
   a 24px square rather than to the glyph: on a phone this is the whole target,
   and it sits next to a checkbox that must stay separately hittable. */
.fin-rollup-toggle { margin-left: 8px; width: 24px; height: 24px; padding: 0;
  flex: 0 0 auto; border: 1px solid #2d3148; border-radius: 6px;
  background: #1e2035; color: #94a3b8; font: inherit; font-size: 0.8rem;
  font-weight: 700; line-height: 1; cursor: pointer; vertical-align: middle; }
.fin-rollup-toggle:hover { color: #e2e8f0; border-color: #4f46e5; }
html[data-theme="light"] .fin-table tbody tr.fin-rollup-row > td { color: #475569; }
html[data-theme="light"] .fin-rollup-toggle { background: #f1f5f9;
  border-color: #cbd5e1; color: #64748b; }
html[data-theme="light"] .fin-rollup-toggle:hover { color: #1f2937;
  border-color: #4f46e5; }
.fin-card { background: #1a1c2e; border: 1px solid #2d3148; border-radius: 10px; padding: 14px 16px; }
.fin-card-title { font-size: 0.9rem; font-weight: 700; margin-bottom: 10px; }
.fin-card-sub { font-size: 0.72rem; font-weight: 400; color: #8b93a7; }
.fin-card-h { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: #94a3b8; font-weight: 700; margin: 12px 0 6px; }
.fin-table-sm { min-width: 0; font-size: 0.78rem; }
.fin-table-sm th, .fin-table-sm td { padding: 6px 10px; }
.fin-card .fin-table-sm .fin-label-col { min-width: 0; background: transparent; position: static; }

/* Contracted-future-revenue card. A short row of figures rather than a table:
   it is a point-in-time disclosure, not a series to trend. */
.fin-guide { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px; background: #171a2e; border: 1px solid #2d3148; border-radius: 10px; padding: 14px; }
.fin-guide-item { min-width: 0; }
.fin-guide-label { font-size: 0.72rem; color: #8b93a7; margin-bottom: 4px; }
.fin-guide-value { font-size: 1.02rem; font-weight: 700; color: #e2e8f0; }

html[data-theme="light"] .fin-sub, html[data-theme="light"] .fin-note,
html[data-theme="light"] .fin-th-sub, html[data-theme="light"] .fin-card-sub { color: #64748b; }
html[data-theme="light"] .fin-empty { background: #fff; border-color: #e2e8f0; color: #475569; }

/* On-demand fetch: the offer shown when nothing is stored, and the progress
   strip that replaces it while filings are being read. */
.fin-fetch { padding: 30px 24px; text-align: center; background: #1a1c2e;
  border: 1px solid #2d3148; border-radius: 10px; }
.fin-fetch-title { font-size: 0.95rem; font-weight: 600; color: #e2e8f0; margin-bottom: 8px; }
.fin-fetch-text { font-size: 0.82rem; line-height: 1.65; color: #94a3b8;
  max-width: 520px; margin: 0 auto; }
.fin-fetch-btn { margin-top: 16px; padding: 9px 20px; font-size: 0.84rem; font-weight: 600;
  color: #fff; background: #4f46e5; border: 1px solid #4f46e5; border-radius: 8px;
  cursor: pointer; }
.fin-fetch-btn:hover:not(:disabled) { background: #4338ca; border-color: #4338ca; }
.fin-fetch-btn:disabled { opacity: 0.6; cursor: default; }
.fin-fetch-err { margin-top: 12px; font-size: 0.8rem; color: #f87171; }
.fin-fetch-run { margin-bottom: 12px; padding: 12px 14px; background: #1a1c2e;
  border: 1px solid #2d3148; border-radius: 10px; }
.fin-fetch-run-solo { padding: 24px 20px; text-align: center; }
.fin-fetch-run-head { display: flex; align-items: center; justify-content: center;
  gap: 9px; font-size: 0.82rem; color: #cbd5e1; }
.fin-fetch-bar { margin-top: 10px; height: 5px; border-radius: 999px;
  background: #2d3148; overflow: hidden; }
.fin-fetch-bar-fill { height: 100%; background: #4f46e5; border-radius: 999px;
  transition: width 0.4s ease; }
.fin-fetch-run-solo .fin-fetch-text { margin-top: 10px; }
.fin-spin { width: 13px; height: 13px; flex: 0 0 auto; border-radius: 50%;
  border: 2px solid #3b4062; border-top-color: #818cf8; animation: finSpin 0.8s linear infinite; }
@keyframes finSpin { to { transform: rotate(360deg); } }
/* ⚠️ This used to be `.fin-spin { animation: none; }`, which set animation-name
   to none and left a motionless ring on screen while a fetch was running — a
   reader with reduced motion enabled could not tell "loading" from "stuck".
   An indeterminate busy indicator is information, not decoration, so it keeps
   turning; the Phase 3 reduced-motion block at the end of this file slows it
   instead. */

html[data-theme="light"] .fin-fetch,
html[data-theme="light"] .fin-fetch-run { background: #fff; border-color: #e2e8f0; }
html[data-theme="light"] .fin-fetch-title { color: #0f172a; }
html[data-theme="light"] .fin-fetch-text { color: #475569; }
html[data-theme="light"] .fin-fetch-run-head { color: #334155; }
html[data-theme="light"] .fin-fetch-bar { background: #e2e8f0; }
html[data-theme="light"] .fin-fetch-err { color: #dc2626; }
html[data-theme="light"] .fin-spin { border-color: #dbeafe; border-top-color: #4f46e5; }

html[data-theme="light"] .fin-table-wrap { background: #fff; border-color: #e2e8f0; }
html[data-theme="light"] .fin-table th, html[data-theme="light"] .fin-table td { border-bottom-color: #eef2f7; }
html[data-theme="light"] .fin-table thead th,
html[data-theme="light"] .fin-table thead th.fin-label-col { background: #f1f5f9; color: #334155; }
html[data-theme="light"] .fin-table .fin-label-col { background: #fff; }
html[data-theme="light"] .fin-table tbody tr:hover td,
html[data-theme="light"] .fin-table tbody tr:hover td.fin-label-col { background: #f8fafc; }
html[data-theme="light"] .fin-na { color: #94a3b8; }
html[data-theme="light"] .fin-table thead th.fin-th-locked { background: #f1ecfd; color: #6d28d9; }
html[data-theme="light"] .fin-table thead th.fin-th-locked .fin-th-sub { color: #6b5ca3; }
html[data-theme="light"] .fin-table td.fin-locked-cell { background: rgba(124,58,237,0.05); }
html[data-theme="light"] .fin-table tbody tr:hover td.fin-locked-cell { background: rgba(124,58,237,0.10); }
html[data-theme="light"] .fin-locked-bar::before { background: repeating-linear-gradient(135deg,
  rgba(109,40,217,0.68) 0 4px, rgba(109,40,217,0.26) 4px 8px); }
html[data-theme="light"] .fin-locked-bar:hover::before,
html[data-theme="light"] .fin-locked-bar:focus-visible::before,
html[data-theme="light"] .fin-locked-bar:active::before {
  background: repeating-linear-gradient(135deg,
    rgba(109,40,217,0.92) 0 4px, rgba(109,40,217,0.45) 4px 8px); }
/* #a78bfa is 2.46:1 on light — the same failure the banner CTA had. */
html[data-theme="light"] .fin-locked-bar:focus-visible { outline-color: #4f46e5; }
html[data-theme="light"] .fin-lock-banner { background: #f5f3ff; border-color: #ddd6fe; color: #475569; }
html[data-theme="light"] .fin-lock-banner b { color: #1f2937; }
html[data-theme="light"] .fin-lock-mark { color: #7c3aed; }
/* #a78bfa is only 2.46:1 on the light banner — below the 3:1 a focus
   indicator needs. The repo's light focus token instead. */
html[data-theme="light"] .fin-lock-cta:focus-visible { outline-color: #4f46e5; }
html[data-theme="light"] .fin-table tbody tr.fin-group-row > td,
html[data-theme="light"] .fin-table tbody tr.fin-group-row > td.fin-group-label,
html[data-theme="light"] .fin-table tbody tr.fin-group-row:hover > td.fin-group-label {
  background: #f1f5f9; border-bottom-color: #e2e8f0; }
html[data-theme="light"] .fin-group-caret,
html[data-theme="light"] .fin-group-empty,
/* #64748b measured 4.34:1 on the #f1f5f9 header row — under the 4.5 that
   0.7rem body text owes. The repo's light muted token is 6.92:1 there. The
   dark twin (#8b93a7 on #16182a) already measures 5.7:1 and is left alone. */
html[data-theme="light"] .fin-group-note { color: #475569; }
html[data-theme="light"] .fin-group-count { color: #5b21b6; background: #ede9fe; }
html[data-theme="light"] .fin-group-toggle:focus-visible { outline-color: #4f46e5; }
html[data-theme="light"] .fin-pos { color: #16a34a; }
html[data-theme="light"] .fin-neg { color: #dc2626; }
html[data-theme="light"] .fin-card { background: #fff; border-color: #e2e8f0; }
html[data-theme="light"] .fin-card-h { color: #64748b; }
html[data-theme="light"] .fin-guide { background: #fff; border-color: #e2e8f0; }
html[data-theme="light"] .fin-guide-label { color: #64748b; }
html[data-theme="light"] .fin-guide-value { color: #1f2937; }
html[data-theme="light"] .fin-basis-label, html[data-theme="light"] .fin-unit { color: #64748b; }
html[data-theme="light"] .fin-chg-toggle { background: #f1f5f9; border-color: #cbd5e1; color: #64748b; }
html[data-theme="light"] .fin-chg-toggle:hover:not(:disabled) { color: #1f2937; border-color: #4f46e5; }
html[data-theme="light"] .fin-chg-toggle.active { background: #4f46e5; border-color: #4f46e5; color: #fff; }
html[data-theme="light"] .fin-tpl-chip { background: #f1f5f9; border-color: #cbd5e1; }
html[data-theme="light"] .fin-tpl-select { background: #f1f5f9; border-color: #cbd5e1; color: #1f2937; }
html[data-theme="light"] .fin-tpl-select:hover { border-color: #4f46e5; }
/* One rule for both: they sit in adjacent rows, and .fin-chg-toggle measured
   the identical 4.34:1 — fixing only the new control would split the pair. */
html[data-theme="light"] .fin-tpl-chip,
html[data-theme="light"] .fin-chg-toggle { color: #475569; }
html[data-theme="light"] .fin-tpl-chip:hover { color: #1f2937; border-color: #4f46e5; }
html[data-theme="light"] .fin-tpl-chip.active { background: #4f46e5; border-color: #4f46e5; color: #fff; }
html[data-theme="light"] .fin-tpl-btn { border-color: #cbd5e1; color: #64748b; }
html[data-theme="light"] .fin-tpl-btn:hover:not(:disabled) { color: #1f2937; border-color: #4f46e5; }
html[data-theme="light"] .fin-tpl-danger:hover:not(:disabled) { color: #b91c1c; border-color: #b91c1c; }
html[data-theme="light"] .fin-tpl-empty, html[data-theme="light"] .fin-tpl-status { color: #64748b; }
html[data-theme="light"] .fin-tpl-name { background: #fff; border-color: #cbd5e1; color: #1f2937; }
html[data-theme="light"] .fin-tpl-name::placeholder { color: #64748b; }
html[data-theme="light"] .fin-tpl-status-bad { color: #b91c1c; }
html[data-theme="light"] .fin-table tbody tr.fin-chg-row > td { color: #64748b; }
html[data-theme="light"] .fin-table tbody tr.fin-chg-row > td.fin-label-col { color: #94a3b8; }
html[data-theme="light"] .fin-table tbody tr.fin-chg-row > td.fin-chg-up,
html[data-theme="light"] .fin-chg-up { color: #15803d; }
html[data-theme="light"] .fin-table tbody tr.fin-chg-row > td.fin-chg-down,
html[data-theme="light"] .fin-chg-down { color: #b91c1c; }

/* Derived-quarter marker (a Q4 computed as FY − Q1..Q3, not a filed quarter) */
.fin-th-derived { color: #f59e0b; font-weight: 700; margin-left: 3px; cursor: help; }
html[data-theme="light"] .fin-th-derived { color: #b45309; }

/* Row picker + charted lines */
.fin-pick { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.fin-pick input { width: 14px; height: 14px; accent-color: #4f46e5; cursor: pointer;
  flex: 0 0 auto; margin: 0; }
/* The change row's own picker. It sits inside an already-indented, already-muted
   row, so the box is smaller and the gap tighter — it must read as subordinate
   to the value row's picker rather than competing with it. The indent is cut
   back because the checkbox now supplies the visual step in. */
.fin-table tbody tr.fin-chg-row > td.fin-label-col:has(.fin-pick-chg) { padding-left: 18px; }
.fin-pick-chg { gap: 6px; }
.fin-pick-chg input { width: 12px; height: 12px; accent-color: #6366f1; }
.fin-chart-card { background: #1a1c2e; border: 1px solid #2d3148; border-radius: 10px;
  padding: 12px 14px; margin-bottom: 12px; }
.fin-chart-head { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 6px; }
.fin-chart-title { font-size: 0.8rem; font-weight: 700; color: #e2e8f0; }
.fin-chart-clear { background: #1e2035; border: 1px solid #2d3148; border-radius: 999px;
  padding: 4px 12px; font-size: 0.72rem; font-weight: 600; color: #94a3b8; cursor: pointer; }
.fin-chart-clear:hover { color: #e2e8f0; border-color: #4f46e5; }
.fin-chart-canvas { width: 100%; height: 300px; font-size: 0.75rem; color: #94a3b8; }
.fin-chart-empty { font-size: 0.74rem; color: #8b93a7; line-height: 1.5; }
html[data-theme="light"] .fin-chart-card { background: #fff; border-color: #e2e8f0; }
html[data-theme="light"] .fin-chart-title { color: #1f2937; }
html[data-theme="light"] .fin-chart-clear { background: #f1f5f9; border-color: #cbd5e1; color: #64748b; }
html[data-theme="light"] .fin-chart-clear:hover { color: #1f2937; border-color: #4f46e5; }
html[data-theme="light"] .fin-chart-canvas,
html[data-theme="light"] .fin-chart-empty { color: #64748b; }

@media (max-width: 720px) {
  .fin-head { align-items: flex-start; }
  #fin-tabs { width: 100%; }
  .fin-basis-row { gap: 6px; }
  .fin-tpl-row { gap: 6px; }
  #fin-basis { width: 100%; }
  .fin-table { min-width: 420px; font-size: 0.78rem; }
  .fin-table th, .fin-table td { padding: 7px 10px; }
  /* The locked cell's padding lives on the button inside it, so it has to
     track the cell padding at every breakpoint or the locked columns would
     stop lining up with the rest of the row. */
  .fin-table td.fin-locked-cell { padding: 0; }
  .fin-locked-bar { padding: 7px 10px; }
  .fin-table .fin-label-col { min-width: 140px; }
  /* The toggle measured 153.8 x 17px — the only way into ten multiples, at a
     third of the 44px a finger needs. It grows the real box rather than
     wearing a ::after halo: a 44px halo on a 36px row would overhang the rows
     above and below and steal their taps. The cell's own padding is trimmed so
     the row lands at ~52px instead of ~62px. */
  .fin-table tbody tr.fin-group-row > td { padding-top: 4px; padding-bottom: 4px; }
  .fin-group-toggle { min-height: 44px; width: 100%; justify-content: flex-start; }
  .fin-cards { grid-template-columns: minmax(0, 1fr); }
  .fin-chart-canvas { height: 240px; }
  .fin-pick { gap: 6px; }
  /* The label column is already tight at 140px on a phone, so the change row
     gives back its indent rather than the label losing another character. */
  .fin-table tbody tr.fin-chg-row > td.fin-label-col { padding-left: 14px; }
  .fin-table tbody tr.fin-chg-row > td.fin-label-col:has(.fin-pick-chg) { padding-left: 10px; }
  .fin-pick-chg { gap: 5px; }
  /* Stacked so the CTA is a full-width 44px target rather than a chip wedged
     beside two lines of copy. `flex: 1 1 240px` on the copy grows its HEIGHT
     once the axis turns vertical, which inflated the banner to ~290px of mostly
     empty violet; the basis is reset to auto here. */
  .fin-lock-banner { flex-direction: column; align-items: stretch; gap: 10px; }
  .fin-lock-copy { flex: 0 0 auto; }
  .fin-lock-cta { justify-content: center; width: 100%; }
}

/* ── SEC ownership cards (Form 4 + 13F) on the Fundamental detail page ───── */
.sec-own-summary { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 6px; }
.sec-own-chip {
  font-size:11.5px; padding:4px 10px; border-radius:999px;
  background:#1a1c2e; border:1px solid #2d3148; color:#cbd5e1; font-weight:600;
}
.sec-own-chip.sec-pos { color:#10b981; border-color:rgba(16,185,129,.35); }
.sec-own-chip.sec-neg { color:#ef4444; border-color:rgba(239,68,68,.35); }
.sec-own-hint { font-size:11.5px; color:#94a3b8; line-height:1.5; margin:6px 0 10px; }
.sec-own-empty { font-size:12px; color:#94a3b8; padding:14px 0; }
.sec-own-tablewrap { overflow-x:auto; }
.sec-own-table { width:100%; min-width:520px; border-collapse:collapse; font-size:12px; }
.sec-own-table th {
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em;
  color:#94a3b8; font-weight:600; padding:6px 10px; border-bottom:1px solid #2d3148;
  background:transparent; position:static;
}
.sec-own-table td {
  padding:7px 10px; border-bottom:1px solid #1e2035; color:#e2e8f0; white-space:nowrap;
}
.sec-own-table td.sec-pos { color:#10b981; font-weight:600; }
.sec-own-table td.sec-neg { color:#ef4444; font-weight:600; }
.sec-own-sub { display:block; font-size:10.5px; color:#94a3b8; font-weight:400; }
.sec-own-tag {
  margin-left:6px; font-size:9.5px; padding:1px 5px; border-radius:4px;
  background:rgba(139,92,246,.18); color:#a78bfa; font-weight:600; vertical-align:middle;
}
/* Date-basis caption, anomaly note, and load-more counts: muted, secondary. */
.sec-own-basis { font-size:11.5px; color:#94a3b8; line-height:1.5; margin:2px 0 6px; }
.sec-own-anomaly { font-size:11.5px; color:#94a3b8; font-weight:600; line-height:1.5; margin:2px 0 8px; }
/* "Not counted" per-row flag: neutral slate, deliberately NOT the violet of the
   10b5-1 tag so the two never read as the same kind of signal. */
.sec-own-flag {
  margin-left:6px; font-size:9.5px; padding:1px 5px; border-radius:4px;
  background:#232538; color:#cbd5e1; border:1px solid #2d3148;
  font-weight:600; vertical-align:middle;
}
.sec-own-more-wrap { margin:12px 0 2px; }
.sec-own-count { font-size:11.5px; color:#94a3b8; margin:0 0 6px; }
.sec-own-more {
  font-size:12px; font-weight:600; padding:7px 14px; border-radius:8px; cursor:pointer;
  background:#1e2035; border:1px solid #2d3148; color:#a78bfa;
  transition:opacity .12s ease;
}
.sec-own-more:hover { opacity:.85; }
.sec-own-more:active { opacity:.7; }
.sec-own-more:focus-visible { outline:2px solid #a78bfa; outline-offset:2px; }
.sec-own-more-note { font-size:11px; color:#94a3b8; line-height:1.5; margin:8px 0 0; }
html[data-theme="light"] .sec-own-chip { background:#f8fafc; border-color:#e2e8f0; color:#475569; }
html[data-theme="light"] .sec-own-hint,
html[data-theme="light"] .sec-own-empty,
html[data-theme="light"] .sec-own-sub,
html[data-theme="light"] .sec-own-basis,
html[data-theme="light"] .sec-own-anomaly,
html[data-theme="light"] .sec-own-count,
html[data-theme="light"] .sec-own-more-note,
html[data-theme="light"] .sec-own-table th { color:#64748b; }
html[data-theme="light"] .sec-own-table th { border-bottom-color:#e2e8f0; }
html[data-theme="light"] .sec-own-table td { color:#1e293b; border-bottom-color:#f1f5f9; }
html[data-theme="light"] .sec-own-tag { background:rgba(139,92,246,.12); color:#7c3aed; }
html[data-theme="light"] .sec-own-flag { background:#f1f5f9; color:#475569; border-color:#e2e8f0; }
html[data-theme="light"] .sec-own-more { background:#f1f5f9; border-color:#e2e8f0; color:#6d28d9; }
html[data-theme="light"] .sec-own-more:focus-visible { outline-color:#4f46e5; }
.admin-sec-ds { display:inline-flex; align-items:center; gap:6px; font-size:12px; }
.admin-sched-note { margin:8px 0 0; font-size:12px; line-height:1.55; opacity:.85; }
@media (max-width: 768px) {
  .sec-own-table { min-width:460px; }
  .sec-own-chip { font-size:11px; padding:3px 8px; }
  .sec-own-more { display:block; width:100%; min-height:44px; }
  .ov-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap:6px; }
  .ov-tile { padding:7px 9px; }
  .ov-val { font-size:0.9rem; }
  .ov-ai-card { padding:11px 12px; }
  .ov-ai-grid { grid-template-columns: 1fr; gap:8px; }
  .ov-ann-item { flex-direction: column; gap:2px; }
  .ov-ann-date { min-width:0; padding-top:0; }
}

/* Task 13 — watchlist compact columns on a phone. Appended at the very END so
   it wins the cascade over the earlier @media(max-width:768px) blocks (a media
   query adds zero specificity, so last-in-source wins at equal specificity).
   Trims the unused horizontal padding/width so more metric columns fit at 390px.
   No colour changes, so deliberately no light-theme counterpart. */
@media (max-width: 768px) {
  #stocks-table { min-width: 0; }
  #stocks-table thead th { padding: 6px 5px; }
  #stocks-table tbody td { padding: 5px 5px; }
  #stocks-table thead th:first-child,
  #stocks-table tbody td:first-child { padding: 6px 4px; }
  .tkr-cell { gap: 2px; }
  /* Ticker symbol is NEVER truncated */
  .tkr-sym { white-space: nowrap; overflow: visible; text-overflow: clip; }
  /* Shrink the remove box, but keep the 44x44 touch target re-centred on it */
  .row-remove { width: 22px; height: 22px; }
  .row-remove::after {
    width: 44px; height: 44px;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
  }
  /* id-scoped so they beat the id-scoped desktop editor rules (#stocks-table
     .editable-*) at equal specificity via later source order */
  #stocks-table .editable-text { width: 76px; min-width: 0; max-width: 76px; }
  #stocks-table .editable-num { width: 44px; }
  #stocks-table .invested-select { width: 52px; }
  /* The panel is a top-level sibling of the table, so it follows the table's
     own 8px side margin on a phone rather than the desktop 24px gutter. */
  .ann-panel { margin: 0 8px 10px; }
  .ann-header { padding: 10px 12px; }
  .ann-item { padding: 9px 12px; }
  .ann-list { max-height: 50vh; }
  .ann-src { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Mobile table headers — appended late so it wins over the compact-column
   block above at equal specificity. A phone header row was ~26px tall and
   both the ⓘ and the select-all box were far below a thumb-sized target,
   so a tap on either usually landed on the sort instead.
   ═══════════════════════════════════════════════════════════════════════ */
@media (hover: none) {
  /* The DCF table hides its sort arrows until hover, and the block that does
     that lives further down the file than the generic rescue near the top. */
  .dcf-table thead th .sort-icon { opacity: 0.45; }
}
@media (max-width: 768px) {
  #stocks-table thead th { padding: 9px 6px; }
  .col-info { max-width: min(92vw, 340px); }
  .col-info-body { font-size: 0.8rem; }
  /* Thumb-sized without widening the column: the glyph stays small and a
     transparent ::after pads the hit area out around it. */
  .info-ico { position: relative; display: inline-block; font-size: 0.78rem; opacity: 0.8; vertical-align: middle; margin-left: 3px; }
  .info-ico::after { content: ''; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); }
  /* The select-all box grows instead of getting a ::after — a pseudo-element
     on a replaced <input> is not reliably rendered. */
  thead th .row-select { width: 20px; height: 20px; margin-right: 8px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Alerts page (#alerts-view) — sidebar ▸ Alerts.
   Frames come from .admin-card/.admin-head, which the Admin and Profile
   pages already own; everything below is either alerts-specific or a
   button style scoped to this page so the generic .btn-primary /
   .btn-ghost names cannot leak into the rest of the app.
   ═══════════════════════════════════════════════════════════════════ */
#alerts-view .btn-primary,
#alerts-view .btn-ghost,
.alert-add-btn {
  font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer;
  padding: 7px 14px; border-radius: 8px; border: 1px solid transparent;
  display: inline-flex; align-items: center; gap: 6px; line-height: 1.2;
}
#alerts-view .btn-primary { background: #4f46e5; border-color: #4f46e5; color: #fff; }
#alerts-view .btn-primary:hover { background: #4338ca; border-color: #4338ca; }
#alerts-view .btn-ghost { background: #0f1120; border-color: #2d3148; color: #cbd5e1; }
#alerts-view .btn-ghost:hover { border-color: #4c1d95; color: #c4b5fd; }
#alerts-view .btn-ghost.danger:hover { border-color: #b91c1c; color: #fca5a5; }
#alerts-view .btn-primary:disabled,
#alerts-view .btn-ghost:disabled { opacity: 0.55; cursor: default; }

#alerts-view .admin-card-sub { font-size: 0.8rem; color: #94a3b8; font-weight: 500; }
#alerts-view .admin-card-head h3 { font-size: 1.02rem; font-weight: 700; color: #e2e8f0; margin: 0; }
#alerts-view .admin-card-head { flex-wrap: wrap; align-items: baseline; margin-bottom: 12px; }

/* The notice is a reserved strip rather than a toast: a create/delete
   confirmation that overlays the list would hide the thing it confirms. */
.alerts-notice { display: none; margin-bottom: 14px; padding: 9px 13px; border-radius: 8px; font-size: 0.82rem; font-weight: 600; border: 1px solid rgba(148,163,184,0.28); background: rgba(148,163,184,0.10); color: #cbd5e1; }
.alerts-notice.show { display: block; }
.alerts-notice.good { color: #34d399; background: rgba(16,185,129,0.10); border-color: rgba(16,185,129,0.30); }
.alerts-notice.bad { color: #f87171; background: rgba(248,113,113,0.10); border-color: rgba(248,113,113,0.28); }

.alerts-loading,
.alerts-empty { padding: 14px 2px; font-size: 0.85rem; color: #94a3b8; }

.alerts-plan { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; padding: 14px 16px; border-radius: 12px; border: 1px solid #4c1d95; background: linear-gradient(135deg, rgba(76,29,149,0.28), rgba(20,22,42,0.6)); font-size: 0.84rem; color: #cbd5e1; }
.alerts-plan b { color: #e2e8f0; }
.alerts-plan-cta { white-space: nowrap; }

/* Rules list */
.alerts-rules { display: flex; flex-direction: column; gap: 8px; }
.alerts-rule { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border-radius: 10px; border: 1px solid #2d3148; background: #0f1120; }
.alerts-rule.off { opacity: 0.62; }
.alerts-rule-main { min-width: 0; }
.alerts-rule-title { font-size: 0.87rem; font-weight: 600; color: #e2e8f0; }
.alerts-rule-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; font-size: 0.75rem; color: #94a3b8; }
.alerts-rule-actions { display: flex; gap: 6px; flex-shrink: 0; }

.alerts-chip { padding: 2px 9px; border-radius: 999px; border: 1px solid #2d3148; background: #14162a; color: #94a3b8; font-size: 0.7rem; font-weight: 700; text-transform: capitalize; letter-spacing: 0.02em; }
.alerts-chip.adv { border-color: #4c1d95; background: #2d1b69; color: #c4b5fd; }
.alerts-chip.free { border-color: rgba(16,185,129,0.32); background: rgba(16,185,129,0.10); color: #34d399; }
.alerts-chip.paused { border-color: rgba(251,191,36,0.32); background: rgba(251,191,36,0.10); color: #fbbf24; }

/* Catalogue */
.alerts-catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 12px; }
.alerts-kind { display: flex; flex-direction: column; padding: 13px 14px; border-radius: 10px; border: 1px solid #2d3148; background: #0f1120; }
.alerts-kind.locked { border-style: dashed; }
.alerts-kind-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.alerts-kind-title { font-size: 0.88rem; font-weight: 700; color: #e2e8f0; }
.alerts-kind-sum { margin: 0 0 6px; font-size: 0.79rem; line-height: 1.45; color: #94a3b8; }
.alerts-kind-where { margin: 0 0 11px; font-size: 0.72rem; color: #64748b; }
.alerts-kind button { align-self: flex-start; margin-top: auto; }

/* Builder */
.alerts-form { margin-top: 16px; padding: 15px 16px; border-radius: 10px; border: 1px solid #4c1d95; background: rgba(45,27,105,0.16); }
.alerts-form h4 { margin: 0 0 12px; font-size: 0.94rem; font-weight: 700; color: #e2e8f0; }
.alerts-field { display: block; margin-bottom: 11px; max-width: 340px; }
.alerts-field > span { display: block; margin-bottom: 4px; font-size: 0.74rem; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; }
.alerts-field input[type="text"],
.alerts-field select { width: 100%; padding: 7px 10px; border-radius: 8px; border: 1px solid #2d3148; background: #0f1120; color: #e2e8f0; font: inherit; font-size: 0.83rem; }
.alerts-field input[type="text"]:focus,
.alerts-field select:focus { outline: none; border-color: #7c3aed; }
.alerts-multi { max-width: none; }
.alerts-checks { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.alerts-check { display: inline-flex; align-items: center; gap: 6px; font-size: 0.81rem; color: #cbd5e1; cursor: pointer; }
.alerts-check input { accent-color: #7c3aed; }
.alerts-hint { margin: -4px 0 11px; font-size: 0.75rem; line-height: 1.5; color: #64748b; max-width: 460px; }
.alerts-form-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* Delivery */
.alerts-sched { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 9px 0; font-size: 0.8rem; color: #94a3b8; }
.alerts-sched + .alerts-sched { border-top: 1px solid #2d3148; }
.alerts-sched button { margin-left: auto; }

/* The inline affordance other pages drop next to a chart or panel. Styled
   standalone because it renders outside #alerts-view. */
.alert-slot { margin: 6px 0 2px; }
.alert-slot:empty { display: none; }
.alert-add-btn { background: transparent; border-color: #2d3148; color: #94a3b8; font-size: 0.74rem; padding: 4px 10px; }
.alert-add-btn:hover { border-color: #4c1d95; color: #c4b5fd; }
.alert-add-btn svg { flex-shrink: 0; }

/* Alerts — light theme */
html[data-theme="light"] #alerts-view .btn-ghost { background: #ffffff; border-color: #cbd5e1; color: #475569; }
html[data-theme="light"] #alerts-view .btn-ghost:hover { border-color: #a78bfa; color: #6d28d9; }
html[data-theme="light"] #alerts-view .admin-card-head h3 { color: #1f2937; }
html[data-theme="light"] #alerts-view .admin-card-sub { color: #64748b; }
html[data-theme="light"] .alerts-notice { color: #475569; }
html[data-theme="light"] .alerts-plan { background: #f5f3ff; border-color: #ddd6fe; color: #475569; }
html[data-theme="light"] .alerts-plan b { color: #1f2937; }
html[data-theme="light"] .alerts-rule { background: #f8fafc; border-color: #e2e8f0; }
html[data-theme="light"] .alerts-rule-title { color: #1f2937; }
html[data-theme="light"] .alerts-chip { background: #ffffff; border-color: #e2e8f0; color: #64748b; }
html[data-theme="light"] .alerts-chip.adv { background: #ede9fe; border-color: #ddd6fe; color: #6d28d9; }
html[data-theme="light"] .alerts-kind { background: #f8fafc; border-color: #e2e8f0; }
html[data-theme="light"] .alerts-kind-title { color: #1f2937; }
html[data-theme="light"] .alerts-form { background: #f5f3ff; border-color: #ddd6fe; }
html[data-theme="light"] .alerts-form h4 { color: #1f2937; }
html[data-theme="light"] .alerts-field input[type="text"],
html[data-theme="light"] .alerts-field select { background: #ffffff; border-color: #e2e8f0; color: #1f2937; }
html[data-theme="light"] .alerts-check { color: #475569; }
html[data-theme="light"] .alerts-sched + .alerts-sched { border-top-color: #e2e8f0; }
html[data-theme="light"] .alerts-sched { color: #64748b; }
html[data-theme="light"] .alert-add-btn { border-color: #e2e8f0; color: #64748b; }

@media (max-width: 768px) {
  /* One column, and the row actions drop under the description rather than
     squeezing the title to a couple of characters. */
  .alerts-catalog { grid-template-columns: 1fr; }
  .alerts-rule { flex-direction: column; align-items: stretch; }
  .alerts-rule-actions { justify-content: flex-end; }
  .alerts-plan { flex-direction: column; align-items: stretch; }
  .alerts-plan-cta { justify-content: center; }
  .alerts-field { max-width: none; }
  .alerts-sched button { margin-left: 0; }
}
/* ═══════════════════════════════════════════════════════════════════════
   TOUCH TARGETS — appended at the TRUE end of the file.

   Two sizes, deliberately, because one number cannot serve both jobs in a
   dense financial grid:

     .tap-44  — WCAG 2.5.5 (AAA) / platform-HIG thumb size. For controls a
                reader ACTS with: mode toggles, region and range pickers,
                column chips, close buttons.
     .tap-24  — WCAG 2.5.8 Target Size (Minimum, AA). For controls that live
                INSIDE a table row, where a 44px box would multiply the row
                height and destroy the density the table exists to provide.

   Two mechanisms, also deliberately:

     (a) A transparent, centred ::after halo, for an ISOLATED small glyph
         (the ⓘ, a card ×). It enlarges the activation area without widening
         the column. This is the pattern .row-remove proved; it is reused,
         not reinvented.
     (b) A real min-height, for ADJACENT SIBLINGS (button groups, chip rows).
         A 44px halo on neighbouring buttons would OVERLAP, and the tap would
         land on whichever pseudo-element painted last — i.e. the halo would
         actively cause the mis-taps it is meant to prevent. Growing the box
         is the only correct answer there.

   Gated on max-width, matching the convention the rest of this file (and its
   pinned tests) already use: a `hover: none` gate does not match headless
   Chromium at a 390px viewport, so the existing touch tests would go quiet
   rather than fail.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* (a) Halo — isolated glyph controls. */
  .tap-44, .info-ico, .vis-card-x { position: relative; }
  .tap-44::after, .info-ico::after, .vis-card-x::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }

  /* (b) Real box — adjacent siblings in a row. */
  .tpl-select,
  .tpl-btn,
  .region-toggle .region-btn,
  .price-range-btn,
  .col-chip,
  .wlbar-chip,
  .fin-chg-toggle,
  .fin-tpl-chip,
  .fin-tpl-select,
  .fin-tpl-btn,
  .fin-tpl-name,
  .tour-btn {
    min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* (b2) Icon-only controls that are square by design. These are the primary
         mobile affordances — the nav burger and the header search toggle are how
         a phone reader reaches every other page — yet they shipped at 34px.
         Squared off rather than haloed because each is already an isolated,
         visibly-bordered box, so growing it reads as intentional. `#btn-guide`
         carries its padding in an inline style, which a min-height still wins
         over because inline styles set no height. */
  .app-nav-burger,
  .header-search-toggle,
  #notif-bell,
  .wlbar-add {
    width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
  }
  #btn-guide { min-height: 44px; }

  /* (c) In-row controls: AA minimum, not thumb size — see the note above.
         `thead th .row-select` is listed explicitly: the earlier mobile block
         sets it at (0,1,2) specificity, which a bare `.row-select` loses to. */
  .tap-24, .row-select, thead th .row-select { width: 24px; height: 24px; }
  .mkt-select { min-height: 24px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   NOTIFICATIONS — header bell, badge, and the drawer it opens
   ═══════════════════════════════════════════════════════════════════════
   Dark is the base ruleset and light is an explicit twin, exactly as the rest
   of this file works. The twins carry (0,2,1) specificity against the base's
   (0,1,0), so they win wherever they sit — they are kept next to what they
   override so the pair can never drift apart.                              */

  /* ── Bell ─────────────────────────────────────────────────────────── */
  /* Same box as .header-search-toggle so the header tail reads as one set of
     controls; `position:relative` is what the badge is anchored to. */
  .notif-bell {
    position: relative; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    background: #1e2035; border: 1px solid #2d3148; border-radius: 8px;
    padding: 8px; color: #94a3b8; cursor: pointer;
  }
  .notif-bell:hover { border-color: #4f46e5; color: #a78bfa; }
  .notif-bell:focus-visible { outline: 2px solid #a78bfa; outline-offset: -2px; }
  html[data-theme="light"] .notif-bell { background: #ffffff; border-color: #cbd5e1; color: #475569; }
  html[data-theme="light"] .notif-bell:hover { background: #f1f5f9; border-color: #4f46e5; color: #4338ca; }
  html[data-theme="light"] .notif-bell:focus-visible { outline-color: #4f46e5; }

  /* A count, not a dot: "you have some" is not an answer anyone can act on.
     The ring separates the badge from the bell's own border at any zoom. */
  .notif-badge {
    position: absolute; top: -4px; right: -4px;
    min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px;
    font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
    background: #dc2626; color: #ffffff; box-shadow: 0 0 0 2px #1a1d2e;
  }
  /* `color` is restated here, not inherited from the base rule: app.css declares
     `html[data-theme="light"] header span { color: #64748b }` at (0,2,1), which
     beats `.notif-badge { color: #fff }` at (0,1,0) — the badge is a <span>
     inside <header>. Without this the unread count rendered slate-on-red at
     1.36:1. #ffffff on #b91c1c is 6.47:1. */
  html[data-theme="light"] .notif-badge { background: #b91c1c; color: #ffffff; box-shadow: 0 0 0 2px #ffffff; }

  /* A signed-out reader on a public deep link gets the whole shell (see
     enterPublicApp() in app.js, which is what sets body.public-mode). The bell
     was live for them and /api/alerts/notifications correctly 401s, so the only
     thing looking at it produced was "something went wrong on our side".
     openNotifDrawer() carries the keyboard/programmatic twin of this rule. */
  body.public-mode #notif-bell { display: none; }

  /* ── Backdrop + drawer shell ──────────────────────────────────────── */
  /* 1200/1201 clears the bottom nav (900) and the mobile nav sheet (940) and
     stays under the welcome overlay (2000) and the tour (3000). */
  .notif-backdrop {
    position: fixed; inset: 0; z-index: 1200;
    background: rgba(0, 0, 0, 0.5);
    opacity: 1; transition: opacity 0.2s ease;
  }
  .notif-backdrop.hidden { display: none; }
  html[data-theme="light"] .notif-backdrop { background: rgba(15, 23, 42, 0.35); }

  /* Confirm sits ABOVE the drawer: "Mark all as read?" is asked from inside it,
     and a question rendered behind its own trigger is a question nobody
     answers. (.modal-backdrop is z-index 200 for every other caller.) */
  #confirm-modal { z-index: 1300; }

  .notif-drawer {
    position: fixed; right: 0; top: 0;
    height: 100vh; height: 100dvh;
    width: min(380px, 100vw);
    z-index: 1201;
    display: flex; flex-direction: column;
    background: #13151f; border-left: 1px solid #2d3148;
    transform: translateX(100%); transition: transform 0.2s ease;
    overflow: hidden;
  }
  /* display:flex above beats the UA's [hidden] { display: none }, which would
     leave the closed drawer rendered off-screen, in the a11y tree and in the
     tab order — a keyboard user would Tab into "Mark all read" on a drawer
     they never opened. The attribute has to win explicitly. */
  .notif-drawer[hidden] { display: none; }
  .notif-drawer.open { transform: translateX(0); }
  .notif-drawer:focus-visible { outline: 2px solid #a78bfa; outline-offset: -2px; }
  html[data-theme="light"] .notif-drawer { background: #ffffff; border-left-color: #e2e8f0; }
  html[data-theme="light"] .notif-drawer:focus-visible { outline-color: #4f46e5; }
  /* The page behind must not scroll under the drawer — but position:fixed on
     body would throw away the reader's scroll position. */
  html.notif-open, html.notif-open body { overflow: hidden; }

  @media (min-width: 769px) and (max-width: 1023px) {
    .notif-drawer { width: 340px; }
  }

  /* ── Head ─────────────────────────────────────────────────────────── */
  .notif-drawer-head {
    position: sticky; top: 0; z-index: 1;
    display: flex; align-items: center; gap: 8px;
    min-height: 56px; padding: 8px 8px 8px 16px;
    background: #13151f; border-bottom: 1px solid #2d3148;
  }
  .notif-drawer-head h2 { flex: 1 1 auto; min-width: 0; font-size: 0.95rem; font-weight: 700; color: #e2e8f0; }
  html[data-theme="light"] .notif-drawer-head { background: #ffffff; border-bottom-color: #e2e8f0; }
  html[data-theme="light"] .notif-drawer-head h2 { color: #1f2937; }

  .notif-mark-all {
    flex: 0 0 auto; background: none; border: none; padding: 8px;
    font-size: 0.8rem; color: #a78bfa; cursor: pointer; min-height: 44px;
  }
  .notif-mark-all:hover { color: #c4b5fd; text-decoration: underline; }
  .notif-mark-all:disabled { opacity: 0.6; cursor: default; text-decoration: none; }
  .notif-mark-all:focus-visible { outline: 2px solid #a78bfa; outline-offset: -2px; }
  html[data-theme="light"] .notif-mark-all { color: #4f46e5; }
  html[data-theme="light"] .notif-mark-all:hover { color: #3730a3; }
  html[data-theme="light"] .notif-mark-all:focus-visible { outline-color: #4f46e5; }

  /* LAST in the head, so Tab runs title → mark all → close → list. */
  .notif-close {
    flex: 0 0 auto; width: 44px; height: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: none; color: #94a3b8; cursor: pointer; border-radius: 8px;
  }
  .notif-close:hover { background: #1e2035; color: #e2e8f0; }
  .notif-close:focus-visible { outline: 2px solid #a78bfa; outline-offset: -2px; }
  html[data-theme="light"] .notif-close { color: #475569; }
  html[data-theme="light"] .notif-close:hover { background: #f1f5f9; color: #1f2937; }
  html[data-theme="light"] .notif-close:focus-visible { outline-color: #4f46e5; }

  /* ── List + rows ──────────────────────────────────────────────────── */
  .notif-list { flex: 1 1 auto; overflow-y: auto; list-style: none; margin: 0; padding: 0; -webkit-overflow-scrolling: touch; }

  /* The link and the mark-read button are SIBLINGS: nesting a button inside an
     anchor gives two overlapping hit targets and a tap that misroutes. */
  .notif-row {
    display: flex; align-items: stretch;
    border-bottom: 1px solid #1e2035;
    border-left: 3px solid transparent;
    overflow: hidden;
  }
  .notif-row:last-child { border-bottom: none; }
  html[data-theme="light"] .notif-row { border-bottom-color: #e2e8f0; }

  /* Tone is a rail AND a glyph — colour is never the only signal. */
  .notif-row.tone-good { border-left-color: #34d399; }
  .notif-row.tone-bad  { border-left-color: #f87171; }
  .notif-row.tone-info { border-left-color: #60a5fa; }
  .notif-row.tone-good .notif-tone { color: #34d399; }
  .notif-row.tone-bad  .notif-tone { color: #f87171; }
  .notif-row.tone-info .notif-tone { color: #60a5fa; }
  html[data-theme="light"] .notif-row.tone-good { border-left-color: #047857; }
  html[data-theme="light"] .notif-row.tone-bad  { border-left-color: #b91c1c; }
  html[data-theme="light"] .notif-row.tone-info { border-left-color: #2563eb; }
  html[data-theme="light"] .notif-row.tone-good .notif-tone { color: #047857; }
  html[data-theme="light"] .notif-row.tone-bad  .notif-tone { color: #b91c1c; }
  html[data-theme="light"] .notif-row.tone-info .notif-tone { color: #2563eb; }

  .notif-link {
    flex: 1 1 auto; min-width: 0; min-height: 72px;
    padding: 12px 8px 12px 14px;
    display: flex; flex-direction: column; gap: 4px;
    text-decoration: none; color: inherit;
  }
  .notif-link:hover { background: #1a1d2e; }
  .notif-link:focus-visible { outline: 2px solid #a78bfa; outline-offset: -2px; }
  /* Opacity, never transform: a transform on a row inside a sticky-headed
     scroller repaints the header with it. */
  .notif-link:active, .notif-mark-read:active { opacity: 0.72; }
  html[data-theme="light"] .notif-link:hover { background: #f8fafc; }
  html[data-theme="light"] .notif-link:focus-visible { outline-color: #4f46e5; }

  .notif-mark-read {
    flex: 0 0 44px; width: 44px; min-height: 44px; align-self: center;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: none; color: #94a3b8; cursor: pointer; border-radius: 8px;
  }
  .notif-mark-read:hover { background: #1e2035; color: #e2e8f0; }
  .notif-mark-read:focus-visible { outline: 2px solid #a78bfa; outline-offset: -2px; }
  html[data-theme="light"] .notif-mark-read { color: #475569; }
  html[data-theme="light"] .notif-mark-read:hover { background: #f1f5f9; color: #1f2937; }
  html[data-theme="light"] .notif-mark-read:focus-visible { outline-color: #4f46e5; }

  .notif-meta { display: flex; align-items: center; gap: 8px; }
  /* Neutral for all seven kinds: the pill says WHAT fired, the tone says how it
     went, and colouring both would say the same thing twice — badly. */
  .notif-kind {
    font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.04em;
    background: #1e2035; color: #94a3b8; border-radius: 4px; padding: 1px 6px;
    flex: 0 0 auto;
  }
  html[data-theme="light"] .notif-kind { background: #f1f5f9; color: #475569; }
  .notif-ticker {
    font-size: 0.75rem; font-weight: 700; color: #e2e8f0;
    font-variant-numeric: tabular-nums;
    max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  html[data-theme="light"] .notif-ticker { color: #1f2937; }
  .notif-time { font-size: 0.6875rem; color: #94a3b8; margin-left: auto; flex: 0 0 auto; }
  html[data-theme="light"] .notif-time { color: #475569; }

  .notif-title {
    font-size: 0.875rem; font-weight: 600; color: #e2e8f0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  html[data-theme="light"] .notif-title { color: #1f2937; }
  .notif-detail {
    font-size: 0.75rem; color: #94a3b8;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  }
  html[data-theme="light"] .notif-detail { color: #475569; }
  /* A lone detail line gets the same two-line budget two short lines get —
     otherwise one long sentence clamps at one line and is cut mid-word while
     the row keeps the vertical space it would have used. */
  .notif-title + .notif-detail:last-child { -webkit-line-clamp: 2; }

  /* Leaving: the row collapses from its measured height so the rows below do
     not jump. The badge is decremented at the START of this, not at its end. */
  .notif-row.leaving {
    opacity: 0; max-height: 0; padding-block: 0; border-bottom-width: 0;
    transition: opacity 0.12s, max-height 0.18s, padding 0.18s;
  }

  /* ── Loading / empty / error ──────────────────────────────────────── */
  /* `flex: 1 1 auto` because .notif-row is a flex row: without it the skeleton
     shrink-to-fits its (empty) content to 0px wide and the loading state is
     three invisible bars — a blank drawer during every fetch. */
  .notif-skeleton { flex: 1 1 auto; min-height: 72px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
  .notif-skeleton-bar {
    height: 10px; border-radius: 5px; background: #1e2035;
    background-image: linear-gradient(90deg, #1e2035 0%, #2d3148 50%, #1e2035 100%);
    background-size: 200% 100%;
    animation: notif-shimmer 1.2s linear infinite;
  }
  .notif-skeleton-bar.w60 { width: 60%; }
  .notif-skeleton-bar.w85 { width: 85%; }
  html[data-theme="light"] .notif-skeleton-bar {
    background: #e2e8f0;
    background-image: linear-gradient(90deg, #e2e8f0 0%, #f1f5f9 50%, #e2e8f0 100%);
  }
  @keyframes notif-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
  /* Reduced motion still needs a *placeholder*, not a frozen gradient: three
     motionless bars read as a stalled fetch. A slow opacity breath, no travel. */
  @keyframes notif-skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

  .notif-empty, .notif-error { padding: 32px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .notif-empty svg { opacity: 0.4; }
  .notif-empty h3, .notif-error h3 { font-size: 0.95rem; font-weight: 600; color: #e2e8f0; }
  .notif-empty p, .notif-error p { font-size: 0.8rem; color: #94a3b8; }
  html[data-theme="light"] .notif-empty h3, html[data-theme="light"] .notif-error h3 { color: #1f2937; }
  html[data-theme="light"] .notif-empty p, html[data-theme="light"] .notif-error p { color: #475569; }
  .notif-cta {
    min-height: 44px; padding: 0 16px; margin-top: 4px;
    background: #1e2035; border: 1px solid #2d3148; border-radius: 8px;
    color: #a78bfa; font-size: 0.8rem; cursor: pointer;
  }
  .notif-cta:hover { border-color: #4f46e5; }
  .notif-cta:focus-visible { outline: 2px solid #a78bfa; outline-offset: -2px; }
  html[data-theme="light"] .notif-cta { background: #ffffff; border-color: #cbd5e1; color: #4f46e5; }
  html[data-theme="light"] .notif-cta:hover { background: #f1f5f9; border-color: #4f46e5; }
  html[data-theme="light"] .notif-cta:focus-visible { outline-color: #4f46e5; }

  /* The truncation footer. The route pages at 50; this line is how a reader
     with more than that can tell. Deliberately plain text, not a control —
     there is no "load more" and pretending otherwise would be worse. */
  .notif-more {
    padding: 12px 16px 16px; text-align: center;
    font-size: 0.75rem; color: #94a3b8;
    border-top: 1px solid #2d3148;
  }
  html[data-theme="light"] .notif-more { color: #475569; border-top-color: #e2e8f0; }

  /* The narrowest phones: "Notifications" + "Mark all read" + ✕ has to stay on
     ONE line, or the head grows a second row that the list then scrolls under. */
  @media (max-width: 480px) {
    .notif-drawer-head { flex-wrap: nowrap; }
    .notif-drawer-head h2 { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .notif-mark-all { flex: 0 0 auto; font-size: 0.75rem; padding: 8px 4px; }
  }

  /* The card an alert deep link pointed at. Transient (JS drops the class), and
     deliberately a ring rather than a colour change: the chart inside keeps its
     own palette. */
  .chart-card.chart-focus {
    outline: 2px solid #a78bfa; outline-offset: 4px; border-radius: 8px;
    transition: outline-color 0.3s ease;
  }
  html[data-theme="light"] .chart-card.chart-focus { outline-color: #4f46e5; }

  /* Motion is decoration here; the drawer still has to arrive. */
  @media (prefers-reduced-motion: reduce) {
    .notif-drawer { transform: none; opacity: 0; transition: opacity 0.12s ease; }
    .notif-drawer.open { transform: none; opacity: 1; }
    /* NOT `animation: none` — that leaves three motionless gradient bars that
       read as a hung request. A skeleton is an indeterminate busy indicator, so
       it is exempted from the global reduce clamp exactly like .fin-spin is
       (the !important pair below beats `*{animation-duration:0.01ms!important}`
       on specificity). The travelling sheen is dropped — flat fill, no lateral
       motion — and replaced by a slow, gentle opacity breath. The light twin is
       restated because `html[data-theme="light"] .notif-skeleton-bar` is (0,2,0)
       and would otherwise keep its gradient. */
    .notif-skeleton-bar,
    html[data-theme="light"] .notif-skeleton-bar {
      background-image: none;
      animation-name: notif-skeleton-pulse;
      animation-timing-function: ease-in-out;
      animation-duration: 2.4s !important;
      animation-iteration-count: infinite !important;
    }
    .notif-row.leaving { transition: none; }
  }

  /* Full-bleed on a phone: a 380px panel on a 390px screen is a panel with a
     useless 10px sliver of page beside it. This block MUST stay after the base
     `.notif-drawer { width: min(380px, 100vw) }` — equal specificity, so source
     order is what decides.

     Scoped to 600px, NOT to the 768px breakpoint: at 768 full-bleed gave the
     .notif-detail box 698px — 108 characters per line, the only breakpoint
     outside the 45–75 band and the only one where the 2-line clamp never
     engaged — while taking 388px of page a tablet did not need to lose. Above
     600 the base min(380px, 100vw) applies, which measures 380px at 768. */
  @media (max-width: 600px) {
    .notif-drawer { width: 100vw; }
    .notif-drawer-head { padding-left: 14px; }
  }

/* ═══════════════════════════════════════════════════════════════════════
   ACCESSIBILITY UTILITIES
   ═══════════════════════════════════════════════════════════════════════ */

/* Visually hidden, still announced. The clip-path pair (not display:none and
   not visibility:hidden) is what keeps the node in the accessibility tree. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* Skip link — off-screen until focused, then a real, visible control. It sits
   above every other layer because the header ribbon is sticky and the tour
   backdrop is z-index 3000. #app-body carries tabindex="-1" so following the
   link MOVES FOCUS rather than only scrolling. */
.skip-link {
  position: fixed; top: 8px; left: 8px;
  z-index: 10000;
  transform: translateY(-200%);
  background: #4f46e5; color: #ffffff;
  font-size: 0.85rem; font-weight: 600;
  padding: 10px 16px; border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.skip-link:focus { transform: translateY(0); outline: 2px solid #ffffff; outline-offset: 2px; }
/* The target is only focusable to receive the skip; it is not an interactive
   control, so it must not paint a focus ring of its own. */
.app-body:focus { outline: none; }
@media (prefers-reduced-motion: no-preference) {
  .skip-link { transition: transform 0.12s ease; }
}
/* A sortable <th> is now focusable (tabindex=0 + Enter/Space in tables.js), so
   it needs a visible focus ring. Scoped to :focus-visible so a mouse click on
   a header does not leave a ring behind. */
thead th:focus-visible {
  outline: 2px solid #a78bfa;
  outline-offset: -2px;
  border-radius: 3px;
}
html[data-theme="light"] thead th:focus-visible { outline-color: #4f46e5; }
/* The sort arrow is hover-revealed on the wide tables; a keyboard reader never
   hovers, so reveal it on focus too or the sorted column is unmarked for them. */
thead th:focus-visible .sort-icon,
.dcf-table thead th:focus-visible .sort-icon { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════════
   TYPE FLOOR — 0.75rem (12px) for text a reader must READ.

   33 declarations below 0.7rem were raised to 0.75rem (the smallest was
   0.6rem / 9.6px, on the signed-out marketing page). 23 are deliberately
   left below the floor, in three groups — none of them prose:

     · 13 in the ADMIN CONSOLE (.admin-*), which is owner-only and gated by
       an exact-match _is_admin() check. It deserves the same pass, but it is
       not a reader-facing surface and it carries its own dense tables.
     · GLYPHS AND COUNT BADGES that are decorative or duplicated in text
       elsewhere: .info-ico (has aria-label + a 44px target), .mkt-badge /
       .mkt-select (a $/₹ marker whose meaning is in the column header),
       #col-count, .col-chip-locked::after (🔒), .ai-list li::before (•).
     · FOUR DENSE-TABLE HEADER RULES (.screener-table/.pf-mf-table/
       .charting-table thead th and the density-compact variants) whose sizes
       are load-bearing for the mobile column budget and are pinned by
       tests/test_wide_table_density.py and test_first_col_compact.py.
       Raising these is a layout decision, not an accessibility patch — it
       belongs with the phone card-view work, not here.
   ═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
   MOBILE BOTTOM NAVIGATION  (Phase 2)
   ═══════════════════════════════════════════════════════════════════════
   Below 768px the sidebar is removed entirely and navigation lived behind a
   hamburger in the top-LEFT corner — the single hardest point on a phone for a
   right thumb. This bar puts the four highest-intent destinations in the
   thumb zone and delegates the rest to "More", which opens the *same*
   #app-nav-menu drawer the burger opens, so there is one menu with two entry
   points rather than two menus to keep in sync.

   ⚠️ THIS BLOCK MUST STAY LAST. `@media` adds no specificity, so the 20
   separate max-width:768px blocks in this file are resolved purely by source
   order. Anything appended below here silently outranks all of them, and
   several earlier blocks carry their own "must stay last" comments written
   when they were the last one. tests/test_bottom_nav.py enumerates the blocks
   and fails if a new one lands after this one — move the new rules INTO an
   existing block instead of appending a seventeenth.
   ═══════════════════════════════════════════════════════════════════════ */

.bottom-nav { display: none; }

@media (max-width: 768px) {
  /* Height is published as a custom property because three different things
     need to reserve room for the bar: the app body, the tour tooltip, and
     fitTableWrapper() in tables.js (which reads it back off this element). */
  .bottom-nav {
    --bnav-h: 56px;
    display: flex; align-items: stretch; justify-content: space-around;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    height: calc(var(--bnav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #13151f; border-top: 1px solid #1e2035;
  }
  html[data-theme="light"] .bottom-nav { background: #ffffff; border-top-color: #e2e8f0; }

  .bnav-item {
    flex: 1 1 0; min-width: 0; min-height: 44px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 6px 2px; border: 0; background: none; cursor: pointer;
    color: #94a3b8; font-size: 0.68rem; font-weight: 600; line-height: 1;
    position: relative; -webkit-tap-highlight-color: transparent;
  }
  html[data-theme="light"] .bnav-item { color: #475569; }
  .bnav-icon { display: flex; align-items: center; justify-content: center; height: 20px; font-size: 1rem; }
  /* The label is the only sub-12px type left in the app that a reader is meant
     to read. It is exempt from the 12px floor on purpose: an icon+label pair in
     a 5-up bar cannot carry 12px text at 320px without truncating, and the
     label is a redundant hint — the icon and aria-label both name the
     destination, and the target itself is a full 44px. */
  .bnav-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .bnav-item.active { color: #a78bfa; }
  html[data-theme="light"] .bnav-item.active { color: #6d28d9; }
  /* Colour alone is never the only signal (WCAG 1.4.1) — the active tab also
     grows a 2px top rail, mirroring the sidebar's left accent bar. */
  .bnav-item.active::before {
    content: ''; position: absolute; top: 0; left: 22%; right: 22%; height: 2px;
    border-radius: 0 0 2px 2px; background: currentColor;
  }
  .bnav-item:focus-visible { outline: 2px solid #a78bfa; outline-offset: -3px; border-radius: 8px; }
  html[data-theme="light"] .bnav-item:focus-visible { outline-color: #4f46e5; }

  /* Give the bar its own room. Without this the last table row, the tour
     tooltip and any page footer sit underneath a fixed bar and cannot be
     reached. */
  .app-body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }

  /* "More" is at the BOTTOM-right, so the drawer must open there too — the
     burger's top-left anchor would fly the menu to the opposite corner from
     the finger that asked for it. Re-anchored as a bottom sheet; the burger's
     own top-left opening is untouched. */
  .app-nav-menu.from-bottom {
    position: fixed; top: auto; left: 8px; right: 8px; width: auto; min-width: 0;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 8px);
    /* .user-menu is z-index 200, which is *below* the bar — a sheet the bar
       covers is worse than no sheet at all. */
    z-index: 940;
    max-height: calc(100vh - 56px - 24px); overflow-y: auto;
  }

  /* The PWA install banner is fixed at bottom:12px with z-index 115, so the
     bar would both cover it and sit on top of it. Lift it clear. */
  .install-banner {
    bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 12px);
    z-index: 950;
  }

  /* Same collision, and it matters more now that the toast is the app's error
     channel: an error the bar half-covers is an error the reader never reads.
     z-index 9999 already clears the bar, so only the offset is needed. */
  .share-toast {
    bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 12px);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   INTERACTION FEEDBACK  (Phase 3)
   ═══════════════════════════════════════════════════════════════════════
   Audited on the rendered app rather than read out of this file. The finding:
   310 selectors carry a :hover state and exactly ONE carried :active. A touch
   screen has no hover, so on a phone practically every control in the app was
   completely silent under a finger — the reader taps, nothing acknowledges the
   tap, and the instinct is to tap again.

   :active fires for a mouse press as well as a touch, so this is not a
   mobile-only patch; a desktop click gains the same acknowledgement.

   ⚠️ Feedback is OPACITY-led, not transform-led, on the blanket selectors.
   A transform creates a containing block for fixed descendants and silently
   breaks `position: sticky` on an ancestor chain, and these selectors reach
   most of a 4,600-line stylesheet. The scale is applied only to the named nav
   controls, whose context is known.

   NOTE ON ORDER: this block sits after the bottom-nav block, which is fine —
   the "must stay last" rule there is about competing max-width:768px blocks,
   and nothing below adds one. tests/test_bottom_nav.py enforces exactly that.
   ═══════════════════════════════════════════════════════════════════════ */

/* `button:not(:disabled):active` is (0,2,1) — :not() contributes its argument's
   specificity — so it outranks the single-class :hover rules it complements
   without needing !important. */
button:not(:disabled):not([aria-disabled="true"]):active,
[role="button"]:not([aria-disabled="true"]):active,
summary:active {
  opacity: 0.72;
}

/* Named nav controls additionally take a slight scale: they are small, isolated
   and known not to sit on a sticky ancestor. */
.sidebar-item:active, .mnav-item:active, .bnav-item:active,
.wnav-link:active, .row-menu-item:active, .add-suggest-item:active {
  transform: scale(0.97);
}

/* An input/select showed NO computed change at all on keyboard focus — the
   search field in both themes and the market select in light. A reader
   tabbing through the header simply lost their place. */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #a78bfa;
  outline-offset: 1px;
}
html[data-theme="light"] input:focus-visible,
html[data-theme="light"] select:focus-visible,
html[data-theme="light"] textarea:focus-visible { outline-color: #4f46e5; }

/* ═══════════════════════════════════════════════════════════════════════
   REDUCED MOTION  (Phase 3)
   ═══════════════════════════════════════════════════════════════════════
   91 transition declarations and 26 animations existed against exactly one
   guard (.fin-spin). For a reader with vestibular sensitivity that is the
   difference between a usable app and an unusable one.

   ⚠️ Deliberately NOT a blanket `animation: none`. A progress spinner frozen
   mid-rotation reads as "the app has hung", which is a worse outcome than the
   motion it removes. Indeterminate busy indicators are exempted and keep
   turning; everything decorative stops. Transitions collapse to ~0 rather than
   being removed, so any style that is applied *through* a transition still
   lands at its final value.
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  /* Busy indicators are exempt — see above. */
  .fin-spin, .spinner, .loading-spinner, .netguard-spin, .btn-spinner,
  [class*="spin"], [class*="loader"] {
    animation-duration: 1.2s !important;
    animation-iteration-count: infinite !important;
  }
  /* The press feedback is a state change, not motion; keep it instant. */
  .sidebar-item:active, .mnav-item:active, .bnav-item:active,
  .wnav-link:active, .row-menu-item:active, .add-suggest-item:active {
    transform: none;
  }
}
/* ═══════════════════════════════════════════════════════════════════════
   STOCK DETAIL — Valuation / Key-metrics empty, loading and failed states
   ═══════════════════════════════════════════════════════════════════════
   Appended deliberately: this block carries NO `max-width: 768px` media
   query, so it cannot disturb the source-order-sensitive 768px cascade that
   tests/test_bottom_nav.py pins.

   Replaces an inline `<p style="color:#64748b;padding:24px">`. Measured on
   the rendered page, that inline colour was 3.97:1 on the dark surface
   (rgb(15,17,23)) — below the 4.5:1 body-text floor — and, being inline,
   no html[data-theme="light"] rule could ever correct it. These classes use
   the settled muted tokens instead: #94a3b8 dark (7.36:1) / #475569 light
   (7.58:1 on #f8fafc).

   The old paragraph also collapsed the panel to a 69px strip of 16px
   default-serif-scale text stranded in its top-left corner, directly under
   three valuation controls. Centring it in a 180px-min box makes it read as
   a state of the panel rather than a stray sentence.

   The in-flight ring is the .screener-loading idiom already used for this
   app's other network waits: a provider fetch runs for seconds, and a
   motionless line of text in an empty panel reads as "hung", not "working".
   [class*="spin"] in the reduced-motion block above keeps it turning on
   purpose — a frozen progress ring is the worse outcome. See the comment
   on that block.
   ═══════════════════════════════════════════════════════════════════════ */
.detail-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center;
  min-height: 180px; padding: 32px 20px; gap: 10px;
  color: #94a3b8; font-size: 0.9rem; line-height: 1.5;
}
.detail-empty-text { max-width: 46ch; margin: 0; }
.detail-spinner {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  border: 2px solid rgba(167,139,250,0.30); border-top-color: #a78bfa;
  animation: screener-spin 0.7s linear infinite;
}
/* The caption under the Key metrics grid is a line of text, not a panel, so
   the ring sits inline with it rather than above it. */
.detail-spinner-inline {
  display: inline-block; width: 13px; height: 13px; border-width: 2px;
  vertical-align: -2px; margin-right: 7px;
}
/* Retry is the only genuinely actionable CTA here, so it only appears on the
   state that can be retried. NOT .btn-primary: that class has no global rule
   in this stylesheet (all 17 occurrences are scoped to #alerts-view), so it
   would ship as raw OS chrome outside that view. Colours match .ov-ai-gen,
   which is the established secondary action on this page. min-height is 44px
   unconditionally rather than behind a 768px query, for the same cascade
   reason as above. */
.detail-retry-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 8px 18px; border-radius: 8px;
  border: 1px solid #4338ca; background: #312e81; color: #c7d2fe;
  font-family: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer;
}
.detail-retry-btn:hover { background: #3730a3; color: #e0e7ff; }
/* Touch has no :hover. The Phase 1 floor already presses every button
   (`button:not(:disabled):active { opacity: .72 }`, specificity (0,2,1)), so
   no :active is repeated here — it would lose to it anyway. What is NOT
   covered globally is a focus ring on a button, so it is stated explicitly
   with the settled focus tokens. */
.detail-retry-btn:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }
html[data-theme="light"] .detail-empty { color: #475569; }
html[data-theme="light"] .detail-retry-btn:focus-visible { outline-color: #4f46e5; }
html[data-theme="light"] .detail-spinner {
  border-color: rgba(79,70,229,0.28); border-top-color: #4f46e5;
}
html[data-theme="light"] .detail-retry-btn {
  background: #e0e7ff; color: #3730a3; border-color: #c7d2fe;
}