/* ═══════════════════════════════════════════════════════════
   عُهد — دفتر أستاذ رقمي.  أبيض / أسود فقط.
   نظام مسافات 8pt · أهداف لمس ≥44px · RTL أصيل
   ═══════════════════════════════════════════════════════════ */

:root{
  /* حبر وورق */
  --ink:      #0B0B0C;
  --ink-2:    #45454A;
  --ink-3:    #8A8A90;
  --ink-4:    #B9B9BE;
  --line:     #E4E4E6;
  --line-2:   #D0D0D3;
  --paper:    #FFFFFF;
  --paper-2:  #F7F7F8;

  /* مسافات */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;

  /* أنصاف أقطار */
  --r-card:16px; --r-ctl:12px; --r-pill:999px;

  /* مناطق آمنة */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  --sans:"IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "SF Arabic", "Segoe UI", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --bar-h: 76px;
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }

html,body{
  margin:0; padding:0;
  height:100%;
  overscroll-behavior-y:none;
  -webkit-text-size-adjust:100%;
}

body{
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* حبيبات ورقية خفيفة تعطي إحساس الدفتر */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

button,input,textarea,select{ font:inherit; color:inherit; }
button{ background:none; border:0; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
input{ -webkit-tap-highlight-color:transparent; }

.tappable:active,
button:not(:disabled):active{ transform:scale(.975); transition:transform .08s ease; }

::selection{ background:var(--ink); color:var(--paper); }

/* ───────── هيكل الشاشات ───────── */
#app{ position:relative; height:100dvh; overflow:hidden; z-index:1; }

.screen{
  position:absolute; inset:0;
  display:none;
  flex-direction:column;
  background:var(--paper);
}
.screen.is-active{ display:flex; }
.screen.is-entering{ animation:screenIn .28s cubic-bezier(.2,.8,.2,1) both; }
@keyframes screenIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }

.scroll{
  flex:1; min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
}
.pad{ padding:var(--s4) var(--s4) calc(var(--s7) + var(--bar-h)); max-width:720px; margin-inline:auto; }

/* ───────── الشريط العلوي ───────── */
.topbar{
  display:flex; align-items:center; gap:var(--s2);
  padding:calc(var(--s2) + var(--safe-top)) var(--s2) var(--s2);
  min-height:calc(56px + var(--safe-top));
  border-bottom:1px solid var(--line);
  background:var(--paper);
  position:relative; z-index:2;
}
.topbar__title{
  flex:1; min-width:0;
  font-size:17px; font-weight:600; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  padding-inline:var(--s2);
}
.topbar--home .topbar__brandline{ flex:1; padding-inline-start:var(--s3); }
.iconbtn{
  width:44px; height:44px; display:grid; place-items:center;
  border-radius:var(--r-ctl); color:var(--ink); flex:none;
}
.iconbtn:active{ background:var(--paper-2); }

/* ───────── الشريط السفلي (منطقة الإبهام) ───────── */
.bottombar{
  position:relative; z-index:2;
  padding:var(--s3) var(--s4) calc(var(--s3) + var(--safe-bottom));
  border-top:1px solid var(--line);
  background:var(--paper);
  display:flex; gap:var(--s2);
}
.bottombar > *{ flex:1; }
.bottombar--split .btn--ghost{ flex:.85; }

/* ───────── الأزرار ───────── */
.btn{
  min-height:54px;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  border-radius:var(--r-ctl);
  font-size:16px; font-weight:600; letter-spacing:-.01em;
  transition:opacity .12s ease, transform .08s ease;
}
.btn--solid{ background:var(--ink); color:var(--paper); }
.btn--ghost{ background:var(--paper); color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink); }
.btn--quiet{ background:var(--paper-2); color:var(--ink); }
.btn:disabled{ opacity:.28; cursor:not-allowed; }
.btn--sm{ min-height:44px; font-size:15px; padding-inline:var(--s4); }
a.btn{ text-decoration:none; -webkit-tap-highlight-color:transparent; }
.btn[hidden]{ display:none; }

/* زرّا الكشف: الأيقونة لا تنضغط، وعلى الشاشات الضيقة تسمية قصيرة («الفواتير (5)») بدل أن يلتف النص */
#stmtBar .btn svg{ flex:none; }
#stmtBar .btn span{ white-space:nowrap; }
#btnReceipts .lbl-short{ display:none; }
@media (max-width:400px){
  #stmtBar.bottombar--split .btn{ font-size:15px; gap:6px; padding-inline:8px; }
  #btnReceipts .lbl-long{ display:none; }
  #btnReceipts .lbl-short{ display:inline; }
}
/* عنوان قسم داخل ورقة (مثل «يشرف على محاسبين») */
.sheet__sub{ font-size:14px; font-weight:700; margin:var(--s2) 0 var(--s1); }

/* اسم ملف الفواتير في ورقة «جاهز» */
.zipname{
  margin-top:var(--s3); padding:10px 12px;
  border:1px solid var(--line); border-radius:var(--r-ctl);
  font-size:13px; line-height:1.5; color:var(--ink); word-break:break-word;
}

.linkbtn{
  min-height:44px; padding-inline:var(--s2);
  font-size:14px; font-weight:500; color:var(--ink-2);
  text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px;
}

/* ───────── قواعد أفقية ───────── */
.rule{ height:1px; background:var(--line); margin-block:var(--s4); }
.rule--thick{ height:3px; background:var(--ink); margin-block:var(--s3); }

/* ═══════════ شاشة القفل ═══════════ */
.lock{
  flex:1; display:flex; flex-direction:column; align-items:center;
  padding:calc(var(--s6) + var(--safe-top)) var(--s4) calc(var(--s5) + var(--safe-bottom));
  max-width:420px; margin-inline:auto; width:100%;
}
.lock__brand{ width:100%; max-width:220px; text-align:center; }
.wordmark{
  font-size:44px; font-weight:700; letter-spacing:-.02em; line-height:1;
}
.wordmark--sm{ font-size:22px; font-weight:700; letter-spacing:-.02em; }
.wordmark__sub{
  font-size:12px; font-weight:400; color:var(--ink-3); letter-spacing:.04em;
}
.lock__who{ text-align:center; margin-top:auto; }
.lock__avatar{
  width:64px; height:64px; margin:0 auto var(--s3);
  display:grid; place-items:center;
  border:1.5px solid var(--ink); border-radius:50%;
  font-size:22px; font-weight:600;
}
.lock__name{ font-size:20px; font-weight:600; letter-spacing:-.01em; }
.lock__job{ font-size:14px; color:var(--ink-3); margin-top:2px; }

.pin{ margin-top:auto; width:100%; }
.pin__dots{ display:flex; justify-content:center; gap:var(--s3); margin-bottom:var(--s3); }
.pin__dots i{
  width:12px; height:12px; border:1.5px solid var(--ink); border-radius:50%;
  transition:background .12s ease, transform .12s ease;
}
.pin__dots i.on{ background:var(--ink); transform:scale(1.12); }
.pin__hint{ text-align:center; font-size:13px; color:var(--ink-3); min-height:20px; margin-bottom:var(--s5); }
.pin__hint.err{ color:var(--ink); font-weight:600; }
.pin.shake{ animation:shake .38s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake{ 10%,90%{transform:translateX(-2px)} 20%,80%{transform:translateX(4px)} 30%,50%,70%{transform:translateX(-7px)} 40%,60%{transform:translateX(7px)} }

.keypad{
  direction:ltr;                      /* لوحة الأرقام دائماً من اليسار: ١ ٢ ٣ */
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3);
  max-width:300px; margin-inline:auto;
}
.key{
  height:66px; display:grid; place-items:center;
  font-family:var(--mono); font-size:24px; font-weight:400;
  border:1px solid var(--line-2); border-radius:var(--r-pill);
  background:var(--paper);
  transition:background .1s ease, transform .08s ease;
}
.key:active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.key--ghost{ border-color:transparent; font-family:var(--sans); font-size:15px; font-weight:500; color:var(--ink-2); }
.key--ghost:active{ background:var(--paper-2); color:var(--ink); }

/* ═══════════ شاشة الإقلاع ═══════════ */
.boot{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:var(--s5); text-align:center;
}
.boot .wordmark{ font-size:40px; }
.boot .rule--thick{ width:150px; }
.boot__msg{ font-size:13px; color:var(--ink-3); max-width:280px; line-height:1.6; }

/* ═══════════ شريط الحالة العلوي ═══════════ */
.banner{
  position:fixed; z-index:35; inset-inline:0; top:0;
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:calc(6px + var(--safe-top)) var(--s4) 6px;
  background:var(--ink); color:var(--paper);
  font-size:12px; font-weight:500;
  animation:bannerIn .22s ease both;
}
@keyframes bannerIn{ from{ transform:translateY(-100%);} to{ transform:none;} }
.banner svg{ flex:none; }
.banner--sync svg{ animation:spin 1.6s linear infinite; }
@keyframes spin{ to{ transform:rotate(-360deg); } }

/* ═══════════ صفوف الحسابات ═══════════ */
.urow{
  width:100%; display:flex; align-items:center; gap:var(--s3);
  padding:var(--s3) var(--s1); min-height:72px; text-align:start;
  border-bottom:1px solid var(--line);
}
.urow:active{ background:var(--paper-2); }
.urow__badge{
  width:44px; height:44px; flex:none; display:grid; place-items:center;
  border:1.5px solid var(--ink); border-radius:50%; font-weight:600; font-size:16px;
}
.urow__badge--off{ border-style:dashed; color:var(--ink-4); border-color:var(--line-2); }
.urow__main{ flex:1; min-width:0; }
.urow__name{ font-size:16px; font-weight:600; letter-spacing:-.01em; display:flex; align-items:center; gap:6px; }
.urow__job{ font-size:13px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.urow__num{ flex:none; text-align:end; }
.urow__bal{ display:block; font-size:16px; font-weight:500; letter-spacing:-.02em; }
.urow__sub{ font-size:11.5px; color:var(--ink-3); }
.urow__go{ color:var(--ink-4); flex:none; }

/* وسوم ورقائق */
.tag{
  font-size:10.5px; font-weight:600; letter-spacing:.02em;
  border:1px solid var(--ink); border-radius:5px; padding:2px 6px;
  white-space:nowrap;
}
.tag--sm{ font-size:9.5px; padding:1px 5px; font-weight:500; color:var(--ink-2); border-color:var(--line-2); }
.topbar__brandline{ display:flex; align-items:center; gap:var(--s2); }

.chip{
  display:inline-flex; align-items:center; gap:6px;
  min-height:36px; padding:0 var(--s3); margin-bottom:var(--s3);
  border:1px solid var(--ink); border-radius:var(--r-pill);
  font-size:13px; font-weight:500;
}
.chip svg{ color:var(--ink-2); }

/* جدول مفتاح/قيمة */
.kv{ border-top:1px solid var(--line); }
.kv__row{
  display:flex; align-items:baseline; gap:var(--s3);
  padding:var(--s3) 0; border-bottom:1px solid var(--line);
}
.kv__k{ flex:none; width:96px; font-size:13px; color:var(--ink-3); }
.kv__v{ flex:1; font-size:15px; font-weight:500; text-align:start; }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:.02em; }

/* بيانات الدخول */
.cred{
  display:flex; align-items:center; gap:var(--s3);
  border:1.5px solid var(--ink); border-radius:var(--r-ctl);
  padding:var(--s3); margin-bottom:var(--s2);
}
.cred__k{ font-size:12px; color:var(--ink-3); flex:none; }
.cred__v{ flex:1; font-size:20px; font-weight:600; letter-spacing:.06em; text-align:center; }
.cred__copy{
  width:40px; height:40px; flex:none; display:grid; place-items:center;
  border-radius:var(--r-ctl); background:var(--paper-2); color:var(--ink);
}

/* ═══════════ الرئيسية ═══════════ */
.whoami{ margin-bottom:var(--s5); }
.whoami__name{ font-size:26px; font-weight:700; letter-spacing:-.025em; line-height:1.2; }
.whoami__job{ font-size:14px; color:var(--ink-3); margin-top:2px; }

.ledger{
  border:1px solid var(--line); border-radius:var(--r-card);
  padding:var(--s4);
  background:var(--paper);
}
.ledger--main{ border-color:var(--ink); border-width:1.5px; }
.ledger__label{ font-size:12px; color:var(--ink-3); letter-spacing:.02em; }
.ledger__value{
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:38px; font-weight:500; letter-spacing:-.03em; line-height:1.15;
  margin-top:var(--s1);
  display:flex; align-items:baseline; justify-content:flex-start; gap:6px;
}
.ledger__value .cur{ font-family:var(--sans); font-size:15px; font-weight:500; color:var(--ink-3); letter-spacing:0; }
.ledger__meta{ font-size:13px; color:var(--ink-3); margin-top:var(--s1); }

.splits{ display:flex; }
.split{ flex:1; }
.split--sep{ border-inline-start:1px solid var(--line); padding-inline-start:var(--s4); }
.split__k{ display:block; font-size:12px; color:var(--ink-3); }
.split__v{
  display:block; font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:19px; font-weight:500; letter-spacing:-.02em; margin-top:2px;
}

.sechead{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); margin:var(--s6) 0 var(--s3); }
.sechead__title{ font-size:13px; font-weight:600; color:var(--ink-3); letter-spacing:.06em; margin:0; }

.segmented{ display:flex; gap:2px; padding:3px; background:var(--paper-2); border-radius:var(--r-pill); }
.segmented--wide{ width:100%; }
.segmented--wide .seg{ flex:1; }
.seg{
  min-height:44px; padding-inline:var(--s4);
  font-size:13px; font-weight:500; color:var(--ink-3);
  border-radius:var(--r-pill);
  transition:background .14s ease, color .14s ease;
}
.seg.is-on{ background:var(--ink); color:var(--paper); font-weight:600; }

/* بطاقة عهدة */
.ccard{
  display:block; width:100%; text-align:start;
  border:1px solid var(--line); border-radius:var(--r-card);
  padding:var(--s4); margin-bottom:var(--s3);
  background:var(--paper);
  transition:border-color .14s ease, transform .08s ease;
}
.ccard:active{ border-color:var(--ink); }
.ccard--closed{ background:var(--paper-2); border-style:dashed; }
.ccard__top{ display:flex; align-items:flex-start; gap:var(--s3); }
.ccard__title{ flex:1; min-width:0; font-size:17px; font-weight:600; letter-spacing:-.015em; }
.pill{
  flex:none; font-size:11px; font-weight:600; letter-spacing:.03em;
  padding:4px 10px; border-radius:var(--r-pill);
  border:1px solid var(--ink); color:var(--ink);
}
.pill--fill{ background:var(--ink); color:var(--paper); }
.ccard__date{ font-size:12px; color:var(--ink-3); margin-top:2px; }
.ccard__bottom{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s3); margin-top:var(--s3); padding-top:var(--s3); border-top:1px solid var(--line); }
.ccard__k{ font-size:12px; color:var(--ink-3); }
.ccard__v{ display:block; font-size:22px; font-weight:500; letter-spacing:-.02em; }
.ccard__count{ font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums; }

/* ═══════════ الحركات ═══════════ */
.daygroup{ margin-bottom:var(--s5); }
.dayhead{
  display:flex; align-items:center; gap:var(--s3);
  font-size:12px; color:var(--ink-3); letter-spacing:.02em;
  margin-bottom:var(--s2);
}
.dayhead::after{ content:""; flex:1; height:1px; background:var(--line); }

.entry{
  display:flex; align-items:center; gap:var(--s3); width:100%; text-align:start;
  padding:var(--s3) 0; min-height:64px;
  border-bottom:1px solid var(--line);
}
.entry:active{ background:var(--paper-2); }
.emark{
  width:34px; height:34px; flex:none; display:grid; place-items:center;
  border:1.5px solid var(--ink); border-radius:9px;
  font-family:var(--mono); font-size:17px; font-weight:500; line-height:1;
}
.emark--out{ background:var(--ink); color:var(--paper); }
.entry__main{ flex:1 1 auto; min-width:0; overflow:hidden; }
.entry__desc{ display:block; font-size:15px; font-weight:500; letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.entry__sub{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-3); margin-top:2px; }
.entry__sub time{ font-variant-numeric:tabular-nums; }
.clip{ display:inline-flex; align-items:center; gap:3px; }
.entry__amt{
  flex:0 0 auto; min-width:96px; text-align:right;
  font-size:16px; font-weight:500; letter-spacing:-.02em;
}

.empty{
  text-align:center; padding:var(--s7) var(--s4);
  border:1px dashed var(--line-2); border-radius:var(--r-card);
}
.empty__t{ font-size:16px; font-weight:600; }
.empty__s{ font-size:14px; color:var(--ink-3); margin-top:var(--s1); }

/* ═══════════ الحقول ═══════════ */
.field{ margin-bottom:var(--s4); }
.label{ display:block; font-size:13px; font-weight:500; color:var(--ink-2); margin-bottom:var(--s2); }
.input,.textarea{
  width:100%; min-height:52px;
  padding:var(--s3) var(--s3);
  font-size:16px; /* يمنع تكبير iOS */
  background:var(--paper);
  border:1px solid var(--line-2); border-radius:var(--r-ctl);
  transition:border-color .14s ease, box-shadow .14s ease;
  appearance:none;
}
.input:focus,.textarea:focus{ outline:none; border-color:var(--ink); box-shadow:0 0 0 1px var(--ink); }
.input::placeholder,.textarea::placeholder{ color:var(--ink-4); }
.textarea{ min-height:88px; resize:none; line-height:1.5; }
.input--pin{ font-family:var(--mono); letter-spacing:.5em; text-align:center; }
.input--code{ font-family:var(--mono); letter-spacing:.12em; text-align:center; font-size:18px; text-transform:uppercase; }
.input--amount{
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:30px; font-weight:500; letter-spacing:-.02em;
  min-height:68px; text-align:start;
}
.lede{ font-size:15px; color:var(--ink-2); margin:0 0 var(--s5); line-height:1.6; }
.note{ font-size:12.5px; color:var(--ink-3); line-height:1.6; margin:0; }
.note--err{ color:var(--ink); font-weight:600; }

/* ═══════════ الأوراق السفلية ═══════════ */
.scrim{
  position:fixed; inset:0; z-index:40;
  background:rgba(11,11,12,.42);
  animation:fade .18s ease both;
  backdrop-filter:saturate(.4) blur(2px);
}
@keyframes fade{ from{opacity:0} to{opacity:1} }
.scrim.closing{ animation:fade .18s ease reverse both; }

.sheet{
  position:fixed; inset-inline:0; bottom:0; z-index:41;
  max-height:92dvh; display:flex; flex-direction:column;
  background:var(--paper);
  border-radius:20px 20px 0 0;
  box-shadow:0 -1px 0 var(--ink);
  animation:sheetIn .3s cubic-bezier(.2,.9,.25,1) both;
  max-width:720px; margin-inline:auto;
}
@keyframes sheetIn{ from{ transform:translateY(100%);} to{ transform:none;} }
.sheet.closing{ animation:sheetIn .22s ease reverse both; }
.sheet__grab{ width:38px; height:4px; border-radius:2px; background:var(--line-2); margin:var(--s2) auto var(--s1); flex:none; }
.sheet__head{
  display:flex; align-items:center; gap:var(--s2);
  padding:var(--s2) var(--s4) var(--s3);
  border-bottom:1px solid var(--line); flex:none;
}
.sheet__title{ flex:1; font-size:18px; font-weight:600; letter-spacing:-.015em; }
.sheet__body{ padding:var(--s4); overflow-y:auto; -webkit-overflow-scrolling:touch; flex:1; min-height:0; }
.sheet__body--last{ padding-bottom:calc(var(--s4) + var(--safe-bottom)); }
.sheet__foot{
  padding:var(--s3) var(--s4) calc(var(--s3) + var(--safe-bottom));
  border-top:1px solid var(--line); display:flex; gap:var(--s2); flex:none;
}
.sheet__foot > *{ flex:1; }

/* قائمة الإجراءات */
.actions{ list-style:none; margin:0; padding:0; }
.actions li + li{ border-top:1px solid var(--line); }
.actions button{
  width:100%; display:flex; align-items:center; gap:var(--s3);
  min-height:58px; padding:var(--s3) 0; text-align:start;
  font-size:16px; font-weight:500;
}
.actions button:active{ background:var(--paper-2); }
.actions svg{ flex:none; color:var(--ink-2); }
.actions .sub{ display:block; font-size:12.5px; color:var(--ink-3); font-weight:400; margin-top:1px; }

/* ═══════════ المرفقات ═══════════ */
.shots{ display:flex; gap:var(--s2); flex-wrap:wrap; }
.shot{
  position:relative; width:88px; height:88px; flex:none;
  border-radius:var(--r-ctl); overflow:hidden; border:1px solid var(--line-2);
  background:var(--paper-2);
}
.shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.shot__x{
  position:absolute; inset-block-start:4px; inset-inline-end:4px;
  width:26px; height:26px; border-radius:50%;
  background:var(--ink); color:var(--paper);
  display:grid; place-items:center;
}
.shotadd{
  width:88px; height:88px; flex:none;
  border:1.5px dashed var(--line-2); border-radius:var(--r-ctl);
  display:grid; place-items:center; align-content:center; gap:4px;
  color:var(--ink-2); font-size:11px; font-weight:500;
}
.shotadd:active{ border-color:var(--ink); background:var(--paper-2); }
.shotadd--big{ width:100%; height:132px; }
.shotadd--req{ border-color:var(--ink); }

.reqrow{ display:flex; align-items:center; gap:6px; margin-bottom:var(--s2); }
.reqtag{
  font-size:10.5px; font-weight:700; letter-spacing:.04em;
  border:1px solid var(--ink); border-radius:4px; padding:1px 5px;
}

/* عارض الصور */
.viewer{
  position:fixed; inset:0; z-index:60; background:#000;
  display:flex; flex-direction:column;
  animation:fade .18s ease both;
}
.viewer__bar{
  display:flex; align-items:center; gap:var(--s2);
  padding:calc(var(--s2) + var(--safe-top)) var(--s2) var(--s2);
  color:#fff;
}
.viewer__bar .iconbtn{ color:#fff; }
.viewer__cap{
  flex:1; min-width:0; font-size:14px; color:#fff; opacity:.75; padding-inline:var(--s2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.viewer__img{ flex:1; min-height:0; display:grid; place-items:center; padding:var(--s3); }
.viewer__img img{ max-width:100%; max-height:100%; object-fit:contain; }

/* ═══════════ التنبيه ═══════════ */
.toast{
  position:fixed; z-index:70; inset-inline:0; bottom:calc(var(--s6) + var(--safe-bottom));
  margin-inline:auto; width:max-content; max-width:88%;
  background:var(--ink); color:var(--paper);
  padding:var(--s3) var(--s4); border-radius:var(--r-pill);
  font-size:14px; font-weight:500;
  animation:toastIn .24s cubic-bezier(.2,.9,.25,1) both;
}
@keyframes toastIn{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }

/* ═══════════════════════════════════════════════════════════
   كشف الحساب — ورقة A4
   ═══════════════════════════════════════════════════════════ */
.stmt-scroll{ background:var(--paper-2); overflow-x:hidden; }
.paperwrap{ padding:var(--s4) var(--s3) calc(var(--s6) + var(--bar-h)); }
.paper{
  background:#fff; color:#000;
  max-width:800px; margin-inline:auto;
  padding:22px;
  border:1px solid var(--line);
  border-radius:6px;
}

.sh{ display:flex; align-items:flex-start; gap:var(--s3); }
.sh__mark{ font-size:30px; font-weight:700; letter-spacing:-.02em; line-height:1; }
.sh__t{ flex:1; text-align:end; }
.sh__t b{ display:block; font-size:15px; font-weight:600; }
.sh__t span{ display:block; font-size:11px; color:#666; font-variant-numeric:tabular-nums; }
.srule{ height:2.5px; background:#000; margin:10px 0 14px; }
.srule--thin{ height:1px; background:#000; margin:12px 0; }

.smeta{ display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; margin-bottom:14px; }
.smeta div{ border-bottom:1px dotted #bbb; padding-bottom:5px; }
.smeta k{ display:block; font-size:10px; color:#666; letter-spacing:.02em; }
.smeta v{ display:block; font-size:13px; font-weight:600; }
.smeta v.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:500; font-size:11.5px; white-space:nowrap; }

.ssum{ display:flex; border:1.5px solid #000; border-radius:4px; overflow:hidden; margin-bottom:16px; }
.ssum div{ flex:1; padding:10px 12px; }
.ssum div + div{ border-inline-start:1px solid #000; }
.ssum div.hi{ background:#000; color:#fff; }
.ssum k{ display:block; font-size:10px; opacity:.7; }
.ssum v{ display:block; font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:17px; font-weight:500; letter-spacing:-.02em; margin-top:2px; }

.tblwrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.stbl{ width:100%; min-width:500px; border-collapse:collapse; font-size:11.5px; }
table.stbl th{
  text-align:start; font-size:9.5px; font-weight:600; color:#000;
  letter-spacing:.03em; padding:6px 5px;
  border-bottom:1.5px solid #000; border-top:1.5px solid #000;
  background:#fff; white-space:nowrap;
}
table.stbl td{ padding:7px 5px; border-bottom:1px solid #ddd; vertical-align:top; }
table.stbl tr.tot td{ border-top:1.5px solid #000; border-bottom:1.5px solid #000; font-weight:700; padding-block:8px; }
.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap; direction:ltr; unicode-bidi:isolate; }
td.num{ text-align:right; }
.c-n{ width:22px; color:#666; }
.c-d{ width:66px; }
.c-d .num{ display:block; }
.c-d .t2{ color:#666; font-size:.92em; }
.c-a{ width:58px; }
.c-r{ width:62px; }
.c-x{ width:28px; text-align:center; }
.muted{ color:#999; }

.sign{ display:flex; gap:40px; margin-top:26px; }
.sign div{ flex:1; }
.sign k{ display:block; font-size:10px; color:#666; margin-bottom:26px; }
.sign i{ display:block; border-top:1px solid #000; font-style:normal; font-size:10px; color:#666; padding-top:4px; }

.appx{ margin-top:22px; }
.appx__h{ font-size:12px; font-weight:700; letter-spacing:.04em; margin-bottom:10px; }
.rgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.rcard{ border:1px solid #000; border-radius:4px; overflow:hidden; break-inside:avoid; page-break-inside:avoid; }
.rcard img{ width:100%; height:auto; display:block; background:#f2f2f2; }
.rcard figcaption{ font-size:9.5px; padding:5px 6px; border-top:1px solid #000; line-height:1.45; }
.rcard figcaption b{ font-weight:600; }
.rcard figcaption .num{ display:inline; }

.stfoot{ margin-top:18px; font-size:9.5px; color:#666; text-align:center; border-top:1px dotted #bbb; padding-top:8px; }

.swipe{ display:none; font-size:10.5px; color:#888; padding:6px 2px 0; }

/* الورقة على شاشة الجوال: تصغير مضبوط دون قصّ */
@media screen and (max-width:520px){
  .paper{ padding:16px; }
  .ssum div{ padding:8px 9px; }
  .ssum k{ font-size:9px; }
  .ssum v{ font-size:13.5px; }
  .smeta{ gap:6px 12px; }
  .smeta v{ font-size:12.5px; }
  .sh__mark{ font-size:26px; }
  .swipe{ display:block; }
  .rgrid{ grid-template-columns:1fr; }
}

/* ───────── الطباعة ───────── */
@media print{
  @page{ size:A4; margin:12mm 10mm; }
  html,body{ height:auto; background:#fff; }
  body::before{ display:none; }
  #app{ height:auto; overflow:visible; }
  .screen{ display:none !important; }
  /* الكشف يُطبع فقط وهو الشاشة الظاهرة — وإلا طُبع آخر كشف لمستخدم سابق من شاشة الدخول */
  #screen-statement.is-active{ display:block !important; position:static !important; }
  .stmt-hide, .toast, .scrim, .sheet, .viewer, .banner{ display:none !important; }

  /* اطلب من المتصفح طباعة الألوان كما هي… */
  *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }

  /* …ولا تعتمد عليها إطلاقاً: كل خط أو إطار في الكشف يُرسم بـ border
     لأن المتصفحات تُسقِط خلفيات العناصر افتراضياً عند الطباعة، وهذا كان
     يُخفي الخط الأسود تحت الترويسة ويجعل مربع «الرصيد المتبقي» أبيض على أبيض. */
  .srule{ height:0 !important; background:none !important; border-top:2.5px solid #000; }
  .srule--thin{ height:0 !important; background:none !important; border-top:1px solid #000; }
  .ssum div.hi{ background:#fff !important; color:#000 !important; border-inline-start:2.5px solid #000 !important; }
  .ssum div.hi k{ color:#555 !important; opacity:1 !important; }
  .ssum div.hi v{ font-weight:700 !important; }
  .ssum v{ font-weight:600; }
  .stmt-scroll{ overflow:visible !important; background:#fff; }
  .paperwrap{ padding:0 !important; }
  .paper{ max-width:none; border:0; border-radius:0; padding:0; }
  /* الشبكة تترك فجوات عند تقسيم الصفحات، فنستخدم عناصر متجاورة تُقسَّم بدقة */
  .rgrid{ display:block !important; font-size:0; }
  .rcard{ display:inline-block; width:48.5%; margin:0 0 8px; vertical-align:top; font-size:initial; }
  .rcard + .rcard{ margin-inline-start:2.5%; }
  .rcard:nth-child(odd){ margin-inline-start:0; }
  .rcard img{ max-height:74mm; object-fit:contain; }
  .tblwrap{ overflow:visible !important; }
  .swipe{ display:none !important; }
  table.stbl{ font-size:9.5pt; min-width:0; }
  .c-d{ width:auto; white-space:nowrap; }
  table.stbl thead{ display:table-header-group; }
  tr{ break-inside:avoid; page-break-inside:avoid; }
  .appx{ break-inside:auto; }
  /* لا يُترك عنوان الملحق وحيداً في آخر صفحة بلا صوره */
  .appx__h{ break-after:avoid; page-break-after:avoid; }
  .sign{ break-inside:avoid; }
}

/* ───────── شاشات أعرض ───────── */
@media (min-width:640px){
  .keypad{ max-width:320px; }
  .paper{ padding:34px 30px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}


/* ═══════════════════════════════════════════════════════════
   ثنائية اللغة — محاذاة الأرقام حسب اتجاه الواجهة
   ═══════════════════════════════════════════════════════════ */
[dir="rtl"] .ccard__v,
[dir="rtl"] .c-d .num,
[dir="rtl"] .smeta v.num{ text-align:right; }
[dir="ltr"] .ccard__v,
[dir="ltr"] .c-d .num,
[dir="ltr"] .smeta v.num{ text-align:left; }

[dir="rtl"] .urow__bal{ text-align:left; }
[dir="ltr"] .urow__bal{ text-align:right; }

/* زر تبديل اللغة */
.langbtn{
  flex:none; min-height:36px; padding:0 var(--s3);
  border:1px solid var(--line-2); border-radius:var(--r-pill);
  font-size:13px; font-weight:600; letter-spacing:.01em; color:var(--ink-2);
  background:var(--paper);
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.langbtn:active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.langbtn--float{
  position:absolute; z-index:3;
  inset-block-start:calc(var(--s3) + var(--safe-top));
  inset-inline-end:var(--s4);
}
#screen-lock{ position:absolute; }

/* ═══════════════════════════════════════════════════════════
   صلاحيات الرؤية — مفاتيح «من يرى مَن»
   ═══════════════════════════════════════════════════════════ */
.urow__access{
  font-size:11.5px; color:var(--ink-2); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.acc-count{ font-size:12px; font-weight:600; color:var(--ink-3); letter-spacing:.02em; margin:var(--s3) 0 var(--s2); }
.input--search{ min-height:44px; font-size:16px; margin-bottom:var(--s1); }
.acc-list{ border-top:1px solid var(--line); }

.acc-row{
  width:100%; display:flex; align-items:center; gap:var(--s3);
  min-height:64px; padding:var(--s2) 0; text-align:start;
  border-bottom:1px solid var(--line);
}
.acc-row:active{ background:var(--paper-2); }
.acc-row:disabled{ opacity:.6; }
.acc-row--off .acc-row__name{ color:var(--ink-3); }
.acc-row .urow__badge{ width:38px; height:38px; font-size:14px; }
.acc-row__main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.acc-row__name{ font-size:15px; font-weight:600; display:flex; align-items:center; gap:6px; }
.acc-row__sub{ font-size:12px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* مفتاح أبيض/أسود — يتبع اتجاه اللغة */
.switch{
  flex:none; position:relative; width:46px; height:28px;
  border-radius:var(--r-pill); border:1.5px solid var(--ink-3); background:var(--paper);
  transition:background .16s ease, border-color .16s ease;
}
.switch::after{
  content:""; position:absolute; top:3px; inset-inline-start:3px;
  width:19px; height:19px; border-radius:50%; background:var(--ink-3);
  transition:transform .18s cubic-bezier(.2,.8,.2,1), background .16s ease;
}
.switch.is-on{ background:var(--ink); border-color:var(--ink); }
.switch.is-on::after{ background:var(--paper); }
[dir="ltr"] .switch.is-on::after{ transform:translateX(18px); }
[dir="rtl"] .switch.is-on::after{ transform:translateX(-18px); }

/* اختيار المحاسبين عند إنشاء صاحب عهدة */
.pickchips{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.pchip{
  min-height:40px; padding:0 var(--s3);
  border:1.5px solid var(--line-2); border-radius:var(--r-pill);
  font-size:14px; font-weight:500; color:var(--ink-2); background:var(--paper);
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.pchip.is-on{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* ═══ عمليات لم يقبلها الخادم ═══ */
.banner--warn{ cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.rej-list{ display:flex; flex-direction:column; gap:var(--s3); }
.rej{
  border:1.5px solid var(--ink); border-radius:var(--r-card);
  padding:var(--s3) var(--s4); display:flex; flex-direction:column; gap:6px;
}
.rej__head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3); font-size:15px; }
.rej__amt{ font-size:16px; font-weight:600; }
.rej__desc{ font-size:14px; }
.rej__meta{ font-size:12px; color:var(--ink-3); }
.rej__why{ font-size:13px; font-weight:600; }
.rej .btn{ align-self:flex-start; margin-top:4px; }