* { box-sizing: border-box; }
body {
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #f5f5f7;
  margin: 0;
  padding: 2rem 1rem;
}
.form-container {
  max-width: 480px;
  margin: 0 auto;
  background: #fff;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
h1 { font-size: 1.4rem; margin-bottom: 1.5rem; }
.field-group { margin-bottom: 1rem; display: flex; flex-direction: column; }
label { font-size: 0.85rem; margin-bottom: 0.3rem; color: #333; }
input, select {
  padding: 0.6rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
}
input.invalid { border-color: #d32f2f; }
input[readonly] { background: #f0f0f0; }
.field-error {
  color: #d32f2f;
  font-size: 0.8rem;
  min-height: 1.1rem;
  margin-top: 0.2rem;
}
.checkbox-group label { flex-direction: row; align-items: center; gap: 0.5rem; display: flex; }
.phone-row { display: flex; gap: 0.5rem; }
.phone-row select { flex: 0 0 auto; width: 6.5rem; }
.phone-row input { flex: 1 1 auto; min-width: 0; }
.form-message { margin: 1rem 0; font-size: 0.9rem; }
.form-message.error { color: #d32f2f; }
.form-message.success { color: #2e7d32; }
.form-message.pending { color: #ed6c02; }
button {
  width: 100%;
  padding: 0.8rem;
  background: #4a1a6c;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
}
button:disabled { background: #999; cursor: not-allowed; }