: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;flex-direction:column;align-items:center;
  width:fit-content;margin:26px auto 4px;
  color:inherit;text-decoration:none;
}
.mhk-lock{display:flex;align-items:center;gap:12px;margin-bottom:11px}
.mhk-rule{
  display:block;flex:none;width:62px;height:1px;opacity:.28;
  background:linear-gradient(to right,currentColor,transparent);
}
.mhk-lock .mhk-rule:last-child{
  background:linear-gradient(to left,currentColor,transparent);
}
.mhk-mark{
  display:grid;place-items:center;flex:none;
  width:28px;height:28px;border-radius:9px;
  background:#f0b429;color:#1f2a2b;
  font-family:'Amiri',serif;font-weight:700;font-size:16px;line-height:1;
  box-shadow:0 7px 16px -7px rgba(240,180,41,.55);
  transition:box-shadow .18s,transform .18s;
}
.mhk-name{
  font-family:'Amiri',serif;font-size:15px;font-weight:700;line-height:1.18;
  color:var(--ink);opacity:.86;transition:opacity .18s;
}
.mhk-tag{font-style:normal;margin-top:9px;font-size:10.5px;line-height:1;color:var(--mut)}

.mhk-credit:hover .mhk-name{opacity:1}
.mhk-credit:hover .mhk-mark{
  transform:translateY(-1px);box-shadow:0 9px 20px -7px rgba(240,180,41,.7);
}

html.dark .mhk-mark{box-shadow:0 7px 16px -7px rgba(240,180,41,.45)}

@media (max-width:600px){
  .mhk-credit{margin-top:20px}
  .mhk-rule{width:46px}
  .mhk-lock{gap:10px;margin-bottom:9px}
  .mhk-mark{width:26px;height:26px;font-size:15px}
  .mhk-name{font-size:14px}
  .mhk-tag{font-size:10px}
}

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

/* ================= ملف الإنجاز — واجهة البناء ================= */
.pf-hero{display:flex;align-items:center;gap:20px;background:linear-gradient(135deg,var(--teal-d),var(--teal));
  color:#fff;border-radius:var(--r);padding:22px 24px;margin-bottom:24px;box-shadow:var(--shadow)}
.pf-hero h1{color:#fff;font-size:28px;margin-bottom:4px}
.pf-hero p{font-size:14px;color:#d6ebe8;line-height:1.8;max-width:70ch}
.pf-hero-mark{margin-inline-start:auto;flex:none;width:74px;height:96px;border:2px solid var(--gold);
  border-radius:8px;display:grid;place-content:center;text-align:center;font-family:'Amiri',serif;
  font-size:24px;font-weight:700;color:var(--gold);line-height:1.1}
.pf-hero-mark span{display:block;font-size:11px;letter-spacing:1px;font-family:'Tajawal',sans-serif}
@media(max-width:640px){.pf-hero-mark{display:none}}

.pf-h{font-size:21px;margin:26px 0 12px}
.pf-tpls{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:14px}
.pf-tpl{display:contents}
.pf-tpl button{width:100%;height:100%;text-align:start;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow);padding:18px;cursor:pointer;font-family:inherit;
  transition:.15s;display:flex;flex-direction:column;gap:4px;color:var(--ink)}
.pf-tpl button:hover{transform:translateY(-3px);border-color:var(--teal)}
.pf-tpl .ic{font-size:28px}
.pf-tpl b{color:var(--teal-d);font-size:17px;font-family:'Amiri',serif}
.pf-tpl p{font-size:12.5px;color:var(--mut);line-height:1.65;flex:1}
.pf-tpl .n{font-size:11.5px;color:var(--mut);border-top:1px dashed var(--line);padding-top:6px;margin-top:4px}
.pf-tpl .n i{color:var(--gold);font-style:normal;font-weight:700}

.pf-files{display:grid;gap:12px}
.pf-file{display:flex;gap:14px;background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);overflow:hidden}
.pf-file .sp{flex:none;width:62px;display:grid;place-items:center;background:var(--teal-l);font-size:26px}
.pf-file.th-royal .sp{background:#e8edf5}.pf-file.th-rose .sp{background:#f7e9ef}
.pf-file.th-ink .sp{background:#e9edf2}.pf-file.th-sand .sp{background:#f6efe3}
.pf-file .bd{flex:1;padding:14px 4px 14px 0;min-width:0}
.pf-file b{font-family:'Amiri',serif;font-size:19px;color:var(--teal-d)}
.pf-file .acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;align-items:center}

.pf-idn{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.pf-idn div{border:1px solid var(--line);border-radius:10px;padding:8px 12px}
.pf-idn span{display:block;font-size:11.5px;color:var(--mut)}
.pf-idn b{color:var(--teal-d);font-size:14px}

/* ---- المحرّر ---- */
.pf-bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:10px 14px;margin-bottom:18px;box-shadow:var(--shadow)}
.pf-bar b{font-family:'Amiri',serif;font-size:19px;color:var(--teal-d)}
.pf-bar .bk{font-size:13px}
.pf-bar .sp{flex:1}
.pf-meta summary{cursor:pointer;font-size:14.5px;color:var(--mut)}
.pf-meta summary b{color:var(--teal-d);font-size:17px;font-family:'Amiri',serif}
.pf-themes{display:flex;gap:8px;flex-wrap:wrap}
.pf-th{display:flex;align-items:center;gap:7px;border:1.5px solid var(--line);border-radius:10px;
  padding:7px 12px;cursor:pointer;font-weight:500;font-size:13.5px;margin:0;color:var(--mut)}
.pf-th.on,.pf-th:has(input:checked){border-color:var(--teal);color:var(--ink);background:var(--teal-l)}
.pf-th input{display:none}
.pf-th i{width:20px;height:20px;border-radius:6px;display:block;border:1px solid rgba(0,0,0,.12)}
.pf-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.pf-opt{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:10px;
  padding:9px 12px;cursor:pointer;font-size:13.5px;font-weight:500;color:var(--mut);margin:0}
.pf-opt input{width:18px;height:18px;accent-color:var(--teal);cursor:pointer;flex:none}
.pf-opt.on,.pf-opt:has(input:checked){border-color:var(--teal);color:var(--ink);background:var(--teal-l)}

.pf-sec{margin-bottom:14px;scroll-margin-top:80px}
.pf-sec-hd{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding-bottom:10px;
  border-bottom:1px dashed var(--line)}
.pf-sec-hd .num{flex:none;width:26px;height:26px;border-radius:50%;background:var(--teal);color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:700}
.pf-sec-hd .ty{font-size:13px;color:var(--mut);font-weight:600}
.pf-sec-hd .sp{flex:1}
.ib{background:var(--white);border:1px solid var(--line);border-radius:8px;width:30px;height:30px;
  cursor:pointer;color:var(--mut);font-size:13px;font-family:inherit}
.ib:hover{border-color:var(--teal);color:var(--teal)}
.ib:disabled{opacity:.35;cursor:default}
.ib.del:hover{border-color:var(--red);color:var(--red)}
.pf-save{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:4px}
.pf-inline{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:13.5px;color:var(--mut);margin:0}
.pf-inline input{width:17px;height:17px;accent-color:var(--teal)}
.pf-auto{background:var(--teal-l);border:1px solid var(--teal);border-radius:10px;padding:9px 13px;
  margin-bottom:12px;font-size:13px;color:var(--teal-d)}
.pf-auto .warn{color:var(--red);font-weight:600}
.pf-auto .ok{font-weight:600}
.pf-tbl{overflow:auto;border:1px solid var(--line);border-radius:10px;margin-bottom:12px}
.pf-tbl table{margin:0;background:transparent}
.pf-tbl th,.pf-tbl td{padding:0;border-bottom:1px solid var(--line);border-inline-end:1px solid var(--line)}
.pf-tbl input{border:none;border-radius:0;background:transparent;font-size:13px;padding:7px 9px;min-width:110px}
.pf-tbl thead input{font-weight:700;color:var(--teal-d)}
.pf-tbl input:focus{outline:2px solid var(--teal);outline-offset:-2px}

.pf-ev{border-top:1px dashed var(--line);margin-top:14px;padding-top:14px}
.pf-drop .dz{display:block;border:2px dashed var(--line);border-radius:12px;padding:20px;text-align:center;
  cursor:pointer;color:var(--mut);font-weight:500;transition:.15s}
.pf-drop.over .dz,.pf-drop .dz:hover{border-color:var(--teal);background:var(--teal-l)}
.pf-drop input[type=file]{display:none}
.pf-drop .dz small{display:block;font-size:11.5px;font-weight:400;margin-top:4px;opacity:.8}
.pf-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin:14px 0}
.pf-thumbs .th{position:relative;border:1px solid var(--line);border-radius:10px;padding:6px;background:var(--white)}
.pf-thumbs img{width:100%;height:104px;object-fit:cover;border-radius:6px;display:block;background:var(--hov)}
.pf-thumbs input{margin-top:6px;font-size:12px;padding:5px 8px}
.pf-thumbs .ib.del{position:absolute;top:10px;inset-inline-end:10px;width:26px;height:26px;
  background:rgba(255,255,255,.94);font-size:12px}
.pf-add{border-style:dashed}
.pf-drop.busy .dz{border-color:var(--teal);background:var(--teal-l);cursor:progress}
.pf-drop.busy .dz small{visibility:hidden}