:root{
  --steel: #4a6fa5;
  --steel-dark: #34517c;
  --steel-light: #eaf0f8;
  --accent: #e8a33d;
  --accent2: #5fb0a1;
  --danger: #d9614f;
  --ink: #23324a;
  --card-bg: #ffffff;
  --bg: #f4f7fb;
}
*{box-sizing:border-box;}

body{
  margin:0;
  font-family:'Tajawal', sans-serif;
  background:linear-gradient(180deg, var(--bg) 0%, #e9eef7 100%);
  color:var(--ink);
  line-height:1.9;
  padding-bottom:100px;             /* room for the submit bar */
}
.arabic{font-weight:500;}

header.hero{
  background:linear-gradient(120deg, var(--steel-dark), var(--steel));
  color:#fff;
  padding:34px 20px 56px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
header.hero h1{
  font-size:clamp(1.4rem, 4vw, 2.1rem);
  font-weight:900;
  margin:0 0 8px;
  line-height:1.35;
}
header.hero p.sub{font-size:1.02rem; opacity:.92; margin:0;}
.robots{font-size:2rem; margin-top:10px;}

.progress-wrap{max-width:900px; margin:-30px auto 0; padding:0 16px 0;}
.progress-bar{height:10px; background:#dbe4f3; border-radius:10px; overflow:hidden; box-shadow:0 4px 14px rgba(52,81,124,.18);}
.progress-fill{height:100%; width:0%; background:linear-gradient(90deg, var(--accent2), var(--steel)); transition:width .4s;}
.progress-label{font-size:.9rem; color:var(--steel-dark); text-align:center; margin-top:6px; font-weight:700;}

main{max-width:900px; margin:0 auto; padding:14px 16px 40px;}

section.card{
  background:var(--card-bg);
  border-radius:20px;
  box-shadow:0 10px 30px rgba(52,81,124,.10);
  padding:24px 20px;
  margin-bottom:22px;
  border:1px solid #e3e9f3;
}
section.card h2{
  color:var(--steel-dark);
  font-size:1.25rem;
  font-weight:900;
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 4px;
}
.badge{
  background:var(--steel);
  color:#fff;
  border-radius:50%;
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  font-weight:900;
  font-size:.95rem;
  flex-shrink:0;
}
.hint{color:var(--steel-dark); opacity:.8; font-size:.95rem; margin:0 0 14px;}

.note-box{
  background:var(--steel-light);
  border-inline-start:6px solid var(--steel);
  border-radius:12px;
  padding:14px 18px;
  font-size:.95rem;
  color:var(--steel-dark);
}
.note-card{padding:18px 20px;}

.example-box{
  background:#fff8ea;
  border:1px dashed var(--accent);
  border-radius:12px;
  padding:12px 16px;
  margin:0 0 4px;
  font-size:1.03rem;
  font-weight:700;
  color:#8a5c14;
}

.group-block{margin-bottom:18px;}
.group-block:last-child{margin-bottom:0;}

.activity{
  background:linear-gradient(135deg,#fdf6ff,#eef4ff);
  border-radius:16px;
  padding:16px;
  border:2px solid #dfe6f7;
  margin-top:10px;
}
.activity.pool{display:flex; flex-wrap:wrap; gap:8px; padding:14px 16px;}

/* ---------- one question ---------- */
.q{margin-bottom:14px;}
.q:last-child{margin-bottom:0;}
.q-prompt{font-weight:700; font-size:1.02rem; margin-bottom:8px;}

.opts{display:flex; flex-wrap:wrap; gap:8px;}

.opt{
  display:inline-block;
  font-family:inherit;
  font-weight:700;
  font-size:1rem;
  color:var(--steel-dark);
  background:#fff;
  border:2px solid var(--steel);
  border-radius:30px;
  padding:9px 18px;
  cursor:pointer;
  transition:all .18s;
}
.opt:hover{transform:translateY(-2px); box-shadow:0 4px 10px rgba(0,0,0,.1);}
.opt:focus-visible{outline:3px solid var(--accent); outline-offset:2px;}
.opt.selected{background:var(--steel); border-color:var(--steel-dark); color:#fff; transform:none;}

/* pool toggle chips (multichoose) */
.q-multichoose{margin:0;}
.opt.toggle{padding:9px 16px; font-size:.98rem;}
.opt.toggle.selected{background:var(--accent2); border-color:#3f8a7b;}

/* free text */
.text-input{
  width:100%;
  max-width:220px;
  font-family:'Tajawal', sans-serif;
  font-size:1rem;
  padding:9px 14px;
  border-radius:10px;
  border:2px solid var(--steel);
  text-align:center;
  background:#fff;
  color:var(--ink);
}
.text-input:focus{outline:3px solid var(--accent); outline-offset:1px;}
.text-input.right{border-color:var(--accent2); background:#f2fbf8;}
.text-input.wrong{border-color:var(--danger); background:#fdf3f1;}

/* ---------- after grading ---------- */
.graded .opt{cursor:default;}
.graded .opt:hover{transform:none; box-shadow:none;}
.opt.right{background:var(--accent2); border-color:#3f8a7b; color:#fff;}
.opt.wrong{background:#f3b9b2; border-color:var(--danger); color:var(--ink);}
.opt.reveal{border-color:var(--accent2); border-style:dashed; background:#eaf7f2;}

.q-mark{font-size:.85rem; margin-top:6px; font-weight:700; min-height:0;}
.q.is-right .q-mark{color:#2c6d5f;}
.q.is-wrong .q-mark{color:#9c3a2c;}
.q.is-empty{outline:2px dashed var(--accent); outline-offset:4px; border-radius:10px;}

.q.needs-answer{animation:nudge .4s;}
@keyframes nudge{
  0%,100%{transform:translateX(0);}
  25%{transform:translateX(-5px);}
  75%{transform:translateX(5px);}
}

/* ---------- result ---------- */
.result{
  background:linear-gradient(120deg,#fff8ea,#eaf7f2);
  border:2px solid var(--accent2);
  color:#2c6d5f;
  border-radius:20px;
  padding:20px;
  text-align:center;
  font-size:1.1rem;
  font-weight:900;
  line-height:1.7;
}
.result.note{background:#fff3d6; border-color:var(--accent); color:#8a5c14; font-size:1rem; font-weight:700;}
.result .big{display:block; font-size:1.4rem; margin-bottom:4px;}

/* ---------- submit bar ---------- */
.submitbar{
  position:fixed; inset-inline:0; bottom:0;
  background:rgba(244,247,251,.97);
  border-top:2px solid #dfe6f7;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  max-width:900px; margin:0 auto;
}
.progress{font-size:.88rem; color:var(--steel-dark); font-weight:700;}
.submit-btn{
  font-family:inherit;
  font-size:1.02rem;
  font-weight:900;
  color:#fff;
  background:var(--steel-dark);
  border:none;
  border-radius:12px;
  padding:11px 22px;
  cursor:pointer;
  transition:background .18s, transform .12s;
}
.submit-btn:hover{background:var(--steel);}
.submit-btn:active{transform:scale(.97);}
.submit-btn:focus-visible{outline:3px solid var(--accent); outline-offset:2px;}
.submit-btn[disabled]{background:#b7c2d6; cursor:default;}
.submit-btn.retry{background:var(--danger);}
.submit-btn.retry:hover{background:#c14e3d;}

footer{text-align:center; padding:26px 16px 30px; color:var(--steel-dark); font-size:.92rem; font-weight:700;}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}