@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&family=Tajawal:wght@400;500;700&display=swap");
:root{--bg:#fffff8;--fg:#1c1c1c;--muted:#666;--accent:#8a2a2a;--line:#ddd;--ok:#1d6b3a;--bad:#a12a2a}
@media (prefers-color-scheme:dark){:root{--bg:#161616;--fg:#e8e6df;--muted:#9a9a9a;--accent:#e0a070;--line:#333;--ok:#6fcf97;--bad:#ff8a8a}}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font:1.1rem/1.7 "Poppins","Tajawal",system-ui,sans-serif;margin:0;padding:2rem 1rem 4rem}
main{max-width:38rem;margin:0 auto}
h1{font-size:2rem;line-height:1.2;margin:.2rem 0}
h2{font-size:1.3rem;margin:2.2rem 0 .5rem;color:var(--accent)}
.sub{color:var(--muted);margin:0 0 1.5rem}
nav{font-size:.9rem;color:var(--muted)} a{color:var(--accent)}
.ms{font-weight:bold;font-size:1.25rem;direction:ltr;unicode-bidi:isolate;display:inline-block}
.ar{font-size:1.3rem;direction:rtl;unicode-bidi:isolate;font-family:'Tajawal',system-ui,sans-serif}
table{border-collapse:collapse;width:100%;margin:1rem 0}
td,th{border-bottom:1px solid var(--line);padding:.45rem .5rem;text-align:start;vertical-align:top}
.note{border-inline-start:3px solid var(--accent);padding:.2rem 1rem;color:var(--muted);margin:1.2rem 0;font-size:1rem}
.q{margin:1.5rem 0;padding-top:1rem;border-top:1px solid var(--line)}
.q button.ans{display:block;width:100%;text-align:start;font:inherit;background:none;color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:.5rem .8rem;margin:.4rem 0;cursor:pointer}
.q button.ans:hover:not(:disabled){border-color:var(--accent)}
.q button.ok{border-color:var(--ok);color:var(--ok)} .q button.bad{border-color:var(--bad);color:var(--bad)}
.q .fb{font-size:1rem;color:var(--muted);min-height:1.5rem}
.score{font-weight:bold;margin-top:1rem}
@media print{body{background:#fff;color:#000;font-size:11pt}.q button{border:1px solid #999}}
.play{background:none;border:0;cursor:pointer;font-size:1.1rem;margin-inline-start:.4rem;padding:0}