/* تم وِفاق — هویت بصری: کرم روشن، بژ، قهوه‌ای عمیق، دارچینی، طلایی مات (تأکیدی)، سبزآبی (تعاملی).
   فونت: Vazirmatn (UI با ارقام فارسی) میزبانی‌شده در assets/fonts؛ مجوز SIL OFL در همان پوشه. */

@font-face {
  font-family: "Vazirmatn";
  src: url("../assets/fonts/Vazirmatn-UI-FD-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("../assets/fonts/Vazirmatn-UI-FD-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("../assets/fonts/Vazirmatn-UI-FD-Bold.woff2") format("woff2");
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* رنگ‌ها: زمینهٔ روشن و آرام؛ تیره فقط برای بخش‌های شاخص */
  --cream: #f7f4eb;
  --paper: #fffdf8;
  --bone: #e5d8c3;
  --sand-line: #d6c6a6;
  --ink: #3e2723;
  --ink-soft: #5b4037;
  --cinnamon: #8c5a3c;
  --gold: #b99a62;
  --teal: #356c68;
  --teal-dark: #284f4c;
  --danger: #9b2c2c;
  --ok: #2f6b43;

  /* فاصله، شعاع، سایه */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --shadow-sm: 0 2px 8px rgba(62, 39, 35, 0.06);
  --shadow: 0 10px 32px rgba(62, 39, 35, 0.09);
  --font: Vazirmatn, "Vazir", Tahoma, "Segoe UI", "Noto Naskh Arabic", sans-serif;
  --container: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 2;
  color: var(--ink);
  background: var(--cream);
  direction: rtl;
  text-align: right;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; }
.container { width: min(var(--container), 100% - 2rem); margin-inline: auto; }

a { color: var(--cinnamon); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  inset-inline-start: 12px;
  top: -60px;
  background: var(--ink);
  color: var(--cream);
  padding: 8px 14px;
  border-radius: 8px;
  z-index: 100;
}
.skip-link:focus { top: 12px; }

/* ---------- سربرگ ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(247, 244, 235, 0.92);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--sand-line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0.75rem 0;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--ink); }
.brand-mark { width: 40px; height: 40px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.3; }
.brand-name { font-size: 1.45rem; font-weight: 800; }
.brand-sub { font-size: 0.8rem; color: var(--cinnamon); }

.nav-toggle {
  display: none;
  background: var(--paper);
  border: 1px solid var(--sand-line);
  color: var(--ink);
  padding: 0.45rem 1rem;
  border-radius: 999px;
  font: inherit;
  cursor: pointer;
  min-height: 44px;
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.site-nav a:hover { background: var(--bone); color: var(--ink); }
.site-nav a[aria-current="page"] { background: var(--ink); color: var(--cream); }

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; align-items: center; }
  .site-nav { display: none; width: 100%; }
  .site-nav.open { display: block; padding-bottom: 0.5rem; }
  .site-nav ul { flex-direction: column; }
  .site-nav a { width: 100%; border-radius: var(--radius-sm); }
}

/* ---------- محتوای اصلی ---------- */
main { padding: var(--space-4) 0 var(--space-5); outline: none; }
h1, h2, h3 { color: var(--ink); line-height: 1.45; font-weight: 800; }
h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 var(--space-2); }
h2 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); margin: var(--space-4) 0 var(--space-2); }
h3 { font-size: 1.15rem; margin: var(--space-2) 0 0.5rem; }
p { margin: 0 0 var(--space-2); }
.lead { font-size: clamp(1.05rem, 2vw, 1.2rem); color: var(--ink-soft); }

.section-kicker {
  display: inline-block;
  font-size: 0.85rem;
  color: var(--teal);
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 0.25rem;
}

/* ---------- صفحهٔ اصلی: معرفی ---------- */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-4);
  align-items: center;
  padding: clamp(2rem, 5vw, 3.5rem);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(160deg, var(--paper) 0%, var(--bone) 140%);
  border: 1px solid var(--sand-line);
  overflow: hidden;
}
.hero h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.35; }
.hero .hero-title-accent { color: var(--cinnamon); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.hero-art { width: 100%; max-width: 380px; justify-self: center; }
.hero-art .stroke { fill: none; stroke: var(--ink); stroke-width: 1.5; opacity: 0.55; }
.hero-art .gold { fill: var(--gold); }
.hero-art .teal { fill: var(--teal); }
.hero-art .soft { fill: var(--sand-line); opacity: 0.6; }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: var(--space-3); }
  .hero-art { max-width: 260px; order: -1; }
}

/* دکمه‌ها */
.btn, .btn-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 46px;
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  background: var(--teal);
  color: var(--paper);
  justify-self: start;
}
.btn:hover, .btn-link:hover { background: var(--teal-dark); }
.btn.secondary, .btn-link.secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.secondary:hover, .btn-link.secondary:hover { background: var(--ink); color: var(--cream); }
.btn:disabled { opacity: 0.6; cursor: progress; }
.btn.small { min-height: 38px; padding: 0.3rem 0.9rem; font-size: 0.9rem; }
.btn.danger { background: #7a2e22; }
.btn.danger:hover { background: #5c2119; }

/* ماژول‌های خدمات: چیدمان نامتقارن، نه کارت‌های یک‌شکل */
.modules {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.module {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.4rem;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--sand-line);
  color: var(--ink);
  text-decoration: none;
  min-height: 170px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.module:nth-child(1) { grid-column: span 3; background: var(--ink); color: var(--cream); border-color: var(--ink); }
.module:nth-child(1) .module-desc { color: var(--bone); }
.module:nth-child(1) .module-cta { color: var(--gold); }
.module:nth-child(4) { grid-column: span 3; background: var(--bone); }
.module:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--gold); }
.module-index { font-size: 0.85rem; color: var(--cinnamon); font-weight: 700; }
.module:nth-child(1) .module-index { color: var(--gold); }
.module-title { font-size: 1.2rem; font-weight: 800; margin: 0; }
.module-desc { color: var(--ink-soft); font-size: 0.95rem; margin: 0; line-height: 1.8; }
.module-cta { margin-top: auto; color: var(--teal); font-weight: 700; font-size: 0.92rem; }

@media (max-width: 860px) {
  .modules { grid-template-columns: 1fr; }
  .module, .module:nth-child(1), .module:nth-child(4) { grid-column: auto; }
}

/* بخش‌های تحریریه‌ای */
.editorial { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-top: var(--space-2); }
.editorial-item { border-top: 2px solid var(--gold); padding-top: var(--space-2); }
.editorial-item h3 { margin-top: 0; }
.editorial-item p { color: var(--ink-soft); font-size: 0.97rem; }
@media (max-width: 860px) { .editorial { grid-template-columns: 1fr; } }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: var(--space-3); } }

/* نوار دعوت پایانی */
.cta-band {
  margin-top: var(--space-5);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border-radius: var(--radius-lg);
  background: var(--ink);
  color: var(--cream);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-3);
  align-items: center;
}
.cta-band h2 { color: var(--cream); margin-top: 0; }
.cta-band p { color: var(--bone); }
.cta-band .btn { background: var(--gold); color: var(--ink); }
.cta-band .btn:hover { background: #cdb07a; }
@media (max-width: 860px) { .cta-band { grid-template-columns: 1fr; } }

/* کارت‌های عمومی (صفحات دیگر) */
.cards { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin-top: var(--space-3); }
.card {
  background: var(--paper);
  border: 1px solid var(--sand-line);
  border-radius: var(--radius);
  padding: 1.25rem;
  text-decoration: none;
  color: inherit;
  display: block;
  box-shadow: var(--shadow-sm);
}
.card:hover { border-color: var(--gold); box-shadow: var(--shadow); }
.card h3 { margin-top: 0; }
.card p { color: var(--ink-soft); margin: 0; font-size: 0.95rem; }
.badge {
  display: inline-block;
  font-size: 0.78rem;
  background: var(--bone);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 2px 11px;
  margin-bottom: 8px;
}
.badge-soft { background: var(--bone); color: var(--ink); }
.badge-draft { background: #fbf1dc; color: #7a5410; border: 1px solid #e8cf96; }

.notice {
  background: var(--bone);
  border-inline-start: 4px solid var(--cinnamon);
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-sm);
  margin: var(--space-2) 0;
  color: var(--ink-soft);
}

/* ---------- فرم ---------- */
form.form { display: grid; gap: 14px; max-width: 640px; }
form.dix-form .dix-submit { width: 100%; min-height: 48px; font-size: 1.05rem; }
form.dix-form .notice { margin: 0; }
form.dix-form { grid-template-columns: minmax(0, 1fr); }
form.dix-form .field, form.dix-form select, form.dix-form input { min-width: 0; max-width: 100%; }
form.dix-form select { width: 100%; text-overflow: ellipsis; }
form.dix-form .check-row { display: flex; align-items: center; gap: 10px; font-weight: 700; }
form.dix-form .check-row input { width: 20px; height: 20px; margin: 0; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 700; }
.field input, .field select, .field textarea {
  font: inherit;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--sand-line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  width: 100%;
}
.field textarea { min-height: 150px; resize: vertical; }
.field .error { color: var(--danger); font-size: 0.9rem; min-height: 1em; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--danger); }
.form-status { min-height: 1.5em; }
.form-status.ok { color: var(--ok); }
.form-status.err { color: var(--danger); }
.row { display: flex; gap: var(--space-1); flex-wrap: wrap; align-items: center; }

/* ---------- تقویم مواعد ---------- */
.deadline-card { border: 1px solid var(--sand-line); border-radius: var(--radius); padding: 1.1rem 1.3rem; background: var(--paper); }
.deadline-card h2 { margin-top: 0; font-size: 1.2rem; }
.deadline-card ul { padding-inline-start: 1.2rem; }
.deadline-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.deadline { border: 1px solid var(--sand-line); border-radius: var(--radius-sm); padding: 0.9rem 1.1rem; background: var(--paper); }
.deadline.overdue { border-inline-start: 4px solid #a33a2a; }
.deadline.today { border-inline-start: 4px solid var(--cinnamon); }
.deadline.done { opacity: 0.6; }
.deadline-head { display: flex; gap: 0.75rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.deadline p { margin: 0.35rem 0; }

/* ---------- ابزارها ---------- */
.tool { background: var(--paper); border: 1px solid var(--sand-line); border-radius: var(--radius); padding: var(--space-3); margin-bottom: var(--space-3); }
.tool h2 { margin-top: 0; font-size: 1.25rem; }
.result { margin-top: var(--space-2); padding: var(--space-2); border-radius: var(--radius-sm); background: var(--bone); }

/* ---------- موت کورت ---------- */
.stepper { list-style: none; padding: 0; margin: var(--space-3) 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-1); }
.stepper li {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-sm);
  background: var(--paper);
  border: 1px solid var(--sand-line);
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.stepper li .num {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--bone); color: var(--ink); font-weight: 800; font-size: 0.85rem; flex: none;
}
.stepper li[aria-current="step"] { border-color: var(--teal); color: var(--ink); }
.stepper li[aria-current="step"] .num { background: var(--teal); color: var(--paper); }
.stepper li.done .num { background: var(--gold); color: var(--ink); }
@media (max-width: 760px) { .stepper { grid-template-columns: 1fr 1fr; } }

.case-panel { background: var(--paper); border: 1px solid var(--sand-line); border-radius: var(--radius); padding: var(--space-3); }
.case-panel ol, .case-panel ul { padding-inline-start: 1.2rem; }
.case-panel li { margin-bottom: 0.5rem; }
.checklist { border: 1px solid var(--sand-line); border-radius: var(--radius-sm); padding: var(--space-2); margin: 0; background: var(--paper); }
.checklist legend { font-weight: 800; padding: 0 0.4rem; }
.check-item { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.35rem 0; cursor: pointer; }
.check-item input { margin-top: 0.55rem; width: 18px; height: 18px; accent-color: var(--teal); flex: none; }

/* ---------- آکادمی و رسانه ---------- */
.lessons { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
.lesson { padding: 0.7rem 1rem; border: 1px solid var(--sand-line); border-radius: var(--radius-sm); background: var(--paper); }
.player { width: 100%; margin: var(--space-2) 0; }

.site-footer {
  background: var(--ink);
  color: var(--bone);
  padding: var(--space-3) 0;
  font-size: 0.92rem;
}
.footer-inner { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.site-footer p { margin: 0; }
.site-footer a { color: var(--gold); }

.loading { color: var(--ink-soft); }
.muted { color: var(--ink-soft); font-size: 0.9rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

.cta-band .btn.secondary.light { color: var(--cream); border-color: var(--cream); background: transparent; }
.cta-band .btn.secondary.light:hover { background: var(--cream); color: var(--ink); }

[hidden] { display: none !important; }
.moot-nav { justify-content: space-between; margin-top: var(--space-3); }
.moot-body { margin-top: var(--space-3); }
.moot-body > * + * { margin-top: var(--space-2); }
.moot .stepper { margin-top: var(--space-3); }

/* چیدمان شش ماژول: ردیف‌ها کامل پر می‌شوند (۶ ستون در دسکتاپ) */
.modules .module:nth-child(1) { grid-column: span 4; }
.modules .module:nth-child(2) { grid-column: span 2; }
.modules .module:nth-child(3),
.modules .module:nth-child(4),
.modules .module:nth-child(5) { grid-column: span 2; }
.modules .module:nth-child(4) { background: var(--bone); }
.modules .module:nth-child(6) { grid-column: span 6; flex-direction: row; align-items: center; gap: 1.5rem; }
.modules .module:nth-child(6) .module-desc { margin: 0; flex: 1; }
.modules .module:nth-child(6) .module-cta { margin: 0; white-space: nowrap; }
.modules .module:nth-child(6) .module-title { margin: 0; white-space: nowrap; }
@media (max-width: 860px) {
  .modules .module:nth-child(n) { grid-column: auto; }
  .modules .module:nth-child(6) { flex-direction: column; align-items: stretch; }
}
.hero + section { margin-top: var(--space-4); }

/* ---------- کارت نتیجهٔ محاسبه‌گرها (الگوی مشترک) ---------- */
.result {
  margin-top: var(--space-2);
  padding: clamp(1.1rem, 3vw, 1.6rem);
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--sand-line);
  box-shadow: var(--shadow-sm);
  direction: rtl;
  overflow-wrap: anywhere;
}
.result-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.result-head h3 { margin: 0; font-size: 1.15rem; }
.status-badge {
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.2rem 0.75rem;
  border-radius: 999px;
  background: var(--bone);
  color: var(--ink-soft);
  white-space: nowrap;
}
.status-badge.ok { background: #dfeee4; color: var(--ok); }
.status-badge.warn { background: #f3e3c4; color: #6b4a12; }
.amount-block {
  margin: var(--space-2) 0;
  padding: 1rem 1.2rem;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--cream);
  display: grid;
  gap: 0.2rem;
}
.amount-label { font-size: 0.9rem; color: var(--gold); }
.amount-value { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 800; letter-spacing: 0; }
.facts { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 0.35rem 1rem; margin: var(--space-2) 0; }
.facts dt { color: var(--ink-soft); overflow-wrap: anywhere; min-width: 0; }
.facts dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; min-width: 0; }
.result h4 { margin: var(--space-2) 0 0.4rem; font-size: 1rem; color: var(--ink-soft); }
.steps { padding-inline-start: 1.4rem; margin: 0; }
.steps li { margin-bottom: 0.35rem; }
.limits { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.limits li {
  padding: 0.6rem 0.9rem;
  border-inline-start: 3px solid var(--gold);
  background: var(--cream);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
}
.result-actions { margin-top: var(--space-2); }


/* تمرین شفاهی موت‌کورت */
.oral-practice { margin-block: var(--space-3); }
.oral-practice > p { max-width: 72ch; }
.oral-controls { align-items: center; flex-wrap: wrap; margin-block: var(--space-2); }
.oral-player { display: block; width: 100%; max-width: 560px; margin-block: var(--space-2); }
.oral-practice a[hidden] { display: none; }

/* داشبورد شخصی */
.dashboard-metrics { margin-block: var(--space-3); }
.dashboard-metric { min-width: 0; }
.dashboard-metric p { margin-block: 0.25rem; }
.dashboard-metric-value { font-size: clamp(1.5rem, 4vw, 2.15rem); line-height: 1.4; font-weight: 800; color: var(--teal-dark); font-variant-numeric: tabular-nums; }
.dashboard-section { margin-block: var(--space-4); }
.dashboard-list { display: grid; gap: var(--space-2); }
.dashboard-row { padding: 1rem 1.2rem; border: 1px solid var(--sand-line); border-radius: var(--radius); background: var(--paper); }
.dashboard-row p { margin-block: 0.35rem; }
.dashboard-row-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.dashboard-progress { display: block; width: 100%; height: 0.75rem; margin-block: 0.65rem; accent-color: var(--teal); }


/* پنل مدیریت محتوا */
.admin-form { display: grid; gap: 1rem; margin-block: var(--space-3); padding: clamp(1rem, 3vw, 1.5rem); }
.admin-field { display: grid; gap: 0.4rem; min-width: 0; color: var(--ink-soft); font-weight: 700; }
.admin-field input, .admin-field textarea, .admin-field select { width: 100%; min-width: 0; border: 1px solid var(--sand-line); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); padding: 0.75rem 0.85rem; font: inherit; font-weight: 400; }
.admin-field textarea { resize: vertical; line-height: 1.8; }
.admin-field input:focus-visible, .admin-field textarea:focus-visible, .admin-field select:focus-visible { outline: 3px solid color-mix(in srgb, var(--teal) 35%, transparent); outline-offset: 1px; }
.admin-content-list { display: grid; gap: var(--space-2); margin-block: var(--space-2); }
.admin-content-row { display: grid; gap: 1rem; padding: 1rem 1.2rem; }
.admin-content-row h3 { margin-block: 0.5rem 0.2rem; }
.admin-content-row p { margin-block: 0.25rem; overflow-wrap: anywhere; }
.admin-actions { flex-wrap: wrap; }
.btn.danger { background: #8b302d; color: #fff; border-color: #8b302d; }
@media (min-width: 760px) { .admin-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-form > .admin-field:nth-of-type(3), .admin-form > .admin-field:nth-of-type(4), .admin-form > .row { grid-column: 1 / -1; } .admin-content-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }

/* ---------- بازطراحی وفاق: داشبورد واکنش‌گرا و ناوبری اپ‌مانند ---------- */
:root {
  --cream: #f8f6ef;
  --paper: #fffdf8;
  --bone: #e9e2d4;
  --sand-line: #ddd8cb;
  --ink: #123c3c;
  --ink-soft: #526a68;
  --cinnamon: #b58b4b;
  --gold: #d5a65d;
  --teal: #147d78;
  --teal-dark: #0d5553;
  --shadow-sm: 0 3px 12px rgba(15, 55, 54, .06);
  --shadow: 0 14px 36px rgba(15, 55, 54, .12);
  --container: 1240px;
}
body { background: var(--cream); color: var(--ink); }
.site-header { background: color-mix(in srgb, var(--cream) 94%, transparent); border-bottom-color: var(--sand-line); }
.header-inner { min-height: 76px; flex-wrap: nowrap; }
.brand-mark { width: 44px; height: 44px; }
.brand-name { color: var(--ink); }
.brand-sub { font-size: .72rem; }
.nav-toggle { display: inline-flex; width: 46px; height: 46px; padding: 11px; flex-direction: column; justify-content: center; gap: 5px; border: 0; background: transparent; order: -1; }
.nav-toggle span { display: block; width: 24px; height: 2px; border-radius: 2px; background: var(--ink); }
.site-nav { position: absolute; inset-inline: 1rem; top: calc(100% + 6px); width: auto; max-width: 360px; margin-inline-start: auto; padding: .6rem; border: 1px solid var(--sand-line); border-radius: 18px; background: var(--paper); box-shadow: var(--shadow); display: none; }
.site-nav.open { display: block; }
.site-nav ul { display: grid; gap: 3px; }
.site-nav a { width: 100%; min-height: 44px; border-radius: 10px; }
.site-nav a[aria-current="page"] { background: var(--teal-dark); }
main.container { padding-top: 1.25rem; padding-bottom: 6rem; }
.home-dashboard { display: grid; gap: 1.35rem; }
.dashboard-hero { position: relative; min-height: 300px; display: flex; align-items: center; overflow: hidden; border-radius: 22px; background: linear-gradient(90deg, rgba(var(--deep-rgb), .05) 0%, rgba(var(--deep-rgb), .25) 36%, rgba(var(--deep-rgb), .97) 68%), url('../assets/images/legal-hero.webp') center/cover no-repeat; box-shadow: var(--shadow-sm); }
.dashboard-hero-copy { width: 54%; margin-inline-start: auto; padding: clamp(1.25rem, 4vw, 3.2rem); color: white; }
.dashboard-hero .section-kicker { color: #eac27f; }
.dashboard-hero h1 { color: white; margin: .2rem 0 .65rem; font-size: clamp(1.7rem, 3vw, 2.45rem); }
.dashboard-hero h1 span { color: #e6b565; }
.dashboard-hero p { color: #f2f3ed; max-width: 58ch; font-size: .98rem; }
.hero-button { background: var(--gold); color: #183c3b; border-color: var(--gold); }
.hero-button:hover { background: #e8c17f; color: #183c3b; }
.dashboard-overview { display: grid; grid-template-columns: 1.35fr .7fr 1fr 1fr; gap: 1rem; }
.overview-card { min-width: 0; padding: 1.15rem; border: 1px solid var(--sand-line); border-radius: 16px; background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm); text-decoration: none; display: flex; flex-direction: column; justify-content: center; gap: .35rem; transition: transform .18s ease, box-shadow .18s ease; }
a.overview-card:hover, .quick-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.overview-card h2 { margin: .2rem 0; font-size: 1.08rem; }
.overview-card p { color: var(--ink-soft); font-size: .9rem; margin: 0; }
.progress-card { display: grid; grid-template-columns: 100px minmax(0,1fr); align-items: center; gap: 1rem; }
.progress-ring { width: 94px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--teal) 0 68%, #dedfd9 68% 100%); position: relative; font-size: 1.2rem; font-weight: 800; }
.progress-ring::before { content: ''; position: absolute; inset: 9px; background: var(--paper); border-radius: inherit; }
.progress-ring span { position: relative; }
.progress-track { height: 8px; margin-top: .7rem; border-radius: 99px; background: #e1e0d8; overflow: hidden; }
.progress-track span { display: block; width: 68%; height: 100%; border-radius: inherit; background: var(--teal); }
.progress-card small { color: var(--ink-soft); font-size: .75rem; display: block; margin-top: .45rem; }
.skill-card { align-items: center; text-align: center; background: linear-gradient(145deg, var(--teal-dark), var(--deep)); color: white; }
.skill-card h2 { color: white; }
.skill-card strong { color: #e8b76b; font-size: 1.15rem; }
.skill-card a { color: #d8eee8; font-size: .8rem; }
.feature-icon { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--gold); border-radius: 50%; font-size: 1.8rem; color: var(--teal); margin-bottom: .3rem; }
.skill-card .feature-icon { color: var(--gold); }
.mini-label { color: var(--teal); font-size: .78rem; font-weight: 700; }
.card-cta { margin-top: auto; background: var(--teal-dark); color: white; border-radius: 99px; text-align: center; padding: .45rem .8rem; font-size: .85rem; }
.practice-card { background: linear-gradient(145deg, var(--paper), var(--bone)); }
.quick-section, .panel { min-width: 0; padding: 1.1rem; border: 1px solid var(--sand-line); border-radius: 17px; background: rgba(255,253,248,.72); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.section-heading h2, .quick-section h2 { margin: 0; font-size: 1.25rem; }
.section-heading a { font-size: .85rem; white-space: nowrap; }
.quick-grid { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: .7rem; }
.quick-tile { min-height: 108px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: .7rem .35rem; text-align: center; text-decoration: none; color: var(--ink); background: linear-gradient(145deg,#f5f2e9,#eeeee5); border: 1px solid #dfded3; border-radius: 13px; font-size: .82rem; font-weight: 700; transition: transform .18s ease, box-shadow .18s ease; }
.quick-icon { font-size: 1.8rem; line-height: 1.2; }
.dashboard-lower { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: stretch; }
.deadline-panel .section-heading { margin-bottom: .3rem; }
.deadline-panel h2, .quote-panel h2 { margin: 0; }
.quote-image { min-height: 190px; display: flex; align-items: end; border-radius: 13px; padding: 1.1rem; margin-bottom: 1rem; background: linear-gradient(0deg,rgba(8,37,37,.92),rgba(8,37,37,.02)), url('../assets/images/legal-hero.webp') center/cover no-repeat; }
.quote-image p { color: white; font-size: 1.08rem; font-weight: 700; max-width: 34ch; margin: 0; }
.learning-cta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; border: 1px solid var(--sand-line); border-radius: 17px; background: linear-gradient(110deg, var(--bone), var(--paper)); }
.learning-cta h2 { margin: 0 0 .3rem; font-size: 1.2rem; }
.learning-cta p { margin: 0; color: var(--ink-soft); }
.bottom-nav { display: none; }
@media (min-width: 861px) { .site-nav { inset-inline-start: 1rem; inset-inline-end: auto; } }
@media (max-width: 1000px) {
  .dashboard-overview { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .quick-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (max-width: 700px) {
  .container { width: min(100% - 1rem, var(--container)); }
  .header-inner { min-height: 64px; padding: .4rem 0; gap: .5rem; }
  .brand { gap: .45rem; }
  .brand-mark { width: 38px; height: 38px; }
  .brand-name { font-size: 1.2rem; }
  .brand-sub { font-size: .61rem; max-width: 175px; }
  .dashboard-hero { min-height: 330px; align-items: end; background-image: linear-gradient(0deg,rgba(var(--deep-rgb),.98) 0%,rgba(var(--deep-rgb),.8) 48%,rgba(var(--deep-rgb),.05) 100%),url('../assets/images/legal-hero.webp'); background-position: center; }
  .dashboard-hero-copy { width: 100%; padding: 1.2rem; }
  .dashboard-hero h1 { font-size: 1.7rem; }
  .dashboard-hero p { font-size: .88rem; }
  .dashboard-overview { grid-template-columns: minmax(0,1fr); gap: .7rem; }
  .progress-card { grid-template-columns: 82px minmax(0,1fr); padding: .9rem; }
  .progress-ring { width: 78px; }
  .skill-card { display: grid; grid-template-columns: auto 1fr; text-align: right; justify-items: start; align-items: center; column-gap: .8rem; }
  .skill-card .feature-icon { grid-row: span 2; }
  .skill-card h2, .skill-card strong { margin: 0; }
  .skill-card a { grid-column: 2; }
  .course-card, .practice-card { min-height: 150px; }
  .quick-section, .panel { padding: .85rem; }
  .quick-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: .45rem; }
  .quick-tile { min-height: 94px; font-size: .72rem; padding: .5rem .2rem; }
  .quick-icon { font-size: 1.5rem; }
  .dashboard-lower { grid-template-columns: minmax(0,1fr); }
  .learning-cta { align-items: stretch; flex-direction: column; padding: 1rem; }
  main.container { padding-top: .7rem; padding-bottom: 6.5rem; }
  .bottom-nav { position: fixed; z-index: 40; inset-inline: 0; bottom: 0; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); padding: .45rem .3rem max(.45rem, env(safe-area-inset-bottom)); background: rgba(var(--deep-rgb), .98); border-top: 1px solid rgba(255,255,255,.15); box-shadow: 0 -5px 24px rgba(13,55,54,.18); }
  .bottom-nav a, .bottom-nav button { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; color: #f5f5ed; text-decoration: none; background: transparent; border: 0; font: inherit; padding: .2rem; cursor: pointer; }
  .bottom-nav a > span, .bottom-nav button > span { font-size: 1.35rem; line-height: 1.35; }
  .bottom-nav small { font-size: .67rem; }
  .bottom-nav [aria-current="page"] .bottom-home, .bottom-nav [aria-current="page"] > span:first-child { color: #143d3b; }
  .bottom-nav a[aria-current="page"] .bottom-home { background: var(--gold); border-radius: 50%; width: 35px; height: 35px; display: grid; place-items: center; margin-top: -13px; border: 3px solid var(--cream); }
  .site-footer { padding-bottom: 5rem; }
}
@media (prefers-reduced-motion: reduce) { .overview-card, .quick-tile { transition: none; } }

/* ---------- پوستهٔ یکپارچهٔ وفاق: مشترک میان تمام ماژول‌ها ---------- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.global-search { display: flex; align-items: center; flex: 1 1 220px; max-width: 430px; min-width: 130px; height: 42px; border: 1px solid #e0ded4; border-radius: 999px; background: rgba(235,233,225,.72); overflow: hidden; }
.global-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); padding: .45rem .9rem; font: inherit; font-size: .82rem; }
.global-search button { border: 0; background: transparent; color: var(--ink); font-size: 1.6rem; width: 44px; height: 42px; cursor: pointer; }
.global-search:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(20,125,120,.12); }
.search-feedback { position: absolute; z-index: 30; inset-inline: 1rem; top: 100%; padding: .65rem 1rem; border: 1px solid var(--sand-line); border-radius: 12px; background: var(--paper); box-shadow: var(--shadow); font-size: .85rem; }
.header-inner { position: relative; }
.site-header { box-shadow: 0 3px 18px rgba(15,55,54,.035); }
.brand-mark { border-radius: 13px; }
/* تمام صفحات ماژول‌ها از یک زبان بصری، کارت‌ها و کنترل‌های یکسان استفاده می‌کنند. */
main.container > :not(.home-dashboard) { min-height: 40vh; }
main.container > :not(.home-dashboard) h1 { padding-bottom: .65rem; border-bottom: 1px solid rgba(20,125,120,.16); }
main.container > :not(.home-dashboard) h2 { margin-top: 1.6rem; }
main.container > :not(.home-dashboard) article,
main.container > :not(.home-dashboard) .panel,
main.container > :not(.home-dashboard) .card,
main.container > :not(.home-dashboard) fieldset,
main.container > :not(.home-dashboard) details,
main.container > :not(.home-dashboard) .notice,
main.container > :not(.home-dashboard) .course-card,
main.container > :not(.home-dashboard) .case-card,
main.container > :not(.home-dashboard) .media-card,
main.container > :not(.home-dashboard) .deadline-card {
  border-radius: 16px;
}
main.container > :not(.home-dashboard) article,
main.container > :not(.home-dashboard) .panel,
main.container > :not(.home-dashboard) fieldset,
main.container > :not(.home-dashboard) details {
  border-color: var(--sand-line);
}
main.container > :not(.home-dashboard) input:not([type="checkbox"]):not([type="radio"]),
main.container > :not(.home-dashboard) select,
main.container > :not(.home-dashboard) textarea {
  max-width: 100%; border: 1px solid #d9d8ce; border-radius: 10px; background: #fffefa; color: var(--ink); font: inherit; padding: .65rem .8rem;
}
main.container > :not(.home-dashboard) button:not(.nav-toggle):not(.global-search button),
main.container > :not(.home-dashboard) .btn,
main.container > :not(.home-dashboard) .btn-link {
  border-radius: 999px;
}
main.container > :not(.home-dashboard) table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: 12px; }
main.container > :not(.home-dashboard) th { background: #e9f0eb; color: var(--teal-dark); }
main.container > :not(.home-dashboard) th, main.container > :not(.home-dashboard) td { padding: .65rem; border-bottom: 1px solid #e4e1d7; text-align: right; }
.site-footer { border-top: 1px solid rgba(18,60,60,.1); background: rgba(255,253,248,.62); }
.bottom-nav { backdrop-filter: blur(14px); }
.bottom-nav [aria-current="page"] { color: #f3c779; }
.bottom-nav button:hover, .bottom-nav a:hover { color: #f3c779; }
@media (min-width: 861px) {
  .header-inner { gap: 1.1rem; }
  .site-nav { inset-inline-start: .5rem; }
  .site-nav ul { max-height: min(72vh, 620px); overflow: auto; }
}
@media (max-width: 860px) {
  .header-inner { flex-wrap: wrap; }
  .global-search { order: 5; flex: 1 0 100%; max-width: none; height: 38px; }
  .global-search button { height: 38px; }
  .site-nav { top: calc(100% + 4px); max-height: 70vh; overflow: auto; }
}
@media (min-width: 701px) {
  .bottom-nav { display: none; }
}
@media (max-width: 700px) {
  .brand-sub { max-width: 150px; }
  .search-feedback { top: calc(100% + 2px); }
  main.container > :not(.home-dashboard) { overflow-wrap: anywhere; }
  main.container > :not(.home-dashboard) table { display: block; overflow-x: auto; }
}

/* ===================================================================
   طراحی یکپارچهٔ وفاق (نسخهٔ طراحی جدید)
   پالت: سبز تیره، سبزآبی، طلایی و کرم — روی همهٔ بخش‌ها اعمال می‌شود.
   =================================================================== */
:root {
  --cream: #f6f3ea;
  --paper: #fffdf7;
  --ink: #163f39;
  --ink-soft: #3d5a55;
  --cinnamon: #1f6f67;
  --gold: #c9a35f;
  --teal: #2b6f67;
  --teal-dark: #134e44;
  --bone: #e7dfcc;
  --sand-line: #d9cfb8;
  --radius: 18px;
  --radius-lg: 24px;
  --shadow: 0 10px 30px rgba(19, 78, 68, 0.1);
  --shadow-sm: 0 2px 10px rgba(19, 78, 68, 0.07);
  --deep: #0d4947;
  --deep-rgb: 13, 73, 71;
}
body { background: var(--cream); color: var(--ink); line-height: 1.9; }
a { color: var(--teal); }
h1, h2, h3 { color: var(--teal-dark); }
.muted { color: var(--ink-soft); margin: 0; }

/* سربرگ */
.site-header { background: rgba(246, 243, 234, 0.96); border-bottom: 1px solid var(--sand-line); box-shadow: none; }
.header-inner { display: flex; align-items: center; gap: .9rem; min-height: 78px; padding: .6rem 0; flex-wrap: nowrap; position: relative; }
.avatar-link { width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--bone); text-decoration: none; font-size: 1.2rem; flex: none; border: 2px solid var(--gold); }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; flex: none; }
.brand-mark { width: 46px; height: 46px; }
.brand-name { font-size: 1.5rem; font-weight: 800; color: var(--teal-dark); }
.brand-sub { font-size: .72rem; color: var(--ink-soft); }
.global-search { flex: 1 1 260px; max-width: 520px; height: 46px; border-radius: 999px; background: #ecebe3; border: 1px solid transparent; margin-inline: auto; }
.global-search button { color: var(--teal-dark); }
.nav-toggle { flex: none; width: 46px; height: 46px; border-radius: 12px; background: var(--paper); border: 1px solid var(--sand-line); box-shadow: var(--shadow-sm); display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; cursor: pointer; padding: 0; }
.nav-toggle span { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--teal-dark); }
.site-nav { }

/* بنر اصلی */
.hero-banner { position: relative; min-height: 300px; border-radius: 22px; overflow: hidden; margin: 1rem 0 1.4rem; background: var(--teal-dark); color: #fff; display: flex; align-items: center; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.hero-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(19,78,68,.96) 0%, rgba(19,78,68,.78) 55%, rgba(19,78,68,.35) 100%); }
.hero-copy { position: relative; z-index: 1; padding: 2rem 2.2rem; max-width: 640px; }
.hero-banner h1 { color: #fff; font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin: 0 0 .4rem; }
.hero-banner .accent, .accent { color: var(--gold); }
.hero-sub { font-size: 1.1rem; margin: 0 0 .5rem; color: #f3ead6; font-weight: 600; }
.hero-desc { margin: 0 0 1.2rem; color: #e4ecea; font-size: .95rem; }
.btn-gold { display: inline-block; background: var(--gold); color: #2a2111; padding: .6rem 1.4rem; border-radius: 999px; font-weight: 700; text-decoration: none; }
.btn-outline-light { display: inline-block; border: 1.5px solid var(--gold); color: #fff; padding: .45rem 1.1rem; border-radius: 999px; text-decoration: none; font-weight: 600; background: transparent; }
.btn-pill { display: inline-block; background: var(--teal); color: #fff; padding: .5rem 1.2rem; border-radius: 999px; font-weight: 700; text-decoration: none; font-size: .9rem; }
.btn-pill:hover, .btn-gold:hover { filter: brightness(1.05); }

/* کارت‌های آمار */
.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat-card { background: var(--paper); border: 1px solid var(--sand-line); border-radius: var(--radius); padding: 1.1rem 1.2rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: .35rem; color: inherit; text-decoration: none; }
.stat-card h2 { font-size: 1.05rem; margin: 0; }
.stat-card .muted { font-size: .9rem; }
.progress-card { flex-direction: row; align-items: center; gap: 1rem; }
.progress-ring { width: 86px; height: 86px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(var(--teal) 0 68%, #e3ded0 68% 100%); position: relative; }
.progress-ring::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--paper); }
.progress-ring span { position: relative; font-weight: 800; color: var(--teal-dark); }
.sample-note { color: var(--ink-soft); font-size: .75rem; }
.level-card { background: var(--teal-dark); color: #fff; align-items: center; text-align: center; justify-content: center; }
.level-card h2, .level-card strong { color: #fff; }
.level-icon { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--gold); color: var(--gold); font-size: 1.6rem; }
.level-card strong { color: var(--gold); font-size: 1.1rem; }
.course-card, .practice-card { justify-content: space-between; }
.mini-label { font-size: .8rem; color: var(--teal); font-weight: 700; }

/* دسترسی سریع */
.block-title { font-size: 1.2rem; margin: 0 0 .8rem; font-weight: 800; }
.quick-section { background: var(--paper); border: 1px solid var(--sand-line); border-radius: var(--radius-lg); padding: 1.2rem; margin-bottom: 1.5rem; }
.quick-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .7rem; }
.quick-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; min-height: 112px; padding: .8rem .4rem; border-radius: 16px; background: #f1ede2; border: 1px solid var(--sand-line); text-decoration: none; color: var(--ink); font-size: .85rem; text-align: center; line-height: 1.5; transition: transform .15s ease, box-shadow .15s ease; }
.quick-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.quick-icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--teal-dark); color: var(--gold); font-size: 1.35rem; }

/* پایین صفحه */
.dashboard-lower { display: grid; grid-template-columns: 1.1fr .9fr; gap: 1rem; margin-bottom: 1.5rem; }
.panel { background: var(--paper); border: 1px solid var(--sand-line); border-radius: var(--radius-lg); padding: 1.2rem; box-shadow: var(--shadow-sm); }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; }
.quote-image { height: 180px; border-radius: 16px; background: linear-gradient(180deg, rgba(19,78,68,.25), rgba(19,78,68,.92)), url('../assets/images/legal-hero.webp') center/cover; display: flex; align-items: flex-end; padding: 1rem; margin-bottom: .9rem; }
.quote-image p { color: #fff; margin: 0; font-weight: 700; }
.learning-cta { position: relative; overflow: hidden; border-radius: 22px; background: var(--teal-dark); color: #fff; padding: 1.4rem 1.6rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border: 0; }
.cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .18; }
.cta-copy { position: relative; }
.learning-cta h2 { color: #fff; margin: 0 0 .2rem; font-size: 1.25rem; }
.learning-cta p { color: #e4ecea; margin: 0; }
.cta-button { position: relative; }

/* نوار پایین موبایل */
.bottom-nav { display: none; position: fixed; inset-inline: 0; bottom: 0; z-index: 30; background: var(--teal-dark); grid-template-columns: repeat(5, 1fr); align-items: end; padding: .4rem .3rem .5rem; box-shadow: 0 -6px 20px rgba(19,78,68,.2); }
.bottom-nav a, .bottom-nav button { display: flex; flex-direction: column; align-items: center; gap: .1rem; color: #d7e4e0; text-decoration: none; font: inherit; font-size: .72rem; background: transparent; border: 0; cursor: pointer; padding: .3rem 0; }
.bottom-nav span[aria-hidden] { font-size: 1.25rem; }
.bottom-nav [aria-current="page"] { color: var(--gold); }
.bottom-home { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #2a2111; font-size: 1.7rem; margin-top: -26px; box-shadow: 0 4px 14px rgba(0,0,0,.25); }

@media (max-width: 1100px) { .quick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 960px) { .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dashboard-lower { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .header-inner { flex-wrap: wrap; min-height: 0; gap: .6rem; padding: .5rem 0; }
  .avatar-link { width: 40px; height: 40px; }
  .brand { order: 1; }
  .avatar-link { order: 2; margin-inline-start: auto; }
  .nav-toggle { order: 3; }
  .brand-mark { width: 36px; height: 36px; }
  .brand-name { font-size: 1.25rem; }
  .brand-sub { font-size: .6rem; }
  .global-search { order: 4; flex: 1 0 100%; max-width: none; margin-inline: 0; height: 42px; }
  .nav-toggle { width: 42px; height: 42px; }
  .hero-banner { min-height: 280px; }
  .hero-copy { padding: 1.3rem; }
  .hero-banner h1 { font-size: 1.6rem; }
  .quick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
  .quick-tile { min-height: 96px; font-size: .72rem; padding: .6rem .2rem; }
  .quick-icon { width: 40px; height: 40px; font-size: 1.15rem; }
  .stat-row { grid-template-columns: minmax(0, 1fr); }
  .progress-card { flex-direction: row; }
  .bottom-nav { display: grid; }
  body { padding-bottom: 92px; }
  .site-footer { margin-bottom: 0; }
}

/* لوگوی رسمی وِفاق */
.brand-logo { height: 74px; width: auto; display: block; }
.brand { padding: 0; }
.footer-logo { width: 96px; height: auto; display: block; margin-bottom: .6rem; }
@media (max-width: 700px) { .brand-logo { height: 58px; } }

/* ---------- پانوشت: کنتراست و چیدمان ---------- */
.site-footer { background: var(--paper); border-top: 1px solid var(--sand-line); color: var(--ink); margin-top: 2.5rem; padding: 1.6rem 0 2.2rem; }
.site-footer .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.site-footer p { margin: 0; color: var(--ink-soft); font-size: .92rem; }
.site-footer a { color: var(--teal-dark); font-weight: 600; }
.site-footer .footer-logo { margin: 0; width: 84px; }

/* ---------- ناوبری دسکتاپ: نوار افقی زیر سربرگ ---------- */
@media (min-width: 861px) {
  .nav-toggle, #bottom-more { display: none; }
  .header-inner { flex-wrap: wrap; }
  .site-nav { position: static; display: block !important; order: 7; flex: 1 0 100%; max-width: none; border: 0; box-shadow: none; background: transparent; padding: 0 0 .6rem; inset: auto; }
  .site-nav ul { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center; }
  .site-nav a { width: auto; min-height: 36px; padding: .35rem .6rem; border-radius: 999px; font-size: .88rem; display: inline-flex; align-items: center; color: var(--teal-dark); text-decoration: none; }
  .site-nav a:hover { background: var(--bone); }
  .site-nav a[aria-current="page"] { background: var(--teal-dark); color: #fff; }
}

/* ---------- سربرگ: لوگو و نام گروه در یک ردیف، چیدمان راست‌چین ---------- */
.header-inner { direction: rtl; }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--teal-dark); min-width: 0; }
.brand-logo { width: auto; height: 60px; flex: none; }
.brand-text { display: block; font-size: .95rem; font-weight: 700; line-height: 1.6; color: var(--teal-dark); white-space: nowrap; text-align: right; }
.brand-text strong { color: var(--gold); font-weight: 800; }
@media (max-width: 700px) {
  .brand-logo { height: 50px; }
  .brand-text { font-size: .8rem; line-height: 1.5; white-space: normal; max-width: 230px; text-align: right; }
  .site-header .container.header-inner { gap: .5rem; }
}
@media (max-width: 380px) { .brand-text { max-width: 200px; font-size: .74rem; } }
.site-footer .footer-inner { justify-content: center; text-align: center; flex-direction: column; }
.site-footer .footer-logo { margin: 0 auto .4rem; }

/* ---- Oral practice recorder (mockup: timer, red button, waveform) ---- */
.rec-card { text-align: center; display: grid; justify-items: center; gap: var(--space-2); padding-block: var(--space-4); }
.rec-card .rec-title { margin: 0; }
.rec-card .rec-lead { margin: 0; max-width: 60ch; }
.rec-timer { font-size: 2.25rem; font-weight: 700; font-variant-numeric: tabular-nums; direction: ltr; letter-spacing: .05em; color: var(--text, #1f2933); }
.rec-wave { display: flex; align-items: center; justify-content: center; gap: 4px; height: 64px; width: 100%; max-width: 420px; direction: ltr; }
.rec-wave span { display: block; width: 4px; height: 6px; border-radius: 2px; background: var(--accent, #7a1f2b); opacity: .85; transition: height .08s linear; }
.rec-controls { display: grid; place-items: center; }
.rec-button { width: 84px; height: 84px; border-radius: 50%; border: 6px solid #fff; background: #d62828; box-shadow: 0 0 0 2px #d62828; display: grid; place-items: center; cursor: pointer; padding: 0; }
.rec-button:hover { background: #b71c1c; }
.rec-button:focus-visible { outline: 3px solid var(--focus, #1a73e8); outline-offset: 3px; }
.rec-button:disabled { opacity: .55; cursor: wait; }
.rec-dot { display: block; width: 26px; height: 26px; border-radius: 50%; background: #fff; }
.rec-button.recording .rec-dot { border-radius: 4px; width: 24px; height: 24px; }
.rec-button.recording { animation: rec-pulse 1.2s ease-in-out infinite; }
@keyframes rec-pulse { 0%, 100% { box-shadow: 0 0 0 2px #d62828; } 50% { box-shadow: 0 0 0 10px rgba(214, 40, 40, .18); } }
.rec-hint { margin: 0; }
.rec-status { margin: 0; min-height: 1.5em; }
.rec-card .oral-player { margin-inline: auto; }
.rec-card .oral-controls { justify-content: center; }
.rec-privacy { font-size: .9rem; margin: 0; max-width: 60ch; }
@media (prefers-reduced-motion: reduce) { .rec-button.recording { animation: none; } }

/* ---- فرم ثبت‌نام چندمرحله‌ای ---- */
.reg-form { max-width: 720px; gap: 18px; }
.reg-form .field input:not([type="checkbox"]):not([type="radio"]), .reg-form select, .reg-form textarea { width: 100%; }
.reg-form .field input[type="checkbox"], .reg-form .field input[type="radio"] { width: auto; }
.reg-progress { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.reg-step { display: grid; justify-items: center; gap: 4px; font-size: .85rem; color: var(--ink-soft); text-align: center; }
.reg-step-num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--sand-line); background: var(--paper); font-weight: 700; }
.reg-step.current { color: var(--ink); font-weight: 700; }
.reg-step.current .reg-step-num { background: var(--teal); color: var(--cream); border-color: var(--teal); }
.reg-step.done .reg-step-num { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.reg-bar { height: 6px; border-radius: 6px; background: var(--sand-line); overflow: hidden; }
.reg-bar > span { display: block; height: 100%; background: var(--teal); transition: width .3s ease; }
.reg-heading { font-size: 1.25rem; margin: 0; outline: none; }
.reg-step-body { border: 0; margin: 0; padding: 0; display: grid; gap: 14px; min-width: 0; }
.reg-step-body[hidden], .license-fields[hidden], .reg-actions [hidden] { display: none !important; }
.reg-step-body > .field-label, .field-label { font-weight: 700; margin: 6px 0 0; }
.reg-form .field-hint { font-size: .85rem; margin: 0; }
.reg-form .req { color: var(--danger); }
.reg-form .error { color: var(--danger); font-size: .9rem; min-height: 1em; margin-top: -6px; }
.license-fields { display: grid; gap: 14px; padding: 14px; border-radius: var(--radius); background: var(--cream); border: 1px dashed var(--sand-line); }
.chip-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1.5px solid var(--sand-line); border-radius: 999px; background: var(--paper); cursor: pointer; font-size: .95rem; user-select: none; }
.chip:has(input:checked) { background: var(--teal); color: var(--cream); border-color: var(--teal); }
.chip:has(input:focus-visible) { outline: 3px solid var(--teal-dark); outline-offset: 2px; }
.chip input { margin: 0; accent-color: var(--teal); }
.chip.confirm { border-radius: var(--radius); background: var(--cream); color: var(--ink); }
.chip.confirm:has(input:checked) { background: var(--cream); color: var(--ink); border-color: var(--teal); }
.choice-cards { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.card-choice { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1.5px solid var(--sand-line); border-radius: var(--radius); background: var(--paper); cursor: pointer; }
.card-choice:has(input:checked) { border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); background: var(--cream); }
.card-choice:has(input:focus-visible) { outline: 3px solid var(--teal-dark); outline-offset: 2px; }
.card-choice input { margin: 0; accent-color: var(--teal); }
.segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1.5px solid var(--teal); border-radius: var(--radius); overflow: hidden; }
.seg { position: relative;  display: grid; place-items: center; padding: 10px 6px; cursor: pointer; background: var(--paper); text-align: center; }
.seg + .seg { border-inline-start: 1.5px solid var(--teal); }
.seg:has(input:checked) { background: var(--teal); color: var(--cream); font-weight: 700; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg:has(input:focus-visible) { outline: 3px solid var(--teal-dark); outline-offset: -3px; }
.reg-actions { display: flex; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.reg-actions .btn { min-width: 120px; }
.review-summary { display: grid; gap: 0; margin: 0; border: 1px solid var(--sand-line); border-radius: var(--radius); background: var(--paper); overflow: hidden; }
.review-row { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--sand-line); }
.review-row:last-child { border-bottom: 0; }
.review-row dt { font-weight: 700; color: var(--ink-soft); }
.review-row dd { margin: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 560px) {
  .review-row { grid-template-columns: 1fr; gap: 2px; }
  .reg-step-title { font-size: .75rem; }
  .reg-step-num { width: 28px; height: 28px; }
  .segmented { grid-template-columns: 1fr; }
  .seg + .seg { border-inline-start: 0; border-top: 1.5px solid var(--teal); }
  .reg-actions .btn { flex: 1 1 auto; min-height: 48px; }
}

/* ---- پوسته‌های رنگی: سبز (پیش‌فرض، همان مقادیر :root پایانی)، سرمه‌ای و مدادی.
   انتخاب با ویژگی data-theme روی <html> اعمال می‌شود (js/theme.js). ---- */
:root[data-theme="navy"] {
  --cream: #f3f5fa;
  --paper: #ffffff;
  --bone: #e2e7f1;
  --sand-line: #cdd5e3;
  --ink: #1b2a4a;
  --ink-soft: #3d4b68;
  --cinnamon: #3f5a8a;
  --gold: #b8943f;
  --teal: #2c4a7c;
  --teal-dark: #1c3257;
  --shadow-sm: 0 2px 8px rgba(27, 42, 74, 0.07);
  --shadow: 0 10px 30px rgba(27, 42, 74, 0.1);
  --deep: #1c3257;
  --deep-rgb: 28, 50, 87;
}
:root[data-theme="pencil"] {
  --cream: #f3f3f1;
  --paper: #fbfbfa;
  --bone: #e4e4e1;
  --sand-line: #cdcdc8;
  --ink: #2e2e2e;
  --ink-soft: #5a5a57;
  --cinnamon: #6b6b66;
  --gold: #9c8a6a;
  --teal: #4b4b48;
  --teal-dark: #2f2f2d;
  --shadow-sm: 0 2px 8px rgba(46, 46, 46, 0.07);
  --shadow: 0 10px 30px rgba(46, 46, 46, 0.1);
  --deep: #2f2f2d;
  --deep-rgb: 47, 47, 45;
}

/* ---- آیکون هدر و انتخاب پوسته در فوتر ---- */
.brand-icon { width: 30px; height: 30px; flex: none; color: var(--teal); }
.theme-picker {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;
  border: 0; margin: 0 0 12px; padding: 0;
}
.theme-picker legend { font-size: 0.85rem; color: var(--ink-soft); padding: 0 0 6px; float: inline-start; }
.theme-picker button {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 4px 12px; border-radius: 999px;
  border: 1.5px solid var(--sand-line); background: var(--paper); color: var(--ink);
  font: inherit; font-size: 0.85rem; cursor: pointer;
}
.theme-picker button[aria-pressed="true"] { border-color: var(--teal); box-shadow: 0 0 0 2px var(--teal) inset; }
.theme-picker button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.swatch { width: 14px; height: 14px; border-radius: 50%; display: inline-block; border: 1px solid rgba(0,0,0,.15); }
.swatch-green { background: #134e44; }
.swatch-navy { background: #1b2a4a; }
.swatch-pencil { background: #4b4b48; }

/* فهرست کارت‌های آیکونی آکادمی (فقط مقصدهای واقعی) */
.academy-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin: 1.25rem 0 1.75rem; }
.academy-tool { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem; min-height: 104px; padding: .8rem .5rem; border-radius: 16px; background: var(--paper); border: 1px solid var(--sand-line); box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none; text-align: center; font-size: .9rem; font-weight: 700; line-height: 1.5; transition: transform .15s ease, box-shadow .15s ease; }
.academy-tool:hover, .academy-tool:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow); }
.academy-tool-icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--deep); color: var(--gold); font-size: 1.3rem; }
@media (max-width: 700px) { .academy-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; } .academy-tool { min-height: 96px; font-size: .82rem; } }
@media (prefers-reduced-motion: reduce) { .academy-tool { transition: none; } }

/* تقویم شمسی عمومی (بدون ورود) */
.calendar-card { background: var(--paper); border: 1px solid var(--sand-line); border-radius: var(--radius-lg); padding: 1rem; box-shadow: var(--shadow-sm); display: grid; gap: .75rem; }
.calendar-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.calendar-title { margin: 0; font-size: 1.1rem; }
.calendar-card .cal-nav { min-height: 40px; font-size: .85rem; }
.calendar-grid-wrap { overflow-x: auto; }
.calendar-table { width: 100%; border-collapse: separate; border-spacing: 4px; table-layout: fixed; min-width: 280px; }
.calendar-table th { font-size: .75rem; font-weight: 700; color: var(--ink-soft); padding: .3rem 0; }
.calendar-table td { height: 40px; text-align: center; border-radius: 10px; }
.calendar-table td.cal-empty { background: transparent; }
.calendar-table td.cal-day { background: #f1ede2; font-size: .9rem; }
.calendar-table td.cal-today { background: var(--deep); color: var(--gold); font-weight: 800; }
.calendar-note { font-size: .82rem; margin: 0; }
.calendar-card .cal-today-btn { justify-self: center; width: auto; min-width: 120px; }
.calendar-table th { letter-spacing: 0; }

/* موت‌کورت با هوش مصنوعی و دستیار وکیل */
.oral-log, .assistant-log { list-style: none; padding: 0; margin: 0 0 .75rem; display: grid; gap: .5rem; max-height: 360px; overflow-y: auto; }
.oral-log li, .assistant-log li { padding: .6rem .75rem; border-radius: 12px; background: #f1ede2; border: 1px solid var(--sand-line); }
.oral-log .oral-user, .assistant-log .assistant-user { background: var(--paper); }
.pre-wrap { white-space: pre-wrap; }
.assistant-output { display: grid; gap: .6rem; margin-top: 1rem; }
.assistant-output textarea, .oral-ai textarea, .assistant-workspace textarea { width: 100%; }
.oral-ai .row, .assistant-workspace .row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* ---------- دستیار وکیل: چیدمان گفت‌وگو (موبایل تک‌ستونه، دسکتاپ با فهرست گفت‌وگو) ---------- */
.ai-shell { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); margin-top: 8px; }
.ai-main { display: flex; flex-direction: column; min-width: 0; min-height: 440px; background: var(--paper); border: 1px solid var(--sand-line); border-radius: var(--radius-sm, 12px); overflow: hidden; }
.ai-side { min-width: 0; }
.ai-threads { background: var(--paper); border: 1px solid var(--sand-line); border-radius: var(--radius-sm, 12px); padding: 10px 12px; }
.ai-threads summary { cursor: pointer; font-weight: 600; min-height: 40px; display: flex; align-items: center; }
.ai-thread-list { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; max-height: 280px; overflow-y: auto; }
.ai-thread-item { display: flex; gap: 6px; align-items: center; }
.ai-thread-open { flex: 1 1 auto; min-width: 0; text-align: start; background: var(--bone); border: 1px solid transparent; border-radius: 10px; padding: 8px 10px; font: inherit; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 40px; color: var(--ink); }
.ai-thread-open[aria-current="true"] { border-color: var(--gold); }
.ai-thread-del { background: none; border: 0; color: var(--cinnamon); cursor: pointer; font: inherit; min-height: 40px; padding: 0 6px; }
.ai-thread-status { font-size: .85rem; margin: 0; }
.ai-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--sand-line); }
.ai-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; background: var(--bone); border-radius: 999px; padding: 3px; max-width: 100%; }
.ai-seg-btn { border: 0; background: transparent; padding: 6px 12px; border-radius: 999px; font: inherit; cursor: pointer; color: var(--ink-soft); min-height: 38px; }
.ai-seg-btn[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm); }
.ai-doc-picker { display: flex; gap: 6px; align-items: center; font-size: .9rem; min-width: 0; max-width: 100%; }
.ai-doc-picker select { min-width: 0; max-width: 100%; }
.ai-doc-picker[hidden] { display: none; }
.ai-stream { flex: 1 1 auto; overflow-y: auto; padding: 16px; max-height: 58vh; min-height: 240px; }
.ai-log { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ai-msg { max-width: 94%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--sand-line); background: var(--paper); min-width: 0; }
.ai-msg-user { justify-self: end; background: var(--bone); }
.ai-msg-ai { justify-self: start; }
.ai-role { display: block; font-size: .78rem; color: var(--ink-soft); margin-bottom: 4px; font-weight: 600; }
.ai-text { line-height: 1.9; overflow-wrap: anywhere; margin: 0; }
.ai-msg-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.ai-mini { padding: 4px 10px; font-size: .82rem; min-height: 34px; }
.ai-notes { margin: 8px 0 0; padding-inline-start: 1.2rem; font-size: .9rem; color: var(--ink-soft); }
.ai-disclaimer { font-size: .85rem; margin: 8px 0 0; }
.ai-pending { justify-self: start; color: var(--ink-soft); font-size: .95rem; }
.ai-empty { display: grid; gap: 14px; padding: 6px 2px; }
.ai-empty[hidden] { display: none; }
.ai-suggestions { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-suggestion { text-align: start; min-height: 44px; white-space: normal; }
.ai-composer { border-top: 1px solid var(--sand-line); padding: 12px; display: grid; gap: 8px; background: var(--paper); }
.ai-input { width: 100%; box-sizing: border-box; resize: vertical; min-height: 84px; max-height: 260px; font: inherit; padding: 10px 12px; border: 1px solid var(--sand-line); border-radius: 10px; background: #fff; }
.ai-composer-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ai-counter { margin-inline-start: auto; font-size: .82rem; }
.ai-send { min-width: 110px; min-height: 44px; }
.ai-attachment { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--bone); padding: 6px 10px; border-radius: 10px; font-size: .9rem; }
.ai-attachment[hidden] { display: none; }
.ai-status { margin: 0; font-size: .9rem; min-height: 1.2em; }
@media (min-width: 900px) {
  .ai-shell { grid-template-columns: 260px minmax(0, 1fr); align-items: start; }
  .ai-threads { position: sticky; top: 90px; }
  .ai-main { height: min(78vh, 760px); min-height: 0; }
  .ai-stream { max-height: none; }
}
@media (max-width: 899px) {
  .ai-threads { position: static; }
  .ai-main { min-height: 0; }
  .ai-stream { min-height: 220px; max-height: 52vh; }
}

/* جلسهٔ شبیه‌سازی دادگاه */
.hearing-setup { display: grid; gap: .6rem; }
.hearing-setup label { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.hearing { display: grid; gap: .75rem; min-width: 0; }
.hearing-banner { margin: 0; padding: .75rem .9rem; border-radius: 14px; background: var(--deep); color: var(--gold); font-weight: 800; font-size: .95rem; line-height: 1.6; }
.hearing-steps { list-style: none; margin: 0; padding: .25rem 0; display: flex; gap: .4rem; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.hearing-step { flex: 0 0 auto; scroll-snap-align: start; display: flex; align-items: center; gap: .35rem; padding: .35rem .6rem; border-radius: 999px; border: 1px solid var(--sand-line); background: var(--paper); font-size: .78rem; white-space: nowrap; color: var(--ink-soft); }
.hearing-step .num { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #e8e4d6; font-weight: 800; font-size: .7rem; }
.hearing-step.done { color: var(--ink); }
.hearing-step.done .num { background: var(--teal); color: #fff; }
.hearing-step.current { border-color: var(--gold); color: var(--ink); font-weight: 800; box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 35%, transparent); }
.hearing-step.current .num { background: var(--gold); color: var(--deep); }
.hearing-log { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; max-height: 420px; overflow-y: auto; padding-inline-end: .25rem; }
.hearing-line { padding: .6rem .8rem; border-radius: 14px; background: #f1ede2; border: 1px solid var(--sand-line); border-inline-start: 4px solid var(--sand-line); line-height: 1.8; font-size: .92rem; overflow-wrap: anywhere; }
.hearing-line.clerk { border-inline-start-color: var(--ink-soft); }
.hearing-line.judge { border-inline-start-color: var(--gold); }
.hearing-line.plaintiff { border-inline-start-color: var(--teal); }
.hearing-line.defendant { border-inline-start-color: var(--cinnamon); }
.hearing-line strong { display: inline-block; margin-inline-end: .25rem; }
.hearing-input { display: grid; gap: .5rem; }
.hearing-input textarea { width: 100%; }
.hearing-audio { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.hearing-audio label { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; }
.hearing .row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
@media (prefers-reduced-motion: reduce) { .hearing-steps { scroll-behavior: auto; } }

/* اتاق دادگاه: صفحهٔ تمام‌صفحه بدون منوی عمومی سایت */
body.immersive .site-header, body.immersive .bottom-nav, body.immersive .site-footer, body.immersive .skip-link { display: none !important; }
body.immersive { padding-bottom: 0; background: var(--cream); }
body.immersive main.container { width: 100%; max-width: none; padding: 0; margin: 0; }
.court-page { min-height: 100vh; display: flex; flex-direction: column; color: var(--ink); }
.court-topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem 1rem; background: var(--paper); border-bottom: 1px solid var(--sand-line); }
.court-back { color: var(--deep); font-weight: 700; text-decoration: none; font-size: .9rem; white-space: nowrap; }
.court-title { display: grid; text-align: center; min-width: 0; }
.court-title strong { font-size: 1rem; color: var(--deep); }
.court-title small { color: var(--ink-soft); font-size: .75rem; }
.court-ai-state { font-size: .78rem; padding: .25rem .6rem; border-radius: 999px; background: #e6efe9; color: var(--deep); white-space: nowrap; }
.court-holder { padding: 1rem; max-width: 640px; width: 100%; margin: 0 auto; }
.court-holder.in-session { max-width: none; padding: 0; }
.court { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 1rem; padding: 1rem; align-items: start; }
.court-side { display: grid; gap: .75rem; min-width: 0; }
.court-side-card { background: var(--paper); border: 1px solid var(--sand-line); border-radius: 16px; padding: .9rem 1rem; box-shadow: var(--shadow-sm); min-width: 0; }
.court-side-card h2 { font-size: .98rem; margin: 0 0 .5rem; color: var(--deep); }
.court-case-name { font-weight: 800; margin: 0 0 .5rem; }
.court-facts { display: grid; grid-template-columns: auto 1fr; gap: .3rem .6rem; margin: 0; font-size: .85rem; line-height: 1.7; }
.court-facts dt { color: var(--ink-soft); }
.court-facts dd { margin: 0; overflow-wrap: anywhere; }
.court-note { font-size: .75rem; margin: .5rem 0 0; }
.court-stages { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.court-stage { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--ink-soft); padding: .3rem .4rem; border-radius: 10px; }
.court-stage-num { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; font-size: .72rem; font-weight: 800; background: #e8e4d6; color: var(--ink-soft); }
.court-stage.done { color: var(--ink); }
.court-stage.done .court-stage-num { background: var(--teal); color: #fff; }
.court-stage.current { background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--ink); font-weight: 800; }
.court-stage.current .court-stage-num { background: var(--deep); color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 40%, transparent); }
.court-main { display: grid; gap: .75rem; min-width: 0; padding-bottom: 6rem; }
.court-banner { margin: 0; padding: .7rem .9rem; border-radius: 14px; background: var(--deep); color: var(--gold); font-weight: 800; line-height: 1.6; font-size: .95rem; overflow-wrap: anywhere; }
.court-seats { display: grid; gap: .6rem; padding: 1rem; border-radius: 20px; background: linear-gradient(180deg, #efe6d4, #e3d6bd); border: 1px solid var(--sand-line); }
.court-seat-row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.court-seat { display: grid; justify-items: center; gap: .15rem; padding: .6rem .5rem; border-radius: 16px; background: var(--paper); border: 2px solid transparent; text-align: center; min-width: 0; font-size: .85rem; transition: border-color .2s ease, box-shadow .2s ease; }
.court-seat strong { font-size: .92rem; }
.court-seat small { color: var(--ink-soft); font-size: .75rem; overflow-wrap: anywhere; }
.court-seat.speaking { border-color: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 25%, transparent); }
.court-seat.you { background: #e6efe9; }
.court-avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--deep); color: var(--gold); font-weight: 800; font-size: 1.05rem; }
.court-pill { font-size: .7rem; padding: .15rem .5rem; border-radius: 999px; background: #efeade; color: var(--ink-soft); }
.court-seat.speaking .court-pill { background: var(--gold); color: var(--deep); font-weight: 800; }
.court-seat.you .court-pill { background: var(--teal); color: #fff; }
.court-tabs { display: flex; gap: .4rem; border-bottom: 1px solid var(--sand-line); }
.court-tab { border: 0; background: transparent; padding: .55rem .9rem; font: inherit; font-weight: 700; color: var(--ink-soft); cursor: pointer; border-bottom: 3px solid transparent; }
.court-tab[aria-selected="true"] { color: var(--deep); border-bottom-color: var(--gold); }
.court-panel { background: var(--paper); border: 1px solid var(--sand-line); border-radius: 16px; padding: .8rem; min-width: 0; }
.court-panel[hidden] { display: none; }
.court-log { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; max-height: 46vh; overflow-y: auto; min-width: 0; }
.court-line { padding: .6rem .8rem; border-radius: 14px; background: #f5f1e7; border: 1px solid var(--sand-line); border-inline-start: 4px solid var(--sand-line); min-width: 0; }
.court-line.judge { border-inline-start-color: var(--gold); }
.court-line.plaintiff { border-inline-start-color: var(--teal); background: #e9f3f1; }
.court-line.defendant { border-inline-start-color: var(--cinnamon); }
.court-line.clerk { border-inline-start-color: var(--ink-soft); }
.court-line-head { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--ink-soft); flex-wrap: wrap; }
.court-line-head strong { color: var(--ink); }
.court-line-head time { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.court-line-play { border: 1px solid var(--sand-line); background: var(--paper); border-radius: 999px; width: 32px; height: 32px; cursor: pointer; font: inherit; }
.court-line p { margin: .3rem 0 0; line-height: 1.85; overflow-wrap: anywhere; }
.court-report { line-height: 1.8; overflow-wrap: anywhere; }
.court-input { display: grid; gap: .5rem; background: var(--paper); border: 1px solid var(--sand-line); border-radius: 16px; padding: .8rem; min-width: 0; }
.court-input textarea { width: 100%; min-width: 0; }
.court-input-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.court-mic { border: 1px solid var(--sand-line); background: #fff; border-radius: 999px; padding: .5rem .9rem; font: inherit; font-weight: 700; cursor: pointer; }
.court-mic.recording { background: #b3261e; color: #fff; border-color: #b3261e; }
.court-mic-state { font-size: .8rem; color: var(--ink-soft); }
.court-audio { position: fixed; inset-inline: 0; bottom: 0; z-index: 6; display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; justify-content: space-between; padding: .6rem 1rem; background: var(--deep); color: #f5f1e7; box-shadow: 0 -6px 18px rgb(0 0 0 / .18); }
.court-audio-info { display: grid; gap: .1rem; min-width: 0; font-size: .85rem; }
.court-audio-label { font-size: .72rem; color: var(--gold); }
.court-audio-status { margin: 0; overflow-wrap: anywhere; }
.court-audio-info .court-mic-state { color: #d7e3dc; }
.court-audio-controls { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.court-audio .btn, .court-audio .btn.secondary { min-height: 40px; }
.court-audio .btn.secondary { background: transparent; color: #f5f1e7; border-color: #f5f1e7; }
.court-audio .court-next { background: var(--gold); color: var(--deep); border: 0; }
.court-audio select, .court-audio .court-speed { min-height: 40px; border-radius: 10px; padding: .2rem .4rem; }
.court-volume-wrap, .court-toggle { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; }
.court-volume { width: 110px; accent-color: var(--gold); }
@media (max-width: 860px) {
  .court { grid-template-columns: minmax(0, 1fr); padding: .6rem; }
  .court-side { order: 2; }
  .court-stages { display: flex; overflow-x: auto; gap: .35rem; padding-bottom: .25rem; -webkit-overflow-scrolling: touch; }
  .court-stage { flex: 0 0 auto; border: 1px solid var(--sand-line); white-space: nowrap; background: var(--paper); }
  .court-seats { padding: .6rem; }
  .court-seat { padding: .45rem .3rem; font-size: .78rem; }
  .court-avatar { width: 36px; height: 36px; }
  .court-audio { padding: .5rem .6rem; }
  .court-volume { width: 80px; }
  .court-main { padding-bottom: 9rem; }
}
@media (prefers-reduced-motion: reduce) { .court-seat { transition: none; } }

.pre-wrap { white-space: pre-wrap; }


/* ---------- تقویم مواعد: تمام‌صفحه در موبایل ---------- */
@media (max-width: 899px) {
  .deadlines-page .calendar-card {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    border-inline: 0;
    border-radius: 0;
    box-shadow: none;
    padding: .75rem 1rem 1.25rem;
    gap: .9rem;
    background: var(--paper);
  }
  .deadlines-page .calendar-grid-wrap { overflow: visible; }
  main.container .deadlines-page .calendar-table { display: table; min-width: 0; width: 100%; border-spacing: 6px; overflow: visible; border-radius: 0; }
  main.container .deadlines-page .calendar-table th,
  main.container .deadlines-page .calendar-table td { padding: 0; border: 0; }
  .deadlines-page .calendar-table th { font-size: .8rem; }
  .deadlines-page .calendar-table td { height: 54px; font-size: 1rem; border-radius: 12px; }
  .deadlines-page .calendar-card .cal-nav { min-height: 44px; font-size: .9rem; padding-inline: 1rem; }
  .deadlines-page .calendar-title { font-size: 1.15rem; }
}

.brand-en { display: block; font-size: .7rem; font-weight: 500; color: var(--ink-soft); direction: ltr; text-align: left; letter-spacing: .02em; }

/* ---------- ثبت‌نام: فشرده در موبایل ---------- */
@media (max-width: 899px) {
  .reg-form { padding-inline: .25rem; }
  .reg-form .choice-cards { grid-template-columns: 1fr 1fr; gap: 6px; }
  .reg-form .card-choice { padding: 9px 10px; min-height: 48px; font-size: .9rem; line-height: 1.5; align-items: center; }
  .reg-form .chip-grid { gap: 6px; }
  .reg-form .chip { padding: 6px 11px; font-size: .88rem; min-height: 38px; }
  .reg-form .segmented { grid-template-columns: repeat(3, 1fr); }
  .reg-form .seg { padding: 9px 4px; font-size: .88rem; }
  .reg-form .field-label, .reg-form .reg-step-body > .field-label { font-size: .95rem; }
}

/* ---------- بانک پرونده‌ها: جست‌وجو، فیلتر و استنادها ---------- */
.case-filters { display: grid; gap: 8px; grid-template-columns: 1fr; margin: .5rem 0 .25rem; }
.case-filters input, .case-filters select { min-height: 44px; }
@media (min-width: 720px) { .case-filters { grid-template-columns: 2fr 1.5fr 1fr; } }
.legal-refs { padding-inline-start: 1.1rem; display: grid; gap: 6px; }
.legal-refs li { line-height: 1.8; }
.legal-refs .badge { margin: 0 6px; }

/* ---- تقویم: روز قابل‌کلیک، شمارش مواعد و روز انتخابی ----
   فقط دکمهٔ روز flex است؛ خودِ td باید table-cell بماند، وگرنه ارتفاع ردیف‌ها کشیده می‌شود. */
.calendar-table button.cal-day {
  width: 100%; min-height: 44px; margin: 0; padding: 4px 0; border: 0; border-radius: 10px;
  background: #f1ede2; color: inherit; font: inherit; font-size: .9rem; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.calendar-table button.cal-day.cal-today { background: var(--deep); color: var(--gold); font-weight: 800; }
.calendar-table button.cal-day.cal-selected { outline: 2px solid var(--gold); outline-offset: 1px; }
.calendar-table button.cal-day:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.calendar-table .cal-mark {
  font-size: .65rem; line-height: 1.4; padding: 0 .4rem; border-radius: 999px;
  background: var(--gold); color: var(--deep); font-weight: 700;
}
.deadline-edit-area { margin-block: 1rem; }
.deadline-edit-area .form { margin-block-end: 0; }
.deadline-time-note { margin: 0; }
label.check-row { display: flex; align-items: center; gap: 10px; font-weight: 700; cursor: pointer; line-height: 1.8; }
label.check-row > input[type=checkbox] { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; }
label.check-row > span { min-width: 0; flex: 1 1 auto; word-break: keep-all; overflow-wrap: break-word; }

/* =====================================================================
   سیستم طراحی: اندازه‌ها و فاصله‌های واحد برای صفحات داخلی
   این بلوک آخرِ فایل است تا بر قواعد قبلی اولویت داشته باشد.
   اصول: دکمه‌های کم‌ارتفاع، گوشهٔ ملایم به‌جای قرص کامل، کادر سبک، بدون فضای خالی اجباری.
   ===================================================================== */
:root {
  --ds-radius-control: 12px;
  --ds-radius-panel: 14px;
  --ds-btn-h: 42px;
  --ds-btn-h-small: 36px;
}

/* دکمه‌ها: ارتفاع و گردی یکسان؛ دکمه‌های ناوبری و تقویم جدا می‌مانند */
.btn, .btn-link {
  min-height: var(--ds-btn-h);
  padding: 0.5rem 1.1rem;
  border-radius: var(--ds-radius-control);
  font-size: 0.95rem;
  line-height: 1.4;
}
.btn.small { min-height: var(--ds-btn-h-small); padding: 0.3rem 0.8rem; font-size: 0.88rem; border-radius: 10px; }
.btn.secondary, .btn-link.secondary { border-color: rgba(31, 36, 33, 0.35); }

/* صفحات داخلی: حذف فضای خالی اجباری پایین کوتاه‌ترین صفحه‌ها */
main.container > :not(.home-dashboard) { min-height: 0; }

/* کادرها و کارت‌ها: گوشهٔ ملایم‌تر، فاصلهٔ داخلی متعادل */
main.container > :not(.home-dashboard) .panel,
main.container > :not(.home-dashboard) article,
main.container > :not(.home-dashboard) fieldset,
main.container > :not(.home-dashboard) details { border-radius: var(--ds-radius-panel); }
main.container > :not(.home-dashboard) .card { border-radius: var(--ds-radius-panel); }

/* اطلاعیه‌ها: سبک‌تر و کم‌حجم‌تر */
.notice { padding: 0.7rem 0.95rem; font-size: 0.93rem; line-height: 1.8; }

/* نوار ابزارهای محاسبه‌گر: دکمه‌ها کوچک و کنار هم */
.tool-toolbar { gap: 0.5rem; margin-block: 0.75rem; }
.tool-toolbar .btn { min-height: var(--ds-btn-h-small); padding: 0.3rem 0.8rem; font-size: 0.88rem; border-radius: 10px; }

/* لینک بازگشت صفحات ابزار: متن ساده به‌جای دکمهٔ بزرگ */
.tool-back { display: inline-block; margin-bottom: 0.5rem; font-size: 0.9rem; color: var(--teal); font-weight: 700; text-decoration: none; }
.tool-back:hover { text-decoration: underline; }

/* فاصلهٔ تیترهای داخلی: تیتر صفحه با خط جداکننده، بدون تکرار در بخش ابزار */
main.container > :not(.home-dashboard) h2 { margin-top: 1.2rem; font-size: clamp(1.2rem, 2.4vw, 1.5rem); }

/* در موبایل: پدینگ‌های کمتر برای جلوگیری از فضای خالی زیاد */
@media (max-width: 560px) {
  main.container > :not(.home-dashboard) .panel,
  main.container > :not(.home-dashboard) article,
  main.container > :not(.home-dashboard) .card { padding: 0.9rem; }
  .btn, .btn-link { padding: 0.45rem 0.9rem; }
  .tool-toolbar .btn { flex: 1 1 auto; }
}
/* تیتر اول هر کادر بدون فاصلهٔ بالای اضافه */
:is(.panel, .case-panel, .card, .form, .calendar-card, .deadline-card, fieldset) > h2:first-child,
:is(.panel, .case-panel, .card, .form, .calendar-card, .deadline-card, fieldset) > legend:first-child + h2 { margin-top: 0; }
/* نوار پایین موبایل: دکمهٔ خانهٔ برجسته حدود ۲۶ پیکسل بالاتر از نوار است؛ فضای پایین صفحه باید آن را هم پوشش دهد */
@media (max-width: 860px) {
  body { padding-bottom: 7.5rem; }
  .site-footer { padding-bottom: 2rem; }
}

/* ---- فاصلهٔ تیتر داخل کارت‌ها: فاصلهٔ بالای بخش‌های صفحه نباید به تیتر کارت منتقل شود ---- */
main.container > :not(.home-dashboard) .card h2,
main.container > :not(.home-dashboard) .panel h2,
main.container > :not(.home-dashboard) .notice h2 { margin-top: 0; }