/* ════════════════════════════════════════════════════════════════
   SRI 3.0 · 产品页共享样式 (products/shared/sri-product.css)
   依赖：/v4/sri-design-system-v4.css（提供 :root tokens / nav / footer）
   色板：--sri-brand #8B4513 · --sri-brown-deep #4A2410 · --sri-cream #F5E6D3
        --sri-gold #D4A574 · --sri-camel #C69C6D · --sri-gold-light #f3e3c4
   字体：--font-serif-cn 'Noto Serif SC' · --font-sans-cn system
   移动端优先：所有断点以 max-width 收缩，基准 ≤375px
   ════════════════════════════════════════════════════════════════ */

/* ── 共享层自包含令牌补全（2026-08-12 变量契约修复 · 对照 visual-baseline §10.2/§10.5） ──
   铁律：本层一切 var(--sri-*) 必须能在本 :root 或 design-system :root 找到定义，
   否则 var() 使整条声明静默失效（padding→0 / 字号→继承 / 圆角→直角 / 文字色→黑）。
   缺失清单由「grep 求差集」扫描得出，补全值对齐 products.html 参考样板。 */
:root {
  /* 间距（8pt 网格） */
  --sri-space-2: 8px;
  --sri-space-5: 20px;
  --sri-space-6: 24px;
  --sri-space-8: 32px;
  --sri-space-10: 40px;
  /* 字号 */
  --sri-fs-sm: 14px;
  --sri-fs-xs: 12px;
  /* 圆角 */
  --sri-radius-lg: 16px;
  --sri-radius-full: 999px;
  /* 文字色（对齐 products.html：design-system 缺 --sri-text，且 --sri-text-body 冷灰 #666 不符暖棕系） */
  --sri-text: #2D2418;
  --sri-text-light: #8B7355;
  /* 阴影（design-system 仅有 card/float，补中档与轻档） */
  --sri-shadow-sm: 0 1px 3px rgba(139,69,19,.08);
  --sri-shadow-md: 0 4px 16px rgba(92,46,13,.1);
  /* 暖白主底：以 products.html 为准（#FFFBF0），覆盖全局深黄 #F5E6D3 */
  --sri-cream: #FFFBF0;
}

/* ── 页面骨架 ── */
.product-page { max-width: 100%; overflow-x: hidden; }
.product-main { min-height: 60vh; }
.sri-container-narrow { max-width: 720px; margin: 0 auto; padding: 0 var(--sri-space-4); }
.sri-container-mid { max-width: 960px; margin: 0 auto; padding: 0 var(--sri-space-4); }

/* ── 产品 Hero（紧凑型） ── */
.p-hero { text-align: center; padding: var(--sri-space-12) 0 var(--sri-space-8); background: linear-gradient(180deg, var(--sri-cream) 0%, var(--sri-page-bg, #FAF8F4) 100%); }
.p-hero .p-emoji { font-size: 44px; line-height: 1; margin-bottom: var(--sri-space-3); }
.p-hero h1 { font-family: var(--font-serif-cn); font-size: clamp(26px, 6vw, 40px); color: var(--sri-brand); margin: var(--sri-space-2) 0; line-height: 1.3; }
.p-hero .p-sub { font-size: var(--sri-fs-body); color: var(--sri-text-body); opacity: .85; max-width: 560px; margin: 0 auto var(--sri-space-4); line-height: 1.8; }
.p-hero .p-meta { display: flex; gap: var(--sri-space-3); justify-content: center; flex-wrap: wrap; font-size: var(--sri-fs-sm); color: var(--sri-text-light); }
.p-hero .p-meta span { background: #fff; border: 1px solid var(--sri-gold-light); border-radius: var(--sri-radius-full); padding: 4px 14px; }
.p-hero .p-meta b { color: var(--sri-brand); }

/* ── 通用区块 ── */
.p-section { padding: var(--sri-space-10) 0; }
.p-section-head { display: flex; align-items: center; gap: var(--sri-space-3); margin-bottom: var(--sri-space-6); }
.p-section-head .gold-line { width: 3px; height: 22px; background: var(--sri-gold); border-radius: 2px; flex-shrink: 0; }
.p-section-head h2 { font-family: var(--font-serif-cn); font-size: var(--sri-fs-h2); color: var(--sri-brand); margin: 0; }

/* ── 按钮 ── */
.p-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; border-radius: var(--sri-radius-md); font-size: var(--sri-fs-body); font-weight: 600; cursor: pointer; border: none; transition: all .25s ease; text-decoration: none; font-family: var(--font-sans-cn); }
.p-btn-primary { background: #fff; color: var(--sri-brand); border: 2px solid var(--sri-brand); box-shadow: 0 2px 8px rgba(139,69,19,.08); }
.p-btn-primary:hover { background: var(--sri-cream); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(139,69,19,.12); }
.p-btn-gold { background: var(--sri-gold); color: var(--sri-brown-deep); }
.p-btn-gold:hover { background: var(--sri-camel); }
.p-btn-ghost { background: transparent; color: var(--sri-brand); border: 1.5px solid var(--sri-brand); }
.p-btn-ghost:hover { background: rgba(139,69,19,.06); }
.p-btn:disabled { background: var(--sri-camel); color: #fff; cursor: not-allowed; opacity: .7; }
.p-btn-row { display: flex; gap: var(--sri-space-3); justify-content: center; flex-wrap: wrap; margin-top: var(--sri-space-6); }

/* ── 评估通用（P01/P02/P05/P08…） ── */
.assess { max-width: 720px; margin: 0 auto; padding: var(--sri-space-8) var(--sri-space-4); }
.assess-intro { text-align: center; margin-bottom: var(--sri-space-8); }
.assess-intro h2 { color: var(--sri-brand); font-family: var(--font-serif-cn); }
.assess-intro .est { color: var(--sri-text-light); margin: var(--sri-space-3) 0; }
.progress-bar { height: 6px; background: var(--sri-cream); border-radius: 3px; margin-bottom: var(--sri-space-2); overflow: hidden; }
.progress-bar .fill { height: 100%; background: var(--sri-gold); transition: width .3s ease; border-radius: 3px; }
.progress-label { text-align: center; color: var(--sri-text-light); font-size: var(--sri-fs-sm); margin-bottom: var(--sri-space-6); }
.q-card { background: #fffdf8; border: 1px solid var(--sri-gold-light); border-radius: var(--sri-radius-md); padding: var(--sri-space-8); margin-bottom: var(--sri-space-6); box-shadow: var(--sri-shadow-sm, 0 1px 3px rgba(139,69,19,.08)); }
.q-card .q-num { font-size: var(--sri-fs-sm); color: var(--sri-text-light); margin-bottom: var(--sri-space-2); }
.q-card .q-dim { display: inline-block; font-size: 11px; color: var(--sri-brand); background: rgba(139,69,19,.06); border: 1px solid rgba(139,69,19,.12); border-radius: 999px; padding: 2px 10px; margin-bottom: var(--sri-space-3); }
.q-card .q-text { font-size: var(--sri-fs-h3); color: var(--sri-brand); margin-bottom: var(--sri-space-6); line-height: 1.6; font-family: var(--font-serif-cn); }
.options { display: flex; flex-direction: column; gap: var(--sri-space-4); }
.opt-btn { display: flex; align-items: center; width: 100%; padding: 16px var(--sri-space-4); border: 1.5px solid var(--sri-camel); border-radius: var(--sri-radius-sm); background: var(--sri-page-bg, #FAF8F4); color: var(--sri-text); font-size: var(--sri-fs-body); cursor: pointer; text-align: left; transition: all .2s ease; margin-bottom: 2px; }
.opt-btn:hover { border-color: var(--sri-gold); background: var(--sri-cream); }
.opt-btn.selected { border-color: var(--sri-brand); background: rgba(139,69,19,.06); color: var(--sri-brand); font-weight: 600; }
.opt-btn .opt-label { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--sri-camel); font-size: 12px; margin-right: var(--sri-space-3); flex-shrink: 0; color: var(--sri-text-light); }
.opt-btn.selected .opt-label { border-color: var(--sri-brand); background: #FFFBF0; color: var(--sri-brand); }

/* 5级量表 */
.scale-5 { display: flex; gap: var(--sri-space-2); }
.scale-5 .scale-opt { flex: 1; text-align: center; padding: 12px 4px; border: 1.5px solid var(--sri-camel); border-radius: var(--sri-radius-sm); cursor: pointer; font-size: var(--sri-fs-sm); transition: all .2s ease; background: var(--sri-page-bg); }
.scale-5 .scale-opt:hover { border-color: var(--sri-gold); }
.scale-5 .scale-opt.selected { border-color: var(--sri-brand); background: rgba(139,69,19,.08); color: var(--sri-brand); font-weight: 600; }
.scale-5 .scale-opt .num { font-size: 18px; font-weight: 700; display: block; }
.scale-5 .scale-opt .txt { font-size: 11px; opacity: .8; }

/* ── 结果区 ── */
.result-wrap { max-width: 720px; margin: 0 auto; padding: var(--sri-space-10) var(--sri-space-4); text-align: center; }
.result-wrap .score-big { font-family: var(--font-serif-cn); font-size: 64px; color: var(--sri-brand); line-height: 1; }
.result-wrap .tier-label { display: inline-block; padding: 6px 20px; border-radius: 999px; font-size: var(--sri-fs-body); font-weight: 600; margin: var(--sri-space-4) 0; background: var(--sri-gold); color: var(--sri-brown-deep); }
.result-wrap .desc { font-size: var(--sri-fs-body); color: var(--sri-text); line-height: 1.9; max-width: 560px; margin: var(--sri-space-4) auto; }
.dim-scores { display: flex; flex-wrap: wrap; gap: var(--sri-space-4); justify-content: center; margin: var(--sri-space-8) 0; }
.dim-item { text-align: center; min-width: 84px; }
.dim-item .dim-bar { width: 64px; height: 8px; background: var(--sri-cream); border-radius: 4px; margin: 0 auto var(--sri-space-2); overflow: hidden; }
.dim-item .dim-fill { height: 100%; background: var(--sri-gold); border-radius: 4px; }
.dim-item .dim-name { font-size: var(--sri-fs-xs); color: var(--sri-text-light); }
.dim-item .dim-val { font-size: var(--sri-fs-sm); color: var(--sri-brand); font-weight: 600; }
canvas.radar { max-width: 320px; width: 100%; height: auto; margin: var(--sri-space-6) auto; display: block; }

/* SPIN 四区（P02）——2026-08-12 浅色系统一修复 */
.spin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sri-space-4); }
.spin-card { border-radius: var(--sri-radius-md); padding: var(--sri-space-6); color: var(--sri-text); min-height: 170px; transition: transform .25s ease, box-shadow .25s ease; background: #FFFDF6; border: 1px solid var(--sri-gold-light); }
.spin-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(92,46,13,.12); }
.spin-card.spin-s { border-color: var(--sri-brand); }
.spin-card.spin-p, .spin-card.spin-i { border-color: var(--sri-gold); }
.spin-card.spin-n { border-color: var(--sri-brand); }
.spin-card .spin-letter { font-family: var(--font-serif-cn); font-size: 36px; font-weight: 900; opacity: .45; line-height: 1; margin-bottom: var(--sri-space-2); color: var(--sri-gold); }
.spin-card h3 { font-family: var(--font-serif-cn); font-size: var(--sri-fs-h3); margin: 0 0 var(--sri-space-3); color: var(--sri-brand); }
.spin-card .spin-desc { font-size: var(--sri-fs-sm); line-height: 1.7; opacity: .92; }

/* ── 卡牌网格（P01 抽卡 / P06 / P14） ── */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sri-space-4); }
.flip-card { perspective: 1000px; cursor: pointer; min-height: 200px; }
.flip-inner { position: relative; width: 100%; height: 100%; min-height: 200px; transition: transform var(--flip-duration, .6s) cubic-bezier(.4,0,.2,1); transform-style: preserve-3d; }
.flip-card.flipped .flip-inner { transform: rotateY(180deg); }
.flip-face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: var(--sri-radius-lg); padding: var(--sri-space-6); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; border: 1px solid var(--sri-gold-light); }
.flip-front { background: linear-gradient(160deg, #fffdf8, var(--sri-cream)); }
.flip-front .fc-emoji { font-size: 40px; margin-bottom: var(--sri-space-3); }
.flip-front .fc-title { font-family: var(--font-serif-cn); font-size: var(--sri-fs-h3); color: var(--sri-brand); }
.flip-front .fc-hint { font-size: var(--sri-fs-xs); color: var(--sri-text-light); margin-top: var(--sri-space-3); opacity: .8; }
.flip-back { background: linear-gradient(160deg, var(--sri-brand), var(--sri-brown-deepest)); color: #fff; transform: rotateY(180deg); }
.flip-back .fc-back-title { font-family: var(--font-serif-cn); font-size: var(--sri-fs-h3); margin-bottom: var(--sri-space-2); }
.flip-back .fc-back-text { font-size: var(--sri-fs-sm); line-height: 1.7; opacity: .92; }

/* ── 内容瀑布流（P07） ── */
.waterfall { columns: 3 280px; column-gap: var(--sri-space-4); }
.wf-card { break-inside: avoid; background: #fffdf8; border: 1px solid var(--sri-gold-light); border-radius: var(--sri-radius-md); padding: var(--sri-space-5); margin-bottom: var(--sri-space-4); transition: all .25s ease; cursor: pointer; }
.wf-card:hover { border-color: var(--sri-gold); box-shadow: var(--sri-shadow-card, 0 2px 12px rgba(92,46,13,.08)); transform: translateY(-2px); }
.wf-card .wf-type { font-size: 11px; color: var(--sri-brand); background: rgba(139,69,19,.06); border-radius: 999px; padding: 2px 10px; display: inline-block; margin-bottom: var(--sri-space-3); }
.wf-card .wf-title { font-family: var(--font-serif-cn); font-size: var(--sri-fs-h3); color: var(--sri-brand); margin-bottom: var(--sri-space-2); line-height: 1.4; }
.wf-card .wf-excerpt { font-size: var(--sri-fs-sm); color: var(--sri-text); line-height: 1.7; }
.wf-card .wf-rel { margin-top: var(--sri-space-3); font-size: var(--sri-fs-xs); color: var(--sri-text-light); border-top: 1px dashed var(--sri-gold-light); padding-top: var(--sri-space-2); }
.wf-tags { display: flex; flex-wrap: wrap; gap: var(--sri-space-2); margin: var(--sri-space-4) 0; }
.wf-tag { font-size: var(--sri-fs-xs); padding: 5px 12px; border-radius: 999px; border: 1px solid var(--sri-camel); background: var(--sri-page-bg); color: var(--sri-text-body); cursor: pointer; transition: all .2s ease; }
.wf-tag.active { background: #FFFBF0; color: var(--sri-brand); border-color: var(--sri-brand); }

/* ── 研习社预览（P06） ── */
.studio-preview .cal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sri-space-3); }
.cal-cell { background: #fffdf8; border: 1px solid var(--sri-gold-light); border-radius: var(--sri-radius-sm); padding: var(--sri-space-3); min-height: 96px; }
.cal-cell .cal-mo { font-size: 11px; color: var(--sri-text-light); }
.cal-cell .cal-ev { font-size: var(--sri-fs-xs); color: var(--sri-brand); margin-top: var(--sri-space-2); line-height: 1.5; }
.preview-sim { background: var(--sri-cream); border-radius: var(--sri-radius-lg); padding: var(--sri-space-8); margin: var(--sri-space-6) 0; text-align: center; }
.preview-sim .sim-quote { font-family: var(--font-serif-cn); font-size: var(--sri-fs-h3); color: var(--sri-brand); line-height: 1.7; max-width: 560px; margin: 0 auto; }
.member-compare { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sri-space-4); }
.member-card { background: #fffdf8; border: 1px solid var(--sri-gold-light); border-radius: var(--sri-radius-md); padding: var(--sri-space-6); text-align: center; }
.member-card.featured { border-color: var(--sri-brand); box-shadow: var(--sri-shadow-md); }
.member-card .m-name { font-family: var(--font-serif-cn); font-size: var(--sri-fs-h3); color: var(--sri-brand); }
.member-card .m-price { font-size: var(--sri-fs-h2); color: var(--sri-gold); font-weight: 700; margin: var(--sri-space-3) 0; }
.member-card ul { list-style: none; padding: 0; text-align: left; font-size: var(--sri-fs-sm); color: var(--sri-text); line-height: 2; }
.member-card li::before { content: '✓ '; color: var(--sri-gold); }

/* ── 推荐 CTA 盒 ── */
.cta-recommend { background: var(--sri-cream); border-radius: var(--sri-radius-md); padding: var(--sri-space-6); margin-top: var(--sri-space-8); max-width: 720px; margin-left: auto; margin-right: auto; }
.cta-recommend h3 { color: var(--sri-brand); font-family: var(--font-serif-cn); }
.cta-recommend .rec-link { color: var(--sri-brand); font-weight: 600; text-decoration: underline; }

/* ── 引擎标识 ── */
.engine-badges { display: flex; gap: var(--sri-space-3); justify-content: center; flex-wrap: wrap; margin: var(--sri-space-4) 0; }
.engine-badge { font-size: var(--sri-fs-xs); color: var(--sri-text-light); background: #fff; border: 1px solid var(--sri-gold-light); border-radius: 999px; padding: 4px 12px; }
.engine-badge.beta { border-color: var(--sri-camel); color: var(--sri-brand); }

/* ── 场景宫格（P02） ── */
.scene-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sri-space-3); }
.scene-card { aspect-ratio: 1 / 1; border: 1px solid var(--sri-gold-light); border-radius: var(--sri-radius-md); background: #fffdf8; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: all .2s ease; text-align: center; padding: var(--sri-space-2); }
.scene-card:hover { border-color: var(--sri-gold); }
.scene-card.selected { border: 2px solid var(--sri-gold); box-shadow: 0 0 0 4px rgba(212,165,116,.2); transform: scale(1.04); }
.scene-card .sc-emoji { font-size: 28px; }
.scene-card .sc-label { font-size: var(--sri-fs-xs); color: var(--sri-brand); margin-top: 6px; }

/* textarea */
.p-textarea { width: 100%; min-height: 100px; padding: 12px; border: 1px solid var(--sri-camel); border-radius: var(--sri-radius-sm); font-size: var(--sri-fs-body); font-family: var(--font-sans-cn); background: var(--sri-page-bg); resize: vertical; margin: var(--sri-space-4) 0; }

/* reveal 动画 */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ── 响应式 ── */
@media (max-width: 900px) {
  .spin-grid { grid-template-columns: 1fr; }
  .cal-grid { grid-template-columns: repeat(2, 1fr); }
  .member-compare { grid-template-columns: 1fr; }
  .scene-grid { grid-template-columns: repeat(3, 1fr); }
  .waterfall { columns: 2 240px; }
}
@media (max-width: 640px) {
  .scene-grid { grid-template-columns: repeat(2, 1fr); }
  .cal-grid { grid-template-columns: 1fr 1fr; }
  .waterfall { columns: 1; }
  .q-card { padding: var(--sri-space-5); }
  .p-hero { padding: var(--sri-space-10) var(--sri-space-4) var(--sri-space-6); }
  .scale-5 .scale-opt .txt { display: none; }
  .scale-5 .scale-opt { padding: 14px 2px; }
}