/* منصة الاختبارات الصفية السريعة — نظام التصميم
   خط: 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}
}