:root { color: #183247; background: #f5f7f8; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1.5; }
* { box-sizing: border-box; } body { margin: 0; }
.page { width: min(880px, 100%); margin: 0 auto; padding: 28px 18px 56px; }
.intro, .question-card { background: #fff; border: 1px solid #d9e2e7; border-radius: 12px; padding: 18px; box-shadow: 0 3px 14px #1832470d; }
.intro { margin-bottom: 16px; } h1 { margin: 0 0 6px; font-size: clamp(1.8rem, 5vw, 2.5rem); }
.subtitle { margin: 0 0 16px; font-size: 1.15rem; color: #36546a; } a { color: #145d8a; }
.question-card { margin: 12px 0; } .question-heading { display: flex; align-items: flex-start; gap: 10px; } .question-heading h2 { margin: 1px 0 0; font-size: 1.02rem; line-height: 1.4; }
.question-number { display: inline-grid; place-items: center; flex: 0 0 26px; height: 26px; border: 1px solid #c7d5dc; border-radius: 7px; color: #36546a; background: #f3f7f8; font-size: .82rem; font-weight: 700; }
.options { display: grid; gap: 5px; margin-top: 13px; } .options label { display: flex; gap: 9px; align-items: flex-start; padding: 7px 9px; border: 1px solid #e1e9ed; border-radius: 7px; background: #f8fafb; }
.options label:has(input:checked) { border-color: #77a8bd; background: #e7f1f5; } .options label:hover { background: #f1f6f8; } input { accent-color: #1d658b; margin-top: 4px; flex: 0 0 auto; }
.comment { display: block; margin-top: 17px; color: #36546a; font-size: .95rem; } textarea { display: block; width: 100%; min-height: 82px; resize: vertical; margin-top: 7px; padding: 10px; border: 1px solid #aebfc8; border-radius: 7px; font: inherit; color: inherit; }
small { display: block; margin-top: 6px; color: #5b6c77; font-size: .82rem; } button { width: 100%; border: 0; border-radius: 8px; padding: 14px 18px; background: #1d658b; color: white; font: inherit; font-weight: 700; cursor: pointer; }
button:disabled { opacity: .65; cursor: wait; } .error { color: #9a2020; background: #fff0f0; border: 1px solid #e2aaaa; border-radius: 8px; padding: 12px; }
@media (min-width: 640px) { .page { padding-top: 48px; } .question-card { padding: 20px; } }