:root{--bg:#f0f4f1;--card-bg:#fff;--accent:#4c6752;--accent-light:#e8ede9;--accent-hover:#3d5443;--text:#2d3e30;--text-secondary:#666;--text-muted:#999;--radius:16px;--radius-sm:10px;--shadow:0 2px 20px #0000000f;--max-w:640px}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;min-height:100vh;font-family:system-ui,-apple-system,PingFang SC,Microsoft YaHei,sans-serif}#app{max-width:var(--max-w);justify-content:center;align-items:center;min-height:100vh;margin:0 auto;padding:20px 16px;display:flex}.page{width:100%;display:none}.page.active{animation:.3s fadeIn;display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.card{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);padding:40px 28px}.intro-card{text-align:center;padding:60px 28px}.title{color:var(--accent);letter-spacing:4px;margin-bottom:12px;font-size:72px;font-weight:800}.subtitle{color:var(--text-secondary);margin-bottom:24px;font-size:18px}.intro-hint{color:var(--text-muted);margin-bottom:6px;font-size:14px}.intro-hint2{color:var(--text-muted);margin-bottom:36px;font-size:13px}.credit{color:var(--text-muted);margin-top:24px;font-size:12px}.btn-primary{background:var(--accent);color:#fff;border-radius:var(--radius-sm);cursor:pointer;border:none;padding:14px 48px;font-size:16px;font-weight:600;transition:background .2s;display:inline-block}.btn-primary:hover{background:var(--accent-hover)}.btn-primary:active{transform:scale(.98)}.btn-secondary{color:var(--accent);border:2px solid var(--accent);border-radius:var(--radius-sm);cursor:pointer;background:0 0;padding:12px 36px;font-size:15px;font-weight:600;transition:all .2s;display:inline-block}.btn-secondary:hover{background:var(--accent-light)}.quiz-card{padding:28px 24px}.progress-bar{background:var(--accent-light);border-radius:2px;height:4px;margin-bottom:8px;overflow:hidden}.progress-fill{background:var(--accent);border-radius:2px;width:0;height:100%;transition:width .3s}.progress-text{color:var(--text-muted);text-align:right;margin-bottom:24px;font-size:13px}.question-text{color:var(--text);margin-bottom:24px;font-size:17px;line-height:1.7}.options{flex-direction:column;gap:12px;display:flex}.option-btn{text-align:left;background:var(--bg);border-radius:var(--radius-sm);width:100%;color:var(--text);cursor:pointer;border:2px solid #0000;padding:14px 18px;font-size:15px;line-height:1.5;transition:all .15s;display:block}.option-btn:hover{border-color:var(--accent);background:var(--accent-light)}.option-btn:active{background:var(--accent);color:#fff;transform:scale(.98)}.option-btn.selected{border-color:var(--accent);background:var(--accent-light)}.btn-back{color:var(--text-muted);cursor:pointer;background:0 0;border:none;margin-top:16px;padding:4px 0;font-size:14px;transition:color .15s}.btn-back:hover{color:var(--accent)}.fade-in{animation:.25s fadeIn}.result-card{text-align:center;padding:40px 24px}.result-kicker{color:var(--accent);letter-spacing:2px;margin-bottom:8px;font-size:14px;font-weight:600}.kicker-drunk{color:#b5651d}.kicker-fallback{color:#c0392b}.type-code{color:var(--text);letter-spacing:3px;margin-bottom:4px;font-size:56px;font-weight:800}.type-cn{color:var(--accent);margin-bottom:12px;font-size:22px}.match-badge{color:var(--text-muted);background:var(--accent-light);border-radius:20px;margin-bottom:20px;padding:4px 14px;font-size:13px;display:inline-block}.type-intro{color:var(--text-secondary);margin-bottom:20px;font-size:16px;font-style:italic;line-height:1.6}.type-desc{color:var(--text);text-align:left;margin-bottom:32px;font-size:15px;line-height:1.8}.secondary-panel{background:var(--accent-light);border-radius:var(--radius-sm);margin-bottom:32px;padding:16px}.sec-label{color:var(--text-muted);margin-bottom:6px;font-size:12px}.sec-code{color:var(--text);margin-right:8px;font-size:20px;font-weight:700}.sec-cn{color:var(--text-secondary);margin-right:12px;font-size:15px}.sec-similarity{color:var(--text-muted);font-size:13px}.section-title{color:var(--text);margin:32px 0 16px;font-size:18px;font-weight:700}#radar-canvas{margin:0 auto 24px;display:block}.dim-list{text-align:left}.dim-row{border-bottom:1px solid var(--accent-light);padding:12px 0}.dim-row:last-child{border-bottom:none}.dim-header{justify-content:space-between;align-items:center;margin-bottom:4px;display:flex}.dim-name{color:var(--text);font-size:14px;font-weight:600}.dim-level{color:#fff;border-radius:12px;padding:2px 10px;font-size:12px;font-weight:700}.level-L{background:#b5651d}.level-M{background:#d4a843}.level-H{background:var(--accent)}.dim-desc{color:var(--text-secondary);font-size:13px;line-height:1.6}.top5-list{text-align:left}.top5-row{border-bottom:1px solid var(--accent-light);align-items:center;gap:12px;padding:10px 0;display:flex}.top5-row:last-child{border-bottom:none}.top5-rank{color:var(--accent);min-width:28px;font-size:14px;font-weight:700}.top5-code{color:var(--text);min-width:72px;font-size:15px;font-weight:700}.top5-cn{color:var(--text-secondary);flex:1;font-size:14px}.top5-sim{color:var(--text-muted);font-size:13px}.disclaimer{color:var(--text-muted);background:var(--bg);border-radius:var(--radius-sm);text-align:left;margin:28px 0;padding:16px;font-size:12px;line-height:1.6}.result-actions{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.result-actions .btn-primary{padding:12px 32px}@media (width<=480px){.title{font-size:56px}.card{padding:28px 18px}.intro-card{padding:48px 18px}.type-code{font-size:44px}.result-actions{flex-direction:column}.result-actions .btn-primary,.result-actions .btn-secondary{width:100%}}