/* Stocks Scan subpage visual unification.
   TradingView-like light financial dashboard language shared by standalone pages. */
:root {
  --ss-bg: #f3f5f7;
  --ss-surface: #ffffff;
  --ss-soft: #f7f8fa;
  --ss-soft-2: #eef1f4;
  --ss-line: #d8dee6;
  --ss-line-strong: #bdc7d3;
  --ss-text: #1d2633;
  --ss-muted: #626f80;
  --ss-faint: #8792a1;
  --ss-blue: #547898;
  --ss-blue-soft: #e8eff5;
  --ss-green: #16866f;
  --ss-red: #cf5860;
  --ss-orange: #f59f00;
  --ss-shadow: none;
  --ss-shadow-float: 0 12px 30px rgba(24, 36, 52, .13);
  --ss-radius-panel: 14px;
  --ss-radius-control: 10px;
  --ss-radius-small: 8px;
  --ss-font: "MiSans", "HarmonyOS Sans SC", "Geist", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --ss-mono: "Geist", "MiSans", "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

* {
  letter-spacing: 0 !important;
}

html,
body {
  min-height: 100%;
  background: var(--ss-bg) !important;
  color: var(--ss-text) !important;
  font-family: var(--ss-font) !important;
  font-feature-settings: "tnum" 1 !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
}

body {
  background-image: none !important;
}

.grain {
  display: none !important;
}

.page,
.container {
  width: 100% !important;
  max-width: 1920px !important;
  margin: 0 auto !important;
  padding: 18px 24px 42px !important;
}

.masthead,
header.masthead,
.shell,
.section,
.panel,
.card,
.fund-card,
.chart-card,
.gauge,
.note-card,
.theme-btn,
.modal,
.toast,
.source-list .src {
  border: 1px solid var(--ss-line) !important;
  border-radius: var(--ss-radius-panel) !important;
  background: var(--ss-surface) !important;
  color: var(--ss-text) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.masthead,
header.masthead {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 18px !important;
  margin: 0 0 14px !important;
  padding: 18px 20px !important;
  border-bottom: 1px solid var(--ss-line) !important;
  box-shadow: 0 1px 2px rgba(24, 36, 52, .04), 0 8px 24px rgba(24, 36, 52, .055) !important;
}

.eyebrow,
.panel-eyebrow,
.category-name,
.metric-label,
.card-label,
.card .label {
  color: var(--ss-blue) !important;
  font-family: var(--ss-font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: none !important;
}

.eyebrow::before {
  background: var(--ss-blue) !important;
}

h1,
h1.title {
  color: var(--ss-text) !important;
  font-family: var(--ss-font) !important;
  font-size: clamp(28px, 3vw, 44px) !important;
  line-height: 1.05 !important;
  font-weight: 850 !important;
}

h1 em,
h1 .italic,
.num,
.card .value,
.metric-value,
.theme-num,
.ticker-sym,
.price-row .num,
table.data .num {
  color: var(--ss-blue) !important;
}

h2,
h3,
.section-head h2,
.chart-title,
.theme-name,
.panel-title,
.fund-name,
.ticker-name,
.card-value {
  color: var(--ss-text) !important;
  font-family: var(--ss-font) !important;
  font-weight: 800 !important;
}

p,
.subtitle,
.status,
.meta,
.section-head .meta,
.note,
.card .note,
.theme-tagline,
.theme-meta,
.theme-count,
.ticker-desc,
.category-zh,
.panel-intro,
.foot,
.card-sub,
.chart-note,
.chart-meta,
.name,
.fund-code,
.metric-sub,
.source-list .src .status {
  color: var(--ss-muted) !important;
  font-family: var(--ss-font) !important;
}

a {
  color: var(--ss-blue) !important;
}

.cards,
.summary-grid {
  gap: 10px !important;
}

.section,
.panel,
.chart-card,
.note-card,
.fund-card,
.card,
.gauge {
  padding: 14px !important;
  overflow: visible !important;
}

.section::after,
.shell::after,
.fund-card::after,
.theme-btn::before {
  display: none !important;
}

.toolbar,
.section-head,
.chart-head,
.fund-head,
.holdings-head,
.panel-header {
  border-color: var(--ss-line) !important;
}

.btn,
.chip,
.icon-btn,
.theme-toggle,
.control,
.num-input,
input,
select,
textarea,
.tag {
  min-height: 36px !important;
  border: 1px solid var(--ss-line-strong) !important;
  border-radius: var(--ss-radius-control) !important;
  background: var(--ss-soft) !important;
  color: var(--ss-text) !important;
  box-shadow: none !important;
  font-family: var(--ss-font) !important;
}

.btn,
.chip,
.icon-btn,
.theme-btn,
.suggestion {
  cursor: pointer !important;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease !important;
}

.btn:hover,
.chip:hover,
.icon-btn:hover,
.theme-btn:hover,
.suggestion:hover {
  transform: none !important;
  border-color: var(--ss-blue) !important;
  background: var(--ss-blue-soft) !important;
}

.btn.primary,
.chip.active,
.theme-btn.active {
  background: var(--ss-blue-soft) !important;
  border-color: var(--ss-blue) !important;
  color: var(--ss-blue) !important;
  box-shadow: none !important;
}

.btn.danger,
.neg,
.down {
  color: var(--ss-red) !important;
}

.pos,
.up {
  color: var(--ss-green) !important;
}

table,
table.data {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-family: var(--ss-font) !important;
}

th,
td,
table.data th,
table.data td {
  border-bottom: 1px solid var(--ss-line) !important;
  color: var(--ss-text) !important;
  background: transparent !important;
  padding: 9px 10px !important;
}

th,
table.data th {
  color: var(--ss-muted) !important;
  background: var(--ss-soft-2) !important;
  font-weight: 800 !important;
}

.empty {
  border: 1px dashed var(--ss-line-strong) !important;
  border-radius: var(--ss-radius-control) !important;
  background: var(--ss-soft) !important;
  color: var(--ss-muted) !important;
}

.theme-btn {
  min-height: 150px !important;
  padding: 18px !important;
}

.themes-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 10px !important;
  border: 0 !important;
  background: transparent !important;
}

.theme-name {
  font-size: 20px !important;
}

.theme-name .zh {
  color: var(--ss-muted) !important;
  font-family: var(--ss-font) !important;
}

.theme-arrow {
  display: none !important;
}

.panel {
  z-index: 1000 !important;
}

.backdrop {
  z-index: 990 !important;
  background: rgba(15, 23, 42, .34) !important;
}

.panel-body {
  background: var(--ss-surface) !important;
}

.ticker {
  border-color: var(--ss-line) !important;
}

/* Fund search: keep autocomplete above every card/chart and outside toolbar clipping. */
.shell,
.toolbar,
.search-box {
  overflow: visible !important;
}

.search-box {
  position: relative !important;
  z-index: 3000 !important;
}

.suggestions {
  position: absolute !important;
  z-index: 4000 !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: 0 !important;
  max-height: min(420px, 58vh) !important;
  overflow: auto !important;
  border: 1px solid var(--ss-line-strong) !important;
  border-radius: var(--ss-radius-panel) !important;
  background: #fff !important;
  box-shadow: var(--ss-shadow-float) !important;
}

.suggestion {
  display: grid !important;
  grid-template-columns: 76px minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  width: 100% !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ss-line) !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: var(--ss-text) !important;
}

.suggestion strong {
  color: var(--ss-blue) !important;
  font-family: var(--ss-mono) !important;
}

.suggestion span {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.suggestion small {
  color: var(--ss-muted) !important;
}

.intraday-panel,
.stat,
.source-list .src {
  border: 1px solid var(--ss-line) !important;
  border-radius: var(--ss-radius-control) !important;
  background: var(--ss-soft) !important;
}

@media (max-width: 900px) {
  .page,
  .container {
    padding: 12px !important;
  }

  .masthead,
  header.masthead {
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }

  .status,
  .masthead-right {
    text-align: left !important;
  }

  .cards,
  .summary-grid,
  .grid,
  .two-col,
  .chart-grid,
  .themes-grid {
    grid-template-columns: 1fr !important;
  }

  .toolbar {
    grid-template-columns: 1fr !important;
  }
}