:root,
[data-theme="light"] {
  --tv-bg: #f0f3fa;
  --tv-surface: #ffffff;
  --tv-surface-2: #f8fafc;
  --tv-head: #f4f7fb;
  --tv-text: #131722;
  --tv-muted: #5d6675;
  --tv-faint: #8a94a6;
  --tv-line: #d9e1ec;
  --tv-line-strong: #c5cfdd;
  --tv-blue: #2962ff;
  --tv-blue-hover: #1e53e5;
  --tv-blue-soft: rgba(41, 98, 255, .12);
  --tv-green: #089981;
  --tv-red: #f23645;
  --tv-yellow: #f5a623;
  --tv-shadow: 0 1px 2px rgba(19, 23, 34, .04), 0 8px 24px rgba(19, 23, 34, .06);
  --bg: var(--tv-bg);
  --bg-panel: var(--tv-surface);
  --bg-elev: var(--tv-surface);
  --bg-head: var(--tv-head);
  --text: var(--tv-text);
  --text-muted: var(--tv-muted);
  --text-faint: var(--tv-faint);
  --line: var(--tv-line);
  --line-strong: var(--tv-line-strong);
  --accent: var(--tv-blue);
  --accent-strong: var(--tv-blue-hover);
  --accent-soft: var(--tv-blue-soft);
  --bull: var(--tv-red);
  --bear: var(--tv-green);
  --neutral: var(--tv-yellow);
  --chip: var(--tv-surface-2);
  --shadow: var(--tv-shadow);
  --app-bg: var(--tv-bg);
  --app-surface: var(--tv-surface);
  --app-surface-raised: var(--tv-surface);
  --app-subtle: var(--tv-surface-2);
  --app-head: var(--tv-head);
  --app-ink: var(--tv-text);
  --app-muted: var(--tv-muted);
  --app-faint: var(--tv-faint);
  --app-border: var(--tv-line);
  --app-border-strong: var(--tv-line-strong);
  --app-primary: var(--tv-blue);
  --app-primary-hover: var(--tv-blue-hover);
  --app-row-hover: rgba(41, 98, 255, .06);
  --app-shadow: var(--tv-shadow);
  --rh-bg: var(--tv-bg);
  --rh-surface: var(--tv-surface);
  --rh-surface-soft: var(--tv-surface-2);
  --rh-surface-hover: #eef4ff;
  --rh-ink: var(--tv-text);
  --rh-muted: var(--tv-muted);
  --rh-faint: var(--tv-faint);
  --rh-line: var(--tv-line);
  --rh-line-strong: var(--tv-line-strong);
}

[data-theme="dark"] {
  --tv-bg: #131722;
  --tv-surface: #1e222d;
  --tv-surface-2: #252a36;
  --tv-head: #202530;
  --tv-text: #d1d4dc;
  --tv-muted: #9598a1;
  --tv-faint: #6a7180;
  --tv-line: #2a2e39;
  --tv-line-strong: #363c4e;
  --tv-blue: #2962ff;
  --tv-blue-hover: #3d73ff;
  --tv-blue-soft: rgba(41, 98, 255, .18);
  --tv-green: #089981;
  --tv-red: #f23645;
  --tv-yellow: #f5a623;
  --tv-shadow: 0 16px 34px rgba(0, 0, 0, .28);
  --bg: var(--tv-bg);
  --bg-panel: var(--tv-surface);
  --bg-elev: var(--tv-surface);
  --bg-head: var(--tv-head);
  --text: var(--tv-text);
  --text-muted: var(--tv-muted);
  --text-faint: var(--tv-faint);
  --line: var(--tv-line);
  --line-strong: var(--tv-line-strong);
  --accent: var(--tv-blue);
  --accent-strong: var(--tv-blue-hover);
  --accent-soft: var(--tv-blue-soft);
  --bull: var(--tv-red);
  --bear: var(--tv-green);
  --neutral: var(--tv-yellow);
  --chip: var(--tv-surface-2);
  --shadow: var(--tv-shadow);
  --app-bg: var(--tv-bg);
  --app-surface: var(--tv-surface);
  --app-surface-raised: var(--tv-surface-2);
  --app-subtle: var(--tv-surface-2);
  --app-head: var(--tv-head);
  --app-ink: var(--tv-text);
  --app-muted: var(--tv-muted);
  --app-faint: var(--tv-faint);
  --app-border: var(--tv-line);
  --app-border-strong: var(--tv-line-strong);
  --app-primary: var(--tv-blue);
  --app-primary-hover: var(--tv-blue-hover);
  --app-row-hover: rgba(41, 98, 255, .14);
  --app-shadow: var(--tv-shadow);
  --rh-bg: var(--tv-bg);
  --rh-surface: var(--tv-surface);
  --rh-surface-soft: var(--tv-surface-2);
  --rh-surface-hover: #2a3142;
  --rh-ink: var(--tv-text);
  --rh-muted: var(--tv-muted);
  --rh-faint: var(--tv-faint);
  --rh-line: var(--tv-line);
  --rh-line-strong: var(--tv-line-strong);
}

body,
.app {
  background: var(--tv-bg) !important;
  color: var(--tv-text) !important;
  font-family: "PingFang SC", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: 0 !important;
}

.grain,
.app::before,
.app::after,
.chart-wrap::after,
.table-wrap::after,
.fear-greed-card::after {
  display: none !important;
}

.terminal-bar,
.control-group,
.table-wrap,
.chart-wrap,
.fear-greed-card,
.refresh-progress,
.regime-bar,
.ai-news-board,
.custom-summary,
.cfg-drawer,
.custom-drawer,
.theme-popover,
.sector-sentiment-panel,
.sector-sentiment-card {
  background: var(--tv-surface) !important;
  border: 1px solid var(--tv-line) !important;
  border-radius: 8px !important;
  box-shadow: var(--tv-shadow) !important;
  color: var(--tv-text) !important;
}

.terminal-bar,
.chart-head,
.cfg-head,
.table-wrap th,
.refresh-progress-head,
.sector-sentiment-head {
  background: var(--tv-head) !important;
  border-color: var(--tv-line) !important;
}

.tabs .tab,
.tab-group .tab,
.theme-toggle,
.tb-btn,
.cfg-reset,
.cfg-close,
.chart-price-color-toggle,
.chart-overlay-toggle,
.chart-search input,
.chart-search button,
.chart-link,
.header button.primary.secondary,
.header button.primary.ghost,
.run-actions .primary,
.run-actions .primary.secondary,
.run-actions .primary.ghost {
  min-height: 34px !important;
  border: 1px solid var(--tv-line) !important;
  border-radius: 6px !important;
  background: var(--tv-surface-2) !important;
  color: var(--tv-text) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}

.tabs .tab:hover,
.tab-group .tab:hover,
.theme-toggle:hover,
.tb-btn:hover,
.cfg-reset:hover,
.cfg-close:hover,
.chart-price-color-toggle:hover,
.chart-overlay-toggle:hover,
.chart-search button:hover:not(:disabled),
.chart-link:hover,
.header button.primary.secondary:hover,
.header button.primary.ghost:hover {
  background: color-mix(in srgb, var(--tv-blue) 8%, var(--tv-surface-2)) !important;
  border-color: color-mix(in srgb, var(--tv-blue) 42%, var(--tv-line)) !important;
  color: var(--tv-blue-hover) !important;
  transform: none !important;
}

.tabs .tab.active,
.tab-group .tab.active,
.chart-overlay-toggle.active,
.header button.primary,
.primary {
  background: var(--tv-blue) !important;
  border-color: var(--tv-blue) !important;
  color: #fff !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

.header button.primary:hover,
.primary:hover {
  background: var(--tv-blue-hover) !important;
  border-color: var(--tv-blue-hover) !important;
  color: #fff !important;
}

.scan-tier,
.market-tier,
.tab-group {
  background: var(--tv-surface-2) !important;
  border: 1px solid var(--tv-line) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.control-label,
.scan-tier-head span,
.market-tier-title,
.chart-title {
  color: var(--tv-text) !important;
  font-weight: 700 !important;
}

.scan-tier-head small,
.company-profile-line small,
.control-label small,
.tb-key,
.sector-sentiment-meta {
  color: var(--tv-muted) !important;
}

.table-wrap th {
  height: 36px !important;
  color: var(--tv-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.table-wrap td {
  color: var(--tv-text) !important;
  border-bottom: 1px solid var(--tv-line) !important;
}

.table-wrap tbody tr:nth-child(2n) {
  background: color-mix(in srgb, var(--tv-surface-2) 54%, transparent) !important;
}

.table-wrap tbody tr:hover,
.table-wrap tbody tr.active {
  background: var(--app-row-hover) !important;
}

.tag-mini,
.tag,
.custom-chip {
  border-radius: 4px !important;
  background: var(--tv-surface-2) !important;
  border: 1px solid var(--tv-line) !important;
  color: var(--tv-muted) !important;
}

.tag.bull {
  color: var(--tv-red) !important;
  background: rgba(242, 54, 69, .1) !important;
}

.tag.bear {
  color: var(--tv-green) !important;
  background: rgba(8, 153, 129, .1) !important;
}

.chart-body,
.chart-search input {
  background: var(--tv-surface) !important;
  color: var(--tv-text) !important;
}

.company-profile-line span,
.loading,
.side-value,
.eyebrow,
.hero-italic {
  color: var(--tv-blue) !important;
}

:where(button, a, input, select, textarea):focus-visible {
  outline: 3px solid var(--tv-blue-soft) !important;
  outline-offset: 2px !important;
}
