/* ==========================================================================
   دکترجاب — لایه «مدرن» (نسخه ۲۲)
   روی style.css بارگذاری می‌شود و فقط ظاهر را نوتر می‌کند: سایه‌های لایه‌ای، گوشه‌های نرم‌تر، سربرگ و نوار تب شیشه‌ای،
   صفحه اول با پس‌زمینه ملایم، کارت آگهی با آیکون دسته، فرم‌ها و دکمه‌های بزرگ‌تر، پنل مدیریت داشبوردی.
   همه رنگ‌ها از توکن‌های style.css می‌آیند؛ پس حالت تیره خودکار درست کار می‌کند.
   ========================================================================== */

:root {
  --radius-ctl: 12px;
  --radius-box: 18px;
  --radius-panel: 22px;
  --shadow-1: 0 1px 2px rgb(16 26 51 / 5%), 0 2px 8px -2px rgb(16 26 51 / 6%);
  --shadow-2: 0 2px 4px rgb(16 26 51 / 4%), 0 12px 28px -10px rgb(22 48 111 / 20%);
  --shadow-3: 0 4px 8px rgb(16 26 51 / 5%), 0 24px 48px -16px rgb(22 48 111 / 28%);
  --glass: color-mix(in srgb, var(--surface) 78%, transparent);
  --tint-a: color-mix(in srgb, var(--primary) 9%, transparent);
  --tint-b: color-mix(in srgb, var(--turq) 12%, transparent);
  --ring: 0 0 0 4px color-mix(in srgb, var(--turq) 22%, transparent);
  --ease-smooth: cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --shadow-1: 0 1px 2px rgb(0 0 0 / 35%);
    --shadow-2: 0 2px 4px rgb(0 0 0 / 30%), 0 14px 30px -12px rgb(0 0 0 / 65%);
    --shadow-3: 0 4px 8px rgb(0 0 0 / 35%), 0 26px 50px -16px rgb(0 0 0 / 75%);
  }
}
:root[data-theme="dark"] {
  --shadow-1: 0 1px 2px rgb(0 0 0 / 35%);
  --shadow-2: 0 2px 4px rgb(0 0 0 / 30%), 0 14px 30px -12px rgb(0 0 0 / 65%);
  --shadow-3: 0 4px 8px rgb(0 0 0 / 35%), 0 26px 50px -16px rgb(0 0 0 / 75%);
}

/* ---------- پایه ---------- */
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
body {
  background:
    radial-gradient(900px 420px at 88% -80px, var(--tint-a), transparent 70%),
    radial-gradient(700px 380px at 8% -60px, var(--tint-b), transparent 70%),
    var(--ground);
  background-repeat: no-repeat;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: color-mix(in srgb, var(--turq) 30%, transparent); }
:focus-visible { outline: 2px solid var(--turq); outline-offset: 3px; border-radius: 6px; }
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }

/* ---------- سربرگ شیشه‌ای ---------- */
.site-header {
  background: var(--glass);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  box-shadow: 0 1px 0 rgb(255 255 255 / 40%) inset;
}
.main-nav a { border-radius: var(--radius-pill); padding: 7px 14px; transition: background 160ms var(--ease-smooth), color 160ms; }
@media (hover: hover) { .main-nav a:hover { background: var(--primary-soft); color: var(--primary); } }
.main-nav a[aria-current="page"] { background: var(--primary-soft); color: var(--primary); font-weight: 800; }
.acct-link { border-radius: var(--radius-pill); }
.brand-name, .brand { letter-spacing: -0.01em; }

/* ---------- دکمه‌ها ---------- */
.btn {
  border-radius: var(--radius-ctl);
  font-weight: 700;
  transition: transform 160ms var(--ease-smooth), box-shadow 200ms var(--ease-smooth), background 160ms, border-color 160ms, color 160ms;
}
.btn-primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 92%, #fff 8%), var(--primary));
  box-shadow: 0 1px 0 rgb(255 255 255 / 18%) inset, 0 6px 16px -6px color-mix(in srgb, var(--primary) 70%, transparent);
}
@media (hover: hover) {
  .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgb(255 255 255 / 20%) inset, 0 10px 22px -8px color-mix(in srgb, var(--primary) 80%, transparent); }
  .btn-ghost:hover { background: var(--primary-soft); border-color: var(--stub-line); }
}
.btn:active { transform: scale(0.97); }
.btn-ghost { background: var(--surface); border: 1px solid var(--line-strong); }
.btn-post { box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--primary) 70%, transparent); }
.btn[disabled], .btn:disabled { opacity: .55; box-shadow: none; transform: none; }

/* ---------- فرم‌ها ---------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea {
  border-radius: var(--radius-ctl);
  border: 1.5px solid var(--line-strong);
  background-color: var(--surface);
  transition: border-color 160ms, box-shadow 200ms var(--ease-smooth);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus, select:focus, textarea:focus {
  border-color: var(--turq); box-shadow: var(--ring); outline: none;
}
@media (hover: hover) { input:not([type="checkbox"]):not([type="radio"]):hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--line-strong)); } }
.field > label, label.lbl { font-weight: 700; color: var(--ink-2); }
.hint { color: var(--muted); }
.pill, .chip, .chips a { transition: background 160ms, border-color 160ms, color 160ms, transform 160ms var(--ease-smooth); }
.alert { border-radius: var(--radius-box); border-width: 1px; box-shadow: var(--shadow-1); }

/* ---------- صفحه اول ---------- */
.hero { padding-block: 28px 6px; }
.hero-inner { max-width: 820px; position: relative; isolation: isolate; }
.hero:not(.is-tg):not(.is-compact) .hero-inner {
  padding: 36px 20px 26px;
  border-radius: 28px;
  background:
    radial-gradient(520px 220px at 85% 0%, color-mix(in srgb, var(--turq) 20%, transparent), transparent 70%),
    radial-gradient(520px 260px at 10% 100%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 70%),
    var(--surface);
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  box-shadow: var(--shadow-2);
}
.hero:not(.is-tg):not(.is-compact) .hero-logo { display: none; }
.hero-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 1.3rem + 3.2vw, 3.3rem); line-height: 1.35; color: var(--stub-ink); margin: 0 0 8px; }
.hero-sub { margin: 0 0 22px; color: var(--muted); font-size: 1.02rem; max-width: 36ch; }
.hero-search {
  border-radius: 18px; padding: 6px; box-shadow: var(--shadow-2); border: 1.5px solid var(--line);
  transition: box-shadow 220ms var(--ease-smooth), border-color 160ms;
}
.hero-search:focus-within { box-shadow: var(--ring), var(--shadow-3); }
.hero-search .btn { border-radius: 14px; }
.hero-search input, .hero-search input:hover, .hero-search input:focus { border: 0; box-shadow: none; background-color: transparent; }
.hero-stats { list-style: none; display: flex; gap: 10px; margin: 18px 0 0; padding: 0; justify-content: center; flex-wrap: wrap; }
.hero-stats li {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 16px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--line); box-shadow: var(--shadow-1);
}
.hero-stats b { font-size: 1.15rem; font-weight: 800; color: var(--stub-ink); font-variant-numeric: tabular-nums; }
.hero-stats span { color: var(--muted); font-size: .88rem; font-weight: 600; }

/* ---------- چیپ‌های دسته ---------- */
.cat-nav .chip-scroll { gap: 8px; padding-block: 6px 10px; }
.cat-nav a {
  display: inline-flex; align-items: center; gap: 7px; border-radius: var(--radius-pill); padding: 8px 15px; min-height: 42px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); font-weight: 700; box-shadow: var(--shadow-1);
}
.cat-nav a i { display: inline-flex; font-style: normal; }
.cat-nav a i .ic { width: 20px; height: 20px; color: var(--turq-ink); }
.cat-nav a > span { background: var(--sunken); color: var(--muted); border-radius: var(--radius-pill); padding: 0 8px; font-size: .78rem; font-variant-numeric: tabular-nums; line-height: 1.7; }
@media (hover: hover) { .cat-nav a:hover { border-color: var(--stub-line); background: var(--primary-soft); transform: translateY(-1px); } }
.cat-nav a[aria-current="page"] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 90%, #fff 10%), var(--primary));
  color: var(--primary-ink); border-color: transparent; box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--primary) 80%, transparent);
}
.cat-nav a[aria-current="page"] i .ic { color: var(--primary-ink); }
.cat-nav a[aria-current="page"] > span { background: rgb(255 255 255 / 20%); color: inherit; }

/* ---------- سرتیتر بخش ---------- */
.section-head { align-items: center; }
.section-title { font-weight: 800; letter-spacing: -0.01em; }
.section-title::before { content: ""; display: inline-block; width: 6px; height: 1.05em; margin-inline-end: 10px; border-radius: 4px; vertical-align: -0.12em; background: linear-gradient(180deg, var(--turq), var(--primary)); }
.more { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; border-radius: var(--radius-pill); padding: 4px 12px; background: var(--primary-soft); color: var(--primary); text-decoration: none; }

/* ---------- کارت آگهی ---------- */
.job {
  position: relative; border-radius: var(--radius-box); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-1);
  transition: transform 220ms var(--ease-smooth), box-shadow 240ms var(--ease-smooth), border-color 160ms;
}
@media (hover: hover) { .job:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--stub-line); } }
.job:active { transform: scale(0.992); }
.job.is-hot::before, .job:has(.urgent-dot)::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: linear-gradient(180deg, #f2a65a, var(--hot)); }
.job-link { align-items: flex-start; gap: 14px; padding: 16px 16px 14px; }
.job-ic {
  flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px;
  background: var(--primary-soft); color: var(--primary);
}
/* هر دسته رنگ خودش را دارد و نماد سفیدِ درشت روی رنگ توپر */
.job-ic { width: 50px; height: 50px; background: var(--turq); color: #fff; }
.job-ic .ic { width: 28px; height: 28px; }
.job-ic.is-dental { background: var(--turq); }
.job-ic.is-medical { background: var(--c4, #e8664a); }
.job-ic.is-admin { background: var(--c5, #5b6cf0); }
.job-ic.is-market { background: var(--c3, #f0b429); color: #1c2433; }
/* ورود آرام آگهی‌ها از پایین به بالا */
@keyframes jobIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.job, .pj { animation: jobIn .6s cubic-bezier(.2,.7,.2,1) backwards; }
.job:nth-child(2), .pj:nth-child(2) { animation-delay: .06s; } .job:nth-child(3), .pj:nth-child(3) { animation-delay: .12s; }
.job:nth-child(4), .pj:nth-child(4) { animation-delay: .18s; } .job:nth-child(5), .pj:nth-child(5) { animation-delay: .24s; }
.job:nth-child(n+6), .pj:nth-child(n+6) { animation-delay: .3s; }
@supports (animation-timeline: view()) { .job, .pj { animation: jobIn linear backwards; animation-timeline: view(); animation-range: entry 0% entry 40%; animation-delay: 0s !important; } }
@media (prefers-reduced-motion: reduce) { .job, .pj { animation: none !important; } }
.job-body { flex: 1; min-width: 0; padding: 0; }
.job-body h3 { font-weight: 800; line-height: 1.55; font-size: 1.02rem; }
.job-meta-line { color: var(--muted); font-size: .9rem; }
.job .pay { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.job .pay-v {
  display: inline-flex; align-items: center; padding: 3px 12px; border-radius: var(--radius-pill);
  background: var(--turq-soft); color: var(--turq-ink); font-weight: 800; font-size: .93rem; font-variant-numeric: tabular-nums;
}
.job .pay-v:empty { display: none; }
.job-ago { color: var(--muted); font-size: .8rem; }
.urgent-dot { border-radius: var(--radius-pill); padding: 1px 9px; font-weight: 800; background: var(--hot-soft); color: var(--hot); border: 1px solid var(--hot-line); }
.job-kind { border-radius: var(--radius-pill); }
.peek-caret { opacity: .5; }

/* ورود نرم کارت‌ها (فقط وقتی حرکت مجاز است) */
@media (prefers-reduced-motion: no-preference) {
  .job-grid > .job, .job-list > .job { animation: card-in 520ms var(--ease-smooth) both; }
  .job-grid > .job:nth-child(2), .job-list > .job:nth-child(2) { animation-delay: 50ms; }
  .job-grid > .job:nth-child(3), .job-list > .job:nth-child(3) { animation-delay: 100ms; }
  .job-grid > .job:nth-child(4), .job-list > .job:nth-child(4) { animation-delay: 150ms; }
  .job-grid > .job:nth-child(n+5), .job-list > .job:nth-child(n+5) { animation-delay: 200ms; }
  @keyframes card-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

/* ---------- صفحه فهرست و فیلتر ---------- */
.filters { border-radius: var(--radius-panel); box-shadow: var(--shadow-1); }
.page-head h1 { font-weight: 800; letter-spacing: -0.01em; }
.crumbs a { border-radius: 6px; }
.empty-box { border-radius: var(--radius-panel); border: 1.5px dashed var(--line-strong); background: color-mix(in srgb, var(--surface) 70%, transparent); }

/* ---------- صفحه آگهی ---------- */
.tags .tag, .tag { border-radius: var(--radius-pill); padding: 3px 12px; }
.admin-page .panel, .contact-box, .apply-box, .job-main .panel, .job-side .panel { border-radius: var(--radius-panel); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-1); }
.job-main .panel { padding: 20px 22px; }
.job-pay { width: fit-content; justify-self: start; align-self: start; display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 16px; border-radius: var(--radius-pill); background: var(--turq-soft); }
.contact-box, .apply-box { box-shadow: var(--shadow-2); }
.job-bar {
  background: var(--glass); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
/* نوار تماس با آگهی‌دهنده: شناور و گرد، درست مثل نوار تب پایین */
@media (max-width: 960px) {
  .job-bar {
    inset-inline: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); width: auto; padding: 8px 10px; border-radius: 26px;
    border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); box-shadow: var(--shadow-3);
    -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
  }
  .job-bar > .btn { border-radius: 18px; }
  body.has-jobbar { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
}
.media-slider, .ms-item img { border-radius: var(--radius-box); }

/* ---------- ثبت آگهی (مرحله‌ای) ---------- */
.wiz-steps { gap: 8px; }
.wiz-step { border-radius: var(--radius-pill); transition: background 200ms, color 200ms; }
.wiz-step[aria-current="step"], .wiz-step.is-on { box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--primary) 70%, transparent); }
.post-form .pill-group .pill, .kind-pills .pill { border-radius: var(--radius-pill); min-height: 42px; }
.wiz-nav .btn { min-height: 50px; }

/* ---------- نوار تب پایین (موبایل) ---------- */
@media (max-width: 899px) {
  .tabbar {
    left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); width: auto; border-radius: 26px;
    background: var(--glass); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
    border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); box-shadow: var(--shadow-3);
  }
  .tab-ind { border-radius: 18px; }
  .tab-post .tab-ic { box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--turq) 80%, transparent); }
  body { padding-bottom: calc(var(--tabbar-h) + 22px); }

}

/* ---------- پاورقی ---------- */
.site-footer { border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 60%, transparent); }
.footer-links a { border-radius: 6px; }

/* ---------- جدول‌ها و کادرها ---------- */
table { border-collapse: separate; border-spacing: 0; }
th { font-weight: 800; color: var(--ink-2); }
tbody tr { transition: background 140ms; }
@media (hover: hover) { tbody tr:hover { background: color-mix(in srgb, var(--primary-soft) 55%, transparent); } }
details { border-radius: var(--radius-ctl); }
summary { cursor: pointer; font-weight: 700; }

/* ==========================================================================
   پنل مدیریت
   ========================================================================== */
.admin-page h1 { font-weight: 800; letter-spacing: -0.015em; }
.admin-page h2 { font-weight: 800; }
.admin-page .panel, .admin-page .stat, .admin-page .ag-grid > * { border-radius: var(--radius-panel); }
.admin-page .kpis, .admin-page .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.admin-page .kpi, .admin-page .stat {
  position: relative; overflow: hidden; display: grid; gap: 2px; align-content: start; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--surface); box-shadow: var(--shadow-1);
  padding: 16px 16px 14px; text-align: start; text-decoration: none; color: inherit; transition: transform 200ms var(--ease-smooth), box-shadow 220ms;
}
.admin-page .kpi::before, .admin-page .stat::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--turq), var(--primary)); opacity: .85; }
@media (hover: hover) { .admin-page .kpi:hover, .admin-page .stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); } }
.admin-page .kpi b, .admin-page .stat b { display: block; font-size: 1.7rem; font-weight: 800; line-height: 1.2; color: var(--stub-ink); font-variant-numeric: tabular-nums; }
.admin-page .kpi span, .admin-page .stat span { color: var(--muted); font-weight: 600; font-size: .88rem; }
.admin-page .kpi small { color: var(--turq-ink); font-weight: 700; }
.admin-page .panel { padding: 20px; }
.admin-page .panel > h2:first-child { margin-top: 0; }
.admin-page table { width: 100%; }
.admin-page th, .admin-page td { padding: 10px 10px; border-bottom: 1px solid var(--line); }
.admin-page thead th { background: var(--sunken); }
.admin-page thead th:first-child { border-start-start-radius: 10px; }
.admin-page thead th:last-child { border-start-end-radius: 10px; }
.admin-page .tag.ok { background: var(--turq-soft); color: var(--turq-ink); }
.admin-page .tag.warn { background: var(--hot-soft); color: var(--hot); }

/* سایدبار پنل */
.admin-nav a, .admin-side a, .admin-menu a {
  border-radius: 12px; transition: background 160ms, color 160ms; position: relative;
}
.admin-nav a[aria-current="page"], .admin-side a[aria-current="page"], .admin-menu a[aria-current="page"] {
  background: var(--primary-soft); color: var(--primary); font-weight: 800;
}
.admin-nav a[aria-current="page"]::before, .admin-side a[aria-current="page"]::before, .admin-menu a[aria-current="page"]::before {
  content: ""; position: absolute; inset-inline-end: -1px; top: 20%; bottom: 20%; width: 4px; border-radius: 4px; background: var(--turq);
}
@media (hover: hover) { .admin-nav a:hover, .admin-side a:hover, .admin-menu a:hover { background: var(--sunken); } }

/* داشبورد و فهرست‌های پنل (صفحه‌های قدیمی‌تر) */
.dash-card, .af, .form-step, .bulk-bar, .auto-del { border-radius: var(--radius-panel); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-1); }
.dash-card { padding: 18px; }
.dash-card h2, .dash-card .q-title { font-weight: 800; }
.dash-grid { gap: 14px; }
.kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.kpi {
  position: relative; overflow: hidden; border-radius: var(--radius-panel); padding: 16px 16px 14px; box-shadow: var(--shadow-1);
  transition: transform 200ms var(--ease-smooth), box-shadow 220ms;
}
.kpi::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--turq), var(--primary)); }
@media (hover: hover) { .kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); } }
.kpi b { font-size: 1.7rem; font-weight: 800; color: var(--stub-ink); font-variant-numeric: tabular-nums; }
.kpi span { font-weight: 600; font-size: .88rem; }
.barlist .bl-bar, .barlist progress { border-radius: 99px; }
.jl { border-radius: var(--radius-panel); border: 1px solid var(--line); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-1); }
.jl-row { transition: background 140ms; }
@media (hover: hover) { .jl-row:hover { background: color-mix(in srgb, var(--primary-soft) 50%, transparent); } }
.status { border-radius: var(--radius-pill); padding: 2px 12px; font-weight: 800; }
.settings-tabs { background: var(--sunken); border-radius: 16px; padding: 5px; display: flex; flex-wrap: wrap; gap: 4px; }
.settings-tabs a { border-radius: 12px; padding: 7px 14px; font-weight: 700; text-decoration: none; transition: background 160ms; }
.settings-tabs a[aria-current="page"], .settings-tabs a.is-on { background: var(--surface); box-shadow: var(--shadow-1); color: var(--primary); }
.step-legend { font-weight: 800; color: var(--stub-ink); }
.admin-bar { border-radius: 14px; }

/* ایجنت */
.agx-tabs { background: color-mix(in srgb, var(--sunken) 90%, transparent); border-radius: 16px; padding: 5px; }
.agx-tabs a { border-radius: 12px; transition: background 160ms, color 160ms, box-shadow 200ms; }
.agx-tabs a[aria-current="page"] { box-shadow: var(--shadow-1); }
.agx-gfx, .ag-grid > * { border-radius: var(--radius-box); box-shadow: var(--shadow-1); transition: transform 200ms var(--ease-smooth), box-shadow 220ms; }
@media (hover: hover) { .agx-gfx:hover, .ag-grid > *:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); } }
.ag-tasks li { border-radius: var(--radius-box); }
.agx-meter { border-radius: 99px; }
.agx-caps li { border-radius: 12px; font-weight: 700; }

/* ---------- حالت تلگرام و موبایل کوچک ---------- */
@media (max-width: 520px) {
  .hero:not(.is-tg):not(.is-compact) .hero-inner { padding: 26px 14px 20px; border-radius: 24px; }
  .hero-sub { font-size: .95rem; margin-bottom: 16px; }
  .job-link { padding: 14px 13px 12px; gap: 12px; }
  .job-ic { width: 42px; height: 42px; border-radius: 12px; }
}
.hero.is-tg .hero-inner { background: none; box-shadow: none; border: 0; padding: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .job, .btn, .cat-nav a, .admin-page .stat { transition: none !important; }
}
@media print { .site-header, .tabbar, .site-footer { display: none !important; } }
.admin-page { padding-top: 18px; }

/* ==========================================================================
   تجربه کاربری: پیام شناور، بارگذاری دکمه، پیش‌نویس، شمارنده، دکمه بالا، نوار آفلاین، نوار نتایج
   ========================================================================== */
.toasts { position: fixed; z-index: 90; inset-inline: 0; bottom: calc(var(--tabbar-h, 0px) + 28px + env(safe-area-inset-bottom)); display: grid; justify-items: center; gap: 8px; pointer-events: none; padding-inline: 16px; }
@media (min-width: 900px) { .toasts { bottom: 28px; } }
.toast {
  pointer-events: auto; max-width: min(92vw, 420px); padding: 11px 18px; border-radius: var(--radius-pill); font-weight: 700; font-size: .93rem;
  background: var(--ink); color: var(--ground); box-shadow: var(--shadow-3); opacity: 0; transform: translateY(12px) scale(.97);
  transition: opacity 220ms var(--ease-smooth), transform 260ms var(--ease-smooth);
}
.toast.is-in { opacity: 1; transform: none; }
.toast-ok { background: var(--turq-ink); color: #fff; }
.toast-error { background: var(--danger); color: #fff; }
.alert.is-gone { opacity: 0; max-height: 0; margin: 0; padding-block: 0; overflow: hidden; border-width: 0; transition: opacity 400ms, max-height 400ms, margin 400ms, padding 400ms; }

.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading > * { visibility: hidden; }
.btn.is-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; border-radius: 50%;
  border: 2.5px solid rgb(255 255 255 / 45%); border-top-color: #fff; animation: spin 700ms linear infinite;
}
.btn-ghost.is-loading::after { border-color: var(--line-strong); border-top-color: var(--primary); }
@keyframes spin { to { transform: rotate(360deg); } }

.char-count { display: block; text-align: end; margin-top: 4px; font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.char-count.is-near { color: var(--hot); font-weight: 700; }
.field.has-error input, .field.has-error select, .field.has-error textarea, [aria-invalid="true"] { border-color: var(--danger) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 16%, transparent); }

.draft-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; padding: 10px 14px; border-radius: var(--radius-box); background: var(--turq-soft); color: var(--turq-ink); font-weight: 700; }
.draft-note .btn { min-height: 36px; padding-block: 4px; }

.to-top {
  position: fixed; z-index: 60; inset-inline-start: 16px; bottom: calc(var(--tabbar-h, 0px) + 28px + env(safe-area-inset-bottom)); width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%; background: var(--glass); color: var(--primary); box-shadow: var(--shadow-2); cursor: pointer;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity 200ms, transform 240ms var(--ease-smooth);
}
@media (min-width: 900px) { .to-top { bottom: 24px; } }
.to-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.has-jobbar .to-top { bottom: calc(var(--tabbar-h, 0px) + 90px); }

.net-bar { position: fixed; z-index: 95; inset-inline: 0; top: 0; padding: 8px 14px; text-align: center; font-weight: 700; font-size: .9rem; background: var(--hot); color: #fff; }

.recent-searches { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; width: 100%; }
.recent-label { color: var(--muted); font-size: .85rem; font-weight: 700; }
.recent-chip, .recent-clear { padding: 4px 12px; border-radius: var(--radius-pill); background: var(--sunken); color: var(--ink-2); font-size: .88rem; text-decoration: none; border: 0; cursor: pointer; font-family: inherit; }
.recent-clear { background: transparent; color: var(--muted); text-decoration: underline; }
@media (hover: hover) { .recent-chip:hover { background: var(--primary-soft); color: var(--primary); } }

.result-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 12px; }
.result-count { margin: 0; color: var(--ink-2); font-weight: 600; }
.result-count b { color: var(--stub-ink); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.sort-form { margin-inline-start: auto; }
.sort-form select { min-height: 40px; padding-block: 4px; font-weight: 700; }
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; width: 100%; }
.active-filters a { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--primary-soft); color: var(--primary); font-weight: 700; font-size: .88rem; text-decoration: none; }
.active-filters a span { font-size: 1.1rem; line-height: 1; opacity: .7; }
.active-filters .clear-all { background: transparent; color: var(--muted); text-decoration: underline; }
.empty-links { list-style: none; margin: 10px 0 14px; padding: 0; display: grid; gap: 6px; }
.empty-links a { display: inline-block; padding: 6px 14px; border-radius: var(--radius-pill); background: var(--primary-soft); color: var(--primary); font-weight: 700; text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .toast, .to-top, .btn.is-loading::after { transition: none; animation-duration: 2s; } }

/* ---------- پنل: انتخاب چیدمان ---------- */
.look-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.look-card { position: relative; display: grid; gap: 4px; padding: 10px; border: 2px solid var(--line); border-radius: var(--radius-box); background: var(--surface); cursor: pointer; }
.look-card input { position: absolute; inset-block-start: 14px; inset-inline-start: 14px; width: 20px; height: 20px; accent-color: var(--primary); }
.look-card img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); background: var(--sunken); }
.look-card small { color: var(--muted); line-height: 1.7; }
.look-card:has(input:checked) { border-color: var(--turq); box-shadow: 0 0 0 3px color-mix(in srgb, var(--turq) 25%, transparent); }

/* ---------- نسخه ۲۶: صفحه آگهی ---------- */
/* عنوان در یک خط (اندازه قلم را app.js تنظیم می‌کند؛ اگر جا نشد دو خط می‌ماند) */
.job-hero h1.is-fit { white-space: nowrap; overflow: hidden; }
/* توضیحات کامل، بدون «ادامه متن»، با فاصله خط کمتر */
.job-desc { line-height: 1.8; gap: 6px; }
.job-desc p { margin: 0; }
/* موبایل: کادر «اطلاعات تماس» تکراری است (نوار پایین صفحه همین کار را می‌کند) */
@media (max-width: 960px) {
  body.has-jobbar .job-side .contact-box:not(.is-shown) { display: none; }
}
/* کادر «ساخت پروفایل و درخواست همکاری»: رنگ جدا و مشخص */
body { --apply: var(--turq); --apply-ink: var(--on-turq); --apply-soft: var(--turq-soft); }
body.lay-divar { --apply: #1f7a5a; --apply-ink: #fff; --apply-soft: #e8f5ee; }
body.lay-rond { --apply: #f5971d; --apply-ink: #01455f; --apply-soft: #fff3e2; }
body .apply-box.panel, body .apply-box { background: var(--apply-soft); border: 1.5px solid color-mix(in srgb, var(--apply) 50%, transparent); }
body .apply-box .btn.btn-primary { background: var(--apply); border-color: var(--apply); color: var(--apply-ink); }
body .apply-box .muted { color: var(--ink-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.lay-divar { --apply-soft: #12291f; } :root:not([data-theme="light"]) body.lay-rond { --apply-soft: #33240f; } }
:root[data-theme="dark"] body.lay-divar { --apply-soft: #12291f; }
:root[data-theme="dark"] body.lay-rond { --apply-soft: #33240f; }

/* ---------- نسخه ۲۶: حساب کاربری ---------- */
.avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; background: var(--sunken); border: 1px solid var(--line); }
.avatar-empty { display: inline-grid; place-items: center; color: var(--muted); }
.avatar-empty .ic { width: 55%; height: 55%; }
.avatar-xs { width: 24px; height: 24px; border: 0; }
.acct-head { display: flex; align-items: center; gap: 14px; }
.acct-head h1 { margin: 0; }
.avatar-row { display: flex; align-items: center; gap: 12px; }
.avatar-row input[type="file"] { flex: 1; min-height: 0; padding: 8px; }
.acct-type { border: 0; padding: 0; margin: 4px 0; display: grid; gap: 10px; }
.acct-type legend { font-weight: 700; color: var(--ink-2); margin-bottom: 6px; padding: 0; }
.acct-type:has(input[value="person"]:checked) .acct-org { display: none; }
.acct-settings { display: grid; gap: 16px; padding-bottom: 40px; }
.acct-settings h2 { font-size: 1.1rem; margin: 0 0 6px; }
.avatar-remove { margin-top: -8px; }
.pw-login { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line-strong); }
.pw-login > summary { cursor: pointer; display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink-2); list-style: none; }
.pw-login > summary::-webkit-details-marker { display: none; }
.pw-login > summary .ic { width: 20px; height: 20px; }
.pw-login .login-form { margin-top: 12px; }
.owner-badge { display: flex; align-items: center; gap: 10px; margin: 2px 0 0; }
.owner-badge .avatar { width: 36px; height: 36px; }
.owner-badge span { display: grid; line-height: 1.5; }
.owner-badge small { color: var(--muted); font-size: .78rem; }

/* ---------- نسخه ۲۶: «درباره استخدام …» پایین صفحه‌ها ---------- */
.cat-info { margin-top: 28px; margin-bottom: 28px; padding: 24px; border-radius: var(--radius-panel); background: var(--surface); border: 1px solid var(--line); }
.cat-info-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.cat-info h2 { margin: 0; font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); color: var(--stub-ink); }
.cat-info-n { padding: 2px 12px; border-radius: 99px; background: var(--primary-soft); color: var(--stub-ink); font-size: .82rem; font-weight: 700; }
.cat-info-about { margin: 10px 0 18px; color: var(--ink-2); line-height: 1.9; max-width: 72ch; }
.cat-info-actions { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; }
.cat-info-actions a { display: flex; align-items: flex-start; gap: 12px; height: 100%; padding: 14px; border-radius: var(--radius-box); background: var(--ground); border: 1px solid transparent; color: var(--ink); text-decoration: none; transition: border-color 160ms ease, transform 160ms ease; }
.cat-info-actions a > span:last-child { display: grid; gap: 2px; }
.cat-info-actions b { font-size: .95rem; }
.cat-info-actions small { color: var(--muted); font-size: .8rem; line-height: 1.7; }
.ci-ic { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--primary-soft); color: var(--stub-ink); }
.ci-ic .ic { width: 22px; height: 22px; }
.cat-info-actions li:first-child .ci-ic { background: var(--apply-soft, var(--turq-soft)); color: var(--apply, var(--turq-ink)); }
@media (hover: hover) { .cat-info-actions a:hover { border-color: color-mix(in srgb, var(--primary) 30%, var(--line)); transform: translateY(-2px); } }
@media (max-width: 640px) { .cat-info { padding: 18px 16px; border-radius: var(--radius-box); } }
.search-note { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 12px; padding: 10px 14px; border-radius: var(--radius-box); background: var(--turq-soft); color: var(--ink-2); font-size: .9rem; line-height: 1.8; } .search-note .ic { flex: none; width: 18px; height: 18px; margin-top: 4px; color: var(--turq-ink); } .search-note a { white-space: nowrap; }

/* ---------- نسخه ۲۷: صفحه «حساب من» ---------- */
.acc { max-width: 920px; display: grid; gap: 16px; padding-top: 24px; padding-bottom: 40px; }
.acc-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); padding: 16px 18px; }
.acc-hero { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 18px; padding: 22px 24px; border-radius: var(--radius-panel); color: #fff;
  background: radial-gradient(circle at 0 0, rgb(255 255 255 / 16%), transparent 55%), linear-gradient(135deg, var(--shell), color-mix(in srgb, var(--shell) 70%, #000)); }
.acc-avatar { width: 84px; height: 84px; border: 3px solid rgb(255 255 255 / 85%); background: rgb(255 255 255 / 15%); color: #fff; }
a.acc-avatar { display: grid; place-items: center; }
.acc-id { flex: 1; min-width: 200px; display: grid; gap: 4px; }
body .acc-id h1 { margin: 0; color: #fff; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); }
.acc-id p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: rgb(255 255 255 / 82%); font-size: .9rem; }
.acc-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 99px; background: rgb(255 255 255 / 16%); color: #fff; font-weight: 700; font-size: .8rem; }
.acc-badge .ic { width: 15px; height: 15px; }
.acc-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.acc-hero-actions form { margin: 0; }
body .acc-hero .btn.btn-ghost { background: rgb(255 255 255 / 12%); border-color: rgb(255 255 255 / 35%); color: #fff; min-height: 40px; }
.acc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.acc-stat { display: grid; justify-items: start; gap: 2px; padding: 14px 16px; border-radius: var(--radius-box); background: var(--surface); border: 1px solid var(--line); }
.acc-stat .ic { width: 20px; height: 20px; color: var(--turq-ink); }
.acc-stat b { font-size: 1.5rem; font-weight: 800; color: var(--stub-ink); font-variant-numeric: tabular-nums; line-height: 1.2; }
.acc-stat span { color: var(--muted); font-size: .8rem; }
.acc-steps-head { display: flex; justify-content: space-between; align-items: baseline; }
.acc-steps-head span { color: var(--muted); font-size: .85rem; }
.acc-bar { display: block; height: 8px; margin: 10px 0 12px; border-radius: 99px; background: var(--sunken); overflow: hidden; }
.acc-bar i { display: block; height: 100%; width: 8%; border-radius: inherit; background: var(--turq); }
.acc-bar i.w1 { width: 33%; } .acc-bar i.w2 { width: 66%; } .acc-bar i.w3 { width: 100%; }
.acc-steps ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.acc-steps li { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; }
.acc-steps li .ic { width: 18px; height: 18px; color: var(--muted); }
.acc-steps li.is-done { color: var(--muted); text-decoration: line-through; }
.acc-steps li.is-done .ic { color: var(--turq-ink); }
.acc-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.acc-tile { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border-radius: var(--radius-box); background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color 160ms ease, transform 160ms ease; }
.acc-tile > span:last-child { display: grid; gap: 2px; }
.acc-tile small { color: var(--muted); font-size: .78rem; line-height: 1.6; }
.acc-ic { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--primary-soft); color: var(--stub-ink); }
.acc-ic .ic { width: 20px; height: 20px; }
.acc-tile.is-main { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.acc-tile.is-main small { color: color-mix(in srgb, var(--primary-ink) 75%, transparent); }
.acc-tile.is-main .acc-ic { background: rgb(255 255 255 / 18%); color: var(--primary-ink); }
@media (hover: hover) { .acc-tile:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--primary) 35%, var(--line)); } }
.acc-section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 8px 0 10px; }
.acc-section-head h2 { margin: 0; font-size: 1.2rem; color: var(--stub-ink); }
.acc-section-head span { color: var(--muted); font-size: .85rem; }
.acc .my-ads { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.acc .my-ad { display: grid; gap: 8px; }
.my-ad-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.my-ad-top b { line-height: 1.7; }
.tag.st-active { background: var(--turq-soft); color: var(--turq-ink); }
.tag.st-pending { background: var(--hot-soft); color: var(--hot); }
.acc .my-ad-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .82rem; }
.acc .my-ad-actions { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding-top: 8px; border-top: 1px dashed var(--line); font-size: .88rem; }
.acc .my-ad-actions a:not(.btn) { display: inline-flex; align-items: center; gap: 4px; }
.acc .my-ad-actions .ic { width: 16px; height: 16px; }
.acc-empty { display: grid; justify-items: center; gap: 8px; padding: 26px 18px; border-radius: var(--radius-panel); background: var(--surface); border: 1px dashed var(--line-strong); text-align: center; }
.acc-empty-ic { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 18px; background: var(--primary-soft); color: var(--stub-ink); }
.acc-empty-ic .ic { width: 28px; height: 28px; }
.acc-empty p { margin: 0; }
.acc-empty-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px; width: 100%; margin-top: 8px; text-align: start; }
.acc-empty-choices a { display: grid; gap: 4px; padding: 14px; border-radius: var(--radius-box); background: var(--ground); color: var(--ink); text-decoration: none; border: 1px solid transparent; }
.acc-empty-choices a:first-child { background: var(--primary-soft); }
.acc-empty-choices b { display: flex; align-items: center; gap: 6px; color: var(--stub-ink); }
.acc-empty-choices b .ic { width: 18px; height: 18px; }
.acc-empty-choices small { color: var(--muted); line-height: 1.7; }
@media (hover: hover) { .acc-empty-choices a:hover { border-color: var(--primary); } }
@media (max-width: 640px) {
  .acc { padding-top: 14px; gap: 12px; }
  .acc-hero { padding: 18px; }
  .acc-avatar { width: 64px; height: 64px; }
  .acc-stats { grid-template-columns: repeat(2, 1fr); }
  .acc-hero-actions { width: 100%; }
  .acc-hero-actions .btn { flex: 1; }
}