@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap");@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");:root{--lq-bg-base:#00202e;--lq-bg-dark:#001822;--lq-bg-card:#0a3545;--lq-bg-glass:rgba(10,53,69,0.85);--lq-primary:#81b532;--lq-primary-dark:#6fa025;--lq-primary-glow:rgba(129,181,50,0.3);--lq-accent:#00f5d4;--lq-accent-purple:#8b5cf6;--lq-text-main:#ffffff;--lq-text-secondary:#a3b8c2;--lq-text-muted:#6b8a99;--lq-border-subtle:rgba(255,255,255,0.08);--lq-border-active:rgba(129,181,50,0.3);--lq-glass-filter:blur(20px);--lq-transition:all 0.4s cubic-bezier(0.4,0,0.2,1);--lq-shadow-card:0 10px 30px rgba(0,0,0,0.4);--lq-shadow-hover:0 25px 50px rgba(0,0,0,0.5);--lq-shadow-glow:0 0 30px rgba(129,181,50,0.3)}.learn-quran-page{min-height:100vh;background:var(--lq-bg-base);color:var(--lq-text-main);font-family:Inter,sans-serif;padding-bottom:120px;position:relative;overflow-x:hidden}.learn-quran-page:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(2px 2px at 10% 20%,rgba(0,245,212,.3) 50%,transparent 100%),radial-gradient(2px 2px at 30% 60%,rgba(139,92,246,.3) 50%,transparent 100%),radial-gradient(2px 2px at 70% 40%,rgba(129,181,50,.3) 50%,transparent 100%),radial-gradient(2px 2px at 90% 80%,rgba(0,200,240,.3) 50%,transparent 100%);animation:lqParticleFloat 30s linear infinite}@keyframes lqParticleFloat{0%,to{transform:translateY(0) translateX(0)}25%{transform:translateY(-15px) translateX(5px)}50%{transform:translateY(-5px) translateX(-10px)}75%{transform:translateY(-20px) translateX(8px)}}.lq-card-number,.lq-hero h1,h1,h2,h3{font-family:Outfit,sans-serif}.lq-container{max-width:1200px;margin:0 auto;padding:0 24px;position:relative;z-index:5}.lq-hero{text-align:center;padding:100px 0 60px;position:relative;overflow:hidden}.lq-hero:before{width:400px;height:400px;background:radial-gradient(circle,rgba(129,181,50,.3) 0,transparent 70%);top:-100px;left:-100px;animation:orbFloat 15s ease-in-out infinite}.lq-hero:after,.lq-hero:before{content:"";position:absolute;filter:blur(60px)}.lq-hero:after{width:350px;height:350px;background:radial-gradient(circle,rgba(139,92,246,.25) 0,transparent 70%);bottom:-50px;right:-50px;animation:orbFloat 20s ease-in-out infinite reverse}@keyframes orbFloat{0%,to{transform:translate(0) scale(1)}33%{transform:translate(30px,-30px) scale(1.1)}66%{transform:translate(-20px,20px) scale(.95)}}.lq-hero h1{font-size:3.5rem;font-weight:800;letter-spacing:-.03em;margin-bottom:16px;background:linear-gradient(135deg,#ffffff 0,var(--lq-primary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;position:relative}.lq-hero p{font-size:1.125rem;color:var(--lq-text-secondary);max-width:500px;margin:0 auto;line-height:1.7;position:relative}.lq-lesson-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px;perspective:1000px}.lq-card{background:var(--lq-bg-card);border:1px solid var(--lq-border-subtle);border-radius:20px;padding:24px;position:relative;overflow:hidden;transition:var(--lq-transition);text-decoration:none;display:block;box-shadow:var(--lq-shadow-card);transform-style:preserve-3d}.lq-card:hover{transform:translateY(-8px) rotateX(2deg);border-color:var(--lq-primary);box-shadow:var(--lq-shadow-hover),var(--lq-shadow-glow)}.lq-card-number{position:absolute;top:-10px;right:-10px;font-size:5rem;font-weight:800;color:rgba(129,181,50,.1);line-height:1;z-index:0}.lq-card-content{position:relative;z-index:1}.lq-card-badge{display:inline-block;padding:6px 12px;background:rgba(129,181,50,.15);color:var(--lq-primary);border-radius:100px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:16px}.lq-card h3{font-size:1.5rem;font-weight:700;color:var(--lq-text-main);margin-bottom:8px}.lq-card p{font-size:.95rem;color:var(--lq-text-muted);margin-bottom:24px;line-height:1.5}.lq-card-meta{justify-content:space-between;border-top:1px dashed var(--lq-border-subtle);padding-top:16px;color:var(--lq-text-muted);font-size:.9rem}.lq-btn-start,.lq-card-meta{display:flex;align-items:center}.lq-btn-start{font-weight:600;color:var(--lq-primary-dark);gap:6px;transition:gap .2s}.lq-card:hover .lq-btn-start{gap:10px}.lq-detail-header{padding:120px 0 24px;border-bottom:1px solid rgba(255,255,255,.08);background:transparent;margin-bottom:32px;position:relative;z-index:1000}.lq-back-btn{color:var(--lq-text-muted);text-decoration:none;font-weight:500;font-size:.9rem;display:inline-flex;align-items:center;gap:8px;margin-bottom:24px;transition:color .2s}.lq-back-btn:hover{color:var(--lq-primary-dark)}.lq-playback-panel{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px;background:rgba(10,53,69,.7);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:12px 20px;width:-moz-fit-content;width:fit-content;box-shadow:0 8px 32px rgba(0,0,0,.3)}.lq-control-group{display:flex;align-items:center;gap:12px}.lq-control-label{font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--lq-text-muted);font-weight:600}.lq-slider{-webkit-appearance:none;width:100px;height:6px;background:rgba(255,255,255,.1);border-radius:3px;outline:none;transition:background .3s}.lq-slider:hover{background:rgba(255,255,255,.15)}.lq-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:var(--lq-primary);border-radius:50%;cursor:pointer;box-shadow:0 0 15px rgba(129,181,50,.4);-webkit-transition:transform .2s,box-shadow .2s;transition:transform .2s,box-shadow .2s}.lq-slider::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 0 20px rgba(129,181,50,.6)}.lq-toggle{position:relative;display:inline-block;width:44px;height:24px}.lq-toggle input{opacity:0;width:0;height:0}.lq-slider-round{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#e2e8f0;transition:.4s;border-radius:34px}.lq-slider-round:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background-color:white;transition:.4s;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.1)}input:checked+.lq-slider-round{background-color:var(--lq-primary)}input:checked+.lq-slider-round:before{transform:translateX(20px)}.lq-play-main{background:var(--lq-primary);color:white;border:none;padding:10px 24px;border-radius:100px;font-weight:700;font-family:Outfit,sans-serif;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s;box-shadow:0 4px 12px rgba(16,185,129,.3)}.lq-play-main:hover{transform:translateY(-2px);background:var(--lq-primary-dark)}.lq-play-main.playing{background:#ef4444;box-shadow:0 4px 12px rgba(239,68,68,.3)}.lq-settings-btn{background:transparent;border:1px solid transparent;color:var(--lq-text-secondary);font-weight:600;font-size:.9rem;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;padding:10px 14px;border-radius:14px;transition:all .3s cubic-bezier(.4,0,.2,1)}.lq-settings-btn.active,.lq-settings-btn:hover{background:rgba(129,181,50,.15);border-color:rgba(129,181,50,.3);color:var(--lq-primary);transform:scale(1.05)}.lq-settings-popover{position:absolute;top:70px;right:0;width:320px;background:rgba(10,53,69,.98);backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);border:1px solid rgba(255,255,255,.15);border-radius:24px;box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 50px rgba(129,181,50,.15);padding:28px;z-index:9999;animation:lqSettingsReveal .4s cubic-bezier(.34,1.56,.64,1);transform-origin:top right}@keyframes lqSettingsReveal{0%{opacity:0;transform:translateY(-20px) scale(.9) rotate(2deg)}to{opacity:1;transform:translateY(0) scale(1) rotate(0)}}.lq-settings-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.lq-settings-header h3{margin:0;font-size:1.1rem;font-weight:700;color:var(--lq-primary)}.lq-close-btn{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:8px;font-size:1.2rem;line-height:1;color:var(--lq-text-muted);cursor:pointer;padding:6px 10px;transition:all .2s}.lq-close-btn:hover{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.3);color:#ef4444}.lq-setting-row{display:flex;flex-direction:column;gap:12px;margin-bottom:8px}.lq-setting-row label{font-size:.8rem;color:var(--lq-text-secondary);font-weight:600;text-transform:uppercase;letter-spacing:.08em}.lq-size-control{display:flex;align-items:center;justify-content:space-between;background:rgba(0,32,46,.6);border:1px solid rgba(255,255,255,.06);padding:6px;border-radius:12px}.lq-size-control button{background:rgba(10,53,69,.8);border:1px solid rgba(255,255,255,.1);width:44px;height:36px;border-radius:10px;cursor:pointer;font-weight:700;color:var(--lq-text-main);transition:all .2s}.lq-size-control button:hover:not(:disabled){background:var(--lq-primary);border-color:var(--lq-primary);color:#001822}.lq-size-control button:disabled{opacity:.4;cursor:not-allowed}.lq-size-control span{color:var(--lq-text-main);font-weight:600}.lq-speed-control{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.8rem;color:var(--lq-text-secondary);font-weight:600}.lq-divider{border:none;border-top:1px solid rgba(255,255,255,.08);margin:18px 0}.lq-item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--lq-char-size, 3rem) * 2 + 50px),1fr));gap:16px;padding-bottom:100px;direction:rtl}.lq-item-grid.lq-wide-layout{grid-template-columns:repeat(auto-fill,minmax(calc(var(--lq-char-size, 3rem) * 4 + 60px),1fr))}.lq-item-grid.lq-wide-layout .lq-item-card{aspect-ratio:auto;min-height:calc(var(--lq-char-size, 3rem) * 2 + 80px);padding:24px}.lq-item-grid.lq-wide-layout .lq-item-img{max-width:90%;height:auto;max-height:80%}.lq-item-card{background:rgba(10,53,69,.4);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border:1.5px solid rgba(255,255,255,.1);border-radius:28px;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .6s cubic-bezier(.16,1,.3,1);position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-shadow:0 10px 40px rgba(0,0,0,.4);animation:lqCardEntrance .8s cubic-bezier(.16,1,.3,1) backwards;overflow:hidden;transform:perspective(1000px)}.lq-item-card:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent 45%,rgba(255,255,255,.1) 50%,transparent 55%);transition:all .6s;transform:rotate(45deg) translateY(100%);pointer-events:none;z-index:1}.lq-item-card:hover:before{transform:rotate(45deg) translateY(-100%)}.lq-item-card:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(129,181,50,.25) 0,transparent 80%);opacity:0;transition:opacity .5s;pointer-events:none;z-index:0}.lq-item-card:hover{transform:perspective(1000px) translateY(-12px) scale(1.05) rotateX(4deg);box-shadow:0 25px 60px rgba(0,0,0,.6),0 0 30px rgba(129,181,50,.2);background:rgba(10,53,69,.7)}.lq-item-card:hover:after{opacity:1}@keyframes lqCardEntrance{0%{opacity:0;transform:perspective(1000px) translateY(50px) scale(.8) rotateX(-30deg);filter:blur(10px)}to{opacity:1;transform:perspective(1000px) translateY(0) scale(1) rotateX(0);filter:blur(0)}}.lq-item-card:first-child{animation-delay:.05s}.lq-item-card:nth-child(2){animation-delay:.1s}.lq-item-card:nth-child(3){animation-delay:.15s}.lq-item-card:nth-child(4){animation-delay:.2s}.lq-item-card:nth-child(5){animation-delay:.25s}.lq-item-card:nth-child(6){animation-delay:.3s}.lq-item-card:nth-child(7){animation-delay:.35s}.lq-item-card:nth-child(8){animation-delay:.4s}@keyframes lqCardAppear{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.lq-item-card:hover{border-color:var(--lq-primary);transform:translateY(-8px) scale(1.03);box-shadow:0 20px 50px rgba(0,0,0,.4),0 0 30px rgba(129,181,50,.2);background:rgba(10,53,69,.85)}.lq-item-card.playing{border-color:var(--lq-primary);background:rgba(129,181,50,.1);box-shadow:0 0 0 2px rgba(129,181,50,.4),0 0 40px rgba(129,181,50,.2);animation:lqPulseGlow 2s ease-in-out infinite}@keyframes lqPulseGlow{0%,to{box-shadow:0 0 0 2px rgba(129,181,50,.4),0 0 40px rgba(129,181,50,.2)}50%{box-shadow:0 0 0 4px rgba(129,181,50,.3),0 0 60px rgba(129,181,50,.3)}}.lq-item-text{font-family:KFGQPC Uthmanic Script HAFS,serif;font-size:var(--lq-char-size,4rem);color:#ffffff;direction:rtl;line-height:1.2;text-shadow:0 2px 8px rgba(0,0,0,.3);transition:transform .3s,text-shadow .3s}.lq-item-card:hover .lq-item-text{transform:scale(1.1);text-shadow:0 4px 15px rgba(129,181,50,.3)}.lq-item-name{font-size:.8rem;color:var(--lq-text-secondary);font-weight:500;margin-top:12px;opacity:.8;transition:opacity .3s,color .3s}.lq-item-card:hover .lq-item-name{opacity:1;color:var(--lq-primary)}.lq-nav-buttons-container{display:flex;justify-content:space-between;gap:20px;margin-top:60px}.lq-nav-btn{padding:14px 28px;border-radius:12px;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:all .3s cubic-bezier(.4,0,.2,1)}.lq-nav-btn.prev{background:rgba(10,53,69,.7);color:var(--lq-text-secondary);border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 12px rgba(0,0,0,.3)}.lq-nav-btn.prev:hover{border-color:rgba(255,255,255,.2);color:var(--lq-text-main);transform:translateX(-4px)}.lq-nav-btn.next{background:linear-gradient(135deg,var(--lq-primary) 0,var(--lq-accent) 100%);color:#001822;font-weight:700;box-shadow:0 4px 20px rgba(129,181,50,.4)}.lq-nav-btn.next:hover{transform:translateY(-3px) translateX(4px);box-shadow:0 8px 30px rgba(129,181,50,.5)}.lq-item-img{filter:invert(1) brightness(1.2);opacity:.9;max-width:70%;transition:all .3s}.lq-item-card:hover .lq-item-img{opacity:1;transform:scale(1.1);filter:invert(1) brightness(1.4) drop-shadow(0 0 10px rgba(129,181,50,.3))}