:root{--primary:#6366f1;--primary-hover:#4f46e5;--secondary:#ec4899;--accent:#8b5cf6;--background:#0f172a;--surface:#1e293b;--surface-hover:#334155;--text:#f8fafc;--text-muted:#94a3b8;--border:#ffffff1a;--glass:#ffffff0d;--glass-border:#ffffff1a;--success:#10b981;--error:#ef4444;--font-main:"Inter", system-ui, -apple-system, sans-serif}*{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0}body{font-family:var(--font-main);color:var(--text);background:radial-gradient(circle at 100% 0,#1e1b4b,#0f172a);min-height:100vh;overflow-x:hidden}button{cursor:pointer;border:none;outline:none;font-family:inherit;transition:all .2s}input{font-family:inherit}.glass-card{background:var(--glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:16px;box-shadow:0 8px 32px #0000004d}.btn-primary{background:linear-gradient(135deg, var(--primary), var(--accent));color:#fff;border-radius:12px;align-items:center;gap:8px;padding:10px 20px;font-weight:600;display:flex}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 20px #6366f166}.container{max-width:1200px;margin:0 auto;padding:2rem}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--background)}::-webkit-scrollbar-thumb{background:var(--surface);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:var(--surface-hover)}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}.float-anim{animation:3s ease-in-out infinite float}.app-container{min-height:100vh;padding-bottom:2rem}.navbar{border-radius:24px;justify-content:space-between;align-items:center;margin:1.5rem;padding:1.25rem 2.5rem;display:flex}.nav-logo{cursor:pointer;align-items:center;gap:14px;font-size:1.6rem;font-weight:800;display:flex}.logo-orb{background:linear-gradient(135deg, var(--primary), var(--accent));border-radius:12px;justify-content:center;align-items:center;width:42px;height:42px;display:flex;box-shadow:0 0 20px #6366f166}.logo-icon{color:#fff}.nav-stats{gap:15px;display:flex}.stat-item{background:var(--glass);border:1px solid var(--glass-border);border-radius:12px;align-items:center;gap:8px;padding:8px 16px;font-size:.95rem;font-weight:600;display:flex}.zap-icon{color:#fbbf24}.home-header{justify-content:space-between;align-items:center;margin-top:1rem;margin-bottom:3rem;display:flex}.hero-text h1{background:linear-gradient(90deg,#fff,#94a3b8);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:.5rem;font-size:2.5rem}.hero-text p{color:var(--text-muted);font-size:1.1rem}.main-add-btn{border-radius:16px;padding:16px 32px;font-size:1.1rem}.fab-btn{z-index:100;border-radius:50%;justify-content:center;align-items:center;width:70px;height:70px;padding:0;display:flex;position:fixed;bottom:2rem;right:2rem;box-shadow:0 15px 35px #6366f180}.modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;background:#000000b3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.add-lang-modal{flex-direction:column;gap:1.5rem;width:90%;max-width:450px;padding:2.5rem;display:flex}.add-lang-modal h2{font-size:1.8rem}.add-lang-modal input{background:var(--surface);border:1px solid var(--border);color:#fff;border-radius:12px;padding:14px;font-size:1.1rem}.btn-secondary{background:var(--surface);color:#fff;border-radius:12px;padding:12px 24px;font-weight:600}.form-actions{justify-content:flex-end;gap:1.5rem;margin-top:1rem;display:flex}.lang-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:25px;display:grid}.lang-card{cursor:pointer;align-items:center;gap:1.5rem;padding:2rem;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden}.lang-icon{background:#ffffff0d;border-radius:20px;justify-content:center;align-items:center;width:80px;height:80px;font-size:3rem;display:flex;box-shadow:inset 0 0 10px #ffffff1a}.lang-info h3{margin-bottom:6px;font-size:1.4rem}.delete-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:10px;justify-content:center;align-items:center;width:40px;height:40px;margin-left:auto;transition:all .2s;display:flex}.delete-btn:hover{color:var(--error);background:#ef44441a;transform:scale(1.1)}.empty-state{text-align:center;padding:8rem 0}.empty-icon-wrapper{color:var(--primary);opacity:.5;margin-bottom:1.5rem}.detail-header-container{border-radius:24px;margin-bottom:2.5rem;padding:2.5rem}.detail-header-top{align-items:center;gap:1.5rem;margin-bottom:2rem;display:flex}.back-btn{background:var(--glass);border:1px solid var(--glass-border);color:#fff;cursor:pointer;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;transition:all .2s;display:flex}.back-btn:hover{background:var(--surface-hover);transform:translate(-4px)}.lang-emoji{font-size:2.5rem}.title-group{align-items:center;gap:1rem;display:flex}.title-group h2{font-size:2.2rem}.word-stats{gap:40px;display:flex}.word-stat-box{flex-direction:column;display:flex}.word-stat-box strong{color:var(--primary);font-size:1.8rem}.word-stat-box span{color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;font-size:.9rem}.word-controls{grid-template-columns:1fr 1fr;gap:25px;margin-bottom:2.5rem;display:grid}.btn-game{color:#fff;cursor:pointer;background:linear-gradient(135deg,#10b981,#059669);border:none;border-radius:12px;align-items:center;gap:8px;margin-left:auto;padding:10px 24px;font-weight:600;transition:all .2s;display:flex}.btn-game:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 15px #10b9814d}.btn-game:disabled{opacity:.4;cursor:not-allowed;background:var(--surface);color:var(--text-muted)}.search-bar{align-items:center;gap:12px;padding:0 1.5rem;display:flex}.search-icon{color:var(--primary)}.search-bar input{color:#fff;background:0 0;border:none;outline:none;width:100%;padding:14px 0;font-size:1rem}.search-bar input::placeholder{color:var(--text-muted)}.add-word-form{gap:12px;padding:8px;display:flex}.add-word-form input{border:1px solid var(--border);color:#fff;background:#ffffff0d;border-radius:12px;outline:none;flex:1;padding:10px 15px;font-size:.95rem;transition:border-color .2s}.add-word-form input:focus{border-color:var(--primary);background:#ffffff14}.add-btn-circle{border-radius:50%;justify-content:center;width:48px;min-width:48px;height:48px;padding:0}.word-list{flex-direction:column;gap:12px;display:flex}.word-item{justify-content:space-between;align-items:center;padding:1rem 1.5rem;transition:background .2s;display:flex}.word-item:hover{background:#ffffff08}.word-main{align-items:center;gap:10px;display:flex}.speak-btn{color:var(--text-muted);background:#ffffff0d;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;display:flex}.speak-btn:hover{color:var(--primary);background:#6366f11a}.delete-btn-small{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:10px;justify-content:center;align-items:center;width:36px;height:36px;transition:all .2s;display:flex}.delete-btn-small:hover{color:var(--error);background:#ef44441a}.quiz-container{width:100%;max-width:700px;padding:3rem}.quiz-score{color:#fbbf24;align-items:center;gap:8px;font-weight:700;display:flex}.question-word-row{justify-content:center;align-items:center;gap:1.5rem;margin-bottom:1rem;display:flex}.speak-btn-inline{background:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:50px;height:50px;transition:all .2s;display:flex;box-shadow:0 10px 20px #6366f14d}.speak-btn-inline:hover{background:var(--accent);transform:scale(1.1)}.question-box h3{margin:0;font-size:3.5rem}.question-box p{color:var(--text-muted);margin-bottom:2.5rem;font-size:1.1rem}.options-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;display:grid}.option-btn{text-align:center;padding:24px;font-size:1.2rem;transition:all .3s cubic-bezier(.4,0,.2,1)}.option-btn.correct{box-shadow:0 0 20px #10b98166;color:#fff!important;background:#10b981!important;border-color:#059669!important}.option-btn.wrong{animation:.4s cubic-bezier(.36,.07,.19,.97) both shake;box-shadow:0 0 20px #ef444466;color:#fff!important;background:#ef4444!important;border-color:#dc2626!important}@keyframes shake{10%,90%{transform:translate(-1px)}20%,80%{transform:translate(2px)}30%,50%,70%{transform:translate(-4px)}40%,60%{transform:translate(4px)}}.result-card{text-align:center;flex-direction:column;align-items:center;gap:1.5rem;max-width:600px;margin:0 auto;padding:4rem;display:flex}.result-icon{margin-bottom:1rem}.final-score{color:var(--text-muted);font-size:1.4rem}.final-score b{color:#fff}.score-ring{width:180px;margin:2rem 0}.result-actions{justify-content:center;gap:1.5rem;width:100%;margin-top:2rem;display:flex}.result-actions button{flex:1;max-width:200px}.circular-chart{max-width:100%;max-height:250px;margin:10px auto;display:block}.circle-bg{fill:none;stroke:var(--surface);stroke-width:3.8px}.circle{fill:none;stroke-width:2.8px;stroke-linecap:round;stroke:var(--primary)}.percentage{fill:#fff;text-anchor:middle;font-size:.5rem;font-weight:700}@media (width<=900px){.word-controls{grid-template-columns:1fr}}.nav-right{align-items:center;gap:20px;display:flex}.user-menu{border-radius:14px;align-items:center;gap:12px;padding:6px 6px 6px 14px;display:flex}.user-info{color:var(--primary);align-items:center;gap:8px;font-size:.9rem;font-weight:600;display:flex}.logout-btn{background:var(--surface);color:var(--text-muted);border-radius:10px;justify-content:center;align-items:center;width:36px;height:36px;display:flex}.logout-btn:hover{color:var(--error);background:#ef44441a}.login-container{background:radial-gradient(circle,#1e1b4b,#0f172a);justify-content:center;align-items:center;min-height:100vh;padding:2rem;display:flex}.login-card{text-align:center;width:100%;max-width:420px;padding:3rem}.login-logo-orb{background:linear-gradient(135deg, var(--primary), var(--accent));border-radius:24px;justify-content:center;align-items:center;width:80px;height:80px;margin:0 auto 1.5rem;display:flex;box-shadow:0 20px 40px #6366f14d}.login-header h1{margin-bottom:.5rem;font-size:2.2rem}.login-header p{color:var(--text-muted);margin-bottom:2.5rem}.login-form{flex-direction:column;gap:1.25rem;display:flex}.input-group{align-items:center;display:flex;position:relative}.input-icon{color:var(--text-muted);position:absolute;left:14px}.input-group input{background:var(--surface);border:1px solid var(--border);color:#fff;border-radius:14px;outline:none;width:100%;padding:14px 14px 14px 46px;font-size:1rem;transition:all .2s}.input-group input:focus{border-color:var(--primary);background:#ffffff14;box-shadow:0 0 0 4px #6366f11a}.login-btn{margin-top:1rem;padding:14px;font-size:1.1rem}.login-footer{color:var(--text-muted);margin-top:2rem;font-size:.9rem}.login-footer span{color:var(--primary);cursor:pointer;font-weight:600}