:root { --accent:#1f5f99; --ok:#1e7a3c; --bad:#b3261e; --bg:#f4f6f9; --card:#fff; --text:#1d2430; --muted:#5b6575; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background:var(--bg); color:var(--text); line-height:1.5; }
main { max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; }
h1 { color: var(--accent); margin-bottom: 4px; }
.intro { color: var(--muted); margin-top: 0; }
.card { background: var(--card); border-radius: 10px; padding: 18px 20px; margin: 16px 0; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
label.name { font-weight: 600; display:block; margin-bottom:6px; }
input[type=text] { width:100%; padding:10px 12px; font-size:1rem; border:1px solid #c5ccd6; border-radius:6px; }
fieldset { border:none; padding:0; margin:0; }
legend { font-weight:600; margin-bottom:8px; }
.opt { display:flex; gap:10px; align-items:center; padding:8px 10px; border-radius:6px; cursor:pointer; }
.opt:hover { background:#eef3f9; }
.opt input { width:18px; height:18px; }
button { background:var(--accent); color:#fff; border:none; border-radius:8px; padding:12px 28px; font-size:1.05rem; cursor:pointer; }
button:hover { filter:brightness(1.1); }
.error { background:#fdecea; color:var(--bad); padding:12px 16px; border-radius:8px; }
.score { font-size:2rem; font-weight:700; color:var(--accent); }
.ok { color:var(--ok); } .bad { color:var(--bad); }
a.btn { display:inline-block; margin-top:8px; color:var(--accent); }