*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Tahoma,"Vazirmatn","Segoe UI","Noto Naskh Arabic","Geeza Pro",Arial,sans-serif;background:#0f2238;color:#111;font-size:22px;line-height:1.6}
.app{max-width:560px;margin:0 auto;min-height:100vh;background:#fffdf5;padding:16px 16px 40px}
h1{font-size:34px;margin:8px 0 4px;text-align:center;color:#0f2238}
.sub{text-align:center;color:#333;margin:0 0 6px;font-size:20px}
.en{direction:ltr;text-align:left;font-family:Arial,sans-serif;font-size:15px;color:#555;line-height:1.4}
.badge{background:#fff3c4;border:2px solid #c9a400;border-radius:12px;padding:8px 12px;font-size:18px;text-align:center;margin:10px 0}
.btn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:84px;margin:14px 0;padding:14px 18px;border:3px solid #0f2238;border-radius:18px;background:#fff;color:#0f2238;font:inherit;font-size:28px;font-weight:bold;cursor:pointer;text-align:center}
.btn:active{transform:scale(.98)}
.btn.primary{background:#0b5cad;color:#fff;border-color:#063f78}
.btn.green{background:#127a2f;color:#fff;border-color:#0b5520}
.btn.small{min-height:64px;font-size:22px}
.btn small{display:block;font-size:18px;font-weight:normal}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:22px;padding:12px;border:2px dashed #999;border-radius:14px;margin:14px 0}
.toggle input{width:40px;height:40px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.home{min-height:56px;padding:6px 16px;border:2px solid #555;border-radius:12px;background:#eee;font:inherit;font-size:20px}
.progress{font-size:26px;font-weight:bold;color:#0f2238}
.section-tag{font-size:20px;background:#e3eefb;border-radius:10px;padding:2px 12px}
.play{width:100%;min-height:110px;border-radius:24px;border:4px solid #063f78;background:#ffd400;color:#000;font:inherit;font-size:34px;font-weight:bold;display:flex;align-items:center;justify-content:center;gap:16px;margin:10px 0 14px;cursor:pointer}
.play .ico{font-size:50px}
.play.playing{background:#ffe97a;outline:6px solid #0b5cad}
.question{font-size:30px;font-weight:bold;line-height:1.7;margin:8px 0 14px;color:#000}
.qen{margin:-6px 0 12px}
.sign{position:relative;width:220px;height:220px;margin:6px auto 12px}
.sign svg{width:100%;height:100%;display:block}
.sign-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:92px;filter:grayscale(1) brightness(0);pointer-events:none}
.choice-row{display:flex;gap:10px;align-items:stretch;margin:12px 0}
.choice{flex:1;display:flex;align-items:center;gap:14px;min-height:92px;padding:12px 14px;border:3px solid #0f2238;border-radius:18px;background:#fff;font:inherit;font-size:26px;text-align:right;color:#000;cursor:pointer;line-height:1.5}
.choice .num{flex:none;width:58px;height:58px;border-radius:50%;background:#0f2238;color:#fff;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:bold}
.choice .cen{display:block}
.hear{flex:none;width:72px;border:3px solid #0b5cad;border-radius:18px;background:#e3eefb;font-size:32px;cursor:pointer}
.choice.correct{background:#c9f2d3;border-color:#127a2f;border-width:5px}
.choice.correct .num{background:#127a2f}
.choice.wrong{background:#ffd0d0;border-color:#c00;border-width:5px}
.choice.wrong .num{background:#c00}
.choice:disabled{cursor:default;color:#000;opacity:1}
.feedback{font-size:32px;font-weight:bold;text-align:center;padding:12px;border-radius:16px;margin:12px 0}
.feedback.ok{background:#127a2f;color:#fff}
.feedback.bad{background:#b00000;color:#fff}
.score{border:3px solid #0f2238;border-radius:18px;padding:14px;margin:12px 0;font-size:26px}
.score .big{font-size:40px;font-weight:bold}
.pass{color:#127a2f;font-weight:bold}
.fail{color:#b00000;font-weight:bold}
.review{border:2px solid #bbb;border-radius:16px;padding:12px;margin:12px 0;background:#fff}
.review .q{font-weight:bold;font-size:24px}
.review .a{color:#127a2f;font-weight:bold;font-size:24px;margin-top:6px}
.review .y{color:#b00000;font-size:20px}
.review .sign{width:130px;height:130px}
.review .sign-icon{font-size:54px}
.disclaimer{font-size:17px;color:#444;text-align:center;margin-top:18px}
.hidden{display:none!important}
.sign{container-type:inline-size}
.sign .sign-icon{font-size:42cqw}
.sign-top{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* public site additions */
body{background:#0f2238}
.fa{direction:rtl;text-align:right;font-family:Tahoma,"Vazirmatn","Segoe UI","Noto Naskh Arabic","Geeza Pro",Arial,sans-serif}
.choice{text-align:start}
.choice .ctext{flex:1;display:block}
.ltr .choice .ctext .fa{display:block}
.ltr .question.fa,.ltr .review .q.fa{text-align:right}
.en{direction:ltr;text-align:left}
.ltr .en{font-size:18px;color:#333}
.langbar{display:flex;gap:8px;justify-content:center;margin:4px 0 10px;flex-wrap:wrap}
.lang{flex:1;min-width:96px;min-height:60px;border:3px solid #0f2238;border-radius:14px;background:#fff;color:#0f2238;font:inherit;font-size:22px;font-weight:bold;cursor:pointer}
.lang.active{background:#0f2238;color:#fff}
.tip{background:#e3eefb;border:2px solid #0b5cad;border-radius:14px;padding:10px 14px;font-size:19px;margin:12px 0}
.about{border:2px solid #bbb;border-radius:14px;padding:10px 14px;margin:12px 0;font-size:18px;background:#fff}
.about summary{font-weight:bold;cursor:pointer;font-size:20px}
h2{font-size:28px;text-align:center;color:#0f2238;margin:18px 0 6px}
.rbtns{display:flex;gap:10px}
.rbtns .btn{margin:8px 0}
button:focus-visible{outline:4px solid #ff9800;outline-offset:2px}
.btn{flex-direction:column;gap:2px}
.btn small{font-size:19px;opacity:.95}
.play .lbl{font-size:30px;line-height:1.2}