*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; min-height: 100dvh; font-family: var(--font); color: var(--ink); background: var(--page);
  display: grid; place-items: center; padding: var(--s-4);
  background-image: radial-gradient(1200px 600px at 20% -10%, color-mix(in srgb, var(--series-1) 14%, transparent), transparent 60%),
                    radial-gradient(900px 500px at 100% 100%, color-mix(in srgb, var(--series-7) 12%, transparent), transparent 60%);
}
.card {
  width: min(420px, 100%); background: var(--surface); border: 1px solid var(--hairline); border-radius: 20px;
  box-shadow: var(--shadow-3); padding: var(--s-7) var(--s-6); animation: fade-up var(--dur-4) var(--ease-out) both;
}
.logo { width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(135deg, var(--series-1), var(--series-7)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 22px; margin-bottom: var(--s-4); box-shadow: var(--shadow-2); }
h1 { margin: 0 0 var(--s-1); font-size: var(--fs-5); letter-spacing: -0.02em; }
p.lead { margin: 0 0 var(--s-6); color: var(--ink-2); }
label { display: block; font-size: var(--fs-1); color: var(--ink-2); margin: var(--s-4) 0 6px; font-weight: 550; }
input {
  width: 100%; border: 1px solid var(--hairline); border-radius: var(--r-2); padding: 11px 13px; font: inherit; font-size: var(--fs-3);
  background: var(--surface-2); color: var(--ink); outline: none; transition: border-color var(--dur-2), background var(--dur-2), box-shadow var(--dur-2);
}
input:focus { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
button {
  width: 100%; margin-top: var(--s-6); border: 0; border-radius: var(--r-2); padding: 12px; font: inherit; font-size: var(--fs-3); font-weight: 600;
  background: var(--accent); color: var(--accent-ink); cursor: pointer; transition: transform var(--dur-1), filter var(--dur-1);
}
button:hover { filter: brightness(1.08); }
button:active { transform: scale(0.98); }
button:disabled { opacity: 0.6; cursor: wait; }
.error { color: var(--critical); font-size: var(--fs-1); margin-top: var(--s-3); min-height: 1.2em; }
.foot { margin-top: var(--s-5); color: var(--muted); font-size: var(--fs-0); text-align: center; }
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }