:root{--primary-gold: #d4a84b;--primary-gold-light: #f0d78c;--primary-gold-dark: #8b6914;--accent-red: #c41e3a;--accent-blue: #1e3a8b;--bg-dark: #0a0a0f;--bg-card: #14141f;--bg-elevated: #1e1e2e;--text-primary: #ffffff;--text-secondary: #a0a0b0;--text-muted: #606070;--border-subtle: rgba(212, 168, 75, .2);--border-gold: rgba(212, 168, 75, .5);--glow-gold: 0 0 20px rgba(212, 168, 75, .5);--shadow-elevated: 0 10px 40px rgba(0, 0, 0, .5)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased}body{font-family:Microsoft YaHei,sans-serif;background:var(--bg-dark);color:var(--text-primary);min-height:100vh;overflow-x:hidden}.app-container{position:relative;min-height:100vh;width:100%}.bg-effects{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;overflow:hidden}.particles{position:absolute;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(circle at 20% 30%,rgba(212,168,75,.1) 0%,transparent 50%),radial-gradient(circle at 80% 70%,rgba(196,30,58,.08) 0%,transparent 40%);animation:particleFloat 20s ease-in-out infinite}@keyframes particleFloat{0%,to{transform:translateY(0) scale(1);opacity:.5}50%{transform:translateY(-20px) scale(1.1);opacity:.8}}.glow-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:600px;border:1px solid rgba(212,168,75,.1);border-radius:50%;animation:glowPulse 4s ease-in-out infinite}@keyframes glowPulse{0%,to{opacity:.3;transform:translate(-50%,-50%) scale(1)}50%{opacity:.6;transform:translate(-50%,-50%) scale(1.05)}}.page{position:fixed;top:0;right:0;bottom:0;left:0;display:none;flex-direction:column;z-index:1;overflow-y:auto;padding:20px;opacity:0;transition:opacity .4s ease}.page.active{display:flex;opacity:1}.intro-content{max-width:600px;margin:auto;text-align:center;padding:40px 20px}.logo-container{margin-bottom:40px}.logo-icon{font-size:64px;margin-bottom:16px;animation:iconFloat 3s ease-in-out infinite;filter:drop-shadow(0 0 20px rgba(212,168,75,.5))}@keyframes iconFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.title{font-size:48px;font-weight:900;background:linear-gradient(135deg,var(--primary-gold-light) 0%,var(--primary-gold) 50%,var(--primary-gold-dark) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px;letter-spacing:4px}.subtitle{font-size:18px;color:var(--text-secondary);letter-spacing:8px;text-transform:uppercase}.intro-description{margin-bottom:48px;padding:24px;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:16px;position:relative}.intro-description:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--primary-gold),transparent)}.intro-description p{color:var(--text-secondary);line-height:1.8;margin-bottom:8px}.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:16px 48px;font-size:18px;font-weight:600;font-family:inherit;color:var(--text-primary);background:var(--bg-elevated);border:2px solid var(--border-gold);border-radius:8px;cursor:pointer;overflow:hidden;transition:all .3s ease;letter-spacing:2px}.btn:hover{transform:translateY(-2px);box-shadow:var(--glow-gold)}.btn-primary{background:linear-gradient(135deg,#d4a84b33,#d4a84b0d)}.btn-glow{animation:btnGlow 2s ease-in-out infinite}@keyframes btnGlow{0%,to{box-shadow:0 0 10px #d4a84b4d}50%{box-shadow:0 0 25px #d4a84b99,0 0 40px #d4a84b4d}}.btn-shine{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}.btn:hover .btn-shine{left:100%}.quiz-header{max-width:600px;width:100%;margin:0 auto 32px;padding-top:20px}.progress-container{display:flex;align-items:center;gap:16px}.progress-bar{flex:1;height:6px;background:var(--bg-elevated);border-radius:3px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--primary-gold-dark),var(--primary-gold),var(--primary-gold-light));border-radius:3px;transition:width .3s ease;box-shadow:0 0 10px #d4a84b80}.progress-text{font-size:14px;color:var(--text-secondary);font-weight:600;min-width:50px;text-align:right}.quiz-content{max-width:600px;width:100%;margin:0 auto;flex:1;display:flex;flex-direction:column;padding-bottom:40px}.question-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:20px;padding:32px;margin-bottom:24px;position:relative;overflow:hidden}.question-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary-gold-dark),var(--primary-gold),var(--primary-gold-light),var(--primary-gold-dark));background-size:200% 100%;animation:shimmer 3s linear infinite}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.question-number{font-size:12px;color:var(--primary-gold);letter-spacing:3px;margin-bottom:16px;font-weight:600}.question-text{font-size:20px;line-height:1.6;color:var(--text-primary);font-weight:500}.options-container{display:flex;flex-direction:column;gap:12px}.option-btn{display:flex;align-items:flex-start;gap:16px;padding:20px 24px;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:12px;cursor:pointer;transition:all .3s ease;text-align:left;position:relative;overflow:hidden}.option-btn:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--primary-gold);transform:scaleY(0);transition:transform .3s ease}.option-btn:hover{background:var(--bg-elevated);border-color:var(--border-gold);transform:translate(4px)}.option-btn:hover:before{transform:scaleY(1)}.option-label{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:50%;font-size:12px;font-weight:600;color:var(--primary-gold);flex-shrink:0}.option-text{font-size:15px;line-height:1.5;color:var(--text-secondary);flex:1}.option-btn:hover .option-text{color:var(--text-primary)}.result-container{max-width:900px;width:100%;margin:0 auto;padding:40px 20px}.result-header{text-align:center;margin-bottom:40px}.result-kicker{font-size:14px;color:var(--primary-gold);letter-spacing:4px;margin-bottom:12px;text-transform:uppercase}.hero-name{font-size:48px;font-weight:900;background:linear-gradient(135deg,var(--primary-gold-light),var(--primary-gold),var(--primary-gold-dark));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px;text-shadow:0 0 40px rgba(212,168,75,.3)}.hero-title{font-size:18px;color:var(--text-secondary);font-weight:500}.result-body{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-bottom:40px}.hero-showcase{position:relative}.hero-image-container{position:relative;border-radius:20px;overflow:hidden;box-shadow:var(--shadow-elevated)}.hero-image{width:100%;height:auto;display:block;transition:transform .5s ease}.hero-image-container:hover .hero-image{transform:scale(1.05)}.hero-image-glow{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,transparent 50%,rgba(212,168,75,.2) 100%);pointer-events:none}.hero-info{display:flex;flex-direction:column;gap:24px}.mbti-tag{display:inline-block;padding:8px 20px;background:var(--bg-elevated);border:1px solid var(--border-gold);border-radius:20px;font-size:14px;font-weight:600;color:var(--primary-gold);letter-spacing:2px;width:fit-content}.hero-description{font-size:16px;line-height:1.8;color:var(--text-secondary)}.hero-stats{display:flex;gap:32px;padding-top:24px;border-top:1px solid var(--border-subtle)}.stat-item{display:flex;flex-direction:column;gap:4px}.stat-label{font-size:12px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}.stat-value{font-size:16px;font-weight:600;color:var(--text-primary)}.result-actions{display:flex;justify-content:center;gap:20px}.btn-secondary{background:transparent;border-color:var(--text-muted);color:var(--text-secondary)}.btn-secondary:hover{border-color:var(--primary-gold);color:var(--text-primary)}.quiz-footer{display:flex;justify-content:center;margin-top:32px;padding-top:24px;border-top:1px solid var(--border-subtle)}.btn-prev{padding:12px 32px;font-size:14px;background:transparent;border-color:var(--text-muted);color:var(--text-secondary);opacity:0;pointer-events:none;transition:all .3s ease}.btn-prev:not(:disabled){opacity:1;pointer-events:auto}.btn-prev:not(:disabled):hover{border-color:var(--primary-gold);color:var(--text-primary);transform:translateY(-2px)}@media (max-width: 768px){.title,.hero-name{font-size:36px}.result-body{grid-template-columns:1fr;gap:32px}.hero-showcase{order:-1}.question-text{font-size:18px}.option-btn{padding:16px 20px}}