*{box-sizing:border-box}
body{margin:0;font-family:"Heebo","Assistant","Segoe UI",Arial,sans-serif;background:#f6f3ff;color:#1e1b3a;font-size:17px;line-height:1.5}
.hero{background:linear-gradient(135deg,#7c3aed,#a855f7 60%,#ec4899);color:#fff;text-align:center;padding:22px 16px 26px;border-radius:0 0 26px 26px}
.hero .logo{width:62px;height:62px;border-radius:50%;background:#fff;padding:3px}
.hero h1{margin:8px 0 4px;font-size:1.55rem;line-height:1.25}
.hero p{margin:0;opacity:.95;font-size:1rem}
.tabs{display:flex;gap:10px;max-width:720px;margin:-18px auto 0;padding:0 14px;position:relative}
.tab{flex:1;border:0;border-radius:18px;background:#fff;color:#4c1d95;font:inherit;font-weight:800;font-size:1.2rem;padding:12px 8px;box-shadow:0 4px 14px #4c1d9522;cursor:pointer;min-height:64px}
.tab small{display:block;font-weight:500;font-size:.8rem;color:#6b5fa0}
.tab.on{background:#2e1065;color:#fff}.tab.on small{color:#d8ccff}
main{max-width:720px;margin:0 auto;padding:14px}
.card{background:#fff;border-radius:20px;padding:16px;margin:0 0 14px;box-shadow:0 3px 12px #2e106514}
.card h2{margin:0 0 12px;font-size:1.25rem;color:#2e1065}
.big{display:grid;gap:12px}
@media(min-width:640px){.big{grid-template-columns:1fr 1fr}}
.game{border:0;border-radius:18px;background:linear-gradient(135deg,#ede9fe,#fce7f3);padding:16px;font:inherit;text-align:right;cursor:pointer;min-height:84px;display:flex;flex-direction:column;gap:3px;color:#2e1065}
.game .ic{font-size:1.8rem}.game b{font-size:1.15rem}.game small{color:#5b4f8a}
.game:active,.btn:active,.opt:active{transform:scale(.98)}
.files{display:grid;gap:10px}
.frow{display:grid;grid-template-columns:1fr auto auto;grid-template-rows:auto auto;gap:2px 8px;align-items:center;background:#faf8ff;border:1.5px solid #e4dcff;border-radius:16px;padding:10px 12px}
.frow.teacher{background:#fff8e6;border-color:#f3dc9a}
.frow b{grid-column:1;font-size:1.05rem}.frow span{grid-column:1;grid-row:2;font-size:.85rem;color:#6b6290}
.btn{grid-row:1/3;display:inline-flex;align-items:center;justify-content:center;min-width:70px;min-height:52px;border-radius:14px;font-weight:800;text-decoration:none;color:#fff;font-size:1rem}
.btn.pdf{background:#e11d48}.btn.doc{background:#2563eb}
.all{display:block;text-align:center;margin-top:12px;color:#6d28d9;font-weight:700;text-decoration:none;padding:8px}
details{border:1.5px solid #e4dcff;border-radius:14px;padding:10px 12px;margin:0 0 10px}
summary{font-weight:800;color:#2e1065;cursor:pointer;min-height:30px}
details ul{margin:8px 0 0;padding:0 18px 0 0}details li{margin:5px 0}
.tip{background:#fff8e1;border-radius:10px;padding:8px 10px;margin:8px 0 0;font-size:.95rem}
.bar{display:flex;align-items:center;gap:10px;margin:4px 0 8px}
.bar #ttl{flex:1;font-weight:800;color:#2e1065}
.bar #prog{font-weight:700;color:#6b5fa0}
.ghost{border:0;background:#ede9fe;color:#4c1d95;border-radius:12px;padding:10px 14px;font:inherit;font-weight:700;min-height:46px;cursor:pointer}
.meter{height:10px;background:#e9e3ff;border-radius:9px;overflow:hidden;margin-bottom:12px}.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#a855f7,#ec4899);transition:width .3s}
.sent{font-size:1.25rem;font-weight:700;background:#f3edff;border-right:6px solid #7c3aed;border-radius:12px;padding:12px 14px;margin-bottom:10px}
.sent:empty{display:none}
.sent.bad{background:#fff0f3;border-right-color:#e11d48}
.qq{font-weight:700;margin-bottom:10px;color:#3b3366}
.opts{display:grid;gap:10px}
.opt{border:2px solid #ddd3ff;background:#fff;border-radius:16px;padding:14px;font:inherit;font-size:1.08rem;text-align:right;min-height:58px;cursor:pointer;color:#1e1b3a}
.opt.ok{background:#dcfce7;border-color:#16a34a}.opt.no{background:#ffe4e6;border-color:#e11d48}
.opt:disabled{cursor:default}
.fb{margin-top:12px;border-radius:14px;padding:12px 14px;font-size:1.02rem}
.fb.ok{background:#ecfdf3;border:1.5px solid #86efac}.fb.no{background:#fff1f2;border:1.5px solid #fda4af}
.next{display:block;width:100%;margin-top:12px;border:0;border-radius:16px;background:#2e1065;color:#fff;font:inherit;font-weight:800;font-size:1.15rem;min-height:56px;cursor:pointer}
.end{text-align:center}.trophy{font-size:3rem}
footer{display:flex;align-items:center;justify-content:center;gap:10px;padding:18px 10px 26px;color:#5b4f8a;font-weight:700}
footer img{width:40px;height:40px;border-radius:50%}