@layer components {
  /* 数字证据带：导线横穿、大号 tabular 数字、旧值灰删除线 */
  .metrics { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
  .metrics::before {
    content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, var(--cyan) 0 10%, var(--line-strong) 10% 90%, var(--amber) 90%);
    opacity: .5;
  }
  .metric-item { position: relative; padding: var(--s-6) var(--s-5); display: grid; gap: var(--s-2); align-content: start; border-right: 1px solid var(--line); background: var(--bg); }
  .metric-item:last-child { border-right: 0; }
  .metric-item::before { content: attr(data-no); position: absolute; top: var(--s-3); right: var(--s-4); font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; color: var(--muted); }
  .metric-label { font-size: var(--t-sm); color: var(--muted); line-height: 1.4; order: 3; min-height: 2.8em; }
  .metric-old { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in oklab, var(--muted) 55%, transparent); order: 1; display: flex; align-items: center; gap: var(--s-2); }
  .metric-old::after { content: "→"; text-decoration: none; display: inline-block; color: var(--cyan-ink); }
  .metric-new { order: 2; font-size: clamp(1.75rem, 1rem + 2.4vw, 2.75rem); color: var(--text); line-height: 1.05; display: flex; align-items: baseline; gap: .12em; flex-wrap: wrap; }
  .metric-new .num { color: var(--cyan-ink); }
  .metric-new .unit { font-size: .5em; color: var(--muted); font-family: var(--font-cjk); font-weight: 500; }
  .metric-item:last-child .metric-new .num { color: var(--amber); }
  .metrics-foot { margin-top: var(--s-3); font-size: var(--t-xs); color: var(--muted); font-family: var(--font-mono); letter-spacing: .04em; }

  @media (max-width: 1023px) {
    .metrics { grid-template-columns: 1fr 1fr; }
    .metric-item:nth-child(2) { border-right: 0; }
    .metric-item:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
    .metrics::before { display: none; }
  }
  @media (max-width: 479px) {
    .metrics { grid-template-columns: 1fr; }
    .metric-item { border-right: 0; border-bottom: 1px solid var(--line); padding: var(--s-5) var(--s-4); }
    .metric-item:last-child { border-bottom: 0; }
  }
}