
/* ===========================================================================
   میز کار سفر — رنگ

   قبلاً تقریباً تک‌رنگ بود: سرمه‌ای و خاکستری، و بس. خوانا بود ولی مرده.
   حالا رنگ کار می‌کند، نه اینکه فقط تزئین باشد:

     نیلی (accent)  — کارِ اصلی: دکمهٔ اقدام، تبِ فعال، پیوند
     فیروزه‌ای (teal) — پول و خزانه
     بنفش (violet)  — سند و دفتر
     برنجی (brass)  — عددهای کلیدی، همان‌جا که چشم باید بایستد
     سبز/زرد/سرخ    — وضعیت: خوب، هشدار، بد

   هر رنگ یک معنی دارد و همان معنی را همه‌جا نگه می‌دارد. رنگی که هر جا
   چیز دیگری بگوید، از بی‌رنگی بدتر است.
   =========================================================================== */

:root{
  /* color-scheme چیزی است که مرورگر با آن کنترل‌های خودش را رنگ می‌کند:
     فهرستِ بازشوندهٔ <select>، اسکرول‌بار، تقویمِ input[type=date]، چک‌باکس.
     این‌ها را CSS ما رنگ نمی‌کند — سیستم می‌کشدشان.

     تا امروز اعلام نشده بود، پس مرورگر همیشه فرض می‌کرد صفحه روشن است و
     فهرستِ select را سفید می‌کشید؛ ولی رنگِ متنِ گزینه‌ها را از ما
     می‌گرفت که در تم تیره روشن است. نتیجه: سفید روی سفید، و کاربر یک
     فهرستِ خالی می‌دید. با اعلام‌کردنش، خودِ مرورگر همه‌شان را درست
     می‌کند — یک سطر، به‌جای رنگ‌کردنِ تک‌تکِ کنترل‌ها که به‌هرحال
     روی ویندوز جواب نمی‌دهد. */
  color-scheme:light;

  --ground:#F2F5FA; --surface:#FFFFFF; --surface-2:#EBEFF7;
  --line:#D6DEEC; --line-soft:#E6EBF4;
  --ink:#111726; --ink-2:#39445A; --muted:#68748C;

  --accent:#2B4BC4;      --accent-soft:#E4E9FD; --accent-ink:#FFFFFF;
  --accent-2:#5B7BF0;                            /* برای گرادیان و حالت فعال */
  --teal:#0E7C86;        --teal-soft:#DBF1F3;    /* خزانه و پول */
  --violet:#6D3FC4;      --violet-soft:#EDE5FB;  /* دفتر و اسناد */
  --brass:#9A6B08;       --brass-soft:#FBF0D8;

  --ok:#0F7A4E;   --ok-soft:#DAF3E7;
  --warn:#A2620A; --warn-soft:#FCEED6;
  --bad:#C0342F;  --bad-soft:#FCE3E1;
  --wa:#128C4A;

  --radius:10px;
  --shadow:0 1px 2px rgba(17,23,38,.05), 0 10px 28px rgba(30,50,120,.07);
  --shadow-lift:0 2px 6px rgba(17,23,38,.07), 0 16px 40px rgba(30,50,120,.12);
  --sidebar:246px;
}

/* تیره — همان معناها، با اشباعِ بیشتر تا روی زمینهٔ تیره نمیرند */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ground:#090D15; --surface:#141B27; --surface-2:#1C2634;
    --line:#2A3547; --line-soft:#212B3A;
    --ink:#EAEFF8; --ink-2:#B7C2D4; --muted:#8794A9;

    --accent:#7E9BFF;      --accent-soft:#1A2547; --accent-ink:#080C14;
    --accent-2:#A9BEFF;
    --teal:#3FC5CE;        --teal-soft:#0D2B2E;
    --violet:#B392F5;      --violet-soft:#231A3C;
    --brass:#E0B45C;       --brass-soft:#2C2413;

    --ok:#4FD69C;   --ok-soft:#0C2B20;
    --warn:#EFBB63; --warn-soft:#2D2314;
    --bad:#FF8D86;  --bad-soft:#331A1A;
    --wa:#4FD69C;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 28px rgba(0,0,0,.4);
    --shadow-lift:0 2px 8px rgba(0,0,0,.55), 0 18px 44px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:#090D15; --surface:#141B27; --surface-2:#1C2634;
  --line:#2A3547; --line-soft:#212B3A;
  --ink:#EAEFF8; --ink-2:#B7C2D4; --muted:#8794A9;

  --accent:#7E9BFF;      --accent-soft:#1A2547; --accent-ink:#080C14;
  --accent-2:#A9BEFF;
  --teal:#3FC5CE;        --teal-soft:#0D2B2E;
  --violet:#B392F5;      --violet-soft:#231A3C;
  --brass:#E0B45C;       --brass-soft:#2C2413;

  --ok:#4FD69C;   --ok-soft:#0C2B20;
  --warn:#EFBB63; --warn-soft:#2D2314;
  --bad:#FF8D86;  --bad-soft:#331A1A;
  --wa:#4FD69C;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 28px rgba(0,0,0,.4);
  --shadow-lift:0 2px 8px rgba(0,0,0,.55), 0 18px 44px rgba(0,0,0,.5);
}

/* تم روشنِ دستی روی سیستمِ تیره: بدون این، مرورگر همچنان کنترل‌هایش را
   تیره می‌کشد چون سیستم تیره است. */
:root[data-theme="light"]{color-scheme:light}

*{box-sizing:border-box}
/* یک قاعدهٔ ساده که یک باگ واقعی را بست: صفت hidden از طریق استایل‌شیت مرورگر
   display:none می‌دهد، ولی هر قاعدهٔ نویسنده — مثل .shell{display:flex} — بر آن
   غلبه می‌کند. نتیجه‌اش این بود که کل پوستهٔ برنامه زیر صفحهٔ ورود رندر می‌شد. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0; color:var(--ink);
  background:
    radial-gradient(1200px 420px at 100% -10%,
      color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
    radial-gradient(900px 380px at 0% 8%,
      color-mix(in srgb, var(--teal) 7%, transparent), transparent 70%),
    var(--ground);
  background-attachment:fixed;
  font-family:Vazirmatn,"Segoe UI",system-ui,sans-serif;
  font-size:15px; line-height:1.6; direction:rtl}
.mono,.num{font-family:Vazirmatn,"Segoe UI",system-ui,sans-serif;
  font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate}
h1,h2,h3{font-family:Vazirmatn,"Segoe UI",system-ui,sans-serif; margin:0;
  text-wrap:balance; letter-spacing:-.01em}
button,input,select{font:inherit; color:inherit}
/* بیمهٔ دوم روی ویندوز: color-scheme کارِ اصلی را می‌کند، ولی کرومِ
   قدیمی‌تر فهرست را همچنان سفید می‌کشد و متنِ روشن رویش گم می‌شود. این دو
   خط زمینه و متنِ گزینه‌ها را صریح می‌گذارد، پس در هر نسخه‌ای خواناست. */
select option{background:var(--surface); color:var(--ink)}
select option:checked{background:var(--accent-soft); color:var(--accent)}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

.shell{display:flex; min-height:100vh}
.side{width:var(--sidebar); flex:0 0 var(--sidebar);
  background:linear-gradient(180deg, var(--surface),
    color-mix(in srgb, var(--accent) 4%, var(--surface)));
  border-left:1px solid var(--line); display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh}
.brand{padding:20px 20px 16px; border-bottom:1px solid var(--line-soft);
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 10%, transparent),
    color-mix(in srgb, var(--violet) 8%, transparent) 60%, transparent)}
.brand .mark{display:flex; align-items:center; gap:10px}
/* نشانِ سیاق جای حرفِ «س» در جعبهٔ آبی نشست. تصویر است، پس نه رنگ
   می‌گیرد نه گرادیان — خودش رنگِ برند را می‌آورد و در هر دو تم یکی است.
   اگر فایلِ نشان نبود، همان جعبه با حرف D جایش را می‌گیرد. */
.brand .glyph{width:34px; height:34px; flex:0 0 34px; border-radius:9px;
  object-fit:contain; display:block}
.brand div.glyph{background:linear-gradient(140deg, var(--accent), var(--violet));
  color:var(--accent-ink); display:grid; place-items:center;
  box-shadow:0 3px 10px color-mix(in srgb, var(--accent) 40%, transparent);
  font-family:Vazirmatn,"Segoe UI",system-ui,sans-serif; font-weight:800; font-size:16px}
.brand h1{font-size:1.02rem; font-weight:700; line-height:1.35}
.brand .by{font-size:.72rem; color:var(--muted); margin-top:1px}
.brand .co{margin-top:8px; font-size:.8rem; color:var(--ink-2); font-weight:600}

/* min-height:0 لازم است: خانهٔ فلکس کوچک‌تر از محتوایش نمی‌شود مگر صریح
   بگوییم. بدون آن، با بلندتر شدنِ سربرگ (لوگو) و پاورقی، منو از پایین
   صفحه بیرون می‌زد و آخرین تب‌ها اصلاً قابل کلیک نبودند. */
.nav{padding:12px 10px; overflow-y:auto; flex:1; min-height:0}
.nav .group{font-size:.7rem; color:var(--muted); letter-spacing:.08em;
  padding:14px 12px 6px; font-weight:600}
.nav button{width:100%; display:flex; align-items:center; gap:11px; background:none;
  border:0; cursor:pointer; text-align:start; padding:9px 12px; border-radius:var(--radius);
  color:var(--ink-2); font-size:.92rem; transition:background .12s, color .12s}
.nav button:hover{background:var(--surface-2); color:var(--ink)}
.nav button.on{background:var(--accent-soft); color:var(--accent); font-weight:600;
  position:relative}
.nav button.on::before{content:""; position:absolute; inset-inline-start:0;
  top:18%; bottom:18%; width:3px; border-radius:0 3px 3px 0;
  background:linear-gradient(var(--accent), var(--violet))}
.nav button .ic{width:18px; flex:0 0 18px; opacity:.85}
/* صفحه‌های زیر یک سرفصل یک پله تورفته‌اند، تا با یک نگاه معلوم باشد کدام
   زیرِ کدام است. خطِ عمودیِ کم‌رنگ همان کاری را می‌کند که تورفتگیِ تنها
   نمی‌کند: چشم دنبالش می‌رود و گروه را یک‌جا می‌بیند. */
.nav button.sub{padding-inline-start:26px; position:relative}
.nav button.sub::after{content:""; position:absolute; inset-inline-start:13px;
  top:4px; bottom:4px; width:1px; background:var(--line)}
.nav button.sub.on::after{background:var(--accent); opacity:.55}
.nav button .badge{margin-inline-start:auto; font-size:.72rem; padding:1px 7px;
  border-radius:99px; background:var(--bad-soft); color:var(--bad); font-weight:600}

.side .foot{padding:12px 14px; border-top:1px solid var(--line-soft);
  display:flex; align-items:center; gap:10px}
.side .foot .av{width:30px; height:30px; border-radius:50%; flex:0 0 30px;
  background:var(--surface-2); display:grid; place-items:center; font-size:.8rem; font-weight:600}
.side .foot .who b{display:block; font-size:.85rem; font-weight:600}
.side .foot .who span{font-size:.74rem; color:var(--muted)}
.side .foot .out{margin-inline-start:auto; background:none; border:0; cursor:pointer;
  color:var(--muted); font-size:.8rem}
.side .foot .out:hover{color:var(--bad)}

.main{flex:1; min-width:0; display:flex; flex-direction:column}
.top{display:flex; align-items:center; gap:14px; padding:16px 26px; background:var(--surface);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20}
.top .burger{display:none; background:none; border:1px solid var(--line);
  border-radius:var(--radius); padding:6px 9px; cursor:pointer; line-height:1}
.top h2{font-size:1.12rem; font-weight:700}
.top .sub{font-size:.78rem; color:var(--muted); margin-top:2px}
.top .spacer{flex:1}
.top .date{font-size:.82rem; color:var(--muted)}
/* عرض کامل صفحه. سقف ۱۲۴۰ پیکسل باعث می‌شد روی مانیتور بزرگ نصف صفحه
   خالی بماند و همان جدول‌ها تنگ شوند و تاریخ و مبلغ به دو خط بروند.
   حالا فقط یک سقف بسیار بلند برای نمایشگرهای فوق‌عریض می‌ماند. */
.page{padding:24px 26px 60px; max-width:2000px; width:100%}
.page[hidden]{display:none}

.card{background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow)}
.card > header{border-radius:var(--radius) var(--radius) 0 0}
.card + .card{margin-top:18px}
/* کارتی که کارِ خطرناک دارد. لبهٔ قرمز، تا وسطِ صفحهٔ پر از کارتِ خاکستری
   بی‌آنکه بخوانی معلوم باشد این یکی فرق دارد. */
.card.bad{border-color:color-mix(in srgb, var(--bad) 45%, var(--line))}
.card.bad > header h3{color:var(--bad)}
.card > header{display:flex; align-items:center; gap:12px; padding:14px 18px;
  border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 4%, transparent), transparent)}
.card > header h3{font-size:.95rem; font-weight:700}
.card > header .spacer{flex:1}
.card .body{padding:18px}
.card .body.flush{padding:0}

.btn{display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  padding:8px 14px; border-radius:var(--radius); font-size:.88rem; font-weight:500;
  transition:background .12s, border-color .12s}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color:transparent; color:var(--accent-ink); font-weight:600;
  box-shadow:0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent)}
.btn.primary:hover{filter:brightness(1.07);
  box-shadow:0 4px 14px color-mix(in srgb, var(--accent) 45%, transparent)}
.btn.sm{padding:5px 10px; font-size:.8rem}
.btn.quiet{border-color:transparent; background:none; color:var(--accent)}
.btn.quiet:hover{background:var(--accent-soft)}
.btn.wa{color:var(--wa); border-color:color-mix(in srgb, var(--wa) 35%, transparent)}
.btn.wa:hover{background:color-mix(in srgb, var(--wa) 12%, transparent)}
.btn.wa svg{width:15px; height:15px; fill:currentColor}
/* دکمهٔ کارِ برگشت‌ناپذیر. قرمزِ توپُر، نه هم‌شکلِ بقیه: دستی که روی صفحه
   می‌چرخد باید پیش از فشاردادن یک لحظه مکث کند. */
.btn.bad{background:var(--bad); border-color:var(--bad); color:#fff; font-weight:600}
.btn.bad:hover{filter:brightness(.92); background:var(--bad)}

.pill{display:inline-block; padding:2px 9px; border-radius:99px;
  font-size:.74rem; font-weight:600; white-space:nowrap;
  border:1px solid transparent}
.pill.ok  {border-color:color-mix(in srgb, var(--ok) 28%, transparent)}
.pill.warn{border-color:color-mix(in srgb, var(--warn) 30%, transparent)}
.pill.bad {border-color:color-mix(in srgb, var(--bad) 28%, transparent)}
.pill.ok{background:var(--ok-soft); color:var(--ok)}
.pill.warn{background:var(--warn-soft); color:var(--warn)}
.pill.bad{background:var(--bad-soft); color:var(--bad)}
.pill.flat{background:var(--surface-2); color:var(--ink-2)}
/* بنفش = سند و دفتر، همان معنایی که در بقیهٔ برنامه دارد. سطرِ «خرید» در
   تاریخچهٔ مشتری همان سندِ فروش است. */
.pill.violet{background:var(--violet-soft); color:var(--violet);
  border-color:color-mix(in srgb, var(--violet) 28%, transparent)}
/* کارتِ هر زائر در فرمِ ثبت‌نام.
   سطرِ جدول با هشت ستون روی هیچ صفحه‌ای جا نمی‌گرفت؛ کارت همان اطلاعات را
   در سه ردیف می‌گذارد و روی موبایل هم خوانا می‌ماند. */
.pax{border:1px solid var(--line); border-radius:var(--radius); margin-bottom:12px;
  overflow:visible}
.pax > header{display:flex; align-items:center; gap:9px; padding:8px 12px;
  background:var(--surface-2); font-size:.86rem; font-weight:600;
  border-bottom:1px solid var(--line-soft);
  border-radius:var(--radius) var(--radius) 0 0}
.pax > .body{padding:12px 12px 0}
.pax > .body .f:last-child{margin-bottom:12px}
.pax.head{border-color:color-mix(in srgb, var(--violet) 35%, transparent)}
.pax.head > header{background:var(--violet-soft); color:var(--violet)}

/* پیشنهادِ نام هنگام تایپ. روی کادر می‌نشیند، پس ظرفش باید position دار
   باشد — کلاس .ac روی همان .f. */
.f.ac{position:relative}
.aclist{position:absolute; inset-inline:0; top:100%; z-index:40;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-lift);
  margin-top:3px; overflow:hidden}
.aclist button{display:block; width:100%; text-align:start; font:inherit;
  font-size:.86rem; border:0; background:none; padding:7px 12px; cursor:pointer;
  color:var(--ink)}
.aclist button:hover{background:var(--surface-2)}

/* کادرِ تاریخِ دوگانه — شمسی کنار میلادی.
   شمسی اول (سمت راست) می‌آید چون کارمندِ هرات تاریخ را شمسی در ذهن دارد؛
   میلادی کنارش است برای پاسپورت و تکت. */
.dual{display:grid; grid-template-columns:1fr 1fr; gap:8px; align-items:center}
.dual .jdate{min-width:0}
@media (max-width:520px){.dual{grid-template-columns:1fr}}

/* وضعیتِ کاروان در سرِ کارتش — هم نشان است هم کلید. شکلش را از .pill
   می‌گیرد تا کنار بقیهٔ نشان‌های همان ردیف بیگانه نباشد. */
.pillsel{appearance:none; border:1px solid var(--line); border-radius:99px;
  background:var(--surface-2); color:var(--ink); cursor:pointer;
  font:inherit; font-size:.74rem; font-weight:600; padding:2px 24px 2px 9px;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 13px) 50%, calc(100% - 9px) 50%;
  background-size:4px 4px, 4px 4px; background-repeat:no-repeat}
.pillsel:hover{border-color:var(--accent)}

/* چیپِ ارز در کارت حساب — هم مانده را می‌گوید هم دکمهٔ عوض‌کردن ارز است */
button.pill.ccy{border:1px solid transparent; cursor:pointer; font-family:inherit}
button.pill.ccy:hover{border-color:var(--line)}
button.pill.ccy.on{outline:2px solid var(--accent); outline-offset:1px}

/* کلیدِ فیلتر در سربرگ کارت — چک‌باکس و متنش یک واحد، نه دو تکهٔ جدا */
.chk{display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  font-size:.8rem; color:var(--ink-2); user-select:none}
.chk input{cursor:pointer; accent-color:var(--accent)}

/* سود و زیان — رنگ خودش پیام است؛ عدد سیاه یعنی «این معامله بی‌سود بود» */
.pnl{font-variant-numeric:tabular-nums; font-weight:700; white-space:nowrap}
.pnl.up{color:var(--ok)}
.pnl.down{color:var(--bad)}
.pnl.zero{color:var(--muted); font-weight:400}
.why{font-size:.75rem; color:var(--muted); display:block; margin-top:2px}
/* شرح سند، زیر سربرگ — «بابت چه بود» باید روی خودِ سند دیده شود، وگرنه
   نوشتنش بی‌فایده است و شش ماه بعد کسی جوابش را ندارد. */
.sanad .sdesc{padding:8px 18px 0; font-size:.83rem; color:var(--ink-2)}

/* شمارندهٔ بستنِ خودکار — پیدا باشد تا بسته‌شدن غافلگیری نباشد، ولی آن‌قدر
   کم‌رنگ که چشم را از خودِ سند نگیرد. خالی که شد یعنی ساعت ایستاده. */
.acx{font-size:.72rem; color:var(--muted); margin-inline-start:10px;
  font-variant-numeric:tabular-nums; min-width:9ch; text-align:start}

.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px}
/* کاشی‌ها: هر کدام یک نوارِ رنگی بالای خودش دارد و ته‌رنگی از همان رنگ.
   رنگ تزئین نیست — هم‌رنگِ صفحه‌ای است که کاشی به آن می‌برد، پس چشم بعد
   از دو روز بی‌آنکه بخواند می‌داند کدام کاشی کدام است. */
.tile{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:15px 17px; box-shadow:var(--shadow); position:relative; overflow:hidden;
  transition:box-shadow .15s, transform .15s}
.tile::before{content:""; position:absolute; inset-block-start:0; inset-inline:0;
  height:3px; background:var(--tint, var(--accent))}
.tile::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(160deg,
    color-mix(in srgb, var(--tint, var(--accent)) 7%, transparent), transparent 55%)}
.tile > *{position:relative; z-index:1}
.tile:hover{box-shadow:var(--shadow-lift)}
.tile.t-money{--tint:var(--teal)}
.tile.t-debt {--tint:var(--brass)}
.tile.t-sale {--tint:var(--accent)}
.tile.t-profit{--tint:var(--ok)}
.tile.t-cost {--tint:var(--bad)}
.tile.t-doc  {--tint:var(--violet)}
.tile .k{font-size:.78rem; color:var(--muted)}
.tile .v{font-family:Vazirmatn,"Segoe UI",system-ui,sans-serif; font-variant-numeric:tabular-nums;
  font-size:1.45rem; font-weight:600; margin-top:8px; direction:ltr; unicode-bidi:isolate}
.tile .v{color:var(--tint, var(--ink))}
.tile .v.brass{color:var(--brass)}
.tile .n{font-size:.76rem; color:var(--muted); margin-top:5px}
.tile .spark{margin-top:10px; display:block; width:100%; height:28px}

.tw{overflow-x:auto}
table{border-collapse:collapse; width:100%; font-size:.88rem; min-width:680px}
thead th{text-align:start; font-size:.72rem; letter-spacing:.04em;
  color:color-mix(in srgb, var(--accent) 72%, var(--muted));
  font-weight:700; padding:10px 18px;
  background:color-mix(in srgb, var(--accent) 7%, var(--surface-2));
  border-bottom:1px solid var(--line); white-space:nowrap}
tbody td{padding:11px 18px; border-bottom:1px solid var(--line-soft); vertical-align:middle}
/* تاریخ، مبلغ، PNR و نام مشتری نباید وسط کلمه بشکنند. متن‌های بلند
   (شرح سند، مسیر) آزادند بشکنند، وگرنه جدول از صفحه بیرون می‌زند. */
tbody td.nw, thead th.nw{white-space:nowrap}
td.n, th.n{white-space:nowrap}
tbody td.wide{min-width:220px}
tbody tr:last-child td{border-bottom:0}
tbody tr.click{cursor:pointer}
tbody tr.click:hover{background:var(--surface-2)}
td.n,th.n{text-align:end; font-family:Vazirmatn,"Segoe UI",system-ui,sans-serif;
  font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate}
td.act{text-align:end; white-space:nowrap}
td.act .btn{margin-inline-start:5px}
.dim{color:var(--muted)} .neg{color:var(--bad)} .pos{color:var(--ok)}

.bar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px}
.bar .search{position:relative; flex:1; min-width:180px; max-width:340px}
.bar .search input{width:100%; padding:9px 34px 9px 12px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--surface)}
.bar .search .ic{position:absolute; inset-inline-start:11px; top:50%;
  transform:translateY(-50%); color:var(--muted); pointer-events:none}
.seg{display:inline-flex; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.seg button{background:var(--surface); border:0; padding:8px 14px; cursor:pointer;
  font-size:.85rem; color:var(--ink-2)}
.seg button + button{border-inline-start:1px solid var(--line)}
.seg button.on{background:var(--accent); color:var(--accent-ink); font-weight:600}

/* زیرتب‌های تنظیمات */
.subtabs{display:flex; gap:4px; flex-wrap:wrap; margin-bottom:18px;
  border-bottom:1px solid var(--line); padding-bottom:0}
.subtabs button{background:none; border:0; border-bottom:2px solid transparent;
  padding:9px 14px; cursor:pointer; color:var(--muted); font-size:.9rem; margin-bottom:-1px}
.subtabs button:hover{color:var(--ink)}
.subtabs button.on{color:var(--accent); border-bottom-color:var(--accent); font-weight:600}

/* تب‌های داخل کارت — دفتر روزنامه به تفکیک نوع فعالیت، مصارف به تفکیک نوع.
   شمارش روی خود تب می‌نشیند تا کاربر پیش از کلیک بداند آن‌جا چیزی هست. */
.tabs{display:flex; gap:4px; flex-wrap:wrap; padding:0 14px;
  border-bottom:1px solid var(--line-soft); overflow-x:auto}
.tabs button{background:none; border:0; border-bottom:2px solid transparent;
  padding:9px 12px; cursor:pointer; color:var(--muted); font-size:.85rem;
  margin-bottom:-1px; white-space:nowrap; display:inline-flex; align-items:center; gap:6px}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:var(--accent); border-bottom-color:var(--accent); font-weight:600}
.tabs .n{font-size:.72rem; background:var(--surface-2); color:var(--ink-2);
  border-radius:99px; padding:1px 7px; font-variant-numeric:tabular-nums}
.tabs button.on .n{background:var(--accent-soft); color:var(--accent)}

/* تب‌هایی که بیرونِ کارت‌اند و کلِ صفحه را عوض می‌کنند — مثل انتخابِ
   کاروان در «مصارف کاروان»، که هم کارت‌های بالا را می‌چرخاند هم فهرستِ
   تیک‌زدن را. اینها نوارِ سرِ صفحه‌اند، پس مثل کارت زمینه می‌گیرند. */
.tabs.standalone{background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:0 10px; box-shadow:var(--shadow)}

/* صفحه‌بندی — دفتر یک سالِ کاری صدها سطر دارد */
.pager{display:flex; align-items:center; gap:10px; justify-content:center;
  padding:12px 16px; border-top:1px solid var(--line-soft); font-size:.83rem;
  color:var(--muted); flex-wrap:wrap}
.pager:empty{display:none}
.pager button{background:var(--surface); border:1px solid var(--line); cursor:pointer;
  border-radius:6px; padding:5px 12px; color:var(--ink); font-size:.83rem}
.pager button:disabled{opacity:.4; cursor:default}
.pager .who{font-variant-numeric:tabular-nums}

/* گرافِ میله‌ای — SVG درجا، بدون هیچ کتابخانه‌ای. اینترنت هرات ضعیف است و
   یک فایل ۳۰۰ کیلوبایتی از CDN یعنی صفحه‌ای که باز نمی‌شود. */
.chart{width:100%; display:block; overflow:visible}
.chart .bar{fill:var(--accent)}
.chart .bar.neg{fill:var(--bad)}
.chart .bar.alt{fill:var(--brass)}
.chart .gl{stroke:var(--line-soft); stroke-width:1}
.chart text{fill:var(--muted); font-size:10px; font-family:Vazirmatn,system-ui,sans-serif}
.chart text.val{fill:var(--ink-2); font-weight:600}
.chartwrap{overflow-x:auto}
.chartlegend{display:flex; gap:14px; flex-wrap:wrap; margin-top:8px;
  font-size:.76rem; color:var(--muted)}
.chartlegend i{display:inline-block; width:10px; height:10px; border-radius:2px;
  margin-inline-end:5px; vertical-align:middle}

/* کارت نرخ ارز روی داشبورد */
.ratecard{margin-bottom:18px}
.ratecard.due{border-color:var(--warn); box-shadow:0 0 0 3px var(--warn-soft)}

.scrim{position:fixed; inset:0; background:rgba(10,14,22,.44); z-index:50;
  opacity:0; pointer-events:none; transition:opacity .18s}
.scrim.open{opacity:1; pointer-events:auto}
/* کشو پهن‌تر شد: جدول مسافران با PNR و تاریخ پرواز در ۵۲۰ پیکسل جا نمی‌شد
   و کاربر مجبور بود داخل جدول افقی اسکرول کند. */
.drawer{position:fixed; top:0; bottom:0; left:0; z-index:60; width:min(860px,100%);
  background:var(--surface); border-right:1px solid var(--line); display:flex;
  flex-direction:column; transform:translateX(-100%); transition:transform .22s ease;
  box-shadow:var(--shadow)}
.drawer.open{transform:none}
.drawer > header{display:flex; align-items:center; gap:12px; padding:16px 20px;
  border-bottom:1px solid var(--line)}
.drawer > header h3{font-size:1rem; font-weight:700}
.drawer > header .x{margin-inline-start:auto; background:none; border:0; cursor:pointer;
  color:var(--muted); font-size:1.3rem; line-height:1; padding:2px 6px}
.drawer .content{padding:20px; overflow-y:auto; flex:1}
.drawer > footer{padding:14px 20px; border-top:1px solid var(--line);
  display:flex; gap:10px; background:var(--surface)}
.drawer > footer .btn{flex:1; justify-content:center}

.f{margin-bottom:14px}
.f > label{display:block; font-size:.78rem; color:var(--muted); margin-bottom:5px; font-weight:500}
.f input,.f select{width:100%; padding:9px 11px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--surface)}
.f .hint{display:block; font-size:.74rem; color:var(--muted); margin-top:5px}
/* خطِ خوانای زیر کادر تاریخ: «۱۰ نومبر ۲۰۲۶ · 10 Nov 2026».
   پررنگ‌تر از یک راهنمای معمولی است چون نقشش کنترلِ اشتباه است، نه توضیح.
   وقتی تاریخی انتخاب نشده خالی است و جا هم نمی‌گیرد. */
.f .hint.datehint{color:var(--accent); font-weight:600}
.f .hint.datehint:empty{display:none}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.row3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px}

.note{border-radius:var(--radius); padding:11px 14px; font-size:.84rem; margin-bottom:14px}
.note.info{background:var(--accent-soft); color:var(--accent)}
.note.warn{background:var(--warn-soft); color:var(--warn)}
.note.bad{background:var(--bad-soft); color:var(--bad)}
.note.ok{background:var(--ok-soft); color:var(--ok)}

.sum{border-top:1px solid var(--line-soft); margin-top:6px; padding-top:12px}
.sum .r{display:flex; justify-content:space-between; align-items:baseline;
  padding:5px 0; font-size:.87rem}
.sum .r .k{color:var(--muted)}
.sum .r .v{font-family:Vazirmatn,"Segoe UI",system-ui,sans-serif; font-variant-numeric:tabular-nums;
  direction:ltr; unicode-bidi:isolate}
.sum .r.big{border-top:1px solid var(--line-soft); margin-top:8px; padding-top:12px}
.sum .r.big .k{color:var(--ink); font-weight:600}
.sum .r.big .v{font-size:1.15rem; font-weight:600; color:var(--brass)}

/* شمارندهٔ مسافر */
.counts{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px}
.count{display:flex; align-items:center; gap:0; border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; background:var(--surface)}
.count .lbl{padding:0 12px; font-size:.84rem; color:var(--ink-2)}
.count button{width:32px; height:34px; border:0; background:var(--surface-2);
  cursor:pointer; font-size:1.05rem; line-height:1; color:var(--ink-2)}
.count button:hover{background:var(--accent-soft); color:var(--accent)}
.count .n{width:34px; text-align:center; font-family:Vazirmatn,"Segoe UI",system-ui,sans-serif;
  font-weight:600; font-variant-numeric:tabular-nums}

/* سطر مسافر */
.paxrow{display:grid; grid-template-columns:26px 1fr 92px 70px 70px 104px 26px;
  gap:7px; align-items:center; padding:7px 0; border-bottom:1px solid var(--line-soft)}
.paxrow:last-of-type{border-bottom:0}
.paxrow .i{font-size:.75rem; color:var(--muted); text-align:center}
.paxrow input{width:100%; padding:7px 9px; border:1px solid var(--line);
  border-radius:6px; background:var(--surface); font-size:.85rem}
.paxrow .x{background:none; border:0; color:var(--muted); cursor:pointer; font-size:1rem}
.paxrow .x:hover{color:var(--bad)}
/* «همه» — دکمهٔ پرکردنِ کلِ طلب. جای همان × است، پس باید در همان ۲۶ پیکسل
   جا شود بی‌آنکه ستون‌ها را جابه‌جا کند. */
.paxrow .x.wide{font-size:.72rem; color:var(--accent); white-space:nowrap}
.paxrow .x.wide:hover{color:var(--accent); text-decoration:underline}
.paxhead{display:grid; grid-template-columns:26px 1fr 92px 70px 70px 104px 26px; gap:7px;
  font-size:.72rem; color:var(--muted); padding-bottom:4px}
.paxhead span:nth-child(4),.paxhead span:nth-child(5){text-align:center}

/* جعبهٔ محاسبه در کشوی کنسل و چنج — «از کجا این عدد آمد» */
.calcbox{background:var(--surface-2); border-radius:var(--radius);
  padding:10px 14px; margin-bottom:14px; font-size:.84rem}
.calcbox .r{display:flex; justify-content:space-between; gap:12px; padding:3px 0}
.calcbox .r span{color:var(--muted)}
.calcbox .r b{font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate}
.calcbox .r.tot{border-top:1px solid var(--line); margin-top:5px; padding-top:7px}
.calcbox .r.tot b{color:var(--brass); font-size:1rem}

/* سرصفحهٔ جزئیات — عنوان بالا، مقدار درست زیرش، همه با یک تراز.
   عمداً بلوک است نه فلکس: متن ساده در فلکس «آیتم بی‌نام» می‌شود و مقدار
   لاتین (USD، تاریخ، PNR) به لبهٔ مخالفِ عنوانش می‌پرید. */
.kv{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px 18px;
  padding:14px 16px; background:var(--surface-2); border-radius:var(--radius);
  margin-bottom:16px}
.kv > div{display:block; min-width:0}
.kv .k{display:block; font-size:.72rem; color:var(--muted); line-height:1.5}
.kv .v{display:block; text-align:start; font-weight:600; font-size:.9rem;
  line-height:1.6; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.kv .v bdi{unicode-bidi:isolate; font-variant-numeric:tabular-nums}
.kv .v .pill{font-weight:600}
h4.dh{margin:18px 0 8px; font-size:.85rem; font-weight:700; color:var(--ink-2)}
h4.dh:first-of-type{margin-top:0}

/* سطر پرداخت در رسید — نرخ و معادلش زیر خودِ سطر می‌آید تا معلوم باشد
   نرخ مالِ کدام صندوق است */
.rline{padding:8px 0; border-bottom:1px solid var(--line-soft)}
.rline:last-child{border-bottom:0}
.rline .paxrow{border-bottom:0; padding:0}
.rline .eq{display:block; margin-top:5px; color:var(--brass);
  direction:ltr; unicode-bidi:isolate; text-align:end; font-variant-numeric:tabular-nums}
.rline .eq:empty{display:none}
.rline .eqr{display:block; margin-top:3px; color:var(--muted); font-size:.75rem;
  text-align:end; font-variant-numeric:tabular-nums}
.rline .eqr:empty{display:none}

.addrow{width:100%; border:1px dashed var(--line); background:none; color:var(--accent);
  padding:9px; border-radius:var(--radius); cursor:pointer; font-size:.86rem; margin-top:10px}
.addrow:hover{background:var(--accent-soft)}

.empty{padding:40px 20px; text-align:center; color:var(--muted); font-size:.9rem}
.mockbar{background:var(--brass-soft); color:var(--brass); text-align:center;
  padding:7px 16px; font-size:.8rem; border-bottom:1px solid var(--line)}

@media (max-width:900px){
  .side{position:fixed; top:0; bottom:0; right:0; z-index:70;
    transform:translateX(100%); transition:transform .22s ease}
  .side.open{transform:none}
  .top .burger{display:block}
  .page{padding:18px 14px 60px}
  .top{padding:13px 14px}
  .row2,.row3{grid-template-columns:1fr}

  table,thead,tbody,tr,td{display:block; min-width:0}
  thead{display:none}
  tbody tr{border:1px solid var(--line); border-radius:var(--radius);
    margin:12px 14px; padding:6px 0; background:var(--surface)}
  tbody td{border-bottom:1px solid var(--line-soft); display:flex;
    justify-content:space-between; align-items:center; gap:14px;
    padding:9px 14px; text-align:start}
  tbody td:last-child{border-bottom:0}
  tbody td::before{content:attr(data-l); color:var(--muted); font-size:.78rem;
    font-family:Vazirmatn,sans-serif; direction:rtl}
  tbody td:empty{display:none}
  td.act{justify-content:flex-start; flex-wrap:wrap; gap:6px}
  td.act::before{content:""}
  .card .body.flush{padding:1px 0}

  .paxhead{display:none}
  .paxrow{grid-template-columns:1fr 1fr; gap:8px; padding:12px 0}
  .paxrow .i{grid-column:1/-1; text-align:start; font-weight:600; color:var(--ink-2)}
  .paxrow .nm{grid-column:1/-1}
  .paxrow .tk{grid-column:1/-1}
  .paxrow .ph{grid-column:1/-1}
  .paxrow .x{grid-column:1/-1; justify-self:start}
}

/* ===========================================================================
   افزوده‌های نسخهٔ متصل به سرور — ورود، پیام، سند، بارگذاری
   =========================================================================== */

/* ---------- ورود ---------- */
/* ---------- صفحهٔ ورود: رنگِ برند ----------
   اینجا تنها جایی است که لوگو در اندازهٔ بزرگ دیده می‌شود، پس صفحه هم
   رنگِ سیاق می‌پوشد نه نیلیِ برنامه. متغیرها فقط داخل #login عوض
   می‌شوند، پس دکمه و پیوند و حلقهٔ فوکوس همه با هم عوض می‌شوند و بقیهٔ
   برنامه دست‌نخورده می‌ماند.

     #12233D  سرمه‌ای — تکیهٔ اصلی: دکمه، نوار، پیوند
     #2A4A78  سرمه‌ای روشن — فقط برای گرادیان
     #FF7A59  مرجانی — حلقهٔ فوکوس و تابش

   رنگ‌ها ثابت‌اند و از تم نمی‌آیند: در تم تیره متغیرهای برنامه روشن
   می‌شوند و سفیدِ روی دکمه محو می‌شد.

   سرخِ قبلی (#B41615/#E25658) از لوگوی دُرسا می‌آمد و کنار لوگوی تازه
   ناجور بود — نوامبر ۲۰۲۶ برداشته شد.
   مرجانی زمینهٔ دکمه نمی‌شود — متنِ سفید رویش به ۳ به ۱ نمی‌رسد. پس
   سرمه‌ای زمینه می‌گیرد و مرجانی برای حلقهٔ فوکوس و تأکید می‌ماند. */
#login{
  --accent:#12233D; --accent-2:#2A4A78; --accent-ink:#FFFFFF;
  --accent-soft:#E7ECF4; --violet:#0B1628;
  min-height:100vh; display:grid; place-items:center; padding:20px;
  background:
    radial-gradient(900px 420px at 50% -8%, rgba(42,74,120,.18), transparent 68%),
    radial-gradient(700px 380px at 8% 105%, rgba(255,122,89,.16), transparent 70%),
    var(--ground)}
/* دکمهٔ ورود گرادیانِ نیلی برنامه را می‌گیرد؛ اینجا باید سرمه‌ای باشد و
   متنش در هر دو تم سفید بماند. */
#login .btn.primary{background:linear-gradient(135deg, #12233D, #2A4A78);
  color:#fff; box-shadow:0 4px 14px rgba(18,35,61,.34); border-color:#12233D}
#login .btn.primary:hover{background:linear-gradient(135deg, #0B1628, #1F3A60)}
#login a{color:#12233D; font-weight:600}
:root[data-theme="dark"] #login a,
:root:not([data-theme="light"]) #login a{color:#FF9C80}
#login input:focus{border-color:#FF7A59;
  box-shadow:0 0 0 3px rgba(255,122,89,.28); outline:none}
.loginwrap{width:min(380px,100%); display:flex; flex-direction:column; gap:18px}
.loginbox{width:100%; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:34px 30px; box-shadow:var(--shadow)}
.loginbox h1{font-size:1.5rem; text-align:center}
.loginbox .sub{text-align:center; color:var(--muted); font-size:.85rem; margin:6px 0 26px}
/* نوارِ رنگی با متنِ سفید. متنِ سفید جای دیگری از این جعبه خوانا نیست —
   جعبه در تم روشن سفید است — پس خودِ نوار زمینه‌اش را با خودش می‌آورد و
   در هر دو تم همان‌قدر خواناست. */
/* رنگ‌های نوار ثابت‌اند و از متغیرِ تم نمی‌آیند: در تم تیره، نیلی و بنفشِ
   تم روشن می‌شوند و متنِ سفید رویشان محو است (۲ به ۱). نوار زمینه‌اش را
   خودش می‌آورد، پس رنگ برند در هر دو تم همان می‌ماند و سفید خوانا. */
.loginbox .sub.band{margin:10px -6px 24px; padding:7px 12px; border-radius:99px;
  background:linear-gradient(135deg, #12233D, #2A4A78);
  color:#fff; font-weight:600; letter-spacing:.01em;
  box-shadow:0 3px 12px rgba(18,35,61,.30)}
.loginbox .btn{width:100%; justify-content:center; margin-top:8px; padding:11px}
.loginbox .err{color:var(--bad); font-size:.84rem; min-height:1.3em; margin-bottom:6px}

/* ---------- لوگو ----------
   نوشتهٔ فارسیِ داخلِ لوگو مشکی است. روی زمینهٔ تیره ناپدید می‌شود و
   وارونه‌کردنش رنگِ سرخِ برند را هم می‌برد. پس لوگو همیشه روی یک صفحهٔ
   سفید می‌نشیند: رنگ‌های برند دست‌نخورده می‌مانند و در هر دو تم خواناست.
   در تم روشن صفحه تقریباً نامرئی است، در تیره یک کارت سفیدِ تمیز. */
/* نوشتهٔ «سیاق» در لوگو سرمه‌ای است. در تم روشن مستقیم روی صفحه می‌نشیند و
   تمیزتر است؛ در تم تیره سرمه‌ای روی زمینهٔ تیره ناپدید می‌شود، پس آنجا — و
   فقط آنجا — یک صفحهٔ روشن زیرش می‌آید. */
.logoplate{display:grid; place-items:center; border-radius:16px; padding:10px 16px}
:root[data-theme="dark"] .logoplate,
:root:not([data-theme="light"]) .logoplate{background:#F4F6FA;
  box-shadow:var(--shadow)}
/* این لوگو ایستاده است (تقریباً ۱ به ۱٫۴)، نه پهن؛ سقف بلندی لازم دارد
   وگرنه کوچک و بی‌رمق می‌شود، و بی‌سقف بلندیِ صفحهٔ ورود را می‌بلعد. */
.logoplate img{max-width:100%; height:auto; max-height:196px; display:block}
.logoplate .fallback{display:none}
/* اگر فایل لوگو نبود، تصویرِ شکسته نشان نمی‌دهیم — نشانِ متنی جایش می‌آید */
.logoplate.nologo img{display:none}
.logoplate.nologo .fallback{display:block; text-align:center; color:#12233D}
.logoplate.nologo .fallback b{display:block; font-size:1.5rem; letter-spacing:.06em}
.logoplate.nologo .fallback span{font-size:.78rem; color:#333}


/* ---------- کپی‌رایت طراح ---------- */
.credit{font-size:.76rem; color:var(--muted); text-align:center; line-height:1.9}
.credit a{color:var(--accent); text-decoration:none}
.credit a:hover{text-decoration:underline}
.credit .dot{opacity:.5; margin:0 4px}
.credit.rail{padding:10px 14px 14px; border-top:1px solid var(--line-soft);
  font-size:.72rem}
.page-credit{padding:22px 26px 30px; margin-top:auto;
  border-top:1px solid var(--line-soft)}

/* ---------- پیام گذرا ---------- */
#toasts{position:fixed; bottom:18px; inset-inline-start:18px; z-index:90;
  display:flex; flex-direction:column; gap:8px; max-width:min(420px,90vw)}
.toast{background:var(--surface); border:1px solid var(--line); border-inline-start:3px solid var(--accent);
  border-radius:var(--radius); padding:11px 15px; font-size:.87rem; box-shadow:var(--shadow);
  animation:slidein .18s ease}
.toast.ok{border-inline-start-color:var(--ok)}
.toast.bad{border-inline-start-color:var(--bad); color:var(--bad)}
@keyframes slidein{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

/* ---------- سند حسابداری ---------- */
.sanad{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  margin-bottom:18px; box-shadow:var(--shadow); overflow:hidden}
.sanad header{display:flex; align-items:center; gap:12px; padding:12px 18px;
  background:var(--ok-soft); border-bottom:1px solid var(--line)}
.sanad header .t{font-weight:700; color:var(--ok); font-size:.92rem}
.sanad header .no{font-size:.82rem; color:var(--ink-2)}
.sanad header .close{margin-inline-start:auto; background:none; border:0; cursor:pointer;
  color:var(--muted); font-size:.84rem}
.sanad tfoot td{border-top:1px solid var(--line); font-weight:600; background:var(--surface-2)}
.sanad .drv{color:var(--bad)} .sanad .crv{color:var(--ok)}
.sanad .orig{color:var(--muted); font-size:.82rem}

/* ---------- انتخابگر مشتری ---------- */
.combo{position:relative}
.combo .list{position:absolute; inset-inline:0; top:100%; z-index:30; margin-top:4px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); max-height:260px; overflow-y:auto}
.combo .list button{width:100%; text-align:start; background:none; border:0; cursor:pointer;
  padding:9px 12px; display:flex; align-items:center; gap:8px; font-size:.87rem}
.combo .list button:hover,.combo .list button.on{background:var(--accent-soft)}
.combo .list .bal{margin-inline-start:auto; font-family:Vazirmatn,"Segoe UI",system-ui,sans-serif;
  font-size:.8rem; color:var(--bad); direction:ltr}
.combo .list .none{padding:12px; color:var(--muted); font-size:.85rem}
/* «ثبت مشتری تازه» — همان‌جا داخل فهرست، تا کارمند وسطِ فروش مجبور نشود
   کشو را ببندد و به صفحهٔ مشتریان برود (و پیش‌نویسِ فروش را از دست بدهد). */
.combo .list button.newc{border-top:1px solid var(--line-soft); color:var(--accent);
  font-weight:600}
.combo .list .newcform{padding:10px 12px}
.combo .list .newcform .f{margin-bottom:8px}
.combo .list .newcform .row{display:flex; gap:8px}
/* دکمه‌های داخلِ این فرم، دکمهٔ واقعی‌اند نه سطرِ فهرست.
   قاعدهٔ «.combo .list button» بالاتر، background را از آن‌ها می‌گرفت و
   «ثبت و انتخاب» سفید روی سفید می‌شد — دکمه‌ای که هست و دیده نمی‌شود. */
.combo .list .newcform .btn{width:auto; display:inline-flex; justify-content:center;
  border:1px solid var(--line); background:var(--surface); color:var(--ink)}
.combo .list .newcform .btn.primary{border-color:transparent; color:var(--accent-ink);
  background:linear-gradient(135deg, var(--accent), var(--accent-2))}
.combo .list .newcform .btn.primary:hover{filter:brightness(1.07);
  background:linear-gradient(135deg, var(--accent), var(--accent-2))}
.combo .list .newcform .btn:not(.primary):hover{background:var(--surface-2)}

/* ---------- در حال کار ---------- */
body.busy{cursor:progress}
body.busy .btn.primary{opacity:.6; pointer-events:none}
.loading{padding:26px; text-align:center; color:var(--muted); font-size:.87rem}

/* ---------- ریز ---------- */
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.kbd{font-size:.72rem; opacity:.75; font-family:Vazirmatn,"Segoe UI",system-ui,sans-serif}
.f input:disabled,.f select:disabled{background:var(--surface-2); color:var(--muted)}

/* انتخاب مسافر در کشوی کنسل و چنچ — تیک‌دار، چون گاهی ۲ نفر از ۵ نفر */
.paxpick{border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; margin-bottom:14px}
.paxpick .pk{display:grid; grid-template-columns:20px 1fr auto auto auto; gap:10px;
  align-items:center; padding:9px 12px; cursor:pointer; font-size:.86rem;
  border-bottom:1px solid var(--line-soft)}
.paxpick .pk:hover{background:var(--surface-2)}
.paxpick .pk input{width:16px; height:16px; accent-color:var(--accent); cursor:pointer}
.paxpick .pk .nm{font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap}
.paxpick .pk bdi{font-variant-numeric:tabular-nums}
.paxpick > button{width:100%; border:0; border-radius:0; padding:8px}

/* هشدار پایگاه دادهٔ عقب‌مانده — نواری که نمی‌شود ندیدش */
.dbwarn{background:var(--bad-soft); color:var(--bad); padding:11px 26px;
  font-size:.86rem; border-bottom:1px solid var(--line); line-height:1.7}
.dbwarn code{background:var(--surface); padding:1px 6px; border-radius:4px;
  font-family:Vazirmatn,"Segoe UI",system-ui,sans-serif; direction:ltr;
  unicode-bidi:isolate; font-weight:600}
.dbwarn .what{display:block; opacity:.75; font-size:.78rem; direction:ltr;
  unicode-bidi:isolate; text-align:end}
.dbwarn .what:empty{display:none}

/* کلید ظاهر — روشن / تیره / مثل سیستم */
.themebtn{background:none; border:1px solid var(--line); border-radius:var(--radius);
  width:32px; height:32px; cursor:pointer; font-size:.95rem; line-height:1;
  color:var(--ink-2); display:grid; place-items:center; padding:0}
.themebtn:hover{background:var(--surface-2); color:var(--ink)}

/* چیپ طلب‌های مشتری در کشوی رسید */
.debts{display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  padding:9px 12px; background:var(--surface-2); border-radius:var(--radius);
  min-height:38px; font-size:.85rem}

/* دو کارت کنار هم روی صفحهٔ بزرگ، زیر هم روی موبایل */
.two{display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:18px}
.two .card + .card{margin-top:0}
/* بدون min-width:0 خانهٔ گرید به‌اندازهٔ جدولِ داخلش پهن می‌شود و ستون آخر
   زیر کارت بغلی می‌رود — «سود ۲۹٫۰۰» می‌شد «۹٫۰۰». اسکرول افقی مال خودِ
   جدول است، نه صفحه. */
.two > *{min-width:0}
.two .tw{max-width:100%}
/* جدول‌های کارتِ نصف‌عرض ستون کم دارند و به ۶۸۰ پیکسلِ پیش‌فرض نیاز ندارند.
   با آن، ستون آخر («سود USD») بیرون کادر می‌افتاد و کاربر فقط «۹٫۰۰» را
   می‌دید به‌جای «۲۹٫۰۰» — عددی که غلط هم به نظر می‌رسید. */
.two .tw table{min-width:420px}

/* ===========================================================================
   فاکتور چاپی — کاغذ A4 روی سربرگِ چاپیِ شرکت

   کاغذِ دفتر سربرگ و پاورقیِ چاپ‌شده دارد، پس بالای صفحه و پای صفحه خالی
   می‌ماند. حاشیه‌ها در @page می‌نشینند نه در padding: اگر فاکتور به صفحهٔ
   دوم برود، صفحهٔ دوم هم همان حاشیه‌ها را می‌خواهد و padding فقط به صفحهٔ
   اول می‌رسد.

   طرح از فاکتورِ نمونهٔ خودِ دفتر آمده: عنوانِ سرخ، دو ستونِ مشخصات، خطِ
   سرخ، جدولِ کادردار با چند سطرِ خالی، جمع‌ها در پای همان جدول با سطرِ
   آخرِ رنگی، و بعد مهر و امضا.

   سطرهای خالی تزئین نیستند: فاکتوری که جدولش نیمه‌کاره تمام شود، جا برای
   افزودنِ دستیِ سطر می‌گذارد. جدولِ پرشده این را می‌بندد.
   =========================================================================== */
#print{display:none}

@media print{
  /* روی کاغذ فقط فاکتور می‌رود. بقیهٔ برنامه — نوار کناری، کشو، پیام‌ها —
     نباید حتی یک صفحهٔ سفیدِ اضافه چاپ کند. */
  body > *{display:none !important}
  #print{display:block !important}
  html, body{background:#fff !important; margin:0; padding:0}
  @page{size:A4; margin:45mm 18mm 35mm}
}

#print{
  --pred:#C0201F;
  width:174mm; margin:0 auto; color:#111; background:#fff; direction:rtl;
  font-family:Vazirmatn,"Segoe UI",Tahoma,sans-serif;
  font-size:12px; line-height:1.85; -webkit-print-color-adjust:exact;
  print-color-adjust:exact}

#print .ptitle{text-align:center; font-size:17px; font-weight:800;
  color:var(--pred); letter-spacing:.02em; margin-bottom:10px}

/* مشخصات: مشتری سمت راست، شمارهٔ فاکتور و تاریخ سمت چپ */
#print .pmeta{display:flex; justify-content:space-between; align-items:flex-start;
  gap:20px; font-size:11.5px}
#print .pmeta b{color:var(--pred); font-weight:700}
#print .pmeta .ml{text-align:end; white-space:nowrap}
#print .prule{border-top:2px solid var(--pred); margin:7px 0 12px}

#print table{width:100%; border-collapse:collapse; table-layout:fixed;
  min-width:0; font-size:11.5px}
#print th, #print td{border:1px solid #333; padding:5px 8px; text-align:start;
  overflow-wrap:anywhere; height:22px}
#print th{font-weight:700; background:#F0F0F0; color:#111}
#print td.n, #print th.n{text-align:end; font-variant-numeric:tabular-nums;
  white-space:nowrap}
#print td.c, #print th.c{text-align:center}
#print tr{break-inside:avoid}
/* #  |  توضیحات  |  تعداد  |  قیمت واحد  |  مبلغ */
#print th:nth-child(1), #print td:nth-child(1){width:8%}
#print th:nth-child(3), #print td:nth-child(3){width:11%}
#print th:nth-child(4), #print td:nth-child(4){width:19%}
#print th:nth-child(5), #print td:nth-child(5){width:19%}

/* جمع‌ها پای همان جدول‌اند، نه یک بلوکِ جدا — مثل فاکتورِ نمونه */
#print tfoot td{background:#FAFAFA}
#print tfoot td.lbl{font-weight:700; text-align:start}
#print tfoot tr.grand td{background:#FBE4E4; font-weight:800; font-size:12.5px}

/* امضا سمت چپِ کاغذ می‌نشیند — همان‌جا که در فاکتورِ نمونهٔ دفتر است.
   در متنِ راست‌به‌چپ، «چپ» یعنی end. */
#print .psign{margin-top:16px; font-size:11.5px; text-align:end}
#print .pby{margin-top:26px; font-size:11.5px; font-weight:700; text-align:end}
#print .pby .ln{display:block; width:60mm; margin-inline-start:auto;
  border-top:1px solid #333; margin-bottom:4px}
#print .num{direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums}
#print .pfoot{margin-top:14px; font-size:10.5px; color:#555; text-align:center}

/* در پهنای کمتر از ۹۰۰ پیکسل، جدول‌های برنامه به کارت تبدیل می‌شوند تا
   روی موبایل خوانا بمانند. کاغذ A4 هم ۷۹۴ پیکسل است، پس همان قاعده به
   فاکتور می‌خورد و جدول را پلکانی و درهم چاپ می‌کرد. اینجا صریح برش
   می‌گردانیم — کاغذ موبایل نیست. */
#print table{display:table}
#print thead{display:table-header-group}
#print tbody, #print tfoot{display:table-row-group}
#print tr{display:table-row}
#print th, #print td{display:table-cell}
#print tbody tr{border:0; margin:0; padding:0; background:none}
#print tbody td{justify-content:unset; align-items:unset; gap:0}

/* ---------- هشدارِ وسطِ صفحه ----------
   پیامِ گذرا گوشهٔ پایین می‌آید و کاربری که تند کار می‌کند نمی‌بیندش. برای
   چیزی که باید جلوی ثبت را بگیرد، همان‌جا سرِ راه می‌نشیند و تا کلیک
   نکنی نمی‌رود. */
.modal{position:fixed; inset:0; z-index:120; display:grid; place-items:center;
  background:rgba(9,13,21,.55); padding:20px}
.modal .mbox{width:min(460px,100%); background:var(--surface);
  border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lift);
  overflow:hidden}
.modal header{display:flex; align-items:center; gap:10px; padding:14px 18px;
  border-bottom:1px solid var(--line-soft); background:var(--warn-soft)}
.modal header b{font-size:1rem; color:var(--warn)}
.modal header .close{margin-inline-start:auto; background:none; border:0;
  cursor:pointer; font-size:1.3rem; line-height:1; color:var(--muted)}
.modal header .close:hover{color:var(--bad)}
.modal .mbody{padding:16px 18px; font-size:.93rem; line-height:1.9}
.modal footer{display:flex; gap:10px; padding:12px 18px 16px}
.modal footer .btn{flex:1; justify-content:center}

/* فهرست‌های داشبورد داخلِ خودشان اسکرول می‌کنند: صد بدهکار نباید بقیهٔ
   صفحه را به ته براند. ارتفاع ثابت است تا دو کارتِ کنار هم قد یکی بمانند. */
.scrollbox{max-height:280px; overflow-y:auto}
.f textarea{width:100%; padding:9px 11px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--surface); color:var(--ink);
  font:inherit; line-height:1.8; resize:vertical}
.f textarea:focus{border-color:var(--accent); outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent)}
.btn.wa{background:var(--wa); color:#fff; border-color:var(--wa)}
.btn.wa:hover{filter:brightness(.93)}

/* عنوانِ بخش داخلِ یک کارت — کارت حساب مشتری دو فهرست دارد و بدون این،
   دو جدول پشت هم می‌آمدند و معلوم نبود کدام کدام است. */
.secttl{margin:0; padding:14px 18px 8px; font-size:.86rem; font-weight:600;
  color:var(--ink); border-top:1px solid var(--line-soft)}
.secttl:first-child{border-top:0}
.secttl .dim{font-weight:400; font-size:.8rem}

/* نوارِ بازهٔ زمانیِ کارت حساب — دو تاریخ و چند دکمه در یک سطر */
.daterow{display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap}
.daterow .f{margin:0; min-width:150px}
.daterow .spacer{flex:1}
/* جمع‌بندیِ دوره: چند عدد کنار هم، نه زیر هم — با یک نگاه خوانده شود */
.sum.cardsum{display:grid; gap:10px; margin-top:14px;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr))}
.sum.cardsum .r{display:block; background:var(--surface-2); border-radius:var(--radius);
  padding:10px 12px; border:1px solid var(--line-soft)}
.sum.cardsum .k{display:block; font-size:.76rem; color:var(--muted); margin-bottom:3px}
.sum.cardsum .v{display:block; font-weight:700; font-size:1rem}
.sum.cardsum .r.end{background:var(--brass-soft); border-color:transparent}
.sum.cardsum .r.end .v{color:var(--brass)}

/* ===========================================================================
   پیش‌نمایشِ چاپ

   کاربر می‌خواهد پیش از چاپ ببیند، و آن‌چه می‌بیند باید دقیقاً همان باشد
   که روی کاغذ می‌رود. پس پیش‌نمایش همان کاری را می‌کند که چاپ می‌کند —
   همهٔ فرزندانِ body را پنهان می‌کند جز خودِ کاغذ — و فقط یک نوارِ ابزار
   رویش می‌گذارد. هیچ نسخهٔ دومی از طرح وجود ندارد که با نسخهٔ چاپی
   واگرا شود.
   =========================================================================== */
body.previewing{background:#5A6478; overflow-y:auto}
body.previewing > *{display:none !important}
body.previewing > #pvBar{display:flex !important}
body.previewing > #print{display:block !important;
  /* کاغذِ A4 با همان حاشیه‌هایی که @page می‌گذارد، تا جای سربرگِ چاپیِ
     شرکت روی صفحه هم دیده شود */
  width:210mm; min-height:297mm; box-sizing:border-box;
  padding:45mm 18mm 35mm; margin:78px auto 40px;
  box-shadow:0 10px 40px rgba(0,0,0,.45)}

#pvBar{position:fixed; inset-inline:0; top:0; z-index:200; display:flex;
  align-items:center; gap:12px; padding:11px 18px;
  background:var(--surface); border-bottom:1px solid var(--line);
  box-shadow:0 2px 10px rgba(0,0,0,.25)}
#pvBar .spacer{flex:1}
#pvBar .dim{color:var(--muted); font-size:.82rem}
@media print{
  /* «body.previewing > #pvBar» از «#pvBar» قوی‌تر است؛ بی این قاعده نوارِ
     پیش‌نمایش روی کاغذ هم چاپ می‌شد. و حاشیه‌ای که روی صفحه جای @page را
     نشان می‌دهد، روی کاغذ نباید دوباره به حاشیهٔ @page اضافه شود. */
  body.previewing > #pvBar{display:none !important}
  body.previewing > #print{padding:0; margin:0; box-shadow:none; min-height:0; width:174mm}
  body.previewing > #print.cards{width:190mm}
}
/* کاغذِ کارت حاشیهٔ باریکِ خودش را دارد، نه حاشیهٔ سربرگ */
body.previewing > #print.cards{padding:7mm 10mm}

/* صورت‌حساب چند جدول با ستون‌های متفاوت دارد؛ عرض‌های ثابتِ فاکتور
   (که برای پنج ستون تنظیم شده‌اند) نباید به آن‌ها برسد. */
#print.stmt th, #print.stmt td{width:auto}

/* عرضِ ستون‌های صورت‌حساب، صریح.
   بی این‌ها مرورگر پهنا را بین ستون‌ها پخش می‌کرد و «شرح» — تنها ستونی
   که واقعاً متن دارد — به سه سطرِ فشرده می‌شکست، در حالی که «ارز» و
   عددها جای اضافه داشتند. */
#print.stmt table.act th:nth-child(1), #print.stmt table.act td:nth-child(1){width:4%}
#print.stmt table.act th:nth-child(2), #print.stmt table.act td:nth-child(2){width:11%}
#print.stmt table.act th:nth-child(3), #print.stmt table.act td:nth-child(3){width:45%}
#print.stmt table.act th:nth-child(4), #print.stmt table.act td:nth-child(4){width:6%}
#print.stmt table.act th:nth-child(5), #print.stmt table.act td:nth-child(5){width:11%}
#print.stmt table.act th:nth-child(6), #print.stmt table.act td:nth-child(6){width:11%}
#print.stmt table.act th:nth-child(7), #print.stmt table.act td:nth-child(7){width:12%}

/* جدولِ تکت‌ها: «شرح» و «مسافران» متن‌اند، بقیه کوتاه */
#print.stmt table.tkt th:nth-child(1), #print.stmt table.tkt td:nth-child(1){width:4%}
#print.stmt table.tkt th:nth-child(2), #print.stmt table.tkt td:nth-child(2){width:10%}
#print.stmt table.tkt th:nth-child(3), #print.stmt table.tkt td:nth-child(3){width:24%}
#print.stmt table.tkt th:nth-child(4), #print.stmt table.tkt td:nth-child(4){width:20%}
#print.stmt table.tkt th:nth-child(5), #print.stmt table.tkt td:nth-child(5){width:10%}
#print.stmt table.tkt th:nth-child(6), #print.stmt table.tkt td:nth-child(6){width:11%}
#print.stmt table.tkt th:nth-child(7), #print.stmt table.tkt td:nth-child(7){width:11%}
#print.stmt table.tkt th:nth-child(8), #print.stmt table.tkt td:nth-child(8){width:10%}
#print.stmt .ptitle{margin-bottom:6px}
#print.stmt .pperiod{text-align:center; font-size:11px; color:#444; margin-bottom:10px}
#print.stmt h4{margin:16px 0 6px; font-size:12.5px; color:var(--pred)}
#print.stmt table{margin-bottom:4px}
#print.stmt tfoot tr.grand td{background:#FBE4E4}
/* جمع‌بندیِ دوره: چند خانه کنار هم، بالای جدول‌ها */
#print .pcards{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 4px}
#print .pcards div{flex:1 1 92px; border:1px solid #333; padding:5px 7px}
#print .pcards span{display:block; font-size:10px; color:#444}
#print .pcards b{font-size:12px; font-variant-numeric:tabular-nums}
#print .pcards div.end{background:#FBE4E4}

/* انتخابِ گیرندهٔ پیام — مشتری یا هر مسافری که شماره دارد */
.pickwho{display:flex; flex-direction:column; gap:8px}
.pickwho .chk{padding:8px 10px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--surface)}
.pickwho .chk:hover{background:var(--surface-2)}

/* ستونِ شماره‌ردیف: کمترین جای ممکن. عددِ ترتیب اطلاعاتِ کمی دارد و
   نباید هم‌عرضِ ستونِ مبلغ باشد. */
.tw th.tiny, .tw td.tiny{width:1%; white-space:nowrap; padding-inline:8px;
  color:var(--muted); text-align:center}
#print.stmt th.i, #print.stmt td.i{width:5%; padding-inline:3px}

/* سربرگِ کارت حساب: دکمهٔ بازگشت اول می‌آید، بعد نام */
#cardWrap > header{flex-wrap:wrap}
#cardBack{white-space:nowrap}

/* چند ارز در یک جعبه: هر ارز یک سطر، زیر هم */
.sum.cardsum .v .ml{display:block; font-variant-numeric:tabular-nums;
  direction:ltr; unicode-bidi:isolate; text-align:start}
.sum.cardsum .v .ml + .ml{margin-top:3px}
.sum.cardsum .v .ml .s{font-size:.72rem; font-weight:500; margin-inline-start:6px}
.sum.cardsum .v .ml .s.neg{color:var(--bad)}
.sum.cardsum .v .ml .s.pos{color:var(--ok)}

/* نشانِ ارز روی سطر — کوچک و کم‌رنگ، چون تکرارشونده است و نباید
   عددِ کنارش را تحت‌الشعاع بگذارد. */
.ccytag{font-size:.72rem; color:var(--muted); font-weight:600;
  margin-inline-start:4px; letter-spacing:.02em}
.tw td.tiny .ccytag{margin:0}

/* ستون‌های پولِ کارت حساب کوتاه‌اند و «شرح» پهن — همان تعادلی که
   صورت‌حساب چاپی دارد. */
.tw th.money, .tw td.money{width:9%; white-space:nowrap}

/* ==========================================================================
   کاروان

   خانواده واحدِ کار است، نه زائر: فرم ثبت‌نام یک خانواده را با هم می‌گیرد و
   جدولِ زائران هم خانواده‌به‌خانواده خوانده می‌شود. سلولِ سرپرست با rowspan
   روی اعضا کشیده می‌شود تا با یک نگاه معلوم باشد کدام چهار سطر یک خانواده‌اند.
   ========================================================================== */
.famcell{vertical-align:top; background:var(--surface-2); min-width:170px; max-width:210px}
.famcell .fh b{display:block}
.famcell .fh .mono{display:block; font-size:.76rem}
/* برچسب ← مقدار، دو ستونِ هم‌تراز (درخواستِ کاربر: «منظم‌تر، خیلی پراکنده شده») */
.famcell .fkv{display:grid; grid-template-columns:auto 1fr; gap:4px 10px; margin:8px 0 0;
  padding-top:8px; border-top:1px dashed var(--line); font-size:.78rem}
.famcell .fkv dt{color:var(--muted)}
.famcell .fkv dd{margin:0; text-align:left}
.famcell .fkv .num{font-weight:700}
.famcell .famPay{width:100%; margin-top:8px; justify-content:center}

/* بستهٔ خدمات — کارت، نه سطرِ جدول: هر بسته سه قیمت و یک فهرست دارد و در
   یک سطرِ جدول خوانده نمی‌شود. */
.pkgs{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:14px}
.pkg{background:var(--surface); border:1px solid var(--line);
     border-radius:var(--radius); padding:16px}
.pkg > header{display:flex; align-items:center; gap:10px; margin-bottom:12px;
     padding:0; border:0; background:none}
.pkg h4{font-size:.95rem; font-weight:700}
.pkg .prices{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px}
.pkg .prices > div{background:var(--surface-2); border-radius:10px;
     padding:8px 10px; text-align:center}
.pkg .prices span{display:block; font-size:.72rem; color:var(--muted)}
.pkg .prices .num{font-weight:700; font-variant-numeric:tabular-nums}
.svclist{list-style:none; margin:0 0 14px; padding:0}
.svclist li{position:relative; padding-inline-start:20px; margin-bottom:6px;
     font-size:.85rem; color:var(--ink-2)}
.svclist li::before{content:"✓"; position:absolute; inset-inline-start:0;
     color:var(--ok); font-weight:700}
.pkg.add{display:flex; flex-direction:column; align-items:center; justify-content:center;
     gap:8px; border-style:dashed; cursor:pointer; color:var(--muted);
     min-height:180px; font:inherit}
.pkg.add:hover{border-color:var(--accent); color:var(--accent)}
.pkg.add span:first-child{font-size:1.6rem}

.row3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
@media (max-width:700px){ .row3{grid-template-columns:1fr} }

/* ---- فاز ۳: خدماتِ بسته و خدماتِ هر زائر ---- */
.pkg .pksvview{width:100%; border-collapse:collapse; font-size:.82rem; margin:-4px 0 12px}
.pkg .pksvview td{padding:5px 4px; border-bottom:1px dashed var(--line)}
.pkg .pksvview td.num{text-align:left; direction:ltr; color:var(--ink-2);
     font-variant-numeric:tabular-nums; white-space:nowrap}
table.pksv{width:100%; border-collapse:collapse; font-size:.86rem}
table.pksv th{font-size:.74rem; color:var(--muted); font-weight:600; text-align:start;
     padding:6px 6px; border-bottom:1px solid var(--line)}
table.pksv td{padding:4px 4px; border-bottom:1px solid var(--line)}
table.pksv input{width:100%; padding:6px 8px; border:1px solid var(--line);
     border-radius:8px; background:var(--surface); color:var(--ink); font:inherit}
table.pksv td:nth-child(2), table.pksv td:nth-child(4), table.pksv td:nth-child(5){width:16%}
table.pksv tfoot td{font-weight:800; background:var(--surface-2); padding:8px 6px}
table.pksv td.num{direction:ltr; text-align:left; font-variant-numeric:tabular-nums}

.ensv{margin-top:6px; border-top:1px dashed var(--line); padding-top:10px}
.ensv-ttl{font-size:.78rem; font-weight:700; color:var(--ink-2); margin-bottom:4px}
.ensv .svc{display:grid; grid-template-columns:1fr 120px minmax(0,auto); gap:10px;
     align-items:center; padding:4px 0; font-size:.88rem}
.ensv .svc label{display:flex; align-items:center; gap:8px; cursor:pointer; margin:0}
.ensv .svc input.enSvPr{padding:5px 8px; border:1px solid var(--line); border-radius:8px;
     background:var(--surface); color:var(--ink); font:inherit; width:100%}
.ensv .svc.off{color:var(--muted)}
.ensv .svc.off label span{text-decoration:line-through}
.ensv .svc.off input.enSvPr{opacity:.45}
.ensv .svc.chg input.enSvPr{border-color:var(--warn); background:var(--warn-soft)}
.ensv .chgtag{font-size:.72rem; color:var(--warn); font-weight:600; white-space:nowrap}
.ensub{display:grid; grid-template-columns:1fr 1.3fr 1fr; gap:10px; align-items:center;
     margin-top:10px; padding:10px 12px; border-radius:10px; background:var(--surface-2);
     font-size:.82rem}
.ensub > div > span:first-child{color:var(--muted)}
.ensub b{display:block; font-size:.95rem}
.ensub .disc{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.ensub .disc input{width:70px; padding:4px 8px; border:1px solid var(--line);
     border-radius:8px; background:var(--surface); color:var(--ink); font:inherit}
@media (max-width:700px){ .ensub{grid-template-columns:1fr} .ensv .svc{grid-template-columns:1fr 100px} }

/* ردیف‌های فرمِ ثبت‌نام — ورودی داخل جدول، چون یک خانواده چند سطر است و
   هر سطر چهار چیز می‌خواهد. */
.paxform input, .paxform select{width:100%; padding:7px 9px;
     border:1px solid var(--line); border-radius:9px;
     background:var(--surface); color:var(--ink); font:inherit}
.paxform td{vertical-align:middle}
.vsel{padding:4px 8px; border:1px solid var(--line); border-radius:99px;
     background:var(--surface); color:var(--ink); font:inherit; font-size:.78rem}

/* زائرِ لغوشده پاک نمی‌شود، کمرنگ و خط‌خورده می‌ماند: اگر پاک می‌شد، فردا
   معلوم نبود آن جریمه بابتِ چه بوده. */
td.gone{text-decoration:line-through; color:var(--muted)}

/* ستونِ دکمه‌ها در جدولِ پهن
   جدول زائران ده ستون دارد و روی لپ‌تاپ ۱۳۶۶ سرریز می‌کند؛ بدون این،
   «تخفیف» و «لغو» بیرون از دید می‌افتادند و کاربر فکر می‌کرد وجود ندارند.
   RTL است، پس لبهٔ چپ یعنی inline-end. */
.tw th.act.stick, .tw td.act.stick{
  position:sticky; inset-inline-end:0; z-index:2;
  background:var(--surface);
  box-shadow:inset 1px 0 0 var(--line);
}
.tw tbody tr:hover td.act.stick{background:var(--surface-2)}
.tw thead th.act.stick{background:var(--surface-2)}

/* ---- فاز ۴: مدارکِ زائر، آی‌دی کارت ---- */
.docchips{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.docpills{display:inline-flex; gap:4px; flex-wrap:wrap}
.docpills .pill{font-size:.7rem; padding:1px 7px}
/* سطرِ زائری که عکس یا پاسپورت ندارد — قرمز تا مدارکش برسد */
/* رنگِ مات، نه نیمه‌شفاف: ستونِ دکمه‌ها چسبان است و محتوای زیرش نباید پیدا شود */
/* درخواستِ کاربر: رنگِ یکی‌درمیان باید پیدا بماند، پس سطرِ ناقص دیگر تمام‌قرمز
   نیست — خطِ قرمزِ پررنگ کنارِ نام، و چیپ‌های قرمزِ «عکس ✗ پاسپورت ✗» */
#crvPax tr.docmiss > td:not(.famcell):first-of-type,
#crvPax tr.docmiss > td.famcell + td{box-shadow:inset -4px 0 0 var(--bad)}
.docslots{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
@media (max-width:700px){ .docslots{grid-template-columns:1fr} }
.docslot{border:1.5px dashed var(--line); border-radius:12px; padding:10px; text-align:center;
  display:flex; flex-direction:column; gap:6px; align-items:center; cursor:pointer; margin:0}
.docslot.req.empty{border-color:color-mix(in srgb, var(--bad) 45%, transparent);
  background:color-mix(in srgb, var(--bad-soft) 45%, transparent)}
.docslot h5{margin:0; font-size:.85rem}
.docslot .tag{font-size:.7rem; font-weight:700; padding:1px 8px; border-radius:99px;
  background:var(--surface-2); color:var(--muted)}
.docslot.req.empty .tag{background:var(--bad-soft); color:var(--bad)}
.docslot.has .tag{background:var(--ok-soft); color:var(--ok)}
.docslot .pv{width:100%; height:120px; border-radius:9px; background:var(--surface-2);
  display:grid; place-items:center; color:var(--muted); font-size:.78rem; overflow:hidden}
.docslot .pv img{width:100%; height:100%; object-fit:contain}
.docslot .meta{font-size:.72rem; color:var(--muted); min-height:14px}
.docslot input[type=file]{display:none}

/* آی‌دی کارت — اندازهٔ کارت بانکی، ده تا در یک A4. صفحهٔ نام‌دار حاشیه‌های
   خودش را دارد؛ حاشیهٔ بزرگِ سربرگِ فاکتور اینجا جا را می‌خورد. */
@page cards{size:A4; margin:7mm 10mm}
#print.cards{page:cards; width:190mm}
#print.cards .cardskip{font-size:11px; color:#b42318; background:#fdeceb; border-radius:6px;
  padding:6px 10px; margin-bottom:4mm}
@media print{ #print.cards .cardskip{display:none} }
#print.cards .cardpage{display:grid; grid-template-columns:85.6mm 85.6mm; grid-auto-rows:54mm;
  gap:3mm 8mm; justify-content:center; break-after:page; page-break-after:always}
#print.cards .cardpage:last-child{break-after:auto; page-break-after:auto}
#print .idc{width:85.6mm; height:54mm; border-radius:3mm; overflow:hidden; background:#fff;
  border:1px dashed #b9c0cc; display:grid; grid-template-rows:12mm 1fr 7mm;
  box-sizing:border-box; color:#0b0b0b; line-height:1.4; break-inside:avoid}
#print .idc .ic-top{background:#12233D; color:#fff; display:flex; align-items:center; gap:2mm;
  padding:0 3mm; font-size:2.9mm; font-weight:700}
#print .idc .ic-top .ic-lg{width:7mm; height:7mm; border-radius:2mm; background:#FF7A59;
  display:grid; place-items:center; font-size:3.4mm; flex:none}
#print .idc .ic-top .ic-co{overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
#print .idc .ic-top .ic-trip{margin-inline-start:auto; font-size:2.4mm; font-weight:600; opacity:.85;
  white-space:nowrap}
#print .idc .ic-mid{display:grid; grid-template-columns:22mm 1fr; gap:3mm; padding:2.5mm 3mm}
#print .idc .ic-ph{width:22mm; height:27mm; border-radius:1.5mm; background:#e9edf4; overflow:hidden}
#print .idc .ic-ph img{width:100%; height:100%; object-fit:cover; display:block}
#print .idc .ic-nm{font-size:3.8mm; font-weight:800; line-height:1.3; margin-bottom:1mm}
#print .idc .ic-kv{font-size:2.45mm; line-height:1.6; color:#333}
#print .idc .ic-kv b{color:#000; font-weight:700}
#print .idc .ic-bot{background:#f1f4f9; display:flex; align-items:center; justify-content:space-between;
  padding:0 3mm; font-size:2.4mm; color:#4a4f58}
#print .idc .ic-bot b{color:#12233D; font-size:2.7mm}
.docbtn{all:unset; cursor:pointer; border-radius:8px; padding:2px; display:inline-block}
.docbtn:hover{outline:2px solid color-mix(in srgb, var(--accent) 40%, transparent)}
.docbtn:focus-visible{outline:2px solid var(--accent)}

/* ---- مهاجرت ۵۲: پیشنهادِ شخص، مشتریِ هم‌نام، تقویمِ شمسی، تغییرِ خدمات ---- */
.aclist .pfa{font-weight:600}
.aclist .pen{direction:ltr; unicode-bidi:isolate; color:var(--accent); font-weight:600; margin-inline-start:8px}
.aclist .psub{font-size:.72rem; color:var(--muted); margin-inline-start:8px}
.pxen{font-size:.74rem; font-family:inherit}
.endup{border:1px solid color-mix(in srgb, var(--warn) 45%, transparent); background:var(--warn-soft);
  border-radius:12px; padding:10px 12px; margin:2px 0 12px}
.endup h5{margin:0 0 8px; font-size:.82rem; color:var(--warn)}
.endup .c{display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line);
  border-radius:10px; padding:7px 10px; margin-bottom:6px; font-size:.84rem; flex-wrap:wrap}
.endup .c .m{color:var(--muted); font-size:.76rem}
.endup .c .btn{margin-inline-start:auto}
.endup .c.on{border-color:var(--ok); box-shadow:0 0 0 2px var(--ok-soft)}
.dual{position:relative}
.jcal{position:absolute; top:100%; inset-inline-start:0; z-index:60; margin-top:4px; width:272px;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 12px 32px rgba(11,22,40,.18); padding:10px; color:var(--ink)}
.jcal .jhd{display:flex; align-items:center; gap:6px; margin-bottom:8px}
.jcal .jhd select{font:inherit; font-size:.82rem; border:1px solid var(--line); border-radius:8px;
  padding:3px 6px; background:var(--surface); color:var(--ink); flex:1}
.jcal .jhd button{font:inherit; border:1px solid var(--line); background:var(--surface); color:var(--ink);
  border-radius:8px; width:30px; height:30px; cursor:pointer}
.jcal .jgrid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px; text-align:center}
.jcal .jwd{font-size:.7rem; color:var(--muted); padding:3px 0}
.jcal .jd{font:inherit; font-size:.82rem; border:0; background:none; color:var(--ink);
  border-radius:8px; padding:6px 0; cursor:pointer}
.jcal .jd:hover{background:var(--surface-2)}
.jcal .jd.sel{background:var(--accent); color:var(--accent-ink)}
.jcal .jd.today{outline:1px solid var(--accent)}
.jcal .jft{display:flex; justify-content:space-between; margin-top:8px}
.jcal .jft button{font:inherit; font-size:.78rem; border:0; background:none; color:var(--accent); cursor:pointer}
.svl{display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; cursor:pointer;
  padding:7px 0; border-bottom:1px dashed var(--line); font-size:.88rem; margin:0}
.svl.off .n, .svl.off .p{text-decoration:line-through; color:var(--muted)}
#print .idc .ic-en{font-size:2.5mm; font-weight:700; color:#2A4A78; margin:-.8mm 0 .8mm}

/* ---- مهاجرت ۵۳: طلب به تفکیکِ بخش ---- */
.cardsecs{margin-top:12px}
.cardsecs .secrow{display:flex; flex-wrap:wrap; gap:8px}
.cardsecs .sec{display:flex; align-items:center; gap:8px; flex-wrap:wrap; border:1px solid var(--line);
  border-radius:10px; padding:7px 10px; background:var(--surface)}
.cardsecs .sec.crv{border-color:color-mix(in srgb, var(--violet) 35%, transparent)}
.cardsecs .sec .lbl{font-size:.82rem; font-weight:600}

/* ---- مهاجرت ۵۴: یکی‌درمیان، نوارِ بستهٔ کاروان، کارتِ بستهٔ فهرست ---- */
#crvPax tbody tr > td.famcell{background:var(--surface)}
/* ملایم (درخواستِ کاربر): یک‌سوم راه از سفید به طوسیِ سطح */
#crvPax tbody tr.zb > td, #crvPax tbody tr.zb > td.famcell{
  background:color-mix(in srgb, var(--surface-2) 40%, var(--surface))}
/* مرزِ پررنگ میانِ دو خانواده، تا یکی‌درمیان بی‌ابهام خوانده شود */
#crvPax tbody tr.ff > td{border-top:2px solid var(--line)}
.crvpkgbar{padding:10px 14px 0}
.pkbar{display:flex; align-items:center; flex-wrap:wrap; gap:6px 14px; padding:9px 12px;
  border:1px solid var(--line); border-radius:10px; background:var(--surface-2); font-size:.84rem}
.pkbar + .pkbar{margin-top:6px}
.pkbar .pksvs{font-size:.76rem; flex:1 1 220px}
.pkbar.none{background:transparent; border-style:dashed}
.pkbar select{width:auto; min-width:220px}
.pkg .pkacts{display:flex; align-items:center; gap:6px; margin-top:auto}

/* ---- خدمات و قیمت: دو کارت در هر ردیف، جدولِ خدمات بی‌بیرون‌زدگی ---- */
#catPkgs{grid-template-columns:repeat(2, minmax(0, 1fr))}
@media (max-width:900px){ #catPkgs{grid-template-columns:1fr} }
/* علتِ بیرون‌زدنِ ستون‌ها: قاعدهٔ سراسریِ table{min-width:680px} — کارت ۶۰۰ پیکسل است */
.pkg .pksvview{table-layout:fixed; min-width:0}
.pkg .pksvview td:first-child{width:46%; overflow-wrap:anywhere}
.pkg .pksvview td.num{width:18%; white-space:nowrap}
/* ستونِ «یکسان» در فرمِ بسته */
.pksv td.pkSame{text-align:center; width:52px}
.pksv td.pkSame input{width:auto}
.pksv tr.same .pksC, .pksv tr.same .pksI{background:var(--surface-2); color:var(--muted)}

/* ---- جدولِ خلاصهٔ زائران، منوی ⋯، واتس‌اپ، گزارشِ کاروان ---- */
.famcell .fh{display:flex; align-items:center; gap:6px}
.waic{display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px;
  border-radius:50%; color:#1FA855; background:color-mix(in srgb, #1FA855 12%, transparent);
  flex:none; text-decoration:none}
.waic:hover{background:#1FA855; color:#fff}
.pxacts{display:flex; align-items:center; gap:4px; justify-content:flex-end}
.pxacts .ib{width:28px; height:28px; border-radius:8px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink-2); cursor:pointer; font-size:1rem; line-height:1;
  display:inline-flex; align-items:center; justify-content:center}
.pxacts .ib:hover{border-color:var(--accent); color:var(--accent)}
.pxpop{position:fixed; z-index:130; background:var(--surface); border:1px solid var(--line);
  border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.14); padding:4px; min-width:150px;
  display:flex; flex-direction:column}
.pxpop button{background:none; border:0; text-align:start; padding:8px 12px; border-radius:7px;
  font:inherit; font-size:.86rem; color:var(--ink); cursor:pointer}
.pxpop button:hover{background:var(--surface-2)}
.pxpop button.neg{color:var(--bad)}
.modal[data-kind="info"] header b{color:var(--ink)}
.infokv{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:8px 0 0; font-size:.88rem}
.infokv dt{color:var(--muted)} .infokv dd{margin:0}
.rtiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; margin-bottom:12px}
.rt{background:var(--surface-2); border-radius:10px; padding:10px 12px}
.rt span{display:block; font-size:.76rem; color:var(--muted)}
.rt b{font-size:1.15rem}
.rgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:10px}
.rbox{border:1px solid var(--line); border-radius:10px; padding:10px 12px}
.rbox.wide{grid-column:1/-1}
.rbox h5{margin:0 0 8px; font-size:.8rem; color:var(--muted)}
.rp{display:inline-flex; gap:6px; align-items:baseline; margin:0 0 4px 14px; font-size:.86rem}
.rp span{color:var(--ink-2)}
.modal[data-kind="info"] header{background:var(--surface-2)}

/* ردیفِ جمعِ پایینِ جدولِ زائران — رنگِ خودش، جدا از سطرهای سفید */
#crvPax tfoot td{background:var(--surface-2); border-top:2px solid var(--line); font-size:.86rem}
.btn.refund{border-color:color-mix(in srgb, var(--bad) 40%, transparent); color:var(--bad)}

.linkish{background:none; border:0; padding:0; font:inherit; cursor:pointer;
  border-bottom:1px dashed currentColor}
.modal[data-kind="wide"] .mbox{width:min(760px,100%)}
.modal[data-kind="wide"] header{background:var(--surface-2)}
.modal[data-kind="wide"] header b{color:var(--ink)}
.modal[data-kind="wide"] .mbody{max-height:65vh; overflow:auto}
table.ledg{min-width:0; font-size:.82rem}
table.ledg th, table.ledg td{padding:6px 6px; border-bottom:1px solid var(--line-soft); text-align:start}
table.ledg td.num{text-align:left; direction:ltr; white-space:nowrap}
.ledgsum{margin-top:10px; padding:8px 12px; border-radius:8px; background:var(--surface-2); font-size:.9rem}

/* ---- فاز ۵: چاپِ سادهٔ A4 (قرارداد، رسید، فهرست‌ها) — بی‌سربرگ ---- */
@page plain{size:A4; margin:12mm 12mm 14mm}
#print.plain{page:plain; width:186mm}
body.previewing > #print.plain{padding:12mm; width:210mm}
@media print{ body.previewing > #print.plain{padding:0; width:186mm} }
#print.plain .phead{display:flex; justify-content:space-between; align-items:flex-end; gap:12px;
  border-bottom:2px solid var(--pred); padding-bottom:6px; margin-bottom:10px}
#print.plain .pco{font-size:16px; font-weight:800}
/* سربرگِ ساخته‌شده: نشانه، نام و نشانی، و عنوانِ سند در چپ */
#print.plain .lh{display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center}
#print.plain .lhm{width:15mm; height:15mm; border-radius:50%; border:2px solid var(--pred);
  color:var(--pred); display:grid; place-items:center; font-size:22px; font-weight:800; line-height:1}
#print.plain .lh .pco{font-size:18px; color:#111; display:block; line-height:1.5}
#print.plain .lhbar{height:3px; background:var(--pred); margin:8px 0 12px;
  box-shadow:0 3px 0 #fff, 0 4px 0 #bbb}
#print.plain .pcoi{font-size:11px; color:#555}
#print.plain .ptl{text-align:left}
#print.plain .ptl b{font-size:15px; color:var(--pred)}
#print.plain .pbox{border:1px solid #bbb; border-radius:6px; padding:8px 12px; margin-bottom:10px;
  display:grid; grid-template-columns:1fr 1fr; gap:2px 16px}
#print.plain .pbox span{color:#555}
#print.plain .pbox.big{grid-template-columns:1fr; font-size:13px; line-height:2.2}
#print.plain table.pt{table-layout:auto}
#print.plain table.pt th, #print.plain table.pt td{width:auto; padding:4px 6px; font-size:11px}
#print.plain table.pt td.sm{font-size:10px}
#print.plain .pen{font-size:10px; color:#555}
#print.plain .pnote{font-size:11px; color:#444; margin:6px 0}
#print.plain .psec{margin:12px 0 4px; font-size:13px}
#print.plain .parts{margin:0; padding-inline-start:20px; font-size:11.5px; line-height:1.9}
#print.plain .psigns{display:flex; justify-content:space-between; margin-top:34px; font-size:12px}
#print.plain .psigns div{border-top:1px solid #777; padding-top:4px; min-width:55mm; text-align:center}
#print.plain.list table.pt th, #print.plain.list table.pt td{font-size:10px; padding:3px 4px}
.famBtns{display:flex; gap:6px; margin-top:8px}
.famBtns .famPay{flex:1; margin-top:0}
.rlists{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:8px}
.rlist{display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:10px; padding:8px 12px}
.rlist span{flex:1}
ol.arts{padding-inline-start:22px; margin:10px 0 0}
ol.arts .art{margin-bottom:8px}
ol.arts .art textarea{width:100%}
ol.arts .artb{display:flex; gap:4px; margin-top:4px}
ol.arts .ib{width:28px; height:26px; border-radius:7px; border:1px solid var(--line); background:var(--surface); cursor:pointer}
ol.arts .ib:disabled{opacity:.35; cursor:default}
/* پنجرهٔ وسطِ صفحه ممکن است وسطِ یک کارِ «مشغول» باز شود (مثلاً «رسیدِ چاپی
   می‌خواهید؟» پس از ثبتِ رسید) — دکمه‌اش نباید با حالتِ busy قفل بماند */
body.busy .modal .btn.primary{opacity:1; pointer-events:auto}
#print.plain table.rt2 th{width:34%; background:#F3F3F3; font-weight:700}
#print.plain table.rt2 th, #print.plain table.rt2 td{font-size:12.5px; padding:7px 10px; width:auto}
#print.plain table.rt2 tr.grand th, #print.plain table.rt2 tr.grand td{background:#FBE4E4}

/* سه دکمهٔ هم‌اندازه در یک ردیف (پرداخت حساب، قرارداد، ریز حساب) — ستونِ
   خانواده به اندازهٔ لازم پهن می‌شود */
.famcell{min-width:290px; max-width:none}
.famBtns{display:grid; grid-template-columns:repeat(3, 1fr); gap:6px}
.famBtns .btn{justify-content:center; white-space:nowrap; padding-inline:6px}
/* آی‌دی کارت: بالا صاحبِ کارت، خط، پایین سرکاروان — فشرده تا در ۵۴ میلی‌متر جا شود */
#print .idc{grid-template-rows:10mm 1fr 6.5mm}
#print .idc .ic-mid{padding:1.8mm 3mm}
#print .idc .ic-nm{font-size:3.5mm; margin-bottom:.4mm}
#print .idc .ic-en{font-size:2.4mm}
#print .idc .ic-kv{font-size:2.3mm; line-height:1.45}
#print .idc .ic-lead{border-top:.3mm solid #9aa3b2; margin-top:1mm; padding-top:.8mm}
#print .idc .ic-kv{font-size:2.2mm; line-height:1.38}
/* جدولِ خطوطِ خرید از شریک — ستون‌ها: خدمت، تعداد، فی، جمع، ✕ */
table.pksv.pbl td:nth-child(1){width:auto}
table.pksv.pbl td:nth-child(2), table.pksv.pbl td:nth-child(3){width:17%}
table.pksv.pbl td:nth-child(4){width:16%; text-align:left; direction:ltr; white-space:nowrap}
table.pksv.pbl select, table.pksv.pbl .pbOther{width:100%}
table.pksv.pbl .pbOther{margin-top:4px}
table.pksv select{width:100%; padding:6px 8px; border:1px solid var(--line); border-radius:8px;
  background:var(--surface); font:inherit}
table.pksv.pbl td:nth-child(5){width:44px}

/* ---------- گزارش کارها (مهاجرت ۶۱) ---------- */
.aufil{flex-wrap:wrap;gap:8px}
.aufil select,.aufil input{width:auto;min-width:130px}
.auday{background:var(--surface-2,var(--line-soft));font-weight:700;font-size:.82rem;padding:6px 14px;
  border-bottom:1px solid var(--line);position:sticky;top:0}
.aurow{display:grid;grid-template-columns:48px 70px 1fr auto;gap:10px;align-items:start;
  padding:9px 14px;border-bottom:1px solid var(--line-soft);font-size:.88rem}
.aurow:nth-child(even){background:rgba(0,0,0,.012)}
.aurow .pill{justify-self:start}
.autime{padding-top:2px}
.auwho{color:var(--muted);font-size:.8rem;white-space:nowrap;padding-top:2px}
.audiff{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:4px;font-size:.8rem;color:var(--muted)}
.audiff b{font-weight:600;color:inherit}
@media (max-width:640px){
  .aurow{grid-template-columns:44px 1fr;}
  .aurow .pill{grid-column:2}
  .autxt,.auwho{grid-column:1/-1}
}
.fdban{display:flex;align-items:center;gap:10px;justify-content:space-between}
