@import url('https://fonts.googleapis.com/css2?family=Amiri+Quran&display=swap');

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100dvh; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--ink);
  padding-bottom:calc(72px + env(safe-area-inset-bottom,0px));
}
body.player-on{padding-bottom:calc(152px + env(safe-area-inset-bottom,0px))}
body.reader-open{padding-bottom:calc(80px + env(safe-area-inset-bottom,0px))}
body.reader-open.player-on{padding-bottom:calc(160px + env(safe-area-inset-bottom,0px))}

/* ---------- Themes ---------- */

/* ---------- Header ---------- */
.app-header{
  position:sticky; top:0; z-index:20; background:var(--bg);
  padding:calc(env(safe-area-inset-top,0px) + 12px) 20px 10px;
  border-bottom:1px solid var(--line); text-align:center;
}
body.reader-open .app-header{display:none}
.brand{font-size:1.5rem; font-weight:800; letter-spacing:.5px; background:none; border:none; color:var(--ink); cursor:pointer; padding:0; display:flex; align-items:center; min-height:44px}
.brand-mark{margin-right:10px; font-size:1.7rem}
.brand-title{
  font-family:Georgia,'Times New Roman',serif; font-size:1.9rem; font-weight:800; letter-spacing:2px;
  background:linear-gradient(180deg,#FFF8DC 0%,#F9E7A8 20%,#E8C547 40%,#B8860B 55%,#F5D67B 75%,#FFF3C4 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(122,92,0,.9)) drop-shadow(0 2px 3px rgba(0,0,0,.45));
}

/* ---------- Views ---------- */
main{max-width:760px; margin:0 auto; padding:0 16px}
.view{display:none; padding-bottom:24px}
.view.active{display:block}
.view-title{font-size:1.4rem; margin:20px 4px 12px}

/* ---------- Stats / continue / search ---------- */
.continue-card{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:linear-gradient(135deg,var(--card),var(--bg)); border:1px solid var(--gold);
  border-radius:16px; padding:14px 16px; margin-bottom:14px;
}
.continue-card b{display:block; font-size:1rem}
.continue-card span{font-size:.8rem; color:var(--muted)}
.search-wrap{margin-bottom:12px}
#surahSearch{
  width:100%; min-height:48px; border-radius:12px; border:1px solid var(--line);
  background:var(--card); color:var(--ink); font-size:1rem; padding:10px 16px;
}

/* ---------- Surah list ---------- */
.surah-list{display:flex; flex-direction:column; gap:8px}
.surah-row{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:12px 14px; min-height:64px; color:var(--ink); font-size:1rem; cursor:pointer;
}
.surah-row:active{transform:scale(.99)}
.s-num{
  flex:0 0 44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:var(--bg); border:1px solid var(--gold); color:var(--gold-soft);
  font-weight:700; font-variant-numeric:tabular-nums;
}
.s-info{flex:1; min-width:0}
.s-info b{display:block; font-size:1rem}
.s-info span{font-size:.78rem; color:var(--muted)}
.s-ar{font-family:'Amiri Quran',serif; font-size:1.6rem; color:var(--gold-soft); line-height:1.4}
.s-tag{font-size:.68rem; color:var(--muted); border:1px solid var(--line); border-radius:20px; padding:3px 10px; white-space:nowrap}

/* ---------- Reader ---------- */
.reader-header{
  position:sticky; top:0; z-index:20; background:var(--bg);
  display:flex; align-items:center; gap:8px;
  padding:calc(env(safe-area-inset-top,0px) + 8px) 8px 8px;
  border-bottom:1px solid var(--line);
}
.reader-title{flex:1; text-align:center; min-width:0}
.reader-title b{display:block; font-size:1.05rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.reader-title span{font-size:.75rem; color:var(--muted)}
.icon-btn{
  min-width:44px; min-height:44px; border-radius:12px; border:1px solid var(--line);
  background:var(--card); color:var(--ink); font-size:1.3rem; cursor:pointer;
  display:inline-grid; place-items:center; padding:0 10px;
}
.icon-btn.big{font-size:1.6rem}
.icon-btn.on{border-color:var(--gold); color:var(--gold-soft)}
.bismillah{
  text-align:center; font-family:'Amiri Quran','KFGQPC HAFS Uthmanic',serif;
  font-size:1.9rem; color:var(--gold-soft); margin:22px 8px; line-height:2;
}
.ayah{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:18px 16px 12px; margin:0 0 12px;
}
.ayah.playing{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold)}
.ayah-ar{
  font-family:'Amiri Quran','KFGQPC HAFS Uthmanic',serif; font-size:30px; line-height:2;
  text-align:right; color:var(--ar); margin:0 0 12px; overflow-wrap:break-word;
}
.ayah-end{
  display:inline-grid; place-items:center; min-width:34px; height:34px; padding:0 6px;
  border:1.5px solid var(--gold); border-radius:50%; color:var(--gold-soft);
  font-size:15px; line-height:1; margin-inline-start:10px; vertical-align:middle;
  font-family:-apple-system,serif;
}
.ayah-tr{font-size:1rem; line-height:1.75; color:var(--ink); margin:0 0 8px}
.ayah-tr.rtl{direction:rtl; text-align:right}
.ayah-actions{display:flex; gap:8px; justify-content:flex-end}
.skel{border-radius:16px; background:var(--card); border:1px solid var(--line); height:150px; margin-bottom:12px; animation:pulse 1.2s infinite}
@keyframes pulse{50%{opacity:.55}}

/* ---------- Player ---------- */
#player{
  position:fixed; left:0; right:0; bottom:calc(72px + env(safe-area-inset-bottom,0px)); z-index:30;
  display:flex; align-items:center; gap:6px; max-width:760px; margin:0 auto;
  background:var(--card); border-top:1px solid var(--gold); padding:10px 12px;
}
#player.hidden{display:none}
.p-info{flex:1; min-width:0; margin-left:6px}
.p-info b{display:block; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.p-info span{font-size:.75rem; color:var(--muted)}

/* ---------- Tab bar ---------- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:flex; background:var(--tabbar); border-top:1px solid var(--line);
  padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));
}
body.reader-open .tabbar{display:none}
.tab{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  background:none; border:none; color:var(--muted); font-size:.72rem;
  min-height:56px; justify-content:center; cursor:pointer;
}
.tab .t-ico{font-size:1.35rem}
.tab.active{color:var(--gold-soft)}

/* ---------- Bookmarks / settings ---------- */
.bm-row{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:12px 14px; margin-bottom:8px; min-height:60px; color:var(--ink); cursor:pointer; font-size:.95rem;
}
.bm-row .ref{flex:0 0 auto; color:var(--gold-soft); font-weight:700; white-space:nowrap}
.bm-row .snip{flex:1; min-width:0; color:var(--muted); font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bm-del{min-width:44px; min-height:44px; border-radius:10px; border:1px solid var(--line); background:var(--bg); color:var(--ink); font-size:1.1rem; cursor:pointer}
.empty-note{color:var(--muted); text-align:center; margin:32px 16px; line-height:1.6}
.hidden{display:none !important}
.card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; margin-bottom:14px}
.card h3{margin:0 0 12px; font-size:1.05rem}
.card p{margin:8px 0; line-height:1.6}
.muted{color:var(--muted); font-size:.9rem}
.opt-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:8px}
.opt-list{display:flex; flex-direction:column; gap:8px}
.opt{
  min-height:48px; border-radius:12px; border:1px solid var(--line); background:var(--bg);
  color:var(--ink); font-size:.95rem; cursor:pointer; padding:10px 12px; text-align:left;
}
.opt.on{border-color:var(--gold); color:var(--gold-soft)}
.theme-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:34px 10px}
.swatch{
  aspect-ratio:1; border-radius:14px; border:2px solid var(--line); cursor:pointer;
  min-height:48px; position:relative; padding:0; background-clip:padding-box;
}
.swatch.on{border-color:var(--gold)}
.swatch span{position:absolute; bottom:-19px; left:0; right:0; font-size:.62rem; color:var(--muted); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.3}
.theme-grid{margin-bottom:22px}
.btn{
  min-height:48px; padding:12px 24px; border-radius:12px; border:none; cursor:pointer;
  background:var(--gold); color:#1A1A1A; font-size:1rem; font-weight:700;
}
.error-card{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:24px 16px; text-align:center; margin:16px 0;
}
.error-card p{color:var(--muted); margin:0 0 14px}

/* ---------- Responsive ---------- */
@media (min-width:768px){
  main{padding:0 24px}
  .opt-grid{grid-template-columns:repeat(3,1fr)}
  .theme-grid{grid-template-columns:repeat(8,1fr)}
  .ayah-ar{font-size:34px}
}
@media (min-width:1366px){
  main{max-width:860px}
  #player{max-width:860px}
  .ayah-ar{font-size:36px}
}
body[data-theme="navy"]{--bg:#0B1026;--card:#16204A;--ink:#F5F1E6;--muted:#9AA3C7;--gold:#D4AF37;--gold-soft:#F3E3AC;--line:rgba(212,175,55,.22);--tabbar:rgba(11,16,38,.92);--ar:#EDE4C8}
body[data-theme="emerald"]{--bg:#06231C;--card:#0B3D2E;--ink:#F1F5EC;--muted:#9AC7B4;--gold:#D4AF37;--gold-soft:#F3E3AC;--line:rgba(212,175,55,.25);--tabbar:rgba(6,35,28,.92);--ar:#EDE4C8}
body[data-theme="purple"]{--bg:#170D2B;--card:#241745;--ink:#F3EEF8;--muted:#B9A3D6;--gold:#E3C566;--gold-soft:#F5E7BC;--line:rgba(227,197,102,.25);--tabbar:rgba(23,13,43,.92);--ar:#EDE4C8}
body[data-theme="crimson"]{--bg:#230A0E;--card:#3D1219;--ink:#F8EEEE;--muted:#D6A3A3;--gold:#E8B84B;--gold-soft:#F5DFAE;--line:rgba(232,184,75,.25);--tabbar:rgba(35,10,14,.92);--ar:#EDE4C8}
body[data-theme="teal"]{--bg:#062A30;--card:#0C4550;--ink:#ECF5F4;--muted:#9AC7CE;--gold:#8FE3CF;--gold-soft:#C9F5E9;--line:rgba(143,227,207,.25);--tabbar:rgba(6,42,48,.92);--ar:#EDE4C8}
body[data-theme="desert"]{--bg:#2A1D10;--card:#4A2E1B;--ink:#F8F1E4;--muted:#C7AE8A;--gold:#F0C96A;--gold-soft:#F7E5B8;--line:rgba(240,201,106,.25);--tabbar:rgba(42,29,16,.92);--ar:#EDE4C8}
body[data-theme="charcoal"]{--bg:#131316;--card:#222227;--ink:#F2F2F5;--muted:#9A9AA5;--gold:#C9D2E0;--gold-soft:#E8EDF5;--line:rgba(201,210,224,.25);--tabbar:rgba(19,19,22,.92);--ar:#EDE4C8}
body[data-theme="forest"]{--bg:#0A1F12;--card:#143A24;--ink:#EFF5EA;--muted:#A9C79A;--gold:#E8D48B;--gold-soft:#F5EAC0;--line:rgba(232,212,139,.25);--tabbar:rgba(10,31,18,.92);--ar:#EDE4C8}
body[data-theme="rose"]{--bg:#1E0C18;--card:#33162A;--ink:#F7ECF1;--muted:#C79AAD;--gold:#E8A0BF;--gold-soft:#F6CBDC;--line:rgba(232,160,191,.28);--tabbar:rgba(30,12,24,.92);--ar:#F3E2C8}
body[data-theme="onyx"]{--bg:#000000;--card:#161616;--ink:#FFFFFF;--muted:#A3A3A3;--gold:#FFD766;--gold-soft:#FFE9A8;--line:rgba(255,215,102,.25);--tabbar:rgba(0,0,0,.92);--ar:#EDE4C8}
body[data-theme="pink"]{--bg:#FFF2F6;--card:#FFFFFF;--ink:#4A2333;--muted:#9A6B7D;--gold:#D81B60;--gold-soft:#F06292;--line:rgba(216,27,96,.22);--tabbar:rgba(255,242,246,.94);--ar:#3A1A28}
body[data-theme="orange"]{--bg:#FFF4EA;--card:#FFFFFF;--ink:#4A2A12;--muted:#A07A5A;--gold:#E8590C;--gold-soft:#F4843C;--line:rgba(232,89,12,.25);--tabbar:rgba(255,244,234,.94);--ar:#3A2410}
body[data-theme="sky"]{--bg:#F0F7FF;--card:#FFFFFF;--ink:#12324F;--muted:#6B8AA5;--gold:#1565C0;--gold-soft:#4E8FD1;--line:rgba(21,101,192,.22);--tabbar:rgba(240,247,255,.94);--ar:#102A44}
body[data-theme="white"]{--bg:#FFFFFF;--card:#F7F5F0;--ink:#1A1A1A;--muted:#6E6E6E;--gold:#B98A1F;--gold-soft:#8A6A1A;--line:rgba(185,138,31,.25);--tabbar:rgba(255,255,255,.94);--ar:#1A1A1A}
body[data-theme="green"]{--bg:#F1F8F1;--card:#FFFFFF;--ink:#1B3A1F;--muted:#6B8A6E;--gold:#2E7D32;--gold-soft:#57A05C;--line:rgba(46,125,50,.22);--tabbar:rgba(241,248,241,.94);--ar:#14301A}
body[data-theme="yellow"]{--bg:#FFFEF3;--card:#FFFFFF;--ink:#4A3A10;--muted:#96865A;--gold:#B07A00;--gold-soft:#8A6A1A;--line:rgba(202,138,4,.28);--tabbar:rgba(255,254,243,.94);--ar:#3A2E08}
body.hide-tr .ayah-tr{display:none}
.icon-btn.off{opacity:.4}
body[data-theme="royal-duo"]{--bg:#1A0B2E;--bg2:#4A154B;--card:rgba(40,20,60,.85);--ink:#F8F0FF;--muted:#C4A8D8;--gold:#FFD766;--gold-soft:#FFE9A8;--line:rgba(255,215,102,.25);--tabbar:rgba(26,11,46,.94);--ar:#F2E8D8;background:linear-gradient(135deg,var(--bg),var(--bg2))}
body[data-theme="ocean-duo"]{--bg:#04263B;--bg2:#0A5C5C;--card:rgba(8,50,70,.85);--ink:#EDF7F7;--muted:#9AC8C8;--gold:#7DE8D8;--gold-soft:#B8F5E8;--line:rgba(125,232,216,.25);--tabbar:rgba(4,38,59,.94);--ar:#EDE4C8;background:linear-gradient(135deg,var(--bg),var(--bg2))}
body[data-theme="sunset-duo"]{--bg:#3B0F1E;--bg2:#8A3B12;--card:rgba(70,25,35,.85);--ink:#FFF5EC;--muted:#D8A88F;--gold:#FFB84D;--gold-soft:#FFD89B;--line:rgba(255,184,77,.25);--tabbar:rgba(59,15,30,.94);--ar:#F2E8D8;background:linear-gradient(135deg,var(--bg),var(--bg2))}
body[data-theme="emerald-duo"]{--bg:#0B2E1A;--bg2:#14532D;--card:rgba(15,50,30,.85);--ink:#EFF7EC;--muted:#A8CCB0;--gold:#E8D48B;--gold-soft:#F5EAC0;--line:rgba(232,212,139,.25);--tabbar:rgba(11,46,26,.94);--ar:#EDE4C8;background:linear-gradient(135deg,var(--bg),var(--bg2))}