/* ادامه‌ی سیستم طراحی (۲ از ۳) — بعد از base.css و پیش از features.css.
   سه فایل یک آبشارند و ترتیب `<link>`ها در index.html جزو آن است. */

/* ─────────────────────────  نوار پایین  ───────────────────────── */

.nav{
  position:absolute;bottom:0;left:0;right:0;z-index:30;
  height:calc(var(--nav-h) + var(--safe-b));
  padding-bottom:var(--safe-b);
  background:rgba(255,255,255,.93);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--line-soft);
  display:flex;align-items:center;
}
/* با کیبورد باز، نوار پایین پنهان می‌شود (۱۴۰۵/۰۷/۲۹): با `resizes-content`
   درست بالای کیبورد می‌نشست و حدود ۷۰ پیکسل از جای تنگِ بالای آن را
   می‌گرفت. **دو شرط با هم**: کادری داخل صفحه فوکوس دارد، و صفحه واقعاً به
   اندازه‌ی کیبورد کوتاه شده (`html.kb-open`، از `watchKeyboard` در `app.js`).
   فوکوس تنها کافی نیست — «برگشت» اندروید کیبورد را می‌بندد و فوکوس را در
   کادر جا می‌گذارد، و نوار تا ضربه‌ی بعدی گم می‌ماند. مرورگری که `:has()`
   نشناسد کل قاعده را نادیده می‌گیرد و نوار مثل قبل می‌ماند. */
html.kb-open .shell:has(.view input:focus, .view textarea:focus) .nav{display:none;}
.nav button{
  flex:1;min-width:0;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  color:var(--muted);font-size:10px;font-weight:600;
  position:relative;transition:color .2s;padding:0 2px;
}
.nav button span{
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.nav button.on{color:var(--plum);}
.nav button.on::before{
  content:'';position:absolute;top:0;width:26px;height:2.5px;border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,var(--gold-light),var(--gold-deep));
}
.nav .pip{
  position:absolute;top:11px;inset-inline-end:calc(50% - 18px);
  min-width:16px;height:16px;padding:0 4px;border-radius:9px;
  background:var(--bad);color:#fff;font-size:9.5px;font-weight:700;
  display:grid;place-items:center;line-height:1;
}

/* ─────────────────────────  ورود  ───────────────────────── */

/* صفحهٔ ورود **خودش اسکرول می‌شود** (۱۴۰۵/۰۷/۲۹). تا آن روز
   `min-height:100dvh` و `overflow:hidden` داشت و بیرونِ `.view` بود — تنها
   ظرفی که اسکرول دارد. کیبورد که بالا می‌آمد روی کادر شماره و کد
   می‌نشست و صفحه جایی برای بالا رفتن نداشت. حالا قاب را پر می‌کند و اگر با
   کیبورد کوتاه شد، اسکرول می‌خورد؛ `scroll-padding-bottom` کادرِ فوکوس‌شده
   را با جای دکمهٔ زیرش بالا می‌آورد. */
.auth{
  flex:1;min-height:0;display:flex;flex-direction:column;
  overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;
  scroll-padding-bottom:96px;
  background:linear-gradient(165deg,var(--plum-800) 0%,var(--plum-900) 100%);
  color:#fff;padding:calc(var(--safe-t) + 40px) 26px calc(var(--safe-b) + 26px);
  position:relative;
}
.auth > *{flex-shrink:0;}
.auth::after{
  content:'';position:absolute;top:-120px;inset-inline-end:-110px;
  width:290px;height:290px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,162,138,.20),transparent 68%);
}
.auth .top{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:2;}
.auth .mark{
  width:72px;height:72px;border-radius:50%;
  border:1.5px solid var(--gold);color:var(--gold);
  display:grid;place-items:center;font-size:31px;margin-bottom:22px;
}
.auth .mark.logo{object-fit:cover;background:#fff;}
.auth h1{font-size:27px;font-weight:800;margin:0 0 8px;letter-spacing:-.5px;}
.auth .lead{color:rgba(255,255,255,.62);font-size:13.5px;line-height:1.9;margin:0 0 30px;max-width:300px;}
.auth .form{position:relative;z-index:2;}

.field{margin-bottom:14px;}
.field label{display:block;font-size:12px;color:rgba(255,255,255,.55);margin-bottom:7px;font-weight:600;}
.field .box{
  display:flex;align-items:center;gap:10px;
  height:54px;padding:0 16px;border-radius:var(--r);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  transition:border-color .2s,background .2s;
}
.field .box:focus-within{border-color:var(--gold);background:rgba(255,255,255,.10);}
.field .box input{
  flex:1;height:100%;color:#fff;font-size:16px;letter-spacing:1px;
  direction:ltr;text-align:right;font-weight:600;
}
.field .box input::placeholder{color:rgba(255,255,255,.30);letter-spacing:0;font-weight:400;}
.field .box svg{color:var(--gold);flex:none;}

.otp-hint{
  margin:14px 0 0;padding:13px 15px;border-radius:var(--r);
  background:rgba(201,162,138,.11);border:1px dashed rgba(201,162,138,.42);
  font-size:12.5px;color:var(--gold-light);line-height:1.8;
}
.otp-hint b{color:#fff;font-size:19px;letter-spacing:5px;direction:ltr;display:inline-block;}
.auth .foot{font-size:11.5px;color:rgba(255,255,255,.34);text-align:center;margin-top:20px;line-height:1.9;position:relative;z-index:2;}
.auth .err{color:#F0A9AD;font-size:12.5px;margin:10px 2px 0;}
.linkish{color:var(--gold);font-weight:700;font-size:13px;}

/* ─────────────────────────  صفحه خدمت  ───────────────────────── */

.detail-head{
  padding:calc(var(--safe-t) + 14px) 18px 30px;
  background:
    radial-gradient(110% 80% at 100% 0%, rgba(201,162,138,.26) 0%, transparent 55%),
    linear-gradient(160deg,var(--plum) 0%,var(--plum-900) 100%);
  color:#fff;position:relative;
  border-radius:0 0 var(--r-xl) var(--r-xl);
}
.detail-head h1{font-size:22px;font-weight:800;margin:16px 0 6px;letter-spacing:-.4px;line-height:1.5;}
.detail-head .st{font-size:13px;color:rgba(255,255,255,.66);margin:0;line-height:1.8;}
.facts{
  display:flex;gap:9px;margin:-20px 18px 0;position:relative;z-index:3;
}
.fact{
  flex:1;min-width:0;padding:13px 7px;border-radius:var(--r);text-align:center;
  background:#fff;border:1px solid var(--line-soft);box-shadow:var(--sh-2);
}
.fact .k{font-size:10.5px;color:var(--muted);margin-bottom:3px;}
.fact .v{font-size:12.5px;font-weight:700;color:var(--plum);letter-spacing:-.2px;line-height:1.5;}
.prose{font-size:13.5px;line-height:2.1;color:var(--ink-2);margin:0;}

.sticky-cta{
  position:sticky;bottom:0;
  padding:12px 18px calc(12px + var(--safe-b));
  background:linear-gradient(to top,var(--cream) 62%,transparent);
}

/* ─────────────────────────  رزرو  ───────────────────────── */

.days{display:flex;gap:9px;overflow-x:auto;padding:2px 18px 8px;}
.day{
  flex:none;width:62px;padding:11px 4px;border-radius:var(--r);
  background:#fff;border:1.5px solid var(--line-soft);text-align:center;
  box-shadow:var(--sh-1);transition:transform .15s;
}
.day:active{transform:scale(.94);}
.day .wd{font-size:10.5px;color:var(--muted);}
.day .dd{font-size:19px;font-weight:800;letter-spacing:-.5px;margin:2px 0 1px;color:var(--plum);}
.day .mo{font-size:10px;color:var(--muted);}
.day.on{background:linear-gradient(150deg,var(--plum-600),var(--plum));border-color:var(--plum);}
.day.on .wd,.day.on .mo{color:rgba(255,255,255,.62);}
.day.on .dd{color:var(--gold-light);}
.day.off{opacity:.4;pointer-events:none;}

.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;padding:0 18px;}
.slot{
  height:44px;border-radius:var(--r-sm);
  background:#fff;border:1.5px solid var(--line-soft);
  font-size:13.5px;font-weight:600;color:var(--ink-2);
  display:grid;place-items:center;direction:ltr;
  box-shadow:var(--sh-1);transition:transform .12s;
}
.slot:active{transform:scale(.94);}
.slot.on{background:linear-gradient(150deg,var(--plum-600),var(--plum));border-color:var(--plum);color:var(--gold-light);}
.slot.off{background:var(--line-soft);color:#C3B3B9;box-shadow:none;border-color:transparent;
  text-decoration:line-through;pointer-events:none;}

.summary{
  margin:16px 18px 0;padding:16px;border-radius:var(--r-lg);
  background:var(--blush-soft);border:1px solid var(--blush);
}
.summary .ln{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:5px 0;}
.summary .ln .k{color:var(--muted);}
.summary .ln .v{font-weight:700;color:var(--plum);text-align:left;}
.summary hr{border:0;border-top:1px dashed var(--blush);margin:8px 0;}

.notice{
  margin:14px 18px 0;padding:12px 14px;border-radius:var(--r);
  background:var(--warn-bg);color:var(--warn);
  font-size:12px;line-height:1.85;display:flex;gap:9px;align-items:flex-start;
}
.notice svg{flex:none;margin-top:3px;}
.notice.info{background:var(--blush-soft);color:var(--plum-600);border:1px solid var(--blush);}

.textbox{
  width:100%;min-height:78px;padding:13px 15px;border-radius:var(--r);
  background:#fff;border:1.5px solid var(--line);font-size:13.5px;
  line-height:1.9;resize:none;
}
.textbox:focus{border-color:var(--gold);}

/* ─────────────────────────  نوبت‌ها  ───────────────────────── */

.appt{
  margin:0 18px 11px;padding:15px;
  background:#fff;border:1px solid var(--line-soft);
  border-radius:var(--r-lg);box-shadow:var(--sh-1);
  position:relative;overflow:hidden;
}
.appt::before{content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:3.5px;background:var(--line);}
.appt.s-pending::before{background:var(--gold);}
.appt.s-confirmed::before{background:var(--ok);}
.appt.s-rejected::before,.appt.s-cancelled::before{background:var(--bad);}
.appt.s-done::before{background:var(--plum-400);}
/* «نیامد» رنگ خودش را دارد: نه سبزِ انجام‌شده، نه قرمزِ لغو */
.appt.s-no_show::before{background:var(--muted);}
.chip.no_show{background:var(--line);color:var(--ink-2);}
.tile .pct{font-size:12px;font-weight:600;color:var(--muted);margin-inline-start:4px;}
.appt .top{display:flex;align-items:flex-start;gap:11px;margin-bottom:11px;}
.appt .top .nm{flex:1;font-size:14.5px;font-weight:700;letter-spacing:-.2px;line-height:1.6;}
.appt .when{display:flex;gap:14px;font-size:12.5px;color:var(--ink-2);flex-wrap:wrap;}
.appt .when b{font-weight:700;color:var(--plum);}
.appt .when span{display:inline-flex;align-items:center;gap:5px;}
.appt .acts{display:flex;gap:8px;margin-top:13px;padding-top:12px;border-top:1px dashed var(--line);}
.appt .cli{font-size:12.5px;color:var(--ink-2);display:flex;align-items:center;gap:6px;margin-top:7px;}
.appt .note{margin-top:9px;font-size:12px;color:var(--muted);background:var(--line-soft);
  padding:9px 11px;border-radius:10px;line-height:1.8;}

.chip{
  font-size:10.5px;font-weight:700;padding:4px 11px;border-radius:999px;flex:none;white-space:nowrap;
}
.chip.pending{background:var(--warn-bg);color:var(--warn);}
.chip.confirmed{background:var(--ok-bg);color:var(--ok);}
.chip.rejected,.chip.cancelled{background:var(--bad-bg);color:var(--bad);}
.chip.done{background:var(--blush);color:var(--plum);}

.tabs{display:flex;gap:8px;padding:4px 18px 12px;overflow-x:auto;}
.tab{
  flex:none;height:36px;padding:0 15px;border-radius:999px;
  background:#fff;border:1.5px solid var(--line-soft);
  font-size:12.5px;font-weight:600;color:var(--ink-2);
  display:inline-flex;align-items:center;gap:6px;box-shadow:var(--sh-1);
}
.tab.on{background:var(--plum);border-color:var(--plum);color:#fff;}
.tab .n{
  min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--blush);color:var(--plum);font-size:10px;font-weight:700;
  display:grid;place-items:center;line-height:1;
}
.tab.on .n{background:var(--gold);color:#fff;}

/* ─────────────────────────  پنل منشی  ───────────────────────── */

.staff-head{
  padding:calc(var(--safe-t) + 18px) 18px 42px;
  background:
    radial-gradient(110% 80% at 0% 0%, rgba(201,162,138,.22) 0%, transparent 55%),
    linear-gradient(160deg,var(--plum) 0%,var(--plum-900) 100%);
  color:#fff;border-radius:0 0 var(--r-xl) var(--r-xl);
}
.staff-head .eyebrow{font-size:11px;letter-spacing:3px;color:var(--gold);}
.staff-head h1{font-size:21px;font-weight:800;margin:5px 0 3px;letter-spacing:-.3px;}
.staff-head .date{font-size:12.5px;color:rgba(255,255,255,.58);}

/* بالاکشیدن فقط وقتی کاشی‌ها روی سربرگ بنفش می‌نشینند (`.lift`).
   تا ۱۴۰۵/۰۷/۲۳ این `-30px` روی **همهٔ** `.tiles` بود، و در صفحه‌هایی که
   سربرگشان `.topbar`ِ ساده است (چسبنده، پس‌زمینهٔ کرم، `z-index:20`)
   کاشی‌ها را **زیر** آن می‌برد و سرِ ردیف اول بریده دیده می‌شد — در
   «مدیریت محتوا» این را مالک دید. سربرگ بنفش `z-index` ندارد، پس
   هم‌پوشانیِ عمدی آنجا سر جایش می‌ماند. */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 18px;position:relative;z-index:3;}
.tiles.lift{margin-top:-30px;}
.tile{
  padding:15px;border-radius:var(--r-lg);
  background:#fff;border:1px solid var(--line-soft);box-shadow:var(--sh-2);
}
.tile .ic{
  width:34px;height:34px;border-radius:11px;display:grid;place-items:center;margin-bottom:9px;
  background:var(--blush);color:var(--plum);
}
.tile.hot .ic{background:linear-gradient(135deg,var(--gold-light),var(--gold));color:#fff;}
.tile .n{font-size:25px;font-weight:800;letter-spacing:-1px;color:var(--plum);line-height:1.2;}
.tile .k{font-size:11.5px;color:var(--muted);}

.tl{margin:0 18px;}
.tl-row{display:flex;gap:12px;}
.tl-time{
  flex:none;width:52px;text-align:center;padding-top:13px;
  font-size:13px;font-weight:700;color:var(--plum);direction:ltr;
}
.tl-line{flex:none;width:2px;background:var(--line-soft);position:relative;}
.tl-line::before{
  content:'';position:absolute;top:17px;inset-inline-start:-4px;
  width:10px;height:10px;border-radius:50%;background:var(--gold);border:2px solid var(--cream);
}
.tl-body{flex:1;padding:0 0 11px;min-width:0;}

/* ─────────────────────────  خالی / بارگذاری  ───────────────────────── */

.empty{
  padding:52px 34px;text-align:center;color:var(--muted);
}
.empty .ic{
  width:66px;height:66px;border-radius:50%;margin:0 auto 15px;
  background:var(--blush-soft);color:var(--gold);display:grid;place-items:center;
}
.empty h3{font-size:15px;color:var(--ink);margin:0 0 6px;font-weight:700;}
.empty p{font-size:12.5px;line-height:1.9;margin:0 0 18px;}

.skel{
  height:78px;margin:0 18px 11px;border-radius:var(--r-lg);
  background:linear-gradient(90deg,var(--line-soft) 25%,#fff 50%,var(--line-soft) 75%);
  background-size:200% 100%;animation:sk 1.3s linear infinite;
}
@keyframes sk{from{background-position:200% 0}to{background-position:-200% 0}}

/* رنگش `currentColor` است، نه سفیدِ ثابت. دکمهٔ `.btn.bad` پس‌زمینه
   ندارد و روی ورقهٔ کرم می‌نشیند، پس چرخِ سفید رویش **نامرئی** بود —
   دکمه در مدت انتظار به یک قابِ خالی تبدیل می‌شد. روی دکمهٔ طلایی
   هم کم‌رمق بود. با `currentColor` هر دکمه‌ای چرخِ هم‌رنگِ متنِ خودش را
   می‌گیرد، بدون آنکه جایی فهرستِ دستیِ «کدام دکمه چه رنگی» نگه داریم. */
.spin{
  width:16px;height:16px;border-radius:50%;flex:none;
  border:2px solid currentColor;border-top-color:transparent;
  animation:sp .7s linear infinite;
}
@keyframes sp{to{transform:rotate(360deg)}}

/* ─────────────────────────  جستجو  ───────────────────────── */

.search{
  display:flex;align-items:center;gap:10px;
  margin:2px 18px 14px;height:46px;padding:0 15px;border-radius:999px;
  background:#fff;border:1.5px solid var(--line-soft);box-shadow:var(--sh-1);
}
.search:focus-within{border-color:var(--gold);}
.search input{flex:1;font-size:13.5px;}
.search input::placeholder{color:var(--muted);}
.search svg{color:var(--muted);flex:none;}

/* ─────────────────────────  توست و شیت  ───────────────────────── */

.toast{
  position:fixed;bottom:calc(var(--nav-h) + var(--safe-b) + 20px);
  left:50%;transform:translate(-50%,26px);
  max-width:390px;width:calc(100% - 44px);z-index:200;
  padding:13px 17px;border-radius:var(--r);
  background:var(--plum-900);color:#fff;font-size:13px;line-height:1.8;
  box-shadow:0 12px 34px rgba(0,0,0,.30);
  opacity:0;pointer-events:none;transition:.3s cubic-bezier(.2,.8,.3,1);
  display:flex;gap:10px;align-items:flex-start;
}
.toast.show{opacity:1;transform:translate(-50%,0);}
.toast.ok{background:#2F5F47;}
.toast.bad{background:#8C3A3F;}
.toast svg{flex:none;margin-top:3px;}

.sheet-wrap{position:fixed;inset:0;z-index:150;display:flex;align-items:flex-end;justify-content:center;}
.sheet-bg{position:absolute;inset:0;background:rgba(36,19,32,.52);backdrop-filter:blur(2px);animation:fade .2s;}
.sheet{
  position:relative;width:100%;max-width:460px;
  background:var(--cream);border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:10px 18px calc(20px + var(--safe-b));
  animation:up .3s cubic-bezier(.2,.9,.3,1);max-height:88dvh;max-height:min(88dvh, 88%);overflow-y:auto;
}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
.sheet .grab{width:40px;height:4px;border-radius:3px;background:var(--line);margin:0 auto 16px;}
.sheet h3{font-size:17px;font-weight:700;margin:0 0 6px;}
.sheet .lead{font-size:12.5px;color:var(--muted);line-height:1.85;margin:0 0 18px;}
.sheet .acts{display:flex;gap:10px;margin-top:18px;}

.rate{display:flex;gap:8px;justify-content:center;margin:6px 0 18px;}
.rate button{color:var(--line);transition:transform .15s;}
.rate button.on{color:var(--gold);}
.rate button:active{transform:scale(1.15);}

.list-plain{padding:0 18px;}
.kv{
  display:flex;align-items:center;gap:13px;padding:15px 16px;margin-bottom:10px;
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-lg);box-shadow:var(--sh-1);
}
.kv .ic{width:38px;height:38px;border-radius:12px;flex:none;
  background:var(--blush-soft);color:var(--plum);display:grid;place-items:center;}
.kv .t{flex:1;min-width:0;}
.kv .t .a{font-size:13.5px;font-weight:600;}
.kv .t .b{font-size:11.5px;color:var(--muted);margin-top:1px;}
.kv.danger .ic{background:var(--bad-bg);color:var(--bad);}
.kv.danger .t .a{color:var(--bad);}

/* ─────────────────────────  دانشنامه  ───────────────────────── */

.acc{
  margin:0 18px 10px;background:#fff;border:1px solid var(--line-soft);
  border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden;
}
.acc-head{
  width:100%;display:flex;align-items:center;gap:11px;
  padding:15px 16px;text-align:right;
}
.acc-head .ic{
  width:34px;height:34px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:var(--blush-soft);color:var(--plum);
}
.acc-head .t{flex:1;min-width:0;}
.acc-head .t b{display:block;font-size:14px;font-weight:700;letter-spacing:-.2px;}
.acc-head .t span{font-size:11.5px;color:var(--muted);}
.acc-head .chev{color:var(--gold);transition:transform .25s;flex:none;}
.acc.open .acc-head .chev{transform:rotate(-90deg);}
.acc-body{
  padding:0 16px 16px;border-top:1px dashed var(--line);margin-top:-1px;
  animation:accIn .25s ease;
}
@keyframes accIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.acc-body p{margin:12px 0 0;font-size:13.5px;line-height:2.05;color:var(--ink-2);}

.acc.tone-warn .acc-head .ic{background:var(--bad-bg);color:var(--bad);}
.acc.tone-ok   .acc-head .ic{background:var(--ok-bg);color:var(--ok);}
.acc.tone-gold .acc-head .ic{background:linear-gradient(135deg,var(--gold-light),var(--gold));color:#fff;}

.pts{list-style:none;margin:12px 0 0;padding:0;}
.pts li{
  display:flex;gap:9px;align-items:flex-start;
  font-size:13px;line-height:1.95;color:var(--ink-2);padding:6px 0;
}
.pts li + li{border-top:1px dashed var(--line-soft);}
.pts li .mk{flex:none;margin-top:6px;width:16px;height:16px;border-radius:50%;
  display:grid;place-items:center;}
.pts.ok li .mk{background:var(--ok-bg);color:var(--ok);}
.pts.warn li .mk{background:var(--bad-bg);color:var(--bad);}
.pts.plain li .mk{background:var(--blush);color:var(--plum);}

.honest{
  margin:14px 18px 0;padding:15px 16px;border-radius:var(--r-lg);
  background:linear-gradient(150deg,#FFF9F2,#FDF3E9);
  border:1px solid #EFDCC4;
}
.honest .hd{display:flex;align-items:center;gap:8px;margin-bottom:8px;
  font-size:12.5px;font-weight:700;color:#8A6320;}
.honest p{margin:0;font-size:13px;line-height:2.05;color:#6B4E1E;}

.urgent{
  margin:0 18px 10px;padding:15px 16px;border-radius:var(--r-lg);
  background:var(--bad-bg);border:1px solid #F2CFD1;
}
.urgent .hd{display:flex;align-items:center;gap:8px;margin-bottom:6px;
  font-size:13px;font-weight:700;color:var(--bad);}
.urgent .pts li{color:#7E3A3E;}
.urgent .pts li + li{border-top-color:#F2CFD1;}
.urgent .pts li .mk{background:#F5D8DA;color:var(--bad);}

.privacy{
  margin:14px 18px 0;padding:14px 16px;border-radius:var(--r-lg);
  background:linear-gradient(150deg,var(--plum),var(--plum-900));color:#fff;
}
.privacy .hd{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;
  color:var(--gold-light);margin-bottom:7px;}
.privacy p{margin:0;font-size:12.5px;line-height:1.95;color:rgba(255,255,255,.78);}

.draftbar{
  margin:14px 18px 0;padding:12px 14px;border-radius:var(--r);
  background:#FFF4E5;border:1px dashed #E8C48D;
  font-size:12px;line-height:1.85;color:#8A5A16;
  display:flex;gap:9px;align-items:flex-start;
}
.draftbar svg{flex:none;margin-top:3px;}

.stage{display:flex;gap:12px;}
.stage .rail{flex:none;width:26px;display:flex;flex-direction:column;align-items:center;}
.stage .dot{
  width:26px;height:26px;border-radius:50%;flex:none;
  background:linear-gradient(150deg,var(--gold-light),var(--gold));color:#fff;
  display:grid;place-items:center;font-size:11px;font-weight:700;
}
.stage .line{flex:1;width:2px;background:var(--line);margin:4px 0;}
.stage .content{flex:1;min-width:0;padding-bottom:16px;}
.stage .content h4{margin:3px 0 8px;font-size:13.5px;font-weight:700;color:var(--plum);}
.stage .grp{margin-bottom:9px;}
.stage .grp .lbl{font-size:11px;font-weight:700;margin-bottom:3px;display:flex;align-items:center;gap:5px;}
.stage .grp.do  .lbl{color:var(--ok);}
.stage .grp.dont .lbl{color:var(--bad);}
.stage .grp.sign .lbl{color:var(--muted);}
.stage .grp ul{list-style:none;margin:0;padding:0;}
.stage .grp li{font-size:12.5px;line-height:1.9;color:var(--ink-2);padding-right:14px;position:relative;}
.stage .grp li::before{content:'';position:absolute;inset-inline-start:0;top:10px;
  width:4px;height:4px;border-radius:50%;background:var(--line);}
.stage .grp.do li::before{background:var(--ok);}
.stage .grp.dont li::before{background:var(--bad);}

.qa{border-top:1px dashed var(--line);padding:12px 0 0;margin-top:12px;}
.qa:first-child{border-top:0;padding-top:0;margin-top:0;}
.qa .q{font-size:13px;font-weight:700;color:var(--plum);margin-bottom:5px;display:flex;gap:7px;}
.qa .a{font-size:12.5px;line-height:2;color:var(--ink-2);margin:0;padding-inline-start:19px;}

.factgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:12px 0 0;}
.factgrid .b{padding:12px;border-radius:var(--r);background:var(--blush-soft);border:1px solid var(--blush);}
.factgrid .b .k{font-size:10.5px;color:var(--muted);margin-bottom:3px;}
.factgrid .b .v{font-size:12.5px;font-weight:700;color:var(--plum);line-height:1.6;}
.factgrid .b.wide{grid-column:1 / -1;}