@font-face {
  font-family: 'Uthmanic Hafs';
  src: url('https://cdn.jsdelivr.net/gh/mustafa0x/qpc-fonts@master/UthmanicHafs1Ver18.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/gh/mustafa0x/qpc-fonts@master/UthmanicHafs1Ver18.woff') format('woff');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'KFGQPC Uthmanic Script HAFS';
  src: url('https://cdn.jsdelivr.net/gh/mustafa0x/qpc-fonts@master/KFGQPCUthmanicScriptHAFS.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/gh/mustafa0x/qpc-fonts@master/KFGQPCUthmanicScriptHAFS.woff') format('woff');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'me_quran';
  src: url('https://cdn.jsdelivr.net/npm/me-quran-font@1.0.0/fonts/me_quran.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/npm/me-quran-font@1.0.0/fonts/me_quran.woff') format('woff');
  font-weight: 400;
  font-display: swap;
}

:root {
  --primary: #0097b2;
  --primary-dark: #007a8f;

  --bg-light: #f8fafc;
  --bg-body: #f9fafb;
  --bg-card: #ffffff;

  --text-primary: #1e293b;
  --text-secondary: #64748b;

  --border: #e2e8f0;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.1);
  --shadow-md: 0 4px 6px rgba(0,0,0,.07);
  --shadow-lg: 0 10px 25px rgba(0,0,0,.1);

  --gradient-primary: linear-gradient(135deg, #0097b2 0%, #007a8f 100%);
  --gradient-card: linear-gradient(135deg, #ffffff, #eef6ff);

  --radius-sm: .5rem;
  --radius-md: .75rem;

  --transition-fast: .2s ease;
  --transition-base: .3s ease;

  --bg-primary: var(--bg-light);
  --bg-secondary: #e4eef8;
  --bg-card-rgb: 255,255,255;
  --bg-input: #eaf2fb;
  --text-muted: var(--text-secondary);
  --border-light: var(--border);
  --primary-hover: var(--primary-dark);
  --primary-light: rgba(0,151,178,.13);

  --font-arabic: 'Uthmanic Hafs','Amiri',serif;
  --font-latin:  'Poppins',sans-serif;
}
html.dark {
  --primary: #3d7a52;
  --primary-dark: #2f5e3f;
  --bg-light: #0f172a;
  --bg-body: #111827;
  --bg-card: #1e293b;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --border: #334155;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.3);
  --shadow-md: 0 4px 6px rgba(0,0,0,.4);
  --shadow-lg: 0 10px 25px rgba(0,0,0,.5);
  --gradient-primary: linear-gradient(135deg, #3d7a52 0%, #2f5e3f 100%);
  --gradient-card: linear-gradient(135deg, rgba(61,122,82,.1) 0%, rgba(95,196,141,.15) 100%);
  --bg-primary: var(--bg-body);
  --bg-secondary: #152019;
  --bg-card-rgb: 26,46,32;
  --bg-input: #1f3326;
  --text-muted: #5a8068;
  --border-light: var(--border);
  --primary-hover: #4d9a65;
  --primary-light: rgba(61,122,82,.18);
  --gradient-card: linear-gradient(135deg,#1a2e20,#1f3326);
}
html.parchment { --bg-primary:#f5ead6; --bg-secondary:#ede0c4; --bg-card:#faf3e2; --bg-card-rgb:250,243,226; --bg-input:#f0e6cc; --text-primary:#3b2d1a; --text-secondary:#7a5c38; --text-muted:#a8855a; --border:#c8a97a; --border-light:#ddc99a; --primary:#8b5e2a; --primary-hover:#6e4a1e; --primary-light:rgba(139,94,42,.15); --gradient-primary:linear-gradient(135deg,#a0712f,#7a4e1c); --gradient-card:linear-gradient(135deg,#faf3e2,#f3e8d0); --shadow-sm:0 1px 4px rgba(80,50,20,.12); --shadow-md:0 4px 16px rgba(80,50,20,.18); --shadow-lg:0 8px 32px rgba(80,50,20,.22); }
html.rose { --bg-primary:#FFF8FA; --bg-secondary:#FFEEF3; --bg-card:#FFFCFD; --bg-card-rgb:255,252,253; --bg-input:#FFF3F7; --text-primary:#2a0a14; --text-secondary:#8a3050; --text-muted:#b86880; --border:#f0c8d4; --border-light:#f8dce4; --primary:#c06080; --primary-hover:#a04060; --primary-light:rgba(192,96,128,.10); --gradient-primary:linear-gradient(135deg,#e8a0b8,#c06080); --gradient-card:linear-gradient(135deg,#FFFCFD,#FFF3F7); --shadow-sm:0 1px 4px rgba(192,96,128,.08); --shadow-md:0 4px 16px rgba(192,96,128,.12); --shadow-lg:0 8px 32px rgba(192,96,128,.16); }
html.slate { --bg-primary:#f3f5f7; --bg-secondary:#e6eaee; --bg-card:#f9fafb; --bg-card-rgb:249,250,251; --bg-input:#e6eaee; --text-primary:#1a2330; --text-secondary:#4a5c6e; --text-muted:#7a8fa6; --border:#b0c0d0; --border-light:#cdd8e3; --primary:#607d93; --primary-hover:#4a6070; --primary-light:rgba(96,125,147,.13); --gradient-primary:linear-gradient(135deg,#7a95ad,#607d93); --gradient-card:linear-gradient(135deg,#f9fafb,#e6eaee); --shadow-sm:0 1px 4px rgba(96,125,147,.10); --shadow-md:0 4px 16px rgba(96,125,147,.15); --shadow-lg:0 8px 32px rgba(96,125,147,.20); }
html.night { --bg-primary:#080f1a; --bg-secondary:#0a1628; --bg-card:#0d2137; --bg-card-rgb:13,33,55; --bg-input:#102540; --text-primary:#e2d455; --text-secondary:#e8edf5; --text-muted:#6a7f9a; --border:#1a3050; --border-light:#1e3d60; --primary:#e2d455; --primary-hover:#ece060; --primary-light:rgba(226,212,85,.16); --gradient-primary:linear-gradient(135deg,#ece060,#c8b830); --gradient-card:linear-gradient(135deg,#0d2137,#102540); --shadow-sm:0 1px 6px rgba(0,0,0,.60); --shadow-md:0 4px 20px rgba(0,0,0,.70); --shadow-lg:0 8px 40px rgba(0,0,0,.80); }
html.stone { --bg-primary:#f0e8d0; --bg-secondary:#e8dcc0; --bg-card:#f8f2e0; --bg-card-rgb:248,242,224; --bg-input:#ecdfc4; --text-primary:#2a1e08; --text-secondary:#7a5e28; --text-muted:#b08840; --border:#c8a85a; --border-light:#ddc87a; --primary:#a07830; --primary-hover:#7c5c20; --primary-light:rgba(160,120,48,.15); --gradient-primary:linear-gradient(135deg,#c0963c,#a07830); --gradient-card:linear-gradient(135deg,#f8f2e0,#ecdfc4); --shadow-sm:0 1px 4px rgba(120,90,30,.14); --shadow-md:0 4px 16px rgba(120,90,30,.20); --shadow-lg:0 8px 32px rgba(120,90,30,.26); }
html.gold { --bg-primary:#faf6ec; --bg-secondary:#f5edda; --bg-card:#fdfaf2; --bg-card-rgb:253,250,242; --bg-input:#f5edda; --text-primary:#2c2000; --text-secondary:#7a5c00; --text-muted:#b38a00; --border:#d4a800; --border-light:#e8cc66; --primary:#c49a00; --primary-hover:#9c7a00; --primary-light:rgba(196,154,0,.15); --gradient-primary:linear-gradient(135deg,#d4af37,#b8860b); --gradient-card:linear-gradient(135deg,#fdfaf2,#f8f0d8); --shadow-sm:0 1px 4px rgba(180,140,0,.14); --shadow-md:0 4px 16px rgba(180,140,0,.20); --shadow-lg:0 8px 32px rgba(180,140,0,.26); }
html.silver { --bg-primary:#f0f2f5; --bg-secondary:#e4e8ed; --bg-card:#f8f9fb; --bg-card-rgb:248,249,251; --bg-input:#eaecf0; --text-primary:#1a1f2e; --text-secondary:#5a6478; --text-muted:#8a94a6; --border:#b8c0cc; --border-light:#d4d9e2; --primary:#607d8b; --primary-hover:#455a64; --primary-light:rgba(96,125,139,.13); --gradient-primary:linear-gradient(135deg,#78909c,#546e7a); --gradient-card:linear-gradient(135deg,#f8f9fb,#edf0f4); --shadow-sm:0 1px 4px rgba(80,100,120,.12); --shadow-md:0 4px 16px rgba(80,100,120,.18); --shadow-lg:0 8px 32px rgba(80,100,120,.22); }
html.ocean { --bg-primary:#020e1a; --bg-secondary:#051828; --bg-card:#071e33; --bg-card-rgb:7,30,51; --bg-input:#0a2540; --text-primary:#e0f7fa; --text-secondary:#4dd0e1; --text-muted:#0097a7; --border:#0d3a55; --border-light:#0e4a6a; --primary:#00bcd4; --primary-hover:#26c6da; --primary-light:rgba(0,188,212,.16); --gradient-primary:linear-gradient(135deg,#26c6da,#00bcd4); --gradient-card:linear-gradient(135deg,#071e33,#0a2540); --shadow-sm:0 1px 6px rgba(0,0,0,.60); --shadow-md:0 4px 20px rgba(0,0,0,.70); --shadow-lg:0 8px 40px rgba(0,0,0,.80); }
html.midnight { --bg-primary:#0a0a14; --bg-secondary:#10101e; --bg-card:#14142a; --bg-card-rgb:20,20,42; --bg-input:#1a1a32; --text-primary:#ede9ff; --text-secondary:#b39ddb; --text-muted:#7e6fa8; --border:#2d2b50; --border-light:#3a3870; --primary:#9c88d4; --primary-hover:#b3a4e8; --primary-light:rgba(156,136,212,.18); --gradient-primary:linear-gradient(135deg,#b3a4e8,#9c88d4); --gradient-card:linear-gradient(135deg,#14142a,#1a1a32); --shadow-sm:0 1px 6px rgba(0,0,0,.60); --shadow-md:0 4px 20px rgba(0,0,0,.70); --shadow-lg:0 8px 40px rgba(0,0,0,.80); }
html.sage { --bg-primary:#f2f7f4; --bg-secondary:#e4ede8; --bg-card:#f8fbf9; --bg-card-rgb:248,251,249; --bg-input:#e8f0eb; --text-primary:#1a2e22; --text-secondary:#4a7058; --text-muted:#7aa088; --border:#a8c8b4; --border-light:#c4dace; --primary:#4a8c62; --primary-hover:#326e4a; --primary-light:rgba(74,140,98,.13); --gradient-primary:linear-gradient(135deg,#5ea876,#4a8c62); --gradient-card:linear-gradient(135deg,#f8fbf9,#e8f0eb); --shadow-sm:0 1px 4px rgba(40,90,60,.10); --shadow-md:0 4px 16px rgba(40,90,60,.14); --shadow-lg:0 8px 32px rgba(40,90,60,.18); }
html.ivory { --bg-primary:#fefcf6; --bg-secondary:#faf5e8; --bg-card:#fffefa; --bg-card-rgb:255,254,250; --bg-input:#faf5e8; --text-primary:#2a2418; --text-secondary:#7a6a48; --text-muted:#b0985c; --border:#e8d89a; --border-light:#f0e6b8; --primary:#c8a84a; --primary-hover:#a88830; --primary-light:rgba(200,168,74,.14); --gradient-primary:linear-gradient(135deg,#d4b85a,#c8a84a); --gradient-card:linear-gradient(135deg,#fffefa,#faf5e8); --shadow-sm:0 1px 4px rgba(160,130,60,.10); --shadow-md:0 4px 16px rgba(160,130,60,.14); --shadow-lg:0 8px 32px rgba(160,130,60,.18); }
html.frost { --bg-primary:#f4f8fc; --bg-secondary:#e8f0f8; --bg-card:#fafdff; --bg-card-rgb:250,253,255; --bg-input:#eaf2f8; --text-primary:#0e1e30; --text-secondary:#3a6080; --text-muted:#7aaac8; --border:#b0d0e8; --border-light:#d0e8f4; --primary:#4a9ecf; --primary-hover:#2a7eaf; --primary-light:rgba(74,158,207,.13); --gradient-primary:linear-gradient(135deg,#6ab8e0,#4a9ecf); --gradient-card:linear-gradient(135deg,#fafdff,#eaf2f8); --shadow-sm:0 1px 4px rgba(40,100,160,.10); --shadow-md:0 4px 16px rgba(40,100,160,.14); --shadow-lg:0 8px 32px rgba(40,100,160,.18); }

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

html {
  font-size: 16px;
  margin: 0; padding: 0;
  width: 100%;
  overflow-x: hidden;
  background-color: var(--bg-body);
}

body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg-body);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  margin: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color .3s ease, color .3s ease;
  padding: 0;
}

#page-wrapper {
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding-top: 0.3rem;
  padding-bottom: calc(2rem + env(safe-area-inset-bottom));
  padding-left: calc(.5rem + env(safe-area-inset-left));
  padding-right: calc(.5rem + env(safe-area-inset-right));
}

@media screen and (max-width:1024px) {
  #page-wrapper {
    padding-top: calc(0.8rem + env(safe-area-inset-top));
    padding-left: calc(.5rem + env(safe-area-inset-left));
    padding-right: calc(.5rem + env(safe-area-inset-right));
  }
}

@media screen and (max-width:767px) {
  #page-wrapper {
    padding-top: calc(0.2rem + env(safe-area-inset-top));
    padding-left: calc(.25rem + env(safe-area-inset-left));
    padding-right: calc(.25rem + env(safe-area-inset-right));
  }
}

html.parchment body { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E"); }
html.rose  body { background-image:radial-gradient(ellipse at 80% 0%,#FFFCFD 0%,#FFF8FA 50%,#FFEEF3 100%); }
html.slate body { background-image:radial-gradient(ellipse at 40% 0%,#f9fafb 0%,#f3f5f7 55%,#e6eaee 100%); }
html.gold  body { background-image:radial-gradient(ellipse at top left,#fdf8e6 0%,#faf4dc 60%,#f5eccc 100%); }

html.night .page-header-title,
html.night .surah-title-transliteration,
html.night .verse-translation-text,
html.night .verse-phonetic-text,
html.night .surah-name-trad,
html.night .surah-meta,
html.night .surah-title-info,
html.night .page-header-subtitle,
html.night .pdf-preview-name { color:#e8edf5; }
html.night .surah-name-fr,
html.night .surah-name-ar-big,
html.night .verse-text-arabic,
html.night .surah-title-arabic,
html.night .bismillah,
html.night .page-header-arabic { color:#e6d858; }

.page-header {
  text-align: center;
  padding: 1.5rem 1rem 0;
  margin-bottom: 0.5rem;
}
.page-header-title {
  font-size: clamp(1.6rem, 4.5vw, 2.6rem);
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
  margin: 0 0 0.5rem;

}
.page-header-title span { color: var(--primary); }
.page-header-arabic {
  font-family: var(--font-arabic);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  color: var(--primary);
  direction: rtl;
  display: block;
  margin: 0 0 0.6rem;
  line-height: 1.4;
  font-style: normal;
}
.page-header-subtitle {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 600px;
  margin: 0 auto;
}
.page-header-divider {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  max-width: 100%;
  margin: 0.75rem 0 1rem;
  padding: 0;
}
.page-header-divider-line {
  display: flex;
  align-items: center;
  gap: .85rem;
  width: 100%;
}
.page-header-divider-line::before,
.page-header-divider-line::after {
  content: "";
  flex: 1;
  height: 1px;
}
.page-header-divider-line::before { background: linear-gradient(90deg, transparent, var(--border)); }
.page-header-divider-line::after  { background: linear-gradient(90deg, var(--border), transparent); }
.page-header-divider-counter {
  display: flex;
  align-items: baseline;
  gap: .18rem;
  font-family: 'Poppins', sans-serif;
  white-space: nowrap;
  flex-shrink: 0;
}
.page-header-divider-count-num {
  font-size: .92rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
}
.page-header-divider-count-sep {
  font-size: .78rem;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1;
}
.page-header-divider-count-total {
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1;
}
.page-header-divider-bar-wrap {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  width: 100%;
}
.page-header-divider-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--gradient-primary);
  transition: width .5s cubic-bezier(.4,0,.2,1);
  width: 0%;
}

.settings-btn-fixed {
  position:fixed; top:30px; right:15px; z-index:9100;
  width:50px; height:50px; background:var(--gradient-primary);
  border:none; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.3); transition:all .3s;
  color:#fff; font-size:1.4rem;
  padding:0;
}
.settings-btn-fixed:hover { transform:scale(1.1) rotate(90deg); }
@media (max-width:600px) {
  .settings-btn-fixed { top:10px; }
}

.search-filter-bar { display:flex; gap:.5rem; margin-bottom:.65rem; align-items:center; flex-wrap:wrap; }
.search-input-wrap { flex:1; min-width:160px; position:relative; }
.search-input-wrap i { position:absolute; left:.7rem; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:1rem; pointer-events:none; }
.search-input { width:100%; padding:.5rem .75rem .5rem 2.1rem; border:2px solid var(--border); border-radius:10px; background:var(--bg-card); color:var(--text-primary); font-family:'Poppins',sans-serif; font-size:.82rem; transition:border-color .2s; }
.search-input:focus,#cfmSearch:focus { outline:none; border-color:var(--primary); }

.toolbar-row { display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.65rem; align-items:center; }
.toolbar-btn { display:flex; align-items:center; justify-content:center; gap:.3rem; height:36px; padding:0 .85rem; border-radius:9px; border:1.5px solid var(--border); background:var(--gradient-card); color:var(--primary); font-size:.8rem; font-weight:600; cursor:pointer; font-family:'Poppins',sans-serif; transition:all .18s; white-space:nowrap; box-sizing:border-box; }
.toolbar-btn:hover,.slider-nav-btn:hover,.player-btn:hover,.theme-btn:hover,.settings-tab:hover,.audio-mode-btn:hover,.text-style-btn:hover,.fm-chip:hover,.fm-vf-type-btn:hover,.fm-btn:hover { border-color:var(--primary); color:var(--primary); }
.toolbar-btn.active,.settings-tab.active,.audio-mode-btn.active,.text-style-btn.active { background:var(--gradient-primary); color:#fff; border-color:var(--primary); }
.toolbar-btn i { font-size:.88rem; }

.cg-count-text {
  font-size: .72rem;
  font-weight: 400;
  color: var(--text-muted);
  flex-shrink: 0;
  letter-spacing: .01em;
}
.recent-count-text {
  font-size: .72rem;
  font-weight: 400;
  color: var(--primary);
  flex-shrink: 0;
  letter-spacing: .01em;
}

.collapsible-group { margin-bottom:.65rem; border-radius:14px; overflow:hidden; border:1.5px solid var(--border); }
.collapsible-group-header { display:flex; align-items:center; gap:.55rem; padding:.65rem 1rem; cursor:pointer; user-select:none; background:var(--gradient-card); border-bottom:1.5px solid transparent; transition:all .2s; }
.collapsible-group-header:hover { background:var(--bg-secondary); }
.collapsible-group-header.open { border-bottom-color:var(--border); }
.cg-icon { font-size:1.1rem; color:var(--primary); flex-shrink:0; }
.cg-title { flex:1; font-size:.82rem; font-weight:700; color:var(--primary); }
.cg-chevron,.surah-chevron { font-size:1rem; color:var(--text-secondary); transition:transform .25s; flex-shrink:0; }
.collapsible-group-header.open .cg-chevron,.surah-card.open .surah-chevron { transform:rotate(180deg); }
.collapsible-group-body { display:none; padding:.5rem 0; }
.collapsible-group-body.open { display:block; }

.intro-container { border-radius:12px; border:1.5px solid var(--border); overflow:hidden; background:var(--gradient-card); margin-bottom:.5rem; }
.intro-card { display:flex; align-items:center; gap:.7rem; padding:.45rem 1rem; cursor:pointer; min-height:44px; position:relative; overflow:hidden; transition:background .15s; }
.intro-card:hover { background:var(--bg-secondary); }
.intro-icon { width:26px; height:26px; background:var(--primary-light); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--primary); font-size:.9rem; flex-shrink:0; }
.intro-info { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; }
.intro-name { font-size:.78rem; font-weight:700; color:var(--text-primary); }
.intro-count-text { font-size:.72rem; font-weight:400; color:var(--text-secondary); flex-shrink:0; letter-spacing:.01em; }
.intro-expand-icon { font-size:1.2rem; color:var(--text-secondary); transition:transform .3s; flex-shrink:0; }
.intro-container.expanded .intro-expand-icon { transform:rotate(180deg); }
.intro-content { display:none; border-top:2px solid var(--border); background:var(--bg-card); padding:.75rem .5rem; }
.intro-container.expanded .intro-content { display:block; }

.pdf-coran-slider-wrapper { position:relative; display:flex; align-items:center; gap:.5rem; padding:.5rem 0; }
#recentReadingsSection .pdf-coran-slider-wrapper { padding:.25rem 0; }
.pdf-coran-grid { display:flex; gap:.75rem; overflow-x:auto; scroll-behavior:smooth; padding:.5rem 0; scrollbar-width:thin; scrollbar-color:var(--primary) var(--border); flex:1; scroll-snap-type:x mandatory; }
.pdf-preview-card { display:flex; flex-direction:column; border-radius:12px; border:2px solid var(--border); background:var(--gradient-card); overflow:hidden; cursor:pointer; text-decoration:none; transition:all .3s; flex-shrink:0; width:120px; scroll-snap-align:start; }
.pdf-preview-card:hover { border-color:var(--primary); transform:translateY(-4px); box-shadow:0 8px 20px rgba(0,151,178,.2); }
.pdf-preview-thumbnail { width:100%; height:140px; background:linear-gradient(135deg,rgba(0,151,178,.1) 0%,rgba(0,151,178,.05) 100%); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; border-bottom:2px solid var(--border); }
.pdf-preview-icon { font-size:2.5rem; color:rgba(220,50,50,.4); position:absolute; }
.pdf-preview-info { padding:.6rem; display:flex; flex-direction:column; gap:.25rem; }
.pdf-preview-name { font-size:.75rem; font-weight:600; color:var(--text-primary); line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em; text-align:center; }
.pdf-preview-meta { display:flex; align-items:center; justify-content:center; gap:.3rem; font-size:.65rem; color:var(--text-secondary); }
.pdf-preview-meta i { font-size:.8rem; color:#dc3232; }
.slider-nav-btn,
.player-btn { width:34px; height:34px; border-radius:50%; border:1.5px solid var(--border); color:var(--text-secondary); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:.9rem; flex-shrink:0; transition:all .18s; background:var(--bg-secondary); }
.slider-nav-btn { background:var(--bg-card); font-size:1rem; visibility:visible; }
.slider-nav-btn.hidden { visibility:hidden; pointer-events:none; }
.player-btn.play-pause { width:40px; height:40px; font-size:1.1rem; background:var(--gradient-primary); color:#fff; border-color:transparent; box-shadow:0 2px 10px rgba(0,0,0,.2); }
.player-btn.play-pause:hover { opacity:.88; }
.player-btn.active,.checkbox-item:hover,.verse-action-row:hover { background:var(--primary-light); border-color:var(--primary); color:var(--primary); }
.player-btn.repeat-2 { background:var(--gradient-primary); color:#fff; border-color:var(--primary); }

.surah-card { background:var(--gradient-card); border:1.5px solid var(--border); border-radius:12px; margin-bottom:.5rem; overflow:visible; transition:box-shadow .2s; }
.surah-card.open { overflow:hidden; }
.surah-card:hover { box-shadow:var(--shadow-md); }

.surah-validate-btn {
  width:28px; height:28px; border-radius:8px; border:1.5px solid var(--border);
  background:var(--bg-card); color:var(--text-secondary); display:flex; align-items:center;
  justify-content:center; cursor:pointer; font-size:1rem; flex-shrink:0;
  transition:border-color .22s; padding:0;
}
.surah-validate-btn:hover { border-color:var(--primary); color:var(--text-secondary); background:var(--bg-card); }

.surah-card.validated { border-color:var(--primary); }
html.no-validated-border .surah-card.validated { border-color:var(--border); }

.src-toast {
  position:fixed; bottom:calc(1.5rem + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--gradient-primary); color:#fff;
  padding:.5rem 1.1rem; border-radius:999px; font-size:.78rem; font-weight:700;
  display:flex; align-items:center; gap:.4rem; box-shadow:var(--shadow-md);
  opacity:0; transition:opacity .3s,transform .3s; pointer-events:none; z-index:9999; white-space:nowrap;
}
.src-toast.visible { opacity:1; transform:translateX(-50%) translateY(0); }
.src-toast.multiline { white-space:normal; max-width:min(88vw,340px); text-align:center; line-height:1.35; border-radius:14px; }

#surahActionsModal .sheet-modal-content { max-width:360px; }

#noteModal .sheet-modal-content { max-width:420px; }
.note-modal-body { padding:.75rem; display:flex; flex-direction:column; gap:.6rem; }
.note-modal-context { font-size:.7rem; color:var(--text-secondary); text-align:center; font-style:italic; }
.note-textarea {
  width:100%; min-height:110px; padding:.6rem .75rem;
  border:1.5px solid var(--border); border-radius:10px;
  background:var(--bg-input); color:var(--text-primary);
  font-family:'Poppins',sans-serif; font-size:.82rem; line-height:1.5;
  resize:vertical; outline:none; transition:border-color .2s;
}
.note-textarea:focus { border-color:var(--primary); }
.note-modal-actions { display:flex; gap:.5rem; }
.note-modal-actions .fm-btn { flex:1; justify-content:center; }

.notes-table { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0; border:1.5px solid var(--border); border-radius:10px; overflow:hidden; }
.notes-col-header { padding:.45rem .6rem; font-size:.68rem; font-weight:700; color:#fff; background:var(--gradient-primary); display:flex; align-items:center; gap:.3rem; border-bottom:1.5px solid var(--border); }
.notes-col-header i { font-size:.85rem; }
.notes-col-header:not(:last-child) { border-right:1.5px solid rgba(255,255,255,.25); }
.notes-col-body { display:flex; flex-direction:column; gap:.35rem; padding:.45rem .5rem; background:var(--bg-primary); min-height:40px; align-items:stretch; }
.notes-col-body:not(:last-child) { border-right:1.5px solid var(--border); }
.notes-col-empty { font-size:.68rem; color:var(--text-muted); text-align:center; padding:.5rem 0; font-style:italic; }
.note-item { background:var(--bg-card); border:1.5px solid var(--border); border-radius:8px; padding:.4rem .55rem; display:flex; flex-direction:column; gap:.18rem; transition:box-shadow .15s; }
.note-item:hover { box-shadow:var(--shadow-sm); border-color:var(--primary); }
.note-item-meta { display:flex; align-items:center; justify-content:space-between; gap:.3rem; }
.note-item-label { font-size:.62rem; font-weight:700; color:var(--primary); display:flex; align-items:center; gap:.25rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.note-item-label i { font-size:.78rem; flex-shrink:0; }
.note-item-date { font-size:.58rem; color:var(--text-muted); flex-shrink:0; }
.note-item-text { font-size:.76rem; color:var(--text-primary); line-height:1.4; white-space:pre-wrap; word-break:break-word; }
.note-item-actions { display:flex; gap:.25rem; justify-content:flex-end; margin-top:.05rem; }
.note-item-btn { background:none; border:none; cursor:pointer; font-size:.68rem; color:var(--text-muted); padding:.1rem .25rem; border-radius:5px; transition:color .15s,background .15s; font-family:'Poppins',sans-serif; display:flex; align-items:center; gap:.15rem; }
.note-item-btn:hover { color:var(--primary); background:var(--primary-light); }
.note-item-btn.delete:hover { color:#ef4444; background:rgba(239,68,68,.08); }
.notes-tabs-mobile-content { display:none; }
.notes-tabs { display:none; gap:0; border-bottom:2px solid var(--border); margin-bottom:.5rem; }
.notes-tab-btn { flex:1; padding:.45rem .3rem; font-size:.72rem; font-weight:600; font-family:'Poppins',sans-serif; background:none; border:none; border-bottom:2px solid transparent; margin-bottom:-2px; cursor:pointer; color:var(--text-secondary); display:flex; align-items:center; justify-content:center; gap:.3rem; transition:color .18s,border-color .18s; }
.notes-tab-btn i { font-size:.85rem; }
.notes-tab-btn.active { color:var(--primary); border-bottom-color:var(--primary); }
.notes-tab-panel { display:none; flex-direction:column; gap:.35rem; padding:.1rem 0; }
.notes-tab-panel.active { display:flex; }
@media (max-width:767px) {
  .notes-table { display:none !important; }
  .notes-tabs-mobile-content { display:block !important; }
  .notes-tabs { display:flex !important; }
}

.fav-table { display:grid; grid-template-columns:1fr 1fr; gap:0; border:1.5px solid var(--border); border-radius:10px; overflow:hidden; }
.fav-col-header { padding:.45rem .6rem; font-size:.68rem; font-weight:700; color:#fff; background:var(--gradient-primary); display:flex; align-items:center; gap:.3rem; border-bottom:1.5px solid var(--border); }
.fav-col-header i { font-size:.85rem; }
.fav-col-header:not(:last-child) { border-right:1.5px solid rgba(255,255,255,.25); }
.fav-col-body { display:flex; flex-direction:column; gap:.35rem; padding:.45rem .5rem; background:var(--bg-primary); min-height:40px; }
.fav-col-body:not(:last-child) { border-right:1.5px solid var(--border); }
.fav-item { background:var(--bg-card); border:1.5px solid var(--border); border-radius:8px; padding:.4rem .55rem; display:flex; flex-direction:column; gap:.15rem; transition:box-shadow .15s; }
.fav-item:hover { box-shadow:var(--shadow-sm); border-color:var(--primary); }
.fav-item-top { display:flex; align-items:center; justify-content:space-between; gap:.3rem; }
.fav-item-label { font-size:.68rem; font-weight:700; color:var(--primary); display:flex; align-items:center; gap:.25rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0; }
.fav-item-label i { font-size:.8rem; flex-shrink:0; }
.fav-item-date { font-size:.58rem; color:var(--text-muted); flex-shrink:0; }
.fav-item-btn { background:none; border:none; cursor:pointer; font-size:.9rem; color:var(--text-muted); padding:.1rem .2rem; border-radius:5px; transition:color .15s,background .15s; display:flex; align-items:center; flex-shrink:0; }
.fav-item-btn.delete:hover { color:#ef4444; background:rgba(239,68,68,.08); }
.fav-col-empty { font-size:.68rem; color:var(--text-muted); text-align:center; padding:.5rem 0; font-style:italic; }
.fav-tabs-mobile-content { display:none; }
.fav-tabs { display:none; gap:0; border-bottom:2px solid var(--border); margin-bottom:.5rem; }
.fav-tab-btn { flex:1; padding:.45rem .3rem; font-size:.72rem; font-weight:600; font-family:'Poppins',sans-serif; background:none; border:none; border-bottom:2px solid transparent; margin-bottom:-2px; cursor:pointer; color:var(--text-secondary); display:flex; align-items:center; justify-content:center; gap:.3rem; transition:color .18s,border-color .18s; }
.fav-tab-btn i { font-size:.85rem; }
.fav-tab-btn.active { color:var(--primary); border-bottom-color:var(--primary); }
.fav-tab-panel { display:none; flex-direction:column; gap:.35rem; padding:.1rem 0; }
.fav-tab-panel.active { display:flex; }
@media (max-width:767px) {
  .fav-table { display:none !important; }
  .fav-tabs-mobile-content { display:block !important; }
  .fav-tabs { display:flex !important; }
}
.surah-card-header { display:flex; align-items:center; gap:.6rem; padding:.55rem .9rem; cursor:pointer; transition:background .15s; min-height:52px; }
.surah-card-header:hover { background:rgba(0,0,0,.03); }
html.dark .surah-card-header:hover { background:rgba(255,255,255,.03); }
.surah-num-badge { min-width:auto; height:auto; border-radius:0; background:none; color:var(--primary); display:inline-flex; align-items:center; justify-content:flex-end; font-size:1.3rem; font-weight:400; flex-shrink:0; box-shadow:none; font-family:var(--font-arabic); direction:ltr; line-height:1; padding:0; gap:.1em; }
.surah-num-badge::after { content:'﴿'; font-family:var(--font-arabic); font-size:1.8rem; color:var(--primary); line-height:1; }

.orn-official { display:inline-block; position:relative; line-height:1; }
.orn-official-glyph { font-family:'Noto Naskh Arabic','KFGQPC Uthmanic Script HAFS','Amiri',serif; color:var(--primary); display:block; line-height:1; }
.orn-official-num { position:absolute; top:50%; left:50%; transform:translate(-50%, calc(-50% - .22em)); font-family:'Noto Naskh Arabic','KFGQPC Uthmanic Script HAFS','Amiri',serif; font-weight:700; color:var(--primary); line-height:1; display:block; }

.verse-text-arabic .orn-official-glyph { font-size:1.3em; }

.surah-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:0; }
.surah-name-ar-big { font-family:var(--font-arabic); font-size:clamp(1.3rem,3.5vw,1.8rem); color:var(--primary); direction:rtl; text-align:right; line-height:1; font-weight:700; flex-shrink:0; padding:0 .2rem; white-space:nowrap; align-self:center; }
.surah-name-fr { font-size:.78rem; font-weight:700; color:var(--text-primary); display:block; text-align:left; line-height:1.2; }
.surah-name-trad { font-size:.65rem; font-style:italic; color:var(--text-secondary); display:block; text-align:left; line-height:1.2; margin-top:.28rem; }
.surah-meta { font-size:.6rem; color:var(--text-secondary); text-align:left; margin-top:.28rem; }

.surah-verses { display:none; border-top:1px solid var(--border-light); }
.surah-card.open .surah-verses { display:block; }
.surah-verses-inner {
  padding:.5rem 0 0 0;
  max-height: 70vh;
  height: auto;

  overflow-y: scroll;
  overflow-x: hidden;
  overflow-anchor: none;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;

  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: scroll-position;
}
.verses-unified-container,
.verse-columns-wrapper,
.verse-row-wrap,
.verse-block {
  overflow-anchor: none;

  contain: layout style;
}
.verse-loading { text-align:center; padding:1.5rem; color:var(--text-secondary); font-size:.82rem; display:flex; align-items:center; justify-content:center; gap:.5rem; min-height:80px; }
.verse-loading i { font-size:1.2rem; }

.bismillah {
  text-align:center; padding:.7rem 1.5rem;
  font-family:var(--font-arabic); font-size:1.45rem;
  color:var(--primary); direction:rtl;
  background:var(--gradient-card);
  border:1.5px solid var(--border);
  border-radius:12px;
  margin:.65rem 1rem;
  box-shadow:var(--shadow-sm);
  position:relative;
}
.surah-title-section { text-align:center; padding:1rem; background:var(--gradient-card); border-bottom:1px solid var(--border-light); }
.surah-title-arabic { font-family:var(--font-arabic); font-size:2rem; color:var(--primary); direction:rtl; margin-bottom:0.4rem; }
.surah-title-transliteration { font-size:.95rem; font-weight:700; color:var(--text-primary); margin-top:.2rem; }
.surah-title-info { font-size:.72rem; color:var(--text-secondary); margin-top:.2rem; display:flex; align-items:center; justify-content:center; gap:.4rem; }

.verses-unified-container { width:100%; padding-bottom:.4rem; }

.verse-columns-wrapper { display:flex; flex-direction:column; }
.verse-row-wrap {
  display:flex; flex-direction:row;
  border-bottom:1px solid var(--border-light);
}
.verse-row-wrap.last-verse-row { border-bottom:none; }
.verse-row-wrap .verse-item {
  flex:1; border-bottom:none;
  border-right:1.5px solid var(--border-light);
}
.verse-row-wrap .verse-item:last-child { border-right:none; }

.verse-row-wrap .arabic-item { order:2; }
.verse-row-wrap .verse-item:not(.arabic-item) { order:1; }

.verse-columns-wrapper.columns-1 .verse-row-wrap .verse-item { text-align:center; border-right:none; }

.verse-item {
  display:block; padding:.8rem .75rem;
  transition:background .15s; line-height:1.9;
  word-break:break-word; overflow-wrap:anywhere;
  min-width:0; overflow:visible;
}
.verse-item.active-verse,.verse-block.active-verse,.verse-row-wrap.active-verse { background:var(--primary-light); }
.verse-item.arabic-item { direction:rtl; text-align:right; }
.verse-item:not(.arabic-item) { direction:ltr; text-align:left; }

.verse-text-content { display:inline; }
.verse-text-arabic,
.verse-translation-text,
.verse-phonetic-text { display:inline; cursor:pointer; border-radius:3px; transition:background .15s; }
.verse-text-arabic { font-family:var(--font-arabic); }
.verse-translation-text { font-size:.88rem; font-family:var(--font-latin); }
.verse-phonetic-text { font-style:italic; color:var(--text-secondary); font-size:.82rem; font-family:var(--font-latin); }
.verse-number-inline {
  display:inline;
  cursor:pointer;
  font-family:var(--font-arabic);
  font-size:inherit;
  font-weight:400;
  color:var(--primary);
  transition:opacity .15s;
  vertical-align:baseline;
  position:relative;
  top:0.08em;
  line-height:1;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  -webkit-user-select:none;
}
.verse-number-inline:hover { opacity:.7; }
.verse-number-ltr {
  unicode-bidi:isolate;
  direction:ltr;
  display:inline-block;
  font-size:1.15em;
  top:0.05em;
}

.wd-word { cursor:pointer; border-radius:2px; transition:background .12s; }
.wd-word:hover { background:rgba(0,151,178,.12); }
html.dark .wd-word:hover { background:rgba(61,122,82,.15); }

.verse-block {
  padding:.85rem .9rem; border-bottom:1px solid var(--border-light);
  transition:background .15s; display:flex; flex-direction:column; gap:.45rem;
}
.verse-block:last-child { border-bottom:none; }
.verse-block-arabic { direction:rtl; text-align:right; line-height:2; word-break:break-word; }
.verse-block-ltr, .verse-block-rtl { line-height:1.85; word-break:break-word; }
.verse-block-ltr { direction:ltr; text-align:left; }
.verse-block-rtl { direction:rtl; text-align:right; }

.layout-selector { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; width:100%; }

.sheet-modal {
  display:none; position:fixed; inset:0; z-index:10000;
  background:transparent;
  align-items:flex-end; justify-content:center; padding:0;
  opacity:0; transition:opacity .16s;
}
.sheet-modal.active { display:flex; }
.sheet-modal.visible { opacity:1; }
.sheet-modal-content {
  background:var(--bg-card); width:100%; max-width:560px;
  max-height:88vh; border-radius:18px 18px 0 0;
  display:flex; flex-direction:column; overflow:hidden;
  border:1.5px solid var(--border);
  border-bottom:none;
  box-shadow:0 -6px 32px rgba(0,0,0,.22), 0 -1px 0 var(--border);
  transform:translateY(100%); opacity:0;
  transition:transform .28s cubic-bezier(.34,1.1,.64,1), opacity .18s;
  pointer-events:auto;
}
.sheet-modal.visible .sheet-modal-content { transform:translateY(0); opacity:1; }
.sheet-header {
  background:var(--gradient-primary); color:#fff;
  padding:.6rem .9rem; display:flex; align-items:center; gap:.5rem;
  flex-shrink:0; border-radius:16px 16px 0 0; justify-content:space-between;
}
.sheet-header h2, .sheet-header h3 { font-size:.9rem; font-weight:700; flex:1; margin:0; display:flex; align-items:center; justify-content:center; gap:.4rem; }
.sheet-close-btn { background:rgba(255,255,255,.18); border:none; color:#fff; width:28px; height:28px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1.1rem; transition:background .2s; flex-shrink:0; }
.sheet-close-btn:hover { background:rgba(255,255,255,.35); }
.settings-body,.modal-body { display:flex; flex-direction:column; flex:1; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--primary) var(--border); }
.settings-body { padding:.75rem; gap:.85rem; }
.modal-body { padding:.75rem .8rem; gap:.55rem; overflow-x:hidden; -webkit-overflow-scrolling:touch; align-items:center; text-align:center; }

.setting-group { border:1.5px solid var(--border); border-radius:12px; padding:.75rem; background:var(--bg-card); display:flex; flex-direction:column; gap:.6rem; align-items:center; text-align:center; }
.setting-label { font-weight:600; color:var(--text-primary); display:flex; align-items:center; justify-content:center; gap:.3rem; font-size:.68rem; text-align:center; width:100%; }
.setting-label i { color:var(--primary); font-size:.95rem; }
.setting-select, .setting-input { width:100%; padding:.25rem .4rem; border:1.5px solid var(--border); border-radius:8px; background:var(--bg-card); color:var(--text-primary); font-family:'Poppins',sans-serif; font-size:.65rem; transition:border-color .2s; outline:none; cursor:pointer; text-align:center; text-align-last:center; }
.setting-select:focus, .setting-input:focus { border-color:var(--primary); box-shadow:0 0 0 2px rgba(0,151,178,.1); }
.setting-sublabel { font-size:.58rem; color:var(--text-secondary); font-weight:600; display:block; margin-bottom:.2rem; text-align:center; }
.setting-sublabel i { font-size:.78rem; }
.setting-trans-wrap { margin-top:.55rem; display:flex; flex-direction:column; gap:.4rem; width:100%; }
.setting-trans-row { display:flex; gap:.4rem; width:100%; }
.setting-trans-col { flex:1; min-width:0; }
.setting-trans-col select { font-size:.6rem; }

.mode-selector { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; width:100%; }
.mode-card { border:2px solid var(--border); border-radius:12px; padding:.65rem .75rem; cursor:pointer; background:var(--gradient-card); position:relative; transition:all .22s; text-align:center; }
.mode-card:hover { box-shadow:0 4px 12px rgba(0,151,178,.1); border-color:var(--primary); }
.mode-card.selected { background:linear-gradient(135deg,rgba(0,151,178,.12),rgba(0,151,178,.05)); border-color:var(--primary); box-shadow:0 3px 10px rgba(0,151,178,.18); }
.mode-card-check { position:absolute; top:.4rem; right:.4rem; width:18px; height:18px; border-radius:50%; border:2px solid var(--border); background:var(--bg-card); display:flex; align-items:center; justify-content:center; font-size:.7rem; color:transparent; transition:all .2s; }
.mode-card.selected .mode-card-check { background:var(--primary); border-color:var(--primary); color:#fff; }
.mode-card-title { font-size:.85rem; font-weight:700; color:var(--text-primary); margin-bottom:.15rem; }
.mode-card-desc { font-size:.68rem; color:var(--text-secondary); line-height:1.4; }

.theme-selector { display:flex; gap:.4rem; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; flex-wrap:nowrap; width:100%; }
.theme-selector::-webkit-scrollbar { display:none; }
.theme-btn { display:flex; align-items:center; gap:.28rem; padding:.28rem .55rem; border-radius:8px; border:1.5px solid var(--border); background:var(--gradient-card); color:var(--text-secondary); font-size:.68rem; font-weight:600; cursor:pointer; font-family:'Poppins',sans-serif; transition:all .2s; white-space:nowrap; flex-shrink:0; }
.theme-btn.active { border-color:var(--primary); background:var(--gradient-primary); color:#fff; box-shadow:0 2px 8px rgba(0,0,0,.15); }

.toggle-group { display:flex; align-items:center; justify-content:space-between; gap:.5rem; width:100%; }
.toggle-label { display:flex; align-items:center; gap:.4rem; font-size:.8rem; color:var(--text-primary); }
.toggle-label i { color:var(--primary); }
.toggle-switch { width:42px; height:24px; border-radius:12px; background:var(--border); cursor:pointer; position:relative; flex-shrink:0; transition:background .22s; }
.toggle-switch.on { background:var(--gradient-primary); }
.toggle-slider { width:18px; height:18px; border-radius:50%; background:#fff; position:absolute; top:3px; left:3px; transition:transform .22s; box-shadow:0 1px 4px rgba(0,0,0,.2); }
.toggle-switch.on .toggle-slider { transform:translateX(18px); }

.checkbox-group { display:flex; flex-wrap:wrap; gap:.35rem; justify-content:center; }
.checkbox-item { display:flex; align-items:center; gap:.3rem; padding:.25rem .45rem; border-radius:8px; cursor:pointer; font-size:.68rem; color:var(--text-primary); border:1.5px solid var(--border); background:var(--bg-card); transition:all .18s; user-select:none; }
.checkbox-item input[type=checkbox] { accent-color:var(--primary); width:12px; height:12px; cursor:pointer; }
.checkbox-label { font-weight:500; }

.settings-tabs { display:flex; gap:.35rem; width:100%; margin-bottom:.35rem; margin-top:.2rem; }
.settings-tab,
.audio-mode-btn { border-radius:8px; border:1.5px solid var(--border); background:var(--gradient-card); color:var(--text-secondary); font-family:'Poppins',sans-serif; font-weight:600; cursor:pointer; transition:all .2s; display:flex; align-items:center; justify-content:center; gap:.3rem; }
.settings-tab { flex:1; padding:.3rem .45rem; border-radius:7px; font-size:.62rem; gap:.28rem; }
.settings-tab-panel { width:100%; }
.audio-mode-btns { display:flex; gap:.4rem; margin-bottom:.6rem; }
.audio-mode-btn { flex:1; padding:.45rem .4rem; font-size:.72rem; }
.font-preview { text-align:center; margin-top:.45rem; padding:.75rem .65rem; background:var(--gradient-card); border:1px solid var(--border); border-radius:8px; width:100%; box-sizing:border-box; height:auto; min-height:0; }
.font-preview--arabic { font-size:1.15rem; color:var(--primary); direction:rtl; line-height:2.4; display:block; }
.font-preview--translation { font-size:.88rem; color:var(--text-primary); line-height:1.6; }
.font-size-display { text-align:center; font-weight:600; color:var(--primary); margin-top:.28rem; font-size:.8rem; }

.text-style-btns { display:flex; gap:.35rem; flex-wrap:wrap; justify-content:center; }
.text-style-btn { min-width:34px; height:34px; border-radius:8px; border:1.5px solid var(--border); background:var(--bg-card); color:var(--text-secondary); cursor:pointer; font-size:.85rem; font-family:'Georgia',serif; display:flex; align-items:center; justify-content:center; transition:all .18s; }

.setting-color-row { display:flex; align-items:center; justify-content:center; gap:.65rem; width:100%; }
.setting-color-row input[type="color"] { flex:1; max-width:200px; height:34px; padding:2px 4px; border-radius:7px; border:1.5px solid var(--border); cursor:pointer; }
.btn-reset-color { background:var(--gradient-card); border:1.5px solid var(--border); border-radius:7px; padding:.38rem .65rem; cursor:pointer; color:var(--text-primary); font-family:'Poppins',sans-serif; font-size:.78rem; font-weight:600; white-space:nowrap; transition:all .25s; }
.color-mode-label { font-size:.72rem; color:var(--text-secondary); margin-top:.3rem; text-align:center; }

.settings-save-banner { padding:.3rem .75rem; background:rgba(0,151,178,.06); border-bottom:1px solid rgba(0,151,178,.14); font-size:.68rem; color:var(--text-primary); text-align:center; flex-shrink:0; }
.settings-save-link { color:var(--primary); font-weight:700; text-decoration:underline; }
.settings-save-link:hover { opacity:.8; }

.hidden { display:none; }

.verse-action-list { padding:.5rem; display:flex; flex-direction:column; gap:.3rem; }
.verse-action-row,.word-search-btn { display:flex; align-items:center; gap:.65rem; padding:.6rem .85rem; border-radius:10px; cursor:pointer; border:1.5px solid var(--border); background:var(--bg-card); font-weight:600; color:var(--text-primary); transition:all .18s; }
.verse-action-row { font-size:.83rem; padding:.65rem .85rem; }
.word-search-btn { font-size:.8rem; text-decoration:none; }
.verse-action-row i { font-size:1.05rem; color:var(--primary); flex-shrink:0; }
.verse-action-row.offline-ready { border-color:#16a34a; color:#16a34a; }
.verse-action-row.offline-ready i { color:#16a34a; }
.verse-action-row.offline-downloading { pointer-events:none; opacity:.75; }

.verse-action-toggle { justify-content:space-between; }
.verse-action-toggle .va-toggle-left { display:flex; align-items:center; gap:.65rem; flex:1; }
.verse-action-toggle .va-toggle-left i { font-size:1.05rem; color:var(--primary); flex-shrink:0; }
.va-toggle-badge { font-size:.68rem; font-weight:700; padding:.18rem .55rem; border-radius:20px; border:1.5px solid var(--border); background:var(--bg-secondary); color:var(--text-muted); transition:all .18s; white-space:nowrap; flex-shrink:0; }
.verse-action-toggle.toggle-on .va-toggle-badge { background:var(--gradient-primary); color:#fff; border-color:var(--primary); }
.verse-action-toggle.toggle-on { border-color:var(--primary); background:var(--primary-light); }

.word-search-header-word { display:block; font-family:var(--font-arabic); font-size:1.6rem; text-align:center; color:var(--primary); padding:.5rem; direction:rtl; }
.word-search-btns { padding:.5rem .75rem; display:flex; flex-direction:column; gap:.4rem; }
.word-search-btn i { font-size:1rem; color:var(--primary); flex-shrink:0; }
.word-search-btn:hover { border-color:var(--primary); background:var(--primary-light); }
.word-search-btn span.arrow { margin-left:auto; opacity:.4; font-size:.75rem; }

#audioPlayer, #surahFullscreenOverlay #fsAudioPlayerClone {
  position:fixed; bottom:0; left:0; right:0; z-index:9500;
  background:rgba(var(--bg-card-rgb, 255,255,255),.70);
  border-top:1px solid rgba(var(--bg-card-rgb, 255,255,255),.2); padding:.55rem 1rem;
  display:none; flex-direction:column; gap:.35rem;
}
#audioPlayer.visible, #surahFullscreenOverlay #fsAudioPlayerClone.visible { display:flex; }
.player-info { display:flex; align-items:center; gap:.5rem; min-width:0; }
.player-info-text { flex:1; min-width:0; }
.player-surah-name { font-size:.8rem; font-weight:700; color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.player-reciter { font-size:.68rem; color:var(--text-secondary); }
.player-controls { display:flex; align-items:center; gap:.4rem; justify-content:center; }
.repeat-label { font-size:.55rem; font-weight:700; line-height:1; margin-left:1px; }
.player-progress-bar { width:100%; height:4px; background:var(--border); border-radius:2px; position:relative; cursor:pointer; overflow:hidden; }
.player-progress-fill { height:100%; background:var(--gradient-primary); border-radius:2px; transition:width .3s linear; width:0%; }
.player-times { display:flex; justify-content:space-between; font-size:.62rem; color:var(--text-muted); margin-top:.2rem; }
.player-verse-text { font-size:.7rem; color:var(--text-secondary); text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-style:italic; }
audio { display:none; }
.player-btn.play-pause.autoplay-blocked { box-shadow:0 0 0 2px var(--primary); }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }

.orn-paren--inline { font-family:var(--font-arabic); color:var(--primary); direction:ltr; display:inline-flex; align-items:center; justify-content:center; line-height:1; vertical-align:middle; }
.notice-body h4 { font-size:.72rem; font-weight:700; color:var(--primary); text-transform:uppercase; letter-spacing:.05em; margin:.65rem 0 .25rem; text-align:center; }
.notice-body h4:first-child { margin-top:0; }
.notice-body p { margin-bottom:.4rem; text-align:center; font-size:.76rem; line-height:1.55; }

#activeFilterBanner { display:none; align-items:center; gap:.5rem; padding:.4rem .75rem; background:var(--primary-light); border:1.5px solid var(--primary); border-radius:10px; margin-bottom:.65rem; font-size:.75rem; flex-wrap:wrap; }
#activeFilterBanner.visible { display:flex; }
.afb-left { display:flex; align-items:center; gap:.35rem; flex:1; flex-wrap:wrap; }
.afb-left i { color:var(--primary); }
.afb-tags { display:flex; gap:.3rem; flex-wrap:wrap; align-items:center; }
.afb-tag { background:var(--primary); color:#fff; font-size:.68rem; font-weight:600; padding:.1rem .45rem; border-radius:10px; }
.afb-tag--orn { background:none; border:none; padding:0 .08rem; display:inline-flex; align-items:center; justify-content:center; color:var(--primary); height:1.6rem; vertical-align:middle; }
.afb-tag--orn .orn-official { display:inline-flex; align-items:center; justify-content:center; width:1.5rem; height:1.5rem; transform:translateY(.08em); }
.afb-tag--orn .orn-official-glyph { font-size:1.5rem; color:var(--primary); line-height:1; }
.afb-tag--orn .orn-official-num { font-size:.65em; color:var(--primary); font-weight:700; transform:translate(-50%, calc(-50% - .22em)); }
.afb-tag--orn .orn-paren--inline { font-size:1.3rem; color:var(--primary); font-family:var(--font-arabic); line-height:1; display:inline-flex; align-items:center; justify-content:center; height:1.5rem; }
#activeFilterBanner button { background:none; border:1.5px solid var(--primary); color:var(--primary); border-radius:8px; padding:.25rem .65rem; font-size:.72rem; font-weight:600; cursor:pointer; font-family:'Poppins',sans-serif; white-space:nowrap; transition:all .18s; }
#activeFilterBanner button:hover { background:var(--primary); color:#fff; }

.verse-item.verse-hidden{display:none;visibility:hidden;height:0;padding:0;margin:0;border:none;overflow:hidden;}

.pl-type-tabs { display:flex; gap:0; border:1.5px solid var(--border); border-radius:10px; overflow:hidden; margin-bottom:.6rem; }
.pl-type-tab { flex:1; padding:.42rem .5rem; border:none; background:var(--gradient-card); color:var(--text-secondary); font-family:'Poppins',sans-serif; font-size:.75rem; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:.3rem; transition:all .18s; border-right:1.5px solid var(--border); }
.pl-type-tab:last-child { border-right:none; }
.pl-type-tab.active { background:var(--gradient-primary); color:#fff; }
.pl-type-tab i { font-size:.9rem; }

.pl-type-badge-surah,
.pl-type-badge-verse { display:inline-flex;align-items:center;gap:.2rem;padding:.1rem .45rem;border-radius:6px;font-size:.62rem;font-weight:700;background:rgba(0,151,178,.12);color:var(--primary);border:1px solid rgba(0,151,178,.25);white-space:nowrap;flex-shrink:0; }
html.dark .pl-type-badge-surah,
html.dark .pl-type-badge-verse { background:var(--primary-light); border-color:var(--border-light); }

.pl-view-badge-row { display:flex; align-items:center; justify-content:center; gap:.4rem; margin-bottom:.35rem; }

.fm-section-title.pl-section-title-gap,
.pl-section-title-gap { margin-bottom:.4rem; }

.pl-count-label { font-size:.62rem; color:var(--text-secondary); font-weight:400; }

.pl-edit-items-scroll { max-height:200px; overflow-y:auto; display:flex; flex-direction:column; gap:.45rem; }
.pl-edit-items-scroll--verse { max-height:180px; }

.pl-import-section { display:flex; flex-direction:column; gap:.3rem; margin-top:.5rem; }
.pl-import-section--sm { margin-top:.1rem; }

.pl-import-label { font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-secondary); text-align:center; }

.pl-import-btns { display:flex; gap:.4rem; }

.pl-import-btn { flex:1; justify-content:center; font-size:.74rem; }

.pl-footer-block { display:flex; flex-direction:column; gap:.35rem; width:100%; }

.pl-footer-row { display:flex; gap:.4rem; }

.pl-footer-name-input { width:100%; }

.pl-footer-back-btn { flex:0 0 auto; padding:.38rem .65rem; }

.pl-footer-save-btn { flex:1; justify-content:center; }

.pl-inline-confirm-btn { padding:.28rem .6rem; flex-shrink:0; }
.pl-inline-cancel-btn  { padding:.28rem .5rem;  flex-shrink:0; }

.fm-btn.pl-verse-primary { background:var(--gradient-primary); border-color:transparent; color:#fff; }
.fm-btn.pl-verse-primary:hover { opacity:.9; }
.fm-btn.pl-verse-outline { border-color:var(--primary); color:var(--primary); background:transparent; }
.fm-btn.pl-verse-outline:hover { background:var(--primary-light); }

.pl-verse-item { display:flex; align-items:center; gap:.4rem; padding:.3rem .5rem; border-radius:8px; border:1.5px solid var(--border); background:var(--gradient-card); }
.pl-verse-item-label { flex:1; font-size:.76rem; font-weight:600; color:var(--text-primary); }
.pl-verse-item-del, .pl-manual-item-del { background:rgba(239,68,68,.1); border:1.5px solid rgba(239,68,68,.3); border-radius:50%; width:20px; height:20px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#ef4444; font-size:.75rem; flex-shrink:0; transition:background .2s; padding:0; }
.pl-verse-item-del:hover, .pl-manual-item-del:hover { background:rgba(239,68,68,.22); }

.pl-verse-tag-pill { background:none; color:var(--primary); font-size:.72rem; font-weight:700; font-family:var(--font-arabic); line-height:1; }

.modal-body>div{width:100%;padding-bottom:.55rem;border-bottom:1px solid var(--border);}
.modal-body>div:last-child{border-bottom:none;padding-bottom:0;}
.modal-footer{padding:.5rem .8rem;display:flex;flex-direction:column;gap:.35rem;border-top:1px solid var(--border);background:var(--bg-card);flex-shrink:0;}
.modal-footer .fm-footer-row{display:flex;gap:.4rem;width:100%;}
.modal-footer .fm-footer-row .fm-btn{flex:1;justify-content:center;}
.modal-footer>.fm-btn.primary{width:100%;justify-content:center;}

#verseActionModal .sheet-modal-content { max-width:380px; }
#wordSearchModal  .sheet-modal-content { max-width:400px; }
#noticeModal      .sheet-modal-content { max-width:520px; }
#filterModal      .sheet-modal-content,
#playlistModal    .sheet-modal-content { max-width:420px; }
.fm-section-title{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-secondary);margin-bottom:.3rem;text-align:center;display:flex;align-items:center;justify-content:center;gap:.25rem;}
.fm-chips{display:flex;flex-wrap:wrap;gap:.3rem;justify-content:center;}
.fm-chip,
.fm-vf-type-btn{border-radius:999px;border:1.5px solid var(--border);color:var(--text-secondary);font-size:.72rem;font-weight:600;cursor:pointer;transition:all .15s;user-select:none;line-height:1.4;font-family:'Poppins',sans-serif;}
.fm-chip{padding:.22rem .6rem;background:var(--bg-card);}
.fm-vf-type-btn{padding:.28rem .65rem;background:var(--gradient-card);white-space:nowrap;}
.fm-chip.active,.fm-vf-type-btn.active{background:var(--gradient-primary);border-color:transparent;color:#fff;}
#cfmItemsGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:.5rem;max-height:calc(2 * 44px + .5rem);overflow-y:auto;padding:3px;scrollbar-width:thin;}
.cfm-item{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.15rem .2rem;border-radius:8px;border:1.5px solid var(--border);background:var(--bg-card);cursor:pointer;transition:all .14s;text-align:center;gap:.18rem;min-height:44px;}
.cfm-item:hover{border-color:var(--primary);}
.cfm-item.selected{background:var(--gradient-primary);border-color:transparent;color:#fff;}
.cfm-item.selected .cfm-item-num,
.cfm-item.selected .cfm-item-label,
.cfm-item.selected .orn-official-glyph,
.cfm-item.selected .orn-official-num,
.cfm-item.selected .orn-paren--inline { color:#fff; }
.cfm-item-num{font-size:.88rem;font-weight:700;line-height:1;}
.cfm-item-label{font-size:.52rem;opacity:.8;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cfm-item.hidden-item{display:none;}
#cfmNoResults{display:none;text-align:center;padding:1.5rem 1rem;color:var(--text-secondary);font-size:.85rem;grid-column:1/-1;}
#cfmSearch{width:100%;padding:.36rem .6rem .36rem 1.9rem;font-size:.82rem;box-sizing:border-box;border:1.5px solid var(--border);border-radius:8px;background:var(--bg-card);color:var(--text-primary);font-family:'Poppins',sans-serif;transition:border-color .18s;}
.fm-ms-row{display:flex;align-items:center;gap:.35rem;background:var(--gradient-card);border:1.5px solid var(--border);border-radius:10px;padding:.42rem .55rem;transition:border-color .2s;}
#cfmMsRows{display:flex;flex-direction:column;gap:.45rem;}
.fm-ms-row:focus-within{border-color:var(--primary);}
.fm-ms-select,
.fm-ms-verses { padding:.26rem .35rem; font-size:.74rem; border-radius:6px; border:1.5px solid var(--border); background:var(--bg-card); color:var(--text-primary); font-family:'Poppins',sans-serif; }
.fm-ms-select { flex:0 0 auto; width:115px; }
.fm-ms-verses { flex:1; padding:.26rem .4rem; min-width:0; }
.fm-ms-verses::placeholder { color:var(--text-secondary); font-size:.68rem; }
.fm-ms-del{background:rgba(239,68,68,.1);border:1.5px solid rgba(239,68,68,.3);border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#ef4444;font-size:.78rem;flex-shrink:0;transition:background .2s;}
.fm-ms-del:hover{background:rgba(239,68,68,.22);}
.fm-ms-add-btn{display:flex;align-items:center;justify-content:center;gap:.3rem;padding:.3rem .75rem;border:1.5px dashed var(--primary);border-radius:7px;color:var(--primary);font-size:.74rem;font-weight:600;cursor:pointer;background:transparent;font-family:'Poppins',sans-serif;transition:background .2s;}
.fm-ms-add-btn:hover{background:rgba(0,151,178,.07);}
.fm-ms-hint-row{font-size:.65rem;color:var(--text-secondary);text-align:center;font-style:italic;}
.fm-btn{padding:.38rem .85rem;border-radius:8px;border:1.5px solid var(--border);background:var(--bg-card);color:var(--text-secondary);font-size:.78rem;font-weight:600;cursor:pointer;font-family:'Poppins',sans-serif;display:flex;align-items:center;gap:.3rem;transition:all .16s;}
.fm-btn.primary{background:var(--gradient-primary);border-color:transparent;color:#fff;}
.fm-btn.primary:hover{opacity:.9;}
.fm-btn.save{background:transparent;border-color:var(--primary);color:var(--primary);}
.fm-btn.save:hover{background:rgba(0,151,178,.08);}
.fm-history-header{display:flex;align-items:center;justify-content:center;gap:.3rem;margin-bottom:.3rem;}
#cfmHistorySection.cfm-history-hidden{display:none;}
.fm-history-list,.fm-saved-list{display:flex;flex-direction:column;gap:.28rem;}
.fm-history-list{max-height:160px;overflow-y:auto;scrollbar-width:thin;}
.fm-saved-empty,.fm-history-empty{font-size:.7rem;color:var(--text-secondary);font-style:italic;text-align:center;padding:.35rem 0;}
.fm-saved-item{display:flex;align-items:center;gap:.35rem;padding:.32rem .5rem;border-radius:8px;border:1.5px solid var(--border);background:var(--gradient-card);cursor:pointer;transition:border-color .18s,background .18s;}
.fm-saved-item:hover{border-color:var(--primary);background:rgba(0,151,178,.06);}
html.dark .fm-saved-item:hover{background:rgba(61,122,82,.08);}
.fm-saved-item-icon{font-size:.9rem;color:var(--primary);flex-shrink:0;opacity:.8;}
.fm-saved-item-name{flex:1;font-size:.76rem;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;}
.fm-history-date{font-size:.62rem;color:var(--text-secondary);white-space:nowrap;flex-shrink:0;}
.fm-saved-item-rename,.fm-saved-item-del,.fm-history-clear-btn{background:none;border:none;cursor:pointer;font-size:.82rem;padding:2px 3px;border-radius:4px;flex-shrink:0;line-height:1;transition:color .15s,background .15s;font-family:'Poppins',sans-serif;}
.fm-saved-item-rename{color:var(--text-secondary);opacity:.65;}
.fm-saved-item-rename:hover{color:var(--primary);opacity:1;background:rgba(0,151,178,.09);}
.fm-saved-item-del{color:#ef4444;opacity:.65;}
.fm-saved-item-del:hover{opacity:1;background:rgba(239,68,68,.1);}
.fm-history-add-pl{display:inline-flex;align-items:center;justify-content:center;width:1.4rem;height:1.4rem;border-radius:50%;border:none;background:rgba(0,151,178,.12);color:var(--primary);cursor:pointer;font-size:.82rem;flex-shrink:0;transition:background .15s;padding:0;}
.fm-history-add-pl:hover{background:rgba(0,151,178,.22);}
.fm-history-clear-btn{color:var(--text-secondary);display:flex;align-items:center;gap:.2rem;padding:.1rem .3rem;font-size:.65rem;font-weight:600;}
.fm-history-clear-btn:hover{color:#ef4444;}
.fm-save-name-row{display:none;align-items:center;gap:.35rem;margin-top:.4rem;}
.fm-save-name-row.visible{display:flex;}
.fm-save-name-input{flex:1;padding:.32rem .55rem;border-radius:7px;font-size:.78rem;min-width:0;border:1.5px solid var(--border);background:var(--bg-card);color:var(--text-primary);font-family:'Poppins',sans-serif;}
.fm-save-name-input::placeholder{color:var(--text-secondary);}

::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--border); border-radius:10px; }
::-webkit-scrollbar-thumb { background:var(--primary); border-radius:10px; }

.pl-manual-item{display:flex;align-items:center;gap:.35rem;padding:.32rem .5rem;border-radius:8px;border:1.5px solid var(--border);background:var(--gradient-card);}
.pl-manual-item-num{min-width:28px;border-radius:0;background:none;color:var(--primary);display:inline-flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;flex-shrink:0;}
.pl-manual-item-name{flex:1;font-size:.74rem;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.pl-type-badge{display:inline-flex;align-items:center;gap:.18rem;font-size:.58rem;font-weight:700;padding:.1rem .38rem;border-radius:999px;flex-shrink:0;line-height:1.4;}
.pl-type-badge.filter{background:rgba(0,151,178,.14);color:var(--primary);}
.pl-type-badge.manual{background:rgba(168,85,247,.15);color:#9333ea;}

#plSaveChoiceOverlay{display:none;position:fixed;inset:0;z-index:9500;background:rgba(0,0,0,.48);align-items:flex-end;justify-content:center;}
#plSaveChoiceOverlay.visible{display:flex;}
#plSaveChoicePanel{background:var(--bg-card);border-radius:18px 18px 0 0;width:100%;max-width:440px;padding:1rem 1rem .5rem;box-shadow:0 -6px 28px rgba(0,0,0,.22);max-height:78vh;overflow-y:auto;animation:slideUpPanel .22s ease;}
@keyframes slideUpPanel{from{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}
.plsc-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem;}
.plsc-title{font-size:.92rem;font-weight:700;color:var(--text-primary);}
.plsc-close{background:none;border:none;cursor:pointer;color:var(--text-secondary);font-size:1.25rem;line-height:1;padding:2px;border-radius:6px;transition:color .15s;}
.plsc-close:hover{color:var(--text-primary);}
.plsc-section{margin-bottom:.8rem;}
.plsc-existing-item{display:flex;align-items:center;gap:.35rem;padding:.32rem .5rem;border-radius:8px;border:1.5px solid var(--border);background:var(--gradient-card);cursor:pointer;transition:border-color .18s,background .18s;margin-bottom:.25rem;}
.plsc-existing-item:hover{border-color:var(--primary);background:rgba(0,151,178,.06);}
.plsc-existing-item-name{flex:1;font-size:.76rem;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.plsc-existing-item-desc{font-size:.62rem;color:var(--text-secondary);white-space:nowrap;flex-shrink:0;max-width:90px;overflow:hidden;text-overflow:ellipsis;}

#plManualSurahGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:.25rem;max-height:130px;overflow-y:auto;padding:2px;scrollbar-width:thin;}

@media (max-width:600px) {
  .page-header-arabic { font-size:1.4rem; }
  .page-header-title { font-size:1.4rem; }
  .checkbox-item { font-size:.65rem; padding:.22rem .4rem; gap:.25rem; }
  .checkbox-item input[type=checkbox] { width:12px; height:12px; }

  .verse-columns-wrapper:is(.columns-2,.columns-3,.columns-4) .verse-item {
    padding: .4rem .3rem;
  }
  .verse-columns-wrapper:is(.columns-2,.columns-3,.columns-4) .verse-item .verse-text-arabic {
    font-size: 1rem;
    line-height: 2;
  }
  .verse-columns-wrapper:is(.columns-2,.columns-3,.columns-4) .verse-item :is(.verse-translation-text,.verse-phonetic-text) {
    font-size: .72rem;
    line-height: 1.6;
  }

  .verse-columns-wrapper:is(.columns-3,.columns-4) .verse-row-wrap {
    flex-direction: column;
  }
  .verse-columns-wrapper:is(.columns-3,.columns-4) .verse-row-wrap .verse-item {
    border-right: none;
    border-bottom: 1px solid var(--border-light);
  }
  .verse-columns-wrapper:is(.columns-3,.columns-4) .verse-row-wrap .verse-item:last-child {
    border-bottom: none;
  }
}

.vc-progress { text-align:center; padding:2rem; color:var(--text-secondary); }
.vc-progress-row { display:flex; align-items:center; justify-content:center; gap:.5rem; font-size:.85rem; }

#surahList, #surahCards { display:flex; flex-direction:column; }

#infoPopover {
  position:fixed; z-index:9800;
  display:none;
  filter:drop-shadow(0 4px 16px rgba(0,0,0,.18));
}
#infoPopover.visible { display:block; }
#infoPopoverInner {
  background:var(--bg-card);
  border:1.5px solid var(--border);
  border-radius:12px;
  padding:.75rem .9rem;
  min-width:210px; max-width:260px;
  font-family:'Poppins',sans-serif;
}
.info-modal-title-ar {
  font-family:var(--font-arabic);
  font-size:1.3rem; color:var(--primary);
  direction:rtl; text-align:center;
  display:block; margin-bottom:.1rem;
}
.info-modal-subtitle {
  text-align:center; font-size:.68rem;
  color:var(--text-secondary); margin-bottom:.65rem;
}
.info-stats-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:.4rem;
}
.info-stat-card {
  background:var(--bg-secondary);
  border:1px solid var(--border);
  border-radius:8px;
  padding:.5rem .4rem;
  display:flex; flex-direction:column; gap:.12rem;
  text-align:center;
}
.info-stat-icon { font-size:1rem; color:var(--primary); }
.info-stat-value { font-size:.85rem; font-weight:700; color:var(--text-primary); line-height:1.2; }
.info-stat-label { font-size:.58rem; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.04em; }
.info-note {
  font-size:.62rem; color:var(--text-muted);
  text-align:center; font-style:italic;
  margin-top:.5rem; padding-top:.4rem;
  border-top:1px solid var(--border);
}
.info-popover-header {
  display:flex; align-items:center; justify-content:flex-end;
  margin-bottom:.1rem;
}
.info-popover-close {
  width:22px; height:22px; border-radius:6px; border:none;
  background:transparent; color:var(--text-secondary);
  cursor:pointer; font-size:1rem; display:flex; align-items:center;
  justify-content:center; padding:0; transition:color .15s, background .15s;
  line-height:1; flex-shrink:0;
}
.info-popover-close:hover { color:var(--text-primary); background:var(--bg-secondary); }
.info-icon {
  color:var(--text-muted); font-size:.8rem;
  cursor:pointer; vertical-align:middle;
  margin-left:.3rem; transition:color .15s;
  background:none; border:none; padding:0; line-height:1;
}
.info-icon:hover { color:var(--primary); }

.surah-fs-btn {
  width:28px; height:28px; border-radius:8px; border:1.5px solid var(--border);
  background:var(--bg-card); color:var(--text-secondary); display:flex; align-items:center;
  justify-content:center; cursor:pointer; font-size:1rem; flex-shrink:0;
  transition:all .18s; padding:0;
}
.surah-fs-btn:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-light); }
.surah-fs-btn.active { background:var(--gradient-primary); color:#fff; border-color:var(--primary); }

.surah-resize-handle {
  width: calc(100% - 2rem);
  margin: 0.5rem 1rem 0.6rem;
  height: 28px;
  cursor: ns-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  background: transparent;
  border: none;
  border-radius: 0;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  transition: box-shadow .18s;
  box-shadow: none;
  position: relative;
}
.surah-resize-handle:hover {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.surah-resize-handle.dragging {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.surah-resize-handle-icon {
  font-size: .8rem;
  color: var(--text-secondary);
  opacity: .55;
  transition: opacity .18s, color .18s;
  line-height: 1;
  pointer-events: none;
}
.surah-resize-handle:hover .surah-resize-handle-icon,
.surah-resize-handle.dragging .surah-resize-handle-icon {
  opacity: 1;
  color: var(--primary);
}

.surah-resize-handle-bar {
  width: 40px; height: 4px; border-radius: 2px;
  background: var(--border);
  transition: background .18s, width .18s;
  pointer-events: none;
}
.surah-resize-handle:hover .surah-resize-handle-bar,
.surah-resize-handle.dragging .surah-resize-handle-bar {
  background: var(--primary);
  width: 48px;
}

.surah-resize-handle:focus,
.surah-resize-handle:focus-visible {
  outline: none;
}

.surah-resize-handle-label {
  font-size: .6rem;
  font-weight: 600;
  color: var(--text-secondary);
  opacity: .5;
  pointer-events: none;
  letter-spacing: .04em;
  transition: opacity .18s, color .18s;
}
.surah-resize-handle:hover .surah-resize-handle-label,
.surah-resize-handle.dragging .surah-resize-handle-label {
  opacity: .85;
  color: var(--primary);
}

#surahFullscreenOverlay {
  display:none;
  position:fixed; inset:0; z-index:9900;
  background:var(--bg-primary);
  flex-direction:column;
  overflow:hidden;
}
#surahFullscreenOverlay.active { display:flex; }

.fs-header {
  display:flex; align-items:center; gap:.6rem;
  padding:.55rem .9rem;
  background:var(--gradient-primary);
  color:#fff;
  flex-shrink:0;
  min-height:52px;
}
.fs-header-info { flex:1; min-width:0; display:flex; flex-direction:column; }
.fs-header-name { font-size:.85rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fs-header-meta { font-size:.65rem; opacity:.78; }
.fs-close-btn, .fs-pl-btn {
  width:32px; height:32px;
  background:rgba(255,255,255,.18); border:none; color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0; transition:background .2s;
}
.fs-close-btn { border-radius:50%; font-size:1.2rem; }
.fs-pl-btn    { border-radius:8px; font-size:1.1rem; }
.fs-close-btn:hover, .fs-pl-btn:hover { background:rgba(255,255,255,.35); }

.fs-body {
  flex:1; overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}

#recentReadingsSection { margin:0 0 .65rem 0; padding:0; border-radius:14px; overflow:hidden; border:1.5px solid var(--border); }
.recent-readings-header { display:flex; align-items:center; justify-content:space-between; padding:.65rem 1rem; cursor:pointer; user-select:none; background:var(--gradient-card); border-bottom:1.5px solid transparent; transition:all .2s; }
.recent-readings-header:hover { background:var(--bg-secondary); }
.recent-readings-header.open { border-bottom-color:var(--border); }
.recent-readings-title { display:flex; align-items:center; gap:.45rem; font-size:.82rem; font-weight:700; color:var(--primary); }
.recent-readings-title i { font-size:1.1rem; color:var(--primary); flex-shrink:0; }
.recent-readings-chevron { font-size:1rem; color:var(--text-secondary); transition:transform var(--transition-fast); }
.recent-readings-header.open .recent-readings-chevron { transform:rotate(180deg); }
.recent-readings-body { overflow:hidden; max-height:0; opacity:0; transition:max-height .35s ease, opacity .25s ease; padding:0 .5rem; }
.recent-readings-body.open { opacity:1; }
.recent-readings-clear { background:none; border:none; cursor:pointer; font-size:.7rem; color:var(--text-muted); padding:.2rem .4rem; border-radius:var(--radius-sm); transition:color var(--transition-fast),background var(--transition-fast); display:flex; align-items:center; gap:.25rem; }
.recent-readings-clear:hover { color:#ef4444; background:rgba(239,68,68,.08); }
.recent-readings-grid { display:flex; gap:.55rem; overflow-x:auto; scroll-behavior:smooth; padding:.25rem 0; scrollbar-width:none; flex:1; scroll-snap-type:x mandatory; }
.recent-readings-grid::-webkit-scrollbar { display:none; }
.recent-card { background:var(--bg-card); border:1px solid var(--border-light); border-radius:var(--radius-md); padding:.65rem .75rem .6rem; cursor:pointer; transition:transform var(--transition-fast),box-shadow var(--transition-fast),border-color var(--transition-fast); display:flex; flex-direction:column; gap:.35rem; position:relative; overflow:hidden; flex-shrink:0; width:160px; scroll-snap-align:start; }
.recent-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--gradient-primary); opacity:0; transition:opacity var(--transition-fast); }
.recent-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--primary); }
.recent-card:hover::before { opacity:1; }
.recent-card-del { position:absolute; bottom:.35rem; right:.35rem; width:20px; height:20px; border-radius:50%; border:none; background:transparent; color:var(--text-muted); font-size:.8rem; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:1; transition:background .15s,color .15s; padding:0; line-height:1; z-index:2; }
.recent-card-del:hover { background:rgba(220,50,50,.12); color:#dc3232; }
.recent-card-top { display:flex; align-items:center; justify-content:space-between; gap:.3rem; }
.recent-card-num { font-size:.85rem; font-weight:700; color:var(--primary); flex-shrink:0; line-height:1; }
.recent-card-ar { font-family:var(--font-arabic); font-size:1rem; color:var(--text-primary); text-align:right; line-height:1.2; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.recent-card-name { font-size:.78rem; font-weight:600; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.recent-card-trad { font-size:.68rem; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.recent-card-progress-wrap { display:flex; align-items:center; gap:.45rem; margin-top:.1rem; }
.recent-card-progress-bar { flex:1; height:4px; background:var(--border); border-radius:2px; overflow:hidden; }
.recent-card-progress-fill { height:100%; background:var(--gradient-primary); border-radius:2px; transition:width .4s ease; min-width:4px; }
.recent-card-progress-pct { font-size:.65rem; font-weight:700; color:var(--primary); flex-shrink:0; min-width:2.2rem; text-align:right; }
.recent-card-time { font-size:.62rem; color:var(--text-muted); display:flex; align-items:center; gap:.2rem; }
.recent-card-time i { font-size:.72rem; }