/* فلش‌های بالا/پایینِ نیتیوِ همهٔ فیلدهای عدد حذف شوند (با طراحیِ سایت هماهنگ) */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* کروم برای فیلدِ پرشده `color: -internal-light-dark(black, white) !important` می‌گذارد.
 * بدونِ این اعلام، صفحه روشن فرض می‌شود و متنِ فیلدِ پرشده **سیاه** درمی‌آید — و چون
 * !important است، رنگِ خودمان زیرش می‌مانَد. (۲۰۲۶-۰۸-۲۲، گزارشِ کاربر روی فرمِ ثبت‌نام.) */
:root { color-scheme: dark; }
:root {
  --bg: #0f1115;
  --panel: #181b22;
  --text: #f5f6f8;
  --muted: #8b92a1;
  --accent: #5b8cff;
  --accent-2: #2d3344;
  --font-scale: 1;
  /* توکن‌های rewards/auth قبلاً تعریف نشده بودند و به مقادیرِ روشن (سفید) برمی‌گشتند →
     کارت‌های «فراموشی/بازنشانیِ رمز» سفید و ناهماهنگ با تمِ تیره می‌شدند. حالا به پالتِ سایت بسته شدند. */
  --rw-accent: var(--accent);
  --rw-muted: var(--muted);
  --rw-text: var(--text);
  --rw-card: var(--panel);
  --rw-border: var(--accent-2);
  --rw-input-bg: var(--bg);
}
/* لیستِ بازشوندهٔ انتخابگرِ زبانِ کوییز هم با تمِ تیره هماهنگ شود (نه سفیدِ پیش‌فرضِ مرورگر). */
.rw-input option, select.rw-input option { background: var(--panel); color: var(--text); }
/* ---- دیالوگِ تأیید + نوتیفیکیشنِ هم‌سبک (جایگزینِ confirm()/alert() نیتیو) ---- */
.ui-confirm-ov { position: fixed; inset: 0; z-index: 10000; background: rgba(6,8,12,.72); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.ui-confirm-box { background: var(--panel); border: 1px solid var(--accent-2); border-radius: 14px; padding: 24px;
  max-width: 360px; width: 100%; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.ui-confirm-msg { color: var(--text); font-size: 15px; line-height: 1.6; margin: 0 0 20px; }
.ui-confirm-btns { display: flex; gap: 10px; justify-content: flex-end; }
.ui-confirm-btns button { padding: 10px 18px; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; border: 1px solid var(--accent-2); }
.ui-confirm-no { background: transparent; color: var(--muted); }
.ui-confirm-no:hover { color: var(--text); border-color: var(--accent); }
.ui-confirm-yes { background: linear-gradient(135deg, var(--accent), #7b5bff); color: #fff; border: none; }
.ui-confirm-yes:hover { filter: brightness(1.05); }
.ui-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(12px); z-index: 10001;
  max-width: 90%; padding: 13px 20px; border-radius: 12px; font-size: 14px; font-weight: 600; color: #fff;
  background: var(--panel); border: 1px solid var(--accent-2); box-shadow: 0 12px 40px rgba(0,0,0,.45);
  opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; }
.ui-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.ui-toast.err { border-color: #ff6b6b; }

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

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* هیچ‌وقت اسکرولِ افقی / بیرون‌زدنِ آیکون‌ها روی موبایل */
}
html, body { overscroll-behavior: none; } /* بدونِ کش‌آمدن/رفرشِ کششیِ موبایل */
/* وقتی صفحهٔ زنده باز است، بدنه هیچ اسکرولی نداشته باشد. (بدنه min-height:100vh دارد و روی
   موبایل 100vh بلندتر از ناحیهٔ دیده‌شده است — همان «یکم اسکرولِ» اضافه دقیقاً از همین‌جا می‌آمد.) */
html.live-active, html.live-active body { overflow: hidden; height: 100%; }

.screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.hidden { display: none !important; }

/* ---- صفحه انتخاب زبان (هم‌سبکِ سایت) ---- */
#langScreen {
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 34px 20px;
  background: radial-gradient(1100px 520px at 50% -8%, rgba(91, 140, 255, .16), transparent 62%);
}
.lang-inner {
  width: 100%;
  max-width: 470px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  margin-bottom: 30px;
}
.brand-mark {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), #7b5bff);
  box-shadow: 0 8px 22px rgba(91, 140, 255, .4);
}
.brand-mark svg { width: 22px; height: 22px; }
.brand-word { font-size: 21px; font-weight: 800; letter-spacing: -.4px; color: #eef2ff; }
.brand-word i {
  font-style: normal;
  background: linear-gradient(135deg, #6f9cff, #9a63ff, #ff7ad5);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
#hallName { font-size: 27px; font-weight: 800; letter-spacing: -.5px; margin-bottom: 8px; }
.subtitle-hint {
  color: var(--muted); margin-bottom: 26px; font-size: 14.5px;
  display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap;
}
.subtitle-hint .dot { opacity: .45; }
.lang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 11px;
  width: 100%;
}
.lang-btn {
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, .08);
  color: var(--text);
  padding: 16px 14px;
  border-radius: 14px;
  font-size: 16.5px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .12s, border-color .15s, background .15s, box-shadow .15s;
}
.lang-btn:hover { border-color: rgba(91, 140, 255, .55); background: #1c2030; box-shadow: 0 8px 22px rgba(0, 0, 0, .3); }
.lang-btn:active { transform: scale(.97); }
/* دکمهٔ «زبانِ خودِ سالن»: دو خطی است، پس چیدمانش ستونی می‌شود و بالا/پایینش کمتر —
   تا قدش با بقیهٔ دکمه‌های شبکه یکی بماند و ردیف ناهماهنگ نشود. */
.lang-btn-src {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding-top: 8px; padding-bottom: 8px;
}
.lang-btn-note {
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.3;
  opacity: .6;
  max-width: 100%;
  white-space: nowrap;      /* یک خط بماند… */
  overflow: hidden;         /* …و اگر ترجمه‌ای بلند بود، به‌جای شکستنِ چیدمان کوتاه شود */
  text-overflow: ellipsis;
}
.wait-banner {
  margin-top: 22px; width: 100%;
  color: #cdd9ff;
  background: linear-gradient(135deg, rgba(91, 140, 255, .12), rgba(123, 91, 255, .08));
  border: 1px solid rgba(91, 140, 255, .28);
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 13.5px;
  line-height: 1.55;
}
.muted { color: var(--muted); }

/* ---- صفحه زیرنویس ---- */
/* صفحهٔ زنده = یک لایهٔ ثابتِ تمام‌صفحه (position:fixed) به اندازهٔ دقیقِ ناحیهٔ دیده‌شده.
   چون ثابت است و بیرونِ جریانِ صفحه، اصلاً چیزی برای اسکرول‌شدنِ کلِ صفحه نمی‌مانَد؛
   فقط ناحیهٔ زیرنویس داخلِ خودش اسکرول می‌شود و هدر و نوارِ پایین میخ‌کوب می‌مانند.
   ارتفاع با ترتیبِ fallback: 100vh → 100dvh → --app-height (اندازهٔ واقعیِ innerHeight با JS؛
   قابل‌اعتمادترین روی موبایل، چون نوارِ آدرس را درست حساب می‌کند). */
#liveScreen {
  position: fixed; top: 0; left: 0; right: 0;
  min-height: 0;
  height: 100vh;
  height: 100dvh;
  height: var(--app-height, 100dvh);
  overflow: hidden;
}
.live-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  padding-top: calc(12px + env(safe-area-inset-top)); /* زیرِ ناچ/نوارِ وضعیت نرود */
  background: var(--panel);
  border-bottom: 1px solid var(--accent-2);
  flex: 0 0 auto;
  z-index: 20;
}
/* برند در صورتِ کمبودِ جا کوتاه می‌شود تا آیکون‌های کنترل هیچ‌وقت از صفحه بیرون نزنند */
.brand-small { display: inline-flex; align-items: center; color: #eef2ff; font-weight: 800; font-size: 15px; letter-spacing: -.3px;
  min-width: 0; flex: 0 1 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.brand-small i { font-style: normal; background: linear-gradient(135deg, #6f9cff, #9a63ff, #ff7ad5); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.controls { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; }
.controls button, .controls select {
  background: var(--accent-2);
  color: var(--text);
  border: none;
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
}
/* گوشیِ باریک: دکمه‌ها را جمع‌وجورتر کن تا همه در یک ردیف جا شوند */
@media (max-width: 430px) {
  .live-header { padding: 10px 10px; }
  .controls { gap: 4px; }
  .controls button, .controls select { padding: 7px 8px; font-size: 13px; }
  .brand-small { font-size: 13.5px; }
}
@media (max-width: 340px) {
  .controls button, .controls select { padding: 6px 6px; font-size: 12px; }
}
.status-bar {
  background: rgba(255, 181, 84, .12);
  color: #ffc97a;
  border-bottom: 1px solid rgba(255, 181, 84, .2);
  padding: 9px 16px;
  text-align: center;
  font-size: 13.5px;
}

.subtitles {
  flex: 1 1 auto;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  /* پایین: فاصله تا جدیدترین خط بالای دکمهٔ شناورِ «جوایز» بماند (نه بیش‌ازحد خالی مثل قبل). */
  padding: 22px 16px calc(104px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 13px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scroll-padding-bottom: 104px;
  text-align: start;
  /* لازم برای فلکس: تا زیرنویس‌ها داخلِ همین کادر اسکرول شوند، نه اینکه کلِ صفحه
     اسکرول شده و خط‌ها از پشتِ هدر (منوها) رد شوند و قاطی شوند. */
  min-height: 0;
}
.subtitles.waiting-mode { justify-content: center; padding-bottom: 26px; }
/* زیرنویسِ زنده مثلِ چت از پایین رشد کند: کم که باشد، جدیدترین خط پایین می‌ماند نه بالا؛
   زیاد که شد، این فاصله جمع می‌شود و اسکرول از بالا عادی کار می‌کند (بدونِ بریدنِ سرِ متن). */
.subtitles:not(.waiting-mode)::before { content: ''; margin-top: auto; }

.line {
  text-align: start;
  line-height: 1.62;
  letter-spacing: .2px;
  overflow-wrap: break-word; /* کلمهٔ بلند/لینک از کادر بیرون نزند */
  word-break: break-word;
  opacity: 0;
  animation: fadeIn .3s ease forwards;
  transition: color .5s ease, font-size .4s ease;
  /* هنگام اسکرول به جدیدترین خط، این فاصله پایین می‌ماند تا زیرِ دکمهٔ شناورِ
     «عضویت/جوایز» پنهان نشود (روی موبایل دکمه پایینِ صفحه است). */
  scroll-margin-bottom: 96px;
}
.line.old {
  color: var(--muted);
  font-size: calc(18px * var(--font-scale));
}
.line.latest {
  color: #fff;
  font-size: calc(26px * var(--font-scale));
  font-weight: 600;
  padding: 15px 18px;
  border-radius: 16px;
  border: 1px solid rgba(91, 140, 255, .20);
  border-inline-start: 3px solid var(--accent);
  background: linear-gradient(135deg, rgba(91, 140, 255, .13), rgba(123, 91, 255, .07));
  box-shadow: 0 10px 34px rgba(0, 0, 0, .28);
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* پیش‌نمایش (هنوز در حالِ اصلاح): کمی محو + نشانگرِ «…» تا رسیدنِ نسخهٔ نهایی */
.line.latest.interim { color: #c7d2e6; border-inline-start-color: rgba(91, 140, 255, .45); }
.line.latest.interim::after { content: ' …'; opacity: .55; font-weight: 500; }

/* کارتِ انتظارِ خوش‌نقش پیش از شروعِ پخش — هم‌سبکِ سایت */
.waiting {
  align-self: center;
  width: 100%;
  max-width: 440px;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  padding: 34px 26px;
  background: linear-gradient(135deg, rgba(91, 140, 255, .11), rgba(123, 91, 255, .06));
  border: 1px solid rgba(91, 140, 255, .26);
  border-radius: 20px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, .35);
}
.waiting-ico {
  width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center; font-size: 28px;
  background: rgba(91, 140, 255, .16);
  border: 1px solid rgba(91, 140, 255, .32);
  animation: waitPulse 1.9s ease-in-out infinite;
}
.waiting-text { font-size: calc(15.5px * var(--font-scale)); line-height: 1.6; color: #cdd9ff; }
@keyframes waitPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(91, 140, 255, .35); } 50% { box-shadow: 0 0 0 12px rgba(91, 140, 255, 0); } }

/* نشانِ کوچکِ لوگو در هدرِ صفحهٔ زنده */
.brand-mark-sm {
  width: 26px; height: 26px; border-radius: 8px;
  display: inline-grid; place-items: center; vertical-align: middle; margin-inline-end: 8px;
  background: linear-gradient(135deg, var(--accent), #7b5bff);
  box-shadow: 0 4px 12px rgba(91, 140, 255, .4);
}
.brand-mark-sm svg { width: 15px; height: 15px; }

/* ---- آرشیو ---- */
.ghost-btn {
  margin-top: 28px; background: transparent; border: 1px solid var(--accent-2);
  color: var(--muted); padding: 12px 20px; border-radius: 12px; font-size: 15px; cursor: pointer;
}
.ghost-btn:hover { border-color: var(--accent); color: var(--text); }
.back-btn { background: var(--accent-2); color: var(--text); border: none; border-radius: 8px;
  width: 32px; height: 32px; font-size: 20px; line-height: 1; cursor: pointer; }
.archive-body { flex: 1; overflow-y: auto; padding: 16px 16px 30vh; display: flex; flex-direction: column; gap: 14px; }
.ar-search { width: 100%; padding: 12px 14px; border-radius: 12px; background: var(--panel);
  border: 1px solid var(--accent-2); color: var(--text); font-size: 15px; }
.ar-search:focus { outline: none; border-color: var(--accent); }
.archive-list { display: flex; flex-direction: column; gap: 10px; }
.archive-item { text-align: start; background: var(--panel); border: 1px solid var(--accent-2);
  border-radius: 12px; padding: 14px 16px; cursor: pointer; color: var(--text); }
.archive-item:hover { border-color: var(--accent); }
.ai-title { font-size: 16px; font-weight: 600; }
.ai-meta { color: var(--muted); font-size: 13px; margin-top: 4px; }
.ai-snippet { color: var(--muted); font-size: 13px; margin-top: 8px; line-height: 1.5; }
.ai-snippet b { color: var(--accent); }
.ae-video { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 12px;
  overflow: hidden; background: #000; }
.ae-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ae-langs { display: flex; flex-wrap: wrap; gap: 8px; position: sticky; top: 0; z-index: 2;
  background: var(--bg); padding: 4px 0 10px; border-bottom: 1px solid var(--line, rgba(255,255,255,.08)); }
.ae-lang { background: var(--accent-2); border: 1px solid transparent; color: var(--text);
  border-radius: 999px; padding: 7px 14px; font-size: 14px; font-weight: 600; cursor: pointer; }
.ae-lang.active { background: var(--accent); }
.ae-text { white-space: pre-wrap; line-height: 1.85; font-size: calc(17px * var(--font-scale));
  color: var(--text); }
/* ویدیوی یوتیوب: یک دکمهٔ کوچک ثانویه، نه نمایش بزرگ بالای صفحه */
.ae-video-btn { align-self: flex-start; background: transparent; border: 1px solid var(--accent);
  color: var(--accent); border-radius: 999px; padding: 9px 16px; font-size: 14px; font-weight: 600;
  cursor: pointer; margin-top: 6px; }
.ae-video-btn:active { transform: translateY(1px); }

/* ============================================================
   جوایز / کوییز / عضویت (گیمیفیکیشن)
   ============================================================ */
.rewards-fab {
  position: fixed; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 150;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 15px; border: none; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, var(--accent), #7b5bff); color: #fff;
  box-shadow: 0 10px 30px rgba(91,140,255,.45); font: inherit; font-weight: 800;
}
.rewards-fab .rf-ico { font-size: 19px; line-height: 1; }
.rewards-fab .rf-label { font-size: 12.5px; font-weight: 700; letter-spacing: .1px; white-space: nowrap; }
.rewards-fab .rf-points { font-size: 14px; font-weight: 800; }
.rewards-fab:active { transform: scale(.95); }

.rewards-overlay {
  position: fixed; inset: 0; z-index: 200; background: var(--bg);
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top); animation: rwUp .22s ease;
}
@keyframes rwUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.rewards-overlay.hidden { display: none; }
.rw-chip { background: rgba(91,140,255,.16); color: #cdd9ff; border: 1px solid rgba(91,140,255,.3);
  padding: 5px 11px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.rw-chip b { font-weight: 800; }
/* گروهِ سمتِ راستِ هدرِ جوایز: امتیاز + دکمهٔ خروج */
.rw-head-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.rw-logout-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 9px; background: rgba(255,255,255,.05); border: 1px solid var(--accent-2); color: #cdd6ea;
  cursor: pointer; padding: 0; transition: background .15s, border-color .15s, color .15s; }
.rw-logout-btn:hover { background: rgba(255,107,107,.12); border-color: rgba(255,107,107,.4); color: #ff8a8a; }
.rw-logout-btn:active { transform: scale(.94); }
.rw-logout-btn svg { width: 18px; height: 18px; }
.rewards-body { flex: 1; overflow-y: auto; padding: 16px; -webkit-overflow-scrolling: touch; }

/* آموزش (How it works) */
.how-cta { display: inline-flex; align-items: center; gap: 7px; margin: 2px auto 14px; padding: 9px 17px;
  background: rgba(91,140,255,.14); color: #cdd9ff; border: 1px solid rgba(91,140,255,.42);
  border-radius: 999px; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.how-cta:hover { background: rgba(91,140,255,.22); border-color: var(--accent); }
#howBtnLive { font-weight: 800; background: rgba(91,140,255,.22); color: #dbe6ff; white-space: nowrap; }
.how-body { max-width: 540px; margin: 0 auto; }
.how-intro { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 4px 0 16px; text-align: center; }
.how-step { background: var(--panel); border: 1px solid var(--accent-2); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 11px; }
.how-step-t { font-size: 15.5px; font-weight: 700; margin-bottom: 5px; color: var(--text); }
.how-step-b { font-size: 13.5px; line-height: 1.7; color: var(--muted); }
.how-tip { background: rgba(91,140,255,.1); border: 1px solid rgba(91,140,255,.28); border-radius: 14px;
  padding: 13px 15px; font-size: 13px; line-height: 1.65; color: #cdd9ff; margin-top: 4px; }

/* auth */
.rw-auth .rw-card { max-width: 380px; margin: 18px auto; background: var(--panel);
  border: 1px solid var(--accent-2); border-radius: 18px; padding: 26px 22px; text-align: center; }
.rw-trophy { font-size: 40px; margin-bottom: 8px; }
.rw-auth h2 { font-size: 20px; margin: 0 0 6px; }
.rw-sub { color: var(--muted); font-size: 13.5px; line-height: 1.55; margin: 0 0 18px; }
.rw-input { width: 100%; box-sizing: border-box; background: var(--bg); border: 1px solid var(--accent-2);
  border-radius: 11px; padding: 12px 14px; color: var(--text); font: inherit; font-size: 15px; margin-bottom: 10px; }
.rw-input:focus { outline: none; border-color: var(--accent); }
.rw-err { color: #ff7a8a; font-size: 13px; margin: 2px 0 8px; }
.rw-btn { width: 100%; border: none; border-radius: 11px; padding: 13px; font: inherit; font-weight: 800;
  font-size: 15px; cursor: pointer; color: #fff; background: linear-gradient(135deg, var(--accent), #7b5bff); }
.rw-btn.ghost { background: transparent; border: 1px solid var(--accent-2); color: var(--muted); margin-top: 16px; }
.rw-btn:active { transform: scale(.99); }
.rw-switch { font-size: 13.5px; color: var(--muted); margin: 14px 0 0; }
.rw-switch a { color: var(--accent); font-weight: 700; text-decoration: none; }

/* tabs */
.rw-tabs { display: flex; gap: 6px; background: var(--panel); border: 1px solid var(--accent-2);
  border-radius: 13px; padding: 5px; margin-bottom: 14px; position: sticky; top: 0; z-index: 2; }
.rw-tab { flex: 1; border: none; background: transparent; color: var(--muted); font: inherit; font-weight: 700;
  font-size: 13.5px; padding: 9px 4px; border-radius: 9px; cursor: pointer; }
.rw-tab.active { background: linear-gradient(135deg, var(--accent), #7b5bff); color: #fff; }
.rw-pane { animation: rwUp .2s ease; }
.rw-empty { text-align: center; color: var(--muted); padding: 36px 16px; font-size: 14px; }
/* پرسشِ تاییدِ عضو قبل از شروعِ کوییز (به‌جای تایمرِ ناگهانی) */
.rw-optin { text-align: center; padding: 30px 18px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.rw-optin-ic { font-size: 38px; }
.rw-optin-q { color: var(--text); font-size: 15.5px; line-height: 1.6; max-width: 340px; margin: 0; }
.rw-optin-btn { background: var(--accent); color: #fff; border: none; border-radius: 12px; padding: 13px 28px;
  font-size: 15px; font-weight: 700; cursor: pointer; }
.rw-optin-btn:hover { filter: brightness(1.05); }
/* پیامِ «در انتظارِ تاییدِ مسئول» برای عضوِ تاییدنشده */
.rw-pending { text-align: center; padding: 34px 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.rw-pending-ic { font-size: 40px; }
.rw-pending-t { margin: 0; font-size: 17px; color: var(--text); }
.rw-pending-b { margin: 0; font-size: 14px; line-height: 1.7; color: var(--muted); max-width: 360px; }

/* quiz */
/* شمارشِ معکوسِ ۲ دقیقه‌ایِ کوییز */
.rw-quiz-timer { position: sticky; top: 0; z-index: 5; align-self: flex-start; margin: 0 0 12px;
  display: inline-block; padding: 6px 14px; border-radius: 999px; font-size: 15px; font-weight: 800;
  letter-spacing: .3px; color: #cdd9ff; background: rgba(91,140,255,.16); border: 1px solid rgba(91,140,255,.35); }
.rw-quiz-timer.low { color: #ffd07a; background: rgba(255,176,32,.16); border-color: rgba(255,176,32,.45); animation: pulseTimer 1s infinite; }
.rw-quiz-timer.expired { color: #ff9a9a; background: rgba(255,107,107,.14); border-color: rgba(255,107,107,.4); }
@keyframes pulseTimer { 50% { opacity: .55; } }
.rw-q.expired { opacity: .6; }
.rw-q { background: var(--panel); border: 1px solid var(--accent-2); border-radius: 15px; padding: 16px; margin-bottom: 12px; position: relative; }
.rw-q-num { position: absolute; top: -9px; left: 14px; width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #7b5bff); color: #fff; font-size: 12px; font-weight: 800;
  display: grid; place-items: center; }
.rw-q-text { font-size: 16px; font-weight: 600; margin: 4px 0 12px; line-height: 1.5; }
.rw-opts { display: flex; flex-direction: column; gap: 8px; }
.rw-opt { text-align: start; background: var(--bg); border: 1px solid var(--accent-2); color: var(--text);
  border-radius: 11px; padding: 12px 14px; font: inherit; font-size: 14.5px; cursor: pointer; transition: border-color .15s, background .15s; }
.rw-opt:not(:disabled):hover { border-color: var(--accent); }
.rw-opt:disabled { opacity: .7; cursor: default; }
.rw-opt.correct { border-color: #46c98c; background: rgba(70,201,140,.15); }
.rw-opt.wrong { border-color: #ff6b6b; background: rgba(255,107,107,.13); }
.rw-q-res { margin-top: 10px; font-size: 13.5px; font-weight: 700; }
.rw-q-res.ok { color: #46c98c; } .rw-q-res.no { color: #ff8a8a; }

/* store */
.rw-item { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--accent-2);
  border-radius: 14px; padding: 14px; margin-bottom: 10px; }
.rw-item-main { flex: 1; min-width: 0; }
.rw-item-name { font-size: 15.5px; font-weight: 700; }
.rw-item-desc { font-size: 13px; color: var(--muted); margin-top: 3px; }
.rw-item-side { text-align: end; flex: none; }
.rw-item-cost { font-size: 13px; font-weight: 800; color: #ffd166; margin-bottom: 7px; white-space: nowrap; }
.rw-item-btn { border: none; border-radius: 10px; padding: 9px 14px; font: inherit; font-weight: 700; font-size: 13px;
  color: #fff; background: linear-gradient(135deg, var(--accent), #7b5bff); cursor: pointer; white-space: nowrap; }
.rw-item-btn:disabled { background: var(--accent-2); color: var(--muted); cursor: default; }
.rw-item-btn.done { background: #46c98c; }

/* leaderboard */
.rw-myrank { display: flex; align-items: center; gap: 10px; background: linear-gradient(135deg, rgba(91,140,255,.16), rgba(123,91,255,.1));
  border: 1px solid rgba(91,140,255,.3); border-radius: 13px; padding: 13px 16px; margin-bottom: 14px; }
.rw-myrank b { font-size: 19px; } .rw-myrank-pts { margin-inline-start: auto; color: var(--muted); font-weight: 700; }
.rw-board-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--accent-2); }
.rw-board-row.mine { background: rgba(91,140,255,.1); border-radius: 10px; }
.rw-rank { width: 30px; font-weight: 800; font-size: 15px; }
.rw-bname { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rw-bpts { color: #ffd166; font-weight: 800; font-size: 13.5px; }

/* me */
.rw-me-head { text-align: center; padding: 10px 0 18px; }
.rw-me-name { font-size: 19px; font-weight: 800; }
.rw-me-stats { color: var(--muted); margin-top: 4px; font-size: 14px; }
.rw-me-pts { color: #ffd166; font-weight: 800; font-size: 17px; }
.rw-sec-title { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 800; margin: 14px 0 8px; }
.rw-red-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--panel);
  border: 1px solid var(--accent-2); border-radius: 11px; padding: 11px 13px; margin-bottom: 7px; font-size: 14px; }
.rw-red-note { color: var(--muted); font-size: 11.5px; text-align: end; }
.rw-tx-row { display: flex; justify-content: space-between; padding: 9px 2px; border-bottom: 1px solid var(--accent-2); font-size: 14px; }
.rw-tx-row .pos { color: #46c98c; font-weight: 700; } .rw-tx-row .neg { color: #ff8a8a; font-weight: 700; }

/* جعبهٔ ویجتِ کپچا (Turnstile) */
.cf-box { margin: 4px auto 2px; display: flex; justify-content: center; }
.cf-box:empty { display: none; }

/* ردیفِ نام/فامیل و موبایلِ ثبت‌نامِ حضار */
.rw-2col { display: flex; gap: 8px; }
.rw-2col .rw-input { margin-bottom: 10px; }
.rw-phone { display: flex; gap: 8px; align-items: start; }
.rw-phone .rw-phone-num { flex: 1; }
/* منوی کشویی سفارشیِ کدِ کشور — هم‌سبکِ کارت‌های سایت */
.rw-cc { position: relative; flex: 0 0 auto; }
.rw-cc-btn { display: flex; align-items: center; gap: 6px; justify-content: space-between;
  min-width: 104px; background: var(--bg); border: 1px solid var(--accent-2); border-radius: 11px;
  padding: 12px 12px; color: var(--text); font: inherit; font-size: 15px; cursor: pointer; }
.rw-cc-btn:hover { border-color: var(--accent); }
.rw-cc-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
.rw-cc-caret { color: var(--muted); font-size: 11px; flex: none; }
.rw-cc-pop { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; width: 280px; max-width: 76vw;
  background: var(--panel); border: 1px solid var(--accent-2); border-radius: 12px;
  box-shadow: 0 16px 44px rgba(0,0,0,.5); overflow: hidden; }
.rw-cc-search { width: 100%; box-sizing: border-box; background: var(--bg); border: none;
  border-bottom: 1px solid var(--accent-2); color: var(--text); font: inherit; font-size: 14px; padding: 11px 14px; }
.rw-cc-search:focus { outline: none; }
.rw-cc-list { list-style: none; margin: 0; padding: 5px; max-height: 240px; overflow-y: auto; }
.rw-cc-list li { display: flex; justify-content: space-between; gap: 10px; align-items: center;
  padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.rw-cc-list li:hover { background: rgba(91,140,255,.15); }
.rw-cc-list li .cc-dial { color: var(--muted); flex: none; }
/* انتخابگرِ زبانِ کوییز: همان دراپ‌داونِ تیرهٔ کدِ کشور ولی تمام‌عرض (هم‌سبکِ سایت، نه selectِ نیتیو) */
.rw-lang-sel { position: relative; width: 100%; }
.rw-lang-btn { width: 100%; min-width: 0; }
.rw-lang-pop { width: 100%; max-width: 100%; left: 0; right: 0; }
.rw-lang-list { max-height: 220px; }
.rw-lang-list li { justify-content: flex-start; }

/* تغییر/بازنشانیِ رمزِ عضو */
.rw-cp { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 14px; }
.rw-cp input { width: 100%; padding: 11px 12px; border: 1px solid var(--rw-border, #d8dee9); border-radius: 10px; font-size: 15px; background: var(--rw-input-bg, #fff); color: inherit; box-sizing: border-box; }
.rw-cp-msg { font-size: 13px; color: var(--rw-muted, #6b7280); min-height: 16px; }
.rw-forgot { display: inline-block; margin-top: 10px; font-size: 13px; color: var(--rw-accent, #2563eb); text-decoration: none; text-align: center; width: 100%; }
.rw-forgot.hidden { display: none; }
.rw-reset-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(15,23,42,.55); display: flex; align-items: center; justify-content: center; padding: 20px; }
.rw-reset-card { position: relative; background: var(--rw-card); color: var(--rw-text); border-radius: 16px; padding: 28px 22px 22px; width: 100%; max-width: 360px; box-shadow: 0 24px 60px rgba(0,0,0,.5); border: 1px solid var(--accent-2); display: flex; flex-direction: column; gap: 11px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.rw-reset-card h3 { margin: 0 0 2px; font-size: 19px; font-weight: 800; }
.rw-reset-card input { width: 100%; padding: 12px 14px; border: 1px solid var(--accent-2); border-radius: 11px; font-size: 15px; box-sizing: border-box; background: var(--bg); color: var(--text); }
.rw-reset-card input::placeholder { color: var(--muted); }
.rw-reset-card input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(91,140,255,.18); }
.rw-reset-x { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--accent-2); color: var(--muted); font-size: 13px; cursor: pointer; padding: 0; transition: color .15s, border-color .15s; }
.rw-reset-x:hover { color: var(--text); border-color: var(--accent); }
/* کارتِ «فراموشی رمز» حضار، هم‌شکلِ کارتِ خوش‌نقشِ پنل مشتری (برند + عنوان + ورودی + دکمهٔ گرادیان + لینکِ بازگشت) */
.rw-forgot-card { padding: 30px 24px 22px; gap: 12px; max-width: 350px; }
.rw-fp-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 4px; }
.rw-fp-mark { width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), #7b5bff); }
.rw-fp-mark svg { width: 20px; height: 20px; }
.rw-fp-word { font-family: 'Sora', system-ui, -apple-system, sans-serif; font-size: 19px; font-weight: 800; color: var(--text); letter-spacing: -.3px; }
.rw-fp-word span { background: linear-gradient(120deg, #6f9cff, #9a63ff 52%, #ff7ad5); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.rw-forgot-card h3 { text-align: center; }
.rw-forgot-card .rw-sub { text-align: center; }
.rw-fp-back { text-align: center; margin: 6px 0 0; }
.rw-fp-back a { color: var(--accent); font-weight: 700; font-size: 13.5px; text-decoration: none; }
.rw-fp-back a:hover { text-decoration: underline; }

/* انتخابِ زبانِ کوییز در فرمِ ثبت‌نام */
.rw-lang-row { display: flex; flex-direction: column; gap: 4px; text-align: left; margin: 2px 0 2px; }
.rw-lang-row > span { font-size: 12px; color: var(--rw-muted, #6b7280); padding-left: 2px; }
.rw-lang-row.hidden { display: none; }
.rw-lang-row select.rw-input { width: 100%; }

/* کوییزِ ترتیبی: یک سوال در هر لحظه + تایمرِ ۹۰ ثانیه‌ایِ هر سوال */
.rw-q.locked { display: none; }                 /* سوالِ هنوز نرسیده پنهان است */
.rw-q.active { border-color: var(--brand, #4a8cff); box-shadow: 0 0 0 2px rgba(74,140,255,.22); }
.rw-q-head { display: flex; justify-content: flex-end; align-items: center; min-height: 16px; margin-bottom: 2px; }
.rw-q-timer { font-size: 13px; font-weight: 700; color: var(--muted, #9aa4b2); background: rgba(255,255,255,.06); border: 1px solid var(--accent-2, rgba(255,255,255,.12)); border-radius: 999px; padding: 3px 10px; }
.rw-q-timer.low { color: #ffd07a; background: rgba(255,176,32,.16); border-color: rgba(255,176,32,.45); animation: pulseTimer 1s infinite; }
.rw-q-timer.expired { color: #ff9a9a; background: rgba(255,107,107,.14); border-color: rgba(255,107,107,.4); }

/* دکمهٔ اتصالِ دوباره (رفرشِ ترجمه) */
#refreshBtn.spinning { animation: imtspin .7s linear; }
@keyframes imtspin { to { transform: rotate(360deg); } }

/* دکمهٔ صدا: وقتی روشن است سبز و کمی نورانی می‌شود */
#voiceBtn.voice-on { background: var(--green, #2ea567); color: #fff; box-shadow: 0 0 0 2px rgba(46,165,103,.35); }

/* ====================== «فاز دو نفره»: میکروفنِ حاضر ====================== */
/* بنرِ «X در حال صحبت است» — نوارِ باریک زیرِ هدر (بالای زیرنویس) */
.speaker-now { flex: 0 0 auto; margin: 0; padding: 8px 14px;
  background: rgba(91,140,255,.16); color: #cfe0ff; font-size: 13.5px; font-weight: 700;
  text-align: center; border-bottom: 1px solid rgba(91,140,255,.35); }

/* بنرِ توقفِ موقتِ ترجمه (کهربایی تا از بنرِ آبیِ گوینده جدا دیده شود) */
.paused-banner { flex: 0 0 auto; margin: 0; padding: 10px 14px;
  background: rgba(255,181,84,.16); color: #ffd591; font-size: 13.5px; font-weight: 700;
  text-align: center; line-height: 1.5; border-bottom: 1px solid rgba(255,181,84,.4); }

/* برچسبِ گوینده در زیرنویس (سخنران / نامِ حاضر) */
.spk-tag { color: var(--accent); font-weight: 800; margin-inline-end: 4px; }
.spk-tag.host { color: #46c98c; }

/* نوارِ پایینِ درخواستِ صحبت — آخرین فرزندِ ستونِ فلکس، همیشه پایین و دیده‌شونده */
.mic-req-bar { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  background: var(--bg); border-top: 1px solid var(--accent-2); }
.mic-req-status { text-align: center; font-size: 13.5px; font-weight: 700; color: var(--muted); }
.mic-req-btn { width: 100%; border: none; border-radius: 14px; padding: 15px 18px; cursor: pointer;
  font-size: 16px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--accent), #7b5bff);
  box-shadow: 0 8px 22px rgba(91,140,255,.35); }
.mic-req-btn:active { transform: scale(.98); }
.mic-req-btn.cancel { background: var(--panel); color: var(--muted); box-shadow: none; border: 1px solid var(--accent-2); }
/* (دکمهٔ جوایز روی صفحهٔ زنده بالا-راست است، پس دیگر با نوارِ پایین تداخل ندارد) */

/* چراغِ تمام‌صفحه‌ی «نوبتِ شماست» — نشانگرِ پخشِ زندهٔ صدا (میکروفنِ قرمز + موجِ صدا).
   --lvl (۰..۱) از سطحِ صدای واقعیِ میکروفن با JS ست می‌شود تا واقعاً «زنده» به‌نظر برسد. */
.mic-beacon { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 28px;
  background: radial-gradient(125% 85% at 50% 40%, #2a0c11 0%, #0a0d13 62%); --lvl: 0; }
/* هالهٔ نرمِ قرمز که آرام نفس می‌کشد (به‌جای فلاشِ تند) */
.mic-beacon::before { content: ''; position: absolute; inset: 0;
  background: radial-gradient(58% 42% at 50% 42%, rgba(255,60,64,.24), transparent 70%);
  opacity: calc(.45 + var(--lvl) * .55); animation: micGlow 1.8s ease-in-out infinite; }
@keyframes micGlow { 0%,100% { opacity: .45; } 50% { opacity: .85; } }
.mic-beacon-in { position: relative; text-align: center; max-width: 460px; }

/* پیلِ کوچکِ LIVE با نقطهٔ چشمک‌زنِ قرمز */
.mic-live { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 12.5px; letter-spacing: .18em;
  color: #ff6067; padding: 6px 14px; border: 1px solid rgba(255,80,86,.5); border-radius: 999px; background: rgba(255,50,56,.10); }
.mic-live .dot { width: 8px; height: 8px; border-radius: 50%; background: #ff3b41; box-shadow: 0 0 10px #ff3b41; animation: micBlink 1s steps(1,end) infinite; }
@keyframes micBlink { 50% { opacity: .2; } }

/* موجِ زندهٔ صدا — خطِ صافِ وسط وقتی ساکتیم، و بالا‌پایین وقتی حرف می‌زنیم */
.mic-wave { display: block; width: min(100%, 320px); height: 56px; margin: 2px auto 16px; }

/* میکروفنِ قرمز + حلقه‌های پخش‌شونده (نشانهٔ ارسالِ صدا) */
.mic-mic { position: relative; width: 168px; height: 168px; margin: 22px auto 28px; display: grid; place-items: center; }
.mic-aura { position: absolute; width: 116px; height: 116px; border-radius: 50%; background: rgba(255,60,64,.5);
  filter: blur(14px); transform: scale(calc(1 + var(--lvl) * .7)); opacity: calc(.35 + var(--lvl) * .5); transition: transform .08s linear, opacity .08s linear; }
.mic-ring { position: absolute; inset: 0; margin: auto; width: 116px; height: 116px; border-radius: 50%;
  border: 2px solid rgba(255,86,92,.5); animation: micWave 2.2s ease-out infinite; }
.mic-ring:nth-child(3) { animation-delay: .73s; }
.mic-ring:nth-child(4) { animation-delay: 1.46s; }
@keyframes micWave { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.15); opacity: 0; } }
.mic-disc { position: relative; z-index: 2; width: 116px; height: 116px; border-radius: 50%;
  background: linear-gradient(158deg, #ff5b60, #e01029); display: grid; place-items: center;
  box-shadow: 0 14px 44px rgba(255,40,54,.5), inset 0 1px 1px rgba(255,255,255,.35);
  transform: scale(calc(1 + var(--lvl) * .06)); transition: transform .08s linear; }
.mic-disc svg { width: 54px; height: 54px; }
.mic-beacon-t { margin-top: 6px; font-size: 29px; font-weight: 900; color: #fff; letter-spacing: -.3px; }
.mic-beacon-b { margin-top: 12px; font-size: 16px; line-height: 1.6; color: #e7c7ca; }
.mic-beacon-done { margin-top: 28px; border: none; border-radius: 14px; padding: 15px 32px; cursor: pointer;
  font-size: 16px; font-weight: 800; color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); }
.mic-beacon-done:active { transform: scale(.98); }
@media (prefers-reduced-motion: reduce) { .mic-ring, .mic-beacon::before, .mic-live .dot { animation: none; } }
/* گوشیِ کوتاه: میکروفن و فاصله‌ها جمع‌تر تا همه‌چیز بدونِ اسکرول جا شود */
@media (max-height: 720px) {
  .mic-mic { width: 132px; height: 132px; margin: 16px auto 8px; }
  .mic-aura, .mic-ring, .mic-disc { width: 96px; height: 96px; }
  .mic-disc svg { width: 44px; height: 44px; }
  .mic-wave { height: 46px; margin-bottom: 12px; }
  .mic-beacon-t { font-size: 25px; }
  .mic-beacon-b { font-size: 14.5px; }
  .mic-beacon-done { margin-top: 20px; padding: 13px 28px; }
}

/* وقتی درخواستِ صحبت داده‌ایم یا در حالِ صحبتیم، دکمهٔ شناورِ «جوایز» مزاحم نشود */
body.mic-speaking .rewards-fab { display: none !important; }

/* مودالِ پرسیدنِ نام */
.mic-modal { position: fixed; inset: 0; z-index: 190; display: grid; place-items: center; padding: 24px;
  background: rgba(6,8,14,.72); }
.mic-modal-card { width: 100%; max-width: 380px; background: var(--panel); border: 1px solid var(--accent-2);
  border-radius: 18px; padding: 22px; }
.mic-modal-title { font-size: 19px; font-weight: 800; color: var(--text); }
.mic-modal-sub { margin-top: 6px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.mic-modal-card input { width: 100%; margin-top: 16px; box-sizing: border-box; background: var(--bg);
  border: 1px solid var(--accent-2); border-radius: 12px; padding: 14px; color: var(--text); font-size: 16px; }
.mic-modal-card input:focus { outline: none; border-color: var(--accent); }
.mic-modal-actions { display: flex; gap: 10px; margin-top: 18px; }
.mic-modal-actions button { flex: 1; border-radius: 12px; padding: 13px; font-size: 15px; font-weight: 800; cursor: pointer; }
.mic-modal-ghost { background: transparent; color: var(--muted); border: 1px solid var(--accent-2); }
.mic-modal-go { background: linear-gradient(135deg, var(--accent), #7b5bff); color: #fff; border: none; }

/* «به نفرِ کناری بده» — مودالِ QRِ ورود به ترجمهٔ زنده */
.qr-modal { position: fixed; inset: 0; z-index: 190; display: grid; place-items: center; padding: 24px;
  background: rgba(6,8,14,.78); }
.qr-modal-card { position: relative; width: 100%; max-width: 360px; background: var(--panel);
  border: 1px solid var(--accent-2); border-radius: 20px; padding: 24px 22px; text-align: center; }
.qr-close { position: absolute; top: 10px; inset-inline-end: 10px; width: 34px; height: 34px; border-radius: 10px;
  border: none; background: var(--accent-2); color: var(--text); font-size: 16px; cursor: pointer; line-height: 1; }
.qr-modal-title { font-size: 19px; font-weight: 800; color: var(--text); padding: 0 24px; }
.qr-modal-sub { margin-top: 8px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.qr-box { margin: 18px auto 0; width: 232px; max-width: 78vw; aspect-ratio: 1; background: #fff;
  border-radius: 16px; padding: 14px; box-sizing: border-box; display: grid; place-items: center; }
.qr-box svg { width: 100%; height: 100%; display: block; }
.qr-hall { margin-top: 14px; font-size: 14.5px; font-weight: 700; color: var(--text); }

/* راهنمای مجوزِ میکروفون (وقتی مرورگر مسدود کرده و دیگر نمی‌پرسد) */
.mic-perm-ico { font-size: 40px; line-height: 1; text-align: center; margin-bottom: 10px; }
#micPermModal .mic-modal-title, #micPermModal .mic-modal-sub { text-align: center; }
.mic-perm-how { margin-top: 14px; padding: 13px 15px; border-radius: 12px; background: var(--bg);
  border: 1px solid var(--accent-2); color: #cfe0ff; font-size: 13.5px; line-height: 1.65; font-weight: 600; }
/* راهنمای تصویریِ بازکردنِ میکروفون (مینی‌مرورگر + فلش) */
.mic-guide { margin-top: 12px; padding: 10px 10px 8px; border-radius: 12px; background: var(--bg);
  border: 1px solid var(--accent-2); }
.mic-guide svg { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; }
.mic-guide-cap { margin-top: 6px; text-align: center; font-size: 12.5px; color: var(--muted); line-height: 1.55; }


/* دکمهٔ جوایز روی صفحهٔ زنده: بالا-راست زیرِ هدر (بالای صفحه معمولاً خالی است چون
   زیرنویس از پایین رشد می‌کند) + جمع‌شونده به یک آیکونِ کوچک تا جا نگیرد. */
.rewards-fab { transition: width .28s ease, padding .28s ease, border-radius .28s ease; }
.rewards-fab .rf-label { transition: opacity .18s ease; }
html.live-active .rewards-fab {
  top: calc(var(--hdr-h, 58px) + 10px);
  bottom: auto;
  right: 12px;
  padding: 8px 13px;
  box-shadow: 0 6px 18px rgba(91,140,255,.34);
}
/* جمع‌شده: فقط جامِ 🏆 (لمسِ راحت، بدونِ اشغالِ فضا) */
html.live-active .rewards-fab.rf-mini {
  width: 40px; height: 40px; padding: 0; gap: 0; justify-content: center;
}
html.live-active .rewards-fab.rf-mini .rf-label { opacity: 0; width: 0; overflow: hidden; }
/* بعد از ۲ دقیقه: پیلِ خیلی جمع‌وجورِ «🏆 Sign in» — فقط جام + کلمهٔ ورود، چیزِ دیگری نه */
html.live-active .rewards-fab.rf-signin { padding: 6px 11px; gap: 5px; }
html.live-active .rewards-fab.rf-signin .rf-ico { font-size: 15px; }
html.live-active .rewards-fab.rf-signin .rf-label { font-size: 11.5px; font-weight: 700; }


/* ---------- آیکون‌های خطی (Lucide، مجوزِ ISC) که جای ایموجی‌ها را گرفتند ----------
   اندازه با `em` است، نه پیکسل: هر جا ایموجی با font-size بزرگ/کوچک می‌شد، آیکون هم
   خودبه‌خود همان‌قدر می‌شود و هیچ چیدمانی جابه‌جا نمی‌شود.
   رنگ از currentColor می‌آید، پس با رنگِ متنِ اطرافش یکی است — شاملِ حالت‌های خطر/هشدار.
   `flex:none` لازم است چون بسیاری از این‌ها داخلِ ردیف‌های flex می‌نشینند و وگرنه له می‌شوند. */
.ico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.19em; display: inline-block; }

/* ---------- تکمیلِ خودکارِ مرورگر (autofill) ----------
 * وقتی کروم خودش فیلدی را پر می‌کند، پس‌زمینهٔ روشنِ خودش را رویش می‌کشد و در قالبِ تیره
 * کادر سفید می‌شود (گزارشِ کاربر: فرمِ ثبت‌نام، «Organization name»).
 *
 * آن پس‌زمینه با `background-color` قابلِ بازنویسی نیست — مرورگر آن را در لایه‌ای بالاتر
 * می‌کشد. تنها چیزی که رویش می‌نشیند، یک سایهٔ **درونیِ** توپُر است.
 *
 * ⚠ راهِ اولی که امتحان شد (`background-clip: text`) غلط بود: آن، پس‌زمینهٔ خودِ فیلد را هم
 * برش می‌زد، پس رنگِ پشتِ فیلد بیرون می‌زد — کاربر «خاکستری، نه هم‌رنگِ بقیه» دید و متن هم
 * سیاه شد. این نسخه رنگِ واقعیِ همان فیلد را می‌کشد و رنگِ متن را صریح تعیین می‌کند.
 *
 * `--fld` رنگِ پس‌زمینهٔ فیلد است؛ هر جا فیلد رنگِ دیگری دارد، همان‌جا بازتعریف می‌شود.
 */
:root { --fld: var(--bg); }
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--fld) inset;
  box-shadow: 0 0 0 1000px var(--fld) inset;
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  /* موتورهایی که سایه را دیر اعمال می‌کنند: رنگِ کروم با این تأخیر عملاً هرگز نمی‌رسد */
  transition: background-color 100000s ease-in-out 0s;
}
/* حلقهٔ فوکوس باید بمانَد — سایهٔ بالا در غیرِ این صورت جایش را می‌گرفت */
input:-webkit-autofill:focus, textarea:-webkit-autofill:focus, select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--fld) inset, 0 0 0 3px rgba(91,140,255,.18);
  box-shadow: 0 0 0 1000px var(--fld) inset, 0 0 0 3px rgba(91,140,255,.18);
  -webkit-text-fill-color: var(--text);
}
[dir=rtl] .cs-footer, [dir=rtl] .cs-foot-contact a, [dir=rtl] .cs-foot-links a { text-align: right; }
[dir=rtl] .cs-foot-contact, [dir=rtl] .cs-foot-links { align-items: flex-end; }

/* ═══════════════════════════════════════════════════════════════════════════
   سایتِ عمومیِ کلیسا — چیدمانِ «کتابی» (بازنویسیِ کامل، ۲۰۲۶-۰۸-۲۷)
   طرحِ قبلی تیره و کارتی بود و شبیهِ یک اپلیکیشن دیده می‌شد. سایتِ واقعیِ یک
   کلیسا روشن است، تایپوگرافی حرف اول را می‌زند، و فهرست دارد نه کارت.
   دامنهٔ این بلاک فقط سه صفحهٔ سایتِ کلیساست؛ رابطِ ترجمهٔ زنده تیره می‌ماند.
   ═══════════════════════════════════════════════════════════════════════════ */
#churchScreen, #postsArchiveScreen, #postEntryScreen {
  color-scheme: dark;
  --p-bg:    #100e0c;                  /* مشکیِ گرم، نه سرمه‌ایِ اپ‌مانند */
  --p-bg2:   #191512;
  --p-ink:   #f2ede4;                  /* سفیدِ گرم، نه سفیدِ خالص */
  --p-ink2:  #b0a698;
  --p-ink3:  #837a6d;
  --p-rule:  #2a251f;
  --p-rule2: #3d372e;
  --p-a:     #c98484;                  /* JS بر اساسِ نامِ کلیسا بازنویسی می‌کند */
  --p-serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, 'Times New Roman', serif;
  --p-sans:  system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --p-max:   1180px;
  background: var(--p-bg);
  color: var(--p-ink);
  font-family: var(--p-sans);
  min-height: 100vh;
}
#churchScreen { display: block; }
.cs-scroll { min-height: 100vh; display: flex; flex-direction: column; }
#churchScreen ::selection { background: var(--p-a); color: #fff; }

/* ── سردر ───────────────────────────────────────────────────────────────── */
.cs-header { background: var(--p-bg); border-bottom: 1px solid var(--p-rule); }
.cs-header-in { max-width: var(--p-max); margin: 0 auto; padding: 20px 32px;
  display: flex; align-items: center; gap: 28px; }
.cs-brand { display: flex; align-items: center; gap: 13px; min-width: 0;
  margin-right: auto; text-decoration: none; color: inherit; }
.cs-logo { height: 42px; width: 42px; border-radius: 4px; object-fit: cover; flex: none; }
.cs-mono { flex: none; height: 42px; width: 42px; display: grid; place-items: center;
  font-family: var(--p-serif); font-size: 17px; font-weight: 600; letter-spacing: .02em;
  color: var(--p-bg); background: var(--p-a); text-transform: uppercase; user-select: none; }
.cs-brand-text { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.cs-name { font-family: var(--p-serif); font-size: 20px; font-weight: 600; line-height: 1.15;
  letter-spacing: -.012em; color: var(--p-ink); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-place { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--p-ink3); }
.cs-place:empty { display: none; }
.cs-nav { display: flex; gap: 26px; }
.cs-nav-a { font-size: 14px; color: var(--p-ink2); text-decoration: none; padding-bottom: 3px;
  border-bottom: 1px solid transparent; transition: color .15s, border-color .15s; }
.cs-nav-a:hover { color: var(--p-ink); border-bottom-color: var(--p-a); }
.cs-actions { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.cs-lang { font-family: inherit; font-size: 13px; color: var(--p-ink2); background: transparent;
  border: 1px solid var(--p-rule2); border-radius: 2px; padding: 7px 10px; cursor: pointer; }
.cs-account { font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: .04em;
  color: var(--p-ink); background: transparent; border: 1px solid var(--p-ink); border-radius: 2px;
  padding: 8px 16px; cursor: pointer; transition: background .15s, color .15s; }
.cs-account:hover { background: var(--p-ink); color: var(--p-bg); }
.cs-acc-ava { display: none; }
.cs-acc-name { font-weight: 600; }

/* ── هیرو: نامتقارن، بدونِ عکس هم کامل ─────────────────────────────────── */
.cs-hero { max-width: var(--p-max); margin: 0 auto; width: 100%;
  padding: 84px 32px 76px; display: grid; gap: 56px;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr); align-items: start; }
.cs-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--p-a); margin-bottom: 22px; }
.cs-hero-name { font-family: var(--p-serif); font-weight: 600;
  font-size: clamp(38px, 6.2vw, 76px); line-height: 1.0; letter-spacing: -.026em;
  text-wrap: balance; margin: 0; color: var(--p-ink); }
.cs-lede { font-size: 17.5px; line-height: 1.72; color: var(--p-ink2);
  max-width: 46ch; margin: 26px 0 0; }
.cs-lede:empty { display: none; }
.cs-hero-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; margin-top: 38px; }
/* کنشِ اصلی یک «لینکِ کتابی» است، نه دکمهٔ رنگی — سلیقهٔ سایت: بدونِ پُرکردنِ تندِ رنگی */
.cs-act-main { font-family: inherit; font-size: 15.5px; font-weight: 650; color: var(--p-ink);
  background: none; border: none; padding: 0 0 5px; cursor: pointer;
  border-bottom: 2px solid var(--p-a); transition: color .15s, gap .15s;
  display: inline-flex; align-items: center; gap: 9px; }
.cs-act-main::after { content: '→'; color: var(--p-a); transition: transform .18s; }
.cs-act-main:hover::after { transform: translateX(4px); }
.cs-act-alt { font-size: 15px; color: var(--p-ink2); text-decoration: none;
  border: 1px solid var(--p-rule2); border-radius: 2px; padding: 10px 20px;
  transition: border-color .15s, color .15s; }
.cs-act-alt:hover { border-color: var(--p-ink); color: var(--p-ink); }

/* تابلوی اطلاعات — با یک خطِ عمودی به هیرو بسته می‌شود */
.cs-info { border-left: 1px solid var(--p-rule); padding-left: 30px; }
[dir=rtl] .cs-info { border-left: none; border-right: 1px solid var(--p-rule);
  padding-left: 0; padding-right: 30px; }
.cs-info-rows { display: flex; flex-direction: column; }
.cs-info-row { display: block; padding: 16px 0; border-bottom: 1px solid var(--p-rule);
  text-decoration: none; color: inherit; transition: border-color .15s; }
.cs-info-row:first-child { padding-top: 0; }
.cs-info-row:last-child { border-bottom: none; }
a.cs-info-row:hover { border-bottom-color: var(--p-a); }
a.cs-info-row:hover .cs-info-v { color: var(--p-a); }
.cs-info-k { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--p-ink3); margin-bottom: 7px; }
.cs-info-v { display: block; font-size: 15px; line-height: 1.55; color: var(--p-ink);
  overflow-wrap: anywhere; transition: color .15s; }
.cs-info-links { display: flex; flex-wrap: wrap; gap: 14px; }
.cs-info-links a { color: var(--p-ink); text-decoration: none; border-bottom: 1px solid var(--p-rule2); }
.cs-info-links a:hover { color: var(--p-a); border-bottom-color: var(--p-a); }

/* ── بخش‌ها ─────────────────────────────────────────────────────────────── */
.cs-main { max-width: var(--p-max); margin: 0 auto; width: 100%; padding: 0 32px; flex: 1; }
.cs-sec { padding: 62px 0; border-top: 1px solid var(--p-rule); }
.cs-sec-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; margin-bottom: 34px; }
.cs-sec-head h2 { font-family: var(--p-serif); font-weight: 600; font-size: clamp(24px, 3vw, 33px);
  letter-spacing: -.02em; margin: 0; color: var(--p-ink); }
.cs-seeall { font-family: inherit; font-size: 13.5px; color: var(--p-ink2); background: none;
  border: none; padding: 0; cursor: pointer; border-bottom: 1px solid var(--p-rule2); }
.cs-seeall:hover { color: var(--p-a); border-bottom-color: var(--p-a); }
.cs-prose { max-width: 68ch; }
.cs-about-text { font-size: 17px; line-height: 1.85; color: var(--p-ink2); white-space: pre-wrap; margin: 0; }
.cs-empty { color: var(--p-ink3); font-size: 15px; padding: 8px 0; }

/* ── فهرستِ سرمون‌ها — سطر، نه کارت ─────────────────────────────────────── */
.cs-list { border-top: 1px solid var(--p-rule); }
.cs-row { display: grid; grid-template-columns: 104px minmax(0, 1fr) 28px; gap: 20px;
  align-items: center; width: 100%; text-align: left; background: none;
  border: none; border-bottom: 1px solid var(--p-rule); padding: 22px 10px 22px 0;
  font-family: inherit; cursor: pointer; color: inherit; transition: background .16s, padding .16s; }
.cs-row:hover { background: var(--p-bg2); padding-left: 14px; padding-right: 0; }
[dir=rtl] .cs-row { text-align: right; padding: 22px 0 22px 10px; }
[dir=rtl] .cs-row:hover { padding-right: 14px; padding-left: 0; }
.cs-row-date { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--p-ink3); font-variant-numeric: tabular-nums; }
.cs-row-main { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.cs-row-t { font-family: var(--p-serif); font-size: clamp(17px, 2vw, 21px); line-height: 1.32;
  letter-spacing: -.012em; color: var(--p-ink); }
.cs-row:hover .cs-row-t { color: var(--p-a); }
.cs-row-tags { display: inline-flex; gap: 7px; }
.cs-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--p-ink3); border: 1px solid var(--p-rule2); border-radius: 2px; padding: 3px 7px; }
.cs-tag[data-k=lock]::after { content: 'Members'; }
.cs-tag[data-k=video]::after { content: 'Video'; }
.cs-row-go { color: var(--p-rule2); font-size: 17px; transition: transform .18s, color .18s; text-align: right; }
.cs-row:hover .cs-row-go { color: var(--p-a); transform: translateX(4px); }
[dir=rtl] .cs-row-go { transform: scaleX(-1); text-align: left; }
[dir=rtl] .cs-row:hover .cs-row-go { transform: scaleX(-1) translateX(4px); }
.cs-members-hint { margin-top: 26px; font-family: inherit; font-size: 13.5px; color: var(--p-ink2);
  background: none; border: 1px solid var(--p-rule2); border-radius: 2px; padding: 10px 16px; cursor: pointer; }
.cs-members-hint:hover { border-color: var(--p-ink); color: var(--p-ink); }

/* ── وبلاگ + رویدادها ───────────────────────────────────────────────────── */
.cs-posts { display: grid; gap: 0; border-top: 1px solid var(--p-rule); }
.cs-post { display: block; width: 100%; text-align: left; background: none; border: none;
  border-bottom: 1px solid var(--p-rule); padding: 24px 10px 24px 0; cursor: pointer;
  font-family: inherit; color: inherit; transition: background .16s, padding .16s; }
.cs-post:hover { background: var(--p-bg2); padding-left: 14px; }
[dir=rtl] .cs-post { text-align: right; }
.cs-post-date { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--p-ink3); margin-bottom: 9px; }
.cs-h { font-family: var(--p-serif); font-size: clamp(18px, 2.1vw, 23px); font-weight: 600;
  line-height: 1.3; letter-spacing: -.015em; color: var(--p-ink); margin: 0 0 8px; display: block; }
.cs-post:hover .cs-h { color: var(--p-a); }
.cs-post-body { font-size: 15.5px; line-height: 1.7; color: var(--p-ink2); max-width: 66ch; }
.cs-post-img, .cs-post-full-img { width: 100%; max-width: 640px; height: auto; border-radius: 2px;
  margin: 0 0 16px; display: block; }
.cs-post-text { font-size: 17px; line-height: 1.85; color: var(--p-ink2); max-width: 68ch; }
.cs-post-full { max-width: var(--p-max); margin: 0 auto; padding: 40px 32px 72px; }
.cs-events { border-top: 1px solid var(--p-rule); }
.cs-ev-top, .cs-venue { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 20px;
  align-items: center; padding: 22px 0; border-bottom: 1px solid var(--p-rule); }
.cs-ev-cal { text-align: center; border: 1px solid var(--p-rule2); border-radius: 2px; padding: 9px 0; }
.cs-ev-day { display: block; font-family: var(--p-serif); font-size: 25px; line-height: 1; color: var(--p-ink); }
.cs-ev-mon { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--p-ink3); margin-top: 5px; }
.cs-ev-main { min-width: 0; }
.cs-ev-meta { font-size: 13.5px; color: var(--p-ink3); margin-top: 5px; }
.cs-event-badge { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--p-a); border: 1px solid var(--p-a); border-radius: 2px; padding: 3px 7px; margin-left: 10px; }
.cs-venues-grid { border-top: 1px solid var(--p-rule); }
.cs-venue { text-decoration: none; color: inherit; }
.cs-venue:hover .cs-venue-name { color: var(--p-a); }
.cs-venue-logo, .cs-venue-ico { height: 46px; width: 46px; object-fit: cover; border-radius: 2px;
  display: grid; place-items: center; background: var(--p-bg2); color: var(--p-ink3); }
.cs-venue-name { font-family: var(--p-serif); font-size: 19px; color: var(--p-ink); }
.cs-loadmore { display: block; margin: 28px auto 0; font-family: inherit; font-size: 14px;
  color: var(--p-ink); background: none; border: 1px solid var(--p-rule2); border-radius: 2px;
  padding: 11px 26px; cursor: pointer; }
.cs-loadmore:hover { border-color: var(--p-ink); }
.cs-contact { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.cs-c { font-size: 13.5px; color: var(--p-ink2); text-decoration: none;
  border: 1px solid var(--p-rule); border-radius: 2px; padding: 8px 13px;
  display: inline-flex; align-items: center; gap: 7px; }
.cs-c:hover { border-color: var(--p-a); color: var(--p-a); }

/* ── پاصفحه ─────────────────────────────────────────────────────────────── */
.cs-footer { background: var(--p-bg2); border-top: 1px solid var(--p-rule); margin-top: 20px; }
.cs-foot-in { max-width: var(--p-max); margin: 0 auto; padding: 56px 32px 40px;
  display: grid; gap: 40px; grid-template-columns: 1.7fr 1fr 1fr; }
.cs-foot-name { font-family: var(--p-serif); font-size: 21px; font-weight: 600;
  letter-spacing: -.015em; margin-bottom: 12px; color: var(--p-ink); }
.cs-foot-about { font-size: 14.5px; line-height: 1.75; color: var(--p-ink2); max-width: 42ch; margin: 0; }
.cs-foot-h { font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--p-ink3); margin-bottom: 16px; }
.cs-foot-contact, .cs-foot-links { display: flex; flex-direction: column; gap: 11px; align-items: flex-start; }
.cs-foot-contact a, .cs-foot-contact span, .cs-foot-links a {
  font-family: inherit; font-size: 14.5px; color: var(--p-ink2); text-decoration: none;
  background: none; border: none; padding: 0; cursor: pointer; text-align: left; line-height: 1.5; }
.cs-foot-contact a:hover, .cs-foot-links a:hover { color: var(--p-a); }
.cs-foot-bar { max-width: var(--p-max); margin: 0 auto; padding: 20px 32px 30px;
  border-top: 1px solid var(--p-rule); display: flex; align-items: center;
  justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.cs-foot-copy { font-size: 12.5px; color: var(--p-ink3); }
.cs-powered { font-size: 12.5px; color: var(--p-ink3); text-decoration: none; }
.cs-powered:hover { color: var(--p-ink); }
.cs-powered b { font-weight: 700; color: var(--p-ink2); }
.cs-powered i { font-style: normal; color: var(--p-a); }
[dir=rtl] .cs-foot-contact, [dir=rtl] .cs-foot-links { align-items: flex-end; }
[dir=rtl] .cs-foot-contact a, [dir=rtl] .cs-foot-links a { text-align: right; }

/* آرشیوِ وبلاگ و صفحهٔ پست — همان کاغذ */
#postsArchiveScreen .archive-body, #postEntryScreen .archive-body {
  max-width: var(--p-max); margin: 0 auto; padding: 32px; }
#postsArchiveScreen .live-header, #postEntryScreen .live-header {
  background: var(--p-bg); border-bottom: 1px solid var(--p-rule); color: var(--p-ink); }
#postsArchiveScreen .back-btn, #postEntryScreen .back-btn { color: var(--p-ink); }
#postsArchiveScreen .brand-small, #postEntryScreen .brand-small {
  font-family: var(--p-serif); color: var(--p-ink); }
#postsArchiveScreen .ar-search { background: transparent; border: 1px solid var(--p-rule2);
  border-radius: 2px; color: var(--p-ink); font-family: inherit; }

@media (max-width: 900px) {
  .cs-hero { grid-template-columns: 1fr; gap: 40px; padding: 56px 22px 52px; }
  .cs-info { border-left: none; border-top: 1px solid var(--p-rule); padding-left: 0; padding-top: 26px; }
  [dir=rtl] .cs-info { border-right: none; padding-right: 0; }
  .cs-foot-in { grid-template-columns: 1fr; gap: 30px; padding: 40px 22px 28px; }
}
@media (max-width: 720px) {
  .cs-header-in { padding: 15px 18px; gap: 14px; flex-wrap: wrap; }
  .cs-nav { order: 3; width: 100%; gap: 20px; overflow-x: auto; padding-bottom: 2px; }
  .cs-nav-a { white-space: nowrap; }
  .cs-main { padding: 0 18px; }
  .cs-sec { padding: 44px 0; }
  .cs-row { grid-template-columns: minmax(0, 1fr) 22px; gap: 12px; padding: 18px 0; }
  .cs-row-date { grid-column: 1 / -1; margin-bottom: -6px; }
  .cs-ev-top, .cs-venue { grid-template-columns: 74px minmax(0, 1fr); gap: 14px; }
  .cs-foot-bar { padding: 18px 18px 26px; }
  .cs-post-full { padding: 26px 18px 52px; }
}
/* انتخابگرِ زبان: کنترلِ خامِ مرورگر با کاغذ نمی‌خواند */
.cs-lang { -webkit-appearance: none; appearance: none; padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, var(--p-ink3) 50%),
                    linear-gradient(135deg, var(--p-ink3) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
[dir=rtl] .cs-lang { padding-right: 10px; padding-left: 30px;
  background-position: 15px 52%, 10px 52%; }
.cs-lang:hover { border-color: var(--p-ink); }
.cs-lang option { background: var(--p-bg); color: var(--p-ink); }

/* ── بنرِ کلیسا ────────────────────────────────────────────────────────────
   عکس یک تصویرِ واقعی است و هیچ متنی رویش نیست. لبه‌ها تیز نیستند: گوشه‌ها
   گرد و چهار طرف با گرادیانِ هم‌رنگِ زمینه محو می‌شود، پس عکس در صفحه حل
   می‌شود به‌جای این‌که مثل یک مستطیلِ چسبانده‌شده بیرون بزند.
   محوکردن با overlay انجام می‌شود نه mask، چون overlay همه‌جا یک‌شکل کار
   می‌کند و زمینه هم یک رنگِ تخت است. */
.cs-banner { position: relative; margin: 26px auto 0; width: 100%;
  max-width: var(--p-max); padding: 0 32px; background: none; border: none; }
.cs-banner img { display: block; width: 100%; height: auto;
  aspect-ratio: 24 / 7; object-fit: cover; object-position: center;
  border-radius: 26px; }
/* هالهٔ نرمِ زیرِ عکس — عمق می‌دهد بدونِ این‌که قابِ سختی بسازد */
.cs-banner::before { content: ''; position: absolute; inset: 14px 54px 0;
  border-radius: 26px; box-shadow: 0 34px 70px -34px rgba(0, 0, 0, .95); z-index: -1; }
/* محوِ چهار لبه به رنگِ خودِ صفحه */
.cs-banner::after { content: ''; position: absolute; inset: 0 32px; pointer-events: none;
  border-radius: 26px;
  background:
    linear-gradient(to top,    var(--p-bg) 0%,   rgba(0,0,0,0) 14%),
    linear-gradient(to bottom, var(--p-bg) 0%,   rgba(0,0,0,0) 9%),
    linear-gradient(to right,  var(--p-bg) 0%,   rgba(0,0,0,0) 7%),
    linear-gradient(to left,   var(--p-bg) 0%,   rgba(0,0,0,0) 7%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
/* وقتی بنر هست، هیرو کمی جمع‌تر می‌شود تا صفحه بی‌جهت بلند نشود */
.cs-banner:not(.hidden) + .cs-hero { padding-top: 34px; }
@media (max-width: 900px) {
  .cs-banner { padding: 0 22px; margin-top: 18px; }
  .cs-banner img { aspect-ratio: 16 / 9; border-radius: 20px; }
  .cs-banner::after { inset: 0 22px; border-radius: 20px; }
  .cs-banner::before { inset: 10px 40px 0; }
  .cs-banner:not(.hidden) + .cs-hero { padding-top: 26px; }
}