body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; margin: 0; background:#f6f7f9; }
header { padding: 16px; display:flex; align-items:center; justify-content:space-between; background:#fff; position:sticky; top:0; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
h1 { font-size: 20px; margin: 0 0 6px 0; }
.wrap { max-width: 900px; margin: 0 auto; padding: 16px; }
.grid { display:grid; gap: 16px; }
.card { background:#fff; border-radius: 16px; padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.muted { color:#5f6b7a; font-size: 13px; }
.btn { border:1px solid #111; background:#111; color:#fff; border-radius: 999px; padding: 10px 14px; cursor:pointer; }
.btn.ghost { background:#fff; color:#111; }
.row { display:flex; gap: 8px; align-items:center; }
input, textarea, select { width: 100%; padding: 10px 12px; border:1px solid #d0d7e1; border-radius: 12px; font-size: 16px; }
.choices { display:grid; gap: 8px; }
.choice { text-align:left; border:1px solid #e3e8ef; border-radius: 12px; padding: 10px 12px; background:#f9fafb; }
.choice.selected { border-color:#111; background:#fff; }
.scorebar { height: 10px; background:#eef2f7; border-radius: 8px; overflow:hidden; }
.scorebar > div { height: 10px; background:#111; }
.pill { font-size: 12px; padding:2px 8px; border-radius: 999px; background:#eef2f7; }
footer { color:#5f6b7a; font-size:12px; text-align:center; padding: 24px 0 40px; }