:root{--bg-gradient-1: #0f2027;--bg-gradient-2: #203a43;--bg-gradient-3: #2c5364;--glass-bg: rgba(255, 255, 255, .1);--glass-border: rgba(255, 255, 255, .2);--glass-shadow: 0 4px 30px rgba(0, 0, 0, .1);--primary: #4ade80;--primary-glow: rgba(74, 222, 128, .5);--text: #ffffff;--text-secondary: #a7f3d0;--accent: #facc15;--success: #2ecc71;--error: #ff4757;--radius: 24px}body{margin:0;font-family:Outfit,Inter,system-ui,sans-serif;background:linear-gradient(-45deg,#0f2027,#203a43,#2c5364,#134e5e);background-size:400% 400%;animation:gradientBG 15s ease infinite;color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased}@keyframes gradientBG{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}#root{width:100%;min-height:100vh;display:flex;justify-content:center}.app-container{width:100%;max-width:100%;min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1rem;box-sizing:border-box}.app-header{margin-bottom:3rem;text-align:center}.app-header h1{font-size:4rem;margin:0;background:linear-gradient(to right,#4ade80,#2dd4bf);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800;letter-spacing:-2px;text-shadow:0 10px 30px rgba(74,222,128,.3);animation:float 6s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.main-content{width:100%;max-width:600px;display:flex;flex-direction:column;gap:1.5rem}.card{background:var(--glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:var(--radius);padding:2.5rem;box-shadow:var(--glass-shadow);transition:transform .3s ease,box-shadow .3s ease}.card:hover{box-shadow:0 10px 40px #0003}.progress-bar-container{margin-bottom:0;background:#0003;padding:1rem;border-radius:var(--radius);border:1px solid var(--glass-border)}.progress-info{display:flex;justify-content:space-between;font-size:.9rem;font-weight:600;color:var(--text-secondary);margin-bottom:.5rem;text-transform:uppercase;letter-spacing:1px}.progress-track{height:8px;background:#ffffff1a;border-radius:4px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--primary),#2dd4bf);box-shadow:0 0 10px var(--primary-glow);transition:width .6s cubic-bezier(.34,1.56,.64,1);border-radius:4px}.question-text{font-size:1.75rem;font-weight:700;margin-top:0;margin-bottom:2rem;text-align:center;color:var(--text);line-height:1.3}.options-grid{display:grid;gap:1rem}.option-btn{width:100%;padding:1.25rem 1.5rem;text-align:left;background:#ffffff0d;border:1px solid var(--glass-border);border-radius:16px;color:var(--text);cursor:pointer;font-size:1.1rem;font-weight:500;font-family:inherit;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.option-btn:hover:not(:disabled){background:#ffffff26;transform:translate(5px);border-color:#fff6}.option-btn:active:not(:disabled){transform:scale(.98)}.option-btn.correct{background:#2ecc7133;border-color:var(--success);color:#fff;box-shadow:0 0 15px #2ecc7166}.option-btn.incorrect{background:#ff475733;border-color:var(--error);color:#fff;box-shadow:0 0 15px #ff475766}.option-btn:disabled{cursor:default;opacity:.7}.footer-actions{margin-top:2rem;display:flex;flex-direction:column;gap:1.5rem;align-items:center}.feedback{font-size:1.25rem;font-weight:800;text-transform:uppercase;letter-spacing:2px;padding:1rem 2rem;border-radius:50px;background:#0000004d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);margin-bottom:.5rem;animation:popIn .3s cubic-bezier(.175,.885,.32,1.275)}@keyframes popIn{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}.text-success{color:var(--success);border:2px solid var(--success)}.text-error{color:var(--error);border:2px solid var(--error)}.primary-btn{background:linear-gradient(135deg,var(--primary),#22c55e);color:#064e3b;border:none;padding:1.25rem 3rem;border-radius:50px;font-weight:800;cursor:pointer;min-width:200px;font-size:1.1rem;font-family:inherit;box-shadow:0 4px 15px var(--primary-glow);transition:all .3s ease;text-transform:uppercase;letter-spacing:1px}.primary-btn:hover{transform:translateY(-3px);box-shadow:0 10px 25px var(--primary-glow);filter:brightness(1.1)}.primary-btn:active{transform:translateY(1px)}.text-btn{background:none;border:none;padding:.5rem;color:var(--text-secondary);cursor:pointer;font-weight:600;font-size:.9rem;font-family:inherit;text-decoration:none;opacity:.6;transition:opacity .2s;border-bottom:1px solid transparent}.text-btn:hover{opacity:1;border-color:var(--text-secondary)}.results-card{text-align:center}.score-circle{width:180px;height:180px;border-radius:50%;border:4px solid rgba(255,255,255,.1);background:#ffffff0d;display:flex;align-items:center;justify-content:center;margin:3rem auto;font-size:4rem;font-weight:900;color:var(--primary);box-shadow:0 0 30px #4ade8033;text-shadow:0 0 20px var(--primary-glow)}.loading{font-size:2rem;font-weight:300;letter-spacing:5px;text-align:center;margin-top:20vh;color:var(--text);text-transform:uppercase;animation:breathe 3s ease-in-out infinite}@keyframes breathe{0%,to{opacity:.5}50%{opacity:1}}@media(max-width:768px){.app-container{padding:1rem}.app-header{margin-bottom:2rem}.app-header h1{font-size:2.5rem}.card{padding:1.5rem}.question-text{font-size:1.35rem;margin-bottom:1.5rem}.option-btn{padding:1rem 1.25rem;font-size:1rem}.primary-btn{width:100%;padding:1rem}.score-circle{width:140px;height:140px;font-size:3rem}}