/* Shared look for Market Overview, Options Overview and Symbol Lookup (2026-10-13 redesign). Loaded after each page's own
   styles, so it only overrides: colours, type, cards, tabs, motion. Dark is the default; the sun/moon button switches. */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap");

:root, :root[data-theme="light"] {
  --bg: #F3F5FB; --surface: #FFFFFF; --surface-2: #EDF0F8; --surface-3: #DFE4F1;
  --text: #0E1324; --text-muted: #55607A; --text-faint: #8A93AB;
  --accent: #5B4BFF; --accent-2: #00B8D9; --accent-soft: #E7E4FF;
  --positive: #0E9F6E; --positive-soft: #DCF5EA; --negative: #E0384B; --negative-soft: #FDE4E7;
  --border: rgba(14, 19, 36, 0.09); --border-strong: rgba(14, 19, 36, 0.16);
  --shadow: 0 1px 2px rgba(14,19,36,0.05), 0 10px 30px rgba(40,50,120,0.08);
  --glow: 0 0 0 1px rgba(91,75,255,0.25), 0 12px 34px rgba(91,75,255,0.18);
  --grad: linear-gradient(100deg, #5B4BFF 0%, #00B8D9 100%);
  --mesh: radial-gradient(900px 420px at 8% -10%, rgba(91,75,255,0.13), transparent 60%), radial-gradient(800px 400px at 100% 0%, rgba(0,184,217,0.12), transparent 60%);
}
:root[data-theme="dark"] {
  --bg: #070A14; --surface: #10152A; --surface-2: #171D38; --surface-3: #212A4D;
  --text: #EEF1FF; --text-muted: #9BA6C7; --text-faint: #66709A;
  --accent: #8B7BFF; --accent-2: #2FE0FF; --accent-soft: #221F4D;
  --positive: #2EE6A0; --positive-soft: #0E3A2C; --negative: #FF5C72; --negative-soft: #43161F;
  --border: rgba(150, 165, 255, 0.11); --border-strong: rgba(150, 165, 255, 0.22);
  --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 14px 40px rgba(0,0,0,0.45);
  --glow: 0 0 0 1px rgba(139,123,255,0.45), 0 14px 44px rgba(90,70,255,0.35);
  --grad: linear-gradient(100deg, #8B7BFF 0%, #2FE0FF 100%);
  --mesh: radial-gradient(900px 460px at 6% -12%, rgba(120,90,255,0.28), transparent 60%), radial-gradient(820px 420px at 100% -6%, rgba(0,200,255,0.20), transparent 60%), radial-gradient(700px 500px at 50% 120%, rgba(46,230,160,0.08), transparent 60%);
}

body { background: var(--bg); background-image: var(--mesh); background-attachment: fixed; }
h1, h2, h3, .quote-name, .summary-headline, .thesis h2, .kpi .val, .quote-price .p { font-family: "Space Grotesk", "IBM Plex Sans", system-ui, sans-serif; }

/* header */
.topbar { border-bottom: none; padding-bottom: 4px; align-items: center; }
h1 { font-size: 26px; letter-spacing: -0.02em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand { align-items: center; }
.brand-mark { border: none; color: #fff; background: var(--grad); border-radius: 8px; padding: 5px 8px; box-shadow: var(--glow); }
.nav-tabs { background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 4px; box-shadow: var(--shadow); }
.nav-tabs a { border-radius: 999px; padding: 7px 15px; transition: color .15s, background .15s; }
.nav-tabs a:hover { color: var(--text); }
.nav-tabs a.active { background: var(--grad); color: #fff; box-shadow: var(--glow); }
.refresh-btn, .search-form button, .ai-go { background: var(--grad); color: #fff; border-radius: 999px; box-shadow: var(--glow); transition: transform .15s, filter .15s; }
.refresh-btn:hover, .search-form button:hover, .ai-go:hover { opacity: 1; filter: brightness(1.1); transform: translateY(-1px); }
.search-form input { border-radius: 999px; padding-left: 16px; }

/* market status + theme switch (added by fx.js) */
.fx-status { display: inline-flex; align-items: center; gap: 7px; font-family: "IBM Plex Mono"; font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; }
.fx-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); }
.fx-status.open { color: var(--positive); border-color: color-mix(in srgb, var(--positive) 40%, transparent); }
.fx-status.open i { background: var(--positive); box-shadow: 0 0 0 0 var(--positive); animation: fx-pulse 1.8s infinite; }
@keyframes fx-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--positive) 70%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
.fx-theme { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 15px; cursor: pointer; line-height: 1; }
.fx-theme:hover { border-color: var(--accent); }
.fx-theme:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ticker tape (added by fx.js) */
.fx-tape { overflow: hidden; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.fx-tape-track { display: inline-flex; gap: 26px; padding: 9px 0; white-space: nowrap; animation: fx-scroll 70s linear infinite; will-change: transform; }
.fx-tape:hover .fx-tape-track { animation-play-state: paused; }
.fx-tape a { font-family: "IBM Plex Mono"; font-size: 12.5px; font-weight: 600; color: var(--text); text-decoration: none; display: inline-flex; gap: 7px; align-items: baseline; }
.fx-tape a:hover b { color: var(--accent); }
.fx-tape .up { color: var(--positive); } .fx-tape .dn { color: var(--negative); }
@keyframes fx-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* cards */
.panel, .kpi, .thesis { border-radius: 16px; border: 1px solid var(--border); background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, var(--accent) 8%) 0%, var(--surface) 90px); }
.panel, .thesis { position: relative; }
.panel::before, .thesis::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 2px; border-radius: 2px; background: var(--grad); opacity: 0.7; }
.kpi { position: relative; overflow: hidden; transition: transform .18s, box-shadow .18s; }
.kpi::after { content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: var(--grad); opacity: 0.13; filter: blur(8px); }
.kpi:hover { transform: translateY(-3px); box-shadow: var(--glow); }
.kpi .val { font-size: 27px; font-weight: 700; letter-spacing: -0.02em; }
.kpi:nth-child(2) .val { color: var(--positive); } .kpi:nth-child(3) .val { color: var(--negative); }
.panel-head h3 { font-size: 16px; letter-spacing: -0.01em; }
.thesis h2, .summary-headline { font-size: 22px; letter-spacing: -0.02em; }
.quote-name { font-size: 24px; letter-spacing: -0.02em; }
.quote-price .p { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; }
.badge, .rec-badge, .side, .opt-side, .ai-action { border-radius: 999px; }

/* section tabs */
.tabs { gap: 8px; }
.tabs button, .pop-links button { border-radius: 999px; padding: 8px 16px; background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); transition: transform .15s, color .15s, border-color .15s; }
.tabs button:hover { opacity: 1; color: var(--text); border-color: var(--accent); transform: translateY(-1px); }
.tabs button.on { background: var(--grad); color: #fff; border-color: transparent; box-shadow: var(--glow); }
.tabs button:disabled { transform: none; border-color: var(--border); }
.panel.tabp.on { animation: fx-in .28s ease both; }
@keyframes fx-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* tables */
thead th, .opt-tbl th { background: transparent; }
tbody tr { transition: background .12s; }
tbody tr:hover, .opt-tbl tbody tr:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.tk, .setup-sym { font-family: "Space Grotesk", sans-serif; font-weight: 700; letter-spacing: 0.01em; }
.hot { color: var(--accent-2); text-shadow: 0 0 14px color-mix(in srgb, var(--accent-2) 55%, transparent); }
.fx-bar { background-image: linear-gradient(90deg, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent-2) 22%, transparent)); background-repeat: no-repeat; background-position: right center; }
.split { height: 9px; border-radius: 999px; }
.tile { border-radius: 12px; transition: transform .15s; } .tile:hover { transform: scale(1.03); }
.exp-sel { border-radius: 999px; padding: 3px 8px; }
.error-banner, .invalidation, .ai-warn { border-radius: 12px; }

/* ---- ORB page (its own class names) ---- */
main > header { align-items: center; }
main > header .bar { gap: 10px; }
.card, .scroll { border-radius: 16px; border: 1px solid var(--border); background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, var(--accent) 8%) 0%, var(--surface) 90px); position: relative; }
.card::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 2px; border-radius: 2px; background: var(--grad); opacity: 0.7; }
.slot-head { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.big, .scan-head .sym, .rec div b, .slot-head b { font-family: "Space Grotesk", "IBM Plex Sans", sans-serif; letter-spacing: -0.01em; }
.big { font-size: 26px; } .rec div b { font-size: 20px; }
main h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--text); font-family: "Space Grotesk", sans-serif; }
main h2::before { content: ""; width: 4px; height: 16px; border-radius: 4px; background: var(--grad); flex: none; }
main button:not(.fx-theme) { border-radius: 999px; padding: 7px 15px; transition: transform .15s, border-color .15s; }
main button:not(.fx-theme):hover { background: var(--surface); border-color: var(--accent); transform: translateY(-1px); }
#refresh { background: var(--grad); color: #fff; border-color: transparent; box-shadow: var(--glow); font-weight: 600; }
#refresh:hover { background: var(--grad); filter: brightness(1.1); }
.scroll th, .card th { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
tr.pick td, .scan-sub.taken { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.scan-card.taken { box-shadow: var(--glow); }
details.bt-details > summary { border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  .fx-tape-track, .fx-status.open i, .panel.tabp.on { animation: none; }
  .kpi:hover, .tabs button:hover, .tile:hover { transform: none; }
}

/* narrow screens: let the top bar (nav, timestamp, refresh, status, theme) wrap instead of overflowing sideways (2026-10-17) */
.topbar-right { flex-wrap: wrap; row-gap: 8px; min-width: 0; }
@media (max-width: 640px) { .topbar-right { gap: 8px; } .topbar-right .timestamp { flex-basis: 100%; } }

/* 5 nav tabs (Weekly Picks added 2026-10-18): wrap instead of overflowing on phones */
@media (max-width: 600px) {
  .nav-tabs { flex-wrap: wrap; border-radius: 16px; max-width: 100%; }
  .nav-tabs a { padding: 6px 11px; }
}