/* =========================================
   1. Reset & Global Variables (Dark Sports)
========================================= */
* {
  box-sizing: border-box;
}

:root {
  /* ألوان Dark Sports Premium */
  --bg-main: #06172F;        /* خلفية التطبيق */
  --bg-dark: #041125;        /* خلفيات الأشرطة والنتائج */
  --card-bg: #091A32;        /* البطاقات الرئيسية */
  --card-inner: #0A213C;     /* البطاقات الداخلية (مثل مباريات اليوم) */
  
  --primary-blue: #1677FF;
  --bright-blue: #238BFF;
  --success-green: #32D583;
  --premium-gold: #F5B942;
  --danger-red: #FF4D4D;
  
  --text-primary: #F5F7FA;
  --text-secondary: #8FA3BA;
  
  --card-border: rgba(49, 84, 117, 0.4);
  
  /* حواف دائرية */
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 8px;
}

body {
  margin: 0;
  font-family: 'Tajawal', Arial, sans-serif;
  background-color: var(--bg-main);
  color: var(--text-primary);
  padding-bottom: 80px; /* مساحة لشريط التنقل السفلي */
}

/* تنسيق زر الداكن/الفاتح */
.theme-toggle-btn {
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  padding: 5px;
  transition: transform 0.3s ease;
}

.theme-toggle-btn:active {
  transform: scale(0.8);
}
/* =========================================
   Light Mode Theme (تصميم فاتح أنيق)
========================================= */
body.light-mode {
  /* خلفيات بدرجات الأبيض العاجي والكريمي */
  --bg-main: #FAF8F5; 
  --bg-dark: #EAE6DF; 
  --card-bg: #FFFFFF; 
  --card-inner: #F4F1EA; 
  
  /* اللون الأساسي للتفاعل (أزرق سمائي) */
  --primary-blue: #29B6F6; 
  
  /* نصوص بدرجات القهوائي/الجوزي لتباين مريح وفخم */
  --text-primary: #3E2723; 
  --text-secondary: #8D6E63; 
  
  /* حدود ناعمة */
  --card-border: rgba(141, 110, 99, 0.2); 
}

/* تحسينات إضافية للوضع الفاتح لزيادة الجمالية */
body.light-mode .tabs {
  box-shadow: 0 -4px 20px rgba(141, 110, 99, 0.1) !important;
}

body.light-mode .premium-card {
  box-shadow: 0 8px 24px rgba(141, 110, 99, 0.08);
}


/* =========================================
   2. Layout & Typography
========================================= */
.container {
  max-width: 1050px;
  margin: 0 auto;
  padding: 15px 15px 20px;
  position: relative;
  z-index: 2;
}

.section { display: none; }
.active-section { display: block; animation: fadeIn 0.3s ease; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.section-header { margin: 10px 0 20px; }
.section-header h2 { margin: 0; font-size: 22px; color: var(--text-primary); }
.section-header p { margin: 6px 0 0; color: var(--text-secondary); font-size: 13px; }
.sub-title { margin: 18px 0 12px; font-size: 18px; color: var(--text-primary); }

/* =========================================
   3. Top Header (Logo & Title)
========================================= */
.top-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background-color: var(--bg-main);
  border-bottom: 1px solid var(--card-border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-titles { text-align: center; }
.header-titles h1 { font-size: 1.15rem; margin: 0; color: var(--text-primary); }
.header-titles p { font-size: 0.8rem; margin: 4px 0 0; color: var(--text-secondary); }
.header-logo img { width: 38px; height: 38px; border-radius: 50%; object-fit: contain; }
.settings-btn { background: none; border: none; font-size: 1.4rem; color: var(--text-secondary); cursor: pointer; }

/* =========================================
   4. Premium Cards (Home Screen UI)
========================================= */
.premium-card {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.inner-card {
  background-color: var(--card-inner);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-top: 12px;
}

/* بطاقة المباراة القادمة (Hero) */
.hero-tag {
  background: var(--primary-blue);
  color: white;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  display: inline-block;
  margin-bottom: 15px;
}
.match-teams {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.team-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 33%;
  font-size: 0.9rem;
  text-align: center;
  gap: 8px;
}
.team-logo-bg {
  background: var(--card-inner);
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--card-border);
}
.match-center { text-align: center; width: 33%; }
.match-date { font-size: 0.75rem; color: var(--text-secondary); margin: 0 0 4px; }
.match-time { font-size: 1.4rem; font-weight: bold; margin: 0 0 6px; color: var(--text-primary); }
.vs-badge { background: var(--bg-dark); padding: 3px 10px; border-radius: 12px; font-size: 0.75rem; color: var(--text-secondary); border: 1px solid var(--card-border); }

/* رؤوس أقسام الشاشة الرئيسية */
.card-header { display: flex; justify-content: space-between; align-items: center; }
.header-title { font-weight: bold; font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.dot-indicator { width: 8px; height: 8px; border-radius: 50%; }
.dot-indicator.green { background-color: var(--success-green); }
.score-icon { background: var(--primary-blue); color: white; padding: 3px 6px; border-radius: 4px; font-size: 0.75rem; }
.view-all { background: none; border: none; color: var(--text-secondary); font-size: 0.85rem; cursor: pointer; }
/* =========================================
   Result Rows (تعديل تصميم آخر النتائج)
========================================= */
.result-row {
  display: grid;
  grid-template-columns: 1fr auto 70px auto 1fr; /* هذا السطر يضغط العناصر نحو المنتصف */
  align-items: center;
  gap: 12px; /* المسافة بين الأسماء والشعارات والأرقام */
  margin-bottom: 12px;
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 14px 10px;
}

.result-row:last-child {
  margin-bottom: 0;
}

/* قسم اسم الفريق */
.result-row .team-name {
  font-size: 0.95rem;
  font-weight: bold;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* سحب الأسماء نحو المنتصف لتقترب من الشعارات */
.result-row .team-name.right { text-align: left; }
.result-row .team-name.left { text-align: right; }

/* قسم الشعار داخل النتائج (إزالة الخلفية والحدود) */
.result-row .mini-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.result-row .mini-logo img {
  width: 34px !important;
  height: 34px !important;
  object-fit: contain;
  background-color: transparent !important; /* إزالة خلفية الشعار */
  border: none !important; /* إزالة حدود الشعار */
  box-shadow: none !important; /* إزالة أي ظل */
  padding: 0 !important;
}
/* =========================================
   تعديل وتصحيح قسم النتيجة (المنتصف)
========================================= */
.result-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: transparent !important; /* التأكيد على إزالة الخلفية */
  box-shadow: none !important;
  padding: 0 !important;
  min-width: 85px; /* إعطاء مساحة عرض كافية للأرقام لكي لا تتكسر */
}

.result-center .score {
  background: transparent !important; /* إزالة المربع الملون من الرقم */
  box-shadow: none !important; /* إزالة الظل الذي يشكل مربعاً */
  color: var(--text-primary) !important;
  font-weight: 900 !important;
  font-size: 1.4rem !important; /* تكبير الرقم ليكون أوضح */
  letter-spacing: 2px !important;
  padding: 0 !important;
  margin-bottom: 6px !important;
  white-space: nowrap !important; /* يمنع الأرقام من النزول لسطر جديد */
  direction: ltr !important; /* يجعل الترتيب (رقم - رقم) من اليسار لليمين */
  display: block !important;
}

.result-center .status {
  font-size: 0.7rem !important;
  color: var(--text-secondary) !important;
  background: var(--card-inner) !important;
  padding: 2px 10px !important;
  border-radius: 12px !important;
  white-space: nowrap !important;
}



/* الحالات الفارغة */
.empty-state { text-align: center; color: var(--text-secondary); padding: 20px 10px; }
.empty-icon { font-size: 2.5rem; opacity: 0.4; margin-bottom: 10px; }
.empty-state h3 { font-size: 0.95rem; margin: 0 0 5px; color: var(--text-primary); }
.empty-state p { font-size: 0.8rem; margin: 0; }

/* =========================================
   5. Buttons
========================================= */
.primary-btn {
  background-color: transparent;
  border: 1px solid var(--primary-blue);
  color: var(--primary-blue);
  width: 100%;
  padding: 12px;
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  margin-top: 10px;
  cursor: pointer;
  transition: 0.3s;
}
.primary-btn:hover { background-color: rgba(22, 119, 255, 0.1); }

.secondary-btn {
  background-color: var(--card-inner);
  border: 1px solid var(--card-border);
  color: var(--text-primary);
  width: 100%;
  padding: 12px;
  border-radius: var(--radius-md);
  margin-top: 15px;
  font-size: 0.9rem;
  cursor: pointer;
}

/* =========================================
   6. Tables (Standings & Stats)
========================================= */
.table-responsive { overflow-x: hidden; width: 100%; }

.premium-table { 
  width: 100%; 
  border-collapse: collapse; 
  font-size: 0.85rem; 
  table-layout: fixed;
}
.premium-table th { 
  color: var(--text-secondary); 
  font-weight: normal; 
  padding: 10px 4px; 
  border-bottom: 1px solid var(--card-border); 
  text-align: center; 
}
.premium-table td { 
  padding: 10px 4px; 
  border-bottom: 1px solid rgba(255,255,255,0.03); 
  text-align: center; 
}

.premium-table th:nth-child(1), .premium-table td:nth-child(1) { width: 10%; }
.premium-table th:nth-child(2), .premium-table td:nth-child(2) { width: 50%; text-align: right; }
.premium-table th:nth-child(3), .premium-table td:nth-child(3) { width: 20%; }
.premium-table th:nth-child(4), .premium-table td:nth-child(4) { width: 20%; }

.standings-team-cell { 
  display: flex; 
  align-items: center; 
  gap: 8px; 
  justify-content: flex-start;
}
.points { font-weight: bold; color: var(--premium-gold); }

/* جداول الإحصائيات والأقسام الداخلية */
.table-wrapper {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  border: 1px solid var(--card-border);
}
.table-wrapper table {
  width: 100%;
  border-collapse: collapse;
  min-width: 500px;
}
.table-wrapper th, .table-wrapper td {
  padding: 12px;
  text-align: center;
  border-bottom: 1px solid var(--card-border);
}
.table-wrapper th { background: var(--card-inner); color: var(--text-secondary); font-size: 13px; }
.table-wrapper td { font-size: 14px; }

/* =========================================
   7. Modals (Match & Team Details)
========================================= */
.match-details-overlay, .team-details-overlay {
  position: fixed; inset: 0; background: rgba(4, 17, 37, 0.85); backdrop-filter: blur(5px);
  z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 15px;
}
.match-details-modal, .team-details-modal {
  width: 100%; max-width: 500px; max-height: 85vh; overflow-y: auto;
  background: var(--card-bg); border-radius: var(--radius-lg); padding: 20px;
  position: relative; border: 1px solid var(--card-border);
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.match-details-close, .team-details-close {
  position: absolute; top: 12px; left: 12px; width: 34px; height: 34px;
  border: none; border-radius: 50%; background: var(--card-inner); color: var(--text-secondary);
  font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.match-details-header, .team-details-header {
  margin-top: 25px; display: flex; align-items: center; justify-content: center; gap: 14px;
  background: var(--card-inner); border-radius: 16px; padding: 16px; text-align: center;
}
.match-details-header { display: grid; grid-template-columns: 1fr auto 1fr; }
.modal-team-name { font-size: 16px; font-weight: bold; color: var(--text-primary); }
.modal-score { background: var(--bg-dark); color: var(--text-primary); padding: 8px 16px; border-radius: 12px; font-size: 20px; font-weight: bold; }
.modal-status { margin: 15px auto; width: fit-content; background: rgba(22, 119, 255, 0.15); color: var(--primary-blue); padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: bold; }

.details-row {
  background: var(--card-inner); border: 1px solid var(--card-border); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;
}
.details-row strong { color: var(--text-secondary); font-size: 13px; font-weight: normal; }
.details-row span { color: var(--text-primary); font-weight: bold; font-size: 14px; text-align: left;}
.highlight-row { border-color: var(--primary-blue); background: rgba(22, 119, 255, 0.08); }

/* =========================================
   8. Bottom Navigation Tabs (Professional UI)
========================================= */
.tabs {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  height: 70px !important;
  background-color: var(--bg-dark) !important;
  
  /* الحواف العلوية الدائرية كما في الصورة */
  border-top-left-radius: 24px !important;
  border-top-right-radius: 24px !important;
  border-top: 1px solid var(--card-border) !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4) !important;
  
  display: flex !important;
  justify-content: space-around !important;
  align-items: center !important;
  padding: 0 !important;
  padding-bottom: env(safe-area-inset-bottom, 0) !important;
  z-index: 9999 !important;
}

.tabs button {
  position: relative !important;
  background: none !important;
  border: none !important;
  color: var(--text-secondary) !important;
  height: 100% !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  cursor: pointer !important;
  gap: 4px !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: all 0.3s ease !important;
}

/* الأيقونات (SVG) */
.nav-icon {
  width: 24px !important;
  height: 24px !important;
  fill: currentColor !important;
  transition: all 0.3s ease !important;
}

.tabs button span {
  font-size: 0.75rem !important;
  font-weight: 500 !important;
}

/* المؤشر العلوي (الخط الأزرق الصغير) */
.nav-indicator {
  position: absolute !important;
  top: -1px !important;
  /* ليتطابق مع حدود الشريط العلوي */
  left: 50% !important;
  transform: translateX(-50%) scaleX(0) !important;
  width: 32px !important;
  height: 4px !important;
  background-color: var(--primary-blue) !important;
  border-bottom-left-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* التنسيق عند تفعيل الزر (Active) */
.tabs button.active {
  color: var(--primary-blue) !important;
}

.tabs button.active .nav-icon {
  transform: translateY(-2px) !important;
}

.tabs button.active .nav-indicator {
  transform: translateX(-50%) scaleX(1) !important;
}
/* =========================================
   9. Logos & Images Sizing (الشعارات الموحدة مع التوهج)
========================================= */
img { max-width: 100%; height: auto; }

/* التنسيق الأساسي لجميع الشعارات (الوضع الداكن الافتراضي) */
.team-logo-img, .team-card-logo, .team-details-logo, 
.match-team-logo, .modal-team-logo, .standings-team-logo, 
.mini-logo img, .team-logo-mini img, .team-logo-bg img {
  object-fit: cover !important; 
  background: transparent !important; 
  /* إطار زجاجي خفيف يحدد شكل الشعار */
  border: 1px solid rgba(255, 255, 255, 0.1) !important; 
  
  /* السحر هنا: توهج أزرق من كل الاتجاهات + ظل خفيف للعمق */
  box-shadow: 0 0 14px rgba(22, 119, 255, 0.35), 0 4px 10px rgba(0, 0, 0, 0.2) !important; 
  
  padding: 0 !important; 
  flex-shrink: 0;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* =========================================
   تخصيص التوهج للوضع الفاتح (Light Mode)
========================================= */
body.light-mode .team-logo-img, body.light-mode .team-card-logo, body.light-mode .team-details-logo, 
body.light-mode .match-team-logo, body.light-mode .modal-team-logo, body.light-mode .standings-team-logo, 
body.light-mode .mini-logo img, body.light-mode .team-logo-mini img, body.light-mode .team-logo-bg img {
  /* توهج أزرق فاتح وناعم يناسب الخلفية البيضاء/العاجية */
  box-shadow: 0 0 12px rgba(41, 182, 246, 0.45), 0 4px 10px rgba(0, 0, 0, 0.05) !important;
  border: 1px solid rgba(141, 110, 99, 0.15) !important;
}

/* =========================================
   تحديد الأحجام وضبط قوة التوهج حسب الحجم
========================================= */

/* 1. شعار نافذة تفاصيل الفريق (أكبر حجم) - توهج أكبر */
.team-details-logo { 
  width: 75px !important; height: 75px !important; border-radius: 18px !important; 
  box-shadow: 0 0 25px rgba(22, 119, 255, 0.45) !important;
}
body.light-mode .team-details-logo { box-shadow: 0 0 25px rgba(41, 182, 246, 0.5) !important; }

/* 2. شعارات المباراة القادمة (Hero Match) - توهج بارز */
.team-logo-bg img { 
  width: 65px !important; height: 65px !important; border-radius: 16px !important;
  box-shadow: 0 0 20px rgba(22, 119, 255, 0.4) !important;
}
body.light-mode .team-logo-bg img { box-shadow: 0 0 20px rgba(41, 182, 246, 0.45) !important; }

/* 3. شعار نافذة تفاصيل المباراة المنبثقة */
.modal-team-logo { 
  width: 55px !important; height: 55px !important; border-radius: 14px !important; 
}

/* 4. شعار صفحة الفرق الأساسية */
.team-card-logo { 
  width: 50px !important; height: 50px !important; border-radius: 12px !important; 
}

/* 5. شعارات المباريات في القوائم */
.match-team-logo { 
  width: 40px !important; height: 40px !important; border-radius: 10px !important; 
}

/* 6. الشعارات المصغرة (توهج خفيف جداً حتى لا يزعج العين في الجداول) */
.mini-logo img, .team-logo-mini img, .standings-team-logo { 
  width: 26px !important; height: 26px !important; 
  border-radius: 7px !important; 
  box-shadow: 0 0 8px rgba(22, 119, 255, 0.25) !important; 
}
body.light-mode .mini-logo img, body.light-mode .team-logo-mini img, body.light-mode .standings-team-logo {
  box-shadow: 0 0 8px rgba(41, 182, 246, 0.3) !important;
}

/* إزالة أي خلفيات من الحاويات */
.team-logo-bg, .mini-logo, .team-logo-mini {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.logo-fallback { 
  display: flex; justify-content: center; align-items: center; 
  font-size: 1.2rem; 
  background: var(--card-inner) !important; 
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(22, 119, 255, 0.2);
}

/* =========================================
   10. Old Sections Fallback & Admin
========================================= */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.match-card { background: var(--card-bg); border-radius: var(--radius-lg); padding: 18px; border: 1px solid var(--card-border); position: relative; }
.match-card::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; width: 4px; height: 100%; background: var(--primary-blue); }
.match-title { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; font-size: 16px; font-weight: bold; text-align: center; }
.score { background: var(--card-inner); color: var(--text-primary); padding: 8px 12px; border-radius: 10px; font-size: 15px; }
.badge { display: inline-block; margin-top: 14px; background: rgba(22, 119, 255, 0.15); color: var(--primary-blue); padding: 5px 12px; border-radius: 8px; font-size: 12px; font-weight: bold; }

.best-player-card { 
  background: var(--card-bg); 
  /* إزالة color: white; من هنا لأنها تجبر النص على البقاء أبيض دائمًا */
  border-radius: var(--radius-lg); 
  padding: 20px; 
  display: flex; 
  align-items: center; 
  gap: 16px; 
  border: 1px solid var(--card-border); 
  margin-bottom: 16px;
}

.best-player-icon { 
  width: 55px; 
  height: 55px; 
  border-radius: 16px; 
  display: grid; 
  place-items: center; 
  background: var(--card-inner); 
  font-size: 26px; 
  flex-shrink: 0; 
  border: 1px solid var(--card-border);
}

.best-player-label { 
  color: var(--premium-gold); 
  font-size: 13px; 
  display: block; 
  margin-bottom: 4px; 
}

.best-player-card h3 { 
  margin: 0; 
  font-size: 20px; 
  /* ضمان استخدام لون النص الأساسي الذي يتغير مع الوضع */
  color: var(--text-primary); 
}

.best-player-card p { 
  margin: 4px 0 0; 
  color: var(--text-secondary); 
  font-size: 13px; 
}


/* لوحة الإدارة */
.admin-header { background: var(--card-bg); padding: 15px; border-radius: 16px; border: 1px solid var(--card-border); }
.admin-group-title { margin: 20px 0 10px; padding: 12px; background: var(--card-inner); color: var(--text-primary); border-radius: 12px; font-weight: bold; }
.admin-box { background: var(--card-bg); padding: 16px; margin-bottom: 12px; border-radius: 16px; border: 1px solid var(--card-border); }
.admin-box h3 { margin-top: 0; color: var(--text-primary); font-size: 16px; }
.admin-box input, .admin-box select { width: 100%; padding: 12px; margin: 8px 0; border: 1px solid var(--card-border); border-radius: 10px; background: var(--bg-dark); color: var(--text-primary); outline: none; font-size: 14px;}
.admin-box button { width: 100%; background: var(--primary-blue); color: white; border: none; padding: 12px; border-radius: 10px; cursor: pointer; font-weight: bold; margin-top: 8px; }
.danger-box { border-color: rgba(255, 77, 77, 0.4); }
.danger-box button { background: var(--danger-red); }
.hidden-admin-btn { position: fixed; bottom: 85px; left: 15px; width: 48px; height: 48px; border-radius: 50%; border: none; background: var(--card-inner); color: var(--text-secondary); font-size: 22px; z-index: 999; border: 1px solid var(--card-border); display: flex; justify-content: center; align-items: center;}
.admin-internal-tabs { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 15px; padding-bottom: 5px; scrollbar-width: none; }
.admin-internal-tabs button { border: 1px solid var(--card-border); background: var(--card-inner); color: var(--text-secondary); padding: 8px 14px; border-radius: 20px; font-size: 13px; cursor: pointer;}
.admin-internal-tabs button.active { background: var(--primary-blue); color: white; border-color: var(--primary-blue); }

/* دعم الشاشات الصغيرة جداً */
@media (max-width: 420px) {
  .match-center { width: 40%; }
  .team-side { width: 30%; }
  .match-time { font-size: 1.2rem; }
  .header-titles h1 { font-size: 1rem; }
  .result-row .team-name { font-size: 0.75rem; }
}

/* =========================================
   Sub Tabs (التبويبات الداخلية للأقسام)
========================================= */
.sub-tabs-container {
  position: sticky;
  top: 69px; /* يلتصق أسفل الترويسة العلوية */
  z-index: 90;
  background-color: var(--bg-main);
  padding: 10px 0 15px;
  margin: -15px -15px 0; /* لتغطية الحواف */
  padding-left: 15px;
  padding-right: 15px;
}

.sub-tabs {
  display: flex;
  background: var(--bg-dark);
  border-radius: 14px;
  padding: 5px;
  border: 1px solid var(--card-border);
}

.sub-tabs button {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  padding: 10px;
  border-radius: 10px;
  font-weight: bold;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.sub-tabs button.active {
  background: var(--primary-blue);
  color: white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.sub-content { display: none; animation: fadeIn 0.3s ease; }
.sub-content.active-sub { display: block; }
g
/* =========================================
   جدول الترتيب الاحترافي (Scrollable & Sticky)
========================================= */

/* الحاوية التي تسمح بالسحب الأفقي */
.scrolly-table {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch; /* سكرول ناعم على الآيفون */
  border: none;
  background: var(--card-bg);
}

/* الجدول الكامل */
.full-stats-table {
  min-width: 650px; /* إجبار الجدول على أن يكون أعرض من الشاشة ليظهر السكرول */
  table-layout: auto;
}

/* تثبيت الأعمدة الأولى (الرقم واسم الفريق) */
.full-stats-table th.sticky-col,
.full-stats-table td.sticky-col {
  position: sticky;
  right: 0; /* التثبيت من اليمين لأن التطبيق RTL */
  z-index: 2;
  background-color: var(--card-bg); /* لون خلفية صلب حتى لا تظهر الأرقام خلفه عند السحب */
}

/* تنسيق عمود الترتيب (الرقم) */
.full-stats-table .num-col {
  right: 0;
  width: 40px;
  min-width: 40px;
  text-align: center;
  border-left: none !important;
}

/* تنسيق عمود اسم الفريق */
.full-stats-table .team-col {
  right: 40px; /* يبدأ بعد عمود الرقم */
  width: 140px;
  min-width: 140px;
  max-width: 140px;
  border-left: 1px solid var(--card-border) !important; /* خط فاصل بسيط بين الفريق وباقي الأرقام */
  box-shadow: -4px 0 8px rgba(0, 0, 0, 0.1); /* ظل خفيف للإيحاء بأن الأرقام تمر من تحته */
}

/* تنسيق خلية الفريق لضمان عدم تجاوز النص */
.team-name-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 90px;
}

/* تنسيقات عامة للجدول لتشبه الصورة */
.full-stats-table th {
  padding: 12px 6px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--card-border);
}

.full-stats-table td {
  padding: 14px 6px;
  font-size: 0.9rem;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}

.full-stats-table tr:hover td.sticky-col {
  background-color: var(--card-inner); /* تغيير لون الجزء الثابت عند المرور عليه */
}
/* =========================================
   تأثير فرق الهبوط (المنطقة الحمراء)
========================================= */
/* وضع خط أحمر وتلوين الرقم للفرق المهددة بالهبوط */
.relegation-zone .num-col {
  border-right: 3px solid var(--danger-red) !important;
  color: var(--danger-red) !important;
  font-weight: bold;
}

/* إضافة لمسة حمراء خفيفة جداً على خلفية هذه الفرق لتمييزها أكثر (اختياري) */
.relegation-zone td {
  background-color: rgba(255, 77, 77, 0.05);
}

/* التأكد من أن اللون الثابت يتناسب مع تأثير الهبوط عند السحب */
.full-stats-table tr.relegation-zone td.sticky-col {
  background-color: var(--card-bg);
}

.full-stats-table tr.relegation-zone:hover td.sticky-col {
  background-color: var(--card-inner);
}

/* =========================================
   تقليص الجداول في الشاشة الرئيسية (أول 5 فقط)
========================================= */
#bestPlayersTable tr:nth-child(n+6),
#scorersTable tr:nth-child(n+6),
#cardsStatsTable tr:nth-child(n+6) {
  display: none;
  /* إخفاء أي صف بعد الخامس */
}

/* نافذة الإحصائيات (إلغاء الإخفاء داخل النافذة المنبثقة) */
#statsModalTbody tr {
  display: table-row !important;
}

/* زر عرض الكل للإحصائيات */
.view-all-stats-btn {
  background-color: var(--card-inner);
  border: 1px solid var(--primary-blue);
  color: var(--primary-blue);
  width: 100%;
  padding: 10px;
  border-radius: 12px;
  font-size: 0.9rem;
  margin-top: 12px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s ease;
}

.view-all-stats-btn:hover {
  background-color: var(--primary-blue);
  color: white;
}

/* =========================================
   إصلاح عرض جدول البطاقات الملونة (6 أعمدة)
========================================= */
.cards-table th, 
.cards-table td {
  width: auto !important; /* إلغاء التوزيع القديم */
  padding: 10px 4px !important; /* تقليل المسافات لتسع الشاشة */
}

.cards-table th:nth-child(1), .cards-table td:nth-child(1) { width: 8% !important; } /* الرقم */
.cards-table th:nth-child(2), .cards-table td:nth-child(2) { width: 34% !important; text-align: right !important; } /* اللاعب */
.cards-table th:nth-child(3), .cards-table td:nth-child(3) { width: 22% !important; } /* الفريق */
.cards-table th:nth-child(4), .cards-table td:nth-child(4) { width: 12% !important; } /* 🟨 */
.cards-table th:nth-child(5), .cards-table td:nth-child(5) { width: 12% !important; } /* 🟥 */
.cards-table th:nth-child(6), .cards-table td:nth-child(6) { width: 12% !important; font-weight: bold; color: var(--danger-red); } /* الكل */

.match-card-premium {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  margin-bottom: 15px;
  overflow: hidden; /* يمنع خروج الشريط السفلي عن حواف البطاقة */
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.match-card-premium:active {
  transform: scale(0.98);
}

/* =========================================
   تصحيح بطاقات المباريات (الشكل المدمج)
========================================= */

/* --- الجزء العلوي --- */
.match-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 10px 10px;
}

.match-card-top .team-side {
  display: flex;
  align-items: center;
  gap: 8px; /* المسافة بين الاسم والشعار */
  width: 38%;
}

/* محاذاة الفريق الأيمن والأيسر */
.match-card-top .right-team { justify-content: flex-end; text-align: right; }
.match-card-top .left-team { justify-content: flex-start; text-align: left; }

.match-card-top .team-name {
  font-weight: bold;
  font-size: 0.95rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.match-center-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 24%;
}

.score-display {
  background: var(--bg-dark);
  color: var(--text-primary);
  font-size: 1.2rem;
  font-weight: 900;
  padding: 6px 16px;
  border-radius: 12px;
  margin-bottom: 6px;
  letter-spacing: 1px;
}

/* --- الجزء السفلي (شريط المعلومات) --- */
.match-card-bottom {
  display: flex;
  justify-content: space-between; /* توزيع العناصر الثلاثة بالتساوي */
  align-items: center;
  background: var(--card-inner);
  padding: 10px 12px;
  border-top: 1px solid var(--card-border);
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* تنسيق العناصر داخل الشريط السفلي */
.info-item {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.info-item span {
  font-size: 1rem; /* حجم الإيموجي */
  opacity: 0.8;
}

/* محاذاة أجزاء الشريط السفلي كما في الصورة */
.date-item {
  flex: 1;
  justify-content: flex-start; /* التاريخ على اليسار (بسبب RTL سيظهر على اليمين) */
}

.time-item {
  flex: 1;
  justify-content: center; /* الوقت في المنتصف تماماً */
}

.stadium-item {
  flex: 1;
  justify-content: flex-end; /* الملعب على اليمين (بسبب RTL سيظهر على اليسار) */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================
   قسم الفرق واللاعبين (التصميم العمودي الجديد)
========================================= */

/* شبكة الفرق الخارجية */
.teams-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.team-card-v2 {
  background: linear-gradient(145deg, var(--card-inner), var(--card-bg));
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 20px 10px;
  text-align: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 6px 15px rgba(0,0,0,0.15);
  transition: transform 0.2s;
}

.team-card-v2:active { transform: scale(0.95); }

/* توهج خلف الشعار */
.team-card-glow {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 70px;
  background: var(--primary-blue);
  filter: blur(35px);
  opacity: 0.35;
  z-index: 0;
}

/* إطار الشعار (معدل ليتناسب مع الشعارات المربعة) */
.team-card-logo-wrapper {
  position: relative;
  z-index: 1;
  width: 75px; /* كبرنا الحجم قليلاً */
  height: 75px;
  margin: 0 auto 12px;
  background: transparent; /* إزالة الخلفية لتندمج مع البطاقة */
  border-radius: 16px; /* زوايا منحنية أنيقة بدلاً من دائرة كاملة */
  padding: 0; /* إزالة البادينج ليتمدد الشعار */
  border: none; /* إزالة الإطار المزعج */
  box-shadow: 0 6px 12px rgba(0,0,0,0.15); /* ظل خفيف جداً يبرز الشعار */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* لضمان عدم خروج أطراف الشعار عن الزوايا المنحنية */
}

/* تعديل خصائص صورة الشعار نفسها داخل هذه البطاقة */
.team-v2-logo { 
  width: 100% !important; 
  height: 100% !important; 
  object-fit: cover !important; /* لملء الحاوية بالكامل بدون تشويه */
  background: transparent !important; 
  border: none !important; 
  border-radius: 16px !important; /* تطبيق الزوايا المنحنية على الصورة نفسها */
}


.team-v2-logo { 
  width: 100% !important; 
  height: 100% !important; 
  object-fit: contain; 
  background: transparent !important; 
  border: none !important; 
}

.team-v2-name {
  position: relative;
  z-index: 1;
  margin: 0 0 12px;
  font-size: 1.1rem;
  color: var(--text-primary);
  font-weight: 900;
}

.team-v2-stats {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  background: rgba(0,0,0,0.25);
  padding: 10px;
  border-radius: 12px;
}

/* =========================================
   نافذة تفاصيل الفريق (غرفة الملابس والكبسولات)
========================================= */

/* الترويسة الضبابية */
.team-details-header-v2 {
  position: relative;
  margin: 0 0 20px 0;
  padding: 40px 20px 20px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  overflow: hidden;
  text-align: center;
  border-bottom: 1px solid var(--card-border);
}

.team-header-bg {
  position: absolute;
  inset: -10px; /* تمديد قليل لتجنب الحواف البيضاء عند التغبيش */
  background-size: cover;
  background-position: center;
  filter: blur(15px) brightness(0.35);
  z-index: 0;
}

.team-header-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.team-details-logo-v2 {
  width: 90px !important;
  height: 90px !important;
  background: var(--card-bg) !important;
  border-radius: 50% !important;
  padding: 10px !important;
  border: 3px solid var(--primary-blue) !important;
  box-shadow: 0 5px 20px rgba(0,0,0,0.6) !important;
  object-fit: contain;
}

.team-header-content h2 {
  margin: 15px 0 0;
  font-size: 1.6rem;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
  font-weight: 900;
}

/* بطاقة نجم الفريق (الهداف) */
.team-star-card {
  background: linear-gradient(135deg, rgba(245, 185, 66, 0.15), rgba(245, 185, 66, 0.05));
  border: 1px solid rgba(245, 185, 66, 0.3);
  border-radius: 16px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.team-star-card .star-icon {
  font-size: 1.5rem;
  background: rgba(245, 185, 66, 0.2);
  width: 48px; 
  height: 48px;
  display: flex; 
  align-items: center; 
  justify-content: center;
  border-radius: 12px;
  border: 1px solid rgba(245, 185, 66, 0.4);
}

.team-star-card .star-label { 
  display: block; 
  font-size: 0.75rem; 
  color: var(--premium-gold); 
  margin-bottom: 4px; 
}

.team-star-card .star-name { 
  font-weight: bold; 
  font-size: 1.1rem; 
  color: var(--text-primary); 
}

/* نظام الكبسولات للاعبين */
.player-pills-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.player-pill {
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: bold;
  border: 1px solid transparent;
}

/* ألوان المراكز */
.pos-mng { background: rgba(255,255,255,0.08); color: var(--text-primary); border-color: var(--card-border); }
.pos-gk  { background: rgba(245, 185, 66, 0.15); color: var(--premium-gold); border-color: rgba(245, 185, 66, 0.3); }
.pos-df  { background: rgba(22, 119, 255, 0.15); color: var(--bright-blue); border-color: rgba(22, 119, 255, 0.3); }
.pos-md  { background: rgba(50, 213, 131, 0.15); color: var(--success-green); border-color: rgba(50, 213, 131, 0.3); }
.pos-fw  { background: rgba(255, 77, 77, 0.15); color: var(--danger-red); border-color: rgba(255, 77, 77, 0.3); }
.pos-old { background: rgba(143, 163, 186, 0.15); color: var(--text-secondary); border-color: rgba(143, 163, 186, 0.3); }
/* =========================================
   تجميل شعارات المباراة القادمة (اللوكو فقط)
========================================= */
.team-logo-bg {
  background: transparent !important; 
  width: 65px; 
  height: 65px;
  border-radius: 16px; /* زوايا منحنية أنيقة */
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08) !important; /* إطار زجاجي خفيف جداً */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* ظل يعطي بروزاً للشعار */
  padding: 0;
  position: relative;
}

/* إضافة توهج (Glow) أزرق خفيف خلف الشعار للمسة عصرية */
.team-logo-bg::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--primary-blue);
  filter: blur(15px);
  opacity: 0.25;
  z-index: 0;
}

/* تنسيق الصورة نفسها */
.team-logo-bg img { 
  width: 100% !important; 
  height: 100% !important; 
  object-fit: cover !important; 
  border-radius: 16px !important; 
  position: relative;
  z-index: 1; /* ليكون الشعار فوق التوهج */
}
/* =========================================
   1. إصلاح توهج الشعارات في (آخر النتائج)
========================================= */
.result-row .mini-logo img {
  width: 36px !important;
  height: 36px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  /* تفعيل التوهج الذي كان معطلاً */
  box-shadow: 0 0 14px rgba(22, 119, 255, 0.35), 0 4px 10px rgba(0, 0, 0, 0.2) !important;
}

body.light-mode .result-row .mini-logo img {
  box-shadow: 0 0 12px rgba(41, 182, 246, 0.45), 0 4px 10px rgba(0, 0, 0, 0.05) !important;
  border: 1px solid rgba(141, 110, 99, 0.15) !important;
}


/* =========================================
   2. تأثير الزجاج السائل (Liquid Glass) للبطاقات
========================================= */

/* بطاقات المباريات الرئيسية */
.match-card-premium {
  /* خلفية زجاجية شبه شفافة */
  background: rgba(9, 26, 50, 0.4) !important; 
  backdrop-filter: blur(16px); /* تأثير تغبيش ما خلف البطاقة */
  -webkit-backdrop-filter: blur(16px); /* لدعم هواتف الآيفون */
  
  /* زوايا ناعمة جداً وانعكاس إضاءة من الحافة العلوية */
  border-radius: 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important; /* لمعة الزجاج العلوية */
  
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25) !important;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease !important;
}

.match-card-premium:active {
  transform: scale(0.96) !important;
}

/* الشريط السفلي للبطاقة ليندمج مع الزجاج */
.match-card-bottom {
  background: rgba(0, 0, 0, 0.15) !important; /* شفافية غامقة للأسفل */
  border-top: 1px solid rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* تطبيق تأثير الزجاج على "مباريات اليوم" و "آخر النتائج" في الشاشة الرئيسية */
.result-row {
  background: rgba(9, 26, 50, 0.4) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

/* -----------------------------------------
   تخصيص الزجاج السائل للوضع الفاتح (Light Mode)
----------------------------------------- */
body.light-mode .match-card-premium,
body.light-mode .result-row {
  background: rgba(255, 255, 255, 0.6) !important;
  border: 1px solid rgba(141, 110, 99, 0.08) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.9) !important; /* لمعة زجاجية بيضاء قوية */
  box-shadow: 0 8px 32px rgba(141, 110, 99, 0.08) !important;
}

body.light-mode .match-card-bottom {
  background: rgba(0, 0, 0, 0.02) !important;
  border-top: 1px solid rgba(141, 110, 99, 0.05) !important;
}
/* =========================================
   تحديث تصميم لوحة الإدارة (Liquid Glass)
========================================= */

/* 1. تأثير الزجاج السائل لصناديق الإدارة */
.admin-box {
  background: rgba(9, 26, 50, 0.4) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 24px !important;
  
  /* لمعة الزجاج وإطارات خفيفة */
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25) !important;
  padding: 24px !important;
  margin-bottom: 20px !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* تخصيص صناديق الحذف (الخطر) بلمعة حمراء خفيفة */
.admin-box.danger-box {
  background: rgba(232, 65, 24, 0.03) !important;
  border: 1px solid rgba(232, 65, 24, 0.1) !important;
  border-top: 1px solid rgba(232, 65, 24, 0.2) !important;
}

/* تأثير الزجاج السائل للوضع الفاتح في الإدارة */
body.light-mode .admin-box {
  background: rgba(255, 255, 255, 0.6) !important;
  border: 1px solid rgba(141, 110, 99, 0.08) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 8px 32px rgba(141, 110, 99, 0.08) !important;
}

/* 2. تصميم زر تسجيل الخروج الزجاجي الأنيق */
.logout-btn {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 0 auto 24px auto !important;
  padding: 14px 24px !important;
  
  /* خلفية حمراء زجاجية شفافة */
  background: rgba(232, 65, 24, 0.1) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  
  border: 1px solid rgba(232, 65, 24, 0.3) !important;
  border-top: 1px solid rgba(232, 65, 24, 0.5) !important;
  border-radius: 16px !important;
  
  color: #e84118 !important;
  /* لون النص أحمر أنيق */
  font-size: 1.1rem !important;
  font-weight: bold;
  text-align: center;
  box-shadow: 0 4px 15px rgba(232, 65, 24, 0.15) !important;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
}

/* حركة الضغط على الزر */
.logout-btn:active {
  transform: scale(0.96);
  background: rgba(232, 65, 24, 0.2) !important;
}

/* زر الخروج في الوضع الفاتح */
body.light-mode .logout-btn {
  background: rgba(232, 65, 24, 0.05) !important;
  box-shadow: 0 4px 15px rgba(232, 65, 24, 0.1) !important;
}
/* =========================================
   إشعار الزجاج السائل الداخلي (Liquid Glass Toast)
========================================= */
.glass-toast {
  position: fixed;
  top: -100px;
  /* مخفي في الأعلى */
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 400px;
  
  /* تأثير الزجاج */
  background: rgba(9, 26, 50, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  
  /* الحدود واللمعة */
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
  color: #fff;
  padding: 16px 20px;
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 16px;
  
  /* حركة النزول والصعود */
  transition: top 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* الكلاس الذي سيضيفه الجافاسكربت لإظهار الإشعار */
.glass-toast.show {
  top: 25px;
}

.glass-toast-icon {
  font-size: 28px;
  background: rgba(255, 255, 255, 0.1);
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.glass-toast-content h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  color: var(--premium-gold);
}

.glass-toast-content p {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.4;
}

/* الوضع الفاتح */
body.light-mode .glass-toast {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(141, 110, 99, 0.2);
  border-top: 1px solid #fff;
  box-shadow: 0 15px 35px rgba(141, 110, 99, 0.15);
  color: var(--text-primary);
}

body.light-mode .glass-toast-icon {
  background: rgba(141, 110, 99, 0.05);
  border: 1px solid rgba(141, 110, 99, 0.1);
}

body.light-mode .glass-toast-content p {
  color: var(--text-secondary);
}

/* =========================================
   الفوتر السينمائي (Cinematic Footer)
========================================= */
.cinematic-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px 90px 20px; /* مسافة 90 بكسل للأسفل حتى لا يغطيه شريط التنقل */
  margin-top: 10px;
}

/* الخط النحيف المتلاشي */
.fade-line {
  width: 50%;
  max-width: 200px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  margin-bottom: 12px;
  transition: background 0.4s ease;
}

/* نص الحقوق */
.power-link {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 4px; /* تباعد الأحرف للوك السينمائي */
  color: rgba(255, 255, 255, 0.25); /* شفاف بنسبة كبيرة */
  text-decoration: none;
  text-transform: uppercase;
  transition: all 0.4s ease;
}

/* تأثير مرور الماوس أو اللمس */
.power-link:hover {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3); /* توهج خفيف */
}

/* حركة الضغط */
.power-link:active {
  transform: scale(0.95);
}

/* التوافق مع الوضع الفاتح */
body.light-mode .fade-line {
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
}

body.light-mode .power-link {
  color: rgba(0, 0, 0, 0.3);
}

body.light-mode .power-link:hover {
  color: rgba(0, 0, 0, 0.8);
  text-shadow: none;
}