/* ==========================================================================
   fluxxy auth — pad-gate
   The landing's world after dark: fog vista, violet underglow, one glass
   card. Same tokens as landing.css so gate and landing read as one place.
   No inline styles anywhere: all dynamics are class- and token-driven.
   ========================================================================== */

/* ---------- fonts (self-hosted, existing routes) ---------- */
@font-face {
  font-family: 'Aeonik Pro';
  src: url('/fonts/AeonikPro-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Aeonik Pro';
  src: url('/fonts/AeonikPro-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/IBMPlexMono-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---------- tokens (mirrors landing.css) ---------- */
:root {
  --pad: #04060E;
  --glass-face: rgba(12, 15, 27, 0.66);
  --glass-line: rgba(237, 238, 240, 0.08);
  --glass-line-2: rgba(237, 238, 240, 0.16);
  --field-face: rgba(249, 249, 249, 0.045);
  --field-line: rgba(237, 238, 240, 0.10);

  --ink: #F9F9F9;
  --ink-2: #C9CACD;
  --muted: #94969B;

  --signal: #475BFF;
  --signal-link: #5D8BFF;
  --signal-ink: #84B5FF;
  --signal-dim: rgba(71, 91, 255, 0.16);

  --abort: #F2655C;
  --abort-tint: rgba(242, 101, 92, 0.10);

  --font-display: 'Aeonik Pro', 'Inter', system-ui, sans-serif;
  --font-text: 'Inter', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --drop-lg: 0 32px 80px rgba(2, 4, 12, 0.65);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t1: 160ms;
  --t2: 240ms;
}

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

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

body.auth-page {
  margin: 0; min-height: 100vh;
  display: flex; flex-direction: column;
  font-family: var(--font-text);
  font-size: 16px; line-height: 1.55;
  color: var(--ink);
  background:
    radial-gradient(90% 52% at 50% 112%, rgba(71, 91, 255, 0.20), rgba(71, 91, 255, 0) 62%),
    linear-gradient(180deg, rgba(4, 7, 17, 0.42) 0%, rgba(4, 7, 17, 0.58) 52%, rgba(3, 5, 12, 0.86) 100%),
    url('/media/hero-fog.jpg') center 30% / cover no-repeat fixed var(--pad);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--signal); color: #FFFFFF; }

a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible { outline: 1px solid var(--signal-ink); outline-offset: 2px; }

/* ---------- layout ---------- */
.auth-wrap {
  flex: 1;
  width: 100%; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; padding: 40px 16px;
}

.auth-brand {
  font-family: var(--font-display); font-weight: 500;
  font-size: 26px; letter-spacing: -0.02em; color: var(--ink);
  text-shadow: 0 2px 32px rgba(2, 4, 12, 0.6);
}

/* ---------- card: borderless glass, white seam, deep drop ---------- */
.auth-card {
  width: min(440px, 100%);
  padding: 38px 34px 30px;
  background: var(--glass-face);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  box-shadow:
    inset 0 1px 0 rgba(249, 249, 249, 0.07),
    inset 0 0 0 1px var(--glass-line),
    var(--drop-lg);
}

.auth-kicker {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 400; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--signal-ink);
}
.auth-title {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 28px; font-weight: 500; letter-spacing: -0.02em;
  color: var(--ink);
}
.auth-sub { margin-top: 7px; font-size: 14.5px; color: var(--ink-2); }

.auth-err {
  margin-top: 18px; padding: 11px 14px;
  border-radius: 12px;
  background: var(--abort-tint);
  box-shadow: inset 0 0 0 1px rgba(242, 101, 92, 0.28);
  color: var(--abort);
  font-size: 13.5px; font-weight: 500;
}

/* ---------- form ---------- */
.auth-form { margin-top: 22px; display: flex; flex-direction: column; gap: 16px; }

.field { display: flex; flex-direction: column; gap: 7px; }
.flabel {
  font-size: 13px; font-weight: 500; color: var(--muted);
}
.fi {
  height: 48px; padding: 0 15px;
  background: var(--field-face);
  box-shadow: inset 0 0 0 1px var(--field-line);
  border: 0; border-radius: 12px;
  font: 500 15px/1 var(--font-text); color: var(--ink);
  outline: 0;
  transition: box-shadow var(--t1) var(--ease), background var(--t1) var(--ease);
}
.fi::placeholder { color: rgba(148, 150, 155, 0.65); font-weight: 400; }
.fi:focus {
  background: rgba(249, 249, 249, 0.07);
  box-shadow: inset 0 0 0 1px var(--signal), 0 0 0 3px var(--signal-dim);
}

.tos-row {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px; color: var(--ink-2);
}
.tos-row input {
  width: 17px; height: 17px; margin: 3px 0 0; flex: none;
  accent-color: var(--signal);
}

.auth-cta {
  height: 48px; margin-top: 4px;
  border-radius: 999px;
  background: var(--signal); color: #FFFFFF;
  font-size: 15px; font-weight: 600;
  transition: filter var(--t1) var(--ease), background var(--t1) var(--ease);
}
.auth-cta:hover { filter: brightness(1.12); }
.auth-cta:active { background: #3544C9; filter: none; }

/* ---------- token path ---------- */
.token-box { margin-top: 18px; }
.token-summary {
  font-size: 14px; font-weight: 500; color: var(--signal-ink);
  cursor: pointer; list-style: none;
  transition: color var(--t1) var(--ease);
}
.token-summary::-webkit-details-marker { display: none; }
.token-summary:hover { color: var(--ink); }
.token-form { margin-top: 14px; }

.auth-ghost {
  height: 46px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--glass-line-2);
  color: var(--ink-2);
  font-size: 14.5px; font-weight: 600;
  transition: box-shadow var(--t1) var(--ease), color var(--t1) var(--ease);
}
.auth-ghost:hover {
  box-shadow: inset 0 0 0 1px rgba(237, 238, 240, 0.3);
  color: var(--ink);
}

/* ---------- footer lines ---------- */
.switch-line { margin-top: 20px; font-size: 13.5px; color: var(--muted); }
.switch-line + .switch-line { margin-top: 8px; }
.switch-line a { color: var(--signal-ink); font-weight: 500; }
.switch-line a:hover { color: var(--ink); }

.auth-foot { font-size: 13.5px; color: rgba(201, 202, 205, 0.8); text-shadow: 0 1px 20px rgba(2, 4, 12, 0.7); }
.auth-foot a { font-weight: 600; color: var(--ink); }
.auth-foot a:hover { text-decoration: underline; }

/* ---------- responsive ---------- */
@media (max-width: 480px) {
  .auth-card { padding: 30px 22px 24px; border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0ms !important; }
}