/* ==========================================================================
   viz.css — 六个交互组件的样式
   1 CED 非对称结构   2 Agent 负载结构   3 KV Cache 历代压缩
   4 CSA2 稀疏注意力   5 成本计算器       6 基准提升对比
   红线：任何卡片/色块都不得出现左侧或顶部局部彩条。
   ========================================================================== */

.viz { min-width: 0; }

/* 组件内的读数块 */
.readout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}
.readout__item {
  flex: 1 1 130px;
  min-width: 0;
  padding: var(--s4);
  border-radius: var(--r);
  background: var(--bg);
  border: 1px solid var(--line);
}
.readout__k {
  font-size: .72rem;
  color: var(--ink-3);
  margin-bottom: 6px;
  font-family: var(--font-mono);
  letter-spacing: .03em;
}
.readout__v {
  font-family: var(--font-mono);
  font-size: 1.28rem;
  font-weight: 650;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.readout__v .unit { font-size: .62em; color: var(--ink-3); margin-left: 3px; }
.readout__item--brand  .readout__v { color: var(--brand-ink); }
.readout__item--teal   .readout__v { color: var(--teal-ink); }
.readout__item--amber  .readout__v { color: var(--amber-ink); }
.readout__sub { margin-top: 5px; font-size: .74rem; color: var(--ink-3); line-height: 1.55; }

/* ==========================================================================
   1. CED 非对称结构
   ========================================================================== */

.ced__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s4);
  margin-bottom: var(--s5);
}
.ced__top .segmented { flex-shrink: 0; }
.ced__state {
  font-size: .82rem;
  color: var(--ink-2);
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ced__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px minmax(0, 1fr);
  gap: var(--s4);
  align-items: end;
  margin-bottom: var(--s5);
}

.ced__col { min-width: 0; }
.ced__colhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.ced__colname { font-size: .84rem; font-weight: 620; }
.ced__colmeta { font-family: var(--font-mono); font-size: .72rem; color: var(--ink-3); }

.ced__stack { display: grid; gap: 3px; }

.ced__layer {
  height: 13px;
  border-radius: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  transition: background .45s var(--ease), border-color .45s var(--ease),
              opacity .45s var(--ease), transform .45s var(--ease);
  transform-origin: left center;
}
.ced__layer.is-on {
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 0 0 1px rgba(77, 107, 254, .3), 0 0 14px rgba(77, 107, 254, .28);
}
.ced__layer.is-warm {
  background: var(--teal);
  border-color: var(--teal);
  box-shadow: 0 0 12px rgba(53, 214, 176, .25);
}
.ced__layer.is-dim { opacity: .34; }

/* 中间连接带：表示 KV 从哪里来 */
.ced__bridge {
  display: grid;
  gap: 8px;
  padding-bottom: 6px;
}
.ced__bridge-label {
  font-size: .7rem;
  line-height: 1.5;
  color: var(--ink-3);
  text-align: center;
}
.ced__bridge-svg { width: 100%; height: 92px; }
.ced__bridge-svg .wire {
  fill: none;
  stroke: var(--surface-3);
  stroke-width: 1.5;
  transition: stroke .45s var(--ease), opacity .45s var(--ease);
}
.ced__bridge-svg .wire.is-live {
  stroke: var(--teal);
  stroke-dasharray: 5 4;
  animation: ced-flow 1.1s linear infinite;
}
@keyframes ced-flow { to { stroke-dashoffset: -18; } }
.ced__bridge-svg .node {
  fill: var(--surface-2);
  stroke: var(--line-strong);
  transition: fill .45s var(--ease), stroke .45s var(--ease);
}
.ced__bridge-svg .node.is-live { fill: var(--teal-tint); stroke: var(--teal); }
.ced__bridge-svg text {
  font-family: var(--font-mono);
  font-size: 8px;
  fill: var(--ink-3);
}

/* 计算量对比条 */
.ced__flops { display: grid; gap: 10px; margin-top: var(--s4); }
.ced__flops-row { display: grid; grid-template-columns: 88px minmax(0, 1fr) 74px; gap: var(--s3); align-items: center; }
.ced__flops-label { font-size: .78rem; color: var(--ink-3); }
.ced__flops-track {
  height: 10px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  overflow: hidden;
}
.ced__flops-fill {
  height: 100%;
  border-radius: var(--r-full);
  background: var(--brand);
  width: 0;
  transition: width .8s var(--ease), background .4s var(--ease);
}
.ced__flops-fill--teal { background: var(--teal); }
.ced__flops-fill--dim  { background: var(--surface-3); }
.ced__flops-val { font-family: var(--font-mono); font-size: .8rem; text-align: right; color: var(--ink-2); }

@media (max-width: 780px) {
  .ced__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ced__bridge { grid-column: 1 / -1; order: 3; }
  .ced__bridge-svg { height: 66px; }
  .ced__layer { height: 11px; }
}

/* ==========================================================================
   2. Agent 负载 token 结构
   ========================================================================== */

.wl__bar {
  display: flex;
  height: 68px;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--line);
  margin-bottom: var(--s3);
}
.wl__seg {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 5px;
  overflow: hidden;
  transition: flex-basis .7s var(--ease);
  flex-grow: 0;
  flex-shrink: 0;
}
.wl__seg--in {
  background: var(--brand-tint);
  border-right: 1px solid var(--line);
}
.wl__seg--out { background: var(--amber-tint); }
.wl__seg-label {
  position: absolute;
  left: 14px;
  font-size: .8rem;
  color: var(--ink);
  white-space: nowrap;
  pointer-events: none;
}
.wl__seg--out .wl__seg-label { left: auto; right: 8px; }

/* 输入侧的扫描脉冲：表示 prefill 一次性前向 */
.wl__scan {
  position: absolute;
  top: 0; left: 0;
  width: 2px; height: 100%;
  background: var(--brand);
  opacity: 0;
  pointer-events: none;
}
.wl__scan.is-run { animation: wl-scan 1.5s var(--ease) 1; }
@keyframes wl-scan {
  0%   { opacity: 0; transform: translateX(0); }
  10%  { opacity: .95; }
  90%  { opacity: .95; }
  100% { opacity: 0; transform: translateX(var(--scan-dist, 60vw)); }
}

.wl__ticks {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--ink-3);
  margin-bottom: var(--s5);
}

/* decode 侧：N 次单 token 前向的脉冲列 */
.wl__decode {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: var(--s5);
  min-height: 20px;
}
.wl__pulse {
  width: 7px; height: 18px;
  border-radius: 2px;
  background: var(--surface-3);
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.wl__pulse.is-on { background: var(--amber); box-shadow: 0 0 9px rgba(240, 180, 80, .45); }

.wl__presets { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s5); }

.wl__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s5); }

/* ==========================================================================
   3. KV Cache 历代压缩
   ========================================================================== */

.kv__chart { display: grid; gap: var(--s5); margin-bottom: var(--s5); }
.kv__row { display: grid; grid-template-columns: minmax(140px, 176px) minmax(0, 1fr); gap: var(--s4); align-items: center; }
.kv__name { font-size: .86rem; font-weight: 560; }
.kv__date { font-family: var(--font-mono); font-size: .7rem; color: var(--ink-3); margin-top: 2px; }

.kv__track {
  position: relative;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--bg);
  border: 1px solid var(--line);
  overflow: hidden;
}
.kv__grid { position: absolute; inset: 0; pointer-events: none; }
.kv__gridline {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, .05);
}
.kv__bar {
  position: absolute;
  top: 4px; bottom: 4px; left: 4px;
  border-radius: 5px;
  background: var(--surface-3);
  width: 0;
  min-width: 3px;
  transition: width 1s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease);
}
.kv__bar--final {
  background: linear-gradient(90deg, #2FA98C, var(--teal));
  box-shadow: 0 0 18px rgba(53, 214, 176, .3);
}
.kv__bar--prev { background: linear-gradient(90deg, #3A4256, #4A5470); }

.kv__val {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: .88rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.kv__val .u { font-size: .74em; color: var(--ink-3); margin-left: 3px; }

.kv__step {
  position: absolute;
  left: 0; top: -1px;
  transform: translateY(-100%);
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--teal-ink);
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.kv__step.is-in { opacity: 1; }

.kv__row--final .kv__track {
  border-color: var(--teal-line);
  background: rgba(53, 214, 176, .05);
}

.kv__axis {
  display: grid;
  grid-template-columns: minmax(140px, 176px) minmax(0, 1fr);
  gap: var(--s4);
  margin-top: var(--s2);
}
.kv__axis-track {
  position: relative;
  height: 18px;
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--ink-3);
}
.kv__axis-tick { position: absolute; transform: translateX(-50%); white-space: nowrap; }

.kv__deltas { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s3); margin-bottom: var(--s4); }

@media (max-width: 620px) {
  .kv__row, .kv__axis { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .kv__track { height: 34px; }
}

/* ==========================================================================
   4. CSA2 稀疏注意力
   ========================================================================== */

.csa__layerstrip { display: grid; gap: 10px; margin-bottom: var(--s5); }
.csa__strip-group { display: grid; gap: 6px; }
.csa__strip-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  font-size: .76rem;
  color: var(--ink-3);
}
.csa__strip-label b { color: var(--ink-2); font-weight: 600; }
.csa__cells { display: flex; gap: 3px; flex-wrap: wrap; }
.csa__cell {
  width: 15px; height: 26px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
  padding: 0;
}
.csa__cell[data-mode="SWA"]     { background: var(--surface-3); }
.csa__cell[data-mode="Full"]    { background: var(--brand);  border-color: var(--brand); }
.csa__cell[data-mode="Reindex"] { background: var(--amber);  border-color: var(--amber); }
.csa__cell[data-mode="Reuse"]   { background: var(--teal-tint); border-color: var(--teal-line); }
.csa__cell.is-active {
  transform: scaleY(1.16);
  box-shadow: 0 0 0 2px var(--ink);
  border-color: var(--ink);
}
.csa__cell.is-source {
  box-shadow: 0 0 0 2px var(--teal-ink);
  border-color: var(--teal-ink);
}

.csa__canvas-wrap {
  padding: var(--s4);
  border-radius: var(--r);
  background: var(--bg);
  border: 1px solid var(--line);
  margin-bottom: var(--s4);
}
.csa__canvas-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s3);
  margin-bottom: var(--s3);
  font-size: .78rem;
  color: var(--ink-3);
}
.csa__canvas-head b { color: var(--ink); font-weight: 600; font-family: var(--font-mono); }

.csa__canvas {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
}
.csa__block { display: grid; gap: 4px; }
.csa__block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: .62rem;
  color: var(--ink-3);
  transition: color .3s var(--ease);
}
.csa__block.is-candidate .csa__block-head { color: var(--teal-ink); }
.csa__cells-grid { display: grid; grid-template-columns: repeat(4, 15px); gap: 4px; }
.csa__block-frame {
  padding: 5px;
  border-radius: 7px;
  border: 1px solid var(--line);
  transition: border-color .35s var(--ease), background .35s var(--ease);
}
.csa__block.is-candidate .csa__block-frame {
  border-color: var(--teal-line);
  background: var(--teal-tint);
}

.csa__tok {
  width: 15px; height: 15px;
  border-radius: 3px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  padding: 0;
  transition: background .35s var(--ease), border-color .35s var(--ease),
              transform .25s var(--ease), box-shadow .35s var(--ease);
}
.csa__tok.is-scored   { border-color: var(--line-strong); }
.csa__tok.is-candidate { border-color: var(--teal-line); }
.csa__tok.is-top {
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(77, 107, 254, .28);
  transform: scale(1.08);
}
.csa__tok.is-query {
  background: var(--amber);
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(240, 180, 80, .25);
}
.csa__tok.is-query::after { content: ""; }

.csa__modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s3); }

.csa__mode {
  padding: var(--s4);
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--bg);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.csa__mode.is-on { border-color: var(--brand-line); background: var(--brand-tint); }
.csa__mode-name { font-family: var(--font-mono); font-size: .8rem; font-weight: 620; margin-bottom: 5px; }
.csa__mode-desc { font-size: .78rem; color: var(--ink-2); line-height: 1.65; }
.csa__mode-tags { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 5px; }

/* ==========================================================================
   5. 成本计算器
   ========================================================================== */

.cost__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); }
@media (max-width: 900px) { .cost__grid { grid-template-columns: minmax(0, 1fr); } }

.cost__inputs { display: grid; gap: var(--s5); }
.cost__input-row { display: grid; gap: 10px; }
.cost__pair { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: var(--s3); align-items: center; }

.cost__results { display: grid; gap: var(--s4); }
.cost__card {
  padding: var(--s5);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--bg);
}
.cost__card--off { border-color: var(--teal-line); background: var(--teal-tint); }
.cost__card--peak { border-color: var(--amber-line); background: var(--amber-tint); }
.cost__card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s4);
}
.cost__card-name { font-size: .86rem; font-weight: 620; }
.cost__total {
  font-family: var(--font-mono);
  font-size: clamp(1.6rem, 3.2vw, 2rem);
  font-weight: 650;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  margin-top: var(--s3);
}
.cost__card--off  .cost__total { color: var(--teal-ink); }
.cost__card--peak .cost__total { color: var(--amber-ink); }
.cost__total .unit { font-size: .5em; color: var(--ink-3); margin-left: 5px; letter-spacing: 0; }

.cost__lines { display: grid; gap: 7px; font-size: .82rem; }
.cost__line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--s3);
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
}
.cost__line:last-child { border-bottom: 0; padding-bottom: 0; }
.cost__line-unit { font-family: var(--font-mono); color: var(--ink-3); font-size: .78rem; }
.cost__line-cost { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); }

.cost__ratio { margin-top: var(--s5); }
.cost__ratio-bars { display: grid; gap: var(--s2); margin-top: var(--s3); }
.cost__ratio-row { display: grid; grid-template-columns: 108px minmax(0, 1fr) 62px; gap: var(--s3); align-items: center; font-size: .78rem; color: var(--ink-3); }
.cost__ratio-track { height: 9px; border-radius: var(--r-full); background: var(--surface-2); overflow: hidden; }
.cost__ratio-fill { height: 100%; border-radius: var(--r-full); width: 0; transition: width .6s var(--ease); }
.cost__ratio-fill--hit  { background: var(--teal); }
.cost__ratio-fill--miss { background: var(--amber); }
.cost__ratio-val { font-family: var(--font-mono); text-align: right; color: var(--ink-2); }

/* ==========================================================================
   6. 基准提升对比
   ========================================================================== */

.bench__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--s5); margin-bottom: var(--s6); }
.bench__card {
  padding: var(--s5);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}
.bench__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s4);
}
.bench__name { font-size: .95rem; font-weight: 620; }
.bench__metric { font-family: var(--font-mono); font-size: .7rem; color: var(--ink-3); }
.bench__svg { width: 100%; height: auto; overflow: visible; }

.bench__row-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  fill: var(--ink-3);
}
.bench__row-label--hi { fill: var(--ink); font-weight: 600; }
.bench__val {
  font-family: var(--font-mono);
  font-size: 10px;
  fill: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.bench__val--hi { fill: var(--ink); font-weight: 600; }
.bench__val--low { fill: var(--danger); }
.bench__track { fill: var(--surface-2); rx: 4; }
.bench__bar {
  rx: 4;
  transform-box: fill-box;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform .95s var(--ease);
}
.bench__bar.is-in { transform: scaleX(1); }
.bench__bar--pro   { fill: #4A5470; }
.bench__bar--flash { fill: var(--brand); }
.bench__bar--rival { fill: #363D4F; }
.bench__delta {
  font-family: var(--font-mono);
  font-size: 10px;
  fill: var(--teal-ink);
  font-weight: 600;
}

.bench__foot { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); }

.bench__rivals { display: grid; gap: 5px; margin-top: var(--s3); }
.bench__rival {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s3);
  font-size: .78rem;
  color: var(--ink-3);
}
.bench__rival b { font-family: var(--font-mono); font-weight: 600; color: var(--ink-2); }
.bench__rival--ahead b { color: var(--teal-ink); }

/* 诚实边界列表 */
.limits { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s4); }
.limit-item {
  padding: var(--s5);
  border-radius: var(--r-lg);
  background: var(--danger-tint);
  border: 1px solid var(--danger-line);
}
.limit-item__head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s3); }
.limit-item__name { font-size: .92rem; font-weight: 620; }
.limit-item__cmp {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  font-family: var(--font-mono);
  font-size: 1.32rem;
  font-weight: 650;
  letter-spacing: -.02em;
  margin-bottom: var(--s3);
  font-variant-numeric: tabular-nums;
}
.limit-item__cmp .vs { font-size: .62rem; color: var(--ink-3); font-family: var(--font-sans); }
.limit-item__cmp .low { color: var(--danger); }
.limit-item__cmp .high { color: var(--ink-2); }
.limit-item__note { font-size: .82rem; color: var(--ink-2); line-height: 1.68; }
.limit-item__src { margin-top: var(--s3); font-family: var(--font-mono); font-size: .68rem; color: var(--ink-3); }