:root {
  /* پالت رسمی برند بهرویش (استخراج‌شده از فایل لوگو — برای تغییر فقط همین کدها را جایگزین کنید)
     #5762A8 نیلی (رنگ اصلی) · #F7941D نارنجی · #9ACA3C لیمویی · #0DB14B سبز · #353D63 سرمه‌ای تیره · #F4D16E زرد ملایم */
  --primary: #5762A8;
  --primary-dark: #414C8C;
  --green: #0A8F3C;
  --red: #CE4A3F;
  --amber: #E08A12;
  --bg: #F6F7FB;
  --card: #ffffff;
  --text: #231F20;
  --muted: #6B7280;
  --border: #E3E6EF;
  --radius: 14px;
  --shadow: 0 2px 14px rgba(53, 61, 99, 0.10);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/*: قلم جانشین سامانه (وزیرمتن در `assets/fonts.css` سراسری تعریف شده و متغیر است،
 *  پس وزن‌های ۴۰۰/۷۰۰/۹۰۰ واقعی‌اند و قلم مصنوعی نمی‌شود).
 *  توجه: «بی‌میترا/FarMitra» عمداً قلم سایت نیست؛ فقط در تکمیل خودکار PDF فرم‌های
 *  رسمی به‌کار می‌رود (`tools/fill_form.py`). */
@font-face { font-family: 'IranianSans'; src: url('/assets/fonts/IranianSans.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; }
html { font-size: 15px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: 'Vazirmatn', 'IranianSans', Tahoma, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.8;
}
a { color: var(--primary); text-decoration: none; }
input, select, textarea {
  font-family: inherit;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.95rem;
  background: #fff;
  color: var(--text);
  transition: border .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.15);
}
label { display: block; font-weight: 500; font-size: 0.88rem; margin-bottom: 6px; color: #33415c; }
label .req { color: var(--red); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; cursor: pointer; font-family: inherit;
  font-weight: 700; font-size: 0.95rem;
  padding: 11px 26px; border-radius: 10px;
  background: var(--primary); color: #fff;
  transition: background .15s, transform .1s;
}
.btn:hover { background: var(--primary-dark); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-lg { padding: 14px 38px; font-size: 1.05rem; border-radius: 12px; }
.btn-sm { padding: 6px 14px; font-size: 0.85rem; border-radius: 8px; }
.btn-block { width: 100%; }
.btn-green { background: var(--green); } .btn-green:hover { background: #147a53; }
.btn-red { background: var(--red); } .btn-red:hover { background: #b03636; }
.btn-outline { background: transparent; border: 1.5px solid var(--primary); color: var(--primary); }
.btn-outline:hover { background: rgba(47, 111, 237, 0.08); }
.btn-light { background: #fff; color: var(--primary); }
.btn-light:hover { background: #eef3fe; }
.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px;
  border: 1px solid var(--border);
}
.topbar { background: #fff; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; }
/*: اول-موبایل: بالای صفحه روی گوشی جمع‌وجورتر است */
.topbar-inner { max-width: 1100px; margin: auto; padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
@media (min-width: 721px) { .topbar-inner { padding: 12px 20px; gap: 14px; } }
.brand { font-weight: 900; font-size: 1.35rem; color: var(--text); }
.brand-logo { display: inline-flex; align-items: center; gap: 8px; }
.brand-mark { height: 30px; width: auto; display: block; }
.brand b { color: var(--primary); }
.topnav { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.chip {
  background: #eef3fe; color: var(--primary-dark);
  padding: 4px 14px; border-radius: 99px; font-size: 0.85rem; font-weight: 500;
}
.imp-banner {
  background: #fff7e0; border-bottom: 1px solid #f0d68a; color: #7a5b00;
  padding: 8px 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 0.9rem;
}
.imp-banner button { border: 1px solid #d9b23c; }

/* ---------- landing ---------- */
.hero {
  background: linear-gradient(135deg, #1e4fb8 0%, #2f6fed 55%, #4d8bff 100%);
  color: #fff;
  text-align: center;
  padding: 84px 20px 72px;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: ''; position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(600px 260px at 80% 10%, rgba(255,255,255,.14), transparent 60%),
              radial-gradient(500px 300px at 12% 90%, rgba(255,255,255,.12), transparent 60%);
}
.hero h1 { font-size: 2.4rem; font-weight: 900; margin-bottom: 14px; position: relative; z-index: 1; }
.hero p { font-size: 1.12rem; opacity: .95; max-width: 640px; margin: 0 auto 32px; position: relative; z-index: 1; }
.hero .btn-light { font-size: 1.1rem; padding: 15px 42px; box-shadow: 0 8px 24px rgba(0,0,0,.18); position: relative; z-index: 1; }
.features { max-width: 1000px; margin: -34px auto 0; padding: 0 20px 60px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; position: relative; z-index: 2; }
.feature-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; border: 1px solid var(--border); }
.feature-card h3 { margin-bottom: 6px; font-size: 1.02rem; color: var(--primary-dark); }
.feature-card p { color: var(--muted); font-size: 0.92rem; }
.landing-footer { text-align: center; padding: 24px; color: var(--muted); font-size: .9rem; }

/* ================= صفحه ورود (Landing) ================= */
/* پالت برند: با کدهای رسمی مؤسسه جایگزین کنید — همه‌جا از همین متغیرها استفاده می‌شود */
:root {
  /* توکن‌های صفحه ورود — برگرفته از پالت رسمی بهرویش */
  --brand: #5762A8;          /* نیلی — رنگ اصلی برند */
  --brand-dark: #414C8C;
  --brand-deep: #353D63;     /* سرمه‌ای تیره لوگو */
  --brand-soft: #EBEEF9;     /* نیلی بسیار روشن */
  --accent: #F7941D;         /* نارنجی برند (برای زمینه و دکمه) */
  --accent-text: #B8640C;    /* نارنجی خوانا برای متن روی زمینه روشن */
  --lime-text: #5E7C1C;      /* لیمویی خوانا برای متن روی زمینه روشن */
  --accent-soft: #FDEDD8;
  --apricot: #F4D16E;        /* زرد ملایم لوگو */
  --sage: #9ACA3C;           /* لیمویی برند */
  --sage-soft: #F1F7E2;
  --olive: #0DB14B;          /* سبز برند */
  --olive-deep: #0A8F3C;
  --lime: #EAF5D0;
  --cream: #FBF3DF;
  --ink: #231F20;
  --slate: #667085;
  --mist: #F6F7FB;
  --line: #E3E6EF;
}
.lp { background: #fff; color: var(--ink); }
.lp a { text-decoration: none; }
.lp-skip { position: absolute; inset-inline-start: -9999px; top: 8px; background: var(--brand); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.lp-skip:focus { inset-inline-start: 12px; }
.lp :focus-visible { outline: 3px solid rgba(87,98,168,.35); outline-offset: 2px; border-radius: 6px; }

.lp-header { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.lp-header-inner { max-width: 1180px; margin: auto; padding: 10px 20px; display: flex; align-items: center; gap: 18px; }
.lp-brand { display: flex; align-items: center; gap: 10px; }
.lp-logo-img { height: 52px; width: auto; display: block; }
.lp-logo-img-sm { height: 88px; }
.lp-logo-fallback { display: flex; align-items: center; gap: 10px; }
.lp-logo { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-weight: 900; font-size: 1.05rem; color: #fff; background: linear-gradient(140deg, var(--brand) 0%, var(--brand-deep) 100%); box-shadow: 0 6px 18px rgba(87,98,168,.30); }
.lp-brand-text { display: flex; flex-direction: column; line-height: 1.35; }
.lp-brand-text b { font-size: 1.12rem; color: var(--ink); }
.lp-brand-text em { font-style: normal; font-size: .72rem; color: var(--slate); }
.lp-nav { display: flex; gap: 16px; flex-wrap: wrap; order: 3; width: 100%; margin-inline-start: 0; }
.lp-nav a { color: var(--slate); font-size: .92rem; padding: 6px 2px; border-bottom: 2px solid transparent; }
.lp-nav a:hover { color: var(--brand); border-bottom-color: var(--brand); }
.lp-header-cta { display: flex; gap: 8px; flex-wrap: wrap; }

.lp-hero { background: linear-gradient(180deg, #EFF2FB 0%, #FBF6EA 55%, #fff 100%); padding: 54px 20px 34px; }
.lp-hero-grid { max-width: 1180px; margin: auto; display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
.lp-eyebrow { display: inline-block; background: #fff; border: 1px solid var(--line); color: var(--brand); font-size: .8rem; padding: 6px 12px; border-radius: 999px; margin-bottom: 14px; }
.lp-hero h1 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); line-height: 1.45; font-weight: 900; margin-bottom: 14px; letter-spacing: -.2px; }
.lp-hero h1 span { color: var(--accent-text); }
.lp-lead { font-size: 1.06rem; line-height: 2; color: var(--slate); max-width: 620px; margin-bottom: 16px; }
.lp-promises { margin: 0 0 22px; padding: 0; list-style: none; display: grid; gap: 8px; }
.lp-promises li { font-size: .95rem; color: var(--ink); display: flex; gap: 8px; align-items: center; }
.lp-promises li::before { content: '✓'; width: 20px; height: 20px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: .7rem; flex: none; }
.lp-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.lp-trust { display: flex; gap: 14px; flex-wrap: wrap; font-size: .8rem; color: var(--slate); }
.lp-trust span { display: flex; align-items: center; gap: 6px; }
.lp-trust span::before { content: '●'; color: var(--olive); font-size: .6rem; }

.lp-hero-visual { min-width: 0; }
.lp-mock { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 40px rgba(53,61,99,.10); padding: 18px; }
.lp-mock-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.lp-mock-chips { display: grid; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.lp-chipline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .84rem; background: var(--mist); border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; }
.lp-chipline b { font-weight: 700; }
.lp-chipline .lp-chip { margin-inline-start: auto; }
.lp-mock-steps { display: grid; gap: 8px; }
.lp-mock-step { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--slate); }
.lp-mock-step .lp-dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; background: var(--mist); color: var(--slate); border: 1px solid var(--line); flex: none; }
.lp-mock-step.done .lp-dot { background: var(--sage); border-color: var(--brand); color: #fff; }
.lp-mock-step.active .lp-dot { background: var(--accent-soft); border-color: var(--accent); color: #8A5310; }
.lp-mock-step.done .lp-mock-title { color: var(--ink); font-weight: 700; }
.lp-mock-step.active .lp-mock-title { color: #8a5a09; font-weight: 700; }
.lp-progress { height: 8px; border-radius: 999px; background: var(--mist); margin: 14px 0 10px; overflow: hidden; }
.lp-progress span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand) 0%, var(--sage) 100%); }
.lp-mock-foot { font-size: .78rem; color: var(--slate); }
.lp-chip { font-size: .7rem; padding: 3px 9px; border-radius: 999px; background: var(--mist); color: var(--slate); border: 1px solid var(--line); }
.lp-chip-ok { background: var(--sage-soft); color: #3F6A17; border-color: #C9CEE8; }

.lp-stats { max-width: 1180px; margin: -6px auto 0; padding: 0 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.lp-stat { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; text-align: center; box-shadow: 0 6px 18px rgba(53,61,99,.05); }
.lp-stat b { display: block; font-size: 1.9rem; color: var(--brand); line-height: 1.2; }
.lp-stat:nth-child(2n) b { color: var(--olive-deep); }
.lp-stat:nth-child(3n) b { color: var(--accent-text); }
.lp-stat span { font-size: .84rem; color: var(--slate); }

.lp-section { max-width: 1180px; margin: auto; padding: 56px 20px; scroll-margin-top: 80px; }
.lp-alt { max-width: none; background: var(--mist); }
.lp-alt > * { max-width: 1180px; margin-inline: auto; }
.lp-section-head { margin-bottom: 26px; }
.lp-section-head h2 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); margin-bottom: 8px; }
.lp-section-head p { color: var(--slate); font-size: .96rem; line-height: 1.95; max-width: 760px; }

.lp-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lp-tl-item { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.lp-tl-item .lp-chip { grid-column: 2; justify-self: start; }
.lp-tl-item.soon { background: #FCFDFD; }
.lp-tl-num { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-weight: 900; background: var(--brand-soft); color: var(--primary-dark); }
.lp-tl-item.soon .lp-tl-num { background: var(--cream); color: var(--slate); }
.lp-tl-body b { font-size: 1rem; }
.lp-tl-who { font-size: .76rem; color: var(--lime-text); margin-inline-start: 8px; }
.lp-tl-body p { margin: 6px 0 0; font-size: .88rem; color: var(--slate); line-height: 1.9; }

.lp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.lp-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px; transition: transform .16s, box-shadow .16s; }
.lp-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(53,61,99,.09); }
.lp-card-icon { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 1.2rem; background: var(--sage-soft); margin-bottom: 10px; }
.lp-card b { display: block; margin-bottom: 6px; color: var(--brand-deep); }
.lp-card p { margin: 0; font-size: .88rem; color: var(--slate); line-height: 1.9; }
.lp-two-wings { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 18px; }
.lp-wing { border: 1px dashed var(--sage); background: #fff; border-radius: 16px; padding: 16px 18px; }
.lp-wing b { color: var(--brand-dark); }
.lp-wing ul { margin: 10px 18px 0; padding: 0; color: var(--slate); font-size: .88rem; line-height: 2; }

.lp-doc-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.lp-doc-list li { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; font-size: .9rem; display: flex; gap: 8px; align-items: center; }
.lp-doc-list li span { color: var(--lime-text); font-weight: 900; }
.lp-doc-more { background: var(--accent-soft) !important; border-color: #F6D9AE !important; color: #8A5310; }
.lp-doc-note { font-size: .82rem; color: var(--slate); }

.lp-faq { display: grid; gap: 10px; }
.lp-faq-item { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 4px 16px; }
.lp-faq-item summary { cursor: pointer; padding: 12px 0; font-weight: 700; font-size: .95rem; }
.lp-faq-item p { margin: 0 0 14px; color: var(--slate); font-size: .89rem; line-height: 2; }

.lp-cta { max-width: 1180px; margin: 0 auto 40px; padding: 30px 26px; border-radius: 20px; background: linear-gradient(135deg, var(--brand-deep) 0%, var(--brand) 60%, #7E88C4 100%); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.lp-cta h2 { font-size: clamp(1.2rem, 2.2vw, 1.6rem); margin-bottom: 6px; }
.lp-cta p { margin: 0; opacity: .92; font-size: .92rem; }

.lp-footer { border-top: 1px solid var(--line); background: var(--mist); padding: 40px 20px 18px; scroll-margin-top: 80px; }
.lp-footer-grid { max-width: 1180px; margin: auto; display: grid; grid-template-columns: 1fr; gap: 26px; }
.lp-brand-footer { margin-bottom: 10px; }
.lp-footer-about { font-size: .85rem; color: var(--slate); line-height: 2; margin: 0; }
.lp-footer-title { display: block; margin-bottom: 10px; font-size: .92rem; color: var(--ink); }
.lp-footer a, .lp-footer span:not(.lp-logo):not(.lp-brand-text) { display: block; font-size: .86rem; color: var(--slate); margin-bottom: 7px; }
.lp-footer a:hover { color: var(--brand); }
.lp-footer-note { font-size: .78rem !important; }
.lp-footer-bottom { max-width: 1180px; margin: 26px auto 0; padding-top: 14px; border-top: 1px solid var(--line); text-align: center; font-size: .82rem; color: var(--slate); }

.btn-lg { font-size: 1rem; padding: 13px 30px; }
.lp .btn-lg.btn-outline { border-color: var(--brand); color: var(--brand-dark); background: #fff; }
.lp .btn-lg.btn-light { background: var(--accent); color: #2B1B02; font-weight: 800; box-shadow: 0 10px 24px rgba(0,0,0,.18); }

/*: اول-موبایل: صفحهٔ فرود روی گوشی یک‌ستونه؛ از ۹۰۱px دو ستونه */
@media (min-width: 901px) {
  .lp-hero-grid { grid-template-columns: 1.05fr .95fr; gap: 40px; }
  .lp-two-wings { grid-template-columns: 1fr 1fr; }
  .lp-footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 26px; }
  .lp-nav { order: 0; width: auto; margin-inline-start: auto; }
}
@media (min-width: 561px) {
  .lp-footer-grid { grid-template-columns: 1fr 1fr; }
  .lp-tl-item { grid-template-columns: 46px 1fr auto; }
  .lp-tl-item .lp-chip { grid-column: auto; justify-self: auto; }
  .lp-chipline .lp-chip { margin-inline-start: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-card { transition: none; }
  .lp-card:hover { transform: none; }
}

/* ---------- auth ---------- */
.auth-wrap { max-width: 460px; margin: 60px auto; padding: 0 18px; }
.auth-logo { text-align: center; font-size: 1.7rem; font-weight: 900; margin-bottom: 26px; }
.auth-logo b { color: var(--primary); }
.hint-box { background: #eef6ff; border: 1px dashed #9cc3f7; color: #1e4fb8; border-radius: 10px; padding: 10px 14px; font-size: .88rem; margin: 14px 0; text-align: center; }
.error-box { background: #fdeeee; border: 1px solid #f3b8b8; color: #a42323; border-radius: 10px; padding: 10px 14px; font-size: .9rem; margin-bottom: 14px; }
.error-inline { color: var(--red); font-size: .85rem; margin-top: 8px; }
.back-link { display: block; text-align: center; margin-top: 16px; color: var(--muted); font-size: .9rem; }

/* ---------- dashboard ----------
   رویکرد **اول-موبایل**: قاعدهٔ پایه، چیدمان موبایل است و در `min-width`ها
   صفحه‌های پهن‌تر «تقویت» می‌شوند. */
.page { max-width: 1100px; margin: 18px auto; padding: 0 14px 60px; }
@media (min-width: 721px) { .page { margin: 30px auto; padding: 0 18px 70px; } }
.page-title { font-size: 1.45rem; font-weight: 800; margin-bottom: 4px; }
/* ---- چیپ هویتی سرصفحهٔ پیشخوان: عکس + نام + راه پروفایل شخصی (ADR 0140) ----
   منطقی نوشته شده (`padding-inline-*`) تا در RTL جای درست بنشیند. */
.panel-id { display: flex; align-items: center; margin-bottom: 8px; }
.panel-id-chip {
  display: inline-flex; align-items: center; gap: 8px; background: #fff;
  border: 1px solid var(--border); border-radius: 999px; cursor: pointer;
  padding-block: 4px; padding-inline-start: 4px; padding-inline-end: 12px;
  max-width: 100%;
}
.panel-id-chip:disabled { cursor: default; opacity: .75; }
.panel-id-chip:hover:not(:disabled) { border-color: var(--primary); }
.panel-id-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; text-align: start; }
.panel-id-text b { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-id-text span { color: var(--muted); font-size: .74rem; }
.page-sub { color: var(--muted); margin-bottom: 24px; font-size: .95rem; }
/* نوار ۷ گامی: روی گوشی دو ستون، و با پهن‌شدن صفحه تا ۷ قرص در یک ردیف */
.steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }
@media (min-width: 621px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1081px) { .steps { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.step-pill {
  flex: 1; min-width: 168px; background: #fff; border: 1.5px solid var(--border);
  border-radius: 12px; padding: 12px 14px; cursor: default;
}
button.step-pill { font-family: inherit; color: var(--text); text-align: right; cursor: pointer; font-size: .92rem; }
button.step-pill:disabled { cursor: not-allowed; }
button.step-pill.locked { cursor: default; }
button.step-pill .title, button.step-pill .sub { display: flex; }
.step-pill .num { width: 26px; height: 26px; border-radius: 50%; background: #e8edf7; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; margin-left: 8px; }
.step-pill.active { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(47,111,237,.12); }
.step-pill.active .num { background: var(--primary); color: #fff; }
.step-pill.done { border-color: var(--green); }
.step-pill.done .num { background: var(--green); color: #fff; }
.step-pill.locked { opacity: .75; }
.step-pill .title { font-weight: 700; font-size: .92rem; display: flex; align-items: center; }
.step-pill .sub { color: var(--muted); font-size: .8rem; margin-top: 2px; }

/*: اول-موبایل: پایه یک‌ستونه؛ از ۸۶۱px دو ستون (زوج/زوجه کنار هم) */
.grid-couple { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 861px) { .grid-couple { grid-template-columns: 1fr 1fr; gap: 22px; } }
.person-single { max-width: 640px; }
.person-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; background: #fbfcff; }
.person-card h3 { font-size: 1rem; margin-bottom: 14px; color: var(--primary-dark); display: flex; align-items: center; gap: 8px; }
.form-row { margin-bottom: 14px; }
.readonly-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 18px; }
.readonly-grid div { background: #f7f9fd; border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px; font-size: .9rem; }
.readonly-grid span { display: block; color: var(--muted); font-size: .78rem; }
.status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 16px; border-radius: 99px; font-size: .85rem; font-weight: 700; }
.status-pending { background: #fff4e0; color: #9a6500; }
.status-approved { background: #e3f8ef; color: #0d7a4f; }
.status-rejected { background: #fdecec; color: #a42323; }
.status-none { background: #eef1f7; color: var(--muted); }
.reason-box { background: #fdecec; border: 1px solid #f0b8b8; border-radius: 10px; padding: 12px 16px; margin-top: 16px; }
.reason-box b { color: #a42323; }
.notice-box { background: #f0f7ff; border: 1px solid #bfdcff; border-radius: 10px; padding: 14px 18px; margin-bottom: 20px; color: #234f92; font-size: .93rem; }

/* ---------- پیشخوان دو-وضعیتی خانواده (خانهٔ میزبانی / فاز ارزیابی) ---------- */
.care-mode-topbar {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  margin-bottom: 16px; padding: 14px 18px; background: #fdfefe;
  border: 1.5px solid #bbf7d0; border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.06);
}
.care-mode-title-block { display: flex; flex-direction: column; gap: 4px; }
.care-mode-badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700;
  color: #047857; background: #ecfdf5; padding: 2px 10px; border-radius: 99px; width: fit-content;
}
.care-mode-title { font-size: 1.18rem; font-weight: 800; color: #065f46; margin: 0; }
.care-mode-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.family-hero-card { border-radius: var(--radius); padding: 16px 18px; transition: all .2s; }
.family-comms-card { border-radius: var(--radius); transition: all .2s; }
.dossier-banner { border-radius: var(--radius); }

/* مایلستون‌های مسیر در فاز ارزیابی */
.milestones-timeline {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.milestone-step {
  font-size: .78rem; font-weight: 700; color: var(--muted);
  background: #f1f4fa; padding: 2px 10px; border-radius: 99px;
}
.milestone-step.active {
  background: var(--primary); color: #fff;
}
.milestone-step.done {
  background: #e3f8ef; color: #0d7a4f;
}
.milestone-arrow {
  color: var(--muted); font-size: .8rem;
}

/* نوار میانبر پایین صفحه موبایل در خانهٔ میزبانی */
.care-mode-bottom-bar {
  display: none;
}
@media (max-width: 768px) {
  .care-mode-bottom-bar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0;
    background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px);
    border-top: 1.5px solid #d1fae5; box-shadow: 0 -4px 14px rgba(0,0,0,0.06);
    z-index: 100; justify-content: space-around; padding: 6px 12px;
  }
  .cm-bar-btn {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    background: none; border: none; font-family: inherit; font-size: .74rem;
    font-weight: 700; color: #065f46; cursor: pointer; padding: 4px 10px; border-radius: 8px;
  }
  .cm-bar-btn.cm-bar-primary {
    color: var(--primary);
  }
  .cm-bar-icon { font-size: 1.2rem; }
}

/* ---------- selfie panel (عکس سلفی اعضا) ---------- */
.selfie-panel { border: 1px solid var(--border); border-radius: var(--radius); background: #fbfcff; padding: 16px 18px; }
.selfie-panel.compact { padding: 12px 14px; background: #fff; }
.selfie-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.selfie-head b { color: var(--primary-dark); }
.selfie-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.selfie-card { display: flex; gap: 12px; border: 1px solid var(--border); border-radius: 10px; background: #fff; padding: 12px; }
.selfie-panel.compact .selfie-card { padding: 8px; gap: 10px; }
.selfie-card.own { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(35, 79, 146, .08); }
.selfie-photo { width: 96px; height: 120px; flex: 0 0 96px; border-radius: 8px; overflow: hidden; background: #eef1f7; display: flex; align-items: center; justify-content: center; }
.selfie-panel.compact .selfie-photo { width: 72px; height: 92px; flex-basis: 72px; }
.selfie-photo img { width: 100%; height: 100%; object-fit: cover; }
.selfie-empty { color: var(--muted); font-size: .74rem; text-align: center; }
.selfie-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.selfie-body b { color: var(--primary-dark); }
.selfie-note { background: #fdecec; border-radius: 8px; padding: 4px 8px; font-size: .76rem; color: #a42323; }
.selfie-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.selfie-review { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.selfie-review textarea { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 8px; font-family: inherit; font-size: .85rem; }
.selfie-hints { margin: 12px 0 0; padding-inline-start: 18px; color: var(--muted); font-size: .8rem; }
.selfie-hints li { margin-bottom: 4px; }
.selfie-chip { display: inline-block; margin-inline-start: 8px; background: #eef1f7; color: var(--primary-dark); border-radius: 99px; padding: 2px 9px; font-size: .72rem; font-weight: 700; }
.selfie-chip.warn { background: #fdecec; color: #a42323; }
.camera-box { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.camera-box video { width: 100%; max-width: 420px; border-radius: 12px; background: #000; transform: scaleX(-1); }
.camera-actions { display: flex; gap: 8px; }
.case-selfies { margin-bottom: 14px; }

/* ---------- بزرگ‌نمایی عکس سلفی (کارشناس) ---------- */
/* عکس‌های کوچک کارتابل/پرونده با کلیک بزرگ می‌شوند تا کارشناس پوشش و کیفیت را
   ببیند و همان‌جا تایید/عدم تایید کند. */
.selfie-photo-btn, .couple-avatar-btn {
  display: block; padding: 0; border: 0; background: none; font: inherit;
  cursor: zoom-in; border-radius: inherit; line-height: 0;
}
.selfie-photo-btn { width: 100%; height: 100%; }
.selfie-photo-btn:focus-visible, .couple-avatar-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.couple-avatar-btn { transition: transform .12s ease; }
@media (hover: hover) { .couple-avatar-btn:hover { transform: scale(1.06); } }
/*: قاعدهٔ اول-موبایل (ADR 0032): هدف لمسی ≥۴۴px — بدون تغییر اندازهٔ دیده‌شدهٔ عکس */
@media (pointer: coarse) {
  .couple-avatar-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}
.photo-zoom { background: #fff; border-radius: var(--radius); padding: 14px 16px; width: 100%; max-width: 760px; max-height: 94vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.photo-zoom-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.photo-zoom-title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.photo-zoom-title b { color: var(--primary-dark); font-size: 1.02rem; }
.photo-zoom-name { color: var(--muted); font-size: .84rem; }
.photo-zoom-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: .78rem; }
.photo-zoom-stage { display: flex; align-items: center; justify-content: center; background: #0f172a; border-radius: 10px; min-height: 180px; padding: 6px; overflow: auto; }
.photo-zoom-stage img { max-width: 100%; max-height: 62vh; object-fit: contain; display: block; border-radius: 6px; }
.photo-zoom-hint { color: #cbd5e1; font-size: .86rem; padding: 26px 10px; text-align: center; }
.photo-zoom-error { color: #fecaca; }
.photo-zoom-hint-small { color: var(--muted); padding: 0; text-align: start; font-size: .76rem; line-height: 1.9; }
.photo-zoom-review { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--border); padding-top: 10px; }
.photo-zoom-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media (max-width: 640px) {
  .photo-zoom { padding: 10px 12px; max-height: 96vh; }
  .photo-zoom-stage img { max-height: 52vh; }
  #root .modal-overlay.photo-zoom-overlay { align-items: flex-start; padding: 8px; }
}

/* ---------- پرداخت هزینهٔ چاپ مدارک ---------- */
.pay-box { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: #f0f7ff; border: 1px solid #bfdcff; border-radius: 10px; padding: 12px 14px; }
.print-method { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin-top: 8px; }
.print-method-card { display: flex; flex-direction: column; gap: 4px; text-align: start; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; cursor: pointer; font-family: inherit; }
.print-method-card:hover:not(:disabled) { border-color: var(--primary); }
.print-method-card.on { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(35, 79, 146, .12); background: #f7faff; }
.print-method-card:disabled { opacity: .65; cursor: not-allowed; }
.print-method-card b { color: var(--primary-dark); font-size: .92rem; }
.print-method-card span { color: var(--muted); font-size: .8rem; line-height: 1.9; }
.print-method-card em { color: var(--green); font-size: .76rem; font-style: normal; font-weight: 700; }
.doc-print-comment { margin-top: 4px; background: #f2f7f4; border-radius: 8px; padding: 4px 8px; color: #0d7a4f; font-size: .74rem; }

/* ---------- تغییر شرایط خانواده ---------- */
.review-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.review-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 99px; padding: 5px 12px; font-size: .82rem; cursor: pointer; background: #fff; }
.review-chip.on { border-color: var(--primary); background: #f0f7ff; color: var(--primary-dark); font-weight: 700; }
.review-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.review-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #f7f9fd; border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: .85rem; }
.change-item { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 10px; }
/*: اول-موبایل: نشانی و نقشه زیر هم؛ از ۷۲۱px کنار هم */
.action-row { display: grid; grid-template-columns: 1fr; gap: 9px; align-items: center; margin-bottom: 9px; }
@media (min-width: 861px) {
  .action-row { grid-template-columns: minmax(180px, 2fr) minmax(140px, 1fr) minmax(140px, 1fr) 140px auto; gap: 6px; }
}
.action-row input, .action-row select { font-family: inherit; }

/* ---------- forms list (expert) ---------- */
.form-list { display: flex; flex-direction: column; gap: 18px; }
.form-item { border: 1px solid var(--border); border-radius: var(--radius); background: #fff; padding: 20px 22px; box-shadow: var(--shadow); }
.form-item-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.form-item-head h3 { font-size: 1.05rem; }
.form-meta { color: var(--muted); font-size: .85rem; display: flex; gap: 18px; flex-wrap: wrap; }
.review-actions { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
.review-actions textarea { flex: 1; min-width: 240px; }

/* ---------- admin ---------- */
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
th, td { padding: 12px 16px; text-align: right; border-bottom: 1px solid var(--border); font-size: .93rem; vertical-align: middle; }
th { background: #f2f5fb; font-size: .85rem; color: #33415c; }
tr:last-child td { border-bottom: none; }
.actions-cell { display: flex; gap: 6px; flex-wrap: wrap; }
.inline-form { background: #f7f9fd; border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; align-items: end; }
.modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, .5); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 18px; }
.modal { background: #fff; border-radius: var(--radius); padding: 24px; width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto; }
/* کارنامهٔ بازدید: چیدمان یکدست دکمه‌های ردیف (اقدام اصلی · جداکننده · اقدام تصمیم) */
.vl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vl-actions .btn { white-space: nowrap; }
.vl-actions .vl-sep { width: 1px; align-self: stretch; min-height: 18px; background: var(--border); margin: 0 2px; }
@media (max-width: 640px) { .vl-actions { gap: 4px; } .vl-actions .vl-sep { display: none; } }
/* کارنامهٔ بازدید: دکمهٔ درون‌متنی «بیشتر…/کمتر» برای دیدن متن کامل گزارش (بازخورد کارفرما) */
.vl-more { background: none; border: 0; padding: 0; margin-inline-start: 4px; color: var(--primary);
  font: inherit; font-size: .76rem; cursor: pointer; text-decoration: underline; }
/* کارنامهٔ بازدید (ADR 0138): پنجرهٔ پهن برای جدول تاریخ/گزارش/اقدام‌ها */
.modal.modal-wide { max-width: 920px; }
.modal.modal-wide .table-wrap { overflow-x: auto; }
/* کارنامهٔ بازدید (ADR 0151): انتخاب کودک/دورهٔ میزبانی — کارت‌های چیپی.
   هر کارت نام کودک، بازهٔ میزبانی و شمارهای همان دوره را نشان می‌دهد تا کارشناس
   بفهمد گزارش‌های کدام کودک را می‌بیند (خانوادهٔ چندکودکی یا چند دورهٔ پیاپی). */
.vl-kids { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 10px; }
.vl-kid {
  display: grid; gap: 2px; text-align: right; font-family: inherit; cursor: pointer;
  border: 1.5px solid var(--border); border-radius: 12px; background: #fff;
  padding: 7px 12px; min-width: 150px; max-width: 100%; color: var(--text);
}
.vl-kid:hover { border-color: var(--primary); }
.vl-kid.on { border-color: var(--primary); background: #eef3fe; box-shadow: 0 0 0 2px rgba(47, 111, 237, .12); }
.vl-kid .vl-kid-name { font-size: .86rem; font-weight: 700; color: var(--primary-dark); }
.vl-kid .vl-kid-range { font-size: .72rem; color: var(--muted); }
.vl-kid .vl-kid-nums { font-size: .72rem; color: var(--text); }
.vl-kid.on .vl-kid-nums { color: var(--primary-dark); font-weight: 600; }
.vl-kid.vl-kid-loose { border-style: dashed; background: #fffaf2; }
@media (pointer: coarse) { .vl-kid { min-height: 44px; } }
@media (max-width: 560px) { .vl-kid { min-width: 0; flex: 1 1 100%; } }
.modal h3 { margin-bottom: 16px; }
.modal .form-row { margin-bottom: 12px; }
.empty { text-align: center; color: var(--muted); padding: 46px 0; }
.loading { text-align: center; color: var(--muted); padding: 46px 0; }

/* ---------- اعداد و تاریخ چپ‌چین ---------- */
.ltr-num { direction: ltr; unicode-bidi: embed; display: block; text-align: left; }
input.invalid, .date-box.invalid { border-color: var(--red); box-shadow: 0 0 0 3px rgba(214, 69, 69, 0.12); }
.field-error { color: var(--red); font-size: .78rem; margin-top: 5px; }

/* ---------- انتخاب‌گر تاریخ شمسی ---------- */
.picker-wrap { position: relative; }
.date-box {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px;
  background: #fff; cursor: pointer; min-height: 42px;
}
.date-box:hover, .date-box.open { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.12); }
.date-box b { font-size: .95rem; font-weight: 600; }
.date-box .placeholder { color: var(--muted); font-size: .9rem; }
.cal-icon { font-size: .95rem; line-height: 1; }
.jalali-picker {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.18); padding: 12px; width: 290px;
}
.picker-head { display: flex; align-items: center; gap: 4px; margin-bottom: 10px; }
.nav-btn {
  border: 1px solid var(--border); background: #fff; color: var(--text);
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: .9rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.nav-btn:hover { background: #eef3fe; color: var(--primary); border-color: var(--primary); }
.picker-title { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; }
/*: ماه و سال هر دو فهرست بازشو هستند (پرش مستقیم، نه فلش‌به‌فلش) — گزارش کارفرما */
.picker-month {
  width: auto; padding: 4px 6px; font-size: .85rem; border-radius: 8px;
  font-family: inherit; font-weight: 700;
}
.picker-year {
  width: auto; padding: 4px 6px; font-size: .85rem; border-radius: 8px;
  font-family: inherit;
}
.picker-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.picker-grid .wd { text-align: center; color: var(--muted); font-size: .75rem; padding: 3px 0; font-weight: 500; }
.picker-grid button {
  border: none; background: transparent; border-radius: 8px; padding: 7px 0;
  font-family: inherit; font-size: .88rem; cursor: pointer; color: var(--text);
}
.picker-grid button:hover { background: #eef3fe; color: var(--primary); }
.picker-grid button.sel { background: var(--primary); color: #fff; font-weight: 700; }
.picker-grid button.sel:hover { color: #fff; }
.picker-grid button.today { box-shadow: inset 0 0 0 1.5px var(--primary); }
.picker-grid .blank { visibility: hidden; }

/* ---------- وضعیت خانواده ---------- */
.status-options { display: flex; gap: 10px; flex-wrap: wrap; }
.status-option {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--border); background: #fff; border-radius: 12px;
  padding: 12px 18px; cursor: pointer; font-weight: 500; font-size: .93rem;
  transition: border-color .15s, box-shadow .15s, background .15s;
  user-select: none;
}
.status-option:hover { border-color: var(--primary); }
.status-option input { display: none; }
.status-option.selected {
  border-color: var(--primary); background: #eef3fe; color: var(--primary-dark);
  box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.12);
}
.status-option.invalid-opt { border-color: var(--red); }
.so-icon { font-size: 1.2rem; line-height: 1; }
.family-status-line {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #f4f8ff; border: 1px solid #cddefb; border-radius: 12px;
  padding: 10px 16px; margin-bottom: 18px; font-size: .98rem;
}

/* ---------- محل سکونت ---------- */
/*: اول-موبایل: استان و شهر زیر هم؛ از ۷۲۱px کنار هم */
.location-block { display: grid; grid-template-columns: 1fr; gap: 12px; max-width: 760px; margin-bottom: 6px; }
@media (min-width: 721px) { .location-block { grid-template-columns: 1fr 1fr; gap: 16px; } }
.location-field { margin-bottom: 12px; }

/* ---------- فرزندان ---------- */
.children-block {
  border: 1.5px dashed #b9cdf5; border-radius: var(--radius);
  padding: 18px; margin-top: 22px; background: #fbfcff;
}
.children-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.child-row {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end;
  border: 1px solid var(--border); background: #fff; border-radius: 12px;
  padding: 14px 16px; margin-bottom: 10px;
}
.child-row.row-invalid { border-color: var(--red); box-shadow: 0 0 0 3px rgba(214, 69, 69, 0.08); }
.child-field { flex: 1; min-width: 150px; }
.child-field .date-box { background: #fff; }
.child-check { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.gender-pills { display: flex; gap: 8px; }
.gender-pills .gp {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px;
  border: 1.5px solid var(--border); border-radius: 10px; cursor: pointer; font-size: .9rem;
  background: #fff;
}
.gender-pills .gp.on { border-color: var(--primary); background: #eef3fe; color: var(--primary-dark); font-weight: 700; }
.gender-pills .gp input { display: none; }
.adopt-check {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: .92rem; font-weight: 500; padding: 6px 12px;
  border: 1.5px solid var(--border); border-radius: 10px; background: #fff;
}
.adopt-check:has(input:checked) { border-color: var(--green); background: #e9f8f1; color: #0d7a4f; }
.adopt-check input { width: 17px; height: 17px; accent-color: var(--green); }
.child-remove { align-self: auto; }
.children-summary {
  border: 1px solid #e3ebfb; background: #f7faff; border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 14px;
}
.child-chip {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  border: 1px solid var(--border); background: #fff; border-radius: 10px;
  padding: 7px 12px; font-size: .88rem; margin-bottom: 6px;
}
.child-chip + .child-chip { margin-inline-start: 6px; }
.adopted-tag {
  background: #e9f8f1; color: #0d7a4f; border-radius: 99px;
  font-size: .74rem; font-weight: 700; padding: 2px 10px;
}

/* ---------- تحلیل جامع سامانه (ADR 0033) ----------
   اول-موبایل: کارت‌ها روی گوشی یک‌ستونه‌اند و از ۸۶۱px دوستونه می‌شوند. */
.an-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.an-head > div:first-child > b { font-size: 1.05rem; }
.an-sub { color: var(--muted); font-size: .78rem; margin-top: 4px; }
.an-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.an-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 10px; margin-bottom: 14px; }
.an-kpis.small { grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); }
.an-kpi { border: 1px solid var(--border); border-radius: 12px; background: #fbfcff; padding: 10px 12px; }
.an-kpi b { display: block; font-size: 1.3rem; color: var(--primary-dark); }
.an-kpi span { font-size: .82rem; color: var(--text); }
.an-kpi i { display: block; font-style: normal; font-size: .72rem; color: var(--muted); margin-top: 3px; }
.an-insights { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
.an-insight { border-right: 4px solid var(--primary); background: #fbfcff; border-radius: 8px; padding: 8px 10px; font-size: .86rem; }
.an-insight.warn { border-color: var(--amber); background: #fffaf0; }
.an-insight.good { border-color: var(--green); background: #f4fdf8; }
.an-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 861px) { .an-grid { grid-template-columns: 1fr 1fr; } }
.an-grid .card > b { display: block; margin-bottom: 10px; }
.an-trend { display: flex; align-items: flex-end; gap: 4px; border-bottom: 1px solid var(--border); }
.an-trend-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; }
.an-trend-col b { font-size: .68rem; color: var(--muted); }
.an-trend-bar { width: 100%; border-radius: 4px 4px 0 0; display: block; }
.an-trend-col small { font-size: .62rem; color: var(--muted); white-space: nowrap; }
.an-bars { display: flex; flex-direction: column; gap: 5px; }
.an-bar-row { display: flex; align-items: center; gap: 8px; font-size: .8rem; }
.an-bar-label { flex: 0 0 116px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-bar-track { flex: 1; background: #eef1f8; border-radius: 6px; height: 14px; overflow: hidden; }
.an-bar-fill { display: block; height: 100%; border-radius: 6px; }
.an-bar-value { flex: 0 0 42px; text-align: left; font-weight: 700; }
.an-donut-wrap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.an-donut-total { font-size: 17px; font-weight: 800; fill: var(--primary-dark); }
.an-donut-cap { font-size: 9px; fill: var(--muted); }
.an-legend { list-style: none; margin: 0; padding: 0; font-size: .8rem; flex: 1; min-width: 160px; }
.an-legend li { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.an-legend i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.an-legend span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-legend em { font-style: normal; color: var(--muted); }
.an-funnel { display: flex; flex-direction: column; gap: 5px; }
.an-funnel-step { display: flex; align-items: center; gap: 8px; font-size: .82rem; }
.an-funnel-band { height: 20px; border-radius: 5px; }
.an-funnel-step b { min-width: 40px; }
.an-funnel-step em { font-style: normal; color: var(--muted); font-size: .72rem; }
.an-gauge { text-align: center; }
.an-gauge-value { font-size: 21px; font-weight: 800; fill: var(--primary-dark); }
.an-gauge-label { font-size: .78rem; color: var(--muted); margin-top: 2px; }
.an-line svg { display: block; }
.an-line-labels { display: flex; justify-content: space-between; font-size: .62rem; color: var(--muted); }
.an-coverage { margin-top: 14px; }
/*: بازهٔ دلخواه و مقایسهٔ دوره‌ای (اول-موبایل: زیر هم، از ۷۲۱px کنار هم) */
.an-range { margin-bottom: 14px; }
.an-range-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.an-range-row { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.an-range-field { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; color: var(--muted); }
.an-delta { font-weight: 700; white-space: nowrap; }
.an-delta.good { color: var(--green, #0d7a4f); }
.an-delta.bad { color: var(--red, #a42323); }
.an-delta.same { color: var(--muted); }
/*: مقایسهٔ دو بازه: نمودار دوتایی و راهنمای رنگ */
.an-range-title { font-size: .78rem; color: var(--muted); align-self: center; }
.an-compare-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .76rem; color: var(--muted); margin-top: 8px; }
.an-compare-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-inline-end: 4px; }
.an-dual { display: flex; align-items: flex-end; gap: 3px; border-bottom: 1px solid var(--border); }
.an-dual-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; }
.an-dual-pair { display: flex; align-items: flex-end; gap: 2px; width: 100%; justify-content: center; }
.an-dual-bar { width: 46%; border-radius: 3px 3px 0 0; min-height: 2px; }
.an-dual-col small { font-size: .62rem; color: var(--muted); white-space: nowrap; }
.an-coverage-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 8px; }
@media (min-width: 721px) { .an-coverage-grid { grid-template-columns: repeat(3, 1fr); } }
.an-coverage-grid b { font-size: .86rem; }
.an-coverage-grid ul { margin: 4px 16px 0; padding: 0; font-size: .76rem; color: var(--muted); }

/* ---------- وضعیت و دکمهٔ هر عضو در زیربخش‌های روان‌شناختی ----------
   کارفرما: هر عضو فرم خودش را دارد؛ تیک تأیید هم برای هر عضو جداگانه دیده شود. */
.member-parts { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.member-part {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  border: 1px solid var(--border); border-radius: 10px; padding: 6px 10px;
  background: #fbfcff; font-size: .82rem;
}
.member-part.done { border-color: var(--green); background: #f4fdf8; }
.member-part .mp-role { font-weight: 700; min-width: 92px; }
.member-part .mp-tick { color: var(--green); font-weight: 800; }
.member-part .mp-hint { color: var(--muted); font-size: .74rem; }
.member-part .btn { margin-inline-start: auto; }

/* ---------- تب‌های پنل کارشناس ----------
   اول-موبایل: روی گوشی یک ردیف اسکرول‌شو (تا ۲۲ دکمه در چند ردیف تودرتو نشود)؛
   از ۷۲۱px به بعد همان چندردیفی با شکستن خط. */
.expert-tabs {
  display: flex; gap: 8px; margin-bottom: 20px;
  overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px;
  scrollbar-width: thin;
}
.expert-tabs > * { flex: 0 0 auto; }
@media (min-width: 721px) { .expert-tabs { overflow: visible; flex-wrap: wrap; padding-bottom: 0; } }
.expert-tabs button {
  border: 1.5px solid var(--border); background: #fff; cursor: pointer;
  border-radius: 10px; padding: 10px 20px; font-family: inherit; font-size: .93rem;
  font-weight: 500; color: var(--text);
}
.expert-tabs button:hover { border-color: var(--primary); }
.expert-tabs button.on { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }

/* ---------- «میزکار» — صفحهٔ فرود پیشخوان کارشناس (ADR 0084) ----------
 * اول-موبایل: پایه دو شاخص در هر ردیف و فهرست‌ها زیر هم؛ در صفحهٔ پهن چهار شاخص
 * در یک ردیف و دو فهرست کنار هم می‌نشینند.
 */
.dash-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.dash-cols { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 901px) {
  .dash-kpis { grid-template-columns: repeat(4, 1fr); }
  .dash-cols { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* ---------- «نمای زنجیره» گام‌های پرونده (ADR 0086) ----------
 * اول-موبایل: ریل افقی که روی صفحهٔ باریک به خط بعد می‌شکند (بدون اسکرول افقی).
 * کلاس‌های رنگ از همان چیپ‌های برچسب می‌آید؛ این‌جا فقط چیدمان و «گام بعدی» است.
 */
.chain-rail { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; }
.chain-step { display: inline-flex; align-items: center; gap: 4px; font-size: .76rem; }
/*: گام بعدی با کادر پررنگ مشخص می‌شود (قاعده از موتور اقدام بعدی می‌آید) */
.chain-next { outline: 2px solid var(--primary); outline-offset: 1px; font-weight: 700; }
.chain-gaps { background: rgba(0, 0, 0, .10); border-radius: 99px; padding: 0 5px; font-size: .7rem; }

/* ---------- چت ---------- */
.chat-card { margin-top: 22px; }
.chat-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.live-dot { background: #e9f8f1; color: #0d7a4f; border-radius: 99px; padding: 3px 12px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.stage-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.stage-tab {
  border: 1px solid var(--border); background: #f7f9fd; border-radius: 99px;
  padding: 6px 16px; cursor: pointer; font-family: inherit; font-size: .85rem; color: var(--muted);
  display: inline-flex; align-items: center; gap: 6px;
}
.stage-tab.on { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 700; }
.stage-tab .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); display: inline-block; }
.stage-tab .dot.waiting { background: var(--red); }
.chat-body {
  min-height: 180px; max-height: 340px; overflow-y: auto;
  background: #f7f9fd; border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; display: flex; flex-direction: column;
}
.chat-day { align-self: center; color: var(--muted); font-size: .75rem; background: #eef1f6; border-radius: 99px; padding: 2px 12px; margin: 6px 0; }
.chat-row { display: flex; margin-bottom: 8px; }
.chat-row.mine { justify-content: flex-start; }
.chat-row.theirs { justify-content: flex-end; }
.chat-bubble {
  max-width: 76%; border-radius: 14px; padding: 8px 12px;
  background: #fff; border: 1px solid var(--border); border-bottom-left-radius: 4px;
}
.chat-row.mine .chat-bubble { background: #eef3fe; border-color: #cddefb; border-bottom-left-radius: 14px; border-bottom-right-radius: 4px; }
.chat-bubble.auto { background: #fff8e6; border-color: #f0dcae; }
.msg-text { font-size: .93rem; white-space: pre-wrap; word-break: break-word; }
.msg-meta { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: .7rem; margin-top: 4px; }
.meta-left { display: inline-flex; align-items: center; gap: 6px; }
.ticks { display: inline-flex; align-items: center; color: #a7b1c2; font-size: .8rem; line-height: 1; unicode-bidi: isolate; }
.ticks .t { display: inline-block; }
.ticks .t + .t { margin-inline-start: -3px; }
.ticks.read { color: var(--primary); }
.chat-input { display: flex; gap: 8px; margin-top: 10px; }
.chat-input input { flex: 1; }
.chat-input .btn { white-space: nowrap; }

/* ---------- گفتگوهای کارشناس ----------
   اول-موبایل: روی گوشی فهرست و جزئیات **زیر هم** می‌آیند (نه دو ستون فشرده). */
.chat-layout { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 901px) { .chat-layout { grid-template-columns: 290px minmax(0, 1fr); } }
/*: وقتی مؤلفه از داخل پرونده باز می‌شود، فقط یک ستون (فهرست پنهان است) */
.chat-layout.single { grid-template-columns: 1fr; }
.chat-list { padding: 14px; }
.chat-list-title { font-weight: 800; margin-bottom: 10px; }
.chat-list-item {
  display: block; width: 100%; text-align: right; border: 1px solid var(--border);
  background: #fff; border-radius: 10px; padding: 10px 12px; cursor: pointer; margin-bottom: 8px;
  font-family: inherit;
}
.chat-list-item.on { border-color: var(--primary); background: #eef3fe; box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.1); }
.cli-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.cli-sub { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: .76rem; margin-top: 4px; flex-wrap: wrap; }
.unread-badge { background: var(--red); color: #fff; border-radius: 99px; font-size: .7rem; padding: 1px 8px; font-weight: 700; }
.chat-thread { display: flex; flex-direction: column; min-height: 420px; }
.thread-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 8px; flex-wrap: wrap; }
.chat-thread .chat-body { flex: 1; max-height: none; min-height: 300px; }

/* ---------- پیام‌رسان داخلی کارکنان (ADR 0087) ----------
   اول-موبایل: روی گوشی فهرست و گفتگو زیر هم؛ از ۹۰۱px دو ستون. از پالت موجود
   استفاده می‌کند (هیچ رنگ/قلم تازه‌ای ساخته نمی‌شود) و با کلاس‌های `.chat-row`/
   `.chat-bubble` همان ظاهر گفتگوی سامانه را می‌گیرد. */
.msg-layout { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
@media (min-width: 901px) { .msg-layout { grid-template-columns: 300px minmax(0, 1fr); } }
.msg-side { padding: 12px; }
.msg-list { display: flex; flex-direction: column; gap: 6px; max-height: 560px; overflow-y: auto; }
.msg-row {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: right;
  border: 1px solid var(--border); background: #fff; border-radius: 10px; padding: 8px 10px;
  cursor: pointer; font-family: inherit;
}
.msg-row.on { border-color: var(--primary); background: #eef3fe; }
.msg-avatar {
  width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--brand-soft, #ebecf9);
  color: var(--primary-dark, #414c8c); font-weight: 800; display: inline-flex; align-items: center;
  justify-content: center;
}
/*: عکس پروفایل واقعی داخل همان دایره (ADR 0140). عمداً `overflow: hidden` روی ظرف
    نمی‌گذاریم: نقطهٔ وضعیت آنلاین ۱px بیرون ظرف می‌نشیند و بریده می‌شد. خود عکس با
    `border-radius: 50%` گرد می‌شود، پس سرریزی دیده نمی‌شود. */
.msg-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.msg-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.msg-row-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.msg-row-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-row-sub { color: var(--muted); font-size: .74rem; }
.msg-row-preview { color: var(--muted); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-time { color: var(--muted); font-size: .72rem; white-space: nowrap; }
.msg-state { align-self: flex-start; border-radius: 99px; padding: 1px 8px; font-size: .68rem; font-weight: 700; }
.msg-state-active { background: #e9f8f1; color: #0d7a4f; }
.msg-state-pending { background: #fff5e0; color: #8a5a00; }
.msg-state-rejected { background: #fdeceb; color: #a8332a; }
.msg-state-archived { background: #eef1f6; color: var(--muted); }
.msg-thread { padding: 12px 14px; }
.msg-thread-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.msg-members { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.msg-member-x {
  border: 0; background: transparent; color: var(--red, #ce4a3f); cursor: pointer;
  font-family: inherit; font-size: .8rem; padding: 0 2px;
}
.msg-body {
  min-height: 260px; max-height: 460px; overflow-y: auto;
  background: #f7f9fd; border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 12px; display: flex; flex-direction: column;
}
.msg-day { align-self: center; color: var(--muted); font-size: .75rem; background: #eef1f6; border-radius: 99px; padding: 2px 12px; margin: 6px 0; }
.chat-row.msg-system { justify-content: center; }
.msg-sender { font-size: .72rem; font-weight: 700; color: var(--primary-dark, #414c8c); margin-bottom: 2px; }
.msg-file { color: var(--primary-dark, #414c8c); font-weight: 700; text-decoration: underline; word-break: break-all; }
.msg-link {
  border: 0; background: transparent; color: var(--primary, #5762a8); cursor: pointer;
  font-family: inherit; font-size: .72rem; padding: 0 4px; text-decoration: underline;
}
.msg-composer { margin-top: 10px; }
.msg-attach { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .82rem; margin-bottom: 6px; }
.msg-picker { display: flex; flex-wrap: wrap; gap: 6px; max-height: 190px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; padding: 8px; }
.msg-pick { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 99px; padding: 4px 12px; cursor: pointer; font-size: .84rem; }
.msg-pick.on { border-color: var(--primary); background: #eef3fe; }
@media (pointer: coarse) {
  .msg-row, .msg-pick { min-height: 44px; }
  .msg-link { padding: 4px 8px; }
}

/* ---------- ظاهر «پیام‌رسان» برای گفتگوی کارکنان (تلگرام/بله) ----------
   بازخورد کارفرما: «ظاهر کشویی که برای چت باز می‌شه خیلی زشته؛ مثل تلگرام/بله بشه».
   سه تغییری که ظاهر را از «کارت داخل صفحه» به «چت» می‌برد:
     ۱) ردیف‌های فهرست بدون کادر و گردی — فقط یک خط جداکنندهٔ مویی (مثل تلگرام)؛
     ۲) بدنهٔ پیام‌ها با زمینهٔ ملایم و حباب‌های رنگی با گوشهٔ «نیش‌دار»؛
     ۳) نوار نوشتن به‌شکل قرص با ورودی بی‌کادر و دکمهٔ ارسال گرد.
   رنگ‌ها از همان پالت برند می‌آیند (هیچ رنگ/قلم تازه‌ای ساخته نشد). */
.msg-skin { display: flex; flex-direction: column; }
.msg-skin .msg-layout { gap: 0; align-items: stretch; }

/* فهرست گفتگوها */
.msg-skin .msg-side {
  background: #fff; border: 0; border-radius: 0; box-shadow: none;
  padding: 8px 0 0; display: flex; flex-direction: column; min-height: 0;
}
.msg-skin .msg-filters { display: flex; gap: 6px; overflow-x: auto; padding: 0 10px 8px; scrollbar-width: none; }
.msg-skin .msg-filters::-webkit-scrollbar { display: none; }
.msg-skin .msg-filter {
  border: 0; background: #eef1f6; color: var(--primary-dark, #414c8c); border-radius: 99px;
  padding: 5px 12px; font-family: inherit; font-size: .8rem; cursor: pointer; white-space: nowrap;
}
.msg-skin .msg-filter.on { background: var(--primary); color: #fff; font-weight: 700; }
.msg-skin .msg-search {
  display: flex; align-items: center; gap: 8px; background: #eef1f6; border-radius: 99px;
  padding: 7px 12px; margin: 0 10px 8px;
}
.msg-skin .msg-search input {
  border: 0 !important; background: transparent !important; box-shadow: none !important;
  padding: 0 !important; font-size: .9rem; width: 100%;
}
.msg-skin .msg-list { gap: 0; padding: 0 4px 8px; }
.msg-skin .msg-row { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 9px 8px; }
.msg-skin .msg-row:last-child { border-bottom: 0; }
.msg-skin .msg-row:hover { background: #f7f9fd; }
.msg-skin .msg-row.on { background: var(--brand-soft, #ebecf9); }
.msg-skin .msg-avatar {
  width: 44px; height: 44px; font-size: 1rem;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark, #414c8c)); color: #fff;
}
.msg-skin .msg-avatar.sm { width: 36px; height: 36px; font-size: .88rem; }
.msg-skin .unread-badge { background: var(--primary); padding: 2px 9px; }
.msg-skin .msg-side .empty { padding: 26px 12px; font-size: .86rem; }

/* رشتهٔ گفتگو */
.msg-skin .msg-thread {
  background: #fff; border: 0; border-radius: 0; box-shadow: none; padding: 0;
  display: flex; flex-direction: column; min-height: 0;
}
.msg-skin .msg-thread-wrap { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.msg-skin .msg-thread-head {
  display: flex; align-items: center; gap: 6px; padding: 7px 10px; margin: 0;
  background: #fff; border-bottom: 1px solid var(--border);
}
.msg-skin .msg-thread-id { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.msg-skin .msg-thread-id b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-skin .msg-thread-id span { color: var(--muted); font-size: .72rem; }
.msg-skin .msg-icon-btn {
  border: 0; background: transparent; cursor: pointer; font-family: inherit;
  font-size: 1.05rem; line-height: 1; padding: 6px 8px; border-radius: 99px; color: var(--primary-dark, #414c8c);
}
.msg-skin .msg-icon-btn:hover { background: #eef1f6; }
.msg-skin .msg-icon-btn.ok { color: var(--green, #0a8f3c); }
.msg-skin .msg-members { padding: 6px 10px 0; margin: 0; gap: 4px; }
.msg-skin .msg-members .chip { font-size: .72rem; padding: 2px 8px; }

/* بدنهٔ پیام‌ها: زمینهٔ ملایم + حباب‌های نیش‌دار */
.msg-skin .msg-body {
  background: #eef2f7; border: 0; border-radius: 0; flex: 1;
  padding: 10px 10px 12px; min-height: 240px; max-height: none; overflow-y: auto;
}
.msg-layout.is-drawer .msg-body { min-height: 180px; max-height: none; }
.msg-skin .chat-row { margin-bottom: 6px; }
.msg-skin .chat-bubble {
  border-radius: 14px; padding: 7px 11px; border: 1px solid #e6e9f2; background: #fff;
  box-shadow: 0 1px 1px rgba(35, 31, 32, .04);
}
.msg-skin .chat-row.mine .chat-bubble { background: #d8e6ff; border-color: #c3d7fb; }
.msg-skin .chat-bubble.auto { background: #fff8e6; border-color: #f0dcae; }
.msg-skin .msg-day { background: #dde4ee; color: #4b5563; }
.msg-skin .msg-file { color: var(--primary-dark, #414c8c); }
.msg-skin .role-tag { font-size: .68rem; }

/* نوار نوشتن */
.msg-skin .msg-composer { padding: 8px 10px 10px; background: #fff; border-top: 1px solid var(--border); }
.msg-skin .msg-compose-bar { display: flex; align-items: flex-end; gap: 6px; background: #eef1f6; border-radius: 22px; padding: 4px 6px; }
.msg-skin .msg-compose-bar textarea {
  flex: 1; border: 0 !important; background: transparent !important; box-shadow: none !important;
  resize: none; font-family: inherit; font-size: .92rem; padding: 8px 4px; min-height: 36px; max-height: 120px;
}
.msg-skin .msg-send {
  flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: var(--primary); color: #fff; font-size: 1.05rem; cursor: pointer;
}
.msg-skin .msg-send:disabled { opacity: .55; cursor: default; }
.msg-skin .msg-compose-hint { color: var(--muted); font-size: .7rem; margin-top: 6px; text-align: center; }
.msg-skin .msg-attach { font-size: .8rem; margin-bottom: 6px; }
/*: روی گوشی بدنه کمی کوتاه‌تر می‌شود تا سرصفحه و نوار نوشتن در قاب بمانند. */
@media (max-width: 640px) { .msg-skin .msg-body { min-height: 160px; } }

/* ---------- پالایش دوم ظاهر پیام‌رسان (بازخورد: «هنوز قشنگ نیست») ----------
   چهار تغییر که فهرست و رشته را به پیام‌رسان‌های رایج نزدیک می‌کند:
     ۱) آواتار **رنگ مخاطب** (شش تُن پاستلی) به‌جای یک رنگ ثابت؛
     ۲) ردیف **دوسطری**: نام+ساعت / پیش‌نمایش+نشان خوانده‌نشده (خط سوم حذف شد)؛
     ۳) کنش‌های پیام (حذف/تبدیل به وظیفه) **روی نگه‌داشتن نشانگر** می‌آیند، نه همیشه؛
     ۴) حباب پیام من رنگ برند با متن سفید و گوشهٔ نیش‌دار. */
.msg-skin .msg-avatar.t1 { background: #e3edff; color: #2b4c8c; }
.msg-skin .msg-avatar.t2 { background: #e7f7ec; color: #1d6b3d; }
.msg-skin .msg-avatar.t3 { background: #fff1dc; color: #8a5a00; }
.msg-skin .msg-avatar.t4 { background: #f3e9ff; color: #5b3d8f; }
.msg-skin .msg-avatar.t5 { background: #ffe9ec; color: #97303c; }
.msg-skin .msg-avatar.t6 { background: #e4f6f8; color: #1f6b73; }
.msg-skin .msg-row-bottom { display: flex; align-items: center; gap: 8px; }
.msg-skin .msg-row-bottom .msg-row-preview { flex: 1; min-width: 0; }
.msg-skin .msg-row-bottom .unread-badge { flex: none; }
.msg-skin .msg-row .msg-state { align-self: flex-start; margin-top: 2px; }

.msg-skin .msg-meta { justify-content: flex-end; align-items: center; gap: 6px; margin-top: 2px; }
.msg-skin .msg-time-in { color: var(--muted); font-size: .68rem; white-space: nowrap; }
/*: کنش‌ها روی نگه‌داشتن نشانگر ظاهر می‌شوند (روی لمس همیشه دیده می‌شوند تا پنهان نمانند). */
.msg-skin .msg-actions { display: inline-flex; gap: 2px; opacity: 0; transition: opacity .12s ease; }
.msg-skin .chat-bubble:hover .msg-actions { opacity: 1; }
.msg-skin .msg-act {
  border: 0; background: transparent; cursor: pointer; font-family: inherit;
  font-size: .8rem; line-height: 1; padding: 2px 3px; border-radius: 6px; color: var(--muted);
}
.msg-skin .msg-act:hover { background: rgba(87, 98, 168, .12); }
@media (pointer: coarse) { .msg-skin .msg-actions { opacity: 1; } }

/*: حباب پیام من: رنگ برند، متن سفید، گوشهٔ نیش‌دار سمت خودم. */
.msg-skin .chat-row.mine .chat-bubble {
  background: var(--primary); border-color: var(--primary-dark, #414c8c); color: #fff;
  border-bottom-right-radius: 4px;
}
.msg-skin .chat-row.theirs .chat-bubble { border-bottom-left-radius: 4px; }
.msg-skin .chat-row.mine .msg-time-in,
.msg-skin .chat-row.mine .msg-act { color: rgba(255, 255, 255, .82); }
.msg-skin .chat-row.mine .msg-act:hover { background: rgba(255, 255, 255, .18); }
.msg-skin .chat-row.mine .msg-file { color: #fff; }
.msg-skin .chat-row.mine .msg-sender { color: rgba(255, 255, 255, .85); }
.msg-skin .chat-row.mine .role-tag { background: rgba(255, 255, 255, .2); color: #fff; }

/* ---------- رفع‌باگ چیدمان کشو: ستون‌بندی دسکتاپ داخل کشو هم فعال می‌شد ----------
   باگ گزارش‌شدهٔ کارفرما: «فضایی که با زدن دکمه شناور باز می‌شه، با اینکه عرضش زیاده
   ولی فضای پیام‌رسان داخل کوچیک‌تره تا جایی که «در انتظار تایید» کامل دیده نمی‌شه».

   ریشه (با شاهد از خود صفحه): قاعدهٔ `.msg-layout` در `@media (min-width: 901px)`
   دو ستون می‌سازد («۳۰۰px + ۱fr»)، و این مدیا کوئری به **عرض پنجره** نگاه می‌کند نه
   به عرض کشو. پس روی نمایشگر ۱۲۸۰px، داخل کشوی ۴۴۰px هم ستون اول ۳۰۰px می‌شد و
   فهرست/چیپ‌ها به همان ۳۰۰px فشرده می‌شدند (اندازه‌گیری: `grid-template-columns:
   300px 105px` در حالی که عرض کشو ۴۴۰px بود).

   درس: ظرف تنگ باید **بافت خودش** را تعیین کند، نه بافت پنجره. */
.msg-layout.is-drawer { grid-template-columns: minmax(0, 1fr); }
.msg-layout.is-drawer .msg-side,
.msg-layout.is-drawer .msg-thread { width: 100%; }
/*: با تک‌ستونی‌شدن، عرض مفید کشو (≈۴۱۵px) از مجموع چیپ‌ها (≈۳۳۶px) بیشتر است، پس
   هر پنج سبد کامل دیده می‌شوند؛ اسکرول افقی فقط برای صفحه‌های باریک‌تر می‌ماند. */
.msg-skin .msg-filters { padding-inline: 12px; }
.msg-skin .msg-filter { font-size: .78rem; padding: 4px 10px; }

/* ---- بخش «👥 همکاران» و نقطهٔ وضعیت حضور (ADR 0087، بازنگری ۳) ----
   وضعیت آنلاین/آفلاین با **ضربان حضور** استنتاج می‌شود (سامانه WebSocket ندارد):
   نقطهٔ سبز = آخرین تماس در ۲.۵ دقیقهٔ گذشته؛ خاکستری = آفلاین، با متن «آخرین
   فعالیت …» که سرور می‌فرستد (کلاینت محاسبهٔ زمان نمی‌کند تا متن‌ها یکدست بمانند). */
.msg-skin .msg-switch {
  display: flex; gap: 0; margin: 0 10px 8px; background: #eef1f6; border-radius: 99px; padding: 3px;
}
.msg-skin .msg-switch-btn {
  flex: 1; border: 0; background: transparent; border-radius: 99px; padding: 6px 10px;
  font-family: inherit; font-size: .82rem; color: var(--primary-dark, #414c8c); cursor: pointer;
}
.msg-skin .msg-switch-btn.on { background: #fff; font-weight: 700; box-shadow: 0 1px 3px rgba(53, 61, 99, .12); }
.msg-skin .msg-people { display: flex; flex-direction: column; padding: 0 4px 8px; }
.msg-skin .msg-person { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-bottom: 1px solid var(--border); }
.msg-skin .msg-person:last-child { border-bottom: 0; }
.msg-skin .msg-person-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.msg-skin .msg-person-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-skin .msg-person-state { font-size: .74rem; color: var(--muted); }

/*: نقطهٔ وضعیت، گوشهٔ آواتار (مثل پیام‌رسان‌های رایج). */
.msg-skin .msg-avatar { position: relative; }
.msg-skin .msg-dot {
  position: absolute; inset-block-end: -1px; inset-inline-end: -1px;
  width: 12px; height: 12px; border-radius: 50%; background: #b9c0cf; border: 2px solid #fff;
}
.msg-skin .msg-dot.on { background: var(--green, #0a8f3c); }
/*: در حالت «آنلاین» رنگ نقطه باید روی رنگ برند هم دیده شود (حباب پیام من). */
.msg-skin .chat-row.mine .msg-dot { border-color: var(--primary); }
@media (pointer: coarse) { .msg-skin .msg-switch-btn { min-height: 40px; } .msg-skin .msg-person { min-height: 56px; } }

/* ---- کشوی سراسری پیام‌رسان کارکنان (ADR 0087) ----
   چرا شناور و نه فقط زبانه؟ بازخورد کارفرما: «جاش جای مناسبی نیست». دکمهٔ شناور در
   **همان ستون** دو دکمهٔ شناور موجود می‌نشیند (بازخورد ۱۸px، راهنما ۷۲px،
   پیام‌رسان ۱۲۶px) تا ستون قابل‌پیش‌بینی بماند؛ نوار بالا عمداً دست‌نخورده ماند چون
   روی موبایل `overflow-x: auto` است و دکمهٔ داخلش می‌تواند از دید بیرون برود.
   لایه‌بندی: زیر مودال‌ها (۱۰۰) و پنل راهنما (۱۲۰) می‌ماند تا پنجره‌های خودِ
   پیام‌رسان (گفتگوی تازه، تبدیل به وظیفه) روی کشو باز شوند. */
.msg-dock-launch {
  position: fixed; inset-inline-end: 18px; inset-block-end: 126px;
  /*: بالای خودِ کشو (۸۵) می‌نشیند تا **هرگز گم نشود**: با کشوی باز هم دکمه دیده
     می‌شود و آیکونش «✕» می‌شود (کلید باز/بسته). */
  z-index: 86;
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; color: var(--primary-dark); border: 1.5px solid var(--primary);
  border-radius: 99px; padding: 9px 14px; font-family: inherit; font-size: 1.05rem; font-weight: 700;
  cursor: pointer; box-shadow: 0 4px 14px rgba(53, 61, 99, .22);
}
.msg-dock-launch:hover { background: #eef3fe; }
/*: در حالت باز، رنگ دکمه برگردانده می‌شود تا حالت «بستن» از «بازکردن» تشخیص‌پذیر باشد. */
.msg-dock-launch.is-open { background: var(--primary); color: #fff; border-color: var(--primary-dark); }
.msg-dock-badge {
  background: var(--red); color: #fff; border-radius: 99px; font-size: .7rem; font-weight: 700;
  padding: 1px 7px; min-width: 20px; text-align: center;
}
.msg-dock-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, .35); z-index: 84; }
.msg-dock {
  position: fixed; inset-block: 0; inset-inline-end: 0; width: min(440px, 100%); z-index: 85;
  background: var(--bg); border-inline-start: 1px solid var(--border); box-shadow: -6px 0 24px rgba(53, 61, 99, .18);
  display: flex; flex-direction: column;
}
.msg-dock-head {
  display: flex; align-items: center; gap: 8px; padding: 12px 14px;
  background: #fff; border-bottom: 1px solid var(--border);
}
/*: فضای پایین کشو برای دکمهٔ شناورِ باز/بسته که رویش می‌نشیند (پرهیز از پوشاندن محتوا). */
.msg-drawer-body { padding: 10px 12px 78px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; }
.msg-drawer-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.msg-layout.is-drawer { gap: 10px; }
.msg-layout.is-drawer .msg-side { max-height: none; }
.msg-layout.is-drawer .msg-list { max-height: none; }
.msg-layout.is-drawer .msg-body { min-height: 200px; max-height: 40vh; }
@media (pointer: coarse) { .msg-dock-launch { min-height: 44px; } }
@media (max-width: 640px) {
  .msg-dock-launch { inset-inline-end: 10px; inset-block-end: 114px; }
}

/* ---------- پنل پاسخگویی هوشمند ---------- */
.smart-stage-list { display: flex; flex-direction: column; gap: 8px; }
.smart-stage-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px;
}
.ssr-info { display: flex; flex-direction: column; }
.ssr-info span { color: var(--muted); font-size: .78rem; }
/*: نوار بخش‌های پرونده — «قرصی» (هر تب دکمهٔ مستقل خودش).
 *  پیش‌تر یک جعبهٔ بخش‌بندی‌شدهٔ به‌هم‌چسبیده بود و تب‌ها هم بدون شکستن خط می‌ماندند؛
 *  در پروندهٔ کارتابل (تا ۱۷ تب) و ستون باریکِ حالت اسپلیت نوار از سمت چپِ کادر
 *  بیرون می‌زد، و پس از شکستن خط هم **فضای خالیِ انتهای هر ردیف** به رنگ حاشیه
 *  درمی‌آمد (چون جداکننده‌ها از پس‌زمینهٔ خودِ کادر کشیده می‌شدند) و ناخوشایند بود.
 *  حالا هر تب قرصِ خودش است: فضای اضافی دیده نمی‌شود و شکستن خط طبیعی است. */
.seg3 { display: inline-flex; flex-wrap: wrap; gap: 6px; max-width: 100%; }
.seg3 .seg {
  border: 1px solid var(--border); border-radius: 9px; background: #fff;
  padding: 7px 12px; cursor: pointer; font-family: inherit;
  font-size: .82rem; color: var(--text); white-space: nowrap;
}
.seg3 .seg:hover { border-color: var(--primary); color: var(--primary-dark); }
.seg3 .seg.on { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }
.suggestion-item { border: 1px solid #f0dcae; background: #fffcf2; border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.sug-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; font-size: .85rem; }
.sug-score { background: #eef3fe; color: var(--primary-dark); border-radius: 99px; padding: 1px 10px; font-size: .75rem; font-weight: 700; }
.sug-qa { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; margin-bottom: 8px; }
.tag-q { color: var(--red); font-weight: 700; }
.tag-a { color: var(--green); font-weight: 700; }
.sug-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.faq-form { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 14px; }
@media (min-width: 901px) { .faq-form { grid-template-columns: 110px 1fr 1fr auto; } }
.kb-list { display: flex; flex-direction: column; gap: 8px; }
.kb-item { display: flex; justify-content: space-between; gap: 10px; align-items: center; border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; }
.kb-main { font-size: .88rem; display: flex; flex-direction: column; gap: 2px; }
.smart-wrap { display: flex; flex-direction: column; }

/* ---------- مرحله ۲ — زیربخش‌ها و SJT ---------- */
.stage2-card { margin-top: 22px; }
.subsection-list { display: flex; flex-direction: column; gap: 10px; }
.subsection-card {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--border); border-radius: 14px; padding: 14px 18px; background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.02);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.subsection-card:not(.locked):hover {
  box-shadow: 0 4px 14px rgba(0,0,0,0.05);
  border-color: #cbd5e1;
}
.subsection-card.ok { border-color: #bfe6d4; background: #f2fbf7; }
.subsection-card.locked { opacity: .68; }
.sub-icon { font-size: 1.5rem; }
.sub-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sub-status { font-size: .78rem; padding: 1px 10px; border-radius: 99px; width: fit-content; }
.sub-status.s-locked { background: #eef1f7; color: var(--muted); }
.sub-status.s-available { background: #eef3fe; color: var(--primary-dark); }
.sub-status.s-in_progress { background: #fff4e0; color: #9a6500; }
.sub-status.s-submitted { background: #fff4e0; color: #9a6500; }
.sub-status.s-approved { background: #e3f8ef; color: #0d7a4f; }
.sjt-runner { margin-top: 22px; }
.sjt-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.sjt-progress-text { color: var(--muted); font-size: .85rem; }
.progressbar { flex: 1; min-width: 140px; height: 10px; background: #eef1f6; border-radius: 99px; overflow: hidden; }
.progressfill { height: 100%; background: var(--primary); transition: width .3s; }
.scenario-card { border: 1px solid var(--border); border-radius: 14px; padding: 20px; }
.scenario-num { color: var(--muted); font-size: .8rem; margin-bottom: 4px; }
.scenario-card h3 { font-size: 1.08rem; margin-bottom: 8px; }
.scenario-situation { font-size: .95rem; color: #33415c; margin-bottom: 16px; line-height: 2; }
.scenario-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.scenario-option {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
  border: 1.5px solid var(--border); border-radius: 12px; cursor: pointer; background: #fff; font-size: .93rem;
}
.scenario-option:hover { border-color: var(--primary); }
.scenario-option.selected { border-color: var(--primary); background: #eef3fe; }
.scenario-option.locked-sel { border-color: var(--green); background: #f2fbf7; }
.scenario-option input { width: auto; margin-top: 4px; accent-color: var(--primary); }
.opt-letter { font-weight: 800; color: var(--primary-dark); }
.sjt-done { text-align: center; padding: 30px 10px; }
.sjt-done p { color: var(--muted); margin: 8px 0 16px; }
.micro-box { background: #fff8e6; border: 1px solid #f0dcae; border-radius: 12px; padding: 14px 16px; margin-top: 4px; }
.micro-head { font-weight: 800; margin-bottom: 6px; color: #8a6400; }
.micro-box p { font-size: .92rem; line-height: 2; }

/* ---------- گزارش SJT کارشناس ---------- */
.sjt-expert-wrap .chat-list { max-height: 70vh; overflow-y: auto; }
.radar-svg { width: 100%; max-width: 340px; height: auto; }
.radar-label { font-size: 9px; fill: #33415c; font-family: inherit; }
.clinical-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 18px; }
@media (min-width: 901px) { .clinical-grid { grid-template-columns: 1fr 1fr; gap: 20px; } }
.flag-item { display: flex; align-items: center; gap: 8px; border-radius: 10px; padding: 8px 12px; margin-bottom: 6px; font-size: .88rem; }
.flag-item.critical { background: #fdecec; color: #a42323; border: 1px solid #f0b8b8; }
.flag-item.medium { background: #fff4e0; color: #9a6500; border: 1px solid #f0dcae; }
.interview-guide { padding-inline-start: 20px; font-size: .9rem; display: flex; flex-direction: column; gap: 6px; }
.edit-section { border: 1px solid #cddefb; background: #f7faff; border-radius: 12px; padding: 16px; margin-top: 16px; }
.score-edits { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-bottom: 12px; }
.score-edits label { display: flex; align-items: center; gap: 8px; font-size: .82rem; }
.score-edits input { width: 70px; padding: 5px 8px; }
.audit-list { margin-top: 16px; }
.audit-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-bottom: 1px solid var(--border); padding: 7px 2px; font-size: .83rem; }
.audit-row s { color: var(--red); }
.audit-time { color: var(--muted); font-size: .75rem; }
.behz-form { border: 1px solid var(--border); border-radius: 12px; padding: 18px; margin-bottom: 12px; }
.behz-form h3 { margin-bottom: 14px; }
.behz-field { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .95rem; margin-bottom: 4px; }
.behz-field span { font-weight: 500; }
.behz-note { color: var(--muted); font-size: .84rem; margin-bottom: 12px; }
.behz-conclusion { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid var(--border); padding-top: 12px; margin-top: 8px; font-weight: 700; }
.mini-table { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.mini-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); }
.mini-table tr:last-child td { border-bottom: none; }
.flag-item.flag-warn { background: #fff0f0; color: #8a3a3a; border: 1px solid #f0b8b8; }

/* ---------- پرسشنامه لیکرت و غربالگری ---------- */
.likert-scale { display: flex; gap: 8px; flex-wrap: wrap; }
.likert-opt {
  border: 1.5px solid var(--border); background: #fff; border-radius: 10px; padding: 10px 14px;
  cursor: pointer; font-family: inherit; font-size: .88rem;
}
.likert-opt:hover { border-color: var(--primary); }
.likert-opt.on { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 700; }
.rf-opt { border: 1.5px solid var(--border); background: #fff; border-radius: 10px; padding: 10px 26px; cursor: pointer; font-family: inherit; font-size: .95rem; }
.rf-opt.yes.on { background: var(--red); border-color: var(--red); color: #fff; }
.rf-opt.no.on { background: var(--green); border-color: var(--green); color: #fff; }

/* ---------- نقش‌های کارشناس ---------- */
.role-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip-btn { border: 1.5px solid var(--border); background: #fff; border-radius: 99px; padding: 5px 14px; cursor: pointer; font-family: inherit; font-size: .82rem; color: var(--muted); }
.chip-btn.on { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }
.role-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.role-tag { background: #eef3fe; color: var(--primary-dark); font-size: .7rem; border-radius: 99px; padding: 1px 8px; }
.perm-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.perm-table th, .perm-table td { border: 1px solid var(--border); padding: 5px 8px; text-align: center; }
.perm-table th:first-child, .perm-table td:first-child { text-align: right; }
.perm-table input[type="checkbox"] { width: auto; accent-color: var(--primary); }

/* ---------- کارتابل پرونده ---------- */
.cartable-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cartable-filters input { flex: 1; min-width: 200px; }
.cartable-filters select { width: auto; }

/* ---------- کارتابل دوستونه: اعلان‌ها و وظایف همیشه جلوی چشم ----------
   کارفرما خواست اعلان‌ها و وظایف نه پنهان شوند و نه نواری؛ پس در ستون کنارِ
   میزکار پرونده می‌مانند، چسبان‌اند و اسکرول مستقل دارند.

   مهم: میزکار پرونده (جدول پرونده‌ها با ۱۰ ستون) خودش پهنای زیادی لازم دارد؛
   پس ستون کنار **از عرض میزکار کم نمی‌کند**: در صفحه‌های پهن، پیشخوان کارشناس
   از قید ۱۱۰۰ پیکسل بیرون می‌آید (`.page-wide`) و میزکار همان پهنای همیشگی
   (یا بیشتر) را می‌گیرد. در صفحه‌های باریک‌تر، ستون کنار به بالای صفحه برمی‌گردد
   و دو کارت **کنار هم** می‌نشینند تا نصف ارتفاع پیشین را بگیرند (بدون پنهان‌سازی
   و بدون نوار). */
.page-wide { max-width: 1760px; }
/*: شبکهٔ دوستونه فقط دو فرزند دارد (ستون اعلان/وظایف و میزکار پرونده)؛ مودال‌ها و
   نوارهای سرصفحه بیرون آن می‌مانند تا جای ستون‌ها جابه‌جا نشود. */
.cartable-grid { display: contents; }
/*: در RTL ستون اول از **راست** شمرده می‌شود؛ پس ستون اعلان/وظایف (کودکِ اول) عرض
   ثابت ۳۰۰ پیکسل می‌گیرد و میزکار پرونده بقیهٔ عرض را (بدون قید ۱۱۰۰ پیکسل). */
.cartable-split .cartable-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 14px; align-items: start; }
.cartable-split .cartable-side { position: sticky; top: 12px; max-height: calc(100vh - 96px); overflow-y: auto; display: block; }
.cartable-split .cartable-main { min-width: 0; }
/* لیست اعلان‌ها/وظایف: پنج مورد دیده می‌شود و بقیه داخل خودِ کارت اسکرول می‌خورد
   (ستون کنار بی‌نهایت بلند نشود و میزکار پرونده پایین نیفتد) */
.side-list { max-height: 272px; overflow-y: auto; }
.side-more { font-size: .72rem; color: var(--muted); margin-top: 6px; }
/* نشان «عکس اعضا» در ردیف فهرست و سرصفحهٔ پرونده */
.couple-avatar { background: #eef1f7; display: block; flex: none; }
/* صفحهٔ باریک‌تر از ۱۴۰۰ پیکسل: تک‌ستونه، ولی دو کارت اعلان/وظایف کنار هم (نصف ارتفاع) */
@media (max-width: 1399px) {
  .cartable-split .cartable-grid { display: block; }
  .cartable-split .cartable-side {
    position: static; max-height: none; overflow: visible; display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start;
    gap: 14px; margin-bottom: 14px;
  }
  .cartable-split .cartable-side .card { margin-bottom: 0; }
}
.task-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-bottom: 1px solid var(--border); padding: 7px 2px; }
.task-card { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.note-row { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; background: #fbfcff; }
.timeline-row { display: flex; gap: 10px; align-items: flex-start; padding: 6px 2px; }
.timeline-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); margin-top: 7px; flex: none; }

/* ---------- خلاصه تحلیلی و شاخص آمادگی ---------- */
.brief-card { border: 1px solid var(--border); border-inline-start: 4px solid var(--primary); border-radius: 10px; padding: 12px 14px; background: #f7f9ff; }
.brief-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.brief-text { white-space: pre-wrap; margin: 8px 0 0; font-size: .88rem; line-height: 1.9; }
.readiness-wrap { display: flex; gap: 16px; align-items: stretch; flex-wrap: wrap; }
.readiness-score { flex: none; width: 150px; border-radius: 12px; padding: 12px; text-align: center; color: #fff; display: flex; flex-direction: column; gap: 2px; }
.readiness-score b { font-size: 2rem; line-height: 1.1; }
.readiness-score span { font-size: .72rem; opacity: .85; }
.readiness-score em { font-style: normal; font-size: .78rem; margin-top: 6px; font-weight: 700; }
.readiness-score.good { background: linear-gradient(160deg, #1f9d55, #2fb872); }
.readiness-score.mid { background: linear-gradient(160deg, #b7791f, #d69e2e); }
.readiness-score.bad { background: linear-gradient(160deg, #b02a37, #d34b58); }

/* ---------- گزارش‌های کمی ---------- */
.reports-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-bottom: 6px; }
.kpi-card { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: #fff; display: flex; flex-direction: column; gap: 3px; }
.kpi-card b { font-size: 1.5rem; color: var(--primary-dark); }
.kpi-card span { font-size: .84rem; }
.kpi-card em { font-style: normal; font-size: .74rem; color: var(--muted); }
.kpi-card.good { border-inline-start: 4px solid #1f9d55; }
.kpi-card.warn { border-inline-start: 4px solid var(--amber); }
.kpi-card.bad { border-inline-start: 4px solid var(--red); }

/* ---------- تیم مشاوره (ارائه‌دهندگان، جلسات، تقویم) ---------- */
.provider-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.provider-card { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: #fff; cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.provider-card:hover { border-color: var(--primary); }
.provider-card.selected { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(63, 81, 181, .18); background: #f7f9ff; }
.provider-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.provider-score { display: flex; align-items: center; gap: 6px; margin: 5px 0; font-size: .84rem; }
.provider-meta { display: flex; flex-direction: column; gap: 2px; font-size: .8rem; color: var(--text); }
.provider-comments { margin-top: 6px; border-top: 1px dashed var(--border); padding-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.provider-comment { font-size: .8rem; color: var(--muted); }
.stars { color: #f0a800; letter-spacing: 1px; }
.care-compact { display: flex; gap: 10px; flex-wrap: wrap; }
.care-compact-card { flex: 1; min-width: 240px; display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid var(--border); border-inline-start: 4px solid var(--primary); border-radius: 12px; padding: 10px 12px; background: #f7f9ff; }
.care-compact-actions { display: flex; gap: 6px; }
.session-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; margin-bottom: 8px; }
.session-when { display: flex; flex-direction: column; min-width: 130px; }
.session-when span { font-size: .78rem; color: var(--muted); }
.session-who { flex: 1; min-width: 180px; font-size: .88rem; }
.session-actions { display: flex; gap: 6px; align-items: center; }
.rating-stars { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.star-btn { background: none; border: none; font-size: 1.5rem; color: #d8dbe6; cursor: pointer; padding: 0 2px; line-height: 1; }
.star-btn.on { color: #f0a800; }
.calendar-wrap { margin-top: 12px; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.cal-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.cal-table th, .cal-table td { border: 1px solid var(--border); padding: 3px 6px; text-align: center; }
.cal-time { background: #f5f7fb; font-weight: 700; color: var(--muted); }
.cal-cell.busy { background: #fde7e9; color: var(--red); font-weight: 700; }
.cal-cell.free { background: #eaf7ef; color: var(--green); }
.cal-cell.off { background: #f7f7f9; color: #c3c7d2; }

/* ---------- تقویم چندماههٔ بازدیدها (دو/سه ماه کنار هم) ---------- */
/* شبکهٔ ماه‌ها: در فضای بزرگ کنار هم، در فضای کم زیر هم (auto-fit). */
.quarter-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); }
.qcal { width: 100%; border-collapse: collapse; font-size: .74rem; table-layout: fixed; }
.qcal th { color: var(--muted); font-weight: 600; padding: 2px 0; font-size: .68rem; }
.qcal td { border: 1px solid var(--border); height: 34px; vertical-align: top; padding: 2px 3px; text-align: right; }
.qcal-empty { background: #fafbfd; border-color: #f0f1f5 !important; }
.qcal-day { cursor: default; }
.qcal-busy { cursor: pointer; background: #eef4ff; }
.qcal-busy:hover { background: #e2ecff; }
.qcal-holiday { background: #f7f7f9; color: var(--muted); }
.qcal-today { outline: 2px solid var(--primary); outline-offset: -2px; }
.qcal-num { display: block; font-size: .72rem; line-height: 1.2; }
.qcal-count { display: block; font-size: .66rem; font-weight: 700; color: var(--primary); line-height: 1.2; }

/* ---------- فرم رسمی بهزیستی ---------- */
.behzisti .bz-head { text-align: center; border: 1px solid var(--border); border-radius: 10px; padding: 10px; background: #fbfbfd; margin-bottom: 12px; line-height: 1.9; }
.behzisti .bz-person { flex: 1; min-width: 280px; border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; background: #fafbff; }
.behzisti .bz-item { border-bottom: 1px dotted var(--border); padding: 10px 0; }
.behzisti .bz-part { margin: 6px 0; }
.behzisti .bz-part u { font-size: .85rem; color: var(--primary-dark); }
.behzisti .bz-choice { display: flex; align-items: center; gap: 6px; font-size: .86rem; padding: 3px 0; }
.behzisti .bz-note { font-size: .76rem; color: var(--amber); margin-top: 3px; }

/* ---------- برگه مقایسه زوجین ---------- */
.dyadic .dy-summary { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; margin: 12px 0; }
.dyadic .dy-score { flex: none; width: 170px; border-radius: 12px; padding: 12px; text-align: center; color: #fff; background: linear-gradient(160deg, var(--brand-deep, #0A3F3A), var(--brand, #0F766E)); display: flex; flex-direction: column; justify-content: center; }
.dyadic .dy-score b { font-size: 2rem; line-height: 1.1; }
.dyadic .dy-score span { font-size: .74rem; opacity: .9; }
.dyadic tr.dy-flag td { background: #fff5f5; }
.dyadic .dy-row td { font-size: .85rem; }

/* ---------- گزارش بازدید منزل ---------- */
.home-visit .hv-item { width: 100%; margin-bottom: 12px; }
.home-visit .hv-label { display: block; font-size: .88rem; }
.home-visit .hv-label b { color: var(--primary-dark); }
.home-visit .hv-hint { font-size: .78rem; color: var(--muted); margin-top: 2px; }
.home-visit .hv-options { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 5px; }
.home-visit .hv-opt { display: flex; align-items: center; gap: 5px; font-size: .86rem; }
.home-visit .hv-photos { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.home-visit .hv-photo { width: 150px; display: flex; flex-direction: column; gap: 4px; align-items: center; border: 1px solid var(--border); border-radius: 10px; padding: 6px; }
.home-visit .hv-photo img { width: 100%; height: 100px; object-fit: cover; border-radius: 6px; }
.home-visit .hv-photo span { font-size: .72rem; color: var(--muted); word-break: break-all; text-align: center; }
/* ---- فرم «بازدید از منزل»: خوداظهاری خانواده و بررسی بند‌به‌بند (ADR 0042) ---- */
.sub-status.s-returned { background: #fdecec; color: var(--red); }
/* ---- پروفایل حرفه‌ای ارائه‌دهنده در نمای خانواده (ADR 0048) ---- */
.provider-profile { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0; }
.provider-photo { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; border: 1px solid var(--border); flex: none; }
.provider-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.provider-chips .chip-btn { font-size: .72rem; padding: 2px 8px; min-height: 0; cursor: default; }
.provider-bio { font-size: .8rem; color: var(--text); line-height: 1.8; margin-top: 4px; white-space: pre-wrap; }
.provider-head { flex-wrap: wrap; }
.hv-lead { font-size: .85rem; color: var(--muted); line-height: 1.9; margin: 6px 0 10px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.modal-head h3 { margin: 0; }
.chip-warn { display: inline-block; margin-inline-start: 6px; font-size: .72rem; padding: 1px 8px; border-radius: 99px; background: #fff4e0; color: #9a6500; border: 1px solid #f0cd8a; }
.hv-review .perm-table td { vertical-align: top; }
.hv-review .perm-table input, .hv-review .perm-table select, .hv-review .perm-table textarea { width: 100%; }
.hv-preview { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: #fbfcff; font-size: .88rem; line-height: 1.9; }
.hv-preview h3, .hv-preview h4, .hv-preview h5 { margin: 10px 0 4px; font-size: .95rem; color: var(--primary-dark); }
.hv-preview ul { margin: 4px 18px; }

/* ---------- کارتابل بازدید ---------- */
.visit-group { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; background: #fbfcff; }
.visit-group-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.visit-dash .kpi-grid, .visit-manager .kpi-grid { margin-bottom: 12px; }

/* ---------- «پوشش بازدید من» (ADR 0122) ----------
 * کارت اعلام پوشش بازدیدکننده. پایه = موبایل و ارتقا با `min-width` (ADR 0032)؛
 * همهٔ رنگ‌ها از متغیرهای بالا می‌آیند (هویت بصری بهرویش دست‌نخورده). */
.vc-card { border-inline-start: 4px solid var(--primary); }
.vc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.vc-head > div:first-child { flex: 1; min-width: 220px; }
.vc-sub { font-size: .8rem; color: var(--muted); margin-top: 3px; }
.vc-note { border: 1px dashed var(--amber); background: #fffdf5; color: #8a5c00; border-radius: 10px; padding: 8px 12px; font-size: .82rem; margin-bottom: 10px; }
.vc-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 980px) { .vc-grid { grid-template-columns: 1fr 1fr; } }
.vc-block { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: #fbfcff; }
.vc-title { font-size: .92rem; margin-bottom: 6px; color: var(--primary-dark); }
.vc-mini { font-size: .78rem; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }

/* انتخاب دامنهٔ بازدید: کارت‌های انگشتی */
.vc-scopes { display: grid; grid-template-columns: 1fr; gap: 6px; }
.vc-scope { display: flex; flex-direction: column; gap: 2px; text-align: start; border: 1.5px solid var(--border); background: #fff; border-radius: 10px; padding: 9px 12px; cursor: pointer; font-family: inherit; }
.vc-scope b { font-size: .85rem; }
.vc-scope span { font-size: .74rem; color: var(--muted); }
.vc-scope:hover { border-color: var(--primary); }
.vc-scope.on { border-color: var(--primary); background: #eef1fb; box-shadow: inset 0 0 0 1px var(--primary); }
.vc-scope.on b { color: var(--primary-dark); }

/* شعاع فعالیت */
.vc-radius-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.vc-range { flex: 1; min-width: 130px; accent-color: var(--primary); }
.vc-presets { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.vc-chip-btn { border: 1.5px solid var(--border); background: #fff; border-radius: 99px; padding: 5px 12px; cursor: pointer; font-family: inherit; font-size: .78rem; color: var(--muted); }
.vc-chip-btn:hover { border-color: var(--primary); color: var(--primary-dark); }
.vc-chip-btn.on { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }
.vc-hint { font-size: .78rem; color: var(--muted); margin-top: 6px; }
.vc-check { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; font-size: .82rem; cursor: pointer; }
.vc-check em { display: block; font-style: normal; font-size: .74rem; color: var(--muted); }

/* سازندهٔ محدوده */
.vc-builder { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; align-items: center; margin-top: 8px; }
@media (max-width: 560px) { .vc-builder { grid-template-columns: 1fr; } }
.vc-districts, .vc-priorities { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.vc-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.vc-chip { display: inline-flex; align-items: center; gap: 6px; background: #eef3fe; color: var(--primary-dark); border: 1px solid #d7e0f8; border-radius: 99px; padding: 4px 10px 4px 12px; font-size: .8rem; }
.vc-chip.must { background: #fdecec; color: #a42323; border-color: #f5cfcf; }
.vc-chip button { border: none; background: transparent; cursor: pointer; color: inherit; font-size: .9rem; line-height: 1; padding: 0 2px; }
.vc-empty { font-size: .78rem; color: var(--muted); margin-top: 8px; }

/* برنامهٔ هفتگی و ظرفیت */
.vc-window { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid var(--border); padding: 7px 2px; font-size: .82rem; }
.vc-capacity { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.vc-capacity label { flex-direction: column; align-items: flex-start; }

/* جمع‌بندی زنده */
.vc-summary { margin-top: 12px; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: #fff; }
.vc-summary-head { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.vc-badge { font-size: .72rem; border-radius: 99px; padding: 2px 10px; background: #eef1f7; color: var(--muted); border: 1px solid var(--border); }
.vc-badge.on { background: #e3f8ef; color: #0d7a4f; border-color: #bfe8d4; }
.vc-lines { margin: 6px 18px; font-size: .84rem; display: flex; flex-direction: column; gap: 3px; }
.vc-warns { margin: 6px 18px; font-size: .8rem; color: var(--amber); display: flex; flex-direction: column; gap: 3px; }
.vc-legend { margin-top: 8px; font-size: .8rem; }
.vc-legend summary { cursor: pointer; color: var(--primary-dark); }
.vc-legend > div { margin-top: 6px; line-height: 2; }
.vc-legend p { margin-top: 4px; color: var(--muted); font-size: .78rem; }

/* دایرهٔ شعاع پوشش روی نقشه (MapPicker با پراپ `radiusKm`) */
.map-radius { position: absolute; border-radius: 50%; background: rgba(87, 98, 168, .14); border: 1.5px dashed rgba(87, 98, 168, .55); pointer-events: none; }
.map-radius-tag { position: absolute; transform: translate(-50%, -50%); background: #fff; border: 1px solid var(--border); border-radius: 99px; padding: 2px 8px; font-size: .7rem; color: var(--primary-dark); white-space: nowrap; pointer-events: none; box-shadow: var(--shadow); }

/* هدف‌های لمسی بزرگ‌تر روی صفحه‌های لمسی (ADR 0032) */
@media (pointer: coarse) {
  .vc-scope, .vc-chip-btn, .vc-chip button, .vc-range { min-height: 44px; }
  .vc-chip-btn, .vc-chip { padding: 9px 14px; }
  .vc-chip button { padding: 0 8px; }
}

/* ---------- بارگذاری مدارک ---------- */
.family-docs .kpi-card b, .expert-docs .kpi-card b { font-size: 1.3rem; }
.family-docs table td, .expert-docs table td { vertical-align: middle; }

/* ---------- انتخاب موقعیت روی نقشه ---------- */
.map-picker { border: 1px solid var(--border); border-radius: 12px; padding: 10px; background: #fbfcff; margin-top: 8px; }
.map-toolbar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.map-search { display: flex; gap: 6px; flex: 1; min-width: 200px; }
.map-toolbar input { flex: 1; }
.map-zoom-btn { min-width: 40px; font-weight: 700; }
.map-zoom-value { font-size: .8rem; min-width: 32px; text-align: center; }
/*: `touch-action: none` ⇒ کشیدنِ انگشت روی نقشه، **نقشه** را جابه‌جا می‌کند نه صفحه
    (ADR 0129). انتخاب متن و منوی فشار-طولانی هم بی‌اثر می‌شود. */
.map-canvas {
  position: relative; width: 100%; height: 320px; overflow: hidden; border: 1px solid var(--border);
  border-radius: 10px; margin-top: 8px; background: #eef1f6;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.map-canvas img { pointer-events: none; }
.map-pin { position: absolute; transform: translate(-50%, -100%); font-size: 1.6rem; line-height: 1; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
.map-hint { position: absolute; inset-inline-start: 8px; bottom: 8px; background: rgba(255,255,255,.9); border-radius: 8px; padding: 2px 8px; font-size: .74rem; color: var(--muted); max-width: calc(100% - 16px); }
/*: چیپ «نشانی تقریبی از نقشه» (ADR 0201) — زیر بوم نقشه؛ پیشنهاد است نه مقدار
    فیلد فرم، تا خانواده جزئیات (پلاک/واحد) را کامل کند. */
.map-address-suggestion { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: #fbfcff; font-size: .84rem; }
.map-results { margin-top: 8px; border: 1px solid var(--border); border-radius: 10px; padding: 8px; background: #fff; max-height: 220px; overflow: auto; }
.map-result { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: start; background: none; border: none; border-bottom: 1px solid var(--border); padding: 6px 2px; cursor: pointer; font: inherit; }
.map-result:hover { background: #f5f7ff; }
.map-result span { font-size: .78rem; color: var(--muted); }

/* ---------- فرم‌های تکمیلی (پیش‌نمایش رسمی) ---------- */
.official-form { max-width: 820px; }
.of-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-bottom: 2px solid var(--text); padding-bottom: 10px; margin-bottom: 14px; }
.of-sec { margin: 16px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--border); font-size: .95rem; }
.of-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; font-size: .9rem; }
.of-grid span { color: var(--muted); }
.of-text { width: 100%; margin-bottom: 8px; font-family: inherit; }
.of-sign { display: flex; justify-content: space-between; gap: 20px; margin-top: 22px; padding-top: 12px; border-top: 1px dashed var(--border); font-size: .88rem; }

/* ==========================================================================
   واکنش‌گرایی و موبایل (Mobile-First Refinements)
   --------------------------------------------------------------------------
   قاعدهٔ کار: **همهٔ** قواعد این بخش داخل media query هستند (عرض کم یا ورودی
   لمسی)، پس چیدمان دسکتاپ دست‌نخورده می‌ماند: دو ستونهٔ فرم‌ها، تراکم جدول‌ها،
   پدینگ ۲۶px کارت و اندازهٔ دکمه‌ها همان قبل است.

   - `.table-wrap` قاب اسکرول افقی جدول‌ها: روی دسکتاپ هیچ سرریزی نیست، پس
     رفتارش با قبل یکی است؛ روی موبایل جدول «اسکرول» می‌شود نه «فشرده».
   - `@media (pointer: coarse)` فقط روی دستگاه لمسی اثر دارد (دسکتاپ با ماوس
     `pointer: fine` است) و هدفش بزرگ‌کردن اهداف لمسی و فونت فیلدهاست.
   ========================================================================== */

/* قاب اسکرول جدول‌ها (جای overflowX دستی در کامپوننت‌ها) */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* فهرست کارتابل ۱۰ ستون دارد؛ با پدینگ پیش‌فرضِ ۱۶px مجموع min-content ستون‌ها
   از عرض کادر بیشتر می‌شد و جدول یک **اسکرول افقی ریز** می‌خورد (گزارش کارفرما).
   فقط پدینگ افقی همین جدول جمع‌وجورتر است؛ بقیهٔ جدول‌ها دست‌نخورده می‌مانند. */
.cartable-table th, .cartable-table td { padding-left: 12px; padding-right: 12px; }

/* ---------- «بررسی فرم‌ها»: فهرست پرونده‌ها + فرم ----------
   اول-موبایل: روی گوشی زیر هم؛ از ۹۰۱px فهرست کنارِ فرم (۲۵۰px). */
.forms-split { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; margin-bottom: 16px; }
.forms-split-list { max-height: none; }
@media (min-width: 901px) {
  .forms-split { grid-template-columns: 250px minmax(0, 1fr); }
  .forms-split-list { position: sticky; top: 12px; max-height: 78vh; overflow-y: auto; }
}

@media (max-width: 720px) {
  /* ---- کارت‌ها و صفحه: فضای بیشتر برای محتوا ---- */
  .page { padding: 0 12px 56px; margin: 18px auto; }
  .card { padding: 14px; }
  .modal { padding: 16px; }
  .modal-overlay { align-items: flex-start; padding: 10px; }
  .modal { max-height: 92dvh; }

  /* ---- فرم‌ها: یک‌ستونه ---- */
  .of-grid,
  .inline-form,
  .grid-couple,
  .clinical-grid,
  .faq-form,
  .location-block,
  .chat-layout { grid-template-columns: 1fr; }
  .of-grid { font-size: .92rem; }
  .of-sign { flex-direction: column; gap: 6px; }

  /* ---- نوار تب‌ها: اسکرول افقی به‌جای فشرده‌شدن متن (ADR 0032) ----
     روی گوشی نوار یک‌ردیفیِ اسکرول‌شو می‌ماند؛ شکستن خط روی صفحهٔ باریک
     نوار را چندردیفی و بلند می‌کرد. */
  .seg3 { display: flex; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .seg3 .seg { flex: 0 0 auto; white-space: nowrap; }
  .topnav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .topnav > * { flex: 0 0 auto; }
  .cartable-filters { flex-wrap: wrap; }
  .cartable-filters input { min-width: 140px; }

  /* ---- جدول‌ها: اسکرول افقی واقعی (نه فشرده‌شدن ستون‌ها) ----
     ⚠️ جدول‌های `table-layout: fixed` باید از این قاعده **بیرون** بمانند: مرورگر برای
     چنین جدولی «max-content» را به‌شکل یک عدد عظیم حساب می‌کند (اندازه‌گیری‌شده روی
     کروم: دقیقاً ۵۰۰٬۰۰۰px). آن عرض به والدِ شبکه‌ای می‌رسد، ستون شبکه را پهن می‌کند و
     **کل صفحه** را از عرض گوشی بیرون می‌برد. تقویم چندماهه (`.qcal`) همین جدول است و
     ذاتاً باید با عرض ۱۰۰٪ در قالب جا شود، نه اسکرول بخورد (باگ واقعی موبایل در
     کارتابل بازدید — ADR 0148). نگهبان: `tools/check_mobile_tables.cjs`. */
  .table-wrap > table:not(.qcal),
  .perm-table,
  .cal-table,
  .mini-table { min-width: max-content; }
  .table-wrap { border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
  .table-wrap > table { box-shadow: none; border-radius: 0; }

  /* ---- جدول‌های «کارتی»: هر ردیف روی گوشی به یک کارت عمودی تبدیل می‌شود ----
     به‌جای اسکرول افقی، هر سلول با برچسب خودش زیر هم می‌آید (لمس‌پذیر و خوانا).
     برای فعال‌کردن روی هر جدول، کلاس `table-cards` و `data-label` روی سلول‌ها. */
  .table-cards { min-width: 0 !important; }
  .table-cards thead { display: none; }
  .table-cards, .table-cards tbody, .table-cards tr, .table-cards td { display: block; width: 100%; }
  .table-cards tr {
    border: 1px solid var(--border); border-radius: 12px; background: #fff;
    padding: 6px 10px; margin-bottom: 10px;
  }
  .table-cards td {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    border: 0; padding: 7px 0; text-align: right; min-height: 34px;
  }
  .table-cards td + td { border-top: 1px dashed var(--border); }
  .table-cards td::before {
    content: attr(data-label); color: var(--muted); font-size: .74rem; font-weight: 700;
    flex: none; min-width: 84px;
  }
  .table-cards td:first-child { display: block; padding-top: 4px; }
  .table-cards td:first-child::before { display: none; }
  /*: سلولِ **نخست**ی که برچسبش لازم است (مثل جعبهٔ انتخاب در «صف بازدیدها») با کلاس
     `keep-label` برچسبش را نگه می‌دارد؛ وگرنه روی گوشی یک جعبهٔ انتخابِ بی‌توضیح
     بالای کارت می‌نشیند و معلوم نیست برای چیست. قرینهٔ `td.row-action` است. */
  .table-cards td:first-child.keep-label::before { display: block; }
  /*: سلولی که روی کارت باید **تمام‌عرض** شود: برچسب در یک خط، محتوا زیرش. برای ردیفی
     که چند دکمه دارد و در ستونِ باریکِ برچسب (`min-width: 84px`) جا نمی‌شود و به خط
     بعد می‌افتد (مثل ردیف اقدام‌های «صف بازدیدها»). برخلاف `row-action` دکمه‌ها را
     تمام‌عرض نمی‌کند. */
  .table-cards td.cell-block { display: block; padding-top: 9px; }
  .table-cards td.row-action { display: block; padding-top: 9px; }
  .table-cards td.row-action .btn { width: 100%; }
  .table-cards td[dir="ltr"] { justify-content: space-between; }
  .table-cards tr:last-child { margin-bottom: 0; }

  /* ---- تقویم شمسی: هرگز از صفحه بیرون نزند ---- */
  .jalali-picker { width: min(290px, calc(100vw - 40px)); max-width: calc(100vw - 40px); }

  /* ---- تقویم چندماهه: ماه‌ها زیر هم، خانه‌ها کمی بلندتر برای لمس ---- */
  .quarter-grid { grid-template-columns: 1fr; }
  .qcal td { height: 38px; }

  /* ---- فیلدها: رفع زوم خودکار iOS (زیر ۱۶px زوم می‌کند) ----
     این قاعده «عرض‌محور» است تا دسکتاپ در هر حالت دست‌نخورده بماند. فیلدهایی که
     قاعدهٔ کلاس‌دارشان قلم ریزتری دارد هم صریحاً ۱۶px می‌شوند (وگرنه iOS زوم می‌کند). */
  input, select, textarea { font-size: 16px; }
  .jr-field input, .jr-field select, .jr-field textarea,
  .wall-field input, .wall-field select,
  .selfie-review textarea, .picker-year,
  /* ورودی‌های پنل برچسب قاعدهٔ کلاس‌دار ریزتری دارند (ADR 0068)؛ گزینشگر
     «زیرمجموعه‌ای» آمده تا بر همان قاعدهٔ ریزترِ پایین فایل مقدم بماند. */
  .tag-panel input, .tag-panel select,
  .cartable-filters input, .cartable-filters select { font-size: 16px; }

  /* ---- متن‌های خیلی ریز جدول‌ها کمی خواناتر ---- */
  th, td { font-size: .86rem; }
}

@media (max-width: 560px) {
  .page { padding: 0 10px 48px; }
  .card { padding: 12px; }
  .page-title { font-size: 1.25rem; }
  .lp-footer-grid { grid-template-columns: 1fr; }
  .status-options, .review-actions { flex-direction: column; align-items: stretch; }
  .review-actions textarea { min-width: 0; }
}

/* ==========================================================================
   نمای تلویزیونی (دیوار پایش کودکان) — ADR 0012
   --------------------------------------------------------------------------
   نمایش تمام‌صفحهٔ تیره برای نصب روی تلویزیون محل کار:
   - نوار بالا با کنترل‌های **کراندار** (نه تمام‌عرض) تا صفحه شلوغ نشود؛
     ریشهٔ مشکل قبلی این بود که `select` به‌اندازهٔ بلندترین گزینه‌اش پهن می‌شد.
   - نوار فیلتر جمع‌شدنی با شبکهٔ خودکار: روی تلویزیون چند ستون، روی موبایل یک ستون.
   - شبکهٔ کارت‌ها با اندازهٔ واکنشی (`clamp`) که روی ۵۵ اینچ و موبایل هر دو درست است.
   ========================================================================== */
.wall {
  position: fixed; inset: 0; z-index: 9999;
  background: #0f1720; color: #f5f7fa;
  display: flex; flex-direction: column; gap: 10px;
  padding: clamp(10px, 1.2vw, 22px); overflow: hidden;
}

.wall-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wall-title { font-size: clamp(1rem, 1.3vw, 1.4rem); white-space: nowrap; }
.wall-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.wall-chip {
  border: 1px solid #334155; border-radius: 999px; padding: 3px 12px;
  font-size: .82rem; font-weight: 700; white-space: nowrap;
}
.wall-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-inline-start: auto; }
.wall-stamp { font-size: .76rem; color: #94a3b8; white-space: nowrap; }
.wall-auto { display: flex; align-items: center; gap: 5px; font-size: .8rem; color: #cbd5e1; white-space: nowrap; }

.wall-btn {
  background: #1c2a38; color: #e2e8f0; border: 1px solid #334155; border-radius: 8px;
  padding: 6px 12px; font-size: .84rem; cursor: pointer; white-space: nowrap;
}
.wall-btn:hover { background: #24384a; }
.wall-btn-on { border-color: #38bdf8; color: #bae6fd; }

/* ---- نوار فیلتر: کنترل‌های کراندار، برچسب بالا، شبکهٔ واکنشی ---- */
.wall-filters {
  display: grid; gap: 10px 14px; padding: 12px 14px;
  background: #16222e; border: 1px solid #24384a; border-radius: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 220px));
  align-items: end;
}
.wall-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wall-field > span { font-size: .76rem; color: #9fb0c0; }
.wall-field input, .wall-field select {
  width: 100%; max-width: 100%; padding: 6px 8px; font-size: .84rem;
  background: #0f1720; color: #f5f7fa; border: 1px solid #334155; border-radius: 8px;
}
/*: «مرکز نگهداری» متن بلند دارد؛ فقط همین یکی اجازهٔ عرض بیشتر می‌گیرد */
.wall-field-wide { grid-column: span 2; }
.wall-field-end { grid-column: -2 / -1; }
.wall-note { font-size: .82rem; color: #fbbf24; }

/* ---- شبکهٔ کارت‌ها ---- */
.wall-grid {
  flex: 1; overflow-y: auto; align-content: start;
  display: grid; gap: clamp(10px, 1vw, 18px);
  grid-template-columns: repeat(auto-fill, minmax(clamp(190px, 17vw, 320px), 1fr));
}
.wall-empty { color: #9fb0c0; }

.wall-card {
  display: flex; flex-direction: column; gap: 5px; text-align: right; cursor: pointer;
  background: #16222e; color: #f5f7fa; border: 1px solid #24384a;
  border-top: 6px solid #334155; border-radius: 12px; padding: 10px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.wall-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px #0006; }
.wall-photo {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  background: #0b1218; border-radius: 9px; overflow: hidden;
}
.wall-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wall-photo-empty {
  width: 100%; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
}
.wall-photo-code { font-size: clamp(1.05rem, 1.5vw, 1.7rem); font-weight: 800; direction: ltr; }
.wall-photo-hint { font-size: .72rem; color: #9fb0c0; }
.wall-badge {
  position: absolute; top: 7px; inset-inline-end: 7px; color: #fff; font-weight: 700;
  font-size: .72rem; padding: 3px 9px; border-radius: 999px;
}
/*: نشان‌های «تغییر تازه» و «سکوت اطلاعاتی» زیر نشان وضعیت می‌نشینند */
.wall-badge-change {
  top: auto; bottom: 7px; inset-inline-end: 7px; background: #7c3aed;
}
.wall-badge-silent {
  top: 7px; inset-inline-start: 7px; inset-inline-end: auto; background: #0891b2;
}
.wall-changes { font-size: .76rem; color: #c4b5fd; }
/*: کارت تازه (از بازخوانی قبلی عوض شده) چند لحظه ضربان می‌زند تا چشم ناظر بگیرد */
@keyframes wallPulse {
  0%, 100% { box-shadow: 0 0 0 0 #a78bfa00; }
  50% { box-shadow: 0 0 0 4px #a78bfa55; }
}
.wall-card-fresh { animation: wallPulse 1.6s ease-in-out 4; }
/*: کارت بررسی‌شده کمی آرام‌تر و با نشان تأیید */
.wall-card-acked { opacity: .82; }
.wall-photo-btn {
  background: none; border: none; padding: 0; margin: 0; color: inherit;
  text-align: right; cursor: pointer; display: flex; flex-direction: column; gap: 5px; width: 100%;
}
.wall-ack { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.wall-ack-done { font-size: .76rem; color: #86efac; }
.wall-ack-stale { font-size: .74rem; color: #fbbf24; }
.wall-btn-ack { background: #14532d; border-color: #22c55e; color: #dcfce7; }
.wall-btn-ack:hover { background: #166534; }
/*: نوار تیکر پایین دیوار برای خواندن از فاصله */
.wall-ticker {
  overflow: hidden; white-space: nowrap; height: 30px; flex: 0 0 auto;
  border-top: 1px solid #24384a; padding-top: 4px;
}
@keyframes wallTicker { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.wall-ticker-track {
  display: inline-block; white-space: nowrap; animation: wallTicker linear infinite;
  font-size: .86rem;
}
.wall-ticker-item { margin-inline-end: 28px; }
.wall-visits-last { font-weight: 500; font-size: .78rem; color: #cbd5e1; }
/*: «شمار بازدید» بلافاصله زیر عکس — خواستهٔ صریح کارفرما */
.wall-visits { font-size: .84rem; font-weight: 700; }
.wall-name { display: flex; align-items: center; gap: 6px; font-size: clamp(.95rem, 1.05vw, 1.25rem); }
.wall-dot { width: 11px; height: 11px; border-radius: 999px; flex: 0 0 auto; }
.wall-line { font-size: .82rem; color: #cbd5e1; }
.wall-muted { color: #94a3b8; font-size: .74rem; }
.wall-reason { font-size: .8rem; color: #fbbf24; min-height: 1.1rem; }
.wall-foot {
  display: flex; justify-content: space-between; gap: 6px;
  font-size: .74rem; color: #94a3b8; border-top: 1px solid #24384a; padding-top: 4px;
}
.wall-legend { font-size: .76rem; color: #94a3b8; }

@media (max-width: 900px) {
  .wall-field-wide { grid-column: span 1; }
  .wall-field-end { grid-column: span 1; }
}


/* ---- دستگاه لمسی: اهداف لمسی بزرگ‌تر ----
   فقط روی دستگاه لمسی اثر دارد؛ دسکتاپ با ماوس (`pointer: fine`) دقیقاً همان
   اندازه‌های قبل را نگه می‌دارد. روی لپ‌تاپ/نمایشگر لمسی هم عمداً بزرگ‌تر می‌شود
   چون همان‌جا هم لمس هدف اصلی است. */
@media (pointer: coarse) {
  .btn-sm { min-height: 44px; padding: 10px 16px; }
  .seg3 .seg { min-height: 44px; padding: 11px 16px; }
  .picker-grid button { padding: 12px 0; font-size: .95rem; }
  .nav-btn { min-width: 44px; min-height: 44px; }
  .adopt-check { min-height: 44px; }
  .adopt-check input { width: 22px; height: 22px; }
  .perm-table input[type="checkbox"] { width: 22px; height: 22px; }
  td .btn-sm, td .btn { margin: 3px 0; }
  .chip-btn { min-height: 44px; }
  /* ---- کنترل‌های کوچکِ جداشده: روی لمس هم حداقل ۴۴ پیکسل بگیرند ---- */
  .star-btn, .review-chip, .stage-tab, .jr-pill, .jr-week, .map-result, .picker-year {
    min-height: 44px; min-width: 44px;
  }
  .star-btn, .review-chip, .stage-tab, .jr-pill, .map-result, .picker-year { padding: 10px 12px; }
  /*: دکمه‌های نوار ابزار نقشه روی لمس ۴۴px می‌شوند (ADR 0032/0129) */
  .map-toolbar .btn { min-height: 44px; }
  .map-zoom-btn { min-width: 44px; }
  .jr-week { padding: 8px 0; }
  .chat-popup-close { width: 44px; height: 44px; }
  .admin-nav-item, .admin-nav-group-head { min-height: 44px; display: flex; align-items: center; }
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
}

@media print {
  body * { visibility: hidden; }
  .print-area, .print-area * { visibility: visible; }
  .print-area { position: absolute; inset: 0; padding: 24px; }
}

/* ---------- چت شناور خانواده ---------- */
.chat-fab {
  position: fixed; bottom: 22px; left: 22px; z-index: 92;
  width: 60px; height: 60px; border-radius: 50%; border: none;
  background: var(--primary); color: #fff; font-size: 1.7rem; cursor: pointer;
  box-shadow: 0 10px 26px rgba(47, 111, 237, 0.4);
  display: inline-flex; align-items: center; justify-content: center;
}
.chat-fab:hover { background: var(--primary-dark); }
.chat-popup {
  position: fixed; bottom: 98px; left: 22px; z-index: 91;
  width: min(460px, calc(100vw - 40px));
  opacity: 0; pointer-events: none; transform: translateY(14px);
  transition: opacity .18s, transform .18s;
}
.chat-popup.open { opacity: 1; pointer-events: auto; transform: none; }
.chat-popup .chat-card { margin-top: 0; max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px); display: flex; flex-direction: column; box-shadow: 0 18px 52px rgba(15, 23, 42, 0.28); }
.chat-popup .chat-body { flex: 1; min-height: 220px; max-height: none; }
.chat-popup-close {
  position: absolute; top: -14px; left: -14px; z-index: 5;
  width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--red); color: #fff; font-weight: 700; box-shadow: 0 4px 12px rgba(0,0,0,.2);
}

/* ===========================================================================
   «سفر میزبانی» — نوار کناری طلایی، کلوپ خانواده و پنل کارشناس (ADR 0014 فاز ۲)
   ===========================================================================
   پالت طلایی از رنگ‌های برند گرفته شده است: #F7941D (نارنجی) و #F4D16E (زرد ملایم).
   ساختار: نوار باریک عمودی در کنار صفحه + کشوی کلوپ که از همان سمت باز می‌شود.
   در نمایشگر کوچک، نوار به نوار افقی پایین صفحه تبدیل می‌شود تا جای محتوا را نگیرد.
   --------------------------------------------------------------------------- */

/* ---- نوار کناری ---- */
.jr-rail {
  position: fixed;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 6px;
  border-radius: 22px;
  background: linear-gradient(180deg, #F7C948 0%, #F7941D 100%);
  box-shadow: 0 10px 28px rgba(247, 148, 29, .35), inset 0 0 0 1px rgba(255, 255, 255, .45);
}
.jr-rail-dim { opacity: .35; pointer-events: none; }
.jr-rail-crown,
.jr-rail-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 52px;
  border: none;
  cursor: pointer;
  border-radius: 16px;
  padding: 7px 2px;
  background: rgba(255, 255, 255, .82);
  color: #6B3E05;
  font-family: inherit;
  font-size: 11px;
  line-height: 1.2;
  transition: transform .15s, background .15s;
}
.jr-rail-btn:hover { transform: translateX(3px); background: #fff; }
.jr-rail-on { background: #fff; box-shadow: inset 0 0 0 2px #B45309; }
.jr-rail-crown { background: #FFF7E6; font-weight: 700; }
.jr-rail-crown span { font-size: 18px; }
.jr-rail-crown i { font-style: normal; font-size: 10px; color: #B45309; }
.jr-rail-btn span { font-size: 17px; }
.jr-rail-btn i { font-style: normal; font-size: 9.5px; text-align: center; }

/* ---- کشوی کلوپ ---- */
.jr-drawer {
  position: fixed;
  inset: 0 0 0 0;
  margin-right: auto;
  width: min(820px, 100%);
  z-index: 70;
  background: var(--bg);
  overflow-y: auto;
  padding: 0 14px 40px;
  box-shadow: 0 0 60px rgba(15, 23, 42, .28);
  animation: jr-slide .22s ease-out;
}
.jr-drawer.jr-embedded {
  position: static;
  width: 100%;
  max-width: 100%;
  box-shadow: none;
  animation: none;
  padding: 0;
  z-index: 1;
  background: transparent;
}
.jr-drawer.jr-embedded .jr-drawer-head {
  border-radius: 14px;
  margin: 0 0 14px 0;
}
@keyframes jr-slide { from { transform: translateX(-24px); opacity: .4; } to { transform: none; opacity: 1; } }
.jr-drawer-head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 -14px 12px;
  padding: 12px 16px;
  background: linear-gradient(90deg, #F7C948, #F7941D);
  color: #4A2A03;
  box-shadow: 0 6px 16px rgba(247, 148, 29, .25);
}
.jr-drawer-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jr-crown { font-size: 20px; }
.jr-meta { color: #6B7280; font-size: 11.5px; }

/* ---- کارت هفتهٔ جاری ---- */
.jr-hero {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px;
  background: linear-gradient(135deg, #FFFDF5 0%, #FFF4DC 100%);
  border: 1px solid #F3D9A4;
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 12px;
}
.jr-hero-side { display: flex; flex-direction: column; gap: 8px; }
.jr-stat {
  background: #fff;
  border: 1px solid #F3D9A4;
  border-radius: 12px;
  padding: 8px;
  text-align: center;
}
.jr-stat b { display: block; font-size: 19px; color: #B45309; }
.jr-stat span { font-size: 10.5px; color: #6B7280; }
.jr-week-tag { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #92400E; font-weight: 700; }
.jr-hero-main h3 { margin: 6px 0; font-size: 17px; color: #4A2A03; }
.jr-challenge { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #3F3F46; }
.jr-ico { margin-left: 4px; }

/* ---- فرم ثبت ---- */
.jr-submit { margin-top: 10px; border-top: 1px dashed #E7C57A; padding-top: 10px; }
.jr-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.jr-field { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: #4B5563; flex: 1 1 150px; }
.jr-field input,
.jr-field select,
.jr-field textarea {
  font-family: inherit;
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  background: #fff;
}
.jr-check { display: flex; align-items: center; gap: 6px; font-size: 12.5px; margin-top: 8px; }
.jr-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.jr-hint { background: #FFFBEB; border: 1px dashed #F3D9A4; color: #92400E; border-radius: 10px; padding: 7px 9px; font-size: 12px; margin-top: 8px; }
.jr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.jr-chip { background: #F3F4F6; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #374151; }
.jr-chip-ok { background: #DCFCE7; color: #166534; }

/* ---- نوار هفته‌ها ---- */
.jr-weeks { display: flex; flex-wrap: wrap; gap: 6px; }
.jr-week {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 40px;
  border: 1px solid #E5E7EB;
  background: #fff;
  border-radius: 10px;
  padding: 5px 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  color: #4B5563;
}
.jr-week-on { border-color: #F7941D; box-shadow: 0 0 0 2px #FDE9C8; }
.jr-week-locked { opacity: .55; background: #F9FAFB; }
.jr-week-closed { background: #F3F4F6; }
.jr-week-no { font-weight: 700; }
.jr-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; font-size: 11px; color: #6B7280; }
.jr-legend span { display: inline-flex; align-items: center; gap: 4px; }
.jr-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: #D1D5DB; }
.jr-dot-ok { background: #16A34A; }
.jr-dot-wait { background: #F59E0B; }
.jr-dot-back { background: #DC2626; }
.jr-dot-open { background: #2563EB; }
.jr-dot-makeup { background: #7C3AED; }
.jr-dot-locked { background: #D1D5DB; }
.jr-dot-closed { background: #9CA3AF; }

/* ---- نشان و آلبوم ---- */
.jr-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.jr-badge {
  background: linear-gradient(135deg, #FFF7E6, #FDE9C8);
  border: 1px solid #E7C57A;
  color: #92400E;
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 12px;
}
.jr-badge i { font-style: normal; color: #A16207; font-size: 10px; margin-right: 4px; }
.jr-album { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-bottom: 10px; }
.jr-frame { margin: 0; border: 1px solid #E5E7EB; border-radius: 12px; overflow: hidden; background: #fff; }
.jr-frame img { width: 100%; height: 140px; object-fit: cover; display: block; }
.jr-frame figcaption { padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.jr-frame-empty { height: 140px; display: flex; align-items: center; justify-content: center; background: #F3F4F6; color: #9CA3AF; font-size: 12px; }
.jr-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.jr-month { border: 1px solid #E5E7EB; border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.jr-month-ok { border-color: #86EFAC; background: #F0FDF4; }
.jr-audio { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 12.5px; }
.jr-audio audio { max-width: 320px; width: 100%; }
/* ---- یادداشت صوتی خانواده (ADR 0018) ---- */
.jr-voice { display: flex; flex-direction: column; gap: 4px; }
.jr-voice-audio { max-width: 320px; width: 100%; margin-top: 2px; }
.jr-voice-inline { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.jr-review-voice { display: flex; flex-direction: column; gap: 3px; margin: 6px 0; }
/* ---- قالب فرایند درمانی (ADR 0019) ---- */
.cp-hint { font-size: .78rem; color: var(--muted); line-height: 1.7; }
.cp-meta { font-size: .76rem; color: var(--muted); display: block; }
.cp-row { display: flex; align-items: flex-start; gap: 8px; padding: 8px 0; border-bottom: 1px solid #F1F5F9; }
.cp-row:last-child { border-bottom: 0; }
.cp-row-off { opacity: .55; }
.cp-ico { font-size: 1.1rem; line-height: 1.4; }
.cp-row-main { flex: 1; min-width: 0; }
.cp-row-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.cp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.cp-check { display: flex; align-items: center; gap: 6px; font-size: .82rem; margin: 6px 0; }
.cp-formula { border: 1px dashed #E5E7EB; border-radius: 10px; padding: 8px; margin: 8px 0; background: #FAFAFA; }
.cp-formula-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-top: 6px; }
.cp-formula-row .jr-field { min-width: 110px; }
.cp-steps input { width: 100%; }
.cp-steps .cp-sub { margin-top: 3px; font-size: .78rem; }
.cp-step-actions { display: flex; gap: 3px; }
.cp-family { margin-top: 6px; }
/* ---- کارت واکسن (ADR 0020) ---- */
.vc-hint { font-size: .76rem; color: var(--muted); line-height: 1.7; }
.vc-family { margin-top: 6px; }
.vc-chip { border: 1px solid #E5E7EB; border-radius: 8px; padding: 2px 7px; font-size: .76rem; }
.vc-table td, .vc-table th { vertical-align: middle; }
.vc-table .vc-group td { background: #FFFBEB; font-weight: bold; font-size: .78rem; }
.vc-actions, .vc-given { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.vc-given input { width: 130px; }
/* ---- اتمام میزبانی (ADR 0021) ---- */
.pc-card { margin-top: 10px; background: #FBFCFE; border-color: var(--primary); }
.pc-block { border-top: 1px solid #F1F5F9; padding-top: 8px; margin-top: 8px; }
.pc-block-warn { background: #FFFBEB; border: 1px solid #FCD34D; border-radius: 8px; padding: 8px; }
.pc-block .form-row { margin-top: 6px; }
.pc-hint { font-size: .78rem; color: var(--muted); line-height: 1.8; margin-top: 3px; }
.pc-label { font-size: .82rem; display: block; margin-bottom: 4px; }
.pc-check { display: flex; align-items: center; gap: 6px; font-size: .82rem; margin: 6px 0; }
.pc-line { font-size: .8rem; line-height: 1.9; }
.pc-line-bad { color: #B91C1C; }
.pc-line-warn { color: #92400E; }
.pc-table { margin-top: 6px; }
.pc-table td, .pc-table th { padding: 3px 6px; }
/* ---- گذرنامهٔ انتقال (ADR 0021 مرحلهٔ ۲) ---- */
.fp-hint { font-size: .78rem; color: var(--muted); line-height: 1.8; }
.fp-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.fp-grid .jr-field { min-width: 220px; flex: 1; }
.fp-grid .fp-wide { flex-basis: 100%; }
.pc-visit { border: 1px solid #E5E7EB; border-radius: 8px; padding: 6px 8px; margin-top: 6px; }
.pc-visit-late { border-color: #FCD34D; background: #FFFBEB; }
.jr-measures { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; font-size: 12.5px; }
.jr-measure b { color: #92400E; margin-left: 4px; }
.jr-chart { background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; padding: 6px; }
.jr-footnote {
  margin-top: 8px;
  border-right: 3px solid #F7941D;
  background: #FFFBEB;
  color: #78350F;
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 11.5px;
  line-height: 1.8;
}

/* ---- پنل کارشناس ---- */
.jr-tabs { margin-bottom: 10px; }
.jr-review { display: grid; grid-template-columns: 190px 1fr; gap: 12px; border: 1px solid #E5E7EB; border-radius: 12px; padding: 10px; margin-bottom: 10px; background: #fff; }
.jr-review-photo img { width: 100%; height: 150px; object-fit: cover; border-radius: 10px; }
.jr-review-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.jr-note { background: #F9FAFB; border-right: 3px solid #F7941D; padding: 6px 8px; border-radius: 8px; font-size: 12.5px; margin: 4px 0; }
.jr-followup { border: 1px solid #FDE9C8; background: #FFFDF5; border-radius: 12px; padding: 8px 10px; margin-top: 8px; font-size: 12.5px; }
.jr-scorecard { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 10px 0; }
.jr-score { border: 1px solid #E5E7EB; border-radius: 12px; padding: 8px; background: #fff; }
.jr-score-head { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; }
.jr-score-head span { color: #B45309; font-weight: 700; }
.jr-bar { height: 8px; background: #F3F4F6; border-radius: 999px; overflow: hidden; margin: 5px 0; }
.jr-bar i { display: block; height: 100%; background: linear-gradient(90deg, #F7C948, #F7941D); }
.jr-parts { margin: 4px 0 0; padding-right: 16px; font-size: 11.5px; color: #4B5563; }
.jr-siblings { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.jr-pill { border: 1px solid #E7C57A; background: #FFFBEB; color: #92400E; border-radius: 999px; padding: 5px 12px; cursor: pointer; font-family: inherit; font-size: 12px; }
.jr-pill-on { background: linear-gradient(135deg, #F7C948, #F7941D); color: #4A2A03; border-color: #F7941D; font-weight: 700; }

/* ---- اول-موبایل: روی گوشی نوار کنار به نوار افقی پایین تبدیل می‌شود ---- */
.jr-rail {
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  transform: none;
  flex-direction: row;
  justify-content: space-around;
  border-radius: 18px 18px 0 0;
  padding: 6px;
}
.jr-rail-btn { width: auto; flex: 1; }
.jr-rail-btn i { font-size: 9px; }
.jr-hero { grid-template-columns: 1fr; }
.jr-hero-side { flex-direction: row; }
.jr-stat { flex: 1; }
.jr-review { grid-template-columns: 1fr; }
.jr-drawer { padding-bottom: 90px; }

/*: اصلاحات نوار پایین روی گوشی (بازبینی UX):
   - برچسب‌های بلند («صدای آرامش‌بخش») به خط سوم می‌رفتند و از پایین صفحه بریده
     می‌شدند؛ حالا حداکثر دو خط با نقطه‌چین، در ارتفاعی که کامل جا شود.
   - دکمهٔ شناور چت روی نشان اول نوار می‌افتاد؛ بالای نوار منتقل شد. */
@media (max-width: 760px) {
  .jr-rail { padding: 5px 4px calc(5px + env(safe-area-inset-bottom)); gap: 4px; }
  .jr-rail-crown,
  .jr-rail-btn { min-width: 0; padding: 5px 2px; gap: 1px; }
  .jr-rail-crown span,
  .jr-rail-btn span { font-size: 15px; }
  .jr-rail-crown i,
  .jr-rail-btn i {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden; overflow-wrap: anywhere; font-size: 8.5px; line-height: 1.15;
  }
  .chat-fab { bottom: 86px; }
  .chat-popup { bottom: 158px; }
  /*: آخرین ردیف محتوا زیر نوار ثابت پنهان نماند (فقط صفحه‌هایی که نوار دارند) */
  .page:has(.jr-rail) { padding-bottom: 84px; }
}
@media (min-width: 761px) {
  /*: نوار کناری حرفهٔ میزبانی روی صفحه‌های پهن، به شکل ستون کنار برگردد */
  .jr-rail {
    left: 10px;
    right: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    flex-direction: column;
    justify-content: flex-start;
    border-radius: 22px;
    padding: 8px 6px;
  }
  .jr-rail-btn { width: 52px; flex: none; }
  .jr-rail-btn i { font-size: 9.5px; }
  .jr-hero { grid-template-columns: 130px 1fr; }
  .jr-hero-side { flex-direction: column; }
  .jr-stat { flex: none; }
  .jr-review { grid-template-columns: 190px 1fr; }
  .jr-drawer { padding-bottom: 0; }
}

/* ---------------------------------------------------------------
   دستیار مشاور خانواده (ADR 0022) — بخش خانواده (fc-*) و کارشناس (cp-*)
   --------------------------------------------------------------- */

.fc-card .thread-head { align-items: flex-start; }

.fc-notice {
  background: #fbfcff;
  border: 1px dashed var(--primary);
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 8px;
}
.fc-notice-title { font-weight: 700; margin-bottom: 4px; }
.fc-notice p { margin: 0 0 8px; font-size: .85rem; line-height: 1.9; }

.fc-hint { font-size: .76rem; color: var(--muted); margin-top: 6px; line-height: 1.9; }

.fc-thread {
  margin-top: 10px;
  max-height: 380px;
  overflow-y: auto;
  padding: 6px 2px;
}
.fc-empty { font-size: .82rem; color: var(--muted); padding: 10px 4px; }

.fc-msg { display: flex; flex-direction: column; margin-bottom: 10px; }
.fc-msg.fc-family { align-items: flex-start; }
.fc-msg.fc-assistant { align-items: flex-end; }

.fc-bubble {
  max-width: 82%;
  border-radius: 12px;
  padding: 8px 12px;
  font-size: .86rem;
  line-height: 2;
  white-space: pre-wrap;
}
.fc-family .fc-bubble { background: #eef2ff; border: 1px solid #dbe3ff; }
.fc-assistant .fc-bubble { background: #f4fbf6; border: 1px solid #d7efdf; }

.fc-referral {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
  font-size: .76rem;
  color: #8a5a00;
}
.fc-meta { font-size: .7rem; color: var(--muted); margin-top: 3px; }

.fc-compose { display: flex; gap: 8px; align-items: flex-end; margin-top: 8px; }
.fc-compose textarea { flex: 1; resize: vertical; }

.fc-note-strip {
  background: #fff8e6;
  border: 1px solid #f0dfae;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: .78rem;
  margin: 8px 0;
}

.cp-transcript .cp-thread { max-height: 440px; }
.cp-sources { margin-top: 6px; font-size: .74rem; color: var(--muted); line-height: 1.9; }
.cp-ungrounded { color: var(--red); font-weight: 700; }
.cp-error { color: var(--red); font-size: .74rem; margin-top: 3px; }
.cp-feedback { margin-top: 4px; font-size: .74rem; color: var(--primary-dark); }

.cp-escalations {
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fdfafa;
}
.cp-escalation-row { font-size: .78rem; margin-top: 5px; line-height: 2; }

.cp-feedback-form {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fbfcff;
}

.cp-profile {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f7f9ff;
}
.cp-inference {
  display: inline-block;
  margin-inline-start: 6px;
  font-size: .7rem;
  padding: 1px 8px;
  border-radius: 999px;
  background: #e8ecff;
  color: var(--primary-dark);
}

/* ---------------------------------------------------------------
   نوار گام‌های پنل خانواده در حالت هفت‌ستونی (ADR 0014)
   --------------------------------------------------------------- */

/* قرص‌ها باید در هفت ستون جا شوند؛ قاعدهٔ پایه `min-width: 168px` داشت.
   متن وضعیت هم در همین عرض باریک می‌شکند، پس ارتفاع کمینه هم‌اندازه می‌شود. */
.steps .step-pill {
  min-width: 0; padding: 10px 10px 12px; min-height: 104px;
  display: flex; flex-direction: column;
}
.steps .step-pill .title { font-size: .82rem; gap: 4px; flex-wrap: wrap; line-height: 1.5; }
.steps .step-pill .num { width: 22px; height: 22px; font-size: .72rem; margin-left: 6px; flex: 0 0 auto; }
.steps .step-pill .sub { display: block; font-size: .7rem; line-height: 1.7; margin-top: 4px; }

/* تعداد ستون‌های نوار گام‌ها در بالای همین فایل و به‌صورت اول-موبایل تعریف شده است
   (پایه ۲ ستون → ۶۲۱px چهار ستون → ۱۰۸۱px هفت ستون)، پس اینجا تکرار نمی‌شود. */

/* سرتیتر گام‌های میزبانی (۵ تا ۷): عنوان و وضعیت همان گام */
.step-head { background: #fbfcff; margin-bottom: 12px; }
.step-head .thread-head { align-items: flex-start; }

/* ---------------------------------------------------------------
   پنل مدیر: نوار کناری چسبان + بخش‌های تاشو
   (بخش‌های بسته پنهان می‌شوند ولی unmount نمی‌شوند تا ویرایش نیمه‌کاره نپرد)
   --------------------------------------------------------------- */

/*: اول-موبایل: نوار کناری مدیر روی گوشی زیر محتوا می‌آید */
.admin-layout { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 981px) { .admin-layout { grid-template-columns: 250px minmax(0, 1fr); } }
.admin-main { min-width: 0; }

.admin-nav {
  background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 10px;
}
.admin-nav-tools { margin-bottom: 6px; }
.admin-nav-group { margin-bottom: 10px; }
.admin-nav-group-head {
  display: flex; align-items: center; gap: 4px; width: 100%; text-align: right;
  background: transparent; border: 0; border-radius: 8px; padding: 6px 6px 4px;
  font: inherit; font-size: .74rem; font-weight: 700; color: var(--muted); cursor: pointer;
}
.admin-nav-group-head:hover { background: #f7f9ff; color: var(--primary-dark); }
.admin-nav-group-head.on { color: var(--primary-dark); }
.admin-nav-caret { font-size: .7rem; width: 10px; color: var(--primary); }
.admin-nav-item {
  display: block; width: 100%; text-align: right; background: transparent; border: 0;
  border-radius: 8px; padding: 7px 8px; font: inherit; font-size: .82rem; color: var(--text); cursor: pointer;
}
.admin-nav-item:hover { background: #f3f6fd; }
.admin-nav-item.on { background: #eaf0ff; color: var(--primary-dark); font-weight: 700; }

.admin-sec { background: #fff; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; }
.admin-sec.open { border-color: #cfd9f5; }
.admin-sec-head {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: right;
  background: transparent; border: 0; padding: 12px 14px; font: inherit; cursor: pointer;
}
.admin-sec-head b { font-size: .95rem; }
.admin-sec-hint { color: var(--muted); font-size: .74rem; }
.admin-sec-chev { color: var(--primary); font-size: .8rem; width: 12px; }
.admin-sec-body { padding: 0 14px 14px; }

/* کارت داخلی درون بخش، قاب دوباره نمی‌خواهد (قاب خود بخش کافی است) */
.admin-sec-body > .card { border: 0; background: transparent; padding: 0; margin: 0; }
/* نخستین عنصر هر بخش، خط/فاصلهٔ جداکنندهٔ بالای خود را نمی‌خواهد */
.admin-sec-body > :first-child { margin-top: 0 !important; border-top: 0 !important; padding-top: 0 !important; }

/* «محرمانگی هویت کودک» (ADR 0204) — خلاصهٔ وضعیت و فهرست جست‌وجوپذیر افراد.
   پیش‌تر گرید چک‌باکس داخل جعبهٔ اسکرولی بود و وضعیت فعلی دیده نمی‌شد. */
.cna-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.cna-stat { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; background: #fafbff; }
.cna-stat span { display: block; font-size: .74rem; color: var(--muted); }
.cna-stat b { display: block; font-size: .9rem; color: var(--primary-dark); margin-top: 2px; }
.cna-users {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 6px;
  margin-top: 6px; max-height: 260px; overflow-y: auto;
}
.cna-user {
  display: flex; align-items: center; gap: 8px; border: 1px solid var(--border);
  border-radius: 9px; padding: 6px 10px; background: #fff; cursor: pointer;
}
.cna-user.on { border-color: var(--green); background: #e9f8f1; }
.cna-user input { width: 17px; height: 17px; accent-color: var(--green); flex: none; }
.cna-user-name { font-size: .84rem; }
.cna-user em { font-size: .72rem; color: var(--muted); font-style: normal; }
@media (pointer: coarse) {
  .cna-user { min-height: 44px; }
  .cna-user input { width: 22px; height: 22px; }
}

/* دکمهٔ شناور «فهرست بخش‌ها» در پنل مدیر (پس از دور شدن از بالای صفحه) */
.admin-top-fab {
  position: fixed; bottom: 18px; left: 18px; z-index: 30;
  background: #fff; border: 1px solid var(--border); border-radius: 999px;
  padding: 8px 14px; font: inherit; font-size: .8rem; color: var(--primary-dark);
  box-shadow: 0 6px 18px rgba(20, 40, 90, .12); cursor: pointer;
}
.admin-top-fab:hover { background: #f3f6fd; }

/* چسبان‌بودن فهرست اختیاری است (خود کاربر روشن/خاموش می‌کند).
   در حالت چسبان، فهرست تا پایین ستون همراه می‌ماند و بعد رها می‌شود؛ سرریز
   داخلی ندارد تا چرخ‌ماوس روی آن هم صفحه را اسکرول کند. */
.admin-nav.sticky { position: sticky; top: 12px; }

.admin-nav-sticky {
  display: flex; align-items: center; gap: 6px; margin-top: 6px;
  font-size: .74rem; color: var(--muted); cursor: pointer;
}
.admin-nav-sticky input { width: 14px; height: 14px; }

.admin-nav-note { font-size: .7rem; color: var(--muted); margin-top: 4px; line-height: 1.7; }

/* ---- تختهٔ کشیدنی وظایف (کانبان) — ADR 0051 ---------------------------------
   اول-موبایل: پایه ستون‌ها عمودی‌اند (روی گوشی خوانا و بدون اسکرول افقی)،
   و از ۹۰۰px به بالا به ردیف افقی قابل‌اسکرول با کارت‌های هم‌عرض تبدیل می‌شوند. */
.board-hint { font-size: .76rem; color: var(--muted); margin-top: 8px; line-height: 1.8; }
.board-columns { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.board-column { background: #f7f9fd; border: 1px solid var(--border); border-radius: 12px; padding: 10px; min-width: 0; }
/*: ستونی که کارِ در حال کشیدن روی آن است و گذار مجاز دارد */
.board-column.board-drop { border-color: var(--primary); background: #eef2fb; box-shadow: inset 0 0 0 2px rgba(87, 98, 168, .18); }
.board-column-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.board-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 4px; }
.board-card-movable { cursor: grab; }
.board-card-movable:active { cursor: grabbing; }
.board-card-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.board-card-title { cursor: pointer; font-size: .88rem; line-height: 1.6; }
.board-card-title:hover { color: var(--primary-dark); text-decoration: underline; }
.board-card-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: .74rem; color: var(--muted); }
.board-card-due { font-size: .76rem; }
.board-card-note { font-size: .74rem; color: var(--amber); }
.board-card-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
@media (min-width: 900px) {
  .board-columns { flex-direction: row; align-items: flex-start; overflow-x: auto; padding-bottom: 6px; }
  .board-column { flex: 1 0 260px; max-width: 340px; max-height: 70vh; overflow-y: auto; }
}

/* در نمای «تختهٔ وظایف» شبکهٔ دوستونهٔ کارتابل پنهان می‌شود تا تخته تمام‌عرض شود */
.cartable-board-mode .cartable-grid { display: none; }

/* ---- پرش سریع (Ctrl+K) و نشان‌گذاری پرونده‌ها — ADR 0052 --------------------- */
.qj-hint {
  display: inline-flex; align-items: center; gap: 6px; background: #fff;
  border: 1px solid var(--border); border-radius: 8px; padding: 5px 10px;
  font: inherit; font-size: .78rem; color: var(--muted); cursor: pointer;
}
.qj-hint:hover { background: #f3f6fd; color: var(--primary-dark); }
.qj-kbd { border: 1px solid var(--border); border-radius: 6px; padding: 0 6px; font-size: .68rem; background: #f7f9fd; }
.qj-modal { width: min(560px, 94vw); }
.qj-input { width: 100%; font-size: 1rem; padding: 10px 12px; }
.qj-list { max-height: 46vh; overflow-y: auto; margin-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.qj-group { font-size: .75rem; color: var(--muted); padding: 4px 2px; }
.qj-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: start;
  background: transparent; border: 0; border-radius: 8px; padding: 9px 10px;
  cursor: pointer; font: inherit;
}
.qj-row.on { background: #eef2fb; }
/*: چیپ «تطبیق با کودک» در ردیف پرش سریع (ADR 0214) */
.qj-child { font-size: .72rem; color: var(--muted); background: #f3f6fd; border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.qj-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: .72rem; color: var(--muted); }
/*: ستارهٔ نشان‌گذاری در ردیف کارتابل */
.pin-btn { background: transparent; border: 0; cursor: pointer; font-size: 1.05rem; line-height: 1; padding: 2px 4px; color: var(--muted); }
.pin-btn.on { color: #F7941D; }
.pin-btn:hover { color: #F7941D; }
@media (pointer: coarse) {
  .qj-row { min-height: 44px; }
  .pin-btn { min-width: 44px; min-height: 44px; }
  .qj-hint { min-height: 44px; padding: 10px 14px; }
}

/* ---- کارت آماده‌سازی من (ADR 0055) ---------------------------------------- */
.prep-card { width: min(680px, 95vw); max-height: 86vh; overflow-y: auto; }
.prep-when { border-bottom: 1px solid var(--border); padding-bottom: 8px; margin-bottom: 10px; }
.prep-block { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 8px; }
.prep-block > b { display: block; margin-bottom: 4px; font-size: .88rem; }
.prep-block ul { margin: 0; padding-inline-start: 18px; font-size: .85rem; }
@media (pointer: coarse) {
  /*: دکمهٔ کارت آماده‌سازی در دستور کار، روی لمسی هدف ۴۴px بگیرد */
  [data-prep-open] { min-height: 44px; }
}

/* ---------- مرحلهٔ ۲: گروه‌بندی زیربخش‌ها و «ارزیابی سلامت» (ADR 0062) ---------- */
.stage2-groups { display: flex; flex-direction: column; gap: 16px; }
.stage2-group-head { display: flex; align-items: center; gap: 8px; font-size: .95rem; color: var(--primary-dark); margin-bottom: 8px; }
.stage2-group-icon { font-size: 1.05rem; }
.health-item { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
.health-item-label { font-size: .88rem; margin-bottom: 6px; }
.health-item-opts { display: flex; gap: 8px; flex-wrap: wrap; }
.health-opt {
  border: 1.5px solid var(--border); background: #fff; border-radius: 99px; padding: 5px 14px;
  cursor: pointer; font-size: .82rem; color: var(--muted); display: inline-flex; align-items: center;
}
.health-opt.on { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }
.health-opt input { display: none; }
@media (pointer: coarse) { .health-opt { min-height: 44px; } }

/* فهرست مدارک پزشکی پیوست در «ارزیابی سلامت» (ADR 0064) */
.attach-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.attach-list li {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1px solid var(--border); border-radius: 10px; padding: 6px 10px; font-size: .85rem;
}
.attach-list a { color: var(--primary-dark); word-break: break-all; }
.attach-list .attach-size { color: var(--muted); font-size: .76rem; }
.attach-list .btn { margin-inline-start: auto; }

/* انتخاب مدارک برای «چاپ و بایگانی توسط مؤسسه» (ADR 0070) */
.print-pick-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.print-pick-list li {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1px solid var(--border); border-radius: 10px; padding: 6px 10px; font-size: .85rem;
}
.print-pick-list label { display: flex; align-items: center; gap: 8px; cursor: pointer; flex: 1; }
.print-pick-list input[type="checkbox"] { width: 18px; height: 18px; }
.print-pick-list .pick-file { color: var(--muted); font-size: .76rem; }
@media (pointer: coarse) { .print-pick-list input[type="checkbox"] { width: 22px; height: 22px; } }

/* ---------- برچسب پرونده (خانواده و کودک) — ADR 0068 ---------- */
/* رنگ‌ها از پالت متغیرهای سراسری می‌آیند تا با تغییر پالت رسمی خودکار هم‌رنگ شوند.
   کلید رنگ از سرور می‌آید و به کلاس `tag-<color>` نگاشت می‌شود. هر رنگ یک
   «متغیر محلی» `--tag-c` هم می‌دهد تا نقطهٔ رنگی و حلقهٔ توپی رنگ از همان بخوانند. */
.tag-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 8px 0 12px; padding: 8px 10px; border-radius: 14px;
  border: 1px solid var(--border); background: linear-gradient(180deg, #fbfcff, #f6f8ff);
}
.tag-bar-label { font-size: .76rem; font-weight: 700; color: var(--muted); }
.tag-list { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tag-filter { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.tag-filter-label { font-size: .78rem; color: var(--muted); }
.tag-count { font-size: .74rem; color: var(--muted); }
.tag-empty { font-size: .76rem; color: var(--muted); }

/* چیپ برچسب: قرص رنگی با نقطهٔ هم‌رنگ و کمی سایه تا از پس‌زمینه جدا شود */
.tag-chip {
  display: inline-flex; align-items: center; gap: 5px; border-radius: 99px;
  padding: 3px 8px 3px 10px; font-size: .75rem; font-weight: 700;
  border: 1px solid transparent; white-space: nowrap; box-shadow: 0 1px 2px rgba(53, 61, 99, .07);
}
.tag-chip button {
  border: 0; background: transparent; color: inherit; cursor: pointer;
  font-family: inherit; font-size: 1rem; line-height: 1; padding: 0 2px; border-radius: 50%;
}
.tag-chip button:hover { background: rgba(0, 0, 0, .07); }
.tag-chip button:disabled { opacity: .5; cursor: default; }

/* رنگ برچسب: پالت متن/پس‌زمینه + رنگ نقطه و توپی در `--tag-c` */
.tag-brand { --tag-c: var(--primary); background: #eef3fe; color: var(--primary-dark); border-color: #d7e0f8; }
.tag-green { --tag-c: var(--green); background: #e3f8ef; color: #0d7a4f; border-color: #bfe8d4; }
.tag-amber { --tag-c: var(--amber); background: #fff4e0; color: #9a6500; border-color: #f0cd8a; }
.tag-red { --tag-c: var(--red); background: #fdecec; color: #a42323; border-color: #f5cfcf; }
.tag-violet { --tag-c: #7C5CD6; background: #f1ecfd; color: #5b3fa8; border-color: #ded2f7; }
.tag-slate { --tag-c: #94A3B8; background: #eef1f7; color: var(--muted); border-color: #dde2ec; }

/* نقطهٔ رنگی برچسب (داخل چیپ و قرص‌ها) */
.tag-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--tag-c, var(--primary)); }
.tag-dot-brand { --tag-c: var(--primary); }
.tag-dot-green { --tag-c: var(--green); }
.tag-dot-amber { --tag-c: var(--amber); }
.tag-dot-red { --tag-c: var(--red); }
.tag-dot-violet { --tag-c: #7C5CD6; }
.tag-dot-slate { --tag-c: #94A3B8; }

/* دکمهٔ گشودن پنل برچسب */
.tag-add-btn {
  border: 1.5px dashed var(--primary); background: #fff; color: var(--primary-dark);
  border-radius: 99px; padding: 4px 12px; font-family: inherit;
  font-size: .78rem; font-weight: 700; cursor: pointer; transition: background .15s ease, box-shadow .15s ease;
}
.tag-add-btn:hover:not(:disabled) { background: #eef3fe; box-shadow: 0 2px 8px rgba(87, 98, 168, .15); }
.tag-add-btn.on { border-style: solid; background: var(--primary); color: #fff; border-color: var(--primary); }
.tag-add-btn:disabled { opacity: .55; cursor: default; }

/* پنل برچسب‌ها: فهرست کامل برچسب‌های ساخته‌شده + ساخت برچسب تازه */
.tag-panel {
  width: 100%; display: flex; flex-direction: column; gap: 8px; margin-top: 4px;
  padding: 12px; border: 1px solid var(--border); border-radius: 14px;
  background: #fff; box-shadow: var(--shadow);
}
.tag-panel-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tag-panel-head b { font-size: .88rem; }
.tag-search { flex: 1; min-width: 160px; font-size: .8rem; padding: 5px 10px; }
.tag-section {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding-top: 8px; border-top: 1px dashed var(--border);
}
.tag-section-label { font-size: .74rem; font-weight: 700; color: var(--muted); }

/* قرص‌های گزینش: کلیک = چسباندن/برداشتن */
.tag-pick {
  display: inline-flex; align-items: center; gap: 5px; border-radius: 99px;
  border: 1px solid var(--border); background: #fff; color: var(--text);
  padding: 4px 11px; font-family: inherit; font-size: .76rem; font-weight: 700;
  cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.tag-pick:hover:not(:disabled) { border-color: var(--primary); transform: translateY(-1px); box-shadow: 0 3px 10px rgba(87, 98, 168, .18); }
.tag-pick:disabled { opacity: .55; cursor: default; }
.tag-pick.on { background: #eef3fe; border-color: var(--primary); color: var(--primary-dark); }
.tag-pick.on:hover:not(:disabled) { background: #fdecec; border-color: var(--red); color: #a42323; }
.tag-check { font-size: .78rem; color: var(--green); font-weight: 900; }
.tag-pick-count { font-size: .68rem; color: var(--muted); background: #f1f3f9; border-radius: 99px; padding: 0 6px; }
.tag-pick.on .tag-pick-count { background: #fff; }

/* توپی‌های رنگ (به‌جای فهرست کشویی رنگ) */
.tag-palette { display: inline-flex; align-items: center; gap: 7px; }
.tag-ball {
  width: 20px; height: 20px; border-radius: 50%; border: 0; padding: 0;
  cursor: pointer; background: var(--tag-c); box-shadow: 0 0 0 1px rgba(35, 31, 32, .12);
  transition: transform .12s ease, box-shadow .12s ease;
}
.tag-ball:hover { transform: scale(1.12); }
.tag-ball.on { transform: scale(1.12); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--tag-c); }
.tag-ball-brand { --tag-c: var(--primary); }
.tag-ball-green { --tag-c: var(--green); }
.tag-ball-amber { --tag-c: var(--amber); }
.tag-ball-red { --tag-c: var(--red); }
.tag-ball-violet { --tag-c: #7C5CD6; }
.tag-ball-slate { --tag-c: #94A3B8; }

/* ساخت برچسب تازه + پیش‌نمایش زنده */
.tag-new-title { flex: 1; min-width: 150px; font-size: .8rem; padding: 5px 10px; }
.tag-preview { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--muted); }

/* قرص پالایهٔ فهرست (روی `.chip-btn` موجود) */
.tag-filter-chip { display: inline-flex; align-items: center; gap: 5px; }
/*: حالت «ندارد» (ADR 0112): قرمزِ ملایم با خط‌خوردگی — مقابلِ آشکار حالت «دارید» (.on) */
.tag-filter-chip.off { background: var(--red, #c00); border-color: var(--red, #c00); color: #fff; }
.tag-filter-chip.off .tag-filter-count { opacity: .8; }
.tag-filter-count { font-size: .68rem; opacity: .75; }

@media (pointer: coarse) {
  /* هدف لمسی ۴۴ پیکسلی — قاعدهٔ «اول-موبایل» پروژه */
  .tag-chip { min-height: 34px; }
  .tag-chip button { min-width: 34px; min-height: 34px; }
  .tag-add-btn { min-height: 44px; padding: 10px 14px; }
  .tag-pick { min-height: 44px; padding: 10px 14px; }
  .tag-ball { width: 30px; height: 30px; }
  .tag-section .btn-sm { min-height: 44px; }
}

/* انتخاب نوبت پیشنهادی در «تعیین وقت مشاوره» (ADR 0072) */
.slot-pick { margin-top: 8px; border-top: 1px dashed var(--border); padding-top: 8px; }
.slot-pick-head { font-size: .8rem; color: var(--muted); margin-bottom: 6px; }
.slot-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.slot-chip {
  border: 1.5px solid var(--border); background: #fff; border-radius: 99px; padding: 5px 12px;
  cursor: pointer; font-family: inherit; font-size: .8rem; color: var(--primary-dark);
}
.slot-chip.on { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }
@media (pointer: coarse) { .slot-chip { min-height: 44px; } }

/* ---------- جعبهٔ بازخورد کارشناس — دکمهٔ شناور (ADR 0081) ----------
   چرا شناور؟ خواستهٔ کارفرما «جدا از فضای کاری» بود؛ پس هیچ زبانه‌ای اشغال نمی‌کند و
   از هر جای پیشخوان در دسترس است. `inset-inline-end` یعنی در RTL سمت چپ می‌نشیند،
   جایی که با پنل‌های کنارِ کارتابل (سمت راست) تلاقی نکند. */
.fb-wrap { position: fixed; inset-inline-end: 18px; inset-block-end: 18px; z-index: 60; }
.fb-launch {
  box-shadow: 0 4px 14px rgba(53, 61, 99, .22);
  background: #fff; border: 1.5px solid var(--primary); color: var(--primary-dark); font-weight: 700;
}
.fb-launch:hover { background: #eef3fe; }
@media (pointer: coarse) { .fb-launch { min-height: 44px; padding: 10px 16px; } }
@media (max-width: 640px) { .fb-wrap { inset-inline-end: 10px; inset-block-end: 10px; } }

/* ---------- راهنمای درون‌برنامه‌ای — دکمهٔ شناور، نشان «؟» و پنل (ADR 0085) ----------
   دکمهٔ شناور عمداً **بالای** دکمهٔ بازخورد کارشناس می‌نشیند (همان گوشهٔ «پایان» =
   چپ در RTL): این‌طور هر دو یک ستون قابل‌پیش‌بینی می‌سازند و با پنل‌های کناری کارتابل
   (سمت «شروع») تلاقی نمی‌کنند. فاصلهٔ عمودی ۷۲px بالای دکمهٔ بازخورد جا می‌دهد. */
.hp-fab-wrap { position: fixed; inset-inline-end: 18px; inset-block-end: 72px; z-index: 61; }
.hp-fab {
  box-shadow: 0 4px 14px rgba(53, 61, 99, .22);
  background: #fff; border: 1.5px solid var(--primary); color: var(--primary-dark); font-weight: 700;
}
.hp-fab:hover { background: #eef3fe; }
@media (pointer: coarse) { .hp-fab { min-height: 44px; padding: 10px 16px; } }
@media (max-width: 640px) { .hp-fab-wrap { inset-inline-end: 10px; inset-block-end: 62px; } }

/*: پیشخوان خانواده یک دکمهٔ شناور دیگر هم دارد (چت، ۶۰×۶۰ در پایین)؛ پیش‌تر دکمهٔ
   راهنما رویش می‌افتاد (گزارش کارفرما). اکنون راهنما **بالای** چت می‌نشیند و روی
   گوشی نوار «سفر میزبانی» را هم رد می‌کند. */
.hp-fab-wrap.hp-fab-family { inset-block-end: 94px; }
@media (max-width: 760px) { .hp-fab-wrap.hp-fab-family { inset-block-end: 158px; } }

/* نشان «؟» کنار کارت، فیلد یا عنوان — کوچک و بی‌سر‌و‌صدا تا چیدمان را نشکند. */
.hp-dot {
  border: 1.5px solid var(--border); background: #fff; color: var(--primary-dark);
  border-radius: 99px; width: 20px; height: 20px; min-width: 20px; padding: 0;
  font-family: inherit; font-size: .72rem; font-weight: 700; line-height: 1;
  cursor: pointer; vertical-align: middle; margin-inline-start: 6px;
}
.hp-dot:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
/*: روی لمس، خودِ نشان به هدف لمسی ۴۴ پیکسلی بزرگ می‌شود. ۳۰ پیکسل پیشین
 *  هم از قاعدهٔ پروژه (۴۴px ذیل `pointer: coarse`) کمتر بود و هم بررسی
 *  «هدف‌های لمسی» در `tools/ui_smoke.mjs` را سرخ می‌کرد. */
@media (pointer: coarse) { .hp-dot { width: 44px; height: 44px; min-width: 44px; font-size: 1rem; } }
/*: قاعدهٔ لمسی کافی **نیست**: بررسی «هدف‌های لمسی» در `tools/ui_smoke.mjs` در عرض
 *  ۳۶۰px و بدون شبیه‌سازی اشاره‌گر لمسی می‌سنجد، پس همان ۲۰px را کوچک می‌شمارد — و
 *  درست می‌شمارد (هدف ۲۰px روی گوشی هم غلط است). پس هدف را به عرض پنجره هم گره می‌زنیم. */
@media (max-width: 720px) { .hp-dot { width: 40px; height: 40px; min-width: 40px; font-size: 1rem; } }

/* پنل: کشوی کنارِ «شروع» (راست در RTL) روی رایانه، تمام‌عرض روی موبایل. */
.hp-overlay { position: fixed; inset: 0; z-index: 120; background: rgba(15, 23, 42, .45); display: flex; }
.hp-panel {
  background: #fff; width: min(440px, 100%); height: 100%; overflow-y: auto;
  display: flex; flex-direction: column; box-shadow: -6px 0 24px rgba(15, 23, 42, .18);
  animation: hp-slide .18s ease-out;
}
@keyframes hp-slide { from { transform: translateX(16px); opacity: .55; } to { transform: none; opacity: 1; } }

.hp-head {
  position: sticky; top: 0; z-index: 2; background: #fff; border-bottom: 1px solid var(--border);
  padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.hp-head-text { display: flex; flex-direction: column; min-width: 0; }
.hp-head-sub { color: var(--muted); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-search-wrap { padding: 10px 14px 0; }
.hp-search {
  width: 100%; border: 1.5px solid var(--border); border-radius: 10px; padding: 8px 10px;
  font-family: inherit; font-size: 16px; background: #fff;
}
.hp-search:focus { outline: none; border-color: var(--primary); }
.hp-hint {
  margin: 10px 14px 0; padding: 8px 10px; border-radius: 10px; font-size: .78rem;
  background: #fff7e6; border: 1px solid #f2d9a8; color: #8a5a00;
}
.hp-body { padding: 12px 14px 28px; }

.hp-sec { margin-block-start: 16px; }
.hp-sec-title { font-size: .82rem; color: var(--muted); margin: 0 0 8px; font-weight: 700; }
.hp-toggle {
  border: 0; background: none; padding: 0; font: inherit; color: var(--primary-dark);
  cursor: pointer; font-weight: 700;
}
.hp-empty { color: var(--muted); font-size: .84rem; padding: 12px 0; }

.hp-topic-title { font-size: 1.05rem; margin: 0 0 6px; color: var(--text); }
.hp-topic-short { color: var(--primary-dark); font-size: .86rem; margin: 0 0 10px; }
.hp-back {
  border: 0; background: none; padding: 0 0 8px; font: inherit; cursor: pointer;
  color: var(--primary-dark); font-size: .8rem;
}
.hp-text { font-size: .86rem; line-height: 1.9; color: var(--text); }
.hp-p { margin: 0 0 10px; }
.hp-h { margin: 14px 0 6px; font-weight: 700; color: var(--primary-dark); font-size: .84rem; }
.hp-ul, .hp-ol { margin: 0 0 10px; padding-inline-start: 20px; }
.hp-ul li, .hp-ol li { margin-block-end: 5px; }

.hp-rows { list-style: none; margin: 0; padding: 0; }
.hp-row {
  display: block; width: 100%; text-align: start; border: 1px solid var(--border); background: #fff;
  border-radius: 10px; padding: 8px 10px; margin-block-end: 6px; cursor: pointer; font-family: inherit;
}
.hp-row:hover { border-color: var(--primary); background: #f7f9ff; }
.hp-row.on { border-color: var(--primary); background: #eef3fe; }
.hp-row-title { display: block; font-size: .84rem; font-weight: 700; color: var(--text); }
.hp-row-short { display: block; font-size: .74rem; color: var(--muted); }

.hp-ask { display: flex; gap: 8px; align-items: center; }
.hp-ask-input {
  flex: 1; border: 1.5px solid var(--border); border-radius: 10px; padding: 8px 10px;
  font-family: inherit; font-size: 16px;
}
.hp-ask-input:focus { outline: none; border-color: var(--primary); }
.hp-ask-note { font-size: .74rem; color: var(--muted); margin: 8px 0 0; }
.hp-answer { margin-block-start: 10px; padding: 10px; border-radius: 10px; background: #f4f7ff; border: 1px solid var(--border); }
.hp-answer.bad { background: #fdf3f2; border-color: #e8c4c0; }
.hp-foot { margin-block-start: 18px; border-top: 1px dashed var(--border); padding-block-start: 12px; }
.hp-sent { font-size: .8rem; color: var(--green); font-weight: 700; }
.hp-sent.bad { color: var(--red); }

@media (pointer: coarse) { .hp-row { min-height: 44px; } }
@media (max-width: 720px) {
  .hp-panel { width: 100%; }
  .hp-overlay { align-items: stretch; }
}
/* در چاپ، هیچ دکمهٔ شناور یا پنلی نباید روی کاغذ بیاید. */
@media print { .hp-fab-wrap, .hp-overlay { display: none !important; } }

/* ============================================================================
   پورتال «حامیان و سرمایه‌گذاران اجتماعی» — ADR 0088
   فقط متغیرهای پالت رسمی بهرویش (بدون رنگ/قلم تازه)؛ اول-موبایل با ارتقا در
   `min-width` و هدف‌های لمسی ۴۴px ذیل `pointer: coarse`.
   ========================================================================= */
.dn-portal { max-width: 1180px; }
.dn-hero { position: relative; border-radius: var(--radius); padding: 22px; color: #fff;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  box-shadow: var(--shadow); margin-bottom: 16px; }
.dn-hero-main h1 { margin: 6px 0 10px; font-size: 22px; }
.dn-hero-cap { font-size: 12.5px; opacity: .9; }
.dn-hero-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.dn-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; background: rgba(255,255,255,.16); color: #fff; }
.dn-badge.gold { background: var(--amber); }
.dn-badge.ok { background: var(--green); color: #fff; }
.dn-badge.warn { background: var(--amber); color: #fff; }
.dn-badge.info { background: var(--primary); color: #fff; }
.dn-badge.muted { background: var(--border); color: var(--muted); }
.dn-hero-stats { display: grid; gap: 10px; grid-template-columns: 1fr; margin-top: 16px; }
.dn-hero-stats div { background: rgba(255,255,255,.12); border-radius: 10px; padding: 8px 10px; }
.dn-hero-stats b { display: block; font-size: 17px; }
.dn-hero-stats span { font-size: 11px; opacity: .9; }
.dn-hero-progress { margin-top: 14px; }
.dn-hero-progress-bar { height: 8px; background: rgba(255,255,255,.22); border-radius: 999px; overflow: hidden; }
.dn-hero-progress-bar span { display: block; height: 100%; background: var(--amber); border-radius: 999px; }
.dn-hero-progress small { display: block; margin-top: 6px; font-size: 11px; opacity: .92; }
.dn-hero-exit { margin-top: 14px; }
.dn-toolbar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.dn-monthpicker { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.dn-month-chip { flex: 0 0 auto; border: 1px solid var(--border); background: var(--card); color: var(--text);
  border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12px; cursor: pointer; }
.dn-month-chip.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.dn-month-chip.muted { color: var(--muted); border-style: dashed; }
.dn-toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dn-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.dn-kpi { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px; box-shadow: var(--shadow); }
.dn-kpi b { display: block; font-size: 18px; color: var(--primary-dark); }
.dn-kpi-label { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.dn-kpi i { font-style: normal; font-size: 10.5px; color: var(--muted); }
.dn-kpi-icon { font-size: 16px; }
.dn-kpi-good { border-inline-start: 4px solid var(--green); }
.dn-tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 14px; }
.dn-tab { flex: 0 0 auto; border: 1px solid var(--border); background: var(--card); border-radius: 999px;
  padding: 8px 14px; font: inherit; font-size: 12.5px; cursor: pointer; color: var(--text); }
.dn-tab.on { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.dn-card { margin-bottom: 14px; }
.dn-h2 { display: flex; align-items: center; gap: 6px; font-size: 15px; margin: 0 0 12px; }
.dn-share { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: center; }
.dn-share-gauge { display: flex; justify-content: center; }
.dn-share-big { font-size: 26px; font-weight: 800; color: var(--primary); line-height: 1.4; }
.dn-share-big span { display: block; font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 2px; }
.dn-share-line { font-size: 12.5px; color: var(--text); margin: 8px 0 0; }
.dn-callout { border-inline-start: 4px solid var(--primary); background: #f7f8fd; border-radius: 10px;
  padding: 10px 12px; font-size: 12.5px; margin-top: 10px; }
.dn-callout.good { border-color: var(--green); background: #f3fbf6; }
.dn-callout.warn { border-color: var(--amber); background: #fff9ef; }
.dn-callout b { color: var(--primary-dark); }
.dn-shortfall { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.dn-shortfall p { margin: 6px 0 0; }
.dn-note { font-size: 11.5px; color: var(--muted); margin: 10px 0 0; }
.dn-note.warn-note { color: var(--amber); }
.dn-donut { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: center; }
.dn-donut-ring { width: 176px; height: 176px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; margin: 0 auto; }
.dn-donut-hole { width: 62%; height: 62%; border-radius: 50%; background: var(--card); display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.dn-donut-hole b { font-size: 14px; }
.dn-donut-hole span { font-size: 10.5px; color: var(--muted); }
.dn-legend { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.dn-legend li { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px dashed var(--border); }
.dn-legend li i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.dn-legend li span { flex: 1; }
.dn-legend li b { color: var(--primary-dark); }
.dn-legend li em { font-style: normal; color: var(--muted); font-size: 11px; }
.dn-legend-inline { display: flex; gap: 14px; margin-bottom: 8px; }
.dn-legend-inline span { display: inline-flex; align-items: center; gap: 5px; }
.dn-legend-inline i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.dn-trend { display: flex; align-items: flex-end; gap: 4px; height: 122px; padding-bottom: 2px;
  border-bottom: 1px solid var(--border); overflow-x: auto; }
.dn-trend-col { flex: 1 0 26px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  justify-content: flex-end; }
.dn-trend-bars { display: flex; align-items: flex-end; gap: 2px; height: 100px; }
.dn-trend-bar { width: 9px; border-radius: 3px 3px 0 0; display: block; }
.dn-bar-mine { background: var(--primary); }
.dn-bar-all { background: var(--border); }
.dn-trend-col small { font-size: 9.5px; color: var(--muted); }
.dn-activity { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dn-activity-tile { background: #f7f8fd; border-radius: 10px; padding: 10px; text-align: center; }
.dn-activity-tile b { display: block; font-size: 18px; color: var(--primary-dark); }
.dn-activity-tile small { display: block; font-size: 11px; color: var(--muted); }
.dn-highlights { margin: 10px 0 0; padding-inline-start: 18px; font-size: 12.5px; }
.dn-pledges { display: grid; grid-template-columns: 1fr; gap: 10px; }
.dn-pledge { border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: #fbfcff; }
.dn-pledge-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dn-pledge-meta { font-size: 12px; color: var(--muted); margin-top: 6px; }
.dn-pledge-note { font-size: 12px; margin-top: 8px; }
.dn-months td, .dn-months th { white-space: nowrap; }
.dn-row-active { background: #f2f5fd; }
.dn-kpis-3 { grid-template-columns: 1fr; }
.dn-login-wrap { display: flex; justify-content: center; }
.dn-login-card { max-width: 460px; width: 100%; }
.dn-login-hero { text-align: center; margin-bottom: 16px; }
.dn-login-logo { width: 52px; height: 52px; }
.dn-login-hero h1 { font-size: 19px; margin: 8px 0 6px; }
.dn-login-hero p { font-size: 12.5px; color: var(--muted); margin: 0; }
.dn-login-foot { text-align: center; margin-top: 14px; font-size: 12px; }
.dn-foot { font-size: 11.5px; color: var(--muted); margin: 18px 0 0; }
@media (min-width: 721px) {
  .dn-kpis { grid-template-columns: repeat(4, 1fr); }
  .dn-hero-stats { grid-template-columns: repeat(3, 1fr); }
  .dn-toolbar { flex-direction: row; align-items: center; justify-content: space-between; }
  .dn-share { grid-template-columns: auto 1fr; }
  .dn-donut { grid-template-columns: auto 1fr; }
  .dn-activity { grid-template-columns: repeat(4, 1fr); }
  .dn-pledges { grid-template-columns: repeat(2, 1fr); }
  .dn-kpis-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (pointer: coarse) {
  .dn-month-chip, .dn-tab { min-height: 44px; padding: 10px 16px; }
}



/* ---- «دفتر یادگار من» و «برد یادگارها» (ADR 0090) ------------------------- */

.dn-h3 { font-size: 13px; margin: 14px 0 8px; color: var(--primary-dark); }

.dn-book-form, .dn-board-form { margin: 10px 0 16px; }

.dn-book-form input, .dn-board-form textarea {

  width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--border);

  border-radius: 10px; background: var(--card); color: var(--text); margin-bottom: 8px; resize: vertical;

}

.dn-book-form input:focus, .dn-board-form textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; }

.dn-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; }

.dn-form-buttons { display: flex; gap: 8px; margin-inline-start: auto; }

.dn-counter { font-size: 11.5px; color: var(--muted); }

.dn-counter.over { color: var(--red); font-weight: 700; }

.dn-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text); }

.dn-check input { width: 18px; height: 18px; margin: 0; }



/* دفتر: کارت‌های «صفحهٔ یادگار» با خط کاغذ دفتر */

.dn-book-list { display: grid; gap: 10px; }

.dn-book-entry {

  border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: #fbfcff;

  border-inline-start: 4px solid var(--primary);

}

.dn-book-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }

.dn-book-head b { font-size: 14px; color: var(--primary-dark); }

.dn-book-head span { font-size: 11.5px; color: var(--muted); }

.dn-book-body { margin: 8px 0 10px; font-size: 13.5px; line-height: 2; white-space: pre-wrap; }

.dn-book-actions { display: flex; gap: 8px; }



/* برد: دیوار کارت‌ها */

.dn-wall { display: grid; grid-template-columns: 1fr; gap: 10px; }

.dn-board-card {

  position: relative; border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px 12px;

  background: linear-gradient(180deg, #ffffff 0%, #f7f8fd 100%); box-shadow: var(--shadow);

}

.dn-board-card.mine { border-color: var(--primary); background: linear-gradient(180deg, #f7f8fd 0%, #eef1fb 100%); }

.dn-board-quote { position: absolute; top: 2px; inset-inline-start: 10px; font-size: 34px; line-height: 1; color: var(--border); }

.dn-board-card p { margin: 6px 0 10px; font-size: 13.5px; line-height: 2; white-space: pre-wrap; }

.dn-board-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px dashed var(--border); padding-top: 8px; }

.dn-board-author { font-size: 12px; font-weight: 700; color: var(--primary-dark); }

.dn-board-date { font-size: 11px; color: var(--muted); }

.dn-board-mine { position: absolute; top: 10px; inset-inline-end: 10px; }

.dn-my-board { margin-bottom: 16px; }

.dn-my-board-row {

  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px dashed var(--border);

  font-size: 12.5px;

}

.dn-my-board-text { flex: 1; min-width: 140px; }



@media (min-width: 721px) {

  .dn-wall { grid-template-columns: repeat(2, 1fr); }

}

@media (min-width: 1081px) {

  .dn-wall { grid-template-columns: repeat(3, 1fr); }

}

@media (pointer: coarse) {

  .dn-check { min-height: 44px; }

  .dn-book-form input, .dn-board-form textarea { font-size: 16px; }

}


/* ---------------------------------------------------------------------------
   آموزش ویدیویی (ADR 0093) — پنل کارشناس، کتابخانه و پخش‌کنندهٔ خانواده.
   عمداً از همان متغیرها و همان زبان بصری سامانه استفاده می‌کند (صفر پالت تازه).
   --------------------------------------------------------------------------- */

/* ---- ویرایشگر کارشناس ---- */
.vt-editor { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.vt-box { background: var(--bg-soft, #f8fafc); border: 1px solid var(--border); border-radius: 12px; padding: 10px; margin: 10px 0; }
.vt-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-bottom: 6px; }
.vt-field { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; color: var(--muted); flex: 1; min-width: 150px; }
.vt-input {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  font: inherit; font-size: .88rem; background: #fff;
}
.vt-num { max-width: 110px; }
.vt-textarea { resize: vertical; }
.vt-check { display: flex; align-items: center; gap: 4px; font-size: .82rem; color: var(--muted); }
.vt-clock { font-size: .8rem; color: var(--primary-dark); font-weight: 700; }
.vt-cut { border: 1px solid var(--border); border-radius: 12px; padding: 10px; margin: 10px 0; background: #fff; }
.vt-cut-no { font-weight: 700; font-size: .86rem; color: var(--primary-dark); }
.vt-question { border-inline-start: 3px solid var(--primary); padding-inline-start: 8px; margin: 8px 0; }
.vt-option { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.vt-radio { display: flex; align-items: center; }
.vt-feedback { max-width: 260px; }

/* ---- کتابخانهٔ خانواده ---- */
.lv-card { margin-bottom: 14px; }
.lv-drawer {
  position: fixed; inset: 0; z-index: 70; background: var(--bg); overflow-y: auto;
  box-shadow: 0 0 60px rgba(15, 23, 42, .28);
}
.lv-drawer-head {
  position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 12px 16px; background: var(--primary); color: #fff;
}
.lv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.lv-chip {
  border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: 6px 12px;
  font: inherit; font-size: .82rem; cursor: pointer; color: inherit;
}
.lv-chip.on { background: var(--primary); color: #fff; border-color: var(--primary); }
.lv-chip i { font-style: normal; opacity: .7; font-size: .74rem; }
.lv-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.lv-tile {
  display: flex; gap: 10px; text-align: start; border: 1px solid var(--border); border-radius: 14px;
  background: #fff; padding: 10px; cursor: pointer; font: inherit; color: inherit; align-items: stretch;
}
.lv-tile-cover {
  width: 84px; min-height: 64px; border-radius: 10px; flex-shrink: 0; background: var(--bg-soft, #eef2f7) center/cover no-repeat;
  display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--primary);
}
.lv-tile-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.lv-tile-body b { font-size: .9rem; }
.lv-tile-body i { font-style: normal; font-size: .74rem; color: var(--muted); }
.lv-tile-meta { font-size: .74rem; color: var(--muted); }
.lv-tile-state { font-size: .74rem; color: var(--primary-dark); }
.lv-bar { display: block; height: 5px; background: var(--border); border-radius: 999px; overflow: hidden; margin: 3px 0; }
.lv-bar-fill { display: block; height: 100%; background: var(--primary); }

/* ---- پخش‌کننده و کات‌ها ---- */
.lv-player { margin-top: 10px; }
.lv-video { width: 100%; max-height: 62vh; background: #000; border-radius: 12px; margin-top: 8px; }
.lv-timeline { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lv-cut-dot {
  font-size: .72rem; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted);
}
.lv-cut-next { border-color: var(--primary); color: var(--primary-dark); font-weight: 700; }
.lv-cut-done { background: #dcfce7; border-color: #86efac; color: #166534; }
.lv-cut-overlay {
  position: fixed; inset: 0; z-index: 80; background: rgba(15, 23, 42, .55);
  display: flex; align-items: flex-start; justify-content: center; padding: 16px; overflow-y: auto;
}
.lv-cut-card { background: #fff; border-radius: 16px; padding: 14px; width: min(620px, 100%); }
.lv-cut-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.lv-cut-note { font-size: .82rem; color: var(--muted); margin-bottom: 8px; }
.lv-question { border-top: 1px dashed var(--border); padding-top: 10px; margin-top: 10px; }
.lv-q-text { font-size: .9rem; font-weight: 700; margin-bottom: 8px; }
.lv-q-no { color: var(--primary-dark); margin-inline-end: 4px; }
.lv-q-hint { font-size: .78rem; color: var(--muted); margin-bottom: 6px; }
.lv-options { display: flex; flex-direction: column; gap: 6px; }
.lv-option {
  border: 1px solid var(--border); background: #fff; border-radius: 10px; padding: 10px 12px;
  text-align: start; font: inherit; font-size: .86rem; cursor: pointer; color: inherit;
}
.lv-option:disabled { cursor: default; opacity: .85; }
.lv-option-ok { background: #dcfce7; border-color: #86efac; }
.lv-option-bad { background: #fee2e2; border-color: #fca5a5; }
.lv-feedback { font-size: .82rem; margin-top: 6px; }
.lv-feedback-ok { color: #166534; }
.lv-feedback-bad { color: #991b1b; }

@media (min-width: 721px) {
  .lv-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1081px) {
  .lv-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (pointer: coarse) {
  .lv-option, .lv-chip, .lv-tile { min-height: 44px; }
  .vt-input, .lv-option, .lv-chip { font-size: 16px; }
}

/* ---- «کارِ این ماه» و واحد اثر — تیتر تک‌اقدامی پورتال حامی (ADR 0091) ------ */
.dn-headline { margin-bottom: 14px; }
.dn-goal {
  position: relative; border: 1px solid var(--border); border-inline-start: 5px solid var(--primary);
  border-radius: var(--radius); padding: 16px; background: linear-gradient(180deg, #ffffff 0%, #f7f8fd 100%);
  box-shadow: var(--shadow);
}
.dn-goal.achieved { border-inline-start-color: var(--green); background: linear-gradient(180deg, #f3fbf6 0%, #eef8f2 100%); }
.dn-goal-empty { border-inline-start-style: dashed; background: var(--card); }
.dn-goal-empty-text { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.dn-goal-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dn-goal-cap { font-size: 12px; font-weight: 700; color: var(--primary-dark); }
.dn-goal-head .dn-badge { background: var(--bg); color: var(--primary-dark); border: 1px solid var(--border); }
.dn-goal-head .dn-badge.info { background: var(--primary); color: #fff; border-color: var(--primary); }
.dn-goal-head .dn-badge.ok { background: var(--green); color: #fff; border-color: var(--green); }
.dn-goal-title { font-size: 18px; margin: 10px 0 4px; color: var(--text); }
.dn-goal-desc { font-size: 13px; color: var(--muted); margin: 0 0 12px; line-height: 1.9; }
.dn-goal-progress { margin-bottom: 12px; }
.dn-goal-bar { height: 12px; background: #eef1f8; border-radius: 999px; overflow: hidden; }
.dn-goal-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 100%); border-radius: 999px; }
.dn-goal.achieved .dn-goal-bar span { background: linear-gradient(90deg, var(--green) 0%, #06702e 100%); }
.dn-goal-numbers { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; margin-top: 8px; }
.dn-goal-numbers b { font-size: 13.5px; color: var(--primary-dark); }
.dn-goal-numbers span { font-size: 11.5px; color: var(--muted); }
.dn-goal-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.dn-goal-supporters { font-size: 12px; color: var(--muted); }

.dn-impact-tiles { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }
.dn-impact-tile {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px; box-shadow: var(--shadow); text-align: center;
}
.dn-impact-tile.good { border-color: var(--green); background: #f6fdf9; }
.dn-impact-tile b { display: block; font-size: 19px; color: var(--primary-dark); }
.dn-impact-tile.good b { color: #0a6b30; }
.dn-impact-tile span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.dn-impact-tile i { display: block; font-style: normal; font-size: 10.5px; color: var(--muted); margin-top: 4px; }

.dn-step {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 10px;
  background: linear-gradient(135deg, #f7f8fd 0%, #eef1fb 100%);
  border: 1px dashed var(--primary); border-radius: var(--radius); padding: 12px 14px;
}
.dn-step-icon { font-size: 22px; }
.dn-step-body { flex: 1; min-width: 180px; }
.dn-step-body b { font-size: 13.5px; color: var(--primary-dark); }
.dn-step-body p { margin: 4px 0 0; font-size: 12px; color: var(--muted); line-height: 1.9; }

@media (min-width: 721px) {
  .dn-impact-tiles { grid-template-columns: repeat(3, 1fr); }
  .dn-goal-title { font-size: 20px; }
}
@media (pointer: coarse) {
  .dn-goal-foot .btn, .dn-step .btn { min-height: 44px; }
}
/* ---- پیشخوان «حامیان و کارِ ماه» (ADR 0094) ------------------------------- */
.da-form { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 8px 0; }
.da-form input, .da-form select { font: inherit; font-size: 16px; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 9px; background: var(--card); color: var(--text); width: 100%; }
.da-form input:focus, .da-form select:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
@media (min-width: 721px) { .da-form { grid-template-columns: repeat(3, 1fr); } }

/* ---- واکنش «هم‌راهی» و دعوت دوستان (ADR 0096) ---------------------------- */

.dn-react { border: 1px solid var(--border); background: var(--card); color: var(--muted); border-radius: 999px;

  padding: 3px 10px; font: inherit; font-size: 11.5px; cursor: pointer; }

.dn-react.on { border-color: var(--primary); background: var(--primary); color: #fff; }

.dn-react:disabled { opacity: .6; cursor: default; }

.dn-invite { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0; }

.dn-invite input { flex: 1; min-width: 220px; font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--border);

  border-radius: 9px; background: #fbfcff; color: var(--text); }

.dn-referred { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px;

  padding: 5px 0; border-bottom: 1px dashed var(--border); }

@media (pointer: coarse) { .dn-react { min-height: 44px; padding: 8px 14px; } }
/* ---- پرداخت آنلاین حامی (ADR 0101) --------------------------------------- */
.dn-pay-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.dn-pay-chip { border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 999px;
  padding: 6px 12px; font: inherit; font-size: 12px; cursor: pointer; }
.dn-pay-chip.on { border-color: var(--primary); background: var(--primary); color: #fff; }
.dn-pay-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.dn-pay-row input { flex: 1; min-width: 200px; font: inherit; font-size: 16px; padding: 9px 11px; border: 1px solid var(--border);
  border-radius: 9px; background: #fbfcff; color: var(--text); }
@media (pointer: coarse) { .dn-pay-chip { min-height: 44px; padding: 10px 14px; } }

/* ---------- اتاق آنلاین جلسه (LiveKit — ADR 0106) ----------------------------
   بازنگری ۲ (گزارش کارفرما: «پنجرهٔ بازشده طراحی بهتری داشته باشد و بشود بستش»):
   اتاق **تمام‌صفحه** با الگوی اسکای‌روم — نوار بالا (عنوان، وضعیت، ساعت جلسه،
   شمار حاضرین)، صحنهٔ تیره، ریل «کاربران/پیام‌ها» و نوار کنترل. خروج در سه راه
   همیشه در دید است (✕ نوار بالا، دکمهٔ سرخ «خروج از جلسه»، کلید Esc).
   اول-موبایل: یک‌ستونه؛ از ۹۰۱px صحنه و ریل کنار هم. هدف لمسی ۴۴px · ورودی ۱۶px. */
.or-wrap { position: fixed; inset: 0; z-index: 1200; display: flex; flex-direction: column;
  background: #1B2140; color: #E8EAF6; overflow: hidden; }
.or-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px;
  background: #232A4A; border-bottom: 1px solid rgba(255, 255, 255, .10); }
.or-head .status-badge { padding: 4px 12px; font-size: .78rem; border: 0; }
.or-title { font-size: .98rem; }
.or-clock { font-size: .84rem; color: #D9DEF5; background: rgba(255, 255, 255, .08);
  border-radius: 8px; padding: 3px 9px; font-variant-numeric: tabular-nums; }
.or-count { font-size: .8rem; color: #C3CAE8; }
.or-raise { font-size: .8rem; color: #FFE08A; }
.or-x { width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); color: #E8EAF6;
  font-family: inherit; font-size: 1rem; line-height: 1; }
.or-x:hover { background: rgba(255, 255, 255, .14); }
.or-leave { margin-inline-start: auto; cursor: pointer; font-family: inherit; font-weight: 700; font-size: .88rem;
  border: 1px solid #E4736A; background: rgba(206, 74, 63, .22); color: #FFD9D5;
  border-radius: 10px; padding: 9px 14px; }
.or-leave:hover { background: var(--red); color: #fff; }
/*: «پایان جلسه» — کنترل کارشناس، جدا از خروج خودش (ADR 0158) */
.or-end { cursor: pointer; font-family: inherit; font-weight: 700; font-size: .88rem;
  border: 1px solid var(--red); background: var(--red); color: #fff;
  border-radius: 10px; padding: 9px 14px; }
.or-end:hover { background: #b03636; }
.or-end:disabled { opacity: .6; cursor: default; }
.or-error { margin: 10px 12px 0; }
.or-wrap .error-box { background: rgba(206, 74, 63, .18); border-color: #E4736A; color: #FFD9D5; }
/*: پیام گذرا به **خانواده** («کارشناس میکروفون شما را روشن کرد») و بارِ «مجوز». */
.or-notice { margin: 10px 12px 0; padding: 8px 12px; border-radius: 10px; font-size: .84rem;
  background: rgba(10, 143, 60, .18); border: 1px solid #2E9E63; color: #D7F5E3; }
/*: مخزن مسیرهای صوتی — عنصرهای `<audio>` این‌جا پنهان‌اند ولی پخش می‌شوند. */
.or-audio-sink { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.or-family-hint { margin-top: 2px; }
.or-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr; gap: 10px;
  padding: 10px; overflow-y: auto; }
.or-stage { background: #0E1224; border-radius: 12px; padding: 10px; min-height: 220px;
  display: flex; flex-direction: column; gap: 10px; }
/*: چیدمان اسکای‌روم: ریل «کاربران/پیام‌ها» سمت **راست** و صحنهٔ تصویر سمت چپ.
   در شبکهٔ راست‌به‌چپ، ستون ۱ سمت راست است؛ پس ریل صریحاً در ستون ۱ می‌نشیند.
   (روی موبایل که یک‌ستونه است، ترتیب DOM حاکم است: اول صحنه، بعد ریل.) */
@media (min-width: 901px) {
  .or-body { grid-template-columns: 340px minmax(0, 1fr); overflow: hidden; }
  .or-side { grid-column: 1; grid-row: 1; }
  .or-stage { grid-column: 2; grid-row: 1; min-height: 0; }
}
.or-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px; align-content: start; overflow-y: auto; }
/*: روی گوشی یک‌ستونه و قاب کاشی هم‌نسبتِ خودِ تصویر می‌شود تا **کل قاب** دیده شود و
   دوربین عمودی/افقی هیچ‌کدام بریده یا بزرگ‌نمایی نشود. */
@media (max-width: 900px) {
  .or-grid { grid-template-columns: 1fr; }
  .or-tile { aspect-ratio: auto; }
  .or-tile video { height: auto; max-height: 60vh; }
}
.or-tile { position: relative; background: #1A2040; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 9; }
/*: `contain` نه `cover`: قابِ کاشی افقی است، ولی دوربین **گوشی عمودی** است؛ با `cover`
   تصویر بریده و بزرگ‌نمایی‌شده دیده می‌شد («تصویر در موبایل نصفه است» — گزارش کارفرما). */
.or-tile video { width: 100%; height: 100%; object-fit: contain; display: block; background: #0E1224; }
/*: آینهٔ نمای خودی (ADR 0189): فقط کاشی دوربینِ محلیِ خودم؛ فقط برای چشم خودم —
   مسیر منتشرشده دست‌نخورده است و طرف مقابل تصویر حقیقی می‌بیند. */
.or-tile-mirror video { transform: scaleX(-1); }
.or-tile-name { position: absolute; inset-block-end: 6px; inset-inline-start: 8px; font-size: .72rem; color: #fff;
  background: rgba(14, 18, 36, .66); border-radius: 6px; padding: 2px 8px; }
/*: کلید «تصویر آینه‌ای» در نوار بالای اتاق — هم‌خانوادهٔ نشانگرهای نوار */
.or-mirror-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; color: #C9CFEA;
  cursor: pointer; user-select: none; }
.or-mirror-toggle input { accent-color: var(--primary, #2B3A8F); cursor: pointer; }
.or-empty { color: #A7B0D0; font-size: .86rem; text-align: center; padding: 26px 8px; }
.or-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.or-btn { cursor: pointer; font-family: inherit; font-size: .84rem; font-weight: 600;
  border-radius: 999px; padding: 9px 16px; border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06); color: #E8EAF6; }
.or-btn:hover { background: rgba(255, 255, 255, .14); }
.or-btn.is-on { background: var(--primary); border-color: var(--primary); color: #fff; }
.or-btn.is-off { background: rgba(255, 255, 255, .04); color: #C3CAE8; }
/*: ضبط ابری اتاق (ADR 0193) — نشانگر برای همه، کنترل برای گرداننده */
.or-recording { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.or-rec-badge { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; font-weight: 700;
  color: #FFD9D9; background: rgba(190, 40, 40, .28); border: 1px solid rgba(220, 70, 70, .5);
  border-radius: 999px; padding: 3px 10px; }
.or-rec-badge::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #FF5252;
  animation: or-rec-pulse 1.6s ease-in-out infinite; }
@keyframes or-rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.or-rec-confirm { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: #E8EAF6; }
.or-rec-list { width: 100%; font-size: .8rem; color: #C9CFEA; }
.or-rec-list summary { cursor: pointer; }
.or-rec-row { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 4px 0; border-bottom: 1px dashed rgba(255, 255, 255, .08); }
/*: تختهٔ سفید و ارائهٔ اسلاید (ADR 0194) — همان خانوادهٔ رنگی اتاق */
.or-board { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px;
  background: rgba(14, 18, 36, .5); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.or-board-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: #E8EAF6; font-size: .84rem; }
.or-board-bar .or-x { margin-inline-start: auto; }
.or-board-stage { position: relative; border-radius: 10px; overflow: hidden; background: #0E1224; }
.or-board-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.or-board-canvas { position: relative; width: 100%; aspect-ratio: 16 / 9; touch-action: none; cursor: crosshair; }
.or-board-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #A7B0D0; font-size: .86rem; text-align: center; padding: 0 20px; pointer-events: none; }
.or-color { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .3); cursor: pointer; }
.or-color:hover { border-color: #fff; }
.or-pager { display: inline-flex; align-items: center; gap: 4px; color: #E8EAF6; font-size: .8rem; }
.or-upload { cursor: pointer; font-size: .8rem; color: #C9CFEA; padding: 6px 10px;
  border: 1px dashed rgba(255, 255, 255, .25); border-radius: 999px; }
.or-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; }
.or-panel { border: 1px solid rgba(255, 255, 255, .10); border-radius: 12px; padding: 10px;
  background: rgba(255, 255, 255, .05); display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.or-panel-head { font-size: .86rem; font-weight: 700; }
.or-people { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; }
.or-person { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .08); padding-bottom: 6px; }
.or-person:last-child { border-bottom: 0; padding-bottom: 0; }
.or-person.is-raised { border-inline-start: 3px solid #FFD24A; padding-inline-start: 6px; }
.or-person-info { min-width: 0; }
.or-person-name { font-size: .84rem; }
.or-person-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.or-hint { color: var(--muted); font-size: .74rem; }
.or-wrap .or-hint { color: #A7B0D0; }
.or-qa { flex: 1; }
.or-messages { flex: 1; min-height: 120px; max-height: 300px; overflow-y: auto; display: flex;
  flex-direction: column; gap: 6px; }
.or-msg { font-size: .82rem; line-height: 1.7; background: rgba(255, 255, 255, .07); border-radius: 8px;
  padding: 6px 8px; word-break: break-word; }
.or-msg.is-answer { background: rgba(10, 143, 60, .22); }
.or-msg-author { display: block; font-size: .72rem; color: #A7B0D0; }
.or-compose { display: flex; gap: 6px; }
.or-compose input { flex: 1; min-width: 0; font-size: 16px; background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .16); color: #E8EAF6; }
.or-compose input::placeholder { color: #8E97BC; }
.or-backdrop { position: absolute; inset: 0; z-index: 5; background: rgba(10, 13, 26, .62);
  display: flex; align-items: center; justify-content: center; padding: 16px; }
.or-confirm { width: 100%; max-width: 360px; background: #232A4A; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .14); padding: 16px; box-shadow: 0 10px 40px rgba(0, 0, 0, .45); }
.or-confirm-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
@media (pointer: coarse) {
  .or-person-actions .btn, .or-btn, .or-x, .or-end { min-height: 44px; }
}

/* فرم ثبت جلسهٔ آشنایی در کارتابل کارشناس — یک‌ردیفی و شکستنی */
.oj-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.oj-form .form-row { flex: 1 1 150px; min-width: 140px; margin: 0; }
.oj-form .btn { flex: 0 0 auto; }

/* ---------- نوار «صف‌های کار» زیر میزکار کارشناس (ADR 0107) ----------
   ردیف دوم و سبک‌تر از نوار اصلی: اینها **فیلتر یک جنس کار**اند، نه صفحه‌های
   هم‌سنگ نوار بالا. بدون این تفاوت بصری، کاربر فکر می‌کند دوباره تب تازه اضافه شده. */
.expert-queues { margin-top: -10px; }
.expert-queues button { font-size: .84rem; padding: 7px 14px; background: #f7f9ff; }
.expert-queues button.on { background: var(--primary); }
@media (max-width: 720px) { .expert-queues { margin-top: -4px; } }

/* ---------- ردیف «گروه‌های پرونده» بالای تب‌های پرونده (حرکت ۳ — ADR 0107) ----------
   ردیف گروه‌ها از ردیف تب‌ها **سبک‌تر** است تا معلوم باشد لایهٔ بالاتر است و کاربر
   حس نکند دوباره شلوغی اضافه شده. */
.case-groups button { font-size: .8rem; padding: 6px 12px; background: #f7f9ff; }
.case-groups button.on { background: var(--primary); }

/* ---------- ویرایشگر برنامهٔ زمانی ارائه‌دهنده (ADR ۰۱۳۷) ----------
   سه زبانه: هفتگی · ماهانه · تقویم و استثناها. پالت و گوشه‌ها از همان متغیرهای
   برند می‌آید؛ هیچ رنگ/قلم تازه‌ای تعریف نشده. اول-موبایل: پایه یک‌ستونی،
   ارتقا با min-width. */
.psch { margin-top: 6px; }
.psch-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.psch-tab {
  border: 1.5px solid var(--border); background: #fff; color: var(--text);
  font-family: inherit; font-size: .85rem; font-weight: 700; cursor: pointer;
  padding: 8px 16px; border-radius: 10px; transition: border-color .15s, background .15s, color .15s;
}
.psch-tab:hover { border-color: var(--primary); color: var(--primary); }
.psch-tab.on { background: var(--primary); border-color: var(--primary); color: #fff; }

.psch-pane { display: flex; flex-direction: column; gap: 10px; }
.psch-toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.psch-toolbar-label { font-size: .8rem; color: var(--muted); font-weight: 600; }
.psch-chip {
  border: 1px solid var(--border); background: #f7f9ff; color: var(--text);
  font-family: inherit; font-size: .78rem; cursor: pointer;
  padding: 5px 12px; border-radius: 999px; transition: border-color .15s, background .15s, color .15s;
}
.psch-chip:hover { border-color: var(--primary); color: var(--primary); }
.psch-chip.on { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }
.psch-chip-danger:hover { border-color: var(--red); color: var(--red); }

.psch-days { display: grid; grid-template-columns: 1fr; gap: 8px; }
.psch-day { border: 1px solid var(--border); border-radius: 12px; padding: 8px 10px; background: #fdfdff; }
.psch-day.off { background: #fafbfd; }
.psch-day-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.psch-day-head b { font-size: .88rem; }
.psch-count { font-size: .74rem; color: var(--muted); font-weight: 600; }
.psch-mini {
  border: 1px solid var(--border); background: #fff; color: var(--primary);
  font-family: inherit; font-size: .72rem; cursor: pointer; padding: 3px 10px; border-radius: 8px;
}
.psch-mini:hover { background: #eef3fe; }
.psch-day-head .psch-mini:first-of-type { margin-inline-start: auto; }

.psch-rows { display: flex; flex-direction: column; gap: 6px; }
.psch-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.psch-time { width: 104px; padding: 7px 10px; font-size: .86rem; }
.psch-dom { width: 72px; padding: 7px 10px; font-size: .86rem; }
.psch-dash { font-size: .8rem; color: var(--muted); }
.psch-x {
  border: 1px solid var(--border); background: #fff; color: var(--red);
  font-family: inherit; font-size: .8rem; cursor: pointer; padding: 4px 10px; border-radius: 8px; line-height: 1.4;
}
.psch-x:hover { border-color: var(--red); background: #fdf1f0; }

.psch-hint { font-size: .8rem; color: var(--muted); line-height: 1.9; }
.psch-hint-inline { font-size: .78rem; color: var(--muted); margin-inline-start: 4px; }
.psch-empty, .psch-empty-inline { font-size: .8rem; color: var(--muted); padding: 4px 0; }

/* تقویم ماه شمسی — بازاستفاده از .picker-grid برای شبکهٔ ۷ستونی */
.psch-cal-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.psch-grid { gap: 4px; }
.psch-grid .psch-cell {
  display: flex; flex-direction: column; align-items: stretch; gap: 1px;
  border: 1px solid var(--border); border-radius: 10px; padding: 6px 6px 5px;
  background: #fff; cursor: pointer; text-align: center; min-height: 54px;
}
.psch-cell.is-free { background: #fafbfd; color: var(--muted); }
.psch-cell.is-work { background: #eef4ff; }
.psch-cell.is-custom { background: #fff6e6; border-color: #f2d9a8; }
.psch-cell.is-extra { background: #eefaf1; border-color: #bfe6cb; }
.psch-cell.is-off { background: #fdf1f0; border-color: #f0cdc9; color: var(--red); }
.psch-cell.is-today { box-shadow: inset 0 0 0 1.5px var(--primary); }
.psch-cell.is-sel { outline: 2px solid var(--primary); outline-offset: -2px; }
.psch-cell-num { font-size: .86rem; font-weight: 700; line-height: 1.3; }
.psch-cell-tag { font-size: .62rem; color: var(--muted); line-height: 1.3; }
.psch-cell.is-off .psch-cell-tag { color: var(--red); }
.psch-cell-booked { font-size: .6rem; color: var(--primary); font-weight: 700; }

.psch-day-panel {
  border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px;
  background: #fbfcff; display: flex; flex-direction: column; gap: 8px;
}
.psch-day-panel-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.psch-mode-badge { font-size: .72rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; }
.psch-mode-badge.is-off { background: #fdeceb; color: var(--red); }
.psch-mode-badge.is-custom { background: #fdf3e2; color: var(--amber); }
.psch-mode-badge.is-extra { background: #eaf8ee; color: var(--green); }
.psch-effective, .psch-modes, .psch-booked, .psch-ex-list { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.psch-effective-label { font-size: .78rem; color: var(--muted); font-weight: 600; }
.psch-window-chip {
  font-size: .78rem; font-weight: 700; background: #eef4ff; color: var(--primary);
  padding: 3px 10px; border-radius: 999px; direction: ltr;
}
.psch-booked-chip { font-size: .76rem; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 2px 8px; direction: ltr; }
.psch-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.psch-note input { font-size: .84rem; }

/* --- بازطراحی ویرایشگر برنامه: سرصفحه، تاریخ مشخص، فهرست استثناها و نوار ذخیره --- */
.psch-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; margin-bottom: 10px; }
.psch-summary { display: flex; gap: 6px; flex-wrap: wrap; }
.psch-summary-chip {
  font-size: .72rem; color: var(--muted); background: #f3f6fe;
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px;
}
.psch-date-card {
  border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px;
  background: #fdfdff; display: flex; flex-direction: column; gap: 8px;
}
.psch-date-grid { display: grid; grid-template-columns: 1fr; gap: 8px 12px; }
.psch-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.psch-preview {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  border-top: 1px dashed var(--border); padding-top: 8px;
}
.psch-ex-block { display: flex; flex-direction: column; gap: 8px; }
.psch-ex-head { display: flex; align-items: center; gap: 8px; }
.psch-ex-rows { display: flex; flex-direction: column; gap: 8px; }
.psch-ex-row {
  display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap;
  border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; background: #fff;
}
.psch-ex-row.is-sel { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }
.psch-ex-date { display: flex; align-items: center; gap: 6px; min-width: 150px; }
.psch-ex-hours { font-size: .8rem; direction: ltr; color: var(--muted); }
.psch-ex-note { font-size: .76rem; color: var(--muted); }
.psch-ex-actions { display: flex; gap: 6px; margin-inline-start: auto; }
.psch-savebar {
  position: sticky; bottom: 0; z-index: 3;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 12px; padding: 10px 12px;
  background: rgba(255, 255, 255, .97);
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 -2px 10px rgba(30, 50, 90, .06);
}
.psch-unsaved { font-size: .78rem; font-weight: 700; color: var(--amber); }
.psch-ok { font-size: .8rem; font-weight: 700; color: var(--green); }
.psch-error { font-size: .8rem; font-weight: 700; color: var(--red); }
.psch-mini-danger { color: var(--red); }
.psch-mini-danger:hover { border-color: var(--red); background: #fdf1f0; }
.psch-mini[disabled] { opacity: .45; cursor: not-allowed; }

@media (min-width: 720px) {
  .psch-date-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 720px) {
  .psch-days { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .psch-days { grid-template-columns: repeat(3, 1fr); }
}
@media (pointer: coarse) {
  .psch-tab, .psch-chip, .psch-mini, .psch-x { min-height: 44px; }
  .psch-time, .psch-dom { min-height: 44px; }
  .psch-grid .psch-cell { min-height: 62px; }
}

/* =========================================================================
 * حالت نمایش «جدید» پیشخوان کارشناس — ADR 0168
 *
 * همهٔ قواعد نسخهٔ جدید با پیشوند `nx-` و زیر `[data-ui="next"]` هستند تا
 * حالت کلاسیک حتی یک پیکسل هم عوض نشود. رنگ‌ها فقط از متغیرهای موجود برند
 * می‌آیند؛ هیچ پالت تازه‌ای تعریف نشده است.
 * ========================================================================= */

/* ---- سوئیچ سراسری (در نوار بالا؛ بیرون از محدودهٔ data-ui) ---- */
.nx-mode-switch {
  display: inline-flex; align-items: center; gap: 3px;
  background: #eef1f8; border: 1px solid var(--border);
  border-radius: 999px; padding: 3px;
}
.nx-mode-switch-label { font-size: 11px; color: var(--muted); padding: 0 6px; }
.nx-mode-switch button {
  border: 0; background: transparent; color: var(--muted);
  font-family: inherit; font-size: 12px; font-weight: 700;
  padding: 6px 11px; border-radius: 999px; min-height: 30px; cursor: pointer;
  transition: background .15s, color .15s;
}
.nx-mode-switch button:hover { color: var(--primary-dark); }
.nx-mode-switch button.on { background: var(--primary); color: #fff; box-shadow: 0 2px 8px rgba(87, 98, 168, .25); }
.nx-mode-switch button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/*: روی موبایل نوار بالا یک‌ردیفی و اسکرول‌شو است؛ اگر سوییچ آخر بماند از دید
 *  بیرون می‌افتد و کاربر پیدا نمی‌کند. با `order:-1` به لبهٔ راست (شروع RTL)
 *  می‌آید و برچسب «نمایش» برای صرفه‌جویی جا پنهان می‌شود. */
@media (max-width: 720px) {
  .topnav .nx-mode-switch { order: -1; }
  .topnav .nx-mode-switch-label { display: none; }
}

[data-ui="next"] .nx-page { padding-bottom: 28px; }

/* ---- سرصفحه و ناوبری گروهی ---- */
[data-ui="next"] .nx-expert-head {
  background: linear-gradient(135deg, #f3f5fc 0%, #fff 58%);
  border: 1px solid var(--border); border-radius: 18px;
  padding: 20px; margin-bottom: 14px;
  box-shadow: 0 10px 30px rgba(53, 61, 99, .06);
}
[data-ui="next"] .nx-expert-top { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; justify-content: space-between; }
[data-ui="next"] .nx-expert-copy { flex: 1 1 320px; min-width: 0; }
[data-ui="next"] .nx-eyebrow { font-size: 12px; font-weight: 700; color: var(--primary); }
[data-ui="next"] .nx-expert-title {
  font-size: 26px; line-height: 1.35; font-weight: 900; color: var(--text);
  margin: 6px 0 4px;
}
[data-ui="next"] .nx-expert-sub { font-size: 14px; line-height: 1.9; color: var(--muted); }
[data-ui="next"] .nx-expert-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
[data-ui="next"] .nx-pending {
  background: #fff7e6; border: 1px solid #f0d68a; color: #7a5b00;
  border-radius: 999px; padding: 6px 12px; font-size: 12px; white-space: nowrap;
}
[data-ui="next"] .nx-pilot-note {
  display: flex; gap: 8px; align-items: flex-start; margin-top: 14px;
  padding: 9px 12px; border-radius: 10px; background: #eef3fe;
  color: #33415c; font-size: 12.5px; line-height: 1.8;
}
[data-ui="next"] .nx-expert-nav { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
[data-ui="next"] .nx-group-tabs,
[data-ui="next"] .nx-sub-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; }
[data-ui="next"] .nx-group-tabs { padding-bottom: 2px; }
[data-ui="next"] .nx-group-tabs button {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); background: #fff; color: #33415c;
  border-radius: 999px; padding: 8px 14px; font-family: inherit;
  font-size: 13px; font-weight: 700; cursor: pointer;
}
[data-ui="next"] .nx-group-tabs button:hover { border-color: var(--primary); }
[data-ui="next"] .nx-group-tabs button.on { background: var(--primary); border-color: var(--primary); color: #fff; }
[data-ui="next"] .nx-sub-tabs {
  padding: 6px; background: #fff; border: 1px solid var(--border); border-radius: 12px;
}
[data-ui="next"] .nx-sub-tabs button {
  flex: 0 0 auto; border: 0; background: transparent; color: var(--muted);
  font-family: inherit; font-size: 13px; font-weight: 600;
  padding: 8px 12px; border-radius: 8px; cursor: pointer;
}
[data-ui="next"] .nx-sub-tabs button:hover { color: var(--primary-dark); background: #f5f7fc; }
[data-ui="next"] .nx-sub-tabs button.on { background: #eef3fe; color: var(--primary-dark); }
[data-ui="next"] .nx-group-tabs button:focus-visible,
[data-ui="next"] .nx-sub-tabs button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ردیف‌شکستن نوار گروه/زیرتب روی دسکتاپ — نوار «خط خانواده» با ۱۰+ زیرتب سرریز
   افقی داشت و آیتم‌های انتهایی (مثل «کمیتهٔ بررسی») بیرون از دید بودند.
   روی موبایل همان اسکرول افقی می‌ماند (اول-موبایل). (بازبینی چیدمان — ADR 0209) */
@media (min-width: 981px) {
  [data-ui="next"] .nx-group-tabs,
  [data-ui="next"] .nx-sub-tabs { flex-wrap: wrap; overflow-x: visible; }
}

/* نشانگر «کجای مسیر هستید» — دو خط موازی و نقطهٔ تلاقی (ADR 0209) */
[data-ui="next"] .nx-line-hint {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12px; padding: 0 2px;
}
[data-ui="next"] .nx-line-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: #eef3fe; color: var(--primary-dark);
  border: 1px solid #dbe4fb; border-radius: 999px;
  padding: 3px 10px; font-weight: 800;
}
[data-ui="next"] .nx-line-desc { color: var(--muted); }

/* ---- میزکار امروز ---- */
[data-ui="next"] .nx-home { display: flex; flex-direction: column; gap: 14px; }
[data-ui="next"] .nx-hero {
  display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; align-items: flex-end;
  padding: 22px; border-radius: 18px;
  background: linear-gradient(135deg, #eef2ff 0%, #fff 65%);
  border: 1px solid #dfe4f5; box-shadow: 0 10px 30px rgba(53, 61, 99, .06);
}
[data-ui="next"] .nx-hero-copy { flex: 1 1 340px; min-width: 0; }
[data-ui="next"] .nx-hero-title { font-size: 24px; line-height: 1.4; font-weight: 900; margin: 6px 0; color: var(--text); }
[data-ui="next"] .nx-hero-sub { font-size: 14px; line-height: 1.9; color: var(--muted); max-width: 65ch; }
[data-ui="next"] .nx-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
[data-ui="next"] .nx-primary { min-height: 46px; box-shadow: 0 8px 20px rgba(87, 98, 168, .22); }

[data-ui="next"] .nx-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
[data-ui="next"] .nx-kpi {
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 2px;
}
[data-ui="next"] .nx-kpi-label { font-size: 12.5px; color: var(--muted); font-weight: 600; }
[data-ui="next"] .nx-kpi-value { font-size: 26px; line-height: 1.2; font-weight: 900; color: var(--text); }
[data-ui="next"] .nx-kpi-hint { font-size: 11.5px; color: var(--muted); }
[data-ui="next"] .nx-kpi-warn { background: #fff9ee; border-color: #f3dfb5; }
[data-ui="next"] .nx-kpi-bad { background: #fdf0ef; border-color: #f1c9c5; }
[data-ui="next"] .nx-kpi-ok { background: #f2fbf6; border-color: #cfeadd; }

[data-ui="next"] .nx-columns { display: grid; grid-template-columns: 1fr; gap: 14px; }
[data-ui="next"] .nx-panel {
  background: #fff; border: 1px solid var(--border); border-radius: 16px;
  padding: 16px; box-shadow: var(--shadow);
}
[data-ui="next"] .nx-panel-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
[data-ui="next"] .nx-panel-head h2 { font-size: 17px; margin: 0; color: var(--text); }
[data-ui="next"] .nx-panel-head p { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.8; }
[data-ui="next"] .nx-panel-badge {
  background: #eef1f8; color: #33415c; border-radius: 999px;
  padding: 3px 10px; font-size: 11.5px; white-space: nowrap;
}

[data-ui="next"] .nx-task-list { display: flex; flex-direction: column; gap: 8px; }
[data-ui="next"] .nx-task {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: #fcfcff;
}
[data-ui="next"] .nx-task-count {
  min-width: 38px; height: 38px; border-radius: 11px;
  background: #fff3df; color: #8a5310; display: grid; place-items: center;
  font-weight: 900; font-size: 16px;
}
[data-ui="next"] .nx-task-body { min-width: 0; }
[data-ui="next"] .nx-task-body b { display: block; font-size: 14px; line-height: 1.7; }
[data-ui="next"] .nx-task-body p { font-size: 12.5px; color: var(--muted); line-height: 1.8; margin-top: 2px; }
[data-ui="next"] .nx-task-names { font-size: 12px; color: var(--primary-dark); margin-top: 4px; }
[data-ui="next"] .nx-task-btn { white-space: nowrap; }
[data-ui="next"] .nx-task-compact { padding: 10px 12px; }
[data-ui="next"] .nx-more { margin-top: 10px; }
[data-ui="next"] .nx-more summary { cursor: pointer; font-size: 13px; color: var(--primary); font-weight: 700; padding: 8px 2px; }

[data-ui="next"] .nx-agenda { display: flex; flex-direction: column; gap: 2px; }
[data-ui="next"] .nx-agenda-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px;
  align-items: center; padding: 10px 2px; border-bottom: 1px dashed var(--border);
}
[data-ui="next"] .nx-agenda-row:last-child { border-bottom: 0; }
[data-ui="next"] .nx-day {
  min-width: 74px; text-align: center; padding: 5px 8px; border-radius: 8px;
  background: #eef1f8; color: #33415c; font-size: 11.5px; font-weight: 700;
}
[data-ui="next"] .nx-day.warn { background: #fff3df; color: #8a5310; }
[data-ui="next"] .nx-day.bad { background: #fdecec; color: #a42323; }
[data-ui="next"] .nx-agenda-body { min-width: 0; font-size: 13px; line-height: 1.7; }
[data-ui="next"] .nx-agenda-body p { font-size: 11.5px; color: var(--muted); }
[data-ui="next"] .nx-kind {
  display: inline-block; background: #eef3fe; color: var(--primary-dark);
  border-radius: 6px; padding: 1px 6px; font-size: 10.5px; margin-inline-end: 6px;
}
[data-ui="next"] .nx-agenda-family { color: var(--muted); }

[data-ui="next"] .nx-empty { text-align: center; padding: 24px 12px; border: 1px dashed var(--border); border-radius: 12px; background: #fbfcff; }
[data-ui="next"] .nx-empty span { font-size: 24px; }
[data-ui="next"] .nx-empty b { display: block; margin-top: 4px; font-size: 14px; }
[data-ui="next"] .nx-empty p { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
[data-ui="next"] .nx-footnote { font-size: 12px; color: var(--muted); line-height: 1.9; }

/* ---- اسکلت بارگذاری ---- */
[data-ui="next"] .nx-skel {
  background: linear-gradient(90deg, #eef1f8 25%, #f7f9fd 37%, #eef1f8 63%);
  background-size: 400% 100%; border-radius: 14px;
  animation: nx-shimmer 1.4s ease infinite;
}
[data-ui="next"] .nx-skel-hero { height: 150px; }
[data-ui="next"] .nx-skel-kpi { height: 82px; }
[data-ui="next"] .nx-skel-panel { height: 260px; }
@keyframes nx-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

@media (min-width: 981px) {
  [data-ui="next"] .nx-columns { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
  [data-ui="next"] .nx-kpis { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 720px) {
  [data-ui="next"] .nx-expert-head { padding: 16px; }
  [data-ui="next"] .nx-expert-title { font-size: 21px; }
  [data-ui="next"] .nx-hero { padding: 16px; }
  [data-ui="next"] .nx-hero-title { font-size: 21px; }
  [data-ui="next"] .nx-hero-actions { width: 100%; }
  [data-ui="next"] .nx-hero-actions .btn { flex: 1 1 auto; }
  [data-ui="next"] .nx-task { grid-template-columns: auto minmax(0, 1fr); }
  [data-ui="next"] .nx-task-btn { grid-column: 1 / -1; width: 100%; min-height: 44px; }
  [data-ui="next"] .nx-agenda-row { grid-template-columns: auto minmax(0, 1fr); }
  [data-ui="next"] .nx-agenda-row .btn { grid-column: 1 / -1; width: 100%; min-height: 44px; }
}
@media (pointer: coarse) {
  .nx-mode-switch button { min-height: 44px; }
  [data-ui="next"] .nx-group-tabs button,
  [data-ui="next"] .nx-sub-tabs button { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-ui="next"] .nx-skel { animation: none; }
}

/* -----------------------------------------------------------------------------
 * پوستهٔ جدید: کارتابل فشرده + کشوی پرونده (قالب ۲ — ADR 0168)
 * -------------------------------------------------------------------------- */
[data-ui="next"] .nx-cartable { display: flex; flex-direction: column; gap: 14px; position: relative; }

/* نوار فاز سازمانی (ADR 0173) — تفکیک تیم ارزیابی خانواده از تیم پایش و مراقبت */
[data-ui="next"] .nx-phase-tabs {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px;
}
[data-ui="next"] .nx-phase-tab {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 1px solid var(--border); border-radius: 999px;
  padding: 9px 16px; font-family: inherit; font-size: 12.5px; font-weight: 700;
  color: var(--muted); cursor: pointer; transition: all .15s ease;
}
[data-ui="next"] .nx-phase-tab:hover { border-color: var(--primary); color: var(--primary-dark); }
[data-ui="next"] .nx-phase-tab.on {
  background: var(--primary); border-color: var(--primary); color: #fff;
  box-shadow: 0 4px 14px rgba(87, 98, 168, .22);
}

/* نوار KPI کارتابل */
[data-ui="next"] .nx-cartable-kpis {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
[data-ui="next"] .nx-cartable-kpi {
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 14px; display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; transition: border-color .15s, background .15s;
}
[data-ui="next"] .nx-cartable-kpi:hover { border-color: var(--primary); background: #fcfdff; }
[data-ui="next"] .nx-cartable-kpi.active { background: #eef3fe; border-color: var(--primary); }
[data-ui="next"] .nx-cartable-kpi-val { font-size: 20px; font-weight: 900; color: var(--text); }
[data-ui="next"] .nx-cartable-kpi-lbl { font-size: 12px; color: var(--muted); font-weight: 600; }

/* جعبه ابزار کارتابل */
[data-ui="next"] .nx-cartable-toolbar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
  background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px;
}
[data-ui="next"] .nx-cartable-search-wrap {
  position: relative; flex: 1 1 260px; min-width: 200px;
}
[data-ui="next"] .nx-cartable-search {
  width: 100%; height: 38px; border: 1px solid var(--border); border-radius: 999px;
  padding: 0 16px; font-family: inherit; font-size: 13px; color: var(--text);
  background: #f8fafc; transition: border-color .15s, background .15s;
}
[data-ui="next"] .nx-cartable-search:focus {
  outline: none; border-color: var(--primary); background: #fff; box-shadow: 0 0 0 3px rgba(87, 98, 168, .1);
}
[data-ui="next"] .nx-search-clear {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  padding: 4px; font-size: 12px;
}
[data-ui="next"] .nx-cartable-filters {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
[data-ui="next"] .nx-select {
  height: 38px; border: 1px solid var(--border); border-radius: 8px;
  padding: 0 10px; font-family: inherit; font-size: 12.5px; background: #fff; color: var(--text);
}
[data-ui="next"] .nx-cartable-views {
  display: flex; gap: 4px; background: #f0f3fa; border-radius: 999px; padding: 3px;
}
[data-ui="next"] .nx-view-btn {
  border: 0; background: transparent; padding: 6px 12px; border-radius: 999px;
  font-family: inherit; font-size: 12px; font-weight: 700; color: var(--muted); cursor: pointer;
}
[data-ui="next"] .nx-view-btn.on { background: #fff; color: var(--primary-dark); box-shadow: 0 2px 6px rgba(0,0,0,.06); }

/* جدول فشرده */
[data-ui="next"] .nx-table-wrap {
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  overflow-x: auto; box-shadow: var(--shadow);
}
[data-ui="next"] .nx-table {
  width: 100%; border-collapse: collapse; text-align: right; font-size: 13px;
}
[data-ui="next"] .nx-table th {
  background: #f8fafc; color: var(--muted); font-size: 12px; font-weight: 700;
  padding: 12px 14px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
[data-ui="next"] .nx-table td {
  padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle;
}
[data-ui="next"] .nx-table tr:last-child td { border-bottom: 0; }
[data-ui="next"] .nx-table tbody tr:hover td { background: #f8fbff; }
[data-ui="next"] .nx-table tbody tr.nx-row-selected td { background: #eef3fe; }

/* کشوی پیش‌نمایش سریع (Inspection Drawer) */
[data-ui="next"] .nx-drawer-backdrop {
  position: fixed; inset: 0; background: rgba(18, 25, 43, .35);
  backdrop-filter: blur(2px); z-index: 1000;
  display: flex; justify-content: flex-start;
}
[data-ui="next"] .nx-drawer {
  width: 520px; max-width: 95vw; height: 100vh; background: #fff;
  box-shadow: -10px 0 35px rgba(18, 25, 43, .18);
  display: flex; flex-direction: column; overflow: hidden;
  animation: nx-drawer-slide .2s ease-out;
}
@keyframes nx-drawer-slide {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
[data-ui="next"] .nx-drawer-head {
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #fbfcfe;
}
[data-ui="next"] .nx-drawer-close {
  width: 32px; height: 32px; border: 0; background: #eef1f8; border-radius: 50%;
  font-size: 14px; color: var(--muted); cursor: pointer; display: grid; place-items: center;
}
[data-ui="next"] .nx-drawer-close:hover { background: #e0e5f2; color: var(--text); }
[data-ui="next"] .nx-drawer-body {
  flex: 1 1 auto; overflow-y: auto; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 14px;
}
[data-ui="next"] .nx-drawer-card {
  border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: #fff;
}
[data-ui="next"] .nx-drawer-next {
  background: linear-gradient(135deg, #f0fdf4 0%, #fff 70%); border-color: #bbf7d0;
}
[data-ui="next"] .nx-drawer-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 12px; font-size: 12.5px;
}
[data-ui="next"] .nx-drawer-prop-lbl { color: var(--muted); margin-inline-end: 6px; }
[data-ui="next"] .nx-drawer-prop-val { font-weight: 700; color: var(--text); }
[data-ui="next"] .nx-quick-note-input {
  width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
  font-family: inherit; font-size: 12.5px; resize: vertical; box-sizing: border-box;
}
[data-ui="next"] .nx-quick-note-input:focus { outline: 2px solid var(--primary); }
[data-ui="next"] .nx-quick-notes-list {
  display: flex; flex-direction: column; gap: 8px; margin-top: 6px;
}
[data-ui="next"] .nx-quick-note-item {
  padding: 8px 10px; background: #f8fafc; border-radius: 8px; border: 1px solid #edf2f7;
}
[data-ui="next"] .nx-drawer-timeline {
  display: flex; flex-direction: column; gap: 10px; position: relative; padding-inline-start: 14px;
}
[data-ui="next"] .nx-drawer-timeline-item {
  position: relative;
}
[data-ui="next"] .nx-timeline-dot {
  position: absolute; right: -18px; top: 4px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--primary);
}

/* نوار نان‌ریزه برای بازگشت از پروندهٔ کامل */
[data-ui="next"] .nx-case-workspace-wrapper { display: flex; flex-direction: column; gap: 10px; }
[data-ui="next"] .nx-case-workspace-breadcrumb {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; background: #fff; border: 1px solid var(--border); border-radius: 10px;
}

@media (min-width: 981px) {
  [data-ui="next"] .nx-cartable-kpis { grid-template-columns: repeat(4, 1fr); }
}

/* -----------------------------------------------------------------------------
 * پوستهٔ جدید: میزکار ۳۶۰ پرونده (قالب ۳ — ADR 0168)
 * -------------------------------------------------------------------------- */
[data-ui="next"] .nx-case-hero {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center;
  background: linear-gradient(135deg, #f8fafc 0%, #fff 60%);
  border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px;
  box-shadow: 0 4px 18px rgba(53, 61, 99, .05); margin-bottom: 14px;
}
[data-ui="next"] .nx-case-hero-main {
  display: flex; align-items: center; gap: 14px; flex: 1 1 340px; min-width: 0;
}
[data-ui="next"] .nx-case-hero-title {
  font-size: 19px; font-weight: 900; margin: 0; color: var(--text);
}
[data-ui="next"] .nx-case-hero-sub {
  display: flex; flex-wrap: wrap; gap: 12px; font-size: 12.5px; color: var(--muted); margin-top: 4px;
}
[data-ui="next"] .nx-case-hero-actions {
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: 0 0 auto;
}
[data-ui="next"] .nx-case-hero-progress {
  display: flex; align-items: center; gap: 8px;
}

/* ناوبری دو سطحی ۵ حوزه ۳۶۰ پرونده */
[data-ui="next"] .nx-case-360-nav {
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px;
}
[data-ui="next"] .nx-case-domains {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px;
}
[data-ui="next"] .nx-case-domain-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--border); border-radius: 999px;
  padding: 8px 14px; font-family: inherit; font-size: 13px; font-weight: 700;
  color: var(--muted); cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
[data-ui="next"] .nx-case-domain-btn:hover { color: var(--primary-dark); border-color: var(--primary); }
[data-ui="next"] .nx-case-domain-btn.on {
  background: var(--primary); border-color: var(--primary); color: #fff;
  box-shadow: 0 4px 12px rgba(87, 98, 168, .2);
}
[data-ui="next"] .nx-case-subtabs {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin;
  background: #f8fafc; border: 1px solid var(--border); border-radius: 12px; padding: 6px 8px;
}
[data-ui="next"] .nx-case-subtab-btn {
  flex: 0 0 auto; border: 0; background: transparent; color: var(--muted);
  font-family: inherit; font-size: 13px; font-weight: 600; padding: 8px 14px;
  border-radius: 8px; cursor: pointer; transition: background .15s, color .15s;
}
[data-ui="next"] .nx-case-subtab-btn:hover { background: #eef2fa; color: var(--text); }
[data-ui="next"] .nx-case-subtab-btn.on {
  background: #fff; color: var(--primary-dark); font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

@media (max-width: 768px) {
  [data-ui="next"] .nx-case-hero { padding: 14px; flex-direction: column; align-items: stretch; }
  [data-ui="next"] .nx-case-hero-actions { align-items: stretch; }
}

/* ============================================================================
   مرکز جامع مراقبت کودک (FamilyCareHub — گام ۶ و همراهی میزبانی)
   ========================================================================= */
.fch-hub {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* سرصفحه هویتی کودک */
.fch-hero {
  background: linear-gradient(135deg, #fff9ee 0%, #ffffff 55%, #f4f6fc 100%);
  border: 1px solid #fae6c0;
  border-radius: 18px;
  padding: 20px 22px;
  box-shadow: 0 4px 20px rgba(247, 148, 29, .08);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fch-hero-main {
  display: flex;
  align-items: center;
  gap: 16px;
}

.fch-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #fff3df;
  border: 2px solid #f6cf8d;
  display: grid;
  place-items: center;
  font-size: 32px;
  flex: 0 0 auto;
  box-shadow: 0 4px 12px rgba(247, 148, 29, .15);
}

.fch-hero-info {
  flex: 1 1 auto;
  min-width: 0;
}

.fch-hero-badge-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.fch-week-tag {
  background: #fff3df;
  color: #8a5310;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11.5px;
  border: 1px solid #f6cf8d;
}

.fch-hero-title {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  color: var(--text);
}

.fch-hero-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 6px;
}

.fch-siblings-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}

.fch-badges-ribbon {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}

.fch-badges-title {
  font-size: 12px;
  font-weight: 700;
  color: #8a5310;
}

.fch-badges-scroll {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.fch-badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fff;
  border: 1px solid #fae6c0;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11.5px;
  font-weight: 600;
  color: #7a5405;
  white-space: nowrap;
}

.fch-badge-chip i {
  font-style: normal;
}

/* ناوبری حوزه‌های مراقبت */
.fch-nav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
  padding: 4px 2px;
}

.fch-tab-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: all .15s ease;
}

.fch-tab-btn:hover {
  color: var(--primary-dark);
  border-color: var(--primary);
  background: #fafbff;
}

.fch-tab-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 4px 14px rgba(87, 98, 168, .22);
}

.fch-tab-icon {
  font-size: 16px;
}

.fch-section-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fch-journey-wrap {
  position: relative;
}

@media (max-width: 640px) {
  .fch-hero { padding: 14px 16px; }
  .fch-hero-main { flex-direction: column; align-items: flex-start; gap: 10px; }
  .fch-avatar { width: 50px; height: 50px; font-size: 26px; }
  .fch-hero-title { font-size: 18px; }
  .fch-tab-btn { padding: 8px 12px; font-size: 12px; }
}

@media (pointer: coarse) {
  .fch-tab-btn { min-height: 44px; }
}

/* --- تقویم تجمیعی نوبت‌دهی کارشناسان (ADR ۰۱۸۳) --- */
.cc-admin { display: flex; flex-direction: column; gap: 10px; }
.cc-toolbar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.cc-date { min-width: 180px; }
.cc-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.cc-picker {
  border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px;
  background: #fdfdff; display: flex; flex-direction: column; gap: 8px;
}
.cc-picker-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cc-kind-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.cc-provider-list { display: grid; grid-template-columns: 1fr; gap: 6px; }
.cc-provider-opt {
  display: flex; align-items: center; gap: 8px; border: 1px solid var(--border);
  border-radius: 10px; padding: 7px 9px; background: #fff; cursor: pointer;
}
.cc-provider-opt.on { border-color: var(--primary); background: #f3f7ff; }
.cc-provider-opt input { width: 18px; height: 18px; }
.cc-provider-opt > span { display: flex; flex-direction: column; gap: 2px; }
.cc-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.cc-stat {
  border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px;
  background: #fff; display: flex; flex-direction: column; gap: 2px;
}
.cc-stat b { font-size: 1.05rem; }
.cc-stat span { font-size: .72rem; color: var(--muted); }
.cc-stat.is-pending b { color: var(--amber); }
.cc-stat.is-ok b { color: var(--green); }
.cc-stat.is-bad b { color: var(--red); }
.cc-stat.is-free b { color: var(--primary); }
.cc-legend { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cc-legend .cc-chip {
  display: inline-block; width: auto; margin: 0; padding: 2px 9px; cursor: default;
}
.cc-matrix-wrap { border: 1px solid var(--border); border-radius: 12px; }
.cc-matrix { border-collapse: collapse; width: 100%; }
.cc-matrix th, .cc-matrix td {
  border-bottom: 1px solid var(--border); border-inline-start: 1px solid var(--border);
  padding: 6px 7px; vertical-align: top; font-size: .78rem;
}
.cc-matrix thead th { background: #f7f9fe; font-size: .74rem; text-align: center; white-space: nowrap; }
.cc-matrix thead th.is-today { color: var(--primary); }
.cc-provider-col {
  position: sticky; inset-inline-start: 0; background: #fff; z-index: 2;
  min-width: 170px; max-width: 220px; text-align: start;
}
.cc-matrix thead .cc-provider-col { background: #f7f9fe; z-index: 3; }
.cc-cell { min-width: 112px; }
.cc-cell.is-today { background: #fbfdff; }
.cc-chip {
  display: block; width: 100%; text-align: start; border: 1px solid var(--border);
  border-radius: 8px; padding: 3px 6px; margin-bottom: 4px; background: #fff;
  color: var(--text); font-size: .72rem; line-height: 1.7; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cc-chip:hover { border-color: var(--primary); }
.cc-chip.is-scheduled { background: #fff8ec; border-color: #f0d7ab; }
.cc-chip.is-done { background: #eefaf1; border-color: #bfe6cb; }
.cc-chip.is-canceled { background: #fdf1f0; border-color: #f0cdc9; color: var(--red); text-decoration: line-through; opacity: .8; }
.cc-free {
  display: inline-block; font-size: .68rem; font-weight: 700; color: var(--green);
  background: #eefaf1; border-radius: 999px; padding: 1px 7px;
}
.cc-off { color: var(--muted); }
.cc-detail { font-size: .86rem; margin-top: 6px; }
@media (min-width: 720px) {
  .cc-provider-list { grid-template-columns: repeat(2, 1fr); }
  .cc-stats { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1100px) {
  .cc-provider-list { grid-template-columns: repeat(3, 1fr); }
  .cc-stats { grid-template-columns: repeat(8, 1fr); }
}
@media (max-width: 719px) {
  .cc-toolbar { align-items: stretch; }
  .cc-date { min-width: 100%; }
  .cc-provider-col { min-width: 140px; max-width: 160px; }
}

/* ============================================================================
   میز تطبیق (حلقهٔ وصل دو تیم — ADR 0177)
   ========================================================================= */
.desk-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
}
@media (min-width: 901px) {
  .desk-grid { grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); }
}

/* ============================================================================
   میز برنامه‌ریزی و تقویم نوبت‌دهی ارائه‌دهندگان (ADR 0178)
   ========================================================================= */
.psd-desk {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.psd-header {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.psd-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.psd-kpi {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 14px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  box-shadow: var(--shadow);
}

.psd-kpi-val {
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
}

.psd-kpi-lbl {
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 600;
}

.psd-view-toggle {
  display: flex;
  gap: 6px;
}

.psd-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}

@media (min-width: 981px) {
  .psd-grid {
    grid-template-columns: 320px minmax(0, 1fr);
  }
}

.psd-sidebar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: sticky;
  top: 8px;
  max-height: calc(100vh - 80px);
}

.psd-filter-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}

.psd-filter-btn {
  border: 1px solid var(--border);
  background: #fbfcfe;
  border-radius: 8px;
  padding: 6px 8px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: all .15s ease;
}

.psd-filter-btn:hover {
  border-color: var(--primary);
  color: var(--primary-dark);
}

.psd-filter-btn.on {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.psd-search-box {
  margin-top: 4px;
}

.psd-search-input {
  width: 100%;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 10px;
  font-family: inherit;
  font-size: 12px;
}

.psd-providers-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  padding-inline-end: 2px;
}

.psd-provider-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
  cursor: pointer;
  transition: all .15s ease;
}

.psd-provider-card:hover {
  border-color: var(--primary);
  background: #f8fbff;
}

.psd-provider-card.selected {
  border-color: var(--primary);
  background: #eef3fe;
  box-shadow: 0 2px 8px rgba(87, 98, 168, .12);
}

.psd-provider-card.inactive {
  opacity: .6;
  background: #fafafa;
}

.psd-main {
  min-width: 0;
}

.psd-profile-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.psd-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #eef3fe;
  display: grid;
  place-items: center;
  font-size: 24px;
  flex: 0 0 auto;
}

.psd-params-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 10px;
}


/* لینک دانلود PDF راهنما در پاصفحهٔ پنل راهنما (ADR 0202) */
.hp-pdf { display: inline-block; font-size: 12px; color: var(--primary); text-decoration: none; border: 1px solid var(--border); border-radius: 8px; padding: 4px 10px; white-space: nowrap; }
.hp-pdf:hover { background: var(--soft); }

/* ---- ارتقای تجربهٔ کاربری و ظاهر مدرن پیشخوان خانواده (Soft UI & Warm Micro-UX) ---- */
.waiting-card {
  background: #fdfbf7;
  border: 1px solid #fae8c8;
  border-right: 4px solid #f59e0b;
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.06);
  margin-bottom: 20px;
}
.waiting-card.waiting-card-rejected {
  background: #fff8f8;
  border-color: #fecaca;
  border-right-color: #ef4444;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.06);
}
.waiting-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.waiting-card-icon {
  font-size: 1.5rem;
  line-height: 1;
  padding-top: 2px;
}
.waiting-card-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1f2937;
}
.waiting-card-estimate {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.8rem;
  color: #92400e;
  background: #fef3c7;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 600;
}
.waiting-card-rejected .waiting-card-estimate {
  color: #991b1b;
  background: #fee2e2;
}
.waiting-card-body p {
  margin: 0 0 10px;
  font-size: 0.92rem;
  line-height: 1.8;
  color: #374151;
}
.waiting-card-tip {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #fef08a;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.86rem;
  line-height: 1.7;
  color: #713f12;
  margin-top: 8px;
}

/* کارت‌های بخش‌بندی موضوعی فرم مرحله ۱ */
.form-progress-indicator {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 18px;
}
.form-progress-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
  color: #334155;
  font-weight: 600;
  margin-bottom: 8px;
}
.form-progress-track {
  height: 8px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}
.form-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #059669);
  border-radius: 999px;
  transition: width 0.35s ease;
}

.form-section-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}
.form-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f5f9;
}
.form-section-step-badge {
  background: #e0f2fe;
  color: #0369a1;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.form-section-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #1e293b;
}
.field-hint {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.4;
}

/* زیرعنوان و توضیحات دوستانهٔ زیربخش‌های مرحله ۲ */
.stage2-group-sub {
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: normal;
  margin-top: 2px;
}
.sub-desc {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.4;
  margin-top: 2px;
}