:root { --bg:#faf9f6; --fg:#222; --muted:#666; --accent:#2f6f4f; --card:#fff; --border:#e2e0da; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; color:var(--fg); background:var(--bg); }
header { padding:16px 24px; border-bottom:1px solid var(--border); }
header h1 { margin:0 0 6px; font-size:20px; }
#disclaimer { margin:0; color:#8a5a00; background:#fff7e6; border:1px solid #f0d999; padding:8px 10px; border-radius:8px; font-size:13px; }
main { max-width:900px; margin:0 auto; padding:20px 24px; }
.controls { display:grid; gap:14px; }
label { display:grid; gap:4px; font-weight:600; font-size:13px; color:var(--muted); }
label.inline { display:flex; align-items:center; gap:8px; font-weight:400; }
label.inline input { width:auto; }
input, select, textarea { font:inherit; padding:8px; border:1px solid var(--border); border-radius:8px; background:#fff; width:100%; }
.panel { display:grid; gap:10px; padding:12px; border:1px solid var(--border); border-radius:10px; background:#fff; }
/* author .panel{display:grid} overrides the UA [hidden] rule, so restore hiding explicitly */
.panel[hidden] { display:none; }
.engine { display:grid; gap:10px; border:1px solid var(--border); border-radius:10px; }
.actions { display:flex; gap:10px; margin-top:8px; flex-wrap:wrap; }
button { font:inherit; font-weight:600; padding:9px 14px; border:0; border-radius:8px; background:var(--accent); color:#fff; cursor:pointer; }
button.secondary { background:#eee; color:#333; }
#status { min-height:20px; color:var(--muted); }
#output { display:grid; gap:12px; margin-top:8px; }
.card { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:12px; }
.card h3 { margin:0 0 6px; font-size:13px; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; }
.card .val { white-space:pre-wrap; }
.card .copy { float:right; background:#eee; color:#333; padding:4px 8px; font-size:12px; }
/* Checkbox groups render as cards in their SOAP position, tinted so ticks read at a glance. */
.card.checkboxes { background:#f2f7f4; border-color:#cfe3d8; }
.card.checkboxes .val { color:#1f5137; font-weight:600; }