:root {
  --auth-accent: #6d5dfc;
  --auth-accent-2: #22d3ee;
  --auth-bg: #eef2ff;
  --auth-panel: rgba(255, 255, 255, .82);
  --auth-border: rgba(15, 23, 42, .1);
  --auth-glow: rgba(109, 93, 252, .22);
}

[data-bs-theme="dark"] {
  --auth-bg: #070b16;
  --auth-panel: rgba(15, 23, 42, .78);
  --auth-border: rgba(148, 163, 184, .16);
  --auth-glow: rgba(109, 93, 252, .3);
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 15%, var(--auth-glow), transparent 32rem),
    radial-gradient(circle at 85% 80%, rgba(34, 211, 238, .14), transparent 28rem),
    var(--auth-bg);
  transition: background-color .25s ease;
}

.auth-shell { position: relative; z-index: 1; }
.auth-theme-toggle {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 2;
  border-color: var(--auth-border);
  backdrop-filter: blur(14px);
}
.auth-card {
  overflow: hidden;
  border: 1px solid var(--auth-border);
  border-radius: 1.4rem;
  background: var(--auth-panel);
  box-shadow: 0 1.5rem 4rem rgba(2, 6, 23, .2);
  backdrop-filter: blur(22px);
}
.auth-mark {
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 1.25rem;
  place-items: center;
  border-radius: 1rem;
  color: #fff;
  font-size: 1.35rem;
  background: linear-gradient(135deg, var(--auth-accent), var(--auth-accent-2));
  box-shadow: 0 .75rem 2rem var(--auth-glow);
}
.auth-title { font-weight: 750; letter-spacing: -.035em; }
.form-control {
  min-height: 3.15rem;
  border-radius: .8rem;
  border-color: var(--auth-border);
  background-color: color-mix(in srgb, var(--auth-panel) 80%, transparent);
}
.form-control:focus {
  border-color: var(--auth-accent);
  box-shadow: 0 0 0 .25rem var(--auth-glow);
}
.auth-submit {
  min-height: 3.15rem;
  border: 0;
  border-radius: .8rem;
  font-weight: 650;
  background: linear-gradient(135deg, var(--auth-accent), #5145cd);
  box-shadow: 0 .65rem 1.6rem var(--auth-glow);
}
.auth-submit:hover { filter: brightness(1.08); }