* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font: 16px/1.45 -apple-system, Arial, sans-serif; color: #1c1c1e; background: #fff; }
main { max-width: 640px; margin: 0 auto; padding: 14px; }
h1 { font-size: 20px; margin: 0 0 6px; }
h2 { font-size: 16px; margin: 16px 0 6px; }
.note { margin: 0; color: #555; font-size: 14px; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
button { font: inherit; min-height: 44px; padding: 8px 16px; border-radius: 10px; border: 2px solid #8e8e93; background: #fff; color: #1c1c1e; }
button:disabled { opacity: 0.5; }
.choice[aria-pressed="true"] { background: #0a66c2; border-color: #0a66c2; color: #fff; font-weight: 700; }
.actions { display: flex; gap: 10px; margin: 16px 0 8px; }
.primary { background: #1c1c1e; color: #fff; border-color: #1c1c1e; font-weight: 700; }
.secondary { background: #fff; }
#status { margin: 8px 0; font-weight: 600; }
.invalid { color: #b00020; font-weight: 700; margin: 8px 0; }
.summary { padding: 10px; border-radius: 10px; font-weight: 700; margin: 8px 0; }
.summary.pass { background: #d9f2de; color: #0b5a1f; }
.summary.fail { background: #fbdada; color: #8a0014; }
.summary.invalid { background: #fff0c2; color: #6b4a00; }
.tablewrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { border-bottom: 1px solid #ddd; padding: 3px 5px; text-align: left; white-space: nowrap; }
td.res-ok { color: #0b5a1f; }
td.res-fail { color: #b00020; font-weight: 700; }
td.res-run { color: #888; }
#copytext { width: 100%; font: 13px/1.35 ui-monospace, Menlo, monospace; padding: 8px; border: 2px solid #8e8e93; border-radius: 10px; }
#copybtn { margin-top: 8px; }