body{overflow:auto;background:#f4fbfa;-webkit-user-select:none;user-select:none}
#bar{position:sticky;top:0;z-index:9;display:flex;align-items:center;gap:14px;background:#fff;padding:8px 20px;box-shadow:0 2px 12px #0001}
#bar img{height:48px}#status{font-size:15px;font-weight:600;margin-inline-start:auto}#phase{font-size:15px;color:var(--mut)}
main{max-width:980px;margin:0 auto;padding:22px 18px 60px;display:flex;flex-direction:column;gap:18px}
.card{background:#fff;border-radius:26px;padding:22px;box-shadow:0 4px 20px #0001;display:flex;flex-direction:column;gap:14px}
h2{font-size:26px}h3{font-size:20px}.mut{color:var(--mut);font-size:17px}
.row{display:flex;gap:12px;flex-wrap:wrap}.row>*{flex:1;min-width:150px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
button.big{padding:22px;font-size:24px;border-radius:22px}
.sky{background:var(--sk)}.yl{background:var(--yl);color:#5a3d00}.or{background:var(--or)}.gr{background:#8da4ab}.rd{background:#d9534f}
input,textarea,select{font:inherit;font-size:18px;padding:12px 14px;border-radius:14px;border:2px solid #cfe3e7;width:100%;direction:rtl;background:#fff;-webkit-user-select:text;user-select:text}
input.ltr{direction:ltr;text-align:left}.code{font-size:44px;text-align:center;letter-spacing:14px;direction:ltr}
label{font-weight:600;font-size:16px;display:block;margin-bottom:4px}
.colors{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.col{padding:30px 10px;font-size:26px;border-radius:24px;color:#2b2b2b;line-height:1.5}.col small{display:block;font-size:16px;font-weight:600}
.col.sel{outline:7px solid var(--ink)}
.warn{background:#fff3cd;color:#7a5200;padding:12px 16px;border-radius:16px;font-weight:600}.ok{color:var(--ok)}.bad{color:var(--bad)}
.tabs{display:flex;gap:8px;overflow:auto}.tabs button{background:#cfe3e7;color:var(--ink);flex:none;font-size:17px;padding:10px 16px}.tabs .on{background:var(--tq);color:#fff}
.q{border:2px solid #e3eef0;border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:10px}
.oprow{display:flex;gap:10px;align-items:center}.oprow input[type=radio]{width:28px;height:28px;flex:none}
/* وضع الطفل */
.kid{position:fixed;inset:0;z-index:20;background:#fff;display:flex;flex-direction:column;padding:24px;gap:18px;overflow:auto}
.kid h1{font-size:34px;text-align:center;line-height:1.4}
.kid .ans{flex:1;display:grid;gap:16px;grid-auto-rows:1fr}
.kid .ans button{font-size:34px;border-radius:30px;text-align:right;padding:20px 28px;display:flex;align-items:center;gap:20px}
.kid .ans button b{background:#fff;color:var(--ink);width:70px;height:70px;border-radius:50%;display:grid;place-items:center;flex:none}
.kid .ans button.chosen{outline:8px solid var(--ink)}
.lock{position:absolute;top:10px;left:10px;width:54px;height:54px;padding:0;border-radius:50%;background:#e6eef0;color:#7b929a;font-size:22px;opacity:.7}
.pin{position:fixed;inset:0;z-index:30;background:#000a;display:grid;place-items:center}.pin>div{background:#fff;border-radius:26px;padding:24px;width:min(360px,92vw);display:flex;flex-direction:column;gap:14px}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.pad button{background:#e6eef0;color:var(--ink);font-size:28px;padding:16px}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 22px;border-radius:30px;z-index:40;font-weight:600}