body {
  display: grid;
  place-items: center;
  padding: 1rem;
  background:
    radial-gradient(50rem 28rem at 15% -10%, var(--ground-2), transparent 70%),
    radial-gradient(36rem 24rem at 100% 110%, var(--accent-soft), transparent 70%),
    var(--ground);
}

form {
  position: relative;
  z-index: 1;
  width: min(24rem, 100%);
  display: grid;
  gap: 1.1rem;
  padding: 2rem 1.75rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1.5rem;
  box-shadow: var(--shadow-lg);
}

.brand { display: grid; justify-items: center; gap: 0.75rem; text-align: center; margin-bottom: 0.25rem; }
.brand-mark { width: 4rem; height: 4rem; filter: drop-shadow(0 8px 14px rgb(14 165 233 / 0.35)); }

h1 { margin: 0; font-size: 1.6rem; letter-spacing: -0.03em; }
.brand p { margin: 0; color: var(--muted); font-size: 0.92rem; }

.field { display: grid; gap: 0.4rem; }
label { font-size: 0.78rem; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

input, button {
  width: 100%;
  padding: 0.8rem 0.9rem;
  border-radius: 0.9rem;
  font: inherit;
}

input {
  border: 1.5px solid var(--border);
  background: var(--surface-2);
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:hover { border-color: var(--border-strong); }
input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }

button {
  border: 0;
  background: linear-gradient(180deg, var(--accent), var(--accent-strong));
  color: white;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 20px -10px var(--accent-strong);
  transition: filter 0.15s, transform 0.1s;
}
button:hover:not(:disabled) { filter: brightness(1.06); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: 0.7; cursor: wait; }
button:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }

.error { margin: 0; padding: 0.65rem 0.8rem; border-radius: 0.8rem; background: var(--err-soft); color: var(--err-ink); font-size: 0.88rem; font-weight: 600; }
.error:empty { display: none; }

.shake { animation: shake 0.35s ease-in-out; }
@keyframes shake {
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}