/* ============================================================
   DPARADOX · DESIGN SYSTEM v2 — FINAL
   ------------------------------------------------------------
   مصدر الألوان الوحيد: «الهوية الشاملة — البنفسجي المكتوم».
   تقارير التقييم استُخدمت لتصحيح الهيكل والمسافات والسلوك فقط،
   ولم يُؤخذ منها أي كود لون.
   ------------------------------------------------------------
   00 الخطوط · 01 المتغيّرات · 02 الأساس · 03 الأيقونات
   04 الأزرار · 05 الحقول · 06 الشارات · 07 التنبيهات
   08 النافبار والهيرو · 09 لوحة التحكم · 10 بطاقة الأداة
   11 الباقات والرصيد · 12 الجداول · 13 الإحصائيات
   14 الرفع · 15 النوافذ والتبويبات · 16 الفراغ والتحميل
   17 الفوتر والعائم · 18 الشبكات وأدوات مساعدة
   ============================================================ */

/* ===== 00 · الخطوط ========================================= */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Space+Grotesk:wght@500;700&family=Tajawal:wght@700;800;900&display=swap');

/* ===== 01 · المتغيّرات ===================================== */
:root{
  /* ١٩ متغيّر لون — لا يوجد لون عشرون */
  --brand:#524390;        --brand-950:#211A3D;
  --brand-800:#3E3268;    --brand-600:#6A57A8;
  --brand-400:#7A67B8;    --brand-300:#A796D9;
  --bg:#0A0A0D;           --surface-1:#121118;
  --surface-2:#1A1720;    --border:#232028;
  --border-strong:#38323F;--logo-bg:#010104;
  --text:#EFEDF5;         --text-2:#9E97AD;
  --text-3:#6F6980;
  --success:#5EB886;      --warning:#D8A854;
  --danger:#D45E6E;       --info:#00B8D4;

  /* التوهج والحلقة — توكن واحد لكل منهما، لا ظلال مكتوبة يدوياً */
  --glow:0 0 32px rgba(122,103,184,.28);
  --ring:0 0 0 3px rgba(122,103,184,.35);

  /* الحواف */
  --radius-sm:6px;  --radius:10px;  --radius-lg:16px;  --radius-full:999px;

  /* سلّم المسافات — مضاعفات ٤ */
  --s1:4px; --s2:8px;  --s3:12px; --s4:16px;
  --s5:24px; --s6:32px; --s7:48px; --s8:64px;

  /* الخطوط */
  --font-ar:'IBM Plex Sans Arabic',system-ui,sans-serif;   /* كل نصوص الواجهة */
  --font-num:'IBM Plex Mono',ui-monospace,monospace;        /* الأرقام والأكواد */
  --font-brand:'Space Grotesk',sans-serif;                  /* اسم العلامة فقط */
  --font-display:'Tajawal',var(--font-ar);                  /* عناوين العرض الثقيلة فقط */

  /* مقاسات ثابتة مستخرجة من التقييم */
  --nav-h:64px;
  --logo-h:32px;          /* الشعار داخل النافبار — لا يفيض أبداً */
  --side-w:240px;
  --drop-h:320px;         /* منطقة السحب تظهر بلا تمرير على 1366×768 */
  --footer-h:150px;
  --grid-max:1120px;

  --t:.18s cubic-bezier(.4,0,.2,1);
}

/* ===== 02 · الأساس ========================================= */
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:dark;scroll-behavior:smooth}

/* قاعدة ملزمة: أي مكوّن هنا يعرّف display (flex/grid/inline-flex) يتغلّب
   على سمة hidden، لأن قاعدة المؤلف أقوى من ورقة المتصفح الافتراضية.
   بدونها يظهر dp-empty وdp-fab دائماً مهما وضعنا hidden. */
[hidden]{display:none!important}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-ar);
  font-weight:400;
  font-size:15px;
  line-height:1.75;              /* التقييم: العربي يحتاج تنفّس */
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;flex-direction:column;
}

h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.35}
h1{font-size:clamp(28px,4vw,44px)} h2{font-size:26px} h3{font-size:19px} h4{font-size:16px}
p{margin:0}

/* نص الوصف: ١٤px حد أدنى بلون text-2.
   الحجم ١٣px واللون text-3 للتسميات والحواشي فقط. */
.dp-body{font-size:15px;color:var(--text-2);line-height:1.75}
.dp-caption{font-size:13px;color:var(--text-3);line-height:1.6}

a{color:var(--brand-300);text-decoration:none;transition:color var(--t)}
a:hover{color:var(--brand-400)}

.dp-brand{
  font-family:var(--font-brand);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
}

/* الأرقام لاتينية دائماً · Mono · ltr */
.dp-num,.dp-price,.dp-date,.dp-code,
.dp-stat__value,.dp-plan__amount,.dp-table__count{
  font-family:var(--font-num);
  font-variant-numeric:tabular-nums;
  direction:ltr;unicode-bidi:isolate;
}
.dp-muted{color:var(--text-2)}
.dp-faint{color:var(--text-3)}

::selection{background:var(--brand-800);color:var(--text)}
:focus-visible{outline:none;box-shadow:var(--ring)}

/* ===== 03 · الأيقونات ====================================== */
.dp-i{
  width:24px;height:24px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;color:inherit;
}
.dp-i--16{width:16px;height:16px;stroke-width:1.8}
.dp-i--20{width:20px;height:20px;stroke-width:1.6}
.dp-i--24{width:24px;height:24px;stroke-width:1.5}
.dp-i--32{width:32px;height:32px;stroke-width:1.3}
.dp-i--idle{color:var(--text-3)}
.dp-i--active{color:var(--text)}
.dp-i--brand{color:var(--brand-300)}
.dp-i--danger{color:var(--danger)}
/* الشيفرون ينقلب مع الاتجاه تلقائياً */
[dir="rtl"] .dp-i--flip{transform:scaleX(-1)}

/* ===== 04 · الأزرار ======================================== */
.dp-btn{
  --btn-h:44px;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:var(--btn-h);min-width:var(--btn-h);
  padding:0 var(--s4);
  border:1px solid transparent;border-radius:var(--radius);
  font-family:var(--font-ar);font-size:15px;font-weight:500;line-height:1;
  cursor:pointer;white-space:nowrap;
  transition:background var(--t),border-color var(--t),color var(--t),
             box-shadow var(--t),transform var(--t);
}
.dp-btn:disabled,.dp-btn[aria-disabled="true"]{
  cursor:not-allowed;background:var(--surface-2);
  border-color:var(--border);color:var(--text-3);box-shadow:none;
}

.dp-btn--primary{background:var(--brand-600);color:#fff}
.dp-btn--primary:hover:not(:disabled){background:var(--brand-400);box-shadow:var(--glow)}
.dp-btn--primary:active:not(:disabled){background:var(--brand-800);transform:translateY(1px)}

.dp-btn--secondary{background:var(--surface-2);border-color:var(--border-strong);color:var(--text)}
.dp-btn--secondary:hover:not(:disabled){border-color:var(--brand-400)}
.dp-btn--secondary:active:not(:disabled){background:var(--brand-950);transform:translateY(1px)}

.dp-btn--ghost{background:transparent;color:var(--brand-300);padding-inline:var(--s2)}
.dp-btn--ghost:hover:not(:disabled){color:var(--brand-400);background:rgba(122,103,184,.08)}

.dp-btn--icon{padding:0;width:var(--btn-h);background:transparent;color:var(--text-3)}
.dp-btn--icon:hover:not(:disabled){background:var(--surface-2);color:var(--brand-300)}
.dp-btn--icon:active:not(:disabled){background:var(--brand-950)}

.dp-btn--danger{background:transparent;border-color:var(--danger);color:var(--danger)}
.dp-btn--danger:hover:not(:disabled){background:var(--danger);color:#fff}
.dp-btn--danger:active:not(:disabled){filter:brightness(.9);transform:translateY(1px)}
.dp-btn--danger:focus-visible{box-shadow:0 0 0 3px rgba(212,94,110,.35)}

/* 32 جدول · 38 نافبار · 44 افتراضي · 52 هيرو
   sm/md مسموحة فقط داخل صف جدول أو نافبار */
.dp-btn--sm{--btn-h:32px;padding:0 var(--s3);font-size:13px}
.dp-btn--md{--btn-h:38px;padding:0 var(--s3);font-size:14px}
.dp-btn--lg{--btn-h:52px;padding:0 var(--s5);font-size:16px}

.dp-btn--loading{pointer-events:none;color:rgba(255,255,255,.75)}
.dp-btn--loading .dp-spinner{width:16px;height:16px;border-width:2px}

.dp-spinner{
  width:20px;height:20px;
  border:2.5px solid var(--border-strong);border-top-color:var(--brand-400);
  border-radius:50%;animation:dp-spin .7s linear infinite;
}
@keyframes dp-spin{to{transform:rotate(360deg)}}

/* ===== 05 · الحقول والنماذج ================================ */
.dp-field{display:flex;flex-direction:column;gap:var(--s2)}
.dp-label{font-size:13px;color:var(--text-2);font-weight:500}
.dp-hint{font-size:12.5px;color:var(--text-3)}

.dp-input,.dp-textarea,.dp-select{
  width:100%;min-height:44px;padding:0 var(--s3);
  background:var(--surface-1);border:1px solid var(--border);
  border-radius:var(--radius);color:var(--text);
  font-family:var(--font-ar);font-size:15px;
  transition:border-color var(--t),box-shadow var(--t),background var(--t);
}
.dp-input::placeholder,.dp-textarea::placeholder{color:var(--text-3)}
.dp-input:hover,.dp-textarea:hover,.dp-select:hover{border-color:var(--border-strong)}
.dp-input:focus,.dp-textarea:focus,.dp-select:focus{
  outline:none;border-color:var(--brand-400);box-shadow:var(--ring);
}
.dp-textarea{min-height:112px;padding:var(--s3);line-height:1.75;resize:vertical}

/* حقول رقمية/لاتينية + حقول التاريخ (تصحيح placeholder المقلوب) */
.dp-input[type="email"],.dp-input[type="number"],.dp-input[type="url"],
.dp-input[type="tel"],.dp-input[type="date"],.dp-input[type="datetime-local"],
.dp-input--ltr{direction:ltr;text-align:start;font-family:var(--font-num)}
.dp-input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(.65)}

/* قائمة منسدلة — لا select أبيض */
.dp-select-wrap{position:relative}
.dp-select{appearance:none;-webkit-appearance:none;padding-inline-end:var(--s6);cursor:pointer}
.dp-select option{background:var(--surface-2);color:var(--text)}
.dp-select-wrap::after{
  content:"";position:absolute;inset-inline-start:var(--s3);top:50%;
  width:9px;height:9px;margin-top:-6px;
  border-inline-start:1.5px solid var(--text-2);border-bottom:1.5px solid var(--text-2);
  transform:rotate(-45deg);pointer-events:none;
}

.dp-input--error,.dp-textarea--error,.dp-select--error{
  border-color:var(--danger);background:rgba(212,94,110,.06);
}
.dp-input--error:focus{box-shadow:0 0 0 3px rgba(212,94,110,.28)}
.dp-error{display:flex;align-items:center;gap:var(--s2);color:var(--danger);font-size:13px}

.dp-input:disabled,.dp-textarea:disabled,.dp-select:disabled{
  background:var(--logo-bg);border-color:var(--border);color:var(--text-3);cursor:not-allowed;
}
.dp-input-wrap{position:relative}
.dp-input-wrap .dp-input{padding-inline-start:42px}
.dp-input-wrap__icon{
  position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);
  color:var(--text-3);pointer-events:none;
}

/* اختيارات */
.dp-check,.dp-radio{display:inline-flex;align-items:center;gap:var(--s2);cursor:pointer;user-select:none;min-height:44px}
.dp-check input,.dp-radio input{position:absolute;opacity:0;pointer-events:none}
.dp-check__box,.dp-radio__dot{
  width:20px;height:20px;flex:0 0 auto;
  border:1.5px solid var(--border-strong);background:var(--surface-1);
  transition:all var(--t);display:grid;place-items:center;
}
.dp-check__box{border-radius:var(--radius-sm)}
.dp-radio__dot{border-radius:50%}
.dp-check input:checked + .dp-check__box{background:var(--brand-600);border-color:var(--brand-600)}
.dp-check__box::after{
  content:"";width:10px;height:6px;margin-top:-2px;
  border-inline-start:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(-45deg) scale(0);transition:transform var(--t);
}
.dp-check input:checked + .dp-check__box::after{transform:rotate(-45deg) scale(1)}
.dp-radio input:checked + .dp-radio__dot{border-color:var(--brand-400)}
.dp-radio__dot::after{
  content:"";width:10px;height:10px;border-radius:50%;
  background:var(--brand-400);transform:scale(0);transition:transform var(--t);
}
.dp-radio input:checked + .dp-radio__dot::after{transform:scale(1)}
.dp-check input:disabled ~ *,.dp-radio input:disabled ~ *{opacity:.45}
.dp-check input:focus-visible + .dp-check__box,
.dp-radio input:focus-visible + .dp-radio__dot{box-shadow:var(--ring)}

/* مفتاح التبديل */
.dp-switch{display:inline-flex;align-items:center;gap:var(--s3);cursor:pointer;min-height:44px}
.dp-switch input{position:absolute;opacity:0;pointer-events:none}
.dp-switch__track{
  width:48px;height:28px;border-radius:var(--radius-full);
  background:var(--border-strong);position:relative;transition:background var(--t);flex:0 0 auto;
}
.dp-switch__track::after{
  content:"";position:absolute;top:3px;inset-inline-start:3px;
  width:22px;height:22px;border-radius:50%;background:var(--text-3);
  transition:transform var(--t),background var(--t);
}
.dp-switch input:checked + .dp-switch__track{background:var(--brand-600)}
.dp-switch input:checked + .dp-switch__track::after{background:#fff;transform:translateX(-20px)}
[dir="ltr"] .dp-switch input:checked + .dp-switch__track::after{transform:translateX(20px)}
.dp-switch input:disabled + .dp-switch__track{opacity:.45;cursor:not-allowed}
.dp-switch input:focus-visible + .dp-switch__track{box-shadow:var(--ring)}

/* ===== 06 · الشارات ======================================== */
.dp-badge{
  display:inline-flex;align-items:center;gap:var(--s1);
  height:26px;padding:0 var(--s3);border:1px solid;border-radius:var(--radius-full);
  font-size:12px;font-weight:500;line-height:1;white-space:nowrap;
}
.dp-badge--success{color:var(--success);border-color:rgba(94,184,134,.4);background:rgba(94,184,134,.1)}
.dp-badge--warning{color:var(--warning);border-color:rgba(216,168,84,.4);background:rgba(216,168,84,.1)}
.dp-badge--danger{color:var(--danger);border-color:rgba(212,94,110,.4);background:rgba(212,94,110,.1)}
.dp-badge--neutral{color:var(--text-2);border-color:var(--border-strong);background:var(--surface-2)}
.dp-badge--info{color:var(--info);border-color:rgba(0,184,212,.4);background:rgba(0,184,212,.1)}
.dp-badge--brand{color:var(--brand-300);border-color:var(--brand-800);background:var(--brand-950)}
.dp-badge--count{
  min-width:22px;height:22px;padding:0 6px;justify-content:center;
  background:var(--brand-600);border-color:var(--brand-600);color:#fff;
  font-family:var(--font-num);font-size:11px;direction:ltr;
}
.dp-badge--beta{
  font-family:var(--font-num);letter-spacing:.1em;font-size:10px;height:22px;
  color:var(--text-2);border-color:var(--border-strong);background:var(--surface-2);
  border-radius:var(--radius-sm);
}
/* بديل اللافتة البرتقالية داخل البطاقة: نص خافت بلا خلفية */
.dp-badge--trial{
  height:auto;padding:0;border:0;background:none;
  color:var(--text-3);font-size:10px;letter-spacing:.05em;
}

/* ===== 07 · التنبيهات ====================================== */
.dp-alert{
  display:flex;align-items:flex-start;gap:var(--s3);
  padding:var(--s3) var(--s4);border:1px solid var(--border);
  border-radius:var(--radius);background:var(--surface-1);color:var(--text);
}
.dp-alert__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dp-alert__title{font-weight:600;font-size:15px}
.dp-alert__text{color:var(--text-2);font-size:14px}
.dp-alert__close{
  background:none;border:0;color:var(--text-3);cursor:pointer;
  width:32px;height:32px;display:grid;place-items:center;border-radius:var(--radius-sm);
}
.dp-alert__close:hover{color:var(--text);background:var(--surface-2)}
.dp-alert--success{border-color:rgba(94,184,134,.35);background:rgba(94,184,134,.06)}
.dp-alert--success > .dp-i{color:var(--success)}
.dp-alert--danger{border-color:rgba(212,94,110,.35);background:rgba(212,94,110,.06)}
.dp-alert--danger > .dp-i{color:var(--danger)}
.dp-alert--warning{border-color:rgba(216,168,84,.35);background:rgba(216,168,84,.06)}
.dp-alert--warning > .dp-i{color:var(--warning)}
.dp-alert--info{border-color:rgba(0,184,212,.35);background:rgba(0,184,212,.06)}
.dp-alert--info > .dp-i{color:var(--info)}
.dp-alert--neutral > .dp-i{color:var(--text-2)}

/* شريط البيتا — ثابت، واحد فقط، قابل للإغلاق. لا حركة أفقية إطلاقاً */
.dp-banner{
  display:flex;align-items:center;justify-content:center;gap:var(--s2);
  padding:10px var(--s4);
  background:rgba(216,168,84,.12);
  border-top:1px solid var(--warning);
  color:var(--text);font-size:13px;text-align:center;
}
.dp-banner > .dp-i{color:var(--warning)}
.dp-banner a{color:var(--brand-300)}
.dp-banner__close{margin-inline-start:var(--s3)}
.dp-banner[hidden]{display:none}

/* سطر الخصوصية — أقوى ميزة بيعية، تُعرض لا تُدفن */
.dp-privacy{
  display:flex;align-items:center;gap:var(--s2);
  font-size:14px;color:var(--text-2);
}
.dp-privacy .dp-i{color:var(--brand-300)}

/* ===== 08 · النافبار والهيرو =============================== */
.dp-nav{
  position:sticky;top:0;z-index:80;
  display:flex;align-items:center;gap:var(--s4);
  height:var(--nav-h);padding:0 var(--s5);
  background:var(--surface-1);border-bottom:1px solid var(--border);
}
/* الشعار: قفل أفقي بارتفاع ثابت — لا position:absolute، لا فيضان */
.dp-nav__logo{display:flex;align-items:center;gap:var(--s2);flex:0 0 auto}
.dp-nav__logo img,.dp-nav__logo svg{height:var(--logo-h);width:auto;display:block}
.dp-nav__links{display:flex;align-items:center;gap:var(--s1);flex:1;min-width:0;overflow:auto;scrollbar-width:none}
.dp-nav__links::-webkit-scrollbar{display:none}
.dp-nav__link{
  display:inline-flex;align-items:center;gap:var(--s2);
  height:38px;padding:0 var(--s3);border-radius:var(--radius);
  color:var(--text-2);font-size:14px;font-weight:500;
  white-space:nowrap;transition:all var(--t);
}
.dp-nav__link:hover{color:var(--text);background:var(--surface-2)}
.dp-nav__link[aria-current="page"],.dp-nav__link.is-active{color:var(--text);background:var(--brand-950)}

/* الهيرو المنقسم — العلامة في جهة البداية (يمين في RTL)، النص مقابلها */
.dp-hero{
  display:flex;flex-direction:column;align-items:center;gap:var(--s4);
  padding:var(--s8) var(--s5);text-align:center;
  background:radial-gradient(70% 120% at 50% 0%,var(--brand-950) 0%,var(--bg) 70%);
}
.dp-hero--split{
  display:grid;
  grid-template-columns:minmax(240px,40%) 1fr;
  align-items:center;
  gap:var(--s6) var(--s7);
  max-width:var(--grid-max);margin-inline:auto;width:100%;
  text-align:start;
}
.dp-hero__media{
  position:relative;display:grid;place-items:center;
  justify-self:start;
  margin-inline-start:-1.5vw;      /* إزاحة نحو حافة البداية */
}
/* هالة ناعمة خلف العلامة — من داخل النظام */
.dp-hero__media::before{
  content:"";position:absolute;inset:-12%;
  background:radial-gradient(circle at 50% 50%,rgba(122,103,184,.22) 0%,transparent 65%);
  animation:dp-halo 6s ease-in-out infinite;
  pointer-events:none;
}
.dp-hero__body{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--s4);
}
/* الزر وسطر الخصوصية: صف مستقل يعبر العمودين، في المنتصف */
.dp-hero__cta{
  grid-column:1 / -1;
  display:flex;flex-direction:column;align-items:center;gap:var(--s3);
  margin-top:var(--s4);
}

/* عنوان العرض — Tajawal ثقيل. المكان الوحيد المسموح فيه غير Plex. */
.dp-hero__title,.dp-display{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-.015em;
  line-height:1.2;
}
.dp-hero__title{
  font-size:clamp(34px,5.4vw,62px);
  max-width:14ch;
}
/* سطر مستقل بمسافة واضحة، متمركز تحت العنوان */
.dp-hero__sub{
  font-family:var(--font-display);
  font-size:.52em;font-weight:700;color:var(--brand-300);
  display:block;width:100%;
  margin-top:var(--s4);letter-spacing:0;
  text-align:center;
}

/* العلامة — كبيرة ومتحرّكة، وهذا موضعها الوحيد */
.dp-hero__mark{
  position:relative;width:100%;max-width:340px;height:auto;display:block;
  animation:dp-float 6s ease-in-out infinite;
}
@keyframes dp-float{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-16px) rotate(-.6deg)}
}
@keyframes dp-halo{
  0%,100%{opacity:.7;transform:scale(1)}
  50%{opacity:1;transform:scale(1.06)}
}

@media(max-width:860px){
  .dp-hero--split{
    grid-template-columns:1fr;justify-items:center;text-align:center;gap:var(--s5);
  }
  .dp-hero__media{justify-self:center;margin-inline-start:0}
  .dp-hero__body{align-items:center}
  .dp-hero__title{max-width:none}
  .dp-hero__mark{max-width:220px}
}
.dp-hero__desc{max-width:56ch;color:var(--text-2);font-size:15px}
.dp-hero__note{font-size:13px;color:var(--text-3)}

/* قائمة منسدلة */
.dp-menu{
  min-width:220px;padding:var(--s2);
  background:var(--surface-2);border:1px solid var(--border-strong);
  border-radius:var(--radius);box-shadow:0 12px 32px rgba(0,0,0,.5);
}
.dp-menu__item{
  display:flex;align-items:center;gap:var(--s3);
  width:100%;min-height:40px;padding:0 var(--s3);
  background:none;border:0;border-radius:var(--radius-sm);
  color:var(--text-2);font-family:var(--font-ar);font-size:14px;
  cursor:pointer;text-align:start;transition:all var(--t);
}
.dp-menu__item:hover{background:var(--brand-950);color:var(--text)}
.dp-menu__item--danger{color:var(--danger)}
.dp-menu__item--danger:hover{background:rgba(212,94,110,.12);color:var(--danger)}
.dp-menu__sep{height:1px;background:var(--border);margin:var(--s2) 0}

/* ===== 09 · لوحة التحكم — شريط جانبي بمجموعات ============== */
.dp-shell{display:flex;flex:1;min-height:0}
.dp-side{
  width:var(--side-w);flex:0 0 auto;
  position:sticky;top:var(--nav-h);align-self:flex-start;
  max-height:calc(100vh - var(--nav-h));overflow:auto;
  padding:var(--s4);background:var(--surface-1);
  border-inline-start:1px solid var(--border);
  display:flex;flex-direction:column;gap:var(--s1);
}
.dp-side__group{display:flex;flex-direction:column;gap:2px;margin-bottom:var(--s3)}
.dp-side__title{
  font-size:11px;letter-spacing:.08em;color:var(--text-3);
  padding:var(--s2) var(--s3);font-weight:500;
}
.dp-side__link{
  display:flex;align-items:center;gap:var(--s3);
  min-height:40px;padding:0 var(--s3);border-radius:var(--radius);
  color:var(--text-2);font-size:14px;transition:all var(--t);
}
.dp-side__link:hover{background:var(--surface-2);color:var(--text)}
.dp-side__link.is-active{
  background:var(--surface-2);color:var(--text);
  box-shadow:inset 2px 0 0 var(--brand-400);
}
[dir="ltr"] .dp-side__link.is-active{box-shadow:inset -2px 0 0 var(--brand-400)}
.dp-side__link .dp-badge{margin-inline-start:auto}
.dp-main{flex:1;min-width:0;padding:var(--s5)}

/* ===== 10 · بطاقة الأداة =================================== */
/* هرم واحد: أيقونة → عنوان → وصف(٣ أسطر) → صف سفلي [زر | سعر]
   ممنوع أي لون حالة داخل البطاقة. زر مملوء واحد فقط. */
.dp-tool{
  position:relative;display:flex;flex-direction:column;gap:var(--s3);
  padding:var(--s5);background:var(--surface-1);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  transition:border-color var(--t),box-shadow var(--t),transform var(--t);
}
.dp-tool:hover{border-color:var(--brand-400);box-shadow:var(--glow);transform:translateY(-2px)}
.dp-tool__icon{
  width:52px;height:52px;display:grid;place-items:center;
  background:var(--brand-600);color:#fff;border-radius:var(--radius);align-self:flex-start;
}
.dp-tool__title{font-size:19px;font-weight:600}
/* ٣ أسطر بالضبط → كل البطاقات بنفس الارتفاع */
.dp-tool__desc{
  color:var(--text-2);font-size:14px;line-height:1.7;flex:1;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;min-height:calc(14px * 1.7 * 3);
}
.dp-tool__foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);margin-top:var(--s2);
}
.dp-tool__price{font-size:14px;color:var(--brand-300)}
.dp-tool__price b{font-family:var(--font-num);font-weight:500;direction:ltr;display:inline-block}
/* السلة: أيقونة ٣٢px في الزاوية — إجراء ثانوي بوزن ثانوي */
.dp-tool__cart{
  position:absolute;top:var(--s4);inset-inline-end:var(--s4);
  width:32px;height:32px;display:grid;place-items:center;
  background:none;border:0;border-radius:var(--radius-sm);
  color:var(--text-3);cursor:pointer;transition:all var(--t);
}
.dp-tool__cart:hover{color:var(--brand-400);background:var(--surface-2)}
.dp-tool--soon{opacity:.55;pointer-events:none}
.dp-tool--soon .dp-tool__icon{background:var(--surface-2);color:var(--text-3)}
.dp-tool--soon .dp-tool__title{color:var(--text-2)}

/* ===== 11 · الباقات والرصيد ================================ */
.dp-plan{
  display:flex;flex-direction:column;gap:var(--s4);
  padding:var(--s5);background:var(--surface-1);
  border:1px solid var(--border);border-radius:var(--radius-lg);
}
.dp-plan--featured{border-color:var(--brand-400);box-shadow:var(--glow)}
.dp-plan__tags{display:flex;gap:var(--s2);flex-wrap:wrap}
.dp-plan__name{font-size:22px;font-weight:600}
.dp-plan__features{display:flex;flex-direction:column;gap:var(--s3);margin:0;padding:0;list-style:none;flex:1}
.dp-plan__features li{display:flex;align-items:center;gap:var(--s3);color:var(--text-2);font-size:14.5px}
.dp-plan__features .dp-i{color:var(--success);width:18px;height:18px}
.dp-plan__price{display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap}
.dp-plan__amount{font-size:34px;font-weight:500}
.dp-plan__per{color:var(--text-2);font-size:14px}
.dp-plan__buy{display:flex;gap:var(--s3);align-items:stretch}
.dp-plan__buy .dp-select-wrap{width:120px;flex:0 0 auto}
.dp-plan__buy .dp-btn{flex:1}

.dp-credit{
  display:flex;flex-direction:column;gap:var(--s3);
  padding:var(--s4);background:var(--surface-1);
  border:1px solid var(--border);border-radius:var(--radius-lg);
}
.dp-credit__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.dp-credit__name{font-weight:600;font-size:16px}
.dp-credit__date{font-family:var(--font-num);font-size:12.5px;color:var(--text-3);direction:ltr}
.dp-credit__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);font-size:13px}
.dp-credit__left{color:var(--text-2)}
.dp-credit__left b{font-family:var(--font-num);color:var(--text);font-weight:500;direction:ltr;display:inline-block}

/* شريط التقدّم — أربع درجات، كلها من داخل الـ١٩ */
.dp-progress{height:6px;border-radius:var(--radius-full);background:var(--surface-2);overflow:hidden}
.dp-progress__bar{height:100%;border-radius:inherit;background:var(--brand-400);transition:width .4s ease}
.dp-progress[data-level="high"] .dp-progress__bar{background:var(--brand-400)}   /* > 50%   */
.dp-progress[data-level="mid"]  .dp-progress__bar{background:var(--brand-300)}   /* 25–50%  */
.dp-progress[data-level="low"]  .dp-progress__bar{background:var(--warning)}     /* 10–25%  */
.dp-progress[data-level="crit"] .dp-progress__bar{background:var(--danger)}      /* ≤ 10%   */
.dp-progress[data-level="dead"] .dp-progress__bar{background:var(--border-strong)}
.dp-credit[data-level="low"]  .dp-credit__left b{color:var(--warning)}
.dp-credit[data-level="crit"] .dp-credit__left b{color:var(--danger)}

/* سجل العمليات داخل البطاقة */
.dp-disclosure summary{
  cursor:pointer;list-style:none;font-size:13px;color:var(--text-3);
  display:flex;align-items:center;gap:var(--s2);min-height:32px;
}
.dp-disclosure summary::-webkit-details-marker{display:none}
.dp-disclosure summary:hover{color:var(--text-2)}
.dp-disclosure[open] summary{color:var(--text-2)}
.dp-disclosure__body{padding-top:var(--s2);font-size:13px;color:var(--text-2)}

/* ===== 12 · الجداول ======================================== */
.dp-table-wrap{
  position:relative;background:var(--surface-1);
  border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;
}
.dp-table-bar{display:flex;align-items:center;gap:var(--s3);padding:var(--s4);border-bottom:1px solid var(--border);flex-wrap:wrap}
.dp-table-bar__search{flex:1;max-width:320px;min-width:200px}
.dp-table-scroll{overflow:auto}
.dp-table{width:100%;border-collapse:collapse;font-size:14px}
.dp-table thead th{
  position:sticky;top:0;z-index:2;
  padding:var(--s3) var(--s4);background:var(--surface-2);color:var(--text-3);
  font-weight:500;font-size:12.5px;text-align:start;border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.dp-table tbody td{padding:var(--s3) var(--s4);border-bottom:1px solid var(--border);color:var(--text);vertical-align:middle}
.dp-table tbody tr:last-child td{border-bottom:0}
.dp-table tbody tr:hover td{background:var(--surface-2)}
.dp-table tr.is-dirty td:first-child{box-shadow:inset 3px 0 0 var(--warning)}
[dir="ltr"] .dp-table tr.is-dirty td:first-child{box-shadow:inset -3px 0 0 var(--warning)}
/* شريط حفظ واحد ثابت أسفل الجدول — لا زر حفظ لكل صف */
.dp-table__foot{
  position:sticky;bottom:0;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s3) var(--s4);border-top:1px solid var(--border);
  background:var(--surface-1);font-size:13px;color:var(--text-2);flex-wrap:wrap;
}
.dp-table__foot.is-dirty{background:rgba(216,168,84,.08);border-top-color:var(--warning)}
.dp-table__count{color:var(--text-3)}

/* ===== 13 · الإحصائيات ===================================== */
.dp-stat{
  display:flex;flex-direction:column;gap:var(--s2);
  padding:var(--s4) var(--s5);background:var(--surface-1);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  color:inherit;transition:all var(--t);
}
a.dp-stat:hover{border-color:var(--brand-400);box-shadow:var(--glow)}
.dp-stat__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.dp-stat__top .dp-i{color:var(--text-3)}
.dp-stat__value{font-size:34px;font-weight:500;line-height:1.1}
.dp-stat__label{color:var(--text-2);font-size:14px}
.dp-stat__delta{font-size:12.5px;font-family:var(--font-num);direction:ltr;color:var(--text-3)}
.dp-stat__delta--up{color:var(--success)}
.dp-stat__delta--down{color:var(--danger)}
.dp-stat__delta--warn{color:var(--warning)}
.dp-stat--alert{border-color:var(--warning)}
.dp-stat--alert .dp-stat__top .dp-i{color:var(--warning)}
/* بطاقة بلا عمل مطلوب تبقى هادئة */
.dp-stat--muted{opacity:.6}

/* ===== 14 · الرفع والملفات ================================= */
.dp-drop{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s3);
  min-height:var(--drop-h);padding:var(--s6) var(--s5);
  background:var(--surface-1);border:1px dashed var(--border-strong);
  border-radius:var(--radius-lg);text-align:center;cursor:pointer;transition:all var(--t);
}
.dp-drop:hover{border-color:var(--brand-400)}
.dp-drop__icon{width:56px;height:56px;display:grid;place-items:center;background:var(--brand-600);color:#fff;border-radius:var(--radius)}
.dp-drop__title{font-weight:600;font-size:16px}
.dp-drop__hint{font-family:var(--font-num);font-size:12.5px;color:var(--text-3);direction:ltr}
.dp-drop.is-over{border-color:var(--brand-400);background:rgba(122,103,184,.06);box-shadow:var(--glow)}
.dp-drop.is-reject{border-color:var(--danger);background:rgba(212,94,110,.06);color:var(--danger)}

.dp-file{
  display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);
  background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-lg);
}
.dp-file__thumb{
  width:44px;height:44px;flex:0 0 auto;display:grid;place-items:center;
  background:var(--surface-2);border:1px solid var(--border-strong);
  border-radius:var(--radius);color:var(--text-2);
}
.dp-file__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--s1)}
.dp-file__name{font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dp-file__meta{font-family:var(--font-num);font-size:12px;color:var(--text-3);direction:ltr}
.dp-file--done .dp-file__state{color:var(--success)}
.dp-file--error{border-color:rgba(212,94,110,.4);background:rgba(212,94,110,.05)}
.dp-file--error .dp-file__thumb{color:var(--danger);border-color:rgba(212,94,110,.4)}
.dp-file--error .dp-file__meta{color:var(--danger)}

/* ===== 15 · النوافذ والتبويبات ============================= */
.dp-overlay{
  position:fixed;inset:0;z-index:900;
  background:rgba(1,1,4,.72);backdrop-filter:blur(3px);
  display:grid;place-items:center;padding:var(--s5);
}
.dp-overlay[hidden]{display:none}
.dp-modal{
  width:100%;max-width:440px;
  display:flex;flex-direction:column;gap:var(--s4);padding:var(--s5);
  background:var(--surface-2);border:1px solid var(--border-strong);
  border-radius:var(--radius-lg);box-shadow:0 24px 64px rgba(0,0,0,.6);
}
.dp-modal__head{display:flex;align-items:center;gap:var(--s3)}
.dp-modal__title{flex:1;font-size:18px;font-weight:600}
.dp-modal__mark{
  width:40px;height:40px;display:grid;place-items:center;border-radius:var(--radius);
  background:rgba(212,94,110,.12);color:var(--danger);border:1px solid rgba(212,94,110,.35);
}
.dp-modal__text{color:var(--text-2);font-size:14.5px}
.dp-modal__actions{display:flex;gap:var(--s3)}
.dp-modal__actions .dp-btn{flex:1}

.dp-tabs{display:flex;gap:var(--s1);border-bottom:1px solid var(--border);overflow:auto;scrollbar-width:none}
.dp-tabs::-webkit-scrollbar{display:none}
.dp-tab{
  min-height:44px;padding:0 var(--s4);white-space:nowrap;
  background:none;border:0;border-bottom:2px solid transparent;
  color:var(--text-3);font-family:var(--font-ar);font-size:14px;font-weight:500;
  cursor:pointer;transition:all var(--t);
}
.dp-tab:hover{color:var(--text-2)}
.dp-tab.is-active{color:var(--text);border-bottom-color:var(--brand-400)}

.dp-seg{display:inline-flex;gap:var(--s1);padding:var(--s1);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius)}
.dp-seg__btn{
  min-height:38px;padding:0 var(--s4);background:none;border:0;border-radius:var(--radius-sm);
  color:var(--text-2);font-family:var(--font-ar);font-size:14px;font-weight:500;cursor:pointer;transition:all var(--t);
}
.dp-seg__btn:hover{color:var(--text)}
.dp-seg__btn.is-active{background:var(--brand-600);color:#fff}

.dp-pager{display:flex;gap:var(--s2);align-items:center}
.dp-page{
  width:44px;height:44px;display:grid;place-items:center;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);
  color:var(--text-2);font-family:var(--font-num);font-size:14px;cursor:pointer;transition:all var(--t);
}
.dp-page:hover{border-color:var(--border-strong);color:var(--text)}
.dp-page.is-active{background:var(--brand-600);border-color:var(--brand-600);color:#fff}
.dp-page:disabled{opacity:.4;cursor:not-allowed}

.dp-tip{
  display:inline-block;padding:var(--s2) var(--s3);
  background:var(--surface-2);border:1px solid var(--border-strong);
  border-radius:var(--radius);font-size:13px;color:var(--text);
  box-shadow:0 8px 24px rgba(0,0,0,.45);
}

/* ===== 16 · الفراغ والتحميل ================================ */
.dp-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s3);
  min-height:240px;padding:var(--s7) var(--s5);
  background:var(--surface-1);border:1px solid var(--border);
  border-radius:var(--radius-lg);text-align:center;
}
.dp-empty__icon{
  width:56px;height:56px;display:grid;place-items:center;
  background:var(--surface-2);border:1px solid var(--border-strong);
  border-radius:var(--radius);color:var(--text-3);
}
.dp-empty__title{font-size:18px;font-weight:600}
.dp-empty__text{color:var(--text-2);font-size:14px;max-width:340px}
.dp-empty .dp-btn{margin-top:var(--s2)}

.dp-skeleton{
  background:var(--surface-1);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:var(--s5);
  display:flex;flex-direction:column;gap:var(--s3);
}
.dp-sk{
  background:linear-gradient(90deg,var(--surface-2) 25%,var(--border) 50%,var(--surface-2) 75%);
  background-size:200% 100%;animation:dp-sk 1.4s ease-in-out infinite;
  border-radius:var(--radius-sm);height:12px;
}
.dp-sk--box{height:52px;width:52px;border-radius:var(--radius)}
.dp-sk--line{width:100%} .dp-sk--80{width:80%} .dp-sk--60{width:60%} .dp-sk--40{width:40%}
@keyframes dp-sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

.dp-loading{
  display:flex;flex-direction:column;align-items:center;gap:var(--s3);padding:var(--s7);
  background:var(--surface-1);border:1px solid var(--border);
  border-radius:var(--radius-lg);color:var(--text-2);font-size:13.5px;
}

/* ===== 17 · الفوتر والأزرار العائمة ======================== */
.dp-footer{
  margin-top:auto;min-height:var(--footer-h);
  padding:var(--s5) var(--s5) var(--s4);
  background:var(--surface-1);border-top:1px solid var(--border);
}
.dp-footer__grid{
  display:grid;gap:var(--s5);max-width:var(--grid-max);margin-inline:auto;
  grid-template-columns:repeat(3,1fr);
}
.dp-footer__col{display:flex;flex-direction:column;gap:var(--s2)}
.dp-footer__title{font-size:13px;color:var(--text-3);font-weight:500;margin-bottom:var(--s1)}
.dp-footer__col a{color:var(--text-2);font-size:14px}
.dp-footer__col a:hover{color:var(--brand-300)}
.dp-footer__bar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  max-width:var(--grid-max);margin:var(--s4) auto 0;padding-top:var(--s3);
  border-top:1px solid var(--border);flex-wrap:wrap;
}

/* زر عائم واحد فقط — السلة تعيش في النافبار */
.dp-fab{
  position:fixed;inset-inline-start:var(--s5);bottom:var(--s5);z-index:70;
  width:44px;height:44px;display:grid;place-items:center;
  background:var(--surface-2);border:1px solid var(--border-strong);
  border-radius:var(--radius-full);color:var(--text-2);cursor:pointer;transition:all var(--t);
}
.dp-fab:hover{color:var(--brand-300);border-color:var(--brand-400)}

/* ===== 18 · الشبكات وأدوات مساعدة ========================== */
.dp-stack{display:flex;flex-direction:column}
.dp-row{display:flex;align-items:center}
.dp-gap-1{gap:var(--s1)} .dp-gap-2{gap:var(--s2)} .dp-gap-3{gap:var(--s3)}
.dp-gap-4{gap:var(--s4)} .dp-gap-5{gap:var(--s5)} .dp-gap-6{gap:var(--s6)}

.dp-grid{display:grid;gap:var(--s4)}
.dp-grid--2{grid-template-columns:repeat(2,1fr)}
.dp-grid--3{grid-template-columns:repeat(3,1fr)}
.dp-grid--4{grid-template-columns:repeat(4,1fr)}
/* الشبكة المتمركزة: بطاقتان أو تسع — تبقى في المنتصف دائماً */
.dp-grid--cards{
  grid-template-columns:repeat(auto-fit,minmax(300px,340px));
  justify-content:center;max-width:var(--grid-max);margin-inline:auto;
}
@media(max-width:900px){.dp-grid--3,.dp-grid--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  .dp-grid--2,.dp-grid--3,.dp-grid--4{grid-template-columns:1fr}
  .dp-footer__grid{grid-template-columns:1fr}
  .dp-nav{padding:0 var(--s4);gap:var(--s3)}
  .dp-side{position:static;width:100%;max-height:none;border:0;border-bottom:1px solid var(--border)}
  .dp-shell{flex-direction:column}
}

.dp-section{padding:var(--s7) var(--s5);max-width:var(--grid-max);margin-inline:auto;width:100%}
.dp-section--tinted{background:var(--brand-950);max-width:none}
.dp-section__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s5);flex-wrap:wrap}
.dp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

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