/**
 * ╔══════════════════════════════════════════════════════════════╗
 * ║   Qubedu v5.2 — ملف الأنماط (نسخة محسّنة مع إصلاحات أمنية)  ║
 * ║   المطوّر: عبد الرحمن محمود فوزي | 01027812342              ║
 * ╠══════════════════════════════════════════════════════════════╣
 * ║  📌 دليل التخصيص السريع:                                     ║
 * ║  ┌─ الألوان الرئيسية  → قسم :root أسفله                     ║
 * ║  ├─ الثيمات المختلفة → [data-skin=...]                      ║
 * ║  ├─ الوضع الليلي    → [data-theme=dark] + .dark             ║
 * ║  ├─ الجلاسمورفيزم  → .study-tool-card و .study-tools-grid  ║
 * ║  ├─ الشات          → .chat-page و .chat-sidebar             ║
 * ║  └─ الريسبونسف     → آخر الملف @media queries              ║
 * ╚══════════════════════════════════════════════════════════════╝
 */

/* ══════════════════════════════════════════
   المتغيرات الرئيسية (ثيم فاتح افتراضي)
   ← غيّر القيم هنا لتغيير هوية الموقع كلها
══════════════════════════════════════════ */
:root{
  /* ── الألوان الأساسية ── */
  --pr:#6c5ce7;        /* البنفسجي الأساسي  ← غيّره لتغيير كل الثيم */
  --pr2:#a29bfe;       /* البنفسجي الفاتح */
  --pr3:#4834d4;       /* البنفسجي الغامق */
  --pr4:rgba(108,92,231,.1); /* خلفية شفافة للـ hover */

  /* ── ألوان الحالات ── */
  --ok:#00b894;        /* أخضر النجاح */
  --warn:#fdcb6e;      /* أصفر التحذير */
  --err:#ff7675;       /* أحمر الخطأ */
  --info:#0984e3;      /* أزرق المعلومات */
  --gold:#f59e0b;      /* الذهبي */

  /* ── خلفية وبطاقات ── */
  --bg:#f0f2f5;
  --card:#ffffff;
  --card2:#f8f7ff;
  --surface:rgba(108,92,231,.06);

  /* ── النصوص ── */
  --tx:#2d3436;
  --tx2:#636e72;
  --tx3:#b2bec3;

  /* ── الحدود والظلال ── */
  --border:#e8edf2;
  --border2:rgba(108,92,231,.15);
  --overlay:rgba(15,10,40,.6);
  --shadow:0 2px 16px rgba(108,92,231,.09);
  --shadow2:0 8px 32px rgba(108,92,231,.16);
  --shadow3:0 20px 60px rgba(108,92,231,.22);
  --shadow-gold:0 8px 24px rgba(245,158,11,.3);

  /* ── التدرجات ── */
  --grad:linear-gradient(135deg,#6c5ce7 0%,#a29bfe 100%);
  --grad-dark:linear-gradient(135deg,#4834d4 0%,#6c5ce7 100%);
  --grad-pink:linear-gradient(135deg,#fd79a8,#e84393);
  --grad-green:linear-gradient(135deg,#00b894,#55efc4);
  --grad-gold:linear-gradient(135deg,#f59e0b,#fcd34d);
  --grad-topbar:linear-gradient(135deg,rgba(72,52,212,.93),rgba(108,92,231,.91),rgba(162,155,254,.88));

  /* ── الأبعاد ── */
  --r:14px; --r2:10px; --r3:20px; --r4:26px;
  --topbar:64px;
  --bottomnav:68px;

  /*
   * ── [FIX #6b] متغير Glow ديناميكي ──
   * يُحسب تلقائياً من اللون الأساسي --pr بدلاً من التصلّب اليدوي.
   * عند تبديل السكين، يتلاءم اللون آلياً مع الثيم الجديد.
   * ملاحظة: color-mix() مدعوم في كل المتصفحات الحديثة.
   */
  --pr-glow:color-mix(in srgb, var(--pr) 15%, transparent);
}

/* ══════════════════════════════════════════
   ثيمات الألوان البديلة
   ← أضف ثيماً جديداً بنفس النمط
══════════════════════════════════════════ */
[data-skin=noon]{
  --pr:#f59e0b;--pr2:#fcd34d;--pr3:#b45309;--pr4:rgba(245,158,11,.1);
  --grad:linear-gradient(135deg,#b45309,#fcd34d);
  --grad-dark:linear-gradient(135deg,#92400e,#f59e0b);
  --grad-topbar:linear-gradient(135deg,rgba(180,83,9,.93),rgba(245,158,11,.91),rgba(253,211,77,.88));
  /* --pr-glow يتحدث تلقائياً عبر color-mix لأنه يرث --pr */
}
[data-skin=neon]{
  --pr:#8b5cf6;--pr2:#ec4899;--pr3:#7c3aed;--pr4:rgba(139,92,246,.1);
  --grad:linear-gradient(135deg,#7c3aed,#ec4899);
  --grad-dark:linear-gradient(135deg,#5b21b6,#7c3aed);
  --grad-topbar:linear-gradient(135deg,rgba(91,33,182,.93),rgba(139,92,246,.91),rgba(236,72,153,.88));
}
[data-skin=ocean]{
  --pr:#0ea5e9;--pr2:#22d3ee;--pr3:#0369a1;--pr4:rgba(14,165,233,.1);
  --grad:linear-gradient(135deg,#0369a1,#22d3ee);
  --grad-dark:linear-gradient(135deg,#075985,#0369a1);
  --grad-topbar:linear-gradient(135deg,rgba(3,105,161,.93),rgba(14,165,233,.91),rgba(34,211,238,.88));
}

/* ══════════════════════════════════════════
   الوضع الليلي — [data-theme=dark]
   ← يتم تفعيله تلقائياً عند toggleTheme()

   [FIX #6a] إصلاح تباين الوضع الليلي (WCAG AA):
   - رُفع لون --tx2 من #94a3b8 إلى #b8c8d8 لتحسين قراءة النص الثانوي
   - رُفع لون --border من rgba(108,92,231,.13) إلى rgba(255,255,255,.13)
     لرؤيته بوضوح فوق خلفية --card الداكنة
══════════════════════════════════════════ */
[data-theme=dark]{
  --bg:#0a0a14;--card:#13131f;--card2:#1a1a2e;
  --surface:rgba(108,92,231,.07);
  --tx:#e8e8f0;
  /* ↑ رُفع من #94a3b8 → #b8c8d8 (تباين 4.7:1 على --card) [FIX #6a] */
  --tx2:#b8c8d8;
  --tx3:#647080;
  /* ↑ رُفع من #475569 → #647080 للوضوح */
  /* ↑ رُفع شفافية الحدود لوضوح أفضل على الخلفية الداكنة [FIX #6a] */
  --border:rgba(255,255,255,.13);
  --border2:rgba(108,92,231,.28);
  --overlay:rgba(0,0,0,.7);
  --shadow:0 2px 16px rgba(0,0,0,.45);
  --shadow2:0 8px 32px rgba(0,0,0,.6);
  --shadow3:0 20px 60px rgba(0,0,0,.7);
}
[data-theme=dark] body{
  background:
    radial-gradient(ellipse 70% 45% at 85% 0%,rgba(72,52,212,.2),transparent),
    radial-gradient(ellipse 55% 40% at 15% 100%,rgba(0,184,148,.08),transparent),
    var(--bg);
}

/* ══════════════════════════════════════════
   🔗 مزامنة الوضع الليلي مع Tailwind CSS
   ← هذا القسم يربط class="dark" (Tailwind)
      بمتغيرات CSS المحلية var(--card) إلخ.
   ← أي مكون يستخدم dark:bg-gray-700 وما شابه
      سيتزامن تلقائياً مع ثيم المنصة.
══════════════════════════════════════════ */
.dark{
  --bg:#0a0a14;
  --card:#13131f;
  --card2:#1a1a2e;
  --surface:rgba(108,92,231,.07);
  --tx:#e8e8f0;
  --tx2:#b8c8d8; /* [FIX #6a] رُفع التباين */
  --tx3:#647080;
  --border:rgba(255,255,255,.13); /* [FIX #6a] حدود أوضح */
  --border2:rgba(108,92,231,.28);
  --overlay:rgba(0,0,0,.7);
  --shadow:0 2px 16px rgba(0,0,0,.45);
  --shadow2:0 8px 32px rgba(0,0,0,.6);
  --shadow3:0 20px 60px rgba(0,0,0,.7);
}
/* ← Tailwind dark: utilities تستخدم CSS vars المحدّثة فوق */
.dark .bg-white       { background-color: var(--card) !important; }
.dark .bg-gray-50     { background-color: var(--card2) !important; }
.dark .bg-gray-100    { background-color: var(--bg) !important; }
.dark .bg-gray-700    { background-color: var(--card2) !important; }
.dark .bg-gray-800    { background-color: var(--card) !important; }
.dark .bg-gray-900    { background-color: var(--bg) !important; }
.dark .text-gray-900  { color: var(--tx) !important; }
.dark .text-gray-700  { color: var(--tx2) !important; }
.dark .text-gray-500  { color: var(--tx3) !important; }
.dark .border-gray-200{ border-color: var(--border) !important; }

/* ══════════════════════════════════════════
   الريسيت الأساسي
══════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{font-size:16px;scroll-behavior:smooth}
body{
  font-family:'Tajawal',sans-serif;background:var(--bg);color:var(--tx);
  min-height:100dvh;overflow-x:hidden;padding-bottom:var(--bottomnav);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  transition:background .4s,color .3s;
}

/*
 * [FIX #4] إصلاح تداخل المحتوى مع شريط التنقل السفلي على الموبايل.
 * يُضاف padding-bottom ديناميكي يأخذ بعين الاعتبار safe-area-inset
 * للأجهزة ذات الشق (notch) مثل iPhone X وما بعده.
 */
@media(max-width:767px){
  body{
    padding-bottom:calc(var(--bottomnav) + env(safe-area-inset-bottom));
  }
}

input,textarea,select,button{font-family:inherit}
img{max-width:100%;display:block}
a{color:var(--pr);text-decoration:none}
input[type=file]{display:none!important}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-thumb{background:var(--pr2);border-radius:99px}
:focus-visible{outline:2px solid var(--pr);outline-offset:3px;border-radius:6px}

/*
 * [FIX #7] قفل السكرول عند فتح المودال.
 * تُضاف هذه الكلاسة على <body> برمجياً من app.js عند togModal().
 * touch-action: none يمنع السكرول باللمس على iOS أيضاً.
 */
body.modal-open{
  overflow:hidden;
  touch-action:none;
}

/* ══════════════════════════════════════════
   كيفريمات الأنيميشن المركزية
   ← hardware-accelerated بـ transform و opacity فقط
══════════════════════════════════════════ */
@keyframes spin        {to{transform:rotate(360deg)}}
@keyframes fadeUp      {from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn      {from{opacity:0}to{opacity:1}}
@keyframes scaleIn     {from{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}
@keyframes scaleInBig  {from{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes slideUp     {from{transform:translateY(70px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes slideIn     {from{transform:translateX(30px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes toastIn     {from{opacity:0;transform:translateY(-14px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes xpFloat     {0%{opacity:0;transform:translateY(0) scale(.8)}30%{opacity:1}100%{opacity:0;transform:translateY(-55px) scale(1)}}
@keyframes pulse       {0%,100%{opacity:1}50%{opacity:.55}}
@keyframes tBounce     {0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}}
@keyframes liveGlow    {0%,100%{box-shadow:0 0 0 rgba(0,184,148,0)}50%{box-shadow:0 0 18px rgba(0,184,148,.4)}}
@keyframes logoPop     {0%,100%{transform:scale(1) rotate(-1deg)}50%{transform:scale(1.08) rotate(1deg)}}
@keyframes shimmer     {0%{transform:translateX(200%)}100%{transform:translateX(-200%)}}
@keyframes flipCard    {from{transform:rotateY(0)}to{transform:rotateY(180deg)}}
@keyframes gradShift   {0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes glowPulse   {0%,100%{box-shadow:0 0 0 0 rgba(108,92,231,.4)}50%{box-shadow:0 0 0 8px rgba(108,92,231,0)}}
@keyframes iconSpin    {from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes floatUp     {0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes cardEntry   {from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
/* Zen Mode animations */
@keyframes zenFadeIn   {from{opacity:0}to{opacity:1}}

/* ══════════════════════════════════════════
   اللودر
══════════════════════════════════════════ */
#LD{
  position:fixed;inset:0;z-index:9999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  transition:opacity .55s,visibility .55s;
  background:linear-gradient(145deg,#3a1fa3,#6c5ce7,#a29bfe,#fd79a8);
  background-size:300% 300%;animation:gradShift 4s ease infinite;
}
#LD.H{opacity:0;visibility:hidden;pointer-events:none}
.ld-logo{font-size:96px;font-weight:900;color:#fff;letter-spacing:-5px;animation:logoPop 2.5s ease-in-out infinite;text-shadow:0 8px 40px rgba(0,0,0,.25);line-height:1}
.ld-ring{width:44px;height:44px;border:3px solid rgba(255,255,255,.22);border-top-color:#fff;border-radius:50%;animation:spin .75s linear infinite}
.ld-txt{color:rgba(255,255,255,.8);font-size:13px;font-weight:600;letter-spacing:2px}

/* ══════════════════════════════════════════
   المصادقة
══════════════════════════════════════════ */
#AUTH{position:fixed;inset:0;z-index:8000;display:none;align-items:center;justify-content:center;padding:20px;background:linear-gradient(145deg,#3a1fa3,#6c5ce7,#a29bfe,#fd79a8);background-size:300% 300%;animation:gradShift 5s ease infinite}
#AUTH.on{display:flex}
.auth-card{
  width:100%;max-width:400px;background:rgba(255,255,255,.96);
  backdrop-filter:blur(28px);border-radius:var(--r4);padding:40px 30px;
  box-shadow:0 40px 100px rgba(0,0,0,.25);text-align:center;
  animation:scaleInBig .5s cubic-bezier(.34,1.56,.64,1) both;
}
[data-theme=dark] .auth-card,.dark .auth-card{background:rgba(19,19,31,.97)}
.auth-logo{font-size:80px;font-weight:900;letter-spacing:-4px;line-height:1;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:6px}
.auth-tag{color:var(--tx2);font-size:14px;margin-bottom:30px;line-height:1.75}
.auth-btn{
  width:100%;padding:14px 18px;background:var(--card);border:2px solid var(--border);
  border-radius:15px;font-size:15px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:12px;
  transition:border-color .25s,box-shadow .25s,transform .25s;color:var(--tx);box-shadow:var(--shadow);margin-bottom:10px;
  will-change:transform;
}
[data-theme=dark] .auth-btn,.dark .auth-btn{background:var(--card2)}
.auth-btn:hover{border-color:var(--pr);box-shadow:var(--shadow2);transform:translateY(-2px)}
.auth-btn:active{transform:scale(.97)}
.auth-btn.ghost{background:transparent;color:var(--tx2);box-shadow:none}
.auth-btn.ghost:hover{background:var(--surface)}

/* ══════════════════════════════════════════
   التوب بار
══════════════════════════════════════════ */
.topbar{
  position:sticky;top:0;z-index:200;height:var(--topbar);
  display:flex;align-items:center;justify-content:space-between;padding:0 12px;
  background:var(--grad-topbar);backdrop-filter:blur(24px) saturate(180%);
  box-shadow:0 4px 30px rgba(72,52,212,.3),inset 0 -1px 0 rgba(255,255,255,.13);
}
.topbar-logo{font-size:27px;font-weight:900;color:#fff;letter-spacing:-2px;cursor:pointer;text-shadow:0 2px 10px rgba(0,0,0,.18);transition:transform .2s}
.topbar-logo:hover{transform:scale(1.05)}
.topbar-right{display:flex;gap:5px;align-items:center}
.tbtn{
  width:40px;height:40px;border-radius:13px;border:none;cursor:pointer;
  background:rgba(255,255,255,.17);color:#fff;font-size:16px;
  display:flex;align-items:center;justify-content:center;
  transition:background .28s,transform .28s,box-shadow .28s;
  position:relative;backdrop-filter:blur(8px);will-change:transform;
}
.tbtn:hover{background:rgba(255,255,255,.3);transform:scale(1.1) translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,.18)}
.tbtn:active{transform:scale(.93)}
.tbtn-badge{
  position:absolute;top:-3px;left:-3px;min-width:17px;height:17px;
  background:var(--err);color:#fff;font-size:9px;font-weight:900;
  border-radius:9px;display:none;align-items:center;justify-content:center;
  padding:0 3px;border:2px solid rgba(60,40,180,.7);
}
.tbtn-badge.on{display:flex}
.topbar-av{
  width:38px;height:38px;border-radius:50%;overflow:hidden;cursor:pointer;
  border:2px solid rgba(255,255,255,.45);display:flex;align-items:center;
  justify-content:center;font-size:15px;font-weight:700;color:#fff;
  transition:transform .25s,box-shadow .25s;box-shadow:0 2px 10px rgba(0,0,0,.2);
}
.topbar-av:hover{transform:scale(1.1);box-shadow:0 4px 14px rgba(0,0,0,.28)}
.topbar-av img{width:100%;height:100%;object-fit:cover}

/* ══════════════════════════════════════════
   شريط الإعلانات
══════════════════════════════════════════ */
.ann-bar{position:sticky;top:var(--topbar);z-index:190;overflow:hidden}
.ann-card{display:flex;align-items:stretch;cursor:pointer;min-height:54px;position:relative;overflow:hidden}
.ann-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 75% 50%,rgba(255,255,255,.14),transparent 60%);pointer-events:none}
.ann-stripe{width:4px;background:rgba(255,255,255,.5);flex-shrink:0}
.ann-img{width:56px;height:56px;object-fit:cover;flex-shrink:0}
.ann-body{flex:1;min-width:0;padding:8px 12px;display:flex;flex-direction:column;justify-content:center;gap:2px}
.ann-badge{font-size:9px;font-weight:900;color:rgba(255,255,255,.72);letter-spacing:2px;text-transform:uppercase}
.ann-title{font-size:13px;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ann-sub{font-size:11px;color:rgba(255,255,255,.82);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ann-nav{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 8px;gap:5px;flex-shrink:0}
.ann-nav-btn{width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.2);border:none;color:#fff;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s}
.ann-nav-btn:hover{background:rgba(255,255,255,.35)}
.ann-dots{display:flex;gap:4px}
.ann-dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.35);transition:.3s}
.ann-dot.on{background:#fff;width:14px;border-radius:3px}
.ann-empty-bar{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px;font-size:12px;color:var(--tx3);background:var(--card);border-bottom:1px solid var(--border)}

/* ══════════════════════════════════════════
   الصفحات
══════════════════════════════════════════ */
.pages{max-width:640px;margin:0 auto;padding:14px 12px 20px}
.page{display:none}
.page.on{display:block;animation:fadeUp .24s cubic-bezier(.16,1,.3,1) both}

/* ══════════════════════════════════════════
   شريط التنقل السفلي
══════════════════════════════════════════ */
.bnav{
  position:fixed;bottom:0;left:0;right:0;height:var(--bottomnav);z-index:200;
  display:flex;justify-content:space-around;align-items:center;
  background:rgba(255,255,255,.93);backdrop-filter:blur(24px) saturate(170%);
  border-top:1px solid rgba(108,92,231,.1);
  box-shadow:0 -8px 36px rgba(108,92,231,.12);
  /*
   * [FIX #4] دعم safe-area-inset للأجهزة ذات الشق.
   * padding-bottom يضمن عدم إخفاء أي زر خلف شريط المنزل في iOS.
   */
  padding-bottom:env(safe-area-inset-bottom);
}
[data-theme=dark] .bnav,.dark .bnav{background:rgba(19,19,31,.94);border-top-color:rgba(108,92,231,.16)}
.bni{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;color:var(--tx3);font-size:10px;font-weight:700;padding:8px 4px;border-radius:14px;transition:color .22s;position:relative;border:none;background:none}
.bni .ni{font-size:22px;line-height:1;transition:transform .25s,filter .25s}
.bni.on{color:var(--pr)}
.bni.on .ni{transform:scale(1.15) translateY(-1px);filter:drop-shadow(0 3px 8px rgba(108,92,231,.4))}
.bni:active{transform:scale(.94)}
.bni-dot{position:absolute;top:5px;right:7px;width:8px;height:8px;background:var(--err);border-radius:50%;display:none;border:2px solid var(--card)}
.bni-dot.on{display:block}
.bni-fab{
  width:56px;height:56px;border-radius:50%;background:var(--grad);
  display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;
  cursor:pointer;margin-top:-22px;border:none;flex-shrink:0;
  box-shadow:0 8px 26px rgba(72,52,212,.5),0 0 0 4px rgba(255,255,255,.92);
  transition:transform .32s cubic-bezier(.34,1.56,.64,1),box-shadow .32s;
  will-change:transform;
}
.bni-fab:hover{transform:scale(1.1) translateY(-5px);box-shadow:0 14px 36px rgba(72,52,212,.55)}
.bni-fab:active{transform:scale(.95)}

/* ══════════════════════════════════════════
   المكوّنات المشتركة
══════════════════════════════════════════ */
.card{background:var(--card);border-radius:var(--r3);padding:18px;margin-bottom:12px;box-shadow:var(--shadow);border:1px solid rgba(108,92,231,.06);transition:transform .22s,box-shadow .22s}
.card-hover:hover{transform:translateY(-2px);box-shadow:var(--shadow2)}
.H{display:none!important}
.row{display:flex;gap:10px;align-items:center}
.flex1{flex:1;min-width:0}
.sec-h{font-size:16px;font-weight:800;margin-bottom:14px;display:flex;align-items:center;gap:8px;color:var(--tx)}
.empty{text-align:center;padding:40px 16px;color:var(--tx3)}
.empty .ei{font-size:52px;display:block;margin-bottom:12px;opacity:.4}
.empty .et{font-size:14px;font-weight:600;opacity:.7}
.spin-el{width:28px;height:28px;border:3px solid var(--border);border-top-color:var(--pr);border-radius:50%;animation:spin .9s linear infinite;margin:24px auto;display:block}
.av{border-radius:50%;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff}
.av img{width:100%;height:100%;object-fit:cover}

/* مدخلات */
.inp{
  width:100%;padding:12px 15px;border:2px solid var(--border);border-radius:var(--r2);
  font-size:14px;font-family:inherit;color:var(--tx);background:var(--bg);
  transition:border-color .22s,background .22s,box-shadow .22s;outline:none;
}
.inp:focus{border-color:var(--pr);background:var(--card);box-shadow:0 0 0 3px var(--pr-glow)}
.inp::placeholder{color:var(--tx3)}
textarea.inp{resize:none;line-height:1.65}
select.inp{cursor:pointer}

/* ── أزرار بميكرو-إنتراكشنز محسّنة ── */
.btn{
  padding:12px 20px;background:var(--grad);color:#fff;border:none;border-radius:13px;
  font-size:14px;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s;
  box-shadow:0 4px 18px var(--pr-glow);font-family:inherit; /* [FIX #6b] glow ديناميكي */
  will-change:transform;
}
.btn:hover{transform:translateY(-2px) scale(1.01);box-shadow:0 8px 26px var(--pr-glow)}
.btn:active{transform:scale(.96)}
.btn-out{
  padding:11px 18px;background:transparent;color:var(--pr);border:2px solid var(--pr2);
  border-radius:13px;font-size:14px;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  transition:background .22s,transform .22s,border-color .22s;font-family:inherit;will-change:transform;
}
.btn-out:hover{background:var(--pr4);transform:translateY(-1px);border-color:var(--pr)}
.btn-out:active{transform:scale(.97)}
.btn-sm{padding:8px 14px;font-size:13px;border-radius:10px}
.btn-red{background:linear-gradient(135deg,#ff7675,#e17055)!important;box-shadow:0 4px 16px rgba(255,118,117,.32)!important}
.btn-red:hover{box-shadow:0 8px 24px rgba(255,118,117,.44)!important}
.btn-green{background:var(--grad-green)!important;box-shadow:0 4px 16px rgba(0,184,148,.3)!important}
.icon-btn{
  width:40px;height:40px;border-radius:11px;border:2px solid var(--border);
  background:var(--card);font-size:17px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .22s,background .22s,color .22s,transform .22s;
  color:var(--tx2);will-change:transform;
}
.icon-btn:hover{border-color:var(--pr2);background:var(--pr4);color:var(--pr);transform:scale(1.06)}
.icon-btn:active{transform:scale(.93)}
.W100{width:100%}

/* التبديل */
.toggle{width:44px;height:25px;border-radius:999px;background:var(--border);border:none;cursor:pointer;position:relative;transition:background .3s;flex-shrink:0}
.toggle::after{content:'';position:absolute;top:2.5px;right:2.5px;width:20px;height:20px;border-radius:50%;background:#fff;transition:right .3s;box-shadow:0 2px 6px rgba(0,0,0,.22)}
.toggle.on{background:var(--ok)}
.toggle.on::after{right:calc(100% - 22.5px)}

/* التبويبات */
.tabs{display:flex;background:var(--bg);border-radius:var(--r);padding:4px;gap:4px;margin-bottom:14px;border:2px solid var(--border)}
.tab{flex:1;padding:9px;text-align:center;border-radius:10px;cursor:pointer;font-size:13px;font-weight:700;color:var(--tx2);transition:background .22s,color .22s,box-shadow .22s;border:none;background:none;font-family:inherit}
.tab.on{background:var(--grad);color:#fff;box-shadow:0 4px 14px var(--pr-glow)} /* [FIX #6b] */

/* التوست */
.toast-c{position:fixed;top:80px;left:50%;transform:translateX(-50%);z-index:3000;display:flex;flex-direction:column;gap:8px;width:92%;max-width:380px;pointer-events:none}
.toast{background:var(--card);border-radius:15px;padding:13px 16px;font-size:13px;font-weight:700;box-shadow:var(--shadow3);display:flex;align-items:center;gap:10px;border:1px solid var(--border);animation:toastIn .3s cubic-bezier(.34,1.56,.64,1)}
.toast.ok{border-right:4px solid var(--ok)}
.toast.err{border-right:4px solid var(--err)}
.toast.warn{border-right:4px solid var(--warn)}
.toast.info{border-right:4px solid var(--info)}
.toast.out{animation:fadeIn .25s ease reverse forwards}

/* المودال */
.ov{position:fixed;inset:0;background:var(--overlay);backdrop-filter:blur(8px);z-index:500;display:none;align-items:flex-end;justify-content:center}
.ov.on{display:flex;animation:fadeIn .2s ease}
.modal{background:var(--card);border-radius:28px 28px 0 0;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;padding:24px 18px 32px;animation:slideUp .32s cubic-bezier(.22,1,.36,1)}
.modal-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;padding-bottom:14px;border-bottom:2px solid var(--border)}
.modal-title{font-size:17px;font-weight:800}
.modal-x{background:var(--bg);border:none;color:var(--tx2);cursor:pointer;width:36px;height:36px;border-radius:50%;font-size:17px;display:flex;align-items:center;justify-content:center;transition:background .22s,transform .22s}
.modal-x:hover{background:var(--border);transform:rotate(90deg)}
.modal-fld{margin-bottom:12px}
.modal-lbl{display:block;font-size:11px;font-weight:700;color:var(--tx3);margin-bottom:6px;letter-spacing:.6px;text-transform:uppercase}

/* التأكيد */
.confirm-ov{position:fixed;inset:0;background:var(--overlay);backdrop-filter:blur(8px);z-index:800;display:none;align-items:center;justify-content:center;padding:20px}
.confirm-ov.on{display:flex}
.confirm-box{background:var(--card);border-radius:26px;padding:32px 26px;max-width:360px;width:100%;text-align:center;animation:scaleIn .3s cubic-bezier(.34,1.56,.64,1);box-shadow:var(--shadow3)}
.confirm-ico{font-size:48px;margin-bottom:14px}
.confirm-title{font-size:19px;font-weight:900;margin-bottom:8px}
.confirm-msg{font-size:14px;color:var(--tx2);margin-bottom:24px;line-height:1.65}
.confirm-btns{display:flex;gap:10px}
.confirm-btns .btn,.confirm-btns .btn-out{flex:1}

/* قائمة السياق */
.ctx{position:fixed;background:var(--card);border:1.5px solid var(--border);border-radius:16px;padding:7px;min-width:185px;box-shadow:var(--shadow3);z-index:600;display:none}
.ctx.on{display:block;animation:scaleIn .15s ease}
.ctx-i{padding:10px 14px;cursor:pointer;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;border-radius:10px;transition:background .15s;color:var(--tx)}
.ctx-i:hover{background:var(--bg)}
.ctx-i .ctx-ic{width:22px;text-align:center;font-size:14px}
.ctx-i.red{color:var(--err)}

/* مشاهد الصور */
.imgv{position:fixed;inset:0;background:rgba(0,0,0,.96);z-index:900;display:none;align-items:center;justify-content:center;padding:20px}
.imgv.on{display:flex}
.imgv img{max-width:100%;max-height:92vh;object-fit:contain;border-radius:14px}
.imgv-close{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.15);border:1.5px solid rgba(255,255,255,.25);color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s}
.imgv-close:hover{background:rgba(255,255,255,.25)}

/* XP Pop */
.xp-pop{position:fixed;font-size:15px;font-weight:900;color:var(--pr);pointer-events:none;z-index:9999;animation:xpFloat 1.1s ease forwards;text-shadow:0 2px 8px rgba(108,92,231,.4)}
.xp-wrap{margin:10px 0}
.lv-badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--pr3);background:var(--pr4);padding:4px 12px;border-radius:999px;margin-bottom:6px}
.xp-track{height:9px;background:var(--border);border-radius:999px;overflow:hidden;position:relative}
.xp-fill{height:100%;background:var(--grad);border-radius:999px;transition:width .75s cubic-bezier(.34,1.56,.64,1)}
.xp-fill::after{content:'';position:absolute;top:0;right:0;height:100%;width:45px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5));animation:shimmer 2.5s ease-in-out infinite}

/* حالات التحميل للأزرار */
.btn-loading{position:relative;pointer-events:none;opacity:.8}
.btn-loading::after{content:'';position:absolute;top:50%;right:12px;transform:translateY(-50%);width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}

/* رفع الصور */
.img-upload-btn{position:relative;overflow:hidden;cursor:pointer}
.img-upload-btn input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.img-preview-wrap{position:relative;display:inline-block;margin-top:8px}
.img-preview-wrap img{max-height:120px;border-radius:14px;object-fit:cover}
.img-preview-rm{position:absolute;top:-6px;left:-6px;width:22px;height:22px;border-radius:50%;background:var(--err);color:#fff;border:none;cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;font-weight:900;box-shadow:0 2px 6px rgba(0,0,0,.2)}

/* ══════════════════════════════════════════
   🔮 GLASSMORPHISM — أدوات الدراسة
══════════════════════════════════════════ */
.study-tools-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:14px;}
.study-tool-card{
  background:rgba(255,255,255,.72);backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);border:1px solid rgba(108,92,231,.12);
  border-radius:22px;padding:20px;cursor:pointer;text-align:center;
  transition:transform .28s cubic-bezier(.34,1.56,.64,1),box-shadow .28s,border-color .28s,background .28s;
  will-change:transform;position:relative;overflow:hidden;
}
.study-tool-card::before{content:'';position:absolute;inset:0;background:var(--grad);opacity:0;transition:opacity .3s;z-index:0;}
.study-tool-card:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 20px 50px var(--pr-glow),0 0 0 1px rgba(108,92,231,.15),inset 0 0 20px rgba(255,255,255,.1);border-color:var(--pr2);background:rgba(255,255,255,.86);}
.study-tool-card:hover::before{opacity:.07}
.study-tool-card:active{transform:scale(.97) translateY(-2px)}
.study-tool-card>*{position:relative;z-index:1}
[data-theme=dark] .study-tool-card,.dark .study-tool-card{background:rgba(20,20,40,.65);border-color:rgba(108,92,231,.18);}
[data-theme=dark] .study-tool-card:hover,.dark .study-tool-card:hover{background:rgba(30,30,55,.75);}
.study-tool-ico{font-size:36px;margin-bottom:10px;display:block;transition:transform .3s cubic-bezier(.34,1.56,.64,1),filter .3s;}
.study-tool-card:hover .study-tool-ico{transform:scale(1.2) rotate(-5deg);filter:drop-shadow(0 4px 12px var(--pr-glow));}
.study-tool-name{font-size:14px;font-weight:800;color:var(--tx)}
.study-tool-sub{font-size:12px;color:var(--tx3);margin-top:3px}

/* ══════════════════════════════════════════
   Glass utility class
══════════════════════════════════════════ */
.glass{background:rgba(255,255,255,.14)!important;backdrop-filter:blur(20px) saturate(160%)!important;-webkit-backdrop-filter:blur(20px) saturate(160%)!important;border:1px solid rgba(255,255,255,.22)!important;}
[data-theme=dark] .glass,.dark .glass{background:rgba(20,20,40,.55)!important;border-color:rgba(108,92,231,.2)!important;}

/* ══════════════════════════════════════════
   الصفحة الرئيسية
══════════════════════════════════════════ */
.home-hdr{border-radius:var(--r4);padding:22px;margin-bottom:14px;position:relative;overflow:hidden;background:linear-gradient(145deg,var(--pr3) 0%,var(--pr) 45%,var(--pr2) 80%,#c3b5fd 100%);box-shadow:0 16px 44px var(--pr-glow);}
.home-hdr::before{content:'';position:absolute;top:-45px;right:-45px;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none}
.home-hdr::after{content:'';position:absolute;bottom:-50px;left:-25px;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.05);pointer-events:none}
.h-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;position:relative;z-index:1}
.h-user{display:flex;align-items:center;gap:12px}
.h-name{font-size:18px;font-weight:900;color:#fff;line-height:1.25}
.h-sub{font-size:12px;color:rgba(255,255,255,.82);margin-top:3px}
.h-ico-btn{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.2);border:none;color:#fff;font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .22s,transform .22s}
.h-ico-btn:hover{background:rgba(255,255,255,.32);transform:scale(1.08)}
.h-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;position:relative;z-index:1}
.h-stat{background:rgba(255,255,255,.16);backdrop-filter:blur(12px);border-radius:16px;padding:12px;text-align:center;border:1px solid rgba(255,255,255,.2);cursor:pointer;transition:background .22s,transform .22s}
.h-stat:hover{background:rgba(255,255,255,.28);transform:translateY(-2px)}
.h-num{font-size:23px;font-weight:900;color:#fff}
.h-lbl{font-size:10px;color:rgba(255,255,255,.82);margin-top:2px}

/* أزرار سريعة */
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:14px}
.qa-btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px;background:var(--card);border:2px solid rgba(108,92,231,.07);border-radius:18px;cursor:pointer;font-size:11px;font-weight:700;color:var(--tx2);transition:background .22s,border-color .22s,color .22s,transform .22s,box-shadow .22s;font-family:inherit;will-change:transform;}
.qa-btn .qi{font-size:22px;line-height:1;transition:transform .22s}
.qa-btn:hover{background:var(--pr4);border-color:var(--pr2);color:var(--pr);transform:translateY(-3px);box-shadow:var(--shadow2)}
.qa-btn:hover .qi{transform:scale(1.18) rotate(-5deg)}
.qa-btn:active{transform:scale(.95)}

/* التحدي اليومي */
.dc-card{border-radius:var(--r3);padding:18px;margin-bottom:14px;color:#fff;background:var(--grad-gold);position:relative;overflow:hidden;box-shadow:var(--shadow-gold)}
.dc-card::before{content:'';position:absolute;top:-30px;right:-30px;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.12);pointer-events:none}
.dc-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.25);border-radius:999px;padding:5px 14px;font-size:11px;font-weight:800;margin-bottom:10px}
.dc-q{font-size:15px;font-weight:800;margin-bottom:13px;line-height:1.55;position:relative}
.dc-opt{width:100%;display:flex;align-items:center;gap:10px;padding:11px 14px;background:rgba(255,255,255,.2);border:1.5px solid rgba(255,255,255,.35);border-radius:13px;font-size:13px;font-weight:700;color:#fff;cursor:pointer;text-align:right;transition:background .22s,transform .22s;margin-bottom:7px;font-family:inherit}
.dc-opt:hover:not(:disabled){background:rgba(255,255,255,.35);transform:translateX(-4px)}
.dc-opt.correct{background:rgba(0,184,148,.4);border-color:rgba(0,230,180,.6)}
.dc-opt.wrong{background:rgba(255,118,117,.4);border-color:rgba(255,130,130,.6)}
.dc-opt:disabled{cursor:default}
.dc-opt-n{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;flex-shrink:0}
.dc-res{margin-top:12px;font-size:14px;font-weight:800}
.dc-xp{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.28);border-radius:999px;padding:6px 18px;font-size:14px;font-weight:900}

/* إعلانات تجارية */
.ads-strip{display:flex;gap:10px;overflow-x:auto;padding:4px 0 8px;scrollbar-width:none}
.ads-strip::-webkit-scrollbar{display:none}
.ad-card-strip{min-width:200px;border-radius:16px;overflow:hidden;cursor:pointer;position:relative;flex-shrink:0;height:92px;box-shadow:var(--shadow);border:1px solid var(--border);transition:transform .22s,box-shadow .22s}
.ad-card-strip:hover{transform:translateY(-3px);box-shadow:var(--shadow2)}
.ad-card-strip img,.ad-strip-bg{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.ad-strip-bg{display:flex;align-items:center;justify-content:center;font-size:36px;background:var(--grad)}
.ad-strip-ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.68))}
.ad-strip-lbl{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.5);color:#fff;font-size:9px;font-weight:700;padding:2px 7px;border-radius:6px;backdrop-filter:blur(4px)}
.ad-strip-body{position:absolute;bottom:0;left:0;right:0;padding:10px 11px}
.ad-strip-title{color:#fff;font-size:12px;font-weight:800;line-height:1.3;text-shadow:0 1px 4px rgba(0,0,0,.4)}
.ads-banner{border-radius:20px;overflow:hidden;margin-bottom:13px;box-shadow:var(--shadow2);cursor:pointer;position:relative;transition:transform .22s,box-shadow .22s}
.ads-banner:hover{transform:translateY(-2px);box-shadow:var(--shadow3)}
.ads-banner img,.ads-banner-ph{width:100%;max-height:145px;object-fit:cover;display:block}
.ads-banner-ph{height:120px;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:46px}
.ads-banner-lbl{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.55);color:#fff;font-size:10px;font-weight:700;padding:3px 9px;border-radius:8px;backdrop-filter:blur(6px)}
.ads-banner-ov{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.68));padding:14px 16px}
.ads-banner-title{color:#fff;font-size:15px;font-weight:800;margin-bottom:5px;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.ads-banner-cta{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:4px 14px;font-size:12px;font-weight:700;color:#fff;backdrop-filter:blur(6px)}

/* غرف الدراسة */
.rooms-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-bottom:10px}
.room-card{background:var(--bg);border:2px solid var(--border);border-radius:16px;padding:12px;cursor:pointer;transition:border-color .22s,background .22s,transform .22s;text-align:center}
.room-card:hover{border-color:var(--pr2);background:var(--pr4);transform:translateY(-2px)}
.room-card.live{border-color:var(--ok);background:rgba(0,184,148,.06);animation:liveGlow 2.5s ease infinite}
.room-ico{font-size:26px;margin-bottom:7px}
.room-name{font-size:13px;font-weight:700;color:var(--tx)}
.room-sub{font-size:10px;color:var(--tx3);margin-top:3px}
.live-badge{font-size:10px;font-weight:900;color:var(--ok);margin-top:4px}

/* ══════════════════════════════════════════
   Streak Tracker
══════════════════════════════════════════ */
.streak-card{background:linear-gradient(135deg,#ff6b6b,#feca57);border-radius:20px;padding:16px;margin-bottom:12px;color:#fff;position:relative;overflow:hidden;box-shadow:0 10px 30px rgba(255,107,107,.35)}
.streak-card::before{content:'';position:absolute;top:-20px;right:-20px;width:100px;height:100px;border-radius:50%;background:rgba(255,255,255,.12);pointer-events:none}
.streak-num{font-size:48px;font-weight:900;line-height:1}
.streak-label{font-size:13px;opacity:.9;margin-top:4px}
.streak-days{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.streak-day{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;transition:transform .22s;cursor:default;flex-shrink:0}
.streak-day.done{background:rgba(255,255,255,.35);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.streak-day.today{background:rgba(255,255,255,.6);color:#ff6b6b;font-weight:900;transform:scale(1.1)}
.streak-day.miss{background:rgba(255,255,255,.15);color:rgba(255,255,255,.6)}
.streak-day.future{background:rgba(255,255,255,.08);color:rgba(255,255,255,.35)}

/* ══════════════════════════════════════════
   لوحة الصدارة الجماعية
══════════════════════════════════════════ */
.glb-wrap{background:var(--card);border-radius:20px;overflow:hidden;box-shadow:var(--shadow);border:2px solid var(--border);margin-bottom:12px}
.glb-hdr{background:var(--grad);padding:14px 16px;display:flex;align-items:center;justify-content:space-between;color:#fff}
.glb-title{font-size:15px;font-weight:900}
.glb-row{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1.5px solid var(--border);transition:background .15s}
.glb-row:last-child{border-bottom:none}
.glb-row:hover{background:var(--bg)}
.glb-rank{width:32px;height:32px;border-radius:50%;background:var(--bg);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;flex-shrink:0}
.glb-row:nth-child(1) .glb-rank,.glb-row.gold .glb-rank{background:linear-gradient(135deg,#f59e0b,#fcd34d);color:#fff;border:none;font-size:18px;box-shadow:0 4px 12px rgba(245,158,11,.4)}
.glb-row:nth-child(2) .glb-rank,.glb-row.silver .glb-rank{background:linear-gradient(135deg,#94a3b8,#cbd5e1);color:#fff;border:none}
.glb-row:nth-child(3) .glb-rank,.glb-row.bronze .glb-rank{background:linear-gradient(135deg,#b45309,#f59e0b);color:#fff;border:none}
.glb-me{background:rgba(108,92,231,.05)!important}
.glb-me .glb-name{color:var(--pr3);font-weight:800}
.glb-info{flex:1;min-width:0}
.glb-name{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.glb-sub{font-size:11px;color:var(--tx3);margin-top:1px}
.glb-val{font-size:18px;font-weight:900;color:var(--pr)}

/* ══════════════════════════════════════════
   الإشعارات — pagination
══════════════════════════════════════════ */
.notif-page-btns{display:flex;gap:8px;justify-content:center;margin-top:12px}
.notif-page-btn{width:32px;height:32px;border-radius:50%;border:2px solid var(--border);background:var(--card);font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s;color:var(--tx)}
.notif-page-btn.on{background:var(--grad);color:#fff;border-color:transparent}
.notif-page-btn:hover:not(.on){border-color:var(--pr2);background:var(--pr4)}

/* ══════════════════════════════════════════
   FAB القائمة العائمة
══════════════════════════════════════════ */
.fab-wrap{position:fixed;bottom:82px;left:16px;z-index:300}
.fab-main{width:52px;height:52px;border-radius:50%;background:var(--grad);border:none;color:#fff;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px var(--pr-glow);transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s,background .3s;position:relative;z-index:2;will-change:transform;}
.fab-main:hover{transform:scale(1.1);box-shadow:0 12px 32px var(--pr-glow)}
.fab-main.open{transform:rotate(45deg);background:linear-gradient(135deg,var(--err),#e17055)}
.fab-items{position:absolute;bottom:60px;left:0;display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none}
.fab-items.open{pointer-events:all}
.fab-item{width:44px;height:44px;border-radius:50%;background:var(--card);border:2px solid var(--border);color:var(--pr);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow2);transform:scale(0) translateY(10px);opacity:0;transition:transform .25s cubic-bezier(.34,1.56,.64,1),opacity .25s,background .22s,border-color .22s;position:relative;will-change:transform,opacity;}
.fab-item::before{content:attr(data-label);position:absolute;right:52px;white-space:nowrap;background:var(--card);border:1.5px solid var(--border);border-radius:999px;padding:4px 12px;font-size:12px;font-weight:700;color:var(--tx);box-shadow:var(--shadow);pointer-events:none;opacity:0;transition:opacity .2s;}
.fab-items.open .fab-item{transform:scale(1) translateY(0);opacity:1}
.fab-items.open .fab-item::before{opacity:1}
.fab-items.open .fab-item:nth-child(1){transition-delay:.05s}
.fab-items.open .fab-item:nth-child(2){transition-delay:.1s}
.fab-items.open .fab-item:nth-child(3){transition-delay:.15s}
.fab-items.open .fab-item:nth-child(4){transition-delay:.2s}
.fab-item:hover{background:var(--pr);color:#fff;transform:scale(1.1)!important;border-color:var(--pr)}

/* ══════════════════════════════════════════
   لوحة الأدمن - عناصر البناء
══════════════════════════════════════════ */
.adm-build-section{background:var(--bg);border:2px solid var(--border);border-radius:16px;padding:14px;margin-bottom:12px}
.adm-build-title{font-size:13px;font-weight:800;color:var(--pr3);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.quiz-draft-item{background:var(--card);border:2px solid var(--border);border-radius:13px;padding:10px 12px;margin-bottom:7px;display:flex;align-items:center;gap:10px;animation:fadeUp .2s ease}
.empty-action-btn{margin-top:14px}

/* ══════════════════════════════════════════
   بوموودورو
══════════════════════════════════════════ */
.pomo-wrap{position:fixed;inset:0;z-index:700;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow-y:auto;padding:30px 20px}
.pomo-wrap::before{content:'';position:absolute;inset:0;background:linear-gradient(145deg,#1a0533,#2d1657,#4834d4,#6c5ce7);background-size:300% 300%;animation:gradShift 5s ease infinite;z-index:-1}
.pomo-close{position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.16);border:none;color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.22s}
.pomo-close:hover{background:rgba(255,255,255,.28);transform:rotate(90deg)}
.pomo-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26);border-radius:999px;padding:7px 20px;font-size:13px;font-weight:700;color:#fff;margin-bottom:26px}
.pomo-task-inp{background:transparent;border-bottom:2px solid rgba(255,255,255,.36);border-top:none;border-left:none;border-right:none;border-radius:0;color:#fff;font-size:15px;font-weight:700;text-align:center;outline:none;width:100%;max-width:320px;padding:6px 4px;margin-bottom:26px}
.pomo-task-inp::placeholder{color:rgba(255,255,255,.5)}
.pomo-ring{width:244px;height:244px;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;margin-bottom:26px}
.pomo-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.pomo-ring-bg{fill:none;stroke:rgba(255,255,255,.12);stroke-width:10}
.pomo-ring-fill{fill:none;stroke-width:10;stroke-linecap:round;stroke-dasharray:683;transition:stroke-dashoffset 1s linear}
.pomo-ring-fill.work{stroke:#a29bfe;filter:drop-shadow(0 0 10px rgba(162,155,254,.6))}
.pomo-ring-fill.short{stroke:#55efc4;filter:drop-shadow(0 0 10px rgba(85,238,196,.6))}
.pomo-ring-fill.long{stroke:#fdcb6e;filter:drop-shadow(0 0 10px rgba(253,203,110,.6))}
.pomo-time{font-size:62px;font-weight:900;color:#fff;letter-spacing:-3px;line-height:1;text-shadow:0 4px 20px rgba(0,0,0,.3)}
.pomo-hint{font-size:12px;color:rgba(255,255,255,.6);margin-top:5px;text-align:center}
.pomo-dots{display:flex;gap:10px;align-items:center;margin-bottom:22px}
.pomo-dot-s{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.25);transition:background .3s,width .3s}
.pomo-dot-s.done{background:#a29bfe;box-shadow:0 0 10px rgba(162,155,254,.6)}
.pomo-dot-s.cur{background:#fff;width:18px;border-radius:4px}
.pomo-controls{display:flex;gap:14px;align-items:center;margin-bottom:24px}
.pomo-btn{width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.3);color:#fff;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .22s,transform .22s}
.pomo-btn:hover{background:rgba(255,255,255,.3);transform:scale(1.1)}
.pomo-btn.main{width:70px;height:70px;font-size:28px;background:rgba(255,255,255,.26);border-color:rgba(255,255,255,.55);box-shadow:0 8px 26px rgba(0,0,0,.25)}
.pomo-modes{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.pomo-mode-btn{padding:8px 18px;border-radius:999px;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.2);color:rgba(255,255,255,.65);font-size:12px;font-weight:700;cursor:pointer;transition:.22s;font-family:inherit}
.pomo-mode-btn:hover,.pomo-mode-btn.on{background:rgba(255,255,255,.26);border-color:rgba(255,255,255,.55);color:#fff}
.pomo-stats{margin-top:18px;display:flex;gap:16px;color:rgba(255,255,255,.65);font-size:13px;font-weight:700}

/* ══════════════════════════════════════════
   بطاقات المذاكرة
══════════════════════════════════════════ */
.fc-wrap{position:fixed;inset:0;z-index:700;background:var(--bg);display:flex;flex-direction:column;animation:fadeUp .3s ease}
.fc-hdr{background:var(--grad);padding:14px 16px;display:flex;align-items:center;gap:12px;flex-shrink:0;color:#fff;box-shadow:0 4px 18px rgba(72,52,212,.28)}
.fc-scene{perspective:1000px;margin:14px 16px;cursor:pointer;position:relative}
.fc-card-wrap{position:relative;width:100%;min-height:200px;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.34,1.56,.64,1)}
.fc-card-wrap.flipped{transform:rotateY(180deg)}
.fc-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px;text-align:center;min-height:200px}
.fc-front{background:var(--grad);color:#fff;box-shadow:0 12px 40px var(--pr-glow)}
.fc-back{background:var(--card);border:2.5px solid var(--pr2);color:var(--tx);transform:rotateY(180deg);box-shadow:var(--shadow2)}
.fc-label{font-size:11px;font-weight:700;opacity:.72;margin-bottom:10px;text-transform:uppercase;letter-spacing:1px}
.fc-text{font-size:19px;font-weight:800;line-height:1.55}
.fc-hint{font-size:11px;opacity:.5;margin-top:12px}
.fc-prog-bar{margin:0 16px 6px;height:6px;background:var(--border);border-radius:999px;overflow:hidden}
.fc-prog-fill{height:100%;background:var(--grad-green);border-radius:999px;transition:width .5s ease}
.fc-counter{text-align:center;font-size:12px;font-weight:700;color:var(--tx3);margin-bottom:8px}
.fc-rate-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 16px 16px}
.fc-rate{padding:13px;border-radius:15px;border:none;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:transform .22s,box-shadow .22s;text-align:center}
.fc-rate:active{transform:scale(.95)}
.fc-rate.again{background:rgba(255,118,117,.12);color:var(--err);border:2px solid rgba(255,118,117,.3)}
.fc-rate.unsure{background:rgba(253,203,110,.12);color:#b7791f;border:2px solid rgba(253,203,110,.4)}
.fc-rate.know{background:rgba(0,184,148,.1);color:var(--ok);border:2px solid rgba(0,184,148,.3)}

/* ══════════════════════════════════════════
   الكويزات
══════════════════════════════════════════ */
.quiz-hdr{border-radius:var(--r3);padding:18px;margin-bottom:14px;color:#fff;position:relative;overflow:hidden;background:var(--grad);box-shadow:var(--shadow2)}
.quiz-hdr::before{content:'';position:absolute;top:-18px;left:-18px;width:100px;height:100px;border-radius:50%;background:rgba(255,255,255,.09);pointer-events:none}
.qf-bar{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.qf-chip{padding:7px 15px;border-radius:999px;border:2px solid var(--border);background:var(--card);font-size:12px;font-weight:700;color:var(--tx2);cursor:pointer;transition:.22s;font-family:inherit}
.qf-chip.on{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 4px 14px var(--pr-glow)}
.qf-chip:hover:not(.on){border-color:var(--pr2);background:var(--pr4)}
.quiz-card{background:var(--card);border:2px solid rgba(108,92,231,.07);border-radius:22px;padding:16px;margin-bottom:10px;box-shadow:var(--shadow);cursor:pointer;transition:border-color .22s,box-shadow .22s,transform .22s;position:relative;overflow:hidden}
.quiz-card:hover{border-color:var(--pr2);box-shadow:var(--shadow2);transform:translateY(-3px)}
.quiz-card::after{content:'';position:absolute;top:0;right:0;width:4px;height:100%;background:var(--grad)}
.qcard-top{display:flex;align-items:flex-start;gap:12px;margin-bottom:10px}
.qcard-ico{width:50px;height:50px;border-radius:15px;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;color:#fff;box-shadow:0 4px 14px var(--pr-glow)}
.qcard-title{font-size:15px;font-weight:800;color:var(--pr3);margin-bottom:4px;line-height:1.3}
.qcard-sub{font-size:12px;color:var(--tx2)}
.quiz-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.qtag{display:inline-flex;align-items:center;gap:4px;padding:4px 11px;border-radius:999px;font-size:11px;font-weight:700}
.qt-blue{background:rgba(14,165,233,.1);color:#0369a1}
.qt-green{background:rgba(0,184,148,.1);color:#00695c}
.qt-orange{background:rgba(253,203,110,.15);color:#9a6700}
.qt-red{background:rgba(255,118,117,.1);color:#c62828}
.qt-purple{background:var(--pr4);color:var(--pr3)}
.quiz-best{position:absolute;top:10px;left:10px;background:rgba(0,184,148,.12);color:#00695c;font-size:10px;font-weight:900;padding:3px 10px;border-radius:999px;border:1px solid rgba(0,184,148,.25)}
.qplayer{position:fixed;inset:0;z-index:600;background:var(--bg);display:flex;flex-direction:column}
.qp-hdr{background:var(--grad);padding:14px 16px;display:flex;align-items:center;gap:12px;flex-shrink:0;color:#fff;box-shadow:0 4px 18px rgba(72,52,212,.28)}
.qp-timer{display:flex;align-items:center;gap:7px;font-size:16px;font-weight:900;background:rgba(255,255,255,.2);padding:7px 16px;border-radius:999px}
.qp-timer.urgent{background:rgba(255,118,117,.45);animation:pulse .7s ease infinite}
.qp-prog{height:5px;background:rgba(255,255,255,.2)}
.qp-prog-fill{height:100%;background:#fff;transition:width .45s ease;box-shadow:0 0 10px rgba(255,255,255,.55)}
.qp-body{flex:1;overflow-y:auto;padding:16px}
.qp-num{font-size:12px;color:var(--tx3);font-weight:700;margin-bottom:9px}
.qp-question{font-size:16px;font-weight:700;color:var(--tx);line-height:1.68;margin-bottom:16px;background:var(--card);padding:16px;border-radius:18px;border-right:5px solid var(--pr);box-shadow:var(--shadow)}
.qp-opts{display:flex;flex-direction:column;gap:10px}
.qp-opt{width:100%;padding:14px 16px;background:var(--card);border:2.5px solid var(--border);border-radius:15px;font-family:inherit;font-size:14px;font-weight:600;color:var(--tx);cursor:pointer;text-align:right;transition:border-color .22s,background .22s,transform .22s;display:flex;align-items:center;gap:10px}
.qp-opt-n{width:29px;height:29px;border-radius:50%;background:var(--bg);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;flex-shrink:0;transition:background .22s,border-color .22s}
.qp-opt:hover:not(:disabled){border-color:var(--pr2);background:var(--pr4);transform:translateX(-5px)}
.qp-opt:hover:not(:disabled) .qp-opt-n{background:var(--pr4);border-color:var(--pr2)}
.qp-opt.correct{border-color:var(--ok)!important;background:rgba(0,184,148,.08)!important}
.qp-opt.correct .qp-opt-n{background:var(--ok);border-color:var(--ok);color:#fff}
.qp-opt.wrong{border-color:var(--err)!important;background:rgba(255,118,117,.08)!important}
.qp-opt.wrong .qp-opt-n{background:var(--err);border-color:var(--err);color:#fff}
.qp-opt:disabled{cursor:default}
.qp-explain{background:rgba(0,184,148,.07);border:1.5px solid rgba(0,184,148,.22);border-radius:13px;padding:12px 14px;font-size:13px;color:var(--tx2);margin-top:12px;line-height:1.65}
.qp-footer{padding:12px 16px;background:var(--card);border-top:1.5px solid var(--border);display:flex;gap:10px;align-items:center;flex-shrink:0;box-shadow:0 -4px 16px rgba(0,0,0,.06)}
.qp-dots{display:flex;gap:5px;flex:1;overflow-x:auto;scrollbar-width:none;align-items:center}
.qp-dots::-webkit-scrollbar{display:none}
.qp-dot{width:10px;height:10px;border-radius:50%;background:var(--border);flex-shrink:0;transition:background .22s,transform .22s;cursor:pointer}
.qp-dot.cur{background:var(--pr);transform:scale(1.4);box-shadow:0 0 0 2.5px var(--pr-glow)}
.qp-dot.ans{background:var(--ok)}
.qp-dot.wng{background:var(--err)}
.qresult{text-align:center;padding:28px 18px;max-width:480px;margin:0 auto}
.qr-ring{width:135px;height:135px;border-radius:50%;margin:0 auto 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:900;position:relative}
.qr-ring::before{content:'';position:absolute;inset:7px;border-radius:50%;border:8px solid var(--border)}
.qr-ring.ex{background:rgba(0,184,148,.1);color:var(--ok)}
.qr-ring.gd{background:rgba(253,203,110,.1);color:#b7791f}
.qr-ring.fl{background:rgba(255,118,117,.1);color:var(--err)}
.qr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}
.qr-cell{background:var(--bg);border-radius:15px;padding:14px 8px;text-align:center;border:2px solid var(--border)}
.qr-val{font-size:23px;font-weight:900;color:var(--pr)}
.qr-lbl{font-size:11px;color:var(--tx3);margin-top:3px}

/* ══════════════════════════════════════════
   المجموعات
══════════════════════════════════════════ */
.grp-card{background:var(--card);border:2px solid rgba(108,92,231,.07);border-radius:24px;overflow:hidden;cursor:pointer;transition:transform .25s,box-shadow .25s,border-color .25s;box-shadow:var(--shadow)}
.grp-card:hover{transform:translateY(-4px);box-shadow:var(--shadow2);border-color:var(--pr2)}
.grp-cover{height:86px;position:relative;overflow:hidden}
.grp-cover-grad{position:absolute;inset:0}
.grp-cover-ov{position:absolute;inset:0;background:linear-gradient(180deg,transparent 25%,rgba(0,0,0,.46))}
.grp-body{padding:14px}
.grp-name{font-size:15px;font-weight:800;color:var(--tx);margin-bottom:5px}
.grp-desc{font-size:12px;color:var(--tx2);line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:9px}
.grp-meta{display:flex;gap:8px;font-size:11px;color:var(--tx3);margin-bottom:10px}
#groupRoom:not(.H){position:fixed;inset:0;z-index:300;background:var(--bg);overflow-y:auto;animation:slideIn .28s cubic-bezier(.16,1,.3,1)}
.grm-hdr{position:sticky;top:0;background:var(--grad);padding:13px 14px;display:flex;align-items:center;gap:10px;z-index:2;color:#fff;box-shadow:0 4px 18px rgba(72,52,212,.28)}
.grm-hdr-name{font-size:16px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grm-hdr-sub{font-size:11px;opacity:.8;margin-top:2px}
.grm-tabs{display:flex;background:var(--card);border-bottom:2px solid var(--border);overflow-x:auto;scrollbar-width:none;position:sticky;top:56px;z-index:1}
.grm-tabs::-webkit-scrollbar{display:none}
.grm-tab{padding:13px 16px;font-size:13px;font-weight:700;color:var(--tx3);cursor:pointer;white-space:nowrap;border:none;background:none;font-family:inherit;transition:color .2s;position:relative;flex-shrink:0}
.grm-tab.on{color:var(--pr)}
.grm-tab.on::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2.5px;background:var(--grad);border-radius:2px}
.grp-composer{background:var(--card);padding:14px;border-bottom:2px solid var(--border)}
.grp-post{background:var(--card);border-bottom:2px solid var(--border);padding:14px;transition:background .12s}
.grp-post:hover{background:var(--card2)}
.gpost-hdr{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.gpost-name{font-size:13px;font-weight:700;color:var(--pr3);cursor:pointer}
.gpost-name:hover{text-decoration:underline}
.gpost-meta{font-size:11px;color:var(--tx3);margin-top:2px}
.gpost-body{font-size:14px;color:var(--tx);line-height:1.72;margin-bottom:10px}
.gpost-img{width:100%;border-radius:16px;margin-bottom:10px;cursor:pointer;max-height:280px;object-fit:cover;transition:opacity .2s}
.gpost-img:hover{opacity:.92}
.react-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px;position:relative}
.react-btn{display:flex;align-items:center;gap:4px;padding:5px 11px;border-radius:999px;border:2px solid var(--border);background:var(--bg);font-size:12px;font-weight:700;cursor:pointer;transition:.18s;font-family:inherit}
.react-btn:hover{border-color:var(--pr2);background:var(--pr4)}
.react-btn.reacted{background:var(--pr4);border-color:var(--pr2);color:var(--pr3)}
.react-picker-pop{display:flex;gap:5px;background:var(--card);border:2px solid var(--border);border-radius:999px;padding:8px 14px;box-shadow:var(--shadow3);position:absolute;z-index:20;animation:scaleIn .2s ease;bottom:34px;right:0}
.react-em{font-size:22px;cursor:pointer;transition:.18s;padding:2px 4px;border-radius:9px}
.react-em:hover{transform:scale(1.3);background:var(--bg)}
.poll-wrap{background:var(--bg);border-radius:16px;padding:12px;margin-bottom:10px;border:2px solid var(--border)}
.poll-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px dashed var(--border);cursor:pointer;transition:padding-right .15s}
.poll-row:last-child{border-bottom:none}
.poll-row:hover{padding-right:4px}
.poll-track{flex:1;background:var(--border);border-radius:999px;height:7px;overflow:hidden}
.poll-fill{height:100%;background:var(--grad);border-radius:999px;transition:width .6s ease}
.poll-pct{font-size:11px;font-weight:700;color:var(--pr3);flex-shrink:0;min-width:33px;text-align:left}
.cmt-area{display:none;padding:8px 0}
.cmt-area.on{display:block}
.cmt-inp-row{display:flex;gap:8px;align-items:center}
.cmt-inp{flex:1;background:var(--bg);border:2px solid var(--border);border-radius:999px;padding:8px 14px;font-size:13px;font-family:inherit;color:var(--tx);outline:none;transition:border-color .22s}
.cmt-inp:focus{border-color:var(--pr)}
.cmt-send{background:var(--grad);border:none;color:#fff;padding:9px 16px;border-radius:999px;cursor:pointer;font-size:13px;font-weight:700;transition:box-shadow .2s,transform .2s;font-family:inherit}
.cmt-send:hover{box-shadow:var(--shadow);transform:scale(1.04)}

/* ══════════════════════════════════════════
   🔧 إصلاح CLS في صفحة الشات
══════════════════════════════════════════ */
.chat-page{display:grid;grid-template-columns:1fr;background:var(--card);border-radius:var(--r3);overflow:hidden;box-shadow:var(--shadow2);height:calc(100dvh - var(--topbar) - 10px);contain:layout style;}
.chat-sidebar{display:none;flex-direction:column;border-left:2px solid var(--border);overflow:hidden;}
.chat-sidebar.visible{display:flex}
.chat-sidebar-hdr{padding:14px;background:var(--grad);color:#fff;flex-shrink:0}
.chat-sidebar-title{font-size:17px;font-weight:900}
.chat-sidebar-search{padding:8px 10px;border-bottom:1.5px solid var(--border);flex-shrink:0}
.chat-threads{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.chat-thread{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1.5px solid var(--border);cursor:pointer;transition:background .12s}
.chat-thread:hover{background:var(--card2)}
.chat-thread.active{background:var(--pr4)}
.chat-thread.unread .ct-name{font-weight:800;color:var(--pr3)}
.ct-av{position:relative;flex-shrink:0}
.ct-dot{position:absolute;bottom:0;right:0;width:11px;height:11px;border-radius:50%;background:var(--tx3);border:2.5px solid var(--card)}
.ct-dot.on{background:var(--ok)}
.ct-meta{flex:1;min-width:0}
.ct-name{font-size:14px;font-weight:600;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-last{font-size:12px;color:var(--tx2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.ct-time{font-size:11px;color:var(--tx3)}
.ct-badge{min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--ok);color:#fff;font-size:10px;font-weight:900;display:flex;align-items:center;justify-content:center}
.chat-empty-s{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--tx3);gap:12px}
.chat-empty-s .ei{font-size:56px;opacity:.32}
.chat-main{display:flex;flex-direction:column;min-width:0;background:var(--bg);overflow:hidden;}
.chat-main-hdr{padding:12px 14px;background:var(--card);border-bottom:2px solid var(--border);display:flex;align-items:center;gap:10px;flex-shrink:0;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.chat-main-name{font-size:15px;font-weight:700}
.chat-main-status{font-size:12px;color:var(--tx3);margin-top:1px}
.chat-main-status.online{color:var(--ok)}
.chat-main-acts{display:flex;gap:5px;margin-right:auto}
.chat-box{flex:1;min-height:0;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:4px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scroll-behavior:auto;}
.chat-date-sep{text-align:center;margin:9px 0;display:flex;align-items:center;gap:8px}
.chat-date-sep::before,.chat-date-sep::after{content:'';flex:1;height:1.5px;background:var(--border)}
.chat-date-sep span{background:rgba(108,92,231,.07);color:var(--tx3);font-size:11px;font-weight:700;padding:4px 12px;border-radius:20px;white-space:nowrap}
.msg{display:flex;flex-direction:column;max-width:80%;animation:fadeUp .2s ease;position:relative}
.msg.me{align-self:flex-end;align-items:flex-end}
.msg.ot{align-self:flex-start;align-items:flex-start}
.msg-bub{padding:10px 14px;font-size:14px;line-height:1.65;word-break:break-word;position:relative}
.msg.me .msg-bub{background:var(--grad);color:#fff;border-radius:18px 18px 4px 18px;box-shadow:0 3px 12px var(--pr-glow)}
.msg.ot .msg-bub{background:var(--card);border:2px solid var(--border);color:var(--tx);border-radius:18px 18px 18px 4px;box-shadow:var(--shadow)}
.msg-bub img{max-width:200px;border-radius:13px;display:block;margin-top:7px;cursor:pointer;transition:opacity .2s}
.msg-bub img:hover{opacity:.9}
.msg-bub audio{max-width:200px;margin-top:7px;border-radius:9px}
.msg-reply-prev{border-radius:9px;padding:5px 10px;font-size:12px;margin-bottom:7px;opacity:.9}
.msg.me .msg-reply-prev{background:rgba(255,255,255,.18);border-right:3px solid rgba(255,255,255,.6)}
.msg.ot .msg-reply-prev{background:var(--pr4);border-right:3px solid var(--pr2);color:var(--tx3)}
.msg-footer{display:flex;align-items:center;gap:4px;margin-top:4px;padding:0 2px}
.msg.me .msg-footer{justify-content:flex-end}
.msg-time{font-size:10px;color:var(--tx3)}
.msg.me .msg-time{color:rgba(255,255,255,.65)}
.msg-ticks{font-size:11px;color:rgba(255,255,255,.65)}
.msg-ticks.delivered{color:rgba(255,255,255,.88)}
.msg-ticks.read{color:#90dbff}
.msg-reacts{display:flex;gap:3px;flex-wrap:wrap;margin-top:4px}
.msg-react{font-size:13px;background:var(--card);border:1.5px solid var(--border);border-radius:999px;padding:2px 7px;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.08);transition:border-color .15s}
.msg-react:hover{border-color:var(--pr2)}
.typing-ind{font-size:12px;color:var(--tx3);padding:5px 12px;display:flex;align-items:center;gap:6px;flex-shrink:0}
.typing-dots{display:flex;gap:4px}
.typing-dots span{width:7px;height:7px;background:var(--pr2);border-radius:50%;animation:tBounce 1.2s ease infinite}
.typing-dots span:nth-child(2){animation-delay:.2s}
.typing-dots span:nth-child(3){animation-delay:.4s}
.chat-inp-area{background:var(--card);border-top:2px solid var(--border);padding:11px 12px;flex-shrink:0}
.chat-reply-bar{display:flex;align-items:center;gap:8px;background:var(--pr4);border-radius:13px;padding:8px 13px;margin-bottom:9px;border-right:4px solid var(--pr)}
.chat-reply-txt{flex:1;font-size:12px;color:var(--tx2);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.chat-reply-close{background:none;border:none;color:var(--tx3);cursor:pointer;font-size:16px;flex-shrink:0;transition:color .15s}
.chat-reply-close:hover{color:var(--err)}
.chat-inp-row{display:flex;gap:8px;align-items:flex-end}
.chat-inp{flex:1;background:var(--bg);border:2px solid var(--border);border-radius:24px;padding:11px 17px;font-family:inherit;font-size:14px;color:var(--tx);outline:none;resize:none;max-height:100px;line-height:1.5;transition:border-color .22s,background .22s}
.chat-inp:focus{border-color:var(--pr);background:var(--card)}
.chat-send{width:46px;height:46px;background:var(--grad);border:none;color:#fff;border-radius:50%;cursor:pointer;font-size:20px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px var(--pr-glow);transition:transform .22s,box-shadow .22s;flex-shrink:0}
.chat-send:hover{transform:scale(1.1);box-shadow:0 8px 22px var(--pr-glow)}
.chat-chips{display:flex;gap:6px;overflow-x:auto;padding:7px 0 2px;scrollbar-width:none}
.chat-chips::-webkit-scrollbar{display:none}
.chat-chip{padding:6px 15px;border-radius:999px;border:2px solid var(--border);background:var(--bg);font-size:12px;font-weight:700;color:var(--tx2);cursor:pointer;white-space:nowrap;transition:border-color .15s,background .15s,color .15s;font-family:inherit}
.chat-chip:hover{border-color:var(--pr2);background:var(--pr4);color:var(--pr)}

/* ══════════════════════════════════════════
   البروفيل
══════════════════════════════════════════ */
.prof-cover{height:145px;position:relative;cursor:pointer;overflow:hidden;transition:filter .2s}
.prof-cover:hover::after{content:'📷 تغيير الغلاف';position:absolute;inset:0;background:rgba(0,0,0,.38);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.4)}
.prof-av-wrap{padding:0 16px}
.prof-av{margin-top:-44px;border:5px solid var(--card);font-size:30px;box-shadow:var(--shadow3);cursor:pointer;position:relative;transition:transform .22s}
.prof-av:hover{transform:scale(1.05)}
.prof-name{font-size:22px;font-weight:900;margin-bottom:4px}
.prof-id{font-size:11px;color:var(--tx3);font-family:monospace;background:var(--bg);padding:4px 11px;border-radius:9px;cursor:pointer;display:inline-block;border:2px solid var(--border);margin-bottom:9px;transition:border-color .15s,color .15s}
.prof-id:hover{border-color:var(--pr2);color:var(--pr)}
.stat-row{display:flex;background:var(--bg);border:2px solid var(--border);border-radius:18px;overflow:hidden;margin:12px 0}
.stat-i{flex:1;padding:14px;text-align:center;border-left:2px solid var(--border)}
.stat-i:last-child{border-left:none}
.stat-v{font-size:23px;font-weight:900;color:var(--pr)}
.stat-l{font-size:11px;color:var(--tx3);margin-top:2px}
.prof-tabs{display:flex;border-top:2px solid var(--border)}
.prof-tab{flex:1;padding:12px 4px;border:none;background:none;font-family:inherit;font-size:12px;font-weight:700;color:var(--tx3);cursor:pointer;transition:color .2s;position:relative}
.prof-tab.on{color:var(--pr3)}
.prof-tab.on::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2.5px;background:var(--grad);border-radius:2px}

/* ══════════════════════════════════════════
   الإعدادات
══════════════════════════════════════════ */
.sett-sec{background:var(--card);border:2px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:var(--shadow);margin-bottom:12px}
.sett-hdr{padding:12px 16px;font-size:11px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:1px;border-bottom:1.5px solid var(--border);background:var(--bg)}
.sett-row{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1.5px solid var(--border);transition:background .15s}
.sett-row:last-child{border-bottom:none}
.sett-row.clickable{cursor:pointer}
.sett-row.clickable:hover{background:rgba(108,92,231,.02)}
.sr-l{flex:1}
.sr-t{font-size:14px;font-weight:700}
.sr-s{font-size:11px;color:var(--tx3);margin-top:2px}

/* ══════════════════════════════════════════
   لوحة الأدمن
══════════════════════════════════════════ */
.adm-stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px}
.adm-stat{border-radius:20px;padding:18px;text-align:center;color:#fff;position:relative;overflow:hidden;box-shadow:var(--shadow2)}
.adm-stat::before{content:'';position:absolute;top:-20px;right:-20px;width:80px;height:80px;border-radius:50%;background:rgba(255,255,255,.1);pointer-events:none}
.adm-stat:nth-child(1){background:var(--grad)}
.adm-stat:nth-child(2){background:var(--grad-green)}
.adm-stat:nth-child(3){background:var(--grad-pink)}
.adm-stat:nth-child(4){background:var(--grad-gold)}
.adm-sv{font-size:32px;font-weight:900}
.adm-sl{font-size:12px;opacity:.88;margin-top:4px}
.adm-tabs{display:flex;overflow-x:auto;gap:5px;padding:5px;background:var(--bg);border-radius:var(--r);margin-bottom:16px;border:2px solid var(--border);scrollbar-width:none}
.adm-tabs::-webkit-scrollbar{display:none}
.adm-tab{padding:9px 16px;border-radius:11px;cursor:pointer;font-size:13px;font-weight:700;color:var(--tx2);transition:background .22s,color .22s,box-shadow .22s;white-space:nowrap;border:none;background:none;font-family:inherit;flex-shrink:0}
.adm-tab.on{background:var(--grad);color:#fff;box-shadow:0 4px 14px var(--pr-glow)}
.adm-q-item{background:var(--bg);border:2px solid var(--border);border-radius:13px;padding:11px 13px;margin-bottom:7px;display:flex;align-items:center;gap:10px}
.adm-q-num{width:28px;height:28px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;flex-shrink:0}
.adm-q-txt{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-item{display:flex;align-items:center;gap:10px;background:var(--bg);border:2px solid var(--border);border-radius:13px;padding:10px 12px;margin-bottom:8px}
.adm-item-img{width:52px;height:52px;border-radius:12px;object-fit:cover;flex-shrink:0}
.adm-item-ph{width:52px;height:52px;border-radius:12px;flex-shrink:0;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:22px}
.adm-item-info{flex:1;min-width:0}
.adm-item-title{font-size:13px;font-weight:700;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-item-sub{font-size:11px;color:var(--tx3);margin-top:2px}
.adm-u-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1.5px solid var(--border)}
.adm-u-row:last-child{border-bottom:none}
.adm-u-info{flex:1;min-width:0}
.adm-u-name{font-size:13px;font-weight:700;color:var(--pr3)}
.adm-u-email{font-size:11px;color:var(--tx3);font-family:monospace;margin-top:2px}

/* ══════════════════════════════════════════
   الإشعارات والصدارة
══════════════════════════════════════════ */
/* ← e.stopPropagation() مطلوب على العناصر الداخلية في JS */
.notif-item{background:var(--card);border:2px solid var(--border);border-radius:18px;padding:13px;margin-bottom:8px;display:flex;align-items:center;gap:12px;transition:border-color .22s,transform .22s;cursor:pointer;box-shadow:var(--shadow);}
.notif-item:hover{border-color:var(--pr2);transform:translateX(-3px)}
.notif-item.unread{border-right:4px solid var(--pr)}
.ni-ico{width:42px;height:42px;border-radius:13px;background:var(--pr4);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;pointer-events:none;}
.ni-body{flex:1}
.ni-title{font-size:13px;font-weight:700}
.ni-msg{font-size:12px;color:var(--tx2);margin-top:2px}
.ni-time{font-size:10px;color:var(--tx3);margin-top:3px}
.lb-tabs-row{display:flex;border-bottom:2px solid var(--border)}
.lb-tab-btn{flex:1;padding:11px;text-align:center;border:none;background:none;font-family:inherit;font-size:13px;font-weight:700;color:var(--tx3);cursor:pointer;transition:color .2s;position:relative}
.lb-tab-btn.on{color:var(--pr3)}
.lb-tab-btn.on::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2.5px;background:var(--grad)}
.lb-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1.5px solid var(--border);transition:background .15s}
.lb-row:hover{background:var(--bg)}
.lb-rank{width:38px;height:38px;border-radius:50%;background:var(--bg);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;flex-shrink:0}
.lb-row:nth-child(1) .lb-rank{background:linear-gradient(135deg,#f59e0b,#fcd34d);color:#fff;border:none;font-size:22px;box-shadow:0 4px 14px rgba(245,158,11,.45)}
.lb-row:nth-child(2) .lb-rank{background:linear-gradient(135deg,#94a3b8,#cbd5e1);color:#fff;border:none}
.lb-row:nth-child(3) .lb-rank{background:linear-gradient(135deg,#b45309,#f59e0b);color:#fff;border:none}
.lb-info{flex:1;min-width:0}
.lb-name{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-sub{font-size:11px;color:var(--tx3);margin-top:2px}
.lb-val{font-size:19px;font-weight:900;color:var(--pr)}
.ach-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.ach-item{display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 6px;background:var(--bg);border-radius:15px;border:2px solid var(--border);text-align:center;opacity:.42;transition:opacity .22s,border-color .22s,background .22s}
.ach-item.earned{opacity:1;border-color:var(--pr2);background:var(--pr4);box-shadow:var(--shadow)}
.ach-ico{font-size:28px}
.ach-name{font-size:10px;font-weight:700;color:var(--tx3)}
.ach-item.earned .ach-name{color:var(--pr3)}

/* ══════════════════════════════════════════
   بروفيل مستخدم آخر (popup)
══════════════════════════════════════════ */
.upo{position:fixed;inset:0;background:var(--overlay);backdrop-filter:blur(9px);z-index:700;display:none;align-items:flex-end;justify-content:center}
.upo.on{display:flex;animation:fadeIn .2s ease}
.upc{background:var(--card);border-radius:28px 28px 0 0;width:100%;max-width:520px;max-height:92vh;overflow-y:auto;animation:slideUp .32s cubic-bezier(.22,1,.36,1);scrollbar-width:none}
.upc::-webkit-scrollbar{display:none}
.upc-cov{height:135px;position:relative;background:var(--grad);overflow:hidden}
.upc-cls{position:absolute;top:11px;right:12px;width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.32);border:none;color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.22s}
.upc-cls:hover{background:rgba(0,0,0,.5);transform:rotate(90deg)}
.upc-avw{padding:0 16px;margin-top:-40px;display:flex;align-items:flex-end;gap:10px}
.upc-online{width:14px;height:14px;border-radius:50%;background:var(--tx3);border:3px solid var(--card);margin-bottom:5px}
.upc-online.on{background:var(--ok)}
.upc-body{padding:12px 16px 24px}
.upc-name{font-size:19px;font-weight:900;margin-bottom:8px}
.upc-stats{display:flex;background:var(--bg);border:2px solid var(--border);border-radius:18px;overflow:hidden;margin:10px 0}
.upc-stat{flex:1;padding:12px;text-align:center;border-left:1.5px solid var(--border)}
.upc-stat:last-child{border-left:none}
.upc-stat .v{font-size:18px;font-weight:900;color:var(--pr)}
.upc-stat .l{font-size:10px;color:var(--tx3);margin-top:2px}
.upc-acts{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.upc-acts .btn,.upc-acts .btn-out{flex:1;font-size:13px;padding:11px}

/* ══════════════════════════════════════════
   صفحة الأشخاص
══════════════════════════════════════════ */
.wa-hdr{padding:14px 16px 0;background:var(--grad)}
.wa-hdr-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.wa-hdr-title{color:#fff;font-size:21px;font-weight:900}
.wa-hbtn{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.2);border:none;color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s}
.wa-hbtn:hover{background:rgba(255,255,255,.32)}
.wa-tabs{display:flex;border-bottom:2px solid rgba(255,255,255,.24)}
.wa-tab{flex:1;padding:10px 4px;text-align:center;color:rgba(255,255,255,.62);font-size:12px;font-weight:700;cursor:pointer;transition:color .2s;position:relative;border:none;background:none;font-family:inherit}
.wa-tab.on{color:#fff}
.wa-tab.on::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:2.5px;background:#fff;border-radius:2px}
.wa-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1.5px solid var(--border);cursor:pointer;transition:background .12s}
.wa-row:hover{background:var(--card2)}
.wa-row-av{position:relative;flex-shrink:0}
.wa-row-odot{position:absolute;bottom:0;right:0;width:12px;height:12px;border-radius:50%;background:var(--tx3);border:2.5px solid var(--card)}
.wa-row-odot.on{background:var(--ok)}
.wa-row-meta{flex:1;min-width:0}
.wa-row-name{font-size:15px;font-weight:600;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-row-sub{font-size:12px;color:var(--tx2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-row-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.wa-row-time{font-size:11px;color:var(--tx3)}
.wa-row-badge{min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--ok);color:#fff;font-size:10px;font-weight:900;display:flex;align-items:center;justify-content:center}
.wa-row-unread .wa-row-name{font-weight:800;color:var(--pr3)}

/* الحصص */
.class-card{background:var(--card);border:2px solid var(--border);border-radius:18px;padding:14px;margin-bottom:9px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.class-card::before{content:'';position:absolute;top:0;right:0;width:4px;height:100%;background:var(--grad)}
.class-title{font-size:14px;font-weight:800;color:var(--pr3);margin-bottom:4px}
.class-sub{font-size:12px;color:var(--tx2);margin-bottom:8px;line-height:1.55}

/* ══════════════════════════════════════════
   🧘 Zen Mode (وضع التركيز)
   [FEATURE #3] يُفعَّل بإضافة class="zen-mode" على body
   ← يُخفي العناصر الثانوية ويحوّل النظرة للمونوكروم
══════════════════════════════════════════ */
body.zen-mode{
  /* ← ألوان مونوكروم لتقليل التشتت البصري */
  --pr:#555555;
  --pr2:#888888;
  --pr3:#333333;
  --pr4:rgba(85,85,85,.08);
  --grad:linear-gradient(135deg,#444,#888);
  --grad-topbar:linear-gradient(135deg,rgba(30,30,30,.93),rgba(60,60,60,.91));
  --pr-glow:rgba(85,85,85,.15);
  transition:all .4s ease;
}
/* إخفاء عناصر التشتيت في Zen Mode */
body.zen-mode .ann-bar,
body.zen-mode .fab-wrap,
body.zen-mode .bni-dot,
body.zen-mode .home-hdr .h-stats,
body.zen-mode #homeAdsBanner,
body.zen-mode .ads-strip,
body.zen-mode .ads-banner,
body.zen-mode .dc-card,
body.zen-mode .streak-card,
body.zen-mode #homeInsights{
  display:none!important;
}
/* زر تفعيل Zen يبقى ظاهراً دائماً */
body.zen-mode #zenToggleBtn{
  background:rgba(85,85,85,.3)!important;
  box-shadow:none!important;
}
/* رسالة توجيهية في Zen Mode */
.zen-banner{
  background:rgba(85,85,85,.08);
  border:1.5px dashed rgba(85,85,85,.2);
  border-radius:14px;padding:12px 16px;
  font-size:13px;color:var(--tx3);
  text-align:center;margin-bottom:12px;
  display:none;
}
body.zen-mode .zen-banner{display:block}

/* ══════════════════════════════════════════
   ريسبونسف — Responsive Layout
══════════════════════════════════════════ */

/* موبايل صغير */
@media(max-width:767px){
  .chat-page{grid-template-columns:1fr;}
  .chat-sidebar{display:none;position:absolute;top:0;left:0;right:0;bottom:0;z-index:10;background:var(--card);}
  .chat-sidebar.visible{display:flex;}
  .chat-main{grid-column:1;}
}

/* تابلت وسطح المكتب */
@media(min-width:768px){
  .chat-page{grid-template-columns:300px 1fr;}
  .chat-sidebar{display:flex!important;position:static;}
}

/* سطح مكتب كبير */
@media(min-width:900px){
  body{padding-right:200px;padding-bottom:0;}
  .bnav{position:fixed;top:var(--topbar);right:0;bottom:0;width:200px;flex-direction:column;padding:8px;border-top:none;border-left:2px solid var(--border);background:var(--card);justify-content:flex-start;gap:2px;border-radius:0;height:auto;box-shadow:none;}
  .bni{flex-direction:row;justify-content:flex-start;padding:11px 14px;border-radius:14px;gap:10px;width:100%;}
  .bni>div:last-child{display:block;font-size:13px;font-weight:700;}
  .bni-fab{margin-top:0;width:44px;height:44px;font-size:19px;}
  .pages{max-width:900px!important;}
  .chat-page{height:calc(100dvh - var(--topbar) - 20px);}
}


/* ══════════════════════════════════════════
   إصلاح Accessibility — Focus Visible
   [FIX] تحسين وضوح التركيز للمستخدمين
══════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid var(--pr);
  outline-offset: 3px;
  border-radius: 6px;
}
/* إخفاء outline العادي عند الضغط بالفأرة */
:focus:not(:focus-visible) {
  outline: none;
}

/* ══════════════════════════════════════════
   Loading Skeleton Animation
   [NEW] للعناصر التي تنتظر تحميل البيانات
══════════════════════════════════════════ */
.skeleton {
  background: linear-gradient(90deg, var(--border) 25%, var(--card2) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--r2);
}

/* ══════════════════════════════════════════
   تحسين btn-loading
   [FIX] إضافة cursor: not-allowed عند التحميل
══════════════════════════════════════════ */
.btn-loading {
  pointer-events: none !important;
  opacity: 0.72 !important;
  cursor: not-allowed !important;
  position: relative;
}
.btn-loading::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .6s linear infinite;
  right: 12px; top: 50%;
  transform: translateY(-50%);
}

/* ══════════════════════════════════════════
   تحسين Scrollbar على الديسكتوب
══════════════════════════════════════════ */
@media (min-width: 768px) {
  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: var(--bg); }
  ::-webkit-scrollbar-thumb {
    background: var(--pr2);
    border-radius: 99px;
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--pr); }
}

/* ══════════════════════════════════════════
   إضافة print styles أساسية
   [NEW] لطباعة الكويزات والنتائج
══════════════════════════════════════════ */
@media print {
  .topbar, .bnav, .fab-wrap, #LD, #AUTH { display: none !important; }
  .page { display: block !important; }
  body { background: #fff !important; color: #000 !important; }
}

/* ══════════════════════════════════════════
   تحسين Toast على الموبايل
   [FIX] منع التداخل مع الـ bottom nav
══════════════════════════════════════════ */
@media (max-width: 767px) {
  .toast-c {
    bottom: calc(var(--bottomnav) + env(safe-area-inset-bottom) + 12px) !important;
  }
}

/* ══════════════════════════════════════════
   [NEW] Skip Link — Accessibility
   للمستخدمين الذين يتنقلون بلوحة المفاتيح
══════════════════════════════════════════ */
.skip-link {
  position: fixed;
  top: -100%;
  right: 12px;
  background: var(--pr);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 12px 12px;
  font-weight: 700;
  font-size: 14px;
  z-index: 99999;
  transition: top .2s;
  text-decoration: none;
}
.skip-link:focus { top: 0; }

/* ══════════════════════════════════════════
   [NEW] Reduced Motion — لمن يفضل تقليل الحركة
══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ══════════════════════════════════════════
   [NEW] High Contrast Mode
══════════════════════════════════════════ */
@media (forced-colors: active) {
  .btn, .btn-out, .tab, .qf-chip {
    border: 2px solid ButtonText;
  }
  .topbar { border-bottom: 2px solid ButtonText; }
}

/* ══════════════════════════════════════════
   [FIX] Chat typing indicator — كان مخفياً دائماً
══════════════════════════════════════════ */
.typing-ind {
  padding: 6px 16px;
  font-size: 12px;
  color: var(--tx3);
  display: flex;
  align-items: center;
  gap: 8px;
}
.typing-ind.H { display: none !important; }
.typing-dots {
  display: flex;
  gap: 3px;
  align-items: center;
}
.typing-dots span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pr2);
  animation: tBounce 1.2s ease infinite;
}
.typing-dots span:nth-child(2) { animation-delay: .15s; }
.typing-dots span:nth-child(3) { animation-delay: .3s; }

/* ══════════════════════════════════════════
   [FIX] backdrop-filter تقليل على الأجهزة الضعيفة
══════════════════════════════════════════ */
@media (max-width: 480px) and (max-device-memory: 4gb) {
  .topbar { backdrop-filter: blur(12px); }
  .auth-card { backdrop-filter: blur(14px); }
  .fab-item { backdrop-filter: none; }
}

/* ══════════════════════════════════════════
   [NEW] Input character counter
══════════════════════════════════════════ */
.inp-counter {
  font-size: 11px;
  color: var(--tx3);
  text-align: left;
  margin-top: 3px;
  transition: color .2s;
}
.inp-counter.warn { color: var(--warn); }
.inp-counter.err  { color: var(--err); font-weight: 700; }

/* ══════════════════════════════════════════
   [NEW] Online status badge تحسين
══════════════════════════════════════════ */
.wa-row-odot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--tx3);
  border: 2px solid var(--card);
  position: absolute;
  bottom: 0; left: 0;
  transition: background .3s;
}
.wa-row-odot.on {
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(0,184,148,.2);
  animation: liveGlow 2s ease infinite;
}

/* ══════════════════════════════════════════
   [NEW] Quiz result ring تحسين ألوان
══════════════════════════════════════════ */
.qr-ring.ex {
  background: radial-gradient(circle, rgba(0,184,148,.15), transparent);
  border: 4px solid var(--ok);
  box-shadow: 0 0 30px rgba(0,184,148,.25);
}
.qr-ring.gd {
  background: radial-gradient(circle, rgba(253,203,110,.15), transparent);
  border: 4px solid var(--warn);
  box-shadow: 0 0 30px rgba(253,203,110,.25);
}
.qr-ring.fl {
  background: radial-gradient(circle, rgba(255,118,117,.15), transparent);
  border: 4px solid var(--err);
  box-shadow: 0 0 30px rgba(255,118,117,.25);
}

/* ══════════════════════════════════════════
   [NEW] Streak Day تحسين ألوان
══════════════════════════════════════════ */
.streak-day.today {
  background: rgba(255,255,255,.35);
  border: 2px solid rgba(255,255,255,.7);
  font-weight: 900;
  transform: scale(1.12);
}
.streak-day.done {
  background: rgba(0,184,148,.8);
}
.streak-day.miss {
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.45);
}

/* ══════════════════════════════════════════
   [NEW] PWA Install Button تحسين
══════════════════════════════════════════ */
.pwa-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--grad);
  color: #fff;
  border-radius: var(--r);
  padding: 12px 16px;
  margin: 8px 0;
  cursor: pointer;
  animation: fadeUp .3s ease;
}
.pwa-banner-ico { font-size: 28px; }
.pwa-banner-text { flex: 1; }
.pwa-banner-text strong { display: block; font-size: 14px; margin-bottom: 2px; }
.pwa-banner-text span { font-size: 12px; opacity: .85; }

/* ══════════════════════════════════════════
   [FIX] Modal على الشاشات الصغيرة جداً
══════════════════════════════════════════ */
@media (max-height: 600px) {
  .modal {
    max-height: 95vh;
    overflow-y: auto;
  }
  .pomo-wrap {
    padding: 14px;
  }
  .pomo-ring svg {
    width: 190px;
    height: 190px;
  }
}

/* ══════════════════════════════════════════
   [NEW] Smooth page transitions
══════════════════════════════════════════ */
.page {
  transition: opacity .18s ease;
}
.page:not(.on) {
  opacity: 0;
  pointer-events: none;
}
.page.on {
  opacity: 1;
  pointer-events: all;
}

/* ══════════════════════════════════════════
   [NEW] Empty state تحسين
══════════════════════════════════════════ */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  min-height: 160px;
}
.ei {
  font-size: 52px;
  margin-bottom: 14px;
  display: block;
  opacity: .3;
}
.et {
  font-size: 15px;
  font-weight: 700;
  color: var(--tx2);
  margin-bottom: 8px;
}

/* ══════════════════════════════════════════
   [FIX] chat-thread - تحسين hover على ديسكتوب
══════════════════════════════════════════ */
@media (min-width: 768px) {
  .chat-thread:hover:not(.active) {
    background: var(--surface);
    cursor: pointer;
  }
  .wa-row:hover {
    background: var(--surface);
    cursor: pointer;
  }
  .grp-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow2);
  }
  .quiz-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow2);
  }
}

/* ══════════════════════════════════════════
   [NEW] Tooltip بسيط
══════════════════════════════════════════ */
[data-tip] {
  position: relative;
}
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  right: 50%;
  transform: translateX(50%);
  background: var(--tx);
  color: var(--card);
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 11px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  z-index: 9000;
}
[data-tip]:hover::after {
  opacity: 1;
}

/* ══════════════════════════════════════════
   [FIX] Admin tab scroll على موبايل صغير
══════════════════════════════════════════ */
.adm-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.adm-tabs::-webkit-scrollbar { display: none; }
.adm-tab { white-space: nowrap; flex-shrink: 0; }

/* ══════════════════════════════════════════
   [FIX] Quiz filter chips scroll
══════════════════════════════════════════ */
.qf-bar {
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.qf-bar::-webkit-scrollbar { display: none; }

/* ══════════════════════════════════════════
   [NEW] Loading placeholder للـ avatar
══════════════════════════════════════════ */
.av-loading {
  background: linear-gradient(90deg, var(--border) 25%, var(--card2) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}

/* ══════════════════════════════════════════
   [FIX] تحسين z-index hierarchy
══════════════════════════════════════════ */
/* z-index map:
   9999 = #LD (loader)
   8000 = #AUTH
   7000 = .upo (user profile overlay)
   6000 = .ov (modals)
   5000 = .confirm-ov
   4000 = .imgv
   3000 = .fab-wrap
   2000 = .ctx (context menu)
   1000 = .toast-c
    500 = .topbar
    200 = .bnav
    100 = .zen-mode overlays
*/

/* ══════════════════════════════════════════
   [NEW] Grade color utilities
══════════════════════════════════════════ */
.grade-a { color: var(--ok) !important; }
.grade-b { color: #74b9ff !important; }
.grade-c { color: var(--warn) !important; }
.grade-d { color: var(--err) !important; }

/* ══════════════════════════════════════════
   [FIX] Pomodoro task input تحسين مظهر
══════════════════════════════════════════ */
.pomo-task-inp {
  width: 100%;
  background: rgba(255,255,255,.12);
  border: 1.5px solid rgba(255,255,255,.22);
  border-radius: 14px;
  padding: 10px 16px;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  text-align: center;
  transition: border-color .25s, background .25s;
}
.pomo-task-inp::placeholder { color: rgba(255,255,255,.5); }
.pomo-task-inp:focus {
  outline: none;
  border-color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.18);
}

/* ══════════════════════════════════════════
   [NEW] Swipe gesture hint على موبايل
══════════════════════════════════════════ */
@media (max-width: 767px) {
  .grm-tabs, .wa-tabs, .prof-tabs, .adm-tabs {
    scroll-snap-type: x mandatory;
  }
  .grm-tab, .wa-tab, .prof-tab, .adm-tab {
    scroll-snap-align: start;
  }
}

/* ══════════════════════════════════════════
   [FIX] Long text overflow في الكويز
══════════════════════════════════════════ */
.qp-question {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}
.qcard-title {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ══════════════════════════════════════════
   [NEW] Focus mode (Zen) تحسين الانتقال
══════════════════════════════════════════ */
body.zen-mode * {
  transition: filter .5s ease, opacity .5s ease !important;
}
/* ══════════════════════════════════════════
   [NEW] Screen Reader Only - Accessibility
══════════════════════════════════════════ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ══════════════════════════════════════════
   [FIX] Notification Badge - تحسين مظهر
══════════════════════════════════════════ */
#notifBadge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  line-height: 18px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 900;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--err);
  color: #fff;
  position: absolute;
  top: 3px;
  left: 3px;
  box-shadow: 0 2px 6px rgba(255,118,117,.4);
  animation: scaleIn .2s ease;
  pointer-events: none;
}
#notifBadge.on { display: flex; }

/* ══════════════════════════════════════════
   [NEW] قائمة أدوات الدراسة - تحسين شامل
══════════════════════════════════════════ */
.study-tool-card {
  cursor: pointer;
  border-radius: var(--r);
  padding: 16px 12px;
  text-align: center;
  background: var(--card);
  border: 1.5px solid var(--border);
  transition: transform .2s, box-shadow .2s, border-color .2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
}
.study-tool-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad);
  opacity: 0;
  transition: opacity .2s;
}
.study-tool-card:hover::before,
.study-tool-card:focus-within::before { opacity: .06; }
.study-tool-card:active { transform: scale(.97); }

/* ══════════════════════════════════════════
   [NEW] تحسين قائمة الأشخاص (People)
══════════════════════════════════════════ */
.wa-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  border-radius: var(--r2);
  transition: background .18s;
  position: relative;
}
.wa-row:active { background: var(--surface); }

/* ══════════════════════════════════════════
   [NEW] Divider مع نص للتاريخ في الشات
══════════════════════════════════════════ */
.chat-date-sep {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
  color: var(--tx3);
  font-size: 11px;
  font-weight: 600;
}
.chat-date-sep::before,
.chat-date-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ══════════════════════════════════════════
   [FIX] Back button في الـ chatMain على موبايل
══════════════════════════════════════════ */
@media (max-width: 767px) {
  #backToThreads {
    display: flex !important;
  }
}
@media (min-width: 768px) {
  #backToThreads {
    display: none !important;
  }
  #chatSidebar {
    display: flex !important;
  }
  #chatMain {
    display: flex !important;
  }
}

/* ══════════════════════════════════════════
   [NEW] Qubedu Brand Colors - Gradient updates
══════════════════════════════════════════ */
:root {
  --brand-1: #6c5ce7;
  --brand-2: #a29bfe;
  --brand-3: #fd79a8;
  --brand-grad: linear-gradient(135deg, var(--brand-1), var(--brand-3));
}

/* ══════════════════════════════════════════
   [FIX] إصلاح تحميل البطاقات - flip animation
══════════════════════════════════════════ */
.fc-card-wrap {
  perspective: 1000px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.fc-scene {
  position: relative;
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.175,.885,.32,1.275);
  width: 100%;
}
.fc-scene.flipped {
  transform: rotateY(180deg);
}
.fc-face {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.fc-back {
  transform: rotateY(180deg);
  position: absolute;
  top: 0; left: 0; right: 0;
}

/* ══════════════════════════════════════════
   [NEW] Progress bar للـ Streak
══════════════════════════════════════════ */
.streak-progress {
  height: 4px;
  background: rgba(255,255,255,.2);
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}
.streak-progress-fill {
  height: 100%;
  background: rgba(255,255,255,.8);
  border-radius: 2px;
  transition: width .6s ease;
}

/* ══════════════════════════════════════════
   [NEW] تحسين كاردات الكويز
══════════════════════════════════════════ */
.quiz-diff {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 700;
}
.quiz-diff.easy  { background: rgba(0,184,148,.15); color: var(--ok); }
.quiz-diff.med   { background: rgba(253,203,110,.15); color: var(--warn); }
.quiz-diff.hard  { background: rgba(255,118,117,.15); color: var(--err); }

/* ══════════════════════════════════════════
   [NEW] XP animation تحسين
══════════════════════════════════════════ */
.xp-pop {
  position: fixed;
  pointer-events: none;
  font-weight: 900;
  font-size: 16px;
  color: var(--pr3);
  text-shadow: 0 2px 8px rgba(108,92,231,.5);
  z-index: 9998;
  animation: xpFloat 1.3s ease forwards;
}

/* ══════════════════════════════════════════
   [FIX] Dark mode - تحسين ألوان النصوص
══════════════════════════════════════════ */
[data-theme=dark] .quiz-card .qcard-title {
  color: var(--tx);
}
[data-theme=dark] .ann-card {
  border-color: rgba(255,255,255,.08);
}
[data-theme=dark] .sett-row:hover {
  background: var(--surface);
}

/* ══════════════════════════════════════════
   [FIX] inputs في الـ dark mode
══════════════════════════════════════════ */
[data-theme=dark] .inp {
  color: var(--tx);
  background: var(--card2);
}
[data-theme=dark] .inp::placeholder {
  color: var(--tx3);
}
[data-theme=dark] select.inp option {
  background: var(--card2);
  color: var(--tx);
}