/* Dedicated ranking pages: each lens has its own editorial language and artwork. */
html[data-ranking-lens="theme"] {
  --accent: #9a5938;
  --rank-canvas: #eee5da;
  --rank-surface: #fbf7f1;
  --rank-soft: #f1e5d8;
  --rank-ink: #30251f;
  --rank-muted: #78675d;
  --rank-line: #d8c8b9;
  --rank-image: url("/static/ranking-bg-theme.svg");
}

html[data-ranking-lens="technical"] {
  --accent: #356b62;
  --rank-canvas: #e4ebe8;
  --rank-surface: #f7faf8;
  --rank-soft: #e6eeeb;
  --rank-ink: #1f2d2a;
  --rank-muted: #63736f;
  --rank-line: #c6d2ce;
  --rank-image: url("/static/ranking-bg-technical.svg");
}

html[data-ranking-lens="value"] {
  --accent: #3d6653;
  --rank-canvas: #e9e3d6;
  --rank-surface: #fbf8ef;
  --rank-soft: #eee8da;
  --rank-ink: #29342d;
  --rank-muted: #6f746d;
  --rank-line: #d2cbbb;
  --rank-image: url("/static/ranking-bg-value.svg");
}

html[data-ranking-lens="growth"] {
  --accent: #377a70;
  --rank-canvas: #e1ece8;
  --rank-surface: #f7fbf9;
  --rank-soft: #e2efeb;
  --rank-ink: #20342f;
  --rank-muted: #63756f;
  --rank-line: #c4d5cf;
  --rank-image: url("/static/ranking-bg-growth.svg");
}

html[data-ranking-lens="quant"] {
  --accent: #72afb5;
  --rank-canvas: #0b1216;
  --rank-surface: #111c21;
  --rank-soft: #18272c;
  --rank-ink: #edf4f2;
  --rank-muted: #9aacac;
  --rank-line: #2c3d42;
  --rank-image: url("/static/ranking-bg-quant.svg");
}

html[data-ranking-lens="price"] {
  --accent: #a84438;
  --rank-canvas: #ebe6e0;
  --rank-surface: #fbf9f6;
  --rank-soft: #f3e9e5;
  --rank-ink: #2d2926;
  --rank-muted: #766e69;
  --rank-line: #d9cfca;
  --rank-image: url("/static/ranking-bg-price.svg");
}

html[data-ranking-lens] body {
  background: var(--rank-canvas);
}

html[data-ranking-lens] .main {
  background: var(--rank-canvas);
}

html[data-ranking-lens] .topbar,
html[data-ranking-lens] .workspace-guide,
html[data-ranking-lens] .workspace-guide.hidden {
  color: var(--rank-ink);
  background: var(--rank-surface);
  border-color: var(--rank-line);
}

html[data-ranking-lens] .topbar {
  position: relative;
  min-height: 132px;
  display: grid;
  grid-template-columns: minmax(520px, 1fr) auto;
  align-items: center;
  gap: 34px;
  margin-bottom: 22px;
  padding: 24px 28px;
  border: 1px solid var(--rank-line);
  border-top: 3px solid var(--accent);
}

html[data-ranking-lens] .topbar .stock-identity {
  min-width: 0;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  grid-template-areas:
    "eyebrow title"
    "eyebrow meta";
  column-gap: 27px;
  row-gap: 9px;
  align-items: center;
}

html[data-ranking-lens] .topbar .eyebrow {
  grid-area: eyebrow;
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  padding: 8px 24px 0 0;
  border-right: 1px solid var(--rank-line);
  color: var(--rank-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: .09em;
}

html[data-ranking-lens] .topbar h2 {
  grid-area: title;
  min-width: 0;
  margin: 0;
  color: var(--rank-ink);
  font-size: clamp(30px, 2.55vw, 42px);
  line-height: 1.08;
  font-weight: 620;
  letter-spacing: -.045em;
}

html[data-ranking-lens] .topbar p {
  grid-area: meta;
  max-width: 62ch;
  margin: 0;
  color: var(--rank-muted);
  font-size: 14px;
  line-height: 1.6;
}

html[data-ranking-lens] .topbar .top-actions {
  align-self: center;
  justify-self: end;
  padding-top: 0;
  gap: 14px;
}

html[data-ranking-lens] .topbar .market-color-legend {
  padding-right: 14px;
  border-color: var(--rank-line);
  color: var(--rank-muted);
}

html[data-ranking-lens] .topbar .scheduler-state {
  max-width: 410px;
  color: var(--rank-muted);
  font-size: 11px;
  line-height: 1.5;
  white-space: normal;
  text-align: right;
}

html[data-ranking-lens] .topbar p,
html[data-ranking-lens] .workspace-guide > p,
html[data-ranking-lens] .workspace-guide-flow span,
html[data-ranking-lens] .top-guide-identity em {
  color: var(--rank-muted);
}

html[data-ranking-lens] .workspace-guide-question,
html[data-ranking-lens] .workspace-guide > p,
html[data-ranking-lens] .workspace-guide-flow,
html[data-ranking-lens] .workspace-guide-flow li {
  border-color: var(--rank-line);
}

html[data-ranking-lens] .top-guide-identity {
  background: var(--rank-soft);
}

html[data-ranking-lens] .momentum-workspace {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--rank-ink);
  background: var(--rank-surface);
  border-color: var(--rank-line);
  border-top-color: var(--rank-ink);
}

html[data-ranking-lens] .momentum-workspace::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 430px;
  background-image: var(--rank-image);
  background-position: center top;
  background-size: cover;
  opacity: .78;
  pointer-events: none;
}

html[data-ranking-lens] .analysis-ranking-head,
html[data-ranking-lens] .momentum-intro {
  min-height: 250px;
  border-color: var(--rank-line);
}

html[data-ranking-lens] .analysis-ranking-head h3,
html[data-ranking-lens] .momentum-intro h3,
html[data-ranking-lens] .analysis-ranking-row,
html[data-ranking-lens] .momentum-row {
  color: var(--rank-ink);
}

html[data-ranking-lens] .analysis-ranking-head p,
html[data-ranking-lens] .analysis-ranking-head dt,
html[data-ranking-lens] .ranking-company small,
html[data-ranking-lens] .ranking-score small,
html[data-ranking-lens] .ranking-coverage small,
html[data-ranking-lens] .analysis-ranking-row time,
html[data-ranking-lens] .analysis-ranking-methodology {
  color: var(--rank-muted);
}

html[data-ranking-lens] .analysis-ranking-head dl,
html[data-ranking-lens] .analysis-ranking-head dl > div,
html[data-ranking-lens] .analysis-ranking-table,
html[data-ranking-lens] .analysis-ranking-table-head,
html[data-ranking-lens] .analysis-ranking-row {
  border-color: var(--rank-line);
}

html[data-ranking-lens] .analysis-ranking-table {
  border-top-color: var(--rank-ink);
}

html[data-ranking-lens] .analysis-ranking-table-head {
  color: var(--rank-muted);
  background: color-mix(in srgb, var(--rank-surface) 90%, transparent);
}

html[data-ranking-lens] .analysis-ranking-row:hover {
  background: var(--rank-soft);
}

html[data-ranking-lens] .ranking-evidence {
  color: color-mix(in srgb, var(--rank-ink) 82%, var(--rank-muted));
}

html[data-ranking-lens] .analysis-ranking-boundary {
  color: var(--rank-ink);
  background: color-mix(in srgb, var(--rank-soft) 88%, transparent);
  border-left-color: var(--accent);
}

html[data-ranking-lens] .analysis-ranking-boundary p {
  color: color-mix(in srgb, var(--rank-ink) 82%, var(--rank-muted));
}

html[data-ranking-lens] .analysis-ranking-row button {
  color: var(--rank-ink);
  border-color: var(--rank-ink);
}

html[data-ranking-lens] .panel-kicker {
  color: var(--accent);
  letter-spacing: .16em;
}

/* Theme: an editorial map of catalysts and industrial diffusion. */
html[data-ranking-lens="theme"] .analysis-ranking-head {
  grid-template-columns: minmax(0, 1.15fr) minmax(420px, .85fr);
}

html[data-ranking-lens="theme"] .analysis-ranking-head h3 {
  max-width: 720px;
  font-family: "Songti SC", "Noto Serif SC", STSong, serif;
  font-size: clamp(38px, 4.4vw, 68px);
  font-weight: 600;
}

html[data-ranking-lens="theme"] .analysis-ranking-head dl {
  padding: 18px 0;
  background: rgba(251, 247, 241, .72);
  border: 1px solid var(--rank-line);
}

html[data-ranking-lens="theme"] .analysis-ranking-boundary {
  border-left-width: 5px;
}

/* Technical: a precise charting desk with compact, monospaced evidence. */
html[data-ranking-lens="technical"] .analysis-ranking-head h3,
html[data-ranking-lens="technical"] .ranking-position,
html[data-ranking-lens="technical"] .ranking-score strong,
html[data-ranking-lens="technical"] .ranking-coverage strong {
  font-family: var(--number);
}

html[data-ranking-lens="technical"] .analysis-ranking-table-head {
  border-top: 1px solid var(--rank-line);
  border-bottom: 1px solid var(--rank-line);
  letter-spacing: .08em;
}

/* Value: a restrained financial statement and margin-of-safety ledger. */
html[data-ranking-lens="value"] .analysis-ranking-head {
  padding-top: 52px;
  border-bottom: 4px double var(--rank-line);
}

html[data-ranking-lens="value"] .analysis-ranking-head h3 {
  font-family: "Songti SC", "Noto Serif SC", STSong, serif;
  font-size: clamp(38px, 4vw, 62px);
  letter-spacing: -.035em;
}

html[data-ranking-lens="value"] .analysis-ranking-head dl {
  border: 1px solid var(--rank-line);
  border-right: 0;
  background: rgba(251,248,239,.7);
}

html[data-ranking-lens="value"] .analysis-ranking-head dl > div {
  padding: 18px 20px;
}

html[data-ranking-lens="value"] .analysis-ranking-table {
  border-top: 4px double var(--rank-ink);
}

html[data-ranking-lens="value"] .analysis-ranking-row {
  min-height: 98px;
}

/* Growth: spacious upward rhythm with stronger rank progression. */
html[data-ranking-lens="growth"] .analysis-ranking-head h3 {
  max-width: 760px;
  font-size: clamp(40px, 4.2vw, 64px);
  font-weight: 600;
}

html[data-ranking-lens="growth"] .analysis-ranking-head dl {
  align-self: stretch;
  align-items: end;
  padding-bottom: 22px;
}

html[data-ranking-lens="growth"] .analysis-ranking-row {
  grid-template-columns: 72px minmax(155px,.85fr) 108px 100px minmax(250px,1.5fr) 105px 76px;
}

html[data-ranking-lens="growth"] .ranking-position {
  font-size: 26px;
}

/* Quant: dark research terminal, no neon effects and no decorative glow. */
html[data-ranking-lens="quant"] .sidebar,
html[data-ranking-lens="quant"] .top-nav-primary,
html[data-ranking-lens="quant"] .top-watch-toolbar {
  border-color: #2c3d42;
}

html[data-ranking-lens="quant"] .topbar,
html[data-ranking-lens="quant"] .workspace-guide,
html[data-ranking-lens="quant"] .workspace-guide.hidden,
html[data-ranking-lens="quant"] .momentum-workspace {
  color: var(--rank-ink);
}

html[data-ranking-lens="quant"] .analysis-ranking-head h3,
html[data-ranking-lens="quant"] .analysis-ranking-head dd,
html[data-ranking-lens="quant"] .ranking-position,
html[data-ranking-lens="quant"] .ranking-score strong,
html[data-ranking-lens="quant"] .ranking-coverage strong,
html[data-ranking-lens="quant"] .analysis-ranking-row time {
  font-family: var(--number);
}

html[data-ranking-lens="quant"] .analysis-ranking-head h3 {
  color: #edf4f2;
  font-size: clamp(38px, 4vw, 60px);
  letter-spacing: -.025em;
}

html[data-ranking-lens="quant"] .analysis-ranking-head dl {
  border: 1px solid var(--rank-line);
  background: rgba(12, 21, 25, .72);
}

html[data-ranking-lens="quant"] .analysis-ranking-head dl > div {
  padding-block: 18px;
}

html[data-ranking-lens="quant"] .analysis-ranking-boundary {
  border: 1px solid var(--rank-line);
  border-left: 4px solid var(--accent);
}

html[data-ranking-lens="quant"] .analysis-ranking-table-head {
  background: #162328;
  text-transform: uppercase;
  letter-spacing: .11em;
}

html[data-ranking-lens="quant"] .analysis-ranking-row {
  background: rgba(17, 28, 33, .88);
}

html[data-ranking-lens="quant"] .analysis-ranking-row:nth-child(even) {
  background: rgba(20, 33, 38, .9);
}

html[data-ranking-lens="quant"] .analysis-ranking-row:hover {
  background: #1c3035;
}

html[data-ranking-lens="quant"] .ranking-company strong,
html[data-ranking-lens="quant"] .ranking-score strong,
html[data-ranking-lens="quant"] .ranking-coverage strong,
html[data-ranking-lens="quant"] .ranking-empty strong {
  color: #edf4f2;
}

html[data-ranking-lens="quant"] .ranking-loading i {
  background: #19282d;
}

/* Price: a market tape; red is up and green is down for A-share convention. */
html[data-ranking-lens="price"] .momentum-workspace::before {
  height: 500px;
  opacity: .68;
}

html[data-ranking-lens="price"] .momentum-intro h3 {
  max-width: 850px;
  font-size: clamp(40px, 4.3vw, 66px);
  font-weight: 600;
}

html[data-ranking-lens="price"] .momentum-status {
  padding: 24px 0 24px 30px;
  background: rgba(251,249,246,.76);
}

html[data-ranking-lens="price"] .momentum-presets,
html[data-ranking-lens="price"] .hotspot-radar,
html[data-ranking-lens="price"] .momentum-results {
  background: rgba(251,249,246,.94);
}

@media (max-width: 1000px) {
  html[data-ranking-lens] .topbar {
    grid-template-columns: minmax(420px, 1fr) auto;
    gap: 22px;
    padding-inline: 23px;
  }
  html[data-ranking-lens] .topbar .stock-identity {
    grid-template-columns: 92px minmax(0, 1fr);
    column-gap: 20px;
  }
  html[data-ranking-lens] .topbar .eyebrow { padding-right: 18px; }
  html[data-ranking-lens] .topbar .market-color-legend { display: none; }
  html[data-ranking-lens] .topbar .scheduler-state { max-width: 285px; }
  html[data-ranking-lens] .momentum-workspace::before { height: 340px; }
  html[data-ranking-lens] .analysis-ranking-head,
  html[data-ranking-lens] .momentum-intro { min-height: 0; }
  html[data-ranking-lens="theme"] .analysis-ranking-head { grid-template-columns: 1fr; }
  html[data-ranking-lens="growth"] .analysis-ranking-row { grid-template-columns: 42px minmax(120px,1fr) 78px 68px; }
}

@media (max-width: 760px) {
  html[data-ranking-lens] .topbar {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 21px 19px 18px;
  }
  html[data-ranking-lens] .topbar .stock-identity {
    grid-template-columns: 1fr;
    grid-template-areas: "eyebrow" "title" "meta";
    gap: 8px;
  }
  html[data-ranking-lens] .topbar .eyebrow {
    min-height: 0;
    padding: 0 0 8px;
    border-right: 0;
    border-bottom: 1px solid var(--rank-line);
  }
  html[data-ranking-lens] .topbar h2 { font-size: clamp(28px, 9vw, 36px); }
  html[data-ranking-lens] .topbar .top-actions {
    width: 100%;
    justify-self: stretch;
    justify-content: flex-start;
    padding-top: 14px;
    border-top: 1px solid var(--rank-line);
  }
  html[data-ranking-lens] .topbar .scheduler-state {
    max-width: none;
    text-align: left;
  }
}