:root {
  --bg: #f8fafb;
  --card: #fff;
  --border: #d8dee4;
  --text: #1f2933;
  --muted: #5f6b7a;
  --primary: #0b6e99;
  --ok: #027a48;
}

* { box-sizing: border-box; }
body {
  margin: 0 auto;
  max-width: 720px;
  font-family: system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  padding: 1.5rem;
}
header h1 { margin: 0 0 0.25rem; }
.subtitle { color: var(--muted); }
form {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem;
  margin-top: 1rem;
}
fieldset {
  border: none;
  padding: 0;
  margin: 0 0 1.25rem;
}
legend { font-weight: 600; margin-bottom: 0.75rem; }
label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
  font-size: 0.95rem;
}
.hint { color: var(--muted); font-size: 0.8rem; font-weight: normal; }
input, textarea, select, button {
  font: inherit;
  padding: 0.55rem 0.75rem;
  border-radius: 6px;
  border: 1px solid var(--border);
}
button { cursor: pointer; background: #eef2f6; margin-bottom: 0.75rem; }
button.primary { background: var(--primary); color: #fff; border-color: var(--primary); width: 100%; }
.checkbox { flex-direction: row; align-items: center; gap: 0.5rem; }
.message { margin-top: 1rem; padding: 1rem; border-radius: 8px; }
.message.ok { background: #d1fadf; color: var(--ok); }
.message.err { background: #fee4e2; color: #912018; }
.hidden { display: none; }