/* =========================================================
 * redesign-product.css — 产品页 4 区块深度重设计
 * 1) .ver-block / section[id] 装饰加强
 * 2) .compare-table 重设计
 * 3) .ver-anchor 顶部锚点条优化
 * 4) .ver-wizard 选型向导（新区块）
 * ======================================================== */

:root {
  --ver-b3: #2563eb; --ver-e3: #1e3a8a; --ver-m3: #8b5cf6; --ver-n3: #f59e0b;
  --ver-s3: #ec4899; --ver-j3: #d97706; --ver-h3: #a855f7; --ver-c3: #06b6d4;
  --ver-g3: #059669; --ver-p3: #475569;
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- 1. 版本主区块 装饰加强 ---------- */
.section[id$="3"]:where(#b3,#e3,#m3,#n3,#s3,#j3,#h3,#c3,#g3,#p3) {
  position: relative; overflow: hidden; isolation: isolate;
}
/* 超大版本号水印 + 圆形光球 */
.section[id$="3"]:where(#b3,#e3,#m3,#n3,#s3,#j3,#h3,#c3,#g3,#p3)::before {
  content: attr(id);
  position: absolute; top: -40px;
  font: 900 280px/1 var(--font-mono);
  letter-spacing: -0.06em;
  text-transform: uppercase;
  pointer-events: none; user-select: none; z-index: -1;
  opacity: 0.05;
  background: linear-gradient(180deg, currentColor 0%, transparent 75%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.section[id$="3"]:where(#b3,#e3,#m3,#n3,#s3,#j3,#h3,#c3,#g3,#p3)::after {
  content: ""; position: absolute; bottom: -200px;
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, currentColor 0%, transparent 70%);
  filter: blur(80px); opacity: 0.10;
  pointer-events: none; z-index: -1;
}
#b3::before, #m3::before, #s3::before, #h3::before, #g3::before { right: -20px; }
#e3::before, #n3::before, #j3::before, #c3::before, #p3::before { left: -20px; }
#b3::after, #m3::after, #s3::after, #h3::after, #g3::after { right: -180px; }
#e3::after, #n3::after, #j3::after, #c3::after, #p3::after { left: -180px; }
#b3 { color: var(--ver-b3); } #e3 { color: var(--ver-e3); }
#m3 { color: var(--ver-m3); } #n3 { color: var(--ver-n3); }
#s3 { color: var(--ver-s3); } #j3 { color: var(--ver-j3); }
#h3 { color: var(--ver-h3); } #c3 { color: var(--ver-c3); }
#g3 { color: var(--ver-g3); } #p3 { color: var(--ver-p3); }
/* 把 color token 还原给文字（避免污染卡片内文字色） */
#b3 .container, #e3 .container, #m3 .container, #n3 .container, #s3 .container,
#j3 .container, #h3 .container, #c3 .container, #g3 .container, #p3 .container { color: var(--c-text-primary); }

/* ver-head 强化：左侧色条 */
.section[id$="3"] .ver-head { position: relative; padding-left: 18px; }
#b3 .ver-head::before, #e3 .ver-head::before, #m3 .ver-head::before, #n3 .ver-head::before,
#s3 .ver-head::before, #j3 .ver-head::before, #h3 .ver-head::before, #c3 .ver-head::before,
#g3 .ver-head::before, #p3 .ver-head::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 4px; border-radius: 2px; background: currentColor;
}
#b3 .ver-head { color: var(--ver-b3); } #e3 .ver-head { color: var(--ver-e3); }
#m3 .ver-head { color: var(--ver-m3); } #n3 .ver-head { color: var(--ver-n3); }
#s3 .ver-head { color: var(--ver-s3); } #j3 .ver-head { color: var(--ver-j3); }
#h3 .ver-head { color: var(--ver-h3); } #c3 .ver-head { color: var(--ver-c3); }
#g3 .ver-head { color: var(--ver-g3); } #p3 .ver-head { color: var(--ver-p3); }
.section[id$="3"] .ver-head .ver-badge .label,
.section[id$="3"] .ver-head .ver-spotlight { color: var(--c-text-primary); }

/* ver-visual hover lift */
.ver-visual { transition: transform 0.55s var(--ease-spring), box-shadow 0.55s var(--ease-spring); }
.ver-visual:hover { transform: translateY(-8px); box-shadow: 0 24px 48px -12px rgba(15,37,71,0.18), 0 8px 16px -4px rgba(15,37,71,0.08); }

/* ---------- 2. 对比表重设计 ---------- */
.compare-wrap { border-radius: var(--r-xl); }
.compare-table thead th {
  background: linear-gradient(180deg, #fff 0%, var(--c-bg-soft) 100%);
  padding: var(--sp-5) var(--sp-3) var(--sp-4);
  position: relative;
}
.compare-table thead th::after {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: 0;
  height: 3px; border-radius: 2px; opacity: 0.85;
}
.compare-table thead th:nth-child(2)::after { background: var(--ver-b3); }
.compare-table thead th:nth-child(3)::after { background: var(--ver-e3); }
.compare-table thead th:nth-child(4)::after { background: var(--ver-m3); }
.compare-table thead th:nth-child(5)::after { background: var(--ver-n3); }
.compare-table thead th:nth-child(6)::after { background: var(--ver-s3); }
.compare-table thead th:nth-child(7)::after { background: var(--ver-j3); }
.compare-table thead th:nth-child(8)::after { background: var(--ver-h3); }
.compare-table thead th:nth-child(9)::after { background: var(--ver-c3); }
.compare-table thead th .code {
  background: transparent !important;
  font-size: 13px; font-weight: 800;
  padding: 0; margin-bottom: 6px;
}
.compare-table thead th:nth-child(2) .code { color: var(--ver-b3) !important; }
.compare-table thead th:nth-child(3) .code { color: var(--ver-e3) !important; }
.compare-table thead th:nth-child(4) .code { color: var(--ver-m3) !important; }
.compare-table thead th:nth-child(5) .code { color: var(--ver-n3) !important; }
.compare-table thead th:nth-child(6) .code { color: var(--ver-s3) !important; }
.compare-table thead th:nth-child(7) .code { color: var(--ver-j3) !important; }
.compare-table thead th:nth-child(8) .code { color: var(--ver-h3) !important; }
.compare-table thead th:nth-child(9) .code { color: var(--ver-c3) !important; }

/* 第一列 sticky */
.compare-table tbody td.feat {
  position: sticky; left: 0; z-index: 1; background: #fff;
  border-right: 1px solid var(--c-border);
  box-shadow: 1px 0 0 rgba(15,37,71,0.02);
}
.compare-table tbody tr:nth-child(even) td.feat { background: #fbfcfd; }
.compare-table tbody tr:hover td { background: var(--c-primary-50); transition: background 0.2s; }
.compare-table tbody tr:hover td.feat { background: linear-gradient(90deg, var(--c-primary-50), #fff); color: var(--c-primary-700); }

/* 单元图标重设计 */
.compare-table tbody td.check,
.compare-table tbody td.partial,
.compare-table tbody td.dash { font-size: 0; position: relative; }
.compare-table tbody td.check::before {
  content: ""; display: inline-block; width: 18px; height: 18px;
  border-radius: 50%;
  background-image: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 0 0 4px rgba(16,185,129,0.12);
  transition: transform 0.2s;
}
.compare-table tbody td.check::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 8px; height: 5px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: translate(-50%, -65%) rotate(-45deg);
}
.compare-table tbody td.partial::before {
  content: ""; display: inline-block; width: 18px; height: 18px;
  border-radius: 50%; background: #fff;
  border: 2.5px solid var(--c-accent-500);
  box-shadow: 0 0 0 4px rgba(245,158,11,0.10);
  transition: transform 0.2s;
}
.compare-table tbody td.dash::before {
  content: ""; display: inline-block; width: 16px; height: 3px;
  border-radius: 2px; background: var(--c-gray-300);
}
.compare-table tbody td.check:hover::before,
.compare-table tbody td.partial:hover::before { transform: scale(1.15); }

/* ---------- 3. 顶部锚点条优化 ---------- */
.ver-anchor {
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 4px 16px -8px rgba(15,37,71,0.10), 0 1px 0 rgba(15,37,71,0.04);
}
.ver-anchor a {
  position: relative; padding: 16px 14px;
  border-bottom: none !important;
  transition: color 0.25s var(--ease-spring), transform 0.25s var(--ease-spring);
}
.ver-anchor a::after {
  content: ""; position: absolute;
  left: 12px; right: 12px; bottom: 6px;
  height: 3px; border-radius: 2px;
  background: var(--grad-primary);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.4s var(--ease-spring);
}
.ver-anchor a:hover { transform: translateY(-1px); color: var(--c-primary-600); }
.ver-anchor a:hover::after { transform: scaleX(0.7); }
.ver-anchor a.is-active::after { transform: scaleX(1); }
.ver-anchor a.is-active { color: var(--c-primary-700); }
.ver-anchor a.is-active .code {
  background: var(--grad-primary); color: #fff;
  box-shadow: 0 4px 10px rgba(37,99,235,0.35);
}
@media (max-width: 768px) {
  .ver-anchor-inner { padding: 0 var(--sp-4); -webkit-overflow-scrolling: touch; }
  .ver-anchor a { padding: 12px 10px; font-size: 13px; }
  .ver-anchor a::after { left: 8px; right: 8px; }
}

/* ---------- 4. 版本选型向导（新区块） ---------- */
.ver-wizard {
  padding: var(--sp-20) 0;
  position: relative;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(37,99,235,0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(139,92,246,0.04) 0%, transparent 50%),
    var(--c-bg-soft);
  overflow: hidden;
}
.ver-wizard .container { max-width: var(--w-wide); margin: 0 auto; padding: 0 var(--sp-6); position: relative; z-index: 1; }
.wizard-head { text-align: center; margin-bottom: var(--sp-12); }
.wizard-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(37,99,235,0.10);
  color: var(--c-primary-600);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em;
  margin-bottom: var(--sp-4);
}
.wizard-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-primary-500); box-shadow: 0 0 0 3px rgba(37,99,235,0.25); }
.wizard-title { font-size: var(--fs-3xl); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 var(--sp-3); line-height: var(--lh-tight); }
.wizard-title .accent { background: var(--grad-primary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.wizard-sub { font-size: var(--fs-md); color: var(--c-text-secondary); line-height: var(--lh-relaxed); max-width: 640px; margin: 0 auto; }

.wizard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); margin-bottom: var(--sp-12); }
@media (max-width: 960px) { .wizard-grid { grid-template-columns: 1fr; } }

.wizard-q {
  background: #fff; border: 1px solid var(--c-border);
  border-radius: var(--r-xl); padding: var(--sp-6);
  position: relative; overflow: hidden;
  transition: transform 0.45s var(--ease-spring), box-shadow 0.45s var(--ease-spring), border-color 0.3s;
}
.wizard-q::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad-primary);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s var(--ease-spring);
}
.wizard-q::after {
  content: ""; position: absolute; top: -80px; right: -80px;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,0.08), transparent 70%);
  pointer-events: none;
}
.wizard-q:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -12px rgba(15,37,71,0.14); border-color: var(--c-primary-200); }
.wizard-q:hover::before { transform: scaleX(1); }
.wizard-q-num { font-family: var(--font-mono); font-size: 14px; font-weight: 800; color: var(--c-primary-500); letter-spacing: 0.08em; margin-bottom: var(--sp-2); }
.wizard-q-label { font-size: var(--fs-lg); font-weight: 700; color: var(--c-text-primary); margin-bottom: var(--sp-4); line-height: 1.35; }
.wizard-q-multi {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--r-full, 999px);
  font-size: 11px;
  font-weight: 600;
  color: var(--c-primary-600, #2563eb);
  background: var(--c-primary-50, rgba(37,99,235,0.1));
  letter-spacing: 0.02em;
}
.wizard-q-options { display: flex; flex-direction: column; gap: 10px; }
.wizard-q-options button {
  appearance: none; text-align: left;
  font-family: inherit; font-size: var(--fs-sm); font-weight: 600;
  padding: 12px 16px; border-radius: 12px;
  border: 1.5px solid var(--c-border);
  background: var(--c-bg-soft); color: var(--c-text-primary);
  cursor: pointer; position: relative;
  transition: all 0.3s var(--ease-spring);
}
.wizard-q-options button:hover {
  border-color: var(--c-primary-400); background: #fff;
  transform: translateX(4px); color: var(--c-primary-600);
  box-shadow: 0 4px 12px rgba(37,99,235,0.12);
}
.wizard-q-options button.is-active {
  border-color: var(--c-primary-500); background: var(--grad-primary);
  color: #fff; box-shadow: 0 8px 20px rgba(37,99,235,0.35);
  transform: translateX(4px);
}
.wizard-q-options button.is-active::after {
  content: "✓"; position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%); font-weight: 800;
}

/* 推荐结果卡 */
.wizard-result {
  background: #fff; border: 1px solid var(--c-border);
  border-radius: var(--r-xl); padding: var(--sp-8);
  box-shadow: var(--shadow-lg);
  position: relative; overflow: hidden; min-height: 220px;
  transition: all 0.5s var(--ease-spring);
}
.wizard-result[data-empty="true"] .wizard-rec-card { display: none; }
.wizard-result[data-empty="false"] .wizard-empty-tip { display: none; }
.wizard-result[data-empty="false"] {
  border-color: var(--c-primary-200);
  box-shadow: 0 24px 48px -12px rgba(37,99,235,0.20), 0 8px 16px -4px rgba(37,99,235,0.08);
}
.wizard-result-inner { display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; }
.wizard-rec-label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.16em; color: var(--c-text-tertiary); text-transform: uppercase; flex-shrink: 0; }
.wizard-rec-card { flex: 1; display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-5); align-items: center; min-width: 0; }
@media (max-width: 768px) { .wizard-rec-card { grid-template-columns: 1fr; } }
.wizard-rec-code {
  font-family: var(--font-mono); font-size: 56px; font-weight: 900;
  letter-spacing: -0.04em; line-height: 1; min-width: 90px;
  background: var(--grad-primary);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.wizard-rec-name { font-size: var(--fs-xl); font-weight: 800; color: var(--c-text-primary); margin-bottom: 4px; }
.wizard-rec-desc { font-size: var(--fs-sm); color: var(--c-text-secondary); }
.wizard-rec-actions { display: flex; gap: 10px; flex-wrap: wrap; flex-shrink: 0; }

/* 推荐卡按版本主色染色（10 版） */
.wizard-result[data-version="B3"] .wizard-rec-code { background: linear-gradient(135deg, var(--ver-b3), #06b6d4); -webkit-background-clip: text; background-clip: text; }
.wizard-result[data-version="E3"] .wizard-rec-code { background: linear-gradient(135deg, var(--ver-e3), var(--ver-b3)); -webkit-background-clip: text; background-clip: text; }
.wizard-result[data-version="M3"] .wizard-rec-code { background: linear-gradient(135deg, var(--ver-m3), var(--ver-h3)); -webkit-background-clip: text; background-clip: text; }
.wizard-result[data-version="N3"] .wizard-rec-code { background: linear-gradient(135deg, var(--ver-n3), var(--ver-j3)); -webkit-background-clip: text; background-clip: text; }
.wizard-result[data-version="S3"] .wizard-rec-code { background: linear-gradient(135deg, var(--ver-s3), var(--ver-m3)); -webkit-background-clip: text; background-clip: text; }
.wizard-result[data-version="J3"] .wizard-rec-code { background: linear-gradient(135deg, var(--ver-j3), var(--ver-n3)); -webkit-background-clip: text; background-clip: text; }
.wizard-result[data-version="H3"] .wizard-rec-code { background: linear-gradient(135deg, var(--ver-h3), var(--ver-s3)); -webkit-background-clip: text; background-clip: text; }
.wizard-result[data-version="C3"] .wizard-rec-code { background: linear-gradient(135deg, var(--ver-c3), var(--ver-g3)); -webkit-background-clip: text; background-clip: text; }
.wizard-result[data-version="G3"] .wizard-rec-code { background: linear-gradient(135deg, var(--ver-g3), var(--ver-c3)); -webkit-background-clip: text; background-clip: text; }
.wizard-result[data-version="P3"] .wizard-rec-code { background: linear-gradient(135deg, var(--ver-p3), var(--c-gray-700)); -webkit-background-clip: text; background-clip: text; }

.wizard-empty-tip {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 140px;
  color: var(--c-text-tertiary); font-size: var(--fs-md); text-align: center;
  border: 2px dashed var(--c-border); border-radius: var(--r-lg);
  background: var(--c-bg-soft);
}