*{box-sizing:border-box}
:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;color:#182238;background:#f3f6fc;font-synthesis:none}
body{margin:0;min-height:100vh;padding:28px 16px 40px;background:radial-gradient(ellipse at top,#e7efff 0,#f3f6fc 52%)}
.shell{width:100%;max-width:720px;margin:0 auto}
.brand{display:flex;align-items:center;gap:13px;margin:8px 0 22px}
.brand-mark{width:46px;height:46px;border-radius:14px;background:#245eea;color:white;display:grid;place-items:center;font-size:22px;font-weight:800;box-shadow:0 7px 18px #245eea35}
.brand h1{font-size:21px;margin:0 0 3px}.brand p{margin:0;color:#73809a;font-size:13px}
.panel{background:#fff;border:1px solid #e8edf5;border-radius:20px;padding:clamp(20px,5vw,34px);box-shadow:0 12px 36px #253b6410}
.section-head{margin-bottom:24px}.eyebrow{font-size:11px;letter-spacing:.12em;color:#245eea;font-weight:800}
h2{font-size:23px;margin:7px 0;color:#17233b}.section-head p{margin:0;color:#7a879d;font-size:14px}
form{display:grid;gap:17px}label{display:grid;gap:8px;font-size:14px;font-weight:650;color:#34415a}
input{width:100%;min-height:48px;border:1px solid #dce3ee;border-radius:11px;padding:12px 14px;font:inherit;font-weight:400;color:#182238;background:#fff;outline:none}
input:focus{border-color:#245eea;box-shadow:0 0 0 3px #245eea18}
.primary{width:100%;min-height:50px;border:0;border-radius:12px;background:#245eea;color:#fff;font:inherit;font-weight:750;font-size:16px;cursor:pointer;margin-top:8px;box-shadow:0 7px 16px #245eea2b}
.primary:active{transform:translateY(1px)}.primary:disabled{opacity:.55;cursor:wait}
.primary span{float:right;margin-right:6px;font-size:20px;line-height:18px}
.quiz-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}.quiz-top h2{font-size:21px}
.counter{white-space:nowrap;background:#edf3ff;color:#245eea;border-radius:30px;padding:8px 12px;font-size:12px;font-weight:750}
.question{padding:18px 16px;border:1px solid #e7ecf4;border-radius:14px;margin:0 0 14px;background:#fcfdff}
.question-title{display:flex;gap:10px;align-items:flex-start;font-weight:700;line-height:1.65;margin:0 0 14px}
.number{flex:none;width:25px;height:25px;border-radius:8px;background:#eaf0ff;color:#245eea;display:grid;place-items:center;font-size:12px}
.question-type{font-size:11px;color:#8591a5;font-weight:600;margin-left:4px}
.option{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border:1px solid #e7ecf4;border-radius:10px;margin:8px 0;cursor:pointer;font-size:14px;font-weight:500;line-height:1.5}
.option:has(input:checked){border-color:#7fa3ff;background:#f1f5ff;color:#194fca}
.option input{width:17px;height:17px;min-height:0;margin:1px 0 0;accent-color:#245eea;flex:none}
.notice{padding:12px 14px;border-radius:11px;font-size:13px;line-height:1.6;margin:14px 0}
.error{background:#fff0f0;color:#bd3030}.warning{background:#fff7e6;color:#9a6200}
.loading{display:flex;align-items:center;gap:10px;color:#73809a;padding:24px 0}
.spinner{width:18px;height:18px;border:2px solid #dce6ff;border-top-color:#245eea;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#result{margin-top:18px;text-align:center;font-size:18px;font-weight:800;line-height:1.6}
#result.success{color:#16834a}#result.failure{color:#bd3030}
footer{text-align:center;color:#9aa5b7;font-size:12px;padding:20px 8px}
[hidden]{display:none!important}
@media(max-width:480px){body{padding:16px 11px 28px}.brand{margin:4px 3px 16px}.brand h1{font-size:19px}.panel{border-radius:16px;padding:20px 16px}.quiz-top{align-items:flex-start;flex-direction:column;gap:4px}.question{padding:15px 12px}.option{padding:10px}.primary{min-height:48px}}