:root { --fg: #1a1a1a; --muted: #6b6b6b; --bg: #fafafa; --line: #ddd; --accent: #1a1a1a; }
@media (prefers-color-scheme: dark) {
  :root { --fg: #ececec; --muted: #9a9a9a; --bg: #111; --line: #333; --accent: #ececec; }
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
       background: var(--bg); color: var(--fg);
       font: 17px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { width: 100%; max-width: 440px; text-align: center; }
h1 { font-size: clamp(26px, 6vw, 38px); font-weight: 600; letter-spacing: -0.02em; margin: 0 0 8px; word-break: break-all; }
p { color: var(--muted); margin: 0 0 28px; }
a { color: inherit; }
button { font: inherit; cursor: pointer; border: 1px solid var(--accent); background: var(--accent);
         color: var(--bg); padding: 12px 24px; border-radius: 8px; }
button:disabled { opacity: .5; cursor: default; }
form { text-align: left; }
label { display: block; font-size: 14px; color: var(--muted); margin: 14px 0 4px; }
input, textarea { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--line);
                  border-radius: 8px; background: transparent; color: var(--fg); }
textarea { min-height: 120px; resize: vertical; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.actions { margin-top: 18px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.status { font-size: 14px; color: var(--muted); }
.status.err { color: #c0392b; }