/*
  هشام ربيع — الورقة المشتركة للأسطح التلاتة.
  index.html (موبايل العميل) · branch.html (تابلت الفرع) · admin.html (شاشة الإدارة)

  توكنز البراند بتاعت العميل نفسه، مستخرجة من الـinline CSS على heshamrabea.com
  (CLIENT-BRIEF.md §6): الدهبي والأسود وMontserrat مقفولين. اللي حواليهم — الكاست الدافي
  ومادة النحاس وبركة الضوء — هو التوسعة.

  الفكرة الحاكمة: النحاس بيغيّر شغله بحسب مسافة النظر.
    موبايل (٣٠سم) = مادة  ·  فرع (٢م) = حالة  ·  إدارة (٦٠سم) = بيانات
  اللي ثابت: الدهبي عنده وظيفة واحدة — بيقول لعينك تبص فين.

  تباين مقيس: #C9A24D على #0E0C09 = 7.9:1 (AAA). على أبيض = 2.4:1 (راسب).
  يعني الدهبي يحمل معنى على الغامق بس — وده سبب إن الأسطح التلاتة غامقة.
*/
:root{
  --brass:#C9A24D;              /* pinned client gold */
  --brass-hi:#EFD9A6;
  --brass-lo:#8A6C31;
  --brass-deep:#5E4A22;
  --engrave:#3B2E13;

  --void:#070605;               /* خلفية برّه الجهاز — مش #000 صافي (OLED smear) */
  --ink:#0E0C09;                /* lacquer black, warm cast */
  --ink-2:#161309;
  --ink-3:#1F1A11;
  --ink-4:#2A2418;

  --text:#F7F2E7;
  --text-2:#B5AB96;             /* warm secondary — 7.2:1 on --ink */
  --text-3:#8B8271;             /* warm tertiary — 4.6:1 on --ink */

  --hair:rgba(201,162,77,.22);
  --hair-soft:rgba(247,242,231,.07);
  --live:#6FCF97;
  --warn:#E0A03A;
  --bad:#D9705C;                /* 4.6:1 على --ink — الرفض/الخطر */

  --ar:'Cairo',-apple-system,'Noto Sans Arabic',Tahoma,sans-serif;
  --num:'Montserrat',-apple-system,Arial,sans-serif;

  /* سلّم الأبليكيشن — density 4، مريح */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  /* سلّم الإدارة — density 8، كثيف. ux-ux-pro-max: dashboards = 8–32 */
  --d1:4px; --d2:8px; --d3:12px; --d4:16px; --d5:20px; --d6:24px; --d7:32px;

  --r:14px;                     /* card radius stays 12–16 */
  --pad:20px;
  --ease:cubic-bezier(.16,1,.3,1);

  /* حلقة تركيز واحدة لكل حاجة تفاعلية في النظام كله */
  --ring:2px solid var(--brass-hi);
  --ring-off:3px;

  /* أقل هدف لمس. الفرع بيرفعها لـ56 (قاعدة Digital Signage/Kiosk) */
  --tap:44px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--void);color:var(--text);font-family:var(--ar);
  min-height:100dvh;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
button{font-family:inherit;border:0;background:none;color:inherit;cursor:pointer}
a{color:var(--brass)}

/* حلقة التركيز — بند إلزامي، مش تحسين. أي عنصر تفاعلي جديد يتضاف هنا. */
.btn:focus-visible,.row:focus-visible,.slot:focus-visible,.style:focus-visible,
.chip:focus-visible,.iconbtn:focus-visible,.tabs button:focus-visible,
nav button:focus-visible,.qrow button:focus-visible,.tap:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,
.cell:focus-visible,summary:focus-visible{
  outline:var(--ring);outline-offset:var(--ring-off);
}

.num{font-family:var(--num);font-variant-numeric:tabular-nums;direction:ltr;display:inline-block}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ══════════════════════════════════════════════════════
   ١ — موبايل العميل
   ══════════════════════════════════════════════════════ */
#app{
  width:100%;max-width:430px;height:100dvh;position:relative;margin:0 auto;
  display:flex;flex-direction:column;overflow:hidden;
  background:
    radial-gradient(125% 48% at 50% -6%, rgba(201,162,77,.17), transparent 60%),
    radial-gradient(80% 40% at 50% 104%, rgba(201,162,77,.05), transparent 70%),
    var(--ink);
}
body.phone{display:flex;justify-content:center}
/* في وضع standalone على بعض الأجهزة 100dvh بيقف قبل حافة الشاشة، فبيفضل شريط بلون
   --void تحت الشريط السفلي — ويتحسب env(safe-area-inset-bottom) فوقه مرتين.
   التثبيت على inset:0 بيخلّي الأبليكيشن يغطّي الجهاز كله، فالإزاحة ترجع صح.
   max-width:430px + margin:0 auto لسه بيوسّطوه على التابلت. */
@media (max-width:899px){
  body.phone{overflow:hidden}
  #app{position:fixed;inset:0;height:auto}
}
@media (min-width:900px){
  body.phone{align-items:center;padding:26px}
  #app{height:min(892px,94dvh);border-radius:42px;
    box-shadow:0 40px 90px rgba(0,0,0,.7),0 0 0 1px rgba(201,162,77,.13)}
}

/* viewport-fit=cover يمدّ الصفحة تحت شريط الحالة في وضع standalone — لازم إزاحة الأمان */
header{flex:0 0 auto;display:flex;align-items:center;gap:var(--s3);
  padding:max(18px, env(safe-area-inset-top)) var(--pad) var(--s3)}
header .wordmark{
  flex:1;text-align:center;font-family:var(--num);font-weight:600;
  font-size:11px;letter-spacing:.3em;color:var(--brass);
}
.iconbtn{
  width:var(--tap);height:var(--tap);flex:0 0 auto;display:grid;place-items:center;
  border-radius:11px;color:var(--text-2);position:relative;
  transition:color .18s var(--ease),background .18s var(--ease);
}
.iconbtn:hover,.iconbtn:focus-visible{color:var(--brass);background:rgba(201,162,77,.09)}
.iconbtn[hidden]{visibility:hidden;display:grid}
.iconbtn .badge{
  position:absolute;top:5px;inset-inline-end:5px;min-width:17px;height:17px;padding:0 4px;
  border-radius:999px;background:var(--brass);color:#2A2009;
  font-family:var(--num);font-size:10px;font-weight:700;display:grid;place-items:center;
}

main{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:var(--s1) var(--pad) 28px}
.screen{display:none}
.screen.on{display:block;animation:rise .42s var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

h1{font-size:30px;font-weight:900;letter-spacing:-.02em;margin:10px 0 6px;line-height:1.2}
h2{font-size:15px;font-weight:700;color:var(--text);margin:30px 0 var(--s3);letter-spacing:-.01em}
h2:first-of-type{margin-top:var(--s5)}
p.lede{color:var(--text-2);font-size:14px;line-height:1.75;margin:0 0 var(--s1)}

/* ── التوكن النحاسي — بطل الأبليكيشن ─────────────────── */
.tokenwrap{display:grid;place-items:center;padding:26px 0 22px;position:relative}
.tokenwrap::before{
  content:'';position:absolute;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,162,77,.16),transparent 68%);
  filter:blur(12px);pointer-events:none;
}
.token{
  --d:206px;width:var(--d);height:var(--d);border-radius:50%;position:relative;
  display:grid;place-items:center;
  background:repeating-conic-gradient(from 0deg,
    var(--brass-hi) 0deg .55deg, var(--brass) .55deg 1.1deg,
    var(--brass-lo) 1.1deg 1.65deg, var(--brass) 1.65deg 2.2deg);
  box-shadow:
    0 22px 44px rgba(0,0,0,.62),
    0 3px 10px rgba(0,0,0,.5),
    inset 0 0 0 1px rgba(255,240,205,.32);
}
.token::after{
  content:'';position:absolute;inset:13px;border-radius:50%;
  background:radial-gradient(circle at 36% 26%, var(--brass-hi), var(--brass) 42%, var(--brass-lo) 82%, var(--brass-deep));
  box-shadow:inset 0 3px 7px rgba(255,244,214,.5), inset 0 -5px 12px rgba(60,44,14,.55);
}
.token > *{position:relative;z-index:2;text-align:center}
.token .n{
  display:block;font-family:var(--num);font-weight:700;font-size:76px;line-height:.94;
  color:var(--engrave);letter-spacing:-.045em;
  text-shadow:0 1px 0 rgba(255,244,214,.5), 0 -1px 1px rgba(60,44,14,.35);
}
.token .cap{
  display:block;margin-top:7px;font-size:12px;font-weight:700;color:rgba(59,46,19,.72);
  letter-spacing:.02em;
}
/* 480ms — جوّه نطاق 300–500 للحركة الملموسة. كانت 620. */
.token.stamp{animation:stamp .48s var(--ease) both}
@keyframes stamp{
  0%  {transform:scale(.6) rotate(-14deg);opacity:0;filter:blur(6px)}
  55% {transform:scale(1.05) rotate(3deg);opacity:1;filter:blur(0)}
  100%{transform:scale(1) rotate(0);opacity:1}
}
.token.empty{
  background:repeating-conic-gradient(from 0deg,
    #262015 0deg .55deg,#1E1910 .55deg 1.1deg,#2C2519 1.1deg 1.65deg,#1E1910 1.65deg 2.2deg);
  box-shadow:0 18px 38px rgba(0,0,0,.5),inset 0 0 0 1px rgba(201,162,77,.16);
}
.token.empty::after{
  background:radial-gradient(circle at 36% 26%,#241E14,#191409 70%,#120E07);
  box-shadow:inset 0 2px 5px rgba(201,162,77,.1),inset 0 -4px 10px rgba(0,0,0,.6);
}
.token.empty .n{font-size:52px;color:var(--brass);text-shadow:none}
.token.empty .cap{color:var(--text-3)}

.tokenmeta{display:flex;justify-content:center;align-items:center;gap:0;margin-top:2px}
.tokenmeta div{padding:0 var(--s5);text-align:center}
.tokenmeta div + div{border-inline-start:1px solid var(--hair-soft)}
.tokenmeta b{display:block;font-family:var(--num);font-size:24px;font-weight:600;letter-spacing:-.02em}
.tokenmeta span{display:block;font-size:11.5px;color:var(--text-3);margin-top:3px}

.livedot{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  color:var(--live);margin-top:14px}
.livedot i{width:6px;height:6px;border-radius:50%;background:currentColor;animation:blip 2s infinite}
@keyframes blip{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.8)}}

/* ── أزرار ───────────────────────────────────────────── */
.btn{
  display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  min-height:var(--tap);padding:var(--s4);border-radius:12px;font-size:15.5px;font-weight:700;
  background:linear-gradient(178deg,var(--brass-hi),var(--brass) 42%,var(--brass-lo));
  color:#2A2009;box-shadow:0 10px 26px rgba(0,0,0,.45);
  transition:transform .16s var(--ease),box-shadow .16s var(--ease),filter .16s var(--ease);
}
.btn:hover{filter:brightness(1.06);box-shadow:0 14px 32px rgba(0,0,0,.55)}
.btn:active{transform:scale(.978)}
.btn.quiet{background:none;color:var(--brass);box-shadow:inset 0 0 0 1px var(--hair)}
.btn.quiet:hover{background:rgba(201,162,77,.07);filter:none;box-shadow:inset 0 0 0 1px rgba(201,162,77,.4)}
.btn.slim{width:auto;padding:11px 20px;min-height:0;font-size:14px;box-shadow:none}
.btn[disabled]{opacity:.32;pointer-events:none;box-shadow:none}
.btn .spin{width:17px;height:17px;border:2px solid rgba(42,32,9,.28);border-top-color:#2A2009;
  border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── قوايم بخطوط شعرة (مش كروت) ──────────────────────── */
.list{border-top:1px solid var(--hair-soft)}
.row{
  display:flex;align-items:center;gap:14px;width:100%;text-align:start;
  min-height:var(--tap);padding:var(--s4) var(--s1);
  border-bottom:1px solid var(--hair-soft);
  transition:background .16s var(--ease);
}
.row:hover{background:rgba(201,162,77,.045)}
.row .body{flex:1;min-width:0}
.row .body b{display:block;font-size:15px;font-weight:700;letter-spacing:-.01em}
.row .body span{display:block;font-size:12.5px;color:var(--text-3);margin-top:var(--s1);line-height:1.5}
.row .trail{flex:0 0 auto;text-align:center}
.row .trail b{display:block;font-family:var(--num);font-size:19px;font-weight:600;color:var(--brass)}
.row .trail span{display:block;font-size:11px;color:var(--text-3);margin-top:2px}
.row.on{background:rgba(201,162,77,.075)}
.row .chev{color:var(--text-3);flex:0 0 auto;transition:color .16s,transform .16s var(--ease)}
/* RTL: اتجاه السير لليسار — السهم يتحرك ناحية اليسار. كان +3 وده عكس السير. */
.row:hover .chev{color:var(--brass);transform:translateX(-3px)}

.pick{
  width:22px;height:22px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  box-shadow:inset 0 0 0 1.5px rgba(247,242,231,.2);color:transparent;
  transition:.18s var(--ease);
}
.row.on .pick{background:var(--brass);box-shadow:none;color:#2A2009}
.row[role="radio"] .pick{border-radius:50%}

/* ── بانلات ──────────────────────────────────────────── */
.panel{background:var(--ink-2);border-radius:var(--r);padding:18px;box-shadow:0 1px 0 var(--hair-soft) inset}
.panel.lit{
  background:linear-gradient(165deg,rgba(201,162,77,.11),rgba(201,162,77,.01) 58%),var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--hair);
}
.kv{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:var(--s3) 0;border-bottom:1px solid var(--hair-soft)}
.kv:last-child{border-bottom:0;padding-bottom:0}
.kv:first-child{padding-top:0}
.kv span{color:var(--text-3);font-size:13px}
.kv b{font-size:14.5px;font-weight:700;text-align:end}

/* ── شيبس / مواعيد ───────────────────────────────────── */
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:6px var(--s3);border-radius:999px;
  font-size:11.5px;font-weight:700;background:rgba(201,162,77,.13);color:var(--brass-hi);
}
.chip.live{background:rgba(111,207,151,.14);color:var(--live)}
.chip.bad{background:rgba(217,112,92,.15);color:var(--bad)}
.chip.mute{background:rgba(247,242,231,.06);color:var(--text-3)}
/* شيب كزرار = هدف لمس كامل. الـ::before بيوسّع المنطقة من غير ما يكبّر الشكل. */
button.chip{position:relative}
button.chip::before{content:'';position:absolute;inset:50% 0 auto;
  transform:translateY(-50%);height:var(--tap);width:100%}

.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.slot{
  min-height:var(--tap);padding:var(--s3) var(--s1);border-radius:11px;
  font-family:var(--num);font-size:13.5px;font-weight:600;
  background:var(--ink-2);color:var(--text-2);transition:.16s var(--ease);
}
.slot:hover:not(:disabled){background:var(--ink-3);color:var(--text)}
.slot.on{background:linear-gradient(178deg,var(--brass-hi),var(--brass));color:#2A2009}
.slot:disabled{opacity:.34;cursor:not-allowed}
.slot:disabled::after{content:' — محجوز';font-family:var(--ar);font-size:9px;display:block}

/* ── الباقات ─────────────────────────────────────────── */
.pkg{padding:22px 0;border-bottom:1px solid var(--hair-soft)}
.pkg:last-of-type{border-bottom:0}
.pkg.lead{
  padding:22px;border-radius:var(--r);border-bottom:0;margin:6px 0 10px;
  background:linear-gradient(162deg,rgba(201,162,77,.14),rgba(201,162,77,.015) 60%),var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--hair);
}
.pkg .head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s4)}
.pkg h3{margin:0;font-size:18px;font-weight:900;letter-spacing:-.015em}
.pkg .was{font-size:13px;color:var(--text-3);text-decoration:line-through;
  text-decoration-color:rgba(181,171,150,.5)}
.pkg .now{font-family:var(--num);font-size:27px;font-weight:700;color:var(--brass);
  letter-spacing:-.025em;display:block;margin-top:1px}
.pkg ul{list-style:none;padding:0;margin:15px 0 17px;display:grid;gap:9px}
.pkg li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--text-2);line-height:1.6}
.pkg li svg{flex:0 0 auto;margin-top:3px;color:var(--brass)}
.saving{display:inline-block;font-size:12px;font-weight:700;color:var(--live);margin-top:var(--s2)}

/* شريط رصيد الباقة */
.meter{height:8px;border-radius:999px;background:var(--ink-3);overflow:hidden;margin:var(--s2) 0 var(--s1)}
.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--brass-lo),var(--brass))}

/* ── العروض ──────────────────────────────────────────── */
.offer{
  padding:18px;border-radius:var(--r);margin-bottom:var(--s3);
  background:linear-gradient(165deg,rgba(201,162,77,.1),rgba(201,162,77,.01) 60%),var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--hair);
}
.offer.done{background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--hair-soft);opacity:.75}
.offer h3{margin:0 0 6px;font-size:16.5px;font-weight:800;letter-spacing:-.015em}
.offer .price{display:flex;align-items:baseline;gap:var(--s2);margin:var(--s3) 0}
.offer .price b{font-family:var(--num);font-size:24px;font-weight:700;color:var(--brass)}
.offer .price s{font-family:var(--num);font-size:14px;color:var(--text-3)}
.offer .acts{display:flex;gap:9px;margin-top:14px}
.offer .acts .btn{flex:1}
.reasons{display:grid;gap:9px;margin-top:var(--s3)}
.reasons button{
  min-height:var(--tap);padding:var(--s3) 14px;border-radius:11px;text-align:start;
  font-size:13.5px;font-weight:600;background:var(--ink-3);color:var(--text-2);
  transition:.16s var(--ease);
}
.reasons button:hover{background:var(--ink-4);color:var(--text)}

/* ── AI ──────────────────────────────────────────────── */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:var(--s5) 0 6px}
.frame{
  width:100%;aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;position:relative;
  background:var(--ink-2) center/cover no-repeat;
  display:grid;place-items:center;text-align:center;padding:var(--s4);
  box-shadow:inset 0 0 0 1px var(--hair-soft);
}
.frame.target{box-shadow:inset 0 0 0 1px var(--hair)}
.frame small{color:var(--text-3);font-size:11.5px;line-height:1.6}
.frame .ph{display:grid;gap:9px;justify-items:center;color:var(--text-3)}
/* كانت اسمها .cap وبتتصادم مع .token .cap — الاتنين كانوا بيتوارثوا text-align */
.imgcap{text-align:center;font-size:12px;color:var(--text-3);margin-top:9px;font-weight:600}
.imgcap.g{color:var(--brass)}
.styles{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.style{
  min-height:58px;border-radius:12px;padding:var(--s3) var(--s2);
  display:grid;place-items:center;text-align:center;line-height:1.4;
  font-size:12.5px;font-weight:700;
  background:linear-gradient(200deg,var(--ink-4),var(--ink-2));
  box-shadow:inset 0 0 0 1px var(--hair-soft);color:var(--text-2);
  transition:.18s var(--ease);
}
.style:hover{color:var(--text);box-shadow:inset 0 0 0 1px var(--hair)}
.style.on{box-shadow:inset 0 0 0 1.5px var(--brass);color:var(--brass-hi)}

/* ── ملاحظات / فاضي ──────────────────────────────────── */
.note{font-size:12.5px;color:var(--text-3);line-height:1.85;margin-top:var(--s5);
  padding:15px var(--s4);border-radius:12px;background:rgba(247,242,231,.028)}
.note b{color:var(--brass)}
.empty{text-align:center;padding:44px var(--s4)}
.empty p{color:var(--text-2);font-size:14px;line-height:1.7;margin:var(--s2) 0 26px}

.dock{position:sticky;bottom:0;margin-top:28px;padding-bottom:2px;background:var(--ink)}
.dock::before{content:'';position:absolute;inset-inline:0;bottom:100%;height:34px;
  background:linear-gradient(to top,var(--ink),transparent);pointer-events:none}
.dock .kv{padding:10px 2px 14px;border:0}

nav{
  flex:0 0 auto;position:relative;display:grid;grid-template-columns:repeat(5,1fr);
  padding:9px 6px calc(9px + env(safe-area-inset-bottom));
  background:rgba(14,12,9,.9);backdrop-filter:blur(20px) saturate(1.3);
  border-top:1px solid var(--hair-soft);
}
/* تدرّج فوق الشريط — الصف المقطوع عند حافة الـscroll يبان إنه مكمّل مش مكسور (نفس فكرة .dock::before) */
nav::before{content:'';position:absolute;inset-inline:0;bottom:100%;height:30px;
  background:linear-gradient(to top,var(--ink),transparent);pointer-events:none}
nav button{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  min-height:var(--tap);padding:6px 2px;position:relative;
  color:var(--text-3);font-size:10.5px;font-weight:600;transition:color .18s var(--ease);
}
nav button.on{color:var(--brass)}
nav button .dotmark{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:0;transition:opacity .2s}
nav button.on .dotmark{opacity:1}
nav .badge{position:absolute;top:2px;inset-inline-end:calc(50% - 20px);
  min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  background:var(--brass);color:#2A2009;font-family:var(--num);font-size:9.5px;
  font-weight:700;display:grid;place-items:center}

.toast{
  position:fixed;bottom:96px;inset-inline:0;margin-inline:auto;width:max-content;max-width:84vw;
  padding:13px 22px;border-radius:999px;z-index:60;text-align:center;
  background:linear-gradient(178deg,var(--brass-hi),var(--brass));color:#2A2009;
  font-size:13.5px;font-weight:700;box-shadow:0 14px 34px rgba(0,0,0,.55);
  opacity:0;transform:translateY(14px);transition:.34s var(--ease);pointer-events:none;
}
.toast.on{opacity:1;transform:none}

/* ══════════════════════════════════════════════════════
   ٢ — تابلت الفرع — Digital Signage / Kiosk
   مسافة النظر ٢ متر. الأرقام هي البطل. اللمس ≥56px.
   ══════════════════════════════════════════════════════ */
.bs{
  --tap:56px;
  width:100%;max-width:1500px;margin:0 auto;padding:30px;color:var(--text);min-height:100dvh;
  background:radial-gradient(90% 45% at 50% -10%,rgba(201,162,77,.1),transparent 60%),var(--ink);
}
.bs h1{font-size:32px;margin:0}
.bs .sub{color:var(--text-3);font-size:13px;margin-top:6px}
.bs .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:26px 0}
.bs .stat{padding:var(--s5);border-radius:var(--r);background:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--hair-soft);text-align:center}
.bs .stat b{display:block;font-family:var(--num);font-size:36px;font-weight:600;
  color:var(--brass);letter-spacing:-.03em}
.bs .stat span{font-size:12px;color:var(--text-3)}
.bs .stat.flag b{color:var(--bad)}
.bs .cols{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--s6);align-items:start}
@media (max-width:980px){.bs .cols{grid-template-columns:1fr}}
.bs h2{font-size:16px;margin:0 0 14px}

.qrow{display:flex;align-items:center;gap:var(--s4);padding:15px var(--s4);border-radius:12px;
  background:var(--ink-2);margin-bottom:10px}
.qrow.now{background:linear-gradient(160deg,rgba(201,162,77,.13),transparent 62%),var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--hair)}
.qrow.soon{opacity:.82}
/* اللي اتسجّل «مجاش» — باين إنه اتشال بس لسه قدّامك، عشان الرجوع منه ممكن */
.qrow.soon.gone{opacity:.55}
.qrow.soon.gone .no{color:var(--text-3);text-decoration:line-through}
.qrow .who span.bad{color:var(--bad)}
.qrow .no{font-family:var(--num);font-size:26px;font-weight:600;color:var(--brass);
  min-width:50px;text-align:center}
.qrow.now .no{font-size:40px}
.qrow .who{flex:1;min-width:0}
.qrow .who b{display:block;font-size:15px}
.qrow .who span{font-size:12.5px;color:var(--text-3)}
.qrow .acts{display:flex;gap:var(--s2);flex-wrap:wrap;justify-content:flex-end}
.qrow .acts button{min-height:var(--tap);padding:0 var(--s4);border-radius:11px;
  font-size:13.5px;font-weight:700}
.qrow .ghost{background:var(--ink-3);color:var(--text-2)}
.qrow .ghost:hover{background:var(--ink-4);color:var(--text)}

/* .btn.slim بيلغي الـmin-height — على تابلت الفرع لازم يرجع لقاعدة الكيوسك (56) */
.bs .btn.slim,.bs button{min-height:var(--tap)}
.bs .sub a{display:inline-block;padding:6px 2px}   /* روابط التنقّل بين الشاشات — مش أهداف تشغيل */

.tabs{display:flex;gap:var(--s2);flex-wrap:wrap}
.tabs button{min-height:var(--tap);padding:var(--s2) 18px;border-radius:999px;font-size:13px;
  font-weight:700;color:var(--text-2);background:var(--ink-2);transition:.16s}
.tabs button:hover{color:var(--text)}
.tabs button.on{background:var(--brass);color:#2A2009}

/* كارت «العميل معروف» — أهم لحظة في تابلت الفرع */
.known{padding:var(--s5);border-radius:var(--r);margin-bottom:var(--s4);
  background:linear-gradient(160deg,rgba(201,162,77,.13),rgba(201,162,77,.01) 60%),var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--hair)}
.known h3{margin:0 0 var(--s1);font-size:21px;font-weight:900}
.known .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:var(--s3);margin-top:var(--s4)}
.known .facts div{padding:var(--s3);border-radius:10px;background:rgba(0,0,0,.22)}
.known .facts b{display:block;font-family:var(--num);font-size:20px;color:var(--brass)}
.known .facts span{font-size:11.5px;color:var(--text-3)}
.known .refused{margin-top:var(--s4);padding:var(--s3) 14px;border-radius:10px;
  background:rgba(217,112,92,.1);box-shadow:inset 0 0 0 1px rgba(217,112,92,.3);
  font-size:13.5px;line-height:1.7}
.known .refused b{color:var(--bad)}

/* ══════════════════════════════════════════════════════
   ٣ — شاشة الإدارة — Data-Dense Dashboard
   مسافة النظر ٦٠سم. الجدول والقمع هما البطل. سلّم --d*.
   ══════════════════════════════════════════════════════ */
.ad{width:100%;max-width:1600px;margin:0 auto;padding:var(--d6);min-height:100dvh;
  background:radial-gradient(70% 34% at 50% -8%,rgba(201,162,77,.08),transparent 62%),var(--ink)}
.ad header{padding:0 0 var(--d5);display:flex;align-items:flex-end;
  justify-content:space-between;gap:var(--d5);flex-wrap:wrap}
.ad h1{font-size:26px;margin:0}
.ad h2{font-size:15px;margin:0 0 var(--d4)}
.ad h3{font-size:13px;margin:0 0 var(--d3);color:var(--text-2);font-weight:700}
.ad .sub{color:var(--text-3);font-size:12.5px;margin-top:var(--d1)}
.ad .grid{display:grid;gap:var(--d4)}
.ad .g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.ad .g3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.ad .card{background:var(--ink-2);border-radius:12px;padding:var(--d5);
  box-shadow:inset 0 0 0 1px var(--hair-soft)}
.ad .card.lit{background:linear-gradient(165deg,rgba(201,162,77,.09),rgba(201,162,77,.01) 60%),var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--hair)}

/* KPI */
.kpi{padding:var(--d4);border-radius:12px;background:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--hair-soft)}
.kpi b{display:block;font-family:var(--num);font-size:30px;font-weight:600;
  color:var(--brass);letter-spacing:-.03em;line-height:1.1}
.kpi span{display:block;font-size:11.5px;color:var(--text-3);margin-top:var(--d1)}
.kpi.zero b{color:var(--bad)}

/* جداول كثيفة */
.tw{overflow-x:auto;border-radius:12px;box-shadow:inset 0 0 0 1px var(--hair-soft)}
table.d{width:100%;border-collapse:collapse;font-size:13px}
table.d th,table.d td{padding:var(--d3) var(--d4);text-align:start;
  border-bottom:1px solid var(--hair-soft);white-space:nowrap}
table.d th{background:rgba(247,242,231,.035);font-size:11.5px;color:var(--text-3);
  font-weight:700;position:sticky;top:0}
table.d tbody tr:hover{background:rgba(201,162,77,.05)}
table.d tbody tr:last-child td{border-bottom:0}
table.d tr.total td{background:rgba(201,162,77,.07);font-weight:800}
table.d tr.off td{color:var(--text-3)}
table.d .n{font-family:var(--num);font-variant-numeric:tabular-nums;direction:ltr;
  color:var(--brass);font-weight:600}
table.d tr.off .n{color:var(--text-3)}

/* قمع العروض — عمود نحاس بيتآكل. SVG يدوي، من غير أي مكتبة. */
.funnel{display:grid;gap:2px;margin:var(--d4) 0}
.fstage{display:flex;align-items:center;gap:var(--d4)}
.fstage .bar{height:44px;border-radius:3px;flex:0 0 auto;min-width:3px;
  background:linear-gradient(180deg,var(--brass-hi),var(--brass) 45%,var(--brass-lo));
  box-shadow:inset 0 0 0 1px rgba(255,240,205,.25)}
.fstage.lost .bar{background:linear-gradient(180deg,#3A3226,#241E16);
  box-shadow:inset 0 0 0 1px rgba(247,242,231,.07)}
.fstage .lbl{flex:1;min-width:0;font-size:13px}
.fstage .lbl b{display:block;font-weight:700}
.fstage .lbl span{font-size:11.5px;color:var(--text-3)}
.fstage .val{font-family:var(--num);font-size:17px;font-weight:600;color:var(--brass);
  min-width:56px;text-align:end}
.fstage.drop .val{color:var(--bad)}
.fstage.drop{box-shadow:inset 0 0 0 1px rgba(217,112,92,.28);border-radius:6px;
  padding:var(--d1) var(--d2);margin:var(--d1) 0}

/* بارات أفقية — أسباب الرفض. القيمة مكتوبة نص، مش لون بس. */
.bars{display:grid;gap:var(--d3)}
.bar-row{display:grid;grid-template-columns:1fr auto;gap:var(--d2) var(--d4);align-items:center}
.bar-row .t{font-size:13px}
.bar-row .v{font-family:var(--num);font-size:14px;font-weight:600;color:var(--brass)}
.bar-row .track{grid-column:1/-1;height:9px;border-radius:999px;background:var(--ink-3);overflow:hidden}
.bar-row .track i{display:block;height:100%;
  background:linear-gradient(90deg,var(--brass-lo),var(--brass))}

/* bullet chart grid — 3 KPIs أو أكتر. القيمة و% من الهدف مكتوبين نص. */
.bullet{display:grid;gap:var(--d2);padding:var(--d4) 0;border-bottom:1px solid var(--hair-soft)}
.bullet:last-child{border-bottom:0}
.bullet .top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--d4)}
.bullet .top b{font-size:13.5px;font-weight:700}
.bullet .top .fig{font-family:var(--num);font-size:13.5px;color:var(--text-2)}
.bullet .track{position:relative;height:14px;border-radius:3px;background:var(--ink-3)}
.bullet .track i{display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--brass-lo),var(--brass))}
.bullet .track u{position:absolute;top:-3px;bottom:-3px;width:3px;background:var(--text);
  border-radius:2px}
.bullet.zero .track i{background:linear-gradient(90deg,#5A2E26,var(--bad))}
.bullet .was0{font-size:11.5px;color:var(--bad);font-weight:700}

/* شاشة التحكّم */
.ctl{display:grid;gap:var(--d3)}
.ctl label{display:grid;gap:6px;font-size:12.5px;color:var(--text-3)}
input,select,textarea{
  font-family:var(--ar);font-size:14px;color:var(--text);background:var(--ink-3);
  border:0;border-radius:9px;padding:var(--d3) var(--d4);min-height:var(--tap);width:100%;
  box-shadow:inset 0 0 0 1px var(--hair-soft);
}
input.num,input[type=number]{font-family:var(--num);direction:ltr;text-align:start}
input::placeholder{color:var(--text-3)}
input:hover,select:hover{box-shadow:inset 0 0 0 1px var(--hair)}
.inline{display:flex;gap:var(--d3);align-items:center;flex-wrap:wrap}
.inline > *{flex:1;min-width:130px}
.inline > .btn{flex:0 0 auto;min-width:0}
.sw{display:flex;align-items:center;gap:var(--d3);min-height:var(--tap);cursor:pointer;font-size:13.5px}
.sw i{width:42px;height:24px;border-radius:999px;background:var(--ink-4);position:relative;
  flex:0 0 auto;transition:.18s var(--ease);box-shadow:inset 0 0 0 1px var(--hair-soft)}
.sw i::after{content:'';position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;
  border-radius:50%;background:var(--text-3);transition:.18s var(--ease)}
.sw.on i{background:rgba(201,162,77,.3);box-shadow:inset 0 0 0 1px var(--hair)}
.sw.on i::after{inset-inline-start:21px;background:var(--brass)}

/* ══════════════════════════════════════════════════════
   حركة — بند إلزامي. بيلغي الحركة ويسيب التغيّر.
   ══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .screen.on{animation:none}
  .token.stamp{animation:none}
  .livedot i{animation:none;opacity:1}
}