*{box-sizing:border-box}
:root{
  --ink:#111;
  --muted:#656565;
  --line:#d7d7d7;
  --soft:#f5f5f4;
  --paper:#fff;
  --accent:#1f4f7a;
  --accent-soft:#eaf1f7;
  --good:#176b3a;
  --bad:#9b2c2c;
  --warn:#8a5a00;
}
html{background:#ececea}
body{
  margin:0;
  min-height:100%;
  font-family:Tahoma,Arial,"Noto Sans Arabic",sans-serif;
  color:var(--ink);
  background:linear-gradient(#f5f5f3,#ececea);
}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.app-header{
  width:min(1180px,100%);
  margin:auto;
  padding:24px 20px 12px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:18px;
}
.eyebrow{font-size:.82rem;color:var(--muted);font-weight:700;margin-bottom:4px}
h1{font-size:clamp(1.35rem,3vw,2.15rem);margin:0 0 6px}
.title-block p{margin:0;color:var(--muted);font-size:.95rem}
.status-card{
  display:grid;
  grid-template-columns:repeat(2,minmax(88px,1fr));
  gap:8px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:9px;
  min-width:210px;
}
.status-card div{
  min-width:0;
  padding:8px 10px;
  border:1px solid #e6e6e6;
  border-radius:10px;
  text-align:center;
}
.status-card span{display:block;color:var(--muted);font-size:.76rem}
.status-card strong{display:block;margin-top:2px;font-size:1rem}
.student-bar{
  width:min(1180px,calc(100% - 40px));
  margin:0 auto 12px;
  padding:10px 12px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
}
.name-field{display:flex;align-items:center;gap:8px;flex:1;min-width:220px}
.name-field span{font-weight:700}
.name-field input{
  min-width:0;
  width:100%;
  height:44px;
  border:1px solid #bbb;
  border-radius:9px;
  padding:0 12px;
  background:#fff;
  font-size:16px;
}
.switch{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 4px}
.switch input{width:20px;height:20px}
.ghost-btn,.primary-btn,.icon-btn,.tab{
  border:1px solid #aaa;
  background:#fff;
  color:#111;
  border-radius:10px;
  min-height:44px;
  padding:9px 14px;
  font-weight:700;
}
.primary-btn{background:#111;color:#fff;border-color:#111}
.ghost-btn:hover,.tab:hover{background:#f3f3f3}
.challenge-tabs{
  width:min(1180px,calc(100% - 40px));
  margin:0 auto 12px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}
.tab{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:#fbfbfb;
}
.tab span{
  display:inline-grid;
  place-items:center;
  width:28px;height:28px;
  border:1.5px solid currentColor;
  border-radius:50%;
  font-size:.86rem;
}
.tab.active{
  border-color:#111;
  background:#111;
  color:white;
}
.workspace{
  width:min(1180px,100%);
  margin:auto;
  padding:0 20px 28px;
}
.challenge-panel{display:none}
.challenge-panel.active{display:block}
.paper-shell{
  background:#d7d7d4;
  border-radius:16px;
  padding:16px;
  overflow:auto;
  border:1px solid #c7c7c4;
}
.paper{
  width:min(900px,100%);
  position:relative;
  margin:auto;
  line-height:0;
  background:white;
  box-shadow:0 3px 12px rgba(0,0,0,.10);
}
.paper img{
  display:block;
  width:100%;
  height:auto;
  user-select:none;
  -webkit-user-drag:none;
}
body.bw .paper img{filter:grayscale(1) contrast(1.05)}
.marker{
  position:absolute;
  left:var(--x);
  top:var(--y);
  transform:translate(-50%,-50%);
  width:42px;
  height:42px;
  border-radius:50%;
  border:2px solid #111;
  background:rgba(255,255,255,.96);
  color:#111;
  display:grid;
  place-items:center;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
  z-index:3;
  padding:0;
  transition:transform .12s ease, background .12s ease;
}
.marker span{line-height:1;font-weight:900;font-size:.9rem}
.marker:hover{transform:translate(-50%,-50%) scale(1.08)}
.marker.attempted{background:#fff5d9;border-color:#805e00}
.marker.correct{background:#e8f6ee;border-color:var(--good);color:var(--good)}
.marker.incorrect{background:#fff0f0;border-color:var(--bad);color:var(--bad)}
.tip{
  max-width:900px;
  margin:10px auto 0;
  color:var(--muted);
  font-size:.9rem;
}
dialog{
  border:0;
  padding:0;
  background:transparent;
  width:min(720px,calc(100% - 24px));
  max-width:none;
}
dialog::backdrop{background:rgba(0,0,0,.48)}
.dialog-card{
  background:white;
  border:1px solid #aaa;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 18px 60px rgba(0,0,0,.24);
}
.dialog-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:16px 18px 12px;
  border-bottom:1px solid var(--line);
}
.dialog-head h2{margin:3px 0 0;font-size:1.2rem;line-height:1.5}
.dialog-kicker{font-size:.8rem;color:var(--muted);font-weight:700}
.icon-btn{
  min-width:44px;
  width:44px;
  height:44px;
  padding:0;
  font-size:1.5rem;
  line-height:1;
}
.dialog-body{padding:16px 18px;line-height:1.75}
.dialog-body p{margin-top:0}
.field-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font-size:.88rem;font-weight:700}
.field input,.field textarea,.field select,.number-row input{
  width:100%;
  min-height:44px;
  border:1px solid #aaa;
  border-radius:9px;
  padding:9px 10px;
  background:#fff;
  font-size:16px;
}
.field textarea{min-height:88px;resize:vertical}
.options{display:grid;gap:8px}
.option{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 12px;
  border:1px solid #c8c8c8;
  border-radius:10px;
  background:#fff;
  min-height:44px;
}
.option input{width:20px;height:20px;margin-top:2px}
.tf-grid{display:grid;gap:8px}
.tf-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
  border:1px solid #d2d2d2;
  border-radius:10px;
  padding:10px 12px;
}
.tf-choices{display:flex;gap:6px}
.tf-choices label{
  display:flex;align-items:center;gap:4px;
  border:1px solid #bbb;border-radius:8px;
  padding:6px 8px;
}
.hotspot-card{
  display:grid;
  grid-template-columns:minmax(180px,280px) 1fr;
  gap:14px;
  align-items:start;
}
.hotspot{
  position:relative;
  background:#f7f7f7;
  border:1px solid #bbb;
  border-radius:12px;
  overflow:hidden;
  line-height:0;
}
.hotspot img{display:block;width:100%;height:auto}
.hotspot .pin{
  position:absolute;
  width:22px;height:22px;
  margin:-11px 0 0 -11px;
  border-radius:50%;
  background:#111;
  border:3px solid white;
  box-shadow:0 0 0 1px #111;
  display:none;
}
.hotspot.has-pin .pin{display:block}
.number-row{display:grid;grid-template-columns:1fr 150px;gap:8px}
.help{font-size:.88rem;color:var(--muted);margin:.35rem 0 0}
.feedback{
  margin:0 18px;
  padding:0;
  border-radius:10px;
  line-height:1.7;
  font-size:.94rem;
}
.feedback.good,.feedback.bad,.feedback.warn{
  padding:10px 12px;
  border:1px solid;
}
.feedback.good{background:#edf8f1;border-color:#b8dfc6;color:#13552f}
.feedback.bad{background:#fff0f0;border-color:#e1b8b8;color:#7a1f1f}
.feedback.warn{background:#fff7e3;border-color:#e5d09a;color:#694400}
.dialog-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:14px 18px 18px;
}
.hidden{display:none!important}
.answer-key{
  margin-top:10px;
  padding:10px 12px;
  border-right:4px solid #111;
  background:#f4f4f4;
}
.part-ok{border-color:#6fa784!important;background:#f4fbf6!important}
.part-bad{border-color:#c78383!important;background:#fff7f7!important}
footer{
  width:min(1180px,calc(100% - 40px));
  margin:0 auto 28px;
  color:var(--muted);
  font-size:.82rem;
  text-align:center;
}
@media(max-width:760px){
  .app-header{align-items:stretch;flex-direction:column;padding-top:16px}
  .status-card{width:100%}
  .student-bar,.challenge-tabs{width:calc(100% - 24px)}
  .challenge-tabs{grid-template-columns:1fr}
  .workspace{padding:0 12px 20px}
  .paper-shell{padding:8px;border-radius:12px}
  .marker{width:38px;height:38px}
  .field-grid{grid-template-columns:1fr}
  .hotspot-card{grid-template-columns:1fr}
  .hotspot{max-width:300px;margin:auto}
  .number-row{grid-template-columns:1fr}
  .tf-row{grid-template-columns:1fr}
  dialog{width:calc(100% - 12px)}
  .dialog-body,.dialog-head{padding-right:14px;padding-left:14px}
}
@media print{
  body{background:#fff}
  .app-header,.student-bar,.challenge-tabs,.tip,footer,.marker{display:none!important}
  .workspace{padding:0;width:100%}
  .paper-shell{padding:0;border:0;background:#fff;overflow:visible}
  .challenge-panel{display:none!important}
  .challenge-panel.active{display:block!important}
  .paper{box-shadow:none;width:100%}
}