/* =========================================================
   غيم — الطابع الدراسي: ورق مربعات، رسومات دفاتر، أقلام تحديد
   ========================================================= */
:root{
  --grid-line: rgba(43,123,214,.055);
  --rule-line: rgba(43,123,214,.07);
  --margin-line: rgba(214,72,72,.28);
  --doodle: rgba(27,95,176,.30);
  --marker: rgba(255,200,60,.42);
}
:root[data-theme="dark"]{
  --grid-line: rgba(140,190,255,.045);
  --rule-line: rgba(140,190,255,.06);
  --margin-line: rgba(255,128,128,.22);
  --doodle: rgba(170,210,255,.24);
  --marker: rgba(255,211,122,.22);
}

/* ورق مربعات خفيف في خلفية الموقع (مثل دفتر الرياضيات) */
body{
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: center top;
}

/* رسومات دراسية تطفو بين الغيوم */
.doodle{position:absolute;color:var(--doodle);pointer-events:none;animation:float 8s ease-in-out infinite}
.doodle svg{width:100%;height:auto;overflow:visible}
.doodle.txt{font-family:var(--font-display);font-weight:700;font-style:italic;line-height:1;white-space:nowrap;direction:ltr}
.doodle.slow{animation-duration:11s;animation-delay:-3s}
.doodle.rev{animation-direction:alternate-reverse}
@keyframes float{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-10px) rotate(calc(var(--r,0deg) + 4deg))}}

/* hero doodles */
.hero .dz-plane{width:170px;top:190px;inset-inline-start:13%;--r:-6deg}
.hero .dz-book{width:54px;top:330px;inset-inline-start:6%;--r:-10deg}
.hero .dz-cap{width:58px;top:120px;inset-inline-end:24%;--r:8deg}
.hero .dz-pencil{width:46px;top:360px;inset-inline-end:8%;--r:14deg}
.hero .dz-atom{width:50px;bottom:170px;inset-inline-end:17%}
.hero .dz-ruler{width:44px;bottom:150px;inset-inline-start:22%;--r:-8deg}
.hero .dz-pi{font-size:46px;top:250px;inset-inline-end:4%;--r:-8deg}
.hero .dz-sum{font-size:38px;top:84px;inset-inline-start:30%;--r:6deg}
.hero .dz-eq{font-size:22px;bottom:210px;inset-inline-start:4%;--r:-4deg}
.hero .dz-sqrt{font-size:28px;top:470px;inset-inline-end:26%;--r:6deg}
@media (max-width:980px){.hero .dz-plane,.hero .dz-sum,.hero .dz-cap,.hero .dz-sqrt,.hero .dz-ruler{display:none}}
@media (max-width:640px){.hero .dz-atom,.hero .dz-eq,.hero .dz-pencil{display:none}.hero .dz-book{top:auto;bottom:140px}.hero .dz-pi{top:auto;bottom:150px}}

/* page-hero doodles (الصفحات الداخلية) */
.page-hero .dz-book{width:44px;top:150px;inset-inline-end:14%;--r:-10deg}
.page-hero .dz-pencil{width:38px;top:36px;inset-inline-end:50%;--r:16deg}
.page-hero .dz-pi{font-size:34px;top:30px;inset-inline-end:36%;--r:-6deg}
@media (max-width:760px){.page-hero .dz-pencil,.page-hero .dz-pi{display:none}.page-hero .dz-book{top:18px;inset-inline-end:8%}}

/* auth / 404 doodles */
.auth-page .dz-plane{width:170px;top:90px;inset-inline-end:26%;--r:-6deg}
.auth-page .dz-book{width:56px;bottom:170px;inset-inline-end:14%;--r:-10deg}
.auth-page .dz-pencil{width:46px;top:330px;inset-inline-start:14%;--r:14deg}
.auth-page .dz-pi{font-size:44px;bottom:220px;inset-inline-start:24%}
.auth-page .dz-cap{width:56px;top:120px;inset-inline-start:22%;--r:8deg}
@media (max-width:760px){.auth-page .doodle{display:none}}

/* قلم التحديد (هايلايتر) تحت عناوين الأقسام */
.section-head h2,.group-title{display:inline;background:linear-gradient(transparent 62%,var(--marker) 62%,var(--marker) 90%,transparent 90%);padding-inline:4px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.section-head h2{display:inline-block}

/* بطاقة الكورس بطابع ورقة دفتر: خط هامش أحمر + أسطر خفيفة */
.course.tile{
  background-image:repeating-linear-gradient(to bottom,transparent 0 31px,var(--rule-line) 31px 32px);
  background-position:0 8px;
  padding-inline-start:34px;
}
.course.tile::before{content:"";position:absolute;inset-block:0;inset-inline-start:20px;width:2px;background:var(--margin-line);pointer-events:none}

/* الورقة البيضاء للوحة الوصف */
.panel.notebook{
  background-image:repeating-linear-gradient(to bottom,transparent 0 31px,var(--rule-line) 31px 32px);
  padding-inline-start:44px;position:relative;
}
.panel.notebook::before{content:"";position:absolute;inset-block:0;inset-inline-start:26px;width:2px;background:var(--margin-line)}
.panel.notebook .prose{line-height:32px}

/* فواصل الأقسام: خط منقّط مثل دفتر */
.eyebrow .ico{display:inline-flex;color:var(--accent-ink)}
[data-theme="dark"] .eyebrow .ico{color:var(--accent)}

/* خطوات "كيف تدرس" على شكل أوراق ملاحظات لاصقة */
.how{padding-top:60px;counter-reset:step}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:6px}
.step{position:relative;counter-increment:step;padding:34px 24px 26px;border-radius:6px 6px 22px 6px;box-shadow:0 18px 30px -22px rgba(18,58,108,.45),0 2px 0 rgba(0,0,0,.03);color:#2a3b4f;transform:rotate(var(--tilt,-1.2deg));transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.step:hover{transform:rotate(0) translateY(-4px)}
.step:nth-child(2){--tilt:1deg}
.step:nth-child(3){--tilt:-.6deg}
.step::before{content:"";position:absolute;top:-12px;left:50%;width:92px;height:24px;transform:translateX(-50%) rotate(-3deg);background:rgba(255,255,255,.55);border:1px solid rgba(0,0,0,.05);box-shadow:0 2px 4px rgba(0,0,0,.06)}
.note-yellow{background:#fff4c2}
.note-blue{background:#dcecff}
.note-green{background:#d9f5e6}
[data-theme="dark"] .step{color:#dbe6f5;box-shadow:0 18px 30px -20px rgba(0,0,0,.8)}
[data-theme="dark"] .step::before{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .note-yellow{background:#3a3420}
[data-theme="dark"] .note-blue{background:#16304f}
[data-theme="dark"] .note-green{background:#173a2e}
.step-n{position:absolute;top:18px;inset-inline-end:20px;font-family:var(--font-display);font-weight:800;font-size:44px;line-height:1;opacity:.18}
.step-n::before{content:counter(step)}
[dir="rtl"] .step-n::before{content:counter(step,arabic-indic)}
.step-ico{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:rgba(255,255,255,.65);color:var(--primary-2);margin-bottom:14px}
[data-theme="dark"] .step-ico{background:rgba(255,255,255,.08);color:var(--primary)}
.step h3{font-size:20px;color:inherit;margin-bottom:6px}
.step p{font-size:14.5px;opacity:.82}
.features{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:34px}
.feature{display:inline-flex;align-items:center;gap:10px;padding:10px 18px 10px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);font-weight:600;font-size:14.5px;color:var(--ink)}
.feature svg{width:22px;height:22px;color:var(--primary)}
@media (max-width:820px){.steps{grid-template-columns:1fr;gap:30px}}
.section-head > div{display:flex;flex-direction:column;align-items:flex-start}