/* ---------- 我的资产页 ---------- */
.page-head { margin-bottom: 32px; }
.page-head-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-head .head-rule { width: 40px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--primary), var(--accent)); margin-bottom: 12px; }
.page-head h1 { color: var(--primary); }
.page-head p { color: var(--on-surface-variant); margin-top: 8px; }
.btn-share-hero { background: var(--accent); border-color: var(--accent); color: var(--primary); }
.btn-share-hero:hover { background: var(--secondary); border-color: var(--secondary); color: #ffffff; }

.assets-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 40px; }
.asset-card {
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: 16px;
  box-shadow: var(--shadow-ambient-1);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  cursor: pointer;
  transition: all 0.25s;
}
.asset-card:hover { box-shadow: var(--shadow-ambient-hover); border-color: var(--accent); transform: translateY(-2px); }
.asset-head { display: flex; justify-content: space-between; align-items: flex-start; }
.asset-head h3 { font-size: 18px; font-weight: 700; color: var(--on-surface); }
.asset-score {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(0,229,255,0.35);
  font-size: 14px; font-weight: 700; color: var(--secondary);
  flex-shrink: 0;
}
.asset-card:nth-child(2) .asset-score { border-color: rgba(0,0,0,0.18); color: var(--primary); }
.asset-card:nth-child(3) .asset-score { border-color: rgba(116,120,120,0.25); color: var(--outline); }
.asset-specs { display: flex; flex-direction: column; gap: 10px; }
.asset-spec { display: flex; align-items: center; gap: 8px; }
.asset-spec svg { width: 18px; height: 18px; color: var(--outline); flex-shrink: 0; }
.asset-spec span { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--on-surface-variant); }
.asset-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--outline); text-transform: uppercase; }

/* 旗舰资产卡 */
.zero-card {
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: 16px;
  box-shadow: var(--shadow-ambient-1);
  overflow: hidden;
}
.zero-hero {
  background: var(--primary-container);
  color: var(--on-primary);
  padding: 48px;
  position: relative;
  overflow: hidden;
}
.zero-hero::after {
  content: "";
  position: absolute; top: -80px; right: -80px;
  width: 256px; height: 256px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.12;
  filter: blur(48px);
}
.zero-hero-inner { display: flex; justify-content: space-between; align-items: flex-start; position: relative; z-index: 1; gap: 24px; flex-wrap: wrap; }
.zero-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--surface-dim); margin-bottom: 16px; }
.zero-title { font-size: 44px; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: var(--surface-container-lowest); }
.zero-sub { font-size: 24px; font-weight: 700; color: var(--accent); }
.zero-badge {
  width: 128px; height: 128px; border-radius: 50%;
  border: 4px solid rgba(0,229,255,0.35);
  background: var(--surface-container-lowest);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  flex-shrink: 0;
}
.zero-badge .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--on-surface-variant); }
.zero-badge .num { font-size: 40px; font-weight: 800; color: var(--accent); line-height: 1.1; }
.zero-badge .lvl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--outline); }

.zero-section { padding: 40px 48px; border-bottom: 1px solid var(--outline-variant); }
.zero-section h3 {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--on-surface-variant);
  border-bottom: 1px solid var(--outline-variant);
  padding-bottom: 8px;
  margin-bottom: 32px;
}
.spec-grid {
  display: grid;
  grid-template-columns: 1.9fr repeat(3, 1fr);
  grid-auto-rows: 410px;
  grid-auto-rows: calc(1.55 * (100cqw - 48px) / 4.9);
  column-gap: 16px;
  row-gap: 22px;
}
.hw-cards-section { container-type: inline-size; }
/* 硬件卡两行布局：第一行 显卡(整行横卡，左图右文)；第二行 内存条(宽列约 1.9x) + 主板+CPU+硬盘(小卡) */
.spec-gpu   { grid-column: 1 / -1; grid-row: 1; }
.spec-cpu   { grid-column: 2; grid-row: 2; }
.spec-board { grid-column: 1; grid-row: 2; }
.spec-mem   { grid-column: 3; grid-row: 2; }
.spec-disk  { grid-column: 4; grid-row: 2; }
/* 第一行显卡：整行横卡，左图右文 */
.spec-gpu.spec-block { flex-direction: row; }
.spec-gpu .spec-cover { flex: 0 0 62%; height: 100%; }
.spec-gpu .spec-body  { flex: 1 1 auto; justify-content: center; padding: 28px 36px; gap: 12px; }
.spec-gpu .spec-body .v { font-size: 24px; }
.spec-gpu .spec-body .d { font-size: 13px; line-height: 1.4; }
.spec-gpu .spec-body .bp-grade { width: 54px; height: 54px; font-size: 26px; border-radius: 13px; }
.spec-block {
  display: flex; flex-direction: column; gap: 0;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  min-width: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  border: 1px solid #ececef;
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.28s ease;
}
.spec-block:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(0,0,0,0.14), 0 4px 10px rgba(0,0,0,0.06);
}
.spec-cover {
  position: relative;
  width: 100%;
  flex: 1 1 68%;
  min-height: 0;
  overflow: hidden;
  background: #ffffff;
}
.spec-cover img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* 硬件卡（显卡/CPU/主板/内存/硬盘）图片缩小显示 */
.spec-gpu .spec-cover img,
.spec-cpu .spec-cover img,
.spec-board .spec-cover img,
.spec-mem .spec-cover img,
.spec-disk .spec-cover img {
  object-fit: contain;
  padding: 12%;
  box-sizing: border-box;
  will-change: transform;
  transition: transform 0.18s ease-out;
}
/* 显卡图单独调整：contain 完整显示 + 留边（2026-10-20 A 方案：不裁切，约 -12%） */
.spec-gpu .spec-cover img {
  object-fit: contain;
  padding: 5%;
}
/* CPU 图缩小 */
.spec-cpu .spec-cover img {
  padding: 11%;
}
.spec-gpu .spec-cover {
  background: #ffffff;
}
/* 主板卡宣传图白底融合 */
.spec-board .spec-cover {
  background: #ffffff;
}
.spec-board .spec-cover img {
  padding: 3%;
}
/* 内存条图放大 */
.spec-mem .spec-cover img {
  padding: 6%;
}
/* 检测硬件 ↔ 维基对应：命中条目可点击跳转维基 */
.spec-block.linkable { cursor: pointer; }
.spec-body {
  flex: 0 0 32%; min-width: 0;
  padding: 13px 14px 14px;
  display: flex; flex-direction: column; gap: 8px;
  box-sizing: border-box;
}
.spec-block .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: #6b7075; margin-bottom: 0; text-transform: uppercase; }
.spec-block .v { font-size: 15px; font-weight: 600; color: #191c1d; margin-bottom: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spec-block .d {
  font-family: var(--font-mono); font-size: 11px; color: #6b7075; line-height: 1.5;
  border-top: 1px solid #ececef;
  padding-top: 8px; margin-top: 2px;
}
.spec-tags {
  display: flex; align-items: center; gap: 8px;
  border-top: 1px solid #ececef;
  padding-top: 9px; margin-top: 2px;
  min-width: 0;
}
.spec-tag {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: #191c1d; background: #f0f1f2;
  border-radius: 6px; padding: 2px 8px;
  flex-shrink: 0;
}
.spec-tag-sep { width: 1px; height: 12px; background: #d5d7da; flex-shrink: 0; }
.spec-tags .d {
  font-family: var(--font-mono); font-size: 11px; color: #6b7075;
  border-top: none; padding-top: 0; margin-top: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.spec-grade-line {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0;
}
.spec-grade-line .d {
  flex: 1; min-width: 0;
  font-family: var(--font-mono); font-size: 11px; color: #6b7075; line-height: 1;
  border-top: none; padding-top: 0; margin-top: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: flex; align-items: center;
}
.spec-grade-line .bp-grade-row { flex-shrink: 0; margin-left: 8px; }
.bp-grade-row { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 0; }
.spec-main { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; margin-bottom: 0; }
.spec-main .v { margin-bottom: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spec-main .bp-grade-row { margin-bottom: 0; flex-shrink: 0; margin-left: auto; }
.bp-grade {
  font-family: var(--font-mono); font-size: 22px; font-weight: 800;
  width: 46px; height: 46px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center; color: #ffffff; letter-spacing: 0;
  flex-shrink: 0;
}
.bp-grade.g-none { background: rgba(17,18,20,0.05); color: #9aa1a8; border: 1px dashed rgba(154,161,168,0.55); font-size: 14px; }
.bp-grade.g-sp { background: #ff2d20; box-shadow: 0 4px 14px rgba(255,45,32,0.45); }
.bp-grade.g-s  { background: #e2231a; box-shadow: 0 4px 12px rgba(226,35,26,0.35); }
.bp-grade.g-ap { background: #f97316; box-shadow: 0 4px 12px rgba(249,115,22,0.30); }
.bp-grade.g-a  { background: #f59e0b; box-shadow: 0 4px 12px rgba(245,158,11,0.30); }
.bp-grade.g-bp { background: #1d4ed8; box-shadow: 0 4px 12px rgba(29,78,216,0.30); }
.bp-grade.g-b  { background: #3b82f6; }
.bp-grade.g-cp { background: #22c55e; }
.bp-grade.g-c  { background: #4ade80; }
.bp-grade.g-dp { background: #374151; }
.bp-grade.g-d  { background: #6b7280; }
.bp-grade-txt { font-family: var(--font-mono); font-size: 11px; color: var(--on-surface-variant); }
.bp-disk-list { display: flex; align-items: center; gap: 10px; min-width: 0; margin-bottom: 0; }
.bp-disk-names { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.bp-disk-name { font-size: 13px; font-weight: 600; color: #191c1d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-disk-list .bp-grade { flex-shrink: 0; }

/* 雷达图区 */
/* 性能向量分析（PROJECT ZERO 卡内区段） */
.vector-section { background: var(--surface-container-low); position: relative; overflow: hidden; }
.vector-section::before {
  content: ""; position: absolute; inset: 0; opacity: 0.5;
  background-image: linear-gradient(to right, rgba(0,0,0,0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size: 20px 20px;
}
.vector-wrap { display: flex; align-items: center; justify-content: center; gap: 48px; flex-wrap: wrap; position: relative; z-index: 1; }
.radar { position: relative; width: 256px; height: 256px; }
.radar svg { width: 100%; height: 100%; }
.radar-label {
  position: absolute; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em;
  color: var(--on-surface); text-transform: uppercase; white-space: nowrap;
}
.vector-meta { display: flex; flex-direction: column; gap: 12px; max-width: 240px; }
.vector-meta .profile { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--on-surface); }
.vector-meta .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.vector-meta p { font-family: var(--font-mono); font-size: 12px; color: var(--outline); line-height: 1.7; }
.vector-verdict { font-family: var(--font-mono); font-size: 11px; line-height: 1.7; color: var(--outline); }
.vector-verdict.praise { color: #0e9f6e; }
.vector-verdict.weak { color: #d97706; }

/* 跑分矩阵 */
.bench-row { margin-bottom: 24px; }
.bench-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 8px; }
.bench-head .b-name { font-family: var(--font-mono); font-size: 12px; color: var(--on-surface); }
.bench-head .b-score { font-size: 20px; font-weight: 700; color: var(--primary); }
.bench-track { width: 100%; height: 8px; background: var(--surface-container-highest); border-radius: 999px; overflow: hidden; }
.bench-fill { height: 100%; border-radius: 999px; transition: width 0.8s ease-out; }
.bench-fill.b1 { background: var(--primary); }
.bench-fill.b2 { background: var(--secondary); }
.bench-fill.b3 { background: var(--accent); }
.bench-row.invert .bench-track { display: flex; justify-content: flex-end; }
.bench-row.invert .bench-fill { background: var(--error); }

@media (max-width: 900px) {
  .assets-grid { grid-template-columns: 1fr; }
  .spec-grid { grid-template-columns: 1fr; grid-auto-rows: 360px; }
  .spec-gpu, .spec-board, .spec-cpu, .spec-mem, .spec-disk { grid-column: auto; grid-row: auto; }
  .spec-gpu.spec-block { flex-direction: column; }
  .spec-gpu .spec-cover { flex: 1 1 68%; height: auto; }
  .spec-gpu .spec-body { flex: 0 0 32%; justify-content: flex-start; padding: 13px 14px 14px; gap: 8px; }
  .spec-gpu .spec-body .v { font-size: 15px; }
  .spec-gpu .spec-body .d { font-size: 11px; line-height: 1.5; }
  .spec-gpu .spec-body .bp-grade { width: 46px; height: 46px; font-size: 22px; border-radius: 11px; }
  .zero-hero { padding: 32px 24px; }
  .zero-section { padding: 28px 24px; }
  .zero-title { font-size: 32px; }
}
/* ===== PROJECT ZERO 复刻（黑/白/红 硬件蓝图）===== */
.zero-hero {
  background: #111214;
  color: #ffffff;
  padding: 44px 48px;
}
.zero-hero::after {
  content: "";
  position: absolute; top: -90px; right: -70px;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,229,255,0.45), rgba(0,229,255,0) 72%);
  filter: blur(36px);
  opacity: 0.85;
  pointer-events: none;
}
.zero-eyebrow { color: #9aa0a6; }
.zero-title { color: #ffffff; }
.zero-sub { color: #00e5ff; font-weight: 800; letter-spacing: 0.02em; }
.zero-badge {
  width: auto; height: auto;
  border-radius: 10px;
  border: 1.5px solid #00e5ff;
  background: #ffffff;
  padding: 14px 22px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  gap: 2px;
}
.zero-badge .lbl { color: #6b7075; font-size: 10px; letter-spacing: 0.14em; }
.zero-badge .num { color: #e2231a; font-size: 46px; font-weight: 800; line-height: 1.05; }
.zero-badge .lvl { color: #6b7075; font-size: 10px; letter-spacing: 0.14em; }
.zero-section h3 { color: #6b7075; }
.spec-icon { background: #f0f1f2; color: #6b7075; }
.spec-block .k { color: #6b7075; }
.spec-block .v { color: #111214; }
.spec-block .d { color: #8a9096; }

/* 跑分实验室 */
.bench-lab { padding-bottom: 48px; }
.bench-cards {
  display: grid; grid-template-columns: 1fr; gap: 24px;
  perspective: 1200px;
}
.bench-card {
  background: var(--surface-container-lowest);
  border: none;
  border-radius: 16px;
  padding: 14px 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  text-align: left;
  cursor: pointer;
  transition: all 0.25s;
  display: flex; flex-direction: column; gap: 5px;
  font-family: inherit;
  justify-content: center;
}
.bench-card:hover {
  box-shadow: 0 12px 32px rgba(0,0,0,0.12), 0 4px 10px rgba(0,0,0,0.06);
  transform: translateY(-2px);
  background: #ffffff;
}
.hw-section-title,
.zero-section h3.hw-section-title {
  font-family: 'Inter', -apple-system, 'Segoe UI', 'Microsoft YaHei', '微软雅黑', 'PingFang SC', 'Noto Sans SC', 'Source Han Sans SC', 'Helvetica Neue', Arial, sans-serif;
  font-size: 18px !important;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #000000;
  text-transform: none;
  border-bottom: none;
  padding-bottom: 0;
  margin: 0 0 20px;
  line-height: 1.2;
}
/* 显卡跑分区块标题 */
.bench-gpu-title {
  text-align: left;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #111214;
  margin: 8px 0 20px;
}
/* 显卡跑分特卡（参考限时特惠 deal-card：深色渐变 + 左图右信息） */
.bench-card-gpu {
  display: grid;
  grid-template-columns: 6fr 4fr;
  aspect-ratio: 3.14 / 1;
  padding: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #1b1b1d 0%, #2a1f3d 55%, #3a2355 100%);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.bench-card-gpu:hover {
  background: linear-gradient(135deg, #1b1b1d 0%, #2a1f3d 55%, #3a2355 100%);
  box-shadow: 0 14px 34px rgba(0,0,0,0.24);
}
.bench-card-gpu-media {
  position: relative;
  overflow: hidden;
}
.bench-card-gpu-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: drop-shadow(0 24px 30px rgba(0,0,0,0.45));
  transform: translateZ(0);
  will-change: transform;
  transition: transform .12s ease-out;
}
.bench-card-gpu-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at calc(var(--mx,50) * 1%) calc(var(--my,50) * 1%), rgba(255,255,255,0.22), rgba(255,255,255,0) 48%);
  mix-blend-mode: screen;
  z-index: 2;
}
.bench-card-gpu-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  background: var(--secondary-container);
  color: var(--on-secondary-container);
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.bench-card-gpu-info {
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
  min-width: 0;
  color: #ffffff;
  background: linear-gradient(135deg, #241a38 0%, #2e2150 60%, #3a2a63 100%);
  position: relative;
}
.bench-card-gpu-info::after {
  content: "";
  position: absolute; top: -60px; right: -60px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,229,255,0.18), rgba(0,229,255,0) 70%);
  filter: blur(30px);
  pointer-events: none;
}
.bench-card-gpu-info .bench-card-name { color: #ffffff; font-size: 20px; }
.bench-card-gpu-info .bench-card-score { color: #ffffff; font-size: 34px; }
.bench-card-gpu-info .bench-card-sub { color: rgba(255,255,255,0.6); }
.bench-card-gpu-info .bench-card-hint { display: block; color: var(--secondary-container); font-family: var(--font-mono); font-size: 12px; }
.bench-card-top { display: flex; justify-content: space-between; align-items: center; }
.bench-card-icon {
  width: 32px; height: 32px; border-radius: 9px;
  background: #f0f1f2; color: #6b7075;
  display: flex; align-items: center; justify-content: center;
}
.bench-card-icon svg { width: 17px; height: 17px; }
.bench-card-tag {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  color: #e2231a; border: 1px solid rgba(226,35,26,0.35);
  border-radius: 999px; padding: 3px 10px;
}
.bench-card-name { font-size: 14px; font-weight: 700; color: #111214; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bench-card-score { font-size: 24px; font-weight: 800; color: #111214; letter-spacing: -0.01em; }
.bench-card-score-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.bench-grade {
  font-family: var(--font-mono);
  font-size: 17px; font-weight: 800;
  width: 36px; height: 36px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0;
}
.bench-grade.g-s   { background: #e2231a; color: #ffffff; box-shadow: 0 4px 12px rgba(226,35,26,0.35); }
.bench-grade.g-ap  { background: #f97316; color: #ffffff; box-shadow: 0 4px 12px rgba(249,115,22,0.30); }
.bench-grade.g-a   { background: #f59e0b; color: #ffffff; box-shadow: 0 4px 12px rgba(245,158,11,0.30); }
.bench-grade.g-bp  { background: #1d4ed8; color: #ffffff; box-shadow: 0 4px 12px rgba(29,78,216,0.30); }
.bench-grade.g-b   { background: #3b82f6; color: #ffffff; }
.bench-grade.g-c   { background: #4ade80; color: #ffffff; }
.bench-grade.g-sp  { background: #ff2d20; color: #ffffff; box-shadow: 0 4px 14px rgba(255,45,32,0.45); }
.bench-grade.g-cp  { background: #22c55e; color: #ffffff; }
.bench-grade.g-dp  { background: #374151; color: #ffffff; }
.bench-grade.g-d   { background: #6b7280; color: #ffffff; }
.bench-grade.g-none { background: rgba(17,18,20,0.04); color: #9aa1a8; border: 1px dashed rgba(154,161,168,0.55); box-shadow: none; font-size: 11px; width: auto; padding: 0 8px; }
.bench-card-sub { font-family: var(--font-mono); font-size: 11px; color: #8a9096; }
.bench-card-hint { display: none; }

@media (max-width: 900px) {
  .bench-cards { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 560px) {
  .bench-cards { grid-template-columns: 1fr; }
  .bench-card { padding: 12px 16px; }
}

/* 本页主体收窄一点点（全局 1440px -> 1360px） */
main.container { max-width: 1360px; }

/* ---------- 硬件检测（嵌入自 detect.html） ---------- */
.steps { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.step-pill {
  flex: 1;
  min-width: 180px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--surface-container);
  background: var(--surface-container-lowest);
  transition: all 0.2s;
}
.step-pill.todo { opacity: 0.55; }
.step-pill.active { border-color: var(--primary); background: var(--surface-container-lowest); }
.step-pill.done { border-color: var(--surface-container); }
.step-num {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
  flex-shrink: 0;
  background: var(--surface-container-high);
  color: var(--primary);
}
.step-pill.done .step-num { background: var(--primary); color: var(--on-primary); }
.step-pill.active .step-num { background: var(--primary); color: var(--on-primary); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.step-pill .step-label { font-weight: 700; font-size: 14px; color: var(--on-surface); }
.step-pill .step-desc { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; color: var(--outline); }

.detect-panel {
  background: var(--surface-container-lowest);
  border: 1px solid var(--surface-container);
  border-radius: 16px;
  box-shadow: var(--shadow-ambient-1);
  padding: 32px;
  text-align: center;
}
.detect-panel .icon-lg { width: 44px; height: 44px; color: var(--primary); margin: 0 auto 12px; }
.detect-panel h2 { color: var(--primary); font-size: 20px; font-weight: 700; }
.detect-panel p { color: var(--on-surface-variant); margin: 8px auto 20px; max-width: 560px; }
.detect-id {
  display: inline-block;
  margin: 12px auto 8px;
  padding: 10px 20px;
  border: 1px dashed var(--outline);
  border-radius: var(--radius-lg);
  background: var(--surface-container-low);
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--primary);
  word-break: break-all;
  max-width: 100%;
}
.copy-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--on-surface);
  background: var(--surface-container-low);
  border: 1px solid var(--outline);
  padding: 6px 14px;
  border-radius: 999px;
  margin: 4px auto 16px;
  transition: all 0.2s;
}
.copy-btn:hover { background: var(--surface-container-high); }
.copy-btn svg { width: 14px; height: 14px; }
.hw-detect-section .btn-action { background: var(--primary); color: var(--on-primary); }
.hw-detect-section .btn-action:hover { background: #333333; }
.hw-detect-section .wf-cta { position: static; right: auto; bottom: auto; border: 0; margin: 0; background: #111; }
.hw-detect-section .wf-cta .wf-frm { background: #111; }
.hw-detect-section .wf-cta .wf-ct { color: #fff; }
.hw-detect-section .wf-cta .wf-frm::before { background: #fff; }
.hw-detect-section .wf-cta:hover .wf-ct { color: #111; }
.error-box {
  margin-bottom: 24px;
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  background: var(--error-container);
  color: var(--on-error-container);
}

/* 概览 */
.overview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 32px; }
.overview-card {
  background: var(--surface-container-lowest);
  border: 1px solid var(--surface-container);
  border-radius: 16px;
  box-shadow: var(--shadow-ambient-1);
  padding: 20px;
}
.overview-card .ov-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--on-surface-variant); margin-bottom: 10px; }
.overview-card .ov-title svg { width: 18px; height: 18px; color: var(--on-surface); }
.pct-bar { position: relative; height: 24px; border-radius: 999px; background: var(--surface-container); overflow: hidden; }
.pct-bar .pct-fill { height: 100%; border-radius: 999px; transition: width 0.7s ease-out; background: var(--primary); }
.pct-bar .pct-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--on-primary); }
.ov-meta { display: flex; justify-content: space-between; margin-top: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--outline); }

/* 建议 */
.advice-card {
  background: var(--surface-container-lowest);
  border: 1px solid var(--surface-container);
  border-radius: 16px;
  box-shadow: var(--shadow-ambient-1);
  padding: 20px 24px;
  margin-bottom: 32px;
}
.advice-card h3 { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--primary); margin-bottom: 12px; }
.advice-card h3 svg { width: 18px; height: 18px; color: var(--on-surface); }
.advice-card ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.advice-card li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--on-surface); }
.advice-card li svg { width: 16px; height: 16px; color: var(--on-surface); flex-shrink: 0; margin-top: 3px; }

/* 详情网格 */
.detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.detail-card {
  background: var(--surface-container-lowest);
  border: 1px solid var(--surface-container);
  border-radius: 16px;
  box-shadow: var(--shadow-ambient-1);
  overflow: hidden;
}
.detail-card .dc-head {
  display: flex; align-items: center; gap: 8px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--surface-container);
  font-size: 16px; font-weight: 700; color: var(--on-surface);
}
.detail-card .dc-head svg { width: 20px; height: 20px; color: var(--on-surface); }
.detail-card .dc-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.detail-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.detail-row .k { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; color: var(--outline); flex-shrink: 0; }
.detail-row .v { font-size: 14px; color: var(--on-surface); text-align: right; word-break: break-all; flex: 1; min-width: 0; }
.module-box { border: 1px dashed var(--surface-container-high); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.module-box .m-title { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--on-surface); }
.module-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }

.section-title { display: flex; align-items: center; gap: 12px; margin: 32px 0 16px; }
.section-title .rule { width: 40px; height: 4px; border-radius: 2px; background: var(--primary); }
.section-title h2 { font-size: 24px; font-weight: 700; color: var(--primary); }

@media (max-width: 900px) {
  .overview { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .detect-panel { padding: 24px 16px; }
}

/* ===== 站点顶部导航样式已统一抽到 /nav.css（2026-09-15），此处不再重复维护 ===== */
.wf-vec{position:relative;width:100vw;left:50%;transform:translateX(-50%);height:112vh;background:#131313;overflow:visible;display:flex;align-items:center;-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  viewBox='0 0 1440 822' preserveAspectRatio='none'><path d='M0 0H882.5H1046.97C1048.95 0 1050.88 0.58438 1052.52 1.6795L1077.48 18.3205C1079.12 19.4156 1081.05 20 1083.03 20H1440V822H0V0Z' fill='white'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  viewBox='0 0 1440 822' preserveAspectRatio='none'><path d='M0 0H882.5H1046.97C1048.95 0 1050.88 0.58438 1052.52 1.6795L1077.48 18.3205C1079.12 19.4156 1081.05 20 1083.03 20H1440V822H0V0Z' fill='white'/></svg>");-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;margin-top:56px;}
.wf-vec iframe{width:100%;height:100vh;border:0;display:block}
.hero-divider-bottom{position:relative;width:100vw;left:50%;transform:translateX(-50%);height:46px;background:#F8FAFA;margin-top:-20px;overflow:visible;z-index:3;}
.hero-divider-bottom .sh-svg{position:absolute;right:359px;top:-21.5px;z-index:50;}
.hero-divider-bottom svg{display:block;width:3002px;height:46px;}
.vec-divider-bottom{position:relative;width:100vw;left:50%;transform:translateX(-50%);height:46px;background:#f8fafa;overflow:visible;margin-top:0;z-index:3;}
.vec-divider-bottom svg{position:absolute;right:359px;top:-21.5px;z-index:50;width:3002px;height:46px;}

/* ===== 瀑布 hero（HARDWARE ERA 全屏） ===== */
.wf-hero{position:relative;height:calc(100vh - 58px + 30px);margin-top:58px;display:flex;align-items:flex-end;background:#0c0d0f;overflow:hidden}
.wf-hero .wf-bg{position:absolute;inset:0;background-image:url('/wave-demo/hero-main.png');background-size:cover;background-position:center 0%;opacity:1}
/* 移动端改用 780px WebP：原 8.3MB PNG 是移动端最大单资源（2026-09-22 审计） */

.wf-hero .wf-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,13,0) 0%,rgba(10,11,13,.05) 58%,rgba(10,11,13,.5) 100%)}
/* 首页 hero 同款点阵网格特效（深色 hero 反相适配：1px 点、3px 间距、opacity .8） */
.wf-hero .wf-bg::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1px);background-size:3px 3px;opacity:.8}
.wf-hero .wf-inner{position:relative;z-index:2;width:100%;padding:120px 20px 84px}
.wf-hero h1,.wf-hero .wf-brand{font-size:clamp(40px,9vw,90px);font-weight:900;letter-spacing:0.03em;line-height:.96;color:#fff}
.wf-hero h1 .sub,.wf-hero .wf-brand .sub{display:block;font-size:.52em;color:#fff;font-weight:800;letter-spacing:.02em;margin-top:.24em}
.wf-cta{
  --cb-clip: polygon(9.65723px .999985px, calc(100% - 4px) .999985px, calc(100% - 4px) .999985px, calc(100% - 3.432281px) 1.045794373px, calc(100% - 2.893728px) 1.178417824px, calc(100% - 2.391547px) 1.390649251px, calc(100% - 1.932944px) 1.675282552px, calc(100% - 1.525125px) 2.025111625px, calc(100% - 1.175296px) 2.432930368px, calc(100% - .890663px) 2.891532679px, calc(100% - .678432px) 3.393712456px, calc(100% - .545809px) 3.932263597px, calc(100% - .5px) 4.49998px, calc(100% - .5px) calc(100% - 10.1572px), calc(100% - .5px) calc(100% - 10.1572px), calc(100% - .510988px) calc(100% - 9.8800535px), calc(100% - .543624px) calc(100% - 9.606324px), calc(100% - .597416px) calc(100% - 9.3371965px), calc(100% - .671872px) calc(100% - 9.073856px), calc(100% - .7665px) calc(100% - 8.8174875px), calc(100% - .880808px) calc(100% - 8.569276px), calc(100% - 1.014304px) calc(100% - 8.3304065px), calc(100% - 1.166496px) calc(100% - 8.102064px), calc(100% - 1.336892px) calc(100% - 7.8854335px), calc(100% - 1.525px) calc(100% - 7.6817px), calc(100% - 7.182px) calc(100% - 2.0254px), calc(100% - 7.182px) calc(100% - 2.0254px), calc(100% - 7.385652px) calc(100% - 1.8371836px), calc(100% - 7.602216px) calc(100% - 1.6667008px), calc(100% - 7.830504px) calc(100% - 1.5144412px), calc(100% - 8.069328px) calc(100% - 1.3808944px), calc(100% - 8.3175px) calc(100% - 1.26655px), calc(100% - 8.573832px) calc(100% - 1.1718976px), calc(100% - 8.837136px) calc(100% - 1.0974268px), calc(100% - 9.106224px) calc(100% - 1.0436272px), calc(100% - 9.379908px) calc(100% - 1.0109884px), calc(100% - 9.657px) calc(100% - 1px), 4px calc(100% - 1px), 4px calc(100% - 1px), 3.432281px calc(100% - 1.045809px), 2.893728px calc(100% - 1.178432px), 2.391547px calc(100% - 1.390663px), 1.932944px calc(100% - 1.675296px), 1.525125px calc(100% - 2.025125px), 1.175296px calc(100% - 2.432944px), .890663px calc(100% - 2.891547px), .678432px calc(100% - 3.393728px), .545809px calc(100% - 3.932281px), .5px calc(100% - 4.5px), .5px 10.1572px, .5px 10.1572px, .510988741px 9.88004128px, .543628368px 9.60630424px, .597428987px 9.33717256px, .671900704px 9.07382992px, .766553625px 8.81746px, .880897856px 8.56924648px, 1.014443503px 8.33037304px, 1.166700672px 8.10202336px, 1.337179469px 7.88538112px, 1.52539px 7.68163px, 7.18164px 2.02538px, 7.18164px 2.02538px, 7.38539384px 1.8371686px, 7.60203832px 1.666689px, 7.83038988px 1.5144311px, 8.06926496px 1.3808848px, 8.31748px 1.26654px, 8.57385144px 1.1718866px, 8.83719572px 1.0974145px, 9.10632928px 1.0436136px, 9.38006856px 1.0109738px, 9.65723px .999985px);
  position:absolute;z-index:2;right:clamp(20px,5vw,90px);bottom:clamp(84px,14vh,140px);
  display:inline-flex;padding:1px;text-decoration:none;cursor:pointer;background:#fff;clip-path:var(--cb-clip);transition:background .6s ease-in-out;
}
.wf-cta .wf-frm{position:relative;display:block;width:100%;height:100%;z-index:1;background:#fff;clip-path:var(--cb-clip)}
.wf-cta .wf-frm::before{content:'';position:absolute;top:0;left:0;width:0;height:100%;background:#111;z-index:2;transition:all .4s ease-in-out}
.wf-cta:hover .wf-frm::before{width:100%}
.wf-cta .wf-ct{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 22px;color:#111;font-family:'Inter',-apple-system,'Segoe UI','Microsoft YaHei',sans-serif;font-size:14px;font-weight:600;letter-spacing:.02em;white-space:nowrap;transition:color .4s ease-in-out}
.wf-cta:hover{background:#111}
.wf-cta:hover .wf-ct{color:#fff}
.wf-cta .wf-arr{width:10px;height:12px;transition:transform .4s ease-in-out}
.wf-cta:hover .wf-arr{transform:translateX(3px)}
.wf-scroll{position:absolute;bottom:72px;left:50%;transform:translateX(-50%);z-index:3;font-family:var(--font-mono);font-size:10px;letter-spacing:.3em;color:rgba(255,255,255,.5)}

/* 黑白斜切分割线（复刻首页 section-featured） */
.wf-vec .footer-divider{position:absolute;left:0;right:0;top:-56px;height:56px;z-index:2;pointer-events:none;background-size:100% 100%;background-repeat:no-repeat;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 56' preserveAspectRatio='none'%3E%3Cpath d='M0 14H18L21 38H100V56H0Z' fill='%23131313'/%3E%3Cpath d='M0 14H18L21 38H100' fill='none' stroke='%232a2a2a' stroke-width='1.25' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}

.wf-vec .footer-divider--bottom,.wf-hero .footer-divider--bottom{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 56' preserveAspectRatio='none'%3E%3Cpath d='M0 14H18L21 38H100V56H0Z' fill='%23f8fafa'/%3E%3Cpath d='M0 14H18L21 38H100' fill='none' stroke='%232a2a2a' stroke-width='1.25' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}

/* ============================================================
   硬件电子展柜 · 全宽工程瀑布
   参考 hk.gundam-official.com 的编辑式全宽列表与黑白反转
   ============================================================ */
.era-archive{
  --era-ink:#050607;
  --era-line:#e3e6e6;
  --era-muted:#6f7475;
  --era-gold:#f5c518;
  --era-pad:max(20px,calc((100vw - 1720px)/2 + 58px));
  /* 全宽工程瀑布：之前套在 .container 里被缩进成 1464px（线上是整幅 1600，且 --era-pad 本来就是按视口算的）。
     这里按站内 .wf-vec / .vec-divider-bottom 同款做法破出容器，恢复整幅。 */
  position:relative;
  width:100vw;
  left:50%;
  transform:translateX(-50%);
  margin:0;
  padding:0;
  background:#fff;
  color:var(--era-ink);
  font-family:"Inter",-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
.era-archive *{box-sizing:border-box;}
.era-archive__intro-band{
  background:#f8fafa;
  border-top:1px solid var(--era-line);
  border-bottom:1px solid var(--era-line);
}
.era-archive__intro{
  width:100%;
  padding:54px var(--era-pad) 48px;
}
.era-archive__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:18px;
}
.era-archive__head h2{
  margin:0;
  font-size:clamp(30px,3.4vw,50px);
  line-height:1.02;
  letter-spacing:-.045em;
  font-weight:800;
  color:var(--era-ink);
}
.era-archive__label{
  flex:none;
  color:#8a9091;
  font-family:"JetBrains Mono","Consolas",monospace;
  font-size:10px;
  letter-spacing:.16em;
}
.era-archive__intro>p{
  max-width:880px;
  margin:0;
  font-size:14px;
  line-height:1.9;
  color:var(--era-muted);
}
.era-archive__modules{
  display:block;
  background:#fff;
}
.era-archive__module{
  display:grid;
  grid-template-columns:88px minmax(190px,280px) minmax(0,1fr) 32px;
  align-items:center;
  gap:clamp(16px,3vw,42px);
  min-height:88px;
  padding:18px var(--era-pad);
  border-bottom:1px solid var(--era-line);
  color:var(--era-ink);
  background:#fff;
  text-decoration:none;
  cursor:pointer;
  transition:background .2s ease,color .2s ease;
}
.era-archive__module-index{
  font-family:"JetBrains Mono","Consolas",monospace;
  font-size:10px;
  letter-spacing:.14em;
  color:#929899;
  white-space:nowrap;
  transition:color .2s ease;
}
.era-archive__module h3{
  margin:0;
  font-size:16px;
  line-height:1.4;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--era-ink);
  transition:color .2s ease;
}
.era-archive__module p{
  margin:0;
  font-size:13px;
  line-height:1.75;
  color:var(--era-muted);
  transition:color .2s ease;
}
.era-archive__module-arrow{
  font-family:"JetBrains Mono","Consolas",monospace;
  font-size:16px;
  line-height:1;
  color:#b6bbbc;
  opacity:.35;
  transform:translateX(-4px);
  transition:color .2s ease,opacity .2s ease,transform .2s ease;
}
.era-archive__module:is(:hover,:focus-visible){
  background:var(--era-ink);
  color:#fff;
}
.era-archive__module:focus-visible{
  outline:2px solid var(--era-gold);
  outline-offset:-2px;
}
.era-archive__module:is(:hover,:focus-visible) .era-archive__module-index{color:var(--era-gold);}
.era-archive__module:is(:hover,:focus-visible) h3{color:#fff;}
.era-archive__module:is(:hover,:focus-visible) p{color:rgba(255,255,255,.68);}
.era-archive__module:is(:hover,:focus-visible) .era-archive__module-arrow{
  color:#fff;
  opacity:1;
  transform:translateX(0);
}
.era-archive__faq-all{
  background:#fff;
  color:var(--era-ink);
  border-top:1px solid var(--era-line);
}
.era-archive__faq-all>summary{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:14px;
  /* 页脚 .footer-wave 有 margin-top:-20px 上探，会盖住本行底部 20px（可见白区 70.4→50.4px）；
     把内容上移 20/2=10px，使其在可见白区内上下居中。行高与页脚位置均不变。 */
  padding:14px var(--era-pad) 34px;
  cursor:pointer;
  list-style:none;
  color:var(--era-ink);
}
.era-archive__faq-all>summary::-webkit-details-marker{display:none;}
.era-archive__faq-name{
  font-size:16px;
  line-height:1.4;
  font-weight:700;
}
.era-archive__faq-count{
  color:#929899;
  font-family:"JetBrains Mono","Consolas",monospace;
  font-size:10px;
  letter-spacing:.14em;
}
.era-archive__faq-all>summary::after{
  content:"+";
  font-family:"JetBrains Mono","Consolas",monospace;
  font-size:16px;
  line-height:1;
  color:var(--era-muted);
}
.era-archive__faq-all[open]>summary::after{content:"–";}
.era-archive__faq-all>summary:hover{background:#f4f5f5;}
.era-archive__faq-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 44px;
  padding:0 var(--era-pad) 30px;
}
.era-archive__faq-item{
  padding:14px 0 0;
  border-top:1px solid var(--era-line);
}
.era-archive__faq-item strong{
  display:block;
  font-size:13px;
  line-height:1.5;
  font-weight:700;
  color:var(--era-ink);
}
.era-archive__faq-item p{
  margin:6px 0 0;
  font-size:12.5px;
  line-height:1.75;
  color:var(--era-muted);
}
.era-archive__faq-all>summary:focus-visible{
  outline:2px solid var(--era-ink);
  outline-offset:-3px;
}
.era-archive + .site-footer{margin-top:0;}
main + .site-footer{margin-top:0;}
@media (max-width:768px){
  .era-archive{--era-pad:20px;}
  .era-archive__intro{padding-top:42px;padding-bottom:38px;}
  .era-archive__head{align-items:flex-start;flex-direction:column-reverse;gap:8px;margin-bottom:14px;}
  .era-archive__head h2{font-size:28px;}
  .era-archive__label{font-size:9px;letter-spacing:.12em;}
  .era-archive__intro>p{font-size:13px;line-height:1.8;}
  .era-archive__module{
    grid-template-columns:62px minmax(0,1fr) 18px;
    grid-template-areas:"index title arrow" "index copy copy";
    gap:6px 10px;
    min-height:0;
    padding-top:15px;
    padding-bottom:15px;
  }
  .era-archive__module-index{grid-area:index;align-self:start;padding-top:3px;}
  .era-archive__module h3{grid-area:title;font-size:14px;}
  .era-archive__module p{grid-area:copy;font-size:12px;line-height:1.65;}
  .era-archive__module-arrow{grid-area:arrow;align-self:start;padding-top:2px;}
  .era-archive__faq-all>summary{padding-top:6px;padding-bottom:26px;}
  .era-archive__faq-list{grid-template-columns:1fr;gap:0;padding-bottom:20px;}
}
@media (min-width:761px) and (max-width:1100px){
  .era-archive__module{grid-template-columns:72px minmax(170px,220px) minmax(0,1fr) 28px;gap:18px;}
}
@media (prefers-reduced-motion:reduce){
  .era-archive__module,
  .era-archive__module-arrow{transition:none;}
}

/* ---------- 手机端 hero（2026-09-23）----------
   为什么必须放文件末尾：本文件里 .wf-hero .wf-bg 的桌面规则在 674 行、.wf-hero .wf-inner 在 680 行，
   同特异性下后定义者胜 —— 之前这段写在 667 行，结果高度生效、背景与内边距被覆盖。
   规范见 docs/响应式隔离规范.md 2.1。桌面规则未改动，桌面 hero 不受影响。 */
@media (max-width:768px){
  .wf-hero{height:62vh}
  .wf-hero .wf-bg{background-image:url('/assets/hero/hero-main-mobile.webp');background-position:100% 0%}
  .wf-hero .wf-inner{padding:60px 20px 48px}
}

/* ============================================================
   性能三核舱（MODULE.002 · 2026-09-29 预览草稿）
   位置：my 页「性能向量分析」黑屏模块 + 斜切分隔线之下
   布局：一条斜切线分左右 —— 左侧整机（大核），右侧上下再横切为
        显卡 / 处理器；横切线随聚焦核上下移动（几何沿用已验证的 V5 斜切方案
        43%→56% 斜线 + 可移动横切线）
   视觉：白底仪表带，容器、排版、媒体框全部新设计
   交互：只复用旧「三核仪表舱裸组件」的 transform:scale 缩放模型
   规范：断点只用 768 / 1024；移动端规则置于本区块末尾并提高特异性
   ============================================================ */
.cabin{
  /* 左右内边距直接跟随站内 .container 的盒模型（max-width:--container-max + padding:--gutter），
     这样舱体与「我的硬件」那排 .spec-grid 左右完全对齐（1600 下都是 x=68 / 宽 1464）。 */
  --cabin-pad:max(var(--gutter, 48px), calc((100vw - var(--container-max, 1560px)) / 2 + var(--gutter, 48px)));
  /* 缩放/位移统一用站内既有曲线（.spec-block、.era-archive__module 的悬停都是这条）：
     cubic-bezier(.22,.61,.36,1) = 起步快、收尾软，属于 ease-out 家族 —— 悬停反馈要"立刻响应、平稳落位"，
     不用带回弹/过冲的曲线（文字缩放一旦过冲会显得廉价）。时长沿用站内的 .28s。 */
  --cabin-ease:cubic-bezier(.22,.61,.36,1);
  --split:.5;
  position:relative;width:100vw;left:50%;transform:translateX(-50%);
  margin:0;padding:64px var(--cabin-pad) 72px;
  /* 底色对齐页面 surface（#f8fafa）：上面 vec-divider-bottom 与下方 era-archive 首带都是这个色，
     之前写 #fff 会在黑屏模块下方留下一道 46px 的灰色色差。 */
  background:#f8fafa;color:#050607;
  font-family:"Inter",-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
.cabin *{box-sizing:border-box;}
.cabin-head{margin:0 0 26px;}
.cabin-eyebrow{
  display:block;
  font-family:"JetBrains Mono","Consolas",monospace;
  font-size:10px;letter-spacing:.16em;color:#8a9091;
}
.cabin-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;margin-top:14px;}
.cabin-head-row h2{
  margin:0;font-size:clamp(30px,3.4vw,50px);line-height:1.02;
  letter-spacing:-.045em;font-weight:800;color:#050607;
}
.cabin-desc{margin:0 0 6px;max-width:560px;font-size:13px;line-height:1.9;color:#6f7475;}

/* 聚焦核不同，右侧横切线位置不同 */
.cabin[data-active="graphics"]{--split:.58;}
.cabin[data-active="cpu"]{--split:.42;}

/* 舱体（斜切舞台外框） */
.cabin-body{
  margin:0 auto;
  /* 圆角沿用「我的硬件」板块 .spec-block 的参数：统一 12px */
  border:1px solid #e3e6e6;border-radius:12px;
  background:#fff;overflow:hidden;
}
.cabin-stage{position:relative;height:560px;overflow:hidden;background:#fff;}

/* 三块底色 + 斜切线 + 横切线 */
.cabin-bg{position:absolute;inset:0;pointer-events:none;transition:clip-path 280ms var(--cabin-ease);}
.cabin-bg--overall{background:#fff;clip-path:polygon(0 0,43% 0,56% 100%,0 100%);}
/* 显卡分区底色跟处理器分区一致（#f4f4f4）：两块右侧分区现在只有横切线区分 */
/* 右侧两格（显卡 / 处理器）改白底：与左侧一致，只靠斜切线 + 横切线分区 */
.cabin-bg--graphics{background:#fff;clip-path:polygon(43% 0,100% 0,100% calc(var(--split) * 100%),calc(43% + 13% * var(--split)) calc(var(--split) * 100%));}
.cabin-bg--cpu{background:#fff;clip-path:polygon(calc(43% + 13% * var(--split)) calc(var(--split) * 100%),100% calc(var(--split) * 100%),100% 100%,56% 100%);}
.cabin-split{
  position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none;
  transition:transform 280ms var(--cabin-ease);
}
.cabin-split path{fill:none;stroke:#050607;stroke-width:1;vector-effect:non-scaling-stroke;}
.cabin-split-h{
  position:absolute;z-index:3;right:0;height:1px;background:#c9c9c9;
  left:calc(43% + 13% * var(--split));top:calc(var(--split) * 100%);
  transition:top 280ms var(--cabin-ease),left 280ms var(--cabin-ease);
}

/* 三个核：绝对定位落在各自分区里，避开斜切线 */
.cabin-zone{
  position:absolute;z-index:2;min-width:0;display:flex;flex-direction:column;cursor:pointer;
  transition:opacity 220ms var(--cabin-ease),top 280ms var(--cabin-ease),height 280ms var(--cabin-ease),bottom 280ms var(--cabin-ease);
}
.cabin-zone:focus{outline:none;}
.cabin-zone:focus-visible{outline:2px solid #050607;outline-offset:3px;border-radius:6px;}
.cabin-zone.is-active{z-index:4;}
.cabin-zone--overall{left:4%;top:5%;width:37%;height:90%;}
.cabin-zone--graphics{left:51%;right:4%;top:4%;height:calc(var(--split) * 100% - 8%);}
.cabin-zone--cpu{left:59%;right:4%;top:calc(var(--split) * 100% + 4%);bottom:4%;}

/* 缩放只作用在核内层：外框、斜切线与横切线都不跟着变形 */
.cabin-zone__inner{
  --zone-scale:.94;
  flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;gap:12px;
  transform:scale(var(--zone-scale));
  transform-origin:center;
  transition:transform 280ms var(--cabin-ease),opacity 220ms var(--cabin-ease);
  will-change:transform;
}
.cabin-zone--overall .cabin-zone__inner{transform-origin:left center;}
.cabin-zone--graphics .cabin-zone__inner{transform-origin:right top;}
.cabin-zone--cpu .cabin-zone__inner{transform-origin:right bottom;}
.cabin-zone--overall.is-active .cabin-zone__inner,
.cabin-zone--graphics.is-active .cabin-zone__inner,
.cabin-zone--cpu.is-active .cabin-zone__inner{--zone-scale:1.06;}
.cabin-zone.is-dimmed .cabin-zone__inner{--zone-scale:.93;opacity:.65;}

/* 悬停 / 聚焦某个核时，该核所在分区跟着变大（斜切线整体平移），
   否则「默认就是左核激活」会让悬停左核完全没反应。数值沿用 V5 已验证的位移量。 */
.cabin.is-interacting[data-active="overall"] .cabin-bg--overall{clip-path:polygon(0 0,50% 0,63% 100%,0 100%);}
.cabin.is-interacting[data-active="overall"] .cabin-bg--graphics{clip-path:polygon(50% 0,100% 0,100% calc(var(--split) * 100%),calc(50% + 13% * var(--split)) calc(var(--split) * 100%));}
.cabin.is-interacting[data-active="overall"] .cabin-bg--cpu{clip-path:polygon(calc(50% + 13% * var(--split)) calc(var(--split) * 100%),100% calc(var(--split) * 100%),100% 100%,63% 100%);}
.cabin.is-interacting[data-active="overall"] .cabin-split{transform:translateX(7%);}
.cabin.is-interacting[data-active="overall"] .cabin-split-h{left:calc(50% + 13% * var(--split));}
.cabin.is-interacting[data-active="overall"] .cabin-zone--overall .cabin-zone__inner{--zone-scale:1.09;}
.cabin.is-interacting[data-active="overall"] .cabin-zone--graphics .cabin-zone__inner,
.cabin.is-interacting[data-active="overall"] .cabin-zone--cpu .cabin-zone__inner{transform:translateX(6%) scale(var(--zone-scale));}

.cabin.is-interacting[data-active="graphics"] .cabin-bg--overall,
.cabin.is-interacting[data-active="cpu"] .cabin-bg--overall{clip-path:polygon(0 0,36% 0,49% 100%,0 100%);}
.cabin.is-interacting[data-active="graphics"] .cabin-bg--graphics,
.cabin.is-interacting[data-active="cpu"] .cabin-bg--graphics{clip-path:polygon(36% 0,100% 0,100% calc(var(--split) * 100%),calc(36% + 13% * var(--split)) calc(var(--split) * 100%));}
.cabin.is-interacting[data-active="graphics"] .cabin-bg--cpu,
.cabin.is-interacting[data-active="cpu"] .cabin-bg--cpu{clip-path:polygon(calc(36% + 13% * var(--split)) calc(var(--split) * 100%),100% calc(var(--split) * 100%),100% 100%,49% 100%);}
.cabin.is-interacting[data-active="graphics"] .cabin-split,
.cabin.is-interacting[data-active="cpu"] .cabin-split{transform:translateX(-7%);}
.cabin.is-interacting[data-active="graphics"] .cabin-split-h,
.cabin.is-interacting[data-active="cpu"] .cabin-split-h{left:calc(36% + 13% * var(--split));}
.cabin.is-interacting[data-active="graphics"] .cabin-zone--overall .cabin-zone__inner,
.cabin.is-interacting[data-active="cpu"] .cabin-zone--overall .cabin-zone__inner{transform:translateX(-4%) scale(var(--zone-scale));}

/* 右侧两核是矮宽区：图在左、数据在右才放得下 */
.cabin-zone--graphics .cabin-zone__inner,
.cabin-zone--cpu .cabin-zone__inner{
  display:grid;
  grid-template-columns:minmax(132px,44%) minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-areas:"index index" "media data" "foot foot";
  column-gap:16px;
}
.cabin-zone--graphics .cabin-zone__index,
.cabin-zone--cpu .cabin-zone__index{grid-area:index;}
.cabin-zone--graphics .cabin-zone__media,
.cabin-zone--cpu .cabin-zone__media{grid-area:media;}
.cabin-zone--graphics .cabin-zone__data,
.cabin-zone--cpu .cabin-zone__data{grid-area:data;align-self:center;}
.cabin-zone--graphics .cabin-zone__foot,
.cabin-zone--cpu .cabin-zone__foot{grid-area:foot;}

.cabin-zone__index{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-family:"JetBrains Mono","Consolas",monospace;
  font-size:10px;letter-spacing:.14em;color:#929899;white-space:nowrap;
}
.cabin-zone__index span:last-child{color:#b7bcbd;}
.cabin-zone.is-active .cabin-zone__index span:first-child{color:#050607;}
.cabin-zone.is-dimmed .cabin-zone__index span:last-child{opacity:0;}

/* 媒体位：不再画框（无边框 / 无圆角 / 无底色），图直接落在分区底上。
   高度由 flex / grid 决定；图用绝对定位 + object-fit，避免 grid auto 轨道下
   max-height:100% 解析不出来（实测会溢出分区）。 */
.cabin-zone__media{
  position:relative;min-height:0;
}
.cabin-zone--overall .cabin-zone__media{flex:1 1 auto;}
.cabin-zone__media img{
  position:absolute;inset:0;display:block;
  width:100%;height:100%;
  object-fit:contain;
}
/* 显卡图按站内「我的硬件」同款处理（见 .spec-gpu .spec-cover img）：cover 铺满 + 留边。
   源图是正方形画布（800×800），显卡只占中间约 335px 高的一条 → 用 contain 会被高度卡住缩到
   162px 宽显得很小；cover 裁掉画布上下空白后显卡能到约 234px 宽。 */
/* 「再放大一点」：留边收掉（padding 5% → 0，cover 的缩放由内容框宽度决定，收边等于放大），
   并把显卡那一格的图列从 44% 加宽到 47%。 */
.cabin-zone--graphics .cabin-zone__media img{object-fit:cover;padding:0;}
.cabin-zone--graphics .cabin-zone__inner{grid-template-columns:minmax(132px,47%) minmax(0,1fr);}

.cabin-zone__data{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;}
.cabin-zone__label{
  width:100%;
  font-family:"JetBrains Mono","Consolas",monospace;
  font-size:10px;letter-spacing:.12em;color:#6f7475;
}
.cabin-zone__value{
  font-family:"JetBrains Mono","Consolas",monospace;
  font-size:44px;font-weight:600;line-height:.95;letter-spacing:-.06em;
  font-variant-numeric:tabular-nums;color:#050607;
}
.cabin-zone--overall .cabin-zone__value{font-size:54px;}
.cabin-zone__foot{
  overflow:hidden;
  font-family:"JetBrains Mono","Consolas",monospace;
  font-size:10px;letter-spacing:.04em;color:#6f7475;
  white-space:nowrap;text-overflow:ellipsis;
}

@media (prefers-reduced-motion:reduce){
  /* 减少动效时，分区位移与缩放一起关掉，只保留最终位置 */
  .cabin-zone__inner,
  .cabin-bg,
  .cabin-split,
  .cabin-split-h,
  .cabin-zone{transition:none;}
}

/* 平板：整体收敛 */
@media (max-width:1024px){
  .cabin{padding:52px var(--cabin-pad) 56px;}
  .cabin-stage{height:470px;}
  /* 左核宽度不改：39% 时右侧边界 + 激活放大（1.06）会越过斜切线，把 "TIME SPY" 切掉 */
  .cabin-zone--overall{width:37%;}
  .cabin-zone__value{font-size:34px;}
  .cabin-zone--overall .cabin-zone__value{font-size:44px;}
  .cabin-zone--graphics .cabin-zone__inner,
  .cabin-zone--cpu .cabin-zone__inner{grid-template-columns:minmax(108px,42%) minmax(0,1fr);column-gap:12px;}
}

/* 手机：取消绝对定位、斜切线、缩放，三核纵向堆叠（最后定义 + 提高特异性） */
@media (max-width:768px){
  .cabin{padding:40px var(--gutter, 20px) 48px;}
  .cabin-head{margin-bottom:20px;}
  .cabin-head-row{flex-direction:column;align-items:flex-start;gap:12px;}
  .cabin-desc{margin-bottom:0;}
  .cabin-stage{height:auto;display:grid;grid-template-columns:minmax(0,1fr);}
  .cabin-bg,.cabin-split,.cabin-split-h{display:none;}
  .cabin[data-active] .cabin-zone{
    position:relative;inset:auto;left:auto;right:auto;top:auto;bottom:auto;
    width:auto;height:auto;padding:18px;border-top:1px solid #e3e6e6;
  }
  .cabin[data-active] .cabin-zone:first-child{border-top:0;}
  .cabin[data-active] .cabin-zone .cabin-zone__inner{--zone-scale:1;transform:none;opacity:1;}
  /* 手机上不做“退到次位”的弱化，被聚焦核的英文注脚也就不该被藏掉 */
  .cabin[data-active] .cabin-zone .cabin-zone__index span:last-child{opacity:1;}
  /* 手机没有斜切线，任何分区位移都必须清掉（否则点击后内容会横向错位） */
  .cabin[data-active].is-interacting .cabin-zone .cabin-zone__inner{transform:none;}
  .cabin-zone--overall .cabin-zone__media,
  .cabin-zone--graphics .cabin-zone__media,
  .cabin-zone--cpu .cabin-zone__media{flex:0 0 auto;height:190px;}
  /* 手机宽度下右侧两核的 44% 图列只剩 ~128px，图会被压得很小 → 改成图全宽在上、数据在下 */
  .cabin-zone--graphics .cabin-zone__inner,
  .cabin-zone--cpu .cabin-zone__inner{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto auto auto;
    grid-template-areas:"index" "media" "data" "foot";
  }
  .cabin-zone--graphics .cabin-zone__media,
  .cabin-zone--cpu .cabin-zone__media{height:170px;}
  .cabin-zone__value{font-size:32px;}
  .cabin-zone--overall .cabin-zone__value{font-size:40px;}
}

/* ============================================================
   游戏性能报告（整块搬自结果页 DETAIL.003 · 2026-09-29）
   = SectionHeader + PerformancePreview + SeriesOfficial
   1) 全宽：与 .era-archive 同款做法破出 .container（线上结果页这块也是整幅）
   2) token：三个组件都依赖 build-guide 那套 --c-* / --font-* 变量（定义在
      src/styles/build-guide.css 的 :root）。展柜页没有，这里在包装层映射一份；
      只映射变量、不引整份 build-guide.css（那份里有 :root/body/* 全局规则，会把展柜页带乱）。
      注：--ls-mono 在线上同样没有定义（SectionHeader 用它做字距但有兜底），这里保持一致不补。
   ============================================================ */
.perf-report{
  position:relative;
  width:100vw;
  left:50%;
  transform:translateX(-50%);
  /* 底部留白 + 白底：series 那排最后是「查看全部」的浅灰按钮盒，不加留白会直接顶到
     下面 .era-archive 的 #f8fafa 灰底带（两种灰相撞、又没有过渡），交界看着别扭。 */
  background:#ffffff;
  padding-bottom:56px;
  --c-ink:#050607;
  --c-paper:#ffffff;
  --c-paper-2:#f0f0f0;
  --c-black:#000000;
  --c-line:#e3e6e6;
  --c-gray-66:#6f7475;
  --c-gray-52:#525252;
  --c-hair-dark:hsla(0,0%,100%,.2);
  /* 关键：Rail.astro 用 right: var(--rail-inset) 定位那条 3002px 的斜切导轨；
     变量缺失时 right 失效 → 导轨落到 x=0 撑出整页横向滚动（实测 bodyW 3002）。值同 build-guide.css。 */
  --rail-inset:359px;
  --font-inter:"Inter",system-ui,sans-serif;
  --font-noto-sans-sc:"Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;
  --font-jetbrains-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
  --font-display:var(--font-inter),var(--font-noto-sans-sc),sans-serif;
  --font-body:var(--font-inter),var(--font-noto-sans-sc),sans-serif;
  --font-cjk:var(--font-noto-sans-sc),var(--font-inter),sans-serif;
  --font-mono:var(--font-jetbrains-mono),ui-monospace,monospace;
}

/* 游戏性能报告底部的 gundam 斜切分割线（与 .vec-divider-bottom / 顶部同款：3002×46 的 SVG + #f8fafa 底带） */
.perf-divider-bottom{
  position:relative;width:100vw;left:50%;transform:translateX(-50%);
  height:46px;background:#f8fafa;overflow:visible;z-index:3;
}
.perf-divider-bottom svg{position:absolute;right:359px;top:-21.5px;z-index:50;width:3002px;height:46px;}

/* 这几条 gundam 斜切分割线用的是站内那条 3002×46 的导轨（right:359px = --rail-inset），
   斜切收尾在距右边缘 359px 处 —— 站内那边右侧本来有一栏内容（360px）接住它，展柜页这三处没有，
   所以线看起来"少了一截"。这里按各自线条颜色补一段 1px 短线到右边缘，斜切处与补线正好接上
   （斜切终点在 band 顶部 +0.5px）。只写在 my.css，只影响展柜页。 */
.hero-divider-bottom::after{content:"";position:absolute;right:0;top:0;width:359px;height:1px;background:#AEAEAE;}
.vec-divider-bottom::after,
.perf-divider-bottom::after{content:"";position:absolute;right:0;top:0;width:359px;height:1px;background:#c9c9c9;}