:root{--bg:#f8fafc;--surface:#fff;--navy:#1e1b4b;--navy-hover:#312e81;--primary:#6366f1;--primary-hover:#4f46e5;--accent:#f59e0b;--text-main:#1e293b;--text-sub:#64748b;--text-muted:#94a3b8;--border:rgba(226,232,240,.8);--border-focus:#6366f1;--green-bg:#ecfdf5;--green-text:#064e3b;--amber-bg:#fffbeb;--amber-text:#d97706;--red-bg:#fef2f2;--red-text:#991b1b;--shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);--shadow-md:0 4px 6px -1px rgba(99,102,241,.1),0 2px 4px -2px rgba(99,102,241,.05);--shadow-lg:0 10px 15px -3px rgba(99,102,241,.1),0 4px 6px -4px rgba(99,102,241,.05);--shadow-xl:0 20px 25px -5px rgba(30,27,75,.1),0 8px 10px -6px rgba(30,27,75,.05);--shadow-glow:0 0 40px -10px rgba(99,102,241,.3);--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);font-family:DM Sans,sans-serif;color:var(--text-main);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.font-display,h1,h2,h3,h4{font-family:Sora,sans-serif;letter-spacing:-.03em}.font-prestige{font-family:Playfair Display,serif;letter-spacing:-.02em}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-focus);border-radius:99px}.bg-grid{background-size:30px 30px;background-image:linear-gradient(90deg,rgba(15,23,42,.03) 1px,transparent 0),linear-gradient(180deg,rgba(15,23,42,.03) 1px,transparent 0)}.bg-mesh{position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1;overflow:hidden;background:radial-gradient(at 0 0,rgba(2,132,199,.08) 0,transparent 50%),radial-gradient(at 100% 0,rgba(16,185,129,.06) 0,transparent 50%),radial-gradient(at 100% 100%,rgba(15,23,42,.02) 0,transparent 50%)}.glass-panel{background:hsla(0,0%,100%,.7);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid hsla(0,0%,100%,.6);box-shadow:var(--shadow-xl)}.card-pro{background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--border);box-shadow:var(--shadow-sm);transition:all .3s cubic-bezier(.16,1,.3,1)}.card-pro:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--border-focus)}.tricolor-bar{height:4px;width:100%;background:linear-gradient(90deg,#002395 33.3%,#fff 33.3% 66.6%,#ed2939 66.6%);box-shadow:inset 0 -1px 0 rgba(0,0,0,.05)}.input-pro{width:100%;padding:.85rem 1rem;border:1.5px solid var(--border);border-radius:var(--radius-md);font-family:DM Sans,sans-serif;font-size:.95rem;color:var(--text-main);background:var(--surface);transition:all .2s ease;box-shadow:var(--shadow-sm)}.input-pro:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(2,132,199,.15)}@keyframes slideUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes bounceIn{0%{transform:scale(.96);opacity:0}50%{transform:scale(1.01)}to{transform:scale(1);opacity:1}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes shake{0%,to{transform:translateX(0)}20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}.anim-slide{animation:slideUp .6s cubic-bezier(.4,0,.2,1) both}.anim-bounce{animation:bounceIn .5s cubic-bezier(.4,0,.2,1) both}.anim-float{animation:float 4s ease-in-out infinite}.anim-fade{animation:fadeIn .4s ease-in-out both}.anim-shake{animation:shake .4s ease}.btn-answer{width:100%;text-align:left;cursor:pointer;border:none;transition:all .15s cubic-bezier(.16,1,.3,1)}.btn-answer:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,.08)}.btn-answer:active:not(:disabled){transform:translateY(2px);box-shadow:none}.btn-answer:disabled{cursor:default}.btn-primary{cursor:pointer;border:none;transition:all .15s cubic-bezier(.16,1,.3,1)}.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.05)}.btn-primary:active{transform:translateY(2px);box-shadow:none!important}.btn-ghost{cursor:pointer;border:none;background:none;transition:all .2s ease}.btn-ghost:hover{background:var(--bg)!important;border-color:var(--border-focus)!important}.mode-card{cursor:pointer;transition:all .25s cubic-bezier(.16,1,.3,1)}.mode-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}.mode-card:active{transform:translateY(0)}.pill-cat{cursor:pointer;transition:all .2s ease}.pill-cat:hover{transform:translateY(-2px);box-shadow:0 3px 8px rgba(0,0,0,.06)}@keyframes answerIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes slideFromBottom{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}.anim-slide-up{animation:slideFromBottom .4s cubic-bezier(.16,1,.3,1) both}.anim-scale{transition:transform .2s ease}.anim-scale:hover{transform:scale(1.03)}.card-hover{transition:all .25s cubic-bezier(.16,1,.3,1)}.card-hover:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--border-focus)}.btn-base{display:inline-flex;align-items:center;justify-content:center;font-family:Sora,sans-serif;font-weight:600;border-radius:var(--radius-md);border:1.5px solid transparent;cursor:pointer;text-decoration:none;transition:all .2s cubic-bezier(.16,1,.3,1)}.btn-base.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}.btn-base.btn-accent{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;border-color:transparent}.btn-base.btn-ghost{background:transparent;color:var(--text-sub);border-color:var(--border)}.hover-scale-subtle{transition:transform .15s ease}.hover-scale-subtle:hover{transform:scale(1.015)}.layout-wrapper{min-height:100vh;position:relative;overflow-x:hidden}.quiz-container{max-width:540px;margin:0 auto;padding:0 1rem 120px;position:relative;z-index:10}.timer-badge{font-family:monospace;font-weight:800;letter-spacing:.5px;background:rgba(15,23,42,.05);padding:.2rem .5rem;border-radius:6px}.feedback-drawer{position:fixed;bottom:0;left:0;right:0;z-index:100;padding:1.5rem 1.5rem 2.5rem;box-shadow:0 -10px 40px rgba(0,0,0,.12);transform:translateY(100%);animation:slideFromBottom .4s cubic-bezier(.16,1,.3,1) forwards}.feedback-drawer.correct{background:#d1fae5;border-top:3px solid #10b981}.feedback-drawer.wrong{background:#fee2e2;border-top:3px solid #ef4444}.btn-duolingo{width:100%;padding:1.1rem;border:none;border-radius:16px;font-family:Sora,sans-serif;font-weight:800;font-size:1.05rem;cursor:pointer;transition:transform .1s}.btn-duolingo:active{transform:translateY(4px);box-shadow:none!important}