:root{--color-primary:#1e3a5f;--color-primary-light:#2d5a87;--color-primary-dark:#0f1f33;--color-secondary:#d4af37;--color-secondary-light:#e5c968;--color-secondary-dark:#a38829;--color-accent:#4a7c59;--color-accent-light:#6b9b7a;--color-accent-dark:#3a6347;--bg-primary:#faf9f7;--bg-secondary:#f5f3ef;--bg-tertiary:#ebe8e2;--bg-card:#fff;--text-primary:#1a1a1a;--text-secondary:#4a4a4a;--text-muted:#7a7a7a;--text-inverse:#fff;--highlight-current:rgba(30,58,95,.15);--highlight-correct:#22c55e;--highlight-warning:#eab308;--highlight-error:#ef4444;--border-color:#e0ddd6;--border-radius-sm:.375rem;--border-radius-md:.5rem;--border-radius-lg:.75rem;--border-radius-xl:1rem;--border-radius-full:9999px;--shadow-sm:0 1px 2px rgba(0,0,0,.05);--shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--font-ui:"Cairo","Inter",system-ui,sans-serif;--font-quran:"Amiri Quran","Scheherazade New","Noto Naskh Arabic",serif;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:1.875rem;--text-4xl:2.25rem;--text-quran:1.75rem;--line-height-tight:1.25;--line-height-normal:1.5;--line-height-relaxed:1.75;--line-height-quran:2.4;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--transition-fast:.15s ease;--transition-normal:.25s ease;--transition-slow:.35s ease;--z-base:0;--z-dropdown:10;--z-sticky:20;--z-modal:30;--z-tooltip:40}[data-theme=dark]{--color-primary:#5dade2;--color-primary-light:#85c1e9;--color-primary-dark:#3498db;--bg-primary:#050a10;--bg-secondary:#0f1620;--bg-card:rgba(17,24,34,.7);--backdrop-blur:16px;--text-primary:#f8fafc;--text-secondary:#94a3b8;--text-muted:#64748b;--highlight-current:rgba(52,152,219,.15);--border-color:hsla(0,0%,100%,.08);--shadow-sm:0 1px 2px rgba(0,0,0,.5);--shadow-md:0 8px 16px -1px rgba(0,0,0,.5),0 2px 4px -2px rgba(0,0,0,.4);--shadow-lg:0 20px 25px -5px rgba(0,0,0,.6),0 8px 10px -6px rgba(0,0,0,.5)}[data-theme=dark] .card{backdrop-filter:blur(var(--backdrop-blur));-webkit-backdrop-filter:blur(var(--backdrop-blur));border:1px solid var(--border-color)}@font-face{font-display:swap;font-family:Amiri Quran;font-style:normal;font-weight:400;src:url(../fonts/AmiriQuran-Regular.ttf) format("truetype")}*,:after,:before{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{background-color:var(--bg-primary);color:var(--text-primary);font-family:var(--font-ui);font-size:var(--text-base);line-height:var(--line-height-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;transition:background-color var(--transition-normal),color var(--transition-normal)}[data-theme=dark] body{background:radial-gradient(circle at 50% 0,#131b24 0,#050a10 80%);background-attachment:fixed}[dir=rtl]{text-align:right}h1,h2,h3,h4,h5,h6{color:var(--text-primary);font-weight:600;line-height:var(--line-height-tight)}h1{font-size:var(--text-4xl)}h2{font-size:var(--text-3xl)}h3{font-size:var(--text-2xl)}h4{font-size:var(--text-xl)}h5{font-size:var(--text-lg)}h6{font-size:var(--text-base)}p{margin-bottom:var(--space-4)}a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-primary-light)}.quran-text{color:var(--text-primary);direction:rtl;font-family:var(--font-quran);font-size:var(--text-quran);line-height:var(--line-height-quran);overflow:visible;text-align:right;white-space:pre-wrap}.quran-text--large{font-size:2.25rem;line-height:2.5}.quran-text--kids{font-size:2.75rem;line-height:2.8}.ayah-number{color:var(--text-muted);font-family:var(--font-ui);font-size:var(--text-sm);margin-inline-start:var(--space-2);vertical-align:middle}.word{cursor:default;display:inline;transition:color var(--transition-fast),text-shadow var(--transition-fast)}.word--current{animation:pulse-glow 1.5s ease-in-out infinite;color:var(--color-primary);text-shadow:0 0 8px rgba(30,58,95,.5),0 0 16px rgba(30,58,95,.3),0 0 24px rgba(30,58,95,.15)}@keyframes pulse-glow{0%,to{text-shadow:0 0 8px rgba(30,58,95,.5),0 0 16px rgba(30,58,95,.3),0 0 24px rgba(30,58,95,.15)}50%{text-shadow:0 0 12px rgba(30,58,95,.6),0 0 24px rgba(30,58,95,.4),0 0 36px rgba(30,58,95,.2)}}.word--correct{color:var(--highlight-correct)}.word--warning{-webkit-text-decoration:underline wavy var(--highlight-warning);text-decoration:underline wavy var(--highlight-warning);text-decoration-thickness:2px;text-underline-offset:10px}.word--error{-webkit-text-decoration:underline wavy var(--highlight-error);text-decoration:underline wavy var(--highlight-error);text-decoration-thickness:2px;text-underline-offset:10px}.btn{align-items:center;border:none;border-radius:var(--border-radius-lg);cursor:pointer;display:inline-flex;font-family:var(--font-ui);font-size:var(--text-base);font-weight:500;gap:var(--space-2);justify-content:center;line-height:1;padding:var(--space-3) var(--space-6);text-decoration:none;transition:all var(--transition-fast)}.btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.btn--primary{background-color:var(--color-primary);color:var(--text-inverse)}.btn--primary:hover{background-color:var(--color-primary-light)}.btn--secondary{background-color:var(--bg-tertiary);color:var(--text-primary)}.btn--secondary:hover{background-color:var(--border-color)}.btn--ghost{background-color:transparent;color:var(--text-primary)}.btn--ghost:hover{background-color:var(--bg-tertiary)}.btn--icon{border-radius:var(--border-radius-full);padding:var(--space-3)}.btn--lg{font-size:var(--text-lg);padding:var(--space-4) var(--space-8)}.card{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--border-radius-xl);box-shadow:var(--shadow-md);padding:var(--space-6);transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.card--interactive:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.card--mode{cursor:pointer;text-align:center}.card--mode .card-icon{font-size:3rem;margin-bottom:var(--space-4)}.card--mode .card-title{font-size:var(--text-xl);font-weight:600;margin-bottom:var(--space-2)}.card--mode .card-description{color:var(--text-secondary);font-size:var(--text-sm)}.container{margin-inline:auto;max-width:1200px;padding-inline:var(--space-4);width:100%}.container--narrow{max-width:800px}.flex{display:flex}.flex-center{justify-content:center}.flex-between,.flex-center{align-items:center;display:flex}.flex-between{justify-content:space-between}.gap-2{gap:var(--space-2)}.gap-4{gap:var(--space-4)}.gap-6{gap:var(--space-6)}.gap-8{gap:var(--space-8)}.grid{display:grid}.grid-cols-2{grid-template-columns:repeat(2,1fr)}.grid-cols-3{grid-template-columns:repeat(3,1fr)}@media(max-width:768px){.grid-cols-2,.grid-cols-3{grid-template-columns:1fr}}.page{display:flex;flex-direction:column;min-height:100vh}.page-header{background-color:var(--bg-card);border-bottom:1px solid var(--border-color);padding:var(--space-4);position:sticky;top:0;z-index:var(--z-sticky)}.page-content{flex:1;padding:var(--space-8) var(--space-4)}.page-footer{border-top:1px solid var(--border-color);color:var(--text-muted);font-size:var(--text-sm);padding:var(--space-4);text-align:center}@media(prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.sr-only{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border:0;white-space:nowrap}.skip-link{background-color:var(--color-primary);color:var(--text-inverse);left:0;padding:var(--space-3) var(--space-4);position:absolute;top:-100%;transition:top var(--transition-fast);z-index:100}.skip-link:focus{top:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fadeIn var(--transition-normal) ease-out}.animate-slide-up{animation:slideUp var(--transition-slow) ease-out}