:root { --ink: #14171c; --mute: #5b6470; --line: #d9dee5; --bg: #f6f7f9; --card: #fff; --ok: #0a7a45; --warn: #9a6200; --bad: #b3261e; }
@media (prefers-color-scheme: dark) { :root { --ink: #eef1f5; --mute: #9aa4b2; --line: #2c333d; --bg: #0f1216; --card: #171b21; --ok: #4cc38a; --warn: #e2a93b; --bad: #f2776d; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 560px; margin: 0 auto; padding: 48px 16px 80px; }
.brand { margin: 0 0 8px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
h1 { margin: 0 0 12px; font-size: 30px; line-height: 1.2; }
.lead { margin: 0 0 28px; color: var(--mute); }
form, #result { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
label { display: block; margin-bottom: 14px; font-size: 14px; color: var(--mute); }
input, textarea { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit; }
button { width: 100%; padding: 12px; border: 0; border-radius: 8px; background: var(--ink); color: var(--bg); font: inherit; font-weight: 600; cursor: pointer; }
#result { margin-top: 20px; }
#result h2 { margin: 0 0 6px; font-size: 20px; }
#result[data-decision="pass"] h2 { color: var(--ok); }
#result[data-decision="challenge"] h2 { color: var(--warn); }
#result[data-decision="block"] h2 { color: var(--bad); }
#result h3 { margin: 18px 0 6px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
#submitted { margin: 0 0 12px; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
td { padding: 6px 0; border-top: 1px solid var(--line); }
td:last-child { text-align: right; }
ol { margin: 0; padding-left: 20px; }
.note { margin: 16px 0 0; font-size: 13px; color: var(--mute); }