/* وذ موني — نظام التصميم · هوية «النقطة»
   عربي أولاً: الاتجاه RTL أصل لا استثناء، والخصائص منطقية
   (inline-start/end) لا يمين/يسار — فالتبديل بين الاتجاهين لا يكسر شيئاً.
   الأرقام دائماً tabular حتى تتراصف الخانات في الأعمدة المالية.

   الهوية: النقطة نقطةُ حرف الذال، عملةً تدور داخل حلقة.
   عائلتان: IBM Plex Sans Arabic للعربي، وSora للأرقام واللاتيني —
   والأرقام في Sora لأن أعمدة الأرصدة تحتاج خانات ثابتة العرض.

   نسبة الاستخدام: 70٪ محايد · 20٪ أزرق · 10٪ نعناعي.
   النعناعي لهجةٌ لا سطح: النقطة، ولوحة إبراز واحدة في الشاشة. */

/* ── الخطوط ───────────────────────────────────────────────────────────
   `Readex Pro` عربيُّ المولد لا لاتينيٌّ أُلحقت به عربية — حروفه مصمَّمة
   معاً، فالنصّ العربي فيه إيقاعٌ ووزن لا يعطيهما خطٌّ مُعرَّب. وله طابعٌ
   هندسيّ حديث يليق بشاشةٍ تُقرأ طويلاً.
   و`Space Grotesk` للأرقام وحدها: خاناتها متساوية العرض فتصطفّ الأعمدة،
   وشكلها يفصل الرقم عن النصّ بصرياً بلا لون. */
@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@200;300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* ألوان العلامة — نهائية، لا تُشتق ولا تُقرَّب */
  --brand-blue:#0B6E5A; --brand-blue-hover:#075243;
  --brand-ink:#141C1A; --brand-mint:#B8EBD9; --brand-mist:#F6F8F6;
  --brand-mint-ink:#06382A; --brand-blue-tint:#EDF5F2; --brand-on-blue:#A8D8CA;

  /* السلّم المحايد — سبع درجات */
  --n0:#FAFBFA; --n1:#EBEEEC; --n2:#D2D8D5; --n3:#98A39E;
  --n4:#66716C; --n5:#33403B; --n6:#141C1A;

  /* الوضع الفاتح هو الافتراضي */
  --bg:#E9EEEB; --surface:#FFFFFF; --raised:#FBFCFA; --raised-2:var(--brand-blue-tint);
  --line:#E6EAE8; --line-2:#D2D8D5;
  --text:var(--brand-ink); --text-2:var(--n5); --text-3:var(--n4);

  /* اللون القيادي. الاسم `--gold` موروث من نسخة سابقة ويُستعمل في
     60+ موضعاً — تركناه مفتاحاً وغيّرنا قيمته، فالتغيير لا يكسر شيئاً. */
  --gold:var(--brand-blue); --gold-2:var(--brand-blue-hover);
  --gold-dim:var(--brand-blue-tint);

  /* ألوان الحالة — وظيفية فقط، لا تسويقية أبداً */
  --pos:#0E8F60; --pos-dim:#E8F6F1;
  --neg:#D92D20; --neg-dim:#FFFBFA;
  --warn:#C88A2E; --warn-dim:rgba(200,138,46,.12);
  --info:var(--brand-blue); --info-dim:var(--brand-blue-tint);

  /* السطوح تُفصل بحدود 1px لا بالارتفاع — ظلٌّ واحد للبطاقات البارزة */
  --shadow:0 18px 40px -12px rgba(16,24,40,.18);
  --r:6px; --r-sm:6px;
  --nav:236px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg:#080D18; --surface:var(--brand-ink); --raised:#161F30; --raised-2:#1D2939;
  --line:#1D2939; --line-2:var(--n5);
  --text:#F9FAFB; --text-2:#D0D5DD; --text-3:var(--n3);
  --gold:#7B9AE8; --gold-2:#9DB4EE; --gold-dim:rgba(123,154,232,.15);
  --pos:#4ADEA4; --pos-dim:rgba(74,222,164,.13);
  --neg:#FDA29B; --neg-dim:rgba(253,162,155,.12);
  --warn:#F2C275; --warn-dim:rgba(242,194,117,.13);
  --info:#7B9AE8; --info-dim:rgba(123,154,232,.15);
  --shadow:0 18px 40px -12px rgba(0,0,0,.6);
  color-scheme: dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{overflow-y:scroll}
body{
  margin:0;background:var(--bg);color:var(--text);
  /* Sora أولاً حتى تأخذ الأرقام واللاتيني شكلها، ثم العربي للحروف */
  font-family:'Readex Pro','IBM Plex Sans Arabic','Noto Sans Arabic','Segoe UI',Tahoma,sans-serif;
  font-size:15px;line-height:1.85;-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
/* أي لاتيني أو رقم داخل نص RTL يحتاج اتجاهه، وإلا أُعيد ترتيبه */
.mono,.ltr,.num{direction:ltr;unicode-bidi:isolate;
  font-family:'Space Grotesk','Readex Pro','Segoe UI',monospace;font-variant-numeric:tabular-nums}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--brand-blue);text-decoration:none}
a:hover{color:var(--brand-blue-hover)}
/* عمود التمرير: عريضٌ ودائم الظهور.
   الشريط الرفيع المختفي يجعل الوصول لآخر ألف سطر تخميناً — والعمود
   الظاهر يُسحب ويُنقر عليه فيقفز، وهو ما يتوقّعه أيّ مستخدم. */
/* **لا تُستعمل `scrollbar-color` هنا.** كروم 121+ يعطيها الأسبقية على
   `::-webkit-scrollbar` ويُلغي التنسيق المخصّص كلياً — فيظهر شريطٌ
   رفيع افتراضي بدل العمود العريض. وهذا بالضبط ما كسر العمود أول مرة. */
::-webkit-scrollbar{width:17px;height:17px}
::-webkit-scrollbar-track{background:var(--n1);border-radius:0}
::-webkit-scrollbar-thumb{background:var(--n3);border-radius:9px;
  border:3px solid var(--n1);min-height:44px}
::-webkit-scrollbar-thumb:hover{background:var(--n4)}
::-webkit-scrollbar-thumb:active{background:var(--brand-blue)}
::-webkit-scrollbar-corner{background:var(--n1)}

/* ── الهيكل ─────────────────────────────────────────────────────── */
.app{display:grid;grid-template-columns:var(--nav) 1fr;min-height:100vh}

.nav{
  background:var(--surface);border-inline-end:1px solid var(--line);
  padding:16px 12px;display:flex;flex-direction:column;gap:3px;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.nav .logo{display:flex;align-items:center;gap:10px;padding:4px 8px 16px}
.nav .logo img{width:44px;height:44px;flex:0 0 auto}
/* «وذ» خفيف و«موني» ثقيل — تباين الوزن هو الوسم لا زخرفةً فيه */
.nav .logo b{font-weight:700}
.nav .logo b .lt{font-weight:300}
.nav .logo b{font-size:16.5px;font-weight:700;letter-spacing:-.2px;display:block;line-height:1.25}
.nav .logo small{font-size:10px;letter-spacing:3.4px;color:var(--text-3);font-weight:300;
  font-family:'Space Grotesk','Readex Pro','Segoe UI',sans-serif;direction:ltr;display:block;margin-top:3px}
.nav .sect{font-size:10px;letter-spacing:1.5px;color:var(--text-3);font-weight:600;
  padding:14px 10px 5px;text-transform:uppercase}
.nav a.item{
  display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r-sm);
  color:var(--text-2);font-size:13.5px;font-weight:500;cursor:pointer;
  transition:background .13s,color .13s;border:1px solid transparent;
}
.nav a.item:hover{background:var(--raised);color:var(--text)}
.nav a.item.on{background:var(--gold-dim);color:var(--gold);border-color:var(--brand-blue);font-weight:600}
.nav a.item .ico{width:17px;text-align:center;font-size:14.5px;opacity:.9}
.nav a.item .badge{margin-inline-start:auto;font-size:10.5px;background:var(--raised-2);
  color:var(--text-2);padding:1px 6px;border-radius:20px;font-weight:600}
.nav .foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);
  font-size:11px;color:var(--text-3);display:flex;flex-direction:column;gap:6px}

.main{min-width:0;display:flex;flex-direction:column}
.top{
  display:flex;align-items:center;gap:12px;padding:14px 22px;
  border-bottom:1px solid var(--line);background:var(--surface);
  position:sticky;top:0;z-index:30;flex-wrap:wrap;
}
.top h1{margin:0;font-size:22px;font-weight:700;letter-spacing:-.5px;text-wrap:balance}
.top .sub{font-size:12px;color:var(--text-3);margin-top:-3px}
.top .spacer{flex:1}
.page{padding:20px 22px 44px;flex:1}

/* ── عناصر ───────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:var(--r-sm);
  background:var(--raised);border:1px solid var(--line-2);color:var(--text);
  font-size:13px;font-weight:600;cursor:pointer;transition:.13s;white-space:nowrap;
}
.btn:hover{background:var(--raised-2)}
.btn.primary{background:var(--brand-blue);border-color:var(--brand-blue);color:#fff}
.btn.primary:hover{background:var(--brand-blue-hover);border-color:var(--brand-blue-hover)}
/* الزر الثانوي: سطح أزرق خفيف ونصٌّ أزرق — لا ظلال، الحدود تفصل */
.btn.secondary{background:var(--brand-blue-tint);border-color:var(--brand-blue-tint);
  color:var(--brand-blue)}
.btn.secondary:hover{background:#DDE6FA}
/* لهجة النعناع — لوحة إبراز واحدة، لا سطح كبير */
.btn.mint{background:var(--brand-mint);border-color:var(--brand-mint);color:var(--brand-mint-ink)}
.btn.danger{color:var(--neg);border-color:rgba(220,38,38,.35)}
.btn.danger:hover{background:var(--neg-dim)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--text-2)}
.btn.ghost:hover{background:var(--raised);color:var(--text)}
.btn.sm{padding:4px 9px;font-size:12px}
.btn:disabled{opacity:.45;cursor:not-allowed}

.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field label{font-size:11.5px;color:var(--text-2);font-weight:600}
.field .hint{font-size:10.5px;color:var(--text-3)}
input,select,textarea{
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);
  padding:7px 10px;font-size:13.5px;width:100%;transition:border-color .13s;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand-blue);
  box-shadow:0 0 0 3px var(--brand-blue-tint)}
.btn:focus-visible,a:focus-visible{outline:2px solid var(--brand-blue);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
input[type="number"]{direction:ltr;text-align:end}
input.num{direction:ltr;text-align:end;font-variant-numeric:tabular-nums}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-3) 50%),
  linear-gradient(135deg,var(--text-3) 50%,transparent 50%);
  background-position:calc(12px) center,calc(17px) center;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-inline-start:28px}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.card > .hd{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.card > .hd h2{margin:0;font-size:14.5px;font-weight:700}
.card > .hd .spacer{flex:1}
.card > .bd{padding:16px}

.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}

/* ── مؤشرات ──────────────────────────────────────────────────────── */
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
/* التسمية «كلمة علوية»: 12px/600 بتباعد حروف — من سلّم الهوية */
.kpi .lbl{font-size:12px;color:var(--text-2);font-weight:600;letter-spacing:.6px;
  display:flex;align-items:center;gap:6px}
/* الرصيد: Sora 600 بأرقام ثابتة العرض — هذا مقياس «المبلغ» في الهوية */
.kpi .val{font-family:'Space Grotesk','Readex Pro','Segoe UI',sans-serif;font-size:28px;font-weight:600;
  letter-spacing:-.5px;margin-top:6px;direction:ltr;text-align:start;
  font-variant-numeric:tabular-nums}
/* لاحقة العملة تخفت لتبرز الخانة: 300 ومحايد */
.kpi .val .cur{font-size:15px;font-weight:300;color:var(--n4);margin-inline-start:5px}
.kpi .note{font-size:11.5px;color:var(--text-3);margin-top:2px}
.kpi.pos .val{color:var(--pos)} .kpi.neg .val{color:var(--neg)} .kpi.gold .val{color:var(--gold)}

/* ── لوحة غرفة العمليات ──────────────────────────────────────────── */
.dash{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.dash .fire{grid-column:1/-1}
.kpi.hero{grid-column:span 6;grid-row:span 2;display:flex;flex-direction:column;justify-content:space-between}
.kpi.hero .val{font-size:34px}
.kpi.hero .val .cur{font-size:18px}
.kpi.p1{grid-column:span 3}
.kpi-strip{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.kpi-strip .kpi{padding:9px 16px;display:flex;justify-content:space-between;align-items:center}
.kpi-strip .kpi .val{font-size:17px;margin:0}
.kpi-strip .kpi .val .cur{font-size:12px}
.dash .wq{grid-column:span 7}
.dash .ents{grid-column:span 5}
.dash .chart-card{grid-column:1/-1}
.wq-item{display:flex;gap:10px;align-items:center;padding:9px 14px;border-bottom:1px solid var(--line);cursor:pointer}
.wq-item:hover{background:var(--raised)}
.wq-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.wq-dot.red{background:var(--neg);box-shadow:0 0 0 3px var(--neg-dim)}
.wq-dot.yellow{background:var(--warn);box-shadow:0 0 0 3px var(--warn-dim)}
.wq-dot.info{background:var(--text-3)}
.wq-item .lbl{flex:1;min-width:0;font-size:13px}
.wq-item .det{font-size:11.5px;color:var(--text-3);white-space:nowrap}
.spark{display:block;width:100%;height:44px;margin-top:6px}
.greenline{grid-column:1/-1;display:flex;align-items:center;gap:9px;padding:11px 16px;
  border-radius:var(--r-sm);background:var(--pos-dim);border:1px solid rgba(14,159,110,.3);
  color:var(--pos);font-weight:600;font-size:13.5px}
.infoline{grid-column:1/-1;display:flex;align-items:center;gap:9px;padding:11px 16px;
  border-radius:var(--r-sm);background:var(--gold-dim,rgba(191,151,63,.12));
  border:1px solid rgba(191,151,63,.35);color:var(--text-1);font-weight:600;font-size:13.5px}
.basisnote{font-size:10.5px;color:var(--text-3);margin-top:3px}
@media (max-width:1080px){.kpi.hero{grid-column:1/-1}.kpi.p1{grid-column:span 6}.dash .wq,.dash .ents{grid-column:1/-1}}
@media (max-width:640px){.kpi.p1{grid-column:1/-1}.kpi-strip{grid-template-columns:1fr}}

/* ── جداول ───────────────────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:13px}
table.tbl th{
  text-align:start;padding:9px 11px;font-size:11px;font-weight:700;color:var(--text-2);
  letter-spacing:.4px;border-bottom:1px solid var(--line);background:var(--raised-2);
  position:sticky;top:0;white-space:nowrap;
}
table.tbl td{padding:9px 11px;border-bottom:1px solid var(--line);vertical-align:middle}
table.tbl tbody tr:hover{background:var(--raised)}
table.tbl tbody tr.clickable{cursor:pointer}
table.tbl td.n,table.tbl th.n{text-align:end;direction:ltr;white-space:nowrap;
  font-family:'Space Grotesk','Readex Pro','Segoe UI',sans-serif;font-variant-numeric:tabular-nums}
table.tbl td.c,table.tbl th.c{text-align:center}
table.tbl tfoot td{padding:10px 11px;font-weight:700;border-top:2px solid var(--line-2);background:var(--raised-2)}
table.tbl .mono{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:12.5px;direction:ltr}
table.tbl.dense td,table.tbl.dense th{padding:7px 9px;font-size:13.5px}
.group-hd td{background:var(--raised);font-weight:700;font-size:12.5px}

.tag{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;
  padding:2px 8px;border-radius:20px;white-space:nowrap;border:1px solid transparent}
.tag.draft{background:var(--raised-2);color:var(--text-2);border-color:var(--line-2)}
.tag.posted{background:var(--info-dim);color:var(--info)}
.tag.paid{background:var(--pos-dim);color:var(--pos)}
.tag.partially_paid{background:var(--warn-dim);color:var(--warn)}
.tag.void{background:var(--neg-dim);color:var(--neg);text-decoration:line-through}
.tag.reversed{background:var(--neg-dim);color:var(--neg)}
.tag.gold{background:var(--gold-dim);color:var(--gold)}
.tag.muted{background:var(--raised-2);color:var(--text-3)}

.pos{color:var(--pos)} .neg{color:var(--neg)} .muted{color:var(--text-3)}
.b{font-weight:700} .nowrap{white-space:nowrap}

/* ── تنبيهات ─────────────────────────────────────────────────────── */
.alert{display:flex;gap:10px;padding:11px 14px;border-radius:var(--r-sm);
  font-size:13px;border:1px solid;align-items:flex-start;line-height:1.6}
.alert .ico{font-size:15px;line-height:1.35;flex:0 0 auto}
.alert.ok{background:var(--pos-dim);border-color:rgba(14,159,110,.3);color:var(--pos)}
.alert.err{background:var(--neg-dim);border-color:rgba(220,38,38,.3);color:var(--neg)}
.alert.warn{background:var(--warn-dim);border-color:rgba(180,83,9,.3);color:var(--warn)}
.alert.info{background:var(--info-dim);border-color:rgba(37,99,235,.3);color:var(--info)}
.alert b{display:block;margin-bottom:1px}

.empty{text-align:center;padding:46px 20px;color:var(--text-3)}
.empty .big{font-size:34px;opacity:.35;margin-bottom:6px}

/* ── طبقات ───────────────────────────────────────────────────────── */
.scrim{position:fixed;inset:0;background:rgba(4,9,14,.68);backdrop-filter:blur(3px);
  z-index:100;display:flex;align-items:flex-start;justify-content:center;padding:36px 16px;overflow-y:auto}
.modal{background:var(--surface);border:1px solid var(--line-2);border-radius:14px;
  width:min(100%,880px);box-shadow:var(--shadow);animation:pop .16s ease-out}
.modal.wide{width:min(100%,1120px)}
.modal.narrow{width:min(100%,540px)}
@keyframes pop{from{opacity:0;transform:translateY(-9px)}to{opacity:1;transform:none}}
.modal .hd{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
.modal .hd h2{margin:0;font-size:16px;font-weight:700}
.modal .hd .spacer{flex:1}
.modal .bd{padding:18px;display:flex;flex-direction:column;gap:14px}
.modal .ft{display:flex;gap:9px;justify-content:flex-end;padding:14px 18px;
  border-top:1px solid var(--line);background:var(--raised-2);flex-wrap:wrap}
.modal .ft .spacer{flex:1}

.drawer{position:fixed;inset-block:0;inset-inline-end:0;width:min(100%,620px);
  background:var(--surface);border-inline-start:1px solid var(--line-2);
  box-shadow:var(--shadow);z-index:101;overflow-y:auto;animation:slide .18s ease-out}
@keyframes slide{from{transform:translateX(-24px);opacity:.4}to{transform:none;opacity:1}}
:root:not([dir]) .drawer{}
.drawer .hd{position:sticky;top:0;background:var(--surface);z-index:2;
  padding:15px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.drawer .bd{padding:18px;display:flex;flex-direction:column;gap:16px}

dl.kv{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:0;font-size:13px}
dl.kv dt{color:var(--text-2);font-weight:600;white-space:nowrap}
dl.kv dd{margin:0;min-width:0;word-break:break-word}

.toast-host{position:fixed;inset-block-end:18px;inset-inline-start:18px;z-index:200;
  display:flex;flex-direction:column;gap:8px;max-width:400px}
.toast{padding:11px 15px;border-radius:var(--r-sm);background:var(--raised-2);
  border:1px solid var(--line-2);box-shadow:var(--shadow);font-size:13px;animation:pop .15s}
.toast.ok{border-color:rgba(14,159,110,.5)} .toast.err{border-color:rgba(220,38,38,.5)}

/* ── رسم بياني بسيط ──────────────────────────────────────────────── */
.chart{width:100%;height:190px;display:block}
.chart .grid-l{stroke:var(--line);stroke-width:1}
.chart .axis{fill:var(--text-3);font-size:10px}
.bars rect{transition:opacity .12s}
.bars rect:hover{opacity:.78}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--text-2);margin-top:8px}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-inline-end:5px}

/* ── أسطر المستند ────────────────────────────────────────────────── */
.lines{width:100%;border-collapse:collapse}
.lines th{font-size:10.5px;color:var(--text-2);text-align:start;padding:5px 6px;font-weight:700}
.lines td{padding:3px 4px;vertical-align:top}
.lines input,.lines select{padding:5px 8px;font-size:12.5px}
.lines .rm{background:transparent;border:0;color:var(--text-3);cursor:pointer;font-size:16px;padding:0 5px}
.lines .rm:hover{color:var(--neg)}
.totbox{display:flex;flex-direction:column;gap:3px;margin-inline-start:auto;
  min-width:262px;font-size:13px;background:var(--raised-2);
  padding:11px 14px;border-radius:var(--r-sm);border:1px solid var(--line)}
.totbox .r{display:flex;justify-content:space-between;gap:14px}
.totbox .r span:last-child{direction:ltr;font-variant-numeric:tabular-nums}
.totbox .r.grand{font-size:16px;font-weight:700;padding-top:6px;margin-top:3px;
  border-top:1px solid var(--line-2);color:var(--gold)}

.filters{display:flex;gap:9px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.filters .field{min-width:132px}
.filters .field.grow{flex:1;min-width:180px}

.seg{display:inline-flex;background:var(--raised-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:2px;gap:2px}
.seg button{background:transparent;border:0;padding:5px 11px;border-radius:6px;
  font-size:12.5px;font-weight:600;color:var(--text-2);cursor:pointer}
.seg button.on{background:var(--gold);color:#fff}

.qrbox{display:flex;gap:12px;align-items:center;background:var(--raised-2);
  padding:12px;border-radius:var(--r-sm);border:1px solid var(--line)}
.qrbox img,.qrbox svg{width:108px;height:108px;background:#fff;padding:5px;border-radius:6px;flex:0 0 auto}
.hash{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:10.5px;
  color:var(--text-3);direction:ltr;word-break:break-all;line-height:1.55}

.skeleton{background:linear-gradient(90deg,var(--raised) 25%,var(--raised-2) 37%,var(--raised) 63%);
  background-size:400% 100%;animation:sk 1.3s ease-in-out infinite;border-radius:6px;height:15px}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}

@media (max-width:1080px){ .g4{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:1fr 1fr} }
@media (max-width:820px){
  .app{grid-template-columns:1fr}
  .nav{position:fixed;inset-inline-start:0;inset-block:0;width:var(--nav);z-index:90;
    transform:translateX(-104%);transition:transform .2s}
  .nav.open{transform:none}
  [dir="rtl"] .nav{transform:translateX(104%)} [dir="rtl"] .nav.open{transform:none}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .page{padding:14px}
  .top{padding:12px 14px}
}
@media print{
  .nav,.top .btn,.filters,.toast-host{display:none!important}
  .app{grid-template-columns:1fr}
  body{background:#fff;color:#000}
  .card{border-color:#ccc;break-inside:avoid}
}

/* ── البوابات والتسوية ─────────────────────────────────────────── */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.panel>.hd{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line)}
.panel>.hd h2{margin:0;font-size:14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:640px){.grid2{grid-template-columns:1fr}}
.tag.warn{background:var(--neg-dim,rgba(220,38,38,.1));color:var(--neg);border-color:rgba(220,38,38,.3)}

/* ── بطاقات الحسابات النقدية ───────────────────────────────────── */
.acct-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.acct{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.acct-top{display:flex;align-items:flex-start;gap:10px}
.acct-top>div:first-child{flex:1;min-width:0}
.acct-name{font-weight:700;font-size:14px;line-height:1.45;overflow-wrap:anywhere}
.acct-code{font-size:11px;color:var(--text-3);margin-top:2px}
.acct-figs{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.acct-figs .lbl{font-size:10.5px;color:var(--text-3);margin-bottom:2px}
.acct-bal{font-size:22px;font-weight:700;direction:ltr;text-align:start;
  font-variant-numeric:tabular-nums;letter-spacing:-.3px}
.acct-ref{font-size:14px;font-weight:600;color:var(--text-2);direction:ltr;
  font-variant-numeric:tabular-nums}
.acct-bal .cur,.acct-ref .cur{font-size:11px;font-weight:500;color:var(--text-3);
  margin-inline-start:4px}
.acct-foot{display:flex;align-items:center;gap:8px;font-size:11.5px}
.acct-act{display:flex;gap:6px;padding-top:8px;border-top:1px solid var(--line)}
.tag.pos{background:var(--pos-dim);color:var(--pos);border-color:rgba(14,159,110,.3)}
@media (max-width:640px){.acct-grid{grid-template-columns:1fr}}

.sect-hd{display:flex;align-items:baseline;gap:10px;margin:0 0 10px}
.sect-hd h3{margin:0;font-size:14.5px;font-weight:700}
.sect-hd .muted{font-size:11.5px}
.sect-hd .b{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;direction:ltr}

/* ── بطاقة الحساب البنكي — على شكل بطاقة وافق ──────────────────── */
.acct{gap:0;padding:0}
.acct-top{display:flex;align-items:flex-start;gap:10px;padding:14px 16px 12px}
.acct-ico{width:30px;height:30px;flex:none;display:grid;place-items:center;
  border-radius:8px;background:var(--raised);font-size:15px}
.acct-line{display:flex;align-items:center;gap:8px;padding:9px 16px;
  border-top:1px solid var(--line)}
.acct-line .ico{width:16px;flex:none;font-size:12px;opacity:.65}
.acct-line .k{color:var(--text-2);font-size:12.5px}
.acct-line .v{margin-inline-start:auto;font-weight:600;font-size:14px;
  direction:ltr;font-variant-numeric:tabular-nums}
.acct-line .v.muted{font-weight:500;font-size:12.5px}
.acct-line.diff .v{font-weight:700}
.acct-line .cur{font-size:10.5px;font-weight:500;color:var(--text-3);margin-inline-start:3px}
.acct-ref-row{display:flex;align-items:center;gap:6px;padding:8px 16px;
  border-top:1px solid var(--line);background:var(--raised);font-size:12px}
.acct-ref-row .k{color:var(--text-2)}
.acct-ref-row .v{font-weight:600;direction:ltr;font-variant-numeric:tabular-nums}
.acct-act{display:flex;flex-wrap:wrap;gap:6px;padding:11px 16px;
  border-top:1px solid var(--line)}
.idle-wrap{margin-top:18px}
.idle-wrap>summary{cursor:pointer;font-size:13px;color:var(--text-2);
  padding:9px 12px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--raised)}

/* ── دفتر الأستاذ: سكرول رأسي وتلوين بالمعنى ────────────────────────
   الفكرة: المدين والدائن يُلوَّنان بما يعنيه السطر لا بجانبه.
   والإيداع وتصفية الحساب **يبقيان محايدين** — فهما نقلُ مال بين
   حسابينا لا ربحٌ ولا خسارة، وتلوينهما يجعل كل إيداع يُقرأ «دخلاً». */
/* الجدول بطوله الكامل — الصفحة هي التي تُمرَّر لا صندوقٌ داخلها.
   وصندوقٌ داخليّ يُنشئ سياق تمرير خاصاً يُبطل ثباتَ الرأس على الصفحة،
   فنتركه مرئياً ونُثبّت الرأس تحت شريط الصفحة (ارتفاعه ≈60px). */
/* **`overflow:visible` كان يقتل الشريط الأفقي.** الجدول يفيض فتُمرَّر
   **الصفحة** لا الجدول، فلا يجد القارئ شريطاً يسحبه ليرى الأعمدة
   البعيدة. ماجد: «لازم هنا سكرول للتحرك يميناً ويساراً».
   فالحاوية صارت وعاءَ تمريرٍ بارتفاعٍ محدود: شريطٌ أفقي في أسفلها
   دائماً على الشاشة، ورأسٌ لاصقٌ بأعلاها. */
.tbl-wrap.tall{max-height:calc(100vh - 176px);min-height:52vh;overflow:auto;
  border-radius:10px;border:1px solid var(--line)}
.tbl-wrap.tall thead th{position:sticky;top:0;z-index:2;background:var(--raised-2);
  box-shadow:0 1px 0 var(--line-2)}
.tbl-wrap.tall tfoot td{position:sticky;bottom:0;z-index:2;background:var(--raised-2);
  box-shadow:0 -1px 0 var(--line-2)}
/* على الشاشات الضيّقة يعود التمرير الأفقي — والرأس الثابت يُسقَط لأنه
   لا يعمل داخل سياق تمرير، وإسقاطه أصدق من إبقائه معطّلاً. */
@media (max-width:900px){
  .tbl-wrap.tall{overflow-x:auto}
  .tbl-wrap.tall thead th{position:static}
  .tbl-wrap.tall tfoot td{position:static}
}

table.tbl.gl td.dr{color:var(--brand-blue);font-weight:600}
table.tbl.gl td.cr{color:var(--n5);font-weight:600}
table.tbl.gl td.run{color:var(--text)}


.gltag{display:inline-block;font-size:10px;font-weight:700;padding:1px 6px;border-radius:4px;
  margin-inline-end:6px;letter-spacing:.3px;vertical-align:1px}
.gltag:empty{display:none}
.gltag.coll{background:var(--pos-dim);color:var(--pos)}
.gltag.refund{background:var(--neg-dim);color:var(--neg)}
.gltag.fee{background:rgba(232,163,61,.2);color:#8A5B00}
.gltag.vat{background:rgba(232,163,61,.28);color:#7A4E00}
.gltag.move{background:var(--brand-blue-tint);color:var(--brand-blue)}

.jlink{cursor:pointer;color:var(--brand-blue);text-decoration:underline;text-decoration-style:dotted}
.jlink:hover{color:var(--brand-blue-hover)}

/* شريط الحصيلة فوق الجدول — «كم أخذوا عمولةً وكم ضريبةً» بلا حساب يدوي */
.glsum{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 14px;
  border-bottom:1px solid var(--line);background:var(--raised)}
.glsum .spacer{flex:1}
.glchip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  padding:3px 9px;border-radius:20px;border:1px solid var(--line-2);background:var(--surface)}
.glchip b{font-family:'Space Grotesk','Readex Pro','Segoe UI',sans-serif;direction:ltr;font-variant-numeric:tabular-nums}
.glchip.coll{border-color:var(--pos);color:var(--pos)}
.glchip.refund{border-color:var(--neg);color:var(--neg)}
.glchip.fee{border-color:var(--warn);color:#8A5B00}
.glchip.vat{border-color:#9A6700;color:#7A4E00}
.glchip.move{border-color:var(--brand-blue);color:var(--brand-blue)}

/* بطاقة الحساب البنكي: كل البطاقة تُضغط، لا الأزرار وحدها */
.acct{cursor:pointer;transition:border-color .13s,box-shadow .13s}
.acct:hover{border-color:var(--brand-blue);box-shadow:0 0 0 3px var(--brand-blue-tint)}
.acct:focus-visible{outline:2px solid var(--brand-blue);outline-offset:2px}
.acct .acct-act{cursor:default}
.acct-open{font-size:11px;color:var(--brand-blue);font-weight:600;margin-inline-start:auto}

/* ── أعمدة دفتر الأستاذ ─────────────────────────────────────────────── */
/* دفتر الأستاذ يُقرأ سطراً سطراً لدقائق — لا يُمسح بالعين.
   12px كانت تُجهد القارئ وتُخفي الفرق بين ١ و٧ في الأرقام. */
table.tbl.gl{font-size:14px}
table.tbl.gl td,table.tbl.gl th{padding:6px 7px}
/* **البيان يُلفّ ولا يُقصّ.** كان `nowrap` مع عرضٍ محدود، فيُقطع نصفه
   بثلاث نقاط ولا يُقرأ إلا بتمرير الفأرة عليه سطراً سطراً — وهذا لا يصلح
   لكشفٍ يُقرأ كاملاً. الآن يلتفّ في سطرين بحدٍّ أقصى، وما زاد يُقصّ. */
table.tbl.gl td.gl-memo{white-space:nowrap}

table.tbl.gl .muted{color:var(--text-3)}

/* رأس المجموعة: كتلةٌ زرقاء تفصل إيداعاً عن إيداع وتحمل مجاميعه */
tr.gl-group td{background:var(--brand-blue-tint);border-block:1px solid var(--brand-blue);
  padding:8px 7px;font-weight:600}
tr.gl-group:hover td{background:var(--brand-blue-tint)}
.glg-line{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.glg-line b{color:var(--brand-blue);font-size:12.5px}
.glg-line .muted{font-size:11px;font-weight:500}

/* وسوم العلامات */
.gltag.br-GT{background:var(--brand-blue-tint);color:var(--brand-blue)}
.gltag.br-GH{background:var(--brand-mint);color:var(--brand-mint-ink)}
.gltag.br-BRZ{background:rgba(232,163,61,.2);color:#8A5B00}
.gltag.br-UNK{background:var(--neg-dim);color:var(--neg)}

/* ── شرح النزول اللحظي ─────────────────────────────────────────────
   رصيدٌ سالبٌ في عمود الرصيد يُقرأ «سحبٌ على المكشوف» — والسبب غالباً
   ترتيب الحركات داخل اليوم. الشرح هنا لا في الحاشية. */
.gldip{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;
  border-bottom:1px solid var(--line);font-size:13px;font-weight:600}
.gldip.ok{background:var(--brand-blue-tint);color:var(--brand-blue)}
.gldip.bad{background:var(--neg-dim);color:var(--neg)}
.gldip .ico{font-size:15px;flex:0 0 auto;line-height:1.4}
.gldip b{display:block;margin-bottom:2px}

/* عمودا مرجعَي البوابة في خليةٍ واحدة، سطرٌ فوق سطر */
table.tbl.gl td.gl-refs{line-height:1.35;font-size:12px}
table.tbl.gl td.gl-refs div{white-space:nowrap}
/* البيان لا يتمدّد بلا حدّ — الجدول يجب أن يسع الشاشة */
table.tbl.gl td.gl-memo{max-width:250px}

/* ── عمود التمرير الخاص ─────────────────────────────────────────────
   لا يعتمد على `::-webkit-scrollbar` لأن ويندوز قد يُخفيه، ولا على
   إعدادٍ خارج سيطرتنا. مرسومٌ بعناصر عادية: يظهر دائماً، ويُسحب. */
.wm-scroll{position:fixed;top:56px;bottom:8px;inset-inline-end:4px;width:18px;
  z-index:70;display:flex;align-items:stretch;justify-content:center}
.wm-scroll[hidden]{display:none}
.wm-track{position:relative;width:12px;border-radius:8px;background:var(--n1);
  border:1px solid var(--line);cursor:pointer;overflow:hidden}
.wm-thumb{position:absolute;inset-inline:0;top:0;border-radius:8px;
  background:var(--n3);cursor:grab;transition:background .12s}
.wm-thumb:hover{background:var(--n4)}
.wm-scroll.drag .wm-thumb{background:var(--brand-blue);cursor:grabbing}
/* النسبة تظهر على الإبهام أثناء السحب — «أين أنا» بلا تخمين */
.wm-scroll.drag .wm-thumb::after{content:attr(data-pct);position:absolute;
  inset-inline-end:22px;top:50%;transform:translateY(-50%);
  background:var(--ink);color:#fff;font:600 11px 'Sora',sans-serif;
  padding:3px 8px;border-radius:6px;white-space:nowrap;direction:ltr}
@media print{.wm-scroll{display:none}}

/* عمود المستند — الزرّ يبرز لأنه المطلوب عند أي تدقيق */
table.tbl.gl .docbtn{background:var(--brand-blue-tint);border-color:var(--brand-blue);
  color:var(--brand-blue);font-weight:700;padding:3px 8px;font-size:11px}
table.tbl.gl .docbtn:hover{background:var(--brand-blue);color:#fff}
/* زرّ السند — الأبرز، فهو ما يُقدَّم للمدقّق */
table.tbl.gl .voucher{background:var(--brand-mint);border-color:var(--brand-mint);
  color:var(--brand-mint-ink);font-weight:700}
table.tbl.gl .voucher:hover{background:#6ED9B4;border-color:#6ED9B4}


/* ملخّص دفتر الأستاذ — أسفل الجدول لا فوقه. */
table.tbl.gl + .glsum.bottom, .glsum.bottom{
  margin-top:10px; padding-top:10px; border-top:1px solid var(--line)}

/* السحب الأفقي: مؤشّرٌ يدلّ على أن الجدول يُسحب، ومنعُ تحديد النصّ أثناءه */
.tbl-wrap{cursor:grab;overscroll-behavior-x:contain}
.tbl-wrap.dragging{cursor:grabbing;user-select:none}
.tbl-wrap.dragging *{user-select:none}
/* شريط تمرير ظاهر دائماً، فيُعرف أن وراء الحافة بقيّة */
.tbl-wrap{scrollbar-width:thin}
.tbl-wrap::-webkit-scrollbar{height:10px}
.tbl-wrap::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:6px}
.tbl-wrap::-webkit-scrollbar-thumb:hover{background:var(--n5)}
/* اسم الحساب المقابل يُكتب كاملاً — الهوية لا تُقصّ */
table.tbl.gl td .gltag{white-space:nowrap}



/* ═══ الكشف يسع الشاشة — والمبالغ لا تُقصّ أبداً ═══
   فرضتُ nowrap على كل خلية فاتّسع الجدول أعرض من الشاشة، والصفحة عربية
   فالأعمدة الأخيرة — مدين ودائن والرصيد — تقع على الحافة اليسرى وتُقصّ.
   وهي أهمّ ما في الكشف. فالنصّ الطويل يلفّ، والأرقام وحدها تبقى بسطر. */
table.tbl.gl{width:100%;min-width:0;table-layout:auto}
/* النصوص تلفّ بحدود، فلا يتمدّد الجدول */
table.tbl.gl td.gl-memo{white-space:normal;word-break:break-word;
  min-width:200px;max-width:360px;line-height:1.5}
table.tbl.gl td .gltag{white-space:normal;display:inline-block;max-width:170px}
table.tbl.gl td.gl-refs{white-space:normal;max-width:98px}
table.tbl.gl td.gl-refs div{white-space:nowrap;font-size:11.5px}
/* الأرقام بسطرٍ واحد ولها عرضٌ مضمون */
table.tbl.gl td.n,table.tbl.gl th.n{white-space:nowrap;min-width:84px;
  font-variant-numeric:tabular-nums}
/* الوسيلة والتاريخ والقيد قصيرة أصلاً */
table.tbl.gl td.nowrap{white-space:nowrap;max-width:118px;overflow:hidden;text-overflow:ellipsis}
/* رأس الجدول يثبت أثناء التمرير الرأسي */
table.tbl.gl thead th{position:sticky;top:0;z-index:2;background:var(--raised-2)}
.tbl-wrap.tall{overflow-x:auto;overflow-y:auto}

/* رقم القيد والتاريخ لا يتكسّران — «LE-JRN-2026-01601» على ثلاثة أسطر
   يجعل كل صفٍّ بارتفاع ثلاثة، فيرى القارئ ستة أسطر بدل عشرين. */
table.tbl.gl td a,table.tbl.gl td.mono{white-space:nowrap}
table.tbl.gl td:first-child,table.tbl.gl td:nth-child(2){white-space:nowrap}
/* صفوفٌ أقصر: البيان سطران بحدٍّ أعلى ثم يُقصّ، والباقي سطر */
table.tbl.gl td.gl-memo{max-width:330px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
table.tbl.gl td.gl-memo:hover{-webkit-line-clamp:unset;overflow:visible}
table.tbl.gl td .gltag{max-width:118px;line-height:1.35}
table.tbl.gl td,table.tbl.gl th{padding:5px 7px;vertical-align:middle}


/* ═══ الإيداع: سطرٌ عريضٌ يُقرأ كاملاً ═══
   الإيداع يُقفل رصيد البوابة كلّه، وبيانه يحمل المرجع والوجهة وعدد
   الطلبات — فلا يُقصّ إلى سطرين كبقية البيانات. */
table.tbl.gl tr.k-dep td.gl-memo{-webkit-line-clamp:unset;overflow:visible;
  white-space:normal;font-weight:600}
table.tbl.gl tr.k-dep td{padding-block:9px}


/* ═══ البوابات لونٌ مستقل ═══
   ماي فاتورة وتمارا وتاب ليست علامةً تجارية بل قناةَ تحصيل تمرّ بها أموال
   العلامات الثلاث. لونٌ بنفسجيّ يميّزها عن قولدن تيكت الأزرق. */
.gltag.br-MF{background:rgba(124,77,190,.16);color:#5B2E9A}

/* ═══ مربّع ملخّص الإيداع ═══
   يقع تحت صف الإيداع لا فوقه، وبعرض الجدول كلّه، وداخل إطارٍ يفصله عمّا
   حوله — فهو خلاصةُ حدثٍ لا سطرُ حركة. */
table.tbl.gl tr.glhead td{padding:0 !important;border:0 !important;background:transparent !important}
table.tbl.gl tr.glhead .glsum{
  margin:2px 8px 12px; padding:11px 14px;
  border:2px solid color-mix(in srgb, #0E7C5A 34%, transparent);
  border-radius:11px; background:color-mix(in srgb, #0E7C5A 7%, var(--surface));
  display:flex; flex-wrap:wrap; align-items:center; gap:9px;
  box-shadow:0 1px 3px rgba(0,0,0,.06)}
table.tbl.gl tr.glhead .glsum .glchip{font-size:12px !important;padding:4px 10px}
table.tbl.gl tr.glhead .glsum>b:first-child{font-size:13.5px}

/* ══════════════════════════════════════════════════════════════════
   لغة الكشف البصرية — الهدوء قاعدةٌ لا زينة
   ══════════════════════════════════════════════════════════════════
   كانت ستة ألوان تتنافس على خلفيات الصفوف: أخضر للتحصيل وأحمر للمرتجع
   وبرتقالي للعمولة وأصفر للضريبة وأزرق للنقل وأخضر داكن للإيداع — فصار
   الجدول لوحةً، والعين تُجهَد قبل أن تقرأ رقماً واحداً.
   والقاعدة الجديدة: **الخلفية للبنية، واللون للمعنى، والمعنى في الحرف
   لا في الأرضية.** فتُلغى تعبئة الصفوف، ويبقى شريطٌ رفيع على الحافة
   يميّز النوع، وتُلوَّن الأرقام وحدها. ويبقى للإيداع تمييزٌ أقوى لأنه
   يُقفل رصيد البوابة كلّه — لكن بلونٍ يُرى ولا يصرخ.
   ────────────────────────────────────────────────────────────────── */
:root{
  --gl-coll:#0F8B62;     /* تحصيل — داخل */
  --gl-refund:#C0392B;   /* مرتجع — خارج */
  --gl-fee:#9A6A12;      /* عمولة */
  --gl-vat:#8A6D3B;      /* ضريبة العمولة */
  --gl-move:#3B5BA5;     /* نقل بنكي */
  --gl-dep:#0E6E52;      /* إيداع */
  --gl-stripe:#FAFBFC;   /* تظليل الصفوف الزوجية */
}
:root:not([data-theme="light"]){}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --gl-coll:#4FD1A5; --gl-refund:#F27B6E; --gl-fee:#E0B25C;
    --gl-vat:#D4B483; --gl-move:#8FA9E0; --gl-dep:#5FD6AE;
    --gl-stripe:rgba(255,255,255,.025);
  }
}
:root[data-theme="dark"]{
  --gl-coll:#4FD1A5; --gl-refund:#F27B6E; --gl-fee:#E0B25C;
  --gl-vat:#D4B483; --gl-move:#8FA9E0; --gl-dep:#5FD6AE;
  --gl-stripe:rgba(255,255,255,.025);
}

/* ① الأرضية هادئة: تظليلٌ متناوب خفيف يقود العين أفقياً، لا ألوان معنى */
table.tbl.gl tbody tr{background:transparent}
table.tbl.gl tbody tr:nth-child(even){background:var(--gl-stripe)}
table.tbl.gl tbody tr:hover{background:var(--brand-blue-tint)}
table.tbl.gl tbody td{border-bottom:1px solid var(--line)}

/* ② الشريط الجانبي يحمل النوع — ثلاث بكسلات تكفي */
table.tbl.gl tbody tr>td:first-child{box-shadow:inset -3px 0 0 0 transparent}
table.tbl.gl tr.k-coll  >td:first-child{box-shadow:inset -3px 0 0 0 var(--gl-coll)}
table.tbl.gl tr.k-refund>td:first-child{box-shadow:inset -3px 0 0 0 var(--gl-refund)}
table.tbl.gl tr.k-fee   >td:first-child{box-shadow:inset -3px 0 0 0 var(--gl-fee)}
table.tbl.gl tr.k-vat   >td:first-child{box-shadow:inset -3px 0 0 0 var(--gl-vat)}
table.tbl.gl tr.k-move  >td:first-child{box-shadow:inset -3px 0 0 0 var(--gl-move)}
table.tbl.gl tr.k-dep   >td:first-child{box-shadow:inset -4px 0 0 0 var(--gl-dep)}

/* ③ اللون في الرقم لا في الأرضية */
table.tbl.gl td.dr,table.tbl.gl td.cr{font-weight:600;font-variant-numeric:tabular-nums}
table.tbl.gl td.run{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
table.tbl.gl tr.k-coll  td.dr{color:var(--gl-coll)}
table.tbl.gl tr.k-refund td.dr,table.tbl.gl tr.k-refund td.cr{color:var(--gl-refund)}
table.tbl.gl tr.k-fee   td.cr,table.tbl.gl tr.k-fee   td.dr{color:var(--gl-fee)}
table.tbl.gl tr.k-vat   td.cr,table.tbl.gl tr.k-vat   td.dr{color:var(--gl-vat)}
table.tbl.gl tr.k-move  td.dr,table.tbl.gl tr.k-move  td.cr{color:var(--gl-move)}

/* ④ الإيداع — يُرى بلا صراخ: أرضية شاحبة، وخطٌّ فوقه يفصل ما قبله */
table.tbl.gl tr.k-dep{background:color-mix(in srgb,var(--gl-dep) 8%,transparent) !important;
  border-top:1px solid color-mix(in srgb,var(--gl-dep) 30%,transparent)}
table.tbl.gl tr.k-dep td{color:var(--text);font-weight:600;padding-block:10px}
table.tbl.gl tr.k-dep td.dr,table.tbl.gl tr.k-dep td.cr,
table.tbl.gl tr.k-dep td.run{color:var(--gl-dep);font-weight:700}
table.tbl.gl tr.k-dep td.gl-memo{-webkit-line-clamp:unset;overflow:visible;white-space:normal}
table.tbl.gl tr.k-dep:hover{background:color-mix(in srgb,var(--gl-dep) 13%,transparent) !important}

/* ⑤ التقريب هامشيّ — يُخفَت فلا يزاحم ما يهمّ */
table.tbl.gl tr.k-round td{color:var(--text-3);font-size:12.5px}
table.tbl.gl tr.k-round td.dr,table.tbl.gl tr.k-round td.cr,
table.tbl.gl tr.k-round td.run{color:var(--text-3);font-weight:500}
table.tbl.gl tr.k-round>td:first-child{box-shadow:none}

/* ⑥ الشارات أهدأ: حرفٌ ملوَّن على أرضيةٍ شاحبة، بلا حدودٍ صارخة */
table.tbl.gl .gltag{font-weight:600;letter-spacing:.1px;border:0}
table.tbl.gl tr.k-dep .gltag:not(.dep){background:rgba(255,255,255,.6);color:var(--gl-dep)}

/* ⑦ إيقاع القراءة: سطرٌ أوسع قليلاً وحدود أفتح */
table.tbl.gl td,table.tbl.gl th{padding:7px 9px}
table.tbl.gl thead th{background:var(--surface);color:var(--text-3);
  font-weight:600;font-size:11.5px;letter-spacing:.3px;
  border-bottom:2px solid var(--line-2);text-transform:none}

/* ⑧ مربّع خلاصة الإيداع — بنفس هدوء الصف الذي يشرحه */
table.tbl.gl tr.glhead .glsum{
  border:1px solid color-mix(in srgb,var(--gl-dep) 28%,transparent);
  background:color-mix(in srgb,var(--gl-dep) 5%,var(--surface))}
table.tbl.gl tr.glhead:hover{background:transparent}

/* صفّ الافتتاحي: يُقرأ عنواناً لا حركة — بلا شريط جانبي وبخطٍّ تحته */
table.tbl.gl tr.gl-open td{background:var(--brand-blue-tint);color:var(--text-3);
  font-size:12px;border-bottom:2px solid var(--line-2);padding-block:8px}
table.tbl.gl tr.gl-open td.run{color:var(--text);font-weight:700;font-size:13px}
table.tbl.gl tr.gl-open>td:first-child{box-shadow:none}
table.tbl.gl tr.gl-open:hover{background:var(--brand-blue-tint)}

/* ══════════════════════════════════════════════════════════════════
   مقابض الأعمدة — تُرى قبل أن تُجرَّب
   ══════════════════════════════════════════════════════════════════
   كان المقبض شفافاً لا يظهر إلا عند المرور فوقه — فمن لا يعرف أنه هناك
   لا يمرّ فوقه أصلاً. والإكسل يُظهر حدود أعمدته دائماً، فيعرف المستخدم
   أنها تُسحب قبل أن يجرّب. فيصير الحدّ خطّاً ظاهراً في الرأس، ويغمق عند
   الاقتراب، ويزرقّ أثناء السحب.
   ────────────────────────────────────────────────────────────────── */
table.tbl.gl thead th{position:relative;user-select:none;cursor:default}
.colgrip{position:absolute;inset-block:0;inset-inline-end:-4px;width:9px;
  cursor:col-resize;z-index:4;touch-action:none;
  display:flex;align-items:center;justify-content:center}
/* الخطّ الظاهر دائماً — هذا ما ينقص */
.colgrip::after{content:"";width:2px;height:62%;border-radius:2px;
  background:var(--line-2);transition:background .12s,height .12s}
table.tbl.gl thead th:hover .colgrip::after{background:var(--n3);height:78%}
.colgrip:hover::after{background:var(--brand-blue);width:3px;height:92%}
table.tbl.gl.resizing{cursor:col-resize}
table.tbl.gl.resizing *{user-select:none;pointer-events:none}
table.tbl.gl.resizing .colgrip{pointer-events:auto}
table.tbl.gl.resizing .colgrip::after{background:var(--brand-blue);width:3px;height:100%}
/* آخر عمود لا مقبض له — لا شيء بعده يُوسَّع */
table.tbl.gl thead th:last-child .colgrip{display:none}

/* ══════════════════════════════════════════════════════════════════
   البيان: يتّسع مع العمود ولا يُقصّ
   ══════════════════════════════════════════════════════════════════
   كان مقصوصاً إلى سطرين مهما وُسّع العمود، فتوسيعه لا يُظهر شيئاً —
   وهذا سبب أن الكتابة تبدو غير واضحة. الآن يلفّ بالكامل داخل عرضه،
   ومن وسّع العمود رأى النصّ كلّه.
   ────────────────────────────────────────────────────────────────── */
table.tbl.gl td.gl-memo{white-space:normal;word-break:break-word;
  -webkit-line-clamp:unset;display:table-cell;overflow:visible;
  min-width:210px;max-width:none;line-height:1.55}
/* حين يُحدَّد عرضٌ يدوي للعمود، يلتزم به الجدول */
table.tbl.gl th[style*="width"]{overflow:hidden}

/* ══════════════════════════════════════════════════════════════════
   إيقاع الطباعة — الشخصية في الوزن والمسافة لا في الزخرفة
   ══════════════════════════════════════════════════════════════════ */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  letter-spacing:-.1px}
h1,h2,h3,.hd h2{font-weight:600;letter-spacing:-.35px}
/* الأرقام دائماً بخطّها وبخاناتٍ متساوية — العمود يصطفّ كالمسطرة */
table.tbl.gl td.n,table.tbl.gl td.dr,table.tbl.gl td.cr,table.tbl.gl td.run,
table.tbl.gl th.n,.glchip b,.kpi .val{
  font-family:'Space Grotesk','Readex Pro',ui-monospace,monospace;
  font-variant-numeric:tabular-nums lining-nums;letter-spacing:0}
/* رأس الجدول: حروفٌ أصغر وأوسع تباعداً — يُقرأ عنواناً لا نصّاً */
table.tbl.gl thead th{font-weight:500;font-size:11px;letter-spacing:.45px;
  color:var(--text-3)}
/* البيان: ارتفاع سطرٍ مريح ووزنٌ خفيف */
table.tbl.gl td.gl-memo{font-weight:300;line-height:1.62;font-size:13px;
  color:var(--text-2)}
table.tbl.gl tr.k-dep td.gl-memo{font-weight:400;color:var(--text)}
/* الشارات: حروفٌ صغيرة بوزنٍ متوسط — لا صراخ */
.gltag,.glchip{font-weight:500;letter-spacing:.05px}

/* ══════════════════════════════════════════════════════════════════
   المراجع الطويلة تُقصّ داخل عمودها ولا تفيض على جاره
   ══════════════════════════════════════════════════════════════════
   مرجع تسوية تمارا أربعة وثلاثون حرفاً (20260804SASABBSABB6BB2B…)،
   والخليّة `nowrap` بعرضٍ محدود — فالنصّ يخرج من حدوده ويركب على عمود
   رقم القيد. القصّ داخل الخليّة هو الحل، والنصّ كاملٌ عند المرور.
   ────────────────────────────────────────────────────────────────── */
table.tbl.gl td.gl-refs{max-width:110px;overflow:hidden}
table.tbl.gl td.gl-refs div{white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:100%;direction:ltr;text-align:right;
  font-family:'Space Grotesk',ui-monospace,monospace;font-size:11px}
table.tbl.gl td.gl-refs div:hover{overflow:visible;position:relative;z-index:5;
  background:var(--surface);box-shadow:0 2px 8px rgba(0,0,0,.16);
  border-radius:5px;padding:2px 6px;width:max-content}
/* وكل خليّة في الكشف محبوسة في حدودها — لا فيض على الجار */
table.tbl.gl td{overflow:hidden}
table.tbl.gl td.gl-memo{overflow:visible}

/* ══════════════════════════════════════════════════════════════════
   شبكة الأعمدة والمحاذاة
   ══════════════════════════════════════════════════════════════════
   عطلان معاً: لا خطوط رأسية تفصل الأعمدة فتتداخل القيم بصرياً، والقيمة
   تجلس على اليمين بينما عنوانها في وسط الرأس — فلا تعرف العين أي رقمٍ
   لأي عمود. القاعدة: **العنوان وقيمته على محاذاةٍ واحدة**، وخطٌّ رفيع
   جداً يفصل الأعمدة — يُرى ولا يُثقل.
   ────────────────────────────────────────────────────────────────── */
table.tbl.gl td,table.tbl.gl th{
  border-inline-start:1px solid color-mix(in srgb,var(--line) 62%,transparent)}
table.tbl.gl td:first-child,table.tbl.gl th:first-child{border-inline-start:0}
table.tbl.gl thead th{
  border-inline-start:1px solid color-mix(in srgb,var(--line-2) 70%,transparent)}

/* الأعمدة القصيرة: القيمة وعنوانها في الوسط */
table.tbl.gl thead th:nth-child(1),table.tbl.gl tbody td:nth-child(1),
table.tbl.gl thead th:nth-child(2),table.tbl.gl tbody td:nth-child(2),
table.tbl.gl thead th:nth-child(3),table.tbl.gl tbody td:nth-child(3),
table.tbl.gl thead th:nth-child(4),table.tbl.gl tbody td:nth-child(4),
table.tbl.gl thead th:nth-child(5),table.tbl.gl tbody td:nth-child(5),
table.tbl.gl thead th:nth-child(6),table.tbl.gl tbody td:nth-child(6),
table.tbl.gl thead th:nth-child(7),table.tbl.gl tbody td:nth-child(7),
table.tbl.gl thead th:last-child,table.tbl.gl tbody td:last-child{
  text-align:center}
table.tbl.gl td.gl-refs div{text-align:center;direction:ltr}
table.tbl.gl td:nth-child(7) .gltag{margin:0 auto}

/* البيان يبقى على يمينه — النصّ الطويل يُقرأ من حافةٍ ثابتة لا من وسطٍ متذبذب */
table.tbl.gl thead th:nth-child(8),table.tbl.gl tbody td.gl-memo{text-align:right}

/* الأرقام على اليسار مع عناوينها — الخانات تصطفّ عمودياً كالمسطرة */
table.tbl.gl th.n,table.tbl.gl td.n,table.tbl.gl td.dr,
table.tbl.gl td.cr,table.tbl.gl td.run{text-align:left;padding-inline-end:14px}

/* صفّ الافتتاحي وخلاصة الإيداع خارج الشبكة */
table.tbl.gl tr.gl-open td,table.tbl.gl tr.glhead td{border-inline-start:0}
table.tbl.gl tr.gl-open td:nth-child(2){text-align:right}

/* ══════════════════════════════════════════════════════════════════
   الخطوط الفاصلة — تُرى فعلاً
   ══════════════════════════════════════════════════════════════════
   وضعتُها بلونٍ شبه أبيض بشفافية ٦٢٪، فكانت موجودةً في الكود غائبةً عن
   العين. والأسوأ أنها تناوبت بين حافةٍ ويسرى فبدت الشبكة متكسّرة.
   الآن: خطٌّ واحد بلونٍ ظاهر على حافةٍ واحدة لكل خليّة، من الرأس إلى
   الذيل — شبكةٌ متصلة كالإكسل.
   ────────────────────────────────────────────────────────────────── */
table.tbl.gl{border-collapse:collapse}
table.tbl.gl th,table.tbl.gl td{
  border-inline-start:0 !important;
  border-inline-end:1px solid var(--line-2) !important}
table.tbl.gl th:last-child,table.tbl.gl td:last-child{border-inline-end:0 !important}
/* الأفقية أفتح من الرأسية — العين تتبع الصف لا العمود */
table.tbl.gl tbody td{border-bottom:1px solid var(--line) !important}
table.tbl.gl thead th{border-bottom:2px solid var(--n3) !important;
  border-inline-end:1px solid var(--n2) !important}
table.tbl.gl thead th:last-child{border-inline-end:0 !important}
/* الصفوف الخاصة تعبر الشبكة: الافتتاحي والخلاصة سطرٌ واحد لا أعمدة */
table.tbl.gl tr.gl-open td,table.tbl.gl tr.glhead td{
  border-inline-end:0 !important;border-inline-start:0 !important}

/* ══════════════════════════════════════════════════════════════════
   الفواصل الرأسية — حدٌّ فيزيائي لا منطقي
   ══════════════════════════════════════════════════════════════════
   `border-inline-end` يعني «نهاية السطر» — وهي اليسار في العربية واليمين
   في الإنجليزية. وخلايا الأرقام والمراجع اتجاهها `ltr` لأن الرقم يُقرأ
   من اليسار، فانقلب حدّها وضاعت ثلاثة فواصل: بين القيد والنوع، وبين
   مراجع البوابة والوسيلة، وبين الرصيد والمستند.
   والعلاج أن يكون الحدّ **يساراً صريحاً** لكل خليّة مهما كان اتجاه نصّها —
   فالجدول كلّه من يمين إلى يسار، ولا يغيّر ذلك اتجاهُ رقمٍ داخل خليّة.
   ────────────────────────────────────────────────────────────────── */
table.tbl.gl th,table.tbl.gl td{
  border-inline-start:0 !important; border-inline-end:0 !important;
  border-right:0 !important;
  border-left:1px solid var(--line-2) !important}
table.tbl.gl th:last-child,table.tbl.gl td:last-child{border-left:0 !important}
table.tbl.gl thead th{border-left:1px solid var(--n2) !important;
  border-bottom:2px solid var(--n3) !important}
table.tbl.gl thead th:last-child{border-left:0 !important}
table.tbl.gl tbody td{border-bottom:1px solid var(--line) !important}
table.tbl.gl tr.gl-open td,table.tbl.gl tr.glhead td{border-left:0 !important}

/* البيان في وسط عموده — بأمر ماجد. النصّ الطويل يُقرأ من حافةٍ ثابتة
   عادةً، لكن الشاشة له لا لي، والتوسيط يجعل الأعمدة كلها على نسقٍ واحد. */
table.tbl.gl thead th:nth-child(8),
table.tbl.gl tbody td.gl-memo{text-align:center !important}
table.tbl.gl tbody td.gl-memo{padding-inline:12px}

/* المرجع القابل للنقر — يبدو باباً لا نصّاً */
.reflink{cursor:pointer;color:var(--brand-blue) !important;font-weight:600;
  text-decoration:underline;text-decoration-style:dotted;
  text-underline-offset:3px;transition:color .12s}
.reflink:hover{color:var(--brand-blue-hover) !important;
  text-decoration-style:solid;background:var(--brand-blue-tint);border-radius:4px}
.sheet.wide{max-width:1180px}

/* ══════════════════════════════════════════════════════════════════
   نافذة طلبات الإيداع — جدولٌ نظيف لا يرث زخرفة الكشف
   ══════════════════════════════════════════════════════════════════
   ورث الجدولُ داخل النافذة أنماطَ الكشف كلها — الأشرطة الجانبية، وتظليل
   الصفوف، والتوسيط القسري — فبدت الصفوف باهتةً متداخلة. النافذة سياقٌ
   آخر: صفوفٌ متساوية، وحدودٌ واضحة، وأرقامٌ إلى اليسار.
   ────────────────────────────────────────────────────────────────── */
#layers .sheet table.tbl.gl tbody tr>td:first-child{box-shadow:none !important}
#layers .sheet table.tbl.gl tbody tr{background:transparent !important}
#layers .sheet table.tbl.gl tbody tr:nth-child(even){background:var(--gl-stripe) !important}
#layers .sheet table.tbl.gl tbody tr:hover{background:var(--brand-blue-tint) !important}
#layers .sheet table.tbl.gl td,#layers .sheet table.tbl.gl th{
  text-align:center !important;padding:7px 9px;white-space:nowrap}
#layers .sheet table.tbl.gl td.n,#layers .sheet table.tbl.gl th.n,
#layers .sheet table.tbl.gl td.dr,#layers .sheet table.tbl.gl td.cr,
#layers .sheet table.tbl.gl td.run{text-align:left !important;padding-inline-end:12px}
/* الفاتورة بلا قيد: تحذيرٌ بحدٍّ لا بأرضيةٍ تُعمي النصّ */
#layers .sheet table.tbl.gl tr.k-refund{background:transparent !important}
#layers .sheet table.tbl.gl tr.k-refund td{color:var(--gl-refund) !important;
  border-bottom:1px solid var(--gl-refund) !important}
#layers .sheet .sheet,#layers .sheet .card{box-shadow:none}
#layers .sheet .tbl-wrap{max-height:62vh;overflow:auto}

/* بطاقة الدفعة: مفتاحٌ وقيمة في سطرٍ واحد */
.kvrow{display:flex;gap:12px;align-items:baseline;padding:7px 0;
  border-bottom:1px solid var(--line)}
.kvrow:last-child{border-bottom:0}
.kvk{min-width:120px;color:var(--text-3);font-size:12.5px}
.kvv{flex:1;color:var(--text);font-size:13.5px}
.kvv.b{font-weight:700}
.kvv.mono{font-family:'Space Grotesk',ui-monospace,monospace;direction:ltr;text-align:right}

/* ══════════════════════════════════════════════════════════════════
   جدول طلبات الإيداع — أنماطُه وحده
   ══════════════════════════════════════════════════════════════════
   كان يحمل صنف `gl` فيرث كل زخرفة الكشف: الأشرطة الجانبية، والتظليل
   المتناوب، والتوسيط القسري، وألوان الأنواع — فبدت صفوفه متفاوتةً باهتة
   كأن نصفها معطّل. النافذة سياقٌ آخر لا امتدادٌ للكشف، فلها أنماطها.
   ────────────────────────────────────────────────────────────────── */
table.tbl.deporders{width:100%;border-collapse:collapse;font-size:13px}
table.tbl.deporders th,table.tbl.deporders td{
  padding:9px 10px;text-align:center;white-space:nowrap;
  border-bottom:1px solid var(--line);
  border-left:1px solid var(--line-2);color:var(--text)}
table.tbl.deporders th:last-child,table.tbl.deporders td:last-child{border-left:0}
table.tbl.deporders thead th{position:sticky;top:0;z-index:2;
  background:var(--brand-blue-tint);color:var(--text-2);
  font-weight:600;font-size:11.5px;letter-spacing:.3px;
  border-bottom:2px solid var(--n3)}
table.tbl.deporders tbody tr:nth-child(even){background:var(--n0)}
table.tbl.deporders tbody tr:hover{background:var(--brand-blue-tint)}
table.tbl.deporders td.n,table.tbl.deporders th.n,
table.tbl.deporders td.dr,table.tbl.deporders td.cr,table.tbl.deporders td.run{
  text-align:left;padding-inline-end:14px;
  font-family:'Space Grotesk',ui-monospace,monospace;
  font-variant-numeric:tabular-nums;color:var(--text)}
table.tbl.deporders td.dr{color:var(--gl-coll);font-weight:600}
table.tbl.deporders td.cr{color:var(--gl-fee)}
table.tbl.deporders td.run{font-weight:700}
table.tbl.deporders td.b,table.tbl.deporders td.n.b{font-weight:700}
/* فاتورة بلا قيد: صفٌّ محذَّر بحدٍّ وأرضيةٍ خفيفة — يُقرأ ولا يُعمى */
table.tbl.deporders tr.k-refund td{
  background:color-mix(in srgb,var(--gl-refund) 7%,transparent);
  color:var(--gl-refund);font-weight:600}
table.tbl.deporders .gltag{font-size:10.5px;padding:2px 7px}
table.tbl.deporders .mono{font-family:'Space Grotesk',ui-monospace,monospace;font-size:11.5px}

/* ══════════════════════════════════════════════════════════════════
   النافذة أرضيتها صلبة — والصفوف كلها
   ══════════════════════════════════════════════════════════════════
   بدت الصفوف الفردية باهتةً كأنها معطّلة. والسبب ليس لوناً بل **غيابه**:
   الصفوف الزوجية أُعطيت أرضية والفردية تُركت شفافة، والنافذة تعلو ستارةً
   داكنة — فظهرت الستارة خلال الصفوف الشفافة فبدا نصّها باهتاً.
   العلاج: أرضيةٌ صلبة للنافذة ولكل صفٍّ فيها.
   ────────────────────────────────────────────────────────────────── */
#layers .sheet,#layers .modal{background:var(--surface) !important}
table.tbl.deporders{background:var(--surface)}
table.tbl.deporders tbody tr{background:var(--surface)}
table.tbl.deporders tbody tr:nth-child(even){background:var(--n0)}
table.tbl.deporders tbody tr:hover{background:var(--brand-blue-tint)}
table.tbl.deporders thead th{background:var(--brand-blue-tint)}

/* ══════════════════════════════════════════════════════════════════
   زرّ «جديد» وقائمته — باب واحد لا يتبدّل
   ══════════════════════════════════════════════════════════════════ */
#pageActions{position:relative}
.newbtn{font-weight:600}
.newmenu{position:absolute;top:calc(100% + 8px);inset-inline-start:0;z-index:60;
  min-width:320px;background:var(--surface);border:1px solid var(--line-2);
  border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.16);overflow:hidden;
  animation:nmIn .12s ease-out}
@keyframes nmIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.newmenu-item{display:flex;gap:11px;align-items:flex-start;width:100%;
  padding:11px 14px;background:transparent;border:0;cursor:pointer;
  text-align:start;border-bottom:1px solid var(--line);font:inherit}
.newmenu-item:last-child{border-bottom:0}
.newmenu-item:hover{background:var(--brand-blue-tint)}
.nm-ico{width:26px;height:26px;flex:none;display:grid;place-items:center;
  border-radius:7px;background:var(--brand-blue-tint);color:var(--brand-blue);
  font-size:14px;font-weight:700}
.nm-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.nm-txt b{font-size:13.5px;font-weight:600;color:var(--text)}
.nm-hint{font-size:11.5px;color:var(--text-3);line-height:1.45}

/* ══════════════════════════════════════════════════════════════════
   الخطوة التالية وبطاقات الإجراء
   ══════════════════════════════════════════════════════════════════
   الشاشة الأولى كانت تقول «كم» ولا تقول «ماذا الآن». هذان الجزءان
   يجيبان السؤال الثاني: سطرٌ يسمّي أعجل ما ينتظر، وبطاقاتٌ ثابتة الموضع
   يبدأ منها كل شيء.
   ────────────────────────────────────────────────────────────────── */
.nextstep{display:flex;align-items:center;gap:14px;margin-bottom:14px;
  padding:13px 18px;border-radius:12px;
  background:color-mix(in srgb,var(--warn) 10%,var(--surface));
  border:1px solid color-mix(in srgb,var(--warn) 34%,transparent)}
.nextstep.clear{background:color-mix(in srgb,var(--pos) 8%,var(--surface));
  border-color:color-mix(in srgb,var(--pos) 30%,transparent)}
.nextstep .ns-body{flex:1;min-width:0;font-size:13.5px;line-height:1.6;color:var(--text)}
.nextstep .ns-body b{font-weight:700}
.nextstep .muted{color:var(--text-3);font-size:12.5px}

.actgrid{display:grid;gap:11px;margin-bottom:18px;
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.actcard{display:flex;gap:12px;align-items:flex-start;text-align:start;
  padding:14px 15px;border-radius:12px;cursor:pointer;font:inherit;
  background:var(--surface);border:1px solid var(--line-2);
  transition:border-color .14s,box-shadow .14s,transform .08s;position:relative}
.actcard:hover{border-color:var(--brand-blue);
  box-shadow:0 4px 14px color-mix(in srgb,var(--brand-blue) 16%,transparent)}
.actcard:active{transform:translateY(1px)}
.actcard.warn{border-color:color-mix(in srgb,var(--warn) 52%,transparent);
  background:color-mix(in srgb,var(--warn) 5%,var(--surface))}
.ac-ico{width:34px;height:34px;flex:none;display:grid;place-items:center;
  border-radius:9px;background:var(--brand-blue-tint);color:var(--brand-blue);
  font-size:16px;font-weight:700}
.actcard.warn .ac-ico{background:color-mix(in srgb,var(--warn) 18%,transparent);color:#8A5B00}
.ac-txt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.ac-txt b{font-size:14px;font-weight:600;color:var(--text);letter-spacing:-.2px}
.ac-hint{font-size:11.5px;color:var(--text-3);line-height:1.5}
.ac-badge{flex:none;align-self:center;font-size:11px;font-weight:700;
  padding:3px 9px;border-radius:999px;
  background:var(--brand-blue);color:#fff;white-space:nowrap}
.actcard.warn .ac-badge{background:var(--warn);color:#3A2600}
@media (max-width:720px){.actgrid{grid-template-columns:1fr}}

/* سبب تعطيل «ترحيل القيد» مكتوبٌ بجانبه — لا زرٌّ معطَّل صامت */
.jf-why{font-size:12.5px;color:var(--warn);font-weight:600;margin-inline-end:12px}
.jf-why.ok{color:var(--pos)}
/* ذيل جدول طلبات الإيداع */
table.tbl.deporders tfoot td{background:var(--brand-blue-tint);font-weight:700;
  border-top:2px solid var(--n3);font-size:13px}

/* رقم الحساب واسمه بابٌ إلى كشفه */
.acctlink{cursor:pointer;transition:color .12s}
tr.acct-row:hover .acctlink{color:var(--brand-blue)}
tr.acct-row:hover{background:var(--brand-blue-tint)}
.acctlink:hover{text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
/* زرّ رفع المستند في مكان النقص */
.upbtn{opacity:.45;font-size:11px !important;padding:2px 8px !important;transition:opacity .12s}
tr:hover .upbtn{opacity:1}
.upbtn:hover{color:var(--brand-blue);border-color:var(--brand-blue)}

/* ══════════════════════════════════════════════════════════════════
   الوسوم — كلٌّ بلونه، لا بدرجاتٍ متقاربة
   ══════════════════════════════════════════════════════════════════
   كانت «تحصيل» و«عمولة» و«ضريبة» بأخضرٍ وبرتقاليٍّ متجاورين فتُقرأ سواءً،
   ومن يمرّ بعينه على أربعين صفّاً لا يفرّق. الآن ستّة ألوان متباعدة على
   عجلة اللون، وكلٌّ بحدٍّ يفصله عن أرضيته.
   ────────────────────────────────────────────────────────────────── */
table.tbl.gl .gltag{font-size:10.5px;font-weight:700;padding:2.5px 9px;
  border-radius:5px;letter-spacing:.2px;border:1px solid transparent}
table.tbl.gl .gltag.coll{background:#D7F5E6;color:#06603F;border-color:#8FDCBB}
table.tbl.gl .gltag.refund{background:#FDE0DC;color:#8E1B10;border-color:#F2A9A0}
table.tbl.gl .gltag.fee{background:#FDEBC8;color:#7A4B00;border-color:#EFC97E}
table.tbl.gl .gltag.vat{background:#EFE3FA;color:#4A1D7A;border-color:#C9A8E8}
table.tbl.gl .gltag.move{background:#DDE7FA;color:#123A8C;border-color:#A3BEEA}
table.tbl.gl .gltag.dep{background:#0E6E52;color:#FFFFFF;border-color:#0A5340;
  font-size:11px;padding:3.5px 12px}
table.tbl.gl .gltag.round{background:var(--n1);color:var(--n4);border-color:var(--n2)}
/* الشريط الجانبي يتبع اللون نفسه */
table.tbl.gl tr.k-coll  >td:first-child{box-shadow:inset -3px 0 0 0 #0E9B66}
table.tbl.gl tr.k-refund>td:first-child{box-shadow:inset -3px 0 0 0 #C42A1B}
table.tbl.gl tr.k-fee   >td:first-child{box-shadow:inset -3px 0 0 0 #C98A14}
table.tbl.gl tr.k-vat   >td:first-child{box-shadow:inset -3px 0 0 0 #6E3AAF}
table.tbl.gl tr.k-move  >td:first-child{box-shadow:inset -3px 0 0 0 #2255C4}
table.tbl.gl tr.k-dep   >td:first-child{box-shadow:inset -5px 0 0 0 #0E6E52}
/* والأرقام بلون نوعها */
table.tbl.gl tr.k-vat td.cr,table.tbl.gl tr.k-vat td.dr{color:#6E3AAF}
table.tbl.gl tr.k-move td.dr,table.tbl.gl tr.k-move td.cr{color:#2255C4}

/* خانة مستندٍ ناقص — تُقرأ نقصاً لا فراغاً */
.tbl td.missing { background: color-mix(in srgb, var(--warn) 8%, transparent); }
:root:not([data-theme="light"]) .tbl td.missing,
:root[data-theme="dark"] .tbl td.missing { background: color-mix(in srgb, var(--warn) 14%, transparent); }


/* «صادر بنكي» لونه لا لون «مرتجع» — القارئ كان يخلط الصرف بالاسترجاع */
table.tbl.gl .gltag.bankout{background:#E7E1F7;color:#3B2A6B;border-color:#C6B9EA}
table.tbl.gl tr.k-bankout>td:first-child{box-shadow:inset -3px 0 0 0 #6A4FB0}
table.tbl.gl tr.k-bankout td.dr,table.tbl.gl tr.k-bankout td.cr{color:#4A3585}
:root:not([data-theme="light"]) table.tbl.gl .gltag.bankout,
:root[data-theme="dark"] table.tbl.gl .gltag.bankout{
  background:#2C2444;color:#CDBEF5;border-color:#453A6B}
:root:not([data-theme="light"]) table.tbl.gl tr.k-bankout td.dr,
:root:not([data-theme="light"]) table.tbl.gl tr.k-bankout td.cr,
:root[data-theme="dark"] table.tbl.gl tr.k-bankout td.dr,
:root[data-theme="dark"] table.tbl.gl tr.k-bankout td.cr{color:#BCA9EE}

/* رقائق الخلاصة: الضريبة بنفسجية والعمولة ذهبية — كانتا بنّيتين معاً */
table.tbl.gl .glchip.vat{color:#4A1D7A}
table.tbl.gl .glchip.fee{color:#8A5B00}

/* قائمة «＋ جديد» كانت تخرج ~١٠٠px عن حدّ الشاشة في RTL */
.newmenu{inset-inline-start:auto;inset-inline-end:0;max-width:min(320px,calc(100vw - 24px))}

/* وسم «مقابل» كان ملتصقاً باسم الحساب */
.acct-row .tag{margin-inline-start:6px}

/* سبب تعطيل زرّ الترحيل */
.jf-why{font-size:12px;color:var(--warn)}
.jf-why.ok{color:var(--pos)}

/* تبويبات العلامات — تفصل تقرير كل علامة عن غيرها بضغطة */
.brandtabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.btab{padding:8px 18px;border:1px solid var(--line-2);border-radius:8px;
  background:var(--surface);color:var(--ink-2);font:inherit;font-size:13px;
  font-weight:600;cursor:pointer;transition:background .12s,color .12s}
.btab:hover{background:var(--brand-blue-tint)}
.btab.on{background:var(--brand-blue);color:#fff;border-color:var(--brand-blue)}


/* رقم الحجز يفتح اللوحة، و⊙ بجانبه يفتح دفعته في ماي فاتورة */
.ordercell{display:inline-flex;align-items:center;gap:6px;direction:ltr}
.ordercell a.reflink{text-decoration:none}
.paylink{cursor:pointer;color:var(--ink-3);font-size:12px;line-height:1;
  opacity:.55;transition:opacity .12s,color .12s}
.paylink:hover{opacity:1;color:var(--brand-blue)}

/* ══ صفحة الدخول — أرقى ═══════════════════════════════════════════════ */
body.locked { overflow: hidden; }

#loginPage {
  position: fixed; inset: 0; z-index: 2000;
  display: grid; grid-template-columns: 1.15fr .85fr;
  background: var(--bg);
}

/* ── اللوح: أخضرٌ عميق، هالةٌ واحدة، شبكةٌ خفيفة ── */
.lg-art {
  position: relative; overflow: hidden;
  background: #062E26;
  color: #E8F5F0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 46px 50px;
}
.lg-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(58% 46% at 22% 16%, rgba(31,168,134,.55) 0%, transparent 68%),
    radial-gradient(46% 40% at 86% 92%, rgba(201,169,78,.22) 0%, transparent 70%);
}
.lg-grid {
  position: absolute; inset: -1px; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(78% 66% at 26% 22%, #000 22%, transparent 100%);
  -webkit-mask-image: radial-gradient(78% 66% at 26% 22%, #000 22%, transparent 100%);
}
.lg-art-in { position: relative; margin: auto 0; max-width: 500px; }

.lg-brandline {
  font-size: 11.5px; letter-spacing: .16em;
  color: rgba(232,245,240,.6); margin-bottom: 18px;
}
.lg-hero {
  font-size: clamp(34px, 4.4vw, 54px); font-weight: 600;
  line-height: 1.14; letter-spacing: -.035em; margin-bottom: 28px;
  text-wrap: balance;
}
.lg-hero::after {
  content: ""; display: block; width: 54px; height: 3px;
  background: #C9A94E; border-radius: 3px; margin-top: 20px;
}

.lg-eq {
  display: inline-flex; align-items: center; gap: 16px;
  border: 1px solid rgba(255,255,255,.16); border-radius: 10px;
  padding: 12px 22px; background: rgba(255,255,255,.045);
  font-size: 21px; font-weight: 600;
}
.lg-eq-s {
  font-family: "Space Grotesk", ui-monospace, monospace;
  font-size: 23px; color: #7FD6BC; font-weight: 400;
}

.lg-rules { margin-top: 30px; display: flex; flex-direction: column; }
.lg-rule {
  display: flex; align-items: baseline; gap: 16px;
  padding: 13px 2px; border-top: 1px solid rgba(255,255,255,.11);
  font-size: 13.5px; color: rgba(232,245,240,.78); line-height: 1.6;
}
.lg-rule:last-child { border-bottom: 1px solid rgba(255,255,255,.11); }
.lg-rule b {
  font-family: "Space Grotesk", ui-monospace, monospace;
  font-size: 14px; color: #C9A94E; font-weight: 600;
  min-width: 44px; flex: none; direction: ltr; text-align: right;
}
.lg-art-foot {
  position: relative; display: flex; align-items: baseline; gap: 10px;
  font-size: 13px; color: rgba(232,245,240,.5);
}
.lg-art-foot span:last-child {
  font-family: "Space Grotesk", monospace; font-size: 10.5px; letter-spacing: .18em;
}

/* ── النموذج ── */
.lg-form {
  display: flex; align-items: center; justify-content: center;
  padding: 40px 30px; background: var(--bg);
}
.lg-box { width: 100%; max-width: 350px; }
.lg-mark { display: block; margin-bottom: 20px; }
.lg-box h1 {
  margin: 0; font-size: 25px; font-weight: 600;
  letter-spacing: -.025em; color: var(--text);
}
.lg-tag { margin: 6px 0 26px; font-size: 13.5px; color: var(--text-3); line-height: 1.6; }

.lg-lbl {
  display: block; font-size: 12.5px; font-weight: 600;
  color: var(--text-2); margin-bottom: 7px;
}
#loginPage input {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--line-2); border-radius: 9px;
  background: var(--surface); color: var(--text);
  font: inherit; font-size: 14.5px;
  transition: border-color .14s, box-shadow .14s;
}
#loginPage #lgToken {
  padding-inline-end: 44px; direction: ltr; text-align: left; letter-spacing: .1em;
}
#loginPage input:focus {
  outline: 0; border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-blue) 15%, transparent);
}
.lg-field { position: relative; }
#loginPage input.shake { animation: lgShake .4s ease; border-color: var(--neg); }
@keyframes lgShake {
  0%,100% { transform: translateX(0); }
  22% { transform: translateX(-6px); }
  46% { transform: translateX(5px); }
  70% { transform: translateX(-3px); }
}
@media (prefers-reduced-motion: reduce) { #loginPage input.shake { animation: none; } }
.lg-eye {
  position: absolute; inset-inline-end: 5px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border: 0; border-radius: 7px;
  background: transparent; color: var(--text-3);
  cursor: pointer; font-size: 17px; line-height: 1;
}
.lg-eye:hover { background: var(--brand-blue-tint); color: var(--brand-blue); }

.lg-msg {
  margin-top: 12px; padding: 11px 13px; border-radius: 8px;
  font-size: 13px; line-height: 1.55;
  display: flex; flex-direction: column; gap: 3px;
}
.lg-msg[hidden] { display: none !important; }
.lg-msg span { font-size: 12px; opacity: .85; }
.lg-msg.bad {
  background: color-mix(in srgb, var(--neg) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--neg) 40%, transparent);
  color: var(--neg);
}
.lg-msg.good {
  background: color-mix(in srgb, var(--pos) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--pos) 40%, transparent);
  color: var(--pos);
}
.lg-msg.good span { color: var(--text-2); }

.lg-btn {
  width: 100%; margin-top: 18px; padding: 13px 16px;
  border: 0; border-radius: 9px;
  background: var(--brand-blue); color: #fff;
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  transition: filter .14s, opacity .14s;
}
.lg-btn:hover { filter: brightness(1.08); }
.lg-btn:disabled { opacity: .6; cursor: default; }
.lg-btn:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }

.lg-fine {
  margin-top: 24px; padding-top: 15px; border-top: 1px solid var(--line-2);
  display: flex; flex-direction: column; gap: 6px;
  font-size: 11.5px; color: var(--text-3); line-height: 1.6;
}
.lg-ver { font-family: "Space Grotesk", ui-monospace, monospace; opacity: .7; }

@media (max-width: 940px) {
  #loginPage { grid-template-columns: 1fr; }
  .lg-art { display: none; }
}

/* سبب تعطيل زرّ الحفظ في نموذج الشركة */
.hint.bad { color: var(--neg); }
#signOutBtn:hover { color: var(--neg); border-color: var(--neg); }

/* ══ تحريك الأعمدة ═════════════════════════════════════════════════════
   `table-layout:fixed` هو ما يجعل عرض العمود قراراً يُطاع. ويُطبَّق بعد
   قياس العرض التلقائي وتثبيته في `<colgroup>`، فلا يتغيّر الشكل. */
table.tbl.colr { table-layout: fixed; }
/* العمود الموسَّع يجب أن يُظهر ما فيه — فالنصّ يلفّ ولا يُقطع بنقاط */
table.tbl.colr td { white-space: normal; overflow-wrap: anywhere; }
table.tbl.colr td.n, table.tbl.colr th.n,
table.tbl.colr td.nowrap, table.tbl.colr td.mono,
table.tbl.colr td.d, table.tbl.colr td.code { white-space: nowrap; }
/* القيود التي كانت تحدّ عمود البيان تُرفع: العرض صار بيد القارئ */
table.tbl.colr td.gl-memo { max-width: none; min-width: 0; white-space: normal; }
table.tbl.colr td .gltag { max-width: none; }
/* مقبضٌ أعرض ليُصاد بالفأرة، ويبقى ظاهراً كي يُعرف أنه يُسحب */
table.tbl.colr thead th { position: relative; }
table.tbl.colr .colgrip { inset-inline-end: -6px; width: 13px; cursor: col-resize; }
table.tbl.colr .colgrip::after { background: var(--line-2); }
table.tbl.colr .colgrip:hover::after { background: var(--brand-blue); width: 3px; height: 100%; }
table.tbl.colr.resizing { user-select: none; }

/* من الداخل — أسفل القائمة */
#whoAmI { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
#whoAmI b { font-size: 12px; color: var(--text); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#whoAmI small { font-size: 10.5px; color: var(--text-3); }

/* المعالج المُوجَّه */
.wz-rail { display: flex; gap: 0; padding: 0 20px; border-bottom: 1px solid var(--line-2);
  overflow-x: auto; }
.wz-step { display: flex; align-items: center; gap: 9px; padding: 13px 16px 12px;
  border-bottom: 2px solid transparent; white-space: nowrap; color: var(--text-3); }
.wz-step b { width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 11.5px; font-weight: 700;
  border: 1px solid var(--line-2); color: var(--text-3); }
.wz-step span { display: block; font-size: 13px; font-weight: 600; }
.wz-step small { display: block; font-size: 10.5px; color: var(--text-3); }
.wz-step.on { color: var(--text); border-bottom-color: var(--brand-blue); }
.wz-step.on b { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }
.wz-step.done b { background: var(--pos); border-color: var(--pos); color: #fff; }
.wz-bd { min-height: 260px; }

/* شريط «لازم يرفق إيصال» — فوق الشاشة لا في زاوية */
.rcpt-bar {
  display: flex; align-items: center; gap: 13px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 13px 16px; border-radius: 10px;
  background: color-mix(in srgb, var(--warn) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
  border-inline-start: 4px solid var(--warn);
}
.rcpt-ico { font-size: 19px; color: var(--warn); line-height: 1; flex: none; }
.rcpt-txt { display: flex; flex-direction: column; gap: 2px; min-width: 240px; }
.rcpt-txt b { font-size: 14px; color: var(--text); }
.rcpt-txt span { font-size: 12.5px; color: var(--text-2); line-height: 1.55; }

/* الشريط الأفقي ظاهرٌ دائماً في حاويات الجداول — لا يُخفى حتى يُلمس */
.tbl-wrap{scrollbar-width:auto !important}
.tbl-wrap::-webkit-scrollbar{height:14px;width:14px}
.tbl-wrap::-webkit-scrollbar-track{background:var(--n1);border-radius:8px}
.tbl-wrap::-webkit-scrollbar-thumb{background:var(--n3);border-radius:8px;
  border:3px solid var(--n1)}
.tbl-wrap::-webkit-scrollbar-thumb:hover{background:var(--brand-blue)}

/* **البطاقات كانت تتكدّس عمودياً بعرض الشاشة كاملاً.** `.kpi` العامة
   تحمل `grid-column: span 3` فتغلب أعمدة `.kpi-strip`، فتصير كل بطاقة
   صفاً وتدفع الجدول أسفل الشاشة في كل شاشة تقارير. */
.kpi-strip { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important; }
.kpi-strip > .kpi { grid-column: auto !important; }

/* مقبض العمود على الحافة الصحيحة مهما كان اتجاه الخليّة — `inset-inline`
   ينقلب داخل `th` اتجاهه LTR (أعمدة الأرقام)، فيتراكب مقبضان على حدٍّ
   ويبقى حدٌّ بلا مقبض. الحافة تُثبَّت بالفيزيائي. */
table.tbl.colr thead th .colgrip { inset-inline-end: auto; left: -6px; right: auto; }

/* ══ شريط التمرير الأفقي فوق الجدول ════════════════════════════════════
   الحاوية طويلة فشريطها السفلي خارج المنظور، والصفحة عربية فالفيض يذهب
   يساراً حيث لا يتوقّعه القارئ. فيُضاف شريطٌ عند الرأس. */
.hsc {
  overflow-x: auto; overflow-y: hidden;
  height: 15px; margin-bottom: 3px;
  border-radius: 8px; background: var(--n1);
  scrollbar-width: auto;
}
.hsc-in { height: 1px; }
.hsc::-webkit-scrollbar { height: 14px; }
.hsc::-webkit-scrollbar-track { background: var(--n1); border-radius: 8px; }
.hsc::-webkit-scrollbar-thumb {
  background: var(--n3); border-radius: 8px; border: 3px solid var(--n1);
}
.hsc::-webkit-scrollbar-thumb:hover { background: var(--brand-blue); }

/* **الجدول ينزل كامل الشاشة.** ماجد: «خله ينزل معي تحتحت كامل الشاشة».
   ٧٦٪ كانت تترك فراغاً أسفل الشاشة وتُقصّر الجدول بلا داعٍ. والحدّ الآن
   بالبكسل من أعلى الصفحة، فيبقى شريطُ الخلاصة تحته مرئياً على أي مقاس. */
@media (max-height: 720px) { .tbl-wrap.tall { max-height: calc(100vh - 150px); } }

/* رقاقةُ «بلا تسوية بعد» — ليست عمولةً ناقصة، بل مالٌ ينتظر دفعته.
   لونٌ محايدٌ مائلٌ للرمادي: لا أخضر التحصيل ولا أحمر النقص. */
.glchip.pend {
  background: color-mix(in oklab, var(--n2) 70%, transparent);
  color: var(--ink2); border: 1px dashed var(--n3);
}
.glchip.pend b { color: var(--ink); }

/* ══════════════════════════════════════════════════════════════════════
   الشاشة الواسعة — «الشاشة ضيقة مرّة، وسّعها وغيّر شكلها»
   ══════════════════════════════════════════════════════════════════════
   ثلاثة تأكل العرض: شريطٌ جانبيٌّ ثابتٌ بـ٢٣٦px، وحشوةُ صفحةٍ مكرّرة،
   وأعمدةٌ تحمل مراجعَ بوابةٍ طويلةً فتُزاح عنها بقيةُ الجدول. والعين لا
   تشبع من جدولٍ بلا إيقاع: صفوفٌ متماثلةٌ ورصيدٌ لا يُتابَع بالنظر.
   ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ */

/* ① الشريط الجانبي يُطوى إلى أيقونات — ‎١٧٦px تُعاد للجدول */
body.navmin { --nav: 62px; }
body.navmin .nav { padding: 14px 7px; align-items: stretch; }
body.navmin .nav .logo { padding: 2px 0 12px; justify-content: center; }
body.navmin .nav .logo img { width: 34px; height: 34px; }
body.navmin .nav .logo .tx,
body.navmin .nav .sect,
body.navmin .nav a.item span:not(.ico):not(.badge),
body.navmin .nav .foot > *:not(.keep) { display: none; }
body.navmin .nav a.item { justify-content: center; padding: 9px 0; gap: 0; }
body.navmin .nav a.item .ico { width: auto; font-size: 16px; }
body.navmin .nav a.item .badge { display: none; }
body.navmin .nav .foot { border-top: 1px solid var(--line); padding-top: 10px; }

.navtog {
  appearance: none; border: 1px solid var(--line); background: var(--surface);
  color: var(--text-2); width: 30px; height: 30px; border-radius: 8px;
  cursor: pointer; font-size: 14px; line-height: 1; flex: 0 0 auto;
  transition: background .13s, color .13s, border-color .13s;
}
.navtog:hover { background: var(--raised); color: var(--text); border-color: var(--line-2); }

/* ② الصفحة تلتصق بالحافّة على الشاشات العريضة */
@media (min-width: 1500px) { #page { padding: 12px 16px 16px; } }
@media (min-width: 1900px) { #page { padding: 12px 22px 18px; } }

/* ③ الأعمدة تُعاد موازنتها: المرجعُ الطويل يُقصَر والبيانُ يأخذ الفائض.
   المرجع كاملٌ في `title` — فلا معلومةَ تُفقَد، إنما تُطوى. */
.tbl.dense td.gl-refs, .tbl.dense th.gl-refs { max-width: 128px; }
.tbl.dense td.gl-refs .reflink,
.tbl.dense td.gl-refs > div {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.tbl.dense td.gl-memo { min-width: 260px; }

/* ④ الوسمُ لا يُكسَر. «تحصيل» كانت تُقرأ «تحصي / ل» في سطرين. */
.gltag { white-space: nowrap; }
.tbl td .gltag { vertical-align: middle; }

/* ⑤ إيقاعُ الصفوف — تظليلٌ متبادلٌ خفيفٌ جداً، وخطوطٌ رأسيةٌ لا وجود لها */
.tbl.dense tbody tr:nth-child(even) > td {
  background: color-mix(in oklab, var(--raised) 46%, transparent);
}
.tbl.dense tbody tr:hover > td {
  background: color-mix(in oklab, var(--brand-blue-tint) 55%, transparent);
}

/* ⑥ عمودُ الرصيد يُتابَع بالنظر — أرقامٌ جدوليةٌ على أرضيةٍ مميَّزة */
.tbl.dense td.n.bal, .tbl.dense th.n.bal {
  background: color-mix(in oklab, var(--raised-2) 62%, transparent);
  font-weight: 600; color: var(--text);
  border-inline-start: 1px solid var(--line);
}
.tbl.dense tbody tr:hover > td.n.bal {
  background: color-mix(in oklab, var(--brand-blue-tint) 72%, transparent);
}

/* ⑦ اليومُ يُقرأ كتلةً — خطٌّ أمتنُ عند تغيّر التاريخ */
.tbl.dense tbody tr.daybreak > td { border-top: 1px solid var(--line-2); }

/* ⑧ مجموعُ الجدول يلتصق بأسفل الحاوية فلا يُفقَد في التمرير */
.tbl-wrap.tall tfoot td {
  position: sticky; bottom: 0; z-index: 3;
  background: var(--raised-2);
  box-shadow: 0 -1px 0 var(--line-2);
}

/* الجدولُ صار يملأ الحاوية بالضبط، فالخليةُ لا تدفع عرضاً — إنما تنكسر
   داخل عمودها أو تُقصّ بنقاطٍ ثلاث تُنبئ أن ثمّة بقيّةً في `title`.
   والحشوةُ تُخفَّف: أربعُ مئة صفٍّ × نقطتين = ثمانُ مئة نقطةِ ارتفاعٍ. */
.tbl.colr.dense td, .tbl.colr.dense th { padding: 6px 8px; }
.tbl.colr td.nowrap, .tbl.colr td.mono, .tbl.colr th.nowrap {
  overflow: hidden; text-overflow: ellipsis;
}
.tbl.colr td { overflow-wrap: anywhere; }
/* رقمُ القيد صار رقماً مجرّداً — يُوسَّط ليُقرأ عموداً */
.tbl.colr td.jlink.mono { letter-spacing: .2px; }

/* ══ الإيداع لونٌ قائمٌ بذاته ═══════════════════════════════════════════
   وسمُ «إيداع» كان بلا تنسيقٍ خاصٍّ فيورَث الرمادي — وهو أهمُّ صفٍّ في
   الكشف: يُقفل عشراتَ الطلبات ويُغيّر رصيدَ البنك. فيُملأ لا يُظلَّل. */
.gltag.dep {
  background: var(--gl-dep, #0F5C4A); color: #fff;
  font-weight: 800; padding: 2px 8px; letter-spacing: .2px;
}
.gltag.bankout { background: var(--brand-blue-tint); color: var(--brand-blue); }
.gltag.round { background: var(--n2); color: var(--text-2); }

/* بطاقةُ «نزل هنا» — طرفُ الخيط الذي يبحث عنه القارئ، فتُمَيَّز */
.card.landed { border-color: color-mix(in srgb, var(--gl-dep, #0F5C4A) 42%, var(--line)); }
.card.landed .hd h2 { color: var(--gl-dep, #0F5C4A); }
.card.landed .hd {
  background: color-mix(in srgb, var(--gl-dep, #0F5C4A) 7%, transparent);
}

/* جدولُ طلبات الإيداع — أرقامٌ جدوليةٌ وصفوفٌ ذاتُ إيقاع، كدفتر الأستاذ */
table.tbl.deporders tbody tr:nth-child(even) > td {
  background: color-mix(in oklab, var(--raised) 46%, transparent);
}
table.tbl.deporders tbody tr:hover > td {
  background: color-mix(in oklab, var(--brand-blue-tint) 55%, transparent);
}
table.tbl.deporders td.n { font-variant-numeric: tabular-nums; }
table.tbl.deporders tfoot td { position: sticky; bottom: 0; }

/* ══ الإشعارات ═════════════════════════════════════════════════════════
   اللافتةُ فوق كل شاشةٍ تُقرأ مرّةً ثم تُهمَل، وتدفع الجدول أسفل الطيّة.
   فتُجمَع في جرسٍ يحمل عددها، والتفصيل عند الطلب. */
.notifbtn { position: relative; width: 34px; height: 30px; }
.notifbtn .nb {
  position: absolute; top: -5px; inset-inline-start: -5px;
  min-width: 17px; height: 17px; line-height: 17px; border-radius: 20px;
  background: var(--neg); color: #fff; font-size: 10.5px; font-weight: 800;
  padding: 0 4px; box-shadow: 0 0 0 2px var(--surface);
}
.notifpanel {
  position: fixed; top: 58px; inset-inline-start: 16px; z-index: 200;
  width: min(440px, calc(100vw - 32px));
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: 12px; box-shadow: 0 18px 48px rgba(0,0,0,.22);
  overflow: hidden;
}
.notifpanel .nhd {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border-bottom: 1px solid var(--line); background: var(--raised-2);
}
.notifpanel .nitem { padding: 12px; border-bottom: 1px solid var(--line); }
.notifpanel .nitem:last-child { border-bottom: 0 }
.notifpanel .nitem.warn { border-inline-start: 3px solid var(--warn, #E8A33D) }
.notifpanel .ntitle { font-weight: 700; font-size: 13.5px; margin-bottom: 3px }
.notifpanel .nbody { font-size: 12px; color: var(--text-2); line-height: 1.6 }

/* ══ التحديد الجماعي والحذف ════════════════════════════════════════════ */
td.bulkcell, th.c > .bulkbox { width: 34px }
.bulkbox { width: 15px; height: 15px; cursor: pointer; accent-color: var(--brand-blue) }
.bulkbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 210;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px; background: var(--surface);
  border-top: 1px solid var(--line-2);
  box-shadow: 0 -8px 28px rgba(0,0,0,.14);
}
.bulkbar .spacer { flex: 1 }
.btn.danger {
  background: var(--neg); border-color: var(--neg); color: #fff;
}
.btn.danger:hover { filter: brightness(.93) }

/* ══ السطرُ المُضاء ═══════════════════════════════════════════════════
   القارئُ جاء من ورقةِ إيداعٍ يبحث عن سطرٍ بعينه بين مئاتٍ متشابهة.
   فيُضاء بإطارٍ ذهبيٍّ ونبضةٍ واحدة — لا تُكرَّر كي لا تُزعج. */
.tbl tbody tr.spot > td {
  background: color-mix(in srgb, var(--gold, #C9A94E) 16%, transparent) !important;
  box-shadow: inset 0 1px 0 var(--gold, #C9A94E), inset 0 -1px 0 var(--gold, #C9A94E);
}
.tbl tbody tr.spot > td:first-child { box-shadow: inset -3px 0 0 var(--gold, #C9A94E); }
.tbl tbody tr.spot { animation: spotPulse 1.5s ease-out 1 }
@keyframes spotPulse {
  0%   { background: color-mix(in srgb, var(--gold, #C9A94E) 42%, transparent) }
  100% { background: transparent }
}
@media (prefers-reduced-motion: reduce) { .tbl tbody tr.spot { animation: none } }

/* ══ الهويةُ وزرُّ الخروج يبقيان عند طيّ الشريط ═════════════════════════
   `:not(.keep)` كان يُخفي كلَّ شيء لأن لا عنصرَ يحمل `.keep` — فمن طوى
   الشريطَ مرّةً فقد زرَّ الخروج ومبدّلَ الشركة إلى الأبد، والاختيارُ
   محفوظٌ فيعود مطويّاً. فتبقى الأزرارُ أيقوناتٍ. */
body.navmin .nav .foot { align-items: center; gap: 8px }
body.navmin .nav .foot .row { flex-direction: column; gap: 8px; width: 100% }
body.navmin .nav .foot .row .btn { width: 100%; justify-content: center; padding: 7px 0 }
body.navmin .nav .foot .row:has(#signOutBtn),
body.navmin .nav .foot .row:has(#themeBtn) { display: flex !important }
body.navmin #signOutBtn, body.navmin #themeBtn { display: inline-flex !important }
body.navmin #entitySel { display: block !important; width: 100%; font-size: 10px; padding: 4px 2px }
body.navmin #whoAmI, body.navmin #chainState { display: none }

/* ══ صفُّ الإيداع — لونٌ يغلب التظليل المتبادل ═══════════════════════════
   الصفُّ كان مُلوَّناً على `tr` والتظليلُ المتبادل على `td`، وخلفيةُ
   الخليّة تُرسم **فوق** خلفية الصفّ — فـ`!important` على الصفّ بلا فائدة.
   فيُلوَّن على الخليّة، وأهمُّ صفٍّ في الكشف يُقرأ من طرف الشاشة. */
table.tbl.gl tbody tr.k-dep > td,
.tbl.dense tbody tr.k-dep > td {
  background: color-mix(in srgb, var(--gl-dep, #0F5C4A) 13%, transparent) !important;
  border-block-color: color-mix(in srgb, var(--gl-dep, #0F5C4A) 30%, var(--line)) !important;
}
table.tbl.gl tbody tr.k-dep:hover > td,
.tbl.dense tbody tr.k-dep:hover > td {
  background: color-mix(in srgb, var(--gl-dep, #0F5C4A) 20%, transparent) !important;
}
table.tbl.gl tbody tr.k-dep > td:first-child {
  box-shadow: inset -4px 0 0 0 var(--gl-dep, #0F5C4A) !important;
}
/* والسطرُ المُضاء يغلب الإيداع — القارئُ جاء من أجله */
.tbl tbody tr.spot > td {
  background: color-mix(in srgb, var(--gold, #C9A94E) 20%, transparent) !important;
}

/* زرُّ الوجهة على صفّ الإيداع */
td.depdest { cursor: pointer }
td.depdest .depgo {
  font-size: 10.5px; font-weight: 700; margin-top: 3px;
  color: var(--gl-dep, #0F5C4A); white-space: nowrap;
}
td.depdest:hover .depgo { text-decoration: underline }

/* اسمُ الجهة على سطر الكشف — «تحصيل LE-RCV-…» لا يقول مِن مَن */
.glparty {
  font-size: 11px; font-weight: 700; margin-top: 2px;
  color: var(--brand-blue); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

/* ══════════════════════════════════════════════════════════════════════
   شجرةُ التوزيع — بطاقاتُ العلامات وشاشاتُها
   ══════════════════════════════════════════════════════════════════════
   الدرجةُ الأولى قرارٌ لا جدول: ثلاثُ بطاقاتٍ كبيرةٍ يُختار منها واحدة.
   فتُبنى كبطاقةِ قرارٍ لا كصفٍّ في قائمة — رقمٌ واحدٌ كبيرٌ يقود العين،
   وتفصيلٌ تحته بخطٍّ أهدأ. ولكلِّ علامةٍ لونُها فتُعرَف قبل أن تُقرأ. */
.brandcards {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}
.brandcard {
  appearance: none; cursor: pointer; text-align: start;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 18px 18px 14px;
  display: flex; flex-direction: column; gap: 2px;
  position: relative; overflow: hidden;
  transition: border-color .14s, box-shadow .14s, transform .14s;
  font: inherit; color: inherit;
}
.brandcard::before {
  content: ''; position: absolute; inset-block: 0; inset-inline-start: 0;
  width: 4px; background: var(--brand-blue);
}
.brandcard:nth-child(1)::before { background: #0F5C4A }
.brandcard:nth-child(2)::before { background: #C9A94E }
.brandcard:nth-child(3)::before { background: #2E5AAC }
.brandcard:hover {
  border-color: var(--line-2);
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
  transform: translateY(-2px);
}
.brandcard:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px }
.brandcard .bc-name {
  font-size: 15px; font-weight: 700; letter-spacing: -.2px; margin-bottom: 6px;
}
.brandcard .bc-main {
  font-family: 'Space Grotesk', 'Readex Pro', 'Segoe UI', sans-serif;
  font-variant-numeric: tabular-nums; font-size: 27px; font-weight: 700;
  letter-spacing: -.8px; line-height: 1.1; direction: ltr; text-align: start;
}
.brandcard .bc-main .cur { font-size: 12px; font-weight: 600; color: var(--text-3) }
.brandcard .bc-sub { font-size: 11.5px; color: var(--text-3); margin-bottom: 12px }
.brandcard .bc-rows {
  display: grid; gap: 4px; padding-top: 11px;
  border-top: 1px solid var(--line);
}
.brandcard .bc-rows > div {
  display: flex; align-items: baseline; gap: 8px; font-size: 12px;
}
.brandcard .bc-rows > div > span { color: var(--text-3); flex: 1 }
.brandcard .bc-rows > div > b {
  font-family: 'Space Grotesk', 'Readex Pro', sans-serif;
  font-variant-numeric: tabular-nums; direction: ltr;
}
.brandcard .bc-rows .pos { color: var(--pos) }
.brandcard .bc-rows .neg { color: var(--neg) }

/* شاشاتُ الدرجة الثانية: مجموعاتٌ لا جدولٌ واحدٌ طويل */
#page .card .hd .glchip { margin-inline-start: 6px }
.tree-total { font-variant-numeric: tabular-nums; direction: ltr }
td.missing .tag.warn { white-space: nowrap }

/* ══════════════════════════════════════════════════════════════════════
   مربّعاتُ المشاريع — الحالةُ لونٌ يُقرأ من طرف الشاشة
   ══════════════════════════════════════════════════════════════════════
   ماجد: «من برا بالمربع يطلع: إذا ساري أخضر، إذا بينتهي قارب على
   الانتهاء، وإذا منتهي منتهي». فالحالةُ **حافّةُ** المربّع وشريطُه
   الأعلى — تُرى قبل أن يُقرأ رقم. والرقمُ أوّلَ المربّع كما طلب. */
.prjgrid {
  display: grid; gap: 14px; margin-bottom: 4px;
  grid-template-columns: repeat(auto-fill, minmax(292px, 1fr));
}
.prjcard {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 0 16px 14px;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.prjcard .prj-status {
  margin: 0 -16px 12px; padding: 7px 16px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .2px;
}
.prjcard .prj-amount {
  font-family: 'Space Grotesk', 'Readex Pro', 'Segoe UI', sans-serif;
  font-variant-numeric: tabular-nums; direction: ltr; text-align: start;
  font-size: 26px; font-weight: 700; letter-spacing: -.8px; line-height: 1.1;
}
.prjcard .prj-amount .cur { font-size: 11.5px; font-weight: 600; color: var(--text-3) }
.prjcard .prj-name {
  font-size: 13px; font-weight: 600; margin-top: 6px; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.prjcard .prj-client { font-size: 11.5px; color: var(--brand-blue); margin-top: 4px }
.prjcard .prj-files {
  display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px;
}
.prj-file {
  display: inline-flex; align-items: center; cursor: pointer;
  font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 20px;
  max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border: 1px solid var(--line-2);
}
.prj-file.contract { background: var(--brand-blue-tint); color: var(--brand-blue) }
.prj-file.receipt { background: var(--pos-dim); color: var(--pos) }
.prj-file:hover { border-color: currentColor }
.prjcard .prj-dates {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line);
}
.prjcard .prj-dates > div { display: flex; flex-direction: column; gap: 2px }
.prjcard .prj-dates span { font-size: 10.5px; color: var(--text-3) }
.prjcard .prj-dates b {
  font-family: 'Space Grotesk', 'Readex Pro', sans-serif; font-size: 12.5px;
  font-variant-numeric: tabular-nums; direction: ltr; text-align: start;
}
.prjcard .prj-cash {
  font-size: 10.5px; color: var(--text-2); margin-top: 9px; line-height: 1.7;
}
.prjcard .prj-cash span { display: block }
.prjcard .prj-foot {
  display: flex; gap: 6px; margin-top: auto; padding-top: 12px; flex-wrap: wrap;
}

/* الحالاتُ الأربع — الشريطُ والحافّةُ معاً */
.prjcard.st-active  { border-color: color-mix(in srgb, var(--pos) 40%, var(--line)) }
.prjcard.st-active .prj-status  { background: var(--pos-dim); color: var(--pos) }
.prjcard.st-soon    { border-color: color-mix(in srgb, #C9A94E 55%, var(--line)) }
.prjcard.st-soon .prj-status    { background: rgba(201,169,78,.20); color: #8A5B00 }
.prjcard.st-ended   { border-color: color-mix(in srgb, var(--neg) 34%, var(--line)) }
.prjcard.st-ended .prj-status   { background: var(--neg-dim); color: var(--neg) }
.prjcard.st-ended .prj-amount   { color: var(--text-3) }
.prjcard.st-unknown .prj-status { background: var(--n2); color: var(--text-2) }
:root[data-theme="dark"] .prjcard.st-soon .prj-status { color: #F0C475 }
@media (max-width: 640px) { .prjgrid { grid-template-columns: 1fr } }

/* ══ مربّعاتُ الدرجة الثانية ═════════════════════════════════════════
   ماجد: «غير الشكل غير جيد ابدا». الشكلُ الأول كان شريطاً ملوّناً فوق
   صندوقٍ مسطّح: الرقمُ صغيرٌ والصفوفُ متلاصقةٌ و«ادخل» نصٌّ باهت. الجديد:
   حرفُ العنوان أوّلاً، ثم **الرقمُ ضخماً** وحدَه في مساحته، ثم فاصلٌ،
   ثم الصفوفُ مرتّبةٌ بأرقامٍ مصطفّة، ثم شريطُ دخولٍ أسفلَ المربّع يتلوّن
   عند اللمس. واللونُ يميّز البيتَ بلا صراخ — حاشيةٌ رقيقةٌ وخلفيةٌ مموّهة. */
.ttiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}
.ttile {
  --tt-accent: var(--acc);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--tt-accent) 7%, transparent) 0,
      transparent 120px),
    var(--card);
  text-align: start;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.ttile:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--tt-accent) 55%, var(--line));
  box-shadow: 0 14px 34px rgba(0, 0, 0, .14);
}
.ttile:focus-visible { outline: 2px solid var(--tt-accent); outline-offset: 3px; }

.ttile.t-rajhi  { --tt-accent: #157f5f; }
.ttile.t-sifi   { --tt-accent: #4655cf; }
.ttile.t-tamara { --tt-accent: #b8156b; }
.ttile.t-mf     { --tt-accent: #0b7793; }
.ttile.t-warn   { --tt-accent: #b06a00; }
.ttile.t-wallet { --tt-accent: #6b4bb8; }
.ttile.t-sib    { --tt-accent: #7a6a55; }
.ttile.t-empty  { --tt-accent: #8a8f98; opacity: .72; }

.ttile .tt-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px 0;
}
.ttile .tt-name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.25px;
}
.ttile .tt-badge {
  margin-inline-start: auto;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 650;
  white-space: nowrap;
  color: color-mix(in srgb, var(--tt-accent) 82%, var(--fg));
  background: color-mix(in srgb, var(--tt-accent) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--tt-accent) 24%, transparent);
}
.ttile .tt-main {
  padding: 10px 20px 2px;
  font-size: 38px;
  font-weight: 750;
  letter-spacing: -1.6px;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.ttile .tt-main .cur {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--muted);
  margin-inline-start: 4px;
}
.ttile .tt-sub {
  padding: 0 20px 14px;
  font-size: 12.5px;
  color: var(--muted);
}
.ttile .tt-rows {
  display: grid;
  gap: 0;
  margin: 0 20px;
  border-top: 1px solid var(--line);
}
.ttile .tt-rows > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  font-size: 13px;
  border-bottom: 1px dashed color-mix(in srgb, var(--line) 70%, transparent);
}
.ttile .tt-rows > div:last-child { border-bottom: 0; }
.ttile .tt-rows > div > span { color: var(--muted); }
.ttile .tt-rows > div > b {
  margin-inline-start: auto;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  font-size: 14px;
}
.ttile .tt-go {
  margin-top: auto;
  padding: 12px 20px;
  font-size: 12.5px;
  font-weight: 700;
  color: color-mix(in srgb, var(--tt-accent) 88%, var(--fg));
  background: color-mix(in srgb, var(--tt-accent) 8%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--tt-accent) 18%, transparent);
}
.ttile:hover .tt-go { background: color-mix(in srgb, var(--tt-accent) 16%, transparent); }

@media (max-width: 700px) {
  .ttiles { grid-template-columns: 1fr; }
  .ttile .tt-main { font-size: 32px; }
}

/* بطاقةٌ تُفتَح لترى حركاتها — «أحصل مصاريف كل بطاقة» */
.cardfold {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg2, transparent);
  overflow: hidden;
}
.cardfold > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  cursor: pointer;
  font-size: 13.5px;
  list-style: none;
}
.cardfold > summary::-webkit-details-marker { display: none; }
.cardfold > summary::after {
  content: '\25be';
  color: var(--muted);
  transition: transform .15s ease;
}
.cardfold[open] > summary { border-bottom: 1px solid var(--line); }
.cardfold[open] > summary::after { transform: rotate(180deg); }
.cardfold > summary:hover { background: color-mix(in srgb, var(--acc) 6%, transparent); }
.cardfold .cf-n { font-weight: 650; }
.cardfold .cf-4 { color: var(--muted); font-size: 12px; }
.cardfold .cf-amt {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 15px;
}
.cardfold .tbl-wrap { border: 0; border-radius: 0; }