/* ============ Quran Offline — styles ============ */
@font-face{font-family:'Amiri';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/amiri-arabic-400.woff2) format('woff2');}
@font-face{font-family:'Amiri';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/amiri-arabic-700.woff2) format('woff2');}
@font-face{font-family:'Sakkal Majalla';font-style:normal;font-weight:400;font-display:swap;
  src:local('Sakkal Majalla'),local('Sakkal Majalla Regular'),url(fonts/sakkal-majalla.woff2) format('woff2');}
@font-face{font-family:'Sakkal Majalla';font-style:normal;font-weight:700;font-display:swap;
  src:local('Sakkal Majalla Bold'),url(fonts/sakkal-majalla.woff2) format('woff2');}
@font-face{font-family:'Reem Kufi';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/reem-kufi-arabic.woff2) format('woff2');}
@font-face{font-family:'Amiri Quran';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/amiri-quran-arabic.woff2) format('woff2');}

:root{
  --bg:#f4efe3; --surface:#fffdf6; --surface2:#f7f2e6; --fg:#1b2621; --muted:#5d6b62;
  --accent:#0e5b41; --accent-ink:#fff; --accent-soft:#dfe9e2; --gold:#a67c2e; --border:#e0d7c2;
  --shadow:0 1px 2px rgba(30,25,10,.06),0 6px 18px rgba(30,25,10,.07);
  --ar:2.05rem; --font-ar:'Amiri Quran','Amiri',serif;
  color-scheme:light;
}
html[data-theme=d]{
  --bg:#0b120f; --surface:#121b16; --surface2:#16211b; --fg:#e9e5d8; --muted:#98a89d;
  --accent:#3fae83; --accent-ink:#07120c; --accent-soft:#163024; --gold:#cfa85e; --border:#223027;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0 auto; max-width:780px; background:var(--bg); color:var(--fg);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  padding-bottom:calc(56px + env(safe-area-inset-bottom));
  min-height:100dvh;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:8px}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block}
.hide{display:none!important}

/* ---------- topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;background:var(--surface);border-bottom:1px solid var(--border);
}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:.2px}
.brand-ar{font-family:'Reem Kufi',serif;font-size:1.65rem;line-height:1;color:var(--gold);transform:translateY(2px)}
.top-actions{display:flex;gap:2px}
.ghost{border-radius:10px}
.ghost:hover{background:var(--surface2)}
.i-moon{display:none}
html[data-theme=d] .i-sun{display:none}
html[data-theme=d] .i-moon{display:block}

/* ---------- view ---------- */
#view{padding:16px 16px 8px;outline:none}
h1.page{font-size:1.25rem;margin:.2rem 0 .8rem}
.sub{color:var(--muted);font-size:.85rem}

/* continue card */
.continue{
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 72%,#1c2a24));
  color:var(--accent-ink);border-radius:16px;padding:16px 18px;display:flex;justify-content:space-between;
  align-items:center;gap:12px;box-shadow:var(--shadow);margin-bottom:14px}
.continue .big{font-size:1.05rem;font-weight:700}
.continue .snip{font-size:.83rem;opacity:.85;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:2px}
.continue .arrow{font-size:1.6rem;opacity:.9}

/* search box */
.search{position:relative;margin-bottom:16px}
.search input{
  width:100%;padding:12px 14px 12px 44px;border-radius:14px;border:1px solid var(--border);
  background:var(--surface);color:var(--fg);font-size:.95rem}
.search input:focus{outline:2px solid var(--accent);border-color:transparent}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);width:20px;height:20px}

/* surah list */
.srow{display:flex;align-items:center;gap:12px;padding:11px 6px;border-bottom:1px solid var(--border)}
.srow:active{background:var(--surface2)}
.snum{position:relative;width:40px;height:40px;display:grid;place-items:center;color:var(--gold);flex:none}
.snum svg{position:absolute;inset:0;width:40px;height:40px}
.snum b{font-size:.85rem;font-weight:600}
.sinfo{flex:1;min-width:0}
.slat{display:block;font-weight:600}
.smean{display:block;color:var(--muted);font-size:.8rem}
.sar{font-family:'Amiri',serif;font-size:1.5rem;color:var(--accent);flex:none}

/* ---------- surah page ---------- */
.surah-head{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:14px 16px;box-shadow:var(--shadow);margin-bottom:14px}
.surah-head .row1{display:flex;justify-content:space-between;align-items:center;gap:10px}
.surah-head .arname{font-family:'Amiri',serif;font-size:2rem;color:var(--accent)}
.surah-head .title{font-weight:700;font-size:1.1rem}
.surah-head .meta{color:var(--muted);font-size:.83rem;margin-top:2px}
.surah-actions{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:7px;background:var(--accent);color:var(--accent-ink);
  border-radius:11px;padding:8px 14px;font-size:.87rem;font-weight:600}
.btn.alt{background:var(--accent-soft);color:var(--accent)}
html[data-theme=d] .btn.alt{color:var(--fg)}
.btn svg{width:17px;height:17px}

.basmala{font-family:'Amiri Quran','Amiri',serif;font-size:1.7rem;text-align:center;color:var(--fg);
  padding:14px 0 6px;margin-bottom:6px;border-bottom:1px solid var(--border)}

.ayah{padding:16px 4px 12px;border-bottom:1px dashed var(--border)}
.ayah.flash{animation:flash 1.6s ease-out}
@keyframes flash{0%{background:color-mix(in srgb,var(--gold) 30%,transparent)}100%{background:transparent}}
.ahead{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.chip{min-width:30px;height:30px;padding:0 6px;display:inline-grid;place-items:center;border:1.6px solid var(--gold);
  border-radius:999px;color:var(--gold);font-size:.78rem;font-weight:600}
.acts{margin-left:auto;display:flex;gap:2px}
.acts button{border-radius:9px;padding:7px;color:var(--muted)}
.acts button:hover{background:var(--surface2);color:var(--fg)}
.acts button svg{width:18px;height:18px}
.acts .mark-on{color:var(--gold)}
.acts .mark-on svg{fill:var(--gold)}
.acts .playing{color:var(--accent)}
.ar{font-family:var(--font-ar);font-size:var(--ar);line-height:2.45;text-align:right;
  direction:rtl;unicode-bidi:isolate;margin:2px 0 10px}
.tr{font-size:.93rem;color:var(--fg)}
.tr.alt{color:var(--muted);margin-top:6px;font-size:.88rem}
.tr b{color:var(--accent);font-weight:600}

/* ---------- search results ---------- */
.res{display:block;padding:13px 6px;border-bottom:1px solid var(--border)}
.res .rmeta{font-size:.78rem;color:var(--accent);font-weight:700;margin-bottom:3px}
.res mark{background:color-mix(in srgb,var(--gold) 40%,transparent);color:inherit;border-radius:3px;padding:0 1px}
.res .rar{font-family:var(--font-ar);font-size:1.25rem;text-align:right;direction:rtl;margin-top:6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.basmala{font-family:var(--font-ar);font-size:1.7rem;text-align:center;color:var(--fg);padding:14px 0 6px;margin-bottom:6px;border-bottom:1px solid var(--border)}

/* ---------- settings ---------- */
.sect{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:14px 16px;margin-bottom:14px;box-shadow:var(--shadow)}
.sect h3{margin:0 0 10px;font-size:.95rem}
.sect p.hint{margin:.4rem 0 0;color:var(--muted);font-size:.8rem}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{border:1px solid var(--border);border-radius:10px;padding:7px 13px;font-size:.85rem;background:var(--surface2)}
.seg button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
label.range{display:flex;align-items:center;gap:12px;font-size:.9rem}
label.range input{flex:1;accent-color:var(--accent)}
.kv{display:flex;justify-content:space-between;font-size:.87rem;padding:5px 0}
html[data-arfont=sakkal]{--font-ar:'Sakkal Majalla','Amiri Quran',serif}
html[data-arfont=sakkal] .ar{line-height:2.15} html[data-arfont=sakkal] .basmala{font-size:1.95rem}

/* ---------- bottom nav ---------- */
.bottomnav{position:fixed;bottom:0;left:0;right:0;z-index:40;display:flex;justify-content:space-around;
  background:var(--surface);border-top:1px solid var(--border);padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  max-width:780px;margin:0 auto}
.bottomnav a{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--muted);
  font-size:.66rem;padding:4px 12px;border-radius:10px}
.bottomnav a svg{width:22px;height:22px}
.bottomnav a.on{color:var(--accent);font-weight:600}
.badge{position:absolute;top:0;right:4px;background:var(--gold);color:#fff;font-size:.6rem;font-style:normal;
  border-radius:99px;padding:1px 5px;font-weight:700}

/* ---------- player ---------- */
.player{position:fixed;bottom:calc(58px + env(safe-area-inset-bottom));left:0;right:0;z-index:35;
  background:var(--surface);border-top:1px solid var(--border);box-shadow:var(--shadow);max-width:780px;margin:0 auto}
.prow{display:flex;align-items:center;gap:6px;padding:8px 12px}
.prow button{color:var(--muted);border-radius:8px}
.prow button:hover{color:var(--fg)}
.p-main{color:var(--accent)!important}
.p-main svg{width:24px;height:24px}
.p-main .i-play{display:none}
.p-main.paused .i-play{display:block}
.p-main.paused .i-pause{display:none}
.pmeta{flex:1;min-width:0}
.pmeta b{font-size:.8rem;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pseek{display:flex;align-items:center;gap:8px;font-size:.7rem;color:var(--muted)}
.pseek input{flex:1;accent-color:var(--accent);height:18px}

/* toast */
.toast{position:fixed;left:50%;transform:translate(-50%,20px);bottom:calc(118px + env(safe-area-inset-bottom));
  background:var(--fg);color:var(--bg);padding:9px 16px;border-radius:99px;font-size:.83rem;opacity:0;
  pointer-events:none;transition:.25s;z-index:50;white-space:nowrap;max-width:90vw;overflow:hidden;text-overflow:ellipsis}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width:420px){ :root{--ar:1.75rem} }