/* ─── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Spacing (4px grid) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;

  /* Type scale */
  --text-xs: clamp(0.6875rem, 0.65rem + 0.1vw, 0.75rem);
  --text-sm: clamp(0.8125rem, 0.78rem + 0.1vw, 0.875rem);
  --text-base: clamp(0.875rem, 0.84rem + 0.12vw, 0.9375rem);
  --text-lg: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  --text-xl: clamp(1.25rem, 1.15rem + 0.35vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.35rem + 0.5vw, 2rem);
  --text-3xl: clamp(1.875rem, 1.6rem + 0.8vw, 2.5rem);

  /* Radii — iOS-style generous rounding */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 22px;

  /* Transitions — iOS spring-like */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 200ms var(--ease-out);
  --transition-normal: 350ms var(--ease-out);

  /* Light theme — iOS-inspired */
  --bg: #f2f2f7;
  --bg-surface: #ffffff;
  --bg-surface-2: #f2f2f7;
  --bg-surface-3: #e5e5ea;
  --text-primary: #1c1c1e;
  --text-secondary: #636366;
  --text-muted: #aeaeb2;
  --border: rgba(0, 0, 0, 0.06);
  --border-strong: rgba(0, 0, 0, 0.12);
  --accent: #007aff;
  --accent-hover: #0056cc;
  --accent-light: rgba(0, 122, 255, 0.08);
  --accent-lighter: rgba(0, 122, 255, 0.04);
  --success: #34c759;
  --success-light: rgba(52, 199, 89, 0.1);
  --warning: #ff9500;
  --warning-light: rgba(255, 149, 0, 0.1);
  --danger: #ff3b30;
  --danger-light: rgba(255, 59, 48, 0.1);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-lg: 0 8px 28px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
}

[data-theme="dark"] {
  --bg: #000000;
  --bg-surface: #1c1c1e;
  --bg-surface-2: #2c2c2e;
  --bg-surface-3: #3a3a3c;
  --text-primary: #f5f5f7;
  --text-secondary: #a1a1a6;
  --text-muted: #636366;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --accent: #0a84ff;
  --accent-hover: #409cff;
  --accent-light: rgba(10, 132, 255, 0.15);
  --accent-lighter: rgba(10, 132, 255, 0.06);
  --success: #30d158;
  --success-light: rgba(48, 209, 88, 0.15);
  --warning: #ff9f0a;
  --warning-light: rgba(255, 159, 10, 0.15);
  --danger: #ff453a;
  --danger-light: rgba(255, 69, 58, 0.15);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.6);
}

html {
  font-family: var(--font-sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  height: 100%;
  /* Prevent any overflowing child from forcing horizontal scroll on iOS Safari.
     `clip` (not just `hidden`) matters here: `hidden` still lets a focused
     off-screen element (e.g. a partially-clipped tab in a horizontal-scroll
     row) auto-scroll body.scrollLeft via scrollIntoView, and with no visible
     scrollbar the page is then stuck shifted sideways with no way back short
     of a reload. `clip` blocks scrolling outright, not just the scrollbar. */
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100vw;
}

body {
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.5;
  min-height: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100vw;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

button {
  font-family: var(--font-sans);
  cursor: pointer;
  border: none;
  background: none;
  font-size: var(--text-sm);
}

/* ─── Sitewide tap feedback ───────────────────────────────────────────────
   A quick scale-down on press is one of the cheapest, highest-leverage ways
   to make a web app feel like a native iOS one — every button and tappable
   card here just had a hover color before, nothing acknowledged the actual
   tap. Subtle (3% scale) so it reads as responsive rather than bouncy, and
   skipped entirely under prefers-reduced-motion. The 80ms transition here is
   only what actually applies to elements with no transition of their own
   (e.g. .cal-agenda-day) — .btn/.stock-card/etc. already declare their own
   `transition: all var(--transition-fast)` (200ms) elsewhere and win by
   cascade order, so the press animates at that pace for those instead; still
   smooth, just not as snappy. */
button, .btn, .stock-card, .ticker-card, .sector-card, .movers-row,
.hero-quick-pill, .search-result-item, .site-menu-item, .catalyst-ticker,
.cal-agenda-day, .cal-cell-has, .logo, .nav-icon-btn {
  transition: transform 80ms ease;
}
button:active, .btn:active, .stock-card:active, .ticker-card:active,
.sector-card:active, .movers-row:active, .hero-quick-pill:active,
.search-result-item:active, .site-menu-item:active, .catalyst-ticker:active,
.cal-agenda-day:active, .cal-cell-has:active, .logo:active, .nav-icon-btn:active {
  transform: scale(0.97);
}
@media (prefers-reduced-motion: reduce) {
  button, .btn, .stock-card, .ticker-card, .sector-card, .movers-row,
  .hero-quick-pill, .search-result-item, .site-menu-item, .catalyst-ticker,
  .cal-agenda-day, .cal-cell-has, .logo, .nav-icon-btn {
    transition: none;
  }
  button:active, .btn:active, .stock-card:active, .ticker-card:active,
  .sector-card:active, .movers-row:active, .hero-quick-pill:active,
  .search-result-item:active, .site-menu-item:active, .catalyst-ticker:active,
  .cal-agenda-day:active, .cal-cell-has:active, .logo:active, .nav-icon-btn:active {
    transform: none;
  }
}

input, select, textarea {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: var(--sp-2) var(--sp-3);
  outline: none;
  transition: border-color var(--transition-fast);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

/* ─── Layout ──────────────────────────────────────────────── */
.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg-surface) 72%, transparent);
  border-bottom: 1px solid var(--border);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--sp-3) var(--sp-4);
  gap: var(--sp-4);
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--text-primary);
  white-space: nowrap;
  cursor: pointer;
  background: #63bce8;
  padding: 8px 14px;
  border-radius: 10px;
}
.logo svg { flex-shrink: 0; }
.brand-lockup {
  height: 32px;
  width: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.brand-lockup-light { display: none; }
.brand-lockup-dark { display: block; }
@media (max-width: 640px) {
  .brand-lockup { height: 26px; }
}

.header-search {
  flex: 1;
  max-width: 400px;
  position: relative;
}
.header-search input {
  width: 100%;
  padding-left: var(--sp-8);
  background: var(--bg-surface-2);
  border-color: transparent;
  border-radius: 10px;
}
.header-search input:focus { border-color: var(--accent); background: var(--bg-surface); }
.header-search .search-icon {
  position: absolute;
  left: var(--sp-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}
.search-results-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-height: 320px;
  overflow-y: auto;
  z-index: 100;
  display: none;
}
.search-results-dropdown.visible { display: block; }
.search-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.search-result-item:hover { background: var(--accent-light); }
.search-result-item .search-result-logo {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-result-item .search-result-logo .sc-logo {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  object-fit: contain;
}
.search-result-item .search-result-info {
  flex: 1;
  min-width: 0;
}
.search-result-item .ticker-sym {
  font-weight: 600;
  font-size: var(--text-sm);
  font-family: var(--font-mono);
}
.search-result-item .ticker-name {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-result-item .ticker-sector {
  font-size: var(--text-xs);
  color: var(--text-muted);
  flex-shrink: 0;
  margin-left: auto;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.header-nav button, .header-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  font-weight: 500;
}
/* Home/Movers/Calendar/Watchlist icons: hidden on desktop (text-only, as always),
   shown instead of the text label once things get too tight to fit both — see
   the <=640px rule below. Keeping the icon in the DOM at all sizes means these
   four never have to fully disappear behind the hamburger the way they used to. */
.header-nav .nav-icon { display: none; flex-shrink: 0; }
.header-nav button:hover, .header-nav a:hover {
  background: var(--bg-surface-2);
  color: var(--text-primary);
}
.header-nav .active {
  background: var(--accent-light);
  color: var(--accent);
}
/* Premium CTA for logged-out visitors — this is the site's main sales
   button for people who haven't signed up yet, so it gets real visual
   weight (solid warm color, not the same plain-text treatment as Home/
   Movers/etc.) instead of blending into the rest of the nav. Amber rather
   than the blue --accent so it doesn't compete with the Sign In button
   for attention — two blue CTAs next to each other just cancel out. */
.header-nav #premiumLink.premium-highlight {
  background: var(--warning);
  color: #1a1a1a;
  font-weight: 700;
}
.header-nav #premiumLink.premium-highlight:hover {
  background: var(--warning);
  filter: brightness(1.08);
  color: #1a1a1a;
}
[data-theme="dark"] .header-nav #premiumLink.premium-highlight { color: #1a1200; }

/* Site menu (hamburger) */
.site-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  background: transparent;
  border: 1px solid var(--border-color, var(--border));
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.site-menu-btn:hover { background: var(--bg-surface-2); }
.site-menu-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.site-menu-backdrop {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.42);
  opacity: 0; pointer-events: none;
  transition: opacity 180ms ease;
  z-index: 9998;
}
.site-menu-backdrop.open { opacity: 1; pointer-events: auto; }

.site-menu-drawer {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  height: 100vh;
  width: min(320px, 88vw);
  background: var(--bg-surface);
  border-right: 1px solid var(--border-color, var(--border));
  box-shadow: 4px 0 24px rgba(0,0,0,0.18);
  transform: translateX(-100%);
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.site-menu-drawer.open { transform: translateX(0); }

.site-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-color, var(--border));
  flex-shrink: 0;
}
.site-menu-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.site-menu-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
}
.site-menu-close:hover { background: var(--bg-surface-2); color: var(--text-primary); }

.site-menu-search {
  position: relative;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-color, var(--border));
  flex-shrink: 0;
}
.site-menu-search input {
  width: 100%;
  padding-left: var(--sp-8);
  background: var(--bg-surface-2);
  border-color: transparent;
  border-radius: 10px;
}
.site-menu-search input:focus { border-color: var(--accent); background: var(--bg-surface); }
.site-menu-search .search-icon {
  position: absolute;
  left: calc(var(--sp-3) + 16px);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  font-size: 14px;
}
.site-menu-search .search-results-dropdown { left: 16px; right: 16px; }

.site-menu-scroll {
  overflow-y: auto;
  padding: 8px 8px 24px;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}

.site-menu-group { padding: 10px 4px; }
.site-menu-group + .site-menu-group { border-top: 1px solid var(--border-color, var(--border)); }
.site-menu-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted, var(--text-secondary));
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 12px 8px;
}

.site-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 500;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast);
}
.site-menu-item:hover { background: var(--bg-surface-2); }
.site-menu-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.site-menu-item.hidden { display: none; }
/* Same glyphs as the header's icon-only nav buttons (#navHome etc.) so the
   drawer visually ties back to which icon is which once the header collapses
   to icons-only below 640px. */
.site-menu-item-icon, .site-menu-item-icon-spacer {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--text-secondary);
}

/* Accent variant — e.g. "Feature request / bug report" at the bottom */
.site-menu-item-accent {
  color: var(--accent);
  border: 1px dashed var(--border);
  background: transparent;
}
.site-menu-item-accent:hover {
  background: rgba(59, 130, 246, 0.08);
  border-color: var(--accent);
}

/* Feedback modal — type chips (Feature request / Bug report / Other) */
.fb-type-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: all var(--transition-fast);
}
.fb-type-chip:hover { border-color: var(--text-secondary); color: var(--text-primary); }
.fb-type-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.site-menu-sectors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 0 4px;
}
.site-menu-sector-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--bg-surface-2);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: left;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  min-width: 0;
}
.site-menu-sector-chip:hover { border-color: var(--accent); background: var(--accent-light, var(--bg-surface-2)); }
.site-menu-sector-icon { font-size: 14px; line-height: 1; flex-shrink: 0; }
.site-menu-sector-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.main-content {
  flex: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-4);
  width: 100%;
}

/* ─── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 10px 20px;
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: 980px;
  transition: all var(--transition-fast);
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover { background: var(--accent-hover); transform: scale(1.02); }
.btn-secondary {
  background: var(--bg-surface-2);
  color: var(--text-primary);
  border: 1px solid var(--border);
}
.btn-secondary:hover { background: var(--bg-surface-3); }
.btn-ghost {
  color: var(--text-secondary);
}
.btn-ghost:hover { background: var(--bg-surface-2); color: var(--text-primary); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { opacity: 0.9; }
.btn-sm { padding: var(--sp-1) var(--sp-3); font-size: var(--text-xs); }
.btn-lg { padding: var(--sp-3) var(--sp-6); font-size: var(--text-base); }

/* ─── Cards ───────────────────────────────────────────────── */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  transition: box-shadow var(--transition-fast);
}
.card:hover { box-shadow: var(--shadow-md); }
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}
.card-title {
  font-size: var(--text-lg);
  font-weight: 600;
}

/* ─── Badges ──────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 3px 10px;
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: 980px;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.badge-blue { background: var(--accent-light); color: var(--accent); }
.badge-green { background: var(--success-light); color: var(--success); }
.badge-amber { background: var(--warning-light); color: var(--warning); }
.badge-red { background: var(--danger-light); color: var(--danger); }
.badge-gray { background: var(--bg-surface-2); color: var(--text-secondary); }
.badge-purple { background: rgba(168, 85, 247, 0.15); color: #a855f7; }
.badge-pink { background: rgba(236, 72, 153, 0.15); color: #ec4899; }
.badge-peer {
  background: rgba(99, 102, 241, 0.12);
  color: #6366f1;
  border: 1px solid rgba(99, 102, 241, 0.25);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.badge-move {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.18), rgba(6, 182, 212, 0.18));
  color: #0891b2;
  border: 1px solid rgba(6, 182, 212, 0.35);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  cursor: help;
}
:root.dark .badge-move,
[data-theme="dark"] .badge-move {
  color: #67e8f9;
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.22), rgba(6, 182, 212, 0.22));
  border-color: rgba(103, 232, 249, 0.35);
}

/* ─── Peer Catalyst Card ───────────────────── */
.peer-catalysts-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.peer-catalyst-card {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-left: 3px solid rgba(99, 102, 241, 0.5);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.peer-catalyst-card:hover {
  background: var(--bg-surface-2);
  border-left-color: #6366f1;
  transform: translateX(2px);
}
.peer-catalyst-left {
  flex-shrink: 0;
  width: 48px;
  text-align: center;
}
.peer-catalyst-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.peer-date-day {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.1;
}
.peer-date-num {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
}
.peer-catalyst-body {
  flex: 1;
  min-width: 0;
}
.peer-catalyst-header {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.peer-catalyst-headline {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.peer-theme-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 500;
  border: 1px solid var(--border);
}

/* ─── Catalyst Card ───────────────────────────────────────── */
.catalyst-list { display: flex; flex-direction: column; gap: var(--sp-3); }

.catalyst-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-5);
  transition: all var(--transition-fast);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.catalyst-card:hover {
  border-color: transparent;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.catalyst-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.catalyst-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.catalyst-ticker {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--accent);
  cursor: pointer;
}
.catalyst-ticker:hover { text-decoration: underline; }
.catalyst-date {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.catalyst-headline {
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: var(--sp-2);
}
.catalyst-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: var(--sp-3);
}
.catalyst-why {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  background: var(--bg-surface-2);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  margin-bottom: var(--sp-3);
  line-height: 1.5;
}
.catalyst-why strong {
  color: var(--text-primary);
  font-weight: 600;
}
.catalyst-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.catalyst-scores {
  display: flex;
  gap: var(--sp-3);
}
.score-pill {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}
.score-val {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
.catalyst-sources {
  display: flex;
  gap: var(--sp-2);
}
.catalyst-sources a {
  font-size: var(--text-xs);
  color: var(--accent);
}
.catalyst-sources a:hover { text-decoration: underline; }

/* Importance bar */
.importance-bar {
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background: var(--bg-surface-3);
  overflow: hidden;
}
.importance-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width var(--transition-normal);
}

/* ─── Ticker Grid ─────────────────────────────────────────── */
.ticker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-3);
}
.ticker-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.ticker-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.ticker-card .tc-symbol {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-base);
}
.ticker-card .tc-name {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ticker-card .tc-sector {
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.ticker-card .tc-catalysts {
  font-size: var(--text-xs);
  color: var(--accent);
  font-weight: 500;
}

/* ─── Stock Card with Logo ────────────────────────────────── */
.stock-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--sp-3);
}
.stock-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-3);
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-2);
  position: relative;
  box-shadow: var(--shadow-sm);
}
.stock-card:hover {
  border-color: transparent;
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px) scale(1.015);
}
.stock-card .sc-logo {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  object-fit: contain;
  background: var(--bg-surface-2);
  padding: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.stock-card .sc-symbol {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--text-primary);
}
.stock-card .sc-name {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.stock-card .sc-quote {
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
  margin-top: 2px;
}
.stock-card .sc-quote:empty { display: none; }
.stock-card .sc-quote .quote-price {
  font-weight: 600;
  color: var(--text-primary);
}
.stock-card .sc-quote .quote-up { color: #16a34a; font-weight: 600; }
.stock-card .sc-quote .quote-down { color: #dc2626; font-weight: 600; }
.stock-card .sc-badge {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
}
.stock-card .sc-catalyst-count {
  font-size: var(--text-xs);
  color: var(--accent);
  font-weight: 600;
}
.stock-card .sc-count-pill {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 980px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0, 122, 255, 0.35);
  letter-spacing: -0.02em;
}

/* Sector Cards */
.sector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-3);
}
.sector-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  box-shadow: var(--shadow-sm);
}
.sector-card:hover {
  border-color: transparent;
  transform: translateY(-2px) scale(1.01);
  box-shadow: var(--shadow-lg);
}
.sector-card .sector-icon {
  font-size: 26px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  flex-shrink: 0;
  background: var(--bg-surface-2);
}
.sector-card .sector-info {
  flex: 1;
  min-width: 0;
}
.sector-card .sector-name {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sector-card .sector-meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 2px;
}
.sector-card .sector-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--accent-light);
  color: var(--accent);
  flex-shrink: 0;
}
.sector-catalyst-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-2);
}
.sector-catalyst-card .sc-sector-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  cursor: pointer;
}
.sector-catalyst-card .sc-sector-tag:hover {
  background: var(--accent-light);
  color: var(--accent);
}

/* ─── Category Pills ──────────────────────────────────────── */
.category-bar {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}
.category-pill {
  padding: 8px 18px;
  font-size: var(--text-sm);
  border-radius: 980px;
  border: none;
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-weight: 500;
}
.category-pill:hover { background: var(--bg-surface-3); color: var(--text-primary); }
.category-pill.active {
  background: var(--accent);
  color: #fff;
}

/* ─── Compact Hero ────────────────────────────────────────── */
.compact-hero {
  text-align: center;
  padding: var(--sp-8) var(--sp-4) var(--sp-6);
  max-width: 720px;
  margin: 0 auto;
}
.compact-hero h1 {
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin-bottom: var(--sp-2);
}
.compact-hero p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ─── Hero Search ────────────────────────────────── */
.hero-search {
  position: relative;
  margin: var(--sp-5) auto 0;
  max-width: 560px;
  text-align: left;
}
.hero-search input {
  width: 100%;
  padding: 16px 56px 16px 48px;
  font-size: 16px;
  font-weight: 500;
  border: 2px solid var(--border);
  border-radius: 14px;
  background: var(--bg-surface);
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  font-family: inherit;
}
.hero-search input::placeholder {
  color: var(--text-muted);
  font-weight: 400;
}
.hero-search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent), 0 2px 8px rgba(0,0,0,0.06);
}
.hero-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}
.hero-search input:focus + .hero-search-kbd,
.hero-search-kbd {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  padding: 3px 8px;
  font-size: 12px;
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--text-muted);
  background: var(--bg-subtle, rgba(0,0,0,0.05));
  border: 1px solid var(--border);
  border-radius: 6px;
  pointer-events: none;
}

.hero-search-results {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.14), 0 2px 6px rgba(0,0,0,0.06);
  max-height: 400px;
  overflow-y: auto;
  z-index: 100;
}
.hero-search-results.visible { display: block; }

.hero-search-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.hero-search-item .hsi-logo {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-search-item .hsi-logo .sc-logo {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: contain;
}
.hero-search-item:last-child { border-bottom: none; }
.hero-search-item:hover,
.hero-search-item.active {
  background: var(--accent-light);
}
.hero-search-item .hsi-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.hero-search-item .hsi-sym {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.hero-search-item .hsi-name {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-search-item .hsi-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-left: 12px;
}
.hero-search-item .hsi-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-light);
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.hero-search-item .hsi-sector {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
.hero-search-empty {
  padding: 20px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

.hero-quick-picks {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: var(--sp-3);
  flex-wrap: wrap;
}
.hero-quick-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-right: 2px;
}
.hero-quick-pill {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.02em;
}
.hero-quick-pill:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-light);
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .hero-search input { font-size: 15px; padding: 14px 48px 14px 42px; }
  .hero-search-icon { left: 14px; width: 18px; height: 18px; }
  .hero-search-kbd { display: none; }
  .hero-quick-picks { gap: 4px; }
  .hero-quick-pill { padding: 4px 10px; font-size: 11px; }
}

/* ─── Filter Bar ──────────────────────────────────────────── */
.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.filter-bar select, .filter-bar input {
  min-width: 140px;
}
.filter-bar label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

/* ─── Sections ────────────────────────────────────────────── */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}
.section-title {
  font-size: var(--text-lg);
  font-weight: 700;
}
.section-subtitle {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* ─── Hero / Landing ──────────────────────────────────────── */
.hero {
  text-align: center;
  padding: var(--sp-16) var(--sp-4);
  max-width: 680px;
  margin: 0 auto var(--sp-12);
}
.hero h1 {
  font-size: var(--text-3xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: var(--sp-4);
}
.hero p {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--sp-6);
}
.hero-cta {
  display: flex;
  gap: var(--sp-3);
  justify-content: center;
}

/* ─── Ticker Detail Page ──────────────────────────────────── */
.ticker-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-6);
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.ticker-detail-header h1 {
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.ticker-detail-header h1 span {
  font-family: var(--font-mono);
  color: var(--accent);
}
.ticker-price-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-top: var(--sp-1);
  flex-wrap: wrap;
  min-height: 1.5em;
}
.ticker-price {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.ticker-change {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
}
.ticker-change.up {
  color: #15803d;
  background: rgba(34, 197, 94, 0.12);
}
.ticker-change.down {
  color: #b91c1c;
  background: rgba(239, 68, 68, 0.12);
}
.ticker-price-loading {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

/* 'Updated Xm ago' freshness indicator on ticker page header */
.ticker-freshness {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  letter-spacing: 0.01em;
}
.freshness-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e; /* green */
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
  animation: freshness-pulse 2.4s ease-in-out infinite;
  display: inline-block;
}
@keyframes freshness-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15); }
  50%      { opacity: 0.7; box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}

/* ─── Ticker News Strip ───────────────────────────── */
.ticker-news-strip {
  margin: var(--sp-3) 0;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
}
.tns-header {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-primary);
  font-weight: 600;
  transition: background 0.15s ease;
}
.tns-header:hover { background: rgba(0,0,0,0.03); }
.tns-header:focus-visible { outline: 2px solid var(--accent, #14b8a6); outline-offset: -2px; }
.tns-icon { display: inline-flex; align-items: center; justify-content: center; }
.tns-icon svg { display: block; opacity: 0.8; width: 16px; height: 16px; }
.tns-label { flex: 1 1 auto; min-width: 0; }
.tns-count {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent, #14b8a6);
  color: #fff;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  min-width: 22px;
  text-align: center;
}
.tns-chevron {
  font-size: 16px;
  line-height: 1;
  color: var(--text-secondary);
  transition: transform 0.2s ease;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(0,0,0,0.05);
}
.tns-header:hover .tns-chevron { background: rgba(0,0,0,0.08); }
.tns-header[aria-expanded="true"] .tns-chevron {
  transform: rotate(180deg);
}
.tns-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 14px 10px;
  border-top: 1px solid var(--border-1);
}
.tns-list[hidden] { display: none; }
.tns-row {
  display: grid;
  grid-template-columns: minmax(70px, auto) 1fr auto;
  gap: var(--sp-3);
  align-items: baseline;
  padding: 6px 0;
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--text-sm);
  line-height: 1.4;
  border-bottom: 1px solid var(--border-1);
  transition: opacity 0.15s ease;
}
.tns-row:last-child { border-bottom: none; }
.tns-row:hover { opacity: 0.75; }
.tns-publisher {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tns-headline {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
}
.tns-time {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  white-space: nowrap;
}
/* ─── Tile Quote Row (watchlist tiles) ───────────────── */
.tc-sector-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: 4px;
}
.tc-quote {
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.tc-quote:empty { display: none; }
.tc-quote .quote-price {
  font-weight: 600;
  color: var(--text-primary);
}
.tc-quote .quote-up { color: #16a34a; font-weight: 600; }
.tc-quote .quote-down { color: #dc2626; font-weight: 600; }

@media (max-width: 640px) {
  .tns-row {
    grid-template-columns: 1fr auto;
  }
  .tns-publisher {
    grid-column: 1 / -1;
    order: 1;
  }
  .tns-headline {
    grid-column: 1 / -1;
    order: 2;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .tns-time {
    grid-column: 1 / -1;
    order: 3;
  }
}

.ticker-detail-meta {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
}

/* ─── Auth Modal ──────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 200;
  display: flex;
  align-items: center;
  align-items: safe center;
  justify-content: center;
  justify-content: safe center;
  padding: var(--sp-4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.modal-overlay.visible {
  opacity: 1;
  pointer-events: all;
}
.modal {
  background: var(--bg-surface);
  border-radius: var(--radius-xl);
  padding: var(--sp-8);
  max-width: 420px;
  width: 100%;
  box-shadow: 0 24px 80px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.1);
  transform: translateY(8px) scale(0.97);
  transition: transform var(--transition-normal);
}
.modal-overlay.visible .modal {
  transform: translateY(0) scale(1);
}
/* Universal close button (× in top-right of every modal) */
.modal { position: relative; }
.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-secondary, #64748b);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
  transition: background 120ms ease, color 120ms ease;
  z-index: 2;
}
.modal-close:hover,
.modal-close:focus-visible {
  background: var(--bg-hover, rgba(0,0,0,0.06));
  color: var(--text-primary, #0f172a);
  outline: none;
}
.modal h2 {
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--sp-2);
}
.modal p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--sp-5);
}
.modal .form-group {
  margin-bottom: var(--sp-4);
}
.modal label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: var(--sp-1);
}
.modal input {
  width: 100%;
  padding: var(--sp-3);
}
.modal .form-error {
  color: var(--danger);
  font-size: var(--text-xs);
  margin-top: var(--sp-1);
}
.modal .form-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.modal .switch-mode {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.modal .switch-mode a {
  cursor: pointer;
  font-weight: 500;
}

/* ─── Locked catalyst cards (blur in place) ───────────────── */
.catalyst-card.catalyst-locked,
.timeline-card.catalyst-locked,
.peer-catalyst-card.catalyst-locked,
.pc-row.catalyst-locked {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
}
/* Blur direct children EXCEPT the header row (marked .card-date-clear), so
   the ticker/type/date stay legible on locked cards while headline/scores
   blur out. CSS filter creates a compositing context so we can only skip
   blur at a subtree root, not un-blur a descendant. */
.catalyst-card.catalyst-locked > *:not(.card-date-clear),
.timeline-card.catalyst-locked > *:not(.card-date-clear):not(.tl-actions),
.peer-catalyst-card.catalyst-locked > *:not(.card-date-clear),
.pc-row.catalyst-locked > *:not(.card-date-clear) {
  filter: blur(6px);
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}
/* Add to Calendar sits in the Details row. Keep that row readable and
   tappable on locked NVDA cards so the public earnings header can still
   export; card-body click remains the checkout path. */
.timeline-card.catalyst-locked > .tl-actions {
  position: relative;
  z-index: 3;
}
.catalyst-locked .card-date-visible {
  font-weight: 600;
  color: var(--text-primary);
}
.catalyst-card.catalyst-locked::after,
.timeline-card.catalyst-locked::after,
.peer-catalyst-card.catalyst-locked::after,
.pc-row.catalyst-locked::after {
  content: "🔒 Unlock for $11/mo";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: rgba(255,255,255,0.35);
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
  z-index: 2;
}
[data-theme="dark"] .catalyst-card.catalyst-locked::after,
[data-theme="dark"] .timeline-card.catalyst-locked::after,
[data-theme="dark"] .peer-catalyst-card.catalyst-locked::after,
[data-theme="dark"] .pc-row.catalyst-locked::after {
  background: rgba(0,0,0,0.35);
}
.catalyst-card.catalyst-locked:hover::after,
.timeline-card.catalyst-locked:hover::after,
.peer-catalyst-card.catalyst-locked:hover::after,
.pc-row.catalyst-locked:hover::after {
  opacity: 1;
}

/* ─── Floating paywall CTA (sticky bottom bar) ────────────── */
/* When the sticky bar is visible, reserve bottom space so the last card
   isn't hidden underneath it. */
body:has(.floating-paywall.visible) {
  padding-bottom: 96px;
}
.floating-paywall {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 24px rgba(0,0,0,0.10);
  transform: translateY(110%);
  transition: transform 0.28s ease;
  z-index: 1000;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.floating-paywall.visible {
  transform: translateY(0);
}
.fp-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
}
.fp-copy {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.fp-lock {
  font-size: 26px;
  flex-shrink: 0;
  line-height: 1;
}
.fp-text {
  min-width: 0;
}
.fp-headline {
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.fp-sub {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: 2px;
}
.fp-cancel {
  opacity: 0.75;
  font-weight: 500;
  margin-left: 4px;
}
.fp-cta {
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .fp-sub { display: none; }
  .fp-lock { font-size: 22px; }
  .fp-headline { font-size: var(--text-sm); }
  .floating-paywall { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
}

/* ─── Paywall Banner ──────────────────────────────────────── */
.paywall-banner {
  background: linear-gradient(135deg, var(--accent-light), var(--accent-lighter));
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  text-align: center;
  margin: var(--sp-8) 0;
}
.paywall-banner h3 {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--sp-2);
}
.paywall-banner p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--sp-4);
}
.paywall-banner .price {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--accent);
}
.paywall-banner .price span {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--text-muted);
}

/* ─── Admin Dashboard ─────────────────────────────────────── */
.admin-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--sp-6);
  min-height: calc(100vh - 64px);
}
.admin-sidebar {
  border-right: 1px solid var(--border);
  padding: var(--sp-4) 0;
}
.admin-sidebar button {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  margin-bottom: 2px;
  transition: all var(--transition-fast);
}
.admin-sidebar button:hover { background: var(--bg-surface-2); color: var(--text-primary); }
.admin-sidebar button.active { background: var(--accent-light); color: var(--accent); font-weight: 600; }
.admin-main { padding: var(--sp-4) 0; }

/* Inbox badge (count of pending catalysts in sidebar) */
.inbox-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: 6px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.inbox-badge.hidden { display: none; }

/* Inbox cards — iOS-style frosted glass */
.inbox-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.inbox-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}
.inbox-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.inbox-card-headline {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.35;
}
.inbox-card-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}
.inbox-card-why {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-surface-2);
  border-radius: var(--radius-md);
}
.inbox-card-why strong { color: var(--text-primary); }
.inbox-reasoning {
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.inbox-reasoning summary {
  cursor: pointer;
  color: var(--text-muted);
  user-select: none;
}
.inbox-reasoning summary:hover { color: var(--text-secondary); }
.inbox-reasoning p {
  margin: var(--sp-2) 0 0 0;
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-surface-2);
  border-radius: var(--radius-md);
  font-style: italic;
}
.inbox-card-meta {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  flex-wrap: wrap;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
}
.inbox-meta-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.inbox-meta-row label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  font-weight: 600;
}
.inbox-meta-row input {
  font-size: var(--text-sm);
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-mono);
}
.inbox-meta-row input:focus {
  outline: none;
  border-color: var(--accent);
}
.inbox-source-link {
  font-size: var(--text-xs);
  color: var(--accent);
  text-decoration: none;
  margin-left: auto;
  align-self: flex-end;
  padding-bottom: 6px;
}
.inbox-source-link:hover { text-decoration: underline; }
.inbox-card-actions {
  display: flex;
  gap: var(--sp-2);
  justify-content: flex-end;
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
}
.stat-card .stat-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--sp-1);
}
.stat-card .stat-value {
  font-size: var(--text-xl);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ─── Table ───────────────────────────────────────────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.data-table th {
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border-strong);
  position: sticky;
  top: 0;
  background: var(--bg-surface);
  z-index: 1;
}
.data-table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.data-table tr:hover td {
  background: var(--accent-lighter);
}
.data-table .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ─── Skeleton ────────────────────────────────────────────── */
.skeleton {
  background: var(--bg-surface-2);
  border-radius: var(--radius-md);
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* ─── Toast ───────────────────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: var(--sp-6);
  right: var(--sp-6);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.toast {
  background: color-mix(in srgb, var(--bg-surface) 85%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-3) var(--sp-5);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  animation: slideIn 0.3s var(--ease-out);
  max-width: 360px;
}
@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.toast.success { border-left: 3px solid var(--success); }
.toast.error { border-left: 3px solid var(--danger); }

/* ─── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-surface-3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ─── Mobile ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Christian wants Movers/Calendar/Watchlist visible in the top bar, not just
     the hamburger drawer, down through tablet/half-screen-laptop widths — this
     is likely the single most common source of the old "header overflows"
     bug, since 768px and down covers ordinary split-screen desktop windows,
     not just phones. The header-search box now has an equivalent in the
     hamburger drawer (added alongside this fix), so it's safe to drop here in
     favor of keeping full nav visible. Premium used to be traded away here
     too, but it's the site's main sales CTA for logged-out visitors — it's
     back as a nav-icon-btn like the others (icon-only below 640px, same as
     Home/Movers/Calendar/Watchlist) instead of disappearing on mobile.
     Hiding header-search also removes the flex:1 spacer that used to sit
     between the logo and the nav, so .header-inner's `justify-content:
     space-between` was left balancing just two unequal-width groups (logo,
     nav) — with the logo sliding noticeably off-center toward the narrower
     side (or the hamburger, once fewer buttons make the nav group ITself the
     narrower side). Switching to an explicit two-group layout (hamburger+logo
     pinned left, nav pinned right via margin-left:auto) keeps it looking
     deliberate regardless of how many nav items are visible at a given
     width. */
  .header-inner { justify-content: flex-start; }
  .header-nav { margin-left: auto; }
  .header-search { display: none; }
  .header-nav { gap: 6px; }
  .header-nav button, .header-nav a { padding-left: 6px; padding-right: 6px; font-size: var(--text-sm); }
  .header-nav #authBtn { padding-left: var(--sp-3); padding-right: var(--sp-3); }
  .header-inner { padding-left: 12px; padding-right: 12px; gap: 10px; }
  .admin-layout { grid-template-columns: 1fr; }
  .admin-sidebar {
    border-right: none;
    border-bottom: 1px solid var(--border);
    display: flex;
    overflow-x: auto;
    gap: var(--sp-1);
    padding: var(--sp-2);
  }
  .admin-sidebar button { white-space: nowrap; }
  .hero { padding: var(--sp-8) var(--sp-4); }
  .filter-bar { flex-direction: column; }
  .ticker-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .stock-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .catalyst-header { flex-direction: column; }
}

@media (max-width: 640px) {
  /* Below this it's genuinely tight (verified: overflows even with search +
     Premium already dropped above) to keep full text labels on Home/Movers/
     Calendar/Watchlist. Rather than hiding them behind the hamburger again
     (Christian's original complaint — he wants these reachable from the top
     bar, not just the drawer, on an actual phone too), swap to icon-only:
     hide the text, show the icon, square up the padding into a compact
     tap target. Still fully visible and functional, just narrower. */
  .header-nav .nav-icon-btn .nav-text { display: none; }
  .header-nav .nav-icon-btn .nav-icon { display: inline-block; }
  .header-nav .nav-icon-btn { padding: 6px; }
  .header-nav { gap: 2px; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: var(--text-2xl); }
  .header-nav button { padding-left: var(--sp-1); padding-right: var(--sp-1); font-size: var(--text-xs); }
  /* Shrink the theme toggle a bit for mobile but keep it visible — users
     shouldn't have to dig into Settings to switch themes. */
  .header-nav .theme-toggle { width: 28px; height: 28px; }
  /* header-search is already hidden starting at a wider breakpoint above
     (this query is narrower and inherits it); Home/Movers/Calendar/Watchlist
     are icon-only by this point too (see the <=640px rule above), not hidden. */
  /* Shrink brand lockup further so nav has more room */
  .brand-lockup { height: 20px; }
  .logo { padding: 4px 6px; }
  /* Avatar button is fixed-size on mobile too; no truncation needed. */
  /* Tighten header padding on tiny screens. */
  .header-inner { padding: 6px 8px; gap: 6px; }
  /* Shrink the icon-only nav buttons' icons a touch further too — every px
     counts once Admin's icon joins the row for admin accounts. */
  .header-nav .nav-icon-btn .nav-icon { width: 14px; height: 14px; }
  /* Hamburger button is fixed at 40x40 everywhere else — shrink it slightly
     here too, needed to fit Home/Movers/Calendar/Watchlist/Admin as icons
     alongside the logo/theme-toggle/avatar even on the smallest phones
     (iPhone SE-width, 375px). */
  .site-menu-btn { width: 34px; height: 34px; }
  /* Ensure the nav row never overflows off-screen and stays fully tappable */
  .header-nav { flex-shrink: 0; }
  /* Hide the header Upgrade CTA on tiny screens — the hero and bottom paywall
     ribbon already surface upgrade prompts, and keeping it here on mobile
     pushes the avatar off-screen. Non-subscribers still see the ribbon. */
  .header-nav #upgradeBtn { display: none !important; }
  /* Shrink avatar slightly and tighten spacing */
  .header-nav .user-avatar-btn { width: 28px; height: 28px; min-width: 28px; font-size: 12px; }
  .header-nav { gap: 4px; }
  /* Nav buttons shrink to essentials */
  .header-nav button:not(.user-avatar-btn):not(#upgradeBtn) { padding: 4px 6px; }
  /* Calendar grid: compact pills on narrow screens */
  .cal-cell { min-height: 60px; padding: 2px; }
  .cal-pill { font-size: 9px; padding: 1px 2px; }
  .cal-pill-head { display: none; }
  .cal-cell-date { font-size: 10px; }
}

/* ─── Theme Toggle ────────────────────────────────────────── */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}
.theme-toggle:hover {
  background: var(--bg-surface-2);
  color: var(--text-primary);
}

/* ─── Misc ────────────────────────────────────────────────── */
.hidden { display: none !important; }
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.mt-2 { margin-top: var(--sp-2); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.w-full { width: 100%; }

/* Empty state */
.empty-state {
  text-align: center;
  padding: var(--sp-12) var(--sp-4);
  color: var(--text-muted);
}
.empty-state svg {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--sp-4);
  opacity: 0.3;
}
.empty-state h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--sp-2);
}
.empty-state p {
  font-size: var(--text-sm);
  max-width: 400px;
  margin: 0 auto;
}

/* Watchlist star */
.star-btn {
  color: var(--text-muted);
  font-size: 18px;
  transition: all var(--transition-fast);
  line-height: 1;
  padding: 4px 6px;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  border: none;
  opacity: 0.55;
}
.star-btn:hover {
  color: var(--warning);
  transform: scale(1.15);
  background: rgba(251, 191, 36, 0.12);
  opacity: 1;
}
.star-btn:focus-visible {
  outline: 2px solid var(--warning);
  outline-offset: 2px;
}
.star-btn.active {
  color: var(--warning);
  opacity: 1;
  text-shadow: 0 0 6px rgba(251, 191, 36, 0.35);
}
.star-btn.active:hover { transform: scale(1.15); background: rgba(251, 191, 36, 0.18); }

/* Date group */
.date-group {
  margin-bottom: var(--sp-6);
}
.date-group-header {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}

/* Scope toggle — iOS-style segmented control */
.scope-toggle {
  display: flex;
  gap: 6px;
  padding: 6px;
  background: #E9ECF2;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;
  margin-bottom: var(--sp-4);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
}
.scope-toggle::-webkit-scrollbar { display: none; }

.scope-seg {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  min-height: 44px;
  border: none;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: all var(--transition-fast);
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: -0.01em;
}
.scope-seg:hover:not(.active) {
  color: var(--text-primary);
  background: rgba(255,255,255,0.55);
}
.scope-seg.active {
  background: #fff;
  color: var(--text-primary);
  font-weight: 700;
  box-shadow:
    0 4px 12px rgba(0,0,0,0.10),
    0 2px 4px rgba(0,0,0,0.06),
    0 0 0 0.5px rgba(0,0,0,0.04);
  transform: translateY(-0.5px);
}
.scope-seg-label {
  line-height: 1;
}
.scope-seg-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 11px;
  background: rgba(0,0,0,0.08);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.scope-seg.active .scope-seg-count {
  background: var(--accent);
  color: #fff;
}
.scope-seg-wrap {
  display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0;
}
.scope-snap-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  border: none; background: transparent; cursor: pointer;
  font-size: 14px; opacity: 0.55; flex-shrink: 0;
  transition: opacity var(--transition-fast), background var(--transition-fast);
}
.scope-snap-btn:hover { opacity: 1; background: rgba(255,255,255,0.55); }
[data-theme="dark"] .scope-snap-btn:hover { background: var(--bg-surface); }

/* Dark mode overrides — container/pills use hardcoded light colors above */
[data-theme="dark"] .scope-toggle {
  background: var(--bg-surface-2);
  border-color: var(--border);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.35);
}
[data-theme="dark"] .scope-seg {
  color: var(--text-secondary);
}
[data-theme="dark"] .scope-seg:hover:not(.active) {
  color: var(--text-primary);
  background: rgba(255,255,255,0.06);
}
[data-theme="dark"] .scope-seg.active {
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow:
    0 4px 12px rgba(0,0,0,0.40),
    0 2px 4px rgba(0,0,0,0.30),
    0 0 0 0.5px rgba(255,255,255,0.06);
}
[data-theme="dark"] .scope-seg-count {
  background: rgba(255,255,255,0.10);
  color: var(--text-secondary);
}

/* Timeline headline ticker chip (peer scope) */
.tl-headline-ticker {
  display: inline-block;
  padding: 2px 8px;
  margin-right: 4px;
  border-radius: 6px;
  background: var(--accent-light, rgba(59,130,246,0.1));
  color: var(--accent);
  font-weight: 700;
  font-size: 0.9em;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.tl-headline-ticker:hover {
  background: var(--accent);
  color: #fff;
}

@media (max-width: 640px) {
  .scope-toggle { padding: 5px; gap: 4px; border-radius: 12px; }
  .scope-seg { padding: 9px 13px; font-size: 14px; min-height: 40px; gap: 8px; }
  .scope-seg-count { min-width: 20px; height: 20px; font-size: 11px; }
}

/* Catalyst type pills */
.type-filters {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.type-pill {
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--text-xs);
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-weight: 500;
}
.type-pill:hover { border-color: var(--accent); color: var(--accent); }
.type-pill.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Importance-only toggle — visually distinct from type-filter pills */
.type-pill.importance-toggle {
  font-weight: 600;
  gap: 4px;
  display: inline-flex;
  align-items: center;
  color: var(--text-primary);
  border-color: var(--border);
  background: var(--bg-surface);
}
.type-pill.importance-toggle:hover {
  border-color: #f59e0b;
  color: #f59e0b;
  background: #fffbeb;
}
.type-pill.importance-toggle.active {
  background: #f59e0b;
  color: #fff;
  border-color: #f59e0b;
}
.type-pill.importance-toggle.active:hover {
  background: #d97706;
  border-color: #d97706;
}

/* Compact mobile filter bar — collapses the type-pill wrap (which can run
   3 rows deep on tickers with lots of catalyst types) into one dropdown +
   an icon-only importance toggle, so the actual catalyst list starts higher
   up the page on small screens. Desktop keeps the full pill row. */
.type-filters-mobile { display: none; }
@media (max-width: 640px) {
  .type-filters { display: none; }
  .type-filters-mobile { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); }
}
.type-filter-select {
  flex: 1;
  min-width: 0;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-primary);
}
.importance-toggle-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  font-size: var(--text-base);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.importance-toggle-icon.active {
  background: #f59e0b;
  border-color: #f59e0b;
}

/* "Include peer catalysts" toggle — a single ios-toggle-row with a two-line
   label (title + short explanation), reusing the same switch styling as the
   calendar's Earnings-only/Macro toggles. */
.ios-toggle-label-group { display: flex; flex-direction: column; gap: 2px; }
.ios-toggle-sublabel { font-size: var(--text-xs); font-weight: 400; color: var(--text-muted); }

/* Trial banner */
.trial-banner {
  background: var(--success-light);
  border: 1px solid var(--success);
  border-radius: var(--radius-lg);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}
.trial-banner .trial-text {
  color: var(--success);
  font-weight: 500;
}

/* Onboarding card (empty watchlist prompt on home) */
.onboard-card {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  background: var(--accent-light);
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.onboard-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.onboard-icon svg { width: 22px; height: 22px; }
.onboard-body { flex: 1; min-width: 0; }
.onboard-body h3 {
  margin: 0 0 4px;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
}
.onboard-body p {
  margin: 0 0 var(--sp-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.onboard-actions {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  flex-wrap: wrap;
}
.onboard-dismiss {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  line-height: 1;
}
.onboard-dismiss:hover {
  background: rgba(0,0,0,0.05);
  color: var(--text-primary);
}
@media (max-width: 600px) {
  .onboard-card { padding: var(--sp-3); gap: var(--sp-3); }
  .onboard-icon { width: 32px; height: 32px; }
  .onboard-icon svg { width: 18px; height: 18px; }
}

/* Homepage social-proof strip — non-subscribers only (see the !_isSubbed
   check in renderHome()). Deliberately styled as a real iOS grouped list
   (hairline row dividers, no colored background wash) rather than a call-
   out box — see CLAUDE.md for why the first version got redesigned. */
.home-proof-list {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--sp-5);
}
.home-proof-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
}
.home-proof-row + .home-proof-row { border-top: 1px solid var(--border); }
.home-proof-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.home-proof-icon svg { width: 16px; height: 16px; }
.home-proof-icon-blue { background: var(--accent); }
.home-proof-icon-green { background: var(--success); }
.home-proof-icon-gray { background: var(--text-muted); }
.home-proof-body { flex: 1; min-width: 0; }
.home-proof-title { font-size: var(--text-sm); font-weight: 600; line-height: 1.3; }
.home-proof-sub { font-size: var(--text-xs); color: var(--text-secondary); margin-top: 1px; line-height: 1.35; }
.home-proof-trailing {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--success);
}
.home-proof-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  animation: home-proof-pulse 1.8s ease-in-out infinite;
}
@keyframes home-proof-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .home-proof-pulse { animation: none; } }
.home-proof-quote-text { font-size: var(--text-sm); font-style: italic; line-height: 1.4; color: var(--text-primary); }
.home-proof-quote-by { font-size: var(--text-xs); color: var(--text-muted); margin-top: 3px; }
.home-proof-icon-amber { background: var(--warning); }
/* "Tour the site" is the one interactive row in an otherwise static list —
   reset the <button> defaults so it lines up with the plain rows above it,
   add a hover state and a trailing chevron so it visibly reads as tappable. */
.home-proof-row-action {
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.home-proof-row-action:hover { background: var(--bg-surface-2); }
.home-proof-chevron { flex-shrink: 0; font-size: 18px; color: var(--text-muted); }

/* Suggested tickers in empty watchlist state */
.suggested-tickers {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  justify-content: center;
  margin: var(--sp-4) 0 var(--sp-2);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.suggested-ticker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.suggested-ticker:hover {
  border-color: var(--accent);
  background: var(--accent-light);
  color: var(--accent);
}
.suggested-plus {
  color: var(--accent);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
}
.suggested-sym { letter-spacing: 0.02em; }

/* ─── Onboarding Tour Modal ─────────────────────────────────────────── */
.tour-modal {
  max-width: 460px;
  padding: var(--sp-6) var(--sp-6) var(--sp-4);
  position: relative;
  text-align: center;
}
.tour-skip {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-4);
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: var(--text-sm);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}
.tour-skip:hover {
  color: var(--text-primary);
  background: rgba(0,0,0,0.05);
}

.tour-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  margin: var(--sp-3) 0 var(--sp-4);
  padding: var(--sp-4);
  background: var(--bg-secondary, #f7f8fa);
  border-radius: var(--radius-lg);
}

/* Screenshot-based tour steps (home, calendar, watchlist) */
.tour-visual-screenshot {
  padding: var(--sp-2);
  background: linear-gradient(180deg, #f7f8fa 0%, #eef1f6 100%);
  min-height: 0;
}
.tour-screenshot {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  background: #fff;
}

/* Step 1 — mock catalyst card */
.tour-mock-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
  width: 100%;
  max-width: 280px;
  text-align: left;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.tour-mock-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.tour-mock-ticker {
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--text-primary);
  letter-spacing: 0.02em;
}
.tour-mock-title {
  font-size: var(--text-sm);
  color: var(--text-primary);
  font-weight: 500;
  margin-bottom: 2px;
}
.tour-mock-date {
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.tour-mock-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 700;
  color: #fff;
}
.tour-badge-high { background: #16a34a; }
.tour-badge-mid  { background: #f59e0b; }
.tour-badge-low  { background: #94a3b8; }

/* Step 2 — score rows */
.tour-visual-scores {
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
}
.tour-score-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 12px;
}
.tour-score-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
}

/* Step 3 — watchlist */
.tour-visual-watchlist {
  flex-direction: column;
  gap: var(--sp-3);
}
.tour-star {
  font-size: 44px;
  color: #f59e0b;
  line-height: 1;
}
.tour-tickers {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  justify-content: center;
}
.tour-ticker-chip {
  padding: 6px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}

/* Text */
.tour-title {
  font-size: var(--text-xl);
  font-weight: 700;
  margin: 0 0 var(--sp-2);
  color: var(--text-primary);
}
.tour-body {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 0 var(--sp-4);
}

/* Step 6 (preview viewers) — "try your ticker" search + live-count preview */
.tour-ticker-search {
  position: relative;
  margin-bottom: var(--sp-3);
}
.tour-ticker-search input {
  width: 100%;
  padding: 13px 16px 13px 44px;
  font-size: 15px;
  font-weight: 500;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--bg-surface-2);
  color: var(--text-primary);
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s;
}
.tour-ticker-search input:focus { border-color: var(--accent); background: var(--bg-surface); }
.tour-ticker-search-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}
.tour-ticker-search .search-results-dropdown { left: 0; right: 0; }
.tour-ticker-preview {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 14px);
  background: var(--bg-surface);
  padding: var(--sp-4);
}
.tour-ticker-preview-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.tour-ticker-preview-sym {
  font-size: var(--text-md, 16px);
  font-weight: 700;
  color: var(--text-primary);
}
.tour-ticker-preview-name {
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.tour-ticker-preview-count {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}
.tour-ticker-preview-num {
  font-size: 32px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}
.tour-ticker-preview-label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.4;
}

/* Footer nav */
.tour-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}
.tour-dots {
  display: flex;
  gap: 6px;
}
.tour-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  transition: background 0.15s ease;
}
.tour-dot.active { background: var(--accent); }
.tour-nav {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}

/* Tour Next button — bigger touch target on mobile, tactile press flash */
#tourNext {
  min-height: 44px;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 600;
  transition: transform 0.12s ease, background 0.12s ease;
}
#tourNext.is-pressing {
  transform: scale(0.96);
  filter: brightness(0.92);
}

/* Step-3 CTA block replaces .tour-footer buttons */
.tour-final-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}

@media (max-width: 480px) {
  .tour-modal { padding: var(--sp-5) var(--sp-4) var(--sp-3); }
  .tour-visual { min-height: 120px; padding: var(--sp-3); }
  .tour-title { font-size: var(--text-lg); }
}

/* Footer */
.app-footer {
  border-top: 1px solid var(--border);
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.footer-links {
  margin-bottom: var(--sp-2);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.footer-links a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color .15s ease;
}
.footer-links a:hover { color: var(--accent); }
.footer-sep { color: var(--text-muted); opacity: .5; }

/* ─── Legal Pages (Terms + Privacy) ──────────────── */
.legal-page {
  max-width: 720px;
  margin: var(--sp-8) auto;
  padding: 0 var(--sp-4);
  color: var(--text-primary);
  line-height: 1.65;
}
.legal-page h1 {
  font-size: var(--text-2xl);
  font-weight: 700;
  margin-bottom: var(--sp-2);
  letter-spacing: -0.02em;
}
.legal-page h2 {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-2);
  letter-spacing: -0.01em;
}
.legal-page p, .legal-page ul {
  margin-bottom: var(--sp-3);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
.legal-page ul {
  padding-left: var(--sp-5);
}
.legal-page li {
  margin-bottom: var(--sp-1);
}
.legal-page a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-page a:hover { opacity: .8; }
.legal-meta {
  color: var(--text-muted) !important;
  font-size: var(--text-xs) !important;
  margin-bottom: var(--sp-6) !important;
}

/* ─── Timeline Roadmap ───────────────────────────────────── */
.timeline {
  position: relative;
  padding-left: 32px;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border-strong);
  border-radius: 1px;
}
.timeline-marker {
  position: relative;
  padding: 8px 0 4px;
}
.timeline-marker .marker-label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 4px 12px;
  background: var(--accent-light);
  border-radius: 980px;
}
.timeline-marker::before {
  content: '';
  position: absolute;
  left: -32px;
  top: 12px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: 2.5px solid var(--bg);
  box-shadow: 0 0 0 2px var(--accent);
  z-index: 2;
}
.timeline-item {
  position: relative;
  margin: 6px 0 24px;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: -27px;
  top: 20px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  z-index: 2;
  border: 2px solid var(--bg);
}
.timeline-item.tl-blue::before { background: var(--accent); box-shadow: 0 0 0 2px var(--accent-light); }
.timeline-item.tl-green::before { background: var(--success); box-shadow: 0 0 0 2px var(--success-light); }
.timeline-item.tl-amber::before { background: var(--warning); box-shadow: 0 0 0 2px var(--warning-light); }
.timeline-item.tl-red::before { background: var(--danger); box-shadow: 0 0 0 2px var(--danger-light); }
.timeline-item.tl-purple::before { background: #a855f7; box-shadow: 0 0 0 2px rgba(168,85,247,0.15); }
.timeline-item.tl-gray::before { background: var(--text-muted); box-shadow: 0 0 0 2px var(--bg-surface-2); }

.timeline-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-5);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
  cursor: pointer;
}
.timeline-card:hover {
  border-color: transparent;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.timeline-card .tl-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 8px;
}
.timeline-card .tl-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.timeline-card .tl-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-surface-2, #f4f4f6);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.timeline-card .tl-logo .sc-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}
.timeline-card .tl-logo-stack {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.timeline-card .tl-logo-stack .tl-logo {
  width: 22px;
  height: 22px;
  box-shadow: 0 0 0 2px var(--bg-surface);
}
.timeline-card .tl-logo-stack .tl-logo-page {
  margin-left: -8px;
}
.timeline-card .tl-date {
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
}
.timeline-card .tl-why-preview {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.4;
  margin-top: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.timeline-card .tl-rel {
  font-size: 10px;
  text-transform: capitalize;
}
.timeline-card .tl-countdown {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 980px;
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}
.timeline-card .tl-headline {
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.timeline-card .tl-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  margin-top: 6px;
}
.timeline-card .tl-why {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  background: var(--bg-surface-2);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  margin-top: 8px;
  line-height: 1.5;
  display: none;
}
.timeline-card .tl-why.visible { display: block; }
.timeline-card .tl-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  gap: 8px;
}
.timeline-card .tl-scores {
  display: flex;
  gap: 12px;
}
.timeline-end {
  position: relative;
  padding: 8px 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-style: italic;
}

/* Compact timeline pilot (AAPL only, see COMPACT_TIMELINE_TICKERS) — headline
   up front, everything else collapsed behind a Details toggle so cards sit
   closer together. */
.timeline-item.tl-compact { margin-bottom: 10px; }
.timeline-card.tl-compact { padding: var(--sp-3) var(--sp-4); }
.timeline-card.tl-compact .tl-headline { margin-bottom: 0; }
.timeline-card.tl-compact .tl-details { display: none; }
.timeline-card.tl-compact.expanded .tl-details { display: block; margin-top: 8px; }
.timeline-card.tl-compact .tl-why { display: block; margin-top: 0; }
.tl-expand-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 0;
  border: none;
  background: none;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
}
.tl-expand-chevron { transition: transform var(--transition-fast); }
.timeline-card.tl-compact.expanded .tl-expand-chevron { transform: rotate(180deg); }
.tl-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  margin-top: 6px;
}
.tl-actions .tl-expand-btn { margin-top: 0; }
/* Same 12px blue text language as .tl-expand-btn (Details). Sits
   immediately to the right of Details — not a second header control. */
.tl-cal-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: none;
  background: none;
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.2;
  cursor: pointer;
}
.tl-cal-btn:hover { color: var(--accent-hover); }
.tl-cal-btn svg { flex-shrink: 0; }
.cal-export-sheet {
  max-width: 400px;
  padding: var(--sp-6);
}
.cal-export-sheet h2 {
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0 28px 4px 0;
  line-height: 1.3;
}
.cal-export-sub {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0 0 16px;
}
.cal-export-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 16px;
  margin: 0 0 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: var(--text-sm);
  text-align: left;
}
.cal-export-choice:last-child { margin-bottom: 0; }
.cal-export-choice:hover {
  border-color: var(--accent);
  background: var(--accent-light);
}
.cal-export-choice-label { font-weight: 700; }
.cal-export-choice-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: 500;
}
.timeline-end::before {
  content: '';
  position: absolute;
  left: -27px;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  z-index: 2;
}

/* ─── Calendar ─────────────────────────────────────────────────────────── */
.cal-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 16px; margin: 24px 0 20px;
}
.cal-controls-wrap {
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
/* iOS Settings-style toggle list — Earnings-only/Macro are two INDEPENDENT
   booleans, not mutually-exclusive options, so a segmented control would
   misrepresent them. Real switches are the honest (and more native-feeling)
   iOS pattern for this. */
.ios-toggle-group {
  display: flex; flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  min-width: 220px;
}
.ios-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
}
.ios-toggle-row + .ios-toggle-row { border-top: 1px solid var(--border); }
.ios-toggle-label {
  display: flex; align-items: center;
  font-size: var(--text-sm); font-weight: 500; color: var(--text-primary);
}
.ios-switch {
  position: relative;
  flex-shrink: 0;
  width: 42px; height: 25px;
  border-radius: 13px;
  background: var(--bg-surface-3, #d1d5db);
  padding: 0;
  transition: background 150ms ease;
}
.ios-switch .ios-switch-knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 21px; height: 21px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 1px 1px rgba(0,0,0,0.15);
  transition: transform 200ms cubic-bezier(0.34, 1.2, 0.64, 1);
}
.ios-switch.on { background: var(--accent); }
.ios-switch.on .ios-switch-knob { transform: translateX(17px); }
.ios-switch:disabled { opacity: 0.4; cursor: not-allowed; }
.cal-month-nav {
  display: flex; align-items: center; gap: 4px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px 8px;
}
.cal-nav-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  color: var(--text-secondary);
}
.cal-nav-arrow:hover { background: var(--bg-surface-2); color: var(--text-primary); }
.cal-month-label {
  font-weight: 600; font-size: var(--text-base);
  min-width: 130px; text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Mobile: stack the toggle group and month-nav toolbar, both full width. */
@media (max-width: 768px) {
  .cal-header {
    align-items: stretch;
  }
  .cal-controls-wrap {
    width: 100%;
    align-items: stretch;
  }
  .cal-month-nav {
    justify-content: center;
  }
  .cal-month-label {
    min-width: 110px;
    font-size: var(--text-sm, 14px);
  }
}
.macro-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #f59e0b;
  margin-right: 6px;
  vertical-align: middle;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}
.earnings-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22c55e;
  margin-right: 6px;
  vertical-align: middle;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
}
.cal-summary {
  font-size: var(--text-sm); color: var(--text-muted);
  margin-bottom: 12px;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 10px;
}
.cal-weekday {
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 6px 0;
}
.cal-cell {
  min-height: 120px;
  background: var(--bg-surface-2);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 6px 6px 4px;
  display: flex; flex-direction: column;
  transition: border-color 0.15s ease, transform 0.05s ease;
  overflow: hidden;
}
.cal-cell-has { cursor: pointer; }
.cal-cell-has:hover { border-color: var(--accent); }
.cal-cell-muted { opacity: 0.42; }
.cal-cell-today {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-light) inset;
}
.cal-cell-date {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
  padding: 0 2px;
}
.cal-cell-today .cal-cell-date { color: var(--accent); }
.cal-cell-items {
  display: flex; flex-direction: column; gap: 3px;
  flex: 1; min-height: 0;
}
.cal-pill {
  display: flex; align-items: center; gap: 5px;
  width: 100%;
  text-align: left;
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.2;
  background: var(--bg-surface);
  color: var(--text);
  overflow: hidden;
  pointer-events: none;
}
.cal-pill-sym {
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: 10px;
  flex-shrink: 0;
}
.cal-pill-head {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  opacity: 0.85;
}
/* Pill color variants — soft tinted backgrounds with left accent bar */
.cal-pill-blue   { background: rgba(0,122,255,0.12);   border-left: 3px solid #0a84ff; }
.cal-pill-green  { background: rgba(48,209,88,0.14);   border-left: 3px solid #30d158; }
.cal-pill-red    { background: rgba(255,69,58,0.14);   border-left: 3px solid #ff453a; }
.cal-pill-amber  { background: rgba(255,159,10,0.14);  border-left: 3px solid #ff9f0a; }
.cal-pill-orange { background: rgba(255,159,10,0.14);  border-left: 3px solid #ff9f0a; }
.cal-pill-purple { background: rgba(191,90,242,0.14);  border-left: 3px solid #bf5af2; }
.cal-pill-gray   { background: var(--bg-surface-3);    border-left: 3px solid var(--text-muted); }

.cal-pill-dot {
  width: 10px; height: 10px;
  border-radius: 3px;
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
}
.cal-pill-dot.cal-pill-blue   { background: #0a84ff; border: none; }
.cal-pill-dot.cal-pill-green  { background: #30d158; border: none; }
.cal-pill-dot.cal-pill-red    { background: #ff453a; border: none; }
.cal-pill-dot.cal-pill-amber  { background: #ff9f0a; border: none; }
.cal-pill-dot.cal-pill-purple { background: #bf5af2; border: none; }
.cal-pill-dot.cal-pill-gray   { background: var(--text-muted); border: none; }

.cal-more {
  color: var(--accent);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  pointer-events: none;
}

/* Paywall: locked calendar pills */
.cal-pill-locked {
  filter: blur(4px);
  letter-spacing: 2px;
  color: var(--text-muted);
  user-select: none;
  pointer-events: none;
}
.cal-pill-is-locked {
  opacity: 0.75;
}
.cal-pill-is-locked:hover {
  opacity: 1;
  cursor: pointer;
}

/* Paywall banner at top of calendar */
.cal-paywall-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.10), rgba(245, 158, 11, 0.04));
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 10px;
}
.cal-paywall-banner-body {
  display: flex; align-items: center; gap: 12px;
  flex: 1; min-width: 0;
}
.cal-paywall-banner-icon {
  font-size: 22px; flex-shrink: 0;
}
.cal-paywall-banner-text { min-width: 0; }
.cal-paywall-banner-title {
  font-weight: 700; font-size: var(--text-sm);
  color: var(--text-primary);
}
.cal-paywall-banner-sub {
  font-size: var(--text-xs); color: var(--text-muted);
  margin-top: 2px;
}
@media (max-width: 640px) {
  .cal-paywall-banner {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }
  .cal-paywall-banner .btn { width: 100%; }
}

/* Locked rows in day-detail modal */
.cal-detail-row-locked {
  opacity: 0.85;
  position: relative;
}
.cal-detail-row-locked:hover {
  opacity: 1;
  background: rgba(245, 158, 11, 0.05);
}
.cal-detail-paywall {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  margin: 12px 12px 0;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.30);
  border-radius: 8px;
}
.cal-detail-paywall-text {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}
@media (max-width: 480px) {
  .cal-detail-paywall { flex-direction: column; align-items: stretch; }
  .cal-detail-paywall .btn { width: 100%; }
}

.cal-legend {
  display: flex; flex-wrap: wrap; gap: 16px 20px;
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.cal-legend-item { display: inline-flex; align-items: center; }

/* Day detail modal — compact, screenshot-friendly */
.cal-detail-modal {
  padding: 16px 18px 14px !important;
}
.sheet-handle { display: none; }
/* iOS-style bottom sheet on mobile: slides up from the bottom edge with
   rounded top corners and a drag handle, instead of the generic centered
   modal card every other dialog uses. Scoped to the shared .sheet-overlay/
   .sheet-card/.sheet-list classes (originally #calDetailModal-only, widened
   so the Catalyst Snapshot modal gets identical mobile treatment without
   duplicating this whole block) so it reliably outranks the shared
   .modal-overlay/.modal rules regardless of source order. Desktop is
   untouched — this only kicks in at <=768px. */
@media (max-width: 768px) {
  .sheet-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .sheet-overlay .sheet-card {
    width: 100%;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
    transform: translateY(100%);
    transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  .sheet-overlay.visible .sheet-card {
    transform: translateY(0);
  }
  .sheet-overlay .sheet-list {
    flex: 1;
    max-height: none;
  }
  .sheet-handle {
    display: block;
    width: 36px; height: 5px;
    border-radius: 3px;
    background: var(--border-strong, #cbd5e1);
    margin: 0 auto 12px;
    flex-shrink: 0;
  }
}

/* Catalyst Snapshot modal (ticker page) — reuses the day-detail modal's
   brand header/footer + bottom-sheet shell. Rows stay dense: logo +
   window/day timing + headline + at most one tiny badge. No
   why_it_matters wall, no importance score, no click-through. Same id
   set as the ticker Catalyst Roadmap for the current peer toggle. */
.catalyst-snapshot-modal {
  padding: 16px 18px 14px !important;
}
.snap-ticker-header {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 10px; margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.snap-ticker-sym {
  font-weight: 800; font-size: 17px; letter-spacing: -0.01em;
  color: var(--text-primary);
}
.snap-ticker-name {
  font-size: 12px; color: var(--text-muted);
}
.snap-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 4px;
}
.snap-row-logo {
  display: block; width: 20px; height: 20px; border-radius: 5px;
  flex-shrink: 0; overflow: hidden;
}
.snap-row-logo-stack {
  display: inline-flex; align-items: center; flex-shrink: 0;
}
.snap-row-logo-stack .snap-row-logo {
  border-radius: 50%; box-shadow: 0 0 0 2px var(--bg-surface, #fff);
}
.snap-row-logo-stack .snap-row-logo-page {
  margin-left: -8px;
}
.snap-ticker-header-logo {
  display: block; width: 36px; height: 36px; border-radius: 8px;
  flex-shrink: 0; overflow: hidden;
}
.snap-date {
  font-size: 12px; font-weight: 700; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  min-width: 88px; flex-shrink: 0;
  white-space: nowrap;
}
.snap-headline {
  font-size: 13.5px; line-height: 1.35; color: var(--text-primary);
}
.snap-badge {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 980px;
  padding: 1px 6px;
}
.snap-more {
  text-align: center; font-size: 12px; color: var(--text-muted);
  padding: 8px 0 2px;
}
.snap-group { padding-top: 4px; }
.snap-group-heading,
.tl-group-heading {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 14px 0 8px;
}
.snap-group:first-child .snap-group-heading,
.timeline > .tl-group-heading:first-child { margin-top: 2px; }
.home-cal-preview-list {
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
}
.home-cal-preview-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.home-cal-preview-row:last-child { border-bottom: none; }
.home-cal-preview-row:hover { background: var(--bg-surface-2); }
.home-cal-preview-row:active { transform: scale(0.98); }
.home-cal-preview-logo {
  display: block; width: 22px; height: 22px; border-radius: 5px;
  flex-shrink: 0; overflow: hidden;
}
.home-cal-preview-ticker {
  font-size: 12.5px; font-weight: 700; color: var(--accent);
  min-width: 44px; flex-shrink: 0;
}
.home-cal-preview-date {
  font-size: 12px; font-weight: 700; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  min-width: 44px; flex-shrink: 0;
}
.home-cal-preview-headline {
  font-size: 13.5px; line-height: 1.35; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.home-cal-preview-viewall {
  display: block; width: 100%; margin-top: 10px;
  padding: 10px; text-align: center;
  background: none; border: none; cursor: pointer;
  font-size: 13.5px; font-weight: 600; color: var(--accent);
}
.home-cal-preview-viewall:hover { text-decoration: underline; }

/* ─── Week Snapshot (Calendar page) ─────────────────────────────── */
.week-snap-nav {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-bottom: 10px;
}
.week-snap-title {
  font-size: 15px; font-weight: 700; color: var(--text-primary);
  min-width: 150px; text-align: center;
}
.week-snap-row {
  position: relative;
  padding-right: 96px; /* room for the edit controls without reflowing the headline */
}
.week-snap-row-controls {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  display: flex; gap: 4px;
}
.week-snap-ctrl {
  width: 24px; height: 24px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--bg-surface);
  color: var(--text-secondary); font-size: 12px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.week-snap-ctrl:hover { background: var(--bg-surface-2); }
.week-snap-ctrl:disabled { opacity: 0.35; cursor: default; }
.week-snap-ctrl.week-snap-remove {
  color: var(--danger, #ef4444); border-color: var(--danger, #ef4444);
}
.week-snap-search { position: relative; padding: 4px 4px 10px; }
.week-snap-search input {
  width: 100%; padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-surface);
  color: var(--text-primary); font-size: 13.5px;
}
.week-snap-search-results {
  display: none; position: absolute; top: calc(100% + 4px); left: 4px; right: 4px;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.14), 0 2px 6px rgba(0,0,0,0.06);
  max-height: 260px; overflow-y: auto; z-index: 20;
}
.week-snap-search-results.visible { display: block; }
.week-snap-footer-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 4px;
}
.week-snap-footer-row .cal-detail-footer { flex: 1; }
.cal-detail-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
/* Icon + real text (not a raster wordmark) so it reads crisply in a
   screenshot and includes the actual domain — the old version used two
   stacked <img> lockups (brand-lockup-light/-dark) toggled by CSS classes
   that, in this modal specifically, collided in specificity with a later
   .cal-detail-brand-img{display:block} rule: BOTH images rendered at once
   side by side, the invisible one just eating extra width next to the
   visible one (that's what read as "too much gap" next to the logo). */
.cal-detail-brand { display: flex; align-items: center; gap: 6px; }
.cal-detail-brand-icon { height: 20px; width: auto; display: block; }
.cal-detail-brand-icon-white { display: none; }
[data-theme="dark"] .cal-detail-brand-icon-white { display: block; }
[data-theme="dark"] .cal-detail-brand-icon-navy { display: none; }
.cal-detail-brand-text {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  white-space: nowrap;
}
.cal-detail-close {
  background: transparent; border: none;
  font-size: 24px; line-height: 1; color: var(--text-muted);
  cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.cal-detail-close:hover { background: var(--bg-surface-2); color: var(--text); }
.cal-detail-title {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.cal-detail-date {
  font-size: 15px; font-weight: 700; color: var(--text);
  letter-spacing: -0.01em;
}
.cal-detail-count {
  font-size: 12px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.cal-detail-list {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 68vh; overflow-y: auto;
}
.cal-detail-row {
  display: flex; gap: 10px; align-items: center;
  padding: 6px 8px;
  background: var(--bg-surface-2);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.1s ease;
}
.cal-detail-row:hover { background: var(--bg-surface-3); }

/* "Top catalysts to watch today" — the admin-curated top-30 tickers pulled
   out of the day's list into their own highlighted box up top. */
.cal-detail-priority-box {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px;
  margin-bottom: 4px;
  background: color-mix(in srgb, var(--warning, #f59e0b) 8%, var(--bg-surface));
  border: 1px solid color-mix(in srgb, var(--warning, #f59e0b) 30%, var(--border));
  border-radius: 10px;
}
.cal-detail-priority-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--warning, #f59e0b);
  padding: 2px 2px 4px;
}
.cal-detail-section-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 8px 0 2px;
  padding: 0 2px;
}

/* Admin: Priority Tickers list */
.priority-ticker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.priority-ticker-rank {
  min-width: 20px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.priority-ticker-sym {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--text-primary);
}
.priority-ticker-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}
.priority-ticker-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.priority-ticker-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.priority-ticker-btn.priority-ticker-remove:hover { border-color: var(--danger); color: var(--danger); }

/* Admin: Fan-Outs editor */
.fanout-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--bg-surface);
  max-width: 720px;
}
.fanout-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.fanout-headline { font-size: 14px; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.fanout-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.fanout-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fanout-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px 6px 3px 10px;
  font-size: 12px; font-family: var(--font-mono); font-weight: 600;
  color: var(--text-primary);
}
.fanout-chip button {
  background: transparent; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 14px; line-height: 1;
  padding: 2px 4px; border-radius: 50%;
}
.fanout-chip button:hover { background: var(--bg-surface-3); color: var(--danger); }
.fanout-ticker-group {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  background: var(--bg-surface-2);
  max-width: 760px;
}
.fanout-ticker-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.fanout-ticker-sym { font-weight: 700; font-size: 15px; color: var(--text-primary); font-family: var(--font-mono); }
.fanout-ticker-summary { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.fanout-gap-flag { color: var(--danger); font-weight: 600; }
.fanout-ticker-items { display: flex; flex-direction: column; gap: 10px; }
.fanout-ticker-items .fanout-card { background: var(--bg-surface); }
.cal-detail-row-macro { align-items: flex-start; flex-wrap: wrap; }
.cal-detail-row-macro.expanded .cal-detail-macro-body { display: block !important; }
.cal-detail-row-macro.expanded .cal-detail-expand-hint::after { content: '\A0▾'; }
.cal-detail-sym {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  color: var(--accent);
  min-width: 48px;
  flex-shrink: 0;
}
.cal-detail-body { flex: 1; min-width: 0; }
.cal-detail-head {
  font-weight: 500;
  font-size: 13px;
  line-height: 1.3;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-detail-meta {
  display: flex; gap: 6px; align-items: center;
  font-size: 10px; color: var(--text-muted);
}
.cal-detail-meta .badge {
  font-size: 9px; padding: 1px 6px;
}
.cal-detail-importance { font-variant-numeric: tabular-nums; }
.cal-detail-footer {
  text-align: center;
  font-size: 10px; font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* Mobile */
@media (max-width: 720px) {
  .cal-cell { min-height: 84px; padding: 4px; }
  .cal-pill-head { display: none; }
  .cal-pill { justify-content: center; padding: 2px 4px; }
  .cal-cell-date { font-size: 10px; }
}

/* ─── Mobile agenda list (replaces 7-col grid on narrow screens) ─── */
.cal-grid-desktop { display: grid; }
.cal-agenda-mobile { display: none; flex-direction: column; gap: 10px; }

@media (max-width: 640px) {
  .cal-grid-desktop { display: none !important; }
  .cal-agenda-mobile { display: flex !important; }
}

/* Past days (current month only) are collapsed behind this toggle by
   default — nothing to scroll past to reach today, and no reason to see
   yesterday unless you go looking for it. */
.cal-agenda-past { display: none; flex-direction: column; gap: 10px; }
.cal-agenda-mobile.cal-agenda-past-open .cal-agenda-past { display: flex; }
.cal-agenda-past-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-surface);
  border: 1px dashed var(--border-strong, var(--border));
  border-radius: 12px;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
}
.cal-agenda-past-toggle:hover { background: var(--bg-surface-2); color: var(--text-primary); }
.cal-agenda-past-toggle-chev { transition: transform 200ms ease; }
.cal-agenda-mobile.cal-agenda-past-open .cal-agenda-past-toggle-chev { transform: rotate(90deg); }

.cal-agenda-day {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.05s ease, border-color 0.15s ease, background 0.1s ease;
  min-height: 44px;
}
.cal-agenda-day:active { transform: scale(0.995); background: var(--bg-surface-2); }
.cal-agenda-day-today {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-light) inset;
}

.cal-agenda-date {
  flex-shrink: 0;
  width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 0;
  background: var(--bg-surface-2);
  border-radius: 10px;
  text-align: center;
}
.cal-agenda-day-today .cal-agenda-date { background: var(--accent-light); }
.cal-agenda-weekday {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cal-agenda-daynum {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--text);
}
.cal-agenda-day-today .cal-agenda-daynum { color: var(--accent); }
.cal-agenda-month {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cal-agenda-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cal-agenda-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cal-agenda-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--bg-surface-2);
  min-width: 0;
}
.cal-agenda-logo {
  width: 18px; height: 18px;
  border-radius: 4px;
  flex-shrink: 0;
  object-fit: contain;
  background: #fff;
}
.cal-agenda-logo-fallback { background: var(--bg-surface-3); }
.cal-agenda-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.cal-agenda-sym {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  color: var(--text);
}
.cal-agenda-head {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-agenda-more {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  padding: 2px 8px;
}

.cal-agenda-chev {
  align-self: center;
  color: var(--text-muted);
  font-size: 20px;
  font-weight: 300;
  padding: 0 4px;
  flex-shrink: 0;
}

/* Logos on calendar pills + detail rows — use FMP 250px source, downscale crisply */
.cal-pill-logo {
  width: 14px; height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
  object-fit: contain;
  background: #fff;
  image-rendering: -webkit-optimize-contrast;
}
.cal-detail-logo {
  width: 24px; height: 24px;
  border-radius: 6px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--border);
  flex-shrink: 0;
  padding: 1px;
}
.cal-detail-logo-fallback {
  background: var(--bg-surface-3);
}
.cal-detail-row { align-items: center; }

/* MACRO catalysts use an inline US flag SVG instead of a ticker logo */
.cal-macro-flag {
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  image-rendering: -webkit-optimize-contrast;
}

/* Sharper site-wide logos (FMP returns 250x250 PNG with transparency) */
.sc-logo {
  object-fit: contain;
  background: #fff;
  image-rendering: -webkit-optimize-contrast;
}

/* ============== Back Button (nav history) ============== */
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 8px 10px;
  margin: 0 0 20px 0;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 20px;
  color: var(--text-secondary, #5a6472);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.back-btn:hover {
  background: rgba(0, 0, 0, 0.07);
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--text-primary, #1a1d21);
  transform: translateX(-1px);
}
.back-btn:active {
  transform: translateX(-2px);
}
.back-btn svg {
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.back-btn:hover svg {
  transform: translateX(-2px);
}
.back-btn span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}
@media (prefers-color-scheme: dark) {
  .back-btn {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.72);
  }
  .back-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.14);
    color: #fff;
  }
}

/* ─── Past Catalysts ──────────────────────────────────────────────────────── */
.past-catalysts {
  margin: 8px 0 20px;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;
  background: rgba(0,0,0,0.02);
  overflow: hidden;
  transition: all 0.15s ease;
}
.past-catalysts[open] {
  background: rgba(0,0,0,0.015);
  border-color: rgba(0,0,0,0.08);
}
.past-catalysts summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  color: var(--text-secondary, #5a6472);
  font-size: 13px;
  font-weight: 500;
  -webkit-tap-highlight-color: transparent;
}
.past-catalysts summary::-webkit-details-marker { display: none; }
.past-catalysts summary:hover { color: var(--text-primary, #1a1d21); }
.past-catalysts .pc-icon {
  display: inline-flex;
  color: var(--text-muted, #8a929c);
}
.past-catalysts .pc-label { flex-shrink: 0; }
.past-catalysts .pc-count {
  padding: 2px 8px;
  background: rgba(0,0,0,0.06);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary, #5a6472);
  line-height: 1.4;
}
.past-catalysts .pc-chevron {
  margin-left: auto;
  display: inline-flex;
  color: var(--text-muted, #8a929c);
  transition: transform 0.2s ease;
}
.past-catalysts[open] .pc-chevron { transform: rotate(180deg); }
.past-catalysts .pc-list {
  padding: 4px 0 8px;
  border-top: 1px solid rgba(0,0,0,0.05);
}
.past-catalysts .pc-row {
  display: flex;
  gap: 12px;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(0,0,0,0.03);
}
.past-catalysts .pc-row:last-child { border-bottom: none; }
.past-catalysts .pc-date {
  flex-shrink: 0;
  width: 84px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #8a929c);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding-top: 2px;
}
.past-catalysts .pc-main { flex: 1; min-width: 0; }
.past-catalysts .pc-headline {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary, #1a1d21);
  line-height: 1.4;
  margin-bottom: 3px;
}
.past-catalysts .pc-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--text-muted, #8a929c);
}
.past-catalysts .pc-type {
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 600;
  color: var(--text-secondary, #5a6472);
}
.past-catalysts .pc-source {
  color: var(--text-muted, #8a929c);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  transition: color 0.15s ease;
}
.past-catalysts .pc-source:hover { color: var(--accent, #63bce8); border-bottom-style: solid; }

@media (prefers-color-scheme: dark) {
  .past-catalysts {
    border-color: rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
  }
  .past-catalysts[open] {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.1);
  }
  .past-catalysts .pc-count { background: rgba(255,255,255,0.08); }
  .past-catalysts .pc-list { border-top-color: rgba(255,255,255,0.06); }
  .past-catalysts .pc-row { border-bottom-color: rgba(255,255,255,0.04); }
}

/* ─── Chart Toggle Button (in ticker header) ───────────────────────────────── */
.chart-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 7px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-surface, #fff);
  border: 1px solid var(--border, rgba(0,0,0,0.1));
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  letter-spacing: -0.005em;
  margin-right: 8px;
}
.chart-toggle-btn:hover {
  background: var(--bg-secondary, rgba(0,0,0,0.04));
  border-color: var(--border-strong, rgba(0,0,0,0.15));
}
.chart-toggle-btn:active { transform: scale(0.97); }
.chart-toggle-btn .chart-toggle-caret {
  transition: transform 0.2s ease;
  opacity: 0.6;
}
.chart-toggle-btn.open .chart-toggle-caret {
  transform: rotate(180deg);
}
.chart-toggle-btn.open {
  background: var(--accent-soft, rgba(0,122,255,0.08));
  border-color: var(--accent, #007aff);
  color: var(--accent, #007aff);
}
@media (max-width: 640px) {
  .chart-toggle-btn {
    padding: 6px 10px 6px 8px;
    font-size: 12px;
  }
  .chart-toggle-btn .chart-toggle-label {
    display: inline;
  }
}

/* ─── TradingView Chart Card ────────────────────────────────────────────── */
.tv-chart-card {
  background: var(--bg-surface, #fff);
  border: 1px solid var(--border, rgba(0,0,0,0.06));
  border-radius: 14px;
  padding: 16px 16px 12px;
  margin: 0 0 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.tv-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 12px;
  flex-wrap: wrap;
}
.tv-chart-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.tv-chart-ranges {
  display: inline-flex;
  background: var(--bg-secondary, rgba(0,0,0,0.04));
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.tv-range {
  border: 0;
  background: transparent;
  color: var(--text-secondary, #666);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  min-width: 36px;
  transition: background 0.15s ease, color 0.15s ease;
}
.tv-range:hover { color: var(--text-primary); }
.tv-range.active {
  background: var(--bg-surface, #fff);
  color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.tv-chart-wrap {
  position: relative;
  width: 100%;
  height: 380px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-secondary, rgba(0,0,0,0.03));
}
@media (max-width: 640px) {
  .tv-chart-card { padding: 12px 12px 10px; }
  .tv-chart-wrap { height: 300px; }
  .tv-chart-title { font-size: 14px; }
  .tv-range { min-width: 32px; padding: 4px 8px; font-size: 11px; }
}

/* ─── Analyst Ratings Card ─────────────────────────────────────────────── */
.analyst-card {
  background: var(--bg-surface, #fff);
  border: 1px solid var(--border, rgba(0,0,0,0.06));
  border-radius: 10px;
  margin: 12px 0 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  overflow: hidden;
}
.analyst-card-loading {
  min-height: 40px;
  padding: 10px 14px;
}
.analyst-card-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 13px;
}
.analyst-card-empty .analyst-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.analyst-card-empty .analyst-empty { font-size: 12px; color: var(--text-muted); padding: 0; }
.analyst-skel {
  height: 24px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(0,0,0,0.04), rgba(0,0,0,0.08), rgba(0,0,0,0.04));
  background-size: 200% 100%;
  animation: analyst-shimmer 1.4s ease-in-out infinite;
}

/* Compact single-row layout */
.analyst-compact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: background 0.15s ease;
}
.analyst-compact-row:hover { background: rgba(0,0,0,0.02); }
.analyst-compact-row:focus-visible { outline: 2px solid var(--accent, #14b8a6); outline-offset: -2px; }
.analyst-bar-inline {
  flex: 1 1 auto;
  min-width: 60px;
  max-width: 180px;
  height: 6px;
  margin: 0;
}
.analyst-chevron {
  font-size: 11px;
  color: var(--text-muted);
  transition: transform 0.2s ease;
  margin-left: auto;
  flex-shrink: 0;
}
.analyst-compact-row[aria-expanded="true"] .analyst-chevron {
  transform: rotate(180deg);
}
.analyst-details {
  padding: 4px 14px 12px;
  border-top: 1px solid rgba(0,0,0,0.04);
}
.analyst-period-row {
  font-size: 11px;
  color: var(--text-muted);
  margin: 8px 0 8px;
  font-weight: 500;
}
@keyframes analyst-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.analyst-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.analyst-header-left {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.analyst-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.analyst-period {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}
.analyst-consensus-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex-shrink: 0;
}
.consensus-strong-buy { background: rgba(22,163,74,0.14);   color: #15803d; }
.consensus-buy        { background: rgba(74,222,128,0.18);  color: #16a34a; }
.consensus-hold       { background: rgba(148,163,184,0.20); color: #475569; }
.consensus-sell       { background: rgba(251,146,60,0.20);  color: #c2410c; }
.consensus-strong-sell{ background: rgba(220,38,38,0.14);   color: #b91c1c; }

.analyst-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.analyst-total {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.analyst-delta {
  font-size: 11px;
  font-weight: 500;
  flex-shrink: 0;
  white-space: nowrap;
}
.analyst-delta.up   { color: #16a34a; }
.analyst-delta.down { color: #dc2626; }
.analyst-delta.flat { color: var(--text-muted); }

.analyst-bar {
  display: flex;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0,0,0,0.05);
  margin-bottom: 14px;
}
.analyst-bar-seg {
  height: 100%;
  transition: width 0.3s ease;
}
.seg-strong-buy  { background: #15803d; }
.seg-buy         { background: #4ade80; }
.seg-hold        { background: #cbd5e1; }
.seg-sell        { background: #fb923c; }
.seg-strong-sell { background: #dc2626; }

.analyst-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px 16px;
}
.analyst-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}
.analyst-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.analyst-legend-name {
  flex: 1;
  color: var(--text-secondary);
}
.analyst-legend-val {
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.analyst-empty {
  padding: 12px 0 4px;
  font-size: 13px;
  color: var(--text-muted);
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  .analyst-card {
    background: var(--bg-surface, #1a1a1a);
    border-color: rgba(255,255,255,0.08);
  }
  .analyst-bar { background: rgba(255,255,255,0.08); }
  .analyst-skel {
    background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  }
  .consensus-hold       { background: rgba(148,163,184,0.15); color: #cbd5e1; }
}

/* Mobile */
@media (max-width: 640px) {
  .analyst-card { padding: 14px 16px; }
  .analyst-header { flex-wrap: wrap; }
  .analyst-legend { grid-template-columns: repeat(2, 1fr); }
}

/* ─── User avatar + dropdown ─────────────────────────────────────────────── */
.user-menu-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.user-avatar-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0 !important;
  border-radius: 50%;
  border: 1px solid var(--border-color, var(--border, transparent));
  background: linear-gradient(135deg, var(--accent, #10b981) 0%, color-mix(in srgb, var(--accent, #10b981) 65%, #000) 100%);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.user-avatar-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.user-avatar-btn:focus-visible {
  outline: 2px solid var(--accent, #10b981);
  outline-offset: 2px;
}
.user-avatar-btn > span {
  display: block;
  transform: translateY(0);
}

.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  max-width: 280px;
  background: var(--bg-surface, #fff);
  border: 1px solid var(--border-color, var(--border, rgba(0,0,0,0.08)));
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
  padding: 6px;
  z-index: 200;
  display: none;
  flex-direction: column;
  gap: 2px;
}
.user-dropdown.open { display: flex; }

.user-dropdown-header {
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--border-color, var(--border, rgba(0,0,0,0.08)));
  margin-bottom: 4px;
}
.user-dropdown-email {
  font-size: var(--text-sm, 13px);
  font-weight: 500;
  color: var(--text-primary, #111);
  word-break: break-all;
  line-height: 1.3;
}
.user-dropdown-role {
  font-size: var(--text-xs, 11px);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary, #666);
}

.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-size: var(--text-sm, 13px);
  color: var(--text-primary, #111);
  cursor: pointer;
  text-align: left;
  transition: background 100ms ease;
}
.user-dropdown-item:hover,
.user-dropdown-item:focus-visible {
  background: var(--bg-surface-2, rgba(0,0,0,0.05));
  outline: none;
}
.user-dropdown-item svg {
  flex-shrink: 0;
  color: var(--text-secondary, #666);
}