/*
 * تمِ سایت، **همان پالتِ اپ**.
 *
 * مقدارها یک‌به‌یک از `ui/theme/Color.kt` می‌آیند: سبزِ برگ به‌عنوان تنها
 * رنگِ هویت، سه رنگِ معنایی (منتشرشده/در انتظار/ردشده)، خطِ نازک به‌جای سایه،
 * و نوارِ بالای صفحه که در تمِ روشن کمی از سطح تیره‌تر است تا ناپیدا نشود.
 */
:root {
  --squircle-info: 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.317 3.769a42.5 42.5 0 0 1 9.366 0c1.827.204 3.302 1.642 3.516 3.48c.37 3.156.37 6.346 0 9.503c-.215 1.836-1.69 3.275-3.516 3.48a42.5 42.5 0 0 1-9.366 0c-1.827-.205-3.302-1.644-3.516-3.48a41 41 0 0 1 0-9.504c.214-1.837 1.69-3.275 3.516-3.48M13 7.999A1 1 0 1 1 11 8a1 1 0 0 1 2 0m-1 2.75a.75.75 0 0 1 .75.75v5a.75.75 0 1 1-1.5 0v-5a.75.75 0 0 1 .75-.75'/%3E%3C/svg%3E");
  --bg: #f9fbf8;
  --surface: #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: #8b1a2b;
  --error-bg: #f8e6e9;
  --pending: #9a6300;
  --pending-bg: #fff1d6;
  --radius: 16px;
  /* زمینه صفحه‌های فهرستی‌ـ‌کادردار؛ خاکستریِ روشنِ تنظیماتِ MIUI */
  --settings-bg: #f7f7f7;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #212824;
    --surface: #212824;
    --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, Shabnam, sans-serif; font-weight: 400; }
/* بخشِ «فروشنده» صفحه آگهی: نامِ کسب‌وکار با فونتِ عنوانِ آگهی — مثل اپ */
.seller-business { font-family: Beiruti, Shabnam, sans-serif; font-weight: 700; font-size: 1.2em; }
/* «تازه به گلبازار پیوسته‌اند»: یک پله پررنگ‌تر — مثل اپ */
/* «تازه به گلبازار پیوسته‌اند»: همان فونتِ عنوانِ آگهی (بیروتی) — مثل اپ */
.shop-chip .shop-chip-text .business-name { font-family: Beiruti, Shabnam, 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: Shabnam;
  src: url('/fonts/shabnam_regular.v1.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Shabnam;
  src: url('/fonts/shabnam_medium.v1.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: Shabnam;
  src: url('/fonts/shabnam_bold.v1.woff2') format('woff2');
  font-weight: 600 700;
  font-display: swap;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Shabnam, "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);
}

.brand { font-weight: 700; font-size: 18px; color: var(--primary); }

#nav { display: flex; gap: 4px; flex-wrap: wrap; margin-inline-start: auto; }

#nav a {
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--muted);
}

#nav a.on { background: var(--primary-container); color: var(--on-primary-container); font-weight: 600; }

.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;
  padding: 10px 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: #fff; }
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: 8px 14px;
  /* انتخاب‌نشده بی‌خط، از زمینه جدا نمی‌شد و دکمه به نظر نمی‌رسید — مثل اپ */
  border: 1px solid var(--line);
}

.group button[aria-pressed="true"] {
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 600;
  border-color: transparent;
}

/* ---------- تراشه‌های فیلتر ---------- */
.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; }
.lightbox-close, .lightbox-nav {
  position: absolute; border: 0; background: rgba(255,255,255,.15); color: #fff;
  font-size: 26px; line-height: 1; cursor: pointer; border-radius: 12px; padding: 8px 14px;
}
.lightbox-close { top: 16px; inset-inline-end: 16px; }
.lightbox-nav.prev { inset-inline-start: 16px; }
.lightbox-nav.next { inset-inline-end: 16px; }
.lightbox-count { position: absolute; bottom: 16px; color: #fff; font-size: 13px; }
/* کاورِ فعلی با یک قابِ رنگی مشخص است */
.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; }
.limits-link { margin-bottom: 0; padding: 4px 10px; font-size: 13px; display: inline-block; width: fit-content; background: #b4451b; border-color: #b4451b; color: #fff; }

.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: #fff;
  width: min(480px, 100%);
  border-radius: 16px 16px 0 0;
  padding: 16px 20px 28px;
}
.map-sheet h3 { margin: 0 0 12px; }

/* نشانه «نقشه» گوشه بالا-راستِ نقشه جزئیات آگهی — همتای اپ */
.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-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; }

/* پنل مدیر: تب‌های عمودی سمتِ راست */
.admin-layout { display: flex; gap: 16px; align-items: flex-start; }
.admin-tabs { flex: 0 0 200px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 16px;
  /* فهرست بلندتر از صفحه شد: خودش اسکرول شود، نه اینکه ته‌اش گم شود */
  max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; padding-inline-end: 4px; }
/* صفحه پهن: تب‌ها چسبیده به گوشه راستِ صفحه، محتوا وسط */
@media (min-width: 1360px) {
  .admin-layout { display: block; }
  .admin-tabs { position: fixed; inset-inline-start: 16px; top: 88px; width: 200px; max-height: calc(100vh - 104px); overflow-y: auto; }
}
.admin-tabs a { padding: 10px 12px; border-radius: 8px; color: inherit; text-decoration: none;
  display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* سرگروه‌ها: کوچک، خاکستری، و هنگام اسکرول بالای گروهِ خودشان می‌مانند */
.admin-group { position: sticky; top: 0; z-index: 1; background: var(--bg, #fff);
  font-size: 12px; color: var(--muted, #777); padding: 10px 12px 4px; }
.admin-tabs a.on .badge { background: var(--on-primary, #fff); color: var(--primary); }
.admin-tabs a:hover { background: var(--surface); }
.admin-tabs a.on { background: var(--primary); color: var(--on-primary, #fff); font-weight: 600; }
.admin-content { flex: 1; min-width: 0; }
@media (max-width: 640px) {
  .admin-layout { flex-direction: column; }
  .admin-tabs { position: static; flex-direction: row; overflow-x: auto; overflow-y: visible; max-height: none; flex-basis: auto; width: 100%; }
  /* نوارِ افقیِ موبایل جای سرگروه ندارد */
  .admin-group { display: none; }
  .admin-tabs a { white-space: nowrap; }
}

/* آمارِ کلی در پنل مدیر */
.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: Shabnam, "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: #8b1a2b !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: 72%; height: auto; }

/* کادرِ فاصله: بعد از کارت و پیش از ضربدر بالا می‌آید؛ هنگامِ بستن اول از همه پایین */
@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: 10px 18px; border-radius: 4px; background: var(--primary); color: var(--on-primary); text-decoration: 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; }
/* فرمِ ثبت آگهی: آیکون‌های اطلاعات جگریِ اخطارها — مثل اپ */
.post-form .info-button { color: var(--error); }
/* راهنماهای خودِ فرم: آیکونِ چهارگوشِ گرد (همان خطِ سقفِ آگهی)؛ داخلِ ورقه همان ⓘ */
.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); }

.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; bottom: 18px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; }
.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; }

/* فهرستِ گفتگوها، مثل اپ */
.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 { --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; }
/* عکسِ گفتگو بزرگ — مثل اپ */
.chat-viewer { position: fixed; inset: 0; z-index: 80; background: #000; display: flex; align-items: center; justify-content: center; }
.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; }
.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; }
.place-group { font-weight: 600; padding-top: 8px; }
.place-divider { border: 0; border-top: 1px solid var(--border, #e5e7eb); 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; }
.place-admin-row { gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border, #e5e7eb); }
.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; }

/* صفحه‌های فهرستی‌ـ‌کادردار: زمینه هم‌رنگِ نوارِ بالا تا کادرِ هر دسته جدا دیده شود — مثل اپ */
.settings-page { background: var(--settings-bg); margin: -16px; padding: 16px; min-height: calc(100vh - 100px); }
/* بجِ سقف داخل کادرِ هر دسته — مثل اپ */
.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; }

/* تصویرِ ثابتِ بالای قوانین گفتگو */
.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 #b4451b; 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: 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; }

/* پنل «کاربران فعال»: نوارِ سهمِ اپ و سایت */
.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); }
.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-pin.city-level { margin-top: -8px; }
.map-preview-pin { position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; transform: translate(-50%, -85%);
  background: url('/img/map-where.png') center / contain no-repeat; }
.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-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; }
/* لودینگِ پرده شروع — مثل اپ */
.boot-spinner { width: 48px; height: 48px; border: 4px solid var(--primary); border-top-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
.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: 16px; 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; }
/* عکس با محوِ کوتاه می‌نشیند، نه یک‌باره — مثل اپ */
.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; }

/* «حساب من» — مثل اپ: نوارِ وضعیت و گروه‌ها */
.status-strip-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.status-cell { display: flex; flex-direction: column; align-items: center; padding: 10px 6px; border-radius: 12px; background: var(--surface); color: inherit; text-decoration: none; }
.status-cell b { font-size: 20px; }
.status-cell small { color: var(--muted); }
.group-title { font-size: 14px; color: var(--muted); margin: 16px 4px 6px; }
.link-list { padding: 0; }
.link-row { display: flex; flex-direction: column; padding: 12px 16px; color: inherit; text-decoration: none; border-top: 1px solid var(--line); }
.link-row:first-child { border-top: 0; }
.link-row small { color: var(--muted); }

/* «تازه‌ترین آگهی‌ها»: کارت‌ها زیر هم، بی‌انتها */
.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: 5 / 4; 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; }
/* عنوانِ آگهی در همه سایت: بیروتی، کمی بزرگ‌تر چون حروفش ریزترند — مثل اپ */
.listing-title { font-family: Beiruti, Shabnam, sans-serif; font-weight: 700; }
h1.listing-title { font-size: 24px; }
strong.listing-title, b.listing-title { font-size: 1.2em; }
.feed-card h3 { margin: 0; font-family: Beiruti, Shabnam, sans-serif; font-weight: 700; font-size: 21px; line-height: 1.3; }
.feed-place { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* آیکونِ مکان پیش از محدوده */
.feed-place:not(:empty)::before, .pin-line::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(139, 26, 43, .035); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --latest-tint: rgba(255, 255, 255, .04); } }
:root[data-theme="dark"] { --latest-tint: rgba(255, 255, 255, .04); }
.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: 24px 24px 0 0; padding-top: 24px; box-shadow: 0 -6px 16px rgba(0, 0, 0, .08); }
.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; }

/* صف تأیید آگهی: در صفحه پهن تا لبه چپ باز می‌شود؛ عکس‌ها راست، اطلاعات چپ */
@media (min-width: 1360px) {
  .view:has(.admin-queue) { max-width: none; padding-inline-start: 248px; padding-inline-end: 32px; }
}
.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: Beiruti, Shabnam, sans-serif; font-weight: 700; font-size: 17px; 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; }
.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-logo { display: block; width: 140px; height: auto; margin: 8px auto 4px; }

/* حراج: شمارشِ معکوسِ زنده، قیمتِ خط‌خورده، کارتِ «همه» و شبکه دوستونی — مثل اپ */
.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-size: 13px; -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; }

/* «تنظیم کادر» — مثل اپ: زمینه سیاه، قابِ ۵:۴ ثابت، بیرونش کم‌رنگ */
.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-download { text-align: center; display: grid; gap: 12px; justify-items: center; }
.app-download .panel { text-align: start; width: 100%; }
.app-download-logo { width: 88px; height: 88px; border-radius: 22px; }
.app-download-button { min-width: 240px; font-size: 16px; padding: 14px 24px; }

/* «خبرم کن» — ردیفِ هر جست‌وجو و نشانِ سبزِ «تازه»، مثل اپ */
.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: 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.317 3.769a42.5 42.5 0 0 1 9.366 0c1.827.204 3.302 1.642 3.516 3.48c.37 3.156.37 6.346 0 9.503c-.215 1.836-1.69 3.275-3.516 3.48a42.5 42.5 0 0 1-9.366 0c-1.827-.205-3.302-1.644-3.516-3.48a41 41 0 0 1 0-9.504c.214-1.837 1.69-3.275 3.516-3.48M13 7.999A1 1 0 1 1 11 8a1 1 0 0 1 2 0m-1 2.75a.75.75 0 0 1 .75.75v5a.75.75 0 1 1-1.5 0v-5a.75.75 0 0 1 .75-.75'/%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.317 3.769a42.5 42.5 0 0 1 9.366 0c1.827.204 3.302 1.642 3.516 3.48c.37 3.156.37 6.346 0 9.503c-.215 1.836-1.69 3.275-3.516 3.48a42.5 42.5 0 0 1-9.366 0c-1.827-.205-3.302-1.644-3.516-3.48a41 41 0 0 1 0-9.504c.214-1.837 1.69-3.275 3.516-3.48M13 7.999A1 1 0 1 1 11 8a1 1 0 0 1 2 0m-1 2.75a.75.75 0 0 1 .75.75v5a.75.75 0 1 1-1.5 0v-5a.75.75 0 0 1 .75-.75'/%3E%3C/svg%3E") 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; }
.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; }
.province-image .province-count { bottom: 8px; left: 8px; font-size: 12px; }

/* جای ویترینِ خالی: همان اندازه، دعوت به رزرو — مثل اپ */
.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-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: 500; }
.showcase-promo strong { font-size: 20px; }
.showcase-promo .button { margin-top: 4px; padding: 10px 20px; border-radius: 4px; background: var(--primary); color: #fff; font-weight: 600; }

/* پنلِ ویترین: آمار، قیمتِ هر نوبت، رزروها */
.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; }
.boot-logo { width: 200px; height: auto; }
.boot-splash .boot-spinner { animation: spin .8s linear infinite, fade-in .2s ease .3s both; }

/* لودینگِ پیش‌نمایشِ نقشه: همان پینِ نهایی آرام بالا و پایین، سایه زیرِ نوکش — مثل اپ */
.map-preview-shadow { position: absolute; left: 50%; top: 50%; width: 14px; height: 4px; margin: -2px 0 0 -7px; border-radius: 50%; background: #000; opacity: 0; transition: opacity .24s; pointer-events: none; }
.map-catcher.loading .map-preview-shadow { opacity: .28; animation: pin-shadow .96s ease-in-out infinite; }
.map-catcher.loading .map-preview-pin { animation: pin-bob .96s ease-in-out infinite; }
.map-preview-pin { transition: translate .24s; }
.map-catcher:has(.map-preview-pin.city-level) .map-preview-shadow { margin-top: -10px; }
@keyframes pin-bob { 50% { translate: 0 -6px; } }
@keyframes pin-shadow { 50% { scale: .65; opacity: .14; } }

/* نشانیِ زیرِ نقشه در «کسب‌وکار من» و فرمش: همان پینِ آبیِ کارت‌های «تازه‌ترین آگهی‌ها» — مثل اپ */
.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, #e5e5e5); 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-bubble { position: fixed; inset-inline: 16px; max-width: 420px; margin: 0 auto; background: #fff; color: #1d1d1d; border-radius: 12px; padding: 14px 16px; box-shadow: 0 4px 16px rgb(0 0 0 / 0.25); display: flex; flex-direction: column; gap: 10px; }
.spotlight-bubble p { margin: 0; }
.spotlight-bubble button { align-self: flex-end; }
.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: var(--primary) url("/img/logo.png") center / 70% 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; }