/* ============================================================
   باهم کلاب — تمِ آبیِ آسمانی (الهام‌گرفته از تلگرام)
   فقط روی صفحه‌های site_section == "club" لود می‌شه (base.html)، از جمله فرم‌های
   ورود/ثبت‌نامی که از کلاب شروع شدن.

   --club-500 رنگِ خودِ برنده (آبیِ تلگرام #2AABEE) و فقط جاهای تزئینی/درشت
   (لوگو، آیکون، نوارها) استفاده می‌شه. متن و دکمه‌ها از --club-600 به بالا هستن
   تا کنتراستِ متن روی سفید حداقل ۴.۵ باشه (خوانا طبقِ WCAG AA).
   ============================================================ */
:root {
  --club-700: #135f8f;
  --club-600: #187bb3;
  --club-500: #2aabee;
  --club-400: #6cc4f1;
  --club-200: #c3e6f9;
  --club-100: #e1f3fc;
  --club-050: #f0f9fe;
  --club-ink: #17212b;
  --club-bg: #eef3f7;
  --club-green: #15803d;
  --club-green-bg: #f0fdf4;
  --club-green-border: #bbf7d0;
}

/* پس‌زمینه‌ی خاکستری-آبیِ ملایم (مثلِ پس‌زمینه‌ی لیستِ چت‌ها توی تلگرام)؛ --bg روی
   خودِ body عوض می‌شه تا چیپ‌ها و باکس‌های خنثیِ داخلِ صفحه هم هم‌رنگش بشن. */
body.theme-club { --bg: var(--club-bg); background: var(--club-bg); }
/* خودِ html هم همون رنگ: قبلاً html رنگِ روشن‌ترِ پیش‌فرضِ سایت (#f5f8fc) رو داشت و هر جا برای
   یه لحظه پشتِ body دیده می‌شد (بینِ دو صفحه، موقعِ کش اومدنِ اسکرول) مثلِ یه برقِ سفید به چشم میومد */
html { background: var(--club-bg); }

/* ---------- عمومی / تم ---------- */
body.theme-club h1,
body.theme-club h2,
body.theme-club h3 { color: var(--club-ink); }
body.theme-club input[type="text"]:focus,
body.theme-club input[type="search"]:focus,
body.theme-club input[type="email"]:focus,
body.theme-club input[type="tel"]:focus,
body.theme-club input[type="password"]:focus,
body.theme-club select:focus,
body.theme-club textarea:focus {
  border-color: var(--club-400);
  box-shadow: 0 0 0 3px var(--club-050);
}
body.theme-club .btn--secondary { background: var(--club-050); color: var(--club-600); }
body.theme-club .btn--secondary:hover { background: var(--club-100); }
body.theme-club .card--auth .btn--primary,
.btn--club {
  /* دکمه‌ی ساده و تخت، مثلِ دکمه‌های تلگرام — بدونِ گرادیان و سایه‌ی سنگین */
  background: var(--club-600);
  color: #fff;
  box-shadow: 0 4px 12px rgba(24, 123, 179, 0.22);
}
body.theme-club .card--auth .btn--primary:hover,
.btn--club:hover { background: var(--club-700); box-shadow: 0 6px 16px rgba(24, 123, 179, 0.3); }
.btn--club:disabled { opacity: 0.6; cursor: not-allowed; box-shadow: none; }
body.theme-club .auth-icon { background: var(--club-050); color: var(--club-600); }
body.theme-club .otp-box:focus { border-color: var(--club-500); box-shadow: 0 0 0 3px var(--club-050); }
body.theme-club .link-btn { color: var(--club-600); }
body.theme-club .navbar__link.is-active { color: var(--club-600); background: var(--club-050); }
body.theme-club .nav-dropdown__item:hover { background: var(--club-050); color: var(--club-600); }
body.theme-club .navbar__hub-link:hover { color: var(--club-ink); }

.club-link { color: var(--club-600); font-weight: 700; font-size: 0.9rem; }
.club-link:hover { text-decoration: underline; }

/* ---------- جهتِ متن در تکست‌باکس‌ها ----------
   هر خط (پاراگراف) جهتش رو از اولین حرفِ خودش می‌گیره: فارسی ← راست‌به‌چپ، انگلیسی یا
   آلمانی ← چپ‌به‌راست (مثلِ تلگرام). متنِ پیش‌فرض (placeholder) فارسیه، پس وقتی باکس
   خالیه همیشه از راست شروع می‌شه. */
body.theme-club input[type="text"],
body.theme-club input[type="search"],
body.theme-club textarea {
  unicode-bidi: plaintext;
  text-align: start;
}

/* ---------- عرضِ صفحه ----------
   کلاب (لیستِ پرسش‌ها + ستونِ کناری) از بقیه‌ی سایت پهن‌تره تا فضای خالیِ دو طرف روی
   صفحه‌های بزرگ کمتر بشه؛ نوار، محتوا و فوتر همه یک عرض دارن تا لبه‌هاشون هم‌تراز باشه. */
body.theme-club { --club-width: 1360px; }
body.theme-club main { max-width: var(--club-width); padding-left: 28px; padding-right: 28px; }
body.theme-club .navbar__inner { max-width: var(--club-width); padding-left: 28px; padding-right: 28px; }

/* ---------- نوار بالا ---------- */
.navbar--club .navbar__inner { justify-content: space-between; }
.navbar--club .navbar__links { flex: 0 1 auto; }
.navbar--club .navbar__actions { margin-inline-start: auto; }
.navbar__brand--club { display: flex; align-items: center; gap: 8px; }
.navbar__brand-accent--club { color: var(--club-500); }
.club-logo-mark { height: 32px; width: 32px; border-radius: 9px; }

.club-city-picker__trigger {
  border: 1px solid var(--club-100);
  background: var(--club-050);
  color: var(--club-600);
  border-radius: 999px;
  padding: 7px 12px;
  font-weight: 700;
}
.club-city-picker__trigger:hover,
.club-city-picker.is-open .club-city-picker__trigger { background: var(--club-100); color: var(--club-700); }
.club-city-picker__menu { min-width: 220px; }
.club-city-picker__item { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.club-city-picker__item small { color: var(--ink-faint); font-size: 0.78rem; }
.club-city-picker__item.is-current { background: var(--club-050); color: var(--club-600); font-weight: 700; }
.club-city-picker__soon { font-size: 0.78rem; color: var(--ink-faint); padding: 6px 10px 2px; }

.club-bell {
  position: relative;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--ink-soft);
  transition: background 0.12s ease, color 0.12s ease;
}
.club-bell:hover { background: var(--club-050); color: var(--club-600); }
.club-bell.has-unread { color: var(--club-600); }
.club-bell__badge {
  position: absolute;
  top: 2px;
  left: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}

@media (max-width: 640px) {
  /* روی موبایل لوگوی باهم جمع می‌شه و فقط «BahamClub» می‌مونه */
  .navbar--club .navbar__hub-link, .navbar--club .navbar__brand-sep { display: none; }
  .club-city-picker__trigger { padding: 6px 10px; font-size: 0.85rem; }
  .club-city-picker__trigger > svg:first-child { display: none; }
  .club-bell { width: 36px; height: 36px; }
  .navbar--club .navbar__actions { gap: 4px; }
}

/* ---------- سرِ صفحه‌ی شهر ---------- */
.club-city-head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 16px;
}
.club-city-head h1 { font-size: 1.6rem; line-height: 1.35; margin: 0 0 4px; white-space: nowrap; }
.club-city-head__main { flex: 0 0 auto; }
/* جستجو کنارِ اسمِ شهر (سمتِ چپ) */
.club-city-head .club-search { flex: 1 1 auto; max-width: 640px; margin: 0; margin-inline-start: auto; }
/* سرِ صفحه‌ی شهر داخلِ ستونِ اصلیه، پس ستونِ کناری («سؤالی دارید؟») از همون بالا شروع می‌شه */
.club-layout--feed { padding-top: 26px; }
.club-city-head h1 small { font-size: 0.95rem; color: var(--ink-faint); font-weight: 600; margin-inline-start: 6px; }
.club-city-head__stats { display: flex; flex-wrap: wrap; gap: 14px; color: var(--ink-soft); font-size: 0.9rem; }
.club-city-head__stats strong { color: var(--club-ink); }
.club-city-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--club-600);
  color: #fff;
  font-weight: 800;
  font-size: 0.85rem;
  border-radius: 999px;
  padding: 5px 12px;
}
.club-city-chip--sm { font-size: 0.75rem; padding: 3px 10px; }

/* ---------- چیدمان دوستونه ---------- */
.club-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 28px;
  align-items: start;
}
.club-main { min-width: 0; }

/* ---------- جستجو، مرتب‌سازی، برچسب‌ها ---------- */
.club-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 6px 6px 6px;
  padding-inline-start: 44px;
  box-shadow: var(--shadow-soft);
  margin-bottom: 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* فوکوس روی کلِ کپسول (نه یه مستطیلِ جدا دورِ خودِ input) */
.club-search:focus-within { border-color: var(--club-500); box-shadow: 0 0 0 4px rgba(42, 171, 238, 0.16), var(--shadow-soft); }
.club-search:focus-within .club-search__icon { color: var(--club-600); }
.club-search__icon { position: absolute; inset-inline-start: 16px; color: var(--ink-faint); }
.club-search input[type="search"] {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 8px 4px;
  font-size: 0.95rem;
  box-shadow: none;
  width: auto;
}
/* input ِ داخلِ کپسول هیچ قاب/حلقه‌ی فوکوسی نداره — نه استایلِ عمومیِ input:focus ِ تم، نه
   حلقه‌ی آبیِ پیش‌فرضِ مرورگر (Safari/Chrome) */
body.theme-club .club-search input[type="search"],
body.theme-club .club-search input[type="search"]:focus,
body.theme-club .club-search input[type="search"]:focus-visible {
  border: none;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
.club-search input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
.club-search input[type="search"]::-webkit-search-cancel-button { margin: 0 8px; cursor: pointer; }
.club-search .btn { border-radius: 999px; }

.club-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }

/* نوارِ مرتب‌سازی + برچسب‌های صفحه‌ی شهر — یه کارتِ واحد */
.club-feedbar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  margin-bottom: 14px;
  overflow: hidden;
}
.club-feedbar__top {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 10px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
}
.club-feed-tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.club-feed-tabs::-webkit-scrollbar { display: none; }
.club-feed-tab {
  position: relative;
  padding: 14px 14px 12px;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: color 0.12s ease;
}
.club-feed-tab:hover { color: var(--club-ink); }
.club-feed-tab.is-active { color: var(--club-600); }
.club-feed-tab.is-active::after {
  content: "";
  position: absolute;
  inset-inline: 10px;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--club-600);
}
.club-feedbar .club-active-filters { align-self: center; padding: 8px 0; }
.club-feedbar__tags { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.club-feedbar__label { flex: 0 0 auto; font-size: 0.8rem; font-weight: 700; color: var(--ink-faint); }
/* برچسب‌ها افقی اسکرول می‌خورن؛ لبه‌ی چپ محو می‌شه تا معلوم باشه ادامه داره */
.club-feedbar .club-tag-strip {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 36px);
  mask-image: linear-gradient(to right, transparent 0, #000 36px);
  padding-inline-end: 30px;
}
.club-feedbar .club-tag { background: var(--bg); border-color: transparent; font-size: 0.8rem; padding: 4px 11px; }
.club-feedbar .club-tag:hover { background: var(--club-050); color: var(--club-700); }
.club-feedbar .club-tag.is-active { background: var(--club-600); color: #fff; }
.club-sort-tabs { display: flex; flex-wrap: wrap; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 4px; }
.club-sort-tab {
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ink-soft);
  transition: background 0.12s ease, color 0.12s ease;
}
.club-sort-tab:hover { color: var(--club-600); }
.club-sort-tab.is-active { background: var(--club-600); color: #fff; }
.club-sort-tabs--sm .club-sort-tab { padding: 5px 12px; font-size: 0.8rem; }
.club-active-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.club-active-filters--bar { padding: 8px 0 2px; }
.club-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--club-050);
  color: var(--club-700);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.82rem;
  font-weight: 700;
}
.club-filter-pill a { color: var(--club-600); font-weight: 800; }

.club-tag-strip { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 12px; scrollbar-width: none; }
.club-tag-strip::-webkit-scrollbar { display: none; }
.club-tag {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  background: var(--club-050);
  color: var(--club-600);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 0.8rem;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.club-tag:hover { border-color: var(--club-200); }
.club-tag.is-active { background: var(--club-600); color: #fff; }

/* ---------- کارتِ پرسش ---------- */
/* همه‌ی کارت‌ها تمام‌عرض‌ان؛ ارتفاعِ هر کارت از روی عنوان و خلاصه‌ی خودش تعیین می‌شه
   (ستونِ آمار جمع‌وجوره تا کارتِ کوتاه رو بی‌دلیل بلند نکنه). */
.club-card-list { display: flex; flex-direction: column; gap: 12px; }
.club-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  /* سایه‌ی سبک و بدونِ transition: قبلاً موقعِ اسکرول، هر کارتی که از زیرِ نشانگرِ موس
     رد می‌شد انیمیشنِ سایه‌ی بزرگ اجرا می‌کرد و کلِ لیست رو دوباره نقاشی می‌کرد (کندیِ اسکرول). */
  box-shadow: 0 1px 3px rgba(11, 28, 58, 0.06);
}
.club-card:hover { border-color: var(--club-200); }
/* کلِ کارت = لینکِ پرسش: لینکِ عنوان یه لایه‌ی نامرئی روی کلِ کارت می‌سازه (کلیکِ وسط/Ctrl هم
   مثلِ یه لینکِ واقعی توی تبِ جدید باز می‌کنه). نامِ کاربری، عکسش و دکمه‌ها بالای این لایه‌ان. */
.club-card--link { position: relative; cursor: pointer; }
.club-card--link .club-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 0; }
.club-card--link .club-author,
.club-card--link .club-avatar-link,
.club-card--link .club-card__city,
.club-card--link .club-card__page,
.club-card--link .club-card__topic,
.club-card--link .club-card__actions > * { position: relative; z-index: 1; }
.club-card--link:hover { background: #f3f8fc; border-color: var(--club-200); }
.club-card--link:hover .club-card__title a { color: var(--club-600); }
.club-avatar-link { display: inline-flex; border-radius: 50%; }
.club-card__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.club-card__title { font-size: 1.05rem; line-height: 1.7; margin: 0; }
.club-card__title a { color: var(--club-ink); }
.club-card__title a:hover { color: var(--club-600); }
/* خلاصه از سرور حداکثر ۳۰۰ کاراکتر (club_excerpt(300) توی post_card) میاد و اگه متن بلندتر باشه با «…» تموم
   می‌شه؛ متنِ کامل فقط توی صفحه‌ی خودِ پرسش نمایش داده می‌شه. */
.club-card__excerpt { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.8; margin: 0; overflow-wrap: anywhere; }
/* ردیفِ بالای عنوان: عکس + نامِ کاربری • زمان */
.club-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; color: var(--ink-faint); font-size: 0.8rem; line-height: 1.7; }
.club-card__meta .club-author { font-size: 0.84rem; }
.club-card__dot { color: var(--ink-faint); opacity: 0.6; font-size: 0.7rem; }
.club-card__img-count { font-size: 0.78rem; }
.club-card__title { margin-top: -2px; }

/* ---------- نویسنده و نشان‌ها ---------- */
.club-author-wrap { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.club-author { font-weight: 800; color: var(--club-600); font-size: 0.86rem; }
a.club-author:hover { text-decoration: underline; }
.club-author--anon { color: var(--ink-soft); font-weight: 700; }
.club-badge {
  background: #f1f5f9;
  color: var(--ink-soft);
  border-radius: 6px;
  padding: 1px 7px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: help;
}
.club-op-chip { background: var(--club-600); color: #fff; border-radius: 6px; padding: 1px 7px; font-size: 0.72rem; font-weight: 800; }
.club-time { color: var(--ink-faint); font-size: 0.8rem; cursor: help; }
.club-edited { color: var(--ink-faint); font-size: 0.76rem; }

/* ---------- ستونِ کناری ---------- */
.club-sidebar { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 86px; }
.club-side-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  box-shadow: var(--shadow-soft);
}
.club-side-card h3 { font-size: 1rem; margin-bottom: 10px; }
.club-side-card p { font-size: 0.86rem; color: var(--ink-soft); }
.club-side-card--cta { background: linear-gradient(160deg, var(--club-050), #fff); border-color: var(--club-100); }
.club-side-card__note { font-size: 0.78rem !important; }
.club-side-card__checked { font-size: 0.74rem !important; color: var(--ink-faint) !important; margin: 8px 0 0; }
.club-tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.club-guide-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.club-guide-list a { color: var(--club-600); font-size: 0.84rem; font-weight: 600; line-height: 1.7; }
.club-side-card__hint { margin: 10px 0 0; font-size: 0.76rem !important; color: var(--ink-faint) !important; line-height: 1.8; }
.club-side-card__hint a { color: var(--club-600); font-weight: 700; }
.club-guide-list a:hover { text-decoration: underline; }
.club-side-card--rules ul { margin: 0 0 10px; padding-inline-start: 18px; color: var(--ink-soft); font-size: 0.84rem; line-height: 1.9; }

/* ---------- صفحه‌بندی و حالتِ خالی ---------- */
.club-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 22px 0 8px; }
.club-page-link {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--club-600);
}
.club-page-link:hover { border-color: var(--club-400); }
.club-page-info { color: var(--ink-faint); font-size: 0.86rem; }
.club-empty {
  text-align: center;
  padding: 44px 20px;
  background: var(--surface);
  border: 1px dashed var(--club-200);
  border-radius: var(--radius-md);
}
.club-empty h2 { font-size: 1.15rem; }
.club-empty p { color: var(--ink-soft); }

/* ---------- صفحه‌ی پرسش ---------- */
.club-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; padding: 22px 0 14px; color: var(--ink-faint); font-size: 0.86rem; }
.club-breadcrumb a { color: var(--club-600); font-weight: 600; }
.club-post {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  box-shadow: var(--shadow-soft);
}
.club-post--deleted { background: #f8fafc; }
.club-post__row { display: flex; gap: 18px; }
.club-post__main { flex: 1; min-width: 0; }
.club-post__title { font-size: 1.4rem; line-height: 1.7; margin-bottom: 8px; overflow-wrap: anywhere; }
.club-post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--ink-faint); font-size: 0.84rem; margin-bottom: 10px; }
.club-post__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 16px; }
.club-post__body { font-size: 0.98rem; }
.club-post__images { display: grid; gap: 8px; margin: 16px 0 4px; }
.club-post__images--1 { grid-template-columns: minmax(0, 420px); }
.club-post__images--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.club-post__images--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.club-post__image {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #f8fafc;
  aspect-ratio: 4 / 3;
  cursor: zoom-in;
}
.club-post__images--1 .club-post__image { aspect-ratio: auto; max-height: 420px; }
.club-post__image img { width: 100%; height: 100%; object-fit: cover; }
.club-post__images--1 .club-post__image img { object-fit: contain; max-height: 420px; }
.club-post__actions,
.club-comment__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-top: 12px; }

/* متنِ کاربر (خروجیِ render_club_text) */
.club-rich { line-height: 2; color: var(--ink); overflow-wrap: anywhere; }
.club-rich p { margin: 0 0 10px; }
.club-rich p:last-child { margin-bottom: 0; }
.club-rich ul, .club-rich ol { margin: 0 0 10px; padding-inline-start: 22px; }
.club-rich ol { list-style-type: persian; }
.club-rich code {
  background: #f1f5f9;
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 0.88em;
  direction: ltr;
  unicode-bidi: isolate;
}
.club-rich a { color: var(--club-600); text-decoration: underline; text-underline-offset: 3px; word-break: break-all; }
.club-rich strong { color: var(--club-ink); }

/* دکمه‌های کوچیکِ اکشن */
.club-inline-form { display: inline; margin: 0; }
.club-action {
  background: none;
  border: none;
  padding: 5px 9px;
  border-radius: 7px;
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.club-action:hover { background: var(--club-050); color: var(--club-600); }
.club-action--muted { color: var(--ink-faint); font-weight: 600; }
.club-action--danger:hover { background: #fef2f2; color: #b91c1c; }
.club-action--accept { color: var(--club-green); }
.club-action--accept:hover { background: var(--club-green-bg); color: var(--club-green); }
.club-action--accept.is-on { color: var(--ink-faint); }
.club-action.is-copied { color: var(--club-green); }

/* رأی */
.club-vote { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 0 0 auto; }
.club-vote__btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, transform 0.1s ease;
}
.club-vote__btn:hover:not(:disabled) { border-color: var(--club-400); color: var(--club-600); }
.club-vote__btn:active:not(:disabled) { transform: scale(0.92); }
.club-vote__btn:disabled { opacity: 0.45; cursor: not-allowed; }
.club-vote__btn--up.is-on { background: var(--club-600); border-color: var(--club-600); color: #fff; }
.club-vote__btn--down.is-on { background: #dc2626; border-color: #dc2626; color: #fff; }
.club-vote__score { font-weight: 800; font-size: 1.05rem; color: var(--club-ink); min-width: 28px; text-align: center; }
.club-vote.is-busy { opacity: 0.6; pointer-events: none; }
.club-vote--compact { gap: 0; }
.club-vote--compact .club-vote__btn { width: 30px; height: 30px; border: none; background: transparent; }
.club-vote--compact .club-vote__btn:hover:not(:disabled) { background: var(--club-050); }
.club-vote--compact .club-vote__score { font-size: 0.88rem; }

/* --- دکمه‌های پایینِ کارتِ پرسش (مثلِ ردیت): قرصِ رأی و قرصِ اشتراک‌گذاری --- */
.club-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.club-pill {
  display: inline-flex;
  align-items: center;
  height: 34px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--club-ink);
  border: none;
  font-family: var(--font);
  font-size: 0.86rem;
  font-weight: 700;
}
.club-vote--pill { flex-direction: row; gap: 0; padding: 0 2px; }
.club-vote--pill .club-vote__btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  border-radius: 50%;
}
.club-vote--pill .club-vote__btn:hover:not(:disabled) { background: rgba(11, 28, 58, 0.07); color: var(--club-600); }
.club-vote--pill .club-vote__btn--down:hover:not(:disabled) { color: #dc2626; }
.club-vote--pill .club-vote__btn:disabled { opacity: 0.4; }
.club-vote--pill .club-vote__score { font-size: 0.88rem; min-width: 22px; padding: 0 2px; }
/* رأی داده شده: کلِ قرص رنگی می‌شه و فلشِ انتخاب‌شده توپُر */
.club-vote--pill[data-my-vote="1"] { background: var(--club-600); }
.club-vote--pill[data-my-vote="-1"] { background: #dc2626; }
.club-vote--pill[data-my-vote="1"] .club-vote__score,
.club-vote--pill[data-my-vote="-1"] .club-vote__score,
.club-vote--pill[data-my-vote="1"] .club-vote__btn,
.club-vote--pill[data-my-vote="-1"] .club-vote__btn { color: #fff; }
.club-vote--pill .club-vote__btn.is-on { background: transparent; }
.club-vote--pill .club-vote__btn.is-on svg { fill: currentColor; }
.club-vote--pill[data-my-vote="1"] .club-vote__btn:hover:not(:disabled),
.club-vote--pill[data-my-vote="-1"] .club-vote__btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.18); color: #fff; }
.club-pill--share { gap: 7px; padding: 0 14px 0 12px; cursor: pointer; }
.club-pill--answers { gap: 7px; padding: 0 14px 0 12px; color: var(--club-ink); text-decoration: none; }
.club-pill--answers:hover { background: #e2e9f0; color: var(--club-ink); }
.club-pill--answers.is-accepted { color: var(--club-green); background: var(--club-green-bg); }
.club-pill--answers.is-accepted:hover { background: #dcfce7; color: var(--club-green); }
.club-pill--share svg { transform: scaleX(-1); }  /* «جلو» توی راست‌به‌چپ یعنی چپ */
.club-pill--share:hover { background: #e2e9f0; }
.club-pill--share.is-copied { color: var(--club-green); }

/* پاسخ‌ها */
.club-answers { margin-top: 22px; }
.club-answers__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.club-answers__head h2 { font-size: 1.15rem; margin: 0; }
.club-no-answers { color: var(--ink-soft); background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius-md); padding: 18px; text-align: center; }
.club-comment-tree { display: flex; flex-direction: column; gap: 10px; }
.club-comment--answer {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 14px 10px;
  box-shadow: var(--shadow-soft);
}
.club-comment--accepted.club-comment--answer {
  background: var(--club-green-bg);
  border-color: var(--club-green-border);
  box-shadow: 0 6px 18px rgba(21, 128, 61, 0.08);
}
.club-comment__row { display: flex; gap: 10px; }
.club-comment__main { flex: 1; min-width: 0; }
.club-comment__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--ink-faint); font-size: 0.8rem; margin-bottom: 4px; }
.club-comment__permalink:hover .club-time { text-decoration: underline; }
.club-comment__body { font-size: 0.94rem; }
.club-comment__actions { margin-top: 4px; }
.club-comment__removed { color: var(--ink-faint); font-style: italic; font-size: 0.86rem; padding: 6px 4px; }

/* پاسخِ جمع‌شده (رأیِ منفیِ زیاد) — <details> ِ بومی، پس بدونِ جاوااسکریپت هم باز/بسته می‌شه */
.club-collapse__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  list-style: none;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink-faint);
  font-size: 0.85rem;
}
.club-collapse__summary::-webkit-details-marker { display: none; }
.club-collapse__summary:hover { color: var(--ink-soft); }
.club-collapse__score { font-weight: 700; }
.club-collapse__toggle { color: var(--club-600); font-weight: 800; white-space: nowrap; }
.club-collapse__toggle::after { content: "نمایش"; }
.club-collapse[open] > .club-collapse__summary { margin-bottom: 10px; }
.club-collapse[open] .club-collapse__toggle::after { content: "بستن"; }
.club-collapse[open] > .club-comment__row { opacity: 0.8; }

/* یادآوریِ «پاسخِ قدیمی» — قوانینِ مهاجرت زود عوض می‌شن */
.club-stale {
  font-size: 0.72rem;
  font-weight: 700;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 999px;
  padding: 1px 8px;
  cursor: help;
}
.club-comment.is-removed.club-comment--answer { background: #f8fafc; box-shadow: none; }
/* شاخه‌ها: خطِ عمودیِ اتصال سمتِ راست (شروعِ خط در RTL) */
.club-comment__children {
  margin-top: 8px;
  margin-inline-start: 14px;
  padding-inline-start: 14px;
  border-inline-start: 2px solid var(--club-100);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.club-comment__children .club-comment { padding: 4px 0; }
.club-comment:target > .club-comment__row,
.club-comment.is-flash > .club-comment__row { animation: club-flash 1.8s ease; border-radius: 10px; }
@keyframes club-flash { 0%, 40% { background: var(--club-100); } 100% { background: transparent; } }
.club-accepted-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--club-green);
  color: #fff;
  font-weight: 800;
  font-size: 0.76rem;
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 6px;
}
.club-accepted-text { color: var(--club-green); }

/* فرم‌ها */
.club-answer-box { margin-top: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px; box-shadow: var(--shadow-soft); }
.club-answer-box h2 { font-size: 1.05rem; }
.club-answer-form textarea,
.club-reply-form textarea,
.club-edit-form textarea { width: 100%; min-height: 96px; line-height: 1.9; }
.club-reply-form, .club-edit-form { margin-top: 8px; }
.club-reply-form textarea, .club-edit-form textarea { min-height: 76px; }
.club-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.club-form-actions--end { justify-content: flex-start; }
.club-join-cta { text-align: center; }
.club-join-cta p { color: var(--ink-soft); }
.club-banner { border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 14px; font-size: 0.9rem; line-height: 1.9; }
.club-banner--warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.club-banner a { text-decoration: underline; }

/* ---------- فرمِ پرسش ---------- */
.club-ask, .club-narrow { max-width: 860px; margin: 0 auto; padding-bottom: 20px; }
.club-narrow { padding-top: 30px; }
.club-narrow--wide { max-width: 980px; }
.club-ask__form { display: flex; flex-direction: column; gap: 4px; }
.club-ask__form textarea { line-height: 1.9; }
.club-ask__errors { background: #fdecec; border: 1px solid #f6c9c9; color: #a33; border-radius: var(--radius-md); padding: 12px 16px; margin-bottom: 12px; font-size: 0.9rem; }
.club-ask__errors ul { margin: 0; padding-inline-start: 18px; }
.club-counter { color: var(--ink-faint); font-size: 0.78rem; font-weight: 600; }
.club-counter.is-over { color: var(--danger); }

.club-similar { margin-top: 8px; background: var(--club-050); border: 1px solid var(--club-100); border-radius: var(--radius-sm); padding: 10px 14px; }
.club-similar__title { font-size: 0.84rem; font-weight: 800; color: var(--club-700); margin-bottom: 6px; }
.club-similar__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.club-similar__list a { color: var(--club-ink); font-size: 0.88rem; font-weight: 600; }
.club-similar__list a:hover { color: var(--club-600); text-decoration: underline; }
.club-similar__list small { color: var(--ink-faint); margin-inline-start: 6px; }

.club-editor-tabs { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }
.club-editor-tabs__label { font-weight: 700; font-size: 0.92rem; margin-inline-end: auto; }
.club-editor-tab {
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
}
.club-editor-tab.is-active { background: var(--club-600); border-color: var(--club-600); color: #fff; }
.club-preview {
  min-height: 200px;
  border: 1px dashed var(--club-200);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  background: #fbfbff;
}
.club-preview:empty::before { content: "چیزی برای پیش‌نمایش نیست."; color: var(--ink-faint); }

.club-tag-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  background: #fff;
}
.club-tag-picker:focus-within { border-color: var(--club-400); box-shadow: 0 0 0 3px var(--club-050); }
.club-tag-picker__selected { display: contents; }
.club-tag-picker input[type="text"] { flex: 1; min-width: 160px; border: none; box-shadow: none; padding: 6px 4px; }
.club-tag-picker input[type="text"]:focus { box-shadow: none; }
.club-tag--selected { background: var(--club-600); color: #fff; gap: 6px; }
.club-tag--selected button { background: none; border: none; color: #fff; cursor: pointer; font-size: 0.8rem; padding: 0; line-height: 1; }
.club-tag-suggest { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.club-tag--pick.is-picked { background: var(--club-600); color: #fff; }
.club-tag--pick:disabled { opacity: 0.4; cursor: not-allowed; }

.club-images { display: flex; flex-wrap: wrap; gap: 10px; }
.club-images__add {
  width: 104px;
  height: 104px;
  border: 1.5px dashed var(--club-200);
  border-radius: 12px;
  background: var(--club-050);
  color: var(--club-600);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}
.club-images__add:hover { border-color: var(--club-400); }
.club-images__add[hidden] { display: none; }
.club-images__item { position: relative; width: 104px; height: 104px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.club-images__item img { width: 100%; height: 100%; object-fit: cover; }
.club-images__item.is-processing::after {
  content: "در حالِ آماده‌سازی…";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.8);
  font-size: 0.72rem;
  color: var(--ink-soft);
}
.club-images__remove {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(15, 23, 42, 0.7);
  color: #fff;
  cursor: pointer;
  font-size: 0.8rem;
  line-height: 1;
}
.club-images__size { position: absolute; bottom: 4px; right: 6px; background: rgba(15, 23, 42, 0.6); color: #fff; font-size: 0.66rem; border-radius: 5px; padding: 1px 5px; direction: ltr; }

.club-check { display: flex; align-items: flex-start; gap: 8px; font-size: 0.88rem; cursor: pointer; margin-top: 6px; }
.club-check input { accent-color: var(--club-500); width: 17px; height: 17px; margin-top: 3px; flex-shrink: 0; }
.club-check--card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; margin: 8px 0 4px; }
.club-check--card span { display: flex; flex-direction: column; gap: 2px; }
.club-check--card small { color: var(--ink-soft); font-size: 0.8rem; line-height: 1.8; }
.club-radio { display: flex; align-items: center; gap: 8px; padding: 6px 2px; font-size: 0.9rem; cursor: pointer; }
.club-radio input { accent-color: var(--club-500); }
.club-report-reasons { border: none; margin: 0 0 8px; padding: 0; }

/* ---------- مودال و نمای بزرگِ عکس ---------- */
.club-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.club-modal[hidden] { display: none; }
.club-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.club-modal__box {
  position: relative;
  width: min(460px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 22px 22px 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}
.club-modal__close { position: absolute; top: 12px; left: 12px; }
html.club-modal-open { overflow: hidden; }
.club-lightbox { position: fixed; inset: 0; z-index: 1001; display: flex; align-items: center; justify-content: center; padding: 16px; }
.club-lightbox[hidden] { display: none; }
.club-lightbox__backdrop { position: absolute; inset: 0; background: rgba(12, 16, 30, 0.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.club-lightbox img { position: relative; max-width: min(92vw, 1100px); max-height: 86vh; border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
.club-lightbox__close {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
}
.club-toast {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 1100;
  background: var(--club-ink);
  color: #fff;
  border-radius: 12px;
  padding: 12px 18px;
  font-size: 0.9rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  max-width: calc(100vw - 32px);
}
.club-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
/* توستِ نامرئی (و متنِ خودِ توست) نباید جلوی کلیک روی دکمه‌های زیرش رو بگیره — فقط لینکش کلیک‌خوره */
.club-toast { pointer-events: none; }
.club-toast.is-visible a { pointer-events: auto; }
.club-toast a { color: var(--club-200); text-decoration: underline; margin-inline-start: 6px; }

/* ---------- پروفایل، اعلان‌ها، قوانین ---------- */
/* --- عکسِ پروفایل (همه‌جا) --- */
.club-avatar {
  --av-size: 24px;
  width: var(--av-size);
  height: var(--av-size);
  flex: 0 0 var(--av-size);
  border-radius: 50%;
  object-fit: cover;
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
  background: var(--club-050);
  box-shadow: 0 0 0 1px rgba(11, 28, 58, 0.06);
}
.club-avatar--letter {
  background: hsl(var(--av-h, 205) 62% 90%);
  color: hsl(var(--av-h, 205) 45% 32%);
  font-weight: 800;
  font-size: calc(var(--av-size) * 0.46);
  line-height: 1;
}
.club-avatar--anon { background: #e8edf2; color: var(--ink-faint); }
.club-avatar--anon svg { width: 62%; height: 62%; }
.club-avatar--xl { --av-size: 84px; }
.club-author-wrap .club-avatar { margin-inline-end: 1px; }
.nav-dropdown__avatar.has-img { padding: 0; overflow: hidden; }
.nav-dropdown__avatar.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- فیلدِ عکس توی تنظیماتِ کلاب --- */
.club-avatar-field { display: flex; align-items: center; gap: 16px; padding-bottom: 16px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
.club-avatar-field__preview .club-avatar { --av-size: 84px; }
.club-avatar-field__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.club-avatar-field__body .field-hint { margin: 0; }
.club-avatar-field__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 6px; }
.club-avatar-field__pick { cursor: pointer; }
.club-avatar-field__remove { margin-top: 0; }

/* --- صفحه‌ی پروفایل --- */
.club-profile-hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 3px rgba(11, 28, 58, 0.06);
  overflow: hidden;
  margin: 18px 0 14px;
}
.club-profile-hero__cover {
  height: 92px;
  background:
    radial-gradient(circle at 18% 120%, rgba(255, 255, 255, 0.28) 0 38%, transparent 39%),
    radial-gradient(circle at 92% -30%, rgba(255, 255, 255, 0.18) 0 34%, transparent 35%),
    linear-gradient(120deg, var(--club-600), var(--club-500) 55%, var(--club-400));
}
/* عکس نصفش روی نوارِ رنگی میاد؛ اسم و دکمه‌ها زیرِ نوار شروع می‌شن */
.club-profile-hero__main { display: flex; align-items: flex-start; gap: 4px 18px; padding: 0 22px; margin-top: -46px; flex-wrap: wrap; }
.club-profile-hero__avatar .club-avatar--hero {
  --av-size: 104px;
  border: 4px solid var(--surface);
  box-shadow: 0 6px 18px rgba(11, 28, 58, 0.14);
  background-color: var(--surface);
}
.club-profile-hero__avatar .club-avatar--letter.club-avatar--hero { background: hsl(var(--av-h, 205) 62% 90%); }
.club-profile-hero__id { flex: 1 1 200px; min-width: 0; padding-top: 56px; }
.club-profile-hero__id h1 { font-size: 1.45rem; margin: 0 0 6px; color: var(--club-ink); overflow-wrap: anywhere; }
.club-profile-hero__badges { display: flex; flex-wrap: wrap; gap: 5px; }
.club-profile-hero__actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 58px; }
.club-profile-hero__actions form { margin: 0; }
.club-profile-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 16px 0 0;
  border-top: 1px solid var(--border);
}
.club-profile-stats > div { padding: 12px 8px; text-align: center; }
.club-profile-stats > div + div { border-inline-start: 1px solid var(--border); }
.club-profile-stats dt { font-size: 0.76rem; color: var(--ink-faint); font-weight: 600; order: 2; }
.club-profile-stats dd { margin: 0; font-size: 1.3rem; font-weight: 800; color: var(--club-ink); line-height: 1.5; }
.club-profile-stats > div { display: flex; flex-direction: column-reverse; }
.club-profile-stats > .is-good dd { color: var(--club-green); }
.club-profile-tabs { margin-bottom: 12px; }
.club-profile-tabs .club-feed-tab small { font-size: 0.74rem; color: var(--ink-faint); font-weight: 700; margin-inline-start: 3px; }
.club-profile-tabs .club-feed-tab.is-active small { color: inherit; }
.club-profile-note { margin: 10px 4px 0; font-size: 0.78rem; color: var(--ink-faint); }

/* کارتِ پاسخ توی پروفایل: پرسشِ مربوط بالا، متنِ پاسخ، و امتیاز/برگزیده/زمان پایین */
.club-answer-list { display: flex; flex-direction: column; gap: 12px; }
.club-answer-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 3px rgba(11, 28, 58, 0.06);
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.club-answer-card:hover { border-color: var(--club-200); }
.club-answer-card.is-accepted { border-color: var(--club-green-border); }
.club-answer-card.is-accepted::before {
  content: "";
  position: absolute;
  inset-block: 12px;
  inset-inline-start: -1px;
  width: 3px;
  border-radius: 3px;
  background: var(--club-green);
}
.club-answer-card__q { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 0.82rem; color: var(--ink-faint); }
.club-answer-card__label { font-weight: 600; }
.club-answer-card__q a { color: var(--club-ink); font-weight: 800; font-size: 0.95rem; }
.club-answer-card__q a:hover { color: var(--club-600); }
.club-answer-card__city { font-size: 0.76rem; }
.club-answer-card__body {
  display: block;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.85;
  background: var(--bg);
  border-radius: 10px;
  padding: 10px 14px;
  overflow-wrap: anywhere;
  border-inline-start: 3px solid var(--club-200);
}
.club-answer-card__body:hover { color: var(--club-ink); }
.club-answer-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 0.8rem; color: var(--ink-faint); }
.club-answer-card__score { display: inline-flex; align-items: center; gap: 3px; font-weight: 800; color: var(--ink-soft); background: var(--bg); border-radius: 999px; padding: 2px 10px 2px 8px; }
.club-answer-card__score.is-pos { color: var(--club-600); background: var(--club-050); }
.club-answer-card__score.is-neg { color: #b42318; background: #fef3f2; }
.club-answer-card__accepted { color: #fff; background: var(--club-green); border-radius: 999px; padding: 2px 10px; font-weight: 800; font-size: 0.76rem; }
.club-answer-card__time { margin-inline-start: auto; }

.club-profile-about ul { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 0.88rem; color: var(--ink-soft); }
.club-profile-about a { color: var(--club-600); font-weight: 700; }


/* ---------- فوتر ---------- */
.club-footer {
  background: var(--club-ink);
  color: rgba(255, 255, 255, 0.78);
  padding: 34px 28px 18px;
  text-align: right;
}
.club-footer__inner { max-width: var(--club-width, 1080px); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; }
.club-footer__logo { font-size: 1.2rem; font-weight: 800; color: #fff; }
.club-footer__tagline { font-size: 0.88rem; margin: 6px 0 0; max-width: 420px; }
.club-footer__links { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.club-footer__links a { color: #fff; font-weight: 600; font-size: 0.9rem; }
.club-footer__links a:hover { color: var(--club-200); }
.club-footer__disclaimer {
  max-width: var(--club-width, 1080px);
  margin: 20px auto 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.8rem;
  line-height: 1.9;
}
.club-footer__bottom { max-width: var(--club-width, 1080px); margin: 14px auto 0; font-size: 0.8rem; color: rgba(255, 255, 255, 0.5); }
.club-footer__bottom p { margin: 0; }

/* ============================================================
   چیدمانِ شبیهِ ردیت
   ============================================================ */

/* --- نوارِ بالا: برند (راست) · جستجو (وسط) · حساب/ورود (چپ) --- */
body.theme-club .navbar__inner { max-width: none; padding: 10px 20px; }
@media (min-width: 641px) {
  .navbar--club .navbar__inner {
    display: grid;
    /* کناره‌ها هیچ‌وقت از اندازه‌ی محتواشون کوچیک‌تر نمی‌شن (روی هم نمی‌افتن)؛ وقتی جا هست
       هر دو 1fr ان، پس جستجو دقیقاً وسطِ صفحه می‌مونه */
    grid-template-columns: minmax(max-content, 1fr) minmax(200px, 640px) minmax(max-content, 1fr);
    align-items: center;
    gap: 16px;
  }
  .navbar--club .navbar__brand-group { justify-self: start; }
  .navbar--club .navbar__actions { justify-self: end; margin: 0; }
  .navbar--club .navbar__links, .navbar--club .navbar__toggle { display: none; }
}
.navbar--club .navbar__cta { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; white-space: nowrap; }
.navbar--club .navbar__actions { flex-wrap: nowrap; }
@media (min-width: 641px) and (max-width: 1100px) {
  /* جا برای جستجو: لوگوی باهم جمع می‌شه و فقط «BahamClub» می‌مونه */
  .navbar--club .navbar__hub-link, .navbar--club .navbar__brand-sep { display: none; }
}
.club-login-btn, .club-signup-btn { padding: 9px 18px; font-weight: 700; }

.club-topsearch {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  background: var(--bg);
  border: 1px solid transparent;
  border-radius: 999px;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.club-topsearch:hover { background: #e7eef4; }
.club-topsearch:focus-within { background: #fff; border-color: var(--club-500); box-shadow: 0 0 0 4px rgba(42, 171, 238, 0.16); }
.club-topsearch__logo {
  position: absolute;
  inset-inline-start: 6px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(11, 28, 58, 0.18);
}
/* خودِ آیکون گوشه‌گرده؛ کمی بزرگ‌تر از دایره نشون داده می‌شه تا گوشه‌هاش بیرون بمونن و گرد دیده بشه */
.club-topsearch__logo img { width: 128%; height: 128%; max-width: none; margin: -14%; object-fit: cover; display: block; }
body.theme-club .club-topsearch input[type="search"],
body.theme-club .club-topsearch input[type="search"]:focus {
  width: 100%;
  border: none;
  outline: none;
  box-shadow: none;
  background: transparent;
  padding: 11px 48px;
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
}
/* متنِ راهنما وسطِ کپسول (متنی که کاربر تایپ می‌کنه طبقِ جهتِ خودش از راست یا چپ شروع می‌شه) */
.club-topsearch input[type="search"]::placeholder {
  text-align: center;
  font-family: var(--font);
  font-weight: 500;
  color: var(--ink-faint);
  opacity: 1;
}
.club-topsearch input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
.club-topsearch input[type="search"]::-webkit-search-cancel-button { margin: 0 8px; cursor: pointer; }

/* --- دامنه‌ی جستجو (چیپ توی کادر: «بوخوم ✕»، «اقامت و تمدید ✕»، نامِ کاربری) — club_search_scope() --- */
.club-topsearch__scope {
  flex: 0 0 auto; min-width: 0; max-width: 46%;
  display: inline-flex; align-items: center; gap: 6px;
  margin-inline-start: 44px; padding: 3px 4px 3px 4px; padding-inline-start: 4px; padding-inline-end: 2px;
  border-radius: 999px; background: var(--club-050); color: var(--club-700);
  font-size: .82rem; font-weight: 700; white-space: nowrap;
}
.club-topsearch__scope-av {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: var(--club-100); font-size: .7rem; line-height: 1;
}
.club-topsearch__scope-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.club-topsearch__scope-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.club-topsearch__scope-x {
  flex: 0 0 22px; width: 22px; height: 22px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer;
}
.club-topsearch__scope-x:hover { background: var(--club-100); }
body.theme-club .club-topsearch.has-scope input[type="search"],
body.theme-club .club-topsearch.has-scope input[type="search"]:focus { flex: 1 1 0; min-width: 0; width: auto; padding-inline-start: 10px; }
.club-topsearch.has-scope input[type="search"]::placeholder { text-align: start; }

/* --- پیشنهادهای زنده زیرِ کادرِ جستجو (club/_search_suggest.html، club_search.js) --- */
.club-search-pop {
  position: absolute; top: calc(100% + 8px); inset-inline: 0; z-index: 1100;
  max-height: min(72vh, 600px); overflow-y: auto; overscroll-behavior: contain;
  background: #fff; border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 14px 40px rgba(15, 23, 42, .16), 0 2px 6px rgba(15, 23, 42, .06);
  padding: 6px 0; text-align: start;
}
.club-search-pop[hidden] { display: none; }
.club-search-pop__head { padding: 10px 18px 4px; font-size: .74rem; font-weight: 800; color: var(--ink-faint); }
.club-search-pop__sep { height: 1px; margin: 6px 0; background: var(--border); }
.club-search-pop__item {
  display: flex; align-items: center; gap: 12px; padding: 8px 18px;
  color: var(--ink); text-decoration: none; cursor: pointer; outline: none;
}
.club-search-pop__item:hover, .club-search-pop__item.is-active { background: var(--bg); color: var(--ink); }
.club-search-pop__av {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: var(--club-050); color: var(--club-700); font-weight: 800;
}
.club-search-pop__av.has-av { overflow: visible; background: none; }
.club-search-pop__av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.club-search-pop__av--icon { background: var(--bg); color: var(--ink-soft); }
.club-search-pop__text { min-width: 0; display: flex; flex-direction: column; line-height: 1.45; }
.club-search-pop__text strong { font-size: .9rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.club-search-pop__text small { font-size: .74rem; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.club-search-pop__item--query { padding-top: 11px; padding-bottom: 11px; }
.club-search-pop__qicon { flex: 0 0 34px; display: grid; place-items: center; color: var(--ink); }
.club-search-pop__qtext { min-width: 0; font-size: .95rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.club-search-pop__qtext small { font-size: .78rem; color: var(--ink-faint); margin-inline-start: 4px; }
.club-topsearch.is-open { background: #fff; }

/* --- سه ستون: کناره‌ها به لبه‌های صفحه چسبیده‌ان و ثابت می‌مونن --- */
body.theme-club main:has(.club-shell) { max-width: none; padding: 0 16px; }
body:has(.club-shell) .club-footer { display: none; }
.club-shell {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 330px;
  gap: 28px;
  align-items: start;
}
.club-center { width: 100%; max-width: 860px; justify-self: center; padding: 18px 0 40px; min-width: 0; }
.club-rail {
  position: sticky;
  top: var(--club-nav-h, 69px);
  padding: 14px 0 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* محتوای ستون‌ها کوتاه نگه داشته شده تا توی یه صفحه جا بشه و هیچ‌وقت اسکرول نخوره؛
   روی صفحه‌های خیلی کوتاه (مثلاً لپ‌تاپِ کوچیک با زومِ زیاد) ثابت‌بودن برداشته می‌شه تا
   پایینِ ستون از دسترس خارج نشه. */
@media (max-height: 680px) {
  .club-rail { position: static; }
}
.club-rail .club-sidebar { position: static; }
/* کارت‌های ستونِ چپ جمع‌وجورتر تا کلِ ستون بدونِ اسکرول توی صفحه جا بشه */
.club-rail .club-side-card { padding: 14px 16px; }
.club-rail .club-side-card h3 { font-size: 0.95rem; margin-bottom: 6px; }
.club-rail .club-side-card--cta p { margin-bottom: 10px; }
.club-rail .club-side-card--cta .btn { padding-block: 10px; }
.club-rail .club-side-card__hint { margin: 8px 0 0 !important; }

/* --- ستونِ راست: ناوبری (مثلِ ستونِ کناریِ ردیت) ---
   بدونِ کارت: فهرستِ ساده روی پس‌زمینه، بخش‌ها با خطِ نازک جدا می‌شن و هر بخش با کلیک روی
   عنوانش جمع/باز می‌شه (<details>). ته‌ِ ستون: Impressum و کپی‌رایت. */
.club-navrail { display: flex; flex-direction: column; flex: 1 0 auto; }
.club-navrail__list { display: flex; flex-direction: column; gap: 1px; }
.club-navrail__list--main { padding-bottom: 8px; }
.club-navrail__section { border-top: 1px solid var(--border); padding: 6px 0 8px; }
.club-navrail__head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 5px 12px 5px;
  font-size: 0.8rem; font-weight: 800; color: var(--ink-faint);
  cursor: pointer; user-select: none; list-style: none;
  border-radius: 8px;
}
.club-navrail__head::-webkit-details-marker { display: none; }
.club-navrail__head:hover { color: var(--ink-soft); }
.club-navrail__head:focus-visible { outline: 2px solid var(--club-500); outline-offset: -2px; }
.club-navrail__chev { flex: 0 0 auto; transition: transform 0.15s ease; }
.club-navrail__section:not([open]) .club-navrail__chev { transform: rotate(180deg); }
.club-navrail__item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: 10px;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 600;
  transition: background 0.12s ease;
  min-width: 0;
}
.club-navrail__icon, .club-navrail__item > svg { flex: 0 0 auto; color: var(--ink-soft); }
.club-navrail__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.club-navrail__item:hover { background: rgba(23, 33, 43, 0.06); }
.club-navrail__item.is-active { background: var(--club-100); color: var(--club-700); font-weight: 800; }
/* شهرِ فعلی فقط پررنگ می‌شه (پس‌زمینه نمی‌گیره) تا همیشه فقط یه گزینه‌ی برجسته توی ستون باشه */
.club-navrail__item.is-current { color: var(--club-700); font-weight: 800; }
.club-navrail__item.is-active .club-navrail__icon { color: var(--club-600); }
.club-navrail__item--soft { color: var(--ink-soft); font-weight: 600; }
.club-navrail__item small { color: var(--ink-faint); font-weight: 500; font-size: 0.74rem; margin-inline-start: 4px; }
.club-navrail__city {
  width: 28px; height: 28px; flex: 0 0 28px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--club-200); color: var(--club-700);
  font-size: 0.82rem; font-weight: 800;
}
.club-navrail__item.is-current .club-navrail__city { background: var(--club-600); color: #fff; }
/* ردیفِ شهر: لینک + دکمه‌ی ستاره (ستاره بیرونِ لینکه تا کلیکش صفحه رو عوض نکنه) */
.club-navrail__row { position: relative; display: flex; align-items: center; }
.club-navrail__row > .club-navrail__item { flex: 1 1 auto; padding-inline-end: 44px; }
.club-navrail__starform { position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); margin: 0; }
.club-navrail__star {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  color: var(--ink-faint);
  transition: color 0.12s ease, background 0.12s ease, transform 0.12s ease;
}
.club-navrail__star svg { fill: none; }
.club-navrail__star:hover { color: var(--ink); background: rgba(23, 33, 43, 0.07); }
.club-navrail__star:active { transform: scale(0.9); }
.club-navrail__star.is-on { color: #e8a317; }
.club-navrail__star.is-on svg { fill: currentColor; }
.club-navrail__star:focus-visible { outline: 2px solid var(--club-500); outline-offset: 1px; }
.club-navrail__badge { margin-inline-start: auto; background: #ef4444; color: #fff; font-size: 0.7rem; font-weight: 800; border-radius: 999px; padding: 0 7px; line-height: 1.6; }
.club-navrail__badge--soft { background: var(--club-600); }
.club-navrail__legal { border-top: 1px solid var(--border); padding: 10px 0 4px; margin-top: auto; }
/* «منابع» و Impressum: لینک‌های کوچیکِ ته‌ِ ستون */
.club-navrail__links { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 0 12px; font-size: 0.78rem; line-height: 1.8; }
.club-navrail__links a { color: var(--ink-soft); font-weight: 600; }
.club-navrail__links a:hover { color: var(--club-600); }
.club-navrail__links a.is-active { color: var(--club-700); font-weight: 800; }
/* پنجره‌ی کوتاه (لپ‌تاپ ۷۶۸ و کمتر): ستون باز هم فشرده‌تر تا بدونِ اسکرول جا بشه */
@media (min-height: 681px) and (max-height: 800px) {
  .club-rail--nav { padding-top: 10px; }
  .club-navrail__item { min-height: 32px; padding-block: 4px; }
  .club-navrail__section { padding: 4px 0 6px; }
  .club-navrail__list--main { padding-bottom: 6px; }
  .club-navrail__copy { display: none; }
}
.club-navrail__copy { margin: 6px 12px 0; font-size: 0.72rem; line-height: 1.8; color: var(--ink-faint); }

/* پس‌زمینه‌ی سفیدِ ستونِ ناوبری (روی دسکتاپ تا لبه‌ی پنجره؛ پایینِ club.css) */
.club-rail--nav { background: var(--surface); border-radius: var(--radius-md); padding-inline: 8px; }

/* --- ستونِ چپ: کارتِ «بپیوندید» برای کاربرِ واردنشده (مثلِ ردیت) --- */
.club-join { text-align: center; }
.club-rail .club-join { padding: 22px 18px 16px; }
.club-rail .club-join .club-join__title {
  font-size: 1.25rem; font-weight: 900; line-height: 1.65; color: var(--club-ink);
  margin: 0 0 16px; text-wrap: balance;
}
.club-join__google {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 8px 48px;
  border: 1px solid #dadce0; border-radius: 999px;
  background: #fff; color: #1f1f1f;
  font-size: 0.95rem; font-weight: 600;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.club-join__google svg { position: absolute; inset-inline-start: 16px; top: 50%; transform: translateY(-50%); }
.club-join__google:hover { background: #f8faff; border-color: #c6cbd1; color: #1f1f1f; box-shadow: 0 1px 3px rgba(60, 64, 67, 0.12); }
.club-join__google:focus-visible { outline: 2px solid var(--club-500); outline-offset: 2px; }
.club-join__google--plain { background: var(--club-600); border-color: var(--club-600); color: #fff; font-weight: 800; }
.club-join__google--plain:hover { background: var(--club-700); border-color: var(--club-700); color: #fff; }
.club-rail .club-join .club-join__alt { margin: 12px 0 0; font-size: 0.84rem; color: var(--ink-soft); }
.club-join__alt a { color: var(--club-600); font-weight: 700; }
.club-join__alt a:hover { color: var(--club-700); text-decoration: underline; }
.club-join__alt span { margin: 0 6px; color: var(--ink-faint); }

/* --- ستونِ چپ: فوترِ کوچیک --- */
.club-railfoot { margin-top: 2px; padding: 0 4px; font-size: 0.76rem; color: var(--ink-faint); line-height: 1.9; }
.club-railfoot__links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 6px; }
.club-railfoot__links a { color: var(--ink-soft); font-weight: 600; }
.club-railfoot__links a:hover { color: var(--club-600); }
.club-railfoot__note, .club-railfoot__copy { margin: 0 0 6px; font-size: 0.74rem; }

/* --- نوارِ مرتب‌سازی: انتخابگرِ شهر ته‌ِ ردیف --- */
.club-feedbar { position: relative; overflow: visible; }
/* منوی کشوییِ «تغییرِ شهر» روی کارت‌های پایین‌تر بیاد، نه زیرشون: view-transition-name (پایین‌تر) نوار رو یه
   stacking context ِ جدا می‌کنه و بدونِ z-index کارت‌های بعدی روش کشیده می‌شدن */
.club-feedbar { z-index: 30; }
.club-feedbar__end { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; padding: 8px 0; }
.club-feedbar .club-active-filters { padding: 0; }
.club-feedbar .club-city-picker__trigger { padding: 6px 12px; font-size: 0.86rem; }
.club-feedbar .club-city-picker__menu { right: auto; left: 0; }

/* ---------- واکنش‌گرا ---------- */
/* سه‌ستونه → دوستونه → تک‌ستونه */
@media (max-width: 1240px) {
  .club-shell { grid-template-columns: 220px minmax(0, 1fr) 300px; gap: 20px; }
}
/* وقتی ستونِ ناوبری دیده می‌شه، لینک‌های فوترِ کوچیکِ ستونِ چپ تکراری‌ان (ته‌ِ ستونِ ناوبری هستن) */
@media (min-width: 1081px) {
  .club-rail--side > .club-railfoot { display: none; }
}
@media (max-width: 1080px) {
  /* ستونِ ناوبری جمع می‌شه (شهرها توی انتخابگرِ کنارِ تب‌ها و منوی حساب هستن) */
  .club-shell { grid-template-columns: minmax(0, 1fr) 300px; }
  .club-rail--nav { display: none; }
}
@media (max-width: 960px) {
  .club-shell { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .club-rail { position: static; max-height: none; overflow: visible; padding-top: 0; }
  .club-center { padding-bottom: 18px; }
}
@media (max-width: 640px) {
  /* موبایل: جستجو یه ردیفِ کامل زیرِ لوگو و دکمه‌ها */
  .navbar--club .club-topsearch { order: 5; flex: 1 1 100%; }
  .navbar--club .navbar__cta { display: none; }
  .club-login-btn, .club-signup-btn { padding: 7px 12px; font-size: 0.85rem; }
  body.theme-club main:has(.club-shell) { padding: 0 12px; }
  /* گوشی: «تغییرِ شهر» توی همون ردیفِ تب‌ها می‌مونه (تب‌ها اگه جا نشدن افقی اسکرول می‌خورن)؛ فقط فیلترهای فعال
     (#برچسب، «جستجو») اگه باشن ردیفِ پایین می‌رن */
  .club-feedbar__top { flex-wrap: wrap; padding: 0 4px 0 6px; gap: 4px; }
  .club-feed-tabs { flex: 1 1 0; min-width: 0; }
  .club-feed-tab { padding-inline: 6px; font-size: 0.83rem; }
  .club-feed-tab.is-active::after { inset-inline: 4px; }
  .club-feedbar__end { display: contents; }
  .club-feedbar__top > .club-feed-tabs { order: 1; }
  .club-feedbar .club-city-picker { order: 2; align-self: center; flex: none; }
  .club-feedbar .club-active-filters { order: 3; flex: 1 1 100%; padding: 8px 4px 10px; border-top: 1px solid var(--border); }
  .club-feedbar .club-city-picker__trigger { padding: 6px 10px; max-width: 104px; gap: 4px; }
  .club-feedbar .club-city-picker__trigger .nav-dropdown__chevron { display: none; }
  .club-feedbar .club-city-picker__trigger > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
}

/* روی دسکتاپ دکمه‌ی «طرحِ پرسش» هم توی نوارِ بالا هست هم توی ستونِ کناری، پس سومی
   (سرِ صفحه‌ی شهر) فقط وقتی نشون داده می‌شه که ستونِ کناری میره پایینِ صفحه */
.club-city-head__cta { display: none; }
@media (max-width: 960px) {
  .club-city-head__cta { display: inline-flex; }
  .club-layout { grid-template-columns: minmax(0, 1fr); }
  .club-sidebar { position: static; }
}
@media (max-width: 720px) {
  body.theme-club main, body.theme-club .navbar__inner { padding-left: 16px; padding-right: 16px; }
  .club-footer { padding-left: 16px; padding-right: 16px; }
  .club-city-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .club-city-head .club-search { max-width: none; }
  .club-layout--feed { padding-top: 18px; }
  .club-city-head h1 { font-size: 1.3rem; }
  .club-card { padding: 14px; gap: 12px; }
  /* گوشی: آیدی و زمان یه خطِ جدا بالای عنوان، سمتِ چپ */
  .club-card__meta { font-size: 0.76rem; }
  /* روی گوشی ۳۰۰ کاراکتر حدودِ ده خط می‌شه؛ حداکثر ۵ خط نشون داده می‌شه */
  .club-card__excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; }
  .club-post { padding: 16px; }
  .club-post__row { gap: 10px; }
  .club-post__title { font-size: 1.18rem; }
  .club-vote__btn { width: 34px; height: 34px; }
  .club-post__images--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .club-comment__children { margin-inline-start: 4px; padding-inline-start: 10px; }
  .club-profile-hero__main { padding: 0 16px; }
  .club-profile-hero__id { padding-top: 50px; }
  .club-profile-hero__actions { padding-top: 4px; width: 100%; }
  .club-profile-hero__avatar .club-avatar--hero { --av-size: 88px; }
  .club-profile-stats dd { font-size: 1.1rem; }
}

/* ============================================================
   درخواستِ شهرِ جدید (/club/cities/request) و ورودی‌هاش
   ============================================================ */
.club-city-picker__request { display: block; padding: 8px 10px 4px; font-size: 0.8rem; font-weight: 700; color: var(--club-600); }
.club-city-picker__request:hover { color: var(--club-700); text-decoration: underline; }
.club-city-picker__menu { max-height: min(70vh, 420px); overflow-y: auto; }

.club-reqcity { max-width: 760px; }
.club-reqcity__head h1 { font-size: 1.45rem; margin-bottom: 6px; }
.club-reqcity__head p { color: var(--ink-soft); line-height: 1.9; margin: 0 0 18px; }
.club-reqcity__form {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 16px 18px; box-shadow: 0 1px 3px rgba(11, 28, 58, 0.06);
}
.club-reqcity__fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.club-reqcity__field { display: flex; flex-direction: column; gap: 6px; font-size: 0.84rem; font-weight: 700; color: var(--ink-soft); }
.club-reqcity__field--country { flex: 0 0 170px; }
.club-reqcity__field--city { flex: 1 1 240px; }
.club-reqcity__field select, .club-reqcity__field input { font-family: var(--font); font-size: 0.95rem; font-weight: 500; }
.club-reqcity__submit { flex: 0 0 auto; white-space: nowrap; }
.club-reqcity__hint { margin: 10px 0 0; font-size: 0.78rem; color: var(--ink-faint); }
.club-reqcity__open { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 14px 2px 0; font-size: 0.84rem; color: var(--ink-soft); }
.club-reqcity__open-chip { background: var(--club-050); color: var(--club-700); border-radius: 999px; padding: 3px 12px; font-weight: 700; }
.club-reqcity__open-chip:hover { background: var(--club-100); }
.club-reqcity__queue { margin-top: 26px; }
.club-reqcity__queue h2 { font-size: 1.08rem; margin-bottom: 10px; }
.club-reqcity__queue h2 small { font-size: 0.8rem; color: var(--ink-faint); font-weight: 600; margin-inline-start: 6px; }
.club-reqcity__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.club-reqcity__row {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 10px 14px;
}
.club-reqcity__row.is-mine { border-color: var(--club-200); background: var(--club-050); }
.club-reqcity__rank { flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); color: var(--ink-soft); font-size: 0.8rem; font-weight: 800; }
.club-reqcity__name { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.club-reqcity__name strong { font-size: 0.98rem; color: var(--club-ink); }
.club-reqcity__name small { color: var(--ink-faint); font-size: 0.8rem; }
.club-reqcity__name em { font-style: normal; color: var(--ink-faint); font-size: 0.76rem; }
.club-reqcity__count { flex: 0 0 auto; font-size: 0.82rem; color: var(--ink-soft); white-space: nowrap; }
.club-reqcity__count strong { color: var(--club-700); font-size: 0.95rem; }
.club-reqcity__btn {
  font-family: var(--font); font-size: 0.82rem; font-weight: 800; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--club-600); background: var(--surface); color: var(--club-600);
  border-radius: 999px; padding: 6px 14px;
}
.club-reqcity__btn:hover { background: var(--club-050); }
.club-reqcity__btn.is-on { background: var(--club-600); color: #fff; }
.club-reqcity__btn.is-on:hover { background: var(--club-700); }
.club-empty--compact { padding: 22px 16px; }
@media (max-width: 640px) {
  .club-reqcity__field--country, .club-reqcity__field--city, .club-reqcity__submit { flex: 1 1 100%; }
  .club-reqcity__row { flex-wrap: wrap; }
  .club-reqcity__count { margin-inline-start: 38px; }
}
.club-reqcity__quota { margin: 6px 0 0; font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); }
.club-reqcity__quota.is-full { color: #a5690a; }
.club-reqcity__btn:disabled, .club-reqcity__submit:disabled { opacity: 0.45; cursor: not-allowed; }
.club-reqcity__btn:disabled:hover { background: var(--surface); }

/* --- دسکتاپ: مثلِ ردیت، فقط ستونِ وسط با اسکرول حرکت می‌کنه ---
   صفحه همون اسکرولِ معمولیِ مرورگر رو داره (اسکرول‌بار لبه‌ی راستِ پنجره)، ولی نوارِ بالا و دو
   ستونِ کناری position: fixed هستن. sticky کافی نبود: موقعِ «کش اومدن» ِ مک/آیفون (rubber-band)
   عنصرهای sticky هم با صفحه کش میان و از جاشون جدا می‌شن، ولی fixed ها سرِ جاشون می‌مونن و فقط
   ستونِ وسط زیرِ نوارِ بالا کش میاد.
   ستون‌های fixed از جریانِ grid بیرون می‌رن، پس ستونِ وسط صریحاً توی ستونِ خودش گذاشته می‌شه و
   پهنای ستون‌های کناری با پهنای ستون‌های grid یکیه (۲۵۰/۳۳۰، و ۲۲۰/۳۰۰ زیرِ ۱۲۴۰ پیکسل).
   ارتفاعِ نوار (--club-nav-h) رو club_scroll.js دقیق اندازه می‌گیره؛ ۶۹px فقط مقدارِ اولیه‌ست.
   (خودِ fixed بودنِ نوار و فاصله‌ی بالای body برای همه‌ی صفحه‌های کلاب، ته‌ِ همین فایله.)
   روی موبایل/پنجره‌ی باریک یا خیلی کوتاه همون چیدمانِ قبلی (ستون‌ها زیرِ هم) می‌مونه. */
@media (min-width: 961px) and (min-height: 681px) {
  .club-shell > .club-center { grid-column: 2; }
  .club-shell > .club-rail { position: fixed; top: var(--club-nav-h, 69px); bottom: 0; z-index: 5; }
  /* لینک‌ها و کپی‌رایتِ ته ستون به پایینِ صفحه می‌چسبن */
  .club-shell > .club-rail > .club-railfoot { margin-top: auto; }
  /* ستونِ ناوبری با پس‌زمینه‌ی سفید تا لبه‌ی راستِ پنجره می‌چسبه (۱۶ پیکسلِ فاصله‌ی قبلی حالا
     padding ِ خودشه، پس جای آیتم‌ها همون قبلیه) */
  .club-shell > .club-rail--nav { right: 0; width: 266px; padding-inline-start: 16px; border-radius: 0; }
  .club-shell > .club-rail--side { left: 16px; width: 330px; }
  /* ستونِ ناوبری مثلِ ردیت: خطِ جداکننده‌ی نازک کنارش، و اگه بخش‌ها از ارتفاعِ پنجره بیشتر شدن خودش
     (نه صفحه) اسکرول می‌خوره — اسکرول‌بارش فقط با بردنِ موس روی ستون دیده می‌شه. */
  .club-shell > .club-rail--nav {
    padding-inline-end: 12px;
    border-inline-end: 1px solid var(--border);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }
  .club-shell > .club-rail--nav:hover { scrollbar-color: rgba(23, 33, 43, 0.25) transparent; }
}
@media (min-width: 961px) and (max-width: 1240px) and (min-height: 681px) {
  .club-shell > .club-rail--nav { width: 236px; }
  .club-shell > .club-rail--side { width: 300px; }
}
@media (min-width: 961px) and (max-width: 1080px) and (min-height: 681px) {
  .club-shell > .club-center { grid-column: 1; }
}

/* ============================================================
   جابه‌جاییِ نرم بینِ صفحه‌ها (بدونِ «شوک» موقعِ کلیک)
   ============================================================
   هر کلیک (مثلاً از «برترین» به «جدیدترین») یه صفحه‌ی کامل از سرور می‌گیره. به‌جای این‌که صفحه‌ی
   جدید یک‌دفعه جای قبلی رو بگیره، مرورگر بینِ دو صفحه یه محوشدنِ کوتاه می‌سازه (View Transitions؛
   کروم/اج ۱۲۶+ و سافاری ۱۸.۲+ — مرورگرهای دیگه همون رفتارِ قبلی رو دارن و چیزی خراب نمی‌شه).
   نوارِ بالا، دو ستونِ کناری و نوارِ تب‌ها اسم دارن، پس جدا از بقیه‌ی صفحه نگه داشته می‌شن و
   وقتی بینِ دو صفحه عوض نشدن کاملاً بی‌حرکت می‌مونن؛ فقط محتوای وسط نرم عوض می‌شه. */
@view-transition { navigation: auto; }
body.theme-club > .navbar { view-transition-name: club-navbar; }
.club-shell > .club-rail--nav { view-transition-name: club-rail-nav; }
.club-shell > .club-rail--side { view-transition-name: club-rail-side; }
.club-feedbar { view-transition-name: club-feedbar; }
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) { animation-duration: 0.18s; animation-timing-function: ease-out; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ارتفاعِ نوارِ بالا همیشه یکی (با یا بدونِ ورود، توی همه‌ی صفحه‌های کلاب) تا محتوای زیرش
   بینِ صفحه‌ها یا بعد از لود یه‌دفعه بالا/پایین نپره */
@media (min-width: 641px) {
  .navbar--club .navbar__inner { min-height: 68px; }
}

/* آیدیِ کاربر بالای منوی حساب: چپ‌به‌راست؛ فلش با هاور به سمتِ راست حرکت می‌کنه */
.nav-dropdown__title--ltr { text-align: left; }
.nav-dropdown__title--ltr:hover svg { transform: translateX(2px); }

/* ============================================================
   نوارِ بالا روی همه‌ی صفحه‌های کلاب ثابت (fixed) — نه فقط صفحه‌های سه‌ستونه
   ============================================================
   sticky موقعِ «کش اومدنِ» اسکرول (rubber-band ِ مک/آیفون) همراهِ صفحه پایین میاد و از بالای
   پنجره جدا می‌شه؛ fixed سرِ جاش می‌مونه. چون نوار از جریانِ صفحه بیرون می‌ره، body به اندازه‌ی
   ارتفاعِ واقعیِ نوار فاصله‌ی بالا می‌گیره (--club-nav-h، club_scroll.js درست بعد از نوار و قبل از
   اولین نمایش اندازه‌ش رو می‌گیره؛ روی موبایل که جستجو ردیفِ دوم می‌شه، نوار بلندتره). */
body.theme-club { padding-top: var(--club-nav-h, 69px); }
body.theme-club > .navbar { position: fixed; top: 0; left: 0; right: 0; }
/* پرش به یه پاسخ (#answer-…) زیرِ نوار نره */
html:has(> body.theme-club) { scroll-padding-top: calc(var(--club-nav-h, 69px) + 16px); }
/* منوی بازِ موبایل روی محتوا میاد؛ اگه از ارتفاعِ صفحه بلندتر شد خودش اسکرول می‌خوره */
body.theme-club > .navbar.is-nav-open { max-height: 100vh; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }

/* ============================================================
   شهرها برای همه: سرِ صفحه‌ی شهر + «دنبال کردن»، انتخابِ «کجا» توی فرمِ پرسش، «شهرت رو پیدا کن»
   ============================================================ */
/* سرِ صفحه‌ی شهر (مثلِ سرِ کامیونیتی توی ردیت) */
.club-cityhead {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 14px 18px; margin-bottom: 12px;
}
.club-cityhead__avatar {
  width: 52px; height: 52px; flex: 0 0 52px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--club-600); color: #fff; font-size: 1.35rem; font-weight: 900;
}
.club-cityhead__avatar--country { background: var(--club-050); border: 1px solid var(--club-200); font-size: 1.6rem; }
.club-cityhead__main { flex: 1 1 auto; min-width: 0; }
.club-cityhead__title { margin: 0; font-size: 1.3rem; line-height: 1.5; color: var(--club-ink); }
.club-cityhead__sub { margin: 0; font-size: 0.82rem; color: var(--ink-faint); }
.club-cityhead__sub a { color: var(--club-600); font-weight: 700; }
.club-cityhead__sub a:hover { text-decoration: underline; }
.club-cityhead__stats { margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 0 8px; font-size: 0.8rem; color: var(--ink-soft); }
.club-cityhead__stats b { font-weight: 800; color: var(--club-ink); }
.club-cityhead__actions { flex: 0 0 auto; display: flex; gap: 8px; align-items: center; }
.club-cityhead__actions form { margin: 0; }

/* دکمه‌ی «دنبال کردن»: آبیِ پر؛ وقتی دنبال می‌کنید، حاشیه‌دار با تیک */
.club-follow-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 38px; padding: 7px 16px; border-radius: 999px;
  border: 1px solid var(--club-600); background: var(--club-600); color: #fff;
  font: inherit; font-size: 0.9rem; font-weight: 800; cursor: pointer; white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}
.club-follow-btn:hover { background: var(--club-700); border-color: var(--club-700); color: #fff; }
.club-follow-btn:active { transform: scale(0.97); }
.club-follow-btn:focus-visible { outline: 2px solid var(--club-500); outline-offset: 2px; }
.club-follow-btn__check { display: none; }
.club-follow-btn.is-on { background: var(--surface); color: var(--club-700); border-color: var(--club-200); }
.club-follow-btn.is-on:hover { background: var(--club-050); color: var(--club-700); border-color: var(--club-400); }
.club-follow-btn.is-on .club-follow-btn__plus { display: none; }
.club-follow-btn.is-on .club-follow-btn__check { display: inline; }
.club-follow-btn:disabled { opacity: 0.75; cursor: progress; }

/* اسمِ صفحه‌ی هر پرسش (خانه و «همه‌ی <کشور>»)، اولِ ردیفِ بالای کارت — مثلِ r/… توی ردیت */
.club-card__city { display: inline-flex; align-items: center; gap: 6px; color: var(--club-ink); font-weight: 800; font-size: 0.84rem; }
.club-card__city-icon {
  width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--club-600); color: #fff; font-size: 0.68rem; font-weight: 900; line-height: 1;
}
.club-card__city--country .club-card__city-icon { background: var(--club-050); border: 1px solid var(--club-200); font-size: 0.8rem; }
a.club-card__city:hover { color: var(--club-600); }
a.club-card__city:hover span:last-child { text-decoration: underline; }

/* ستونِ ناوبری: پرچمِ «همه‌ی <کشور>» جای آیکون */
.club-navrail__flag { width: 20px; text-align: center; font-size: 1.05rem; line-height: 1; }

/* فرمِ پرسش: «این پرسش مربوط به کجاست؟» */
.club-where { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.club-where legend { font-weight: 700; margin-bottom: 8px; padding: 0; }
.club-where__row { display: flex; gap: 8px; }
.club-where__country { flex: 0 0 auto; width: auto; min-width: 140px; }
.club-where__city { flex: 1 1 auto; min-width: 0; }
.club-where__city:disabled { opacity: 0.55; }
.club-where__general { margin-top: 10px; }
@media (max-width: 520px) {
  .club-where__row { flex-direction: column; }
  .club-where__country { width: 100%; }
}


@media (max-width: 640px) {
  .club-cityhead { padding: 12px 14px; gap: 10px; flex-wrap: wrap; }
  .club-cityhead__avatar { width: 44px; height: 44px; flex-basis: 44px; font-size: 1.15rem; }
  .club-cityhead__title { font-size: 1.12rem; }
  .club-cityhead__actions { width: 100%; }
  .club-cityhead__actions form, .club-cityhead__actions .club-follow-btn { width: 100%; justify-content: center; }
}

/* ============================================================
   خانه (فیدِ شخصی)
   ============================================================ */
/* ردیفِ صفحه‌های دنبال‌شده — شبیهِ استوری‌های اینستاگرام */
.club-follows {
  display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-soft);
  padding: 14px 16px 10px; margin-bottom: 12px;
}
.club-follows::-webkit-scrollbar { display: none; }
.club-follows__item { flex: 0 0 auto; width: 72px; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--ink); }
.club-follows__ring {
  width: 62px; height: 62px; border-radius: 50%; padding: 3px;
  background: linear-gradient(135deg, var(--club-400), var(--club-600));
  display: inline-flex; transition: transform 0.15s ease;
}
.club-follows__item:hover .club-follows__ring { transform: scale(1.05); }
.club-follows__avatar {
  width: 100%; height: 100%; border-radius: 50%; border: 3px solid var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--club-100); color: var(--club-700); font-size: 1.2rem; font-weight: 900;
}
.club-follows__avatar--country { background: var(--club-050); font-size: 1.5rem; }
.club-follows__item--add .club-follows__ring { background: var(--border); }
.club-follows__avatar--add { background: var(--surface); color: var(--club-600); font-size: 1.6rem; font-weight: 400; }
.club-follows__name {
  max-width: 100%; font-size: 0.74rem; font-weight: 700; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* راهنمای کسی که هنوز چیزی دنبال نمی‌کنه */
.club-home-hint {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  background: var(--club-050); border: 1px solid var(--club-200); border-radius: var(--radius-md);
  padding: 14px 16px; margin-bottom: 12px; font-size: 0.88rem; color: var(--ink-soft); line-height: 1.9;
}
.club-home-hint > strong { color: var(--club-ink); width: 100%; }
.club-home-hint > span { flex: 1 1 260px; }
.club-home-hint b { color: var(--club-700); }

/* جداکننده‌ی «پیشنهادها» بعد از پرسش‌های صفحه‌های دنبال‌شده */
.club-home-divider { display: flex; align-items: center; gap: 12px; margin: 10px 0 2px; color: var(--ink-soft); font-size: 0.82rem; font-weight: 700; }
.club-home-divider::before, .club-home-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.club-home-divider span { text-align: center; }
.club-home-divider__short { display: none; }
@media (max-width: 640px) {
  /* گوشی: یه خط — متنِ کوتاه‌تر و فونتِ کوچیک‌تر، خط‌های کناری باریک */
  .club-home-divider { gap: 8px; font-size: 0.74rem; }
  .club-home-divider__long { display: none; }
  .club-home-divider__short { display: inline; white-space: nowrap; }
  .club-home-divider::before, .club-home-divider::after { min-width: 10px; }
}

/* ردیفِ «صفحه‌های پیشنهادی» توی فیدِ خانه، مثلِ استوری‌های اینستاگرام (club/home.html — story_row):
   دایره‌ی آواتارِ صفحه با حلقه‌ی رنگی و اسمِ فارسیش زیرش، افقی اسکرول می‌خوره. دکمه‌های ‹ › فقط
   روی دستگاه‌هایی که موس دارن (club.js — «ردیفِ استوری»)؛ روی گوشی با انگشت کشیده می‌شه. */
.club-stories {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 12px 0 10px; min-width: 0;
}
.club-stories__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 16px 8px; }
.club-stories__head h2 { margin: 0; font-size: .9rem; font-weight: 800; color: var(--ink); }
.club-stories__head a { font-size: .8rem; font-weight: 700; color: var(--club-600); white-space: nowrap; }
.club-stories__wrap { position: relative; }
.club-stories__track {
  list-style: none; margin: 0; padding: 2px 14px 4px; display: flex; gap: 14px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 14px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.club-stories__track::-webkit-scrollbar { display: none; }
.club-stories__track > li { flex: 0 0 auto; scroll-snap-align: start; }
.club-story {
  display: flex; flex-direction: column; align-items: center; gap: 6px; width: 76px;
  color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.club-story__ring {
  display: block; width: 70px; height: 70px; padding: 3px; border-radius: 50%;
  background: linear-gradient(45deg, var(--club-700), var(--club-500) 55%, #8fd8fb);
  transition: transform .15s ease;
}
.club-story__ring > .club-av { border-radius: 50%; background: var(--surface); padding: 2.5px; box-sizing: border-box; }
.club-story__ring > .club-av > svg { box-shadow: none; }
.club-story__name {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .74rem; font-weight: 600; line-height: 1.3; text-align: center;
}
.club-story:hover .club-story__ring { transform: scale(1.04); }
.club-story:active .club-story__ring { transform: scale(.95); }
.club-story:focus-visible { outline: none; }
.club-story:focus-visible .club-story__ring { box-shadow: 0 0 0 3px var(--club-100); }
.club-stories__nav {
  position: absolute; top: 24px; z-index: 2; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; padding: 0; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink); cursor: pointer;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .14);
}
.club-stories__nav[hidden] { display: none; }
.club-stories__nav:hover { background: var(--club-050); color: var(--club-600); }
.club-stories__nav--prev { inset-inline-start: 6px; }
.club-stories__nav--next { inset-inline-end: 6px; }
@media (max-width: 760px) {
  .club-story { width: 70px; }
  .club-story__ring { width: 64px; height: 64px; }
}

.club-follow-btn--sm { min-height: 30px; padding: 4px 12px; font-size: 0.8rem; }
.club-follow-btn--sm svg { width: 13px; height: 13px; }

/* ============================================================
   موضوع‌ها
   ============================================================ */
/* موضوعِ اصلیِ پرسش روی کارت */
.club-card__topic {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 9px; border-radius: 999px;
  background: var(--club-050); border: 1px solid var(--club-100);
  color: var(--club-700); font-size: 0.76rem; font-weight: 700;
}
a.club-card__topic:hover { background: var(--club-100); border-color: var(--club-200); }

/* سرِ صفحه‌ی موضوع / جستجو */
.club-cityhead__avatar--topic { background: var(--club-050); border: 1px solid var(--club-200); font-size: 1.6rem; }
.club-searchhead { padding-block: 16px; }

/* ستونِ ناوبری: آیکونِ موضوع */
.club-navrail__city--topic { background: var(--club-050); font-size: 0.95rem; }

/* ردیفِ استوری‌ها: موضوع */
.club-follows__ring--topic { background: linear-gradient(135deg, #f6b73c, #e8742a); }
.club-follows__avatar--topic { background: #fff8ec; font-size: 1.5rem; }

/* ردیفِ «چیپ» ها: فیلترِ موضوع توی صفحه‌ی شهر، فیلترِ کشور توی صفحه‌ی موضوع، میان‌بُرهای جستجو */
.club-chiprow { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 12px; }
.club-chiprow::-webkit-scrollbar { display: none; }
.club-chiprow--inbar { padding: 10px 14px 12px; border-top: 1px solid var(--border); }
.club-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink); font-size: 0.82rem; font-weight: 700; white-space: nowrap;
}
.club-chip small { color: var(--ink-faint); font-weight: 600; }
.club-chip:hover { border-color: var(--club-200); background: var(--club-050); }
.club-chip.is-active { background: var(--club-600); border-color: var(--club-600); color: #fff; }
.club-chip.is-active small { color: rgba(255, 255, 255, 0.8); }
.club-post__tags .club-chip { font-size: 0.8rem; padding: 3px 10px; }
.club-chip--topic { background: var(--club-050); border-color: var(--club-100); color: var(--club-700); }

/* فرمِ پرسش: انتخابِ موضوع */
.club-topics-field { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.club-topics-field legend { font-weight: 700; margin-bottom: 8px; padding: 0; }
.club-topic-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.club-topic-opt { position: relative; cursor: pointer; }
.club-topic-opt input { position: absolute; opacity: 0; pointer-events: none; }
.club-topic-opt > span {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 13px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); font-size: 0.86rem; font-weight: 700; color: var(--ink);
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.club-topic-opt:hover > span { border-color: var(--club-200); background: var(--club-050); }
.club-topic-opt input:checked + span { background: var(--club-600); border-color: var(--club-600); color: #fff; }
.club-topic-opt input:focus-visible + span { outline: 2px solid var(--club-500); outline-offset: 2px; }
.club-topic-opt input:disabled + span { opacity: 0.45; cursor: not-allowed; }

/* فرمِ پرسش: «کجا؟» به شکلِ سه گزینه */
.club-seg { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.club-seg__opt { position: relative; cursor: pointer; }
.club-seg__opt input { position: absolute; opacity: 0; pointer-events: none; }
.club-seg__opt > span {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 7px 13px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); font-size: 0.86rem; font-weight: 700;
}
.club-seg__opt input:checked + span { border-color: var(--club-600); background: var(--club-050); color: var(--club-700); box-shadow: inset 0 0 0 1px var(--club-600); }
.club-seg__opt input:focus-visible + span { outline: 2px solid var(--club-500); outline-offset: 2px; }
.club-where__row[hidden] { display: none; }

/* «قرص»ِ دنبال کردنِ موضوع (خانه) */
.club-topic-pills { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; margin-top: 4px; }
.club-topic-pill-form { margin: 0; }
.club-follow-btn.club-topic-pill {
  min-height: 32px; padding: 4px 12px; font-size: 0.82rem; gap: 5px;
  background: var(--surface); color: var(--ink); border-color: var(--border);
}
.club-follow-btn.club-topic-pill:hover { background: var(--club-050); border-color: var(--club-200); color: var(--club-700); }
.club-follow-btn.club-topic-pill.is-on { background: var(--club-600); border-color: var(--club-600); color: #fff; }
.club-topic-pill svg { flex: 0 0 14px; }


/* ============================================================
   هر پرسش = یه صفحه: اسمِ انگلیسیِ صفحه روی کارت + انتخابگرِ «انتخابِ صفحه» (مثلِ ردیت)
   ============================================================ */
.club-card__page { display: inline-flex; align-items: center; gap: 6px; color: var(--club-ink); font-weight: 800; font-size: 0.84rem; }
.club-card__page-icon {
  width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--club-600); color: #fff; font-size: 0.68rem; font-weight: 900; line-height: 1;
}
.club-card__page--topic .club-card__page-icon,
.club-card__page--country .club-card__page-icon { background: var(--club-050); border: 1px solid var(--club-200); font-size: 0.78rem; }
.club-card__page-handle { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: 0.1px; }
a.club-card__page:hover { color: var(--club-600); }
a.club-card__page:hover .club-card__page-handle { text-decoration: underline; }

/* دکمه‌ی «انتخابِ صفحه» */
.club-page-field { margin-bottom: 18px; }
/* «انتخابِ صفحه» و روبه‌روش «پیش‌نویس‌ها» (فقط پستِ جدید) توی یه ردیف */
.club-page-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.club-page-row .club-page-select { min-width: 0; }
.club-ask__drafts--inline { margin-inline-start: auto; }
.club-page-select {
  display: inline-flex; align-items: center; gap: 10px; width: auto; max-width: 100%; align-self: flex-start;
  min-height: 44px; padding: 7px 14px 7px 16px; border-radius: 999px;
  border: 1px solid var(--ink-faint); background: var(--surface); color: var(--club-ink);
  font: inherit; font-weight: 800; cursor: pointer;
}
.club-page-select:hover { border-color: var(--club-600); }
.club-page-select:focus-visible { outline: 2px solid var(--club-500); outline-offset: 2px; }
.club-page-select__current { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.club-page-select__icon {
  width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--club-050); border: 1px solid var(--club-200); font-size: 0.95rem;
}
.club-page-select__handle { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.club-page-select__name { color: var(--ink-soft); font-weight: 600; font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.club-page-select.is-empty .club-page-select__placeholder { color: var(--club-ink); }
.club-page-select__chev { flex: 0 0 auto; color: var(--ink-soft); }

/* پنجره‌ی «انتخابِ صفحه» */
.club-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px 16px; }
.club-modal[hidden] { display: none; }
.club-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 32, 0.55); }
.club-modal__panel {
  position: relative; width: min(640px, 100%); max-height: 84vh;
  display: flex; flex-direction: column;
  background: var(--surface); border-radius: 20px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
  padding: 18px 18px 8px;
}
.club-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.club-modal__head h2 { margin: 0; font-size: 1.25rem; color: var(--club-ink); }
.club-modal__close {
  width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--bg);
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink); cursor: pointer;
}
.club-modal__close:hover { background: var(--club-100); }
.club-modal__search {
  display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
  padding: 0 16px; min-height: 48px; border-radius: 999px;
  background: var(--bg); border: 2px solid var(--club-200); color: var(--ink-soft);
}
.club-modal__search:focus-within { border-color: var(--club-500); }
/* input ِ داخلِ کپسول: بی‌قاب و بی‌پس‌زمینه (مثلِ .club-search) — وگرنه استایلِ عمومیِ input:focus ِ تم
   و ظاهرِ پیش‌فرضِ type=search ِ Safari یه جعبه‌ی دوم داخلِ کپسول می‌کشن */
body.theme-club .club-modal__search input[type="search"],
body.theme-club .club-modal__search input[type="search"]:focus,
body.theme-club .club-modal__search input[type="search"]:focus-visible {
  flex: 1 1 auto; min-width: 0; width: auto; height: auto; margin: 0; padding: 10px 0;
  border: none; border-radius: 0; background: transparent; outline: none; box-shadow: none;
  -webkit-appearance: none; appearance: none; font: inherit; color: var(--ink);
}
.club-modal__search input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
.club-modal__search input[type="search"]::placeholder { direction: rtl; text-align: right; color: var(--ink-faint); opacity: 1; }
html.club-modal-open { overflow: hidden; }

/* اسکرول‌بار سمتِ راست: ظرفِ اسکرول ltr (مرورگر اسکرول‌بار رو سمتِ «پایانِ» جهت می‌ذاره)، محتوا دوباره rtl */
.club-page-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; direction: ltr; }
.club-page-list > li { direction: rtl; }
.club-page-opt {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 8px; border-bottom: 1px solid var(--border); cursor: pointer; border-radius: 10px;
}
.club-page-opt[hidden] { display: none; }
.club-page-opt:hover, .club-page-opt:focus { background: var(--club-050); outline: none; }
.club-page-opt.is-selected { background: var(--club-100); }
.club-page-opt__icon {
  width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--club-600); color: #fff; font-size: 1.15rem; font-weight: 900;
}
.club-page-opt__icon--topic, .club-page-opt__icon--country { background: var(--club-050); border: 1px solid var(--club-200); font-size: 1.45rem; }
.club-page-opt__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.club-page-opt__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.club-page-opt__handle { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-weight: 700; font-size: 1.02rem; color: var(--club-ink); }
.club-page-opt__name { font-weight: 700; font-size: 0.92rem; color: var(--ink); }
.club-page-opt__meta { font-size: 0.8rem; color: var(--ink-faint); }
.club-page-opt__meta b { color: var(--club-700); font-weight: 700; }
.club-page-opt__desc { font-size: 0.82rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.club-page-opt__info { flex: 0 0 auto; color: var(--ink-soft); padding: 6px; border-radius: 50%; }
.club-page-opt__info:hover { color: var(--club-600); background: var(--surface); }
.club-page-new { padding: 12px 8px; border-top: 1px solid var(--border); }
.club-page-new[hidden] { display: none; }
.club-page-new__title { margin: 0 0 8px; font-size: 0.88rem; color: var(--ink-soft); }
.club-page-new__row { display: flex; gap: 8px; }
.club-page-new__row select { flex: 1 1 auto; width: auto; }
.club-page-empty { padding: 18px 8px; text-align: center; color: var(--ink-soft); margin: 0; }
.club-page-empty[hidden] { display: none; }
@media (max-width: 640px) {
  .club-modal { padding: 0; align-items: stretch; }
  .club-modal__panel { width: 100%; max-height: none; height: 100%; border-radius: 0; padding: 14px 14px 6px; }
  .club-page-opt__icon { width: 40px; height: 40px; flex-basis: 40px; }
}
.club-cityhead__handle { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 0.85rem; font-weight: 600; color: var(--ink-faint); margin-inline-start: 6px; }

/* ستونِ کناریِ کارت (فیدهای قاطی: خانه، «کشورِ …»، جستجو): صفحه‌ی پرسش + دکمه‌ی دنبال کردن،
   سمتِ راستِ کارت، جدا با یه خطِ عمودی. بالای لایه‌ی لینکِ کارت (z-index) تا کلیکش مالِ خودش باشه. */
.club-card--with-side { gap: 0; padding-inline-start: 0; }
.club-card--with-side .club-card__main { padding-inline-start: 16px; }
.club-card__side {
  position: relative; z-index: 1; align-self: stretch;
  flex: 0 0 116px; width: 116px; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 2px 10px; border-inline-end: 1px solid var(--border);
}
.club-card__side-page {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  max-width: 100%; min-width: 0; color: var(--club-ink); text-align: center;
}
.club-card__side-icon {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--club-600); color: #fff; font-size: 1rem; font-weight: 900; line-height: 1;
}
.club-card__side-page--topic .club-card__side-icon,
.club-card__side-page--country .club-card__side-icon { background: var(--club-050); border: 1px solid var(--club-200); font-size: 1.2rem; }
.club-card__side-handle {
  display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-weight: 700; font-size: 0.86rem; letter-spacing: 0.1px;
}
a.club-card__side-page:hover { color: var(--club-600); }
a.club-card__side-page:hover .club-card__side-handle { text-decoration: underline; }
.club-card__side-follow { margin: 0; max-width: 100%; }
.club-follow-btn--card { min-height: 30px; padding: 4px 10px; gap: 4px; font-size: 0.76rem; max-width: 100%; }
@media (max-width: 640px) {
  .club-card__side { flex-basis: 84px; width: 84px; padding: 2px 6px; gap: 8px; }
  .club-card--with-side .club-card__main { padding-inline-start: 12px; }
  .club-card__side-icon { width: 34px; height: 34px; flex-basis: 34px; font-size: 0.9rem; }
  .club-card__side-handle { font-size: 0.76rem; }
  .club-follow-btn--card { min-height: 28px; padding: 3px 8px; font-size: 0.68rem; }
  .club-follow-btn--card svg { display: none; }
  /* ستونِ کناری جا رو تنگ می‌کنه: «اشتراک‌گذاری» فقط آیکون تا دکمه‌ها توی یه خط بمونن */
  .club-card--with-side .club-pill--share span { display: none; }
  .club-card--with-side .club-card__actions { gap: 6px; }
}

/* ---------- منوی سه‌نقطه‌ی پرسش (ذخیره، گزارش) — بالا-چپِ کارت و صفحه‌ی پرسش ---------- */
.club-menu-wrap { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 3; }
.club-card .club-card__meta { padding-inline-end: 36px; }
.club-post { position: relative; }
.club-post .club-post__title { padding-inline-end: 40px; }
.club-menu-btn {
  width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; color: var(--ink-soft);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.club-menu-btn:hover, .club-menu-wrap.is-open .club-menu-btn { background: var(--club-100); color: var(--club-ink); }
.club-menu-btn:focus-visible { outline: 2px solid var(--club-500); outline-offset: 1px; }
.club-menu {
  position: absolute; top: calc(100% + 6px); inset-inline-end: 0; min-width: 210px; z-index: 30;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16); padding: 6px; display: flex; flex-direction: column;
}
.club-menu[hidden] { display: none; }
.club-menu.is-up { top: auto; bottom: calc(100% + 6px); }
.club-menu__item {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink); font: inherit; font-size: 0.95rem; font-weight: 600; text-align: start; cursor: pointer;
}
.club-menu__item:hover, .club-menu__item:focus-visible { background: var(--club-050); outline: none; }
.club-menu__icon { flex: 0 0 auto; color: var(--ink-soft); }
.club-menu__item.is-on .club-menu__icon { fill: var(--club-600); color: var(--club-600); }

/* ---------- پنجره‌ی «گزارشِ تخلف» (دو مرحله، مثلِ ردیت) ---------- */
.club-report__panel { width: min(600px, 100%); }
.club-report__titlebar { display: flex; align-items: center; gap: 6px; min-width: 0; }
.club-report__back[hidden] { display: none; }
.club-report__intro { margin: 0 0 14px; color: var(--ink); line-height: 1.9; font-size: 0.95rem; }
.club-report__step { overflow-y: auto; }
.club-report__step[hidden] { display: none; }
.club-report__reasons { border: 0; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.club-report__reason { position: relative; margin: 0; cursor: pointer; }
.club-report__reason span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 7px 16px; border-radius: 999px;
  background: var(--bg); color: var(--ink); font-weight: 700; font-size: 0.9rem; border: 1px solid transparent;
  transition: background 0.12s ease;
}
.club-report__reason:hover span { background: var(--club-100); }
.club-report__reason.is-on span, .club-report__reason input:checked + span { background: var(--club-ink); color: #fff; }
.club-report__reason input:focus-visible + span { outline: 2px solid var(--club-500); outline-offset: 2px; }
.club-report__info {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px;
  background: var(--bg); color: var(--ink-soft); font-size: 0.86rem; line-height: 1.8; margin-bottom: 14px;
}
.club-report__info svg { flex: 0 0 auto; margin-top: 3px; }
.club-report__info a { color: var(--club-600); font-weight: 700; }
.club-report__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 4px 0 10px; }
.club-report__foot--end { justify-content: flex-end; }
.club-report__desc { min-width: 0; flex: 1 1 auto; }
.club-report__desc strong { display: block; font-size: 1rem; color: var(--club-ink); margin-bottom: 2px; }
.club-report__desc p { margin: 0; color: var(--ink); font-size: 0.88rem; line-height: 1.85; }
.club-report__next {
  flex: 0 0 auto; min-height: 44px; padding: 8px 22px; border-radius: 999px; border: 0;
  background: var(--club-ink); color: #fff; font: inherit; font-weight: 800; cursor: pointer;
}
.club-report__next:hover { background: var(--club-700); }
.club-report__next:disabled { background: var(--bg); color: var(--ink-faint); cursor: not-allowed; }
.club-report__subject { border: 0; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.club-report__subject[hidden] { display: none; }
.club-report__question { font-size: 1.1rem; font-weight: 800; color: var(--club-ink); margin-bottom: 8px; padding: 0; }
.club-report__option { display: flex; align-items: center; gap: 10px; padding: 8px 4px; font-weight: 600; cursor: pointer; border-radius: 8px; }
.club-report__option:hover { background: var(--club-050); }
.club-report__option input { width: 20px; height: 20px; accent-color: var(--club-600); margin: 0; }
.club-report__note { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.club-report__note label { font-weight: 700; font-size: 0.9rem; }
.club-report__note textarea { width: 100%; resize: vertical; min-height: 96px; }
@media (max-width: 640px) {
  .club-report__reason span { min-height: 36px; padding: 6px 13px; font-size: 0.84rem; }
  .club-report__foot { flex-direction: column; align-items: stretch; }
  .club-report__next { width: 100%; }
  .club-report__panel { display: flex; flex-direction: column; }
  .club-report-form { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
  .club-report__step:not([hidden]) { display: flex; flex-direction: column; flex: 1 1 auto; }
  .club-report__step .club-report__foot { margin-top: auto; }
}
.club-report__panel { overflow-y: auto; }
.club-report .club-modal__close { position: static; flex: 0 0 auto; }

/* ---------- «کلابر» (هر کسی که پروفایلِ کلاب داره) ---------- */
.club-rail .club-join .club-join__title:has(+ .club-join__lead) { margin-bottom: 6px; }
.club-rail .club-join .club-join__lead { margin: 0 0 16px; font-size: 0.86rem; line-height: 1.9; color: var(--ink-soft); }
.club-profile-hero__since { margin: -2px 0 8px; color: var(--ink-faint); font-size: 0.86rem; }
/* پیش‌نمایشِ عکسِ پروفایل تا عکسی انتخاب نشده نباید دیده بشه (display ِ .club-avatar جلوی hidden رو می‌گرفت) */
img.club-avatar[hidden] { display: none; }
.club-profile-note--top { margin: 0 4px 10px; }
.club-profile-note a { color: var(--club-600); font-weight: 700; }

/* ---------- نوعِ پرسش (متن | عکس | لینک) — مثلِ تب‌های Text / Images / Link ِ ردیت ---------- */
.club-kind-tabs { display: flex; gap: 4px; margin: 4px 0 18px; border-bottom: 1px solid var(--border); }
.club-kind-tab {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px 12px; border: 0; border-radius: 10px 10px 0 0; background: transparent;
  color: var(--ink-soft); font: inherit; font-weight: 800; cursor: pointer;
}
.club-kind-tab:hover:not(:disabled) { background: var(--club-050); color: var(--club-ink); }
.club-kind-tab.is-active { color: var(--club-ink); }
.club-kind-tab.is-active::after {
  content: ""; position: absolute; inset-inline: 12px; bottom: -1px; height: 3px; border-radius: 3px; background: var(--club-600);
}
.club-kind-tab:disabled { color: var(--ink-faint); opacity: 0.55; cursor: not-allowed; }
.club-kind-tab:focus-visible { outline: 2px solid var(--club-500); outline-offset: -2px; }
[data-kind-section][hidden] { display: none !important; }

/* کادرِ «بکشید و رها کنید» ِ عکس‌ها: وقتی خالیه تمام‌عرض، بعد از انتخاب، دکمه‌ی کوچیکِ «افزودنِ عکس» */
.club-images__add-more { display: none; }
.club-images.is-empty .club-images__add {
  width: 100%; height: auto; min-height: 170px; flex-direction: row; gap: 12px;
  border-style: dashed; border-width: 1.5px; font-size: 0.95rem; font-weight: 600; color: var(--ink-soft); background: var(--surface);
}
.club-images.is-empty .club-images__add svg { order: 2; width: 42px; height: 42px; padding: 9px; border-radius: 50%; background: var(--club-050); color: var(--club-600); }
.club-images.is-empty .club-images__add u { color: var(--club-600); text-underline-offset: 3px; }
.club-images:not(.is-empty) .club-images__add-text { display: none; }
.club-images:not(.is-empty) .club-images__add-more { display: inline; }
.club-images.is-drag .club-images__add { border-color: var(--club-600); background: var(--club-050); }
.club-images.is-drag { outline: 2px dashed var(--club-400); outline-offset: 4px; border-radius: 14px; }

/* ---------- عکس و لینک روی خودِ کارت ---------- */
.club-media {
  position: relative; margin: 4px 0 2px; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--border); background: #0f172a0d; display: flex; justify-content: center;
}
.club-media img { display: block; width: 100%; max-height: 460px; object-fit: contain; }
.club-media__count {
  position: absolute; top: 10px; inset-inline-end: 10px; padding: 3px 10px; border-radius: 999px;
  background: rgba(15, 23, 42, 0.72); color: #fff; font-size: 0.78rem; font-weight: 700;
}
.club-linkbox {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; margin: 4px 0 2px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg);
  color: var(--ink); text-align: left; min-width: 0;
}
.club-linkbox:hover { border-color: var(--club-400); background: var(--club-050); }
.club-linkbox__icon {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--club-600); border: 1px solid var(--border);
}
.club-linkbox__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.club-linkbox__domain { font-size: 0.95rem; color: var(--club-ink); }
.club-linkbox__url { font-size: 0.8rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.club-linkbox__out { flex: 0 0 auto; color: var(--ink-soft); }
.club-post .club-linkbox { margin: 14px 0 6px; }

/* صفحه‌ی پرسشِ «عکس»: عکس‌ها بزرگ و زیرِ هم */
.club-post__images--kind-image { grid-template-columns: minmax(0, 1fr) !important; }
.club-post__images--kind-image .club-post__image { aspect-ratio: auto; max-height: none; display: flex; justify-content: center; }
.club-post__images--kind-image .club-post__image img { width: auto; max-width: 100%; height: auto; max-height: 640px; object-fit: contain; }

/* ---------- فرمِ پرسش: سرتیتر با لینکِ «پیش‌نویس‌ها»، فیلدِ لینک با آیکون و پیش‌نمایشِ زنده ---------- */
.club-ask__titlebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.club-ask__titlebar h1 { margin: 0; }
.club-ask__drafts { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--club-ink); padding: 6px 12px; border-radius: 999px; }
.club-ask__drafts:hover { background: var(--club-050); color: var(--club-600); }
.club-ask__drafts-count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--club-600); color: #fff; font-size: 0.75rem; display: inline-flex; align-items: center; justify-content: center; }
.club-ask__drafts-count[hidden] { display: none; }
.club-breadcrumb [aria-current="page"] { color: var(--ink-soft); }

.club-linkfield {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 6px 0 14px;
  border: 1.5px solid var(--border); border-radius: 14px; background: var(--surface); direction: ltr;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.club-linkfield:focus-within { border-color: var(--club-400); box-shadow: 0 0 0 4px var(--club-050); }
.club-linkfield.is-valid { border-color: var(--club-400); }
.club-linkfield.is-invalid:not(:focus-within) { border-color: #f0b4b4; }
.club-linkfield__icon {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--club-050); color: var(--club-600);
}
body.theme-club .club-linkfield input[type="text"],
body.theme-club .club-linkfield input[type="text"]:focus {
  flex: 1 1 auto; min-width: 0; height: 48px; margin: 0; padding: 0; border: 0; outline: none; box-shadow: none; background: transparent;
  font: inherit; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 0.98rem; color: var(--ink); text-align: left;
}
.club-linkfield input::placeholder { color: var(--ink-faint); }
.club-linkpreview { margin-top: 10px; }
.club-linkpreview[hidden] { display: none; }
.club-linkpreview__label { display: block; font-size: 0.78rem; color: var(--ink-faint); margin-bottom: 6px; }
.club-linkbox--preview { pointer-events: none; margin: 0; }

/* دکمه‌ی «ذخیره‌ی پیش‌نویس» کنارِ «انتشار» */
#club-draft-save[disabled] { opacity: 0.6; cursor: progress; }

/* ---------- صفحه‌ی پیش‌نویس‌ها ---------- */
.club-drafts__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.club-draft {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: 0 1px 3px rgba(11, 28, 58, 0.06);
}
.club-draft:hover { border-color: var(--club-200); }
.club-draft__main { flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-start; gap: 12px; color: var(--ink); }
.club-draft__kind { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--club-050); color: var(--club-600); }
.club-draft__text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.club-draft__text strong { color: var(--club-ink); font-size: 1rem; }
.club-draft__main:hover strong { color: var(--club-600); }
.club-draft__excerpt { color: var(--ink-soft); font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.club-draft__meta { display: flex; flex-wrap: wrap; gap: 4px 6px; color: var(--ink-faint); font-size: 0.78rem; }
.club-draft__actions { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.club-draft__actions form { margin: 0; }
.club-draft__delete { color: var(--danger, #d94f4f); }
@media (max-width: 640px) {
  .club-draft { flex-direction: column; align-items: stretch; }
  .club-draft__actions { justify-content: flex-end; }
}

/* ---------- آواتارِ صفحه‌ها (بدونِ ایموجی؛ SVG از app/club_avatars.py — club_page_avatar در club.py) ----------
   .club-av کلِ ظرفِ والد رو پر می‌کنه (اندازه رو همون ظرف تعیین می‌کنه: .club-card__side-icon و …)؛
   .club-av--inline اندازه‌ی خودش رو داره (--av) و کنارِ متن می‌شینه. شهرها پرچمِ کوچیکِ کشور رو گوشه‌شون دارن. */
.club-av { position: relative; display: block; width: 100%; height: 100%; line-height: 0; }
.club-av > svg { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.07); }
.club-av--inline { display: inline-block; width: var(--av); height: var(--av); flex: 0 0 var(--av); vertical-align: -0.28em; }
.club-av__badge {
  position: absolute; left: -6%; bottom: -6%; width: 42%; height: 42%; min-width: 11px; min-height: 11px;
  border-radius: 50%; box-shadow: 0 0 0 2px var(--surface, #fff); line-height: 0;
}
.club-av__badge svg { display: block; width: 100%; height: 100%; border-radius: 50%; }
/* ظرف‌هایی که قبلاً حرف/ایموجی داشتن: پس‌زمینه، قاب و فونتشون دیگه لازم نیست */
.has-av { background: none !important; border: 0 !important; padding: 0 !important; font-size: 0 !important; overflow: visible; }
.club-navrail__flag.has-av { width: 20px; height: 20px; display: inline-block; }
.club-navrail__item.is-current .club-navrail__city.has-av > .club-av > svg { box-shadow: 0 0 0 2px var(--club-600); }
.club-topic-pill .club-av { margin-inline-start: -4px; }
.club-chip .club-av--inline, .club-cityhead__sub .club-av--inline { margin-inline-end: 2px; }
.club-side-card h3 .club-av--inline { vertical-align: -0.35em; }
.club-flag-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.club-linkbox__domain { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- به‌روزرسانیِ فید با کشیدن به پایین (club.js) ---------- */
/* «کشیدن برای تازه‌سازیِ» خودِ مرورگرِ گوشی (کلِ صفحه رو دوباره بارگذاری می‌کرد) جاش رو به نسخه‌ی خودمون می‌ده */
html.club-has-ptr, html.club-has-ptr body { overscroll-behavior-y: none; }
/* فضای آیکون بالای نوارِ تب‌ها: ارتفاعش رو club.js با کشیدن از ۰ تا ۵۸ پیکسل می‌بره (نرم، با transition)
   و آیکون وسطش پیدا می‌شه؛ بعد از به‌روزرسانی فضا نرم بسته می‌شه. */
.club-ptr {
  height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; pointer-events: none;
  transition: height .14s ease-out;
}
.club-ptr > .club-ptr__spinner { opacity: 0; transform: scale(.6); transition: opacity .14s ease-out, transform .14s ease-out; }
.club-ptr.is-dragging, .club-ptr.is-dragging > .club-ptr__spinner { transition: none; }
.club-ptr.is-closing { transition: height .28s cubic-bezier(.4, 0, .2, 1); }
.club-ptr.is-closing > .club-ptr__spinner { transition: opacity .22s ease, transform .28s ease; }
.club-ptr__spinner {
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--club-600); box-shadow: 0 2px 8px rgba(11, 28, 58, 0.16);
}
.club-ptr svg { display: block; transition: transform .12s ease-out; }
.club-ptr.is-ready .club-ptr__spinner { color: var(--club-700); }
.club-ptr.is-loading svg { animation: club-ptr-spin 0.7s linear infinite; transition: none; }
@keyframes club-ptr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .club-ptr.is-loading svg { animation-duration: 1.6s; } }

/* ---------- لودِ خودکارِ پست‌های بعدی (club.js): آیکونِ چرخان زیرِ فهرست تا صفحه‌ی بعد برسه ---------- */
[data-feed-pager][hidden] { display: none !important; }
.club-loadmore { display: flex; justify-content: center; align-items: center; height: 72px; color: var(--club-600); }
.club-loadmore svg { animation: club-ptr-spin 0.7s linear infinite; }
@media (prefers-reduced-motion: reduce) { .club-loadmore svg { animation-duration: 1.6s; } }

/* ============================================================
   تیکِ آبی، سنجاق و «از من بپرسید»
   ============================================================ */
:root {
  --club-verified: #1d9bf0;
  --club-ama: #c2410c;
  --club-ama-bg: #fff7ed;
  --club-ama-border: #fed7aa;
  --club-live: #dc2626;
}
/* تیکِ آبی کنارِ نامِ کاربری (حسابِ تأییدشده) */
.club-verified { display: inline-flex; align-items: center; color: var(--club-verified); line-height: 0; flex: none; cursor: help; position: relative; z-index: 1; }
.club-verified svg { display: block; }
.club-author-wrap .club-verified { margin-inline-start: -2px; }
.club-profile-hero__id h1 { display: inline-flex; align-items: center; gap: 6px; }
.club-op-chip--host { background: var(--club-ama); }
.club-staff-form { display: inline-flex; flex-wrap: wrap; gap: 6px; margin: 0; }

/* سنجاق‌شده */
.club-pinned-chip {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--club-green); font-weight: 800; font-size: 0.74rem;
}
.club-card--pinned { border-color: var(--club-green-border); }
.club-card--pinned:hover { border-color: #86efac; }
.club-menu__item.is-on svg path { fill: currentColor; }

/* «از من بپرسید» — برچسب، نشانِ «زنده»، نوارِ روی کارت */
.club-ama-tag {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--club-ama); color: #fff; border-radius: 999px;
  padding: 2px 10px 2px 9px; font-size: 0.74rem; font-weight: 800; white-space: nowrap;
}
.club-ama-live { display: inline-flex; align-items: center; gap: 5px; color: var(--club-live); font-weight: 800; font-size: 0.78rem; }
.club-ama-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--club-live); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.5); animation: club-live-pulse 1.6s infinite; }
@keyframes club-live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.5); }
  70% { box-shadow: 0 0 0 7px rgba(220, 38, 38, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}
@media (prefers-reduced-motion: reduce) { .club-ama-live i { animation: none; } }
.club-card--ama { border-inline-start: 4px solid var(--club-ama); }
.club-card--ama:hover { border-color: var(--club-ama-border); border-inline-start-color: var(--club-ama); }
.club-ama-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 0.8rem; color: var(--ink-soft); }
.club-ama-strip__when { font-weight: 700; color: var(--club-ink); }
.club-ama-strip--ended .club-ama-strip__when { color: var(--ink-faint); font-weight: 600; }
.club-ama-strip--ended .club-ama-tag { background: #9a6a4f; }
.club-ama-strip__stats { color: var(--ink-faint); }

/* جعبه‌ی بالای صفحه‌ی «از من بپرسید» */
.club-ama-box {
  margin: 10px 0 14px; padding: 14px 16px; border-radius: var(--radius-md);
  background: var(--club-ama-bg); border: 1px solid var(--club-ama-border);
}
.club-ama-box__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.club-ama-box__when { font-weight: 800; color: var(--club-ink); font-size: 0.92rem; }
.club-ama-box__when small { font-weight: 600; color: var(--ink-soft); font-size: 0.8rem; }
.club-ama-box__how { margin: 8px 0 10px; color: var(--ink-soft); font-size: 0.88rem; line-height: 1.9; }
.club-ama-box__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.club-ama-box__stats { color: var(--ink-soft); font-size: 0.84rem; font-weight: 700; margin-inline-end: auto; }
.club-ama-box--ended { background: #f8fafc; border-color: var(--border); }
.club-ama-box--ended .club-ama-tag { background: #9a6a4f; }
.club-remind-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: #fff; color: var(--club-ama); border: 1px solid var(--club-ama-border);
  border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 0.84rem; font-weight: 800;
}
.club-remind-btn:hover { border-color: var(--club-ama); }
.club-remind-btn.is-on { background: var(--club-ama); color: #fff; border-color: var(--club-ama); }
.club-remind-btn.is-on svg path:first-child { fill: currentColor; }
.club-comment--host > .club-comment__row { background: var(--club-ama-bg); border-radius: var(--radius-sm, 8px); padding: 6px 8px; margin-inline: -8px; }
.club-sort-tab small { opacity: 0.75; margin-inline-start: 3px; }

/* بنرِ «از من بپرسید» بالای صفحه‌ی اصلی */
.club-ama-banners { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.club-ama-banner {
  display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit;
  background: linear-gradient(90deg, var(--club-ama-bg), #fff 70%);
  border: 1px solid var(--club-ama-border); border-radius: var(--radius-md);
  padding: 12px 14px; box-shadow: 0 1px 3px rgba(11, 28, 58, 0.06);
}
.club-ama-banner:hover { border-color: var(--club-ama); }
.club-ama-banner__host { flex: none; line-height: 0; }
.club-ama-banner__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.club-ama-banner__top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.club-ama-banner__when { font-size: 0.82rem; font-weight: 800; color: var(--club-ink); }
.club-ama-banner strong { font-size: 0.98rem; line-height: 1.7; color: var(--club-ink); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.club-ama-banner__meta { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; color: var(--ink-faint); }
.club-ama-banner__cta {
  flex: none; background: var(--club-ama); color: #fff; border-radius: 999px;
  padding: 7px 14px; font-size: 0.82rem; font-weight: 800; white-space: nowrap;
}

@media (max-width: 560px) {
  .club-ama-banner__cta { display: none; }
}
/* «سازنده‌ی صفحه: …» زیرِ آمارِ سرِ صفحه (فقط وقتی مدیر یه کلابر رو سازنده‌ی صفحه کرده) */
.club-cityhead__owner { display: flex; align-items: center; gap: 5px; margin: 4px 0 0; font-size: 0.8rem; color: var(--ink-faint); }
.club-cityhead__owner .club-author { font-size: 0.82rem; }

/* ============================================================
   باز/بسته کردنِ کاملِ ستونِ ناوبری (دکمه‌ی ثابت روی لبه‌ی چپِ ستون، روبه‌روی «خانه»)
   ============================================================
   وضعیت: کلاسِ club-rail-collapsed روی <html> (rail_toggle در _macros.html قبل از نمایش می‌ذاره،
   club_rail.js با کلیک عوضش می‌کنه و توی localStorage نگه می‌داره). فقط روی دسکتاپ که ستون ثابته؛
   جاهای دیگه ستونِ ناوبری اصلاً نیست (زیرِ ۱۰۸۱ پیکسل) یا زیرِ بقیه‌ست، پس دکمه هم نیست.
   بسته: ستون یه نوارِ باریک (--club-rail-strip) کنارِ لبه‌ی راستِ صفحه می‌شه و ستونِ وسط جای خالی رو
   می‌گیره؛ همه‌چی نرم جابه‌جا می‌شه. */
.club-railtoggle { display: none; }
@media (min-width: 1081px) and (min-height: 681px) {
  :root { --club-rail-w: 266px; --club-rail-strip: 28px; }
  .club-shell { transition: grid-template-columns 0.25s ease; }
  .club-shell > .club-rail--nav { transition: width 0.25s ease, padding 0.25s ease; }
  .club-railtoggle {
    display: inline-flex; align-items: center; justify-content: center;
    position: fixed; z-index: 7;
    /* روبه‌روی «خانه»: بالای ستون (۱۸px) + نصفِ ارتفاعِ ردیفِ «خانه» */
    top: calc(var(--club-nav-h, 69px) + 22px);
    right: calc(var(--club-rail-w) - 16px);
    width: 32px; height: 32px; padding: 0; border-radius: 50%;
    border: 1px solid var(--border); background: var(--surface); color: var(--ink-soft);
    box-shadow: 0 1px 4px rgba(11, 28, 58, 0.12);
    cursor: pointer;
    transition: right 0.25s ease, background 0.15s ease, color 0.15s ease;
  }
  .club-railtoggle:hover { background: var(--club-050); color: var(--club-600); border-color: var(--club-200); }
  .club-railtoggle:focus-visible { outline: 2px solid var(--club-500); outline-offset: 2px; }
  .club-railtoggle svg { transition: transform 0.25s ease; }

  html.club-rail-collapsed .club-shell { grid-template-columns: var(--club-rail-strip) minmax(0, 1fr) 330px; }
  html.club-rail-collapsed .club-shell > .club-rail--nav {
    width: var(--club-rail-strip); padding-inline: 0; overflow: hidden;
  }
  html.club-rail-collapsed .club-shell > .club-rail--nav > * { visibility: hidden; }
  html.club-rail-collapsed .club-railtoggle { right: calc(var(--club-rail-strip) - 16px); }
  html.club-rail-collapsed .club-railtoggle svg { transform: rotate(180deg); }
}
@media (min-width: 1081px) and (max-width: 1240px) and (min-height: 681px) {
  :root { --club-rail-w: 236px; }
  html.club-rail-collapsed .club-shell { grid-template-columns: var(--club-rail-strip) minmax(0, 1fr) 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .club-shell, .club-shell > .club-rail--nav, .club-railtoggle, .club-railtoggle svg { transition: none !important; }
}
@media (min-width: 1081px) and (min-height: 681px) { .club-railtoggle { view-transition-name: club-railtoggle; } }

/* اگه ستونِ چپ از ارتفاعِ پنجره بلندتر بشه، مثلِ ستونِ ناوبری خودش (نه صفحه) اسکرول می‌خوره */
@media (min-width: 961px) and (min-height: 681px) {
  .club-shell > .club-rail--side {
    overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: transparent transparent;
  }
  .club-shell > .club-rail--side:hover { scrollbar-color: rgba(23, 33, 43, 0.25) transparent; }
}

/* «اخیر» ِ ستونِ ناوبری: آواتار + اسمِ انگلیسیِ صفحه (مثلِ r/… ِ ردیت) */
.club-navrail__recent .club-navrail__handle { font-weight: 600; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- خودِ پرسش توی صفحه‌ی پرسش: همون کارتِ فید (club-card) با متنِ کامل ---------- */
.club-card--page { cursor: default; position: relative; }
.club-card--page:hover { border-color: var(--border); }
.club-card--page.club-card--pinned:hover { border-color: var(--club-green-border); }
.club-card--page.club-card--ama:hover { border-color: var(--club-ama-border); border-inline-start-color: var(--club-ama); }
.club-card__title--page { font-size: 1.3rem; line-height: 1.7; overflow-wrap: anywhere; margin: 0; }
.club-card--page .club-post__body { margin-top: 2px; }
.club-card--page .club-post__images { margin: 8px 0 2px; }
.club-card--page .club-linkbox { margin: 4px 0; }
.club-card--page .club-ama-box { margin: 6px 0 8px; }
.club-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.club-card--page .club-card__actions { margin-top: 10px; }
.club-pill--action { gap: 6px; padding: 0 14px 0 12px; cursor: pointer; color: var(--ink-soft); text-decoration: none; }
.club-pill--action:hover { background: #e2e9f0; color: var(--club-ink); }
.club-pill--danger:hover { background: #fef2f2; color: #dc2626; }
.club-card__actions .club-inline-form { display: inline-flex; margin: 0; }
@media (max-width: 640px) {
  .club-card__title--page { font-size: 1.12rem; }
  .club-card--page .club-pill--action span { display: none; }
  .club-card--page .club-pill--action { padding: 0 10px; }
}

/* ---------- فیلدهای «از من بپرسید» توی فرمِ پرسش (مثلِ Event start / Event duration ِ ردیت) ---------- */
.club-ama-fields { display: flex; flex-direction: column; gap: 10px; }
.club-ama-fields__row { display: flex; flex-wrap: wrap; gap: 12px; }
.club-ama-fields__row[hidden] { display: none; }
.club-ama-select {
  position: relative; flex: 1 1 220px; display: flex; flex-direction: column; gap: 2px;
  background: #e8eef2; border-radius: 18px; padding: 10px 18px 10px 44px; cursor: pointer;
}
.club-ama-select:focus-within { box-shadow: 0 0 0 2px var(--club-500); }
.club-ama-select__label { font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); }
.club-ama-select select,
.club-ama-select input {
  width: 100%; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none;
  padding: 0 !important; font-family: var(--font); font-size: 1.05rem; font-weight: 600; color: var(--club-ink);
  -webkit-appearance: none; appearance: none; cursor: pointer; min-height: 30px;
  background-image: none !important; color-scheme: light; text-align: right;
}
/* فلشِ بالا/پایینِ سمتِ چپ (مثلِ ردیت) */
.club-ama-select::after {
  content: ""; position: absolute; left: 16px; top: 50%; width: 14px; height: 22px; transform: translateY(-50%);
  background: no-repeat center/14px 22px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='22' viewBox='0 0 14 22'><path d='M3 8l4-4 4 4M3 14l4 4 4-4' stroke='%2317212b' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  pointer-events: none;
}
.club-ama-select:has(input[type="date"])::after, .club-ama-select:has(input[type="time"])::after { display: none; }
.club-ama-select:has(input) { padding-left: 18px; }
.club-ama-fields__note { margin: 0; color: var(--ink-soft); font-size: 0.88rem; line-height: 1.9; }

/* ---------- صفحه‌ی طرحِ پرسش: سه ستون مثلِ صفحه‌ی اصلی؛ ستونِ چپ = نکته‌های کوتاه ---------- */
.club-ask-tips h3 { margin-bottom: 10px !important; }
.club-ask-tips ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.club-ask-tips li { position: relative; padding-inline-start: 16px; font-size: 0.84rem; line-height: 1.85; color: var(--ink-soft); }
.club-ask-tips li::before { content: ""; position: absolute; inset-inline-start: 2px; top: 0.75em; width: 6px; height: 6px; border-radius: 50%; background: var(--club-500); }
.club-ask-tips li strong { color: var(--club-ink); font-weight: 800; }
.club-ask-tips .club-side-card__hint a { color: var(--club-600); font-weight: 700; }
/* روی صفحه‌ی باریک (ستون‌ها زیرِ هم) نکته‌ها بعد از فرم بی‌فایده‌ان */
@media (max-width: 960px) { .club-ask-side { display: none; } }
.club-shell .club-ask { padding-top: 6px; }
/* با چهار نوع (متن، عکس، لینک، از من بپرسید) روی گوشی جا نمی‌شن: ردیفِ تب‌ها خودش افقی اسکرول می‌خوره */
.club-kind-tabs { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.club-kind-tabs::-webkit-scrollbar { display: none; }
.club-kind-tab { flex: none; }
@media (max-width: 480px) { .club-kind-tab { padding-inline: 10px; } }

/* ---------- سرِ صفحه‌ی طرحِ پرسش: یه کادرِ سفیدِ ساده با آیکون، عنوان، یه خط توضیح و «پیش‌نویس‌ها» ---------- */
.club-ask__head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 14px; padding: 16px 18px;
  border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface);
  box-shadow: 0 1px 3px rgba(11, 28, 58, 0.05);
}
.club-ask__icon {
  flex: none; width: 42px; height: 42px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--club-050); color: var(--club-600);
}
.club-ask__icon svg { width: 22px; height: 22px; }
.club-ask__headtext { flex: 1; min-width: 0; }
.club-ask__headtext h1 { margin: 0 0 2px; font-size: 1.25rem; }
.club-ask__headtext p { margin: 0; color: var(--ink-soft); font-size: 0.86rem; line-height: 1.8; }
.club-ask__drafts {
  flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px;
  border-radius: 999px; background: transparent; border: 1px solid var(--border);
  font-weight: 800; font-size: 0.86rem; color: var(--club-ink); text-decoration: none;
}
.club-ask__drafts:hover { background: var(--club-050); border-color: var(--club-200); color: var(--club-600); }
@media (max-width: 640px) {
  .club-ask__head { flex-wrap: wrap; padding: 14px; gap: 10px; }
  .club-ask__headtext h1 { font-size: 1.12rem; }
  .club-ask__drafts { order: 3; }
}

/* ---------- صفحه‌های کلاب بدونِ ستونِ چپ (کاوش، اعلان‌ها، تنظیمات، پیش‌نویس‌ها، قوانین، Impressum):
   ستونِ ناوبریِ سمتِ راست مثلِ صفحه‌ی اصلی + محتوا ---------- */
.club-shell--noside { grid-template-columns: 250px minmax(0, 1fr); }
@media (max-width: 1240px) { .club-shell--noside { grid-template-columns: 220px minmax(0, 1fr); } }
@media (max-width: 1080px) { .club-shell--noside { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1081px) and (min-height: 681px) {
  html.club-rail-collapsed .club-shell--noside { grid-template-columns: var(--club-rail-strip) minmax(0, 1fr); }
}
.club-shell--noside > .club-center { max-width: 920px; }
.club-shell--noside .club-narrow { padding-top: 18px; }

/* ---------- نظرسنجی ---------- */
.club-poll { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; margin: 4px 0 2px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); cursor: default; }
.club-poll__form { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.club-poll__option { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; font-weight: 600; font-size: 0.92rem; }
.club-poll__option:hover { border-color: var(--club-400); background: var(--club-050); }
.club-poll__option:has(input:checked) { border-color: var(--club-600); background: var(--club-050); }
.club-poll__option input { width: 17px; height: 17px; accent-color: var(--club-600); margin: 0; flex: none; }
.club-poll__vote { align-self: flex-start; margin-top: 4px; padding: 7px 20px; border: 0; border-radius: 999px; background: var(--club-600); color: #fff; font: inherit; font-weight: 800; font-size: 0.88rem; cursor: pointer; }
.club-poll__vote:hover { background: var(--club-700); }
.club-poll__vote:disabled { opacity: 0.6; cursor: wait; }
.club-poll__results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.club-poll__result { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 10px; background: #f1f5f9; font-size: 0.92rem; }
.club-poll__bar { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--club-200); border-radius: 10px; }
.club-poll__result.is-mine .club-poll__bar, .club-poll__result.is-winner .club-poll__bar { background: var(--club-400); }
.club-poll__text, .club-poll__pct { position: relative; z-index: 1; }
.club-poll__text { font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.club-poll__result.is-winner .club-poll__text, .club-poll__result.is-mine .club-poll__text { font-weight: 800; }
.club-poll__check { color: var(--club-700); }
.club-poll__pct { font-weight: 800; color: var(--club-ink); flex: none; }
.club-poll__meta { margin: 2px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 0.8rem; color: var(--ink-faint); }
.club-card--link .club-poll { position: relative; z-index: 1; }

/* ویرایشگرِ گزینه‌های نظرسنجی توی فرمِ پرسش */
.club-poll-edit { display: flex; flex-direction: column; gap: 10px; }
.club-poll-edit__list { display: flex; flex-direction: column; gap: 8px; }
.club-poll-edit__row { display: flex; align-items: center; gap: 8px; }
.club-poll-edit__row input { flex: 1; }
/* گزینه‌ی خالی (dir="auto" بدونِ متن چپ‌به‌راست حساب می‌شه): متنِ پیش‌فرض «گزینه‌ی ۱» راست‌چین؛ متنِ تایپ‌شده
   همچنان جهتِ خودش رو می‌گیره (گزینه‌ی انگلیسی چپ‌چین) */
.club-poll-edit__row input:placeholder-shown { direction: rtl; text-align: right; }
.club-poll-edit__remove { flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-faint); cursor: pointer; font-size: 0.9rem; }
.club-poll-edit__remove:hover { background: #fef2f2; color: #dc2626; }
.club-poll-edit__remove[hidden] { display: none; }
.club-poll-edit__add { align-self: flex-start; border: 1px dashed var(--club-400); background: transparent; color: var(--club-600); border-radius: 999px; padding: 6px 14px; font: inherit; font-weight: 800; font-size: 0.86rem; cursor: pointer; }
.club-poll-edit__add:hover { background: var(--club-050); }
.club-poll-edit__add[hidden] { display: none; }
.club-poll-edit__locked { margin: 0; padding-inline-start: 22px; line-height: 2; }

/* ---------- تنظیماتِ کلاب: چند بخش مثلِ Settings ِ ردیت ---------- */
/* عنوان + تب‌ها توی یه کادرِ سفید، مثلِ سرِ صفحه‌های «کلابِ من» (.club-minehead) */
.club-settings__top {
  margin-bottom: 18px; padding: 16px 20px 0; background: var(--surface, #fff);
  border: 1px solid var(--border); border-radius: 18px; overflow: hidden;
}
.club-settings__head { display: flex; align-items: center; gap: 14px; }
.club-settings__head h1 { font-size: 1.35rem; font-weight: 900; margin: 0; color: var(--club-ink); }
.club-settings__head p { margin: 0 0 6px; }
.club-settings__top .club-settings__tabs { margin: 12px -20px 0; padding: 0 12px; border-bottom: 0; border-top: 1px solid var(--border); }
.club-settings__top .club-settings__tab { border-radius: 0; margin-bottom: 0; padding-block: 12px; }
.club-settings__tabs {
  display: flex; gap: 4px; margin: 10px 0 18px; border-bottom: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.club-settings__tabs::-webkit-scrollbar { display: none; }
.club-settings__tab {
  flex: none; padding: 10px 14px; color: var(--ink-soft); font-weight: 600; font-size: 0.94rem;
  text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; border-radius: 8px 8px 0 0;
}
.club-settings__tab:hover { color: var(--club-ink); background: var(--club-050); }
.club-settings__tab.is-active { color: var(--club-ink); border-bottom-color: var(--club-600); }
.club-set-section { margin-bottom: 26px; }
.club-set-section h2 { font-size: 1.12rem; margin: 0 0 12px; color: var(--club-ink); }
.club-set-section__hint { margin: -6px 0 14px; color: var(--ink-faint); font-size: 0.86rem; line-height: 1.8; }
.club-set-section .field { margin-bottom: 16px; }
.club-set-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 0; color: inherit; text-decoration: none;
}
.club-set-row + .club-set-row { border-top: 1px solid var(--border); }
.club-set-row__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.club-set-row__text strong { font-size: 0.96rem; color: var(--club-ink); font-weight: 600; }
.club-set-row__text small { color: var(--ink-faint); font-size: 0.83rem; line-height: 1.7; font-weight: 400; }
.club-set-row__value { color: var(--ink-soft); font-size: 0.9rem; overflow-wrap: anywhere; text-align: left; }
.club-set-row--switch { cursor: pointer; }
.club-set-row--link { border-radius: 10px; margin: 0 -10px; padding-inline: 10px; }
.club-set-row--link:hover { background: var(--club-050); }
.club-set-row--link svg { flex: none; color: var(--ink-faint); }
.club-set-row--danger .club-set-row__text strong { color: var(--danger); }
.club-switch {
  appearance: none; -webkit-appearance: none; flex: none; position: relative; margin: 0;
  width: 44px; height: 26px; border-radius: 999px; background: #cfd6df; cursor: pointer;
  transition: background .18s ease;
}
.club-switch::after {
  content: ""; position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s ease;
}
.club-switch:checked { background: var(--club-600); }
.club-switch:checked::after { transform: translateX(-18px); }
.club-switch:focus-visible { outline: 2px solid var(--club-600); outline-offset: 2px; }
.club-settings__form {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px 22px 16px;
}
@media (max-width: 560px) {
  .club-set-row--info { flex-wrap: wrap; gap: 6px; }
  .club-set-row--info .club-set-row__value { flex-basis: 100%; text-align: right; }
}
.club-settings__form--plain { margin-top: 16px; padding-bottom: 8px; }
.club-settings__form--plain .club-set-section { margin-bottom: 0; }
@media (max-width: 680px) { .club-settings__form { padding: 16px 14px 12px; } }
.club-settings__form .club-form-actions { border-top: 1px solid var(--border); padding-top: 14px; }
/* پروفایل: اسمِ نمایشی، بیو، لینک و حالتِ خصوصی */
.club-profile-hero__handle { margin: -2px 0 8px; color: var(--ink-faint); font-size: 0.86rem; }
.club-profile-hero__bio { padding: 4px 22px 0; }
.club-profile-hero__bio p { margin: 0 0 6px; white-space: pre-line; line-height: 1.9; color: var(--ink); overflow-wrap: anywhere; }
.club-profile-hero__link { display: inline-flex; align-items: center; gap: 5px; font-size: 0.9rem; font-weight: 600; }
.club-profile-private { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--ink-soft); }
@media (max-width: 680px) { .club-profile-hero__bio { padding: 4px 16px 0; } }

/* ---------- صفحه‌های دنبال‌شده: «بیشتر» ِ ستونِ ناوبری و تبِ «دنبال‌شده‌ها» ِ پروفایل ---------- */
.club-follow-list { list-style: none; margin: 0; padding: 4px 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.club-follow-list__row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; }
.club-follow-list__row + .club-follow-list__row { border-top: 1px solid var(--border); }
.club-follow-list__page { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.club-follow-list__page:hover strong { color: var(--club-600); }
.club-follow-list__av { flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; }
.club-follow-list__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.club-follow-list__text strong { font-size: 0.97rem; color: var(--club-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.club-follow-list__text small { color: var(--ink-faint); font-size: 0.82rem; }
.club-follow-list__row .club-follow-form { flex: none; margin: 0; }
@media (max-width: 680px) { .club-follow-list__row { padding: 10px 12px; } }
@media (max-width: 560px) { .club-profile-tabs .club-feed-tab { padding-inline: 10px; } }

/* ---------- بنرِ پروفایل (۴ به ۱) ---------- */
.club-profile-hero__cover--img { height: auto; aspect-ratio: 4 / 1; max-height: 220px; background: var(--club-100); }
.club-profile-hero__cover--img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.club-banner-field { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.club-banner-field__head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.club-banner-field__head .field-hint { margin: 0; }
.club-banner-field__preview {
  position: relative; aspect-ratio: 4 / 1; border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--border); background: var(--club-100);
}
.club-banner-field__preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.club-banner-field__default {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 18% 120%, rgba(255, 255, 255, 0.28) 0 38%, transparent 39%),
    radial-gradient(circle at 92% -30%, rgba(255, 255, 255, 0.18) 0 34%, transparent 35%),
    linear-gradient(120deg, var(--club-600), var(--club-500) 55%, var(--club-400));
}
.club-banner-field__default[hidden], .club-banner-field__preview img[hidden] { display: none; }
.club-banner-field .club-avatar-field__actions { margin-top: 10px; }

/* ============================================================
   اکسپلور (/club/explore) — مثلِ Explore ِ اینستاگرام: بدونِ نوارِ بالا، ستونِ آیکون‌ها سمتِ راست که با
   بردنِ موس باز می‌شه، جستجو بالای صفحه و شبکه‌ی ۳تاییِ پرسش‌ها (روی گوشی ۲تایی و نوارِ آیکون‌ها پایین).
   ============================================================ */
body.theme-club.club-xpage { background: #fff; --bg: #fff; padding-top: 0; }
html:has(body.club-xpage) { background: #fff; }
body.club-xpage main { max-width: none; padding: 0; }
body.club-xpage .flash-wrap { max-width: 720px; margin: 12px auto 0; padding: 0 16px; }
.club-x { --xrail: 76px; min-height: 100vh; padding-right: var(--xrail); }
.club-x__main { padding: 22px 28px 48px; }
.club-xtabs, .club-xgrid, .club-xmore { max-width: none; }

/* ستونِ آیکون‌ها */
.club-xrail {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: var(--xrail);
  display: flex; flex-direction: column; gap: 6px; padding: 18px 12px 16px;
  background: #fff; border-left: 1px solid var(--border);
  transition: width .2s ease, box-shadow .2s ease;
}
.club-xrail:hover, .club-xrail:focus-within { width: 248px; box-shadow: -10px 0 30px rgba(11, 28, 58, .10); }
.club-xrail__logo { display: flex; align-items: center; gap: 12px; padding: 6px 10px; margin-bottom: 22px; text-decoration: none; color: var(--club-ink); }
.club-xrail__logo img { flex: none; width: 32px; height: 32px; border-radius: 50%; }
.club-xrail__brand { font-size: 1.15rem; direction: ltr; }
.club-xrail__brand strong + strong { color: var(--club-500); }
.club-xrail__list { display: flex; flex-direction: column; gap: 4px; }
.club-xrail__item {
  display: flex; align-items: center; gap: 16px; height: 50px; padding: 0 13px; border-radius: 12px;
  color: var(--club-ink); text-decoration: none; white-space: nowrap; cursor: pointer; list-style: none;
}
.club-xrail__item::-webkit-details-marker { display: none; }
.club-xrail__item:hover { background: var(--club-050); }
.club-xrail__item.is-active { font-weight: 800; }
.club-xrail__item.is-active .club-navrail__icon { stroke-width: 2.4; }
.club-xrail .club-navrail__icon { flex: none; width: 26px; height: 26px; }
.club-xrail__icon { position: relative; flex: none; display: grid; place-items: center; width: 26px; height: 26px; }
.club-xrail__me .club-avatar { --av-size: 26px; }
.club-xrail__badge {
  position: absolute; top: -6px; left: -8px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  background: var(--danger); color: #fff; font-size: .7rem; font-weight: 700; display: grid; place-items: center;
  border: 2px solid #fff;
}
.club-xrail__label { font-size: 1rem; opacity: 0; transition: opacity .15s ease; pointer-events: none; }
.club-xrail:hover .club-xrail__label, .club-xrail:focus-within .club-xrail__label { opacity: 1; transition-delay: .06s; }
.club-xrail__more { margin-top: auto; position: relative; }
.club-xrail__more[open] > summary { font-weight: 700; }
.club-xrail__menu {
  position: absolute; bottom: calc(100% + 8px); right: 0; width: 250px; padding: 8px;
  background: #fff; border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 12px 34px rgba(11, 28, 58, .16);
  display: flex; flex-direction: column;
}
.club-xrail__menu a {
  display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px;
  color: var(--club-ink); text-decoration: none; font-size: .95rem;
}
.club-xrail__menu a:hover { background: var(--club-050); }
.club-xrail__menu a.is-danger { color: var(--danger); border-top: 1px solid var(--border); border-radius: 0 0 10px 10px; margin-top: 4px; }
.club-xrail__menu .club-navrail__icon { width: 20px; height: 20px; }

/* جستجو و تب‌ها */
.club-xsearch {
  position: relative; display: flex; align-items: center; max-width: 620px; margin: 0 auto 30px;
  background: #eff1f4; border-radius: 999px; padding: 0 18px; height: 46px; color: var(--ink-faint);
}
.club-xsearch:focus-within { background: #fff; box-shadow: 0 0 0 2px var(--club-400); }
.club-xsearch svg { flex: none; }
.club-xsearch input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none; box-shadow: none;
  padding: 0 10px; height: 100%; font: inherit; font-size: 1rem; color: var(--club-ink);
}
/* (body.theme-club input:focus یه حلقه‌ی روشن دورِ خودِ input می‌ذاشت که حلقه‌ی کادر رو می‌برید) */
body.theme-club .club-xsearch input:focus { box-shadow: none; outline: none; background: transparent; border: 0; }
.club-xtabs { display: flex; gap: 18px; margin: 0 0 12px; }
.club-xtabs__tab { color: var(--ink-faint); font-weight: 700; font-size: 1.02rem; text-decoration: none; }
.club-xtabs__tab:hover { color: var(--ink-soft); }
.club-xtabs__tab.is-active { color: var(--club-ink); }

/* شبکه‌ی پرسش‌ها (چیدمانِ آجریِ مرتب): هر نوعِ پرسش یه ارتفاعِ ثابت داره — متن، لینک، عکس‌دار، و نظرسنجی
   به تعدادِ گزینه‌هاش — مستقل از عرضِ صفحه. شبکه ردیف‌های ۱۰ پیکسلی داره و هر کاشی چند ردیف رو می‌گیره
   (grid-row-end: span N؛ فاصله‌ی زیرِ هر کاشی با margin). ستون و ردیفِ شروعِ هر کاشی رو club_explore.js
   تعیین می‌کنه: به ترتیبِ رتبه، هر کاشی زیرِ کوتاه‌ترین ستون — پس رتبه‌ی بالاتر همیشه بالاتره. */
.club-xgrid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 10px; grid-auto-flow: row;
  column-gap: 12px; row-gap: 0;
}
.club-xtile {
  position: relative; display: flex; flex-direction: column; overflow: hidden; margin-bottom: 12px;
  grid-row-end: span 25; padding: 18px; gap: 10px; border-radius: 14px;
  background: #fff; border: 1px solid var(--border); color: var(--club-ink); text-decoration: none;
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.club-xtile:hover { border-color: var(--club-200); box-shadow: 0 8px 24px rgba(11, 28, 58, .09); transform: translateY(-1px); }
.club-xtile:hover .club-xtile__title { color: var(--club-700); }
.club-xtile:focus-visible { outline: 3px solid var(--club-500); outline-offset: 2px; }
.club-xtile__head { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; min-width: 0; font-size: .82rem; color: var(--ink-faint); }
.club-xtile__av { flex: none; width: 24px; height: 24px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; }
.club-xtile__handle { font-weight: 700; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.club-xtile__badge { flex: none; margin-inline-start: auto; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--club-700); background: var(--club-050); }
.club-xtile__body {
  position: relative; z-index: 1; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; overflow: hidden;
  /* اگه متن به تهِ جای خالی رسید، خطِ آخر محو می‌شه (به‌جای اینکه نصفه بریده بشه) */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.6em), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 1.6em), transparent);
}
.club-xtile__title {
  font-size: 1.1rem; line-height: 1.65; font-weight: 800; transition: color .15s ease;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: none;
}
.club-xtile__excerpt {
  font-size: .92rem; line-height: 1.8; color: var(--ink-soft);
}
.club-xtile__link { font-size: .88rem; font-weight: 700; color: var(--club-700); }
.club-xtile__poll { display: flex; flex-direction: column; gap: 6px; }
.club-xtile__poll span {
  flex: none; height: 34px; line-height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border); background: #f7f9fb;
  font-size: .86rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.club-xtile__poll small { color: var(--ink-faint); font-size: .78rem; }
.club-xtile__stats {
  position: relative; z-index: 1; flex: none; display: flex; align-items: center; gap: 16px;
  padding-top: 10px; border-top: 1px solid var(--border); font-size: .85rem; font-weight: 700; color: var(--ink-soft);
}
.club-xtile__stats > span { display: inline-flex; align-items: center; gap: 5px; }
.club-xtile__stats > span.is-accepted { color: var(--club-green); }
/* عکس‌دار: عکس کلِ کاشی، سرتیتر و آمار روی عکس */
.club-xtile--img { border: 0; color: #fff; justify-content: space-between; }
.club-xtile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.club-xtile--img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .3) 45%, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, .3) 100%);
}
.club-xtile--img .club-xtile__head, .club-xtile--img .club-xtile__handle { color: #fff; }
.club-xtile--img .club-xtile__badge { color: #fff; background: rgba(0, 0, 0, .35); }
.club-xtile--img .club-xtile__body { justify-content: flex-end; -webkit-mask-image: none; mask-image: none; }
.club-xtile--img .club-xtile__title { text-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.club-xtile--img:hover .club-xtile__title { color: #fff; }
.club-xtile--img .club-xtile__stats { color: #fff; border-top-color: rgba(255, 255, 255, .25); }
.club-xtile--img .club-xtile__stats > span.is-accepted { color: #86efac; }
.club-xmore { display: block; width: max-content; margin: 26px auto 0; padding: 10px 22px; border-radius: 999px; background: var(--club-050); color: var(--club-700); font-weight: 700; text-decoration: none; }

@media (max-width: 1100px) {
  .club-x__main { padding: 18px 18px 40px; }
}
/* کاشی‌ها باریک‌تر می‌شن: کمی بلندتر (۴ به ۳) تا عنوان و آمار جا بشن */
/* ارتفاعِ هر نوع (دسکتاپ؛ هر ردیف = ۱۰px، منهای ۱۲px فاصله):
   متن ۲۳۸ · لینک ۱۸۸ · عکس‌دار ۳۲۸ · نظرسنجی ۲۳۸ تا ۳۹۸ (۲ تا ۶ گزینه، هر گزینه ۴۰px) */
.club-xtile--h-text { grid-row-end: span 25; }
.club-xtile--h-link { grid-row-end: span 20; }
.club-xtile--h-img { grid-row-end: span 34; }
.club-xtile--h-poll2 { grid-row-end: span 25; }
.club-xtile--h-poll3 { grid-row-end: span 29; }
.club-xtile--h-poll4 { grid-row-end: span 33; }
.club-xtile--h-poll5 { grid-row-end: span 37; }
.club-xtile--h-poll6 { grid-row-end: span 41; }
/* لپ‌تاپ‌های کوچیک: کاشی‌های سه‌تایی خیلی باریک می‌شن، پس دوتایی */
@media (min-width: 761px) and (max-width: 999px) {
  .club-xgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* روی گوشی: ستونِ آیکون‌ها می‌شه نوارِ پایینِ صفحه (فقط آیکون‌های اصلی) و شبکه ۲تایی */
@media (max-width: 760px) {
  .club-x { padding-right: 0; padding-bottom: 64px; }
  .club-x__main { padding: 12px 10px 24px; }
  .club-xrail, .club-xrail:hover, .club-xrail:focus-within {
    top: auto; bottom: 0; left: 0; width: auto; height: 58px; padding: 0 6px; flex-direction: row; gap: 0;
    border-left: 0; border-top: 1px solid var(--border); box-shadow: none;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .club-xrail__logo, .club-xrail__more, .club-xrail__item--wide { display: none; }
  .club-xrail__list { flex: 1; flex-direction: row; justify-content: space-around; align-items: center; }
  .club-xrail__item { height: 48px; padding: 0 14px; }
  .club-xrail__label { display: none; }
  .club-xsearch { margin-bottom: 16px; height: 42px; }
  .club-xtabs { margin-right: 4px; }
  .club-xgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; }
  .club-xtile { margin-bottom: 8px; padding: 11px; gap: 7px; border-radius: 12px; }
  /* گوشی: متن ۲۰۲ · لینک ۱۷۲ · عکس‌دار ۲۵۲ · نظرسنجی ۲۱۲ تا ۳۴۲ */
  .club-xtile--h-text { grid-row-end: span 21; }
  .club-xtile--h-link { grid-row-end: span 18; }
  .club-xtile--h-img { grid-row-end: span 26; }
  .club-xtile--h-poll2 { grid-row-end: span 22; }
  .club-xtile--h-poll3 { grid-row-end: span 25; }
  .club-xtile--h-poll4 { grid-row-end: span 29; }
  .club-xtile--h-poll5 { grid-row-end: span 32; }
  .club-xtile--h-poll6 { grid-row-end: span 35; }
  .club-xtile__head { font-size: .72rem; gap: 4px; }
  .club-xtile__av { width: 20px; height: 20px; }
  .club-xtile__badge { width: 24px; height: 24px; }
  .club-xtile__title { font-size: .92rem; line-height: 1.6; }
  .club-xtile__excerpt { font-size: .8rem; line-height: 1.7; }
  .club-xtile__poll { gap: 5px; }
  .club-xtile__poll span { height: 28px; line-height: 26px; padding: 0 10px; font-size: .76rem; }
  .club-xtile__link { font-size: .78rem; }
  .club-xtile__stats { gap: 10px; padding-top: 7px; font-size: .74rem; }
  .club-xtile__stats svg { width: 14px; height: 14px; }
}
/* نظرسنجی: همه‌ی گزینه‌ها کامل دیده می‌شن (ارتفاعِ بالا برای عنوانِ یک‌خطی؛ club_explore.js ← fitPolls اگه عنوان
   دوخطی بود کاشی رو بلندتر می‌کنه)، پس محوِ پایین لازم نیست */
.club-xtile--poll .club-xtile__body { -webkit-mask-image: none; mask-image: none; }
.club-xtile--poll .club-xtile__title { -webkit-line-clamp: 2; }

/* ---------- اکسپلور: پس‌زمینه‌ی صفحه خاکستری-آبیِ خیلی روشن و کاشی‌ها سفید با سایه‌ی نرم؛
   هر نوعِ پرسش یه رنگِ ملایمِ خودش رو بالای کاشی داره (متن آبی، نظرسنجی بنفش، لینک سبز) و نوارِ آمار
   پایینِ کاشی یه نوارِ کم‌رنگِ جداست. ---------- */
body.theme-club.club-xpage { background: #f3f6f9; --bg: #f3f6f9; }
html:has(body.club-xpage) { background: #f3f6f9; }
.club-xrail { background: #fff; }
.club-xsearch { background: #fff; border: 1px solid #e3e8ef; box-shadow: 0 1px 2px rgba(11, 28, 58, .04); }
/* پس‌زمینه‌ی همه‌ی کاشی‌ها سفیده؛ رنگِ هر نوع فقط توی نشانِ گوشه، حاشیه‌ی گزینه‌ها و دامنه‌ی لینک */
.club-xtile--text {
  --h: 38; --s: 55%;
  background: #fff;
  border-color: #e4e9f0;
  box-shadow: 0 1px 2px rgba(11, 28, 58, .05);
}
.club-xtile--poll { --h: 205; --s: 70%; }
.club-xtile--link { --h: 168; --s: 42%; }
.club-xtile--text .club-xtile__badge { color: hsl(var(--h) 50% 36%); background: hsl(var(--h) var(--s) 93%); }
.club-xtile--poll .club-xtile__poll span { background: #fff; border-color: hsl(var(--h) 40% 89%); }
.club-xtile--link .club-xtile__link { color: hsl(var(--h) 60% 28%); }
.club-xtile--text .club-xtile__stats {
  margin: 0 calc(-1 * 18px) calc(-1 * 18px); padding: 11px 18px 12px;
  background: #fff; border-top-color: #edf1f5;
}
.club-xtile--text:hover { border-color: var(--club-200); }
@media (max-width: 760px) {
  .club-xtile--text .club-xtile__stats { margin: 0 -11px -11px; padding: 8px 11px 9px; }
}

/* نظرسنجیِ اکسپلور: هر گزینه به نسبتِ رأی‌هاش از سمتِ راست پر می‌شه (--p)، گزینه‌ی جلوتر پررنگ‌تر */
.club-xtile--poll .club-xtile__poll span {
  background: linear-gradient(to left, hsl(var(--h) 70% 91%) var(--p, 0%), #fff var(--p, 0%));
}
.club-xtile--poll .club-xtile__poll span.is-top {
  background: linear-gradient(to left, hsl(var(--h) 72% 84%) var(--p, 0%), #fff var(--p, 0%));
  border-color: hsl(var(--h) 55% 80%);
}

/* ---------- «باهم کلاب چطور کار می‌کنه؟» (/club/how، club/how.html) ---------- */
.club-guide { display: flex; flex-direction: column; gap: 18px; padding-bottom: 32px; }
.club-guide__hero {
  position: relative; overflow: hidden;
  padding: 34px 32px 24px; border-radius: 22px; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, #3cb6f2 0%, var(--club-600) 48%, #0f4c74 100%);
  box-shadow: 0 18px 40px -22px rgba(15, 76, 116, .7);
}
.club-guide__hero::after {
  content: ""; position: absolute; inset: auto -60px -90px auto; width: 260px; height: 260px;
  border-radius: 50%; background: rgba(255, 255, 255, .08); pointer-events: none;
}
.club-guide__hero::before {
  content: ""; position: absolute; inset: -70px auto auto -40px; width: 180px; height: 180px;
  border-radius: 50%; background: rgba(255, 255, 255, .06); pointer-events: none;
}
.club-guide__eyebrow {
  display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: .78rem; font-weight: 700;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .25);
}
body.theme-club .club-guide__hero h1 { color: #fff; font-size: 1.9rem; font-weight: 900; margin: 14px 0 10px; line-height: 1.4; }
.club-guide__hero p { color: rgba(255, 255, 255, .92); font-size: 1rem; line-height: 2; margin: 0; max-width: 640px; }
.club-guide__hero strong { color: #fff; }
.club-guide__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; position: relative; z-index: 1; }
.club-guide__hero .btn--club { background: #fff; color: var(--club-700); border-color: #fff; }
.club-guide__hero .btn--club:hover { background: var(--club-050); }
.club-guide__hero .btn--secondary { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .55); }
.club-guide__hero .btn--secondary:hover { background: rgba(255, 255, 255, .12); }
.club-guide__toc {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .18); position: relative; z-index: 1;
}
.club-guide__toc a {
  color: #fff; text-decoration: none; font-size: .82rem; padding: 5px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .1); transition: background .15s;
}
.club-guide__toc a:hover { background: rgba(255, 255, 255, .22); }

.club-guide__section {
  background: #fff; border: 1px solid #e4e9f0; border-radius: 18px; padding: 26px 26px 24px;
  scroll-margin-top: 90px;
}
body.theme-club .club-guide__section h2 {
  font-size: 1.25rem; font-weight: 800; color: var(--club-ink); margin: 0 0 14px;
  display: flex; align-items: center; gap: 10px;
}
body.theme-club .club-guide__section h2::before {
  content: ""; width: 6px; height: 22px; border-radius: 3px; background: linear-gradient(var(--club-400), var(--club-600));
}
.club-guide__lead { color: var(--ink-soft); line-height: 2; margin: -4px 0 16px; }
.club-guide__note {
  margin: 16px 0 0; padding: 12px 16px; border-radius: 12px; background: var(--club-050);
  color: var(--ink-soft); font-size: .9rem; line-height: 1.9;
}
.club-guide a:not(.btn) { color: var(--club-600); font-weight: 600; }
.club-guide__hero a:not(.btn) { color: #fff; }

.club-guide__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; counter-reset: none; }
.club-guide__steps li {
  position: relative; padding: 18px 16px 16px; border-radius: 14px; background: linear-gradient(180deg, var(--club-050), #fff);
  border: 1px solid var(--club-100);
}
.club-guide__steps strong { display: block; color: var(--club-ink); font-size: 1rem; margin: 10px 0 6px; }
.club-guide__steps p { margin: 0; color: var(--ink-soft); font-size: .88rem; line-height: 1.85; }
.club-guide__num {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 11px;
  background: var(--club-600); color: #fff; font-weight: 800; font-size: 1rem;
  box-shadow: 0 6px 14px -6px rgba(24, 123, 179, .8);
}

.club-guide__cards { display: grid; gap: 12px; }
.club-guide__cards--3 { grid-template-columns: repeat(3, 1fr); }
.club-guide__cards--2 { grid-template-columns: repeat(2, 1fr); }
.club-guide__card {
  padding: 18px; border-radius: 14px; border: 1px solid #edf1f5; background: #fbfcfe;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.club-guide__card:hover { border-color: var(--club-200); box-shadow: 0 10px 24px -18px rgba(19, 95, 143, .55); transform: translateY(-1px); }
.club-guide__card--row { display: flex; gap: 14px; align-items: flex-start; }
.club-guide__card--wide { margin-top: 12px; }
body.theme-club .club-guide__card h3 { font-size: 1rem; font-weight: 800; margin: 10px 0 6px; color: var(--club-ink); }
.club-guide__card--row h3 { margin-top: 2px !important; }
.club-guide__card p { margin: 0; color: var(--ink-soft); font-size: .88rem; line-height: 1.9; }
.club-guide__icon {
  display: inline-grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px;
  background: var(--club-100); color: var(--club-700);
}
.club-guide__icon--blue { background: #e0f2fe; color: var(--club-verified, #1d9bf0); }
.club-guide__icon--lg { width: 52px; height: 52px; border-radius: 15px; }

.club-guide__list { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.club-guide__list li {
  position: relative; padding-right: 22px; color: var(--ink-soft); font-size: .92rem; line-height: 1.95;
}
.club-guide__list li::before {
  content: ""; position: absolute; right: 4px; top: .8em; width: 7px; height: 7px; border-radius: 50%; background: var(--club-400);
}
.club-guide__list strong { color: var(--club-ink); }
.club-guide__privacy { display: flex; gap: 18px; align-items: flex-start; }
.club-guide__privacy .club-guide__list { margin-top: 0; }

.club-guide__karma {
  display: flex; gap: 14px; align-items: center; margin-top: 14px; padding: 14px 18px; border-radius: 14px;
  background: linear-gradient(90deg, #f0fdf4, #fff); border: 1px solid var(--club-green-border);
  color: var(--ink-soft); font-size: .9rem; line-height: 1.9;
}
.club-guide__karma > strong {
  flex: none; padding: 4px 12px; border-radius: 999px; background: var(--club-green); color: #fff; font-size: .82rem;
}
.club-guide__karma b { color: var(--club-green); font-weight: 800; }

.club-guide__faq { display: flex; flex-direction: column; gap: 8px; }
.club-guide__faq details { border: 1px solid #edf1f5; border-radius: 12px; background: #fbfcfe; transition: background .15s; }
.club-guide__faq details[open] { background: #fff; border-color: var(--club-200); }
.club-guide__faq summary {
  cursor: pointer; list-style: none; padding: 14px 16px; font-weight: 700; color: var(--club-ink);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.club-guide__faq summary::-webkit-details-marker { display: none; }
.club-guide__faq summary::after {
  content: "+"; flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px;
  background: var(--club-100); color: var(--club-700); font-weight: 800; transition: transform .2s;
}
.club-guide__faq details[open] summary::after { transform: rotate(45deg); }
.club-guide__faq details p { margin: 0; padding: 0 16px 14px; color: var(--ink-soft); line-height: 1.95; font-size: .92rem; }

.club-guide__end {
  text-align: center; padding: 30px 24px; border-radius: 18px;
  background: linear-gradient(180deg, var(--club-050), #fff); border: 1px dashed var(--club-200);
}
body.theme-club .club-guide__end h2 { margin: 0 0 6px; font-size: 1.3rem; font-weight: 900; color: var(--club-ink); }
.club-guide__end p { color: var(--ink-soft); margin: 0; }
.club-guide__end .club-guide__cta { justify-content: center; }

@media (max-width: 900px) {
  .club-guide__steps { grid-template-columns: repeat(2, 1fr); }
  .club-guide__cards--3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .club-guide { gap: 14px; }
  .club-guide__hero { padding: 26px 20px 20px; border-radius: 18px; }
  body.theme-club .club-guide__hero h1 { font-size: 1.5rem; }
  .club-guide__section { padding: 20px 16px; border-radius: 16px; }
  .club-guide__steps, .club-guide__cards--3, .club-guide__cards--2 { grid-template-columns: 1fr; }
  .club-guide__privacy { flex-direction: column; gap: 12px; }
  .club-guide__karma { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ---------- «قوانینِ باهم کلاب» (/club/rules، club/rules.html) — روی همون پایه‌ی .club-guide ---------- */
.club-guide__hero--rules {
  background: radial-gradient(120% 140% at 100% 0%, #2f9fd8 0%, #165f8d 50%, #0d2f49 100%);
}
.club-guide__values { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; position: relative; z-index: 1; }
.club-guide__values span {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 12px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); font-size: .85rem; font-weight: 600;
}
.club-rule__head { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
body.theme-club .club-rule__head h2 { margin: 0 0 2px; }
body.theme-club .club-rule__head h2::before { display: none; }
.club-rule__sum { margin: 0; color: var(--ink-faint); font-size: .9rem; }
.club-rule__num {
  flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px;
  background: linear-gradient(135deg, var(--club-500), var(--club-700)); color: #fff; font-size: 1.3rem; font-weight: 900;
  box-shadow: 0 8px 18px -8px rgba(19, 95, 143, .8);
}
.club-guide__callout {
  display: flex; gap: 14px; align-items: flex-start; margin-top: 14px; padding: 14px 16px; border-radius: 14px;
  background: var(--club-050); border: 1px solid var(--club-100);
}
.club-guide__callout p { margin: 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.95; }
.club-guide__callout strong { color: var(--club-ink); }
/* امتیاز روی صفحه‌ی قوانین: آبی و ساده (صفحه‌ی راهنما سبز می‌مونه) */
.club-guide__karma--plain { background: var(--club-050); border-color: var(--club-100); }
.club-guide__karma--plain > strong { background: var(--club-600); }
.club-guide__karma--plain b { color: var(--club-700); }

.club-guide__dos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.club-guide__do, .club-guide__dont { padding: 16px 18px; border-radius: 14px; }
.club-guide__do { background: #fff; border: 1px solid #e4e9f0; }
.club-guide__dont { background: #fff; border: 1px solid #e4e9f0; border-top: 3px solid #ef4444; }
.club-guide__do { border-top: 3px solid var(--club-500); }
body.theme-club .club-guide__dos h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: .98rem; font-weight: 800; }
body.theme-club .club-guide__do h3 { color: var(--club-700); }
body.theme-club .club-guide__dont h3 { color: #b91c1c; }
.club-guide__dos ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.club-guide__dos li { position: relative; padding-right: 18px; color: var(--ink-soft); font-size: .9rem; line-height: 1.9; }
.club-guide__dos li::before { content: ""; position: absolute; right: 2px; top: .8em; width: 6px; height: 6px; border-radius: 50%; }
.club-guide__do li::before { background: var(--club-400); }
.club-guide__dont li::before { background: #f87171; }

.club-guide__flow {
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; position: relative;
}
.club-guide__flow li {
  position: relative; padding: 16px; border-radius: 14px; background: #fbfcfe; border: 1px solid #edf1f5;
}
.club-guide__flow li:not(:last-child)::after {
  content: ""; position: absolute; top: 36px; left: -12px; width: 12px; height: 2px; background: var(--club-200);
}
.club-guide__flow strong { display: block; margin: 10px 0 4px; color: var(--club-ink); font-size: .98rem; }
.club-guide__flow p { margin: 0; color: var(--ink-soft); font-size: .86rem; line-height: 1.85; }

.club-guide__reasons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.club-guide__reason { padding: 14px 16px; border-radius: 12px; background: #fbfcfe; border: 1px solid #edf1f5; }
body.theme-club .club-guide__reason h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: .95rem; font-weight: 800; color: var(--club-ink); }
.club-guide__reason p { margin: 0; color: var(--ink-soft); font-size: .86rem; line-height: 1.85; }
.club-guide__urgent { padding: 1px 8px; border-radius: 999px; background: #fee2e2; color: #b91c1c; font-size: .72rem; font-weight: 800; }

@media (max-width: 900px) {
  .club-guide__flow { grid-template-columns: 1fr 1fr; }
  .club-guide__flow li:nth-child(2)::after { display: none; }
}
@media (max-width: 620px) {
  .club-guide__dos, .club-guide__reasons, .club-guide__flow { grid-template-columns: 1fr; }
  .club-guide__flow li::after { display: none; }
  .club-rule__num { width: 40px; height: 40px; font-size: 1.15rem; border-radius: 12px; }
}

/* ---------- صندوقِ اعلان‌ها (/club/notifications، club/notifications.html) ---------- */
.club-inbox { display: flex; flex-direction: column; gap: 14px; padding-bottom: 32px; }
.club-inbox__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
body.theme-club .club-inbox__title h1 { margin: 0; font-size: 1.6rem; font-weight: 900; color: var(--club-ink); }
.club-inbox__sub { margin: 4px 0 0; color: var(--ink-faint); font-size: .9rem; }
.club-inbox__actions { display: flex; align-items: center; gap: 6px; }
.club-inbox__actions form { margin: 0; }
.club-inbox__actions form[hidden] { display: none; }
.club-inbox__btn {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 999px;
  border: 0; background: var(--club-600); color: #fff; font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer;
  text-decoration: none; transition: background .15s;
}
.club-inbox__btn:hover { background: var(--club-700); color: #fff; }
.club-inbox__btn .club-menu__icon, .club-inbox__btn svg { color: currentColor; width: 18px; height: 18px; }
.club-inbox__btn--ghost { background: #fff; color: var(--club-700); border: 1px solid #e4e9f0; }
.club-inbox__btn--ghost:hover { background: var(--club-050); color: var(--club-700); }
.club-inbox__icon-btn {
  display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: #fff; border: 1px solid #e4e9f0; color: var(--ink-soft); transition: background .15s, color .15s;
}
.club-inbox__icon-btn:hover { background: var(--club-050); color: var(--club-700); }
.club-inbox__icon-btn svg { width: 19px; height: 19px; }
.club-inbox .club-inbox__more { position: relative; top: auto; inset-inline-end: auto; }
.club-inbox__more .club-menu-btn { width: 38px; height: 38px; }

.club-inbox__tabs { display: flex; gap: 4px; border-bottom: 1px solid #e4e9f0; }
.club-inbox__tab {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; margin-bottom: -1px;
  color: var(--ink-soft); font-weight: 700; font-size: .92rem; text-decoration: none; border-bottom: 2px solid transparent;
}
.club-inbox__tab:hover { color: var(--club-ink); }
.club-inbox__tab.is-active { color: var(--club-700); border-bottom-color: var(--club-600); }
.club-inbox__count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center;
  background: var(--club-600); color: #fff; font-size: .72rem; font-weight: 800;
}
.club-inbox__count[hidden] { display: none; }
.club-inbox__count--soft { background: #fff; color: var(--ink-soft); box-shadow: inset 0 0 0 1px #dbe3ec; }

.club-inbox__list { display: flex; flex-direction: column; gap: 18px; }
.club-inbox__group { display: flex; flex-direction: column; gap: 6px; }
body.theme-club .club-inbox__day { margin: 0 4px 2px; font-size: .8rem; font-weight: 800; color: var(--ink-faint); }
.club-notes {
  list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid #e4e9f0; border-radius: 16px; overflow: visible;
}
.club-note { position: relative; display: flex; align-items: center; border-top: 1px solid #edf1f5; transition: opacity .2s, transform .2s; }
.club-note:first-child { border-top: 0; }
.club-note:first-child .club-note__link { border-radius: 16px 16px 0 0; }
.club-note:last-child .club-note__link { border-radius: 0 0 16px 16px; }
.club-note:only-child .club-note__link { border-radius: 16px; }
.club-note.is-leaving { opacity: 0; transform: translateX(-12px); }
.club-note__link {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 14px 16px; padding-inline-end: 52px;
  color: inherit; text-decoration: none; transition: background .12s;
}
.club-note__link:hover { background: #f8fafc; }
.club-note.is-unread .club-note__link { background: var(--club-050); }
.club-note.is-unread .club-note__link:hover { background: var(--club-100); }
.club-note__icon {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: #f1f5f9; font-size: 1.05rem;
}
.club-note.is-unread .club-note__icon { background: #fff; box-shadow: 0 0 0 1px var(--club-100); }
.club-note__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.club-note__text { color: var(--ink-soft); font-size: .92rem; line-height: 1.8; overflow-wrap: anywhere; }
.club-note.is-unread .club-note__text { color: var(--club-ink); font-weight: 700; }
.club-note__meta { color: var(--ink-faint); font-size: .78rem; }
.club-note__meta .club-time { color: inherit; }
.club-note__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: transparent; }
.club-note.is-unread .club-note__dot { background: var(--club-600); }
.club-inbox .club-note__menu { position: absolute; top: 50%; inset-inline-end: 8px; transform: translateY(-50%); }
.club-note__menu .club-menu { min-width: 220px; }
.club-note__menu form, .club-inbox__more form { margin: 0; }
.club-note .club-note__if-read, .club-note.is-unread .club-note__if-unread { display: contents; }
.club-note .club-note__if-unread, .club-note.is-unread .club-note__if-read { display: none; }
.club-menu__item--danger, .club-menu__item--danger .club-menu__icon { color: #dc2626; }
.club-menu__item--danger:hover { background: #fef2f2; }
.club-menu__item[disabled] { opacity: .45; cursor: default; }
.club-menu__item[disabled]:hover { background: transparent; }

.club-inbox__pager { display: flex; justify-content: center; gap: 8px; }
.club-inbox__empty {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  padding: 44px 24px; background: #fff; border: 1px solid #e4e9f0; border-radius: 16px;
}
.club-inbox__empty-icon {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; margin-bottom: 6px;
  background: var(--club-050); color: var(--club-600);
}
.club-inbox__empty-icon svg { width: 26px; height: 26px; }
body.theme-club .club-inbox__empty h2 { margin: 0; font-size: 1.1rem; font-weight: 800; color: var(--club-ink); }
.club-inbox__empty p { margin: 0 0 10px; color: var(--ink-soft); font-size: .9rem; line-height: 1.9; max-width: 420px; }

@media (max-width: 620px) {
  body.theme-club .club-inbox__title h1 { font-size: 1.35rem; }
  .club-note__link { padding: 12px; padding-inline-end: 46px; gap: 10px; }
  .club-note__icon { width: 36px; height: 36px; }
  .club-inbox__tab { padding: 10px 10px; }
}

/* ---------- «صفحه‌ها» (/club/pages، club/index.html) — مثلِ Explore Communities ِ ردیت ---------- */
.club-pages { display: flex; flex-direction: column; gap: 8px; padding-bottom: 40px; }
/* عنوان + توضیح + دسته‌ها توی یه کادرِ سفید */
.club-pages__top {
  margin-bottom: 6px; padding: 18px 20px 16px; background: var(--surface, #fff);
  border: 1px solid var(--border); border-radius: 18px;
}
.club-pages__head { margin-bottom: 0; }
body.theme-club .club-pages__head h1 { margin: 0 0 6px; font-size: 1.6rem; font-weight: 900; color: var(--club-ink); }
.club-pages__head p { margin: 0; color: var(--ink-soft); font-size: .94rem; line-height: 1.9; }
.club-pages__lead--short { display: none; }
.club-pages__clubbers { display: inline-block; margin-inline-start: 6px; color: var(--ink-faint); font-size: .86rem; }
.club-pages__clubbers strong { color: var(--club-700); }

.club-chips { position: relative; border-bottom: 1px solid #e4e9f0; padding-bottom: 14px; margin-bottom: 6px; }
.club-pages__top .club-chips { margin: 14px 0 0; padding-bottom: 0; border-bottom: 0; }
.club-chips__track {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; padding: 2px 1px;
}
.club-chips__track::-webkit-scrollbar { display: none; }
.club-pchip {
  flex: none; display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px;
  border: 1px solid #dbe3ec; background: #fff; color: var(--club-ink); font-size: .9rem; font-weight: 700;
  text-decoration: none; white-space: nowrap; transition: background .12s, border-color .12s;
}
.club-pchip:hover { background: var(--club-050); border-color: var(--club-200); color: var(--club-ink); }
.club-pchip.is-active { background: var(--club-100); border-color: var(--club-200); color: var(--club-700); }
/* دکمه‌های چپ/راست: آبی، بدونِ هاله‌ی مات پشتشون */
.club-chips__arrow {
  position: absolute; top: 2px; width: 38px; height: 38px; border-radius: 50%; border: 0;
  background: var(--club-600); color: #fff; display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 2px 6px rgba(24, 123, 179, .28); transition: background .12s;
}
.club-chips__arrow:hover { background: var(--club-700); }
.club-chips__arrow[hidden] { display: none; }
.club-chips__arrow--next { left: 0; }
.club-chips__arrow--back { right: 0; }

.club-pages__section { padding-top: 18px; scroll-margin-top: 80px; }
body.theme-club .club-pages__title { margin: 0 0 12px; font-size: 1.2rem; font-weight: 800; color: var(--club-ink); }
.club-pages__title small { margin-inline-start: 4px; color: var(--ink-faint); font-size: .85rem; font-weight: 700; }
.club-pages__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.club-pages__item[hidden] { display: none; }
.club-pages__item { display: flex; }
.club-pcard {
  position: relative; flex: 1; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "link follow" "desc desc";
  gap: 8px 10px; align-items: start; padding: 14px; border-radius: 16px; background: #fff; border: 1px solid #e4e9f0;
  transition: border-color .12s, box-shadow .12s;
}
.club-pcard:hover { border-color: var(--club-200); box-shadow: 0 8px 22px -16px rgba(19, 95, 143, .5); }
.club-pcard__link { grid-area: link; display: flex; align-items: center; gap: 12px; min-width: 0; color: inherit; text-decoration: none; }
.club-pcard__link::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.club-pcard__av { flex: none; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; }
.club-pcard__av svg { width: 100%; height: 100%; }
.club-pcard__head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.club-pcard__name { font-size: 1rem; font-weight: 800; color: var(--club-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.club-pcard__meta { color: var(--ink-faint); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.club-pcard__follow { grid-area: follow; position: relative; z-index: 1; }
.club-pcard__follow .club-follow-form { margin: 0; }
.club-pcard__desc {
  grid-area: desc; margin: 0; color: var(--ink-soft); font-size: .86rem; line-height: 1.8;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.club-pages__more { display: flex; justify-content: center; margin-top: 14px; }
.club-pages__more-btn {
  display: inline-flex; align-items: center; height: 40px; padding: 0 20px; border-radius: 999px;
  background: #e6edf3; color: var(--club-ink); font-weight: 800; font-size: .9rem; text-decoration: none; transition: background .12s;
}
.club-pages__more-btn:hover { background: #dbe4ec; color: var(--club-ink); }
.club-pages__more-btn.is-loading { color: transparent; position: relative; pointer-events: none; }
.club-pages__more-btn.is-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid var(--club-200); border-top-color: var(--club-600); animation: club-ptr-spin .7s linear infinite;
}
.club-pages__empty { color: var(--ink-soft); }

@media (max-width: 620px) {
  body.theme-club .club-pages__head h1 { font-size: 1.4rem; }
  .club-pages__top { padding: 14px 14px 12px; border-radius: 16px; }
  .club-pages__lead--long { display: none; }
  .club-pages__lead--short { display: inline; }
  .club-pages__grid { grid-template-columns: 1fr; }
  /* گوشی: فلش‌ها کوچیک‌تر (روی چیپ‌ها می‌شینن؛ اسکرول با انگشت هم کار می‌کنه) */
  .club-chips__arrow { width: 32px; height: 32px; top: 5px; }
}

/* «درخواستِ صفحه‌ی تازه» (پایینِ /club/pages) */
.club-preq { background: #fff; border: 1px solid #e4e9f0; border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 18px; }
.club-preq__intro { display: flex; gap: 14px; align-items: flex-start; }
.club-preq__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--club-100); color: var(--club-700); }
body.theme-club .club-preq h3 { margin: 0 0 4px; font-size: 1rem; font-weight: 800; color: var(--club-ink); }
.club-preq__intro p { margin: 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.9; }
.club-preq__form { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; border-top: 1px solid #edf1f5; }
.club-preq__kinds { display: flex; gap: 8px; }
.club-preq__kind { position: relative; cursor: pointer; }
.club-preq__kind input { position: absolute; opacity: 0; pointer-events: none; }
.club-preq__kind span {
  display: inline-flex; align-items: center; height: 36px; padding: 0 18px; border-radius: 999px;
  border: 1px solid #dbe3ec; background: #fff; font-weight: 700; font-size: .9rem; color: var(--ink-soft);
}
.club-preq__kind input:checked + span { background: var(--club-100); border-color: var(--club-200); color: var(--club-700); }
.club-preq__kind input:focus-visible + span { outline: 2px solid var(--club-500); outline-offset: 2px; }
.club-preq__row { display: flex; gap: 10px; flex-wrap: wrap; }
.club-preq__field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.club-preq__field[hidden] { display: none; }
.club-preq__field--country { flex: 0 0 200px; }
.club-preq__field > span { font-size: .82rem; font-weight: 700; color: var(--ink-soft); }
.club-preq__field input, .club-preq__field select, .club-preq__field textarea { width: 100%; }
.club-preq__field textarea { min-height: 72px; resize: vertical; }
.club-preq__actions { display: flex; justify-content: flex-start; }
.club-preq__login { margin: 0; padding-top: 14px; border-top: 1px solid #edf1f5; color: var(--ink-soft); }
.club-preq__login a { color: var(--club-600); font-weight: 700; }
.club-preq__list { padding-top: 16px; border-top: 1px solid #edf1f5; }
.club-preq__list ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
.club-preq__item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid #f1f4f8; flex-wrap: wrap; }
.club-preq__item:first-child { border-top: 0; }
.club-preq__badge { flex: none; padding: 2px 10px; border-radius: 999px; background: #f1f5f9; color: var(--ink-soft); font-size: .74rem; font-weight: 800; }
.club-preq__name { flex: 1; min-width: 120px; }
.club-preq__name strong { color: var(--club-ink); }
.club-preq__name small { color: var(--ink-faint); margin-inline-start: 4px; }
.club-preq__count { color: var(--ink-faint); font-size: .82rem; }
.club-preq__item form { margin: 0; }
.club-preq__support {
  height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--club-200); background: #fff;
  color: var(--club-700); font: inherit; font-size: .82rem; font-weight: 800; cursor: pointer;
}
.club-preq__support:hover { background: var(--club-050); }
.club-preq__support.is-on { background: var(--club-600); border-color: var(--club-600); color: #fff; }
.club-preq__mine { font-size: .78rem; font-weight: 800; color: var(--club-600); }
@media (max-width: 620px) {
  .club-preq { padding: 16px; }
  .club-preq__field--country { flex: 1 1 100%; }
}

/* ---------- «کلابر شو»: نام‌های کاربریِ پیشنهادی و بررسیِ زنده (club_username.js) ---------- */
.club-uname { position: relative; }
.club-uname input { padding-left: 42px; padding-right: 42px; }  /* متنِ لاتین از چپ، فارسی از راست: آیکون همیشه سمتِ چپ */
[data-username-field] input[dir="auto"]:placeholder-shown { direction: rtl; }
.club-uname__state {
  position: absolute; top: 50%; left: 12px; transform: translateY(-50%); width: 20px; height: 20px;
  border-radius: 50%; display: grid; place-items: center; pointer-events: none;
}
[data-username-field].is-ok .club-uname__state { background: var(--club-green); }
[data-username-field].is-ok .club-uname__state::after {
  content: ""; width: 9px; height: 5px; border: solid #fff; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg);
}
[data-username-field].is-bad .club-uname__state { background: #dc2626; }
[data-username-field].is-bad .club-uname__state::after { content: "!"; color: #fff; font-weight: 900; font-size: .8rem; line-height: 1; }
[data-username-field].is-checking .club-uname__state { border: 2px solid var(--club-200); border-top-color: var(--club-600); animation: club-ptr-spin .7s linear infinite; }
[data-username-field].is-ok input { border-color: var(--club-green); }
[data-username-field].is-bad input { border-color: #dc2626; }
.club-uname__status { margin: 6px 0 0; min-height: 1.2em; font-size: .84rem; font-weight: 700; color: var(--ink-faint); }
[data-username-field].is-ok .club-uname__status { color: var(--club-green); }
[data-username-field].is-bad .club-uname__status { color: #dc2626; }
.club-uname__suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 8px; }
.club-uname__label { font-size: .84rem; font-weight: 700; color: var(--ink-soft); }
.club-uname__chips { display: contents; }
.club-uname__chip {
  height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid #dbe3ec; background: #fff; cursor: pointer;
  font: inherit; font-size: .86rem; font-weight: 700; color: var(--club-ink); transition: background .12s, border-color .12s;
}
.club-uname__chip:hover { background: var(--club-050); border-color: var(--club-200); }
.club-uname__chip.is-on { background: var(--club-100); border-color: var(--club-400); color: var(--club-700); }
.club-uname__refresh {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; border: 0;
  background: transparent; color: var(--club-600); font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer;
}
.club-uname__refresh:hover { background: var(--club-050); }
.club-uname__refresh.is-spinning svg { animation: club-ptr-spin .6s linear infinite; }

/* ============================================================
   روی گوشی (≤ ۷۶۰px): نوارِ پایینِ صفحه (club/_tabbar.html) جای ستونِ ناوبری و دکمه‌های نوارِ بالا رو می‌گیره
   و نوارِ بالا فقط جستجو داره. از چپ به راست: خانه، اکسپلور، صفحه‌ها، پستِ جدید، اعلان‌ها، پروفایل.
   ============================================================ */
.club-tabbar { display: none; }
@media (max-width: 760px) {
  .club-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    display: flex; align-items: center; justify-content: space-around;
    height: calc(56px + env(safe-area-inset-bottom)); padding: 0 4px env(safe-area-inset-bottom);
    background: rgba(255, 255, 255, .97); border-top: 1px solid var(--border);
    -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  }
  .club-tabbar__item {
    flex: 1; height: 56px; display: grid; place-items: center; color: #6b7785;
    text-decoration: none; -webkit-tap-highlight-color: transparent;
  }
  .club-tabbar__item .club-navrail__icon { width: 26px; height: 26px; stroke-width: 1.7; color: inherit; }
  /* صفحه‌ای که توشیم: آیکون تیره و خیلی ضخیم‌تر تا با یه نگاه معلوم باشه */
  .club-tabbar__item.is-active { color: var(--club-ink); }
  .club-tabbar__item.is-active .club-navrail__icon { stroke-width: 3; }
  .club-tabbar__item:active { transform: scale(.92); }
  /* «پستِ جدید»: فقط یه + ساده، مثلِ بقیه‌ی آیکون‌ها (بی‌رنگ و بی‌قاب؛ فعال = تیره و ضخیم) */
  .club-tabbar__plus { display: grid; place-items: center; color: inherit; }
  .club-tabbar__plus .club-navrail__icon { width: 29px; height: 29px; }
  .club-tabbar__icon { position: relative; display: grid; place-items: center; }
  .club-tabbar__badge { position: absolute; top: -6px; left: 14px; }
  .club-tabbar__avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 2px solid transparent; }
  .club-tabbar__item.is-active .club-tabbar__avatar { border-color: var(--club-ink); box-shadow: 0 0 0 1px var(--club-ink); }

  /* کارتِ «سؤال یا تجربه‌ای دارید؟» (ستونِ کناری) روی گوشی لازم نیست — دکمه‌ی + توی نوارِ پایین هست */
  .club-side-card--cta { display: none; }

  /* جا برای نوارِ پایین */
  body.theme-club { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
  .club-toast { bottom: calc(72px + env(safe-area-inset-bottom)); }

  /* ستونِ ناوبری و دکمه‌ی جمع‌کردنش کلاً نیست */
  .club-shell > .club-rail--nav, .club-rail--nav, .club-railtoggle { display: none !important; }

  /* نوارِ بالا: فقط جستجو (بدونِ لوگو، منوی همبرگری، زنگوله، پستِ جدید و حساب) */
  .navbar--club .navbar__toggle, .navbar--club .navbar__brand-group, .navbar--club .navbar__links,
  .navbar--club .navbar__actions { display: none !important; }
  .navbar--club .navbar__inner { min-height: 0; padding-top: 8px; padding-bottom: 8px; }
  .navbar--club .club-topsearch { order: 0; flex: 1 1 100%; max-width: none; margin: 0; }

  /* اکسپلور: ستون/نوارِ آیکون‌های خودش جاش رو به همین نوار می‌ده */
  .club-xrail, .club-xrail:hover, .club-xrail:focus-within { display: none; }
  .club-x { padding-bottom: 0; }
}

/* جستجو روی گوشی: پنجره‌ی پیشنهادها تمامِ عرض، درست زیرِ نوارِ بالا و بالای نوارِ پایین */
@media (max-width: 760px) {
  .club-search-pop {
    position: fixed; top: var(--club-nav-h, 64px); inset-inline: 0; border-radius: 0 0 18px 18px; border-width: 0 0 1px;
    max-height: calc(100dvh - var(--club-nav-h, 64px) - 56px - env(safe-area-inset-bottom));
  }
  .club-topsearch__scope { max-width: 42%; }
  /* اکسپلور نوارِ بالا نداره: پنجره زیرِ کادرِ خودِ صفحه */
  .club-xsearch .club-search-pop { position: absolute; top: calc(100% + 8px); border-radius: 18px; border-width: 1px; max-height: 60vh; }
}

/* ============================================================
   آموزشِ اولیه — ۱) صفحه‌ی خوش‌آمد (club/welcome.html): انتخابِ شهرها/کشورها و موضوع‌ها برای دنبال کردن
   ============================================================ */
.club-welcome { max-width: 860px; margin: 0 auto; padding: 28px 16px 0; }
.club-welcome__head { text-align: center; margin-bottom: 26px; }
.club-welcome__step {
  display: inline-block; margin-bottom: 10px; padding: 4px 12px; border-radius: 999px;
  background: var(--club-050); color: var(--club-700); font-size: .78rem; font-weight: 800;
}
.club-welcome__head h1 { margin: 0 0 10px; font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 900; color: var(--club-ink); }
.club-welcome__head p { margin: 0 auto; max-width: 560px; color: var(--ink-soft); line-height: 1.9; }
.club-welcome__sec { margin-bottom: 22px; }
.club-welcome__sec h2 { margin: 0 0 10px; font-size: .95rem; font-weight: 800; color: var(--ink); }
.club-welcome__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.club-welcome__chips--results:empty { display: none; }
.club-welcome__chips--results { margin-top: 10px; }
.club-pick {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 42px;
  padding: 5px 14px 5px 6px; padding-inline-start: 6px; padding-inline-end: 14px;
  border: 1.5px solid var(--border); border-radius: 999px; background: var(--surface);
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: border-color .12s ease, background .12s ease, transform .12s ease;
}
.club-pick:hover { border-color: var(--club-300, #9fd5f3); }
.club-pick:active { transform: scale(.97); }
.club-pick input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.club-pick__av { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; }
.club-pick__av--pin { background: var(--club-050); color: var(--club-600); }
.club-pick__name { font-size: .88rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
.club-pick__name small { font-weight: 500; color: var(--ink-faint); }
.club-pick__check {
  display: none; width: 20px; height: 20px; border-radius: 50%; place-items: center;
  background: var(--club-600); color: #fff; margin-inline-start: 2px;
}
.club-pick.is-checked, .club-pick:has(input:checked) { border-color: var(--club-600); background: var(--club-050); }
.club-pick.is-checked .club-pick__check, .club-pick:has(input:checked) .club-pick__check { display: grid; }
.club-pick:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--club-100); }
.club-welcome__find {
  display: flex; align-items: center; gap: 8px; margin-top: 12px; max-width: 420px;
  padding: 0 14px; height: 44px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--ink-faint);
}
.club-welcome__find[hidden] { display: none; }
.club-welcome__find .club-navrail__icon { width: 18px; height: 18px; }
body.theme-club .club-welcome__find input, body.theme-club .club-welcome__find input:focus {
  flex: 1; min-width: 0; border: 0; outline: none; box-shadow: none; background: transparent; padding: 0; font: inherit; font-size: .9rem; color: var(--ink);
}
.club-welcome__find:focus-within { border-color: var(--club-500); box-shadow: 0 0 0 3px var(--club-050); }
.club-welcome__none { margin: 0; color: var(--ink-faint); font-size: .85rem; }
.club-welcome__bar {
  position: sticky; bottom: 0; z-index: 20; margin: 28px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: rgba(255, 255, 255, .96); border-top: 1px solid var(--border);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.club-welcome__count { margin: 0; font-size: .88rem; font-weight: 700; color: var(--club-700); }
.club-welcome__count.is-empty { color: var(--ink-faint); font-weight: 500; }
.club-welcome__actions { display: flex; gap: 8px; margin-inline-start: auto; }
.club-welcome__actions .btn { min-width: 110px; }
@media (max-width: 760px) {
  .club-welcome { padding-top: 18px; }
  .club-welcome__bar { bottom: calc(56px + env(safe-area-inset-bottom)); padding-bottom: 12px; }
  .club-welcome__count { flex: 1 1 100%; text-align: center; }
  .club-welcome__actions { flex: 1 1 100%; }
  .club-welcome__actions .btn { flex: 1; }
}
.club-guide__cta--again { margin-top: 10px; }

/* ============================================================
   آموزشِ اولیه — ۲) راهنمای سریعِ خانه (club_tour.js): صفحه تیره، یه بخش روشن، کارتِ توضیح کنارش
   ============================================================ */
.club-tour { position: fixed; inset: 0; z-index: 3000; animation: club-tour-in .2s ease; }
.club-tour.is-closing { opacity: 0; transition: opacity .18s ease; }
@keyframes club-tour-in { from { opacity: 0; } to { opacity: 1; } }
.club-tour__hole {
  position: fixed; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 0 0 9999px rgba(9, 18, 32, .62);
  transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
}
.club-tour__card {
  position: fixed; width: 340px; max-width: calc(100vw - 24px); padding: 18px 18px 14px;
  background: #fff; border-radius: 18px; box-shadow: 0 18px 50px rgba(9, 18, 32, .35);
  color: var(--ink); text-align: start; outline: none;
  transition: top .25s ease, left .25s ease;
}
.club-tour__card.is-center { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); width: min(380px, calc(100vw - 32px)) !important; text-align: center; padding: 26px 22px 18px; }
.club-tour__count { font-size: .74rem; font-weight: 800; color: var(--club-600); margin-bottom: 4px; }
.club-tour__title { margin: 0 0 6px; font-size: 1.05rem; font-weight: 900; color: var(--club-ink); padding-inline-end: 22px; }
.club-tour__card.is-center .club-tour__title { font-size: 1.25rem; padding: 0; }
.club-tour__text { margin: 0 0 14px; font-size: .9rem; line-height: 1.85; color: var(--ink-soft); }
.club-tour__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.club-tour__card.is-center .club-tour__foot { justify-content: center; flex-direction: column-reverse; }
.club-tour__dots { display: flex; gap: 5px; }
.club-tour__dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--border); transition: width .2s ease, background .2s ease; }
.club-tour__dots span.is-on { width: 16px; border-radius: 999px; background: var(--club-600); }
.club-tour__card.is-center .club-tour__dots { display: none; }
.club-tour__btns { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.club-tour__card.is-center .club-tour__btns { margin: 0; }
.club-tour__ghost {
  border: 0; background: transparent; padding: 8px 12px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: .86rem; font-weight: 700; color: var(--ink-soft);
}
.club-tour__ghost:hover { background: var(--bg); color: var(--ink); }
.club-tour__next { padding: 8px 18px; min-width: 84px; }
.club-tour__close {
  position: absolute; top: 10px; inset-inline-end: 10px; width: 28px; height: 28px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink-faint); cursor: pointer; padding: 0;
}
.club-tour__close:hover { background: var(--bg); color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .club-tour, .club-tour__hole, .club-tour__card { animation: none; transition: none; }
}

/* ============================================================
   پستِ جدید روی گوشی (≤ ۷۶۰px، body.club-composepage — club/ask.html): مثلِ صفحه‌ی نوشتنِ یه اپ.
   نوارِ بالا و جستجو نیست؛ فرم کلِ صفحه رو تا بالای نوارِ پایین می‌گیره: بالا ضربدر + «انتخابِ صفحه» +
   «پیش‌نویس‌ها»، وسط فیلدها (کادرِ متن جای خالی رو پر می‌کنه)، پایین دکمه‌های انتشار و پیش‌نویس درست بالای
   نوارِ پایین. برای پستِ معمولی اسکرول لازم نیست؛ اگه محتوا بیشتر شد (مثلاً نظرسنجیِ ۶ گزینه‌ای) فقط وسطِ فرم
   اسکرول می‌خوره و دکمه‌ها سرِ جاشون می‌مونن. روی دسکتاپ ضربدر دیده نمی‌شه.
   ============================================================ */
.club-compose-close { display: none; }
@media (max-width: 760px) {
  body.club-composepage { overflow: hidden; }
  body.club-composepage .navbar--club { display: none; }
  body.club-composepage .club-ask__form {
    position: fixed; z-index: 950; top: 0; left: 0; right: 0;
    bottom: calc(56px + env(safe-area-inset-bottom));
    margin: 0; border: 0; border-radius: 0; box-shadow: none;
    display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
    padding: 0 14px; padding-top: env(safe-area-inset-top);
  }
  body.club-composepage .club-ask__form > * { flex: none; direction: rtl; }
  /* نوارِ اسکرول سمتِ راست: کادرِ اسکرول‌شونده چپ‌به‌راسته (مرورگر نوار رو سمتِ راست می‌ذاره) و محتواش راست‌به‌چپ */
  body.club-composepage .club-ask__form { direction: ltr; }
  /* بالا: ضربدر سمتِ راستِ «انتخابِ صفحه» و «پیش‌نویس‌ها» سمتِ چپ؛ موقعِ اسکرول بالا می‌مونه */
  body.club-composepage .club-page-field {
    position: sticky; top: 0; z-index: 3; margin: 0 -14px 4px; padding: 10px 14px 8px;
    background: var(--surface); border-bottom: 1px solid var(--border);
  }
  body.club-composepage .club-page-row { flex-wrap: nowrap; gap: 8px; }
  body.club-composepage .club-page-select { flex: 0 1 auto; min-height: 40px; padding-top: 5px; padding-bottom: 5px; }
  body.club-composepage .club-page-field .field-hint { margin: 6px 0 0; font-size: .74rem; line-height: 1.6; }
  .club-compose-close {
    display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%;
    color: var(--club-ink); text-decoration: none; -webkit-tap-highlight-color: transparent;
  }
  .club-compose-close:active { background: var(--bg); }
  body.club-composepage .club-ask__drafts--inline { flex: none; padding: 6px 10px; font-size: .8rem; }
  body.club-composepage .club-kind-tabs { margin-top: 4px; }
  body.club-composepage .club-ask__form .field { margin-bottom: 12px; }
  /* متنِ پست جای خالیِ وسط رو پر می‌کنه (و روی گوشیِ کوتاه تا ۱۰۰px جمع می‌شه) */
  body.club-composepage #club-kind-text { flex: 1 1 0; min-height: 150px; display: flex; flex-direction: column; margin-bottom: 0; }
  body.club-composepage #club-kind-text textarea, body.club-composepage #club-kind-text .club-preview {
    flex: 1 1 0; height: auto; min-height: 100px; resize: none;
  }
  /* عکس/لینک/نظرسنجی: متن اختیاریه، پس کادرش کوچیک‌تر شروع می‌شه تا بقیه‌ی فیلدها جا بشن */
  body.club-composepage .club-ask__form:has(.club-kind-tab.is-active:not([data-kind="text"])) #club-kind-text { min-height: 104px; }
  body.club-composepage .club-ask__form:has(.club-kind-tab.is-active:not([data-kind="text"])) #club-kind-text textarea { min-height: 58px; }
  body.club-composepage #club-kind-image .field-hint, body.club-composepage #club-kind-link .field-hint { font-size: .72rem; line-height: 1.6; }
  /* راهنمای قالب‌بندی (تبِ «پیش‌نمایش» هست) و «انصراف» (ضربدرِ بالا همین کار رو می‌کنه) روی گوشی لازم نیستن */
  body.club-composepage .club-format-hint, body.club-composepage .club-ask__cancel { display: none; }
  /* پایین: دکمه‌ها درست بالای نوارِ پایین */
  body.club-composepage .club-form-actions {
    position: sticky; bottom: 0; z-index: 3; margin: 10px -14px 0; padding: 10px 14px;
    background: var(--surface); border-top: 1px solid var(--border);
    flex-wrap: nowrap;
  }
  body.club-composepage .club-form-actions .btn { flex: 1; white-space: nowrap; }
  body.club-composepage .club-ask__errors:not([hidden]) { margin: 8px 0 0; }
}

/* ============================================================
   ثبت‌نام قدم‌به‌قدم (مثلِ ردیت) — club/join.html (نامِ کاربری و رمز، درباره‌ی شما) و club/welcome.html.
   ستونِ باریکِ وسط، نقطه‌های پیشرفت بالا، «ادامه» ِ بزرگ پایین. روی گوشی (body.club-flowpage) نوارهای
   بالا و پایین نیستن و صفحه مثلِ یه اپ تمام‌صفحه‌ست.
   ============================================================ */
.club-flow { max-width: 460px; margin: 0 auto; padding: 18px 16px 0; }
.club-flow__form { display: flex; flex-direction: column; min-height: calc(100dvh - var(--club-nav-h, 69px) - 40px); }
.club-flow__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; margin-bottom: 18px; }
.club-flow__top-start, .club-flow__top-end { width: 44px; }
.club-flow__back {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--club-ink); text-decoration: none;
}
.club-flow__back:hover { background: var(--bg); }
.club-flow__dots { display: flex; gap: 6px; }
.club-flow__dots span { width: 22px; height: 5px; border-radius: 999px; background: var(--border); }
.club-flow__dots span.is-on { background: var(--club-600); }
.club-flow__skip {
  border: 0; background: transparent; padding: 8px 6px; font: inherit; font-weight: 700; color: var(--ink-soft); cursor: pointer;
}
.club-flow__skip:hover { color: var(--club-600); }
.club-flow__title { margin: 0 0 10px; text-align: center; font-size: clamp(1.35rem, 4vw, 1.7rem); font-weight: 900; color: var(--club-ink); }
.club-flow__lead { margin: 0 auto 24px; max-width: 400px; text-align: center; color: var(--ink-soft); line-height: 1.9; font-size: .93rem; }
.club-flow__field { margin-bottom: 14px; }
.club-flow__box {
  position: relative; display: flex; align-items: flex-end; gap: 6px; min-height: 64px; padding: 8px 16px 8px 8px;
  padding-inline-start: 18px; padding-inline-end: 8px;
  border-radius: 22px; background: #e9eef2; border: 2px solid transparent; cursor: text;
  transition: border-color .15s ease, background .15s ease;
}
.club-flow__box:focus-within { background: #fff; border-color: var(--club-400); }
.club-flow__label { position: absolute; top: 9px; inset-inline-start: 18px; font-size: .78rem; font-weight: 600; color: var(--ink-soft); pointer-events: none; }
.club-flow__label .req { color: #d64545; }
body.theme-club .club-flow__box input, body.theme-club .club-flow__box input:focus {
  flex: 1; min-width: 0; border: 0; outline: none; box-shadow: none; background: transparent;
  padding: 22px 0 2px; font: inherit; font-size: 1.08rem; font-weight: 600; color: var(--club-ink); text-align: left;
}
.club-flow__ok { display: grid; place-items: center; width: 34px; height: 40px; color: #2f8a3e; flex: none; }
.club-flow__ok[hidden] { display: none; }
.club-flow__icon-btn {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%;
  background: transparent; color: var(--club-ink); cursor: pointer; align-self: center;
}
.club-flow__icon-btn:hover { background: rgba(15, 23, 42, .06); }
.club-flow__icon-btn.is-spinning svg { animation: club-ptr-spin .6s linear infinite; }
.club-flow__icon-btn.is-on { color: var(--club-600); }
.club-flow__msg { min-height: 1.4em; margin: 6px 18px 0; font-size: .83rem; color: var(--ink-faint); }
.club-flow__field.is-ok .club-flow__msg { color: #2f8a3e; }
.club-flow__field.is-bad .club-flow__msg { color: #c0392b; }
.club-flow__field.is-bad .club-flow__box { border-color: #f1b4ad; }
.club-flow__note { margin: 4px 0 0; text-align: center; font-size: .82rem; color: var(--ink-faint); }
.club-flow__sec { margin-bottom: 22px; }
.club-flow__sec h2 { margin: 0 0 10px; font-size: .95rem; font-weight: 800; color: var(--ink); }
.club-flow__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.club-flow__chips:empty { display: none; }
.club-flow__chips .club-pick { padding-inline-start: 14px; }
.club-flow__chips .club-pick:has(.club-pick__av) { padding-inline-start: 6px; }
.club-flow__select {
  width: 100%; min-height: 50px; padding: 0 16px; border-radius: 16px; border: 1px solid var(--border);
  background: var(--surface); font: inherit; color: var(--club-ink);
}
.club-flow__pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.club-flow__pill { position: relative; cursor: pointer; }
.club-flow__pill input { position: absolute; opacity: 0; pointer-events: none; }
.club-flow__pill span {
  display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 6px 10px; border-radius: 999px;
  background: #e9eef2; border: 2px solid transparent; font-weight: 700; font-size: .9rem; color: var(--club-ink); text-align: center;
  transition: background .12s ease, border-color .12s ease;
}
.club-flow__pill input:checked + span { background: var(--club-050); border-color: var(--club-600); color: var(--club-700); }
.club-flow__pill input:focus-visible + span { box-shadow: 0 0 0 3px var(--club-100); }
.club-flow__bar {
  position: sticky; bottom: 0; margin-top: auto; padding: 14px 0 calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 70%, transparent);
}
.club-flow__go { min-height: 54px; border-radius: 999px; font-size: 1.02rem; }
.club-flow__go:disabled { background: #e6e9ee; color: #9aa4b2; border-color: transparent; cursor: not-allowed; box-shadow: none; }
/* صفحه‌های ثبت‌نام روی همه‌ی اندازه‌ها بدونِ نوارِ بالا (مثلِ صفحه‌های ثبت‌نامِ ردیت)؛ برگشت با فلشِ خودِ صفحه */
body.club-flowpage .navbar--club { display: none; }
body.club-flowpage { --club-nav-h: 0px; }
.club-flow__form { min-height: calc(100dvh - 40px); }
@media (max-width: 760px) {
  body.club-flowpage .club-tabbar { display: none; }
  body.club-flowpage { padding-bottom: 0 !important; }
  body.club-flowpage main { padding-top: 0; }
  .club-flow { padding-top: calc(10px + env(safe-area-inset-top)); }
  .club-flow__form { min-height: calc(100dvh - 20px); }
  body.club-flowpage .club-welcome__bar { bottom: 0; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}

/* ============================================================
   پنجره‌ی ثبت‌نام (مثلِ ردیت) — base.html با club_modal (app/club_modal.py، js/club_modal.js):
   روی دسکتاپ قدم‌های ثبت‌نام (ایمیل، کد، نامِ کاربری، درباره‌ی شما، انتخابِ صفحه‌ها) یه پنجره‌ی سفید ِ وسطِ صفحه‌ان
   و صفحه‌ی قبلیِ کلاب پشتشون مات و تیره‌ست؛ «ادامه» ته ِ پنجره. روی گوشی همون صفحه‌ی تمام‌صفحه‌ی قبلی.
   ============================================================ */
.club-modal__x {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: #e9eef2; color: var(--club-ink); text-decoration: none; flex: none;
}
.club-modal__x:hover { background: #dde3e9; }
.club-flow__top .club-modal__x { margin-inline-start: 4px; }
.club-modal__x--corner { position: absolute; top: 14px; inset-inline-end: 14px; }
body.club-modalpage .card--auth { position: relative; }
.club-welcome__top { max-width: 560px; margin-inline: auto; }
.club-welcome__top .club-welcome__step { margin-bottom: 0; }
.club-modal-bg { display: none; }
@media (min-width: 761px) {
  body.club-modalpage { overflow: hidden; }
  .club-modal-bg { display: block; position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--bg); }
  .club-modal-bg iframe {
    position: absolute; top: -16px; left: -16px; width: calc(100% + 32px); height: calc(100% + 32px);
    border: 0; filter: blur(3px); pointer-events: none;
  }
  .club-modal-bg::after { content: ""; position: absolute; inset: 0; background: rgba(15, 23, 42, .55); }
  body.club-modalpage main {
    position: fixed; inset: 0; z-index: 1; max-width: none; margin: 0; padding: 24px;
    display: flex; overflow-y: auto; overscroll-behavior: contain;
  }
  body.club-modalpage .club-flow,
  body.club-modalpage .club-welcome,
  body.club-modalpage .card--auth {
    position: relative; width: 100%; max-width: 540px; max-height: calc(100dvh - 48px); margin: auto;
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
    background: #fff; border: 0; border-radius: 26px; box-shadow: 0 28px 70px rgba(15, 23, 42, .4);
  }
  body.club-modalpage .club-flow { padding: 18px 32px 0; }
  body.club-modalpage .club-flow__form { min-height: min(640px, calc(100dvh - 48px - 18px)); }
  body.club-modalpage .club-flow__bar { background: linear-gradient(to top, #fff 70%, rgba(255, 255, 255, 0)); padding-bottom: 24px; }
  body.club-modalpage .card--auth { padding: 40px 40px 32px; }
  body.club-modalpage .club-welcome { max-width: 680px; padding: 18px 32px 0; }
  body.club-modalpage .club-welcome__head { margin-bottom: 20px; }
  body.club-modalpage .club-welcome__bar { margin: 24px -32px 0; padding: 14px 32px 20px; border-radius: 0 0 26px 26px; }
}
/* نامِ کاربری فقط لاتین (js/club_username_latin.js) */
.club-latin-warn { margin: 6px 18px 0; font-size: .83rem; font-weight: 600; color: #b45309; }
.club-latin-warn[hidden] { display: none; }
/* پنجره‌ی ثبت‌نام: بدونِ فوتر؛ روی گوشی کارتِ ایمیل/کد هم مثلِ بقیه‌ی قدم‌ها تمام‌صفحه‌ست */
body.club-modalpage > footer { display: none; }
@media (max-width: 760px) {
  body.club-modalpage main { padding-left: 0; padding-right: 0; }
  body.club-modalpage .card--auth {
    margin: 0; min-height: 100dvh; border: 0; border-radius: 0; box-shadow: none;
    padding: calc(70px + env(safe-area-inset-top)) 22px 32px;
  }
  body.club-modalpage .club-modal__x--corner { top: calc(12px + env(safe-area-inset-top)); inset-inline-end: 12px; }
}

/* قدم‌های ثبت‌نام — آیکونِ بالای عنوان (مثلِ کارتِ ایمیل/کد) و رنگِ پس‌زمینه‌ی کادرها برای autofill */
.club-flow__icon { margin-bottom: 12px; }
.club-flow__icon .auth-icon { width: 56px; height: 56px; }
.club-flow__box { --flow-box-bg: #e9eef2; }
.club-flow__box:focus-within { --flow-box-bg: #fff; }
/* پرکردنِ خودکارِ مرورگر (رمز/نامِ ذخیره‌شده) کادرِ آبیِ کم‌رنگِ خودش رو دورِ input نکشه؛ input همرنگِ کادر می‌مونه */
body.theme-club .club-flow__box input:-webkit-autofill,
body.theme-club .club-flow__box input:-webkit-autofill:hover,
body.theme-club .club-flow__box input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--club-ink); caret-color: var(--club-ink);
  -webkit-box-shadow: 0 0 0 1000px var(--flow-box-bg) inset; box-shadow: 0 0 0 1000px var(--flow-box-bg) inset;
  transition: background-color 600000s 0s, color 600000s 0s;
}
@media (max-width: 760px) {
  /* گوشی: پس‌زمینه‌ی سفید و کادرهای سفید با حاشیه و حلقه‌ی آبیِ فوکوس — مثلِ بقیه‌ی فرم‌های کلاب (پستِ جدید، تنظیمات) */
  body.club-flowpage { background: #fff; --bg: #fff; }
  body.club-flowpage main { padding-bottom: 0; }  /* وگرنه نوارِ «ادامه» ته ِ صفحه ۶۴px بالا می‌اومد */
  .club-flow__box { --flow-box-bg: #fff; background: #fff; border: 1.5px solid var(--border); }
  .club-flow__box:focus-within { border-color: var(--club-500); box-shadow: 0 0 0 3px var(--club-050); }
  .club-flow__box:focus-within .club-flow__label { color: var(--club-700); }
  .club-flow__field.is-ok .club-flow__box { border-color: #9ed0a6; }
  .club-flow__pill span { background: #fff; border: 1.5px solid var(--border); }
  .club-flow__bar { background: linear-gradient(to top, #fff 70%, rgba(255, 255, 255, 0)); }
  .club-flow__dots span { background: var(--club-100); }
  .club-flow__dots span.is-on { background: var(--club-600); }
  /* ایمیل / کد / ورود: تمام‌عرض (نه کارتِ ۴۷۰px با نوارِ خاکستری کنارش) */
  body.club-modalpage .card--auth { max-width: none; width: 100%; padding-top: calc(76px + env(safe-area-inset-top)); }
}

/* مهمان روی گوشی: به‌جای کارتِ بزرگِ «بپیوندید» (که ته ِ صفحه می‌افتاد) یه دکمه‌ی کوچیکِ «ورود» کنارِ جستجو
   (مثلِ ردیت)؛ ثبت‌نام از لینکِ توی پنجره‌ی ورود. روی تبلت هم کارت پنهانه چون نوارِ بالا هر دو دکمه رو داره. */
@media (max-width: 960px) {
  .club-join--guest { display: none; }
}
@media (max-width: 760px) {
  .navbar--club .navbar__actions--guest { display: flex !important; order: 1; flex: none; margin: 0; gap: 0; }
  .navbar--club .navbar__actions--guest .club-signup-btn { display: none; }
  .navbar--club .navbar__actions--guest .club-login-btn {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; font-size: .9rem;
  }
  .navbar--club .navbar__inner:has(.navbar__actions--guest) { flex-wrap: nowrap; gap: 8px; }
  .navbar--club .navbar__inner:has(.navbar__actions--guest) .club-topsearch { flex: 1 1 0; min-width: 0; }
}

/* دکمه‌ی «خروج از حساب» روی پروفایلِ خودِ آدم — فقط گوشی (club/user.html)، روبه‌روی «ویرایشِ پروفایل»
   و کم‌رنگ‌تر از اون. روی دسکتاپ خروج توی منوی حسابِ نوارِ بالاست. */
.club-profile-logout { display: none; }
@media (max-width: 760px) {
  .club-profile-hero__actions:has(.club-profile-logout) { justify-content: space-between; }
  .club-profile-logout {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; border: 1px solid var(--border); color: var(--ink-soft); box-shadow: none;
  }
  .club-profile-logout:hover, .club-profile-logout:active { color: #c0392b; border-color: #f1b4ad; background: #fff5f4; }
}

/* گوشی: هیچ‌وقت اسکرولِ چپ و راست نداشته باشیم.
   ۱) سافاریِ آیفون روی هر کادرِ ورودی با فونتِ کوچک‌تر از 16px موقعِ لمس صفحه رو زوم می‌کنه و بعدش صفحه به
      چپ و راست می‌لغزه (مثلاً جستجوی بالا، «انتخابِ صفحه» و لینکِ پستِ جدید) — پس کادرها روی گوشی حداقل 16px‌ان.
   ۲) اگه چیزی یه روز از عرضِ صفحه بیرون زد، به‌جای اسکرولِ افقی بریده بشه (clip، نه hidden: sticky خراب نمی‌شه). */
@media (max-width: 760px) {
  body.theme-club { overflow-x: clip; }
  body.theme-club input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  body.theme-club textarea,
  body.theme-club select { font-size: 16px; }
}

/* نمای بزرگِ عکسِ پروفایل (club/user.html → club-lightbox با حالتِ avatar در club.js):
   دسکتاپ: پنجره‌ی مربعیِ وسطِ صفحه و بقیه‌ی صفحه مات؛ گوشی: عکس تمامِ عرضِ صفحه و وسط، بالا و پایینش مات. */
.club-profile-hero__zoom { display: block; border-radius: 50%; cursor: zoom-in; }
.club-profile-hero__zoom:focus-visible { outline: 3px solid var(--club-400); outline-offset: 3px; }
.club-lightbox--avatar img { width: min(400px, 86vw, 80vh); height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 22px; background: #fff; }
@media (max-width: 760px) {
  .club-lightbox--avatar { padding: 0; }
  .club-lightbox--avatar img { width: 100vw; max-width: 100vw; max-height: 100dvh; border-radius: 0; box-shadow: none; }
  .club-lightbox--avatar .club-lightbox__close { top: calc(14px + env(safe-area-inset-top)); left: 14px; background: rgba(0, 0, 0, .45); }
}

/* «شهرِ محلِ زندگی» با جستجو (js/club_city_combo.js): کادرِ متنی + فهرستِ نتیجه‌ها زیرش */
.club-combo { position: relative; }
body.theme-club .club-combo__input { width: 100%; padding-inline-end: 40px; }
.club-combo__clear {
  position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink-faint); cursor: pointer; font-size: .85rem;
}
.club-combo__clear:hover { background: var(--bg); color: var(--ink); }
.club-combo__clear[hidden] { display: none; }
.club-combo__list {
  position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 30; margin: 0; padding: 6px; list-style: none;
  max-height: 280px; overflow-y: auto; background: #fff; border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 12px 30px rgba(11, 28, 58, .12);
}
.club-combo__list[hidden] { display: none; }
.club-combo__item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 9px 12px;
  border-radius: 10px; cursor: pointer; color: var(--ink); font-weight: 600;
}
.club-combo__item small { color: var(--ink-faint); font-weight: 500; font-size: .8rem; white-space: nowrap; }
.club-combo__item:hover, .club-combo__item.is-active { background: var(--club-050); color: var(--club-700); }
.club-combo__none { padding: 9px 12px; color: var(--ink-faint); font-size: .88rem; }

/* سرِ صفحه‌های «کلابِ من» (پست‌ها، نظرها، دنبال‌شده‌ها، ذخیره‌شده‌ها — mine_head در _macros.html): آیکون، عنوان، شمار */
.club-minehead {
  display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding: 16px 20px;
  background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 18px;
}
.club-minehead__icon {
  display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 14px;
  background: var(--club-050); color: var(--club-600);
}
.club-minehead__icon .club-navrail__icon { width: 24px; height: 24px; }
.club-minehead__title { margin: 0; font-size: 1.35rem; font-weight: 900; color: var(--club-ink); }
.club-minehead__count {
  margin-inline-start: auto; display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 14px;
  border-radius: 999px; background: var(--club-050); color: var(--club-700); font-weight: 700; font-size: .9rem; white-space: nowrap;
}
.club-minehead__count strong { font-size: 1.25rem; font-weight: 900; }
@media (max-width: 640px) {
  .club-settings__top { padding: 12px 14px 0; border-radius: 16px; }
  .club-settings__top .club-settings__tabs { margin-inline: -14px; padding: 0 6px; }
  .club-minehead { padding: 12px 14px; gap: 10px; border-radius: 16px; }
  .club-minehead__icon { width: 40px; height: 40px; border-radius: 12px; }
  .club-minehead__title { font-size: 1.15rem; }
}