:root {
    --bg-start: #f5f0eb;
    --bg-end: #e8e0d5;
    --card-bg: #ffffff;
    --text-primary: #3d3226;
    --text-secondary: #6b5e4f;
    --text-muted: #9b8d7e;
    --accent: #c08552;
    --accent-light: #e0c5a5;
    --accent-glow: #d4a574;
    --success: #6b8f71;
    --success-light: #a8c8a0;
    --warning: #c9a84c;
    --info: #7b9eb3;
    --border-soft: #e5ddd3;
    --shadow-sm: 0 2px 12px rgba(60, 40, 20, 0.06);
    --shadow-md: 0 8px 32px rgba(60, 40, 20, 0.10);
    --shadow-lg: 0 16px 48px rgba(60, 40, 20, 0.14);
    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 26px;
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 暗色模式：直接挂载在 html 上，保证 Element Plus 全局识别 */
html.dark {
    --bg-start: #1a1815;
    --bg-end: #121110;
    --card-bg: #252220;
    --text-primary: #e8e0d5;
    --text-secondary: #c4b8a7;
    --text-muted: #8a7d6f;
    --accent: #d4a574;
    --accent-light: #5a4030;
    --accent-glow: #e8c9a0;
    --success: #7a9e7e;
    --success-light: #4a6e4e;
    --warning: #d4b85c;
    --info: #8aacbe;
    --border-soft: #3a3530;
    --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.45);
}

/* 暗色模式下 body 背景强制 */
html.dark body {
    background: #121212 !important;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
    min-height: 100vh;
    background: linear-gradient(160deg, var(--bg-start) 0%, var(--bg-end) 100%);
    background-attachment: fixed;
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    transition: background var(--transition-smooth), color var(--transition-smooth);
}

/* 动画保持不变 */
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 20px rgba(192, 133, 82, 0.3); } 50% { box-shadow: 0 0 40px rgba(192, 133, 82, 0.55); } }
@keyframes floatUp { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes confettiFall { 0% { transform: translateY(-100px) rotate(0deg) scale(1); opacity: 1; } 70% { opacity: 0.8; } 100% { transform: translateY(105vh) rotate(720deg) scale(0.3); opacity: 0; } }

.anim-fade-in-up { animation: fadeInUp 0.55s ease-out forwards; }
.anim-scale-in { animation: scaleIn 0.4s ease-out forwards; }
.anim-float { animation: floatUp 3s ease-in-out infinite; }

.container { max-width: 1100px; margin: 0 auto; padding: 20px 16px; }

/* 顶部导航 */
.header-bar {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    gap: 14px; margin-bottom: 26px; padding: 14px 20px;
    background: var(--card-bg); border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm); backdrop-filter: blur(10px);
    border: 1px solid var(--border-soft); transition: all var(--transition-smooth);
}
.logo-title { display: flex; align-items: center; gap: 10px; }
.logo-icon { font-size: 26px; color: var(--accent); transition: transform var(--transition-fast); }
.logo-title:hover .logo-icon { transform: rotate(-12deg) scale(1.1); }
.logo-text { font-size: 19px; font-weight: 700; letter-spacing: 0.5px; color: var(--text-primary); }
.header-action { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.header-action .el-button { border-radius: 22px; font-weight: 500; transition: all var(--transition-fast); }
.header-action .el-button:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* 首页 */
.hero-wrap { margin-top: 6px; animation: fadeInUp 0.6s ease-out; }
.hero-card { border-radius: var(--radius-lg) !important; overflow: hidden; border: none !important; box-shadow: var(--shadow-lg) !important; background: var(--card-bg) !important; }
.hero-inner { padding: 44px 28px 36px; text-align: center; position: relative; overflow: hidden; }
.hero-inner::before { content:''; position:absolute; top:-80px; right:-80px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle, var(--accent-light) 0%, transparent 70%); opacity:0.35; pointer-events:none; z-index:0; }
.hero-inner::after { content:''; position:absolute; bottom:-60px; left:-60px; width:180px; height:180px; border-radius:50%; background:radial-gradient(circle, var(--success-light) 0%, transparent 70%); opacity:0.3; pointer-events:none; z-index:0; }
.hero-inner > * { position:relative; z-index:1; }
.hero-main-title { font-size: clamp(26px, 5vw, 44px); font-weight:900; background: linear-gradient(135deg, var(--accent), #a07040, var(--accent-glow)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:10px; letter-spacing:-0.5px; line-height:1.3; }
.hero-sub-text { font-size:16px; color:var(--text-secondary); letter-spacing:0.8px; margin-bottom:6px; }
.feature-row { display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin:28px 0; }
.feature-item { flex:1 1 140px; max-width:200px; padding:20px 14px; border-radius:var(--radius-md); background:var(--bg-start); transition:all var(--transition-smooth); cursor:default; border:1px solid transparent; }
.feature-item:hover { transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--accent-light); background:var(--card-bg); }
.feature-icon { font-size:34px; color:var(--accent); margin-bottom:10px; transition:transform var(--transition-fast); display:inline-block; }
.feature-item:hover .feature-icon { transform:scale(1.15); }
.feature-item h4 { font-size:15px; font-weight:700; margin-bottom:4px; color:var(--text-primary); }
.feature-item span { font-size:12px; color:var(--text-muted); }
.start-main-btn { margin-top:18px; padding:14px 36px !important; font-size:17px !important; font-weight:700 !important; border-radius:30px !important; letter-spacing:1px; transition:all var(--transition-smooth) !important; background:linear-gradient(135deg, var(--accent), #a07040) !important; border:none !important; color:#fff !important; box-shadow:0 6px 24px rgba(192,133,82,0.35) !important; }
.start-main-btn:hover { transform:translateY(-3px) !important; box-shadow:0 12px 32px rgba(192,133,82,0.5) !important; animation:pulseGlow 2s ease-in-out infinite; }
.start-main-btn:active { transform:translateY(0) !important; }
.source-desc { margin-top:32px; font-size:13px; color:var(--text-muted); line-height:1.9; }

/* 测试页 */
.test-wrap { border-radius:var(--radius-lg) !important; border:none !important; box-shadow:var(--shadow-lg) !important; background:var(--card-bg) !important; animation:fadeInUp 0.5s ease-out; }
.progress-bar-row { display:flex; align-items:center; gap:14px; margin-bottom:20px; flex-wrap:wrap; }
.progress-num { font-weight:700; font-size:15px; white-space:nowrap; color:var(--accent); }
.question-card { margin:14px 0; animation:fadeInUp 0.35s ease-out; }
.question-card .el-card { border-radius:var(--radius-md) !important; border:1px solid var(--border-soft) !important; background:var(--bg-start) !important; transition:all var(--transition-smooth); }
.question-card .el-card:hover { box-shadow:var(--shadow-md); }
.question-text { line-height:1.85; font-size:16px; margin-bottom:18px; color:var(--text-primary); font-weight:500; }
.radio-line { display:block !important; margin:11px 0 !important; padding:10px 14px !important; border-radius:8px !important; transition:all var(--transition-fast) !important; border:1px solid transparent !important; }
.radio-line:hover { background:var(--card-bg) !important; border-color:var(--accent-light) !important; }
.radio-line.is-checked { background:var(--accent-light) !important; border-color:var(--accent) !important; font-weight:600; }
.test-bottom-btn { display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; }
.test-bottom-btn .el-button { border-radius:22px; font-weight:500; }

/* 结果页 */
.result-wrap { border-radius:var(--radius-lg) !important; border:none !important; box-shadow:var(--shadow-lg) !important; background:var(--card-bg) !important; animation:scaleIn 0.5s ease-out; }
.result-img-box { margin-bottom:14px; border-radius:var(--radius-md); overflow:hidden; }
.result-img { border-radius:var(--radius-md); width:100%; max-height:320px; object-fit:contain; background:var(--bg-start); }
.img-tip { display:block; margin-top:8px; font-size:13px; color:var(--text-muted); text-align:center; }
.result-title { font-size:clamp(28px, 4vw, 40px); font-weight:900; margin:8px 0 12px; color:var(--accent); letter-spacing:-0.3px; }
.result-sub-desc { color:var(--text-secondary); line-height:1.8; margin-top:10px; font-size:15px; }
.desc-long { line-height:2; font-size:15px; color:var(--text-primary); padding:10px 0; }
.chart-box { width:100%; height:400px; margin:18px 0; border-radius:var(--radius-md); background:var(--bg-start); padding:10px; }
.result-btn-group { margin-top:28px; display:flex; flex-wrap:wrap; gap:10px; }
.result-btn-group .el-button { border-radius:22px; font-weight:500; transition:all var(--transition-fast); }
.result-btn-group .el-button:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.author-notice { margin-top:24px; border-radius:var(--radius-md) !important; overflow:hidden; box-shadow:var(--shadow-sm); }

/* 弹窗 */
.el-dialog { border-radius:var(--radius-lg) !important; overflow:hidden; }
.empty-history { text-align:center; padding:50px 0; color:var(--text-muted); font-size:15px; }
.history-item-card { margin:10px 0; transition:all var(--transition-fast); }
.history-item-card:hover { transform:translateX(4px); }
.history-time { font-size:12px; color:var(--text-muted); margin-top:4px; }

/* 彩带 */
.confetti-container { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:9999; overflow:hidden; }
.confetti-piece { position:absolute; width:12px; height:12px; border-radius:3px; animation:confettiFall 2.5s ease-out forwards; }

/* 响应式 */
@media (max-width: 768px) {
    .container { padding:10px 8px; }
    .hero-inner { padding:26px 14px 24px; }
    .feature-row { gap:8px; }
    .feature-item { flex:1 1 100px; max-width:150px; padding:14px 8px; }
    .feature-icon { font-size:26px; }
    .chart-box { height:300px; }
    .header-bar { padding:10px 14px; gap:8px; }
    .logo-text { font-size:16px; }
    .test-bottom-btn { flex-direction:column; align-items:stretch; }
    .result-btn-group { flex-direction:column; }
    .result-btn-group .el-button { width:100%; }
}

@media print {
    .header-bar, .result-btn-group, .el-collapse, .test-bottom-btn { display:none !important; }
    .container { padding:0; box-shadow:none; }
}