/* ══════════════════════════════════════════════════════════════════════
   منصة المساحة التخزينية — ملف الأنماط الموحّد
   هوية «حِبر وملصق» · نهاري + ليلي
   يستورده: app.html · worker.html · store.html · dashboard.html

   قاعدة: لا يُكتب oklch() خام داخل أي ملف HTML بعد اليوم. كل لون من هنا.
   ══════════════════════════════════════════════════════════════════════ */

/* ───────── ثوابت لا تتبدّل بالوضع ───────── */
:root{
  --r-xs:5px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;

  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.34,1.4,.5,1);
  --t-fast:130ms; --t-base:220ms; --t-slow:380ms; --t-sweep:560ms;

  --f-display:"Zain","IBM Plex Sans Arabic",system-ui,sans-serif;
  --f-body:"IBM Plex Sans Arabic",system-ui,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;

  --tap:44px;   /* الحد الأدنى لهدف اللمس */
  --tap-sm:36px;/* أزرار داخل صفوف الجداول */
}

/* ═══════════ نهاري — الافتراضي ═══════════ */
:root{
  --bg:oklch(.972 .004 265); --bg-deep:oklch(.935 .006 265);
  --surface:oklch(1 0 0); --surface-2:oklch(.975 .004 265); --surface-3:oklch(.945 .007 265);
  --border:oklch(.895 .008 265); --border-strong:oklch(.795 .014 265);
  --ink:oklch(.215 .022 265); --ink-dim:oklch(.435 .020 265); --ink-faint:oklch(.545 .018 265);
  --accent:oklch(.415 .175 272); --accent-2:oklch(.345 .185 274); --accent-ink:oklch(.99 .008 272);
  --accent-soft:oklch(.945 .030 272); --accent-line:oklch(.72 .085 272);
  --good:oklch(.505 .140 155); --good-soft:oklch(.945 .038 155);
  --warn:oklch(.585 .135 72);  --warn-soft:oklch(.955 .045 78);
  --bad:oklch(.505 .200 25);   --bad-soft:oklch(.950 .038 25);
  --info:oklch(.485 .130 240); --info-soft:oklch(.945 .032 240);
  --promo:oklch(.470 .180 320);--promo-soft:oklch(.950 .035 320);
  --hi:rgba(255,255,255,.92); --hi-strong:rgba(255,255,255,1); --lo:rgba(24,24,40,.13);
  --sh-1:0 1px 1px rgba(30,32,60,.05),0 2px 7px rgba(30,32,60,.07);
  --sh-2:0 2px 4px rgba(30,32,60,.07),0 12px 26px rgba(30,32,60,.12);
  --hero-wash:linear-gradient(108deg,oklch(.415 .175 272),oklch(.335 .190 288) 58%,oklch(.295 .160 305));
  --hero-ink:oklch(.98 .010 280);
  --scheme:light;
}

/* ═══════════ ليلي ═══════════
   ثلاث قواعد: الأرضية مشرَّبة بالحبر لا رمادية · لون التمييز يرتفع سطوعًا
   وينزل تشبّعًا وتثبت درجته · نسبة التباين هي المنقولة لا القيم. */
/* ⚠ هذه الكتلة مكرّرة حرفيًا داخل @media (prefers-color-scheme:dark) بالأسفل.
   أي تعديل هنا يجب أن يُنسخ هناك — الأولى للاختيار الصريح، والثانية لتفضيل النظام،
   ولا يمكن دمجهما لأن إحداهما داخل استعلام وسائط. */
:root[data-mode="night"]{
  --bg:oklch(.245 .018 270); --bg-deep:oklch(.195 .016 270);
  --surface:oklch(.295 .020 270); --surface-2:oklch(.340 .022 270); --surface-3:oklch(.390 .024 270);
  --border:oklch(.420 .026 270); --border-strong:oklch(.535 .034 270);
  --ink:oklch(.965 .008 270); --ink-dim:oklch(.845 .016 270); --ink-faint:oklch(.730 .020 270);
  --accent:oklch(.765 .145 275); --accent-2:oklch(.835 .125 278); --accent-ink:oklch(.18 .030 272);
  --accent-soft:oklch(.345 .085 274); --accent-line:oklch(.565 .105 274);
  --good:oklch(.795 .150 158); --good-soft:oklch(.340 .055 158);
  --warn:oklch(.860 .148 88);  --warn-soft:oklch(.360 .060 88);
  --bad:oklch(.735 .185 25);   --bad-soft:oklch(.335 .082 25);
  --info:oklch(.775 .118 240); --info-soft:oklch(.340 .050 240);
  --promo:oklch(.790 .148 320);--promo-soft:oklch(.350 .062 320);
  --hi:rgba(255,255,255,.13); --hi-strong:rgba(255,255,255,.24); --lo:rgba(0,0,0,.42);
  --sh-1:0 1px 2px rgba(0,0,0,.32),0 2px 9px rgba(0,0,0,.22);
  --sh-2:0 2px 4px rgba(0,0,0,.36),0 14px 30px rgba(0,0,0,.32);
  --hero-wash:linear-gradient(108deg,oklch(.335 .085 274),oklch(.45 .140 280) 56%,oklch(.60 .150 292));
  --hero-ink:oklch(.98 .010 280);
  --scheme:dark;
}
/* تفضيل النظام يُطبَّق فقط ما لم يختر المستخدم صراحةً */
@media (prefers-color-scheme:dark){
  :root:not([data-mode="light"]):not([data-mode="night"]){
    /* ⚠ نسخة مطابقة لكتلة :root[data-mode="night"] بالأعلى — حافظ على تطابقهما */
    --bg:oklch(.245 .018 270); --bg-deep:oklch(.195 .016 270);
    --surface:oklch(.295 .020 270); --surface-2:oklch(.340 .022 270); --surface-3:oklch(.390 .024 270);
    --border:oklch(.420 .026 270); --border-strong:oklch(.535 .034 270);
    --ink:oklch(.965 .008 270); --ink-dim:oklch(.845 .016 270); --ink-faint:oklch(.730 .020 270);
    --accent:oklch(.765 .145 275); --accent-2:oklch(.835 .125 278); --accent-ink:oklch(.18 .030 272);
    --accent-soft:oklch(.345 .085 274); --accent-line:oklch(.565 .105 274);
    --good:oklch(.795 .150 158); --good-soft:oklch(.340 .055 158);
    --warn:oklch(.860 .148 88);  --warn-soft:oklch(.360 .060 88);
    --bad:oklch(.735 .185 25);   --bad-soft:oklch(.335 .082 25);
    --info:oklch(.775 .118 240); --info-soft:oklch(.340 .050 240);
    --promo:oklch(.790 .148 320);--promo-soft:oklch(.350 .062 320);
    --hi:rgba(255,255,255,.13); --hi-strong:rgba(255,255,255,.24); --lo:rgba(0,0,0,.42);
    --sh-1:0 1px 2px rgba(0,0,0,.32),0 2px 9px rgba(0,0,0,.22);
    --sh-2:0 2px 4px rgba(0,0,0,.36),0 14px 30px rgba(0,0,0,.32);
    --hero-wash:linear-gradient(108deg,oklch(.335 .085 274),oklch(.45 .140 280) 56%,oklch(.60 .150 292));
    --hero-ink:oklch(.98 .010 280);
    --scheme:dark;
  }
}
:root{color-scheme:var(--scheme)}

/* ───────── أسماء بديلة للرموز القديمة ─────────
   لم يعد أي ملف يستدعيها بعد الترحيل، لكنها تبقى شبكة أمان: أي أثر قديم
   نُسي في فرع أو نسخة احتياطية سيصرف إلى القيمة الصحيحة بدل أن يسقط
   بلا لون. سطران لا وزن لهما — لا تُحذف إلا بعد أن يستقرّ الترحيل. */
:root{
  --surface-raised:var(--surface-2);
  --accent-dim:var(--accent-soft);
  --good-dim:var(--good-soft);
  --warn-dim:var(--warn-soft);
  --bad-dim:var(--bad-soft);
  --violet:var(--promo);
  --violet-dim:var(--promo-soft);
}

/* ───────── الأساس ───────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-size:14px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;font-family:var(--f-display);font-weight:800;line-height:1.2;letter-spacing:-.012em}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-xs)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ───────── الأيقونات ───────── */
.ic{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic-b{stroke-width:2.4}

/* ───────── الهيكل ───────── */
.shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
/* الشريط الجانبي يبقى أمامك مهما نزلت.
   كان عنصر شبكةٍ يمتدّ بارتفاع الصفحة كلها، فينزل معها ويختفي — ويضطرّ
   المستخدم للصعود إلى الأعلى ليبدّل صفحة. و`position:sticky` وحده لا يكفي
   في الشبكة: العنصر يتمدّد افتراضيًّا بارتفاع الصفّ فلا يبقى له ما يلتصق
   عنده. `align-self:start` مع `height:100vh` يعطيانه ارتفاعًا خاصًّا،
   و`overflow-y:auto` يمرّر القائمة نفسها إن طالت عن الشاشة. */
.nav{
  background:var(--surface);border-inline-start:1px solid var(--border);padding:18px 12px;
  position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto;
}
.main{padding:22px 28px;overflow-y:auto;min-width:0}

.brand{display:flex;align-items:center;gap:9px;padding:4px 8px 18px;font-weight:700;font-size:14px}
.brand-mark{
  width:26px;height:26px;border-radius:7px;background:var(--accent);color:var(--accent-ink);
  display:grid;place-items:center;font-family:var(--f-display);font-size:14px;font-weight:900;
  box-shadow:inset 0 1px 0 var(--hi-strong);flex:none;
}

.nav-item{
  position:relative;display:flex;align-items:center;gap:11px;
  padding:11px 12px;min-height:var(--tap);border-radius:var(--r-sm);
  color:var(--ink-dim);font-size:13.5px;font-weight:500;cursor:pointer;margin-bottom:2px;
  transition:background var(--t-fast),color var(--t-fast);
}
.nav-item svg{flex:none;transition:transform var(--t-base) var(--ease-spring),color var(--t-fast)}
.nav-item:hover{background:var(--surface-2);color:var(--ink)}
.nav-item:hover svg{transform:scale(1.1)}
.nav-item.active{background:var(--accent-soft);color:var(--accent);font-weight:600}
.nav-item.active svg{color:var(--accent)}
/* السكّة تنعكس تلقائيًا في RTL — لا left/right فيزيائي */
.nav-item.active::before{
  content:'';position:absolute;inset-inline-start:0;top:9px;bottom:9px;width:3px;
  border-radius:var(--r-pill);background:var(--accent);
}
.nav-count{margin-inline-start:auto;font-family:var(--f-mono);font-size:11px;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.nav-item.active .nav-count{color:var(--accent)}
.nav-sep{height:1px;background:var(--border);margin:10px 4px}
.nav-label{font-size:11px;letter-spacing:.05em;color:var(--ink-faint);padding:10px 12px 4px;font-weight:600}

.live-badge{
  display:inline-flex;align-items:center;gap:7px;background:var(--accent-soft);color:var(--accent);
  font-size:11px;font-weight:700;padding:5px 11px;border-radius:var(--r-pill);margin:4px 8px 12px;
}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.32}}
/* الشارة تنبض ما دام التحديث يجري فعلًا. حين يُؤجَّل — حقل قيد التحرير أو
   لوحة تفاصيل مفتوحة — تتحوّل وتسكن، لأن نبضها والبيانات مجمّدة كذبٌ صريح. */
.live-badge.is-held{background:var(--warn-soft);color:var(--warn)}
.live-badge.is-held .live-dot{background:var(--warn);animation:none}
.alert-badge{
  display:none;align-items:center;gap:7px;background:var(--bad-soft);color:var(--bad);
  font-size:11px;font-weight:700;padding:6px 11px;border-radius:var(--r-pill);margin:-4px 8px 12px;
  cursor:pointer;min-height:32px;border:0;font-family:var(--f-body);
}
.alert-badge:hover{filter:brightness(1.06)}
.poll-paused-badge{
  display:flex;align-items:center;gap:6px;background:var(--warn-soft);color:var(--warn);
  font-size:11px;font-weight:700;padding:6px 11px;border-radius:var(--r-pill);margin:-4px 8px 12px;
}
.poll-paused-badge button{
  background:none;border:0;color:inherit;text-decoration:underline;cursor:pointer;
  font-family:var(--f-body);font-size:11px;font-weight:700;padding:2px 4px;
}

/* ───────── خلية المواقع في جدول المخزون ─────────
   سطرٌ واحد لا يتمدّد مهما بلغت الصناديق: شريطُ توزّعٍ ثم جملةٌ قصيرة.
   الشريط يجيب «مجمّعة أم مبعثرة» — وهو سؤالٌ لا يُقرأ من قائمة عناوين —
   والجملة تجيب «أين معظمها»، وهو ما يذهب إليه العامل فعلًا. والتفصيل
   الكامل خلف زرّ لأنه لا يُقرأ في خليّة أصلًا.

   تدرّجٌ لونيّ واحد لا ألوانٌ متعدّدة: اللون هنا يرمّز الترتيب (الأكبر
   أوّلًا) لا الهويّة، وألوانٌ متباينة كانت ستوحي بفروقٍ في النوع لا وجود لها. */
.loc-cell{display:flex;align-items:center;gap:9px;white-space:nowrap}
.spread{display:flex;height:8px;border-radius:var(--r-pill);overflow:hidden;
  background:var(--surface-3);width:118px;flex:0 0 118px}
.spread i{display:block;height:100%}
.loc-sum{font-size:12.5px;color:var(--ink-dim);min-width:0;overflow:hidden;text-overflow:ellipsis}
.loc-sum .pct{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink)}
.loc-sum .only{color:var(--good);font-weight:600}

/* قائمة الصناديق داخل نافذة التفصيل */
.loc-line{display:flex;align-items:center;gap:9px;font-size:12.5px;
  padding:7px 0;border-bottom:1px dashed var(--border)}
.loc-line:last-child{border-bottom:0}
.loc-line .sw{width:9px;height:9px;border-radius:2px;flex:none}
.loc-line .q{margin-inline-start:auto;font-variant-numeric:tabular-nums;font-weight:700;
  background:var(--accent-soft);color:var(--accent);border-radius:var(--r-pill);padding:1px 9px}
.loc-lots{font-size:11.5px;color:var(--ink-faint);font-family:var(--f-mono)}

/* صفّ من بيانات اختبار — يُرى ولا يُخفى.
   الإخفاء كان سيجعل الشاشة تكذب؛ التخفيت يجعلها تقول «هذا ليس عملك». */
tr.is-test{opacity:.62}
tr.is-test:hover{opacity:1}

/* ───────── محاور المنتج ─────────
   حبّات تُضغط لا مربّعات اختيار: الخاصيّة قرارٌ يُرى من بعيد، والمربّع
   الصغير يُغفَل. والمختار يأخذ لون التمييز كاملًا لا علامة صحّ وحدها. */
.axis-row{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.axis-chip{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  background:var(--surface-2);color:var(--ink-dim);border:1px solid var(--border);
  border-radius:var(--r-pill);padding:0 14px;min-height:var(--tap-sm);
  font-family:var(--f-body);font-size:12.5px;font-weight:700;
  transition:background var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out),
             border-color var(--t-fast) var(--ease-out);
}
.axis-chip:hover{border-color:var(--border-strong);color:var(--ink)}
.axis-chip.on{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line)}
.axis-box{
  width:15px;height:15px;border-radius:4px;border:1.5px solid currentColor;
  display:grid;place-items:center;font-size:10px;line-height:1;flex:none;
}
.axis-chip.on .axis-box{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.axis-add{display:flex;gap:var(--s2);align-items:center;margin-top:var(--s3)}
.axis-add .axis-new{width:220px}
.axis-outcome{
  margin-top:var(--s3);padding:11px 13px;border-radius:var(--r-md);font-size:12.5px;font-weight:600;
  border:1px dashed var(--border-strong);background:var(--surface-2);color:var(--ink-dim);
}
.axis-outcome.has{border-style:solid;border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent)}
.axis-field{display:flex;flex-direction:column;gap:5px}
.axis-field label{font-size:12px;font-weight:600;color:var(--ink-dim)}
.axis-field input{width:150px}
.axis-field input.missing{border-color:var(--bad);background:var(--bad-soft)}
.axis-req{color:var(--bad);font-weight:800}
.sku-gap{background:var(--bad-soft);color:var(--bad);border-radius:3px;padding:1px 6px}

/* ───────── العناوين ───────── */
.page-title{font-family:var(--f-display);font-size:26px;font-weight:900;margin-bottom:3px;letter-spacing:-.02em}
.page-sub{color:var(--ink-faint);font-size:12.5px;margin-bottom:20px}

/* ───────── اللوحات والبطاقات ───────── */
.panel{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:16px;margin-bottom:14px;box-shadow:var(--sh-1),inset 0 1px 0 var(--hi);
}
.panel-title{
  font-size:14px;font-weight:600;margin-bottom:12px;
  display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap;
}
.panel-title .muted{font-size:11.5px;color:var(--ink-faint);font-weight:500}

.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:20px}
.kpis-6{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:16px}
.kpi{
  position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  padding:13px 14px;box-shadow:var(--sh-1),inset 0 1px 0 var(--hi);
  transition:transform var(--t-base) var(--ease-out),border-color var(--t-base);
}
.kpi:hover{transform:translateY(-2px);border-color:var(--border-strong)}
.kpi-head{display:flex;align-items:center;gap:7px;margin-bottom:8px;color:var(--ink-faint)}
.kpi-label{font-size:11.5px;color:var(--ink-faint);font-weight:600}
.kpi-value{
  font-family:var(--f-display);font-size:30px;font-weight:900;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;direction:ltr;text-align:end;
}
.kpi-value-row{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.kpi-spark{margin-top:8px;height:24px;width:100%;display:block}
/* inset-inline-end حتى تنعكس الحلقة صحيحًا — العيب الأصلي كان left:12px */
.kpi-ring-wrap{position:absolute;inset-inline-end:14px;top:12px;width:42px;height:42px}
.kpi-delta{font-size:11px;font-weight:700;padding:3px 8px;border-radius:var(--r-pill);font-variant-numeric:tabular-nums}

/* ───────── بقعة الضوء على البطاقات ─────────
   بقعةٌ تتبع المؤشّر وتضيء حافة البطاقة التي تحتها.

   الحيلة كلها في `background-attachment:fixed`: التدرّج يُرسَى على الشاشة لا
   على البطاقة، فبقعةٌ واحدة بإحداثيات الشاشة تمرّ على البطاقات كلها فتضيء
   ما تحتها وحده. ولذلك تُكتب الإحداثيات مرّةً على :root لا على كل بطاقة —
   خمس بطاقات لا تعني خمس عمليات كتابة مع كل حركة فأر.

   والحافة المضيئة من ::before: عنصرٌ بحدودٍ شفّافة وتدرّجٍ خلفها، ثم
   mask-composite:intersect يقصّ كل شيء إلا شريط الحدّ. فيُرى التدرّج على
   الإطار وحده بلا أن يُغرق البطاقة.

   واللون ليس زينة: درجته تتبع موضع المؤشّر أفقيًّا داخل عائلة الهوية
   (بنفسجي → أرجواني)، وبطاقةٌ تحمل data-tone تُقفل درجتها على معناها —
   الأخضر للسليم والأحمر لما يستدعي تدخّلًا. الضوء يقول شيئًا أو لا يكون. */
.kpi{
  --base:250; --spread:70;
  --size:230; --border-size:2px;
  --bg-spot-opacity:.10; --border-spot-opacity:.55; --border-light-opacity:.10;
  --rest-edge:.55;   /* سنى الحافة الثابت — يُضيء البطاقة قبل أن يصلها المؤشّر */
  --spot: calc(var(--size) * 1px);
  --hue: calc(var(--base) + (var(--xp,.5) * var(--spread)));
  --spot-x: calc(var(--x,0) * 1px);
  --spot-y: calc(var(--y,0) * 1px);
  isolation:isolate;
  background-image:radial-gradient(
    var(--spot) var(--spot) at var(--spot-x) var(--spot-y),
    hsl(var(--hue) 90% 62% / var(--bg-spot-opacity)), transparent 70%);
  background-attachment:fixed;
  background-repeat:no-repeat;
  transition:transform var(--t-base) var(--ease-out),border-color var(--t-base),
             box-shadow var(--t-base) var(--ease-out);
}
/* درجةٌ مقفلة على المعنى وspread صفر: لونُ بطاقةٍ تقول «سليم» لا يجوز أن
   يتحوّل إلى أحمر لأن الفأر مرّ يمين الشاشة. */
.kpi[data-tone="good"]{--base:150; --spread:0}
.kpi[data-tone="warn"]{--base:64;  --spread:0}
.kpi[data-tone="bad"] {--base:12;  --spread:0}
.kpi[data-tone="info"]{--base:228; --spread:0}
.kpi[data-tone="accent"]{--base:276; --spread:0}

/* بطاقةٌ تُنقَر تُعلن ذلك: مؤشّرٌ باليد وارتفاعٌ أوضح عند التحويم */
.kpi[role="button"]{cursor:pointer}
.kpi[role="button"]:hover{transform:translateY(-3px)}
.kpi[role="button"]:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.kpi-more{
  margin-top:9px;font-size:11.5px;font-weight:600;color:var(--accent);
  display:flex;align-items:center;gap:5px;
}

.kpi::before,
.kpi::after{
  content:"";position:absolute;inset:calc(var(--border-size) * -1);
  border:var(--border-size) solid transparent;
  /* أكبر من نصف قطر البطاقة بمقدار سُمك الهالة، وإلا انضغطت الزوايا */
  border-radius:calc(var(--r-md) + var(--border-size));
  background-attachment:fixed;background-repeat:no-repeat;
  pointer-events:none;
  /* يقصّ التدرّج على شريط الحدّ وحده: طبقةٌ معتمة داخل الحدّ، وأخرى تغطّي
     الكل، ثم exclude يُبقي ما انفردت به إحداهما — أي الإطار نفسه. */
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  transition:opacity var(--t-base) var(--ease-out);
}
/* طبقتان: بقعةُ المؤشّر فوق، وسنًى ثابتٌ تحتها.
   بلا الثابت تبقى البطاقات مطفأةً إلا واحدةً تحت الفأر — فتبدو الواحدة
   «مميّزة» والبقيّة ميّتة. الثابت يجعلها كلها مضيئةً بلون معناها، والبقعة
   تبقى الحياةَ الزائدة لا أصل الإضاءة. */
.kpi::before{
  background-image:
    radial-gradient(
      calc(var(--spot) * .75) calc(var(--spot) * .75) at var(--spot-x) var(--spot-y),
      hsl(var(--hue) 95% 65% / var(--border-spot-opacity)), transparent 70%),
    linear-gradient(145deg,
      hsl(var(--hue) 90% 62% / var(--rest-edge, .55)) 0%,
      hsl(var(--hue) 90% 62% / calc(var(--rest-edge, .55) * .28)) 42%,
      transparent 78%);
  background-attachment:fixed,scroll;
  filter:brightness(1.35);
}
/* نواةٌ بيضاء صغيرة تُعطي الحافة لمعةً معدنية بدل توهّجٍ ملوّن مسطّح */
.kpi::after{
  background-image:radial-gradient(
    calc(var(--spot) * .38) calc(var(--spot) * .38) at var(--spot-x) var(--spot-y),
    hsl(0 0% 100% / var(--border-light-opacity)), transparent 70%);
}

/* التحويم يوسّع البقعة ويرفع شدّتها — والبطاقة ترتفع كما كانت */
.kpi:hover{
  transform:translateY(-2px);
  border-color:var(--border-strong);
  --size:300; --bg-spot-opacity:.16; --border-spot-opacity:.95;
  --border-light-opacity:.30; --rest-edge:.85;
  box-shadow:var(--sh-2),inset 0 1px 0 var(--hi),
             0 0 24px -6px hsl(var(--hue) 90% 60% / .30);
}

/* النهاري: البقعة تُخفَّف كثيرًا. توهّجٌ مصمَّم للأسود يبدو على الأبيض
   بقعةَ حبرٍ لا ضوءًا — والقاعدة نفسها في كل هذا الملف: النِّسب تُنقل بين
   الوضعين لا القيم. */
:root[data-mode="light"] .kpi,
:root:not([data-mode="night"]) .kpi{
  --bg-spot-opacity:.05; --border-spot-opacity:.40; --border-light-opacity:0; --rest-edge:.40;
}
:root[data-mode="light"] .kpi:hover,
:root:not([data-mode="night"]) .kpi:hover{
  --bg-spot-opacity:.09; --border-spot-opacity:.68; --border-light-opacity:0; --rest-edge:.55;
}
@media (prefers-color-scheme:dark){
  :root:not([data-mode="light"]) .kpi{
    --bg-spot-opacity:.10; --border-spot-opacity:.55; --border-light-opacity:.10; --rest-edge:.55;
  }
  :root:not([data-mode="light"]) .kpi:hover{
    --bg-spot-opacity:.16; --border-spot-opacity:.95; --border-light-opacity:.30; --rest-edge:.85;
  }
}

/* من يطلب تقليل الحركة يُعطى بطاقةً ساكنة — لا ضوءًا يلاحق مؤشّره */
@media (prefers-reduced-motion:reduce){
  .kpi{background-image:none;transition:none}
  .kpi::before,.kpi::after{display:none}
  .kpi:hover{transform:none;box-shadow:var(--sh-1),inset 0 1px 0 var(--hi)}
}

.grid2{display:grid;grid-template-columns:1.5fr 1fr;gap:14px}
.bento-row{display:grid;gap:14px;margin-bottom:14px}
.bento-row.r-60-40{grid-template-columns:1.5fr 1fr}
.bento-row.r-50-50{grid-template-columns:1fr 1fr}
.bento-row.r-55-45{grid-template-columns:1.2fr 1fr}

/* ───────── الجداول ───────── */
.tbl-tools{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin-bottom:10px}
.tbl-search{
  flex:1;min-width:150px;max-width:280px;background:var(--bg);border:1px solid var(--border);
  color:var(--ink);padding:8px 12px;border-radius:var(--r-sm);font-size:12.5px;
  font-family:var(--f-body);min-height:var(--tap-sm);
}
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:12.5px}
th{
  text-align:start;color:var(--ink-faint);font-weight:600;font-size:11.5px;
  padding:9px 8px;border-bottom:1px solid var(--border);white-space:nowrap;
}
th[data-sort]{cursor:pointer;user-select:none}
th[data-sort]:hover{color:var(--ink)}
th[data-sort]::after{content:'';display:inline-block;width:0;height:0;margin-inline-start:5px;vertical-align:2px}
th[aria-sort="ascending"]::after{border:4px solid transparent;border-bottom-color:var(--accent);vertical-align:1px}
th[aria-sort="descending"]::after{border:4px solid transparent;border-top-color:var(--accent);vertical-align:-3px}
td{padding:10px 8px;border-bottom:1px solid var(--border);vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr{transition:background var(--t-fast)}
tbody tr:hover{background:var(--surface-2)}

.pager{display:flex;align-items:center;gap:var(--s2);margin-top:12px;flex-wrap:wrap}
.pager-info{font-size:11.5px;color:var(--ink-faint);margin-inline-start:auto;font-variant-numeric:tabular-nums}

/* ───────── الحبّات ───────── */
.pill{
  font-size:11px;font-weight:700;padding:3px 9px;border-radius:var(--r-pill);
  display:inline-block;white-space:nowrap;
}
.pill-good{background:var(--good-soft);color:var(--good)}
.pill-warn{background:var(--warn-soft);color:var(--warn)}
.pill-bad{background:var(--bad-soft);color:var(--bad)}
.pill-accent{background:var(--accent-soft);color:var(--accent)}
.pill-info{background:var(--info-soft);color:var(--info)}
.pill-mute{background:var(--surface-3);color:var(--ink-dim)}
.chip{
  display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;
  padding:3px 8px;border-radius:var(--r-pill);font-variant-numeric:tabular-nums;
}
.chip-up{background:var(--good-soft);color:var(--good)}
.chip-dn{background:var(--bad-soft);color:var(--bad)}

/* ───────── الأزرار ─────────
   ثلاث طبقات: جسم ملوّن، خيط ضوء على الحافة العليا، ظل خارجي.
   لمعة تكنس مرّة عند المرور، وغَوص حقيقي عند الضغط. */
.btn{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:var(--tap);padding:0 var(--s5);border-radius:var(--r-sm);
  font-family:var(--f-body);font-size:13px;font-weight:600;line-height:1;
  cursor:pointer;border:1px solid transparent;white-space:nowrap;
  background:var(--accent);color:var(--accent-ink);
  box-shadow:var(--sh-1),inset 0 1px 0 var(--hi-strong),inset 0 -1px 0 var(--lo);
  transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast),
             background var(--t-base),border-color var(--t-base),color var(--t-base);
}
.btn::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,transparent 32%,var(--hi-strong) 47%,transparent 62%);
  transform:translateX(115%);opacity:0;
  transition:transform var(--t-sweep) var(--ease-out),opacity 90ms linear;
}
/* ═══ التحويم يتوقّف أثناء العمل ═══
   `pointer-events:none` تمنع استقبال النقرات، لكنّها **لا تُلغي حالة
   `:hover` القائمة**: المتصفّح يُبقيها حتى تتحرّك الفأرة. ويدُ من ضغط
   الزرّ واقفةٌ فوقه — فيبقى على لون التحويم `--accent-2` وهو أفتح، ونصّه
   الأبيض عليه بلا تباين. فيُقرأ الزرّ «مطفأً» وهو بكامل لونه وشفافيّته.

   وأُهدرت في هذا ثلاث محاولاتِ إصلاحٍ ظنّت البهتان `opacity`، حتى قيس
   المحسوب: `opacity: 1` و`bg: oklch(0.765 …)` — أي لونٌ آخر لا شفافيّةٌ
   أقلّ. والقياس أنهى الجدل في سطر. */
.btn:not(.loading):hover::after{transform:translateX(-115%);opacity:.5}
.btn:not(.loading):hover{background:var(--accent-2);box-shadow:var(--sh-2),inset 0 1px 0 var(--hi-strong)}
.btn:active{transform:translateY(1px) scale(.985);box-shadow:inset 0 2px 5px var(--lo)}
.btn:disabled{cursor:not-allowed;opacity:.45;transform:none}
.btn:disabled::after{display:none}
.btn svg{flex:none}

.btn-ghost{background:var(--surface-2);color:var(--ink);border-color:var(--border);box-shadow:inset 0 1px 0 var(--hi)}
.btn-ghost:not(.loading):hover{background:var(--surface-3);color:var(--ink);border-color:var(--border-strong);box-shadow:var(--sh-1),inset 0 1px 0 var(--hi)}
.btn-quiet{background:transparent;color:var(--ink-dim);border-color:transparent;box-shadow:none}
.btn-quiet:not(.loading):hover{background:var(--surface-2);color:var(--ink);box-shadow:none}
.btn-sm{min-height:var(--tap-sm);padding:0 var(--s4);font-size:12px;border-radius:var(--r-xs)}
.btn-lg{min-height:56px;padding:0 var(--s6);font-size:15px;border-radius:var(--r-md);font-weight:700}
.btn-block{width:100%}

/* الخطر — ضغط مستمر ثانية بدل نقرة واحدة */
.btn-danger{background:var(--bad-soft);color:var(--bad);border-color:var(--bad);box-shadow:inset 0 1px 0 var(--hi)}
.btn-danger:not(.loading):hover{background:var(--bad);color:var(--accent-ink);border-color:var(--bad)}
/* ═══ شريط الامتلاء لكلّ زرٍّ مطوّل لا للخطر وحده ═══
   كان مقصورًا على `.btn-danger`، فزرٌّ آخر يستعمل `holdConfirm` — كزرّ
   خروج العامل — يُضغط ثانيةً كاملةً **بلا أن يتحرّك فيه شيء**. فيرفع
   المستخدم إصبعه ظنًّا أنّه معطّل، ويُلغى المؤقّت قبل أن يتمّ.
   والضغط المطوّل بلا أثرٍ مرئيّ ليس واجهة، هو لغز. */
.btn::before{content:'';position:absolute;inset:0;z-index:0;inset-inline-end:auto;
  width:0;background:var(--accent-2);opacity:.55;transition:width 0ms linear;
  pointer-events:none;border-radius:inherit}
.btn.holding::before{width:100%;transition:width 1000ms linear}
.btn-ghost::before{background:var(--accent);opacity:.35}
.btn-danger::before{background:var(--bad);opacity:1;z-index:-1}
.btn-danger.holding::before{width:100%;transition:width 1000ms linear}
/* النصّ فوق الشريط لا تحته */
.btn > .btn-label{position:relative;z-index:1}
.btn-danger.holding,.btn-danger.armed{color:var(--accent-ink)}
.btn-danger.armed{background:var(--bad)}

/* التحميل — العرض ثابت فلا يقفز التخطيط */
.btn.loading{pointer-events:none}
.btn.loading .btn-label{opacity:.35}

/* ───────── زرٌّ يُبلّغ تقدّمه ─────────
   الدوّارة العامّة تغطّي نصّ الزرّ وتُخفته إلى ٣٥٪ — وهو تصرّفٌ صحيح لفعلٍ
   يستغرق ثانية: لا نصّ يتغيّر، والدوّارة كل الخبر. أمّا فعلٌ يستغرق دقيقة
   ويعدّ («٢٠ من ٤٧») فإخفاء عدّاده يجعله يبدو **معلّقًا** — وهو يعمل.

   فهذا الصنف يقلب الترتيب: الحركة **بجانب** النصّ، والنصّ بكامل وضوحه.
   يُستعمل لكل فعلٍ طويل: الاستيراد، والطباعة الكثيرة، والإرسال الدفعيّ. */
.btn-progress .btn-belt{display:none;flex:none;align-items:center}
.btn-progress.loading .btn-belt{display:inline-flex}
.btn-progress.loading .btn-label{opacity:1}
.btn-progress.loading{gap:9px}
/* `guard` يعطّل الزرّ أثناء العمل، و`.btn:disabled` يُبهت الزرّ **كلّه**
   إلى ٤٥٪ — فيصير العدّاد باهتًا فوق باهت ويعود الزرّ يبدو معلّقًا.
   والتعطيل هنا معناه «مشغول» لا «ممنوع»: الحركة تقول إنه يعمل، والبهتان
   يقول إنه لا يعمل — ورسالتان متناقضتان أسوأ من غياب إحداهما. */
.btn-progress.loading:disabled{opacity:1;cursor:progress}
.btn-belt svg{overflow:visible;fill:currentColor}

/* السير: ثلاثة صناديق تعبر بالتتابع على قضيبٍ متحرّك.
   تقول «العمل جارٍ ولن يقف» — وهي ما يحتاجه من ينتظر دقيقة. */
@keyframes belt-run{
  0%  {transform:translateX(26px);opacity:0}
  12% {opacity:1}
  88% {opacity:1}
  100%{transform:translateX(-30px);opacity:0}
}
@keyframes belt-rail{to{transform:translateX(-8px)}}
.btn-belt .cv > g{animation:belt-run 1.6s linear infinite}
.btn-belt .cv > g:nth-child(2){animation-delay:.53s}
.btn-belt .cv > g:nth-child(3){animation-delay:1.06s}
.btn-belt .rail{stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;
  stroke-dasharray:3 3;animation:belt-rail .4s linear infinite}
@media (prefers-reduced-motion:reduce){
  .btn-belt .cv > g,.btn-belt .rail{animation:none}
  .btn-belt .cv > g{opacity:1}
}
.btn-spin{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:3}
.btn.loading .btn-spin{display:flex}

/* ───────── شريط التقدّم تحت الزرّ ─────────
   زرٌّ يعمل ليس زرًّا ممنوعًا: `has-bar` تُخرجه من بهتان `:disabled` ومن
   إخفاء نصّه، وتُطفئ الدوّارة التي كانت تغطّيه — الحركة انتقلت إلى الشريط.
   والمؤشّر `progress` لا `not-allowed`: الأوّل يقول «انتظر»، والثاني «ممنوع». */
/* بلا شرط `has-bar`: كان البهتان يُلغى للأزرار ذات الشريط وحدها، فبقي
   زرٌّ يعمل مطفأً كلّما تعذّر إدراج الشريط — في خليّة جدول، أو حيث لا
   حاوية تصلح. والتمييز الصحيح بين «يعمل» و«ممنوع» لا بين «له شريط»
   و«بلا شريط»: `loading` وحدها تكفي، وهي لا تُوضع إلّا على زرٍّ يشتغل. */
.btn.loading:disabled{opacity:1;cursor:progress;transform:none}
/* والنصّ يبقى مقروءًا حيث يحمله الشريط. وحيث لا شريط تبقى الدوّارة فوقه
   والنصّ خافتًا — قاعدة `.btn.loading .btn-label` أعلاه — لأن الدوّارة
   تغطّيه، ولا سبيل لقراءته تحتها. */
.btn.loading.has-bar .btn-label{opacity:1}
.btn.loading.has-bar .btn-spin{display:none}

/* 0fr → 1fr: الارتفاع يُقاس من المحتوى، فلا رقمَ نخمّنه ولا قفزة حين يطول
   النصّ. (`height:auto` لا يُحرَّك، و`max-height` مخمَّن يقفز أو يقصّ.) */
/* `flex-basis:100%` شبكة أمان: لو وقع الشريط داخل صفٍّ مرن رغم فحص الحاوية،
   يأخذ سطرًا كاملًا بدل أن يصير خيطًا بعرض ما تبقّى. */
.gbar-slot{display:grid;grid-template-rows:0fr;margin-top:0;flex:1 1 100%;
  transition:grid-template-rows var(--t-base) var(--ease-out),
             margin-top var(--t-base) var(--ease-out)}
.gbar-slot > div{overflow:hidden;min-height:0}
.gbar-slot.on{grid-template-rows:1fr;margin-top:8px}
.gbar{height:6px;border-radius:99px;background:var(--surface-3);overflow:hidden;
  max-width:340px;position:relative}
.gbar > i{display:block;height:100%;width:0;background:var(--accent);
  border-radius:99px;transition:width var(--t-base) var(--ease-out)}
.gbar-txt{font-family:var(--f-mono);font-variant-numeric:tabular-nums;
  font-size:11.5px;color:var(--ink-dim);margin-top:5px;min-height:1em}

/* الموجة: لنداءٍ واحدٍ لا نسبة له. تروح وتجيء بلا رقم — واختراعُ نسبةٍ
   هنا كذبٌ يُفتضح حين تقف عند ٩٠٪ دقيقةً كاملة. */
.gbar-slot.wave .gbar > i{width:38%;transition:none;animation:gbar-wave 1.15s var(--ease-out) infinite}
@keyframes gbar-wave{
  0%  {transform:translateX(-160%)}
  100%{transform:translateX(360%)}
}
@media (prefers-reduced-motion:reduce){
  .gbar-slot{transition:none}
  .gbar-slot.wave .gbar > i{animation:none;width:100%;opacity:.45}
}
@media print{.gbar-slot{display:none!important}}

/* صفٌّ لحسابٍ موقوف: يبقى في الجدول للسجلّ — حذفُه يمحو من عمل أشهرًا —
   لكنّه يُقرأ كخلفيّة لا كصفٍّ عامل. */
tr.row-off > td{opacity:.5}
tr.row-off > td:last-child{opacity:1}
.btn-spin svg{animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn.done{background:var(--good)!important;color:var(--accent-ink)!important;border-color:var(--good)!important}
.btn.done .btn-label,.btn.done .btn-spin{opacity:0}
.btn-check{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;z-index:3}
.btn.done .btn-check{opacity:1}
/* stroke-dasharray وارثة فتعبر حدود ظلّ الـ<use> */
.btn.done .btn-check svg{stroke-dasharray:26;stroke-dashoffset:26;animation:draw .34s var(--ease-out) .07s forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* المفتاح المقطعي — قرص منزلق، موضعه يُحسب من offsetLeft فيصحّ في RTL */
.seg{position:relative;display:inline-flex;gap:2px;padding:4px;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--border);box-shadow:inset 0 1px 3px var(--lo)}
.seg-thumb{position:absolute;top:4px;bottom:4px;left:0;width:0;border-radius:var(--r-xs);background:var(--accent);box-shadow:0 2px 8px var(--lo),inset 0 1px 0 var(--hi-strong);transform:translateX(var(--tx,0));transition:transform var(--t-base) var(--ease-spring),width var(--t-base) var(--ease-spring);pointer-events:none}
.seg-btn{position:relative;z-index:1;border:0;background:none;cursor:pointer;font-family:var(--f-body);font-size:12px;font-weight:600;color:var(--ink-dim);padding:8px 14px;min-height:var(--tap-sm);border-radius:var(--r-xs);transition:color var(--t-base) var(--ease-out)}
.seg-btn[aria-pressed="true"]{color:var(--accent-ink)}

/* ───────── النماذج ───────── */
.form-row{display:flex;gap:var(--s2);margin-bottom:10px;flex-wrap:wrap;align-items:center}

/* ───────── حقلٌ بتسميته ─────────
   الـplaceholder يختفي بمجرّد الكتابة، فحقلٌ ممتلئ يصير بلا هويّة — وصفٌّ
   من خمسة حقولٍ فارغة متجاورة يُملأ بالتخمين. والتسمية فوقه تبقى، وتُقرأ
   لقارئ الشاشة كذلك (label/for).
   والصفّ يُحاذى من الأسفل (`align-items:flex-end`) ليقف الزرّ في سطر
   الحقول لا في منتصف ارتفاعها. */
.form-row.labeled{align-items:flex-end}
.fld{display:flex;flex-direction:column;gap:5px;min-width:0}
.fld > label{font-size:11px;color:var(--ink-faint);white-space:nowrap}
.fld > input,.fld > select{width:100%}
/* مربّع اختيارٍ يقف كحقل: إطارٌ بارتفاع الحقول لا علامةٌ سابحة بينها */
.fld-check{display:flex;align-items:center;gap:7px;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:0 12px;min-height:var(--tap-sm);font-size:12.5px;white-space:nowrap}
.fld-check:hover{border-color:var(--border-strong)}
.fld-check input{min-height:auto}
/* رقم الخطوة: نموذجٌ من خطوتين يُقرأ خطوةً خطوة لا كتلةً واحدة */
.step-t{display:flex;align-items:center;gap:8px;font-family:var(--f-display);
  font-size:13.5px;font-weight:800;margin:0 0 10px}
.step-t i{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:22px;height:22px;border-radius:50%;background:var(--accent-soft);color:var(--accent);
  font-size:12px;font-style:normal}
.step-t span{font-family:var(--f-body);font-size:12px;font-weight:400;color:var(--ink-faint)}
input,select,textarea{
  background:var(--bg);border:1px solid var(--border);color:var(--ink);
  padding:9px 12px;border-radius:var(--r-sm);font-size:13px;font-family:var(--f-body);
  min-height:var(--tap-sm);
}
input:hover,select:hover,textarea:hover{border-color:var(--border-strong)}
input[type="checkbox"]{min-height:auto;width:17px;height:17px;accent-color:var(--accent);cursor:pointer}
label{font-size:12.5px;color:var(--ink-dim)}

/* ───────── الحالات ───────── */
.loading{color:var(--ink-faint);font-size:13px;padding:28px;text-align:center}
.empty{color:var(--ink-faint);font-size:12.5px;padding:22px;text-align:center;line-height:1.6}
.error{color:var(--bad);font-size:12.5px;padding:12px 14px;background:var(--bad-soft);border-radius:var(--r-sm);border:1px solid color-mix(in oklab,var(--bad) 34%,transparent)}
.skeleton{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 50%,var(--surface-2) 75%);background-size:200% 100%;animation:shim 1.3s infinite;border-radius:var(--r-xs);color:transparent}
@keyframes shim{to{background-position:-200% 0}}

/* ───────── البانرات ───────── */
.ban{position:relative;display:flex;gap:var(--s3);align-items:flex-start;padding:13px 16px;border-radius:var(--r-md);overflow:hidden;border:1px solid;font-size:13px;line-height:1.6;margin-bottom:12px}
.ban::before{content:'';position:absolute;inset-block:0;inset-inline-start:0;width:3px}
.ban-ico{flex:none;margin-top:1px}
.ban-t{font-weight:600;color:var(--ink)}
.ban-d{color:var(--ink-dim);font-size:12px}
.ban-act{margin-inline-start:auto;align-self:center;flex:none}
.ban-info{background:var(--info-soft);border-color:color-mix(in oklab,var(--info) 34%,transparent)}
.ban-info::before{background:var(--info)} .ban-info .ban-ico{color:var(--info)}
.ban-good{background:var(--good-soft);border-color:color-mix(in oklab,var(--good) 34%,transparent)}
.ban-good::before{background:var(--good)} .ban-good .ban-ico{color:var(--good)}
.ban-warn{background:var(--warn-soft);border-color:color-mix(in oklab,var(--warn) 34%,transparent)}
.ban-warn::before{background:var(--warn)} .ban-warn .ban-ico{color:var(--warn)}
.ban-bad{background:var(--bad-soft);border-color:color-mix(in oklab,var(--bad) 38%,transparent)}
.ban-bad::before{background:var(--bad)} .ban-bad .ban-ico{color:var(--bad)}
.ban-promo{background:var(--promo-soft);border-color:color-mix(in oklab,var(--promo) 34%,transparent)}
.ban-promo::before{background:var(--promo)} .ban-promo .ban-ico{color:var(--promo)}

/* ───────── التوستات — تطفو فلا تزيح التخطيط ───────── */
.toast-stack{position:fixed;inset-block-start:16px;inset-inline-start:16px;z-index:90;display:flex;flex-direction:column;gap:8px;max-width:min(380px,calc(100vw - 32px));pointer-events:none}
.toast{
  pointer-events:auto;display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--sh-2);font-size:12.5px;line-height:1.55;
  animation:toast-in 200ms var(--ease-out);
}
.toast.out{animation:toast-out 160ms var(--ease-io) forwards}
.toast-good{border-inline-start:3px solid var(--good)} .toast-good .ic{color:var(--good)}
.toast-bad{border-inline-start:3px solid var(--bad)}   .toast-bad .ic{color:var(--bad)}
.toast-close{margin-inline-start:auto;background:none;border:0;color:var(--ink-faint);cursor:pointer;padding:2px 4px;font-size:15px;line-height:1}
@keyframes toast-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes toast-out{to{opacity:0;transform:translateY(-8px)}}

/* ───────── الخرائط الحرارية — ترميز مزدوج ─────────
   اللون = العمر · الارتفاع والشريط الداخلي = الإشغال.
   مقروءة كاملة بلا لون، وهذا ما كان ناقصًا. */
.occ-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:9px}
.bins{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:9px;max-height:360px;overflow-y:auto;padding:2px}
.hcell{
  --lift:3px;
  position:relative;border-radius:var(--r-sm);padding:9px 9px;cursor:pointer;min-height:var(--tap);
  transform:translateY(calc(var(--lift) * -1));
  box-shadow:0 var(--lift) 0 var(--lo),0 calc(var(--lift) + 4px) 10px rgba(0,0,0,.22),inset 0 1px 0 var(--hi-strong);
  transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out);
  border:0;font-family:var(--f-body);text-align:start;display:block;width:100%;
}
.hcell:hover{transform:translateY(calc((var(--lift) + 5px) * -1))}
/* صندوق تجاوز سعته — سطحه أحمر كسطح الراكد، فيحتاج علامة ثانية تفصله عنه:
   إطار متقطّع ونبض بطيء. المخالفة يجب أن تُقرأ بلا تمرير الفأرة فوقها. */
.hcell-over{outline:2px dashed var(--bad-ink,#fff);outline-offset:-4px;animation:hcell-pulse 2.4s var(--ease-out) infinite}
@keyframes hcell-pulse{0%,100%{outline-color:rgba(255,255,255,.85)}50%{outline-color:rgba(255,255,255,.28)}}
@media (prefers-reduced-motion:reduce){.hcell-over{animation:none}}
/* موقع بلا حركة مسجّلة — سطحه محايد، فنصّه يقرأ من رموز النص لا من accent-ink */
.hcell-idle{border:1px solid var(--border)}
.hcell-idle .hcell-z{color:var(--ink-faint)}
.hcell-idle .hcell-p{color:var(--ink-dim)}
.hcell-idle .hcell-bar{background:var(--border)}
.hcell-idle .hcell-bar i{background:var(--ink-faint)}
.hcell-note{display:block;font-family:var(--f-mono);font-size:9.5px;color:var(--accent-ink);opacity:.72;margin-top:3px;direction:ltr;text-align:end}
.hcell-idle .hcell-note{color:var(--ink-faint);opacity:1}
.hcell-z{display:block;font-family:var(--f-mono);font-size:11px;font-weight:600;color:var(--accent-ink);opacity:.92;direction:ltr;text-align:end}
.hcell-p{display:block;font-family:var(--f-display);font-size:17px;font-weight:900;color:var(--accent-ink);line-height:1.2;direction:ltr;text-align:end}
.hcell-bar{display:block;height:3px;border-radius:2px;background:rgba(0,0,0,.28);margin-top:5px;overflow:hidden}
.hcell-bar i{display:block;height:100%;background:rgba(255,255,255,.85);border-radius:2px}
.legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;font-size:11.5px;color:var(--ink-dim)}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-inline-end:6px;vertical-align:-1px}

.age-cell{border-radius:var(--r-xs);padding:4px 0;text-align:center;font-weight:700;font-size:11.5px;font-variant-numeric:tabular-nums}

/* ───────── الحلقة المُخرَّطة ─────────
   حافة عليا مضيئة وظل داخلي مزدوج، فتُقرأ كقرص معدني لا كدائرة مسطّحة. */
.wh-ring{position:relative;width:42px;height:42px;display:grid;place-items:center}
.wh-ring i{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from -90deg,var(--rc,var(--accent)) calc(var(--p,0)*1%),var(--surface-3) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent 62%,#000 65%);
  mask:radial-gradient(farthest-side,transparent 62%,#000 65%);
  box-shadow:inset 0 1px 2px var(--hi),inset 0 -2px 5px var(--lo);
}
.wh-ring b{
  position:relative;font-family:var(--f-mono);font-size:10.5px;font-weight:600;
  direction:ltr;font-variant-numeric:tabular-nums;color:var(--ink-dim);
}

/* ───────── تسجيل الدخول ─────────
   خلفية hero-wash نفسها المستعملة فـ ban-hero بدل نمط ألوان منفصل — تحترم
   تبديل الوضع النهاري/الليلي تلقائيًا بلا أي كود إضافي. توهّج البطاقة
   بـ color-mix على --accent (مستعمل أصلًا فـ .error/.ban أعلاه). */
.login-screen{min-height:100vh;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:var(--s4)}
.login-screen::before{content:'';position:absolute;inset:0;background:var(--hero-wash);opacity:.55}
.login-screen::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 70% at 50% -10%,rgba(255,255,255,.35),transparent 60%)}
.login-box{
  position:relative;z-index:1;width:min(340px,100%);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:30px 26px 26px;box-shadow:var(--sh-2),inset 0 1px 0 var(--hi);
  animation:login-glow 3.6s ease-in-out infinite;
}
@keyframes login-glow{
  0%,100%{box-shadow:var(--sh-2),inset 0 1px 0 var(--hi),0 0 0 0 color-mix(in oklab,var(--accent) 25%,transparent)}
  50%{box-shadow:var(--sh-2),inset 0 1px 0 var(--hi),0 0 34px 6px color-mix(in oklab,var(--accent) 20%,transparent)}
}
.login-box input{width:100%;margin-bottom:9px}
.login-sub{text-align:center;color:var(--ink-faint);font-size:12px;margin:-6px 0 18px}
.login-pw-row{position:relative;margin-bottom:9px}
.login-pw-row input{margin-bottom:0;padding-inline-end:60px}
.login-pw-toggle{
  position:absolute;inset-inline-end:4px;top:4px;bottom:4px;
  background:none;border:0;color:var(--ink-faint);font-size:11px;font-weight:600;
  cursor:pointer;padding:0 10px;border-radius:var(--r-xs);
}
.login-pw-toggle:hover{color:var(--accent);background:var(--surface-2)}

/* ───────── ملصق SKU للطباعة ───────── */
.label-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:95;padding:var(--s4)}
.label-modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s5);width:min(300px,100%);box-shadow:var(--sh-2)}
.label-modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s4);font-size:13.5px}
/* ══════════════════════════════════════════════════════════════════════
   المشهد الخلفيّ — شاحنات وطرود ورفوف تعبر ببطء
   ══════════════════════════════════════════════════════════════════════
   خلفيةٌ خلف لوحةٍ فيها أرقام وجداول مسألةُ انضباط لا زخرفة: كل حركةٍ
   تنافس ما يُقرأ. فثلاث قواعد تحكمها:

   • خافتة إلى حدّ الإحساس لا الرؤية (٦٪ في الليلي، ٤٪ في النهاري).
   • بطيئة جدًّا — الشاحنة تعبر الشاشة في نصف دقيقة لا في ثانيتين. الحركة
     السريعة تخطف العين قسرًا، والبطيئة تُحسّ بطرف النظر.
   • خطوطٌ بلا تعبئة: سيلويت رفيع يبقى خلف المحتوى ولا يصنع كتلًا داكنة.

   والألواح معتمة (--surface) فتحجبها تلقائيًّا — تبقى في الهوامش وحدها،
   وهو بالضبط موضعها الصحيح.

   وتُبنى بـtransform وحده: يُنفَّذ على كرت الشاشة بلا إعادة تخطيط، فالكلفة
   لا تُذكر مهما طال بقاء الصفحة مفتوحة. */
.bg-scene{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  color:var(--ink);opacity:.04;
  /* تتلاشى تحت الشريط العلوي بدل أن تُقطع عنده بخطّ حادّ */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 90px,#000 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 90px,#000 100%);
}
/* لا مشهد قبل الدخول: شاشة الدخول صندوقٌ في وسط فراغ، وحركةٌ خلفه
   تشتّت عن الحقل الذي يُكتب فيه. */
.bg-scene[hidden]{display:none}
:root[data-mode="night"] .bg-scene{opacity:.06}
@media (prefers-color-scheme:dark){
  :root:not([data-mode="light"]) .bg-scene{opacity:.06}
}

.bg-scene .pc{
  /* left فيزيائيّ لا منطقيّ: transform لا ينعكس في RTL، فخلطُ الاثنين
     يجعل نقطة البداية تعتمد على الاتّجاه والحركة لا تعتمد عليه. */
  position:absolute;top:var(--t,50%);left:0;
  width:calc(var(--w,120) * 1px);height:auto;
  animation:scene-drift var(--d,60s) linear infinite;
  animation-delay:var(--dl,0s);
  will-change:transform;
}
.bg-scene .pc svg,.bg-scene svg{display:block;width:100%;height:auto}

/* من اليمين إلى اليسار — اتّجاه القراءة نفسه، فتُقرأ الحركة تقدّمًا لا رجوعًا.
   والنهاية `-100%` نسبةً إلى عرض العنصر نفسه لا إلى الشاشة: تخرج كاملةً
   مهما كان حجمها ومهما ضاقت الشاشة. قيمةٌ بـvw كانت تترك الكبيرة عالقةً
   نصفَها ظاهرًا على الجوّال. */
@keyframes scene-drift{
  from{transform:translateX(100vw)}
  to  {transform:translateX(-100%)}
}

/* التبويب المخفيّ لا يُحرّك شيئًا — بطاريةٌ تُوفَّر بلا أن يُفقد شيء */
.bg-scene.paused .pc{animation-play-state:paused}
/* ومن طلب تقليل الحركة لا يرى مشهدًا أصلًا */
@media (prefers-reduced-motion:reduce){ .bg-scene{display:none} }

/* ───────── نافذة الأرقام التسلسلية ─────────
   الأرقام دليلٌ يُطابَق، والدليل لا يُحشر في خليّة جدول: ثلاثمئة رقم في خانة
   تجعل الصفّ بارتفاع شاشة ويصير الجدول غير مقروء. فتُعرض عدَّتُها في الجدول،
   وتُفتح كاملةً هنا حين تُطلب — مع بحثٍ، لأن السؤال الحقيقي ليس «اقرأ لي
   الثلاثمئة» بل «هل هذا الرقم فيها؟». */
.label-modal.wide{width:min(780px,100%);max-height:88vh;display:flex;flex-direction:column}
/* حجمٌ وسط: قائمةٌ تُقرأ سطرًا سطرًا لا شبكةُ أرقام — 300 تكسر العناوين و780 تبعثرها */
/* فاصلٌ رفيع داخل اللوح: لوحٌ فيه أربع كتلٍ متتابعة بلا فواصل يُقرأ
   كتلةً واحدة، والعين لا تجد أين تقف. */
.thin-sep{border-top:1px solid var(--border)}
.label-modal.mid{width:min(480px,100%);max-height:86vh;display:flex;flex-direction:column}
.label-modal.wide .modal-body,
.label-modal.mid .modal-body{overflow-y:auto;min-height:0;flex:1}
.modal-meta{display:flex;flex-wrap:wrap;gap:4px var(--s4);font-size:12px;color:var(--ink-dim);margin-bottom:var(--s3)}
.modal-meta b{color:var(--ink);font-weight:600}
.modal-acts{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--border)}
.serial-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:6px;
  font-family:var(--f-mono);font-size:12px;
}
.serial-chip{
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:6px 9px;direction:ltr;text-align:center;letter-spacing:.03em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.serial-chip.hit{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:700}
.serial-none{color:var(--ink-faint);font-size:12.5px;padding:var(--s4) 0;text-align:center}

/* بطاقة الملصق نفسها بيضاء دايمًا — تحاكي ورق الملصق الفعلي بغضّ النظر عن وضع الشاشة */
.label-card{background:#fff;color:#111;border-radius:var(--r-sm);padding:14px;margin-bottom:var(--s4);text-align:center}
.label-barcode{width:120px;height:120px;margin:0 auto;display:block}
.label-barcode svg{width:100%;height:100%;display:block}
.label-sku{font-family:var(--f-mono);font-weight:800;font-size:14px;margin-top:8px;letter-spacing:.02em}
.label-name{font-size:11px;color:#333;margin-top:3px}
.label-loc{font-family:var(--f-mono);font-size:10.5px;color:#555;margin-top:6px}

/* ───────── مبدّل الوضع ───────── */
.mode-toggle{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;width:100%;
  min-height:var(--tap-sm);padding:0 12px;border-radius:var(--r-sm);cursor:pointer;
  background:transparent;border:1px solid var(--border);color:var(--ink-dim);
  font-family:var(--f-body);font-size:12px;font-weight:600;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.mode-toggle:hover{background:var(--surface-2);color:var(--ink);border-color:var(--border-strong)}

/* ───────── الدخول الخفيف ───────── */
@keyframes fade-up-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.shell,.login-screen{animation:fade-up-in 240ms var(--ease-out)}
.reveal{animation:fade-up-in 280ms var(--ease-out) backwards}

/* ══════════════════════════════════════════════════════════════════════
   المؤشرات الفخمة — كل بُعد ثالث هنا يحمل معلومة، لا زخرفة
   ══════════════════════════════════════════════════════════════════════ */

/* ───────── شريط العنوان — العنصر التوقيعي ─────────
   A-01-R3-S2-B4 هو عنوان كل شيء مادي في المبنى: ما يمسحه العامل، وما يولّد
   الخريطة الحرارية، وما يقترحه نظام التخزين. يُعرض LTR داخل صفحة RTL لأن
   الكود لاتيني، بينما تسمياته عربية تُقرأ من اليمين. */
.addr{
  direction:ltr; display:inline-flex; align-items:stretch; gap:2px; vertical-align:middle;
  padding:6px; border-radius:var(--r-md); background:var(--surface-2);
  border:1px solid var(--border); box-shadow:inset 0 1px 0 var(--hi);
  max-width:100%; overflow-x:auto; scrollbar-width:thin;
}
.addr-seg{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:6px 10px; border-radius:var(--r-xs); min-width:46px;
  background:var(--surface); border:1px solid var(--border);
  transition:transform var(--t-fast) var(--ease-out),border-color var(--t-fast);
}
.addr-seg:hover{transform:translateY(-2px); border-color:var(--border-strong)}
.addr-c{font-family:var(--f-mono); font-size:13px; font-weight:600; color:var(--ink-dim); line-height:1.2}
.addr-l{direction:rtl; font-size:9px; color:var(--ink-faint); margin-top:2px; white-space:nowrap}
/* آخر مستوى يأخذ لون الهوية — العمق هو المعنى: كلما تعمّقت زاد التحديد */
.addr-seg.leaf{background:var(--accent-soft); border-color:var(--accent-line)}
.addr-seg.leaf .addr-c{color:var(--accent)}
.addr-sep{display:flex; align-items:center; color:var(--ink-faint); font-size:10px; padding:0 1px}
/* مضغوط — داخل خلايا الجداول: بلا تسميات ولا إطار */
.addr.compact{padding:0; background:none; border:0; box-shadow:none; gap:1px}
.addr.compact .addr-seg{padding:2px 6px; min-width:0; background:var(--surface-2); border-color:transparent}
.addr.compact .addr-seg:hover{transform:none}
.addr.compact .addr-c{font-size:11.5px}
.addr.compact .addr-l{display:none}
/* كبير — شاشة المسح عند العامل، يُقرأ من مسافة ذراع */
.addr.lg{padding:8px}
.addr.lg .addr-seg{padding:10px 13px; min-width:60px}
.addr.lg .addr-c{font-size:22px}
.addr.lg .addr-l{font-size:10px}

/* ───────── الصندوق الحجمي ثلاثي الأبعاد ─────────
   الإشغال في نموذج البيانات محسوب بالحجم: max(القطع/السعة، م³/السعة).
   فصندوقٌ يمتلئ حجميًا ليس تأثيرًا بصريًا، بل أصدق تمثيل ممكن للرقم. */
.bin3d{width:132px; max-width:100%}
.bin3d svg{width:100%; height:auto; display:block; overflow:visible}
.bin3d .fill-g{transition:transform 1s var(--ease-out)}
.bin3d .b-tick{stroke:var(--border-strong); stroke-width:1; fill:none}
.bin3d .b-lab{font-family:var(--f-mono); font-size:7px; fill:var(--ink-faint)}

/* ───────── عدّاد الإبرة ─────────
   مناطقه الثلاث هي عتبات المتجر نفسها (30/60/90) — يعرض السياسة لا رقمًا مجرّدًا */
.dial{width:200px; max-width:100%}
.dial svg{width:100%; height:auto; display:block}
.dial .needle{transform-origin:100px 92px; transition:transform 1.1s var(--ease-spring)}
.dial .zone{opacity:.55}
.dial .d-tick{stroke:var(--ink-faint); stroke-width:1.4; opacity:.6; fill:none}
.dial .d-lab{font-family:var(--f-mono); font-size:9px; fill:var(--ink-faint)}
.dial .hub{fill:var(--surface-3); stroke:var(--border-strong)}
.dial .d-val{font-family:var(--f-display); font-size:19px; font-weight:900; fill:var(--ink)}

/* ───────── شريط الرف الطبقي ─────────
   آلة حالات المخزون الحقيقية في شريحة واحدة بدل أربعة أرقام منفصلة */
.rack-bar{display:flex; height:36px; border-radius:var(--r-xs); overflow:hidden; box-shadow:var(--sh-1),inset 0 -2px 4px var(--lo)}
.rack-seg{position:relative; width:0; transition:width .9s var(--ease-out); box-shadow:inset 0 1px 0 var(--hi-strong); border-inline-end:1px solid var(--lo)}
.rack-seg:last-child{border-inline-end:0}
.rack-seg span{position:absolute; inset:0; display:grid; place-items:center; font-family:var(--f-mono); font-size:11px; font-weight:600; color:var(--accent-ink); opacity:0; transition:opacity .4s .5s}
.rack-seg.wide span{opacity:1}

/* ───────── سبارك لاين متدرّج ─────────
   الزمن يُقرأ من شدّة اللون، والنقطة الأخيرة تنبض لتشير إلى «الآن» */
.spark{width:100%; height:auto; display:block; overflow:visible}
.spark .s-line{stroke-dasharray:400; stroke-dashoffset:400; animation:draw-l 1.3s var(--ease-out) .2s forwards}
@keyframes draw-l{to{stroke-dashoffset:0}}
.spark .s-dot{animation:beat 2.2s var(--ease-io) infinite}
@keyframes beat{0%,100%{r:3.4; opacity:1} 50%{r:4.6; opacity:.7}}

/* ───────── الحلقة المزدوجة — الفعليّ مقابل الهدف ───────── */
.ring2{position:relative; width:118px; height:118px; display:grid; place-items:center; margin:0 auto}
.ring2 .r-base,.ring2 .r-fill,.ring2 .r-bevel{
  position:absolute; inset:0; border-radius:50%;
  -webkit-mask:radial-gradient(farthest-side,transparent 68%,#000 70%);
  mask:radial-gradient(farthest-side,transparent 68%,#000 70%);
}
.ring2 .r-base{background:var(--surface-3)}
.ring2 .r-fill{background:conic-gradient(from -90deg,var(--rc,var(--accent)) calc(var(--p,0)*1%),transparent 0)}
.ring2 .r-bevel{box-shadow:inset 0 1px 2px var(--hi),inset 0 -2px 6px var(--lo); pointer-events:none}
.ring2 .r-target{
  position:absolute; inset:-9px; border-radius:50%; opacity:.75;
  background:conic-gradient(from -90deg,var(--warn) calc(var(--q,0)*1%),transparent 0);
  -webkit-mask:radial-gradient(farthest-side,transparent 92%,#000 94%);
  mask:radial-gradient(farthest-side,transparent 92%,#000 94%);
}
.ring2 .r-mid{position:relative; text-align:center}
.ring2 .r-num{font-family:var(--f-display); font-size:29px; font-weight:900; line-height:1; direction:ltr; font-variant-numeric:tabular-nums; color:var(--ink)}
.ring2 .r-sub{font-size:10px; color:var(--ink-faint); margin-top:3px}

/* ───────── بانر البطل ───────── */
.ban-hero{
  position:relative; overflow:hidden; border-radius:var(--r-lg); padding:var(--s5);
  background:var(--hero-wash); color:var(--hero-ink);
  border:1px solid var(--border-strong); box-shadow:var(--sh-2),inset 0 1px 0 rgba(255,255,255,.26);
  margin-bottom:14px;
}
.ban-hero::after{content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(120% 80% at 88% -20%,rgba(255,255,255,.3),transparent 58%)}
.ban-hero h3{font-size:20px; font-weight:800; margin:0 0 6px; position:relative; z-index:1}
.ban-hero p{font-size:13px; opacity:.87; max-width:56ch; position:relative; z-index:1; margin:0 0 14px}
.ban-hero .hero-row{position:relative; z-index:1; display:flex; gap:var(--s2); flex-wrap:wrap}
.ban-hero .btn-ghost{background:rgba(255,255,255,.15); color:var(--hero-ink); border-color:rgba(255,255,255,.3); backdrop-filter:blur(6px)}
.ban-hero .btn-ghost:hover{background:rgba(255,255,255,.25); color:var(--hero-ink)}

/* ───────── زر عامل المخزن ─────────
   قاعدة سميكة تغوص 4px عند اللمس — إحساس مادّي يُغني عن تغذية راجعة بصرية
   في بيئة يكون فيها الهاتف على مسافة ذراع وباليد قفاز. */
.btn-worker{
  min-height:60px; width:100%; font-size:16px; font-weight:700; border-radius:var(--r-md);
  background:var(--accent); color:var(--accent-ink);
  box-shadow:0 4px 0 var(--accent-line),var(--sh-2),inset 0 1px 0 var(--hi-strong);
  transition:transform 90ms var(--ease-out),box-shadow 90ms var(--ease-out),background var(--t-base);
}
.btn-worker:hover{background:var(--accent-2); box-shadow:0 4px 0 var(--accent-line),var(--sh-2),inset 0 1px 0 var(--hi-strong)}
.btn-worker:active{transform:translateY(4px); box-shadow:0 0 0 var(--accent-line),inset 0 2px 6px var(--lo)}

/* ───────── الاستجابة ───────── */
@media (max-width:1100px){
  .kpis-6{grid-template-columns:repeat(3,1fr)}
  .kpis{grid-template-columns:repeat(3,1fr)}
  .bento-row.r-60-40,.bento-row.r-50-50,.bento-row.r-55-45,.grid2{grid-template-columns:1fr}
}
@media (max-width:820px){
  /* الشريط الجانبي ينهار لشريط أفقي — لم يكن ينهار أبدًا قبل اليوم */
  .shell{grid-template-columns:1fr}
  .nav{
    border-inline-start:0;border-bottom:1px solid var(--border);
    display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:10px 12px;
    position:sticky;top:0;z-index:30;
  }
  .nav .brand{padding:0 8px 0 0;margin-inline-end:auto}
  .nav-item{margin-bottom:0;padding:9px 11px}
  .nav-item.active::before{top:auto;bottom:0;inset-inline-start:9px;inset-inline-end:9px;width:auto;height:3px}
  .nav-sep,.nav-label{display:none}
  .main{padding:16px 14px}
  .live-badge,.alert-badge,.poll-paused-badge{margin:0}
}
@media (max-width:600px){
  .kpis,.kpis-6{grid-template-columns:repeat(2,1fr)}
  .page-title{font-size:22px}
  .panel{padding:14px}
  th,td{padding:8px 6px}
  .toast-stack{inset-inline:12px auto;max-width:calc(100vw - 24px)}
}

/* ───────── احترام تقليل الحركة ───────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .btn:hover::after{display:none}
}

/* ───────── الطباعة الورقية — لوحة المتجر تُطبع ───────── */
@media print{
  :root{--bg:#fff;--surface:#fff;--ink:#111;--ink-dim:#444;--ink-faint:#666;--border:#ccc}
  .nav,.btn,.tbl-tools,.pager,.toast-stack,.mode-toggle{display:none!important}
  .shell{grid-template-columns:1fr}
  .panel{break-inside:avoid;box-shadow:none;border:1px solid #ccc}

  /* ملصق SKU مفتوح: اطبع الملصق فقط واخفِ كل شيء آخر في الصفحة */
  body:has(#wh-label-host .label-overlay)>*:not(#wh-label-host){display:none!important}
  .label-overlay{position:static;background:#fff;padding:0}
  .label-modal{box-shadow:none;border:none;width:auto}
  .label-modal-head{display:none!important}
}