:root {
  --background: oklch(0.2303 0.0562 273.8097);
  --foreground: oklch(0.9842 0.0034 247.8575);
  --card: oklch(0.3006 0.0623 273.3169);
  --primary: oklch(0.6866 0.206 36.4134);
  --primary-foreground: oklch(1 0 0);
  --muted-foreground: oklch(0.7107 0.0351 256.7878);
  --border: oklch(0.3717 0.0392 257.287);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --success: oklch(0.6959 0.1491 162.4796);
  --radius: 0.75rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 16px;
  background: var(--background);
  color: var(--foreground);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.card {
  width: 100%;
  max-width: 448px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: 0 4px 10px 0 hsl(0 0% 0% / 0.1);
}

h1 { margin: 0 0 8px; text-align: center; font-size: 1.125rem; font-weight: 600; }
.description { margin: 0 0 20px; text-align: center; font-size: 0.875rem; color: var(--muted-foreground); }
h1:not(:has(+ .description)) { margin-bottom: 20px; }

form { display: flex; flex-direction: column; gap: 16px; }
label { display: flex; flex-direction: column; gap: 8px; font-size: 0.875rem; font-weight: 500; }

input {
  width: 100%;
  height: 36px;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.875rem;
}
input:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: calc(var(--radius) - 2px);
  background: var(--primary);
  color: var(--primary-foreground);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}
button:disabled { opacity: 0.5; cursor: default; }
button.outline { background: transparent; color: inherit; border-color: var(--border); }
button.outline:hover:not(:disabled) { background: var(--border); }
button svg { width: 16px; height: 16px; fill: currentColor; }

.socials { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.separator { margin: 12px 0; text-align: center; font-size: 0.875rem; color: var(--muted-foreground); }
.center { text-align: center; }
.footer { margin: 20px 0 0; text-align: center; font-size: 0.875rem; }
a { color: #3b82f6; text-decoration: none; }
a:hover { text-decoration: underline; }
.small { font-size: 0.875rem; }

.message { margin: 0 0 16px; padding: 10px 12px; border-radius: calc(var(--radius) - 2px); font-size: 0.875rem; border: 1px solid; }
.message[hidden] { display: none; }
.message.error { color: var(--destructive); border-color: var(--destructive); }
.message.success { color: var(--success); border-color: var(--success); }