@charset "UTF-8";
/* ==========================================================================
   components.css · 按钮 / 卡片 / 数据卡 / 徽章 / chip / 表格（含移动卡片化） /
   瀑布图 / 时间轴 / SoD 条 / 三层防线 / 口径切换条 / 星级 / 抽屉 / toast /
   二维码占位 / 表单 / Markdown 正文 / 分页
   移动优先 + min-width 覆盖；表格与图表均同时输出两份 DOM，由 CSS 切换显示
   ========================================================================== */

/* ------------------------------ 按钮 ------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 10px var(--sp-5);
  font-size: var(--fs-base);
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--radius-ctl);
  background: transparent;
  color: var(--tx-1);
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.btn:active { transform: translateY(1px); }

.btn--sm { min-height: 40px; padding: 6px var(--sp-4); font-size: var(--fs-sm); }

.btn--primary {
  background: var(--grad-btn);
  color: #fff;
  box-shadow: 0 8px 24px rgba(37, 99, 235, .28); /* 全站唯二发光处之一 */
}

.btn--primary:hover {
  color: #fff;
  box-shadow: 0 12px 32px rgba(30, 58, 138, .32);
}

.btn--ghost {
  border-color: rgba(148, 163, 184, .5);
  color: var(--tx-1);
  background: #fff;
}

.btn--ghost:hover { border-color: var(--c-brand); color: var(--c-brand); }

.btn--link {
  min-height: auto;
  padding: 0;
  color: var(--c-brand);
  font-weight: 600;
  border: 0;
  background: none;
}

.btn--block { display: flex; width: 100%; }

.btn[disabled] { opacity: .55; pointer-events: none; }

/* ------------------------------ 通用卡片 ------------------------------ */

.card {
  position: relative;
  padding: var(--sp-5);
  background: #fff;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-1);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

@media (prefers-reduced-motion: reduce) {
  .card:hover { transform: none; }
}

.card__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.card__index { font-size: var(--fs-sm); color: var(--c-brand); font-weight: 700; }
.card__title { margin: 0; font-size: var(--fs-lg); }
.card__desc { margin: 0 0 var(--sp-3); color: var(--tx-2); font-size: var(--fs-sm); }
.card__points { margin: 0 0 var(--sp-3); padding-left: 1.1em; font-size: var(--fs-sm); color: var(--tx-2); }
.card__points li { margin-bottom: var(--sp-1); }
.card__foot { margin: 0; font-size: var(--fs-xs); color: var(--tx-3); }
.card__tag {
  display: inline-block;
  margin-right: var(--sp-2);
  padding: 2px var(--sp-2);
  background: var(--c-brand-100);
  color: var(--c-navy);
  border-radius: var(--radius-badge);
  font-size: var(--fs-xs);
}

.card--quote { border-left: 4px solid var(--c-brand); background: var(--bg-light); }
.card--quote p { font-size: var(--fs-md); color: var(--tx-1); }
.card__cite { font-size: var(--fs-xs); color: var(--tx-3); }

a.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--c-brand-2); }

/* 数据卡（硬指标） */
.card--stat { display: flex; flex-direction: column; gap: var(--sp-2); }

.data-card__num {
  margin: 0;
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--c-brand);
}

.data-card__unit { margin-left: 4px; font-size: var(--fs-md); color: var(--tx-2); }
.data-card__label { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--tx-1); }
.data-card__desc { margin: 0; font-size: var(--fs-sm); color: var(--tx-2); }
.data-card__foot { margin: 0; font-size: var(--fs-xs); color: var(--tx-3); }

.card--glow .data-card__num {
  text-shadow: 0 0 22px rgba(37, 99, 235, .35); /* Hero 关键数字专用发光 */
}

.card--post { display: block; }
.card--post .card__desc { min-height: 44px; }

/* ------------------------------ 徽章 / chip ------------------------------ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  border-radius: var(--radius-badge);
  background: var(--c-brand-100);
  color: var(--c-navy);
}

.badge--official { background: var(--c-navy); color: #fff; }
.badge--count { background: var(--bg-light); color: var(--tx-2); }
.badge--ok { background: rgba(16, 185, 129, .14); color: #047857; }
.badge--warn { background: rgba(239, 68, 68, .12); color: #B91C1C; }

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 4px var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--tx-2);
  background: #fff;
  border: 1px solid rgba(148, 163, 184, .4);
  border-radius: var(--radius-badge);
}

.chip:hover { border-color: var(--c-brand); color: var(--c-brand); }
.chip--active { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }

.chip-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ------------------------------ 表格 + 移动卡片化 ------------------------------ */

.table-wrap { margin-block: var(--sp-4); }

.table-scroll { display: none; overflow-x: auto; }

.card-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }

.card-list__item {
  padding: var(--sp-4);
  background: #fff;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-1);
}

.card-list__title { margin: 0 0 var(--sp-3); font-weight: 700; color: var(--tx-1); font-size: var(--fs-base); }

.card-list__row {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: var(--sp-3);
  padding-block: 6px;
  border-top: 1px solid rgba(148, 163, 184, .18);
  font-size: var(--fs-sm);
}

.card-list__label { color: var(--tx-3); }
.card-list__value { color: var(--tx-2); }
.card-list__row.is-hl { background: rgba(37, 99, 235, .07); border-radius: var(--radius-ctl); }

@media (min-width: 640px) {
  .table-scroll { display: block; }
  .card-list { display: none; }
}

.table {
  width: 100%;
  font-size: var(--fs-sm);
  background: #fff;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}

.table th,
.table td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(148, 163, 184, .22);
}

.table thead th {
  background: var(--bg-light);
  color: var(--tx-1);
  font-weight: 700;
  white-space: nowrap;
}

.table tbody tr:last-child td { border-bottom: 0; }
.table td.is-hl { background: rgba(37, 99, 235, .07); font-weight: 600; color: var(--tx-1); }
.table--dense th, .table--dense td { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); }

.table--sticky th:first-child,
.table--sticky td:first-child {
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 1;
}

.table-scroll { position: relative; }

.table-scroll::after {
  content: "";
  position: sticky;
  top: 0;
  right: 0;
  display: block;
  width: 0;
}

/* ------------------------------ 星级评分 ------------------------------ */

.star-rating { display: inline-flex; align-items: center; gap: 2px; }

.star-rating__star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tx-3);
  transition: color .14s ease, transform .14s ease;
}

.star-rating__star.is-on { color: var(--c-amber); }
.star-rating:not(.star-rating--readonly) .star-rating__star:hover { color: var(--c-amber); transform: scale(1.08); }
.star-rating--readonly .star-rating__star { width: 20px; height: 20px; }
.star-rating__avg { margin-left: var(--sp-2); font-weight: 700; color: var(--c-amber); }
.star-rating__count { font-size: var(--fs-xs); color: var(--tx-3); }

/* /roles/ 与其它权限组件禁用琥珀：改用蓝的 Ih区块由页面 + 本规则兜底 */
.section--no-amber .star-rating__avg,
.section--no-amber .star-rating__star.is-on { color: var(--c-brand); }

/* ------------------------------ 瀑布图 ------------------------------ */

.waterfall { margin-top: var(--sp-4); }

.waterfall__chart { display: none; }

.waterfall__svg { width: 100%; height: auto; }

.wf-axis { stroke: rgba(148, 163, 184, .5); stroke-width: 1; }
.wf-origin { fill: #94A3B8; }
.wf-base { fill: #CBD5E1; }
.wf-add { fill: var(--c-amber); }
.wf-final { fill: var(--c-brand); }
.wf-link { stroke: rgba(148, 163, 184, .8); stroke-width: 1; stroke-dasharray: 4 3; }

.wf-total { font-family: var(--font-mono); font-size: 13px; fill: var(--tx-1); }
.wf-delta { font-family: var(--font-mono); font-size: 12px; fill: #B45309; }
.wf-label { font-size: 13px; fill: var(--tx-2); }
.wf-index { font-size: 11px; fill: var(--tx-3); }

.waterfall__step { cursor: pointer; }
.waterfall__step:hover .wf-add, .waterfall__step:focus .wf-add { fill: #D97706; }
.waterfall__step:hover .wf-final, .waterfall__step:focus .wf-final { fill: var(--c-navy); }

.waterfall__list { list-style: none; margin: 0; padding: 0; position: relative; }
.waterfall__list::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: rgba(148, 163, 184, .35);
}

.wf-row { position: relative; margin: 0 0 var(--sp-3); padding-left: var(--sp-5); }

.wf-row__dot {
  position: absolute;
  left: 0;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--c-amber);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .18);
}

.wf-row--final .wf-row__dot { background: var(--c-brand); box-shadow: 0 0 0 3px rgba(37, 99, 235, .18); }

.wf-row__label { margin: 0 0 2px; font-weight: 700; color: var(--tx-1); }
.wf-row__idx { display: inline-block; margin-right: var(--sp-2); color: var(--c-brand); }
.wf-row__note { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); color: var(--tx-2); }
.wf-row__delta { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: 2px; }
.wf-row__tag {
  padding: 1px var(--sp-2);
  font-size: var(--fs-xs);
  border-radius: var(--radius-badge);
  background: rgba(245, 158, 11, .16);
  color: #B45309;
}
.wf-row__tag--muted { background: var(--bg-light); color: var(--tx-3); }
.wf-row__num { color: #B45309; font-weight: 700; }
.wf-row__total { margin: 0; font-size: var(--fs-sm); color: var(--tx-2); }
.wf-row__prev { color: var(--tx-3); font-size: var(--fs-xs); }

@media (min-width: 768px) {
  .waterfall__chart { display: block; }
  .waterfall__list { display: none; }
}

/* ------------------------------ 时间轴 ------------------------------ */

.timeline { list-style: none; margin: var(--sp-4) 0 0; padding: 0 0 0 var(--sp-5); border-left: 2px solid rgba(148, 163, 184, .3); }
.timeline__item { position: relative; margin-bottom: var(--sp-5); }

.timeline__dot {
  position: absolute;
  left: -9px;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--c-brand);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .16);
}

.timeline__meta { margin: 0; font-size: var(--fs-xs); color: var(--tx-3); }
.timeline__title { margin: 0 0 var(--sp-2); font-size: var(--fs-md); }
.timeline__desc { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); color: var(--tx-2); }
.timeline__note { margin: 0; font-size: var(--fs-sm); color: var(--c-navy); background: var(--c-brand-100); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-ctl); }

/* ------------------------------ SoD 流程条 ------------------------------ */

.sod-bar {
  padding: var(--sp-4);
  background: #fff;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-1);
}

.sod-bar__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }

.sod-bar__node {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  min-height: 44px;
  border-radius: var(--radius-badge);
  background: var(--bg-light);
  color: var(--tx-1);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.sod-bar__role { font-weight: 400; color: var(--tx-3); font-size: var(--fs-xs); }
.sod-bar__ok { background: rgba(16, 185, 129, .14); color: #047857; }
.sod-bar__arrow { color: var(--tx-3); display: inline-flex; }
.sod-bar__block {
  margin: var(--sp-3) 0 0;
  padding-top: var(--sp-3);
  border-top: 1px dashed rgba(239, 68, 68, .45);
  font-size: var(--fs-sm);
  color: #B91C1C;
}

.sod-bar--compact { padding: var(--sp-3); }

/* ------------------------------ 三层防线 ------------------------------ */

.defense-3 { display: grid; gap: var(--sp-3); }

.defense-3__layer {
  padding: var(--sp-4);
  border-radius: var(--radius-card);
  border: 1px solid rgba(148, 163, 184, .28);
  background: #fff;
  box-shadow: var(--shadow-1);
}

.defense-3__layer--1 { width: 100%; }
.defense-3__layer--2 { width: 100%; }
.defense-3__layer--3 { width: 100%; }

@media (min-width: 768px) {
  .defense-3 { justify-items: center; }
  .defense-3__layer--1 { width: 100%; }
  .defense-3__layer--2 { width: 84%; }
  .defense-3__layer--3 { width: 68%; }
}

.defense-3__level { margin: 0 0 var(--sp-2); font-weight: 700; color: var(--c-navy); }
.defense-3__text { margin: 0; font-size: var(--fs-sm); color: var(--tx-2); }
.defense-3__foot { margin: var(--sp-3) 0 0; text-align: center; font-weight: 700; color: var(--tx-1); }

/* ------------------------------ 口径切换条 ------------------------------ */

.caliber-bar {
  margin-top: var(--sp-5);
  padding: var(--sp-3);
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(148, 163, 184, .3);
  border-radius: var(--radius-card);
}

.page-cost-model .caliber-bar,
.page-features .caliber-bar,
.white-caliber .caliber-bar {
  background: var(--bg-light);
  border-color: rgba(148, 163, 184, .4);
}

.caliber-bar__inner { display: grid; gap: var(--sp-2); }

@media (min-width: 640px) {
  .caliber-bar__inner { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
}

.caliber-bar__seg {
  display: flex;
  padding: 3px;
  background: rgba(148, 163, 184, .22);
  border-radius: var(--radius-badge);
}

.caliber-bar__btn {
  flex: 1;
  min-height: 40px;
  padding: 6px var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--tx-on-dark-2);
  background: transparent;
  border: 0;
  border-radius: var(--radius-badge);
  white-space: nowrap;
}

.page-cost-model .caliber-bar__btn,
.page-features .caliber-bar__btn,
.white-caliber .caliber-bar__btn { color: var(--tx-2); }

.caliber-bar__btn.is-active { background: var(--c-brand); color: #fff; font-weight: 700; }

@media (max-width: 639px) {
  .caliber-bar__seg { width: 100%; }
}

/* ------------------------------ 表单 ------------------------------ */

.field { margin-bottom: var(--sp-4); }
.field__label { display: block; margin-bottom: var(--sp-2); font-size: var(--fs-sm); font-weight: 600; color: var(--tx-1); }
.field__req { color: var(--c-red); }
.field__hint { font-size: var(--fs-xs); color: var(--tx-3); }

.input,
.select,
.textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px var(--sp-3);
  font: inherit;
  color: var(--tx-1);
  background: #fff;
  border: 1px solid rgba(148, 163, 184, .5);
  border-radius: var(--radius-ctl);
}

.textarea { min-height: 120px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--c-brand); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--c-red); }

.field__error {
  display: none;
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-xs);
  color: #B91C1C;
}

.field__error.is-show { display: block; }

.checkbox { display: flex; align-items: flex-start; gap: var(--sp-3); min-height: 44px; }
.checkbox input { width: 20px; height: 20px; margin-top: 6px; accent-color: var(--c-brand); }
.checkbox span { font-size: var(--fs-sm); color: var(--tx-2); }

.choice-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.form-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 640px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid .field--full { grid-column: 1 / -1; }
}

.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); }
.form-note { flex: 1 1 260px; margin: 0; font-size: var(--fs-xs); color: var(--tx-3); }

.form-success {
  padding: var(--sp-6);
  text-align: center;
  background: #fff;
  border: 1px solid rgba(16, 185, 129, .4);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-1);
}

.form-success h3 { color: #047857; }

/* ------------------------------ Markdown 正文 ------------------------------ */

.md-body { font-size: var(--fs-md); color: var(--tx-2); }
.md-body p { color: var(--tx-2); }
.md-h2 { margin-top: var(--sp-6); font-size: var(--fs-xl); }
.md-h3 { margin-top: var(--sp-5); font-size: var(--fs-lg); }
.md-pre { background: var(--bg-dark); color: #E2E8F0; padding: var(--sp-4); border-radius: var(--radius-ctl); overflow-x: auto; }
.md-quote { margin: var(--sp-4) 0; padding: var(--sp-3) var(--sp-4); border-left: 4px solid var(--c-brand-2); background: var(--bg-light); color: var(--tx-2); }
.md-list li { margin-bottom: var(--sp-2); }
.md-body code { padding: 2px 6px; background: var(--bg-light); border-radius: 4px; font-size: var(--fs-sm); }
.md-body a { text-decoration: underline; }

/* ------------------------------ 提示条 / 抽屉 / toast / 二维码 ------------------------------ */

.prompt-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: rgba(37, 99, 235, .10);
  border: 1px solid rgba(37, 99, 235, .30);
  border-radius: var(--radius-ctl);
  font-size: var(--fs-sm);
  color: var(--tx-1);
}

/* 钱/成本语境专用变体（当前全站无页面启用，保留以合规口径） */
.prompt-bar--cost {
  background: rgba(245, 158, 11, .12);
  border-color: rgba(245, 158, 11, .35);
}

.prompt-bar__link { margin-left: auto; font-weight: 600; }

.drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  background: rgba(15, 23, 42, .55);
}

.drawer--open { display: block; }

.drawer__panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  max-width: 560px;
  padding: var(--sp-5);
  background: var(--bg-light);
  overflow-y: auto;
  box-shadow: var(--shadow-3);
}

@media (min-width: 768px) {
  .drawer__panel { padding: var(--sp-6); }
}

.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); }

.drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(148, 163, 184, .4);
  border-radius: var(--radius-ctl);
  background: #fff;
  color: var(--tx-1);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  z-index: 120;
  transform: translate(-50%, 12px);
  padding: var(--sp-3) var(--sp-5);
  background: rgba(15, 23, 42, .94);
  color: #fff;
  border-radius: var(--radius-badge);
  font-size: var(--fs-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

.toast.is-show { opacity: 1; transform: translate(-50%, 0); }
.toast--error { background: #B91C1C; }

.qr-placeholder {
  width: 128px;
  height: 128px;
  border: 1px solid rgba(148, 163, 184, .5);
  border-radius: var(--radius-ctl);
  background-image:
    linear-gradient(45deg, var(--c-navy) 25%, transparent 25%, transparent 75%, var(--c-navy) 75%),
    linear-gradient(45deg, var(--c-navy) 25%, transparent 25%, transparent 75%, var(--c-navy) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
  background-color: var(--c-brand-100);
}

.empty { padding: var(--sp-6); text-align: center; color: var(--tx-2); background: #fff; border: 1px dashed rgba(148, 163, 184, .5); border-radius: var(--radius-card); }
.empty__text { margin-bottom: var(--sp-3); }

.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-5); }

.pagination__btn {
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--sp-3);
  border: 1px solid rgba(148, 163, 184, .45);
  border-radius: var(--radius-ctl);
  background: #fff;
  color: var(--tx-1);
  font-size: var(--fs-sm);
}

.pagination__btn.is-active { background: var(--c-brand); border-color: var(--c-brand); color: #fff; font-weight: 700; }
.pagination__btn[disabled] { opacity: .5; pointer-events: none; }
.pagination__info { margin-left: auto; font-size: var(--fs-xs); color: var(--tx-3); }

/* 其它小组件 */

.metric-row { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.metric { min-width: 120px; }
.metric__label { margin: 0; font-size: var(--fs-xs); color: var(--tx-3); }
.metric__value { margin: 0; font-size: var(--fs-xl); font-weight: 800; color: var(--tx-1); }

.solo-diagram {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: #fff;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-1);
  text-align: center;
}

.solo-diagram__box {
  padding: var(--sp-4);
  border-radius: var(--radius-ctl);
  background: var(--bg-light);
  border: 1px solid rgba(37, 99, 235, .35);
  font-weight: 700;
  color: var(--tx-1);
}

.solo-diagram__arrow { color: var(--c-brand); }
.solo-diagram__note { margin: 0; font-size: var(--fs-xs); color: var(--tx-3); }

.copy-btn { display: inline-flex; align-items: center; gap: var(--sp-2); }

.kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
@media (min-width: 768px) { .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.kpi-card { padding: var(--sp-3) var(--sp-4); background: #fff; border: 1px solid rgba(148, 163, 184, .28); border-radius: var(--radius-ctl); box-shadow: var(--shadow-1); }
.kpi-card__label { margin: 0; font-size: var(--fs-xs); color: var(--tx-3); }
.kpi-card__value { margin: 0; font-size: clamp(18px, 2.4vw, 24px); font-weight: 800; color: var(--c-brand); }