/* Quran Practice Studio — calm, bright, respectful and responsive. */
:root{
  --qp-sky:#0ea5e9;--qp-blue:#2563eb;--qp-indigo:#4f46e5;--qp-violet:#7c3aed;
  --qp-teal:#0d9488;--qp-green:#10b981;--qp-gold:#fbbf24;--qp-ink:#172554;
  --qp-muted:#64748b;--qp-line:#dbeafe;--qp-white:#fff;--qp-panel:rgba(255,255,255,.94);
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;overflow-x:hidden}html{background:#e0f2fe}
body{font-family:"Nunito",system-ui,sans-serif;color:var(--qp-ink);background:radial-gradient(circle at 12% 12%,rgba(255,255,255,.92) 0 3px,transparent 4px) 0 0/34px 34px,linear-gradient(145deg,#dff7ff 0%,#eef2ff 46%,#f5eaff 100%);touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button,input{font:inherit}button,a,input{outline:none}button{cursor:pointer}.arabic{font-family:"Amiri","Noto Naskh Arabic","Scheherazade New",serif;direction:rtl;unicode-bidi:plaintext}
.skip-link{position:fixed;left:12px;top:8px;z-index:999;transform:translateY(-150%);padding:10px 14px;border-radius:12px;background:#172554;color:#fff;font-weight:900}.skip-link:focus{transform:none}
.qp-shell{height:100vh;height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr);max-width:1220px;margin:auto;padding:10px clamp(8px,2vw,22px) max(10px,env(safe-area-inset-bottom))}
.qp-topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;min-height:54px;padding:6px 2px}.qp-brand{justify-self:center;display:flex;align-items:center;gap:9px;font-weight:1000;color:#4338ca;white-space:nowrap}.qp-brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:14px;background:linear-gradient(145deg,#38bdf8,#6366f1);box-shadow:0 6px 0 rgba(67,56,202,.14);font-size:1.15rem}.qp-home,.qp-progress-link{min-width:44px;min-height:44px;display:inline-flex;align-items:center;gap:6px;border:2px solid rgba(99,102,241,.15);border-radius:15px;background:rgba(255,255,255,.78);color:#475569;text-decoration:none;font-weight:900;padding:0 12px}.qp-progress-link{justify-self:end;color:#7c3aed}
.qp-stage{position:relative;min-height:0;border:3px solid rgba(99,102,241,.12);border-radius:30px;background:var(--qp-panel);box-shadow:0 24px 60px rgba(30,64,175,.14),0 8px 0 rgba(99,102,241,.08);overflow:hidden}.qp-stage::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 9% 10%,rgba(251,191,36,.14),transparent 21%),radial-gradient(circle at 92% 14%,rgba(56,189,248,.16),transparent 24%)}
.qp-screen{position:relative;height:100%;min-height:0;overflow:auto;overscroll-behavior:contain}.qp-screen[hidden],.qp-mode-panel[hidden]{display:none!important}
.home-screen{padding:clamp(14px,2.8vw,30px)}.home-grid{display:grid;grid-template-columns:minmax(280px,.85fr) minmax(420px,1.45fr);gap:clamp(18px,3vw,36px);min-height:100%;align-items:start}.home-hero{position:sticky;top:0;display:flex;flex-direction:column;align-items:flex-start;gap:13px;padding:clamp(18px,3vw,30px);border:3px solid #c7d2fe;border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(238,242,255,.95));box-shadow:0 10px 0 rgba(99,102,241,.10)}
.hero-art{width:92px;height:92px;display:grid;place-items:center;border-radius:28px;background:linear-gradient(145deg,#38bdf8,#6366f1 55%,#8b5cf6);box-shadow:0 10px 0 rgba(67,56,202,.17),0 17px 30px rgba(79,70,229,.22);font-size:2.9rem}.eyebrow{margin:0;color:#0d9488;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;font-weight:1000}.home-hero h1{margin:0;font-size:clamp(2rem,4vw,3.6rem);line-height:.9;letter-spacing:-.055em;background:linear-gradient(120deg,#0369a1,#4f46e5 48%,#9333ea);background-clip:text;-webkit-background-clip:text;color:transparent}.hero-copy{margin:0;color:#526079;font-size:clamp(.93rem,1.4vw,1.08rem);font-weight:750;line-height:1.48}.care-note{display:flex;gap:8px;align-items:flex-start;margin:0;padding:10px 12px;border-radius:15px;background:#ecfeff;color:#155e75;font-size:.78rem;font-weight:850;line-height:1.35}.quick-start{width:100%;min-height:58px;border:0;border-bottom:5px solid #4338ca;border-radius:19px;padding:12px 17px;background:linear-gradient(135deg,#0ea5e9,#4f46e5 58%,#7c3aed);color:#fff;font-size:1.02rem;font-weight:1000;box-shadow:0 11px 24px rgba(79,70,229,.24);transition:transform .16s}.quick-start:active{transform:translateY(3px);border-bottom-width:2px}.quick-start small{display:block;margin-top:2px;font-size:.68rem;opacity:.86}
.practice-summary{width:100%;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.summary-cell{padding:9px;border:2px solid #e0e7ff;border-radius:15px;background:#fff;text-align:center}.summary-cell strong{display:block;color:#4f46e5;font-size:1.18rem}.summary-cell span{display:block;color:#64748b;font-size:.62rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em}
.library{min-width:0}.library-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:12px}.library-head h2{margin:0;font-size:clamp(1.3rem,2vw,1.75rem);letter-spacing:-.025em}.library-head p{margin:3px 0 0;color:#64748b;font-size:.78rem;font-weight:800}.search-wrap{position:relative;min-width:min(250px,42%)}.surah-search{width:100%;min-height:46px;border:2px solid #c7d2fe;border-radius:15px;background:#fff;padding:9px 13px;color:#172554;font-weight:800}.surah-search:focus{border-color:#6366f1;box-shadow:0 0 0 4px rgba(99,102,241,.13)}
.filter-row{display:flex;gap:8px;overflow:auto;padding:2px 2px 10px;scrollbar-width:thin}.filter-chip{flex:0 0 auto;min-height:44px;border:2px solid #dbeafe;border-radius:999px;padding:7px 14px;background:#fff;color:#526079;font-size:.78rem;font-weight:950}.filter-chip[aria-pressed="true"]{border-color:#6366f1;background:#eef2ff;color:#4338ca;box-shadow:0 4px 0 rgba(99,102,241,.13)}
.surah-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;padding:1px 2px 20px}.surah-card{position:relative;min-height:118px;border:2px solid #dbeafe;border-bottom:5px solid #bfdbfe;border-radius:20px;background:linear-gradient(145deg,#fff,#f8fbff);padding:12px;text-align:left;color:#172554;transition:transform .16s,border-color .16s}.surah-card:hover{transform:translateY(-2px);border-color:#818cf8}.surah-card:active{transform:translateY(2px);border-bottom-width:2px}.surah-card.has-practice{border-color:#6ee7b7;border-bottom-color:#34d399;background:linear-gradient(145deg,#fff,#ecfdf5)}.surah-number{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 6px;border-radius:10px;background:#e0e7ff;color:#4338ca;font-size:.68rem;font-weight:1000}.surah-card strong{display:block;margin-top:8px;font-size:.9rem;line-height:1.1}.surah-card small{display:block;margin-top:4px;color:#64748b;font-size:.66rem;font-weight:800;line-height:1.25}.practice-mark{position:absolute;right:10px;top:10px;color:#059669;font-size:.67rem;font-weight:1000}.empty-library{grid-column:1/-1;padding:30px;border:2px dashed #c7d2fe;border-radius:20px;text-align:center;color:#64748b;font-weight:850}
.studio-screen{display:grid;grid-template-rows:auto auto minmax(0,1fr)}.studio-hud{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;min-height:60px;padding:8px clamp(10px,2vw,20px);background:linear-gradient(120deg,#0284c7,#4f46e5 55%,#7c3aed);color:#fff}.close-studio,.finish-button{min-width:44px;min-height:44px;border:2px solid rgba(255,255,255,.28);border-radius:15px;background:rgba(255,255,255,.13);color:#fff;font-weight:950}.close-studio{font-size:1.15rem}.finish-button{padding:0 13px;font-size:.73rem}.surah-heading{text-align:center;min-width:0}.surah-heading strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:1rem}.surah-heading span{display:block;margin-top:1px;font-size:.66rem;font-weight:800;opacity:.84}
.mode-tabs{display:flex;justify-content:center;gap:8px;padding:9px 10px;background:#f8fafc;border-bottom:2px solid #e0e7ff;overflow:auto}.mode-tab{flex:0 0 auto;min-height:44px;border:2px solid #dbeafe;border-radius:14px;background:#fff;color:#526079;padding:6px 13px;font-size:.75rem;font-weight:950}.mode-tab[aria-selected="true"]{border-color:#6366f1;background:#eef2ff;color:#4338ca;box-shadow:0 4px 0 rgba(99,102,241,.13)}
.mode-stage{min-height:0;overflow:hidden;padding:clamp(10px,2vw,20px)}.qp-mode-panel{height:100%;min-height:0}.listen-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(240px,.65fr);gap:16px;height:100%;min-height:0}.ayah-focus{min-height:0;overflow:auto;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:clamp(16px,3vw,34px);border:3px solid #bae6fd;border-radius:25px;background:linear-gradient(145deg,#fff,#f0f9ff);text-align:center}.bismillah{margin:0 0 12px;color:#4f46e5;font-size:clamp(1.1rem,2vw,1.45rem);line-height:1.8}.ayah-ref{display:inline-flex;align-items:center;min-height:32px;padding:4px 11px;border-radius:999px;background:#e0f2fe;color:#0369a1;font-size:.7rem;font-weight:1000}.ayah-arabic{margin:14px 0 9px;font-size:clamp(1.75rem,4vw,3rem);line-height:2;color:#172554}.ayah-meaning{max-width:720px;margin:0;color:#526079;font-size:clamp(.85rem,1.5vw,1rem);font-weight:750;line-height:1.5}.listen-controls{display:flex;flex-direction:column;gap:10px;justify-content:center;padding:16px;border:3px solid #e0e7ff;border-radius:24px;background:#fff}.audio-button,.primary-button,.secondary-button,.gentle-button{min-height:50px;border-radius:16px;padding:9px 14px;font-weight:1000}.audio-button{border:0;border-bottom:4px solid #0369a1;background:linear-gradient(135deg,#38bdf8,#0ea5e9);color:#fff}.audio-button.is-playing{border-bottom-color:#be123c;background:linear-gradient(135deg,#fb7185,#e11d48)}.audio-status{min-height:36px;margin:0;padding:8px 10px;border-radius:12px;background:#f0f9ff;color:#0369a1;text-align:center;font-size:.7rem;font-weight:850}.step-nav{display:grid;grid-template-columns:1fr 1fr;gap:8px}.secondary-button{border:2px solid #c7d2fe;background:#eef2ff;color:#4338ca}.secondary-button:disabled{opacity:.4;cursor:not-allowed}.ayah-dots{font-size:.68rem;color:#64748b;text-align:center;font-weight:900}
.recall-panel,.echo-panel{height:100%;min-height:0;overflow:auto;display:grid;place-items:center}.practice-card{width:min(760px,100%);padding:clamp(14px,3vw,28px);border:3px solid #ddd6fe;border-radius:26px;background:linear-gradient(145deg,#fff,#faf5ff);text-align:center;box-shadow:0 10px 0 rgba(124,58,237,.08)}.practice-kicker{margin:0;color:#7c3aed;font-size:.68rem;font-weight:1000;text-transform:uppercase;letter-spacing:.1em}.recall-line{display:flex;flex-wrap:wrap;direction:rtl;justify-content:center;align-items:center;gap:7px;margin:16px 0;font-size:clamp(1.45rem,3vw,2.35rem);line-height:1.9}.recall-word{display:inline-block}.recall-blank{display:inline-grid;place-items:center;min-width:90px;min-height:48px;border:3px dashed #8b5cf6;border-radius:13px;background:#f5f3ff;color:#6d28d9;font-size:.85rem;font-family:"Nunito",sans-serif}.word-options{display:flex;direction:rtl;flex-wrap:wrap;justify-content:center;gap:9px;margin:12px 0}.word-option{min-height:48px;border:2px solid #a5b4fc;border-bottom:4px solid #818cf8;border-radius:14px;background:#eef2ff;color:#312e81;padding:7px 14px;font-size:clamp(1.05rem,2vw,1.35rem);font-weight:800}.word-option.correct{border-color:#34d399;background:#d1fae5;color:#065f46}.word-option.wrong{border-color:#fda4af;background:#fff1f2;color:#9f1239}.feedback{min-height:43px;margin:9px 0;padding:10px 12px;border-radius:13px;background:#eff6ff;color:#1d4ed8;font-size:.79rem;font-weight:900}.practice-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.gentle-button{border:2px solid #d8b4fe;background:#faf5ff;color:#7e22ce}.primary-button{border:0;border-bottom:4px solid #4338ca;background:linear-gradient(135deg,#6366f1,#7c3aed);color:#fff}.echo-arabic{margin:16px auto;padding:12px;border-radius:18px;background:#fff;font-size:clamp(1.6rem,3.5vw,2.7rem);line-height:2;transition:filter .2s,opacity .2s}.echo-arabic.covered{filter:blur(13px);opacity:.22;user-select:none}.echo-instruction{max-width:600px;margin:0 auto 12px;color:#526079;font-size:.83rem;font-weight:800;line-height:1.45}.self-check{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.complete-screen{display:grid;place-items:center;padding:clamp(15px,4vw,36px)}.complete-card{width:min(620px,100%);padding:clamp(20px,4vw,38px);border:3px solid #a7f3d0;border-radius:30px;background:linear-gradient(145deg,#fff,#ecfdf5);text-align:center;box-shadow:0 12px 0 rgba(16,185,129,.11)}.complete-art{width:90px;height:90px;display:grid;place-items:center;margin:0 auto 13px;border-radius:28px;background:linear-gradient(145deg,#38bdf8,#4f46e5);box-shadow:0 9px 0 rgba(67,56,202,.16);font-size:2.7rem}.complete-card h2{margin:0;color:#047857;font-size:clamp(1.7rem,4vw,2.6rem);letter-spacing:-.035em}.complete-card>p{margin:8px auto;color:#526079;font-weight:800;line-height:1.45}.session-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0}.session-stat{padding:10px 6px;border:2px solid #a7f3d0;border-radius:15px;background:#fff}.session-stat strong{display:block;color:#047857;font-size:1.25rem}.session-stat span{display:block;color:#64748b;font-size:.61rem;font-weight:900;text-transform:uppercase}.teacher-note{margin:13px 0;padding:11px;border-radius:14px;background:#eff6ff!important;color:#1e40af!important;font-size:.74rem!important}.complete-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.complete-actions .primary-button:last-child{grid-column:1/-1}
.qp-confetti{position:fixed;z-index:1000;top:-30px;pointer-events:none;animation:qp-fall 2.7s linear forwards}@keyframes qp-fall{to{transform:translateY(110vh) rotate(540deg)}}
:focus-visible{outline:4px solid #fbbf24!important;outline-offset:3px!important}
@media(max-width:900px){.home-grid{grid-template-columns:1fr}.home-hero{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center}.home-hero .hero-art{grid-row:1/4}.home-hero .quick-start,.home-hero .care-note,.home-hero .practice-summary{grid-column:1/-1}.surah-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.listen-layout{grid-template-columns:1fr}.listen-controls{display:grid;grid-template-columns:1fr 1fr}.audio-status,.ayah-dots{grid-column:1/-1}.ayah-focus{justify-content:flex-start}.qp-shell{padding-top:6px}}
@media(max-width:640px){.qp-shell{padding-left:4px;padding-right:4px;padding-bottom:max(4px,env(safe-area-inset-bottom))}.qp-topbar{min-height:49px}.qp-stage{border-width:2px;border-radius:24px}.qp-brand{font-size:.86rem}.qp-brand-mark{width:34px;height:34px}.qp-home,.qp-progress-link{padding:0 9px;font-size:.72rem}.home-screen{padding:10px}.home-grid{gap:13px}.home-hero{grid-template-columns:62px 1fr;gap:8px;padding:13px;border-radius:21px}.hero-art{width:58px;height:58px;border-radius:18px;font-size:1.8rem}.home-hero h1{font-size:2rem}.hero-copy{font-size:.79rem}.care-note{font-size:.67rem;padding:8px}.quick-start{min-height:54px}.library-head{align-items:stretch;flex-direction:column;margin-bottom:8px}.search-wrap{min-width:100%}.surah-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.surah-card{min-height:104px;padding:10px;border-radius:17px}.studio-hud{min-height:54px}.mode-tabs{justify-content:flex-start}.mode-stage{padding:8px}.listen-layout{gap:8px}.ayah-focus{padding:13px;border-radius:19px}.ayah-arabic{font-size:1.65rem;margin:8px 0;line-height:1.85}.listen-controls{padding:10px;border-radius:18px;gap:7px}.practice-card{padding:13px;border-radius:20px}.recall-line{font-size:1.35rem;margin:10px 0}.session-stats{gap:5px}.complete-card{padding:16px;border-radius:22px}}
@media(max-height:650px) and (orientation:portrait){.qp-topbar{display:none}.qp-shell{grid-template-rows:minmax(0,1fr)}.home-hero{display:grid;grid-template-columns:50px 1fr;padding:10px}.hero-art{width:48px;height:48px;font-size:1.5rem}.home-hero h1{font-size:1.7rem}.hero-copy{display:none}.care-note{padding:6px}.practice-summary{display:none}.surah-card{min-height:94px}.studio-hud{min-height:48px}.mode-tabs{padding:5px}.mode-tab{min-height:44px}.mode-stage{padding:6px}.ayah-focus{padding:8px}.ayah-arabic{font-size:1.45rem;line-height:1.7}.listen-controls{padding:7px}.audio-button,.primary-button,.secondary-button,.gentle-button{min-height:44px}.complete-art{width:60px;height:60px;font-size:1.8rem}.complete-card{padding:12px}.teacher-note{display:none}}
@media(max-height:500px) and (orientation:landscape){.qp-shell{padding:3px 8px}.qp-topbar{display:none}.qp-shell{grid-template-rows:minmax(0,1fr)}.qp-stage{border-radius:20px}.home-screen{padding:8px}.home-grid{grid-template-columns:minmax(230px,.7fr) 1.3fr;gap:10px}.home-hero{position:sticky;display:flex;padding:10px;gap:6px}.hero-art{width:48px;height:48px;border-radius:15px;font-size:1.45rem}.eyebrow,.hero-copy,.care-note,.practice-summary{display:none}.home-hero h1{font-size:1.65rem}.quick-start{min-height:46px;padding:7px}.library-head{margin-bottom:4px}.library-head p{display:none}.surah-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.surah-card{min-height:83px;padding:7px}.surah-card strong{margin-top:4px;font-size:.76rem}.surah-card small{font-size:.57rem}.studio-screen{grid-template-rows:46px 48px minmax(0,1fr)}.studio-hud{min-height:46px;padding:2px 8px}.mode-tabs{padding:3px 8px}.mode-tab{min-height:44px}.mode-stage{padding:5px}.listen-layout{grid-template-columns:1.5fr .5fr;gap:6px}.ayah-focus{padding:6px}.bismillah{font-size:.88rem;margin:0 0 2px}.ayah-arabic{font-size:1.25rem;line-height:1.55;margin:4px}.ayah-meaning{font-size:.68rem}.listen-controls{display:flex;padding:6px}.audio-button,.primary-button,.secondary-button,.gentle-button{min-height:44px;padding:4px 8px}.audio-status{min-height:26px;padding:4px}.practice-card{padding:8px}.recall-line{font-size:1.1rem;line-height:1.4;margin:5px}.word-options{margin:5px}.word-option{min-height:44px;font-size:.95rem}.feedback{min-height:30px;margin:4px;padding:5px}.echo-arabic{font-size:1.3rem;line-height:1.5;margin:6px}.complete-screen{padding:8px}.complete-card{padding:8px}.complete-art,.teacher-note{display:none}.complete-card h2{font-size:1.45rem}.complete-card>p{margin:3px}.session-stats{margin:6px}.session-stat{padding:4px}.complete-actions .primary-button:last-child{grid-column:auto}.complete-actions{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1500px){.qp-shell{max-width:1440px}.surah-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.surah-card{min-height:130px}.home-grid{grid-template-columns:440px 1fr}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}.surah-card,.quick-start{transition:none!important}.qp-confetti{display:none!important}}