/* Gate-inspired shared language for every standalone Stocks Scan page. */
@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 {
  --gate-bg: #f7f8fa;
  --gate-surface: #ffffff;
  --gate-soft: #f3f4f6;
  --gate-soft-hover: #e9ebef;
  --gate-ink: #17191c;
  --gate-muted: #6f7785;
  --gate-faint: #9299a6;
  --gate-line: #e4e7ec;
  --gate-line-strong: #cfd4dc;
  --gate-blue: #2354e6;
  --gate-blue-hover: #1c46c7;
  --gate-blue-soft: rgba(35, 84, 230, .10);
  --gate-green: #15a36d;
  --gate-red: #e4475b;
  --gate-orange: #d98b16;
  --gate-nav: #0b0c0f;
  --gate-nav-soft: #181b20;
  --gate-font: "MiSans", "HarmonyOS Sans SC", "Geist", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --gate-mono: "Geist", "MiSans", "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;

  --ss-bg: var(--gate-bg);
  --ss-surface: var(--gate-surface);
  --ss-soft: var(--gate-soft);
  --ss-soft-2: var(--gate-soft);
  --ss-line: var(--gate-line);
  --ss-line-strong: var(--gate-line-strong);
  --ss-text: var(--gate-ink);
  --ss-muted: var(--gate-muted);
  --ss-faint: var(--gate-faint);
  --ss-blue: var(--gate-blue);
  --ss-blue-soft: var(--gate-blue-soft);
  --ss-green: var(--gate-green);
  --ss-red: var(--gate-red);
  --ss-orange: var(--gate-orange);
  --ss-shadow: none;
  --ss-font: var(--gate-font);
  --ss-mono: var(--gate-mono);

  --bg: var(--gate-bg);
  --panel: var(--gate-surface);
  --panel-2: var(--gate-soft);
  --ink: var(--gate-ink);
  --muted: var(--gate-muted);
  --line: var(--gate-line);
  --blue: var(--gate-blue);
  --green: var(--gate-green);
  --red: var(--gate-red);
  --amber: var(--gate-orange);
  --shadow: none;

  --polish-frost: linear-gradient(145deg, #ffffff 0%, #f7f9fd 58%, #eef4fb 100%);
  --polish-indigo: linear-gradient(145deg, #ffffff 0%, #f7f7fc 58%, #eff1f8 100%);
  --polish-violet: linear-gradient(145deg, #ffffff 0%, #faf7fb 58%, #f2eff6 100%);
  --polish-champagne: linear-gradient(145deg, #ffffff 0%, #fbf9f4 58%, #f4efe5 100%);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  letter-spacing: 0 !important;
}

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

body {
  overflow-x: hidden;
}

.grain,
.page::before,
.page::after,
.section::before,
.section::after,
.card::before,
.card::after,
.shell::before,
.shell::after {
  display: none !important;
}

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

/* Impeccable polish: one calm hierarchy across the standalone tools. */
.eyebrow,
.panel-eyebrow {
  display: none !important;
}

.masthead,
header.masthead {
  align-items: center !important;
  padding-block: 14px !important;
  border-radius: 8px !important;
  background: var(--polish-frost) !important;
}

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

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

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

h1,
h1.title {
  font-size: clamp(26px, 2.4vw, 38px) !important;
  font-weight: 720 !important;
  letter-spacing: -.02em !important;
}

h2,
h3,
.section-head h2,
.panel-title {
  letter-spacing: -.01em !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(--gate-blue) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gate-blue) 20%, transparent) !important;
}

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

tbody tr:hover td {
  background: #f2f6ff !important;
}

::selection {
  color: var(--gate-ink);
  background: rgba(35, 84, 230, .18);
}

* {
  scrollbar-color: rgba(111, 119, 133, .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(111, 119, 133, .45);
  background-clip: padding-box;
}

/* Structural chrome follows Gate's black global navigation. */
.masthead,
header.masthead,
.topbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 24px !important;
  margin: 0 0 12px !important;
  padding: 18px 20px !important;
  border: 1px solid #23262d !important;
  border-radius: 8px !important;
  background: var(--gate-nav) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #f4f6f8 !important;
}

.masthead h1,
header.masthead h1,
.topbar h1 {
  margin: 0 !important;
  color: #f4f6f8 !important;
  font-family: var(--gate-font) !important;
  font-size: clamp(26px, 2.6vw, 42px) !important;
  font-weight: 750 !important;
  line-height: 1.08 !important;
}

.masthead h1 em,
header.masthead h1 em,
.topbar h1 em {
  color: #6f8dff !important;
  font-style: normal !important;
}

.masthead .eyebrow,
.topbar .eyebrow {
  margin-bottom: 8px !important;
  color: #6f8dff !important;
  font-family: var(--gate-font) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

.masthead .eyebrow::before,
.topbar .eyebrow::before {
  display: none !important;
}

.masthead .subtitle,
.topbar .subtitle {
  max-width: 880px !important;
  margin: 8px 0 0 !important;
  color: #aab1bc !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

.masthead .status,
.masthead-right {
  color: #8f97a3 !important;
  font-size: 11px !important;
  line-height: 1.65 !important;
  text-align: right !important;
}

.masthead a,
.topbar a {
  color: #8fa6ff !important;
}

/* Market/category switchers */
.switches {
  gap: 7px !important;
}

.switch-label {
  color: #8f97a3 !important;
}

.market-switch,
.segmented,
.tabs {
  border: 1px solid #2a2e35 !important;
  border-radius: 7px !important;
  background: var(--gate-nav-soft) !important;
  box-shadow: none !important;
}

.seg,
.segmented button,
.tabs button,
.tabs .tab {
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #aab1bc !important;
  box-shadow: none !important;
}

.seg.active,
.segmented button.active,
.tabs button.active,
.tabs .tab.active {
  background: var(--gate-blue) !important;
  color: #ffffff !important;
}

/* One surface system. Elevation comes from hierarchy, not decoration. */
.shell,
.section,
.panel,
.card,
.fund-card,
.chart-card,
.gauge,
.note-card,
.theme-btn,
.modal,
.toast,
.source-list .src,
.intraday-panel,
.stat,
.snapshot-strip {
  border: 1px solid var(--gate-line) !important;
  border-radius: 8px !important;
  background: var(--gate-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--gate-ink) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

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

.section,
.shell,
.snapshot-strip,
.fear-row,
.chart-grid,
.chart-grid-1,
.chart-grid-2,
.cards,
.summary-grid,
.grid,
.two-col {
  margin-top: 10px !important;
  gap: 10px !important;
}

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

p,
.subtitle,
.status,
.meta,
.section-note,
.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 {
  color: var(--gate-muted) !important;
}

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

.eyebrow,
.panel-eyebrow,
.category-name,
.metric-label,
.card-label,
.card .label {
  color: var(--gate-muted) !important;
  font-family: var(--gate-font) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

.num,
.card .value,
.metric-value,
.theme-num,
.ticker-sym,
.price-row .num,
table.data .num,
.symbol {
  color: var(--gate-blue) !important;
  font-variant-numeric: tabular-nums !important;
}

.section-head,
.chart-head,
.fund-head,
.holdings-head,
.panel-header,
.card-head,
.group-head,
.modal-head {
  border-color: var(--gate-line) !important;
  background: var(--gate-surface) !important;
  background-image: none !important;
}

/* Controls */
.btn,
.chip,
.icon-btn,
.theme-toggle,
.control,
.num-input,
input,
select,
textarea,
.tag,
.action-btn,
.segmented button {
  min-height: 36px !important;
  border: 1px solid var(--gate-line-strong) !important;
  border-radius: 6px !important;
  background: var(--gate-surface) !important;
  color: var(--gate-ink) !important;
  box-shadow: none !important;
  font-family: var(--gate-font) !important;
}

input::placeholder,
textarea::placeholder {
  color: #818997 !important;
  opacity: 1 !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--gate-blue) !important;
  outline: 3px solid var(--gate-blue-soft) !important;
  outline-offset: 0 !important;
}

.btn,
.chip,
.icon-btn,
.theme-btn,
.suggestion,
.action-btn,
.seg,
.segmented button {
  cursor: pointer !important;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease, transform .10s ease !important;
}

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

.btn:active,
.chip:active,
.icon-btn:active,
.theme-btn:active,
.action-btn:active,
.seg:active,
.segmented button:active {
  transform: scale(.98) !important;
}

.btn.primary,
.chip.active,
.theme-btn.active,
.action-btn.primary {
  border-color: var(--gate-blue) !important;
  background: var(--gate-blue) !important;
  color: #ffffff !important;
}

.btn.primary:hover,
.chip.active:hover,
.theme-btn.active:hover {
  border-color: var(--gate-blue-hover) !important;
  background: var(--gate-blue-hover) !important;
  color: #ffffff !important;
}

.btn:disabled,
.chip:disabled,
.action-btn:disabled {
  opacity: .45 !important;
  cursor: not-allowed !important;
}

.btn.danger,
.neg,
.down,
.ret.down,
.leader-return.down {
  color: var(--gate-red) !important;
}

.pos,
.up,
.ret.up,
.leader-return.up {
  color: var(--gate-green) !important;
}

/* Dense financial tables */
table,
table.data {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-family: var(--gate-font) !important;
}

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

th,
table.data th {
  background: var(--gate-soft) !important;
  color: var(--gate-muted) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  text-transform: none !important;
}

tbody tr:hover {
  background: var(--gate-blue-soft) !important;
}

/* Loading, empty and error states */
.empty,
.notice {
  border: 1px dashed var(--gate-line-strong) !important;
  border-radius: 8px !important;
  background: var(--gate-soft) !important;
  color: var(--gate-muted) !important;
}

.loading {
  color: var(--gate-muted) !important;
}

.live-status .dot,
.dot {
  background: var(--gate-green) !important;
}

/* Fund autocomplete must float above all analysis panels. */
.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% + 6px) !important;
  right: 0 !important;
  left: 0 !important;
  max-height: min(420px, 58vh) !important;
  overflow: auto !important;
  border: 1px solid var(--gate-line-strong) !important;
  border-radius: 8px !important;
  background: var(--gate-surface) !important;
  box-shadow: 0 16px 38px rgba(16, 24, 40, .14) !important;
}

.suggestion {
  border: 0 !important;
  border-bottom: 1px solid var(--gate-line) !important;
  border-radius: 0 !important;
  background: var(--gate-surface) !important;
}

/* Sector heat page: the heatmap is the only overview visualization. */
.metrics {
  display: block !important;
  margin-top: 10px !important;
}

.metrics > .card {
  width: 100% !important;
}

.heatmap-grid {
  gap: 5px !important;
  padding: 10px !important;
}

.heatmap-sector {
  border: 1px solid var(--gate-line) !important;
  border-radius: 6px !important;
  background: var(--gate-soft) !important;
  color: var(--gate-ink) !important;
  box-shadow: none !important;
}

.heatmap-sector:hover,
.heatmap-sector.active {
  border-color: var(--gate-blue) !important;
  box-shadow: inset 0 0 0 1px var(--gate-blue) !important;
}

.heatmap-title b,
.theme-header h2,
.kpi b,
.group-head b,
.stock b {
  color: var(--gate-ink) !important;
}

.heatmap-title span,
.heatmap-title small {
  color: var(--gate-muted) !important;
}

.heatmap-score {
  color: var(--gate-blue) !important;
}

.heat-leader {
  border-color: rgba(111, 119, 133, .18) !important;
  border-radius: 5px !important;
  background: #e9ebef !important;
  color: #454c57 !important;
}

.heat-leader.up-strong { background: rgba(21, 163, 109, .24) !important; color: #08754e !important; }
.heat-leader.up { background: rgba(21, 163, 109, .13) !important; color: #0b7d55 !important; }
.heat-leader.down { background: rgba(228, 71, 91, .13) !important; color: #c62f43 !important; }
.heat-leader.down-strong { background: rgba(228, 71, 91, .23) !important; color: #aa1f33 !important; }

.group,
.kpi,
.leader {
  border-color: var(--gate-line) !important;
  border-radius: 6px !important;
  background: var(--gate-surface) !important;
}

/* K2AI redirect gets the same product shell. */
body > main:not(.page) {
  width: min(720px, calc(100% - 32px));
  margin: 80px auto;
  padding: 24px;
  border: 1px solid var(--gate-line);
  border-radius: 8px;
  background: var(--polish-frost);
  box-shadow: 0 10px 28px rgba(37, 51, 75, .06);
}

body > main:not(.page) strong {
  display: block;
  margin-bottom: 12px;
  color: var(--gate-ink);
  font-size: 20px;
}

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

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

  .masthead,
  header.masthead,
  .topbar {
    grid-template-columns: 1fr !important;
    align-items: start !important;
    gap: 14px !important;
    padding: 16px !important;
  }

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

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

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

@media (max-width: 620px) {
  .switch-row {
    grid-template-columns: 42px minmax(0, 1fr) !important;
  }

  .market-switch {
    width: 100% !important;
  }

  .seg {
    min-width: 0 !important;
  }

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

  .heatmap-sector,
  .heatmap-sector.size-md,
  .heatmap-sector.size-lg {
    grid-column: 1 !important;
    min-height: 156px !important;
  }
}

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

@media (prefers-contrast: more) {
  .shell,
  .section,
  .panel,
  .card,
  .fund-card,
  .chart-card,
  .gauge,
  .note-card,
  .heatmap-sector {
    border-color: var(--gate-line-strong) !important;
  }
}