/* ============================================================
   حبكة — نظام التصميم (Theme)
   ثيم سينمائي مريح: ليل عميق + خيط ذهبي + لمسات فيروزية
   ============================================================ */

@font-face {
  font-family: 'Cairo';
  src: local('Cairo');
  font-display: swap;
}

:root {
  /* --- الخلفيات --- */
  --bg-0:      #0b0e14;   /* أعمق طبقة */
  --bg-1:      #11151f;   /* خلفية الصفحة */
  --bg-2:      #171d2b;   /* البطاقات */
  --bg-3:      #1f2739;   /* بطاقات مرفوعة / hover */
  --bg-glass:  rgba(23, 29, 43, .72);

  /* --- الحدود --- */
  --line:      #263149;
  --line-soft: rgba(201, 162, 39, .16);

  /* --- النصوص --- */
  --tx-1: #eef2fb;   /* أساسي */
  --tx-2: #a8b3cc;   /* ثانوي */
  --tx-3: #6b7896;   /* خافت */

  /* --- الهوية: الخيط الذهبي --- */
  --gold:      #d4af37;
  --gold-soft: #f0d675;
  --gold-deep: #9a7d1e;

  /* --- لمسات --- */
  --teal:   #2dd4bf;
  --violet: #a78bfa;
  --rose:   #fb7185;
  --amber:  #fb923c;
  --red:    #ef4444;
  --green:  #34d399;

  /* --- ألوان النجوم حسب التقييم --- */
  --star-1: #64748b;   /* ضعيف — رمادي */
  --star-2: #94a3b8;
  --star-3: #d4af37;   /* ذهبي عادي */
  --star-4: #fb923c;   /* برتقالي متوهج */
  --star-5: #ff4d4d;   /* أسطوري — أحمر متوهج */

  /* --- الظلال --- */
  --sh-sm: 0 2px 8px rgba(0,0,0,.35);
  --sh-md: 0 8px 28px rgba(0,0,0,.45);
  --sh-lg: 0 20px 60px rgba(0,0,0,.55);
  --glow-gold: 0 0 18px rgba(212,175,55,.45);

  /* --- الأشكال --- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-full: 999px;

  /* --- الحركة --- */
  --ease: cubic-bezier(.22,.9,.28,1);
  --fast: .18s var(--ease);
  --mid:  .32s var(--ease);
  --slow: .6s  var(--ease);

  --header-h: 68px;
  --nav-h: 62px;
}

/* الوضع الفاتح (اختياري من الإعدادات) */
:root[data-theme="light"] {
  --bg-0: #f4f6fb;
  --bg-1: #ffffff;
  --bg-2: #ffffff;
  --bg-3: #f0f3fa;
  --bg-glass: rgba(255,255,255,.8);
  --line: #dde3ef;
  --line-soft: rgba(154,125,30,.2);
  --tx-1: #131824;
  --tx-2: #4a5670;
  --tx-3: #8b95ac;
  --gold: #9a7d1e;
  --gold-soft: #c9a227;
  --sh-md: 0 8px 28px rgba(20,30,60,.10);
  --sh-lg: 0 20px 60px rgba(20,30,60,.14);
}

/* ===================== الأساسيات ===================== */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg-1);
  color: var(--tx-1);
  font-family: 'Cairo', 'Segoe UI', 'Tahoma', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background-image:
    radial-gradient(900px 500px at 85% -8%, rgba(212,175,55,.09), transparent 60%),
    radial-gradient(700px 420px at 8% 12%, rgba(45,212,191,.06), transparent 62%);
  background-attachment: fixed;
}

h1,h2,h3,h4 { margin: 0; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
p { margin: 0; line-height: 1.75; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
img { max-width: 100%; display: block; }

::selection { background: rgba(212,175,55,.3); color: var(--tx-1); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--r-full); border: 2px solid var(--bg-1); }
::-webkit-scrollbar-thumb:hover { background: var(--gold-deep); }

/* ===================== الأزرار ===================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--tx-1);
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--fast), background var(--fast), border-color var(--fast), box-shadow var(--fast);
  user-select: none;
  white-space: nowrap;
}
.btn:hover { background: var(--bg-3); border-color: var(--gold-deep); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn-gold {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-soft) 100%);
  color: #16130a;
  border-color: transparent;
  box-shadow: 0 4px 18px rgba(212,175,55,.28);
}
.btn-gold:hover { box-shadow: var(--glow-gold); background: linear-gradient(135deg, var(--gold-soft), var(--gold)); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--tx-2); }
.btn-ghost:hover { background: var(--bg-2); color: var(--tx-1); }

.btn-sm { padding: 7px 14px; font-size: .86rem; }
.btn-icon { padding: 9px; border-radius: var(--r-full); }

/* ===================== الحقول ===================== */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: .84rem; color: var(--tx-2); font-weight: 700; }

.input, .textarea, .select {
  width: 100%;
  padding: 12px 15px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--tx-1);
  outline: none;
  transition: border-color var(--fast), box-shadow var(--fast), background var(--fast);
}
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212,175,55,.14);
  background: var(--bg-2);
}
.input::placeholder, .textarea::placeholder { color: var(--tx-3); }
.textarea { resize: vertical; min-height: 92px; line-height: 1.7; }
.hint { font-size: .76rem; color: var(--tx-3); }

/* حقول بالإنجليزي (يوزر/باسورد) */
.input-en { direction: ltr; text-align: left; font-family: 'Segoe UI', system-ui, sans-serif; letter-spacing: .3px; }

/* ===================== البطاقات ===================== */
.card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 20px;
  box-shadow: var(--sh-sm);
}

.glass {
  background: var(--bg-glass);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid var(--line);
}

/* ===================== الأفاتار ===================== */
.avatar {
  position: relative;
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: var(--r-full);
  overflow: hidden;
  font-weight: 900;
  color: #16130a;
  flex: none;
  border: 2px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 0 0 2px var(--line-soft);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-lg { width: 78px; height: 78px; font-size: 1.7rem; }
.avatar-sm { width: 32px; height: 32px; font-size: .82rem; }

/* ===================== النجوم ===================== */
.stars { display: inline-flex; gap: 3px; align-items: center; }
.star {
  width: 20px; height: 20px;
  cursor: pointer;
  color: var(--tx-3);
  transition: transform var(--fast), color var(--fast), filter var(--fast);
}
.star.on { color: var(--sc, var(--gold)); filter: drop-shadow(0 0 6px var(--sc, var(--gold))); }
.stars.interactive .star:hover { transform: scale(1.28) rotate(-8deg); }
.stars[data-v="5"] .star.on { animation: legend 2.2s var(--ease) infinite; }

@keyframes legend {
  0%,100% { filter: drop-shadow(0 0 5px var(--star-5)); }
  50%     { filter: drop-shadow(0 0 14px var(--star-5)); }
}

/* ===================== الشارات ===================== */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px;
  border-radius: var(--r-full);
  font-size: .74rem; font-weight: 800;
  background: var(--bg-3);
  color: var(--tx-2);
  border: 1px solid var(--line);
}
.badge-gold {
  background: rgba(212,175,55,.14);
  color: var(--gold-soft);
  border-color: rgba(212,175,55,.34);
  box-shadow: 0 0 12px rgba(212,175,55,.18);
}
.badge-lock { background: rgba(251,113,133,.12); color: var(--rose); border-color: rgba(251,113,133,.3); }

/* ===================== أدوات ===================== */
.row { display: flex; align-items: center; gap: 12px; }
.col { display: flex; flex-direction: column; gap: 12px; }
.spread { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.center { display: grid; place-items: center; }
.muted { color: var(--tx-2); }
.dim { color: var(--tx-3); }
.tiny { font-size: .78rem; }
.small { font-size: .87rem; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hidden { display: none !important; }

.divider { height: 1px; background: var(--line); border: 0; margin: 4px 0; }

/* ===================== حركات ===================== */
@keyframes fadeUp   { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn    { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@keyframes slideDown{ from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes shimmer  { to { background-position: -200% 0; } }

.anim-up   { animation: fadeUp .45s var(--ease) both; }
.anim-in   { animation: fadeIn .35s var(--ease) both; }
.anim-pop  { animation: popIn  .3s  var(--ease) both; }

.skeleton {
  background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 50%, var(--bg-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--r-sm);
}

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