/*
 * تمِ سایت، **همان پالتِ اپ**.
 *
 * مقدارها یک‌به‌یک از `ui/theme/Color.kt` می‌آیند: سبزِ برگ به‌عنوان تنها
 * رنگِ هویت، سه رنگِ معنایی (منتشرشده/در انتظار/ردشده)، خطِ نازک به‌جای سایه،
 * و نوارِ بالای صفحه که در تمِ روشن کمی از سطح تیره‌تر است تا ناپیدا نشود.
 */
:root {
  color-scheme: light;
  /* پهنای صفحه‌های پهن (آگهی، کاوش، حساب، گفتگو، کسب‌وکار، پشتیبانی): ۱۲۰۰ با فاصله از دو طرف؛ صفحه اصلی و فهرست/جستجو (`.with-sidebar`) تمام صفحه */
  --page-max: 1200px;
  /* بلندیِ مشترکِ کادرِ جستجو، «ثبت آگهی» و عکسِ کاربر در نوارِ بالا */
  --nav-control: 38px;
  --squircle-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 2h-9A2.5 2.5 0 0 0 1 4.5v5A2.5 2.5 0 0 0 3.5 12H4v1.942c0 .842.992 1.292 1.625.737l3.063-2.68H12.5a2.5 2.5 0 0 0 2.5-2.5v-5a2.5 2.5 0 0 0-2.5-2.5zM14 9.5a1.5 1.5 0 0 1-1.5 1.5H8.312L5 13.898V11H3.5A1.5 1.5 0 0 1 2 9.5v-5A1.5 1.5 0 0 1 3.5 3h9A1.5 1.5 0 0 1 14 4.5zM7.508 7.09L7.5 7V4.5l.008-.09a.5.5 0 0 1 .984 0l.008.09V7l-.008.09a.5.5 0 0 1-.984 0M8.75 9.25a.75.75 0 1 1-1.5 0a.75.75 0 0 1 1.5 0'/%3E%3C/svg%3E");
  /* همان حبابِ اطلاعات: دکمه توضیحِ کنارِ عنوانِ بخش‌ها، رنگ جگری از خودِ دکمه — مثل اپ */
  --squircle-info-outline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 2h-9A2.5 2.5 0 0 0 1 4.5v5A2.5 2.5 0 0 0 3.5 12H4v1.942c0 .842.992 1.292 1.625.737l3.063-2.68H12.5a2.5 2.5 0 0 0 2.5-2.5v-5a2.5 2.5 0 0 0-2.5-2.5zM14 9.5a1.5 1.5 0 0 1-1.5 1.5H8.312L5 13.898V11H3.5A1.5 1.5 0 0 1 2 9.5v-5A1.5 1.5 0 0 1 3.5 3h9A1.5 1.5 0 0 1 14 4.5zM7.508 7.09L7.5 7V4.5l.008-.09a.5.5 0 0 1 .984 0l.008.09V7l-.008.09a.5.5 0 0 1-.984 0M8.75 9.25a.75.75 0 1 1-1.5 0a.75.75 0 0 1 1.5 0'/%3E%3C/svg%3E");
  --bg: #F9FAFD;
  --surface: #ffffff;
  /* زمینه ورقه‌ها (`.map-sheet`)؛ تیره کمی روشن‌تر از صفحه تا ورقه روی پرده دیده شود */
  --sheet: #ffffff;
  --sunken: #f3f6f4;
  --bar: #edf1ee;
  /* کادرهای کوچکِ بالای کارتِ آگهی — کمی تیره‌تر از نوارها تا دیده شوند */
  --card-tab: #dce4df;
  --line: #e4e8e5;
  --text: #171a18;
  --muted: #656b67;
  --primary: #0ea960;
  --on-primary: #ffffff;
  --primary-container: #cdf0de;
  --on-primary-container: #00341e;
  --published: #12734f;
  --published-bg: #dcf3e8;
  --error: #9e2236;
  --error-bg: #f8e6e9;
  --pending: #9a6300;
  --pending-bg: #fff1d6;
  --radius: 16px;
  /* زمینه صفحه‌های فهرستی‌ـ‌کادردار؛ خاکستریِ روشنِ تنظیماتِ MIUI */
  --settings-bg: #F9FAFD;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #212824;
    --surface: #212824;
    --sheet: #29312c;
    --sunken: #1b211e;
    --bar: #212824;
    --card-tab: #303933;
    --settings-bg: #212824;
    --line: #303933;
    --text: #e4e9e6;
    --muted: #9da7a1;
    --primary: #52d69a;
    --on-primary: #00341e;
    --primary-container: #00341e;
    --on-primary-container: #cdf0de;
    --published: #66d6a4;
    --published-bg: #10352a;
    --error: #f2a0ab;
    --error-bg: #3a1a20;
    --pending: #ffc65c;
    --pending-bg: #3a2e12;
  }
}

/* فونت‌ها WOFF2 با کشِ یک‌ساله؛ فونتِ عوض‌شده نامِ تازه می‌گیرد (`.v2`) تا کشِ کهنه نماند */
/* همان قلمِ اپ (شبنم، ارقامِ فارسیِ Alan Sans) تا سایت و اپ یک چیز به نظر برسند */
/* روبیک ۴۰۰ — نامِ کسب‌وکارها، مثل اپ؛ ارقامش Alan Sans */
@font-face {
  font-family: Rubik;
  src: url('/fonts/rubik_regular.v1.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Rubik;
  src: url('/fonts/rubik_medium.v1.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
.business-name { font-family: Rubik, YekanBakh, sans-serif; font-weight: 400; }
/* بخشِ «فروشنده» صفحه آگهی: نامِ کسب‌وکار با فونتِ عنوانِ آگهی — مثل اپ */
.seller-business { font-family: Beiruti, YekanBakh, sans-serif; font-weight: 700; font-size: 1.2em; }
/* «تازه به جاگل پیوسته‌اند»: یک پله پررنگ‌تر — مثل اپ */
/* «تازه به جاگل پیوسته‌اند»: همان فونتِ عنوانِ آگهی (بیروتی) — مثل اپ */
.shop-chip .shop-chip-text .business-name { font-family: Beiruti, YekanBakh, sans-serif; font-weight: 700; font-size: 1.2em; }
/* بیروتی — فقط عنوانِ کارتِ «تازه‌ترین آگهی‌ها»، مثل اپ؛ ارقامش Alan Sans */
@font-face {
  font-family: Beiruti;
  src: url('/fonts/beiruti_bold.v1.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: YekanBakh;
  src: url('/fonts/yekanbakh_regular.v1.woff') format('woff');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: YekanBakh;
  src: url('/fonts/yekanbakh_medium.v1.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: YekanBakh;
  src: url('/fonts/yekanbakh_bold.v1.woff') format('woff');
  font-weight: 600 700;
  font-display: swap;
}

/* ایران‌یکان (فقط معمولی، رقم فارسی) — متنِ کاورِ ویترینِ صفحه اصلی */
@font-face {
  font-family: IRANYekan;
  src: url('/fonts/iranyekan_regular_fanum.v1.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

/* عددها همه‌جا یکان‌بخ: رقم‌های فونت‌های دیگر (بیروتی، روبیک، ایران‌یکان) از همان فایلِ یکان‌بخ؛
   چهره رقم بعد از چهره اصلی آمده تا برای همین نویسه‌ها جلو بیفتد */
@font-face {
  font-family: Beiruti;
  src: url('/fonts/yekanbakh_bold.v1.woff') format('woff');
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0030-0039, U+0660-0669, U+066B-066C, U+06F0-06F9;
}
@font-face {
  font-family: Rubik;
  src: url('/fonts/yekanbakh_regular.v1.woff') format('woff');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0030-0039, U+0660-0669, U+066B-066C, U+06F0-06F9;
}
@font-face {
  font-family: Rubik;
  src: url('/fonts/yekanbakh_medium.v1.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0030-0039, U+0660-0669, U+066B-066C, U+06F0-06F9;
}
@font-face {
  font-family: IRANYekan;
  src: url('/fonts/yekanbakh_regular.v1.woff') format('woff');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0030-0039, U+0660-0669, U+066B-066C, U+06F0-06F9;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: YekanBakh, "Segoe UI", Tahoma, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.7;
}

a { color: inherit; text-decoration: none; }

.bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  background: var(--bar);
  border-bottom: 1px solid var(--line);
  transition: transform .2s ease;
}
/* صفحه اصلی: با اسکرول به پایین کنار می‌رود، با کمی بالا آمدن برمی‌گردد — مثل هدرِ اپ */
.brand { font-weight: 700; font-size: 20px; color: var(--primary); flex: none; display: inline-flex; align-items: center; gap: 4px; }
/* لوگوی نوار بالا کمی بالاتر از وسط تا با نوشته‌ها هم‌خط دیده شود */
header.bar .brand { transform: translateY(-3px); }
/* همان آیکون و نوشته پنجره ورود و پانویس */
.brand-mark { width: 36px; height: 36px; }
.brand-word { width: 50px; height: auto; }

/* ---------- هدرِ سایت، مثل سایت‌های آگهی ---------- */
.bar { justify-content: center; }
#nav { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.bar { gap: 20px; padding: 10px 16px; }
.nav-icon { display: inline-flex; line-height: 0; }
.nav-place { display: inline-flex; align-items: center; gap: 4px; flex: none; max-width: 160px; padding: 7px 10px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.nav-place .nav-icon { color: #0880EA; }
.nav-place span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-place:hover { background: var(--sunken); }
.nav-search { display: flex; align-items: center; flex: 0 1 400px; min-width: 160px; max-width: 400px; height: var(--nav-control); padding-inline: 4px; border-radius: 8px; background: var(--sunken); border: 1px solid transparent; }
.nav-search { border-color: color-mix(in srgb, var(--sunken), #000 9%); }
.nav-search:focus-within { border-color: var(--primary); background: var(--bg); }
/* فوکوس: فقط حاشیه خودِ کادر سبز؛ خطِ بیرونیِ عمومیِ `input:focus` نه */
.nav-search input:focus { outline: none; }
.nav-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; padding: 0 6px; font: inherit; font-size: 14px; color: #464646; outline: none; box-shadow: none; }
.nav-search input::placeholder { color: transparent; }
/* نوشته کادرِ خالی (`brandPlaceholder`): «جستجو در» و لوگوی «جاگل» روی کادر، لمس به خودِ کادر می‌رسد */
.nav-search-field { position: relative; flex: 1; min-width: 0; height: 100%; display: flex; }
.nav-search-hint { position: absolute; inset-block: 0; inset-inline-start: 6px; display: flex; align-items: center; gap: 5px; color: #464646; font-size: 14px; white-space: nowrap; overflow: hidden; pointer-events: none; transition: opacity .18s ease; }
/* کلیک روی کادر: نوشته نرم محو می‌شود */
.nav-search-field:has(input:focus) .nav-search-hint { opacity: 0; }
.nav-search-field:has(input:not(:placeholder-shown)) .nav-search-hint { display: none; }
.nav-search-logo { height: 22px; width: auto; transform: translateY(-3px); }
.nav-search-logo[hidden] { display: none; }
.nav-search-go { display: inline-flex; justify-content: center; flex: none; width: 32px; padding: 6px 0; border: 0; background: none; color: var(--muted); cursor: pointer; overflow: hidden; transition: width .2s ease, opacity .2s ease; }
/* فوکوس: ذره‌بین نرم کنار می‌رود و نوشته از همان‌جا شروع می‌شود */
.nav-search:focus-within .nav-search-go { width: 0; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .nav-search-go { transition: none; } }
.nav-items { display: flex; align-items: center; gap: 4px; flex: none; margin-inline-start: 16px; }
.nav-spacer { flex: 1; min-width: 8px; }
.nav-account { display: flex; align-items: center; flex: none; }
.nav-link, .nav-icon-link { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap; }
.nav-link:hover, .nav-icon-link:hover { background: var(--sunken); color: var(--text); }
.nav-link.on, .nav-icon-link.on { color: var(--primary); }
/* کاوش، پشتیبانی و گفتگوها: نوشته ۱۴ و #464646؛ صفحه باز همان سبز (زیرِ ۱۱۰۱ فقط آیکون است) */
@media (min-width: 1101px) {
  .nav-items .nav-link, .nav-items .nav-labeled { font-size: 14px; }
  /* جا، نامِ کاربر و «ثبت آگهی» هم‌قلم و هم‌اندازه «کاوش» */
  .nav-place, .nav-account .account-button, header.bar .nav-post { font-size: 14px; }
}
.nav-place, .nav-account .account-button, header.bar .nav-post { font-weight: 500; }
.nav-items .nav-link:not(.on), .nav-items .nav-labeled:not(.on) { color: #464646; }
.nav-items .nav-link, .nav-items .nav-labeled { font-weight: 500; }
.nav-icon-link .nav-unread { position: absolute; top: 2px; inset-inline-start: 22px; margin: 0; }
.nav-labeled .nav-unread { inset-inline-start: 18px; }
.nav-post { display: inline-flex; align-items: center; gap: 4px; box-sizing: border-box; height: var(--nav-control); padding: 0 16px; border-radius: 4px; background: var(--primary); color: var(--on-primary, #fff); font-size: 14px; font-weight: 400; white-space: nowrap; }
.nav-post:hover { filter: brightness(1.08); }
.account-wrap { position: relative; }
.account-menu { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 40; min-width: 220px; display: flex; flex-direction: column; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); box-shadow: 0 8px 24px rgba(0, 0, 0, .14); }
.account-menu[hidden] { display: none; }
.account-menu a, .account-menu button { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 6px; background: none; color: var(--text); font: inherit; font-size: 14px; text-align: start; cursor: pointer; }
.account-menu a:hover, .account-menu button:hover { background: var(--sunken); }
/* صفحه باز در منوی حساب، همان رنگِ ستونِ کناری */
.account-menu a.on, .account-menu a.on:hover { background: var(--primary-container); color: var(--on-primary-container); font-weight: 600; }
/* منوی حسابِ هدر: موردها با آیکون */
.account-menu { min-width: 260px; max-height: calc(100vh - var(--bar-height, 64px) - 16px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.account-menu > a { display: flex; align-items: center; gap: 10px; }
.account-menu > a .nav-icon { color: var(--muted); }
/* شمارِ نخوانده «گفتگوها» و «اعلان‌ها» ته ردیفِ منو؛ نقطه کوچک روی دکمه نام */
.account-menu > a .nav-unread { position: static; margin-inline-start: auto; }
.account-button { position: relative; }
/* `.unread-dot` پایین‌ترِ همین فایل ۲۲ پیکسل است؛ انتخابگرِ دوکلاسه تا این بچربد */
.unread-dot.account-dot { position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; min-width: 0; padding: 0; font-size: 0; border: 1.5px solid #fff; box-sizing: content-box; }
.account-menu-divider { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.account-menu-out { margin-top: 4px; border-top: 1px solid var(--line) !important; border-radius: 0 0 6px 6px !important; color: var(--error, #b3261e) !important; }
.account-menu > .account-menu-out { display: flex; align-items: center; gap: 10px; }
.account-menu-out .nav-icon { color: var(--error); }
.nav-mobile { display: none; }
.nav-link:focus-visible, .nav-icon-link:focus-visible, .nav-place:focus-visible, .nav-post:focus-visible, .account-menu a:focus-visible, .account-menu button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* دسکتاپ کوچک: نوشته کاوش/نقشه/حساب پنهان، فقط آیکون */
@media (max-width: 1100px) {
  .nav-link { font-size: 0; gap: 0; }
  .nav-link .nav-icon:last-child:not(:first-child) { display: none; }
  /* حساب: فقط عکس (نام و شماره در منوی بازشده) */
  .nav-link .account-button-who { display: none; }
}
/* موبایل: لوگو، جستجو و اعلان؛ بقیه در نوارِ پایین */
@media (max-width: 767px) {
  .bar { padding: 8px 16px; }
  .nav-place, .nav-search, .nav-items, .nav-post, .nav-account, .nav-spacer { display: none; }
  .nav-mobile { display: flex; align-items: center; gap: 2px; margin-inline-start: auto; }
}

/* نوارِ پایینِ موبایل */
.tabbar { display: none; }
@media (max-width: 767px) {
  body.with-tabbar { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .tabbar:not([hidden]) { position: fixed; inset-inline: 0; bottom: 0; z-index: 25; display: flex; height: calc(60px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--bar); border-top: 1px solid var(--line); }
  .tabbar a { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--muted); font-size: 11px; }
  .tabbar a.on { color: var(--primary); }
  .tabbar .nav-unread { position: absolute; top: 4px; inset-inline-start: calc(50% + 4px); margin: 0; }
  .tabbar-post .nav-icon { padding: 2px; border-radius: 8px; background: var(--primary); color: var(--on-primary, #fff); }
}

/* پانویس */
/* صفحه اصلی در دسکتاپ: جستجو، شهر و جستجو با عکس در هدر است */
@media (min-width: 768px) {
  .home-window .home-search { display: none; }
}

.view { max-width: 900px; margin: 0 auto; padding: 16px; }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}

h1 { font-size: 20px; margin: 0 0 12px; }
h2 { font-size: 17px; margin: 0 0 8px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

/* ---------- فرم ---------- */
label, .field-block { display: block; margin-bottom: 12px; }
label > span, .field-block > span { display: block; margin-bottom: 4px; font-size: 13px; color: var(--muted); }

input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  /* هم‌اندازه اپ: گردی ۴، متن ۱۶ */
  border-radius: 4px;
  font-size: 16px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary); border-color: transparent; }

button {
  font: inherit;
  /* هم‌قدِ «ثبت آگهی» نوارِ بالا (۳۸ = ۲ قاب + یک سطر ۱٫۷): هیچ دکمه متنی بلندتر از آن نیست؛ min-height سراسری نه تا دکمه‌های کوچک بزرگ نشوند */
  padding: max(0px, calc((36px - 1.7em) / 2)) 18px;
  /* گردیِ همه دکمه‌های اپ ۴ است (`ButtonShape`)، نه کپسول */
  border-radius: 4px;
  border: 1px solid transparent;
  background: var(--primary);
  color: var(--on-primary);
  cursor: pointer;
}

button.ghost { background: transparent; border-color: var(--line); color: var(--text); }
/* دکمه متنی — «ارسال دوباره کد» در صفحه ورود */
button.link-button { border: 0; padding: 0; color: var(--primary); font-size: 13px; background: transparent; cursor: pointer; }
button.danger { background: var(--error); color: var(--on-error, #fff); }
/* در تیره جگری روشن است؛ متن سفید رویش کم‌رنگ می‌شد */
:root { --on-error: #fff; }
/* دکمه نصفِ عرض، سمتِ چپ (خروج از حساب در دروازه قوانین) */
button.half-end { display: block; width: 50%; margin-inline-start: auto; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --on-error: #4a0d17; } }
:root[data-theme="dark"] { --on-error: #4a0d17; }
button:disabled { opacity: .5; cursor: default; }

.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.thumb { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; cursor: zoom-in; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* ---------- گروهِ دکمه‌ها (به‌جای رادیو) ---------- */
.group { display: flex; flex-wrap: wrap; gap: 4px; }

.group button {
  background: var(--sunken);
  color: var(--text);
  border-radius: 4px;
  padding: max(0px, calc((36px - 1.7em) / 2)) 14px;
  /* انتخاب‌نشده بی‌خط، از زمینه جدا نمی‌شد و دکمه به نظر نمی‌رسید — مثل اپ */
  border: 1px solid var(--line);
}

.group button[aria-pressed="true"] {
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 600;
  border-color: transparent;
}
/* دو حالتِ روی هم افتاده، همان «آگهی / کسب‌وکار» نقشه (اپ `ModeToggle`)؛ «فروش/نیازمندی» آبیِ اپ */
.mode-toggle { display: flex; justify-content: center; align-items: center; }
.mode-toggle button { border: 0; font: inherit; color: var(--text); background: var(--bar, #fff); border-radius: 4px; height: 36px; padding: 0 28px; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.18); transform: scale(.97); transition: transform .25s ease, box-shadow .25s ease, background .25s ease; position: relative; z-index: 0; }
.mode-toggle button + button { margin-inline-start: -8px; }
.mode-toggle button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); font-weight: 600; transform: scale(1.02); box-shadow: 0 4px 12px rgba(0,0,0,.25); z-index: 1; }
.mode-toggle.blue button[aria-pressed="true"] { background: #0b6fa4; color: #fff; }
/* دکمه‌های «ماه | سال» فرم ثبت آگهی: انتخاب‌شده آبی، مثلِ «آگهی فروش / آگهی نیازمندی» — مثل اپ */
.post-form .mode-toggle button[aria-pressed="true"] { background: #0b6fa4; color: #fff; }

/* ---------- تراشه‌های فیلتر ---------- */
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 8px; }
.chips button { white-space: nowrap; background: var(--surface); color: var(--text); border-color: var(--line); }
.chips button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); border-color: transparent; }
/* تب‌های پنل مدیر */
.chip {
  white-space: nowrap; text-decoration: none; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); border-radius: 14px; padding: 6px 14px;
}
.chip.on { background: var(--primary); color: var(--on-primary); border-color: transparent; }

/* ---------- کارتِ آگهی ---------- */
.cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--sunken); }
.card .body { padding: 10px 12px; }
/* کارت آگهی بی‌کادر: روی زمینه خود صفحه، با همان اندازه و فاصله؛ فقط عکس گوشه گرد دارد */
.card.listing-card { background: transparent; border: 0; }
.card.listing-card img { border-radius: var(--radius) var(--radius) 4px 4px; }
.card h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.price { color: var(--published); font-weight: 700; }

/* ---------- اخطارها، هم‌شکل با اپ ---------- */
.notice { display: flex; gap: 8px; padding: 10px 12px; border-radius: 12px; margin: 12px 0; }
/* هم‌شکلِ `Notice` در اپ: بی‌کادر، فقط متنِ رنگی */
.notice.error { background: transparent; color: var(--error); padding-inline: 0; }
.notice.warn { background: transparent; color: var(--pending); padding-inline: 0; }
.notice.info { background: transparent; color: var(--muted); padding-inline: 0; }

.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; background: var(--sunken); color: var(--muted); }
.badge.ok { background: var(--primary-container); color: var(--on-primary-container); }
.badge.pending { background: var(--pending-bg); color: var(--pending); }
.badge.rejected { background: var(--error-bg); color: var(--error); }

/* ---------- گفتگو ---------- */
.messages { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; padding: 4px; }
.bubble { max-width: 80%; padding: 8px 12px; border-radius: 16px; background: var(--sunken); }
.bubble.mine { align-self: flex-start; background: var(--primary-container); color: var(--on-primary-container); }
.bubble.theirs { align-self: flex-end; }

.gallery { display: flex; gap: 8px; overflow-x: auto; }
.gallery img { height: 220px; border-radius: 12px; object-fit: cover; cursor: zoom-in; display: block; }
.shot { position: relative; flex: 0 0 auto; }
.shot-tag {
  position: absolute; inset-inline-start: 8px; bottom: 8px;
  font: inherit; font-size: 12px; border: 0; border-radius: 8px;
  padding: 3px 8px; background: rgba(0,0,0,.6); color: #fff;
}
.shot-tag.pick { cursor: pointer; }
.lightbox {
  position: fixed; inset: 0; z-index: 50; display: flex;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.9); padding: 24px;
}
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; transform-origin: center; will-change: transform; }
/* عکسِ بزرگ‌شده تمامِ صفحه است: بی‌گردی، دکمه‌ها و شمارنده کنار می‌روند */
.lightbox.zoomed img { border-radius: 0; }
.lightbox.zoomed .lightbox-close, .lightbox.zoomed .lightbox-nav, .lightbox.zoomed .lightbox-count { opacity: 0; pointer-events: none; }
/* دکمه‌ها و شمارنده روی عکس (z-index: عکس با will-change لایه خودش را دارد و رویشان می‌افتاد)؛ دایره تیره با خطِ روشن و سایه
   تا روی عکسِ روشن یا تیره که کلِ صفحه را گرفته هم دیده شوند */
.lightbox-close, .lightbox-nav {
  position: absolute; z-index: 2; display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0; border-radius: 50%; cursor: pointer;
  background: rgba(0,0,0,.55); color: #fff; border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 2px 10px rgba(0,0,0,.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .2s, transform .2s;
}
.lightbox-close svg, .lightbox-nav svg { width: 22px; height: 22px; }
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(0,0,0,.75); }
.lightbox-close:active, .lightbox-nav:active { transform: scale(.94); }
.lightbox-close { top: 16px; inset-inline-end: 16px; }
.lightbox-nav { top: 50%; margin-top: -22px; }
.lightbox-nav.prev { inset-inline-start: 16px; }
.lightbox-nav.next { inset-inline-end: 16px; }
.lightbox-count {
  position: absolute; z-index: 2; bottom: 16px; left: 50%; transform: translateX(-50%);
  padding: 4px 12px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font-size: 13px; font-weight: 500; white-space: nowrap;
  border: 1px solid rgba(255,255,255,.25); box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.lightbox-count:empty, .lightbox-count[hidden] { display: none; }
/* کاورِ فعلی با یک قابِ رنگی مشخص است */
.gallery img.cover { outline: 3px solid var(--primary); outline-offset: -3px; cursor: default; }

/* پیامِ پایینِ صفحه — مثلِ `PageToast` اپ: از سمتِ راست، به اندازه متن، لغزان از پایین */
.toast {
  position: fixed;
  inset-inline-start: 16px;
  bottom: 16px;
  max-width: calc(100% - 32px);
  width: max-content;
  /* همه یک کادر: سفید با سایه؛ رنگ فقط در متن (سبز، نارنجی، جگری) — مثل اپ */
  background: var(--surface);
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.18);
  color: var(--primary);
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 12px;
  z-index: 50;
  transform: translateY(calc(100% + 16px));
  opacity: 0;
  transition: transform .25s, opacity .25s;
}
.toast.show { transform: none; opacity: 1; }
/* موفقیت (سبز): چهارگوشِ تیک‌دار کنارِ متن، هم‌اندازه مثلثِ هشدار — مثل اپ */
.toast:not(.error) { display: flex; align-items: center; gap: 8px; }
.toast:not(.error)::before { content: ''; flex: 0 0 18px; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M7 2a5 5 0 0 0-5 5v10a5 5 0 0 0 5 5h10a5 5 0 0 0 5-5V7a5 5 0 0 0-5-5zm8.73 8.684a1 1 0 1 0-1.46-1.368l-3.083 3.29l-1.523-1.353a1 1 0 0 0-1.328 1.494l2.25 2a1 1 0 0 0 1.393-.063z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M7 2a5 5 0 0 0-5 5v10a5 5 0 0 0 5 5h10a5 5 0 0 0 5-5V7a5 5 0 0 0-5-5zm8.73 8.684a1 1 0 1 0-1.46-1.368l-3.083 3.29l-1.523-1.353a1 1 0 0 0-1.328 1.494l2.25 2a1 1 0 0 0 1.393-.063z'/%3E%3C/svg%3E") center / contain no-repeat; }
.toast.error { color: var(--error); }
.toast.error .notice { margin: 0; font-weight: 600; }

[hidden] { display: none !important; }

/* ---------- کد یک‌بارمصرف ---------- */
.otp { display: flex; gap: 8px; direction: ltr; }
.otp input {
  flex: 1;
  aspect-ratio: 1;
  padding: 0;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  border-radius: 4px;
}
.otp.error input { border-color: var(--error, #b3261e); border-width: 2px; }
.login-actions { display: flex; gap: 12px; }
.resend-big { width: 70%; min-height: 52px; font-weight: 700; }
.login-actions .primary { flex: 3; }
.login-actions .ghost { flex: 7; }

/* کارتِ ردیفی — گلفروشی‌های اطراف */
/* صفحه یک‌باره و نرم می‌آید، نه تکه‌تکه */
@keyframes viewIn { from { opacity: 0 } to { opacity: 1 } }
/* صفحه آگهی: هر بخش کمی دیرتر از بالایی، از کمی بالاتر پایین می‌نشیند */
@keyframes detail-drop { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: none; } }
.detail-cascade > * { animation: detail-drop .45s cubic-bezier(.4, 0, .2, 1) both; }
/* عکسِ بالا ثابت می‌آید؛ فقط بخش‌های زیرش پایین می‌نشینند — مثل اپ */
.detail-cascade > .photo-hero, .detail-cascade > .photo-top { animation: none; }
.detail-cascade > :nth-child(2) { animation-delay: 50ms; }
.detail-cascade > :nth-child(3) { animation-delay: 100ms; }
.detail-cascade > :nth-child(4) { animation-delay: 150ms; }
.detail-cascade > :nth-child(n+5) { animation-delay: 200ms; }
/* کادرِ شناورِ پایین ثابت است؛ جابه‌جایی جایش را به هم می‌زد، فقط محو */
.detail-cascade > .float-card { animation-name: viewIn; }
/* کارتِ «تازه‌ترین آگهی‌ها»: بارِ اولی که دیده می‌شود از کمی بالاتر پایین می‌نشیند */
.feed-card.drop-wait { opacity: 0; }
.feed-card.drop-in { animation: detail-drop .28s cubic-bezier(.4, 0, .2, 1) both; }
/* صفحه دسته: نرم‌تر — محوِ آرام با جابه‌جاییِ کم */
@keyframes soft-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.feed-card.drop-soft { animation: soft-drop .6s cubic-bezier(0, 0, .2, 1) both; }
#view > * { animation: viewIn .22s ease-out; }
/* فهرستِ ذخیره‌ها و بازدیدهای اخیر: کارت‌به‌کارت پایین می‌نشیند (`cascadeIn`) — مثل اپ */
.cascade > .drop-wait { opacity: 0; }
.cascade > .drop-in { animation: detail-drop .28s cubic-bezier(.4, 0, .2, 1) both; }

.mine-head { align-items: center; }
.mine-head h1 { margin: 0; }

.row-card {
  display: block;
  padding: 12px 14px;
  margin-bottom: 8px;
  text-decoration: none;
  color: inherit;
}

/* ---------- نقشه ---------- */
.map {
  width: 100%;
  height: 260px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--sunken);
}
.map-tall { height: 360px; }
.maplibregl-ctrl-attrib { font-size: 10px; }

/* ورقه نوعِ نقشه — همتای باتم‌شیتِ اپ */
.map-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, .4);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.map-sheet {
  /* تمِ تیره: سفیدِ ثابت با متنِ روشن، نوشته‌ها دیده نمی‌شد */
  background: var(--sheet);
  color: var(--text);
  width: min(480px, 100%);
  border-radius: 16px 16px 0 0;
  padding: 16px 20px 28px;
}
/* عنوانِ ورقه‌ها همان قلمِ عنوانِ آگهی‌ها: بیروتیِ پررنگ، ۱٫۲ برابر — مثل اپ */
.map-sheet h3 { margin: 0 0 12px; font-family: YekanBakh, sans-serif; font-weight: 700; font-size: 1.2em; }

/* نشانه «نقشه» گوشه بالا-راستِ نقشه جزئیات آگهی — همتای اپ */
.map-wrap { position: relative; }
.map-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  pointer-events: none;
  z-index: 2;
}

/* بارگذاریِ نقشه جزئیات آگهی — همتای LoadingIndicator اپ */
.map-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 96px;
  height: 96px;
  margin: -48px 0 0 -48px;
  z-index: 3;
}
@keyframes map-spin { to { transform: rotate(360deg); } }

.slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.slides::-webkit-scrollbar { display: none; }
.slides > .slide { flex: 0 0 100%; position: relative; overflow: hidden; scroll-snap-align: center; }
.slides img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; cursor: zoom-in; display: block; }
.dots { position: absolute; bottom: 12px; right: 12px; display: flex; gap: 6px; padding: 6px 8px; border-radius: 8px; background: rgba(0,0,0,.35); }
.dots span { width: calc(6px + 10px * var(--t)); height: 6px; border-radius: 3px; background: rgba(255,255,255,calc(.6 + .4 * var(--t))); }

.photo-hero { position: relative; }
.photo-top { position: absolute; inset: 0 0 auto 0; z-index: 1; display: flex; gap: 8px; padding: 8px 12px 20px; background: linear-gradient(rgba(0,0,0,.4), transparent); color: #fff; }
.photo-top.plain { position: static; background: var(--bar); color: inherit; padding-bottom: 8px; }
.photo-chip { pointer-events: auto; font: inherit; font-size: 18px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,.32); color: inherit; cursor: pointer; }
.photo-top .photo-bar { gap: 8px; }
.photo-top .photo-bar-btn { border: 0; border-radius: 50%; background: rgba(0,0,0,.32); }
.photo-top.plain .photo-chip, .photo-top.plain .photo-bar-btn { background: none; }
.photo-count { display: flex; align-items: center; gap: 4px; position: absolute; bottom: 12px; left: 12px; padding: 2px 8px; border-radius: 8px; background: rgba(0,0,0,.35); color: #fff; font-size: 13px; }
.photo-count-icon { display: flex; }
.photo-bar { flex: 1; min-width: 0; display: flex; align-items: center; height: 40px; border-radius: 8px; background: none; overflow: hidden; }
.photo-search { flex: 1; min-width: 0; height: 100%; padding: 0 10px; font: inherit; font-size: 16px; border: 0; background: none; color: inherit; outline: none; }
.photo-bar-btn { width: 40px; height: 40px; font: inherit; font-size: 18px; border: 0; border-inline-start: 1px solid var(--outline, #ccc); background: none; color: inherit; cursor: pointer; }
.place-line { display: flex; align-items: center; gap: 6px; }
/* نقشه صفحه آگهی: فاصله بالا (از نشانی) و پایین (تا خطِ بعد) یکی — مثل اپ */
.map-block .place-line { margin-bottom: 0; }
.map-block .map-wrap { margin-block: 16px; }
.map-block .map-wrap + hr { margin-top: 0; }
.place-line img { width: 20px; height: 20px; }
.pin-line::before { width: 13px !important; height: 16px !important; margin-inline-end: 0 !important; flex: none; }
.float-bar { position: fixed; inset-inline: 12px; bottom: 12px; max-width: 720px; margin: 0 auto; display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 12px; background: var(--bar); box-shadow: 0 4px 16px rgba(0,0,0,.25); z-index: 20; }
.float-bar .price { flex: 1; margin: 0; }
.float-bar .row { flex-wrap: nowrap; margin: 0; }
.map-loading.cover { inset: 0; top: 0; left: 0; width: auto; height: auto; margin: 0; background: var(--bar) no-repeat center; display: flex; align-items: center; justify-content: center; }
/* کتابخانه نقشه بار نشد: پیام و «دوباره» وسطِ کادر */
.map-failed { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: var(--bar); text-align: center; padding: 16px; }
.map-loading.cover svg { width: 96px !important; height: 96px !important; }

/* صفحه آگهی‌ها: تصویرِ یک‌سومِ بالا و کادرِ محتوا روی آن */
.feed-hero {
  position: sticky; top: 0; z-index: 0;
  height: 100px; margin: -16px -16px -40px; padding: 0 16px 40px;
  display: flex; align-items: center; gap: 8px; box-sizing: border-box;
  background: linear-gradient(#1B5E20, #43A047); color: #fff;
}
.feed-logo { width: 32px; height: 32px; }
.feed-hero h1 { margin: 0; font-size: 22px; }
.feed-hero p { margin: 0 auto 0 0; padding-right: 4px; font-size: 12px; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-sheet {
  position: relative; z-index: 1;
  margin: -20px -16px 0; padding: 16px;
  min-height: 67vh;
  background: var(--bg, #fff); border-radius: 12px 12px 0 0;
}
/* دسته‌های صفحه آگهی‌ها: دو ردیف با اسکرولِ افقی، مثل اپ */
.feed-chips { display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, auto); gap: 8px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.feed-chips::-webkit-scrollbar { display: none; }
.feed-chips button { white-space: nowrap; }
.chip-count { display: block; font-size: 11px; opacity: .7; }
.feed-chips button { background: none; border: 0; }
.feed-chips button[aria-pressed="true"] { background: var(--primary); color: #fff; border-radius: 12px; }

/* پربازدیدهای هفته: ردیفِ افقی کارت‌های کوچک */
.popular-row { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.popular-row::-webkit-scrollbar { display: none; }
.popular-card { flex: 0 0 150px; color: inherit; text-decoration: none; }
.popular-card img { width: 150px; height: 120px; object-fit: cover; border-radius: 8px; display: block; }
.popular-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; }

/* پنل مدیر: منوی آبشاری — ستونِ باریکِ گروه‌ها و کادرِ صفحه‌ها سمتِ چپش (`adminMenu`)؛ صفحه کوچک دکمه و ورقه */
.admin-layout { display: flex; gap: 16px; align-items: flex-start; }
.admin-content { flex: 1; min-width: 0; }
.admin-rail { flex: 0 0 170px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 16px;
  /* ستونِ چسبان لایه خودش را می‌سازد؛ بی این کادرِ بازشده زیرِ محتوای صفحه می‌رفت */
  z-index: 55; }
/* پنل: کلِ پهنای کنارِ منو مالِ محتوای صفحه است (نه سقفِ ۹۰۰ صفحه‌های تک‌ستونی) */
.view:has(> div > .admin-layout) { max-width: none; }
/* «چیزی نیست»: وسطِ بخشِ محتوا */
.admin-empty { min-height: calc(100vh - 220px); display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; }
.admin-rail > a, .admin-rail-head { padding: 9px 10px; border-radius: 8px; color: inherit; text-decoration: none; background: none; border: 0;
  display: flex; align-items: center; gap: 8px; width: 100%; font: inherit; text-align: start; cursor: pointer; }
.admin-rail-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-rail-icon { flex: none; width: 22px; text-align: center; }
.admin-rail-arrow { flex: none; display: inline-flex; color: var(--muted, #777); transition: transform .15s; }
.admin-rail-head:hover, .admin-rail-item.open > .admin-rail-head, .admin-rail > a:hover { background: var(--surface); }
.admin-rail-item.on > .admin-rail-head { font-weight: 600; color: var(--primary); }
.admin-rail-item.open .admin-rail-arrow { transform: translateX(-3px); }
.admin-rail > a.on { background: var(--primary); color: var(--on-primary, #fff); font-weight: 600; }
.admin-flyout { position: fixed; z-index: 60; width: 240px; max-height: calc(100vh - 16px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 12px; padding: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  display: flex; flex-direction: column; gap: 2px; visibility: hidden; opacity: 0; transform: translateX(6px); transition: opacity .15s, transform .15s, visibility 0s .15s; }
.admin-rail-item.open > .admin-flyout { visibility: visible; opacity: 1; transform: none; transition: opacity .15s, transform .15s; }
.admin-flyout-title { font-size: 12px; color: var(--muted, #777); padding: 6px 10px 4px; }
.admin-flyout a, .admin-sheet-links a { padding: 9px 10px; border-radius: 8px; color: inherit; text-decoration: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.admin-flyout a:hover, .admin-flyout a:focus-visible, .admin-sheet-links a:hover { background: var(--surface); outline: none; }
.admin-flyout a.on, .admin-sheet-links a.on { background: var(--primary); color: var(--on-primary, #fff); font-weight: 600; }
.admin-flyout a.on .badge, .admin-sheet-links a.on .badge, .admin-rail > a.on .badge { background: var(--on-primary, #fff); color: var(--primary); }
.admin-menu-button { display: none; margin-bottom: 12px; }
.admin-sheet-groups { display: grid; gap: 6px; }
.admin-sheet-group summary { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 8px; cursor: pointer; font-weight: 500; }
.admin-sheet-group summary > :nth-child(2) { flex: 1; }
.admin-sheet-links { display: grid; gap: 2px; padding-inline-start: 30px; }
@media (max-width: 1023px) {
  .admin-layout { display: block; }
  .admin-rail { display: none; }
  .admin-menu-button { display: inline-flex; align-items: center; }
}

/* آمارِ کلی در پنل مدیر */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.stat-value { font-size: 26px; font-weight: 700; margin: 4px 0; }
.stat-chart { display: flex; gap: 8px; align-items: flex-end; height: 160px; padding-top: 8px; }
.stat-day { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.stat-bars { flex: 1; width: 100%; display: flex; gap: 3px; align-items: flex-end; justify-content: center; }
.stat-bar { width: 40%; min-height: 2px; border-radius: 4px 4px 0 0; }
.stat-bar.listings, .stat-key.listings { background: var(--primary); }
.stat-bar.users, .stat-key.users { background: #E8A33D; }
.stat-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.stat-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.popular-row.new-shops { display: grid; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: 200px; gap: 12px 14px; }
.shop-chip { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; min-width: 0; }
.shop-chip img { width: 56px; height: 56px; flex: none; border-radius: 14px; object-fit: cover; display: block; background: var(--surface); }
.shop-chip-text { min-width: 0; }
.shop-chip-text .popular-title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-chip-text .small { font-size: 11px; white-space: nowrap; }

/* دکمه و باتم‌شیتِ دسته‌ها در صفحه اطراف */
.cat-button { background: #fff; border: 0; color: var(--primary); font: inherit; font-weight: 600; cursor: pointer; border-radius: 4px; padding: 3px 10px; }
.cat-sheet-row { display: flex; align-items: center; gap: 16px; width: 100%; background: none; border: 0; font: inherit; padding: 12px 8px; cursor: pointer; text-align: start; color: var(--text); }
.cat-sheet-row.on { color: var(--primary); font-weight: 700; }
.cat-sheet-icon { font-size: 22px; width: 28px; text-align: center; }
.cat-sheet-check { margin-inline-start: auto; }

/* نوارِ شناورِ آگهی / کسب‌وکار در صفحه اطراف */
.nearby-mode { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); z-index: 40; display: flex; gap: 2px; padding: 0; overflow: hidden; background: var(--bar, #fff); border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,.18); }
.nearby-mode button { border: 0; background: var(--sunken); color: var(--text); font: inherit; border-radius: 4px; padding: 6px 28px; line-height: 1.6; cursor: pointer; }
.nearby-mode button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); font-weight: 600; }

/* بارگیری روی نقشه اطراف: heavy یعنی نقشه مات و لمس بسته */
.map-busy { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.map-busy.heavy { background: rgba(255,255,255,.2); pointer-events: auto; }
.map-blur canvas { filter: blur(3px); }

/* عنوانِ روی پین‌های نقشه: متنِ سفید با هاله تیره، مثل اپ */
.map-label { color: #1B1F1D; background: #fff; font-size: 12px; font-weight: 500; max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.5; padding: 2px 8px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.25); text-decoration: none; pointer-events: none;
  opacity: 0; transform: scaleX(.3); transform-origin: right center; transition: opacity .25s ease, transform .3s cubic-bezier(.2,.8,.3,1.2); }
/* باز شدنِ کادرِ اسم وقتی جا هست */
.map-label.open { opacity: 1; transform: none; pointer-events: auto; }

/* فونتِ سایت داخلِ نقشه هم (MapLibre خودش Helvetica می‌گذارد) */
.maplibregl-map, .maplibregl-popup-content, .map-label { font-family: YekanBakh, "Segoe UI", Tahoma, system-ui, sans-serif; }
/* «من» روی نقشه اطراف: نقطه آبی، نه پینِ سبزِ آگهی */
.me-dot { width: 16px; height: 16px; border-radius: 50%; background: #1A73E8; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(26,115,232,.2); }
/* کارتِ شناورِ آگهی/کسب‌وکارِ انتخاب‌شده، بالای نوارِ آگهی/کسب‌وکار */
.nearby-card { position: fixed; bottom: 128px; left: 50%; transform: translateX(-50%); z-index: 40; width: min(420px, calc(100% - 24px)); box-shadow: 0 6px 20px rgba(0,0,0,.2); border-radius: 12px; background: var(--surface, #fff); }
.nearby-card .card { margin: 0; }

/* کادرِ نازکِ فاصله، چسبیده به بالای کارتِ شناور */
.nearby-card { background: transparent; box-shadow: none; }
.nearby-card .card { box-shadow: 0 6px 20px rgba(0,0,0,.2); background: var(--surface, #fff); }
.nearby-distance { display: inline-block; margin-inline-start: 12px; padding: 2px 10px; font-size: 12px; background: var(--card-tab, #dce4df); border-radius: 8px 8px 0 0; }

/* انتخابِ یک مورد روی نقشه: بقیه کوچک‌تر و کم‌رنگ */
.pin-dim svg { width: 23px; height: 30px; }
.pin-dim { width: 23px !important; height: 30px !important; }
.map-label.dim { font-size: 10px; }
/* کادرِ اسمِ انتخاب‌شده: نورِ سبز آرام و پیوسته دورش می‌چرخد — مثل اپ */
@property --glow-turn { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --glow-a { syntax: '<number>'; inherits: false; initial-value: 0; }
.map-label { border: 2px solid transparent; padding: 0 6px; --glow-a: 0; transition: --glow-a .35s ease, opacity .25s ease, transform .3s cubic-bezier(.2,.8,.3,1.2); background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--glow-turn), transparent 0deg, rgb(46 125 79 / var(--glow-a)) 43deg, transparent 108deg, transparent 360deg) border-box; }
/* آمدن و رفتن نرم؛ چرخش روی کادرهای غیرکم‌رنگ می‌ماند تا هنگامِ محو شدن نایستد */
.map-label:not(.dim) { animation: glow-turn 2.4s linear infinite; }
.map-label.chosen { --glow-a: 1; }
@keyframes glow-turn { to { --glow-turn: 360deg; } }
.map-label.dim.open { opacity: 1; }
/* ضربدرِ بستنِ کارتِ شناور، بالا و وسط */
.nearby-close { display: block; float: left; margin: 0 8px 4px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--bar, #fff); box-shadow: 0 2px 8px rgba(0,0,0,.2); cursor: pointer; font-size: 14px; color: var(--text); }
#nearby-card-box > :last-child, .nearby-card > :last-child { clear: both; }

/* ورودِ کارتِ شناور: از پایین بالا، بعد ضربدر از پشتش */
@keyframes nearby-rise { from { transform: translate(-50%, 320px); } to { transform: translate(-50%, 0); } }
@keyframes nearby-close-rise { from { transform: translateY(38px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.nearby-card.enter { animation: nearby-rise .35s cubic-bezier(.2,.8,.3,1) both; }
.nearby-card.enter .nearby-close { position: relative; z-index: -1; animation: nearby-close-rise .3s cubic-bezier(.3,1.4,.5,1) .35s both; }

/* دایره تعدادِ موارد نزدیک به هم، و برچسبِ کوچکِ محدوده حدودی */
.map-cluster { min-width: 34px; height: 46px; padding: 0 9px 10px; border: 0; color: #fff; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
  /* پینِ جگری، عددِ سفید داخلِ سرش — مثل اپ */
  display: flex; align-items: center; justify-content: center; background: #9e2236 !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3.2 1.17 17.6 21.7' preserveAspectRatio='none'%3E%3Cpath d='M18.286 3.843A8.77 8.77 0 0 0 12 1.167a8.77 8.77 0 0 0-6.286 2.676c-3.06 3.147-3.04 6.919-1.63 10.288c1.393 3.33 4.163 6.363 6.822 8.339a1.83 1.83 0 0 0 2.188 0c2.66-1.976 5.43-5.01 6.822-8.34c1.41-3.368 1.43-7.14-1.63-10.287z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3.2 1.17 17.6 21.7' preserveAspectRatio='none'%3E%3Cpath d='M18.286 3.843A8.77 8.77 0 0 0 12 1.167a8.77 8.77 0 0 0-6.286 2.676c-3.06 3.147-3.04 6.919-1.63 10.288c1.393 3.33 4.163 6.363 6.822 8.339a1.83 1.83 0 0 0 2.188 0c2.66-1.976 5.43-5.01 6.822-8.34c1.41-3.368 1.43-7.14-1.63-10.287z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }

/* دکمه فعال کمی بزرگ‌تر و با سایه، روی دکمه دیگر می‌افتد — مثل اپ */
.nearby-mode { background: transparent !important; box-shadow: none !important; overflow: visible !important; gap: 0 !important; align-items: center; }
.nearby-mode button { background: var(--bar, #fff); box-shadow: 0 1px 3px rgba(0,0,0,.18); transform: scale(.97); transition: transform .25s ease, box-shadow .25s ease, background .25s ease; position: relative; z-index: 0; height: 36px; padding: 0 28px; }
.nearby-mode button + button { margin-inline-start: -8px; }
.nearby-mode button[aria-pressed="true"] { transform: scale(1.02); box-shadow: 0 4px 12px rgba(0,0,0,.25); z-index: 1; }

/* صفحه معرفیِ کسب‌وکار */
.shop-header .row { display: flex; gap: 12px; align-items: center; }
.shop-header h1 { margin: 0 0 4px; }
.shop-logo { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; background: var(--sunken); flex: 0 0 72px; }
.follow-button { width: 100%; margin-top: 12px; height: 40px; border-radius: 4px; border: 1px solid var(--primary); background: none; color: var(--primary); font: inherit; cursor: pointer; }
.follow-button.on { background: var(--primary); color: #fff; }
/* با اسکرول زیرِ نوارِ بالا می‌چسبد تا معلوم باشد کدام تب است — مثل اپ */
.shop-tabs { display: flex; border-bottom: 1px solid var(--sunken); margin: 12px 0; position: sticky; top: calc(var(--bar-height, 57px) + var(--shop-header-height, 0px)); z-index: 9; background: var(--bg); }
.shop-tabs button { flex: 1; background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px; font: inherit; cursor: pointer; color: var(--text); }
.shop-tabs button[aria-pressed="true"] { border-bottom-color: var(--primary); color: var(--primary); font-weight: 600; }

/* خروجِ کارتِ شناور: اول ضربدر پشتِ کارت، بعد کارت پایین */
@keyframes nearby-fall { from { transform: translate(-50%, 0); } to { transform: translate(-50%, 320px); } }
@keyframes nearby-close-fall { from { transform: translateY(0); opacity: 1; } to { transform: translateY(38px); opacity: 0; } }
.nearby-card.leave { animation: nearby-fall .26s ease-in .18s both; }
.nearby-card.leave .nearby-close { position: relative; z-index: -1; animation: nearby-close-fall .18s ease-in both; }

.map-label-sub { color: #2E7D4F; font-weight: 700; font-size: 11px; }
.map-label-sub.rating { color: #5B635F; font-weight: 500; }
.map-label-sub.rating .star { color: #F5A623; }
.map-label > div { overflow: hidden; text-overflow: ellipsis; }

/* نشانگرِ دایره‌ای با عکس در نقشه اطراف */
.photo-pin { display: flex; flex-direction: column; align-items: center; cursor: pointer; filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
.photo-pin-circle { width: 44px; height: 44px; border-radius: 50%; background: var(--pin); border: 3px solid var(--pin); box-sizing: border-box; overflow: hidden; border-width: 1.5px; }
.photo-pin-circle img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.photo-pin-tip { width: 0; height: 0; border-inline: 7px solid transparent; border-top: 7px solid var(--pin); margin-top: -2px; }
.photo-pin.pin-dim { transform: scale(.65); transform-origin: bottom center; width: auto !important; height: auto !important; transition: transform .25s ease; }
.photo-pin.pin-dim svg { width: auto; height: auto; }

/* کوچک و بزرگ شدنِ نرمِ نشانگرها با انتخابِ یک مورد */
.photo-pin { transition: transform .25s ease; transform-origin: bottom center; }
.photo-pin.pin-dim { transition: transform .25s ease; }
@keyframes pin-shrink { from { transform: scale(1); } to { transform: scale(.65); } }
.photo-pin.pin-dim.animate { animation: pin-shrink .25s ease both; }

.photo-pin-circle:not(:has(img)) { background: #fff; display: flex; align-items: center; justify-content: center; }
.photo-pin-logo { width: 55%; aspect-ratio: 222 / 205; background: #9aa19d; -webkit-mask: url(/img/logo-mark.png) center / contain no-repeat; mask: url(/img/logo-mark.png) center / contain no-repeat; }

/* کادرِ فاصله: بعد از کارت و پیش از ضربدر بالا می‌آید؛ هنگامِ بستن اول از همه پایین */
@keyframes nearby-distance-rise { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes nearby-distance-fall { from { transform: none; opacity: 1; } to { transform: translateY(24px); opacity: 0; } }
.nearby-card.enter .nearby-distance { position: relative; z-index: -1; animation: nearby-distance-rise .28s cubic-bezier(.3,1.4,.5,1) .35s both; }
.nearby-card.enter .nearby-close { animation-delay: .6s !important; }
.nearby-card.leave .nearby-distance { position: relative; z-index: -1; animation: nearby-distance-fall .16s ease-in .18s both; }
.nearby-card.leave .nearby-close { animation-delay: 0s !important; }
.nearby-card.leave { animation-delay: .34s !important; }

/* کادرِ فاصله برجسته: سایه و متنِ پررنگ */
.nearby-distance { box-shadow: 0 -2px 10px rgba(0,0,0,.22); font-weight: 700; }

/* موجودیِ کسب‌وکار — مثل اپ: شبکه دوستونه */
.stock-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.stock-item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block; }
.stock-item > div:nth-of-type(1) { margin-top: 6px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.stock-item[onclick], .panel .stock-item { cursor: pointer; }
.stock-add { width: 100%; margin: 0 0 12px; border-radius: 4px; }
.stock-photo { width: 120px; height: 120px; border: 1px dashed var(--line, #ccc); border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; margin-bottom: 12px; }
.stock-photo img { width: 100%; height: 100%; object-fit: cover; }

/* پیوندی که شکلِ دکمه دارد — گردی ۴ مثل همه دکمه‌ها */
a.button { display: inline-block; padding: max(0px, calc((38px - 1.7em) / 2)) 18px; border-radius: 4px; background: var(--primary); color: var(--on-primary); text-decoration: none; }
/* دکمه کوچکِ «متن کامل …» در دروازه قوانین */
a.button.small-button { padding: 6px 12px; font-size: .85rem; position: relative; overflow: hidden; }
/* برقی که یک بار از رویش رد می‌شود، مثل «تعداد نتیجه‌ها»ی نقشه (همان count-shine) */
a.button.small-button::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(100%); animation: count-shine .9s ease-out .45s both; pointer-events: none; }
button:disabled { opacity: .5; cursor: not-allowed; }

/* آیکونِ اخطار، مثل `Notice` اپ: خطا ErrorOutline، هشدار WarningAmber، اطلاع Info — به رنگِ متن */
.notice::before { content: ''; flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; background: currentColor;
  -webkit-mask: var(--notice-icon) center / contain no-repeat; mask: var(--notice-icon) center / contain no-repeat; }
.notice.error { --notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22.56 16.3L14.89 3.58a3.43 3.43 0 0 0-5.78 0L1.44 16.3a3 3 0 0 0-.05 3A3.37 3.37 0 0 0 4.33 21h15.34a3.37 3.37 0 0 0 2.94-1.66a3 3 0 0 0-.05-3.04Z'/%3E%3C/svg%3E"); }
.notice.warn { --notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22.56 16.3L14.89 3.58a3.43 3.43 0 0 0-5.78 0L1.44 16.3a3 3 0 0 0-.05 3A3.37 3.37 0 0 0 4.33 21h15.34a3.37 3.37 0 0 0 2.94-1.66a3 3 0 0 0-.05-3.04Z'/%3E%3C/svg%3E"); }
/* هشدار و خطا: مثلثِ توپر به رنگِ متن، «!» داخلش سفید (در تیره هم‌رنگِ زمینه) — مثل `AlertIcon` اپ */
:root { --notice-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 17a1 1 0 1 1 1-1a1 1 0 0 1-1 1m1-4a1 1 0 0 1-2 0V9a1 1 0 0 1 2 0Z'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --notice-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23212824' d='M12 17a1 1 0 1 1 1-1a1 1 0 0 1-1 1m1-4a1 1 0 0 1-2 0V9a1 1 0 0 1 2 0Z'/%3E%3C/svg%3E"); } }
:root[data-theme="dark"] { --notice-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23212824' d='M12 17a1 1 0 1 1 1-1a1 1 0 0 1-1 1m1-4a1 1 0 0 1-2 0V9a1 1 0 0 1 2 0Z'/%3E%3C/svg%3E"); }
.notice.error::before, .notice.warn::before { background: var(--notice-mark) center / contain no-repeat, currentColor; }
.notice.info { --notice-icon: var(--squircle-info); }

.info-button { background: none; border: 0; padding: 0 4px; color: var(--error); font-size: 18px; vertical-align: middle; cursor: pointer; }
.info-button .squircle-i { -webkit-mask-image: var(--squircle-info-outline); mask-image: var(--squircle-info-outline); }
/* فرمِ ثبت آگهی: آیکون‌های اطلاعات جگریِ اخطارها — مثل اپ */
.post-form .info-button { color: var(--error); }
/* با لکه قلم‌مو، آیکون نزدیکِ عنوان (جای دنباله لکه را جبران می‌کند) — مثل اپ */
.post-form .brush-title + .info-button { margin-inline-start: -16px; position: relative; top: -9px; font-size: 14px; }
/* عنوان‌های فرم ثبت آگهی: خطِ عمودیِ سبز کنارشان، بولد نه — مثل اپ (`LocalTitleBar`) */
.post-form .form-title, .post-form .panel > h3 { font-weight: 400; border-inline-start: 3px solid var(--primary); padding-inline-start: 8px; line-height: 1.4; }
.post-form .form-title b:not(.required-star), .post-form h3 .form-title { font-weight: 400; }
/* لکه قلم‌مو پشتِ عنوان‌های فرم ثبت آگهی (فقط `.post-form`؛ بیرونش متنِ ساده): گوشه‌های نامنظم، سبزِ کم‌رنگ از شروعِ متن تا آخرش محو، و ریش‌ریشِ موهای قلم —
   رگه‌های پررنگ‌تر (::after) و شکاف‌های روشن در نیمه محو (ماسکِ راه‌راه) — مثل اپ */
:is(.post-form, .section-tab) .brush-title, .brush-title.blue { --brush-fill: var(--primary-container); --brush-ink: var(--primary); }
/* انتخابِ ورقه‌ها (مثلِ «بی اعلان»): همان قلم‌مو به آبیِ اپ */
.brush-title.blue { --brush-fill: color-mix(in srgb, #0b6fa4 45%, transparent); --brush-ink: color-mix(in srgb, #0b6fa4 60%, transparent); }
:is(.post-form, .section-tab) .brush-title, .brush-title.blue { position: relative; display: inline-block; padding: 0 8px 0 18px; isolation: isolate; }
:is(.post-form, .section-tab) .brush-title::before, .brush-title.blue::before, :is(.post-form, .section-tab) .brush-title::after, .brush-title.blue::after { content: ''; position: absolute; inset: 8% 4px 4% 0; z-index: -1; border-radius: 40% 12% 45% 10% / 55% 30% 65% 35%; }
/* هر عنوان یکی از ۴ شکل (`data-v` از متنش): گوشه‌ها، بلندی و جای رگه‌ها کمی فرق — مثل اپ */
:is(.post-form, .section-tab) .brush-title[data-v="1"]::before, .brush-title.blue[data-v="1"]::before, :is(.post-form, .section-tab) .brush-title[data-v="1"]::after, .brush-title.blue[data-v="1"]::after { inset: 4% 2px 8% 0; border-radius: 30% 18% 50% 8% / 45% 40% 60% 30%; }
:is(.post-form, .section-tab) .brush-title[data-v="1"]::after, .brush-title.blue[data-v="1"]::after { background-position: 0 2px; }
:is(.post-form, .section-tab) .brush-title[data-v="2"]::before, .brush-title.blue[data-v="2"]::before, :is(.post-form, .section-tab) .brush-title[data-v="2"]::after, .brush-title.blue[data-v="2"]::after { inset: 10% 6px 2% 2px; border-radius: 50% 10% 35% 15% / 60% 25% 55% 40%; }
:is(.post-form, .section-tab) .brush-title[data-v="2"]::after, .brush-title.blue[data-v="2"]::after { background-position: 0 4px; }
:is(.post-form, .section-tab) .brush-title[data-v="3"]::before, .brush-title.blue[data-v="3"]::before, :is(.post-form, .section-tab) .brush-title[data-v="3"]::after, .brush-title.blue[data-v="3"]::after { inset: 6% 3px 6% 4px; border-radius: 35% 20% 40% 12% / 40% 45% 70% 25%; }
:is(.post-form, .section-tab) .brush-title[data-v="3"]::after, .brush-title.blue[data-v="3"]::after { background-position: 0 6px; }
:is(.post-form, .section-tab) .brush-title::before, .brush-title.blue::before {
  background: linear-gradient(to left, var(--brush-fill), color-mix(in srgb, var(--brush-fill) 75%, transparent) 50%, color-mix(in srgb, var(--brush-fill) 22%, transparent));
  -webkit-mask-image: linear-gradient(to left, #000 45%, transparent 75%), repeating-linear-gradient(to bottom, #000 0 2px, rgba(0,0,0,.55) 2px 3px, #000 3px 6px, rgba(0,0,0,.4) 6px 7px, #000 7px 9px);
  mask-image: linear-gradient(to left, #000 45%, transparent 75%), repeating-linear-gradient(to bottom, #000 0 2px, rgba(0,0,0,.55) 2px 3px, #000 3px 6px, rgba(0,0,0,.4) 6px 7px, #000 7px 9px); }
:is(.post-form, .section-tab) .brush-title::after, .brush-title.blue::after {
  background: repeating-linear-gradient(to bottom, transparent 0 3px, color-mix(in srgb, var(--brush-ink) 16%, transparent) 3px 4.5px, transparent 4.5px 8px, color-mix(in srgb, var(--brush-ink) 10%, transparent) 8px 9px, transparent 9px 11px);
  -webkit-mask-image: linear-gradient(to left, #000, transparent 90%); mask-image: linear-gradient(to left, #000, transparent 90%); }
/* راهنماهای خودِ فرم: آیکونِ چهارگوشِ گرد (همان خطِ سقفِ آگهی)؛ داخلِ ورقه همان ⓘ */
.post-info:not(.in-sheet) { display: flex; align-items: flex-start; gap: 6px; }
.post-info:not(.in-sheet)::before { content: ''; flex: none; width: 16px; height: 16px; margin-top: 1px; background: #0b6fa4; -webkit-mask: var(--squircle-info) center / contain no-repeat; mask: var(--squircle-info) center / contain no-repeat; }
.post-info:empty { display: none; }
/* روی صحنه تیره دوربین و برش: آیکون جگریِ روشن — مثل اپ (`DarkStageRed`) */
.post-info.dark-stage::before { background: #FF6E61; }
/* داخلِ ورقه‌ها همان آیکونِ چهارگوش، خاکستری — مثل اپ (`AppSheet`) */
.map-sheet .post-info:not(.in-sheet)::before { background: var(--muted); }
.post-info.in-sheet { display: flex; align-items: flex-start; gap: 6px; }
.post-info.in-sheet::before { content: ''; flex: none; width: 16px; height: 16px; margin-top: 1px; background: var(--error); -webkit-mask: var(--squircle-info) center / contain no-repeat; mask: var(--squircle-info) center / contain no-repeat; }
/* آیکونِ چهارگوشِ اطلاعات به رنگِ متنِ اطراف (دکمه ⓘ ِ عنوانِ بخش، برچسبِ وضعیت) — جای نویسه ⓘ */
.squircle-i { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; background: currentColor; -webkit-mask: var(--squircle-info) center / contain no-repeat; mask: var(--squircle-info) center / contain no-repeat; }
.status-tab .squircle-i { margin-inline-end: 4px; }
.quota-count { font-size: 15px; }

/* نشانیِ تازه از زیرِ کادرِ نقشه پایین می‌لغزد */
.address-drop { position: relative; z-index: 0; animation: address-drop .35s cubic-bezier(.2,.8,.3,1) both; }
@keyframes address-drop { from { transform: translateY(-100%); opacity: 0; max-height: 0; margin-block: 0; } to { transform: none; opacity: 1; max-height: 6em; } }
.address-lift { overflow: hidden; animation: address-lift .25s ease-in both; }
@keyframes address-lift { from { opacity: 1; max-height: 6em; } to { opacity: 0; max-height: 0; margin-block: 0; } }

/* اخطارِ مستقل در کادر (`boxed = true` در اپ) */
.notice.boxed { padding: 10px 12px; border-radius: 12px; }
.notice.error.boxed { background: var(--error-bg); }
.notice.warn.boxed { background: var(--pending-bg); }
.notice.info.boxed { background: var(--sunken); }

/* دکمه اصلی ۷۰٪ و بی‌خیال ۳۰٪، کنارِ هم */
.save-row { display: flex; gap: 8px; margin-top: 12px; }
.save-row > :first-child { flex: 7; }
.save-row > :last-child { flex: 3; }

/* برچسبِ «تأیید شده» چسبیده به بالا-چپِ کارت */
.status-tab { width: fit-content; margin: 0 auto -1px 12px; margin-inline: auto 12px; padding: 2px 10px; font-size: 12px; font-weight: 700; color: var(--on-primary); background: var(--primary); border-radius: 8px 8px 0 0; box-shadow: 0 -2px 6px rgba(0,0,0,.15); }
.status-tab + .panel { margin-top: 0; }
/* با ورود از پشتِ کارت بالا می‌آید — مثلِ کادرِ فاصله «اطراف» */
.status-tab { position: relative; z-index: 0; animation: nearby-distance-rise .28s cubic-bezier(.3,1.4,.5,1) .25s both; }
.status-tab + .panel { position: relative; z-index: 1; }

.status-tab.ok { background: var(--primary); color: var(--on-primary); }
.status-tab.error { background: var(--error); color: #fff; }
.status-tab.none { background: var(--sunken); color: var(--muted); }
/* تغییرِ وضعیت: قبلی پایین می‌رود، تازه بی‌درنگ بالا می‌آید؛ رندرِ دوباره با همان وضعیت بی‌حرکت (`statusTab`) */
.status-tab.still { animation: none; }
.status-tab.sinking { animation: nearby-distance-fall .2s ease-in both; }
.status-tab.fresh { animation-delay: 0s; }

.rating .star { color: #F5A623; }
/* ستاره هم‌خطِ عدد — مثل اپ */
span.rating.muted { display: inline-flex; align-items: center; gap: 4px; }
span.rating.muted .star { display: inline-flex; line-height: 0; }
span.rating.muted .round-star { vertical-align: 0; }
.vote-box { overflow: hidden; }
.vote-leave > * { animation: vote-up .28s ease-in forwards; }
.vote-enter { animation: vote-down .32s ease-out; }
@keyframes vote-up { to { transform: translateY(-100%); opacity: 0; } }
@keyframes vote-down { from { transform: translateY(-100%); opacity: 0; } }
.vote-box:has(> .vote-result), .vote-enter { text-align: center; }
.vote-result { display: block; text-align: center; font-size: 12px; padding: 4px 14px; border-radius: 0; background: var(--line); }
/* مثل اپ: زمینه نوارِ زیرِ هدرِ گفتگو، متنِ سبز، به اندازه متن */
.vote-result.rejected { color: var(--error); background: var(--error-bg); font-weight: 600; }
.vote-result.ok { color: var(--primary, #2e7d32); background: var(--error-bg); font-weight: 600; }
.vote.on { border-color: var(--primary); background: var(--primary-container); }
.empty-center { text-align: center; padding: 48px 0; }
.review-row p { margin: 4px 0 8px; }
.vote { background: none; border: 1px solid var(--line); padding: 6px 10px; margin-inline-start: 6px; font-size: 18px; }

/* دنبال‌شده‌ها */
.following-row { display: flex; align-items: center; gap: 12px; }
.following-name { flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.small-logo { width: 48px; height: 48px; flex-basis: 48px; }

.vote-send { display: block; width: 60%; margin-inline-start: 0; margin-inline-end: auto; }
.owner-hint { font-weight: normal; margin-inline-start: 8px; vertical-align: super; font-size: 11px; }
.owner-avatar { display: inline-block; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--line); margin-inline-end: 8px; vertical-align: middle; }
.zoomable { cursor: zoom-in; }
.zoom-backdrop { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.6); display: grid; place-items: center; padding: 16px; }
.zoom-image { width: min(90vw, 480px); aspect-ratio: 1; object-fit: cover; border-radius: 16px; }
.zoom-image.round { border-radius: 50%; }
.complete-button { font-size: 12px; font-weight: normal; padding: 2px 12px; margin-inline-end: 8px; }
.map-holder { position: relative; }
.finding-me { position: absolute; bottom: 16px; right: 16px; z-index: 5; font-size: 11px; padding: 4px 8px; border-radius: 8px; background: var(--surface, #fff); box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.update-me { border: none; cursor: pointer; font-family: inherit; color: inherit; }
.update-me.pulse { animation: update-pulse .7s ease-in-out 2; }
@keyframes update-pulse { 50% { transform: scale(1.12); } }
.area-sheet { position: absolute; top: 0; left: 0; right: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.area-list { width: 100%; height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: var(--surface); border-radius: 0 0 16px 16px; pointer-events: auto; box-sizing: border-box; padding: 0 12px; display: flex; flex-direction: column; gap: 8px; }
.area-sheet.open .area-list { box-shadow: 0 4px 12px rgba(0,0,0,.2); padding: 4px 12px; }
.area-list { gap: 0 !important; }
.area-item { border: none !important; box-shadow: none !important; background: transparent !important; border-radius: 0 !important; padding-inline: 0 !important; }
.area-item + .area-item { border-top: 1px solid var(--border) !important; }
.area-handle { pointer-events: auto; touch-action: none; border: none; background: var(--surface); color: inherit; font: inherit; font-size: 12px; padding: 4px 14px; border-radius: 0 0 12px 12px; box-shadow: 0 2px 6px rgba(0,0,0,.2); cursor: grab; }
.area-arrow { display: inline-block; transition: transform .3s; }
.area-sheet.open .area-arrow { transform: rotate(180deg); }
/* نوارِ نازکِ خطا، تمام‌عرض زیرِ «آگهی / کسب‌وکار» — مثل اپ */
.nearby-error { position: fixed; left: 0; right: 0; bottom: 52px; z-index: 39; height: 22px; line-height: 22px; text-align: center; background: var(--bar); color: var(--error); font-size: 12px; font-weight: 500; }
.nearby-distance.approx { background: #f57c00; color: #fff; margin-inline-start: 6px; }
.card-time { box-shadow: none; font-size: 11px; font-weight: 500; color: inherit; }
.card-time + .card-time { margin-inline-start: 6px; }
.card-place { max-width: calc(100% - 120px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.zoom-frame { display: flex; flex-direction: column; }
.zoom-image { position: relative; z-index: 1; }
.zoom-close { margin: 8px 8px 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--bar, #fff); color: var(--text); box-shadow: 0 2px 8px rgba(0,0,0,.2); font-size: 16px; cursor: pointer; animation: zoom-close-drop .3s cubic-bezier(.3,1.4,.5,1) .25s both; }
@keyframes zoom-close-drop { from { transform: translateY(-48px); opacity: 0; } to { transform: none; opacity: 1; } }
.zoom-backdrop.closing .zoom-close { animation: zoom-close-lift .16s ease-in both; }
@keyframes zoom-close-lift { from { transform: none; opacity: 1; } to { transform: translateY(-48px); opacity: 0; } }
.owner-line { font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; }
.owner-line .owner-avatar { width: 28px; height: 28px; }
/* سربرگِ کسب‌وکار هم‌رنگِ نوارِ بالا و ثابت زیرِ آن — مثل اپ */
.panel.shop-header { background: var(--bar); position: sticky; top: var(--bar-height, 57px); z-index: 9; margin-bottom: 0; }
/* زمینه سربرگ رنگِ نوار است و خطِ پیش‌فرضِ دکمه رویش گم می‌شود */
.shop-header .save-row button { border-color: var(--muted); }
.header-rating { margin-inline-start: auto; align-self: flex-start; }
.header-rating .rating { font-weight: 700; color: var(--text); }

/* دسته آگهی بالای قیمت: هم‌اندازه، ولی کم‌وزن‌تر */
.card-category { font-weight: 400; }

/* نقطه‌های نمایشگرِ عکس (موجودی) */
.lightbox-dots { position: absolute; z-index: 2; bottom: 18px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; }
.lightbox-dots span { box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
.lightbox-dots span { width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.lightbox-dots span.on { background: var(--primary); width: 9px; height: 9px; }
.lightbox.zoomed .lightbox-dots { opacity: 0; }
/* عکس‌های موجودی: نشانِ تعداد و ردیفِ عکس‌های فرم */
.stock-image { position: relative; }
.stock-image .photo-count { bottom: 8px; left: auto; right: 8px; }
.stock-photos { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.stock-photos .stock-photo { margin-bottom: 0; width: 88px; height: 88px; position: relative; }
.stock-photo .remove { position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; line-height: 22px; padding: 0; cursor: pointer; }

/* بجِ عدد کنارِ عنوانِ تب */
/* کادرِ کوچکِ مربعی هم‌رنگِ سربرگ، کمی بالاتر از متن — مثل اپ */
.tab-badge { display: inline-block; margin-inline-start: 4px; padding: 1px 4px; border-radius: 4px; background: var(--bar); color: inherit; font-size: 10px; line-height: 12px; text-align: center; vertical-align: 6px; }

/* آیکونِ ساعت و پین در کادرهای کوچکِ بالای کارت */
.card-tab-icon { display: inline-flex; vertical-align: -1px; margin-inline-end: 4px; }

/* دکمه دسته‌ها در صفحه آگهی‌ها */
.feed-cat { padding: 4px 0 8px; }
.feed-cat-button {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 4px; border: 1px solid var(--border, #ccc);
  background: transparent; font: inherit; text-align: start; cursor: pointer;
}
.feed-cat-button.on { background: #0B6FA4; color: #fff; border-color: #0B6FA4; }
.feed-cat-button .grow, .cat-sheet-row .grow { flex: 1; display: flex; flex-direction: column; }
.feed-cat-clear { padding: 0 6px; font-weight: 700; }
/* وضعیتِ آگهیِ خودم، بالای کادرِ شناور و داخلِ همان */
.float-card { position: fixed; inset-inline: 12px; bottom: 12px; max-width: 720px; margin: 0 auto; border-radius: 12px; background: var(--bar); box-shadow: 0 4px 16px rgba(0,0,0,.25); z-index: 20; overflow: hidden; }
.float-card .float-bar { position: static; box-shadow: none; border-radius: 0; max-width: none; }
.float-strip { padding: 4px 16px; min-height: 22px; font-size: 12px; line-height: 18px; text-align: center; color: var(--error, #b3261e); border-bottom: 1px solid var(--border, #ddd); }
.float-strip.muted { color: var(--muted, #6b7280); }

/* تغییراتِ ویرایش و کارنامه کاربر (مدیر) */
.changes { margin: 8px 0; padding: 8px 12px; border-inline-start: 3px solid var(--primary); background: var(--bar); border-radius: 4px; }
.change-row { padding: 6px 0; border-bottom: 1px solid var(--border, #ddd); }
.change-row:last-child { border-bottom: 0; }
.change-label { font-weight: 600; font-size: 13px; }
.change-from { text-decoration: line-through; opacity: .75; white-space: pre-wrap; }
.change-to { white-space: pre-wrap; }
.thumb.added { outline: 2px solid var(--primary); }
.thumb.removed { outline: 2px solid #b3261e; opacity: .7; }
.action-row { padding: 10px 0; border-bottom: 1px solid var(--border, #ddd); }
.action-detail { white-space: pre-wrap; margin-top: 4px; }

/* پیش‌نویس‌ها هم‌شکلِ کارتِ آگهی */
.draft-item { padding: 8px 0; border-bottom: 1px solid var(--border, #ddd); }
.draft-row { align-items: center; gap: 8px; }
.draft-link { display: flex; gap: 12px; align-items: flex-start; flex: 1; color: inherit; text-decoration: none; }
.draft-image { width: 128px; height: 96px; object-fit: cover; border-radius: 12px; background: var(--bar); flex: none; }
.draft-text { display: flex; flex-direction: column; gap: 4px; height: 96px; min-width: 0; }
.draft-time { margin-top: auto; display: flex; align-items: center; gap: 4px; }

/* فهرستِ گفتگوها، مثل اپ */
.chat-row { align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.chat-main { flex: 1; min-width: 0; flex-wrap: nowrap; gap: 12px; margin: 0; }
.chat-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--bar); flex: none; }
.chat-text { min-width: 0; }
.chat-text > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.unread-dot { width: 22px; height: 22px; border-radius: 50%; background: #D32F2F; color: #fff; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.chat-text { display: flex; flex-direction: column; gap: 10px; }
.chat-side { gap: 10px; }
.chat-row { display: flex; }
.chat-text { flex: 1; }
.chat-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.chat-line > :first-child { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-line > :last-child:not(:first-child) { flex: none; }
/* ساعت و تیکِ پیام */
.bubble .stamp { display: inline-flex; gap: 3px; align-items: center; margin-inline-start: 12px; font-size: 11px; opacity: .8; vertical-align: bottom; }
.bubble .tick { color: inherit; font-size: 12px; letter-spacing: -4px; padding-inline-end: 4px; }
.bubble .tick.read { color: #2E7D32; opacity: 1; }
.tick.list-tick { font-size: 12px; letter-spacing: -4px; padding-inline-end: 4px; }
.tick.list-tick.read { color: #2E7D32; }
.nav-unread { width: 18px; height: 18px; font-size: 10px; margin-inline-start: 4px; vertical-align: 2px; }
.nav-unread[hidden] { display: none; }
.chat-head { display: flex; align-items: center; gap: 10px; }
.chat-avatar.small { width: 36px; height: 36px; }
.chat-subject { display: block; font-weight: 400; margin-top: 6px; color: var(--muted, #6b7280); }
.chat-head .seen { font-weight: 400; color: var(--muted, #6b7280); }
.chat-head .seen.online { color: var(--primary); }
.chat-kind { color: var(--primary); margin-inline-start: 12px; }
/* پیامِ عکس: بی حاشیه، ساعت و تیک روی عکس */
.bubble.image { padding: 0; background: none; position: relative; width: 220px; height: 220px; }
.bubble.image img { width: 220px; height: 220px; object-fit: cover; border-radius: 12px; display: block; cursor: zoom-in; }
.bubble.image .stamp { position: absolute; bottom: 6px; inset-inline-end: 6px; margin: 0; padding: 1px 6px; border-radius: 8px; background: rgba(0,0,0,.45); color: #fff; opacity: 1; }
.last-preview { display: inline-flex; align-items: center; gap: 6px; }
.last-thumb { width: 22px; height: 22px; border-radius: 4px; object-fit: cover; flex: none; }
.chat-avatar { border: 0.5px solid var(--border, #d0d0d0); box-sizing: border-box; }
/* عکسِ دریافتیِ دانلودنشده: کدر با دکمه دانلود */
.blurred-image { position: relative; width: 220px; height: 220px; border-radius: 12px; overflow: hidden; background: var(--bar); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.blurred-image img.blur { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(14px); transform: scale(1.15); }
.download-dot { position: relative; width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(0,0,0,.45); color: #fff; font-size: 24px; cursor: pointer; }
.blurred-image.loading .download-dot::after { content: ''; position: absolute; inset: 12px; border: 3px solid #fff; border-top-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* نشانگرِ کوچکِ «آگهی‌های بعد در راه‌اند» پایینِ فهرستِ بی‌انتها — مثل اپ */
.page-spinner { width: 32px; height: 32px; margin: 16px auto; border: 3px solid var(--primary); border-top-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
span.last-thumb { display: inline-block; background: var(--bar); }
.chat-kind.list-tag { font-size: 11px; font-weight: 500; }
/* حجمِ فایل روی عکس، و پخش‌کننده پیامِ صوتی */
.size-tag { position: absolute; top: 6px; right: 6px; padding: 1px 6px; border-radius: 8px; background: rgba(0,0,0,.45); color: #fff; font-size: 11px; }
.voice { display: inline-flex; align-items: center; gap: 8px; min-width: 220px; }
.voice-btn { width: 32px; height: 32px; border-radius: 50%; border: 0; background: transparent; color: inherit; font-size: 16px; cursor: pointer; padding: 0; }
.voice-bar { flex: 1; accent-color: currentColor; }
/* نوارِ صدا: خطِ نازک با دایره توپر؛ دکمه پخش داخلِ دایره */
.voice .voice-btn { width: 36px; height: 36px; flex: none; background: #2E7D32; color: #fff; font-size: 14px; position: relative; }
.voice-track { flex: 1; display: flex; flex-direction: column; }
.voice-track .small { align-self: flex-start; }
.voice-bar { -webkit-appearance: none; appearance: none; height: 20px; background: transparent; width: 100%; direction: rtl; }
.voice-bar::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: linear-gradient(to left, currentColor var(--fill, 0%), rgba(127,127,127,.35) var(--fill, 0%)); }
.voice-bar::-moz-range-track { height: 2px; background: rgba(127,127,127,.35); }
.voice-bar::-moz-range-progress { height: 2px; background: currentColor; }
.voice-bar::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: currentColor; margin-top: -5px; }
.voice-bar::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: currentColor; }
.voice.pending .voice-bar::-webkit-slider-thumb { visibility: hidden; }
/* پخش‌کننده چپ‌به‌راست برای هر دو طرف: دکمه چپ، پیشرفت از چپ، زمان زیرِ ابتدای نوار */
.voice { direction: ltr; }
.voice-bar { direction: ltr; }
.voice-bar::-webkit-slider-runnable-track { background: linear-gradient(to right, currentColor var(--fill, 0%), rgba(127,127,127,.35) var(--fill, 0%)); }
.voice-track .small { align-self: flex-start; }
/* خطِ «خوانده نشده» */
.unread-divider { display: flex; align-items: center; gap: 10px; margin: 6px 8px; color: var(--primary); font-size: 12px; }
.unread-divider::before, .unread-divider::after { content: ''; flex: 1; height: 1px; background: var(--border, #ddd); }
/* بجِ روز داخلِ چت */
.day-badge { display: flex; justify-content: center; margin: 4px 0; }
.day-badge span { padding: 3px 12px; border-radius: 12px; background: var(--sunken, #eee); color: var(--muted, #6b7280); font-size: 12px; }
.chat-subject { display: flex; align-items: center; }
.chat-subject .chat-kind { margin-inline-start: auto; padding-inline-start: 12px; }
.dl-icon { display: inline-flex; } .dl-icon svg { width: 22px; height: 22px; }

/* ویرایش و حذفِ پیام — مثل اپ */
.bubble-row { display: flex; align-items: flex-end; gap: 4px; max-width: 80%; }
.bubble-row.mine { align-self: flex-start; }
.bubble-row.theirs { align-self: flex-end; }
.bubble-row .bubble { max-width: 100%; -webkit-touch-callout: none; }
.bubble.deleted { background: var(--sunken); color: var(--muted); font-style: italic; opacity: .75; }
.edited-tag { font-size: 9px; color: var(--muted); white-space: nowrap; padding-bottom: 2px; }
.edit-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 4px; }
.edit-bar[hidden] { display: none; }
.edit-bar .edit-title { color: var(--primary); }
.edit-bar .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }
.cat-sheet-row.danger { color: var(--error); }

/* گفتگوهای کاربر در پنل مدیر */
.admin-chat-row { display: block; width: 100%; text-align: start; }
.admin-chat-thread { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 12px; }
.admin-chat-msg { padding: 8px 12px; border-radius: 12px; background: var(--sunken); max-width: 85%; align-self: flex-end; }
.admin-chat-msg.self { align-self: flex-start; background: var(--primary-container); color: var(--on-primary-container); }
.admin-chat-msg.removed { outline: 1px dashed var(--error); }
.admin-chat-text { white-space: pre-wrap; }
.admin-chat-image { max-width: 220px; border-radius: 8px; cursor: zoom-in; display: block; }
.admin-chat-old { text-decoration: line-through; }

/* رأی به نظر و پاسخِ مالک — مثل اپ */
.review-actions { gap: 6px; align-items: center; }
.review-react { padding: 2px 10px; border-radius: 4px; font-size: 13px; }
.review-react.on { background: var(--primary-container); color: var(--on-primary-container); font-weight: 600; }
.review-row { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin: 10px 0; }
/* پاسخِ مالک در همان کادر، با خطِ افقی — مثل اپ */
.review-reply { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.review-reply > .small { color: var(--primary); font-weight: 600; }
.review-reply p { margin: 4px 0; }
.review-row.mine { background: var(--error-bg); }
.review-mine { color: var(--primary); font-weight: 600; }
.review-who { display: inline-flex; align-items: center; gap: 8px; }
.review-avatar { width: 32px; height: 32px; border-radius: 7px; }

/* امتیازِ ستاره‌ای — مثل اپ */
.star-line { color: #f5a623; font-size: 13px; margin-inline-start: 6px; display: inline-flex; gap: 1px; vertical-align: middle; }
.star-line .star-empty { color: var(--line); }
.star-pick .vote.star { font-size: 22px; color: #f5a623; background: none; border: 0; padding: 0 2px; cursor: pointer; }
.star-counts { max-width: 220px; margin: 6px 0; }
.star-counts .star-line { margin: 0; }

/* زمینه گفتگو مثلِ اپ: رنگِ ملایم با طرحِ برگ و گل و گلدان؛ حباب‌ها رویش برجسته */
:root { --chat-wall: #E7EAE4; --chat-mine: #C0E3A6; --chat-on-mine: #1C2E1B; --chat-theirs: #FFFFFF; --chat-on-theirs: #1F2621; --chat-stamp: #1E88E5; --chat-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='144' height='144' fill='none' stroke='rgba(46%2C94%2C42%2C0.07)' stroke-width='1.4'%3E%3Cg transform='translate(20 20) rotate(-40)'%3E%3Cpath d='M0-9Q8 0 0 9Q-8 0 0-9M0-6V9'/%3E%3C/g%3E%3Cg transform='translate(92 20)'%3E%3Ccircle cx='0' cy='-5' r='3.2'/%3E%3Ccircle cx='0' cy='-5' r='3.2' transform='rotate(72)'/%3E%3Ccircle cx='0' cy='-5' r='3.2' transform='rotate(144)'/%3E%3Ccircle cx='0' cy='-5' r='3.2' transform='rotate(216)'/%3E%3Ccircle cx='0' cy='-5' r='3.2' transform='rotate(288)'/%3E%3C/g%3E%3Cg transform='translate(56 92)'%3E%3Cpath d='M-6 2H6L4 11H-4ZM0 2V-8M0-4Q-6-8-7-3Q-3-2 0-4M0-6Q6-10 7-5Q3-4 0-6'/%3E%3C/g%3E%3Cg transform='translate(128 92) rotate(30)'%3E%3Cpath d='M0-9Q8 0 0 9Q-8 0 0-9M0-6V9'/%3E%3C/g%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --chat-wall: #131514; --chat-mine: #2D4A31; --chat-on-mine: #E2EFDF; --chat-theirs: #262C28; --chat-on-theirs: #E1E5E1; --chat-stamp: #64B5F6; --chat-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='144' height='144' fill='none' stroke='rgba(255%2C255%2C255%2C0.05)' stroke-width='1.4'%3E%3Cg transform='translate(20 20) rotate(-40)'%3E%3Cpath d='M0-9Q8 0 0 9Q-8 0 0-9M0-6V9'/%3E%3C/g%3E%3Cg transform='translate(92 20)'%3E%3Ccircle cx='0' cy='-5' r='3.2'/%3E%3Ccircle cx='0' cy='-5' r='3.2' transform='rotate(72)'/%3E%3Ccircle cx='0' cy='-5' r='3.2' transform='rotate(144)'/%3E%3Ccircle cx='0' cy='-5' r='3.2' transform='rotate(216)'/%3E%3Ccircle cx='0' cy='-5' r='3.2' transform='rotate(288)'/%3E%3C/g%3E%3Cg transform='translate(56 92)'%3E%3Cpath d='M-6 2H6L4 11H-4ZM0 2V-8M0-4Q-6-8-7-3Q-3-2 0-4M0-6Q6-10 7-5Q3-4 0-6'/%3E%3C/g%3E%3Cg transform='translate(128 92) rotate(30)'%3E%3Cpath d='M0-9Q8 0 0 9Q-8 0 0-9M0-6V9'/%3E%3C/g%3E%3C/svg%3E"); }
}
.messages { background: var(--chat-wall) var(--chat-pattern); border-radius: 12px; padding: 8px; }
.bubble { background: var(--chat-theirs); color: var(--chat-on-theirs); }
.bubble.mine { background: var(--chat-mine); color: var(--chat-on-mine); }
.bubble.mine:not(.image) .stamp .tick { color: inherit; }
.bubble.mine:not(.image) .stamp .tick.read { color: var(--chat-stamp); opacity: 1; }
.bubble.deleted { background: var(--chat-theirs); color: var(--chat-on-theirs); }
.bubble.mine.deleted { background: var(--chat-mine); color: var(--chat-on-mine); }
/* عکس داخلِ حباب با حاشیه نازک */
.bubble.image { padding: 3px; width: auto; height: auto; background: var(--chat-theirs); }
.bubble.image.mine { background: var(--chat-mine); }
.bubble.image .stamp { bottom: 9px; inset-inline-end: 9px; }
.bubble:not(.image) { padding-left: 8px; }

/* منوی کوچکِ ویرایش/حذفِ پیام — مثل اپ */
.msg-menu-layer { position: fixed; inset: 0; z-index: 60; }
.msg-menu { position: fixed; min-width: 150px; padding: 6px 0; border-radius: 8px; background: var(--surface, var(--bg)); box-shadow: 0 4px 16px rgba(0,0,0,.2); display: flex; flex-direction: column; }
.msg-menu button { background: none; border: 0; border-radius: 0; text-align: start; padding: 10px 16px; font: inherit; font-weight: 600; color: inherit; cursor: pointer; }
.msg-menu button:hover { background: var(--sunken); }
.msg-menu button.danger { color: var(--error, #c62828); }
.bubble-row.held { background: rgba(33,150,243,.14); border-radius: 8px; }
.msg-menu { max-width: 280px; }
.msg-menu > button { padding: 7px 14px; font-size: 14px; }
.reaction-bar { display: flex; gap: 2px; overflow-x: auto; padding: 0 6px 4px; border-bottom: 1px solid var(--sunken); margin-bottom: 2px; scrollbar-width: none; }
.reaction-bar button { flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; font-size: 20px; cursor: pointer; }
.reaction-bar button.on { background: rgba(33,150,243,.18); }
.reaction-chips { display: flex; gap: 2px; margin-top: -4px; padding: 0 4px; font-size: 16px; position: relative; }
.reaction-chips.mine { align-self: flex-start; }
.reaction-chips.theirs { align-self: flex-end; }
.reaction-chips span { padding: 0 3px; border-radius: 50%; }
.reaction-chips span.own { background: rgba(33,150,243,.18); cursor: pointer; }

/* نوارِ واکنش‌ها بیرون و بالای کادرِ منو، کشیده‌تر */
.msg-menu { background: none; box-shadow: none; padding: 0; gap: 6px; max-width: 320px; }
.msg-menu .reaction-bar { border: 0; margin: 0; padding: 4px 6px; border-radius: 24px; background: var(--surface, var(--bg)); box-shadow: 0 4px 16px rgba(0,0,0,.2); }
.msg-menu .menu-box { display: flex; flex-direction: column; width: 160px; padding: 4px 0; border-radius: 12px; background: var(--surface, var(--bg)); box-shadow: 0 4px 16px rgba(0,0,0,.2); }
.msg-menu .menu-box button { padding: 7px 14px; font-size: 14px; }
.bubble .stamp .reaction { font-size: 14px; margin-inline-start: 2px; }
/* واکنش‌ها گوشه پایین-راستِ حباب */
.bubble:has(> .reactions) { position: relative; padding-bottom: 22px; min-width: 110px; }
.bubble > .reactions { position: absolute; bottom: 3px; right: 10px; font-size: 15px; display: flex; gap: 2px; }
.bubble.image > .reactions { bottom: 9px; right: 9px; padding: 0 4px; border-radius: 8px; background: rgba(0,0,0,.45); }
.bubble.image:has(> .reactions) { padding-bottom: 3px; min-width: 0; }
.bubble:not(.image) > .reactions { padding: 0 4px; border-radius: 8px; background: rgba(0,0,0,.07); }
.bubble:has(> .reactions) { min-width: 130px; }
.bubble:not(.image) > .reactions { padding: 0 2px; line-height: 1.15; }
.bubble:has(> .reactions) { min-width: 145px; }
.bubble > .reactions span.pulse { display: inline-block; animation: reaction-pulse .44s ease-in-out 2; }
@keyframes reaction-pulse { 50% { transform: scale(1.5); } }
/* ایموجی بی کادر، همه‌جا */
.bubble > .reactions, .bubble.image > .reactions, .bubble:not(.image) > .reactions { background: none; padding: 0; border-radius: 0; line-height: normal; font-size: 16px; overflow: visible; }
/* منوی پیام: بقیه صفحه تیره، فقط حبابِ همان پیام روشن — مثل اپ */
.msg-menu-layer { background: rgba(0,0,0,.5); animation: scrim-in .18s ease-out; }
@keyframes scrim-in { from { background: rgba(0,0,0,0); } }
.bubble-row.held { background: none; }
.bubble.lifted { position: relative; z-index: 61; }
.bubble.lifted { box-shadow: 0 0 0 1.5px rgba(255,255,255,.8); }
.bubble .stamp .edited-in { font-size: 10px; margin-inline-start: 4px; }
.dialog-backdrop { display: flex; align-items: center; justify-content: center; z-index: 70; }
.chat-dialog { width: min(320px, calc(100% - 32px)); padding: 20px; border-radius: 16px; background: var(--surface, var(--bg)); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
/* موجِ پیامِ صوتی — مثل اپ */
.voice-wave { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 1px; height: 24px; direction: ltr; min-width: 0; }
.voice-wave span { flex: 0 0 3px; border-radius: 2px; background: currentColor; opacity: .35; min-height: 2px; transition: opacity .15s; }
.voice-wave span.on { opacity: 1; }
.bubble.mine .voice-wave span.on { background: #2E7D32; }
.voice-wave.seekable { cursor: pointer; }
/* عکسِ گفتگو بزرگ — مثل اپ */
/* ویدیوی تمام‌صفحه مثلِ ریلز (`reelViewer`) — همان `ReelViewer` اپ */
.reel { --reel-fade: 1; position: fixed; inset: 0; z-index: 85; background: #000; color: #fff; overscroll-behavior: contain; user-select: none; -webkit-user-select: none; }
.reel-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; touch-action: none; cursor: pointer; transform-origin: 50% 50%; }
.reel-stage.back { transition: transform .2s; }
.reel-video { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.reel-play { position: absolute; width: 76px; height: 76px; border-radius: 50%; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.reel-play[hidden], .reel-loader[hidden], .reel-failed[hidden], .reel-speed[hidden], .reel-time[hidden] { display: none; }
.reel-loader { position: absolute; width: 40px; aspect-ratio: 222 / 205; background: #fff; opacity: .4; -webkit-mask: url(/img/logo-mark.png) center / contain no-repeat; mask: url(/img/logo-mark.png) center / contain no-repeat; pointer-events: none; }
.reel-failed { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.reel-failed p { margin: 0; }
.reel-heart { position: absolute; color: #fff; opacity: 0; pointer-events: none; }
.reel-heart.pop { animation: reel-heart .9s ease-out; }
.reel.still .reel-heart.pop { animation: reel-heart-still .9s; }
@keyframes reel-heart { 0% { opacity: 1; transform: scale(.3); } 25% { transform: scale(1); } 70% { opacity: 1; } 100% { opacity: 0; transform: scale(1); } }
@keyframes reel-heart-still { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
.reel-top, .reel-bottom { position: absolute; inset-inline: 0; opacity: var(--reel-fade); transition: opacity .18s; }
.reel.bare .reel-top, .reel.bare .reel-bottom { opacity: 0; pointer-events: none; }
.reel-top { top: 0; display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top)); }
.reel-circle { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,.4); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.reel-speed { padding: 4px 10px; border-radius: 12px; background: rgba(0,0,0,.45); font-weight: 500; }
.reel-bottom { bottom: 0; padding-bottom: env(safe-area-inset-bottom); }
.reel.with-info .reel-bottom { background: linear-gradient(transparent, rgba(0,0,0,.6) 45%); padding-top: 80px; }
.reel-row { display: flex; align-items: flex-end; gap: 12px; padding: 0 14px 4px; max-width: 720px; margin: 0 auto; }
.reel-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding-bottom: 6px; }
.reel-author-row { display: flex; align-items: center; gap: 10px; }
.reel-author { display: flex; align-items: center; gap: 8px; min-width: 0; color: #fff; text-decoration: none; }
.reel-author img, .reel-avatar { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; flex: none; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; }
.reel-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reel-follow { padding: 4px 12px; border: 1px solid rgba(255,255,255,.8); border-radius: 4px; background: none; color: #fff; font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap; }
.reel-follow:disabled { opacity: .6; cursor: default; }
.reel-details .listing-title { font-size: 17px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.reel-price { font-weight: 500; }
.reel-caption { margin: 0; font-size: 14px; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.reel-caption.open { display: block; max-height: 40vh; overflow-y: auto; }
.reel-side { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-bottom: 4px; }
.reel-action { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px; border: 0; background: none; color: #fff; font: inherit; font-size: 13px; cursor: pointer; }
.reel-action.dim { opacity: .6; }
.reel-action:disabled { cursor: default; }
.reel-action.liked { color: #ED4956; }
.reel-action.liked span:not(.nav-icon) { color: #fff; }
.reel-time { display: block; text-align: center; font-weight: 500; margin-bottom: 6px; direction: ltr; }
/* نوارِ پیشرفت چپ‌به‌راست مثلِ همه پخش‌کننده‌ها؛ کشیدن ضخیم‌ترش می‌کند */
.reel-bar { direction: ltr; height: 22px; display: flex; align-items: flex-end; cursor: pointer; touch-action: none; }
.reel-track { position: relative; width: 100%; height: 2.5px; background: rgba(255,255,255,.3); transition: height .15s; }
.reel-bar.seeking .reel-track, .reel-bar:hover .reel-track { height: 5px; }
.reel-fill { position: absolute; inset-block: 0; left: 0; width: 0; background: #fff; }
@media (prefers-reduced-motion: reduce) { .reel-top, .reel-bottom, .reel-track { transition: none; } }

.chat-viewer { position: fixed; inset: 0; z-index: 80; background: #000; display: flex; align-items: center; justify-content: center; }
.chat-viewer-video { max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; }
.chat-viewer img { max-width: 100%; max-height: 100%; object-fit: contain; }
.chat-viewer-bar { position: absolute; top: 0; inset-inline: 0; display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 0 8px; background: rgba(0,0,0,.55); color: #fff; transition: opacity .18s; }
.chat-viewer.bare .chat-viewer-bar { opacity: 0; pointer-events: none; }
.chat-viewer-back { background: none; border: 0; color: #fff; font-size: 22px; width: 44px; height: 44px; cursor: pointer; }
.chat-viewer-name { font-weight: 600; }
.chat-viewer-bar .small { opacity: .75; }
/* سایه اسکلتی — مثل اپ */
/* پایه کمی به سمتِ متن، تا روی زمینه روشنِ صفحه‌ها هم پیدا باشد — مثل اپ */
.skeleton { --skeleton-base: color-mix(in srgb, var(--sunken), var(--text) 6%); background: linear-gradient(100deg, var(--skeleton-base) 30%, rgba(255,255,255,.45) 50%, var(--skeleton-base) 70%) var(--skeleton-base); background-size: 300% 100%; animation: skeleton-shine 1.1s linear infinite; border-radius: 6px; }
.skeleton.bar { height: 11px; margin: 6px 0; }
.skeleton.w60 { width: 60%; } .skeleton.w85 { width: 85%; } .skeleton.w110 { width: 110px; } .skeleton.w70 { width: 70px; }
@keyframes skeleton-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }
.chat-row.lifted { position: relative; z-index: 61; }
.reports-link { position: relative; font-size: 20px; text-decoration: none; padding: 4px 8px; }
.reports-link.dot::after { content: ''; position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; border-radius: 50%; background: #c62828; }
.resolved { color: #2E7D32; }
.report-row .chat-text > * { white-space: normal; }
/* گزارشِ گفتگو: قلمِ گزینه‌ها و حرکتِ مرحله‌ها — مثل اپ */
.report-reason { font-size: 16px; font-weight: 500; transition: background .15s; }
.report-body > * { animation: step-in .22s ease-out; }
@keyframes step-in { from { opacity: 0; transform: translateX(-12px); } }

/* بلاکِ گفتگو */
.chat-head .chat-block { margin-inline-start: auto; font-size: 14px; padding: 6px 10px; }
.chat-blocked { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px; color: var(--muted, #6b7280); font-size: 14px; text-align: center; }
.feature-ok { color: var(--primary); }
.feature-no { color: var(--error, #b3261e); }
.sub-chips { margin-top: 8px; }
.sub-chips .chip-count { display: inline; }
.cat-admin-row { gap: 8px; flex-wrap: wrap; padding: 6px 0; }
.cat-admin-subs { margin-inline-start: 20px; border-inline-start: 2px solid var(--border, #e5e7eb); padding-inline-start: 12px; }

/* انتخابِ چند شهر */
.feed-place-button { white-space: nowrap; }
/* دوربینِ کادرِ جست‌وجو: جست‌وجو با عکس */
.feed-image-search[hidden] { display: none; }
.feed-image-button { background: none; border: 0; padding: 6px; color: var(--muted); display: inline-flex; align-items: center; cursor: pointer; }
.feed-image-button .photo-count-icon svg { width: 22px; height: 22px; }
.place-scroll { max-height: 60vh; overflow-y: auto; margin: 8px 0; }
.place-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; cursor: pointer; }
.place-row.indent { padding-inline-start: 20px; }
.place-row input { width: 18px; height: 18px; margin: 0; accent-color: var(--primary); }
.map-sheet input[type=search] { background: var(--bg); color: var(--text); }
.place-group { font-weight: 600; padding-top: 8px; }
.place-divider { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.place-province { display: flex; justify-content: space-between; width: 100%; background: none; border: 0; padding: 10px 0; font: inherit; color: inherit; cursor: pointer; }
.confirm-orange { width: 100%; background: #F57C00; color: #fff; border: 0; border-radius: 4px; padding: 12px; font: inherit; font-weight: 600; cursor: pointer; }
.place-all-title { font-weight: 600; color: var(--primary); padding: 8px 0 4px; }
.nearby-close { background: #F57C00 !important; color: #fff !important; }
.terms p { line-height: 1.9; }
.jalali-picker { margin-top: 10px; padding: 10px; border: 1px dashed var(--border, #e5e7eb); border-radius: 4px; display: grid; gap: 8px; }
.jalali-picker select { width: auto; }
.announce-group { border: 1px solid var(--border, #e5e7eb); border-radius: 4px; padding: 6px 10px; margin: 6px 0; }
.announce-group summary { cursor: pointer; font-weight: 600; }
.announce-checks { max-height: 260px; overflow-y: auto; white-space: pre; }
.announce-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-x { background: none; border: 0; color: inherit; cursor: pointer; padding: 0 2px; }
.announce-image img, .announce-thumb { max-width: 220px; max-height: 160px; border-radius: 8px; display: block; margin: 6px 0; }
.announce-image-full { width: 100%; max-height: 50vh; object-fit: contain; border-radius: 8px; }
.announce-body { white-space: pre-line; line-height: 1.8; }
.announce-preview { display: grid; gap: 6px; max-width: 380px; }
.preview-notif { background: var(--surface, #f3f4f6); border-radius: 16px; padding: 10px 12px; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.preview-notif-head { display: flex; align-items: center; gap: 6px; font-size: 12px; opacity: .7; margin-bottom: 4px; }
.preview-notif-head img { width: 16px; height: 16px; border-radius: 4px; }
.preview-notif-row { display: flex; justify-content: space-between; gap: 10px; }
.preview-notif-text { font-size: 14px; white-space: pre-line; }
.preview-notif-thumb { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; flex: none; }
.preview-notif-big { width: 100%; max-height: 180px; object-fit: cover; border-radius: 10px; margin-top: 8px; }
.preview-sheet { border: 1px solid var(--border, #e5e7eb); border-radius: 16px 16px 0 0; padding: 12px 16px; }
.announce-image img, .announce-thumb { aspect-ratio: 2 / 1; object-fit: cover; }
.preview-notif-big { aspect-ratio: 2 / 1; max-height: none; }

/* محل نمایشِ اعلان: یک ستون، زیر هم */
.announce-where { display: grid; gap: 6px; }

/* منوی سه‌نقطه گفتگوها: دکمه است، نه لینک */
button.reports-link { background: none; border: 0; cursor: pointer; color: inherit; line-height: 1; }

/* کادرِ کوچکِ نوعِ گفتگو، چسبیده به بالای ردیف */
.chat-kind-tab { margin: 10px 4px -1px; }
.chat-kind-tab .nearby-distance { margin-inline-start: 0; }

/* بومِ امضا و نمایشِ آن در پنل مدیر */
.signature-view { max-width: 320px; width: 100%; background: #fff; border: 1px solid var(--line, #ddd); border-radius: 8px; margin: 8px 0; cursor: zoom-in; }

/* عنوان قوانین و تاریخ آخرین به‌روزرسانی کنارش */
.rules-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rules-head h1 { margin: 0; }

/* بسته خریدنی: یک ردیفِ انتخاب‌شدنی، نه دکمه پرداختِ جدا برای هرکدام */
.pick-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 8px;
  padding: 12px;
  text-align: right;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
}
.pick-row.picked {
  border-color: var(--primary);
  background: var(--primary-container);
  color: var(--on-primary-container);
}
.pick-row.picked .muted { color: var(--on-primary-container); }
.pick-tick { width: 16px; color: var(--primary); font-weight: bold; }
.pick-row.picked .pick-tick { color: var(--on-primary-container); }

/* نوارِ مصرفِ یک بسته */
.meter {
  height: 6px;
  margin: 6px 0 4px;
  background: var(--sunken);
  border-radius: 3px;
  overflow: hidden;
}
.meter-fill { height: 100%; background: var(--primary); }

/* چرخ‌فلکِ بالای فهرست آگهی‌ها — مثل اپ */
.carousel { margin-bottom: 12px; }
.carousel-stage { position: relative; }
.carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--radius);
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-item {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  height: var(--carousel-height, 200px);
  text-decoration: none;
}
.carousel-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* کادرِ شناورِ پایینِ عکس: عنوان و قیمت روی زمینه روشن — مثل اپ */
.carousel-text {
  position: absolute;
  inset-inline: 15%;
  bottom: 12px;
  padding: 4px 10px;
  font-size: 14px;
  color: var(--text);
  background: color-mix(in srgb, var(--surface, #fff) 72%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  text-decoration: none;
}
.carousel-text { display: flex; align-items: center; gap: 6px; }
.carousel-body { flex: 1; min-width: 0; }
.carousel-text strong { display: inline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carousel-text .discount-inline { margin: 0 6px 0 0; }
.carousel-tag {
  display: inline-block;
  margin-inline-end: 6px;
  padding: 1px 6px;
  font-size: 11px;
  border-radius: 4px;
  background: var(--primary);
  color: var(--on-primary);
}
.carousel-dots { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.carousel-dots span { width: 6px; height: 6px; border-radius: 3px; background: var(--line); }
.carousel-dots span.on { width: 16px; background: var(--primary); }

/* برچسبِ تبلیغ، بالای کارتِ چهار جایگاه اولِ نتایج */
.ad-tag {
  display: inline-block;
  margin-bottom: 4px;
  padding: 1px 8px;
  font-size: 11px;
  border-radius: 4px;
  background: var(--pending-bg);
  color: var(--pending);
}

/* نشانِ «نیازمندی» — فقط همین یک نوع نشان می‌خورد، چون بیشترِ آگهی‌ها فروش‌اند */
.card-wanted { background: #0b6fa4; color: #fff; }
.nearby-distance.card-wanted { margin-inline-start: 6px; }
.card-wanted-inline { display: inline-block; margin-top: 2px; padding: 1px 8px; border-radius: 6px; background: #0b6fa4; color: #fff; font-size: 11px; font-weight: 500; }
/* «ویژه»: ۲۴ ساعت بعد از ویژه شدن، روی کارت و صفحه آگهی — مثل اپ */
.featured-badge { display: inline-block; margin-inline-start: 6px; padding: 1px 8px; border-radius: 6px; background: #E0A100; color: #fff; font-size: 11px; font-weight: 600; vertical-align: middle; }
.featured-badge.nearby-distance { margin-inline-start: 6px; }

/* صفحه‌های فهرستی‌ـ‌کادردار: زمینه هم‌رنگِ نوارِ بالا تا کادرِ هر دسته جدا دیده شود — مثل اپ */
.settings-page { background: var(--settings-bg); margin: -16px; padding: 16px; }
/* بجِ سقف داخل کادرِ هر دسته — مثل اپ */
.limit-badge { flex: 1; text-align: center; padding: 4px 8px; border-radius: 4px; background: var(--sunken); color: var(--muted); font-size: 12px; }
/* «باقی مانده»: سبز جا هست، کهربایی نزدیکِ سقف، جگری پر شده — مثل اپ */
.limit-badge.is-open { background: var(--published-bg); color: var(--published); }
/* «باقی مانده X روز»: مشکی — عدد است، نه وضعیتِ خوب یا بد */
.limit-badge.is-days { background: #1a1a1a; color: #fff; }
.limit-badge.is-near { background: var(--pending-bg); color: var(--pending); }
.limit-badge.is-full { background: var(--error-bg); color: var(--error); }
.limit-badge b { font-weight: 700; font-size: 14px; }
/* یک بج، هم‌ردیفِ نامِ دسته و در سمتِ مقابلش */
.limit-head { display: flex; gap: 8px; align-items: center; }
.limit-head strong { flex: 1; }
.limit-badge.is-one { flex: none; padding: 4px 10px; }
/* همه دسته‌ها در یک کادر؛ پدینگ روی خودِ ردیف است تا خطِ میانی تمام‌عرض باشد */
.limits-card { padding: 0; }
.limits-row { padding: 12px; }
.limits-card hr { margin: 0; border: 0; border-top: 1px solid var(--line); }
.limits-card hr.is-red { border-top-color: var(--error); }
/* عقربه سهمیه، کنارِ متن و سمتِ مقابلِ عنوان — مثل اپ */
.period-top { display: flex; gap: 8px; align-items: flex-start; }
/* نوارِ نازکِ وضعیتِ پایینِ هر آگهی در «آگهی‌های من» — مثل نوارِ «اطراف من» */
/* آینه کادرهای بالای کارت: همان رنگ و اندازه، گوشه‌های گرد پایین، به اندازه متنِ خودش */
.under-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.status-strip { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 0 0 8px 8px; background: var(--card-tab); color: var(--muted); font-size: 11px; font-weight: 500; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.status-strip.is-live { background: #0ea960; color: #fff; }
.status-strip.is-wait { background: #b4451b; color: #fff; }
.status-strip.is-bad { background: #c62828; color: #fff; }
/* داخلِ کارت («آگهی‌های من»): جای قیمت و جا، همه گوشه‌ها گرد */
.status-strip.inline { border-radius: 6px; align-self: flex-start; }

/* تصویرِ ثابتِ بالای قوانین گفتگو */
.rules-art { width: 160px; height: 160px; margin: 0 auto 8px; }

.quota-gauge { flex: none; position: relative; width: 110px; height: 110px; }
/* کادر اشتراک: زمینه جگریِ پررنگ، پس هرچه داخلش است سفید می‌شود — مثل اپ */
.plan-card { background: #b4451b; border-color: #b4451b; color: #fff; }
.plan-card .plan-soft { color: rgba(255,255,255,.85); font-size: 12px; }
.plan-card .notice { color: #fff; }
.plan-card button.primary { background: #fff; color: #b4451b; border-color: #fff; }

/* دکمه حذف در «آگهی‌های من»: خطرناک ولی نه توپر — کارِ اصلیِ ردیف نیست */
button.ghost.danger { background: none; color: var(--error); }

/* عنوانِ دسته در تب غیرفعال: خاموش / منقضی / حذف‌شده */
.off-group { margin: 16px 0 4px; font-size: 14px; font-weight: 600; color: var(--muted); }

/* جای خالیِ موجودی: هم‌اندازه خانه واقعی، تا با آمدنِ داده صفحه تکان نخورد */
.stock-skeleton-image { aspect-ratio: 1; width: 100%; border-radius: 8px; margin-top: 0; }
.skeleton-line { height: 14px; margin-top: 6px; width: 75%; }
.skeleton-line.is-short { width: 40%; height: 12px; }

/* خطِ جداکننده بخش‌های فرمِ ثبت آگهی: جگری، مثلِ اپ */
/* خطِ جداکننده بخش‌های فرمِ ثبت: همان خطِ کم‌رنگِ صفحه آگهی — مثل اپ */
hr.form-line { border: 0; border-top: 1px solid var(--line, #ddd); margin: 16px 0 0; }

/* دو دکمه هم‌ارز، هر کدام نصفِ عرض */
.even-row > button { flex: 1 1 0; }

/* لینکِ «خرید اشتراک» زیرِ اخطارِ سقف — همان آبیِ بجِ نیازمندی در اپ */
.plan-link { display: inline-block; margin-top: 4px; color: #0B6FA4; font-weight: 700; }

/* آکاردئونِ گروه‌های دسته — مثل اپ: دسته‌ها کمی تورفته زیرِ گروه */
.cat-sheet-group { padding-inline-start: 16px; background: var(--sunken); }
.cat-group-row { display: flex; align-items: center; width: 100%; padding: 12px; margin-top: 6px; background: transparent; border: 1px solid var(--line, #ddd); border-radius: 4px; text-align: start; }
.cat-group-row.on { border-color: var(--primary, #0EA960); font-weight: 700; }
.cat-group-row .grow { flex: 1; }

/* متنِ دسته‌ها کمی درشت‌تر — مثل اپ (۱۸) */
.cat-sheet-row .grow, .cat-group-row .grow { font-size: 18px; }
.cat-sheet-row .grow, .cat-group-row .grow { font-weight: 500; opacity: .85; }
.cat-sheet-row.on .grow, .cat-group-row.on .grow { font-weight: 700; opacity: 1; }
.cat-sheet-row .chip-count { font-weight: 300; opacity: .55; }
.cat-sheet-row.on .grow, .cat-group-row.on .grow { font-weight: 500; opacity: 1; color: var(--primary, #0EA960); }
.cat-group-row.on { font-weight: 500; }
.cat-sheet-row.on .grow, .cat-group-row.on .grow, .cat-sheet-row.on .cat-sheet-check { color: #0B6FA4; }
.cat-group-row.on { border-color: #0B6FA4; }
/* دسته انتخاب‌شده: زمینه آبیِ تیره، متن سفید — مثل اپ */
.cat-sheet-row.on, .cat-group-row.on { background: #0B6FA4; border-color: #0B6FA4; }
.cat-sheet-row.on .grow, .cat-group-row.on .grow, .cat-sheet-row.on .cat-sheet-check, .cat-sheet-row.on .chip-count, .cat-group-row.on span { color: #fff; }
.cat-note { display: block; font-size: 13px; color: #0B6FA4; font-weight: 500; }
/* گروهی که انتخاب داخلِ آن است: آبیِ کم‌رنگ — مثل اپ */
.cat-sheet-row.soft, .cat-group-row.soft { background: rgba(11,111,164,.10); }
.cat-sheet-row.soft .grow, .cat-group-row.soft .grow, .cat-group-row.soft span { color: #0B6FA4; }
/* فقط ردیفِ گروه‌ها کمی تیره‌تر، شبیهِ دکمه — مثل اپ */
/* ردیفِ گروه خاکستریِ پیدا، نه هم‌رنگِ زمینه — مثل اپ؛ دسته‌های داخلش زمینه خودشان */
.cat-group-row:not(.soft), .map-sheet > .cat-sheet-row.is-group:not(.soft):not(.on) { background: color-mix(in srgb, var(--settings-bg) 93%, var(--text)); }

/* چیپِ انتخاب‌شده گروه/دسته — آبیِ تیره با متنِ سفید، مثل اپ */
.chip.on-blue { background: #0B6FA4; color: #fff; border-color: #0B6FA4; }

/* نوارِ «این محدوده»: کارت‌های عمودی که افقی اسکرول می‌شوند — مثل اپ */
.area-list { flex-direction: row !important; overflow-x: auto !important; overflow-y: hidden !important; gap: 10px !important; align-items: stretch; }
.area-sheet.open .area-list { padding: 12px !important; }
.area-card { flex: 0 0 160px; display: flex; flex-direction: column; text-align: start; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: var(--sunken); cursor: pointer; color: var(--text); font: inherit; }
.area-card img { width: 100%; height: 110px; object-fit: cover; display: block; }
.area-card b { padding: 8px 10px 0; font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.area-card small { padding: 2px 10px 8px; color: var(--muted, #777); }
.area-more { flex: 0 0 150px; align-self: center; }

/* گروه و دسته شناور روی نقشه «اطراف» — مثل اپ */
.map-chips { position: absolute; top: 8px; left: 0; right: 0; z-index: 7; pointer-events: none; }
.map-chips .chip { pointer-events: auto; background: var(--surface); box-shadow: 0 2px 6px rgba(0,0,0,.18); border-color: transparent; }
.map-chips .chip.on-blue { background: #0B6FA4; }
.map-chips .popular-row { pointer-events: auto; padding-inline: 12px; }
.map-chips .popular-row { margin: 0; padding-block: 0; }
.map-chips .popular-row + .popular-row { margin-top: 2px; }
/* فلشِ برگشت به گروه‌ها، اولِ ردیف (راست) — مثل اپ */
.chip-back { font-weight: 700; min-width: 36px; }
.chip-bar { display: flex; align-items: center; gap: 8px; }
.chip-bar > .popular-row { flex: 1; min-width: 0; }
.chip-bar > .chip-back { flex: 0 0 auto; min-width: 0; font-weight: normal; }
.map-chips .chip-bar { pointer-events: auto; padding-inline-start: 12px; }
.chip-bar { gap: 10px; }
.chip-bar > .popular-row { padding-inline-start: 0 !important; }
/* چیپ‌های گروه/دسته‌ی انتخاب‌نشده کمی تیره‌تر از زمینه — مثل اپ */
.feed-cat .chip:not(.on-blue) { background: var(--sunken); }
.map-chips .chip:not(.on-blue) { background: var(--surface); }

/* ---- صفحه «آگهی»: نقشه پنجره‌ای یا تمام‌صفحه — مثل اپ ---- */
.home-window .map-holder { height: 26vh; min-height: 160px; }
.home-window .map-holder .map-chips, .home-window .area-sheet, .home-window .nearby-mode,
.home-window .nearby-card, .home-window .nearby-error, .home-window .map-collapse { display: none !important; }
.map-catcher { position: absolute; inset: 0; z-index: 20; cursor: zoom-in; }
.home-full .map-catcher, .home-full .home-ticker, .home-full .home-below { display: none; }
.home-full .map-holder { position: fixed; inset: var(--bar-height, 64px) 0 0 0; height: auto; z-index: 30; }
.map-collapse { background: #F57C00; color: #fff; border: 0; font-size: 20px; padding: 0 14px; align-self: stretch; }
.home-ticker { margin: 0 -16px 6px; }
/* زیرِ پنجره نقشه همان فاصله کمِ بالایش — مثل اپ */
.home-below > [data-part="identify"]:first-child > .identify-card { margin-top: 6px; }
.home-below section { margin-top: 16px; }
.area-card { position: relative; text-decoration: none; }
.wanted-tag { position: absolute; top: 6px; inset-inline-start: 6px; background: rgba(11, 111, 164, .75); color: #fff; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 1px 6px; }

/* ردیفِ دسته‌ها: کارت بی‌زمینه، متن روی رنگِ صفحه؛ گوشه‌های پایینِ عکس ۴ — مثل اپ */
.area-card.plain { background: transparent; border-radius: 0; }
.area-card.plain img { border-radius: 12px 12px 4px 4px; }

/* بجِ تخفیف پایینِ عکسِ کارتِ ردیف، روبه‌روی بجِ نیازمندی — مثلِ کارتِ شناورِ نقشه */
.discount-tag { position: absolute; top: 84px; inset-inline-end: 6px; background: rgba(0, 0, 0, .55); color: #FFD08A; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 1px 6px; }
/* ردیفِ دسته‌ها ۱۵٪ بزرگ‌تر، با همان نسبتِ عکس — مثل اپ */
.area-card.plain { flex-basis: 184px; }
.area-card.plain img { height: 127px; }
.area-card.plain .discount-tag { top: 101px; }
/* حراجِ صفحه اصلی: زمانِ مانده روی عکس، همان جای «تخفیف‌دار» */
.flash-row .area-card .flash-left.on-image { top: 101px; bottom: auto; left: auto; inset-inline-end: 6px; padding: 1px 6px; font-size: 11px; }

/* پنل «کاربران فعال»: نوارِ سهمِ اپ و سایت */
.activity-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--sunken); margin: 8px 0 4px; }
.activity-app { background: var(--primary, #0EA960); }
.activity-web { background: #0B6FA4; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th, .admin-table td { padding: 8px 6px; text-align: start; border-bottom: 1px solid var(--line, #ddd); }
.admin-table th { font-weight: 600; color: var(--muted, #777); }
.story-preview { display: block; width: min(100%, 260px); margin: 4px auto 12px; border-radius: 12px; box-shadow: 0 4px 18px rgba(0, 0, 0, .15); }
.story-link { width: 100%; margin-bottom: 8px; font-size: 13px; }
/* «مجله راهنما» */
.guide-page { max-width: 1120px; margin-inline: auto; }
.guide-hero { margin: 8px 0 16px; }
.guide-hero h1 { margin: 0 0 4px; }
.guide-chips, .guide-cat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.guide-card { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); color: inherit; text-decoration: none; transition: box-shadow .15s ease, transform .15s ease; }
.guide-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, .1); transform: translateY(-2px); }
.guide-card-media { aspect-ratio: 16 / 9; display: grid; place-items: center; background: var(--primary-container); color: var(--primary); }
.guide-card-media img { width: 100%; height: 100%; object-fit: cover; }
.guide-card-text { padding: 12px 14px 16px; }
.guide-card-text h3 { margin: 0 0 6px; font-size: 16px; line-height: 1.6; }
.guide-card-text p { margin: 0; font-size: 14px; line-height: 1.8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.guide-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.guide-article { max-width: 760px; min-width: 0; }
.guide-article h1 { font-size: 26px; line-height: 1.6; margin: 4px 0 8px; }
.guide-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 12px; }
.guide-meta .chip { padding: 2px 10px; font-size: 13px; }
.guide-lead { font-size: 17px; line-height: 2; color: var(--muted); }
.guide-cover { width: 100%; border-radius: 12px; margin: 8px 0 16px; aspect-ratio: 16 / 9; object-fit: cover; }
.guide-body { font-size: 16px; line-height: 2.1; }
.guide-body h2 { font-size: 20px; margin: 28px 0 8px; scroll-margin-top: 88px; }
.guide-body p { margin: 0 0 14px; }
.guide-body ul { margin: 0 0 16px; padding-inline-start: 22px; }
.guide-body li { margin-bottom: 6px; }
.guide-body a { color: var(--primary); }
.guide-body figure { margin: 16px 0; }
.guide-body figure img { width: 100%; border-radius: 10px; }
.guide-body figcaption { font-size: 13px; color: var(--muted); text-align: center; margin-top: 4px; }
.guide-toc { display: flex; flex-direction: column; gap: 2px; }
.guide-toc strong { margin-bottom: 6px; }
.guide-toc a { padding: 5px 10px; border-radius: 6px; color: var(--text); text-decoration: none; font-size: 14px; border-inline-start: 2px solid var(--line); }
.guide-toc a:hover { background: var(--sunken); border-color: var(--primary); }
.guide-toc-mobile { margin: 0 0 16px; padding: 10px 14px; border-radius: 10px; background: var(--sunken); }
.guide-toc-mobile summary { cursor: pointer; font-weight: 600; }
.guide-toc-mobile .guide-toc { margin-top: 8px; }
.guide-toc-mobile .guide-toc > strong { display: none; }
.guide-side { display: none; }
@media (max-width: 640px) { .guide-article h1 { font-size: 21px; } .guide-lead { font-size: 16px; } }
@media (min-width: 1024px) {
  .guide-layout { grid-template-columns: minmax(0, 1fr) 260px; }
  .guide-side { display: block; position: sticky; top: 88px; align-self: start; padding: 16px; border-radius: 12px; background: var(--sunken); }
  .guide-toc-mobile { display: none; }
}
.guide-listings, .guide-others { margin-top: 32px; }
.guide-listings > .button { margin-top: 12px; }
.guide-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--primary-container); }
.guide-links-title { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--primary); }
.guide-links a { color: var(--on-primary-container); }
.guide-status { font-size: 13px; padding: 1px 8px; border-radius: 6px; background: var(--sunken); }
.guide-status.published { background: var(--primary-container); color: var(--on-primary-container); }
.guide-status.archived { color: var(--muted); }
.guide-editor { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.guide-editor-form { display: flex; flex-direction: column; gap: 12px; }
.guide-editor-body { font: inherit; line-height: 1.9; }
.guide-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.guide-tools button { padding: 4px 10px; font-size: 13px; }
.guide-image-box { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.guide-image-box img { width: 120px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
.guide-preview h1 { font-size: 22px; line-height: 1.6; }
@media (min-width: 1100px) {
  .guide-editor { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .guide-editor-preview { position: sticky; top: 88px; max-height: calc(100vh - 110px); overflow: auto; overscroll-behavior: contain; }
}
.campaign-list { display: grid; gap: 12px; }
.campaign-card.off { opacity: .6; }
.campaign-link { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; min-width: 0; }
.campaign-link code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 6px 8px; border-radius: 6px; background: var(--sunken); font-size: 13px; }
.campaign-link button { flex: none; }
.campaign-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin: 10px 0; }
.campaign-stats > div { display: flex; flex-direction: column; padding: 8px; border-radius: 8px; background: var(--sunken); }
.campaign-stats b { font-size: 18px; }
.campaign-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.area-card small { padding-bottom: 0; }
.area-card small:last-child { padding-bottom: 8px; }
.area-card .area-price { color: var(--text); font-weight: 600; }
.carousel-text small { display: block; color: var(--text); font-weight: 600; font-size: 12px; }
.discount-inline { display: inline-block; margin: 2px 0; padding: 1px 6px; border-radius: 6px; background: rgba(0, 0, 0, .55); color: #FFD08A; font-size: 11px; font-weight: 700; }
/* کاروسلِ ویترینِ بالای نقشه: تمام‌عرض، بی گوشه — مثل اپ */
.home-ticker .carousel { margin-bottom: 0; }
.home-ticker .carousel-track { border-radius: 0; }

/* ورودِ نرمِ صفحه آگهی: محو و کمی بالا آمدن، کاروسل و بخش‌ها با هم — مثل اپ */
@keyframes revealIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.reveal { animation: revealIn .38s cubic-bezier(.4, 0, .2, 1); }
/* صفحه اصلی: بخش‌ها پشتِ سرِ هم از بالا — مثل اپ */
@keyframes dropIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: none; } }
.drop-reveal { animation: dropIn .38s cubic-bezier(.4, 0, .2, 1) both; }

/* پنجره نقشه در صفحه اصلی فقط پیش‌نمایش است: پین‌ها پنهان، تصویرِ ایران و «نمایش روی نقشه» */
.home-window .map-holder .maplibregl-marker { display: none; }
.map-preview-label { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); background: rgba(255, 255, 255, .92);
  color: #222; font-size: 13px; padding: 4px 12px; border-radius: 8px; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); white-space: nowrap; }
/* تصویرِ ثابتِ پیش‌نمایش؛ روی نقشه زنده (اگر ساخته شده) و زیرِ پرده لمس */
.map-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 10; background: #F2F1EC; }
.home-full .map-preview { display: none; }
.home-window .map-holder { background: #F2F1EC; }
/* اسکلتونِ پنجره نقشه تا همه بخش‌ها با هم برسند */
.map-skeleton { position: absolute; inset: 0; z-index: 15; border-radius: 0; }

/* «ویترین من»: کارت‌های آگهی، تقویمِ شمسی، جدولِ بازه‌ها و نوارِ پرداخت — مثل اپ */
.step-title { display: flex; align-items: center; gap: 8px; font-size: 15px; margin: 18px 0 8px; }
.step-title span { width: 24px; height: 24px; border-radius: 50%; background: var(--primary, #0EA960); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.pick-card { flex: 0 0 140px; display: flex; flex-direction: column; padding: 0; border: 1px solid var(--line, #ddd); border-radius: 12px; overflow: hidden; background: var(--surface); text-align: start; font: inherit; color: var(--text); cursor: pointer; transition: border-color .2s, background .2s; }
.pick-card img { width: 100%; height: 90px; object-fit: cover; }
.pick-card span { padding: 8px; font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pick-card.on { border: 2px solid var(--primary, #0EA960); background: color-mix(in srgb, var(--primary, #0EA960) 10%, var(--surface)); }
.jalali-calendar { background: var(--surface); border-radius: 16px; padding: 12px; }
.calendar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.calendar-week { font-size: 12px; color: var(--muted, #777); }
.calendar-day { aspect-ratio: 1; border: 0; border-radius: 50%; background: transparent; font: inherit; color: var(--muted, #999); opacity: .45; transition: background .2s, color .2s; }
.calendar-day.open { opacity: 1; color: var(--text); font-weight: 700; cursor: pointer; }
.calendar-day.today { box-shadow: inset 0 0 0 1px var(--primary, #0EA960); }
.calendar-day.on { background: var(--primary, #0EA960); color: #fff; }
.window-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.window-tile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border: 1px solid var(--line, #ddd); border-radius: 12px; background: var(--surface); font: inherit; color: var(--text); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.window-tile .window-price { font-weight: 700; font-size: 13px; }
.window-tile small { opacity: .8; font-size: 11px; }
.window-tile.off { background: var(--sunken); opacity: .6; cursor: default; }
.window-tile.on { background: var(--primary, #0EA960); border-color: var(--primary, #0EA960); color: #fff; }
.showcase-bar { position: sticky; bottom: 0; background: var(--bg); padding: 12px 0; box-shadow: 0 -4px 12px rgba(0, 0, 0, .08); display: flex; flex-direction: column; gap: 8px; animation: revealIn .22s ease-out; z-index: 5; }
.showcase-bar[hidden] { display: none; }
/* ویترین: سه گامِ رزرو و فهرستِ رزروها — مثل اپ */
.showcase-bar-row { display: flex; gap: 10px; }
.showcase-bar-row > * { flex: 2; }
.showcase-bar-row > .ghost { flex: 1; }
.steps-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.steps-item { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted, #777); white-space: nowrap; }
.steps-item.on { color: var(--text); }
.steps-item.now { font-weight: 700; }
.steps-dot { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; background: var(--line, #ddd); color: var(--muted, #777); }
.steps-item.on .steps-dot { background: var(--primary, #0EA960); color: #fff; }
.steps-line { flex: 1; height: 2px; background: var(--line, #ddd); }
.steps-line.on { background: var(--primary, #0EA960); }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pick-grid .pick-card { flex: none; }
.pick-grid .pick-card img { height: auto; aspect-ratio: 5 / 4; }
.booking-row { margin-bottom: 14px; }
.booking-link { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.booking-link img, .booking-noimg { width: 80px; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 8px; flex: none; background: var(--sunken, #eee); }
.booking-link strong { display: block; }
.booking-state { font-weight: 600; color: var(--muted, #777); }
.booking-state.live { color: var(--primary, #0EA960); }
hr.hairline { border: 0; border-top: 1px solid var(--line, #ddd); margin: 12px 0; }

/* نشانکِ ذخیره بالا-چپِ عکسِ کارت — مثل اپ */
.card.listing-card { position: relative; }
/* دکمه ذخیره روی عکسِ کارت‌ها: کادرِ روشنِ گوشه‌گرد با خطِ دور، آیکونِ ۲۸؛ خاکستری و ذخیره‌شده سبز — مثل اپ (`SaveBox`) */
.card-save, .feed-save { position: absolute; top: 8px; left: 8px; width: 42px; height: 42px; border-radius: 14px; border: 1px solid var(--line); padding: 0; background: color-mix(in srgb, var(--surface) 72%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.card-save::before, .feed-save::before { content: ''; width: 28px; height: 28px; background: var(--muted); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.82 1.91H7.18C5.06 1.91 3.32 3.65 3.32 5.77V19.86c0 1.8 1.29 2.56 2.87 1.69l4.88-2.71c.52-.29 1.36-.29 1.87 0l4.88 2.71c1.58.88 2.87.12 2.87-1.69V5.77c-.01-2.12-1.74-3.86-3.87-3.86z'/%3E%3Cpath d='M9.5 11.2h5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.82 1.91H7.18C5.06 1.91 3.32 3.65 3.32 5.77V19.86c0 1.8 1.29 2.56 2.87 1.69l4.88-2.71c.52-.29 1.36-.29 1.87 0l4.88 2.71c1.58.88 2.87.12 2.87-1.69V5.77c-.01-2.12-1.74-3.86-3.87-3.86z'/%3E%3Cpath d='M9.5 11.2h5'/%3E%3C/svg%3E") center / contain no-repeat; }
.card-save.on::before, .feed-save.on::before { background: var(--primary); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath transform='translate(12 11.95) scale(1.08) translate(-12 -11.95)' d='M16.8203 1.91016H7.18031C5.06031 1.91016 3.32031 3.65016 3.32031 5.77016V19.8602C3.32031 21.6602 4.61031 22.4202 6.19031 21.5502L11.0703 18.8402C11.5903 18.5502 12.4303 18.5502 12.9403 18.8402L17.8203 21.5502C19.4003 22.4302 20.6903 21.6702 20.6903 19.8602V5.77016C20.6803 3.65016 18.9503 1.91016 16.8203 1.91016ZM15.6203 9.03016L11.6203 13.0302C11.4703 13.1802 11.2803 13.2502 11.0903 13.2502C10.9003 13.2502 10.7103 13.1802 10.5603 13.0302L9.06031 11.5302C8.77031 11.2402 8.77031 10.7602 9.06031 10.4702C9.35031 10.1802 9.83031 10.1802 10.1203 10.4702L11.0903 11.4402L14.5603 7.97016C14.8503 7.68016 15.3303 7.68016 15.6203 7.97016C15.9103 8.26016 15.9103 8.74016 15.6203 9.03016Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath transform='translate(12 11.95) scale(1.08) translate(-12 -11.95)' d='M16.8203 1.91016H7.18031C5.06031 1.91016 3.32031 3.65016 3.32031 5.77016V19.8602C3.32031 21.6602 4.61031 22.4202 6.19031 21.5502L11.0703 18.8402C11.5903 18.5502 12.4303 18.5502 12.9403 18.8402L17.8203 21.5502C19.4003 22.4302 20.6903 21.6702 20.6903 19.8602V5.77016C20.6803 3.65016 18.9503 1.91016 16.8203 1.91016ZM15.6203 9.03016L11.6203 13.0302C11.4703 13.1802 11.2803 13.2502 11.0903 13.2502C10.9003 13.2502 10.7103 13.1802 10.5603 13.0302L9.06031 11.5302C8.77031 11.2402 8.77031 10.7602 9.06031 10.4702C9.35031 10.1802 9.83031 10.1802 10.1203 10.4702L11.0903 11.4402L14.5603 7.97016C14.8503 7.68016 15.3303 7.68016 15.6203 7.97016C15.9103 8.26016 15.9103 8.74016 15.6203 9.03016Z'/%3E%3C/svg%3E"); }
.card-top-line { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.card-place-line { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-place-line::before { content: ''; display: inline-block; width: 14px; height: 14px; margin-inline-end: 3px; vertical-align: -2px;
  background: url('/img/map-where.png') center / contain no-repeat; }
.card-top-line .price { color: var(--text); font-weight: 700; white-space: nowrap; }

.card.listing-card.boxed-card { border: 1px solid var(--border, #e3e3e3); border-radius: var(--radius); padding: 8px; }
.card.listing-card.boxed-card img { border-radius: var(--radius); }
.boxed-card .card-save { top: 16px; left: 16px; }
.spec-badges { display: flex; gap: 6px; margin-top: 6px; }
.spec-badges span { flex: 1; min-width: 0; text-align: center; padding: 6px 4px; border-radius: 4px; background: var(--surface-variant, #f0efeb); color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result-count { grid-column: 1 / -1; color: var(--muted); font-size: 14px; font-weight: 500; }
.map-filter-bar { display: flex; align-items: center; gap: 8px; margin: 0 12px; height: 34px; padding: 0 4px; border-radius: 4px; background: var(--surface, #fff); box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.map-filter-bar .grow { flex: 1; }
.map-filter-button { border: 0; background: none; font: inherit; font-weight: 600; padding: 8px 10px; border-radius: 4px; cursor: pointer; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
.map-count { color: var(--muted); font-size: 13px; font-weight: 500; padding: 0 10px; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.map-count:not(:has(.skeleton))::before { content: '☰'; font-size: 13px; }
.map-count-skeleton { display: inline-block; width: 64px; height: 14px; border-radius: 4px; vertical-align: middle; }
.sheet-options { display: flex; flex-direction: column; max-height: 60vh; overflow-y: auto; }
.sheet-option { border: 0; background: none; font: inherit; font-weight: 600; text-align: right; padding: 12px 8px; cursor: pointer; color: var(--text); border-radius: 4px; }
.sheet-option.sub { font-weight: 400; padding-right: 24px; }
.sheet-option.on::after { content: ' ✓'; color: var(--accent, #0EA960); }
.sheet-option:hover { background: rgba(0,0,0,.04); }
.home-full .feed-place-button, .home-full .feed-image-search, .home-window .map-view-toggle { display: none !important; }
.map-collapse { background: none !important; color: var(--text) !important; font-size: 22px !important; }
.map-view-toggle { display: flex; align-self: center; border: 1px solid #8a8a8a; border-radius: 4px; overflow: hidden; }
.map-view-toggle button { border: 0; background: none; font: inherit; font-size: 13px; padding: 6px 12px; cursor: pointer; color: var(--text, #1B1F1D); }
.map-view-toggle button.on { background: #0B6FA4; color: #fff; font-weight: 700; }
.map-list { position: absolute; inset: 0; z-index: 5; overflow-y: auto; background: var(--bg, #fff); padding: 0 12px 72px; }
.map-list-empty { text-align: center; padding: 32px 16px; }
.map-filter-bar { pointer-events: auto; }
.home-full .map-chips { top: 0; }
.home-full .map-filter-bar { margin: 0; border-radius: 0; box-shadow: none; background: var(--bar, var(--surface, #fff)); border-bottom: 1px solid var(--border, #e5e5e5); }
.home-full .home-search, .home-full .home-search > * { box-shadow: none !important; }
.map-view-toggle button { font-size: 16px; line-height: 1; }
.map-list { transition: opacity .3s ease; }
.map-list.fading { opacity: 0; }
.callout-pin { cursor: pointer; filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
.callout-inner { display: flex; flex-direction: column; align-items: center; transform-origin: bottom center; transition: transform .25s ease; }
.callout-pin.pin-dim .callout-inner { transform: scale(.8); }
.callout-pin.pin-dim { transform-origin: bottom center; }
.callout-box { display: flex; align-items: center; gap: 6px; padding: 4px; background: #fff; border-radius: 4px; direction: rtl; max-width: 180px; }
.callout-photo { width: 36px; height: 36px; flex: none; border-radius: 4px; overflow: hidden; background: #ededed; display: flex; align-items: center; justify-content: center; }
.callout-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.callout-photo svg { width: 60%; height: 60%; }
.callout-text { display: flex; flex-direction: column; min-width: 0; padding-left: 2px; }
.callout-text b { font-size: 12px; font-weight: 500; color: #1B1F1D; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.callout-text small { font-size: 11px; font-weight: 700; color: #2E7D4F; white-space: nowrap; }
.callout-text small.rating { color: #5B635F; }
.callout-text small .star { color: #F5A623; }
.callout-tip { width: 11px; height: 11px; background: #fff; transform: rotate(45deg); border-radius: 0 0 3px 0; margin-top: -7px; }
.offline-page { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 32px; text-align: center; background: var(--settings-bg); animation: fade-in .22s ease; }
.offline-icon { font-size: 48px; }
.offline-page button { min-width: 140px; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.offline-strip { position: sticky; top: 0; z-index: 60; background: #C62828; color: #fff; text-align: center; font-size: 13px; padding: 4px; }
.offline-page { transition: opacity .22s ease; }
.offline-page.leaving { opacity: 0; }
/* لودینگِ پرده شروع — مثل اپ */
.sheet-group { border-top: 1px solid var(--border, #e5e5e5); margin-top: 8px; padding: 12px 8px 2px; font-size: 13px; font-weight: 700; color: var(--accent, #0EA960); }
.map-sheet .sheet-options { max-height: 55vh; }
.map-sheet:has(.sheet-close-out) { position: relative; overflow: visible; }
.sheet-close-out { position: absolute; top: -44px; left: 14px; width: 32px; height: 32px; min-width: 0; padding: 0; border: 0; border-radius: 50%; background: #F57C00; color: #fff; font-size: 22px; line-height: 1; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.25); cursor: pointer; }
.sheet-options { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }
.home-full .map-filter-button { padding: 4px 10px; }
.home-full .home-search { padding-bottom: 0 !important; margin-bottom: 0 !important; }
.map-count { position: relative; overflow: hidden; border-radius: 4px; transition: color .3s ease; }
.map-count.found { color: #0EA960; }
.map-count { font-weight: 600; }
.map-count.shine::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.75) 50%, transparent 70%); transform: translateX(100%); animation: count-shine .9s ease-out forwards; }
@keyframes count-shine { from { transform: translateX(100%); } to { transform: translateX(-100%); } }
.home-full .home-search, .home-full .home-search input, .home-full .map-filter-bar { background: var(--settings-bg) !important; }
.map-count.found { cursor: pointer; }
.offline-strip { display: flex; align-items: center; justify-content: center; gap: 6px; }
.offline-strip::before { content: ''; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.64 7c-.45-.34-4.93-4-11.64-4-1.5 0-2.89.19-4.15.48L18.18 13.8 23.64 7zm-6.6 8.22L3.27 1.44 2 2.72l2.05 2.06C1.91 5.76.59 6.82.36 7l11.63 14.49.01.01.01-.01 3.9-4.86 3.32 3.32 1.27-1.27-3.46-3.46z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.64 7c-.45-.34-4.93-4-11.64-4-1.5 0-2.89.19-4.15.48L18.18 13.8 23.64 7zm-6.6 8.22L3.27 1.44 2 2.72l2.05 2.06C1.91 5.76.59 6.82.36 7l11.63 14.49.01.01.01-.01 3.9-4.86 3.32 3.32 1.27-1.27-3.46-3.46z'/%3E%3C/svg%3E") center / contain no-repeat; }
.offline-strip { max-height: 0; padding-block: 0; overflow: hidden; transition: max-height .28s cubic-bezier(.4,0,.2,1), padding .28s cubic-bezier(.4,0,.2,1); }
.offline-strip.shown { max-height: 32px; padding-block: 4px; }
/* قدِ دقیقِ نوار، همان فاصله هدر زیرش (بی شکاف) */
.offline-strip.shown { box-sizing: border-box; height: 32px; padding-block: 0; }
/* عکس با محوِ کوتاه می‌نشیند، نه یک‌باره — مثل اپ */
.card img { transition: opacity .2s ease; }
.card img:not(.loaded) { opacity: 0; }
/* ورودِ پشت‌سرهمِ کارت‌های اول، فقط بارِ اول — مثل اپ */
.cards > .reveal:nth-child(2) { animation-delay: 30ms; }
.cards > .reveal:nth-child(3) { animation-delay: 60ms; }
.cards > .reveal:nth-child(4) { animation-delay: 90ms; }
.cards > .reveal:nth-child(5) { animation-delay: 120ms; }
.cards > .reveal:nth-child(6) { animation-delay: 150ms; }
.cards > .reveal { animation-fill-mode: both; }

/* «جستجو با عکس» — مثل اپ */
.identify-card { position: relative; height: 176px; border-radius: 12px; overflow: hidden; margin: 8px 0 16px; color: #12352A; display: flex; align-items: center; }
/* تصویرِ زمینه از سرور، زیرِ متن؛ تا رسیدن اسکلتون */
.identify-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.identify-card > .identify-text { position: relative; }
.page-image-preview { display: block; width: 100%; max-height: 220px; object-fit: contain; border-radius: 8px; margin: 8px 0; background: repeating-conic-gradient(var(--sunken) 0 25%, transparent 0 50%) 0 0 / 16px 16px; }
/* متن روی نیمه راستِ خلوتِ عکس؛ زمینه روشن است، پس رنگ ثابت و تیره در هر دو تم */
.identify-text { width: 56%; padding-inline: 14px 4px; display: grid; gap: 6px; }
.identify-text .small { opacity: .85; }
.identify-actions { gap: 6px; margin-top: 4px; }
.identify-actions > button.secondary { background: rgba(255,255,255,.85); color: #12352A; }
.identify-head { display: flex; gap: 12px; align-items: center; }
.identify-icon { display: flex; } .identify-icon svg { width: 30px; height: 30px; }
.identify-title { font-weight: 700; font-size: 17px; }
.identify-actions > button { flex: 1; }
.identify-preview { display: block; max-width: 100%; max-height: 220px; border-radius: 12px; margin: 0 auto 16px; object-fit: contain; }

/* «حراج» — مثل اپ */
.flash-left { color: var(--error, #b3261e); font-weight: 700; font-size: 13px; }
.toggle-group { display: flex; gap: 2px; }
.toggle-group > button { flex: 1; border-radius: 4px; }
.toggle-group > button.on { background: var(--primary); color: #fff; }

/* «حساب من» — مثل اپ: نوارِ وضعیت و گروه‌ها */
.group-title { font-size: 14px; font-weight: 400; color: var(--text); margin: 16px 4px 6px; }
.link-list { padding: 0; }
.link-row { position: relative; display: flex; flex-direction: column; padding: 12px 16px 12px 44px; color: inherit; text-decoration: none; border-top: 1px solid var(--line); }
/* شورونِ درشتِ «‹» سمتِ چپ — مثل اپ */
.link-row::after { content: ''; position: absolute; left: 20px; top: 50%; width: 9px; height: 9px; border-left: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-50%) rotate(45deg); }
.link-row:first-child { border-top: 0; }
.link-row small { color: var(--muted); font-weight: 400; margin-top: 5px; }

/* «تازه‌ترین آگهی‌ها»: کارت‌ها زیر هم، بی‌انتها */
.latest-list { display: grid; gap: 12px; }
.latest-skeleton { height: 260px; border-radius: 12px; margin: 8px 0; }
.all-seen { text-align: center; margin: 16px 0; }
.all-seen .check { color: #2E7D32; }
.progress-line { height: 4px; border-radius: 2px; margin: 4px 0 10px; background: linear-gradient(90deg, transparent, var(--primary, #2E7D32), transparent) 0 0 / 40% 100% no-repeat, color-mix(in srgb, var(--primary, #2E7D32) 18%, transparent); animation: progress-slide 1.1s linear infinite; }
@keyframes progress-slide { from { background-position: -40% 0, 0 0; } to { background-position: 140% 0, 0 0; } }
.feed-card { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; color: inherit; text-decoration: none; }
.feed-media { position: relative; aspect-ratio: 3 / 2; border-radius: 16px; overflow: hidden; background: var(--sunken); }
.feed-photos { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.feed-photos::-webkit-scrollbar { display: none; }
.feed-photos img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: center; }
.feed-dots { position: absolute; bottom: 10px; right: 10px; display: flex; gap: 6px; padding: 6px 8px; border-radius: 8px; background: rgba(0,0,0,.35); pointer-events: none; }
.feed-dots span { width: 6px; height: 6px; border-radius: 3px; background: #fff; opacity: .6; }
.feed-counter { position: absolute; bottom: 10px; left: 10px; padding: 2px 8px; border-radius: 8px; background: rgba(0,0,0,.35); color: #fff; font-size: 13px; pointer-events: none; }
.feed-save { top: 10px; left: 10px; }
/* عنوانِ آگهی در همه سایت: بیروتی، کمی بزرگ‌تر چون حروفش ریزترند — مثل اپ */
/* عنوانِ آگهی همه‌جا یکان‌بخ مدیوم (اپ `listingTitle`)؛ نامِ کسب‌وکار بیروتی می‌ماند */
.listing-title { font-family: YekanBakh, sans-serif; font-weight: 500; }
.listing-title.business-name { font-family: Beiruti, YekanBakh, sans-serif; font-weight: 700; }
h1.listing-title { font-size: 22px; }
h1.listing-title.business-name { font-size: 24px; }
.feed-card h3 { margin: 0; font-family: YekanBakh, sans-serif; font-weight: 500; font-size: 18px; line-height: 1.5; }
.feed-place { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* آیکونِ مکان پیش از محدوده */
.feed-place:not(:empty)::before, .pin-line::before, .pin-button::before { content: ''; display: inline-block; width: 10px; height: 12px; margin-inline-end: 4px; vertical-align: -1px;
  /* همان پینِ آبیِ انتخابِ شهرِ هدر — مثل اپ */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52.71 64'%3E%3Cpath fill='%230880EA' d='M0 26.35C0.00 45.17 26.35 64.00 26.35 64C26.35 64.00 52.71 45.06 52.71 26.35C52.71 24.45 52.51 22.55 52.1 20.69C51.97 20.11 51.82 19.54 51.66 18.98C51.00 17.31 49.74 15.95 48.13 15.17C46.52 14.39 44.67 14.24 42.95 14.76C41.23 15.28 39.77 16.42 38.86 17.96C37.95 19.50 37.66 21.34 38.03 23.09C38.10 23.32 38.16 23.54 38.21 23.78C38.42 24.68 38.53 25.60 38.53 26.52C38.56 33.17 33.16 38.67 26.51 38.76C24.88 38.78 23.27 38.47 21.76 37.86C20.25 37.25 18.88 36.33 17.73 35.18C16.58 34.03 15.67 32.66 15.06 31.15C14.45 29.64 14.15 28.03 14.17 26.4C14.27 19.80 19.89 14.33 26.49 14.4C27.41 14.41 28.33 14.52 29.23 14.74C29.69 14.85 30.14 14.99 30.58 15.15C31.03 15.24 31.48 15.29 31.94 15.29C35.88 15.29 39.09 12.03 39.09 8.03C39.10 6.63 38.70 5.27 37.95 4.09C37.20 2.91 36.12 1.98 34.85 1.4C34.27 1.20 33.68 1.03 33.08 0.87C30.89 0.29 28.63 0.00 26.36 0C11.80 0.00 0.00 11.80 0 26.35Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.feed-meta { display: flex; align-items: center; gap: 8px; }
.feed-ago { flex: none; white-space: nowrap; }
.feed-cat-icon { margin-inline-end: 4px; }
.feed-cat { flex: 1; min-width: 0; text-align: end; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-tags { display: flex; gap: 8px; align-items: center; }
.feed-off { background: #F5A623; color: #000; font-weight: 700; font-size: 13px; padding: 3px 8px; border-radius: 6px; }
.feed-flash { color: #B26A00; font-weight: 700; font-size: 13px; }
.feed-price { display: flex; gap: 8px; align-items: baseline; }
.feed-price s { font-size: 13px; }
.feed-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.feed-chips span { border: 1px solid var(--muted); border-radius: 6px; padding: 3px 8px; font-size: 11px; }
.feed-chips span.card-wanted { border-color: #0b6fa4; }
.feed-chips .feed-seller { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
.feed-chips .feed-seller span { border: 0; padding: 0; }
.feed-chips .feed-seller b { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.feed-chips .feed-seller.link { cursor: pointer; }
.feed-chips .feed-seller img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; margin-inline-start: -5px; }
.latest-list { gap: 4px; }
/* زمینه بخش‌های رنگیِ صفحه «آگهی» (یکی در میان): خاکستریِ کم‌رنگ، تا لبه صفحه */
:root { --latest-tint: rgba(0, 0, 0, .05); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --latest-tint: rgba(255, 255, 255, .05); } }
:root[data-theme="dark"] { --latest-tint: rgba(255, 255, 255, .05); }
.latest-list, .latest-footer { background: var(--latest-tint); margin-inline: -12px; padding-inline: 12px; }
.latest-footer { padding-block: 1px 24px; }
.more-failed { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; }
.latest-list { border-radius: 0; padding-top: 24px; }
.feed-card { -webkit-tap-highlight-color: transparent; }
.cat-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 12px 0; }
.cat-tile { display: flex; align-items: center; gap: 8px; padding: 10px; white-space: nowrap; overflow: hidden; background: var(--sunken); border: 1px solid color-mix(in srgb, var(--muted) 45%, transparent); border-radius: 12px; color: inherit; text-decoration: none; font-size: 13px; -webkit-tap-highlight-color: transparent; }
.cat-tile-icon { font-size: 20px; line-height: 1; }
.cat-tile.photo { position: relative; aspect-ratio: 4 / 1; padding: 0 10px; color: #fff; font-weight: 600; background-size: cover; background-position: center; }
.cat-tile.photo::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to left, rgba(0,0,0,.65), rgba(0,0,0,.25) 65%, transparent); }
.cat-tile.photo span { position: relative; overflow: hidden; text-overflow: ellipsis; }
/* قطع شدن وسطِ کار: روی بدنه صفحه، زیرِ هدر — مثل اپ */
.net-lost { position: fixed; inset: var(--bar-height, 57px) 0 0 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 32px; background: var(--settings-bg, var(--bg)); animation: viewIn .22s ease; }
.net-lost-body { text-align: center; max-width: 360px; }
.net-lost-icon { font-size: 44px; opacity: .6; }
.net-lost h2 { font-size: 18px; margin: 12px 0 6px; }
.net-lost button { margin-top: 16px; min-width: 160px; }

.queue-card { padding: 20px; }
.queue-body { display: grid; grid-template-columns: minmax(280px, 420px) 1fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .queue-body { grid-template-columns: 1fr; } }
.queue-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.queue-gallery .shot { position: relative; }
.queue-gallery .shot img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; cursor: zoom-in; display: block; }
.queue-gallery .shot.main { grid-column: 1 / -1; }
.queue-gallery .shot.main img { aspect-ratio: 4 / 3; }
.queue-gallery.empty { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: var(--sunken); border-radius: 8px; }
.queue-info h2 { margin: 0 0 8px; }
.queue-facts { display: grid; grid-template-columns: max-content 1fr; gap: 10px 16px; margin: 16px 0; align-items: center; }
.queue-facts dt { color: var(--muted); font-size: 14px; }
.queue-facts dd { margin: 0; }
.queue-cat { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.queue-cat select { min-width: 220px; }
.queue-cat > div { flex-basis: 100%; }
.queue-desc { white-space: pre-wrap; line-height: 1.9; }
.queue-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.queue-reject { display: flex; gap: 8px; flex: 1 1 360px; }
.queue-reject .queue-reason { flex: 1; }
.starter-terms { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
/* عکسِ در حالِ آمدن: زمینه خاکستری با لوگوی خاکستری وسطش — مثل اپ */
.feed-media, .listing-card { position: relative; }
.feed-photos img, .listing-card > img { background: color-mix(in srgb, var(--sunken), var(--text) 8%) url(/placeholder.svg) center / 120px auto no-repeat; }
.feed-media { background: color-mix(in srgb, var(--sunken), var(--text) 8%); }

/* کاوش: آبشاری مثلِ پینترست — دو ستون، بلندیِ هر خانه از شکلِ عکسش (مثل اپ) */
.explore-page .home-search { flex-wrap: nowrap; margin-bottom: 8px; }
.explore-page .home-search input { flex: 1; min-width: 0; }
.explore-grid { display: flex; gap: 2px; align-items: flex-start; }
.explore-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.explore-tile { position: relative; display: block; aspect-ratio: 1; overflow: hidden; color: #fff; text-decoration: none; background: color-mix(in srgb, var(--sunken), var(--text) 8%); -webkit-tap-highlight-color: transparent; }
.explore-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.explore-tile.skeleton { border-radius: 0; }
.explore-tile.skeleton img { opacity: 0; }
/* عکسی که رسید از روی اسکلتون نرم پیدا می‌شود، نه یک‌باره — مثل اپ */
.explore-tile img, .feed-media img, .listing-card img { transition: opacity .45s cubic-bezier(0, 0, .2, 1); }
.feed-media.img-loading img, .listing-card.img-loading img { opacity: 0; }
/* عنوان و قیمت در کادرِ تیره نیمه‌شفاف، مثلِ کادرِ تعدادِ عکس — مثل اپ */
.explore-caption { position: absolute; bottom: 5px; right: 5px; max-width: calc(100% - 10px); display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
/* عنوان و قیمت هر کدام کادرِ خودش */
.explore-caption > div { max-width: 100%; box-sizing: border-box; padding: 1px 6px; border-radius: 6px; color: #fff; background: rgb(11 111 164 / 0.85); }
/* عنوانِ بلند زیرِ هم، حداکثر سه خط — مثل اپ */
.explore-title { font-family: YekanBakh, sans-serif; font-weight: 500; font-size: 15px; line-height: 22px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.explore-price { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.explore-many { position: absolute; top: 5px; right: 5px; display: flex; align-items: center; gap: 3px; padding: 1px 5px; border-radius: 6px; background: rgba(0,0,0,.35); color: #fff; font-size: 11px; }
.explore-many svg { width: 13px; height: 13px; }
/* پستِ «کاوش» (جای گلستان): نشانِ «پست» بالا-چپ (جای ذخیره آگهی)، نویسنده با عکسِ گردِ کوچک در زیرنویس */
/* ویدیوی پست: اولین خانه صفحه پست، مثلِ گالریِ آگهی؛ پنلِ مدیر کوچک */
.post-video .video-slide { position: relative; aspect-ratio: 4 / 5; max-height: 70vh; border-radius: 8px; overflow: hidden; background: #000; margin-bottom: 10px; }
.post-video .video-cover { height: 100%; aspect-ratio: auto; }
.post-video .video-cover img, .post-video .video-player { width: 100%; height: 100%; object-fit: contain; }
.admin-post-video { max-width: 320px; max-height: 360px; border-radius: 6px; background: #000; display: block; margin: 8px 0; }
.explore-post-badge { position: absolute; top: 5px; left: 5px; padding: 1px 6px; border-radius: 6px; background: rgba(0,0,0,.45); color: #fff; font-size: 11px; font-weight: 500; }
.explore-caption > .explore-author { display: flex; align-items: center; gap: 3px; font-size: 11px; line-height: 18px; font-weight: 500; padding: 1px 5px; background: rgb(0 0 0 / 0.55); }
.explore-author > svg, .explore-author > .tick-badge { flex: none; }
.explore-author img, .explore-author-blank { width: 14px; height: 14px; border-radius: 50%; object-fit: cover; flex: none; display: inline-flex; align-items: center; justify-content: center; background: rgb(255 255 255 / 0.25); }
.explore-author span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.explore-save.feed-save { top: 5px; left: 5px; width: 36px; height: 36px; border-radius: 12px; z-index: 1; }
.explore-save::before { width: 24px; height: 24px; }
.explore-off.under-save { top: 45px; }
.explore-off { position: absolute; top: 5px; left: 5px; background: #F5A623; color: #000; font-weight: 700; font-size: 11px; padding: 1px 4px; border-radius: 3px; }
/* لوگو و سمتِ چپش نوشته «جاگل» — مثلِ ورودِ اپ */
.login-head { align-items: center; gap: 8px; }
.login-head h1 { margin: 0; font-size: 20px; }
.brand-stack { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; margin: 8px 0 4px; }
.login-mark { width: 80px; height: 80px; }
.login-logo { display: block; width: 78px; height: auto; }

/* حراج: شمارشِ معکوسِ زنده، قیمتِ خط‌خورده، کارتِ «همه» و شبکه دوستونی — مثل اپ */
.flash-left { font-weight: 700; color: #B26A00; font-variant-numeric: tabular-nums; }
.flash-left.urgent { color: #D32F2F; }
.flash-left.pulse { animation: flash-pulse 1.4s ease-in-out infinite; }
@keyframes flash-pulse { 50% { opacity: .45; } }
.flash-left.on-image { position: absolute; bottom: 6px; left: 6px; padding: 2px 6px; border-radius: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; }
.flash-left.on-image.urgent { color: #FF8A80; }
.flash-price { display: flex; flex-direction: column; }
.flash-new { font-size: 14px; }
.flash-old { font-size: 12px; color: var(--muted); }
.area-card, .flash-card { transition: opacity .3s ease, transform .3s ease; }
.area-card.gone, .flash-card.gone { opacity: 0; transform: scale(.92); }
.flash-all { flex: 0 0 120px; align-self: flex-start; height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 12px; background: var(--sunken); color: inherit; text-decoration: none; }
.flash-all-arrow { font-size: 26px; color: var(--primary); line-height: 1; }
.flash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
.flash-card { display: flex; flex-direction: column; gap: 4px; color: inherit; text-decoration: none; }
.flash-media { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--sunken); }
.flash-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.flash-media .explore-off { top: 6px; right: 6px; left: auto; }
.flash-title { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* استان‌های پرآگهی: نصفِ پهنای کارت‌های دیگر — مثل اپ */
.area-card.plain.province { flex-basis: 104px; }
.area-card .flash-left:not(.on-image) { padding: 8px 10px 0; }
.area-card .flash-left:not(.on-image) + b { padding-top: 2px; }
.province-line { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 6px 4px 0; }
/* نامِ استان با همان قلمِ عنوانِ کارتِ «تازه‌ترین آگهی‌ها» — مثل اپ */
.province-line b { padding: 0; font-family: Beiruti, YekanBakh, sans-serif; font-weight: 700; font-size: 17px; -webkit-line-clamp: 1; }
.province-line small { padding: 0; font-size: 11px; white-space: nowrap; }
.chat-flash-tag { font-size: 11px; font-weight: 700; color: #B26A00; background: rgba(178,106,0,.12); border-radius: 4px; padding: 1px 6px; margin-inline-start: 6px; white-space: nowrap; }
.chat-suggestion { padding: 0 8px 6px; }
.chat-suggestion:empty { display: none; }
/* «قیمت در برابر بازار» زیرِ قیمتِ صفحه آگهی: ارزان‌تر سبز، بقیه خنثی (گران‌تر قرمز نه) */
.price-insight-box:empty { display: none; }
.price-insight { font-weight: 500; color: var(--muted); text-align: start; padding: 0; }
.price-insight.cheaper { color: var(--primary); }

/* «پرسش آماده»: یک ردیفِ افقی، بی شکستن به خطِ بعد */
.chat-quick { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.chat-quick .chip { flex: none; white-space: nowrap; }

/* «تنظیم کادر» — مثل اپ: زمینه سیاه، قابِ ۵:۴ ثابت، بیرونش کم‌رنگ */
.frame-editor { position: fixed; inset: 0; z-index: 1000; background: #000; color: #fff; display: flex; flex-direction: column; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.frame-head { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 8px; }
.frame-close { background: transparent; border: 0; color: #fff; font-size: 20px; width: 44px; height: 44px; cursor: pointer; }
.frame-stage { position: relative; flex: 1; overflow: hidden; touch-action: none; cursor: grab; user-select: none; }
.frame-stage img { position: absolute; max-width: none; pointer-events: none; }
.frame-box { position: absolute; border: 2px solid #fff; border-radius: 4px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .6); pointer-events: none; }
.frame-hint { color: rgba(255, 255, 255, .75); margin: 8px 16px; }
.frame-zoom { margin: 0 16px; }
.frame-actions { display: flex; gap: 12px; padding: 16px; }
.frame-actions button:last-child { flex: 1; }
.frame-actions .ghost { color: #fff; }
/* کاوش: نشستنِ نرمِ خانه‌ها از بالا — مثل اپ */
.explore-tile.drop-in { animation: tile-drop .45s cubic-bezier(.4,0,.2,1) both; }
@keyframes tile-drop { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .explore-tile.drop-in { animation: none; } }
.tick-badge { display: inline-flex; vertical-align: middle; margin-inline-start: 4px; line-height: 0; }
.id-card-wait { aspect-ratio: 85.6 / 54; }
.id-card { display: block; width: 100%; max-width: 520px; border-radius: 8px; margin-block: 8px; cursor: zoom-in; }
/* گرفتنِ مدرک: بومِ «تنظیم گوشه‌ها» و «پوشاندن» — مثل اپ */
.doc-stage { display: flex; }
.doc-canvas { flex: 1; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
/* مدرکِ محل: ردیفِ هر مدرک، برچسبِ «محل با مدرک» زیرِ نامِ کسب‌وکار — مثل اپ */
.doc-row { display: flex; align-items: center; gap: 8px; padding-block: 8px; border-top: 1px solid var(--line); }
.doc-row-text { flex: 1; min-width: 0; }
.doc-row .doc-ok { flex: none; width: auto; min-height: 0; padding: 6px 14px; font-size: 14px; color: var(--primary); }
.place-proven { font-size: 13px; color: #B8860B; margin-top: 2px; }
.sheet-row { display: block; width: 100%; text-align: start; }
.small-link { font-size: 13px; padding: 2px 6px; margin-top: 4px; }
/* دوربینِ زنده مدرک: ویدیو زیر، قاب و لبه روی آن؛ دکمه گرفتن گرد — مثل اپ */
.doc-camera .doc-stage { position: relative; background: #000; }
.doc-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.doc-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.doc-shutter { width: 68px; height: 68px; border-radius: 50%; background: #fff; border: 4px solid #ccc; padding: 0; }
.doc-blur { color: #FFB4AB; font-size: 14px; display: flex; gap: 8px; align-items: center; padding: 4px 16px; }

/* پیش‌نمایشِ پیامِ به‌روزرسانی در پنل مدیر */
.update-preview { border: 1px solid var(--line, #ddd); border-radius: 12px; padding: 12px 14px; display: grid; gap: 6px; background: var(--surface, #fff); }

/* «دانلود اپ» — صفحه اپِ سایت: دسکتاپ دو ستون، موبایل یک ستون */
.app-hero { display: grid; gap: 16px; align-items: start; }
.app-hero-main { display: grid; gap: 16px; min-width: 0; }
.app-hero-head { display: flex; gap: 16px; align-items: center; }
.app-hero-head h1 { margin: 0 0 4px; }
.app-hero-head p { margin: 0; }
.app-download-logo { width: 72px; height: 72px; border-radius: 18px; flex: none; }
.app-platform { display: grid; gap: 12px; justify-items: start; }
.app-platform h2 { margin: 0; font-size: 17px; }
.app-platform p { margin: 0; }
.app-store-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.app-store-button { min-width: 200px; font-size: 15px; padding: 10px 18px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.app-store-button .app-store-logo { height: 32px; width: auto; max-width: 130px; object-fit: contain; }
.app-store-button.soon { opacity: .55; cursor: default; }
.app-store-button.soon small { font-size: 12px; color: var(--muted); }
.app-direct { display: grid; gap: 6px; justify-items: start; width: 100%; }
.app-download-button { min-width: 200px; font-size: 16px; padding: 4px 22px; }
.app-steps { width: 100%; }
.app-steps summary { cursor: pointer; padding: 6px 0; color: var(--primary); }
.app-steps ol { margin: 6px 0; padding-inline-start: 20px; display: grid; gap: 4px; }
.app-hero-side { display: none; }
.app-showcase { width: 100%; height: auto; display: block; }
.app-qr { display: grid; justify-items: center; gap: 6px; text-align: center; }
.app-qr img { width: 160px; height: 160px; background: #fff; border-radius: 8px; padding: 6px; }
@media (min-width: 768px) {
  .app-hero { grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; padding-top: 16px; }
  .app-hero-side { display: grid; gap: 16px; position: sticky; top: 88px; }
}

/* «خبرم کن» — ردیفِ هر جست‌وجو و نشانِ سبزِ «تازه»، مثل اپ */
.search-rows { display: flex; flex-direction: column; }
.search-row { display: flex; align-items: center; gap: 4px; padding: 12px 0; border-top: 1px solid var(--line); }
.search-row:first-child { border-top: 0; }
.search-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; color: inherit; text-decoration: none; }
.search-row-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fresh-badge { display: inline-block; background: var(--primary); color: #fff; border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 700; }
.card.listing-card { position: relative; }
.card.listing-card > .fresh-badge { position: absolute; top: 12px; left: 12px; }
.notify-choice { display: flex; flex-direction: column; gap: 6px; }

/* فرم ثبت آگهی: ستاره فیلدِ اجباری و جمع شدنِ نرمِ کادرِ قیمت — مثل اپ */
.required-star { color: var(--error); font-weight: 700; }
.collapse { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .22s ease, opacity .22s ease; }
.collapse > * { min-height: 0; overflow: hidden; }
.collapse.closed { grid-template-rows: 0fr; opacity: 0; }

/* تصویرِ بالای دسته‌بندی — مثل اپ */
.category-banner { display: block; width: 100%; aspect-ratio: 1983 / 793; object-fit: cover; border-radius: 12px; margin: 8px 0 4px; }

/* خطِ سقفِ آگهی: آیکونِ چهارگوشِ گرد، جگری، هم‌راستا با وسطِ متن — مثل اپ */
.quota-info { display: flex; align-items: center; gap: 6px; }
.quota-icon { flex: none; width: 18px; height: 18px; background: #0b6fa4; -webkit-mask: var(--squircle-info) center / contain no-repeat; mask: var(--squircle-info) center / contain no-repeat; }

/* کادرِ متن با ضربدرِ پاک کردن (نام گیاه) */
.clearable { position: relative; }
.clearable input { width: 100%; padding-inline-end: 40px; }
.input-clear { position: absolute; inset-inline-end: 4px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted, inherit); font-size: 16px; line-height: 1; cursor: pointer; }
.input-clear[hidden] { display: none; }

/* کادرِ نامِ گیاه: دکمه کادرشکل که ورقه انتخاب را باز می‌کند */
.name-pick { position: relative; display: flex; align-items: center; min-height: 48px; padding: 0 12px; padding-inline-end: 44px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); font-size: 16px; cursor: pointer; }
.name-pick .placeholder { color: var(--muted); }
.name-pick .input-clear { inset-inline-end: 6px; }
.map-sheet > input { width: 100%; }
.name-sheet-list { max-height: 50vh; overflow-y: auto; overscroll-behavior: none; margin: 8px -20px 0; }
.name-sheet-row { display: flex; width: 100%; align-items: center; min-height: 48px; padding: 0 20px; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; font-size: 16px; text-align: start; cursor: pointer; }
.name-sheet-row:hover { background: color-mix(in srgb, currentColor 6%, transparent); }
.name-sheet-note { margin-inline-start: 6px; color: var(--muted); font-size: 14px; }
.name-sheet-row.own { color: var(--primary); }
.name-sheet-row.chosen::after { content: '✓'; margin-inline-start: auto; color: var(--primary); }

/* پنلِ «نام گیاهان»: هر نام یک ردیف با نوع */
.plant-rows { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; max-height: 60vh; overflow-y: auto; }
.plant-row { display: flex; gap: 6px; align-items: center; }
.plant-row input { flex: 1; min-width: 0; }
.plant-row select.plant-type { flex: none; width: 130px; }
.search-miss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.search-miss .save-row { margin: 0; }
.affinity-row { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.search-miss-groups { display: flex; flex-direction: column; max-height: 40vh; overflow-y: auto; overscroll-behavior: contain; margin-bottom: 12px; }
.plant-suggest { padding: 10px 0; border-bottom: 1px solid var(--line); }
.plant-suggest:last-child { border-bottom: 0; }
.plant-suggest .save-row { margin-top: 6px; }

/* ته کاوش: نشانگر و متنِ کوچکِ «در حال دریافت…» کنارِ هم — مثل اپ */
.more-loading { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 16px 0; color: var(--muted); font-size: 13px; }
.more-loading .page-spinner { margin: 0; }

/* «استان‌های پرآگهی»: شمارِ آگهی روی عکس، پایین-چپ — مثل اپ */
.province-image { position: relative; }
/* کادرِ افقیِ ۳ به ۲ مثلِ اپ: عکسِ افقیِ استان با کمترین زوم */
.area-card.province img { height: auto; aspect-ratio: 3 / 2; }
/* استان‌های پرآگهی در سایت بزرگ‌تر از کارت‌های دیگرِ ردیف؛ در پنل باز هم بزرگ‌تر */
.area-card.province { flex-basis: 220px; }
.admin-provinces .area-card.province { flex-basis: 300px; cursor: zoom-in; }
.province-image .province-count { bottom: 4px; left: 4px; font-size: 12px; font-weight: 400; }

/* جای ویترینِ خالی: همان اندازه، دعوت به رزرو — مثل اپ */
.showcase-promo { position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden; text-decoration: none; color: var(--text); }
/* تصویرِ ویترینِ خالی (مدیر عوضش می‌کند)؛ کارتِ شیشه‌ای روی دیوارِ روشنِ بالای سکو، مثل کادرِ اطلاعاتِ ویترین */
.showcase-promo-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* ویترینِ خالی: زمینه کمی بلوری تا کارتِ وسط خوانده شود؛ بزرگ‌نماییِ کم تا لبه محو دیده نشود — مثل اپ */
.showcase-promo > .showcase-promo-bg { filter: blur(5px); transform: scale(1.06); }
.showcase-promo-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 18px; text-align: center; border-radius: 10px; background: color-mix(in srgb, var(--surface) 72%, transparent); box-shadow: 0 2px 8px rgb(0 0 0 / 0.15); }
.showcase-promo-card > span:not(.button) { font-weight: 400; }
.showcase-promo strong { font-size: 20px; font-weight: 400; }
/* متنِ کاورِ ویترین با ایران‌یکان؛ پررنگ‌ها با پررنگِ ساختگیِ همان قلم */
.showcase-promo { font-family: IRANYekan, YekanBakh, sans-serif; }
/* دکمه «رزرو ویترین» با قلمِ سایت (یکان بخ) */
.showcase-promo .button { font-family: YekanBakh, sans-serif; }
.showcase-promo .button { margin-top: 4px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: var(--nav-control); padding: 0 20px; border-radius: 4px; background: var(--primary); color: #fff; font-weight: 400; }

/* پنلِ ویترین: آمار، قیمتِ هر نوبت، رزروها */
.showcase-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.showcase-stat { display: flex; flex-direction: column; gap: 2px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
.showcase-stat strong { font-size: 18px; }
.showcase-hours { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.showcase-booking { padding: 10px 0; border-bottom: 1px solid var(--line); }
.showcase-booking:last-child { border-bottom: 0; }

/* «آگهی‌های مرتبط» ته صفحه آگهی: ردیفِ افقی، هر کارت ۸۵٪ پهنا تا بعدی پیدا باشد — مثل اپ */
.related-block { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.related-block h3 { margin: 0 0 8px; }
.related-row { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; }
.related-row > * { flex: 0 0 min(85%, 420px); scroll-snap-align: start; margin: 0; }
.related-skeleton { height: 118px; border-radius: 12px; }

/* ردیفِ «حساب من» که کاربر از صفحه‌اش برگشته: یک لحظه آبیِ کم‌رنگ — مثل اپ (InfoBlue) */
.link-row.return-flash { animation: return-flash 1.15s ease-out; }
@keyframes return-flash { 0%, 22% { background: rgb(11 111 164 / 0.14); } 100% { background: transparent; } }

/* لودینگِ شروع: لوگو وسط و لودینگ زیرش، مثل ادامه اسپلشِ اپ */
.boot-splash { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.cart-loader.boot-mark, .boot-mark { width: 112px; height: 112px; }


/* نشانیِ زیرِ نقشه در «کسب‌وکار من» و فرمش: همان پینِ آبیِ کارت‌های «تازه‌ترین آگهی‌ها» — مثل اپ */
.pin-line { display: flex; align-items: flex-start; gap: 6px; }
.pin-line::before { content: ''; flex: none; width: 12px; height: 14px; margin-top: 3px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52.71 64'%3E%3Cpath fill='%230880EA' d='M0 26.35C0.00 45.17 26.35 64.00 26.35 64C26.35 64.00 52.71 45.06 52.71 26.35C52.71 24.45 52.51 22.55 52.1 20.69C51.97 20.11 51.82 19.54 51.66 18.98C51.00 17.31 49.74 15.95 48.13 15.17C46.52 14.39 44.67 14.24 42.95 14.76C41.23 15.28 39.77 16.42 38.86 17.96C37.95 19.50 37.66 21.34 38.03 23.09C38.10 23.32 38.16 23.54 38.21 23.78C38.42 24.68 38.53 25.60 38.53 26.52C38.56 33.17 33.16 38.67 26.51 38.76C24.88 38.78 23.27 38.47 21.76 37.86C20.25 37.25 18.88 36.33 17.73 35.18C16.58 34.03 15.67 32.66 15.06 31.15C14.45 29.64 14.15 28.03 14.17 26.4C14.27 19.80 19.89 14.33 26.49 14.4C27.41 14.41 28.33 14.52 29.23 14.74C29.69 14.85 30.14 14.99 30.58 15.15C31.03 15.24 31.48 15.29 31.94 15.29C35.88 15.29 39.09 12.03 39.09 8.03C39.10 6.63 38.70 5.27 37.95 4.09C37.20 2.91 36.12 1.98 34.85 1.4C34.27 1.20 33.68 1.03 33.08 0.87C30.89 0.29 28.63 0.00 26.36 0C11.80 0.00 0.00 11.80 0 26.35Z'/%3E%3C/svg%3E") center / contain no-repeat; }

/* کسب‌وکارهای حذف‌شده (پنل مدیر): فهرست، پرونده و چاپِ A4 */
.archive-row { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.archive-row:last-child { border-bottom: none; }
.archive-actions { display: flex; gap: 8px; justify-content: space-between; margin-bottom: 12px; }
.archive-sheet { background: var(--surface, #fff); color: var(--text, #111); border-radius: 12px; padding: 20px; }
.archive-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid currentColor; }
.archive-head strong { font-size: 20px; }
.archive-section { margin-top: 18px; break-inside: avoid-page; }
.archive-section h2 { font-size: 15px; margin: 0 0 8px; }
.archive-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.archive-table th, .archive-table td { border: 1px solid var(--line, #ddd); padding: 6px 8px; text-align: start; vertical-align: top; overflow-wrap: anywhere; }
.archive-table th { background: rgba(127, 127, 127, .08); font-weight: 600; }
.archive-table:not(.wide) th { width: 34%; }
.archive-section { overflow-x: auto; }
.archive-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; }
@media print {
  @page { size: A4; margin: 14mm; }
  body * { visibility: hidden !important; }
  .archive-sheet, .archive-sheet * { visibility: visible !important; }
  .archive-sheet { position: absolute; inset: 0 0 auto 0; padding: 0; background: #fff !important; color: #000 !important; border-radius: 0; }
  .archive-table th, .archive-table td { border-color: #999 !important; color: #000 !important; }
  .archive-section { overflow: visible; }
  .archive-table tr { break-inside: avoid; }
  .archive-sheet a { color: #000 !important; }
}
/* مدرک محل در پنل مدیر: کد ملیِ تأییدشده درشت، برای تطبیق با مدرک */
.doc-national-id { font-size: 15px; margin: 4px 0; }
.doc-national-id strong { font-size: 20px; letter-spacing: 1px; }
/* دکمه خط‌دارِ جگری (حذف لوگو، حذف کسب‌وکار) — مثل اپ */
button.danger-outline { background: none; color: var(--error); border: 1px solid var(--error); }
button.danger-outline[hidden] { display: none; }
/* شرط‌های «نمایش در صفحه اصلی»: برآورده سبز با تیکِ پر، نه خاکستری با دایره خالی — مثل اپ */
.feature-check { display: flex; align-items: center; gap: 8px; margin: 6px 0; color: var(--muted); font-weight: 500; }
.feature-check.ok { color: var(--primary); }
.feature-mark { position: relative; flex: none; width: 20px; height: 20px; border-radius: 3px; border: 2px solid currentColor; box-sizing: border-box; }
.feature-check.ok .feature-mark { background: currentColor; }
.feature-check.ok .feature-mark::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--on-primary, #fff); }
.archive-hold { display: flex; flex-direction: column; gap: 6px; padding-block: 10px; border-top: 1px solid var(--line); }
.session-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 10px; border-top: 1px solid var(--line); }
.session-row button { flex: none; width: auto; }
.login-reason { font-weight: 600; font-size: 17px; text-align: center; margin: 4px 0 8px; }
/* ستاره گوشه‌گرد (starSvg)، هم‌قدِ متن */
.round-star { display: inline-block; vertical-align: -0.125em; }
.star-pick .vote.star .round-star { width: 28px; height: 28px; }

/* جمله خواسته‌شده در «قوانین»: در تمِ روشن آبیِ اپ — مثل اپ */
:root:not([data-theme="dark"]) .terms p.terms-focus { color: #0b6fa4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .terms p.terms-focus { color: inherit; } }
/* نورافکنِ یک‌گامی — مثل اپ */
.spotlight { position: fixed; inset: 0; z-index: 200; animation: spot-in .25s ease; }
@keyframes spot-in { from { opacity: 0; } }
.spotlight-hole { position: fixed; border: 2px solid var(--error); border-radius: 10px; box-shadow: 0 0 0 9999px rgb(0 0 0 / 0.55); pointer-events: none; }
.spotlight-wrap { position: fixed; inset-inline: 16px; max-width: 420px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.spotlight-bubble { background: #fff; color: #1d1d1d; border-radius: 14px; padding: 14px 16px; box-shadow: 0 4px 16px rgb(0 0 0 / 0.25); }
.spotlight-bubble p { margin: 0; }
.spotlight-wrap > button { align-self: flex-end; }
.spotlight-wrap.above { flex-direction: column-reverse; }
.spotlight-bubble { position: relative; }
.spotlight-bubble::before { content: ''; position: absolute; left: var(--tail, 50%); width: 18px; height: 12px; margin-left: -9px; background: #fff; }
.spotlight-wrap.below .spotlight-bubble::before { top: -11px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.spotlight-wrap.above .spotlight-bubble::before { bottom: -11px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.map-sheet > button.wide { width: 100%; }
/* صفحه دسته و استان: کارتِ ردیفیِ «ذخیره‌های من» با نشانکِ ذخیره کوچک بالا-چپ — مثل اپ */
.row-card { position: relative; }
.row-card .listing-card { position: relative; }
.card-save.row-save { width: 36px; height: 36px; border-radius: 12px; }
.card-save.row-save::before { width: 24px; height: 24px; }
/* گفتگوی «جاگل»: سنجاق بالای فهرست، با لوگوی سبز — مثل اپ */
/* لوگوی جاگل سبز و صورتی است؛ زمینه روشن تا روی سبزِ اپ گم نشود */
.system-avatar { background: #FDF9F7 url("/img/logo.png") center / 78% no-repeat; }
.system-row { border-inline-start: 3px solid var(--primary); }
.system-msg { max-width: 560px; }
.system-row .chat-last { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* مقایسه دو متنِ قوانین در پنل مدیر */
.rules-diff .diff-del { color: var(--error); text-decoration: line-through; }
.rules-diff .diff-add { color: var(--published); }

/* دروازه قوانین: بخش تازه جمع‌شده، عنوان با فلش (مثل اپ) */
.rules-changed { border-bottom: 1px solid var(--line, #e5e7eb); padding: 10px 0; }
.rules-changed summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; }
.rules-changed summary::-webkit-details-marker { display: none; }
.rules-changed summary::after { content: '⌄'; transition: transform .2s; }
.rules-changed[open] summary::after { transform: rotate(180deg); }

/* «پروانه فروش سم و کود فروشنده تأیید شده» در صفحه آگهی — مثل اپ */
.license-ok { color: var(--primary); font-weight: 700; }

/* نقطه‌های محدوده شهر در پنل (کشیدنی) */
.bound-vertex { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid #9e2236; cursor: grab; box-shadow: 0 1px 3px rgba(0,0,0,.3); }

/* چیپِ چندانتخابی (دسته‌های کسب‌وکار) — مثل ToggleButtonِ اپ */
button.chip-toggle[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }

/* کادرِ انتخاب در فرمِ کسب‌وکار، هم‌شکلِ کادرِ «دسته‌بندی» ثبت آگهی — مثل اپ */
button.picker-box { display: flex; width: 100%; min-height: 56px; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 16px; border: 1px solid var(--line); border-radius: 4px; background: none; color: var(--text); text-align: start; }
button.picker-box.empty { color: var(--muted); }
button.picker-box:disabled { opacity: 1; cursor: default; }

/* ایرادِ ثبت آگهی: نوارِ نازکِ جگری بالای دکمه، مثلِ نوارِ وضعیتِ کادرِ ویرایش — هم‌شکلِ اپ */
.form-bar { color: var(--error); font-size: 13px; text-align: center; padding: 4px 16px; margin-top: 12px; border-top: 1px solid var(--line, rgba(127,127,127,.25)); }
.form-bar[hidden] { display: none; }

/* خطِ افقیِ نازک بینِ بخش‌های فرمِ کسب‌وکار — مثل اپ */
.form-sep { border: 0; border-top: 1px solid color-mix(in srgb, var(--text) 45%, transparent); margin: 16px 0; }

/* نامِ مدرک در ورقه «کدام مدرک؟» آبیِ پینِ شهر — مثل اپ */
.doc-kind-name { color: #0880EA; font-weight: 600; }

/* هشداری که خودش لینک است (آگهی رد شده در «حساب من») — رنگ و شکلِ همان هشدار */
.plain-link { display: block; color: inherit; text-decoration: none; }

/* فیلتر و ترتیبِ جست‌وجو — مثل اپ */
.filter-bar { margin: 4px 0 8px; }
.filter-chip { white-space: nowrap; }
.filters-body { display: flex; flex-direction: column; gap: 16px; max-height: 60vh; overflow-y: auto; padding-bottom: 8px; }
/* خطِ جداکننده تیره بینِ بخش‌های ورقه فیلترها — مثل اپ */
.filters-body > div ~ div { border-top: 0.8px solid var(--text); padding-top: 16px; }
.filter-label { font-weight: 600; margin-bottom: 6px; }
.chip-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.range-row { display: flex; gap: 8px; }
.range-row input { flex: 1; min-width: 0; font-size: 16px; }
.name-sheet-row:disabled { opacity: .45; cursor: default; }

/* «تبلیغ در جستجو»: سه عددِ اعتبار کنار هم، و هر تبلیغ با خطِ جدا — مثل اپ */
.ad-wallet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 12px; }
.ad-wallet > div { display: flex; flex-direction: column; gap: 2px; background: var(--settings-bg); border-radius: 6px; padding: 8px; }
.ad-row { padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.ad-row:last-of-type { border-bottom: 0; }

/* دکمه‌های به‌هم‌چسبیده انتخاب (مدت و شروعِ ویترین) — مثل ToggleButton اپ */
.seg-row { gap: 2px; flex-wrap: nowrap; margin-bottom: 8px; }
.seg-row .seg { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 4px;
  border: 1px solid var(--line); background: var(--surface); color: inherit; cursor: pointer; }
.seg-row .seg small { font-size: 11px; color: var(--muted); }
.seg-row .seg.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.seg-row .seg.on small { color: rgba(255,255,255,.85); }

/* پنل «سهمیه ثبت آگهی»: جدولِ دسته‌ها با کادرهای عدد، اسکرولِ افقی روی گوشی */
.quota-table-wrap { overflow-x: auto; margin: 8px 0; }
.quota-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.quota-table th, .quota-table td { border: 1px solid var(--line); padding: 4px 6px; text-align: center; }
.quota-table td:first-child { text-align: start; white-space: nowrap; }
.quota-table input { padding: 4px; font-size: 13px; }
/* «محدودیت‌های ثبت آگهی»: هر دسته یک کادر، اشتراکِ فعال سبز — مثل اپ */
.quota-row { display: flex; flex-direction: column; gap: 4px; }
.quota-plan { color: var(--primary); font-weight: 600; }
.quota-table { padding: 4px 16px; }
.quota-line { display: grid; grid-template-columns: 1fr 72px 72px; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: center; }
.quota-line:last-child { border-bottom: 0; }
.quota-line > span:not(:first-child) { text-align: center; }
.quota-head { font-size: 13px; color: var(--muted); }
.quota-line .quota-closed { grid-column: 2 / 4; font-size: 13px; }
/* نامِ سند بالای بندهای تازه دروازه پذیرش — مثل اپ */
.rules-changed-doc { color: var(--primary); font-weight: 700; margin-top: 4px; }

/* لودینگِ صفحه‌ها: لوگوی متحرک وسطِ جای محتوا — مثل اپ (PageLoader ۹۶، MoreLoader ۵۶) */
.page-loader { display: flex; align-items: center; justify-content: center; min-height: 60vh; }
/* همه صفحه‌ها یک جا: درست وسطِ صفحه، هرجا که ظرفش باشد — مثل اپ */
.page-loader .cart-loader { width: 96px; height: 96px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.more-loader { display: flex; align-items: center; justify-content: center; height: 96px; }
.more-loader .cart-loader { width: 56px; height: 56px; }

/* پنجره وسطِ صفحه (اولین ذخیره) */
.center-dialog { border: 0; border-radius: 12px; padding: 20px; max-width: min(360px, calc(100vw - 32px)); background: var(--surface, #fff); color: inherit; }
.center-dialog::backdrop { background: rgba(0, 0, 0, .4); }
.center-dialog h3 { margin: 0 0 8px; }
.center-dialog p { margin: 0 0 16px; }

/* ورقه «ترتیب» — مثل اپ */
.sort-list .name-sheet-row { gap: 12px; min-height: 52px; }
.sort-list .name-sheet-row + .name-sheet-row { border-top: 1px solid var(--line); }
.sort-list .name-sheet-row.chosen { color: var(--primary); font-weight: 600; }

/* هدرِ صفحه جستجو و صفحه دسته: کادرِ جستجو و نوارِ فیلترها، چسبیده زیرِ نوارِ بالا — مثل اپ */
.feed-head { position: sticky; top: var(--bar-height, 57px); z-index: 8; background: var(--bar); display: flex; flex-direction: column; gap: 8px; padding-block: 8px; }
.panel.feed-head { padding-block: 12px; }
.settings-page .feed-head { background: var(--settings-bg); }
.feed-head .filter-bar { margin: 0; }
/* دکمه شهرِ هدرِ صفحه جستجو و دسته: بی کادر روی هدر، مثلِ صفحه اصلی — مثل اپ */
.feed-head .feed-place-button { border: 0; background: none; padding-inline: 4px; color: var(--muted, inherit); }

/* عکس‌های صفحه آگهی تا برسند: همان جای‌خالیِ لوگودارِ کارت‌ها، بعد محوِ نرم — مثل اپ */
.slide { background: color-mix(in srgb, var(--sunken), var(--text) 8%) url(/placeholder.svg) center / 120px auto no-repeat; }
.slide img { transition: opacity .45s cubic-bezier(0, 0, .2, 1); }
.slide.img-loading img { opacity: 0; }
.go-top-icon { width: 1.2em; height: 1.2em; vertical-align: -0.25em; }
.admin-avatar { width: 96px; height: 96px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); cursor: zoom-in; display: block; margin: 4px 0; }

/* دکمه اصلیِ نیم‌عرض، سمتِ راست (ذخیره اطلاعات کاربری، دریافت کد پیامکی) — مثل اپ */
button.half-button { display: block; width: 50%; margin-inline-start: 0; margin-inline-end: auto; }
button.half-button[hidden] { display: none; }

/* «پیش از معامله بخوانید» زیرِ عکس‌های آگهی: کادرِ جگریِ کم‌رنگ، مثلثِ اخطار و فلشِ «>» — مثل اپ (`SafetyTipsButton`) */
.safety-tips-button { display: flex; align-items: center; gap: 8px; position: relative; margin: 12px 16px; padding: 6px 10px 6px 40px; border-radius: 4px; background: rgba(158, 34, 54, .08); color: var(--error); font-weight: 500; text-decoration: none; }
.safety-tips-icon { width: 40px; height: 40px; object-fit: contain; flex: 0 0 40px; }
.safety-tips-button::after { content: ''; position: absolute; left: 16px; top: 50%; width: 9px; height: 9px; border: solid var(--error); border-width: 0 0 2px 2px; transform: translateY(-50%) rotate(45deg); }
.safety-tips .notice { margin: 0 0 14px; }
.safety-head { position: sticky; top: var(--bar-height, 57px); z-index: 2; background: var(--settings-bg); margin: -16px -16px 0; padding: 16px 16px 0; }
.safety-banner { display: block; width: 100%; aspect-ratio: 1376 / 768; object-fit: cover; border-radius: 12px; margin: 0 0 16px; }
.safety-tips .notice { font-weight: 400; }
/* «حراج تازه»: انتخابِ آگهی با عکس، نام و دلیل — مثل اپ */
.flash-pick img, .flash-pick .booking-noimg { width: 56px; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 8px; flex: none; }
.flash-pick span { display: flex; flex-direction: column; min-width: 0; }
.flash-pick strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* «مدیریت آگهی»: مشخصات در جدول (برچسب، مقدار) — مثل اپ */
.manage-table { padding: 4px 16px; }
.manage-row { display: flex; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line, #e6e6e6); }
.manage-row:first-child { border-top: 0; }
.manage-row > span:first-child { flex: 0 0 96px; }
.manage-ok { color: #0EA960; }
.manage-bad { color: #9E2236; }
.manage-gold { color: #B8860B; }
/* پیش‌نمایشِ فرمِ ثبت آگهی: صفحه آگهی روی فرم، تمام‌صفحه — مثل اپ */
.post-preview { position: fixed; inset: 0; z-index: 900; overflow-y: auto; background: var(--bg); }
.post-preview > .detail-cascade { max-width: 900px; margin: 0 auto; padding: 16px; }
.post-preview .float-card { position: fixed; }
.manage-value { display: inline-flex; align-items: center; gap: 6px; }
.manage-value .card-tab-icon svg { width: 16px; height: 16px; }
.manage-actions { display: flex; gap: 8px; margin-top: 8px; }
.manage-actions > button { flex: 1; min-height: 38px; background: none; border: 1px solid var(--primary); color: var(--primary); border-radius: 4px; }
.manage-actions > button.neutral { border-color: var(--muted); color: var(--muted); }
.manage-actions > button.danger { border-color: #9E2236; color: #9E2236; }
/* «مشاهده آگهی»/«پیش‌نمایش» در «مدیریت آگهی»: کادرِ سیاه — مثل اپ */
.preview-button { border: 1px solid var(--text) !important; }
/* جمله‌ها هر کدام در خطِ خود با دایره توپرِ مشکی — مثل اپ (ConfirmSheet bullets) */
.dot-list { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dot-list li { display: flex; gap: 10px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.dot-list li::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: 9px; border-radius: 50%; background: var(--text); }
/* فاصله جمله آخر تا دکمه‌های ورقه، تا لمسِ ناخواسته نخورد — مثل اپ */
.map-sheet .dot-list { margin-bottom: 28px; }
.off-filter { margin: 8px 0 12px; }

/* ردیفِ «احراز هویت» در «حساب من» با تصویرِ پس‌زمینه (پنل «تصویر صفحه‌ها») */
/* ردیفِ پیوندِ «حساب من» با تصویرِ پس‌زمینه */

/* پشتیبانی — مثل اپ */
.support-search { width: 100%; margin: 12px 0; border-color: var(--text); }
/* فرم «پیام به پشتیبانی»: کادرِ موضوع، آگهی و «افزودن عکس» مشکی — مثل اپ */
.support-new .name-pick, .support-new select, .support-new .attach-button { border: 1px solid var(--text); }
.support-topics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
/* آیکون راست و نام کنارش (چپِ آیکون) */
.support-topic { display: flex; align-items: center; gap: 10px; margin: 0; text-decoration: none; color: var(--text); }
.support-topic .support-icon { flex: none; line-height: 1; }
.support-icon { font-size: 22px; }
.support-ticket small { display: block; }
.status-pill { display: inline-block; border-radius: 6px; padding: 2px 8px; font-size: 12px; font-weight: 600; vertical-align: middle; }
.status-pill.waiting { background: var(--pending-bg); color: var(--pending); }
.status-pill.answered { background: var(--published-bg); color: var(--published); }
.status-pill.closed { background: var(--sunken); color: var(--muted); }
.support-thread { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; max-height: calc(100vh - 380px); min-height: 240px; overflow-y: auto; overscroll-behavior: contain; padding: 4px; }
.support-bubble { background: var(--primary-container); border-radius: 10px; padding: 12px; max-width: 85%; align-self: flex-start; }
.support-bubble.admin { background: var(--surface); border: 1px solid var(--line); align-self: flex-end; }
.support-bubble p { margin: 6px 0; white-space: pre-wrap; }
.support-strip { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.support-strip img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; }
.support-thumb { position: relative; }
.support-thumb button { position: absolute; top: -6px; left: -6px; width: 22px; height: 22px; border-radius: 11px; padding: 0; line-height: 1; }
.support-suggest { margin: 6px 0; }

/* پنل پشتیبانی: صفِ درخواست‌ها و صفحه هر درخواست */
.support-filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.support-filters input { flex: 1; min-width: 180px; }
.support-list { display: flex; flex-direction: column; gap: 8px; }
.support-row { display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-right: 4px solid var(--muted); border-radius: 8px; padding: 12px 14px; color: var(--text); text-decoration: none; }
.support-row:hover { border-color: var(--text); }
.support-row.waiting { border-right-color: var(--pending); }
.support-row.answered { border-right-color: var(--published); }
.support-row-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.support-row-preview { color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.support-row-foot { display: flex; gap: 12px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.support-chip { background: var(--sunken); border-radius: 4px; padding: 2px 8px; font-size: 12px; }
.support-chip.followup { background: var(--error-bg); color: var(--error); }
.support-wait { color: var(--error); }
.support-ticket-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
@media (max-width: 900px) { .support-ticket-layout { grid-template-columns: 1fr; } }
.support-info { position: sticky; top: 72px; display: flex; flex-direction: column; gap: 0; }
.support-info h3 { margin: 0 0 6px; font-size: 15px; }
.support-info-line { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 3px 0; word-break: break-word; }
.support-status { display: inline-block; border-radius: 4px; padding: 2px 10px; font-weight: 600; margin-bottom: 6px; }
.support-status.waiting { background: var(--pending-bg); color: var(--pending); }
.support-status.answered { background: var(--published-bg); color: var(--published); }
.support-status.closed { background: var(--sunken); color: var(--muted); }
.support-others { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.support-others a { display: flex; align-items: center; gap: 6px; }
.support-dot { width: 8px; height: 8px; border-radius: 4px; background: var(--muted); flex: none; }
.support-dot.waiting { background: var(--pending); }
.support-dot.answered { background: var(--published); }
.support-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.support-admin-thread { display: flex; flex-direction: column; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 16px; height: calc(100vh - 360px); min-height: 380px; overflow-y: auto; overscroll-behavior: contain; }
.support-day { align-self: center; font-size: 12px; color: var(--muted); background: var(--sunken); border-radius: 12px; padding: 2px 12px; }
.support-msg { max-width: 80%; align-self: flex-start; background: var(--primary-container); border-radius: 10px; padding: 10px 14px; }
.support-msg.admin { align-self: flex-end; background: var(--sunken); }
.support-msg-who { display: flex; gap: 8px; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.support-msg-text { font-size: 15px; line-height: 1.9; white-space: pre-wrap; word-break: break-word; }
.support-msg-images { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.support-msg-images img { width: 160px; height: 160px; object-fit: cover; border-radius: 8px; cursor: zoom-in; }
.support-composer { position: sticky; bottom: 0; background: var(--bg); padding: 10px 0; border-top: 1px solid var(--line); }
.support-composer textarea { width: 100%; font-size: 15px; }
.support-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; z-index: 1000; cursor: zoom-out; }
.support-lightbox img { max-width: 95vw; max-height: 95vh; }

.support-zoom { cursor: zoom-in; }
.support-full { width: 100%; max-height: 70vh; object-fit: contain; border-radius: 12px; }
.support-caption { text-align: center; margin: 6px 0 0; }

/* تصویرِ بالای صفحه «احراز هویت» (زمینه شفاف) — مثل اپ */
.identity-banner { width: 100%; aspect-ratio: 1032 / 379; object-fit: contain; display: block; margin-bottom: 12px; }
.support-chip.mine { background: var(--published-bg); color: var(--published); }
.solved-button { border: 1px solid var(--text); background: none; color: var(--text); border-radius: 4px; padding: 4px 12px; min-height: 0; height: 32px; font-size: 14px; line-height: 1; }
/* به‌روزرسانی اپ: کانال‌ها و متن‌ها */
.update-admin h2 { font-size: 17px; margin: 20px 0 8px; }
.update-head { align-items: center; }
.update-head h2 { margin: 12px 0 8px; }
.update-channels { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.update-channel { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.update-versions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.update-versions > div { display: flex; flex-direction: column; gap: 2px; background: var(--sunken); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.update-versions b { font-size: 16px; }
.update-chip { display: inline-block; border-radius: 4px; padding: 2px 8px; font-size: 12px; margin-inline-start: 4px; }
.update-chip.platform { background: var(--sunken); color: var(--muted); }
.update-chip.off { background: var(--sunken); color: var(--muted); }
.update-chip.soft { background: var(--published-bg); color: var(--published); }
.update-chip.force { background: var(--error-bg); color: var(--error); }
.update-dist summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.update-dist-row { display: grid; grid-template-columns: 110px 1fr auto; gap: 8px; align-items: center; font-size: 13px; padding: 3px 0; }
.update-bar { height: 6px; background: var(--sunken); border-radius: 3px; overflow: hidden; }
.update-bar i { display: block; height: 100%; background: var(--published); }
.update-texts { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.update-texts .panel { margin: 0; }
.update-editor { display: grid; gap: 8px; }
.update-buttons { display: grid; gap: 8px; }
.update-button-row { display: flex; gap: 8px; flex-wrap: wrap; }
.update-button-row input:not([type]) , .update-button-row select { flex: 1; min-width: 140px; }
.update-preview-image { aspect-ratio: 1376 / 768; border-radius: 8px; background: var(--sunken) center / cover no-repeat; }
.update-version-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.update-custom { display: grid; gap: 8px; border-inline-start: 3px solid var(--line); padding-inline-start: 12px; }
.update-custom h4 { margin: 8px 0 0; }
.danger-text { color: var(--error); }
/* مدرک کسب‌وکار: عکسِ کوچک سمتِ راستِ ردیف، زدنش عکسِ کامل */
.doc-row { align-items: center; gap: 10px; }
.doc-thumb { flex: none; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; padding: 0; border: 0; background: var(--sunken); cursor: zoom-in; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; }
.doc-thumb.empty { cursor: default; }
.doc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.doc-full { display: block; width: 100%; max-height: 70vh; object-fit: contain; border-radius: 12px; background: var(--sunken); }
.shop-categories { display: grid; gap: 2px; margin: 10px 0; }
.purge-parts { gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.purge-preview { display: grid; gap: 10px; max-height: 60vh; overflow-y: auto; }
.purge-item { display: flex; gap: 10px; align-items: center; }
.purge-item img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; flex: none; }
.danger-fill { background: var(--error) !important; border-color: var(--error) !important; color: #fff !important; }


/* عددِ چندواحدی (سن): کادر و «ماه | سال» کنارِ هم — مثل اپ */
.unit-number { display: flex; gap: 8px; align-items: center; }
.unit-number > input, .unit-number > .row { flex: 1; min-width: 0; }
.unit-number .group { flex: none; margin: 0; }

/* عنوانِ ردیفِ «استان‌های پرآگهی»: نازک و کوچک‌تر — مثل اپ */
h2.province-heading { font-size: 16px; font-weight: 400; }

/* صفحه آگهی: عنوانِ هر بخش با خطِ سبز، ۱۲ زیرِ لبه بالای بخش؛ ۱۲ پایینِ هر بخش — مثل اپ */
.home-below [data-part] { margin-top: 12px; margin-bottom: 0; }
/* بی بج: خطِ عمودیِ سبز کنارِ عنوان و بی بولد، همان عنوان‌های فرم ثبت آگهی — مثل اپ (`SectionTab`) */
.home-below h2.section-tab, .showcase-cards h2.section-tab { max-width: 100%; margin: 12px 0; padding: 0; padding-inline-start: 8px; border-inline-start: 3px solid var(--primary);
  color: var(--text); font-size: 16px; font-weight: 400; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-below .flash-head { margin-bottom: 12px; align-items: flex-start; flex-wrap: nowrap; }
.home-below .flash-head h2.section-tab { margin: 12px 0 0; flex: 0 1 auto; }
.home-below .flash-head a { margin-inline-start: auto; margin-top: 4px; }
/* «تازه‌ترین آگهی‌ها»: بجِ عنوان هم داخلِ کادرِ رنگی — مثل اپ */
.home-below .latest-heading { margin: 12px -12px 0; padding: 0 12px 4px; background: var(--latest-tint); }
.home-below .latest-heading h2.section-tab { margin: 12px 0 8px; }
.home-below .latest-list { padding-top: 0; }
.home-below .identify-card, .home-below > [data-part="identify"]:first-child > .identify-card { margin: 0; }
.home-below .cat-tiles { margin: 0; }
/* عنوانِ بخش‌ها (تازه به جاگل، دسته‌بندی‌ها، تازه‌ترین آگهی‌ها) یک شکل — مثل اپ */
.home-below h2.section-heading { font-size: 16px; font-weight: 400; margin-bottom: 8px; }
/* «تازه‌ترین آگهی‌ها»: عکس ۸۲٪ منهای ۱۰ و سمتِ چپش ستونِ دکمه‌ها؛ متنِ زیرِ عکس تمام‌عرض — مثل اپ */
.feed-media-row { display: flex; align-items: stretch; container-type: inline-size; }
.feed-media-row .feed-media { flex: 0 0 calc(82% - 10px); }
.feed-side { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-evenly; }
.feed-side .feed-save { position: static; border-radius: 12px; }
.feed-media-row .feed-media { border-radius: 10px; }
.feed-side-btn { width: 42px; height: 42px; padding: 0; border-radius: 12px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 72%, transparent); color: var(--muted); font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; }
/* کمی برجسته: زمینه پر و سایه نرم؛ زیرِ موس کمی بالا */
.feed-side .feed-save, .feed-side-btn { background: var(--surface); border-color: color-mix(in srgb, var(--line) 70%, transparent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 3px 8px rgba(0, 0, 0, .08); transition: box-shadow .2s, translate .2s; }
.feed-side .feed-save:hover, .feed-side-btn:hover { box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 6px 14px rgba(0, 0, 0, .12); translate: 0 -1px; }


/* پنل «تاریخچه اعلان‌ها» */
.notice-log { display: grid; gap: 8px; margin-top: 12px; }
.notice-log-row .row { flex-wrap: wrap; gap: 6px; align-items: center; }
.notice-log-users { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; }
/* بخش‌های رنگی (یکی در میان، `stripe`): زمینه تمام‌عرض، عنوان ۱۴ زیرِ لبه و ۱۲ پایین؛ حاشیه منفی تا فاصله‌ها همان بماند */
.home-below [data-part].tinted { background: var(--latest-tint); margin-top: 12px; margin-bottom: -12px; padding: 0 12px 12px; margin-inline: -12px; }
/* «تازه‌ترین آگهی‌ها» وقتی نوبتش سفید است (`stripe`) */
.home-below.latest-plain .latest-heading, .home-below.latest-plain .latest-list, .home-below.latest-plain .latest-footer { background: none; }
/* کارتِ «آگهی‌های حراج»: نوشته‌های «تازه‌ترین آگهی‌ها» داخلِ کارتِ باریک */
.area-card .feed-card.area-text { padding: 4px 0 0; gap: 4px; white-space: normal; }
/* «آگهی به نام» در فرم ثبت: دو گزینه زیرِ هم با عکس، نام و تیک؛ انتخاب‌شده سبزِ کم‌رنگ با قابِ سبز — مثل اپ */
.seller-options { display: grid; gap: 8px; }
/* بی کادر: تیکِ چهارگوش سمتِ راستِ عکسِ مربعی (گردی ۱۰)؛ فقط یکی — مثل اپ */
.seller-option { display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%; padding: 6px 0; padding-inline-end: 12px; border: 0; border-radius: 4px; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.seller-option:disabled { opacity: .5; cursor: default; }
.seller-option.dim { opacity: .5; }
.seller-option:not(:disabled):hover { background: var(--sunken); }
.seller-check { width: 18px; height: 18px; flex: none; margin: 0 3px; border: 2px solid var(--muted); border-radius: 2px; box-sizing: border-box; display: grid; place-items: center; }
.seller-option.on .seller-check { background: var(--primary); border-color: var(--primary); }
.seller-option.on .seller-check::after { content: ''; width: 5px; height: 10px; border: solid var(--on-primary, #fff); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.seller-option img, .seller-option-blank { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex: none; background: var(--sunken); }
.seller-option b { font-weight: 400; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* نوارِ «نمایش در صفحه آگهی» بالای تبِ «کسب‌وکار من»: کاری مانده جگری، نمایش سبز؛ تا رسیدنِ وضعیت پنهان — مثل اپ */
.feature-banner { display: none; align-items: center; gap: 8px; margin-bottom: 12px; padding: 10px 12px; border-radius: 4px;
  background: rgba(158, 34, 54, .08); color: var(--error); font-size: 14px; font-weight: 500; text-decoration: none; }
.feature-banner.ready { display: flex; }
.feature-banner::before { content: ''; flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--squircle-info) center / contain no-repeat; mask: var(--squircle-info) center / contain no-repeat; }
.feature-banner::after { content: '‹'; margin-inline-start: auto; font-size: 20px; line-height: 1; }
.feature-banner.ok { background: var(--primary-container); color: var(--on-primary-container); }

/* دکمه متنیِ جگری (مثلِ «درخواست حذف» مدرک) */
.link-danger { background: none; border: 0; padding: 4px 0; color: var(--error); font: inherit; font-size: 14px; cursor: pointer; }

/* «تازه‌ترین آگهی‌ها» خالی: بی کادر و بی عنوان، فقط پیام وسطِ صفحه — مثل اپ */
.home-below .latest-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 96px 16px; text-align: center; }
.home-below .latest-empty p { margin: 0; font-size: 14px; }

/* ورقه استان‌های اعلانِ نیازمندی — مثل اپ */
.reach-list { max-height: 45vh; overflow-y: auto; margin: 0 -4px 4px; }
.reach-fixed { margin: 4px -4px 0; }
.reach-fixed hr { border: 0; border-top: 1px solid var(--line, #ddd); margin: 4px 0 0; }
.reach-row { display: flex; align-items: center; width: 100%; padding: 12px 8px; background: transparent; border: 0; text-align: start; font: inherit; color: inherit; cursor: pointer; }
.reach-row span { flex: 1; }
.reach-row.on::after { content: '✓'; color: var(--primary, #0EA960); font-weight: 700; }

/* ورقه کارهای عکسِ فرم ثبت آگهی — مثل اپ (`PhotoActionsSheet`): ردیف تمام‌عرض با آیکون و نام */
.photo-tile { position: relative; flex: none; }
.cover-badge { position: absolute; top: 8px; inset-inline-start: 8px; padding: 2px 8px; border-radius: 4px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; }
.action-row { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 56px; padding: 0 8px; background: transparent; border: 0; text-align: start; font: inherit; font-weight: 600; color: var(--text, inherit); cursor: pointer; }
.action-row.danger { color: var(--error, #C62828); }
.action-icon { width: 24px; height: 24px; flex: none; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
/* نشانِ کاور همان لوگوی اپ، تک‌رنگ و هم‌رنگِ بقیه */
.action-icon.icon-logo { --icon: url('/img/logo-mono.svg'); }
.action-icon.icon-crop { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 15h2V7c0-1.1-.9-2-2-2H9v2h8v8zM7 17V1H5v4H1v2h4v10c0 1.1.9 2 2 2h10v4h2v-4h4v-2H7z'/%3E%3C/svg%3E"); }
.action-icon.icon-edit { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E"); }
.action-icon.icon-full { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z'/%3E%3C/svg%3E"); }
.action-icon.icon-delete { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/%3E%3C/svg%3E"); }

/* «مسیر با خودرو» زیرِ نقشه صفحه آگهی — مثل اپ */
.route-row { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.route-button { align-self: flex-start; }
.route-summary { margin: 0; font-weight: 600; }

/* نورافکنِ چندگامی: «۱ از ۳» کنارِ دکمه — مثل اپ */
.spotlight-foot { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
.spotlight-count { color: #fff; font-size: 14px; }

/* فرم ثبت آگهی: بخش‌ها روی همان زمینه صفحه، جدا با خطِ افقی — مثل اپ */
.post-form .panel { background: transparent; border: 0; border-radius: 0; margin: 0; padding: 16px 0; }
.post-form .panel + .panel { border-top: 1px solid var(--line, #ddd); }
/* فرم ثبت: کادرِ دسته‌بندی و «استان‌ها» بی حاشیه، برجسته با سایه — مثلِ دکمه فعالِ `.mode-toggle`؛ مثل اپ */
.post-form .cat-group-row:not(.on) { border-color: transparent; background: var(--bar, #fff); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
/* عنوان‌های فرم ثبت برجسته: سایه نرمِ زیرِ لکه — مثل اپ (`brushStroke(raised)`) */
:is(.post-form, .section-tab) .brush-title:not(.blue)::before { filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.18)); }
/* کادرهای نوشتنیِ برجسته فرم ثبت (نام گیاه، عنوان، توضیحات): هم‌شکلِ کادرِ دسته‌بندی — مثل اپ */
.post-form .raised-field { border-color: transparent !important; background: var(--bar, #fff); box-shadow: 0 1px 3px rgba(0,0,0,.12); border-radius: 4px; }
.post-form .raised-field:focus { outline: none; }
.name-pick-arrow { margin-inline-start: 8px; color: var(--muted, #777); }
/* عنوانِ آگهی (تا ۱۰۰ حرف): کارتِ «تازه‌ترین»/«کاوش» و صفحه آگهی حداکثر دو خط با «…» — مثل اپ */
.feed-card h3, h1.listing-title:not(.business-name) { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
/* کادرهای مشخصات و قیمت (گام سوم): هم‌شکلِ «نام گیاه» — مثل اپ */
.post-form .raised-fields input:not([type=checkbox]):not([type=radio]), .post-form .raised-fields select { border-color: transparent !important; background: var(--bar, #fff); box-shadow: 0 1px 3px rgba(0,0,0,.12); border-radius: 4px; }
.post-form .raised-fields input:focus, .post-form .raised-fields select:focus { outline: none; }
/* کادرِ نوشتنی (عنوان، توضیحات، قیمت، عدد و متنِ مشخصات): کادرِ ساده با حاشیه مشکی؛ کادرهای انتخابی برجسته می‌مانند — مثل اپ (`TypedFieldColors`) */
.post-form input.raised-field, .post-form textarea.raised-field, .post-form .raised-fields input:not([type=checkbox]):not([type=radio]) { border: 1px solid var(--text) !important; background: transparent; box-shadow: none; }
.post-form input.raised-field:focus, .post-form textarea.raised-field:focus, .post-form .raised-fields input:not([type=checkbox]):not([type=radio]):focus { box-shadow: inset 0 0 0 1px var(--text); }
/* واحدِ کنارِ عدد («کله»، «سانتی‌متر») همیشه پیدا — مثل `suffix` اپ */
.suffix-input { position: relative; }
.suffix-input input { padding-inline-end: 72px; }
.input-suffix { position: absolute; inset-inline-end: 12px; top: 50%; transform: translateY(-50%); color: var(--muted, #777); pointer-events: none; font-size: 14px; }
.unit-number .mode-toggle { flex: none; }
.toggle-field .mode-toggle { justify-content: flex-start; padding: 4px 0; }
.mode-toggle.fill { justify-content: flex-start; padding: 4px 0; }
/* هر دکمه به اندازه نامش، مثلِ «مقطوع / تخفیف پای معامله» — مثل اپ */
.mode-toggle.fill button { flex: 0 0 auto; padding: 0 18px; white-space: nowrap; }
/* اجباری: خطِ عمودیِ کنارِ عنوان جگری، به‌جای ستاره — مثل اپ (`TitleText(required)`) */
.post-form .form-title.required { border-inline-start-color: var(--error, #c62828); }

/* صفحه قوانین: نسخه و وضعیت بی بولد — مثل اپ */
.rules-plain { font-weight: 400 !important; }
.quota-ok { color: var(--primary); }
.quota-full { color: var(--error); }
.quota-total { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 12px; }

/* شمارنده حروفِ کادرِ متنِ بلند (`counted`) — مثل اپ */
.counted { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.length-counter { color: var(--muted, #6b7280); text-align: end; margin-top: 4px; }
.length-counter.full { color: var(--error); }

/* تأییدِ گزارشِ فرستاده‌شده در همان ورقه (`reportSent`) — مثل اپ (`ReportSent`): تیکِ سبزِ بزرگ وسط */
.report-sent { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding-top: 8px;
  animation: viewIn .22s ease-out; }
.report-sent h3 { margin: 0; }
.report-sent p { margin: 0; }
.report-sent > button { align-self: stretch; margin-top: 8px; }
.report-sent-check { width: 80px; height: 80px; background: var(--primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M7 2a5 5 0 0 0-5 5v10a5 5 0 0 0 5 5h10a5 5 0 0 0 5-5V7a5 5 0 0 0-5-5zm8.73 8.684a1 1 0 1 0-1.46-1.368l-3.083 3.29l-1.523-1.353a1 1 0 0 0-1.328 1.494l2.25 2a1 1 0 0 0 1.393-.063z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M7 2a5 5 0 0 0-5 5v10a5 5 0 0 0 5 5h10a5 5 0 0 0 5-5V7a5 5 0 0 0-5-5zm8.73 8.684a1 1 0 1 0-1.46-1.368l-3.083 3.29l-1.523-1.353a1 1 0 0 0-1.328 1.494l2.25 2a1 1 0 0 0 1.393-.063z'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ساعاتِ پاسخگویی (`hoursEditor`) — مثل اپ: «از / تا» با − و + */
.hours-editor { display: flex; flex-direction: column; gap: 10px; }
.hours-step { display: flex; align-items: center; gap: 8px; }
.hours-step > span { flex: 1; }
.hours-step > b { min-width: 2.5em; text-align: center; font-size: 1.1em; }
.hours-step > button { width: 40px; height: 40px; padding: 0; font-size: 1.2em; }

/* فهرستِ رادیوییِ دلیل‌های گزارش (`reportSheet`) — مثل اپ */
.report-reasons { display: flex; flex-direction: column; margin: 8px 0; }
.radio-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; cursor: pointer; }
.radio-row input { width: 18px; height: 18px; margin: 0; accent-color: var(--primary); }

/* «دستگاه‌های فعال» (`sessionsView`) — مثل اپ */
.session-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.session-row + .session-row { border-top: 1px solid var(--border, #e5e7eb); }
.session-icon { font-size: 24px; }
.session-text { flex: 1; min-width: 0; }
.danger-text { color: var(--error); }
.price-fields { padding: 16px 3px 4px; display: flex; flex-direction: column; gap: 8px; }

/* «ثبت آگهی» با موردِ ناقص: هشدار داخلِ دکمه، جگریِ کم‌رنگ — مثل اپ */
.post-form button.warn { background: #9e2236 !important; color: #fff !important; border-color: transparent !important; }
/* بخشِ ناقص دو بار جگریِ کم‌رنگ می‌شود و قطع */
@keyframes flash-error {
  0%, 50%, 100% { background-color: transparent; box-shadow: 0 0 0 8px transparent; }
  25%, 75% { background-color: color-mix(in srgb, var(--error) 45%, transparent); box-shadow: 0 0 0 8px color-mix(in srgb, var(--error) 45%, transparent); }
}
.flash-error { animation: flash-error 1.12s ease; border-radius: 6px; }

/* «گرفتن موقعیت من» فرم ثبت آگهی: آبیِ اپ با پینِ آبی — مثل اپ */
.post-form button.pin-button { border: 1px solid #0b6fa4 !important; color: #0b6fa4 !important; background: transparent; font-weight: 600; }
.post-form button.pin-button::before { width: 13px; height: 16px; margin-inline-end: 6px; vertical-align: -3px; }

/* «ماه | سال» با دو خط (مدتِ ویترین و قیمتش) */
.mode-toggle.stack button { height: auto; min-height: 36px; padding: 4px 16px; display: inline-flex; flex-direction: column; align-items: center; line-height: 1.35; }
.mode-toggle.stack button small { font-size: 12px; font-weight: 400; }

/* «آگهی‌دهنده»: نام و تیک، زیرش دسته‌های کسب‌وکار ریز — مثل اپ */
.seller-option-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; text-align: start; }
.seller-option-name { display: inline-flex; align-items: center; gap: 8px; }
.seller-option-text small { font-size: 12px; font-weight: 400; line-height: 1.5; }

/* صفحه «تبلیغات»: نام و قیمت در یک ردیف — مثل اپ */
.price-line { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line, rgba(127,127,127,.2)); }
.price-line:first-of-type { border-top: 0; }
.price-line-value { text-align: end; }

/* ---------- صفحه «آگهی» در دسکتاپ (۷۶۸ به بالا) ----------
   موبایل همان شکلِ اپ می‌ماند؛ این‌جا ستونِ پهن‌تر، ویترینِ کوتاهِ سه‌تایی، شبکه «تازه‌ترین آگهی‌ها» و دسته‌های فشرده */
:root { --showcase-h: calc((min(100vw, 900px) - 32px) * 0.8); }
.carousel-cap { display: none; }
@media (min-width: 768px) {
  .view:has(> .home-window), .view:has(> .home-full) { max-width: none; }
  /* سه کارتِ ۵ به ۴ کنارِ هم؛ قد از پهنای هر کارت */
  :root { --showcase-h: calc((100vw - 32px - 24px) / 3 * 0.8); }
  .home-ticker { margin: 0 0 12px; }
  .home-ticker .carousel-track { gap: 12px; border-radius: 0; }
  .home-ticker .carousel[data-count="1"] .carousel-track,
  .home-ticker .carousel[data-count="2"] .carousel-track { justify-content: center; }
  .home-ticker .carousel-item { flex: 0 0 calc((100% - 24px) / 3); border-radius: 12px; overflow: hidden; }
  .home-ticker .carousel-text { display: none; }
  .home-ticker .carousel[data-count="1"] .carousel-dots,
  .home-ticker .carousel[data-count="2"] .carousel-dots,
  .home-ticker .carousel[data-count="3"] .carousel-dots { display: none; }
  .home-ticker .carousel-cap { position: absolute; inset-inline: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 2px;
    padding: 6px 10px; border-radius: 10px; color: var(--text); background: color-mix(in srgb, var(--surface, #fff) 78%, transparent);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
  .home-ticker .carousel-cap strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .home-ticker .carousel-cap small { font-weight: 600; font-size: 12px; }
  .showcase-promo { border-radius: 12px; }

  /* دسته‌ها: کاشی‌های کوچک چندستونه */
  .home-below .cat-tiles { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  .home-below .cat-tile.photo { aspect-ratio: 3 / 1; }
  .home-below .cat-tile:hover { filter: brightness(1.08); }
}

/* ---------- کارتِ آگهیِ سایت (`siteCard`)، مثل سایت‌های آگهی ---------- */
.site-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.site-card { position: relative; display: flex; gap: 12px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: inherit; transition: box-shadow .15s ease, border-color .15s ease; }
.site-card:hover { border-color: color-mix(in srgb, var(--muted) 45%, transparent); box-shadow: 0 4px 14px rgba(0, 0, 0, .08); }
.site-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.site-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; }
.site-card-title { margin: 0; font-family: YekanBakh, sans-serif; font-weight: 500; font-size: 16px; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.site-card:hover .site-card-title { color: var(--primary); }
.site-card-bottom { display: flex; flex-direction: column; gap: 2px; }
.site-card-off { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.site-card-off .feed-off { font-size: 11px; padding: 1px 6px; }
.site-card-price { font-family: YekanBakh, sans-serif; font-weight: 500; font-size: 14px; }
.site-card-price span { font-weight: 400; font-size: 12px; }
.site-card-meta { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* بج‌های پایینِ کارت در یک ردیف؛ زیاد شدند با کشیدن افقی، نه ردیفِ دوم */
.site-card-tags { display: flex; flex-wrap: nowrap; gap: 4px; margin-top: 4px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.site-card-tags::-webkit-scrollbar { display: none; }
.site-card-tags > * { flex: none; white-space: nowrap; }
.site-card-tags .featured-badge { margin: 0; padding: 1px 7px; line-height: 1.6; border: 1px solid #E0A100; }
.site-tag { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; color: var(--muted); }
.site-tag.site-seller { padding-inline-start: 3px; color: var(--text); min-width: 0; max-width: 100%; flex: 0 1 auto; }
.site-tag.site-seller b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; padding-inline-end: 3px; }
.site-tag.site-seller img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex: none; }
.site-tag.site-seller.link:hover { border-color: var(--muted); }
.site-tag.wanted { border-color: #0b6fa4; color: #0b6fa4; }
.site-tag.flash { border-color: #B26A00; color: #B26A00; font-weight: 600; }
.site-tag.ad { border-color: var(--primary); color: var(--primary); }
.site-card-media { position: relative; flex: none; width: 140px; aspect-ratio: 5 / 4; align-self: flex-start; border-radius: 6px; overflow: hidden; background: color-mix(in srgb, var(--sunken), var(--text) 8%); }
.site-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; background: color-mix(in srgb, var(--sunken), var(--text) 8%) url(/placeholder.svg) center / 60px auto no-repeat; }
/* دسکتاپ و تبلت: عکس بی فاصله تا لبه‌های کادرِ کارت (بالا، پایین و چپ)؛ اندازه کارت همان قبل (۱۴۰ + فاصله ۱۲ = ۱۵۲، کمینه قد ۱۱۲ + ۲۴) */
@media (min-width: 768px) {
  .site-card { gap: 8px; }
  .site-card-media { width: 152px; aspect-ratio: auto; min-height: 136px; align-self: stretch; margin-block: -12px; margin-inline-end: -12px;
    border-radius: 0; border-start-end-radius: 7px; border-end-end-radius: 7px; }
  /* عکس قدِ کادر را تعیین نکند، فقط پرش کند */
  .site-card-media > img { position: absolute; inset: 0; }
}
.card-save.site-card-save { top: 4px; left: 4px; width: 30px; height: 30px; border-radius: 8px; }
.card-save.site-card-save::before { width: 20px; height: 20px; }
.photo-count.site-card-count { bottom: 4px; left: auto; right: 4px; padding: 1px 6px; border-radius: 6px; background: rgba(0, 0, 0, .55); font-size: 12px; gap: 3px; }
.site-card-count .photo-count-icon svg { width: 13px; height: 13px; }
@media (max-width: 767px) {
  .site-cards { grid-template-columns: 1fr; gap: 0; }
  .site-card { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 12px 0; }
  .site-card:hover { box-shadow: none; }
  .site-card-media { width: 128px; }
}
/* صفحه اصلی: شبکه کارت‌ها روی زمینه سفید */
.home-below .site-cards { padding-block: 8px 4px; }
.home-below .latest-heading, .home-below .latest-footer { background: none; }

/* ---------- ستونِ کناری (`siteSidebar`)، فقط ۱۰۲۴ به بالا ---------- */
.site-sidebar { display: none; }
@media (min-width: 1024px) {
  .view:has(> .with-sidebar) { max-width: none; }
  .with-sidebar { display: grid; grid-template-columns: 240px minmax(0, 1fr); column-gap: 24px; align-items: start; }
  .with-sidebar > * { grid-column: 2; min-width: 0; }
  .with-sidebar > .site-sidebar { grid-column: 1; grid-row: 1 / span 40; display: flex; flex-direction: column; gap: 4px;
    position: sticky; top: calc(var(--bar-height, 64px) + 16px); max-height: calc(100vh - var(--bar-height, 64px) - 32px); overflow-y: auto; padding-inline-end: 4px; scrollbar-width: thin; }
  /* نقشه تمام‌صفحه: بی ستون */
  .with-sidebar.home-full { display: block; }
  .home-full > .site-sidebar { display: none; }
  /* صفحه اصلی: دسته‌ها، نقشه و جستجو با عکس در ستون کناری و هدرند */
  .home-window .map-holder, .home-below > [data-part="cats"], .home-below > [data-part="identify"] { display: none; }
  .home-below [data-part].tinted { background: none; }
  /* صفحه دسته و جستجو: ورقه با گوشه گرد و تصویرِ بالا لازم نیست */
  .with-sidebar .feed-hero { display: none; }
  .with-sidebar .feed-sheet { margin: 0; padding: 0; min-height: 0; border-radius: 0; }
}
.side-title { margin: 16px 0 4px; font-size: 12px; font-weight: 400; color: color-mix(in srgb, var(--muted) 75%, transparent); }
.side-title:first-child { margin-top: 0; }
.side-link, .side-tree summary { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 6px; color: var(--text); font-size: 14px; cursor: pointer; }
.side-link:hover, .side-tree summary:hover { background: var(--sunken); }
.side-link.on { background: var(--primary-container); color: var(--on-primary-container); font-weight: 600; }
.side-tree summary { list-style: none; justify-content: space-between; }
.side-tree summary::-webkit-details-marker { display: none; }
.side-tree summary::after { content: ''; width: 7px; height: 7px; border-inline-start: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .15s ease; }
.side-tree details[open] > summary::after { transform: rotate(135deg); }
.side-tree summary.on { font-weight: 600; }
.side-sub { display: flex; flex-direction: column; padding-inline-start: 12px; margin-inline-start: 10px; border-inline-start: 1px solid var(--line); }
.side-sub .side-link { font-size: 13px; padding-block: 5px; }
.side-kinds { display: flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--sunken); }
.side-kinds button { flex: 1; padding: 6px 4px; border: 0; border-radius: 6px; background: none; color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.side-kinds button[aria-pressed="true"] { color: var(--primary); font-weight: 600; }
/* پسِ‌زمینه سفیدِ گزینه انتخاب‌شده جدا و لغزان (`siteSidebar`)؛ سه خانه هم‌پهنا با فاصله ۲ */
.side-kinds { position: relative; }
.side-kinds button { position: relative; z-index: 1; }
.side-kinds-thumb { position: absolute; top: 2px; bottom: 2px; width: calc((100% - 8px) / 3); inset-inline-start: calc(2px + var(--i, 0) * ((100% - 8px) / 3 + 2px));
  border-radius: 6px; background: var(--bg); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); transition: inset-inline-start .28s cubic-bezier(.2, 0, 0, 1); }
@media (prefers-reduced-motion: reduce) { .side-kinds-thumb { transition: none; } }
.side-shortcuts { display: flex; flex-direction: column; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.side-map .nav-icon { color: #0880EA; }
.side-flash .nav-icon { color: #B26A00; }
.did-you-mean { margin: 0 0 12px; font-size: 15px; }
.did-you-mean .link-button { font-size: 15px; font-weight: 600; }
.side-link:focus-visible, .side-tree summary:focus-visible, .side-kinds button:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* ---------- ردیفِ افقی با فلش (`rowArrows`)، فقط موس ---------- */
.row-scroller { position: relative; }
.row-arrow { display: none; }
@media (hover: hover) and (pointer: fine) {
  .row-arrow:not([hidden]) { position: absolute; top: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; margin-top: -19px;
    border: 1px solid var(--line); border-radius: 50%; background: var(--bg); box-shadow: 0 2px 8px rgba(0, 0, 0, .15); cursor: pointer; opacity: 0; transition: opacity .15s ease; }
  .row-scroller:hover .row-arrow, .row-arrow:focus-visible { opacity: 1; }
  .row-arrow.prev { right: -6px; }
  .row-arrow.next { left: -6px; }
  .row-arrow::before { content: ''; width: 9px; height: 9px; border-left: 2px solid var(--text); border-bottom: 2px solid var(--text); }
  .row-arrow.next::before { transform: translateX(2px) rotate(45deg); }
  .row-arrow.prev::before { transform: translateX(-2px) rotate(-135deg); }
}
/* فهرستِ بی‌انتها بعد از چند صفحه: دکمه */
.more-row { display: flex; justify-content: center; padding: 16px 0 8px; }
.more-row button { min-width: 220px; }
/* استان‌های پانویس */

/* ---------- صفحه جزئیات آگهی (`detailBody`)، مثل سایت‌های آگهی ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--primary); text-decoration: underline; }
.crumbs a + a::before { content: '›'; margin-inline-end: 6px; color: var(--muted); }
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.detail-info { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.detail-info h1.listing-title { margin: 0; font-size: 22px; line-height: 1.5; }
.detail-meta { font-size: 13px; }
.detail-info h2 { margin: 16px 0 6px; font-size: 16px; font-weight: 600; }
.detail-specs .spread { padding: 10px 0; border-bottom: 1px solid var(--line); gap: 16px; }
.detail-specs .spread > :last-child { text-align: end; }
.detail-desc p { margin: 0; white-space: pre-wrap; line-height: 1.9; }
.detail-price .price { font-size: 22px; font-weight: 700; margin: 0; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.detail-actions > button, .detail-actions > a { display: inline-flex; align-items: center; gap: 6px; }
.detail-actions > button:not(.primary):not(.icon-action) { background: var(--bg); color: var(--primary); border-color: var(--primary); }
.detail-actions a.button { padding: 10px 18px; border-radius: 4px; background: var(--primary); color: var(--on-primary, #fff); }
.icon-action { width: 44px; height: 44px; padding: 0; justify-content: center; background: var(--bg); color: var(--muted); border-color: var(--line); }
.icon-action:hover { color: var(--text); background: var(--sunken); }
.icon-action.on { color: var(--primary); }
.contact-box { padding: 12px; border: 1px solid var(--line); border-radius: 8px; display: flex; flex-direction: column; gap: 6px; }
.contact-box[hidden] { display: none; }
.contact-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.contact-phone { font-size: 20px; font-weight: 700; letter-spacing: 1px; color: var(--text); }
.seller-box { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; color: inherit; }
a.seller-box:hover { background: var(--sunken); }
.seller-box img, .seller-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--sunken); color: var(--muted); }
.detail-safety { padding-top: 12px; border-top: 1px solid var(--line); }
.detail-safety .safety-tips-button { margin: 0; }
.detail-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.detail-links .link-button { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.detail-noimage { display: none; }
.detail-thumbs, .gallery-arrow { display: none; }
.detail-map h2 { margin: 0 0 6px; font-size: 16px; font-weight: 600; }
.related-block { margin-top: 32px; }
.related-block .site-cards + h2 { margin-top: 28px; }
.related-block h2 { font-size: 18px; margin: 0 0 12px; }
.related-block .related-skeleton { height: 138px; border-radius: 8px; }
.photo-chip .nav-icon, .photo-bar-btn .nav-icon { color: #fff; }
.photo-top.plain .nav-icon { color: var(--text); }
/* موبایل و تبلت: قیمت و دکمه‌ها در نوارِ شناور؛ جا برای آن ته صفحه */
@media (max-width: 1023px) {
  .detail-page { padding-bottom: var(--float-pad, 96px); }
  .detail-info .detail-price, .detail-actions, .contact-box, .detail-status { display: none !important; }
  .detail-media { margin-inline: -16px; }
}
/* دسکتاپ: اطلاعات راست، گالری و نقشه چپ؛ نوارِ شناور نه */
@media (min-width: 1024px) {
  .view:has(> .detail-page) { max-width: var(--page-max); }
  .detail-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "info media" "info map"; grid-template-rows: auto 1fr; column-gap: 32px; row-gap: 16px; }
  .detail-info { grid-area: info; }
  .detail-media { grid-area: media; }
  .detail-side-map { grid-area: map; }
  .detail-page .float-card, .detail-page .photo-top { display: none; }
  .detail-media .photo-hero { border-radius: 8px; overflow: hidden; }
  .detail-noimage { display: flex; align-items: center; justify-content: center; aspect-ratio: 5 / 4; border-radius: 8px; background: var(--sunken); color: var(--muted); }
  .detail-thumbs { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; scrollbar-width: thin; }
  .detail-thumbs button { flex: 0 0 72px; height: 58px; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: var(--sunken); opacity: .7; }
  .detail-thumbs button.on { border-color: var(--primary); opacity: 1; }
  .detail-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .gallery-arrow { position: absolute; top: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-top: -20px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .85); box-shadow: 0 2px 8px rgba(0, 0, 0, .2); opacity: 0; transition: opacity .15s ease; }
  .photo-hero:hover .gallery-arrow, .gallery-arrow:focus-visible { opacity: 1; }
  .gallery-arrow.prev { right: 10px; }
  .gallery-arrow.next { left: 10px; }
  .gallery-arrow::before { content: ''; width: 9px; height: 9px; border-left: 2px solid #222; border-bottom: 2px solid #222; }
  .gallery-arrow.next::before { transform: translateX(2px) rotate(45deg); }
  .gallery-arrow.prev::before { transform: translateX(-2px) rotate(-135deg); }
  .detail-page .safety-tips-button { margin: 0; }
}

/* تا صفحه نیامده (پرده شروع، «وصل نیست»، یا لودینگِ بارِ اولِ صفحه) نوارِ اسکرولِ مرورگر نه؛ با آمدنِ محتوا پیدا می‌شود */
html:has(body > .offline-page), html:has(#view > .page-loader:only-child) { overflow: hidden; }
.finding-me.locate-me { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; padding: 6px 10px; border: 0; color: var(--text); cursor: pointer; }
.finding-me.locate-me .nav-icon { color: #0880EA; }

/* ---------- صفحه نقشه (`/map`)، مثل سایت‌های آگهی: نوارِ فیلتر، لیستِ کناری، دکمه‌های نقشه ---------- */
.map-area-search, .map-pill, .map-controls { display: none; }
.home-full .map-view-toggle { display: none !important; }
.map-filter-bar .nearby-mode { position: static; transform: none; inset: auto; box-shadow: none; flex: none; }
.map-filter-bar .nearby-mode button { height: 28px; padding: 0 14px; font-size: 13px; }
.map-filter-button { display: inline-flex; align-items: center; gap: 2px; }
.home-full .map-controls { position: absolute; left: 12px; bottom: 96px; z-index: 8; display: flex; flex-direction: column; overflow: hidden; border-radius: 8px; background: var(--bar, #fff); box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.map-controls button { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--text); }
.map-controls button + button { border-top: 1px solid var(--line); }
.map-controls button:hover { background: var(--sunken); }
.map-controls button:last-child .nav-icon { color: #0880EA; }
/* موبایل: «نمایش لیست / نمایش نقشه» پایین وسط */
.home-full .map-pill { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 9; display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border: 0; border-radius: 999px; background: var(--text); color: var(--bg); font-size: 14px; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.home-full .nearby-card { bottom: 80px; }
.map-list .site-card.hl, .map-list .card.hl { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 35%, transparent); }
.map-list-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; }
@media (min-width: 1024px) {
  .home-full .home-search { display: none !important; }
  .home-full .map-pill { display: none; }
  /* نوارِ فیلتر زیرِ هدر، تمام‌عرض */
  .home-full .map-chips { position: fixed; top: var(--bar-height, 64px); left: 0; right: 0; height: 56px; z-index: 31; display: flex; align-items: center; padding: 0 16px; background: var(--bar); border-bottom: 1px solid var(--line); }
  .home-full .map-filter-bar { flex: 1; height: 40px; margin: 0; padding: 0; gap: 12px; background: none; box-shadow: none; }
  .home-full .map-area-search { display: block; width: 260px; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); font: inherit; font-size: 14px; }
  /* نقشه چپ، لیست راست */
  .home-full .map-holder { inset: calc(var(--bar-height, 64px) + 56px) 420px 0 0; }
  .home-full .map-list { position: fixed; top: calc(var(--bar-height, 64px) + 56px); right: 0; bottom: 0; left: auto; width: 420px; padding: 12px !important; border-inline-end: 1px solid var(--line); }
  .home-full .map-list .site-cards { grid-template-columns: 1fr; }
  .home-full .map-controls { bottom: 24px; }
  .home-full .nearby-card { left: calc((100vw - 420px) / 2); bottom: 24px; }
}
@media (max-width: 1023px) {
  .home-full .home-search { position: fixed; top: var(--bar-height, 56px); left: 0; right: 0; z-index: 32; margin: 0; padding: 8px 16px; flex-wrap: nowrap; }
  .home-full .home-search input { flex: 1; min-width: 0; }
  .home-full .map-holder { top: calc(var(--bar-height, 56px) + var(--map-search-h, 56px)); }
}
/* نقشه تمام‌صفحه کلِ قاب را پر کند (`.map-tall` ۳۶۰ پیکسل بود و نیمه پایین خالی می‌ماند) */
.home-full .map-holder > .map { height: 100%; border-radius: 0; }

/* ---------- کارتِ موردِ انتخاب‌شده روی نقشه (`mapCard`) ---------- */
.map-card { position: relative; display: flex; gap: 10px; padding: 10px; border-radius: 10px; background: var(--bg); color: inherit; box-shadow: 0 6px 20px rgba(0, 0, 0, .2); text-align: start; }
.map-card:hover .site-card-title, .map-card:hover .business-name { color: var(--primary); }
.map-card-media { flex: none; width: 112px; aspect-ratio: 5 / 4; border-radius: 6px; overflow: hidden; background: var(--sunken); }
.map-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.map-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-inline-end: 22px; }
.map-card .site-card-title { font-size: 16px; }
.map-card-logo { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; background: var(--sunken); color: var(--muted); }
.map-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.map-card-go { color: var(--primary); font-size: 13px; font-weight: 600; }
.map-card-close { position: absolute; top: 6px; left: 6px; z-index: 1; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: var(--sunken); color: var(--muted); }
.map-card-close:hover { color: var(--text); }
.site-tag.approx { border-color: #f57c00; color: #c25e00; }
/* موبایل: کارتِ پایینِ صفحه، بالا آمدنِ ساده */
.nearby-card .map-card { width: 100%; }
.nearby-card.enter { animation: map-card-in .2s ease-out both; }
.nearby-card.leave { animation: map-card-out .16s ease-in both !important; animation-delay: 0s !important; }
@keyframes map-card-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes map-card-out { to { opacity: 0; transform: translate(-50%, 12px); } }
/* دسکتاپ: کارت چسبیده به پین (پاپ‌آپِ نقشه) */
.map-pop { z-index: 6; animation: map-pop-in .15s ease-out both; }
.map-pop.leave { animation: map-pop-out .15s ease-in both; }
.map-pop .maplibregl-popup-content { padding: 0; background: none; box-shadow: none; border-radius: 10px; }
.map-pop .map-card { width: 300px; }
.map-pop .maplibregl-popup-tip { border-top-color: var(--bg) !important; }
@keyframes map-pop-in { from { opacity: 0; margin-top: 6px; } to { opacity: 1; margin-top: 0; } }
@keyframes map-pop-out { to { opacity: 0; margin-top: 6px; } }
/* کادرِ پینِ کوچک‌شده (`pin-dim`) اندازه خودش را نگه دارد: اندازه ۲۳×۳۰ِ پین‌های ساده جای لنگرِ پایینش را عوض می‌کرد و کادر با هر موس بالا و پایین می‌پرید */
.callout-pin.pin-dim { width: auto !important; height: auto !important; }

/* ---------- «کاوش» مثل پینترست وب: ۲ تا ۵ ستون، گوشه گرد، نوشته با موس ---------- */
.explore-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 0 12px; padding-bottom: 2px; }
.explore-chips::-webkit-scrollbar { display: none; }
.explore-chips button { flex: none; padding: 6px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--text); font-size: 14px; }
.explore-chips button[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.explore-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.explore-page .feed-place-button { display: inline-flex; align-items: center; gap: 4px; }
.explore-page .feed-place-button .nav-icon { color: #0880EA; }
@media (min-width: 768px) {
  .view:has(> .explore-page) { max-width: var(--page-max); }
  .explore-page .home-search { display: none; }
  .explore-grid, .explore-col { gap: 12px; }
  .explore-tile, .explore-tile.skeleton { border-radius: 8px; }
  .explore-tile img { transition: opacity .45s cubic-bezier(0, 0, .2, 1), transform .3s ease; }
}
/* موس: نوشته و ذخیره با رفتنِ موس روی خانه، با سایه پایین */
@media (min-width: 768px) and (hover: hover) {
  .explore-tile::after { content: ''; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); opacity: 0; transition: opacity .2s ease; pointer-events: none; }
  .explore-tile .explore-caption, .explore-tile .explore-save { opacity: 0; transition: opacity .2s ease; z-index: 1; }
  .explore-tile:hover::after, .explore-tile:focus-visible::after,
  .explore-tile:hover .explore-caption, .explore-tile:focus-visible .explore-caption,
  .explore-tile:hover .explore-save, .explore-tile:focus-visible .explore-save, .explore-tile .explore-save.on { opacity: 1; }
  .explore-tile:hover img { transform: scale(1.04); }
  .explore-tile .explore-caption { bottom: 10px; right: 10px; max-width: calc(100% - 20px); }
  .explore-tile .explore-caption > div { background: none; padding: 0; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
  .explore-tile:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
}
.help-steps { margin: 8px 0 12px; padding-inline-start: 22px; display: flex; flex-direction: column; gap: 6px; line-height: 1.8; }
.explore-footer { display: flex; justify-content: center; padding: 20px 0 8px; }
.explore-footer .all-seen { margin: 0; }

/* ---------- پیشنهادهای جستجو (`searchSuggest`) ---------- */
.nav-search { position: relative; }
.suggest-holder { position: relative; flex: 1; min-width: 0; display: flex; }
.suggest-holder > input { flex: 1; min-width: 0; }
.suggest { position: absolute; top: calc(100% + 6px); inset-inline: 0; z-index: 45; max-height: 420px; overflow-y: auto; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); box-shadow: 0 8px 24px rgba(0, 0, 0, .14); }
.suggest[hidden] { display: none; }
.suggest-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px 4px; font-size: 12px; color: var(--muted); }
.suggest-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border-radius: 6px; cursor: pointer; color: var(--text); font-size: 14px; }
.suggest-row .nav-icon { color: var(--muted); flex: none; margin-top: 2px; }
.suggest-row:hover, .suggest-row.on { background: var(--sunken); }
.suggest-text { flex: 1; min-width: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.6; }
.suggest-remove { display: inline-flex; padding: 2px; border: 0; background: none; color: var(--muted); }
.suggest-remove:hover { color: var(--text); }
.nav-search-clear { display: inline-flex; padding: 4px; border: 0; background: none; color: var(--muted); }
.nav-search-clear[hidden] { display: none; }
.nav-search input::-webkit-search-cancel-button { display: none; }
/* صفحه جستجو در دسکتاپ: کادرِ دومِ بالای نتیجه‌ها نه؛ کادرِ هدر همان را می‌راند */
@media (min-width: 768px) {
  .with-sidebar .feed-head > .row:first-child .suggest-holder { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
}

/* ---------- ورود: کارتِ وسطِ صفحه و پنجره دسکتاپ (`loginForm`) ---------- */
.login-title { margin: 0 0 4px; font-size: 20px; text-align: center; }
.login-form input[type="tel"] { font-size: 18px; letter-spacing: 1px; }
.login-page .login-form { max-width: 440px; margin: 24px auto; }
.login-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .45); animation: fade-in .15s ease; }
.login-modal-card { position: relative; width: min(440px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; border-radius: 12px; background: var(--bg); box-shadow: 0 12px 40px rgba(0, 0, 0, .3); }
.login-modal-card .login-form { margin: 0; border: 0; box-shadow: none; padding: 24px; }
.login-modal-close { position: absolute; top: 10px; left: 10px; z-index: 1; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--sunken); color: var(--text); }

/* «درباره جاگل» — نوارِ معرفی و کارت‌ها؛ دسکتاپ دو ستون */
.about-page { display: grid; gap: 16px; }
.about-hero { display: grid; gap: 16px; align-items: center; background: var(--primary-container); color: var(--on-primary-container, inherit); border-radius: 12px; padding: 24px; }
.about-hero h1 { margin: 0 0 6px; }
.about-hero p { margin: 0 0 14px; font-size: 17px; }
.about-banner { width: 100%; height: auto; display: block; border-radius: 8px; }
.about-grid { display: grid; gap: 16px; }
.about-card { display: grid; gap: 10px; justify-items: start; align-content: start; margin: 0; }
.about-card h2 { margin: 0; font-size: 17px; }
.about-card p { margin: 0; line-height: 1.9; }
.about-steps { margin: 0; padding-inline-start: 20px; display: grid; gap: 10px; }
.about-steps li { display: grid; gap: 2px; }
.about-groups { display: flex; flex-wrap: wrap; gap: 8px; }
.about-groups .chip { text-decoration: none; }
.about-links { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; padding: 8px 0; }
@media (min-width: 768px) {
  .about-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); padding: 32px; }
  .about-hero:not(:has(.about-banner)) { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr 1fr; }
  .about-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* «قوانین جاگل»: شبکه سندها؛ صفحه سند با ستونِ کناریِ چسبان (دسکتاپ) و چیپ و فهرستِ جمع‌شونده (موبایل) */
.rules-grid { display: grid; gap: 12px; }
.rules-card { display: grid; gap: 6px; align-content: start; color: inherit; text-decoration: none; margin: 0; }
.rules-card:hover { border-color: var(--primary); }
.rules-layout { display: grid; gap: 16px; align-items: start; }
.rules-article { min-width: 0; display: grid; gap: 12px; }
.rules-article .crumbs { margin: 0; }
.rules-article .terms { margin: 0; scroll-margin-top: 88px; }
.rules-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 4px; scrollbar-width: none; }
.rules-chips .chip { white-space: nowrap; text-decoration: none; }
.rules-chips .chip.on { background: var(--primary); color: var(--on-primary); border-color: transparent; }
.rules-toc-mobile summary { cursor: pointer; color: var(--primary); padding: 4px 0; }
.rules-toc-mobile nav { display: grid; gap: 2px; padding: 6px 0; }
.rules-toc-mobile a, .rules-side-toc a { color: inherit; text-decoration: none; padding: 6px 10px; border-radius: 4px; }
.rules-side { display: none; }
@media (min-width: 768px) {
  .rules-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .rules-chips, .rules-toc-mobile { display: none; }
  .rules-layout { grid-template-columns: minmax(0, 1fr) 240px; }
  .rules-side { display: grid; gap: 16px; position: sticky; top: 88px; max-height: calc(100vh - 104px); overflow-y: auto; }
  .rules-side-docs, .rules-side-toc { display: grid; gap: 2px; }
  .rules-side-toc { border-top: 1px solid var(--line); padding-top: 12px; }
  .rules-side-toc a { font-size: 14px; color: var(--muted); border-inline-start: 2px solid transparent; border-radius: 0; }
  .rules-side-toc a.on { color: var(--primary); border-inline-start-color: var(--primary); }
}
@media print {
  .rules-article, .rules-article * { visibility: visible !important; }
  .rules-article { position: absolute; inset: 0 0 auto 0; background: #fff !important; color: #000 !important; }
  .rules-print, .rules-toc-mobile, .rules-article .crumbs { display: none !important; }
  .rules-article .terms { break-inside: avoid; border: 0; padding: 0; }
}

/* «تبلیغات»: کارتِ هر خدمت، مدت‌ها کنارِ هم */
.ad-prices-head h1 { margin: 0 0 4px; }
.ad-prices-head p { margin: 0 0 12px; }
.ad-grid { display: grid; gap: 16px; margin-bottom: 12px; }
.ad-card { display: grid; gap: 12px; align-content: start; margin: 0; }
.ad-card h2 { margin: 0; font-size: 17px; }
.ad-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; }
.ad-tier { display: grid; gap: 4px; justify-items: center; text-align: center; border: 1px solid var(--line); border-radius: 8px; padding: 12px 8px; }
.ad-single { display: grid; gap: 4px; }
.ad-price { font-size: 18px; }
.ad-card-action { justify-self: start; }
.empty-state { display: grid; gap: 12px; justify-items: center; text-align: center; }
@media (min-width: 768px) {
  .ad-grid { grid-template-columns: 1fr 1fr; }
  .ad-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* «تبلیغات» — صفحه فروش: نوارِ معرفی، عددها، تبِ جایگاه‌ها، گام‌ها، پرسش‌ها، مشاوره */
.ad-page { display: grid; gap: 24px; }
.ad-hero { background: var(--primary-container); color: var(--on-primary-container, inherit); border-radius: 12px; padding: 28px 24px; display: grid; gap: 12px; justify-items: start; }
.ad-hero h1 { margin: 0; font-size: 26px; }
.ad-hero p { margin: 0; max-width: 560px; line-height: 1.9; }
.ad-section { display: grid; gap: 12px; scroll-margin-top: 88px; }
.ad-section > h2 { margin: 0; font-size: 19px; }
.ad-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.ad-stat { display: grid; gap: 4px; text-align: center; padding: 16px 8px; border-radius: 12px; background: var(--surface, #fff); border: 1px solid var(--line); }
.ad-stat strong { font-size: 24px; color: var(--primary); }
.ad-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.ad-tabs button { white-space: nowrap; border-radius: 4px; }
.ad-tabs button[aria-selected="true"] { background: var(--primary); color: var(--on-primary); border-color: transparent; }
.ad-place { display: grid; gap: 16px; align-items: center; }
.ad-place-text { display: grid; gap: 12px; justify-items: start; }
.ad-place-text h3 { margin: 0; font-size: 17px; }
.ad-points { margin: 0; padding-inline-start: 20px; display: grid; gap: 6px; }
.ad-place-image { width: 100%; height: auto; border-radius: 8px; display: block; }
.ad-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: step; }
.ad-steps li { display: grid; gap: 4px; margin: 0; counter-increment: step; }
.ad-steps li strong::before { content: counter(step, persian) ". "; color: var(--primary); }
.ad-faq { display: grid; gap: 0; margin: 0; }
.ad-faq details { border-top: 1px solid var(--line); padding: 10px 0; }
.ad-faq details:first-child { border-top: 0; }
.ad-faq summary { cursor: pointer; font-weight: 500; }
.ad-faq p { margin: 8px 0 0; line-height: 1.9; }
.ad-section > p.small { margin: 0; }
.ad-consult { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 0; }
.ad-consult h2 { margin: 0 0 4px; font-size: 17px; }
.ad-consult p { margin: 0; }
@media (min-width: 768px) {
  .ad-hero { padding: 40px 32px; }
  .ad-hero h1 { font-size: 30px; }
  .ad-place:has(.phone-frame) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ad-steps { grid-template-columns: repeat(3, 1fr); }
}

/* «تبلیغات» — بالای صفحه: شکلِ سبز با لبه نرم، برگ‌های تاب‌خور (فقط وقتی دیده می‌شود)، تصویرهای تزئینیِ دو طرف */
.ad-hero { position: relative; overflow: hidden; isolation: isolate; border-radius: 12px 12px 48% 48% / 12px 12px 36px 36px; padding-bottom: 44px; }
.ad-hero-text { position: relative; z-index: 2; display: grid; gap: 12px; justify-items: start; }
.ad-leaves { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ad-leaf { position: absolute; top: -40px; inset-inline-start: var(--x); width: var(--s); height: var(--s); opacity: .55;
  animation: ad-leaf-fall var(--t) linear var(--d) infinite; animation-play-state: paused; }
.ad-leaf i { display: block; width: 100%; height: 100%; animation: ad-leaf-sway calc(var(--t) / 4) ease-in-out var(--d) infinite alternate; animation-play-state: paused;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2343a047' d='M20 3C10 3 4 8 4 16c0 1.6.4 3 1 4l1-1c3-6 7-9 11-10-4 2-8 6-10 12 8 0 13-6 13-18z'/%3E%3C/svg%3E"); }
.ad-leaf[style*="--tone:1"] i { filter: hue-rotate(-25deg) brightness(1.15); }
.ad-leaf[style*="--tone:2"] i { filter: brightness(.8); }
.ad-hero.in-view .ad-leaf, .ad-hero.in-view .ad-leaf i { animation-play-state: running; }
@keyframes ad-leaf-fall { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 10% { opacity: .55; } 85% { opacity: .5; } 100% { transform: translate3d(-30px, 460px, 0); opacity: 0; } }
@keyframes ad-leaf-sway { from { transform: translateX(-10px) rotate(-25deg); } to { transform: translateX(10px) rotate(30deg); } }
.ad-hero-art { position: absolute; bottom: 12px; z-index: 1; width: 22%; max-width: 220px; height: auto; pointer-events: none; }
.ad-hero-art.start { inset-inline-start: 12px; }
.ad-hero-art.end { inset-inline-end: 12px; }
/* «کاهش حرکت» یا بی IntersectionObserver: برگ‌ها ثابت و پراکنده سرِ جایشان */
@media (prefers-reduced-motion: reduce) {
  .ad-leaf, .ad-leaf i { animation: none !important; }
  .ad-leaf { top: calc(var(--x) * .6 + 8%); }
}
@media (max-width: 767px) { .ad-hero-art { display: none; } }
@media (min-width: 768px) {
  .ad-hero:has(.ad-hero-art) .ad-hero-text { justify-items: center; text-align: center; padding-inline: 22%; }
}
/* آیکونِ کنارِ نامِ تبِ جایگاه و محوِ تبِ تازه */
.ad-tabs button { display: inline-flex; align-items: center; gap: 6px; }
.ad-tab-icon { width: 18px; height: 18px; fill: currentColor; flex: none; }
.ad-fade { animation: ad-fade 260ms ease-out; }
@keyframes ad-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ad-fade { animation: none; } }
/* قابِ گوشی دورِ اسکرین‌شاتِ هر جایگاه */
.phone-frame { position: relative; justify-self: center; width: min(260px, 100%); padding: 10px; border-radius: 34px; background: #1d1f1e;
  box-shadow: 0 12px 32px rgba(0,0,0,.18), inset 0 0 0 2px #3a3d3b; }
.phone-frame::before { content: ''; position: absolute; top: 18px; left: 50%; width: 56px; height: 14px; border-radius: 8px; background: #1d1f1e; transform: translateX(-50%); z-index: 1; }
.phone-screen { display: block; width: 100%; aspect-ratio: 9 / 19.5; object-fit: cover; object-position: top; border-radius: 25px; background: var(--surface, #fff); }

/* «دعوت از دوستان» */
.invite-code-card { display: grid; gap: 8px; justify-items: start; }
.invite-code { font-size: 28px; font-weight: 700; letter-spacing: 4px; color: var(--primary); }
.invite-link { color: var(--muted); word-break: break-all; }
.invite-wallet { display: grid; gap: 10px; }
.invite-balance { font-size: 28px; font-weight: 700; color: var(--primary); }
.invite-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.invite-figures > div { display: grid; gap: 2px; padding: 10px; border-radius: 8px; background: var(--settings-bg, rgba(0,0,0,.03)); }
.invite-month { padding: 8px 0; border-top: 1px solid var(--line); }
.invite-month:first-of-type { border-top: 0; }
.looks-disabled { opacity: .5; }
.payout-row { display: grid; gap: 4px; padding: 10px 0; border-top: 1px solid var(--line); }
.payout-row:first-child { border-top: 0; }
.payout-receipt { width: 100%; border-radius: 8px; }
.iban-input, .invite-input { width: 100%; font-size: 16px; letter-spacing: 1px; }
.invite-field { display: grid; gap: 4px; }
.link-button { background: none; border: 0; color: var(--primary); padding: 0; cursor: pointer; justify-self: start; }
/* پنل «دعوت از دوستان» */
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.admin-row { display: grid; gap: 6px; padding: 12px 0; border-top: 1px solid var(--line); }
.admin-row:first-of-type { border-top: 0; }

/* «ویژه» بعد از زمان، با کادرِ خط‌دار مثلِ نامِ فروشنده — مثل اپ */
.featured-badge { border: 1px solid var(--muted); padding: 0 7px; }

/* صفحه فهرست (دسته، استان، جستجو): مسیر، عنوان، معرفی، شمار و ترتیب؛ دسکتاپ فیلترها در ستونِ کناری */
.list-page { display: flex; flex-direction: column; gap: 12px; }
/* دسکتاپ: ستونِ کناری (`withSidebar`) شبکه است؛ `display:flex` بالا آن را زیرِ دسته‌ها می‌برد */
@media (min-width: 1024px) {
  /* بی row-gap: ستون ۴۰ ردیف را می‌گیرد و فاصله ردیف‌های خالی تهِ صفحه جای خالی می‌ساخت */
  .list-page.with-sidebar { display: grid; row-gap: 0; align-content: start; }
  .list-page.with-sidebar > :not(.site-sidebar) ~ :not(.site-sidebar) { margin-top: 12px; }
}
.list-head { display: flex; flex-direction: column; gap: 8px; }
.list-head .crumbs { margin: 0; }
.list-title { margin: 0; font-size: 22px; line-height: 1.5; }
.list-intro p { margin: 0 0 6px; color: var(--muted); line-height: 1.9; max-width: 760px; }
.list-intro:empty { display: none; }
.list-search-row { display: flex; gap: 8px; align-items: center; }
.list-search-row .feed-search { flex: 1; min-width: 0; }
.list-place { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; border: 0; background: none; color: var(--muted); padding: 6px 4px; font: inherit; cursor: pointer; }
.list-place .nav-icon { color: #0880EA; }
.list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; }
.list-count { color: var(--muted); font-size: 14px; font-weight: 500; }
.list-filters .filter-bar { margin: 0; }
.list-filters:empty { display: none; }
/* تب‌های صفحه فهرست (همه / فروش / نیازمندی…) — مثل اپ؛ خطِ زیرِ تبِ فعال نرم می‌لغزد */
.list-tabs { position: relative; display: flex; border-bottom: 1px solid var(--line); margin-top: 8px; }
.list-tabs:empty { display: none; }
.list-tabs button { flex: 1; border: 0; background: none; font: inherit; color: var(--muted); padding: 8px 4px; cursor: pointer; transition: color .2s ease; }
.list-tabs button:hover { color: var(--text); }
.list-tabs button[aria-selected="true"] { color: var(--primary); font-weight: 600; }
.list-tabs-line { position: absolute; bottom: -1px; inset-inline-start: 0; width: calc(100% / var(--n)); height: 3px; border-radius: 3px 3px 0 0; background: var(--primary); transform: translateX(calc(var(--i) * -100%)); transition: transform .25s ease; }
.save-search-button { display: inline-flex; align-items: center; gap: 6px; }
.list-results { transition: opacity .15s ease; }
.list-results.is-loading { opacity: .5; pointer-events: none; }
.card-skeleton { pointer-events: none; }
.card-skeleton .site-card-media { height: 112px; }
.side-filters { display: flex; flex-direction: column; gap: 4px; }
.side-filters:empty { display: none; }
.side-filters .filters-body { display: flex; flex-direction: column; gap: 14px; padding: 4px 2px; max-height: none; overflow: visible; }
/* هر فیلتر جدا: خطِ روشن بینشان و نامِ فیلتر مثلِ سرتیتر */
.side-filters .filters-body > div ~ div { border-top: 1px solid color-mix(in srgb, var(--line), #000 8%); padding-top: 14px; }
.side-filters .filter-label { font-size: 14px; font-weight: 500; color: var(--text); margin-bottom: 8px; }
.side-filters .chip { font-size: 13px; padding: 4px 10px; }
.side-filters .range-row input { min-width: 0; }
/* شروعِ جستجو */
.search-start h1 { margin: 0; font-size: 22px; }
.search-start section h2 { margin: 8px 0; font-size: 16px; font-weight: 500; }
.start-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.start-group { display: grid; gap: 4px; margin: 0; color: inherit; text-decoration: none; }
.start-group:hover { border-color: var(--primary); }
/* موبایل: کادرِ جستجوی صفحه؛ از ۷۶۸ کادرِ هدر هست */
@media (min-width: 768px) {
  .list-page .feed-search, .search-start .feed-search { display: none; }
}
/* دسکتاپ: ترتیب و فیلترها در ستون؛ چیپ‌های «فیلترها» و «ترتیب» و دکمه جا نه */
@media (min-width: 1024px) {
  .list-page .filter-bar .filters-chip, .list-page .filter-bar .sort-chip { display: none; }
  .list-page .list-search-row { display: none; }
}

/* ثبت آگهی: دسکتاپ فرم و ستونِ چسبان (پیش‌نمایشِ کارت، بخش‌ها با تیک، دکمه‌ها)؛ موبایل دکمه‌ها نوارِ شناورِ پایین */
.post-form .post-main { min-width: 0; }
.post-side { display: contents; }
.post-side-card, .post-side-steps { display: none; }
.post-side-actions > :not(.post-actions) { display: none; }
.post-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.post-actions .form-bar { flex-basis: 100%; margin: 0; border: 0; }
@media (max-width: 1023px) {
  .post-side-actions { position: fixed; inset-inline: 0; bottom: 0; z-index: 20; margin: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)) !important;
    background: color-mix(in srgb, var(--settings-bg) 82%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 0 !important; border-radius: 0; }
  .post-actions > button { flex: 1; }
  /* تهِ فرم به قدِ نوار جا */
  .post-form .post-main { padding-bottom: 76px; }
}
.drop-on { outline: 2px dashed var(--primary); outline-offset: 4px; border-radius: 8px; }
@media (min-width: 1024px) {
  .view:has(> .post-form) { max-width: 1120px; }
  .post-form { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
  .post-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--bar-height, 64px) + 16px); max-height: calc(100vh - var(--bar-height, 64px) - 32px); overflow-y: auto; }
  .post-side .panel { margin: 0; padding: 16px !important; background: var(--bar, #fff) !important; border: 1px solid var(--line) !important; border-radius: 8px !important; }
  .post-side .panel + .panel { border-top: 1px solid var(--line) !important; }
  .post-side-card, .post-side-steps { display: flex; flex-direction: column; gap: 10px; }
  .post-side-actions { display: flex; flex-direction: column; gap: 10px; }
  .post-side-actions > :not(.post-actions) { display: revert; }
  .post-side-actions .post-actions > button { flex: 1; }
  .post-preview-inline { display: none; }
  .post-card-preview .site-card { pointer-events: none; }
  .post-card-preview .site-card-media.empty::after { content: 'عکس'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 13px; }
  .post-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .post-checklist button { width: 100%; display: flex; align-items: center; gap: 8px; padding: 7px 4px; border: 0; background: none; font: inherit; color: var(--text); text-align: start; cursor: pointer; border-radius: 6px; }
  .post-checklist button:hover { background: var(--sunken); }
  .post-checklist li button::before { content: ''; width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2px solid var(--line); box-sizing: border-box; }
  .post-checklist li.done button::before { border: 0; background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 14px no-repeat; }
  .post-checklist li.todo button::before { border-color: var(--error); }
  .post-checklist li.todo button { color: var(--error); }
}

/* بخشِ حساب (مثلِ «دیوار من»): دسکتاپ ستونِ منوی حساب کنارِ همه صفحه‌های حساب */
.account-nav { display: none; }
@media (min-width: 1024px) {
  .view:has(> .account-layout) { max-width: var(--page-max); }
  .account-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: start; }
  .account-main { min-width: 0; }
  .account-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: calc(var(--bar-height, 64px) + 16px); background: none; padding: 8px; border-radius: 8px;
    max-height: calc(100vh - var(--bar-height, 64px) - 32px); overflow-y: auto; scrollbar-width: thin; }
  .account-nav-head { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 12px; }
  /* صفحه‌های حسابِ داخلِ ستون: حاشیه منفیِ `.settings-page` بیرون نزند */
  .account-main > .settings-page { margin: 0; border-radius: 8px; }
}

/* گفتگوها در دسکتاپ: فهرست کنارِ گفتگوی باز */
@media (min-width: 1024px) {
  .view:has(> .chat-split) { max-width: var(--page-max); }
  .chat-split { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 20px; align-items: start; }
  .chat-split-list { position: sticky; top: calc(var(--bar-height, 64px) + 16px); max-height: calc(100vh - var(--bar-height, 64px) - 32px); overflow-y: auto; scrollbar-width: thin; padding-inline-end: 4px; }
  .chat-split-list h1 { font-size: 20px; margin: 0 0 8px; }
  .chat-split-list .chat-row.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary-container) 45%, var(--bar)); }
  .chat-split-main { min-width: 0; }
  .chat-empty { min-height: 320px; align-content: center; }
}

/* صفحه کسب‌وکار در دسکتاپ: سربرگ، بعد معرفی در ستونِ چسبان کنارِ تب‌ها */
@media (min-width: 1024px) {
  .view:has(> .shop-wide) { max-width: var(--page-max); }
  .shop-columns { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 12px; }
  .shop-aside { position: sticky; top: calc(var(--bar-height, 64px) + 16px); max-height: calc(100vh - var(--bar-height, 64px) - 32px); overflow-y: auto; scrollbar-width: thin; }
  .shop-aside > .panel { margin: 0; }
  .shop-main { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
  .shop-wide .shop-tabs { position: static; }
}

/* آگهی‌های من: دسکتاپ هر آگهی یک ردیف با کارهای اصلی */
.mine-head .button { display: inline-flex; align-items: center; gap: 4px; }
.mine-lines { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; background: var(--bar, #fff); overflow: hidden; }
.mine-line { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); }
.mine-line:first-child { border-top: 0; }
.mine-line:hover { background: var(--sunken); }
.mine-line-thumb img { width: 96px; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 6px; display: block; background: var(--sunken); }
.mine-line-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mine-line-title { color: inherit; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mine-line-title:hover { color: var(--primary); }
.mine-line-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.mine-line-actions { display: flex; gap: 8px; }

/* مدیریت آگهی: دسکتاپ دو ستون */
.manage-page .crumbs { margin: 0; }
@media (min-width: 1024px) {
  .manage-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
  .manage-layout > .manage-side { grid-column: 2; grid-row: 1 / span 3; position: sticky; top: calc(var(--bar-height, 64px) + 16px); display: flex; flex-direction: column; gap: 12px; }
  .manage-layout > :not(.manage-side) { grid-column: 1; min-width: 0; }
  .manage-layout .manage-table { margin-top: 0; }
}

/* اعلان‌ها: فهرستِ فشرده، گروه‌بندیِ روز */
.notice-filter { margin-bottom: 4px; }
.notice-group { padding: 0 !important; overflow: hidden; }
.notice-item { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 16px; border-top: 1px solid var(--line); cursor: pointer; }
.notice-item:first-child { border-top: 0; }
.notice-item:hover, .notice-item:focus-visible { background: var(--sunken); outline: none; }
.notice-item-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 8px; }
.notice-item.unread .notice-item-dot { background: var(--primary); }
.notice-item.unread .notice-item-head strong { font-weight: 700; }
.notice-item:not(.unread) .notice-item-head strong { font-weight: 400; }
.notice-item-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.notice-times { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; }
.notice-times > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.notice-times .nav-icon { display: inline-flex; }
.notice-item-text p { margin: 4px 0 0; color: var(--muted); line-height: 1.8; }
.notice-item-remove { padding: 4px 8px; font-size: 13px; }
@media (hover: hover) and (pointer: fine) {
  .notice-item-remove { opacity: 0; transition: opacity .15s ease; }
  .notice-item:hover .notice-item-remove, .notice-item:focus-within .notice-item-remove { opacity: 1; }
}

/* پشتیبانی: جستجوی بزرگ، موضوع‌ها کنارِ درخواست‌ها و «پیام به پشتیبانی» */
.support-hero { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 12px; background: var(--primary-container); color: var(--on-primary-container, inherit); margin-bottom: 12px; }
.support-hero h1 { margin: 0; font-size: 22px; }
.support-hero .support-search { height: 48px; font-size: 16px; background: var(--bar, #fff); }
.support-contact { display: flex; flex-direction: column; gap: 8px; }
.support-contact h3 { margin: 0; }
@media (min-width: 1024px) {
  .support-page .support-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
}

/* جای خالیِ ویترین: موبایل کادرِ تمام‌عرض با عکسِ محو؛ دسکتاپ هم‌شکلِ ردیفِ سه‌تایی — عکس یک خانه، دعوت دو خانه */
.showcase-promo-shot, .showcase-promo-more { display: none; }
@media (min-width: 768px) {
  .home-ticker .showcase-promo { display: grid; grid-template-columns: calc((100% - 24px) / 3) 1fr; gap: 12px; background: var(--primary-container); color: var(--on-primary-container, var(--text)); }
  .home-ticker .showcase-promo > .showcase-promo-bg { display: none; }
  .home-ticker .showcase-promo-shot { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
  .home-ticker .showcase-promo-card { align-items: flex-start; text-align: start; background: none; box-shadow: none; padding: 16px 24px; gap: 8px; }
  .home-ticker .showcase-promo strong { font-size: 24px; }
  .home-ticker .showcase-promo-more { display: block; color: var(--muted); font-weight: 400 !important; }
}
@media (min-width: 768px) {
  /* جای خالی: قدِ ردیف از عکسِ ۵ به ۴، نه قدِ ثابت */
  .home-ticker .showcase-promo { height: auto !important; }
  .home-ticker .showcase-promo-shot { height: auto; aspect-ratio: 5 / 4; }
}
@media (min-width: 1024px) {
  /* ستونِ کناریِ دسته‌ها (۲۴۰ + ۲۴ فاصله) هم از پهنا کم می‌شود تا هر کارتِ ویترین درست ۵ به ۴ باشد */
  :root { --showcase-h: calc((100vw - 32px - 264px - 24px) / 3 * 0.8); }
}

/* جابه‌جایی بینِ صفحه‌های ستون‌دار: صفحه فعلی کم‌رنگ تا صفحه تازه برسد، نه لودینگ */
#view.view-busy > * { opacity: .55; pointer-events: none; transition: opacity .15s ease; }

/* دسکتاپ: ورقه‌ها پنجره وسطِ صفحه‌اند (سایت)، نه باتم‌شیتِ چسبیده به پایین؛ موبایل همان باتم‌شیت */
@media (min-width: 768px) {
  .map-sheet-backdrop { align-items: center; }
  .map-sheet { border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, .25); }
  .map-sheet:not(:has(.sheet-close-out)) { max-height: 88vh; overflow-y: auto; }
}

/* جای آگهی در کارت‌ها با آیکونِ مکان */
.site-card-meta { display: flex; align-items: center; gap: 10px; }
.card-place { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-inline-end: 4px; }

/* پینِ آبیِ جا به‌تنهایی (دکمه‌های انتخابِ شهر) */
.pin-mark { display: inline-flex; flex: none; line-height: 0; }
.pin-mark::before { margin: 0 !important; }

/* «حساب من»: کارتِ حساب، احراز هویت با دکمه، خلاصه */
.profile-card { display: flex; align-items: center; gap: 14px; }
.profile-card-photo { width: 72px; height: 72px; flex: none; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: var(--sunken); color: var(--muted); border: 1px solid var(--line); }
.profile-card-photo img { width: 100%; height: 100%; object-fit: cover; }
.profile-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.profile-card-text strong { font-size: 18px; }
.photo-empty { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.verify-panel { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.verify-panel .button { margin-top: 6px; }
.verify-phone { display: flex; gap: 12px; align-items: center; }
/* نام و شماره بالای منوی حساب = دکمه «اطلاعات کاربری» با بجِ وضعیت */
/* مورد انتخاب‌شده منوی حساب با کادر تیره (سایه داخلی تا جابه‌جا نشود) */
.account-nav .side-link.on { box-shadow: inset 0 0 0 1px var(--text); }
/* منوی حساب درشت‌تر از ستونِ دسته‌ها */
.account-nav .side-link { font-size: 16px; }
.account-nav .identity-badge { font-size: 13px; }
.account-nav-actions { display: flex; flex-direction: column; gap: 2px; }
/* بینِ هر مورد منوی حساب خطِ جداکننده؛ زیرِ «خروج از حساب» خط نه */
.account-nav-actions { gap: 0; }
.account-nav-actions > .side-link { border-top: 1px solid var(--line); border-radius: 0; }
.account-nav-actions > .side-link:first-child { border-top: 0; }
/* ردیفِ منوی حساب مثلِ `LinkRow` اپ: آیکونِ خاکستری، عنوان و توضیحِ ریز، شورونِ «‹» سمتِ چپ */
.account-nav-head .side-link.account-row { position: relative; gap: 12px; padding: 10px 8px 10px 28px; }
.account-row > .nav-icon { flex: none; display: inline-flex; color: var(--muted); }
.account-row-text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.account-row-text b, .account-row-text .account-identity-title { font-size: 14px; font-weight: 500; }
.account-row-text small { font-size: 12px; color: var(--muted); }
.account-row:not(.account-logout)::after { content: ''; position: absolute; left: 10px; top: 50%; width: 7px; height: 7px; border-left: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-50%) rotate(45deg); }
.account-logout { border: 0; border-top: 1px solid var(--line); background: none; font: inherit; width: 100%; text-align: start; color: var(--error) !important; }
.account-logout > .nav-icon { color: var(--error); }

/* صفحه حساب با ستونِ راهنما (احراز هویت، تغییر شماره) */
.help-layout { display: flex; flex-direction: column; gap: 12px; }
.help-main { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.help-main > .panel { margin: 0; }
.side-help { margin: 0; }
.side-help h3 { margin: 0 0 8px; }
.side-help .dot-list { margin: 0 0 8px; }
@media (min-width: 1024px) {
  .help-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
  .side-help { position: sticky; top: calc(var(--bar-height, 64px) + 16px); }
}

/* احراز هویت در منوی حساب: بجِ وضعیت زیرِ نام — رنگ‌های اپ */
.identity-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 4px; color: #fff; }
.identity-badge.verified { background: var(--published-bg); color: var(--published); }
.identity-badge.pending { background: #F57C00; }
.identity-badge.rejected { background: #D32F2F; }
.identity-badge.none { background: #9E2236; }
.account-identity-title { display: inline-flex; align-items: center; gap: 4px; }
/* وضعیتِ «اطلاعات کاربری» (در انتظار، رد، اصلاح، ناقص): کادرِ جگری با متنِ سفید، مثلِ اپ */
.account-status-pill { background: #9e2236; color: #fff; font-size: 11px; font-weight: 500; line-height: 1.6; padding: 0 6px; border-radius: 4px; white-space: nowrap; margin-inline-start: 4px; }

/* ورقه‌ها مثلِ اپ (`AppSheet`): پرده محو، ورقه نرم بالا می‌آید (۳۸۰، FastOutSlowIn) و بعد ضربدرِ نارنجی با کمی جهش بالا می‌آید؛
   بستن: ضربدر پایین (۱۸۰)، بعد ورقه پایین (۲۵۰). دسکتاپ پنجره وسط: بالا آمدنِ کوتاه با محو */
@keyframes sheet-fade-in { from { opacity: 0; } }
@keyframes sheet-fade-out { to { opacity: 0; } }
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes sheet-down { to { transform: translateY(100%); } }
@keyframes sheet-pop-in { from { transform: translateY(24px); opacity: 0; } }
@keyframes sheet-pop-out { to { transform: translateY(24px); opacity: 0; } }
@keyframes sheet-close-rise { from { transform: translateY(36px); opacity: 0; } }
@keyframes sheet-close-sink { to { transform: translateY(36px); opacity: 0; } }
.map-sheet-backdrop { animation: sheet-fade-in .25s ease-out both; }
.map-sheet-backdrop > .map-sheet { animation: sheet-up .38s cubic-bezier(.4, 0, .2, 1) both; }
.map-sheet-backdrop .sheet-close-out { animation: sheet-close-rise .28s cubic-bezier(.34, 1.56, .64, 1) .36s both; }
.map-sheet-backdrop.leaving { pointer-events: none; animation: sheet-fade-out .25s ease-in .18s both; }
.map-sheet-backdrop.leaving > .map-sheet { animation: sheet-down .25s cubic-bezier(.4, 0, .2, 1) .18s both; }
.map-sheet-backdrop.leaving .sheet-close-out { animation: sheet-close-sink .18s ease-in both; }
@media (min-width: 768px) {
  .map-sheet-backdrop > .map-sheet { animation-name: sheet-pop-in; animation-duration: .3s; }
  .map-sheet-backdrop.leaving > .map-sheet { animation-name: sheet-pop-out; }
}
@media (prefers-reduced-motion: reduce) {
  .map-sheet-backdrop, .map-sheet-backdrop > .map-sheet, .map-sheet-backdrop .sheet-close-out { animation: none !important; }
}


/* اطلاعات کاربری: نام و استان کنارِ هم؛ عرضِ نام به اندازه ۶۰ نویسه فارسی */
.profile-info-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.profile-info-row > :is(label, .field-block) { margin: 0; }
.profile-info-row > .profile-info-name { flex: 0 1 440px; min-width: 0; max-width: 100%; }
@media (max-width: 639px) { .profile-info-row > :is(label, .field-block), .profile-info-row > .profile-save { flex: 1 1 100%; } }
.profile-info-row > .profile-save { flex: none; height: 47.5px; padding: 0 20px; margin: 0; }
.profile-info-name input { width: 100%; }
/* صفحه «اطلاعات کاربری»: بی کادر روی زمینه؛ بجِ وضعیت کنارِ استان، هم‌ترازِ وسطِ کادرها */
.profile-info-page { display: flex; flex-direction: column; gap: 12px; }
.status-badge { flex: none; align-self: flex-end; display: inline-flex; align-items: center; height: 26px; margin-bottom: 11px; padding: 0 10px; border-radius: 8px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.status-badge .squircle-i { margin-inline-end: 4px; }
.status-badge.ok { background: var(--primary); color: var(--on-primary); }
.status-badge.error { background: var(--error); color: #fff; }
.status-badge.none { background: var(--sunken); color: var(--muted); }
@media (max-width: 639px) { .status-badge { align-self: flex-start; margin: 0; } }

/* دکمه استان (اطلاعات کاربری): مثلِ انتخابگرِ جای نوبار با پین آبی، هم‌قدِ کادرها؛ ورقه تک‌انتخابی */
.province-button { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 180px; height: 47.5px; padding: 0 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface, transparent); color: var(--text); font: inherit; font-size: 16px; cursor: pointer; text-align: start; }
.province-button:hover { background: var(--sunken); }
.province-row { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 8px; border: 0; border-radius: 4px; background: none; color: var(--text); font: inherit; font-size: 16px; cursor: pointer; text-align: start; }
.province-row:hover { background: var(--sunken); }
.province-row.on { color: var(--primary); font-weight: 600; }
.province-check { font-size: 18px; }

/* اطلاعات کاربری: «تعویض عکس» و «برداشتن عکس» سمتِ چپِ عکس */
.profile-photo-row { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.profile-photo-row .stock-photo { flex: none; margin: 0; }
.profile-photo-actions { display: flex; flex-direction: column; gap: 8px; }
.profile-photo-actions .photo-action { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 14px; }
.profile-photo-actions .photo-action[hidden] { display: none; }

/* پنل، صفِ آگهی: کادرِ «آگهی‌دهنده» با اطلاعات کاربری و وضعیتِ هر مورد */
.seller-box { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin: 0 0 16px; }
.seller-box h3 { margin: 0 0 8px; font-size: 15px; }
.seller-facts { margin: 8px 0 12px; }
.seller-photo { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; cursor: zoom-in; }

/* «درخواست اصلاح» مدیر: خطِ جگریِ کنارِ موردِ خواسته‌شده — مثلِ عنوانِ اجباری */
.profile-info-row > :is(label, .field-block).redo > span:first-child, .profile-photo-row.redo { border-inline-start: 3px solid var(--error); padding-inline-start: 8px; }

/* ورقه باز: اسکرول فقط داخلِ خودش؛ رسیدن به ته فهرست صفحه زیرین را تکان نمی‌دهد، و صفحه زیرین تا بسته شدن قفل است
   (`scrollbar-gutter` تا با پنهان شدنِ نوارِ اسکرول چیدمان نپرد) */
.map-sheet, .map-sheet * { overscroll-behavior: contain; }
html:has(.map-sheet-backdrop), html:has(.chat-viewer), html:has(.lightbox), html:has(.zoom-backdrop), html:has(.support-lightbox),
html:has(.frame-editor), html:has(.post-preview), html:has(.login-modal), html:has(.post-viewer), html:has(.reel) { overflow: hidden; scrollbar-gutter: stable; }
.chat-viewer, .lightbox, .zoom-backdrop, .support-lightbox, .frame-editor, .post-preview, .login-modal { overscroll-behavior: contain; }

/* دکمه حسابِ هدر: عکس، نام و زیرش شماره ریزتر */
.account-button-avatar { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; flex: none; }
.account-button-who { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 8px; line-height: 1.15; flex: none; }
.account-button-name { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-button-phone { font-size: 11px; color: var(--muted); }
/* بلندیِ دکمه نام همان نوار (۳۸) می‌ماند، عکس کوچک‌تر (۳۲) وسطش */
.nav-link.account-button { padding-block: 0; height: var(--nav-control); box-sizing: border-box; }
.nav-post { flex: none; }
.account-wrap { display: flex; align-items: center; }

/* لوگوی متحرکِ لودینگ (`cartLoader`): لایه‌های هم‌اندازه روی هم؛ حرکت با transform روی لایه HTML (کمپوزیتور، بی گیر کردن
   وقتی رشته اصلی مشغول است). نقطه‌های چرخش به درصدِ بومِ ۱۲۶۴ (با translate(5.5 11) خودِ SVG) */
.cart-loader { position: relative; display: block; width: 96px; height: 96px; flex: none; }
.cart-loader-body, .cart-loader-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.cart-loader-layer { user-select: none; pointer-events: none; }
.cart-loader-body { animation: cart-bounce .5s ease-in-out infinite alternate; will-change: transform; }
.cart-loader-flower { transform-origin: 56.76% 52.61%; animation: cart-sway 1s ease-in-out infinite; will-change: transform; }
.cart-loader-wheel { animation: cart-turn 1s linear infinite; will-change: transform; }
.cart-loader-wheel.front { transform-origin: 67.37% 83.11%; }
.cart-loader-wheel.back { transform-origin: 41.93% 83.39%; }
@keyframes cart-turn { to { transform: rotate(360deg); } }
@keyframes cart-bounce { from { transform: translateY(0); } to { transform: translateY(-1.27%); } }
@keyframes cart-sway { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(3deg); } 75% { transform: rotate(-3deg); } }
@media (prefers-reduced-motion: reduce) { .cart-loader-body, .cart-loader-flower, .cart-loader-wheel { animation: none; } }

/* پانویسِ چسبیده به پایین: صفحه کوتاه تا تهِ پنجره کش می‌آید و پانویس پایینش می‌نشیند — نه جای خالیِ بزرگ و نه اسکرولِ بی‌جا
   (جای `min-height` ثابتِ `.settings-page` که با پانویس از پنجره بلندتر می‌شد) */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body > #view { flex: 1 0 auto; width: 100%; }

/* منوی کناریِ پشتیبانی (`withSupportNav`): دسکتاپ؛ دکمه «پیام به پشتیبانی» صفحه‌ها آن‌جا فقط موبایل */
.support-nav { display: none; }
@media (min-width: 1024px) {
  .view:has(> .support-layout) { max-width: var(--page-max); }
  /* کمینه به قدِ صفحه: با محتوای کوتاه هم ستون جای لغزیدن دارد و منو مثلِ ستونِ کناریِ صفحه اصلی سرِ جا می‌ماند */
  .support-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start;
    min-height: calc(100vh - var(--bar-height, 64px) - 32px); }
  /* موضوع‌ها در دسکتاپ فقط در منوی کناری؛ موبایل (بی منو) همان کاشی‌های صفحه */
  .support-layout .support-topics { display: none; }
  /* جستجو در دسکتاپ فقط کادرِ بالای منوی کناری؛ سرصفحه «چطور کمکت کنیم؟» با کادرش فقط موبایل */
  .support-layout .support-hero { display: none; }
  .support-nav-search { width: 100%; height: 44px; font-size: 16px; margin-bottom: 10px; flex: none; }
  /* فوکوس: همان اندازه، فقط حاشیه سبز (نه خطِ بیرونیِ ۲ پیکسلیِ عمومی که کادر را بزرگ نشان می‌داد) */
  .support-nav-search:focus { outline: none; border-color: var(--primary); }
  .support-layout-main { min-width: 0; }
  .support-layout-main > .settings-page { margin: 0; border-radius: 8px; }
  .support-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: calc(var(--bar-height, 64px) + 16px);
    max-height: calc(100vh - var(--bar-height, 64px) - 32px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .support-nav .side-link { font-size: 15px; gap: 8px; }
  .support-nav .side-link .nav-icon { color: var(--muted); }
  .support-nav .side-link.on .nav-icon { color: inherit; }
  .support-nav-icon { flex: none; width: 20px; text-align: center; line-height: 1; }
  .support-nav .unread-dot { width: 8px; height: 8px; margin-inline-start: auto; }
  .support-nav .save-row { margin: 12px 0 8px; }
  .support-nav .save-row .button { flex: 1; }
  .support-layout .support-contact-inline, .support-layout .support-contact-box { display: none; }
}

/* پنل «رویدادهای امنیتی» */
.security-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 12px; }
.security-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0; text-align: start; cursor: pointer; font: inherit; color: var(--text); }
.security-tile strong { font-size: 22px; }
.security-tile.on { outline: 2px solid var(--primary); }
.security-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.security-filters select, .security-filters input { width: auto; flex: 1 1 140px; }
.log-file-row { padding: 6px 0; gap: 8px; }
.log-file-actions { display: inline-flex; gap: 12px; align-items: center; }
.log-table td { text-align: start; white-space: nowrap; max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
.log-lines { direction: ltr; text-align: left; font-family: ui-monospace, Menlo, monospace; font-size: 12px; line-height: 1.6; white-space: pre-wrap; word-break: break-all; margin: 8px 0; padding: 8px; background: var(--latest-tint, #f7f7f7); border-radius: 4px; }
.security-row { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.security-row-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.security-alert { padding: 8px 0; border-bottom: 1px solid var(--line); }
.security-ip-row { padding: 4px 0; border-bottom: 1px solid var(--line); }
.security-revoke, .security-sms-failed { color: var(--error); }

/* نوارِ اسکرول در کلِ سایت پنهان (صفحه، ورقه‌ها، ستون‌ها و ردیف‌ها)؛ اسکرول با چرخ، لمس و کیبورد کار می‌کند */
*, *::before, *::after { scrollbar-width: none !important; }
*::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }

/* صفحه اصلی پشتیبانی: «پیام به پشتیبانی» بالای تب‌های «در جریان» و «بسته‌شده» */
.support-top { margin-bottom: 16px; }
.support-top .save-row { margin: 0 0 8px; }
/* «پیام به پشتیبانی» بالای صفحه: به پهنای متن و کمی کوتاه‌تر از دکمه‌های معمولی */
.support-top .save-row .button { flex: none; width: auto; padding-inline: 18px; }
/* آیکونِ هدست کنارِ «پیام به پشتیبانی» (همه جای سایت) */
.save-row .button:has(> .nav-icon) { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.support-main .support-topics { margin-bottom: 16px; }
.support-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.support-tab-dot { width: 8px; height: 8px; }
.support-guest { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }

/* سؤال‌های پشتیبانی بازشونده (`supportArticleList`) */
.support-faq { padding: 0; overflow: hidden; }
.support-faq-item + .support-faq-item { border-top: 1px solid var(--sunken); }
.support-faq-q { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 14px 16px;
  border: 0; background: none; color: var(--text); font: inherit; text-align: start; cursor: pointer; }
.support-faq-q:hover { background: var(--sunken); }
.support-faq-q:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.support-faq-chevron { flex: none; width: 10px; height: 10px; border-inline-end: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform .25s ease; margin-top: -4px; }
.support-faq-item.open .support-faq-chevron { transform: rotate(-135deg); margin-top: 4px; }
.support-faq-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.support-faq-item.open .support-faq-wrap { grid-template-rows: 1fr; }
.support-faq-item.instant .support-faq-wrap, .support-faq-item.instant .support-faq-chevron { transition: none; }
.support-faq-body { overflow: hidden; padding: 0 16px; }
.support-faq-item.open .support-faq-body { padding-bottom: 16px; }
.support-faq-body .dot-list { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .support-faq-wrap, .support-faq-chevron { transition: none; } }

/* کادرِ پیام‌های یک درخواستِ پشتیبانی: همان زمینه و حباب‌های داخلِ گفتگو */
.support-thread { background: var(--chat-wall) var(--chat-pattern); border-radius: 12px; padding: 10px; }
.support-bubble { background: var(--chat-mine); color: var(--chat-on-mine); }
.support-bubble.admin { background: var(--chat-theirs); color: var(--chat-on-theirs); border-color: transparent; }

/* منوی کناریِ پشتیبانی: سرتیترِ موضوع و سؤال‌هایش */
.support-nav-faq { border-radius: 8px; }
.support-nav-faq .support-faq-q { padding: 9px 10px; font-size: 14px; line-height: 1.6; border-radius: 6px; }
.support-nav-faq .support-faq-q b { font-weight: 500; }
.support-nav-faq .support-faq-item.open .support-faq-q b { font-weight: 700; color: var(--primary); }
.support-nav-faq .support-faq-body { padding-inline: 10px; font-size: 13px; }
.support-nav-faq .support-faq-body .button { width: 100%; }

/* نوارِ بالای همه صفحه‌ها سفید، روی زمینه #F9FAFD (`--bg`) */
header.bar { background: #ffffff; }

/* دسکتاپ: کاشی‌های «دسته‌بندی‌ها» در صفحه اصلی نیستند؛ دسته از ستونِ کناری انتخاب می‌شود و در بخشِ اصلی می‌آید. موبایل (بی ستون) می‌ماند */
@media (min-width: 1024px) { .home-below [data-part="cats"] { display: none; } }

/* ستونِ کناری: خطِ جداکننده پیش از راه‌های عمومی (دانلود اپ، درباره ما، …) */
.side-divider { border: 0; border-top: 1px solid var(--line); margin: 8px 0; }
.side-links-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
.side-links-grid .side-link { grid-column: span 2; justify-content: center; font-weight: 500; font-size: 12px; min-width: 0; padding-inline: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-links-grid .side-link:nth-child(n+4) { grid-column: span 3; }
/* بی «مجله راهنما» (هنوز مقاله‌ای منتشر نشده): «ایمنی معامله» تمام‌ردیف */
.side-links-grid .side-link:nth-child(4):last-child { grid-column: span 6; }

/* ویترینِ صفحه اصلی: کارت‌های «تازه‌ترین» زیرِ نوارِ عنوانِ «ویترین» */
.showcase-cards { padding: 12px 16px; }
@media (min-width: 1024px) { .showcase-cards { padding: 0 0 12px; } }
.showcase-cards h2.showcase-cards-title { margin: 12px 0 8px; }
/* عنوانِ «ویترین» جگری: خطِ عمودی و لکه قلم‌مو */
.showcase-cards h2.section-tab { border-inline-start-color: var(--error); }
.showcase-cards .section-tab .brush-title { --brush-fill: var(--error-bg); --brush-ink: var(--error); }

/* ورقه «حساب من» موبایل (`accountSheet`): ردیف‌های آیکون‌دار مثلِ منوی نامِ هدر */
.account-sheet { max-height: 85vh; overflow-y: auto; overscroll-behavior: contain; }
.account-sheet h3 { margin: 0 0 8px; }
.account-sheet-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 4px; border: 0; background: none; color: var(--text); font: inherit; font-size: 15px; text-align: start; text-decoration: none; cursor: pointer; }
.account-sheet-row > .nav-icon { display: inline-flex; color: var(--muted); }
.account-sheet-row.on { color: var(--primary); }
.account-sheet-row.on > .nav-icon { color: var(--primary); }
.account-sheet-row .nav-unread { margin-inline-start: auto; position: static; }
.account-sheet-row.account-menu-out, .account-sheet-row.account-menu-out > .nav-icon { color: var(--error); }

/* فلشِ «هنوز مورد هست» داخلِ کادرِ اسکرول‌دار (`scrollHints`): چسبیده به بالا/پایینِ کادر، بی جا گرفتن */
.scroll-hint { position: sticky; z-index: 2; flex: none; display: flex; align-items: center; justify-content: center; height: 48px; pointer-events: none; opacity: 0; transition: opacity .15s ease; }
.scroll-hint.up { top: -8px; margin: -8px -8px -40px; align-items: flex-start; padding-top: 4px; background: linear-gradient(var(--bg) 50%, transparent); }
.scroll-hint.down { bottom: -8px; margin: -40px -8px -8px; align-items: flex-end; padding-bottom: 4px; background: linear-gradient(to top, var(--bg) 50%, transparent); }
.scroll-hint.on { opacity: 1; }
.scroll-hint button { width: 36px; height: 22px; padding: 0; border: 0; border-radius: 4px; background: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.scroll-hint.on button { pointer-events: auto; }
.scroll-hint button:hover { background: var(--sunken); }
.scroll-hint button::before { content: ''; width: 8px; height: 8px; border-left: 2px solid var(--error); border-bottom: 2px solid var(--error); }
.scroll-hint.down button::before { transform: translateY(-2px) rotate(-45deg); }
.scroll-hint.up button::before { transform: translateY(2px) rotate(135deg); }

/* سرتیترِ گروه‌های حساب (`accountGroups`): منوی کناریِ حساب و ورقه «حساب من» */
.account-sheet-group { padding: 14px 8px 4px; font-size: 12px; font-weight: 500; color: var(--muted); }
.account-sheet-group { padding-inline: 4px; }

/* منوی نامِ هدر باز: صفحه زیرِ هدر کمی تیره و تار تا منو بهتر دیده شود */
body::after { content: ''; position: fixed; inset: 0; z-index: 9; background: rgba(0, 0, 0, .18); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, visibility .18s; }
body.account-menu-open::after { opacity: 1; visibility: visible; }

/* منوی کناریِ حساب: گروه‌های بازشونده مثلِ درختِ دسته‌های صفحه اصلی؛ یکی باز، بقیه بسته (`withAccountNav`) */
.account-group > summary { display: flex; align-items: center; justify-content: space-between; padding: 10px 8px; border-radius: 6px; font-size: 14px; font-weight: 400; color: var(--text); cursor: pointer; list-style: none; }
.account-group > summary::-webkit-details-marker { display: none; }
.account-group > summary:hover { background: var(--sunken); }
.account-group > summary::after { content: ''; width: 7px; height: 7px; border-inline-start: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .15s ease; }
.account-group[open] > summary::after { transform: rotate(135deg); }
.account-group > summary.on { font-weight: 600; }
.account-group + .account-group { border-top: 1px solid var(--line); }
/* فاصله پایین با margin بچه آخر، نه padding بدنه: padding با قدِ صفرِ حرکتِ بستن نمی‌رفت و آخرِ کار یک‌باره می‌پرید */
.account-group > .side-sub > :last-child { margin-bottom: 6px; }
.side-sub .account-sub-link { gap: 8px; font-size: 14px; padding-block: 7px; }
.account-sub-link > .nav-icon { display: inline-flex; color: var(--muted); }
.account-sub-link.on > .nav-icon { color: inherit; }
/* بسته شدنِ نرم (`smoothDetails`): فلش همان لحظه برمی‌گردد */
.account-group.closing > summary::after { transform: rotate(-45deg); }

/* ستونِ کناریِ فهرست: دسته انتخاب شده (`siteSidebar`) — برگشت به «همه آگهی‌ها»، نامِ دسته، ترتیب و فیلترها؛ عوض شدنِ حالت با محو */
.side-picked { display: flex; flex-direction: column; }
.side-kinds + .side-picked { margin-top: 16px; }
.side-back { gap: 6px; }
.side-back::before { content: ''; width: 7px; height: 7px; border-inline-start: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); margin-inline: 2px 4px; }
.side-picked-title { margin-top: 8px; }
.side-group-cats { margin-bottom: 8px; }
.side-swap { animation: side-swap .22s ease both; }
@keyframes side-swap { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .side-swap { animation: none; } }

/* فقط برای صفحه‌خوان */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* کارتِ آگهی: ردیف‌های کنارِ عکس تمام‌پهنای ستونِ متن و بی ظرفِ بُرنده (دنباله حرفِ آخر بریده نشود)؛ بج‌ها با قابِ خودشان */
.site-card-meta { overflow: visible; }
.site-card-meta .card-place { flex: 1 1 auto; max-width: none; }
.site-card-tags { flex-wrap: wrap; overflow: visible; }

/* بخشی از فیلترها که تازه پیدا می‌شود (کادرِ قیمت بعد از «فروش به صورت»): نرم باز می‌شود */
.filter-reveal { animation: filter-reveal .26s cubic-bezier(.2, 0, 0, 1) both; overflow: hidden; }
@keyframes filter-reveal { from { opacity: 0; max-height: 0; } to { opacity: 1; max-height: 120px; } }
@media (prefers-reduced-motion: reduce) { .filter-reveal { animation: none; } }
.side-group-link { margin-top: 6px; font-weight: 500; }

/* پذیرفتنِ قوانین تهِ صفحه هر سند (`rulesDocPageView`) */
.rules-accept { transition: opacity .25s ease, transform .25s ease; }
.rules-accept.leaving { opacity: 0; transform: translateY(6px); }
.rules-accept-panel { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 16px; }
.rules-accept-panel p { margin: 0; }
.rules-accept-tick { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 15px; }
.rules-accept-tick input { width: 18px; height: 18px; margin: 0; accent-color: var(--primary); }
@media (prefers-reduced-motion: reduce) { .rules-accept { transition: none; } }

/* ثبت آگهی با گام — مثل اپ: سرِ گام (شماره، نام، نوارِ پیشرفت)، ورودِ نرمِ هر گام، «مشخصات بیشتر» */
.post-head .post-step-head { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.post-head .post-step-head h3 { margin: 0; }
.step-progress { height: 4px; background: var(--sunken); border-radius: 2px; overflow: hidden; }
.step-progress span { display: block; height: 100%; background: var(--primary); transition: width .3s ease; }
.post-step.step-in { animation: post-step-in .25s ease; }
@keyframes post-step-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.extra-field { display: flex; flex-direction: column; gap: 4px; }
.extra-remove { align-self: flex-end; color: var(--error); padding: 4px 8px; }
.extra-list { display: flex; flex-direction: column; gap: 8px; }
.extra-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: start; padding: 12px; border: 1px solid var(--line);
  border-radius: 8px; background: none; font: inherit; color: var(--text); cursor: pointer; }
.extra-pick:hover { background: var(--sunken); }
.post-checklist li.current button { font-weight: 700; background: var(--sunken); }
@media (max-width: 1023px) {
  /* نوارِ پایین: پیش‌نویس فقط در گامِ اول؛ بعد «قبلی»، «+ مشخصات بیشتر» و «بعدی/ثبت» */
  .post-actions:has(.post-prev:not([hidden])) .post-draft { display: none; }
  .post-actions > button { padding-inline: 8px; font-size: 14px; white-space: nowrap; }
  .post-actions > .post-prev { flex: 0 0 auto; padding-inline: 14px; }
}
@media (prefers-reduced-motion: reduce) { .post-step.step-in { animation: none; } .step-progress span { transition: none; } }
/* فیلترهای «مشخصات بیشتر»: جمع‌شده زیرِ بقیه */
.filters-more > summary { cursor: pointer; padding: 8px 0; color: var(--primary); font-weight: 600; }
.filters-more-body { display: flex; flex-direction: column; gap: 16px; padding-top: 8px; }
/* ثبت آگهی: دسته‌ها مثلِ منوی کناریِ حساب — گروهِ بازشونده و دسته‌ها زیرش */
.post-cat-nav { border: 1px solid var(--line); border-radius: 8px; padding: 2px 8px; background: var(--surface); }
.post-cat-nav .account-group > summary.on, .post-cat-nav .account-group[open]:not(.closing) > summary { font-weight: 700; }
.post-cat-nav button.side-link { width: 100%; border: 0; background: none; font: inherit; text-align: start; flex-wrap: wrap; }
.post-cat-nav button.side-link.on { background: var(--primary-container); color: var(--on-primary-container); font-weight: 700; }
.post-cat-nav button.side-link:hover:not(.on) { background: var(--sunken); }
/* خطِ عمودیِ کنارِ دسته‌های هر گروه در ثبت آگهی: جگری */
.post-cat-nav .side-sub { border-inline-start-color: var(--error); }
.icon-text-button { display: inline-flex; align-items: center; gap: 6px; }
/* «پاک کردن فرم» بالای ثبت آگهی هم‌قدِ دکمه‌های «ثبت آگهی»/«بعدی» */
.post-actions > button, .post-head .icon-text-button { min-height: 38px; }
/* «تنظیمات اعلان»: هر گروه یک ردیف، نام و توضیح بالا و سه حالت زیرش */
.notify-rows { display: flex; flex-direction: column; margin-top: 8px; }
.notify-row { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-top: 1px solid var(--line); }
.notify-row-text { display: flex; flex-direction: column; gap: 2px; }
.notify-row .group { flex-wrap: nowrap; }
.notify-row .group button { flex: 1; }
.notify-locked { color: var(--primary); font-weight: 600; }
/* دکمه فقط‌آیکون (چرخ‌دنده «تنظیمات اعلان») */
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 4px; color: var(--text); border: 1px solid var(--line); background: var(--surface); }
.icon-button:hover { background: var(--sunken); }
/* ثبت آگهی: عکسِ در حالِ فرستادن (لوگوی متحرک روی عکسِ کم‌رنگ) و فرستاده‌نشده («دوباره» / «حذف») — مثل اپ */
.photo-tile.pending img { opacity: .45; cursor: default; }
.photo-pending-busy, .photo-pending-fail { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; }
.photo-pending-busy .cart-loader { width: 56px; height: 56px; }
.photo-pending-fail { background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--error); font-weight: 600; }
.photo-pending-fail .row { gap: 6px; }

/* نوارِ قرمزِ «سرور در دسترس نیست» بالای صفحه: هدرِ چسبان زیرِ آن می‌نشیند، نه پشتش (قدِ نوار همان max-height ۳۲) */
.offline-strip { line-height: 22px; }
.bar { transition: transform .2s ease, top .28s cubic-bezier(.4,0,.2,1); }
html:has(.offline-strip.shown) .bar { top: 32px; }

/* ثبت آگهی: عکس‌ها کوچک‌تر و هم‌قاب (۵ به ۴، مثلِ کارت)؛ لوگوی متحرکِ روی عکسِ در راه درست (قاعده `.gallery img` لایه‌هایش را کش می‌داد) */
.post-form .gallery .photo-tile > img { height: 120px; width: 150px; object-fit: cover; }
.gallery .cart-loader img { height: 100%; width: 100%; border-radius: 0; cursor: default; object-fit: contain; }
.photo-pending-fail { font-size: 13px; }
.photo-pending-fail button { padding-inline: 10px; }

/* عکسِ در راهِ ثبت آگهی — مثل اپ: پرده تیره روی عکس و حلقه چرخانِ نقره‌ای (نه لوگوی رنگی) */
.photo-tile.pending img { opacity: 1; }
.photo-pending-busy { background: rgba(0, 0, 0, .4); }
.upload-ring { width: 40px; height: 40px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, .3); border-top-color: #e8e8e8; animation: upload-spin .9s linear infinite; }
@keyframes upload-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .upload-ring { animation-duration: 2.4s; } }

/* «از متن تو»: مشخصاتی که از عنوان و توضیح پیدا شد، زیرِ توضیحِ فرمِ ثبت */
.extract-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.extract-chips[hidden] { display: none; }
.extract-chips-title { font-size: 13px; color: var(--muted); }
.extract-chip {
  display: inline-flex; align-items: center; border-radius: 999px; overflow: hidden;
  background: var(--primary-container); color: var(--on-primary-container); font-size: 13px;
  transition: background .2s, opacity .2s;
}
.extract-chip button {
  background: none; border: 0; color: inherit; font: inherit; min-height: 0; cursor: pointer;
  padding: 5px 10px; border-radius: 0; box-shadow: none;
}
.extract-chip .extract-chip-x { padding: 5px 8px 5px 10px; opacity: .65; }
.extract-chip button:hover { background: rgba(0, 0, 0, .06); }
.extract-chip.done { background: var(--sunken); color: var(--muted); }
.extract-chip.done .extract-chip-pick { padding: 5px 10px; }
/* پنل «واژه‌نامه مشخصات» */
.extract-forms { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0; }
.extract-field { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.extract-field h4 { margin: 0 0 8px; }
.extract-option { display: grid; grid-template-columns: 140px 1fr; gap: 8px; align-items: start; margin-bottom: 8px; }
.extract-option-label { padding-top: 10px; font-size: 14px; }
.extract-factor { max-width: 80px; }
tr.extract-bad td { color: var(--error); }
@media (max-width: 600px) { .extract-option { grid-template-columns: 1fr; } .extract-option-label { padding-top: 0; } }
/* «فرمِ ساده»: خلاصه «از آگهی‌ات فهمیدیم» و «همه مشخصات» بسته زیرِ توضیح */
.extract-summary { margin-top: 18px; }
.extract-summary[hidden], .all-specs[hidden] { display: none; }
.all-specs { margin-top: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.all-specs > summary { cursor: pointer; padding: 10px 14px; font-weight: 500; list-style: none; }
.all-specs > summary::-webkit-details-marker { display: none; }
.all-specs > summary::after { content: '▾'; float: left; color: var(--muted); transition: transform .2s; }
.all-specs[open]:not(.closing) > summary::after { transform: rotate(180deg); }
.all-specs > .raised-fields { padding: 0 14px; }
.all-specs > .raised-fields > :last-child { margin-bottom: 14px; }
/* صفِ بررسی: مشخصاتِ «فرمِ ساده» */
.queue-specs { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
.queue-specs h4 { margin: 0 0 6px; }
.queue-spec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 10px 0; }
.queue-spec { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.queue-spec.missing > span { color: var(--error); }
.queue-multi { display: flex; flex-wrap: wrap; gap: 4px 12px; }

/* «معرفی و تماس» کسب‌وکار: عکس‌های محل، معرفی، ساعت کاری، راه‌های تماس — مثل اپ */
.shop-photos { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; scrollbar-width: thin; }
.shop-photo { position: relative; flex: 0 0 auto; width: 132px; aspect-ratio: 4 / 3; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: var(--sunken); cursor: pointer; }
.shop-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s ease; }
.shop-photo:hover img { transform: scale(1.03); }
.shop-photos.edit { flex-wrap: wrap; overflow: visible; }
.shop-photos.edit .shop-photo { cursor: default; }
.shop-photo-remove { position: absolute; top: 4px; left: 4px; width: 26px; height: 26px; padding: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; border: 0; font-size: 13px; line-height: 26px; }
.shop-photo-state { position: absolute; bottom: 0; inset-inline: 0; padding: 2px 6px; font-size: 11px; background: rgba(0, 0, 0, .55); color: #fff; text-align: center; }
.shop-photo-state.rejected { background: var(--error); color: var(--on-error); }
.shop-about { white-space: pre-line; line-height: 1.9; margin: 0 0 12px; }
.shop-response { color: var(--primary); margin-bottom: 8px; }
.shop-open.open { color: var(--published); }
.shop-open.closed { color: var(--error); }
.shop-hours { margin: 4px 0; }
.shop-hours summary { display: flex; justify-content: space-between; gap: 8px; cursor: pointer; list-style: none; }
.shop-hours summary::-webkit-details-marker { display: none; }
.shop-hours summary::after { content: '▾'; color: var(--muted); transition: transform .2s ease; }
.shop-hours[open] summary::after { transform: rotate(180deg); }
.shop-hours-table { display: grid; gap: 4px; padding: 8px 0 4px; }
.shop-contacts { display: grid; gap: 6px; margin: 8px 0 4px; }
.shop-contacts a { color: var(--primary); }
.business-profile .panel { display: flex; flex-direction: column; gap: 10px; }
.business-profile .panel > .button, .business-profile .panel > button { align-self: flex-start; }
.business-profile textarea, .business-profile input:not([type=time]) { width: 100%; }
.hours-week { display: grid; gap: 10px; }
.hours-day { display: grid; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.hours-day-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.hours-span { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hours-span input[type=time] { width: 112px; }
.admin-photo { width: 220px; max-width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; cursor: zoom-in; display: block; margin-bottom: 8px; }

/* اعتراض (`appeals.js`): دکمه کنارِ دلیلِ رد، «در پاسخ به» بالای کادرِ متن و گفتگو — مثل اپ */
.appeal-slot:empty { display: none; }
.appeal-slot { margin-top: 6px; }
.appeal-button { padding-inline: 14px; }
.appeal-link { font-size: 13px; color: var(--primary); }
.name-pick.locked { cursor: default; background: var(--sunken); padding-inline-end: 12px; }
.name-pick.locked::after { display: none; }
.reply-to { display: grid; gap: 2px; margin: 12px 0; padding: 8px 12px; border-inline-start: 3px solid var(--primary); border-radius: 4px; background: var(--sunken); color: var(--text); text-decoration: none; }
a.reply-to:hover { background: var(--primary-container); }
.appeal-box { border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin: 12px 0; display: grid; gap: 8px; }
.appeal-box img { width: 140px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; cursor: zoom-in; }
.ask-fields { margin-top: 14px; }

/* «نوع کسب‌وکار»: کادرِ کسب‌وکار روی نقشه در زومِ دور بسته است — فقط مربعِ آیکونِ سفید روی رنگِ پین؛
   باز شدن از کنار: متن پهن و پیدا، آیکون روی عکس محو؛ و برچسبِ زیرِ نام */
.callout-photo { position: relative; }
.callout-kind { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--pin); opacity: 0; transition: opacity .3s ease; }
.callout-box { transition: gap .3s ease; }
.callout-text { max-width: 140px; overflow: hidden; transition: max-width .3s ease, opacity .25s ease, padding .3s ease; }
.callout-pin.folded .callout-kind { opacity: 1; }
.callout-pin.folded .callout-box { gap: 0; }
.callout-pin.folded .callout-text { max-width: 0; opacity: 0; padding-left: 0; }
.callout-pin.folded .callout-inner { transform: scale(.75); }
@media (prefers-reduced-motion: reduce) { .callout-kind, .callout-box, .callout-text { transition: none; } }
.shop-kind { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); margin-top: 2px; }
.shop-kind-icon { display: inline-flex; color: var(--primary); }
.table-wrap { overflow-x: auto; }
/* چشمِ «دیده‌ای» روی کارتِ «تازه‌ترین» (بالا-راست؛ بالا-چپ جای ذخیره است) */
.seen-mark { position: absolute; top: 4px; right: 4px; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 22px; border-radius: 6px; background: rgba(0, 0, 0, .55); pointer-events: none; }

/* دسته‌های صفحه اصلی (`catTiles`): ردیفِ سوم نصفه زیرِ پرده محو با فلش؛ باز و بسته نرم */
.cat-tiles.cat-more { margin-top: 0; overflow: hidden; transition: max-height .3s cubic-bezier(.2, 0, 0, 1); }
.cat-tiles.cat-more.peek > :nth-child(n+3) { display: none; }
.cat-more-wrap { position: relative; margin-bottom: 12px; }
.cat-more-veil { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 55%, transparent), var(--bg)); -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); transition: opacity .2s ease; }
.cat-more-wrap.open .cat-more-veil { opacity: 0; pointer-events: none; }
.cat-more-foot { display: flex; justify-content: center; margin-bottom: 12px; }
.cat-more-btn { width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 0; background: #0B6FA4; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.cat-more-btn::before { content: ''; width: 8px; height: 8px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-2px) rotate(-45deg); }
.cat-more-btn.up::before { transform: translateY(2px) rotate(135deg); }
@media (prefers-reduced-motion: reduce) { .cat-tiles.cat-more, .cat-more-veil { transition: none; } }
.cat-tiles:has(+ .cat-more-wrap) { margin-bottom: 8px; }

/* «جستجو با عکس»: حدسِ عکس و دکمه‌های کادردار کنارش؛ جا تنگ شد دکمه‌ها زیرِ متن */
.guess-row { flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.guess-row h2 { min-width: 12em; }
.guess-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.guess-actions > a, .guess-actions > button { display: inline-flex; align-items: center; padding: max(0px, calc((36px - 1.7em) / 2)) 14px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--surface); color: var(--primary); text-decoration: none; font-size: 14px; cursor: pointer; transition: border-color .2s, background .2s; }
.guess-actions > a:hover, .guess-actions > button:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, var(--surface)); }

/* حساب شخصی و کسب‌وکار: ردیف‌های جابه‌جایی (منوی نام، ورقه «حساب من»، منوی کناری)، نوارِ «حساب کسب‌وکار»، تبِ حساب با عکس */
.account-switch { display: grid; gap: 4px; margin-bottom: 4px; }
.account-switch .account-switch-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px;
  background: none; color: var(--text); font: inherit; text-align: start; cursor: pointer; transition: background .2s, border-color .2s; }
.account-switch .account-switch-row:hover { background: var(--sunken); }
.account-switch .account-switch-row.on { border-color: color-mix(in srgb, var(--primary) 40%, transparent); background: color-mix(in srgb, var(--primary) 6%, var(--surface)); }
.account-switch-row img, .account-switch-blank { flex: none; width: 34px; height: 34px; border-radius: 8px; object-fit: cover; display: inline-flex; align-items: center; justify-content: center;
  background: var(--sunken); color: var(--muted); }
.account-switch-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.4; }
.account-switch-text b { font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-switch-text small { color: var(--muted); font-size: 12px; }
.account-switch-unread { background: var(--error); color: #fff; padding: 1px 8px; }
.account-switch-check { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.4 14.2-4.2-4.2 1.4-1.4 2.8 2.8 6-6 1.4 1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.4 14.2-4.2-4.2 1.4-1.4 2.8 2.8 6-6 1.4 1.4z'/%3E%3C/svg%3E") center / contain no-repeat; }
.account-nav .account-switch { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.account-sheet .account-switch { margin: 4px 0 8px; }
.business-strip { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 6px 12px; border-radius: 8px;
  background: var(--primary-container); color: var(--on-primary-container); font-size: 13px; animation: strip-in .24s ease-out both; }
.business-strip img { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; }
.business-strip b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes strip-in { from { opacity: 0; transform: translateY(-4px); } }
.account-button-avatar.business { border-radius: 8px; outline: 2px solid var(--primary-container); }
.tabbar-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.tabbar-account.business .tabbar-avatar { border-radius: 6px; }
.tabbar-account.on .tabbar-avatar { outline: 2px solid var(--primary); outline-offset: 1px; }
.tabbar-account > span { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* کسب‌وکارِ غیرفعال‌شده (فقط‌خواندنی): لوگوی کم‌رنگ با قفلِ کوچک، روی تبِ حساب و دکمه نامِ هدر */
.tabbar-account.off .tabbar-avatar, .account-button.off .account-button-avatar { opacity: .45; }
.tabbar-account.off, .account-button.off { position: relative; }
.tabbar-account.off::after, .account-button.off::after { content: ''; position: absolute; width: 13px; height: 13px; border-radius: 50%;
  background: var(--muted) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M17 9h-1V7a4 4 0 0 0-8 0v2H7a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-9a1 1 0 0 0-1-1zm-7-2a2 2 0 0 1 4 0v2h-4z'/%3E%3C/svg%3E") center / 9px no-repeat;
  box-shadow: 0 0 0 2px var(--surface); }
.tabbar-account.off::after { top: 6px; left: calc(50% - 16px); }
.account-button.off::after { bottom: 4px; inset-inline-start: 26px; }

/* ورقه «نوع گیاه»: نوع‌های معمولِ نام بالا، خط، بقیه زیرش */
.name-sheet-head { padding: 8px 4px 4px; }
.name-sheet-divider { border: 0; border-top: 1px solid var(--line); margin: 8px 0; }

/* «صفحه فروشنده» */
.user-page-name { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: 1.25rem; }
.user-page-business { display: block; margin-top: 12px; font-weight: 500; }

/* پنل «پست‌ها» */
.admin-post-images { display: flex; gap: 6px; overflow-x: auto; margin: 8px 0; }
.admin-post-images img { width: 120px; height: 96px; object-fit: cover; border-radius: 8px; cursor: zoom-in; flex: none; }
.admin-post-body { white-space: pre-wrap; margin: 4px 0 8px; }

/* «پست‌ها» */
.post-card-status { position: absolute; top: 8px; inset-inline-start: 8px; background: rgba(0,0,0,.55); color: #fff; border-radius: 6px; padding: 2px 8px; font-size: .8rem; }
.post-card-status { inset-inline-start: auto; inset-inline-end: 8px; }
.post-page { max-width: 760px; }
/* شبکه سه‌ستونیِ صفحه کاربر، مثلِ اینستاگرام (`postTiles`) */
/* مثلِ اینستاگرام: خانه‌های ۳:۴؛ موبایل لبه تا لبه (`bleed`، صفحه فروشنده) با فاصله ۱٫۵ و بی گوشه گرد، دسکتاپ فاصله ۴ */
.post-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.post-tile { position: relative; display: block; aspect-ratio: 3 / 4; background: var(--line); overflow: hidden; }
@media (max-width: 899px) {
  .post-tiles { gap: 1.5px; }
  .post-tiles.bleed { margin-inline: -16px; }
}
.post-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .15s; }
.post-tile:hover img { opacity: .85; }
.post-tile .video-badge, .post-tile-many { position: absolute; top: 6px; inset-inline-start: 6px; }
.post-tile-many { background: rgba(0,0,0,.55); color: #fff; border-radius: 6px; padding: 1px 7px; font-size: .75rem; }
.post-tile .post-card-status { top: auto; bottom: 6px; inset-inline-end: auto; inset-inline-start: 6px; }
/* صفحه پست (`postPageView`) — مثل اپ (`PostBody`): موبایل مثلِ پستِ فیدِ اینستاگرام (هدرِ نویسنده، گالریِ تمام‌عرض، دکمه‌ها،
   متن، آگهی‌ها؛ کلِ صفحه اسکرول)، دسکتاپ رسانه و ستونِ کناری */
.post-viewer { position: fixed; inset: 0; z-index: 30; overflow-y: auto; background: var(--settings-bg); color: var(--text); overscroll-behavior: contain; animation: viewIn .22s ease-out; }
.post-media { position: relative; width: 100%; aspect-ratio: var(--post-ratio, 4 / 5); }
.post-stage { display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; }
.post-stage::-webkit-scrollbar { display: none; }
.post-slide { flex: 0 0 100%; height: 100%; display: flex; align-items: center; justify-content: center; scroll-snap-align: center; }
.post-slide > img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; transition: opacity .45s ease-out; }
.post-slide .video-slide { position: relative; width: 100%; height: 100%; background: transparent; }
/* تا رسیدنِ پست، عکس یا ویدیو: لوگوی نقره‌ای وسط، روی زمینه صفحه — مثل اپ (`GrayLogo`) */
.post-media.waiting, .post-slide.waiting, .post-slide .video-slide.waiting { position: relative; }
.post-media.waiting::before, .post-slide.waiting::before, .post-slide .video-slide.waiting::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 40px; aspect-ratio: 222 / 205; transform: translate(-50%, -50%);
  background: var(--muted); opacity: .4; -webkit-mask: url(/img/logo-mark.png) center / contain no-repeat; mask: url(/img/logo-mark.png) center / contain no-repeat; pointer-events: none; z-index: 1;
}
.post-slide.waiting > img { opacity: 0; }
.post-slide .video-cover { width: 100%; height: 100%; aspect-ratio: auto; }
.post-slide .video-cover img, .post-slide .video-player { width: 100%; height: 100%; object-fit: contain; }
/* پستِ کادردار (موبایل): عکس و ویدیو کادر را پر می‌کنند، مثلِ اینستاگرام */
@media (max-width: 899px) {
  .post-media.framed .post-slide > img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
  .post-media.framed .video-cover img, .post-media.framed .video-player { object-fit: cover; }
}
.post-counter { position: absolute; top: 12px; inset-inline-start: 12px; padding: 3px 10px; border-radius: 12px; background: rgba(0,0,0,.45); color: #fff; font-size: 13px; pointer-events: none; transition: opacity .2s; }
.post-counter.faded { opacity: 0; transition-duration: .4s; }
.post-dots { display: flex; justify-content: center; gap: 5px; padding-top: 8px; }
.post-dots span { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--text) 25%, transparent); transition: background .2s; }
.post-dots span.on { background: var(--primary); }
.post-nav { display: none; }
.post-top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 4px; padding: calc(6px + env(safe-area-inset-top)) 6px 6px; background: var(--settings-bg); }
.post-icon { display: inline-flex; padding: 8px; border: 0; border-radius: 50%; background: none; color: var(--text); cursor: pointer; transition: background .15s; }
.post-icon:hover { background: var(--sunken, #f1f1f1); }
.post-top-author { flex: 1; min-width: 0; }
.post-viewer .post-author, .post-top-author { display: flex; align-items: center; gap: 8px; margin: 0; color: inherit; text-decoration: none; }
.post-viewer .post-author img, .post-viewer .post-author .seller-avatar, .post-top-author img, .post-top-author .seller-avatar { flex: none; width: 34px; height: 34px; border-radius: 9px; object-fit: cover; }
.post-top-author { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; }
.post-top-author > :first-child { grid-row: span 2; }
.post-author-name { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.post-author-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-viewer .small { color: var(--muted); }
.post-panel { display: flex; flex-direction: column; gap: 10px; padding: 0 16px calc(24px + env(safe-area-inset-bottom)); }
.post-panel > .post-author { display: none; }
.post-status { display: flex; flex-direction: column; gap: 8px; order: 1; }
.post-caption { order: 2; margin: 0; text-align: justify; cursor: pointer; }
/* بسته: دو خطِ ساده؛ باز (و دسکتاپ): متنِ کامل با تیتر و فهرست (پستِ بلاگی) */
.post-caption-short { margin: 0; white-space: pre-wrap; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.post-caption-full { display: none; }
.post-caption.open .post-caption-short { display: none; }
.post-caption.open .post-caption-full { display: block; }
.post-caption-full > :first-child { margin-top: 0; }
.post-caption-full h2 { font-size: 17px; margin: 14px 0 6px; }
.post-caption-full p { margin: 0 0 10px; white-space: pre-wrap; }
.post-caption-full ul { margin: 0 0 10px; padding-inline-start: 20px; }
.post-featured { order: 1; align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 12px; background: #FFF4D6; color: #9A6B00; font-size: 13px; }
.post-tile-featured { position: absolute; top: 6px; inset-inline-start: 6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.5); color: #FFC94A; }
.post-actions { order: 0; display: flex; align-items: center; gap: 2px; margin: 0 -10px; }
.post-action { display: flex; align-items: center; gap: 4px; padding: 8px 10px; border: 0; border-radius: 12px; background: none; color: inherit; font: inherit; font-size: 14px; cursor: pointer; transition: background .15s; }
.post-action.on { color: var(--primary); }
/* پسندِ زده قلبِ قرمزِ پُر، مثلِ اینستاگرام */
.post-viewer .post-action.liked { color: #ED4956; }
.post-menu-row { gap: 14px; }
.post-action.post-save { margin-inline-start: auto; }
.post-action:hover:not(:disabled) { background: var(--sunken, #f1f1f1); }
.post-action:disabled { opacity: .6; cursor: default; }
.post-action.dim { opacity: .6; }
/* قلب و اشتراک کمی از هم دور — مثل اپ */
.post-action:not(.post-save) + .post-action:not(.post-save) { margin-inline-start: 6px; }
/* `.post-actions` نامِ نوارِ دکمه‌های فرمِ ثبت آگهی هم هست؛ قاعده‌های آن این‌جا نرسند */
.post-viewer .post-actions > button { flex: none; min-height: 0; padding-inline: 10px; }
.post-linked { order: 3; display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.post-linked h3 { margin: 0; }
.post-viewer-message .post-message { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; }
/* انتخابِ آگهی‌های پست: کاورِ کوچک کنارِ عنوان — مثل اپ (`ListingPickRow`) */
.saved-tabs { margin-bottom: 12px; }
/* جستجوی هر تبِ «ذخیره‌های من» (از ۵ مورد به بالا) */
.saved-search { display: block; width: 100%; box-sizing: border-box; margin-bottom: 12px; }
.tab-fade { animation: viewIn .22s ease-out; }
.pick-listings { display: flex; flex-direction: column; gap: 8px; }
.pick-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; text-align: start; }
button.pick-row { cursor: pointer; transition: background .15s; }
button.pick-row:hover { background: var(--sunken, #f1f1f1); }
.pick-row.on, button.pick-row.on:hover { background: var(--primary-container); }
.pick-row > img:first-child { flex: none; width: 56px; height: 56px; border-radius: 6px; object-fit: cover; background: var(--line); }
.pick-row .listing-title { flex: 1; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pick-row .icon-plain { flex: none; display: inline-flex; padding: 6px; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.pick-row .icon-plain:hover { background: var(--sunken, #f1f1f1); color: var(--text); }
.pick-sheet-list { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow-y: auto; overscroll-behavior: contain; margin: 12px 0; }
/* دسکتاپ: رسانه چپ روی زمینه صفحه، ستونِ سفیدِ راست مثلِ اینستاگرامِ وب */
@media (min-width: 900px) {
  .post-viewer { overflow: hidden; }
  .post-viewer:not(.post-viewer-message) .post-media { position: absolute; top: 0; bottom: 0; inset-inline-end: 0; inset-inline-start: 400px; width: auto; aspect-ratio: auto; }
  .post-dots { position: absolute; bottom: 14px; inset-inline-start: 400px; inset-inline-end: 0; }
  .post-nav { display: flex; position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.85); color: #000; font-size: 24px; line-height: 1; cursor: pointer; }
  .post-nav.next { left: 12px; }
  .post-nav.prev { right: 12px; }
  .post-top { position: absolute; inset-inline-start: 400px; inset-inline-end: 0; justify-content: space-between; background: none; pointer-events: none; }
  .post-top > * { pointer-events: auto; }
  .post-top .post-icon { background: rgba(0,0,0,.45); color: #fff; }
  .post-top .post-icon:hover { background: rgba(0,0,0,.6); }
  .post-top-author { display: none; }
  .post-counter { top: 14px; inset-inline-start: 50%; transform: translateX(50%); }
  .post-panel { position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 400px; padding: 20px; background: var(--surface, #fff); overflow-y: auto; }
  .post-panel > .post-author { display: flex; order: -1; }
  .post-caption { display: block; cursor: default; }
  .post-caption .post-caption-short { display: none; }
  .post-caption .post-caption-full { display: block; }
  .post-actions { order: 2; margin: 4px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
  .post-linked { order: 3; }
}
.post-author { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; margin-bottom: 10px; }
.post-author img, .follower-row img { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; }
.post-images { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; }
.post-images img { width: 100%; max-height: 520px; object-fit: contain; flex: none; scroll-snap-align: center; border-radius: 10px; background: var(--line); cursor: zoom-in; }
.post-body { white-space: pre-wrap; margin: 12px 0; }
.post-votes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.post-votes button.on { border-color: var(--primary); color: var(--primary); }
.post-form-images { display: flex; flex-wrap: wrap; gap: 8px; }
/* عکس‌های پست مثلِ ثبت آگهی (`.gallery`/`.photo-tile`)، با ضربدرِ برداشتن */
.post-gallery { min-height: 0; margin-top: 8px; }
.post-gallery:empty { display: none; }
/* هر خانه شکلِ کادرِ پست (`--post-ratio`) با برشِ خودش */
.post-gallery .photo-tile > img { height: 200px; width: calc(200px * var(--post-ratio, 1)); object-fit: cover; }
.post-frame-picker { margin-top: 10px; }
.frame-ratios { padding: 0 16px 8px; }
.frame-ratios .group { justify-content: center; }
.photo-crop-badge { position: absolute; bottom: 8px; inset-inline-end: 8px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; pointer-events: none; }
.photo-crop-badge .action-icon { width: 15px; height: 15px; }
.post-gallery .photo-tile > img { cursor: pointer; }
.post-gallery .photo-tile.pending { width: calc(200px * var(--post-ratio, 1)); height: 200px; border-radius: 12px; background: var(--surface-variant, #eee); display: flex; align-items: center; justify-content: center; }
.photo-remove { position: absolute; top: 8px; inset-inline-end: 8px; width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 14px; line-height: 28px; cursor: pointer; }
.post-gallery.drop-on, .field-block .drop-on { outline: 2px dashed var(--primary); outline-offset: 4px; }
.post-form-image { position: relative; width: 96px; height: 96px; }
.post-form-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.post-form-image .input-clear { position: absolute; top: 2px; inset-inline-end: 2px; }
.post-form-add { width: 96px; height: 96px; border-style: dashed; }
.follower-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.follower-row .spacer { flex: 1; }
.follower-row { transition: opacity .22s ease, transform .22s ease; }
.follower-row.leaving { opacity: 0; transform: translateX(-12px); }
/* «فعالیت‌ها»: قلبِ بالا-چپِ صفحه خودم، دکمه درخواست‌ها و ردیف‌های پسند/دنبال کردن — مثل اپ */
.user-page-header { position: relative; }
.public-toggle { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.user-page-top { display: flex; align-items: center; justify-content: space-between; margin: -8px -8px 4px; }
.user-page-actions { display: flex; align-items: center; gap: 2px; }
.post-fab { position: fixed; inset-inline-end: 24px; bottom: 24px; z-index: 20; display: inline-flex; align-items: center; gap: 6px; padding-inline: 18px; box-shadow: 0 4px 16px rgba(0,0,0,.2); }
@media (max-width: 767px) { body.with-tabbar .post-fab { bottom: calc(76px + env(safe-area-inset-bottom)); inset-inline-end: 16px; } }
.shop-page:has(.post-fab) { padding-bottom: 72px; }
.user-page-top .icon-plain { display: inline-flex; padding: 6px; border: 0; border-radius: 8px; background: none; color: var(--text); cursor: pointer; transition: background .15s; }
.user-page-top .icon-plain:hover { background: var(--surface-variant, #f1f1f1); }
.activity-heart { position: relative; display: inline-flex; transition: background .15s; padding: 6px; border-radius: 8px; color: var(--text); }
.activity-heart:hover { background: var(--surface-variant, #f1f1f1); }
.activity-dot { position: absolute; top: 5px; inset-inline-end: 5px; width: 9px; height: 9px; border-radius: 50%; background: #d32f2f; border: 2px solid var(--surface, #fff); }
.activity-requests { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface, #fff); color: inherit; text-decoration: none; }
.activity-requests:hover { background: var(--surface-variant, #f7f7f7); }
.activity-stack { position: relative; width: 44px; height: 44px; flex: none; }
.activity-stack > * { position: absolute; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid var(--surface, #fff); display: inline-flex; align-items: center; justify-content: center; }
.activity-stack > :first-child { top: 0; inset-inline-start: 0; }
.activity-stack > :nth-child(2) { bottom: 0; inset-inline-end: 0; }
.activity-requests-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.activity-requests-text small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.activity-requests .badge { background: #d32f2f; color: #fff; border-radius: 10px; padding: 0 8px; font-size: 12px; }
.activity-chevron { font-size: 22px; color: var(--muted); }
.activity-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; }
.activity-row.fresh { background: color-mix(in srgb, var(--primary-container, #d8f0dc) 45%, transparent); }
.activity-who img, .activity-who .seller-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; }
.activity-text { flex: 1; min-width: 0; font-size: 14px; line-height: 1.7; }
.activity-text a { color: inherit; text-decoration: none; }
.activity-text b { font-weight: 600; }
.activity-post img { width: 48px; height: 48px; border-radius: 6px; object-fit: cover; display: block; }

/* نقطه نخوانده‌های حسابِ دیگر روی تبِ حساب (موبایل) */
.tabbar-account { position: relative; }
.tabbar-other { position: absolute; top: 4px; inset-inline-start: calc(50% + 6px); }

/* ویدیوی آگهی: اولین خانه گالری، کاور با دکمه پخش؛ ویدیو در همان کادرِ ۵ به ۴ با زمینه سیاه (عمودی کامل دیده شود) */
.video-slide { background: #000; }
.video-cover { position: relative; display: block; width: 100%; aspect-ratio: 5 / 4; padding: 0; border: 0; background: #000; cursor: pointer; }
.slides .video-cover img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; cursor: pointer; }
.video-play { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; transition: transform .15s ease, background-color .15s ease; }
.video-cover:hover .video-play { transform: scale(1.06); background: rgba(0, 0, 0, .7); }
.video-play .photo-count-icon { margin-inline-start: 4px; }
.photo-count.video-time { left: 50%; transform: translateX(-50%); }
.video-player { display: block; width: 100%; aspect-ratio: 5 / 4; background: #000; object-fit: contain; }
.detail-thumbs .video-thumb { position: relative; display: flex; align-items: center; justify-content: center; background: #000; color: #fff; }
.detail-thumbs .video-thumb .photo-count-icon { position: absolute; }
/* فرم و «مدیریت آگهی» */
.video-box { display: flex; flex-direction: column; gap: 8px; }
.video-preview { position: relative; width: 100%; max-width: 360px; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #000; }
.video-preview video, .video-preview img { width: 100%; height: 100%; object-fit: contain; display: block; }
.queue-video { display: grid; gap: 8px; margin-top: 12px; }
.post-video-box .video-preview { aspect-ratio: var(--post-ratio, 1); max-width: 300px; }
.post-video-box .video-preview video, .post-video-box .video-preview img { object-fit: cover; object-view-box: var(--video-view, none); }
.video-progress { height: 4px; border-radius: 2px; background: var(--sunken); overflow: hidden; }
.video-progress span { display: block; height: 100%; background: var(--primary); transition: width .2s linear; }
.video-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.video-badge { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 22px; border-radius: 6px; background: rgba(0, 0, 0, .55); color: #fff; pointer-events: none; }

/* «پست‌های منتخب» (`featuredView`) */
.featured-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.featured-card { display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; }
.featured-card img, .featured-card-empty { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; background: var(--line); }
.featured-card:hover strong { color: var(--primary); }

/* «اخبار جاگل» (`newsView`) */
.news-list { display: flex; flex-direction: column; gap: 12px; }
.news-row { display: flex; gap: 14px; align-items: flex-start; padding: 12px; border-radius: 10px; background: var(--surface, #fff); color: inherit; text-decoration: none; }
.news-row img { flex: none; width: 120px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.news-row strong { display: block; margin-bottom: 4px; }
.news-row p { margin: 0 0 4px; }
.news-row:hover strong { color: var(--primary); }

/* پیامِ وسطِ صفحه خالی: آیکونِ اطلاعات بالای متن و وسط، مثلِ «هنوز خبری نیست» اخبار و `StateMessage` اپ */
.empty-state > p:first-child { display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; }
.empty-state > p:first-child::before { content: ''; flex: none; width: 28px; height: 28px; background: currentColor; -webkit-mask: var(--squircle-info) center / contain no-repeat; mask: var(--squircle-info) center / contain no-repeat; }

/* پنل «اعلان‌ها»: فرمِ چهاربخشی و ستونِ چسبانِ پیش‌نمایش و ارسال؛ موبایل یک ستون با نوارِ ارسالِ چسبان پایین */
.announce-layout { display: grid; gap: 16px; align-items: start; }
.announce-form { display: grid; gap: 12px; min-width: 0; }
.announce-step { display: grid; gap: 10px; }
.announce-step-title { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 500; margin: 0; }
.announce-step-n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--primary-container); color: var(--on-primary-container); font-size: 14px; }
.announce-side { display: grid; gap: 12px; min-width: 0; }
.announce-preview-box summary { cursor: pointer; font-weight: 500; }
.announce-preview-box[open] summary { margin-bottom: 10px; }
.announce-send { display: grid; gap: 8px; }
.announce-send .primary { width: 100%; }
.announce-count { font-size: 15px; }
.announce-spin { display: inline-block; width: 12px; height: 12px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: map-spin .8s linear infinite; vertical-align: -2px; }
.announce-channels { display: flex; flex-wrap: wrap; gap: 8px; }
.announce-channels .chip[disabled] { opacity: .45; cursor: not-allowed; }
.announce-summary { display: grid; gap: 6px; margin-bottom: 8px; }
.announce-summary-row { display: flex; justify-content: space-between; gap: 12px; }
.announce-summary-row > :last-child { text-align: left; overflow-wrap: anywhere; }
@media (min-width: 1024px) {
  .announce-layout { grid-template-columns: minmax(0, 1fr) 380px; }
  .announce-side { position: sticky; top: 76px; }
}
@media (max-width: 1023px) {
  .announce-send { position: sticky; bottom: 0; z-index: 5; box-shadow: 0 -4px 12px rgba(0, 0, 0, .08); }
}
/* تاریخچه اعلان‌ها */
.announce-history-tools { display: grid; gap: 10px; margin: 12px 0; }
@media (min-width: 720px) { .announce-history-tools { grid-template-columns: auto minmax(200px, 320px); justify-content: space-between; align-items: center; } }
.announce-history { display: grid; gap: 12px; }
.announce-card { display: grid; gap: 8px; }
.announce-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: center; }
.announce-card-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.announce-card-chips .chip { cursor: default; font-size: 13px; }
.announce-card-chips .chip.muted { opacity: .6; }
.announce-card-chips .chip.danger { color: var(--error); }
.announce-kind.important { color: var(--error); border-color: currentColor; }
.announce-kind.promo { color: #b26a00; border-color: currentColor; }
.announce-card-body { margin: 0; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.announce-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.announce-metric { display: grid; gap: 2px; padding: 8px; border-radius: 8px; background: var(--surface-sunken, #f3f4f6); text-align: center; }
.announce-metric strong { font-size: 17px; font-weight: 500; }
.announce-card-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: center; }
@media (max-width: 560px) { .announce-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }