/* ===== 寻梦阁 CSS v3.4 ===== */
/* 优化版本：视觉层次 + 交互反馈增强 */

/* ===== 1. 基础重置 ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
/* 无障碍跳转链接 - 视觉隐藏但保持可访问性 */
.skip-link{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link:focus{position:fixed;top:0;left:0;width:auto;height:auto;padding:8px 16px;background:#62775F;color:#fff;z-index:999999;font-size:14px;text-decoration:none;border-radius:0 0 4px 4px}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg,#FAF6F1);
  color:var(--text,#2d1f2d);
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  line-height:1.65;
  font-size:15px;
  padding-bottom:max(env(safe-area-inset-bottom,0px),20px)
}
.page-wrap{width:100%;max-width:600px;margin:0 auto;padding:0 16px}

/* ===== 2. CSS变量 - 增强对比度 ===== */
:root{
  /* 色彩系统 - 增强对比度 */
  --accent:#4A6352;
  --accent2:#6B8A6F;
  --accent-gradient:linear-gradient(135deg,#4A6352,#6B8A6F);
  --accent-hover:#3D5244;
  --accent-glow:rgba(74,99,82,0.3);
  
  /* 背景色 */
  --bg:#FAF8F5;
  --bg2:#F0EBE3;
  --bg-card:#FFFFFF;
  --bg-hover:#FDFCFA;
  
  /* 文字色 - 增强对比度 */
  --text:#1F1815;
  --text2:#4A3F38;
  --text3:#6B5E55;
  --text-muted:#8A7A72;
  
  /* 卡片 */
  --card:#fff;
  --card-border:#E8E2DC;
  --card-shadow:0 1px 4px rgba(0,0,0,0.04);
  --card-hover-shadow:0 4px 16px rgba(0,0,0,0.08);
  
  /* 阴影系统 */
  --shadow-sm:0 1px 3px rgba(0,0,0,0.05);
  --shadow-md:0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:0 8px 24px rgba(0,0,0,0.12);
  
  /* 圆角系统 */
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:20px;
  --radius-full:9999px;
  
  /* 间距系统 */
  --space-xs:4px;
  --space-sm:8px;
  --space-md:14px;
  --space-lg:20px;
  --space-xl:28px;
  
  /* 过渡 */
  --transition:all .2s ease;
  --transition-fast:all .15s ease;
}

/* 深色模式 */
@media(prefers-color-scheme:dark){
  :root{
    --bg:#1A1614;
    --bg2:#242019;
    --bg-card:#2A231E;
    --bg-hover:#302820;
    --text:#F0EBE3;
    --text2:#D4C8BC;
    --text3:#B0A090;
    --text-muted:#8A7A70;
    --card:#2A231E;
    --card-border:#3D352E;
    --card-shadow:0 1px 4px rgba(0,0,0,0.2);
    --card-hover-shadow:0 4px 16px rgba(0,0,0,0.3);
    --accent:#8FB892;
    --accent2:#6B8A6F;
    --accent-hover:#9FC8A2;
    --accent-gradient:linear-gradient(135deg,#8FB892,#6B8A6F);
  }
}
:root.dark{--bg:#1A1614;--bg2:#242019;--bg-card:#2A231E;--bg-hover:#302820;--text:#F0EBE3;--text2:#D4C8BC;--text3:#B0A090;--text-muted:#8A7A70;--card:#2A231E;--card-border:#3D352E;--accent:#8FB892;--accent2:#6B8A6F;--accent-hover:#9FC8A2;--accent-gradient:linear-gradient(135deg,#8FB892,#6B8A6F)}
:root.light{--bg:#FAF8F5;--bg2:#F0EBE3;--bg-card:#FFFFFF;--bg-hover:#FDFCFA;--text:#1F1815;--text2:#4A3F38;--text3:#6B5E55;--text-muted:#8A7A72;--card:#fff;--card-border:#E8E2DC;--accent:#4A6352;--accent2:#6B8A6F;--accent-hover:#3D5244;--accent-gradient:linear-gradient(135deg,#4A6352,#6B8A6F)}

/* ===== 3. 导航 ===== */
.top-nav{
  position:sticky;
  top:0;
  z-index:100;
  background:color-mix(in srgb,var(--bg) 94%,transparent);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  padding:12px 0;
  border-bottom:1px solid var(--card-border)
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 8px
}
.logo{
  font-size:17px;
  font-weight:700;
  color:var(--text);
  display:flex;
  align-items:center;
  gap:6px;
  letter-spacing:-0.3px
}
.nav-cta{
  background:var(--accent-gradient);
  color:#fff;
  border:none;
  border-radius:var(--radius-full);
  padding:10px 18px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  text-decoration:none;
  transition:var(--transition);
  min-height:44px;
  display:inline-flex;
  align-items:center;
  box-shadow:var(--shadow-sm);
  letter-spacing:0.2px
}
.nav-cta:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  background:var(--accent-hover)
}
.nav-cta:active{transform:translateY(0)}

/* ===== 4. Hero ===== */
.hero{
  text-align:center;
  padding:32px 0 20px;
  position:relative
}
.hero-glow{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:280px;
  height:140px;
  background:radial-gradient(ellipse,rgba(74,99,82,0.1),transparent 70%);
  pointer-events:none
}
.hero h1{
  font-size:30px;
  font-weight:800;
  background:var(--accent-gradient);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  margin-bottom:10px;
  letter-spacing:-0.5px;
  line-height:1.2
}
.hero-sub{
  font-size:15px;
  color:var(--text2);
  margin-bottom:6px;
  font-weight:500;
  letter-spacing:0.3px
}
.hero-desc{
  font-size:15px;
  color:var(--text3);
  line-height:1.6;
  margin-bottom:20px;
  max-width:320px;
  margin-left:auto;
  margin-right:auto
}
.hero-buttons{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap
}
.btn-hero-wechat,.btn-hero-qq{
  background:none;
  border:none;
  border-radius:var(--radius-lg);
  padding:10px 18px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  gap:6px
}
.btn-hero-wechat{
  background:var(--accent-gradient);
  color:#fff;
  box-shadow:0 2px 12px var(--pink-glow)
}
.btn-hero-qq{
  background:var(--accent-gradient);
  color:#fff;
  box-shadow:0 2px 12px rgba(18,183,245,0.3)
}
.btn-primary{
  background:var(--accent-gradient);
  color:#fff;
  border:none;
  border-radius:var(--radius-full);
  padding:13px 22px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:var(--transition);
  min-height:46px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  box-shadow:var(--shadow-sm);
  letter-spacing:0.2px
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  background:var(--accent-hover)
}
.btn-primary:active{transform:translateY(0)}
.btn-secondary{
  background:var(--bg-card);
  color:var(--text);
  border:1.5px solid var(--card-border);
  border-radius:var(--radius-full);
  padding:13px 22px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:var(--transition);
  min-height:46px;
  display:inline-flex;
  align-items:center;
  gap:6px
}
.btn-secondary:hover{
  background:var(--bg-hover);
  border-color:var(--accent);
  color:var(--accent)
}

/* ===== 5. 社交证明 ===== */
.social-proof{
  display:flex;
  justify-content:center;
  gap:16px;
  padding:18px 12px;
  margin:16px 0;
  background:var(--card);
  border-radius:var(--radius-lg);
  border:1px solid var(--card-border);
  box-shadow:var(--card-shadow);
  flex-wrap:wrap
}
.proof-item{text-align:center;min-width:70px}
.proof-num{
  font-size:22px;
  font-weight:750;
  color:var(--accent);
  letter-spacing:-0.5px;
  line-height:1.1
}
.proof-label{
  font-size:12px;
  color:var(--text-muted);
  margin-top:4px;
  font-weight:500
}

/* ===== 6. Tab切换 ===== */
.zone-tabs{
  display:flex;
  gap:10px;
  padding:20px 0 14px;
  justify-content:center
}
.zone-tab{
  flex:1;
  padding:13px 14px;
  border:1.5px solid var(--card-border);
  background:var(--card);
  border-radius:var(--radius-md);
  font-size:13px;
  font-weight:600;
  color:var(--text3);
  cursor:pointer;
  transition:var(--transition-fast);
  text-align:center;
  min-height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  box-shadow:var(--card-shadow)
}
.zone-tab.active{
  background:var(--accent-gradient);
  color:#fff;
  border-color:transparent;
  box-shadow:var(--shadow-sm)
}
.zone-tab:not(.active):hover{
  background:var(--bg-hover);
  border-color:var(--accent);
  color:var(--accent)
}
.zone-badge{
  background:rgba(255,255,255,0.25);
  color:inherit;
  border-radius:var(--radius-sm);
  padding:2px 7px;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.3px
}
.zone-tab:not(.active) .zone-badge{
  background:var(--accent);
  color:#fff
}

/* ===== 7. 区块标题 ===== */
.section{
  padding:0 0 16px
}
.section-title{
  font-size:13px;
  color:var(--text3);
  margin-bottom:10px;
  font-weight:600;
  letter-spacing:0.4px;
  text-transform:uppercase
}

/* ===== 8. 卡片网格 ===== */
.card-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}
.test-card{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:16px;
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:var(--radius-lg);
  text-decoration:none;
  color:inherit;
  transition:var(--transition);
  position:relative;
  overflow:hidden;
  min-height:90px;
  box-shadow:var(--card-shadow)
}
.test-card:hover{
  transform:translateY(-3px);
  border-color:var(--accent);
  box-shadow:var(--card-hover-shadow)
}
.test-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:var(--accent-gradient);
  opacity:0;
  transition:opacity .2s
}
.test-card:hover::before{opacity:1}
.card-icon{font-size:24px;line-height:1;margin-bottom:2px}
.card-info h3{
  font-size:14px;
  font-weight:600;
  color:var(--text);
  margin-bottom:2px;
  line-height:1.35;
  letter-spacing:-0.1px
}
.card-num{
  margin-right:4px;
  color:var(--accent);
  font-weight:700
}
.card-info p{
  font-size:12px;
  color:var(--text3);
  line-height:1.45
}
.card-arrow{
  font-size:16px;
  color:var(--text-muted);
  position:absolute;
  top:14px;
  right:14px;
  transition:var(--transition-fast)
}
.test-card:hover .card-arrow{
  color:var(--accent);
  transform:translateX(2px)
}

/* ===== 9. 推荐标签 ===== */
.card-tag{
  display:inline-block;
  font-size:11px;
  background:var(--accent);
  color:#fff;
  padding:3px 8px;
  border-radius:var(--radius-sm);
  margin-bottom:4px;
  font-weight:600;
  letter-spacing:0.2px
}

/* ===== 10. 隐私卡片 ===== */
.privacy-card{
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:var(--radius-lg);
  padding:18px;
  margin:14px 0;
  box-shadow:var(--card-shadow)
}
.privacy-card h3{
  font-size:14px;
  color:var(--accent);
  margin-bottom:8px;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:6px
}
.privacy-card p{
  font-size:13px;
  color:var(--text3);
  line-height:1.65
}

/* ===== 11. 成人确认页 ===== */
.adult-confirm{
  text-align:center;
  padding:28px 24px;
  background:var(--card);
  border:1.5px solid var(--card-border);
  border-radius:var(--radius-xl);
  margin:16px 0;
  box-shadow:var(--card-shadow)
}
.adult-icon{font-size:56px;margin-bottom:14px}
.adult-confirm h2{
  font-size:19px;
  font-weight:750;
  color:var(--text);
  margin-bottom:10px;
  letter-spacing:-0.3px
}
.adult-confirm p{
  font-size:14px;
  color:var(--text3);
  line-height:1.65;
  margin-bottom:24px
}
.adult-enter-btn{
  display:block;
  width:100%;
  background:var(--accent-gradient);
  color:#fff;
  border:none;
  border-radius:var(--radius-full);
  padding:15px;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  margin-bottom:12px;
  min-height:50px;
  box-shadow:var(--shadow-sm);
  transition:var(--transition)
}
.adult-enter-btn:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  background:var(--accent-hover)
}
.adult-enter-btn:active{transform:scale(0.98)}
.adult-back-btn{
  display:block;
  width:100%;
  background:transparent;
  color:var(--text3);
  border:1.5px solid var(--card-border);
  border-radius:var(--radius-full);
  padding:13px;
  font-size:14px;
  cursor:pointer;
  min-height:48px;
  transition:var(--transition-fast)
}
.adult-back-btn:hover{
  background:var(--bg-hover);
  border-color:var(--text-muted)
}

/* ===== 12. 新手引导弹窗 ===== */
.guide-overlay{
  position:fixed;
  inset:0;
  z-index:10000;
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(4px);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity .3s;
  pointer-events:none
}
.guide-overlay.show{
  opacity:1;
  pointer-events:auto
}
.guide-modal{
  background:var(--card);
  border-radius:var(--radius-xl);
  padding:28px 24px;
  max-width:340px;
  width:90%;
  text-align:center;
  transform:translateY(20px) scale(0.95);
  transition:transform .3s;
  box-shadow:var(--shadow-lg)
}
.guide-overlay.show .guide-modal{
  transform:translateY(0) scale(1)
}
.gm-icon{font-size:48px;margin-bottom:14px}
.guide-modal h2{
  font-size:19px;
  font-weight:750;
  margin-bottom:10px;
  color:var(--text);
  letter-spacing:-0.3px
}
.guide-modal p{
  font-size:14px;
  color:var(--text3);
  line-height:1.65;
  margin-bottom:24px
}
.gm-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--accent-gradient);
  color:#fff;
  border:none;
  border-radius:var(--radius-full);
  padding:14px 32px;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  transition:var(--transition);
  text-decoration:none;
  min-height:50px;
  box-shadow:var(--shadow-sm);
  letter-spacing:0.2px
}
.gm-btn:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  background:var(--accent-hover)
}
.gm-btn:active{transform:scale(0.97)}
.gm-close{
  position:absolute;
  top:12px;
  right:12px;
  background:none;
  border:none;
  font-size:20px;
  color:var(--text-muted);
  cursor:pointer;
  width:34px;
  height:34px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:var(--transition-fast)
}
.gm-close:hover{background:var(--bg-hover);color:var(--text)}

/* ===== 13. 底部导航 ===== */
/* V11.x 高度预算：整条底栏（含版权行）≤90px，占 844px 视口 <11%（见验收 R2）。
   外层是 column 竖排容器（为容纳其后的版权行/更新横幅），
   5 个 tab 必须由内层 .tab-items 横排承载 —— 见 scripts/bottom-nav.js。 */
.bottom-tab-bar{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:1000;
  background:var(--card);
  border-top:1px solid var(--card-border);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:6px 0 calc(6px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -2px 10px rgba(0,0,0,0.04)
}
.bottom-tab-bar .tab-items{
  display:flex;
  width:100%;
  justify-content:space-around;
  align-items:center;
  padding:0 4px
}
.bottom-tab-bar .tab-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:6px 8px;
  text-decoration:none;
  color:var(--text3);
  font-size:11px;
  transition:var(--transition-fast);
  flex:1;
  min-width:52px;
  /* V11.x 移动端UX: 触摸目标不小于44x44(iOS HIG / WCAG2.5.5)，
     原 padding:7px 12px + font-size:11px 实测仅 54x16px，误触率高 */
  min-height:48px;
  border-radius:var(--radius-sm);
  -webkit-tap-highlight-color:transparent
}
.bottom-tab-bar .tab-item:hover,
.bottom-tab-bar .tab-item.active{
  color:var(--accent)
}
.bottom-tab-bar .tab-icon{font-size:22px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.bottom-tab-bar .tab-icon svg{display:block}
.bottom-tab-bar .tab-label{font-size:10px;font-weight:600;white-space:nowrap;line-height:1.2}
.bottom-tab-bar .site-copyright{
  font-size:12px;
  color:var(--text-muted);
  text-align:center;
  padding:2px 0;
  margin-top:2px;
  line-height:1.25;
  border-top:1px solid var(--card-border);
  width:100%
}
/* 固定底栏占位。真实高度由 scripts/bottom-nav.js 实测后以 !important 覆盖；
   这里的 88px 仅作无 JS 时（或脚本未执行）的静态兜底。 */
body.nav-active{padding-bottom:88px}

/* ===== 14. 输入框 ===== */
input,textarea,select{
  border:1.5px solid var(--card-border) !important;
  border-radius:var(--radius-md) !important;
  padding:13px 15px !important;
  outline:none !important;
  font-size:15px !important;
  background:var(--card) !important;
  color:var(--text) !important;
  transition:var(--transition-fast);
  width:100%
}
input:focus,textarea:focus,select:focus{
  border-color:var(--accent) !important;
  box-shadow:0 0 0 3px rgba(74,99,82,0.12) !important;
  background:var(--bg-hover) !important
}
input::placeholder{color:var(--text3) !important}

/* ===== 15. 页脚 ===== */
.site-footer{
  text-align:center;
  padding:20px 0 28px
}
.site-footer p{
  font-size:12px;
  color:var(--text-muted);
  margin-bottom:6px
}
.site-footer a{
  color:var(--accent);
  text-decoration:none;
  transition:var(--transition-fast)
}
.site-footer a:hover{color:var(--accent-hover);text-decoration:underline}

/* ===== 16. 弹窗遮罩 ===== */
.modal-overlay{
  position:fixed;
  inset:0;
  z-index:9000;
  background:rgba(0,0,0,0.5);
  backdrop-filter:blur(3px);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity .25s;
  pointer-events:none
}
.modal-overlay.show{opacity:1;pointer-events:auto}
.modal-box{
  background:var(--card);
  border-radius:var(--radius-xl);
  padding:24px;
  max-width:320px;
  width:90%;
  box-shadow:var(--shadow-lg);
  transform:scale(0.9);
  transition:transform .25s
}
.modal-overlay.show .modal-box{transform:scale(1)}

/* ===== 17. Toast提示 ===== */
.toast{
  position:fixed;
  bottom:90px;
  left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--text);
  color:#fff;
  padding:12px 20px;
  border-radius:var(--radius-full);
  font-size:14px;
  font-weight:500;
  box-shadow:var(--shadow-md);
  opacity:0;
  transition:all .3s;
  pointer-events:none;
  z-index:9999;
  white-space:nowrap
}
.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0)
}

/* ===== 18. 加载动画 ===== */
.loading{
  display:inline-flex;
  align-items:center;
  gap:8px
}
.loading::after{
  content:'';
  width:16px;
  height:16px;
  border:2px solid var(--card-border);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin .8s linear infinite
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== 19. 动画 ===== */
@keyframes fadeIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
.animate-in{animation:fadeIn .4s ease forwards}
.delay-1{animation-delay:.1s;opacity:0}
.delay-2{animation-delay:.2s;opacity:0}
.delay-3{animation-delay:.3s;opacity:0}

/* ===== 20. 进度条 ===== */
.progress-bar{
  height:6px;
  background:var(--card-border);
  border-radius:var(--radius-full);
  overflow:hidden
}
.progress-bar .progress{
  height:100%;
  background:var(--accent-gradient);
  border-radius:var(--radius-full);
  transition:width .3s ease
}

/* ===== 21. 标签页 ===== */
.tag{
  display:inline-block;
  padding:4px 10px;
  background:var(--bg2);
  color:var(--text3);
  border-radius:var(--radius-full);
  font-size:12px;
  font-weight:500
}
.tag.accent{
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  color:var(--accent)
}

/* ===== 22. 分割线 ===== */
.divider{
  height:1px;
  background:var(--card-border);
  margin:16px 0
}

/* ===== 23. 测试页面核心组件 ===== */
/* 适用于所有测试页面（green/slave/sm/bitch/memory-test） */

.test-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* 细长进度条 */
.progress-track {
  height: 4px;
  background: var(--card-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}
.progress-fill {
  height: 100%;
  background: var(--accent-gradient);
  border-radius: var(--radius-sm);
  transition: width 0.4s cubic-bezier(0.65, 0, 0.35, 1);
  box-shadow: 0 0 8px var(--accent-glow, rgba(72, 187, 120, 0.3));
}

/* 测试内容区 */
.test-main {
  flex: 1;
  overflow: hidden;
  position: relative;
}
.test-slides {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.test-slide {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: 24px;
  padding-bottom: 100px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
  -webkit-overflow-scrolling: touch;
}
.test-slide.cur {
  opacity: 1;
  pointer-events: auto;
}

/* 问题文本 */
.q-text {
  font-size: clamp(18px, 3vw, 22px);
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 24px;
  max-width: 540px;
  font-weight: 500;
}
.q-hint {
  font-size: 12px;
  color: var(--text-muted);
  opacity: 0.7;
  margin-bottom: 20px;
  font-style: italic;
}

/* 选项列表 */
.opts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 540px;
}
.opt {
  background: var(--card);
  border: 1px solid var(--card-border);
  padding: 16px 20px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  overflow: hidden;
  user-select: none;
}
.opt::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background: var(--accent);
  transition: width 0.35s ease;
}
.opt > * {
  position: relative;
  z-index: 1;
}
@media (hover: hover) {
  .opt:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
  .opt:hover::before {
    width: 4px;
  }
}
.opt:active {
  transform: translateY(0);
}
.opt.sel {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.opt-mark {
  width: 28px;
  height: 28px;
  border: 1px solid var(--card-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: all 0.3s ease;
}
.opt.sel .opt-mark {
  background: #fff;
  color: var(--accent);
  border-color: #fff;
}
.opt-text {
  flex: 1;
  font-size: 14px;
  line-height: 1.6;
}

/* 问题编号标签 */
.q-num {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.05em;
  margin-bottom: 24px;
  padding: 8px 16px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-radius: var(--radius-xl);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
}

/* 底部导航栏 */
.test-bar {
  flex-shrink: 0;
  display: flex;
  gap: 12px;
  padding: 12px 24px;
  border-top: 1px solid var(--card-border);
  background: var(--bg);
}
.test-btn {
  flex: 1;
  padding: 14px;
  border: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.05em;
}
.test-btn.prev {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--card-border);
}
.test-btn.prev:hover {
  border-color: var(--text-muted);
  color: var(--text);
}
.test-btn.next {
  background: var(--accent);
  color: #fff;
}
.test-btn.next:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.test-btn.next:disabled {
  opacity: 0.4;
  cursor: default;
  transform: none;
  box-shadow: none;
}

/* 隐私协议弹窗 */
.privacy-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.privacy-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  max-width: 400px;
  width: 100%;
  text-align: center;
}
.privacy-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 12px;
}
.privacy-text {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.8;
  text-align: left;
  margin-bottom: 20px;
}
.privacy-btn {
  width: 100%;
  padding: 14px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.05em;
}
.privacy-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* ===== 23. 简化首页样式 ===== */
.page-main{
  padding:0 16px 40px;
  max-width:600px;
  margin:0 auto
}
.hero{
  text-align:center;
  padding:24px 0 20px
}
.hero-title{
  font-size:28px;
  font-weight:800;
  color:var(--accent);
  margin-bottom:8px
}
.hero-sub{
  font-size:14px;
  color:var(--text2);
  margin-bottom:4px
}
.hero-desc{
  font-size:13px;
  color:var(--text3)
}
.zone-section{
  margin-bottom:24px
}
.zone-title{
  font-size:15px;
  font-weight:600;
  color:var(--text);
  margin-bottom:12px;
  display:flex;
  align-items:center;
  gap:6px
}
.age-tag{
  font-size:11px;
  background:var(--accent);
  color:#fff;
  padding:2px 6px;
  border-radius:var(--radius-sm)
}
.zone-notice{
  font-size:12px;
  color:var(--text-muted);
  margin-bottom:12px
}
.test-list{
  display:flex;
  flex-direction:column;
  gap:8px
}
.test-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 12px;
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:var(--radius-md);
  text-decoration:none;
  color:var(--text)
}
.test-item:hover{
  border-color:var(--accent)
}
.test-icon{
  font-size:20px;
  width:32px;
  text-align:center;
  flex-shrink:0
}
.test-info{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:2px
}
.test-name{
  font-size:14px;
  font-weight:500;
  color:var(--text)
}
.test-desc{
  font-size:12px;
  color:var(--text-muted)
}
.test-arrow{
  font-size:18px;
  color:var(--text-muted)
}
.zone-adult .test-item{
  border-color:var(--adult-accent,var(--accent))
}
.contact-row{
  display:flex;
  gap:8px;
  margin-top:16px;
  flex-wrap:wrap
}
.btn-contact{
  flex:1;
  min-width:140px;
  padding:12px 14px;
  border:none;
  border-radius:var(--radius-md);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  text-align:center
}
.btn-wechat{
  background:var(--accent-gradient);
  color:#fff
}
.btn-qq{
  background:linear-gradient(135deg,#12b7f5,#2b6cb0);
  color:#fff
}
.site-footer{
  text-align:center;
  padding:24px 16px;
  border-top:1px solid var(--card-border)
}
.footer-links{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-bottom:8px
}
.footer-links a{
  color:var(--text-muted);
  text-decoration:none;
  font-size:13px
}
.footer-copy{
  font-size:12px;
  color:var(--text-muted)
}
.footer-dot{
  color:var(--text-muted)
}

/* ===== 24. 响应式调整 ===== */
@media (max-width: 380px) {
  .card-grid { grid-template-columns: 1fr }
  .social-proof { gap: 16px; padding: 14px 12px }
  .proof-num { font-size: 20px }
  .zone-tabs { flex-direction: column }
  .zone-tab { width: 100% }
}

/* ===== V11.0 移动端 UX 升级 · 样式统一迁移（t_fba7336c）=====
   CSP 已移除 style-src 'unsafe-inline'：
   - 本区块内所有类即"新增移动端 UI"的唯一合法内联样式落点
   - UA 脚本动态注入样式一律用 document.styleSheets / CSSStyleSheet.insertRule 或 el.style（JS API）
   - 禁止再往 HTML 写内联 style 属性（会被浏览器静默丢弃）
   类名前缀：vm- (virtual mobile)。 */
:root {
  --vm-gap: 12px;
  --vm-radius: 14px;
  --vm-shadow: 0 4px 16px rgba(0,0,0,0.08);
  --vm-min-hit: 44px;
}
.vm-hero {
  padding: 12px 0;
  text-align: center;
}
.vm-hero h1 {
  font-size: 22px;
  font-weight: 700;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.vm-hero .vm-hero-sub {
  font-size: 14px;
  color: var(--text3);
}
.vm-card {
  background: var(--bg-card);
  border: 1px solid var(--card-border);
  border-radius: var(--vm-radius);
  padding: var(--vm-gap);
  box-shadow: var(--vm-shadow);
}
.vm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--vm-min-hit);
  min-width: var(--vm-min-hit);
  padding: 10px 18px;
  border-radius: var(--radius-lg);
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.vm-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.vm-tabs::-webkit-scrollbar { display: none; }
.vm-tab {
  flex: 0 0 auto;
  padding: 8px 14px;
  min-height: var(--vm-min-hit);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: var(--bg2);
  color: var(--text2);
  border: 1px solid transparent;
}
.vm-tab.active {
  background: var(--accent-gradient);
  color: #fff;
}
.vm-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-md);
  font-size: 11px;
  font-weight: 700;
}
.vm-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--vm-gap);
}
@media (max-width: 768px) {
  .vm-grid { grid-template-columns: 1fr; }
  .vm-hero h1 { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .vm-btn, .vm-tab { transition: none; }
}

/* ===== V11.9 mobile helper classes (t_86ab293e) =====
   CSP style-src 'unsafe-inline' 已在 V11.0 移除 (commit 5915ff2)。
   本区块提供 11 处首页内联 style= 的等价 class 替代，
   使 index.html 内联 style 属性降为 0。
   命名：vm9- (V11.9 virtual mobile helper)。 */

/* 1. body 水平滚动保护 */
.vm9-overflow-x-hidden {
  overflow-x: hidden;
}
/* 【V11.x t_xmg_mobile_ux】全局横向溢出兜底。
   仅有 body{overflow-x:hidden} 不够：当某个子元素（如带负 margin 的 .idx-hero）
   宽于视口时，documentElement.scrollWidth 仍会被撑大，浏览器仍会预留纵向滚动条，
   从而把 window.innerWidth 撑到 clientWidth 之上，并连带把所有 position:fixed
   的 left:0;right:0 元素（导航栏 / 底部标签栏）拉宽到溢出。
   故在根元素 html 上也加 overflow-x:hidden，确保 scrollWidth 恒等于 clientWidth。 */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* 2. 导航右侧控件容器 (flex 对齐 + 字体 + 防压缩) */
.vm9-nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* 3. 主题切换按钮 (圆形 hit area, 透明背景) */
.vm9-theme-btn {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 8px;
  min-width: 36px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.15s;
}

/* 4. 主内容区 (fixed navbar 56px + safe-area 顶部间距) */
.vm9-main-content {
  margin-top: calc(56px + env(safe-area-inset-top, 0px));
  padding: 0;
}

/* 5-11. Hero 浮动粒子 — 逐个命名 (left/bottom/duration/delay/font-size) */
.vm9-particle-1 {
  left: 8%;
  bottom: 10%;
  animation-duration: 6s;
  animation-delay: 0s;
  font-size: 15px;
}
.vm9-particle-2 {
  left: 20%;
  bottom: 5%;
  animation-duration: 8s;
  animation-delay: 1s;
  font-size: 12px;
}
.vm9-particle-3 {
  left: 35%;
  bottom: 12%;
  animation-duration: 7s;
  animation-delay: 0.5s;
  font-size: 16px;
}
.vm9-particle-4 {
  left: 50%;
  bottom: 8%;
  animation-duration: 9s;
  animation-delay: 1.5s;
  font-size: 10px;
}
.vm9-particle-5 {
  left: 65%;
  bottom: 10%;
  animation-duration: 6.5s;
  animation-delay: 0.8s;
  font-size: 14px;
}
.vm9-particle-6 {
  left: 78%;
  bottom: 6%;
  animation-duration: 7.5s;
  animation-delay: 2s;
  font-size: 13px;
}
.vm9-particle-7 {
  left: 90%;
  bottom: 10%;
  animation-duration: 8.5s;
  animation-delay: 2.5s;
  font-size: 11px;
}

/* ===== V11.x 移动端体验提升（2026-09-13 t_xmg_mobile_ux）===== */
/* 背景：手机端实测发现三类全局性缺陷，此处集中兜底。
   1) 触摸目标过小（底部导航 54x16px，远低于 44px 最小标准）→ 误触率高
   2) 小字号正文本（<14px）在手机上难以阅读
   3) 键盘弹出时固定底栏遮挡输入框
   这些规则原先只存在于 site.css，而引用 site.v5.css 的页面（首页/留言墙/小瓶子等）不加载 site.css，
   导致兜底失效。此处补齐，使 site.v5.css 自成完整体系。 */

/* --- 1. 触摸目标全局兜底（iOS HIG / WCAG 2.5.5 建议 44x44 最小） --- */
@media (max-width:768px){
  a[href],button,.btn,[role="button"],input[type="submit"],[onclick]{
    min-height:44px;
    min-width:44px;
  }
  /* 不强制正文内联链接、底部导航内部的链接（已单独处理），避免破坏文本流布局 */
  p a[href],span a[href],li a[href],td a[href],.tab-item{
    min-height:auto;
    min-width:auto;
  }

  /* --- 1b. 具名触摸目标修复（V11.x t_xmg_mobile_ux 实测补丁） ---
     以下元素实测命中区不足 44x44，逐一显式修正。
     注意：这些页面的元素多由 JS 动态创建或位于渲染后插入的 DOM 中，
     故用属性/伪类选择器而非固定 class 列表，尽量覆盖各处用法。 */

  /* 表单控件：实测 43px 高（padding 12px + 15px 行高），差 1px 不达标。
     用 min-height 而非改 padding，避免视觉上比邻近元素突兀。 */
  .form-input,.form-select{
    min-height:44px;
  }

  /* 全局「← 返回首页」返回链接：实测 69x17px，是最典型的误触源。
     常见于 .back a/.back-link/.nav-back/.share-btn 等不同命名，故统一兜底。
     inline-block + 上下 padding 撑高命中区，视觉上文字位置几乎不变。 */
  a[href$="/"].back-link,
  .back > a,
  .back a[href],
  .nav-back,
  .share-btn{
    display:inline-flex;
    align-items:center;
    min-height:44px;
    padding-top:12px;
    padding-bottom:12px;
  }

  /* 【P1-4 2026-09-13】.back-link 裸蓝链接修复：wall 顶导航等处复用该类但页面自身
     无颜色规则 → UA 默认蓝+下划线，与全站设计割裂。统一走品牌色。 */
  .back-link{
    color:var(--accent);
    text-decoration:none;
    font-weight:600;
  }

  /* 测试/结果页的主 CTA 按钮：实测 43px 高（padding 12px + 14px 行高） */
  .btn,.empty-cta,.cta-btn,.btn-submit,.btn-next,.done-link{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  /* flex 行内被 align-items:stretch 拉伸的按钮（tab 切换 / 复制按钮）：
     只写 min-height 无效（实测即便 !important 设 60px，computed 仍为 40px），
     必须显式 height 才能撑高命中区。 */
  .tab-btn,.copy-btn{
    height:44px;
    box-sizing:border-box;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  /* 全屏按钮：实测 32x40px */
  .fullscreen-btn{
    min-height:44px;
    min-width:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
}

/* --- 2. 小字号可读性：辅助文字提升对比度补偿小字号 --- */
@media (max-width:768px){
  .bottom-tab-bar .tab-label,
  .bottom-tab-bar .site-copyright,
  .zone-badge,
  .card-tag,
  .meta-item .lbl,
  .intro .eyebrow{
    /* 小字号需更高对比度才可读（WCAG AA 反比关系） */
    color:var(--text2,var(--text,#2d1f2d));
  }

  /* --- 2b. 小字号底线提升（V11.x t_xmg_mobile_ux 实测） ---
     实测依据：首页 47 处、留言墙 30 处文本 <12px。逐一评估后只提升「确属正文/标签语义」
     的两类，不做无差别放大：
     - .tab-label 10px：底部导航的核心标签，每屏常驻且承载唯一导航语义，10px 中文明显偏小；
       实测每个 tab 宽 52px，标签仅占 20px，放到 12px 也才 24px，空间充裕不会换行。
     - .site-copyright 10px：版权声明，10px 下几乎不可读；提到 11px 兼顾可读与不喧宾夺主。
     有意保留不动的：hero 副标题 11.8px / 统计标签 9.9px 等属**装饰性**文字（颜色对比度较高、
     文案重复或非必读），放大反而会挤压 hero 的视觉留白；这些维持原样。 */
  .bottom-tab-bar .tab-label{
    font-size:12px;
  }
  .bottom-tab-bar .site-copyright{
    font-size:12px;
  }
}

/* --- 3. 键盘弹出时隐藏固定底栏，避免遮挡输入框 --- */
/* 用 :focus-within 近似判断“有输入聚焦”。iOS Safari 下键盘弹出会缩小 visual viewport，
   固定定位底栏会浮在键盘上方遮挡输入区域。聚焦时暂时让出空间。 */
body:has(input:focus,textarea:focus) .bottom-tab-bar{
  transform:translateY(110%);
  transition:transform .2s ease;
}

/* --- 4. iOS 地址栏适配：100vh 在 Safari 下大于可视区，统一补 dvh 回退 --- */
@supports (height:100dvh){
  .page,.container,.wrapper,.app{
    min-height:100dvh;
  }
}

/* ============================================================
   V12 视觉升级 (2026-09-14 t_10cce579)
   ------------------------------------------------------------
   依据 9 份审计报告 (phase1/2 + v12-a11y) 的 P0/P1 移动端 UI 项,
   在 site.v5.css 兜底层集中修复。原则:
   - 只加规则, 不改各页内联 <style> / HTML;
   - 选择器限定在 site.v5.css 已有体系 (TabBar / 底部预留 / 触控目标 / 横滚),
     不碰 test-common.css 与各页专属 class;
   - 对比度/字号按 WCAG AA: 小字(≥12px) 需 4.5:1, 大字 3:1。
   已确认: 全站 0 个 P0 CSS 项; 此处补 3 个 P1 级移动端 UI 项。
   ============================================================ */

/* --- V12-1 触控目标全局兜底加强 (P1: 触控目标 ≥44px) ---
   审计: 首页 47 处、留言墙 30 处文本 <12px; 部分按钮/标签实测 <44px。
   现 site.v5.css 仅 @media(max-width:768px) 内对 a[href]/button/.tab-btn/.copy-btn 做了 44px,
   桌面端 (≥769px) 无兜底。补一条桌面端安全网: 仅作用于「独立按钮类」, 不影响行内文字流。 */
@media (min-width:769px){
  .btn,.cta-btn,.btn-submit,.btn-next,.done-link,.empty-cta,.copy-btn,.fullscreen-btn{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
}

/* --- V12-2 横向滚动收敛 (P1: 各页 scrollW>375 横向溢出) ---
   审计: quiz/quiz-female 桌面 scrollW=1264; hobbies 第 6 个 tab right=424>375。
   html/body 已 overflow-x:hidden, 但「有意的横滚容器」(.category-tabs / .vm-tabs)
   需保留 overflow-x:auto, 同时确保其父级不被撑破。补: 横滚容器自身加 -webkit 平滑 +
   给 .category-tabs 加边缘渐隐 fade, 提示用户「还有更多 tab 可滑」(修复 P1-5 无溢出指示)。 */
.category-tabs{
  -webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 16px,#000 calc(100% - 16px),transparent);
  mask-image:linear-gradient(to right,transparent,#000 16px,#000 calc(100% - 16px),transparent);
}
@media (max-width:480px){
  .category-tabs{
    -webkit-mask-image:none;
    mask-image:none;
  }
}

/* --- V12-3 底部让位统一 + 对比度补偿 (P1: 小字可读性 / 底栏遮挡) ---
   审计: P0-2 末张卡片被 TabBar 遮挡; 各页底部让位 80/100px 不一致。
   统一: 凡带 nav-active(注入了底栏) 的 body, 底部预留 = 底栏 56px + safe-area。
   现 body.nav-active{padding-bottom:88px} 是静态兜底; 此处收敛为 calc(64px+safe-area),
   并让「含正文的容器类」追加让位, 避免末元素被 TabBar 物理遮挡。
   注: TabBar 真实高度由 bottom-nav.js 实测后 !important 覆盖, 此处仅为无 JS 静态兜底。 */
body.nav-active{
  padding-bottom:calc(64px + env(safe-area-inset-bottom,0px));
}
/* 小字号(辅助文字)统一补偿到 --text2(深一档), 保证 12px 下 ≥4.5:1 */
@media (max-width:768px){
  .zone-badge,.card-tag,.meta-item .lbl,.intro .eyebrow,.idx-hero-stat-label,.idx-feat-desc,.idx-contact-pill{
    color:var(--text2,var(--text,#2d1f2d));
  }
  .idx-feat-desc{
    font-size:14px;
    line-height:1.45;
  }
}