/*!
 * DPARADOX — dparadox-shared.css  ·  v2 (الهوية: البنفسجي المكتوم)
 * ============================================================
 * هذا الملف هو نقطة التحكّم الوحيدة بهوية المنصة كلها.
 *
 * كيف يشتغل:
 *   الصفحات الـ35 تستدعي أسماء قديمة مثل var(--gold) و var(--parchment).
 *   بدل ما نعدّل 716 موضع بـ35 ملف، أعدنا تعريف تلك الأسماء هنا لتشير
 *   للوحة الجديدة. النتيجة: الموقع كله يتبدّل من ملف واحد، والتراجع
 *   يتم باستبدال هذا الملف بنسخته القديمة.
 *
 * القواعد الملزمة المطبّقة:
 *   1. ١٩ متغيّر لون فقط — ما عداها خطأ.
 *   2. ألوان الحالة للحالة فقط، ممنوعة للتزيين.
 *   3. أقل مساحة لمس 44×44.
 *   4. الذهبي (--teal القديم #d9b25c) أُلغي — لا وجود له في النظام.
 *   5. زر أساسي واحد مملوء بلون --brand-600، بلا تدرّجات.
 *
 * ملاحظة على !important:
 *   استُخدم في ثلاثة مواضع فقط (خلفية body، خط body، وخط Orbitron
 *   المكتوب inline) لأن تلك القيم مكتوبة داخل <style> كل صفحة أو داخل
 *   خاصية style= مباشرة، وما تنكسر إلا بها. أي شيء غيرها يمرّ عبر
 *   المتغيّرات بشكل طبيعي.
 * ============================================================ */

/* ===== 1) الخطوط ========================================== */
@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@400;500;700;800;900&display=swap');

/* ===== 2) نظام الهوية — ١٩ متغيّر لون ===================== */
: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);

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

  /* ---------- جسر الأسماء القديمة (دَين مؤقت) ---------- */
  /* كل اسم قديم صار وجهاً آخر لتوكن من الـ١٩. لا لون جديد هنا.
     الصفحات المحوَّلة بالكامل لا تستدعي أياً من هذه الأسماء.
     محوَّلة حتى الآن: index.html
     يُحذف هذا القسم كاملاً يوم تخلص آخر صفحة — وإلا رجعت الصفحات
     الجديدة تُكتب بأسماء ميتة. */
  --ink:var(--bg);
  --ink-2:var(--surface-1);
  --parchment:var(--text);
  --parchment-dim:var(--text-2);
  --gold:var(--brand-600);        /* كان #5b3fb8 */
  --gold-bright:var(--brand-300); /* كان #9b7bff — نص وروابط، لازم يُقرأ */
  --teal:var(--brand-300);        /* كان #d9b25c الذهبي — أُلغي */
  --line:var(--border);
  --warn:var(--warning);
}

/* الأسطح الزجاجية القديمة كانت شبه شفافة مع backdrop-filter —
   نحافظ على الإحساس بشفافية مشتقّة من نفس التوكن، لا بلون جديد. */
@supports (color:color-mix(in srgb,red,blue)){
  :root{ --ink-2:color-mix(in srgb, var(--surface-1) 84%, transparent); }
}

/* ===== 3) الأساس ========================================== */
html{color-scheme:dark}

/* خلفية موحّدة لكل الصفحات — تلغي التدرّج الكهرماني
   rgba(217,178,92,…) المكتوب داخل <style> كل صفحة. */
/* الصفحات المحوَّلة لـdparadox-ds.css تحكم خلفيتها بنفسها؛ هذي تخدم
   الصفحات غير المحوَّلة فقط، فبقي !important على الخط دون الخلفية. */
html body{
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(122,103,184,.14), transparent 62%),
    var(--bg);
  /* **باگ مُصحَّح**: التدرّج بلا no-repeat كان **يتكرّر** رأسياً — لأن
     الصفحات تضبط height:100% فتصير منطقة الخلفية بارتفاع الشاشة، وما
     زاد عنها يُملأ بنسخة ثانية من التدرّج. النتيجة شريط فاتح يظهر في
     منتصف الصفحة ويقطع البطاقات، وكان يبدو وكأنه خلفية الفوتر.
     fixed يثبّته على الشاشة فلا يتكرّر ولا يتحرّك مع التمرير. */
  background-repeat:no-repeat;
  background-attachment:fixed;
  color:var(--text);
  font-family:var(--font-ar) !important;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
html[dir="ltr"] body{ font-family:var(--font-ar) !important; }

/* Tajawal الثقيل لعنوان الهيرو في الرئيسية فقط — لا شيء غيره.
   كل عناوين الموقع الأخرى تبقى IBM Plex Sans Arabic كما ينص ملف الهوية. */
html h1.hero-title{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-.015em;
}

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

/* ===== 4) تسطيح التدرّجات ================================= */
/* قاعدة: زر أساسي واحد مملوء بلون --brand-600 بلا استثناء.
   الأصناف الـ41 التالية كانت تستخدم تدرّج ذهبي/بنفسجي. */
.action-btn.primary,.ad-banner-cta,.auth-login-link,.auth-user-avatar,
.avatar-circle,.btn-add,.btn-primary,.cat-icon,.dpx-add-cart-btn,
.dpx-cart-checkout-btn,.dpx-cart-fab,.dpx-complaint-submit,.drop-icon,
.export-btn,.feature-icon,.gate-btn.primary,.gate-redeem-btn,
.gift-claim-btn,.gift-fab,.goto-home-btn,.lang-btn.active,.mic-btn,
.mini-btn.primary,.my-pkgs-banner-icon,.nav-cta,.pill.active,
.pkg-add-btn,.progress-fill,.submit-btn,.tab-btn.active,.toggle.on,
.tool-btn.use,.tool-gate-icon,.tool-icon,.tool-usage-bar-fill,
.translate-run-btn,.use-link{
  background:var(--brand-600);
  color:#fff;
  border-color:var(--brand-600);
}
.action-btn.primary:hover,.btn-primary:hover,.mini-btn.primary:hover,
.pkg-add-btn:hover,.submit-btn:hover,.tool-btn.use:hover,
.dpx-cart-checkout-btn:hover,.gate-btn.primary:hover,
.dpx-complaint-submit:hover,.translate-run-btn:hover{
  background:var(--brand-400);
  box-shadow:var(--glow);
}
/* العنوان المتدرّج في البانرات يصير لوناً واحداً مقروءاً */
.ad-banner-title,.hc-preview-title .accent{
  background:none;color:var(--brand-300);
  -webkit-text-fill-color:var(--brand-300);
}

/* ===== 5) اسم العلامة ===================================== */
.brand-word{
  font-family:var(--font-brand);
  font-weight:700;
  font-size:16px;
  letter-spacing:.14em;
  color:var(--text);
  text-decoration:none;
}
/* Orbitron كان مكتوباً inline في الفوتر وشريط الأسعار — يُستبدل هنا */
[style*="Orbitron"]{ font-family:var(--font-brand) !important; }
.pkg-price{ font-family:var(--font-num) !important; direction:ltr; }

/* ===== 6) زر تبديل اللغة ================================== */
.lang-toggle-btn{
  min-height:38px;
  padding:0 var(--s3);
  border-radius:var(--radius);
  border:1px solid var(--border-strong);
  background:var(--surface-2);
  color:var(--text-2);
  font-family:var(--font-ar);
  font-size:14px;
  cursor:pointer;
  transition:border-color var(--t), color var(--t);
}
.lang-toggle-btn:hover{ color:var(--text); border-color:var(--brand-400); }
.lang-toggle-btn:disabled{ opacity:.5; cursor:wait; }

/* ===== 7) رابط الرئيسية =================================== */
.home-link{
  margin-inline-start:auto;
  display:inline-flex;
  align-items:center;
  gap:var(--s2);
  min-height:38px;
  padding:0 var(--s3);
  border:1px solid var(--border-strong);
  border-radius:var(--radius);
  background:var(--surface-2);
  color:var(--text-2);
  text-decoration:none;
  font-family:var(--font-ar);
  font-size:14px;
  transition:border-color var(--t), color var(--t);
}
.home-link:hover{ border-color:var(--brand-400); color:var(--text); }
.home-link svg{ width:16px; height:16px; fill:currentColor; }

/* ===== 8) الأزرار الصغيرة ================================= */
.mini-btn{
  min-height:32px;
  padding:0 var(--s3);
  border-radius:var(--radius);
  border:1px solid var(--border-strong);
  background:var(--surface-2);
  color:var(--text);
  font-family:var(--font-ar);
  font-size:13px;
  cursor:pointer;
  white-space:nowrap;
  transition:background var(--t), border-color var(--t), transform var(--t);
}
.mini-btn:hover{ border-color:var(--brand-400); }
.mini-btn:active{ transform:translateY(1px); }
.mini-btn.primary{ border:none; font-weight:500; }
/* الإجراء الخطر: محدّد بحدّه، يمتلئ عند التمرير فقط */
.mini-btn.danger{
  background:transparent;
  border-color:var(--danger);
  color:var(--danger);
}
.mini-btn.danger:hover{ background:var(--danger); color:#fff; }
.mini-btn.success{
  background:transparent;
  border-color:var(--success);
  color:var(--success);
}
.mini-btn.success:hover{ background:var(--success); color:var(--bg); }

/* ===== 9) الشارات ========================================= */
/* ألوان الحالة للحالة فقط — أخضر نهائي إيجابي، برتقالي انتباه،
   أحمر فشل أو إيقاف، رمادي محايد. */
.badge{
  display:inline-flex; align-items:center;
  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;
}
.badge.active,.badge.confirmed,.badge.paid,.badge.published{
  color:var(--success); border-color:rgba(94,184,134,.4); background:rgba(94,184,134,.1);
}
.badge.pending,.badge.unsaved,.badge.low{
  color:var(--warning); border-color:rgba(216,168,84,.4); background:rgba(216,168,84,.1);
}
.badge.cancelled,.badge.expired,.badge.rejected,.badge.banned{
  color:var(--danger); border-color:rgba(212,94,110,.4); background:rgba(212,94,110,.1);
}
.badge.draft,.badge.neutral,.badge.archived{
  color:var(--text-2); border-color:var(--border-strong); background:var(--surface-2);
}

/* ===== 10) الفوتر ========================================= */
footer{
  border-top:1px solid var(--border);
  padding:var(--s5) 0 var(--s6);
  text-align:center;
}
.footer-note{
  color:var(--text-3);
  font-size:13px;
  margin-top:var(--s1);
}

/* ===== 11) الحقول ========================================= */
input,textarea,select{
  font-family:var(--font-ar);
}
input:focus,textarea:focus,select:focus{
  outline:none;
  border-color:var(--brand-400);
  box-shadow:var(--ring);
}
/* الأرقام والبريد والتواريخ لاتينية دائماً */
input[type="number"],input[type="email"],input[type="date"],
input[type="datetime-local"],input[type="tel"],input[type="url"]{
  direction:ltr; text-align:start; font-family:var(--font-num);
}
input[type="date"]::-webkit-calendar-picker-indicator{ filter:invert(.65); }
/* القوائم المنسدلة ما ترجع بيضاء على الثيم الداكن */
select option{ background:var(--surface-2); color:var(--text); }

/* ===== 12) مساحة اللمس ==================================== */
/* أي زر أيقونة أقل من 44×44 يرتفع للحد الأدنى الآمن */
button[aria-label]:not(.mini-btn):not(.toggle){
  min-width:44px; min-height:44px;
}

/* ===== 13) حالة الفراغ ==================================== */
.empty-state{
  text-align:center;
  padding:var(--s7) var(--s5);
  color:var(--text-2);
  font-size:14px;
}

/* ===== 14) احترام تقليل الحركة ============================ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    transition-duration:.01ms!important;
  }
}

/* ============================================================
   15) طبقة المكوّنات — تطبيق نظام الهوية على كل الصفحات
   ------------------------------------------------------------
   السوابق `html body` مقصودة: أنماط كل صفحة تُحمَّل بعد هذا
   الملف، فتحتاج خصوصية أعلى لتُطبَّق. لا !important هنا.
   ============================================================ */

/* ---------- البطاقات: سطح واحد وحدّ واحد وحافة واحدة ---------- */
html body .tool-card,
html body .pkg-card,
html body .cat-card,
html body .sub-card,
html body .policy-card,
html body .card{
  background:var(--surface-1);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  transition:border-color var(--t), box-shadow var(--t), transform var(--t);
}
html body .tool-card:hover,
html body .pkg-card:hover,
html body .cat-card:hover{
  border-color:var(--brand-400);
  box-shadow:var(--glow);
  transform:translateY(-2px);
}

/* ---------- الشبكات: تتمركز مهما كان عدد البطاقات ---------- */
html body .tools-grid,
html body .pkg-grid,
html body .cat-grid,
html body .categories-grid,
html body .tools-list,
html body .subs-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 340px));
  justify-content:center;
  gap:var(--s4);
  max-width:1120px;
  margin-inline:auto;
}
@media(max-width:680px){
  html body .tools-grid, html body .pkg-grid, html body .cat-grid,
  html body .categories-grid, html body .tools-list, html body .subs-grid{
    grid-template-columns:1fr;
  }
}

/* ---------- الأزرار الأساسية: مسطّحة بلون واحد ---------- */
html body .btn-primary,
html body .pkg-add-btn,
html body .submit-btn,
html body .tool-btn.use,
html body .action-btn.primary,
html body .gate-btn.primary,
html body .dpx-cart-checkout-btn,
html body .dpx-complaint-submit,
html body .nav-cta{
  background:var(--brand-600);
  border:0; color:#fff;
  border-radius:var(--radius);
  min-height:44px;
  font-family:var(--font-ar); font-weight:500;
  box-shadow:none;
  transition:background var(--t), box-shadow var(--t);
}
html body .btn-primary:hover,
html body .pkg-add-btn:hover,
html body .submit-btn:hover,
html body .tool-btn.use:hover,
html body .action-btn.primary:hover,
html body .gate-btn.primary:hover,
html body .dpx-cart-checkout-btn:hover,
html body .dpx-complaint-submit:hover,
html body .nav-cta:hover{
  background:var(--brand-400);
  box-shadow:var(--glow);
}
/* الزر الثانوي: حدّ لا تعبئة */
html body .tool-btn.cart,
html body .action-btn:not(.primary):not(.danger),
html body .gate-btn.secondary{
  background:var(--surface-2);
  border:1px solid var(--border-strong);
  color:var(--text);
  border-radius:var(--radius);
  min-height:44px;
}
html body .tool-btn.cart:hover{ border-color:var(--brand-400); }

/* ---------- الأيقونة المربّعة داخل البطاقة ---------- */
html body .tool-icon,
html body .cat-icon,
html body .my-pkgs-banner-icon,
html body .feature-icon,
html body .drop-icon{
  background:var(--brand-600);
  color:#fff;
  border-radius:var(--radius);
  box-shadow:none;
}
/* :not(.dp-i) مقصود: أيقونات النظام خطّية (fill="none" كسمة داخل الـSVG)،
   وقاعدة CSS تتغلّب على السمة فتملأها وتحوّلها لكتلة صمّاء. الاستثناء يترك
   أيقونات النظام على حالها، ويبقي التعبئة البيضاء للأيقونات القديمة
   المعبّأة في الصفحات التي لم تُحوَّل بعد. */
html body .tool-icon svg:not(.dp-i),
html body .cat-icon svg:not(.dp-i),
html body .feature-icon svg:not(.dp-i){ fill:#fff; }
html body .tool-icon .dp-i,
html body .cat-icon .dp-i,
html body .feature-icon .dp-i{ width:24px; height:24px; }

/* ---------- العناوين: لون واحد مقروء بلا تدرّج ---------- */
html body .tool-title,
html body .pkg-name,
html body .cat-title,
html body .feature-title{
  background:none;
  -webkit-text-fill-color:var(--text);
  color:var(--text);
  font-family:var(--font-ar);
  font-weight:600;
}

/* ---------- الأسعار: بنفسجي فاتح + أرقام لاتينية ---------- */
html body .tool-price,
html body .pkg-price,
html body .price{
  color:var(--brand-300);
  font-family:var(--font-num);
  direction:ltr; unicode-bidi:isolate;
}

/* ---------- شريط التقدّم في «اشتراكاتي» ---------- */
html body .usage-bar,
html body .progress-bar,
html body .tool-usage-bar{
  height:6px; border-radius:var(--radius-full);
  background:var(--surface-2); overflow:hidden;
}
html body .usage-bar-fill,
html body .progress-fill,
html body .tool-usage-bar-fill{
  height:100%; border-radius:inherit;
  background:var(--brand-400);
  transition:width .4s ease;
}
html body .usage-bar-fill.low,
html body .tool-usage-bar-fill.low{ background:var(--warning); }
html body .usage-bar-fill.crit,
html body .tool-usage-bar-fill.crit{ background:var(--danger); }
html body .usage-bar-fill.dead,
html body .tool-usage-bar-fill.dead{ background:var(--border-strong); }

/* ---------- لوحة التحكم: تبويبات وجداول وإحصائيات ---------- */
html body .tab-btn{
  min-height:44px; padding:0 var(--s4);
  background:none; border:0;
  border-bottom:2px solid transparent;
  color:var(--text-3);
  font-family:var(--font-ar); font-size:14px; font-weight:500;
  border-radius:0;
}
html body .tab-btn:hover{ color:var(--text-2); }
html body .tab-btn.active{
  background:none; color:var(--text);
  border-bottom-color:var(--brand-400);
}
html body .stat-card{
  background:var(--surface-1);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--s4) var(--s5);
}
html body .stat-value{
  font-family:var(--font-num);
  font-size:34px; font-weight:500; direction:ltr;
}
html body .stat-label{ color:var(--text-2); font-size:14px; }
html body table th{
  background:var(--surface-2);
  color:var(--text-3);
  font-weight:500; font-size:12.5px;
  border-bottom:1px solid var(--border);
}
html body table td{
  border-bottom:1px solid var(--border);
  color:var(--text);
}
html body table tbody tr:hover td{ background:var(--surface-2); }
/* مفتاح التبديل */
html body .toggle{
  width:48px; height:28px;
  border-radius:var(--radius-full);
  background:var(--border-strong);
  border:0; position:relative; cursor:pointer;
}
html body .toggle.on{ background:var(--brand-600); }
html body .toggle::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);
}
html body .toggle.on::after{ background:#fff; transform:translateX(-20px); }
html body[dir="ltr"] .toggle.on::after{ transform:translateX(20px); }

/* ---------- الحقول ---------- */
html body .mini-input,
html body input[type="text"],
html body input[type="number"],
html body input[type="email"],
html body input[type="password"],
html body textarea,
html body select{
  background:var(--surface-1);
  border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--text);
}
html body select{ appearance:none; -webkit-appearance:none; padding-inline-end:var(--s5); }

/* ---------- حالة الفراغ: أيقونة وعنوان وشرح وزر ---------- */
html body .empty-state{
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:var(--s3);
  min-height:240px;
  background:var(--surface-1);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  color:var(--text-2); font-size:14px; text-align:center;
}

/* ---------- النوافذ المنبثقة ---------- */
html body .dpx-complaint-modal,
html body .modal,
html body .gift-panel{
  background:var(--surface-2);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-lg);
  backdrop-filter:none; -webkit-backdrop-filter:none;
}

/* ---------- الأزرار العائمة: مقاس واحد هادئ ---------- */
html body .dpx-complaint-fab,
html body .gift-fab,
html body .dpx-cart-fab{
  width:44px; height:44px;
  background:var(--surface-2);
  border:1px solid var(--border-strong);
  color:var(--text-2);
  box-shadow:none;
}
html body .dpx-complaint-fab:hover,
html body .gift-fab:hover,
html body .dpx-cart-fab:hover{
  color:var(--brand-300); border-color:var(--brand-400);
}
html body .dpx-complaint-fab svg:not(.dp-i),
html body .gift-fab svg:not(.dp-i){ fill:currentColor; width:20px; height:20px; }
html body .dpx-complaint-fab .dp-i,
html body .gift-fab .dp-i{ width:20px; height:20px; }