/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
/* Theme system: all colors are CSS custom properties, defined once here
   for both a dark and a light palette, selected by `data-theme` on
   `<html>` (set before paint by the inline script in app/layout.tsx -
   see that file for the "avoid FOUC" rationale). `:root` holds the dark
   palette as a fallback for the rare no-JS case; `html[data-theme=...]`
   is what actually drives the app once JS has run. */
:root,
html[data-theme="dark"] {
  color-scheme: dark;

  /* Binance/exchange-inspired dark palette: deep near-black surfaces
     (not just "dark gray") with a single warm amber accent used
     consistently for every interactive element - deliberately not
     Binance's exact brand yellow (#F0B90B/#FCD535), a muted/more
     orange amber instead. */
  --bg: #05070a;
  --panel: #0c0f14;
  --panel-border: #1b222c;
  --surface-sunken: #080a0e;
  --surface-alt: #141a22;
  --surface-raised: #11161d;
  --text: #e8edf4;
  --text-muted: #7c8a9c;
  --accent: #f2a93b;
  --accent-contrast: #0c0f14;
  --up: #2fbf71;
  --down: #f0494c;
  --flat: #7c8a9c;
  --warn: #f0b429;
  --purple: #c084fc;

  --notice-bg: #1b2838;
  --notice-border: #27405a;
  --notice-error-bg: #2a1618;
  --notice-error-border: #5a2a2a;
  --notice-error-text: #ffb4ad;
  --unavailable-stripe: #2a3545;

  /* Score-band gradient, Very Weak -> Very Strong (SCORING.md section 1,
     SPEC.md section 19) - color only, the band label text never changes. */
  --band-very-weak: #f85149;
  --band-weak: #f0883e;
  --band-neutral: #8b98a9;
  --band-moderate: #4da3ff;
  --band-strong: #3fb950;
  --band-very-strong: #56d364;
}

html[data-theme="light"] {
  color-scheme: light;

  --bg: #f4f6f9;
  --panel: #ffffff;
  --panel-border: #d7dee8;
  --surface-sunken: #eef1f6;
  --surface-alt: #e8ecf2;
  --surface-raised: #eef2f8;
  --text: #1a2130;
  --text-muted: #5b6472;
  --accent: #b6790a;
  --accent-contrast: #ffffff;
  --up: #166534;
  --down: #b42318;
  --flat: #5b6472;
  --warn: #9a6700;
  --purple: #8250df;

  --notice-bg: #eaf1fb;
  --notice-border: #bcd4f3;
  --notice-error-bg: #fdecea;
  --notice-error-border: #f3c2bd;
  --notice-error-text: #9c2b23;
  --unavailable-stripe: #d7dee8;

  --band-very-weak: #cf222e;
  --band-weak: #c2410c;
  --band-neutral: #5b6472;
  --band-moderate: #1f6feb;
  --band-strong: #166534;
  --band-very-strong: #0f7b3a;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
}

body {
  transition: background-color 0.15s ease, color 0.15s ease;
}

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

a:hover {
  text-decoration: underline;
}

.topnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.5rem;
  border-bottom: 1px solid var(--panel-border);
  background: var(--panel);
  gap: 1rem;
}

.topnav .brand {
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}

.topnav .tagline {
  color: var(--text-muted);
  font-size: 0.85rem;
  flex: 1 1;
}

.topnav .nav-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: var(--surface-alt);
  color: var(--text);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
}

.theme-toggle:hover {
  border-color: var(--accent);
}

main {
  padding: 1.25rem 1.5rem;
  max-width: min(96vw, 1560px);
  margin: 0 auto;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 0.85rem 1.1rem;
  margin-bottom: 1rem;
}

.panel h2 {
  margin-top: 0;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* Tabular-numeral alignment utility (SPEC.md UI redesign task: every
   numeric column - price, score, RS rank, % change - must line up
   vertically like a real market-data table). Applied directly on the
   numeric span/cell, not globally on <table>, since labels/badges in
   the same row should keep normal proportional spacing. */
.num {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.search-box input {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
  background: var(--surface-sunken);
  color: var(--text);
  font-size: 1rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

th {
  text-align: left;
  color: var(--text-muted);
  font-weight: 600;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--panel-border);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

th.sortable {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  white-space: nowrap;
}

th.sortable:hover {
  color: var(--text);
}

th.sortable .sort-indicator {
  display: inline-block;
  margin-left: 0.3rem;
  font-size: 0.7rem;
  color: var(--accent);
}

th.sortable .sort-indicator.inactive {
  color: var(--text-muted);
  opacity: 0.5;
}

td {
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--surface-alt);
}

tr.row-link {
  cursor: pointer;
}

tr.row-link:hover {
  background: var(--surface-raised);
}

/* --- Dense, data-table-first market view (Binance-markets-inspired home
   page redesign) --- */

.market-table-panel {
  padding: 0.75rem 0.9rem 0.5rem;
}

.market-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.filter-tabs {
  display: inline-flex;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  padding: 0.15rem;
  background: var(--surface-sunken);
  gap: 0.15rem;
}

.filter-tabs button {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
}

.filter-tabs button.active {
  background: var(--accent);
  color: var(--accent-contrast);
}

.filter-tabs button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.market-table-scroll {
  overflow-x: auto;
  max-height: 72vh;
  overflow-y: auto;
}

.market-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: var(--panel);
  z-index: 1;
}

.market-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.market-table td,
.market-table th {
  padding: 0.35rem 0.5rem;
  white-space: nowrap;
}

.market-table tbody tr {
  transition: background-color 0.08s ease;
}

/* Explicit column controls to prevent wide gaps and eliminate horizontal scrolling */
.market-table .col-sno {
  width: 38px;
  min-width: 38px;
  max-width: 44px;
  text-align: center;
  color: var(--text-muted);
}

.market-table .col-symbol {
  width: 90px;
  min-width: 80px;
  max-width: 105px;
  font-weight: 700;
}

.market-table .col-company {
  max-width: 165px;
  min-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.market-table .col-sector {
  max-width: 135px;
  min-width: 95px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.market-table .col-sector .badge {
  max-width: 125px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
}

.market-table .col-num {
  text-align: right;
}

.market-table th.col-num {
  text-align: right;
}

.market-table th.col-num .sort-indicator {
  margin-left: 0.2rem;
}

/* Compact Instrument cell (stacked Symbol on top, Company underneath) */
.instrument-cell {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  max-width: 180px;
  min-width: 110px;
}

.instrument-cell .instrument-symbol {
  font-weight: 700;
  color: var(--text);
  font-size: 0.85rem;
}

.instrument-cell .instrument-name {
  color: var(--text-muted);
  font-size: 0.72rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Pinned sticky columns on horizontal scroll */
.market-table th.sticky-col-1,
.market-table td.sticky-col-1 {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--panel);
}

.market-table th.sticky-col-2,
.market-table td.sticky-col-2 {
  position: -webkit-sticky;
  position: sticky;
  left: 38px;
  z-index: 2;
  background: var(--panel);
}

.market-table thead th.sticky-col-1,
.market-table thead th.sticky-col-2 {
  z-index: 3;
}

.market-table tbody tr.row-link:hover td.sticky-col-1,
.market-table tbody tr.row-link:hover td.sticky-col-2 {
  background: var(--surface-raised);
}

/* --- Stage 2 Momentum Scanner pass/fail badge (reuses --up/--down,
   never a parallel color system) --- */

.stage2-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.stage2-badge.stage2-pass {
  color: var(--up);
  background: rgba(47, 191, 113, 0.14);
}

.stage2-badge.stage2-fail {
  color: var(--down);
  background: rgba(240, 73, 76, 0.12);
}

.stage2-badge.stage2-na {
  color: var(--text-muted);
  background: var(--surface-alt);
  font-weight: 500;
}

.stage2-distance {
  font-weight: 500;
  opacity: 0.85;
}

/* --- TradingView Technical Analysis Momentum Badges --- */

.tv-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1.35;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tv-badge.tv-strong-buy-both {
  color: #10b981;
  background: rgba(16, 185, 129, 0.16);
  border: 1px solid rgba(16, 185, 129, 0.4);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.15);
}

.tv-badge.tv-strong-buy {
  color: var(--up);
  background: rgba(47, 191, 113, 0.12);
  border: 1px solid rgba(47, 191, 113, 0.28);
}

.tv-badge.tv-strong-sell-both {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.16);
  border: 1px solid rgba(239, 68, 68, 0.4);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.15);
}

.tv-badge.tv-strong-sell {
  color: var(--down);
  background: rgba(240, 73, 76, 0.12);
  border: 1px solid rgba(240, 73, 76, 0.28);
}

/* --- Analyst Target column (reuses --up/--down, never a parallel color
   system - green = target above current price = upside, red = below) --- */

.analyst-cell {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.25;
  font-size: 0.8rem;
}

.analyst-cell .analyst-target-price {
  font-weight: 600;
}

.analyst-cell .analyst-upside.up {
  color: var(--up);
}

.analyst-cell .analyst-upside.down {
  color: var(--down);
}

.analyst-cell.no-coverage {
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* Ticker-header variant (apps/web/components/TickerHeader.tsx) - same
   pill shape/colors as .stage2-badge, just a different label. */
.analyst-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.analyst-badge.analyst-up {
  color: var(--up);
  background: rgba(47, 191, 113, 0.14);
}

.analyst-badge.analyst-down {
  color: var(--down);
  background: rgba(240, 73, 76, 0.12);
}

.analyst-badge.analyst-na {
  color: var(--text-muted);
  background: var(--surface-alt);
  font-weight: 500;
}

/* --- Day change % (home table + top gainers/losers widget) --- */

.day-change.up {
  color: var(--up);
  font-weight: 600;
}

.day-change.down {
  color: var(--down);
  font-weight: 600;
}

.day-change.flat {
  color: var(--text-muted);
}

/* --- Ticker-style stock-page header strip --- */

.ticker-panel {
  padding: 0.65rem 1.1rem;
}

.ticker-bar {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  row-gap: 0.5rem;
}

.ticker-symbol {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.ticker-price {
  font-size: 1.3rem;
  font-weight: 700;
}

.ticker-change-badge {
  font-size: 0.9rem;
  font-weight: 700;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  background: var(--surface-alt);
  color: var(--text-muted);
}

.score-cell {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-weight: 700;
}

.score-cell .score-band-pill {
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--surface-alt);
}

.score-cell.unscored {
  color: var(--text-muted);
  font-weight: 400;
  font-style: italic;
}

.tone-up {
  color: var(--up);
}

.tone-down {
  color: var(--down);
}

.tone-flat {
  color: var(--flat);
}

.stock-header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}

.stock-header .symbol {
  font-size: 1.6rem;
  font-weight: 700;
}

.stock-header .price {
  font-size: 1.6rem;
  font-weight: 600;
}

.stock-header .change {
  font-size: 1.05rem;
  font-weight: 600;
}

.meta-row {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

.range-selector {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.range-selector button {
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  border: 1px solid var(--panel-border);
  background: var(--surface-sunken);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.85rem;
}

.range-selector button.active {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
  font-weight: 600;
}

.overlay-toggles {
  display: flex;
  gap: 0.9rem;
  margin-bottom: 0.6rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  flex-wrap: wrap;
}

.overlay-toggles label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 0.75rem 1.5rem;
  gap: 0.75rem 1.5rem;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 0.75rem 1.5rem;
  gap: 0.75rem 1.5rem;
}

@media (max-width: 640px) {
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }
}

.metric {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--surface-alt);
  padding: 0.3rem 0;
}

.metric .label {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.metric .value {
  font-weight: 600;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.flag {
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
}

.flag.yes {
  background: rgba(63, 185, 80, 0.18);
  color: var(--up);
}

.flag.no {
  background: var(--surface-alt);
  color: var(--text-muted);
}

.notice {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: var(--notice-bg);
  border: 1px solid var(--notice-border);
  color: var(--text-muted);
  font-size: 0.9rem;
}

.notice.error {
  background: var(--notice-error-bg);
  border-color: var(--notice-error-border);
  color: var(--notice-error-text);
}

.skeleton {
  color: var(--text-muted);
  padding: 2rem 0;
  text-align: center;
}

.footnote {
  color: var(--text-muted);
  font-size: 0.75rem;
  margin-top: 0.5rem;
}

/* --- Research Score / confidence / regime badges (Phase 3) --- */

.score-header-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.score-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.25rem 0.7rem;
  border-radius: 8px;
  background: var(--surface-raised);
  border: 1px solid var(--panel-border);
}

.score-badge .score-value {
  font-size: 1.1rem;
  font-weight: 700;
}

.score-badge .score-band {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.confidence-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--text-muted);
  font-size: 0.78rem;
}

.confidence-badge .confidence-value {
  font-weight: 700;
  color: var(--text);
}

.regime-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid var(--panel-border);
}

.regime-badge.regime-bullish {
  background: rgba(63, 185, 80, 0.15);
  color: var(--up);
  border-color: rgba(63, 185, 80, 0.4);
}

.regime-badge.regime-bearish {
  background: rgba(248, 81, 73, 0.15);
  color: var(--down);
  border-color: rgba(248, 81, 73, 0.4);
}

.regime-badge.regime-neutral {
  background: var(--surface-alt);
  color: var(--text-muted);
}

/* --- Component breakdown bars --- */

.component-row {
  margin-bottom: 0.45rem;
}

.component-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
  cursor: pointer;
}

.component-row-head .component-name {
  font-weight: 600;
}

.component-row-head .component-score {
  color: var(--text-muted);
}

.component-bar-track {
  height: 10px;
  border-radius: 6px;
  background: var(--surface-alt);
  overflow: hidden;
}

.component-bar-fill {
  height: 100%;
  border-radius: 6px;
  background: var(--accent);
}

.component-bar-fill.unavailable {
  background: repeating-linear-gradient(
    45deg,
    var(--unavailable-stripe),
    var(--unavailable-stripe) 6px,
    var(--surface-alt) 6px,
    var(--surface-alt) 12px
  );
}

.component-unavailable-note {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

/* --- Fundamental Score block (FundamentalsPanel) - a sub-view nested
   inside the Fundamentals panel. Deliberately mirrors
   `.component-bar-track`/`.component-bar-fill` above (same track
   height, same rounded-pill fill, same "unavailable" hatch pattern) so
   it reads as "the same kind of bar", but uses the `--purple` accent
   instead of `--accent` and a smaller `.subscore-*` footprint so it's
   visually legible as a sub-view of the main 8-component Research
   Score breakdown, never confused with it. */

.fundamental-score-block {
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: var(--surface-raised);
}

.subscore-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 0.6rem 1.2rem;
  gap: 0.6rem 1.2rem;
  margin-top: 0.6rem;
}

@media (max-width: 640px) {
  .subscore-grid {
    grid-template-columns: 1fr;
  }
}

.subscore-row-head {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  margin-bottom: 0.2rem;
}

.subscore-name {
  color: var(--text-muted);
}

.subscore-value {
  font-weight: 700;
}

.subscore-bar-track {
  height: 6px;
  border-radius: 4px;
  background: var(--surface-alt);
  overflow: hidden;
}

.subscore-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--purple);
}

.subscore-bar-fill.unavailable {
  background: repeating-linear-gradient(
    45deg,
    var(--unavailable-stripe),
    var(--unavailable-stripe) 5px,
    var(--surface-alt) 5px,
    var(--surface-alt) 10px
  );
}

.quarterly-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 0.6rem;
  gap: 0.6rem;
  margin-top: 0.6rem;
}

@media (max-width: 640px) {
  .quarterly-kpi-row {
    grid-template-columns: 1fr;
  }
}

.quarterly-kpi-tile {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: var(--surface-alt);
}

.quarterly-kpi-label {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.quarterly-kpi-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}

.ath-badge {
  align-self: flex-start;
  font-size: 0.9rem;
}

.ath-badge-yes {
  display: inline-block;
  padding: 1px 10px;
  border-radius: 999px;
  font-weight: 700;
  color: var(--up);
  background: color-mix(in srgb, var(--up) 18%, transparent);
}

.ath-badge-no {
  font-weight: 700;
  color: var(--text-muted);
}

.ath-badge-unknown {
  color: var(--text-muted);
  font-style: italic;
}

.quarterly-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 0.8rem;
  gap: 0.8rem;
  margin-top: 0.8rem;
}

@media (max-width: 640px) {
  .quarterly-stat-grid {
    grid-template-columns: 1fr;
  }
}

.quarterly-stat-card {
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: var(--surface-raised);
}

.quarterly-stat-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
}

.quarterly-stat-head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
  flex-wrap: wrap;
}

.quarterly-stat-value {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
}

.quarterly-stat-delta {
  font-size: 0.82rem;
  font-weight: 600;
}

.quarterly-trend-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 44px;
}

.quarterly-bar {
  flex: 1 1;
  min-width: 0;
  max-width: 28px;
  border-radius: 4px 4px 0 0;
}

.quarterly-bar.unavailable {
  background: repeating-linear-gradient(
    45deg,
    var(--unavailable-stripe),
    var(--unavailable-stripe) 4px,
    var(--surface-alt) 4px,
    var(--surface-alt) 8px
  );
}

.quarterly-trend-ticks {
  display: flex;
  gap: 3px;
  margin-top: 4px;
}

.quarterly-trend-ticks span {
  flex: 1 1;
  min-width: 0;
  text-align: center;
  font-size: 0.62rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quarterly-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 0.7rem;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.quarterly-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  font-style: normal;
}

.legend-dot.tone-dot-up {
  background: var(--up);
}

.legend-dot.tone-dot-down {
  background: var(--down);
}

.legend-dot.tone-dot-flat {
  background: var(--flat);
}

.legend-dot.legend-dot-unavailable {
  background: repeating-linear-gradient(
    45deg,
    var(--unavailable-stripe),
    var(--unavailable-stripe) 2px,
    var(--surface-alt) 2px,
    var(--surface-alt) 4px
  );
}

.component-evidence-list {
  margin: 0.4rem 0 0.8rem 0;
  padding: 0.5rem 0.75rem;
  background: var(--surface-sunken);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  font-size: 0.8rem;
}

.component-evidence-list .evidence-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--surface-alt);
}

.component-evidence-list .evidence-row:last-child {
  border-bottom: none;
}

/* --- Bull / Bear case --- */

.bull-bear-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
}

@media (max-width: 640px) {
  .bull-bear-grid {
    grid-template-columns: 1fr;
  }
}

.bull-bear-grid h3 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 0.5rem 0;
}

.bull-bear-grid h3.bull-title {
  color: var(--up);
}

.bull-bear-grid h3.bear-title {
  color: var(--down);
}

.bull-bear-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
}

.bull-bear-grid li {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--surface-alt);
}

.bull-bear-grid li:last-child {
  border-bottom: none;
}

/* --- Bull/bear strength badges (reuses --up/--down + the Stage 2
   pass/fail pill convention above - never a new color system). Strong
   entries get a bolder/opaque pill + bold body text; mild entries get a
   muted, lower-contrast treatment so the eye lands on the strongest
   evidence first in each column. */

.strength-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.strength-row.strength-row-strong {
  font-weight: 600;
}

.strength-row.strength-row-mild {
  color: var(--text-muted);
  font-weight: 400;
}

.strength-badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.strength-badge.tone-up.strength-strong {
  color: var(--up);
  background: rgba(47, 191, 113, 0.18);
}

.strength-badge.tone-up.strength-moderate {
  color: var(--up);
  background: rgba(47, 191, 113, 0.1);
}

.strength-badge.tone-up.strength-mild {
  color: var(--text-muted);
  background: var(--surface-alt);
  font-weight: 500;
}

.strength-badge.tone-down.strength-strong {
  color: var(--down);
  background: rgba(240, 73, 76, 0.18);
}

.strength-badge.tone-down.strength-moderate {
  color: var(--down);
  background: rgba(240, 73, 76, 0.1);
}

.strength-badge.tone-down.strength-mild {
  color: var(--text-muted);
  background: var(--surface-alt);
  font-weight: 500;
}

/* --- Synced multi-pane stock chart (candlestick+volume / RSI / MACD) ---
   One bordered frame wraps all three lightweight-charts instances so
   they read as a single cohesive chart; panes are separated by a hairline
   only (no gap/double border), and only the bottom-most pane shows the
   time-axis labels (its chart options set timeScale.visible on just that
   one - see components/StockCharts.tsx). */

.chart-frame {
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel);
}

.chart-pane {
  border-top: 1px solid var(--panel-border);
}

.chart-pane:first-child {
  border-top: none;
}

.chart-pane .chart-pane-label {
  padding: 0.5rem 0.75rem 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.chart-pane .chart-pane-label .legend-macd {
  color: var(--accent);
}

.chart-pane .chart-pane-label .legend-signal {
  color: var(--warn);
}

.chart-pane-container {
  width: 100%;
}

/* --- Top nav links (Strategies, Phase 5/6) --- */

.nav-link {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.4rem 0.2rem;
}

.nav-link:hover {
  color: var(--text);
  text-decoration: none;
}

/* --- Strategy builder (Phase 5) --- */

.strategy-list-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--surface-alt);
}

.strategy-list-item:last-child {
  border-bottom: none;
}

.builder-group {
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 0.9rem;
  margin-bottom: 0.9rem;
  background: var(--surface-sunken);
}

.builder-group-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.builder-condition-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr auto auto 1fr;
  grid-gap: 0.5rem;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
}

@media (max-width: 760px) {
  .builder-condition-row {
    grid-template-columns: 1fr;
  }
}

.builder-condition-row select,
.builder-condition-row input {
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--panel-border);
  background: var(--surface-raised);
  color: var(--text);
  font-size: 0.85rem;
}

.builder-remove-btn {
  background: none;
  border: 1px solid var(--notice-error-border);
  color: var(--notice-error-text);
  border-radius: 6px;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  font-size: 0.75rem;
}

.builder-add-btn,
.form-submit-btn {
  background: var(--accent);
  color: var(--accent-contrast);
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
}

.builder-add-btn {
  background: var(--surface-alt);
  color: var(--text);
  border: 1px solid var(--panel-border);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.8rem;
}

.form-field label {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.form-field input,
.form-field select {
  padding: 0.5rem 0.6rem;
  border-radius: 6px;
  border: 1px solid var(--panel-border);
  background: var(--surface-sunken);
  color: var(--text);
  font-size: 0.9rem;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 0.75rem 1rem;
  gap: 0.75rem 1rem;
}

@media (max-width: 760px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* --- Backtest results (Phase 6) --- */

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 0.75rem;
  gap: 0.75rem;
}

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

.metric-tile {
  background: var(--surface-sunken);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
}

.metric-tile .metric-tile-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.metric-tile .metric-tile-value {
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 0.2rem;
}

.integrity-block {
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  background: var(--surface-raised);
  margin-bottom: 1.25rem;
}

.integrity-block h2 {
  color: var(--accent);
}

.integrity-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

.integrity-check-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid var(--panel-border);
}

.integrity-check-pill.status-pass {
  color: var(--up);
  border-color: rgba(63, 185, 80, 0.4);
  background: rgba(63, 185, 80, 0.12);
}

.integrity-check-pill.status-fail {
  color: var(--down);
  border-color: rgba(248, 81, 73, 0.4);
  background: rgba(248, 81, 73, 0.12);
}

.integrity-check-pill.status-na {
  color: var(--text-muted);
  background: var(--surface-alt);
}

.assumptions-note {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--panel-border);
}

.overfitting-banner {
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--notice-border);
  background: var(--notice-bg);
}

.overfitting-banner.risk-high {
  border-color: var(--notice-error-border);
  background: var(--notice-error-bg);
  color: var(--notice-error-text);
}

.overfitting-banner.risk-moderate {
  border-color: var(--warn);
}

.overfitting-banner .overfitting-title {
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.trade-row-loss {
  color: var(--down);
}

.trade-row-win {
  color: var(--up);
}

.universe-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  max-height: 220px;
  overflow-y: auto;
  padding: 0.5rem;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: var(--surface-sunken);
}

.universe-chip {
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: var(--surface-alt);
  color: var(--text-muted);
  font-size: 0.78rem;
  cursor: pointer;
}

.universe-chip.selected {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
  font-weight: 600;
}

/* ============================================================
   Market Pulse dashboard (home page, above the instrument table)
   ============================================================ */

.pulse-section {
  margin-bottom: 1rem;
}

.pulse-heading {
  margin: 0 0 0.6rem 0;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.pulse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  grid-gap: 0.85rem;
  gap: 0.85rem;
}

.pulse-card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  min-width: 0;
}

.pulse-card h3 {
  margin: 0;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.pulse-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  flex-wrap: wrap;
}

/* --- Nifty mini chart --- */

.nifty-mini-card {
  grid-column: span 2;
  min-width: 320px;
}

.nifty-mini-price {
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
  margin-top: 0.15rem;
}

.nifty-mini-chart {
  width: 100%;
  height: 140px;
}

/* --- Breadth gauge: plain horizontal bars, value always printed as
   text alongside the fill (dataviz skill: color is never the only
   signal for a magnitude metric). --- */

.breadth-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.5rem 0;
}

.breadth-label {
  flex: 0 0 92px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.breadth-track {
  flex: 1 1 auto;
  height: 10px;
  border-radius: 999px;
  background: var(--surface-alt);
  overflow: hidden;
}

.breadth-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.2s ease;
}

.breadth-fill.breadth-up {
  background: var(--up);
}

.breadth-fill.breadth-down {
  background: var(--down);
}

.breadth-fill.breadth-flat {
  background: var(--text-muted);
}

.breadth-value {
  flex: 0 0 48px;
  text-align: right;
  font-size: 0.82rem;
  font-weight: 600;
}

.breadth-value.up {
  color: var(--up);
}

.breadth-value.down {
  color: var(--down);
}

/* --- Research Score distribution bar chart --- */

.score-dist-chart {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.75rem;
  height: 260px;
  padding-top: 0.5rem;
  max-width: 540px;
  margin: 0 auto;
}

.score-dist-bar {
  flex: 1 1;
  max-width: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  border-radius: 4px;
  min-width: 0;
}

.score-dist-bar:hover {
  background: var(--surface-alt);
}

.score-dist-bar.active {
  background: var(--surface-alt);
  outline: 1px solid var(--accent);
}

.score-dist-count {
  font-size: 0.72rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
}

.score-dist-fill {
  width: 60%;
  border-radius: 3px 3px 0 0;
  min-height: 2px;
}

.score-dist-card {
  grid-column: span 2;
  min-width: 320px;
}

.score-dist-label {
  font-size: 0.62rem;
  color: var(--text-muted);
  margin-top: 0.3rem;
  text-align: center;
  line-height: 1.15;
  white-space: normal;
  word-break: break-word;
  max-width: 100%;
}

.link-button {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  padding: 0;
  font-size: inherit;
  text-decoration: underline;
}

.band-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 600;
}

.band-filter-chip button {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  font-size: 0.8rem;
  line-height: 1;
}

/* --- Sector performance heatmap/grid --- */

.sector-heatmap-card {
  grid-column: span 2;
}

.sector-head-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.sector-sort-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--surface-alt);
  padding: 0.2rem 0.35rem;
  border-radius: 6px;
  border: 1px solid var(--panel-border);
}

.sector-sort-label {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 0.2rem;
  font-weight: 600;
}

.sector-sort-pill {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  line-height: 1.2;
  transition: all 0.15s ease;
}

.sector-sort-pill:hover {
  color: var(--text);
  background: var(--surface-raised);
}

.sector-sort-pill.active {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
  font-weight: 700;
}

.sector-heatmap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  grid-gap: 0.4rem;
  gap: 0.4rem;
}

.sector-cell {
  display: block;
  width: 100%;
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
  min-width: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.sector-cell:hover {
  border-color: var(--text-muted);
}

.sector-cell.active {
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}

.sector-cell-name {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.25rem;
}

.sector-cell-metrics {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  font-weight: 700;
}

.sector-cell-footnote {
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

/* --- Top Movers (gainers/losers) widget --- */

.movers-card {
  grid-column: span 2;
  min-width: 420px;
}

.movers-columns {
  display: flex;
  gap: 1.5rem;
}

.movers-list {
  flex: 1 1 50%;
  min-width: 0;
}

.movers-list h4 {
  margin: 0 0 0.3rem 0;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.movers-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.movers-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0.3rem;
  border-radius: 4px;
  cursor: pointer;
}

.movers-row:hover {
  background: var(--surface-alt);
}

.movers-symbol {
  font-weight: 600;
  font-size: 0.82rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.movers-row .day-change {
  flex-shrink: 0;
}

/* --- Day change % (reused by the home table's "Day %" column, the
   sector heatmap, and the top movers widget) --- */

.day-change.up {
  color: var(--up);
}

.day-change.down {
  color: var(--down);
}

/* --- ML Forecast Performance Widget --- */

.ml-perf-card {
  grid-column: 1 / -1;
  min-width: 0;
}

.ml-perf-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 0.75rem;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.ml-perf-kpi-card {
  background: var(--surface-alt, #1e293b);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 0.65rem 0.85rem;
  display: flex;
  flex-direction: column;
}

.ml-perf-kpi-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.ml-perf-kpi-val {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.2;
}

.ml-perf-kpi-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

.ml-perf-tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 0.5rem;
  gap: 0.5rem;
}

.ml-perf-tier-card {
  background: var(--surface-alt, #1e293b);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 0.45rem 0.65rem;
}

.ml-perf-tab-btn {
  background: var(--surface-alt);
  border: 1px solid var(--panel-border);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ml-perf-tab-btn:hover {
  background: var(--panel-border);
  color: var(--text);
}

.ml-perf-tab-btn.active {
  background: var(--accent, #3b82f6);
  border-color: var(--accent, #3b82f6);
  color: #fff;
}

.ml-perf-table-wrapper {
  overflow-x: auto;
  border-radius: 6px;
  border: 1px solid var(--panel-border);
}

.ml-perf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.ml-perf-table th {
  background: var(--surface-alt, #1e293b);
  padding: 0.5rem 0.75rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 600;
  border-bottom: 1px solid var(--panel-border);
}

.ml-perf-table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--panel-border);
}

.ml-perf-table tr:last-child td {
  border-bottom: none;
}

.ml-perf-row {
  cursor: pointer;
  transition: background 0.1s ease;
}

.ml-perf-row:hover {
  background: var(--surface-alt, #1e293b);
}

/* --- Market Table Pagination --- */

.market-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.85rem 0.4rem 0.35rem;
  border-top: 1px solid var(--panel-border);
  margin-top: 0.5rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.pagination-info {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.pagination-info strong {
  color: var(--text);
  font-weight: 600;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1rem;
  height: 2.1rem;
  padding: 0 0.55rem;
  border-radius: 6px;
  border: 1px solid var(--panel-border);
  background: var(--surface-sunken);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.12s ease;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.pagination-btn:hover:not(:disabled) {
  background: var(--surface-raised);
  border-color: var(--accent);
  color: var(--accent);
}

.pagination-btn.active {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
  font-weight: 700;
}

.pagination-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.pagination-ellipsis {
  padding: 0 0.25rem;
  color: var(--text-muted);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.pagination-page-size {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pagination-select {
  padding: 0.35rem 0.65rem;
  border-radius: 6px;
  border: 1px solid var(--panel-border);
  background: var(--surface-sunken);
  color: var(--text);
  font-size: 0.8rem;
  cursor: pointer;
}

.pagination-select:focus {
  outline: none;
  border-color: var(--accent);
}

/* ============================================================
   HEALTH DIAGNOSTICS & FORENSICS SUITE
   ============================================================ */

.health-diagnostics-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.health-panel {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.shield-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
}

.shield-clean {
  background: var(--up-soft);
  color: var(--up);
  border: 1px solid var(--up-border);
}

.shield-alert {
  background: var(--warn-soft);
  color: var(--warn);
  border: 1px solid var(--warn-border);
}

.forensic-alert-box {
  padding: 0.9rem 1.1rem;
  background: var(--warn-soft);
  border: 1px solid var(--warn-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.forensic-alert-title {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--warn);
}

.forensic-alert-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.forensic-alert-item {
  font-size: 0.82rem;
  color: var(--text);
  line-height: 1.4;
}

.health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
}

.health-card {
  padding: 1.1rem;
  background: var(--surface-sunken);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.health-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.health-card-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.health-metric-hero {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}

.health-hero-value {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
}

.health-hero-max,
.health-hero-sub {
  font-size: 1rem;
  color: var(--text-muted);
  font-weight: 500;
}

.piotroski-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.mini-chip {
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  background: var(--surface-alt);
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
}

.toggle-text-btn {
  background: none;
  border: none;
  padding: 0.2rem 0;
  font-size: 0.78rem;
  color: var(--accent);
  cursor: pointer;
  text-align: left;
  font-weight: 600;
}

.toggle-text-btn:hover {
  text-decoration: underline;
}

.piotroski-checklist {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.4rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--panel-border);
}

.checklist-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.78rem;
  padding: 0.25rem 0;
}

.check-icon {
  font-weight: 800;
  font-size: 0.85rem;
}

.check-info {
  flex: 1 1;
}

.check-name {
  font-weight: 600;
  color: var(--text);
}

.check-cat {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 400;
}

.check-desc {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.check-val {
  font-weight: 600;
  white-space: nowrap;
}

.z-scale-track {
  display: flex;
  width: 100%;
  height: 22px;
  border-radius: 4px;
  overflow: hidden;
  font-size: 0.68rem;
  font-weight: 600;
  text-align: center;
  line-height: 22px;
}

.z-scale-segment {
  flex: 1 1;
}

.z-distress {
  background: var(--down-soft);
  color: var(--down);
}

.z-grey {
  background: var(--warn-soft);
  color: var(--warn);
}

.z-safe {
  background: var(--up-soft);
  color: var(--up);
}

.health-desc {
  line-height: 1.4;
}

.eq-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 0.6rem;
  gap: 0.6rem;
}

.eq-stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.eq-label {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.eq-val {
  font-size: 0.92rem;
}

/* DuPont 3-Way Box */
.dupont-box {
  padding: 1rem 1.25rem;
  background: var(--surface-sunken);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.dupont-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.dupont-title {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text);
}

.dupont-driver {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.dupont-flow {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.5rem 0;
}

.dupont-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.15rem;
}

.dupont-step-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
}

.dupont-step-val {
  font-size: 1.35rem;
  font-weight: 700;
}

.dupont-sublabel {
  font-size: 0.68rem;
  color: var(--text-muted);
}

.dupont-op {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-muted);
}

/* Smart Money Ownership Styles */
.smart-money-banner {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  background: var(--surface-sunken);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
}

.banner-icon {
  font-size: 1.4rem;
}

.banner-text {
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.4;
}

.ownership-metric-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 0.85rem;
  gap: 0.85rem;
}

.ownership-stat-card {
  padding: 0.9rem;
  background: var(--surface-sunken);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ownership-stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
}

.ownership-stat-val {
  font-size: 1.3rem;
  font-weight: 700;
}

.ownership-stat-chg {
  font-size: 0.76rem;
  font-weight: 600;
}

.sh-history-table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
}

.sh-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.sh-history-table th {
  padding: 0.6rem 0.8rem;
  text-align: left;
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-weight: 600;
  border-bottom: 1px solid var(--panel-border);
}

.sh-history-table td {
  padding: 0.55rem 0.8rem;
  border-bottom: 1px solid var(--panel-border);
}

.sh-history-table tr:last-child td {
  border-bottom: none;
}

/* Technical Structure Styles */
.tech-hero-banner {
  padding: 0.75rem 1rem;
  background: var(--surface-sunken);
  border-radius: 8px;
  border-left: 3px solid var(--accent);
}

.tech-summary {
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.45;
  margin: 0;
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
}

.dma-stack-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dma-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--panel-border);
}

.dma-row:last-child {
  border-bottom: none;
}

.dma-label {
  color: var(--text-muted);
}

.dma-val {
  font-weight: 600;
}

.dma-diff {
  font-weight: 600;
}

.vol-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.range-slider-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.range-slider-head {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.range-slider-track {
  position: relative;
  width: 100%;
  height: 8px;
  background: var(--surface-alt);
  border-radius: 999px;
  overflow: visible;
}

.range-slider-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}

.range-slider-thumb {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  background: var(--accent-contrast);
  border: 2px solid var(--accent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.range-distances {
  display: flex;
  justify-content: space-between;
}

/* Stock Page Tab Navigation */
.stock-tabs-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.25rem 0 1rem 0;
  border-bottom: 1px solid var(--panel-border);
  padding-bottom: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.stock-tabs-nav::-webkit-scrollbar {
  display: none;
}

.stock-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  white-space: nowrap;
}

.stock-tab-btn:hover {
  background: var(--surface-sunken);
  color: var(--text);
}

.stock-tab-btn.active {
  background: var(--surface-sunken);
  border-color: var(--panel-border);
  color: var(--accent);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.stock-tab-badge {
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--surface-alt);
  color: var(--text-muted);
}

.stock-tab-badge.up {
  background: var(--up-soft);
  color: var(--up);
}

.stock-tab-badge.warn {
  background: var(--warn-soft);
  color: var(--warn);
}

.stock-tab-badge.down {
  background: var(--down-soft);
  color: var(--down);
}

/* --- Visual Sort & Filter Pills Bar --- */

.sort-filter-bar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  margin-bottom: 0.65rem;
  background: var(--surface-sunken);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  font-size: 0.8rem;
}

.sort-filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.sort-filter-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-right: 0.2rem;
  white-space: nowrap;
}

.sort-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  background: var(--surface-alt);
  border: 1px solid var(--panel-border);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.12s ease;
}

.sort-pill:hover {
  border-color: var(--accent);
}

.sort-pill-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 4px;
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
}

.sort-pill-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  background: var(--surface-sunken);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s ease;
}

.sort-pill-toggle:hover {
  background: var(--panel);
  border-color: var(--accent);
}

.sort-pill-remove,
.filter-pill-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 0.15rem;
  font-size: 0.82rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  transition: color 0.12s ease;
}

.sort-pill-remove:hover,
.filter-pill-remove:hover {
  color: var(--down);
}

.sort-add-select {
  padding: 0.25rem 0.55rem;
  border-radius: 6px;
  border: 1px dashed var(--panel-border);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s ease;
}

.sort-add-select:hover {
  border-color: var(--accent);
  color: var(--text);
  background: var(--surface-alt);
}

.sort-reset-btn,
.filter-clear-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.74rem;
  padding: 0.1rem 0.35rem;
  text-decoration: underline;
  transition: color 0.12s ease;
  white-space: nowrap;
}

.sort-reset-btn:hover,
.filter-clear-btn:hover {
  color: var(--text);
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: var(--surface-alt);
  border: 1px solid var(--panel-border);
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 500;
}

.filter-pill:hover {
  border-color: var(--text-muted);
}

/* --- Stock Page Hero KPI Tiles --- */

.stock-hero-tiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: 0.75rem;
  gap: 0.75rem;
  margin: 0.75rem 0 1rem 0;
}

.stock-hero-tile {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 0.85rem 1.1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: border-color 0.12s ease;
}

.stock-hero-tile:hover {
  border-color: var(--text-muted);
}

.hero-tile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.45rem;
}

.hero-tile-title {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.hero-tile-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
}

.hero-tile-badge.badge-pass {
  background: rgba(47, 191, 113, 0.15);
  color: var(--up);
  border-color: rgba(47, 191, 113, 0.3);
}

.hero-tile-badge.badge-neutral {
  background: var(--surface-alt);
  color: var(--text-muted);
  border-color: var(--panel-border);
}

.hero-tile-badge.badge-rec {
  background: rgba(242, 169, 59, 0.15);
  color: var(--accent);
  border-color: rgba(242, 169, 59, 0.3);
}

.hero-tile-body {
  margin: 0.3rem 0 0.6rem 0;
}

.hero-tile-metric {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}

.hero-tile-value {
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
}

.hero-tile-subtext {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 600;
}

.hero-tile-status {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.hero-tile-status.status-pass {
  color: var(--up);
}

.hero-tile-status.status-fail {
  color: var(--text-muted);
}

.hero-tile-muted {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-muted);
}

.hero-upside-badge {
  font-size: 0.95rem;
  font-weight: 800;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
}

.hero-upside-badge.upside-up {
  color: var(--up);
  background: rgba(47, 191, 113, 0.12);
}

.hero-upside-badge.upside-down {
  color: var(--down);
  background: rgba(240, 73, 76, 0.12);
}

.hero-tile-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.76rem;
  border-top: 1px solid var(--surface-alt);
  padding-top: 0.45rem;
  margin-top: auto;
  color: var(--text-muted);
}

.hero-tile-pill {
  background: var(--surface-alt);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  color: var(--text);
  font-size: 0.72rem;
}

.hero-tile-detail {
  font-size: 0.74rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- About Company Section (Overview Tab) --- */

.about-company-panel {
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
}

.about-company-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}

.about-title-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.about-company-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
}

.about-badge-group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.about-sector-badge,
.about-industry-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--text);
  border: 1px solid var(--panel-border);
}

.about-sector-badge {
  color: var(--accent);
  background: rgba(242, 169, 59, 0.08);
  border-color: rgba(242, 169, 59, 0.25);
}

.about-website-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: 6px;
  background: var(--surface-alt);
  border: 1px solid var(--panel-border);
  color: var(--text);
  text-decoration: none;
  transition: all 0.12s ease;
}

.about-website-btn:hover {
  background: var(--surface-raised);
  border-color: var(--accent);
  color: var(--accent);
}

.ai-summary-box {
  background: rgba(242, 169, 59, 0.06);
  border: 1px solid rgba(242, 169, 59, 0.25);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.95rem;
}

.ai-summary-label {
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.ai-summary-text {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text);
  margin: 0;
  font-weight: 500;
}

.about-description-box {
  margin-bottom: 0.85rem;
}

.about-subheading {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 0.4rem 0;
}

.about-description-text {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 0.4rem 0;
}

.about-toggle-btn {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0;
  text-decoration: underline;
  transition: opacity 0.12s ease;
}

.about-toggle-btn:hover {
  opacity: 0.85;
}

.about-keypoints-box {
  border-top: 1px solid var(--surface-alt);
  padding-top: 0.75rem;
  margin-top: 0.75rem;
}

.about-keypoints-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  margin-bottom: 0.5rem;
}

.keypoints-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-left: 0.2rem;
}

.keypoint-item {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text);
}

.keypoint-bullet {
  color: var(--accent);
  font-weight: bold;
}

/* =========================================================================
   Topnav Navigation & AI Button Styles
   ========================================================================= */

.topnav-ai-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: linear-gradient(135deg, rgba(66, 133, 244, 0.12), rgba(168, 85, 247, 0.12));
  border: 1px solid rgba(66, 133, 244, 0.35);
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  transition: all 0.2s ease;
}

.topnav-ai-link:hover {
  background: linear-gradient(135deg, rgba(66, 133, 244, 0.24), rgba(168, 85, 247, 0.24));
  border-color: #4285f4;
  text-decoration: none;
  box-shadow: 0 0 12px rgba(66, 133, 244, 0.25);
}

.topnav-ai-icon {
  color: #4285f4;
  font-size: 0.95rem;
}

.topnav-ai-badge {
  font-size: 0.68rem;
  padding: 0.12rem 0.4rem;
  background: var(--surface-raised);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  color: var(--text-muted);
  font-family: var(--font-mono, monospace);
}

/* =========================================================================
   AI Analyst Chat Container & UI
   ========================================================================= */

.ai-page-container {
  max-width: 1040px;
  margin: 1.5rem auto 3rem;
  padding: 0 1rem;
}

.ai-analyst-container {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}

.ai-analyst-container.embedded {
  border-radius: 8px;
  box-shadow: none;
}

.ai-header-card {
  padding: 1.25rem 1.5rem;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--panel-border);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.ai-header-left {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.ai-badge-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.ai-title-badge {
  font-size: 1.15rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text);
  letter-spacing: -0.01em;
}

.ai-sparkle {
  color: #4285f4;
}

.ai-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.65rem;
  background: var(--surface-alt);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  font-size: 0.76rem;
  font-family: var(--font-mono, monospace);
  color: var(--text-muted);
}

.ai-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.ai-status-dot.online {
  background: var(--up);
  box-shadow: 0 0 6px var(--up);
}

.ai-status-dot.offline {
  background: var(--down);
}

.ai-subtitle {
  margin: 0;
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.ai-ticker-selector {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--surface-sunken);
  padding: 0.85rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
}

.ai-selector-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.ai-ticker-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.ai-ticker-pill {
  background: var(--surface-alt);
  border: 1px solid var(--panel-border);
  color: var(--text-muted);
  padding: 0.28rem 0.65rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ai-ticker-pill:hover {
  background: var(--surface-raised);
  color: var(--text);
  border-color: #4285f4;
}

.ai-ticker-pill.active {
  background: #4285f4;
  color: #fff;
  border-color: #4285f4;
}

.ai-custom-ticker-form {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.25rem;
}

.ai-ticker-input {
  flex: 1 1;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  font-size: 0.82rem;
  color: var(--text);
  outline: none;
}

.ai-ticker-input:focus {
  border-color: #4285f4;
}

.ai-ticker-submit-btn {
  background: var(--surface-raised);
  border: 1px solid var(--panel-border);
  padding: 0.4rem 0.85rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s ease;
}

.ai-ticker-submit-btn:hover {
  border-color: #4285f4;
  color: #4285f4;
}

.ai-active-stock-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(66, 133, 244, 0.08);
  border: 1px solid rgba(66, 133, 244, 0.25);
  padding: 0.55rem 0.9rem;
  border-radius: 6px;
  font-size: 0.85rem;
}

.ai-active-stock-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ai-stock-tag {
  font-weight: 700;
  color: #4285f4;
  letter-spacing: 0.03em;
}

.ai-stock-company {
  color: var(--text-muted);
}

.ai-context-toggle-btn {
  background: transparent;
  border: none;
  color: #4285f4;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

.ai-context-toggle-btn:hover {
  opacity: 0.85;
}

.ai-context-drawer {
  background: var(--surface-sunken);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  overflow: hidden;
}

.ai-context-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.85rem;
  background: var(--surface-alt);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid var(--panel-border);
}

.ai-db-live-tag {
  background: var(--up);
  color: #000;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.ai-context-pre {
  margin: 0;
  padding: 0.85rem;
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--text-muted);
  max-height: 220px;
  overflow-y: auto;
  white-space: pre-wrap;
}

/* Prompt Chips */
.ai-chips-bar {
  padding: 0.75rem 1.25rem;
  background: var(--panel);
  border-bottom: 1px solid var(--panel-border);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  overflow-x: auto;
}

.ai-chips-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.ai-chips-list {
  display: flex;
  gap: 0.45rem;
  overflow-x: auto;
}

.ai-prompt-chip {
  background: var(--surface-raised);
  border: 1px solid var(--panel-border);
  color: var(--text);
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ai-prompt-chip:hover:not(:disabled) {
  border-color: #4285f4;
  color: #4285f4;
  background: var(--surface-alt);
}

.ai-prompt-chip:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Messages Scroll */
.ai-messages-scroll {
  flex: 1 1;
  min-height: 340px;
  max-height: 520px;
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  background: var(--panel);
}

.ai-empty-state {
  text-align: center;
  padding: 2.5rem 1.5rem;
  margin: auto;
  max-width: 540px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.ai-empty-icon {
  font-size: 2.2rem;
  margin-bottom: 0.3rem;
}

.ai-empty-state h3 {
  margin: 0;
  font-size: 1.15rem;
  color: var(--text);
}

.ai-empty-state p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.ai-message-row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.ai-message-row.user-row {
  flex-direction: row-reverse;
}

.ai-message-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  background: var(--surface-raised);
  border: 1px solid var(--panel-border);
  flex-shrink: 0;
}

.ai-message-content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-width: 82%;
}

.ai-message-row.user-row .ai-message-content-wrapper {
  align-items: flex-end;
}

.ai-message-author {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
}

.ai-message-bubble {
  padding: 0.85rem 1.1rem;
  border-radius: 10px;
  font-size: 0.88rem;
  line-height: 1.55;
}

.ai-message-row.user-row .ai-message-bubble {
  background: #4285f4;
  color: #fff;
  border-bottom-right-radius: 2px;
  font-weight: 500;
}

.ai-message-row.assistant-row .ai-message-bubble {
  background: var(--surface-raised);
  border: 1px solid var(--panel-border);
  color: var(--text);
  border-bottom-left-radius: 2px;
}

.ai-markdown-render {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ai-md-h4 {
  margin: 0.4rem 0 0.2rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
}

.ai-md-h3 {
  margin: 0.5rem 0 0.25rem;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text);
}

.ai-md-bold-heading {
  font-weight: 700;
  color: #4285f4;
  margin-top: 0.35rem;
  font-size: 0.95rem;
}

.ai-md-strong {
  font-weight: 700;
  color: var(--text);
}

.ai-message-row.user-row .ai-md-strong {
  color: #fff;
  font-weight: 700;
}

.ai-md-code {
  font-family: var(--font-mono, monospace);
  background: var(--surface-alt);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-size: 0.85em;
  color: #4285f4;
  border: 1px solid var(--panel-border);
}

.ai-md-bullet {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  line-height: 1.45;
}

.ai-bullet-dot {
  color: #4285f4;
  font-weight: bold;
}

.ai-bullet-num {
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  color: #4285f4;
  min-width: 1.25rem;
  font-size: 0.85rem;
}

.ai-md-p {
  margin: 0;
}

.ai-md-em {
  font-style: italic;
  color: var(--text-muted);
}

.ai-md-hr {
  border: 0;
  border-top: 1px solid var(--panel-border);
  margin: 0.75rem 0;
  opacity: 0.6;
}

.ai-md-quote {
  margin: 0.4rem 0;
  padding: 0.35rem 0.75rem;
  border-left: 3px solid #4285f4;
  background: rgba(66, 133, 244, 0.08);
  border-radius: 0 4px 4px 0;
  font-style: italic;
  color: var(--text-muted);
}

.ai-md-table-wrapper {
  overflow-x: auto;
  margin: 0.65rem 0;
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  background: var(--surface-alt);
}

.ai-md-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  text-align: left;
}

.ai-md-table th {
  padding: 0.45rem 0.65rem;
  background: rgba(66, 133, 244, 0.12);
  color: #8ab4f8;
  font-weight: 700;
  border-bottom: 1px solid var(--panel-border);
  white-space: nowrap;
}

.ai-md-table td {
  padding: 0.4rem 0.65rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--text);
  white-space: nowrap;
}

.ai-md-table tr:last-child td {
  border-bottom: none;
}

.ai-md-table tr:hover td {
  background: rgba(255, 255, 255, 0.04);
}

.ai-md-spacer {
  height: 0.4rem;
}

.ai-typing-indicator {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.2rem;
}

.ai-typing-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
  margin-left: 0.25rem;
}

.ai-cursor-pulse {
  display: inline-block;
  color: #4285f4;
  margin-left: 2px;
  animation: cursorBlink 0.8s infinite;
}

@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.ai-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: aiPulse 1.2s infinite ease-in-out;
}

.ai-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.ai-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes aiPulse {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

.ai-error-banner {
  padding: 0.65rem 1.25rem;
  background: var(--notice-error-bg);
  border-top: 1px solid var(--notice-error-border);
  color: var(--notice-error-text);
  font-size: 0.82rem;
}

/* Input Area */
.ai-input-footer {
  padding: 0.9rem 1.25rem;
  background: var(--surface-raised);
  border-top: 1px solid var(--panel-border);
}

.ai-input-box-wrapper {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.15s ease;
}

.ai-input-box-wrapper:focus-within {
  border-color: #4285f4;
  box-shadow: 0 0 0 1px #4285f4;
}

.ai-chat-textarea {
  width: 100%;
  background: transparent;
  border: none;
  padding: 0.75rem 0.85rem;
  font-size: 0.88rem;
  color: var(--text);
  resize: none;
  outline: none;
  font-family: inherit;
}

.ai-input-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  background: var(--surface-alt);
  border-top: 1px solid var(--panel-border);
}

.ai-clear-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.78rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

.ai-clear-btn:hover {
  color: var(--text);
  background: var(--surface-raised);
}

.ai-send-btn {
  background: #4285f4;
  color: #fff;
  border: none;
  padding: 0.4rem 0.95rem;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.ai-send-btn:hover:not(:disabled) {
  opacity: 0.9;
}

.ai-send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ==========================================================================
   Fundamental Quality & Multibagger Checklist Styles
   ========================================================================== */

.checklist-container {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.checklist-header-card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.checklist-header-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.checklist-distribution-pills {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.chk-dist-pill {
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--surface-alt);
  color: var(--text);
}

.chk-dist-pill.exceptional {
  background: rgba(242, 169, 59, 0.12);
  border-color: rgba(242, 169, 59, 0.4);
  color: var(--accent);
}

.chk-dist-pill.high {
  background: rgba(47, 191, 113, 0.12);
  border-color: rgba(47, 191, 113, 0.35);
  color: var(--up);
}

.chk-dist-pill.moderate {
  background: rgba(77, 163, 255, 0.12);
  border-color: rgba(77, 163, 255, 0.35);
  color: #4da3ff;
}

.checklist-controls-bar {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  padding-top: 0.5rem;
  border-top: 1px solid var(--panel-border);
}

.chk-search-input,
.chk-sector-select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  border-radius: 6px;
  border: 1px solid var(--panel-border);
  background: var(--surface-alt);
  color: var(--text);
  outline: none;
  font-family: inherit;
}

.chk-search-input:focus,
.chk-sector-select:focus {
  border-color: var(--accent);
}

/* Quality % Badge */
.chk-quality-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.55rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.15;
  border: 1px solid transparent;
}

.chk-quality-sub {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.9;
}

.chk-quality-badge.band-exceptional {
  background: rgba(242, 169, 59, 0.16);
  border-color: rgba(242, 169, 59, 0.45);
  color: var(--accent);
}

.chk-quality-badge.band-high {
  background: rgba(47, 191, 113, 0.14);
  border-color: rgba(47, 191, 113, 0.4);
  color: var(--up);
}

.chk-quality-badge.band-moderate {
  background: rgba(77, 163, 255, 0.14);
  border-color: rgba(77, 163, 255, 0.4);
  color: #4da3ff;
}

/* Progress bar inside cells */
.chk-progress-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.chk-progress-bar {
  width: 60px;
  height: 5px;
  border-radius: 3px;
  background: var(--surface-alt);
  overflow: hidden;
}

.chk-progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.chk-progress-fill.band-exceptional {
  background: var(--accent);
}

.chk-progress-fill.band-high {
  background: var(--up);
}

.chk-progress-fill.band-moderate {
  background: #4da3ff;
}

/* Mini pills in table */
.chk-pills-row {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  flex-wrap: nowrap;
}

.chk-mini-pill {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: default;
}

.chk-mini-pill.passed {
  background: rgba(47, 191, 113, 0.12);
  border-color: rgba(47, 191, 113, 0.3);
  color: var(--up);
}

.chk-mini-pill.failed {
  background: rgba(240, 73, 76, 0.08);
  border-color: rgba(240, 73, 76, 0.2);
  color: var(--text-muted);
  opacity: 0.65;
}

.btn-view-chk {
  background: var(--surface-alt);
  border: 1px solid var(--panel-border);
  color: var(--text);
  padding: 0.3rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-view-chk:hover {
  background: var(--surface-raised);
  border-color: var(--accent);
  color: var(--accent);
}

/* Checklist Modal */
.chk-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.chk-modal-card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

.chk-modal-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--panel-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface-raised);
}

.chk-modal-close {
  background: none;
  border: 1px solid var(--panel-border);
  color: var(--text-muted);
  font-size: 1rem;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.chk-modal-close:hover {
  border-color: var(--text);
  color: var(--text);
}

.chk-modal-body {
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
  flex: 1 1 auto;
}

.chk-items-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.chk-item-card {
  border-radius: 8px;
  padding: 1rem;
  border: 1px solid var(--panel-border);
  background: var(--surface-alt);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.chk-item-card.passed {
  border-left: 4px solid var(--up);
}

.chk-item-card.failed {
  border-left: 4px solid var(--down);
}

.chk-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chk-status-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
}

.chk-status-icon.pass {
  background: rgba(47, 191, 113, 0.2);
  color: var(--up);
}

.chk-status-icon.fail {
  background: rgba(240, 73, 76, 0.2);
  color: var(--down);
}

.chk-item-rank {
  font-size: 0.65rem;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  display: block;
}

.chk-item-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
}

.chk-status-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.chk-status-badge.pass {
  background: rgba(47, 191, 113, 0.15);
  color: var(--up);
  border: 1px solid rgba(47, 191, 113, 0.35);
}

.chk-status-badge.fail {
  background: rgba(240, 73, 76, 0.12);
  color: var(--down);
  border: 1px solid rgba(240, 73, 76, 0.25);
}

.chk-item-desc {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.chk-item-evidence {
  background: var(--surface-sunken);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  border: 1px solid var(--panel-border);
}

.chk-evidence-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent);
  letter-spacing: 0.03em;
}

.chk-evidence-text {
  color: var(--text);
  line-height: 1.35;
}

.chk-modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--panel-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface-raised);
}

.btn-link-stock {
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 700;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.btn-link-stock:hover {
  opacity: 0.9;
}

.btn-close-secondary {
  background: var(--surface-alt);
  color: var(--text);
  border: 1px solid var(--panel-border);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
}

.btn-close-secondary:hover {
  background: var(--surface-raised);
}


/* Individual Stock Page Checklist Panel */
.stock-checklist-panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin-top: 1rem;
}

.stock-chk-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--panel-border);
  margin-bottom: 1.25rem;
}

.stock-chk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
}


/* =========================================================================
   AI Alpha Hub & Multi-Factor Alpha Picks Tab Styles
   ========================================================================= */

.ai-hub-container {
  max-width: 1240px;
  margin: 1.5rem auto 3.5rem;
  padding: 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.ai-hub-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--panel-border);
}

.ai-hub-header-left {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.ai-hub-title-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.ai-hub-main-title {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ai-hub-status-tag {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: rgba(47, 191, 113, 0.15);
  color: var(--up);
  border: 1px solid rgba(47, 191, 113, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ai-hub-subtitle {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.ai-nav-tabs-wrapper {
  display: flex;
  align-items: center;
  background: var(--surface-sunken);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 4px;
  gap: 4px;
}

.ai-nav-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  background: transparent;
  color: var(--text-muted);
  transition: all 0.15s ease;
}

.ai-nav-tab-btn:hover {
  color: var(--text);
  background: var(--surface-alt);
}

.ai-nav-tab-btn.active {
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.ai-nav-count-badge {
  font-size: 0.7rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.2);
  color: inherit;
  font-weight: 800;
}

.ai-nav-tab-btn.active .ai-nav-count-badge {
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
}

/* Banner Card */
.ai-alpha-banner {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
}

.ai-alpha-banner-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.ai-banner-meta-pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.ai-meta-pill {
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0.22rem 0.65rem;
  border-radius: 6px;
  background: var(--surface-alt);
  color: var(--text);
  border: 1px solid var(--panel-border);
}

.ai-meta-pill.primary {
  background: rgba(242, 169, 59, 0.12);
  color: var(--accent);
  border-color: rgba(242, 169, 59, 0.3);
}

.ai-meta-pill.model {
  background: rgba(66, 133, 244, 0.12);
  color: #4285f4;
  border-color: rgba(66, 133, 244, 0.3);
}

.ai-banner-heading {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
}

.ai-banner-desc {
  margin: 0.4rem 0 0;
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 820px;
}

.ai-banner-desc strong {
  color: var(--text);
}

.btn-trigger-ai-refresh {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.25rem;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 700;
  font-size: 0.88rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(242, 169, 59, 0.25);
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.btn-trigger-ai-refresh:hover:not(:disabled) {
  opacity: 0.92;
  transform: translateY(-1px);
}

.btn-trigger-ai-refresh:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.ai-macro-box {
  background: rgba(66, 133, 244, 0.06);
  border: 1px solid rgba(66, 133, 244, 0.2);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text);
}

.ai-macro-label {
  font-weight: 700;
  color: #4285f4;
  margin-right: 0.4rem;
}

/* 4 Factor Pillars Grid */
.ai-pillars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
}

.ai-pillar-card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transition: border-color 0.15s ease;
}

.ai-pillar-card:hover {
  border-color: var(--text-muted);
}

.ai-pillar-title {
  font-size: 0.88rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.ai-pillar-title.momentum { color: #38bdf8; }
.ai-pillar-title.value { color: var(--accent); }
.ai-pillar-title.quality { color: var(--up); }
.ai-pillar-title.revisions { color: var(--purple); }

.ai-pillar-desc {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.45;
}

/* Filter Toolbar */
.ai-filter-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--panel-border);
}

.ai-filter-pills-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.ai-filter-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-right: 0.25rem;
}

.ai-filter-btn {
  padding: 0.35rem 0.8rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid var(--panel-border);
  background: var(--surface-alt);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.ai-filter-btn:hover {
  color: var(--text);
  border-color: var(--text-muted);
}

.ai-filter-btn.active {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}

.ai-count-indicator {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.ai-count-indicator strong {
  color: var(--text);
}

/* Stock Cards Stack */
.ai-picks-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ai-pick-card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.ai-pick-card.exceptional {
  border-color: rgba(242, 169, 59, 0.4);
}

.ai-pick-card:hover {
  border-color: var(--accent);
}

/* Card Header */
.ai-pick-card-header {
  padding: 1.15rem 1.4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.ai-pick-identity {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.ai-rank-badge {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono, monospace);
  font-size: 1.15rem;
  font-weight: 900;
  flex-shrink: 0;
}

.ai-rank-badge.rank-1 {
  background: linear-gradient(135deg, #fcd34d, #f59e0b, #b45309);
  color: #1a1a1a;
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.35);
}

.ai-rank-badge.rank-2 {
  background: linear-gradient(135deg, #f8fafc, #cbd5e1, #64748b);
  color: #0f172a;
}

.ai-rank-badge.rank-3 {
  background: linear-gradient(135deg, #d97706, #92400e, #451a03);
  color: #ffffff;
}

.ai-rank-badge.rank-other {
  background: var(--surface-raised);
  border: 1px solid var(--panel-border);
  color: var(--text);
}

.ai-stock-naming {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.ai-symbol-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ai-stock-symbol-link {
  font-family: var(--font-mono, monospace);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text);
  text-decoration: none;
  transition: color 0.15s ease;
}

.ai-stock-symbol-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

.ai-sector-tag {
  font-size: 0.72rem;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  background: var(--surface-alt);
  color: var(--text-muted);
  border: 1px solid var(--panel-border);
}

.ai-conviction-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.ai-conviction-badge.exceptional {
  background: rgba(242, 169, 59, 0.15);
  color: var(--accent);
  border: 1px solid rgba(242, 169, 59, 0.35);
}

.ai-conviction-badge.high {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.ai-company-fullname {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Card Header Right: Price & Score */
.ai-pick-metrics {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.ai-metric-group {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
}

.ai-metric-caption {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 600;
}

.ai-price-display {
  font-family: var(--font-mono, monospace);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text);
}

.ai-score-display {
  font-family: var(--font-mono, monospace);
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--up);
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.ai-score-max {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
}

.ai-expand-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--text-muted);
  transition: transform 0.2s ease, background 0.15s ease;
}

.ai-expand-icon.expanded {
  transform: rotate(180deg);
  color: var(--accent);
}

/* Thesis Callout */
.ai-thesis-bar {
  background: var(--surface-sunken);
  border-top: 1px solid var(--panel-border);
  padding: 0.85rem 1.4rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text);
}

.ai-thesis-highlight {
  font-weight: 700;
  color: var(--accent);
  margin-right: 0.35rem;
}

/* Expanded Card Body */
.ai-expanded-body {
  border-top: 1px solid var(--panel-border);
  background: var(--surface-raised);
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* 4 Factor Breakdown Sub-Cards */
.ai-factors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
}

.ai-factor-detail-card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ai-factor-detail-card.momentum { border-left: 3px solid #38bdf8; }
.ai-factor-detail-card.value { border-left: 3px solid var(--accent); }
.ai-factor-detail-card.quality { border-left: 3px solid var(--up); }
.ai-factor-detail-card.revisions { border-left: 3px solid var(--purple); }

.ai-factor-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ai-factor-card-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
}

.ai-factor-card-val {
  font-family: var(--font-mono, monospace);
  font-size: 0.88rem;
  font-weight: 800;
}

.ai-factor-card-val.momentum { color: #38bdf8; }
.ai-factor-card-val.value { color: var(--accent); }
.ai-factor-card-val.quality { color: var(--up); }
.ai-factor-card-val.revisions { color: var(--purple); }

.ai-factor-subvalues {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.74rem;
  color: var(--text-muted);
}

.ai-factor-subvalues strong {
  color: var(--text);
}

.ai-factor-card-reasoning {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-muted);
}

/* Risk & Invalidation Controls Grid */
.ai-controls-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  grid-gap: 1.25rem;
  gap: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--panel-border);
}

.ai-control-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ai-control-heading {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ai-control-heading.catalysts { color: var(--up); }
.ai-control-heading.risks { color: var(--down); }
.ai-control-heading.invalidation { color: var(--accent); }

.ai-bullet-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.ai-bullet-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.ai-bullet-item span.icon-good { color: var(--up); flex-shrink: 0; font-weight: 700; }
.ai-bullet-item span.icon-warn { color: var(--warn); flex-shrink: 0; font-weight: 700; }

.ai-invalidation-card {
  background: var(--surface-sunken);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.75rem;
}

.ai-inval-price {
  font-family: var(--font-mono, monospace);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--down);
}

.ai-inval-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.btn-open-stock-full {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: var(--surface-alt);
  border: 1px solid var(--panel-border);
  color: var(--text);
  padding: 0.45rem 0.9rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.15s ease;
}

.btn-open-stock-full:hover {
  background: var(--surface-raised);
  border-color: var(--accent);
  color: var(--accent);
}

.ai-skeleton-card {
  height: 110px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  opacity: 0.6;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.3; }
}