/* ==========================================================================
   战稳官网 · 转化层样式 flow.css —— 改版 v2
   --------------------------------------------------------------------------
   定稿依据：《产品设计定稿-改版v2.md》§1（令牌/动效）、§2.6（WAI 三页）、
             §2.7（登录页）、§2.8（我的）、§2.11（404）
   覆盖：
     1. 转化层通用（容器 / 标题阶梯 / 表单 / loading / Toast / 错误页）
     2. /wai 介绍页（zw-wai-hero / 要点列表）
     3. /wai/start 答题页（进度条 / 选项卡 / 交卷）
     4. /wai/done 测完领报告页（档位 / 报告编号 code 块）
     5. /wai/sample 示例报告页（五维条形 —— --dim-* 唯一使用处 / 档位说明）
     6. /login 登录页（单列窄卡：微信扫码主入口 + 手机验证码次入口）
     7. /me 我的（身份卡 / 快测记录 / 已购权益只读）
     8. 404
   改版删除（旧文件中对应样式整段移除）：
     公告条 AnnouncementBar、礼包弹窗 OfferModal、流失挽回 ExitCTA、
     留资弹层 LeadModal、下单/结算 checkout、预约 consult、促销 promo、
     /wai/report 付费墙（¥19.9 解锁）。
   V3 换皮约定：颜色一律走 style.css :root 的令牌；全直角、无投影卡片；
         信号橙仅用于基线刻度 / 必读标记 / 当前选中态等极小面积标记位；
         动效仅 reveal / btn-state / toast（prefers-reduced-motion 由 style.css 统一降级）。
   ========================================================================== */

/* ==========================================================================
   1. 转化层通用
   ========================================================================== */

.zw-container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}
.zw-scope { padding: var(--sp-6) 0; }

/* 标题阶梯（与 style.css 的 h1/h2/h3 一致，供非语义标题类使用） */
.zw-h1 { font-size: var(--fs-h1); line-height: var(--fs-h1-lh); font-weight: 600; color: var(--ink); margin: 0 0 var(--sp-2); }
.zw-h2 { font-size: var(--fs-h2); line-height: var(--fs-h2-lh); font-weight: 600; color: var(--ink); margin: 0 0 var(--sp-2); }
.zw-h3 { font-size: var(--fs-h3); line-height: var(--fs-h3-lh); font-weight: 600; color: var(--ink); margin: 0 0 var(--sp-1); }

.zw-lead { font-size: var(--fs-body); color: var(--ink-2); margin: 0 0 var(--sp-3); max-width: 640px; }
.zw-p { font-size: var(--fs-small); color: var(--ink-2); margin: 0; }
.zw-small { font-size: var(--fs-small); color: var(--ink-3); line-height: var(--fs-small-lh); margin: 0; }
.zw-small a { color: var(--zw-primary); }

/* 说明卡（怎么答 / 隐私 等） */
.zw-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--sp-3);
  margin-bottom: var(--sp-2);
  transition: border-color var(--dur-btn) ease;
}
.zw-card:hover { border-color: var(--zw-primary); }

/* 提示条（信息性，主色浅底） */
.zw-notice {
  background: var(--zw-primary-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-small);
  color: var(--ink);
}
.zw-notice strong { color: var(--ink); }

/* 合规备注（小字，页底） */
.zw-legal-note {
  margin-top: var(--sp-4);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--line);
  font-size: var(--fs-meta);
  line-height: var(--fs-meta-lh);
  color: var(--ink-3);
}

/* ---- loading ---- */
.zw-loading {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-6) 0;
  text-align: center;
}
.zw-loading__spinner {
  width: 28px; height: 28px;
  border-radius: 50%; /* 功能性圆形，V3 保留 */
  border: 3px solid var(--line);
  border-top-color: var(--zw-primary);
  animation: zw-spin 0.8s linear infinite;
}
.zw-loading__text { margin: 0; font-size: var(--fs-small); color: var(--ink-2); }
.zw-loading__sub { margin: 0; font-size: var(--fs-meta); color: var(--ink-3); }
@keyframes zw-spin { to { transform: rotate(360deg); } }

/* ---- Toast（顶部滑入 0.25s ease-out，3s 后滑出） ---- */
.zw-toast {
  position: fixed; top: calc(var(--header-h) + 12px); left: 50%;
  transform: translate(-50%, -16px);
  opacity: 0;
  z-index: 300;
  max-width: min(420px, calc(100vw - 32px));
  padding: 10px 20px;
  background: var(--ink);
  color: #fff;
  font-size: var(--fs-small);
  line-height: 1.6;
  border-radius: var(--radius-btn);
  pointer-events: none;
  transition: opacity var(--dur-toast) ease-out, transform var(--dur-toast) ease-out;
}
.zw-toast.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---- 错误 / 兜底区块 ---- */
.zw-error .zw-lead { max-width: none; }

/* ==========================================================================
   2. /wai 介绍页（§2.6）
   ========================================================================== */

.zw-wai-hero {
  background: var(--bg-sub);
  border-bottom: 1px solid var(--line);
  padding: var(--sp-5) 0;
  text-align: center;
}
.zw-wai-hero .zw-h1 { margin-bottom: var(--sp-1); }
.zw-wai-hero .zw-lead { margin: 0 auto; max-width: 560px; }

.zw-wai-points {
  list-style: none;
  margin: 0 0 var(--sp-3);
  padding: 0;
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.zw-wai-points li {
  margin: 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-body);
  color: var(--ink);
  display: flex; gap: 10px; align-items: baseline;
}
.zw-wai-points li::before {
  content: "";
  flex: none;
  width: 6px; height: 6px; border-radius: 50%; /* 功能性状态圆点，V3 保留 */
  background: var(--zw-primary);
  transform: translateY(-2px);
}

/* ==========================================================================
   3. /wai/start 答题页（登录门槛由 app.js 守卫处理；页头无推荐位）
   ========================================================================== */

.zw-quiz {
  max-width: 640px;
  margin: 0 auto;
}
.zw-quiz__top {
  display: flex; justify-content: space-between;
  font-size: var(--fs-meta);
  color: var(--ink-3);
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.zw-progress {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--line);
  overflow: hidden;
  margin-bottom: var(--sp-4);
}
.zw-progress__fill {
  height: 100%;
  background: var(--zw-primary);
  border-radius: var(--radius-pill);
  transition: width var(--dur-btn) ease;
}
.zw-quiz__stem {
  font-size: var(--fs-h3);
  line-height: 1.6;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 var(--sp-1);
}
.zw-quiz__hint {
  font-size: var(--fs-meta);
  color: var(--ink-3);
  margin: 0 0 var(--sp-3);
}
.zw-opts {
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.zw-opt {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2);
  width: 100%;
  font-family: inherit;
  font-size: var(--fs-body);
  text-align: left;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  transition: border-color var(--dur-btn) ease, background-color var(--dur-btn) ease;
}
.zw-opt:hover { border-color: var(--zw-primary); }
.zw-opt.is-active {
  border-color: var(--zw-primary);
  background: var(--zw-primary-soft);
}
.zw-opt__idx {
  flex: none;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; /* 功能性圆形序号，V3 保留 */
  background: var(--bg-sub);
  border: 1px solid var(--line);
  color: var(--ink-3);
  font-size: var(--fs-meta);
}
.zw-opt.is-active .zw-opt__idx {
  background: var(--zw-primary);
  border-color: var(--zw-primary);
  color: #fff;
}
.zw-quiz__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.zw-quiz__save { font-size: var(--fs-meta); color: var(--ink-3); }

/* ==========================================================================
   4. /wai/done/:token 测完领报告页（§2.6）
   ========================================================================== */

.zw-done-tier {
  background: var(--zw-primary-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-3);
}
.zw-code-line {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--ink);
}

.zw-done-token {
  text-align: center;
  margin-bottom: var(--sp-4);
}
.zw-code-block {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 20px;
  letter-spacing: .04em;
  color: var(--ink);
  background: var(--bg-code);
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  padding: var(--sp-2) var(--sp-4);
  word-break: break-all;
  user-select: all;
}
.zw-done-token__hint {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-small);
  color: var(--ink-2);
}

/* ==========================================================================
   5. /wai/sample 示例报告页（公开；--dim-* 仅此页图表使用，定稿 §1.1）
   ========================================================================== */

.zw-scorecard {
  text-align: center;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.zw-scorecard__label { font-size: var(--fs-meta); color: var(--ink-3); margin-bottom: 6px; }
.zw-scorecard__num {
  font-size: 44px; font-weight: 600; color: var(--ink);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.zw-scorecard__num small { font-size: var(--fs-body); color: var(--ink-3); font-weight: 400; }
.zw-scorecard__tier {
  margin-top: 6px;
  display: inline-block;
  font-size: var(--fs-small); font-weight: 600;
  color: var(--zw-primary);
  background: var(--zw-primary-soft);
  border-radius: var(--radius-pill);
  padding: 3px 14px;
}
.zw-scorecard__desc { margin: var(--sp-2) 0 0; font-size: var(--fs-small); color: var(--ink-2); }

.zw-bandlist { display: flex; flex-direction: column; gap: 4px; }
.zw-band {
  display: grid;
  grid-template-columns: 110px 1fr 40px;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-small);
}
.zw-band__name {
  display: flex; align-items: center; gap: 8px;
  color: var(--ink);
  font-weight: 600;
}
.zw-band__name i {
  flex: none;
  width: 8px; height: 8px;
  border-radius: 0;
}
.zw-band__track {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-sub);
  border: 1px solid var(--line);
  overflow: hidden;
  display: block;
}
.zw-band__fill { display: block; height: 100%; border-radius: var(--radius-pill); }
.zw-band__val {
  text-align: right;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.zw-band__comment {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-meta);
  color: var(--ink-3);
  padding-left: calc(110px + 32px);
}

.zw-tierlist { display: flex; flex-direction: column; gap: var(--sp-2); }
.zw-tier-item {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-small);
  color: var(--ink-2);
  transition: border-color var(--dur-btn) ease;
}
.zw-tier-item.is-current { border-color: var(--zw-primary); background: var(--zw-primary-soft); }
.zw-tier-item__name { display: block; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.zw-tier-item__name em {
  font-style: normal;
  font-size: var(--fs-meta);
  color: var(--zw-primary);
  background: var(--bg);
  border: 1px solid var(--zw-primary);
  border-radius: var(--radius-pill);
  padding: 1px 10px;
  margin-left: 8px;
}
.zw-tier-item p { margin: 0; }

/* ==========================================================================
   6. /login 登录页（§2.7：单列窄卡 max-width 400px 居中）
   ========================================================================== */

.zw-login-wrap {
  max-width: 400px;
  margin: 0 auto;
  padding: var(--sp-6) 0 var(--sp-7);
  text-align: center;
}
.zw-login-wrap .zw-h1 { margin-bottom: 6px; }
.zw-login-wrap .zw-lead { margin: 0 auto var(--sp-4); max-width: none; }

.zw-login-block {
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--sp-3);
}
.zw-login__label {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink);
}

/* 微信扫码区（300×300 大号二维码，点击发起 OAuth；本地点击 toast 提示） */
.zw-qr-area {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--sp-3);
  cursor: pointer;
  font-family: inherit;
  transition: border-color var(--dur-btn) ease;
}
.zw-qr-area:hover { border-color: var(--zw-primary); }
.zw-qr-area img {
  width: 300px; height: 300px;
  max-width: 100%;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-img);
  background: var(--bg-sub);
  object-fit: cover;
}
.zw-qr-area__cap {
  font-size: var(--fs-meta);
  color: var(--ink-3);
}

/* 分隔线「或」 */
.zw-login-divider {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: var(--sp-3) 0;
  color: var(--ink-3);
  font-size: var(--fs-meta);
}
.zw-login-divider::before,
.zw-login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* 表单 */
.zw-field { margin-bottom: var(--sp-2); }
.zw-label {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.zw-req { color: var(--zv-signal); margin-left: 2px; } /* 必读标记：极小面积信号橙 */
.zw-input {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  padding: 10px 14px;
  transition: border-color var(--dur-btn) ease;
}
.zw-input::placeholder { color: var(--ink-3); }
.zw-input:focus { outline: none; border-color: var(--zw-primary); }
.zw-input:focus-visible { outline: 2px solid var(--zv-signal); outline-offset: 2px; }

.zw-code-row { display: flex; gap: var(--sp-1); }
.zw-code-row .zw-input { flex: 1; min-width: 0; }

.zw-form-err {
  display: none;
  margin-top: 6px;
  font-size: var(--fs-meta);
  color: var(--dim-crisis);
}
.zw-form-err.is-on { display: block; }

.zw-form-hint {
  margin: 0 0 var(--sp-2);
  padding: 6px 12px;
  font-size: var(--fs-meta);
  color: var(--zw-primary);
  background: var(--zw-primary-soft);
  border-radius: var(--radius-btn);
}
.zw-form-hint[hidden] { display: none; }

/* ==========================================================================
   7. /me 我的（§2.8 云用户版）
   ========================================================================== */

.zw-me-head {
  display: flex; align-items: center; gap: var(--sp-2);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--sp-3);
  flex-wrap: wrap;
}
.zw-me-avatar {
  flex: none;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; /* 功能性头像圆形，V3 保留 */
  background: var(--zw-primary);
  color: var(--zw-primary-ink);
  font-size: 18px; font-weight: 600;
}
.zw-me-name { font-size: var(--fs-h3); font-weight: 600; color: var(--ink); }
.zw-me-sub { margin-top: 4px; }

.zw-tag {
  display: inline-block;
  font-size: var(--fs-meta);
  color: var(--zw-primary);
  background: var(--zw-primary-soft);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
}

.zw-orderlist {
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.zw-orderitem {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--sp-2) var(--sp-3);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--dur-btn) ease;
}
.zw-orderitem:hover { border-color: var(--zw-primary); text-decoration: none; }
.zw-orderitem__main { min-width: 0; }
.zw-orderitem__name {
  font-size: var(--fs-body); font-weight: 600; color: var(--ink);
  word-break: break-all;
}
.zw-orderitem__meta {
  margin-top: 2px;
  font-size: var(--fs-meta);
  color: var(--ink-3);
}

.zw-empty-card {
  background: var(--bg-sub);
  border: 1px dashed var(--line);
  border-radius: var(--radius-card);
  padding: var(--sp-4) var(--sp-3);
  text-align: center;
}
.zw-empty-card__title { margin: 0; font-size: var(--fs-small); color: var(--ink-2); }
.zw-empty-card__title a { color: var(--zw-primary); }
.zw-empty-card__sub { margin: 6px 0 0; font-size: var(--fs-meta); color: var(--ink-3); }

/* ==========================================================================
   8. 404（§2.11）
   ========================================================================== */

.zw-404 {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--sp-7) 0;
  text-align: center;
}
.zw-404__code {
  font-size: 72px;
  font-weight: 600;
  line-height: 1;
  color: var(--line);
  margin-bottom: var(--sp-2);
  font-variant-numeric: tabular-nums;
}
.zw-404 .zw-lead { margin: 0 auto; max-width: none; }
.zw-404 .zw-lead a { color: var(--zw-primary); font-weight: 600; }

/* ==========================================================================
   响应式（移动 < 768）
   ========================================================================== */

@media (max-width: 767px) {
  .zw-scope { padding: var(--sp-6) 0; }

  .zw-qr-area img { width: 100%; height: auto; aspect-ratio: 1 / 1; }

  .zw-login-wrap { padding: var(--sp-5) 0 var(--sp-6); }

  .zw-band {
    grid-template-columns: 90px 1fr 36px;
    gap: 10px;
  }
  .zw-band__comment { padding-left: calc(90px + 20px); }

  .zw-quiz__stem { font-size: var(--fs-body); }

  .zw-me-head .zw-btn { margin-left: 0; }
}