:root{
  --teal:#0e5a5c; --teal-d:#0a4344; --teal-l:#eaf4f3;
  --gold:#c9a227; --sand:#faf7f0; --ink:#1f2a2b; --mut:#5f7473;
  --line:#e3ded2; --white:#fff; --red:#b3402f; --green:#2e7d54;
  --hov:#fbfaf5;
  --r:14px; --shadow:0 2px 14px rgba(14,90,92,.08);
}
/* الوضع الداكن — نفس هوية الألوان بدرجات مريحة للعين */
html.dark{
  --teal:#3aa7a2; --teal-d:#8fd6d2; --teal-l:#14302e;
  --gold:#d8b94a; --sand:#0d1717; --ink:#e4eeec; --mut:#8fa8a5;
  --line:#23403d; --white:#132322; --red:#e0705d; --green:#5fbd8c;
  --hov:#182e2c;
  --shadow:0 2px 14px rgba(0,0,0,.35);
}
html.dark .topbar{background:linear-gradient(135deg,#071e1e,#0c3231)}
html.dark .btn{background:#12716d;color:#eafffd}
html.dark .btn:hover{background:#158a85}
html.dark .btn.gold{background:var(--gold);color:#1d1a08}
html.dark .btn.danger{background:#9c3a2b;color:#ffe9e4}
html.dark .badge.gold{background:#3a3212;color:#e7cf7a}
html.dark .badge.red{background:#43201a;color:#f0a898}
html.dark .badge.green{background:#173628;color:#8fd8b2}
html.dark .flash{background:var(--teal-l);border-color:#2c6f6b;color:#bfe6e2}
html.dark .topbar nav a.on{color:#1d1a08}
/* أوراق الطباعة تبقى بيضاء دائماً كالورق الحقيقي */
.print-sheet{--white:#fff;--ink:#1f2a2b;--mut:#5f7473;--line:#e3ded2;--teal-l:#eaf4f3;--teal:#0e5a5c;--teal-d:#0a4344;--gold:#c9a227;background:#fff;color:var(--ink)}
.dark-toggle{position:fixed;bottom:16px;inset-inline-start:16px;z-index:50;background:var(--white);border:1.5px solid var(--line);border-radius:50%;width:44px;height:44px;font-size:20px;cursor:pointer;box-shadow:var(--shadow)}
@media print{.dark-toggle{display:none!important}}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Tajawal',sans-serif;background:var(--sand);color:var(--ink);line-height:1.7;min-height:100vh;display:flex;flex-direction:column}
h1,h2,h3{font-family:'Amiri','Tajawal',serif;color:var(--teal-d)}
a{color:var(--teal);text-decoration:none}
.wrap{max-width:1100px;margin:0 auto;padding:0 18px;width:100%}
main.wrap{flex:1;padding-top:26px;padding-bottom:40px}

.topbar{background:linear-gradient(135deg,var(--teal-d),var(--teal));box-shadow:var(--shadow)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding-top:12px;padding-bottom:12px}
.brand{display:flex;flex-direction:column;line-height:1.2}
.brand-mark{font-family:'Amiri',serif;font-size:30px;font-weight:700;color:#fff}
.brand-sub{font-size:11px;color:#cfe3e0}
.topbar nav{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.topbar nav a{color:#e8f2f0;padding:7px 12px;border-radius:9px;font-size:14px;font-weight:500}
.topbar nav a:hover{background:rgba(255,255,255,.12)}
.topbar nav a.on{background:var(--gold);color:var(--teal-d);font-weight:700}
.topbar nav a.logout{background:rgba(255,255,255,.14);margin-inline-start:6px}

.foot{text-align:center;color:var(--mut);font-size:13px;padding:18px}
.flash{background:var(--teal-l);border:1px solid var(--teal);color:var(--teal-d);border-radius:var(--r);padding:12px 16px;margin-bottom:18px;font-weight:500}

.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}

.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:20px}
.card h2{font-size:21px;margin-bottom:12px}
.card h3{font-size:17px;margin-bottom:8px}
.tile{display:block;background:var(--white);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:22px;text-align:center;transition:.15s;color:var(--ink)}
.tile:hover{transform:translateY(-3px);border-color:var(--teal)}
.tile .ico{font-size:34px;display:block;margin-bottom:8px}
.tile b{color:var(--teal-d);font-size:17px}
.tile p{font-size:13px;color:var(--mut);margin-top:4px}

.stat{background:var(--white);border-radius:var(--r);border:1px solid var(--line);padding:16px;text-align:center}
.stat .n{font-size:30px;font-weight:800;color:var(--teal)}
.stat .l{font-size:13px;color:var(--mut)}

table{width:100%;border-collapse:collapse;background:var(--white)}
th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:right;font-size:14px}
th{background:var(--teal-l);color:var(--teal-d);font-weight:700}
tr:hover td{background:var(--hov)}
.table-card{padding:0;overflow:auto}
.table-card table{border-radius:var(--r)}

.btn{display:inline-block;background:var(--teal);color:#fff;border:none;border-radius:10px;padding:9px 18px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:.15s}
.btn:hover{background:var(--teal-d)}
.btn.gold{background:var(--gold);color:var(--teal-d)}
.btn.ghost{background:transparent;color:var(--teal);border:1.5px solid var(--teal)}
.btn.sm{padding:4px 12px;font-size:13px}
.btn.danger{background:var(--red)}
.btn:disabled{opacity:.5;cursor:default}

label{display:block;font-weight:600;font-size:14px;margin-bottom:4px;color:var(--teal-d)}
input[type=text],input[type=password],input[type=number],input[type=url],select,textarea{
  width:100%;padding:9px 12px;border:1.5px solid var(--line);border-radius:10px;font-family:inherit;font-size:14px;background:var(--white);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal)}
textarea{min-height:90px;resize:vertical}
.field{margin-bottom:14px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row>.field{flex:1;min-width:160px}
form.inline{display:inline}

.badge{display:inline-block;background:var(--teal-l);color:var(--teal-d);border-radius:20px;padding:2px 11px;font-size:12px;font-weight:600}
.badge.gold{background:#f7edd0;color:#8a6d12}
.badge.red{background:#f6ded9;color:var(--red)}
.badge.green{background:#ddeee4;color:var(--green)}

.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.tabs a{padding:8px 16px;border-radius:10px;background:var(--white);border:1px solid var(--line);font-weight:600;font-size:14px}
.tabs a.on{background:var(--teal);color:#fff;border-color:var(--teal)}

.tree{list-style:none}
.tree .book{margin-bottom:10px}
.tree summary{cursor:pointer;font-weight:700;color:var(--teal-d);padding:6px 0}
.tree .lessons{margin-inline-start:22px}
.tree .lessons a{display:block;padding:5px 8px;border-radius:8px;font-size:14px}
.tree .lessons a:hover{background:var(--teal-l)}

.empty{color:var(--mut);text-align:center;padding:30px;font-size:15px}
.hint{font-size:12.5px;color:var(--mut)}
.divider{border:none;border-top:1px dashed var(--line);margin:18px 0}

.login-box{max-width:420px;margin:8vh auto 0}
.login-box .brand-big{text-align:center;margin-bottom:22px}
.login-box .brand-big .m{font-family:'Amiri',serif;font-size:56px;color:var(--teal);font-weight:700;line-height:1}
.login-box .brand-big .s{color:var(--mut);font-size:14px}

@media print{
  .topbar,.foot,.no-print,.flash{display:none!important}
  body{background:#fff}
  main.wrap{max-width:100%;padding:0}
  .card{box-shadow:none;border:none;padding:0}
}
.print-sheet{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px}
.print-head{display:flex;justify-content:space-between;border-bottom:3px double var(--teal);padding-bottom:10px;margin-bottom:16px;font-size:14px}
.print-head .mid{text-align:center;font-family:'Amiri',serif;font-weight:700;font-size:19px;color:var(--teal-d)}
.prep-sec{margin-bottom:14px}
.prep-sec h3{background:var(--teal-l);border-inline-start:5px solid var(--teal);padding:6px 12px;border-radius:8px;font-size:16px;margin-bottom:6px}
.prep-sec .body{padding:2px 10px;white-space:pre-wrap;font-size:15px}
.q-item{border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:12px;background:var(--white)}
.q-item .q-text{font-weight:600;font-size:15px}
.q-opts{list-style:none;margin-top:8px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:6px}
.q-opts li{padding:4px 8px}
.q-meta{margin-top:8px}

/* ══════════════════════════════════════════════════════════════════
   التوافق مع الأجهزة — الجوال واللوحي
   الأصل مرن في شبكاته لكنه بلا نقاط استجابة: شريطٌ بأربعة عشر رابطًا
   يبتلع شاشة الجوال، وجداولٌ تدفع الصفحة أفقيًا، وحقولٌ بحجم ١٤px
   تجعل آيفون يكبّر الصفحة عند أول لمسة.

   كل ما يلي داخل نقاط استجابة، فلا يتغيّر شيء على الشاشات الكبيرة.
   ══════════════════════════════════════════════════════════════════ */

/* ── اللوحي وما دونه ─────────────────────────────────────────── */
@media (max-width:900px){
  html,body{max-width:100%;overflow-x:hidden}
  img,svg,video,canvas{max-width:100%;height:auto}

  .wrap{padding:0 14px}
  main.wrap{padding-top:20px;padding-bottom:30px}
  .brand-mark{font-size:26px}
  .topbar nav a{padding:6px 10px;font-size:13.5px}
  .card{padding:17px}
  .print-sheet{padding:20px}

  /* الجدول العريض يمرّر داخل بطاقته لا بالصفحة كلها */
  .card,.print-sheet{overflow-x:auto}
}

/* ── الجوال ──────────────────────────────────────────────────── */
@media (max-width:600px){
  .wrap{padding:0 11px}
  main.wrap{padding-top:15px;padding-bottom:24px}

  /* الشريط العلوي: الاسم سطرًا، والروابط تحته مضغوطة ومركزية */
  .topbar .wrap{flex-direction:column;align-items:stretch;gap:9px;padding-top:10px;padding-bottom:10px}
  .brand{align-items:center;text-align:center}
  .brand-mark{font-size:23px}
  .brand-sub{font-size:10.5px}
  .topbar nav{justify-content:center;gap:3px}
  .topbar nav a{padding:5px 9px;font-size:12.5px;border-radius:8px}
  .topbar nav a.logout{margin-inline-start:0}

  /* ١٦px يمنع آيفون من تكبير الصفحة عند التركيز على الحقل */
  input[type=text],input[type=password],input[type=number],input[type=url],
  input[type=date],input[type=search],input[type=email],select,textarea{font-size:16px}

  .card{padding:14px;border-radius:12px}
  .card h2{font-size:19px}
  .card h3{font-size:16px}
  .tile{padding:16px}
  .tile .ico{font-size:29px}
  .stat{padding:13px}
  .stat .n{font-size:25px}
  .grid{gap:12px}

  th,td{padding:8px 9px;font-size:13px}

  .btn{padding:9px 15px}
  .btn.sm{padding:5px 11px;font-size:12.5px}
  .tabs{gap:5px;margin-bottom:14px}
  .tabs a{padding:7px 12px;font-size:13px}

  /* ترويسة الأوراق: ثلاثة أعمدة تصير ثلاثة أسطر مركزية */
  .print-head{flex-direction:column;align-items:center;text-align:center;gap:7px;font-size:13px}
  .print-head .mid{font-size:17px}
  .print-sheet{padding:15px;border-radius:12px}
  .prep-sec .body{font-size:14px;padding:2px 4px}

  .login-box{margin-top:5vh}
  .login-box .brand-big .m{font-size:44px}
  .login-box .brand-big .s{font-size:13px}

  .tree .lessons{margin-inline-start:14px}
  .dark-toggle{width:40px;height:40px;font-size:18px;bottom:12px;inset-inline-start:12px}
  .foot{font-size:12px;padding:14px 11px}
}

/* ── الشاشات الضيقة جدًا ─────────────────────────────────────── */
@media (max-width:380px){
  .topbar nav a{padding:5px 7px;font-size:12px}
  .brand-mark{font-size:21px}
  th,td{padding:7px 7px;font-size:12.5px}
}

/* الورق المطبوع لا يتأثر بشيء مما سبق */
@media print{
  html,body{overflow-x:visible}
  .card,.print-sheet{overflow-x:visible}
  .print-head{flex-direction:row;align-items:flex-start;text-align:start}
}

/* ══════════════════════════════════════════════════════════════════
   توقيع «محكم»
   المنصة للمعلمة واسمها هو البطل، وتوقيعنا سطرٌ تحته لا فوقه:
   مربّعٌ ذهبي صغير واسمٌ هادئ، يُقرأ حين يُبحث عنه ولا يزاحم.
   ══════════════════════════════════════════════════════════════════ */
.mhk-credit{
  display:flex;align-items:center;gap:8px;
  color:inherit;text-decoration:none;   /* صار رابطًا لموقع مُحكَم */
  width:fit-content;margin:10px auto 0;padding-top:10px;
  border-top:1px solid var(--line);
  opacity:.72;transition:opacity .2s;
}
.mhk-credit:hover{opacity:1}
.mhk-mark{
  display:grid;place-items:center;
  width:23px;height:23px;border-radius:7px;
  background:#f0b429;color:#1f2a2b;
  font-family:'Amiri',serif;font-weight:700;font-size:14px;line-height:1;
  box-shadow:0 4px 10px -5px rgba(240,180,41,.9);
  flex:none;
}
.mhk-text{display:flex;flex-direction:column;line-height:1.25;text-align:start}
.mhk-text b{font-family:'Amiri',serif;font-size:14px;font-weight:700;color:var(--ink)}
.mhk-text i{font-style:normal;font-size:10.5px;color:var(--mut);letter-spacing:.2px}

html.dark .mhk-mark{box-shadow:0 4px 12px -5px rgba(240,180,41,.55)}

@media (max-width:600px){
  .mhk-credit{margin-top:8px;padding-top:8px;gap:7px}
  .mhk-mark{width:21px;height:21px;font-size:13px}
  .mhk-text b{font-size:13px}
  .mhk-text i{font-size:10px}
}

/* أوراق المدرسة رسمية — لا تحمل علامة مورّد */
@media print{ .mhk-credit{display:none!important} }