/* اختبار ICDL التفاعلي — يُحمَّل بعد site.css و program.css و lesson.css و article.css */
.qz-pick-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px}
.qz-card{display:flex; flex-direction:column; gap:10px; padding:18px 20px; border-radius:18px; text-align:start; color:var(--text-mute); cursor:pointer; font:inherit; transition:transform .2s, border-color .2s}
.qz-card:hover,.qz-card:focus-visible{transform:translateY(-3px); border-color:var(--glass-border-strong); outline:none}
.qz-card .k{display:flex; align-items:center; gap:10px}
.qz-card .k .tab-ico{width:34px; height:34px; border-radius:10px; font-size:14px}
.qz-card b{font-size:17px; color:var(--text)}
.qz-card small{font-size:13px}
.qz-card .best{font-size:13px; font-weight:700; color:var(--purple-400); min-height:1.2em}
.qz-card .best.pass{color:#4ade80}
.qz-card.mixed{background:linear-gradient(135deg, rgba(59,130,246,.18), rgba(139,92,246,.18))}

.qz-box{padding:22px 24px; border-radius:20px; display:grid; gap:16px}
.qz-top{display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; font-size:14px; color:var(--text-dim)}
.qz-top b{color:var(--text)}
.qz-track{height:6px; border-radius:6px; background:var(--glass-strong); overflow:hidden}
.qz-track span{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--blue-500),var(--purple-500)); transition:width .3s}
.qz-mod{font-size:12px; font-weight:700; color:var(--purple-400)}
.qz-q{font-size:clamp(19px,2.6vw,23px); line-height:1.7; color:var(--text); margin:0}
.qz-opts{display:grid; gap:10px}
.qz-opt{display:flex; align-items:center; gap:12px; width:100%; text-align:start; font:inherit; font-size:16px; color:var(--text); background:var(--glass); border:1px solid var(--glass-border); border-radius:14px; padding:12px 14px; cursor:pointer; transition:border-color .15s, background .15s}
.qz-opt:hover:not(:disabled),.qz-opt:focus-visible{border-color:var(--glass-border-strong); outline:none}
.qz-opt:disabled{cursor:default}
.qz-l{flex:none; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; background:var(--glass-strong); color:var(--text-mute)}
.qz-opt.right{border-color:#22c55e; background:rgba(34,197,94,.14)}
.qz-opt.right .qz-l{background:#22c55e; color:#fff}
.qz-opt.wrong{border-color:#ef4444; background:rgba(239,68,68,.12)}
.qz-opt.wrong .qz-l{background:#ef4444; color:#fff}
.qz-fb{border-radius:14px; padding:12px 16px; border-inline-start:4px solid; background:var(--glass)}
.qz-fb.ok{border-color:#22c55e}
.qz-fb.no{border-color:#ef4444}
.qz-fb b{display:block; color:var(--text); margin-bottom:4px}
.qz-fb p{margin:0; color:var(--text-mute); line-height:1.9}
.qz-actions{display:flex; flex-wrap:wrap; gap:10px}
.qz-score{font-size:64px; font-weight:800; line-height:1.1}
.qz-score.pass{color:#4ade80}
.qz-score.fail{color:#f87171}
.qz-review{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.qz-review li{display:grid; gap:4px; padding:12px 14px; border-radius:12px; background:var(--glass); border:1px solid var(--glass-border); font-size:15px; color:var(--text-mute); line-height:1.8}
.qz-review b{color:var(--text)}
.qz-review a{color:var(--blue-400); font-weight:700; text-decoration:none}
.qz-note{font-size:14px; color:var(--text-dim)}