* { 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"] .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"] .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; }
  /* Base flag styling (region selector + flyout override sizes locally). */
  .region-flag { font-size: 1.1em; margin-right: 2px; }
  html[data-theme="light"] .btn-refresh, html[data-theme="light"] .btn-news, html[data-theme="light"] .btn-remove { background: #ffffff; border-color: #cbd5e1; color: #64748b; }
  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 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"] .news-panel { background: #ffffff; border: 1px solid #cbd5e1; }
  html[data-theme="light"] .news-header { background: #f1f5f9; border-bottom-color: #e2e8f0; }
  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 { display: flex; align-items: center; gap: 8px; background: #1e2035; border: 1px solid #2d3148; border-radius: 8px; padding: 8px 12px; flex: 1; max-width: 320px; }
  .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; }
  .col-picker.open { display: block; }
  .col-picker-header { display: flex; align-items: center; justify-content: space-between; 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.65rem; color: #475569; background: none; border: none; cursor: pointer; padding: 0; }
  .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.72rem; cursor: pointer; color: #64748b; 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 { margin-left: 4px; opacity: 0.4; }
  thead th.sorted .sort-icon { opacity: 1; color: #a78bfa; }
  /* Small "info" cue on column headers that carry a tooltip (the th title). */
  .info-ico { font-style: normal; font-size: 0.66rem; opacity: 0.4; cursor: help; vertical-align: super; margin-left: 1px; }
  thead th:hover .info-ico { opacity: 0.85; color: #a78bfa; }
  html[data-theme="light"] thead th:hover .info-ico { color: #4f46e5; }
  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 { background: none; border: 1px solid #2d3148; border-radius: 5px; padding: 3px 7px; cursor: pointer; color: #64748b; font-size: 0.7rem; transition: all 0.15s; }
  .btn-refresh:hover { border-color: #4f46e5; color: #a78bfa; }
  .btn-refresh.spinning { animation: spin 0.8s linear infinite; pointer-events: none; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .btn-news { background: none; border: 1px solid #2d3148; border-radius: 5px; padding: 3px 7px; cursor: pointer; color: #64748b; font-size: 0.7rem; transition: all 0.15s; }
  .btn-news:hover { border-color: #0ea5e9; color: #38bdf8; }
  .btn-news.active { border-color: #0ea5e9; color: #38bdf8; background: #0c1a26; }
  .btn-remove { background: none; border: 1px solid #2d3148; border-radius: 5px; padding: 3px 7px; cursor: pointer; color: #64748b; font-size: 0.7rem; transition: all 0.15s; }
  .btn-remove:hover { border-color: #ef4444; color: #f87171; }
  .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; }
  .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: #475569; }
  .news-loading { padding: 32px; text-align: center; color: #475569; }
  .news-error { padding: 32px; text-align: center; color: #f87171; }

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

  /* ── 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: #64748b; border: 1px solid #2d3148; }
  .tour-btn-skip:hover { border-color: #475569; color: #94a3b8; }
  .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.65rem; background: #312e81; color: #a78bfa; 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; }
  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-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-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); }

  .welcome-footer { margin-top: 24px; font-size: 0.74rem; 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.68rem; 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); }

  @media (max-width: 720px) {
    .welcome-hero { padding: 20px 14px; }
    .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-guide-preview { padding: 4px 16px 56px; }
    .welcome-guide-card { flex-basis: 208px; }
  }

  /* ---------- Mobile / small screens ---------- */
  @media (max-width: 768px) {
    /* Header: compact, wraps to 2 rows, action buttons become icon-only */
    header { padding: 10px 12px; gap: 8px 10px; flex-wrap: wrap; }
    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.74rem; }
    #btn-guide {
      font-size: 0 !important; gap: 0 !important; padding: 8px !important;
    }
    .user-chip { padding: 4px 8px 4px 4px; }
    .user-chip-name { max-width: 84px; font-size: 0.74rem; }

    /* Sidebar: icon rail by default; expands as an overlay drawer (doesn't push
       content — the body/header stay at the 48px rail offset). */
    .sidebar.collapsed { width: 48px; }
    .sidebar:not(.collapsed) { width: 200px; z-index: 110; box-shadow: 4px 0 24px rgba(0,0,0,0.45); }
    .app-body, .app-body.sidebar-collapsed { margin-left: 48px; }
    header, header.sidebar-collapsed { margin-left: 48px; }
    .sidebar-backdrop.visible { display: block; }

    /* 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; }
    .col-groups { grid-template-columns: 1fr; }
    .table-wrapper { padding: 0 0 16px; margin: 0 8px; }
    table { font-size: 0.74rem; }
    thead th { padding: 8px 9px; }
    tbody td { padding: 7px 9px; }
  }
  #no-results { text-align: center; padding: 48px; color: #475569; display: none; }

  .stat-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; padding: 8px 24px; background: #13151f; border-bottom: 1px solid #1e2035; font-size: 0.78rem; color: #64748b; }
  .stat-text { display: flex; align-items: center; gap: 24px; }
  .stat-bar span b { color: #e2e8f0; }
  .stat-bar-controls { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; }
  .stat-bar-controls .invested-filter, .stat-bar-controls .btn-add, .stat-bar-controls .btn-columns, .stat-bar-controls .btn-refresh-all { padding: 6px 12px; font-size: 0.78rem; }

  .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; }
  .badge-new { background: #064e3b; border: 1px solid #059669; color: #6ee7b7; font-size: 0.65rem; padding: 1px 5px; border-radius: 4px; vertical-align: middle; margin-left: 4px; }
  /* 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; }
  .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; }
  .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: #64748b; font-size: 0.68rem; flex: 0 0 auto; }
  /* Non-interactive loading / empty states */
  .add-suggest-msg { padding: 9px 12px; color: #64748b; font-size: 0.78rem; cursor: default; list-style: none; }
  .add-suggest-msg.add-suggest-loading::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: #94a3b8; }
  html[data-theme="light"] .add-suggest-msg { color: #94a3b8; }
  .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-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: #64748b; 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; }

  /* User chip */
  .user-chip { position: relative; display: flex; align-items: center; gap: 8px; background: #1e2035; border: 1px solid #2d3148; border-radius: 999px; padding: 4px 12px 4px 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-chip-name { font-size: 0.8rem; color: #e2e8f0; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .user-chip-caret { color: #64748b; font-size: 0.7rem; }
  .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; }

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

  /* Transient share toast (used by the Instagram copy-to-clipboard path) */
  .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); }

  /* 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; }
  /* ── Watchlist workspace: visually groups every view scoped to the selected
     watchlist (Table, Valuation, Charts, Simulations) so it's clear they all
     follow the picked list. Analytics sits outside this box. ── */
  .sidebar-workspace { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 6px 6px 8px 8px; margin: 2px 0 4px; border-left: 2px solid #2d1b69; border-radius: 0 8px 8px 0; background: linear-gradient(90deg, rgba(45,27,105,0.16), rgba(45,27,105,0)); }
  .sidebar.collapsed .sidebar-workspace { border-left-color: transparent; background: none; padding: 4px 0; gap: 4px; }
  .sidebar-nav-label--first { margin-top: 2px; }
  /* Caption tying the grouped views to the active watchlist; hidden on the rail */
  .sidebar-scope-note { font-size: 0.66rem; line-height: 1.35; color: #6b7280; padding: 0 6px 4px; white-space: normal; }
  .sidebar.collapsed .sidebar-scope-note { display: none; }
  /* Active-watchlist name + caret shown on the Watchlist nav item */
  .sidebar-wl-labelwrap { display: inline-flex; align-items: center; gap: 6px; overflow: hidden; }
  .sidebar-wl-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sidebar-wl-caret { flex: 0 0 auto; opacity: 0.7; transition: transform 0.18s ease; }
  .sidebar-watchlist-toggle.wl-open .sidebar-wl-caret { transform: rotate(180deg); }
  .sidebar.collapsed .sidebar-wl-caret { display: none; }

  .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.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; margin-bottom: 6px; font-weight: 600; }
  /* "Charts" group header inside .sidebar-nav — separate from items above; fully hide (no empty gap) when collapsed to the icon rail. */
  .sidebar-nav-label { margin-top: 10px; padding: 0 4px; }
  .sidebar.collapsed .sidebar-nav-label { display: none; }
  .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.65rem; color: #475569; 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 { 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; }
  html[data-theme="light"] .sidebar-workspace { border-left-color: #ddd6fe; background: linear-gradient(90deg, rgba(124,58,237,0.07), rgba(124,58,237,0)); }
  html[data-theme="light"] .sidebar.collapsed .sidebar-workspace { border-left-color: transparent; background: none; }
  html[data-theme="light"] .sidebar-scope-note { color: #94a3b8; }

  /* Watchlist inline sub-list (expanded under the Watchlist nav item) */
  .watchlist-sublist { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 4px; padding: 4px 8px 4px 14px; box-sizing: border-box; max-width: 100%; }
  .sidebar.collapsed .watchlist-sublist { display: none !important; }
  .watchlist-item { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 6px 10px; border: none; background: none; border-radius: 6px; color: #94a3b8; font-size: 0.8rem; font-weight: 500; cursor: pointer; text-align: left; white-space: nowrap; overflow: hidden; }
  .watchlist-item:hover { background: #1e2035; color: #e2e8f0; }
  .watchlist-item.active { background: #2d1b69; color: #a78bfa; font-weight: 600; }
  .watchlist-item .watchlist-dot { width: 6px; height: 6px; border-radius: 50%; background: #475569; flex: 0 0 auto; }
  .watchlist-item.active .watchlist-dot { background: #a78bfa; }
  .watchlist-name { overflow: hidden; text-overflow: ellipsis; }
  .watchlist-add-row { margin-top: 2px; }
  .watchlist-add-btn { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 6px 10px; border: 1px dashed #2d3148; background: none; border-radius: 6px; color: #64748b; font-size: 0.78rem; font-weight: 600; cursor: pointer; text-align: left; white-space: nowrap; overflow: hidden; }
  .watchlist-add-btn:hover { background: #1e2035; color: #a78bfa; border-color: #3b3f5c; }
  .watchlist-add-plus { font-size: 1rem; line-height: 1; flex: 0 0 auto; }
  .watchlist-add-input-wrap { display: flex; flex-direction: column; gap: 4px; }
  .watchlist-add-input { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid #3b3f5c; background: #12141f; color: #e2e8f0; border-radius: 6px; font-size: 0.8rem; }
  .watchlist-add-input:focus { outline: none; border-color: #a78bfa; }
  .watchlist-add-err { color: #f87171; font-size: 0.68rem; white-space: normal; line-height: 1.3; }
  html[data-theme="light"] .watchlist-item { color: #64748b; }
  html[data-theme="light"] .watchlist-item:hover { background: #f1f5f9; color: #1f2937; }
  html[data-theme="light"] .watchlist-item.active { background: #ede9fe; color: #6d28d9; }
  html[data-theme="light"] .watchlist-item .watchlist-dot { background: #cbd5e1; }
  html[data-theme="light"] .watchlist-item.active .watchlist-dot { background: #7c3aed; }
  html[data-theme="light"] .watchlist-add-btn { color: #94a3b8; border-color: #e2e8f0; }
  html[data-theme="light"] .watchlist-add-btn:hover { background: #f1f5f9; color: #7c3aed; border-color: #cbd5e1; }
  html[data-theme="light"] .watchlist-add-input { background: #ffffff; color: #1f2937; border-color: #cbd5e1; }
  html[data-theme="light"] .watchlist-add-input:focus { border-color: #7c3aed; }

  /* 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: #475569; 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; }
  .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; }

  /* 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.68rem; 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 { margin-left: 4px; opacity: 0.4; }
  .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; }
  html[data-theme="light"] .badge-new { background: #d1fae5; border-color: #6ee7b7; color: #047857; }
  /* 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-chip-name { color: #1f2937; }
  html[data-theme="light"] .user-chip-caret { color: #94a3b8; }
  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-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); }

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

  /* ── 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; }
  .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; }
  .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; }
  .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; }
  /* Chart show/hide + reorder (chart detail pages) */
  .chart-card.chart-hidden { display: none !important; }
  .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-meta { color: #64748b; }
  html[data-theme="light"] .detail-meta b { color: #1f2937; }
  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-sub { margin: 0; font-size: 0.88rem; color: #94a3b8; max-width: 640px; line-height: 1.5; }
  html[data-theme="light"] .strategy-sub { color: #64748b; }
  .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: #475569; font-style: italic; }
  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; }
  }