*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary:#4e59ff;--bg-secondary:#eaeaea;--txt-primary:#f7f7f7;--txt-secondary:#222;--purple-50:#e6e6ff;--purple-100:#ccf;--purple-200:#99f;--purple-300:#66f;--purple-400:var(--bg-primary);--purple-500:#4242ff;--purple-600:#33f;--purple-glow:#4e59ff33;--purple-glow-strong:#4e59ff59;--correct:#10b981;--correct-bg:#10b9811a;--correct-border:#10b98140;--wrong:#ef4444;--wrong-bg:#ef444414;--wrong-border:#ef444433;--warning:#f59e0b;--warning-bg:#f59e0b1a;--warning-border:#f59e0b33;--bg-elevated:var(--bg-secondary);--bg-surface:#f0f0f0;--bg-surface-hover:#e4e4e4;--text-primary:var(--txt-secondary);--text-secondary:#4a4a4a;--text-muted:gray;--border-subtle:#22222214;--border-default:#2222221f;--border-hover:#4e59ff4d;--gradient-purple:var(--bg-primary);--gradient-bg:var(--bg-primary);--shadow-sm:0 1px 3px #2222220f, 0 1px 2px #2222220a;--shadow-md:0 4px 16px #22222214, 0 2px 6px #2222220a;--shadow-purple:0 8px 28px #4e59ff4d;--shadow-purple-lg:0 12px 36px #4e59ff73;--shadow-card:0 8px 32px #22222212, 0 2px 8px #22222208;--card-radius:24px;--btn-radius:14px;--transition-fast:.15s cubic-bezier(.4, 0, .2, 1);--transition-normal:.25s cubic-bezier(.4, 0, .2, 1);--transition-spring:.4s cubic-bezier(.34, 1.56, .64, 1);--font-family:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif}body{font-family:var(--font-family);background:var(--gradient-bg);min-height:100vh;color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}#root{justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex;position:relative}.bg-orbs{display:none}.bg-orbs .orb{filter:blur(100px);border-radius:50%;animation:25s ease-in-out infinite orbFloat;position:absolute}.bg-orbs .orb:first-child{background:#ff83d61f;width:550px;height:550px;animation-delay:0s;top:-12%;right:-8%}.bg-orbs .orb:nth-child(2){background:#de52b01a;width:450px;height:450px;animation-delay:-8s;bottom:-12%;left:-8%}.bg-orbs .orb:nth-child(3){background:#ffa4e11f;width:320px;height:320px;animation-delay:-16s;top:45%;left:35%}@keyframes orbFloat{0%,to{transform:translate(0)scale(1)}33%{transform:translate(40px,-60px)scale(1.08)}66%{transform:translate(-30px,30px)scale(.94)}}.bg-orbs:after{content:"";background-image:radial-gradient(#ff83d614 1px,#0000 1px);background-size:32px 32px;position:absolute;inset:0}.card{background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:var(--card-radius);box-shadow:var(--shadow-card);z-index:1;width:100%;max-width:540px;animation:cardIn .5s var(--transition-spring) both;position:relative;overflow:hidden}@keyframes cardIn{0%{opacity:0;transform:translateY(24px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}.card-body{padding:40px 36px}.start-screen{text-align:center}.start-screen .logo-container{margin-bottom:32px}.start-screen .logo-icon{background:var(--bg-elevated);border:2px solid var(--border-default);width:80px;height:80px;box-shadow:var(--shadow-sm);border-radius:22px;justify-content:center;align-items:center;margin-bottom:20px;font-size:38px;animation:4s ease-in-out infinite logoFloat;display:inline-flex;position:relative}.start-screen .logo-icon:after{content:"";background:var(--bg-elevated);opacity:.5;filter:blur(10px);z-index:-1;border-radius:28px;position:absolute;inset:-6px}@keyframes logoFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.start-screen .title{color:var(--text-primary);letter-spacing:-.5px;margin-bottom:8px;font-size:2.4rem;font-weight:800}.start-screen .subtitle{color:var(--text-secondary);margin-bottom:36px;font-size:1.05rem;font-weight:500}.start-screen .info-badges{flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:40px;display:flex}.info-badge{background:var(--bg-surface);border:1px solid var(--border-subtle);color:var(--text-secondary);transition:all var(--transition-normal);border-radius:100px;align-items:center;gap:6px;padding:8px 16px;font-size:.82rem;font-weight:600;display:inline-flex}.info-badge:hover{border-color:var(--border-hover);background:var(--bg-surface-hover)}.info-badge .badge-icon{font-size:.95rem}.btn-primary{width:100%;font-size:1rem;font-weight:700;font-family:var(--font-family);color:var(--txt-primary);background:var(--gradient-purple);border-radius:var(--btn-radius);cursor:pointer;transition:all var(--transition-normal);box-shadow:var(--shadow-purple);border:none;justify-content:center;align-items:center;gap:10px;padding:16px 32px;display:inline-flex;position:relative;overflow:hidden}.btn-primary:before{content:"";opacity:0;transition:opacity var(--transition-normal);background:#33f;position:absolute;inset:0}.btn-primary:hover{box-shadow:var(--shadow-purple-lg);transform:translateY(-2px)}.btn-primary:hover:before{opacity:1}.btn-primary:active{transform:translateY(0)scale(.98)}.btn-primary span{z-index:1;position:relative}.btn-primary .btn-icon{z-index:1;transition:transform var(--transition-normal);font-size:1.2rem;position:relative}.btn-primary:hover .btn-icon{transform:translate(4px)}.progress-container{padding:0}.progress-header{justify-content:space-between;align-items:center;padding:20px 36px 14px;display:flex}.progress-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;font-size:.78rem;font-weight:600}.progress-count{color:var(--purple-600);font-size:.78rem;font-weight:700}.progress-track{background:var(--purple-100);width:100%;height:4px;overflow:hidden}.progress-fill{background:var(--gradient-purple);border-radius:0 4px 4px 0;height:100%;transition:width .5s cubic-bezier(.34,1.56,.64,1);position:relative}.progress-fill:after{content:"";background:var(--purple-500);width:8px;height:8px;box-shadow:0 0 10px var(--purple-glow-strong);border-radius:50%;position:absolute;top:-2px;right:0}.question-section{animation:.35s ease-out both fadeSlideIn}@keyframes fadeSlideIn{0%{opacity:0;transform:translate(16px)}to{opacity:1;transform:translate(0)}}.question-number{color:var(--purple-600);background:var(--purple-50);border:1px solid var(--purple-200);text-transform:uppercase;letter-spacing:.5px;border-radius:100px;align-items:center;gap:6px;margin-bottom:22px;padding:6px 14px;font-size:.78rem;font-weight:700;display:inline-flex}.question-text{color:var(--text-primary);margin-bottom:28px;font-size:1.2rem;font-weight:700;line-height:1.55}.options-list{flex-direction:column;gap:10px;margin-bottom:28px;display:flex}.option-btn{width:100%;font-size:.92rem;font-weight:500;font-family:var(--font-family);color:var(--text-secondary);background:var(--bg-surface);border:1.5px solid var(--border-subtle);cursor:pointer;transition:all var(--transition-normal);text-align:left;border-radius:14px;align-items:center;gap:14px;padding:15px 18px;display:flex;position:relative}.option-btn .option-letter{background:var(--bg-elevated);border:1.5px solid var(--border-default);width:32px;height:32px;color:var(--text-muted);transition:all var(--transition-normal);border-radius:9px;flex-shrink:0;justify-content:center;align-items:center;font-size:.82rem;font-weight:700;display:inline-flex}.option-btn:hover{border-color:var(--border-hover);background:var(--bg-surface-hover);box-shadow:var(--shadow-sm);transform:translateY(-1px)}.option-btn:hover .option-letter{border-color:var(--purple-300);color:var(--purple-600)}.option-btn.selected{border-color:var(--purple-400);background:var(--purple-50);box-shadow:0 0 0 3px #8b5cf61a, var(--shadow-sm)}.option-btn.selected .option-letter{background:var(--gradient-purple);color:var(--txt-primary);border-color:#0000;box-shadow:0 4px 12px #8b5cf640}.option-btn.selected .option-text{color:var(--text-primary);font-weight:600}.btn-next{width:100%;font-size:.95rem;font-weight:700;font-family:var(--font-family);color:var(--txt-primary);background:var(--gradient-purple);border-radius:var(--btn-radius);cursor:pointer;transition:all var(--transition-normal);box-shadow:var(--shadow-purple);border:none;justify-content:center;align-items:center;gap:8px;padding:15px 28px;display:inline-flex}.btn-next:hover:not(:disabled){box-shadow:var(--shadow-purple-lg);transform:translateY(-2px)}.btn-next:active:not(:disabled){transform:translateY(0)scale(.98)}.btn-next:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;background:var(--purple-200);color:var(--text-muted)}.btn-next .btn-icon{transition:transform var(--transition-normal);font-size:1.1rem}.btn-next:hover:not(:disabled) .btn-icon{transform:translate(4px)}.result-screen{text-align:center}.result-emoji{animation:bounceIn .6s var(--transition-spring) both;margin-bottom:8px;font-size:60px}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{transform:scale(1.1)}to{opacity:1;transform:scale(1)}}.result-title{color:var(--text-primary);margin-bottom:6px;font-size:1.8rem;font-weight:800}.result-subtitle{color:var(--text-muted);margin-bottom:32px;font-size:.95rem;font-weight:500}.score-circle-container{justify-content:center;margin-bottom:32px;display:flex}.score-circle{width:160px;height:160px;position:relative}.score-circle svg{width:160px;height:160px;transform:rotate(-90deg)}.score-circle .circle-bg{fill:none;stroke:var(--purple-100);stroke-width:10px}.score-circle .circle-progress{fill:none;stroke:var(--purple-400);stroke-width:10px;stroke-linecap:round;filter:drop-shadow(0 0 6px var(--purple-glow));transition:stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1)}.score-circle .score-text{flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.score-circle .score-value{color:var(--text-primary);font-size:2.8rem;font-weight:800;line-height:1}.score-circle .score-unit{color:var(--text-muted);margin-top:4px;font-size:.82rem;font-weight:600}.stats-row{grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:28px;display:grid}.stat-item{background:var(--bg-surface);border:1px solid var(--border-subtle);transition:all var(--transition-normal);border-radius:14px;padding:16px 10px}.stat-item:hover{border-color:var(--border-hover);box-shadow:var(--shadow-sm)}.stat-value{color:var(--text-primary);margin-bottom:2px;font-size:1.35rem;font-weight:800}.stat-value.correct{color:var(--correct)}.stat-value.wrong{color:var(--wrong)}.stat-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-size:.7rem;font-weight:600}.result-message{border-radius:12px;margin-bottom:28px;padding:14px 20px;font-size:.9rem;font-weight:600}.result-message.excellent{background:var(--correct-bg);color:#059669;border:1px solid var(--correct-border)}.result-message.good{background:var(--warning-bg);color:#d97706;border:1px solid var(--warning-border)}.result-message.low{background:var(--wrong-bg);color:#dc2626;border:1px solid var(--wrong-border)}@media (width<=560px){.card-body{padding:28px 20px}.start-screen .title{font-size:1.9rem}.question-text{font-size:1.05rem}.stats-row{grid-template-columns:1fr;gap:8px}.stat-item{justify-content:space-between;align-items:center;padding:12px 18px;display:flex}.result-emoji{font-size:48px}.score-circle,.score-circle svg{width:130px;height:130px}.score-circle .score-value{font-size:2.2rem}.progress-header{padding:16px 20px 10px}.start-screen .info-badges{gap:8px}.info-badge{padding:6px 12px;font-size:.78rem}}