body { font-family: system-ui, sans-serif; background: #f5f6f8; margin: 0; color: #1c1e21; }
main { max-width: 560px; margin: 2rem auto; padding: 0 1rem; }
form { background: #f0fdf4; border: 1px solid #16a34a; padding: 1.5rem; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.1); display: grid; gap: 1rem; }
label { display: grid; gap: .25rem; font-weight: 600; font-size: .9rem; }
input, textarea { font: inherit; padding: .5rem; border: 1px solid #c4c8ce; border-radius: 4px; }
button { font: inherit; padding: .6rem; border: 0; border-radius: 4px; background: #16a34a; color: #fff; cursor: pointer; }
button:disabled { opacity: .6; }
.hp { position: absolute; left: -9999px; }
#status.ok { color: #15803d; } #status.err { color: #b91c1c; }

nav { position: sticky; top: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .75rem 1rem; background: #2563eb; }
nav a { color: #fff; text-decoration: none; }
nav a:hover { text-decoration: underline; }
nav .brand { font-weight: 700; }
nav ul { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; }