/* ══════════════════════════════════════════════════════════════
   AXIS STORE — نظام التصميم
   An AXIS Group Platform

   داكن افتراضاً: متجر يُفتح ليلاً ونهاراً، والداكن يقلّل الإجهاد ويمنع
   متصفّح الموبايل من قلب الألوان تلقائياً بنتائج مشوّهة. وضع فاتح بزرّ،
   محفوظ في المتصفح ويُطبَّق قبل الرسم فلا تومض السمة.

   RTL أصلي عبر الخصائص المنطقية (inset-inline-start / margin-inline)،
   فينقلب التخطيط كاملاً بتغيير dir وحده بلا أي CSS مكرَّر.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* هوية AXIS — كحلي رسمي وأزرق مؤسسي. الفاتح هو الأصل هنا: الواجهة
     المرجعية مبنية على أبيض مائل للأزرق، والداكن بديل بزرّ. */
  --navy:#081F49; --navy2:#123A78;

  --bg:#DDEDFD; --bg2:#CFE4FC; --bg3:#BFD9FB;
  --panel:#FFFFFF; --panel2:#F6FAFF; --panel3:#EAF3FE;
  --line:#BFD9FB; --line2:#A7CAF8; --line3:#8DC1FD;
  /* سماويّات الهوية — مأخوذة من صورة الشعار نفسها */
  --sky:#8DC1FD; --sky2:#A3CDFD; --sky3:#76B0F9;

  --ink:#10223F; --ink2:#3C4F6B; --mut:#60708A; --faint:#8A99AF;

  /* اللون المميِّز. الاسم `gold` بقي كما هو عمداً: يستخدمه 97 موضعاً في
     الأنماط والقوالب، وتغيير القيمة وحدها يُحوّل الموقع كله دفعة واحدة
     بينما تغيير الاسم كان سيعني تعديل كل موضع بلا فائدة. */
  --gold:#2B66D9; --gold2:#1E4FB8; --gold3:#5A8CE8; --gold-edge:#17408F;
  --gold-soft:rgba(43,102,217,.10);

  --ok:#0E7C5A; --okbg:#DFF5EC; --ok-soft:rgba(14,124,90,.10);
  --warn:#A35B06; --warnbg:#FDF0DC; --warn-soft:rgba(163,91,6,.10);
  --bad:#C02626; --badbg:#FCE4E4; --bad-soft:rgba(192,38,38,.10);
  --info:#2B66D9; --infobg:#E4EEFD; --info-soft:rgba(43,102,217,.10);
  --violet:#6D46C8; --violetbg:#EBE4FA; --violet-soft:rgba(109,70,200,.10);

  --shadow:0 20px 60px rgba(var(--shade-rgb,8,31,73),.10);
  --shadow2:0 6px 20px rgba(var(--shade-rgb,8,31,73),.06);
  --glow:0 0 0 1px rgba(43,102,217,.20), 0 10px 28px rgba(43,102,217,.12);
  --r:12px; --r2:8px; --r3:6px;
  --ease:cubic-bezier(.4,0,.2,1);
  --nav-h:72px; --tabbar-h:62px; --wrap:1180px;
}

:root[data-theme="dark"]{
  --navy:#0A2350; --navy2:#123A78;
  --bg:#071426; --bg2:#08182C; --bg3:#0A1E36;
  --panel:#0D1C31; --panel2:#11233C; --panel3:#152B48;
  --line:#223754; --line2:#2C4566; --line3:#3A5679;
  --ink:#F3F7FC; --ink2:#C6D3E4; --mut:#AAB9CC; --faint:#7E8FA6;
  --gold:#5A8CE8; --gold2:#8AB0F2; --gold3:#2B66D9;
  --gold-soft:rgba(90,140,232,.14);
  --ok:#34D399; --okbg:#08372A; --ok-soft:rgba(52,211,153,.14);
  --warn:#FBBF24; --warnbg:#3A2A06; --warn-soft:rgba(251,191,36,.14);
  --bad:#F87171; --badbg:#431919; --bad-soft:rgba(248,113,113,.14);
  --info:#7FB0FF; --infobg:#0D2A50; --info-soft:rgba(127,176,255,.14);
  --violet:#A78BFA; --violetbg:#281A54; --violet-soft:rgba(167,139,250,.14);
  --shadow:0 20px 48px rgba(0,0,0,.45);
  --shadow2:0 6px 20px rgba(0,0,0,.28);
  --glow:0 0 0 1px rgba(90,140,232,.24), 0 10px 28px rgba(90,140,232,.14);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  background:var(--bg); color:var(--ink);
  font-family:var(--font-brand,"Cairo"),"Segoe UI",system-ui,-apple-system,Tahoma,sans-serif;
  font-size:15px; line-height:1.65; -webkit-font-smoothing:antialiased;
  min-height:100vh; overflow-x:hidden;
  transition:background .35s var(--ease), color .35s var(--ease);
}
[dir="ltr"] body{font-family:var(--font-brand,"Cairo"),"Segoe UI",system-ui,-apple-system,sans-serif}

/* توهّج خلفي — عمق بلا صور ولا تكلفة أداء */
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(1100px 620px at 50% -6%, #FFFFFF 0%, transparent 62%),
    radial-gradient(760px 420px at 88% 8%, color-mix(in srgb, var(--sky3) 32%, transparent), transparent 66%);
}

a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
button,input,select,textarea{font-family:inherit; font-size:inherit}

::selection{background:var(--gold); color:#fff}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px; border-radius:6px}

/* شريط تمرير رفيع */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line2); border-radius:99px; border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--line3)}

/* ══════════════ الهيكل ══════════════ */
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px; position:relative; z-index:1}
main{padding:26px 0 40px; animation:rise .4s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ══════════════ الشريط العلوي ══════════════ */
.topbar{
  position:sticky; top:0; z-index:50; height:var(--nav-h);
  background:color-mix(in srgb, var(--panel) 86%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar .wrap{display:flex; align-items:center; gap:14px; height:100%}

.brand{display:flex; align-items:center; gap:11px; flex-shrink:0}
.brand .mark{
  width:40px; height:40px; display:grid; place-items:center; flex-shrink:0;
  color:var(--navy);
}
:root[data-theme="dark"] .brand .mark{color:#fff}
.brand .mark .axis-mark{width:38px; height:33px}
.brand .name{font-size:24px; font-weight:500; letter-spacing:5px; line-height:1;
  color:var(--navy)}
:root[data-theme="dark"] .brand .name{color:#fff}
.brand .sub{display:block; font-size:7.5px; color:var(--gold); letter-spacing:2px;
  font-weight:800; margin-top:6px}

/* ══════════════ شارة الشريحة ══════════════
   اللون يصل كمتغيّر `--tier` من صفّ الشريحة في قاعدة البيانات، فمستوى جديد
   يُضاف من اللوحة يظهر بلونه دون لمس هذا الملف. */
.tier-chip{
  display:inline-flex; align-items:center; gap:6px; flex-shrink:0;
  padding:5px 11px 5px 8px; border-radius:99px; position:relative;
  font-size:12.5px; font-weight:700; line-height:1; white-space:nowrap;
  color:var(--tier, var(--gold2));
  border:1px solid color-mix(in srgb, var(--tier, var(--gold)) 45%, transparent);
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--tier, var(--gold)) 22%, transparent),
    color-mix(in srgb, var(--tier, var(--gold)) 6%, transparent));
  overflow:hidden;
  transition:transform .2s var(--ease), box-shadow .25s var(--ease);
}
.tier-chip:hover{transform:translateY(-1px);
  box-shadow:0 6px 16px color-mix(in srgb, var(--tier, var(--gold)) 26%, transparent)}
.tier-chip .ti{font-size:14px; filter:drop-shadow(0 0 4px var(--tier))}
.tier-chip .tn{letter-spacing:.2px}

/* ✦ اللمعان: وميض مائل يعبر الشارة كل بضع ثوانٍ.
   `translateX` فيزيائي دائماً ولا ينقلب مع `dir`، والوميض متماثل بصرياً
   فلا يهم اتجاهه — لكنه يُكتب هنا صراحةً كي لا يُظنّ سهواً. */
.tier-chip::after{
  content:''; position:absolute; top:0; bottom:0; width:38%;
  background:linear-gradient(100deg, transparent,
             color-mix(in srgb, #fff 55%, transparent), transparent);
  transform:translateX(-180%) skewX(-18deg);
  animation:tierShine 4.5s var(--ease) infinite;
  pointer-events:none;
}
@keyframes tierShine{
  0%, 62% {transform:translateX(-180%) skewX(-18deg)}
  86%,100%{transform:translateX(420%)  skewX(-18deg)}
}

/* المستويان اللذان يفتحان الربط البرمجي يأخذان هالة نابضة إضافية —
   الفرق بينهما وبين المستويات التلقائية يجب أن يُرى من مسافة. */
.tier-chip.vip{
  animation:tierGlow 2.8s ease-in-out infinite;
  border-color:color-mix(in srgb, var(--tier) 70%, transparent);
}
@keyframes tierGlow{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--tier) 42%, transparent)}
  50%    {box-shadow:0 0 14px 3px color-mix(in srgb, var(--tier) 30%, transparent)}
}

/* من طلب تقليل الحركة يرى الشارة ساكنة — بلونها ووهجها الثابت. */
@media (prefers-reduced-motion:reduce){
  .tier-chip::after{display:none}
  .tier-chip.vip{animation:none}
}

/* زرّ الربط البرمجي — يظهر للشركاء المعتمدين وحدهم. */
.api-btn{
  display:inline-flex; align-items:center; gap:6px; padding:8px 13px;
  border-radius:10px; font-size:12.5px; font-weight:800; letter-spacing:1.2px;
  color:#fff; background:linear-gradient(135deg, var(--gold), var(--gold3));
  box-shadow:0 4px 14px color-mix(in srgb, var(--gold) 34%, transparent);
  transition:transform .18s var(--ease), filter .18s var(--ease);
}
.api-btn:hover{transform:translateY(-1px); filter:brightness(1.07)}
.api-btn .dot{
  width:7px; height:7px; border-radius:50%; background:#fff;
  animation:apiPulse 1.9s ease-in-out infinite;
}
@keyframes apiPulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.api-btn .dot{animation:none}}

@media (max-width:900px){
  /* على الشاشات الضيّقة يبقى الرمز ويسقط الاسم: الشارة تُعرّف بلونها
     وأيقونتها، والاسم هو ما يزاحم اسم المتجر نفسه. */
  .tier-chip .tn{display:none}
  .tier-chip{padding:6px 8px}
}

.nav{display:flex; gap:3px; margin-inline-start:18px; flex:1}
.nav a{
  padding:9px 14px; border-radius:var(--r3); color:var(--ink2); font-size:14.5px;
  transition:background .2s var(--ease), color .2s var(--ease); white-space:nowrap;
}
.nav a:hover{background:var(--panel); color:var(--ink)}
.nav a.on{background:var(--gold-soft); color:var(--gold2); font-weight:600}

.topbar-actions{display:flex; align-items:center; gap:8px; margin-inline-start:auto}

.iconbtn{
  width:37px; height:37px; display:grid; place-items:center; cursor:pointer;
  background:var(--panel); border:1px solid var(--line); color:var(--ink2);
  border-radius:10px; font-size:15px; transition:.2s var(--ease); position:relative;
}
.iconbtn:hover{background:var(--panel2); color:var(--gold); border-color:var(--line2)}
.iconbtn .dot{
  position:absolute; top:6px; inset-inline-end:6px; width:7px; height:7px;
  border-radius:50%; background:var(--bad); border:2px solid var(--panel);
}

/* شريحة الرصيد + زرّ الشحن — أكثر إجراء تكراراً في متجر رصيد، فيأخذ
   أبرز موضع في الشريط العلوي بدل أن يُدفن في قائمة. */
.balance-chip{
  display:flex; align-items:center; gap:8px; padding:6px 13px 6px 6px;
  border-radius:99px; white-space:nowrap; font-size:13.5px; font-weight:700;
  background:linear-gradient(140deg, var(--panel2), var(--panel));
  border:1px solid var(--line); transition:.2s var(--ease);
}
[dir="rtl"] .balance-chip{padding:6px 6px 6px 13px}
.balance-chip:hover{border-color:var(--gold); box-shadow:var(--glow)}
.balance-chip .plus{
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(140deg, var(--gold), var(--gold3)); color:#fff;
  font-size:18px; font-weight:800; line-height:1; flex-shrink:0;
}
.balance-chip .amt{color:var(--gold2); font-variant-numeric:tabular-nums}

.badge-dot{
  position:absolute; top:2px; inset-inline-end:2px; min-width:17px; height:17px;
  padding:0 4px; border-radius:99px; background:var(--bad); color:#fff;
  font-size:10px; font-weight:700; display:grid; place-items:center;
  border:2px solid var(--bg); line-height:1;
}

.brand-txt{display:flex; flex-direction:column; line-height:1.05}
.burger{display:grid}

/* ══════════════ الدرج الجانبي ══════════════ */
.drawer-scrim{
  position:fixed; inset:0; z-index:110; background:rgba(4,7,16,.7);
  backdrop-filter:blur(4px); opacity:0; pointer-events:none;
  transition:opacity .28s var(--ease);
}
body.drawer-open .drawer-scrim{opacity:1; pointer-events:auto}

/* ⚠️ الموضع هنا **فيزيائي** عمداً (right/left) لا منطقي (inset-inline).
   السبب: `transform` فيزيائي دائماً ولا ينقلب مع الاتجاه. خلط الاثنين يضع
   الدرج عند حافة ويدفعه نحو الحافة نفسها، فيستقرّ في منتصف الشاشة ظاهراً
   طوال الوقت — وهو عطل وقع فعلاً. الجهتان مكتوبتان صراحةً هنا فيبقى الربط
   بين موضع الإخفاء واتجاه الدفع مرئياً للقارئ. */
.drawer{
  position:fixed; top:0; bottom:0; right:0; left:auto;
  z-index:120; width:302px; max-width:86vw;
  display:flex; flex-direction:column; overflow-y:auto;
  background:linear-gradient(180deg, var(--panel), var(--panel3));
  border-left:1px solid var(--line);
  transform:translateX(100%);          /* يخرج يميناً — العربية */
  transition:transform .3s var(--ease), visibility .3s;
  box-shadow:var(--shadow);
  /* مخفي فعلياً وهو مغلق: بدونها يبقى قابلاً للتركيز بلوحة المفاتيح
     ويقرأه القارئ الصوتي رغم أنه خارج الشاشة. */
  visibility:hidden;
}
[dir="ltr"] .drawer{
  right:auto; left:0;
  border-left:0; border-right:1px solid var(--line);
  transform:translateX(-100%);         /* يخرج يساراً — الإنجليزية */
}
body.drawer-open .drawer{transform:none; visibility:visible}

.drawer-head{padding:20px 18px 16px; border-bottom:1px solid var(--line);
  background:linear-gradient(165deg, var(--bg2), var(--panel) 72%)}
.d-user{display:flex; flex-direction:column; gap:2px}
.d-name{font-size:16px; font-weight:700}
.d-acc{font-size:12px; color:var(--mut); font-family:ui-monospace,Consolas,monospace}
.d-balance{font-size:27px; font-weight:800; color:var(--gold2); margin:12px 0 14px;
  letter-spacing:-.6px}
.d-quick{display:flex; gap:9px; align-items:center}
.d-quick .q{
  width:38px; height:38px; display:grid; place-items:center; cursor:pointer;
  background:var(--panel); border:1px solid var(--line); color:var(--ink2);
  border-radius:11px; font-size:16px; transition:.2s var(--ease);
  flex:none;
}
.d-quick .q svg{width:17px; height:17px; display:block}
.d-quick .q:hover{background:var(--panel2); color:var(--gold); border-color:var(--line2)}

.cur-switch{
  display:flex; align-items:center; gap:9px; width:calc(100% - 28px);
  margin:14px; padding:11px 14px; cursor:pointer; font-size:13.5px;
  background:linear-gradient(140deg, var(--gold-soft), transparent);
  border:1px solid color-mix(in srgb, var(--gold) 32%, transparent);
  border-radius:99px; color:var(--ink); transition:.2s var(--ease);
}
.cur-switch:hover{border-color:var(--gold); box-shadow:var(--glow)}
.cur-switch .ic{color:var(--gold2)}
.cur-switch .lbl{color:var(--mut)}
.cur-switch b{margin-inline-start:auto; color:var(--gold2)}

.d-nav{padding:6px 12px 14px; flex:1}
.d-nav a{
  display:flex; align-items:center; gap:12px; padding:11px 13px;
  border-radius:var(--r2); color:var(--ink2); font-size:14.5px; margin-bottom:2px;
  position:relative; transition:.2s var(--ease);
}
.d-nav a i{font-style:normal; width:22px; text-align:center; font-size:15px}
.d-nav a:hover{background:var(--panel); color:var(--ink)}
.d-nav a.on{
  background:var(--bg2); color:var(--navy); font-weight:700;
}
:root[data-theme="dark"] .d-nav a.on{background:var(--panel3); color:#fff}
.d-nav a.on::after{
  content:''; position:absolute; inset-inline-end:0; top:24%; height:52%;
  width:3px; border-radius:3px; background:var(--gold);
}
.d-count{
  margin-inline-start:auto; background:var(--bad); color:#fff; font-size:11px;
  font-weight:700; min-width:20px; height:20px; border-radius:99px;
  display:grid; place-items:center; padding:0 6px;
}

.d-foot{padding:16px 18px 22px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:12px}
.d-theme,.d-lang{
  display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r2);
  color:var(--ink2); font-size:13.5px; cursor:pointer; transition:.2s var(--ease);
}
.d-theme:hover,.d-lang:hover{background:var(--panel2); color:var(--ink)}
.d-theme .sw{
  margin-inline-start:auto; width:40px; height:22px; border-radius:99px;
  background:var(--line2); position:relative; transition:background .22s var(--ease);
}
.d-theme .sw::after{
  content:''; position:absolute; top:3px; inset-inline-start:3px;
  width:16px; height:16px; border-radius:50%; background:var(--ink);
  transition:transform .22s var(--ease);
}
.d-theme .sw.on{background:var(--gold)}
.d-theme .sw.on::after{transform:translateX(18px); background:#fff}
[dir="rtl"] .d-theme .sw.on::after{transform:translateX(-18px)}

.d-social{display:flex; gap:10px; justify-content:center; margin-top:4px}
.d-social .soc{
  width:42px; height:42px; display:grid; place-items:center; border-radius:13px;
  font-size:19px; border:1px solid var(--line); background:var(--panel);
  transition:.2s var(--ease);
}
.d-social .soc:hover{transform:translateY(-2px); border-color:var(--line2)}
.d-social .soc.ok{color:var(--ok); background:var(--ok-soft)}
.d-social .soc.info{color:var(--info); background:var(--info-soft)}
.d-phone{text-align:center; color:var(--ink2); font-size:13px; margin:0;
  letter-spacing:.5px}
.d-hours{text-align:center; color:var(--mut); font-size:11.5px; margin:0;
  line-height:1.7}

.d-brand{display:flex; flex-direction:column; align-items:center; gap:8px;
  padding-top:16px; border-top:1px solid var(--line)}
.d-logo{display:block; color:var(--ink); opacity:.95}
.d-logo .axis-mark{display:block; width:62px; height:53px}
.d-group{font-size:12px; font-weight:800; letter-spacing:2.4px; color:var(--ink2)}
.d-dev{text-align:center; color:var(--mut); font-size:12px; margin:0;
  letter-spacing:.3px}
.d-dev b{color:var(--ink2); font-weight:800; letter-spacing:1.4px}
.d-dev a{color:var(--info); font-weight:700; letter-spacing:1.4px}
.d-copy{text-align:center; color:var(--faint); font-size:11px; margin:0}

/* ══════════════ شريط سفلي للموبايل ══════════════ */
.tabbar{display:none}

/* ══════════════ الأزرار ══════════════ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; border-radius:var(--r2); border:1px solid transparent;
  cursor:pointer; font-size:14.5px; font-weight:600; transition:.2s var(--ease);
  white-space:nowrap;
}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none !important; box-shadow:none !important}

.btn-primary{
  background:var(--navy); color:#fff;
  font-weight:800; box-shadow:0 12px 25px rgba(var(--shade-rgb,8,31,73),.18);
}
:root[data-theme="dark"] .btn-primary{background:var(--gold); color:#06152c}
.btn-primary:hover:not(:disabled){transform:translateY(-1px);
  box-shadow:0 16px 32px rgba(var(--shade-rgb,8,31,73),.26)}
.btn-primary:active:not(:disabled){transform:translateY(0)}

.btn-ghost{background:var(--panel); color:var(--ink2); border-color:var(--line)}
.btn-ghost:hover:not(:disabled){background:var(--panel2); color:var(--ink); border-color:var(--line2)}

.btn-danger{background:var(--bad-soft); color:var(--bad); border-color:color-mix(in srgb,var(--bad) 30%,transparent)}
.btn-danger:hover:not(:disabled){background:var(--bad); color:#fff}

.btn-block{width:100%}
.btn-sm{padding:7px 13px; font-size:13px; border-radius:var(--r3)}
.btn-lg{padding:14px 26px; font-size:15.5px}

/* ══════════════ البطاقات ══════════════ */
.card{
  background:linear-gradient(160deg, var(--panel), var(--panel2));
  border:1px solid var(--line); border-radius:var(--r); padding:20px;
  box-shadow:var(--shadow2); position:relative; overflow:hidden;
}
.card.pad-lg{padding:26px}
.card.flat{background:var(--panel); box-shadow:none}

/* شريط ذهبي علوي يظهر عند التحويم — نفس لغة التطبيق المرجعي */
.card.hover::after{
  content:''; position:absolute; inset-inline-start:0; top:0; height:2px; width:100%;
  background:linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--gold) 60%, transparent), transparent);
  opacity:0; transition:opacity .25s var(--ease);
}
.card.hover{transition:transform .25s var(--ease), border-color .25s var(--ease),
  box-shadow .25s var(--ease)}
.card.hover:hover{transform:translateY(-3px); border-color:var(--line2); box-shadow:var(--shadow)}
.card.hover:hover::after{opacity:1}

.grid{display:grid; gap:16px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-auto{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}

/* ══════════════ العناوين ══════════════ */
h1{font-size:28px; font-weight:800; letter-spacing:-.6px; margin:0 0 6px;
  color:var(--navy)}
:root[data-theme="dark"] h1, :root[data-theme="dark"] h2{color:#fff}
h2{font-size:23px; font-weight:800; letter-spacing:-.4px; margin:34px 0 16px;
  color:var(--navy)}
h1 span, h2 span{color:var(--gold)}
h2:first-child{margin-top:0}
h3{font-size:16px; font-weight:700; margin:0 0 10px}

.page-head{display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap;
  margin-bottom:22px}
.page-head .sub{color:var(--mut); font-size:13.5px; margin:0}
.page-head .spacer{flex:1}

.muted{color:var(--mut); font-size:13.5px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px; letter-spacing:-.2px}
.num{font-variant-numeric:tabular-nums}
.ell{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ══════════════ شريط الصور المتحرّك ══════════════ */
.slider{
  position:relative; overflow:hidden; border-radius:24px;
  border:1px solid var(--line2); margin-bottom:22px;
  background:linear-gradient(140deg, var(--panel3), var(--panel));
}
/* نسبة ثابتة تحجز المساحة قبل تحميل الصور، فلا تقفز الصفحة تحت المؤشّر. */
.slides{position:relative; aspect-ratio:1000/340; min-height:190px}
.slide{
  position:absolute; inset:0; display:block; text-decoration:none;
  /* الشريحة المخفية شفافة **ومُعطَّلة للمؤشّر**: بدون `visibility` تبقى
     طبقةً فوق المرئية وتبتلع النقرات. */
  opacity:0; visibility:hidden; transform:scale(1.06);
  transition:opacity .7s var(--ease), transform 7s linear,
             visibility 0s linear .7s;
}
.slide.on{
  opacity:1; visibility:visible; transform:scale(1);
  /* زحف بطيء (Ken Burns) يمنح الصورة الساكنة إحساس الحركة. */
  transition:opacity .7s var(--ease), transform 7s linear, visibility 0s;
}
.slide img{width:100%; height:100%; object-fit:cover; display:block}
.slide-body{
  position:absolute; inset-inline-start:0; inset-block-end:0; width:100%;
  display:flex; flex-direction:column; gap:6px; padding:26px 30px 30px;
  background:linear-gradient(to top, rgba(6,10,22,.88), rgba(6,10,22,.35) 55%,
             transparent);
  color:#fff;
}
.slide-title{font-size:24px; font-weight:800; letter-spacing:-.5px}
.slide-sub{font-size:14px; opacity:.86; max-width:56ch}
.slide-cta{
  align-self:flex-start; margin-top:8px; padding:8px 16px; border-radius:99px;
  background:var(--gold); color:#fff; font-size:13px; font-weight:700;
}
.slide:hover .slide-cta{filter:brightness(1.08)}

.slider-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:38px; height:38px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; font-size:24px; line-height:1;
  border:1px solid rgba(255,255,255,.28); background:rgba(10,14,26,.5);
  color:#fff; backdrop-filter:blur(6px);
  opacity:0; transition:opacity .25s var(--ease), background .2s var(--ease);
}
/* الأسهم **فيزيائية دائماً**: `‹` يشير يساراً في كل الاتجاهات، فربطه بحافة
   منطقية يقلبه مع `dir` ويصبح السهم عكس ما يفعله. */
.slider-nav.prev{left:14px}
.slider-nav.next{right:14px}
.slider:hover .slider-nav, .slider-nav:focus-visible{opacity:1}
.slider-nav:hover{background:rgba(10,14,26,.8)}

.slider-dots{
  position:absolute; inset-block-end:14px; inset-inline-end:22px; z-index:2;
  display:flex; gap:7px;
}
.slider-dots .dot{
  width:8px; height:8px; padding:0; border-radius:99px; cursor:pointer;
  border:0; background:rgba(255,255,255,.42);
  transition:width .3s var(--ease), background .3s var(--ease);
}
.slider-dots .dot.on{width:22px; background:var(--gold)}

@media (max-width:860px){
  .slides{aspect-ratio:16/10; min-height:0}
  /* أضيق من 520px: 16/10 تُنتج بانراً بارتفاع 224px يزاحم الأقسام على
     الشاشة. 16/6 تُبقيه صورةً واضحة بنصف الارتفاع. */
  @media (max-width:520px){ .slides{aspect-ratio:16/6} }
  .slide-body{padding:18px 18px 22px}
  .slide-title{font-size:18px}
  .slide-sub{font-size:12.5px}
  .slider-nav{display:none}   /* اللمس يكفي على الهاتف */
}
/* من طلب تقليل الحركة يحصل على تبديل فوري بلا زحف ولا تلاشٍ. */
@media (prefers-reduced-motion:reduce){
  .slide, .slide.on{transition:none; transform:none}
}

/* ══════════════ صفحة المستويات ══════════════ */
.tier-hero{
  position:relative; overflow:hidden; border-radius:22px; padding:26px 24px;
  margin-bottom:24px;
  background:linear-gradient(140deg,
    color-mix(in srgb, var(--tier) 16%, var(--panel)), var(--panel));
  border:1px solid color-mix(in srgb, var(--tier) 40%, transparent);
}
.th-top{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.th-icon{
  width:52px; height:52px; border-radius:15px; display:grid; place-items:center;
  font-size:26px; flex:none;
  background:color-mix(in srgb, var(--tier) 20%, transparent);
  border:1px solid color-mix(in srgb, var(--tier) 45%, transparent);
  filter:drop-shadow(0 0 10px color-mix(in srgb, var(--tier) 45%, transparent));
}
.th-txt{display:flex; flex-direction:column; gap:2px}
.th-txt .muted, .th-spend .muted{font-size:12px}
.th-name{font-size:21px; font-weight:800; color:var(--tier)}
.th-spend{margin-inline-start:auto; text-align:end; display:flex;
  flex-direction:column; gap:2px}
.th-spend b{font-size:20px; font-weight:800}

.th-bar{
  height:8px; border-radius:99px; margin-top:18px; overflow:hidden;
  background:var(--panel2); border:1px solid var(--line);
}
.th-bar span{
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--tier) 60%, transparent), var(--tier));
  transition:width .6s var(--ease);
}
.th-hint{margin:10px 0 0; font-size:13.5px; color:var(--ink2)}

.tier-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.tier-card{
  display:flex; flex-direction:column; gap:10px; padding:18px;
  border-radius:var(--r); background:var(--panel);
  border:1px solid var(--line);
  transition:transform .2s var(--ease), border-color .2s var(--ease);
}
.tier-card:hover{transform:translateY(-3px)}
/* المستوى الحالي يُميَّز بلونه لا بعلامة صغيرة — يُقرأ من مسافة. */
.tier-card.on{
  border-color:var(--tier);
  background:linear-gradient(150deg,
    color-mix(in srgb, var(--tier) 12%, var(--panel)), var(--panel));
  box-shadow:0 8px 26px color-mix(in srgb, var(--tier) 18%, transparent);
}
.tc-head{display:flex; align-items:center; gap:9px}
.tc-icon{font-size:22px; filter:drop-shadow(0 0 6px var(--tier))}
.tc-name{font-size:15.5px; font-weight:700; color:var(--tier)}
.tc-save{display:flex; align-items:baseline; gap:6px}
.tc-save b{font-size:22px; font-weight:800; letter-spacing:-.5px}
.tc-save .muted{font-size:12px}
.tc-list{list-style:none; margin:0; padding:0; display:flex;
  flex-direction:column; gap:6px; font-size:13px; flex:1}
.tc-list li{line-height:1.6}
/* المستويات المقفلة تبقى مرئية بوضوح: إخفاؤها يخفي الهدف الذي نريده مرئياً. */
.tier-card.locked{border-style:dashed}

/* رسالة قيد الكمية — تظهر تحت الخانة مباشرةً، حيث ينظر المستخدم. */
.qty-error{
  margin-top:8px; padding:9px 12px; border-radius:10px; font-size:12.5px;
  line-height:1.6; background:var(--bad-soft); color:var(--bad);
  border:1px solid color-mix(in srgb, var(--bad) 26%, transparent);
}

.code-block{
  margin:0; padding:16px; border-radius:12px; overflow-x:auto;
  background:var(--panel2); border:1px solid var(--line);
  font-size:12.5px; line-height:1.85; white-space:pre;
}
.code-block code{background:none; padding:0; font-size:inherit}

@media (max-width:900px){
  .tier-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .tier-grid{grid-template-columns:1fr}
  .th-spend{margin-inline-start:0; text-align:start; width:100%}
}

/* ══════════════ الواجهة الرئيسية ══════════════ */
.hero{
  position:relative; overflow:hidden; border-radius:22px; padding:44px 38px;
  background:linear-gradient(145deg, var(--navy), var(--navy2));
  border:0; margin-bottom:30px; color:#fff;
  box-shadow:0 20px 60px rgba(var(--shade-rgb,8,31,73),.18);
}
/* توهّج أزرق واحد في الزاوية — نفس لغة بطاقة الهوية في التصميم المرجعي */
.hero::before{
  content:''; position:absolute; width:360px; height:360px; border-radius:50%;
  background:var(--hero-glow,#3F8CFF); filter:blur(80px); opacity:.26;
  inset-inline-end:-110px; top:-120px; pointer-events:none;
}
.hero h1{font-size:34px; margin-bottom:12px; position:relative; color:#fff;
  letter-spacing:-1px}
.hero p{color:var(--hero-text,#B7C7DC); font-size:15.5px; max-width:56ch; margin:0 0 24px;
  position:relative}
/* الزرّ الأساسي داخل البطل يصير أبيض — الكحلي على الكحلي لا يُرى */
.hero .btn-primary{background:#fff; color:var(--navy)}
.hero .btn-ghost{background:rgba(255,255,255,.10); color:#fff;
  border-color:rgba(255,255,255,.28)}
.hero .btn-ghost:hover:not(:disabled){background:rgba(255,255,255,.18);
  color:#fff; border-color:rgba(255,255,255,.45)}
.hero .cta{display:flex; gap:10px; flex-wrap:wrap; position:relative}

.stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:8px}
.stat{
  background:linear-gradient(160deg, var(--panel), var(--panel2));
  border:1px solid var(--line); border-radius:var(--r); padding:17px 18px;
}
.stat .label{display:block; color:var(--mut); font-size:12.5px; margin-bottom:6px}
.stat .value{font-size:23px; font-weight:800; letter-spacing:-.5px;
  font-variant-numeric:tabular-nums; display:block}
.stat .value.gold{color:var(--gold2)}

/* ══════════════ الأقسام والمنتجات ══════════════ */
.cat-card{
  display:flex; align-items:center; gap:14px; padding:17px 18px;
  background:linear-gradient(160deg, var(--panel), var(--panel2));
  border:1px solid var(--line); border-radius:var(--r);
  transition:.24s var(--ease);
}
.cat-card:hover{transform:translateY(-3px); border-color:var(--gold);
  box-shadow:var(--glow)}
.cat-card .ico{
  width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
  font-size:22px; background:var(--gold-soft);
  border:1px solid color-mix(in srgb, var(--gold) 22%, transparent); flex-shrink:0;
}
.cat-card .t{font-weight:700; font-size:15px; margin-bottom:2px}
.cat-card .c{color:var(--mut); font-size:12.5px}

.prod-card{display:flex; flex-direction:column; height:100%}
.prod-card .thumb{
  aspect-ratio:16/10; border-radius:var(--r2); margin-bottom:13px; overflow:hidden;
  background:linear-gradient(140deg, var(--panel3), var(--bg3));
  display:grid; place-items:center; font-size:30px; color:var(--line3);
  border:1px solid var(--line);
}
.prod-card .thumb img{width:100%; height:100%; object-fit:cover}
.prod-card .cat{color:var(--mut); font-size:11.5px; margin-bottom:4px}
.prod-card .name{font-weight:700; font-size:14.5px; line-height:1.4; margin-bottom:10px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.prod-card .foot{display:flex; align-items:center; justify-content:space-between;
  gap:8px; margin-top:auto; padding-top:10px; border-top:1px solid var(--line)}
.prod-card .price{font-size:17px; font-weight:800; color:var(--gold2);
  font-variant-numeric:tabular-nums}
.prod-card .unit{font-size:11px; color:var(--mut); font-weight:400}

/* ══════════════ شبكة المجلدات والبلاطات ══════════════ */
/* بلاطة بصورة كبيرة واسم تحتها — تصفّح المتجر بصريّ لا نصّي، والصورة
   تُميَّز أسرع من سطر نص عند وجود عشرات الأقسام. */
/* ★ عدد الأعمدة وحجم الخطّ يأتيان من متغيّرين يضبطهما صنفٌ على `<body>`.
   قاعدة واحدة تحكم كل شبكات البلاطات في الموقع، فتغيير الحجم من اللوحة لا
   يتطلّب لمس أي قالب. */
:root{--tile-cols:6; --tile-name:12.5px; --tile-gap:12px; --tile-corner:11px}
body.tiles-normal{--tile-cols:4; --tile-name:13.5px; --tile-gap:14px;
  --tile-corner:14px}
body.tiles-large{--tile-cols:3; --tile-name:15px; --tile-gap:16px;
  --tile-corner:16px}

.tiles{
  display:grid; gap:var(--tile-gap);
  grid-template-columns:repeat(var(--tile-cols), minmax(0, 1fr));
}
.tile{display:flex; flex-direction:column; align-items:center; text-align:center}
.tile .art{
  width:100%; aspect-ratio:1; border-radius:var(--r); overflow:hidden;
  position:relative; display:grid; place-items:center; font-size:40px;
  background:var(--panel); border:1px solid var(--line);
  box-shadow:0 2px 8px rgba(var(--shade-rgb,8,31,73),.05); transition:.26s var(--ease);
}
.tile .art img{width:100%; height:100%; object-fit:cover}
.tile:hover .art{
  transform:translateY(-4px); border-color:var(--gold);
  box-shadow:0 14px 32px color-mix(in srgb, var(--gold) 22%, transparent);
}
/* زاوية ذهبية — توقيع بصري يربط البلاطات بهوية المتجر */
.tile .art::after{
  content:''; position:absolute; inset-inline:0; bottom:0; height:3px;
  background:var(--gold); opacity:0; transition:opacity .22s var(--ease);
}
.tile:hover .art::after{opacity:1}
.tile .nm{
  margin-top:9px; font-size:var(--tile-name); font-weight:700; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.tile .sub{font-size:11.5px; color:var(--mut); margin-top:3px}
.tile .price{font-size:13.5px; font-weight:800; color:var(--gold2); margin-top:4px;
  font-variant-numeric:tabular-nums}
.tile .flag{
  position:absolute; inset-block-end:8px; inset-inline-end:8px; z-index:2;
  padding:3px 9px; border-radius:99px; font-size:10.5px; font-weight:700;
  background:var(--ok); color:#052e22;
}
.tile.off .art{opacity:.45; filter:grayscale(.6)}

/* الشاشات الضيّقة تفرض حدّها الأقصى مهما اختار المشرف: ستّة أعمدة على
   هاتف تعطي بلاطات بعرض إصبع لا يُقرأ اسمها. */
@media (max-width:1100px){
  body, body.tiles-normal, body.tiles-large{--tile-cols:4}
}
@media (max-width:760px){
  body, body.tiles-normal, body.tiles-large{--tile-cols:3; --tile-gap:11px}
  .tile .nm{font-size:11.5px; margin-top:8px}
  .tile .art::after{border-width:12px}
}
/* ثلاثة أعمدة حتى على أضيق هاتف — لا عمودان.
   قياسٌ من المرجع عند عرض 384px: حاشية 13px، بلاطة 103px، فجوة 24px
   (13 + 103×3 + 24×2 + 13 = 384). عمودان يجعلان البلاطة 172px فتملأ
   الشاشة بلاطتان ويصير تصفّح عشرين قسماً تمريراً طويلاً. */
@media (max-width:400px){
  body, body.tiles-normal, body.tiles-large{--tile-cols:3; --tile-gap:24px}
  .tile .nm{font-size:11px; margin-top:7px; line-height:1.45}
}

/* بطاقة كود الشحن أعلى صفحة الإيداع */
.code-card{
  display:flex; align-items:center; gap:14px; padding:18px 20px;
  background:linear-gradient(160deg, var(--panel), var(--panel2));
  border:1px solid var(--line); border-radius:var(--r); cursor:pointer;
  transition:.22s var(--ease); width:100%; text-align:start;
}
.code-card:hover{border-color:var(--gold); box-shadow:var(--glow)}
.code-card .ic{
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  font-size:22px; background:var(--panel3); border:1px solid var(--line2);
  flex-shrink:0;
}
.code-card .t{font-size:16px; font-weight:700}
.code-card .d{font-size:12.5px; color:var(--mut); margin-top:2px}

/* ══════════════ الشارات ══════════════ */
.badge{
  display:inline-flex; align-items:center; gap:5px; padding:4px 11px;
  border-radius:99px; font-size:12px; font-weight:600; white-space:nowrap;
  border:1px solid transparent;
}
.badge.ok{background:var(--ok-soft); color:var(--ok); border-color:color-mix(in srgb,var(--ok) 26%,transparent)}
.badge.warn{background:var(--warn-soft); color:var(--warn); border-color:color-mix(in srgb,var(--warn) 26%,transparent)}
.badge.bad{background:var(--bad-soft); color:var(--bad); border-color:color-mix(in srgb,var(--bad) 26%,transparent)}
.badge.info{background:var(--info-soft); color:var(--info); border-color:color-mix(in srgb,var(--info) 26%,transparent)}
.badge.violet{background:var(--violet-soft); color:var(--violet); border-color:color-mix(in srgb,var(--violet) 26%,transparent)}
.badge.mut{background:var(--panel3); color:var(--mut); border-color:var(--line)}
/* المالك والأدوار العليا — تُميَّز بالذهبي كي تُقرأ من مسح سريع للجدول. */
.badge.gold{background:var(--gold-soft); color:var(--gold2);
  border-color:color-mix(in srgb,var(--gold) 32%,transparent)}

/* ══════════════ النماذج ══════════════ */
.field{margin-bottom:16px}
.field label{display:block; font-size:13.5px; font-weight:600; margin-bottom:7px;
  color:var(--ink2)}
.field label .req{color:var(--bad); margin-inline-start:3px}
.field .hint{font-size:12px; color:var(--mut); margin-top:6px}

input[type=text],input[type=email],input[type=password],input[type=number],
input[type=tel],input[type=url],input[type=date],select,textarea{
  width:100%; padding:11px 14px; background:var(--bg2); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r2); transition:.2s var(--ease);
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--gold);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 14%, transparent);
}
input::placeholder,textarea::placeholder{color:var(--faint)}
textarea{min-height:110px; resize:vertical; line-height:1.6}
select{cursor:pointer}

/* ══════════════ نماذج الحساب ══════════════ */
.auth-wide{max-width:520px}
.auth-title{text-align:center; font-size:24px; margin-bottom:4px}
.auth-sub{text-align:center; color:var(--mut); font-size:13px; margin:0 0 26px}
.auth-alt{text-align:center; margin-top:20px; color:var(--mut); font-size:14px}
.auth-alt a{color:var(--gold2); font-weight:600}

/* صفّان جنباً إلى جنب — ينهاران على الموبايل */
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:520px){ .field-row{grid-template-columns:1fr; gap:0} }

/* رسائل الخطأ inline تحت كل حقل.
   ★ `:not(.toast)`: إشعار الخطأ يحمل الصنف `err` أيضاً (`toast err`)، وكان
   هذا الإخفاء يبتلعه — فكل رسالة خطأ في الموقع واللوحة تختفي بصمت. */
.err:not(.toast){color:var(--bad); font-size:12.5px; margin:6px 0 0; min-height:0;
  display:none}
.err.on:not(.toast){display:block}
.form-err{text-align:center; margin-top:12px; font-size:13px}
.form-err a{color:var(--gold2); font-weight:600; text-decoration:underline}
input.invalid,select.invalid{border-color:var(--bad)}
input.invalid:focus{box-shadow:0 0 0 3px color-mix(in srgb, var(--bad) 16%, transparent)}

/* كلمة المرور */
.pw-wrap{position:relative}
.pw-wrap input{padding-inline-end:46px}
.pw-toggle{
  position:absolute; inset-inline-end:6px; top:50%; transform:translateY(-50%);
  background:none; border:0; cursor:pointer; font-size:16px; padding:6px 8px;
  border-radius:8px; line-height:1; color:var(--mut); transition:.18s var(--ease);
}
.pw-toggle:hover{background:var(--panel3); color:var(--ink)}
.pw-toggle{display:grid; place-items:center; width:40px; height:40px; padding:0}
.pw-toggle svg{display:block}
.pw-toggle .ic-hide{display:none}
.pw-toggle[aria-pressed="true"] .ic-show{display:none}
.pw-toggle[aria-pressed="true"] .ic-hide{display:block}
.pw-toggle:focus-visible{outline:2px solid var(--gold); outline-offset:1px}

.pw-meter{display:flex; align-items:center; gap:10px; margin-top:9px}
.pw-meter .bars{display:flex; gap:4px; flex:1}
.pw-meter .bars i{
  flex:1; height:4px; border-radius:99px; background:var(--line2);
  transition:background .25s var(--ease);
}
.pw-meter .label{font-size:11.5px; color:var(--mut); min-width:62px;
  text-align:end}
.pw-meter[data-score="1"] .bars i:nth-child(-n+1){background:var(--bad)}
.pw-meter[data-score="2"] .bars i:nth-child(-n+2){background:var(--warn)}
.pw-meter[data-score="3"] .bars i:nth-child(-n+3){background:var(--info)}
.pw-meter[data-score="4"] .bars i{background:var(--ok)}
.pw-meter[data-score="1"] .label{color:var(--bad)}
.pw-meter[data-score="2"] .label{color:var(--warn)}
.pw-meter[data-score="3"] .label{color:var(--info)}
.pw-meter[data-score="4"] .label{color:var(--ok)}

/* مُحدِّد الدولة */
.country-btn{
  width:100%; display:flex; align-items:center; gap:10px; cursor:pointer;
  padding:11px 14px; background:var(--bg2); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r2); font-size:15px;
  transition:.2s var(--ease); text-align:start;
}
.country-btn:hover{border-color:var(--line2)}
.country-btn .cflag{font-size:19px; line-height:1}
.country-btn .cname{flex:1; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap}
.country-btn .cdial{color:var(--gold2); font-weight:700;
  font-variant-numeric:tabular-nums}
.country-btn .caret{color:var(--mut); font-size:12px}

.country-modal .modal{max-width:460px; padding:20px; display:flex;
  flex-direction:column; max-height:82vh}
.country-search{margin-bottom:12px}
.country-list{overflow-y:auto; flex:1; margin-inline-end:-6px;
  padding-inline-end:6px}
.country-list .cgroup{
  font-size:11px; font-weight:700; color:var(--mut); letter-spacing:1px;
  padding:12px 10px 6px; position:sticky; top:0; background:var(--panel);
}
.citem{
  width:100%; display:flex; align-items:center; gap:11px; cursor:pointer;
  padding:10px 11px; background:none; border:0; border-radius:var(--r3);
  color:var(--ink); font-size:14.5px; text-align:start;
  transition:background .16s var(--ease);
}
.citem:hover{background:var(--panel3)}
.citem .cflag{font-size:19px; line-height:1}
.citem .cname{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.citem .cdial{color:var(--mut); font-variant-numeric:tabular-nums; font-size:13px}

/* حقل الهاتف — رمز الاتصال ملتصق بالحقل */
.phone-wrap{display:flex; align-items:stretch}
.phone-dial{
  display:flex; align-items:center; padding:0 13px; background:var(--panel3);
  border:1px solid var(--line); color:var(--gold2); font-weight:700;
  font-variant-numeric:tabular-nums; white-space:nowrap;
  border-start-start-radius:var(--r2); border-end-start-radius:var(--r2);
  border-inline-end:0;
}
.phone-wrap input{
  border-start-start-radius:0; border-end-start-radius:0;
  /* الأرقام تبقى LTR داخل واجهة عربية — الرقم يُقرأ يساراً-يميناً دائماً */
  direction:ltr; text-align:start;
}
[dir="rtl"] .phone-wrap input{text-align:right}

/* اقتراح إنشاء حساب بعد فشل الدخول */
.signup-hint{
  margin:14px 0 4px; padding:15px 16px; border-radius:var(--r2);
  background:var(--info-soft);
  border:1px solid color-mix(in srgb, var(--info) 28%, transparent);
  animation:rise .3s var(--ease) both;
}
.signup-hint p{margin:0 0 11px; font-size:13.5px; color:var(--ink2); line-height:1.6}

/* الفاصل «أو» */
.or-divider{display:flex; align-items:center; gap:14px; margin:22px 0 18px;
  color:var(--mut); font-size:12px}
.or-divider::before,.or-divider::after{
  content:''; flex:1; height:1px; background:var(--line);
}

#googleSlot{display:flex; justify-content:center; min-height:44px}
#googleBtn{display:flex; justify-content:center}
.google-off{font-size:12.5px; text-align:center; margin:6px 0 0}

/* قائمة العملات */
.cur-list{display:grid; gap:8px}
.cur-item{
  display:flex; align-items:center; gap:12px; padding:13px 15px;
  border:1px solid var(--line); border-radius:var(--r2); background:var(--panel);
  transition:.2s var(--ease);
}
.cur-item:hover{border-color:var(--line2); background:var(--panel2)}
.cur-item.on{
  border-color:var(--gold);
  background:linear-gradient(140deg, var(--gold-soft), transparent);
}
.cur-item .sym{
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:var(--panel3); font-weight:800; font-size:15px; color:var(--gold2);
}
.cur-item .nm{flex:1; font-size:14.5px; font-weight:600}
.cur-item .cd{font-size:12px; color:var(--mut); font-family:ui-monospace,monospace}

/* نافذة الترحيب */
.modal.welcome{text-align:center; max-width:400px}
.modal.welcome .tick{
  width:62px; height:62px; margin:0 auto 16px; border-radius:50%;
  display:grid; place-items:center; font-size:32px; color:#fff;
  background:linear-gradient(140deg, var(--ok), #10b981);
  box-shadow:0 10px 30px color-mix(in srgb, var(--ok) 30%, transparent);
}
.modal.welcome h3{font-size:19px; margin-bottom:8px}
.modal.welcome .btn{margin-top:18px}

/* ══════════════ شاشات الهوية — عمق ثلاثي الأبعاد ══════════════
   العمق هنا مبنيّ بالظلّ والطبقات لا بالتدرّجات الزخرفية: قاعدة واحدة
   تحكم المشهد — الضوء من الأعلى دائماً، فالحافة العلوية فاتحة والظلّ
   يسقط للأسفل. عكسُ الاتجاه في عنصر واحد يكسر الإيهام كلّه.

   والألوان كلها من رموز الهوية القائمة: لا قيمة جديدة أُدخلت. */
.auth-wrap{max-width:430px; margin:50px auto}
/* شارة الشعار — نفس لغة المكعّب بلا دوران: صفحةُ إنشاء حسابٍ طويلة
   ونموذجُها عمودان، فمكعّبٌ مائل فوقها يزاحم ما يجب أن يُقرأ. */
.auth-wrap .mark,.auth-badge{
  width:76px; height:76px; border-radius:22px; margin:0 auto 18px;
  display:grid; place-items:center;
  background:linear-gradient(150deg, #FFFFFF 0%, var(--panel2) 55%, var(--panel3) 100%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 18px 38px rgba(var(--shade-rgb,8,31,73),.18), inset 0 2px 0 rgba(255,255,255,1);
}
.auth-wrap .mark img,.auth-badge img{width:60%; height:auto; display:block}

/* ── المشهد ── */
.auth-3d{
  position:relative; min-height:calc(100vh - var(--nav-h) - 40px);
  display:flex; align-items:center; justify-content:center; gap:92px;
  padding:40px 0 56px; perspective:1900px; perspective-origin:50% 42%;
}
/* البطاقة أولاً في المصدر ليقرأها الصوتُ قبل الزينة، والعمود التعريفي
   يسبقها بصرياً: من يفتح «تسجيل الدخول» يريد الحقول لا الشعار. */
.auth-3d .auth-side{order:2}
.auth-3d .auth-card{order:1}
/* الحلقات السماوية تبني المسافة خلف البطاقة. `fixed` لا `absolute`:
   الحاوي يتمدّد بالمحتوى، فالخلفية المرتبطة به تتقطّع عند التمرير. */
.auth-3d::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  /* ★ الوهج يتلاشى إلى الحافة لا قبلها. توقّفُ التدرّج عند 62٪ يترك حدّاً
     ظاهراً في منتصف الشاشة — الخلفية تبدو مقصوصة لا متدرّجة. ونسبةٌ فوق
     100٪ تُبقي التلاشي خارج الإطار فلا يُرى له طرف. */
  background:
    radial-gradient(78% 68% at 6% 0%, color-mix(in srgb, var(--sky) 40%, transparent) 0%, transparent 100%),
    radial-gradient(82% 74% at 98% 104%, color-mix(in srgb, var(--gold) 15%, transparent) 0%, transparent 100%);
}

.auth-3d .auth-side{
  width:452px; flex:0 0 auto; transform:translateZ(-70px);
  display:flex; flex-direction:column; gap:26px;
}

/* ── المكعّب: ثلاثة وجوه بعمق حقيقي ── */
.auth-cube{
  width:112px; height:112px; position:relative;
  transform-style:preserve-3d; transform:rotateX(16deg) rotateY(-26deg);
}
/* ★ الوجه الأمامي يحمل **الشعار** لا حرف A مرسوماً بخطّ النصّ.
   الحرف المكتوب يتغيّر شكله بتغيّر الخطّ، والشعار علامةٌ مرسومة لها
   نسبها — و«A» في هوية AXIS ليست حرفاً عادياً بل مثلّثٌ يقطعه شعاع.
   والوجه صار أبيض: الشعار كحليّ، ووضعُه على خلفية زرقاء يُذيبه فيها. */
.auth-cube i{
  position:absolute; inset:0; border-radius:26px; display:grid;
  place-items:center; font-style:normal;
  background:linear-gradient(150deg, #FFFFFF 0%, var(--panel2) 55%, var(--panel3) 100%);
  box-shadow:0 34px 60px rgba(var(--shade-rgb,8,31,73),.28), inset 0 2px 0 rgba(255,255,255,1),
             inset 0 0 0 1px rgba(255,255,255,.9);
}
.auth-cube i img{width:62%; height:auto; display:block}
.auth-cube b,.auth-cube s{position:absolute; inset:0; border-radius:26px}
.auth-cube b{background:linear-gradient(160deg, var(--sky), var(--sky3));
  transform:translateZ(-16px) translate(11px,13px); opacity:.62}
.auth-cube s{background:var(--sky2);
  transform:translateZ(-30px) translate(21px,25px); opacity:.30}

.auth-3d .auth-head h1{
  margin:0 0 14px; font-size:clamp(34px,3.6vw,54px); font-weight:800;
  color:var(--navy); letter-spacing:-1.4px; line-height:1.12; text-align:start;
}
.auth-3d .auth-head h1 span{color:var(--gold)}
.auth-3d .auth-head p{
  margin:0; font-size:18px; line-height:1.85; color:var(--ink2);
  max-width:400px; text-wrap:pretty;
}

/* ── لوحات معلّقة بارتفاعات مختلفة ── */
.auth-stats{display:flex; gap:14px}
/* ★ `> .s` لا `div`: المحدّد العامّ كان يطابق `.n` و`.l` داخل البطاقة
   أيضاً، فيصير لكل رقمٍ ولكل تسمية صندوقٌ مستقلّ — ثلاث بطاقات تظهر ستّاً. */
.auth-stats > .s{
  flex:1; padding:18px 16px; border-radius:18px; text-align:start;
  background:color-mix(in srgb, var(--panel) 88%, transparent);
  border:1px solid var(--line);
}
.auth-stats > .s:nth-child(1){box-shadow:0 16px 30px rgba(var(--shade-rgb,8,31,73),.10); transform:translateZ(26px)}
.auth-stats > .s:nth-child(2){box-shadow:0 12px 24px rgba(var(--shade-rgb,8,31,73),.08); transform:translateZ(12px)}
.auth-stats > .s:nth-child(3){box-shadow:0 8px 18px rgba(var(--shade-rgb,8,31,73),.07)}
.auth-stats .n{font-size:26px; font-weight:800; color:var(--gold2); line-height:1}
.auth-stats .l{font-size:13.5px; color:var(--mut); margin-top:6px}

/* ── البطاقة: ألواح خلفية تصنع السماكة ── */
/* ★ الميل يتبع اتجاه الصفحة. قيمةٌ واحدة تُظهر البطاقة مائلةً **بعيداً**
   عن القارئ في إحدى اللغتين: في العربية تقع البطاقة يساراً والألواح
   الخلفية تبرز من الجهة الخطأ فينقلب الإيهام. المتغيّر يُقلَب في `rtl`. */
.auth-card{
  --tilt:-9deg; --lift:26px;
  position:relative; width:470px; flex:0 0 auto;
  transform-style:preserve-3d; transform:rotateY(var(--tilt)) rotateX(3deg);
}
[dir="rtl"] .auth-card{--tilt:9deg; --lift:-26px}
.auth-card::before,.auth-card::after{
  content:''; position:absolute; inset:0; border-radius:30px; z-index:-1;
}
.auth-card::before{background:linear-gradient(150deg, var(--sky2), var(--sky));
  transform:translateZ(-26px) translateX(var(--lift)) translateY(16px); opacity:.58}
.auth-card::after{background:var(--sky3);
  transform:translateZ(-48px) translateX(calc(var(--lift) * 1.85)) translateY(30px); opacity:.26}

/* ★ نسخةٌ بلا ميل. صفحةُ إنشاء الحساب نموذجٌ طويل بعمودين وتسعة حقول،
   والميل يُصعّب تتبّع الصفّ أثناء الملء — فتأخذ العمق (الألواح الخلفية
   والظلّ البعيد) وتترك الدوران. */
/* ★ الألواح تنكمش من الجانبين وتنزل — لا تنزلق جانباً.
   الإزاحة الأفقية تصلح لبطاقةٍ مائلة (الميل يُظهر جانبها)، أما البطاقة
   المستوية فتجعلها تبرز من جهةٍ واحدة كأنها طباعةٌ مزاحة. */
.auth-card.flat{transform:none; width:auto; margin-inline:auto}
.auth-card.flat::before{
  inset:0 14px -14px; transform:none; border-radius:26px; opacity:.50;
}
.auth-card.flat::after{
  inset:0 30px -28px; transform:none; border-radius:22px; opacity:.24;
}

/* الغلاف يحتاج سياق تكديس كي تبقى الألواح خلف البطاقة لا خلف الصفحة. */
.auth-lift{position:relative; z-index:0}

.auth-card > .card{
  border-radius:30px; padding:42px 40px 38px;
  background:linear-gradient(168deg, var(--panel) 0%, var(--panel2) 52%, var(--panel3) 100%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 48px 90px -20px rgba(var(--shade-rgb,8,31,73),.30),
             0 16px 34px rgba(var(--shade-rgb,8,31,73),.10),
             inset 0 1px 0 rgba(255,255,255,1);
}
.auth-card .auth-title{text-align:start; font-size:30px; font-weight:800;
  color:var(--ink); letter-spacing:-.7px; margin:0 0 7px}
.auth-card .auth-sub{text-align:start; font-size:15px; margin:0 0 24px}

/* ── الحقول: غائرة في السطح، والنشط يرتفع عنه ── */
.auth-3d .field input[type=text],
.auth-3d .field input[type=email],
.auth-3d .field input[type=password],
.auth-lift .field input[type=text],
.auth-lift .field input[type=email],
.auth-lift .field input[type=password],
.auth-lift .field input[type=tel]{
  height:54px; border-radius:15px;
  box-shadow:inset 0 2px 5px rgba(var(--shade-rgb,8,31,73),.07);
}
.auth-3d .field input:hover:not(:focus),
.auth-lift .field input:hover:not(:focus){
  border-color:var(--sky);
  box-shadow:inset 0 2px 4px rgba(var(--shade-rgb,8,31,73),.05), 0 4px 10px rgba(var(--shade-rgb,8,31,73),.06);
}
.auth-3d .field input:focus,
.auth-lift .field input:focus{
  border-color:var(--gold); border-width:1.5px;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--gold) 14%, transparent),
             0 8px 18px color-mix(in srgb, var(--gold) 16%, transparent);
}

/* ── الزرّ: حافة سفلية صلبة تعطيه سماكة، والضغط يُنزله ── */
.auth-3d .btn-primary.btn-block,
.auth-lift .btn-primary.btn-block{
  height:58px; border-radius:16px; font-size:17px; font-weight:700;
  background:linear-gradient(178deg, var(--gold3) 0%, var(--gold) 46%, var(--gold2) 100%);
  box-shadow:0 6px 0 var(--gold-edge,#17408F),
             0 20px 34px -8px color-mix(in srgb, var(--gold) 52%, transparent),
             inset 0 1.5px 0 rgba(255,255,255,.34);
  transition:transform .12s var(--ease), box-shadow .12s var(--ease);
}
.auth-3d .btn-primary.btn-block:hover:not(:disabled),
.auth-lift .btn-primary.btn-block:hover:not(:disabled){
  transform:translateY(-2px);
  box-shadow:0 8px 0 var(--gold-edge,#17408F),
             0 26px 40px -8px color-mix(in srgb, var(--gold) 58%, transparent),
             inset 0 1.5px 0 rgba(255,255,255,.40);
}
/* المضغوط: الحافة تنكمش والجسم ينزل — حركة جسمٍ حقيقي لا تلاشي لون. */
.auth-3d .btn-primary.btn-block:active:not(:disabled),
.auth-lift .btn-primary.btn-block:active:not(:disabled){
  transform:translateY(4px);
  box-shadow:0 2px 0 var(--gold-edge,#17408F),
             0 8px 16px -4px color-mix(in srgb, var(--gold) 42%, transparent),
             inset 0 2px 5px rgba(var(--shade-rgb,8,31,73),.28);
}
.auth-3d .btn-primary.btn-block:disabled,
.auth-lift .btn-primary.btn-block:disabled{
  background:var(--line2); box-shadow:0 3px 0 var(--sky);
}

.auth-3d .or-divider{margin:22px 0 16px}
.auth-3d #googleSlot{
  border-radius:16px; padding:3px;
  box-shadow:0 3px 0 color-mix(in srgb, var(--line) 60%, transparent),
             0 8px 18px rgba(var(--shade-rgb,8,31,73),.07);
}
.auth-3d .auth-alt{text-align:center}

/* الميل يُلغى لمن يطلب تقليل الحركة: الدوران في الفضاء يزعج بعض المستخدمين
   ويُصعّب القراءة، والتصميم يبقى قائماً بالظلّ وحده. */
@media (prefers-reduced-motion:reduce){
  .auth-card{transform:none}
  .auth-cube{transform:none}
  .auth-3d .btn-primary.btn-block{transition:none}
  .auth-3d .btn-primary.btn-block:hover:not(:disabled){transform:none}
  .auth-3d .btn-primary.btn-block:active:not(:disabled){transform:none}
}

/* الشاشة الضيّقة: العمود التعريفي يسقط، والميل يخفّ ثم يزول — شاشةٌ
   بعرض 390px لا تحتمل بطاقةً مائلة، فالحافة تخرج عن الإطار. */
@media (max-width:1080px){
  .auth-3d{gap:48px}
  .auth-3d .auth-side{width:380px}
  .auth-card{transform:rotateY(-5deg)}
}
@media (max-width:900px){
  .auth-3d{flex-direction:column; gap:36px; padding-top:24px;
    min-height:0; perspective:none}
  .auth-3d .auth-side{width:100%; max-width:470px; transform:none;
    align-items:center; text-align:center}
  .auth-3d .auth-head h1,.auth-3d .auth-head p{text-align:center}
  .auth-3d .auth-head p{max-width:none}
  .auth-cube{transform:rotateX(14deg) rotateY(-22deg)}
  .auth-card{width:100%; max-width:470px; transform:none}
  .auth-card::before,.auth-card::after{display:none}
}
@media (max-width:520px){
  .auth-3d .auth-side{gap:18px}
  .auth-cube{width:74px; height:74px}
  .auth-cube i{border-radius:19px; font-size:38px}
  .auth-cube b,.auth-cube s{border-radius:19px}
  .auth-card > .card{padding:30px 22px 28px; border-radius:24px}
  .auth-card .auth-title{font-size:25px}
  .auth-stats{display:none}
}

/* ══════════════ الجداول ══════════════ */
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r);
  background:var(--panel)}
table{width:100%; border-collapse:collapse; font-size:13.5px; min-width:560px}
thead th{
  text-align:start; padding:13px 15px; color:var(--mut); font-size:12px;
  font-weight:700; letter-spacing:.3px; background:var(--panel2);
  border-bottom:1px solid var(--line); white-space:nowrap;
}
tbody td{padding:13px 15px; border-bottom:1px solid var(--line)}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .16s var(--ease)}
tbody tr:hover{background:var(--panel2)}
td.num,th.num{font-variant-numeric:tabular-nums; text-align:end}

/* ══════════════ الخط الزمني ══════════════ */
.timeline{list-style:none; padding:0; margin:0; position:relative}
.timeline::before{
  content:''; position:absolute; inset-inline-start:9px; top:8px; bottom:8px;
  width:2px; background:var(--line);
}
.timeline li{position:relative; padding-inline-start:32px; padding-bottom:18px}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{
  content:''; position:absolute; inset-inline-start:4px; top:6px;
  width:12px; height:12px; border-radius:50%; background:var(--panel);
  border:2px solid var(--line2);
}
.timeline li.done::before{background:var(--gold); border-color:var(--gold)}
.timeline .t{font-weight:600; font-size:14px}
.timeline .d{color:var(--mut); font-size:12px; margin-top:2px}

/* ══════════════ الفراغ والتحميل ══════════════ */
.empty{text-align:center; padding:56px 20px; color:var(--mut)}
.empty .ico{font-size:44px; margin-bottom:14px; opacity:.5}
.empty .t{font-size:15px; font-weight:600; color:var(--ink2); margin-bottom:6px}

.skel{
  background:linear-gradient(90deg, var(--panel) 25%, var(--panel3) 37%, var(--panel) 63%);
  background-size:400% 100%; animation:shimmer 1.3s infinite linear;
  border-radius:var(--r2);
}
@keyframes shimmer{from{background-position:100% 0}to{background-position:-100% 0}}

.spinner{
  width:17px; height:17px; border:2px solid color-mix(in srgb, currentColor 25%, transparent);
  border-top-color:currentColor; border-radius:50%; animation:spin .65s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ══════════════ الإشعارات المنبثقة ══════════════ */
.toasts{position:fixed; inset-block-end:20px; inset-inline-end:20px; z-index:200;
  display:flex; flex-direction:column; gap:9px; max-width:calc(100vw - 40px)}
.toast{
  padding:13px 17px; border-radius:var(--r2); background:var(--panel3);
  border:1px solid var(--line2); box-shadow:var(--shadow); font-size:14px;
  opacity:0; transform:translateY(12px); transition:.3s var(--ease);
  max-width:380px; border-inline-start:3px solid var(--info);
}
.toast.in{opacity:1; transform:none}
.toast.out{opacity:0; transform:translateY(-8px)}
.toast.ok{border-inline-start-color:var(--ok)}
.toast.err{border-inline-start-color:var(--bad)}
.toast.warn{border-inline-start-color:var(--warn)}

/* ══════════════ النوافذ ══════════════ */
.modal-scrim{
  position:fixed; inset:0; z-index:150; background:rgba(4,7,16,.72);
  backdrop-filter:blur(5px); display:none; place-items:center; padding:20px;
}
.modal-scrim.open{display:grid}
.modal{
  background:linear-gradient(160deg, var(--panel), var(--panel2));
  border:1px solid var(--line2); border-radius:var(--r); padding:26px;
  width:100%; max-width:480px; box-shadow:var(--shadow);
  max-height:88vh; overflow-y:auto; animation:pop .25s var(--ease)
}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.modal h3{margin-bottom:14px}

/* ══════════════ متفرقات ══════════════ */
.copy-box{
  display:flex; align-items:center; gap:10px; padding:12px 15px;
  background:var(--bg2); border:1px solid var(--line); border-radius:var(--r2);
}
.copy-box code{flex:1; overflow-x:auto; white-space:nowrap; color:var(--gold2);
  font-family:ui-monospace,Consolas,monospace; font-size:13px}

.payload-box{
  padding:15px 17px; background:var(--bg2); border:1px dashed var(--line2);
  border-radius:var(--r2); font-family:ui-monospace,Consolas,monospace;
  font-size:13px; white-space:pre-wrap; word-break:break-all; line-height:1.7;
}

.steps{display:flex; gap:0; margin-bottom:26px; overflow-x:auto}
.steps .step{
  flex:1; text-align:center; padding:11px 8px; font-size:12.5px; color:var(--mut);
  border-bottom:2px solid var(--line); white-space:nowrap; min-width:90px;
}
.steps .step.on{color:var(--gold2); border-bottom-color:var(--gold); font-weight:700}
.steps .step.done{color:var(--ok); border-bottom-color:var(--ok)}

.pager{display:flex; gap:7px; justify-content:center; margin-top:24px;
  align-items:center; flex-wrap:wrap}
.pager .pg{
  min-width:37px; height:37px; display:grid; place-items:center; padding:0 11px;
  border:1px solid var(--line); border-radius:var(--r3); background:var(--panel);
  color:var(--ink2); cursor:pointer; font-size:13.5px; transition:.2s var(--ease);
}
.pager .pg:hover{border-color:var(--line2); color:var(--ink)}
.pager .pg.on{background:linear-gradient(140deg,var(--gold2),var(--gold));
  color:#fff; border-color:transparent; font-weight:700}

/* معرض صور المنتج ─────────────────────────────────────────────
   التنقّل بـ`:target` لا بـJavaScript: الصور كلها في الصفحة، والنقر على
   مصغّرة يغيّر المرساة فتظهر صورتها. سكربتٌ معطَّل يترك المعرض يعمل. */
.gallery{display:flex; flex-direction:column; gap:10px}
.gal-stage{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  border-radius:var(--r2); background:var(--panel3);
}
.gal-slide{margin:0; position:absolute; inset:0; opacity:0;
  transition:opacity .25s var(--ease); pointer-events:none}
.gal-slide img{width:100%; height:100%; object-fit:contain; display:block}

/* ★ الحالة الافتراضية: أول صورة تظهر قبل أي نقرة، والمستهدَفة تعلوها.
   الترتيب بـ`z-index` لا بإخفاء الأولى عبر `:has()`: القاعدة الشرطية
   تحتاج دعماً حديثاً، ومتصفّحٌ يجهلها كان يُبقي الأولى مرئيةً **فوق** ما
   اختاره الزائر فيبدو المعرض جامداً على صورته الأولى. أما الطبقات فتعمل
   في كل متصفّح يفهم `:target` أصلاً: الأولى ظاهرة في القاع، والمختارة
   تُرفع فوقها — فيرى القديمُ الصورةَ الصحيحة كما يراها الحديث. */
.gal-slide:first-child{opacity:1; z-index:1}
.gal-slide:target{opacity:1; z-index:2}

.gal-thumbs{display:flex; gap:8px; flex-wrap:wrap}
.gal-thumb{
  width:62px; height:62px; flex:0 0 auto; padding:0; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r3);
  background:var(--panel); transition:.2s var(--ease); opacity:.72;
}
.gal-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.gal-thumb:hover{border-color:var(--line3); opacity:1; transform:translateY(-2px)}
.gal-thumb:focus-visible{outline:2px solid var(--gold); outline-offset:2px}

/* ★ لا علامة دائمة على المصغّرة المختارة — وهذا نقصٌ معلوم لا سهو.
   المرساة الواحدة لا تُمسك مرّتين: الصورة تلتقط `:target` لتظهر، فلا يبقى
   للمصغّرة ما تلتقطه، والوصول من الصورة إلى مصغّرتها يعبر شجرتين ويحتاج
   `:has()` — وهي القاعدة التي تخلّينا عنها في الشرائح لأن متصفّحاً يجهلها
   كان يكسر العارض. وقاعدةٌ تُجمّل هنا وتُعطَّل هناك تترك المصغّرة الأولى
   مُعلَّمةً أبداً، وعلامةٌ كاذبة أسوأ من لا علامة.

   والمعرض يبقى مفهوماً: الصورة الظاهرة هي الجواب، والمصغّرة تُضيء عند
   المرور وعند التنقّل بلوحة المفاتيح. وحين يأتي سكربت المعرض (تكبير،
   سحب بالإصبع) يضيف الصنف النشط في سطر. */

@media (max-width:560px){
  .gal-thumb{width:52px; height:52px}
}

/* شريط الفرز والتصفية ───────────────────────────────────────────
   `flex-wrap` لا شبكة بأعمدة ثابتة: الحقول خمسة بأطوال مختلفة، والشبكة
   تفرض عليها عرضاً واحداً فتتمدّد خانة السعر بلا داعٍ وتنضغط قائمة الفرز. */
.filter-bar{
  display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap;
  padding:14px 16px; margin-bottom:18px;
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r2);
}
.filter-bar .fb-field{display:flex; flex-direction:column; gap:6px; margin:0}
.filter-bar .fb-label{font-size:12px; font-weight:600; color:var(--mut)}
.filter-bar select,.filter-bar input[type=text]{margin:0; height:38px; padding:0 11px}
.filter-bar select{min-width:150px}
/* خانتا السعر ضيّقتان عمداً: الأسعار هنا من رقمين إلى أربعة، وحقلٌ عريض
   يوحي بمدخلٍ أطول مما يُنتظَر. */
.filter-bar .fb-price input{width:92px}
/* هامشٌ إضافي يفصل الخيار عن زرّ التنفيذ: الشريط يقرأ عندها «حقولٌ ثم
   إجراء» لا سلسلةً واحدة، و`margin-inline-end` يتبع اتجاه الصفحة فيصحّ
   في العربية والإنجليزية بقاعدة واحدة. */
.filter-bar .fb-check{
  display:flex; align-items:center; gap:7px; height:38px;
  margin-inline-end:6px;
  font-size:13.5px; color:var(--ink2); cursor:pointer; user-select:none;
}
.filter-bar .fb-check input{width:16px; height:16px; margin:0; cursor:pointer;
  accent-color:var(--gold)}
.filter-bar .btn{height:38px; padding:0 18px}
.filter-count{font-size:12.5px; margin:-8px 0 16px}

@media (max-width:560px){
  /* على الموبايل يصير الشريط عمودين: صفٌّ أفقي من خمسة عناصر يترك كل حقل
     أضيق من أن يُقرأ، والفرز أكثرها استعمالاً فيأخذ العرض كاملاً. */
  .filter-bar{gap:10px 8px}
  .filter-bar .fb-field:first-of-type{flex:1 1 100%}
  .filter-bar select{width:100%; min-width:0}
  .filter-bar .fb-price{flex:1 1 calc(50% - 4px)}
  .filter-bar .fb-price input{width:100%}
  .filter-bar .fb-check{flex:1 1 100%}
  .filter-bar .btn{flex:1 1 auto}
}

.chips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px}
.chips a{
  padding:7px 15px; border:1px solid var(--line); border-radius:99px;
  background:var(--panel); color:var(--ink2); font-size:13px; transition:.2s var(--ease);
}
.chips a:hover{border-color:var(--line2); color:var(--ink)}
.chips a.on{background:linear-gradient(140deg,var(--gold2),var(--gold));
  color:#fff; border-color:transparent; font-weight:700}

.kv{display:flex; justify-content:space-between; gap:14px; padding:10px 0;
  border-bottom:1px solid var(--line); font-size:14px}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--mut)}
.kv .v{font-weight:600; text-align:end}
.kv.total{border-top:1px solid var(--line2); margin-top:6px; padding-top:14px;
  font-size:17px}
.kv.total .v{color:var(--gold2); font-weight:800}

.alert{
  padding:14px 17px; border-radius:var(--r2); font-size:13.5px; margin-bottom:18px;
  border:1px solid transparent; border-inline-start-width:3px;
}
.alert.info{background:var(--info-soft); color:var(--info);
  border-inline-start-color:var(--info)}
.alert.warn{background:var(--warn-soft); color:var(--warn);
  border-inline-start-color:var(--warn)}
.alert.bad{background:var(--bad-soft); color:var(--bad);
  border-inline-start-color:var(--bad)}
.alert.ok{background:var(--ok-soft); color:var(--ok);
  border-inline-start-color:var(--ok)}

/* ══════════════ التذييل ══════════════ */
.foot{
  background:var(--foot-bg,#061832); color:var(--foot-text,#91A4BD); margin-top:60px; padding:26px 0 30px;
  font-size:12.5px; position:relative; z-index:1;
}
.foot a:hover{color:#fff}
.foot .wrap{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.foot .axis{font-weight:800; letter-spacing:2px; color:#fff}
.foot .tag{font-size:11.5px; letter-spacing:1px}
.foot .links{display:flex; gap:16px; margin-inline-start:auto; flex-wrap:wrap}
.foot .links a:hover{color:var(--foot-link,#69A1FF)}

/* ══════════════ الاستجابة ══════════════ */
@media (max-width:960px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .hero{padding:34px 24px}
  .hero h1{font-size:26px}
}

@media (max-width:760px){
  body{padding-bottom:var(--tabbar-h)}
  /* حاشية 13px وشريط علوي 60px: قياسٌ من المرجع. الشريط كان 72px وفوقه
     شريط إعلان 36px، أي 108px من الهيكل قبل أي محتوى — والمرجع يكتفي
     بـ58px فتظهر البلاطات فوق الطيّة بدل أن تُدفَع تحتها. */
  :root{--nav-h:60px}
  .wrap{padding:0 13px}
  .nav{display:none}
  .hide-xs{display:none}
  .balance-chip{font-size:12.5px}
  .brand .sub{display:none}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .grid-auto{grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px}
  h1{font-size:22px}
  .hero{padding:28px 20px; border-radius:18px}
  .hero h1{font-size:23px}
  .card{padding:17px}
  main{padding:14px 0 26px}

  /* شريط الإعلان يختفي على الهاتف: نصّه «AXIS DIGITAL STORE» وهو الاسم
     نفسه المكتوب في الشريط العلوي تحته مباشرةً، والشعار الفرعي مخفيّ أصلاً
     دون 600px. فالنتيجة 36px من ارتفاع الشاشة مقابل تكرار كلمة.
     لإعادته: احذف هذا السطر. */
  .announce{display:none}

  /* البطاقة التعريفية الكبيرة كانت تأكل ~280px قبل أوّل بلاطة، وهي رسالةٌ
     تُقرأ مرّة. تبقى — مضغوطةً — فيصل المتصفّح إلى الأقسام أسرع. */
  .hero{padding:22px 18px; border-radius:16px; margin-bottom:18px}
  .hero p{font-size:13.5px; line-height:1.7}
  .hero .cta{gap:9px}
  .hero .cta .btn{padding:11px 18px; font-size:13.5px}

  /* البطاقة التعريفية للزائر وحده. العميل الداخل يعرف المتجر، وعرضُها له
     يدفع الأقسام 233px إلى الأسفل في كل زيارة — والمرجع لا يعرضها أصلاً
     لمن سجّل دخوله. تبقى للزائر لأنها هي ما يشرح المتجر لمن يراه أوّل مرّة. */
  .hero-signed{display:none}

  /* الشريط الإعلاني: 52px لسطرٍ واحد متحرّك. */
  .marquee{padding:9px 13px; font-size:12.5px; margin-bottom:13px}

  /* شريط تنقّل سفلي — الوصول بالإبهام أهم من الجماليات على الموبايل */
  .tabbar{
    display:flex; position:fixed; inset-inline:0; bottom:0; z-index:60;
    height:var(--tabbar-h); background:color-mix(in srgb, var(--panel) 92%, transparent);
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .tabbar a{
    flex:1; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:3px; color:var(--mut); font-size:10px;
    transition:color .2s var(--ease); position:relative;
  }
  .tabbar a .i{font-size:19px; line-height:1}
  .tabbar a.on{color:var(--gold2)}

  /* الزرّ الأوسط بارز — الرئيسية هي المرساة التي يعود إليها المستخدم */
  .tabbar a.center{
    flex:0 0 auto; width:64px; margin-top:-22px; justify-content:flex-start;
  }
  .tabbar a.center .i{
    width:58px; height:58px; border-radius:50%; display:grid; place-items:center;
    font-size:24px; color:#fff;
    background:linear-gradient(140deg, var(--gold2), var(--gold));
    box-shadow:0 8px 22px color-mix(in srgb, var(--gold) 38%, transparent);
    border:4px solid var(--bg);
  }

  .toasts{inset-block-end:calc(var(--tabbar-h) + 14px); inset-inline:14px}
  .toast{max-width:none}
}

@media (max-width:420px){
  .stat-row{grid-template-columns:1fr}
  .steps .step{min-width:74px; font-size:11.5px}
}

@media print{
  .topbar,.tabbar,.foot,.toasts{display:none !important}
  body::before{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}

/* ══════════════ شريط الإعلان ══════════════
   الشريط الكحلي الرفيع فوق الرأس — أوضح عنصر في الهوية المرجعية،
   ولا يمسّ أي بنية قائمة. */
.announce{background:var(--navy); color:#fff; font-size:12px; letter-spacing:.3px}
.announce .wrap{height:36px; display:flex; align-items:center;
  justify-content:space-between; gap:14px; opacity:.94}
.announce .tagline{color:var(--announce-text,#B8C8DD)}
@media (max-width:600px){ .announce .tagline{display:none} }

/* ══════════════ شعار AXIS ══════════════
   العمل الفنّي الأصلي بدل رسم متجهي مقلَّد. نسختان — كحلية للفاتح وبيضاء
   للداكن — تتبدّلان بالسمة، لأن صورة نقطية واحدة لا تتلوّن مع `currentColor`
   كما كان يفعل الشعار المتجهي السابق. */
/* ★ الرابط من متغيّرٍ يحقنه رأس الصفحة من إعداد الهوية — لا مسارٌ ثابت.
   المسار الثابت هنا كان يتجاوز أي `src` في القالب، فيبقى شعار المنتج في
   كل نسخةٍ بيعت مهما رفع الزبون. والقيمة الاحتياطية للصفحات التي لا تمرّ
   بالرأس المشترك. */
.axis-mark{
  display:block; width:100%; height:100%; object-fit:contain;
  content:var(--brand-mark, url("/static/brand/mark-navy.png"));
}
:root[data-theme="dark"] .axis-mark{
  content:var(--brand-mark-dark, url("/static/brand/mark-white.png"))}

.axis-lockup{
  display:block; max-width:100%; height:auto;
  content:url("/static/brand/lockup-navy.png");
}
:root[data-theme="dark"] .axis-lockup{content:url("/static/brand/lockup-white.png")}

/* ══════════════ الدرج على الموبايل ══════════════
   ★ لم تكن للدرج أي قواعد في استعلامات الموبايل إطلاقاً — كان يرث مقاسات
   سطح المكتب كما هي، فيحتلّ ثلثَي شاشة الهاتف بعناصر متباعدة تُجبر
   المستخدم على التمرير ليصل إلى «حسابي».

   الإيقاع هنا أضيق: صفّ أقصر وحشوة أقلّ، فتظهر القائمة كاملة في شاشة
   واحدة — وهو ما تقيسه القائمة الجانبية: هل تُرى كلها دفعةً واحدة. */
@media (max-width:760px){
  .drawer{width:min(84vw, 288px); max-width:none}

  .drawer-head{padding:16px 15px 13px}
  .d-name{font-size:15px}
  .d-acc{font-size:11.5px}
  .d-balance{font-size:23px; margin:9px 0 11px}
  .d-quick{gap:8px}
  .d-quick .q{width:35px; height:35px; border-radius:10px; font-size:15px}

  .cur-switch{margin:10px 12px; width:calc(100% - 24px); padding:9px 13px;
    font-size:13px}

  .d-nav{padding:4px 10px 10px}
  .d-nav a{padding:9px 11px; font-size:13.5px; gap:10px; margin-bottom:1px}
  .d-nav a i{width:20px; font-size:14px}

  .d-foot{padding:13px 15px 18px; gap:9px}
  .d-theme,.d-lang{padding:9px 11px; font-size:13px}
  .d-social{gap:8px}
  .d-social .soc{width:38px; height:38px; border-radius:11px; font-size:17px}
  .d-phone{font-size:12.5px}
  .d-brand{padding-top:13px; gap:6px}
  .d-logo .axis-mark{width:52px; height:45px}
  .d-group{font-size:11px; letter-spacing:2px}
  .d-dev{font-size:11.5px}

  /* الحجاب أفتح فوق خلفية سماوية: الأسود الثقيل يجعل الشاشة كئيبة
     بينما الغرض تمييز الدرج لا إطفاء ما خلفه. */
  .drawer-scrim{background:rgba(var(--shade-rgb,8,31,73),.52)}
}

/* هواتف ضيّقة جداً — الدرج يتنفّس بعرض أقلّ لا بعناصر أصغر */
@media (max-width:360px){
  .drawer{width:min(88vw, 272px)}
  .d-nav a{font-size:13px}
}

/* ══════════════ الشريط العلوي على الهاتف ══════════════
   ★ عطل حقيقي: مجموع عناصر الشريط (شارة الشريحة + زرّ API + الرصيد +
   الجرس + القائمة) كان 264px بجانب الشعار، فيمتدّ إلى 466px على شاشة
   412px — ويخرج **زرّ القائمة ☰ نفسه** خارج الشاشة فيصير غير قابل للضغط.
   الفجوات والحشوات هنا مضبوطة ليبقى كل شيء داخل أضيق شاشة شائعة. */
@media (max-width:520px){
  .topbar .wrap{gap:8px}
  .topbar-actions{gap:6px}

  .brand{gap:8px}
  .brand .mark .axis-mark{width:32px; height:28px}
  .brand .name{font-size:19px; letter-spacing:3px}

  /* الشارة تبقى أيقونةً فقط — لونها وأيقونتها يعرّفانها بلا اسم */
  .tier-chip{padding:5px 7px}
  .tier-chip .tn{display:none}

  .api-btn{padding:7px 9px; font-size:11.5px; letter-spacing:.8px; gap:4px}
  .api-btn .dot{width:5px; height:5px}

  .balance-chip{padding:5px 9px; font-size:12px; gap:5px}
  .iconbtn{width:34px; height:34px; font-size:14px}
}

/* أضيق الشاشات: الرصيد يبقى والجرس يسقط — الإشعارات متاحة من الدرج،
   أما الرصيد فهو أكثر ما يُنظَر إليه في متجر رصيد. */
@media (max-width:380px){
  .topbar-actions > a.iconbtn[href="/notifications"]{display:none}
  .brand .name{font-size:17px; letter-spacing:2px}
}

/* ══════════════ الصفحات القانونية ══════════════ */
.legal-tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px}
.legal-tabs a{
  padding:9px 15px; border-radius:99px; font-size:13px; font-weight:600;
  background:var(--panel); border:1px solid var(--line); color:var(--ink2);
  transition:.2s var(--ease);
}
.legal-tabs a:hover{border-color:var(--line2); color:var(--ink)}
.legal-tabs a.on{background:var(--navy); border-color:var(--navy); color:#fff}
:root[data-theme="dark"] .legal-tabs a.on{background:var(--gold);
  border-color:var(--gold); color:#06152c}

/* سطر أطول قليلاً من المعتاد: النصوص القانونية تُقرأ بتمعّن لا بمسح. */
.legal-body{max-width:76ch}
.legal-body h1{font-size:24px; margin-bottom:6px}
.legal-body h2{font-size:17px; margin:26px 0 8px}
.legal-body p{font-size:14.5px; line-height:1.95; color:var(--ink2);
  margin:0 0 14px}

/* ═══════════════ السلة ═══════════════ */
.cart-wrap{display:grid; grid-template-columns:1fr 330px; gap:22px;
  align-items:start}

.cart-lines{display:flex; flex-direction:column; gap:12px}

.cart-line{display:grid; grid-template-columns:76px 1fr auto auto; gap:14px;
  align-items:start; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); padding:14px}
/* البند المعطوب يُعلَّم بحافّة لا بلونٍ كامل: اللون الكامل يجعل السلة
   تبدو كارثةً حين ينقص حقلٌ واحد. */
.cart-line.bad{border-color:var(--warn); background:var(--warn-soft)}

.cart-line .thumb{width:76px; height:76px; border-radius:var(--r2);
  overflow:hidden; background:var(--panel2); border:1px solid var(--line);
  display:grid; place-items:center; flex:none}
.cart-line .thumb img{width:100%; height:100%; object-fit:cover}
.cart-line .thumb .ph{font-size:26px; font-weight:800; color:var(--mut)}

.cart-line .body{min-width:0}
.cart-line .nm{display:block; font-weight:700; font-size:14.5px;
  color:var(--ink); line-height:1.5}
.cart-line .nm:hover{color:var(--gold2)}
.cart-line .meta{font-size:12.5px; margin-top:3px}

.warn-line{font-size:12.5px; font-weight:600; color:var(--warn);
  margin-top:8px; line-height:1.6}

.line-fields{margin-top:12px; display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:12px}
.line-fields .field{margin-bottom:0}
.line-fields .field label{font-size:12.5px; margin-bottom:5px}

.qty-cell{text-align:center}
.qty-box{display:inline-flex; align-items:center;
  border:1px solid var(--line); border-radius:var(--r2);
  background:var(--panel2); overflow:hidden}
.qty-box button{width:32px; height:34px; border:0; background:transparent;
  color:var(--ink2); font-size:17px; font-weight:700; cursor:pointer;
  line-height:1; transition:.15s var(--ease)}
.qty-box button:hover{background:var(--line); color:var(--gold2)}
.qty-box input{width:58px; height:34px; border:0; background:transparent;
  text-align:center; font-weight:700; font-size:13.5px; color:var(--ink);
  padding:0; border-inline:1px solid var(--line)}
.qty-box input:focus{outline:none; background:var(--panel)}
.qty-pick{min-width:110px}
.unit-note{font-size:11.5px; margin-top:6px}

.price-cell{text-align:end; min-width:96px}
.price-cell b{display:block; font-size:15px; color:var(--gold2)}
.linkbtn{background:none; border:0; padding:0; margin-top:8px; cursor:pointer;
  font-size:12.5px; font-weight:600; color:var(--mut); font-family:inherit;
  transition:.15s var(--ease)}
.linkbtn:hover{color:var(--ink2)}
.linkbtn.danger:hover{color:var(--bad)}

.cart-sum{background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); padding:20px; position:sticky; top:82px}
.cart-sum h3{font-size:15px; margin:0 0 14px}

@media (max-width:900px){
  .cart-wrap{grid-template-columns:1fr}
  /* الملخّص فوق البنود على الشاشة الضيّقة: الإجمالي والزرّ أهم ما يُرى أولاً،
     ولصقه أسفل قائمةٍ طويلة يدفنه. */
  .cart-sum{position:static; order:-1}
}

@media (max-width:560px){
  .cart-line{grid-template-columns:56px 1fr; gap:12px; padding:12px}
  .cart-line .thumb{width:56px; height:56px}
  .cart-line .body{grid-column:2}
  /* الكمية والسعر ينتقلان إلى صفٍّ تحتهما بدل أن يُضغطا في عمودين
     لا يتّسعان — وهو ما كان يدفع السعر خارج البطاقة. */
  .qty-cell{grid-column:1 / -1; text-align:start;
    display:flex; align-items:center; gap:10px; margin-top:4px}
  .unit-note{margin-top:0}
  .price-cell{grid-column:1 / -1; display:flex; align-items:center;
    justify-content:space-between; text-align:start;
    border-top:1px solid var(--line); padding-top:10px; margin-top:2px}
  .price-cell b{font-size:16px}
  .linkbtn{margin-top:0}
  .line-fields{grid-template-columns:1fr}
}