/* ============================================================
   TEEZE · 品牌数据条样式（Proof Rail）
   v2（2026-09-04）：新增「序号/数值/说明」整体组合的字体/字号/字重/颜色、
   对齐方式、位置参数；数值滚动计数动画由 tz-proof.js 实现。
   ============================================================ */
.tz-proof {
  --tz-black: #000;
  --tz-yellow: #efa333;
  --tz-bg: #0b0b0b;
  --tz-muted: #8b8b8b;
  --tz-line: rgba(255, 255, 255, .13);
  --tz-display: "Arial Narrow", "Helvetica Neue Condensed", "Helvetica Neue", Arial, sans-serif;
  --tz-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tz-mono: Consolas, "SFMono-Regular", "Liberation Mono", monospace;
  --tz-serif: Georgia, "Times New Roman", "Songti SC", serif;
  --tz-gutter: clamp(18px, 3vw, 40px);
}
.tz-proof, .tz-proof *, .tz-proof *::before, .tz-proof *::after { box-sizing: border-box; }
.tz-proof {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0 var(--tz-gutter);
  background: var(--tz-bg);
  border-top: 1px solid var(--tz-line);
  border-bottom: 1px solid var(--tz-line);
  color: var(--tz-white, #fff);
  font-family: var(--tz-sans);
  line-height: 1.55;
}

/* ====== 字体 class（作用域内） ====== */
.tz-proof .tz-ff-display { font-family: var(--tz-display); }
.tz-proof .tz-ff-sans    { font-family: var(--tz-sans); }
.tz-proof .tz-ff-mono    { font-family: var(--tz-mono); }
.tz-proof .tz-ff-serif   { font-family: var(--tz-serif); }

/* ====== 每个数据项 = 序号/数值/说明 三部分整体组合 ====== */
.tz-proof .tz-proof-stat {
  min-height: 170px;
  padding-top: var(--tz-pad-top, 30px);
  padding-bottom: var(--tz-pad-bottom, 30px);
  padding-left: clamp(16px, 2.5vw, 38px);
  padding-right: clamp(16px, 2.5vw, 38px);
  border-right: 1px solid var(--tz-line);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: left;
}
.tz-proof .tz-proof-stat:first-child { border-left: 1px solid var(--tz-line); }

/* 对齐方式 */
.tz-proof .tz-proof-stat.tz-align-left   { text-align: left; }
.tz-proof .tz-proof-stat.tz-align-center { text-align: center; }
.tz-proof .tz-proof-stat.tz-align-right  { text-align: right; }

/* 侧边界距离：左对齐→左 padding，右对齐→右 padding，居中保持默认 */
.tz-proof .tz-proof-stat.tz-align-left  { padding-left: var(--tz-pad-side, 16px); }
.tz-proof .tz-proof-stat.tz-align-right { padding-right: var(--tz-pad-side, 16px); }

/* ====== 三部分样式（变量注入，均带默认值兜底） ====== */
.tz-proof .tz-stat-index {
  color: var(--tz-idx-color, var(--tz-muted));
  font-weight: var(--tz-idx-weight, 600);
  font-size: var(--tz-idx-size, 10px);
}
.tz-proof .tz-stat-value {
  color: var(--tz-val-color, var(--tz-yellow));
  font-weight: var(--tz-val-weight, 500);
  font-size: var(--tz-val-size, clamp(26px, 3vw, 42px));
  line-height: 1.05;
}
.tz-proof .tz-stat-caption {
  margin: 8px 0 0;
  color: var(--tz-cap-color, var(--tz-white));
  font-weight: var(--tz-cap-weight, 700);
  font-size: var(--tz-cap-size, 11px);
  letter-spacing: .08em;
}

/* ====== 脚注 ====== */
.tz-proof small { position: absolute; right: var(--tz-gutter); bottom: 7px; color: var(--tz-muted); font-size: 9px; }

@media (max-width: 1050px) { .tz-proof { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) {
  .tz-proof { grid-template-columns: 1fr; }
  .tz-proof .tz-proof-stat, .tz-proof .tz-proof-stat:first-child {
    min-height: auto;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid var(--tz-line);
  }
  .tz-proof small { position: static; padding: 14px 10px; }
}
/* 设备可见性：PC / 移动端分别隐藏整块 */
@media (min-width: 768px) {
  .tz-proof.tz-hide-pc { display: none !important; }
}
@media (max-width: 767px) {
  .tz-proof.tz-hide-mobile { display: none !important; }
}