/* ================================================================
   RONCA ATLAS — Aurora Theme
   Override layer for atlas.css.
   Load order: <link atlas.css>, then <link atlas-aurora.css>.
   Same CSS variable names → same JS / HTML works unchanged.
   ================================================================ */

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

/* ── 1. DESIGN TOKENS — remap dark → aurora ──────────────────── */
:root {
  /* Surfaces */
  --bg:   #fbfcfe;            /* page bg (cream-white) */
  --s1:   #ffffff;            /* cards, panels */
  --s2:   #f6f8fc;            /* elevated panel / chart bg */
  --s3:   #eef2f8;            /* hover state */
  --s4:   #e5ebf3;            /* active / selected */
  --s5:   #d8e0eb;            /* pressed */

  /* Borders */
  --bd:   rgba(15,20,36,.07);
  --bd2:  rgba(15,20,36,.11);
  --bd3:  rgba(15,20,36,.18);

  /* Text scale — tuned for WCAG AA on cream (#fbfcfe).
     #6c7593 hits ~5.3:1 vs the old #9aa3bc at ~2.8:1. */
  --hi:   #0f1424;            /* headings / strong  (~17:1) */
  --t:    #1f2740;            /* body               (~13:1) */
  --di:   #3d4666;            /* secondary           (~9.4:1) — was 4d5774 */
  --mu:   #545d7a;            /* faint label         (~6.7:1) — was 6c7593 */

  /* Accent — warm orange (Atlas Dawn's signature) */
  --bl:    #ff6b3d;
  --bl-h:  #ff8158;
  --bl2:   rgba(255,107,61,.10);
  --bl3:   rgba(255,107,61,.05);
  --bl-bd: rgba(255,107,61,.28);

  /* Secondary accent — calm blue (for AI surfaces / live data) */
  --accent-blue: #3a7bd5;
  --accent-blue-h: #5a90e0;

  /* Green (positive) */
  --gn:    #16a085;
  --gn-t:  #16a085;
  --gn2:   rgba(22,160,133,.10);
  --gn-bd: rgba(22,160,133,.22);

  /* Red (negative) */
  --rd:    #e25c4f;
  --rd-t:  #e25c4f;
  --rd2:   rgba(226,92,79,.10);
  --rd-bd: rgba(226,92,79,.22);

  /* Amber (caution) */
  --am:    #b85400;
  --am-t:  #cc7a18;
  --am2:   rgba(204,122,24,.10);
  --am-bd: rgba(204,122,24,.22);

  /* Shadows — soft light-mode */
  --sh1:  0 1px 0 rgba(15,20,36,.04), 0 2px 6px rgba(15,20,36,.06);
  --sh2:  0 1px 0 rgba(15,20,36,.05), 0 6px 18px rgba(15,20,36,.08);
  --sh3:  0 1px 0 rgba(15,20,36,.06), 0 14px 32px -10px rgba(15,20,36,.18);

  /* Fonts — Geist + Instrument Serif accent; keep DM Mono for numbers */
  --sans:    'Geist', -apple-system, system-ui, sans-serif;
  --mono:    'DM Mono', 'Fira Mono', monospace;
  --serif:   'Instrument Serif', Georgia, serif;
  --f-body:    'Geist', system-ui, sans-serif;
  --f-display: 'Geist', system-ui, sans-serif;
  --f-mono:    'DM Mono', monospace;

  /* Legacy aliases — match Atlas Fresh's so JS-driven classes still work */
  --surface:       #ffffff;
  --surface-2:     #f6f8fc;
  --surface-3:     #eef2f8;
  --border:        rgba(15,20,36,.07);
  --border-md:     rgba(15,20,36,.11);
  --border-strong: rgba(15,20,36,.18);
  --ink:    #0f1424;
  --ink-2:  #1f2740;
  --ink-3:  #3d4666;          /* was 4d5774 — bumped for readability */
  --ink-4:  #545d7a;          /* was 6c7593 — bumped for readability */
  --muted:  #6c7593;
  --paper:  #fbfcfe;
  --paper-2:#ffffff;
  --panel:  #ffffff;
  --panel-2:#f6f8fc;
  --line:        rgba(15,20,36,.07);
  --line-strong: rgba(15,20,36,.11);
  --accent:   #ff6b3d;
  --accent-2: #3a7bd5;
  --green:     #16a085;
  --green-bg:  rgba(22,160,133,.10);
  --red:       #e25c4f;
  --red-bg:    rgba(226,92,79,.10);
  --blue:      #3a7bd5;
  --blue-bg:   rgba(58,123,213,.10);
  --amber:     #cc7a18;
  --amber-bg:  rgba(204,122,24,.10);
  --gold:      #cc7a18;
  --brand:        #ff6b3d;
  --brand-dark:   #d6532e;
  --brand-light:  rgba(255,107,61,.08);
  --brand-mid:    rgba(255,107,61,.18);

  --ease: cubic-bezier(.22,1,.36,1);
}

/* ── 2. BODY + AURORA BACKDROP ───────────────────────────────── */
body {
  background:
    radial-gradient(55% 45% at 50% 0%, #d4e4f6 0%, transparent 65%),
    radial-gradient(45% 40% at 90% 30%, #e4eff8 0%, transparent 70%),
    radial-gradient(40% 35% at 10% 60%, #f1f5fc 0%, transparent 70%),
    var(--bg);
  background-attachment: fixed;
  color: var(--t);
  font-family: var(--sans);
  letter-spacing: -.012em;
  font-feature-settings: 'cv11', 'ss01';
}

::selection { background: rgba(255,107,61,.18); color: var(--ink); }

::-webkit-scrollbar-thumb { background: rgba(15,20,36,.14); }
::-webkit-scrollbar-thumb:hover { background: rgba(15,20,36,.26); }

/* ── 3. TOP NAV ─────────────────────────────────────────────── */
.topnav {
  background: rgba(255,255,255,.78) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--bd) !important;
}

.nav-brand {
  border-right: 1px solid var(--bd) !important;
  gap: 10px;
}
.nav-mark {
  background: radial-gradient(circle at 30% 30%, var(--bl-h), var(--bl)) !important;
  box-shadow:
    inset 0 -2px 4px rgba(0,0,0,.18),
    0 2px 6px rgba(255,107,61,.35) !important;
  color: #fff;
  border-radius: 50% !important;
  width: 24px; height: 24px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: -.01em;
}
.nav-brand-name {
  color: var(--ink) !important;
  font-weight: 600 !important;
  letter-spacing: -.018em !important;
  font-size: 14.5px !important;
  font-family: var(--sans) !important;
}
.nav-brand-name::after {
  content: '';
  font-family: var(--serif);
  font-style: italic;
  color: var(--bl);
  font-weight: 400;
  margin-left: 2px;
  font-size: 15px;
  letter-spacing: -.005em;
}

/* Navlink restyle */
.navlink {
  color: var(--di) !important;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: -.005em;
}
.navlink:hover { color: var(--ink) !important; }
.navlink:hover::after { opacity: .35 !important; background: var(--bl) !important; }
.navlink.active { color: var(--ink) !important; }
.navlink.active::after { background: var(--bl) !important; opacity: 1 !important; }

/* AI surface links get a small badge */
.navlink.ai-link::before {
  content: 'AI';
  display: inline-block;
  vertical-align: 1px;
  font-size: 8.5px; font-weight: 700; letter-spacing: .08em;
  color: #fff;
  background: linear-gradient(135deg, var(--accent-blue), #5b97e0);
  padding: 1px 5px; border-radius: 3px;
  margin-right: 6px;
  box-shadow: 0 1px 3px rgba(58,123,213,.35);
  line-height: 1.3;
}

/* Search */
.nav-search {
  background: rgba(15,20,36,.04) !important;
  border: 1px solid var(--bd) !important;
}
.nav-search:focus-within {
  background: #fff !important;
  border-color: var(--bl-bd) !important;
  box-shadow: 0 0 0 3px rgba(255,107,61,.08);
}
.nav-search input { color: var(--ink) !important; }
.nav-search input::placeholder { color: var(--mu) !important; }
.nav-search-icon { color: var(--mu) !important; opacity: 1; }

/* Live indicator */
.nav-live {
  border-left: 1px solid var(--bd) !important;
  border-right: 1px solid var(--bd) !important;
  color: var(--gn) !important;
  font-family: var(--mono);
}
.nav-live-dot { background: var(--gn) !important; box-shadow: 0 0 6px var(--gn); }

/* Buttons */
.nav-alert-bell {
  border: 1px solid var(--bd) !important;
  background: transparent !important;
  color: var(--di) !important;
}
.nav-alert-bell:hover {
  border-color: var(--bd2) !important;
  background: rgba(15,20,36,.04) !important;
  color: var(--ink) !important;
}
.nav-alert-badge { border-color: #fff !important; background: var(--bl) !important; color: #fff !important; }

.nav-btn {
  border: 1px solid var(--bd) !important;
  background: transparent !important;
  color: var(--di) !important;
  font-weight: 500;
}
.nav-btn:hover {
  border-color: var(--bd2) !important;
  background: rgba(15,20,36,.04) !important;
  color: var(--ink) !important;
}
.nav-btn.primary {
  background: linear-gradient(135deg, var(--bl-h), var(--bl)) !important;
  border: none !important;
  color: #fff !important;
  box-shadow:
    0 4px 10px -2px rgba(255,107,61,.45),
    inset 0 1px 0 rgba(255,255,255,.25) !important;
  font-weight: 600;
}
.nav-btn.primary:hover {
  background: linear-gradient(135deg, #ff8d62, var(--bl-h)) !important;
  transform: translateY(-1px);
  box-shadow:
    0 6px 14px -2px rgba(255,107,61,.55),
    inset 0 1px 0 rgba(255,255,255,.3) !important;
}

/* ── 4. TICKER TAPE ─────────────────────────────────────────── */
.ticker-tape {
  background: rgba(255,255,255,.85) !important;
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-bottom: 1px solid var(--bd) !important;
}
.tick-item { border-right: 1px solid var(--bd) !important; }
.tick-sym { color: var(--di) !important; }
.tick-price { color: var(--ink) !important; }
.tick-chg.p { color: var(--gn) !important; }
.tick-chg.n { color: var(--rd) !important; }

/* ── 5. HERO — the showpiece ────────────────────────────────── */
.hp-hero {
  padding: 56px 0 36px !important;
  border-bottom: 1px solid var(--bd) !important;
  margin-bottom: 26px;
  position: relative;
}
.hp-hero-meta {
  color: var(--di) !important;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .02em;
}
.hp-hero-sep { color: var(--mu); opacity: .8; }
.mkt-status-pill {
  background: rgba(22,160,133,.10) !important;
  border-color: rgba(22,160,133,.22) !important;
  color: var(--gn) !important;
}
.mkt-status-pill.closed {
  background: rgba(154,163,188,.10) !important;
  border-color: rgba(154,163,188,.22) !important;
  color: var(--mu) !important;
}
.mkt-dot { background: var(--gn) !important; box-shadow: 0 0 8px rgba(22,160,133,.5); }

/* The greeting — Geist heavy + Instrument Serif italic accent */
.hp-greeting {
  font-family: var(--sans);
  font-size: clamp(40px, 5.5vw, 64px) !important;
  font-weight: 500 !important;
  letter-spacing: -.034em !important;
  color: var(--ink) !important;
  line-height: 1.05 !important;
  margin: 8px 0 14px !important;
}
.hp-greeting .accent {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--bl);
  font-size: 1.04em;
  letter-spacing: -.01em;
}
.hp-mkt-sentence {
  font-size: 16px !important;
  color: var(--di) !important;
  line-height: 1.6 !important;
  max-width: 56ch !important;
  font-family: var(--sans);
  letter-spacing: -.005em;
}

/* ── 6. INDEX BAR CARDS ─────────────────────────────────────── */
.hp-idx-bar { gap: 12px !important; }

/* ── 7. AD SLOT — subtle ────────────────────────────────────── */
.hp-ad-slot {
  background: transparent !important;
  border: 1px dashed var(--bd2) !important;
  color: var(--mu) !important;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
}

/* ── 8. SECTION HEADERS ─────────────────────────────────────── */
.hp-section-label {
  color: var(--di) !important;
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: .14em !important;
  font-size: 10.5px !important;
}
.hp-view-all {
  color: var(--bl) !important;
  opacity: .8;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px !important;
}
.hp-view-all:hover { opacity: 1; text-decoration: none; }

/* ── 9. MOVERS ──────────────────────────────────────────────── */
.hp-mover-tabs {
  background: rgba(15,20,36,.04) !important;
  border: 1px solid var(--bd) !important;
}
.hp-mover-tab {
  color: var(--di) !important;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px !important;
  letter-spacing: -.005em;
}
.hp-mover-tab.active {
  background: var(--paper) !important;
  color: var(--ink) !important;
  box-shadow: 0 1px 3px rgba(15,20,36,.08) !important;
}
.hp-mover-tab:hover:not(.active) { color: var(--ink) !important; }
.hp-mover-row { border-bottom: 1px solid var(--bd) !important; }
.hp-mover-row:hover { background: rgba(255,107,61,.04) !important; }
.hp-mover-sym { color: var(--ink) !important; font-family: var(--mono); }
.hp-mover-name { color: var(--di) !important; }
.hp-mover-price { color: var(--ink) !important; }
.hp-mover-vol { color: var(--mu) !important; }
.hp-mover-chg.pos { color: var(--gn) !important; background: rgba(22,160,133,.10) !important; }
.hp-mover-chg.neg { color: var(--rd) !important; background: rgba(226,92,79,.10) !important; }

/* ── 10. NEWS CARDS ─────────────────────────────────────────── */
.hp-news-card {
  background: var(--paper-2) !important;
  border: 1px solid var(--bd) !important;
  box-shadow: var(--sh1) !important;
}
.hp-news-card:hover {
  border-color: var(--bl-bd) !important;
  box-shadow: var(--sh3) !important;
}
.hp-news-tag.tech  { background: rgba(58,123,213,.10) !important; color: var(--accent-blue) !important; }
.hp-news-tag.macro { background: var(--am2) !important; color: var(--am-t) !important; }
.hp-news-tag.earn  { background: rgba(139,92,246,.10) !important; color: #7c6dd0 !important; }
.hp-news-tag.mkts  { background: var(--gn2) !important; color: var(--gn) !important; }
.hp-news-tag.geo   { background: rgba(232,121,249,.10) !important; color: #b96fcf !important; }
.hp-news-tag.deriv { background: rgba(154,163,188,.10) !important; color: var(--di) !important; }
.hp-news-headline { color: var(--ink) !important; }
.hp-news-meta { color: var(--di) !important; }
.hp-news-source { color: var(--bl) !important; }

/* ── 11. RIGHT COLUMN — snapshot / watchlist / earnings ─────── */
.hp-snap-live { color: var(--gn) !important; font-family: var(--mono); }
.hp-snap-dot  { background: var(--gn) !important; box-shadow: 0 0 6px rgba(22,160,133,.5); }
.hp-snap-title{ color: var(--ink) !important; font-family: var(--sans); font-weight: 600; letter-spacing: -.018em; }
.hp-snap-body { color: var(--di) !important; }
.hp-snap-stats{ border-top: 1px solid var(--bd) !important; color: var(--mu) !important; }
.hp-snap-stat strong { color: var(--ink) !important; }

.hp-wl-row    { border-bottom: 1px solid var(--bd) !important; }
.hp-wl-row:hover { background: rgba(255,107,61,.04) !important; }
.hp-wl-sym    { color: var(--ink) !important; font-family: var(--mono); }
.hp-wl-name   { color: var(--di) !important; }
.hp-wl-price  { color: var(--ink) !important; }
.hp-wl-empty  { color: var(--di) !important; font-family: var(--sans); }

.hp-earn-row  { border-bottom: 1px solid var(--bd) !important; }
.hp-earn-row:hover { background: rgba(255,107,61,.04) !important; }
.hp-earn-date { color: var(--di) !important; }
.hp-earn-date.today { color: var(--bl) !important; }
.hp-earn-sym  { color: var(--ink) !important; font-family: var(--mono); }
.hp-earn-name { color: var(--di) !important; }
.hp-earn-bmo  { background: var(--am2) !important; color: var(--am-t) !important; border-color: var(--am-bd) !important; }
.hp-earn-amc  { background: rgba(154,163,188,.10) !important; color: var(--di) !important; border-color: var(--bd2) !important; }
.hp-updated   { color: var(--mu) !important; font-family: var(--mono); }

/* ── 12. CARDS (generic) ────────────────────────────────────── */
.card {
  background: var(--paper-2) !important;
  border: 1px solid var(--bd) !important;
  box-shadow: var(--sh1) !important;
}
.card:hover {
  border-color: var(--bd2) !important;
  box-shadow: var(--sh2) !important;
}
.card-head {
  background: linear-gradient(180deg, rgba(255,107,61,.02) 0%, transparent 100%) !important;
  border-bottom: 1px solid var(--bd) !important;
}
.card-label { color: var(--di) !important; font-family: var(--mono); }

/* ── 13. PAGE HEADER, BUTTONS ───────────────────────────────── */
.ph         { border-bottom: 1px solid var(--bd) !important; }
.ph::after  { background: linear-gradient(90deg, var(--bl), transparent) !important; }
.ph-label   { color: var(--bl) !important; font-family: var(--mono); }
.ph-title   { color: var(--ink) !important; font-family: var(--sans); font-weight: 500; letter-spacing: -.034em; }
.ph-sub     { color: var(--di) !important; }

.sec-label  { color: var(--di) !important; font-family: var(--mono); }
.sec-title  { color: var(--ink) !important; font-family: var(--sans); font-weight: 500; letter-spacing: -.025em; }
.sec-sub    { color: var(--di) !important; }

.btn-primary {
  background: linear-gradient(135deg, var(--bl-h), var(--bl)) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px -3px rgba(255,107,61,.45), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #ff8d62, var(--bl-h)) !important;
  box-shadow: 0 6px 16px -3px rgba(255,107,61,.55), inset 0 1px 0 rgba(255,255,255,.3) !important;
}
.btn-ghost {
  background: transparent !important;
  border: 1px solid var(--bd) !important;
  color: var(--di) !important;
}
.btn-ghost:hover {
  background: rgba(15,20,36,.04) !important;
  border-color: var(--bd2) !important;
  color: var(--ink) !important;
}

/* ── 14. ACCENT TYPOGRAPHY HELPERS ──────────────────────────── */
/* For places we want the Instrument Serif italic flourish */
.accent, .serif-accent {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--bl);
  font-size: 1.04em;
  letter-spacing: -.01em;
}

/* ── 15. NAV "MORE" DROPDOWN ────────────────────────────────── */
.nav-more {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
  flex-shrink: 0;
}
.navlink-more {
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--di) !important;
  padding: 0 12px;
  height: 100%;
  letter-spacing: -.005em;
  transition: color .15s var(--ease);
}
.navlink-more:hover { color: var(--ink) !important; }
.nav-more.open .navlink-more { color: var(--ink) !important; }
.nav-more.open .navlink-more svg { transform: rotate(180deg); }
.navlink-more svg { transition: transform .2s var(--ease); }

.nav-more-menu {
  /* FIXED, not absolute: .nav-links scrolls horizontally (overflow-x:auto),
     which clips absolutely-positioned children — the menu opened invisibly
     behind the page. Fixed positioning escapes the clip; JS sets top/left. */
  position: fixed;
  top: 60px;
  left: auto;
  max-height: min(72vh, 600px);
  overflow-y: auto;
  min-width: 240px;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--bd);
  border-radius: 14px;
  box-shadow: 0 24px 60px -12px rgba(15,20,36,.22), 0 0 0 1px rgba(15,20,36,.04);
  padding: 6px;
  opacity: 0;
  transform: translateY(-6px) scale(.97);
  pointer-events: none;
  transition: opacity .18s var(--ease), transform .22s var(--ease);
  z-index: 1100;
}
.nav-more.open .nav-more-menu,
.nav-more-menu.open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.nav-more-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  transition: background .15s var(--ease);
  cursor: pointer;
}
.nav-more-item:hover {
  background: rgba(255,107,61,.06);
}
.nav-more-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-2);
  border: 1px solid var(--bd);
  border-radius: 8px;
  font-size: 14px;
  flex-shrink: 0;
}
.nav-more-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.nav-more-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.005em;
  font-family: var(--sans);
}
.nav-more-sub {
  font-size: 11px;
  color: var(--di);
  margin-top: 1px;
  letter-spacing: -.002em;
  font-family: var(--sans);
}

/* ── 15b. NAV GROUPED TABS (Research/Portfolio/Brief/Ask AI) ───
   These look like regular navlinks but open a hover dropdown.
   Same visual language as .nav-more but anchored LEFT and triggered
   on hover (with click also working for keyboard/touch). */
.nav-group {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
  flex-shrink: 0;
}
.navlink-group {
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--di) !important;
  text-decoration: none;
  padding: 0 12px;
  height: 100%;
  letter-spacing: -.005em;
  transition: color .15s var(--ease);
}
.navlink-group:hover,
.nav-group:hover .navlink-group,
.nav-group:focus-within .navlink-group { color: var(--ink) !important; }
.navlink-group .caret {
  width: 9px; height: 9px; opacity: .55;
  transition: transform .2s var(--ease);
  margin-left: 1px;
}
.nav-group:hover .navlink-group .caret,
.nav-group:focus-within .navlink-group .caret { transform: rotate(180deg); opacity: 1; }

.nav-group-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 240px;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--bd);
  border-radius: 14px;
  box-shadow: 0 24px 60px -12px rgba(15,20,36,.22), 0 0 0 1px rgba(15,20,36,.04);
  padding: 6px;
  opacity: 0;
  transform: translateY(-6px) scale(.97);
  pointer-events: none;
  transition: opacity .18s var(--ease), transform .22s var(--ease);
  z-index: 1100;
}
.nav-group:hover .nav-group-menu,
.nav-group:focus-within .nav-group-menu {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
/* Re-use .nav-more-item / .nav-more-icon / etc. styles inside .nav-group-menu */

/* ── 16. FORCE LIGHT MODE ON LEGACY DARK INLINE STYLES ──────── */
/* Index.html's inline <style> uses rgba(255,255,255,...) for borders.
   These overrides convert them to ink-on-cream equivalents. */
.hp-hero { border-bottom-color: var(--bd) !important; }
[style*="rgba(255,255,255,.04)"], [style*="rgba(255,255,255,.06)"] { border-color: var(--bd) !important; }

/* ── 17. NEUTRALIZE LEGACY FLOATING ALERT FAB ───────────────── */
/* Atlas Fresh has a floating "A" alert FAB that fights the Ask Atlas widget.
   We'll replace it with the Ask Atlas pill at the per-page level. */
#_floatingAlertFab, .floating-alert-fab { display: none !important; }

/* ════════════════════════════════════════════════════════════════
   18. DATA-DENSE COMPONENTS — markets, portfolio, charting
   The inline styles in these pages hardcode rgba(255,255,255,...) borders
   which are invisible on cream. Map them to ink equivalents.
   ════════════════════════════════════════════════════════════════ */

/* Index bar tiles (markets.html index strip) */
.idx-tile {
  background: var(--paper-2) !important;
  border: 1px solid var(--bd) !important;
  box-shadow: var(--sh1) !important;
  transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease) !important;
}
.idx-tile:hover {
  transform: translateY(-2px);
  border-color: var(--bd2) !important;
  box-shadow: var(--sh2) !important;
}
.idx-tile .idx-sym,
.idx-tile .idx-name { color: var(--di) !important; font-family: var(--mono); }
.idx-tile .idx-val,
.idx-tile .idx-px  { color: var(--ink) !important; font-family: var(--mono); }
.idx-tile .idx-chg.pos,
.idx-tile.pos      { /* keep semantic green */ }
.idx-tile .idx-chg.neg,
.idx-tile.neg      { /* keep semantic red */ }
.idx-tile.pos { background: linear-gradient(180deg, rgba(22,160,133,.04), var(--paper-2)) !important; }
.idx-tile.neg { background: linear-gradient(180deg, rgba(226,92,79,.04), var(--paper-2)) !important; }
.idx-tile.flat{ background: var(--paper-2) !important; }
.idx-tile.pos .idx-chg, .idx-tile.pos .pct { color: var(--gn) !important; }
.idx-tile.neg .idx-chg, .idx-tile.neg .pct { color: var(--rd) !important; }

/* Sector tiles */
.sector-tile {
  background: var(--paper-2) !important;
  border: 1px solid var(--bd) !important;
}
.sector-tile:hover {
  border-color: var(--bl-bd) !important;
  background: rgba(255,107,61,.03) !important;
}

/* Movers tabs */
.movers-tab {
  border: 1px solid var(--bd) !important;
  background: transparent !important;
  color: var(--di) !important;
  font-family: var(--mono) !important;
}
.movers-tab:hover { background: rgba(15,20,36,.04) !important; color: var(--ink) !important; }
.movers-tab.active, .movers-tab.on {
  background: var(--paper) !important;
  border-color: var(--bd2) !important;
  color: var(--ink) !important;
  box-shadow: 0 1px 3px rgba(15,20,36,.08);
}

/* Charting area */
.chart-area {
  background: var(--paper-2) !important;
  border: 1px solid var(--bd) !important;
  box-shadow: var(--sh1) !important;
}
.chart-search {
  background: rgba(15,20,36,.04) !important;
  border: 1px solid var(--bd) !important;
  color: var(--ink) !important;
  font-family: var(--mono) !important;
}
.chart-search:focus { border-color: var(--bl-bd) !important; background: var(--paper) !important; }

/* Treasury / yield tiles (markets.html bonds section) */
.tsy-st-tile, .tsy-feat-tile, .tsy-rel-tile {
  background: var(--paper-2) !important;
  border: 1px solid var(--bd) !important;
  box-shadow: var(--sh1) !important;
}
.tsy-st-tile.neutral::before { background: rgba(15,20,36,.18) !important; }
.tsy-feat-tile.neu::before   { background: rgba(15,20,36,.16) !important; }
.yield-date-input {
  background: rgba(15,20,36,.04) !important;
  border: 1px solid var(--bd) !important;
  color: var(--ink) !important;
  font-family: var(--mono) !important;
}
.yield-date-input:focus { border-color: var(--bl-bd) !important; background: var(--paper) !important; }

/* Slide-out detail panel (when an index tile is clicked) */
.idx-detail-panel {
  background: var(--paper) !important;
  border-left: 1px solid var(--bd) !important;
  box-shadow: -20px 0 60px -20px rgba(15,20,36,.18) !important;
}
.idx-detail-head, .idx-detail-ranges { border-bottom: 1px solid var(--bd) !important; }
.idx-detail-sym, .idx-detail-price { color: var(--ink) !important; }
.idx-detail-name, .idx-detail-chg { color: var(--di) !important; }
.idx-detail-close { color: var(--di) !important; }
.idx-detail-close:hover { color: var(--ink) !important; }
.idx-panel-backdrop { background: rgba(15,20,36,.35) !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* Generic catch: any inline div that uses --s1 / --s2 / --s3 backgrounds
   already inherits the cream via our :root remap, so they look right.
   But the inline borders need help. Common pattern: */
[style*="rgba(255,255,255"] {
  /* Soft override — turns hardcoded white-on-white into ink-on-cream */
  border-color: var(--bd) !important;
}

/* Generic table styling — used in portfolio, news, etc. */
.tbl, table.holdings, table.h-table, table[class*="tbl"] {
  background: transparent !important;
}
.tbl th, table.holdings th, table.h-table th {
  color: var(--di) !important;
  font-family: var(--mono);
  font-weight: 600;
  border-bottom: 1px solid var(--bd) !important;
  background: transparent !important;
}
.tbl td, table.holdings td, table.h-table td {
  color: var(--t) !important;
  border-bottom: 1px solid var(--bd) !important;
}
.tbl tr:hover td, table.holdings tr:hover td, table.h-table tr:hover td {
  background: rgba(255,107,61,.03) !important;
}

/* News card lift the cream way */
.news-card, .nc-card, .article-card {
  background: var(--paper-2) !important;
  border: 1px solid var(--bd) !important;
  box-shadow: var(--sh1) !important;
}
.news-card:hover, .nc-card:hover, .article-card:hover {
  border-color: var(--bl-bd) !important;
  box-shadow: var(--sh2) !important;
}

/* Toast & misc overlays */
.toast, .atlas-toast {
  background: var(--ink) !important;
  color: #fff !important;
  box-shadow: 0 8px 24px -6px rgba(15,20,36,.4) !important;
}

/* Modal / dialog backdrops — soft frost instead of pure black */
.modal-backdrop, .dialog-backdrop, [class*="-backdrop"]:not(.idx-panel-backdrop):not(.lib-modal) {
  background: rgba(15,20,36,.32) !important;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* ════════════════════════════════════════════════════════════════
   19. AUTH FLOW — reset-password, verify-email, recover-watchlist
   These are centered-card pages with their own scoped :root that
   our top-level :root remap already overrides. We just need to
   patch the hardcoded backgrounds + add aurora atmosphere.
   ════════════════════════════════════════════════════════════════ */

/* Page body — add aurora gradient backdrop */
body:has(.rp-card),
body:has(.ve-card),
body:has(.sym-inp) {
  background:
    radial-gradient(60% 50% at 50% 0%, #d4e4f6 0%, transparent 65%),
    radial-gradient(45% 40% at 90% 50%, #e4eff8 0%, transparent 70%),
    radial-gradient(40% 35% at 10% 70%, #f1f5fc 0%, transparent 70%),
    var(--paper) !important;
}

/* Reset password card */
.rp-card, .ve-card {
  background: rgba(255,255,255,.96) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--bd) !important;
  border-radius: 22px !important;
  box-shadow: 0 30px 80px -20px rgba(15,20,36,.18) !important;
}
.rp-head, .ve-head {
  background: linear-gradient(180deg, rgba(255,107,61,.03) 0%, transparent 100%) !important;
}
.rp-logo, .ve-logo {
  background: radial-gradient(circle at 30% 30%, var(--bl-h), var(--bl)) !important;
  color: #fff !important;
  box-shadow:
    inset 0 -2px 4px rgba(0,0,0,.18),
    0 4px 14px rgba(255,107,61,.35) !important;
  border-radius: 50% !important;
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -.02em;
}
.rp-title, .ve-title, .ve-success-title, .ve-error-title, .rp-invalid-title {
  color: var(--ink) !important;
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: -.022em;
}
.rp-sub, .ve-sub, .ve-success-msg, .ve-error-msg, .rp-invalid-msg, .rp-hint, .rp-loading-text, .ve-loading-text {
  color: var(--di) !important;
  font-family: var(--sans);
}

/* Inputs */
.rp-input, .ve-input, .rp-form input, .ve-form input, input[type="password"], input[type="email"]:not(.nav-search input) {
  background: var(--paper-2) !important;
  border: 1px solid var(--bd) !important;
  color: var(--ink) !important;
  border-radius: 10px !important;
}
.rp-input:focus, .ve-input:focus, .rp-form input:focus, .ve-form input:focus {
  border-color: var(--bl) !important;
  background: var(--paper) !important;
  box-shadow: 0 0 0 3px rgba(255,107,61,.1) !important;
}

/* Primary buttons in auth */
.rp-btn, .ve-btn {
  background: linear-gradient(135deg, var(--bl-h), var(--bl)) !important;
  color: #fff !important;
  border: none !important;
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  letter-spacing: -.005em;
  box-shadow: 0 4px 12px -3px rgba(255,107,61,.45), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.rp-btn:hover, .ve-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -3px rgba(255,107,61,.55), inset 0 1px 0 rgba(255,255,255,.3) !important;
}

/* Spinners */
.rp-spinner, .ve-spinner {
  border-color: rgba(255,107,61,.15) !important;
  border-top-color: var(--bl) !important;
}

/* Success badges */
.ve-badge { background: var(--gn2) !important; color: var(--gn) !important; }
.ve-success-icon { color: var(--gn) !important; }
.ve-error-icon, .rp-invalid-icon { filter: hue-rotate(0) saturate(1); }

/* Recover watchlist page chip + input */
.sym-inp {
  background: var(--paper-2) !important;
  border: 1px solid var(--bd) !important;
  color: var(--ink) !important;
}
.sym-inp:focus { border-color: var(--bl) !important; box-shadow: 0 0 0 3px rgba(255,107,61,.1) !important; }
.sym-chip {
  background: rgba(255,107,61,.08) !important;
  border: 1px solid var(--bl-bd) !important;
  color: var(--bl) !important;
}

/* ════════════════════════════════════════════════════════════════
   20. LEGAL / SECONDARY PAGES — privacy, terms, profile, etc.
   Apply the same body backdrop + lift cards to cream.
   ════════════════════════════════════════════════════════════════ */

body:has(.legal-wrap), body:has(.profile-wrap) {
  background:
    radial-gradient(60% 45% at 50% 0%, #d4e4f6 0%, transparent 60%),
    var(--paper) !important;
}

/* Catch-all "card" patterns common across these pages */
.profile-card, .legal-card, .pref-card, .session-card {
  background: var(--paper-2) !important;
  border: 1px solid var(--bd) !important;
  box-shadow: var(--sh1) !important;
  color: var(--t) !important;
}

/* ════════════════════════════════════════════════════════════════
   21. RESEARCH PAGE — Stock Research (.sr-*, .sd-*, .fin-*, .earn-*)
   The detail surface is the most complex page in the product.
   Every component family needs cream + ink-on-cream borders.
   ════════════════════════════════════════════════════════════════ */

/* Page hero */
.sr-hero            { border-bottom-color: var(--bd) !important; }
.sr-hero-title      { color: var(--ink) !important; font-family: var(--sans); font-weight: 500; letter-spacing: -.022em; }
.sr-hero.has-stock .sr-hero-title { color: var(--di) !important; }
.sr-hero-sub        { color: var(--di) !important; }
.sr-popular-chips   .chip-label { color: var(--di) !important; }
.search-autocomplete{
  background: var(--paper) !important;
  border: 1px solid var(--bd) !important;
  box-shadow: var(--sh2) !important;
}

/* Recently-viewed strip */
.sr-recently-viewed, .recently-viewed {
  color: var(--di) !important;
}

/* Stock detail core block */
.sd-price        { color: var(--ink) !important; font-family: var(--mono) !important; }
.sd-chg-label    { color: var(--di) !important; }
.sd-ext-row      { color: var(--di) !important; }

/* 52-week range bar — readable track */
.sd-range-row    { color: var(--di) !important; }
.sd-range-track  { background: var(--surface-3) !important; }
.sd-range-fill   { background: linear-gradient(90deg, var(--bl-h), var(--bl)) !important; }
.sd-range-dot    { background: #fff !important; border: 2px solid var(--bl) !important; box-shadow: 0 0 0 3px rgba(255,107,61,.22) !important; }
.sd-range-label  { color: var(--di) !important; }

/* Stat bar — the row of MARKET CAP, P/E, etc. */
.sd-statbar      {
  background: var(--paper-2) !important;
  border: 1px solid var(--bd) !important;
  box-shadow: var(--sh1) !important;
}
.sd-statbar-item { border-right: 1px solid var(--bd) !important; }
.sd-statbar-label{ color: var(--di) !important; font-weight: 700 !important; }
.sd-statbar-val  { color: var(--ink) !important; font-family: var(--mono) !important; }
.sd-statbar-sub  { color: var(--di) !important; }

/* Range buttons (1D / 5D / 1M / ...) */
.sd-rng-btn      {
  background: var(--paper-2) !important;
  border: 1px solid var(--bd) !important;
  color: var(--di) !important;
}
.sd-rng-btn:hover{ color: var(--ink) !important; background: rgba(15,20,36,.04) !important; border-color: var(--bd2) !important; }
.sd-rng-btn.active{
  background: linear-gradient(135deg, var(--bl-h), var(--bl)) !important;
  border-color: var(--bl) !important;
  color: #fff !important;
}

/* Chart area */
.sd-chart-box    {
  background: var(--paper-2) !important;
  border: 1px solid var(--bd) !important;
  box-shadow: var(--sh1) !important;
}
.sd-chart-loading{ background: var(--paper-2) !important; color: var(--di) !important; }
.sd-card         {
  background: var(--paper-2) !important;
  border: 1px solid var(--bd) !important;
}
.sd-card .sd-tabs{ background: linear-gradient(180deg, rgba(255,107,61,.02), transparent) !important; border-bottom: 1px solid var(--bd) !important; }
.sd-chart-inline { border-bottom: 1px solid var(--bd) !important; }
.sd-cmp-label    { color: var(--di) !important; }
.sd-cmp-btn      { background: var(--paper-2) !important; border: 1px solid var(--bd) !important; color: var(--di) !important; }
.sd-cmp-btn:hover{ background: rgba(58,123,213,.05) !important; border-color: rgba(58,123,213,.25) !important; color: var(--accent-blue) !important; }
.sd-cmp-btn.active{ background: rgba(58,123,213,.10) !important; border-color: rgba(58,123,213,.4) !important; color: var(--accent-blue) !important; }

/* Tabs */
.sd-tabs         { border-bottom: 1px solid var(--bd) !important; }
.sd-tab          { color: var(--di) !important; }
.sd-tab:hover    { color: var(--ink) !important; }
.sd-tab.active   { color: var(--bl) !important; border-bottom-color: var(--bl) !important; }
.sd-tab[data-tab="ai"]        { color: #7c3aed !important; }
.sd-tab[data-tab="ai"].active { color: #5b21b6 !important; border-bottom-color: #7c3aed !important; }

/* Performance row */
.sd-perf-item    {
  background: var(--paper-2) !important;
  border: 1px solid var(--bd) !important;
  box-shadow: var(--sh1) !important;
}
.sd-perf-label   { color: var(--di) !important; font-weight: 700 !important; }
.sd-perf-val     { color: var(--ink) !important; }

/* Drivers */
.sd-drivers-label{ color: var(--di) !important; font-weight: 700 !important; }
.driver-chip     { background: rgba(58,123,213,.08) !important; border: 1px solid rgba(58,123,213,.25) !important; color: var(--accent-blue) !important; }

/* Financials tab */
.fin-toggle-btn  { background: var(--paper-2) !important; border: 1px solid var(--bd) !important; color: var(--di) !important; }
.fin-toggle-btn:hover  { color: var(--ink) !important; }
.fin-toggle-btn.active { background: rgba(255,107,61,.10) !important; border-color: var(--bl-bd) !important; color: var(--bl) !important; }
.fin-section-title { color: var(--di) !important; font-weight: 700 !important; border-bottom-color: var(--bd) !important; }
.fin-table th    { color: var(--di) !important; border-bottom-color: var(--bd) !important; font-weight: 700 !important; }
.fin-table td    { color: var(--ink) !important; border-bottom-color: var(--bd) !important; }
.fin-table td:first-child { color: var(--di) !important; }
.fin-table tr:hover td  { background: rgba(255,107,61,.03) !important; }
.fin-table tr.fin-total td { color: var(--ink) !important; border-top: 1px solid var(--bd2) !important; }

/* Earnings tab */
.earn-upcoming-card{ background: var(--paper-2) !important; border: 1px solid var(--bd) !important; box-shadow: var(--sh1) !important; }
.earn-upcoming-label{ color: var(--di) !important; font-weight: 700 !important; }
.earn-upcoming-date { color: var(--ink) !important; }
.earn-est-badge   { background: var(--am2) !important; color: var(--am-t) !important; border-color: var(--am-bd) !important; }
.earn-conf-badge  { background: var(--gn2) !important; color: var(--gn) !important; border-color: var(--gn-bd) !important; }
.earn-up-period   { color: var(--di) !important; }

/* About / company side panel */
.about-stats-grid div, .about-stat-key  { color: var(--di) !important; }
.about-stat-val   { color: var(--ink) !important; font-family: var(--mono) !important; }

/* Heatmap fallback message */
.hm-loading       { color: var(--di) !important; }

/* ════════════════════════════════════════════════════════════════
   21b. AUTH MODAL — Sign in / Create account
   Injected into the DOM by atlas-data.js with class prefix .auth-*.
   ════════════════════════════════════════════════════════════════ */
#_authModal {
  background: rgba(15,20,36,.42) !important;
  backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;
}
.auth-box {
  background: var(--paper) !important;
  border: 1px solid var(--bd) !important;
  border-radius: 20px !important;
  box-shadow: 0 30px 80px -20px rgba(15,20,36,.35), 0 0 0 1px rgba(255,107,61,.04) !important;
  color: var(--ink) !important;
}
.auth-box * { font-family: var(--sans) !important; }

.auth-head { background: linear-gradient(180deg, rgba(255,107,61,.03), transparent) !important; }
.auth-logo {
  background: radial-gradient(circle at 30% 30%, var(--bl-h), var(--bl)) !important;
  border-radius: 50% !important;
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  box-shadow: inset 0 -2px 4px rgba(0,0,0,.18), 0 4px 14px rgba(255,107,61,.4) !important;
}
.auth-head h2, .auth-head .auth-title {
  color: var(--ink) !important;
  font-weight: 500 !important;
  letter-spacing: -.022em !important;
}
.auth-head p, .auth-head .auth-sub { color: var(--di) !important; }

.auth-tabs { border-bottom: 1px solid var(--bd) !important; }
.auth-tab {
  color: var(--di) !important;
  font-family: var(--sans) !important;
  font-weight: 500 !important;
  border-bottom: 2px solid transparent !important;
}
.auth-tab:hover { color: var(--ink) !important; }
.auth-tab.active {
  color: var(--ink) !important;
  border-bottom-color: var(--bl) !important;
}

.auth-body label, .auth-label {
  color: var(--ink) !important;
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}
.auth-input {
  background: var(--paper-2) !important;
  border: 1px solid var(--bd) !important;
  color: var(--ink) !important;
  caret-color: var(--bl) !important;
  border-radius: 10px !important;
}
.auth-input::placeholder { color: var(--mu) !important; }
.auth-input:focus {
  border-color: var(--bl) !important;
  box-shadow: 0 0 0 3px rgba(255,107,61,.1) !important;
  background: var(--paper) !important;
}
.auth-input.err {
  border-color: var(--rd) !important;
  box-shadow: 0 0 0 3px rgba(226,92,79,.1) !important;
}
.auth-pw-toggle {
  background: transparent !important;
  color: var(--di) !important;
}
.auth-pw-toggle:hover { color: var(--ink) !important; }

.auth-error {
  background: rgba(226,92,79,.08) !important;
  border: 1px solid rgba(226,92,79,.25) !important;
  color: var(--rd) !important;
}

.auth-btn {
  background: linear-gradient(135deg, var(--bl-h), var(--bl)) !important;
  color: #fff !important;
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  letter-spacing: -.005em !important;
  border: none !important;
  box-shadow: 0 4px 12px -3px rgba(255,107,61,.45), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.auth-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -3px rgba(255,107,61,.55), inset 0 1px 0 rgba(255,255,255,.3) !important;
  opacity: 1 !important;
}

.auth-divider span { color: var(--di) !important; font-family: var(--mono) !important; }
.auth-divider::before, .auth-divider::after { background: var(--bd) !important; }

/* "Don't have an account?" / "Already have an account?" link rows */
.auth-body a, .auth-foot a, .auth-link {
  color: var(--bl) !important;
  text-decoration: none;
  font-weight: 600 !important;
}
.auth-body a:hover, .auth-foot a:hover { text-decoration: underline; }

.auth-close {
  color: var(--di) !important;
  background: transparent !important;
}
.auth-close:hover { color: var(--ink) !important; background: rgba(15,20,36,.06) !important; border-radius: 8px; }

/* ════════════════════════════════════════════════════════════════
   22. ONBOARDING / WELCOME MODAL
   The modal is injected by atlas-data.js with class prefix ._ob-*.
   Re-skin in aurora without touching the JS.
   ════════════════════════════════════════════════════════════════ */
#_atlasOB {
  background: rgba(15,20,36,.42) !important;
  backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;
}
._ob-card {
  background: var(--paper) !important;
  border: 1px solid var(--bd) !important;
  box-shadow: 0 30px 80px -20px rgba(15,20,36,.35), 0 0 0 1px rgba(255,107,61,.04) !important;
  color: var(--ink) !important;
}
._ob-card * { font-family: var(--sans) !important; }
._ob-title {
  color: var(--ink) !important;
  font-weight: 500 !important;
  letter-spacing: -.022em !important;
  font-size: 26px !important;
}
._ob-sub {
  color: var(--di) !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
}
._ob-step-label {
  color: var(--accent-blue) !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
  font-size: 11px !important;
  font-family: var(--mono) !important;
}

/* Brand mark — orange aurora replaces the blue square */
._ob-card > div:first-child > div:first-child,
._ob-card > div > div[style*="background:linear-gradient"][style*="3b7cf8"] {
  background: radial-gradient(circle at 30% 30%, var(--bl-h), var(--bl)) !important;
  border-radius: 50% !important;
  box-shadow: inset 0 -2px 4px rgba(0,0,0,.18), 0 4px 14px rgba(255,107,61,.4) !important;
}

/* Username monospace pill */
._ob-card div[style*="DM Mono"][style*="2e4e6e"] { color: var(--di) !important; }

/* Feature cards in the grid */
._ob-feat {
  background: var(--paper-2) !important;
  border: 1px solid var(--bd) !important;
  box-shadow: var(--sh1) !important;
  color: var(--ink) !important;
}
._ob-feat:hover {
  border-color: var(--bl-bd) !important;
  background: rgba(255,107,61,.03) !important;
  transform: translateY(-1px);
}
._ob-feat-icon {
  background: rgba(255,107,61,.08) !important;
  border: 1px solid var(--bl-bd) !important;
}
._ob-feat-name { color: var(--ink) !important; font-weight: 600 !important; }
._ob-feat-desc { color: var(--di) !important; }

/* Action cards (step 2) */
._ob-act {
  background: var(--paper-2) !important;
  border: 1px solid var(--bd) !important;
  color: var(--ink) !important;
  box-shadow: var(--sh1) !important;
}
._ob-act:hover {
  border-color: var(--bl-bd) !important;
  background: rgba(255,107,61,.03) !important;
  box-shadow: var(--sh2) !important;
  transform: translateY(-2px);
}
._ob-act-icon { background: rgba(255,107,61,.08) !important; }
._ob-act-title { color: var(--ink) !important; font-weight: 600 !important; }
._ob-act-desc  { color: var(--di) !important; }
._ob-act-arrow { color: var(--bl) !important; font-weight: 600 !important; }

/* Pagination dots */
._ob-dot {
  background: rgba(15,20,36,.12) !important;
}
._ob-dot.active {
  background: var(--bl) !important;
}

/* Footer buttons */
._ob-btn-primary {
  background: linear-gradient(135deg, var(--bl-h), var(--bl)) !important;
  border: none !important;
  color: #fff !important;
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px -3px rgba(255,107,61,.45), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
._ob-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -3px rgba(255,107,61,.55), inset 0 1px 0 rgba(255,255,255,.3) !important;
}
._ob-btn-ghost {
  color: var(--di) !important;
  background: transparent !important;
  font-family: var(--sans) !important;
}
._ob-btn-ghost:hover { color: var(--ink) !important; }
._ob-close {
  color: var(--di) !important;
  background: transparent !important;
}
._ob-close:hover { color: var(--ink) !important; background: rgba(15,20,36,.06) !important; border-radius: 8px; }

/* ════════════════════════════════════════════════════════════════
   22aa. AI PORTFOLIO COACH — 3-card block on portfolio.html
   Sits between the stat tiles and Leaders/Laggards. Reads concentration,
   return health, and rebalance ideas from the user's live book.
   ════════════════════════════════════════════════════════════════ */
.ai-coach {
  margin: 4px 0 28px;
}
.ai-coach-head {
  margin-bottom: 18px;
}
.ai-coach-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-blue); font-weight: 700;
  font-family: var(--mono);
  margin-bottom: 8px;
}
.ai-coach-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-blue);
  box-shadow: 0 0 6px rgba(58,123,213,.55);
  animation: livepulse 2.2s infinite;
}
.ai-coach-h {
  font-family: var(--sans);
  font-size: clamp(22px, 2.4vw, 26px);
  font-weight: 500;
  letter-spacing: -.022em;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}
.ai-coach-h em {
  font-family: var(--serif); font-style: italic;
  color: var(--bl); font-weight: 400;
}

.ai-coach-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 980px) { .ai-coach-grid { grid-template-columns: 1fr; } }

.ai-coach-card {
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--bd);
  border-radius: 14px;
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--sh1);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.ai-coach-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh2);
}
.ai-coach-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  border-radius: 14px 14px 0 0;
}
.ai-coach-card.kind-warn::before { background: linear-gradient(90deg, var(--bl), #f0b340); }
.ai-coach-card.kind-good::before { background: var(--gn); }
.ai-coach-card.kind-idea::before { background: linear-gradient(90deg, var(--bl), var(--accent-blue)); }
.ai-coach-card.loading::before   { background: var(--bd2); }
.ai-coach-card.loading .ac-loading {
  color: var(--di); font-style: italic;
  padding: 10px 0;
}

.ac-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700;
  font-family: var(--mono);
  margin-bottom: 10px;
}
.ai-coach-card.kind-warn .ac-tag { color: #b85400; }
.ai-coach-card.kind-good .ac-tag { color: var(--gn); }
.ai-coach-card.kind-idea .ac-tag { color: var(--bl); }
.ac-icon {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: currentColor;
  color: #fff;
  font-size: 11px; font-weight: 700;
  line-height: 1;
  font-family: var(--sans);
}
.ai-coach-card.kind-warn .ac-icon { background: #b85400; }
.ai-coach-card.kind-good .ac-icon { background: var(--gn); }
.ai-coach-card.kind-idea .ac-icon { background: var(--bl); }

.ac-h {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--ink);
  margin-bottom: 8px;
  line-height: 1.3;
}
.ac-h .num {
  font-family: var(--mono);
  color: var(--bl);
  font-variant-numeric: tabular-nums;
}

.ac-p {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-2);
  letter-spacing: -.005em;
  margin: 0;
}
.ac-p strong { color: var(--ink); font-weight: 600; }
.ac-p em {
  font-family: var(--serif); font-style: italic;
  color: var(--bl); font-weight: 400; font-size: 1.05em;
}

.ai-coach-foot {
  margin-top: 14px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap;
  font-size: 12px;
}
.ai-coach-disclaim {
  color: var(--di);
  font-family: var(--sans);
}
.ai-coach-disclaim em {
  font-family: var(--serif); font-style: italic;
  color: var(--bl); font-weight: 400; font-size: 1.05em;
}
.ai-coach-cta {
  color: var(--bl);
  font-family: var(--sans);
  font-weight: 600;
  text-decoration: none;
  letter-spacing: -.005em;
  transition: gap .2s var(--ease);
}
.ai-coach-cta:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════════════════════
   22a. ATLAS THINKS — always-visible per-stock AI take on research.html
   Sits right under the stat bar. The single most important AI moment
   on any ticker page.
   ════════════════════════════════════════════════════════════════ */
.atlas-thinks {
  position: relative;
  background:
    linear-gradient(180deg, rgba(58,123,213,.04) 0%, transparent 50%),
    rgba(255,255,255,.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--bd);
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 22px;
  box-shadow: var(--sh1);
  overflow: hidden;
}
.atlas-thinks::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--bl), var(--accent-blue), transparent);
  border-radius: 14px 14px 0 0;
}

.atlas-thinks .at-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-blue);
  font-weight: 700;
  font-family: var(--mono);
  margin-bottom: 12px;
}
.atlas-thinks .at-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-blue);
  box-shadow: 0 0 6px rgba(58,123,213,.55);
  animation: livepulse 2.2s infinite;
}
.atlas-thinks .at-sym {
  color: var(--ink);
  font-family: var(--mono);
}

.atlas-thinks .at-body p {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-2);
  letter-spacing: -.005em;
  margin: 0;
}
.atlas-thinks .at-body p strong { color: var(--ink); font-weight: 600; }
.atlas-thinks .at-body p em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--bl);
  font-weight: 400;
  font-size: 1.05em;
}
.atlas-thinks .at-loading {
  color: var(--di);
  font-style: italic;
  font-size: 14px;
  padding: 4px 0;
}

.atlas-thinks .at-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--bd);
}
.atlas-thinks .at-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-family: var(--mono); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  background: rgba(58,123,213,.08);
  border: 1px solid rgba(58,123,213,.18);
  color: var(--accent-blue);
  padding: 3px 10px;
  border-radius: 999px;
}
.atlas-thinks .at-disclaim {
  font-size: 11px; color: var(--di);
  font-family: var(--sans); font-style: italic;
}

/* News callout — rendered below the summary paragraph for big movers */
.atlas-thinks .at-news {
  margin-top: 14px;
  padding: 10px 14px;
  background: rgba(58,123,213,.05);
  border: 1px solid rgba(58,123,213,.14);
  border-radius: 9px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.atlas-thinks .at-news-lbl {
  font-size: 9.5px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--accent-blue);
  font-family: var(--mono); margin-bottom: 2px;
}
.atlas-thinks .at-news-link {
  font-size: 13px; font-family: var(--sans); font-weight: 500;
  color: var(--ink); line-height: 1.45; text-decoration: none;
}
.atlas-thinks .at-news-link:hover { text-decoration: underline; color: var(--accent-blue); }
.atlas-thinks .at-news-src {
  font-size: 11px; color: var(--di); font-family: var(--sans);
}

/* ════════════════════════════════════════════════════════════════
   22b. SOCIAL FEED (feed.html)
   ════════════════════════════════════════════════════════════════ */
.composer {
  background: var(--paper-2) !important;
  border: 1px solid var(--bd) !important;
  box-shadow: var(--sh1) !important;
}
.composer-ta { color: var(--ink) !important; font-family: var(--sans) !important; }
.composer-ta::placeholder { color: var(--mu) !important; }
.composer-footer { border-top: 1px solid var(--bd) !important; }
.ticker-chip {
  background: rgba(255,107,61,.10) !important;
  border-color: var(--bl-bd) !important;
  color: var(--bl) !important;
}
.ticker-inp {
  background: var(--paper-2) !important;
  border: 1px solid var(--bd) !important;
  color: var(--ink) !important;
}
.ticker-inp:focus { border-color: var(--bl) !important; }

/* Feed cards / post tiles */
.post-card, .feed-card, .post-tile {
  background: var(--paper-2) !important;
  border: 1px solid var(--bd) !important;
  box-shadow: var(--sh1) !important;
}
.post-card:hover, .feed-card:hover {
  border-color: var(--bl-bd) !important;
  box-shadow: var(--sh2) !important;
}
.post-author, .post-meta, .feed-author, .feed-meta { color: var(--di) !important; }
.post-body, .feed-body { color: var(--t) !important; }
.post-actions button, .feed-actions button {
  color: var(--di) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
}
.post-actions button:hover, .feed-actions button:hover {
  color: var(--ink) !important;
  background: rgba(15,20,36,.04) !important;
}
.feed-sidebar > * {
  background: var(--paper-2) !important;
  border: 1px solid var(--bd) !important;
  box-shadow: var(--sh1) !important;
}

/* ════════════════════════════════════════════════════════════════
   22c. DESK (publishing / notes — desk.html)
   ════════════════════════════════════════════════════════════════ */
.desk-layout > * { color: var(--ink); }
.editor-card, .notes-list-card, .desk-stats-card {
  background: var(--paper-2) !important;
  border: 1px solid var(--bd) !important;
  box-shadow: var(--sh1) !important;
}
.toolbar {
  background: linear-gradient(180deg, rgba(255,107,61,.02), transparent) !important;
  border-bottom: 1px solid var(--bd) !important;
}
.tb-btn { color: var(--di) !important; }
.tb-btn:hover { background: rgba(15,20,36,.04) !important; border-color: var(--bd) !important; color: var(--ink) !important; }
.tb-sep { background: var(--bd) !important; }
.note-title-input {
  color: var(--ink) !important;
  border-bottom: 1px solid var(--bd) !important;
  font-family: var(--sans) !important;
  font-weight: 500 !important;
  letter-spacing: -.022em !important;
}
.note-title-input::placeholder { color: var(--mu) !important; }
.note-textarea {
  color: var(--t) !important;
  font-family: var(--sans) !important;
}
.note-textarea::placeholder { color: var(--mu) !important; }
.editor-footer {
  border-top: 1px solid var(--bd) !important;
  background: var(--paper-2) !important;
}
.ef-meta { color: var(--di) !important; }
.tag-row { border-bottom: 1px solid var(--bd) !important; }
.tag-input { color: var(--di) !important; }
.tag-pill {
  background: rgba(58,123,213,.08) !important;
  border-color: rgba(58,123,213,.25) !important;
  color: var(--accent-blue) !important;
}
.tag-pill span { color: var(--di) !important; }
.nlc-head { border-bottom: 1px solid var(--bd) !important; }
.note-list-item { border-bottom: 1px solid var(--bd) !important; }
.note-list-item:hover { background: rgba(255,107,61,.03) !important; }
.note-list-item.active {
  background: rgba(255,107,61,.05) !important;
  border-left: 2px solid var(--bl) !important;
}
.nli-title  { color: var(--ink) !important; }
.nli-excerpt { color: var(--di) !important; }
.nli-meta    { color: var(--mu) !important; }

/* ════════════════════════════════════════════════════════════════
   23. CONTRAST TIGHTENING — labels that were too dim
   ════════════════════════════════════════════════════════════════ */
/* Tiny uppercase labels — bump to --di for readability */
.card-label, .hp-section-label, .sec-label, .ph-label,
.scr-card-stat .k, .lib-stat-k, .lib-item-tag,
.hp-snap-live, .lib-eyebrow, .scr-eyebrow {
  color: var(--di) !important;
  font-weight: 700 !important;
}

/* Faint borders/dividers — keep on the ink scale, not white */
.divider, hr {
  border-color: var(--bd) !important;
  background: var(--bd) !important;
  opacity: 1 !important;
}

/* Hero subs across pages */
.hp-mkt-sentence, .ph-sub, .sec-sub {
  color: var(--di) !important;
}

/* ════════════════════════════════════════════════════════════════
   23b. HOMEPAGE AI STRIP — Today's Brief + AI Screener teaser
   The front-page AI presence that anchors the brand.
   ════════════════════════════════════════════════════════════════ */
.hp-ai-strip {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;
  margin-bottom: 28px;
}
@media (max-width: 900px) {
  .hp-ai-strip { grid-template-columns: 1fr; }
}

.hp-ai-brief {
  background:
    linear-gradient(180deg, rgba(255,107,61,.04) 0%, transparent 50%),
    rgba(255,255,255,.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--bd);
  border-radius: 16px;
  padding: 24px 28px;
  box-shadow: var(--sh2);
  position: relative;
  overflow: hidden;
}
.hp-ai-brief::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--bl), var(--accent-blue), transparent);
  border-radius: 16px 16px 0 0;
}

.hp-ai-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-blue); font-weight: 700;
  font-family: var(--mono);
  margin-bottom: 12px;
}
.hp-ai-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-blue);
  box-shadow: 0 0 6px rgba(58,123,213,.55);
  animation: livepulse 2.2s infinite;
}

.hp-ai-h {
  font-family: var(--sans);
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 500;
  letter-spacing: -.024em;
  color: var(--ink);
  margin: 0 0 18px;
  line-height: 1.15;
}

.hp-ai-bullets {
  list-style: none;
  display: flex; flex-direction: column;
  gap: 14px;
  margin: 0 0 18px;
  padding: 0;
}
.hp-ai-bullets li {
  display: flex; align-items: flex-start; gap: 14px;
  font-size: 15px; line-height: 1.65;
  color: var(--ink-2);
  font-family: var(--sans);
  letter-spacing: -.005em;
}
.hp-ai-bullets li strong { color: var(--ink); font-weight: 600; }
.hp-ai-bullets li em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--bl);
  font-size: 1.05em;
  font-weight: 400;
}
.hp-ai-bullets .num {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(58,123,213,.08);
  border: 1px solid rgba(58,123,213,.18);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-style: italic;
  color: var(--accent-blue);
  font-size: 14px; font-weight: 400;
  line-height: 1;
}
.hp-ai-bullets .body { flex: 1; }
.hp-ai-bullets .hp-ai-bullet-loading {
  color: var(--di);
  font-style: italic;
}

.hp-ai-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--bd);
}
.hp-ai-meta {
  font-size: 11.5px; color: var(--di);
  font-family: var(--mono);
  letter-spacing: .02em;
}
.hp-ai-cta {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--bl) !important;
  font-family: var(--sans);
  font-size: 13px; font-weight: 600;
  text-decoration: none;
  letter-spacing: -.005em;
  transition: gap .2s var(--ease);
}
.hp-ai-cta:hover { gap: 9px; }
.hp-ai-cta svg { opacity: .7; }

/* Right side — AI Screener teaser */
.hp-ai-side {
  display: flex; flex-direction: column; justify-content: space-between;
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(58,123,213,.10), transparent 70%),
    rgba(255,255,255,.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--bd);
  border-radius: 16px;
  padding: 24px 26px;
  text-decoration: none;
  color: var(--ink);
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
  box-shadow: var(--sh1);
  position: relative;
  overflow: hidden;
}
.hp-ai-side:hover {
  transform: translateY(-2px);
  border-color: rgba(58,123,213,.32);
  box-shadow: 0 14px 30px -12px rgba(58,123,213,.22);
}
.hp-ai-side-h {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -.022em;
  color: var(--ink);
  margin: 0 0 10px;
  line-height: 1.2;
}
.hp-ai-side-h em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--bl);
  font-weight: 400;
}
.hp-ai-side-p {
  font-size: 13.5px; color: var(--di);
  line-height: 1.6;
  margin: 0 0 16px;
}
.hp-ai-side-p em {
  font-family: var(--mono);
  font-style: normal;
  background: rgba(15,20,36,.05);
  padding: 1px 6px; border-radius: 4px;
  font-size: .92em;
  color: var(--ink-2);
}
.hp-ai-side-cta {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent-blue);
  font-family: var(--sans);
  font-size: 13px; font-weight: 600;
  letter-spacing: -.005em;
  transition: gap .2s var(--ease);
}
.hp-ai-side:hover .hp-ai-side-cta { gap: 9px; }
.hp-ai-side-cta svg { opacity: .8; }

/* ════════════════════════════════════════════════════════════════
   23c. DESIGN POLISH PASS
   Site-wide refinements that make the product feel cohesive:
     - tighter nav density
     - single button system
     - one shadow scale
     - skeleton loaders (no "Loading..." text)
     - calmer empty states with serif accent
     - consistent hover lift
   ════════════════════════════════════════════════════════════════ */

/* ── Nav: subtle separators between nav groups, lighter density ── */
.topnav .navlink {
  font-size: 12.5px !important;
  padding: 0 11px !important;
  font-weight: 500 !important;
}
.topnav .navlink.ai-link {
  /* AI links get slightly more breathing room */
  padding-left: 13px !important;
  padding-right: 13px !important;
}
/* Soft separator before the AI cluster */
.topnav .navlink[href="brief.html"]::before {
  content: '';
  position: absolute;
  left: 0; top: 30%; bottom: 30%;
  width: 1px;
  background: var(--bd);
  opacity: .8;
}
.topnav .navlink[href="brief.html"] { padding-left: 18px !important; }

/* AI badge — tighten the chip so it doesn't clutter */
.navlink.ai-link::before {
  padding: 1px 4px !important;
  font-size: 8px !important;
  margin-right: 4px !important;
  border-radius: 3px !important;
  vertical-align: 2px !important;
}

/* Lock active underline color to orange always */
.navlink.active::after,
.navlink:hover::after {
  background: var(--bl) !important;
  height: 2px !important;
  bottom: -1px !important;
}

/* ── Universal button system — one ring to rule them all ── */
/* Atlas Fresh's various .nav-btn, .btn, .btn-primary, etc. converge here.
   Aurora-themed, consistent radius, consistent shadow. */
.btn, .btn-primary, .nav-btn, .nav-btn.primary,
button[class*="primary"]:not(.lib-modal-tab):not(.aw-mover-tab):not(.scr-chip):not(.cc-share-btn) {
  font-family: var(--sans) !important;
  letter-spacing: -.005em !important;
  border-radius: 999px !important;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease) !important;
}

/* Primary button — orange, used for the ONE main action per surface */
.btn-primary, .nav-btn.primary, button.primary[type="submit"] {
  background: linear-gradient(135deg, var(--bl-h), var(--bl)) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 600 !important;
  box-shadow:
    0 4px 12px -3px rgba(255,107,61,.45),
    inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.btn-primary:hover, .nav-btn.primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 7px 18px -3px rgba(255,107,61,.55),
    inset 0 1px 0 rgba(255,255,255,.3) !important;
}
.btn-primary:active, .nav-btn.primary:active { transform: translateY(0); }

/* Secondary (ghost) button — neutral, lower hierarchy */
.btn-ghost, .nav-btn:not(.primary) {
  background: transparent !important;
  border: 1px solid var(--bd) !important;
  color: var(--di) !important;
  font-weight: 500 !important;
}
.btn-ghost:hover, .nav-btn:not(.primary):hover {
  background: rgba(15,20,36,.04) !important;
  border-color: var(--bd2) !important;
  color: var(--ink) !important;
}

/* ── One shadow scale — kill the disparate elevations ── */
:root {
  /* Single shadow scale */
  --elev-1: 0 1px 0 rgba(15,20,36,.04), 0 2px 6px rgba(15,20,36,.05);
  --elev-2: 0 1px 0 rgba(15,20,36,.05), 0 8px 22px -6px rgba(15,20,36,.10);
  --elev-3: 0 1px 0 rgba(15,20,36,.06), 0 18px 40px -12px rgba(15,20,36,.16);
}
.card, .stat-tile, .editor-card, .desk-stats-card, .notes-list-card,
.composer, .post-card, .lib-item, .scr-card, .result, .hp-news-card,
.idx-tile, .sector-tile, .sd-statbar, .sd-card, .sd-chart-box,
.sd-perf-item, .earn-upcoming-card, .ai-coach-card, .atlas-thinks,
.hp-ai-brief, .hp-ai-side, .cc-card, .cc-main {
  box-shadow: var(--elev-1) !important;
}
.card:hover, .stat-tile:hover, .lib-item:hover, .scr-card:hover,
.result:hover, .hp-news-card:hover, .idx-tile:hover, .ai-coach-card:hover,
.atlas-thinks:hover, .hp-ai-side:hover {
  box-shadow: var(--elev-2) !important;
}

/* ── Skeleton loader — replaces gray "Loading…" text ── */
@keyframes skel-shimmer {
  0%   { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}
.skeleton {
  display: inline-block;
  background:
    linear-gradient(90deg,
      rgba(15,20,36,.04) 0%,
      rgba(15,20,36,.10) 50%,
      rgba(15,20,36,.04) 100%);
  background-size: 200px 100%;
  background-repeat: no-repeat;
  border-radius: 4px;
  color: transparent !important;
  user-select: none;
  animation: skel-shimmer 1.4s linear infinite;
}
.skeleton-line {
  display: block;
  height: 12px;
  margin: 8px 0;
  border-radius: 4px;
}
.skeleton-line.w-25  { width: 25%; }
.skeleton-line.w-50  { width: 50%; }
.skeleton-line.w-75  { width: 75%; }
.skeleton-line.w-100 { width: 100%; }

/* Auto-upgrade any element whose text matches 'loading...' patterns */
.hp-mover-row[data-loading], .loading-state {
  position: relative;
  min-height: 20px;
}

/* Convert text-based "Loading..." placeholders to skeleton bars */
[data-skel="line"]   { display: block; height: 12px; margin: 8px 0; }
[data-skel="title"]  { height: 18px; width: 60%; margin-bottom: 10px; }

/* Replace the bland "Loading movers…" / "Loading…" messages with subtle skeleton rows */
#hpMoversBody:has(div:only-child[style*="color:var(--mu)"]) > div {
  background: transparent !important;
  color: transparent !important;
  height: 36px;
  position: relative;
  overflow: hidden;
}
#hpMoversBody:has(div:only-child[style*="color:var(--mu)"]) > div::after {
  content: '';
  position: absolute; inset: 8px 0;
  background:
    linear-gradient(90deg,
      rgba(15,20,36,.04) 0%,
      rgba(15,20,36,.08) 50%,
      rgba(15,20,36,.04) 100%);
  background-size: 220px 100%;
  border-radius: 6px;
  animation: skel-shimmer 1.4s linear infinite;
}

/* ── Calmer empty states — every "nothing here" gets a serif italic flourish ── */
.empty-state, .pf-empty, .lib-empty, .cc-empty, .scr-state {
  text-align: center;
  padding: 56px 24px;
  color: var(--di);
}
.empty-state h3, .pf-empty h3, .lib-empty-h, .cc-empty-h {
  font-family: var(--sans) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  letter-spacing: -.018em !important;
  color: var(--ink) !important;
  margin-bottom: 8px !important;
}
.empty-state em, .pf-empty em, .lib-empty-h em, .cc-empty-h em {
  font-family: var(--serif) !important;
  font-style: italic !important;
  color: var(--bl) !important;
  font-weight: 400 !important;
}

/* ── Tighter type rules for h1/h2 across surfaces ── */
h1, h2, .hero-title, .scr-title, .lib-title, .cc-title, .ai-coach-h, .hp-ai-h {
  font-feature-settings: 'cv11', 'ss01';
}

/* ── Focus ring — visible, accessible, on-brand ── */
:focus-visible {
  outline: 2px solid var(--bl) !important;
  outline-offset: 3px !important;
  border-radius: 6px !important;
}

/* ── Cleaner ticker tape — less aggressive border ── */
.ticker-tape {
  border-top: 1px solid var(--bd);
  border-bottom: 1px solid var(--bd) !important;
  background: rgba(255,255,255,.78) !important;
}

/* ── Subtle scroll edge fade for any horizontal scroller ── */
.nav-links, .sd-tabs, .sd-statbar, [class*="-scroll"] {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  mask-image:         linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}

/* ── Selection color — branded ── */
::selection { background: rgba(255,107,61,.22) !important; color: var(--ink) !important; }

/* ── Cleaner toast — single position, one motion ── */
.atlas-toast, .lib-toast {
  background: var(--ink) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 11px 22px !important;
  box-shadow: 0 12px 28px -8px rgba(15,20,36,.4) !important;
  font-family: var(--sans) !important;
  font-size: 13px !important;
}

/* ── Lift the floating Ask widget pill polish ── */
.aaw-fab {
  box-shadow:
    0 10px 28px -6px rgba(255,107,61,.55),
    0 2px 6px rgba(15,20,36,.1),
    inset 0 1px 0 rgba(255,255,255,.32) !important;
}
.aaw-fab:hover {
  transform: translateY(-2px);
  box-shadow:
    0 14px 32px -6px rgba(255,107,61,.65),
    0 2px 6px rgba(15,20,36,.12),
    inset 0 1px 0 rgba(255,255,255,.32) !important;
}

/* ── Stat tile polish — number above label = clearer ── */
.stat-tile {
  background: rgba(255,255,255,.85) !important;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--bd) !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
}
.stat-tile .stat-label {
  font-family: var(--mono) !important;
  font-size: 10.5px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--di) !important;
  font-weight: 700 !important;
  margin-bottom: 6px !important;
}
.stat-tile .stat-value {
  font-family: var(--sans) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -.022em !important;
  color: var(--ink) !important;
  font-variant-numeric: tabular-nums !important;
}
.stat-tile .stat-value.pos { color: var(--gn) !important; }
.stat-tile .stat-value.neg { color: var(--rd) !important; }
.stat-tile .stat-sub {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  color: var(--di) !important;
  margin-top: 4px !important;
}

/* ── Card head consistency ── */
.card-head, .card-header {
  padding: 14px 20px !important;
  border-bottom: 1px solid var(--bd) !important;
  background: linear-gradient(180deg, rgba(255,107,61,.02), transparent) !important;
}
.card-label {
  font-family: var(--mono) !important;
  font-size: 10.5px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--di) !important;
  font-weight: 700 !important;
}

/* ════════════════════════════════════════════════════════════════
   24. ERROR PAGES (404, 50x) — make them feel branded, not broken.
   ════════════════════════════════════════════════════════════════ */
body.err-page, body:has(.err-card), body:has(.error-wrap) {
  background:
    radial-gradient(60% 50% at 50% 30%, #d4e4f6 0%, transparent 60%),
    var(--paper) !important;
}
.err-card, .error-wrap {
  background: var(--paper-2) !important;
  border: 1px solid var(--bd) !important;
  box-shadow: var(--sh2) !important;
  color: var(--t) !important;
}

/* ════════════════════════════════════════════════════════════════
   CHARTING — Pro toolbar (was dark-theme, unreadable on cream)
   ════════════════════════════════════════════════════════════════ */
.pro-toolbar {
  background: rgba(15, 20, 36, .04) !important;
  border-bottom: 1px solid var(--bd) !important;
  height: 46px !important;
  padding: 0 16px !important;
  gap: 4px !important;
}
.pro-toolbar::-webkit-scrollbar-thumb { background: rgba(15,20,36,.20) !important; }
.pt-group { gap: 3px !important; }
.pt-group-lbl {
  color: var(--mu) !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  font-size: 10px !important;
  padding: 0 9px 0 4px !important;
}
.pt-btn {
  color: var(--ink-2) !important;
  background: rgba(15,20,36,.04) !important;
  border: 1px solid transparent !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 6px 11px !important;
  border-radius: 7px !important;
}
.pt-btn:hover {
  background: #ffffff !important;
  color: var(--ink) !important;
  border-color: var(--bd) !important;
  box-shadow: 0 1px 3px rgba(15,20,36,.06) !important;
}
.pt-btn.active {
  background: rgba(255,107,61,.12) !important;
  color: var(--bl) !important;
  border-color: rgba(255,107,61,.30) !important;
}
.pt-btn.util {
  color: var(--ink-3) !important;
  font-size: 12px !important;
  padding: 6px 10px !important;
}
.pt-btn.util:hover { color: var(--ink) !important; background: #ffffff !important; border-color: var(--bd) !important; }
.pt-btn.accent { color: var(--bl) !important; }
.pt-btn.accent:hover { background: rgba(255,107,61,.10) !important; }
.pt-btn.danger { color: var(--rd-t) !important; }
.pt-btn.danger:hover { background: rgba(220,38,38,.08) !important; color: #b91c1c !important; }
.pt-sep {
  background: var(--bd) !important;
  height: 22px !important;
  margin: 0 8px !important;
}
.pt-ind-btn {
  background: var(--bl) !important;
  border: 1px solid var(--bl) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(255,107,61,.22) !important;
}
.pt-ind-btn:hover { background: var(--bl-h) !important; border-color: var(--bl-h) !important; color: #ffffff !important; transform: translateY(-1px); }
.pt-ind-btn.active { background: var(--bl) !important; color: #ffffff !important; }
.pt-ind-badge {
  background: #ffffff !important;
  color: var(--bl) !important;
  font-weight: 800 !important;
}
.pt-saved-badge {
  background: var(--bl) !important;
  color: #ffffff !important;
  margin-left: 5px !important;
  font-size: 9px !important;
  padding: 1px 6px !important;
  border-radius: 8px !important;
}

/* ════════════════════════════════════════════════════════════════
   RESEARCH DETAIL — tighten contrast (labels/subtitles were too light)
   ════════════════════════════════════════════════════════════════ */
/* Header identity row */
.sd-name         { color: var(--ink-2) !important; font-weight: 500 !important; font-size: 14px !important; }
.sd-sector-row   { color: var(--ink-3) !important; opacity: 1 !important; font-weight: 500 !important; }
.sd-exch-badge   {
  background: rgba(15,20,36,.05) !important;
  border: 1px solid var(--bd) !important;
  color: var(--ink-2) !important;
  font-weight: 600 !important;
}

/* All small uppercase mono labels — these were faint gray, now solid dark */
.sd-statbar-label,
.sd-perf-label,
.sd-drivers-label,
.sd-side-label {
  color: var(--ink-2) !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

/* Sub-values under main stats (e.g. "Fwd 37.5x", "0.7x avg") */
.sd-statbar-sub  { color: var(--ink-3) !important; font-weight: 500 !important; }

/* 52-week range labels */
.sd-range-row,
.sd-range-label  { color: var(--ink-2) !important; font-weight: 600 !important; }

/* Inactive tabs were too faint */
.sd-tab          { color: var(--ink-3) !important; font-weight: 600 !important; }
.sd-tab:hover    { color: var(--ink) !important; }

/* Sidebar cards — heading and body */
.sd-side-card    {
  background: var(--paper-2) !important;
  border: 1px solid var(--bd) !important;
  box-shadow: var(--sh1) !important;
}
.sd-side-card a, .sd-side-card .sd-side-row { color: var(--ink-2) !important; }

/* Recently-viewed strip — the label and ticker subtitles were near-invisible */
#recentlyViewedBar,
.sr-recently-viewed,
.recently-viewed {
  color: var(--ink-2) !important;
}
#recentlyViewedBar .rv-label,
.sr-recently-viewed .rv-label,
.recently-viewed .rv-label {
  color: var(--ink-3) !important;
  font-weight: 700 !important;
}
#recentlyViewedBar .rv-chip,
.recently-viewed .rv-chip {
  color: var(--ink-2) !important;
  font-weight: 500 !important;
}
#recentlyViewedBar .rv-sym,
.recently-viewed .rv-sym {
  color: var(--ink) !important;
  font-weight: 700 !important;
}

/* Peer rows in sidebar — names below the ticker were nearly invisible */
.sd-peer-name, .sd-peer-sub { color: var(--ink-3) !important; }
.sd-peer-sym { color: var(--ink) !important; font-weight: 700 !important; }

/* "today" suffix next to price change */
.sd-chg-label    { color: var(--ink-3) !important; font-weight: 500 !important; }

/* Pre-market / after-hours badge — keep amber but darker text */
.sd-ext-badge.sd-ext-pre  { color: #92400e !important; background: rgba(217,119,6,.12) !important; border: 1px solid rgba(217,119,6,.30) !important; }
.sd-ext-badge.sd-ext-post { color: #475569 !important; background: rgba(100,116,139,.10) !important; border: 1px solid rgba(100,116,139,.30) !important; }

/* ════════════════════════════════════════════════════════════════
   GLOBAL CONTRAST CATCH-ALLS — fixes the "gray on gray" problem
   on cream paper. Most of the dark-theme code uses hardcoded white-
   ish or pale-blue colors via inline `style="..."` attributes; aurora
   can't catch those through normal class selectors so we use attribute
   selectors here.  All have !important so they always win the cascade.
   ════════════════════════════════════════════════════════════════ */

/* Pale dark-theme text colors → solid ink */
[style*="color:#e8f2ff"],
[style*="color: #e8f2ff"],
[style*="color:#eaf2ff"],
[style*="color: #eaf2ff"],
[style*="color:#dce8f6"],
[style*="color: #dce8f6"],
[style*="color:#d2dce9"],
[style*="color: #d2dce9"] { color: var(--ink) !important; }

[style*="color:#94a3b8"],
[style*="color: #94a3b8"],
[style*="color:#9aa3bc"],
[style*="color: #9aa3bc"],
[style*="color:#82a0bc"],
[style*="color: #82a0bc"],
[style*="color:#5a7a99"],
[style*="color: #5a7a99"],
[style*="color:#4e6580"],
[style*="color: #4e6580"],
[style*="color:#3e6080"],
[style*="color: #3e6080"],
[style*="color:#6b7280"],
[style*="color: #6b7280"],
[style*="color:#9ca3af"],
[style*="color: #9ca3af"],
[style*="color:#cbd5e1"],
[style*="color: #cbd5e1"] { color: var(--ink-3) !important; }

/* Pale-blue accents from the dark theme → keep accent semantic but darken */
[style*="color:#82b6ff"],
[style*="color: #82b6ff"],
[style*="color:#7eb3ff"],
[style*="color: #7eb3ff"],
[style*="color:#5c9aff"],
[style*="color: #5c9aff"],
[style*="color:#bfdbfe"],
[style*="color: #bfdbfe"],
[style*="color:#93c5fd"],
[style*="color: #93c5fd"] { color: var(--accent-blue) !important; }

/* White-on-X inline colors — totally invisible on cream */
[style*="color:rgba(255,255,255,.92)"],
[style*="color:rgba(255,255,255,.9)"],
[style*="color:rgba(255,255,255,.85)"],
[style*="color:rgba(255, 255, 255, .92)"],
[style*="color:rgba(255, 255, 255, .9)"],
[style*="color:rgba(255, 255, 255, .85)"] { color: var(--ink) !important; }

[style*="color:rgba(255,255,255,.7)"],
[style*="color:rgba(255,255,255,.6)"],
[style*="color:rgba(255,255,255,.5)"],
[style*="color: rgba(255,255,255,.7)"],
[style*="color: rgba(255,255,255,.6)"],
[style*="color: rgba(255,255,255,.5)"] { color: var(--ink-2) !important; }

[style*="color:rgba(255,255,255,.4)"],
[style*="color:rgba(255,255,255,.45)"],
[style*="color:rgba(255,255,255,.35)"],
[style*="color:rgba(255,255,255,.3)"],
[style*="color:rgba(255,255,255,.25)"],
[style*="color:rgba(255,255,255,.22)"],
[style*="color:rgba(255,255,255,.2)"] { color: var(--ink-3) !important; }

/* Inline border colors that vanish on cream */
[style*="border:1px solid rgba(255,255,255,"],
[style*="border: 1px solid rgba(255,255,255,"],
[style*="border-color:rgba(255,255,255,"],
[style*="border-color: rgba(255,255,255,"] { border-color: var(--bd) !important; }

[style*="border-bottom:1px solid rgba(255,255,255,"],
[style*="border-bottom: 1px solid rgba(255,255,255,"],
[style*="border-top:1px solid rgba(255,255,255,"],
[style*="border-top: 1px solid rgba(255,255,255,"] {
  border-bottom-color: var(--bd) !important;
  border-top-color: var(--bd) !important;
}

/* Inline backgrounds that were "subtle white overlay" on dark — now invisible */
[style*="background:rgba(255,255,255,.025)"],
[style*="background:rgba(255,255,255,.04)"],
[style*="background:rgba(255,255,255,.05)"],
[style*="background:rgba(255,255,255,.06)"],
[style*="background: rgba(255,255,255,.025)"],
[style*="background: rgba(255,255,255,.04)"],
[style*="background: rgba(255,255,255,.05)"],
[style*="background: rgba(255,255,255,.06)"] { background: rgba(15,20,36,.035) !important; }

[style*="background:rgba(0,0,0,"],
[style*="background: rgba(0,0,0,"] { background: rgba(15,20,36,.04) !important; }

/* "Loading…" placeholders and tiny mono labels using var(--mu) — bump weight */
[style*="font-family:var(--mono)"][style*="color:var(--mu)"],
[style*="font-family: var(--mono)"][style*="color: var(--mu)"] {
  color: var(--di) !important;
  font-weight: 600 !important;
}

/* Watchlist tab + price-tile text on cream */
.wl-price-tile,
.wl-tab,
.wl-list-tbl td,
.wl-list-tbl th {
  color: var(--ink-2) !important;
}
.wpt-name, .wl-sym-name { color: var(--ink-3) !important; }
.wpt-meta { color: var(--ink-3) !important; }

/* Generic CSS variable-driven fallback: anything using `color:var(--mu)`
   that hasn't been overridden by a more-specific rule gets readable ink-3. */
.muted, .text-muted { color: var(--ink-3) !important; }

/* ════════════════════════════════════════════════════════════════
   RESEARCH DETAIL — second polish pass: punchier text everywhere
   ════════════════════════════════════════════════════════════════ */

/* "today" suffix next to the price change */
.sd-chg-label { color: var(--ink-2) !important; font-weight: 600 !important; }

/* Recently-viewed chips — make subtitles readable */
.rv-chip-name {
  color: var(--ink-2) !important;
  font-weight: 500 !important;
  max-width: 110px !important;   /* let names breathe a bit */
}
.rv-chip-sym  { color: var(--ink) !important; font-weight: 700 !important; }
.rv-chip {
  background: var(--paper-2) !important;
  border: 1px solid var(--bd) !important;
}
.rv-chip:hover { border-color: var(--bl) !important; background: rgba(255,107,61,.06) !important; }

/* Sidebar peers — "Apple Inc.", "Amazon.com, Inc." were faint */
.sd-peer-name {
  color: var(--ink-2) !important;
  font-weight: 500 !important;
  max-width: 140px !important;   /* show a bit more before truncating */
}
.sd-peer-sym { color: var(--ink) !important; font-weight: 700 !important; }

/* Sidebar info rows (Sector / Industry / Employees / Country) */
.sd-side-row {
  color: var(--ink-2) !important;
  border-bottom-color: var(--bd) !important;
}
.sd-side-row > span:first-child,
.sd-side-row .sd-side-row-label {
  color: var(--ink-3) !important;
  font-weight: 600 !important;
}
.sd-side-row > span:last-child,
.sd-side-row .sd-side-row-val {
  color: var(--ink) !important;
  font-weight: 600 !important;
}

/* Atlas Thinks body — bump weight for readability */
.atlas-thinks .at-body p {
  color: var(--ink-2) !important;
  font-weight: 450 !important;
  font-size: 15.5px !important;
}
.atlas-thinks .at-foot { color: var(--ink-3) !important; }
.atlas-thinks .at-disclaim { color: var(--ink-3) !important; font-weight: 500 !important; }

/* Stat-bar — let prices like "$356.28 – $555.45" breathe so they don't
   look squished into the next cell. */
.sd-statbar {
  overflow-x: auto !important;     /* horizontal scroll instead of clipping */
}
.sd-statbar-item {
  min-width: 118px !important;
  padding: 12px 14px !important;
  flex-shrink: 0 !important;        /* never let any cell shrink below min */
}
.sd-statbar-val {
  white-space: nowrap !important;
  font-size: 12.5px !important;
  letter-spacing: -.012em;
  overflow: visible !important;     /* spillover should not get clipped */
}
/* 52W Range needs the most room for "$356.28 – $555.45" */
.sd-statbar-item:nth-child(6) {     /* 52W Range column */
  min-width: 188px !important;
}
.sd-statbar-item:nth-child(6) .sd-statbar-val {
  font-size: 12px !important;       /* slightly smaller so the dash + values fit */
}
/* Beta only needs to show a small number — let it stay tight */
.sd-statbar-item:nth-child(7) {
  min-width: 72px !important;
}

/* News tags — pale dark-theme accents → solid on cream */
.hp-news-tag.tech  { color: #1d4ed8 !important; background: rgba(58,123,213,.12) !important; }
.hp-news-tag.macro { color: #92400e !important; background: rgba(217,119,6,.12) !important; }
.hp-news-tag.earn  { color: #6d28d9 !important; background: rgba(167,139,250,.14) !important; }
.hp-news-tag.mkts  { color: #15803d !important; background: rgba(22,163,74,.12) !important; }
.hp-news-tag.geo   { color: #a21caf !important; background: rgba(232,121,249,.14) !important; }
.hp-news-tag.deriv { color: var(--ink-2) !important; background: rgba(15,20,36,.06) !important; }

/* News card body */
.hp-news-headline { color: var(--ink) !important; font-weight: 600 !important; }
.hp-news-meta     { color: var(--ink-3) !important; font-weight: 500 !important; }
.hp-news-source   { color: var(--bl) !important; font-weight: 700 !important; }
.hp-news-card {
  background: var(--paper-2) !important;
  border: 1px solid var(--bd) !important;
  box-shadow: 0 1px 0 rgba(15,20,36,.03), 0 4px 14px -6px rgba(15,20,36,.10) !important;
}
.hp-news-card:hover {
  border-color: var(--bl) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 22px -8px rgba(255,107,61,.25) !important;
}

/* Mover rows on home — sub-text was faint */
.hp-mover-name { color: var(--ink-3) !important; font-weight: 500 !important; }
.hp-mover-vol  { color: var(--ink-3) !important; font-weight: 500 !important; }
.hp-mover-sym  { color: var(--ink) !important; }
.hp-mover-tab  { color: var(--ink-3) !important; font-weight: 600 !important; }
.hp-mover-tab.active { color: var(--ink) !important; background: var(--paper-2) !important; }

/* Watchlist preview on home */
.hp-wl-name { color: var(--ink-3) !important; font-weight: 500 !important; }
.hp-wl-sym  { color: var(--ink) !important; }

/* Section header labels (home page) */
.hp-section-label { color: var(--ink-2) !important; font-weight: 700 !important; }
.hp-view-all      { color: var(--bl) !important; opacity: 1 !important; font-weight: 600 !important; }

/* Hero meta on home (date / time / market status) */
.hp-hero-meta     { color: var(--ink-2) !important; font-weight: 500 !important; }
.hp-hero-meta .hp-hero-sep { color: var(--ink-3) !important; opacity: .55; }
.hp-mkt-sentence  { color: var(--ink-2) !important; font-weight: 450 !important; }

/* Index bar (SPY / QQQ tiles) */
.idx-name, .idx-tile-name { color: var(--ink-3) !important; font-weight: 600 !important; }
.idx-tile, .idx-cell {
  background: var(--paper-2) !important;
  border: 1px solid var(--bd) !important;
}

/* Sector/industry text on stock header — was being clipped */
.sd-sector-row {
  white-space: normal !important;     /* allow wrapping instead of "..." */
  max-width: 100% !important;
}

/* Compare panel — search dropdown (Apple/Apple Hospitality REIT/etc.)
   was rendered with a hardcoded dark background on cream paper. */
.cmp-ac-drop {
  background: var(--paper-2, #fff) !important;
  border: 1px solid var(--bd) !important;
  box-shadow: 0 14px 36px -10px rgba(15,20,36,.22) !important;
  width: 320px !important;
}
.cmp-ac-row {
  border-bottom: 1px solid var(--bd) !important;
  color: var(--ink-2) !important;
}
.cmp-ac-row:hover,
.cmp-ac-row.active {
  background: rgba(255,107,61,.08) !important;
}
.cmp-ac-sym  { color: var(--ink) !important; font-weight: 700 !important; }
.cmp-ac-name { color: var(--ink-2) !important; font-weight: 500 !important; }
.cmp-ac-exch { color: var(--ink-3) !important; font-weight: 600 !important; }

/* Compare panel header + chips */
.cmp-header { border-bottom: 1px solid var(--bd) !important; }
.cmp-title  { color: var(--ink) !important; font-weight: 600 !important; }
.cmp-add-label { color: var(--ink-3) !important; font-weight: 700 !important; }
.cmp-add-input {
  background: var(--paper-2) !important;
  border: 1px solid var(--bd) !important;
  color: var(--ink) !important;
}
.cmp-add-input:focus {
  border-color: var(--bl) !important;
  box-shadow: 0 0 0 3px rgba(255,107,61,.15) !important;
  outline: none !important;
}
.cmp-add-input::placeholder { color: var(--ink-3) !important; }
.cmp-max-note  { color: var(--ink-3) !important; font-weight: 600 !important; }
.cmp-save-btn  {
  background: rgba(167,139,250,.10) !important;
  border: 1px solid rgba(124,58,237,.30) !important;
  color: #5b21b6 !important;
}
.cmp-save-btn:hover { background: rgba(167,139,250,.18) !important; }
.cmp-close     { color: var(--ink-2) !important; }
.cmp-close:hover { background: rgba(15,20,36,.06) !important; color: var(--ink) !important; }
.cmp-status    { color: var(--ink-3) !important; font-weight: 500 !important; }
.cmp-chart-loading { color: var(--ink-3) !important; font-weight: 500 !important; }
.cmp-metrics-title { color: var(--ink-2) !important; font-weight: 700 !important; }
.cmp-metric-lbl { color: var(--ink-3) !important; }
.cmp-metric-val { color: var(--ink) !important; }
.cmp-card-head { background: var(--paper-2) !important; }
.cmp-card-name { color: var(--ink-3) !important; }
.cmp-card-sym  { color: var(--ink) !important; }

/* ════════════════════════════════════════════════════════════════
   EMAIL VERIFICATION BANNER — the "Please verify your email" strip
   was using pale yellow on a faint amber wash; on cream paper it
   was completely illegible.
   ════════════════════════════════════════════════════════════════ */
#_evBanner {
  background: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%) !important;
  border-bottom: 1px solid #d97706 !important;
  color: #78350f !important;
  font-weight: 500 !important;
  box-shadow: 0 2px 8px -2px rgba(217,119,6,.25) !important;
}
#_evBanner .ev-icon  { filter: none !important; opacity: 1 !important; }
#_evBanner .ev-text  { color: #78350f !important; font-weight: 600 !important; }
#_evBanner .ev-email {
  color: #92400e !important;
  font-weight: 700 !important;
  background: rgba(255,255,255,.55) !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(120,53,15,.18) !important;
}
#_evBanner .ev-sep   { color: #92400e !important; opacity: .55 !important; }
#_evBanner .ev-btn {
  background: #d97706 !important;
  border: 1px solid #b45309 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px -1px rgba(217,119,6,.45) !important;
}
#_evBanner .ev-btn:hover:not(:disabled) {
  background: #b45309 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px -2px rgba(217,119,6,.55) !important;
}
#_evBanner .ev-dismiss {
  color: #78350f !important;
  opacity: .65 !important;
}
#_evBanner .ev-dismiss:hover {
  opacity: 1 !important;
  color: #78350f !important;
  background: rgba(120,53,15,.10) !important;
  border-radius: 4px;
}

/* ════════════════════════════════════════════════════════════════
   CHARTING — Crosshair HUD tooltip (was dark slate on cream paper)
   ════════════════════════════════════════════════════════════════ */
.chart-hud {
  background: rgba(255,255,255,.97) !important;
  border: 1px solid var(--bd) !important;
  box-shadow: 0 10px 32px -8px rgba(15,20,36,.20) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  color: var(--ink) !important;
}
.hud-date {
  color: var(--ink-3) !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  font-size: 11px !important;
}
.hud-lbl {
  color: var(--ink-3) !important;
  font-weight: 700 !important;
  letter-spacing: .10em !important;
}
.hud-val {
  color: var(--ink) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}
.hud-val.pos { color: #15803d !important; }
.hud-val.neg { color: #b91c1c !important; }
.hud-divider { background: var(--bd) !important; }
.hud-ind-name { color: var(--ink-3) !important; font-weight: 600 !important; }
.hud-ind-val  { color: var(--ink) !important; font-weight: 700 !important; }

/* The drawing tools' info tooltip (also dark in original CSS) */
.chart-tip {
  background: rgba(255,255,255,.98) !important;
  border: 1px solid var(--bd) !important;
  box-shadow: 0 16px 48px -12px rgba(15,20,36,.30) !important;
  color: var(--ink-2) !important;
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — tablet (≤ 980px) and mobile (≤ 640px)
   Fixes layouts that look broken at half-screen or on phones.
   ════════════════════════════════════════════════════════════════ */

/* ── Tablet: collapse 2-col layouts to 1 col ─────────────────── */
@media (max-width: 980px) {
  /* Home page: AI strip stacks vertically */
  .hp-ai-strip      { grid-template-columns: 1fr !important; }
  .hp-main-grid     { grid-template-columns: 1fr !important; }
  .hp-features      { grid-template-columns: repeat(2, 1fr) !important; }
  .hp-idx-bar       { grid-template-columns: repeat(3, 1fr) !important; }

  /* Brief page: glance grid stacks */
  .glance-grid      { grid-template-columns: 1fr !important; gap: 14px !important; }
  .watch-grid       { grid-template-columns: 1fr !important; }
  .sector-grid      { grid-template-columns: repeat(3, 1fr) !important; }

  /* Portfolio page: stats and switcher wrap nicely */
  .port-stat-grid   { grid-template-columns: repeat(2, 1fr) !important; }
  .perf-grid        { grid-template-columns: repeat(2, 1fr) !important; }

  /* Markets: stack futures rows */
  .futures-row      { grid-template-columns: repeat(2, 1fr) !important; }
  .global-row       { grid-template-columns: 1fr !important; }
  .movers-grid      { grid-template-columns: 1fr !important; }

  /* Compare panel: side-by-side cards stack */
  .cmp-cards-row    { grid-template-columns: 1fr !important; }
}

/* ── Mobile: single column, tight padding ────────────────────── */
@media (max-width: 640px) {
  /* Reduce page padding everywhere */
  .main .wrap, .scr-page, .page {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Hero typography shrinks */
  .hp-headline      { font-size: 24px !important; }
  .hp-tagline       { font-size: 14px !important; }

  /* Search bar — chips wrap, button shrinks */
  .hp-search-row    { padding: 4px 4px 4px 12px !important; }
  .hp-search-go     { padding: 9px 16px !important; font-size: 13px !important; }
  .hp-search-input  { font-size: 15px !important; }

  /* Index tiles 2-up */
  .hp-idx-bar       { grid-template-columns: repeat(2, 1fr) !important; }

  /* Features stack */
  .hp-features      { grid-template-columns: 1fr !important; }

  /* Brief: stat strip wraps, sector tiles 2-up */
  .glance-card,
  .watch-card,
  .brief-card       { padding: 16px 18px !important; border-radius: 14px !important; }
  .sector-grid      { grid-template-columns: repeat(2, 1fr) !important; }
  .brief-actions    { flex-wrap: wrap; }
  .brief-btn        { flex: 1 1 calc(50% - 8px); justify-content: center; }

  /* Portfolio: stat tiles single col, switcher wraps */
  .port-stat-grid   { grid-template-columns: 1fr !important; }
  .perf-grid        { grid-template-columns: 1fr !important; }
  .port-switcher    { padding: 10px 12px !important; }
  .port-sw-btn      { font-size: 12px !important; padding: 6px 12px !important; }

  /* Watchlist: list rows tighten */
  .wl-list-tbl th,
  .wl-list-tbl td   { padding: 8px 6px !important; font-size: 11.5px !important; }

  /* AI screener: cards full-width */
  .scr-results      { grid-template-columns: 1fr !important; }
  .scr-card         { padding: 16px !important; }

  /* News cards full-width */
  .hp-news-grid     { grid-template-columns: 1fr !important; }

  /* Research detail: stack chart + sidebar */
  .sd-layout        { grid-template-columns: 1fr !important; }
  .sd-sidebar       { margin-top: 18px; }
  .sd-statbar       { overflow-x: auto; }
  .sd-actions       { flex-wrap: wrap; gap: 6px; }
  .sd-action-btn    { flex: 1 1 calc(50% - 4px); justify-content: center; }

  /* Compare panel inputs wrap */
  .cmp-add-row      { flex-wrap: wrap; gap: 8px !important; }

  /* Footer links wrap onto next line */
  .foot-links       { justify-content: center; }
}

/* ── Hide ticker tape on mobile — free up vertical space ───── */
@media (max-width: 768px) {
  .ticker-tape { display: none !important; }
  /* Remove the tape's clearance from page top */
  .main { padding-top: var(--nav) !important; }
}
@media (max-width: 480px) {
  .nav-search       { display: none !important; }
  .nav-brand-name   { display: none !important; }
  .nav-live         { display: none !important; }
}

/* ── Prevent iOS Safari zoom on input focus (< 16px triggers it) */
@media (max-width: 768px) {
  input, select, textarea { font-size: 16px !important; }
}

/* ════════════════════════════════════════════════════════════════
   MARKETS PAGE — fix dark-theme tiles that bled onto cream paper
   ════════════════════════════════════════════════════════════════ */

/* Futures, global, treasury, sector, index-detail tiles */
.fut-tile, .tsy-st-tile, .tsy-feat-tile, .tsy-rel-tile,
.idx-tile, .sector-tile {
  background: var(--paper-2) !important;
  border: 1px solid var(--bd) !important;
  box-shadow: var(--sh1) !important;
}
.fut-tile:hover, .tsy-feat-tile:hover, .sector-tile:hover {
  border-color: rgba(255,107,61,.30) !important;
  box-shadow: 0 6px 18px -8px rgba(255,107,61,.16) !important;
}

/* Tile typography */
.fut-name, .tsy-st-label, .tsy-yield-label, .sec-name {
  color: var(--ink-3) !important;
  font-weight: 700 !important;
}
.fut-val, .tsy-st-val, .tsy-feat-yield, .tsy-yield-val,
.idx-detail-sym, .idx-detail-price, .sec-ret, .tsy-rel-val {
  color: var(--ink) !important;
}
.tsy-st-sub { color: var(--ink-3) !important; }

/* Chart search input (top-right of price chart) */
.chart-search {
  background: var(--paper-2) !important;
  border: 1px solid var(--bd) !important;
  color: var(--ink) !important;
}
.chart-search:focus { border-color: var(--bl) !important; }
.chart-search::placeholder { color: var(--ink-3) !important; }

/* Yield-curve date picker */
.yield-date-input {
  background: var(--paper-2) !important;
  border: 1px solid var(--bd) !important;
  color: var(--ink) !important;
}

/* Movers tabs */
.movers-tab {
  background: rgba(15,20,36,.04) !important;
  border: 1px solid var(--bd) !important;
  color: var(--ink-3) !important;
  font-weight: 600 !important;
}
.movers-tab.active {
  background: rgba(255,107,61,.10) !important;
  border-color: rgba(255,107,61,.30) !important;
  color: var(--bl) !important;
}

/* Toggle groups (range / benchmark buttons) */
.toggle-group .tbtn {
  background: rgba(15,20,36,.03) !important;
  border: 1px solid var(--bd) !important;
  color: var(--ink-3) !important;
}
.toggle-group .tbtn:hover {
  border-color: var(--bl) !important;
  color: var(--ink) !important;
}
.toggle-group .tbtn.active {
  background: var(--bl) !important;
  border-color: var(--bl) !important;
  color: #fff !important;
}

/* Cards on markets/portfolio/watchlists */
.card {
  background: var(--paper-2) !important;
  border: 1px solid var(--bd) !important;
  box-shadow: var(--sh1) !important;
}
.card-head {
  border-bottom: 1px solid var(--bd) !important;
}
.card-label { color: var(--ink-2) !important; font-weight: 700 !important; }

/* Generic table cells (movers, holdings tables) */
.tbl th { color: var(--ink-3) !important; border-bottom-color: var(--bd) !important; }
.tbl td { color: var(--ink-2) !important; border-bottom-color: var(--bd) !important; }
/* Without these, the .tbl td !important above clobbers the generic .pos/.neg
   coloring on every site-wide table (portfolio holdings Day-Chg / Total-Return,
   markets Top Movers Change, practice game P&L, etc). Higher specificity +
   !important beats the override; was previously fixed per-page on markets.html. */
.tbl td.pos { color: var(--gn-t) !important; }
.tbl td.neg { color: var(--rd-t) !important; }
.tbl tr:hover td { background: rgba(255,107,61,.04) !important; }

/* Index-detail modal/expand */
.idx-detail-close { color: var(--ink-3) !important; }
.idx-detail-close:hover { background: rgba(15,20,36,.05) !important; color: var(--ink) !important; }

/* ════════════════════════════════════════════════════════════════
   WATCHLISTS — price tiles + list view
   ════════════════════════════════════════════════════════════════ */
.wl-price-tile {
  background: var(--paper-2) !important;
  border: 1px solid var(--bd) !important;
  box-shadow: var(--sh1) !important;
}
.wl-price-tile:hover {
  border-color: rgba(255,107,61,.30) !important;
  box-shadow: 0 6px 18px -8px rgba(255,107,61,.16) !important;
}
.wpt-sym, .wpt-price { color: var(--ink) !important; }
.wpt-name { color: var(--ink-3) !important; font-weight: 500 !important; }
.wpt-meta { color: var(--ink-3) !important; }
.wpt-remove {
  background: rgba(15,20,36,.06) !important;
  color: var(--ink-3) !important;
}
.wpt-remove:hover {
  background: rgba(220,38,38,.10) !important;
  color: #b91c1c !important;
}

/* Watchlist tabs (top of page) */
.wl-tabs {
  background: rgba(15,20,36,.03) !important;
  border: 1px solid var(--bd) !important;
}
.wl-tab { color: var(--ink-3) !important; font-weight: 600 !important; }
.wl-tab.active {
  background: var(--paper-2) !important;
  color: var(--ink) !important;
  box-shadow: 0 1px 4px rgba(15,20,36,.10) !important;
}
.wl-tab:hover:not(.active) { color: var(--ink) !important; }

/* Watchlist list view */
.wl-list-tbl th, .wl-list-tbl td {
  border-bottom-color: var(--bd) !important;
  color: var(--ink-2) !important;
}
.wl-list-tbl th { color: var(--ink-3) !important; }
.wl-list-tbl tr:hover td { background: rgba(255,107,61,.04) !important; }
.wl-sym-icon {
  background: rgba(255,107,61,.10) !important;
  color: var(--bl) !important;
}
.wl-sym-name { color: var(--ink-3) !important; }

/* Empty / loading states */
.wl-empty, .wl-loading { color: var(--ink-3) !important; }
.wl-empty-icon { opacity: .35 !important; }

/* Pre/post market badges in watchlist tiles */
.wpt-ext-pre, .wl-ext-pre {
  background: rgba(217,119,6,.08) !important;
  border-color: rgba(217,119,6,.25) !important;
  color: #92400e !important;
}
.wpt-ext-post, .wl-ext-post {
  background: rgba(100,116,139,.08) !important;
  border-color: rgba(100,116,139,.20) !important;
  color: #475569 !important;
}

/* ════════════════════════════════════════════════════════════════
   CHARTING — main chart container, action buttons, indicator panel
   ════════════════════════════════════════════════════════════════ */
.chart-action-btn {
  background: rgba(15,20,36,.04) !important;
  border: 1px solid var(--bd) !important;
  color: var(--ink-3) !important;
  font-weight: 600 !important;
}
.chart-action-btn:hover {
  background: var(--paper-2) !important;
  color: var(--ink) !important;
  border-color: rgba(255,107,61,.30) !important;
}
.chart-action-btn.alert-set {
  background: rgba(217,119,6,.10) !important;
  border-color: rgba(217,119,6,.30) !important;
  color: #92400e !important;
}
.chart-action-btn.wl-added {
  background: rgba(22,163,74,.10) !important;
  border-color: rgba(22,163,74,.30) !important;
  color: #15803d !important;
}

.chart-load-btn {
  background: var(--bl) !important;
  border: none !important;
  color: #fff !important;
}
.chart-load-btn:hover { background: var(--bl-h) !important; }

.chart-search-input {
  background: var(--paper-2) !important;
  border: 1px solid var(--bd) !important;
  color: var(--ink) !important;
}
.chart-search-input:focus {
  border-color: var(--bl) !important;
  box-shadow: 0 0 0 3px rgba(255,107,61,.10) !important;
}
.chart-search-input::placeholder { color: var(--ink-3) !important; }

/* Symbol header */
.chart-sym-big { color: var(--ink) !important; }
.chart-sym-name { color: var(--ink-3) !important; font-weight: 500 !important; }

/* Indicator panel (toggles on/off below toolbar) */
.ind-panel {
  background: var(--paper-2) !important;
  border: 1px solid var(--bd) !important;
}
.ind-panel-hd-label { color: var(--ink-3) !important; font-weight: 700 !important; }
.ind-panel-x {
  color: var(--ink-3) !important;
  background: none !important;
}
.ind-panel-x:hover { background: rgba(15,20,36,.06) !important; color: var(--ink) !important; }
.ind-panel .ind-chip {
  background: rgba(15,20,36,.04) !important;
  border: 1px solid var(--bd) !important;
  color: var(--ink-2) !important;
}
.ind-panel .ind-chip:hover {
  background: var(--paper-2) !important;
  border-color: rgba(255,107,61,.30) !important;
}
.ind-panel .ind-chip.on {
  background: rgba(255,107,61,.10) !important;
  border-color: rgba(255,107,61,.40) !important;
  color: var(--bl) !important;
}

/* Risk-metrics row at bottom */
.risk-metric {
  background: var(--paper-2) !important;
  border: 1px solid var(--bd) !important;
}
.risk-metric:hover { border-color: rgba(255,107,61,.30) !important; }
.rm-label { color: var(--ink-3) !important; font-weight: 700 !important; }
.rm-val { color: var(--ink) !important; }
.rm-sub { color: var(--ink-3) !important; }

/* Chart symbol autocomplete dropdown */
.chart-sym-drop {
  background: var(--paper-2) !important;
  border: 1px solid var(--bd) !important;
  box-shadow: 0 14px 36px -10px rgba(15,20,36,.22) !important;
}
.csd-row {
  border-bottom: 1px solid var(--bd) !important;
  color: var(--ink-2) !important;
}
.csd-row:hover, .csd-row.active {
  background: rgba(255,107,61,.06) !important;
}
.csd-sym, .csd-price { color: var(--ink) !important; font-weight: 700 !important; }
.csd-name { color: var(--ink-3) !important; }
.csd-exch { color: var(--ink-3) !important; opacity: .8; }

/* Compare bar (when active on charting page) */
.compare-bar {
  background: var(--paper-2) !important;
  border: 1px solid var(--bd) !important;
}
.cmp-input {
  background: var(--paper-2) !important;
  border: 1px solid var(--bd) !important;
  color: var(--ink) !important;
}
.cmp-exit-btn {
  background: rgba(220,38,38,.08) !important;
  border: 1px solid rgba(220,38,38,.25) !important;
  color: #b91c1c !important;
}

/* ════════════════════════════════════════════════════════════════
   ⌘K COMMAND PALETTE
   ════════════════════════════════════════════════════════════════ */
#atlasCmdK {
  position: fixed; inset: 0; z-index: 4000;
  display: none;
}
#atlasCmdK.open { display: block; }
#atlasCmdK .ck-backdrop {
  position: absolute; inset: 0;
  background: rgba(15,20,36,.32);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: ckFade .16s ease;
}
@keyframes ckFade { from { opacity: 0; } to { opacity: 1; } }
#atlasCmdK .ck-panel {
  position: absolute; left: 50%; top: 14vh;
  transform: translateX(-50%);
  width: min(620px, calc(100vw - 32px));
  background: rgba(255,255,255,.99);
  border: 1px solid var(--bd);
  border-radius: 18px;
  box-shadow: 0 40px 90px -20px rgba(15,20,36,.40), 0 0 0 1px rgba(15,20,36,.03);
  overflow: hidden;
  animation: ckPop .18s var(--ease);
}
@keyframes ckPop {
  from { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(.98); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
#atlasCmdK .ck-input-row {
  display: flex; align-items: center; gap: 11px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--bd);
}
#atlasCmdK .ck-glyph { font-size: 17px; color: var(--di); }
#atlasCmdK #ckInput {
  flex: 1; border: none; outline: none; background: transparent;
  font-family: var(--sans); font-size: 15.5px; color: var(--ink);
  letter-spacing: -.008em;
}
#atlasCmdK #ckInput::placeholder { color: #a8b0c0; }
#atlasCmdK .ck-esc {
  font-family: var(--mono); font-size: 10px; color: var(--di);
  background: var(--paper-2); border: 1px solid var(--bd);
  padding: 3px 7px; border-radius: 6px; text-transform: uppercase;
}
#atlasCmdK .ck-list {
  max-height: 46vh; overflow-y: auto; padding: 7px;
}
#atlasCmdK .ck-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 11px; border-radius: 11px; cursor: pointer;
}
#atlasCmdK .ck-item.sel { background: rgba(255,107,61,.08); }
#atlasCmdK .ck-ico {
  width: 32px; height: 32px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper-2); border: 1px solid var(--bd);
  border-radius: 9px; font-size: 15px;
}
#atlasCmdK .ck-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
#atlasCmdK .ck-label {
  font-family: var(--sans); font-size: 13.5px; font-weight: 600;
  color: var(--ink); letter-spacing: -.008em;
}
#atlasCmdK .ck-sub {
  font-family: var(--sans); font-size: 11.5px; color: var(--di); margin-top: 1px;
}
#atlasCmdK .ck-enter {
  font-family: var(--mono); font-size: 12px; color: var(--di);
  opacity: 0; transition: opacity .12s;
}
#atlasCmdK .ck-item.sel .ck-enter { opacity: .8; }
#atlasCmdK .ck-empty {
  padding: 26px 16px; text-align: center;
  font-family: var(--sans); font-size: 13px; color: var(--di);
}
#atlasCmdK .ck-foot {
  display: flex; gap: 18px; justify-content: flex-end;
  padding: 9px 16px; border-top: 1px solid var(--bd);
  font-family: var(--mono); font-size: 10px; color: var(--di);
  background: var(--paper-2);
}

/* ── Research action buttons — one consistent quiet pill style ──
   (the dark-theme rgba(255,255,255,…) base rendered nearly invisible
   on cream, which made the four actions look like scattered text) */
.sd-action-btn {
  background: #fff !important;
  border: 1px solid rgba(15,20,36,.14) !important;
  color: #3d4666 !important;
  border-radius: 9px !important;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(15,20,36,.05);
}
.sd-action-btn:hover {
  border-color: rgba(255,107,61,.45) !important;
  color: #ff6b3d !important;
  background: #fff !important;
}
.sd-action-btn.wl-added {
  background: rgba(22,163,74,.08) !important;
  border-color: rgba(22,163,74,.35) !important;
  color: #15803d !important;
}
.sd-action-btn.alert-set {
  background: rgba(217,119,6,.08) !important;
  border-color: rgba(217,119,6,.35) !important;
  color: #b45309 !important;
}
.sd-action-btn.alert-fired {
  background: rgba(22,163,74,.08) !important;
  border-color: rgba(22,163,74,.35) !important;
  color: #15803d !important;
}

/* ════════════════════════════════════════════════════════════════
   LIVING AURORA — signature drifting warmth behind every page.
   Barely perceptible; the page should feel sunlit, not decorated.
   ════════════════════════════════════════════════════════════════ */
body {
  background-image:
    radial-gradient(42% 38% at 12% 6%,  rgba(255,107,61,.065), transparent 62%),
    radial-gradient(36% 32% at 88% 10%, rgba(59,124,248,.045), transparent 60%),
    radial-gradient(55% 48% at 55% 96%, rgba(255,176,102,.055), transparent 64%) !important;
  background-size: 160% 160%, 150% 150%, 170% 170%;
  background-position: 0% 0%, 100% 0%, 50% 100%;
  background-repeat: no-repeat;
  animation: auroraDrift 48s ease-in-out infinite alternate;
}
@keyframes auroraDrift {
  0%   { background-position: 0% 0%,   100% 0%,  50% 100%; }
  100% { background-position: 30% 14%, 70% 22%,  35% 78%; }
}
@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
}

/* ════════════════════════════════════════════════════════════════
   SHIMMER SKELETONS — premium loading states
   Add class "shimmer" to any placeholder block.
   ════════════════════════════════════════════════════════════════ */
.shimmer {
  position: relative;
  overflow: hidden;
  background: rgba(15,20,36,.055) !important;
  border-radius: 8px;
  color: transparent !important;
}
.shimmer::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.75) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: shimmerSweep 1.4s ease-in-out infinite;
}
@keyframes shimmerSweep { to { transform: translateX(100%); } }

/* ════════════════════════════════════════════════════════════════
   LIVE PRICE FLASH — numbers pulse softly when they update
   ════════════════════════════════════════════════════════════════ */
.px-flash {
  animation: pxFlash 0.9s ease-out;
  border-radius: 4px;
}
@keyframes pxFlash {
  0%  { background-color: rgba(255,107,61,.18); }
  100%{ background-color: transparent; }
}

/* ════════════════════════════════════════════════════════════════
   SITE FOOTER — the page ends on purpose now
   ════════════════════════════════════════════════════════════════ */
.site-footer {
  margin-top: 56px;
  border-top: 1px solid var(--bd);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(8px);
}
.sf-inner {
  max-width: 1180px; margin: 0 auto;
  padding: 40px 28px 18px;
}
.sf-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 28px;
  padding-bottom: 30px;
}
@media (max-width: 860px) { .sf-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .sf-grid { grid-template-columns: 1fr; } }
.sf-brand-name {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-weight: 800; font-size: 16px;
  color: var(--ink); letter-spacing: -.02em; margin-bottom: 10px;
}
.sf-brand-mark {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, #ff8a3d, #ff6b3d);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
}
.sf-tagline {
  font-family: var(--sans); font-size: 12.5px; color: var(--di);
  line-height: 1.6; max-width: 250px;
}
.sf-col-h {
  font-family: var(--mono); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--di); font-weight: 700;
  margin-bottom: 12px;
}
.sf-link {
  display: block; font-family: var(--sans); font-size: 13px;
  color: #3d4666; text-decoration: none; padding: 4px 0;
  transition: color .14s;
}
.sf-link:hover { color: #ff6b3d; }
.sf-bottom {
  border-top: 1px solid var(--bd);
  padding: 16px 0 4px;
  font-family: var(--sans); font-size: 11px; color: var(--di);
  line-height: 1.65; text-align: center;
}
.sf-bottom strong { color: #3d4666; }

/* ════════════════════════════════════════════════════════════════
   FEEDBACK WIDGET — floating pill (bottom-left), calm modal
   ════════════════════════════════════════════════════════════════ */
#atlasFb {
  position: fixed; left: 18px; bottom: 18px; z-index: 3000;
}
#atlasFbBtn {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.95); color: #3d4666;
  border: 1px solid var(--bd); border-radius: 999px;
  padding: 9px 16px; font-family: var(--sans);
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  box-shadow: 0 6px 20px -8px rgba(15,20,36,.25);
  transition: all .16s;
  backdrop-filter: blur(8px);
}
#atlasFbBtn:hover { color: #ff6b3d; border-color: rgba(255,107,61,.4); transform: translateY(-1px); }
#atlasFbCard {
  position: absolute; left: 0; bottom: 52px;
  width: 300px; background: #fff;
  border: 1px solid var(--bd); border-radius: 16px;
  box-shadow: 0 24px 60px -12px rgba(15,20,36,.30);
  padding: 18px;
  opacity: 0; transform: translateY(8px) scale(.97);
  pointer-events: none;
  transition: opacity .18s var(--ease), transform .2s var(--ease);
}
#atlasFb.open #atlasFbCard { opacity: 1; transform: none; pointer-events: auto; }
#atlasFbCard .fb-h {
  font-family: var(--sans); font-size: 14.5px; font-weight: 700;
  color: var(--ink); margin-bottom: 4px; letter-spacing: -.012em;
}
#atlasFbCard .fb-sub {
  font-family: var(--sans); font-size: 11.5px; color: var(--di);
  margin-bottom: 12px; line-height: 1.5;
}
#atlasFbCard textarea {
  width: 100%; min-height: 84px; resize: vertical;
  border: 1px solid rgba(15,20,36,.14); border-radius: 10px;
  padding: 10px 12px; font-family: var(--sans); font-size: 13px;
  color: var(--ink); outline: none; background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
#atlasFbCard textarea:focus { border-color: #ff6b3d; box-shadow: 0 0 0 3px rgba(255,107,61,.10); }
#atlasFbCard .fb-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px;
}
#atlasFbCard .fb-send {
  background: #ff6b3d; color: #fff; border: none; border-radius: 9px;
  padding: 8px 18px; font-family: var(--sans); font-size: 12.5px;
  font-weight: 700; cursor: pointer; transition: transform .14s, box-shadow .14s;
}
#atlasFbCard .fb-send:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -4px rgba(255,107,61,.45); }
#atlasFbCard .fb-send:disabled { opacity: .55; cursor: default; transform: none; box-shadow: none; }
#atlasFbCard .fb-status {
  font-family: var(--mono); font-size: 10.5px; color: var(--di);
}
#atlasFbCard .fb-status.ok { color: #15803d; }
#atlasFbCard .fb-status.err { color: #b91c1c; }
@media (max-width: 640px) {
  #atlasFb { left: 12px; bottom: 76px; }   /* clear the mobile tab bar */
  #atlasFbCard { width: min(300px, calc(100vw - 40px)); }
}

/* ════════════════════════════════════════════════════════════════
   PLAIN-ENGLISH TOOLTIPS  ([data-tip] anywhere → tap/hover explainer)
   The "easier than Yahoo" system: any jargon gets a plain meaning.
   ════════════════════════════════════════════════════════════════ */
.has-tip { cursor: help; position: relative; }
.tip-i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px; margin-left: 5px;
  border-radius: 50%; background: rgba(15,20,36,.10);
  color: #6c7593; font-size: 9px; font-weight: 700;
  font-family: Georgia, serif; font-style: italic;
  vertical-align: middle; transition: all .14s;
  position: relative; top: -1px;
}
.has-tip:hover .tip-i { background: #ff6b3d; color: #fff; }

/* The floating bubble (one shared element, positioned by JS) */
#nalloTip {
  position: fixed; z-index: 6000; max-width: 280px;
  background: #0f1424; color: #f4f1ea;
  font-family: var(--sans, system-ui); font-size: 12.5px; line-height: 1.5;
  font-weight: 450; letter-spacing: -.005em;
  padding: 11px 14px; border-radius: 11px;
  box-shadow: 0 16px 40px -10px rgba(15,20,36,.45);
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
}
#nalloTip.show { opacity: 1; transform: none; }
#nalloTip::after {
  content: ''; position: absolute; width: 9px; height: 9px;
  background: #0f1424; transform: rotate(45deg);
}
#nalloTip[data-pos="top"]::after    { bottom: -4px; left: var(--arrow-x, 50%); margin-left: -4px; }
#nalloTip[data-pos="bottom"]::after { top: -4px;    left: var(--arrow-x, 50%); margin-left: -4px; }

/* ════════════════════════════════════════════════════════════════
   25. FORM INPUTS — alert modal + watchlist modal inputs use dark-
       theme rgba(255,255,255,.05) backgrounds that vanish on cream.
       Watchlist chip × button uses rgba(255,255,255,.35) class color
       (not an inline style, so the attribute selectors above miss it).
   ════════════════════════════════════════════════════════════════ */

/* Alert price input */
.alm-inp {
  background: var(--paper-2) !important;
  border: 1px solid var(--bd) !important;
  color: var(--ink) !important;
  caret-color: var(--bl) !important;
}
.alm-inp:focus {
  border-color: var(--bl) !important;
  box-shadow: 0 0 0 3px rgba(255,107,61,.1) !important;
  background: var(--paper) !important;
}
.alm-inp::placeholder { color: var(--mu) !important; }

/* Watchlist modal name input */
.wl-modal-inp {
  background: var(--paper-2) !important;
  border: 1px solid var(--bd) !important;
  color: var(--ink) !important;
  caret-color: var(--bl) !important;
}
.wl-modal-inp:focus {
  border-color: var(--bl) !important;
  box-shadow: 0 0 0 3px rgba(255,107,61,.1) !important;
  background: var(--paper) !important;
}
.wl-modal-inp::placeholder { color: var(--mu) !important; }

/* Watchlist chip × close button — class-based color, not inline */
.wl-chip-x { color: var(--mu) !important; opacity: .7; }
.wl-chip-x:hover { color: var(--ink) !important; opacity: 1; }

/* ══════════════════════════════════════════════════════════════
   MOBILE NAV — Aurora light-theme overrides
   All mobile nav defaults in atlas.css use dark rgba values
   designed for the default dark theme. Every override here
   corrects those for the white/light Aurora background.
   ══════════════════════════════════════════════════════════════ */

/* Hamburger button */
.nav-ham {
  border-color: rgba(15,20,36,.16);
}
.nav-ham:hover {
  background: rgba(15,20,36,.05);
  border-color: rgba(15,20,36,.28);
  color: var(--hi);
}

/* Slide-in drawer shell */
#_mobDrawer {
  background: #ffffff;
  border-right: 1px solid rgba(15,20,36,.09);
  box-shadow: 6px 0 40px rgba(15,20,36,.10);
}

/* Drawer header */
._mob-dh {
  border-bottom: 1px solid rgba(15,20,36,.07);
}
._mob-dh-close:hover {
  background: rgba(15,20,36,.05);
  color: var(--hi);
}

/* Drawer nav links */
._mob-navlink:hover {
  background: rgba(15,20,36,.04);
  color: var(--hi);
}
._mob-navlink.active {
  background: rgba(255,107,61,.07);
  border-left-color: var(--bl);
  color: var(--hi);
}

/* Section separator line */
._mob-nav-sep {
  background: rgba(15,20,36,.07);
}

/* Section label (e.g. "Research & Tools") */
._mob-nav-section {
  color: var(--mu);
}

/* Drawer auth section */
._mob-auth {
  border-top: 1px solid rgba(15,20,36,.07);
}
._mob-auth-user {
  background: rgba(15,20,36,.03);
  border: 1px solid rgba(15,20,36,.06);
  border-radius: 10px;
}

/* Ghost button (Settings / Dashboard) */
._mob-abtn.ghost {
  background: rgba(15,20,36,.03);
  border-color: rgba(15,20,36,.11);
  color: var(--di);
}
._mob-abtn.ghost:hover {
  background: rgba(15,20,36,.07);
  color: var(--hi);
}

/* Primary CTA button — orange glow instead of blue */
._mob-abtn.primary {
  box-shadow: 0 2px 14px rgba(255,107,61,.30), 0 0 0 1px rgba(255,107,61,.45);
}
._mob-abtn.primary:hover {
  background: #e85c2a;
}

/* Legal footer */
._mob-legal {
  border-top: 1px solid rgba(15,20,36,.06);
}
._mob-legal-link {
  color: rgba(84,93,122,.55);
}
._mob-legal-link:hover {
  color: var(--mu);
}

/* ── Bottom tab bar — white on Aurora pages ─────────────────── */
#_mobTabBar {
  background: rgba(255,255,255,.97);
  border-top: 1px solid rgba(15,20,36,.09);
}
.mob-tab {
  color: #9ca3af;
}
.mob-tab:hover {
  color: var(--di);
}
.mob-tab.active {
  color: var(--bl);
}
.mob-tab.active::after {
  background: var(--bl);
}

/* ── Mobile card & wrap refinements ─────────────────────────── */
@media (max-width: 768px) {
  /* Tighter card padding on phones — more content visible */
  .card-body { padding: 14px 16px !important; }
  .card-head { padding: 12px 16px !important; }
  /* Reduce page header title size for one-line fit */
  .ph-title { font-size: 20px !important; }
  /* Site footer: single column on phone */
  .sf-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .sf-inner { padding: 28px 16px 24px !important; }
}

/* ── Watchlist tab bar: horizontal scroll on overflow ────────── */
@media (max-width: 640px) {
  .wl-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .wl-tabs::-webkit-scrollbar { display: none; }
}