:root { --bg:#fff; --text:#0f172a; --muted:#64748b; --line:#e2e8f0; --accent:#e11d48; --field:#f8fafc; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#0b1220; --text:#e5e7eb; --muted:#94a3b8; --line:#1f2a44; --field:#111a2e; } }
:root[data-theme="dark"] { --bg:#0b1220; --text:#e5e7eb; --muted:#94a3b8; --line:#1f2a44; --field:#111a2e; }
* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: light dark; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { max-width: 720px; margin: 0 auto; padding: 24px 16px 64px; }
a { color: var(--accent); }
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text); text-decoration: none; margin-bottom: 24px; }
.brand::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); }
h1 { font-size: 28px; line-height: 1.2; margin: 0 0 6px; }
h2 { font-size: 19px; margin: 28px 0 8px; }
.updated { color: var(--muted); margin: 0 0 20px; }
form { display: grid; gap: 12px; margin-top: 16px; }
label { display: grid; gap: 4px; font-weight: 600; font-size: 14px; }
input, select, textarea { font: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--field); color: var(--text); width: 100%; }
textarea { min-height: 100px; }
button { height: 46px; border: 0; border-radius: 12px; background: var(--accent); color: #fff; font: inherit; font-weight: 600; }
.note { color: var(--muted); font-size: 14px; }
.ok { padding: 12px 14px; border-radius: 10px; background: rgba(22, 163, 74, .12); }
.err { padding: 12px 14px; border-radius: 10px; background: rgba(225, 29, 72, .12); }