/* ============ المدرسة الذكية — نظام التصميم ============ */
:root{
  /* ورق السجل وحبر القلم: أزرق للحاضر، أحمر التصحيح للغائب، قلم التظليل للمتأخر، رصاص رمادي لمن له عذر */
  --bg:#F5F6FA; --surface:#FFFFFF; --surface-2:#EEF0F6; --border:#DDE1EC;
  --text:#141A33; --muted:#5E6584; --faint:#7D849E;
  --ink:#1F3A93; --ink-deep:#142766; --ink-soft:#E6EBFA;
  --primary:var(--ink); --primary-2:var(--ink-deep); --primary-soft:var(--ink-soft);
  --green:#12805C; --green-soft:#E3F3EC;
  --red:#D0243A; --red-soft:#FCE8EA;
  --amber:#E8B400; --amber-soft:#FFF4C2; --amber-text:#7A5C00;
  --blue:#8A8D99; --blue-soft:#EDEEF1;
  --pink:#B83280; --pink-soft:#F9E6F1;
  --margin:#E8505B;
  --shadow:0 1px 2px rgba(20,26,51,.05),0 4px 16px rgba(20,26,51,.05);
  --shadow-lg:0 24px 60px rgba(20,26,51,.22);
  --radius:14px; --radius-sm:8px;
  --grad:var(--ink);
  --sidebar:var(--surface); --sidebar-text:var(--text);
  --display:"Almarai","IBM Plex Sans Arabic",system-ui,sans-serif;
}
/* الوضع الليلي: سبورة خضراء داكنة وطباشير */
[data-theme="dark"]{
  --bg:#122019; --surface:#18291F; --surface-2:#1E3227; --border:#2C4436;
  --text:#E9F0EA; --muted:#A3B5A8; --faint:#6B8273;
  --ink:#9DB6FF; --ink-deep:#C4D3FF; --ink-soft:#22364A;
  --green:#5FD3A0; --green-soft:#173A2B; --red:#FF7A86; --red-soft:#3D2226;
  --amber:#FFD54A; --amber-soft:#3A3315; --amber-text:#FFD54A;
  --blue:#C8C6BE; --blue-soft:#2B3530; --pink:#F48FC4; --pink-soft:#3A2233;
  --margin:#C9545E;
  --shadow:0 1px 2px rgba(0,0,0,.25),0 4px 16px rgba(0,0,0,.2);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:"Almarai","IBM Plex Sans Arabic",system-ui,"Segoe UI",Tahoma,sans-serif;background:var(--bg);color:var(--text);font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--primary);text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.35;font-weight:800}
.muted{color:var(--muted)} .faint{color:var(--faint)} .small{font-size:13px}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:3px solid color-mix(in srgb,var(--ink) 55%,transparent);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}