/* ===== الألوان الأساسية (الثيم الافتراضي Ocean) ===== */
:root{
  --bg:#f3f7fb;      /* خلفية الصفحة */
  --card:#fff;       /* خلفية البطاقات */
  --ink:#0f1b2d;     /* لون النص */
  --muted:#64748b;   /* لون النص الثانوي */
  --line:#e3eaf3;   /* لون الحدود */
  --p1:#0ea5a4;      /* اللون الأول للتدرج */
  --p2:#2563eb;      /* اللون الثاني للتدرج */
  --soft:#e3f5f5;    /* لون فاتح من الثيم للخلفيات الخفيفة */
  --bad:#e5484d;     /* لون الحذف والخروج والأخطاء (أحمر) */
  --shadow:0 10px 30px rgba(15,27,45,.07); /* ظل ناعم */
  --on:#fff;         /* لون النص فوق التدرج */
  --grad:linear-gradient(135deg,var(--p1),var(--p2)); /* التدرج الرئيسي */
}
/* ===== الثيمات: لكل لون وضع فاتح ووضع داكن خاص به ===== */
[data-theme="ocean"]{--bg:#f3f7fb;--soft:#e3f5f5;--p1:#0ea5a4;--p2:#2563eb} /* Ocean أزرق مائي (فاتح) */
[data-theme="ocean"][data-mode="dark"]{--bg:#06161b;--card:#0d2730;--ink:#e3f4f6;--muted:#8db3bb;--line:#1a3d48;--p1:#2dd4bf;--p2:#3b82f6;--soft:#11323d;--on:#04141a;--shadow:0 12px 34px rgba(0,0,0,.45);color-scheme:dark} /* Ocean (داكن خاص به) */
[data-theme="sunset"]{--bg:#fdf5f9;--soft:#ffe8f2;--p1:#f0559b;--p2:#b83280} /* Pink وردي (فاتح) */
[data-theme="sunset"][data-mode="dark"]{--bg:#170d14;--card:#251520;--ink:#fdeaf3;--muted:#c9a0b6;--line:#40222f;--p1:#ff8cc0;--p2:#d946a0;--soft:#331b29;--on:#1d0a14;--shadow:0 12px 34px rgba(0,0,0,.45);color-scheme:dark} /* Pink وردي (داكن خاص به) */
[data-theme="forest"]{--bg:#f2f8f4;--soft:#e3f6ea;--p1:#16a34a;--p2:#0d9488} /* Forest غابة (فاتح) */
[data-theme="forest"][data-mode="dark"]{--bg:#08150e;--card:#10251a;--ink:#e6f6ea;--muted:#93b8a0;--line:#1d3d2a;--p1:#4ade80;--p2:#2dd4bf;--soft:#143321;--on:#04140a;--shadow:0 12px 34px rgba(0,0,0,.45);color-scheme:dark} /* Forest (داكن خاص به) */
[data-theme="violet"]{--bg:#f6f4fc;--soft:#eee8fd;--p1:#7c3aed;--p2:#2563eb} /* Violet بنفسجي (فاتح) */
[data-theme="violet"][data-mode="dark"]{--bg:#0f0b20;--card:#191433;--ink:#eeeafd;--muted:#a9a0cf;--line:#2b2452;--p1:#a78bfa;--p2:#60a5fa;--soft:#241d4a;--on:#0d0820;--shadow:0 12px 34px rgba(0,0,0,.45);color-scheme:dark} /* Violet (داكن خاص به) */
[data-theme="graphite"]{--bg:#f4f5f7;--soft:#e8ebf0;--p1:#64748b;--p2:#334155} /* Graphite رمادي أنيق (فاتح) */
[data-theme="graphite"][data-mode="dark"]{--bg:#0d0f14;--card:#171b23;--ink:#eceff4;--muted:#9aa4b5;--line:#272d3a;--p1:#8b9ab5;--p2:#5b6b88;--soft:#1f2430;--on:#0a0c10;--shadow:0 12px 34px rgba(0,0,0,.45);color-scheme:dark} /* Graphite (داكن خاص به) */

/* ===== الأساسيات ===== */
*{box-sizing:border-box;margin:0;padding:0}                 /* إلغاء الهوامش الافتراضية */
body{font-family:"Outfit",system-ui,sans-serif;color:var(--ink);min-height:100vh;display:flex;background:radial-gradient(900px 420px at 100% -10%,var(--soft),transparent),var(--bg);transition:background .4s,color .4s} /* الخط والخلفية والتقسيم */
a{color:inherit;text-decoration:none}                       /* روابط بدون تسطير */
button{font:inherit;cursor:pointer;border:0}                /* توحيد الأزرار */
:focus-visible{outline:3px solid var(--p1);outline-offset:2px} /* إطار واضح للوحة المفاتيح */

/* ===== الشريط الجانبي ===== */
.side{width:260px;flex-shrink:0;position:sticky;top:0;height:100vh;padding:26px 18px;background:var(--card);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:6px;transition:background .4s;overflow-y:auto} /* عمود ثابت يمكن تمريره إن كانت الشاشة قصيرة */
.brand{display:flex;align-items:center;gap:12px;font-size:1.45rem;font-weight:700;margin:0 8px 24px} /* الشعار والاسم */
.brand img{width:40px;height:40px}                          /* حجم الشعار */
.brand div{background:linear-gradient(90deg,#0ea5a4,#2563eb);-webkit-background-clip:text;background-clip:text;color:transparent} /* اسم الموقع بألوان الشعار الثابتة ولا يتغير مع الثيم */
.side nav a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;color:var(--muted);font-weight:500;transition:.2s} /* روابط القائمة */
.side nav a:hover{background:var(--soft);color:var(--ink);transform:translateX(3px)} /* حركة عند المرور */
.side nav a.on{background:var(--grad);color:var(--on);box-shadow:0 8px 20px -6px var(--p2)} /* الصفحة الحالية */
.swatches{margin-top:auto;padding:14px 8px 0;border-top:1px solid var(--line)} /* منطقة اختيار الثيم */
.swatches small{color:var(--muted);display:block;margin-bottom:10px} /* عنوان الثيمات */
.dots{display:flex;gap:10px;flex-wrap:wrap}                 /* صف الدوائر */
.dot{width:30px;height:30px;border-radius:50%;border:3px solid var(--card);box-shadow:0 0 0 2px var(--line);transition:.2s} /* دائرة ثيم */
.dot:hover{transform:scale(1.15)}                           /* تكبير عند المرور */
.dot.on{box-shadow:0 0 0 3px var(--ink)}                    /* الثيم المختار */

/* ===== المحتوى ===== */
main{flex:1;min-width:0;padding:38px 44px 60px;max-width:1180px;animation:in .5s ease} /* مساحة المحتوى مع ظهور ناعم */
@keyframes in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* حركة الظهور */
h1{font-size:2.1rem;font-weight:700;letter-spacing:-.02em}  /* عنوان الصفحة */
.sub{color:var(--muted);margin:4px 0 26px}                  /* وصف الصفحة */
h2{font-size:1.15rem;font-weight:600;margin-bottom:14px}    /* عناوين الأقسام */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;margin-bottom:28px} /* شبكة متجاوبة */
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:var(--shadow);transition:transform .2s,background .4s} /* البطاقة */
.card.lift:hover{transform:translateY(-4px)}                /* ارتفاع عند المرور */

/* ===== بطاقة الترحيب والإحصائيات ===== */
.hero{background:var(--grad);color:var(--on);border-radius:26px;padding:34px;margin-bottom:26px;position:relative;overflow:hidden;box-shadow:0 20px 40px -16px var(--p2)} /* بطاقة الترحيب */
.hero::after{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.14)} /* دائرة زخرفية */
.hero p{opacity:.9;margin-top:6px}                          /* نص الترحيب */
.stat b{display:block;font-size:2.3rem;font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} /* رقم الإحصائية */
.stat span{color:var(--muted)}                              /* وصف الرقم */

/* ===== الأزرار والنماذج ===== */
.btn{background:var(--grad);color:var(--on);font-weight:600;padding:11px 20px;border-radius:12px;transition:.2s;box-shadow:0 8px 18px -8px var(--p2)} /* زر رئيسي */
.btn:hover{transform:translateY(-2px);filter:brightness(1.07)} /* حركة الزر */
.btn.sm{padding:7px 14px;font-size:.9rem;box-shadow:none}   /* زر صغير */
.btn.ghost{background:var(--soft);color:var(--ink);box-shadow:none} /* زر هادئ */
.btn.danger{background:transparent;color:var(--bad);box-shadow:none;border:1px solid var(--line)} /* زر الحذف */
.btn.danger:hover{background:var(--bad);color:#fff}         /* حذف عند المرور */
form{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end} /* ترتيب النموذج */
label{display:flex;flex-direction:column;gap:6px;font-size:.85rem;color:var(--muted);flex:1;min-width:140px} /* عنوان الحقل */
input,select,textarea{font:inherit;color:var(--ink);padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg);transition:.2s;width:100%} /* حقول الإدخال */
input:focus,select:focus,textarea:focus{border-color:var(--p1);box-shadow:0 0 0 4px var(--soft);outline:0} /* حقل مفعّل */
.formcard{margin-bottom:26px}                               /* مسافة تحت بطاقة النموذج */

/* ===== المواد ===== */
.course{display:flex;align-items:center;gap:14px;flex-wrap:wrap}           /* سطر المادة */
.course i{width:12px;height:44px;border-radius:8px;background:var(--c)} /* شريط لون المادة */
.course .grow{flex:1}                                       /* يأخذ المساحة */
.chip{display:inline-block;padding:4px 12px;border-radius:20px;background:var(--soft);font-size:.82rem;font-weight:600} /* وسم صغير */

/* ===== الجدول الأسبوعي ===== */
.week{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:14px} /* أعمدة تتكيف مع عرض الشاشة */
@media(min-width:1500px){.week{grid-template-columns:repeat(7,minmax(0,1fr))}} /* سبعة أعمدة على الشاشات الواسعة */
.day>.btn{margin-top:auto;width:100%;white-space:nowrap} /* زر الإضافة أسفل العمود بعرض كامل */
.day{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px;min-height:220px;display:flex;flex-direction:column;gap:10px} /* عمود يوم */
.day.today{border-color:var(--p1);box-shadow:0 0 0 3px var(--soft)} /* تمييز اليوم الحالي */
.day h3{font-size:1rem;display:flex;justify-content:space-between;align-items:center} /* عنوان اليوم */
.slot{border-radius:12px;padding:10px 12px;background:var(--soft);border-left:5px solid var(--c);font-size:.9rem;position:relative} /* حصة دراسية */
.slot b{display:block;padding-right:44px;overflow-wrap:break-word}                                      /* اسم المادة */
.slot small{color:var(--muted)}                             /* وقت الحصة */
.slot button{position:absolute;top:6px;right:6px;background:none;color:var(--muted);font-size:1rem} /* زر حذف الحصة */
.slot button.edit{right:30px}                                /* زر تعديل الحصة */
.slot button:hover{color:var(--bad)}                        /* لون الحذف */
dialog{border:0;border-radius:22px;padding:26px;width:min(92vw,400px);background:var(--card);color:var(--ink);box-shadow:0 30px 70px rgba(0,0,0,.3);margin:auto} /* نافذة الإضافة */
dialog::backdrop{background:rgba(10,15,30,.5);backdrop-filter:blur(3px)} /* خلفية معتمة */
dialog form{flex-direction:column;align-items:stretch}      /* ترتيب عمودي داخل النافذة */
.two{display:flex;gap:12px}                                 /* حقلان بجانب بعضهما */

/* ===== المهام والملاحظات ===== */
.board{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px} /* عمودان: قيد الإنجاز / منجز */
.item{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);border-left:5px solid var(--c);border-radius:16px;padding:14px 16px;margin-bottom:12px;transition:.2s} /* عنصر */
.item:hover{transform:translateX(4px)}                      /* حركة عند المرور */
.item .grow{flex:1;min-width:0;overflow-wrap:anywhere}      /* نص العنصر */
.item p{color:var(--muted);font-size:.92rem;margin-top:3px} /* نص الملاحظة */
.item.done b{text-decoration:line-through;color:var(--muted)} /* شطب المنجز */
.item.done{opacity:.8}                                      /* خفوت المنجز */
.acts{display:flex;gap:8px;flex-wrap:wrap}                  /* أزرار العنصر */
.empty{color:var(--muted);text-align:center;padding:26px;border:2px dashed var(--line);border-radius:16px} /* حالة فارغة */

/* ===== العد التنازلي ===== */
.exam{display:flex;gap:18px;align-items:center;flex-wrap:wrap} /* بطاقة امتحان */
.exam .grow{flex:1;min-width:180px}                         /* معلومات الامتحان */
.count{display:flex;gap:10px}                               /* صف المربعات */
.cd{background:var(--grad);color:var(--on);border-radius:14px;padding:10px 0;width:64px;text-align:center} /* مربع رقم */
.cd b{display:block;font-size:1.5rem;font-variant-numeric:tabular-nums} /* الرقم */
.cd small{font-size:.7rem;opacity:.85}                      /* الوحدة */

/* ===== زر الوضع والمستخدم ===== */
#modeBtn{width:100%;margin-top:14px}                        /* زر الفاتح/الداكن */
.who{margin:0 0 14px;padding:12px 14px;background:var(--soft);border-radius:14px;display:flex;flex-direction:column;gap:6px} /* صندوق المستخدم أعلى القائمة */
.who span{font-size:.75rem;color:var(--muted)}              /* كلمة Signed in as */
.who b{font-size:.88rem;font-weight:600;overflow-wrap:anywhere} /* البريد الإلكتروني */
.wait main,.wait .side{opacity:0}                           /* إخفاء الواجهة حتى تُحمَّل البيانات */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--card);padding:12px 20px;border-radius:12px;z-index:99;box-shadow:var(--shadow)} /* رسالة منبثقة */

/* ===== صفحة الدخول ===== */
[hidden]{display:none!important}                            /* احترام خاصية hidden دائماً */
.link{background:none;color:var(--p2);font-weight:600;text-align:center;padding:4px;text-decoration:underline} /* رابط نصي */
.auth{width:100%;min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr} /* قسمان */
.authside{background:var(--grad);color:var(--on);padding:60px;display:flex;flex-direction:column;justify-content:center;gap:16px;position:relative;overflow:hidden} /* القسم الملوّن */
.authside::after{content:"";position:absolute;right:-80px;bottom:-80px;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.14)} /* دائرة زخرفية */
.authside h1{font-size:2.6rem;line-height:1.1}              /* عنوان كبير */
.authside li{list-style:none;padding:6px 0;font-size:1.05rem} /* مزايا الموقع */
.authform{display:flex;align-items:center;justify-content:center;padding:40px} /* قسم النموذج */
.authbox{width:min(100%,400px);display:flex;flex-direction:column;gap:16px} /* صندوق النموذج */
.authbox form{flex-direction:column;align-items:stretch}    /* حقول عمودية */
.tabs{display:flex;background:var(--soft);padding:5px;border-radius:14px} /* تبويبات الدخول/التسجيل */
.tabs button{flex:1;padding:10px;border-radius:10px;background:none;color:var(--muted);font-weight:600} /* تبويب */
.tabs button.on{background:var(--card);color:var(--ink);box-shadow:var(--shadow)} /* التبويب المفعّل */
.msg{min-height:1.4em;font-size:.92rem}                     /* مكان الرسائل */
.msg.err{color:var(--bad)}                                  /* رسالة خطأ */
.msg.ok{color:var(--p1)}                                    /* رسالة نجاح */
@media(max-width:820px){.auth{grid-template-columns:1fr}.authside{padding:30px}.authside ul{display:none}} /* الدخول على الهاتف */

/* ===== الأحمر في الوضع الداكن ===== */
[data-mode="dark"]{--bad:#ff6b6b}  /* أحمر أفتح ليظهر على الخلفية الداكنة */
[data-mode="dark"] .btn.danger:hover{color:#1b0a14}         /* نص داكن فوق الوردي الفاتح */

@media(max-height:760px){.side{padding:16px 14px}.brand{margin-bottom:14px}.side nav a{padding:9px 12px}.who{margin-bottom:8px}} /* شاشات قصيرة: تصغير المسافات */

/* ===== حقوق الحفظ ===== */
.credit{margin-top:48px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:.85rem;text-align:center;line-height:1.7} /* تذييل الصفحة */
.credit b{color:var(--ink);font-weight:600}                 /* تمييز الأسماء */
.authbox .credit{margin-top:6px}                            /* في صفحات الدخول */

/* ===== الهاتف والحركة ===== */
@media(max-width:820px){
  body{flex-direction:column}                               /* ترتيب عمودي */
  .side{width:100%;height:auto;position:static;border:0;padding:14px}  /* الشريط يصبح علوياً */
  .side nav{display:flex;gap:4px;overflow-x:auto}           /* روابط أفقية قابلة للتمرير */
  .side nav a{white-space:nowrap;padding:9px 12px}          /* روابط أصغر */
  .brand{margin-bottom:10px}                                /* تقليل المسافة */
  .swatches{margin-top:10px;padding-top:10px}               /* الثيمات تحت الروابط */
  main{padding:22px 16px 50px}                              /* هوامش أصغر */
  .cd{width:56px}                                           /* مربعات أصغر */
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* احترام تفضيل تقليل الحركة */