/* Login — paarse gradient, glazen kaart, planeetring links. Eigen CSS. */

:root {
  --auth-ink: #3d1038;
  --auth-muted: rgba(61, 16, 56, 0.72);
  --auth-purple: #7c1172;
  --auth-purple-deep: #5a0c53;
  --auth-gold: #fdc400;
  --auth-line: rgba(90, 12, 83, 0.22);
  --auth-field: rgba(255, 255, 255, 0.62);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: var(--font-sans);
  color: var(--auth-ink);
  background: #140214;
}

/* Login home: animated gradient + halo */
body.auth-body--motion {
  background:
    radial-gradient(ellipse 46% 36% at 0% 0%, #070006 0%, rgba(7, 0, 6, 0.72) 32%, rgba(7, 0, 6, 0) 70%),
    radial-gradient(ellipse 58% 46% at 68% 58%, #d27ac6 0%, rgba(210, 122, 198, 0) 60%),
    linear-gradient(155deg, #140214 0%, #5a1248 38%, #8e2c78 64%, #2a0624 100%);
}

/* Forgot / reset / etc: static photo matching the motion look */
body.auth-body--still {
  background-color: #140214;
  background-image: var(--auth-still);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

body.auth-body--still::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 40% at 10% 20%, rgba(7, 0, 6, 0.25) 0%, transparent 70%),
    linear-gradient(180deg, rgba(20, 2, 20, 0.18) 0%, rgba(20, 2, 20, 0.32) 100%);
}

body.auth-body--still .auth {
  z-index: 1;
}

.auth {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5.5rem 1.25rem 5rem;
  overflow: hidden;
  perspective: 1400px;
}

.auth__halo {
  position: absolute;
  width: 125vmax;
  height: 125vmax;
  left: -42vmax;
  top: 50%;
  margin-top: -62.5vmax;
  pointer-events: none;
  transform-style: preserve-3d;
  animation: auth-halo-planet 14s ease-in-out infinite;
}

.auth__halo::before {
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(253, 196, 0, 0.42) 0%, rgba(156, 40, 145, 0.28) 32%, transparent 64%);
  filter: blur(10px);
}

.auth__halo-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 20deg,
    transparent 0 52%,
    rgba(253, 196, 0, 0.15) 64%,
    #fdc400 76%,
    #fff6d4 82%,
    #9a228e 90%,
    transparent 100%
  );
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 63%, #000 67.5%, transparent 71%);
  mask: radial-gradient(circle, transparent 60%, #000 63%, #000 67.5%, transparent 71%);
  filter: drop-shadow(0 0 28px rgba(253, 196, 0, 0.45));
  animation: auth-halo-spin 28s linear infinite;
}

.auth__halo-ring--soft {
  inset: -4%;
  background: conic-gradient(
    from 140deg,
    transparent 0 60%,
    rgba(255, 255, 255, 0.55) 74%,
    rgba(124, 17, 114, 0.35) 86%,
    transparent 100%
  );
  -webkit-mask: radial-gradient(circle, transparent 64%, #000 67%, #000 70%, transparent 74%);
  mask: radial-gradient(circle, transparent 64%, #000 67%, #000 70%, transparent 74%);
  filter: blur(5px);
  opacity: 0.9;
  animation-duration: 42s;
  animation-direction: reverse;
}

@keyframes auth-halo-spin {
  to { transform: rotateZ(360deg); }
}

@keyframes auth-halo-planet {
  0% { transform: rotateX(72deg) rotateY(-24deg) rotateZ(-8deg) scale(0.42); }
  50% { transform: rotateX(48deg) rotateY(16deg) rotateZ(12deg) scale(1.05); }
  100% { transform: rotateX(72deg) rotateY(-24deg) rotateZ(-8deg) scale(0.42); }
}

@media (max-width: 800px) {
  .auth__halo {
    left: -70vmax;
    animation-name: auth-halo-planet-mobile;
  }
}

@keyframes auth-halo-planet-mobile {
  0% { transform: rotateX(70deg) rotateZ(0deg) scale(0.34); }
  50% { transform: rotateX(50deg) rotateZ(10deg) scale(0.62); }
  100% { transform: rotateX(70deg) rotateZ(0deg) scale(0.34); }
}

@property --auth-beam {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@media (prefers-reduced-motion: reduce) {
  .auth__halo,
  .auth__halo-ring,
  .auth__panel::before {
    animation: none;
  }

  .auth__halo {
    transform: rotateX(62deg) scale(0.7);
  }

  .auth__field label,
  .auth__field input,
  .auth__label-text,
  .auth__label-ico,
  .auth__swap .auth__ico {
    transition: none;
  }

  .auth__panel::before {
    --auth-beam: -40deg;
  }
}


.auth__panel {
  /* Kinetics: amber/gold + bone/wit tip. */
  --beam-base: rgba(255, 255, 255, 0.1);
  --beam-gold: transparent;
  --beam-bone: rgba(255, 255, 255, 0.72);
  position: relative;
  z-index: 1;
  isolation: isolate;
  width: min(100%, 26.5rem);
  padding: 2.7rem 2.25rem 2.45rem;
  border-radius: 1.35rem; /* kwartcirkel, fallback */
  border: 0;
  background: rgba(247, 232, 242, 0.72);
  box-shadow: 0 24px 60px -32px rgba(90, 12, 83, 0.55);
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
}

/* Bij invullen: gold + wit zoals Kinetics (#FF8A00 / #EDE9E0 → Exedo-gold). */
.auth__panel.is-filling {
  --beam-base: rgba(253, 196, 0, 0.12);
  --beam-gold: #fdc400;
  --beam-bone: #ede9e0;
}

/*
  Border Beam (Kinetics-stijl): soft lichtboog alleen in de rand.
  Mask snijdt het midden weg — geen shine over het vlak.
*/
.auth__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  corner-shape: inherit;
  padding: 1.5px;
  pointer-events: none;
  background: conic-gradient(
    from var(--auth-beam),
    var(--beam-base) 0deg,
    var(--beam-base) 259deg,
    var(--beam-gold) 302deg,
    var(--beam-bone) 324deg,
    var(--beam-base) 346deg,
    var(--beam-base) 360deg
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: auth-border-beam 20s linear infinite;
  transition: background 0.45s ease;
}

@keyframes auth-border-beam {
  to {
    --auth-beam: 360deg;
  }
}

.auth__panel > * {
  position: relative;
  z-index: 1;
}

/* Laatste blok in het kader: geen extra ondermarge (paneel-padding is genoeg). */
.auth__panel > :last-child {
  margin-bottom: 0;
}

.auth__top {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  height: 5.25rem;
  background: none;
}

.auth__top-tools {
  display: flex;
  align-items: center;
  gap: 0.85rem 1.1rem;
}

.auth__langbar {
  position: absolute;
  z-index: 4;
  top: 1rem;
  right: 1rem;
}

/* Language dropdown (last nav item / top-right on still pages) */
.auth__langdd {
  position: relative;
}

.auth__langdd-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.55rem;
  padding: 0 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.95);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.auth__langdd-toggle:hover,
.auth__langdd.is-open .auth__langdd-toggle {
  background: rgba(255, 255, 255, 0.92);
  border-color: transparent;
  color: #3d1038;
}

.auth__langdd-caret {
  font-size: 0.65rem;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.auth__langdd.is-open .auth__langdd-caret {
  transform: rotate(180deg);
}

.auth__langdd-menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 5;
  min-width: 9.5rem;
  padding: 0.35rem;
  border-radius: 0.85rem;
  background: rgba(255, 250, 252, 0.97);
  border: 1px solid rgba(232, 214, 228, 0.95);
  box-shadow: 0 16px 40px -20px rgba(90, 12, 83, 0.55);
  transform-origin: top right;
  opacity: 0;
  transform: translateY(-0.35rem) scale(0.96);
  pointer-events: none;
  transition:
    opacity 0.22s ease,
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.auth__langdd.is-open .auth__langdd-menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.auth__langdd-menu[hidden] {
  display: block !important;
  visibility: hidden;
}

.auth__langdd.is-open .auth__langdd-menu[hidden] {
  visibility: visible;
}

.auth__langdd-option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.7rem;
  border-radius: 0.6rem;
  color: #3d1038;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: background 0.18s ease;
}

.auth__langdd-option:hover {
  background: rgba(124, 17, 114, 0.08);
  text-decoration: none;
}

.auth__langdd-option.is-active {
  background: rgba(124, 17, 114, 0.12);
  color: #5a0c53;
}

.auth__langdd-name {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0;
  color: rgba(61, 16, 56, 0.62);
}

.auth__nav .auth__langdd-toggle {
  min-height: 2.55rem;
}

/* Light pages (dashboard): purple outline toggle */
body:not(.auth-body--motion):not(.auth-body--still) .auth__langdd-toggle {
  border-color: rgba(90, 12, 83, 0.22);
  background: rgba(255, 255, 255, 0.92);
  color: #5a0c53;
}

body:not(.auth-body--motion):not(.auth-body--still) .auth__langdd-toggle:hover,
body:not(.auth-body--motion):not(.auth-body--still) .auth__langdd.is-open .auth__langdd-toggle {
  background: #5a0c53;
  border-color: #5a0c53;
  color: #fff;
}

.auth__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 100%;
  max-width: 90rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.auth__brand {
  display: flex;
  align-self: flex-end;
}

.auth__brand img {
  display: block;
  height: 3.5rem;
  width: auto;
}

.auth__nav {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-right: 6.25rem;
}

.auth__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 2.75rem;
  padding: 0 0.875rem;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.auth__pill:hover {
  border-color: var(--auth-purple);
  background: #fff;
  color: var(--auth-purple);
}

.auth__pill:focus-visible {
  outline: 2px solid var(--auth-gold);
  outline-offset: 2px;
}

.auth__swap {
  position: relative;
  width: 0.875rem;
  height: 0.875rem;
  flex: none;
}

.auth__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.875rem;
  height: 0.875rem;
  flex: none;
  font-size: 0.875rem;
  line-height: 1;
}

.auth__swap .auth__ico {
  position: absolute;
  inset: 0;
  transition: opacity 0.15s ease;
}

.auth__ico--arrow {
  opacity: 0;
}

.auth__pill:hover .auth__ico--mark,
.auth__pill:focus-visible .auth__ico--mark {
  opacity: 0;
}

.auth__pill:hover .auth__ico--arrow,
.auth__pill:focus-visible .auth__ico--arrow {
  opacity: 1;
}

@media (min-width: 40rem) {
  .auth__bar,
  .auth__legal-bar {
    padding: 0 2rem;
  }

  .auth__bar {
    gap: 1.5rem;
  }

  .auth__brand img {
    height: 4rem;
  }

  .auth__nav {
    gap: 0.5rem;
    margin-right: 6.5rem;
  }

  .auth__pill {
    gap: 0.5rem;
    padding: 0 1rem;
  }
}

@media (min-width: 64rem) {
  .auth__bar,
  .auth__legal-bar {
    padding: 0 2.5rem;
  }
}

@media (max-width: 52rem) {
  .auth__nav {
    margin-right: 0;
  }
}

.auth__stack {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: min(100%, 26.5rem);
}

.auth__stack .auth__panel {
  width: 100%;
}

.auth__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  margin: 0 0 0.7rem 0.15rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
}

.auth__back i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.9rem;
  height: 0.9rem;
  font-size: 0.78rem;
  line-height: 1;
  /* FA glyphs sit optically high vs text; nudge down to match cap height */
  transform: translateY(0.06em);
}

.auth__back:hover {
  color: #fff;
}

.auth__title {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 4.5vw, 1.85rem);
  font-weight: 650;
  letter-spacing: -0.03em;
  text-align: center;
  color: var(--auth-purple);
  white-space: nowrap;
}

.auth__lead {
  margin: 0.55rem 0 1.65rem;
  color: #111;
  text-align: center;
  line-height: 1.5;
  font-size: 0.98rem;
  text-wrap: balance;
}

.auth__lead--error {
  margin: -0.65rem 0 1.25rem;
  color: #b00020;
  font-size: 0.92rem;
}

/* Link onder een knop/formulier (bijv. Terug naar inloggen). */
.auth__lead--foot {
  margin: 1.25rem 0 0;
}

.auth__resend-wait {
  margin: 0.85rem 0 0;
  font-size: 0.875rem;
  color: rgba(61, 16, 56, 0.55);
}

.auth__form-extra {
  margin-top: 1rem;
  text-align: center;
}

.auth__channel-links {
  margin: 0.85rem 0 0;
  text-align: center;
}

.auth__channel-links + .auth__resend-wait {
  margin-top: 0.65rem;
}

.auth__link-btn {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--auth-purple);
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
}

.auth__link-btn:hover {
  text-decoration: underline;
}

.auth__details {
  margin-top: 1.5rem;
  text-align: center;
}

.auth__details > summary {
  cursor: pointer;
  list-style: none;
}

.auth__details > summary::-webkit-details-marker {
  display: none;
}

.auth__codes {
  list-style: none;
  margin: 1.25rem 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  line-height: 1.8;
  text-align: center;
}

.auth__code-once {
  margin: 1.25rem 0;
  padding: 0.9rem 1rem;
  border-radius: 0.75rem;
  background: rgba(124, 17, 114, 0.08);
  border: 1px solid rgba(124, 17, 114, 0.18);
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  color: #3d1038;
  word-break: break-all;
}

.auth__code-once--words {
  font-family: inherit;
  font-size: clamp(1.25rem, 4vw, 1.65rem);
  letter-spacing: 0.02em;
  word-break: normal;
  line-height: 1.35;
}

.auth__hint {
  margin: 0 0 1rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(61, 16, 56, 0.62);
}

.auth__submit--link {
  display: inline-block;
  width: auto;
  min-width: 12rem;
  text-align: center;
  text-decoration: none;
}

.auth__panel--wide {
  max-width: 36rem;
}

.auth__section-title {
  margin: 1.5rem 0 0.5rem;
  font-size: 1rem;
  font-weight: 650;
  color: #111;
  text-align: left;
}

.auth__logout {
  margin-top: 2rem;
}

.auth__control.is-error input {
  border-color: #c62828;
  box-shadow: 0 0 0 1px rgba(198, 40, 40, 0.2);
}

.auth__control.is-error .auth__label-ico {
  color: #c62828;
}

.auth__control.is-error:focus-within input {
  border-color: #c62828;
  box-shadow: 0 0 0 2px rgba(198, 40, 40, 0.22);
}

.auth__field {
  margin-bottom: 0.95rem;
}

.auth__control {
  position: relative;
}

.auth__field label {
  position: absolute;
  left: 0.95rem;
  top: 50%;
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(61, 16, 56, 0.48);
  pointer-events: none;
  transform: translateY(-50%);
  transform-origin: left center;
}

.auth__label-text {
  display: inline-block;
}

.auth__label-ico {
  display: none;
}

.auth__field input {
  width: 100%;
  height: 3.15rem;
  border: 1px solid var(--auth-line);
  border-radius: 0.85rem; /* kwartcirkel, fallback */
  background: var(--auth-field);
  color: #3d1038;
  font: inherit;
  font-size: 1rem;
  line-height: 1.2;
  padding: 0 0.95rem;
  outline: none;
}

/*
  Actief: label wordt icoon links in het veld.
  Later zwevend label: verwissel --icons voor --float op .auth__panel.
*/
.auth__panel--icons .auth__field label {
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  transform: none;
  top: 0;
}

.auth__panel--icons .auth__label-text {
  position: absolute;
  left: 0.95rem;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.auth__panel--icons .auth__label-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0.95rem;
  top: 50%;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1;
  color: rgba(90, 12, 83, 0.72);
  opacity: 0;
  transform: translateY(-50%) scale(0.82);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.auth__panel--icons .auth__field input {
  transition: padding-left 0.18s ease;
}

/*
  Filled state: hide label text completely (not only opacity) so autofill
  never paints under "Gebruikersnaam…" / "Wachtwoord".
  :not(:placeholder-shown) works even when JS cannot read password values.
  :-webkit-autofill covers Chrome/Edge before value is exposed to JS.
*/
.auth__panel--icons .auth__control.is-up .auth__label-text,
.auth__panel--icons .auth__control:focus-within .auth__label-text,
.auth__panel--icons .auth__control:has(input:not(:placeholder-shown)) .auth__label-text,
.auth__panel--icons .auth__control:has(input:-webkit-autofill) .auth__label-text {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%) translateX(-0.35rem);
  pointer-events: none;
}

.auth__panel--icons .auth__control.is-up .auth__label-ico,
.auth__panel--icons .auth__control:focus-within .auth__label-ico,
.auth__panel--icons .auth__control:has(input:not(:placeholder-shown)) .auth__label-ico,
.auth__panel--icons .auth__control:has(input:-webkit-autofill) .auth__label-ico {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) scale(1);
}

.auth__panel--icons .auth__control.is-up input,
.auth__panel--icons .auth__control:focus-within input,
.auth__panel--icons .auth__control:has(input:not(:placeholder-shown)) input,
.auth__panel--icons .auth__control:has(input:-webkit-autofill) input {
  padding-left: 2.65rem;
}

.auth__panel--icons .auth__control:has(input:not(:placeholder-shown)) label,
.auth__panel--icons .auth__control:has(input:-webkit-autofill) label,
.auth__panel--icons .auth__control.is-up label {
  pointer-events: none;
}

/*
  Bewaard: zwevend label (Apple-achtig).
  Gebruik: class="auth__panel auth__panel--float" i.p.v. --icons.
*/
.auth__panel--float .auth__field label {
  transition: top 0.18s ease, transform 0.18s ease, font-size 0.18s ease, color 0.18s ease;
}

.auth__panel--float .auth__label-ico {
  display: none;
}

.auth__panel--float .auth__control.is-up label,
.auth__panel--float .auth__control:focus-within label {
  top: 0.42rem;
  font-size: 0.68rem;
  font-weight: 650;
  color: rgba(90, 12, 83, 0.72);
  transform: translateY(0);
}

.auth__panel--float .auth__field input {
  transition: padding-top 0.18s ease;
}

.auth__panel--float .auth__control.is-up input,
.auth__panel--float .auth__control:focus-within input {
  padding-top: 0.72rem;
}

@keyframes auth-onauto {
  from { opacity: 1; }
}

.auth__field input:-webkit-autofill {
  animation: auth-onauto 0.01s;
}

.auth__field input::placeholder {
  color: transparent;
}

.auth__field input:focus {
  border-color: rgba(124, 17, 114, 0.65);
  box-shadow: 0 0 0 4px rgba(253, 196, 0, 0.28);
}

.auth__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.35rem 0 1.25rem;
  font-size: 0.92rem;
}

.auth__check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #111;
}

.auth__check input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--auth-purple);
}

.auth__link {
  color: var(--auth-purple);
  text-decoration: none;
  font-weight: 650;
}

.auth__legal {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0 0 1.85rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
}

.auth__legal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  max-width: 90rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.auth__legal p {
  margin: 0;
}

.auth__legal nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
}

.auth__legal a {
  color: inherit;
  text-decoration: none;
}

.auth__legal a:hover {
  text-decoration: underline;
}

.auth__link:hover {
  text-decoration: underline;
}

.auth__submit {
  width: 100%;
  border: 0;
  border-radius: 0.9rem; /* kwartcirkel, fallback */
  padding: 0.9rem 1rem;
  font: inherit;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(180deg, #9a308c 0%, var(--auth-purple) 55%, var(--auth-purple-deep) 100%);
  box-shadow: 0 12px 32px -16px rgba(90, 12, 83, 0.85);
}

.auth__submit:hover {
  filter: brightness(1.06);
}

.auth__submit:focus-visible {
  outline: 2px solid var(--auth-gold);
  outline-offset: 3px;
}

.auth__pass {
  position: relative;
}

/*
  Avast / Norton Passwords inject #password-manager-field-* widgets.
  Username: dim. Password: hide (clashes with our reveal control).
  Chrome/Google strong-password UI is browser chrome, not these IDs.
*/
.auth__control [id^="password-manager-field"] {
  opacity: 0.5 !important;
}

.auth__pass [id^="password-manager-field"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.auth__pass input {
  padding-right: 2.75rem;
}

.auth__reveal {
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--auth-muted);
  cursor: pointer;
  padding: 0;
  touch-action: none;
  user-select: none;
}

.auth__reveal[hidden] {
  display: none;
}

.auth__reveal-ico {
  font-size: 1.15rem;
  line-height: 1;
}

.auth__reveal:hover {
  color: var(--auth-purple);
}

.auth__reveal:focus-visible {
  outline: 2px solid var(--auth-gold);
  outline-offset: 2px;
}

/* Apple-achtige squircle. Zonder support blijft de border-radius hierboven. */
@supports (corner-shape: squircle) {
  .auth__panel,
  .auth__panel::before {
    border-radius: 1.85rem;
    corner-shape: squircle;
  }

  .auth__field input,
  .auth__submit {
    border-radius: 1.05rem;
    corner-shape: squircle;
  }
}