/* ========================================
   q_base.css - 情感测试结果页通用样式（原 emotion.css）
   整合自：tg_all.css + 原模板内联样式
   支持5个主题：tian(橙)、fei(紫)、pua(红)、red(粉)、default(蓝)
   所有单位使用rem，方便移动端自适应
   ======================================== */

/* ========== CSS变量 - 默认主题 ========== */
:root { --primary-color: #3b82f6; --primary-dark: #2563eb; --primary-light: #60a5fa; --bg-color: #0f172a; --bg-secondary: #1e293b; --bg-card: #334155; --text-color: #f8fafc; --text-secondary: #94a3b8; --text-muted: #64748b; --border-color: #334155; --success-color: #10b981; --warning-color: #f59e0b; --danger-color: #ef4444; }

/* ========== 基础重置 ========== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; }
@media (max-width: 1300px) { html { font-size: 14px; } }
@media (max-width: 768px) { html { font-size: 13px; } }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background: var(--bg-color); color: var(--text-color); line-height: 1.6; min-height: 100vh; font-size: 1rem; }

/* ========== 布局容器 ========== */
.container { max-width: 75rem; margin: 0 auto; padding: 0 1rem; }
.result-container { max-width: 56rem; margin: 0 auto; padding: 1rem 0.5rem; }

/* ========== 链接 ========== */
a { color: var(--primary-color); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--primary-light); }

/* ========== 头部导航 ========== */
.header { background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); padding: 0.5rem 0; position: sticky; top: 0; z-index: 100; }
.header-content { display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 1.1rem; font-weight: 700; color: var(--primary-color); }
.nav-right { display: flex; gap: 0.75rem; }

/* ========== 按钮 ========== */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.3rem 1rem; border-radius: 0.5rem; font-weight: 600; cursor: pointer; transition: all 0.2s; border: none; }
.btn-primary { background: var(--primary-color); color: white; }
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-2px); }
.btn-secondary { background: var(--bg-card); color: var(--text-color); border: 1px solid var(--border-color); }
.btn-secondary:hover { background: var(--border-color); }
.btn-lg { padding: 0.875rem 2rem; }
.nav-btn { padding: 0.5rem 1rem; font-size: 0.875rem; }
.nav-btn-lg { padding: 0.875rem 2rem; }

/* ========== 结果页英雄区 ========== */
.result-hero { text-align: center; background: linear-gradient(135deg, var(--primary-color-alpha, rgba(59, 130, 246, 0.25)) 0%, var(--bg-secondary) 50%, var(--bg-color) 100%); position: relative; overflow: hidden; padding: 3rem 0 2rem; }
.result-hero::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, var(--primary-color-alpha, rgba(59, 130, 246, 0.2)) 0%, transparent 60%); animation: pulse 4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.1); opacity: 0.8; } }
.result-emoji { font-size: 6rem; margin-bottom: 0; position: relative; z-index: 1; animation: bounce 2s ease-in-out infinite; }
.result-user-greeting { font-size: 1.2rem; color: var(--text-secondary); margin: 0.75rem auto 0.25rem; position: relative; z-index: 1; opacity: 0; animation: fadeInUp 0.6s ease forwards 0.3s; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.result-level-name { font-size: 3rem; font-weight: 800; margin-bottom: 0.625rem; position: relative; z-index: 1; }
.result-level-title { font-size: 1.25rem; color: var(--text-secondary); margin-bottom: 1.25rem; position: relative; z-index: 1; }
.result-quote { font-size: 1.1rem; color: var(--primary-color); font-style: italic; max-width: 37.5rem; margin: 0 auto; position: relative; z-index: 1; line-height: 1.8; padding: 0 1rem; }

/* ========== 分数展示区 ========== */
.score-ring { display: flex; flex-direction: column; align-items: center; margin: 2.5rem auto; position: relative; z-index: 1; }
.score-main { display: flex; align-items: center; gap: 2.5rem; flex-wrap: wrap; justify-content: center; }
.score-level-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.25rem; border-radius: 1.875rem; font-size: 1rem; font-weight: 600; margin-bottom: 1.5rem; border: 1px solid; }
.score-display { display: flex; flex-direction: column; align-items: center; padding: 2rem 3rem; background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%); border-radius: 1.5rem; border: 1px solid rgba(255,255,255,0.1); min-width: 12.5rem; backdrop-filter: blur(10px); box-shadow: 0 8px 32px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.1); }
.score-number { font-size: 5rem; font-weight: 800; line-height: 1; }
.score-unit { font-size: 1rem; color: var(--text-secondary); margin-top: 0.5rem; }
.score-bar-container { flex: 1; max-width: 18.75rem; min-width: 12.5rem; }
.score-bar-label { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 0.5rem; text-align: center; }
.score-bar { height: 1rem; background: rgba(255,255,255,0.08); border-radius: 0.5rem; overflow: hidden; position: relative; }
.score-bar-fill { height: 100%; border-radius: 0.5rem; transition: width 1.5s ease; }
.score-bar-markers { display: flex; justify-content: space-between; margin-top: 0.5rem; font-size: 0.75rem; color: var(--text-secondary); }
.score-bar-track { width: 100%; height: 0.5rem; background: var(--border-color); border-radius: 1rem; overflow: hidden; }
@media (max-width: 480px) { .score-main { flex-direction: column; gap: 1.5rem; } .score-display { padding: 1.5rem 2rem; min-width: 9.375rem; } .score-number { font-size: 3.5rem; } .score-bar-container { max-width: 100%; } }

/* ========== 结果板块 ========== */
.result-section { background: var(--bg-secondary); border-radius: 1.25rem; padding: 1.5rem; margin-bottom: 1.5rem; border: 1px solid var(--border-color); position: relative; overflow: hidden; }
.result-section::before { content: ''; position: absolute; top: 0; left: 0; width: 0.25rem; height: 100%; background: var(--primary-color); }
.result-section-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; }
.result-section-emoji { font-size: 1.75rem; }
.result-section-title { font-size: 1.375rem; font-weight: 700; flex: 1; }
.section-help-link { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: rgba(255,255,255,0.05); border: 1px solid var(--border-color); transition: all 0.2s; text-decoration: none; }
.section-help-link:hover { background: var(--primary-color-alpha); border-color: var(--primary-color); }
.section-help-link svg { width: 0.875rem; height: 0.875rem; fill: none; stroke: var(--text-secondary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.section-help-link:hover svg { stroke: var(--primary-color); }
.content-paragraph { font-size: 1.0625rem; line-height: 2; color: var(--text-secondary); margin-bottom: 1rem; text-align: justify; }
.content-paragraph:last-child { margin-bottom: 0; }
.content-paragraph strong { color: var(--text-color); font-weight: 600; }
.result-section-highlight { background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--primary-color-alpha, rgba(59, 130, 246, 0.08)) 100%); }
.result-section-warning { --primary-color: #ef4444; }
.result-section-warning .result-section-title { color: #ef4444; }

/* ========== 状态卡片样式 ========== */
.status-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem; }
@media (max-width: 640px) { .status-cards { grid-template-columns: 1fr; } }
.status-card { background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%); border-radius: 1rem; padding: 1.25rem; border: 1px solid rgba(255,255,255,0.08); text-align: center; transition: all 0.3s ease; }
.status-card:hover { transform: translateY(-0.25rem); border-color: var(--primary-color-alpha); box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.15); }
.status-card-icon { font-size: 2.5rem; display: block; margin-bottom: 0.75rem; }
.status-card-title { font-size: 1rem; font-weight: 700; color: var(--text-color); margin-bottom: 0.5rem; }
.status-card-desc { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6; }
.status-card-highlight { background: linear-gradient(135deg, var(--primary-color-alpha) 0%, rgba(255,255,255,0.02) 100%); border-color: var(--primary-color-alpha); }
.status-card-highlight .status-card-title { color: var(--primary-color); }

.others-view { margin: 2rem 0;}
.others-view-grid { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 1.5rem; }
.observer-card { display: flex; gap: 1.25rem; background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.015) 100%); border-radius: 1.25rem; padding: 1.5rem 1.75rem; border-left: 0.3rem solid var(--primary-color); transition: all 0.3s ease; }
.observer-card:hover { transform: translateX(0.35rem); box-shadow: 0 0.6rem 2rem rgba(0,0,0,0.15); background: linear-gradient(135deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%); }
.observer-card:nth-child(2) { border-color: #f59e0b; }
.observer-card:nth-child(3) { border-color: #10b981; }
.observer-card:nth-child(4) { border-color: #8b5cf6; }
.observer-role { flex-shrink: 0; width: 7.5rem; display: flex; align-items: center; }
.observer-role-name { font-size: 1.05rem; font-weight: 700; color: var(--text-color); white-space: nowrap; letter-spacing: 0.02em; }
.observer-content { flex: 1; font-size: 1rem; color: var(--text-secondary); line-height: 1.85; position: relative; padding-left: 1.25rem; }
.observer-content::before { content: '"'; position: absolute; left: 0; top: -0.2rem; font-size: 2rem; color: var(--primary-color-alpha); font-family: Georgia, serif; line-height: 1; opacity: 0.7; }
@media (max-width: 640px) { .observer-card { flex-direction: column; gap: 0.75rem; padding: 1.25rem; } .observer-role { width: auto; } .observer-content::before { display: none; } .observer-content { font-size: 0.95rem; padding-left: 0; } .observer-role-name { font-size: 1rem; } }

/* ========== 答题一致性校验 ========== */
.consistency-section { background: var(--bg-secondary); border-radius: 1.25rem; padding: 1rem; margin-bottom: 1.5rem; border: 1px solid var(--border-color); }
.consistency-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
.consistency-header-left { display: flex; align-items: center; gap: 0.75rem; }
.consistency-icon { font-size: 1.5rem; }
.consistency-title { font-size: 1.2rem; font-weight: 700; }
.consistency-score-wrap { display: flex; align-items: center; gap: 0.5rem; }
.consistency-score-label { font-size: 0.85rem; color: var(--text-secondary); }
.consistency-score { font-size: 1.8rem; font-weight: 800; }
.consistency-score.high { color: #34d399; }
.consistency-score.medium { color: #fbbf24; }
.consistency-score.low { color: #f87171; }
.consistency-bar-wrap { margin: 1rem 0; }
.consistency-bar { height: 0.75rem; background: rgba(255,255,255,0.08); border-radius: 0.375rem; overflow: hidden; }
.consistency-bar-fill { height: 100%; border-radius: 0.375rem; transition: width 1s ease; }
.consistency-bar-fill.high { background: linear-gradient(90deg, #10b981, #34d399); }
.consistency-bar-fill.medium { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.consistency-bar-fill.low { background: linear-gradient(90deg, #ef4444, #f97316); }
.consistency-message { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.8; margin-top: 0.75rem; padding: 0.75rem 1rem; background: rgba(255,255,255,0.02); border-radius: 0.625rem; }
.consistency-message strong { color: var(--text-color); }

/* ========== 高级指标样式 ========== */
.metrics-intro { text-align: center; margin-bottom: 1.875rem; padding: 1.5rem; background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--primary-color-alpha, rgba(59, 130, 246, 0.05)) 100%); border-radius: 1rem; border: 1px solid var(--border-color); }
.metrics-intro p { font-size: 1rem; color: var(--text-secondary); line-height: 1.8; margin: 0; }
.metrics-intro strong { color: var(--primary-color); }
.metric-card { border-radius: 1.25rem; padding: 1.75rem; margin-bottom: 1.5rem; border: 1px solid var(--border-color); position: relative; overflow: hidden; background: var(--bg-secondary); }
.metric-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 0.1875rem; }
.metric-card.obsession { background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(239, 68, 68, 0.02) 100%); border-color: rgba(239, 68, 68, 0.2); }
.metric-card.obsession::before { background: linear-gradient(90deg, #ef4444, #f97316, #ef4444); }
.metric-card.detox { background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0.02) 100%); border-color: rgba(59, 130, 246, 0.2); }
.metric-card.detox::before { background: linear-gradient(90deg, #3b82f6, #60a5fa, #3b82f6); }
.metric-card.conflict { background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(139, 92, 246, 0.02) 100%); border-color: rgba(139, 92, 246, 0.2); }
.metric-card.conflict::before { background: linear-gradient(90deg, #8b5cf6, #a78bfa, #8b5cf6); }
.metric-card.pua_index, .metric-card.cheat_index { background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(239, 68, 68, 0.02) 100%); border-color: rgba(239, 68, 68, 0.2); }
.metric-card.pua_index::before, .metric-card.cheat_index::before { background: linear-gradient(90deg, #ef4444, #f97316, #ef4444); }
.metric-card.emotional_risk, .metric-card.emotional_debt { background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(245, 158, 11, 0.02) 100%); border-color: rgba(245, 158, 11, 0.2); }
.metric-card.emotional_risk::before, .metric-card.emotional_debt::before { background: linear-gradient(90deg, #f59e0b, #fbbf24, #f59e0b); }
.metric-card.mood_swing, .metric-card.shit_index { background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(139, 92, 246, 0.02) 100%); border-color: rgba(139, 92, 246, 0.2); }
.metric-card.mood_swing::before, .metric-card.shit_index::before { background: linear-gradient(90deg, #8b5cf6, #a78bfa, #8b5cf6); }
.metric-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.25rem; }
.metric-title { font-size: 1.25rem; font-weight: 700; }
.metric-title.obsession, .metric-title.pua_index, .metric-title.cheat_index { color: #ef4444; }
.metric-title.detox { color: #3b82f6; }
.metric-title.conflict, .metric-title.mood_swing, .metric-title.shit_index { color: #8b5cf6; }
.metric-title.emotional_risk, .metric-title.emotional_debt { color: #f59e0b; }
.metric-subtitle { font-size: 0.8rem; color: var(--text-secondary); margin-top: 0.125rem; opacity: 0.8; }
.metric-value { font-size: 2.5rem; font-weight: 800; line-height: 1; }
.metric-value.obsession, .metric-value.pua_index, .metric-value.cheat_index { color: #ef4444; }
.metric-value.detox { color: #3b82f6; }
.metric-value.conflict, .metric-value.mood_swing, .metric-value.shit_index { color: #8b5cf6; }
.metric-value.emotional_risk, .metric-value.emotional_debt { color: #f59e0b; }
.metric-value-unit { font-size: 1rem; font-weight: 400; opacity: 0.6; }
.metric-chart-wrap { height: 12.5rem; position: relative; margin: 1.25rem 0; }
.metric-legend { display: flex; justify-content: center; gap: 1.25rem; margin-top: 1rem; flex-wrap: wrap; padding: 0.75rem; background: rgba(255,255,255,0.02); border-radius: 0.625rem; }
.metric-legend-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--text-secondary); }
.metric-legend-dot { width: 0.875rem; height: 0.875rem; border-radius: 0.25rem; }
.metric-legend-line { width: 1.5rem; height: 0.1875rem; border-radius: 0.125rem; }
.metric-interpretation { background: rgba(255, 255, 255, 0.03); border-radius: 0.75rem; padding: 1rem 1.25rem; border-left: 0.25rem solid; font-size: 0.95rem; line-height: 1.9; color: var(--text-secondary); margin-top: 1rem; }
.metric-interpretation.obsession, .metric-interpretation.pua_index, .metric-interpretation.cheat_index { border-color: #ef4444; background: rgba(239, 68, 68, 0.05); }
.metric-interpretation.detox { border-color: #3b82f6; background: rgba(59, 130, 246, 0.05); }
.metric-interpretation.conflict, .metric-interpretation.mood_swing, .metric-interpretation.shit_index { border-color: #8b5cf6; background: rgba(139, 92, 246, 0.05); }
.metric-interpretation.emotional_risk, .metric-interpretation.emotional_debt { border-color: #f59e0b; background: rgba(245, 158, 11, 0.05); }
.metric-interpretation strong { color: var(--text-color); }
.metric-badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 1.25rem; font-size: 0.75rem; font-weight: 600; margin-left: 0.5rem; }
.metric-badge.danger { background: rgba(239, 68, 68, 0.2); color: #f87171; }
.metric-badge.warning { background: rgba(245, 158, 11, 0.2); color: #fbbf24; }
.metric-badge.normal { background: rgba(16, 185, 129, 0.2); color: #34d399; }
.metric-hint { font-size: 0.8rem; color: var(--text-secondary); margin-top: 0.5rem; text-align: center; font-style: italic; opacity: 0.7; }

/* ========== 进度条样式 ========== */
.progress-section { margin: 1.5rem 0; }
.progress-item { margin-bottom: 1.5rem; }
.progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.625rem; }
.progress-label { font-size: 0.95rem; color: var(--text-color); font-weight: 500; }
.progress-value { font-size: 1.1rem; font-weight: 700; }
.progress-bar-wrap { height: 0.625rem; background: rgba(255,255,255,0.05); border-radius: 0.3125rem; overflow: hidden; position: relative; }
.progress-bar-fill { height: 100%; border-radius: 0.3125rem; transition: width 1.2s ease; position: relative; }
.progress-bar-fill::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); animation: shimmer 2s infinite; }
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.progress-desc { font-size: 0.8rem; color: var(--text-secondary); margin-top: 0.5rem; opacity: 0.8; }

/* ========== 特征列表样式 ========== */
.trait-item { background: var(--bg-card); border-radius: 1rem; padding: 1.2rem; margin-bottom: 1rem; border: 1px solid var(--border-color); }
.trait-item:last-child { margin-bottom: 0; }
.trait-scene { font-size: 1rem; font-weight: 600; color: var(--text-color); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; }
.trait-scene::before { content: '🎬'; font-size: 1.25rem; }
.trait-analysis { font-size: 1rem; line-height: 1.9; color: var(--text-secondary); }

/* ========== 建议板块样式 ========== */
.advice-section { background: linear-gradient(135deg, var(--primary-color-alpha, rgba(59, 130, 246, 0.08)) 0%, var(--primary-color-alpha2, rgba(37, 99, 235, 0.03)) 100%); border-radius: 1.5rem; padding: 1rem; margin-bottom: 1.5rem; border: 1px solid var(--primary-color-alpha, rgba(59, 130, 246, 0.2)); position: relative; overflow: hidden; }
.advice-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 0.25rem; background: linear-gradient(90deg, var(--primary-color), var(--primary-dark), var(--primary-color)); border-radius: 1.5rem 1.5rem 0 0; }
.advice-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.advice-emoji { font-size: 2rem; }
.advice-title { font-size: 1.4rem; font-weight: 700; color: var(--primary-color); }
.advice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (max-width: 640px) { .advice-grid { grid-template-columns: 1fr; } }
.advice-card { background: rgba(255,255,255,0.03); border-radius: 1rem; padding: 1rem; border: 1px solid var(--border-color); }
.advice-card-icon { font-size: 1.2rem; margin-right: 0.5rem; display: inline; }
.advice-card-title { font-size: 1rem; font-weight: 600; color: var(--text-color); margin-bottom: 0.5rem; display: inline; }
.advice-card-content { font-size: 1rem; color: var(--text-secondary); line-height: 1.7; }
.advice-highlight { background: linear-gradient(135deg, var(--primary-color-alpha, rgba(59, 130, 246, 0.15)) 0%, var(--primary-color-alpha2, rgba(59, 130, 246, 0.05)) 100%); border-color: var(--primary-color-alpha, rgba(59, 130, 246, 0.2)); }
.advice-highlight .advice-card-title { color: var(--primary-color); }
.advice-summary { margin-top: 1.25rem; padding: 1.25rem; background: var(--primary-color-alpha, rgba(59, 130, 246, 0.08)); border-radius: 1rem; border-left: 0.25rem solid var(--primary-color); }
.advice-summary-title { font-size: 1rem; font-weight: 600; color: var(--text-color); margin-bottom: 0.5rem; }
.advice-summary-text { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.8; }

/* ========== 精华总结板块 ========== */
.essence-section { background: linear-gradient(135deg, var(--primary-color-alpha, rgba(59, 130, 246, 0.12)) 0%, var(--primary-color-alpha2, rgba(37, 99, 235, 0.04)) 100%); border-radius: 1.5rem; padding: 2rem; margin-bottom: 1.875rem; border: 0.125rem solid var(--primary-color-alpha, rgba(59, 130, 246, 0.25)); position: relative; overflow: hidden; }
.essence-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 0.25rem; background: linear-gradient(90deg, var(--primary-color), var(--primary-dark), var(--primary-color)); }
.essence-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; }
.essence-icon { font-size: 2.5rem; }
.essence-title { font-size: 1.5rem; font-weight: 800; color: var(--primary-color); }
.essence-content { font-size: 1.1rem; line-height: 2; color: var(--text-secondary); }
.essence-content strong { color: var(--text-color); }
.essence-kick { margin-top: 1.25rem; padding: 1.25rem; background: var(--primary-color-alpha, rgba(59, 130, 246, 0.1)); border-radius: 1rem; font-size: 1.1rem; line-height: 1.9; color: var(--text-color); border: 0.0625rem dashed var(--primary-color-alpha, rgba(59, 130, 246, 0.3)); }
@media (max-width: 480px) { .essence-section { padding: 1.5rem 1.25rem; } .essence-title { font-size: 1.3rem; } .essence-content { font-size: 1rem; } .essence-kick { font-size: 1rem; padding: 1rem; } }

/* ========== 同类型角色样式 ========== */
.characters-section { background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, var(--primary-color-alpha, rgba(59, 130, 246, 0.05)) 100%); border-radius: 1.25rem; padding: 1.5rem; margin-bottom: 1.5rem; border: 1px solid rgba(139, 92, 246, 0.2); }
.characters-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)); gap: 1.25rem; }
.character-card { background: var(--bg-card); border-radius: 1rem; padding: 1.25rem; border: 1px solid var(--border-color); transition: all 0.3s ease; position: relative; overflow: hidden; }
.character-card:hover { transform: translateY(-0.25rem); box-shadow: 0 0.75rem 1.5rem rgba(0,0,0,0.15); border-color: rgba(139, 92, 246, 0.3); }
.character-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.character-name { font-size: 1.1rem; font-weight: 700; color: var(--text-color); }
.character-year { font-size: 0.75rem; color: var(--text-muted); background: rgba(139, 92, 246, 0.1); padding: 0.2rem 0.5rem; border-radius: 0.25rem; }
.character-source { font-size: 0.85rem; color: #a78bfa; margin-bottom: 0.5rem; }
.character-quote { font-size: 0.95rem; color: var(--text-color); font-style: italic; padding: 0.75rem; background: rgba(139, 92, 246, 0.08); border-left: 0.1875rem solid #8b5cf6; border-radius: 0 0.5rem 0.5rem 0; margin-bottom: 0.5rem; line-height: 1.6; }
.character-reason { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; }

/* ========== 锁定覆盖层 ========== */
.locked-overlay { position: relative; min-height: 25rem; }
.locked-overlay::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(0.75rem); z-index: 10; border-radius: 1.25rem; }
.locked-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 20; padding: 2.5rem; width: 90%; max-width: 25rem; }
.locked-icon { font-size: 4rem; margin-bottom: 1.25rem; }
.locked-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.75rem; }
.locked-desc { color: var(--text-secondary); margin-bottom: 1.5rem; max-width: 18.75rem; margin-left: auto; margin-right: auto; }
@media (max-width: 480px) { .locked-content { width: 95%; padding: 1.875rem 1.25rem; } .locked-icon { font-size: 3rem; } .locked-title { font-size: 1.3rem; } .locked-desc { font-size: 1rem; } }

/* ========== 相关测试 ========== */
.related-tests { background: var(--bg-secondary); border-radius: 1rem; padding: 1.5rem; margin: 2rem 0; border: 1px solid var(--border-color); }
.related-tests-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.related-icon { font-size: 1.25rem; }
.related-title { font-size: 1.125rem; font-weight: 700; }
.related-tests-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 768px) { .related-tests-grid { grid-template-columns: 1fr; } }
.related-test-card { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; background: var(--bg-card); border-radius: 0.75rem; border: 1px solid var(--border-color); transition: all 0.3s; text-decoration: none; }
.related-test-card:hover { border-color: var(--primary-color); transform: translateY(-0.125rem); }
.related-test-emoji { font-size: 1.75rem; }
.related-test-info { flex: 1; }
.related-test-name { font-weight: 600; color: var(--text-color); margin-bottom: 0.25rem; }
.related-test-desc { font-size: 0.8rem; color: var(--text-secondary); }

/* ========== 页面导航组件 ========== */
.page-nav { position: fixed; bottom: 7rem; right: 2rem; z-index: 98; font-size: 0.85rem; }
.page-nav-container { background: rgba(30,41,59,0.95); border-radius: 1rem; padding: 0.8rem; border: 1px solid var(--border-color); box-shadow: 0 0.5rem 2rem rgba(0,0,0,0.3); backdrop-filter: blur(0.625rem); transition: all 0.3s ease; }
.page-nav-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.4rem 0.6rem; margin-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); }
.page-nav-title { font-size: 0.9rem; font-weight: 600; color: rgba(255,255,255,0.9); }
.page-nav-toggle { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.8); cursor: pointer; font-size: 1rem; width: 1.8rem; height: 1.8rem; border-radius: 0.4rem; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; }
.page-nav-toggle:hover { background: rgba(255,255,255,0.2); color: #fff; }
.page-nav-list { list-style: none; padding: 0; margin: 0; }
.page-nav-item { margin-bottom: 0.2rem; }
.page-nav-item:last-child { margin-bottom: 0; }
.page-nav-link { display: block; padding: 0.5rem 0.8rem; color: rgba(255,255,255,0.7); text-decoration: none; border-radius: 0.6rem; transition: all 0.2s ease; white-space: nowrap; font-size: 0.8rem; }
.page-nav-link:hover { background: var(--primary-color-alpha, rgba(59, 130, 246, 0.2)); color: var(--primary-light); }
.page-nav-link.active { background: var(--primary-color-alpha, rgba(59, 130, 246, 0.25)); color: var(--primary-light); border-left: 0.125rem solid var(--primary-color); }
.page-nav-trigger { position: fixed; bottom: 7rem; right: 2rem; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: rgba(30,41,59,0.85); color: rgba(255,255,255,0.8); border: 1px solid var(--border-color); font-size: 1.2rem; cursor: pointer; box-shadow: 0 0.3rem 1rem rgba(0,0,0,0.2); z-index: 97; transition: all 0.3s ease; display: none; align-items: center; justify-content: center; backdrop-filter: blur(0.5rem); }
.page-nav-trigger:hover { background: var(--primary-color); color: #fff; transform: translateY(-0.125rem); }
.page-nav.collapsed .page-nav-container { display: none; }
.page-nav.collapsed .page-nav-trigger { display: flex; }
.page-nav.hidden { display: none; }

/* ========== 返回顶部按钮 ========== */
#back-to-top { position: fixed; bottom: 3rem; right: 2rem; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: rgba(30,41,59,0.95); color: var(--text-secondary); border: 1px solid var(--border-color); font-size: 1.2rem; cursor: pointer; box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.2); z-index: 96; transition: all 0.3s ease; opacity: 0; visibility: hidden; display: flex; align-items: center; justify-content: center; }
#back-to-top.show { opacity: 1; visibility: visible; }
#back-to-top:hover { background: var(--primary-color); color: #fff; transform: translateY(-0.125rem); }

/* ========== 页脚 ========== */
.footer { background: var(--bg-secondary); border-top: 1px solid var(--border-color); padding: 2rem 0; margin-top: 0.5rem; text-align: center; color: var(--text-secondary); }

/* ========== 响应式 ========== */
@media (max-width: 768px) { .header-content { gap: 0.5rem; } .result-level-name { font-size: 2rem; } .result-user-greeting { font-size: 1rem; } .score-value { font-size: 2.5rem; } .nav-right { gap: 0.5rem; } .page-nav { bottom: 5rem; right: 1rem; } .page-nav-container { padding: 0.6rem; } .page-nav-link { padding: 0.4rem 0.6rem; font-size: 0.75rem; } .page-nav-trigger { bottom: 5rem; right: 1rem; width: 2.5rem; height: 2.5rem; font-size: 1rem; } #back-to-top { bottom: 1.5rem; right: 1rem; width: 2.5rem; height: 2.5rem; font-size: 1rem; } }

/* ========================================
   主题定义 - 5个预设主题
   ======================================== */

/* 主题1: 舔狗测试 - 橙色 */
body.theme-tian { --primary-color: #f97316; --primary-dark: #ea580c; --primary-light: #fb923c; --primary-color-alpha: rgba(249, 115, 22, 0.2); --primary-color-alpha2: rgba(234, 88, 12, 0.08); }
body.theme-tian .score-level-badge { background: rgba(249, 115, 22, 0.15); border-color: rgba(249, 115, 22, 0.3); }
body.theme-tian .result-hero { background: linear-gradient(135deg, rgba(249, 115, 22, 0.35) 0%, rgba(234, 88, 12, 0.2) 40%, var(--bg-color) 100%); }
body.theme-tian .result-hero::before { background: radial-gradient(circle, rgba(249, 115, 22, 0.25) 0%, transparent 60%); }
body.theme-tian .result-section::before { background: #f97316; }
body.theme-tian .advice-section { background: linear-gradient(135deg, rgba(249, 115, 22, 0.08) 0%, rgba(234, 88, 12, 0.03) 100%); border-color: rgba(249, 115, 22, 0.2); }
body.theme-tian .advice-section::before { background: linear-gradient(90deg, #f97316, #ea580c, #f97316); }
body.theme-tian .advice-title { color: #f97316; }
body.theme-tian .essence-section { background: linear-gradient(135deg, rgba(249, 115, 22, 0.12) 0%, rgba(234, 88, 12, 0.04) 100%); border-color: rgba(249, 115, 22, 0.25); }
body.theme-tian .essence-title { color: #f97316; }
body.theme-tian .essence-kick { background: rgba(249, 115, 22, 0.1); border-color: rgba(249, 115, 22, 0.3); }

/* 主题2: 废物测试 - 紫色 */
body.theme-fei { --primary-color: #8b5cf6; --primary-dark: #7c3aed; --primary-light: #a78bfa; --primary-color-alpha: rgba(139, 92, 246, 0.2); --primary-color-alpha2: rgba(124, 58, 237, 0.08); }
body.theme-fei .score-level-badge { background: rgba(139, 92, 246, 0.15); border-color: rgba(139, 92, 246, 0.3); }
body.theme-fei .result-hero { background: linear-gradient(135deg, rgba(139, 92, 246, 0.35) 0%, rgba(124, 58, 237, 0.2) 40%, var(--bg-color) 100%); }
body.theme-fei .result-hero::before { background: radial-gradient(circle, rgba(139, 92, 246, 0.25) 0%, transparent 60%); }
body.theme-fei .result-section::before { background: #8b5cf6; }
body.theme-fei .advice-section { background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(124, 58, 237, 0.03) 100%); border-color: rgba(139, 92, 246, 0.2); }
body.theme-fei .advice-section::before { background: linear-gradient(90deg, #8b5cf6, #7c3aed, #8b5cf6); }
body.theme-fei .advice-title { color: #8b5cf6; }
body.theme-fei .essence-section { background: linear-gradient(135deg, rgba(139, 92, 246, 0.12) 0%, rgba(124, 58, 237, 0.04) 100%); border-color: rgba(139, 92, 246, 0.25); }
body.theme-fei .essence-title { color: #8b5cf6; }
body.theme-fei .essence-kick { background: rgba(139, 92, 246, 0.1); border-color: rgba(139, 92, 246, 0.3); }

/* 主题3: PUA测试 - 红色 */
body.theme-pua { --primary-color: #ef4444; --primary-dark: #dc2626; --primary-light: #f87171; --primary-color-alpha: rgba(239, 68, 68, 0.2); --primary-color-alpha2: rgba(220, 38, 38, 0.08); }
body.theme-pua .score-level-badge { background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.3); }
body.theme-pua .result-hero { background: linear-gradient(135deg, rgba(239, 68, 68, 0.35) 0%, rgba(220, 38, 38, 0.2) 40%, var(--bg-color) 100%); }
body.theme-pua .result-hero::before { background: radial-gradient(circle, rgba(239, 68, 68, 0.25) 0%, transparent 60%); }
body.theme-pua .result-section::before { background: #ef4444; }
body.theme-pua .advice-section { background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(220, 38, 38, 0.03) 100%); border-color: rgba(239, 68, 68, 0.2); }
body.theme-pua .advice-section::before { background: linear-gradient(90deg, #ef4444, #dc2626, #ef4444); }
body.theme-pua .advice-title { color: #ef4444; }
body.theme-pua .essence-section { background: linear-gradient(135deg, rgba(239, 68, 68, 0.12) 0%, rgba(220, 38, 38, 0.04) 100%); border-color: rgba(239, 68, 68, 0.25); }
body.theme-pua .essence-title { color: #ef4444; }
body.theme-pua .essence-kick { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.3); }

/* 主题4: 红杏测试 - 粉红色 */
body.theme-red { --primary-color: #ec4899; --primary-dark: #db2777; --primary-light: #f472b6; --primary-color-alpha: rgba(236, 72, 153, 0.2); --primary-color-alpha2: rgba(219, 39, 119, 0.08); }
body.theme-red .score-level-badge { background: rgba(236, 72, 153, 0.15); border-color: rgba(236, 72, 153, 0.3); }
body.theme-red .result-hero { background: linear-gradient(135deg, rgba(236, 72, 153, 0.35) 0%, rgba(219, 39, 119, 0.2) 40%, var(--bg-color) 100%); }
body.theme-red .result-hero::before { background: radial-gradient(circle, rgba(236, 72, 153, 0.25) 0%, transparent 60%); }
body.theme-red .result-section::before { background: #ec4899; }
body.theme-red .advice-section { background: linear-gradient(135deg, rgba(236, 72, 153, 0.08) 0%, rgba(219, 39, 119, 0.03) 100%); border-color: rgba(236, 72, 153, 0.2); }
body.theme-red .advice-section::before { background: linear-gradient(90deg, #ec4899, #db2777, #ec4899); }
body.theme-red .advice-title { color: #ec4899; }
body.theme-red .essence-section { background: linear-gradient(135deg, rgba(236, 72, 153, 0.12) 0%, rgba(219, 39, 119, 0.04) 100%); border-color: rgba(236, 72, 153, 0.25); }
body.theme-red .essence-title { color: #ec4899; }
body.theme-red .essence-kick { background: rgba(236, 72, 153, 0.1); border-color: rgba(236, 72, 153, 0.3); }

/* 主题5: 默认主题 - 蓝色 */
body.theme-default { --primary-color: #3b82f6; --primary-dark: #2563eb; --primary-light: #60a5fa; --primary-color-alpha: rgba(59, 130, 246, 0.2); --primary-color-alpha2: rgba(37, 99, 235, 0.08); }
body.theme-default .score-level-badge { background: rgba(59, 130, 246, 0.15); border-color: rgba(59, 130, 246, 0.3); }
body.theme-default .result-hero { background: linear-gradient(135deg, rgba(59, 130, 246, 0.35) 0%, rgba(37, 99, 235, 0.2) 40%, var(--bg-color) 100%); }
body.theme-default .result-hero::before { background: radial-gradient(circle, rgba(59, 130, 246, 0.25) 0%, transparent 60%); }

/* ========== 汉堡菜单 ========== */
.hamburger { background: none; border: none; font-size: 1.5rem; color: var(--text-color); cursor: pointer; padding: 0.5rem; display: none; }
.hamburger-wrapper { position: relative; }
.hamburger-menu { display: none; flex-direction: column; gap: 0.25rem; position: absolute; top: 100%; right: 0; min-width: 12rem; background: var(--bg-secondary); border-radius: 0.75rem; border: 1px solid var(--border-color); padding: 0.5rem; z-index: 200; box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.3); animation: menuIn 0.2s ease; }
@keyframes menuIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.hamburger-menu.show { display: flex; }
.hamburger-menu a { color: var(--text-color); padding: 0.625rem 1rem; border-radius: 0.5rem; transition: background 0.2s; font-size: 0.9rem; white-space: nowrap; }
.hamburger-menu a:hover { background: var(--primary-color-alpha); }
.hamburger-menu hr { border: none; border-top: 1px solid var(--border-color); margin: 0.25rem 0; }
@media (min-width: 769px) { .hamburger { display: block; } .nav-link-pc, .nav-btn-pc { display: none; } .hamburger-wrapper:hover > .hamburger-menu { display: flex; } .hamburger-menu.show { display: flex; } }
@media (max-width: 768px) { .hamburger { display: block; } .hamburger-wrapper { position: static; } .hamburger-menu { position: fixed; top: 4rem; left: 0; right: 0; min-width: auto; width: 100%; border-radius: 0; border: none; box-shadow: 0 4px 30px rgba(0,0,0,0.3); padding: 1rem; max-height: calc(100vh - 3rem); overflow-y: auto; animation: slideDown 0.25s ease; } @keyframes slideDown { from { transform: translateY(-1.25rem); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .nav-link-pc, .nav-btn-pc { display: none !important; } }

/* ========== PC端导航链接 ========== */
.nav-link-pc { color: var(--text-secondary); padding: 0.5rem 1rem; border-radius: 0.5rem; transition: all 0.2s; }
.nav-link-pc:hover { color: var(--primary-color); background: var(--primary-color-alpha); }
.nav-btn-pc { display: inline-flex; }

/* ========== 评论区域样式 ========== */
.comment-section { background: var(--bg-secondary); border-radius: 1.25rem; padding: 1.5rem; margin-bottom: 1.5rem; border: 1px solid var(--border-color); }
.comment-list { margin-bottom: 1.5rem; }
.comment-item { background: var(--bg-card); border-radius: 0.75rem; padding: 1rem; margin-bottom: 0.75rem; }
.comment-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.comment-user { font-weight: 600; color: var(--text-color); }
.comment-time { font-size: 0.75rem; color: var(--text-secondary); opacity: 0.6; }
.comment-text { font-size: 1rem; color: var(--text-secondary); line-height: 1.7; }
.comment-rating { margin-top: 0.5rem; font-size: 0.8rem; }
.comment-divider { text-align: center; margin: 1.5rem 0; position: relative; }
.comment-divider::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--border-color); }
.comment-divider span { background: var(--bg-secondary); padding: 0 1rem; position: relative; color: var(--text-secondary); font-size: 0.9rem; }
.comment-form { background: var(--bg-card); border-radius: 1rem; padding: 1.25rem; }
.comment-form-input { width: 100%; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 0.625rem; padding: 0.75rem 1rem; color: var(--text-color); font-size: 0.95rem; margin-bottom: 0.75rem; }
.comment-form-input:focus { outline: none; border-color: var(--primary-color); }
.comment-textarea { width: 100%; min-height: 6.25rem; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 0.75rem; padding: 1rem; color: var(--text-color); font-size: 0.95rem; resize: vertical; font-family: inherit; }
.comment-textarea:focus { outline: none; border-color: var(--primary-color); }
.comment-form-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 0.75rem; }
.star-rating { display: flex; flex-direction: row-reverse; gap: 0.25rem; }
.star-rating input { display: none; }
.star-rating label { font-size: 1.25rem; cursor: pointer; opacity: 0.3; transition: opacity 0.2s; }
.star-rating label:hover, .star-rating label:hover ~ label, .star-rating input:checked ~ label { opacity: 1; }
.comment-submit-btn { background: var(--primary-color); color: white; border: none; padding: 0.625rem 1.5rem; border-radius: 0.5rem; font-weight: 600; cursor: pointer; transition: all 0.3s; }
.comment-submit-btn:hover { transform: translateY(-0.125rem); box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.2); }

/* ========== Toast提示 ========== */
.toast { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(6.25rem); padding: 0.75rem 1.5rem; background: var(--primary-color); color: white; border-radius: 0.5rem; font-size: 0.9rem; z-index: 1000; transition: transform 0.3s; opacity: 0; }
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast.error { background: #ef4444; }

/* ========== 分享区域 ========== */
.share-section { background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--primary-color-alpha) 100%); border-radius: 1.25rem; padding: 2.5rem 1.5rem; text-align: center; margin-bottom: 1.5rem; border: 1px solid var(--border-color); }
.share-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem; }
.share-subtitle { color: var(--text-secondary); margin-bottom: 1.5rem; }
.share-buttons { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.share-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.875rem 1.5rem; border-radius: 0.75rem; font-weight: 600; cursor: pointer; transition: all 0.3s; text-decoration: none; border: none; }
.share-btn-copy { background: var(--bg-card); color: var(--text-color); border: 1px solid var(--border-color); }
.share-btn-copy:hover { background: var(--border-color); transform: translateY(-0.125rem); }

/* ========== CTA区域 ========== */
.cta-section { text-align: center; padding: 1.5rem 0; }
.cta-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 1rem 2.5rem; border-radius: 0.75rem; font-size: 1.1rem; font-weight: 600; cursor: pointer; border: none; transition: all 0.3s; text-decoration: none; color: white; }
.cta-btn:hover { transform: translateY(-0.187rem); box-shadow: 0 0.625rem 1.875rem rgba(0,0,0,0.2); }
/* ========== 多类型对比开关 ========== */
.compare-switch { position: relative; display: inline-block; width: 2.4rem; height: 1.3rem; cursor: pointer; flex-shrink: 0; }
.compare-switch .switch-slider { position: absolute; inset: 0; background: rgba(255,255,255,0.12); border-radius: 0.65rem; transition: all 0.25s ease; border: 1.5px solid rgba(255,255,255,0.18); }
.compare-switch .switch-slider::before { content: ''; position: absolute; width: 0.85rem; height: 0.85rem; left: 2px; top: 50%; transform: translateY(-50%); background: #fff; border-radius: 50%; transition: all 0.25s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.compare-switch:hover .switch-slider { border-color: var(--primary-color); background: var(--primary-color-alpha, rgba(59,130,246,0.15)); }
.compare-switch.active .switch-slider { background: var(--primary-color); border-color: var(--primary-color); }
.compare-switch.active .switch-slider::before { left: calc(100% - 0.85rem - 2px); }