:root{--primary: #6366f1;--primary-hover: #4f46e5;--secondary: #ec4899;--bg-dark: #0f172a;--text-main: #f8fafc;--text-muted: #94a3b8;--glass-bg: rgba(255, 255, 255, .05);--glass-border: rgba(255, 255, 255, .1);--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, .3);--purple: #8b5cf6;--blue: #3b82f6;--green: #10b981;--orange: #f59e0b}*{margin:0;padding:0;box-sizing:border-box;font-family:Outfit,sans-serif}body{background-color:var(--bg-dark);color:var(--text-main);min-height:100vh;overflow-x:hidden;position:relative}.background-shapes{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:-1;overflow:hidden}.shape{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;animation:float 20s infinite alternate ease-in-out}.shape-1{top:-10%;left:-10%;width:50vw;height:50vw;background:radial-gradient(circle,var(--primary),transparent 70%)}.shape-2{bottom:-10%;right:-10%;width:60vw;height:60vw;background:radial-gradient(circle,var(--secondary),transparent 70%);animation-delay:-5s}.shape-3{top:40%;left:60%;width:40vw;height:40vw;background:radial-gradient(circle,var(--purple),transparent 70%);animation-delay:-10s}@keyframes float{0%{transform:translate(0) scale(1)}50%{transform:translate(5%,10%) scale(1.1)}to{transform:translate(-5%,-10%) scale(.9)}}.glass-card{background:var(--glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:24px;box-shadow:var(--glass-shadow)}.page-container{min-height:100vh;display:none;opacity:0;transition:opacity .5s ease}.page-container.active{display:flex;flex-direction:column;opacity:1}#auth-container{justify-content:center;align-items:center;padding:20px}.view{width:100%;max-width:420px;padding:40px;display:none;flex-direction:column;gap:24px;animation:slideUp .5s ease forwards}.view.active{display:flex}.hidden{opacity:0;pointer-events:none}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.logo{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:8px}.logo i{font-size:36px;color:var(--primary)}.logo h2{font-size:28px;font-weight:700;background:linear-gradient(to right,var(--primary),var(--secondary));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}h3{font-size:24px;font-weight:600;text-align:center}.subtitle{text-align:center;color:var(--text-muted);font-size:14px;margin-top:-16px}.form{display:flex;flex-direction:column;gap:16px}.input-group{position:relative;display:flex;align-items:center}.input-group i{position:absolute;left:16px;color:var(--text-muted);font-size:20px}.input-group input{width:100%;padding:16px 16px 16px 48px;border-radius:12px;border:1px solid var(--glass-border);background:#0003;color:var(--text-main);font-size:15px;outline:none;transition:all .3s ease}.input-group input:focus{border-color:var(--primary);box-shadow:0 0 0 2px #6366f133}.input-group input::placeholder{color:var(--text-muted)}.form-options{display:flex;justify-content:space-between;align-items:center;font-size:14px}.remember{display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--text-muted)}.forgot-password{color:var(--primary);text-decoration:none;font-weight:500}.btn{padding:16px;border-radius:12px;border:none;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease}.primary-btn{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;margin-top:8px;box-shadow:0 4px 15px #6366f166}.primary-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #6366f199}.primary-btn:active{transform:translateY(0)}.toggle-view{text-align:center;font-size:14px;color:var(--text-muted);margin-top:8px}.toggle-view span{color:var(--primary);font-weight:600;cursor:pointer}.toggle-view span:hover{text-decoration:underline}.glass-nav{display:flex;justify-content:space-between;align-items:center;padding:16px 5%;background:var(--glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--glass-border);position:sticky;top:0;z-index:10}.nav-logo{display:flex;align-items:center;gap:8px}.nav-logo i{font-size:28px;color:var(--primary)}.nav-logo h2{font-size:20px;font-weight:700}.nav-links{display:flex;gap:32px}.nav-link{color:var(--text-muted);text-decoration:none;font-weight:500;font-size:16px;cursor:pointer;transition:all .3s ease;padding:8px 16px;border-radius:12px}.nav-link:hover{color:var(--text-main);background:#ffffff0d}.nav-link.active{color:var(--primary);background:#6366f11a}.nav-profile{display:flex;align-items:center;gap:20px}.stats{display:flex;gap:16px}.stat-item{display:flex;align-items:center;gap:6px;background:#0003;padding:6px 12px;border-radius:20px;font-size:14px;font-weight:600}.text-orange{color:#ff8a65}.text-yellow{color:#ffd54f}.avatar{width:40px;height:40px;border-radius:50%;background:var(--primary);cursor:pointer;overflow:hidden;border:2px solid var(--glass-border);transition:transform .3s ease}.avatar:hover{transform:scale(1.1)}.avatar img{width:100%;height:100%;object-fit:cover}.logout-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#ff453a1a;color:#ff453a;border-radius:50%;cursor:pointer;transition:all .3s ease;border:1px solid rgba(255,69,58,.2)}.logout-btn:hover{background:#ff453a;color:#fff;transform:scale(1.1)}.setting-item{transition:all .3s ease}.setting-item:hover{transform:translate(10px);background:#ffffff14!important;border-color:var(--primary)}.dashboard-content{padding:40px 5%;max-width:1200px;margin:0 auto;width:100%}.welcome-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px;flex-wrap:wrap;gap:20px}.greeting h1{font-size:32px;margin-bottom:8px}.greeting p{color:var(--text-muted)}.progress-card{padding:20px;min-width:250px}.progress-info{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:12px}.progress-info h4{font-size:16px;color:var(--text-main)}.progress-info p{font-size:13px;color:var(--text-muted)}.progress-info h2{font-size:24px;color:var(--primary)}.progress-bar{width:100%;height:8px;background:#0000004d;border-radius:4px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:4px;transition:width 1s ease-in-out}.books-slider{display:flex;gap:20px;overflow-x:auto;padding-bottom:20px;margin-bottom:20px;-ms-overflow-style:none;scrollbar-width:none}.books-slider::-webkit-scrollbar{display:none}.book-card{min-width:140px;cursor:pointer;transition:transform .3s ease,opacity .3s ease;opacity:.6}.book-card:hover{transform:translateY(-5px);opacity:.8}.book-card.active{opacity:1;transform:translateY(-10px)}.book-card.active .book-cover{border:3px solid var(--primary);box-shadow:0 10px 25px #6366f166}.book-cover{height:180px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;transition:all .3s ease;border:3px solid transparent;padding:0;overflow:hidden}.book-cover img{width:100%;height:100%;object-fit:cover;border-radius:9px}.bg-book-1{background:linear-gradient(135deg,#ff6b6b,#c0392b)}.bg-book-2{background:linear-gradient(135deg,#4facfe,#00f2fe)}.bg-book-3{background:linear-gradient(135deg,#43e97b,#38f9d7)}.bg-book-4{background:linear-gradient(135deg,#fa709a,#fee140)}.bg-book-5{background:linear-gradient(135deg,#667eea,#764ba2)}.bg-book-6{background:linear-gradient(135deg,#f78ca0,#f9748f,#fd868c,#fe9a8b)}.book-card p{text-align:center;font-size:13px;color:var(--text-muted);font-weight:500}.section-title{font-size:24px;margin-bottom:24px;display:flex;align-items:center;gap:8px;transition:all .3s ease}.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;margin-bottom:40px}.game-card{padding:24px;display:flex;flex-direction:column;gap:16px;position:relative;overflow:hidden;transition:all .3s ease}.hover-effect:hover{transform:translateY(-5px);box-shadow:0 12px 40px #0006;border-color:#fff3}.game-icon{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:28px;color:#fff}.bg-purple{background:linear-gradient(135deg,var(--purple),#6d28d9)}.bg-blue{background:linear-gradient(135deg,var(--blue),#1d4ed8)}.bg-green{background:linear-gradient(135deg,var(--green),#047857)}.bg-orange{background:linear-gradient(135deg,var(--orange),#b45309)}.game-info h3{text-align:left;font-size:18px;margin-bottom:8px}.game-info p{font-size:14px;color:var(--text-muted);line-height:1.5}.play-btn{position:absolute;bottom:24px;right:24px;width:40px;height:40px;border-radius:50%;border:none;background:#ffffff1a;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease}.hover-effect:hover .play-btn{background:var(--primary);transform:scale(1.1)}.animate-fade-in{animation:fadeIn .5s ease forwards}.view-header{margin:20px 0;padding-bottom:10px;border-bottom:1px solid var(--glass-border)}.view-header-main{margin-bottom:30px}.book-tag{background:var(--primary);color:#fff;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1px;margin-bottom:10px;display:inline-block}.unit-display-title{font-size:32px;font-weight:700;margin-top:10px;background:linear-gradient(to right,#fff,var(--text-muted));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.units-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:16px;margin-top:24px;animation:fadeIn .5s ease}.unit-card{padding:20px;text-align:center;cursor:pointer;transition:all .3s ease;display:flex;flex-direction:column;align-items:center;gap:10px}.unit-card i{font-size:24px;color:var(--primary)}.unit-card span{font-weight:600;font-size:16px}.unit-card:hover{border-color:var(--primary);transform:translateY(-5px);background:#6366f10d}.no-selection-msg{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 40px;text-align:center;margin-top:20px;gap:16px}.no-selection-msg i{font-size:48px;color:var(--primary);animation:bounce 2s infinite}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-5px)}}.words-container{margin-top:24px;display:flex;flex-direction:column;gap:16px;animation:fadeIn .5s ease}.word-card{padding:24px;display:grid;grid-template-columns:1fr;gap:12px;transition:all .3s ease}.word-card.learned{border-color:var(--green);background:#10b9810d;opacity:.8}.word-header{display:flex;align-items:center;gap:12px;justify-content:space-between}.word-main{display:flex;align-items:center;gap:12px}.word-main h3{font-size:24px;margin:0;color:var(--primary)}.word-translation{font-size:20px;font-weight:600;color:var(--secondary);background:#ec48991a;padding:6px 14px;border-radius:12px}.word-type{background:#ffffff1a;padding:4px 10px;border-radius:8px;font-size:12px;font-weight:600;color:var(--text-muted)}.word-meaning{font-size:18px;color:var(--text-main);line-height:1.4}.word-example{font-style:italic;color:var(--text-muted);border-left:2px solid var(--primary);padding-left:12px;margin-top:8px}.back-btn{display:flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--glass-border);color:var(--text-main);padding:8px 16px;border-radius:12px;cursor:pointer;transition:all .3s ease;margin-bottom:20px;width:fit-content}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.units-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}}.game-container{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:32px}.game-header{display:flex;justify-content:space-between;align-items:center}.back-btn{display:flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--glass-border);color:var(--text-main);padding:10px 20px;border-radius:12px;cursor:pointer;transition:all .3s ease}.back-btn:hover{background:var(--glass-bg);border-color:var(--primary)}.game-stats{font-weight:600;color:var(--text-muted)}.flashcard-wrapper{perspective:1000px;height:400px;width:100%}.flashcard{position:relative;width:100%;height:100%;cursor:pointer;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,0,.2,1)}.flashcard.flipped{transform:rotateY(180deg)}.flashcard-front,.flashcard-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;text-align:center}.flashcard-back{transform:rotateY(180deg)}.word-type{background:var(--primary);color:#fff;padding:4px 12px;border-radius:20px;font-size:14px;font-weight:600;margin-bottom:20px}.word-text{font-size:48px;font-weight:800;margin-bottom:20px}.hint-text{color:var(--text-muted);font-size:14px}.translation-text{font-size:40px;font-weight:700;color:var(--primary);margin-bottom:24px}.word-details{display:flex;flex-direction:column;gap:16px;text-align:left;width:100%;max-width:500px}.meaning,.example{font-size:16px;line-height:1.6}.game-controls{display:flex;justify-content:center;align-items:center;gap:24px}.nav-btn,.flip-btn{display:flex;align-items:center;gap:10px;padding:14px 28px;border-radius:16px;border:none;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease}.nav-btn{background:var(--glass-bg);color:var(--text-main);border:1px solid var(--glass-border)}.nav-btn:hover{background:#ffffff1a;transform:translateY(-2px)}.flip-btn{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;box-shadow:0 4px 15px #6366f166}.flip-btn:hover{transform:scale(1.05);box-shadow:0 6px 20px #6366f199}@media (max-width: 600px){.flashcard-wrapper{height:350px}.word-text{font-size:36px}.translation-text{font-size:32px}.game-controls{flex-direction:column;width:100%}.nav-btn,.flip-btn{width:100%;justify-content:center}}.loading-spinner{width:40px;height:40px;border:3px solid var(--glass-border);border-top:3px solid var(--primary);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 16px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.input-section{display:flex;gap:12px;width:100%;max-width:400px;margin:24px 0}.game-input{flex:1;padding:14px 20px;border-radius:12px;border:2px solid var(--glass-border);background:#0003;color:var(--text-main);font-size:16px;outline:none;transition:all .3s ease}.game-input:focus{border-color:var(--primary);box-shadow:0 0 0 4px #6366f11a}.game-input.correct{border-color:var(--green);background:#10b9811a}.game-input.incorrect{border-color:var(--secondary);background:#ec48991a}.check-btn{padding:0 24px;border-radius:12px;border:none;background:var(--primary);color:#fff;font-weight:600;cursor:pointer;transition:all .3s ease}.check-btn:hover{background:var(--primary-hover);transform:translateY(-2px)}.error-msg{color:var(--secondary);font-size:14px;font-weight:500;margin-bottom:10px}.mt-20{margin-top:20px}.animate-shake{animation:shake .5s cubic-bezier(.36,.07,.19,.97) both}@keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}.word-builder-card{padding:40px;display:flex;flex-direction:column;align-items:center;gap:32px;width:100%}.game-hint{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}.translation-title{font-size:36px;font-weight:700;color:var(--text-main)}.meaning-hint{color:var(--text-muted);font-style:italic;max-width:500px}.assembled-area{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;min-height:70px;width:100%;padding:15px;background:#0003;border-radius:16px;border:2px dashed var(--glass-border);align-items:center}.placeholder-text{color:var(--text-muted);font-size:14px;letter-spacing:1px}.letter-box{width:50px;height:50px;display:flex;align-items:center;justify-content:center;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:12px;font-size:24px;font-weight:700;cursor:pointer;transition:all .2s cubic-bezier(.175,.885,.32,1.275);-webkit-user-select:none;user-select:none}.letter-box:hover:not(.used){transform:scale(1.1);border-color:var(--primary);background:#6366f11a}.letter-box.active{background:var(--primary);color:#fff;border:none;box-shadow:0 4px 10px #6366f14d}.letter-box.active.correct{background:var(--green);box-shadow:0 4px 10px #10b9814d}.letter-box.active.incorrect{background:var(--secondary);box-shadow:0 4px 10px #ec48994d}.letter-box.used{opacity:.3;cursor:default;transform:scale(.9)}.letters-pool{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:600px}.word-builder-controls{display:flex;gap:16px;width:100%;max-width:400px}.secondary-btn{flex:1;padding:14px;border-radius:12px;border:1px solid var(--glass-border);background:transparent;color:var(--text-main);font-weight:600;cursor:pointer;transition:all .3s ease}.secondary-btn:hover{background:#ffffff0d;border-color:var(--text-muted)}.success-msg{color:var(--green);font-weight:600;font-size:18px}.animate-bounce{animation:bounce .5s ease infinite}.quiz-stats{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:700}.correct-count{color:var(--green);display:flex;align-items:center;gap:4px}.quiz-card{padding:40px;width:100%;display:flex;flex-direction:column;gap:32px}.quiz-question{text-align:center}.question-word{font-size:48px;font-weight:800;margin:16px 0;background:linear-gradient(to right,var(--primary),var(--secondary));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.quiz-options{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.option-btn{display:flex;align-items:center;padding:20px;text-align:left;cursor:pointer;transition:all .3s ease;border:1px solid var(--glass-border);background:#ffffff08;color:var(--text-main);font-size:18px;font-weight:500;position:relative;gap:16px}.option-label{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:#0003;border-radius:8px;font-size:14px;font-weight:700;color:var(--text-muted)}.option-btn:hover:not(:disabled){background:#ffffff14;transform:translate(5px);border-color:var(--primary)}.option-btn.correct{background:#10b9811a;border-color:var(--green);color:var(--green)}.option-btn.incorrect{background:#ec48991a;border-color:var(--secondary);color:var(--secondary)}.option-btn i{margin-left:auto;font-size:24px}@media (max-width: 600px){.quiz-options{grid-template-columns:1fr}.question-word{font-size:32px}}.image-quiz-card{padding:32px;width:100%;display:flex;flex-direction:column;align-items:center;gap:24px}.image-display{width:100%;max-width:500px;height:300px;border-radius:20px;overflow:hidden;background:#0003;position:relative;border:1px solid var(--glass-border)}.image-display img{width:100%;height:100%;object-fit:cover;animation:fadeIn .5s ease}.loading-placeholder{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.quiz-question-info{text-align:center}.translation-hint{color:var(--primary);font-size:20px;font-weight:600;margin-top:8px}.image-quiz-options{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;width:100%;max-width:600px}.word-match-card{padding:32px;width:100%}.match-columns{display:grid;grid-template-columns:1fr 1fr;gap:40px}.match-column{display:flex;flex-direction:column;gap:12px}.match-column h3{margin-bottom:12px;color:var(--primary);font-size:20px}.match-item{padding:16px;text-align:center;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);font-weight:600;border:1px solid var(--glass-border);-webkit-user-select:none;user-select:none}.match-item:hover:not(.matched){background:#ffffff0d;transform:scale(1.02);border-color:var(--primary)}.match-item.selected{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 4px 15px #6366f166}.match-item.matched{opacity:.3;cursor:default;background:var(--green);border-color:var(--green);color:#fff;transform:scale(.95)}.match-item.wrong{background:var(--secondary);border-color:var(--secondary);color:#fff;animation:shake .5s ease}@media (max-width: 600px){.match-columns{gap:20px}.match-item{padding:12px;font-size:14px}}.unit-indicator{display:flex;align-items:center;gap:12px;padding:16px 24px;margin-bottom:24px;background:#6366f11a;border-color:#6366f133;color:var(--text-main);font-size:16px;animation:slideInDown .5s ease forwards}.unit-indicator i{color:var(--primary);font-size:20px}.unit-indicator strong{color:var(--primary);margin:0 4px}.missing-letters-card{padding:40px;display:flex;flex-direction:column;align-items:center;gap:32px;width:100%}.word-display-area{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:20px 0}.given-letter,.missing-input{width:50px;height:60px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:32px;font-weight:700;border-radius:12px;text-transform:uppercase}.given-letter{background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--text-main)}.missing-input{background:#0003;border:2px dashed var(--glass-border);color:var(--primary);outline:none;transition:all .3s ease}.missing-input:focus{border-color:var(--primary);border-style:solid;box-shadow:0 0 0 3px #6366f133}.missing-input.error{border-color:var(--secondary);color:var(--secondary);background:#ec48991a}.missing-input.correct{border-color:var(--green);color:var(--green);background:#10b9811a}@media (max-width: 600px){.given-letter,.missing-input{width:40px;height:50px;font-size:24px;gap:8px}}