/* ============================================================
   حنان آنلاین — طراحی مینیمال قرآنی
   Design system: paper & ink + emerald + gold
   حالت لایت/دارک • انیمیشن نرم • اسکلتون • کتابخوان
   ============================================================ */

/* ---------- 1) Design tokens ---------- */
:root {
  --surface-2: #FBFAF6;
  --glow-brand: 0 0 0 1px rgba(13, 107, 91, .08), 0 14px 44px -20px rgba(13, 107, 91, .25);
  --bg: #FAF8F4;
  --bg-soft: #F2EFE8;
  --surface: #FFFFFF;
  --ink: #26302E;
  --ink-soft: #55645F;
  --muted: #8C9792;
  --line: #E8E3D7;
  --line-soft: #EFECE3;
  --brand: #0D6B5B;
  --brand-strong: #0A5749;
  --brand-soft: #EAF2EF;
  --gold: #A9832F;
  --gold-strong: #8F6D22;
  --gold-soft: #F6EFDC;
  --danger: #B4472F;
  --shadow-sm: 0 1px 2px rgba(38, 48, 46, .05);
  --shadow-md: 0 1px 2px rgba(38, 48, 46, .04), 0 10px 30px -12px rgba(38, 48, 46, .12);
  --shadow-lg: 0 24px 60px -20px rgba(38, 48, 46, .22);
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --font-ui: 'Vazirmatn', Tahoma, 'Segoe UI', sans-serif;
  --font-ar: 'Amiri', 'Scheherazade New', 'Noto Naskh Arabic', 'Vazirmatn', serif;
  --header-h: 64px;
  --ease: cubic-bezier(.22, .8, .32, 1);
}
[data-theme="dark"] {
  --bg: #0C1211;
  --bg-soft: #0F1715;
  --surface: #162019;
  --surface-2: #1B2620;
  --ink: #EDEAE0;
  --ink-soft: #B4BFBA;
  --muted: #85918C;
  --line: #2A3833;
  --line-soft: #202C28;
  --brand: #53C9AC;
  --brand-strong: #7BDCC2;
  --brand-soft: #13261F;
  --gold: #D9BC76;
  --gold-strong: #EACD8E;
  --gold-soft: #262113;
  --danger: #E89273;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 34px -14px rgba(0, 0, 0, .65);
  --shadow-lg: 0 28px 70px -24px rgba(0, 0, 0, .75);
  --glow-brand: 0 0 0 1px rgba(83, 201, 172, .16), 0 12px 40px -18px rgba(83, 201, 172, .28);
  --card: #1B2620;
}
/* v1.5 — اجزای قدیمی با رنگ ثابت، در دارکمود خوانا شوند */
[data-theme="dark"] .dua-paragraph-fa,
[data-theme="dark"] .nahj-fa,
[data-theme="dark"] .sahife-fa { color: var(--ink-soft); }
[data-theme="dark"] .dua-section-title,
[data-theme="dark"] .si-block h2 { color: var(--brand); }
[data-theme="dark"] .dua-note { color: var(--gold); }

/* ---------- 2) Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* عنصر پنهان همیشه پنهان بماند — حتی وقتی display در کلاس دیگری ست شده (باگ پخشکننده تمامصفحه) */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
::selection { background: color-mix(in srgb, var(--brand) 26%, transparent); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

/* اسکرولبار ظریف */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 40%, transparent); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--brand) 55%, transparent); border: 2px solid transparent; background-clip: content-box; }
body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.9;
  font-size: 15.5px;
  min-height: 100vh;
  transition: background-color .35s var(--ease), color .35s var(--ease);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--brand-strong); }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
::selection { background: var(--gold-soft); color: var(--gold-strong); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

/* گذار نرم هنگام تغییر تم */
html.theme-anim, html.theme-anim body, html.theme-anim *:not(.no-theme-anim) {
  transition: background-color .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), box-shadow .35s var(--ease) !important;
}

/* الگوی هندسی اسلامی — بسیار کمرنگ */
.islamic-pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%230D6B5B' stroke-opacity='.07'%3E%3Cpath d='M36 4 L52 20 L52 52 L36 68 L20 52 L20 20 Z'/%3E%3Cpath d='M36 14 L46 24 L46 48 L36 58 L26 48 L26 24 Z'/%3E%3Ccircle cx='36' cy='36' r='5'/%3E%3C/g%3E%3C/svg%3E");
}
[data-theme="dark"] .islamic-pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%234CBEA1' stroke-opacity='.06'%3E%3Cpath d='M36 4 L52 20 L52 52 L36 68 L20 52 L20 20 Z'/%3E%3Cpath d='M36 14 L46 24 L46 48 L36 58 L26 48 L26 24 Z'/%3E%3Ccircle cx='36' cy='36' r='5'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- 3) Utilities ---------- */
.container { max-width: 1120px; margin-inline: auto; padding-inline: 20px; }

.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  padding: 11px 26px; border-radius: 999px; font-size: 14px; font-weight: 600;
  border: 1px solid transparent; transition: all .25s var(--ease); line-height: 1.6;
}
.btn-primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--brand-strong); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); }
[data-theme="dark"] .btn-primary { color: #0B1512; }
[data-theme="dark"] .btn-primary:hover { color: #0B1512; }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-outline:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink-soft); border-color: transparent; }
.btn-ghost:hover { color: var(--brand); background: var(--brand-soft); }

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 12px; border-radius: 999px;
  background: var(--bg-soft); color: var(--ink-soft);
  font-size: 12px; border: 1px solid var(--line-soft);
}
.badge-gold { background: var(--gold-soft); color: var(--gold-strong); border-color: transparent; }
.badge-brand { background: var(--brand-soft); color: var(--brand); border-color: transparent; }

.section { padding-block: 56px 24px; }
.section-alt { background: var(--bg-soft); }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 26px; gap: 16px;
}
.section-head h2 { font-size: 22px; font-weight: 700; position: relative; padding-inline-start: 16px; }
.section-head h2::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 22px; border-radius: 4px;
  background: linear-gradient(180deg, var(--gold), var(--brand));
}
.section-more { font-size: 13px; color: var(--muted); white-space: nowrap; }
.section-more:hover { color: var(--brand); }

/* اسکلتون (لود اسکلتونی) */
.skeleton {
  position: relative; overflow: hidden; border-radius: var(--radius-sm);
  background: var(--line-soft); min-height: 14px;
}
.skeleton::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
  animation: shimmer 1.4s infinite;
}
[data-theme="dark"] .skeleton::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), transparent);
}
.skeleton-text { height: 13px; margin-bottom: 10px; }
.skeleton-text:last-child { width: 60%; }
.skeleton-title { height: 22px; width: 70%; margin-bottom: 14px; }
.skeleton-card { padding: 22px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface); }
.skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; }
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* انیمیشن ورود — فقط وقتی JS فعال است پنهان شود (بدون JS همه نمایاناند) */
html.js .fade-up { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
html.js .fade-up.visible { opacity: 1; transform: none; }
@keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.anim-in { animation: fade-in .5s var(--ease) both; }

.empty-state {
  text-align: center; padding: 48px 20px; color: var(--muted);
  background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius-lg);
}

.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-block: 20px; font-size: 12.5px; color: var(--muted); }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb a + a::before, .breadcrumb a + span::before { content: '›'; margin-inline-end: 8px; color: var(--line); }

/* ---------- 4) Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; height: var(--header-h);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow .3s var(--ease), background-color .35s var(--ease);
}
.site-header.scrolled { box-shadow: var(--shadow-md); }
.header-inner { display: flex; align-items: center; gap: 18px; height: var(--header-h); }
.logo { display: flex; align-items: center; gap: 10px; color: var(--ink); flex-shrink: 0; }
.logo img { width: 40px; height: 40px; border-radius: 11px; }
.logo-mark {
  width: 40px; height: 40px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-strong)); color: #fff;
  font-size: 20px; font-weight: 700; font-family: var(--font-ar);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15);
}
.logo-text { font-size: 16.5px; font-weight: 700; line-height: 1.3; display: flex; flex-direction: column; }
.logo-text small { font-size: 10.5px; font-weight: 500; color: var(--gold); letter-spacing: .04em; }
.main-nav { display: flex; align-items: center; gap: 4px; margin-inline-start: 8px; }
.nav-link {
  padding: 7px 14px; border-radius: 999px; font-size: 13.5px; color: var(--ink-soft); font-weight: 500;
  transition: all .2s var(--ease);
}
.nav-link:hover { color: var(--brand); background: var(--brand-soft); }
.nav-link.is-active { color: var(--brand); background: var(--brand-soft); font-weight: 600; }
.header-actions { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }
.header-search { position: relative; display: flex; align-items: center; }
.header-search input {
  width: 210px; height: 38px; padding-inline: 40px 14px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg-soft); font-size: 13px; color: var(--ink);
  transition: all .25s var(--ease);
}
.header-search input:focus { width: 250px; border-color: var(--brand); background: var(--surface); outline: none; box-shadow: 0 0 0 3px var(--brand-soft); }
.header-search input::placeholder { color: var(--muted); }
.header-search button {
  position: absolute; inset-inline-start: 6px; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--muted);
}
.search-suggestions {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; width: 320px; max-height: 380px; overflow: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 8px; z-index: 60;
}
.search-suggestions a {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-sm); color: var(--ink); font-size: 13.5px;
}
.search-suggestions a:hover { background: var(--brand-soft); color: var(--brand); }
.sg-badge { font-size: 11px; color: var(--gold); background: var(--gold-soft); border-radius: 999px; padding: 1px 10px; flex-shrink: 0; }
.sg-skeleton { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.sg-skeleton .skeleton { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; }
.sg-skeleton div { flex: 1; }

/* دکمه تم لایت/دارک */
.theme-toggle {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-soft); border: 1px solid var(--line); color: var(--ink-soft);
  transition: all .25s var(--ease);
}
.theme-toggle:hover { color: var(--gold); border-color: var(--gold); transform: rotate(15deg); }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* همبرگر موبایل */
.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 6px; }
.hamburger span { width: 21px; height: 2px; border-radius: 2px; background: var(--ink); transition: all .3s var(--ease); }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-overlay { position: fixed; inset: 0; background: rgba(14, 19, 18, .5); opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 48; }
.nav-overlay.show { opacity: 1; pointer-events: auto; }

/* ---------- 5) Hero ---------- */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line-soft); }
.hero-inner {
  display: grid; grid-template-columns: 1.25fr .75fr; gap: 48px; align-items: center;
  padding-block: 72px 64px;
}
.hero-text h1 { font-size: clamp(26px, 4.2vw, 40px); font-weight: 800; line-height: 1.55; letter-spacing: -.01em; }
.hero-accent { color: var(--brand); position: relative; white-space: nowrap; }
.hero-accent::after {
  content: ''; position: absolute; inset-inline: 0; bottom: 6px; height: 10px; z-index: -1;
  background: var(--gold-soft); border-radius: 6px; opacity: .8;
}
.hero-text p { margin-top: 18px; color: var(--ink-soft); font-size: 15.5px; max-width: 54ch; }
.hero-actions { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.hero-stats { display: grid; gap: 14px; }
.stat-box {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 18px 22px; box-shadow: var(--shadow-sm);
  transition: all .3s var(--ease);
}
.stat-box:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--line); }
.stat-box b { font-size: 26px; font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; }
.stat-box span { font-size: 13px; color: var(--muted); }
.hero-ayah {
  margin-top: 22px; padding: 18px 22px; text-align: center;
  font-family: var(--font-ar); font-size: 19px; line-height: 2.2; color: var(--ink-soft);
  background: var(--gold-soft); border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--gold) 25%, transparent);
}

/* ---------- 6) Surah grid & cards ---------- */
.surah-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.surah-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 16px 18px; color: var(--ink); position: relative; overflow: hidden;
  transition: all .3s var(--ease);
}
.surah-card::after {
  content: ''; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--gold), var(--brand));
  opacity: 0; transition: opacity .3s var(--ease);
}
.surah-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line); color: var(--ink); }
.surah-card:hover::after { opacity: 1; }
.surah-number {
  width: 42px; height: 42px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: var(--brand-soft); color: var(--brand); font-weight: 700; font-size: 15px;
  border-radius: 12px; font-variant-numeric: tabular-nums;
}
.surah-names { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.surah-names b { font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.surah-ar { font-family: var(--font-ar); font-size: 16px; color: var(--gold); line-height: 1.6; }
.surah-meta { font-size: 11.5px; color: var(--muted); white-space: nowrap; }

.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.content-card, .post-card {
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--line-soft); border-radius: var(--radius-lg); overflow: hidden;
  color: var(--ink); transition: all .3s var(--ease); height: 100%;
}
.content-card:hover, .post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line); color: var(--ink); }
.card-image { aspect-ratio: 16/9; overflow: hidden; background: var(--bg-soft); }
.card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.content-card:hover .card-image img, .post-card:hover .card-image img { transform: scale(1.04); }
.card-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ar); font-size: 34px; color: var(--gold); opacity: .55;
}
.card-body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; flex: 1; }
.card-title { font-size: 16px; font-weight: 700; line-height: 1.7; }
.card-excerpt { font-size: 13.5px; color: var(--ink-soft); line-height: 2; }
.card-meta { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 10px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line-soft); }
.card-views { display: inline-flex; align-items: center; gap: 5px; }
.card-link { color: inherit; }

/* ---------- 7) Archive ---------- */
.archive-header { padding-block: 34px 10px; text-align: center; }
.archive-header h1 { font-size: clamp(22px, 3vw, 30px); font-weight: 800; }
.archive-header p { color: var(--ink-soft); margin-top: 8px; font-size: 14px; }
.archive-count {
  display: inline-block; margin-top: 14px; padding: 4px 16px; border-radius: 999px;
  background: var(--gold-soft); color: var(--gold-strong); font-size: 12.5px;
}
.surah-filter { max-width: 460px; margin: 22px auto 30px; }
.surah-filter input, .ayah-search input, .search-page-form input {
  width: 100%; height: 46px; padding-inline: 20px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); font-size: 14px;
  transition: all .25s var(--ease);
}
.surah-filter input:focus, .ayah-search input:focus, .search-page-form input:focus {
  border-color: var(--brand); outline: none; box-shadow: 0 0 0 4px var(--brand-soft);
}

/* ---------- 8) Single (پست/صفحه) ---------- */
.single-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; padding-block: 10px 40px; align-items: start; }
.single-main { min-width: 0; }
.single-header { padding-block: 26px 6px; }
.single-header h1 { font-size: clamp(22px, 3.4vw, 32px); font-weight: 800; line-height: 1.6; }
.single-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 16px; font-size: 12.5px; color: var(--muted); }
.single-featured { margin-block: 22px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-soft); box-shadow: var(--shadow-md); }
.single-content { font-size: 15.5px; line-height: 2.25; color: var(--ink); }
.single-content p { margin-block: 14px; }
.single-content h2, .single-content h3 { margin-block: 30px 14px; font-weight: 700; line-height: 1.7; }
.single-content h2 { font-size: 20px; padding-inline-start: 14px; border-inline-start: 4px solid var(--gold); }
.single-content h3 { font-size: 17px; }
.single-content a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, var(--brand) 40%, transparent); }
.single-content img { border-radius: var(--radius); margin-block: 18px; }
.single-content blockquote {
  margin-block: 22px; padding: 18px 24px; background: var(--gold-soft);
  border-inline-start: 4px solid var(--gold); border-radius: var(--radius-sm);
  font-family: var(--font-ar); font-size: 17px; line-height: 2.2;
}
.single-content ul, .single-content ol { margin-block: 14px; padding-inline-start: 26px; }
.single-content li { margin-block: 6px; }
.single-content audio { width: 100%; margin-block: 14px; }
.single-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 26px; }
.single-tags a {
  font-size: 12px; padding: 4px 14px; border-radius: 999px;
  background: var(--bg-soft); border: 1px solid var(--line-soft); color: var(--ink-soft);
}
.single-tags a:hover { color: var(--brand); border-color: var(--brand); }
.related-section { margin-block: 30px; }
.related-section h2 { font-size: 18px; margin-bottom: 18px; }

/* FAQ */
.faq-section { margin-block: 26px; }
.faq-section h2 { font-size: 19px; margin-bottom: 16px; }
.faq-item { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; }
.faq-item summary { padding: 15px 20px; font-weight: 600; font-size: 14.5px; cursor: pointer; list-style: none; position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; position: absolute; inset-inline-end: 18px; color: var(--gold); font-size: 18px; transition: transform .3s var(--ease); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-answer { padding: 0 20px 16px; color: var(--ink-soft); font-size: 14px; line-height: 2.1; }

/* دیدگاهها */
.comments-section { margin-block: 34px; }
.comments-section h2 { font-size: 18px; margin-bottom: 18px; }
.comments-list { display: flex; flex-direction: column; gap: 12px; }
.comment { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 16px 18px; }
.comment-reply { margin-inline-start: 34px; }
.comment-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13px; }
.comment-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: var(--brand-soft); color: var(--brand);
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.comment-head b { font-size: 13.5px; }
.comment-head span { color: var(--muted); font-size: 11.5px; }
.comment-body { font-size: 14px; color: var(--ink-soft); line-height: 2; }
.comment-reply-btn { background: none; border: none; color: var(--brand); font-size: 12px; padding: 0; margin-top: 6px; }
.comment-form { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 22px; margin-top: 18px; }
.comment-form h3 { font-size: 15px; margin-bottom: 14px; }
.comment-form textarea, .comment-form input {
  width: 100%; padding: 11px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg); font-size: 13.5px; margin-bottom: 12px; transition: all .25s var(--ease);
}
.comment-form textarea:focus, .comment-form input:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--brand-soft); }
.comment-form textarea { min-height: 110px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hp-field { position: absolute; inset-inline-start: -9999px; }
.comment-result { padding: 12px 16px; border-radius: var(--radius-sm); background: var(--brand-soft); color: var(--brand); font-size: 13px; margin-top: 10px; }
.no-comments { color: var(--muted); font-size: 14px; text-align: center; padding: 26px; }
.h-captcha { margin-block: 10px; }

/* ---------- 9) صفحه سوره ---------- */
.surah-page { padding-bottom: 40px; }
.surah-header { text-align: center; padding-block: 30px 10px; }
.surah-header-ornament {
  font-family: var(--font-ar); font-size: 42px; color: var(--gold);
  line-height: 1.4; opacity: .9; margin-bottom: 6px;
}
.surah-header h1 { font-size: clamp(22px, 3.4vw, 30px); font-weight: 800; }
.surah-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.surah-desc { max-width: 72ch; margin: 18px auto 0; color: var(--ink-soft); font-size: 14.5px; text-align: center; }
.audio-box {
  display: flex; flex-direction: column; gap: 10px; max-width: 560px; margin: 24px auto 0;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  padding: 16px 20px; box-shadow: var(--shadow-sm);
}
.audio-label { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.audio-box audio { height: 40px; }
.ayah-search { max-width: 560px; margin: 26px auto 0; position: relative; }
.ayah-search-count { position: absolute; inset-inline-end: 18px; top: 50%; transform: translateY(-50%); font-size: 11.5px; color: var(--gold); }
.ayah-controls {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px;
  margin-top: 20px; padding: 12px 18px;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: 999px;
  width: fit-content; margin-inline: auto; box-shadow: var(--shadow-sm);
}
.toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-soft); cursor: pointer; user-select: none; }
.toggle input { accent-color: var(--brand); width: 15px; height: 15px; }
.font-size-control { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.font-size-control button {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--bg-soft); color: var(--ink); font-size: 15px; font-weight: 700;
  transition: all .2s var(--ease); display: inline-flex; align-items: center; justify-content: center;
}
.font-size-control button:hover { border-color: var(--brand); color: var(--brand); }
.reader-open-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 24px; margin-top: 20px; border-radius: 999px;
  background: var(--gold-soft); color: var(--gold-strong); font-size: 13.5px; font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  transition: all .25s var(--ease);
}
.reader-open-btn:hover { background: var(--gold); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* لیست آیات */
.ayah-list { --ar-scale: 1; max-width: 820px; margin: 30px auto 0; display: flex; flex-direction: column; gap: 4px; counter-reset: ayah; }
.ayah {
  position: relative; padding: 20px 24px; border-radius: var(--radius);
  transition: background-color .25s var(--ease), transform .25s var(--ease);
}
.ayah:hover { background: var(--surface); box-shadow: var(--shadow-sm); }
.ayah.search-hit { background: var(--gold-soft); }
.ayah-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ayah-num {
  min-width: 34px; height: 34px; padding-inline: 8px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-soft); color: var(--brand); border-radius: 50%;
  font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.ayah-play, .ayah-copy {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-soft); font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center; transition: all .2s var(--ease);
}
.ayah-play:hover, .ayah-copy:hover { color: var(--brand); border-color: var(--brand); }
.ayah-play.playing { background: var(--brand); color: #fff; border-color: var(--brand); }
.ayah-ar {
  font-family: var(--font-ar); font-size: calc(23px * var(--ar-scale)); line-height: 2.35;
  text-align: justify; text-align-last: center; color: var(--ink);
  margin-block: 10px 6px; word-spacing: .06em;
}
.ayah-end { color: var(--gold); font-size: .82em; white-space: nowrap; }
.ayah-fa { font-size: calc(14.5px * var(--ar-scale, 1)); color: var(--ink-soft); line-height: 2.1; margin-top: 8px; text-align: justify; }
.ayah-en { font-size: 13px; color: var(--muted); direction: ltr; text-align: left; line-height: 1.9; margin-top: 8px; font-family: 'Amiri Latin', Georgia, serif; }
.virtues-section, .post-extra { max-width: 820px; margin: 34px auto 0; }
.virtues-section h2 { font-size: 18px; margin-bottom: 14px; padding-inline-start: 14px; border-inline-start: 4px solid var(--gold); }
.surah-nav {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center;
  max-width: 820px; margin: 36px auto 0;
}
.surah-nav-item {
  padding: 13px 18px; text-align: center; font-size: 13px; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius);
  transition: all .25s var(--ease);
}
.surah-nav-item:hover { color: var(--brand); border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.surah-nav-all { font-weight: 700; color: var(--gold-strong); background: var(--gold-soft); border-color: transparent; }

/* ---------- 10) کتابخوان (Reader Mode) ---------- */
.reader-bar {
  position: fixed; top: 0; inset-inline: 0; z-index: 80; height: 54px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-soft);
  transform: translateY(-100%); transition: transform .35s var(--ease);
}
body.reader-mode .reader-bar { transform: none; }
.reader-bar .rb-btn {
  height: 34px; min-width: 34px; padding-inline: 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-soft); color: var(--ink-soft);
  font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; transition: all .2s var(--ease);
}
.reader-bar .rb-btn:hover { color: var(--brand); border-color: var(--brand); }
.reader-bar .rb-title { font-size: 13.5px; font-weight: 700; color: var(--ink); margin-inline-end: 8px; white-space: nowrap; }
.reader-bar .rb-close { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
body.reader-mode { --header-h: 0px; }
body.reader-mode .site-header,
body.reader-mode .site-footer,
body.reader-mode .breadcrumb,
body.reader-mode .surah-header,
body.reader-mode .audio-box,
body.reader-mode .ayah-search,
body.reader-mode .ayah-controls,
body.reader-mode .virtues-section,
body.reader-mode .post-extra,
body.reader-mode .surah-nav,
body.reader-mode .single-featured,
body.reader-mode .scroll-top { display: none !important; }
body.reader-mode .reader-bar-wrap { display: block; }
body.reader-mode .surah-page { padding-top: 70px; padding-bottom: 60px; }
body.reader-mode .ayah-list { max-width: 720px; }
body.reader-mode .ayah { padding-block: 26px; border-bottom: 1px solid var(--line-soft); border-radius: 0; }
body.reader-mode .ayah:last-child { border-bottom: none; }
body.reader-mode .ayah:hover { background: transparent; box-shadow: none; }
body.reader-mode .ayah-ar { font-size: calc(26px * var(--ar-scale) * var(--read-scale, 1)); }
body.reader-mode #main { animation: fade-in .5s var(--ease); }
.reader-bar-wrap { display: none; }

/* ---------- 11) جستجو و 404 ---------- */
.search-page-form { max-width: 560px; margin: 26px auto; }
.search-group-title { font-size: 15px; font-weight: 700; margin: 26px 0 14px; color: var(--ink); }
.suggest-box, .suggestion-links { margin-top: 10px; }
.suggest-list { display: flex; flex-direction: column; gap: 4px; }
.error-404 { padding-block: 60px; }
.error-404-box { text-align: center; max-width: 560px; margin-inline: auto; }
.error-404-code {
  font-size: clamp(72px, 14vw, 130px); font-weight: 800; line-height: 1.1;
  background: linear-gradient(135deg, var(--brand), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.error-404-box p { color: var(--ink-soft); margin-block: 14px 24px; }
.error-404-suggestions { margin-top: 30px; text-align: start; }

/* ---------- 12) صفحهبندی ---------- */
.pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-block: 34px; flex-wrap: wrap; }
.pagination a, .pagination span, .home-pagination a, .home-pagination span {
  min-width: 38px; height: 38px; padding-inline: 8px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); border: 1px solid var(--line-soft); background: var(--surface);
  font-size: 13px; color: var(--ink-soft); transition: all .2s var(--ease);
}
.pagination a:hover, .home-pagination a:hover { color: var(--brand); border-color: var(--brand); }
.pagination .current, .home-pagination .current { background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 700; }
.pagination .dots, .home-pagination .dots { border: none; background: none; }

/* ---------- 13) Footer ---------- */
.site-footer {
  margin-top: 60px; border-top: 1px solid var(--line-soft);
  background: var(--bg-soft);
}
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 34px; padding-block: 46px 36px; }
.footer-about p { font-size: 13px; color: var(--ink-soft); margin-top: 14px; line-height: 2.1; }
.footer-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15.5px; }
.footer-social { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.footer-social a {
  font-size: 12px; padding: 5px 14px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line-soft); color: var(--ink-soft);
}
.footer-social a:hover { color: var(--brand); border-color: var(--brand); }
.footer-col h3 { font-size: 13.5px; font-weight: 700; margin-bottom: 16px; color: var(--ink); position: relative; padding-inline-start: 12px; }
.footer-col h3::before { content: ''; position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 15px; border-radius: 3px; background: var(--gold); }
.footer-col a.footer-link { display: block; font-size: 13px; color: var(--ink-soft); padding-block: 5px; }
.footer-col a.footer-link:hover { color: var(--brand); transform: translateX(-3px); }
.footer-col .nav-link { display: block; padding: 5px 0; background: none; color: var(--ink-soft); font-size: 13px; }
.footer-col .nav-link:hover { color: var(--brand); }
.footer-bottom { border-top: 1px solid var(--line-soft); padding-block: 18px; }
.footer-bottom-inner { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }

/* ---------- 14) Loader / scroll-top / progress ---------- */
.page-loader {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  background: var(--bg); opacity: 1; transition: opacity .45s var(--ease);
}
.page-loader.done { opacity: 0; pointer-events: none; }
.loader-ring {
  width: 42px; height: 42px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--gold);
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.scroll-top {
  position: fixed; inset-inline-end: 22px; bottom: 22px; z-index: 40;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md);
  opacity: 0; transform: translateY(14px); transition: all .3s var(--ease); cursor: pointer;
}
.scroll-top.show { opacity: 1; transform: none; }
.scroll-top:hover { color: var(--gold); border-color: var(--gold); }
.reading-progress {
  position: fixed; top: 0; inset-inline-start: 0; height: 2.5px; width: 0; z-index: 90;
  background: linear-gradient(90deg, var(--brand), var(--gold));
  transition: width .1s linear;
}

/* ---------- 15) Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .fade-up { opacity: 1; transform: none; }
}

/* ---------- 16) Responsive ---------- */
@media (max-width: 1024px) {
  .single-layout { grid-template-columns: 1fr; }
  .hero-inner { grid-template-columns: 1fr; gap: 30px; padding-block: 48px 44px; }
  .hero-stats { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .main-nav {
    position: fixed; top: var(--header-h); inset-inline: 0; z-index: 49;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: 14px 20px 20px; margin: 0;
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: all .3s var(--ease); box-shadow: var(--shadow-lg);
  }
  .main-nav.open { transform: none; opacity: 1; pointer-events: auto; }
  .main-nav .nav-link { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 15px; }
  .hamburger { display: flex; }
  .header-search input { width: 150px; }
  .header-search input:focus { width: 170px; }
  .hero-stats { grid-template-columns: 1fr; }
  .section { padding-block: 40px 16px; }
  .surah-nav { grid-template-columns: 1fr; }
  .surah-nav-item:first-child { text-align: start; }
  .surah-nav-item:last-child { text-align: end; }
  .form-row { grid-template-columns: 1fr; }
  .ayah { padding: 16px 14px; }
  .ayah-ar { font-size: calc(20px * var(--ar-scale)); }
  .comment-reply { margin-inline-start: 18px; }
  .footer-grid { grid-template-columns: 1fr; gap: 26px; padding-block: 36px 26px; }
}
@media (max-width: 400px) {
  .container { padding-inline: 14px; }
  .header-search input { width: 120px; }
  .logo-text small { display: none; }
}


/* ============================================================
   ویژگیهای جدید: قرائت پیوسته + صفحه امروز + اسما الحسنی + PWA
   ============================================================ */

/* ---------- قرائت پیوسته ---------- */
/* ردیف اکشن‌های سوره: قرائت پیوسته / تمام‌صفحه / کتابخوان / تمرین حفظ — همه کنار هم */
.continuous-box {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px; margin-top: 18px;
}
.continuous-box .continuous-hint { display: block; flex-basis: 100%; margin-top: 2px; }
.btn-continuous {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 28px; border-radius: 999px; border: none;
  background: linear-gradient(135deg, var(--brand), var(--brand-strong));
  color: #fff; font-size: 14px; font-weight: 700; font-family: var(--font-ui);
  box-shadow: var(--shadow-md); transition: all .25s var(--ease);
}
.btn-continuous:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); filter: brightness(1.05); }
.btn-continuous:active { transform: translateY(0); }
.continuous-hint { font-size: 11.5px; color: var(--muted); }

/* ---------- آیه روز + دعای روز (صفحه اصلی) ---------- */
.home-daily-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.home-daily-card { margin-top: 0; }

/* هایلایت کاراوکهای آیه در حال قرائت */
.ayah.playing {
  background: color-mix(in srgb, var(--brand) 7%, var(--surface));
  box-shadow: inset 3px 0 0 var(--brand), var(--shadow-sm);
  animation: ayah-pulse 2.2s var(--ease) infinite;
}
.ayah.playing .ayah-num { background: var(--brand); color: #fff; }
@keyframes ayah-pulse {
  0%, 100% { background: color-mix(in srgb, var(--brand) 7%, var(--surface)); }
  50% { background: color-mix(in srgb, var(--brand) 13%, var(--surface)); }
}

/* نوار پخشکننده شناور — وسطچین مطلق بدون transform (پایدار در RTL/LTR و همه مرورگرها)
   الگوی امن: left/right صفر + margin-inline auto — نصف‌بیرون‌زدگی غیرممکن می‌شود */
.reciter-bar {
  position: fixed; bottom: 16px; left: 0; right: 0; margin-left: auto; margin-right: auto;
  width: min(620px, calc(100vw - 24px)); max-width: calc(100vw - 24px);
  display: flex; align-items: center; gap: 6px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 12px; z-index: 60; box-shadow: var(--shadow-lg);
  animation: rec-bar-in .35s var(--ease);
}
@keyframes rec-bar-in { from { transform: translateY(18px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.rec-btn {
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; border: none;
  background: var(--bg-soft); color: var(--ink); font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .2s var(--ease);
}
.rec-btn:hover { background: var(--brand-soft); color: var(--brand); }
.rec-btn.rec-play { background: var(--brand); color: #fff; width: 44px; height: 44px; }
.rec-btn.rec-play:hover { background: var(--brand-strong); color: #fff; }
.rec-btn.rec-close { color: var(--muted); }
.rec-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-inline: 6px; }
.rec-title { font-size: 12.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-progress { width: 100%; height: 4px; appearance: none; -webkit-appearance: none; border: none; background: var(--line); border-radius: 4px; overflow: hidden; }
.rec-progress::-webkit-progress-bar { background: var(--line); border-radius: 4px; }
.rec-progress::-webkit-progress-value { background: var(--gold); border-radius: 4px; transition: width .3s linear; }
.rec-progress::-moz-progress-bar { background: var(--gold); border-radius: 4px; }

/* ---------- صفحه امروز ---------- */
.today-page { padding-top: 28px; }
.today-hero {
  text-align: center; padding: 38px 20px 30px; border-radius: var(--radius-lg);
  background: var(--bg-soft); border: 1px solid var(--line-soft); margin-bottom: 26px;
}
.today-weekday {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 1px;
  color: var(--gold-strong); background: var(--gold-soft);
  padding: 4px 18px; border-radius: 999px; margin-bottom: 12px;
}
.today-date { font-size: clamp(21px, 4vw, 30px); font-weight: 800; color: var(--ink); line-height: 1.6; }
.today-hijri { display: block; margin-top: 6px; font-size: 13.5px; color: var(--ink-soft); }
.today-occasions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.occasion-chip {
  font-size: 12px; font-weight: 600; padding: 6px 16px; border-radius: 999px;
  border: 1px solid transparent;
}
.occasion-joy { background: var(--gold-soft); color: var(--gold-strong); border-color: color-mix(in srgb, var(--gold) 30%, transparent); }
.occasion-sad { background: color-mix(in srgb, var(--ink) 8%, var(--surface)); color: var(--ink-soft); border-color: var(--line); }
.occasion-neutral { background: var(--brand-soft); color: var(--brand); border-color: color-mix(in srgb, var(--brand) 25%, transparent); }

.today-card {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  padding: 26px 28px; box-shadow: var(--shadow-sm); margin-top: 22px;
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.today-card:hover { box-shadow: var(--shadow-md); }
.today-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.today-card-head h2 { font-size: 15px; font-weight: 800; color: var(--brand); display: flex; align-items: center; gap: 8px; }
.today-card-head h2::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex: 0 0 auto; }
.today-card-link { font-size: 12px; color: var(--muted); white-space: nowrap; }
.today-card-link:hover { color: var(--brand); }
.today-tag { font-size: 11px; background: var(--brand-soft); color: var(--brand); padding: 3px 12px; border-radius: 999px; }
.today-verse-ar {
  font-family: var(--font-ar); font-size: clamp(21px, 3.4vw, 28px); line-height: 2.15;
  color: var(--ink); text-align: center; padding: 10px 6px;
}
.today-verse-fa { font-size: 14.5px; color: var(--ink-soft); text-align: center; margin-top: 10px; line-height: 2.1; }
.today-quote { font-size: 15.5px; color: var(--ink); line-height: 2.2; }
.today-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.today-play {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line);
  background: var(--bg-soft); color: var(--ink-soft); font-size: 12px; font-weight: 700;
  padding: 7px 16px; border-radius: 999px; transition: all .2s var(--ease);
}
.today-play:hover { border-color: var(--brand); color: var(--brand); }
.today-play.speaking { background: var(--brand); border-color: var(--brand); color: #fff; }
.today-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.today-grid .today-card { margin-top: 2px; }
.name-day-card { background: linear-gradient(160deg, var(--surface), var(--gold-soft)); }
.name-day-body { display: flex; align-items: center; gap: 24px; padding: 8px 4px; }
.name-day-arabic {
  font-family: var(--font-ar); font-size: clamp(34px, 6vw, 52px); color: var(--brand);
  line-height: 1.7; flex: 0 0 auto;
}
.name-day-info b { color: var(--gold-strong); font-size: 13px; letter-spacing: .5px; }
.name-day-info p { font-size: 17px; font-weight: 700; color: var(--ink); margin: 4px 0; }
.name-day-info small { font-size: 12.5px; color: var(--ink-soft); line-height: 1.9; display: block; }
.today-links { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }

/* ---------- اسما الحسنی ---------- */
.asma-page { padding-top: 28px; }
.asma-today-chip {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 18px;
  background: var(--gold-soft); border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  border-radius: 999px; padding: 8px 22px; transition: all .25s var(--ease);
}
.asma-today-chip:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.asma-today-chip .asma-today-label { font-size: 10.5px; font-weight: 700; color: var(--gold-strong); }
.asma-today-chip b { font-family: var(--font-ar); font-size: 22px; color: var(--brand-strong); line-height: 1; }
.asma-today-chip span:last-child { font-size: 12px; color: var(--ink-soft); }
.asma-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 30px; }
.asma-card {
  position: relative; display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 16px 14px; transition: all .25s var(--ease);
}
.asma-card:hover { border-color: color-mix(in srgb, var(--brand) 40%, transparent); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.asma-num {
  position: absolute; top: 10px; inset-inline-start: 12px; font-size: 10px; font-weight: 700;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.asma-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 10px; }
.asma-ar { font-family: var(--font-ar); font-size: 23px; color: var(--brand-strong); line-height: 1.7; }
.asma-tr { font-size: 10px; color: var(--muted); direction: ltr; text-align: right; letter-spacing: .3px; }
.asma-fa { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.asma-actions { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
.asma-speak, .asma-more {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--bg-soft); color: var(--ink-soft); font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center; transition: all .2s var(--ease);
}
.asma-speak:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.asma-speak.speaking { background: var(--brand); border-color: var(--brand); color: #fff; animation: ayah-pulse 1.4s infinite; }
.asma-more:hover { background: var(--gold); border-color: var(--gold); color: #fff; }

/* صفحه یک اسم */
.asma-item-page { padding-top: 28px; }
.name-hero-arabic {
  font-family: var(--font-ar); font-size: clamp(52px, 10vw, 88px); line-height: 1.6;
  color: var(--brand); text-align: center;
}

/* ---------- صفحه آفلاین ---------- */
.offline-page { display: flex; align-items: center; justify-content: center; min-height: 72vh; padding: 30px 0; }
.offline-box {
  max-width: 460px; text-align: center; background: var(--surface);
  border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  padding: 46px 34px; box-shadow: var(--shadow-md);
}
.offline-icon { color: var(--muted); margin-bottom: 18px; }
.offline-box h1 { font-size: 19px; font-weight: 800; color: var(--ink); margin-bottom: 10px; }
.offline-box p { font-size: 14px; color: var(--ink-soft); line-height: 2.1; margin-bottom: 18px; }
.offline-hint { font-size: 11.5px !important; color: var(--muted) !important; margin-top: 14px; margin-bottom: 0 !important; }

/* ---------- واکنشگرایی ویژگیهای جدید ---------- */
@media (max-width: 720px) {
  .today-grid { grid-template-columns: 1fr; }
  .today-card { padding: 20px 18px; }
  .name-day-body { flex-direction: column; text-align: center; gap: 12px; }
  .reciter-bar { bottom: 10px; padding: 6px 8px; gap: 4px; }
  .rec-btn { width: 34px; height: 34px; }
  .rec-btn.rec-play { width: 40px; height: 40px; }
  .rec-title { font-size: 11px; }
  .continuous-hint { font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .ayah.playing { animation: none; }
  .reciter-bar { animation: none; }
  .btn-continuous, .asma-card, .asma-today-chip { transition: none; }
}

/* ═══════════ نسخه ۳: توضیحات سوره · کتابخوان صفحهبندی · تمامصفحه · ادعیه · نهج · صحیفه · اوقات ═══════════ */

/* ── توضیحات سوره ── */
.surah-info{background:var(--card,#fff);border:1px solid var(--line,#e8e2d5);border-radius:16px;padding:22px 24px;margin:22px 0;box-shadow:0 2px 12px rgba(30,40,30,.04)}
[data-theme="dark"] .surah-info{border-color:#2a3a35}
.surah-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:16px}
.si-item{background:rgba(13,107,91,.06);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}
[data-theme="dark"] .si-item{background:rgba(110,193,228,.08)}
.si-k{font-size:.72rem;color:var(--muted,#7a7466);letter-spacing:.02em}
.si-v{font-weight:700;font-size:.95rem;color:var(--ink,#22302b)}
.si-block{margin:14px 0 0;padding-top:14px;border-top:1px dashed var(--line,#e8e2d5)}
.si-block h2{font-size:.95rem;margin:0 0 8px;color:#0D6B5B;display:flex;align-items:center;gap:8px}
.si-block h2::before{content:"";width:18px;height:2px;background:linear-gradient(90deg,#0D6B5B,#A9832F);border-radius:2px}
.si-block p{margin:0;line-height:2;font-size:.9rem;color:var(--ink,#22302b);text-align:justify}

/* ── آیات تاشده + CTA ── */
.ayah-folded{display:none}
.reader-mode .ayah-folded{display:block}
.fold-cta-wrap{text-align:center;margin:26px 0 10px;padding:22px 18px;border:1px dashed #0D6B5B;border-radius:16px;background:rgba(13,107,91,.05)}
[data-theme="dark"] .fold-cta-wrap{background:rgba(110,193,228,.06);border-color:#3f8f7f}
.fold-cta-hint{margin:0 0 14px;color:var(--muted,#7a7466);font-size:.88rem}
.fold-cta-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.fold-show-all{background:none;border:1px solid var(--line,#d8d2c2);border-radius:10px;padding:9px 16px;font:inherit;font-size:.85rem;cursor:pointer;color:var(--ink,#22302b)}
.fold-show-all:hover{border-color:#0D6B5B;color:#0D6B5B}

/* ── کتابخوان صفحهبندی ── */
.rb-pager{display:inline-flex;align-items:center;gap:6px;margin-inline-start:6px}
.rb-pager span{font-size:.8rem;min-width:64px;text-align:center;color:var(--muted,#7a7466)}
.reader-bar{display:flex;align-items:center;flex-wrap:wrap}
.pg-hidden{display:none!important}

/* ── پخش تمامصفحه ── */
.fs-player{position:fixed;inset:0;z-index:1000;background:radial-gradient(ellipse at 50% 30%,#123c33 0%,#0a231e 60%,#061512 100%);display:flex;align-items:center;justify-content:center;color:#eef5f0}
.fs-inner{width:min(860px,92vw);text-align:center;padding:30px 20px}
.fs-ornament{font-size:2.2rem;color:#A9832F;opacity:.85;margin-bottom:18px}
.fs-ayah{min-height:200px;display:flex;flex-direction:column;justify-content:center;gap:18px}
.fs-ar{font-family:'Amiri',serif;font-size:clamp(1.5rem,4vw,2.6rem);line-height:2.2;margin:0;color:#f5efe0}
.fs-fa{font-size:clamp(.95rem,2vw,1.15rem);line-height:2;margin:0 auto;max-width:70ch;color:#b9cfc5;opacity:.9}
.fs-meta{margin:22px auto 14px;max-width:560px}
.fs-meta span{font-size:.85rem;color:#9db8ac}
.fs-controls{display:flex;gap:14px;justify-content:center;align-items:center;margin-top:8px}
.fs-btn{width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#eef5f0;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s}
.fs-btn:hover{background:rgba(255,255,255,.14)}
.fs-btn.fs-play{width:66px;height:66px;background:#0D6B5B;border-color:#0D6B5B}
.fs-btn.fs-play:hover{background:#128a76}
.fs-btn.fs-exit{opacity:.6}
body.fs-open{overflow:hidden}

/* ── سوییچ زبان ── */
.lang-switch{display:inline-flex;border:1px solid var(--line,#ddd6c4);border-radius:10px;overflow:hidden;margin-inline-end:6px}
.lang-switch a{padding:7px 10px;font-size:.78rem;color:var(--muted,#7a7466);text-decoration:none;line-height:1}
.lang-switch a.is-active{background:#0D6B5B;color:#fff}
.lang-switch a:not(.is-active):hover{background:rgba(13,107,91,.08)}

/* ── ادعیه و زیارات ── */
.page-head{text-align:center;margin:26px 0 22px}
.page-head h1{font-size:clamp(1.3rem,3.4vw,1.9rem);margin:0 0 10px;color:var(--ink,#22302b)}
.page-sub{color:var(--muted,#7a7466);font-size:.92rem;margin:0 auto;max-width:70ch;line-height:1.9}
.dua-section{margin:30px 0}
.dua-section-title{font-size:1.05rem;color:#0D6B5B;margin:0 0 14px;display:flex;align-items:center;gap:10px}
.dua-section-title::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(13,107,91,.35),transparent)}
.duas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.dua-card{display:flex;flex-direction:column;gap:6px;background:var(--card,#fff);border:1px solid var(--line,#e8e2d5);border-radius:14px;padding:18px 16px;text-decoration:none;transition:.2s;position:relative;overflow:hidden}
.dua-card::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:linear-gradient(#0D6B5B,#A9832F);opacity:0;transition:.2s}
.dua-card:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(13,107,91,.12);border-color:#0D6B5B}
.dua-card:hover::before{opacity:1}
.dua-card-ar{font-family:'Amiri',serif;font-size:1.25rem;color:#0D6B5B}
[data-theme="dark"] .dua-card-ar{color:#7bd4be}
.dua-card-fa{font-weight:700;font-size:.95rem;color:var(--ink,#22302b)}
.dua-card-meta{font-size:.75rem;color:var(--muted,#7a7466)}
.dua-card-wide{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between}

.dua-page,.nahj-item-page,.sahife-item-page{max-width:860px}
.dua-head{text-align:center;margin:24px 0 20px}
.dua-head-ornament{font-size:2rem;color:#A9832F;opacity:.8}
.dua-head h1{font-size:clamp(1.25rem,3.4vw,1.8rem);margin:8px 0 12px}
.dua-title-ar{font-family:'Amiri',serif;color:#0D6B5B;font-weight:400}
[data-theme="dark"] .dua-title-ar{color:#7bd4be}
.dua-badges{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}
.dua-intro{color:var(--muted,#7a7466);font-size:.9rem;max-width:65ch;margin:10px auto 0;line-height:1.9}
.dua-toggles{display:flex;gap:16px;justify-content:center;margin:18px 0}
.dua-note{text-align:center;background:rgba(169,131,47,.09);border:1px solid rgba(169,131,47,.3);border-radius:10px;padding:10px 16px;font-size:.82rem;color:#8a6d1f;margin:14px 0}
[data-theme="dark"] .dua-note{color:#d8b95c}
.dua-body{counter-reset:duap}
.dua-paragraph{margin:0 0 22px;padding:18px 20px;background:var(--card,#fff);border:1px solid var(--line,#e8e2d5);border-radius:14px;position:relative}
.dua-paragraph::before{counter-increment:duap;content:counter(duap);position:absolute;top:-10px;inset-inline-start:16px;width:22px;height:22px;border-radius:50%;background:#0D6B5B;color:#fff;font-size:.72rem;display:flex;align-items:center;justify-content:center}
.dua-paragraph-ar{font-family:'Amiri',serif;font-size:calc(1.35rem * var(--ar-scale,1) * var(--read-scale,1));line-height:2.4;text-align:center;margin:0 0 12px;color:var(--ink,#22302b)}
.dua-paragraph-fa{margin:0;font-size:calc(.92rem * var(--read-scale,1));line-height:2.1;color:#4d5b54;border-top:1px dashed var(--line,#e8e2d5);padding-top:12px}

/* ── نهجالبلاغه ── */
.nahj-page{max-width:980px}
.nahj-tabs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:20px 0}
.nahj-tab{padding:9px 18px;border-radius:12px;border:1px solid var(--line,#e8e2d5);text-decoration:none;color:var(--ink,#22302b);font-size:.88rem;display:flex;gap:8px;align-items:center;background:var(--card,#fff);transition:.2s}
.nahj-tab span{background:rgba(13,107,91,.1);color:#0D6B5B;border-radius:8px;padding:2px 8px;font-size:.75rem}
.nahj-tab.is-active{background:#0D6B5B;color:#fff;border-color:#0D6B5B}
.nahj-tab.is-active span{background:rgba(255,255,255,.2);color:#fff}
.nahj-list{display:flex;flex-direction:column;gap:10px}
.nahj-item{display:grid;grid-template-columns:52px 1fr;grid-template-areas:"num title" "num preview";gap:2px 14px;align-items:center;background:var(--card,#fff);border:1px solid var(--line,#e8e2d5);border-radius:12px;padding:13px 16px;text-decoration:none;transition:.2s}
.nahj-item:hover{border-color:#0D6B5B;transform:translateX(-3px)}
.nahj-item-num{grid-area:num;width:44px;height:44px;border-radius:12px;background:rgba(13,107,91,.08);color:#0D6B5B;display:flex;align-items:center;justify-content:center;font-weight:800}
[data-theme="dark"] .nahj-item-num{color:#7bd4be;background:rgba(110,193,228,.1)}
.nahj-item-title{grid-area:title;font-weight:700;font-size:.9rem;color:var(--ink,#22302b)}
.nahj-item-preview{grid-area:preview;font-family:'Amiri',serif;color:var(--muted,#7a7466);font-size:.95rem;line-height:1.9}
.nahj-body .dua-paragraph-ar{text-align:justify;font-size:1.28rem}
.pagination{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:26px 0}
.pg-btn{min-width:38px;height:38px;border-radius:10px;border:1px solid var(--line,#e8e2d5);display:flex;align-items:center;justify-content:center;text-decoration:none;color:var(--ink,#22302b);font-size:.85rem;background:var(--card,#fff)}
.pg-btn.is-current{background:#0D6B5B;color:#fff;border-color:#0D6B5B}
.pg-dots{color:var(--muted,#7a7466);align-self:center}

/* ── صحیفه سجادیه ── */
.sahife-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin:22px 0}
.sahife-card{display:flex;flex-direction:column;gap:6px;background:var(--card,#fff);border:1px solid var(--line,#e8e2d5);border-radius:14px;padding:16px;text-decoration:none;transition:.2s}
.sahife-card:hover{border-color:#0D6B5B;transform:translateY(-2px);box-shadow:0 6px 18px rgba(13,107,91,.1)}
.sahife-num{width:34px;height:34px;border-radius:10px;background:#A9832F;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem}
.sahife-title{font-weight:700;font-size:.9rem;color:var(--ink,#22302b)}
.sahife-preview{font-family:'Amiri',serif;color:var(--muted,#7a7466);font-size:.92rem;line-height:1.9}

/* ── اوقات شرعی ── */
.pt-page{max-width:760px}
.pt-city{display:flex;gap:12px;align-items:center;justify-content:center;margin:20px 0}
.pt-city label{font-size:.88rem;color:var(--muted,#7a7466)}
.pt-city select{padding:10px 14px;border-radius:12px;border:1px solid var(--line,#d8d2c2);background:var(--card,#fff);color:var(--ink,#22302b);font:inherit;min-width:220px}
.pt-table-wrap{background:var(--card,#fff);border:1px solid var(--line,#e8e2d5);border-radius:16px;overflow:hidden;margin:20px 0}
.pt-table{width:100%;border-collapse:collapse}
.pt-table caption{padding:16px;font-weight:800;color:#0D6B5B;background:rgba(13,107,91,.06);font-size:.95rem}
[data-theme="dark"] .pt-table caption{color:#7bd4be}
.pt-table td{padding:13px 22px;border-top:1px solid var(--line,#eee8da);font-size:.95rem}
.pt-table td:last-child{text-align:center;font-weight:800;font-variant-numeric:tabular-nums;width:130px;color:var(--ink,#22302b)}
.pt-table tr.pt-hl td{background:rgba(13,107,91,.05);font-weight:700}
.pt-note{background:var(--card,#fff);border:1px solid var(--line,#e8e2d5);border-radius:14px;padding:16px 20px;font-size:.85rem;color:var(--muted,#7a7466);line-height:2}
.pt-note h2{font-size:.95rem;color:#0D6B5B;margin:0 0 6px}

/* ── جستجوی آیات ── */
.verses-page{max-width:860px}
.verse-search-box{display:flex;gap:10px;margin:22px 0;flex-wrap:wrap}
.verse-search-box input{flex:1;min-width:240px;padding:13px 18px;border-radius:14px;border:1px solid var(--line,#d8d2c2);background:var(--card,#fff);color:var(--ink,#22302b);font:inherit;font-size:1rem}
.verse-search-box input:focus{outline:none;border-color:#0D6B5B;box-shadow:0 0 0 3px rgba(13,107,91,.15)}
.verse-search-meta{text-align:center;color:var(--muted,#7a7466);font-size:.9rem}
.verse-results{display:flex;flex-direction:column;gap:12px;margin:18px 0}
.verse-result{background:var(--card,#fff);border:1px solid var(--line,#e8e2d5);border-radius:14px;padding:16px 18px}
.verse-result-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.vr-surah{font-weight:700;font-size:.9rem;color:#0D6B5B;text-decoration:none}
[data-theme="dark"] .vr-surah{color:#7bd4be}
.vr-badge{font-size:.78rem;background:rgba(169,131,47,.12);color:#8a6d1f;border-radius:8px;padding:3px 10px}
.vr-ar{font-family:'Amiri',serif;font-size:1.2rem;line-height:2.2;margin:0 0 8px;color:var(--ink,#22302b)}
.vr-fa{margin:0;font-size:.88rem;color:var(--muted,#7a7466);line-height:2}
.verse-result mark,.vr-ar mark{background:linear-gradient(transparent 45%,rgba(169,131,47,.35) 45%);color:inherit;padding:0 2px;border-radius:2px}
.verse-hints{background:var(--card,#fff);border:1px solid var(--line,#e8e2d5);border-radius:14px;padding:18px 22px}
.verse-hints h2{font-size:.95rem;color:#0D6B5B;margin:0 0 10px}
.verse-hints ul{margin:0;padding-inline-start:20px;color:var(--muted,#7a7466);font-size:.88rem;line-height:2.1}

/* ── زبان LTR برای انگلیسی ── */
[dir="ltr"] .breadcrumb{flex-direction:row-reverse}
[dir="ltr"] .main-nav{flex-direction:row}

/* ── موبایل ── */
@media (max-width:640px){
  .surah-info{padding:16px}
  .duas-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .nahj-item{grid-template-columns:44px 1fr;grid-template-areas:"num title" "num preview"}
  .nahj-item-num{width:38px;height:38px}
  .fs-ar{line-height:2}
  .lang-switch a{padding:6px 8px}
}

/* ============================================================
   نسخه ۴ — آیکونهای هدر • تنظیمات نمایشی • مسبح • اشتراکگذاری
   ============================================================ */

/* ---------- آیکونهای هدر (جستجو/زبان) ---------- */
.hicon {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--bg-soft); color: var(--ink); border: 1px solid var(--line);
  cursor: pointer; transition: all .25s var(--ease); position: relative;
}
.hicon:hover { background: var(--brand-soft); color: var(--brand); border-color: var(--brand); }
.hicon[aria-expanded="true"] { background: var(--brand); color: #fff; border-color: var(--brand); }
.hicon-badge {
  position: absolute; bottom: -4px; inset-inline-end: -4px;
  font-size: 8.5px; font-weight: 800; line-height: 1;
  background: var(--gold); color: #fff; padding: 2.5px 4px; border-radius: 7px;
}
.header-search-wrap, .lang-wrap { position: relative; }
.search-pop {
  position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 60;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 10px; width: min(400px, calc(100vw - 32px));
}
.search-pop .header-search { width: 100%; }
.search-pop .header-search input { width: 100% !important; }
.lang-menu {
  position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 60;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); padding: 6px; min-width: 130px;
}
.lang-menu a {
  display: block; padding: 9px 14px; border-radius: 8px; font-size: 13.5px;
  color: var(--ink); text-decoration: none;
}
.lang-menu a:hover { background: var(--bg-soft); }
.lang-menu a.is-active { background: var(--brand); color: #fff; }
@media (max-width: 400px) {
  .search-pop { position: fixed; top: calc(var(--header-h) + 8px); inset-inline: 12px; width: auto; }
}

/* ---------- منوی موبایل: جلوگیری از بیرونزدگی ---------- */
@media (max-width: 768px) {
  .main-nav {
    max-height: calc(100dvh - var(--header-h) - 20px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    column-gap: 0;
    display: none;
  }
  .main-nav.open { display: flex; transform: none; }
  .main-nav .nav-link { text-align: start; }
}
@media (max-width: 480px) {
  .header-inner { gap: 10px; }
  .logo-text { font-size: 15px; }
}

/* ---------- نوار اشتراکگذاری ---------- */
.share-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line);
}
.share-label { font-size: 12.5px; color: var(--muted); }
.share-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  color: #fff; text-decoration: none; border: none; cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.share-btn:hover { transform: translateY(-2px) scale(1.06); box-shadow: 0 6px 14px -6px rgba(0,0,0,.35); }
.share-telegram { background: #2AABEE; }
.share-whatsapp { background: #25D366; }
.share-x { background: #14171A; }
.share-facebook { background: #1877F2; }
.share-copy { background: var(--ink-soft); }
.share-native { background: var(--gold); display: none; }
.share-native.is-available { display: inline-flex; }
.ayah-share {
  background: none; border: none; color: var(--muted); cursor: pointer;
  padding: 3px; border-radius: 6px; opacity: 0; transition: opacity .2s;
}
.ayah:hover .ayah-share { opacity: 1; }
.ayah-share:hover { color: var(--brand); background: var(--brand-soft); }
@media (hover: none) { .ayah-share { opacity: .7; } }

/* ---------- تنظیمات نمایشی (خوانش) ---------- */
:root { --read-scale: 1; --read-font: var(--font-ui); --read-lh: 2.05; }
html[data-rfont="amiri"] { --read-font: 'Amiri', 'Noto Naskh Arabic', serif; }
html[data-rfont="mono"] { --read-font: 'Sarasa Mono SC', 'Vazirmatn', ui-monospace, monospace; }
html[data-rfont="sys"] { --read-font: system-ui, Tahoma, sans-serif; }
html[data-rlh="relaxed"] { --read-lh: 2.3; }
html[data-rlh="loose"] { --read-lh: 2.6; }
.single-content, .ayah-ar, .ayah-fa, .ayah-en, .ziyarat-content, .post-extra, .dua-ar, .dua-fa,
.nahj-ar, .nahj-fa, .sahife-ar, .sahife-fa, .tasbih-ar {
  font-family: var(--read-font);
  font-size: calc(1em * var(--read-scale));
  line-height: var(--read-lh);
}
.single-content p, .ziyarat-content p, .post-extra p { line-height: var(--read-lh); }
.ayah-ar { font-size: calc(21px * var(--ar-scale, 1) * var(--read-scale)); }

/* حالتهای مطالعه: سپیا / سبز / شب */
html[data-rmode="sepia"] body,
html[data-rmode="sepia"] .site-header, html[data-rmode="sepia"] .site-footer,
html[data-rmode="sepia"] .main-nav, html[data-rmode="sepia"] .reader-mode .ayah,
html[data-rmode="sepia"] .single-content, html[data-rmode="sepia"] .ziyarat-content,
html[data-rmode="sepia"] .ayah-list {
  --bg: #F3E9D6; --bg-soft: #EDE1CA; --surface: #F8F0DF; --ink: #4A3B22; --ink-soft: #6E5A38;
  --muted: #96825C; --line: #DFD0B2; --line-soft: #E9DCC2; --brand: #8F6D22; --brand-soft: #F0E4C9;
  background-color: #F3E9D6;
}
html[data-rmode="green"] body,
html[data-rmode="green"] .site-header, html[data-rmode="green"] .site-footer,
html[data-rmode="green"] .main-nav, html[data-rmode="green"] .reader-mode .ayah,
html[data-rmode="green"] .single-content, html[data-rmode="green"] .ziyarat-content,
html[data-rmode="green"] .ayah-list {
  --bg: #E4EFE4; --bg-soft: #DCE9DB; --surface: #EDF5EC; --ink: #1F3D2B; --ink-soft: #3E5C4A;
  --muted: #6C8574; --line: #C8DCC8; --line-soft: #D5E6D4; --brand: #2F6E3F; --brand-soft: #DDEBDD;
  background-color: #E4EFE4;
}
html[data-rmode="night"] body,
html[data-rmode="night"] .site-header, html[data-rmode="night"] .site-footer,
html[data-rmode="night"] .main-nav, html[data-rmode="night"] .reader-mode .ayah,
html[data-rmode="night"] .single-content, html[data-rmode="night"] .ziyarat-content,
html[data-rmode="night"] .ayah-list {
  --bg: #0B0F0E; --bg-soft: #0D1211; --surface: #101614; --ink: #9BA79E; --ink-soft: #77837B;
  --muted: #5C6860; --line: #1D2723; --line-soft: #17201C; --brand: #2F6E5B; --brand-soft: #12201B;
  background-color: #0B0F0E;
}
html[data-rmode="night"] .site-header { background: rgba(11, 15, 14, .92); }

.rset-fab {
  position: fixed; bottom: 18px; inset-inline-start: 18px; z-index: 70;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--surface); color: var(--brand); border: 1px solid var(--line);
  box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .25s var(--ease);
}
.rset-fab:hover { background: var(--brand); color: #fff; transform: rotate(30deg); }
.rset-panel {
  position: fixed; bottom: 74px; inset-inline-start: 18px; z-index: 70;
  width: min(320px, calc(100vw - 36px));
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 16px;
}
.rset-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.rset-head b { font-size: 14px; }
.rset-close { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; }
.rset-group { margin-bottom: 12px; }
.rset-label { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 7px; }
.rset-modes { display: flex; flex-wrap: wrap; gap: 6px; }
.rset-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px; font-size: 12px; cursor: pointer;
  background: var(--bg-soft); color: var(--ink-soft); border: 1.5px solid transparent;
  transition: all .2s var(--ease); font-family: inherit;
}
.rset-chip:hover { border-color: var(--line); }
.rset-chip.is-active { background: var(--brand-soft); color: var(--brand); border-color: var(--brand); font-weight: 700; }
.rmode-swatch { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); }
.sw-default { background: linear-gradient(135deg, #fff 50%, #0E1312 50%); }
.sw-sepia { background: #F3E9D6; }
.sw-green { background: #E4EFE4; }
.sw-night { background: #0B0F0E; }
.f-amiri { font-family: 'Amiri', serif; font-size: 14px; }
.f-mono { font-family: ui-monospace, monospace; font-size: 13px; }
.rset-row { display: flex; align-items: center; gap: 8px; }
.rset-row input[type=range] { flex: 1; accent-color: var(--brand); }
.rset-btn {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg-soft); color: var(--ink); cursor: pointer; font-size: 12px;
}
.rset-reset {
  width: 100%; padding: 9px; border-radius: var(--radius-sm); border: 1px dashed var(--line);
  background: none; color: var(--muted); cursor: pointer; font-size: 12px; font-family: inherit;
}
.rset-reset:hover { color: var(--danger); border-color: var(--danger); }
@media (max-width: 768px) { .rset-fab { bottom: 14px; inset-inline-start: 14px; } }

/* ---------- مسبح دیجیتال ---------- */
.tasbih-page { max-width: 640px; }
.tasbih-header { text-align: center; margin: 26px 0 18px; }
.tasbih-ornament { font-size: 40px; color: var(--gold); line-height: 1.4; }
.tasbih-header h1 { font-size: 26px; margin: 6px 0 4px; }
.tasbih-sub { color: var(--muted); font-size: 13.5px; }
.tasbih-dhikrs { margin-bottom: 16px; }
.tasbih-chips { justify-content: center; }
.tasbih-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: 30px 22px; text-align: center;
}
.tasbih-ar {
  font-family: var(--font-ar); font-size: calc(22px * var(--read-scale));
  line-height: 2; color: var(--ink); min-height: 66px; margin-bottom: 2px;
}
.tasbih-custom-input {
  width: 100%; max-width: 380px; margin: 6px auto; padding: 10px 14px;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--bg-soft); color: var(--ink); text-align: center; font-family: inherit;
}
.tasbih-fa { color: var(--muted); font-size: 13px; margin-bottom: 18px; }
.tasbih-counter {
  width: 190px; height: 190px; margin: 0 auto 14px; position: relative;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: transform .12s var(--ease);
}
.tasbih-counter:active { transform: scale(.94); }
.tasbih-counter:focus-visible { outline: 3px solid var(--brand-soft); border-radius: 50%; }
.tasbih-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--bg-soft); stroke-width: 7; }
.ring-fg {
  fill: none; stroke: var(--brand); stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 326.7; stroke-dashoffset: 326.7;
  transition: stroke-dashoffset .25s var(--ease), stroke .3s;
}
.ring-fg.done { stroke: var(--gold); }
.tasbih-count {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 44px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums;
}
.tasbih-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  max-width: 380px; margin: 0 auto 14px; font-size: 13px; color: var(--ink-soft);
}
.tasbih-target { display: flex; align-items: center; gap: 6px; }
.tasbih-target select {
  padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg-soft); color: var(--ink); font-family: inherit;
}
.tasbih-total b { color: var(--brand); }
.tasbih-actions { display: flex; gap: 10px; justify-content: center; }
.tasbih-btn {
  padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--bg-soft); color: var(--ink); cursor: pointer; font-size: 13px; font-family: inherit;
  transition: all .2s var(--ease);
}
.tasbih-btn:hover { border-color: var(--brand); color: var(--brand); }
.tasbih-reset:hover { border-color: var(--danger); color: var(--danger); }
.tasbih-hint { margin-top: 14px; font-size: 11.5px; color: var(--muted); }

/* ---------- توست اعلان ---------- */
.hn-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: var(--bg); padding: 10px 20px; border-radius: 999px;
  font-size: 13px; z-index: 100; opacity: 0; transition: all .3s var(--ease);
  box-shadow: var(--shadow-lg); pointer-events: none; max-width: 86vw; text-align: center;
}
.hn-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- بلوک ترجمه دعا (وقتی پاراگرافها یکبهیک نیستند) ---------- */
.dua-translation-block {
  margin-top: 26px; padding-top: 18px; border-top: 2px dashed var(--line);
}
.dua-tr-title {
  font-size: 15px; color: var(--brand); margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.dua-tr-title::before { content: '❖'; color: var(--gold); }

/* ---------- پیشنمایش ترجمه در فهرست نهج + نشان صحیفه ---------- */
.nahj-item-fa {
  display: block; font-size: 12.5px; color: var(--muted);
  margin-top: 6px; line-height: 1.9;
}
.nahj-item { display: block; }
.badge.sahife-has-fa { background: var(--brand-soft); color: var(--brand); }

/* ============================================================
   نسخه ۵ — کتابخوان پاپآپ + بسمالله + پالایش گرافیک و دارک
   ============================================================ */

/* ---------- کتابخوان پاپآپ (مودال) ---------- */
.reader-modal {
  position: fixed; inset: 0; z-index: 880;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(10px, 3vw, 28px);
}
.reader-modal-backdrop {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--bg) 28%, rgba(8, 14, 13, .62));
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  animation: fade-in .25s var(--ease);
}
.reader-modal-panel {
  position: relative; display: flex; flex-direction: column;
  width: min(880px, 100%); height: min(88vh, 940px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: rm-pop .32s var(--ease);
}
@keyframes rm-pop {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to { opacity: 1; transform: none; }
}
.reader-modal-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px clamp(16px, 4vw, 34px) 30px; }
/* داخل مودال، نوار ابزار باید داخل wrap بماند (position:fixed ارثبری از حالت تمامصفحه را خنثی کن) */
.reader-modal .reader-bar {
  position: static; inset: auto; transform: none;
  height: auto; width: auto; max-width: none;
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: 0;
  flex-wrap: wrap; gap: 6px;
}
.reader-modal .reader-bar-wrap {
  display: block; position: static; z-index: 2;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-soft);
  padding: 8px clamp(12px, 3vw, 22px);
}
/* پخشکننده صوت دعا/زیارت داخل مودال — نمایان و چسبان به پایین، وسطچین */
body.reader-mode .reader-modal .audio-box { display: flex !important; }
.reader-modal .audio-box {
  position: sticky; bottom: 0; z-index: 5;
  margin: 16px auto 0; max-width: 620px;
  border-radius: 16px;
  box-shadow: 0 -6px 24px rgba(0,0,0,.14);
  padding: 10px 16px; gap: 6px;
}
.reader-modal .audio-box audio { width: 100%; height: 38px; }
.reader-modal .audio-box .continuous-hint { display: none; }
/* داخل مودال، نوار ابزار چسبان بماند تا همیشه در دسترس باشد */
.reader-modal-panel { position: relative; }
.reader-modal .reader-bar-wrap { position: sticky; top: 0; }
/* تایپوگرافی آیات داخل مودال */
.reader-modal .ayah-list { max-width: 760px; margin-inline: auto; padding-top: 10px; }
.reader-modal .ayah { padding-block: 24px; border-bottom: 1px solid var(--line-soft); border-radius: 0; background: transparent; }
.reader-modal .ayah:hover { background: transparent; box-shadow: none; }
.reader-modal .ayah:last-child { border-bottom: none; }
.reader-modal .ayah-ar { font-size: calc(27px * var(--ar-scale, 1) * var(--read-scale, 1)); line-height: 2.15; }
.reader-modal .ayah-folded { display: block; }
.reader-modal .dua-body, .reader-modal .ziyarat-content { padding-top: 14px; max-width: 760px; margin-inline: auto; }
.reader-modal .dua-paragraph { font-size: calc(1.06rem * var(--ar-scale, 1) * var(--read-scale, 1)); }
/* قفل اسکرول پسزمینه */
body.reader-open { overflow: hidden; }
/* دکمه بازکردن کتابخوان */
.reader-open-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  font-weight: 700; font-size: 13.5px; cursor: pointer;
  transition: all .2s var(--ease);
}
.reader-open-btn:hover { background: var(--brand); color: #fff; box-shadow: var(--glow-brand); transform: translateY(-1px); }

/* ---------- بسمالله پیش از شروع سوره ---------- */
.bismillah {
  text-align: center;
  font-family: var(--font-ar);
  font-size: calc(30px * var(--ar-scale, 1));
  color: var(--gold-strong);
  padding: 18px 10px 6px;
  letter-spacing: .5px;
}
.bismillah::after {
  content: ''; display: block; width: 68px; height: 2px; margin: 12px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  border-radius: 2px; opacity: .75;
}

/* ---------- پالایش دارکمود و گرافیک عمومی ---------- */
/* کارتها: سطح دوم + هاور نرم */
.content-card, .surah-card, .dua-card, .stat-box, .audio-box, .si-block, .widget {
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.content-card:hover, .dua-card:hover { box-shadow: var(--shadow-md); }
[data-theme="dark"] .content-card,
[data-theme="dark"] .surah-card,
[data-theme="dark"] .dua-card,
[data-theme="dark"] .audio-box,
[data-theme="dark"] .si-block { background: var(--surface-2); border-color: var(--line-soft); }
[data-theme="dark"] .surah-card:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); box-shadow: var(--glow-brand); }
[data-theme="dark"] img { opacity: .92; }
[data-theme="dark"] .badge { background: var(--bg-soft); border-color: var(--line); }
[data-theme="dark"] input:not([type=checkbox]):not([type=radio]),
[data-theme="dark"] select,
[data-theme="dark"] textarea { background: var(--bg-soft); border-color: var(--line); color: var(--ink); }

/* هدر بخشها با زخرفه ظریف */
.section-head h2, .archive-header h1, .page-head h1 { position: relative; }
.section-head { position: relative; }

/* دکمهها */
.btn-primary {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-strong) 100%);
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--brand) 60%, transparent);
}
.btn-primary:hover { box-shadow: var(--glow-brand); }
.btn-outline { border-width: 1.5px; }

/* شماره سوره: نشان لوزی */
.surah-number {
  font-family: var(--font-ar);
  background: linear-gradient(150deg, var(--brand-soft), transparent 70%);
}

/* هيرو در دارک: عمق بیشتر */
[data-theme="dark"] .hero {
  background:
    radial-gradient(ellipse 60% 50% at 82% 12%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 65%),
    radial-gradient(ellipse 45% 40% at 12% 85%, color-mix(in srgb, var(--gold) 9%, transparent), transparent 60%),
    var(--bg);
}
[data-theme="dark"] .hero-ayah { color: var(--gold); text-shadow: 0 2px 24px color-mix(in srgb, var(--gold) 25%, transparent); }

/* جدول/لیستهای پنل خواندن */
html[data-rmode="sepia"] { --bg: #F6EEDC; --bg-soft: #F0E6CF; --surface: #FBF4E4; --ink: #4A4232; --ink-soft: #6B6250; --line: #E2D5B8; --line-soft: #EADDC2; }
html[data-rmode="green"] { --bg: #EDF3E9; --bg-soft: #E4EDE0; --surface: #F4F8F1; --ink: #31402F; --ink-soft: #55654F; --line: #D2E0CC; --line-soft: #DCE8D6; }
html[data-rmode="night"] { --bg: #0B0F0E; --bg-soft: #0E1413; --surface: #131A18; --ink: #DCE4DE; --ink-soft: #9FAEA6; --line: #22302B; --line-soft: #1A2622; }

/* موبایل: مودال تمامقد نزدیک */
@media (max-width: 640px) {
  .reader-modal { padding: 0; }
  .reader-modal-panel { width: 100%; height: 100dvh; max-height: none; border-radius: 0; border: none; }
  .reader-modal .reader-bar-wrap { padding: 8px 12px; }
  .bismillah { font-size: calc(26px * var(--ar-scale, 1)); }
}
@media (prefers-reduced-motion: reduce) {
  .reader-modal-backdrop, .reader-modal-panel { animation: none; }
}

/* بلوک معرفی سوره (ویکیشیعه) */
.si-wiki p { margin-bottom: 10px; text-align: justify; line-height: 2; font-size: 14.5px; color: var(--ink-soft); }
.si-wiki p:last-child { margin-bottom: 0; }
.si-src { font-size: 11.5px; font-weight: 500; color: var(--muted); }

/* منوی اصلی: جلوگیری از شکستن خط آیتمها */
.main-nav .nav-link { white-space: nowrap; }
@media (min-width: 861px) and (max-width: 1100px) {
  .main-nav { gap: 12px; }
  .main-nav .nav-link { font-size: 12.5px; }
}

/* ============================================================
   نسخه ۶ — کتابخوان ارتقایافته: اسکرول/صفحهبندی، فونتها، EN toggle،
   بسمالله تکنمایشی، قرائت درون مودال، پالایش UI
   ============================================================ */

/* فونت عربی انتخابی کاربر (var از JS ست میشود) */
.reader-modal .ayah-ar,
.reader-modal .dua-paragraph-ar,
.reader-modal .ziyarat-content .ar,
.reader-modal .single-content[data-ar="1"] {
  font-family: var(--hn-ar-font, Vazirmatn, Tahoma, sans-serif);
}
/* متن عربی صفحه اصلی سوره هم فونت انتخابی کتابخوان را بگیرد */
.ayah-list[style*="--hn-ar-font"] .ayah-ar { font-family: var(--hn-ar-font, inherit); }

/* خاموشکردن ترجمه انگلیسی در کتابخوان */
.reader-modal.en-off .ayah-en,
.en-off .ayah-en { display: none !important; }

/* انتخابگر فونت در نوار کتابخوان */
.rb-select {
  font-family: inherit; font-size: 12px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 9px; padding: 3px 6px; max-width: 96px;
  cursor: pointer; outline: none;
}
.rb-select:focus-visible { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }

/* دکمههای وضعیتدار نوار (روشن/خاموش) */
.rb-btn.rb-on { color: var(--brand); border-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent); }
.rb-btn.rb-recite { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 45%, transparent); font-weight: 700; }

/* نوار پخش قرائت داخل مودال — چسبان به پایین بدنه مودال، واقعاً وسطچین
   width:auto + max-width → هرگز از بدنه مودال بیرون نمی‌زند */
.reader-modal .reciter-bar {
  position: sticky; bottom: 0; left: 0; right: 0;
  width: auto; max-width: min(620px, 100%);
  margin: 18px auto 0; z-index: 5;
  box-shadow: 0 -6px 24px rgba(0,0,0,.14);
  animation: rec-bar-in-modal .35s var(--ease);
}
@keyframes rec-bar-in-modal { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
/* حین پخش پیوسته داخل کتابخوان فقط یک پلیر — پخشکننده کامل سوره پنهان شود */
body.rec-bar-live .reader-modal .audio-box { display: none !important; }

/* فاب تنظیمات نمایش حین باز بودن مودال کتابخوان مخفی شود (کنترل فونت داخل نوار هست) */
body.reader-open .rset-fab,
body.reader-open .rset-panel { display: none !important; }

/* فاصله بالای کارت اول تا نوار، تا نشان شماره پاراگراف زیر نوار نرود */
.reader-modal .dua-body { padding-top: 12px; }

/* پالایش UI مودال */
.reader-modal-panel { border-radius: clamp(14px, 2.5vw, 22px); }
.reader-modal .reader-bar-wrap { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.reader-modal .ayah { transition: background .2s var(--ease); }
.reader-modal .ayah.playing { background: color-mix(in srgb, var(--brand) 8%, transparent); border-radius: 14px; }
.reader-modal .ayah.playing .ayah-ar { color: var(--brand); }
.reader-modal .bismillah { position: relative; }
/* انیمیشن نرم تعویض صفحه */
.reader-modal .ayah, .reader-modal .dua-paragraph { animation: rm-fade .28s var(--ease); }
@keyframes rm-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* اسکرولبار ظریف در بدنه مودال */
.reader-modal-body::-webkit-scrollbar { width: 9px; }
.reader-modal-body::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink) 18%, transparent); border-radius: 9px; border: 2px solid var(--surface); }
.reader-modal-body::-webkit-scrollbar-track { background: transparent; }

/* دارکمود کتابخوان */
[data-theme="dark"] .reader-modal-backdrop { background: color-mix(in srgb, #04110f 44%, rgba(0,0,0,.66)); }
[data-theme="dark"] .reader-modal .reader-bar-wrap { background: color-mix(in srgb, var(--bg-soft) 88%, transparent); border-bottom-color: var(--line); }
[data-theme="dark"] .reader-modal .ayah.playing { background: color-mix(in srgb, var(--brand) 16%, transparent); }

@media (max-width: 640px) {
  .reader-modal .reciter-bar { max-width: calc(100% - 16px); }
  .rb-select { max-width: 76px; font-size: 11px; }
}

/* ============================================================
   v5.2 — قاریها + مفاتیح + کتاب نماز + استخاره + اعمال ماهها
   ============================================================ */

/* ---------- انتخاب قاری ---------- */
.reciter-select-wrap { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; margin:14px auto 4px; max-width:720px; }
.reciter-label { display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--ink-soft); font-size:13px; }
.reciter-select, .reciter-mini {
  font-family:var(--font-ui); font-size:13px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:9px 34px 9px 12px; cursor:pointer; max-width:100%;
  box-shadow:var(--shadow-sm); transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.reciter-select:hover, .reciter-mini:hover { border-color:var(--brand); }
.reciter-select:focus-visible, .reciter-mini:focus-visible { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
.reciter-hint { width:100%; text-align:center; font-size:11.5px; color:var(--muted); }
.reciter-mini { font-size:12px; padding:5px 24px 5px 8px; max-width:150px; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); color:inherit; }
[data-theme="dark"] .reciter-mini { background:rgba(0,0,0,.25); }
@media (max-width:640px) { .reciter-mini { display:none; } }

/* ---------- قهرمان مفاتیح/نماز/استخاره ---------- */
.mafatih-hero { text-align:center; padding:26px 0 10px; }
.mafatih-ornament { font-size:38px; color:var(--gold); opacity:.85; line-height:1; margin-bottom:6px; }
.mafatih-hero h1 { font-size:clamp(22px, 4vw, 32px); margin:0 0 8px; }
.mafatih-sub { max-width:720px; margin:0 auto; color:var(--ink-soft); font-size:14.5px; line-height:1.9; }
.mafatih-page .mafatih-months { margin-top:18px; }
.mafatih-cat-title { font-size:17px; margin:0 0 14px; color:var(--ink); }

/* ---------- گرید کارتها ---------- */
.mafatih-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:14px; margin:14px 0 26px; }
.mafatih-grid-months { grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); }
.mafatih-card {
  display:flex; flex-direction:column; gap:7px; padding:18px 16px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  text-decoration:none; color:var(--ink); box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.mafatih-card:hover { transform:translateY(-3px); box-shadow:var(--glow-brand); border-color:var(--brand); }
.mc-title { font-weight:700; font-size:14.5px; }
.mc-desc { font-size:12.5px; color:var(--ink-soft); line-height:1.8; }
.mc-meta { font-size:11.5px; color:var(--muted); margin-top:auto; }
.mc-step {
  width:30px; height:30px; display:grid; place-items:center; border-radius:50%;
  background:var(--brand-soft); color:var(--brand-strong); font-weight:700; font-size:13px; margin-bottom:4px;
}
.mafatih-card-month { align-items:center; text-align:center; padding:16px 10px; }
.mah-badge {
  width:34px; height:34px; display:grid; place-items:center; border-radius:50%;
  background:linear-gradient(135deg, var(--gold-soft), #fff); color:var(--gold-strong);
  font-weight:800; font-size:14px; border:1px solid rgba(169,131,47,.25); margin-bottom:2px;
}
.mah-badge-lg { width:52px; height:52px; font-size:20px; margin:0 auto 10px; }
.mah-title { font-weight:700; font-size:14px; }
.mah-ar { font-family:var(--font-ar); font-size:16px; color:var(--gold-strong); }

/* ---------- مناسبتها و اعمال ماه ---------- */
.mah-occasions { margin:18px 0; }
.mah-occasions h2, .mah-amals h2 { font-size:16.5px; margin:0 0 12px; }
.mah-occ-list { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.mah-occ {
  display:flex; align-items:flex-start; gap:10px; padding:10px 14px; line-height:1.8;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  font-size:13.5px;
}
.mah-day {
  flex:0 0 auto; min-width:34px; height:26px; display:grid; place-items:center;
  border-radius:8px; background:var(--brand-soft); color:var(--brand-strong); font-weight:700; font-size:12.5px; padding:0 6px;
}
.mah-occ.tone-joy { border-inline-start:3px solid #2E9E6B; }
.mah-occ.tone-sad { border-inline-start:3px solid #B4472F; }
.mah-occ.tone-neutral { border-inline-start:3px solid var(--gold); }
.mah-amal-list { display:grid; gap:8px; }
.mah-amal-head { font-size:14px; margin:14px 0 2px; color:var(--brand-strong); }
.mah-month-block { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px; }
.mah-month-amal { margin:12px 0 0; font-size:13.5px; line-height:2; color:var(--ink-soft); }

/* ---------- آیتمهای بخش مفاتیح ---------- */
.mafatih-item-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px; }
.mafatih-item-card {
  display:flex; flex-direction:column; gap:8px; padding:16px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
}
.mafatih-item-card .mi-title { font-weight:700; font-size:14px; color:var(--brand-strong); text-decoration:none; }
.mi-title .dua-title-ar { font-size:12px; color:var(--gold-strong); margin-inline-start:6px; }
.mi-note { font-size:12.5px; color:var(--ink-soft); line-height:1.9; margin:0; }
.mi-ar { font-family:var(--font-ar); font-size:16px; line-height:2.1; margin:0; color:var(--ink); }
.mi-more { font-size:12px; color:var(--brand); text-decoration:none; margin-top:auto; }
.mafatih-item-note { border-style:dashed; }

/* ---------- کتاب نماز ---------- */
.namaz-steps { list-style:none; counter-reset:ns; margin:16px 0; padding:0; display:grid; gap:14px; }
.namaz-step {
  counter-increment:ns; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:18px;
}
.namaz-step::before {
  content:counter(ns); display:grid; place-items:center; width:28px; height:28px; border-radius:50%;
  background:var(--brand); color:#fff; font-weight:700; font-size:13px; margin-bottom:8px;
}
.ns-title { font-size:15.5px; margin:0 0 8px; color:var(--brand-strong); }
.ns-body p { margin:0; line-height:2; }
.namaz-rows { display:grid; gap:12px; margin:16px 0; }
.namaz-row { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; }
.namaz-rakat { display:inline-block; font-size:12px; font-weight:700; color:var(--gold-strong); background:var(--gold-soft); border-radius:999px; padding:3px 10px; margin-inline-start:8px; }
.namaz-time { display:block; font-size:12.5px; color:var(--ink-soft); margin-top:6px; }
.namaz-surah-ar { font-family:var(--font-ar); font-size:17px; line-height:2.2; margin:10px 0 4px; }

/* ---------- استخاره ---------- */
.istikhare-page .istikare-draw { text-align:center; margin:20px 0 30px; }
.btn-istikhare {
  display:inline-flex; align-items:center; gap:9px; padding:13px 30px; font-size:15px; font-weight:700;
  font-family:var(--font-ui); color:#fff; background:linear-gradient(135deg, var(--brand), var(--brand-strong));
  border:none; border-radius:999px; cursor:pointer; box-shadow:var(--glow-brand);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn-istikhare:hover { transform:translateY(-2px); }
.istikare-result {
  max-width:760px; margin:18px auto 26px; padding:24px; text-align:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
}
.ir-verdict { display:inline-block; font-weight:800; font-size:15px; padding:7px 20px; border-radius:999px; margin-bottom:12px; }
.ir-verdict.tone-k { background:#E8F6EE; color:#1F7A4D; }
.ir-verdict.tone-b { background:#FBEAE5; color:#B4472F; }
.ir-verdict.tone-m { background:var(--gold-soft); color:var(--gold-strong); }
.ir-surah { font-size:13.5px; color:var(--muted); font-weight:600; margin:0 0 10px; }
.ir-ar { font-family:var(--font-ar); font-size:clamp(18px, 3.4vw, 24px); line-height:2.2; margin:0 0 10px; }
.ir-fa { color:var(--ink-soft); line-height:2; margin:0 0 14px; }
.ir-tabeer { background:var(--bg-soft); border-radius:var(--radius-sm); padding:14px 16px; text-align:start; }
.ir-tabeer h3 { font-size:13px; margin:0 0 6px; color:var(--brand-strong); }
.ir-tabeer p { margin:0; font-size:13.5px; line-height:1.9; }
.ir-actions { margin-top:14px; }
[data-theme="dark"] .ir-verdict.tone-k { background:rgba(46,158,107,.15); color:#5FCB96; }
[data-theme="dark"] .ir-verdict.tone-b { background:rgba(180,71,47,.16); color:#E08D75; }

/* ---------- دستهبندیهای قهرمان صفحه اصلی ---------- */
.hero-cats { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.hero-cat {
  display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:999px;
  background:rgba(255,255,255,.75); border:1px solid var(--line); color:var(--ink);
  font-size:12.5px; font-weight:600; text-decoration:none;
  transition:transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.hero-cat svg { color:var(--brand); flex:0 0 auto; }
.hero-cat:hover { transform:translateY(-2px); border-color:var(--brand); box-shadow:var(--shadow-sm); }
[data-theme="dark"] .hero-cat { background:rgba(22,32,25,.8); }

@media (max-width:640px) {
  .mafatih-grid { grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
  .mafatih-item-grid { grid-template-columns:1fr; }
  .istikare-result { padding:18px 14px; }
}

/* صوت دعا — پخش با گفتار دستگاه */
.dua-tts-box { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.dua-tts-box .btn-continuous { flex:0 0 auto; }


/* ============================================================
   v1.4 — جستجوی نهجالبلاغه + بخش حفظ قرآن
   ============================================================ */
.nahj-search {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  max-width: 640px; margin: 0 auto 20px;
  padding: 10px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--shadow-sm);
}
.nahj-search input[type="search"] {
  flex: 1 1 220px; border: none; background: transparent; color: var(--ink);
  font-family: var(--font-ui); font-size: 14px; padding: 9px 12px; outline: none;
}
.nahj-search button {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: none; border-radius: 999px; padding: 9px 18px; font-weight: 700; font-size: 13px;
  background: linear-gradient(135deg, var(--brand), var(--brand-strong)); color: #fff;
}
.nahj-search-clear { font-size: 12px; color: var(--muted); text-decoration: none; }
.nahj-search-clear:hover { color: var(--brand); }

/* ---------- حفظ قرآن ---------- */
.hifz-page { max-width: 900px; }
.hifz-setup {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; margin: 18px 0 24px; display: grid; gap: 14px;
}
.hifz-setup-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hifz-label { font-weight: 700; font-size: 13px; color: var(--ink-soft); min-width: 96px; }
.hifz-range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hifz-range select { min-width: 84px; }
.hifz-range .continuous-hint { width: auto; text-align: start; }
.hifz-modes, .hifz-actions { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.hifz-mode, .hifz-level {
  cursor: pointer; font-family: var(--font-ui); font-size: 12.5px; font-weight: 600;
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--bg-soft); color: var(--ink-soft);
  transition: all .2s var(--ease);
}
.hifz-mode:hover, .hifz-level:hover { border-color: var(--brand); color: var(--brand); }
.hifz-mode.is-active, .hifz-level.is-active {
  background: var(--brand); border-color: var(--brand); color: #fff;
  box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--brand) 70%, transparent);
}
.hifz-actions { margin-top: 4px; }
.hifz-actions .fold-show-all { cursor: pointer; }
/* اجرای تمرین */
.hifz-practice { margin: 18px 0; }
.hifz-ayah { border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface); }
.hifz-w { border-radius: 5px; }
.hifz-hidden {
  background: var(--brand-soft); color: transparent !important; cursor: pointer;
  border-radius: 6px; padding: 0 6px; user-select: none;
  transition: background .2s var(--ease);
}
.hifz-hidden:hover { background: color-mix(in srgb, var(--brand) 22%, transparent); }
.hifz-first { color: var(--brand-strong); font-weight: 700; cursor: pointer; }
.hifz-first.hifz-revealed { color: inherit; font-weight: inherit; }
/* آزمون */
.hifz-quiz-card { margin: 0 auto; }
.hifz-quiz-opts { display: grid; gap: 9px; margin: 14px 0; text-align: start; }
.hifz-opt {
  cursor: pointer; text-align: start; font-family: var(--font-ui); font-size: 13.5px; line-height: 1.9;
  padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--bg-soft); color: var(--ink); transition: all .2s var(--ease);
}
.hifz-opt:hover { border-color: var(--brand); transform: translateY(-1px); }
.hifz-opt.is-ok { background: #E8F6EE; border-color: #2E9E6B; color: #1F7A4D; font-weight: 700; }
.hifz-opt.is-bad { background: #FBEAE5; border-color: #B4472F; color: #B4472F; }
[data-theme="dark"] .hifz-opt.is-ok { background: rgba(46,158,107,.15); color: #5FCB96; }
[data-theme="dark"] .hifz-opt.is-bad { background: rgba(180,71,47,.16); color: #E08D75; }
/* نوار صوت حفظ */
.hifz-audio-bar {
  position: sticky; bottom: 14px; z-index: 5;
  display: flex; align-items: center; gap: 12px;
  max-width: 620px; margin: 16px auto 0; padding: 12px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  box-shadow: var(--shadow-md);
}
.hifz-audio-bar .rec-progress { flex: 1; }
.hifz-audio-bar .rec-title { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }
.hifz-practice .ayah.playing { background: color-mix(in srgb, var(--brand) 8%, transparent); border-radius: 14px; }
.hifz-practice .ayah.playing .ayah-ar { color: var(--brand); }
/* راهنما */
.hifz-help { margin-top: 10px; }
@media (max-width: 640px) {
  .hifz-label { min-width: 100%; }
  .hifz-audio-bar { margin-inline: 8px; }
  .hifz-audio-bar .rec-title { display: none; }
}