/* 隐藏预览环境注入的调试信息 */
iframe#error-overlay, [id*="error-overlay"], div[style*="send errors"] { display:none !important; }

:root {
  --primary: #6C5CE7;
  --primary-light: #A29BFE;
  --primary-dark: #5A4BD1;
  --bg: #F8F9FE;
  --card: #FFFFFF;
  --text: #2D3436;
  --text-light: #636E72;
  --border: #E8E8F0;
  --success: #00B894;
  --shadow: 0 4px 24px rgba(108,92,231,0.10);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --radius: 16px;
  --radius-sm: 10px;
  --type1: #E74C3C; --type2: #E67E22; --type3: #D4AC0D;
  --type4: #2ECC71; --type5: #1ABC9C; --type6: #3498DB;
  --type7: #9B59B6; --type8: #E91E63; --type9: #607D8B;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  background: var(--bg); color: var(--text); line-height: 1.6;
  min-height: 100vh; -webkit-font-smoothing: antialiased;
}
.container { max-width: 720px; margin: 0 auto; padding: 0 16px; }
.page-hidden { display: none !important; }

/* ======== 首页 ======== */
#page-home { min-height: 100vh; display: flex; flex-direction: column; }
.hero {
  text-align: center; padding: 48px 20px 32px;
  background: linear-gradient(135deg, #6C5CE7 0%, #A29BFE 100%);
  color: #fff; border-radius: 0 0 32px 32px;
  position: relative; overflow: hidden;
}
.hero::before {
  content:''; position:absolute; top:-60%; right:-30%;
  width:300px; height:300px; background:rgba(255,255,255,0.08); border-radius:50%;
}
.hero::after {
  content:''; position:absolute; bottom:-40%; left:-20%;
  width:250px; height:250px; background:rgba(255,255,255,0.06); border-radius:50%;
}
.hero h1 { font-size:28px; font-weight:700; margin-bottom:8px; position:relative; z-index:1; }
.hero p { font-size:14px; opacity:0.9; position:relative; z-index:1; max-width:400px; margin:0 auto; }
.back-home { position:absolute; top:16px; left:16px; color:rgba(255,255,255,.85); text-decoration:none; font-size:14px; font-weight:500; z-index:10; padding:4px 12px; border-radius:20px; background:rgba(255,255,255,.15); backdrop-filter:blur(4px); transition:all .2s; }
.back-home:hover { background:rgba(255,255,255,.25); }
.enneagram-symbol { width:160px; height:160px; margin:20px auto 0; position:relative; z-index:1; }
.enneagram-symbol svg { width:100%; height:100%; }

.intro-section { padding:24px 16px; }
.intro-card {
  background:var(--card); border-radius:var(--radius);
  padding:20px; margin-bottom:16px; box-shadow:var(--shadow-sm);
}
.intro-card h3 { font-size:16px; color:var(--primary); margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.intro-card h3 .icon { font-size:20px; }
.intro-card p, .intro-card li { font-size:13px; color:var(--text-light); line-height:1.8; }
.intro-card ul { padding-left:16px; }
.intro-card li { margin-bottom:4px; }

.type-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px; }
.type-chip {
  text-align:center; padding:10px 4px; border-radius:var(--radius-sm);
  font-size:12px; font-weight:600; color:#fff; line-height:1.4;
}
.type-chip span { display:block; font-size:18px; margin-bottom:2px; }

/* Info 小图标 */
.btn-info-icon {
  display:inline; color:var(--primary); font-size:18px; font-style:normal;
  cursor:pointer; margin-left:6px; vertical-align:middle;
  transition:opacity .2s; line-height:1; border:none; background:none;
}
.btn-info-icon:hover { opacity:0.6; }

/* Info 弹框 */
.info-modal-overlay {
  display:none; position:fixed; top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,0.45); z-index:9999;
  justify-content:center; align-items:center; padding:20px;
}
.info-modal-overlay.show { display:flex; }
.info-modal {
  background:var(--card); border-radius:16px; width:100%; max-width:420px;
  max-height:80vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,0.2);
  animation:modalIn .25s ease;
}
@keyframes modalIn { from{opacity:0;transform:translateY(20px)scale(.95)} to{opacity:1;transform:none} }
.info-modal-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 20px; border-bottom:1px solid rgba(0,0,0,0.06);
  position:sticky; top:0; background:var(--card); z-index:1;
}
.info-modal-header h3 { margin:0; font-size:16px; color:var(--text); }
.info-modal-close {
  background:none; border:none; font-size:24px; color:var(--text-light);
  cursor:pointer; padding:0 4px; line-height:1;
}
.info-modal-close:hover { color:var(--text); }
.info-modal-body { padding:20px; }
.info-block { margin-bottom:20px; }
.info-block:last-child { margin-bottom:0; }
.info-block h4 { font-size:15px; color:var(--primary); margin-bottom:10px; }
.info-block p { font-size:13px; color:var(--text-light); line-height:1.8; }

.btn-start {
  display:block; width:calc(100% - 32px); max-width:400px;
  margin:8px auto 40px; padding:16px;
  background:linear-gradient(135deg,#6C5CE7,#A29BFE);
  color:#fff; border:none; border-radius:50px;
  font-size:18px; font-weight:600; cursor:pointer;
  box-shadow:0 6px 20px rgba(108,92,231,0.35);
  transition:transform 0.2s, box-shadow 0.2s; letter-spacing:2px;
}
.btn-start:active { transform:scale(0.97); box-shadow:0 3px 12px rgba(108,92,231,0.3); }

/* ======== 答题页 ======== */
#page-test { min-height:100vh; padding-bottom:100px; }
.test-header {
  position:sticky; top:0; z-index:100;
  background:var(--card); padding:12px 16px 8px; box-shadow:var(--shadow-sm);
}
/* Module progress bar with pie chart */
.module-progress-bar {
  display:flex; align-items:center; gap:14px; margin-bottom:6px;
}
.module-pie-wrap {
  position:relative; width:52px; height:52px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.module-pie-wrap canvas { display:block; }
.module-pie-label {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:11px; font-weight:700; color:var(--primary); pointer-events:none;
}
.module-progress-info { flex:1; min-width:0; }
.module-progress-title {
  display:flex; align-items:center; gap:8px; margin-bottom:2px;
  font-size:13px; color:var(--text-light);
}
.module-current-name {
  font-size:13px; font-weight:600; color:var(--primary);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:140px;
}
.module-q-num { font-size:12px; color:var(--text-light); }
.module-q-num strong { color:var(--primary); font-size:14px; }
.module-progress-sub {
  font-size:12px; color:var(--text-light); margin-bottom:4px;
  display:none; /* hide answered count per user request */
}
.module-progress-sub strong { color:var(--primary); font-size:13px; }
.progress-bar { height:6px; background:var(--border); border-radius:3px; overflow:hidden; }
.progress-fill {
  height:100%; background:linear-gradient(90deg,#6C5CE7,#A29BFE);
  border-radius:3px; transition:width 0.4s ease;
}
/* Encourage text - warm companion style */
.encourage-text {
  font-size:13px; color:var(--text-light); text-align:center;
  padding:6px 16px 4px; min-height:22px; transition:all 0.4s ease;
  line-height:1.5; border-radius:20px;
  background:linear-gradient(135deg, rgba(108,92,231,0.04), rgba(162,155,254,0.06));
  margin:4px 0 0; position:relative;
}
.encourage-text .encourage-icon {
  margin-right:2px; font-size:14px;
}

.question-area { padding:16px 0; }
.question-group { animation: fadeUp 0.3s ease; }
@keyframes fadeUp {
  from { opacity:0; transform:translateY(12px); }
  to { opacity:1; transform:translateY(0); }
}
.question-item {
  background:var(--card); border-radius:var(--radius-sm);
  padding:14px 16px; margin-bottom:12px; box-shadow:var(--shadow-sm);
  transition:all 0.2s; border:2px solid transparent;
  -webkit-tap-highlight-color:transparent; user-select:none;
}
.question-item.answered { border-color:var(--primary); background:#FAFAFE; }
.q-header { display:flex; align-items:flex-start; gap:8px; margin-bottom:10px; }
.question-item .q-num { flex-shrink:0; color:var(--primary); font-size:15px; font-weight:700; min-width:28px; }
.question-item .q-text { font-size:17px; line-height:1.7; flex:1; font-weight:500; color:var(--text); }

/* Likert 量表 */
.likert-scale {
  display:flex; justify-content:space-between; gap:4px;
}
.likert-option {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  cursor:pointer; padding:8px 2px 6px; border-radius:10px;
  transition:all 0.2s; border:2px solid transparent;
  -webkit-tap-highlight-color:transparent;
}
.likert-option:active { transform:scale(0.95); }
.likert-option .likert-circle {
  width:42px; height:42px; border-radius:50%;
  border:2px solid #D0D0E0; display:flex; align-items:center; justify-content:center;
  font-size:18px; font-weight:700; color:#B0B0C0; transition:all 0.2s;
  background:#FAFAFA;
}
.likert-option.selected .likert-circle {
  border-color:var(--primary); background:var(--primary); color:#fff;
  box-shadow:0 2px 8px rgba(108,92,231,0.3);
}
.likert-option .likert-label {
  font-size:11px; color:#B0B0C0; text-align:center; line-height:1.3;
  transition:color 0.2s; white-space:nowrap;
}
.likert-option.selected .likert-label { color:var(--primary); font-weight:600; }

/* 量表说明行 */
.likert-legend {
  display:flex; justify-content:space-between; padding:0 4px;
  margin-bottom:6px; font-size:10px; color:#B0B0C0;
}
.likert-legend span:first-child { text-align:left; }
.likert-legend span:last-child { text-align:right; }

.test-nav {
  position:fixed; bottom:0; left:0; right:0;
  background:var(--card); padding:12px 16px;
  padding-bottom:max(12px, env(safe-area-inset-bottom));
  box-shadow:0 -2px 12px rgba(0,0,0,0.06);
  display:flex; gap:12px; z-index:100;
}
.test-nav button {
  flex:1; padding:12px; border-radius:12px; font-size:15px;
  font-weight:600; cursor:pointer; border:none; transition:all 0.2s;
}
.btn-prev { background:var(--border); color:var(--text-light); }
.btn-next {
  background:linear-gradient(135deg,#6C5CE7,#A29BFE); color:#fff;
  box-shadow:0 4px 12px rgba(108,92,231,0.3);
}
.btn-next:active { transform:scale(0.97); }
.btn-prev:disabled, .btn-next:disabled { opacity:0.5; pointer-events:none; }

/* ======== 报告页 ======== */
#page-report { min-height:100vh; padding-bottom:40px; }
.report-hero {
  text-align:center; padding:32px 20px 20px;
  background:linear-gradient(135deg,#6C5CE7 0%,#8B7CF6 30%,#A29BFE 50%,#74B9FF 70%,#00B894 100%);
  color:#fff; border-radius:0 0 28px 28px;
  position:relative; overflow:hidden;
}
.report-hero::before { content:''; position:absolute; top:-80px; right:-60px; width:240px; height:240px; background:rgba(255,255,255,.08); border-radius:50%; animation:heroFloat 6s ease-in-out infinite; }
.report-hero::after { content:''; position:absolute; bottom:-50px; left:-40px; width:180px; height:180px; background:rgba(255,255,255,.05); border-radius:50%; animation:heroFloat 8s ease-in-out infinite reverse; }
@keyframes heroFloat { 0%,100%{transform:translate(0,0)} 50%{transform:translate(10px,-15px)} }
.report-hero h2 { font-size:22px; margin-bottom:4px; position:relative; z-index:1; font-weight:800; letter-spacing:1px; }
.report-hero p { font-size:12px; opacity:0.85; position:relative; z-index:1; }

.report-main-type {
  text-align:center;
  position:relative;
  margin-bottom:8px;
}
.main-type-badge {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 20px; border-radius:50px; font-size:13px;
  font-weight:600; color:#fff; margin-bottom:12px;
}
.main-type-name { font-size:26px; font-weight:700; margin-bottom:6px; }
.main-type-en { font-size:13px; color:var(--text-light); margin-bottom:8px; }
.main-type-score { font-size:42px; font-weight:800; line-height:1; background:linear-gradient(135deg,var(--primary),#00B894); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.main-type-score small { font-size:14px; font-weight:400; -webkit-text-fill-color:var(--text-light); }
.main-type-motto {
  margin-top:14px; padding:12px 18px; background:linear-gradient(135deg,#F8F7FF,#F0EDFF);
  border-radius:var(--radius-sm); font-size:13px;
  color:var(--primary-dark); font-style:italic;
  border:1px solid rgba(108,92,231,.08);
}
.main-type-core {
  margin-top:8px; font-size:12px; color:var(--text-light);
  font-weight:500;
}

.report-section {
  margin:16px; background:var(--card); border-radius:var(--radius);
  padding:22px 20px; box-shadow:var(--shadow-sm);
  border:1px solid var(--border);
  position:relative; overflow:hidden;
  transition:transform .2s, box-shadow .2s;
}
.report-section::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--primary),var(--primary-light),#00B894); opacity:0; transition:opacity .3s; }
.report-section:hover { box-shadow:0 4px 20px rgba(108,92,231,.1); transform:translateY(-1px); }
.report-section:hover::before { opacity:1; }
.report-section h3 {
  font-size:17px; margin-bottom:16px; display:flex;
  align-items:center; gap:8px; color:var(--text); font-weight:700;
  border-radius:0; height:32px;
}
.report-section h3 .icon { font-size:20px; }

.chart-container { position:relative; width:100%; max-width:360px; margin:0 auto; }
.chart-container canvas { width:100% !important; }

.detail-block { margin-bottom:16px; }
.detail-block:last-child { margin-bottom:0; }
.detail-label {
  font-size:12px; font-weight:600; color:var(--primary);
  text-transform:uppercase; letter-spacing:1px; margin-bottom:6px;
}
.detail-content { font-size:14px; color:var(--text-light); line-height:1.8; }
.detail-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.detail-tag {
  padding:4px 12px; background:#F0EDFF; color:var(--primary);
  border-radius:50px; font-size:12px; font-weight:500;
}

.career-list { display:flex; flex-wrap:wrap; gap:8px; }
.career-item {
  padding:8px 16px; background:linear-gradient(135deg,#F0EDFF,#E8E5FF);
  border-radius:var(--radius-sm); font-size:13px;
  color:var(--primary-dark); font-weight:500;
}

.strength-list { list-style:none; }
.strength-list li {
  padding:8px 0; font-size:13px; color:var(--text-light);
  border-bottom:1px solid var(--border);
  display:flex; align-items:flex-start; gap:8px;
}
.strength-list li:last-child { border:none; }
.strength-list li::before { content:'✦'; color:var(--primary); flex-shrink:0; margin-top:1px; }

.type-rank-item {
  display:flex; align-items:center; gap:12px;
  padding:10px 0; border-bottom:1px solid var(--border);
}
.type-rank-item:last-child { border:none; }
.rank-num {
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color:#fff; flex-shrink:0;
}
.rank-num.top1 { background:#FFD700; }
.rank-num.top2 { background:#C0C0C0; }
.rank-num.top3 { background:#CD7F32; }
.rank-num.other { background:#D0D0E0; color:var(--text-light); }
.rank-info { flex:1; min-width:0; }
.rank-top-row {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:4px;
}
.rank-top-row .name { font-size:13px; font-weight:600; }
.rank-score-text { font-size:12px; color:var(--text-light); white-space:nowrap; }
.rank-score-text small { font-size:11px; }
.rank-bar-track { height:6px; background:#F0F0F5; border-radius:3px; overflow:hidden; }
.rank-bar-fill { height:100%; border-radius:3px; transition:width 1s ease; width:0; }

.change-block { padding:14px; border-radius:var(--radius-sm); margin-bottom:10px; }
.change-block:last-child { margin-bottom:0; }
.change-block.safe { background:#E8FFF5; }
.change-block.stress { background:#FFF3E8; }
.change-block h4 { font-size:14px; margin-bottom:6px; }
.change-block.safe h4 { color:#00B894; }
.change-block.stress h4 { color:#E17055; }
.change-block p { font-size:13px; color:var(--text-light); line-height:1.7; }

.btn-restart {
  display:block; width:calc(100% - 32px); max-width:400px;
  margin:32px auto; padding:16px; background:var(--card);
  color:var(--primary); border:2px solid var(--primary);
  border-radius:50px; font-size:16px; font-weight:600;
  cursor:pointer; position:relative; overflow:hidden; transition:all .3s;
}
.btn-restart::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(108,92,231,.06),transparent); transition:left .5s; }
.btn-restart:hover::before { left:100%; }
.btn-restart:hover { border-color:var(--primary-dark); box-shadow:0 4px 16px rgba(108,92,231,.15); }
.btn-restart:active { background:#F0EDFF; transform:scale(0.97); }

/* ======== 章节分隔线 ======== */
.chapter-divider {
  margin:32px 16px 12px; padding:0 4px 12px;
  font-size:18px; font-weight:700; color:var(--text);
  display:flex; align-items:center; gap:12px;
  border-bottom:none; position:relative;
}
.chapter-divider::after { content:''; position:absolute; bottom:0; left:4px; right:4px; height:2px; background:linear-gradient(90deg,var(--primary),var(--primary-light) 40%,transparent 100%); border-radius:1px; }
.chapter-divider span {
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--primary),var(--primary-light));
  color:#fff; font-size:11px; font-weight:700;
  padding:4px 14px; border-radius:50px; white-space:nowrap;
  letter-spacing:1px; box-shadow:0 2px 8px rgba(108,92,231,.2);
}

/* ======== 内心画像卡片网格 ======== */
.portrait-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px;
  margin-bottom:16px;
}
.portrait-card {
  background:#F8F7FF; border-radius:var(--radius-sm);
  padding:14px 12px; text-align:center;
  border:1px solid #EEEAFF;
  transition:transform 0.2s;
}
.portrait-card:active { transform:scale(0.98); }
.portrait-icon { font-size:24px; margin-bottom:6px; }
.portrait-title {
  font-size:11px; font-weight:700; color:var(--primary);
  text-transform:uppercase; letter-spacing:1px; margin-bottom:4px;
}
.portrait-text { font-size:13px; color:var(--text-light); line-height:1.6; }
.portrait-worldview {
  background:linear-gradient(135deg,#F0EDFF,#E8E5FF);
  border-radius:var(--radius-sm); padding:16px; text-align:center;
}
.portrait-worldview-label {
  font-size:11px; font-weight:700; color:var(--primary);
  text-transform:uppercase; letter-spacing:1px; margin-bottom:6px;
}
.portrait-worldview-text {
  font-size:15px; font-weight:600; color:var(--primary-dark);
  line-height:1.6; font-style:italic;
}

/* ======== 第三章：性格概述 ======== */
.overview-hero { text-align:center; margin-bottom:16px; }
.overview-type-badge {
  display:inline-block; padding:6px 20px; border-radius:50px;
  font-size:14px; font-weight:700; color:#fff; margin-bottom:8px;
}
.overview-center { font-size:12px; color:var(--text-light); }
.overview-features {
  font-size:14px; color:var(--text-light); line-height:2;
  text-indent:2em; margin-bottom:16px;
}
.overview-quote {
  background:linear-gradient(135deg,#F0EDFF,#E8E5FF);
  border-radius:var(--radius-sm); padding:14px; text-align:center;
}
.overview-quote-label {
  font-size:11px; font-weight:700; color:var(--primary);
  text-transform:uppercase; letter-spacing:1px; margin-bottom:4px;
}
.overview-quote-text {
  font-size:15px; font-weight:600; color:var(--primary-dark);
  font-style:italic; line-height:1.6;
}

/* ======== 高亮卡片网格 ======== */
.highlight-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  margin:12px 0 16px;
}
.highlight-card {
  border-radius:var(--radius-sm); padding:14px 12px; text-align:center;
}
.highlight-card-icon { font-size:24px; margin-bottom:4px; }
.highlight-card-label {
  font-size:11px; font-weight:700; letter-spacing:1px; margin-bottom:4px;
}
.highlight-card-text { font-size:13px; line-height:1.6; }
.highlight-danger {
  background:#FFF3F0; border:1px solid #FFD6CC;
}
.highlight-danger .highlight-card-label { color:#E17055; }
.highlight-danger .highlight-card-text { color:#C0392B; }
.highlight-desire {
  background:#F0FFF4; border:1px solid #C6F6D5;
}
.highlight-desire .highlight-card-label { color:#00B894; }
.highlight-desire .highlight-card-text { color:#27AE60; }

/* ======== Callout 引用框 ======== */
.callout-box {
  font-size:14px; line-height:1.8; padding:12px 16px;
  border-radius:var(--radius-sm); font-weight:500;
}
.callout-primary {
  background:#F0EDFF; border-left:4px solid var(--primary);
  color:var(--primary-dark);
}
.callout-info {
  background:#EBF5FB; border-left:4px solid #3498DB;
  color:#2471A3;
}
.callout-warm {
  background:#FEF9E7; border-left:4px solid #F39C12;
  color:#7D6608;
}

/* ======== 动机网格 ======== */
.motivation-grid {
  display:grid; grid-template-columns:1fr; gap:10px;
  margin-top:16px;
}
.motivation-item {
  display:flex; align-items:flex-start; gap:12px;
  background:#F8F7FF; border-radius:var(--radius-sm);
  padding:14px; border:1px solid #EEEAFF;
}
.motivation-icon { font-size:22px; flex-shrink:0; margin-top:2px; }
.motivation-label {
  font-size:11px; font-weight:700; color:var(--primary);
  text-transform:uppercase; letter-spacing:1px; margin-bottom:2px;
}
.motivation-text { font-size:13px; color:var(--text-light); line-height:1.6; }

/* ======== 翼型对比 ======== */
.wing-intro, .change-intro, .health-intro {
  font-size:13px; color:var(--text-light); line-height:1.8;
  margin-bottom:16px;
}
.wing-intro strong, .change-intro strong, .health-intro strong {
  color:var(--primary); font-weight:700;
}
.wing-compare {
  display:flex; align-items:stretch; gap:8px; margin-bottom:16px;
}
.wing-card {
  flex:1; background:#F8F9FE; border-radius:var(--radius-sm);
  padding:16px 12px; text-align:center;
  border:2px solid transparent; transition:all 0.2s;
}
.wing-card.wing-main { border-color:var(--primary-light); background:#F8F7FF; }
.wing-card.wing-sub { border-color:var(--border); }
.wing-badge {
  display:inline-block; padding:2px 12px; border-radius:50px;
  font-size:11px; font-weight:700; color:#fff; margin-bottom:8px;
}
.wing-type-name { font-size:14px; font-weight:700; margin-bottom:4px; }
.wing-score {
  font-size:20px; font-weight:800; color:var(--primary); line-height:1;
}
.wing-score small { font-size:12px; font-weight:400; color:var(--text-light); }
.wing-motto {
  margin-top:6px; font-size:11px; color:var(--text-light);
  font-style:italic; line-height:1.4;
}
.wing-traits { margin-top:8px; display:flex; flex-wrap:wrap; gap:4px; justify-content:center; }
.wing-vs {
  display:flex; align-items:center; font-size:20px; font-weight:700;
  color:var(--primary-light); flex-shrink:0;
}
.wing-summary {
  background:#FAFAFE; border-radius:var(--radius-sm);
  padding:14px; border-left:3px solid var(--primary);
}

/* ======== 翼型影响程度 ======== */
.wing-influence { margin-bottom:16px; }
.wing-influence-label {
  font-size:12px; font-weight:600; color:var(--primary);
  text-transform:uppercase; letter-spacing:1px; margin-bottom:6px;
}
.wing-influence-bar {
  height:8px; background:#F0F0F5; border-radius:4px; overflow:hidden; margin-bottom:4px;
}
.wing-influence-fill {
  height:100%; border-radius:4px; transition:width 1s ease;
}
.wing-influence-fill.strong { background:linear-gradient(90deg,#6C5CE7,#E91E63); }
.wing-influence-fill.moderate { background:linear-gradient(90deg,#6C5CE7,#3498DB); }
.wing-influence-fill.mild { background:linear-gradient(90deg,#6C5CE7,#95A5A6); }
.wing-influence-text { font-size:11px; color:var(--text-light); }

/* ======== 翼型分节 ======== */
.wing-section {
  background:#FAFAFE; border-radius:var(--radius-sm);
  padding:16px; margin-bottom:12px; border-left:3px solid var(--primary);
}
.wing-section:last-child { margin-bottom:0; }
.wing-section-title {
  font-size:14px; font-weight:700; margin-bottom:10px; color:var(--text);
}
.wing-section-text {
  font-size:13px; color:var(--text-light); line-height:1.8;
}
.wing-section-text strong { color:var(--text); font-weight:600; }
.wing-section-text p { margin-bottom:0; }

/* ======== 翼型差异对比 ======== */
.wing-diff-grid { display:flex; flex-direction:column; gap:10px; }
.wing-diff-item { }
.wing-diff-label {
  font-size:11px; font-weight:700; color:var(--primary);
  text-transform:uppercase; letter-spacing:1px; margin-bottom:4px;
}
.wing-diff-row { display:flex; gap:8px; }
.wing-diff-cell {
  flex:1; padding:8px 10px; border-radius:6px;
  font-size:12px; line-height:1.6;
}
.wing-diff-cell.main { background:#F0EDFF; color:var(--primary-dark); }
.wing-diff-cell.sub { background:#EBF5FB; color:#2471A3; }
.wing-diff-cell strong { font-weight:700; }

/* ======== 翼型互补 ======== */
.wing-complement { display:flex; flex-direction:column; gap:10px; }
.wing-complement-item {
  display:flex; gap:10px; padding:12px; border-radius:var(--radius-sm);
}
.wing-complement-item.plus { background:#F0FFF4; border:1px solid #C6F6D5; }
.wing-complement-item.caution { background:#FFF8F0; border:1px solid #FDEBD0; }
.wing-complement-icon { font-size:20px; flex-shrink:0; margin-top:2px; }
.wing-complement-label {
  font-size:11px; font-weight:700; letter-spacing:1px; margin-bottom:4px;
}
.wing-complement-item.plus .wing-complement-label { color:#27AE60; }
.wing-complement-item.caution .wing-complement-label { color:#E17055; }
.wing-complement-text {
  font-size:13px; color:var(--text-light); line-height:1.7;
}
.wing-complement-text strong { color:var(--text); font-weight:600; }

/* ======== 翼型成长建议 ======== */
.wing-advice-grid { display:flex; flex-direction:column; gap:8px; }
.wing-advice-item {
  display:flex; gap:10px; align-items:flex-start;
  padding:10px 12px; background:#F8F7FF;
  border-radius:var(--radius-sm); border:1px solid #EEEAFF;
}
.wing-advice-icon { font-size:18px; flex-shrink:0; margin-top:1px; }
.wing-advice-text {
  font-size:13px; color:var(--text-light); line-height:1.7;
}
.wing-advice-text strong { color:var(--text); font-weight:600; }

/* ======== 行为特点列表 ======== */
.behavior-list { list-style:none; padding:0; margin-top:6px; }
.behavior-list li {
  padding:10px 12px; margin-bottom:8px; font-size:13px; color:var(--text-light);
  background:#F8F7FF; border-radius:var(--radius-sm); line-height:1.7;
  border-left:3px solid var(--primary);
  display:flex; align-items:flex-start; gap:8px;
}
.behavior-list li::before { content:'▸'; color:var(--primary); flex-shrink:0; font-weight:700; }
.behavior-list li:last-child { margin-bottom:0; }

/* ======== 健康层次卡片 ======== */
.health-card {
  padding:16px; border-radius:var(--radius-sm); margin-bottom:12px;
}
.health-card:last-child { margin-bottom:0; }
.health-card.healthy { background:#E8FFF5; border-left:4px solid #00B894; }
.health-card.average { background:#FFF8E1; border-left:4px solid #F9A825; }
.health-card.unhealthy { background:#FFF3E8; border-left:4px solid #E17055; }
.health-card-header {
  font-size:14px; font-weight:700; margin-bottom:10px;
}
.health-card.healthy .health-card-header { color:#00B894; }
.health-card.average .health-card-header { color:#F9A825; }
.health-card.unhealthy .health-card-header { color:#E17055; }
.health-card-list { list-style:none; padding:0; margin:0; }
.health-card-list li {
  padding:4px 0; font-size:13px; color:var(--text-light); line-height:1.7;
  display:flex; align-items:flex-start; gap:6px;
}
.health-card-list li::before { content:'•'; flex-shrink:0; font-weight:700; }
.health-card.healthy .health-card-list li::before { color:#00B894; }
.health-card.average .health-card-list li::before { color:#F9A825; }
.health-card.unhealthy .health-card-list li::before { color:#E17055; }

/* ======== 局限与成长建议 ======== */
.limitation-text {
  background:#FFF8F0; border-radius:var(--radius-sm);
  padding:12px; border-left:3px solid #E17055;
}
.growth-list { list-style:none; padding:0; margin:0; }
.growth-list li {
  padding:8px 12px; margin-bottom:6px; font-size:13px; color:var(--text-light);
  line-height:1.7; background:#F0FFF4; border-radius:var(--radius-sm);
  display:flex; align-items:flex-start; gap:8px;
}
.growth-list li::before { content:'💡'; flex-shrink:0; }
.growth-list li:last-child { margin-bottom:0; }

/* ======== 名人代表 ======== */
.celebrity-list { display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.celebrity-item {
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 18px; background:linear-gradient(135deg,#FFF8E1,#FFECB3);
  border-radius:50px; font-size:14px; font-weight:600;
  color:#5D4037; border:1px solid #FFD54F;
  box-shadow:0 2px 6px rgba(255,193,7,0.15);
  transition:transform 0.2s;
}
.celebrity-item:active { transform:scale(0.96); }
.celebrity-icon { font-size:16px; }

/* ======== 人格卡片 ======== */
#persona-card-wrapper {
  display:flex; justify-content:center; overflow:hidden;
  border-radius:var(--radius-sm); margin-bottom:16px;
}
#persona-card-canvas {
  width:100%; max-width:420px; height:auto;
  border-radius:var(--radius-sm);
  box-shadow:0 4px 20px rgba(0,0,0,0.08);
}
.btn-save-card {
  display:block; width:100%; padding:14px;
  background:linear-gradient(135deg,#FFB347,#FF6B6B);
  color:#fff; border:none; border-radius:50px;
  font-size:16px; font-weight:600; cursor:pointer;
  box-shadow:0 4px 16px rgba(255,107,107,0.3);
  transition:transform 0.2s, box-shadow 0.2s;
  letter-spacing:1px;
}
.btn-save-card:active {
  transform:scale(0.97);
  box-shadow:0 2px 8px rgba(255,107,107,0.3);
}

/* ======== 预览页 ======== */
#page-preview { min-height:100vh; padding-bottom:40px; }
#page-preview .container { padding-top:4px; }
#preview-card-wrapper {
  display:flex; justify-content:center; overflow:hidden;
  border-radius:var(--radius-sm); margin-bottom:12px;
}
#preview-card-canvas {
  width:100%; max-width:420px; height:auto;
  border-radius:var(--radius-sm);
  box-shadow:0 4px 20px rgba(0,0,0,0.08);
  display:block;
}
#preview-persona-card { margin:0 0 8px; }

/* 预览页操作区域 */
#page-preview .btn-unlock {
  display:block; width:100%; max-width:400px;
  margin:16px auto 0; padding:16px;
  background:linear-gradient(135deg,#6C5CE7,#A29BFE);
  color:#fff; border:none; border-radius:50px;
  font-size:18px; font-weight:700; cursor:pointer;
  box-shadow:0 6px 24px rgba(108,92,231,0.4);
  transition:transform 0.2s; letter-spacing:2px;
  animation:pulse-unlock 2s ease-in-out infinite;
}
#page-preview .btn-unlock:active { transform:scale(0.97); }
@keyframes pulse-unlock {
  0%,100%{box-shadow:0 6px 24px rgba(108,92,231,0.4);}
  50%{box-shadow:0 6px 32px rgba(108,92,231,0.6);}
}

#page-preview .unlock-hint {
  text-align:center; font-size:12px; color:var(--text-light);
  margin:8px 0 0; padding:6px 16px;
  background:linear-gradient(135deg,rgba(108,92,231,0.04),rgba(162,155,254,0.06));
  border-radius:20px; line-height:1.6;
}

/* 预览页重新测试按钮 */
#page-preview .btn-restart {
  margin-top:20px;
  margin-bottom:24px;
  padding:12px;
  font-size:14px;
  border-width:1.5px;
  opacity:0.7;
}

/* ======== 支付弹框 ======== */
/* ======== 支付弹窗样式（已迁移到 payment.js 统一管理） ======== */

/* ======== 查看历史报告 ======== */
.report-banner{margin:0 16px 12px;width:calc(100% - 32px);max-width:400px;align-self:center;background:linear-gradient(135deg,#EDFFED,#E5FFE8);border:1px solid #00B89466;border-radius:var(--radius);padding:16px;display:flex;align-items:center;justify-content:space-between;gap:12px;animation:fadeSlideIn .4s ease;}
.report-banner-info{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}

/* ======== 恢复进度提示 ======== */
.resume-banner{margin:0 16px 12px;width:calc(100% - 32px);max-width:400px;align-self:center;background:linear-gradient(135deg,#F0EDFF,#E8E5FF);border:1px solid var(--primary-light);border-radius:var(--radius);padding:16px;animation:fadeSlideIn .4s ease;}
@keyframes fadeSlideIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.resume-info{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;}
.resume-icon{font-size:20px;flex-shrink:0;margin-top:2px;}
.resume-text{font-size:13px;color:var(--text-light);line-height:1.6;}
.resume-text strong{display:block;font-size:14px;color:var(--text);margin-bottom:2px;}
.resume-btns{display:flex;gap:10px;}
.btn-resume{flex:1;padding:10px;border:none;border-radius:10px;background:linear-gradient(135deg,#6C5CE7,#A29BFE);color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:transform .2s;}
.btn-resume:active{transform:scale(.97);}
.btn-resume-discard{flex:1;padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--text-light);font-size:14px;cursor:pointer;transition:transform .2s;}
.btn-resume-discard:active{transform:scale(.97);}

/* ======== 答题卡浮标 ======== */
.answer-sheet-fab{display:none!important;position:fixed;right:16px;bottom:90px;width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,#6C5CE7,#A29BFE);color:#fff;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(108,92,231,.4);cursor:pointer;z-index:9000;-webkit-tap-highlight-color:transparent;transition:transform .2s;}
.answer-sheet-fab:active{transform:scale(.9);}
.fab-icon{font-size:20px;}
.fab-badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;border-radius:10px;background:#E74C3C;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px;line-height:1;}
.fab-badge.all-done{background:#00B894;}

/* ======== 答题卡面板 ======== */
.answer-sheet-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);z-index:300;display:flex;align-items:flex-end;justify-content:center;}
.answer-sheet-panel{width:100%;max-width:520px;max-height:70vh;background:var(--card);border-radius:20px 20px 0 0;padding:20px 16px;padding-bottom:max(20px,env(safe-area-inset-bottom));overflow-y:auto;animation:slideUp .25s ease;}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:none}}
.answer-sheet-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.answer-sheet-title{font-size:16px;font-weight:700;color:var(--text);}
.answer-sheet-stats{font-size:12px;color:var(--text-light);}
.answer-sheet-close{background:none;border:none;font-size:22px;color:var(--text-light);cursor:pointer;padding:4px;}
.answer-sheet-legend{display:flex;gap:16px;margin-bottom:12px;font-size:12px;color:var(--text-light);}
.legend-item{display:flex;align-items:center;gap:4px;}
.legend-dot{width:10px;height:10px;border-radius:3px;}
.legend-done{background:var(--primary);}
.legend-undone{background:var(--border);}
.answer-sheet-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;margin-bottom:16px;}
.sheet-page-label{grid-column:1/-1;font-size:12px;font-weight:600;color:var(--primary);padding:6px 0 2px;border-bottom:1px solid var(--border);margin-top:4px;}
.sheet-page-label.current{color:#00B894;border-bottom-color:#00B894;}
.sheet-cell{width:100%;aspect-ratio:1;border-radius:6px;border:none;font-size:11px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s;-webkit-tap-highlight-color:transparent;}
.sheet-cell:active{transform:scale(.88);}
.sheet-cell.cell-done{background:var(--primary);color:#fff;}
.sheet-cell.cell-undone{background:var(--border);color:var(--text-light);}
.answer-sheet-jump-btn{width:100%;padding:12px;border:none;border-radius:12px;background:linear-gradient(135deg,#6C5CE7,#A29BFE);color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:transform .2s;}
.answer-sheet-jump-btn:active{transform:scale(.97);}
.answer-sheet-jump-btn:disabled{opacity:.5;pointer-events:none;}

/* ======== 响应式 ======== */
@media (max-width:374px) {
  .hero h1 { font-size:24px; }
  .type-grid { gap:6px; }
  .type-chip { padding:8px 2px; font-size:11px; }
  .question-item .q-text { font-size:13px; }
  .likert-option .likert-circle { width:30px; height:30px; font-size:14px; }
  .likert-option .likert-label { font-size:9px; }
  .portrait-grid { grid-template-columns:1fr 1fr; gap:8px; }
  .portrait-card { padding:10px 8px; }
  .wing-compare { flex-direction:column; }
  .wing-vs { justify-content:center; }
  .chapter-divider { font-size:16px; }
}
@media (min-width:768px) {
  .container { padding:0 24px; }
  .hero { padding:60px 40px 44px; border-radius:0 0 48px 48px; }
  .hero h1 { font-size:36px; }
  .report-hero { padding:40px 40px 28px; border-radius:0 0 36px 36px; }
  .report-hero h2 { font-size:26px; }
  .report-main-type { margin-bottom:12px; }
  .report-section { padding:28px; margin:20px; border-radius:20px; }
  .chapter-divider { margin:36px 20px 14px; font-size:20px; }
  .question-item { padding:16px 20px; }
  .report-main-type { margin-bottom:10px; }
  .likert-option .likert-circle { width:42px; height:42px; font-size:18px; }
  .likert-option .likert-label { font-size:11px; }
  .portrait-grid { grid-template-columns:repeat(3,1fr); gap:12px; }
  .chapter-divider { margin:32px 20px 12px; }
}

/* ======== 模块标题 ======== */
.module-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 10px;
  margin-bottom: 6px;
}
.module-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 20px;
  background: var(--primary, #6C5CE7);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.module-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary, #2D3436);
  opacity: 0.9;
}
#module-name {
  display: inline-block;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}