/* =============================================================
   The Islamic Shop — app.css v6 (clean final)
============================================================= */
:root {
  --p:#1B4D3E; --p2:#256B52; --p3:#35916E; --p-pale:#EAF2EE;
  --gold:#B8912A; --gold-l:#D4AE52; --gold-xl:#EDD07A; --gold-pale:#FBF5E3;
  --cream:#F9F5EE; --cream2:#F0E9D8; --cream3:#E2D5BE;
  --ink:#1A150E; --ink2:#3B2F1E; --ink3:#7A6A52; --ink4:#A8977E;
  --white:#FFFFFF;
  --sh-s:0 1px 3px rgba(26,21,14,.06),0 1px 8px rgba(26,21,14,.04);
  --sh-m:0 4px 16px rgba(26,21,14,.09),0 1px 4px rgba(26,21,14,.05);
  --sh-l:0 12px 40px rgba(26,21,14,.13),0 4px 12px rgba(26,21,14,.07);
  --r:14px; --rsm:9px; --rlg:20px;
  --fd:'Cinzel',serif; --fa:'Lateef',serif; --fb:'Raleway',sans-serif;
  --sb:260px; --nav-h:64px; --tab-h:62px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
body{font-family:var(--fb);background:var(--cream);color:var(--ink);min-height:100vh;overflow-x:hidden;font-size:15px;line-height:1.65}
img{max-width:100%;display:block}
button{cursor:pointer;font-family:var(--fb);border:none;background:none}
a{text-decoration:none;color:inherit}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--cream)}
::-webkit-scrollbar-thumb{background:var(--cream3);border-radius:5px}
body.dark{--cream:#141210;--cream2:#1C1914;--cream3:#2C2518;--white:#1E1A14;--ink:#F0EAD8;--ink2:#D4C8B0;--ink3:#9A8A70;--ink4:#6A5A42}

/* ── ALL SVG ICONS — constrained sizes ────────────────── */
svg { overflow: hidden; vertical-align: middle; width: 16px; height: 16px; flex-shrink: 0; }

/* Icon containers control size — SVG fills them */
.sb-ico { width:30px; height:30px; border-radius:8px; background:rgba(255,255,255,.07); display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.sb-ico svg { width:15px !important; height:15px !important; display:block }
.sb-logo-mark { width:44px; height:44px; background:var(--gold); border-radius:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.sb-logo-mark svg { width:26px !important; height:26px !important; display:block }
.tab-icon { display:flex; align-items:center; justify-content:center; width:24px; height:24px }
.tab-icon svg { width:22px !important; height:22px !important; display:block }
.mc-icon { width:54px; height:54px; border-radius:15px; display:flex; align-items:center; justify-content:center; margin:0 auto 12px }
.mc-icon svg { width:26px !important; height:26px !important; display:block }
.feat-ico { width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; margin-bottom:10px }
.feat-ico svg { width:20px !important; height:20px !important; display:block }
.qnav-ico { width:50px; height:50px; border-radius:14px; display:flex; align-items:center; justify-content:center }
.qnav-ico svg { width:24px !important; height:24px !important; display:block }
.audio-play { width:32px; height:32px; border-radius:50%; background:var(--p); display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.audio-play svg { width:14px !important; height:14px !important; display:block; color:#fff }
.mini-play-btn { width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; cursor:pointer }
.mini-play-btn svg { width:17px !important; height:17px !important; display:block; color:#fff }
.video-play-btn { width:52px; height:52px; border-radius:50%; background:rgba(184,145,42,.92); display:flex; align-items:center; justify-content:center; position:absolute; box-shadow:0 4px 20px rgba(0,0,0,.3) }
.video-play-btn svg { width:22px !important; height:22px !important; display:block; color:#fff }
.select-row-ico { width:36px; height:36px; border-radius:9px; background:var(--cream2); display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.select-row-ico svg { width:17px !important; height:17px !important; display:block; color:var(--p) }
.fatawa-cat-ico { width:40px; height:40px; border-radius:11px; background:#F0ECFF; display:flex; align-items:center; justify-content:center; margin:0 auto 8px; color:#5B4B8A }
.fatawa-cat-ico svg { width:20px !important; height:20px !important; display:block }
.reader-back svg { width:18px !important; height:18px !important; display:block }
.ph-back svg { width:18px !important; height:18px !important; display:block }
.daily-lbl svg { width:13px !important; height:13px !important; display:inline-block }
.daily-act svg { width:12px !important; height:12px !important; display:inline-block }
.hadith-src svg { width:14px !important; height:14px !important; display:inline-block }
.nav-btn svg { width:18px !important; height:18px !important; display:block; color:rgba(245,237,216,.85) }
.dt-btn svg { width:14px !important; height:14px !important; display:block }
.sb-search svg { width:14px !important; height:14px !important; display:block; flex-shrink:0 }
.search-bar svg { width:17px !important; height:17px !important; flex-shrink:0; display:block; color:var(--ink4) }
.sg-label svg { width:14px !important; height:14px !important; display:inline-block }
.video-meta svg { width:12px !important; height:12px !important; display:inline-block }
.empty-ico svg { width:28px !important; height:28px !important; display:block }
.quick-chip svg { width:14px !important; height:14px !important; display:inline-block; flex-shrink:0 }
.btn-full svg { width:16px !important; height:16px !important; display:inline-block; vertical-align:middle }
.hadith-foot a svg { width:12px !important; height:12px !important; display:inline-block }
.coll-card svg { width:14px !important; height:14px !important }
.qr-vaction svg { width:11px !important; height:11px !important }
.qr-top-btn svg { width:18px !important; height:18px !important; display:block }
.select-row > svg:last-child { width:16px !important; height:16px !important; flex-shrink:0; color:var(--ink4) }

/* ════════════════════════════════════════════════════════
   MOBILE LAYOUT (default)
════════════════════════════════════════════════════════ */
#sidebar        { display:none }
#desktop-topbar { display:none }
#top-nav        { display:flex }
#tab-bar        { display:flex }
#app { padding-top:var(--nav-h); padding-bottom:calc(var(--tab-h) + 10px); min-height:100vh }

/* ════════════════════════════════════════════════════════
   DESKTOP LAYOUT ≥960px
════════════════════════════════════════════════════════ */
@media(min-width:960px) {
  body { background:var(--cream2) }
  #top-nav { display:none !important }
  #tab-bar { display:none !important }
  #sidebar { display:flex !important; flex-direction:column; position:fixed; top:0; left:0; bottom:0; width:var(--sb); background:var(--p); z-index:200; overflow-y:auto }
  #sidebar::-webkit-scrollbar { width:3px }
  #sidebar::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1) }
  #desktop-topbar { display:flex !important; position:sticky; top:0; z-index:100; height:58px; width:100%; background:var(--white); border-bottom:1px solid var(--cream3); align-items:center; padding:0 36px; gap:16px; box-shadow:var(--sh-s) }
  /* Hide topbar on home page */
  #page-home.active + * #desktop-topbar { display:none !important }
  #app { margin-left:var(--sb); padding-top:0; padding-bottom:0; min-height:100vh }
  .page-header { display:none !important }
  .sub-tabs { top:58px !important }
  .content-area { padding:28px 36px }
  .section-label { padding:22px 36px 12px }
  .main-sections { padding:0 36px; margin:24px 0; gap:16px }
  .quick-scroll { padding:0 36px 4px }
  .daily-card { margin:4px 36px 8px }
  .features-grid { padding:0 36px; gap:16px; grid-template-columns:repeat(4,1fr) }
  .feat-card { padding:20px }
  .hero { padding:52px 52px 60px; border-radius:0 }
  .hero-arabic { font-size:34px }
  .resource-grid { grid-template-columns:repeat(4,1fr) !important; gap:16px }
  .coll-grid { grid-template-columns:repeat(3,1fr) }
  .qnav-grid { grid-template-columns:repeat(4,1fr) }
  .fatawa-cat-grid { grid-template-columns:repeat(4,1fr) }
  .video-grid { display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:16px }
  .hadith-list { gap:16px }
  .surah-list { gap:8px }
  .reader-overlay { left:var(--sb) }
  .search-modal { max-width:580px }
}

/* Geo pattern */
.geo-bg { background-color:var(--p); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%23C9A84C' stroke-width='0.5' opacity='0.14'%3E%3Cpolygon points='40,2 78,40 40,78 2,40'/%3E%3Cpolygon points='40,16 64,40 40,64 16,40'/%3E%3Ccircle cx='40' cy='40' r='12'/%3E%3C/g%3E%3C/svg%3E") }

/* ── Sidebar internals ─────────────────────────────────── */
.sb-logo { padding:26px 20px 20px; border-bottom:1px solid rgba(255,255,255,.07); display:flex; align-items:center; gap:14px }
.sb-logo-text { flex:1 }
.sb-site-name { font-family:var(--fd); font-size:14px; font-weight:600; color:#F5EDD8; letter-spacing:.4px; line-height:1.3 }
.sb-site-sub { font-size:9px; color:rgba(245,237,216,.35); letter-spacing:2px; text-transform:uppercase; margin-top:2px }
.sb-nav { padding:12px 10px; flex:1 }
.sb-label { font-size:9px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.28); padding:14px 12px 5px }
.sb-item { display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:var(--rsm); color:rgba(255,255,255,.58); font-size:13px; font-weight:500; cursor:pointer; transition:background .14s,color .14s; margin-bottom:2px; border:1px solid transparent }
.sb-item:hover { background:rgba(255,255,255,.07); color:rgba(255,255,255,.9) }
.sb-item.active { background:rgba(184,145,42,.18); color:var(--gold-l); border-color:rgba(184,145,42,.22) }
.sb-item.active .sb-ico { background:rgba(184,145,42,.22) }
.sb-foot { padding:14px 10px 22px; border-top:1px solid rgba(255,255,255,.07) }
.sb-search { display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border-radius:var(--rsm); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.45); font-size:12px; cursor:pointer; transition:background .14s }
.sb-search:hover { background:rgba(255,255,255,.1); color:rgba(255,255,255,.8) }
.sb-kbd { margin-left:auto; background:rgba(255,255,255,.08); border-radius:4px; padding:2px 6px; font-size:10px; color:rgba(255,255,255,.3) }

/* ── Desktop topbar ────────────────────────────────────── */
.dt-crumb { flex:1; font-size:13px; color:var(--ink3) }
.dt-crumb strong { color:var(--ink); font-weight:600 }
.dt-acts { display:flex; align-items:center; gap:8px }
.dt-btn { display:flex; align-items:center; gap:7px; padding:7px 14px; border-radius:var(--rsm); font-size:12px; font-weight:600; cursor:pointer; border:1px solid var(--cream3); color:var(--ink2); background:var(--white); transition:background .14s }
.dt-btn:hover { background:var(--cream) }
.dt-btn.em { background:var(--p); color:#fff; border-color:var(--p) }
.dt-btn.em:hover { opacity:.88 }

/* ── Mobile nav ────────────────────────────────────────── */
#top-nav { position:fixed; top:0; left:0; right:0; z-index:100; height:var(--nav-h); background:var(--p); justify-content:space-between; align-items:center; padding:0 16px; box-shadow:0 2px 20px rgba(0,0,0,.18) }
.nav-logo { display:flex; align-items:center; gap:10px }
.nav-logo-icon { width:38px; height:38px; background:var(--gold); border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.nav-logo-icon svg { width:22px !important; height:22px !important; display:block }
.nav-logo-text { font-family:var(--fd); font-size:15px; color:#F5EDD8; letter-spacing:.3px; line-height:1.2 }
.nav-logo-sub { font-size:9px; color:rgba(245,237,216,.4); letter-spacing:2px; text-transform:uppercase }
.nav-acts { display:flex; align-items:center; gap:7px }
.nav-btn { width:36px; height:36px; border-radius:10px; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; transition:background .2s }
.nav-btn:hover { background:rgba(255,255,255,.18) }
.nav-admin { background:var(--gold); color:var(--p); font-size:11px; font-weight:700; padding:0 12px; height:32px; border-radius:20px; display:flex; align-items:center; gap:5px; font-family:var(--fb) }

/* ── Tab bar ───────────────────────────────────────────── */
#tab-bar { position:fixed; bottom:0; left:0; right:0; z-index:100; height:var(--tab-h); background:var(--white); border-top:1px solid var(--cream3); box-shadow:0 -4px 24px rgba(0,0,0,.07); overflow-x:auto; scrollbar-width:none }
#tab-bar::-webkit-scrollbar { display:none }
.tab-item { flex:1; min-width:52px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:8px 4px; color:var(--ink4); font-size:9px; font-weight:600; letter-spacing:.3px; text-transform:uppercase; cursor:pointer; transition:color .2s; position:relative }
.tab-item.active { color:var(--p) }
.tab-item.active::before { content:''; position:absolute; top:0; left:22%; right:22%; height:2px; background:var(--gold); border-radius:0 0 3px 3px }

/* ── Pages ─────────────────────────────────────────────── */
.page { display:none; animation:fadeUp .22s ease }
.page.active { display:block }
@keyframes fadeUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

/* ── Hero ──────────────────────────────────────────────── */
.hero { background:var(--p); padding:32px 20px 38px; text-align:center; position:relative; overflow:hidden }
.hero-arabic { font-family:var(--fa); font-size:28px; color:rgba(245,237,216,.95); margin-bottom:6px; line-height:1.8 }
.hero-rule { width:56px; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); margin:10px auto }
.hero-title { font-family:var(--fd); font-size:11px; color:rgba(245,237,216,.45); letter-spacing:3px; text-transform:uppercase; margin-bottom:12px }
.hero-hadith { font-size:13px; color:rgba(255,255,255,.62); font-style:italic; max-width:300px; margin:0 auto; line-height:1.65 }
.hero-hadith span { display:block; font-size:11px; margin-top:5px; color:rgba(212,174,82,.65); font-style:normal }

/* ── Section label ─────────────────────────────────────── */
.section-label { font-size:10px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase; color:var(--ink4); padding:18px 16px 10px; display:flex; align-items:center; gap:10px }
.section-label::after { content:''; flex:1; height:1px; background:var(--cream3) }

/* ── Main cards ────────────────────────────────────────── */
.main-sections { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:0 16px 4px }
.main-card { background:var(--white); border-radius:var(--rlg); padding:20px 14px; text-align:center; border:1px solid var(--cream3); box-shadow:var(--sh-s); cursor:pointer; transition:transform .18s,box-shadow .18s; position:relative; overflow:hidden }
.main-card:hover { transform:translateY(-3px); box-shadow:var(--sh-m) }
.main-card:active { transform:scale(.97) }
.mc-bar { position:absolute; bottom:0; left:0; right:0; height:3px; border-radius:0 0 var(--rlg) var(--rlg) }
.main-card.quran .mc-bar { background:linear-gradient(90deg,var(--p),var(--p3)) }
.main-card.sunnah .mc-bar { background:linear-gradient(90deg,var(--gold),var(--gold-xl)) }
.main-card.fatawa .mc-bar { background:linear-gradient(90deg,#5B4B8A,#9B7FD4) }
.main-card.quran .mc-icon { background:var(--p-pale); color:var(--p) }
.main-card.sunnah .mc-icon { background:var(--gold-pale); color:var(--gold) }
.main-card.fatawa .mc-icon { background:#F0ECFF; color:#5B4B8A }
.mc-title { font-family:var(--fd); font-size:12px; font-weight:600; color:var(--ink); letter-spacing:.3px }
.mc-count { font-size:10px; color:var(--ink4); margin-top:3px }

/* ── Quick chips ───────────────────────────────────────── */
.quick-scroll { display:flex; gap:8px; padding:0 16px 4px; overflow-x:auto; scrollbar-width:none }
.quick-scroll::-webkit-scrollbar { display:none }
.quick-chip { flex-shrink:0; background:var(--white); border:1px solid var(--cream3); border-radius:30px; padding:8px 14px; font-size:12px; font-weight:600; color:var(--ink2); display:flex; align-items:center; gap:7px; white-space:nowrap; cursor:pointer; transition:background .16s,color .16s,border-color .16s }
.quick-chip:hover,.quick-chip.active { background:var(--p); color:#fff; border-color:var(--p) }

/* ── Daily Ayah ────────────────────────────────────────── */
.daily-card { margin:4px 16px 8px; background:var(--p); border-radius:var(--rlg); padding:22px 20px; position:relative; overflow:hidden; box-shadow:var(--sh-m) }
.daily-card::before,.daily-card::after { content:''; position:absolute; border-radius:50%; border:1px solid rgba(212,174,82,.12) }
.daily-card::before { width:160px; height:160px; bottom:-40px; right:-40px }
.daily-card::after { width:100px; height:100px; bottom:-10px; right:-10px }
.daily-lbl { font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--gold-l); font-weight:700; margin-bottom:12px; display:flex; align-items:center; gap:7px }
.daily-arabic { font-family:var(--fa); font-size:22px; color:rgba(245,237,216,.95); line-height:1.8; text-align:right; direction:rtl; margin-bottom:10px; border-bottom:1px solid rgba(255,255,255,.08); padding-bottom:12px }
.daily-trans { font-size:13px; color:rgba(255,255,255,.68); font-style:italic; line-height:1.65; margin-bottom:8px }
.daily-ref { font-size:10px; color:var(--gold-l); font-weight:600; letter-spacing:.5px }
.daily-acts { display:flex; gap:8px; margin-top:14px }
.daily-act { flex:1; padding:9px 6px; border-radius:var(--rsm); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); color:rgba(245,237,216,.8); font-size:11px; font-weight:600; text-align:center; cursor:pointer; transition:background .16s; display:flex; align-items:center; justify-content:center; gap:5px }
.daily-act:hover { background:rgba(255,255,255,.16) }

/* ── Features ──────────────────────────────────────────── */
.features-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:0 16px }
.feat-card { background:var(--white); border-radius:var(--r); padding:16px; border:1px solid var(--cream3); box-shadow:var(--sh-s); cursor:pointer; transition:transform .16s,box-shadow .16s }
.feat-card:hover { transform:translateY(-2px); box-shadow:var(--sh-m) }
.feat-ico.em { background:var(--p-pale); color:var(--p) }
.feat-ico.gd { background:var(--gold-pale); color:var(--gold) }
.feat-ico.pu { background:#F0ECFF; color:#5B4B8A }
.feat-ico.bl { background:#EBF3FF; color:#2962C4 }
.feat-title { font-size:13px; font-weight:700; color:var(--ink); margin-bottom:3px }
.feat-desc { font-size:11px; color:var(--ink3); line-height:1.45 }

/* ── Page header (mobile) ──────────────────────────────── */
.page-header { background:var(--p); padding:18px 16px 0 }
.page-header::after { content:''; display:block; height:18px; background:var(--cream); border-radius:18px 18px 0 0; margin-top:16px }
.ph-back { width:34px; height:34px; border-radius:9px; background:rgba(255,255,255,.13); display:flex; align-items:center; justify-content:center; color:#fff; cursor:pointer; margin-bottom:10px }
.ph-arabic { font-family:var(--fa); font-size:18px; color:rgba(245,237,216,.8); line-height:1.8 }
.ph-title { font-family:var(--fd); font-size:20px; font-weight:700; color:#fff }
.ph-sub { font-size:11px; color:rgba(255,255,255,.4); margin-top:2px }

/* ── Sub-tabs ──────────────────────────────────────────── */
.sub-tabs { display:flex; overflow-x:auto; scrollbar-width:none; background:var(--white); border-bottom:1px solid var(--cream3); padding:0 8px; position:sticky; top:var(--nav-h); z-index:10 }
.sub-tabs::-webkit-scrollbar { display:none }
.sub-tab { flex-shrink:0; padding:12px 14px; font-size:11px; font-weight:700; letter-spacing:.4px; color:var(--ink4); white-space:nowrap; cursor:pointer; position:relative; transition:color .16s }
.sub-tab.active { color:var(--p) }
.sub-tab.active::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--gold); border-radius:2px 2px 0 0 }

/* ── Content ───────────────────────────────────────────── */
.content-area { padding:16px }
.sub-section { display:none }
.sub-section.active { display:block }

/* ── Search bar ────────────────────────────────────────── */
.search-bar { display:flex; align-items:center; background:var(--white); border:1px solid var(--cream3); border-radius:30px; padding:10px 16px; gap:10px; box-shadow:var(--sh-s); margin-bottom:14px }
.search-bar input { flex:1; border:none; outline:none; font-family:var(--fb); font-size:14px; color:var(--ink); background:none }
.search-bar input::placeholder { color:var(--ink4) }

/* ── Surah list ────────────────────────────────────────── */
.surah-list { display:flex; flex-direction:column; gap:7px }
.surah-item { background:var(--white); border-radius:var(--r); padding:12px 14px; display:flex; align-items:center; gap:13px; border:1px solid var(--cream3); box-shadow:var(--sh-s); cursor:pointer; transition:box-shadow .15s }
.surah-item:hover { box-shadow:var(--sh-m) }
.surah-num { width:36px; height:36px; flex-shrink:0; background:var(--p-pale); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--fd); font-size:10px; font-weight:700; color:var(--p) }
.surah-info { flex:1 }
.surah-name { font-weight:700; font-size:14px; color:var(--ink) }
.surah-meta { font-size:11px; color:var(--ink4); margin-top:1px }
.surah-arabic { font-family:var(--fa); font-size:20px; color:var(--p) }

/* ── Collection cards ──────────────────────────────────── */
.coll-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px }
.coll-card { background:var(--white); border-radius:var(--r); padding:16px; border:1px solid var(--cream3); box-shadow:var(--sh-s); cursor:pointer; transition:box-shadow .15s,transform .15s; display:flex; flex-direction:column; gap:6px }
.coll-card:hover { box-shadow:var(--sh-m); transform:translateY(-2px) }
.coll-num { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-family:var(--fd); font-size:11px; font-weight:700; margin-bottom:4px }
.coll-card.sahih { border-left:3px solid var(--p) }
.coll-card.other { border-left:3px solid var(--gold) }
.coll-card.select { border-left:3px solid #9B7FD4 }
.coll-card.sahih .coll-num { background:var(--p-pale); color:var(--p) }
.coll-card.other .coll-num { background:var(--gold-pale); color:var(--gold) }
.coll-card.select .coll-num { background:#F0ECFF; color:#5B4B8A }
.coll-ar { font-family:var(--fa); font-size:17px; color:var(--ink); direction:rtl; text-align:right; line-height:1.6 }
.coll-en { font-size:12px; font-weight:700; color:var(--ink2); line-height:1.3 }
.coll-count { font-size:10px; color:var(--ink4); margin-top:2px }
.coll-badge { display:inline-block; padding:2px 8px; border-radius:20px; font-size:9px; font-weight:700; letter-spacing:.5px; align-self:flex-start }
.badge-sahih { background:var(--p-pale); color:var(--p) }
.badge-other { background:var(--gold-pale); color:var(--gold) }
.badge-select { background:#F0ECFF; color:#5B4B8A }

/* ── Quran nav cards ───────────────────────────────────── */
.qnav-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px }
.qnav-card { background:var(--white); border-radius:var(--r); padding:18px 14px; border:1px solid var(--cream3); box-shadow:var(--sh-s); cursor:pointer; transition:box-shadow .15s,transform .15s; text-align:center }
.qnav-card:hover { box-shadow:var(--sh-m); transform:translateY(-2px) }
.qnav-title { font-size:13px; font-weight:700; color:var(--ink); margin-bottom:3px; margin-top:10px }
.qnav-sub { font-size:10px; color:var(--ink4); line-height:1.4 }

/* ── Select row ────────────────────────────────────────── */
.select-row { background:var(--white); border:1.5px solid var(--cream3); border-radius:var(--r); padding:14px 16px; margin-bottom:8px; display:flex; align-items:center; gap:12px; cursor:pointer; transition:border-color .15s,background .15s }
.select-row:hover { border-color:var(--p2); background:var(--p-pale) }
.select-row.picked { border-color:var(--p); background:var(--p-pale) }
.select-row-info { flex:1 }
.select-row-title { font-size:13px; font-weight:600; color:var(--ink) }
.select-row-sub { font-size:11px; color:var(--ink4); margin-top:1px }
.select-row-check { width:20px; height:20px; border-radius:50%; border:2px solid var(--cream3); flex-shrink:0; transition:all .14s }
.select-row.picked .select-row-check { background:var(--p); border-color:var(--p); display:flex; align-items:center; justify-content:center }
.select-row.picked .select-row-check::after { content:''; width:8px; height:8px; border-radius:50%; background:#fff }

/* ── Hadith ────────────────────────────────────────────── */
.hadith-list { display:flex; flex-direction:column; gap:12px }
.hadith-card { background:var(--white); border-radius:var(--r); padding:18px; box-shadow:var(--sh-s); border:1px solid var(--cream3); border-left:3px solid var(--gold) }
.hadith-src { font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--gold); margin-bottom:10px; display:flex; align-items:center; gap:6px }
.hadith-ar { font-family:var(--fa); font-size:20px; color:var(--ink); direction:rtl; text-align:right; line-height:1.8; margin-bottom:12px; border-bottom:1px solid var(--cream3); padding-bottom:12px }
.hadith-txt { font-size:13px; color:var(--ink2); line-height:1.75 }
.hadith-foot { margin-top:12px; padding-top:10px; border-top:1px solid var(--cream3); font-size:11px; color:var(--ink4); display:flex; align-items:center; justify-content:space-between }
.hgrade { display:inline-block; padding:2px 9px; border-radius:20px; font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:capitalize }
.hgrade.sahih { background:var(--p-pale); color:var(--p) }
.hgrade.hasan { background:var(--gold-pale); color:var(--gold) }
.hgrade.daif,.hgrade.weak { background:#FFECEC; color:#A32020 }
.hgrade.unknown { background:var(--cream); color:var(--ink4) }

/* ── Resources ─────────────────────────────────────────── */
.resource-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px }
.resource-card { background:var(--white); border-radius:var(--r); padding:14px; border:1px solid var(--cream3); box-shadow:var(--sh-s); cursor:pointer; transition:transform .16s,box-shadow .16s }
.resource-card:hover { transform:translateY(-2px); box-shadow:var(--sh-m) }
.res-cover { height:140px; border-radius:var(--rsm); background:linear-gradient(135deg,var(--p),var(--p2)); display:flex; align-items:center; justify-content:center; margin-bottom:10px; overflow:hidden; position:relative }
.res-cover img { width:100%; height:100%; object-fit:cover; display:block }
.res-cover-fallback { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:34px }
.res-title { font-size:12px; font-weight:700; color:var(--ink); line-height:1.4; margin-bottom:3px }
.res-author { font-size:10px; color:var(--ink4) }
.res-type { display:inline-block; margin-top:6px; padding:2px 8px; border-radius:20px; font-size:9px; font-weight:700; background:var(--p-pale); color:var(--p) }

/* ── Audio ─────────────────────────────────────────────── */
.audio-list { display:flex; flex-direction:column; gap:7px }
.audio-item { background:var(--white); border-radius:var(--r); padding:12px 14px; display:flex; align-items:center; gap:12px; border:1px solid var(--cream3); box-shadow:var(--sh-s); cursor:pointer; transition:box-shadow .15s }
.audio-item:hover { box-shadow:var(--sh-m) }
.audio-num { width:32px; height:32px; flex-shrink:0; border-radius:50%; background:var(--p-pale); display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--p); font-weight:700 }
.audio-info { flex:1 }
.audio-title { font-size:13px; font-weight:700; color:var(--ink) }
.audio-sub { font-size:11px; color:var(--ink4); margin-top:1px }
.mini-player { background:var(--p); border-radius:var(--r); padding:13px 16px; margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; box-shadow:var(--sh-m) }

/* ── Video ─────────────────────────────────────────────── */
.video-grid { display:flex; flex-direction:column; gap:12px }
.video-card { background:var(--white); border-radius:var(--rlg); overflow:hidden; border:1px solid var(--cream3); box-shadow:var(--sh-s); cursor:pointer; transition:box-shadow .16s,transform .16s }
.video-card:hover { box-shadow:var(--sh-m); transform:translateY(-2px) }
.video-thumb { height:180px; background:var(--p); position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden }
.video-thumb img { width:100%; height:100%; object-fit:cover; opacity:.8 }
.video-card:hover .video-play-btn { transform:scale(1.08) }
.video-info { padding:14px }
.video-title { font-size:14px; font-weight:700; color:var(--ink); line-height:1.4; margin-bottom:5px }
.video-meta { font-size:11px; color:var(--ink4); display:flex; align-items:center; gap:5px }

/* ── Fatawa ────────────────────────────────────────────── */
.fatawa-hero { background:linear-gradient(135deg,#2D1F5E,#5B4B8A); border-radius:var(--rlg); padding:24px 20px; text-align:center; margin-bottom:16px; position:relative; overflow:hidden }
.fatawa-cat-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px }
.fatawa-cat { background:var(--white); border-radius:var(--r); padding:16px 12px; border:1px solid var(--cream3); box-shadow:var(--sh-s); cursor:pointer; transition:box-shadow .15s,transform .15s; text-align:center; text-decoration:none; display:block }
.fatawa-cat:hover { box-shadow:var(--sh-m); transform:translateY(-2px) }
.fatawa-cat-title { font-size:12px; font-weight:700; color:var(--ink) }

/* ── Understand ────────────────────────────────────────── */
.understand-box { background:var(--white); border-radius:var(--r); padding:22px; border:1px solid var(--cream3); box-shadow:var(--sh-s) }

/* ── Reader overlay ────────────────────────────────────── */
.reader-overlay { position:fixed; inset:0; z-index:200; background:var(--cream); display:flex; flex-direction:column; animation:slideUp .22s ease }
@keyframes slideUp { from{transform:translateY(100%)} to{transform:none} }
.reader-hd { background:var(--p); padding:14px 16px; display:flex; align-items:center; gap:12px; flex-shrink:0 }
.reader-back { width:34px; height:34px; border-radius:9px; background:rgba(255,255,255,.13); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; border:none }
.reader-title { flex:1; font-family:var(--fd); font-size:15px; color:#fff; font-weight:600 }
.reader-src { font-size:10px; color:rgba(255,255,255,.4) }
.reader-body { flex:1; overflow-y:auto; padding:16px }
.bismillah { font-family:var(--fa); font-size:24px; color:var(--p); text-align:center; direction:rtl; padding:16px 0 24px; line-height:1.8 }
.verse-block { margin-bottom:22px; padding-bottom:22px; border-bottom:1px solid var(--cream3) }
.verse-ar { font-family:var(--fa); font-size:26px; color:var(--ink); direction:rtl; text-align:right; line-height:2; margin-bottom:10px }
.verse-numcircle { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:var(--p-pale); color:var(--p); font-family:var(--fd); font-size:9px; font-weight:700; vertical-align:middle; margin-right:4px }
.verse-tr { font-size:14px; color:var(--ink2); line-height:1.75 }
.verse-ref { font-size:11px; color:var(--ink4); margin-top:6px }

/* ── Search overlay ────────────────────────────────────── */
#search-overlay { display:none; position:fixed; inset:0; z-index:300; background:rgba(0,0,0,.45); backdrop-filter:blur(8px); align-items:flex-start; padding-top:60px; justify-content:center }
#search-overlay.open { display:flex }
.search-modal { background:var(--white); width:100%; max-width:520px; max-height:80vh; overflow-y:auto; border-radius:var(--rlg); box-shadow:var(--sh-l); margin:0 14px }
.search-modal-bar { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--cream3); position:sticky; top:0; background:var(--white) }
.search-modal-bar input { flex:1; border:none; outline:none; font-family:var(--fb); font-size:15px; color:var(--ink); background:none }
#search-close { width:30px; height:30px; border-radius:50%; background:var(--cream); color:var(--ink4); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; border:none }
#search-results { padding:8px 0 }
.sg-label { font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink4); padding:10px 16px 5px; display:flex; align-items:center; gap:6px }
.sr-item { padding:12px 16px; cursor:pointer; border-bottom:1px solid var(--cream3); transition:background .14s }
.sr-item:hover { background:var(--cream) }

/* ── Settings ──────────────────────────────────────────── */
.stg-group { margin-bottom:22px }
.stg-label { font-size:10px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase; color:var(--ink4); margin-bottom:10px; display:flex; align-items:center; gap:8px }
.stg-label::after { content:''; flex:1; height:1px; background:var(--cream3) }
.stg-row { display:flex; align-items:center; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--cream3); font-size:13px; color:var(--ink2) }
.toggle { width:42px; height:24px; border-radius:12px; background:var(--cream3); position:relative; cursor:pointer; transition:background .2s; flex-shrink:0 }
.toggle.on { background:var(--p) }
.toggle::after { content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.15); transition:transform .2s }
.toggle.on::after { transform:translateX(18px) }

/* ── Utility ───────────────────────────────────────────── */
.btn-full { display:block; width:100%; padding:12px; border-radius:var(--rsm); background:var(--p); color:#fff; font-family:var(--fb); font-size:13px; font-weight:700; text-align:center; margin-top:14px; cursor:pointer; border:none; transition:opacity .2s }
.btn-full:hover { opacity:.88 }
.loading { display:flex; align-items:center; justify-content:center; padding:40px; flex-direction:column; gap:12px }
.spinner { width:28px; height:28px; border-radius:50%; border:2.5px solid var(--cream3); border-top-color:var(--p); animation:spin .7s linear infinite }
@keyframes spin { to{transform:rotate(360deg)} }
.loading-text { font-size:12px; color:var(--ink4); font-weight:500 }
.empty-state { text-align:center; padding:44px 20px }
.empty-ico { width:56px; height:56px; background:var(--cream2); border-radius:14px; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; color:var(--ink4) }
.empty-text { font-size:13px; color:var(--ink4); line-height:1.6; max-width:240px; margin:0 auto }
#toast { position:fixed; bottom:calc(var(--tab-h) + 14px); left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink); color:#fff; padding:10px 20px; border-radius:30px; font-size:13px; font-weight:600; opacity:0; transition:opacity .28s,transform .28s; pointer-events:none; z-index:999; white-space:nowrap; box-shadow:var(--sh-m) }
#toast.show { opacity:1; transform:translateX(-50%) translateY(0) }
@media(min-width:960px) { #toast { bottom:24px } }
@supports(padding-bottom:env(safe-area-inset-bottom)) {
  #tab-bar { padding-bottom:env(safe-area-inset-bottom); height:calc(var(--tab-h) + env(safe-area-inset-bottom)) }
  @media(max-width:959px) { #app { padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom) + 10px) } }
}

/* ════════════════════════════════════════════════════════
   QURAN READER
════════════════════════════════════════════════════════ */
.qr-settings-bar { background:var(--white); border-bottom:1px solid var(--cream3); padding:10px 16px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; flex-shrink:0 }
@media(min-width:960px) { .qr-settings-bar { padding:10px 28px } }
.qr-label { font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--ink4); white-space:nowrap }
.qr-select { padding:6px 10px; border:1px solid var(--cream3); border-radius:var(--rsm); font-family:var(--fb); font-size:12px; color:var(--ink2); background:var(--cream); outline:none; cursor:pointer; max-width:180px; transition:border-color .15s }
.qr-select:focus { border-color:var(--p) }
.qr-font-ctrl { display:flex; align-items:center; gap:6px; background:var(--cream); border:1px solid var(--cream3); border-radius:var(--rsm); padding:4px 8px }
.qr-font-btn { width:26px; height:26px; border-radius:6px; background:var(--white); border:1px solid var(--cream3); font-size:14px; font-weight:700; color:var(--ink2); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s; line-height:1; flex-shrink:0 }
.qr-font-btn:hover { background:var(--p); color:#fff; border-color:var(--p) }
.qr-font-size-label { font-size:11px; font-weight:600; color:var(--ink3); min-width:28px; text-align:center }
.qr-toggle-btn { padding:5px 12px; border-radius:20px; font-size:11px; font-weight:600; border:1px solid var(--cream3); background:var(--white); color:var(--ink3); cursor:pointer; transition:all .15s; white-space:nowrap }
.qr-toggle-btn.on { background:var(--p); color:#fff; border-color:var(--p) }
.qr-divider { width:1px; height:20px; background:var(--cream3); flex-shrink:0 }
.qr-body { flex:1; overflow-y:auto; padding:24px 20px 40px; scroll-behavior:smooth }
@media(min-width:960px) { .qr-body { padding:32px 80px 60px; max-width:860px; margin:0 auto } }
.qr-bismillah { font-family:var(--fa); font-size:32px; color:var(--p); text-align:center; direction:rtl; padding:20px 0 32px; line-height:2; opacity:.9 }
.qr-surah-header { text-align:center; padding-bottom:24px; margin-bottom:24px; border-bottom:1px solid var(--cream3) }
.qr-surah-ar { font-family:var(--fa); font-size:28px; color:var(--p); line-height:1.6 }
.qr-surah-en { font-family:var(--fd); font-size:16px; color:var(--ink2); margin-top:4px }
.qr-surah-meta { font-size:11px; color:var(--ink4); margin-top:4px; letter-spacing:.5px }
.qr-verse { display:flex; flex-direction:column; gap:0; padding:20px 8px; border-bottom:1px solid var(--cream2); border-radius:var(--rsm); margin:0 -8px; transition:background .15s }
.qr-verse:hover { background:rgba(27,77,62,.03) }
.qr-arabic { font-family:var(--fa); font-size:var(--qr-ar-size,28px); color:var(--ink); direction:rtl; text-align:right; line-height:2; margin-bottom:10px }
.qr-vnum { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:var(--p-pale); color:var(--p); font-family:var(--fd); font-size:9px; font-weight:700; vertical-align:middle; margin-left:8px; flex-shrink:0 }
.qr-translation { font-size:var(--qr-tr-size,14px); color:var(--ink2); line-height:1.75; padding-top:6px; border-top:1px solid var(--cream2) }
.qr-translation.rtl-tr { direction:rtl; text-align:right; font-family:var(--fa); font-size:var(--qr-ar-size,20px) }
.qr-tafsir { margin-top:10px; padding:12px 14px; background:linear-gradient(to right,rgba(27,77,62,.04),transparent); border-left:3px solid var(--p3); border-radius:0 var(--rsm) var(--rsm) 0; font-size:13px; color:var(--ink2); line-height:1.75; direction:rtl; text-align:right }
.qr-tafsir-label { font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--p); margin-bottom:8px; direction:ltr; text-align:left; display:block }
.qr-tafsir-loading { color:var(--ink4); font-style:italic; font-size:12px; direction:ltr; text-align:left }
.qr-verse-actions { display:flex; gap:6px; margin-top:8px; opacity:0; transition:opacity .15s }
.qr-verse:hover .qr-verse-actions { opacity:1 }
.qr-vaction { padding:4px 10px; border-radius:20px; font-size:10px; font-weight:600; border:1px solid var(--cream3); background:var(--white); color:var(--ink3); cursor:pointer; transition:all .14s; display:flex; align-items:center; gap:4px }
.qr-vaction:hover { background:var(--p); color:#fff; border-color:var(--p) }
.qr-top-btn { position:fixed; bottom:calc(var(--tab-h) + 20px); right:20px; width:44px; height:44px; border-radius:50%; background:var(--p); color:#fff; border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--sh-m); opacity:0; transition:opacity .3s; z-index:50 }
.qr-top-btn.visible { opacity:1 }
@media(min-width:960px) { .qr-top-btn { bottom:24px; right:32px } }
.qr-progress { position:fixed; top:0; left:0; height:3px; background:var(--gold); transition:width .2s; z-index:999; border-radius:0 3px 3px 0 }
@media(min-width:960px) { .qr-progress { left:var(--sb) } }

/* Reader overlay is full screen with flex column */
#quran-reader { display:flex; flex-direction:column }
#quran-reader .qr-settings-bar { flex-shrink:0 }
#quran-reader .qr-body { flex:1; overflow-y:auto }

/* ════════════════════════════════════════════════════════
   BOOK READER — Full screen, maximum reading area
════════════════════════════════════════════════════════ */
.book-reader-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: #1a1a1a;
  display: flex;
  flex-direction: column;
  animation: fadeUp .2s ease;
}
@media(min-width:960px) {
  .book-reader-overlay { left: var(--sb); }
}

/* Slim header — just back + title + external link */
.book-reader-hd {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: var(--p);
  flex-shrink: 0;
  height: 48px;
}
.book-reader-back {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,.13);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s;
}
.book-reader-back:hover { background: rgba(255,255,255,.22); }
.book-reader-back svg { width:16px !important; height:16px !important; display:block }
.book-reader-title {
  flex: 1;
  font-family: var(--fd);
  font-size: 13px;
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.book-reader-ext {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.7);
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.book-reader-ext:hover { background: var(--gold); color: var(--p); }
.book-reader-ext svg { width:14px !important; height:14px !important; display:block }

/* The iframe takes ALL remaining space */
.book-reader-frame {
  flex: 1;
  width: 100%;
  border: none;
  background: #fff;
  min-height: 0; /* critical for flex sizing */
}

/* Safe area on iPhone */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .book-reader-hd {
    padding-top: max(8px, env(safe-area-inset-top));
  }
}

/* ════════════════════════════════════════════════════════
   SITE FOOTER — Home page only
════════════════════════════════════════════════════════ */
.site-footer {
  text-align: center;
  padding: 28px 20px 24px;
  border-top: 1px solid var(--cream3);
  margin-top: 8px;
}
.sf-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  margin-bottom: 12px;
}
.sf-links a {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink3);
  text-decoration: none;
  transition: color .15s;
}
.sf-links a:hover { color: var(--p) }
.sf-copy {
  font-size: 11px;
  color: var(--ink4);
  margin-bottom: 4px;
}
.sf-sources {
  font-size: 10px;
  color: var(--ink4);
  opacity: .7;
}
@media(min-width:960px) {
  .site-footer { padding: 32px 36px 28px }
}

/* ════════════════════════════════════════════════════════
   GLOBAL AUDIO PLAYER — persistent bottom bar
════════════════════════════════════════════════════════ */
.gplayer {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(var(--tab-h) + 0px);
  background: var(--p);
  z-index: 150;
  padding: 10px 16px 12px;
  box-shadow: 0 -6px 24px rgba(0,0,0,.18);
  transform: translateY(120%);
  transition: transform .25s ease;
}
.gplayer.open { transform: translateY(0); }
@media(min-width:960px) {
  .gplayer { left: var(--sb); bottom: 0; padding: 10px 28px 12px; }
}

.gp-row1 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.gp-playbtn {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--gold);
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  color: var(--p);
  transition: opacity .15s;
}
.gp-playbtn:hover { opacity: .88; }
.gp-playbtn svg { width: 17px !important; height: 17px !important; display: block; }

.gp-info { flex: 1; min-width: 0; }
.gp-title {
  font-size: 13px; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gp-sub {
  font-size: 10px; color: rgba(255,255,255,.5); margin-top: 1px;
}

.gp-dl {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.75);
  flex-shrink: 0;
  transition: background .15s, color .15s;
  text-decoration: none;
}
.gp-dl:hover { background: var(--gold); color: var(--p); }
.gp-dl svg { width: 15px !important; height: 15px !important; display: block; }

.gp-close {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: none;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.6);
  flex-shrink: 0;
  cursor: pointer;
  transition: background .15s;
}
.gp-close:hover { background: rgba(255,255,255,.18); }
.gp-close svg { width: 13px !important; height: 13px !important; display: block; }

.gp-row2 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gp-time {
  font-size: 10px;
  color: rgba(255,255,255,.55);
  font-weight: 600;
  flex-shrink: 0;
  width: 32px;
  text-align: center;
}
.gp-seek {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 4px;
  background: rgba(255,255,255,.18);
  outline: none;
  cursor: pointer;
}
.gp-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.gp-seek::-moz-range-thumb {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--gold);
  border: none;
  cursor: pointer;
}

/* Push page content up slightly when player is open on mobile, so the last
   list item isn't hidden behind the player bar */
@media(max-width:959px) {
  body:has(.gplayer.open) #app { padding-bottom: calc(var(--tab-h) + 86px + 10px); }
}

/* ════════════════════════════════════════════════════════
   CATEGORY FILTER CHIPS — Books & Audios
════════════════════════════════════════════════════════ */
.cat-chip-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
  margin-bottom: 16px;
}
.cat-chip-row::-webkit-scrollbar { display: none; }
.cat-chip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink2);
  background: var(--white);
  border: 1px solid var(--cream3);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.cat-chip:hover { border-color: var(--p); }
.cat-chip.active {
  background: var(--p);
  color: #fff;
  border-color: var(--p);
}
.cat-chip-count {
  font-size: 10px;
  font-weight: 700;
  opacity: .65;
}