/* ========================================================
   نبرة — NABRA v1.0
   Theme: Elegant Beige & Gold
   Fonts: Cairo (AR) + Poppins (EN) | FA 6
   ======================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

/* ─── CSS Variables ─────────────────────────────────── */
:root {
  /* Brand */
  --brand-green:   #B8954F;
  --brand-blue:    #8B6F3A;
  --brand-purple:  #2C3A2E;
  --brand-yellow:  #D4AF37;
  --brand-red:     #C0392B;
  --brand-orange:  #B8954F;
  --brand-teal:    #7A8B6F;

  /* Gold accent (NABRA brand) */
  --accent:        #B8954F;
  --accent-dark:   #9A7B3F;
  --accent-glow:   rgba(184,149,79,0.18);

  /* Backgrounds — LIGHT BEIGE */
  --bg-base:       #FAF7F2;
  --bg-card:       #FFFFFF;
  --bg-card-hover: #FDF9F3;
  --bg-input:      #FFFFFF;
  --bg-glass:      rgba(44,58,46,0.03);
  --bg-glass-2:    rgba(44,58,46,0.05);
  --bg-sidebar:    #FFFFFF;

  /* Borders */
  --border:        rgba(44,58,46,0.08);
  --border-light:  rgba(44,58,46,0.06);
  --border-hover:  rgba(184,149,79,0.4);
  --border-active: #B8954F;

  /* Text - High Contrast WCAG AAA Compliant */
  --text-primary:   #1A1A1A; /* Deep dark - maximum contrast */
  --text-secondary: #2C3A2E; /* Dark green-black - strong readability */
  --text-muted:     #6B7B6E; /* Muted green-gray - passes 4.6:1 ratio */

  /* Gradients */
  --grad-green:    linear-gradient(135deg, #B8954F, #9A7B3F);
  --grad-blue:     linear-gradient(135deg, #8B6F3A, #6B5530);
  --grad-purple:   linear-gradient(135deg, #2C3A2E, #1A2A1C);
  --grad-orange:   linear-gradient(135deg, #B8954F, #9A7B3F);
  --grad-teal:     linear-gradient(135deg, #7A8B6F, #5C6B52);
  --grad-hero:     linear-gradient(135deg, #B8954F 0%, #8B6F3A 100%);
  --grad-rainbow:  linear-gradient(90deg, #B8954F, #D4AF37, #9A7B3F, #2C3A2E, #6B5530);

  /* Shadows — gold-tinted */
  --shadow-xs:  0 1px 3px rgba(44,58,46,0.06);
  --shadow-sm:  0 2px 8px rgba(44,58,46,0.08);
  --shadow-md:  0 4px 20px rgba(44,58,46,0.10);
  --shadow-lg:  0 8px 40px rgba(44,58,46,0.12);
  --shadow-xl:  0 16px 60px rgba(44,58,46,0.15);
  --shadow-green:  0 4px 20px rgba(184,149,79,0.25);
  --shadow-blue:   0 4px 20px rgba(139,111,58,0.25);
  --shadow-purple: 0 4px 20px rgba(44,58,46,0.25);
  --shadow-accent: 0 4px 20px rgba(184,149,79,0.25);

  /* Radius — more rounded */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-2xl:  36px;
  --r-full: 9999px;

  /* Transitions */
  --t-fast:   all 0.15s ease;
  --t-normal: all 0.25s cubic-bezier(0.4,0,0.2,1);
  --t-bounce: all 0.35s cubic-bezier(0.34,1.56,0.64,1);

  /* Fonts */
  --font-ar: 'Cairo', sans-serif;
  --font-en: 'Poppins', sans-serif;

  /* Navbar */
  --navbar-h: 68px;
}

/* ─── Reset & Base ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--brand-green) #E2E8F0;
}

body {
  font-family: var(--font-ar);
  background: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  direction: rtl;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #E2E8F0; }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 99px; }

/* ─── App BG decorations ────────────────────────────── */
.app-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* ══ FIX: إصلاح مشكلة تجمد الصفحة ══════════════════
   .app-bg لها pointer-events:none لكن المحتوى داخلها
   يجب أن يكون قابلاً للتفاعل — هذا الإصلاح يضمن ذلك */
.jawharah-nav,
.page-wrapper,
.nav-drawer,
.nav-links,
.nav-link,
.nav-actions,
.nav-user-menu,
.nav-user-trigger,
.nav-dropdown,
.nav-brand,
.nav-burger,
.btn,
a,
button,
input,
select,
textarea,
[onclick] {
  pointer-events: auto;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.12;
  animation: float 14s ease-in-out infinite;
}

.orb-1 {
  width: 600px; height: 600px;
  background: var(--brand-green);
  top: -200px; right: -150px;
  animation-delay: 0s;
}

.orb-2 {
  width: 500px; height: 500px;
  background: var(--brand-blue);
  bottom: -100px; left: -100px;
  animation-delay: 5s;
}

.orb-3 {
  width: 400px; height: 400px;
  background: var(--brand-purple);
  top: 40%; right: 30%;
  animation-delay: 10s;
}

@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(30px, -30px) scale(1.05); }
  66%  { transform: translate(-20px, 20px) scale(0.95); }
}

/* ─── Navigation Bar ────────────────────────────────── */
.jawharah-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--navbar-h);
  z-index: 1000;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 2px solid #E2E8F0;
  display: flex;
  align-items: center;
  padding: 0 2rem;
  gap: 1rem;
  transition: var(--t-normal);
}

.jawharah-nav.scrolled {
  box-shadow: var(--shadow-md);
  border-bottom-color: rgba(184,149,79,0.3);
}

/* Brand */
.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  flex-shrink: 0;
}

.nav-brand-gem {
  width: 42px; height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: var(--t-bounce);
}

.nav-brand-gem img,
.nav-brand-logo {
  height: 42px;
  border-radius: var(--r-sm);
  object-fit: contain;
}

.nav-brand:hover .nav-brand-gem {
  transform: rotate(15deg) scale(1.12);
}

.nav-brand-name {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.nav-brand-ar {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text-primary);
  font-family: var(--font-ar);
}

.nav-brand-en {
  font-size: 0.58rem;
  color: var(--text-muted);
  font-family: var(--font-en);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Nav Links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
  padding: 0 1rem;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--r-full);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-secondary);
  transition: var(--t-fast);
  white-space: nowrap;
}

.nav-link i { font-size: 0.85rem; }

.nav-link:hover {
  color: var(--text-primary);
  background: #F5EDE0;
}

.nav-link.active {
  color: #B8954F;
  background: rgba(184,149,79,0.1);
}

/* Nav Actions (right side group) */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-right: auto;
  flex-shrink: 0;
}

/* Streak Badge */
.nav-streak {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  background: rgba(255,150,0,0.1);
  border: 2px solid rgba(255,150,0,0.25);
  border-radius: var(--r-full);
  font-size: 0.75rem;
  font-weight: 800;
  color: #A05000;
  white-space: nowrap;
}
.nav-streak i { color: #FF9600; }

/* XP Badge */
.nav-xp-pill {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.875rem;
  background: rgba(255,200,0,0.1);
  border: 2px solid rgba(255,200,0,0.3);
  border-radius: var(--r-full);
  font-size: 0.75rem;
  font-weight: 800;
  color: #B07D00;
  white-space: nowrap;
}

.nav-xp-pill i { color: var(--brand-yellow); }

/* User Menu */
.nav-user-menu { position: relative; }

.nav-user-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.35rem 0.875rem 0.35rem 0.5rem;
  border-radius: var(--r-full);
  transition: var(--t-fast);
  border: 2px solid transparent;
  background: var(--bg-glass);
}

.nav-user-trigger:hover {
  background: #F5EDE0;
  border-color: rgba(184,149,79,0.2);
}

.nav-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--grad-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 800;
  color: white;
  border: 2px solid rgba(184,149,79,0.35);
  flex-shrink: 0;
}

.nav-username {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-primary);
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-user-trigger .fa-chevron-down {
  font-size: 0.6rem;
  color: var(--text-muted);
  transition: var(--t-fast);
}

/* Dropdown */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 200px;
  background: white;
  border: 2px solid #E2E8F0;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: none;
  z-index: 200;
}

.nav-dropdown.open { display: block; animation: dropIn 0.2s ease; }

@keyframes dropIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border: none;
  background: none;
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-family: var(--font-ar);
  cursor: pointer;
  transition: var(--t-fast);
  text-align: right;
}

.nav-dropdown-item:hover { background: #F7F9FC; color: var(--text-primary); }
.nav-dropdown-item.danger { color: var(--brand-red); }
.nav-dropdown-item.danger:hover { background: rgba(255,75,75,0.06); }

.nav-dropdown-divider { height: 1px; background: #E2E8F0; margin: 0.25rem 0; }

/* Mobile Nav */
.nav-burger {
  display: none;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: var(--r-sm);
  transition: var(--t-fast);
}

.nav-burger span {
  display: block;
  width: 22px; height: 2.5px;
  background: var(--text-secondary);
  border-radius: 2px;
  transition: var(--t-normal);
}

.nav-drawer {
  display: none;
  position: fixed;
  top: var(--navbar-h);
  left: 0; right: 0;
  background: white;
  border-bottom: 2px solid #E2E8F0;
  padding: 1rem;
  z-index: 999;
  flex-direction: column;
  gap: 0.25rem;
  box-shadow: var(--shadow-md);
}

.nav-drawer.open { display: flex; }

.nav-drawer .nav-link {
  font-size: 0.9rem;
  padding: 0.75rem 1rem;
  border-radius: var(--r-md);
}

/* ─── Page Wrapper ──────────────────────────────────── */
.page-wrapper {
  position: relative;
  z-index: 1;
  padding-top: var(--navbar-h);
  min-height: 100vh;
}

/* ─── Buttons ───────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  border-radius: var(--r-full);
  border: none;
  cursor: pointer;
  font-family: var(--font-ar);
  font-weight: 800;
  font-size: 0.9rem;
  text-decoration: none;
  transition: var(--t-bounce);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  letter-spacing: 0.01em;
}

.btn:active { transform: scale(0.96); }

.btn-primary {
  background: var(--grad-green);
  color: white;
  box-shadow: var(--shadow-green);
  border-bottom: 4px solid #8B6F3A;
}

.btn-primary:hover {
  box-shadow: 0 6px 30px rgba(184,149,79,0.4);
  transform: translateY(-2px);
}

.btn-primary:active {
  transform: translateY(1px);
  border-bottom-width: 2px;
}

.btn-secondary {
  background: white;
  color: var(--text-primary);
  border: 2px solid #E2E8F0;
  box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
  border-color: var(--brand-green);
  color: var(--brand-green);
  background: #F5EDE0;
}

.btn-blue {
  background: var(--grad-blue);
  color: white;
  box-shadow: var(--shadow-blue);
  border-bottom: 4px solid #0A90D0;
}

.btn-blue:hover { transform: translateY(-2px); box-shadow: 0 6px 30px rgba(28,176,246,0.4); }

.btn-purple {
  background: var(--grad-purple);
  color: white;
  box-shadow: var(--shadow-purple);
  border-bottom: 4px solid #6B30C0;
}

.btn-purple:hover { transform: translateY(-2px); }

.btn-teal {
  background: var(--grad-teal);
  color: white;
  box-shadow: 0 4px 15px rgba(46,196,182,0.3);
  border-bottom: 4px solid #0FA89E;
}

.btn-teal:hover { transform: translateY(-2px); }

.btn-orange {
  background: var(--grad-orange);
  color: white;
  box-shadow: var(--shadow-accent);
  border-bottom: 4px solid #C06030;
}

.btn-orange:hover { transform: translateY(-2px); }

.btn-outline {
  background: transparent;
  color: var(--brand-green);
  border: 2.5px solid var(--brand-green);
}

.btn-outline:hover { background: #F5EDE0; }

.btn-danger {
  background: var(--brand-red);
  color: white;
  border-bottom: 4px solid #CC2222;
}

.btn-sm  { padding: 0.45rem 1.1rem; font-size: 0.78rem; }
.btn-lg  { padding: 1rem 2.5rem; font-size: 1rem; }
.btn-icon { padding: 0.65rem; aspect-ratio: 1; border-radius: var(--r-md); }

/* ─── Cards ─────────────────────────────────────────── */
.card {
  background: white;
  border: 2px solid #E8EDF2;
  border-radius: var(--r-lg);
  padding: 1.5rem;
  transition: var(--t-bounce);
  box-shadow: var(--shadow-sm);
}

.card:hover {
  border-color: var(--brand-green);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.card-glass {
  background: rgba(255,255,255,0.8);
  border: 2px solid rgba(255,255,255,0.9);
  border-radius: var(--r-lg);
  backdrop-filter: blur(12px);
}

/* ─── Forms ──────────────────────────────────────────── */
.form-group { margin-bottom: 1.25rem; }

.form-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.form-input-icon { position: relative; }

.form-input-icon i {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 0.85rem;
}

.form-input {
  width: 100%;
  padding: 0.8rem 2.75rem 0.8rem 1rem;
  background: white;
  border: 2px solid #E2E8F0;
  border-radius: var(--r-md);
  color: var(--text-primary);
  font-family: var(--font-ar);
  font-size: 0.9rem;
  outline: none;
  transition: var(--t-fast);
  direction: rtl;
}

.form-input:focus {
  border-color: var(--brand-green);
  box-shadow: 0 0 0 4px rgba(184,149,79,0.15);
}

.form-input::placeholder { color: var(--text-muted); }

/* ─── Progress ───────────────────────────────────────── */
.progress-track {
  height: 12px;
  background: #E2E8F0;
  border-radius: var(--r-full);
  overflow: hidden;
}

.progress-track.thin  { height: 6px; }
.progress-track.thick { height: 16px; }

.progress-fill {
  height: 100%;
  background: var(--grad-green);
  border-radius: var(--r-full);
  transition: width 0.8s cubic-bezier(0.4,0,0.2,1);
  position: relative;
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 2px; bottom: 2px;
  left: 4px;
  width: 30%;
  background: rgba(255,255,255,0.3);
  border-radius: var(--r-full);
}

/* ─── Badges ──────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--r-full);
  font-size: 0.7rem;
  font-weight: 800;
}

.badge-green  { background: rgba(184,149,79,0.12);   color: #8B6F3A;  border: 2px solid rgba(184,149,79,0.25); }
.badge-blue   { background: rgba(28,176,246,0.1);  color: #0070A0;  border: 2px solid rgba(28,176,246,0.2); }
.badge-purple { background: rgba(165,96,237,0.1);  color: #7030B0;  border: 2px solid rgba(165,96,237,0.2); }
.badge-yellow { background: rgba(255,200,0,0.12);  color: #8B6A00;  border: 2px solid rgba(255,200,0,0.25); }
.badge-red    { background: rgba(255,75,75,0.1);   color: #CC2222;  border: 2px solid rgba(255,75,75,0.2); }
.badge-teal   { background: rgba(46,196,182,0.1);  color: #0A7A70;  border: 2px solid rgba(46,196,182,0.2); }
.badge-orange { background: rgba(244,162,97,0.12); color: #A04000;  border: 2px solid rgba(244,162,97,0.25); }
.badge-accent { background: rgba(244,162,97,0.12); color: #A04000;  border: 2px solid rgba(244,162,97,0.25); }

/* ─── Section Title ──────────────────────────────────── */
.section-title {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.section-title i { font-size: 1rem; }

/* ─── Toast ───────────────────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 340px;
}

.toast {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.125rem;
  background: white;
  border: 2px solid #E2E8F0;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
  min-width: 240px;
  animation: toastIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
}

.toast.hiding { animation: toastOut 0.3s ease forwards; }

.toast-icon {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.toast.success { border-color: rgba(184,149,79,0.4); }
.toast.success .toast-icon { background: rgba(184,149,79,0.12); color: #8B6F3A; }
.toast.error   { border-color: rgba(255,75,75,0.4); }
.toast.error   .toast-icon { background: rgba(255,75,75,0.1); color: var(--brand-red); }
.toast.info    { border-color: rgba(28,176,246,0.4); }
.toast.info    .toast-icon { background: rgba(28,176,246,0.1); color: #0070A0; }
.toast.warning { border-color: rgba(255,200,0,0.4); }
.toast.warning .toast-icon { background: rgba(255,200,0,0.1); color: #8B6A00; }

@keyframes toastIn  { from { opacity: 0; transform: translateX(20px) scale(0.9); } to { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes toastOut { to   { opacity: 0; transform: translateX(20px); } }

/* ─── Spinner ────────────────────────────────────────── */
.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

.spinner {
  width: 44px; height: 44px;
  border: 4px solid #E2E8F0;
  border-top-color: var(--brand-green);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Quick Action Cards (Dashboard) ─────────────────── */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.quick-card {
  background: white;
  border: 2px solid #E8EDF2;
  border-radius: var(--r-xl);
  padding: 1.25rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: var(--t-bounce);
  text-decoration: none;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.quick-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: var(--grad-green);
  opacity: 0;
  transition: var(--t-fast);
}

.quick-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

.quick-card:hover::after { opacity: 1; }

.qc-icon {
  width: 52px; height: 52px;
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  transition: var(--t-bounce);
}

.quick-card:hover .qc-icon { transform: scale(1.15) rotate(-5deg); }

.qc-name {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-primary);
}

.qc-desc {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-weight: 600;
}

/* ─── Level Cards ────────────────────────────────────── */
.levels-section { margin-bottom: 2.5rem; }

.level-card {
  background: white;
  border: 2px solid #E8EDF2;
  border-radius: var(--r-xl);
  padding: 1.5rem;
  margin-bottom: 1rem;
  cursor: pointer;
  transition: var(--t-bounce);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  position: relative;
}

.level-card.locked {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

.level-card.completed { border-color: rgba(184,149,79,0.35); background: #F5EDE0; }
.level-card.current   { border-color: rgba(44,58,46,0.4); }

.level-card:not(.locked):hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand-green);
}

.lc-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.lc-icon {
  width: 56px; height: 56px;
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
  transition: var(--t-bounce);
}

.level-card:not(.locked):hover .lc-icon { transform: scale(1.1) rotate(-5deg); }

.lc-info { flex: 1; }

.lc-name {
  font-size: 1rem;
  font-weight: 900;
  color: var(--text-primary);
  margin-bottom: 0.15rem;
}

.lc-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.lc-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 600;
}

.lc-status {
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.3rem 0.875rem;
  border-radius: var(--r-full);
  flex-shrink: 0;
}

/* ─── Lesson Cards ───────────────────────────────────── */
.lessons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 2px solid #E8EDF2;
}

.lesson-card {
  background: var(--bg-base);
  border: 2px solid #E8EDF2;
  border-radius: var(--r-lg);
  padding: 1.1rem 1.25rem;
  cursor: pointer;
  transition: var(--t-bounce);
  display: flex;
  align-items: center;
  gap: 0.875rem;
  text-decoration: none;
  color: var(--text-primary);
}

.lesson-card.locked { opacity: 0.5; cursor: not-allowed; }

.lesson-card:not(.locked):hover {
  border-color: var(--brand-green);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  background: white;
}

.lesson-icon {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.lesson-name {
  font-size: 0.85rem;
  font-weight: 800;
  margin-bottom: 0.1rem;
}

.lesson-meta {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-weight: 600;
}

/* ─── Welcome Banner ─────────────────────────────────── */
.welcome-banner {
  background: linear-gradient(135deg, #2C3A2E 0%, #1A1A1A 100%);
  border: 2px solid rgba(184,149,79,0.35);
  border-radius: var(--r-2xl);
  padding: 2rem 2.5rem;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  position: relative;
  overflow: hidden;
  color: white;
  box-shadow: 0 8px 40px rgba(44,58,46,0.35);
}

.welcome-banner::before {
  content: '🌴';
  position: absolute;
  left: -10px; top: 50%;
  transform: translateY(-50%);
  font-size: 8rem;
  opacity: 0.06;
  pointer-events: none;
}

.welcome-banner::after {
  content: '';
  position: absolute;
  top: -50%; right: -10%;
  width: 300px; height: 300px;
  background: rgba(255,255,255,0.05);
  border-radius: 50%;
  pointer-events: none;
}

.welcome-left { position: relative; z-index: 1; }

.welcome-greeting {
  font-size: 1.6rem;
  font-weight: 900;
  color: white;
  margin-bottom: 0.25rem;
}

.welcome-sub { font-size: 0.85rem; color: rgba(255,255,255,0.8); margin-bottom: 0.75rem; }

.welcome-right {
  display: flex;
  gap: 1rem;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.w-stat {
  text-align: center;
  padding: 1rem 1.25rem;
  background: rgba(255,255,255,0.15);
  border-radius: var(--r-lg);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2);
  min-width: 80px;
}

.w-stat-val {
  font-size: 1.5rem;
  font-weight: 900;
  color: white;
  line-height: 1;
  margin-bottom: 0.2rem;
  font-family: var(--font-en);
}

.w-stat-lbl { font-size: 0.65rem; color: rgba(255,255,255,0.75); font-weight: 600; }

/* ─── Container ──────────────────────────────────────── */
.container    { max-width: 1140px; margin: 0 auto; padding: 0 1.5rem; }
.container-sm { max-width: 760px;  margin: 0 auto; padding: 0 1.5rem; }
.container-md { max-width: 960px;  margin: 0 auto; padding: 0 1.5rem; }

/* ─── Utility ────────────────────────────────────────── */
.flex          { display: flex; }
.flex-col      { flex-direction: column; }
.items-center  { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.flex-1 { flex: 1; }
.text-center { text-align: center; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.hidden { display: none !important; }

/* ─── Animations ──────────────────────────────────────── */
.fade-in-up {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.5s cubic-bezier(0.34,1.1,0.64,1) forwards;
}

@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }

.delay-1 { animation-delay: 0.08s; }
.delay-2 { animation-delay: 0.16s; }
.delay-3 { animation-delay: 0.24s; }
.delay-4 { animation-delay: 0.32s; }
.delay-5 { animation-delay: 0.40s; }

/* Bounce on hover */
.hover-bounce:hover { animation: bounceUp 0.4s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes bounceUp { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Pulse */
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(184,149,79,0.4); }
  50%      { box-shadow: 0 0 0 10px rgba(184,149,79,0); }
}

.pulse-green { animation: pulse 2s infinite; }

/* ─── Stat Cards ──────────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1rem;
}

.stat-item {
  text-align: center;
  padding: 1.25rem;
  background: white;
  border: 2px solid #E8EDF2;
  border-radius: var(--r-lg);
  transition: var(--t-bounce);
  box-shadow: var(--shadow-sm);
}

.stat-item:hover {
  border-color: var(--brand-green);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.stat-value {
  font-size: 1.9rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 0.3rem;
  font-family: var(--font-en);
}

.stat-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 700;
}

/* ─── Responsive ──────────────────────────────────────── */
@media (max-width: 1024px) {
  .nav-links  { display: none; }
  .nav-burger { display: flex; }
  .container  { padding: 0 1rem; }
}

@media (max-width: 768px) {
  :root { --navbar-h: 60px; }
  .jawharah-nav  { padding: 0 1rem; }
  .nav-username  { display: none; }
  .nav-brand-name { display: none; }
  .welcome-banner { flex-direction: column; text-align: center; }
  .welcome-right  { justify-content: center; flex-wrap: wrap; }
}

@media (max-width: 480px) {
  .jawharah-nav  { padding: 0 0.75rem; }
  .nav-xp-pill   { display: none; }
  #toast-container { left: 0.5rem; right: 0.5rem; }
  .toast { min-width: unset; width: 100%; }
}

/* ─── Duolingo-style XP/Streak bar ──────────────────── */
.xp-streak-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem 1.25rem;
  background: white;
  border: 2px solid #E8EDF2;
  border-radius: var(--r-xl);
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.xsb-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.875rem;
  border-radius: var(--r-full);
  font-size: 0.82rem;
  font-weight: 800;
}

.xsb-item.xp    { background: rgba(255,200,0,0.1);  color: #8B6A00; border: 2px solid rgba(255,200,0,0.2); }
.xsb-item.streak{ background: rgba(255,150,0,0.1);  color: #805000; border: 2px solid rgba(255,150,0,0.2); }
.xsb-item.gems  { background: rgba(244,162,97,0.1); color: #A04000; border: 2px solid rgba(244,162,97,0.2); }

.xsb-item i { font-size: 1rem; }

.xsb-divider {
  width: 1px;
  height: 32px;
  background: #E2E8F0;
}

/* ─── Achievement Badges ─────────────────────────────── */
.achievement-card {
  background: white;
  border: 2px solid #E8EDF2;
  border-radius: var(--r-xl);
  padding: 1.25rem;
  text-align: center;
  transition: var(--t-bounce);
  box-shadow: var(--shadow-sm);
}

.achievement-card:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--shadow-md);
}

.achievement-icon {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  display: block;
}

.achievement-name {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.15rem;
}

.achievement-desc {
  font-size: 0.68rem;
  color: var(--text-muted);
}

/* ─── Lesson Page Styles ─────────────────────────────── */
.lesson-page-card {
  background: white;
  border: 2px solid #E8EDF2;
  border-radius: var(--r-xl);
  padding: 2rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.quiz-option {
  padding: 0.875rem 1.1rem;
  border: 2px solid #E2E8F0;
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: var(--t-bounce);
  text-align: right;
  font-size: 0.85rem;
  font-weight: 700;
  background: white;
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.quiz-option:hover:not(:disabled) {
  border-color: var(--brand-green);
  background: #F5EDE0;
  color: #8B6F3A;
  transform: translateX(-3px);
}

.quiz-option.correct {
  background: rgba(34,197,94,0.1);
  border-color: #22C55E;
  color: #166534;
}

.quiz-option.wrong {
  background: rgba(255,75,75,0.06);
  border-color: var(--brand-red);
  color: var(--brand-red);
}

.quiz-option:disabled { cursor: not-allowed; }

/* ─── Audio Button ───────────────────────────────────── */
.audio-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 2px solid #E2E8F0;
  background: white;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 0.85rem;
  transition: var(--t-bounce);
  box-shadow: var(--shadow-xs);
}

.audio-btn:hover {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
  background: rgba(28,176,246,0.06);
  transform: scale(1.1);
}

.audio-btn.playing {
  border-color: var(--brand-green);
  color: var(--brand-green);
  animation: pulse 1s infinite;
}

/* ==========================================================================
   GLOBAL LAYOUT CONTAINER & RESPONSIVE FOUNDATION
   ========================================================================== */
.container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media (max-width: 1024px) {
  .container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

@media (max-width: 768px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media (max-width: 480px) {
  .container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

@media (min-width: 1600px) {
  .container {
    max-width: 1400px;
  }
}

/* ==========================================================================
   FLOATING ACTION BUTTONS (BULLETPROOF SEPARATION)
   - Scroll-to-Top: STRICTLY FAR RIGHT (right: 25px / mobile: 16px)
   - AI Robot: STRICTLY FAR LEFT (left: 25px / mobile: 16px)
   - Overlap or joint positioning is strictly prevented
   ========================================================================== */
#jawharah-widgets {
  position: static !important;
  pointer-events: none !important;
  display: contents !important;
}

/* Scroll-to-Top Button (FAR RIGHT - على اليمين حصراً) */
.widget-scroll-top {
  position: fixed !important;
  bottom: 25px !important;
  right: 25px !important;
  left: auto !important;
  top: auto !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #B8954F, #8B6F3A) !important;
  color: #FFFFFF !important;
  border: 2px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 4px 18px rgba(184, 149, 79, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.25rem !important;
  z-index: 99999 !important;
  opacity: 0 !important;
  transform: translateY(20px) !important;
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
  pointer-events: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.widget-scroll-top.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

.widget-scroll-top:hover {
  transform: translateY(-4px) scale(1.06) !important;
  box-shadow: 0 8px 25px rgba(184, 149, 79, 0.7) !important;
}

/* NABRA AI Robot Button (FAR LEFT - على اليسار حصراً) */
.widget-ai-btn {
  position: fixed !important;
  bottom: 25px !important;
  left: 25px !important;
  right: auto !important;
  top: auto !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #2C3A2E, #1A1A1A) !important;
  color: #B8954F !important;
  border: 2px solid rgba(184, 149, 79, 0.55) !important;
  box-shadow: 0 6px 22px rgba(44, 58, 46, 0.6), 0 2px 6px rgba(0, 0, 0, 0.3) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.55rem !important;
  z-index: 99999 !important;
  pointer-events: auto !important;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.widget-ai-btn:hover {
  transform: translateY(-4px) scale(1.08) !important;
  box-shadow: 0 10px 30px rgba(184, 149, 79, 0.5) !important;
}

/* AI Chat Window (Anchored to Left Corner) */
.widget-ai-window {
  position: fixed !important;
  bottom: 95px !important;
  left: 25px !important;
  right: auto !important;
  width: 380px !important;
  max-width: calc(100vw - 40px) !important;
  height: 530px !important;
  max-height: calc(100vh - 120px) !important;
  z-index: 99998 !important;
}

/* ── Tablet Positioning (768px - 1024px) ── */
@media (max-width: 1024px) {
  .widget-scroll-top {
    bottom: 20px !important;
    right: 20px !important;
    left: auto !important;
  }
  .widget-ai-btn {
    bottom: 20px !important;
    left: 20px !important;
    right: auto !important;
  }
  .widget-ai-window {
    bottom: 86px !important;
    left: 20px !important;
    right: auto !important;
  }
}

/* ── Mobile Devices (iPhone 7/8/SE, Galaxy S10/S20, etc.) <= 640px ── */
@media (max-width: 640px) {
  .widget-scroll-top {
    bottom: 16px !important;
    right: 16px !important;
    left: auto !important;
    width: 48px !important;
    height: 48px !important;
    font-size: 1.15rem !important;
  }
  .widget-ai-btn {
    bottom: 16px !important;
    left: 16px !important;
    right: auto !important;
    width: 50px !important;
    height: 50px !important;
    font-size: 1.35rem !important;
  }
  .widget-ai-window {
    bottom: 76px !important;
    left: 10px !important;
    right: 10px !important;
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    height: calc(100vh - 96px) !important;
    max-height: calc(100vh - 96px) !important;
  }
}

/* ── Ultra-compact Phones <= 360px (iPhone SE 1st gen, older small screens) ── */
@media (max-width: 360px) {
  .widget-scroll-top {
    bottom: 12px !important;
    right: 10px !important;
    left: auto !important;
    width: 42px !important;
    height: 42px !important;
    font-size: 1rem !important;
  }
  .widget-ai-btn {
    bottom: 12px !important;
    left: 10px !important;
    right: auto !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 1.25rem !important;
  }
}

/* ==========================================================================
   CROSS-DEVICE RESPONSIVENESS & READABILITY FIXES
   - Guarantees high text contrast on mobile & older displays
   - Fixes dark-on-dark or light-on-light text visibility
   ========================================================================== */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  overflow-x: hidden;
  max-width: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* High contrast for common badges and cards */
.badge, .tag, .chip {
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Ensure inputs, buttons, and links have comfortable touch targets */
button, input, select, textarea, a {
  touch-action: manipulation;
}

/* Ensure tables are scrollable on mobile without breaking layout */
.table-responsive, table {
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}