/* منصة الاختبارات الصفية السريعة — نظام التصميم
   خط: IBM Plex Sans Arabic  |  اتجاه: RTL حقيقي (dir=rtl + خصائص منطقية) */

:root{
  --bg:#F3F6F4;
  --surface:#FFFFFF;
  --surface-2:#F7FAF8;
  --ink:#10231D;
  --ink-2:#3A4B45;
  --muted:#65786F;
  --line:#DCE6E1;
  --line-strong:#C3D2CB;
  --primary:#0E6B57;
  --primary-dark:#0A5344;
  --primary-soft:#E6F1EC;
  --amber:#9A6B10;
  --amber-soft:#FBF2DF;
  --danger:#9C3A34;
  --danger-soft:#FAECEA;
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 1px 2px rgba(16,35,29,.05), 0 8px 24px -16px rgba(16,35,29,.25);
  --maxw:1080px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"IBM Plex Sans Arabic","Noto Sans Arabic","Segoe UI",Tahoma,sans-serif;
  background:var(--bg); color:var(--ink);
  font-size:16px; line-height:1.7; font-weight:400;
  min-height:100dvh;
}
h1,h2,h3,h4{margin:0; font-weight:600; line-height:1.35; letter-spacing:-.01em}
h1{font-size:1.7rem}
h2{font-size:1.25rem}
h3{font-size:1.05rem}
p{margin:0}
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--primary); outline-offset:2px; border-radius:6px}

/* ------------------------------------------------------------- التخطيط -- */
.wrap{max-width:var(--maxw); margin-inline:auto; padding:0 20px}
.wrap--narrow{max-width:560px}
.stack{display:flex; flex-direction:column}
.stack>*+*{margin-block-start:var(--gap,16px)}
.row{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.spread{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.grow{flex:1 1 auto}

.topbar{
  background:var(--surface); border-block-end:1px solid var(--line);
  padding-block:14px; position:sticky; top:0; z-index:20;
}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:12px}
.brand{display:flex; flex-direction:column; align-items:flex-start; gap:0;
  font-weight:600; color:var(--ink); line-height:1.4; text-decoration:none}
.brand:hover{text-decoration:none}
.brand__org{font-size:.72rem; font-weight:400; color:var(--muted); letter-spacing:.01em}
.brand__name{font-size:.98rem; font-weight:600; color:var(--ink); margin-block-start:2px}
.brand__name small{display:inline; font-weight:400; color:var(--muted);
  font-size:.78rem; margin-inline-start:8px; line-height:inherit}
.brand .mark{
  inline-size:30px; block-size:30px; border-radius:8px; background:var(--primary);
  color:#fff; display:grid; place-items:center; font-size:.8rem; font-weight:600;
}
.brand small{display:block; font-weight:400; color:var(--muted); font-size:.75rem; line-height:1.2}
main{padding-block:28px 56px}

/* ------------------------------------------------------------- البطاقات -- */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px; box-shadow:var(--shadow);
}
.card--flat{box-shadow:none}
.card__head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-block-end:16px}
.card__head p{color:var(--muted); font-size:.9rem}

/* ------------------------------------------------------------- الأزرار -- */
.btn{
  font:inherit; font-weight:500; cursor:pointer;
  padding:12px 22px; border-radius:var(--radius-sm);
  border:1px solid transparent; background:var(--primary); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:background .15s ease, border-color .15s ease;
}
.btn:hover{background:var(--primary-dark); text-decoration:none}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn--ghost{background:transparent; color:var(--primary); border-color:var(--line-strong)}
.btn--ghost:hover{background:var(--primary-soft)}
.btn--quiet{background:transparent; color:var(--ink-2); border-color:var(--line)}
.btn--quiet:hover{background:var(--surface-2)}
.btn--danger{background:var(--danger)}
.btn--danger:hover{background:#84302B}
.btn--block{inline-size:100%}
.btn--lg{padding:16px 28px; font-size:1.05rem}

/* ------------------------------------------------------------- النماذج -- */
label{display:block; font-size:.92rem; font-weight:500; color:var(--ink-2); margin-block-end:6px}
.hint{font-size:.82rem; color:var(--muted); font-weight:400}
input[type=text],input[type=password],input[type=number],select,textarea{
  font:inherit; inline-size:100%; padding:11px 13px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--radius-sm); text-align:start;
}
input:focus,select:focus,textarea:focus{border-color:var(--primary); outline:none; box-shadow:0 0 0 3px var(--primary-soft)}
textarea{resize:vertical; min-block-size:88px; line-height:1.6}
select{appearance:none; background-image:linear-gradient(transparent,transparent); padding-inline-start:34px}
.select-wrap{position:relative}
.select-wrap::after{
  content:""; position:absolute; inset-inline-start:14px; inset-block-start:50%;
  inline-size:8px; block-size:8px; margin-block-start:-6px; pointer-events:none;
  border-inline-start:2px solid var(--muted); border-block-end:2px solid var(--muted);
  transform:rotate(-45deg);
}
.field{margin-block-end:18px}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:18px}

/* اختيار المدة / نوع التقييم كأزرار */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{position:relative}
.chip input{position:absolute; opacity:0; inset:0; cursor:pointer}
.chip span{
  display:block; padding:9px 16px; border:1px solid var(--line-strong);
  border-radius:999px; font-size:.92rem; color:var(--ink-2); background:var(--surface);
}
.chip input:checked+span{background:var(--primary); border-color:var(--primary); color:#fff}
.chip input:focus-visible+span{outline:2px solid var(--primary); outline-offset:2px}

/* صف الخيار في نموذج الإنشاء */
.option-row{display:flex; align-items:center; gap:10px; margin-block-end:10px}
.option-row .letter{
  inline-size:30px; block-size:30px; flex:none; border-radius:8px; background:var(--surface-2);
  border:1px solid var(--line); display:grid; place-items:center; font-size:.85rem; color:var(--muted);
}
.option-row input[type=radio]{inline-size:20px; block-size:20px; accent-color:var(--primary); flex:none; cursor:pointer}
.option-row .rm{
  border:none; background:none; color:var(--muted); cursor:pointer; font-size:1.2rem;
  line-height:1; padding:6px; border-radius:6px;
}
.option-row .rm:hover{background:var(--danger-soft); color:var(--danger)}

/* --------------------------------------------------------------- عناصر -- */
.tabs{display:flex; gap:4px; flex-wrap:wrap; border-block-end:1px solid var(--line); margin-block-end:24px}
.tab{
  font:inherit; font-weight:500; cursor:pointer; background:none; border:none;
  padding:12px 16px; color:var(--muted); border-block-end:2px solid transparent; margin-block-end:-1px;
}
.tab[aria-selected=true]{color:var(--primary); border-block-end-color:var(--primary)}
.tab:hover{color:var(--ink)}

.badge{
  display:inline-block; padding:3px 10px; border-radius:999px; font-size:.78rem;
  background:var(--surface-2); color:var(--muted); border:1px solid var(--line);
}
.badge--live{background:var(--primary-soft); color:var(--primary-dark); border-color:#CBE1D8}
.badge--closed{background:var(--surface-2); color:var(--muted)}

.notice{padding:12px 16px; border-radius:var(--radius-sm); font-size:.93rem; border:1px solid}
.notice--info{background:var(--primary-soft); border-color:#CBE1D8; color:var(--primary-dark)}
.notice--warn{background:var(--amber-soft); border-color:#EEDDB4; color:var(--amber)}
.notice--error{background:var(--danger-soft); border-color:#F0D2CF; color:var(--danger)}
.notice[hidden]{display:none}

.empty{text-align:center; color:var(--muted); padding:44px 20px; font-size:.95rem}

table{inline-size:100%; border-collapse:collapse; font-size:.93rem}
th,td{text-align:start; padding:11px 12px; border-block-end:1px solid var(--line)}
th{color:var(--muted); font-weight:500; font-size:.85rem}
tbody tr:last-child td{border-block-end:none}

/* ------------------------------------------------------- أرقام النتائج -- */
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px}
.kpi__label{font-size:.85rem; color:var(--muted); margin-block-end:4px}
.kpi__value{font-size:2.4rem; font-weight:600; line-height:1.1; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.kpi--correct .kpi__value{color:var(--primary)}
.kpi--wrong .kpi__value{color:var(--danger)}

/* شريط توزيع الإجابات */
.dist{display:flex; flex-direction:column; gap:14px}
.bar__top{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-block-end:6px}
.bar__text{font-size:.98rem}
.bar__num{font-variant-numeric:tabular-nums; color:var(--muted); font-size:.92rem; white-space:nowrap}
.bar__num b{color:var(--ink); font-weight:600; font-size:1.05rem}
.bar__track{block-size:12px; background:var(--surface-2); border:1px solid var(--line); border-radius:999px; overflow:hidden}
.bar__fill{block-size:100%; background:var(--line-strong); border-radius:999px; transition:inline-size .5s ease}
.bar--correct .bar__fill{background:var(--primary)}
.bar--correct .bar__text::after{
  content:"الإجابة الصحيحة"; font-size:.72rem; color:var(--primary-dark);
  background:var(--primary-soft); border-radius:999px; padding:2px 8px; margin-inline-start:8px;
  display:inline-block; vertical-align:middle;
}

/* مؤشر الفهم */
.gauge{border-radius:var(--radius); padding:20px 22px; border:1px solid}
.gauge__label{font-size:.85rem; margin-block-end:4px; opacity:.85}
.gauge__text{font-size:1.25rem; font-weight:600}
.gauge--good{background:var(--primary-soft); border-color:#CBE1D8; color:var(--primary-dark)}
.gauge--mid{background:var(--amber-soft); border-color:#EEDDB4; color:var(--amber)}
.gauge--low{background:var(--danger-soft); border-color:#F0D2CF; color:var(--danger)}

/* ----------------------------------------------- شاشة العرض في القاعة -- */
.stage{min-block-size:100dvh; display:flex; flex-direction:column; background:var(--surface)}
.stage__head{padding:28px 32px 0}
.stage__course{font-size:1.05rem; color:var(--muted)}
.stage__lecture{font-size:2rem; font-weight:600; margin-block-start:4px}
.stage__body{
  flex:1; display:grid; grid-template-columns:1fr auto; gap:40px;
  align-items:center; padding:24px 32px 32px;
}
.stage__code{font-size:clamp(3.5rem,11vw,7.5rem); font-weight:600; letter-spacing:.12em;
  font-variant-numeric:tabular-nums; line-height:1; color:var(--primary)}
.stage__qr{background:#fff; padding:16px; border:1px solid var(--line); border-radius:var(--radius)}
.stage__qr svg,.stage__qr img{display:block; inline-size:clamp(180px,26vw,300px); block-size:auto}
.stage__meta{display:flex; gap:40px; flex-wrap:wrap; margin-block-start:28px}
.stage__meta .kpi__value{font-size:3rem}
.stage__foot{padding:0 32px 28px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap}
.timer{font-variant-numeric:tabular-nums; font-size:3rem; font-weight:600; line-height:1}
.timer--low{color:var(--danger)}

/* ------------------------------------------------------ صفحة الطالب -- */
.answer-list{display:flex; flex-direction:column; gap:10px}
.answer{position:relative}
.answer input{position:absolute; opacity:0; inset:0; cursor:pointer}
.answer span{
  display:flex; align-items:center; gap:12px; padding:16px 18px;
  border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  background:var(--surface); font-size:1.05rem; line-height:1.5;
}
.answer span::before{
  content:""; inline-size:20px; block-size:20px; flex:none; border-radius:50%;
  border:2px solid var(--line-strong); background:#fff;
}
.answer input:checked+span{border-color:var(--primary); background:var(--primary-soft)}
.answer input:checked+span::before{border-color:var(--primary); background:var(--primary); box-shadow:inset 0 0 0 3px #fff}
.answer input:focus-visible+span{outline:2px solid var(--primary); outline-offset:2px}

.done{text-align:center; padding:40px 20px}
.done__mark{
  inline-size:62px; block-size:62px; margin-inline:auto; border-radius:50%;
  background:var(--primary-soft); color:var(--primary); display:grid; place-items:center;
  font-size:1.9rem; margin-block-end:18px;
}

/* ------------------------------------------------ الصفحة الرئيسية -- */
.hero{padding-block:clamp(48px,10vw,110px) 0; text-align:center}
.hero h1{font-size:clamp(1.9rem,5vw,2.8rem); letter-spacing:-.02em}
.hero p{color:var(--muted); margin-block-start:14px; font-size:1.05rem}
.gates{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-block-start:44px; text-align:start}
.gate{
  display:block; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px; color:var(--ink); box-shadow:var(--shadow); transition:border-color .15s ease;
}
.gate:hover{border-color:var(--primary); text-decoration:none}
.gate h2{color:var(--primary)}
.gate p{color:var(--muted); font-size:.95rem; margin-block-start:8px}

.footnote{margin-block-start:56px; color:var(--muted); font-size:.85rem; text-align:center}


/* ------------------------------------------- الهوية في الصفحة الرئيسية -- */
.identity__org{font-size:.95rem; color:var(--muted); line-height:1.6}
.identity__name{font-size:clamp(1.8rem,5vw,2.6rem); letter-spacing:-.02em; margin-block-start:12px}
.identity__desc{color:var(--ink-2); margin-block-start:10px; font-size:1.02rem}
.identity__en{color:var(--muted); font-size:.82rem; margin-block-start:6px; letter-spacing:.02em}
.hero .gates{margin-block-start:44px}

/* الهوية على شاشة القاعة */
.stage__ident{display:flex; flex-direction:column; line-height:1.5; margin-block-end:14px}
.stage__ident span:nth-child(-n+2){font-size:.8rem; color:var(--muted)}
.stage__ident span:last-child{font-size:.95rem; font-weight:600; color:var(--ink-2); margin-block-start:2px}

/* ------------------------------------ بطاقة السؤال في نموذج الأستاذ -- */
.qblock{border:1px solid var(--line); border-radius:var(--radius); padding:18px 18px 20px;
  margin-block-end:14px; background:var(--surface-2)}
.qblock__head{display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-block-end:14px}
.qblock__head h3{font-size:1rem; color:var(--primary-dark)}
.qblock .option-row input[type=text]{background:var(--surface)}
.qblock textarea{background:var(--surface)}

/* ---------------------------------------- تنقّل الطالب بين الأسئلة -- */
.qdots{display:flex; flex-wrap:wrap; gap:6px; margin-block-end:14px}
.qdot{font:inherit; font-size:.85rem; cursor:pointer; inline-size:32px; block-size:32px;
  border-radius:50%; border:1px solid var(--line-strong); background:var(--surface);
  color:var(--muted); display:grid; place-items:center; padding:0}
.qdot--done{border-color:var(--primary); color:var(--primary-dark); background:var(--primary-soft)}
.qdot--current{border-color:var(--primary); background:var(--primary); color:#fff}
.qnav{display:flex; gap:10px; margin-block-start:18px}
.qnav .btn{flex:1}

/* ------------------------------------------ بطاقة تحليل سؤال في النتائج -- */
.qcard{margin-block-end:14px}
.qcard__head{display:flex; align-items:center; justify-content:space-between; gap:12px}
.qcard__no{font-size:.85rem; color:var(--muted)}
.qcard__body{font-size:1.08rem; font-weight:500; line-height:1.6; margin-block:10px 8px}
.qcard__stats{font-size:.9rem; color:var(--muted); margin-block-end:16px}
.qcard__stats b{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums}
.qcard__exp{margin-block-start:16px; padding:12px 14px; border-radius:var(--radius-sm);
  background:var(--surface-2); border:1px solid var(--line); font-size:.92rem; color:var(--ink-2)}
.flag{font-size:.82rem; padding:4px 12px; border-radius:999px; border:1px solid; white-space:nowrap;
  font-variant-numeric:tabular-nums}
.flag--good{background:var(--primary-soft); border-color:#CBE1D8; color:var(--primary-dark)}
.flag--mid{background:var(--amber-soft); border-color:#EEDDB4; color:var(--amber)}
.flag--low{background:var(--danger-soft); border-color:#F0D2CF; color:var(--danger)}
.flag--none{background:var(--surface-2); border-color:var(--line); color:var(--muted)}

/* ----------------------------------------------------------- الجوال -- */
@media (max-width:820px){
  .kpis{grid-template-columns:1fr 1fr}
  .grid-2{grid-template-columns:1fr}
  .gates{grid-template-columns:1fr}
  .stage__body{grid-template-columns:1fr; justify-items:center; text-align:center; gap:24px}
  .stage__head{padding:20px 20px 0; text-align:center}
  .stage__lecture{font-size:1.5rem}
  .stage__foot{padding:0 20px 24px; justify-content:center}
  .stage__meta{justify-content:center; gap:28px}
  main{padding-block:20px 40px}
  .qcard__head{flex-direction:column; align-items:flex-start; gap:8px}
  .qblock{padding:14px}
  .card{padding:18px}
  .wrap{padding:0 16px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}

/* -------------------------------------------------------- بنك الأسئلة -- */
.bank-count{font-size:.88rem;color:var(--primary-dark);background:var(--primary-soft);padding:7px 12px;border-radius:999px;white-space:nowrap}
.bank-tools{display:grid;grid-template-columns:1.1fr 1.25fr .8fr 1.5fr;gap:12px;align-items:end;margin-block:18px 12px}
.bank-tools .field{margin:0}.bank-search{min-inline-size:0}
.bank-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 14px;margin-block:12px 16px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm)}
.bank-actions #bankSelected{color:var(--muted);font-size:.9rem;margin-inline-end:auto}.bank-select-all{display:flex;align-items:center;gap:7px;cursor:pointer;font-size:.92rem}
.bank-list{display:grid;gap:10px}.bank-q{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px;background:var(--surface)}
.bank-q:hover{border-color:var(--line-strong)}.bank-q__check{margin-block-start:5px}.bank-q__body{font-weight:500;line-height:1.65}.bank-q__meta{display:flex;gap:7px;flex-wrap:wrap;margin-block-start:7px;color:var(--muted);font-size:.8rem}
.bank-pill{border:1px solid var(--line);border-radius:999px;padding:2px 8px;background:var(--surface-2)}.bank-q__opts{margin-block-start:8px;color:var(--muted);font-size:.86rem;line-height:1.7}.bank-q__opts b{color:var(--primary-dark)}
.bank-q__tools{display:flex;gap:6px}.bank-q--off{opacity:.58}.bank-empty{padding:30px;text-align:center;color:var(--muted)}
@media(max-width:820px){.bank-tools{grid-template-columns:1fr}.bank-q{grid-template-columns:auto 1fr}.bank-q__tools{grid-column:2}.bank-actions #bankSelected{margin-inline-end:0;inline-size:100%}}

/* V7: محرر سؤال بنك الأسئلة - تعديل محدود دون تغيير بقية الواجهة */
.bank-edit-modal{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:9999;display:flex;align-items:center;justify-content:center;padding:18px;direction:rtl}
.bank-edit-dialog{width:min(720px,96vw);max-height:92vh;overflow:auto;background:#fff;border-radius:18px;padding:22px;box-shadow:0 18px 55px rgba(0,0,0,.2)}
.bank-edit-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;font-size:1.1rem}.bank-edit-x{border:0;background:transparent;font-size:28px;cursor:pointer}
.bank-edit-dialog label{display:block;margin:12px 0 6px}.bank-edit-dialog textarea,.bank-edit-dialog input[type=text]{box-sizing:border-box;width:100%;border:1px solid #cbdad5;border-radius:10px;padding:11px;font:inherit;background:#fff}
.bank-edit-options{margin-top:14px}.bank-edit-hint{margin-bottom:8px;color:#5f746e}.bank-edit-option{display:grid;grid-template-columns:26px 28px 1fr;gap:8px;align-items:center;margin:9px 0}.bank-edit-option input[type=radio]{width:19px;height:19px;accent-color:#168a7a}
.bank-edit-actions{display:flex;gap:10px;justify-content:flex-start;margin-top:18px}

/* --- إضافة v9: نافذة إضافة/تعديل سؤال بنك الأسئلة (3 أو 4 خيارات) --- */
.bank-edit-dialog select{box-sizing:border-box;width:100%;border:1px solid #cbdad5;border-radius:10px;padding:11px;font:inherit;background:#fff}
.bank-edit-dialog input[type=text]:disabled{background:var(--surface-2);color:var(--muted)}
.bank-edit-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bank-edit-countrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.bank-edit-countrow .bank-edit-hint{margin:0}
.bank-edit-radio{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:.92rem}
.bank-edit-radio input[type=radio]{width:17px;height:17px;accent-color:#168a7a}
.bank-q--new{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-soft)}
@media(max-width:600px){.bank-edit-row{grid-template-columns:1fr}}

/* --- إضافة v10: خيارا صح/خطأ معبآن تلقائيًا (للقراءة فقط) --- */
.bank-edit-option input[type=text][readonly]{background:var(--surface-2);color:var(--ink);cursor:default}

/* --- إضافة v11: الأسئلة المقالية والتصحيح اليدوي --- */
.bank-q__essay{display:block;color:var(--muted)}
.bank-edit-dialog input[type=number]{box-sizing:border-box;width:100%;border:1px solid #cbdad5;border-radius:10px;padding:11px;font:inherit;background:#fff}
.essay-answer{display:block}
.essay-answer__label{display:block;margin-block-end:8px;font-weight:500}
.essay-answer textarea{box-sizing:border-box;width:100%;min-block-size:180px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px;font:inherit;line-height:1.8;background:#fff;resize:vertical}
.essay-answer textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.essay-q{border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px;margin-block-end:16px;background:var(--surface-2)}
.essay-q__head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-block-end:8px}
.essay-q__body{font-weight:500;line-height:1.7;margin-block-end:8px}
.essay-q__model{color:var(--muted);font-size:.9rem;line-height:1.7;margin-block-end:12px}
.essay-a{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px;margin-block-start:12px}
.essay-a--graded{border-color:var(--primary);background:var(--primary-soft)}
.essay-a__who{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-block-end:8px}
.essay-a__text{white-space:pre-wrap;line-height:1.85;padding:12px;background:var(--surface-2);border-radius:var(--radius-sm);margin-block-end:12px}
.essay-a__grade{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.essay-a__grade label{font-size:.9rem;color:var(--muted)}
.essay-input{inline-size:110px;border:1px solid var(--line);border-radius:10px;padding:9px;font:inherit;text-align:center}
.essay-a__state{font-size:.88rem;color:var(--muted)}
.essay-a__state--ok{color:var(--primary)}
.essay-a__state--bad{color:var(--danger)}

/* --- إضافة v12: مراقبة مغادرة الصفحة + نوافذ التأكيد --- */
.switch{display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:500}
.switch input{inline-size:20px;block-size:20px;accent-color:var(--primary);cursor:pointer}
.btn--sm{padding:6px 12px;font-size:.86rem}

/* نافذة عامة (تحذير الطالب · تأكيد الحذف · سجل المغادرة) */
.modal{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;
  background:rgba(15,32,28,.55);padding:20px;backdrop-filter:blur(2px)}
.modal__box{background:#fff;border-radius:var(--radius);padding:26px;max-inline-size:520px;
  inline-size:100%;box-shadow:0 18px 50px rgba(0,0,0,.28);max-block-size:88vh;overflow:auto}
.modal__box h3{margin:0 0 12px;font-size:1.24rem;color:var(--primary)}
.modal__quiz{background:var(--surface-2);border-radius:var(--radius-sm);padding:12px;
  line-height:1.7;margin-block-end:14px}
.modal__warn{color:var(--danger);line-height:1.8;margin-block-end:12px;font-weight:500}
.modal__row{display:flex;gap:10px;justify-content:flex-start;margin-block-start:18px;flex-wrap:wrap}
.flog{margin:0 0 12px;padding-inline-start:20px;line-height:2}
.flog li{font-variant-numeric:tabular-nums}

/* شارات المراقبة في جدول الاختبارات السابقة */
.mon{font-size:.86rem;white-space:nowrap}
.mon--ok{color:var(--primary)}
.mon--stop{color:var(--danger);font-weight:500}
.badge--stop{background:#F6E4E2;color:#9C3A34}

/* لوحة حالة الطلاب في شاشة القاعة */
.monitor{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;margin-block-start:16px}
.monitor__head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-block-end:10px}
.monitor__title{font-weight:600;color:var(--primary)}
.monitor__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.mrow{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--radius-sm);
  background:var(--surface-2);font-size:.92rem}
.mrow__dot{inline-size:10px;block-size:10px;border-radius:50%;flex:none}
.mrow__name{font-weight:500}
.mrow__no{color:var(--muted);font-size:.84rem}
.mrow__state{margin-inline-start:auto;font-size:.84rem;white-space:nowrap}
.mrow--ok .mrow__dot{background:#2E9E5B}
.mrow--ok .mrow__state{color:#2E9E5B}
.mrow--done .mrow__dot{background:var(--primary)}
.mrow--done .mrow__state{color:var(--primary)}
.mrow--warn{background:#FDF3E0}
.mrow--warn .mrow__dot{background:#C8871A}
.mrow--warn .mrow__state{color:#C8871A;font-weight:500}
.mrow--stop{background:#F9EAE8}
.mrow--stop .mrow__dot{background:var(--danger)}
.mrow--stop .mrow__state{color:var(--danger);font-weight:500}