:root{--bg:#f4f8f7;--card:#fff;--tx:#12302b;--mu:#5b7570;--pr:#0f8f7d;--prt:#fff;--ok:#1b8a4b;--okb:#e3f5ea;--no:#c0392b;--nob:#fbe9e7;--bd:#d6e4e1}
@media (prefers-color-scheme:dark){:root{--bg:#0e1b19;--card:#162825;--tx:#e6f2ef;--mu:#93b0aa;--pr:#2bbfa8;--prt:#06201c;--ok:#5fd68f;--okb:#12362a;--no:#ff8a7a;--nob:#3a1d19;--bd:#274540}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);font-family:'Cairo',Tahoma,sans-serif;line-height:1.7}
.w{max-width:760px;margin:0 auto;padding:16px}
h1{margin:0;font-size:1.5rem;font-weight:800;color:var(--pr);text-align:center}
.sub{color:var(--mu);font-size:.9rem}
.card{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:14px;margin:10px 0}
button,input,textarea,select{font-family:inherit;font-size:1rem}
.btn{background:var(--pr);color:var(--prt);border:0;border-radius:10px;padding:9px 16px;font-weight:600;cursor:pointer}
.btn.g{background:transparent;color:var(--pr);border:1px solid var(--pr)}
.btn.d{background:var(--no);color:#fff}
.btn.sm{padding:4px 10px;font-size:.85rem}
input[type=text],input[type=password],input[type=tel],input[type=datetime-local],textarea,select{width:100%;padding:9px;margin:4px 0;border:1px solid var(--bd);border-radius:10px;background:var(--bg);color:var(--tx)}
textarea{min-height:80px}
.tabs{display:flex;gap:6px;margin:10px 0;flex-wrap:wrap}.tabs button{flex:1;min-width:76px;padding:8px 6px}
.opt{display:block;padding:9px 12px;border:1px solid var(--bd);border-radius:10px;margin:6px 0;cursor:pointer}
.opt.sel{border-color:var(--pr);background:var(--okb)}.opt.c{border-color:var(--ok);background:var(--okb)}.opt.w{border-color:var(--no);background:var(--nob)}
.tag{padding:2px 10px;border-radius:20px;font-size:.8rem;font-weight:600}
.tag.ok{background:var(--okb);color:var(--ok)}.tag.no{background:var(--nob);color:var(--no)}
.ans{margin-top:8px;padding:9px;border-radius:10px;background:var(--bg);font-size:.95rem}
.score{font-size:2.3rem;font-weight:800;text-align:center;color:var(--pr)}
.row{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.msg{color:var(--no);font-size:.9rem;min-height:1.2em}
.scroll{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:.9rem}th,td{padding:6px;border-bottom:1px solid var(--bd);text-align:right;white-space:nowrap}

.th{width:90px;height:90px;object-fit:cover;border-radius:8px;margin:3px;border:1px solid var(--bd)}

.logo{display:block;margin:4px auto 0;width:110px;height:110px;object-fit:contain;border-radius:22px;background:#fdfaf5}

.stk{position:sticky;top:0;z-index:5;background:var(--bg);padding:6px 0 2px}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0}
.chip{background:var(--card);border:1px solid var(--bd);border-radius:20px;padding:2px 10px;font-size:.82rem;font-weight:600}
.chip.ok{color:var(--ok)}.chip.wr{color:#c27a00}.chip.gr{color:var(--mu)}
.nav-grid{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.qn{width:38px;height:38px;border-radius:10px;border:1px solid var(--bd);background:var(--card);color:var(--tx);font-weight:600;cursor:pointer;padding:0}
.qn.a{background:var(--okb);border-color:var(--ok);color:var(--ok)}
.qn.s{background:rgba(224,168,46,.22);border-color:#e0a82e;color:#c27a00}
.qn.cur{background:var(--pr);border-color:var(--pr);color:var(--prt)}
button:disabled{opacity:.4;cursor:default}

.cheer{margin-top:8px;font-weight:700;text-align:center;padding:7px;border-radius:10px}
.cheer.g{background:var(--okb);color:var(--ok)}
.cheer.b{background:var(--nob);color:var(--no)}

.qimg{display:block;max-width:100%;max-height:340px;margin:8px auto;border-radius:10px;border:1px solid var(--bd);background:#fff;object-fit:contain}