:root { --ink:#1d2733; --muted:#5b6776; --line:#d5dbe3; --brand:#1f6fb2; --bg:#f4f6f9; --err:#b3261e; --ok:#1b7f3b; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center; padding:24px 16px;
       background:var(--bg); color:var(--ink); font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
main { width:100%; max-width:420px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:28px; }
h1 { margin:0 0 20px; font-size:22px; } h1 span { color:var(--brand); font-weight:500; }
label { display:block; margin:14px 0 6px; font-weight:600; font-size:14px; }
input, textarea { width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:6px; font:inherit; }
textarea { font-family:ui-monospace,Consolas,monospace; font-size:12px; word-break:break-all; }
input:focus, textarea:focus { outline:2px solid var(--brand); outline-offset:1px; }
button { margin-top:18px; width:100%; padding:11px; border:0; border-radius:6px; background:var(--brand); color:#fff; font:inherit; font-weight:600; cursor:pointer; }
button:hover { filter:brightness(1.08); }
pre { overflow-x:auto; background:var(--bg); padding:10px; border-radius:6px; font-size:12px; }
.muted { color:var(--muted); font-size:14px; } .error { color:var(--err); } .ok { color:var(--ok); }