/* ==========================================================================
   components.css — 卡片、徽章、按钮、表格、提示块、示图容器
   规范红线：任何卡片/色块都不得出现左侧或顶部的局部彩条。
   层级区分一律使用「整卡浅色 tint / 徽章容器 / 大圆角+柔和阴影 / 整圈细边框」。
   ========================================================================== */

/* ------------------------------ 卡片 ------------------------------ */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s6);
  box-shadow: var(--shadow-1);
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card--hover:hover {
  border-color: var(--line-strong);
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}
.card--flush { padding: 0; overflow: hidden; }
.card--tint-brand  { background: var(--brand-tint);  border-color: var(--brand-line); }
.card--tint-teal   { background: var(--teal-tint);   border-color: var(--teal-line); }
.card--tint-amber  { background: var(--amber-tint);  border-color: var(--amber-line); }
.card--tint-danger { background: var(--danger-tint); border-color: var(--danger-line); }

.card__title { font-size: 1.02rem; font-weight: 620; margin-bottom: var(--s2); }
.card__body  { font-size: .9rem; color: var(--ink-2); line-height: 1.72; }
.card__foot  { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); }

/* 图标容器：圆角方形徽章底，用容器底色表达层级 */
.icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 11px;
  background: var(--brand-tint);
  border: 1px solid var(--brand-line);
  color: var(--brand-ink);
  flex-shrink: 0;
}
.icon-box svg { width: 19px; height: 19px; }
.icon-box--teal   { background: var(--teal-tint);   border-color: var(--teal-line);   color: var(--teal-ink); }
.icon-box--amber  { background: var(--amber-tint);  border-color: var(--amber-line);  color: var(--amber-ink); }
.icon-box--danger { background: var(--danger-tint); border-color: var(--danger-line); color: var(--danger); }
.icon-box--sm { width: 30px; height: 30px; border-radius: 9px; }
.icon-box--sm svg { width: 16px; height: 16px; }

/* ------------------------------ 徽章与标签 ------------------------------ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: .75rem;
  color: var(--ink-2);
  white-space: nowrap;
}
.badge svg { width: 13px; height: 13px; }
.badge--brand  { background: var(--brand-tint);  border-color: var(--brand-line);  color: var(--brand-ink); }
.badge--teal   { background: var(--teal-tint);   border-color: var(--teal-line);   color: var(--teal-ink); }
.badge--amber  { background: var(--amber-tint);  border-color: var(--amber-line);  color: var(--amber-ink); }
.badge--danger { background: var(--danger-tint); border-color: var(--danger-line); color: var(--danger); }
.badge--mono   { font-family: var(--font-mono); font-size: .72rem; }

.badge-row { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* 序号徽章（替代左边框彩条来标层级） */
.step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px; height: 26px;
  padding: 0 8px;
  border-radius: var(--r-full);
  background: var(--brand-tint);
  border: 1px solid var(--brand-line);
  color: var(--brand-ink);
  font-family: var(--font-mono);
  font-size: .76rem;
  font-weight: 600;
  flex-shrink: 0;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: var(--r);
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--ink);
  font-size: .875rem;
  font-weight: 500;
  transition: background .22s var(--ease), border-color .22s var(--ease),
              color .22s var(--ease), transform .12s var(--ease);
}
.btn:hover  { background: var(--surface-3); border-color: rgba(255,255,255,.24); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; }

.btn--primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.btn--primary:hover { background: #5F7AFF; border-color: #5F7AFF; }

.btn--ghost { background: transparent; border-color: var(--line); color: var(--ink-2); }
.btn--ghost:hover { background: var(--surface); color: var(--ink); }

.btn--sm { padding: 6px 12px; font-size: .8rem; border-radius: var(--r-sm); }

/* 分段控件：一组互斥选项（阶段切换、模式切换） */
.segmented {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  border-radius: var(--r);
  background: var(--surface-2);
  border: 1px solid var(--line);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.segmented::-webkit-scrollbar { display: none; }
.segmented button {
  padding: 7px 14px;
  border-radius: 9px;
  font-size: .83rem;
  color: var(--ink-3);
  white-space: nowrap;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.segmented button:hover { color: var(--ink-2); }
.segmented button[aria-pressed="true"] {
  background: var(--brand);
  color: #fff;
  box-shadow: var(--shadow-1);
}
.segmented--teal button[aria-pressed="true"] { background: var(--teal); color: #04231C; }
.segmented--amber button[aria-pressed="true"] { background: var(--amber); color: #2B1D05; }

/* ------------------------------ 示图面板 ------------------------------ */

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
.panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s4);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line);
  background: var(--bg-elev);
}
.panel__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .92rem;
  font-weight: 620;
  margin-right: auto;
}
.panel__title svg { width: 17px; height: 17px; color: var(--brand-ink); flex-shrink: 0; }
.panel__body { padding: var(--s5); }
.panel__foot {
  padding: var(--s3) var(--s5) var(--s4);
  border-top: 1px solid var(--line);
  background: var(--bg-elev);
  font-size: .78rem;
  color: var(--ink-3);
  line-height: 1.65;
}
.panel__foot strong { color: var(--ink-2); font-weight: 600; }

/* 控件行 */
.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s4);
}

/* 图例 */
.legend { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.legend__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .78rem;
  color: var(--ink-3);
}
.legend__swatch {
  width: 11px; height: 11px;
  border-radius: 3px;
  flex-shrink: 0;
  background: var(--ink-3);
}
.legend__swatch--brand { background: var(--brand); }
.legend__swatch--teal  { background: var(--teal); }
.legend__swatch--amber { background: var(--amber); }
.legend__swatch--dim   { background: var(--surface-3); border: 1px solid var(--line-strong); }
.legend__swatch--danger{ background: var(--danger); }

/* ------------------------------ 表单控件 ------------------------------ */

.field { display: grid; gap: 7px; min-width: 0; }
.field__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  font-size: .8rem;
  color: var(--ink-2);
}
.field__hint { font-size: .72rem; color: var(--ink-3); }
.field__value { font-family: var(--font-mono); font-size: .84rem; color: var(--ink); }

.input {
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: .88rem;
  font-variant-numeric: tabular-nums;
  transition: border-color .2s var(--ease);
}
.input:hover  { border-color: rgba(255,255,255,.26); }
.input:focus  { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }

/* 滑杆：统一跨浏览器外观 */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: var(--surface-3);
}
input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--surface-3);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px; height: 16px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--brand);
  border: 2px solid #0A0C11;
  box-shadow: 0 0 0 1px var(--brand);
  transition: transform .15s var(--ease);
}
input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--brand);
  border: 2px solid #0A0C11;
  box-shadow: 0 0 0 1px var(--brand);
}
input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.12); }
input[type="range"]:focus-visible { outline-offset: 4px; }

/* ------------------------------ 数据表 ------------------------------ */

.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}
.tbl th, .tbl td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.tbl thead th {
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--bg-elev);
}
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: rgba(255, 255, 255, .022); }
.tbl td.num, .tbl th.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.tbl .is-best { color: var(--teal-ink); font-weight: 600; }
.tbl .is-weak { color: var(--danger); }

/* 键值明细 */
.deflist { display: grid; gap: 0; }
.deflist__row {
  display: grid;
  grid-template-columns: minmax(120px, 34%) 1fr;
  gap: var(--s4);
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: .875rem;
}
.deflist__row:last-child { border-bottom: 0; }
.deflist__key { color: var(--ink-3); }
.deflist__val { color: var(--ink); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.deflist__val span { font-family: var(--font-sans); }

/* ------------------------------ 提示块 ------------------------------ */
/* 用整块 tint + 图标容器，不做左侧竖线 */

.callout {
  display: flex;
  gap: var(--s4);
  padding: var(--s5);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.callout__icon {
  width: 32px; height: 32px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--surface-3);
  color: var(--ink-2);
}
.callout__icon svg { width: 17px; height: 17px; }
.callout__title { font-size: .9rem; font-weight: 620; margin-bottom: 5px; }
.callout__body  { font-size: .875rem; color: var(--ink-2); line-height: 1.72; }
.callout--note   { background: var(--brand-tint);  border-color: var(--brand-line); }
.callout--note   .callout__icon { background: rgba(77,107,254,.2);  color: var(--brand-ink); }
.callout--teal   { background: var(--teal-tint);   border-color: var(--teal-line); }
.callout--teal   .callout__icon { background: rgba(53,214,176,.2);  color: var(--teal-ink); }
.callout--warn   { background: var(--amber-tint);  border-color: var(--amber-line); }
.callout--warn   .callout__icon { background: rgba(240,180,80,.2);  color: var(--amber-ink); }
.callout--danger { background: var(--danger-tint); border-color: var(--danger-line); }
.callout--danger .callout__icon { background: rgba(255,128,128,.18); color: var(--danger); }

/* ------------------------------ 代码 ------------------------------ */

.code {
  display: block;
  padding: var(--s4) var(--s5);
  border-radius: var(--r);
  background: var(--bg);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: .84rem;
  color: var(--teal-ink);
  overflow-x: auto;
  line-height: 1.7;
}
code.inline {
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: .85em;
  color: var(--ink);
}

/* ------------------------------ 进入视口的揭示动画 ------------------------------ */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* 强调动效：只播一次的高亮脉冲，用于「890 字节」这类关键数字 */
@keyframes dsx-pop {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(53, 214, 176, .45); }
  45%  { transform: scale(1.035); box-shadow: 0 0 0 12px rgba(53, 214, 176, 0); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(53, 214, 176, 0); }
}
.is-pop { animation: dsx-pop 1.1s var(--ease) 1; }