@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Amiri:wght@400;700&display=swap";@font-face{font-family:Uthmanic Hafs;src:url(data:font/woff2;base64,NDA0OiBOb3QgRm91bmQ=) format("woff2");font-weight:400;font-style:normal;font-display:swap}:root{--primary: #088395;--primary-light: #7AB2B2;--primary-dark: #09637E;--secondary: #7AB2B2;--accent: #09637E;--gold: #088395;--bg-primary: #EBF4F6;--bg-secondary: #ffffff;--bg-card: #ffffff;--text-primary: #09637E;--text-secondary: #088395;--text-muted: #7AB2B2;--success: #10b981;--error: #ef4444;--warning: #f59e0b;--level-beginner: #7AB2B2;--level-intermediate: #088395;--level-advanced: #09637E;--level-expert: #065666;--font-arabic: "Uthmanic Hafs", "Amiri", serif;--font-main: "Inter", system-ui, sans-serif;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-main);background:var(--bg-primary);color:var(--text-primary);min-height:100vh;line-height:1.6;padding-top:env(safe-area-inset-top)}@media all and (display-mode:standalone){body{border-top:none;outline:none}}#root{min-height:100vh}.arabic{font-family:var(--font-arabic);font-size:2rem;direction:rtl;line-height:2}.arabic-large{font-size:3rem}.arabic-xlarge{font-family:var(--font-arabic);font-size:2.5rem}.arabic-focus{text-decoration:underline;text-decoration-color:var(--warning);text-decoration-thickness:3px;text-underline-offset:8px}.arabic-underline{border-bottom:3px solid var(--warning);padding-bottom:4px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border:none;border-radius:var(--radius-md);font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease}.btn-primary{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff;box-shadow:0 4px 14px #05966966}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #05966980}.btn-secondary{background:var(--bg-card);color:var(--text-primary);border:1px solid rgba(255,255,255,.1)}.btn-secondary:hover{background:var(--bg-secondary)}.btn-success{background:linear-gradient(135deg,var(--success) 0%,#16a34a 100%);color:#fff}.btn-disabled{opacity:.5;cursor:not-allowed}.card{background:var(--bg-card);border-radius:var(--radius-lg);padding:20px;border:1px solid rgba(8,131,149,.1);box-shadow:0 4px 16px #08839514}.card-hover{transition:all .3s ease}.card-hover:hover{transform:translateY(-4px);box-shadow:0 12px 40px #08839526}.progress-bar{height:8px;background:#0883951a;border-radius:4px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--primary) 0%,var(--primary-light) 100%);border-radius:4px;transition:width .5s ease}.container{max-width:480px;margin:0 auto;padding:20px;min-height:100vh}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fadeIn .4s ease forwards}.animate-pulse{animation:pulse 2s infinite}.animate-shake{animation:shake .3s ease-in-out}.animate-slide-up{animation:slideUp .4s ease forwards}.stagger-children>*{opacity:0;animation:fadeIn .4s ease forwards}.stagger-children>*:nth-child(1){animation-delay:.05s}.stagger-children>*:nth-child(2){animation-delay:.1s}.stagger-children>*:nth-child(3){animation-delay:.15s}.stagger-children>*:nth-child(4){animation-delay:.2s}.stagger-children>*:nth-child(5){animation-delay:.25s}.stagger-children>*:nth-child(6){animation-delay:.3s}.stagger-children>*:nth-child(7){animation-delay:.35s}.stagger-children>*:nth-child(8){animation-delay:.4s}.stagger-children>*:nth-child(9){animation-delay:.45s}.stagger-children>*:nth-child(10){animation-delay:.5s}.text-center{text-align:center}.text-primary{color:var(--primary)}.text-secondary{color:var(--text-secondary)}.text-muted{color:var(--text-muted)}.text-success{color:var(--success)}.text-error{color:var(--error)}.text-gold{color:var(--gold)}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:32px}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:8px}.gap-2{gap:16px}.gap-3{gap:24px}.w-full{width:100%}.h-full{height:100%}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--bg-card);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.home-screen{padding-bottom:40px}.welcome-banner{margin-bottom:16px;background:linear-gradient(135deg,#08839514,#7ab2b214);border:1px solid rgba(8,131,149,.2);animation:fadeIn .5s ease}.welcome-content{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px}.welcome-icon{color:var(--primary);flex-shrink:0;margin-top:2px}.welcome-content h3{font-size:1rem;margin:0 0 4px;color:var(--text-primary)}.welcome-content p{font-size:.85rem;color:var(--text-secondary);margin:0;line-height:1.5}.welcome-actions{display:flex;gap:8px}.welcome-actions .btn{font-size:.85rem;padding:10px 16px;flex:1}.welcome-dismiss{background:transparent!important;color:var(--text-muted)!important;border:1px solid rgba(8,131,149,.15)!important}.home-header{display:flex;justify-content:space-between;align-items:center;padding:16px 0}.header-left{display:flex;flex-direction:column}.header-left h1{font-size:1.3rem;margin:0}.user-greeting{font-size:.8rem;color:var(--text-muted);margin-top:2px}.header-right{display:flex;align-items:center;gap:8px}.logout-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#ef44441a;border:none;color:#ef4444;cursor:pointer;transition:all .2s}.logout-btn:hover{background:#ef444433}.logo-section{display:flex;align-items:center;gap:12px}.logo{font-size:2rem}.logo-section h1{font-size:1.5rem;font-weight:700;background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.xp-badge{display:flex;align-items:center;gap:6px;background:var(--bg-card);padding:8px 16px;border-radius:20px;font-weight:600}.xp-icon{font-size:1.2rem}.xp-value{color:var(--gold)}.hero-section{background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 50%,var(--secondary) 100%);border-radius:var(--radius-xl);padding:32px 24px;margin:16px 0 24px;position:relative;overflow:hidden}.hero-content h2{font-size:1.75rem;font-weight:700;line-height:1.3;margin-bottom:8px;color:#fff}.hero-content p{opacity:.9;font-size:.95rem;color:#fff}.hero-decoration{position:absolute;right:-20px;bottom:-10px;opacity:.15;font-size:4rem}.progress-overview{background:linear-gradient(135deg,var(--bg-card) 0%,var(--bg-secondary) 100%)}.progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.progress-header h3{font-size:1rem;font-weight:600}.progress-percent{color:var(--primary);font-weight:700;font-size:1.25rem}.progress-stats{display:flex;justify-content:space-around;margin-top:20px;padding-top:16px;border-top:1px solid rgba(8,131,149,.1)}.stat{display:flex;flex-direction:column;align-items:center}.stat-value{font-size:1.5rem;font-weight:700;color:var(--text-primary)}.stat-label{font-size:.8rem;color:var(--text-muted);margin-top:4px}.continue-section{margin-top:24px}.continue-section h3{font-size:1.1rem;font-weight:600;margin-bottom:12px}.level-preview{cursor:pointer}.level-preview-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid rgba(8,131,149,.08);animation:fadeIn .4s ease forwards;opacity:0}.level-preview-item:last-of-type{border-bottom:none}.level-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative}.level-icon-svg{width:40px;height:40px;object-fit:contain}.status-indicator{position:absolute;top:-2px;right:-2px;width:10px;height:10px;background-color:var(--success);border-radius:50%;border:2px solid var(--bg-card)}.level-info{flex:1;display:flex;flex-direction:column}.level-title{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.level-name{font-weight:600;font-size:.95rem}.level-progress-mini{width:60px}.level-progress-mini .progress-bar{height:6px}.see-all{text-align:center;color:var(--primary);font-weight:600;padding-top:12px;font-size:.9rem}.quick-actions{margin-top:24px}.btn-large{width:100%;padding:16px 24px;font-size:1.1rem}.features{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:24px}.feature-card{display:flex;flex-direction:column;align-items:center;padding:20px 16px;text-align:center;gap:8px}.feature-icon{font-size:2rem}.feature-title{font-size:.85rem;font-weight:600;color:var(--text-secondary)}.mushaf-section{margin-top:24px}.mushaf-card{display:flex;align-items:center;gap:14px;cursor:pointer;padding:18px 16px;background:#fff;border:1px solid rgba(8,131,149,.12)}.mushaf-card-icon{width:80px;height:80px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}.mushaf-icon-img{width:100%;height:100%;object-fit:cover;border-radius:14px}.mushaf-card-content{flex:1}.mushaf-card-content h3{font-size:1rem;font-weight:700;color:var(--text-primary);margin-bottom:2px}.mushaf-card-content p{font-size:.8rem;color:var(--text-muted);line-height:1.4}.mushaf-card-arrow{color:var(--text-muted);flex-shrink:0}.level-map-screen{padding-bottom:40px}.level-map-header{display:flex;justify-content:space-between;align-items:center;padding:16px 0;margin-bottom:16px}.level-map-header h1{font-size:1.25rem;font-weight:700}.back-btn{background:none;border:none;color:var(--primary);font-size:1rem;font-weight:600;cursor:pointer;padding:8px 0}.levels-container{display:flex;flex-direction:column;gap:16px}.level-card{display:flex;gap:16px;padding:20px;position:relative;overflow:hidden;cursor:pointer}.level-card.locked{opacity:.6;cursor:not-allowed}.level-card.locked:hover{transform:none;box-shadow:none}.level-badge{width:60px;height:60px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative}.level-icon-svg{width:48px;height:48px;object-fit:contain}.status-indicator{position:absolute;top:-4px;right:-4px;width:12px;height:12px;background-color:var(--success);border-radius:50%;border:2px solid var(--bg-card)}.lock-icon{font-size:1.5rem}.level-content{flex:1;min-width:0}.level-header{display:flex;align-items:center;gap:6px;margin-bottom:4px}.level-header h3{font-size:.8rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.level-icon{font-size:.9rem}.level-title{font-size:1.1rem;font-weight:700;margin-bottom:4px}.level-desc{font-size:.85rem;color:var(--text-secondary);margin-bottom:12px}.level-progress{display:flex;align-items:center;gap:12px}.level-progress .progress-bar{flex:1;height:6px}.progress-text{font-size:.75rem;color:var(--text-muted);white-space:nowrap}.unlock-hint{font-size:.8rem;color:var(--text-muted);font-style:italic}.unlock-options{display:flex;flex-direction:column;gap:8px}.skip-exam-btn{background:linear-gradient(135deg,var(--warning),#d97706);color:#fff;border:none;padding:8px 16px;border-radius:8px;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s ease}.skip-exam-btn:hover{transform:scale(1.02);box-shadow:0 4px 12px #f59e0b66}.level-decoration{position:absolute;right:-10px;bottom:-20px;font-size:6rem;font-weight:900;opacity:.08;pointer-events:none}.level-detail-screen{margin:-20px -20px 0}.level-detail-header{padding:16px 20px 20px;margin-bottom:20px}.back-btn-light{background:none;border:none;color:#fff;font-size:1rem;font-weight:600;cursor:pointer;padding:8px 0;opacity:.9}.level-header-content{display:flex;align-items:flex-start;gap:16px;margin-top:16px}.level-icon-large{font-size:3rem}.level-header-text{flex:1}.level-label{font-size:.8rem;text-transform:uppercase;letter-spacing:1px;opacity:.8}.level-header-text h1{font-size:1.5rem;font-weight:700;margin:4px 0 8px}.level-header-text p{font-size:.9rem;opacity:.9}.level-progress-header{margin-top:20px}.level-progress-header .progress-bar{height:8px;border-radius:4px}.progress-label{display:block;text-align:right;font-size:.8rem;margin-top:8px;opacity:.9}.lessons-container{padding:0 20px 40px;display:flex;flex-direction:column;gap:12px}.lesson-card{display:flex;align-items:center;gap:16px;padding:16px;cursor:pointer;position:relative;transition:all .2s ease}.lesson-card:hover{transform:translate(4px)}.lesson-card.locked{opacity:.5;cursor:not-allowed}.lesson-card.locked:hover{transform:none}.lesson-card.completed{background:linear-gradient(135deg,var(--bg-card),rgba(34,197,94,.1))}.lesson-number{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.1rem;border:3px solid;flex-shrink:0;color:#fff}.lesson-content{flex:1}.lesson-id{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.lesson-title{font-size:1rem;font-weight:600;margin-top:2px}.lesson-lock{font-size:1.2rem}.lesson-check{font-size:1.5rem;font-weight:700}.lesson-screen{min-height:100vh;display:flex;flex-direction:column}.lesson-header{display:flex;align-items:center;gap:16px;padding:16px 0;position:sticky;top:0;background:var(--bg-primary);z-index:10}.lesson-progress-bar{flex:1;height:8px;background:var(--bg-card);border-radius:4px;overflow:hidden}.lesson-content-container{flex:1;padding-bottom:100px}.lesson-title-section{text-align:center;margin-bottom:24px}.lesson-label{font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:1px}.lesson-title-section h1{font-size:1.75rem;font-weight:700;margin:8px 0}.lesson-desc{color:var(--text-secondary);font-size:1rem}.arabic-display{text-align:center;margin-bottom:16px}.arabic-display h3{font-size:.9rem;color:var(--text-muted);margin-bottom:16px}.arabic-letters{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}.arabic-letter{font-family:var(--font-arabic);font-size:2.5rem;background:var(--bg-secondary);width:64px;height:64px;display:flex;align-items:center;justify-content:center;border-radius:12px;animation:fadeIn .4s ease forwards;opacity:0;transition:transform .2s,background .2s}.arabic-letter:hover{transform:scale(1.1);background:var(--primary)}.arabic-symbol{font-family:var(--font-arabic);font-size:4rem;color:var(--primary)}.lesson-points{margin-bottom:16px}.lesson-points h3{font-size:1rem;font-weight:600;margin-bottom:16px}.points-list{list-style:none}.point-item{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.05)}.point-item:last-child{border-bottom:none}.point-bullet{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;color:#fff;flex-shrink:0}.lesson-examples{margin-bottom:16px}.lesson-examples h3{font-size:1rem;font-weight:600;margin-bottom:16px}.examples-grid{display:flex;flex-wrap:wrap;gap:12px}.example-item{background:var(--bg-secondary);padding:16px 20px;border-radius:12px;flex:1;min-width:80px;text-align:center}.example-item .arabic{font-size:1.5rem}.lesson-forms{margin-bottom:16px}.lesson-forms h3{font-size:1rem;font-weight:600;margin-bottom:16px}.form-row{display:flex;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.05)}.form-row:last-child{border-bottom:none}.form-label{font-family:var(--font-arabic);font-size:2rem;width:50px;text-align:center}.form-variants{display:flex;gap:16px;flex:1;justify-content:space-around}.form-variants .arabic{font-size:1.5rem}.lesson-action{position:fixed;bottom:0;left:0;right:0;padding:20px;background:linear-gradient(transparent,var(--bg-primary) 20%);max-width:480px;margin:0 auto}.quiz-screen{min-height:100vh;display:flex;flex-direction:column}.quiz-header{display:flex;align-items:center;gap:16px;padding:16px 0;position:sticky;top:0;background:var(--bg-primary);z-index:10}.close-btn{width:40px;height:40px;border-radius:50%;background:var(--bg-card);border:none;color:var(--text-secondary);font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center}.quiz-progress-bar{flex:1;height:10px;background:var(--bg-card);border-radius:5px;overflow:hidden}.quiz-progress-bar .progress-fill{height:100%;border-radius:5px;transition:width .3s ease}.quiz-score{background:var(--gold);color:#000;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700}.quiz-content{flex:1;padding:20px 0}.quiz-question{text-align:center;margin-bottom:32px}.quiz-question h2{font-size:1.5rem;font-weight:700;line-height:1.4}.quiz-arabic{font-family:var(--font-arabic);font-size:5rem;margin-top:24px;color:var(--primary)}.quiz-hint{color:var(--text-muted);font-size:.9rem;margin-top:8px}.quiz-options{display:flex;flex-direction:column;gap:12px}.quiz-option{display:flex;align-items:center;gap:16px;padding:16px 20px;background:var(--bg-card);border:2px solid transparent;border-radius:var(--radius-md);cursor:pointer;text-align:left;transition:all .2s ease;font-size:1rem;color:var(--text-primary)}.quiz-option:hover:not(:disabled){border-color:var(--primary);transform:translate(4px)}.quiz-option.correct{background:#22c55e33;border-color:var(--success)}.quiz-option.incorrect{background:#ef444433;border-color:var(--error);animation:shake .3s ease-in-out}.option-letter{width:32px;height:32px;border-radius:8px;background:var(--bg-secondary);display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}.option-text{flex:1}.quiz-images{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.quiz-image-option{min-height:120px;background:var(--bg-card);border:3px solid transparent;border-radius:var(--radius-lg);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.quiz-image-option:hover:not(:disabled){border-color:var(--primary);transform:scale(1.02)}.quiz-image-option.correct{background:#22c55e33;border-color:var(--success)}.quiz-image-option.incorrect{background:#ef444433;border-color:var(--error);animation:shake .3s ease-in-out}.quiz-tf-options{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.quiz-tf-btn{padding:32px 24px;background:var(--bg-card);border:3px solid transparent;border-radius:var(--radius-lg);cursor:pointer;font-size:1.2rem;font-weight:600;color:var(--text-primary);transition:all .2s ease}.quiz-tf-btn:hover:not(:disabled){border-color:var(--primary)}.quiz-tf-btn.correct{background:#22c55e33;border-color:var(--success)}.quiz-tf-btn.incorrect{background:#ef444433;border-color:var(--error)}.matching-grid{display:flex;gap:10px}.matching-column{flex:1;display:flex;flex-direction:column;gap:8px}.matching-item{padding:10px 8px;background:var(--bg-card);border:2px solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:all .2s ease;font-size:.7rem;color:var(--text-primary);text-align:center;min-height:100px;display:flex;align-items:center;justify-content:center;line-height:1.3;word-break:break-word;flex-shrink:0}.matching-item:hover:not(:disabled){border-color:var(--primary)}.matching-item.selected{border-color:var(--secondary);background:#0891b233}.matching-item.matched{background:#22c55e33;border-color:var(--success);opacity:.7}.ordering-items{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:24px}.ordering-item{padding:16px 24px;background:var(--bg-card);border-radius:var(--radius-md);cursor:grab}.quiz-feedback{position:fixed;bottom:0;left:0;right:0;padding:20px;display:flex;align-items:center;justify-content:space-between;max-width:480px;margin:0 auto;animation:slideUp .3s ease}.quiz-feedback.correct{background:linear-gradient(135deg,#22c55ef2,#16a34af2)}.quiz-feedback.incorrect{background:linear-gradient(135deg,#ef4444f2,#dc2626f2)}.feedback-content{display:flex;align-items:center;gap:12px}.feedback-icon{font-size:1.5rem}.feedback-text{font-weight:700;font-size:1.1rem}.result-screen{min-height:100vh;display:flex;flex-direction:column;padding-top:40px}.result-content{flex:1;text-align:center}.result-icon{font-size:5rem;margin-bottom:16px;animation:pulse 2s infinite}.result-icon.success{animation:none;animation:pulse 1s ease}.result-title{font-size:2rem;font-weight:800;margin-bottom:8px}.result-subtitle{color:var(--text-secondary);font-size:1rem;margin-bottom:32px}.result-score-card{display:flex;align-items:center;gap:24px;padding:24px;margin-bottom:24px}.score-circle{width:100px;height:100px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.score-inner{width:80px;height:80px;border-radius:50%;background:var(--bg-card);display:flex;align-items:center;justify-content:center}.score-value{font-size:1.5rem;font-weight:800}.score-details{flex:1;display:flex;flex-direction:column;gap:8px}.score-item{display:flex;justify-content:space-between;align-items:center}.score-label{color:var(--text-muted);font-size:.9rem}.score-number{font-size:1.2rem;font-weight:700}.result-achievements{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}.achievement-item{display:flex;align-items:center;gap:12px;padding:16px}.achievement-icon{font-size:1.5rem}.achievement-text{font-weight:600}.result-actions{padding:20px 0 40px;display:flex;flex-direction:column;gap:12px}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.skip-exam-screen{min-height:100vh;display:flex;flex-direction:column}.exam-header{display:flex;align-items:center;gap:16px;padding:16px 0}.exam-info{flex:1;display:flex;flex-direction:column}.exam-label{font-weight:700;font-size:1rem;color:var(--warning)}.exam-sublabel{font-size:.85rem;color:var(--text-muted)}.exam-progress{margin-bottom:24px}.exam-stats{display:flex;justify-content:space-between;margin-top:8px;font-size:.85rem;color:var(--text-secondary)}.exam-score{font-weight:600;color:var(--gold)}.exam-result{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 0}.result-badge{font-size:5rem;margin-bottom:24px;animation:pulse 2s infinite}.result-badge.passed{animation:none}.exam-result h1{font-size:2rem;font-weight:800;margin-bottom:8px}.result-subtitle{color:var(--text-secondary);margin-bottom:32px}.score-display{display:flex;align-items:center;gap:24px;padding:24px;width:100%;max-width:320px;margin-bottom:32px}.score-circle{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.score-inner{width:64px;height:64px;border-radius:50%;background:var(--bg-card);display:flex;align-items:center;justify-content:center}.score-value{font-size:1.25rem;font-weight:800}.score-info{flex:1}.score-row{display:flex;justify-content:space-between;padding:6px 0;font-size:.9rem}.result-actions{display:flex;flex-direction:column;gap:12px;width:100%}.skip-exam-screen .quiz-content{flex:1;padding:20px 0}.skip-exam-screen .quiz-question{text-align:center;margin-bottom:32px}.skip-exam-screen .quiz-question h2{font-size:1.3rem;font-weight:700;line-height:1.4}.skip-exam-screen .quiz-arabic{font-family:var(--font-arabic);font-size:4rem;margin-top:24px;color:var(--warning)}.skip-exam-screen .quiz-options{display:flex;flex-direction:column;gap:12px}.skip-exam-screen .quiz-option{display:flex;align-items:center;gap:16px;padding:16px 20px;background:var(--bg-card);border:2px solid transparent;border-radius:var(--radius-md);cursor:pointer;text-align:left;transition:all .2s ease;font-size:1rem;color:var(--text-primary)}.skip-exam-screen .quiz-option:hover:not(:disabled){border-color:var(--warning)}.skip-exam-screen .quiz-option.correct{background:#22c55e33;border-color:var(--success)}.skip-exam-screen .quiz-option.incorrect{background:#ef444433;border-color:var(--error);animation:shake .3s ease-in-out}.skip-exam-screen .option-letter{width:32px;height:32px;border-radius:8px;background:var(--bg-secondary);display:flex;align-items:center;justify-content:center;font-weight:700}.skip-exam-screen .option-text{flex:1}.skip-exam-screen .quiz-images{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.skip-exam-screen .quiz-image-option{min-height:120px;background:var(--bg-card);border:3px solid transparent;border-radius:var(--radius-lg);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.skip-exam-screen .quiz-image-option:hover:not(:disabled){border-color:var(--warning)}.skip-exam-screen .quiz-image-option.correct{background:#22c55e33;border-color:var(--success)}.skip-exam-screen .quiz-image-option.incorrect{background:#ef444433;border-color:var(--error)}.skip-exam-screen .quiz-tf-options{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.skip-exam-screen .quiz-tf-btn{padding:32px 24px;background:var(--bg-card);border:3px solid transparent;border-radius:var(--radius-lg);cursor:pointer;font-size:1.2rem;font-weight:600;color:var(--text-primary);transition:all .2s ease}.skip-exam-screen .quiz-tf-btn:hover:not(:disabled){border-color:var(--warning)}.skip-exam-screen .quiz-tf-btn.correct{background:#22c55e33;border-color:var(--success)}.skip-exam-screen .quiz-tf-btn.incorrect{background:#ef444433;border-color:var(--error)}.skip-exam-screen .matching-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.skip-exam-screen .matching-column{display:flex;flex-direction:column;gap:12px}.skip-exam-screen .matching-item{padding:10px 8px;background:var(--bg-card);border:2px solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:all .2s ease;font-size:.7rem;color:var(--text-primary);text-align:center;min-height:100px;display:flex;align-items:center;justify-content:center;line-height:1.3;word-break:break-word}.skip-exam-screen .matching-item:hover:not(:disabled){border-color:var(--warning)}.skip-exam-screen .matching-item.selected{border-color:var(--secondary);background:#0891b233}.skip-exam-screen .matching-item.matched{background:#22c55e33;border-color:var(--success);opacity:.7}.skip-exam-screen .quiz-feedback{position:fixed;bottom:0;left:0;right:0;padding:20px;display:flex;align-items:center;justify-content:space-between;max-width:480px;margin:0 auto;animation:slideUp .3s ease}.skip-exam-screen .quiz-feedback.correct{background:linear-gradient(135deg,#22c55ef2,#16a34af2)}.skip-exam-screen .quiz-feedback.incorrect{background:linear-gradient(135deg,#ef4444f2,#dc2626f2)}.skip-exam-screen .feedback-content{display:flex;align-items:center;gap:12px}.skip-exam-screen .feedback-icon{font-size:1.5rem}.skip-exam-screen .feedback-text{font-weight:700;font-size:1.1rem}.login-screen{min-height:100vh;width:100vw;display:flex;align-items:center;justify-content:center;background:var(--bg-primary, #EBF4F6);padding:20px;position:fixed;inset:0}.login-card{position:relative;width:100%;max-width:400px;background:var(--bg-card, #ffffff);border-radius:var(--radius-xl, 24px);padding:40px 32px;border:1px solid rgba(8,131,149,.1);box-shadow:0 4px 16px #08839514}.login-header{text-align:center;margin-bottom:32px}.login-logo{width:80px;height:80px;margin-bottom:16px;object-fit:contain}.login-header h1{font-size:1.8rem;color:var(--text-primary, #09637E);margin:0 0 8px;font-weight:700;letter-spacing:-.5px}.login-subtitle{color:var(--text-muted, #7AB2B2);font-size:.95rem;margin:0}.login-form{display:flex;flex-direction:column;gap:20px}.login-error{background:#ef44441a;border:1px solid rgba(239,68,68,.2);color:var(--error, #ef4444);padding:12px 16px;border-radius:var(--radius-md, 12px);font-size:.9rem;display:flex;align-items:center;gap:8px}.form-group{display:flex;flex-direction:column;gap:6px}.form-group label{color:var(--text-primary, #09637E);font-size:.85rem;font-weight:600;padding-left:4px}.form-group input{background:var(--bg-primary, #EBF4F6);border:1px solid rgba(8,131,149,.15);border-radius:var(--radius-md, 12px);padding:14px 16px;color:var(--text-primary, #09637E);font-size:1rem;outline:none;transition:all .2s}.form-group input:focus{border-color:var(--primary, #088395);box-shadow:0 0 0 3px #0883951f}.form-group input::placeholder{color:var(--text-muted, #7AB2B2)}.login-btn{background:linear-gradient(135deg,var(--primary, #088395) 0%,var(--primary-dark, #09637E) 100%);color:#fff;border:none;border-radius:var(--radius-md, 12px);padding:14px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;margin-top:4px;box-shadow:0 4px 14px #0883954d}.login-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 8px 20px #08839566}.login-btn:active:not(:disabled){transform:translateY(0)}.login-btn:disabled{opacity:.5;cursor:not-allowed}.login-spinner{animation:spin 1s linear infinite;display:inline-block}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.install-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:16px;padding:12px;background:linear-gradient(135deg,#08839514,#7ab2b214);border:1px dashed rgba(8,131,149,.3);border-radius:var(--radius-md, 12px);color:var(--primary, #088395);font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s}.install-btn:hover{background:linear-gradient(135deg,#08839526,#7ab2b226);border-color:var(--primary, #088395)}.google-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px;background:#fff;border:1px solid rgba(0,0,0,.15);border-radius:var(--radius-md, 12px);font-size:1rem;font-weight:600;color:#3c4043;cursor:pointer;transition:all .2s;box-shadow:0 1px 3px #00000014}.google-btn:hover:not(:disabled){background:#f8f9fa;box-shadow:0 2px 8px #0000001f}.google-btn:disabled{opacity:.5;cursor:not-allowed}.google-icon{flex-shrink:0}.login-divider{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--text-muted, #7AB2B2);font-size:.85rem}.login-divider:before,.login-divider:after{content:"";flex:1;height:1px;background:#08839526}.login-toggle{margin-top:8px;text-align:center}.toggle-mode-btn{background:none;border:none;color:var(--primary, #088395);font-size:.9rem;font-weight:600;cursor:pointer;text-decoration:underline}.toggle-mode-btn:hover{color:var(--primary-dark, #09637E)}.mushaf-screen{padding-bottom:32px}.mushaf-header{display:flex;align-items:center;gap:12px;margin-bottom:20px;padding:4px 0}.mushaf-header .back-btn{background:var(--bg-card);border:none;border-radius:var(--radius-sm);padding:8px;color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}.mushaf-header .back-btn:hover{background:var(--bg-secondary)}.mushaf-header .header-title{flex:1}.mushaf-header .header-title h1{font-size:1.3rem;font-weight:700;color:var(--text-primary);line-height:1.2}.mushaf-header .header-subtitle{font-size:.8rem;color:var(--text-muted);font-weight:500}.mushaf-header .header-icon{color:var(--primary);opacity:.7}.search-bar{position:relative;margin-bottom:20px}.search-bar .search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-muted)}.search-bar input{width:100%;padding:12px 16px 12px 42px;border:1px solid rgba(8,131,149,.15);border-radius:var(--radius-md);background:var(--bg-card);color:var(--text-primary);font-size:.95rem;font-family:var(--font-main);outline:none;transition:border-color .2s,box-shadow .2s}.search-bar input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #0883951a}.search-bar input::placeholder{color:var(--text-muted)}.surah-list{display:flex;flex-direction:column;gap:8px}.surah-card{display:flex;align-items:center;gap:14px;padding:14px 16px;cursor:pointer;animation:fadeIn .3s ease forwards}.surah-number{width:40px;height:40px;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.surah-number span{color:#fff;font-weight:700;font-size:.85rem}.surah-info{flex:1;min-width:0}.surah-name-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.surah-latin{font-weight:600;font-size:.95rem;color:var(--text-primary)}.surah-arabic{font-family:var(--font-arabic);font-size:1.25rem;color:var(--primary);line-height:1.4}.surah-meta{display:flex;align-items:center;gap:12px;margin-top:2px}.surah-place{display:flex;align-items:center;gap:4px;font-size:.75rem;color:var(--text-muted)}.surah-ayat{font-size:.75rem;color:var(--text-muted)}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;gap:16px;color:var(--text-muted)}.spinner{width:36px;height:36px;border:3px solid rgba(8,131,149,.15);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.empty-state{text-align:center;padding:40px 20px;color:var(--text-muted)}.surah-detail-screen{padding-bottom:40px}.surah-detail-header{display:flex;align-items:center;gap:8px;margin-bottom:16px;padding:4px 0}.surah-detail-header .back-btn{background:var(--bg-card);border:none;border-radius:var(--radius-sm);padding:8px;color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;flex-shrink:0}.surah-detail-header .back-btn:hover{background:var(--bg-secondary)}.header-center{flex:1;text-align:center}.surah-title-arabic{font-family:var(--font-arabic);font-size:1.5rem;color:var(--text-primary);line-height:1.4}.surah-title-latin{font-size:.8rem;color:var(--text-muted);font-weight:500}.guide-toggle-btn{background:var(--bg-card);border:none;border-radius:var(--radius-sm);padding:8px;color:var(--primary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;flex-shrink:0}.guide-toggle-btn:hover{background:var(--bg-secondary)}.guide-overlay{position:fixed;inset:0;z-index:1000;background:#00000059;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:24px;animation:overlayFadeIn .25s ease}@keyframes overlayFadeIn{0%{opacity:0}to{opacity:1}}.guide-modal{background:#ffffffd1;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(255,255,255,.4);border-radius:20px;padding:24px;max-width:380px;width:100%;max-height:80vh;overflow-y:auto;box-shadow:0 8px 32px #08839526,0 2px 8px #00000014,inset 0 1px #fff9;animation:modalSlideUp .3s cubic-bezier(.16,1,.3,1)}@keyframes modalSlideUp{0%{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.guide-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.guide-header h3{font-size:1rem;font-weight:700;color:var(--text-primary)}.guide-close{background:#08839514;border:none;color:var(--text-secondary);cursor:pointer;padding:6px;display:flex;align-items:center;border-radius:8px;transition:background .15s}.guide-close:hover{background:#08839526}.guide-hint{font-size:.75rem;color:var(--text-muted);margin-bottom:12px;display:flex;align-items:center;gap:4px}.guide-rules{display:flex;flex-direction:column;gap:8px}.guide-rule{display:flex;align-items:center;gap:10px}.guide-color-dot{width:14px;height:14px;border-radius:4px;flex-shrink:0;box-shadow:0 1px 3px #00000026}.guide-rule-text{display:flex;flex-direction:column}.guide-rule-name{font-size:.8rem;font-weight:600;color:var(--text-primary);line-height:1.3}.guide-rule-desc{font-size:.7rem;color:var(--text-muted);line-height:1.3}.bismillah-container{text-align:center;padding:16px 12px;margin-bottom:16px;background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid rgba(8,131,149,.08)}.bismillah-text{font-family:var(--font-arabic);font-size:1.6rem;color:var(--primary);line-height:2}.verses-container{display:flex;flex-direction:column;gap:16px}.verse-block{background:var(--bg-card);border-radius:var(--radius-lg);padding:16px;border:1px solid rgba(8,131,149,.08);box-shadow:0 2px 8px #0883950d;animation:fadeIn .3s ease forwards}.verse-number-badge{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff;border-radius:8px;font-size:.8rem;font-weight:700}.verse-header-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.verse-play-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;background:#08839514;border:1px solid rgba(8,131,149,.15);border-radius:20px;color:var(--primary);font-size:.72rem;font-weight:600;cursor:pointer;transition:all .2s;font-family:var(--font-main)}.verse-play-btn:hover{background:#08839526}.verse-play-btn.playing{background:var(--primary);color:#fff;border-color:var(--primary)}.verse-playing{border-color:#0883954d;box-shadow:0 0 0 2px #0883951a,0 4px 16px #0883951f}.verse-words{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:6px 2px;direction:rtl;text-align:right;line-height:1.4}.word-item{display:inline-flex;flex-direction:column;align-items:center;padding:4px 3px;border-radius:6px;transition:background .15s,transform .1s;cursor:default}.word-tappable{cursor:pointer}.word-tappable:hover{background:#0883950f}.word-tappable:active{transform:scale(.95)}.word-playing{background:#0883951f;border-radius:8px;box-shadow:0 0 0 2px #08839540}.word-highlighted{background:#0883952e;border-radius:8px;box-shadow:0 0 0 2px var(--primary);animation:wordPulse .3s ease}.word-highlighted .word-glyph{transform:scale(1.05);transition:transform .2s ease}.word-highlighted .word-translit{color:var(--primary);font-weight:600}@keyframes wordPulse{0%{transform:scale(.95);opacity:.7}to{transform:scale(1);opacity:1}}.word-glyph{font-size:1.75rem;line-height:1.8;display:block}.word-end{font-size:1.2rem;color:var(--primary);opacity:.85}.word-translit{font-family:var(--font-main);font-size:.65rem;color:var(--text-muted);margin-top:2px;direction:ltr;text-align:center;line-height:1.3;max-width:80px;word-break:break-word;display:flex;align-items:center;gap:2px}.translit-audio-icon{flex-shrink:0;opacity:.5}.load-more-btn{width:100%;margin-top:20px;padding:14px}.spin-icon{animation:spin .8s linear infinite}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px;gap:16px;color:var(--text-muted)}.surah-detail-screen .spinner{width:36px;height:36px;border:3px solid rgba(8,131,149,.15);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}