:root { --accent:#1f4e79; --bg:#f5f7fa; --line:#dde3ea; }
* { box-sizing:border-box; }
body { font-family:"Sarabun","Noto Sans Thai",system-ui,sans-serif; background:var(--bg); margin:0; color:#222; line-height:1.6; }
main { max-width:860px; margin:0 auto; padding:16px; }
h1 { font-size:1.5rem; text-align:center; margin:.5rem 0 0; }
.sub { text-align:center; color:#555; margin:.25rem 0 1rem; }
section { background:#fff; border:1px solid var(--line); border-radius:8px; padding:16px; margin:16px 0; }
h2 { font-size:1.1rem; margin:0 0 .5rem; color:var(--accent); }
h3 { font-size:1rem; margin:1rem 0 .25rem; background:#eef3f8; padding:4px 8px; border-radius:4px; }
.q { padding:10px 0; border-bottom:1px solid var(--line); }
.q:last-child { border-bottom:0; }
.q p { margin:0 0 6px; }
.scale { display:flex; flex-wrap:wrap; gap:6px; }
.scale label { flex:1 1 0; min-width:64px; text-align:center; border:1px solid var(--line); border-radius:6px; padding:6px 4px; cursor:pointer; background:#fff; }
.scale input { position:absolute; opacity:0; }
.scale label:has(input:checked) { background:var(--accent); color:#fff; border-color:var(--accent); }
.scale small { display:block; font-size:.7rem; opacity:.8; }
.roles label { display:inline-block; margin-right:16px; }
textarea { width:100%; min-height:80px; padding:8px; border:1px solid var(--line); border-radius:6px; font:inherit; }
button { background:var(--accent); color:#fff; border:0; border-radius:6px; padding:10px 28px; font:inherit; cursor:pointer; }
.err { background:#fdecea; border:1px solid #f5c2c0; padding:10px 16px; border-radius:6px; }
.legend { color:#555; font-size:.9rem; }
table { width:100%; border-collapse:collapse; background:#fff; }
th, td { border:1px solid var(--line); padding:6px 8px; text-align:left; }
.hidden { display:none; }