* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #f3f5f2; color: #1c2b24;
}
.wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.card {
  width: 100%; max-width: 420px; background: #fff; border-radius: 16px; padding: 32px 28px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
h1 { margin: 0; color: #1F5D4C; font-size: 1.8rem; }
.sub { margin: 4px 0 24px; color: #5a6b62; }
label { display: block; font-size: .85rem; font-weight: 600; margin: 14px 0 6px; color: #2c3b34; }
input {
  width: 100%; padding: 11px 12px; border: 1px solid #d7ddda; border-radius: 8px;
  font-size: 1rem; background: #fafbfa;
}
input:focus { outline: none; border-color: #1F5D4C; background: #fff; }
.subdomain-field { display: flex; align-items: center; gap: 6px; }
.subdomain-field input { flex: 1; }
.subdomain-field span { color: #5a6b62; font-size: .9rem; white-space: nowrap; }
.hint { margin: 4px 0 0; font-size: .78rem; color: #8a988f; }
button {
  width: 100%; margin-top: 24px; padding: 13px; border: none; border-radius: 8px;
  background: #1F5D4C; color: #fff; font-size: 1rem; font-weight: 600; cursor: pointer;
}
button:hover { background: #184a3d; }
button:disabled { opacity: .6; cursor: not-allowed; }
.msg { min-height: 20px; margin-top: 12px; font-size: .88rem; color: #c0392b; text-align: center; }
.success { text-align: center; }
.success h2 { color: #1F5D4C; }
.success a {
  display: inline-block; margin-top: 16px; color: #1F5D4C; font-weight: 600; text-decoration: none;
}