:root{--bg: #f5f5f0;--surface: #ffffff;--ink: #0f172a;--muted: #6b7280;--sage: #78716c;--accent: #0891b2;--accent-dark: #0e7490;--accent-soft: #e6f6fa;--border: #e4e4de;--good: #0f766e;--good-soft: #e7f5f2;--bad: #dc2626;--bad-soft: #fdecec;--radius: 16px;--shadow: 0 10px 30px rgba(15, 23, 42, .07);--font-body: "Noto Sans Arabic", system-ui, -apple-system, sans-serif;--font-head: "Noto Naskh Arabic", "Noto Sans Arabic", serif}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--ink);font-family:var(--font-body);line-height:1.7;-webkit-font-smoothing:antialiased}h1,h2,h3{font-family:var(--font-head);line-height:1.35;margin:0 0 .4rem}p{margin:0 0 .6rem}button{font-family:inherit;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease}@keyframes fadeUp{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.app{min-height:100vh;display:flex;flex-direction:column}.topbar{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;gap:.6rem;align-items:baseline;padding:.9rem clamp(1rem,4vw,3rem);background:#0f172aeb;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#f8fafc}.brand{font-family:var(--font-head);font-size:1.15rem;font-weight:700}.brand-sub{font-size:.82rem;color:#94a3b8}.screen{width:100%;max-width:1120px;margin:0 auto;padding:clamp(1.2rem,3vw,2.4rem) clamp(1rem,4vw,2rem) 3rem;animation:fadeUp .45s ease both}.screen.narrow{max-width:780px}.hero{background:linear-gradient(135deg,#0f172a,#134e4a 55%,#0e7490);color:#f8fafc;border-radius:24px;padding:clamp(1.6rem,4vw,3rem);box-shadow:var(--shadow)}.hero h1{font-size:clamp(1.6rem,3.4vw,2.5rem);margin-bottom:.6rem}.hero-sub{color:#cbd5e1;max-width:62ch;font-size:clamp(.98rem,1.4vw,1.1rem)}.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-top:1.4rem}.hero-meta{display:inline-flex;align-items:center;gap:.4rem;font-size:.88rem;color:#a5f3fc}.badge{display:inline-flex;align-items:center;gap:.35rem;background:#ffffff1f;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:.28rem .8rem;font-size:.8rem;margin-bottom:.9rem}.primary-btn,.ghost-btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border-radius:12px;padding:.7rem 1.25rem;font-size:.98rem;border:1px solid transparent}.primary-btn{background:var(--accent);color:#fff;box-shadow:0 8px 20px #0891b247}.primary-btn:hover:not(:disabled){background:var(--accent-dark);transform:translateY(-2px);box-shadow:0 12px 26px #0891b257}.ghost-btn{background:var(--surface);color:var(--ink);border-color:var(--border)}.ghost-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent-dark);transform:translateY(-2px)}.wide-btn{width:100%}.primary-btn:focus-visible,.ghost-btn:focus-visible,.answer-box:focus-visible,.shape-box:focus-visible{outline:3px solid rgba(8,145,178,.45);outline-offset:2px}.callout{display:flex;gap:.8rem;align-items:flex-start;background:var(--accent-soft);border:1px solid #bfe8f2;border-radius:var(--radius);padding:1rem 1.15rem;margin-top:1.6rem;color:#0f3d4a;font-size:.94rem}.callout strong{display:block;margin-bottom:.2rem;font-family:var(--font-head)}.section-title{display:flex;align-items:center;gap:.5rem;font-size:1.3rem;margin:2.2rem 0 1rem}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.1rem}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.2rem;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.5rem;transition:transform .25s ease,box-shadow .25s ease}.card:hover{transform:translateY(-3px);box-shadow:0 16px 36px #0f172a1a}.card-head{display:flex;align-items:center;justify-content:space-between}.icon-wrap{width:44px;height:44px;border-radius:12px;background:var(--accent-soft);color:var(--accent-dark);display:grid;place-items:center}.task-no{font-size:.76rem;color:var(--sage);background:#f2f2ec;border-radius:999px;padding:.2rem .7rem}.card h3{font-size:1.12rem;margin:0}.card-en{color:var(--muted);font-size:.82rem;margin:0;direction:ltr;text-align:right}.card-brief{font-size:.93rem;color:#334155;flex:1}.card-meta{display:flex;flex-wrap:wrap;gap:.6rem;font-size:.78rem;color:var(--sage)}.card-meta span{background:#f2f2ec;border-radius:8px;padding:.15rem .55rem}.tips{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem 1.6rem 1.1rem 1.1rem;margin:0;box-shadow:var(--shadow)}.tips li{margin-bottom:.55rem;font-size:.95rem}.history{display:flex;flex-direction:column;gap:.5rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow)}.history-row{display:grid;grid-template-columns:1.4fr 1fr .6fr .6fr;gap:.5rem;align-items:center;font-size:.9rem;border-bottom:1px solid var(--border);padding-bottom:.45rem}.history-row:last-of-type{border-bottom:none}.runner-top{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;justify-content:space-between;margin-bottom:.9rem}.crumb{font-size:.9rem;color:var(--sage)}.timer{display:inline-flex;align-items:center;gap:.3rem;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:.25rem .85rem;font-variant-numeric:tabular-nums;font-weight:600}.timer.urgent{background:var(--bad-soft);border-color:#f5b5b5;color:var(--bad)}.progress-track{height:8px;background:#e7e7e0;border-radius:999px;overflow:hidden;margin-bottom:1.2rem}.progress-track span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--good));transition:width .3s ease}.intro-card{background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:clamp(1.4rem,3vw,2.4rem);box-shadow:var(--shadow)}.intro-card.center{text-align:center;display:flex;flex-direction:column;align-items:center}.intro-card .badge{background:var(--accent-soft);border-color:#bfe8f2;color:var(--accent-dark)}.intro-card h1{font-size:clamp(1.4rem,3vw,2rem)}.en-label{direction:ltr;text-align:right;color:var(--muted);font-size:.88rem;letter-spacing:.02em}.intro-brief{color:#334155;max-width:66ch;margin-top:.8rem}.steps-title{display:flex;align-items:center;gap:.4rem;font-size:1.05rem;margin-top:1.2rem}.steps-list{margin:0;padding-inline-start:1.3rem;color:#334155;font-size:.95rem}.meta-row{display:flex;flex-wrap:wrap;gap:1rem;margin:1.2rem 0;font-size:.88rem;color:var(--sage)}.meta-row span{display:inline-flex;align-items:center;gap:.35rem}.quiz-card{background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:clamp(1.2rem,3vw,2.2rem);box-shadow:var(--shadow);min-height:46vh;display:flex;flex-direction:column;gap:1rem}.q-counter{font-size:.82rem;color:var(--sage)}.q-body{display:flex;flex-direction:column;gap:1.1rem;flex:1}.statement-card{background:#f8fafc;border:1px dashed #cbd5e1;border-radius:14px;padding:1.1rem 1.3rem;font-family:var(--font-head);font-size:clamp(1.05rem,2vw,1.3rem);text-align:center}.q-question{font-size:clamp(1rem,1.8vw,1.15rem);font-weight:600;text-align:center;margin:0}.options-row{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}.answer-box{min-width:74px;padding:.8rem 1.2rem;border-radius:14px;border:2px solid var(--border);background:var(--surface);font-size:1.05rem;font-weight:600;color:var(--ink)}.answer-box.big{min-width:110px;font-size:1.5rem;padding:1rem 1.4rem}.answer-box:not(:disabled):hover{border-color:var(--accent);transform:translateY(-2px)}.answer-box.selected{border-color:var(--accent);background:var(--accent-soft)}.answer-box.correct{border-color:var(--good);background:var(--good-soft);color:var(--good)}.answer-box.wrong{border-color:var(--bad);background:var(--bad-soft);color:var(--bad)}.answer-box:disabled{cursor:default;opacity:.95}.pairs-grid{display:grid;grid-template-columns:repeat(4,minmax(60px,1fr));gap:.8rem;max-width:560px;margin:0 auto}.pair{display:flex;flex-direction:column;align-items:center;gap:.25rem;font-family:var(--font-body);font-size:1.9rem;font-weight:600;letter-spacing:.06em;background:#f8fafc;border:1px solid var(--border);border-radius:14px;padding:.7rem .4rem;direction:ltr}.pair-sep{display:block;width:60%;height:1px;background:#cbd5e1}.spatial-target{display:flex;flex-direction:column;align-items:center;gap:.4rem;color:#0e7490}.mini-label{font-size:.8rem;color:var(--sage);font-family:var(--font-body)}.shape-target{padding:.6rem;background:var(--accent-soft);border-radius:14px}.options-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.9rem}.shape-box{display:grid;place-items:center;min-height:108px;padding:.9rem;border-radius:16px;border:2px solid var(--border);background:var(--surface);color:#334155}.shape-box:not(:disabled):hover{border-color:var(--accent);transform:translateY(-2px)}.shape-box.selected{border-color:var(--accent);background:var(--accent-soft)}.shape-box.correct{border-color:var(--good);background:var(--good-soft);color:var(--good)}.shape-box.wrong{border-color:var(--bad);background:var(--bad-soft);color:var(--bad)}.feedback{border-radius:14px;padding:.9rem 1.1rem;border:1px solid var(--border)}.feedback.ok{background:var(--good-soft);border-color:#b9e3dc;color:#0b4f49}.feedback.no{background:var(--bad-soft);border-color:#f5c2c2;color:#7f1d1d}.fb-head{display:flex;align-items:center;gap:.4rem;margin-bottom:.3rem}.fb-explain{display:flex;gap:.4rem;align-items:flex-start;margin:0;font-size:.92rem}.quiz-footer{margin-top:1.2rem;display:flex;justify-content:center}.hint{font-size:.88rem;color:var(--sage)}.results-hero{background:linear-gradient(135deg,#0f172a,#134e4a 60%,#0e7490);color:#f8fafc;border-radius:24px;padding:clamp(1.5rem,3vw,2.6rem);text-align:center;box-shadow:var(--shadow)}.score-ring{display:flex;flex-direction:column;align-items:center;gap:.2rem;margin:.6rem 0 1rem}.score-ring strong{font-family:var(--font-head);font-size:clamp(2.6rem,7vw,4rem);line-height:1;color:#a5f3fc}.score-ring span{font-size:.9rem;color:#cbd5e1}.stats-row{display:flex;flex-wrap:wrap;gap:1.2rem;justify-content:center;font-size:.9rem;color:#e2e8f0}.stats-row span{display:inline-flex;align-items:center;gap:.35rem}.advice{margin:1.2rem auto 0;max-width:62ch;color:#cbd5e1}.section-scores{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}.score-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.1rem;box-shadow:var(--shadow)}.score-card-head{display:flex;justify-content:space-between;gap:.6rem;font-size:.92rem;margin-bottom:.6rem}.bar{height:8px;background:#ecece6;border-radius:999px;overflow:hidden}.bar span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--good))}.actions-row{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:1.6rem}.review-block{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.9rem 1.1rem;margin-bottom:.8rem;box-shadow:var(--shadow)}.review-block summary{cursor:pointer;font-weight:600;font-family:var(--font-head)}.review-list{list-style:none;margin:.9rem 0 0;padding:0;display:flex;flex-direction:column;gap:.7rem}.review-item{border:1px solid var(--border);border-radius:12px;padding:.7rem .9rem;background:#fcfcfa}.review-item.no{border-color:#f5c2c2;background:snow}.review-head{display:flex;align-items:center;gap:.35rem;font-size:.82rem;color:var(--sage);margin-bottom:.3rem}.review-item.no .review-head{color:var(--bad)}.review-text{font-size:.95rem;margin:0 0 .35rem}.review-answers{font-size:.88rem;margin:0 0 .3rem;color:#334155}.review-explain{display:flex;gap:.35rem;align-items:flex-start;font-size:.86rem;color:var(--sage);margin:0}.review-shape{color:#334155;margin-bottom:.35rem}.footer{margin-top:auto;padding:1.4rem clamp(1rem,4vw,3rem);font-size:.8rem;color:var(--sage);text-align:center;border-top:1px solid var(--border);background:#efefe9}@media (max-width: 720px){.pairs-grid{grid-template-columns:repeat(2,minmax(60px,1fr))}.history-row{grid-template-columns:1fr 1fr}.answer-box.big{min-width:84px;font-size:1.25rem}}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}