/* ══════════════════════════════════════════════════════════════════════
   حصتي — نسخة الويب
   نظام تصميم واحد: توكنات الألوان أول حاجة، وبعدها الهيكل، وبعدها
   المكوّنات، وآخر حاجة الحركات. أي لون في الملف ده لازم يبقى متغيّر —
   الوضع الليلي بيتعمل بإعادة تعريف المتغيّرات بس، مش بقواعد مكرّرة.
   الألوان مطابقة لصفحة الهبوط والتطبيق عشان الهوية تبقى واحدة.
   ══════════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:'Cairo';
  src:url('/static/landing/cairo.woff2') format('woff2-variations');
  font-weight:300 800; font-style:normal; font-display:swap;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --brand:#3AA7CE; --brand-600:#2E8CAE; --brand-700:#22708C;
  --brand-50:#EEF8FC; --brand-100:#D8EEF7;
  --accent:#F06030; --accent-50:#FEF0EB; --accent-600:#D94D20;
  --green:#22A06B; --green-50:#E7F7F0;
  --amber:#E0A106; --amber-50:#FDF4E0;
  --red:#DC4C46; --red-50:#FDEDEC;
  --purple:#7C5CE0; --purple-50:#F0ECFD;

  --ink:#0F3E52; --body:#4E7182; --muted:#7D9AA8;
  --bg:#F4FAFD; --surface:#FFFFFF; --surface-2:#FFFFFF;
  --line:#E1EDF3; --line-soft:#EEF5F9;

  --shadow-xs:0 1px 2px rgba(15,62,82,.05);
  --shadow-sm:0 1px 2px rgba(15,62,82,.06),0 2px 8px rgba(15,62,82,.05);
  --shadow-md:0 4px 12px rgba(15,62,82,.07),0 12px 32px rgba(15,62,82,.07);
  --shadow-lg:0 12px 28px rgba(15,62,82,.10),0 32px 64px rgba(15,62,82,.10);
  --shadow-brand:0 10px 24px rgba(58,167,206,.28);

  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-full:999px;
  --sidebar:272px; --topbar:68px;
  --pad:clamp(14px,2.5vw,26px);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* الوضع الليلي: تلقائي حسب النظام، وقابل للتثبيت من الزرار.
   `:root:not([data-theme="light"])` بيخلّي اختيار المستخدم يغلب النظام. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --brand-50:#0E2A36; --brand-100:#123647;
    --accent-50:#33170E; --green-50:#0C2C22; --amber-50:#2E2510; --red-50:#331A19;
    --purple-50:#1E1836;
    --ink:#E8F4F9; --body:#9FBECD; --muted:#7795A5;
    --bg:#081820; --surface:#0E2731; --surface-2:#123340;
    --line:#1C3B49; --line-soft:#16313D;
    --shadow-xs:0 1px 2px rgba(0,0,0,.3);
    --shadow-sm:0 1px 2px rgba(0,0,0,.3);
    --shadow-md:0 4px 12px rgba(0,0,0,.35);
    --shadow-lg:0 16px 40px rgba(0,0,0,.45);
    --shadow-brand:0 10px 24px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --brand-50:#0E2A36; --brand-100:#123647;
  --accent-50:#33170E; --green-50:#0C2C22; --amber-50:#2E2510; --red-50:#331A19;
  --purple-50:#1E1836;
  --ink:#E8F4F9; --body:#9FBECD; --muted:#7795A5;
  --bg:#081820; --surface:#0E2731; --surface-2:#123340;
  --line:#1C3B49; --line-soft:#16313D;
  --shadow-xs:0 1px 2px rgba(0,0,0,.3);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 4px 12px rgba(0,0,0,.35);
  --shadow-lg:0 16px 40px rgba(0,0,0,.45);
  --shadow-brand:0 10px 24px rgba(0,0,0,.4);
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:'Cairo',system-ui,'Segoe UI',Tahoma,sans-serif;
  background:var(--bg); color:var(--body);
  font-size:15px; line-height:1.75; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4,h5{color:var(--ink);line-height:1.35;font-weight:800;text-wrap:balance}
h1{font-size:clamp(22px,3vw,30px);letter-spacing:-.02em}
h2{font-size:clamp(18px,2.2vw,23px);letter-spacing:-.015em}
h3{font-size:17px;font-weight:700}
h4{font-size:15px;font-weight:700}
a{color:inherit;text-decoration:none}
img,svg,video{max-width:100%;display:block}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
::selection{background:var(--brand-100);color:var(--ink)}

/* شريط تمرير رفيع — الافتراضي في ويندوز تخين وبيكسر إحساس الواجهة */
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--muted);background-clip:content-box}

/* ══════════════ الهيكل ══════════════ */
.shell{display:flex;min-height:100vh}

.sidebar{
  position:fixed;inset-block:0;inset-inline-start:0;width:var(--sidebar);
  background:var(--surface);border-inline-end:1px solid var(--line);
  display:flex;flex-direction:column;z-index:60;
  transition:transform .38s var(--ease);
}
.sidebar__brand{
  display:flex;align-items:center;gap:10px;padding:18px 20px;
  border-bottom:1px solid var(--line-soft);min-height:var(--topbar);
}
.sidebar__brand img{width:36px;height:36px;border-radius:10px}
.sidebar__brand b{color:var(--ink);font-size:18px;font-weight:800}
.sidebar__brand span{font-size:11px;color:var(--muted);display:block;line-height:1.2}
.sidebar__nav{flex:1;overflow-y:auto;padding:12px 12px 20px}
.nav-group{margin-bottom:6px}
.nav-group__title{
  font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.04em;
  padding:12px 12px 6px;text-transform:uppercase;
}
.nav-item{
  position:relative;display:flex;align-items:center;gap:11px;
  padding:9px 12px;border-radius:var(--r-sm);color:var(--body);
  font-size:14px;font-weight:600;margin-bottom:2px;
  transition:background .18s,color .18s,transform .18s var(--ease);
}
.nav-item svg{width:19px;height:19px;flex:none;opacity:.8;transition:opacity .18s,transform .3s var(--ease)}
.nav-item:hover{background:var(--brand-50);color:var(--ink);transform:translateX(3px)}
[dir="rtl"] .nav-item:hover{transform:translateX(-3px)}
.nav-item:hover svg{opacity:1;transform:scale(1.08)}
.nav-item.is-active{background:var(--brand);color:#fff;box-shadow:var(--shadow-brand)}
.nav-item.is-active svg{opacity:1}
.nav-item__badge{
  margin-inline-start:auto;background:var(--accent);color:#fff;
  font-size:11px;font-weight:700;min-width:20px;height:20px;border-radius:99px;
  display:grid;place-items:center;padding:0 6px;
}
.nav-item.is-active .nav-item__badge{background:rgba(255,255,255,.25)}

.main{flex:1;margin-inline-start:var(--sidebar);min-width:0;display:flex;flex-direction:column}

.topbar{
  position:sticky;top:0;z-index:50;height:var(--topbar);
  display:flex;align-items:center;gap:12px;padding:0 var(--pad);
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.topbar__search{flex:1;max-width:460px;position:relative;margin-inline-end:auto}
.topbar__search input{
  width:100%;height:42px;border-radius:var(--r-full);border:1px solid var(--line);
  background:var(--surface);padding-block:0;padding-inline:42px 16px;font-size:14px;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.topbar__search input:focus{
  outline:none;border-color:var(--brand);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 15%,transparent);
}
.topbar__search svg{
  position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:var(--muted);pointer-events:none;
}
.icon-btn{
  position:relative;width:42px;height:42px;border-radius:var(--r-full);
  display:grid;place-items:center;border:1px solid var(--line);
  background:var(--surface);color:var(--body);cursor:pointer;
  transition:transform .2s var(--ease),border-color .2s,color .2s,background .2s;
}
.icon-btn:hover{transform:translateY(-2px);color:var(--brand);border-color:var(--brand-100)}
.icon-btn:active{transform:scale(.94)}
.icon-btn svg{width:19px;height:19px}
/* زرار اللغة: نفس شكل الأزرار الدايرية بس بيتوسّع للكود الجنب الأيقونة */
.lang-btn{width:auto;padding-inline:12px;gap:6px;display:inline-flex;align-items:center}
.lang-btn b{font-size:12.5px;font-weight:800;letter-spacing:.02em}
.lang-btn svg{opacity:.75}
.auth__lang{position:fixed;top:18px;inset-inline-start:18px;z-index:10;display:flex;gap:8px;align-items:center}
@media(max-width:480px){.auth__lang .lang-btn b{font-size:11.5px}}
.icon-btn__dot{
  position:absolute;top:7px;inset-inline-end:7px;min-width:17px;height:17px;padding:0 4px;
  background:var(--accent);color:#fff;font-size:10px;font-weight:700;
  border-radius:99px;display:grid;place-items:center;
  border:2px solid var(--bg);
}
.avatar{
  width:40px;height:40px;border-radius:var(--r-full);object-fit:cover;
  border:2px solid var(--surface);box-shadow:var(--shadow-xs);background:var(--brand-50);
}
.avatar--sm{width:32px;height:32px}
.avatar--lg{width:72px;height:72px;border-width:3px}
.avatar--xl{width:104px;height:104px;border-width:4px}

.content{flex:1;padding:var(--pad);padding-bottom:96px;max-width:1240px;width:100%;margin-inline:auto}
@media(min-width:981px){.content{padding-bottom:40px}}

/* ══════════════ القائمة السفلية (موبايل) ══════════════ */
.bottomnav{
  position:fixed;inset-inline:0;bottom:0;z-index:70;display:none;
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  grid-auto-flow:column;grid-auto-columns:1fr;
}
.bottomnav a{
  display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;
  font-size:10.5px;font-weight:700;color:var(--muted);border-radius:var(--r-sm);
  position:relative;transition:color .2s;
}
.bottomnav a svg{width:21px;height:21px;transition:transform .3s var(--ease)}
.bottomnav a.is-active{color:var(--brand)}
.bottomnav a.is-active svg{transform:translateY(-2px) scale(1.1)}
.bottomnav a.is-active::after{
  content:'';position:absolute;top:0;inset-inline:0;margin-inline:auto;width:22px;height:3px;
  background:var(--brand);border-radius:0 0 99px 99px;animation:navPop .3s var(--ease);
}

/* ══════════════ الكروت ══════════════ */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px;box-shadow:var(--shadow-sm);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .2s;
}
.card--flat{box-shadow:none}
.card--pad0{padding:0;overflow:hidden}
a.card:hover,.card--hover:hover{
  transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--brand-100);
}
.card__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.card__title{font-size:16px;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:8px}
.card__title svg{width:18px;height:18px;color:var(--brand)}

.grid{display:grid;gap:14px}
.grid--2{grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.grid--stats{grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.split{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:981px){.split{grid-template-columns:1.6fr 1fr;align-items:start}}

/* كارت الرقم — الرقم هو البطل، فحجمه كبير واللابل تحته صغير */
.stat{
  position:relative;overflow:hidden;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;
  box-shadow:var(--shadow-sm);transition:transform .28s var(--ease),box-shadow .28s var(--ease);
}
.stat:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.stat__icon{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:var(--brand-50);color:var(--brand);margin-bottom:10px;
}
.stat__icon svg{width:19px;height:19px}
.stat__value{font-size:28px;font-weight:800;color:var(--ink);line-height:1.1;letter-spacing:-.02em}
.stat__label{font-size:12.5px;color:var(--muted);font-weight:600}
.stat::after{
  content:'';position:absolute;inset-block-start:-40%;inset-inline-start:-20%;
  width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--brand) 12%,transparent),transparent 70%);
  pointer-events:none;
}

/* ══════════════ الأزرار ══════════════ */
.btn{
  position:relative;overflow:hidden;display:inline-flex;align-items:center;
  justify-content:center;gap:8px;height:44px;padding:0 20px;border:1px solid transparent;
  border-radius:var(--r-full);font-size:14.5px;font-weight:700;cursor:pointer;
  background:var(--brand);color:#fff;box-shadow:var(--shadow-brand);
  transition:transform .22s var(--ease),box-shadow .22s,filter .2s,background .2s;
  white-space:nowrap;
}
.btn svg{width:18px;height:18px}
.btn:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn:active{transform:translateY(0) scale(.97)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.btn--ghost{background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:var(--shadow-xs)}
.btn--ghost:hover{border-color:var(--brand);color:var(--brand)}
.btn--accent{background:var(--accent);box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 28%,transparent)}
.btn--danger{background:var(--red);box-shadow:none}
.btn--soft{background:var(--brand-50);color:var(--brand-700);box-shadow:none}
.btn--sm{height:36px;padding:0 14px;font-size:13px}
.btn--sm svg{width:15px;height:15px}
.btn--lg{height:52px;padding:0 28px;font-size:16px}
.btn--block{width:100%}
.btn--icon{width:44px;padding:0}

/* تموّجة الضغط — بتتحط من app.js */
.ripple{
  position:absolute;border-radius:50%;transform:scale(0);
  background:rgba(255,255,255,.45);pointer-events:none;
  animation:ripple .6s var(--ease-out) forwards;
}
.btn--ghost .ripple,.btn--soft .ripple{background:color-mix(in srgb,var(--brand) 25%,transparent)}

/* ══════════════ الشارات ══════════════ */
.badge{
  display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;
  border-radius:var(--r-full);font-size:12px;font-weight:700;
  background:var(--brand-50);color:var(--brand-700);
}
.badge svg{width:13px;height:13px}
.badge--green{background:var(--green-50);color:var(--green)}
.badge--amber{background:var(--amber-50);color:var(--amber)}
.badge--red{background:var(--red-50);color:var(--red)}
.badge--accent{background:var(--accent-50);color:var(--accent-600)}
.badge--purple{background:var(--purple-50);color:var(--purple)}
.badge--plain{background:var(--line-soft);color:var(--body)}
.badge--lg{height:32px;padding:0 14px;font-size:13px}

.chip{
  display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;
  border-radius:var(--r-full);border:1px solid var(--line);background:var(--surface);
  font-size:13px;font-weight:600;color:var(--body);cursor:pointer;
  transition:all .2s var(--ease);
}
.chip:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-1px)}
.chip.is-active{background:var(--brand);border-color:var(--brand);color:#fff}

/* ══════════════ النماذج ══════════════ */
.field{margin-bottom:14px}
.field__label{display:block;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:6px}
.field__hint{font-size:12px;color:var(--muted);margin-top:5px}
.input,.select,.textarea{
  width:100%;min-height:46px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--surface);padding:11px 14px;font-size:14.5px;color:var(--ink);
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.textarea{min-height:110px;resize:vertical;line-height:1.7}
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:var(--brand);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 14%,transparent);
}
.input::placeholder,.textarea::placeholder{color:var(--muted)}
.select{
  appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 24px) calc(50% - 2px),calc(100% - 19px) calc(50% - 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  /* السهم بيترسم بإحداثيات فيزيائية، فله موضع لكل اتجاه، والمساحة
     اللي بتتساب له دايماً `inline-end`. */
  padding-inline-end:38px;
}
[dir="rtl"] .select{background-position:14px calc(50% - 2px),19px calc(50% - 2px)}
.row{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.switch{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.switch:last-child{border-bottom:none}
.switch input{appearance:none;width:46px;height:27px;border-radius:99px;background:var(--line);position:relative;cursor:pointer;flex:none;transition:background .25s}
/* الكرة بتتحرّك بـ `inset-inline-start` مش `translateX`: الإزاحة بالتحويل
   فيزيائية (يمين/شمال ثابتين) فكانت بتطلّع الكرة بره المسار في الاتجاه
   من اليمين لليسار — المفتاح كان بيتلوّن أزرق من غير كرة تبان. */
.switch input::after{content:'';position:absolute;top:3px;inset-inline-start:3px;width:21px;height:21px;border-radius:50%;background:#fff;box-shadow:var(--shadow-xs);transition:inset-inline-start .25s var(--ease)}
.switch input:checked{background:var(--brand)}
.switch input:checked::after{inset-inline-start:22px}
/* حقل الموبايل: كود الدولة جنب الرقم في إطار واحد — عشان يتقري حقل
   واحد مش حقلين. القايمة عرضها ثابت لأن المتصفح بيوسّعها على أطول اسم
   دولة في ٢٥٠ خيار لو سبناه. */
.phone-field{
  display:flex;align-items:stretch;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);
  transition:border-color .2s,box-shadow .2s;
}
.phone-field:focus-within{
  border-color:var(--brand);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 14%,transparent);
}
.phone-field__code,.phone-field__number{
  min-height:44px;padding:11px 14px;font-size:14.5px;color:var(--ink);
  border:none;background:transparent;
}
.phone-field__code:focus,.phone-field__number:focus{outline:none}
.phone-field__code{
  flex:0 0 auto;width:152px;font-size:13.5px;cursor:pointer;appearance:none;
  border-inline-end:1px solid var(--line);
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% - 2px),calc(100% - 15px) calc(50% - 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  padding-inline-end:32px;
}
/* السهم بيترسم بإحداثيات فيزيائية، فله موضع لكل اتجاه */
[dir="rtl"] .phone-field__code{background-position:10px calc(50% - 2px),15px calc(50% - 2px)}
.phone-field__number{flex:1;min-width:0;direction:ltr;text-align:left;letter-spacing:.02em}
.phone-field__number::placeholder{color:var(--muted);letter-spacing:normal}
@media(max-width:420px){
  .phone-field__code{width:118px;font-size:12.5px;padding-inline:10px 28px}
}

.file-drop{
  border:2px dashed var(--line);border-radius:var(--r-md);padding:22px;text-align:center;
  color:var(--muted);cursor:pointer;transition:all .2s;background:var(--bg);
}
.file-drop:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-50)}

/* ══════════════ الجداول ══════════════ */
.table-wrap{overflow-x:auto;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
thead th{
  text-align:start;font-size:12.5px;font-weight:700;color:var(--muted);
  padding:12px 14px;background:var(--bg);border-bottom:1px solid var(--line);
  position:sticky;top:0;
}
tbody td{padding:12px 14px;border-bottom:1px solid var(--line-soft);color:var(--body)}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background .18s}
tbody tr:hover{background:var(--brand-50)}

/* ══════════════ حالات فاضية / تحميل ══════════════ */
.empty{text-align:center;padding:46px 20px;color:var(--muted)}
.empty__icon{
  width:66px;height:66px;border-radius:22px;margin:0 auto 14px;display:grid;place-items:center;
  background:var(--brand-50);color:var(--brand);
}
.empty__icon svg{width:30px;height:30px}
.empty h3{margin-bottom:6px}
.empty p{font-size:14px;max-width:420px;margin-inline:auto}

.skeleton{
  background:linear-gradient(90deg,var(--line-soft) 25%,var(--line) 37%,var(--line-soft) 63%);
  background-size:400% 100%;animation:shimmer 1.4s ease infinite;border-radius:var(--r-sm);
}

/* ══════════════ التنبيهات ══════════════ */
.toasts{position:fixed;top:14px;inset-inline:0;margin-inline:auto;z-index:200;display:flex;flex-direction:column;gap:8px;width:min(92vw,440px)}
.toast{
  display:flex;align-items:flex-start;gap:10px;padding:13px 16px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-lg);
  font-size:14px;font-weight:600;color:var(--ink);
  animation:toastIn .45s var(--ease) both;
}
.toast svg{width:19px;height:19px;flex:none;margin-top:2px}
.toast--success{border-inline-start:4px solid var(--green)} .toast--success svg{color:var(--green)}
.toast--error{border-inline-start:4px solid var(--red)} .toast--error svg{color:var(--red)}
.toast--warning{border-inline-start:4px solid var(--amber)} .toast--warning svg{color:var(--amber)}
.toast--info{border-inline-start:4px solid var(--brand)} .toast--info svg{color:var(--brand)}
.toast.is-out{animation:toastOut .3s var(--ease) forwards}

/* ══════════════ الهيرو والأقسام ══════════════ */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.page-head p{font-size:14px;color:var(--muted);margin-top:2px}
.hero{
  position:relative;overflow:hidden;border-radius:var(--r-xl);padding:26px;
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-700) 100%);
  color:#fff;box-shadow:var(--shadow-brand);margin-bottom:18px;
}
.hero h1,.hero h2{color:#fff}
.hero p{color:rgba(255,255,255,.88)}
.hero__blob{
  position:absolute;border-radius:50%;filter:blur(38px);opacity:.5;pointer-events:none;
  animation:float 14s ease-in-out infinite;
}
.hero__blob--1{width:230px;height:230px;background:#fff3;inset-block-start:-70px;inset-inline-start:-40px}
.hero__blob--2{width:190px;height:190px;background:var(--accent);opacity:.32;inset-block-end:-80px;inset-inline-end:8%;animation-delay:-5s}

.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:22px 0 12px}
.section-title h2{font-size:18px}
.section-title a{font-size:13px;font-weight:700;color:var(--brand);display:inline-flex;align-items:center;gap:4px}
.section-title a:hover{gap:8px;transition:gap .2s}

/* ══════════════ القوائم والصفوف ══════════════ */
.list{display:flex;flex-direction:column}
.list__row{
  display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-soft);
  transition:padding-inline .2s var(--ease);
}
.list__row:last-child{border-bottom:none}
.list__row:hover{padding-inline:6px}
.list__main{flex:1;min-width:0}
.list__title{font-weight:700;color:var(--ink);font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list__sub{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list__trail{font-size:12.5px;color:var(--muted);font-weight:700;white-space:nowrap}

.meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--muted);font-weight:600}
.meta span{display:inline-flex;align-items:center;gap:5px}
.meta svg{width:14px;height:14px;opacity:.75}

/* ══════════════ شريط التقدّم ══════════════ */
.progress{height:8px;border-radius:99px;background:var(--line-soft);overflow:hidden}
.progress__bar{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--brand),var(--brand-600));width:0;transition:width 1s var(--ease)}
.progress--green .progress__bar{background:linear-gradient(90deg,var(--green),#39C98C)}
.progress--amber .progress__bar{background:linear-gradient(90deg,var(--amber),#F5C544)}

.ring{--val:0;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:conic-gradient(var(--brand) calc(var(--val)*1%),var(--line-soft) 0);}
.ring span{width:42px;height:42px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-size:12.5px;font-weight:800;color:var(--ink)}

/* ══════════════ التبويبات ══════════════ */
.tabs{display:flex;gap:4px;padding:4px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-full);overflow-x:auto;margin-bottom:16px;width:fit-content;max-width:100%}
.tabs a{padding:8px 16px;border-radius:var(--r-full);font-size:13.5px;font-weight:700;color:var(--body);white-space:nowrap;transition:all .22s var(--ease)}
.tabs a:hover{color:var(--brand)}
.tabs a.is-active{background:var(--brand);color:#fff;box-shadow:var(--shadow-brand)}

/* ══════════════ صور الغلاف ══════════════ */
.cover{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--brand-50)}
.cover img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.card:hover .cover img{transform:scale(1.06)}
.cover__tag{position:absolute;top:10px;inset-inline-start:10px;z-index:2}
.cover--book{aspect-ratio:3/4}
.cover__fallback{width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand-50),var(--brand-100));color:var(--brand)}
.cover__fallback svg{width:38px;height:38px;opacity:.7}

/* ══════════════ الشات ══════════════ */
.chat{display:grid;grid-template-columns:1fr;gap:0;height:calc(100vh - var(--topbar) - 120px);min-height:460px}
@media(min-width:981px){.chat{height:calc(100vh - var(--topbar) - 70px)}}
.chat__body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px;scroll-behavior:smooth}
.bubble{
  max-width:min(74%,520px);padding:10px 14px;border-radius:18px;font-size:14.5px;
  line-height:1.65;background:var(--surface);border:1px solid var(--line);
  color:var(--ink);align-self:flex-start;border-start-start-radius:6px;
  box-shadow:var(--shadow-xs);animation:bubbleIn .32s var(--ease) both;
  word-break:break-word;
}
.bubble--mine{
  align-self:flex-end;background:var(--brand);color:#fff;border-color:transparent;
  border-start-start-radius:18px;border-start-end-radius:6px;
}
.bubble__meta{font-size:10.5px;opacity:.7;margin-top:3px;text-align:end}
.bubble img{border-radius:12px;margin-bottom:6px;max-height:280px;object-fit:cover}
.bubble__file{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px}
.chat__composer{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:var(--surface);align-items:flex-end}
.chat__composer textarea{flex:1;min-height:46px;max-height:130px;resize:none}
.day-sep{align-self:center;font-size:11.5px;font-weight:700;color:var(--muted);background:var(--bg);padding:4px 12px;border-radius:99px;margin:6px 0}

/* ══════════════ المساعد ══════════════ */
.assistant__msg{display:flex;gap:10px;margin-bottom:14px;animation:fadeUp .4s var(--ease) both}
.assistant__avatar{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand),var(--purple));color:#fff;flex:none}
.assistant__avatar svg{width:18px;height:18px}
.assistant__bubble{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px 15px;box-shadow:var(--shadow-xs);max-width:min(88%,640px)}
.assistant__msg--user{flex-direction:row-reverse}
.assistant__msg--user .assistant__bubble{background:var(--brand);color:#fff;border-color:transparent}
.typing{display:inline-flex;gap:4px;align-items:center}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:typing 1.2s infinite}
.typing i:nth-child(2){animation-delay:.18s} .typing i:nth-child(3){animation-delay:.36s}

/* ══════════════ الجدول الأسبوعي ══════════════ */
.week{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.day{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:12px;min-height:110px;transition:transform .25s var(--ease),box-shadow .25s}
.day:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.day.is-today{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 12%,transparent)}
.day__name{font-size:13px;font-weight:800;color:var(--ink);margin-bottom:8px;display:flex;align-items:center;justify-content:space-between}
.slot{background:var(--brand-50);border-radius:10px;padding:7px 9px;margin-bottom:6px;font-size:12px;font-weight:600;color:var(--brand-700);border-inline-start:3px solid var(--brand)}
.slot b{display:block;font-size:12.5px;color:var(--ink)}

/* ══════════════ مساعدات ══════════════ */
.muted{color:var(--muted)}
.small{font-size:12.5px}
.strong{color:var(--ink);font-weight:700}
.center{text-align:center}
.flex{display:flex;align-items:center;gap:10px}
.flex-between{display:flex;align-items:center;justify-content:space-between;gap:10px}
.flex-wrap{flex-wrap:wrap}
.gap-sm{gap:6px} .gap-lg{gap:18px}
.mt{margin-top:14px} .mt-lg{margin-top:24px} .mb{margin-bottom:14px} .mb-sm{margin-bottom:8px}
.grow{flex:1;min-width:0}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.divider{height:1px;background:var(--line-soft);margin:16px 0}
.price{font-size:19px;font-weight:800;color:var(--ink)} .price small{font-size:12px;color:var(--muted);font-weight:600}
.stars{display:inline-flex;gap:2px;color:var(--amber)} .stars svg{width:15px;height:15px}
.hide{display:none!important}

/* ══════════════ صفحات الدخول ══════════════ */
.auth{min-height:100vh;display:grid;grid-template-columns:1fr;place-items:center;padding:20px;position:relative;overflow:hidden}
@media(min-width:981px){.auth{grid-template-columns:1fr 1fr}}
.auth__aside{
  display:none;position:relative;overflow:hidden;border-radius:var(--r-xl);
  background:linear-gradient(140deg,var(--brand),var(--brand-700));color:#fff;
  padding:46px;height:calc(100vh - 40px);width:100%;
  flex-direction:column;justify-content:center;
}
@media(min-width:981px){.auth__aside{display:flex}}
.auth__card{width:min(100%,440px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(22px,4vw,34px);box-shadow:var(--shadow-lg);animation:fadeUp .5s var(--ease) both}
.auth__logo{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.auth__logo img{width:44px;height:44px;border-radius:12px}
.auth__feature{display:flex;gap:12px;margin-bottom:18px;align-items:flex-start}
.auth__feature svg{width:22px;height:22px;flex:none;margin-top:3px}
.auth__feature b{display:block;font-size:15px}
.auth__feature p{font-size:13.5px;color:rgba(255,255,255,.82);margin:0}
.otp-input{letter-spacing:.7em;text-align:center;font-size:24px;font-weight:800;font-family:inherit}

/* ══════════════ خدمة المدرسة ══════════════ */
/* الجدول الأسبوعي: الخانة نفسها هي الزرار، والتعديل بيتفتح تحتها بـ
   <details> — من غير جافاسكريبت، ولو الملف مشتغلش الجدول يفضل شغّال. */
.timetable{min-width:720px}
.timetable th,.timetable td{padding:6px;vertical-align:top;text-align:center}
.timetable thead th{background:var(--bg);font-size:12.5px}
.timetable tbody th{text-align:start;background:var(--bg);white-space:nowrap}
.timetable tbody th b{display:block;font-size:13px;color:var(--ink)}
.timetable tr.is-break td,.timetable tr.is-break th{opacity:.6}

.slot-editor{position:relative}
.slot-editor>summary{list-style:none;cursor:pointer}
.slot-editor>summary::-webkit-details-marker{display:none}
.slot-cell{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;min-height:58px;border-radius:var(--r-sm);border:1px dashed var(--line);
  background:var(--bg);color:var(--muted);font-size:12.5px;padding:6px;
  transition:border-color .2s,background .2s,transform .2s var(--ease);
}
.slot-cell:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)}
.slot-cell.is-filled{
  border-style:solid;border-color:transparent;color:#fff;font-weight:700;
  background:color-mix(in srgb,var(--slot) 88%,#000 0%);
}
.slot-cell.is-filled span{font-weight:600;opacity:.85;font-size:11.5px}
.slot-cell__add{font-size:20px;line-height:1}
.slot-form{
  position:absolute;z-index:20;inset-inline-start:0;top:calc(100% + 6px);
  width:min(240px,70vw);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--shadow-lg);padding:12px;text-align:start;
}

/* شريط لون الفصل على الكارت — بيخلّي الفصل يتعرف بنظرة */
.lesson-card{position:relative;overflow:hidden}
.lesson-card::before{
  content:'';position:absolute;inset-block:0;inset-inline-start:0;width:4px;
  background:var(--slot,var(--brand));
}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}

/* الحضور: أربع حالات كزرار واحد بدل قايمة منسدلة لكل طالب */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-full);
  overflow:hidden;background:var(--surface)}
.seg__item{position:relative;cursor:pointer}
.seg__item input{position:absolute;opacity:0;pointer-events:none}
.seg__item span{
  display:block;padding:7px 13px;font-size:12.5px;font-weight:700;color:var(--muted);
  transition:background .18s,color .18s;white-space:nowrap;
}
.seg__item input:checked+span{color:#fff;background:var(--muted)}
.seg__item--present input:checked+span{background:var(--green)}
.seg__item--absent input:checked+span{background:var(--red)}
.seg__item--late input:checked+span{background:var(--amber)}
.seg__item--excused input:checked+span{background:var(--brand)}

/* السلوك: التصنيفات كشبكة شيبس — الملاحظة في دوستين */
.behavior-grid{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.behavior-chip{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  padding:9px 12px;border:1px solid var(--line);border-radius:var(--r-sm);
  cursor:pointer;font-size:13px;font-weight:600;background:var(--surface);
  transition:all .18s var(--ease);
}
.behavior-chip input{position:absolute;opacity:0;pointer-events:none}
.behavior-chip b{font-size:12px;color:var(--muted)}
.behavior-chip:hover{transform:translateY(-2px);box-shadow:var(--shadow-xs)}
.behavior-chip--positive:has(input:checked){background:var(--green-50);border-color:var(--green);color:var(--green)}
.behavior-chip--negative:has(input:checked){background:var(--red-50);border-color:var(--red);color:var(--red)}
.behavior-chip--positive b{color:var(--green)}
.behavior-chip--negative b{color:var(--red)}

.swatch{cursor:pointer;position:relative}
.swatch input{position:absolute;opacity:0;pointer-events:none}
.swatch span{
  display:block;width:30px;height:30px;border-radius:50%;background:var(--swatch);
  border:3px solid transparent;transition:border-color .2s,transform .2s;
}
.swatch input:checked+span{border-color:var(--ink);transform:scale(1.12)}

.pre-note{
  white-space:pre-wrap;font-family:inherit;font-size:14px;line-height:1.8;
  background:var(--bg);border-radius:var(--r-sm);padding:14px;color:var(--ink);
}

/* اختيار الطالب العشوائي — بيتعرض في نص الشاشة عشان يتشاف من آخر الفصل */
.pick-result{position:fixed;inset:0;z-index:210;display:grid;place-items:center;
  background:rgba(8,24,32,.55);backdrop-filter:blur(3px);padding:20px}
.pick-result__card{
  background:var(--surface);border-radius:var(--r-xl);padding:34px 42px;
  box-shadow:var(--shadow-lg);text-align:center;animation:fadeUp .35s var(--ease) both;
}
.pick-result__name{font-size:clamp(26px,5vw,44px);font-weight:800;color:var(--ink);
  margin-top:6px;letter-spacing:-.02em}

/* ══════════════ الحركات ══════════════ */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes bubbleIn{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
@keyframes toastIn{from{opacity:0;transform:translateY(-16px) scale(.96)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(-10px) scale(.96)}}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
@keyframes ripple{to{transform:scale(2.6);opacity:0}}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(18px,-22px)}}
@keyframes typing{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-5px);opacity:1}}
@keyframes navPop{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* دخول العناصر مع التمرير — الكلاس بيتشال من app.js */
.reveal{opacity:0;transform:translateY(18px)}
.reveal.is-in{opacity:1;transform:none;transition:opacity .55s var(--ease-out),transform .55s var(--ease-out)}
/* تدرّج التأخير بيدّي إحساس إن الصفحة بتترسم مش بتظهر مرة واحدة */
.stagger>*{opacity:0;animation:fadeUp .5s var(--ease) forwards}
.stagger>*:nth-child(1){animation-delay:.02s} .stagger>*:nth-child(2){animation-delay:.07s}
.stagger>*:nth-child(3){animation-delay:.12s} .stagger>*:nth-child(4){animation-delay:.17s}
.stagger>*:nth-child(5){animation-delay:.22s} .stagger>*:nth-child(6){animation-delay:.27s}
.stagger>*:nth-child(7){animation-delay:.32s} .stagger>*:nth-child(8){animation-delay:.37s}
.stagger>*:nth-child(n+9){animation-delay:.42s}
.page-enter{animation:fadeUp .45s var(--ease) both}
.spin{animation:spin 1s linear infinite}

/* شريط تقدّم التصفّح فوق خالص */
.scroll-progress{position:fixed;top:0;inset-inline:0;height:3px;z-index:300;background:transparent;pointer-events:none}
.scroll-progress__bar{height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--accent));transition:width .1s linear}

/* ══════════════ الموبايل ══════════════ */
.scrim{position:fixed;inset:0;background:rgba(8,24,32,.5);backdrop-filter:blur(2px);z-index:55;opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.is-open{opacity:1;pointer-events:auto}

@media(max-width:980px){
  .sidebar{transform:translateX(100%);box-shadow:var(--shadow-lg);width:min(86vw,300px)}
  [dir="ltr"] .sidebar{transform:translateX(-100%)}
  .sidebar.is-open{transform:none}
  .main{margin-inline-start:0}
  .bottomnav{display:grid}
  .topbar__search{max-width:none}
  .content{padding-bottom:104px}
  .hero{padding:20px}
  .bubble{max-width:86%}
}
@media(min-width:981px){.only-mobile{display:none!important}}
@media(max-width:980px){.only-desktop{display:none!important}}

/* الحركة بتتقفل بالكامل لمين طالبها من نظامه — مش بتتبطّأ بس */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .stagger>*{opacity:1;animation:none}
}

@media print{
  .sidebar,.topbar,.bottomnav,.toasts,.scroll-progress{display:none!important}
  .main{margin:0}
  .card{box-shadow:none;border-color:#ddd}
}