*{box-sizing:border-box}body{font-family:system-ui,sans-serif;margin:0;background:#f4f6f8;color:#222}
nav{display:flex;flex-wrap:wrap;gap:.2rem;background:#1f3a5f;padding:.4rem}nav a{color:#fff;text-decoration:none;padding:.5rem .7rem;border-radius:6px}nav a:hover{background:#2f5a94}
main{max-width:800px;margin:auto;padding:1rem}h1{font-size:1.5rem}
input,select,textarea,button,.btn{font:inherit;padding:.6rem;border:1px solid #bbb;border-radius:8px;width:100%;margin:.2rem 0}
button,.btn{background:#2f6fd0;color:#fff;border:0;cursor:pointer;text-align:center;display:inline-block;text-decoration:none;width:auto}
button.sec,.link{background:#e3e8ef;color:#222}.danger{background:#c33}
.card{background:#fff;padding:1rem;border-radius:10px;margin:.7rem 0;box-shadow:0 1px 3px #0002}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.6rem}.big{font-size:2rem;font-weight:700}
table{width:100%;border-collapse:collapse;background:#fff}td,th{padding:.4rem;border-bottom:1px solid #eee;text-align:left}
label.i{display:inline-block;margin:.2rem .6rem .2rem 0;width:auto}label.i input{width:auto}
#quiz{text-align:center}.q{font-size:2rem;margin:1rem 0}.dir,.prog{color:#777;font-size:.9rem}
.opt{display:block;width:100%;margin:.4rem 0;background:#fff;color:#222;border:1px solid #bbb;padding:1rem;text-align:left}
.res{font-weight:700;font-size:1.3rem}.ok{color:#187a2e}.typo{color:#b7791f}.wrong,.unknown{color:#c33}
#ans{font-size:1.4rem;text-align:center}