/* ==========================================================================
   Aivora — Authentication Design System
   Shared by: login / forgot-password / reset-password
   --------------------------------------------------------------------------
   1.  Design tokens
   2.  Icon set (CSS masks)
   3.  Base
   4.  Layout shell
   5.  Brand panel
   6.  Form panel
   7.  Auth card
   8.  Fields, inputs, validation
   9.  Checkbox
   10. Buttons, social, divider, footer links
   11. Alerts, success view, password strength
   12. Feature strip
   13. Responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --auth-brand-50:  #f2f0ff;
  --auth-brand-100: #e8e4ff;
  --auth-brand-200: #d6cfff;
  --auth-brand-400: #7d68f5;
  --auth-brand-500: #5b47ef;
  --auth-brand-600: #4c37e4;
  --auth-brand-700: #3f2cc4;

  /* Surfaces */
  --auth-bg:            #f7f7fc;
  --auth-surface:       #ffffff;
  --auth-surface-muted: #f8f8fd;
  --auth-surface-sunk:  #f1f1f8;
  --auth-panel-from:    #fbfaff;
  --auth-panel-to:      #edebfc;

  /* Text */
  --auth-text:       #161a33;
  --auth-text-soft:  #3d4361;
  --auth-text-muted: #6c7391;
  --auth-text-faint: #99a0bb;

  /* Lines + effects */
  --auth-border:        #e6e6f1;
  --auth-border-strong: #d9d9e8;
  --auth-ring:          rgba(91, 71, 239, .14);
  --auth-shadow-sm:     0 1px 2px rgba(23, 24, 56, .05);
  --auth-shadow-md:     0 10px 26px -14px rgba(28, 26, 74, .28);
  --auth-shadow-lg:     0 34px 70px -30px rgba(76, 55, 228, .26), 0 10px 26px -14px rgba(31, 27, 82, .10);
  --auth-shadow-brand:  0 12px 26px -12px rgba(76, 55, 228, .55);

  /* States */
  --auth-danger:       #dd3f5c;
  --auth-danger-soft:  rgba(221, 63, 92, .10);
  --auth-success:      #0f9d69;
  --auth-success-soft: rgba(15, 157, 105, .10);
  --auth-warning:      #dd8b2c;

  /* Brand surfaces */
  --auth-veil:       rgba(255, 255, 255, .92);
  --auth-chip-bg:    rgba(255, 255, 255, .7);
  --auth-strip-from: #fcfbff;
  --auth-strip-to:   #f3f1fd;
  --auth-sparkle:    #6ea6ff;

  /* Radii */
  --auth-radius-sm:   10px;
  --auth-radius-md:   13px;
  --auth-radius-lg:   20px;
  --auth-radius-xl:   26px;
  --auth-radius-pill: 999px;

  /* Fluid rhythm — sized against viewport height so the page always fits */
  --auth-panel-pad-y: clamp(16px, 3.2vh, 44px);
  --auth-panel-pad-x: clamp(20px, 3vw, 60px);
  --auth-card-pad-y:  clamp(20px, 3.4vh, 36px);
  --auth-card-pad-x:  clamp(20px, 2.1vw, 36px);
  --auth-card-width:  clamp(348px, 37vw, 480px);
  --auth-field-gap:   clamp(10px, 1.8vh, 17px);
  --auth-stack:       clamp(11px, 2vh, 19px);
  --auth-input-h:     clamp(42px, 5.8vh, 50px);
  --auth-btn-h:       clamp(44px, 6.2vh, 52px);
  --auth-strip-h:     clamp(60px, 8.4vh, 92px);

  /* Type */
  --auth-font: "Manrope", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --auth-fs-display: clamp(28px, 1.5vw + 1.7vh, 43px);
  --auth-fs-title:   clamp(22px, 3.2vh, 30px);
  --auth-fs-body:    clamp(14px, 1.55vh, 15.5px);
  --auth-fs-label:   13.5px;
  --auth-fs-small:   12.5px;

  --auth-ease: cubic-bezier(.4, 0, .2, 1);

  color-scheme: light;
}


/* --------------------------------------------------------------------------
   2. Icon set — masked SVGs keep the markup clean
   -------------------------------------------------------------------------- */
:root {
  --auth-icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3.2'/%3E%3Cpath d='m3.9 7.6 8.1 5.7 8.1-5.7'/%3E%3C/svg%3E");
  --auth-icon-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.2' y='10' width='15.6' height='10' rx='3'/%3E%3Cpath d='M8 10V7.4a4 4 0 0 1 8 0V10'/%3E%3C/svg%3E");
  --auth-icon-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.2' r='3.6'/%3E%3Cpath d='M4.8 19.6a7.4 7.4 0 0 1 14.4 0'/%3E%3C/svg%3E");
  --auth-icon-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 12S6.1 5.9 12 5.9 21.4 12 21.4 12 17.9 18.1 12 18.1 2.6 12 2.6 12Z'/%3E%3Ccircle cx='12' cy='12' r='2.9'/%3E%3C/svg%3E");
  --auth-icon-eye-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 3.2 20.8 20.8'/%3E%3Cpath d='M10.4 6.2A9.7 9.7 0 0 1 12 6.1c5.9 0 9.4 5.9 9.4 5.9a16.4 16.4 0 0 1-3.5 4.1'/%3E%3Cpath d='M6.4 8.3A16.2 16.2 0 0 0 2.6 12s3.5 6.1 9.4 6.1a9.5 9.5 0 0 0 3.3-.6'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E");
  --auth-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.6 12.4 4.8 4.8L19.4 7.2'/%3E%3C/svg%3E");
  --auth-icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h14m-5.6-5.6L18.5 12l-5.6 5.6'/%3E%3C/svg%3E");
  --auth-icon-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 12h-14m5.6-5.6L5.5 12l5.6 5.6'/%3E%3C/svg%3E");
  --auth-icon-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2 5 6v5.4c0 4.2 2.9 7.6 7 9.4 4.1-1.8 7-5.2 7-9.4V6Z'/%3E%3Cpath d='m9.2 12 2 2 3.6-3.8'/%3E%3C/svg%3E");
  --auth-icon-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M3.4 12h17.2M12 3.4c2.2 2.4 3.3 5.4 3.3 8.6S14.2 18.2 12 20.6c-2.2-2.4-3.3-5.4-3.3-8.6S9.8 5.8 12 3.4Z'/%3E%3C/svg%3E");
  --auth-icon-spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2 13.9 9l5.8 1.9-5.8 1.9L12 18.6 10.1 12.8 4.3 10.9 10.1 9Z'/%3E%3Cpath d='m18.6 16.4.7 2.1 2.1.7-2.1.7-.7 2.1-.7-2.1-2.1-.7 2.1-.7Z'/%3E%3C/svg%3E");
  --auth-icon-support: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.4 14.6V12a7.6 7.6 0 0 1 15.2 0v2.6'/%3E%3Crect x='2.6' y='13.4' width='4' height='6.2' rx='2'/%3E%3Crect x='17.4' y='13.4' width='4' height='6.2' rx='2'/%3E%3C/svg%3E");
  --auth-icon-bolt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M13.7 2 5.3 13.4h5L9.7 22l8.9-11.6h-5.3Z'/%3E%3C/svg%3E");
  --auth-icon-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8.4' cy='12' r='4.4'/%3E%3Cpath d='M12.8 12h8.4m-2.9 0v3.1m-2.7-3.1v2.3'/%3E%3C/svg%3E");
  --auth-icon-brain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2Z'/%3E%3Cpath d='M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2Z'/%3E%3C/svg%3E");
  --auth-icon-star4: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 1.5c.7 5.7 4.8 9.8 10.5 10.5-5.7.7-9.8 4.8-10.5 10.5-.7-5.7-4.8-9.8-10.5-10.5 5.7-.7 9.8-4.8 10.5-10.5Z'/%3E%3C/svg%3E");
  --auth-google: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FFC107' d='M43.6 20.1H42V20H24v8h11.3c-1.6 4.7-6.1 8-11.3 8-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34 6.1 29.3 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20 20-8.9 20-20c0-1.3-.1-2.6-.4-3.9z'/%3E%3Cpath fill='%23FF3D00' d='m6.3 14.7 6.6 4.8C14.7 15.1 19 12 24 12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34 6.1 29.3 4 24 4 16.3 4 9.7 8.3 6.3 14.7z'/%3E%3Cpath fill='%234CAF50' d='M24 44c5.2 0 9.9-2 13.4-5.2l-6.2-5.2C29.2 35.1 26.7 36 24 36c-5.2 0-9.6-3.3-11.3-7.9l-6.5 5C9.5 39.6 16.2 44 24 44z'/%3E%3Cpath fill='%231976D2' d='M43.6 20.1H42V20H24v8h11.3c-.8 2.2-2.2 4.2-4.1 5.6l6.2 5.2C36.9 40.2 44 35 44 24c0-1.3-.1-2.6-.4-3.9z'/%3E%3C/svg%3E");
}

.auth-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: none;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-image: var(--auth-glyph);
          mask-image: var(--auth-glyph);
}

.auth-icon--mail        { --auth-glyph: var(--auth-icon-mail); }
.auth-icon--lock        { --auth-glyph: var(--auth-icon-lock); }
.auth-icon--user        { --auth-glyph: var(--auth-icon-user); }
.auth-icon--eye         { --auth-glyph: var(--auth-icon-eye); }
.auth-icon--eye-off     { --auth-glyph: var(--auth-icon-eye-off); }
.auth-icon--check       { --auth-glyph: var(--auth-icon-check); }
.auth-icon--arrow-right { --auth-glyph: var(--auth-icon-arrow-right); }
.auth-icon--arrow-left  { --auth-glyph: var(--auth-icon-arrow-left); }
.auth-icon--shield      { --auth-glyph: var(--auth-icon-shield); }
.auth-icon--globe       { --auth-glyph: var(--auth-icon-globe); }
.auth-icon--spark       { --auth-glyph: var(--auth-icon-spark); }
.auth-icon--support     { --auth-glyph: var(--auth-icon-support); }
.auth-icon--bolt        { --auth-glyph: var(--auth-icon-bolt); }
.auth-icon--key         { --auth-glyph: var(--auth-icon-key); }
.auth-icon--brain       { --auth-glyph: var(--auth-icon-brain); }

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

.auth-body {
  margin: 0;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  font-family: var(--auth-font);
  font-size: var(--auth-fs-body);
  line-height: 1.5;
  font-optical-sizing: auto;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  color: var(--auth-text);
  background-color: var(--auth-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.auth-body h1,
.auth-body h2,
.auth-body h3,
.auth-body h4 {
  line-height: 1.2;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.auth-body p,
.auth-body label {
  text-wrap: pretty;
}

.auth-body a { color: inherit; }

.auth-body :focus-visible {
  outline: 2px solid var(--auth-brand-500);
  outline-offset: 2px;
}

.auth-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   4. Layout shell — full viewport, never scrolls on desktop
   -------------------------------------------------------------------------- */
.auth-layout {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}

.auth-layout__body {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
  min-height: 0;
  background-color: var(--auth-surface);
}

/* --------------------------------------------------------------------------
   5. Brand panel
   -------------------------------------------------------------------------- */
.auth-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.8vh, 22px);
  min-height: 0;
  padding: var(--auth-panel-pad-y) var(--auth-panel-pad-x);
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 8% 4%, var(--auth-veil), transparent 55%),
    linear-gradient(158deg, var(--auth-panel-from) 0%, var(--auth-panel-to) 100%);
  border-right: 1px solid var(--auth-border);
}

/* soft brand glow + dot texture, kept deliberately restrained */
.auth-brand::before {
  content: "";
  position: absolute;
  top: -18%;
  right: -14%;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91, 71, 239, .16), transparent 68%);
  pointer-events: none;
}

.auth-brand::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: 22px 22px;
  color: var(--auth-brand-500);
  opacity: .07;
  -webkit-mask-image: radial-gradient(120% 90% at 88% 6%, #000 0%, transparent 60%);
          mask-image: radial-gradient(120% 90% at 88% 6%, #000 0%, transparent 60%);
  pointer-events: none;
}

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

/* Logo lockup ------------------------------------------------------------- */
.auth-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--auth-text);
}

/* Two halves of one artwork at one height; the wordmark tucks under the
   mark's orbit by the same share of the height as in the original. */
.auth-logo__mark,
.auth-logo__word {
  width: auto;
  height: clamp(42px, 5.8vh, 54px);
  flex-shrink: 0;
}

.auth-logo__word {
  margin-left: -3px;
}

/* Headline ---------------------------------------------------------------- */
.auth-brand__intro { max-width: min(100%, 620px); }

.auth-brand__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  padding: 5px 11px 5px 8px;
  border: 1px solid var(--auth-border);
  border-radius: var(--auth-radius-pill);
  background-color: var(--auth-chip-bg);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--auth-brand-600);
}

.auth-heading {
  margin: 0;
  font-size: var(--auth-fs-display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1.4px;
}

.auth-heading em {
  display: block;
  font-style: normal;
  background: linear-gradient(96deg, var(--auth-brand-500), var(--auth-brand-400) 55%, #9a72f7);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.auth-brand__text {
  margin: clamp(8px, 1.4vh, 14px) 0 0;
  max-width: 46ch;
  color: var(--auth-text-muted);
  line-height: 1.6;
}

/* Illustration ------------------------------------------------------------ */
/* The stage is a size container: the scene takes the largest 1012:470 box
   that fits it, and --auth-scene-u is 1% of that box's width, which the
   chips size themselves from. */
.auth-brand__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  container-type: size;
}

.auth-brand__scene {
  --auth-scene-u: min(1cqw, 1cqh * 1012 / 470);
  position: relative;
  flex: none;
  width: 100%;
  width: min(100cqw, 100cqh * 1012 / 470);
  aspect-ratio: 1012 / 470;
}

.auth-brand__art {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 26px 40px rgba(43, 38, 105, .14));
}

/* Floating chips ---------------------------------------------------------- */
.auth-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: .8em;
  padding: .72em 1.1em .72em .78em;
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 1.15em;
  background-color: rgba(255, 255, 255, .94);
  box-shadow: 0 20px 38px -20px rgba(60, 48, 160, .42), 0 2px 6px rgba(60, 48, 160, .06);
  font-size: clamp(8.5px, calc(var(--auth-scene-u, 7px) * 1.72), 13.5px);
  line-height: 1.3;
  white-space: nowrap;
  animation: auth-float 7s ease-in-out infinite;
}

.auth-chip__icon {
  display: grid;
  place-items: center;
  width: 2.75em;
  height: 2.75em;
  flex: none;
  border-radius: .85em;
  color: var(--auth-brand-600);
  background-color: var(--auth-brand-50);
}

.auth-chip__icon .auth-icon { font-size: 1.5em; }

.auth-chip__body b,
.auth-chip__body small { display: block; }

.auth-chip__body b {
  font-size: 1em;
  font-weight: 700;
  color: var(--auth-text);
}

.auth-chip__body small {
  margin-top: .1em;
  font-size: .82em;
  color: var(--auth-text-muted);
}

.auth-chip__body small .auth-icon {
  margin-left: .2em;
  vertical-align: -.16em;
}

.auth-chip--generated { top: 2%;     left: 1%;                          }
.auth-chip--faster    { top: -3%;    right: 0;     animation-delay: -2.3s; }
.auth-chip--done      { top: 47%;    right: -1%;   animation-delay: -4.1s; }
.auth-chip--insights  { bottom: -7%; left: -1%;    animation-delay: -1.2s; }
.auth-chip--ready     { bottom: -7%; left: 25.5%;  animation-delay: -5.2s; }

.auth-chip--done .auth-chip__icon {
  width: 2.3em;
  height: 2.3em;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(140deg, #3fd394, var(--auth-success));
}

.auth-chip--done .auth-chip__icon .auth-icon { font-size: 1.2em; }

.auth-chip--ready .auth-chip__icon { background-color: transparent; width: 2.2em; }
.auth-chip--ready .auth-chip__body b,
.auth-chip--ready .auth-chip__body small { color: var(--auth-brand-600); }
.auth-chip--ready .auth-chip__body b { font-weight: 600; }

@keyframes auth-float {
  50% { transform: translateY(-5px); }
}

.auth-sparkle {
  position: absolute;
  width: 2.4%;
  aspect-ratio: 1;
  background-color: var(--auth-sparkle);
  -webkit-mask: var(--auth-icon-star4) center / contain no-repeat;
          mask: var(--auth-icon-star4) center / contain no-repeat;
  animation: auth-twinkle 4.5s ease-in-out infinite;
}

.auth-sparkle--a { top: 33%; left: 16.5%; }
.auth-sparkle--b { top: 20%; left: 83%;   width: 1.9%; animation-delay: -1.6s; }
.auth-sparkle--c { top: 45%; left: .5%;   width: 1%;   animation-delay: -3s; }

@keyframes auth-twinkle {
  50% { transform: scale(.72); opacity: .55; }
}

/* Partner platforms ------------------------------------------------------- */
.auth-platforms {
  padding: clamp(12px, 1.9vh, 18px) clamp(14px, 1.6vw, 20px);
  border: 1px solid var(--auth-border);
  border-radius: var(--auth-radius-lg);
  background-color: color-mix(in srgb, var(--auth-surface) 78%, transparent);
  box-shadow: var(--auth-shadow-md);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}

.auth-platforms__title {
  margin: 0 0 3px;
  font-size: 14px;
  font-weight: 600;
}

.auth-platforms__note {
  margin: 0 0 clamp(9px, 1.4vh, 13px);
  font-size: var(--auth-fs-small);
  color: var(--auth-text-muted);
}

.auth-platforms__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.auth-platform {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid var(--auth-border);
  border-radius: var(--auth-radius-md);
  background-color: var(--auth-surface);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: transform .18s var(--auth-ease), border-color .18s var(--auth-ease), box-shadow .18s var(--auth-ease);
}

.auth-platform:hover {
  transform: translateY(-2px);
  border-color: var(--auth-brand-200);
  box-shadow: var(--auth-shadow-sm);
}

.auth-platform__badge {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: var(--auth-platform-color, var(--auth-brand-500));
}

.auth-platform--outlier  { --auth-platform-color: linear-gradient(140deg, #ff8a3d, #f2601c); }
.auth-platform--mercor   { --auth-platform-color: linear-gradient(140deg, #2fc47e, #0f9d69); }
.auth-platform--mindrift { --auth-platform-color: linear-gradient(140deg, #7d68f5, #4c37e4); }

.auth-brand__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: clamp(9px, 1.4vh, 13px);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--auth-brand-600);
  text-decoration: none;
}

.auth-brand__link .auth-icon { font-size: 16px; transition: transform .2s var(--auth-ease); }
.auth-brand__link:hover .auth-icon { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   6. Form panel
   -------------------------------------------------------------------------- */
/* `align-items: flex-start` + `margin: auto` on the card centres the card while
   keeping it fully reachable if the panel ever has to scroll internally. */
.auth-form-panel {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 0;
  padding: var(--auth-panel-pad-y) var(--auth-panel-pad-x);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* A soft brand disc peeks in from the top-right corner. */
  background:
    radial-gradient(circle clamp(120px, 15vw, 210px) at calc(100% - 12px) -18px, var(--auth-brand-50) 97%, transparent 100%),
    linear-gradient(200deg, #faf9ff 0%, var(--auth-surface) 42%);
  scrollbar-width: thin;
}

/* --------------------------------------------------------------------------
   7. Auth card
   -------------------------------------------------------------------------- */
.auth-card {
  width: 100%;
  max-width: var(--auth-card-width);
  margin: auto;
  padding: var(--auth-card-pad-y) var(--auth-card-pad-x);
  border: 1px solid var(--auth-border);
  border-radius: var(--auth-radius-xl);
  background-color: var(--auth-surface);
  box-shadow: var(--auth-shadow-lg);
}

/* Denser rhythm for the longest form (sign up) */
.auth-card--compact {
  --auth-field-gap: clamp(9px, 1.5vh, 14px);
  --auth-stack: clamp(9px, 1.5vh, 15px);
}

.auth-card__logo {
  display: none;
  justify-content: center;
  margin-bottom: 18px;
}

.auth-card__head {
  margin-bottom: var(--auth-stack);
  text-align: center;
}

.auth-card__badge {
  display: grid;
  place-items: center;
  width: clamp(42px, 6vh, 52px);
  aspect-ratio: 1;
  margin: 0 auto clamp(10px, 1.6vh, 16px);
  border-radius: var(--auth-radius-md);
  font-size: clamp(21px, 2.8vh, 26px);
  color: var(--auth-brand-600);
  background-color: var(--auth-brand-50);
  border: 1px solid var(--auth-brand-100);
}

.auth-card__title {
  margin: 0;
  font-size: var(--auth-fs-title);
  font-weight: 800;
  letter-spacing: -.7px;
}

.auth-card__subtitle {
  margin: 6px 0 0;
  color: var(--auth-text-muted);
  font-size: var(--auth-fs-body);
}

.auth-card__subtitle strong {
  color: var(--auth-text);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   8. Fields, inputs, validation
   -------------------------------------------------------------------------- */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--auth-field-gap);
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Label row carries the validation message so errors never shift the layout */
.auth-field__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-height: 16px;
}

.auth-field__label {
  font-size: var(--auth-fs-label);
  font-weight: 600;
  color: var(--auth-text-soft);
}

.auth-field__message {
  font-size: var(--auth-fs-small);
  font-weight: 500;
  line-height: 1.3;
  text-align: right;
  color: var(--auth-danger);
  opacity: 0;
  transition: opacity .16s var(--auth-ease);
}

.auth-field.is-error .auth-field__message,
.auth-field.is-success .auth-field__message { opacity: 1; }
.auth-field.is-success .auth-field__message { color: var(--auth-success); }

.auth-input-group {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--auth-input-h);
  border: 1px solid var(--auth-border-strong);
  border-radius: var(--auth-radius-md);
  background-color: var(--auth-surface);
  transition: border-color .18s var(--auth-ease), box-shadow .18s var(--auth-ease), background-color .18s var(--auth-ease);
}

.auth-input-group:hover { border-color: var(--auth-brand-200); }

.auth-input-group:focus-within {
  border-color: var(--auth-brand-500);
  box-shadow: 0 0 0 4px var(--auth-ring);
}

.auth-input-icon {
  display: grid;
  place-items: center;
  width: 42px;
  flex: none;
  font-size: 18px;
  color: var(--auth-text-faint);
  transition: color .18s var(--auth-ease);
}

.auth-input-group:focus-within .auth-input-icon { color: var(--auth-brand-500); }

.auth-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 14px 0 0;
  border: 0;
  border-radius: inherit;
  background-color: transparent;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--auth-text);
  outline: none;
}

/* the wrapper's focus ring is the focus indicator — a second outline is noise */
.auth-input:focus-visible { outline: none; }
.auth-input::placeholder { color: var(--auth-text-faint); }
.auth-input:-webkit-autofill { -webkit-text-fill-color: var(--auth-text); transition: background-color 5000s ease-in-out 0s; }

.auth-password-toggle {
  display: grid;
  place-items: center;
  width: 40px;
  height: 100%;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 0 var(--auth-radius-md) var(--auth-radius-md) 0;
  background-color: transparent;
  color: var(--auth-text-faint);
  font-size: 18px;
  cursor: pointer;
  transition: color .18s var(--auth-ease);
}

.auth-password-toggle:hover { color: var(--auth-brand-500); }

/* Field states ------------------------------------------------------------ */
.auth-field.is-error .auth-input-group {
  border-color: var(--auth-danger);
  background-color: var(--auth-danger-soft);
}

.auth-field.is-error .auth-input-group:focus-within {
  box-shadow: 0 0 0 4px rgba(221, 63, 92, .14);
}

.auth-field.is-error .auth-input-icon { color: var(--auth-danger); }

.auth-field.is-success .auth-input-group { border-color: var(--auth-success); }
.auth-field.is-success .auth-input-group:focus-within { box-shadow: 0 0 0 4px var(--auth-success-soft); }
.auth-field.is-success .auth-input-icon { color: var(--auth-success); }

.auth-input:disabled,
.auth-input[readonly] { color: var(--auth-text-muted); cursor: not-allowed; }

.auth-input-group:has(.auth-input:disabled) {
  background-color: var(--auth-surface-sunk);
  border-color: var(--auth-border);
}

/* Row that pairs the checkbox with a helper link */
.auth-form__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
}

/* `.auth-body a` resets links to the text colour, hence the extra class. */
.auth-body .auth-link {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--auth-brand-600);
  text-decoration: none;
  transition: color .18s var(--auth-ease);
}

.auth-body .auth-link:hover { color: var(--auth-brand-500); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   9. Checkbox
   -------------------------------------------------------------------------- */
.auth-checkbox {
  display: inline-flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  color: var(--auth-text-muted);
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

.auth-checkbox__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.auth-checkbox__box {
  position: relative;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: .5px;
  border: 1.5px solid var(--auth-border-strong);
  border-radius: 6px;
  background-color: var(--auth-surface);
  transition: background-color .16s var(--auth-ease), border-color .16s var(--auth-ease), box-shadow .16s var(--auth-ease);
}

.auth-checkbox__box::after {
  content: "";
  width: 11px;
  height: 11px;
  background-color: var(--auth-brand-600);
  -webkit-mask: var(--auth-icon-check) center / contain no-repeat;
          mask: var(--auth-icon-check) center / contain no-repeat;
  transform: scale(.4);
  opacity: 0;
  transition: transform .16s var(--auth-ease), opacity .16s var(--auth-ease);
}

.auth-checkbox:hover .auth-checkbox__box { border-color: var(--auth-brand-400); }

.auth-checkbox__input:checked + .auth-checkbox__box {
  background-color: var(--auth-brand-50);
  border-color: var(--auth-brand-400);
}

.auth-checkbox__input:checked + .auth-checkbox__box::after { transform: scale(1); opacity: 1; }
.auth-checkbox__input:focus-visible + .auth-checkbox__box { box-shadow: 0 0 0 4px var(--auth-ring); }

.auth-checkbox__label { line-height: 1.45; }
.auth-checkbox__label a { color: var(--auth-brand-600); font-weight: 600; text-decoration: none; }
.auth-checkbox__label a:hover { text-decoration: underline; text-underline-offset: 3px; }

.auth-field--consent { gap: 5px; }
.auth-field--consent .auth-field__message { text-align: left; padding-left: 27px; }
.auth-field--consent.is-error .auth-checkbox__box { border-color: var(--auth-danger); }

/* --------------------------------------------------------------------------
   10. Buttons, social, divider, footer links
   -------------------------------------------------------------------------- */
.auth-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  height: var(--auth-btn-h);
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--auth-radius-md);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s var(--auth-ease), box-shadow .18s var(--auth-ease),
              background-color .18s var(--auth-ease), border-color .18s var(--auth-ease), opacity .18s var(--auth-ease);
}

.auth-btn:active { transform: translateY(1px); }

.auth-btn--primary {
  color: #fff;
  background: linear-gradient(100deg, var(--auth-brand-600) 0%, var(--auth-brand-500) 46%, #5f82f5 100%);
  box-shadow: var(--auth-shadow-brand);
}

.auth-btn--primary:hover { box-shadow: 0 16px 30px -12px rgba(76, 55, 228, .65); }

.auth-btn--primary .auth-icon { font-size: 18px; transition: transform .2s var(--auth-ease); }
.auth-btn--primary:hover .auth-icon { transform: translateX(3px); }

.auth-btn--ghost {
  color: var(--auth-text-soft);
  background-color: transparent;
  border-color: var(--auth-border-strong);
}

.auth-btn--ghost:hover { background-color: var(--auth-surface-muted); color: var(--auth-text); }

.auth-btn[disabled],
.auth-btn.is-loading {
  cursor: not-allowed;
  opacity: .72;
  transform: none;
  box-shadow: none;
}

.auth-btn.is-loading { color: transparent; }

.auth-btn.is-loading::after {
  content: "";
  position: absolute;
  width: 17px;
  height: 17px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: auth-spin .7s linear infinite;
}

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

.auth-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: var(--auth-btn-h);
  border: 1px solid var(--auth-border-strong);
  border-radius: var(--auth-radius-md);
  background-color: var(--auth-surface);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--auth-text);
  cursor: pointer;
  transition: background-color .18s var(--auth-ease), border-color .18s var(--auth-ease), transform .16s var(--auth-ease);
}

.auth-social:hover {
  background-color: var(--auth-surface-muted);
  border-color: var(--auth-brand-200);
}

.auth-social:active { transform: translateY(1px); }

.auth-social__logo {
  width: 18px;
  height: 18px;
  flex: none;
  background: var(--auth-google) center / contain no-repeat;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: var(--auth-stack) 0;
  font-size: var(--auth-fs-small);
  color: var(--auth-text-faint);
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--auth-border);
}

.auth-footer-link {
  margin: var(--auth-stack) 0 0;
  text-align: center;
  font-size: 13.5px;
  color: var(--auth-text-muted);
}

.auth-footer-link a {
  font-weight: 600;
  color: var(--auth-brand-600);
  text-decoration: none;
}

.auth-footer-link a:hover { text-decoration: underline; text-underline-offset: 3px; }

.auth-footer-link--back a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--auth-text-muted);
}

.auth-footer-link--back a:hover { color: var(--auth-brand-600); }
.auth-footer-link--back .auth-icon { font-size: 16px; transition: transform .2s var(--auth-ease); }
.auth-footer-link--back a:hover .auth-icon { transform: translateX(-3px); }

.auth-form__submit { margin-top: clamp(4px, 1vh, 10px); }

/* --------------------------------------------------------------------------
   11. Alerts, success view, password strength
   -------------------------------------------------------------------------- */
.auth-alert {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: var(--auth-stack);
  padding: 10px 13px;
  border: 1px solid var(--auth-border);
  border-radius: var(--auth-radius-md);
  font-size: 13.5px;
  line-height: 1.45;
  background-color: var(--auth-surface-muted);
  color: var(--auth-text-soft);
}

.auth-alert[hidden] { display: none; }
.auth-form > .auth-alert { margin-bottom: 0; }
.auth-alert .auth-icon { font-size: 17px; margin-top: 1px; }

.auth-alert--success {
  border-color: color-mix(in srgb, var(--auth-success) 35%, transparent);
  background-color: var(--auth-success-soft);
  color: var(--auth-success);
}

.auth-alert--error {
  border-color: color-mix(in srgb, var(--auth-danger) 35%, transparent);
  background-color: var(--auth-danger-soft);
  color: var(--auth-danger);
}

.auth-view[hidden] { display: none; }

.auth-view--success { text-align: center; }

.auth-view--success .auth-card__badge {
  color: var(--auth-success);
  background-color: var(--auth-success-soft);
  border-color: color-mix(in srgb, var(--auth-success) 30%, transparent);
}

.auth-view--success .auth-btn,
.auth-view--success .auth-social { margin-top: var(--auth-stack); }

.auth-resend {
  margin: var(--auth-stack) 0 0;
  text-align: center;
  font-size: 13.5px;
  color: var(--auth-text-muted);
}

.auth-resend button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--auth-brand-600);
  cursor: pointer;
}

.auth-resend button:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Password strength ------------------------------------------------------- */
.auth-strength {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 2px;
}

.auth-strength__track {
  display: flex;
  gap: 4px;
  flex: 1;
}

.auth-strength__track i {
  height: 3px;
  flex: 1;
  border-radius: var(--auth-radius-pill);
  background-color: var(--auth-surface-sunk);
  transition: background-color .22s var(--auth-ease);
}

.auth-strength__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--auth-text-faint);
  min-width: 52px;
  text-align: right;
}

.auth-strength[data-level="1"] .auth-strength__track i:nth-child(-n+1),
.auth-strength[data-level="2"] .auth-strength__track i:nth-child(-n+2),
.auth-strength[data-level="3"] .auth-strength__track i:nth-child(-n+3),
.auth-strength[data-level="4"] .auth-strength__track i { background-color: var(--auth-strength-color, var(--auth-brand-500)); }

.auth-strength[data-level="1"] { --auth-strength-color: var(--auth-danger); }
.auth-strength[data-level="2"] { --auth-strength-color: var(--auth-warning); }
.auth-strength[data-level="3"] { --auth-strength-color: var(--auth-brand-500); }
.auth-strength[data-level="4"] { --auth-strength-color: var(--auth-success); }
.auth-strength[data-level="1"] .auth-strength__label { color: var(--auth-danger); }
.auth-strength[data-level="2"] .auth-strength__label { color: var(--auth-warning); }
.auth-strength[data-level="3"] .auth-strength__label { color: var(--auth-brand-500); }
.auth-strength[data-level="4"] .auth-strength__label { color: var(--auth-success); }

.auth-hint {
  margin: 0;
  font-size: var(--auth-fs-small);
  color: var(--auth-text-faint);
}

/* --------------------------------------------------------------------------
   12. Feature strip
   -------------------------------------------------------------------------- */
.auth-feature-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  height: var(--auth-strip-h);
  padding: 0 clamp(20px, 3.4vw, 62px);
  border-top: 1px solid var(--auth-border);
  background: linear-gradient(180deg, var(--auth-strip-from), var(--auth-strip-to));
  color: var(--auth-text);
}

/* Each feature sits centred in its quarter, with a hairline between them. */
.auth-feature {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.1vw, 18px);
  min-width: 0;
  padding: 0 clamp(8px, 1.2vw, 20px);
}

.auth-feature + .auth-feature {
  background: linear-gradient(var(--auth-border-strong), var(--auth-border-strong)) left center / 1px 46% no-repeat;
}

.auth-feature__icon {
  display: grid;
  place-items: center;
  flex: none;
  font-size: clamp(23px, 3.2vh, 30px);
  color: var(--auth-brand-600);
}

.auth-feature__body { min-width: 0; }

.auth-feature__title {
  display: block;
  font-size: clamp(13px, 1.6vh, 14.5px);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.auth-feature__text {
  display: block;
  margin-top: 2px;
  font-size: clamp(11.5px, 1.35vh, 12.5px);
  line-height: 1.35;
  color: var(--auth-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   13. Responsive
   -------------------------------------------------------------------------- */

/* Narrow desktop / small laptop — tighten the brand column */
@media (max-width: 1240px) {
  .auth-layout__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .auth-brand__text { display: none; }
  .auth-platforms__note { display: none; }
}

@media (max-width: 1080px) {
  .auth-platforms { display: none; }
}

/* Tablet + mobile — single column, natural scrolling */
@media (max-width: 960px) {
  .auth-body {
    height: auto;
    min-height: 100vh;
    overflow: visible;
    background:
      radial-gradient(90% 55% at 50% 0%, var(--auth-panel-to), transparent 70%),
      var(--auth-bg);
  }

  .auth-layout {
    height: auto;
    min-height: 100vh;
    overflow: visible;
    grid-template-rows: 1fr;
  }

  .auth-layout__body {
    grid-template-columns: 1fr;
    background-color: transparent;
  }

  .auth-brand { display: none; }
  .auth-feature-strip { display: none; }

  .auth-form-panel {
    overflow: visible;
    padding: 44px 20px;
    background-color: transparent;
  }

  .auth-card__logo { display: flex; }

  :root {
    --auth-card-width: 440px;
    --auth-card-pad-y: 28px;
    --auth-card-pad-x: 26px;
    --auth-field-gap: 15px;
    --auth-stack: 18px;
    --auth-input-h: 50px;
    --auth-btn-h: 52px;
    --auth-fs-title: 27px;
    --auth-fs-body: 15px;
  }
}

@media (max-width: 520px) {
  .auth-form-panel { padding: 62px 14px 34px; }

  .auth-card {
    padding: 24px 20px;
    border-radius: var(--auth-radius-lg);
  }

  .auth-form__row {
    flex-wrap: wrap;
    row-gap: 10px;
  }
}

/* Laptop-height desktops (1600x900, 1440x900, 1366x768) — tighten the rhythm
   so even the tallest form (sign up) stays inside the viewport. */
@media (min-width: 961px) and (max-height: 820px) {
  :root {
    --auth-card-pad-y: 22px;
    --auth-input-h: 42px;
    --auth-btn-h: 45px;
    --auth-field-gap: 11px;
    --auth-stack: 12px;
    --auth-fs-title: 23px;
  }

  .auth-card--compact .auth-card__subtitle { display: none; }
}

/* Very short desktop viewports — trim non-essential brand elements */
@media (min-width: 961px) and (max-height: 700px) {
  .auth-brand__text,
  .auth-brand__eyebrow { display: none; }
  .auth-card__badge { display: none; }
}

@media (min-width: 961px) and (max-height: 600px) {
  .auth-platforms { display: none; }
  .auth-feature__text { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-body *,
  .auth-body *::before,
  .auth-body *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* --------------------------------------------------------------------------
   14. Server-rendered states
   These exist only in the CodeIgniter views: an expired reset link, the
   development-only credential hint, and the standalone confirmation panels
   that PHP renders instead of the mockups JavaScript view swap.
   -------------------------------------------------------------------------- */
.auth-view--centered { text-align: center; }

.auth-view--centered .auth-btn,
.auth-view--centered .auth-social { margin-top: var(--auth-stack); }

.auth-card__badge--danger {
  color: var(--auth-danger);
  background-color: var(--auth-danger-soft);
  border-color: color-mix(in srgb, var(--auth-danger) 30%, transparent);
}

/* Dev-only reset link shown when the install has no mail server */
.auth-alert--dev {
  margin-top: var(--auth-stack);
  text-align: left;
}

.auth-alert--dev .auth-link { font-weight: 600; }

/* Seeded demo credentials — development builds only */
.auth-hint--demo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--auth-stack);
  padding: 9px 12px;
  border: 1px dashed var(--auth-border-strong);
  border-radius: var(--auth-radius-sm);
  background-color: var(--auth-surface-muted);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 12px;
  color: var(--auth-text-muted);
}

.auth-hint--demo strong {
  font-family: var(--auth-font);
  font-weight: 700;
  color: var(--auth-text-soft);
}

/* Placeholder until Handshake's own brand colour is supplied — a teal that
   sits apart from the other three badges. Change it here and in
   `job_platforms.color` so the dashboard avatar matches. */
.auth-platform--handshake { --auth-platform-color: linear-gradient(140deg, #3ec7d4, #1b93a8); }