@import "https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary:#131f24;--bg-secondary:#1a2c33;--bg-card:#1f3a44;--bg-card-hover:#254955;--bg-deep:#0f1f25;--text-primary:#fff;--text-secondary:#a1c4cf;--text-muted:#6b8f9b;--text-dim:#4a6b77;--text-hint:#3d5c68;--border:#1f3a44;--header-bg:#131f24eb;--header-border:#58cc0240;--stat-bg:#1a2c33;--stat-border:#ffffff0f;--overlay-bg:#000000b8;--shadow-card:0 5px 0 #0000004d;--shadow-card-hover:0 3px 0 #0000004d;--shadow-btn:0 4px 0 #00000040;--form-cell-bg:#00000038;--game-choice-text:#e0e8ec;--detail-btn-bg:#3d5c68;--detail-btn-hover:#5a8a9a;--close-btn-bg:#0f1f25;--close-btn-color:#6b8f9b;--notebook-bg:#fdf8ef;--notebook-margin:#e8b4b8;--notebook-line:#c8dff5;--notebook-baseline:#8eb4d8;--notebook-text:#1a1a2e;--notebook-text-hover:#0a3d6b;--notebook-hover-bg:#8eb4d833}[data-theme=light]{--bg-primary:#f0f4f8;--bg-secondary:#fff;--bg-card:#fff;--bg-card-hover:#f5f8fa;--bg-deep:#e8edf2;--text-primary:#1a1a2e;--text-secondary:#4a5b6a;--text-muted:#7a8d9c;--text-dim:#9aaebb;--text-hint:#b0bfc9;--border:#dde4eb;--header-bg:#ffffffeb;--header-border:#58cc0259;--stat-bg:#f0f4f8;--stat-border:#0000000f;--overlay-bg:#00000073;--shadow-card:0 4px 0 #00000014;--shadow-card-hover:0 2px 0 #00000014;--shadow-btn:0 4px 0 #0000001a;--form-cell-bg:#0000000d;--game-choice-text:#1a1a2e;--detail-btn-bg:#9aaebb;--detail-btn-hover:#7a8d9c;--close-btn-bg:#e8edf2;--close-btn-color:#7a8d9c;--notebook-bg:#fdf8ef;--notebook-margin:#e8b4b8;--notebook-line:#c8dff5;--notebook-baseline:#8eb4d8;--notebook-text:#1a1a2e;--notebook-text-hover:#0a3d6b;--notebook-hover-bg:#8eb4d833}body{background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;font-family:Nunito,sans-serif;transition:background .3s,color .3s}#root{min-height:100vh}::selection{color:#fff;background:#58cc02}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--bg-card);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--bg-card-hover)}.app{flex-direction:column;min-height:100vh;display:flex}.main{flex:1;width:100%;margin:0;padding:24px 32px 0}.grid{direction:rtl;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:18px;margin-bottom:44px;display:grid}.foot{text-align:center;border-top:2px solid var(--border);color:var(--text-dim);flex-direction:column;align-items:center;gap:4px;padding:22px;font-size:13px;font-weight:700;transition:border-color .3s,color .3s;display:flex}.foot-collab{opacity:.8;font-size:12px}.foot-collab a{color:#58cc02;font-weight:800;text-decoration:none;transition:opacity .2s}.foot-collab a:hover{opacity:.8;text-decoration:underline}@media (width<=768px){.grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}}@media (width<=480px){.grid{grid-template-columns:repeat(2,1fr);gap:12px}.main{padding:16px 16px 40px}}.header{z-index:100;background:var(--header-bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:2px solid var(--header-border);transition:background .3s,border-color .3s;position:sticky;top:0}.header-inner{justify-content:space-between;align-items:center;margin:0 auto;padding:10px 24px;display:flex}.logo{align-items:center;display:flex}.logo-img{width:auto;height:38px}.header-right{align-items:center;gap:10px;display:flex}.header-stats{gap:6px;display:flex}.stat{background:var(--stat-bg);border:2px solid var(--stat-border);cursor:default;border-radius:50px;align-items:center;gap:5px;padding:6px 14px;transition:transform .15s,background .3s,border-color .3s;display:flex}.stat:hover{transform:scale(1.05)}.streak{border-color:#ff960040}.xp-stat{border-color:#ffc80040}.crown{border-color:#58cc0240}.stat-emoji{align-items:center;font-size:16px;display:flex}.stat-val{color:var(--text-primary);font-size:15px;font-weight:800}.stat-lbl{color:var(--text-muted);font-size:11px;font-weight:700}.theme-toggle{border:2px solid var(--border);background:var(--stat-bg);width:38px;height:38px;color:var(--text-muted);cursor:pointer;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;transition:all .2s;display:flex}.theme-toggle:hover{color:#ffc800;border-color:#ffc800;transform:scale(1.1)}.theme-toggle svg{transition:transform .3s}.theme-toggle:hover svg{transform:rotate(20deg)}.lang-select{flex-shrink:0;position:relative}.lang-btn{border:2px solid var(--border);background:var(--stat-bg);color:var(--text-primary);cursor:pointer;border-radius:12px;align-items:center;gap:6px;padding:6px 12px;font-family:Nunito,sans-serif;font-size:13px;font-weight:800;transition:all .2s;display:flex}.lang-btn:hover{border-color:var(--text-muted)}.lang-flag{font-size:18px;line-height:1}.lang-code{letter-spacing:.5px;font-size:12px}.lang-arrow{transition:transform .2s}.lang-arrow.open{transform:rotate(180deg)}.lang-dropdown{background:var(--bg-secondary);border:2px solid var(--border);z-index:200;border-radius:12px;min-width:100%;padding:4px;animation:.15s dropIn;position:absolute;top:calc(100% + 6px);right:0;box-shadow:0 8px 24px #0000004d}@keyframes dropIn{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.lang-option{width:100%;color:var(--text-primary);cursor:pointer;background:0 0;border:none;border-radius:8px;align-items:center;gap:8px;padding:8px 12px;font-family:Nunito,sans-serif;font-size:13px;font-weight:700;transition:background .15s;display:flex}.lang-option:hover{background:var(--bg-card)}.lang-option.active{background:var(--bg-card);color:#58cc02}.login-btn{color:#fff;cursor:pointer;background:#58cc02;border:none;border-radius:12px;flex-shrink:0;padding:8px 18px;font-family:Nunito,sans-serif;font-size:13px;font-weight:800;transition:all .2s;box-shadow:0 3px #3a8a01}.login-btn:hover{filter:brightness(1.1);transform:translateY(1px);box-shadow:0 2px #3a8a01}.login-btn:active{transform:translateY(3px);box-shadow:0 0 #3a8a01}.user-menu{flex-shrink:0;position:relative}.user-btn{cursor:pointer;background:0 0;border:none;padding:0}.user-avatar{color:#fff;background:linear-gradient(135deg,#58cc02,#00cd9c);border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-family:Nunito,sans-serif;font-size:15px;font-weight:900;transition:transform .15s,box-shadow .15s;display:flex;box-shadow:0 2px #3a8a01}.user-btn:hover .user-avatar{transform:scale(1.08);box-shadow:0 3px 8px #58cc024d}.user-dropdown{background:var(--bg-secondary);border:2px solid var(--border);z-index:200;border-radius:14px;min-width:200px;padding:6px;animation:.15s dropIn;position:absolute;top:calc(100% + 8px);right:0;box-shadow:0 8px 24px #0000004d}.user-info{border-bottom:1px solid var(--border);margin-bottom:4px;padding:10px 12px}.user-name{color:var(--text-primary);font-size:14px;font-weight:800;display:block}.user-email{color:var(--text-muted);margin-top:2px;font-size:11px;font-weight:600;display:block}.user-logout{color:#ff4b4b;cursor:pointer;background:0 0;border:none;border-radius:10px;align-items:center;gap:8px;width:100%;padding:10px 12px;font-family:Nunito,sans-serif;font-size:13px;font-weight:700;transition:background .15s;display:flex}.user-logout:hover{background:#ff4b4b1a}@media (width<=640px){.header-inner{flex-direction:column;gap:8px}.stat-lbl,.lang-code{display:none}}.home{flex-direction:column;justify-content:center;gap:40px;max-width:860px;min-height:calc(100vh - 120px);margin:0 auto;padding:40px 24px 60px;display:flex}.verse-section{text-align:center;background:var(--bg-secondary);border:2px solid var(--border);border-radius:24px;padding:48px 32px;transition:background .3s,border-color .3s;position:relative;overflow:hidden}.verse-section:before,.verse-section:after{content:"";opacity:.04;background:#58cc02;border-radius:50%;width:120px;height:120px;position:absolute}.verse-section:before{top:-40px;right:-40px}.verse-section:after{bottom:-40px;left:-40px}.verse-ornament{color:var(--mc,#58cc02);opacity:.5;margin-bottom:20px;font-size:32px}.verse-arabic{color:var(--text-primary);margin-bottom:20px;font-family:Noto Sans Arabic,Geeza Pro,Traditional Arabic,serif;font-size:32px;line-height:2;transition:color .3s}.verse-translation{color:var(--text-secondary);max-width:600px;margin:0 auto 20px;font-size:16px;font-style:italic;line-height:1.7;transition:color .3s}.verse-ref{color:var(--text-muted);justify-content:center;align-items:center;gap:8px;font-size:13px;font-weight:700;display:flex}.verse-sura-ar{font-family:Noto Sans Arabic,Geeza Pro,serif;font-size:15px}.verse-dot{opacity:.4}.verse-nav{justify-content:center;gap:12px;margin-top:20px;display:flex}.verse-nav-btn{border:2px solid var(--border);background:var(--bg-deep);color:var(--text-secondary);cursor:pointer;border-radius:50px;align-items:center;gap:4px;padding:8px 16px;font-family:Nunito,sans-serif;font-size:12px;font-weight:700;transition:all .2s;display:flex}.verse-nav-btn:hover:not(.disabled){color:#58cc02;border-color:#58cc02}.verse-nav-btn.disabled{opacity:.3;cursor:default}.verse-play-btn{color:#ce82ff;cursor:pointer;background:0 0;border:2px solid #ce82ff;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;transition:all .2s;display:flex}.verse-play-btn:hover{background:#ce82ff1f;transform:scale(1.1)}.verse-play-btn.playing{color:#fff;background:#ce82ff;animation:1.5s ease-in-out infinite versePulse}@keyframes versePulse{0%,to{box-shadow:0 0 #ce82ff4d}50%{box-shadow:0 0 0 8px #ce82ff00}}.verse-loading{color:var(--text-dim);padding:40px;font-size:14px}.home-cards{grid-template-columns:1fr 1fr;gap:20px;display:grid}.home-card{text-align:center;background:var(--bg-secondary);border:2.5px solid var(--border);box-shadow:var(--shadow-card);cursor:pointer;border-radius:20px;flex-direction:column;align-items:center;padding:32px 24px 24px;transition:all .25s;display:flex;position:relative;overflow:hidden}.hc-arabic:hover{box-shadow:var(--shadow-card-hover), 0 0 24px #58cc021f;border-color:#58cc02;transform:translateY(2px)}.hc-quran:hover{box-shadow:var(--shadow-card-hover), 0 0 24px #ce82ff1f;border-color:#ce82ff;transform:translateY(2px)}.home-card:active{transform:translateY(4px);box-shadow:0 0 #0000001a}.hc-icon{margin-bottom:16px}.hc-body{flex:1}.hc-title{color:var(--text-primary);margin-bottom:8px;font-size:20px;font-weight:900;transition:color .3s}.hc-desc{color:var(--text-secondary);margin-bottom:14px;font-size:13px;line-height:1.5;transition:color .3s}.hc-tags{flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:16px;display:flex}.hc-tag{text-transform:uppercase;letter-spacing:.5px;border-radius:50px;padding:4px 12px;font-size:11px;font-weight:800}.tag-level{color:#58cc02;background:#58cc021f}.tag-count{color:#1cb0f6;background:#1cb0f61f}.tag-soon,.tag-quran{color:#ce82ff;background:#ce82ff1f}.hc-btn-quran{background:#ce82ff;box-shadow:0 4px #9a5cc7}.hc-quran:hover .hc-btn-quran{box-shadow:0 2px #9a5cc7}.hc-action{margin-top:auto}.hc-btn{color:#fff;background:#58cc02;border-radius:14px;padding:10px 28px;font-size:14px;font-weight:800;transition:all .15s;display:inline-block;box-shadow:0 4px #3a8a01}.home-card:hover:not(.hc-disabled) .hc-btn{filter:brightness(1.1);transform:translateY(1px);box-shadow:0 2px #3a8a01}.hc-lock{color:var(--text-dim)}@media (width<=640px){.home{gap:24px;padding:24px 16px 40px}.verse-section{padding:32px 20px}.verse-arabic{font-size:24px}.verse-translation{font-size:14px}.home-cards{grid-template-columns:1fr}.home-card{padding:24px 20px 20px}}.card-wrap{perspective:800px;cursor:pointer;height:200px;animation:.45s cubic-bezier(.4,0,.2,1) both pop;animation-delay:var(--d)}@keyframes pop{0%{opacity:0;transform:translateY(24px)scale(.92)}to{opacity:1;transform:translateY(0)scale(1)}}.card-inner{width:100%;height:100%;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.4,0,.2,1);position:relative}.card-wrap.flipped .card-inner{transform:rotateY(180deg)}.card-face{backface-visibility:hidden;border-radius:18px;flex-direction:column;justify-content:center;align-items:center;padding:10px 14px;display:flex;position:absolute;inset:0;overflow:hidden}.front{background:var(--bg-card);box-shadow:var(--shadow-card);border:2.5px solid #0000;transition:border-color .2s,box-shadow .2s,transform .2s,background .2s}.card-wrap:hover .front{border-color:var(--c);box-shadow:var(--shadow-card-hover), 0 0 22px color-mix(in srgb, var(--c) 18%, transparent);background:var(--bg-card-hover);transform:translateY(2px)}.card-wrap.learned .front{border-color:var(--c);background:color-mix(in srgb, var(--c) 7%, var(--bg-card))}.card-num{color:var(--text-dim);font-size:10px;font-weight:800;position:absolute;top:10px;left:12px}.card-check{filter:drop-shadow(0 2px 4px #58cc0273);justify-content:center;align-items:center;animation:.35s cubic-bezier(.175,.885,.32,1.275) chk;display:flex;position:absolute;top:6px;right:8px}@keyframes chk{0%{transform:scale(0)}60%{transform:scale(1.25)}to{transform:scale(1)}}.card-letter{color:var(--c);filter:drop-shadow(0 2px 10px color-mix(in srgb, var(--c) 30%, transparent));margin-bottom:6px;font-size:62px;line-height:1;transition:transform .25s}.card-wrap:hover .card-letter{transform:scale(1.12)}.card-latin{color:var(--text-primary);text-transform:capitalize;font-size:15px;font-weight:800}.card-arabic{color:var(--text-secondary);font-size:13px;font-weight:600}.card-hint{color:var(--text-hint);opacity:0;font-size:9px;font-weight:700;transition:opacity .25s;position:absolute;bottom:8px}.card-wrap:hover .card-hint{opacity:1}.card-actions{z-index:2;opacity:0;gap:6px;transition:opacity .25s;display:flex;position:absolute;bottom:10px;right:10px}.card-wrap:hover .card-actions{opacity:1}.back-actions{opacity:1;margin-top:4px;position:static}.card-btn{color:#fff;cursor:pointer;width:30px;height:30px;box-shadow:var(--shadow-btn);border:none;border-radius:50%;justify-content:center;align-items:center;transition:all .2s;display:flex}.card-btn:hover{transform:scale(1.15)translateY(-1px);box-shadow:0 4px 12px #0000004d}.card-btn:active{transform:scale(.95)translateY(2px);box-shadow:0 1px #00000040}.play-btn{background:var(--c)}.play-btn:hover{box-shadow:0 4px 12px color-mix(in srgb, var(--c) 45%, transparent)}.play-btn.playing{animation:.6s ease-in-out infinite soundPulse}@keyframes soundPulse{0%,to{box-shadow:0 0 0 0 color-mix(in srgb, var(--c) 40%, transparent)}50%{box-shadow:0 0 0 8px color-mix(in srgb, var(--c) 0%, transparent)}}.detail-btn{background:var(--detail-btn-bg)}.detail-btn:hover{background:var(--detail-btn-hover);box-shadow:0 4px 12px #5a8a9a66}.back{background:linear-gradient(135deg, var(--bg-card), var(--bg-card-hover));border:2.5px solid var(--c);gap:6px;transform:rotateY(180deg)}.back-title{color:var(--c);text-transform:capitalize;margin-bottom:2px;font-size:14px;font-weight:800}.forms-grid{grid-template-columns:1fr 1fr;gap:7px;width:100%;display:grid}.form-cell{background:var(--form-cell-bg);border-radius:10px;flex-direction:column;align-items:center;padding:6px;display:flex}.form-lbl{color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;font-size:8px;font-weight:700}.form-ch{color:var(--text-primary);font-size:26px;line-height:1.3}@media (width<=640px){.card-wrap{height:180px}.card-letter{font-size:48px}}@media (width<=480px){.card-wrap{height:170px}.card-letter{font-size:42px}}.overlay{background:var(--overlay-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;justify-content:center;align-items:center;padding:20px;animation:.18s fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-wide{background:var(--bg-secondary);border:2.5px solid var(--mc);width:100%;max-width:1100px;max-height:90vh;box-shadow:0 24px 60px #00000080, 0 0 50px color-mix(in srgb, var(--mc) 12%, transparent);border-radius:24px;flex-direction:column;padding:0;transition:background .3s;animation:.3s cubic-bezier(.175,.885,.32,1.275) slideUp;display:flex;position:relative;overflow:hidden}@keyframes slideUp{0%{opacity:0;transform:translateY(36px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}.close-btn{background:var(--close-btn-bg);width:34px;height:34px;color:var(--close-btn-color);cursor:pointer;z-index:10;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:22px;line-height:1;transition:all .2s;display:flex;position:absolute;top:14px;right:14px}.close-btn:hover{color:#fff;background:#ff4b4b;transform:rotate(90deg)}.modal-layout{flex:1;min-height:0;display:flex;overflow:hidden}.modal-left{background:var(--bg-deep);flex-direction:column;align-items:center;gap:18px;width:320px;min-width:320px;padding:32px 28px;transition:background .3s;display:flex;overflow-y:auto}.ml-letter-wrap{text-align:center;position:relative}.ml-big-letter{color:var(--mc);filter:drop-shadow(0 4px 20px color-mix(in srgb, var(--mc) 40%, transparent));margin-bottom:6px;font-size:100px;line-height:1;animation:.55s cubic-bezier(.175,.885,.32,1.275) bounce}@keyframes bounce{0%{opacity:0;transform:scale(.4)}60%{transform:scale(1.08)}to{opacity:1;transform:scale(1)}}.ml-name-ar{color:var(--text-primary);font-size:22px;font-weight:700}.ml-name-la{color:var(--text-muted);text-transform:capitalize;font-size:14px;font-weight:700}.ml-num{color:var(--text-hint);font-size:11px;font-weight:800;position:absolute;top:4px;right:-10px}.ml-play{background:var(--mc);color:#fff;cursor:pointer;box-shadow:var(--shadow-btn);border:none;border-radius:50px;align-items:center;gap:8px;padding:10px 22px;font-family:Nunito,sans-serif;font-size:14px;font-weight:800;transition:all .2s;display:flex}.ml-play:hover{filter:brightness(1.1);transform:translateY(2px);box-shadow:0 2px #00000040}.ml-play:active{transform:translateY(4px);box-shadow:0 0 #00000040}.ml-play.playing{animation:.6s ease-in-out infinite pulse}@keyframes pulse{0%,to{box-shadow:0 0 0 0 color-mix(in srgb, var(--mc) 40%, transparent)}50%{box-shadow:0 0 0 10px color-mix(in srgb, var(--mc) 0%, transparent)}}.ml-forms{width:100%}.ml-forms-title{color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;text-align:center;margin-bottom:10px;font-size:12px;font-weight:800}.ml-forms-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.ml-form{background:var(--bg-secondary);text-align:center;border:2px solid #0000;border-radius:12px;padding:10px 6px;transition:all .2s}.ml-form:hover{border-color:var(--mc);transform:translateY(-2px)}.ml-form-lbl{color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;font-size:9px;font-weight:800;display:block}.ml-form-ch{color:var(--text-primary);font-size:32px;line-height:1.2}.ml-mode-switch{border:2px solid var(--border);border-radius:12px;gap:0;width:100%;margin-top:auto;display:flex;overflow:hidden}.mode-btn{background:var(--bg-deep);color:var(--text-muted);cursor:pointer;border:none;flex:1;padding:12px 8px;font-family:Nunito,sans-serif;font-size:13px;font-weight:800;transition:all .2s}.mode-btn:first-child{border-right:2px solid var(--border)}.mode-btn:hover{background:var(--bg-secondary);color:var(--text-secondary)}.mode-btn.active{background:var(--mc);color:#fff}.modal-right{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.notebook-header{color:var(--text-primary);border-bottom:2px solid var(--border);flex-shrink:0;justify-content:center;align-items:center;gap:8px;padding:14px 24px;font-size:16px;font-weight:800;transition:border-color .3s,color .3s;display:flex}.auto-play-btn{border:2px solid var(--mc);color:var(--mc);cursor:pointer;direction:ltr;background:0 0;border-radius:50px;align-items:center;gap:6px;margin:0 auto;padding:7px 16px;font-family:Nunito,sans-serif;font-size:12px;font-weight:800;transition:all .2s;display:flex}.auto-play-btn:hover{background:color-mix(in srgb, var(--mc) 15%, transparent);transform:scale(1.05)}.auto-play-btn.active{background:var(--mc);color:#fff;animation:1.5s ease-in-out infinite autoPulse}@keyframes autoPulse{0%,to{box-shadow:0 0 0 0 color-mix(in srgb, var(--mc) 30%, transparent)}50%{box-shadow:0 0 0 6px color-mix(in srgb, var(--mc) 0%, transparent)}}.notebook{background:var(--notebook-bg);direction:rtl;flex:1;padding:0;overflow-y:auto}.notebook-page{border-right:3px solid var(--notebook-margin);margin-right:40px;padding:12px 28px 28px;position:relative}.notebook-page:before{content:"";pointer-events:none;background-image:repeating-linear-gradient(to bottom, transparent 0px, transparent 14px, var(--notebook-line) 14px, var(--notebook-line) 15px, transparent 15px, transparent 100px), repeating-linear-gradient(to bottom, transparent 0px, transparent 39px, var(--notebook-line) 39px, var(--notebook-line) 40px, transparent 40px, transparent 100px), repeating-linear-gradient(to bottom, transparent 0px, transparent 64px, var(--notebook-baseline) 64px, var(--notebook-baseline) 66px, transparent 66px, transparent 100px), repeating-linear-gradient(to bottom, transparent 0px, transparent 89px, var(--notebook-line) 89px, var(--notebook-line) 90px, transparent 90px, transparent 100px);background-position:0 12px;background-size:100% 100px;position:absolute;inset:0}.notebook-content{z-index:1;padding-top:0;line-height:100px;position:relative}.nl-word{color:var(--notebook-text);vertical-align:baseline;cursor:pointer;border-radius:6px;padding:2px 6px;font-family:Noto Sans Arabic,Geeza Pro,Traditional Arabic,serif;font-size:38px;transition:background .15s,color .15s,transform .15s;display:inline-block;position:relative}.nl-word:hover{background:var(--notebook-hover-bg);color:var(--notebook-text-hover)}.nl-word:active{transform:scale(.96)}.nl-word.nl-playing{color:var(--mc);font-weight:700}.nl-dot{color:var(--notebook-baseline);vertical-align:baseline;margin:0 4px;font-size:16px;font-weight:900}.notebook-empty{text-align:center;color:var(--text-dim);direction:ltr;padding:40px;font-size:14px}@media (width<=768px){.overlay{padding:0}.modal-wide{border:none;border-radius:0;width:100%;max-width:100%;height:100%;max-height:100%}.close-btn{z-index:20;top:10px;right:10px}.modal-layout{flex-direction:column;height:100%}.modal-left{width:100%;min-width:unset;flex-direction:column;flex-shrink:0;align-items:center;gap:10px;padding:16px 16px 12px;overflow:visible}.ml-letter-wrap{justify-content:center;align-items:center;gap:14px;width:100%;display:flex}.ml-big-letter{margin-bottom:0;font-size:56px}.ml-name-ar{font-size:18px}.ml-name-la{font-size:12px}.ml-num{color:var(--text-dim);font-size:10px;position:static}.ml-play{border-radius:50%;flex-shrink:0;padding:10px}.ml-play span{display:none}.ml-play svg{width:22px;height:22px}.ml-forms{width:100%}.ml-forms-title{display:none}.ml-forms-grid{grid-template-columns:repeat(4,1fr);gap:6px}.ml-form{border-radius:10px;padding:6px 4px}.ml-form-lbl{margin-bottom:2px;font-size:8px}.ml-form-ch{font-size:24px}.ml-mode-switch{width:100%;margin-top:0}.mode-btn{padding:10px 8px;font-size:12px}.modal-right{flex:1;min-height:0;max-height:none}.notebook-header{padding:8px 16px}.auto-play-btn{padding:6px 14px;font-size:11px}.notebook-page{margin-right:16px;padding:6px 12px 16px}.nl-word{padding:1px 4px;font-size:28px}.notebook-content{line-height:72px}.notebook-page:before{background-image:repeating-linear-gradient(to bottom, transparent 0px, transparent 9px, var(--notebook-line) 9px, var(--notebook-line) 10px, transparent 10px, transparent 72px), repeating-linear-gradient(to bottom, transparent 0px, transparent 27px, var(--notebook-line) 27px, var(--notebook-line) 28px, transparent 28px, transparent 72px), repeating-linear-gradient(to bottom, transparent 0px, transparent 45px, var(--notebook-baseline) 45px, var(--notebook-baseline) 47px, transparent 47px, transparent 72px), repeating-linear-gradient(to bottom, transparent 0px, transparent 63px, var(--notebook-line) 63px, var(--notebook-line) 64px, transparent 64px, transparent 72px);background-position:0 8px;background-size:100% 72px}}.game-panel{flex-direction:column;height:100%;display:flex;overflow:hidden}.game-tabs{border-bottom:2px solid var(--border);flex-shrink:0;gap:4px;padding:12px 16px 0;display:flex}.game-tab{color:var(--text-dim);cursor:pointer;background:0 0;border:none;border-bottom:3px solid #0000;border-radius:10px 10px 0 0;align-items:center;gap:5px;margin-bottom:-2px;padding:8px 14px;font-family:Nunito,sans-serif;font-size:12px;font-weight:700;transition:all .2s;display:flex}.game-tab:hover{color:var(--text-secondary);background:#ffffff08}.game-tab.active{color:var(--mc);border-bottom-color:var(--mc);background:#ffffff0d}.gt-icon{align-items:center;font-size:14px;display:flex}.gt-label{white-space:nowrap}.game-content{flex:1;padding:20px;overflow-y:auto}.game-area{flex-direction:column;align-items:center;gap:20px;min-height:100%;display:flex}.game-empty{height:100%;color:var(--text-dim);justify-content:center;align-items:center;font-size:14px;font-weight:700;display:flex}.game-score{background:var(--bg-deep);color:#58cc02;border:2px solid #58cc0233;border-radius:50px;align-self:flex-end;padding:4px 14px;font-size:14px;font-weight:800}.game-instruction{color:var(--text-secondary);text-align:center;font-size:16px;font-weight:700}.game-listen-btn{border:3px solid var(--mc);background:color-mix(in srgb, var(--mc) 10%, transparent);width:100px;height:100px;color:var(--mc);cursor:pointer;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:20px 32px;font-family:Nunito,sans-serif;font-size:12px;font-weight:800;transition:all .2s;display:flex}.game-listen-btn:hover{background:color-mix(in srgb, var(--mc) 20%, transparent);box-shadow:0 0 20px color-mix(in srgb, var(--mc) 25%, transparent);transform:scale(1.08)}.game-listen-btn:active{transform:scale(.95)}.game-target-word{color:var(--text-primary);background:var(--bg-deep);border:2px solid var(--border);border-radius:16px;padding:12px 28px;font-family:Noto Sans Arabic,Geeza Pro,Traditional Arabic,serif;font-size:42px;transition:background .3s,border-color .3s,color .3s}.game-shown-form{filter:drop-shadow(0 2px 12px);font-size:80px;line-height:1}.game-choices{grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:400px;display:grid}.game-choice{border:2.5px solid var(--border);background:var(--bg-deep);color:var(--game-choice-text);cursor:pointer;text-align:center;box-shadow:var(--shadow-card);border-radius:14px;padding:16px 12px;font-family:Noto Sans Arabic,Nunito,sans-serif;font-size:22px;transition:all .2s}.game-choice:hover:not(:disabled){border-color:var(--detail-btn-hover);box-shadow:var(--shadow-card-hover);background:var(--bg-secondary);transform:translateY(2px)}.game-choice:active:not(:disabled){transform:translateY(4px);box-shadow:0 0 #0000004d}.game-choice.correct{color:#58cc02;background:#58cc021f;border-color:#58cc02;animation:.35s correctPop;box-shadow:0 4px #3a8a01,0 0 16px #58cc0233}.game-choice.wrong{color:#ff4b4b;background:#ff4b4b1f;border-color:#ff4b4b;animation:.4s shake;box-shadow:0 4px #c22,0 0 16px #ff4b4b33}@keyframes correctPop{0%{transform:scale(1)}50%{transform:scale(1.06)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.gc-letter{margin-bottom:2px;font-size:32px;display:block}.gc-name{color:var(--text-muted);text-transform:capitalize;font-size:12px;font-weight:700}.game-sound-choices{grid-template-columns:repeat(4,1fr);gap:12px;width:100%;max-width:400px;display:grid}.game-sound-btn{border:2.5px solid var(--border);background:var(--bg-deep);color:var(--text-secondary);cursor:pointer;box-shadow:var(--shadow-card);border-radius:14px;flex-direction:column;align-items:center;gap:6px;padding:18px 10px;font-family:Nunito,sans-serif;font-size:16px;font-weight:800;transition:all .2s;display:flex}.game-sound-btn:hover{border-color:var(--mc);color:var(--mc);box-shadow:var(--shadow-card-hover);transform:translateY(2px)}.game-sound-btn.picked{border-color:var(--mc);color:var(--mc);background:color-mix(in srgb, var(--mc) 10%, var(--bg-deep))}.game-sound-btn.correct{color:#58cc02;background:#58cc021f;border-color:#58cc02;animation:.35s correctPop}.game-sound-btn.wrong{color:#ff4b4b;background:#ff4b4b1f;border-color:#ff4b4b;animation:.4s shake}.game-positions{justify-content:center;gap:12px;width:100%;max-width:400px;display:flex}.game-pos-btn{border:2.5px solid var(--border);background:var(--bg-deep);color:var(--game-choice-text);cursor:pointer;text-align:center;box-shadow:var(--shadow-card);border-radius:14px;flex:1;padding:16px 10px;font-family:Nunito,sans-serif;font-size:15px;font-weight:800;transition:all .2s}.game-pos-btn:hover:not(:disabled){border-color:var(--detail-btn-hover);box-shadow:var(--shadow-card-hover);transform:translateY(2px)}.game-pos-btn.correct{color:#58cc02;background:#58cc021f;border-color:#58cc02;animation:.35s correctPop}.game-pos-btn.wrong{color:#ff4b4b;background:#ff4b4b1f;border-color:#ff4b4b;animation:.4s shake}.game-next{background:var(--mc);color:#fff;cursor:pointer;box-shadow:var(--shadow-btn);border:none;border-radius:50px;padding:12px 32px;font-family:Nunito,sans-serif;font-size:15px;font-weight:800;transition:all .2s}.game-next:hover{filter:brightness(1.1);transform:translateY(2px);box-shadow:0 2px #00000040}.game-next:active{transform:translateY(4px);box-shadow:0 0 #00000040}@media (width<=768px){.game-tabs{gap:2px;padding:8px 12px 0;overflow-x:auto}.game-tab{padding:6px 10px;font-size:11px}.gt-icon{font-size:12px}.game-content{padding:14px}.game-area{gap:14px}.game-listen-btn{width:80px;height:80px;padding:14px}.game-choices{gap:8px;max-width:100%}.game-choice{padding:12px 8px;font-size:18px}.game-sound-choices{grid-template-columns:repeat(4,1fr);gap:8px;max-width:100%}.game-sound-btn{padding:12px 6px;font-size:14px}.game-target-word{padding:10px 20px;font-size:28px}.game-next{padding:10px 24px;font-size:14px}.game-instruction{font-size:14px}}.quran-list{max-width:900px;margin:0 auto;padding:24px 0 40px}.ql-header{justify-content:center;align-items:center;margin-bottom:20px;display:flex}.ql-filter{justify-content:center;margin:20px 0 16px;display:flex}.ql-title{color:var(--text-primary);font-size:28px;font-weight:900}.ql-search{border:2px solid var(--border);background:var(--bg-secondary);color:var(--text-primary);border-radius:50px;outline:none;width:260px;padding:10px 18px;font-family:Nunito,sans-serif;font-size:14px;font-weight:600;transition:border-color .2s}.ql-search:focus{border-color:#ce82ff}.ql-search::placeholder{color:var(--text-dim)}.ql-grid{flex-direction:column;gap:8px;display:flex}.sura-card{background:var(--bg-secondary);cursor:pointer;box-shadow:var(--shadow-card);border:2px solid #0000;border-radius:14px;align-items:center;gap:14px;padding:14px 18px;transition:all .2s;display:flex}.sura-card:hover{border-color:var(--sc);box-shadow:var(--shadow-card-hover), 0 0 16px color-mix(in srgb, var(--sc) 12%, transparent);transform:translateY(1px)}.sura-card:active{transform:translateY(3px);box-shadow:0 0 #0000}.sc-num{background:color-mix(in srgb, var(--sc) 12%, transparent);width:40px;height:40px;color:var(--sc);border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;font-size:15px;font-weight:900;display:flex}.sc-body{flex:1;min-width:0}.sc-name-ar{color:var(--text-primary);direction:rtl;font-family:Noto Sans Arabic,Geeza Pro,serif;font-size:20px;font-weight:700}.sc-name-tr{color:var(--text-muted);font-size:13px;font-weight:600}.sc-meta{flex-direction:column;flex-shrink:0;align-items:flex-end;gap:4px;display:flex}.sc-ayas{color:var(--text-secondary);font-size:12px;font-weight:700}.sc-type{text-transform:uppercase;letter-spacing:.5px;background:var(--bg-deep);color:var(--text-dim);border-radius:6px;padding:2px 8px;font-size:10px;font-weight:800}@media (width<=640px){.ql-header{flex-direction:column;align-items:stretch}.ql-search{width:100%}.ql-title{text-align:center;font-size:22px}.sura-card{padding:12px 14px}.sc-name-ar{font-size:18px}}.qs-wrap{width:100%;max-width:600px;margin:0 auto;position:relative}.qs-input-wrap{border:2px solid var(--border);background:var(--bg-secondary);border-radius:16px;align-items:center;gap:10px;padding:12px 18px;transition:border-color .2s;display:flex}.qs-input-wrap:focus-within{border-color:#ce82ff}.qs-icon{color:var(--text-dim);flex-shrink:0}.qs-input{color:var(--text-primary);background:0 0;border:none;outline:none;flex:1;font-family:Nunito,sans-serif;font-size:15px;font-weight:600}.qs-input::placeholder{color:var(--text-dim)}.qs-clear{color:var(--text-muted);cursor:pointer;background:0 0;border:none;padding:0 4px;font-size:20px;line-height:1;transition:color .2s}.qs-clear:hover{color:var(--text-primary)}.qs-dropdown{background:var(--bg-secondary);border:2px solid var(--border);z-index:300;border-radius:16px;max-height:60vh;animation:.15s qsDrop;position:absolute;top:calc(100% + 6px);left:0;right:0;overflow-y:auto;box-shadow:0 12px 40px #0000004d}@keyframes qsDrop{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.qs-status{text-align:center;color:var(--text-dim);padding:20px;font-size:14px;font-weight:700}.qs-result{border-bottom:1px solid var(--border);cursor:pointer;padding:14px 18px;transition:background .15s}.qs-result:last-child{border-bottom:none}.qs-result:hover{background:var(--bg-card)}.qs-result-ref{color:#ce82ff;margin-bottom:6px;font-size:11px;font-weight:800}.qs-result-ar{color:var(--text-primary);margin-bottom:4px;font-family:Noto Sans Arabic,Geeza Pro,serif;font-size:20px;line-height:1.8}.qs-result-tr{color:var(--text-muted);font-size:13px;line-height:1.5}.qs-result mark{color:#ce82ff;background:#ce82ff33;border-radius:2px;padding:0 2px}@media (width<=640px){.qs-dropdown{max-height:50vh}.qs-result-ar{font-size:18px}}.qr{max-width:900px;margin:0 auto;padding:0 0 60px}.qr-header{border-bottom:2px solid var(--border);flex-wrap:wrap;align-items:center;gap:16px;margin-bottom:8px;padding:16px 0;display:flex}.qr-back{border:2px solid var(--border);background:var(--bg-secondary);color:var(--text-secondary);cursor:pointer;border-radius:50px;flex-shrink:0;align-items:center;gap:6px;padding:8px 16px;font-family:Nunito,sans-serif;font-size:13px;font-weight:700;transition:all .2s;display:flex}.qr-back:hover{border-color:var(--text-muted);color:var(--text-primary)}.qr-sura-info{flex:1;align-items:center;gap:10px;min-width:0;display:flex}.qr-sura-ar{color:var(--text-primary);font-family:Noto Sans Arabic,Geeza Pro,serif;font-size:24px;font-weight:700}.qr-sura-name{color:var(--text-secondary);font-size:15px;font-weight:700}.qr-sura-meta{color:var(--text-dim);font-size:12px;font-weight:700}.qr-controls{flex-shrink:0;align-items:center;gap:8px;display:flex}.qr-reciter{border:2px solid var(--border);background:var(--bg-secondary);color:var(--text-primary);cursor:pointer;border-radius:10px;outline:none;padding:8px 12px;font-family:Nunito,sans-serif;font-size:12px;font-weight:700;transition:border-color .2s}.qr-reciter:focus{border-color:#ce82ff}.qr-autoplay{color:#ce82ff;cursor:pointer;background:0 0;border:2px solid #ce82ff;border-radius:50px;align-items:center;gap:6px;padding:8px 16px;font-family:Nunito,sans-serif;font-size:12px;font-weight:800;transition:all .2s;display:flex}.qr-autoplay:hover{background:#ce82ff1f}.qr-autoplay.active{color:#fff;background:#ce82ff;animation:1.5s ease-in-out infinite qrPulse}@keyframes qrPulse{0%,to{box-shadow:0 0 #ce82ff4d}50%{box-shadow:0 0 0 6px #ce82ff00}}.qr-bismillah{text-align:center;color:var(--text-primary);opacity:.7;padding:24px 0;font-family:Noto Sans Arabic,Geeza Pro,serif;font-size:36px}.qr-verses{flex-direction:column;gap:4px;display:flex}.qr-verse{border-radius:14px;gap:14px;padding:18px 16px;transition:background .2s;display:flex}.qr-verse:hover{background:var(--bg-secondary)}.qr-verse.playing{background:color-mix(in srgb, #ce82ff 6%, var(--bg-secondary));border:1px solid #ce82ff26}.qr-verse.highlighted{background:color-mix(in srgb, #ffc800 8%, var(--bg-secondary));border:1px solid #ffc80033;animation:3s forwards hlFade}@keyframes hlFade{0%,60%{background:color-mix(in srgb, #ffc800 8%, var(--bg-secondary))}to{background:0 0}}.qv-num-col{flex-direction:column;flex-shrink:0;align-items:center;gap:6px;padding-top:4px;display:flex}.qv-num{background:var(--bg-deep);width:32px;height:32px;color:var(--text-dim);border-radius:8px;justify-content:center;align-items:center;font-size:12px;font-weight:800;display:flex}.qr-verse.playing .qv-num{color:#ce82ff;background:#ce82ff26}.qv-play{border:2px solid var(--border);background:var(--bg-deep);width:30px;height:30px;color:var(--text-muted);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;transition:all .2s;display:flex}.qv-play:hover{color:#ce82ff;border-color:#ce82ff}.qv-play.active{color:#fff;background:#ce82ff;border-color:#ce82ff}.qv-content{flex:1;min-width:0}.qv-arabic{color:var(--text-primary);margin-bottom:8px;font-family:Noto Sans Arabic,Geeza Pro,Traditional Arabic,serif;font-size:26px;line-height:2;transition:color .2s}.qr-verse.playing .qv-arabic{color:#ce82ff}.qv-translation{color:var(--text-muted);font-size:14px;line-height:1.6;transition:color .2s}.qr-verse.playing .qv-translation{color:var(--text-secondary)}@media (width<=768px){.qr-header{flex-direction:column;align-items:stretch;gap:10px}.qr-back{align-self:flex-start}.qr-sura-info{flex-wrap:wrap;justify-content:center}.qr-sura-ar{font-size:20px}.qr-controls{justify-content:center}.qr-bismillah{padding:16px 0;font-size:28px}.qr-verse{gap:10px;padding:14px 10px}.qv-arabic{font-size:22px;line-height:1.8}.qv-translation{font-size:13px}.qv-num{width:28px;height:28px;font-size:11px}.qv-play{width:28px;height:28px}}