/* ============================================================
   Components · Nav, Footer, Chips, Inputs, Tabs, Cosmic bg
   ============================================================ */

/* ── Glass callout · 太空飞船玻璃质感（深色版） ──
   用于「投资人回报逻辑」这类深度嵌套的暗色提示框。
   半透明背景 + backdrop-filter + 细描边 + 顶部高光，模拟舷窗玻璃 */
.glass-callout {
  margin-top: var(--s-6);
  padding: var(--s-4) var(--s-5);
  color: var(--c-paper);
  border-radius: var(--radius-s);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(8, 12, 24, 0.55) 50%,
    rgba(8, 12, 24, 0.62) 100%
  );
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid rgba(255, 212, 121, 0.18);   /* 罗盘金细描边 */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),     /* 顶部高光 */
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),          /* 底部加深 */
    0 4px 24px rgba(0, 0, 0, 0.35);              /* 投影 */
  position: relative;
  overflow: hidden;
}
.glass-callout::before {
  /* 角部刻线 · 太空飞船玻璃舷窗四角的装饰刻线 */
  content: "";
  position: absolute;
  inset: 6px;
  pointer-events: none;
  border-radius: calc(var(--radius-s) - 2px);
  background:
    linear-gradient(180deg, rgba(255,212,121,0.18) 0 1px, transparent 1px 12px) top left / 12px 12px no-repeat,
    linear-gradient(90deg,  rgba(255,212,121,0.18) 0 1px, transparent 1px 12px) top left / 12px 12px no-repeat,
    linear-gradient(0deg,   rgba(255,212,121,0.18) 0 1px, transparent 1px 12px) bottom right / 12px 12px no-repeat,
    linear-gradient(270deg, rgba(255,212,121,0.18) 0 1px, transparent 1px 12px) bottom right / 12px 12px no-repeat;
  opacity: 0.7;
}
.glass-callout > * { position: relative; z-index: 1; }

/* ── 卡片鼠标悬停 3D 偏转 ──
   transition 在 .card/.chart-box/.note 上由 CSS 提供 420ms 缓动，
   JS 在 mousemove 时把 transition 设为 none 保证响应即时。
   .note 也加入选择器（之前「平台的差异化」这类卡片漏掉了），onLeave 时
   恢复原始内联 transform（含 rotate(1.4deg) 等角度）。 */
.card,
.chart-box,
.note {
  transition: transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
  transform-style: preserve-3d;
}
.card.is-tilting,
.chart-box.is-tilting,
.note.is-tilting { transition: none; }

/* ── 离开 hero 后的背景暗化层 ──
   固定铺满视口，置于星空/等高线（-4/-3）之上、内容（1）之下；
   IntersectionObserver 监测 hero 离开视口后给 body 加 past-hero，
   暗化层 opacity 0→1 过渡，统一非 hero 区色调、消除章节间色差。 */
.post-hero-dim {
  position: fixed; inset: 0;
  z-index: -1;     /* 高于 ecliptic(-2) 与 contour(-4)/stars(-3)，低于内容(1) */
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.62) 100%);
  opacity: 0;
  transition: opacity 720ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
body.past-hero .post-hero-dim { opacity: 1; }

/* ── #ask section · 双卡等高 + 紧凑排版 ──
   把 chart-box 改成 flex column 让 chart-funding 占满剩余高度，
   左右两卡通过 stretch 自然对齐，donut 在卡片中纵向居中放大。 */
.ask-grid { align-items: stretch; }
.ask-card {
  display: flex;
  flex-direction: column;
  padding: var(--s-5);
  height: 100%;
  box-sizing: border-box;
}
.ask-chart {
  flex: 1 1 0;
  min-height: 360px;
  margin-top: var(--s-3);
  position: relative;
}
.ask-legend {
  list-style: none;
  padding: 0;
  margin: var(--s-3) 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px var(--s-3);
  font-size: 11px;
  color: var(--c-paper);
}
.ask-legend li {
  display: grid;
  grid-template-columns: 8px 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(234,240,255,.08);
}
.ask-legend .dot {
  width: 8px; height: 8px; border-radius: 2px; display: inline-block;
}
.ask-legend .nm { color: var(--c-paper); }
.ask-legend .vl {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-paper-dim);
}
.ask-legend .pc {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-orange);
  min-width: 32px;
  text-align: right;
}
.ask-sub {
  color: var(--c-paper);
  margin: var(--s-2) 0 0;
  font-size: 18px;
}
.ask-rows {
  list-style: none;
  padding: 0;
  margin: var(--s-3) 0 0;
  font-size: 13px;
  line-height: 1.4;
}
.ask-rows li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-1) 0;
  border-bottom: 1px solid rgba(234,240,255,.10);
  min-height: 28px;
}
.ask-rows li:last-child { border-bottom: 0; }
.ask-rows .k { color: var(--c-paper-dim); }
.ask-rows .v {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--c-paper);
}
.ask-rows .v.red { color: var(--c-red); }
.ask-callout {
  margin-top: var(--s-3);
  padding: var(--s-3) var(--s-4);
}
.ask-callout p {
  color: var(--c-paper);
  font-size: 11px;
  line-height: 1.4;
  margin-top: 4px;
}
.ask-btn {
  margin: var(--s-5) auto 0;
  padding: var(--s-3) var(--s-5);
  width: fit-content;
  min-width: 64%;
  justify-content: center;
  align-self: center;
}
@media (max-width: 760px) {
  .ask-legend { grid-template-columns: 1fr; }
  .ask-chart { min-height: 280px; }
}

/* ── Rocket-glass · 右卡 TERMINAL SHEET 玻璃面板 ──
   移到独立 class 以便和 .ask-card 叠加使用（双 class 都满足 flex 列布局） */
.rocket-glass {
  background: rgba(10,16,32,0.42);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid rgba(255,212,121,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 24px rgba(0,0,0,0.35);
  color: var(--c-paper);
}

/* ── Fixed cosmic background layers (whole-page starfield) ── */
/* 动态等高线地形层 · 最底层（星空之下） */
#bg-contour {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -4;
  pointer-events: none;
  opacity: 0.9;
  -webkit-mask-image: radial-gradient(ellipse 120% 100% at 50% 40%, #000 20%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.25) 100%);
          mask-image: radial-gradient(ellipse 120% 100% at 50% 40%, #000 20%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.25) 100%);
}
@media (max-width: 820px) {
  #bg-contour { opacity: 0.6; }
}
#bg-stars {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -3;
  pointer-events: none;
}
/* 黄道坐标网格 · 赤道坐标 (RA/Dec) 视觉化
   ─ 只在 hero 区作中心式环绕；用径向 mask 限制成顶部"月晕"区域，
   ─ 其它区段彻底不渲染，避免和图表里的星点/网格"双重星盘"叠加。 */
#ecliptic {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
  opacity: 0.32;
  mask-image: radial-gradient(ellipse 90% 75% at 50% 22%,
               #000 0%, #000 35%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 90% 75% at 50% 22%,
               #000 0%, #000 35%, transparent 70%);
}
#nebula {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--nebula-1), var(--nebula-2), var(--nebula-3), var(--nebula-4);
  opacity: 0.32;
  mask-image: radial-gradient(ellipse 110% 95% at 50% 38%,
               #000 0%, #000 50%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 110% 95% at 50% 38%,
               #000 0%, #000 50%, transparent 85%);
}

/* ── 流星 ── */
.meteor {
  position: fixed;
  z-index: 1;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--c-paper-soft);
  box-shadow: 0 0 6px 1px var(--c-gold), 0 0 14px 3px rgba(255, 212, 121, 0.5);
  pointer-events: none;
  opacity: 0;
  animation-name: meteor-fly;
  animation-timing-function: cubic-bezier(0.3, 0.1, 0.4, 1);
  animation-fill-mode: forwards;
  will-change: transform, opacity;
}
.meteor::after {
  content: "";
  position: absolute;
  right: 50%;
  top: 50%;
  width: 120px;
  height: 1px;
  transform-origin: right center;
  transform: translateY(-50%) rotate(var(--angle, 0deg));
  background: linear-gradient(90deg, rgba(255, 212, 121, 0), rgba(255, 212, 121, 0.85));
  filter: blur(0.4px);
}
@keyframes meteor-fly {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.6); }
  10%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--mx, 200px), var(--my, 80vh)) scale(1); }
}

/* ── Top navigation ── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 16px 0;
  background: linear-gradient(180deg, rgba(4,6,15,.94), rgba(4,6,15,.45) 70%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 320ms var(--ease-out);
}
.nav.scrolled {
  background: linear-gradient(180deg, rgba(4,6,15,.98), rgba(12,18,38,.82) 70%, transparent);
  border-bottom: 1px solid var(--c-line);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-serif);
  font-size: 18px;
  letter-spacing: 0.02em;
  color: var(--c-paper);
}
.brand-mark {
  width: 38px;
  height: 38px;
  position: relative;
  flex-shrink: 0;
  filter: drop-shadow(0 0 10px rgba(127,178,255,.45));
}
.brand-mark svg { width: 100%; height: 100%; }
.brand-text {
  display: flex;
  flex-direction: column;
  white-space: nowrap;   /* 用户反馈：logo 右侧网页名不要换行 */
}
.brand small {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--c-paper-dim);
  margin-top: 2px;
  text-transform: uppercase;
  white-space: nowrap;   /* 防止副标题在小屏下换行 */
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.nav-menu::-webkit-scrollbar { display: none; }
.nav-menu a {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-paper-dim);
  position: relative;
  padding: 6px 0;
  white-space: nowrap;
  transition: color 240ms var(--ease-out);
}
.nav-menu a:hover { color: var(--c-paper); }
.nav-menu a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--c-blue);
  box-shadow: var(--sh-glow-blue);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 320ms var(--ease-out);
}
.nav-menu a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav-cta {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
.nav-progress {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--c-blue), var(--c-violet));
  box-shadow: var(--sh-glow-blue);
  width: 0;
  transition: width 80ms linear;
}

/* ── Hamburger toggle · 默认隐藏，≤1080px 显示 ── */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px; height: 42px;
  border: 1px solid var(--c-line-2);
  border-radius: 10px;
  background: rgba(4,6,15,.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 101;
}
.nav-toggle span {
  display: block;
  width: 20px; height: 2px;
  margin: 0 auto;
  background: var(--c-paper);
  border-radius: 2px;
  transition: transform 300ms var(--ease-out), opacity 200ms var(--ease-out);
}
.nav.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; }
  .nav-menu {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(4,6,15,.97);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--c-line);
    padding: var(--s-2) var(--s-5) var(--s-4);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height 380ms var(--ease-out), opacity 260ms var(--ease-out);
  }
  .nav.nav-open .nav-menu {
    max-height: 82vh;
    opacity: 1;
    pointer-events: auto;
    overflow-y: auto;
  }
  .nav-menu a {
    padding: 13px 4px;
    font-size: 13px;
    border-bottom: 1px solid rgba(215,224,244,.07);
  }
  .nav-menu a::after { display: none; }
}
@media (max-width: 1180px) {
  .nav-cta .btn { font-size: 11px; padding: 10px 16px; letter-spacing: 0.12em; }
}

/* ── Footer ── */
.footer {
  background: var(--c-ink-2);
  border-top: 1px solid var(--c-line);
  padding: var(--s-8) 0 var(--s-5);
  position: relative;
}
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--nebula-2);
  opacity: 0.5;
  pointer-events: none;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--s-6);
  margin-bottom: var(--s-7);
}
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
.footer h5 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-paper-dim);
  margin: 0 0 var(--s-4) 0;
}
.footer-links { display: flex; flex-direction: column; gap: var(--s-3); }
.footer-links a {
  font-size: 13px;
  color: var(--c-paper-dim);
  transition: color 240ms var(--ease-out);
}
.footer-links a:hover { color: var(--c-blue); }
.footer-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-paper-dim);
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* ── Hero ── */
.hero {
  position: relative;
  min-height: 100dvh;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg canvas,
.hero-bg svg {
  width: 100%;
  height: 100%;
}
.hero-content {
  position: relative;
  z-index: 2;
  padding-top: 16vh;
  padding-bottom: var(--s-9);
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 6px 14px;
  border: 1px solid var(--c-line-2);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--c-blue-l);
  background: rgba(4,6,15,.5);
  backdrop-filter: blur(6px);
  margin-bottom: var(--s-6);
}
.hero-eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-cyan);
  box-shadow: 0 0 8px var(--c-cyan);
  animation: pulse 2s infinite;
}
.hero-title {
  font-size: 32px;
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.04em;
  color: var(--c-paper-soft);
  margin: 0;
  text-shadow: 0 0 60px rgba(127,178,255,.18), 0 0 32px rgba(255,212,121,.12);
}
.hero-title .accent {
  background: linear-gradient(135deg, var(--c-blue) 0%, var(--c-violet) 55%, var(--c-cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}
.hero-title .underline {
  position: relative;
  display: inline-block;
}
.hero-title .underline::after {
  content: "";
  position: absolute;
  left: 0; bottom: 6px;
  width: 100%;
  height: 8px;
  background: linear-gradient(90deg, var(--c-blue), var(--c-cyan));
  opacity: 0.3;
  z-index: -1;
  transform: skewX(-12deg);
}
.hero-lead {
  margin-top: var(--s-6);
  font-size: 18px;
  line-height: 1.6;
  color: var(--c-paper);
  max-width: 620px;
}
.hero-meta {
  display: flex;
  gap: var(--s-6);
  margin-top: var(--s-7);
  flex-wrap: wrap;
}
.hero-meta .item .k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-paper-dim);
  margin-bottom: 10px;
}
.hero-meta .item .v {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--c-paper);
  line-height: 1.3;
  padding-top: 2px;
}
.hero-meta .item .v em {
  font-style: normal;
  color: var(--c-cyan);
  font-size: 0.6em;
  vertical-align: baseline;
  margin-left: 10px;
  letter-spacing: 0.02em;
}

.hero-ctas {
  display: flex;
  gap: var(--s-4);
  margin-top: var(--s-7);
  flex-wrap: wrap;
}

/* hero-side → horizontal starfield caption (no vertical text) */
.hero-side {
  position: absolute;
  right: var(--s-7);
  top: 120px;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 8px 14px;
  border: 1px solid var(--c-line-2);
  border-radius: 999px;
  background: rgba(4,6,15,.5);
  backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-paper-dim);
  z-index: 2;
  white-space: nowrap;
}
.hero-side .star-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-gold);
  box-shadow: 0 0 8px var(--c-gold);
}
@media (max-width: 1080px) {
  .hero-side { display: none; }
}

.hero-scroll {
  position: absolute;
  bottom: var(--s-6);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-paper-dim);
  z-index: 3;
}
.hero-scroll .bar {
  width: 1px;
  height: 60px;
  background: var(--c-line-3);
  overflow: hidden;
  position: relative;
}
.hero-scroll .bar::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 30%;
  background: linear-gradient(180deg, var(--c-blue), transparent);
  box-shadow: var(--sh-glow-blue);
  animation: scroll-bar 2s var(--ease-in-out) infinite;
}
@keyframes scroll-bar {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(300%); }
}

/* ── Tabs / Chips ── */
.chips {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-5);
}
.chip {
  padding: 8px 18px;
  border: 1px solid var(--c-line-2);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-paper-dim);
  cursor: pointer;
  transition: all 280ms var(--ease-out);
  background: transparent;
  white-space: nowrap;
}
.chip::before {
  content: "✦";
  color: var(--c-blue);
  margin-right: 6px;
  font-size: 11px;
  opacity: 0.55;
  transition: opacity 240ms var(--ease-out);
}
.chip:hover::before { opacity: 1; }
.chip.active::before { color: var(--c-ink); opacity: 1; }
.chip:hover { color: var(--c-paper); border-color: var(--c-line-3); }
.chip.active {
  color: var(--c-ink);
  background: linear-gradient(135deg, var(--c-blue), var(--c-violet));
  border-color: transparent;
  box-shadow: var(--sh-glow-blue);
}

/* ── Slider ── */
.slider-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
}
.slider-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-paper-dim);
}
.slider-row .v {
  font-size: 18px;
  color: var(--c-cyan);
  font-family: var(--font-serif);
  letter-spacing: 0;
  text-transform: none;
}

/* ── TAM/SAM/SOM 双图对齐 · 左侧三行改为软卡片，与右侧漏斗同尺寸 ── */
.tam-som-grid { align-items: stretch; aspect-ratio: 2.8; width: 100%; }   /* Round 30: 2.4→2.8 整体压扁 */
.tam-som-rows {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  justify-content: space-around;     /* 三行均分全高，盒心对齐右漏斗 H/6 · H/2 · 5H/6 */
}
.tam-som-rows .slider-wrap {
  flex: 0 0 auto;                    /* grid 1fr 下不强制拉伸，靠 height 65% + align-self:center 占视觉块 */
  align-self: center;                /* grid item 上下居中 → 上下 padding 留白对齐右漏斗 boxH = stepH*0.62 */
  height: 65%;                       /* 占 1fr 行 65%，约 = stepH*0.62（H/3*0.62 ≈ H*0.21） */
  min-height: 0;
  margin-left: auto;                 /* 居中，左右留白对齐右 TAM 盒的 24px 边距 */
  margin-right: auto;
  display: flex;
  align-items: center;               /* 内容在盒内垂直居中（无论内容长短都视觉对齐） */
  justify-content: flex-start;
  padding: var(--s-3) var(--s-4);
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(8, 12, 24, 0.42) 60%,
    rgba(8, 12, 24, 0.50) 100%);
  border: 1px solid rgba(174, 203, 255, 0.10);
  border-radius: 8px;
  font-family: var(--font-sans);
}
/* Round 33k: 每行宽度镜像右漏斗的漏斗收窄（92/72/52），TAM/SAM/SOM 左右等宽对齐 */
.tam-som-rows .slider-wrap:nth-child(1) { width: 92%; }
.tam-som-rows .slider-wrap:nth-child(2) { width: 72%; }
.tam-som-rows .slider-wrap:nth-child(3) { width: 52%; }
/* 移动端 ≤560：左列与右漏斗上下堆叠（非左右），收窄会让 SOM 行装不下"数千万—数亿"，统一回 100% */
@media (max-width: 560px) {
  .tam-som-rows .slider-wrap:nth-child(1),
  .tam-som-rows .slider-wrap:nth-child(2),
  .tam-som-rows .slider-wrap:nth-child(3) { width: 100%; }
}
.tam-som-rows .slider-wrap:last-child {
  background: linear-gradient(180deg,
    rgba(255, 212, 121, 0.10) 0%,
    rgba(255, 212, 121, 0.04) 60%,
    rgba(8, 12, 24, 0.50) 100%);
  border-color: rgba(255, 212, 121, 0.30);
}
.tam-som-rows .slider-row {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 13px;    /* Round 33k: 左列改为次级 legend，明显小于右漏斗 16*FS */
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--c-paper-dim);
}
.tam-som-rows .slider-row > span:first-child {
  color: var(--c-paper);
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;                    /* 防止 "TAM · 总体潜在市场" 在窄屏断行 */
}
.tam-som-rows .slider-row .v {
  font-size: 13px;    /* Round 33k: 同步缩小，作为次级 legend 数值 */
  font-weight: 600;
  font-family: var(--font-serif);         /* 统一为 serif，与右漏斗 Source Han Serif 一致 */
  color: var(--c-cyan);
  white-space: nowrap;
}
.tam-som-rows .slider-wrap:last-child .slider-row .v { color: var(--c-gold); }
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--c-blue), var(--c-cyan));
  border-radius: 999px;
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--c-paper-soft);
  border: 2px solid var(--c-blue);
  cursor: pointer;
  box-shadow: var(--sh-glow-blue);
  transition: transform 240ms var(--ease-out);
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--c-paper-soft);
  border: 2px solid var(--c-blue);
  cursor: pointer;
}

/* ── Tooltip (used by charts) ── */
.tip {
  position: fixed;
  z-index: 200;
  padding: 8px 12px;
  background: var(--c-ink-4);
  color: var(--c-paper);
  border: 1px solid var(--c-line-2);
  font-family: var(--font-mono);
  font-size: 13px;
  border-radius: var(--radius-s);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
  white-space: nowrap;
  box-shadow: var(--sh-2), var(--sh-glow-blue);
}
.tip.in { opacity: 1; transform: translateY(0); }
.tip .k { color: var(--c-paper-dim); display: block; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 2px; }
.tip .v { color: var(--c-cyan); font-size: 13px; font-weight: 600; white-space: pre-line; }