:root {
  color-scheme: dark;
  --bg: #06070b;
  --bg-soft: #0b1020;
  --panel: rgba(14, 18, 32, 0.72);
  --panel-strong: rgba(20, 26, 44, 0.92);
  --border: rgba(255, 213, 92, 0.16);
  --border-soft: rgba(255, 255, 255, 0.08);
  --text: #f7f3df;
  --muted: #9fa7ba;
  --muted-2: #6d7485;
  --gold: #ffd75a;
  --gold-2: #ffb92e;
  --gold-3: #fff0a5;
  --green: #45e096;
  --red: #ff647d;
  --pink: #ff7aa7;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --max: 1220px;
  --header: 76px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% 5%, rgba(255, 215, 90, 0.16), transparent 34rem),
    radial-gradient(circle at 85% 15%, rgba(92, 145, 255, 0.13), transparent 34rem),
    linear-gradient(135deg, var(--bg), #090b12 55%, #0b0b08);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.6), transparent 75%);
  pointer-events: none;
}

a { color: inherit; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(20px);
  background: linear-gradient(180deg, rgba(6, 7, 11, 0.92), rgba(6, 7, 11, 0.66));
  border-bottom: 1px solid var(--border-soft);
}
.nav {
  height: var(--header);
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-mark {
  width: 46px; height: 46px; border-radius: 16px;
  display: grid; place-items: center;
  font-weight: 900; color: #111;
  background: linear-gradient(135deg, var(--gold-3), var(--gold-2));
  box-shadow: 0 14px 38px rgba(255, 185, 46, 0.28);
}
.brand-text { display: grid; line-height: 1.05; }
.brand-text strong { font-size: 1.05rem; letter-spacing: -0.03em; }
.brand-text small { color: var(--muted); font-weight: 700; }
.nav-links { display: flex; align-items: center; gap: 8px; }
.nav-links a {
  text-decoration: none;
  color: var(--muted);
  padding: 10px 13px;
  border-radius: 999px;
  transition: 180ms ease;
  font-weight: 700;
  font-size: 0.92rem;
}
.nav-links a:hover, .nav-links a:focus-visible { color: var(--text); background: rgba(255, 255, 255, 0.07); outline: none; }
.nav-toggle { display: none; background: transparent; border: 0; padding: 10px; }
.nav-toggle span:not(.sr-only) { display: block; width: 24px; height: 2px; margin: 5px 0; background: var(--text); border-radius: 2px; }

.section { max-width: var(--max); margin: 0 auto; padding: 76px 22px; position: relative; }
.hero { padding-top: 86px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(340px, .78fr); gap: 36px; align-items: center; }
.eyebrow {
  margin: 0 0 10px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .74rem;
  font-weight: 900;
}
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(3.3rem, 9vw, 7rem); line-height: .88; letter-spacing: -.08em; margin-bottom: 18px; }
h2 { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1; letter-spacing: -.06em; margin-bottom: 14px; }
h3 { letter-spacing: -.035em; }
.tagline { color: var(--gold-3); font-weight: 900; font-size: clamp(1.3rem, 3vw, 2rem); margin-bottom: 14px; }
.hero-description, .section-heading p { color: var(--muted); max-width: 760px; font-size: 1.05rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 22px; }
.button {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 12px 18px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text);
  font-weight: 900;
  background: rgba(255, 255, 255, 0.07);
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}
.button:hover, .button:focus-visible { transform: translateY(-2px); outline: none; border-color: rgba(255, 215, 90, .34); }
.button.primary { color: #111; background: linear-gradient(135deg, var(--gold-3), var(--gold-2)); box-shadow: 0 16px 48px rgba(255, 185, 46, .24); }
.button.secondary { background: rgba(255, 215, 90, .09); border-color: rgba(255, 215, 90, .22); }
.button.ghost { background: transparent; border-color: var(--border-soft); }
.button.reset { background: rgba(255, 100, 125, .11); border-color: rgba(255, 100, 125, .22); }
.button.small { padding: 8px 12px; font-size: .83rem; }
.button[disabled] { opacity: .42; cursor: not-allowed; transform: none; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 12px; color: var(--muted); font-weight: 700; }
.data-pill { color: #111; background: linear-gradient(135deg, var(--gold-3), var(--gold-2)); padding: 5px 10px; border-radius: 999px; }

.radar-panel {
  position: relative;
  min-height: 480px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .025));
  box-shadow: var(--shadow);
  overflow: hidden;
  padding: 22px;
}
.radar-panel::after { content: ""; position: absolute; inset: -40%; background: radial-gradient(circle, rgba(255, 215, 90, .12), transparent 45%); animation: floatGlow 8s ease-in-out infinite alternate; pointer-events: none; }
.radar-screen {
  position: absolute;
  inset: 42px 42px 116px;
  border-radius: 50%;
  border: 1px solid rgba(255, 215, 90, .22);
  background: radial-gradient(circle, rgba(255, 215, 90, .18), rgba(255, 215, 90, .06) 28%, transparent 30%), repeating-radial-gradient(circle, transparent 0 42px, rgba(255, 215, 90, .13) 43px 44px);
}
.radar-sweep { position: absolute; inset: 0; border-radius: inherit; background: conic-gradient(from 0deg, rgba(255, 215, 90, .55), transparent 28%, transparent); animation: sweep 4s linear infinite; }
.dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 22px var(--green); }
.dot-one { top: 34%; left: 64%; } .dot-two { top: 57%; left: 40%; background: var(--gold); box-shadow: 0 0 22px var(--gold); } .dot-three { top: 68%; left: 72%; background: var(--pink); box-shadow: 0 0 22px var(--pink); }
.radar-metric { position: absolute; z-index: 2; width: 205px; padding: 18px; border: 1px solid var(--border-soft); border-radius: 20px; background: rgba(9, 12, 22, .72); backdrop-filter: blur(16px); }
.radar-metric small { display: block; color: var(--muted); font-weight: 800; margin-bottom: 6px; }
.radar-metric strong { font-size: 1.75rem; letter-spacing: -.05em; }
.radar-metric span { display: block; color: var(--muted); font-size: .88rem; }
.top-mover { left: 24px; bottom: 32px; } .volume-leader { right: 24px; bottom: 72px; } .watch-count { right: 52px; top: 34px; }

.section-heading { margin-bottom: 26px; }
.compact { margin-bottom: 16px; }
.status-panel, .preview-panel {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}
.status-panel { padding: 16px 18px; display: flex; gap: 12px; align-items: center; color: var(--muted); font-weight: 800; margin-bottom: 18px; }
.status-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 20px var(--gold); }
.status-panel.success .status-dot { background: var(--green); box-shadow: 0 0 20px var(--green); }
.status-panel.error .status-dot { background: var(--red); box-shadow: 0 0 20px var(--red); }
.stats-grid, .chart-grid, .plan-grid, .health-grid { display: grid; gap: 16px; }
.stats-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.stat-card, .chart-card, .plan-grid article, .health-card, .preview-panel, .preview-card, .watch-card, .stock-card {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .028));
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}
.stat-card { padding: 18px; min-height: 138px; }
.stat-card span { display: block; color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 900; }
.stat-card strong { display: block; margin: 14px 0 8px; font-size: clamp(1.35rem, 2vw, 2rem); letter-spacing: -.05em; }
.stat-card small { color: var(--muted); }
.loading span, .loading strong, .loading small { display: block; height: 15px; width: 80%; border-radius: 999px; background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.14), rgba(255,255,255,.06)); background-size: 240% 100%; animation: shimmer 1.4s linear infinite; color: transparent; }
.loading strong { height: 28px; width: 58%; }
.loading small { width: 70%; }
.chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chart-card { padding: 20px; min-height: 360px; }
.card-title-row { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 14px; }
.card-title-row h3 { margin: 0; }
.chart-chip { color: #111; background: var(--gold); border-radius: 999px; padding: 6px 10px; font-weight: 900; }
.chart { min-height: 255px; }
.chart svg { display: block; width: 100%; height: 100%; min-height: 255px; overflow: visible; }
.chart-label { fill: var(--muted); font-size: 12px; font-weight: 800; }
.chart-value { fill: var(--text); font-size: 12px; font-weight: 900; }


.health-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.health-card {
  padding: 18px;
  min-height: 132px;
  overflow: hidden;
}

.health-card span,
.preview-card small {
  display: block;
  color: var(--muted);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 900;
}

.health-card strong {
  display: block;
  max-width: 100%;
  margin: 12px 0 7px;
  font-size: clamp(1.2rem, 2vw, 1.75rem);
  letter-spacing: -.04em;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.35;
}

.health-card small {
  display: block;
  max-width: 100%;
  color: var(--muted);
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.35;
}

.health-card.pass { border-color: rgba(69, 224, 150, .28); box-shadow: 0 20px 65px rgba(69, 224, 150, .08); }
.health-card.warn { border-color: rgba(255, 215, 90, .32); box-shadow: 0 20px 65px rgba(255, 215, 90, .08); }
.preview-panel { padding: 20px; margin-top: 16px; }
.health-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.coverage-banner { margin: 14px 0; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--border-soft); color: var(--muted); font-weight: 900; background: rgba(255,255,255,.045); }
.coverage-banner.pass { border-color: rgba(69, 224, 150, .26); color: #c8ffe4; background: rgba(69, 224, 150, .08); }
.coverage-banner.warn { border-color: rgba(255, 215, 90, .28); color: var(--gold-3); background: rgba(255, 215, 90, .08); }
.preview-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.preview-card { padding: 14px; display: grid; gap: 6px; }
.preview-card strong { color: var(--gold); font-size: 1.1rem; letter-spacing: -.03em; }
.preview-card span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 800; }
.preview-card div { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.preview-card b { font-size: .95rem; }
.preview-card em { font-style: normal; font-weight: 900; }

.control-panel {
  display: grid;
  grid-template-columns: minmax(145px, 1fr) minmax(175px, 1.1fr) minmax(145px, .9fr) minmax(145px, .9fr) minmax(170px, 1fr) auto auto;
  gap: 14px;
  align-items: end;
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .045);
  margin-bottom: 16px;
}
label { display: grid; gap: 7px; color: var(--muted); font-weight: 900; font-size: .84rem; }
input, select {
  width: 100%;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  min-height: 48px;
  padding: 12px 12px;
  color: var(--text);
  background: rgba(255, 255, 255, .055);
  outline: none;
}
select { background-color: #171b27; color: var(--text); }
select option { background: #fff7d6; color: #111827; font-weight: 800; }
select option:checked { background: var(--gold); color: #111; }
input:focus, select:focus { border-color: rgba(255, 215, 90, .45); box-shadow: 0 0 0 4px rgba(255, 215, 90, .09); }
.checkbox-label { grid-template-columns: auto 1fr; align-items: center; align-self: end; min-width: 158px; min-height: 48px; padding: 0 12px; border: 1px solid var(--border-soft); border-radius: 14px; background: rgba(255,255,255,.045); }
.checkbox-label input { width: 18px; height: 18px; min-height: 18px; accent-color: var(--gold); }
.screener-toolbar { display: flex; justify-content: space-between; gap: 14px; align-items: center; margin: 18px 0 12px; }
.screener-toolbar div:first-child { display: grid; gap: 4px; }
.screener-toolbar span { color: var(--muted); }
.toolbar-actions { display: flex; align-items: center; gap: 10px; color: var(--muted); font-weight: 900; }
.stock-grid-header, .stock-card {
  display: grid;
  grid-template-columns: 1fr 2fr 1.15fr 1fr .8fr .8fr .8fr 1fr 1.35fr;
  gap: 10px;
  align-items: center;
}
.stock-grid-header {
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .72rem;
  font-weight: 900;
  padding: 0 18px 9px;
}
.stock-grid { display: grid; gap: 10px; }
.stock-card { padding: 14px 16px; transition: 160ms ease; }
.stock-card:hover { transform: translateY(-2px); border-color: rgba(255, 215, 90, .24); background: rgba(255, 255, 255, .065); }
.stock-symbol { display: flex; align-items: center; gap: 10px; min-width: 0; }
.symbol-badge { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 215, 90, .12); border: 1px solid rgba(255, 215, 90, .24); color: var(--gold); font-weight: 900; }
.symbol-meta { display: grid; min-width: 0; }
.symbol-meta strong, .company-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.symbol-meta small, .theme-text, .muted { color: var(--muted); }
.sector-pill { justify-self: start; border: 1px solid var(--border-soft); background: rgba(255,255,255,.055); padding: 6px 9px; border-radius: 999px; color: var(--muted); font-weight: 800; font-size: .78rem; }
.price { font-weight: 900; }
.change { font-weight: 900; }
.positive { color: var(--green); } .negative { color: var(--red); } .neutral { color: var(--muted); }
.row-actions { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.icon-button { border: 1px solid var(--border-soft); background: rgba(255,255,255,.055); color: var(--text); border-radius: 12px; min-width: 42px; height: 38px; font-weight: 900; }
.icon-button.active { background: rgba(255, 215, 90, .16); border-color: rgba(255, 215, 90, .38); color: var(--gold); }
.research-link { text-decoration: none; border: 1px solid var(--border-soft); border-radius: 12px; padding: 9px 11px; color: var(--gold); font-weight: 900; }
.empty-state { text-align: center; padding: 28px; border: 1px dashed var(--border); border-radius: var(--radius-lg); color: var(--muted); }
.empty-state strong { display: block; color: var(--text); margin-bottom: 5px; }
.watchlist-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.watch-card { padding: 18px; display: grid; gap: 12px; }
.watch-card-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.watch-card strong { font-size: 1.4rem; }
.watch-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.watch-metrics span { display: grid; gap: 2px; border: 1px solid var(--border-soft); border-radius: 14px; padding: 10px; color: var(--muted); font-size: .78rem; }
.watch-metrics b { color: var(--text); font-size: .95rem; }
.plan-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.plan-grid article { padding: 22px; }
.plan-grid span { color: var(--gold); font-weight: 900; }
.plan-grid h3 { margin: 10px 0; }
.plan-grid p { margin-bottom: 0; color: var(--muted); }
.footer { padding: 34px 22px 46px; text-align: center; color: var(--muted); border-top: 1px solid var(--border-soft); }
.chart-tooltip { position: fixed; z-index: 30; pointer-events: none; padding: 10px 12px; border-radius: 12px; background: rgba(5, 7, 12, .92); border: 1px solid var(--border-soft); box-shadow: var(--shadow); color: var(--text); font-weight: 800; }
.reveal { animation: enter .7s ease both; }

@keyframes enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shimmer { to { background-position: -240% 0; } }
@keyframes sweep { to { transform: rotate(360deg); } }
@keyframes floatGlow { to { transform: translate3d(8%, -5%, 0) scale(1.05); } }

@media (max-width: 1120px) {
  .stats-grid, .health-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .preview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .control-panel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stock-grid-header { display: none; }
  .stock-card { grid-template-columns: 1.2fr 1.6fr 1fr 1fr; gap: 12px; }
  .stock-card > * { min-width: 0; }
  .stock-card .sector-pill, .stock-card .theme-text { display: none; }
  .row-actions { justify-content: flex-start; }
  .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .health-grid, .preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-title-row { flex-direction: column; }
  .health-actions { width: 100%; justify-content: stretch; }
  .health-actions .button { flex: 1; }
  .nav-toggle { display: block; }
  .nav-links { position: absolute; left: 16px; right: 16px; top: calc(var(--header) - 4px); display: none; flex-direction: column; align-items: stretch; background: rgba(8,10,16,.96); border: 1px solid var(--border-soft); border-radius: 18px; padding: 12px; box-shadow: var(--shadow); }
  .nav-links.open { display: flex; }
  .hero-grid { grid-template-columns: 1fr; }
  .radar-panel { min-height: 380px; }
  .chart-grid, .watchlist-grid { grid-template-columns: 1fr; }
  .stock-card { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .screener-toolbar { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 620px) {
  .section { padding: 54px 16px; }
  .hero { padding-top: 56px; }
  h1 { font-size: clamp(3rem, 18vw, 4.7rem); }
  .hero-actions { flex-direction: column; }
  .button { width: 100%; }
  .stats-grid, .control-panel, .plan-grid, .health-grid, .preview-grid { grid-template-columns: 1fr; }
  .stock-card { grid-template-columns: 1fr; align-items: start; }
  .stock-symbol { align-items: flex-start; }
  .row-actions { justify-content: stretch; }
  .row-actions > * { flex: 1; text-align: center; }
  .toolbar-actions { width: 100%; justify-content: space-between; }
  .radar-panel { min-height: 330px; }
  .radar-screen { inset: 28px 28px 112px; }
  .radar-metric { position: relative; width: auto; left: auto; right: auto; top: auto; bottom: auto; margin-bottom: 10px; }
  .radar-panel { display: grid; align-content: end; }
  .top-mover, .volume-leader, .watch-count { position: relative; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition: none !important; }
}

/* --------------------------------------------------------------------------
   Robinhood-inspired tracking additions for the Radar Studio
   -------------------------------------------------------------------------- */
.quote-section { padding-top: 40px; }
.quote-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, .9fr);
  gap: 18px;
  align-items: stretch;
}
.quote-card,
.tracker-panel,
.tracker-card,
.feed-row,
.quote-stat-grid div {
  border: 1px solid var(--border-soft);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
  box-shadow: var(--shadow);
  border-radius: var(--radius-lg);
}
.quote-card,
.tracker-panel { padding: 22px; }
.quote-topline {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 14px;
}
.quote-topline h3 {
  margin: 0;
  font-size: clamp(2.2rem, 6vw, 4.8rem);
  letter-spacing: -.08em;
  line-height: .9;
}
.quote-price-block {
  display: grid;
  gap: 6px;
  text-align: right;
  justify-items: end;
}
.quote-price-block strong {
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  letter-spacing: -.05em;
}
.quote-price-block span {
  font-weight: 900;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 7px 11px;
  background: rgba(255,255,255,.055);
}
.range-tabs {
  display: inline-flex;
  padding: 5px;
  gap: 4px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  margin: 6px 0 14px;
}
.range-tabs button {
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  font-weight: 900;
  min-width: 54px;
  padding: 8px 13px;
}
.range-tabs button.active,
.range-tabs button:hover,
.range-tabs button:focus-visible {
  color: #101113;
  background: linear-gradient(135deg, var(--gold-3), var(--gold-2));
  outline: none;
}
.detail-chart {
  min-height: 310px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.075);
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    rgba(0,0,0,.18);
  background-size: 48px 48px;
  overflow: hidden;
  margin-bottom: 14px;
}
.detail-svg { width: 100%; height: 100%; min-height: 300px; color: var(--green); }
.detail-svg.down { color: var(--red); }
.detail-svg circle { fill: currentColor; stroke: #08100c; stroke-width: 2; cursor: crosshair; }
.detail-line { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 14px currentColor); }
.detail-area { fill: url(#detailFill); color: inherit; }
.quote-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.quote-stat-grid div {
  padding: 13px;
  box-shadow: none;
}
.quote-stat-grid span,
.tracker-card span {
  display: block;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .72rem;
  font-weight: 900;
}
.quote-stat-grid strong,
.tracker-card strong {
  display: block;
  margin-top: 5px;
  font-size: 1.05rem;
  letter-spacing: -.03em;
}
.quote-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.quote-actions .button.active {
  background: rgba(255,215,90,.18);
  border-color: rgba(255,215,90,.4);
  color: var(--gold);
}
.tracker-panel { display: grid; align-content: start; gap: 14px; }
.tracker-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tracker-card { padding: 15px; min-height: 118px; box-shadow: none; }
.tracker-card small { color: var(--muted); }
.mover-feed { display: grid; gap: 8px; }
.feed-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  text-align: left;
  color: var(--text);
  padding: 12px 14px;
  transition: 160ms ease;
  box-shadow: none;
}
.feed-row:hover,
.feed-row.active {
  transform: translateY(-1px);
  border-color: rgba(255,215,90,.35);
  background: rgba(255,215,90,.08);
}
.feed-row span { display: grid; min-width: 0; }
.feed-row small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-row em { font-style: normal; font-weight: 900; }
.mini-sparkline,
.watch-spark {
  display: block;
  width: 92px;
  height: 34px;
}
.spark-svg { width: 100%; height: 100%; overflow: visible; }
.spark-svg polyline {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.spark-svg.positive-line { color: var(--green); }
.spark-svg.negative-line { color: var(--red); }
.stock-card.selected {
  border-color: rgba(255, 215, 90, .42);
  box-shadow: 0 16px 54px rgba(255, 185, 46, .1);
}
.stock-card { cursor: pointer; }
.stock-grid-header, .stock-card {
  grid-template-columns: 1fr 1.8fr 1.1fr .9fr .85fr .7fr .7fr .7fr .9fr 1.25fr;
}
.watch-spark { width: 100%; height: 44px; opacity: .95; }

@media (max-width: 1120px) {
  .quote-grid { grid-template-columns: 1fr; }
  .stock-grid-header { display: none; }
  .stock-card { grid-template-columns: 1.2fr 1.5fr 1fr 1fr; }
  .mini-sparkline { width: 100%; }
}
@media (max-width: 860px) {
  .quote-topline { flex-direction: column; }
  .quote-price-block { text-align: left; justify-items: start; }
  .quote-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .quote-card, .tracker-panel { padding: 16px; }
  .tracker-grid, .quote-stat-grid { grid-template-columns: 1fr; }
  .quote-actions .button { width: 100%; }
  .range-tabs { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); }
  .range-tabs button { width: 100%; }
  .detail-chart { min-height: 260px; }
  .detail-svg { min-height: 260px; }
}

/* --------------------------------------------------------------------------
   CSS-only mobile polish
   Keeps the developer/data-pipeline experience intact while making the app
   easier to scan on phones.
   -------------------------------------------------------------------------- */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

code {
  color: var(--gold-3);
  overflow-wrap: anywhere;
}

@media (max-width: 860px) {
  :root {
    --header: 66px;
    --radius-xl: 24px;
    --radius-lg: 18px;
  }

  .nav {
    padding-inline: 16px;
  }

  .brand-mark {
    width: 40px;
    height: 40px;
    border-radius: 14px;
  }

  .brand-text strong {
    font-size: 1rem;
  }

  .brand-text small {
    font-size: .72rem;
  }

  .nav-links {
    max-height: calc(100vh - var(--header) - 20px);
    overflow-y: auto;
  }

  .nav-links a {
    padding: 13px 14px;
  }

  .section-heading p,
  .hero-description {
    font-size: 1rem;
  }

  .chart-card {
    min-height: 320px;
  }

  .chart,
  .chart svg {
    min-height: 230px;
  }
}

@media (max-width: 620px) {
  html {
    scroll-padding-top: 76px;
  }

  body {
    background:
      radial-gradient(circle at 15% 0%, rgba(255, 215, 90, 0.13), transparent 26rem),
      linear-gradient(135deg, var(--bg), #090b12 58%, #0b0b08);
  }

  body::before {
    background-size: 44px 44px;
    opacity: .7;
  }

  .site-header {
    background: rgba(6, 7, 11, 0.9);
  }

  .section {
    padding: 42px 14px;
  }

  .hero {
    padding-top: 42px;
  }

  .hero-grid {
    gap: 18px;
  }

  .eyebrow {
    margin-bottom: 8px;
    font-size: .68rem;
    letter-spacing: .12em;
  }

  h1 {
    max-width: 9ch;
    font-size: clamp(2.55rem, 15vw, 3.7rem);
    line-height: .92;
    letter-spacing: -.075em;
    margin-bottom: 14px;
  }

  h2 {
    font-size: clamp(1.75rem, 9vw, 2.45rem);
    line-height: 1.02;
  }

  .tagline {
    font-size: 1.14rem;
    line-height: 1.22;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 22px 0 16px;
  }

  .hero-actions .button.primary {
    grid-column: 1 / -1;
  }

  .button {
    min-height: 46px;
    padding: 11px 13px;
    font-size: .9rem;
  }

  .button.small {
    min-height: 42px;
  }

  .hero-meta {
    gap: 8px;
    font-size: .86rem;
  }

  .data-pill {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  /* The desktop radar animation is beautiful, but the metrics matter more on phones. */
  .radar-panel {
    min-height: auto;
    padding: 14px;
    display: grid;
    gap: 10px;
    align-content: stretch;
  }

  .radar-screen,
  .radar-panel::after {
    display: none;
  }

  .radar-metric {
    position: relative;
    width: auto;
    margin: 0;
    padding: 14px;
    border-radius: 16px;
    background: rgba(9, 12, 22, .84);
  }

  .radar-metric strong {
    font-size: 1.45rem;
  }

  .stats-grid,
  .health-grid,
  .preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .stat-card,
  .health-card,
  .preview-card {
    min-height: auto;
    padding: 14px;
    border-radius: 16px;
  }

  .stat-card span,
  .health-card span,
  .preview-card small,
  .quote-stat-grid span,
  .tracker-card span {
    font-size: .66rem;
    letter-spacing: .07em;
  }

  .stat-card strong,
  .health-card strong {
    margin: 9px 0 5px;
  }

  .status-panel,
  .coverage-banner {
    align-items: flex-start;
    padding: 13px 14px;
    border-radius: 16px;
    font-size: .88rem;
  }

  .preview-panel,
  .quote-card,
  .tracker-panel,
  .chart-card,
  .plan-grid article,
  .watch-card {
    padding: 15px;
    border-radius: 18px;
  }

  .card-title-row {
    gap: 10px;
    margin-bottom: 12px;
  }

  .health-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .health-actions .button {
    width: 100%;
  }

  .quote-section {
    padding-top: 28px;
  }

  .quote-topline {
    gap: 10px;
  }

  .quote-topline h3 {
    font-size: clamp(2.1rem, 15vw, 3.6rem);
  }

  .quote-price-block strong {
    font-size: 1.65rem;
  }

  .range-tabs {
    border-radius: 18px;
  }

  .detail-chart {
    min-height: 220px;
    border-radius: 18px;
    background-size: 34px 34px;
  }

  .detail-svg {
    min-height: 220px;
  }

  .tracker-grid,
  .quote-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .tracker-card,
  .quote-stat-grid div {
    min-height: auto;
    padding: 12px;
    border-radius: 15px;
  }

  .feed-row {
    padding: 12px;
    border-radius: 15px;
  }

  .chart-grid {
    gap: 12px;
  }

  .chart-card {
    min-height: 280px;
  }

  .chart,
  .chart svg {
    min-height: 205px;
  }

  .control-panel {
    gap: 10px;
    padding: 12px;
    border-radius: 18px;
  }

  label {
    font-size: .78rem;
  }

  input,
  select,
  .checkbox-label {
    min-height: 45px;
    border-radius: 13px;
  }

  .screener-toolbar {
    gap: 10px;
    margin-top: 14px;
  }

  .toolbar-actions {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
  }

  .toolbar-actions .button {
    width: 100%;
  }

  /* Mobile stock rows become labeled mini-cards, so the table still reads clearly. */
  .stock-grid {
    gap: 12px;
  }

  .stock-card {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "symbol symbol"
      "company company"
      "sector sector"
      "price trend"
      "d1 d1w"
      "d1m volume"
      "actions actions";
    gap: 9px;
    padding: 13px;
    border-radius: 18px;
  }

  .stock-card .stock-symbol {
    grid-area: symbol;
    align-items: center;
  }

  .symbol-badge {
    width: 40px;
    height: 40px;
    border-radius: 13px;
  }

  .stock-card .company-name {
    grid-area: company;
    white-space: normal;
    color: var(--text);
    font-weight: 800;
    line-height: 1.25;
  }

  .stock-card .sector-pill {
    grid-area: sector;
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .stock-card .price {
    grid-area: price;
  }

  .stock-card .mini-sparkline {
    grid-area: trend;
    width: 100%;
    min-height: 54px;
  }

  .stock-card .change-1d {
    grid-area: d1;
  }

  .stock-card .change-1w {
    grid-area: d1w;
  }

  .stock-card .change-1m {
    grid-area: d1m;
  }

  .stock-card .volume-cell {
    grid-area: volume;
  }

  .stock-card .row-actions {
    grid-area: actions;
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 9px;
    justify-content: stretch;
  }

  .stock-card .price,
  .stock-card .change,
  .stock-card .volume-cell,
  .stock-card .mini-sparkline {
    display: grid;
    gap: 4px;
    min-height: 54px;
    padding: 10px;
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    background: rgba(255,255,255,.045);
    align-content: center;
    font-weight: 900;
  }

  .stock-card .price::before,
  .stock-card .change::before,
  .stock-card .volume-cell::before,
  .stock-card .mini-sparkline::before {
    color: var(--muted);
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 900;
  }

  .stock-card .price::before { content: "Price"; }
  .stock-card .mini-sparkline::before { content: "Trend"; }
  .stock-card .change-1d::before { content: "1D"; }
  .stock-card .change-1w::before { content: "1W"; }
  .stock-card .change-1m::before { content: "1M"; }
  .stock-card .volume-cell::before { content: "Volume"; }

  .mini-sparkline .spark-svg {
    min-height: 30px;
  }

  .row-actions .icon-button,
  .row-actions .research-link {
    min-height: 44px;
  }

  .research-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .watchlist-grid,
  .plan-grid {
    gap: 12px;
  }

  .watch-card-top {
    align-items: center;
  }

  .watch-metrics {
    gap: 8px;
  }

  .watch-metrics span {
    padding: 9px;
    border-radius: 13px;
  }

  .footer {
    padding: 28px 16px 34px;
    font-size: .86rem;
  }
}

@media (max-width: 390px) {
  .stats-grid,
  .health-grid,
  .preview-grid,
  .tracker-grid,
  .quote-stat-grid {
    grid-template-columns: 1fr;
  }

  .hero-actions,
  .health-actions,
  .toolbar-actions {
    grid-template-columns: 1fr;
  }

  .stock-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "symbol"
      "company"
      "sector"
      "price"
      "trend"
      "d1"
      "d1w"
      "d1m"
      "volume"
      "actions";
  }
}

/* --------------------------------------------------------------------------
   Market view tabs: clean default vs full raw universe
   -------------------------------------------------------------------------- */
.market-view-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 14px;
}

.market-view-tabs button {
  display: grid;
  gap: 5px;
  min-height: 76px;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  color: var(--text);
  background: rgba(255, 255, 255, .045);
  text-align: left;
  box-shadow: none;
  transition: 160ms ease;
}

.market-view-tabs button span {
  color: var(--text);
  font-size: .92rem;
  font-weight: 900;
  line-height: 1.15;
}

.market-view-tabs button small {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.25;
}

.market-view-tabs button:hover,
.market-view-tabs button:focus-visible,
.market-view-tabs button.active {
  transform: translateY(-2px);
  outline: none;
  border-color: rgba(255, 215, 90, .38);
  background: linear-gradient(145deg, rgba(255, 215, 90, .15), rgba(255, 255, 255, .045));
  box-shadow: 0 18px 58px rgba(255, 185, 46, .08);
}

.market-view-tabs button.active small {
  color: var(--gold-3);
}

.view-rule-note {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 215, 90, .2);
  border-radius: 16px;
  background: rgba(255, 215, 90, .07);
  color: var(--muted);
  font-size: .9rem;
}

.view-rule-note strong {
  color: var(--gold);
  white-space: nowrap;
}

.sector-pill.common {
  border-color: rgba(69, 224, 150, .22);
  background: rgba(69, 224, 150, .07);
}

.sector-pill.speculative {
  border-color: rgba(255, 215, 90, .28);
  background: rgba(255, 215, 90, .08);
  color: var(--gold-3);
}

@media (max-width: 1120px) {
  .market-view-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .market-view-tabs {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .market-view-tabs button {
    min-height: 0;
    padding: 12px;
  }

  .view-rule-note {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
}

/* --------------------------------------------------------------------------
   Visual refresh: calmer dashboard, stronger mobile cards, clearer charts
   -------------------------------------------------------------------------- */
:root {
  --bg: #070a12;
  --bg-soft: #0d1322;
  --panel: rgba(14, 19, 31, 0.78);
  --panel-strong: rgba(17, 24, 39, 0.94);
  --border: rgba(255, 213, 92, 0.14);
  --border-soft: rgba(226, 232, 240, 0.1);
  --text: #f7f3df;
  --muted: #a7b0c3;
  --muted-2: #748096;
  --green: #5ee0a0;
  --red: #ff6f87;
  --shadow: 0 18px 54px rgba(0, 0, 0, 0.34);
  --shadow-soft: 0 10px 34px rgba(0, 0, 0, 0.24);
}

body {
  background:
    radial-gradient(circle at 12% -6%, rgba(255, 215, 90, 0.11), transparent 28rem),
    radial-gradient(circle at 92% 2%, rgba(98, 126, 234, 0.1), transparent 30rem),
    linear-gradient(135deg, #06070b, #0b0f19 58%, #090b10);
}

body::before {
  opacity: .42;
  background-size: 82px 82px;
}

.section {
  padding-block: 60px;
}

.hero {
  padding-top: 58px;
  padding-bottom: 44px;
}

.hero-grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(330px, .82fr);
  gap: 28px;
}

h1 {
  font-size: clamp(3rem, 7vw, 5.6rem);
}

.hero-description,
.section-heading p {
  max-width: 820px;
}

.nav-links {
  padding: 6px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, .035);
}

.nav-links a {
  padding-inline: 16px;
}

.radar-panel,
.status-panel,
.preview-panel,
.stat-card,
.chart-card,
.plan-grid article,
.health-card,
.preview-card,
.watch-card,
.stock-card,
.quote-card,
.tracker-panel,
.tracker-card,
.quote-stat-grid div,
.feed-row {
  background: linear-gradient(145deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .024));
  border-color: var(--border-soft);
  box-shadow: var(--shadow-soft);
}

.radar-panel {
  min-height: 380px;
  box-shadow: var(--shadow);
}

.radar-screen {
  inset: 34px 42px 106px;
  opacity: .74;
}

.radar-sweep,
.radar-panel::after {
  opacity: .72;
}

.radar-metric {
  background: rgba(11, 16, 28, .82);
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
}

.stats-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stat-card,
.metric-card {
  min-height: 148px;
  padding: 18px;
}

.stat-card span,
.health-top span,
.metric-cell::before {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .72rem;
  font-weight: 900;
}

.stat-card strong {
  font-size: clamp(1.35rem, 2vw, 1.95rem);
  line-height: 1.12;
}

.stat-card.pass,
.metric-card.pass {
  border-color: rgba(94, 224, 160, .24);
}

.stat-card.warn,
.metric-card.warn {
  border-color: rgba(255, 215, 90, .28);
}

.metric-card.positive strong,
.positive {
  color: var(--green);
}

.metric-card.negative strong,
.negative {
  color: var(--red);
}

.health-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.health-card {
  min-height: 245px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.health-top {
  display: flex;
  align-items: center;
  gap: 9px;
}

.health-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 0 16px rgba(255, 215, 90, .4);
}

.health-card.pass .health-dot {
  background: var(--green);
  box-shadow: 0 0 16px rgba(94, 224, 160, .4);
}

.health-card.warn .health-dot {
  background: var(--gold);
}

.health-card strong {
  margin: 4px 0 0;
  font-size: clamp(1.1rem, 1.45vw, 1.45rem);
}

.health-card p {
  margin: 0;
  color: var(--text);
  font-weight: 650;
  line-height: 1.42;
}

.health-card small {
  margin-top: 0;
}

.health-card .technical-detail {
  margin-top: auto;
  color: var(--muted-2);
  font-size: .76rem;
}

.coverage-banner {
  line-height: 1.45;
}

.quote-grid {
  grid-template-columns: minmax(0, 1.42fr) minmax(320px, .72fr);
  align-items: start;
}

.quote-card,
.tracker-panel {
  border-radius: 26px;
}

.quote-topline h3 {
  letter-spacing: -.065em;
}

.detail-chart {
  min-height: 360px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px),
    rgba(5, 8, 15, .66);
  background-size: 56px 56px;
}

.detail-chart-note {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding: 4px 2px 2px;
}

.detail-chart-note span {
  color: var(--text);
  font-weight: 900;
}

.detail-chart-note small {
  max-width: 540px;
  color: var(--muted);
  text-align: right;
  font-weight: 750;
}

.detail-svg {
  min-height: 292px;
  color: var(--green);
}

.detail-line {
  stroke-width: 3.5;
  filter: none;
}

.detail-svg circle {
  stroke: #07110d;
  stroke-width: 2;
}

.y-tick line,
.bar-gridline {
  stroke: rgba(226, 232, 240, .09);
  stroke-width: 1;
}

.y-tick text,
.x-label {
  fill: var(--muted-2);
  font-size: 11px;
  font-weight: 800;
}

.zero-line {
  stroke: rgba(255, 255, 255, .18);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}

.chart-bar.positive-bar {
  fill: rgba(94, 224, 160, .78);
}

.chart-bar.negative-bar {
  fill: rgba(255, 111, 135, .78);
}

.chart-label,
.chart-value {
  fill: var(--muted);
}

.chart-value {
  fill: var(--text);
}

.market-view-tabs {
  padding: 8px;
  border: 1px solid var(--border-soft);
  border-radius: 24px;
  background: rgba(255,255,255,.028);
}

.market-view-tabs button {
  border-radius: 18px;
  box-shadow: none;
}

.control-panel,
.screener-toolbar,
.view-rule-note {
  box-shadow: none;
}

.stock-card {
  align-items: center;
  padding: 13px 14px;
}

.metric-cell {
  font-weight: 900;
}

.metric-cell[data-label]::before {
  content: none;
}

.stock-card .volume-cell {
  color: var(--text);
}

.stock-card .row-actions {
  align-items: center;
}

.preview-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.preview-card {
  min-height: 148px;
  cursor: pointer;
}

.preview-card:hover,
.stock-card:hover,
.watch-card:hover {
  border-color: rgba(255, 215, 90, .26);
  transform: translateY(-1px);
}

.stock-card,
.preview-card,
.watch-card {
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

@media (max-width: 1120px) {
  .stats-grid,
  .health-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .preview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .nav-links {
    border-radius: 22px;
    padding: 8px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .radar-panel {
    min-height: auto;
  }

  .quote-grid {
    grid-template-columns: 1fr;
  }

  .detail-chart-note {
    display: grid;
  }

  .detail-chart-note small {
    text-align: left;
  }
}

@media (max-width: 720px) {
  .market-view-tabs {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    gap: 8px;
    padding: 8px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .market-view-tabs button {
    min-width: 178px;
    flex: 0 0 178px;
    scroll-snap-align: start;
  }
}

@media (max-width: 620px) {
  .section {
    padding-block: 38px;
  }

  h1 {
    max-width: none;
    font-size: clamp(2.35rem, 13vw, 3.4rem);
  }

  .hero-actions {
    grid-template-columns: 1fr;
  }

  .stats-grid,
  .health-grid,
  .preview-grid {
    grid-template-columns: 1fr;
  }

  .stat-card,
  .health-card,
  .preview-card {
    padding: 15px;
  }

  .health-card {
    min-height: auto;
  }

  .preview-grid {
    gap: 10px;
  }

  .detail-chart {
    min-height: 298px;
    padding: 10px;
  }

  .detail-svg {
    min-height: 238px;
  }

  .stock-card {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "symbol symbol"
      "company company"
      "sector sector"
      "price trend"
      "d1 d1w"
      "d1m volume"
      "actions actions";
    gap: 10px;
    padding: 14px;
  }

  .stock-card .stock-symbol { grid-area: symbol; }
  .stock-card .company-name { grid-area: company; }
  .stock-card .sector-pill { grid-area: sector; }
  .stock-card .price { grid-area: price; }
  .stock-card .mini-sparkline { grid-area: trend; }
  .stock-card .change-1d { grid-area: d1; }
  .stock-card .change-1w { grid-area: d1w; }
  .stock-card .change-1m { grid-area: d1m; }
  .stock-card .volume-cell { grid-area: volume; }
  .stock-card .row-actions { grid-area: actions; }

  .stock-card .metric-cell {
    display: grid;
    gap: 4px;
    min-height: 56px;
    padding: 10px;
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    background: rgba(255,255,255,.045);
    align-content: center;
  }

  .metric-cell[data-label]::before {
    content: attr(data-label);
  }

  .stock-card .mini-sparkline {
    width: 100%;
  }

  .stock-card .row-actions {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 9px;
  }

  .health-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 390px) {
  .stock-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "symbol"
      "company"
      "sector"
      "price"
      "trend"
      "d1"
      "d1w"
      "d1m"
      "volume"
      "actions";
  }
}

/* --------------------------------------------------------------------------
   Visual regression fixes: full section navigation, mobile visibility, gold charts
   -------------------------------------------------------------------------- */
:root {
  --chart-positive: #ffd75a;
  --chart-positive-strong: #ffbf3f;
  --chart-positive-soft: rgba(255, 215, 90, 0.86);
  --chart-negative-soft: rgba(255, 111, 135, 0.82);
}

.site-header {
  z-index: 2000;
}

.nav {
  gap: 12px;
}

.nav-links {
  max-width: min(900px, calc(100vw - 190px));
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.nav-links::-webkit-scrollbar,
.market-view-tabs::-webkit-scrollbar {
  display: none;
}

.nav-links a {
  white-space: nowrap;
}

/* Keep the chart language yellow/gold. Green is reserved for text-only gain/loss states. */
.chart-bar.positive-bar {
  fill: var(--chart-positive-soft);
}

.chart-bar.negative-bar {
  fill: var(--chart-negative-soft);
}

.detail-svg {
  color: var(--chart-positive);
}

.detail-svg.down {
  color: var(--red);
}

.spark-svg.positive-line {
  color: var(--chart-positive);
}

.spark-svg.negative-line {
  color: var(--red);
}

.bar-gridline {
  stroke: rgba(255, 215, 90, 0.1);
}

.zero-line {
  stroke: rgba(255, 215, 90, 0.3);
}

@media (max-width: 1080px) {
  .nav-toggle {
    display: block;
    position: relative;
    z-index: 2002;
  }

  .nav-links {
    position: fixed !important;
    left: 14px !important;
    right: 14px !important;
    top: calc(var(--header) + 8px) !important;
    display: none !important;
    max-width: none;
    max-height: calc(100dvh - var(--header) - 22px);
    overflow-y: auto;
    overflow-x: hidden;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px;
    border-radius: 22px;
    background: rgba(7, 10, 18, 0.98);
    border: 1px solid rgba(255, 215, 90, 0.2);
    box-shadow: 0 24px 90px rgba(0, 0, 0, 0.52);
    backdrop-filter: blur(22px);
    z-index: 2001;
  }

  .nav-links.open {
    display: grid !important;
  }

  .nav-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    padding: 12px 14px;
    border-radius: 15px;
    color: var(--text);
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid transparent;
  }

  .nav-links a:hover,
  .nav-links a:focus-visible {
    background: rgba(255, 215, 90, 0.11);
    border-color: rgba(255, 215, 90, 0.28);
  }
}

@media (min-width: 1081px) {
  .nav-toggle {
    display: none !important;
  }

  .nav-links {
    display: flex !important;
  }
}

@media (max-width: 720px) {
  .market-view-tabs {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 8px;
    padding: 8px;
    margin-inline: -2px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .market-view-tabs button {
    flex: 0 0 min(76vw, 242px);
    min-width: min(76vw, 242px);
    min-height: 68px;
    scroll-snap-align: start;
  }

  .range-tabs {
    display: flex;
    width: 100%;
  }

  .range-tabs button {
    flex: 1;
  }
}

@media (max-width: 620px) {
  .hero {
    padding-top: 30px;
  }

  h1 {
    max-width: 12ch;
    font-size: clamp(2.25rem, 11.5vw, 3.25rem);
    line-height: 0.96;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .hero-actions .button.primary {
    grid-column: auto;
  }

  .section-heading {
    margin-bottom: 18px;
  }

  .section-heading p {
    font-size: 0.95rem;
  }

  .chart-card {
    overflow: hidden;
  }

  .chart svg {
    min-width: 0;
  }
}

/* --------------------------------------------------------------------------
   Visual contrast patch: sector donut + hero radar readability
   -------------------------------------------------------------------------- */

/* Make the Sector Distribution card easier to read without changing data. */
#sectorChart {
  min-height: 300px;
}

#sectorChart svg {
  min-height: 300px;
}

#sectorChart svg path {
  stroke: rgba(7, 10, 18, 0.92);
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.22));
}

/* Override the inline sector fills so slices are visually distinct. */
#sectorChart svg path:nth-of-type(1) { fill: #ffd75a !important; }
#sectorChart svg path:nth-of-type(2) { fill: #5cc8ff !important; }
#sectorChart svg path:nth-of-type(3) { fill: #b78cff !important; }
#sectorChart svg path:nth-of-type(4) { fill: #ff8a65 !important; }
#sectorChart svg path:nth-of-type(5) { fill: #67e8a5 !important; }
#sectorChart svg path:nth-of-type(6) { fill: #f472b6 !important; }
#sectorChart svg path:nth-of-type(7) { fill: #a3e635 !important; }
#sectorChart svg path:nth-of-type(8) { fill: #fbbf24 !important; }
#sectorChart svg path:nth-of-type(9) { fill: #60a5fa !important; }
#sectorChart svg path:nth-of-type(10) { fill: #fb7185 !important; }

#sectorChart svg circle:first-of-type {
  fill: rgba(255, 255, 255, 0.045);
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 1;
}

#sectorChart svg circle:nth-of-type(2) {
  fill: #0b1020;
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 1.5;
}

#sectorChart .chart-value {
  fill: #fff8d8;
  font-size: 14px;
  font-weight: 950;
}

#sectorChart .chart-label {
  fill: #c5cedf;
  font-size: 12px;
  font-weight: 850;
}

/* Calm the hero radar so the sweep does not overpower the metric cards. */
.radar-panel {
  background:
    radial-gradient(circle at 42% 50%, rgba(255, 215, 90, 0.09), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018));
}

.radar-panel::after {
  opacity: 0.42;
  background: radial-gradient(circle, rgba(255, 215, 90, .10), transparent 42%);
}

.radar-screen {
  opacity: 0.58;
  border-color: rgba(255, 215, 90, .16);
  background:
    radial-gradient(circle, rgba(255, 215, 90, .14), rgba(255, 215, 90, .045) 29%, transparent 31%),
    repeating-radial-gradient(circle, transparent 0 40px, rgba(255, 215, 90, .10) 41px 42px);
}

.radar-sweep {
  opacity: 0.38;
  background: conic-gradient(
    from 0deg,
    rgba(255, 215, 90, .32) 0deg,
    rgba(255, 215, 90, .13) 18deg,
    transparent 58deg,
    transparent 360deg
  );
}

.radar-metric {
  background: rgba(10, 15, 27, .9);
  border-color: rgba(226, 232, 240, .14);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .32);
}

.radar-metric small,
.radar-metric span {
  color: #bac3d4;
}

@media (max-width: 620px) {
  #sectorChart,
  #sectorChart svg {
    min-height: 330px;
  }

  #sectorChart .chart-label {
    font-size: 11px;
  }
}

/* --------------------------------------------------------------------------
   2026 JS + CSS UX refresh
   Premium dark fintech dashboard with restrained yellow highlight language.
   -------------------------------------------------------------------------- */

:root {
  --accent: var(--gold, #ffd75a);
  --accent-strong: var(--gold-2, #ffb92e);
  --accent-soft: rgba(255, 215, 90, .13);
  --accent-softer: rgba(255, 215, 90, .075);
  --accent-border: rgba(255, 215, 90, .32);
  --surface-0: rgba(6, 8, 14, .92);
  --surface-1: rgba(14, 18, 30, .84);
  --surface-2: rgba(18, 23, 38, .92);
  --surface-3: rgba(255, 255, 255, .06);
  --focus-ring: 0 0 0 3px rgba(7, 8, 12, .95), 0 0 0 6px rgba(255, 215, 90, .78);
  --focus-ring-soft: 0 0 0 3px rgba(255, 215, 90, .2);
  --shadow-soft: 0 18px 44px rgba(0, 0, 0, .28);
  --shadow-card: 0 22px 70px rgba(0, 0, 0, .34);
  --ease-out: cubic-bezier(.2, .7, .2, 1);
}

body {
  background:
    radial-gradient(circle at 14% 5%, rgba(255, 215, 90, .10), transparent 30rem),
    radial-gradient(circle at 88% 8%, rgba(91, 128, 255, .09), transparent 32rem),
    linear-gradient(135deg, #05060a, #090c14 48%, #0b0b08);
}

body::before { opacity: .42; }
.background-glow { opacity: .72; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus { outline: none; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: var(--accent-border) !important;
}

::selection { background: rgba(255, 215, 90, .26); color: var(--text); }

.site-header {
  background: linear-gradient(180deg, rgba(5, 6, 10, .94), rgba(5, 6, 10, .72));
  border-bottom-color: rgba(255, 255, 255, .075);
}

.brand-mark {
  box-shadow: 0 16px 42px rgba(255, 185, 46, .20);
}

.nav-links a,
.market-view-tabs button,
.range-tabs button,
.button,
.icon-button,
.research-link,
.saved-view-chip button,
.command-results button {
  transition: transform .18s var(--ease-out), border-color .18s var(--ease-out), background .18s var(--ease-out), color .18s var(--ease-out), box-shadow .18s var(--ease-out);
}

.nav-links a:hover,
.nav-links a:focus-visible {
  background: rgba(255, 255, 255, .075);
  color: var(--text);
}

.nav-links a[aria-current="true"],
.market-view-tabs button[aria-current="true"] {
  border-color: var(--accent-border);
}

.button {
  border-color: rgba(255, 255, 255, .11);
  box-shadow: none;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-1px);
}

.button.primary {
  color: #141007;
  background: linear-gradient(135deg, #fff3b8, var(--accent), var(--accent-strong));
  box-shadow: 0 16px 38px rgba(255, 185, 46, .2);
}

.button.secondary {
  color: var(--text);
  background: linear-gradient(180deg, rgba(255, 215, 90, .14), rgba(255, 215, 90, .075));
  border-color: rgba(255, 215, 90, .22);
}

.button.ghost {
  background: rgba(255, 255, 255, .03);
  border-color: rgba(255, 255, 255, .09);
}

.button.danger-lite,
.button.reset {
  color: #ffd7df;
  background: rgba(255, 100, 125, .08);
  border-color: rgba(255, 100, 125, .2);
}

.button[disabled] {
  filter: grayscale(.35);
}

.status-panel,
.stat-card,
.chart-card,
.preview-panel,
.preview-card,
.watch-card,
.stock-card,
.quote-card,
.tracker-panel,
.tracker-card,
.feed-row,
.health-card,
.plan-grid article,
.control-panel,
.market-view-tabs,
.smart-view-panel,
.insight-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .025)),
    rgba(12, 15, 25, .78);
  border-color: rgba(255, 255, 255, .09);
  box-shadow: var(--shadow-soft);
}

.stat-card,
.chart-card,
.preview-card,
.watch-card,
.stock-card,
.quote-card,
.tracker-card,
.health-card,
.insight-card {
  position: relative;
  overflow: hidden;
}

.stat-card::before,
.chart-card::before,
.preview-card::before,
.watch-card::before,
.stock-card::before,
.quote-card::before,
.tracker-card::before,
.health-card::before,
.insight-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 90, .28), transparent);
  opacity: .45;
  pointer-events: none;
}

.stat-card:hover,
.preview-card:hover,
.watch-card:hover,
.stock-card:hover,
.tracker-card:hover,
.feed-row:hover {
  border-color: rgba(255, 215, 90, .22);
  background:
    linear-gradient(180deg, rgba(255, 215, 90, .06), rgba(255, 255, 255, .028)),
    rgba(14, 18, 30, .88);
  transform: translateY(-2px);
}

.stock-card.selected,
.feed-row.active,
.preview-card:focus-visible,
.watch-card:focus-within {
  border-color: rgba(255, 215, 90, .48);
  background:
    linear-gradient(135deg, rgba(255, 215, 90, .13), rgba(255, 255, 255, .035) 46%, rgba(255, 215, 90, .045)),
    rgba(16, 20, 32, .94);
  box-shadow: 0 0 0 1px rgba(255, 215, 90, .16), 0 18px 54px rgba(0, 0, 0, .34);
}

.stock-card.selected::after,
.feed-row.active::after {
  content: "";
  position: absolute;
  inset: 10px auto 10px 0;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, #fff3b8, var(--accent-strong));
  box-shadow: 0 0 20px rgba(255, 215, 90, .34);
}

.symbol-badge,
.chart-chip,
.data-pill {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.market-view-tabs {
  padding: 8px;
  gap: 8px;
  border-radius: 22px;
}

.market-view-tabs button {
  border: 1px solid transparent;
  background: rgba(255, 255, 255, .035);
}

.market-view-tabs button:hover,
.market-view-tabs button:focus-visible,
.market-view-tabs button.active {
  background: linear-gradient(180deg, rgba(255, 215, 90, .16), rgba(255, 215, 90, .06));
  border-color: rgba(255, 215, 90, .28);
  color: var(--text);
}

.market-view-tabs button.active {
  box-shadow: inset 0 0 0 1px rgba(255, 215, 90, .18), 0 14px 30px rgba(0, 0, 0, .20);
}

.view-rule-note {
  background: linear-gradient(90deg, rgba(255, 215, 90, .11), rgba(255, 255, 255, .035));
  border-color: rgba(255, 215, 90, .18);
}

input,
select,
.command-search input {
  background: rgba(5, 7, 13, .78);
  border-color: rgba(255, 255, 255, .11);
}

input:hover,
select:hover {
  border-color: rgba(255, 215, 90, .22);
}

input:focus,
select:focus {
  border-color: rgba(255, 215, 90, .45);
  box-shadow: 0 0 0 4px rgba(255, 215, 90, .12);
}

.range-tabs {
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, .09);
  background: rgba(5, 7, 13, .55);
}

.range-tabs button.active,
.range-tabs button:hover,
.range-tabs button:focus-visible {
  color: #141007;
  background: linear-gradient(135deg, #fff3b8, var(--accent), var(--accent-strong));
  border-color: rgba(255, 215, 90, .42);
  box-shadow: 0 10px 24px rgba(255, 185, 46, .16);
}

.icon-button.active {
  background: rgba(255, 215, 90, .15);
  border-color: rgba(255, 215, 90, .32);
  color: var(--accent);
}

.research-link {
  border-radius: 999px;
}

.research-link:hover,
.research-link:focus-visible {
  color: var(--accent);
  background: rgba(255, 215, 90, .08);
}

.insight-grid,
.selected-insights {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.selected-insights {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 18px 0 4px;
}

.insight-card {
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 18px;
  padding: 15px;
  min-height: 126px;
  display: grid;
  gap: 7px;
  align-content: start;
}

.insight-card span {
  color: var(--muted);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 900;
}

.insight-card strong {
  color: var(--text);
  font-size: clamp(.98rem, 1.3vw, 1.2rem);
  line-height: 1.25;
  letter-spacing: -.03em;
}

.insight-card small {
  color: var(--muted);
  line-height: 1.42;
}

.insight-card.positive {
  border-color: rgba(69, 224, 150, .24);
  background: linear-gradient(180deg, rgba(69, 224, 150, .08), rgba(255, 255, 255, .025));
}

.insight-card.negative {
  border-color: rgba(255, 100, 125, .24);
  background: linear-gradient(180deg, rgba(255, 100, 125, .075), rgba(255, 255, 255, .025));
}

.insight-card.warn {
  border-color: rgba(255, 215, 90, .30);
  background: linear-gradient(180deg, rgba(255, 215, 90, .11), rgba(255, 255, 255, .025));
}

.insight-card.neutral {
  border-color: rgba(255, 255, 255, .095);
}

.smart-view-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px 18px;
  align-items: center;
  margin: 14px 0 22px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 22px;
}

.smart-view-copy h3 {
  margin: 2px 0 3px;
  letter-spacing: -.03em;
}

.smart-view-copy span,
.saved-view-empty {
  color: var(--muted);
  font-size: .92rem;
}

.smart-view-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.saved-view-list {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 30px;
}

.saved-view-chip {
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(255, 215, 90, .22);
  border-radius: 999px;
  background: rgba(255, 215, 90, .08);
}

.saved-view-chip button {
  border: 0;
  color: var(--text);
  background: transparent;
  padding: 7px 10px;
  font-weight: 800;
  font-size: .8rem;
}

.saved-view-chip button + button {
  border-left: 1px solid rgba(255, 215, 90, .18);
  color: var(--muted);
}

.saved-view-chip button:hover,
.saved-view-chip button:focus-visible {
  color: #141007;
  background: var(--accent);
}

.shortcut-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 800;
}

.shortcut-hints span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 999px;
  background: rgba(255, 255, 255, .035);
}

kbd {
  min-width: 1.55em;
  padding: 2px 5px;
  border-radius: 6px;
  color: var(--accent);
  background: rgba(255, 215, 90, .09);
  border: 1px solid rgba(255, 215, 90, .18);
  font: inherit;
  font-weight: 900;
  text-align: center;
}

.command-palette[hidden] { display: none; }
.command-palette {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: start center;
  padding: clamp(70px, 12vh, 120px) 16px 24px;
}

.command-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .62);
  backdrop-filter: blur(12px);
}

.command-dialog {
  position: relative;
  width: min(720px, 100%);
  max-height: min(720px, calc(100vh - 120px));
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(255, 215, 90, .22);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255, 215, 90, .07), transparent 34%),
    rgba(8, 10, 16, .97);
  box-shadow: 0 30px 110px rgba(0, 0, 0, .62), 0 0 0 1px rgba(255, 255, 255, .05) inset;
}

.command-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
}

.command-head h3 {
  margin: 0;
  letter-spacing: -.04em;
}

.command-search input {
  width: 100%;
  min-height: 48px;
  border-radius: 16px;
  padding: 0 14px;
}

.command-results {
  display: grid;
  gap: 8px;
  overflow: auto;
  padding-right: 4px;
}

.command-results button {
  width: 100%;
  text-align: left;
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  color: var(--text);
  background: rgba(255, 255, 255, .035);
}

.command-results button:hover,
.command-results button:focus-visible {
  transform: none;
  border-color: rgba(255, 215, 90, .32);
  background: rgba(255, 215, 90, .09);
}

.command-results button span {
  color: var(--muted);
  font-size: .86rem;
}

body.command-open { overflow: hidden; }

.empty-state {
  background:
    linear-gradient(180deg, rgba(255, 215, 90, .055), rgba(255, 255, 255, .025)),
    rgba(12, 15, 25, .78);
  border-color: rgba(255, 215, 90, .20);
  border-style: dashed;
}

.empty-state strong::before {
  content: "•";
  color: var(--accent);
  margin-right: 8px;
}

.status-panel.loading .status-dot,
body[data-data-status="loading"] .status-dot {
  background: var(--accent);
  box-shadow: 0 0 24px rgba(255, 215, 90, .55);
}

.status-panel.error {
  border-color: rgba(255, 100, 125, .28);
  background: linear-gradient(90deg, rgba(255, 100, 125, .09), rgba(255, 255, 255, .03));
}

.status-panel.success {
  border-color: rgba(69, 224, 150, .24);
  background: linear-gradient(90deg, rgba(69, 224, 150, .075), rgba(255, 255, 255, .03));
}

.loading span,
.loading strong,
.loading small,
.is-loading-data .stat-card.loading span,
.is-loading-data .stat-card.loading strong,
.is-loading-data .stat-card.loading small {
  background: linear-gradient(90deg, rgba(255,255,255,.055), rgba(255,215,90,.15), rgba(255,255,255,.055));
  background-size: 240% 100%;
}

.detail-chart {
  border-color: rgba(255, 255, 255, .09);
  background:
    radial-gradient(circle at 16% 10%, rgba(255, 215, 90, .085), transparent 22rem),
    rgba(5, 7, 13, .64);
}

.detail-chart-note {
  border-color: rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .035);
}

.detail-svg {
  color: var(--accent);
}

.detail-svg.down {
  color: var(--red);
}

.chart-bar.positive-bar {
  fill: var(--accent) !important;
}

.chart-bar.negative-bar {
  fill: rgba(255, 100, 125, .72) !important;
}

.bar-gridline,
.zero-line,
.y-tick line {
  stroke: rgba(255, 255, 255, .09);
}

.chart-label,
.y-tick text {
  fill: rgba(226, 232, 240, .72);
}

.chart-value {
  fill: var(--text);
  font-weight: 900;
}

.chart-tooltip {
  border-color: rgba(255, 215, 90, .24);
  background: rgba(5, 7, 13, .94);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .36);
}

.positive { color: var(--green) !important; }
.negative { color: var(--red) !important; }
.neutral { color: var(--muted) !important; }
.warn { color: var(--accent) !important; }

.coverage-banner.pass,
.health-card.pass,
.stat-card.pass {
  border-color: rgba(69, 224, 150, .24);
  box-shadow: 0 18px 44px rgba(69, 224, 150, .06);
}

.coverage-banner.warn,
.health-card.warn,
.stat-card.warn {
  border-color: rgba(255, 215, 90, .30);
  box-shadow: 0 18px 44px rgba(255, 215, 90, .06);
}

.stock-card .row-actions,
.watch-card-top,
.quote-actions,
.toolbar-actions {
  isolation: isolate;
}

.preview-card[role="button"],
.stock-card[role="button"] {
  cursor: pointer;
}

@media (max-width: 1020px) {
  .insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .smart-view-panel { grid-template-columns: 1fr; }
  .smart-view-actions { justify-content: flex-start; }
}

@media (max-width: 720px) {
  .selected-insights,
  .insight-grid { grid-template-columns: 1fr; }

  .insight-card { min-height: auto; }

  .smart-view-actions .button { width: auto; }
  .smart-view-actions { gap: 8px; }

  .shortcut-hints { display: none; }

  .command-dialog {
    border-radius: 20px;
    max-height: calc(100vh - 80px);
  }

  .command-palette { padding-top: 58px; }
}

@media (max-width: 520px) {
  .smart-view-actions .button,
  .saved-view-chip,
  .saved-view-chip button:first-child {
    width: 100%;
  }

  .saved-view-chip { border-radius: 16px; }
  .saved-view-chip button { justify-content: center; }

  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    box-shadow: 0 0 0 2px rgba(7, 8, 12, .95), 0 0 0 5px rgba(255, 215, 90, .8);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}


/* --------------------------------------------------------------------------
   Market heatmap
   -------------------------------------------------------------------------- */
.heatmap-section { padding-top: 30px; }
.heatmap-card {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .028));
  box-shadow: var(--shadow);
  overflow: hidden;
}
.heatmap-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  align-items: end;
  padding: 20px 22px;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(4, 6, 12, .28);
}
.heatmap-toolbar .eyebrow { margin-bottom: 7px; }
.heatmap-range-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, .045);
}
.heatmap-range-tabs button {
  min-width: 52px;
  padding: 8px 13px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
}
.heatmap-range-tabs button:hover,
.heatmap-range-tabs button:focus-visible,
.heatmap-range-tabs button.active {
  background: linear-gradient(135deg, var(--gold-3), var(--gold-2));
  color: #101113;
  outline: none;
}
.heatmap-controls {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(190px, 1fr);
  gap: 12px;
  min-width: min(100%, 480px);
}
.heatmap-controls label { min-width: 0; }
.heatmap-controls select { min-height: 44px; padding: 9px 11px; }
.heatmap-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(0, 0, 0, .11);
}
.heatmap-legend {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 800;
  white-space: nowrap;
}
.heatmap-legend-label { margin-inline: 3px; }
.heatmap-swatch { width: 22px; height: 14px; border-radius: 4px; border: 1px solid rgba(255,255,255,.15); }
.heatmap-swatch-negative-strong { background: hsl(3 70% 38%); }
.heatmap-swatch-negative-light { background: hsl(3 46% 26%); }
.heatmap-swatch-neutral { background: hsl(225 10% 20%); }
.heatmap-swatch-positive-light { background: hsl(150 45% 27%); }
.heatmap-swatch-positive-strong { background: hsl(150 70% 39%); }
.heatmap-data-note { margin: 0; color: var(--muted); font-size: .8rem; font-weight: 800; text-align: right; }
.market-heatmap {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  min-height: 360px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.025), rgba(0,0,0,.16)),
    rgba(3, 5, 9, .52);
}
.market-heatmap > .heatmap-empty-state {
  grid-column: 1 / -1;
  width: 100%;
  align-self: start;
}
.heatmap-sector {
  grid-column: span var(--heatmap-sector-span);
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.028);
}
.heatmap-sector-header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  padding: 1px 3px 0;
}
.heatmap-sector-header strong { font-size: .76rem; letter-spacing: .07em; text-transform: uppercase; }
.heatmap-sector-header span { color: var(--muted); font-size: .7rem; font-weight: 800; white-space: nowrap; }
.heatmap-sector-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 43px;
  grid-auto-flow: dense;
  gap: 5px;
}
.heatmap-tile {
  grid-column: span var(--heatmap-tile-span);
  grid-row: span var(--heatmap-tile-row);
  position: relative;
  min-width: 0;
  min-height: 43px;
  display: grid;
  place-content: center;
  gap: 2px;
  padding: 7px;
  overflow: hidden;
  text-align: center;
  border: 1px solid var(--heatmap-tile-border);
  border-radius: 10px;
  color: #fff;
  background:
    radial-gradient(circle at 25% 14%, rgba(255,255,255,.15), transparent 42%),
    var(--heatmap-tile-fill);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform 150ms ease, filter 150ms ease, border-color 150ms ease;
}
.heatmap-tile:hover,
.heatmap-tile:focus-visible {
  transform: translateY(-2px) scale(1.012);
  filter: brightness(1.15);
  outline: 2px solid var(--gold-3);
  outline-offset: 2px;
  z-index: 2;
}
.heatmap-tile strong { font-size: clamp(.74rem, 1.25vw, 1rem); line-height: 1; letter-spacing: -.03em; }
.heatmap-tile span { color: rgba(255,255,255,.86); font-size: .68rem; line-height: 1.1; font-weight: 800; }
.heatmap-tile em { font-style: normal; font-size: .75rem; line-height: 1.1; font-weight: 900; }
/* Always keep the selected heatmap period's move visible in the lower-right corner.
   formatPercent() uses toFixed(2), which preserves every whole-number digit while
   consistently showing exactly two decimal places (for example, +1.82% or -123.45%). */
.heatmap-tile .heatmap-change {
  display: block;
  position: absolute;
  right: 6px;
  bottom: 5px;
  max-width: calc(100% - 10px);
  overflow: visible;
  color: rgba(255,255,255,.96);
  font-size: clamp(.54rem, 1.1vw, .78rem);
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  letter-spacing: -.025em;
  line-height: 1;
  pointer-events: none;
  text-align: right;
  text-shadow: 0 1px 2px rgba(0,0,0,.28);
  white-space: nowrap;
}
.heatmap-tile.small span,
.heatmap-tile.small em:not(.heatmap-change) { display: none; }
.heatmap-tile.small strong { font-size: .68rem; }
.heatmap-tile.medium span { display: none; }

@media (max-width: 980px) {
  .heatmap-toolbar { align-items: stretch; flex-direction: column; }
  .heatmap-controls { width: 100%; max-width: none; }
  .market-heatmap { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .heatmap-sector { grid-column: 1 / -1; }
}
@media (max-width: 660px) {
  .heatmap-toolbar, .heatmap-meta-row { padding-inline: 14px; }
  .heatmap-controls { grid-template-columns: 1fr; }
  .heatmap-meta-row { align-items: flex-start; flex-direction: column; }
  .heatmap-data-note { text-align: left; }
  .market-heatmap { grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 8px; gap: 8px; }
  .heatmap-sector { grid-column: span 6; padding: 7px; }
  .heatmap-sector-grid { grid-auto-rows: 42px; gap: 4px; }
  .heatmap-tile { border-radius: 8px; padding: 5px; }
  .heatmap-tile.medium span, .heatmap-tile.medium em:not(.heatmap-change) { display: none; }
  .heatmap-tile .heatmap-change { right: 5px; bottom: 4px; font-size: clamp(.5rem, 2.6vw, .72rem); }
  .heatmap-tile.large span { display: block; }
}

/* --------------------------------------------------------------------------
   External research destinations
   Google remains the broad web/news search. Robinhood opens the matching
   public ticker page for quote, chart, news, and company research.
   -------------------------------------------------------------------------- */
.research-actions {
  gap: 7px;
}

.research-actions .research-link {
  min-width: 0;
  padding-inline: 10px;
  font-size: .78rem;
  white-space: nowrap;
}

.robinhood-research-link,
.robinhood-research-button {
  color: #86efac;
  border-color: rgba(134, 239, 172, .30);
  background: rgba(134, 239, 172, .08);
}

.robinhood-research-link:hover,
.robinhood-research-link:focus-visible,
.robinhood-research-button:hover,
.robinhood-research-button:focus-visible {
  color: #d1fae5;
  border-color: rgba(134, 239, 172, .56);
  background: rgba(134, 239, 172, .16);
}

.watch-research-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 9px;
}

.watch-research-actions .research-link {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

@media (min-width: 1121px) {
  .stock-grid-header,
  .stock-card {
    grid-template-columns: 1fr 1.8fr 1.1fr .9fr .85fr .7fr .7fr .7fr .9fr 2.15fr;
  }
}

@media (max-width: 620px) {
  .stock-card .row-actions.research-actions {
    grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1fr);
    gap: 7px;
  }

  .research-actions .research-link {
    padding-inline: 7px;
    font-size: .72rem;
  }

  .quote-actions .button {
    width: 100%;
  }
}


/* --------------------------------------------------------------------------
   Mobile QA hardening
   These rules make the dashboard intentionally phone-first without changing
   the desktop information density.
   -------------------------------------------------------------------------- */
main [id] {
  scroll-margin-top: calc(var(--header) + 18px);
}

.nav,
.nav-links,
.hero-grid,
.hero-copy,
.radar-panel,
.section-heading,
.heatmap-toolbar,
.heatmap-controls,
.heatmap-meta-row,
.heatmap-legend,
.market-heatmap,
.heatmap-sector,
.heatmap-sector-grid,
.quote-grid,
.quote-card,
.tracker-panel,
.control-panel,
.screener-toolbar,
.stock-card,
.stock-card > *,
.watch-card,
.watch-card > *,
.preview-card,
.preview-card > *,
.health-card,
.health-card > *,
.plan-grid article,
.chart-card,
.chart-card > *,
.status-panel,
.coverage-banner,
.view-rule-note,
.smart-view-panel,
.insight-card {
  min-width: 0;
}

@media (max-width: 860px) {
  .site-header {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }

  .nav-toggle {
    min-width: 44px;
    min-height: 44px;
    display: grid;
    place-content: center;
    border-radius: 12px;
  }

  .nav-toggle:focus-visible,
  .nav-toggle:hover {
    background: rgba(255, 255, 255, .07);
    outline: none;
  }

  .nav-links {
    max-width: none;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .nav-links a {
    min-height: 46px;
    display: flex;
    align-items: center;
  }

  .nav-links.open {
    animation: mobile-menu-in 160ms ease-out both;
  }

  .heatmap-tile,
  .market-view-tabs button,
  .range-tabs button,
  .heatmap-range-tabs button {
    touch-action: manipulation;
  }
}

@media (max-width: 660px) {
  .section {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }

  .heatmap-toolbar {
    gap: 16px;
  }

  .heatmap-range-tabs {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .heatmap-range-tabs button {
    min-width: 0;
    min-height: 42px;
  }

  .heatmap-legend {
    width: 100%;
    flex-wrap: wrap;
    white-space: normal;
    row-gap: 7px;
  }

  .heatmap-data-note,
  .section-heading p,
  .coverage-banner,
  .view-rule-note,
  .smart-view-copy span,
  .insight-card small,
  .health-card p,
  .health-card small {
    overflow-wrap: anywhere;
  }

  .market-heatmap {
    min-height: 0;
  }

  .heatmap-sector-header {
    align-items: flex-start;
  }

  .heatmap-sector-header span {
    white-space: normal;
    text-align: right;
  }

  .heatmap-tile {
    min-height: 46px;
  }

  .watch-research-actions {
    grid-template-columns: 1fr;
  }

  .watch-research-actions .research-link {
    min-height: 44px;
  }
}

@media (max-width: 420px) {
  .market-view-tabs {
    scroll-padding-inline: 8px;
  }

  .market-view-tabs::after {
    content: "Swipe for more";
    position: sticky;
    right: 0;
    align-self: center;
    margin-left: -74px;
    padding: 5px 8px;
    pointer-events: none;
    border: 1px solid rgba(255, 215, 90, .22);
    border-radius: 999px;
    color: var(--gold-3);
    background: rgba(7, 10, 18, .9);
    box-shadow: -10px 0 18px rgba(7, 10, 18, .72);
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .02em;
    white-space: nowrap;
  }

  .market-view-tabs:focus-within::after {
    opacity: 0;
  }

  .preview-card span,
  .preview-card small,
  .symbol-meta small,
  .feed-row small {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .hero-meta {
    align-items: flex-start;
  }
}

@media (max-width: 390px) {
  .heatmap-sector-grid {
    grid-auto-rows: 40px;
  }

  .heatmap-tile.large span,
  .heatmap-tile.large em:not(.heatmap-change) {
    display: none;
  }

  .heatmap-tile .heatmap-change {
    display: block;
    right: 4px;
    bottom: 4px;
    font-size: .5rem;
  }
}

@media (hover: none) {
  .stock-card:hover,
  .preview-card:hover,
  .watch-card:hover,
  .heatmap-tile:hover {
    transform: none;
  }
}

@keyframes mobile-menu-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 860px) {
  .button,
  .icon-button,
  .research-link,
  .range-tabs button,
  .heatmap-range-tabs button,
  .market-view-tabs button,
  .smart-view-actions .button,
  .saved-view-chip button {
    min-height: 44px;
  }

  .icon-button {
    min-width: 44px;
  }

  .stock-card .row-actions {
    flex-wrap: wrap;
  }
}