/* OptionCharts-inspired language shared by analytical subpages. */
@font-face {
  font-family: "MiSans";
  src: local("MiSans Regular"), local("MiSans"), url("/fonts/misans-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: "MiSans";
  src: local("MiSans Semibold"), local("MiSans SemiBold"), url("/fonts/misans-semibold.woff2") format("woff2");
  font-weight: 500 800;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: "Geist";
  src: local("Geist Variable"), local("Geist"), url("/fonts/geist-variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  --oc-bg: #fff; --oc-surface: #fff; --oc-soft: #f7f8fa; --oc-soft-blue: #f3f7ff;
  --oc-line: #e2e5ea; --oc-line-strong: #cfd5df; --oc-text: #17191c;
  --oc-muted: #69707d; --oc-blue: #246bfd; --oc-green: #168a5b; --oc-red: #d94747;
  --oc-font: "MiSans", "HarmonyOS Sans SC", "Geist", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --oc-data-font: "Geist", "MiSans", "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --oc-frost: linear-gradient(145deg, #ffffff 0%, #f7f9fd 58%, #eef4fb 100%);
  --oc-indigo: linear-gradient(145deg, #ffffff 0%, #f7f7fc 58%, #eff1f8 100%);
  --oc-violet: linear-gradient(145deg, #ffffff 0%, #faf7fb 58%, #f2eff6 100%);
}
html, body {
  color-scheme: light !important; min-height: 100% !important; background: #fff !important;
  background-image: none !important; color: var(--oc-text) !important; font-family: var(--oc-font) !important;
  font-feature-settings: "tnum" 1 !important; letter-spacing: 0 !important;
  text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important;
}
body::before, body::after, .grain { display: none !important; }
.page, main { width: min(100%, 1920px) !important; max-width: none !important; margin: 0 auto !important; padding: 18px 24px 36px !important; }
body > header, .masthead, .topbar {
  position: relative !important; top: auto !important; display: flex !important; align-items: flex-end !important;
  justify-content: space-between !important; gap: 20px !important; margin: 0 !important; padding: 18px 24px !important;
  border: 0 !important; border-bottom: 1px solid var(--oc-line) !important; border-radius: 0 !important;
  background: #fff !important; background-image: none !important; box-shadow: none !important;
  backdrop-filter: none !important; animation: none !important;
}
body main.page > header.masthead,
body .page > header.masthead,
body .page > .topbar {
  border: 0 !important;
  border-bottom: 1px solid var(--oc-line) !important;
  border-radius: 0 !important;
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
  box-shadow: none !important;
}
h1, h1.title { margin: 0 !important; color: var(--oc-text) !important; font-family: var(--oc-font) !important; font-size: 24px !important; font-weight: 720 !important; line-height: 1.2 !important; }
h1 small, .subtitle, .status, .meta, .card-meta, .section-note, .section-meta {
  color: var(--oc-muted) !important; font-family: var(--oc-font) !important; font-size: 12px !important; font-weight: 450 !important; line-height: 1.55 !important;
}
.eyebrow { margin-bottom: 7px !important; color: var(--oc-blue) !important; font: 700 11px/1.2 var(--oc-font) !important; text-transform: uppercase !important; }
.eyebrow::before { background: var(--oc-blue) !important; animation: none !important; }
.shell, .section, .panel, .card, .table-shell, .forecast-item, .heatmap-sector, .group, .stock, .leader, .kpi, .chart-card, .gauge {
  border: 1px solid var(--oc-line) !important; border-radius: 6px !important; background: #fff !important;
  background-image: none !important; color: var(--oc-text) !important; box-shadow: none !important; animation: none !important;
}
.shell, .section, .panel { margin-bottom: 12px !important; padding: 14px !important; }
.card { padding: 13px 14px !important; }
.summary, .summary-grid, .cards, .metrics, .kpi-grid { gap: 8px !important; }
.summary .card, .summary-grid .card, .cards .card { min-height: 84px !important; border-radius: 4px !important; }
.card span, .kpi span, .metric-label { color: var(--oc-muted) !important; font-family: var(--oc-font) !important; font-size: 11px !important; }
.card strong, .kpi b, .metric-value, .score, .forecast-prob { color: var(--oc-text) !important; font-family: var(--oc-data-font) !important; font-variant-numeric: tabular-nums !important; font-feature-settings: "tnum" 1, "lnum" 1 !important; }
.pass strong, .pass, .up, .pos { color: var(--oc-green) !important; }
.fail strong, .fail, .down, .neg { color: var(--oc-red) !important; }
button, input, select, .btn, .seg, .chip, .action-btn {
  min-height: 34px !important; border: 1px solid var(--oc-line-strong) !important; border-radius: 4px !important;
  background: #fff !important; color: var(--oc-text) !important; box-shadow: none !important; font-family: var(--oc-font) !important;
}
button:hover, .btn:hover, .seg:hover, .chip:hover, .action-btn:hover {
  border-color: var(--oc-blue) !important; background: var(--oc-soft-blue) !important; color: var(--oc-blue) !important; transform: none !important;
}
button:active, .btn:active, .seg:active, .chip:active { transform: translateY(1px) !important; }
.primary, .seg.active, .chip.active, button.active { border-color: var(--oc-blue) !important; background: var(--oc-blue) !important; color: #fff !important; }
.controls, .toolbar, .market-switch, .switch-row {
  gap: 8px !important; padding: 8px !important; border: 1px solid var(--oc-line) !important;
  border-radius: 6px !important; background: var(--oc-soft) !important;
}
.section-head, .card-head, .chart-head, .group-head, .theme-header { padding-bottom: 10px !important; border-bottom: 1px solid var(--oc-line) !important; background: #fff !important; }
.table-shell { overflow: auto !important; border-radius: 4px !important; }
table { border-collapse: separate !important; border-spacing: 0 !important; }
th, td { padding: 8px 10px !important; border: 0 !important; border-bottom: 1px solid var(--oc-line) !important; background: #fff !important; color: var(--oc-text) !important; font-family: var(--oc-data-font) !important; font-variant-numeric: tabular-nums !important; font-feature-settings: "tnum" 1, "lnum" 1 !important; }
th { background: var(--oc-soft) !important; color: var(--oc-muted) !important; font-size: 11px !important; font-weight: 650 !important; text-transform: none !important; }
tbody tr:hover td { background: var(--oc-soft-blue) !important; }
.heatmap-grid { gap: 8px !important; }
.heatmap-sector { border-radius: 4px !important; }
.heatmap-sector:hover, .heatmap-sector.active { border-color: var(--oc-blue) !important; box-shadow: inset 0 0 0 1px var(--oc-blue) !important; }
.heatmap-sector.active,
button.heatmap-sector.active {
  background: var(--oc-soft-blue) !important;
  background-color: var(--oc-soft-blue) !important;
  color: var(--oc-text) !important;
}
.heatmap-sector.active .heatmap-title b,
.heatmap-sector.active .heatmap-title span,
.heatmap-sector.active .heatmap-score,
.heatmap-sector.active .heatmap-meta,
.heatmap-sector.active .heat-trend-meta {
  color: var(--oc-text) !important;
}
.heatmap-sector.active .heatmap-score { color: var(--oc-blue) !important; }
.heatmap-score, .forecast-prob, .score { color: var(--oc-blue) !important; }
.forecast-bar, .bar-track { background: #e9edf3 !important; }
.forecast-bar i, .bar-fill { background: var(--oc-blue) !important; }
canvas { filter: none !important; }

/* Final analytical-page polish. Data canvases remain neutral for legibility. */
.eyebrow { display: none !important; }

body > header,
.masthead,
.topbar {
  align-items: center !important;
  background: var(--oc-frost) !important;
}

.shell,
.section,
.panel {
  border-radius: 8px !important;
  background: var(--oc-frost) !important;
  box-shadow: 0 10px 28px rgba(37, 51, 75, .06) !important;
}

.section:nth-of-type(3n + 2),
.panel:nth-of-type(3n + 2) { background: var(--oc-indigo) !important; }
.section:nth-of-type(3n + 3),
.panel:nth-of-type(3n + 3) { background: var(--oc-violet) !important; }

.card,
.kpi,
.chart-card,
.heatmap-sector,
.forecast-item,
.table-shell {
  border-radius: 6px !important;
  background: rgba(255, 255, 255, .90) !important;
  background-image: none !important;
}

h1,
h1.title {
  letter-spacing: -.02em !important;
}

button,
input,
select,
.btn,
.seg,
.chip,
.action-btn {
  border-radius: 6px !important;
  font-weight: 550 !important;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease !important;
}

:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--oc-blue) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--oc-blue) 20%, transparent) !important;
}

th {
  height: 38px !important;
  color: #525b69 !important;
  border-bottom-color: var(--oc-line-strong) !important;
}

::selection {
  color: var(--oc-text);
  background: rgba(36, 107, 253, .18);
}

* {
  scrollbar-color: rgba(105, 112, 125, .45) transparent;
  scrollbar-width: thin;
}

*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(105, 112, 125, .45);
  background-clip: padding-box;
}
body .topbar h1,
body .page > .topbar h1,
body main.page > header.masthead h1,
body main.page > header.masthead h1 em,
body .page > header.masthead h1,
body .page > header.masthead h1 em {
  color: var(--oc-text) !important;
  opacity: 1 !important;
  -webkit-text-fill-color: var(--oc-text) !important;
}
@media (max-width: 900px) {
  .page, main { padding: 12px !important; }
  body > header, .masthead, .topbar { align-items: flex-start !important; flex-direction: column !important; padding: 14px 12px !important; }
  .summary, .summary-grid, .cards, .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}