:root {
  --auth-background: #f4f7fb;
  --auth-surface: rgba(255, 255, 255, 0.94);
  --auth-surface-muted: #edf3f8;
  --auth-foreground: #1f2733;
  --auth-muted: #6d7987;
  --auth-border: #d3dbe4;
  --auth-border-strong: #bcc7d4;
  --auth-primary: #1f2733;
  --auth-primary-hover: #141b25;
  --auth-ring: rgba(31, 39, 51, 0.14);
  --auth-shadow: 0 24px 64px rgba(23, 32, 45, 0.1);
}

body.auth-body {
  font-family: "Manrope", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(59, 130, 246, 0.08), transparent 28%),
    linear-gradient(180deg, #f8fbff 0%, var(--auth-background) 28%, var(--auth-background) 100%);
  color: var(--auth-foreground);
}

.auth-shell {
  position: relative;
}

.synthetic-grid {
  background-image: radial-gradient(rgba(109, 121, 135, 0.08) 1px, transparent 1px);
  background-size: 40px 40px;
}

.brand-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--auth-foreground);
  text-decoration: none;
}

.brand-mark,
.auth-shell h1,
.auth-shell h2,
.auth-shell h3 {
  font-family: "Sora", sans-serif;
}

.brand-mark {
  font-size: 1.875rem;
  line-height: 1;
  letter-spacing: -0.05em;
}

.brand-mark strong {
  font-weight: 800;
}

.brand-mark span {
  font-weight: 600;
  color: rgba(31, 39, 51, 0.82);
}

.brand-tagline {
  margin-top: 0.75rem;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--auth-muted);
}

.login-card,
.glass-panel,
.auth-card {
  border: 1px solid rgba(188, 199, 212, 0.88);
  border-radius: 28px;
  background: var(--auth-surface);
  box-shadow: var(--auth-shadow);
  backdrop-filter: blur(14px);
}

.input-field {
  background: #ffffff;
  border: 1px solid var(--auth-border);
  color: var(--auth-foreground);
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    background-color 0.2s;
}

.input-field:focus {
  outline: none;
  border-color: rgba(31, 39, 51, 0.3);
  box-shadow: 0 0 0 3px var(--auth-ring);
}

.input-field::placeholder {
  color: #98a3af;
}

.btn-primary {
  border: 1px solid var(--auth-primary);
  border-radius: 9999px;
  background: var(--auth-primary);
  color: #ffffff;
  font-weight: 700;
  transition:
    transform 0.2s,
    box-shadow 0.2s,
    background-color 0.2s,
    border-color 0.2s;
  box-shadow: 0 14px 32px rgba(20, 27, 37, 0.16);
}

.btn-primary:hover {
  transform: translateY(-1px);
  background: var(--auth-primary-hover);
  border-color: var(--auth-primary-hover);
  box-shadow: 0 18px 38px rgba(20, 27, 37, 0.2);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.alert {
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 14px;
  display: none;
}

.alert-error {
  background: #fff1f2;
  border: 1px solid #fecdd3;
  color: #be123c;
}

.alert-success {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #047857;
}

.auth-link {
  color: #1f4fbf;
  font-weight: 600;
  text-decoration: none;
}

.auth-link:hover {
  color: #16398b;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.auth-footnote {
  color: var(--auth-muted);
}

.auth-requirements {
  border: 1px solid var(--auth-border);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(237, 243, 248, 0.88), rgba(255, 255, 255, 0.94));
}

.strength-bar {
  transition:
    width 0.3s,
    background-color 0.3s;
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.auth-shell .text-slate-300,
.auth-shell .text-slate-700,
.auth-shell .text-slate-900 {
  color: var(--auth-foreground);
}

.auth-shell .text-slate-400,
.auth-shell .text-slate-500 {
  color: var(--auth-muted);
}

.auth-shell .text-blue-400 {
  color: #2563eb;
}

.auth-shell .text-green-400 {
  color: #047857;
}

.auth-shell .text-red-400 {
  color: #be123c;
}

.auth-shell .bg-blue-500\/10 {
  background: rgba(37, 99, 235, 0.08);
}

.auth-shell .bg-green-500\/10 {
  background: rgba(4, 120, 87, 0.08);
}

.auth-shell .bg-red-500\/10 {
  background: rgba(190, 18, 60, 0.08);
}

.auth-shell .bg-slate-700 {
  background: #dbe4ec;
}

.auth-shell .hover\:text-blue-300:hover,
.auth-shell .hover\:text-blue-400:hover,
.auth-shell .hover\:text-blue-700:hover,
.auth-shell .hover\:text-slate-300:hover,
.auth-shell .hover\:text-slate-600:hover,
.auth-shell .hover\:text-slate-700:hover {
  color: var(--auth-primary-hover);
}

@media (max-width: 640px) {
  .brand-mark {
    font-size: 1.72rem;
  }
}