/* ============================================================
   Chart-specific layouts · SVG/Canvas containers · cosmic
   · 无边框风格 · 仅保留星盘四角刻度作为视觉锚
   ============================================================ */

.chart-box {
  position: relative;
  background: rgba(8, 12, 26, 0.20);   /* 图表容器 20% 暗底（在星图上略呈薄玻璃感，便于辨识边界） */
  border: 1px solid rgba(174, 203, 255, 0.10);  /* 极淡金/蓝色细描边，配合 20% 底 */
  border-radius: var(--radius-l);
  padding: var(--s-6);
  overflow: hidden;
  opacity: 0.8;                         /* Round 30: 整体不透明度降到 80% */
}
/* ── 罗盘四角的星盘刻度角 ── */
.chart-box::before,
.chart-box::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 2;
  opacity: 0.75;
}
.chart-box::before {
  inset: 10px 10px auto 10px;
  height: 14px;
  background:
    linear-gradient(to right, var(--c-blue-l) 14px, transparent 14px) top left / 14px 1px no-repeat,
    linear-gradient(to bottom, var(--c-blue-l) 14px, transparent 14px) top left / 1px 14px no-repeat,
    linear-gradient(to left, var(--c-blue-l) 14px, transparent 14px) top right / 14px 1px no-repeat,
    linear-gradient(to bottom, var(--c-blue-l) 14px, transparent 14px) top right / 1px 14px no-repeat;
}
.chart-box::after {
  inset: auto 10px 10px 10px;
  height: 14px;
  background:
    linear-gradient(to right, var(--c-blue-l) 14px, transparent 14px) bottom left / 14px 1px no-repeat,
    linear-gradient(to top, var(--c-blue-l) 14px, transparent 14px) bottom left / 1px 14px no-repeat,
    linear-gradient(to left, var(--c-blue-l) 14px, transparent 14px) bottom right / 14px 1px no-repeat,
    linear-gradient(to top, var(--c-blue-l) 14px, transparent 14px) bottom right / 1px 14px no-repeat;
}
.chart-box .label::before {
  content: "✦";
  color: var(--c-blue);
  margin-right: 6px;
  font-size: 11px;
  opacity: 0.9;
}
.chart-box .label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-blue-l);
  margin-bottom: var(--s-3);
}
.chart-box .title {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.2;
  color: var(--c-paper);
  margin-bottom: var(--s-2);
}
.chart-box .desc {
  font-size: 13px;
  color: var(--c-paper-dim);
  margin-bottom: var(--s-5);
  max-width: 52ch;
}
.chart-box svg,
.chart-box canvas {
  width: 100%;
  display: block;
}

/* chart hover line */
.cv-line {
  stroke: var(--c-paper-dim);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
}
.cv-line.in { opacity: 0.7; }
.cv-dot {
  fill: var(--c-cyan);
  stroke: var(--c-paper-soft);
  stroke-width: 2;
  filter: drop-shadow(0 0 6px var(--c-cyan));
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
}
.cv-dot.in { opacity: 1; }

/* Cap chart · 移动端增高避免标签与名称撞行 */
@media (max-width: 560px) {
  .cap-host { height: 240px !important; }
}

/* shared svg text · 全局统一缩小 + 响应式缩放
   （CSS 覆盖 SVG 的 font-size 呈现属性，故此处可统一控图表字号） */
.chart-box svg text,
[id^="chart-"] svg text {
  font-size: 11px !important;
}

/* ── 所有图表容器 20% 暗底（与 .chart-box 同款视觉，扩展到裸 div / canvas 容器） ──
   `chart-funding` 已在 `.chart-box` 里有底色，其余 13 个 `[id^="chart-"]`
   (chart-delta-capital / chart-funnel / chart-flow / chart-mechanism / chart-risk /
    chart-quadrant / chart-swot / chart-porter / chart-revenue / chart-cost /
    chart-units / chart-breakeven / chart-roadmap) 此前是裸透明，统一补 20% 暗底 + 极淡蓝描边。
   不加 padding（高度已在 style attribute 中定死），让各图表视觉一致地有容器边界。 */
[id^="chart-"] {
  background: rgba(8, 12, 26, 0.20);
  border: 1px solid rgba(174, 203, 255, 0.10);
  border-radius: var(--radius-l);
  opacity: 0.8;                      /* Round 30: 整体不透明度降到 80% */
}
#chart-roadmap { border: none; }   /* Round 33c: 路线图去除外边框（用户反馈"把外边框去掉"） */
.chart-box svg text {
  font-family: var(--font-mono);
  fill: var(--c-paper-dim);
  letter-spacing: 0.04em;
}
.chart-box svg .axis {
  stroke: var(--c-line-2);
  stroke-width: 1;
}
.chart-box svg .grid-line {
  stroke: var(--c-line);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}

/* bars default */
.bar {
  transition: opacity 240ms var(--ease-out), transform 480ms var(--ease-out);
  transform-origin: bottom;
  transform-box: fill-box;
}
.bar:hover { opacity: 0.85; }
.bar-anim { animation: bar-grow 800ms var(--ease-out) backwards; }
@keyframes bar-grow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* lines */
.line-path {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.line-area {
  opacity: 0.16;
}
.line-dot {
  transition: r 240ms var(--ease-out);
}
.line-dot:hover { r: 6; }

/* legend */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: var(--s-4);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-paper-dim);
}
.legend .item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.legend .swatch {
  width: 14px;
  height: 2px;
  border-radius: 2px;
}
.legend .swatch.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 6px currentColor;
}

/* network canvas wrapper · 透明无框 */
.network-wrap {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: transparent;
  border: 0;
}
.network-wrap canvas { width: 100%; height: 100%; }

/* Resource wheel */
.resource-wheel-wrap {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}
.resource-wheel-wrap canvas { width: 100%; height: 100%; }

/* 生态双图并排 · 统一对齐与 caption */
.eco-cell { display: flex; flex-direction: column; align-items: stretch; }
.eco-cap {
  margin-top: var(--s-5);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.eco-cap-t {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--c-paper);
  letter-spacing: 0.02em;
}
.eco-net { margin-top: 0; }

/* counter */
.counter {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 500;
  color: var(--c-paper);
  letter-spacing: -0.02em;
  display: inline-block;
  line-height: 1;
}
.counter .unit {
  font-family: var(--font-mono);
  font-size: 0.35em;
  color: var(--c-cyan);
  margin-left: 4px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  vertical-align: top;
}

/* KPI row · 无外圈边框 */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(215, 224, 244, 0.06);
  border: 0;
  border-radius: var(--radius-l);
  overflow: hidden;
}
/* ── TAM / SAM / SOM 左右对齐 ──
   左列三行与右侧漏斗的三个盒子在同一基线上：
   漏斗盒中心约在 H 的 18% / 51% / 85%，左列用 grid 三等分把三行
   分布到几乎同样的相对位置；align-items:stretch 让两列等高。
   每张卡占 1fr 行的 80%（align-self:center 给上下间距），与右漏斗
   boxH = stepH*0.78 在视觉块高度上保持一致。 */
.grid.g-2.tam-som-grid { align-items: stretch; }
.tam-som-rows {
  display: grid;
  grid-template-rows: repeat(3, 1fr);    /* 三行均分全高，与右漏斗 H/6·H/2·5H/6 对齐 */
  grid-template-columns: 1fr;            /* Round 31: 强制单列撑满宽度，否则 grid 列会按内容收缩为 299px，导致 .slider-wrap 的 92% 计算基数错误 */
  gap: 0;                                /* 由 padding 留呼吸，避免与右漏斗间隙错位 */
  padding: var(--s-3) 0;
  height: 100%;
  box-sizing: border-box;
}
.tam-som-rows .slider-row {
  padding: var(--s-2) 0;
  border-top: 1px solid rgba(215, 224, 244, 0.08);
}
.tam-som-rows .slider-wrap:last-child .slider-row {
  border-bottom: 1px solid rgba(215, 224, 244, 0.08);
}

/* ── 响应式 · 图表布局收口 ── */
.grid.g-2.eco-grid { gap: var(--s-8); }
@media (max-width: 920px) {
  /* 生态双图提前堆叠，避免窄屏两图挤在一起致使画布文字过大 */
  .grid.g-2.eco-grid { grid-template-columns: 1fr; gap: var(--s-7); }
}
@media (max-width: 760px) {
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .chart-box { padding: var(--s-4); }
  .chart-box .title { font-size: 18px; }
  .chart-box .desc { font-size: 13px; }
  .eco-cap-t { font-size: 13px; }
  .kpi .v { font-size: 32px; }
  .counter { font-size: 32px; }
  /* 防止图表溢出产生横向滚动 */
  [id^="chart-"] { max-width: 100%; }
}
.kpi {
  background: var(--c-ink-3);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  position: relative;
  overflow: hidden;
  transition: background 320ms var(--ease-out);
}
.kpi::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 120% 80% at 100% 0%, rgba(127,178,255,.10), transparent 60%);
  opacity: 0;
  transition: opacity 320ms var(--ease-out);
  pointer-events: none;
}
.kpi:hover { background: var(--c-ink-4); }
.kpi:hover::after { opacity: 1; }
.kpi .k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-paper-dim);
}
.kpi .v {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 500;
  color: var(--c-paper);
  line-height: 1;
}
.kpi .v em {
  font-style: normal;
  color: var(--c-cyan);
  font-size: 0.5em;
  margin-left: 4px;
}
.kpi .d {
  font-size: 11px;
  color: var(--c-paper-dim);
  font-family: var(--font-mono);
}

/* ledger line item */
.ledger {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--c-paper-dim);
}
.ledger .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-1) 0;
  border-bottom: 1px solid rgba(215, 224, 244, 0.06);
}
.ledger .row .ts { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
.ledger .row .desc { color: var(--c-paper); flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
.ledger .row .v { color: var(--c-cyan); text-align: right; flex: 0 0 auto; }
.ledger .row .badge {
  flex: 0 0 auto;
  text-align: right;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ledger .row .badge.ok { color: var(--c-jade); }
.ledger .row .badge.warn { color: var(--c-warning); }
.ledger .row .badge.bad { color: var(--c-red); }

/* star panel (was sticky note) · 极细边框 */
.note {
  position: relative;
  background:
    radial-gradient(ellipse 100% 120% at 100% 0%, rgba(181,140,255,.14), transparent 60%),
    rgba(8, 12, 26, 0.4);
  color: var(--c-paper);
  padding: var(--s-5);
  border-radius: var(--radius-m);
  border: 1px solid rgba(215, 224, 244, 0.06);
  font-family: var(--font-serif);
  box-shadow: var(--sh-2), var(--sh-glow-violet);
  overflow: hidden;
}
.note::before {
  content: "";
  position: absolute;
  top: 14px; left: 14px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--c-gold);
  box-shadow: 0 0 12px var(--c-gold);
}
.note > * { position: relative; }
.note .sig {
  margin-top: var(--s-4);
  font-family: var(--font-serif);
  color: var(--c-cyan);
  text-align: right;
}

/* stamp · 罗盘金封印（去红，统一金线） */
.stamp {
  display: inline-block;
  border: 2px solid var(--c-gold);
  color: var(--c-gold);
  padding: 6px 14px;
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 4px;
  position: relative;
  opacity: 0.9;
  box-shadow: var(--sh-glow-gold);
}
.stamp::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--c-gold);
  border-radius: 2px;
}
.stamp.animate { animation: stamp-drop 600ms var(--ease-soft) backwards; }