/* ============================================
   青少年心理类型测评 - 方案C精致融合风格
   版本: 8.2 (含语音功能)
   ============================================ */

/* ========== 设计令牌 ========== */
:root {
    --primary: #5B8FB9;
    --primary-soft: #EEF5FA;
    --primary-dark: #4A7A9E;
    --accent-orange: #F5A574;
    --accent-orange-soft: #FFF4ED;
    --accent-blue: #5B8FB9;
    --accent-blue-soft: #EEF5FA;
    --accent-lavender: #B4A7D6;
    --accent-rose: #E8919A;
    --bg: #F8F9FB;
    --bg-card: #FFFFFF;
    --text: #2C2C2C;
    --text-sub: #5A5A5A;
    --text-hint: #9A9A9A;
    --line: #E5E5E5;
    --line-dash: #D0D0D0;
    --success: #22C55E;
    --warning: #F59E0B;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-full: 9999px;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.06);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.08);
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --duration: 0.25s;
    /* 彩虹渐变 */
    --rainbow: linear-gradient(135deg, #FF6B6B, #FFA94D, #FFE066, #69DB7C, #4DABF7, #9775FA);
    --rainbow-light: linear-gradient(135deg, rgba(255,107,107,0.15), rgba(255,169,77,0.15), rgba(255,224,102,0.15), rgba(105,219,124,0.15), rgba(77,171,247,0.15), rgba(151,117,250,0.15));
}

.theme-parent {
    --primary: #F5A574;
    --primary-soft: #FFF4ED;
    --primary-dark: #E8925E;
}

/* ========== 基础重置 ========== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
body {
    font-family: 'Nunito', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
}

/* ========== 页面系统 ========== */
.page { display: none; min-height: 100vh; flex-direction: column; animation: pageIn 0.4s var(--ease); }
.page.active { display: flex; }
@keyframes pageIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ========== 卡片系统 ========== */
.card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.card-outlined {
    background: var(--bg-card);
    border: 2px dashed var(--line-dash);
    border-radius: var(--radius-lg);
    position: relative;
}
.card-outlined::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--bg-card);
    border: 2px solid var(--line-dash);
    border-radius: 50%;
    top: -6px;
    left: 24px;
}

/* ========== 装饰元素 ========== */
.decor-dot {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.decor-dot.sm { width: 6px; height: 6px; }
.decor-dot.md { width: 10px; height: 10px; }
.decor-dot.teal { background: var(--accent-blue); }
.decor-dot.peach { background: var(--accent-orange); }
.decor-dot.lavender { background: var(--accent-lavender); }
.decor-dot.rose { background: var(--accent-rose); }

.decor-diamond {
    position: absolute;
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
    pointer-events: none;
}
.decor-diamond.teal { background: var(--accent-blue); }
.decor-diamond.peach { background: var(--accent-orange); }

/* ========== 按钮系统 ========== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    border: none;
    border-radius: var(--radius-md);
    font: 600 14px/1 'Nunito', 'Noto Sans SC', sans-serif;
    cursor: pointer;
    transition: all var(--duration) var(--ease);
}
.btn-primary {
    background: var(--primary);
    color: white;
    box-shadow: 0 4px 14px rgba(91, 143, 185, 0.3);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(91, 143, 185, 0.4); }
.btn-orange { background: var(--accent-orange); color: white; }
.btn-soft { background: var(--primary-soft); color: var(--primary); }
.btn-soft:hover { background: #E0EBF3; }
.btn-outline { background: transparent; border: 2px solid var(--line); color: var(--text-sub); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

/* ========== 标签胶囊 ========== */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 600;
}
.pill-blue { background: var(--accent-blue-soft); color: var(--accent-blue); }
.pill-orange { background: var(--accent-orange-soft); color: var(--accent-orange); }

/* ========== 进度条 ========== */
.progress-track {
    height: 8px;
    background: var(--line);
    border-radius: 4px;
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    border-radius: 4px;
    background: var(--rainbow);
    transition: width 0.3s var(--ease);
}

/* ========== 圆环进度 ========== */
.ring-progress {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: conic-gradient(var(--ring-color, var(--accent-orange)) calc(var(--pct, 0) * 3.6deg), var(--line) 0);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.ring-progress::before {
    content: '';
    position: absolute;
    width: 56px;
    height: 56px;
    background: var(--bg-card);
    border-radius: 50%;
}
.ring-value {
    position: relative;
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
}

/* ========== Toast提示 ========== */
.toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--text);
    color: white;
    padding: 12px 24px;
    border-radius: var(--radius-full);
    font-size: 14px;
    font-weight: 600;
    z-index: 9999;
    opacity: 0;
    transition: all 0.3s var(--ease);
    box-shadow: var(--shadow-lg);
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* ==================== 首页 ==================== */
.home-page {
    padding: 20px 20px 20px;
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    max-width: 480px;
    margin: 0 auto;
}

/* 装饰星星爱心 */
.decor-star, .decor-heart {
    position: absolute;
    pointer-events: none;
    font-size: 14px;
}
.decor-star { color: var(--accent-orange); }
.decor-heart { color: var(--accent-rose); }
.home-page .decor-star.d1 { top: 50px; right: 30px; font-size: 16px; }
.home-page .decor-heart.d2 { top: 90px; left: 25px; font-size: 12px; }
.home-page .decor-star.d3 { top: 130px; right: 50px; font-size: 10px; }
.home-page .decor-heart.d4 { top: 160px; left: 50px; font-size: 14px; }

.home-brand {
    text-align: center;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}
.home-brand-name {
    font-size: 18px;
    font-weight: 800;
    color: #6AABB8;
    margin-bottom: 2px;
}
.home-brand-sub {
    font-size: 14px;
    color: var(--text-sub);
}

.home-feature {
    padding: 20px;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}
.feature-avatars {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
}
.feature-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 3px solid transparent;
    margin: 0 -5px;
    background: var(--rainbow);
    position: relative;
}
.feature-avatar::before {
    content: '';
    position: absolute;
    inset: 3px;
    background: var(--bg-card);
    border-radius: 50%;
}
.feature-avatar:nth-child(1) { background: linear-gradient(135deg, #FF6B6B, #FFA94D); }
.feature-avatar:nth-child(2) { background: linear-gradient(135deg, #FFA94D, #FFE066); z-index: 1; }
.feature-avatar:nth-child(3) { background: linear-gradient(135deg, #69DB7C, #4DABF7); z-index: 2; }
.feature-avatar:nth-child(4) { background: linear-gradient(135deg, #4DABF7, #9775FA); }

.feature-content { text-align: center; }
.feature-title { font-size: 17px; font-weight: 700; margin-bottom: 6px; color: var(--text); }
.feature-desc { font-size: 13px; color: var(--text-sub); margin-bottom: 12px; }
.feature-pills { display: flex; justify-content: center; gap: 8px; }

.home-entries {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    z-index: 1;
    flex: 1;
}

.entry-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    cursor: pointer;
    transition: all var(--duration) var(--ease);
}
.entry-card:hover { transform: translateX(4px); }
.entry-card:active { transform: scale(0.98); }

.entry-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.entry-card.child .entry-icon { background: var(--accent-blue-soft); }
.entry-card.parent .entry-icon { background: var(--accent-orange-soft); }
.entry-card.compare .entry-icon { background: var(--rainbow-light); }

.entry-body { flex: 1; }
.entry-title { font-weight: 700; font-size: 15px; margin-bottom: 2px; color: var(--text); }
.entry-hint { font-size: 12px; color: var(--text-hint); }

.entry-arrow {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-hint);
    font-size: 13px;
}

/* 继续测试提示 */
.resume-section {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    z-index: 1;
}
.resume-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--accent-blue-soft);
    border: 1px solid rgba(91, 143, 185, 0.2);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration);
}
.resume-btn:hover { background: #D9EAF5; }
.resume-text { font-size: 13px; font-weight: 600; color: var(--accent-blue); }

/* 页脚版权 */
.footer-copyright {
    text-align: center;
    padding: 16px 20px;
    font-size: 10px;
    color: var(--text-hint);
    position: relative;
    z-index: 1;
    white-space: nowrap;
}

/* 轨迹码样式 */
.trace-code {
    text-align: center;
    font-size: 11px;
    color: #9A9A9A;
    line-height: 1.5;
    margin-top: 4px;
    margin-bottom: -12px;
    padding: 8px 12px;
    background: #FAFAFA;
    border-radius: 8px;
    cursor: pointer;
    user-select: all;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    letter-spacing: -0.3px;
}
.trace-code:active {
    background: #F0F0F0;
}

/* ==================== 提示引导页 ==================== */
.intro-page {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    min-height: 100vh;
    background: linear-gradient(180deg, #FFF9F5 0%, #F8F9FB 100%);
}
.intro-card {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    padding: 36px 28px;
    width: 100%;
    max-width: 420px;
    text-align: center;
    box-shadow: var(--shadow-md);
}
.intro-emoji { font-size: 48px; margin-bottom: 16px; }
.intro-title { font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 20px; }
.intro-text { text-align: left; color: var(--text-sub); font-size: 14px; line-height: 1.9; margin-bottom: 24px; }
.intro-text p { margin-bottom: 12px; }
.intro-text strong { color: var(--primary); }
.intro-highlight { color: #E8945A; font-weight: 600; text-align: center; margin-top: 16px !important; font-size: 15px; }
.intro-btns { display: flex; flex-direction: column; gap: 10px; }

/* ==================== 昵称输入页 ==================== */
.name-page {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    min-height: 100vh;
}
.name-card {
    padding: 36px 28px;
    width: 100%;
    max-width: 380px;
    text-align: center;
}
.name-card h2 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.name-card p { color: var(--text-sub); margin-bottom: 24px; font-size: 14px; }
.name-input {
    width: 100%;
    padding: 14px 18px;
    font: 500 16px 'Nunito', 'Noto Sans SC', sans-serif;
    background: var(--bg);
    border: 2px solid var(--line);
    border-radius: var(--radius-md);
    text-align: center;
    transition: all var(--duration);
    margin-bottom: 20px;
    color: var(--text);
}
.name-input:focus { outline: none; border-color: var(--primary); background: var(--bg-card); }
.name-input::placeholder { color: var(--text-hint); }
.name-btns { display: flex; flex-direction: column; gap: 10px; }

/* ==================== 答题页 ==================== */
.quiz-page {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.quiz-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(248, 249, 251, 0.95);
    backdrop-filter: blur(10px);
    padding: 12px 20px;
    border-bottom: 1px solid var(--line);
}
.quiz-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    position: relative;
}
.quiz-part-label {
    font-weight: 700;
    color: var(--primary);
    font-size: 14px;
}

.quiz-progress { margin-bottom: 0; }
.progress-info {
    display: flex;
    justify-content: center;
    font-size: 13px;
    color: var(--text-sub);
    margin-top: 6px;
}

.quiz-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 24px 20px 100px;
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
}

.question-card { 
    animation: slideIn 0.3s var(--ease);
    padding-top: 16px;
}
@keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }

.quiz-tip {
    text-align: center;
    color: var(--text-hint);
    font-size: 12px;
    margin-bottom: 16px;
    padding: 10px 16px;
    background: rgba(245, 165, 116, 0.1);
    border-radius: var(--radius-md);
    line-height: 1.6;
}

.question-text {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.8;
    margin-bottom: 20px;
    color: var(--text);
    text-align: center;
    min-height: 60px;
    padding-top: 8px;
}

/* BP选项 */
.bp-options { display: flex; flex-direction: column; gap: 10px; }
.bp-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: var(--bg-card);
    border: 2px solid var(--line);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration);
}
.bp-option:hover { border-color: var(--primary); }
.bp-option.selected { border-color: var(--primary); background: var(--primary-soft); }

.bp-check {
    width: 26px;
    height: 26px;
    border: 2px solid var(--line);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: transparent;
    flex-shrink: 0;
}
.bp-option.selected .bp-check { background: var(--success); border-color: var(--success); color: white; }

.bp-text { flex: 1; font-size: 15px; line-height: 1.6; color: var(--text-sub); }
.bp-option.selected .bp-text { color: var(--text); }

/* Likert选项 */
.likert-options { display: flex; flex-direction: column; gap: 8px; }
.likert-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 2px solid var(--line);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration);
}
.likert-option:hover { border-color: var(--primary); }
.likert-option.selected { border-color: var(--primary); background: var(--primary-soft); }

.likert-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    border: 2px solid var(--line);
    background: var(--bg-card);
}
.likert-option.selected .likert-dot {
    background: var(--success);
    border-color: var(--success);
}
.likert-option.selected .likert-dot::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
}

.likert-text { font-size: 15px; color: var(--text-sub); }
.likert-option.selected .likert-text { color: var(--text); font-weight: 600; }

.quiz-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 20px;
    background: rgba(248, 249, 251, 0.95);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: center;
}
.footer-back-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-full);
    font-size: 14px;
    color: var(--text-sub);
    cursor: pointer;
}
.footer-back-btn:hover { border-color: var(--primary); color: var(--primary); }
.footer-back-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ==================== 结果页 ==================== */
.result-page {
    padding: 20px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.result-container {
    max-width: 520px;
    width: 100%;
    margin: 0 auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 8px;
}

/* 详情页标题样式 */
.detail-page-title {
    text-align: center;
    margin-bottom: 20px;
}
.detail-page-brand {
    font-size: 15px;
    font-weight: 600;
    color: #6A8A9A;
    margin-bottom: 2px;
}
.detail-page-subtitle {
    font-size: 12px;
    color: #9A9A9A;
    white-space: nowrap;
}

/* 亲子对比页标题样式 */
.compare-page-title {
    text-align: center;
    margin-bottom: 16px;
    padding-top: 8px;
}
.compare-page-brand {
    font-size: 17px;
    font-weight: 700;
    color: var(--accent-blue);
    margin-bottom: 4px;
}
.compare-page-subtitle {
    font-size: 13px;
    color: var(--text-sub);
    white-space: nowrap;
}

/* 结果页新标题样式 */
.result-header-new {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0 20px;
}
.result-header-new .nav-back {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--bg-card);
    border: none;
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
}
.result-header-new .nav-placeholder {
    width: 42px;
    flex-shrink: 0;
}
.result-header-title {
    text-align: center;
    flex: 1;
}
.result-header-brand {
    font-size: 17px;
    font-weight: 700;
    color: var(--accent-blue);
    margin-bottom: 2px;
}
.result-header-subtitle {
    font-size: 13px;
    color: var(--text-sub);
    white-space: nowrap;
}

.result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.result-header h2 { font-size: 18px; font-weight: 700; }

.result-type-card {
    text-align: center;
    padding: 28px 20px;
    margin-bottom: 16px;
    background: var(--rainbow-light);
    border-radius: var(--radius-lg);
    position: relative;
}
.type-code {
    font-size: 48px;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: 4px;
}
.type-name {
    font-size: 16px;
    color: var(--text-sub);
    margin-top: 8px;
    font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    font-weight: 500;
    letter-spacing: 1px;
}
.warning-badge {
    display: inline-block;
    margin-top: 12px;
    padding: 8px 16px;
    background: #FEF3C7;
    color: #B45309;
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 600;
}

.section-card {
    padding: 16px 10px;
    margin-bottom: 14px;
}
.section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-sub);
    margin-bottom: 16px;
}

/* 功能条 */
.func-bars { display: flex; flex-direction: column; gap: 8px; }
.func-bar { display: flex; align-items: center; gap: 10px; }
.func-label {
    width: 28px;
    font-weight: 700;
    font-size: 12px;
    color: #5A5A5A;
    text-align: right;
    flex-shrink: 0;
}
.func-track {
    flex: 1;
    height: 10px;
    background: #F0F0F0;
    border-radius: 5px;
    overflow: hidden;
}
.func-fill {
    height: 100%;
    border-radius: 5px;
    background: #A8D4E6;
    transition: width 0.6s var(--ease);
}
.func-fill.highlight { background: linear-gradient(90deg, #FF6B6B, #FFA94D, #FFE066, #69DB7C, #4DABF7, #9775FA); }
.func-value {
    width: 28px;
    font-size: 12px;
    font-weight: 600;
    color: #5A5A5A;
    text-align: right;
    flex-shrink: 0;
}

/* 按钮网格 */
.action-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 20px;
}
.action-grid .btn { padding: 14px 12px; font-size: 13px; }

/* ==================== 详情页 ==================== */
.detail-page {
    background: var(--bg-card);
    min-height: 100vh;
}
.detail-header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--line);
}
.detail-back {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-sub);
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
}
.detail-back:hover { color: var(--primary); }
.detail-save {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--primary);
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
}

.detail-content {
    padding: 24px 20px;
    max-width: 600px;
    margin: 0 auto;
}

/* 类型解读 - 类型展示卡片 */
.detail-type-header {
    text-align: center;
    margin-bottom: 28px;
    padding: 28px 20px;
    background: linear-gradient(135deg, #F8FAFB 0%, #EDF5F7 100%);
    border-radius: 16px;
    border: 1px solid #E6F4F6;
}
.detail-type-header.parent-mode {
    background: linear-gradient(135deg, #FFFAF6 0%, #FFF5EE 100%);
    border: 1px solid #FFE8D9;
}
.detail-type-code {
    font-size: 42px;
    font-weight: 800;
    color: #5B8FB9;
    margin-bottom: 8px;
    letter-spacing: 2px;
}
.detail-type-code.parent-mode {
    color: #E8945A;
}
.detail-type-name {
    font-size: 16px;
    color: #6A8A9A;
    font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    font-weight: 500;
    letter-spacing: 1px;
}
.detail-type-name.parent-mode {
    color: #B8866A;
}

/* 类型解读 - 段落标题（深灰文字+左边框点缀） */
.detail-section { margin-bottom: 28px; }
.detail-section-title {
    font-size: 16px;
    font-weight: 700;
    color: #3A3A3A;
    margin-bottom: 14px;
    padding: 8px 0 8px 12px;
    border-left: 4px solid #5B8FB9;
    border-bottom: 1px solid #EFEFEF;
    display: flex;
    align-items: center;
}
.detail-section-content {
    color: #5A5A5A;
    line-height: 1.9;
    font-size: 14px;
}
.detail-section-content p { margin-bottom: 10px; }
.detail-subtitle {
    font-weight: 600;
    color: #3A3A3A;
}

/* 类型解读 - 代测版（橙色左边框） */
.detail-section-title.parent-mode {
    border-left-color: #E8945A;
}
.detail-subtitle.parent-mode {
    font-weight: 600;
    color: #3A3A3A;
}

/* ==================== GAP详情页 ==================== */
.gap-detail-header {
    background: var(--rainbow-light);
    padding: 24px;
    text-align: center;
    margin-bottom: 24px;
    border-radius: var(--radius-lg);
}
.gap-detail-title { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.gap-detail-subtitle { font-size: 13px; color: var(--text-sub); }

.gap-detail-card {
    padding: 18px;
    margin-bottom: 14px;
    border-radius: var(--radius-md);
    background: var(--bg);
}

.gap-detail-func {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.gap-detail-func-name { font-size: 18px; font-weight: 800; color: var(--primary); }
.gap-detail-func-label { font-size: 11px; color: var(--primary); }
.gap-detail-func-badge {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    margin-left: auto;
}
.gap-detail-card.type-a .gap-detail-func-badge { background: var(--accent-orange-soft); color: var(--accent-orange); }
.gap-detail-card.type-b .gap-detail-func-badge { background: var(--accent-blue-soft); color: var(--accent-blue); }

.gap-detail-diff { font-size: 12px; color: var(--text-hint); margin-bottom: 10px; }
.gap-detail-title-text { font-size: 15px; font-weight: 700; margin-bottom: 8px; color: var(--text); }
.gap-detail-desc { font-size: 14px; line-height: 1.8; color: var(--text-sub); margin-bottom: 12px; }
.gap-detail-suggestion {
    font-size: 13px;
    color: var(--accent-orange);
    padding: 10px 12px;
    background: var(--accent-orange-soft);
    border-radius: var(--radius-sm);
    line-height: 1.6;
}

/* ==================== 对比页 ==================== */
.compare-header { text-align: center; margin-bottom: 20px; }
.compare-title { font-size: 20px; font-weight: 800; margin-bottom: 4px; }
.compare-subtitle { color: var(--text-sub); font-size: 13px; }

.input-card { padding: 16px; margin-bottom: 10px; }
.input-card-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-sub);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.local-found {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--accent-blue-soft);
    border-radius: var(--radius-sm);
}
.local-found .check { color: var(--accent-blue); font-size: 16px; }
.local-type { font-size: 14px; font-weight: 700; color: var(--primary); }
.local-time { font-size: 11px; color: var(--text-hint); margin-top: 2px; }
.local-empty { color: var(--text-hint); font-size: 14px; }

/* 同频显示 - 简化版(只有圆圈) */
.sync-display-simple { text-align: center; padding: 16px 0; }
.sync-display-simple .sync-circle {
    width: 120px;
    height: 120px;
    margin: 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: conic-gradient(
        #FF6B6B calc(var(--sync, 0) * 0.6deg),
        #FFA94D calc(var(--sync, 0) * 1.2deg),
        #FFE066 calc(var(--sync, 0) * 1.8deg),
        #69DB7C calc(var(--sync, 0) * 2.4deg),
        #4DABF7 calc(var(--sync, 0) * 3deg),
        #9775FA calc(var(--sync, 0) * 3.6deg),
        var(--line) calc(var(--sync, 0) * 3.6deg)
    );
}
.sync-display-simple .sync-circle::before {
    content: '';
    position: absolute;
    width: 96px;
    height: 96px;
    background: var(--bg-card);
    border-radius: 50%;
}

/* 功能对比 - Flexbox布局 */
.func-compare-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    overflow: hidden;
}

.func-header-row {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: 16px;
    width: 100%;
    max-width: 480px;
}
.func-header-cell {
    text-align: center;
}
.func-header-cell.left, .func-header-cell.right {
    flex: 1;
    min-width: 0;
}
.func-header-cell.middle {
    width: 100px;
    flex-shrink: 0;
}
.func-header-type {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 4px;
}
.func-header-type.child { color: var(--accent-orange); }
.func-header-type.parent { color: var(--accent-blue); }
.func-header-label {
    font-size: 11px;
    color: var(--text-hint);
}

.func-rows {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 480px;
}
.func-row {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    width: 100%;
}
.func-bar-cell {
    flex: 1;
    min-width: 0;
    max-width: 140px;
    height: 12px;
    background: #EFEFEF;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}
.func-val-cell {
    width: 32px;
    flex-shrink: 0;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #5A5A5A;
}
.func-name-cell {
    width: 36px;
    flex-shrink: 0;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #C85A6D;
}

.func-fill-left, .func-fill-right {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 6px;
    background: #A8D4E6;
    transition: width 0.6s var(--ease);
}
.func-fill-left {
    right: 0;
}
.func-fill-right {
    left: 0;
}
.func-fill-left.highlight { background: linear-gradient(to left, #FF6B6B, #FFA94D, #FFE066, #69DB7C, #4DABF7, #9775FA); }
.func-fill-right.highlight { background: linear-gradient(to right, #FF6B6B, #FFA94D, #FFE066, #69DB7C, #4DABF7, #9775FA); }

/* 手机端适配 */
@media (max-width: 420px) {
    .func-header-cell.middle {
        width: 80px;
    }
    .func-bar-cell {
        max-width: 100px;
    }
    .func-val-cell {
        width: 28px;
        font-size: 11px;
    }
    .func-name-cell {
        width: 30px;
        font-size: 12px;
    }
    .func-header-type {
        font-size: 20px;
    }
}

/* 雷达图区域间距调整 */
.radar-wrap { display: flex; justify-content: center; padding: 8px 0; }
.radar-svg { width: 100%; max-width: 220px; }
.radar-legend { display: flex; justify-content: center; gap: 20px; margin-top: 6px; }

/* 同频显示 - 简化版(只有圆圈) */
.sync-display { text-align: center; padding: 12px 0; }
.sync-circle {
    width: 110px;
    height: 110px;
    margin: 0 auto 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: conic-gradient(
        #FF6B6B calc(var(--sync, 0) * 0.6deg),
        #FFA94D calc(var(--sync, 0) * 1.2deg),
        #FFE066 calc(var(--sync, 0) * 1.8deg),
        #69DB7C calc(var(--sync, 0) * 2.4deg),
        #4DABF7 calc(var(--sync, 0) * 3deg),
        #9775FA calc(var(--sync, 0) * 3.6deg),
        var(--line) calc(var(--sync, 0) * 3.6deg)
    );
}
.sync-circle::before {
    content: '';
    position: absolute;
    width: 88px;
    height: 88px;
    background: var(--bg-card);
    border-radius: 50%;
}
.sync-inner { position: relative; z-index: 1; text-align: center; }
.sync-number { font-size: 28px; font-weight: 800; line-height: 1; color: var(--text); }
.sync-label { font-size: 10px; color: var(--text-hint); margin-top: 2px; }

.sync-grade { margin-top: 8px; }
.grade-badge {
    display: inline-block;
    padding: 5px 18px;
    border-radius: var(--radius-full);
    font-size: 14px;
    font-weight: 800;
    color: white;
    margin-bottom: 4px;
}
.grade-S { background: linear-gradient(135deg, #FBBF24, #F59E0B); }
.grade-A { background: linear-gradient(135deg, #34D399, #10B981); }
.grade-B { background: linear-gradient(135deg, #60A5FA, #3B82F6); }
.grade-C { background: linear-gradient(135deg, #FB923C, #F97316); }
.grade-D { background: linear-gradient(135deg, #F87171, #EF4444); }
.grade-title { font-size: 13px; font-weight: 700; color: var(--text); }

.type-compare {
    display: flex;
    justify-content: center;
    gap: 36px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}
.type-item { text-align: center; }
.type-code-sm { font-size: 18px; font-weight: 800; margin-bottom: 2px; }
.type-item.child .type-code-sm { color: var(--accent-orange); }
.type-item.parent .type-code-sm { color: var(--accent-blue); }
.type-label { font-size: 11px; color: var(--text-hint); }

/* GAP入口 - 简化版 */
.gap-entry-section { margin-top: 14px; display: flex; gap: 10px; }
.gap-entry-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 12px;
    cursor: pointer;
    transition: all var(--duration);
}
.gap-entry-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.gap-entry-icon { font-size: 18px; }
.gap-entry-title { font-weight: 700; font-size: 13px; }

/* 雷达图 */
.radar-wrap { display: flex; justify-content: center; padding: 12px 0; }
.radar-svg { width: 100%; max-width: 240px; }
.radar-legend { display: flex; justify-content: center; gap: 20px; margin-top: 10px; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-sub); }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; }
.legend-dot.child { background: var(--accent-orange); }
.legend-dot.parent { background: var(--accent-blue); }

/* 图片预览弹窗 */
.image-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.8);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.image-modal img {
    max-width: 100%;
    max-height: 90vh;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.image-modal-tip {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 14px;
    background: rgba(0,0,0,0.6);
    padding: 8px 20px;
    border-radius: var(--radius-full);
}
.image-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
}

/* ========== 响应式 ========== */
@media (min-width: 768px) {
    .result-container { max-width: 600px; }
    .quiz-body { max-width: 560px; }
}

@media (max-width: 480px) {
    .home-brand-name { font-size: 16px; }
    .question-text { font-size: 16px; }
    .type-code { font-size: 40px; }
    .detail-type-code { font-size: 30px; }
    .sync-circle { width: 100px; height: 100px; }
    .sync-circle::before { width: 80px; height: 80px; }
    .sync-number { font-size: 26px; }
    .action-grid .btn { padding: 12px 8px; font-size: 12px; }
}
/* ========== 新增：Emoji 选项样式 ========== */
.likert-option {
    /* 覆盖旧样式，增加高度和内边距 */
    padding: 12px 16px;
    align-items: center;
    gap: 16px;
}
.likert-emoji {
    font-size: 28px;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.likert-option:hover .likert-emoji,
.likert-option.selected .likert-emoji {
    transform: scale(1.2) rotate(5deg);
}
.likert-text-group {
    display: flex;
    flex-direction: column;
    text-align: left;
}
.likert-main-text {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2px;
}
.likert-sub-text {
    font-size: 11px;
    color: var(--text-hint);
}
/* 隐藏旧的点 */
.likert-dot { display: none; }

/* ========== 新增：中场休息/激励弹窗 ========== */
.break-modal {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.4s ease;
}
.break-card {
    background: white;
    width: 85%;
    max-width: 360px;
    border-radius: 24px;
    padding: 32px 24px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(91, 143, 185, 0.15);
    border: 2px solid #EEF5FA;
    transform: translateY(0);
    animation: slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.break-emoji {
    font-size: 64px;
    margin-bottom: 16px;
    display: inline-block;
    animation: bounce 2s infinite;
}
.break-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 8px;
}
.break-desc {
    font-size: 15px;
    color: var(--text-sub);
    margin-bottom: 24px;
    line-height: 1.6;
}
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ============================================
   新增：语音播放按钮样式 (Audio Feature)
   ============================================ */
.audio-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border: 2px solid #6AABB8; /* 对应主题色 */
    color: #6AABB8;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(106, 171, 184, 0.15);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.audio-btn:active {
    transform: scale(0.95);
}

.audio-btn.playing {
    background-color: #6AABB8;
    color: white;
    animation: pulse-blue 1.5s infinite;
    border-color: #6AABB8;
}

.audio-icon {
    margin-right: 6px;
    font-size: 16px;
}

@keyframes pulse-blue {
    0% { box-shadow: 0 0 0 0 rgba(106, 171, 184, 0.7); }
    70% { box-shadow: 0 0 0 8px rgba(106, 171, 184, 0); }
    100% { box-shadow: 0 0 0 0 rgba(106, 171, 184, 0); }
}