:root{--bg:#f4f6f8;--card:#fff;--ink:#15171a;--muted:#667085;--accent:#b32025;--navy:#20243a;--ok:#16794b;--bad:#b42318;--line:#d7dce2}
*{box-sizing:border-box} body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink)}
header{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid #e4e7ec;padding:12px 16px}
.headerin{max-width:820px;margin:auto;display:flex;justify-content:space-between;align-items:center;gap:12px}
h1{font-size:19px;line-height:1.1;margin:0;color:var(--navy)} .tag{font-size:11px;color:var(--muted);margin-top:3px}
main{max-width:820px;margin:auto;padding:14px 14px 96px}
.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:11px}
button,select{font:inherit}.tab,.btn,select{border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px 11px}
.tab.active{background:var(--navy);color:#fff;border-color:var(--navy)} .toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:11px}
.toolbar select{flex:1;min-width:180px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:11px}
.stat{background:#fff;border:1px solid #e4e7ec;border-radius:14px;padding:10px;text-align:center}.stat strong{display:block;font-size:19px}.stat span{font-size:10px;color:var(--muted)}
.card{background:#fff;border-radius:20px;padding:19px;box-shadow:0 3px 18px #0000000e;border:1px solid #eaecf0}
.meta{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:11px}.q{font-size:22px;line-height:1.25;font-weight:760;margin:12px 0 16px}
.visual{display:flex;justify-content:center;margin:2px 0 12px}.visual svg{max-width:170px;height:115px}
.choice{display:block;width:100%;text-align:left;margin:8px 0;padding:14px;border-radius:13px;background:#fff;border:1px solid var(--line)}
.choice.correct{border-color:var(--ok);background:#edf9f2}.choice.wrong{border-color:var(--bad);background:#fff0ee}.choice:disabled{color:inherit}
.explain{display:none;margin-top:14px;padding:13px;border-radius:13px;background:#f2f4f7;line-height:1.45;font-size:14px}.explain.show{display:block}
.nav{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.nav button{border:1px solid var(--line);border-radius:12px;background:#fff;padding:11px}
.testpanel{display:none;background:#fff;border:1px solid #e4e7ec;border-radius:18px;padding:18px}.testpanel.show{display:block}
.testq{border-bottom:1px solid #eaecf0;padding:12px 0}.testq:last-child{border-bottom:0}.testq p{font-weight:700;margin:0 0 8px}.testq label{display:block;padding:5px 0}
.result{font-size:21px;font-weight:800;margin:12px 0}.good{color:var(--ok)}.bad{color:var(--bad)}
.footer-note{font-size:11px;color:var(--muted);margin-top:14px;text-align:center}
@media(max-width:600px){.tabs{grid-template-columns:1fr 1fr}.q{font-size:20px}.stats{grid-template-columns:repeat(3,1fr)}}