/* ========================================
   emotion_test.css - 情感测试答题页样式
   支持5种主题风格，深色主题
   ======================================== */

/* ========== 基础重置 ========== */
* { 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; min-height: 100vh; line-height: 1.6; transition: background 0.3s; }

/* ========== CSS变量 - 默认主题 ========== */
:root { --primary-color: #3b82f6; --primary-dark: #2563eb; --primary-light: #60a5fa; --primary-color-alpha: rgba(59, 130, 246, 0.2); --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; }

/* ========== 布局容器 ========== */
.container { max-width: 750px; margin: 0 auto; padding: 0 1rem; }

/* ========== 头部导航 ========== */
.test-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; backdrop-filter: blur(10px); border-bottom: none; display: flex; flex-direction: column; }
.test-header-content { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.5rem; width: 100%; }
.test-header .logo { font-size: 1.1rem; font-weight: 700; color: var(--primary-color); text-decoration: none; }
.test-nav { display: flex; align-items: center; gap: 1rem; }
.timer-display { font-size: 1rem; font-weight: 600; padding: 0.3rem 0.75rem; border-radius: 0.5rem; background: var(--bg-card); color: var(--text-secondary); }
.mode-switch { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--text-secondary); }
.mode-toggle { position: relative; width: 2.25rem; height: 1.25rem; border-radius: 0.625rem; background: var(--bg-card); cursor: pointer; transition: background 0.3s; }
.mode-toggle.active { background: var(--primary-color); }
.mode-toggle::after { content: ''; position: absolute; top: 0.125rem; left: 0.125rem; width: 1rem; height: 1rem; background: #fff; border-radius: 50%; transition: transform 0.3s; }
.mode-toggle.active::after { transform: translateX(1rem); }
.exit-btn { padding: 0.5rem 1rem; background: transparent; border: 1px solid var(--border-color); border-radius: 0.5rem; color: var(--text-secondary); font-size: 0.875rem; cursor: pointer; transition: all 0.2s; }
.exit-btn:hover { border-color: var(--primary-color); color: var(--primary-color); }

/* ========== 进度条 ========== */
.progress-container { height: 0.375rem; background: var(--bg-card); box-shadow: 0 2px 8px rgba(0,0,0,0.3); flex-shrink: 0; }
.progress-bar { height: 100%; background: linear-gradient(90deg, var(--primary-color), var(--primary-light)); transition: width 0.3s ease; box-shadow: 0 0 8px var(--primary-color-alpha); }

/* ========== 题目容器 ========== */
.questions-container { padding: 5rem 0 6rem; }
.question-card { background: var(--bg-secondary); border-radius: 1.25rem; padding: 1.5rem; margin-bottom: 1rem; border: 2px solid var(--border-color); transition: opacity 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; position: relative; }
.question-card.inactive { opacity: 0.6; }
.question-card.active { opacity: 1; border-color: var(--primary-color); box-shadow: 0 0 1.5rem var(--primary-color-alpha); }
.question-card.answered:not(.active) { opacity: 0.7; }
.question-card.answered.active { opacity: 1; }
.question-number { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; font-size: 0.875rem; font-weight: 700; background: var(--primary-color); color: #fff; margin-right: 0.75rem; flex-shrink: 0; }
.question-header { display: flex; align-items: flex-start; margin-bottom: 1.25rem; }
.question-text { font-size: 1.125rem; font-weight: 600; line-height: 1.8; color: var(--text-color); flex: 1; }
.question-image { max-width: 100%; height: auto; border-radius: 0.75rem; margin-bottom: 1rem; display: block; }
.question-hint { font-size: 1rem; color: var(--text-secondary); margin-bottom: 1rem; padding: 0.75rem 1rem; background: rgba(255,255,255,0.03); border-radius: 0.625rem; border-left: 3px solid var(--primary-color); line-height: 1.7; font-weight: 500; }

/* ========== 选项列表 ========== */
.options-list { display: flex; flex-direction: column; gap: 0.75rem; }
.option-item { display: flex; align-items: center; justify-content: flex-start; gap: 1rem; padding: 1rem 1.5rem; border-radius: 0.875rem; cursor: pointer; transition: all 0.25s ease; border: 2px solid var(--border-color); background: var(--bg-card); position: relative; overflow: hidden; }
.option-item::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%; background: linear-gradient(135deg, var(--primary-color-alpha), transparent); z-index: 0; transition: width 0.3s ease; }
.option-item:hover { transform: translateX(4px); border-color: var(--primary-color); box-shadow: 0 4px 16px var(--primary-color-alpha); }
.option-item.selected { border-color: var(--primary-color); background: linear-gradient(135deg, var(--primary-color-alpha), rgba(255,255,255,0.02)); box-shadow: 0 0 0 3px var(--primary-color-alpha), 0 8px 24px var(--primary-color-alpha); transform: scale(1.01); }
.option-item.selected::before { width: 100%; }
.option-item.selected .option-marker { background: var(--primary-color); border-color: var(--primary-color); color: #fff; transform: scale(1.08); box-shadow: 0 3px 12px var(--primary-color-alpha); }
.option-item > * { position: relative; z-index: 1; }
.option-marker { min-width: 2rem; height: 2rem; border: 2px solid var(--border-color); border-radius: 0.625rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.25s ease; font-size: 0.875rem; font-weight: 700; color: var(--text-secondary); background: transparent; }
.option-letter { font-weight: 700; }
.option-text { flex: 1; font-size: 1.05rem; color: var(--text-secondary); line-height: 1.6; font-weight: 500; }
.option-item.selected .option-text { color: var(--text-color); }

/* ========== 图片选项 ========== */
.options-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.option-image-item { position: relative; border-radius: 0.75rem; overflow: hidden; cursor: pointer; transition: all 0.3s; border: 2px solid var(--border-color); }
.option-image-item:hover { transform: scale(1.02); border-color: var(--primary-color-alpha); }
.option-image-item.selected { border-color: var(--primary-color); box-shadow: 0 0 1rem var(--primary-color-alpha); }
.option-image-item img { width: 100%; height: auto; display: block; }
.option-image-item .option-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 0.5rem; background: linear-gradient(transparent, rgba(0,0,0,0.8)); color: #fff; font-size: 0.875rem; text-align: center; }
.option-image-item.selected .option-label::before { content: '✓ '; color: var(--primary-color); }

/* ========== 量表型选项（圆形大小） ========== */
.scale-options { display: flex; justify-content: space-between; align-items: flex-end; gap: 0.5rem; padding: 1.5rem 0; position: relative; width: 100%; }
.scale-option { display: flex; flex-direction: column; align-items: center; cursor: pointer; position: relative; flex: 1; outline: none; }
.scale-circle { border-radius: 50%; border: 3px solid currentColor; background: transparent; transition: all 0.25s ease; position: relative; display: flex; align-items: center; justify-content: center; }
.scale-label { position: absolute; top: 100%; margin-top: 0.5rem; font-size: 0.7rem; color: var(--text-muted); text-align: center; width: 100%; transition: color 0.2s, font-weight 0.2s; line-height: 1.2; font-weight: 500; }
.scale-option:hover .scale-circle { box-shadow: 0 0 1rem currentColor; }
.scale-option:hover .scale-circle::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: currentColor; opacity: 0.3; }
.scale-option:hover .scale-label { color: var(--text-secondary); }
.scale-option.selected .scale-circle { background: currentColor; border-color: currentColor; box-shadow: 0 0 1.5rem currentColor; }
.scale-option.selected .scale-circle::after { content: '✓'; color: #fff; font-weight: bold; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; }
.scale-option.selected .scale-label { color: var(--primary-color); font-weight: 600; }

/* 7级量表大小 - PC端充分利用空间 */
.scale-option.level-1 { color: #10b981; }
.scale-option.level-1 .scale-circle { width: 5.5rem; height: 5.5rem; }
.scale-option.level-2 { color: #34d399; }
.scale-option.level-2 .scale-circle { width: 4.5rem; height: 4.5rem; }
.scale-option.level-3 { color: #6ee7b7; }
.scale-option.level-3 .scale-circle { width: 3.5rem; height: 3.5rem; }
.scale-option.level-4 { color: var(--text-muted); }
.scale-option.level-4 .scale-circle { width: 2.5rem; height: 2.5rem; border-width: 2px; }
.scale-option.level-5 { color: #fca5a5; }
.scale-option.level-5 .scale-circle { width: 3.5rem; height: 3.5rem; }
.scale-option.level-6 { color: #f87171; }
.scale-option.level-6 .scale-circle { width: 4.5rem; height: 4.5rem; }
.scale-option.level-7 { color: #ef4444; }
.scale-option.level-7 .scale-circle { width: 5.5rem; height: 5.5rem; }

/* 5级量表大小 */
.scale-option.level-1-five { color: #10b981; }
.scale-option.level-1-five .scale-circle { width: 5rem; height: 5rem; }
.scale-option.level-2-five { color: #6ee7b7; }
.scale-option.level-2-five .scale-circle { width: 4rem; height: 4rem; }
.scale-option.level-3-five { color: var(--text-muted); }
.scale-option.level-3-five .scale-circle { width: 3rem; height: 3rem; border-width: 2px; }
.scale-option.level-4-five { color: #fca5a5; }
.scale-option.level-4-five .scale-circle { width: 4rem; height: 4rem; }
.scale-option.level-5-five { color: #ef4444; }
.scale-option.level-5-five .scale-circle { width: 5rem; height: 5rem; }

/* 选中状态勾号大小 */
.scale-option.selected.level-1 .scale-circle::after, .scale-option.selected.level-7 .scale-circle::after { font-size: 1.75rem; }
.scale-option.selected.level-2 .scale-circle::after, .scale-option.selected.level-6 .scale-circle::after { font-size: 1.5rem; }
.scale-option.selected.level-3 .scale-circle::after, .scale-option.selected.level-5 .scale-circle::after { font-size: 1.125rem; }
.scale-option.selected.level-4 .scale-circle::after { font-size: 0.875rem; }
.scale-option.selected.level-1-five .scale-circle::after, .scale-option.selected.level-5-five .scale-circle::after { font-size: 1.5rem; }
.scale-option.selected.level-2-five .scale-circle::after, .scale-option.selected.level-4-five .scale-circle::after { font-size: 1.125rem; }
.scale-option.selected.level-3-five .scale-circle::after { font-size: 0.875rem; }

/* ========== 底部提交栏 ========== */
.submit-bar { position: fixed; bottom: 0; left: 0; right: 0; padding: 0.5rem; background: var(--bg-secondary); border-top: 1px solid var(--border-color); backdrop-filter: blur(10px); z-index: 100; }
.submit-content { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 50rem; margin: 0 auto; }
.submit-info { font-size: 0.9375rem; color: var(--text-secondary); }
.submit-info .highlight { font-weight: 700; color: var(--primary-color); }
.submit-btn { padding: 0.5rem 2rem; background: var(--primary-color); color: #fff; border: none; border-radius: 0.3rem; font-size: 1rem; font-weight: 700; cursor: pointer; transition: all 0.3s; }
.submit-btn:hover { transform: scale(1.05); box-shadow: 0 0.25rem 1rem var(--primary-color-alpha); }
.submit-btn:disabled { background: var(--bg-card); color: var(--text-muted); cursor: not-allowed; transform: none; box-shadow: none; }

/* ========== 完成提示 ========== */
.complete-hint { position: fixed; bottom: 5rem; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, rgba(16, 185, 129, 0.9), rgba(5, 150, 105, 0.9)); color: #fff; padding: 0.875rem 1.5rem; border-radius: 0.75rem; font-size: 0.9375rem; font-weight: 600; opacity: 0; visibility: hidden; transition: all 0.3s; box-shadow: 0 0.25rem 1rem rgba(16, 185, 129, 0.3); text-align: center; white-space: nowrap; }
.complete-hint.show { opacity: 1; visibility: visible; }
.incomplete-hint { position: fixed; bottom: 5rem; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(220, 38, 38, 0.9)); color: #fff; padding: 0.875rem 1.5rem; border-radius: 0.75rem; font-size: 0.9375rem; font-weight: 600; opacity: 0; visibility: hidden; transition: all 0.3s; white-space: nowrap; }
.incomplete-hint.show { opacity: 1; visibility: visible; }

/* ========== 加载遮罩 ========== */
.loading-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg-color); display: flex; align-items: center; justify-content: center; z-index: 200; }
.loading-spinner { width: 3rem; height: 3rem; border: 3px solid var(--border-color); border-top-color: var(--primary-color); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-overlay.hidden { display: none; }

/* ========== 主题风格 ========== */

/* 主题1: 舔狗测试 - 橙色科技风 */
body.theme-tian { --primary-color: #f97316; --primary-dark: #ea580c; --primary-light: #fb923c; --primary-color-alpha: rgba(249, 115, 22, 0.2); --bg-color: #0a0f1a; --bg-secondary: #1e293b; --bg-card: #334155; --text-color: #f8fafc; --text-secondary: #94a3b8; --text-muted: #64748b; --border-color: rgba(249, 115, 22, 0.2); background: var(--bg-color); }
body.theme-tian .test-header { background: rgba(15, 23, 42, 0.95); }
body.theme-tian .question-card { background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.9)); border-color: rgba(249, 115, 22, 0.15); }
body.theme-tian .question-card.active { box-shadow: 0 0 2rem rgba(249, 115, 22, 0.3); border-color: #f97316; }
body.theme-tian .question-number { background: linear-gradient(135deg, #f97316, #ea580c); }
body.theme-tian .option-item { background: rgba(249, 115, 22, 0.05); border-color: rgba(249, 115, 22, 0.15); }
body.theme-tian .option-item:hover { border-color: rgba(249, 115, 22, 0.4); background: rgba(249, 115, 22, 0.1); }
body.theme-tian .option-item.selected { border-color: #f97316; background: rgba(249, 115, 22, 0.15); }
body.theme-tian .submit-btn { background: linear-gradient(135deg, #f97316, #ea580c); box-shadow: 0 0.5rem 1.5rem rgba(249, 115, 22, 0.3); }
body.theme-tian .submit-bar { border-top-color: rgba(249, 115, 22, 0.2); }

/* 主题2: 废物测试 - 紫色暗黑风 */
body.theme-fei { --primary-color: #8b5cf6; --primary-dark: #7c3aed; --primary-light: #a78bfa; --primary-color-alpha: rgba(139, 92, 246, 0.2); --bg-color: #0a0f1a; --bg-secondary: #1e293b; --bg-card: #334155; --text-color: #f8fafc; --text-secondary: #94a3b8; --text-muted: #64748b; --border-color: rgba(139, 92, 246, 0.2); background: var(--bg-color); }
body.theme-fei .test-header { background: rgba(15, 23, 42, 0.95); }
body.theme-fei .question-card { background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.9)); border-color: rgba(139, 92, 246, 0.15); }
body.theme-fei .question-card.active { box-shadow: 0 0 2rem rgba(139, 92, 246, 0.3); border-color: #8b5cf6; }
body.theme-fei .question-number { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
body.theme-fei .option-item { background: rgba(139, 92, 246, 0.05); border-color: rgba(139, 92, 246, 0.15); }
body.theme-fei .option-item:hover { border-color: rgba(139, 92, 246, 0.4); background: rgba(139, 92, 246, 0.1); }
body.theme-fei .option-item.selected { border-color: #8b5cf6; background: rgba(139, 92, 246, 0.15); }
body.theme-fei .submit-btn { background: linear-gradient(135deg, #8b5cf6, #7c3aed); box-shadow: 0 0.5rem 1.5rem rgba(139, 92, 246, 0.3); }
body.theme-fei .submit-bar { border-top-color: rgba(139, 92, 246, 0.2); }

/* 主题3: PUA测试 - 玫红警示风 */
body.theme-pua { --primary-color: #f43f5e; --primary-dark: #e11d48; --primary-light: #fb7185; --primary-color-alpha: rgba(244, 63, 94, 0.2); --bg-color: #0a0f1a; --bg-secondary: #1e293b; --bg-card: #334155; --text-color: #f8fafc; --text-secondary: #94a3b8; --text-muted: #64748b; --border-color: rgba(244, 63, 94, 0.2); background: var(--bg-color); }
body.theme-pua .test-header { background: rgba(15, 23, 42, 0.95); }
body.theme-pua .question-card { background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.9)); border-color: rgba(244, 63, 94, 0.15); }
body.theme-pua .question-card.active { box-shadow: 0 0 2rem rgba(244, 63, 94, 0.3); border-color: #f43f5e; }
body.theme-pua .question-number { background: linear-gradient(135deg, #f43f5e, #e11d48); }
body.theme-pua .option-item { background: rgba(244, 63, 94, 0.05); border-color: rgba(244, 63, 94, 0.15); }
body.theme-pua .option-item:hover { border-color: rgba(244, 63, 94, 0.4); background: rgba(244, 63, 94, 0.1); }
body.theme-pua .option-item.selected { border-color: #f43f5e; background: rgba(244, 63, 94, 0.15); }
body.theme-pua .submit-btn { background: linear-gradient(135deg, #f43f5e, #e11d48); box-shadow: 0 0.5rem 1.5rem rgba(244, 63, 94, 0.3); }
body.theme-pua .submit-bar { border-top-color: rgba(244, 63, 94, 0.2); }

/* 主题4: 红杏测试 - 粉色浪漫风 */
body.theme-red { --primary-color: #ec4899; --primary-dark: #db2777; --primary-light: #f472b6; --primary-color-alpha: rgba(236, 72, 153, 0.2); --bg-color: #0a0f1a; --bg-secondary: #1e293b; --bg-card: #334155; --text-color: #f8fafc; --text-secondary: #94a3b8; --text-muted: #64748b; --border-color: rgba(236, 72, 153, 0.2); background: var(--bg-color); }
body.theme-red .test-header { background: rgba(15, 23, 42, 0.95); }
body.theme-red .question-card { background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.9)); border-color: rgba(236, 72, 153, 0.15); }
body.theme-red .question-card.active { box-shadow: 0 0 2rem rgba(236, 72, 153, 0.3); border-color: #ec4899; }
body.theme-red .question-number { background: linear-gradient(135deg, #ec4899, #db2777); }
body.theme-red .option-item { background: linear-gradient(135deg, rgba(236, 72, 153, 0.08), rgba(30, 41, 59, 0.95)); border-color: rgba(236, 72, 153, 0.2); }
body.theme-red .option-item:hover { border-color: #ec4899; box-shadow: 0 4px 20px rgba(236, 72, 153, 0.25); }
body.theme-red .option-item.selected { border-color: #ec4899; background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(236, 72, 153, 0.08)); box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.25), 0 8px 28px rgba(236, 72, 153, 0.2); }
body.theme-red .option-marker { background: rgba(236, 72, 153, 0.1); border-color: rgba(236, 72, 153, 0.4); color: #f472b6; }
body.theme-red .option-item.selected .option-marker { background: #ec4899; border-color: #ec4899; color: #fff; }
body.theme-red .submit-btn { background: linear-gradient(135deg, #ec4899, #db2777); box-shadow: 0 0.5rem 1.5rem rgba(236, 72, 153, 0.3); }
body.theme-red .submit-bar { border-top-color: rgba(236, 72, 153, 0.2); }

/* 主题5: 默认主题 - 蓝色科技风 */
body.theme-default { --primary-color: #3b82f6; --primary-dark: #2563eb; --primary-light: #60a5fa; --primary-color-alpha: rgba(59, 130, 246, 0.2); --bg-color: #0f172a; --bg-secondary: #1e293b; --bg-card: #334155; --text-color: #f8fafc; --text-secondary: #94a3b8; --text-muted: #64748b; --border-color: #334155; background: var(--bg-color); }
body.theme-default .test-header { background: rgba(30, 41, 59, 0.95); }
body.theme-default .question-card.active { box-shadow: 0 0 2rem rgba(59, 130, 246, 0.3); }
body.theme-default .question-number { background: linear-gradient(135deg, #3b82f6, #2563eb); }
body.theme-default .submit-btn { background: linear-gradient(135deg, #3b82f6, #2563eb); }

/* ========== 响应式 ========== */
@media (max-width: 768px) {
    .test-header-content { padding: 0.5rem; }
    .timer-display { font-size: 0.875rem; padding: 0.25rem 0.5rem; }
    .mode-switch { display: none; }
    .questions-container { padding: 4.5rem 0 5.5rem; }
    .question-card { padding: 1.25rem; border-radius: 1rem; }
    .question-text { font-size: 1rem; }
    .option-item { padding: 0.875rem 1rem; }
    .submit-btn { padding: 0.75rem 1.5rem; font-size: 0.9375rem; }
    
    /* 量表选项移动端适配 - 充分利用空间 */
    .scale-options { gap: 0.25rem; padding: 1rem 0; }
    .scale-label { font-size: 0.6rem; margin-top: 0.25rem; }
    .scale-option.level-1 .scale-circle, .scale-option.level-7 .scale-circle { width: 3rem; height: 3rem; }
    .scale-option.level-2 .scale-circle, .scale-option.level-6 .scale-circle { width: 2.5rem; height: 2.5rem; }
    .scale-option.level-3 .scale-circle, .scale-option.level-5 .scale-circle { width: 2rem; height: 2rem; }
    .scale-option.level-4 .scale-circle { width: 1.5rem; height: 1.5rem; border-width: 2px; }
    .scale-option.level-1-five .scale-circle, .scale-option.level-5-five .scale-circle { width: 2.75rem; height: 2.75rem; }
    .scale-option.level-2-five .scale-circle, .scale-option.level-4-five .scale-circle { width: 2.25rem; height: 2.25rem; }
    .scale-option.level-3-five .scale-circle { width: 1.75rem; height: 1.75rem; }
}

/* ========== 页面分区切换 ========== */
.page-section { display: none; }
.page-section.active { display: block; }

/* ========== 测试说明页（Intro） ========== */
.intro-page { min-height: 100vh; display: flex; flex-direction: column; }
.intro-header { padding: 1rem; text-align: center; border-bottom: 1px solid var(--border-color); }
.intro-header .logo { font-size: 1.25rem; font-weight: 700; color: var(--primary-color); text-decoration: none; }
.intro-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
.intro-card { background: var(--bg-secondary); border-radius: 1.5rem; padding: 2.5rem; max-width: 32rem; width: 100%; border: 1px solid var(--border-color); text-align: center; }
.intro-emoji { font-size: 4rem; margin-bottom: 1rem; }
.intro-title { font-size: 1.75rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--text-color); }
.intro-subtitle { font-size: 1rem; color: var(--text-secondary); margin-bottom: 2rem; }
.intro-stats { display: flex; justify-content: center; gap: 2rem; margin-bottom: 2rem; padding: 1rem; background: var(--bg-card); border-radius: 1rem; }
.stat-item { text-align: center; }
.stat-value { font-size: 1.5rem; font-weight: 700; color: var(--primary-color); }
.stat-label { font-size: 0.75rem; color: var(--text-muted); }
.intro-tips { text-align: left; margin-bottom: 2rem; }
.tip-item { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--border-color); }
.tip-item:last-child { border-bottom: none; }
.tip-icon { font-size: 1.25rem; flex-shrink: 0; }
.tip-text { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.6; }
.intro-buttons { display: flex; gap: 1rem; justify-content: center; }
.btn { padding: 1rem 2rem; border-radius: 0.75rem; font-weight: 600; cursor: pointer; transition: all 0.2s; text-decoration: none; display: inline-block; border: none; }
.btn-primary { background: var(--primary-color); color: #fff; }
.btn-primary:hover { transform: scale(1.02); box-shadow: 0 0.5rem 1.5rem var(--primary-color-alpha); }
.btn-secondary { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-color); }
.btn-secondary:hover { border-color: var(--primary-color); color: var(--primary-color); }

@media (max-width: 768px) {
    .intro-card { padding: 1.5rem; }
    .intro-emoji { font-size: 3rem; }
    .intro-title { font-size: 1.5rem; }
    .intro-stats { gap: 1rem; }
    .stat-value { font-size: 1.25rem; }
    .intro-buttons { flex-direction: column; }
}