:root{
  --bg:#f2f4f8;
  --card:#ffffff;
  --accent:#2563eb;
  --success:#16a34a;
  --danger:#dc2626;
  --text:#111827;
}

*{box-sizing:border-box;margin:0;padding:0;font-family:'Tajawal',sans-serif;}
body{background:var(--bg);display:flex;justify-content:center;align-items:center;height:100vh;}
.screen{
  width:100%;max-width:480px;
  background:var(--card);
  border-radius:20px;
  padding:25px;
  box-shadow:0 15px 40px rgba(0,0,0,0.1);
  animation:fadeIn 0.4s ease-out;
}
@keyframes fadeIn{
  from{opacity:0; transform: translateY(20px);} to{opacity:1; transform: translateY(0);}
}
h1,h2,h3{color:var(--accent);margin-bottom:12px;text-align:center;}
p{margin-bottom:15px;color:var(--text);}
input{width:100%;padding:12px 15px;margin-bottom:12px;border-radius:12px;border:1px solid #ccc;font-size:15px;}
button{width:100%;padding:12px;background:var(--accent);color:white;border:none;border-radius:12px;font-size:16px;cursor:pointer;transition:0.3s;}
button:hover{opacity:0.85;}
.choices{display:grid;gap:12px;margin-top:12px;}
.choice{padding:14px;background:#f0f4ff;border-radius:12px;cursor:pointer;transition:0.25s;display:flex;justify-content:space-between;}
.choice.correct{background:rgba(22,163,74,0.2);border:1px solid var(--success);}
.choice.wrong{background:rgba(220,38,38,0.15);border:1px solid var(--danger);}
.choice.disabled{pointer-events:none;opacity:0.9;}
.progress-bar{width:100%;height:10px;background:#e5e7eb;border-radius:10px;margin-top:12px;overflow:hidden;}
.progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),#4f46e5);transition:0.4s;}