/* ============================================================
   ملف التنسيقات الأساسي - NetTower Pro
   جميع الألوان والتنسيقات منقولة من التصميم الأصلي بدون تغيير
   ============================================================ */

/* ===== متغيرات الألوان (الوضع الليلي) ===== */
:root {
  --bg: #1a1a30;           /* خلفية الصفحة الرئيسية */
  --bg2: #22223a;          /* خلفية ثانوية (سايدبار) */
  --card: rgba(255,255,255,0.03); /* خلفية البطاقات - زجاجية */
  --card-hover: #312f38;   /* لون البطاقة عند المرور عليها */
  --primary: #6c5ce7;      /* اللون الأساسي - بنفسجي */
  --primary-glow: rgba(108,92,231,.15);  /* توهج بنفسجي */
  --primary-light: rgba(108,92,231,.1);  /* نسخة شفافة من البنفسجي */
  --primary-end: #5341cd;  /* نهاية التدرج اللوني */
  --success: #00b894;      /* أخضر - للعمليات الناجحة */
  --success-glow: rgba(0,184,148,.15);  /* توهج أخضر */
  --warning: #d4a017;      /* ذهبي - للتحذيرات والتنبيهات */
  --warning-glow: rgba(212,160,23,.15); /* توهج ذهبي */
  --danger: #e17055;       /* أحمر - للأخطاء والمنتهي */
  --danger-glow: rgba(225,112,85,.15);  /* توهج أحمر */
  --text: #fcf8ff;         /* النص الرئيسي - أبيض */
  --text2: #c8c4d7;        /* النص الثانوي */
  --text3: #8a8799;        /* النص المساعد */
  --radius: 24px;          /* نصف قطر الزوايا الأساسي */
  --radius-sm: 10px;       /* زوايا صغيرة */
  --radius-xl: 24px;       /* زوايا كبيرة */
  --shadow: 0 1px 3px rgba(0,0,0,.3);      /* ظل خفيف */
  --shadow-lg: 0 8px 32px rgba(0,0,0,.5);  /* ظل كبير */
  --nav-h: 68px;           /* ارتفاع شريط التنقل السفلي */
  --sidebar-w: 260px;      /* عرض القائمة الجانبية */
  --glass: rgba(36,35,43,.6);             /* خلفية زجاجية */
  --glass-border: rgba(255,255,255,.05);  /* حدود زجاجية */
  --header-bg: rgba(18,18,23,.85);        /* خلفية الهيدر مع شفافية */
  --header-h: 64px;                         /* ارتفاع الهيدر */
}

/* ===== متغيرات الألوان (الوضع النهاري) ===== */
[data-theme=light] {
  --bg: #e8e6f0;          /* خلفية الصفحة - بنفسجي فاتح */
  --bg2: #ffffff;         /* خلفية ثانوية */
  --card: rgba(0,0,0,.02); /* البطاقات - زجاجية */
  --card-hover: #e8e5f0;  /* لون البطاقة عند المرور */
  --primary: #6c5ce7;     /* بنفسجي */
  --primary-glow: rgba(108,92,231,.12);
  --primary-light: rgba(108,92,231,.08);
  --primary-end: #5341cd;
  --success: #00b894;     /* أخضر */
  --success-glow: rgba(0,184,148,.12);
  --warning: #d4a017;     /* ذهبي */
  --warning-glow: rgba(212,160,23,.12);
  --danger: #e17055;      /* أحمر */
  --danger-glow: rgba(225,112,85,.12);
  --text: #121217;        /* النص الرئيسي */
  --text2: #5a5870;       /* النص الثانوي */
  --text3: #8a8799;       /* النص المساعد */
  --shadow: 0 1px 3px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.12);
  --glass: rgba(255,255,255,.7);
  --glass-border: rgba(0,0,0,.06);
  --header-bg: rgba(255,255,255,.85);
}

/* ===== إعادة تعيين الهوامش والحواف ===== */
*{margin:0;padding:0;box-sizing:border-box;max-width:100%}
img{max-width:100%;height:auto}
pre,code{white-space:pre-wrap;word-break:break-word}

/* ===== تنسيق الجسم الأساسي ===== */
body{
  background:var(--bg);           /* خلفية ديناميكية حسب الثيم */
  color:var(--text);              /* لون النص حسب الثيم */
  font-family:'Tajawal',sans-serif; /* خط عربي مدعم */
  min-height:100vh;               /* يغطي كامل الشاشة */
  overflow-x:hidden;              /* يمنع التمرير الأفقي */
  line-height:1.6;                /* تباعد الأسطر */
  display:flex;                   /* استخدام Flexbox للتخطيط */
}

/* ===== خلفية نجوم مضيئة (الوضع الليلي فقط) ===== */
body::before,body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:0}
body::before{
  background:transparent;
  background-image:
    radial-gradient(2px 2px at 4% 12%,rgba(108,92,231,.7),transparent),
    radial-gradient(3px 3px at 12% 38%,rgba(162,155,254,.5),transparent),
    radial-gradient(1px 1px at 22% 7%,rgba(108,92,231,.8),transparent),
    radial-gradient(2px 2px at 32% 55%,rgba(162,155,254,.4),transparent),
    radial-gradient(1px 1px at 42% 18%,rgba(108,92,231,.6),transparent),
    radial-gradient(3px 3px at 52% 72%,rgba(162,155,254,.5),transparent),
    radial-gradient(2px 2px at 62% 5%,rgba(108,92,231,.7),transparent),
    radial-gradient(1px 1px at 72% 42%,rgba(162,155,254,.4),transparent),
    radial-gradient(2px 2px at 82% 28%,rgba(108,92,231,.6),transparent),
    radial-gradient(1px 1px at 92% 65%,rgba(162,155,254,.5),transparent),
    radial-gradient(2px 2px at 8% 85%,rgba(108,92,231,.5),transparent),
    radial-gradient(3px 3px at 28% 92%,rgba(162,155,254,.6),transparent),
    radial-gradient(1px 1px at 48% 78%,rgba(108,92,231,.4),transparent),
    radial-gradient(2px 2px at 68% 88%,rgba(162,155,254,.5),transparent),
    radial-gradient(1px 1px at 88% 95%,rgba(108,92,231,.7),transparent),
    radial-gradient(2px 2px at 18% 48%,rgba(162,155,254,.3),transparent),
    radial-gradient(1px 1px at 38% 32%,rgba(108,92,231,.6),transparent),
    radial-gradient(3px 3px at 58% 15%,rgba(162,155,254,.5),transparent),
    radial-gradient(2px 2px at 78% 58%,rgba(108,92,231,.4),transparent),
    radial-gradient(1px 1px at 96% 22%,rgba(162,155,254,.6),transparent);
  animation:starTwinkle 5s ease-in-out infinite alternate
}
body::after{
  background:transparent;
  background-image:
    radial-gradient(1px 1px at 7% 25%,rgba(255,255,255,.3),transparent),
    radial-gradient(2px 2px at 17% 62%,rgba(108,92,231,.5),transparent),
    radial-gradient(1px 1px at 27% 10%,rgba(162,155,254,.4),transparent),
    radial-gradient(2px 2px at 37% 45%,rgba(255,255,255,.2),transparent),
    radial-gradient(1px 1px at 47% 82%,rgba(108,92,231,.6),transparent),
    radial-gradient(3px 3px at 57% 35%,rgba(162,155,254,.5),transparent),
    radial-gradient(1px 1px at 67% 90%,rgba(255,255,255,.3),transparent),
    radial-gradient(2px 2px at 77% 15%,rgba(108,92,231,.4),transparent),
    radial-gradient(1px 1px at 87% 52%,rgba(162,155,254,.6),transparent),
    radial-gradient(2px 2px at 97% 72%,rgba(255,255,255,.2),transparent),
    radial-gradient(1px 1px at 14% 70%,rgba(108,92,231,.5),transparent),
    radial-gradient(2px 2px at 34% 20%,rgba(162,155,254,.3),transparent),
    radial-gradient(3px 3px at 54% 68%,rgba(255,255,255,.4),transparent),
    radial-gradient(1px 1px at 74% 40%,rgba(108,92,231,.6),transparent),
    radial-gradient(2px 2px at 94% 50%,rgba(162,155,254,.4),transparent),
    radial-gradient(1px 1px at 24% 88%,rgba(255,255,255,.2),transparent),
    radial-gradient(2px 2px at 44% 5%,rgba(108,92,231,.5),transparent),
    radial-gradient(1px 1px at 64% 75%,rgba(162,155,254,.3),transparent),
    radial-gradient(2px 2px at 84% 30%,rgba(255,255,255,.4),transparent),
    radial-gradient(1px 1px at 10% 55%,rgba(108,92,231,.5),transparent);
  animation:starTwinkle2 6s ease-in-out infinite alternate
}
[data-theme=light] body::before,[data-theme=light] body::after{display:none}
@keyframes starTwinkle{0%{opacity:.5}100%{opacity:1}}
@keyframes starTwinkle2{0%{opacity:1}100%{opacity:.4}}

/* ===== ألوان الأكسنت (تبديل من الإعدادات) ===== */
[data-accent="silver"] {
  --primary: #9e9eb0;
  --primary-glow: rgba(158,158,176,.15);
  --primary-light: rgba(158,158,176,.1);
  --primary-end: #8a8a9a;
}
[data-accent="silver"][data-theme="light"] {
  --primary-glow: rgba(158,158,176,.12);
  --primary-light: rgba(158,158,176,.08);
}
[data-accent="bronze"] {
  --primary: #cd7f32;
  --primary-glow: rgba(205,127,50,.15);
  --primary-light: rgba(205,127,50,.1);
  --primary-end: #a8651a;
}
[data-accent="bronze"][data-theme="light"] {
  --primary-glow: rgba(205,127,50,.12);
  --primary-light: rgba(205,127,50,.08);
}
[data-accent="gold"] {
  --primary: #c9a84c;
  --primary-glow: rgba(201,168,76,.15);
  --primary-light: rgba(201,168,76,.1);
  --primary-end: #b8942e;
}
[data-accent="gold"][data-theme="light"] {
  --primary-glow: rgba(201,168,76,.12);
  --primary-light: rgba(201,168,76,.08);
}
[data-accent="gray"] {
  --primary: #7a7a8a;
  --primary-glow: rgba(122,122,138,.15);
  --primary-light: rgba(122,122,138,.1);
  --primary-end: #666676;
}
[data-accent="gray"][data-theme="light"] {
  --primary-glow: rgba(122,122,138,.12);
  --primary-light: rgba(122,122,138,.08);
}
[data-accent="mint"] {
  --primary: #48c9b0;
  --primary-glow: rgba(72,201,176,.15);
  --primary-light: rgba(72,201,176,.1);
  --primary-end: #36b89e;
}
[data-accent="mint"][data-theme="light"] {
  --primary-glow: rgba(72,201,176,.12);
  --primary-light: rgba(72,201,176,.08);
}

/* ===== شريط التمرير - تصميم مخصص ===== */
::-webkit-scrollbar{width:4px}                    /* عرض الشريط */
::-webkit-scrollbar-track{background:transparent}  /* مسار الشريط شفاف */
::-webkit-scrollbar-thumb{background:var(--text3);border-radius:4px}  /* مقبض الشريط */
::selection{background:var(--primary);color:#fff}  /* لون التحديد */

/* ================================================================
   TOAST - رسالة منبثقة تظهر في أعلى الشاشة
   ================================================================ */
.toast{
  position:fixed;top:20px;left:50%;                  /* في منتصف الشاشة أفقياً */
  transform:translateX(-50%) translateY(-80px);      /* تبدأ مخفية للأعلى */
  background:var(--card);border:1px solid var(--glass-border);
  color:var(--text);padding:14px 32px;
  border-radius:14px;font-size:14px;font-weight:600;
  box-shadow:var(--shadow-lg);z-index:9999;           /* أعلى طبقة */
  opacity:0;                                          /* شفافة تماماً */
  transition:.5s cubic-bezier(.22,.68,0,1);           /* حركة أنيقة */
  pointer-events:none;                                 /* لا تمنع الضغط */
  white-space:nowrap;max-width:92%;text-align:center
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}  /* تظهر عند التفعيل */

/* =============================
   APP CONTAINER
   ============================= */
#app{display:flex;flex-direction:row;flex-wrap:wrap;min-height:100vh;flex:1;padding-top:var(--header-h)}

/* ================================================================
   SIDEBAR - القائمة الجانبية
   ================================================================ */
.sidebar{
  position:relative;                     /* في التدفق الطبيعي على الحاسوب */
  right:0;
  width:var(--sidebar-w);min-height:calc(100vh - var(--header-h));   /* عرض ثابت وطول كامل */
  background:var(--bg2);                 /* خلفية حسب الثيم */
  border-left:1px solid var(--glass-border);
  z-index:500;display:flex;flex-direction:column;  /* عناصر رأسية */
  transition:transform .4s cubic-bezier(.22,.68,0,1);  /* حركة سلسة */
  overflow-y:auto;                       /* تمرير عمودي إذا لزم */
  flex-shrink:0                          /* لا يتقلص */
}

/* الشعار في السايدبار */
.sidebar .logo{
  display:flex;align-items:center;gap:10px;
  padding:20px 18px;
  border-bottom:1px solid var(--glass-border)
}
/* أيقونة الشعار */
.sidebar .logo .icon{
  width:42px;height:42px;border-radius:14px;
  background:linear-gradient(135deg,var(--primary),var(--primary-end));
  display:grid;place-items:center;font-size:20px;color:#fff;
  flex-shrink:0;box-shadow:0 4px 16px var(--primary-glow)
}
.sidebar .logo .info h4{font-size:16px;font-weight:900}
.sidebar .logo .info span{font-size:11px;color:var(--text3)}

/* معلومات المستخدم في السايدبار */
.sidebar .side-user{
  display:flex;align-items:center;gap:10px;
  padding:16px 18px;
  border-bottom:1px solid var(--glass-border)
}
/* الصورة الرمزية للمستخدم */
.sidebar .side-user .u-avatar{
  width:40px;height:40px;border-radius:12px;
  background:linear-gradient(135deg,var(--primary),var(--primary-end));
  display:grid;place-items:center;font-size:18px;color:#fff;font-weight:800;flex-shrink:0
}
.sidebar .side-user div{flex:1}
.sidebar .side-user div h5{font-size:14px;font-weight:700}
.sidebar .side-user div p{font-size:11px;color:var(--text3)}

/* القوائم في السايدبار */
.sidebar .side-nav{flex:1;padding:12px 10px;display:flex;flex-direction:column;gap:2px}
/* عنوان القسم في السايدبار */
.sidebar .side-nav .nav-section{
  font-size:10px;color:var(--text3);text-transform:uppercase;
  letter-spacing:1px;padding:12px 8px 4px;font-weight:700
}
/* روابط السايدبار */
.sidebar .side-nav a{
  display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;
  color:var(--text2);text-decoration:none;font-size:13px;font-weight:600;
  cursor:pointer;transition:.25s;position:relative
}
.sidebar .side-nav a:hover{background:var(--card);color:var(--text)}
/* الرابط النشط - يظهر بشريط سماوي على اليمين */
.sidebar .side-nav a.router-link-exact-active{
  background:var(--primary-light);color:var(--primary);
  box-shadow:inset 3px 0 0 var(--primary)
}
.sidebar .side-nav a i{width:20px;text-align:center;font-size:16px}
/* العلامة (البادج) على الرابط */
.sidebar .side-nav a .sbadge{
  background:var(--danger);color:#fff;font-size:9px;
  padding:2px 8px;border-radius:20px;font-weight:800;margin-right:auto
}

/* الجزء السفلي من السايدبار (الأزرار) */
.sidebar .side-foot{padding:14px;border-top:1px solid var(--glass-border);display:flex;flex-direction:column;gap:8px}
.sidebar .side-foot button{
  width:100%;padding:12px;border-radius:12px;border:1px solid var(--glass-border);
  background:var(--card);color:var(--text2);font-size:13px;font-weight:700;
  cursor:pointer;transition:.25s;display:flex;align-items:center;gap:8px;
  justify-content:center;font-family:'Tajawal',sans-serif
}
.sidebar .side-foot button:active{background:var(--danger);color:#fff;border-color:var(--danger)}
/* أزرار الثيم (ليلي/نهاري) */
.sidebar .side-foot .theme-row{display:flex;gap:6px}
.sidebar .side-foot .theme-row button{flex:1;padding:10px;border-radius:10px}
.sidebar .side-foot .theme-row button:active{transform:scale(.97)}
.sidebar .side-foot .theme-row button.active{background:var(--primary);color:#fff;border-color:var(--primary)}

/* ===== SIDE OVERLAY - طبقة شفافة فوق المحتوى عند فتح السايدبار في الموبايل ===== */
.side-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:499;
  opacity:0;pointer-events:none;transition:.35s;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)  /* تأثير ضبابي */
}
.side-overlay.show{opacity:1;pointer-events:auto}

/* ================================================================
   MAIN - المحتوى الرئيسي
   ================================================================ */
.main{
  flex:1;min-width:0;                        /* يتمدد ليملأ المساحة المتبقية */
  padding-bottom:20px;position:relative;
  overflow-x:hidden;                         /* يمنع أي تجاوز داخلي */
  display:flex;flex-direction:column          /* عمود ليملأ الارتفاع */
}

/* في الموبايل: السايدبار يتحول إلى fixed ويختبئ خارج الشاشة */
@media(max-width:768px){
  .main{max-width:100%;width:100%;padding-bottom:calc(var(--nav-h) + 16px)}
  body{width:100%;overflow-x:hidden}
  .sidebar{position:fixed;top:0;right:0;transform:translateX(var(--sidebar-w))}
  .sidebar.open{transform:translateX(0)}
  .header .h-search{width:auto;flex:1;min-width:0;max-width:100%}
  .header .h-search input{font-size:11px;padding:5px 26px 5px 6px}
  .header .page-title{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .header .page-title i{font-size:13px}
}
@media(max-width:768px){
  .stats{grid-template-columns:1fr}
  .stat-card.span2{grid-column:auto}
}
@media(max-width:480px){
  .quick-acts{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
  .detail-actions{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}
  .report-cards{grid-template-columns:1fr}
  .fin-stats{grid-template-columns:1fr}
  .stat-card .num{font-size:20px}
  .shead{padding:12px 14px 6px}
  .shead h2{font-size:14px}
  .sub-card{padding:10px;gap:8px}
  .sub-card .actions button{width:28px;height:28px;font-size:11px}
  .form-row{grid-template-columns:1fr}
  .detail-card{margin:6px 14px;padding:14px}
  .detail-actions{margin:6px 14px 14px}
  .search-bar{padding:6px 14px}
  .subs-list{padding:0 14px 12px}
  .stats{padding:6px 14px}
  .quick-acts{padding:6px 14px}
  .header{padding:8px 12px;gap:8px}
  .header .h-search{max-width:100%}
  .header .h-actions{gap:4px}
  .header .h-actions button{width:32px;height:32px;font-size:13px}
  .header .menu-btn{width:34px;height:34px}
  .whatsapp-templates{padding:6px 14px 12px}
  .wa-preview{margin:6px 14px}
  .wa-tpl{padding:12px}
  .wa-preview{padding:12px}
  .wa-preview .msg{padding:10px}
  .wa-send-btn{width:calc(100% - 28px);margin:6px 14px}
  .form-wrap{padding:6px 14px 14px}
  .fin-stats{padding:6px 14px}
  .fin-list{padding:0 14px 14px}
  .fin-acts{padding:6px 14px}
  .fin-acts button{padding:10px 16px;font-size:12px}
  .archive-list{padding:0 14px 14px}
  .notif-list{padding:6px 14px 14px}
  .settings-list{padding:6px 14px 14px}
  .report-cards{padding:6px 14px}
  .filter-row{padding:0 14px 8px}
  .sub-card .info .name{font-size:13px}
  .bnav-item{padding:4px 4px}
  .bnav-item span{font-size:9px}
  .modal{padding:18px}
}

/* أنيميشن دخول الصفحات */
.page{animation:pageIn .35s ease;flex:1;min-height:0}
@keyframes pageIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}

/* ================================================================
   HEADER - الشريط العلوي
   ================================================================ */
.header{
  display:flex;align-items:center;gap:12px;flex-wrap:nowrap;
  padding:12px 20px;height:var(--header-h);
  background:var(--header-bg);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--glass-border);
  position:fixed;top:0;left:0;right:0;z-index:100
}
[data-theme=light] .header{
  background:linear-gradient(135deg,rgba(108,92,231,.06),rgba(108,92,231,.14)),rgba(255,255,255,.88)
}
/* زر القائمة في الموبايل */
.header .menu-btn{
  width:38px;height:38px;border-radius:12px;border:1px solid var(--glass-border);
  background:var(--card);color:var(--text2);font-size:16px;
  cursor:pointer;display:none;place-items:center;transition:.25s;flex-shrink:0;order:0
}
.header .menu-btn:active{background:var(--primary);color:#fff;border-color:var(--primary)}
@media(max-width:768px){.header .menu-btn{display:grid}}  /* يظهر فقط في الموبايل */

/* عنوان الصفحة */
.header .page-title{font-size:18px;font-weight:800;display:none;align-items:center;gap:8px;flex:1}
.header .page-title i{color:var(--primary)}

/* أزرار الإجراءات في الهيدر */
.header .h-actions{display:flex;gap:8px;order:2;flex-shrink:0}
.header .h-actions button{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--glass-border);
  background:var(--card);color:var(--text2);font-size:15px;
  cursor:pointer;transition:.25s;display:grid;place-items:center;position:relative
}
.header .h-actions button:active{background:var(--primary);color:#fff;border-color:var(--primary)}
/* البادج على الأزرار (عدد الإشعارات) */
.header .h-actions button .badge{
  position:absolute;top:-2px;right:-2px;background:var(--danger);
  color:#fff;font-size:8px;width:16px;height:16px;border-radius:50%;
  display:grid;place-items:center;font-weight:800;border:2px solid var(--bg)
}

/* معلومات المستخدم في الهيدر */
.header .h-user{position:relative;display:flex;align-items:center;gap:6px;cursor:pointer;padding:4px 10px 4px 4px;border-radius:30px;border:1px solid var(--glass-border);background:var(--card);transition:.25s;flex-shrink:0}
.header .h-user:hover{border-color:var(--primary-light)}
.header .h-user .hu-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-end));display:grid;place-items:center;font-size:13px;color:#fff;font-weight:800}
.header .h-user .hu-name{font-size:12px;font-weight:700;color:var(--text);max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:768px){.header .h-user .hu-name{display:none}}
.header .h-user .hu-menu{position:absolute;top:calc(100% + 6px);left:0;background:var(--card);border:1px solid var(--glass-border);border-radius:12px;padding:6px;min-width:160px;box-shadow:var(--shadow-lg);z-index:200}
.header .h-user .hu-menu .hum-item{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:8px;font-size:13px;font-weight:600;color:var(--text2);cursor:pointer;transition:.2s}
.header .h-user .hu-menu .hum-item:hover{background:var(--bg2);color:var(--danger)}
.header .h-user .hu-menu .hum-item i{font-size:14px}

/* مربع البحث في الهيدر */
.header .h-search{position:relative;flex:1;min-width:0;max-width:400px;order:1}
.header .h-search input{
  width:100%;background:var(--card);border:1px solid var(--glass-border);
  padding:6px 30px 6px 10px;border-radius:20px;font-size:12px;
  color:var(--text);outline:none;transition:.3s;font-family:'Tajawal',sans-serif
}
.header .h-search input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}
.header .h-search input::placeholder{color:var(--text3)}
.header .h-search i{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--text3);font-size:11px}
.header .h-search .search-dropdown{position:absolute;top:calc(100% + 6px);left:0;right:0;min-width:360px;background:var(--bg2);border:1px solid var(--glass-border);border-radius:14px;padding:8px;box-shadow:0 8px 40px rgba(0,0,0,.3);z-index:300;max-height:400px;overflow-y:auto}
.search-result-item{padding:10px 12px;border-radius:10px;cursor:pointer;transition:.15s;display:flex;align-items:center;gap:12px}
.search-result-item:hover{background:var(--card)}
.search-result-item .sri-avatar{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:16px;font-weight:800;color:#fff;flex-shrink:0}
.search-result-item .sri-info{flex:1;min-width:0}
.search-result-item .sri-name{font-size:14px;font-weight:700;color:var(--text)}
.search-result-item .sri-phone{font-size:11px;color:var(--text3)}
.search-result-item .sri-status{font-size:10px;padding:2px 10px;border-radius:20px;font-weight:700}
.search-result-item .sri-status.active{background:var(--success-glow);color:var(--success)}
.search-result-item .sri-status.expired{background:var(--danger-glow);color:var(--danger)}
.search-result-item .sri-status.inactive{background:var(--warning-glow);color:var(--warning)}
.search-result-item .sri-status.disabled{background:rgba(138,135,153,.15);color:var(--text3)}

/* ================================================================
   SECTION HEADER - عنوان القسم (يظهر قبل كل مجموعة)
   ================================================================ */
.shead{display:flex;justify-content:space-between;align-items:center;padding:16px 20px 8px}
.shead h2{font-size:16px;font-weight:800;display:flex;align-items:center;gap:8px}
.shead h2 i{color:var(--primary);font-size:15px}
/* رابط في عنوان القسم (مثل "عرض الكل" أو "إضافة") */
.shead a{
  color:var(--primary);font-size:12px;text-decoration:none;font-weight:700;
  cursor:pointer;padding:6px 14px;border-radius:20px;background:var(--primary-light);
  transition:.25s;display:flex;align-items:center;gap:4px
}
.shead a:active{background:var(--primary);color:#fff}
.shead-actions{display:flex;align-items:center;gap:8px}
.shead .filter-btn{width:42px;height:42px;border-radius:12px;border:1px solid var(--glass-border);background:var(--card);color:var(--text2);font-size:16px;cursor:pointer;transition:.25s;display:grid;place-items:center;flex-shrink:0}
.shead .filter-btn:active{background:var(--primary);color:#fff;border-color:var(--primary)}

/* ================================================================
   STATS CARDS - بطاقات الإحصائيات
   الألوان: cyan = سماوي | green = أخضر | orange = برتقالي | red = أحمر
   ================================================================ */
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;padding:8px 20px}
.home-stats{grid-template-columns:repeat(2,1fr)}
.stat-card{
  border-radius:var(--radius);
  padding:12px 14px;border:1px solid var(--glass-border);
  transition:.25s;cursor:pointer;position:relative;overflow:hidden;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)
}
.stat-card:active{transform:scale(.98)}
.stat-card[data-accent=purple]{background:linear-gradient(135deg,rgba(108,92,231,.08),rgba(108,92,231,.02))}
.stat-card[data-accent=teal]{background:linear-gradient(135deg,rgba(0,184,148,.08),rgba(0,184,148,.02))}
.stat-card[data-accent=coral]{background:linear-gradient(135deg,rgba(225,112,85,.08),rgba(225,112,85,.02))}
.stat-card[data-accent=gold]{background:linear-gradient(135deg,rgba(212,160,23,.08),rgba(212,160,23,.02))}
.stat-card[data-accent=gray]{background:linear-gradient(135deg,rgba(138,135,153,.08),rgba(138,135,153,.02))}
.stat-card[data-accent=rose]{background:linear-gradient(135deg,rgba(255,107,107,.08),rgba(255,107,107,.02))}
.stat-card[data-accent=mint]{background:linear-gradient(135deg,rgba(46,213,115,.08),rgba(46,213,115,.02))}
.stat-card[data-accent=orange]{background:linear-gradient(135deg,rgba(255,165,2,.08),rgba(255,165,2,.02))}
.stat-card .top{display:flex;justify-content:space-between;align-items:flex-start}
.stat-card .top .icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:18px;flex-shrink:0}
.stat-card .top .icon.cyan{background:var(--primary-light);color:var(--primary)}
.stat-card .top .icon.green{background:var(--success-glow);color:var(--success)}
.stat-card .top .icon.orange{background:var(--warning-glow);color:var(--warning)}
.stat-card .top .icon.red{background:var(--danger-glow);color:var(--danger)}
.stat-card .top .icon.rose{background:rgba(255,107,107,.15);color:#ff6b6b}
.stat-card .top .icon.mint{background:rgba(46,213,115,.15);color:#2ed573}
.stat-card .top .icon.blue{background:rgba(84,160,255,.15);color:#54a0ff}
.stat-card .num{font-size:22px;font-weight:900;margin-top:6px;line-height:1.2}
.stat-card .label{font-size:11px;color:var(--text2);margin-top:1px}
.stat-card .trend{font-size:10px;margin-top:4px;display:flex;align-items:center;gap:4px}
.stat-card .trend.up{color:var(--success)}
.stat-card .trend.down{color:var(--danger)}
.stat-card.span2{grid-column:span 2}

/* ================================================================
   QUICK ACTIONS - أزرار العمليات السريعة
   ================================================================ */
.quick-acts{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;padding:8px 20px}
.qa{
  background:var(--card);border-radius:var(--radius);
  padding:18px 10px;display:flex;flex-direction:column;
  align-items:center;gap:10px;border:1px solid var(--glass-border);
  cursor:pointer;transition:.25s;text-align:center;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)
}
.qa:active{transform:scale(.95)}
.qa[data-accent=purple]{background:linear-gradient(135deg,rgba(108,92,231,.08),rgba(108,92,231,.02))}
.qa[data-accent=teal]{background:linear-gradient(135deg,rgba(0,184,148,.08),rgba(0,184,148,.02))}
.qa[data-accent=mint]{background:linear-gradient(135deg,rgba(46,213,115,.08),rgba(46,213,115,.02))}
.qa[data-accent=gold]{background:linear-gradient(135deg,rgba(212,160,23,.08),rgba(212,160,23,.02))}
.qa[data-accent=lavender]{background:linear-gradient(135deg,rgba(162,155,254,.08),rgba(162,155,254,.02))}
.qa[data-accent=coral]{background:linear-gradient(135deg,rgba(225,112,85,.08),rgba(225,112,85,.02))}
.qa .qicon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:20px}
.qa .qicon.cyan{background:linear-gradient(135deg,var(--primary),rgba(108,92,231,.2));color:var(--primary)}
.qa .qicon.green{background:linear-gradient(135deg,var(--success),rgba(0,184,148,.2));color:var(--success)}
.qa .qicon.orange{background:linear-gradient(135deg,var(--warning),rgba(212,160,23,.2));color:var(--warning)}
.qa .qicon.red{background:linear-gradient(135deg,var(--danger),rgba(225,112,85,.2));color:var(--danger)}
.qa .qicon.purple{background:linear-gradient(135deg,#a29bfe,rgba(162,155,254,.2));color:#a29bfe}
.qa span{font-size:12px;font-weight:700}

/* ================================================================
   SUBSCRIBER CARDS - بطاقة المشترك (تصميم احترافي Premium)
   ================================================================ */
.subs-list{display:flex;flex-direction:column;gap:8px;padding:0 20px 16px}
.sub-card{
  background:var(--card);border-radius:var(--radius);
  padding:14px 16px;border:1px solid var(--glass-border);
  transition:all .35s cubic-bezier(.22,.68,0,1);
  cursor:pointer;display:flex;gap:14px;align-items:center;
  position:relative;overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)
}
.sub-card:hover{
  border-color:var(--primary-light);
  box-shadow:0 4px 20px var(--primary-glow);
  transform:translateY(-1px)
}
.sub-card:active{transform:scale(.99)}
/* الشريط الجانبي الأيسر - حسب الحالة */
.sub-card::before{
  content:'';position:absolute;top:0;right:0;width:4px;
  height:100%;border-radius:0 3px 3px 0;transition:.35s
}
.sub-card.active::before{background:var(--success);box-shadow:0 0 12px var(--success-glow)}
.sub-card.expired::before{background:var(--danger);box-shadow:0 0 12px var(--danger-glow)}
.sub-card.disabled::before{background:var(--text3)}
.sub-card.inactive::before{background:var(--warning);box-shadow:0 0 12px var(--warning-glow)}
/* الصورة الرمزية - تصميم دائري أنيق */
.sub-card .avatar{
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;font-size:18px;color:#fff;
  font-weight:900;flex-shrink:0;
  position:relative;z-index:1;
  border:2px solid transparent;transition:.35s;
  background:linear-gradient(135deg,var(--text3),#6b6a7a)
}
.sub-card:hover .avatar{transform:scale(1.05)}
.sub-card .avatar.on{
  background:linear-gradient(135deg,var(--primary),var(--primary-end));
  border-color:rgba(108,92,231,.3);
  box-shadow:0 4px 16px rgba(108,92,231,.25)
}
.sub-card .avatar.off{
  background:linear-gradient(135deg,var(--text3),#6b6a7a);
  border-color:rgba(138,135,153,.3);color:#fff;box-shadow:none
}
.sub-card .avatar.wait{
  background:linear-gradient(135deg,var(--warning),#b88c14);
  border-color:rgba(212,160,23,.3);
  box-shadow:0 4px 16px rgba(212,160,23,.25)
}
.sub-card .avatar.disabled{
  background:linear-gradient(135deg,#8a8799,#6b6a7a);
  border-color:rgba(138,135,153,.2);color:#fff
}
.sub-card .info{flex:1;min-width:0}
.sub-card .info .name{
  font-size:15px;font-weight:800;display:flex;align-items:center;
  gap:6px;margin-bottom:1px;line-height:1.3
}
/* أيقونة الحالة بدلاً من النقطة */
.sub-card .info .name .status-icon{
  font-size:11px;display:inline-flex;align-items:center
}
.sub-card .info .name .status-icon.on{color:var(--success)}
.sub-card .info .name .status-icon.off{color:var(--danger)}
.sub-card .info .name .status-icon.wait{color:var(--warning)}
.sub-card .info .name .status-icon.disabled{color:var(--text3)}
.sub-card .info .phone{
  font-size:12px;color:var(--text3);display:flex;
  align-items:center;gap:4px;margin-bottom:4px;direction:ltr;
  justify-content:flex-start
}
.sub-card .info .phone i{font-size:10px;opacity:.5;color:var(--text3)}
.sub-card .info .meta{display:flex;gap:4px;flex-wrap:wrap}
.sub-card .info .meta span{
  font-size:10px;padding:2px 10px;border-radius:20px;
  font-weight:700;letter-spacing:.3px;
  display:inline-flex;align-items:center;gap:3px
}
.sub-card .info .meta span.type{
  background:linear-gradient(135deg,rgba(108,92,231,.15),rgba(108,92,231,.08));
  color:var(--primary)
}
.sub-card .info .meta span.paid{
  background:linear-gradient(135deg,rgba(0,184,148,.12),rgba(0,184,148,.06));
  color:var(--success)
}
.sub-card .info .meta span.debt{
  background:linear-gradient(135deg,rgba(212,160,23,.12),rgba(212,160,23,.06));
  color:var(--warning)
}
.sub-card .info .meta span.unpaid{
  background:linear-gradient(135deg,rgba(225,112,85,.12),rgba(225,112,85,.06));
  color:var(--danger)
}
.sub-card .info .meta span.expiring{
  background:linear-gradient(135deg,rgba(212,160,23,.12),rgba(212,160,23,.06));
  color:var(--warning)
}
.sub-card .info .meta span.remaining{
  background:linear-gradient(135deg,rgba(108,92,231,.12),rgba(108,92,231,.06));
  color:var(--primary)
}
.sub-card .info .meta span.expiring{
  background:linear-gradient(135deg,rgba(212,160,23,.12),rgba(212,160,23,.06));
  color:var(--warning)
}
.sub-card .info .meta span.disabled-badge{
  background:linear-gradient(135deg,rgba(138,135,153,.12),rgba(138,135,153,.06));
  color:var(--text3)
}
/* الخط السفلي المتدرج حسب الحالة */
.sub-card .status-bar{
  position:absolute;bottom:0;left:0;right:0;height:3px;
  border-radius:0 0 16px 16px;transition:.35s
}
.sub-card .status-bar.active{background:linear-gradient(90deg,var(--success),rgba(0,184,148,.3))}
.sub-card .status-bar.expired{background:linear-gradient(90deg,var(--danger),rgba(225,112,85,.3))}
.sub-card .status-bar.disabled{background:linear-gradient(90deg,var(--text3),rgba(138,135,153,.3))}
.sub-card .status-bar.inactive{background:linear-gradient(90deg,var(--warning),rgba(212,160,23,.3))}

/* ================================================================
   DETAIL CARD - بطاقة تفاصيل المشترك
   ================================================================ */
.detail-card{
  border-radius:var(--radius);
  padding:18px;margin:8px 20px;border:1px solid var(--glass-border);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)
}
.detail-card .dhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.detail-card .dhead h3{font-size:16px;font-weight:800;display:flex;align-items:center;gap:8px}
/* شارة الحالة في رأس البطاقة */
.detail-card .dhead .sbadge{padding:4px 16px;border-radius:20px;font-size:11px;font-weight:700}
.detail-card .dhead .sbadge.active{background:var(--success-glow);color:var(--success)}      /* فعال */
.detail-card .dhead .sbadge.inactive{background:var(--danger-glow);color:var(--danger)}      /* منتهي */
.detail-card .dhead .sbadge.pending{background:var(--warning-glow);color:var(--warning)}     /* غير مفعل */
.detail-card .dbody{display:flex;flex-direction:column;gap:8px}
.detail-card .dbody .row{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 0;border-bottom:1px solid var(--glass-border)
}
.detail-card .dbody .row:last-child{border:none}
.detail-card .dbody .row .label{font-size:13px;color:var(--text2);display:flex;align-items:center;gap:6px}
.detail-card .dbody .row .value{font-size:14px;font-weight:700;text-align:left}
/* ألوان القيم في التفاصيل */
.detail-card .dbody .row .value.primary{color:var(--primary)}   /* سماوي */
.detail-card .dbody .row .value.success{color:var(--success)}   /* أخضر */
.detail-card .dbody .row .value.danger{color:var(--danger)}     /* أحمر */
.detail-card .dbody .row .value.warning{color:var(--warning)}   /* برتقالي */
.detail-card .dbody .row .value.ltr{direction:ltr;text-align:left}

/* أزرار الإجراءات في صفحة التفاصيل */
.detail-actions{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));
  gap:8px;margin:8px 20px 20px
}
.detail-actions button{
  padding:12px 6px;border-radius:12px;border:1px solid var(--glass-border);
  background:var(--card);color:var(--text2);font-size:11px;font-weight:700;
  cursor:pointer;transition:.25s;display:flex;flex-direction:column;
  align-items:center;gap:6px;font-family:'Tajawal',sans-serif
}
.detail-actions button i{font-size:18px}
.detail-actions button:active{transform:scale(.95)}
/* ألوان أزرار التفاصيل */
.detail-actions button.cy{color:var(--primary);border-color:rgba(108,92,231,.2)}
.detail-actions button.gr{color:var(--success);border-color:rgba(0,184,148,.2)}
.detail-actions button.rd{color:var(--danger);border-color:rgba(225,112,85,.2)}
.detail-actions button.ow{color:var(--warning);border-color:rgba(212,160,23,.2)}

/* ================================================================
   WHATSAPP - صفحة الواتساب
   ================================================================ */
.whatsapp-templates{display:flex;flex-direction:column;gap:10px;padding:8px 20px 16px}
.wa-tpl{
  border-radius:var(--radius);
  padding:16px;border:1px solid var(--glass-border);cursor:pointer;transition:.25s;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)
}
.wa-tpl:active{transform:scale(.99)}
.wa-tpl.active{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-glow)}
.wa-tpl .tpl-title{font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}
.wa-tpl .tpl-title i{font-size:16px;color:var(--primary)!important}
.wa-tpl .tpl-preview{font-size:12px;color:var(--text2);margin-top:6px;padding:10px 14px;background:var(--bg2);border-radius:8px;line-height:1.5}
.wa-tpl .tpl-preview strong{color:var(--primary)}
/* معاينة الرسالة قبل الإرسال */
.wa-preview{border-radius:var(--radius);padding:16px;margin:8px 20px;border:1px solid var(--glass-border);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.wa-preview .label{font-size:12px;color:var(--text2);margin-bottom:6px}
.wa-preview .msg{background:var(--bg2);padding:14px;border-radius:12px;font-size:13px;line-height:1.7;color:var(--text)}
/* زر إرسال الواتساب - بتدرج أخضر */
.wa-send-btn{
  display:block;width:calc(100% - 40px);margin:8px 20px;padding:16px;border-radius:14px;
  border:none;background:linear-gradient(135deg,#25D366,#128C7E);color:#fff;
  font-size:16px;font-weight:800;cursor:pointer;transition:.25s;
  box-shadow:0 4px 24px rgba(37,211,102,.3);font-family:'Tajawal',sans-serif
}
.wa-send-btn:active{transform:scale(.98)}

/* ================================================================
   FORMS - الفورم والنماذج
   ================================================================ */
.form-wrap{padding:8px 20px 20px;display:flex;flex-direction:column;gap:14px}
.form-group{display:flex;flex-direction:column;gap:4px}
.form-group label{font-size:13px;font-weight:700;color:var(--text2);display:flex;align-items:center;gap:6px}
.form-group label i{color:var(--primary);font-size:13px}
/* حقول الإدخال */
.form-group input,.form-group select,.form-group textarea{
  background:var(--card);border:1px solid var(--glass-border);
  padding:12px 16px;border-radius:12px;font-size:14px;
  color:var(--text);outline:none;transition:.25s;font-family:'Tajawal',sans-serif
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)  /* توهج سماوي عند التركيز */
}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--text3)}
.form-group textarea{resize:vertical;min-height:70px}
/* تخصيص عنصر select ليعمل كقائمة منسدلة أنيقة */
.form-group select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394A3B8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 14px center;padding-left:36px;
  color-scheme:dark
}
.form-group select option{background:var(--bg2);color:var(--text)}
.form-group .hint{font-size:12px;color:var(--text3);margin-top:2px}
/* صفوف متعددة الأعمدة في الفورم */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:480px){.form-row{grid-template-columns:1fr}}  /* عمود واحد في الشاشات الصغيرة */
.form-actions{display:flex;gap:10px;padding-top:4px;flex-wrap:wrap}
.form-actions button{flex:1;min-width:100px;padding:14px;border-radius:12px;font-size:14px;font-weight:800;cursor:pointer;transition:.25s;font-family:'Tajawal',sans-serif}
/* أنواع الأزرار في الفورم */
.form-actions .primary{border:none;background:linear-gradient(135deg,var(--primary),var(--primary-end));color:#fff;box-shadow:0 4px 16px var(--primary-glow)}
.form-actions .primary:active{transform:scale(.98)}
.form-actions .secondary{border:1px solid var(--glass-border);background:var(--card);color:var(--text2)}  /* ثانوي - عادي */
.form-actions .secondary:active{background:var(--bg2)}
.form-actions .danger{border:none;background:var(--danger);color:#fff}  /* خطر - أحمر */
.form-actions .danger:active{transform:scale(.98)}
.form-actions .success{border:none;background:var(--success);color:#fff}  /* نجاح - أخضر */
.form-actions .success:active{transform:scale(.98)}
.form-actions .warning{border:none;background:var(--warning);color:#fff}  /* تحذير - برتقالي */
.form-actions .warning:active{transform:scale(.98)}

/* ================================================================
   SEARCH & FILTER - البحث والفلترة
   ================================================================ */
.search-bar{display:flex;gap:8px;padding:8px 20px}
.search-bar .input-wrap{flex:1;position:relative}
.search-bar .input-wrap i{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  color:var(--text3);font-size:14px
}
.search-bar .input-wrap input{
  width:100%;background:var(--card);border:1px solid var(--glass-border);
  padding:11px 40px 11px 12px;border-radius:12px;font-size:14px;
  color:var(--text);outline:none;transition:.3s;font-family:'Tajawal',sans-serif
}
.search-bar .input-wrap input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}
.search-bar .input-wrap input::placeholder{color:var(--text3)}
.search-bar .filter-btn{width:42px;height:42px;border-radius:12px;border:1px solid var(--glass-border);background:var(--card);color:var(--text2);font-size:16px;cursor:pointer;transition:.25s;display:grid;place-items:center;flex-shrink:0}
.search-bar .filter-btn:active{background:var(--primary);color:#fff;border-color:var(--primary)}
/* أزرار الفلترة */
.filter-row{display:flex;gap:8px;padding:0 20px 10px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.filter-row::-webkit-scrollbar{display:none}  /* إخفاء شريط التمرير */
.filter-chip{
  padding:8px 18px;border-radius:30px;background:var(--card);
  border:1px solid var(--glass-border);color:var(--text2);
  font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:.25s;flex-shrink:0
}
.filter-chip:active{transform:scale(.95)}
.filter-chip.active{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 4px 16px var(--primary-glow)}  /* شريحة نشطة */

/* ================================================================
   FINANCE - الصندوق المالي
   ================================================================ */
.fin-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;padding:8px 20px}
.fin-acts{display:flex;gap:10px;padding:8px 20px;flex-wrap:wrap}
.fin-acts button{
  padding:14px 24px;border-radius:12px;border:1px solid var(--glass-border);
  background:var(--card);color:var(--text2);font-size:13px;font-weight:700;
  cursor:pointer;transition:.25s;display:flex;align-items:center;gap:8px;font-family:'Tajawal',sans-serif
}
.fin-acts button:active{transform:scale(.97)}
.fin-acts button i{font-size:18px}
.fin-acts button.gr i{color:var(--success)}  /* أخضر للإيرادات */
.fin-acts button.rd i{color:var(--danger)}    /* أحمر للمصروفات */
.fin-list{display:flex;flex-direction:column;gap:6px;padding:0 20px 20px}
.fin-item{
  border-radius:12px;padding:14px;
  display:flex;justify-content:space-between;align-items:center;
  border:1px solid var(--glass-border);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)
}
.fin-item .fleft{min-width:0;flex:1}
.fin-item .fleft .fdate{font-size:11px;color:var(--text3)}
.fin-item .fleft .fdesc{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fin-item .famount{font-size:16px;font-weight:800}
.fin-item .famount.income{color:var(--success)}   /* إيراد - أخضر */
.fin-item .famount.expense{color:var(--danger)}   /* مصروف - أحمر */
.fin-item .ftype{font-size:11px;padding:2px 10px;border-radius:20px;background:var(--bg2);color:var(--text2)}
.fin-item-archived{opacity:.75;border-color:var(--text3)!important}
.fin-item-archived .fdesc{color:var(--text3)}
.archived-badge{font-size:10px;color:var(--text3);background:var(--bg2);padding:3px 8px;border-radius:20px;white-space:nowrap;display:flex;align-items:center;gap:3px}

/* ================================================================
   ARCHIVE - الأرشيف
   ================================================================ */
.archive-list{display:flex;flex-direction:column;gap:10px;padding:0 20px 20px}
.arch-card{
  border-radius:var(--radius);
  padding:14px;border:1px solid var(--glass-border);
  display:flex;align-items:center;gap:12px;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)
}
.arch-card .ainfo{flex:1;min-width:0}
.arch-card .ainfo h4{font-size:14px;font-weight:700}
.arch-card .ainfo p{font-size:12px;color:var(--text2)}
.arch-card .aacts{display:flex;gap:6px}
.arch-card .aacts button{
  width:36px;height:36px;border-radius:10px;border:1px solid var(--glass-border);
  background:var(--bg2);color:var(--text2);font-size:13px;
  cursor:pointer;transition:.2s;display:grid;place-items:center
}
.arch-card .aacts button:active{background:var(--primary);color:#fff;border-color:var(--primary)}
.arch-card .aacts button.rd:active{background:var(--danger);border-color:var(--danger)}

/* ================================================================
   NOTIFICATIONS - صفحة الإشعارات
   ================================================================ */
.notif-list{display:flex;flex-direction:column;gap:8px;padding:8px 20px 20px}
.notif-item{
  border-radius:12px;padding:14px;
  display:flex;gap:12px;align-items:start;border:1px solid var(--glass-border);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)
}
/* أيقونة الإشعار */
.notif-item .nicon{width:38px;height:38px;border-radius:10px;background:var(--primary-light);display:grid;place-items:center;font-size:16px;color:var(--primary);flex-shrink:0}
.notif-item .nicon.red{background:var(--danger-glow);color:var(--danger)}       /* أحمر = خطأ */
.notif-item .nicon.orange{background:var(--warning-glow);color:var(--warning)}   /* برتقالي = تحذير */
.notif-item .nicon.green{background:var(--success-glow);color:var(--success)}    /* أخضر = نجاح */
.notif-item .ntext{flex:1}
.notif-item .ntext p{font-size:13px}
.notif-item .ntext .ntime{font-size:11px;color:var(--text3);margin-top:4px}

/* ================================================================
   SETTINGS - صفحة الإعدادات
   ================================================================ */
.settings-list{display:flex;flex-direction:column;gap:8px;padding:8px 20px 20px}
.set-card{
  border-radius:var(--radius);
  padding:14px;border:1px solid var(--glass-border);
  display:flex;align-items:center;gap:12px;cursor:pointer;transition:.25s;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)
}
.set-card:active{transform:scale(.99)}
.set-card .sicon{width:40px;height:40px;border-radius:12px;background:var(--primary-light);display:grid;place-items:center;font-size:18px;color:var(--primary);flex-shrink:0}
.set-card .sicon.green{background:var(--success-glow);color:var(--success)}
.set-card .sicon.orange{background:var(--warning-glow);color:var(--warning)}
.set-card .sicon.red{background:var(--danger-glow);color:var(--danger)}
.set-card .sinfo{flex:1}
.set-card .sinfo h4{font-size:14px;font-weight:700}
.set-card .sinfo p{font-size:12px;color:var(--text2)}
.set-card .sarrow{color:var(--text3);font-size:14px}  /* سهم التنقل */

/* ================================================================
   BOTTOM NAV - شريط التنقل السفلي (للموبايل)
   ================================================================ */
.bnav{
  position:fixed;bottom:0;left:0;right:0;display:none;height:var(--nav-h);
  background:var(--glass);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-top:1px solid var(--glass-border);z-index:200;
  align-items:center;justify-content:space-around;padding:4px 0 8px
}
[data-theme=light] .bnav{
  background:linear-gradient(135deg,rgba(108,92,231,.04),rgba(108,92,231,.12)),rgba(255,255,255,.78)
}
@media(max-width:768px){.bnav{display:flex}}  /* يظهر فقط في الموبايل */
.bnav-item{
  display:flex;flex-direction:column;align-items:center;gap:1px;
  background:none;border:none;color:var(--text3);font-size:10px;
  cursor:pointer;transition:.25s;padding:6px 10px;position:relative;
  font-weight:600;font-family:'Tajawal',sans-serif
}
.bnav-item i{font-size:20px;transition:.25s;margin-bottom:1px}
.bnav-item span{white-space:nowrap}
.bnav-item.active{color:var(--primary)}                                /* نشط - سماوي */
.bnav-item.active i{transform:translateY(-2px)}                        /* الأيقونة تتحرك لأعلى قليلاً */
.bnav-item .cbadge{
  position:absolute;top:-2px;right:-2px;background:var(--danger);
  color:#fff;font-size:8px;width:16px;height:16px;border-radius:50%;
  display:grid;place-items:center;font-weight:800;border:2px solid var(--bg)
}

/* ================================================================
   MODAL - النافذة المنبثقة
   ================================================================ */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:600;
  opacity:0;pointer-events:none;transition:.35s;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)
}
.modal-overlay.show{opacity:1;pointer-events:auto}
.modal{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%) translateY(100%);
  width:100%;max-width:600px;background:var(--bg2);z-index:700;
  border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow:0 -8px 40px rgba(0,0,0,.5);
  transition:transform .5s cubic-bezier(.22,.68,0,1);
  padding:24px;max-height:85vh;overflow:hidden;
  border-top:1px solid var(--glass-border);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  display:flex;flex-direction:column
}
.modal.open{transform:translateX(-50%) translateY(0)}     /* تظهر عند الفتح */
.modal .mhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-shrink:0}
#modalBody{overflow-y:auto;flex:1;min-height:0}
.modal .mhead h3{font-size:17px;font-weight:800;display:flex;align-items:center;gap:8px}
.modal .mhead h3 i{color:var(--primary)}
.modal .mhead button{background:none;border:none;color:var(--text3);font-size:22px;cursor:pointer;padding:4px}

/* ================================================================
   FINANCE 2x2 GRID - كروت مربعة للصندوق المالي
   ================================================================ */
.fin-grid-2x2{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:8px 20px}
.fin-square-card{
  aspect-ratio:1/1;border-radius:var(--radius);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;border:1px solid var(--glass-border);
  padding:16px;position:relative;overflow:hidden;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)
}
.fin-square-card .fsc-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:20px}
.fin-square-card .fsc-num{font-size:22px;font-weight:900;line-height:1.2}
.fin-square-card .fsc-label{font-size:11px;color:var(--text2);font-weight:600}
.fin-square-card.income{background:linear-gradient(135deg,rgba(0,184,148,.08),rgba(0,184,148,.02))}
.fin-square-card.income .fsc-icon{background:var(--success-glow);color:var(--success)}
.fin-square-card.income .fsc-num{color:var(--success)}
.fin-square-card.expense{background:linear-gradient(135deg,rgba(225,112,85,.08),rgba(225,112,85,.02))}
.fin-square-card.expense .fsc-icon{background:var(--danger-glow);color:var(--danger)}
.fin-square-card.expense .fsc-num{color:var(--danger)}
.fin-square-card.balance{background:linear-gradient(135deg,rgba(108,92,231,.08),rgba(108,92,231,.02))}
.fin-square-card.balance .fsc-icon{background:var(--primary-glow);color:var(--primary)}
.fin-square-card.balance .fsc-num{color:var(--primary)}
.fin-square-card.debts{background:linear-gradient(135deg,rgba(212,160,23,.08),rgba(212,160,23,.02))}
.fin-square-card.debts .fsc-icon{background:var(--warning-glow);color:var(--warning)}
.fin-square-card.debts .fsc-num{color:var(--warning)}
@media(max-width:480px){
  .fin-grid-2x2{gap:8px;padding:6px 14px}
  .fin-square-card .fsc-num{font-size:18px}
  .fin-square-card .fsc-icon{width:36px;height:36px;font-size:17px}
}

/* ===== أزرار تعديل/حذف في قائمة الصندوق المالي ===== */
.fin-actions{display:flex;gap:4px;flex-shrink:0}
.fin-edit-btn,.fin-del-btn{
  width:30px;height:30px;border-radius:8px;border:1px solid var(--glass-border);
  background:var(--bg2);font-size:11px;cursor:pointer;transition:.2s;
  display:grid;place-items:center
}
.fin-edit-btn{color:var(--primary)}
.fin-edit-btn:active{background:var(--primary);color:#fff;border-color:var(--primary)}
.fin-del-btn{color:var(--danger)}
.fin-del-btn:active{background:var(--danger);color:#fff;border-color:var(--danger)}

/* ================================================================
   REPORTS - صفحة التقارير
   ================================================================ */
.report-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;padding:8px 20px}
.rep-card{
  border-radius:var(--radius);
  padding:18px;border:1px solid var(--glass-border);cursor:pointer;transition:.25s;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)
}
.rep-card:active{transform:scale(.98)}
.rep-card .rnum{font-size:30px;font-weight:900}
.rep-card .rnum.cyan{color:var(--primary)}
.rep-card .rnum.green{color:var(--success)}
.rep-card .rnum.red{color:var(--danger)}
.rep-card .rnum.orange{color:var(--warning)}
.rep-card .rlabel{font-size:12px;color:var(--text2);margin-top:2px}

/* ===== كاردات متعددة الأحجام ===== */
.stat-card.xl{grid-column:span 3}
.stat-card.lg{grid-column:span 2}
.stat-card.sm{grid-column:span 1}
.stat-card.clickable{cursor:pointer}
.stat-card.clickable:active{transform:scale(.97)}
@media(max-width:768px){
  .stat-card.xl{grid-column:span 2}
  .stat-card.lg{grid-column:span 2}
}
@media(max-width:480px){
  .stat-card.xl{grid-column:auto}
  .stat-card.lg{grid-column:auto}
}

/* ===== لون شارة المعطل ===== */
.detail-card .dhead .sbadge.disabled{background:var(--text3);color:#fcf8ff}
.sub-card .info .name .dot{width:8px;height:8px;border-radius:50%;display:inline-block;transition:.3s}
.sub-card .info .name .dot.on{background:var(--success);box-shadow:0 0 8px var(--success-glow)}
.sub-card .info .name .dot.off{background:var(--danger);box-shadow:0 0 8px var(--danger-glow)}
.sub-card .info .name .dot.wait{background:var(--warning);box-shadow:0 0 8px var(--warning-glow)}
.sub-card .info .name .dot.disabled{background:var(--text3);box-shadow:0 0 8px rgba(138,135,153,.3)}

/* ================================================================
   WHATSAPP STEPS - خطوات إرسال واتساب
   ================================================================ */
.wa-steps{display:flex;align-items:center;justify-content:center;gap:0;padding:12px 20px 4px;direction:rtl}
.wa-step{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:default;opacity:.4;transition:.4s;min-width:60px}
.wa-step.active{opacity:1}
.wa-step.done{opacity:.7;cursor:pointer}
.wa-step.done:hover{opacity:1}
.wa-step-num{width:32px;height:32px;border-radius:50%;background:var(--card);border:2px solid var(--text3);display:grid;place-items:center;font-size:13px;font-weight:800;color:var(--text3);transition:.4s}
.wa-step.active .wa-step-num{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 0 0 4px var(--primary-glow)}
.wa-step.done .wa-step-num{background:var(--success);border-color:var(--success);color:#fff}
.wa-step span{font-size:10px;font-weight:700;color:var(--text2);white-space:nowrap}
.wa-step.active span{color:var(--primary)}
.wa-step.done span{color:var(--success)}
.wa-step-line{width:40px;height:2px;background:var(--text3);opacity:.3;transition:.4s;margin:0 4px;margin-bottom:18px}
.wa-step-line.done{background:var(--success);opacity:.7}

/* شارة المشترك والقالب المختار */
.selected-badge{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:30px;background:var(--primary-light);color:var(--primary);font-size:13px;font-weight:700;cursor:pointer;transition:.25s;margin:0 20px 8px}
.selected-badge:active{transform:scale(.95)}

/* علامة الاختيار في بطاقة المشترك */
.wa-check{font-size:16px;color:var(--text3);flex-shrink:0;transition:.3s}
.wa-check.checked{color:var(--primary);transform:scale(1.2)}
.wa-subs .sub-card.selected{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-glow)}

/* ===== أنيميشن التنقل بين الخطوات (wa-slide) ===== */
.wa-slide-enter-active{animation:waIn .35s ease}
.wa-slide-leave-active{animation:waOut .25s ease}
@keyframes waIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}
@keyframes waOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-30px)}}

/* ================================================================
   ADD-SUB STEPS - خطوات إضافة مشترك
   ================================================================ */
.as-steps{display:flex;align-items:center;justify-content:center;gap:0;padding:12px 20px 4px;direction:rtl}
.as-step{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:default;opacity:.4;transition:.4s;min-width:50px}
.as-step.active{opacity:1}
.as-step.done{opacity:.7;cursor:pointer}
.as-step.done:hover{opacity:1}
.as-step-num{width:30px;height:30px;border-radius:50%;background:var(--card);border:2px solid var(--text3);display:grid;place-items:center;font-size:12px;font-weight:800;color:var(--text3);transition:.4s}
.as-step.active .as-step-num{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 0 0 4px var(--primary-glow)}
.as-step.done .as-step-num{background:var(--success);border-color:var(--success);color:#fff}
.as-step span{font-size:10px;font-weight:700;color:var(--text2);white-space:nowrap}
.as-step.active span{color:var(--primary)}
.as-step.done span{color:var(--success)}
.as-step-line{width:30px;height:2px;background:var(--text3);opacity:.3;transition:.4s;margin:0 3px;margin-bottom:18px}
.as-step-line.done{background:var(--success);opacity:.7}

/* ===== أزرار مدفوع/آجل ===== */
.as-paid-btn{flex:1;padding:12px;border-radius:12px;border:1px solid var(--glass-border);background:var(--card);color:var(--text2);font-size:14px;font-weight:700;cursor:pointer;transition:.25s;display:flex;align-items:center;justify-content:center;gap:6px;font-family:'Tajawal',sans-serif}
.as-paid-btn:active{transform:scale(.97)}
.as-paid-btn.active{background:var(--success-glow);color:var(--success);border-color:var(--success)}
.as-paid-btn:first-child.active{background:var(--success-glow);color:var(--success);border-color:var(--success)}
.as-paid-btn:last-child.active{background:var(--warning-glow);color:var(--warning);border-color:var(--warning)}

/* ================================================================
   SETTINGS MODAL - تصميم احترافي لمودالات الإعدادات
   ================================================================ */
.set-modal-desc{font-size:13px;color:var(--text3);margin-bottom:14px;padding:10px 14px;background:var(--bg2);border-radius:10px;line-height:1.7}
.set-item{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;background:var(--card);border:1px solid var(--glass-border);margin-bottom:6px;transition:.2s}
.set-item:hover{border-color:var(--primary-light)}
.set-item-icon{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;font-size:14px;flex-shrink:0;background:var(--bg2);color:var(--primary)}
.set-item .field{flex:1;min-width:0}
.set-item .field input,.set-item .field select{width:100%;padding:7px 10px;border-radius:8px;border:1px solid var(--glass-border);background:var(--bg2);color:var(--text);font-size:13px;font-family:'Tajawal',sans-serif;outline:none;transition:.2s}
.set-item .field input:focus,.set-item .field select:focus{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-glow)}
.set-item .field input.small{width:70px;text-align:center}
.set-item-acts{display:flex;gap:4px;flex-shrink:0}
.set-item-acts button{width:30px;height:30px;border-radius:7px;border:none;display:grid;place-items:center;cursor:pointer;font-size:12px;transition:.2s}
.set-item-acts button:active{transform:scale(.9)}
.set-item-acts .save-btn{background:var(--success-glow);color:var(--success)}
.set-item-acts .del-btn{background:var(--danger-glow);color:var(--danger)}
.set-add-section{border-top:1px solid var(--glass-border);padding:14px 0 4px;margin-top:8px}
.set-add-title{font-size:12px;font-weight:700;color:var(--text3);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.set-add-title i{color:var(--primary)}
.set-add-row{display:flex;gap:6px;align-items:center}
.set-add-row input,.set-add-row select{flex:1;padding:8px 12px;border-radius:8px;border:1px solid var(--glass-border);background:var(--card);color:var(--text);font-size:13px;font-family:'Tajawal',sans-serif;outline:none;transition:.2s}
.set-add-row input:focus,.set-add-row select:focus{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-glow)}
.set-add-row input.small{width:70px;flex:none}
.set-add-row button{padding:8px 14px;border-radius:8px;border:none;background:var(--primary);color:#fff;cursor:pointer;font-size:13px;font-weight:700;white-space:nowrap;transition:.2s;font-family:'Tajawal',sans-serif}
.set-add-row button:active{transform:scale(.95)}
.point-item{display:flex;align-items:center;gap:4px;padding:4px 8px;margin-bottom:4px;background:var(--bg2);border-radius:6px;margin-right:24px}
.point-item span{flex:1;font-size:12px;color:var(--text2)}
.point-item button{width:24px;height:24px;border-radius:5px;border:none;background:var(--danger-glow);color:var(--danger);cursor:pointer;font-size:9px;display:grid;place-items:center}
.point-input-row{display:flex;gap:4px;align-items:center;margin-right:24px;margin-top:4px}
.point-input-row input{flex:1;padding:5px 8px;border-radius:6px;border:1px solid var(--glass-border);background:var(--card);color:var(--text);font-size:12px;font-family:'Tajawal',sans-serif;outline:none}
.point-input-row input:focus{border-color:var(--primary)}
.point-input-row button{padding:5px 10px;border-radius:6px;border:none;background:var(--primary);color:#fff;cursor:pointer;font-size:11px}

/* ================================================================
   RENEWAL MODAL - مودال التجديد مع إدارة الديون
   ================================================================ */
/* صندوق الدين المتراكم */
.debt-box{
  background:linear-gradient(135deg,rgba(212,160,23,.08),rgba(212,160,23,.02));
  border:1px solid rgba(212,160,23,.15);border-radius:14px;
  padding:16px;margin-bottom:16px
}
.debt-box-title{
  font-size:14px;font-weight:800;color:var(--warning);
  display:flex;align-items:center;gap:8px;margin-bottom:12px
}
.debt-grid{display:flex;flex-direction:column;gap:6px}
.debt-grid-item{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 12px;border-radius:8px;background:rgba(0,0,0,.15)
}
.debt-grid-item .dgi-label{font-size:12px;color:var(--text2)}
.debt-grid-item .dgi-value{font-size:15px;font-weight:800;color:var(--text)}
.debt-grid-item .dgi-value.warn{color:var(--warning)}
.debt-grid-item.total{background:rgba(212,160,23,.1);margin-top:2px}
.debt-grid-item.total .dgi-value{color:var(--warning);font-size:17px}
/* ===== خيارات التسديد - كروت احترافية ===== */
.debt-options{display:flex;flex-direction:column;gap:8px;margin:14px 0}
.debt-opt{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;border-radius:12px;
  border:1px solid var(--glass-border);
  background:var(--card);cursor:pointer;
  transition:all .3s cubic-bezier(.22,.68,0,1);
  position:relative;overflow:hidden
}
.debt-opt::before{
  content:'';position:absolute;top:0;right:0;
  width:4px;height:100%;border-radius:0 4px 4px 0;
  transition:.3s
}
.debt-opt[data-opt="0"]::before{background:var(--danger)}
.debt-opt[data-opt="1"]::before{background:var(--warning)}
.debt-opt[data-opt="2"]::before{background:var(--success)}
.debt-opt:hover{transform:translateX(-2px)}
.debt-opt[data-opt="0"]:hover{border-color:rgba(225,112,85,.2)}
.debt-opt[data-opt="1"]:hover{border-color:rgba(212,160,23,.2)}
.debt-opt[data-opt="2"]:hover{border-color:rgba(0,184,148,.2)}
.debt-opt.selected{
  transform:translateX(-2px);
  box-shadow:0 4px 16px rgba(0,0,0,.15)
}
.debt-opt[data-opt="0"].selected{border-color:rgba(225,112,85,.3);background:rgba(225,112,85,.04)}
.debt-opt[data-opt="1"].selected{border-color:rgba(212,160,23,.3);background:rgba(212,160,23,.04)}
.debt-opt[data-opt="2"].selected{border-color:rgba(0,184,148,.3);background:rgba(0,184,148,.04)}
/* الراديو المخصص */
.debt-opt input[type=radio]{
  appearance:none;-webkit-appearance:none;
  width:20px;height:20px;border-radius:50%;
  border:2px solid var(--text3);flex-shrink:0;
  position:relative;transition:.25s
}
.debt-opt input[type=radio]::after{
  content:'';position:absolute;inset:3px;border-radius:50%;
  background:var(--primary);opacity:0;transform:scale(0);
  transition:.25s cubic-bezier(.22,.68,0,1)
}
.debt-opt input[type=radio]:checked{border-color:var(--primary)}
.debt-opt input[type=radio]:checked::after{opacity:1;transform:scale(1)}
.debt-opt .dopt-content{flex:1;min-width:0}
.debt-opt .dopt-label{
  font-size:13px;font-weight:800;display:flex;
  align-items:center;gap:6px;margin-bottom:2px
}
.debt-opt .dopt-label i{font-size:13px}
.debt-opt[data-opt="0"] .dopt-label i{color:var(--danger)}
.debt-opt[data-opt="1"] .dopt-label i{color:var(--warning)}
.debt-opt[data-opt="2"] .dopt-label i{color:var(--success)}
.debt-opt .dopt-desc{font-size:11px;color:var(--text3);line-height:1.5}
/* أيقونة الاختيار على اليمين */
.debt-opt .dopt-check{
  width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;font-size:14px;
  flex-shrink:0;transition:.3s
}
.debt-opt.selected .dopt-check{transform:scale(1.1)}
.debt-opt[data-opt="0"].selected .dopt-check i{color:var(--danger)}
.debt-opt[data-opt="1"].selected .dopt-check i{color:var(--warning)}
.debt-opt[data-opt="2"].selected .dopt-check i{color:var(--success)}
/* ملخص التسديد */
.pay-summary{background:var(--bg2);border-radius:10px;padding:14px;margin-top:4px}
.pay-summary .ps-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:5px 0;font-size:12px;color:var(--text2)
}
.pay-summary .ps-row .ps-green{color:var(--success);font-weight:800;font-size:14px}
.pay-summary .ps-row .ps-red{color:var(--danger);font-weight:800;font-size:14px}
.pay-summary .ps-divider{height:1px;background:var(--glass-border);margin:6px 0}
.renew-summary{font-size:12px;color:var(--text2);line-height:1.7;margin-top:12px}

/* ================================================================
   SETTLE MODAL - ديون فردية مع اختيار
   ================================================================ */
.settle-debt-item{
  border:1px solid var(--glass-border);border-radius:12px;
  margin-bottom:6px;overflow:hidden;transition:.2s
}
.settle-debt-item:hover{border-color:var(--primary-light)}
.settle-debt-check{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;cursor:pointer;transition:.2s
}
.settle-debt-check:hover{background:var(--primary-light)}
.settle-debt-check input[type=checkbox]{
  appearance:none;-webkit-appearance:none;
  width:20px;height:20px;border-radius:6px;
  border:2px solid var(--text3);flex-shrink:0;
  position:relative;transition:.25s;cursor:pointer
}
.settle-debt-check input[type=checkbox]::after{
  content:'\f00c';font-family:'Font Awesome 6 Free';font-weight:900;
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:11px;color:#fff;opacity:0;transform:scale(0);
  transition:.25s cubic-bezier(.22,.68,0,1)
}
.settle-debt-check input[type=checkbox]:checked{
  background:var(--success);border-color:var(--success)
}
.settle-debt-check input[type=checkbox]:checked::after{opacity:1;transform:scale(1)}
.settle-debt-info{flex:1;min-width:0}
.settle-debt-note{font-size:13px;font-weight:700;color:var(--text);margin-bottom:1px}
.settle-debt-meta{font-size:10px;color:var(--text3)}
.settle-debt-amount{font-size:16px;font-weight:900;color:var(--danger);white-space:nowrap}
.settle-debt-amount.warn{color:var(--warning)}
.settle-custom-row{
  margin:12px 0;padding:14px;background:var(--bg2);
  border-radius:12px;border:1px solid var(--glass-border)
}
.settle-total{
  margin-top:8px;font-size:13px;font-weight:800;
  color:var(--success);text-align:center;
  padding:8px;background:var(--success-glow);border-radius:8px
}

/* ================================================================
   FREE ACTIVATION MODAL
   ================================================================ */
.free-day-input{display:flex;gap:10px;align-items:center;margin:14px 0}
.free-day-input label{font-size:13px;font-weight:700;color:var(--text2);white-space:nowrap}
.free-day-input input{flex:1;padding:10px 14px;border-radius:10px;border:1px solid var(--glass-border);background:var(--card);color:var(--text);font-size:16px;font-weight:800;text-align:center;font-family:'Tajawal',sans-serif;outline:none}
.free-day-input input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}

/* ================================================================
   مؤشر التحميل
   ================================================================ */
.loading-dots{display:flex;gap:4px;justify-content:center;padding:20px}
.loading-dots span{width:8px;height:8px;border-radius:50%;background:var(--primary);animation:dotPulse .8s infinite alternate}
.loading-dots span:nth-child(2){animation-delay:.2s}
.loading-dots span:nth-child(3){animation-delay:.4s}
@keyframes dotPulse{from{opacity:.2;transform:scale(.8)}to{opacity:1;transform:scale(1)}}

/* ================================================================
   DESKTOP & TABLET - تحسينات للشاشات الكبيرة
   ================================================================ */
@media(min-width:769px){
  .bnav{display:none!important}
  .side-overlay{display:none!important}
  .header .menu-btn{display:none!important}
  .stats{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));padding:12px 24px}
  .stat-card{padding:22px}
  .stat-card .num{font-size:28px}
  .stat-card:hover{transform:translateY(-2px);border-color:var(--primary-light);box-shadow:0 8px 32px var(--primary-glow)}
  .header{padding:14px 24px}
  .header .page-title{font-size:20px}
  .header .h-search{width:220px}
  .header .h-search input{font-size:13px;padding:7px 32px 7px 12px}
  .subs-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:10px;padding:0 24px 20px}
  .shead{padding:18px 24px 10px}
  .shead h2{font-size:18px}
  .quick-acts{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));padding:10px 24px}
  .qa{padding:20px 14px}
  .qa:hover{transform:translateY(-2px);border-color:var(--primary-light);box-shadow:0 8px 24px var(--primary-glow)}
  .sub-card:hover{transform:translateY(-2px)}
  .search-bar{padding:10px 24px}
  .filter-row{padding:0 24px 12px}
  .fin-grid-2x2{padding:10px 24px;gap:16px}
  .fin-square-card .fsc-num{font-size:26px}
  .fin-square-card .fsc-icon{width:48px;height:48px;font-size:22px}
  .fin-acts{padding:10px 24px}
  .fin-list{padding:0 24px 20px}
  .form-wrap{padding:10px 24px 24px}
  .detail-card{margin:10px 24px;padding:22px}
  .detail-actions{margin:10px 24px 24px;grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
  .whatsapp-templates{padding:10px 24px 20px}
  .wa-preview{margin:10px 24px;padding:20px}
  .wa-send-btn{width:calc(100% - 48px);margin:10px 24px}
  .archive-list{padding:0 24px 20px}
  .notif-list{padding:10px 24px 24px}
  .settings-list{padding:10px 24px 24px}
  .report-cards{padding:10px 24px}
  .modal{max-width:680px;border-radius:var(--radius-xl);bottom:auto;top:50%;transform:translateX(-50%) translateY(-50%);padding:28px;max-height:80vh;opacity:0;pointer-events:none;transition:opacity .3s,transform .5s cubic-bezier(.22,.68,0,1)}
  .modal.open{transform:translateX(-50%) translateY(-50%);opacity:1;pointer-events:auto}
  .modal-overlay.show{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  .filter-panel{margin:0 24px 14px;padding:18px}
  .fin-item{padding:16px;border-radius:14px}
  .fin-item .fleft .fdesc{font-size:14px}
  .fin-item .famount{font-size:18px}
}
@media(min-width:1024px){
  .stats{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
  .subs-list{grid-template-columns:repeat(auto-fill,minmax(380px,1fr))}
  .stat-card{padding:24px}
  .stat-card .num{font-size:32px}
  .quick-acts{grid-template-columns:repeat(6,1fr)}
  .detail-actions{grid-template-columns:repeat(6,1fr)}
}
@media(min-width:1400px){
  .subs-list{grid-template-columns:repeat(3,1fr)}
}

body.modal-open{overflow:hidden;position:fixed;width:100%}

/* ================================================================
   FILTER PANEL - لوحة الفلترة المتقدمة
   ================================================================ */
.filter-panel{border-radius:var(--radius);margin:0 20px 12px;padding:14px;border:1px solid var(--glass-border);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.filter-panel .fp-row{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin-bottom:8px}
.filter-panel .fp-row:last-child{margin-bottom:0}
.filter-panel .fp-group{flex:1;min-width:130px}
.filter-panel .fp-group label{display:block;font-size:11px;color:var(--text3);margin-bottom:3px;font-weight:600}
.filter-panel .fp-group input,.filter-panel .fp-group select{
  width:100%;padding:8px 10px;border-radius:8px;border:1px solid var(--glass-border);
  background:var(--bg2);color:var(--text);font-size:12px;font-family:'Tajawal',sans-serif;outline:none;transition:.2s
}
.filter-panel .fp-group input:focus,.filter-panel .fp-group select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}
.filter-panel .fp-group select{cursor:pointer}
.search-btn{
  padding:8px 20px;border-radius:8px;border:none;background:var(--primary);color:#fff;
  font-size:13px;font-weight:700;cursor:pointer;transition:.2s;font-family:'Tajawal',sans-serif;
  display:flex;align-items:center;gap:6px;white-space:nowrap;height:38px
}
.search-btn:active{transform:scale(.95);background:var(--primary);filter:brightness(1.2)}
.fp-chips{display:flex;gap:5px;flex-wrap:wrap}
.fp-chip{
  padding:5px 12px;border-radius:20px;background:var(--bg2);border:1px solid var(--glass-border);
  color:var(--text2);font-size:11px;font-weight:600;cursor:pointer;transition:.2s;white-space:nowrap
}
.fp-chip:active{transform:scale(.95)}
.fp-chip.active{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 2px 10px var(--primary-glow)}

/* ================================================================
   أنماط التصميم (5 أنماط)
   ================================================================ */

/* ===== شاشة التحميل عند تغيير النمط ===== */
.style-loader {
  position:fixed;inset:0;z-index:999999;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;transition:opacity .35s;pointer-events:none
}
.style-loader.show{opacity:1;pointer-events:all}
.style-loader .sl-spinner{
  width:48px;height:48px;
  border:4px solid rgba(255,255,255,.12);
  border-top-color:var(--primary);border-radius:50%;
  animation:sl-spin .85s linear infinite
}
@keyframes sl-spin{to{transform:rotate(360deg)}}

/* ================================================================
   1. نيو مورفيزم الكلاسيكي (Neumorphism)
   ظلال ناعمة خارجية/داخلية، بدون حدود، أسطح متجانسة
   ================================================================ */
[data-style="neo"]{--bg:#1a1a2e;--bg2:#16213e;--card:#1a1a2e;--card-hover:#1f1f38;--text:#e0e0e0;--text2:#a0a0b0;--text3:#7a7a8a;--glass-border:transparent;--glass-bg:#1a1a2e;--shadow-lg:9px 9px 16px #0f0f1f,-9px -9px 16px #252545;--radius:20px;--success:#00b894;--danger:#e17055}
[data-style="neo"][data-theme="light"]{--bg:#e0e5ec;--bg2:#d1d9e6;--card:#e0e5ec;--card-hover:#d5dce8;--text:#2d3436;--text2:#636e72;--text3:#8a8a9a;--glass-border:transparent;--glass-bg:#e0e5ec;--shadow-lg:9px 9px 16px #b8bec9,-9px -9px 16px #fff;--radius:20px;--success:#00b894;--danger:#e17055}
[data-style="neo"] .card,
[data-style="neo"] .detail-card,
[data-style="neo"] .set-card,
[data-style="neo"] .stat-card,
[data-style="neo"] .ks-card,
[data-style="neo"] .debt-box,
[data-style="neo"] .renew-summary,
[data-style="neo"] .pay-summary,
[data-style="neo"] .settle-debt-item,
[data-style="neo"] .form-wrap,
[data-style="neo"] .sub-item,
[data-style="neo"] .notif-item,
[data-style="neo"] .msg-item,
[data-style="neo"] .qa-card,
[data-style="neo"] .wallet-card,
[data-style="neo"] .filter-panel,
[data-style="neo"] .fp-chip,
[data-style="neo"] .detail-actions button,
[data-style="neo"] .toast,
[data-style="neo"] .shead,
[data-style="neo"] .set-item,
[data-style="neo"] .add-sub-step,
[data-style="neo"] .fin-card,
[data-style="neo"] .rep-card{
  box-shadow:var(--shadow-lg)!important;border:none!important;background:var(--card)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important
}
[data-style="neo"] .sidebar{
  background:var(--bg2)!important;
  box-shadow:4px 0 20px #0f0f1f,-2px 0 10px #252545;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important
}
[data-style="neo"] .header{
  background:var(--bg2)!important;
  box-shadow:0 4px 16px #0f0f1f,0 -2px 8px #252545;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important
}
[data-style="neo"] .side-nav a{
  background:transparent!important;
  box-shadow:2px 2px 4px #0f0f1f,-2px -2px 4px #252545;
  border:none!important;margin:2px 0
}
[data-style="neo"] .side-nav .router-link-active,
[data-style="neo"] .side-nav a.active{
  box-shadow:inset 2px 2px 4px #0f0f1f,inset -2px -2px 4px #252545!important;
  color:var(--primary)!important;background:transparent!important
}
[data-style="neo"] .side-nav .router-link-active i,
[data-style="neo"] .side-nav a.active i{color:var(--primary)!important}
[data-style="neo"] .side-user{
  box-shadow:inset 2px 2px 4px #0f0f1f,inset -2px -2px 4px #252545;
  border:none!important
}
[data-style="neo"] .bnav{
  background:var(--bg2)!important;
  box-shadow:0 -4px 16px #0f0f1f,0 2px 8px #252545;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important
}
[data-style="neo"] .bnav-item{
  background:transparent!important;border:none!important;
  box-shadow:none!important
}
[data-style="neo"] .bnav-item.active{
  box-shadow:inset 2px 2px 4px #0f0f1f,inset -2px -2px 4px #252545!important;
  color:var(--primary)!important;background:transparent!important
}
[data-style="neo"] .bnav-item.active i{color:var(--primary)!important}
[data-style="neo"][data-theme="light"] .side-nav a{box-shadow:2px 2px 4px #b8bec9,-2px -2px 4px #fff}
[data-style="neo"][data-theme="light"] .side-nav .router-link-active,
[data-style="neo"][data-theme="light"] .side-nav a.active{box-shadow:inset 2px 2px 4px #b8bec9,inset -2px -2px 4px #fff!important}
[data-style="neo"][data-theme="light"] .side-user{box-shadow:inset 2px 2px 4px #b8bec9,inset -2px -2px 4px #fff}
[data-style="neo"][data-theme="light"] .bnav{box-shadow:0 -4px 16px #b8bec9,0 2px 8px #fff}
[data-style="neo"][data-theme="light"] .bnav-item.active{box-shadow:inset 2px 2px 4px #b8bec9,inset -2px -2px 4px #fff!important}
[data-style="neo"] .h-search input{
  background:var(--card)!important;box-shadow:inset 3px 3px 6px #0f0f1f,inset -3px -3px 6px #252545;
  border:none!important
}
[data-style="neo"] input:not([type=checkbox]):not([type=radio]),
[data-style="neo"] select,
[data-style="neo"] textarea{
  background:var(--card)!important;box-shadow:inset 3px 3px 6px #0f0f1f,inset -3px -3px 6px #252545;
  border:none!important
}
[data-style="neo"][data-theme="light"] .sidebar{box-shadow:4px 0 20px #b8bec9,-2px 0 10px #fff}
[data-style="neo"][data-theme="light"] .header{box-shadow:0 4px 16px #b8bec9,0 -2px 8px #fff}
[data-style="neo"][data-theme="light"] .h-search input{box-shadow:inset 3px 3px 6px #b8bec9,inset -3px -3px 6px #fff}
[data-style="neo"][data-theme="light"] input:not([type=checkbox]):not([type=radio]),
[data-style="neo"][data-theme="light"] select,
[data-style="neo"][data-theme="light"] textarea{box-shadow:inset 3px 3px 6px #b8bec9,inset -3px -3px 6px #fff}
[data-style="neo"] .modal{
  background:var(--card)!important;box-shadow:var(--shadow-lg)!important;border:none!important
}
[data-style="neo"] .modal-overlay{background:rgba(0,0,0,.6);backdrop-filter:none!important}
[data-style="neo"] .dbody .row{border-color:var(--text3)!important}
[data-style="neo"] .form-actions .primary,
[data-style="neo"] button.primary{
  box-shadow:3px 3px 6px #0f0f1f,-3px -3px 6px #252545;border:none!important;background:var(--primary)!important
}
[data-style="neo"] .form-actions .success,
[data-style="neo"] button.success{
  box-shadow:3px 3px 6px #0f0f1f,-3px -3px 6px #252545;border:none!important
}
[data-style="neo"][data-theme="light"] .form-actions .primary,
[data-style="neo"][data-theme="light"] button.primary{box-shadow:3px 3px 6px #b8bec9,-3px -3px 6px #fff}
[data-style="neo"][data-theme="light"] .form-actions .success,
[data-style="neo"][data-theme="light"] button.success{box-shadow:3px 3px 6px #b8bec9,-3px -3px 6px #fff}
[data-style="neo"] .sbadge{box-shadow:none!important}
[data-style="neo"] .as-paid-btn{box-shadow:2px 2px 4px #0f0f1f,-2px -2px 4px #252545;border:none!important}
[data-style="neo"][data-theme="light"] .as-paid-btn{box-shadow:2px 2px 4px #b8bec9,-2px -2px 4px #fff}
[data-style="neo"] .as-paid-btn.active{box-shadow:inset 2px 2px 4px #0f0f1f,inset -2px -2px 4px #252545}
[data-style="neo"][data-theme="light"] .as-paid-btn.active{box-shadow:inset 2px 2px 4px #b8bec9,inset -2px -2px 4px #fff}

/* ================================================================
   2. سكيومورفيزم الحديث (Skeuomorphism)
   تدرجات لونية 3D، حواف بارزة/غائرة، ملمس واقعي
   ================================================================ */
[data-style="skeuo"]{--bg:#2a1f3d;--bg2:#201730;--card:linear-gradient(145deg,#362a50,#2a1f3d);--card-hover:#3d2f5a;--text:#f0e8ff;--text2:#b8a8d8;--text3:#8a7aa8;--glass-border:#4a3a6a;--glass-bg:rgba(255,255,255,.03);--shadow-lg:0 10px 30px rgba(0,0,0,.6),0 4px 8px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.08);--radius:8px;--success:#2ecc71;--danger:#e74c3c}
[data-style="skeuo"][data-theme="light"]{--bg:#e8dff0;--bg2:#ddd4e8;--card:linear-gradient(145deg,#f5f0fa,#e8dff0);--card-hover:#f0e8f5;--text:#2a1f3d;--text2:#6a5a8a;--text3:#9a8aaa;--glass-border:#c8b8d8;--glass-bg:rgba(255,255,255,.5);--shadow-lg:0 8px 24px rgba(0,0,0,.15),0 2px 4px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.9);--radius:8px;--success:#27ae60;--danger:#c0392b}
[data-style="skeuo"] .card,
[data-style="skeuo"] .detail-card,
[data-style="skeuo"] .set-card,
[data-style="skeuo"] .stat-card,
[data-style="skeuo"] .ks-card,
[data-style="skeuo"] .debt-box,
[data-style="skeuo"] .renew-summary,
[data-style="skeuo"] .pay-summary,
[data-style="skeuo"] .settle-debt-item,
[data-style="skeuo"] .form-wrap,
[data-style="skeuo"] .sub-item,
[data-style="skeuo"] .notif-item,
[data-style="skeuo"] .msg-item,
[data-style="skeuo"] .qa-card,
[data-style="skeuo"] .wallet-card,
[data-style="skeuo"] .filter-panel,
[data-style="skeuo"] .fp-chip,
[data-style="skeuo"] .detail-actions button,
[data-style="skeuo"] .toast,
[data-style="skeuo"] .shead,
[data-style="skeuo"] .set-item,
[data-style="skeuo"] .add-sub-step,
[data-style="skeuo"] .fin-card,
[data-style="skeuo"] .rep-card{
  box-shadow:var(--shadow-lg)!important;
  border:1px solid var(--glass-border)!important;
  border-top-color:rgba(255,255,255,.08)!important;
  border-bottom-color:rgba(0,0,0,.2)!important;
  background:var(--card)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important
}
[data-style="skeuo"] .sidebar{
  background:linear-gradient(180deg,#362a50,#201730)!important;
  box-shadow:2px 0 20px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important
}
[data-style="skeuo"] .header{
  background:linear-gradient(90deg,#362a50,#201730)!important;
  box-shadow:0 4px 20px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important
}
[data-style="skeuo"] .side-nav a{
  background:linear-gradient(145deg,#3d2f5a,#2a1f3d)!important;
  border:1px solid var(--glass-border)!important;
  border-top-color:rgba(255,255,255,.06)!important;
  box-shadow:0 2px 8px rgba(0,0,0,.3)!important
}
[data-style="skeuo"] .side-nav .router-link-active,
[data-style="skeuo"] .side-nav a.active{
  color:var(--primary)!important;background:transparent!important;
  border-color:var(--primary)!important
}
[data-style="skeuo"] .side-nav .router-link-active i,
[data-style="skeuo"] .side-nav a.active i{color:var(--primary)!important}
[data-style="skeuo"] .side-user{
  background:var(--bg2)!important;
  border:1px solid var(--glass-border)!important;
  border-top-color:rgba(255,255,255,.06)!important
}
[data-style="skeuo"] .bnav{
  background:linear-gradient(180deg,#362a50,#201730)!important;
  box-shadow:0 -4px 20px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important
}
[data-style="skeuo"] .bnav-item{
  background:transparent!important;box-shadow:none!important
}
[data-style="skeuo"] .bnav-item.active{
  color:var(--primary)!important;background:transparent!important;
  box-shadow:none!important;border-color:transparent!important
}
[data-style="skeuo"] .bnav-item.active i{color:var(--primary)!important}
[data-style="skeuo"][data-theme="light"] .side-nav a{background:linear-gradient(145deg,#f5f0fa,#ddd4e8)!important}
[data-style="skeuo"][data-theme="light"] .side-nav .router-link-active,
[data-style="skeuo"][data-theme="light"] .side-nav a.active{background:linear-gradient(180deg,var(--primary),var(--primary-end))!important}
[data-style="skeuo"][data-theme="light"] .side-user{background:#ddd4e8!important}
[data-style="skeuo"][data-theme="light"] .bnav{background:linear-gradient(180deg,#f5f0fa,#ddd4e8)!important}
[data-style="skeuo"][data-theme="light"] .sidebar{background:linear-gradient(180deg,#f5f0fa,#ddd4e8)!important}
[data-style="skeuo"][data-theme="light"] .header{background:linear-gradient(90deg,#f5f0fa,#ddd4e8)!important}
[data-style="skeuo"] input:not([type=checkbox]):not([type=radio]),
[data-style="skeuo"] select,
[data-style="skeuo"] textarea{
  background:var(--bg2)!important;box-shadow:inset 0 2px 6px rgba(0,0,0,.3),0 1px 0 rgba(255,255,255,.06);
  border:1px solid var(--glass-border)!important;border-top-color:rgba(0,0,0,.3)!important
}
[data-style="skeuo"] .modal{
  background:var(--bg2)!important;
  box-shadow:0 20px 60px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06);
  border:1px solid var(--glass-border)!important;border-top-color:rgba(255,255,255,.08)!important
}
[data-style="skeuo"] .modal-overlay{background:rgba(0,0,0,.75);backdrop-filter:none!important}
[data-style="skeuo"] .dbody .row{border-color:var(--glass-border)!important}
[data-style="skeuo"] .form-actions .primary,
[data-style="skeuo"] button.primary{
  background:linear-gradient(180deg,#7c6ced,#5a4acd)!important;
  box-shadow:0 4px 12px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.15);
  border:1px solid #4a3acd!important;border-top-color:rgba(255,255,255,.1)!important
}
[data-style="skeuo"] .form-actions .success,
[data-style="skeuo"] button.success{
  background:linear-gradient(180deg,#2ecc71,#27ae60)!important;
  box-shadow:0 4px 12px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.15);
  border:1px solid #1e9e50!important;border-top-color:rgba(255,255,255,.1)!important
}
[data-style="skeuo"] .form-actions button:active,
[data-style="skeuo"] button:active{transform:translateY(1px);box-shadow:0 2px 6px rgba(0,0,0,.4)!important}
[data-style="skeuo"] .sbadge{box-shadow:none!important}
[data-style="skeuo"] .as-paid-btn{
  background:var(--bg)!important;box-shadow:0 3px 8px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.06);
  border:1px solid var(--glass-border)!important
}
[data-style="skeuo"] .as-paid-btn.active{
  background:var(--primary)!important;box-shadow:inset 0 2px 4px rgba(0,0,0,.3);
  border-color:var(--primary)!important
}

/* ================================================================
   5. التصميم السوبر (SuperApp Style)
   ألوان كحلي وذهبي، كروت بيضاء، هدر كبير
   ================================================================ */
[data-style="super"]{
  --bg:#0f172a;--bg2:#1e293b;--card:#1e293b;--card-hover:#334155;
  --text:#f1f5f9;--text2:#94a3b8;--text3:#64748b;
  --glass-border:#334155;--glass-bg:#1e293b;
  --shadow-lg:0 10px 30px rgba(0,0,0,.3),0 4px 10px rgba(0,0,0,.15);
  --radius:24px;--radius-xl:28px;
  --header-bg:#001a3d;--accent-gold:#D4AF37;--header-h:110px;
  --success:#10b981;--danger:#ef4444
}
[data-style="super"][data-theme="light"]{
  --bg:#f8fafc;--bg2:#f1f5f9;--card:#fff;--card-hover:#f8fafc;
  --text:#1e293b;--text2:#64748b;--text3:#94a3b8;
  --glass-border:#e2e8f0;--glass-bg:#fff;
  --shadow-lg:0 10px 30px rgba(0,0,0,.08),0 4px 10px rgba(0,0,0,.04);
  --radius:24px;--radius-xl:28px;
  --header-bg:#002D62;--accent-gold:#D4AF37;--header-h:110px;
  --success:#10b981;--danger:#ef4444
}
[data-style="super"] .header{
  background:var(--header-bg)!important;height:var(--header-h)!important;
  border-radius:0 0 2.5rem 2.5rem!important;
  padding:8px 20px 6px!important;
  box-shadow:0 4px 20px rgba(0,0,0,.3)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  border-bottom:none!important;
  position:fixed!important;top:0!important;left:0!important;right:0!important;z-index:100!important;
  flex-wrap:nowrap!important;align-items:center!important;gap:8px!important
}
[data-style="super"] .header .page-title{display:none!important}
[data-style="super"] .header .page-title i{color:#D4AF37!important;font-size:24px!important}
[data-style="super"] .header .menu-btn{order:0!important}
[data-style="super"] .header .h-actions{order:2!important}
[data-style="super"] .header .h-actions button{background:rgba(255,255,255,.1)!important;border-color:rgba(255,255,255,.15)!important;color:#fff!important}
[data-style="super"] .header .h-actions button:active{background:#D4AF37!important;color:#001a3d!important}
[data-style="super"] .header .h-actions button .badge{border-color:var(--bg)!important}
[data-style="super"] .header .h-search{order:1!important;flex:1!important;min-width:0!important;max-width:500px!important;width:auto!important;padding:0 4px!important}
[data-style="super"] .header .h-search input{border-radius:1.5rem!important;border:none!important;box-shadow:0 2px 8px rgba(0,0,0,.1)!important;background:var(--card)!important;color:var(--text)!important;width:100%!important;padding:10px 16px!important;font-size:14px!important}
[data-style="super"] .stats{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;padding:8px 20px}
[data-style="super"] .stat-card{
  background:var(--card)!important;border:1px solid var(--glass-border)!important;
  border-radius:1.5rem!important;padding:18px 20px!important;
  box-shadow:var(--shadow-lg)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important
}
[data-style="super"] .stat-card:hover{border-color:var(--text3)!important}
[data-style="super"] .stat-card .num{font-size:26px!important;color:var(--primary)!important}
[data-style="super"] .stat-card .label{font-size:13px!important;color:var(--text2)!important}
[data-style="super"] .stat-card .top .icon{border-radius:1rem!important;width:48px!important;height:48px!important;font-size:20px!important}
[data-style="super"] .stat-card .trend{font-size:11px!important}
[data-style="super"] .qa{
  background:var(--card)!important;border:1px solid var(--glass-border)!important;
  border-radius:1.5rem!important;padding:18px 14px!important;
  box-shadow:var(--shadow-lg)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important
}
[data-style="super"] .qa:hover{border-color:var(--text3)!important}
[data-style="super"] .sub-card{
  background:var(--card)!important;border:1px solid var(--glass-border)!important;
  border-radius:1.5rem!important;padding:14px 18px!important;
  box-shadow:0 2px 8px rgba(0,0,0,.04)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important
}
[data-style="super"] .sub-card:hover{border-color:var(--text3)!important}
[data-style="super"] .bnav{
  background:var(--card)!important;border-top:1px solid var(--glass-border)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  box-shadow:none!important
}
[data-style="super"] .bnav-item{color:var(--text3)!important}
[data-style="super"] .bnav-item.active{color:var(--primary)!important;background:transparent!important}
[data-style="super"] .bnav-item i{font-size:22px!important}
[data-style="super"] .sidebar{background:var(--card)!important;border-left:1px solid var(--glass-border)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
[data-style="super"] .side-nav a{color:var(--text2)!important;border-radius:1rem!important;margin:2px 6px!important}
[data-style="super"] .side-nav a:hover{background:var(--bg2)!important;color:var(--primary)!important}
[data-style="super"] .side-nav .router-link-active,
[data-style="super"] .side-nav a.active{color:var(--primary)!important;background:transparent!important;box-shadow:none!important}
[data-style="super"] .side-nav .router-link-active i,
[data-style="super"] .side-nav a.active i{color:#D4AF37!important}
[data-style="super"] .side-user{background:var(--bg)!important;border:1px solid var(--glass-border)!important;border-radius:1rem!important;margin:6px!important}
[data-style="super"] .modal{
  background:var(--card)!important;border-radius:2rem 2rem 0 0!important;
  box-shadow:0 -8px 40px rgba(0,0,0,.3)!important;
  border-top:1px solid var(--glass-border)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important
}
[data-style="super"] .modal .mhead h3{color:var(--primary)!important}
[data-style="super"] .modal .mhead h3 i{color:#D4AF37!important}
[data-style="super"] .modal .mhead button{color:var(--text3)!important}
[data-style="super"] .modal-overlay{background:rgba(0,0,0,.5)!important;backdrop-filter:none!important}
[data-style="super"] input:not([type=checkbox]):not([type=radio]),
[data-style="super"] select,
[data-style="super"] textarea{
  background:var(--card)!important;border:1px solid var(--glass-border)!important;
  border-radius:1.5rem!important;padding:10px 16px!important;
  box-shadow:none!important
}
[data-style="super"] input:focus,
[data-style="super"] select:focus,
[data-style="super"] textarea:focus{border-color:var(--primary)!important;box-shadow:0 0 0 3px var(--primary-glow)!important}
[data-style="super"] .form-actions .primary,
[data-style="super"] button.primary{
  background:var(--primary)!important;border:none!important;
  border-radius:1.5rem!important;box-shadow:0 4px 12px var(--primary-glow)!important
}
[data-style="super"] .form-actions .success{background:var(--success)!important}
[data-style="super"] .detail-card{background:var(--card)!important;border:1px solid var(--glass-border)!important;border-radius:1.5rem!important;backdrop-filter:none!important}
[data-style="super"] .set-card{background:var(--card)!important;border:1px solid var(--glass-border)!important;border-radius:1.5rem!important;backdrop-filter:none!important}
[data-style="super"] .set-card:hover{border-color:var(--text3)!important}
[data-style="super"] .search-bar{display:none!important}
[data-style="super"] .shead h2{color:var(--primary)!important}
[data-style="super"] .shead h2 i{color:#D4AF37!important}
[data-style="super"] .shead .filter-btn{background:var(--card)!important;border:1px solid var(--glass-border)!important;border-radius:1rem!important;color:var(--text2)!important}
[data-style="super"] .shead .filter-btn:active{background:var(--primary)!important;color:#fff!important}
[data-style="super"] .dbody .row{border-color:var(--glass-border)!important}
[data-style="super"] .sbadge{border-radius:1rem!important;font-size:11px!important}
[data-style="super"] .toast{border-radius:1.5rem!important;box-shadow:0 8px 24px rgba(0,0,0,.15)!important}

/* ===== Pull to Refresh ===== */
.pull-refresh-indicator{
  position:fixed;top:0;left:50%;transform:translateX(-50%) translateY(-60px);
  z-index:9998;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:12px 24px;border-radius:0 0 16px 16px;
  background:var(--card);border:1px solid var(--glass-border);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 4px 16px rgba(0,0,0,.2);
  transition:transform .3s ease;opacity:0;
  font-size:13px;color:var(--text2);font-weight:600;
}
.pull-refresh-indicator.show{
  transform:translateX(-50%) translateY(0);opacity:1;
}
.pull-refresh-indicator.refreshing{
  transform:translateX(-50%) translateY(0);opacity:1;
}
.pr-spinner{
  width:32px;height:32px;display:grid;place-items:center;
  color:var(--primary);font-size:18px;
}
.pr-spinner.spin{
  animation:pullSpin .8s linear infinite;
}
@keyframes pullSpin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}