:root{--bg-main:#f8fafc;--bg-card:#fff;--bg-card-hover:#fef9c3;--text-primary:#334155;--text-secondary:#64748b;--accent:#10b981;--accent-hover:#059669;--brand-yellow:#fcd34d;--brand-yellow-dark:#92400e;--border:#e2e8f0;--success:#22c55e;--error:#ef4444;--locked:#94a3b8}*{box-sizing:border-box;margin:0;padding:0}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--bg-main)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:5px}::-webkit-scrollbar-thumb:hover{background:var(--accent)}body{background-color:var(--bg-main);color:var(--text-primary);font-family:Outfit,sans-serif;line-height:1.6}.loading-overlay{background-color:var(--bg-main);z-index:9999;opacity:0;visibility:hidden;justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .3s,visibility .3s;display:flex;position:fixed;top:0;left:0}.loading-overlay.active{opacity:1;visibility:visible}.spinner{border:5px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:50px;height:50px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.app-layout{justify-content:center;min-height:100vh;display:flex}.main-content{flex:1;width:100%;max-width:1200px;padding:clamp(10px,3vw,40px)}.top-bar{align-items:center;margin-bottom:40px;display:flex}.logo{color:var(--accent);align-items:center;gap:12px;font-size:1.5rem;font-weight:700;display:flex}.screen{animation:.3s fadeIn;display:none}.screen.active{display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.hero-section{text-align:center;margin-bottom:40px}.hero-section h1{background:linear-gradient(135deg,#0f766e,#10b981);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:8px;font-size:2.5rem;display:inline-block}.hero-section p{color:var(--text-secondary);font-size:1.1rem}.modules-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;display:grid}.module-card{background-color:var(--bg-card);border:1px solid var(--border);cursor:pointer;border-radius:16px;padding:24px;transition:all .2s}.module-card:hover{background-color:var(--bg-card-hover);border-color:var(--accent);transform:translateY(-4px)}.module-icon{width:56px;height:56px;color:var(--accent);background-color:#3b82f61a;border-radius:12px;justify-content:center;align-items:center;margin-bottom:16px;display:flex}.module-card h3{margin-bottom:8px;font-size:1.2rem}.module-card p{color:var(--text-secondary);font-size:.95rem}.test-header{align-items:center;gap:24px;margin-bottom:40px;display:flex}.back-btn{color:var(--text-primary);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:8px;transition:all .3s;display:flex}.back-btn:hover{background-color:#0000000d}.back-btn:active{transform:scale(.92)}.progress-container{background-color:var(--bg-card);border-radius:4px;flex:1;height:8px;overflow:hidden}.progress-bar{background-color:var(--success);width:0%;height:100%;transition:width .3s}.test-container{background-color:var(--bg-card);border:1px solid var(--border);border-radius:30px;max-width:800px;margin:0 auto;padding:20px clamp(15px,4vw,40px) 40px}.question-title{text-align:center;margin-bottom:32px;font-size:1.5rem}.word-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px;display:grid}.switch-control{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:12px;display:flex}.switch-control input{display:none}.switch-slider{background-color:var(--border);border-radius:20px;width:50px;height:26px;transition:background-color .3s;position:relative}.switch-slider:after{content:"";background-color:#fff;border-radius:50%;width:20px;height:20px;transition:transform .3s;position:absolute;top:3px;left:3px;box-shadow:0 2px 4px #0003}.switch-control input:checked+.switch-slider{background-color:var(--accent)}.switch-control input:checked+.switch-slider:after{transform:translate(24px)}.switch-label{color:var(--text-primary);font-size:1.1rem;font-weight:700}.word-card{background-color:var(--bg-main);border:1px solid var(--border);text-align:center;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:12px;padding:16px;font-size:1.1rem;font-weight:500;transition:all .2s}.word-card:hover{border-color:var(--accent)}.word-card.correct-ans{border-color:var(--success);color:var(--success);background-color:#10b9811a}.word-card.incorrect-ans{border-color:var(--error);color:var(--error);background-color:#ef44441a}.reading-paragraph{font-size:1.25rem;line-height:2}.reading-input{border:none;border-bottom:2px solid var(--text-secondary);color:var(--accent);text-align:center;background:0 0;outline:none;margin:0 4px;font-family:inherit;font-size:1.25rem;transition:all .2s}.reading-input:focus{border-bottom-color:var(--accent)}.reading-input.correct-ans{border-bottom-color:var(--success);color:var(--success)}.reading-input.incorrect-ans{border-bottom-color:var(--error);color:var(--error)}.listen-container{text-align:center}.play-btn{background-color:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;margin-bottom:32px;transition:transform .2s;display:inline-flex}.play-btn:hover{transform:scale(1.05)}.listen-input,.write-textarea{background-color:var(--bg-main);border:1px solid var(--border);width:100%;color:var(--text-primary);resize:vertical;border-radius:12px;outline:none;padding:20px;font-family:inherit;font-size:1.1rem;transition:border-color .2s}.listen-input:focus,.write-textarea:focus{border-color:var(--accent)}.listen-input.correct-ans{border-color:var(--success);background-color:#10b9810d}.listen-input.incorrect-ans{border-color:var(--error);background-color:#ef44440d}.photo-container{flex-direction:column;align-items:center;gap:24px;display:flex}.question-photo{object-fit:cover;border-radius:12px;max-width:100%;max-height:300px}.prompt-text{text-align:center;color:var(--text-primary);margin-bottom:24px;font-size:1.25rem}.test-actions{border-top:1px solid var(--border);justify-content:flex-end;gap:16px;margin-top:32px;padding-top:24px;display:flex}.btn-primary{cursor:pointer;background-color:var(--accent);color:#fff;border:none;border-radius:8px;padding:12px 24px;font-family:inherit;font-size:1rem;font-weight:600;transition:all .2s}.btn-primary:hover{background-color:var(--accent-hover)}.btn-secondary{background-color:var(--bg-card);border:2px solid var(--border);color:var(--text-primary);cursor:pointer;border-radius:12px;padding:12px 24px;font-size:1rem;font-weight:500;transition:all .3s}.btn-secondary:hover{background-color:var(--bg-card-hover);border-color:var(--accent);color:var(--accent)}.btn-secondary:active{transform:scale(.92)}.instant-feedback{text-align:center;min-height:24px;margin-top:16px;font-size:1.1rem;font-weight:500}.instant-feedback.success-text{color:var(--success)}.instant-feedback.error-text{color:var(--error)}.result-card{text-align:center;background-color:var(--bg-card);border:1px solid var(--border);border-radius:24px;max-width:500px;margin:0 auto;padding:clamp(24px,5vw,48px)}.result-card h1{margin:24px 0 16px;font-size:2rem}.result-card p{color:var(--text-secondary);margin-bottom:32px;font-size:1.1rem}.translation-box{border-right:4px solid var(--accent);color:#e2e8f0;text-align:right;direction:rtl;background-color:#3b82f61a;border-radius:8px;margin-top:24px;padding:16px;font-size:1.15rem;line-height:1.8}.translation-title{color:var(--accent);margin-bottom:8px;font-size:1rem;font-weight:700}.vocab-section{background-color:var(--bg-card);border:1px solid var(--border);text-align:center;border-radius:16px;margin-bottom:40px;padding:30px}.vocab-section h2{color:var(--accent);margin-bottom:8px}.vocab-section p{color:var(--text-secondary);margin-bottom:24px}.levels-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,120px),1fr));gap:clamp(10px,2vw,16px);display:grid}.level-btn{background-color:var(--bg-main);color:var(--text-primary);border:1px solid var(--accent);cursor:pointer;border-radius:12px;padding:16px;font-size:1.2rem;font-weight:700;transition:all .2s}.level-btn:hover{background-color:var(--accent);color:#fff;transform:translateY(-2px)}.level-btn-content{justify-content:space-between;align-items:center;gap:10px;width:100%;display:flex}.schedule-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;padding:20px 0;display:grid}.schedule-card{background-color:var(--bg-card);border:2px solid var(--border);text-align:right;-webkit-user-select:none;user-select:none;border-radius:16px;flex-direction:column;gap:15px;padding:24px;transition:all .3s;display:flex;position:relative;overflow:hidden}.schedule-card:hover{border-color:#cbd5e1;transform:translateY(-4px);box-shadow:0 10px 25px #00000014}.time-badge{background-color:var(--brand-yellow);color:var(--brand-yellow-dark);direction:ltr;border:2px solid #eab308;border-radius:20px;align-self:flex-start;padding:8px 16px;font-size:1.1rem;font-weight:700;display:inline-block;box-shadow:0 4px 10px #facc154d}.schedule-content h3{color:var(--text-primary);margin-bottom:10px;font-size:1.4rem}.schedule-content p{color:var(--text-secondary);font-size:1.1rem;line-height:1.6}.pagination-container .level-btn:hover{transform:none}.level-btn.active-level{background-color:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 4px 12px #10b9814d}.level-btn.locked{background-color:var(--bg-card);color:var(--locked);border-color:var(--border);cursor:not-allowed}.level-btn.locked:hover{background-color:var(--bg-card);color:var(--locked);transform:none}.vocab-list{background-color:var(--bg-card);border:2px solid var(--border);border-radius:16px;grid-template-columns:repeat(3,1fr);display:grid;overflow:hidden}.vocab-item{background-color:var(--bg-card);border:1px solid var(--border);justify-content:space-between;align-items:center;padding:16px 20px;transition:all .2s;display:flex}.vocab-item:hover{background-color:#00000008}.vocab-word-info{flex-direction:column;align-items:flex-start;display:flex}.vocab-word{color:var(--accent);font-size:1.4rem;font-weight:700}.vocab-translation{color:var(--text-secondary);direction:rtl;font-size:1.1rem}.vocab-options{flex-direction:column;gap:12px;margin-bottom:24px;display:flex}.vocab-option-btn{background-color:var(--bg-main);color:var(--text-primary);border:1px solid var(--border);cursor:pointer;direction:rtl;border-radius:12px;padding:16px;font-size:1.2rem;transition:all .2s}.vocab-option-btn:hover{border-color:var(--accent);background-color:#3b82f61a}.vocab-option-btn.correct{border-color:var(--success);color:var(--success);background-color:#10b9811a}.vocab-option-btn.wrong{border-color:var(--error);color:var(--error);background-color:#ef44441a}.modal-overlay{z-index:1000;opacity:0;pointer-events:none;background:#00000080;justify-content:center;align-items:center;transition:opacity .3s;display:flex;position:fixed;inset:0}.modal-overlay.active{opacity:1;pointer-events:auto}.modal-box{background:var(--bg-card);text-align:center;border:2px solid var(--accent);border-radius:24px;width:90%;max-width:400px;padding:32px;transition:transform .3s;transform:translateY(20px);box-shadow:0 10px 25px #0000001a}.modal-overlay.active .modal-box{transform:translateY(0)}.modal-title{color:var(--error);margin-bottom:12px;font-size:1.5rem}.modal-message{color:var(--text-primary);margin-bottom:24px;font-size:1.1rem}.modal-btn{background-color:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:8px;padding:12px 24px;font-size:1rem;font-weight:700}.modal-btn:hover{background-color:var(--accent-hover)}.play-btn{background-color:var(--brand-yellow);color:var(--brand-yellow-dark);cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;transition:background-color .2s,transform .2s;display:flex}.play-btn:hover{background-color:#fde047;transform:scale(1.05)}@media (width<=900px){.vocab-list{grid-template-columns:repeat(2,1fr)}}@media (width<=600px){.vocab-list{grid-template-columns:1fr}}.exam-input{border:2px solid var(--border);text-align:center;width:100%;max-width:400px;color:var(--text-primary);border-radius:12px;outline:none;margin:0 auto;padding:16px 20px;font-family:inherit;font-size:1.2rem;transition:all .3s;display:block}.exam-input:focus{border-color:var(--accent);box-shadow:0 0 0 4px #22c55e1a}.tabs-container{justify-content:center;gap:20px;margin:20px 0;display:flex}.tab-btn{background:var(--surface);color:var(--text-secondary);border:2px solid var(--border);cursor:pointer;border-radius:20px;padding:10px 30px;font-size:1.1rem;font-weight:700;transition:all .2s}.tab-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}.tab-btn:hover:not(.active){border-color:var(--accent);color:var(--accent)}.sentence-list{grid-template-columns:1fr}.main-title{color:var(--text-primary);text-align:center;margin:clamp(20px,4vw,50px) 0;font-size:clamp(2rem,8vw,4rem)}.tab-header{justify-content:space-between;align-items:center;gap:15px;margin-bottom:20px;display:flex}@media (width>=2560px){.main-content{max-width:1800px}}@media (width<=480px){.tab-header{text-align:center;flex-direction:column}.vocab-item{text-align:center;flex-direction:column;padding:15px}.tabs-container{flex-direction:column;gap:10px}.level-btn{padding:12px;font-size:1rem}.test-actions{justify-content:center}.vocab-word-info{text-align:center;flex-direction:column;align-items:center;width:100%;display:flex}}.scroll-to-top{background-color:var(--accent);color:#fff;cursor:pointer;z-index:1000;border:none;border-radius:50%;justify-content:center;align-items:center;width:55px;height:55px;transition:all .3s;display:none;position:fixed;bottom:50px;right:50px;box-shadow:0 4px 15px #0000004d}.scroll-to-top:hover{background-color:var(--accent-hover);transform:translateY(-5px);box-shadow:0 6px 20px #0006}.scroll-to-top.visible{animation:.3s fadeIn;display:flex}.check-circle{cursor:pointer;background-color:#fff;border:2px solid #cbd5e1;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;transition:all .2s;display:flex;box-shadow:0 2px 4px #0000000d}.check-circle:hover{border-color:var(--accent);transform:scale(1.15)}.check-circle.checked{background-color:var(--accent);border-color:#fff}.check-circle.checked:after{content:"✔";color:#fff;font-size:14px;line-height:1}