/* ============================================================
   精小美MBTI v3 - 全面升级视觉系统
   设计理念：角色化IP · 沉浸式体验 · 引流驱动
   灵感来源：16Personalities + 2026 UI/UX趋势
   ============================================================ */

/* ---------- 变量系统 ---------- */
:root {
    --primary: #6366F1;
    --primary-light: #818CF8;
    --primary-dark: #4F46E5;
    --primary-glow: rgba(99,102,241,0.25);
    --accent: #EC4899;
    --accent-light: #F472B6;
    --accent-glow: rgba(236,72,153,0.2);

    --bg-main: #F8FAFC;
    --bg-card: #FFFFFF;
    --bg-overlay: rgba(15,23,42,0.7);
    --bg-dark: #0F172A;
    --bg-dark-2: #1E293B;

    --text-primary: #0F172A;
    --text-secondary: #475569;
    --text-muted: #94A3B8;
    --text-light: #CBD5E1;
    --text-white: rgba(255,255,255,0.9);
    --text-white-muted: rgba(255,255,255,0.55);

    --success: #10B981;
    --warning: #F59E0B;
    --error: #EF4444;
    --gold: #FCD34D;

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-full: 9999px;

    --shadow-sm: 0 2px 12px rgba(15,23,42,0.05);
    --shadow-md: 0 4px 24px rgba(15,23,42,0.08);
    --shadow-lg: 0 8px 40px rgba(15,23,42,0.12);
    --shadow-xl: 0 16px 60px rgba(15,23,42,0.16);
    --shadow-glow: 0 0 40px rgba(99,102,241,0.15);

    --ease-out: cubic-bezier(0.16,1,0.3,1);
    --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
    --ease-smooth: cubic-bezier(0.4,0,0.2,1);

    /* 16人格主题色 */
    --intj-color: #4A90D9;
    --intp-color: #7B68EE;
    --entj-color: #E74C3C;
    --entp-color: #27AE60;
    --infj-color: #8E44AD;
    --infp-color: #1ABC9C;
    --enfj-color: #E91E63;
    --enfp-color: #FF9800;
    --istj-color: #1565C0;
    --isfj-color: #AD1457;
    --estj-color: #BF360C;
    --esfj-color: #E65100;
    --istp-color: #607D8B;
    --isfp-color: #C2185B;
    --estp-color: #795548;
    --esfp-color: #F06292;
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { scroll-behavior:smooth; }
body {
    font-family:'Noto Sans SC','Inter',-apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif;
    background:var(--bg-main);
    color:var(--text-primary);
    min-height:100vh;
    overflow-x:hidden;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* ---------- 页面容器 ---------- */
.page-v3 { display:none; min-height:100vh; }
.page-v3.active { display:flex; flex-direction:column; }

/* ============================================================
   首页 / 启动页
   ============================================================ */
#page-home {
    background: linear-gradient(160deg, #0F0F1E 0%, #1A1B3A 25%, #1E2A5E 55%, #0F1F3D 80%, #0F0F1E 100%);
    justify-content:flex-start;
    align-items:center;
    position:relative;
    overflow-y:auto;
    padding-bottom:80px;
}

/* 动态背景 */
.hero-bg-v3 {
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:0;
}

.hero-orb-v3 {
    position:absolute;
    border-radius:50%;
    filter:blur(80px);
    animation:orbFloatV3 15s ease-in-out infinite;
}

.hero-orb-v3.orb-1 {
    width:500px; height:500px;
    background:radial-gradient(circle, rgba(99,102,241,0.3) 0%, transparent 70%);
    top:-180px; right:-150px;
}

.hero-orb-v3.orb-2 {
    width:400px; height:400px;
    background:radial-gradient(circle, rgba(236,72,153,0.2) 0%, transparent 70%);
    bottom:-100px; left:-100px;
    animation-delay:5s;
}

.hero-orb-v3.orb-3 {
    width:300px; height:300px;
    background:radial-gradient(circle, rgba(129,140,248,0.15) 0%, transparent 70%);
    top:40%; left:20%;
    animation-delay:10s;
}

@keyframes orbFloatV3 {
    0%,100% { transform:translate(0,0) scale(1); }
    33% { transform:translate(30px,-40px) scale(1.08); }
    66% { transform:translate(-20px,30px) scale(0.92); }
}

/* 网格纹理 */
.hero-mesh-v3 {
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(99,102,241,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99,102,241,0.04) 1px, transparent 1px);
    background-size:50px 50px;
    mask-image:radial-gradient(ellipse at center, black 0%, transparent 70%);
    -webkit-mask-image:radial-gradient(ellipse at center, black 0%, transparent 70%);
}

/* 噪点纹理 */
.hero-noise-v3 {
    position:absolute;
    inset:0;
    opacity:0.03;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 内容区 */
.hero-content-v3 {
    position:relative;
    z-index:1;
    text-align:center;
    width:100%;
    max-width:480px;
    padding:24px 20px 0;
    animation:fadeInUpV3 0.8s var(--ease-out);
}

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

/* 顶部标签 */
.hero-badge-row-v3 {
    display:flex;
    justify-content:center;
    gap:8px;
    margin-bottom:24px;
}

.hero-badge-v3 {
    display:inline-flex;
    align-items:center;
    gap:5px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.12);
    color:rgba(255,255,255,0.75);
    padding:5px 12px;
    border-radius:20px;
    font-size:11px;
    font-weight:500;
    letter-spacing:0.3px;
    backdrop-filter:blur(8px);
}

.hero-badge-alt {
    background:rgba(16,185,129,0.1);
    border-color:rgba(16,185,129,0.2);
    color:#6EE7B7;
}

/* 主视觉区 */
.hero-visual-v3 {
    margin-bottom:28px;
}

/* 16人格图标环绕动画 */
.hero-personality-grid {
    position:relative;
    width:200px;
    height:200px;
    margin:0 auto 20px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.hpg-ring {
    position:absolute;
    border-radius:50%;
    border:1px solid rgba(255,255,255,0.08);
}

.hpg-ring-1 {
    width:200px; height:200px;
    animation:ringRotate 30s linear infinite;
}

.hpg-ring-2 {
    width:160px; height:160px;
    border-color:rgba(255,255,255,0.05);
    animation:ringRotate 20s linear infinite reverse;
}

@keyframes ringRotate {
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
}

.hpg-center {
    position:relative;
    z-index:2;
    animation:centerPulse 3s ease-in-out infinite;
}

@keyframes centerPulse {
    0%,100% { transform:scale(1); }
    50% { transform:scale(1.1); }
}

.hpg-avatars {
    position:absolute;
    inset:0;
    z-index:1;
}

.hpg-avatar {
    position:absolute;
    width:28px; height:28px;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:10px;
    font-weight:800;
    color:white;
    letter-spacing:0;
    top:50%; left:50%;
    transform-origin:0 0;
    animation:avatarOrbit 30s linear infinite;
    box-shadow:0 2px 8px rgba(0,0,0,0.3);
}

@keyframes avatarOrbit {
    from { transform:rotate(var(--angle)) translateX(95px) rotate(calc(-1 * var(--angle))); }
    to { transform:rotate(calc(var(--angle) + 360deg)) translateX(95px) rotate(calc(-1 * (var(--angle) + 360deg))); }
}

/* 标题 */
.hero-title-v3 {
    font-size:40px;
    font-weight:900;
    color:white;
    letter-spacing:-0.5px;
    margin-bottom:6px;
    text-shadow:0 2px 24px rgba(0,0,0,0.3);
}

.title-accent-v3 {
    background:linear-gradient(135deg, #a5b4fc 0%, #818CF8 50%, #c7d2fe 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

.hero-subtitle-v3 {
    font-size:16px;
    color:rgba(255,255,255,0.6);
    font-weight:400;
    letter-spacing:3px;
}

/* 数据统计 */
.hero-stats-v3 {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
    background:rgba(255,255,255,0.04);
    backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:var(--radius-md);
    padding:14px 18px;
    margin-bottom:20px;
}

.hero-stat-v3 {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
}

.stat-num-v3 {
    font-size:24px;
    font-weight:900;
    color:white;
    letter-spacing:-0.5px;
    line-height:1;
}

.stat-num-v3 small {
    font-size:14px;
    font-weight:700;
}

.stat-lbl-v3 {
    font-size:10px;
    color:rgba(255,255,255,0.45);
    letter-spacing:0.5px;
}

.stat-sep-v3 {
    width:1px;
    height:32px;
    background:rgba(255,255,255,0.1);
}

/* 16人格预览墙 */
.hero-personality-wall {
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:6px;
    margin-bottom:24px;
}

.hpw-item {
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:10px;
    padding:8px 4px;
    text-align:center;
    cursor:pointer;
    transition:all 0.25s var(--ease-out);
    backdrop-filter:blur(8px);
}

.hpw-item:hover {
    background:rgba(255,255,255,0.08);
    transform:translateY(-2px);
    border-color:rgba(165,180,252,0.3);
}

.hpw-emoji {
    font-size:18px;
    margin-bottom:2px;
    display:block;
}

.hpw-code {
    font-size:10px;
    font-weight:700;
    color:rgba(255,255,255,0.7);
    letter-spacing:0.5px;
}

.hpw-name {
    font-size:8px;
    color:rgba(255,255,255,0.35);
    margin-top:1px;
}

/* 核心优势卡片 */
.hero-features-v3 {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-bottom:24px;
}

.feat-card-v3 {
    display:flex;
    align-items:center;
    gap:10px;
    background:rgba(255,255,255,0.04);
    backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:var(--radius-md);
    padding:12px;
    text-align:left;
    transition:all 0.3s var(--ease-out);
}

.feat-card-v3:hover {
    background:rgba(255,255,255,0.07);
    border-color:rgba(165,180,252,0.15);
    transform:translateY(-2px);
}

.feat-icon-v3 {
    width:36px;
    height:36px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    flex-shrink:0;
}

.feat-text-v3 { flex:1; min-width:0; }
.feat-title-v3 { font-size:13px; font-weight:600; color:white; margin-bottom:1px; }
.feat-desc-v3 { font-size:10px; color:rgba(255,255,255,0.4); }

/* 用户评价 */
.hero-testimonials {
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:var(--radius-md);
    padding:16px 14px;
    margin-bottom:24px;
    overflow:hidden;
}

.testimonials-title {
    display:flex;
    align-items:center;
    gap:6px;
    font-size:13px;
    font-weight:600;
    color:rgba(255,255,255,0.7);
    margin-bottom:12px;
}

.testimonials-track {
    display:flex;
    gap:12px;
    overflow:hidden;
    animation:testimonialScroll 18s linear infinite;
}

.testimonials-track:hover {
    animation-play-state:paused;
}

@keyframes testimonialScroll {
    from { transform:translateX(0); }
    to { transform:translateX(-50%); }
}

.testimonial-item {
    flex-shrink:0;
    width:220px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:12px;
    padding:12px;
}

.testimonial-stars {
    color:var(--gold);
    font-size:12px;
    margin-bottom:6px;
}

.testimonial-item p {
    font-size:12px;
    color:rgba(255,255,255,0.75);
    line-height:1.6;
    margin-bottom:6px;
}

.testimonial-author {
    font-size:10px;
    color:rgba(255,255,255,0.4);
}

/* 主CTA区 */
.hero-cta-zone {
    margin-bottom:16px;
}

.btn-cta-v3 {
    width:100%;
    padding:16px 28px;
    background:linear-gradient(135deg, #6366F1 0%, #818CF8 50%, #6366F1 100%);
    background-size:200% 100%;
    color:white;
    border:none;
    border-radius:50px;
    font-size:17px;
    font-weight:800;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    box-shadow:0 4px 24px rgba(99,102,241,0.4), 0 0 0 1px rgba(165,180,252,0.2);
    transition:all 0.4s var(--ease-out);
    margin-bottom:12px;
    letter-spacing:0.5px;
    position:relative;
    overflow:hidden;
    animation:ctaGradient 3s linear infinite;
}

@keyframes ctaGradient {
    from { background-position:0% 50%; }
    to { background-position:200% 50%; }
}

.btn-cta-v3:hover {
    transform:translateY(-2px);
    box-shadow:0 8px 32px rgba(99,102,241,0.5), 0 0 0 1px rgba(165,180,252,0.3);
}

.btn-cta-v3:active {
    transform:translateY(0);
}

.btn-cta-shine {
    position:absolute;
    top:0; left:-100%;
    width:50%; height:100%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation:ctaShine 3s ease-in-out infinite;
}

@keyframes ctaShine {
    0% { left:-100%; }
    50%,100% { left:200%; }
}

.hero-version-row-v3 {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    margin-bottom:10px;
}

.hero-version-tag-v3 {
    display:inline-flex;
    align-items:center;
    gap:3px;
    font-size:11px;
    color:rgba(255,255,255,0.4);
}

.hero-divider-v3 {
    color:rgba(255,255,255,0.2);
}

.hero-quick-link-v3 {
    background:none;
    border:none;
    color:rgba(165,180,252,0.8);
    font-size:11px;
    cursor:pointer;
    text-decoration:underline;
    text-underline-offset:2px;
    transition:color 0.2s;
}

.hero-quick-link-v3:hover { color:#a5b4fc; }

.hero-trust-line {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    font-size:11px;
    color:rgba(255,255,255,0.3);
}

/* ============================================================
   测试页 - 沉浸式
   ============================================================ */
#page-test { background:var(--bg-main); }

.test-topbar-v3 {
    background:white;
    padding:12px 16px;
    border-bottom:1px solid rgba(0,0,0,0.05);
    position:sticky;
    top:0;
    z-index:10;
    display:flex;
    align-items:center;
    gap:12px;
}

.test-exit-btn {
    background:none;
    border:none;
    width:32px; height:32px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--text-muted);
    cursor:pointer;
    transition:all 0.2s;
    flex-shrink:0;
}

.test-exit-btn:hover {
    background:#F1F5F9;
    color:var(--text-primary);
}

.test-progress-v3 { flex:1; }

.test-progress-track-v3 {
    height:4px;
    background:#E2E8F0;
    border-radius:2px;
    overflow:hidden;
    margin-bottom:8px;
}

.test-progress-fill-v3 {
    height:100%;
    background:linear-gradient(90deg, var(--primary), var(--accent));
    border-radius:2px;
    transition:width 0.5s var(--ease-out);
    width:0%;
}

.test-progress-meta {
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.test-counter-v3 {
    font-size:14px;
    font-weight:700;
    color:var(--text-primary);
}

.test-counter-v3 strong {
    font-size:18px;
    color:var(--primary);
}

.test-counter-v3 span {
    font-weight:400;
    color:var(--text-muted);
    font-size:12px;
}

.test-dim-badge-v3 {
    display:inline-flex;
    align-items:center;
    gap:4px;
    background:var(--primary-glow);
    color:var(--primary);
    padding:3px 10px;
    border-radius:20px;
    font-size:11px;
    font-weight:600;
}

/* 题目主体 */
.test-body-v3 {
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px 16px;
    max-width:560px;
    margin:0 auto;
    width:100%;
}

.test-stage {
    width:100%;
    animation:stageFadeIn 0.4s var(--ease-out);
}

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

/* 维度进度 */
.dim-indicator-v3 {
    display:flex;
    justify-content:center;
    margin-bottom:20px;
}

.dim-steps-v3 {
    display:flex;
    gap:16px;
    align-items:center;
}

.dim-step-item {
    display:flex;
    align-items:center;
    gap:5px;
    opacity:0.4;
    transition:all 0.3s;
}

.dim-step-item.active {
    opacity:1;
}

.dim-step-dot {
    width:8px; height:8px;
    border-radius:50%;
    background:#CBD5E1;
    transition:all 0.3s;
}

.dim-step-item.active .dim-step-dot {
    background:var(--primary);
    width:20px;
    border-radius:4px;
}

.dim-step-label {
    font-size:11px;
    font-weight:600;
    color:var(--text-muted);
}

.dim-step-item.active .dim-step-label {
    color:var(--primary);
}

/* 题目卡片 */
.question-card-v3 {
    background:white;
    border-radius:var(--radius-lg);
    padding:28px 24px;
    box-shadow:var(--shadow-md);
    margin-bottom:20px;
    position:relative;
    overflow:hidden;
}

.question-card-v3::before {
    content:'';
    position:absolute;
    top:0; left:0; right:0;
    height:3px;
    background:linear-gradient(90deg, var(--primary), var(--accent));
}

.question-number-v3 {
    font-size:12px;
    font-weight:700;
    color:var(--primary);
    letter-spacing:1px;
    margin-bottom:10px;
}

.question-text-v3 {
    font-size:19px;
    font-weight:600;
    color:var(--text-primary);
    line-height:1.7;
}

/* 选项区 */
.options-area-v3 {
    display:flex;
    flex-direction:column;
    gap:8px;
}

.option-btn-v3 {
    width:100%;
    background:white;
    border:2px solid #E2E8F0;
    border-radius:var(--radius-md);
    padding:14px 16px;
    display:flex;
    align-items:center;
    gap:12px;
    cursor:pointer;
    text-align:left;
    transition:all 0.25s var(--ease-out);
    font-size:15px;
    color:var(--text-primary);
    box-shadow:var(--shadow-sm);
}

.option-btn-v3:hover {
    border-color:var(--primary-light);
    background:rgba(99,102,241,0.02);
    transform:translateX(4px);
}

.option-btn-v3.selected {
    border-color:var(--primary);
    background:linear-gradient(135deg, rgba(99,102,241,0.08), rgba(129,140,248,0.04));
    box-shadow:0 0 0 3px var(--primary-glow);
}

.opt-radio-v3 {
    width:20px; height:20px;
    border-radius:50%;
    border:2px solid #CBD5E1;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all 0.2s;
}

.option-btn-v3.selected .opt-radio-v3 {
    border-color:var(--primary);
    background:var(--primary);
}

.option-btn-v3.selected .opt-radio-v3::after {
    content:'';
    width:8px; height:8px;
    background:white;
    border-radius:50%;
}

.opt-text-v3 {
    flex:1;
    font-weight:500;
}

.opt-score-v3 {
    font-size:11px;
    color:var(--text-muted);
    font-weight:600;
    flex-shrink:0;
}

/* 底部栏 */
.test-bottombar-v3 {
    background:white;
    padding:10px 16px;
    border-top:1px solid rgba(0,0,0,0.05);
    display:flex;
    align-items:center;
    gap:10px;
    position:sticky;
    bottom:0;
}

.btn-prev-v3 {
    display:flex;
    align-items:center;
    gap:4px;
    background:none;
    border:none;
    color:var(--text-muted);
    font-size:13px;
    cursor:pointer;
    padding:6px 4px;
    transition:color 0.2s;
    flex-shrink:0;
}

.btn-prev-v3:not(:disabled):hover { color:var(--primary); }
.btn-prev-v3:disabled { opacity:0.3; cursor:not-allowed; }

.test-progress-dots {
    flex:1;
    display:flex;
    flex-wrap:wrap;
    gap:3px;
    overflow:hidden;
    max-height:36px;
}

.q-dot-v3 {
    width:5px; height:5px;
    border-radius:50%;
    background:#E2E8F0;
    transition:all 0.2s;
}

.q-dot-v3.answered { background:var(--primary); }
.q-dot-v3.current { background:var(--primary); width:8px; height:8px; }

.test-answered-info {
    font-size:11px;
    color:var(--text-muted);
    white-space:nowrap;
    flex-shrink:0;
}

/* ============================================================
   加载分析页
   ============================================================ */
#page-loading {
    background:linear-gradient(160deg, #0F0F1E 0%, #1A1B3A 50%, #1E2A5E 100%);
    justify-content:center;
    align-items:center;
}

.loading-scene-v3 {
    text-align:center;
    padding:40px 24px;
}

.loading-visual-v3 {
    margin-bottom:28px;
    animation:loadFloat 3s ease-in-out infinite;
}

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

.loading-title-v3 {
    font-size:24px;
    font-weight:800;
    color:white;
    margin-bottom:8px;
}

.loading-desc-v3 {
    font-size:15px;
    color:rgba(255,255,255,0.5);
    line-height:1.7;
    margin-bottom:28px;
}

.loading-desc-v3 strong { color:#a5b4fc; }

.loading-steps-v3 {
    display:flex;
    flex-direction:column;
    gap:10px;
    max-width:200px;
    margin:0 auto;
}

.load-step-v3 {
    display:flex;
    align-items:center;
    gap:8px;
    color:rgba(255,255,255,0.3);
    font-size:14px;
}

.load-step-v3.done { color:var(--success); }
.load-step-v3.active { color:#a5b4fc; }

.spin { animation:spinIcon 1.5s linear infinite; }
@keyframes spinIcon { from{transform:rotate(0);} to{transform:rotate(360deg);} }

/* ============================================================
   结果页
   ============================================================ */
#page-result { background:var(--bg-main); }

/* 人格Hero区 */
.result-hero-v3 {
    padding:48px 24px 36px;
    text-align:center;
    position:relative;
    overflow:hidden;
}

.result-hero-v3::before {
    content:'';
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(99,102,241,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99,102,241,0.03) 1px, transparent 1px);
    background-size:32px 32px;
}

.result-hero-content-v3 {
    position:relative;
    z-index:1;
    animation:fadeInUpV3 0.8s var(--ease-out);
}

.hero-completion-badge-v3 {
    display:inline-flex;
    align-items:center;
    gap:5px;
    background:rgba(16,185,129,0.12);
    border:1px solid rgba(16,185,129,0.25);
    color:#6EE7B7;
    padding:5px 12px;
    border-radius:20px;
    font-size:12px;
    font-weight:500;
    margin-bottom:18px;
}

.hero-type-display-v3 {
    margin-bottom:12px;
}

.hero-type-icon-v3 {
    font-size:56px;
    margin-bottom:8px;
    display:block;
    animation:iconBounce 0.6s var(--ease-spring);
}

@keyframes iconBounce {
    0% { transform:scale(0) rotate(-180deg); opacity:0; }
    100% { transform:scale(1) rotate(0); opacity:1; }
}

.hero-mbti-letter-v3 {
    font-size:68px;
    font-weight:900;
    letter-spacing:6px;
    background:linear-gradient(135deg, var(--type-color, #a5b4fc), var(--type-color-2, #818cf8));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    display:block;
    line-height:1;
    margin-bottom:6px;
    filter:drop-shadow(0 0 20px var(--type-glow, rgba(165,180,252,0.3)));
}

.hero-type-name-v3 {
    font-size:22px;
    font-weight:700;
    color:white;
    margin-bottom:4px;
}

.hero-type-alias-v3 {
    font-size:14px;
    color:rgba(255,255,255,0.4);
    letter-spacing:2px;
}

.hero-type-summary-v3 {
    max-width:360px;
    margin:16px auto 0;
    font-size:14px;
    color:rgba(255,255,255,0.6);
    line-height:1.7;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:12px;
    padding:14px 16px;
}

/* 快速导航 */
.result-nav-v3 {
    display:flex;
    gap:0;
    background:white;
    border-bottom:1px solid rgba(0,0,0,0.05);
    padding:0 12px;
    overflow-x:auto;
    position:sticky;
    top:0;
    z-index:10;
    -webkit-overflow-scrolling:touch;
}

.nav-item-v3 {
    padding:12px 14px;
    font-size:13px;
    font-weight:500;
    color:var(--text-muted);
    text-decoration:none;
    white-space:nowrap;
    border-bottom:2px solid transparent;
    transition:all 0.2s;
}

.nav-item-v3:hover, .nav-item-v3.active {
    color:var(--primary);
    border-bottom-color:var(--primary);
}

/* 结果主体 */
.result-body-v3 {
    padding:16px 14px 80px;
    max-width:640px;
    margin:0 auto;
    width:100%;
}

.result-section-v3 {
    background:white;
    border-radius:var(--radius-lg);
    padding:18px;
    box-shadow:var(--shadow-sm);
    margin-bottom:12px;
    scroll-margin-top:48px;
}

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

.section-icon-v3 {
    width:30px; height:30px;
    border-radius:8px;
    background:var(--primary-glow);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--primary);
    flex-shrink:0;
}

.section-header-v3 h2 {
    font-size:16px;
    font-weight:700;
    color:var(--text-primary);
}

/* 维度分析区 - 雷达图 */
.dim-radar-wrap {
    display:flex;
    flex-direction:column;
    gap:16px;
}

.dim-radar-chart {
    display:flex;
    justify-content:center;
    align-items:center;
}

.dimension-bars-v3 {
    display:flex;
    flex-direction:column;
    gap:12px;
}

.dim-bar-item-v3 {
    background:#F8FAFC;
    border-radius:12px;
    padding:12px;
}

.dim-bar-header-v3 {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:6px;
}

.dim-bar-name-v3 {
    font-size:12px;
    font-weight:600;
    color:var(--text-secondary);
}

.dim-bar-values-v3 {
    font-size:11px;
    color:var(--text-muted);
}

.dim-bar-track-v3 {
    height:8px;
    background:#E2E8F0;
    border-radius:4px;
    overflow:hidden;
    display:flex;
    margin-bottom:4px;
}

.dim-bar-fill-left-v3 {
    height:100%;
    background:linear-gradient(90deg, var(--primary), var(--primary-light));
    border-radius:4px 0 0 4px;
    transition:width 0.8s var(--ease-out);
}

.dim-bar-fill-right-v3 {
    height:100%;
    background:linear-gradient(90deg, var(--accent-light), var(--accent));
    border-radius:0 4px 4px 0;
    transition:width 0.8s var(--ease-out);
}

.dim-bar-labels-v3 {
    display:flex;
    justify-content:space-between;
    font-size:10px;
}

.dim-bar-labels-v3 span:first-child { color:var(--primary); font-weight:600; }
.dim-bar-labels-v3 span:last-child { color:var(--accent); font-weight:600; }

/* 总结卡片 */
.summary-card-v3 {
    background:linear-gradient(135deg, #F8FAFC, #F1F5F9);
    border-radius:var(--radius-md);
    padding:16px;
    border-left:3px solid var(--primary);
}

.summary-card-v3 p {
    font-size:14px;
    color:var(--text-secondary);
    line-height:1.8;
}

/* 优劣势 */
.strength-weakness-v3 {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.sw-card-v3 {
    border-radius:var(--radius-md);
    padding:14px;
}

.sw-pro-v3 {
    background:linear-gradient(135deg, rgba(16,185,129,0.08), rgba(16,185,129,0.03));
    border:1px solid rgba(16,185,129,0.12);
}

.sw-growth-v3 {
    background:linear-gradient(135deg, rgba(245,158,11,0.08), rgba(245,158,11,0.03));
    border:1px solid rgba(245,158,11,0.12);
}

.sw-card-header-v3 {
    display:flex;
    align-items:center;
    gap:5px;
    font-size:13px;
    font-weight:700;
    margin-bottom:8px;
}

.sw-pro-v3 .sw-card-header-v3 { color:var(--success); }
.sw-growth-v3 .sw-card-header-v3 { color:var(--warning); }

.sw-card-v3 ul {
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:5px;
}

.sw-card-v3 ul li {
    font-size:12px;
    color:var(--text-secondary);
    padding-left:10px;
    position:relative;
    line-height:1.5;
}

.sw-card-v3 ul li::before {
    content:'·';
    position:absolute;
    left:0;
    font-weight:700;
}

.sw-pro-v3 ul li::before { color:var(--success); }
.sw-growth-v3 ul li::before { color:var(--warning); }

/* 职业标签 */
.career-tags-v3 {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.career-tag-v3 {
    background:linear-gradient(135deg, rgba(99,102,241,0.08), rgba(129,140,248,0.04));
    border:1px solid rgba(99,102,241,0.12);
    color:var(--primary-dark);
    padding:6px 14px;
    border-radius:20px;
    font-size:13px;
    font-weight:500;
}

/* 人际关系 */
.relationship-card-v3 {
    display:flex;
    flex-direction:column;
    gap:8px;
}

.rel-item-v3 {
    background:#F8FAFC;
    border-radius:10px;
    padding:10px 12px;
    font-size:13px;
    color:var(--text-secondary);
    line-height:1.6;
}

.rel-cp-section {
    margin-top:8px;
    padding:12px;
    background:linear-gradient(135deg, rgba(236,72,153,0.06), rgba(244,114,182,0.03));
    border:1px solid rgba(236,72,153,0.1);
    border-radius:12px;
}

.rel-cp-title {
    font-size:13px;
    font-weight:700;
    color:var(--accent);
    margin-bottom:8px;
    display:flex;
    align-items:center;
    gap:4px;
}

.rel-cp-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
}

.rel-cp-item {
    background:white;
    border-radius:10px;
    padding:10px;
    text-align:center;
}

.rel-cp-badge {
    font-size:10px;
    font-weight:700;
    padding:2px 8px;
    border-radius:20px;
    display:inline-block;
    margin-bottom:4px;
}

.rel-cp-badge.best { background:rgba(16,185,129,0.1); color:var(--success); }
.rel-cp-badge.good { background:rgba(99,102,241,0.1); color:var(--primary); }

.rel-cp-code {
    font-size:16px;
    font-weight:800;
    color:var(--text-primary);
}

.rel-cp-name {
    font-size:11px;
    color:var(--text-muted);
}

/* 成长建议 */
.growth-card-v3 {
    display:flex;
    flex-direction:column;
    gap:8px;
}

.growth-item-v3 {
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:10px;
    background:#F8FAFC;
    border-radius:10px;
}

.growth-item-num-v3 {
    width:22px; height:22px;
    border-radius:50%;
    background:var(--primary);
    color:white;
    font-size:11px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.growth-item-text-v3 {
    font-size:13px;
    color:var(--text-secondary);
    line-height:1.6;
}

/* 付费墙 */
.paywall-section-v3 { padding:0; margin:16px 0; }

.paywall-inner-v3 {
    background:linear-gradient(160deg, #0F0F1E 0%, #1A1B3A 50%, #1E2A5E 100%);
    border-radius:var(--radius-lg);
    padding:28px 22px;
    text-align:center;
    position:relative;
    overflow:hidden;
    border:1px solid rgba(99,102,241,0.2);
}

.paywall-glow-v3 {
    position:absolute;
    width:300px; height:300px;
    background:radial-gradient(circle, rgba(99,102,241,0.2) 0%, transparent 70%);
    top:-100px;
    left:50%;
    transform:translateX(-50%);
    pointer-events:none;
}

.paywall-badge-v3 {
    display:inline-flex;
    align-items:center;
    gap:5px;
    background:rgba(250,204,21,0.12);
    border:1px solid rgba(250,204,21,0.25);
    color:var(--gold);
    padding:5px 12px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
    margin-bottom:12px;
    position:relative;
}

.paywall-title-v3 {
    font-size:20px;
    font-weight:800;
    color:white;
    margin-bottom:6px;
    position:relative;
}

.paywall-desc-v3 {
    font-size:13px;
    color:rgba(255,255,255,0.5);
    margin-bottom:16px;
    position:relative;
}

.paywall-features-v3 {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:6px;
    margin-bottom:18px;
    position:relative;
}

.pf-item-v3 {
    display:inline-flex;
    align-items:center;
    gap:4px;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.08);
    color:rgba(255,255,255,0.65);
    padding:4px 10px;
    border-radius:20px;
    font-size:11px;
}

.pf-item-v3 i { color:var(--success); }

.paywall-price-row-v3 { margin-bottom:16px; position:relative; }

.price-main-v3 {
    font-size:36px;
    font-weight:900;
    color:white;
}

.price-note-v3 {
    font-size:12px;
    color:rgba(255,255,255,0.35);
    display:block;
    margin-top:2px;
}

.btn-unlock-v3 {
    width:100%;
    padding:14px;
    background:linear-gradient(135deg, #F59E0B, #FCD34D);
    color:#1a1a2e;
    border:none;
    border-radius:50px;
    font-size:16px;
    font-weight:800;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    box-shadow:0 4px 20px rgba(245,158,11,0.35);
    transition:all 0.3s var(--ease-out);
    position:relative;
}

.btn-unlock-v3:hover {
    transform:translateY(-2px);
    box-shadow:0 8px 28px rgba(245,158,11,0.45);
}

/* 完整报告iframe */
.report-iframe-wrap-v3 {
    border-radius:var(--radius-md);
    overflow:hidden;
    border:1px solid #E2E8F0;
}

.report-iframe-wrap-v3 iframe {
    display:block;
    min-height:600px;
}

/* 分享区 */
.share-section-v3 {
    background:linear-gradient(135deg, rgba(99,102,241,0.03), rgba(236,72,153,0.03));
    border:1px solid rgba(99,102,241,0.08);
}

.share-header-v3 { text-align:center; margin-bottom:14px; }
.share-header-v3 h2 { font-size:17px; font-weight:700; color:var(--text-primary); margin-bottom:3px; }
.share-header-v3 p { font-size:12px; color:var(--text-muted); }

.share-cards-v3 {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(130px, 1fr));
    gap:10px;
    margin-bottom:14px;
}

.share-card-item-v3 {
    background:white;
    border-radius:var(--radius-md);
    overflow:hidden;
    box-shadow:var(--shadow-sm);
    border:1px solid #E2E8F0;
    cursor:pointer;
    transition:all 0.2s;
}

.share-card-item-v3:hover {
    transform:translateY(-2px);
    box-shadow:var(--shadow-md);
}

.share-card-preview-v3 {
    height:90px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:36px;
}

.share-card-label-v3 {
    padding:6px 10px;
    font-size:11px;
    color:var(--text-secondary);
    font-weight:600;
    background:#F8FAFC;
    text-align:center;
}

.share-actions-v3 {
    display:flex;
    gap:8px;
    margin-bottom:14px;
}

.btn-share-primary-v3 {
    flex:1;
    padding:12px;
    background:linear-gradient(135deg, #07C160, #06AD56);
    color:white;
    border:none;
    border-radius:50px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    box-shadow:0 4px 16px rgba(7,193,96,0.25);
    transition:all 0.2s;
}

.btn-share-primary-v3:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(7,193,96,0.35); }

.btn-share-secondary-v3 {
    flex:1;
    padding:12px;
    background:white;
    color:var(--text-primary);
    border:1.5px solid #E2E8F0;
    border-radius:50px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    transition:all 0.2s;
}

.btn-share-secondary-v3:hover { border-color:var(--primary-light); color:var(--primary); }

.share-qr-area {
    text-align:center;
    margin-bottom:14px;
}

.share-qr-area img {
    width:120px; height:120px;
    border-radius:8px;
    border:1px solid #E2E8F0;
}

.share-qr-tip {
    font-size:11px;
    color:var(--text-muted);
    margin-top:4px;
}

.share-retry-v3 { text-align:center; }

.btn-retry-v3 {
    background:none;
    border:none;
    color:var(--text-muted);
    font-size:13px;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:8px 16px;
    border-radius:20px;
    transition:all 0.2s;
}

.btn-retry-v3:hover { color:var(--primary); background:var(--primary-glow); }

/* ============================================================
   弹窗
   ============================================================ */
.modal-v3 {
    position:fixed;
    inset:0;
    background:var(--bg-overlay);
    display:flex;
    align-items:flex-end;
    justify-content:center;
    z-index:1000;
    padding:0;
    backdrop-filter:blur(4px);
}

.modal-content-v3 {
    background:white;
    border-radius:var(--radius-xl) var(--radius-xl) 0 0;
    padding:24px;
    width:100%;
    max-width:500px;
    position:relative;
    max-height:90vh;
    overflow-y:auto;
    animation:slideUpV3 0.35s var(--ease-out);
}

@keyframes slideUpV3 {
    from { transform:translateY(100%); }
    to { transform:translateY(0); }
}

.modal-close-v3 {
    position:absolute;
    top:14px; right:14px;
    background:#F1F5F9;
    border:none;
    width:32px; height:32px;
    border-radius:50%;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--text-secondary);
    transition:all 0.2s;
}

.modal-close-v3:hover { background:#E2E8F0; color:var(--text-primary); }

.modal-tip-v3 {
    text-align:center;
    font-size:12px;
    color:var(--text-muted);
    margin-top:10px;
}

/* 支付弹窗 */
.payment-modal-v3 { max-width:420px; }

.payment-header-v3 {
    text-align:center;
    margin-bottom:18px;
    padding-top:6px;
}

.pay-icon-wrap-v3 {
    width:52px; height:52px;
    border-radius:14px;
    background:linear-gradient(135deg, var(--primary-glow), rgba(129,140,248,0.08));
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--primary);
    margin:0 auto 10px;
}

.payment-header-v3 h3 {
    font-size:17px;
    font-weight:700;
    color:var(--text-primary);
    margin-bottom:3px;
}

.payment-price-v3 {
    font-size:26px;
    font-weight:900;
    color:var(--text-primary);
}

.payment-price-v3 span {
    font-size:12px;
    font-weight:400;
    color:var(--text-muted);
}

.payment-qr-grid-v3 {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-bottom:14px;
}

.payment-qr-item-v3 { text-align:center; }

.qr-label-v3 {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    font-size:12px;
    font-weight:600;
    color:var(--text-secondary);
    margin-bottom:8px;
}

.qr-container-v3 {
    background:#F8FAFC;
    border:1px dashed #CBD5E1;
    border-radius:var(--radius-sm);
    min-height:110px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--text-muted);
    font-size:11px;
    margin-bottom:5px;
}

.qr-tip-v3 { font-size:10px; color:var(--text-muted); }

.payment-status-v3 {
    text-align:center;
    padding:10px;
    border-radius:var(--radius-sm);
    font-size:14px;
    margin-bottom:10px;
}

.payment-status-v3.success {
    background:rgba(16,185,129,0.1);
    color:var(--success);
}

.btn-confirm-paid-v3 {
    width:100%;
    padding:13px;
    background:var(--primary);
    color:white;
    border:none;
    border-radius:50px;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    transition:all 0.2s;
    margin-bottom:8px;
}

.btn-confirm-paid-v3:hover { background:var(--primary-dark); }

.payment-note-v3 {
    text-align:center;
    font-size:11px;
    color:var(--text-muted);
}

/* 退出确认弹窗 */
.exit-modal-v3 {
    max-width:360px;
    text-align:center;
    padding:28px 24px;
}

.exit-icon-wrap {
    width:56px; height:56px;
    border-radius:50%;
    background:rgba(245,158,11,0.1);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--warning);
    margin:0 auto 14px;
}

.exit-modal-v3 h3 {
    font-size:17px;
    font-weight:700;
    color:var(--text-primary);
    margin-bottom:6px;
}

.exit-modal-v3 p {
    font-size:14px;
    color:var(--text-muted);
    margin-bottom:18px;
}

.exit-actions {
    display:flex;
    gap:10px;
}

.btn-exit-cancel {
    flex:1;
    padding:12px;
    background:white;
    border:1.5px solid #E2E8F0;
    border-radius:50px;
    font-size:14px;
    font-weight:600;
    color:var(--text-primary);
    cursor:pointer;
    transition:all 0.2s;
}

.btn-exit-cancel:hover { border-color:var(--primary); color:var(--primary); }

.btn-exit-confirm {
    flex:1;
    padding:12px;
    background:var(--error);
    border:none;
    border-radius:50px;
    font-size:14px;
    font-weight:600;
    color:white;
    cursor:pointer;
    transition:all 0.2s;
}

.btn-exit-confirm:hover { background:#DC2626; }

/* ============================================================
   Toast
   ============================================================ */
.toast-v3 {
    position:fixed;
    bottom:80px;
    left:50%;
    transform:translateX(-50%) translateY(20px);
    background:rgba(15,23,42,0.9);
    color:white;
    padding:10px 20px;
    border-radius:50px;
    font-size:14px;
    font-weight:500;
    opacity:0;
    pointer-events:none;
    transition:all 0.3s var(--ease-out);
    z-index:2000;
    white-space:nowrap;
    backdrop-filter:blur(8px);
}

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

/* ============================================================
   关于我们
   ============================================================ */
#page-about { background:var(--bg-main); }

.about-topbar-v3 {
    background:white;
    padding:12px 16px;
    border-bottom:1px solid rgba(0,0,0,0.05);
    display:flex;
    align-items:center;
    gap:10px;
    position:sticky;
    top:0;
    z-index:10;
}

.about-topbar-v3 button {
    background:none;
    border:none;
    color:var(--primary);
    font-size:15px;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:4px;
    font-weight:500;
}

.about-topbar-v3 h2 {
    font-size:17px;
    font-weight:700;
    color:var(--text-primary);
}

.about-body-v3 {
    padding:20px 14px 80px;
    max-width:600px;
    margin:0 auto;
}

.about-section-v3 {
    background:white;
    border-radius:var(--radius-lg);
    padding:18px;
    box-shadow:var(--shadow-sm);
    margin-bottom:12px;
}

.about-section-v3 h3 {
    font-size:16px;
    font-weight:700;
    color:var(--text-primary);
    margin-bottom:10px;
}

.about-section-v3 p {
    font-size:14px;
    color:var(--text-secondary);
    line-height:1.8;
}

.about-crowd-grid-v3 {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.crowd-item-v3 {
    background:#F8FAFC;
    border-radius:var(--radius-md);
    padding:14px;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
}

.crowd-icon-v3 {
    width:36px; height:36px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
}

.crowd-item-v3 strong { font-size:13px; color:var(--text-primary); }
.crowd-item-v3 span { font-size:11px; color:var(--text-muted); }

.about-contact-v3 {
    text-align:center;
    padding:14px;
    background:#F8FAFC;
    border-radius:var(--radius-md);
    font-size:14px;
    color:var(--text-secondary);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
}

.about-contact-v3 i { color:var(--primary); }

/* 关于入口 */
.about-entry-v3 {
    position:fixed;
    bottom:0; left:0; right:0;
    text-align:center;
    padding:8px;
    background:linear-gradient(transparent, rgba(248,250,252,0.95));
    z-index:5;
}

.about-entry-v3 a {
    color:var(--text-muted);
    text-decoration:none;
    font-size:11px;
    display:inline-flex;
    align-items:center;
    gap:4px;
    transition:color 0.2s;
}

.about-entry-v3 a:hover { color:var(--primary); }

/* ============================================================
   响应式
   ============================================================ */
@media (min-width:640px) {
    .hero-content-v3 { max-width:520px; padding:32px 24px 0; }
    .hero-title-v3 { font-size:46px; }
    .hero-personality-grid { width:220px; height:220px; }
    .test-body-v3 { padding:32px 24px; }
    .result-body-v3 { padding:24px 20px 80px; }
    .hero-features-v3 { gap:10px; }
    .feat-card-v3 { padding:14px; }
}

@media (max-width:360px) {
    .hero-title-v3 { font-size:34px; }
    .hero-stats-v3 { gap:14px; padding:12px 14px; }
    .hero-features-v3 { grid-template-columns:1fr; }
    .hero-personality-wall { grid-template-columns:repeat(4, 1fr); gap:4px; }
    .share-cards-v3 { grid-template-columns:repeat(2, 1fr); }
    .strength-weakness-v3 { gap:8px; }
}