/* ============================================================
   نور المقرأ — القرآن الكريم بالقراءات العشر
   ============================================================ */

:root{
  --font-ui:"Tajawal",system-ui,sans-serif;
  --font-quran:"Amiri Quran","Amiri",serif;
  --ayah-size:32px;
  --radius:16px;
  --radius-s:10px;
  --shadow:0 8px 30px rgba(10,30,20,.10);
  --shadow-lg:0 18px 60px rgba(10,30,20,.18);
  --topbar-h:64px;
  --bnav-h:0px;
  --maxw:1080px;
  --ease:cubic-bezier(.4,.1,.2,1);
}

/* ---------- Themes ---------- */
html[data-theme="light"]{
  --bg:#f4efe4; --bg-2:#ede5d3; --surface:#fdfaf2; --surface-2:#f6f0e2;
  --ink:#20302a; --ink-2:#5c6b62; --ink-3:#94a099;
  --primary:#0d6e57; --primary-ink:#f2ede0; --primary-soft:rgba(13,110,87,.10);
  --gold:#b08a2e; --gold-soft:rgba(176,138,46,.14);
  --line:#e0d6bf; --line-2:#d3c7ac;
  --glass:rgba(253,250,242,.86);
  --hero-a:#0d6e57; --hero-b:#0a4d3e; --hero-ink:#f2ede0;
}
html[data-theme="sepia"]{
  --bg:#efe2c8; --bg-2:#e6d6b6; --surface:#f9efd9; --surface-2:#f1e5c9;
  --ink:#3a2f1c; --ink-2:#6d5f43; --ink-3:#9d8d6c;
  --primary:#7c5518; --primary-ink:#f9efd9; --primary-soft:rgba(124,85,24,.12);
  --gold:#9a6b12; --gold-soft:rgba(154,107,18,.15);
  --line:#dcc99e; --line-2:#cdb88a;
  --glass:rgba(249,239,217,.88);
  --hero-a:#7c5518; --hero-b:#563a0e; --hero-ink:#f9efd9;
}
html[data-theme="dark"]{
  --bg:#0b1512; --bg-2:#0e1a16; --surface:#132019; --surface-2:#18291f;
  --ink:#e8e2cf; --ink-2:#a9b3a4; --ink-3:#6f7d72;
  --primary:#39b98f; --primary-ink:#08130f; --primary-soft:rgba(57,185,143,.12);
  --gold:#d8b25c; --gold-soft:rgba(216,178,92,.14);
  --line:#22352b; --line-2:#2e4536;
  --glass:rgba(15,26,21,.86);
  --hero-a:#123a2e; --hero-b:#0a1f18; --hero-ink:#e8e2cf;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font-ui); color:var(--ink);
  background:
    radial-gradient(1200px 500px at 85% -100px, var(--gold-soft), transparent 60%),
    radial-gradient(1000px 600px at -10% 0, var(--primary-soft), transparent 55%),
    var(--bg);
  min-height:100dvh;
  padding-bottom:calc(var(--bnav-h) + env(safe-area-inset-bottom));
}
/* subtle 8-point star pattern */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.05; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath fill='none' stroke='%23808060' stroke-width='1' d='M36 8l7 14 15 3-10 12 2 15-14-6-14 6 2-15L14 25l15-3z'/%3E%3C/svg%3E");
}
#view, .topbar, .player, .bottomnav, .sheet, .modal, .toast{position:relative; z-index:1}

button{font-family:inherit; cursor:pointer}
a{color:inherit; text-decoration:none}
h1,h2,h3{margin:0; font-weight:800}
::selection{background:var(--gold-soft)}

/* ---------- Top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:40; height:var(--topbar-h);
  display:flex; align-items:center; gap:18px; padding:0 clamp(14px,3vw,32px);
  background:var(--glass); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:10px; font-size:20px; font-weight:500}
.brand b{font-weight:800; color:var(--primary)}
.brand-mark{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  color:var(--gold); background:linear-gradient(135deg,var(--hero-a),var(--hero-b));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.nav-desktop{display:flex; gap:4px; margin-inline-start:8px}
.nav-desktop a{
  padding:9px 16px; border-radius:999px; font-weight:700; font-size:15px; color:var(--ink-2);
  transition:.2s var(--ease);
}
.nav-desktop a:hover{color:var(--ink); background:var(--surface-2)}
.nav-desktop a.active{background:var(--primary); color:var(--primary-ink)}
.top-actions{margin-inline-start:auto; display:flex; gap:8px}

.icon-btn{
  width:40px;height:40px;border-radius:12px;border:1px solid var(--line);
  background:var(--surface); color:var(--ink-2); display:grid; place-items:center;
  transition:.2s var(--ease);
}
.icon-btn:hover{color:var(--primary); border-color:var(--primary); transform:translateY(-1px)}
.icon-btn svg{width:20px;height:20px}

/* ---------- Layout ---------- */
#view{max-width:var(--maxw); margin:0 auto; padding:clamp(14px,3vw,28px)}
#view:focus{outline:none}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden; border-radius:24px; color:var(--hero-ink);
  background:linear-gradient(140deg,var(--hero-a),var(--hero-b));
  padding:clamp(28px,5vw,52px); margin-bottom:24px; box-shadow:var(--shadow-lg);
}
.hero::before{
  content:""; position:absolute; inset:0; opacity:.14;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='1.2' d='M45 10l9 17 19 4-13 15 3 19-18-8-18 8 3-19-13-15 19-4z'/%3E%3C/svg%3E");
}
.hero::after{ /* mihrab arch */
  content:""; position:absolute; inset-inline-end:-70px; top:-70px; width:340px; height:340px;
  border-radius:50%; border:2px solid rgba(255,255,255,.14);
  box-shadow:0 0 0 34px rgba(255,255,255,.05), 0 0 0 70px rgba(255,255,255,.03);
}
.hero > *{position:relative; z-index:1}
.hero .kicker{
  display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
  padding:7px 14px; border-radius:999px; margin-bottom:16px;
}
.hero .kicker svg{width:16px;height:16px;flex-shrink:0}
.hero h1{font-size:clamp(26px,4.6vw,44px); line-height:1.25; margin-bottom:10px}
.hero h1 em{font-style:normal; color:var(--gold)}
.hero p{margin:0 0 22px; font-size:clamp(15px,2vw,18px); opacity:.85; max-width:560px; line-height:1.8}
.hero-stats{display:flex; flex-wrap:wrap; gap:10px}
.hero-stats span{
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  padding:8px 16px; border-radius:12px; font-size:14px; font-weight:700;
}
.hero-stats b{color:var(--gold); font-size:17px; margin-inline-end:6px}
.hero-cta{display:flex; gap:10px; margin-top:22px; flex-wrap:wrap}

/* ---------- Buttons / chips ---------- */
.btn{
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  padding:11px 20px; border-radius:12px; font-weight:700; font-size:15px;
  display:inline-flex; align-items:center; gap:8px; transition:.2s var(--ease);
}
.btn:hover{transform:translateY(-1px); box-shadow:var(--shadow)}
.btn.primary{background:var(--primary); border-color:var(--primary); color:var(--primary-ink)}
.btn.gold{background:var(--gold); border-color:var(--gold); color:#fff}
.btn.ghost{background:transparent}
.btn.wide{width:100%; justify-content:center}
.btn svg{width:18px;height:18px}
.btn:disabled{opacity:.45; pointer-events:none}

.chip{
  border:1px solid var(--line); background:var(--surface); color:var(--ink-2);
  padding:7px 13px; border-radius:999px; font-weight:700; font-size:13px;
  display:inline-flex; align-items:center; gap:6px; transition:.2s var(--ease); white-space:nowrap;
}
.chip:hover{border-color:var(--primary); color:var(--primary)}
.chip.on{background:var(--primary); border-color:var(--primary); color:var(--primary-ink)}
.chip svg{width:15px;height:15px}

/* ---------- Continue card ---------- */
.continue-card{
  display:flex; align-items:center; gap:16px; margin-bottom:22px;
  background:linear-gradient(120deg,var(--gold-soft),transparent 70%), var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); padding:16px 20px;
  transition:.2s var(--ease);
}
.continue-card:hover{box-shadow:var(--shadow); transform:translateY(-2px)}
.continue-card .cc-ic{
  width:48px;height:48px;border-radius:14px;background:var(--gold-soft);color:var(--gold);
  display:grid;place-items:center;flex-shrink:0;
}
.continue-card .cc-ic svg{width:24px;height:24px}
.continue-card b{font-size:17px}
.continue-card small{display:block; color:var(--ink-2); margin-top:2px}
.continue-card .cc-go{margin-inline-start:auto; color:var(--primary); font-weight:800}

/* ---------- Search & filters ---------- */
.list-tools{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:18px}
.search-wrap{
  flex:1; min-width:220px; display:flex; align-items:center; gap:10px;
  background:var(--surface); border:1.5px solid var(--line); border-radius:14px; padding:0 14px;
  transition:.2s var(--ease);
}
.search-wrap:focus-within{border-color:var(--primary)}
.search-wrap svg{width:18px;height:18px;color:var(--ink-3); flex-shrink:0}
.search-wrap input{
  border:0; outline:0; background:transparent; padding:13px 0; width:100%;
  font-family:inherit; font-size:16px; color:var(--ink);
}

/* ---------- Surah grid ---------- */
.surah-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px}
.surah-card{
  display:flex; align-items:center; gap:14px; padding:14px 16px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  transition:.22s var(--ease); position:relative; overflow:hidden;
}
.surah-card::after{
  content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:3px;
  background:linear-gradient(var(--primary),var(--gold)); opacity:0; transition:.2s;
}
.surah-card:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--line-2)}
.surah-card:hover::after{opacity:1}
.s-num{
  width:44px;height:44px; flex-shrink:0; display:grid; place-items:center; position:relative;
  font-weight:800; font-size:15px; color:var(--primary);
}
.s-num::before,.s-num::after{
  content:""; position:absolute; inset:2px; border:1.5px solid var(--gold);
  border-radius:8px; opacity:.75; transition:.25s var(--ease);
}
.s-num::after{transform:rotate(45deg); opacity:.4}
.surah-card:hover .s-num::after{transform:rotate(135deg)}
.s-info{min-width:0}
.s-name{font-family:var(--font-quran); font-size:21px; line-height:1.4}
.s-meta{font-size:12.5px; color:var(--ink-2); display:flex; gap:8px; margin-top:2px}
.s-meta .dot::before{content:"،"; margin-inline-end:6px; color:var(--ink-3)}

.sec-title{display:flex; align-items:center; gap:12px; margin:26px 0 16px; font-size:20px}
.sec-title::after{content:""; flex:1; height:1px; background:linear-gradient(to left,var(--line-2),transparent)}
.sec-title svg{width:22px;height:22px;color:var(--gold)}

/* ---------- Reader ---------- */
.reader-head{
  position:sticky; top:var(--topbar-h); z-index:30;
  background:var(--glass); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:10px 14px; margin-bottom:18px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.reader-head .rh-title{font-weight:800; font-size:17px; display:flex; align-items:center; gap:8px}
.reader-head .rh-title small{color:var(--ink-2); font-weight:500}
.rh-spacer{flex:1}
.rh-tools{display:flex; gap:8px; flex-wrap:wrap}

.surah-banner{
  position:relative; text-align:center; padding:34px 20px 30px; margin-bottom:8px;
  border-radius:20px; overflow:hidden; color:var(--hero-ink);
  background:linear-gradient(150deg,var(--hero-a),var(--hero-b)); box-shadow:var(--shadow);
}
.surah-banner::before{
  content:""; position:absolute; inset:10px; border:1.5px solid rgba(255,255,255,.25);
  border-radius:14px; pointer-events:none;
}
.surah-banner::after{
  content:"۞"; position:absolute; top:14px; inset-inline-start:22px; font-size:26px; color:var(--gold); opacity:.9;
}
.surah-banner h2{font-family:var(--font-quran); font-size:clamp(30px,5vw,42px); font-weight:400}
.surah-banner .sb-meta{margin-top:8px; font-size:14px; opacity:.8; display:flex; justify-content:center; gap:14px}
.bismillah{
  font-family:var(--font-quran); text-align:center; font-size:clamp(26px,4vw,34px);
  color:var(--gold); padding:20px 10px 6px; line-height:1.6;
}

.ayah-list{display:flex; flex-direction:column; gap:12px; margin-top:14px}
.ayah-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 22px 14px; transition:.25s var(--ease); scroll-margin-top:140px;
}
.ayah-card.playing{
  border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft), var(--shadow);
  background:linear-gradient(150deg,var(--gold-soft),transparent 40%), var(--surface);
}
.ayah-text{
  font-family:var(--font-quran); font-size:var(--ayah-size); line-height:2.05;
  text-align:justify; transition:filter .3s;
}
.ayah-foot{display:flex; align-items:center; gap:4px; margin-top:12px; padding-top:10px; border-top:1px dashed var(--line)}
.num-badge{
  min-width:38px;height:38px;display:grid;place-items:center;position:relative;
  font-weight:800;font-size:13px;color:var(--gold); margin-inline-end:auto;
}
.num-badge::before,.num-badge::after{
  content:""; position:absolute; inset:3px; border:1.5px solid var(--gold); border-radius:7px; opacity:.8;
}
.num-badge::after{transform:rotate(45deg); opacity:.45}
.a-btn{
  width:36px;height:36px;border-radius:10px;border:0;background:transparent;color:var(--ink-3);
  display:grid;place-items:center;transition:.18s var(--ease);
}
.a-btn:hover{background:var(--primary-soft); color:var(--primary)}
.a-btn.on{color:var(--gold)}
.a-btn svg{width:18px;height:18px}

/* continuous flow view */
.flow-wrap{
  background:var(--surface); border:1px solid var(--line); border-radius:20px;
  padding:clamp(20px,4vw,44px); margin-top:14px;
}
.flow-text{font-family:var(--font-quran); font-size:var(--ayah-size); line-height:2.15; text-align:justify}
.flow-text .fa{cursor:pointer; border-radius:6px; transition:background .2s}
.flow-text .fa:hover{background:var(--primary-soft)}
.flow-text .fa.playing{background:var(--gold-soft); box-shadow:0 2px 0 var(--gold)}
.inum{
  display:inline-grid; place-items:center; min-width:34px; height:34px; margin:0 6px;
  font-family:var(--font-ui); font-size:12px; font-weight:800; color:var(--gold);
  background:radial-gradient(circle, var(--gold-soft) 60%, transparent 61%);
  border:1.5px solid var(--gold); border-radius:50%; vertical-align:middle;
}

/* memorize mode */
.memorize .ayah-text, .memorize .flow-text{filter:blur(10px); cursor:pointer; user-select:none}
.memorize .ayah-card.revealed .ayah-text, .memorize .flow-wrap.revealed .flow-text{filter:none}
.memo-banner{
  display:flex; align-items:center; gap:10px; margin-top:14px;
  background:var(--gold-soft); border:1px dashed var(--gold); color:var(--ink);
  border-radius:12px; padding:12px 16px; font-weight:700; font-size:14px;
}
.memo-banner svg{width:20px;height:20px;color:var(--gold); flex-shrink:0}

.reader-nav{display:flex; gap:10px; margin:26px 0 10px}
.reader-nav .btn{flex:1; justify-content:center}

/* ---------- Qiraat ---------- */
.qiraat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:14px}
.qcard{
  position:relative; text-align:right; background:var(--surface); overflow:hidden;
  border:1px solid var(--line); border-radius:18px; padding:22px; transition:.25s var(--ease);
  display:flex; flex-direction:column; gap:10px; cursor:pointer;
}
.qcard::before{
  content:""; position:absolute; top:0; inset-inline:0; height:4px;
  background:linear-gradient(to left, var(--primary), var(--gold));
  opacity:.65; transition:.25s;
}
.qcard:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--line-2)}
.qcard:hover::before{opacity:1}
.q-ord{
  position:absolute; top:14px; inset-inline-start:16px; font-size:44px; font-weight:800;
  color:var(--ink); opacity:.06; line-height:1;
}
.qcard h3{font-size:20px; color:var(--primary)}
.qcard .q-desc{font-size:13.5px; color:var(--ink-2); line-height:1.7; min-height:44px}
.q-rawis{display:flex; gap:8px; flex-wrap:wrap; margin-top:auto}
.q-rawi{
  background:var(--gold-soft); color:var(--gold); border:1px solid transparent;
  font-size:13px; font-weight:800; padding:6px 12px; border-radius:999px;
}
.q-count{font-size:12.5px; color:var(--ink-3); font-weight:700}

.rawi-tabs{display:flex; gap:8px; margin:4px 0 16px; flex-wrap:wrap}
.rawi-tab{
  padding:10px 22px; border-radius:12px; border:1.5px solid var(--line); background:var(--surface);
  font-weight:800; font-size:15px; color:var(--ink-2); transition:.2s var(--ease);
}
.rawi-tab.on{background:var(--primary); border-color:var(--primary); color:var(--primary-ink)}

.reciter-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:10px}
.rl-item{
  display:flex; align-items:center; gap:12px; text-align:right; width:100%;
  background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:13px 16px;
  transition:.2s var(--ease); font-family:inherit;
}
.rl-item:hover{border-color:var(--primary); transform:translateY(-2px); box-shadow:var(--shadow)}
.rl-av{
  width:42px;height:42px;border-radius:50%; flex-shrink:0; display:grid; place-items:center;
  background:var(--primary-soft); color:var(--primary); font-weight:800; font-size:16px;
}
.rl-info{min-width:0}
.rl-info b{display:block; font-size:15.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rl-info small{color:var(--ink-2); font-size:12.5px}
.rl-item .rl-go{margin-inline-start:auto; color:var(--ink-3)}
.rl-item .rl-go svg{width:16px;height:16px}

.crumbs{display:flex; align-items:center; gap:8px; margin-bottom:14px; font-size:14px; color:var(--ink-2); flex-wrap:wrap}
.crumbs a{color:var(--primary); font-weight:700}
.crumbs .sep{color:var(--ink-3)}

.mini-surah-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px}
.ms-item{
  display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:10px 12px; font-family:inherit; font-size:14.5px; font-weight:700;
  transition:.18s var(--ease); text-align:right; color:var(--ink);
}
.ms-item:hover{border-color:var(--gold); transform:translateY(-2px)}
.ms-item.playing{background:var(--gold-soft); border-color:var(--gold)}
.ms-item .ms-n{color:var(--ink-3); font-size:12px; font-weight:800; min-width:22px}
.ms-item.playing .ms-n{color:var(--gold)}

/* ---------- Player ---------- */
.player{
  position:fixed; z-index:50; inset-inline:0; bottom:calc(var(--bnav-h) + env(safe-area-inset-bottom));
  background:var(--glass); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--line);
  transition:transform .35s var(--ease), opacity .3s;
}
.player.hidden{transform:translateY(110%); opacity:0; pointer-events:none}
.p-progress{height:4px; background:var(--line); cursor:pointer}
.p-progress-fill{height:100%; width:0%; background:linear-gradient(to left,var(--primary),var(--gold)); transition:width .25s linear; border-radius:0 3px 3px 0}
.p-inner{
  max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; gap:16px;
  padding:10px clamp(14px,3vw,28px);
}
.p-meta{min-width:0; flex:1}
.p-title{font-weight:800; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.p-sub{font-size:12.5px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px}
.p-controls{display:flex; align-items:center; gap:8px}
.p-play{
  width:52px;height:52px;border-radius:50%;border:0; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--primary),var(--gold)); color:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.22); transition:.2s var(--ease);
}
.p-play:hover{transform:scale(1.06)}
.p-play svg{width:22px;height:22px}
.p-skip{border-radius:50%}
.p-extras{display:flex; align-items:center; gap:8px}

/* ---------- Bottom nav ---------- */
.bottomnav{
  position:fixed; z-index:45; inset-inline:0; bottom:0; display:none;
  background:var(--glass); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.bottomnav a,.bottomnav button{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:9px 4px 7px; font-size:11.5px; font-weight:700; color:var(--ink-3);
  background:none; border:0;
}
.bottomnav .active{color:var(--primary)}
.bn-ic svg{width:22px;height:22px}

/* ---------- Sheet (tafsir) ---------- */
.sheet-backdrop{position:fixed; inset:0; z-index:60; background:rgba(5,15,10,.5); backdrop-filter:blur(3px); opacity:1; transition:opacity .3s}
.sheet-backdrop.hidden{opacity:0; pointer-events:none}
.sheet{
  position:fixed; z-index:61; inset-inline:0; bottom:0; max-height:82dvh;
  max-width:760px; margin:0 auto; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line); border-bottom:0;
  border-radius:24px 24px 0 0; box-shadow:var(--shadow-lg);
  transition:transform .35s var(--ease);
}
.sheet.hidden{transform:translateY(105%)}
.sheet-grip{width:44px;height:5px;border-radius:99px;background:var(--line-2);margin:10px auto 2px}
.sheet-head{display:flex; align-items:center; gap:12px; padding:10px 20px; border-bottom:1px solid var(--line)}
.sheet-head h3{font-size:17px}
.sheet-sub{font-size:12.5px; color:var(--ink-2)}
.sheet-tabs{display:flex; gap:6px; margin-inline-start:auto}
.sheet-ayah{
  font-family:var(--font-quran); font-size:22px; line-height:1.9; padding:14px 22px 4px;
  color:var(--primary); max-height:150px; overflow:auto; flex-shrink:0;
}
.sheet-body{padding:12px 22px 20px; overflow:auto; line-height:2; font-size:16px; color:var(--ink)}
.sheet-foot{display:flex; gap:10px; padding:12px 20px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid var(--line)}
.sheet-foot .btn{flex:1; justify-content:center}

/* ---------- Modal ---------- */
.modal{position:fixed; inset:0; z-index:70; display:grid; place-items:center; padding:18px;
  background:rgba(5,15,10,.5); backdrop-filter:blur(3px); transition:opacity .25s}
.modal.hidden{opacity:0; pointer-events:none}
.modal-card{
  width:100%; max-width:440px; max-height:86dvh; overflow:auto;
  background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow-lg);
  transform:translateY(0); transition:transform .3s var(--ease);
}
.modal.hidden .modal-card{transform:translateY(16px)}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line)}
.modal-body{padding:18px 20px}
.set-row{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 0; font-weight:700; font-size:15px}
.set-row + .set-row{border-top:1px dashed var(--line)}
.set-row select,.set-row input[type=number]{
  font-family:inherit; font-size:14px; padding:9px 12px; border-radius:10px;
  border:1.5px solid var(--line); background:var(--surface-2); color:var(--ink); max-width:200px;
}
.set-row input[type=range]{accent-color:var(--primary); width:150px}
.set-row input[type=checkbox]{width:20px;height:20px;accent-color:var(--primary)}
.set-note{font-size:13px; color:var(--ink-2); line-height:1.8; background:var(--primary-soft); border-radius:10px; padding:12px 14px; margin:14px 0 0}
.range-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px}
.range-grid label{display:flex; flex-direction:column; gap:6px; font-size:13.5px; font-weight:700; color:var(--ink-2)}
.range-grid input,.range-grid select{
  font-family:inherit; font-size:15px; padding:10px 12px; border-radius:10px;
  border:1.5px solid var(--line); background:var(--surface-2); color:var(--ink); width:100%;
}

/* ---------- Toast ---------- */
.toast{
  position:fixed; z-index:80; bottom:calc(var(--bnav-h) + 84px + env(safe-area-inset-bottom));
  inset-inline:0; margin:0 auto; width:fit-content; max-width:88vw;
  background:var(--ink); color:var(--bg); font-weight:700; font-size:14px;
  padding:11px 20px; border-radius:99px; box-shadow:var(--shadow-lg);
  opacity:0; transform:translateY(10px); pointer-events:none; transition:.3s var(--ease);
}
.toast.show{opacity:1; transform:translateY(0)}

/* ---------- Skeleton / states ---------- */
.skel{border-radius:var(--radius); background:linear-gradient(100deg,var(--surface) 40%,var(--surface-2) 50%,var(--surface) 60%); background-size:300% 100%; animation:sk 1.3s infinite}
@keyframes sk{0%{background-position:100% 0}100%{background-position:-100% 0}}
.state-box{text-align:center; padding:60px 20px; color:var(--ink-2)}
.state-box svg{width:44px;height:44px;color:var(--ink-3); margin-bottom:12px}
.state-box p{margin:0 0 16px; font-weight:700}

.fade-in{animation:fadeIn .4s var(--ease)}
@keyframes fadeIn{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

/* ---------- Responsive ---------- */
@media (max-width:840px){
  :root{--bnav-h:62px}
  .nav-desktop{display:none}
  .bottomnav{display:flex}
  .p-extras .chip span.lbl{display:none}
  .hero{border-radius:18px}
}
@media (max-width:560px){
  .p-inner{flex-wrap:wrap; gap:8px 12px; padding-block:8px}
  .p-meta{flex-basis:100%; order:-1; text-align:center}
  .p-controls{margin:0 auto}
  .p-extras{margin:0 auto}
  .p-play{width:46px;height:46px}
  .ayah-card{padding:16px 16px 10px}
  .reader-head{padding:8px 10px}
  .range-grid{grid-template-columns:1fr 1fr}
}