/* ============================================
   测评系统 v5 - Impeccable Design System
   
   设计理念：玩具般俏皮但不幼稚 · 有温度有趣味 · 每个类型独特
   美学方向：柔和粉彩 + 几何插画 + 微妙动效
   
   关键决策：
   - 字体：Nunito（圆润友好）+ DM Serif Display（标题）
   - 色彩：奶油底 + 每型独有色（不是通用渐变）
   - 动效：ease-out-quart（不是弹跳）
   - 性格小人：每个类型独特SVG角色
   ============================================ */

:root {
  /* === 色彩系统（柔和粉彩）=== */
  --cream: #FFF8F0;
  --cream-warm: #FFF0E0;
  --surface: #FFFFFF;
  
  /* 类型专属色（会在JS中动态切换）*/
  --type-primary: #FF6B6B;
  --type-secondary: #4ECDC4;
  --type-accent: #FFE66D;
  
  /* 功能色 */
  --text-dark: #2D3436;
  --text-medium: #636E72;
  --text-light: #B2BEC3;
  --border-light: #DFE6E9;
  --border-subtle: #F8F9FA;
  
  /* 语义色 */
  --success: #00B894;
  --warning: #FDCB6E;
  --error: #FF7675;
  
  /* === 排版系统（Modular Scale 1.25）=== */
  --font-display: 'Songti SC', 'STSong', 'Noto Serif CJK SC', Georgia, serif;
  --font-body: 'PingFang SC', 'Microsoft YaHei UI', 'Microsoft YaHei', system-ui, sans-serif;
  
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.5rem;      /* 24px */
  --text-2xl: 2rem;       /* 32px */
  --text-3xl: 2.5rem;     /* 40px */
  --text-4xl: 3.5rem;     /* 56px */
  
  /* === 间距系统（8px base）=== */
  --space-xs: 0.5rem;     /* 8px */
  --space-sm: 1rem;       /* 16px */
  --space-md: 1.5rem;     /* 24px */
  --space-lg: 2rem;       /* 32px */
  --space-xl: 3rem;       /* 48px */
  --space-2xl: 4rem;      /* 64px */
  
  /* === 圆角 === */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 9999px;
  
  /* === 阴影（层次分明）=== */
  --shadow-sm: 0 2px 8px rgba(45, 52, 54, 0.04);
  --shadow-md: 0 4px 16px rgba(45, 52, 54, 0.08);
  --shadow-lg: 0 8px 32px rgba(45, 52, 54, 0.12);
  --shadow-xl: 0 16px 48px rgba(45, 52, 54, 0.16);
  
  /* === 动效（Impeccable推荐）=== */
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);      /* ease-out-quart */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 200ms;
  --duration-normal: 350ms;
  --duration-slow: 500ms;
}

/* === Reset & Base === */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-dark);
  background: var(--cream);
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* === App Container === */
.app-container {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100dvh;
  position: relative;
  background: var(--cream);
}

/* === Page System === */
.page {
  display: none;
  min-height: 100dvh;
  animation: pageEnter var(--duration-slow) var(--ease-out) both;
}

.page.active {
  display: block;
}

@keyframes pageEnter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.page.exit-left {
  animation: pageExitLeft var(--duration-normal) var(--ease-out) both;
}

@keyframes pageExitLeft {
  to { opacity: 0; transform: translateX(-30px); }
}

/* ============================================
   LOGIN PAGE
   ============================================ */
.login-page.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: calc(var(--space-2xl) * 2.5) var(--space-lg) var(--space-lg);
  min-height: 100dvh;
  text-align: center;
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-warm) 100%);
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
}

/* 装饰性背景圆 */
.login-page::before,
.login-page::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  opacity: 0.4;
  pointer-events: none;
}

.login-page::before {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, #FFE66D 0%, transparent 70%);
  top: -100px;
  right: -80px;
}

.login-page::after {
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, #FF6B6B 0%, transparent 70%);
  bottom: -60px;
  left: -60px;
}

/* Logo */
.login-logo {
  font-size: 2.5rem;
  margin-bottom: var(--space-sm);
  animation: logoFloat 3s ease-in-out infinite;
  position: relative;
  z-index: 1;
}

@keyframes logoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Title */
.login-title h1 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--text-dark);
  line-height: 1.2;
  margin-bottom: var(--space-xs);
  position: relative;
  z-index: 1;
}

.login-title p {
  font-size: var(--text-sm);
  color: var(--text-medium);
  position: relative;
  z-index: 1;
}

/* Password Input */
.password-input-group {
  width: 100%;
  max-width: 280px;
  margin-top: var(--space-lg);
  position: relative;
  z-index: 1;
}

.password-input-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-xs);
}

.password-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.password-input-icon {
  font-size: 1.25rem;
  position: absolute;
  left: 16px;
  color: var(--text-light);
  transition: color var(--duration-fast) var(--ease-out);
}

.password-input {
  width: 100%;
  padding: 16px 16px 16px 48px;
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: 0.5em;
  text-align: center;
  color: var(--text-dark);
  background: var(--surface);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-lg);
  outline: none;
  transition: all var(--duration-fast) var(--ease-out);
}

.password-input:focus {
  border-color: var(--type-primary);
  box-shadow: 0 0 0 4px rgba(255, 107, 107, 0.12);
}

.password-input.error {
  border-color: var(--error);
  animation: shake 0.4s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}

/* Test Selector */
.test-selector {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  position: relative;
  z-index: 1;
}

.test-card {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--surface);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  user-select: none;
}

.test-card:hover {
  border-color: var(--type-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.test-card.selected {
  border-color: var(--type-primary);
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.04), rgba(78, 205, 196, 0.04));
  box-shadow: var(--shadow-md);
}

.test-card-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}
.test-card-icon svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.test-card-icon svg .icon-fill{fill:currentColor;stroke:none}

.test-card-icon.orange { background: #FFE5D9; }
.test-card-icon.purple { background: #E8DAEF; }
.test-card-icon.pink { background: #FADBD8; }
.test-card-icon.red { background: #FFE3EC; }
.heart-mark { color: #FF4F87; font-family: Arial, sans-serif; font-weight: 900; line-height: 1; }

.test-card-info {
  flex: 1;
  text-align: left;
  min-width: 0;
}

.test-card-name {
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--text-dark);
  margin-bottom: 2px;
}

.test-card-desc {
  font-size: var(--text-xs);
  color: var(--text-medium);
  line-height: 1.4;
}

.test-check {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: white;
  background: var(--type-primary);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.5);
  transition: all var(--duration-fast) var(--ease-out);
}

.test-card.selected .test-check {
  opacity: 1;
  transform: scale(1);
}

.test-card.coming-soon {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.6);
}

.test-card.coming-soon:hover {
  border-color: var(--border-light);
  box-shadow: none;
  transform: none;
}

.badge-soon {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 800;
  color: white;
  background: var(--text-light);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  vertical-align: middle;
  margin-left: 4px;
  letter-spacing: 0.02em;
}

/* Start Button */
.btn-start {
  margin-top: var(--space-md);
  padding: 16px 48px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 800;
  color: white;
  background: var(--type-primary);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  box-shadow: 0 4px 16px rgba(255, 107, 107, 0.3);
  position: relative;
  z-index: 1;
}

.btn-start:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 107, 107, 0.4);
}

.btn-start:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}

.btn-start:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Authority Badge */
.authority-badge {
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  z-index: 1;
}

.authority-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-size: var(--text-xs);
  color: var(--text-medium);
}

.authority-icon {
  font-size: 1rem;
}

/* ============================================
   QUIZ PAGE
   ============================================ */
.quiz-page.active {
  display: flex;
  flex-direction: column;
  background: var(--cream);
}

/* Header */
.quiz-header {
  padding: var(--space-md) var(--space-lg);
  background: var(--surface);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  z-index: 10;
}

.quiz-top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
}

.btn-prev-small {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-medium);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  transition: all var(--duration-fast) var(--ease-out);
}

.btn-prev-small:hover {
  color: var(--text-dark);
  background: var(--border-subtle);
}

#progressText {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-medium);
}

.quiz-dimension-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-dark);
  background: var(--cream-warm);
  border-radius: var(--radius-full);
}

/* Progress Bar */
.quiz-progress-bar {
  height: 6px;
  background: var(--border-subtle);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.quiz-progress-fill {
  height: 100%;
  background: var(--type-primary);
  border-radius: var(--radius-full);
  transition: width var(--duration-normal) var(--ease-out);
  position: relative;
}

.quiz-progress-fill::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 10px;
  height: 10px;
  background: var(--surface);
  border: 2px solid var(--type-primary);
  border-radius: 50%;
  transition: transform var(--duration-fast) var(--ease-out);
}

.quiz-progress-fill[style*="width: 100%"]::after {
  transform: translateY(-50%) scale(1);
}

/* Question Area */
.quiz-question-area {
  flex: 1;
  padding: var(--space-xl) var(--space-lg);
  display: flex;
  flex-direction: column;
}

.question-number {
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.15em;
  color: var(--type-primary);
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}

.question-text {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--text-dark);
  line-height: 1.3;
  margin-bottom: var(--space-xl);
}

/* Options */
.options-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1;
}

.option-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--surface);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  user-select: none;
  position: relative;
  overflow: hidden;
}

.option-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--type-primary);
  transform: scaleY(0);
  transition: transform var(--duration-fast) var(--ease-out);
}

.option-item:hover {
  border-color: var(--type-primary);
  box-shadow: var(--shadow-sm);
  transform: translateX(4px);
}

.option-item:hover::before {
  transform: scaleY(1);
}

.option-item.selected {
  border-color: var(--type-primary);
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.03), rgba(78, 205, 196, 0.03));
}

.option-item.selected::before {
  transform: scaleY(1);
}

.option-letter {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: var(--text-sm);
  color: var(--text-medium);
  background: var(--cream-warm);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  transition: all var(--duration-fast) var(--ease-out);
}

.option-item.selected .option-letter {
  background: var(--type-primary);
  color: white;
}

.option-text {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-dark);
  flex: 1;
}

/* Footer Spacer */
.quiz-footer-spacer {
  height: 100px;
}

/* ============================================
   BUTTONS (Global)
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 15px var(--space-xl);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
  overflow: hidden;
}

.btn:active {
  transform: scale(0.97);
}

.btn-block {
  width: 100%;
}

.btn-primary {
  background: var(--type-primary);
  color: white;
  box-shadow: 0 4px 16px rgba(255, 107, 107, 0.25);
}

.btn-primary:hover {
  box-shadow: 0 6px 20px rgba(255, 107, 107, 0.35);
  transform: translateY(-2px);
}

/* Finish Button */
.btn-finish {
  margin-top: var(--space-lg);
  min-height: 76px;
  padding: 13px 18px 13px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  background: linear-gradient(135deg, color-mix(in srgb, var(--theme-accent) 86%, var(--theme-ink)), var(--theme-accent)) !important;
  color: white !important;
  border: 1px solid color-mix(in srgb, white 24%, transparent) !important;
  outline: none !important;
  border-radius: 18px;
  box-shadow: 0 16px 34px color-mix(in srgb, var(--theme-accent) 28%, transparent) !important;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-finish::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.2) 42%,transparent 64%);transform:translateX(-120%);animation:finishSheen 4.8s ease-in-out infinite;z-index:-1}
.finish-copy{display:grid;gap:3px}
.finish-copy small{font-size:9px;line-height:1;letter-spacing:.18em;font-weight:750;opacity:.68}
.finish-copy strong{font-size:17px;line-height:1.25;letter-spacing:.015em;font-weight:760}
.finish-arrow{width:39px;height:39px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.24);font-size:21px;transition:transform .25s ease,background .25s ease}
.btn-finish:hover{transform:translateY(-2px);box-shadow:0 20px 42px color-mix(in srgb,var(--theme-accent) 34%,transparent)!important}
.btn-finish:hover .finish-arrow{transform:translateX(3px);background:rgba(255,255,255,.22)}
@keyframes finishSheen{0%,62%{transform:translateX(-120%)}82%,100%{transform:translateX(120%)}}

html[data-quiz-theme="mbti"] .btn-finish{border-radius:8px}
html[data-quiz-theme="talent"] .btn-finish{border-radius:999px;padding-left:26px}
html[data-quiz-theme="career"] .btn-finish{border-radius:2px;box-shadow:7px 7px 0 color-mix(in srgb,var(--theme-accent) 25%,transparent)!important}
html[data-quiz-theme="heart_mbti"] .btn-finish{border-radius:28px 8px 28px 8px}
html[data-quiz-theme="attachment"] .btn-finish{border-radius:24px;background:linear-gradient(135deg,#3f665a,#719888)!important}
html[data-quiz-theme="money"] .btn-finish{border-radius:2px;background:linear-gradient(135deg,#2e7d4e,#61ba74)!important;color:#f5fae9!important;box-shadow:7px 7px 0 rgba(97,186,116,.18)!important}
html[data-quiz-theme="hard_to_get"] .btn-finish{border-radius:18px;background:linear-gradient(120deg,var(--theme-ink) 0 70%,var(--theme-accent) 71%)!important}
html[data-quiz-theme="charm"] .btn-finish{border-radius:26px;background:radial-gradient(circle at 82% 18%,rgba(255,255,255,.28),transparent 22%),linear-gradient(135deg,#5d417e,#9878c8)!important}
html[data-quiz-theme="love_brain"] .btn-finish{border-radius:15px;background:linear-gradient(110deg,#ae4d68 0 68%,#2b3d61 69%)!important}

/* ============================================
   RESULT PAGE - Impeccable Redesign
   ============================================ */
.result-page {
  background: var(--cream);
  padding-bottom: var(--space-2xl);
}

/* Hero with Illustration */
.result-hero {
  background: var(--type-primary);
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* 动态背景装饰 */
.result-hero::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 180px;
  height: 180px;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
}

.result-hero::after {
  content: '';
  position: absolute;
  bottom: -30px;
  left: -30px;
  width: 140px;
  height: 140px;
  background: rgba(255,255,255,0.07);
  border-radius: 50%;
}

/* ★★★ 人物插画区域 ★★★ */
.result-hero-illustration {
  position: relative;
  z-index: 1;
  margin-bottom: var(--space-md);
  display: flex;
  justify-content: center;
}

/* 完整竖版海报：缩小居中放 hero 顶部 */
#typeIllustration {
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0,0,0,0.20);
  background: #2b2b2b;
}

#typeIllustration svg {
  width: 100% !important;
  height: auto !important;
  display: block;
}

.type-illustration {
  width: 150px;
  height: 150px;
  animation: illustrationReveal 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.18));
}

.type-illustration svg {
  width: 100%;
  height: 100%;
}

@keyframes illustrationReveal {
  0% {
    opacity: 0;
    transform: scale(0.7) translateY(20px) rotate(-5deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0) rotate(0);
  }
}

.result-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  color: white;
  margin-bottom: var(--space-md);
  position: relative;
  z-index: 1;
}

.result-type-code {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 400;
  color: white;
  line-height: 1;
  margin-bottom: var(--space-xs);
  position: relative;
  z-index: 1;
}

.result-type-name {
  font-size: var(--text-xl);
  font-weight: 800;
  color: white;
  margin-bottom: var(--space-xs);
  position: relative;
  z-index: 1;
}

.result-type-subtitle {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.85);
  position: relative;
  z-index: 1;
}

/* Content Area */
.result-content {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* Cards */
.result-card {
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-subtle);
}

.result-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.result-card-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.result-card-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--text-dark);
}

/* Letter Cards Section (8 个字母说明卡，4 个主导亮主色，4 个对位灰) */
/* ★★★ 字母卡片（8 个维度字母，主导亮 + 其他灰） ★★★ */
.letter-matrix-card {
  background: linear-gradient(135deg, #F8F9FF, #FAFAF7);
  border: 1px solid rgba(0, 0, 0, 0.04);
}
.letter-matrix-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--text-dark);
  text-align: center;
  margin-bottom: var(--space-md);
}
.letter-matrix {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.letter-card {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: start;
  gap: 10px;
  padding: 12px 10px;
  border-radius: 12px;
  background: #F5F5F4;
  border: 1px solid #E7E5E4;
  position: relative;
}
.letter-card.lit {
  background: #FFFFFF;
  border-color: var(--card-bg);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--card-bg) 20%, transparent);
}
.letter-card-letter {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 22px;
  font-weight: 700;
  background: var(--card-bg);
  color: #FFFFFF;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--card-bg) 35%, transparent);
}
.letter-card.dim .letter-card-letter {
  background: #FAFAF9;
  color: #D6D3D1;
  box-shadow: none;
  border: 1.5px dashed #E7E5E4;
}
.letter-card-body {
  min-width: 0;
}
.letter-card-title {
  font-size: 13px;
  font-weight: 700;
  color: #292524;
  line-height: 1.2;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.letter-card-en {
  font-size: 10.5px;
  font-weight: 500;
  color: #A8A29E;
  font-family: "Plus Jakarta Sans", sans-serif;
}
.letter-card.dim .letter-card-title { color: #A8A29E; }
.letter-card-dominant {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: #FFFFFF;
  background: var(--type-primary);
  padding: 1px 6px;
  border-radius: 4px;
  margin-top: 4px;
  letter-spacing: 0.5px;
}
.letter-card-desc {
  font-size: 11.5px;
  color: #78716C;
  line-height: 1.4;
  margin-top: 4px;
}
.letter-card.dim .letter-card-desc { color: #D6D3D1; }

/* Celebrity chips 名人芯片 */
.celebrity-intro {
  font-size: 13px;
  color: #78716C;
  text-align: center;
  margin: -4px 0 14px;
  line-height: 1.5;
}
.celebrity-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.celebrity-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  color: #292524;
  background: hsl(var(--chip-hue), 60%, 96%);
  border: 1px solid hsl(var(--chip-hue), 60%, 86%);
  border-radius: 999px;
  transition: transform 0.2s ease;
}
.celebrity-chip::before {
  content: "★";
  font-size: 11px;
  color: hsl(var(--chip-hue), 70%, 55%);
  margin-right: 2px;
}
.celebrity-chip:hover { transform: translateY(-1px); }

/* Radar Chart */
.radar-chart-container {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-width: 320px;
  margin: 24px auto 0;
  padding: 18px;
}

.radar-chart-canvas {
  width: 100%;
  height: 100%;
}

/* ★★★ 海报与正文之间的 MBTI 类型标识（高级感：上下两条渐变细线 + 文字渐变填充） ★★★ */
.result-type-divider {
  text-align: center;
  margin: 24px auto;
  max-width: 280px;
  padding: 2px 0;
  background: none;
  border: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
  height: fit-content;
  align-self: center;
  flex: 0 0 auto;
}
.result-type-divider::before,
.result-type-divider::after {
  content: '';
  width: 40px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--type-primary), transparent);
  flex-shrink: 0;
}
.type-divider-code {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 5px;
  font-family: "Plus Jakarta Sans", sans-serif;
  line-height: 1.1;
  background: linear-gradient(to bottom, var(--type-primary) 0%, color-mix(in srgb, var(--type-primary) 50%, white) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.type-divider-name {
  font-size: 13px;
  color: #57534E;
  font-weight: 500;
  letter-spacing: 2px;
}

/* ★★★ 雷达图四角标签（HTML 形式，含中文含义，避免被 canvas 边缘裁切） ★★★ */
.radar-label {
  position: absolute;
  font-weight: 600;
  font-size: 12px;
  color: #57534E;
  line-height: 1.25;
  pointer-events: none;
  max-width: 78px;
  text-align: center;
}
.radar-label-main { font-weight: 600; font-size: 12px; }
.radar-label-sub {
  font-size: 10.5px;
  font-weight: 400;
  color: #A8A29E;
  margin-top: 2px;
}
.radar-label-top { top: 4px; left: 50%; transform: translateX(-50%); text-align: center; }
.radar-label-right { right: 4px; top: 50%; transform: translateY(-50%); text-align: right; }
.radar-label-bottom { bottom: 4px; left: 50%; transform: translateX(-50%); text-align: center; }
.radar-label-left { left: 4px; top: 50%; transform: translateY(-50%); text-align: left; }

/* === Dimension Bars === */
.dimension-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.dimension-row {
  padding-bottom: var(--space-xs);
}

.dimension-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.dimension-letter {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: var(--text-base);
  color: white;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.dimension-bar-track {
  flex: 1;
  height: 14px;
  background: var(--border-subtle);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
  min-width: 0;
}

.dimension-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 1s cubic-bezier(0.25, 1, 0.5, 1);
  position: relative;
}

.dimension-score {
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--text-dark);
  min-width: 48px;
  text-align: right;
  flex-shrink: 0;
}

.dimension-label {
  font-size: var(--text-xs);
  color: var(--text-medium);
  padding-left: 48px;
  margin-top: 4px;
  font-weight: 600;
}

.dim-dominant {
  color: var(--type-primary);
  font-weight: 800;
}

/* === Dimension Legend (E/I/S/N/T/F/J/P 通俗解释) === */
.dimension-legend {
  margin-top: var(--space-md);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xs);
}

.legend-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px;
  background: var(--cream);
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease-out);
}

.legend-item:hover {
  background: var(--cream-warm);
  transform: translateY(-1px);
}

.legend-letter {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: var(--text-xs);
  color: white;
  border-radius: 6px;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.legend-content {
  flex: 1;
  min-width: 0;
}

.legend-title {
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1.3;
  margin-bottom: 2px;
}

.legend-desc {
  font-size: 0.7rem;
  color: var(--text-medium);
  line-height: 1.4;
}

/* === Long Description (性格说明书长版) === */
.long-description-card {
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.03), rgba(78, 205, 196, 0.03));
  border: 1px solid rgba(255, 107, 107, 0.08);
}

.result-tagline {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--type-primary);
  text-align: center;
  margin: var(--space-xs) 0 var(--space-sm);
  font-weight: 400;
  letter-spacing: 0.02em;
}

.long-description {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.ld-section {
  padding: var(--space-sm) 0;
  border-top: 1px dashed var(--border-light);
}

.ld-section:first-child {
  border-top: none;
  padding-top: 0;
}

.ld-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.ld-icon {
  font-size: 1.25rem;
  line-height: 1;
}

.ld-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--text-dark);
  font-weight: 400;
}

.ld-text {
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--text-medium);
  text-align: justify;
  word-break: break-word;
}

/* Description */
.result-description {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--text-medium);
}

/* Trait Tags */
.trait-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-md);
}

.trait-tag {
  padding: 6px 14px;
  font-size: var(--text-xs);
  font-weight: 700;
  background: var(--cream-warm);
  color: var(--text-dark);
  border-radius: var(--radius-full);
}

/* Career List */
.career-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.career-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm);
  background: var(--cream);
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease-out);
}

.career-item:hover {
  background: var(--cream-warm);
  transform: translateX(4px);
}

.career-rank {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: var(--text-sm);
  border-radius: 50%;
  flex-shrink: 0;
}

.career-rank.gold { background: linear-gradient(135deg, #FFE66D, #F39C12); color: #7D6608; }
.career-rank.silver { background: linear-gradient(135deg, #DFE6E9, #BDC3C7); color: #5D6D7E; }
.career-rank.bronze { background: linear-gradient(135deg, #F5CBA7, #E59866); color: #935116; }

.career-info {
  flex: 1;
}

.career-name {
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--text-dark);
}

.career-match {
  font-size: var(--text-xs);
  color: var(--text-medium);
}

/* Actions */
.result-actions {
  padding: 0 var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.result-actions-row {
  display: flex;
  gap: var(--space-sm);
}

.result-actions-row .btn {
  flex: 1;
}

.btn-ghost {
  background: var(--surface);
  color: var(--text-dark);
  border: 2px solid var(--border-light);
}

.btn-ghost:hover {
  border-color: var(--type-primary);
  color: var(--type-primary);
}

.btn-share {
  background: var(--surface);
  color: var(--text-dark);
  border: 2px solid var(--border-light);
}

.btn-share:hover {
  border-color: var(--type-primary);
  color: var(--type-primary);
}

/* ============================================
   LOADING SCREEN
   ============================================ */
.loading-screen {
  position: fixed;
  inset: 0;
  background: rgba(255, 248, 240, 0.95);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  gap: var(--space-md);
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--border-light);
  border-top-color: var(--type-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-text {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-dark);
}

.loading-progress {
  width: 120px;
  height: 4px;
  background: var(--border-subtle);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.loading-progress-bar {
  height: 100%;
  background: var(--type-primary);
  border-radius: var(--radius-full);
  animation: loadingProgress 1.5s ease-in-out infinite;
}

@keyframes loadingProgress {
  0% { width: 0%; margin-left: 0; }
  50% { width: 70%; margin-left: 0; }
  100% { width: 30%; margin-left: 70%; }
}

/* ============================================
   TOAST
   ============================================ */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 14px 24px;
  background: var(--text-dark);
  color: white;
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-full);
  opacity: 0;
  visibility: hidden;
  transition: all var(--duration-normal) var(--ease-out);
  z-index: 999;
  box-shadow: var(--shadow-lg);
}

.toast.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 400px) {
  .result-type-code {
    font-size: var(--text-3xl);
  }
  
  .question-text {
    font-size: var(--text-xl);
  }
  
  .type-illustration {
    width: 130px;
    height: 130px;
  }
}

@media (min-width: 768px) {
  .app-container {
    margin-top: 24px;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============ 天赋测评结果页 ============ */
.talent-hero {
  background: linear-gradient(135deg, #A29BFE, #6C5CE7);
}
.career-hero {
  background: linear-gradient(135deg, #FD79A8, #E84393);
}

/* 核心天赋卡片 */
.talent-top-card {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md);
  margin-bottom: var(--space-sm);
  background: var(--cream);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}
.talent-top-card:last-child { margin-bottom: 0; }

.talent-top-rank {
  font-size: 30px;
  line-height: 1;
  flex-shrink: 0;
}

.talent-top-body { flex: 1; }

.talent-top-name {
  font-weight: 800;
  font-size: var(--text-lg);
  color: var(--text-dark);
}

.talent-top-desc {
  font-size: var(--text-sm);
  color: var(--text-medium);
  line-height: 1.6;
  margin: 4px 0 8px;
}

.talent-top-advice {
  font-size: var(--text-xs);
  color: #6C5CE7;
  font-weight: 700;
  line-height: 1.5;
}

/* 十维天赋得分条 */
.talent-bar-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 6px 0;
}
.talent-bar-label {
  width: 96px;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-dark);
  flex-shrink: 0;
}
.talent-bar-track {
  flex: 1;
  height: 12px;
  background: var(--border-subtle);
  border-radius: var(--radius-full);
  overflow: hidden;
  min-width: 0;
}
.talent-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, #A29BFE, #6C5CE7);
  transition: width 1s cubic-bezier(0.25, 1, 0.5, 1);
}
.talent-bar-score {
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--text-medium);
  min-width: 44px;
  text-align: right;
  flex-shrink: 0;
}

/* 职业推荐列表 */
.career-rec-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm);
  background: var(--cream);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-xs);
}
.career-rec-item:last-child { margin-bottom: 0; }

.career-rec-rank {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: var(--text-sm);
  border-radius: 50%;
  background: linear-gradient(135deg, #FD79A8, #E84393);
  color: #fff;
  flex-shrink: 0;
}

.career-rec-name {
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--text-dark);
}

/* ============================================
   天赋/职业 深度报告补充样式
   ============================================ */
.talent-top-tagline {
  font-size: var(--text-sm);
  color: var(--text-medium);
  font-weight: 500;
  margin-left: 4px;
}

.talent-top-scenario {
  font-size: var(--text-sm);
  color: var(--text-medium);
  background: linear-gradient(135deg, rgba(162,155,254,0.10), rgba(108,92,231,0.04));
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  margin: var(--space-xs) 0;
  line-height: 1.75;
}

.talent-section {
  margin-top: var(--space-sm);
  padding-top: var(--space-xs);
  border-top: 1px dashed var(--border-light);
}
.talent-section:first-of-type { border-top: none; padding-top: 0; }

.talent-section-label {
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--text-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.talent-section-label.warning { color: #D63031; }

.talent-bullet-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.talent-bullet-list li {
  position: relative;
  padding: 4px 0 4px 18px;
  font-size: var(--text-sm);
  color: var(--text-medium);
  line-height: 1.7;
}
.talent-bullet-list li::before {
  content: '\2022';
  position: absolute;
  left: 4px;
  color: var(--type-primary);
  font-weight: 900;
  font-size: 1.2em;
  line-height: 1;
}
.talent-bullet-list.warning-list li::before { color: #D63031; }

.talent-combo-card {
  background: linear-gradient(135deg, rgba(253,121,168,0.08), rgba(232,67,147,0.04));
}

.talent-combo-text {
  font-size: var(--text-base);
  color: var(--text-dark);
  line-height: 1.9;
}

.talent-learning-item,
.talent-comm-item {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
  align-items: flex-start;
  border-bottom: 1px dashed var(--border-subtle);
}
.talent-learning-item:last-child,
.talent-comm-item:last-child { border-bottom: none; }

.talent-learning-icon {
  flex-shrink: 0;
  width: 28px;
  font-size: 1.4rem;
  text-align: center;
}

.talent-learning-text {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--text-medium);
  line-height: 1.75;
}

.talent-comm-label {
  flex-shrink: 0;
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--text-dark);
  min-width: 80px;
}

.talent-comm-text {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--text-medium);
  line-height: 1.75;
}

.talent-tip {
  margin-top: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  background: var(--cream-warm);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  color: var(--text-medium);
  line-height: 1.7;
}

.talent-details {
  margin-top: var(--space-xs);
}
.talent-details summary {
  cursor: pointer;
  padding: var(--space-xs) var(--space-sm);
  background: var(--cream-warm);
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--text-dark);
  user-select: none;
  list-style: none;
}
.talent-details summary::-webkit-details-marker { display: none; }
.talent-details summary::before {
  content: '\25B8';
  margin-right: 6px;
  transition: transform var(--duration-fast) var(--ease-out);
}
.talent-details[open] summary::before { transform: rotate(90deg); }
.talent-details[open] summary { margin-bottom: var(--space-sm); }

.talent-detail-block {
  padding: var(--space-sm) 0;
  border-bottom: 1px dashed var(--border-light);
}
.talent-detail-block:last-child { border-bottom: none; }
.talent-detail-block h4 {
  font-size: var(--text-base);
  margin-bottom: 6px;
  color: var(--text-dark);
}
.talent-detail-scenario {
  font-size: var(--text-sm);
  color: var(--text-medium);
  margin-bottom: var(--space-xs);
  line-height: 1.7;
}
.talent-detail-block p {
  font-size: var(--text-sm);
  color: var(--text-medium);
  line-height: 1.75;
  margin: 4px 0;
}

/* 职业报告补充 */
.career-combo-text {
  font-size: var(--text-base);
  color: var(--text-dark);
  line-height: 1.9;
}

.career-env {
  font-size: var(--text-sm);
  color: var(--text-medium);
  line-height: 1.75;
  margin: 0;
}

.career-rec-body {
  flex: 1;
  min-width: 0;
}
.career-rec-why {
  font-size: var(--text-xs);
  color: var(--text-medium);
  margin-top: 2px;
  line-height: 1.6;
}

/* ============================================
   首页填空 / 社会证明 / 密码提示
   ============================================ */
.login-social-proof {
  width: 100%;
  max-width: 380px;
  margin-top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  position: relative;
  z-index: 1;
}
.login-sp-item {
  font-size: var(--text-sm);
  color: var(--text-medium);
  padding: var(--space-xs) var(--space-sm);
  background: rgba(255,255,255,0.55);
  border-radius: var(--radius-md);
  text-align: left;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.6);
}
.login-sp-item strong { color: var(--text-dark); }

.test-card-extra {
  font-size: var(--text-xs);
  color: var(--text-light);
  margin-top: 2px;
  font-weight: 500;
}

.password-hint {
  margin-top: var(--space-xs);
  font-size: var(--text-xs);
  color: var(--text-medium);
  min-height: 16px;
  line-height: 1.5;
}
.password-hint.error { color: var(--error); font-weight: 600; }
.password-hint.success { color: var(--success); font-weight: 600; }

/* ==================== 心动 MBTI / 依恋 / 赚钱 结果页样式 ==================== */
.result-hero.heart-hero,
.result-hero.attachment-hero,
.result-hero.money-hero { color: #fff; }

.heart-line { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid rgba(45,52,54,0.07); font-size: 14px; color: var(--text-dark); line-height: 1.7; }
.heart-line:last-child { border-bottom: none; }
.heart-letter { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; background: var(--type-primary); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.heart-line.warn .heart-letter { background: #FF7675; }

.heart-code-badge { display: inline-block; color: #fff; font-weight: 900; font-size: 34px; letter-spacing: 2px; padding: 10px 20px; border-radius: 14px; margin-bottom: 8px; box-shadow: 0 8px 20px rgba(0,0,0,0.12); }
.heart-hero-name { font-size: 22px; font-weight: 800; color: var(--text-dark); }
.heart-hero-sub { color: var(--text-medium); font-size: 14px; margin-top: 4px; }
.heart-tagline { font-size: 15px; color: var(--type-primary); font-weight: 700; margin: 8px 0; }
.heart-lead { font-size: 14px; color: var(--text-dark); line-height: 1.8; margin-top: 6px; }

.heart-sweet-list p { font-size: 14px; color: var(--text-dark); line-height: 1.8; padding: 8px 0; border-bottom: 1px dashed rgba(45,52,54,0.12); }
.heart-sweet-list p:last-child { border-bottom: none; }

.heart-tip { font-size: 13px; color: var(--text-medium); line-height: 1.7; margin-top: 12px; }
.heart-tip-warn { font-size: 14px; color: #D63031; font-weight: 700; margin-bottom: 6px; }

.heart-vs { display: flex; gap: 12px; flex-wrap: wrap; }
.heart-vs-col { flex: 1; min-width: 140px; background: #F7F4EF; border-radius: 12px; padding: 14px; }
.heart-vs-label { font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 6px; display: inline-block; margin-bottom: 8px; color: #fff; }
.heart-vs-label.think { background: #74B9FF; }
.heart-vs-label.real { background: #00B894; }
.heart-vs-col p { font-size: 13.5px; color: var(--text-dark); line-height: 1.8; }

.heart-warn-box { background: #FFF0F0; border: 1px solid #FFD6D6; border-radius: 12px; padding: 14px; margin-bottom: 10px; }
.heart-warn-title { color: #D63031; font-weight: 800; font-size: 14px; margin-bottom: 6px; }
.heart-good-box { background: #EAFBF3; border: 1px solid #BFEAD7; border-radius: 12px; padding: 14px; }
.heart-good-title { color: #00B894; font-weight: 800; font-size: 14px; margin-bottom: 6px; }
.heart-warn-box p, .heart-good-box p { font-size: 13.5px; color: var(--text-dark); line-height: 1.8; }

.heart-alt-row { display: flex; gap: 12px; }
.heart-alt-card { flex: 1; text-align: center; background: #F7F4EF; border-radius: 14px; padding: 16px 10px; }
.heart-alt-rank { font-size: 12px; font-weight: 800; color: var(--text-medium); }
.heart-alt-code { font-size: 24px; font-weight: 900; color: var(--type-primary); letter-spacing: 1px; margin: 4px 0; }
.heart-alt-name { font-size: 14px; font-weight: 700; color: var(--text-dark); }
.heart-alt-sub { font-size: 12px; color: var(--text-medium); margin-top: 2px; }

.attach-hero-card, .money-hero-card { text-align: center; padding: 8px 0 4px; }
.attach-hero-icon, .money-hero-icon { font-size: 48px; margin-bottom: 6px; }
.attach-hero-name, .money-hero-name { font-size: 22px; font-weight: 800; color: var(--text-dark); }
.attach-hero-sub, .money-hero-sub { color: var(--text-medium); font-size: 14px; margin-top: 2px; }
.attach-oneliner, .money-oneliner { font-size: 15px; color: var(--type-primary); font-weight: 700; margin-top: 10px; }
.attach-text { font-size: 14px; color: var(--text-dark); line-height: 1.9; }

.attach-other-item { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(45,52,54,0.07); }
.attach-other-item:last-child { border-bottom: none; }
.attach-other-icon { font-size: 26px; flex: 0 0 auto; }
.attach-other-name { font-size: 14px; font-weight: 700; color: var(--text-dark); }
.attach-other-tag { font-weight: 400; color: var(--text-medium); font-size: 12px; }

/* ============================================================
   VIBE LAYER — 怪诞可爱 / 去 AI 模板感 / 动效增强
   覆盖式增强，不破坏原有结构（追加于 2026-08-23）
   ============================================================ */
:root {
  --font-cute: 'PingFang SC', 'Microsoft YaHei UI', system-ui, sans-serif;
  --vibe-shadow: 0 10px 30px rgba(45, 52, 54, 0.10);
}

/* 全局氛围：漂浮 blob + 星点（极淡，固定在最底层） */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 10% 14%, rgba(255, 230, 109, 0.22), transparent 38%),
    radial-gradient(circle at 90% 9%, rgba(255, 107, 107, 0.16), transparent 36%),
    radial-gradient(circle at 83% 86%, rgba(78, 205, 196, 0.20), transparent 40%),
    radial-gradient(circle at 14% 90%, rgba(162, 155, 254, 0.18), transparent 38%);
  animation: blobDrift 14s ease-in-out infinite;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.9) 1px, transparent 1.6px),
    radial-gradient(circle, rgba(255, 255, 255, 0.6) 1px, transparent 1.6px);
  background-size: 150px 150px, 95px 95px;
  background-position: 0 0, 47px 63px;
  opacity: 0.55;
}
/* 让答题页 / 结果页露出氛围层（原本实色背景会盖住 blob） */
.quiz-page.active,
.result-page { background: transparent; }

/* ---------- 首页测试卡片升级 ---------- */
.test-card {
  position: relative;
  padding: var(--space-md);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--duration-fast) var(--ease-spring),
    box-shadow var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}
.test-card:hover {
  transform: translateY(-6px) rotate(-0.6deg);
  box-shadow: var(--shadow-lg);
}
.test-card:hover .test-card-icon { transform: rotate(-9deg) scale(1.1); }
.test-card.selected {
  transform: translateY(-2px);
  border-color: var(--type-primary);
  background: linear-gradient(135deg, color-mix(in srgb, var(--type-primary) 7%, #fff), color-mix(in srgb, var(--type-secondary, #4ECDC4) 6%, #fff));
  box-shadow: 0 12px 32px color-mix(in srgb, var(--type-primary) 22%, transparent);
}
.test-card-icon {
  width: 52px;
  height: 52px;
  font-size: 1.7rem;
  border-radius: 18px;
  box-shadow: 0 6px 16px rgba(45, 52, 54, 0.12);
  transition: transform var(--duration-fast) var(--ease-spring);
}
.test-card-name {
  font-family: var(--font-cute);
  font-size: 1.18rem;
  letter-spacing: 0.5px;
}
/* 怪诞 slogan 小标签 */
.test-card-slogan {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 800;
  color: var(--type-primary);
  background: color-mix(in srgb, var(--type-primary) 13%, #fff);
  padding: 3px 11px;
  border-radius: var(--radius-full);
  transform: rotate(-1.5deg);
  line-height: 1.5;
}
/* 选中贴纸章 */
.test-card-sticker {
  position: absolute;
  top: -12px;
  right: -10px;
  font-family: var(--font-cute);
  font-size: 13px;
  font-weight: 900;
  color: #fff;
  background: var(--type-primary);
  padding: 5px 13px;
  border-radius: 13px 13px 13px 3px;
  transform: rotate(9deg) scale(0);
  box-shadow: 0 5px 14px color-mix(in srgb, var(--type-primary) 45%, transparent);
  opacity: 0;
  transition: transform var(--duration-fast) var(--ease-spring), opacity var(--duration-fast) var(--ease-out);
  pointer-events: none;
}
.test-card.selected .test-card-sticker {
  transform: rotate(9deg) scale(1);
  opacity: 1;
  animation: stickerPop 0.45s var(--ease-spring) both;
}

/* ---------- 答题选项微交互 ---------- */
.option-item {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--duration-fast) var(--ease-spring),
    box-shadow var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out);
}
.option-item:hover { transform: translateX(6px) translateY(-2px); }
.option-item:active { transform: scale(0.975); }
.option-item.selected {
  transform: translateX(2px);
  box-shadow: 0 9px 26px color-mix(in srgb, var(--type-primary) 18%, transparent);
  animation: optionPop 0.35s var(--ease-spring) both;
}
.option-item.selected .option-letter {
  transform: scale(1.14) rotate(-6deg);
  box-shadow: 0 4px 11px color-mix(in srgb, var(--type-primary) 40%, transparent);
}
.option-text { line-height: 1.5; }

/* 进度条流光 + 百分比字号 */
.quiz-progress-fill::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%);
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
  border-radius: inherit;
}
#progressText {
  font-family: var(--font-cute);
  font-size: 15px;
  color: var(--type-primary);
}
.question-text { font-size: var(--text-xl); }

/* ---------- 结果卡片入场 + 俏皮 ---------- */
.result-card {
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(45, 52, 54, 0.06);
  animation: cardIn 0.5s var(--ease-out) both;
}
.result-card-header { gap: 12px; }
.result-card-icon {
  width: 46px;
  height: 46px;
  font-size: 1.4rem;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(45, 52, 54, 0.12);
  animation: iconWobble 3.2s ease-in-out infinite;
}
.result-card-title { font-size: var(--text-xl); }

/* ---------- 可执行报告：7 天小实验 ---------- */
.action-plan-card {
  background: linear-gradient(145deg, #242335, #35324d);
  color: #fff;
  border: 0;
  box-shadow: 0 20px 50px rgba(36, 35, 53, 0.22);
}
.action-plan-card .result-card-title { color: #fff; }
.action-plan-icon { background: #f4d66f; color: #242335; transform: rotate(-4deg); }
.action-plan-kicker { margin-top: 2px; color: rgba(255,255,255,.62); font-size: var(--text-xs); }
.action-plan-steps { display: grid; gap: 14px; margin-top: 20px; }
.action-plan-steps > div { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; }
.action-plan-steps b {
  color: #f4d66f;
  font: 800 .75rem/1 var(--font-body);
  letter-spacing: .08em;
  padding-top: 5px;
}
.action-plan-steps span { color: rgba(255,255,255,.9); font-size: var(--text-sm); line-height: 1.75; }
.action-plan-note {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.62);
  font-size: var(--text-xs);
  line-height: 1.7;
}

/* ---------- 职业报告：按手机阅读尺寸重排 ---------- */
#careerReportRoot .talent-top-name,
#careerReportRoot .career-rec-name,
#careerReportRoot .talent-comm-label { font-size: 1rem; }
#careerReportRoot .talent-top-scenario,
#careerReportRoot .talent-section p,
#careerReportRoot .career-env,
#careerReportRoot .career-rec-why,
#careerReportRoot .talent-learning-text,
#careerReportRoot .talent-comm-text,
#careerReportRoot .talent-bullet-list,
#careerReportRoot .talent-tip { font-size: .95rem; line-height: 1.85; }
#careerReportRoot .talent-top-card { padding: 18px; }
#careerReportRoot .result-card { padding: 24px 20px; }

/* ================================================================
   NINE WORLDS — 每套测评有自己的材质、节奏与结果舞台
   ================================================================ */
:root { --theme-ink:#242532; --theme-accent:#6d62d4; --theme-soft:#f7f2eb; --theme-line:rgba(36,37,50,.12); }
html[data-quiz-theme="mbti"]{--theme-ink:#0d2040;--theme-accent:#2d63ff;--theme-soft:#edf3ff;--theme-line:rgba(45,99,255,.18)}
html[data-quiz-theme="talent"]{--theme-ink:#22184d;--theme-accent:#7657ff;--theme-soft:#f3efff;--theme-line:rgba(118,87,255,.18)}
html[data-quiz-theme="career"]{--theme-ink:#17355e;--theme-accent:#1467b8;--theme-soft:#f3f0e7;--theme-line:rgba(20,103,184,.18)}
html[data-quiz-theme="heart_mbti"]{--theme-ink:#562638;--theme-accent:#c25378;--theme-soft:#fff0f3;--theme-line:rgba(194,83,120,.18)}
html[data-quiz-theme="attachment"]{--theme-ink:#29483f;--theme-accent:#5d8878;--theme-soft:#eff5ed;--theme-line:rgba(93,136,120,.18)}
html[data-quiz-theme="money"]{--theme-ink:#14251d;--theme-accent:#2b9b5f;--theme-soft:#eef4df;--theme-line:rgba(43,155,95,.2)}
html[data-quiz-theme="hard_to_get"]{--theme-ink:#293e45;--theme-accent:#587b84;--theme-soft:#eef3f3;--theme-line:rgba(88,123,132,.2)}
html[data-quiz-theme="charm"]{--theme-ink:#432b5c;--theme-accent:#8b69c6;--theme-soft:#f6effa;--theme-line:rgba(139,105,198,.2)}
html[data-quiz-theme="love_brain"]{--theme-ink:#552b3c;--theme-accent:#b54e69;--theme-soft:#fff0ef;--theme-line:rgba(181,78,105,.2)}

html[data-quiz-theme] #page-quiz{position:relative;overflow:hidden;background:var(--theme-soft);color:var(--theme-ink)}
html[data-quiz-theme] #page-quiz::before{content:"";position:absolute;inset:0 0 auto;height:260px;pointer-events:none;opacity:.55;background:linear-gradient(135deg,var(--theme-accent),transparent 65%);mask-image:linear-gradient(#000,transparent)}
html[data-quiz-theme] #page-quiz .quiz-header,html[data-quiz-theme] #page-quiz .quiz-question-area{position:relative;z-index:1}
html[data-quiz-theme] #page-quiz .progress-fill{background:var(--theme-accent)}
html[data-quiz-theme] #page-quiz .quiz-progress-fill{background:var(--theme-accent)}
html[data-quiz-theme] #page-quiz #progressText{color:var(--theme-accent)}
html[data-quiz-theme] #page-quiz .quiz-dimension-badge{color:var(--theme-ink);border-color:var(--theme-line)}
html[data-quiz-theme] #page-quiz .question-number{color:var(--theme-accent);letter-spacing:.16em;font-weight:750}
html[data-quiz-theme] #page-quiz .option-item{border-color:var(--theme-line);background:rgba(255,255,255,.78);box-shadow:0 12px 32px color-mix(in srgb,var(--theme-accent) 8%,transparent)}
html[data-quiz-theme] #page-quiz .option-item:hover,html[data-quiz-theme] #page-quiz .option-item.selected{border-color:var(--theme-accent);transform:translateY(-2px)}

html[data-quiz-theme="mbti"] #page-quiz::before{background-image:linear-gradient(rgba(45,99,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(45,99,255,.12) 1px,transparent 1px);background-size:28px 28px;animation:gridDrift 12s linear infinite}
html[data-quiz-theme="talent"] #page-quiz::before{height:320px;background:radial-gradient(circle at 72% 25%,transparent 0 42px,#7657ff 43px 45px,transparent 46px),radial-gradient(circle at 72% 25%,#b8ff63 0 8px,transparent 9px),linear-gradient(145deg,#eee8ff,transparent);animation:talentOrbit 8s ease-in-out infinite}
html[data-quiz-theme="career"] #page-quiz::before{background:repeating-linear-gradient(0deg,transparent 0 23px,rgba(20,103,184,.1) 24px),linear-gradient(90deg,#1467b8 3px,transparent 3px);animation:routeDraw 6s ease-in-out infinite}
html[data-quiz-theme="heart_mbti"] #page-quiz::before{background:radial-gradient(circle at 70% 24%,rgba(194,83,120,.35),transparent 30%),linear-gradient(155deg,#f6cbd5,transparent);animation:softPulse 3.8s ease-in-out infinite}
html[data-quiz-theme="attachment"] #page-quiz::before{background:radial-gradient(ellipse at 30% 20%,rgba(93,136,120,.32),transparent 55%);filter:blur(4px);animation:slowBreathe 7s ease-in-out infinite}
html[data-quiz-theme="money"] #page-quiz::before{background:repeating-linear-gradient(110deg,transparent 0 28px,rgba(43,155,95,.12) 29px 31px),linear-gradient(#dcebb3,transparent);animation:tickerMove 10s linear infinite}
html[data-quiz-theme="hard_to_get"] #page-quiz{background:linear-gradient(135deg,#fff4ea 0,#f5f3ef 42%,#eaf3f6 100%)}
html[data-quiz-theme="hard_to_get"] #page-quiz::before{background:radial-gradient(circle at 12% 18%,rgba(227,147,102,.18),transparent 28%),radial-gradient(circle at 88% 20%,rgba(111,164,184,.22),transparent 30%);animation:gateShift 7s ease-in-out infinite}
html[data-quiz-theme="charm"] #page-quiz::before{height:340px;background:radial-gradient(circle at 50% 10%,rgba(255,255,255,.9),rgba(139,105,198,.32) 25%,transparent 60%);animation:spotlight 6s ease-in-out infinite}
html[data-quiz-theme="love_brain"] #page-quiz::before{background:linear-gradient(115deg,rgba(181,78,105,.32) 0 48%,rgba(32,52,88,.18) 52% 100%);animation:dualBeat 3s ease-in-out infinite}

/* 题目不只换颜色：轮廓、字体、密度和交互节奏也跟着测试性格变化 */
html[data-quiz-theme="mbti"] #page-quiz .option-item{border-radius:8px;border-left:4px solid #2d63ff;background:rgba(255,255,255,.9)}
html[data-quiz-theme="mbti"] #page-quiz .question-text{font-family:"Noto Serif SC","Songti SC",serif}
html[data-quiz-theme="talent"] #page-quiz .option-item{border-radius:999px;background:linear-gradient(90deg,rgba(255,255,255,.94),rgba(242,237,255,.82))}
html[data-quiz-theme="talent"] #page-quiz .option-item:nth-child(even){transform:translateX(7px)}
html[data-quiz-theme="career"] #page-quiz .option-item{border-radius:2px;border-style:dashed;box-shadow:6px 6px 0 rgba(20,103,184,.08)}
html[data-quiz-theme="career"] #page-quiz .question-text{font-family:"Microsoft YaHei",sans-serif;font-weight:650}
html[data-quiz-theme="heart_mbti"] #page-quiz .option-item{border-radius:28px 8px 28px 8px;background:rgba(255,250,251,.86)}
html[data-quiz-theme="heart_mbti"] #page-quiz .option-item:nth-child(even){border-radius:8px 28px 8px 28px}
html[data-quiz-theme="heart_mbti"] #page-quiz .question-text{font-family:"Noto Serif SC","Songti SC",serif}
html[data-quiz-theme="attachment"] #page-quiz .option-item{border:0;border-radius:22px;box-shadow:0 10px 34px rgba(41,72,63,.1);background:rgba(251,252,248,.88)}
html[data-quiz-theme="money"] #page-quiz{background:#12231b;color:#edf3dd}
html[data-quiz-theme="money"] #page-quiz .quiz-header{background:#12231b;color:#edf3dd;border-color:rgba(134,214,146,.2)}
html[data-quiz-theme="money"] #page-quiz .question-text{color:#f2f5e9;font-family:"Microsoft YaHei",sans-serif;font-weight:700}
html[data-quiz-theme="money"] #page-quiz .option-item{border-radius:2px;background:#1d3429;color:#edf3dd;border-color:rgba(134,214,146,.3);box-shadow:7px 7px 0 rgba(67,170,110,.14)}
html[data-quiz-theme="money"] #page-quiz .option-letter{background:#86d692;color:#12231b}
html[data-quiz-theme="money"] #page-quiz .option-text{color:#edf3dd}
html[data-quiz-theme="money"] #page-quiz #progressText{color:#86d692}
html[data-quiz-theme="money"] #page-quiz .quiz-dimension-badge{background:#dfe7c8;color:#12231b}
html[data-quiz-theme="hard_to_get"] #page-quiz .option-item{border-radius:18px;border:1px solid rgba(88,123,132,.2);border-left:4px solid #6f99a3;background:rgba(255,255,255,.8);box-shadow:0 12px 34px rgba(68,100,109,.08)}
html[data-quiz-theme="charm"] #page-quiz .option-item{border:1px solid rgba(139,105,198,.2);border-radius:26px;background:rgba(255,255,255,.58);backdrop-filter:blur(12px);box-shadow:0 18px 40px rgba(139,105,198,.1)}
html[data-quiz-theme="love_brain"] #page-quiz .option-item{border-radius:18px;background:rgba(255,255,255,.9);border-color:rgba(181,78,105,.18);box-shadow:0 12px 32px rgba(181,78,105,.08)}
html[data-quiz-theme="love_brain"] #page-quiz .option-item:nth-child(even){background:rgba(255,255,255,.9)}

@keyframes gridDrift{to{background-position:28px 28px}}
@keyframes talentOrbit{50%{transform:rotate(5deg) scale(1.05)}}
@keyframes routeDraw{50%{background-position:0 24px,18px 0}}
@keyframes softPulse{50%{opacity:.82;transform:scale(1.04)}}
@keyframes slowBreathe{50%{transform:scale(1.08);opacity:.75}}
@keyframes tickerMove{to{background-position:160px 0,0 0}}
@keyframes gateShift{50%{background-position:36px 0}}
@keyframes spotlight{50%{transform:translateX(8%) scale(1.08)}}
@keyframes dualBeat{48%,54%{transform:scale(1.025);opacity:.82}}

/* 九个结果舞台：共同可读性，不共享性格 */
.result-page{--page-accent:#6d62d4;--page-ink:#282632;--page-bg:#f7f3ec;--page-card:#fff;--page-radius:24px;background:var(--page-bg);color:var(--page-ink)}
.result-page .result-card{background:var(--page-card);border-radius:var(--page-radius);border:1px solid color-mix(in srgb,var(--page-accent) 14%,transparent);box-shadow:0 18px 50px color-mix(in srgb,var(--page-accent) 10%,transparent)}
.result-page .result-card-icon{font-size:0!important;background:transparent!important;box-shadow:none!important;border:1px solid color-mix(in srgb,var(--page-accent) 34%,transparent)}
.result-page .result-card-icon::after{content:"";width:15px;height:15px;border:2px solid var(--page-accent);display:block;transform:rotate(45deg)}
.result-page .talent-bar-fill{background:var(--page-accent)}
.result-page .result-actions .btn-primary{background:var(--page-accent)}
.result-page .action-plan-card{background:linear-gradient(145deg,#242335,#35324d)!important;color:#fff!important;border:0!important;box-shadow:0 20px 50px rgba(36,35,53,.22)!important}
.result-page .action-plan-card .result-card-title{color:#fff!important}
.result-page .money-confidence-card{background:radial-gradient(circle at 92% 0%,rgba(255,220,125,.3),transparent 34%),linear-gradient(145deg,#17352d,#245a49)!important;color:#fff!important;border:0!important}

#page-result{--page-accent:#2e60ef;--page-ink:#102343;--page-bg:#eaf1ff;--page-card:#fdfefe;--page-radius:8px;background-image:linear-gradient(rgba(46,96,239,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(46,96,239,.07) 1px,transparent 1px);background-size:32px 32px}
#page-result .result-hero{background:linear-gradient(145deg,#09204d,#285de9);border-radius:0 0 52px 8px}
#page-result .result-card{border-left:4px solid var(--page-accent)}
#page-result-talent{--page-accent:#7559ec;--page-ink:#291c58;--page-bg:#f1edff;--page-card:#fff;--page-radius:30px}
#page-result-talent .talent-hero{background:radial-gradient(circle at 82% 12%,#baff69 0 6%,transparent 7%),linear-gradient(140deg,#261a55,#7659ec)}
#page-result-talent .result-card:nth-child(3n){transform:translateX(5px)}
#page-result-career{--page-accent:#1767ad;--page-ink:#183451;--page-bg:#f3efe4;--page-card:#fffdf7;--page-radius:3px;background-image:repeating-linear-gradient(0deg,transparent 0 31px,rgba(23,103,173,.06) 32px)}
#page-result-career .career-hero{background:linear-gradient(135deg,#173b6a,#1767ad);border-radius:0}
#page-result-career .result-card{border-style:dashed;box-shadow:8px 8px 0 rgba(23,103,173,.08)}
#page-result-heart{--page-accent:#bc5577;--page-ink:#57283a;--page-bg:#fff0f3;--page-card:rgba(255,255,255,.86);--page-radius:40px}
#page-result-heart .heart-hero{background:radial-gradient(circle at 75% 20%,rgba(255,255,255,.35),transparent 32%),linear-gradient(150deg,#743349,#cb6b89)}
#page-result-heart .result-card{backdrop-filter:blur(10px)}
#page-result-attachment{--page-accent:#608979;--page-ink:#29443c;--page-bg:#edf4ec;--page-card:#fbfcf8;--page-radius:34px 12px 34px 12px;background-image:radial-gradient(circle at 12% 8%,rgba(96,137,121,.13),transparent 26%)}
#page-result-attachment .attachment-hero{background:linear-gradient(145deg,#355f53,#7ba18f)}
#page-result-attachment .result-card{box-shadow:0 14px 45px rgba(41,68,60,.09)}
#page-result-money{--page-accent:#43aa6e;--page-ink:#15271e;--page-bg:#15231d;--page-card:#f4f7e8;--page-radius:2px}
#page-result-money .money-hero{background:linear-gradient(145deg,#0c1712,#264a37);border-bottom:1px solid #86d692}
#page-result-money .result-content{background:#15231d}
#page-result-money .result-card{box-shadow:8px 8px 0 #2e6c4a;border-color:#2e6c4a}
#page-result-hard-to-get{--page-accent:#8b7044;--page-ink:#273934;--page-bg:#f1ece0;--page-card:#fdfaf2;--page-radius:6px 28px 6px 28px}
#page-result-hard-to-get .hard-to-get-hero{background:linear-gradient(120deg,#203b34 0 58%,#8b7044 59% 61%,#304d45 62%)}
#page-result-hard-to-get[data-gate-temperature="warm"]{--page-accent:#d87652;--page-ink:#5d3024;--page-bg:#fff0e5;--page-card:#fffaf5}
#page-result-hard-to-get[data-gate-temperature="warm"] .hard-to-get-hero{background:radial-gradient(circle at 78% 15%,rgba(255,240,194,.36),transparent 28%),linear-gradient(140deg,#bd5945,#e79866)}
#page-result-hard-to-get[data-gate-temperature="sunlit"]{--page-accent:#bc8543;--page-ink:#5a4029;--page-bg:#fbf1dd;--page-card:#fffaf0}
#page-result-hard-to-get[data-gate-temperature="sunlit"] .hard-to-get-hero{background:linear-gradient(140deg,#9d6838,#dfaa62)}
#page-result-hard-to-get[data-gate-temperature="mist"]{--page-accent:#648991;--page-ink:#304b51;--page-bg:#eef3f2;--page-card:#fbfdfc}
#page-result-hard-to-get[data-gate-temperature="mist"] .hard-to-get-hero{background:linear-gradient(140deg,#46676b,#7d9ca0)}
#page-result-hard-to-get[data-gate-temperature="frost"]{--page-accent:#628ba7;--page-ink:#29465d;--page-bg:#eaf2f7;--page-card:#f9fcfe}
#page-result-hard-to-get[data-gate-temperature="frost"] .hard-to-get-hero{background:radial-gradient(circle at 82% 12%,rgba(222,247,255,.32),transparent 24%),linear-gradient(140deg,#365c76,#7fa9c1)}
#page-result-hard-to-get[data-gate-temperature="glacier"]{--page-accent:#547e9e;--page-ink:#203d55;--page-bg:#e5f0f7;--page-card:#f7fcff}
#page-result-hard-to-get[data-gate-temperature="glacier"] .hard-to-get-hero{background:linear-gradient(145deg,#163a56,#5f91b1 62%,#a7cfdf)}
#page-result-charm{--page-accent:#8a69bd;--page-ink:#4b315d;--page-bg:#f7effb;--page-card:rgba(255,255,255,.8);--page-radius:34px;background-image:radial-gradient(circle at 85% 4%,rgba(187,144,255,.25),transparent 22%)}
#page-result-charm .charm-hero{background:radial-gradient(circle at 72% 15%,rgba(255,255,255,.33),transparent 24%),linear-gradient(140deg,#4e376e,#8f72c2)}
#page-result-love-brain{--page-accent:#b6536b;--page-ink:#532b39;--page-bg:#fff0ef;--page-card:#fffafa;--page-radius:18px}
#page-result-love-brain .love-brain-hero{background:linear-gradient(115deg,#9d455f 0 49%,#273859 50% 100%)}
#page-result-love-brain .result-card:nth-child(even){border-left:3px solid #273859}

/* 结果正文的杂志式“再往里一层” */
.editorial-coda{display:grid;gap:16px;margin-top:28px}
.editorial-intro{padding:28px 8px 8px;border-top:1px solid color-mix(in srgb,var(--page-accent) 35%,transparent)}
.editorial-intro span,.editorial-eyebrow{font-size:11px;letter-spacing:.18em;color:var(--page-accent);font-weight:800}
.editorial-intro h2{font-family:var(--font-display);font-size:clamp(27px,7vw,38px);margin:8px 0;color:var(--page-ink)}
.editorial-intro p{margin:0;color:color-mix(in srgb,var(--page-ink) 68%,transparent);line-height:1.8}
.editorial-card{position:relative;padding:26px 24px;background:var(--page-card);border:1px solid color-mix(in srgb,var(--page-accent) 16%,transparent);border-radius:var(--page-radius);overflow:hidden}
.editorial-card::after{content:"";position:absolute;right:-24px;top:-24px;width:74px;height:74px;border:1px solid color-mix(in srgb,var(--page-accent) 18%,transparent);border-radius:50%}
.editorial-card h3{margin:8px 0 10px;font-size:19px;color:var(--page-ink)}
.editorial-card p{margin:0;font-size:15px;line-height:1.95;color:color-mix(in srgb,var(--page-ink) 78%,transparent)}
#page-result-money .editorial-intro h2,#page-result-money .editorial-intro p{color:#eef4df}
#page-result-career .editorial-card{box-shadow:6px 6px 0 rgba(23,103,173,.08)}
#page-result .editorial-card{border-left:4px solid var(--page-accent)}

@media (prefers-reduced-motion:reduce){html[data-quiz-theme] #page-quiz::before,.btn-finish::before{animation:none!important}.result-page .result-card{animation:none!important}.result-page .result-card:nth-child(3n){transform:none}}

/* ---------- 赚钱人格：信心与行动 ---------- */
.money-confidence-card {
  color: #fff;
  background: radial-gradient(circle at 92% 0%, rgba(255,220,125,.3), transparent 34%), linear-gradient(145deg, #17352d, #245a49);
  border: 0;
}
.money-confidence-kicker { color: #FFD978; font-size: .78rem; font-weight: 800; letter-spacing: .12em; }
.money-confidence-title { margin: 7px 0 12px; font-family: var(--font-display); font-size: 1.55rem; }
.money-confidence-card > p { color: rgba(255,255,255,.9); font-size: .95rem; line-height: 1.9; }
.money-engine { margin-top: 16px; padding: 14px; border-radius: 14px; background: rgba(255,255,255,.1); font-size: .9rem; line-height: 1.8; }
.money-engine span { display: block; margin-bottom: 3px; color: #FFD978; font-size: .75rem; font-weight: 800; }
.money-next-steps { display: grid; gap: 13px; margin-top: 6px; }
.money-next-steps > div { display: grid; grid-template-columns: 34px 1fr; gap: 10px; }
.money-next-steps b { color: #E17055; font-size: .78rem; padding-top: 3px; }
.money-next-steps span { color: var(--text-dark); font-size: .95rem; line-height: 1.75; }

/* ---------- 三套恋爱人格 ---------- */
.test-card-icon.love-lock { background:#e8eee9; color:#40534e; font-weight:900; }
.test-card-icon.charm-orbit { background:#eee9fb; color:#7564a8; font-weight:900; }
.test-card-icon.brain-heart { background:#fae8ec; color:#b75f72; font-weight:900; }
.hard-to-get-hero{background:linear-gradient(145deg,#31433e,#6e8b7d)}
.charm-hero{background:radial-gradient(circle at 80% 15%,#bda8ff 0,transparent 30%),linear-gradient(145deg,#53467d,#8c75bd)}
.love-brain-hero{background:linear-gradient(120deg,#7c5c72 0 48%,#c77683 52% 100%)}
.love-signature-card{position:relative;overflow:hidden;padding:28px;background:linear-gradient(145deg,#fff,#faf7f2)}
.love-signature-card:after{content:'';position:absolute;width:160px;height:160px;border-radius:50%;right:-60px;top:-60px;background:var(--type-primary);opacity:.08}
.love-result-code{font-size:.72rem;letter-spacing:.17em;font-weight:800;color:var(--type-primary);margin-bottom:10px}
.love-signature-card h2{font-family:var(--font-display);font-size:2rem;font-weight:500;line-height:1.25}
.love-subtype{display:inline-block;margin:10px 0;padding:5px 10px;border-radius:999px;background:var(--cream-warm);font-size:.78rem;font-weight:700}
.love-signature-card p{font-size:.98rem;line-height:1.9;color:var(--text-medium)}
.love-signature-card blockquote{margin-top:18px;padding:14px 0;border-top:1px solid var(--border-light);font-family:var(--font-display);font-size:1.15rem;line-height:1.7;color:var(--text-dark)}
.love-insight-card{position:relative;padding:24px 22px 24px 58px}
.love-insight-card>span{position:absolute;left:20px;top:25px;font-size:.72rem;font-weight:900;color:var(--type-primary);letter-spacing:.08em}
.love-insight-card h3{font-size:1.08rem;margin-bottom:9px}
.love-insight-card p{font-size:.95rem;line-height:1.9;color:var(--text-medium)}
.dual-score{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.dual-score>div{text-align:center;padding:14px;border-radius:16px;background:#f5f1eb}
.dual-score b{display:block;font-size:1.8rem;color:var(--type-primary)}
.dual-score span{font-size:.75rem;color:var(--text-medium)}
.love-dimensions{margin-top:18px}.love-dim-row{display:grid;grid-template-columns:42px 1fr 30px;gap:10px;align-items:center;margin:12px 0;font-size:.76rem;color:var(--text-medium)}
.love-dim-row>div{height:8px;border-radius:9px;background:#eee;overflow:hidden}.love-dim-row i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--type-primary),var(--type-secondary))}.love-dim-row b{text-align:right;color:var(--text-dark)}
.love-challenge{text-align:center;padding:8px 18px 22px;font-family:var(--font-display);font-size:1.12rem;color:var(--text-dark)}
.love-editorial-chapter{padding:26px 24px 12px;background:rgba(255,255,255,.88)}
.love-chapter-kicker{font-size:.66rem;letter-spacing:.2em;color:var(--type-primary);font-weight:800;margin-bottom:7px}
.love-editorial-chapter>h3{font-family:var(--font-display);font-size:1.42rem;margin:0 0 18px;color:var(--text-dark)}
.love-editorial-section{display:grid;grid-template-columns:28px 1fr;gap:12px;padding:18px 0;border-top:1px solid color-mix(in srgb,var(--type-primary) 14%,transparent)}
.love-editorial-section>span{font-size:.68rem;letter-spacing:.08em;color:var(--type-primary);padding-top:4px;font-weight:800}
.love-editorial-section h4{margin:0 0 8px;font-size:.98rem;color:var(--text-dark)}
.love-editorial-section p{margin:0;color:var(--text-medium);font-size:.9rem;line-height:1.9;text-align:justify}

/* ---------- 关键帧 ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cardIn { from { opacity: 0; transform: translateY(14px) scale(0.99); } to { opacity: 1; transform: none; } }
@keyframes optionPop { 0% { transform: translateX(2px) scale(1); } 45% { transform: translateX(2px) scale(1.015); } 100% { transform: translateX(2px) scale(1); } }

/* ==================== 测什么好呢 · 视频密码总入口 ==================== */
.app-container:has(.login-page.active){max-width:none;background:#f4efe8}
.login-page.active{display:block;padding:0;min-height:100svh;text-align:left;background:#f4efe8;overflow:visible}
.login-page::before,.login-page::after{display:none}
.quiz-brand-hero{position:relative;width:100%;min-height:100svh;overflow:hidden;isolation:isolate;background:#15172a;color:#fff}
.quiz-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:68% 50%;z-index:-3;filter:saturate(1.04) contrast(1.08)}
.quiz-grain{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:140px}
.quiz-hero-scrim{position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(13,15,34,.82) 0%,rgba(13,15,34,.12) 22%,rgba(13,15,34,.18) 62%,rgba(12,14,29,.82) 100%),linear-gradient(90deg,rgba(14,13,31,.94) 0%,rgba(14,13,31,.86) 30%,rgba(14,13,31,.25) 58%,transparent 76%);pointer-events:none}
.quiz-hero-nav{position:absolute;z-index:3;top:0;left:0;right:0;display:flex;align-items:center;justify-content:flex-end;padding:max(18px,env(safe-area-inset-top)) 20px 0}
.quiz-brand-lockup{display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none;font-size:.9rem;font-weight:700;letter-spacing:.08em;text-shadow:0 2px 20px rgba(19,16,44,.35)}
.quiz-brand-lockup img{width:36px;height:36px;object-fit:contain;filter:drop-shadow(0 4px 14px rgba(83,47,221,.42))}
.quiz-brand-lockup span{display:flex;flex-direction:column;gap:2px;line-height:1}.quiz-brand-lockup b{font-size:.78rem}.quiz-brand-lockup small{font-size:.5rem;font-weight:500;letter-spacing:.12em;color:rgba(255,255,255,.65)}
.quiz-nav-count{font-size:.67rem;letter-spacing:.1em;color:rgba(255,255,255,.72);padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.08);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.quiz-audio-toggle{display:inline-flex;align-items:center;gap:7px;margin-left:10px;padding:8px 13px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(16,18,34,.42);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;font-size:.66rem;letter-spacing:.04em;cursor:pointer;transition:background .2s ease,border-color .2s ease}
.quiz-audio-toggle:hover{background:rgba(16,18,34,.6);border-color:rgba(255,255,255,.4)}
.quiz-audio-toggle svg{width:17px;height:17px;fill:#fff;stroke:none;flex:none}
.quiz-audio-toggle .ic-off{display:none}
.quiz-audio-toggle.is-muted .ic-on{display:none}
.quiz-audio-toggle.is-muted .ic-off{display:inline}
.quiz-audio-toggle.is-muted .quiz-audio-label::after{content:"原声：关"}
.quiz-audio-toggle:not(.is-muted) .quiz-audio-label::after{content:"原声：开"}
.quiz-brain-marker{position:absolute;z-index:2;top:max(18px,env(safe-area-inset-top));left:20px;display:flex;flex-direction:row;align-items:center;gap:8px;pointer-events:none;background:rgba(11,11,30,.32);backdrop-filter:blur(10px) saturate(1.1);-webkit-backdrop-filter:blur(10px) saturate(1.1);padding:6px 11px 6px 7px;border-radius:999px;border:1px solid rgba(255,255,255,.12)}
.quiz-brain-marker span{display:block;width:54px;height:54px;border:1px solid rgba(255,255,255,.52);border-radius:50%;animation:brainPulse 2.6s ease-out infinite}
.quiz-brain-marker span::after{content:'';position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 14px #fff;left:50%;top:25px}
.quiz-brain-marker i{font-style:normal;font-size:.52rem;letter-spacing:.22em;color:rgba(255,255,255,.66)}
@keyframes brainPulse{0%,100%{transform:scale(.88);opacity:.35}50%{transform:scale(1.12);opacity:.92}}
.quiz-hero-content{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;gap:18px;padding:88px 18px max(38px,env(safe-area-inset-bottom));position:relative;z-index:2}
.quiz-hero-copy{max-width:620px;text-shadow:0 4px 28px rgba(11,11,31,.38)}
.quiz-hero-eyebrow{display:block;font-size:.57rem;letter-spacing:.25em;color:rgba(255,255,255,.68);margin-bottom:10px}
.quiz-hero-copy h1{margin:0;font-family:var(--font-display);font-size:clamp(2.05rem,10.5vw,4.8rem);font-weight:400;line-height:1.06;letter-spacing:-.045em}
.quiz-hero-copy h1 em{font-style:normal;color:#ffd0da}
.quiz-hero-copy p{max-width:560px;margin:12px 0 0;font-size:.82rem;line-height:1.7;color:rgba(255,255,255,.76)}
.quiz-category-track{display:flex;gap:6px;overflow:hidden;margin-top:14px;mask-image:linear-gradient(90deg,#000 85%,transparent)}
.quiz-category-track span{flex:none;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.18);font-size:.64rem;letter-spacing:.06em;color:rgba(255,255,255,.78);background:rgba(255,255,255,.05)}
.liquid-glass{position:relative;overflow:hidden;background:rgba(255,255,255,.11);background-blend-mode:luminosity;backdrop-filter:blur(16px) saturate(1.15);-webkit-backdrop-filter:blur(16px) saturate(1.15);box-shadow:inset 0 1px 1px rgba(255,255,255,.2),0 18px 50px rgba(11,11,30,.22)}
.liquid-glass::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.2px;background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.12) 25%,transparent 50%,rgba(255,255,255,.3));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.quiz-unlock{width:100%;max-width:620px;border-radius:24px;padding:15px}
.quiz-unlock-heading{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.quiz-unlock-heading>span{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:rgba(255,255,255,.14);font-size:.6rem;letter-spacing:.08em}
.quiz-unlock-heading div{display:flex;flex-direction:column;gap:2px}.quiz-unlock-heading b{font-size:.82rem}.quiz-unlock-heading small{font-size:.61rem;color:rgba(255,255,255,.58)}
.quiz-unlock .password-input-group{max-width:none;margin:0}.quiz-unlock .password-input-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.quiz-unlock .password-input-wrapper{height:56px;border-radius:17px;background:rgba(250,251,255,.92);padding:5px 5px 5px 14px;box-shadow:0 8px 28px rgba(12,12,31,.16)}
.quiz-unlock .password-input-icon{position:static;flex:none;width:20px;height:20px;fill:none;stroke:#777b89;stroke-width:1.7}
.quiz-unlock .password-input{height:46px;min-width:0;border:0!important;background:transparent!important;box-shadow:none!important;padding:0 6px;font-size:.92rem;letter-spacing:.12em;text-align:left;color:#252737;font-weight:650;text-transform:uppercase}
.quiz-unlock .password-input::placeholder{color:#999daa;letter-spacing:.02em;font-weight:500}
.quiz-unlock-button{height:46px;flex:0 0 auto;display:flex;align-items:center;gap:4px;border:0;border-radius:13px;padding:0 15px;background:#242638;color:#fff;font-size:.76rem;font-weight:700;cursor:pointer;transition:transform .2s ease,background .2s ease}
.quiz-unlock-button:active{transform:scale(.96)}.quiz-unlock-button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.quiz-unlock .password-hint{min-height:18px;margin:8px 2px 0;text-align:left;font-size:.6rem;color:rgba(255,255,255,.66)}
.quiz-unlock .password-hint.error{color:#ffd0d8}.quiz-unlock .password-hint.success{color:#c9f7d2}
.quiz-unlock .password-buy{display:flex;flex-wrap:wrap;gap:6px 14px;margin:10px 2px 0;font-size:.62rem;color:rgba(255,255,255,.66)}
.quiz-unlock .password-buy a{color:#ffd0da;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.quiz-unlock .password-buy a:hover{color:#fff}
.quiz-unlock-meta{display:flex;gap:14px;margin-top:9px;color:rgba(255,255,255,.55);font-size:.57rem}.quiz-unlock-meta span::before{content:'';display:inline-block;width:4px;height:4px;margin-right:5px;border-radius:50%;background:#ffd0da;vertical-align:middle}
.quiz-scroll-cue{display:none}
.quiz-picker-shell{position:relative;padding:54px 18px 72px;background:radial-gradient(circle at 12% 4%,#fff1d8,transparent 30%),radial-gradient(circle at 92% 20%,#ffe1e5,transparent 28%),#f7f2eb;text-align:center}
.quiz-picker-intro{max-width:520px;margin:0 auto 22px}.quiz-picker-intro>span{font-size:.6rem;letter-spacing:.24em;color:#b06373}.quiz-picker-intro h2{font-family:var(--font-display);font-weight:400;font-size:1.65rem;line-height:1.25;margin:10px 0;color:#30313b}.quiz-picker-intro p{font-size:.76rem;line-height:1.7;color:#777984;margin:0}
.quiz-picker-shell .test-selector,.quiz-picker-shell .login-social-proof{margin-left:auto;margin-right:auto}.quiz-picker-shell .authority-badge{max-width:380px;margin-left:auto;margin-right:auto}
.quiz-picker-shell .btn-start{margin-left:auto;margin-right:auto}
@media(min-width:760px){.quiz-hero-video{transform:scale(1.015);object-position:64% 50%}.quiz-hero-scrim{background:linear-gradient(180deg,rgba(13,15,34,.76),rgba(13,15,34,.08) 34%,rgba(12,14,29,.68)),linear-gradient(90deg,rgba(12,12,30,.96) 0%,rgba(12,12,30,.88) 30%,rgba(12,12,30,.2) 58%,transparent 76%)}.quiz-hero-nav{padding:28px 5vw 0}.quiz-brand-lockup{font-size:1rem}.quiz-nav-count{font-size:.72rem;padding:10px 15px}.quiz-hero-content{padding:120px 7vw 7vh;align-items:flex-start;justify-content:flex-end;gap:24px}.quiz-hero-copy{width:47%}.quiz-hero-copy p{font-size:1rem}.quiz-unlock{width:min(520px,46%);padding:18px;position:absolute;right:6vw;bottom:8vh}.quiz-brain-marker{top:18%}.quiz-scroll-cue{display:flex;position:absolute;left:50%;bottom:22px;transform:translateX(-50%);align-items:center;gap:8px;font-size:.6rem;letter-spacing:.12em;color:rgba(255,255,255,.55);z-index:3}.quiz-scroll-cue span{width:20px;height:1px;background:currentColor;animation:scrollLine 1.8s ease-in-out infinite}@keyframes scrollLine{50%{width:34px}}.quiz-picker-shell{padding:88px 24px 100px}.quiz-picker-intro h2{font-size:2.3rem}.quiz-picker-shell .test-selector{max-width:920px;display:grid!important;grid-template-columns:repeat(3,1fr)}.quiz-picker-shell .test-card{height:100%}}
@media(max-height:700px) and (max-width:759px){.quiz-hero-copy p{display:none}.quiz-category-track{margin-top:8px}.quiz-hero-content{gap:10px;padding-top:70px;padding-bottom:18px}.quiz-unlock{padding:12px}.quiz-brain-marker{top:11%}}
@media(prefers-reduced-motion:reduce){.quiz-brain-marker span,.quiz-scroll-cue span{animation:none}.quiz-hero-video{display:none}.quiz-brand-hero{background:linear-gradient(160deg,#707bb0,#d98ba2 52%,#182038)}}
@media(min-width:760px){.quiz-hero-scrim{background:linear-gradient(180deg,rgba(13,15,34,.76),rgba(13,15,34,.08) 34%,rgba(12,14,29,.68)),linear-gradient(90deg,rgba(12,12,30,.96) 0%,rgba(12,12,30,.88) 30%,rgba(12,12,30,.2) 58%,transparent 76%)}}

/* 密码页上下统一为冷感编辑部，而不是科幻首屏 + 可爱卡片的拼接 */
.quiz-picker-shell{background:#171927;color:#f4f1eb;border-top:1px solid rgba(255,255,255,.1)}
.quiz-picker-shell::before{content:'09 / SELF DISCOVERY EDITIONS';display:block;max-width:920px;margin:0 auto 48px;padding-bottom:13px;border-bottom:1px solid rgba(255,255,255,.14);font-size:.58rem;letter-spacing:.28em;text-align:left;color:rgba(255,255,255,.48)}
.quiz-picker-intro>span{color:#e6a8b5}.quiz-picker-intro h2{color:#f5f1eb}.quiz-picker-intro p{color:rgba(255,255,255,.58)}
.quiz-picker-shell .test-card{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.11);box-shadow:none;color:#f4f1eb}
.quiz-picker-shell .test-card:hover{background:rgba(255,255,255,.085);border-color:rgba(255,255,255,.22)}
.quiz-picker-shell .test-card.selected{background:rgba(255,255,255,.1);border-color:var(--type-primary);box-shadow:0 15px 42px rgba(0,0,0,.2)}
.quiz-picker-shell .test-card-name,.quiz-picker-shell .test-card-extra{color:#f5f1eb}.quiz-picker-shell .test-card-desc{color:rgba(255,255,255,.56)}.quiz-picker-shell .test-card-slogan{color:#f0b3c0;background:rgba(230,168,181,.1)}
.quiz-picker-shell .test-card-sticker{display:none}.quiz-picker-shell .test-card-icon{box-shadow:none;background:rgba(255,255,255,.09)!important;color:#f3c1cb}
.quiz-picker-shell .authority-badge{color:rgba(255,255,255,.66)}.quiz-picker-shell .authority-item{border-color:rgba(255,255,255,.09)}.quiz-picker-shell .authority-icon{color:#e6a8b5;font-family:var(--font-body);font-size:.62rem;letter-spacing:.08em}
.quiz-picker-shell .login-sp-item{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.62)}
.test-detail-panel{display:none;max-width:920px;margin:22px auto 6px;padding:24px;text-align:left;border:1px solid rgba(255,255,255,.13);border-radius:22px;background:linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.035));box-shadow:0 20px 60px rgba(0,0,0,.16);animation:testDetailIn .36s cubic-bezier(.16,1,.3,1)}
.test-detail-panel.visible{display:block}.test-detail-kicker{font-size:.56rem;letter-spacing:.22em;color:#e6a8b5}.test-detail-panel h3{margin:10px 0 8px;color:#fff;font-family:var(--font-display);font-size:1.42rem;font-weight:500}.test-detail-panel p{max-width:720px;margin:0;color:rgba(255,255,255,.67);font-size:.77rem;line-height:1.8}.test-detail-points{display:flex;flex-direction:column;gap:5px;margin-top:17px;padding-top:15px;border-top:1px solid rgba(255,255,255,.1)}.test-detail-points span{font-size:.56rem;letter-spacing:.14em;color:rgba(255,255,255,.4)}.test-detail-points b{font-size:.7rem;line-height:1.65;color:rgba(255,255,255,.84);font-weight:600}@keyframes testDetailIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-width:759px){.quiz-brand-lockup b{font-size:.68rem}.quiz-brand-lockup small{font-size:.44rem}.quiz-nav-count{font-size:.56rem;padding:7px 9px}.test-detail-panel{padding:20px 18px;border-radius:18px}.quiz-picker-shell .test-selector{display:grid!important}.quiz-hero-video{object-position:70% 50%}}
@media(min-width:760px){.quiz-hero-scrim{background:linear-gradient(180deg,rgba(13,15,34,.9),rgba(13,15,34,.08) 34%,rgba(12,14,29,.68)),linear-gradient(90deg,#111325 0 44%,rgba(17,19,37,.96) 50%,rgba(12,12,30,.38) 62%,transparent 80%)}.quiz-hero-copy h1{font-size:4rem}}
/* 视频原画不再用黑色遮挡；品牌锁定在原 KNOW YOURSELF 中央位置。 */
.quiz-brand-spacer{width:1px;height:36px}.quiz-hero-video{object-position:50% 50%;filter:saturate(1.12) contrast(1.18) brightness(1.05)}
.quiz-hero-scrim{background:linear-gradient(180deg,rgba(13,15,34,.18) 0%,rgba(13,15,34,.02) 35%,rgba(13,15,34,.22) 63%,rgba(12,14,29,.8) 100%),linear-gradient(90deg,rgba(14,13,31,.46),transparent 62%);overflow:hidden}
.quiz-brain-marker.quiz-brand-lockup{width:auto;max-width:78vw;gap:8px;text-align:left;text-decoration:none;align-items:center}.quiz-brain-marker img{width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 4px 14px rgba(83,47,221,.42))}.quiz-brain-marker.quiz-brand-lockup>span{display:flex;width:auto;height:auto;flex-direction:column;align-items:flex-start;gap:1px;border:0;border-radius:0;animation:none;background:transparent;padding:0}.quiz-brain-marker.quiz-brand-lockup>span::after{display:none}.quiz-brain-marker b{white-space:nowrap;font-size:.68rem;letter-spacing:.04em;color:#fff;text-shadow:0 2px 14px rgba(10,10,30,.35);font-weight:700}.quiz-brain-marker small{white-space:nowrap;font-size:.5rem;letter-spacing:.14em;color:rgba(255,255,255,.7)}
@media(min-width:760px){.quiz-hero-video{transform:scale(1.04);object-position:55% 50%}.quiz-hero-scrim{background:linear-gradient(180deg,rgba(13,15,34,.12),rgba(13,15,34,.08) 48%,rgba(12,14,29,.68)),linear-gradient(90deg,rgba(12,12,30,.9) 0%,rgba(12,12,30,.72) 28%,rgba(12,12,30,.18) 50%,transparent 64%)}.quiz-brain-marker img{width:66px;height:66px}.quiz-brain-marker b{font-size:.7rem}}
@media(max-width:759px){.quiz-hero-video{object-position:50% 50%}}
@keyframes stickerPop { 0% { transform: rotate(9deg) scale(0); } 60% { transform: rotate(9deg) scale(1.22); } 100% { transform: rotate(9deg) scale(1); } }
@keyframes iconWobble { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes blobDrift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---------- 无障碍：减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}
.attach-other-oneliner { font-size: 13px; color: var(--text-medium); line-height: 1.6; margin-top: 2px; }