:root { --ok:#137333; --bad:#c5221f; --line:#ddd; }
* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; margin: 0; background:#f7f7f8; color:#1a1a1a; }
main { max-width: 720px; margin: 2rem auto; padding: 0 1rem; }
h1 { font-size: 1.4rem; }
.hint { color:#555; }
form label { display:block; margin:.4rem 0; }
form input:not([type=checkbox]) { width:100%; padding:.5rem; border:1px solid var(--line); border-radius:6px; }
fieldset { border:1px solid var(--line); border-radius:8px; margin:1rem 0; }
legend { padding:0 .4rem; color:#444; }
label.cb { display:flex; gap:.4rem; align-items:center; }
label.cb input { width:auto; }
button { background:#1a73e8; color:#fff; border:0; padding:.6rem 1.2rem; border-radius:6px; cursor:pointer; }
.htmx-indicator { display:none; margin-left:.6rem; color:#555; }
.htmx-request .htmx-indicator { display:inline; }
table.cmp { width:100%; border-collapse:collapse; margin-top:1rem; background:#fff; }
table.cmp th, table.cmp td { border:1px solid var(--line); padding:.5rem; text-align:left; vertical-align:top; }
tr.match td:last-child { color:var(--ok); font-weight:600; }
tr.mismatch td:last-child { color:var(--bad); font-weight:600; }
tr.missing td:last-child { color:#9a6700; }
.summary { margin-top:1rem; padding:.6rem; border-radius:6px; font-weight:600; }
.summary.ok { background:#e6f4ea; color:var(--ok); }
.summary.bad { background:#fce8e6; color:var(--bad); }
.error { margin-top:1rem; padding:.6rem; background:#fce8e6; color:var(--bad); border-radius:6px; }
.src { color:#555; font-size:.9rem; }