:root { --bg:#faf7f2; --fg:#241f1a; --accent:#1d6f5c; --muted:#7a7266; --card:#ffffff; --line:#e8e2d8; }
* { box-sizing: border-box; }
body { margin:0; font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; background:var(--bg); color:var(--fg); }
header { background:linear-gradient(135deg,#1d6f5c,#15503f); color:#fff; padding:28px 20px; text-align:center; }
header h1 { margin:0 0 6px; font-size:2rem; }
header .sub { margin:0; opacity:.9; font-size:.95rem; }
.layout { display:flex; gap:16px; max-width:1200px; margin:0 auto; padding:16px; align-items:flex-start; }
#sidebar { width:280px; flex:0 0 280px; background:var(--card); border:1px solid var(--line); border-radius:10px; max-height:calc(100vh - 140px); overflow-y:auto; position:sticky; top:16px; }
#sidebar h2 { margin:0; padding:14px 16px; font-size:1rem; border-bottom:1px solid var(--line); }
#surah-list { list-style:none; margin:0; padding:0; }
#surah-list li { display:flex; align-items:baseline; gap:8px; padding:9px 14px; border-bottom:1px solid var(--line); cursor:pointer; }
#surah-list li:hover { background:#f0ece4; }
#surah-list .num { color:var(--muted); font-size:.85rem; min-width:22px; text-align:right; }
#surah-list .name { flex:1; font-size:.92rem; }
#surah-list .ar-name { color:var(--accent); font-size:.9rem; }
#surah-list .count { color:var(--muted); font-size:.8rem; }
main { flex:1; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:20px 24px; min-width:0; }
main .placeholder { color:var(--muted); padding:40px; text-align:center; }
main h2 { margin:0 0 4px; font-size:1.4rem; }
.ar-title { color:var(--accent); font-size:1.1rem; margin-left:8px; }
.surah-meta { color:var(--muted); margin:0 0 16px; font-size:.9rem; }
.ayah { padding:14px 0; border-bottom:1px solid var(--line); }
.verse-num { display:inline-block; color:var(--accent); font-weight:600; font-size:.85rem; margin-bottom:6px; }
.ayah .ar { font-size:1.5rem; line-height:2.1; margin:0 0 6px; direction:rtl; }
.ayah .en { margin:0 0 4px; line-height:1.55; }
.ayah .en.alt { color:var(--muted); font-size:.92rem; }
footer { text-align:center; color:var(--muted); font-size:.8rem; padding:16px; }
@media (max-width:720px) {
  .layout { flex-direction:column; }
  #sidebar { width:100%; flex:none; position:static; max-height:300px; }
}