:root{--color-emerald-50:#eef8f5;--color-emerald-100:#d4efe8;--color-emerald-200:#aee0d4;--color-emerald-300:#7ccaba;--color-emerald-400:#4db09a;--color-emerald-500:#2e9480;--color-emerald-600:#1f7d6d;--color-emerald-700:#1a665a;--color-emerald-800:#175249;--color-emerald-900:#14433d;--color-emerald-950:#0c322d;--color-amber-50:#fffbeb;--color-amber-100:#fef3d1;--color-amber-200:#fce49c;--color-amber-300:#f6d058;--color-amber-500:#c9a227;--color-amber-600:#a88620;--color-amber-700:#8a6d1c;--color-amber-900:#5c4814;--color-slate-50:#f8fafc;--color-slate-100:#f1f5f9;--color-slate-200:#e2e8f0;--color-slate-300:#cbd5e1;--color-slate-400:#94a3b8;--color-slate-500:#64748b;--color-slate-600:#475569;--color-slate-700:#334155;--color-slate-800:#1e293b;--color-slate-900:#0f172a;--color-success:var(--color-emerald-600);--color-success-bg:#f0fdf4;--color-warning:var(--color-amber-500);--color-warning-bg:#fffbeb;--color-error:#ef4444;--color-error-700:#dc2626;--color-error-bg:#fef2f2;--color-info:#3b82f6;--color-info-700:#1e40af;--color-info-bg:#eff6ff;--color-violet-600:#7c3aed;--surface-page:#faf7f2;--surface-card:#fff;--surface-elevated:#fff;--surface-sunken:var(--color-slate-100);--border-subtle:#e8ecf3;--border-default:var(--color-slate-200);--border-strong:var(--color-slate-300);--tajweed-ghunna:#5b22cc;--tajweed-idgham:#1a9658;--tajweed-ikhfa:#2364c4;--tajweed-iqlab:#c97a14;--tajweed-madd:#1e8aae;--tajweed-qalqala:#cc2929;--tajweed-tafkhim:#a04f30;--tajweed-hamzat:#9a6cb8;--tajweed-silent:#7e8a9c;--font-body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-display:"Baloo 2", "Inter", sans-serif;--font-quran:"Amiri Quran", "Amiri", serif;--font-arabic-ui:"Noto Naskh Arabic", "Amiri", serif;--text-display:2.5rem;--lh-display:1.15;--text-h1:1.875rem;--lh-h1:1.2;--text-h2:1.5rem;--lh-h2:1.25;--text-h3:1.25rem;--lh-h3:1.3;--text-body-lg:1.0625rem;--lh-body-lg:1.6;--text-body:1rem;--lh-body:1.55;--text-body-sm:.875rem;--lh-body-sm:1.5;--text-caption:.75rem;--lh-caption:1.4;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--radius-xs:4px;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:20px;--radius-2xl:28px;--radius-full:9999px;--shadow-sm:0 1px 2px #0f172a0a, 0 1px 3px #0f172a0f;--shadow-md:0 4px 12px #0f172a0f, 0 2px 4px #0f172a0a;--shadow-lg:0 12px 32px #0f172a1a, 0 4px 8px #0f172a0a;--motion-fast:.15s;--motion-base:.25s;--motion-slow:.4s;--ease-standard:cubic-bezier(.4, 0, .2, 1);--ease-out:cubic-bezier(0, 0, .2, 1);--ease-in:cubic-bezier(.4, 0, 1, 1);--btn-h-sm:36px;--btn-h-md:44px;--btn-h-lg:52px;--input-h:40px;--touch-min:44px;--focus-ring:0 0 0 2px var(--surface-card), 0 0 0 4px var(--color-emerald-500);--primary-purple:var(--color-violet-600);--primary-blue:var(--color-info);--primary-green:var(--color-emerald-600);--primary-pink:var(--color-amber-500);--primary-yellow:var(--color-amber-500);--primary-orange:var(--color-amber-600);--bg-gradient-start:var(--surface-page);--bg-gradient-end:var(--surface-page);--bg-card:var(--surface-card);--bg-overlay:#0f172a0f;--text-primary:var(--color-slate-900);--text-secondary:var(--color-slate-500);--text-light:#fff;--text-arabic:var(--color-slate-900);--shadow-soft:var(--shadow-sm);--shadow-medium:var(--shadow-md);--shadow-strong:var(--shadow-lg);--font-main:var(--font-body);--font-arabic:var(--font-quran);--font-title:var(--font-body)}[data-kid=true]{--btn-h-md:48px;--touch-min:48px;--radius-lg:18px}*,:before,:after{box-sizing:border-box}*{margin:0;padding:0}html,body{height:100%;font-family:var(--font-body);font-size:16px;line-height:var(--lh-body);color:var(--color-slate-900);background:radial-gradient(ellipse 85% 55% at 50% -8%, #1f7d6d17, transparent 58%), radial-gradient(ellipse 55% 45% at 100% 100%, #c9a2270f, transparent 55%), var(--surface-page);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;overflow-x:hidden}body{min-height:100vh}img,svg,video{max-width:100%;height:auto;display:block}button,input,select,textarea{font:inherit;color:inherit}a{color:var(--color-emerald-700);text-decoration:none}a:hover{text-underline-offset:2px;text-decoration:underline}h1{font-size:var(--text-h1);line-height:var(--lh-h1);letter-spacing:-.02em;color:var(--color-slate-900);font-weight:800}h2{font-size:var(--text-h2);line-height:var(--lh-h2);letter-spacing:-.015em;color:var(--color-slate-900);font-weight:700}h3{font-size:var(--text-h3);line-height:var(--lh-h3);color:var(--color-slate-800);font-weight:700}[data-kid=true] h1,[data-kid=true] .hero-title{font-family:var(--font-display)}[lang=ar],.arabic-ui{font-family:var(--font-arabic-ui);letter-spacing:0;direction:rtl}.arabic-text,.arabic-quran{font-family:var(--font-quran);text-align:right;color:var(--color-slate-900);direction:rtl;font-size:1.75rem;line-height:1.9}:focus-visible{outline:2px solid var(--color-emerald-500);outline-offset:2px;border-radius:var(--radius-sm)}::selection{background:var(--color-emerald-200);color:var(--color-emerald-900)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes cardIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes pulseOnce{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.container{max-width:1200px;padding:0 var(--space-5);margin:0 auto}.btn{justify-content:center;align-items:center;gap:var(--space-2);height:var(--btn-h-md);padding:0 var(--space-5);border-radius:var(--radius-lg);background:var(--surface-card);color:var(--color-slate-800);font-family:var(--font-body);font-size:var(--text-body);cursor:pointer;transition:background var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);border:1px solid #0000;font-weight:600;display:inline-flex}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--color-emerald-600);color:#fff;border-color:var(--color-emerald-600)}.btn-primary:hover:not(:disabled){background:var(--color-emerald-700);border-color:var(--color-emerald-700)}.btn-secondary{background:var(--surface-card);color:var(--color-slate-800);border-color:var(--border-default)}.btn-secondary:hover:not(:disabled){border-color:var(--color-emerald-600);color:var(--color-emerald-700)}.btn-ghost{color:var(--color-emerald-700);background:0 0;border-color:#0000}.btn-ghost:hover:not(:disabled){background:var(--color-emerald-50)}.btn-success{background:var(--color-emerald-600);color:#fff;border-color:var(--color-emerald-600)}.btn-success:hover:not(:disabled){background:var(--color-emerald-700);border-color:var(--color-emerald-700)}.btn-danger{background:var(--color-error);color:#fff;border-color:var(--color-error)}.btn-danger:hover:not(:disabled){background:var(--color-error-700);border-color:var(--color-error-700)}.btn-play{border-radius:var(--radius-full);background:var(--color-emerald-600);color:#fff;width:56px;height:56px;box-shadow:var(--shadow-md);border:none;font-size:1.5rem}.btn-play:hover{background:var(--color-emerald-700)}.card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-sm);transition:box-shadow var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard)}.card:hover{box-shadow:var(--shadow-md);border-color:var(--border-strong);transform:translateY(-2px)}.verse-number{background:var(--color-emerald-50);width:32px;height:32px;color:var(--color-emerald-800);border:1px solid var(--color-emerald-200);border-radius:var(--radius-full);font-family:var(--font-arabic-ui);font-size:var(--text-body-sm);margin-left:var(--space-3);justify-content:center;align-items:center;display:inline-flex}.progress-bar{background:var(--color-slate-100);border-radius:var(--radius-full);width:100%;height:8px;overflow:hidden}.progress-fill{background:var(--color-emerald-600);border-radius:var(--radius-full);height:100%;transition:width var(--motion-base) var(--ease-standard)}.app-header{text-align:center;padding:var(--space-6)}.app-title{font-family:var(--font-body);font-weight:800;font-size:var(--text-display);letter-spacing:-.02em;color:var(--color-slate-900)}.sourates-grid{gap:var(--space-5);grid-template-columns:repeat(auto-fill,minmax(260px,1fr));display:grid}.verse-highlight{background:var(--color-emerald-50);border-left:3px solid var(--color-emerald-500);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-4)}.main-content{z-index:1;min-height:100vh;position:relative}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;position:absolute!important}@media (max-width:768px){.arabic-text{font-size:1.5rem;line-height:2}.app-title{font-size:1.875rem}.btn-play{width:52px;height:52px;font-size:1.25rem}}