@import "https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Noto+Sans+Devanagari:wght@400;500&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;font-family:system-ui,-apple-system,Segoe UI,sans-serif;font-size:16px;line-height:1.5}#root{min-height:100dvh}button,select{font-family:inherit}.navbar{z-index:100;background:var(--navbar-bg);border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);justify-content:space-between;align-items:center;height:64px;padding:0 2rem;display:flex;position:sticky;top:0}.navbar-brand{align-items:center;gap:.6rem;text-decoration:none;display:flex}.brand-arabic{color:var(--gold);font-family:Amiri,serif;font-size:1.6rem;line-height:1}.brand-text{color:var(--text-primary);letter-spacing:.5px;font-size:1.2rem;font-weight:700}.navbar-links{align-items:center;gap:1.5rem;display:flex}.navbar-links a{color:var(--text-secondary);font-size:.95rem;font-weight:500;text-decoration:none;transition:color .2s;position:relative}.navbar-links a:hover,.navbar-links a.active{color:var(--accent)}.navbar-links a.active:after{content:"";background:var(--accent);border-radius:2px;height:2px;position:absolute;bottom:-4px;left:0;right:0}.badge{background:var(--accent);color:#fff;border-radius:10px;justify-content:center;align-items:center;margin-left:4px;padding:1px 6px;font-size:.7rem;display:inline-flex}.theme-btn{border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:8px;padding:4px 8px;font-size:1rem;transition:background .2s}.theme-btn:hover{background:var(--surface-hover)}@media (width<=600px){.navbar{height:56px;padding:0 1rem}.brand-arabic{font-size:1.3rem}.brand-text{font-size:1rem}.navbar-links{gap:.8rem}.navbar-links a{font-size:.85rem}}@media (width<=400px){.navbar-links a:not(.active){display:none}}.site-footer{background:var(--surface);border-top:1px solid var(--border);margin-top:4rem;padding:3rem 2rem 1.5rem}.footer-inner{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:2rem 2.5rem;max-width:1100px;margin:0 auto;display:grid}.footer-section h3{text-transform:uppercase;letter-spacing:.8px;color:var(--accent);margin-bottom:.8rem;font-size:.85rem;font-weight:700}.footer-section p{color:var(--text-muted);margin-bottom:.8rem;font-size:.85rem;line-height:1.6}.footer-section ul{flex-direction:column;gap:.35rem;list-style:none;display:flex}.footer-section a{color:var(--text-secondary);font-size:.83rem;line-height:1.4;text-decoration:none;transition:color .15s}.footer-section a:hover{color:var(--accent)}.footer-surah-list{max-height:320px;padding-right:4px;overflow-y:auto}.footer-surah-list::-webkit-scrollbar{width:3px}.footer-surah-list::-webkit-scrollbar-track{background:0 0}.footer-surah-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.footer-bottom{border-top:1px solid var(--border);flex-wrap:wrap;justify-content:space-between;gap:.4rem 2rem;max-width:1100px;margin:2rem auto 0;padding-top:1.2rem;display:flex}.footer-bottom p{color:var(--text-muted);font-size:.78rem}.footer-bottom a{color:var(--accent);text-decoration:none}@media (width<=768px){.footer-inner{grid-template-columns:repeat(2,1fr);gap:1.5rem}.site-footer{padding:2rem 1.5rem 1rem}}@media (width<=480px){.footer-inner{grid-template-columns:1fr}.footer-bottom{flex-direction:column;gap:.3rem}}.app{--bg:#f8f7f5;--surface:#fff;--surface-hover:#f3f3f3;--navbar-bg:#ffffffeb;--border:#e8e4dd;--text-primary:#1a1a1a;--text-secondary:#555;--text-muted:#888;--accent:#2d6a4f;--accent-faint:#d8f3dc;--gold:#b5850a;--gold-faint:#fef9e7;--shadow:#00000014;--meccan-bg:#fde8d8;--meccan-text:#9a3412;--medinan-bg:#dbeafe;--medinan-text:#1e40af;background:var(--bg);color:var(--text-primary);min-height:100dvh}.app.dark{--bg:#0f1117;--surface:#1a1d27;--surface-hover:#22263a;--navbar-bg:#0f1117eb;--border:#2a2d3e;--text-primary:#e8e6e0;--text-secondary:#9a9898;--text-muted:#6b6870;--accent:#52b788;--accent-faint:#1b3a2c;--gold:#d4a017;--gold-faint:#2a2010;--shadow:#0006;--meccan-bg:#3b1f14;--meccan-text:#fca97a;--medinan-bg:#1e2f55;--medinan-text:#93c5fd}.main-content{flex:1}@media (width<=768px){:root{font-size:15px}}@media (width<=480px){:root{font-size:14px}}