/* ═══════════════════════════════════════════════════════════════
   PrimeX — Premium Auth Pages (Login / Register)
   Namespaced with the `auth-` prefix / `--auth-*` custom properties
   so this file never collides with landing.css, panel.css,
   admin.css or global-header.css. Shared foundation for every
   public auth screen — built for Login (Task 14) and written to be
   reused as-is by the Premium Register page (next step) without
   any structural changes.
   Design language: Premium Glassmorphism — mirrors the same blur /
   opacity / saturation tokens used on the Landing Page (landing.css
   --lp-glass, blur(14px) saturate(1.5)) so both public surfaces feel
   like one product, without sharing a single class name.
   Mobile-first: base rules target phones; tablet and desktop
   overrides layer on top via min-width media queries further down.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* Light Mode */
  --auth-bg:          #ffffff;
  --auth-bg-soft:     #f6f6f8;
  --auth-card:        #ffffff;
  --auth-text:        #0f0f14;
  --auth-text-soft:   #63636d;
  --auth-line:        rgba(15,15,20,0.08);
  --auth-accent:      #111119;
  --auth-accent-inv:  #ffffff;

  /* Glass tokens */
  --auth-glass:       rgba(255,255,255,0.72);
  --auth-glass-blur:  18px;
  --auth-glass-sat:   1.6;
  --auth-shadow-sm:   0 1px 3px rgba(0,0,0,0.05), 0 2px 10px rgba(0,0,0,0.04);
  --auth-shadow-md:   0 4px 18px rgba(0,0,0,0.09), 0 1px 4px rgba(0,0,0,0.05);
  --auth-shadow-lg:   0 24px 70px -20px rgba(20,20,40,.35), 0 8px 24px -8px rgba(20,20,40,.18);

  /* Brand gradient — Blue → Purple */
  --auth-grad-1:      #3b82f6;
  --auth-grad-2:      #7c3aed;
  --auth-grad-3:      #a855f7;

  --auth-radius:      14px;
  --auth-radius-lg:   26px;
  --auth-error:       #ef4444;
  --auth-success:     #22c55e;
}

[data-theme="dark"]{
  --auth-bg:          #07070a;
  --auth-bg-soft:     #101014;
  --auth-card:        #141418;
  --auth-text:        #f0f0f8;
  --auth-text-soft:   #93939f;
  --auth-line:        rgba(255,255,255,0.09);
  --auth-accent:      #f0f0f8;
  --auth-accent-inv:  #0a0a0d;

  --auth-glass:       rgba(18,18,24,0.62);
  --auth-shadow-sm:   0 1px 4px rgba(0,0,0,0.4), 0 2px 12px rgba(0,0,0,0.28);
  --auth-shadow-md:   0 4px 20px rgba(0,0,0,0.5);
  --auth-shadow-lg:   0 30px 80px -20px rgba(0,0,0,.6), 0 10px 26px -10px rgba(0,0,0,.4);
}

/* ── Reset (scoped to auth pages only) ── */
.auth-page,
.auth-page *{ box-sizing: border-box; }
html:has(.auth-page){ scroll-behavior: auto; }
.auth-page{
  margin: 0;
  min-height: 100vh;
  background: var(--auth-bg);
  color: var(--auth-text);
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.55;
  overflow-x: hidden;
  transition: background .25s ease, color .25s ease;
}
.auth-page a{ color: inherit; text-decoration: none; }
.auth-page h1,.auth-page h2,.auth-page h3{
  font-family: 'Manrope', sans-serif;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.auth-page button{ font-family: inherit; }

@media (prefers-reduced-motion: reduce){
  .auth-page *{ animation: none !important; transition: none !important; }
}

/* ── Premium page-load transition (fade & slide in) ── */
@media (prefers-reduced-motion: no-preference){
  .auth-page{ animation: authPageIn .55s cubic-bezier(.4,0,.2,1) both; }
  @keyframes authPageIn{
    from{ opacity: 0; transform: translateY(10px); }
    to{ opacity: 1; transform: translateY(0); }
  }
}
/* ── Smooth exit transition before following a link off this page
     (Forgot password / Create account) so it reads as one continuous
     product rather than a hard reload. Applied by auth.js. ── */
.auth-page.auth-page-exit{
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease;
  pointer-events: none;
}

/* ══════════════ Shell — mobile-first single column ══════════════
   min-height accounts for the shared sticky header above it
   (--lp-header-h, from landing.css) so the page fits the viewport
   without adding extra scroll height. Falls back to 100vh if that
   token isn't available for any reason. */
.auth-shell{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: calc(100vh - var(--lp-header-h, 72px));
  position: relative;
  overflow-x: hidden;
  max-width: 100vw;
}

/* ══════════════ Left — Premium Hero panel ══════════════
   Mobile: a condensed gradient banner up top (headline + illustration
   stacked). Tablet/Desktop: a full-height side panel. Colors, glow and
   text all switch per data-theme so light/dark read as genuinely
   different premium surfaces rather than a palette-swapped clone. */
.auth-visual{
  position: relative;
  overflow: hidden;
  padding: 40px 24px 56px;
  isolation: isolate;
  transition: background .3s ease, color .3s ease;
}
[data-theme="dark"] .auth-visual{
  background: linear-gradient(135deg, #120c2e 0%, #1f1350 42%, #2a1660 100%);
  color: #f5f5ff;
}
[data-theme="light"] .auth-visual{
  background: linear-gradient(135deg, #eef2ff 0%, #f4eeff 45%, #eaf1ff 100%);
  color: #14141f;
}

/* Animated aurora glow — tuned brighter/bolder for dark, soft pastel
   wash for light so the same markup produces two distinct moods. */
.auth-aurora{
  position: absolute;
  inset: -20%;
  z-index: 0;
  filter: blur(50px);
  will-change: transform, opacity;
  transform: translateZ(0);
}
[data-theme="dark"] .auth-aurora{
  background:
    radial-gradient(circle at 25% 20%, rgba(59,130,246,.55), transparent 55%),
    radial-gradient(circle at 75% 30%, rgba(168,85,247,.5), transparent 55%),
    radial-gradient(circle at 50% 80%, rgba(124,58,237,.55), transparent 60%);
  opacity: .9;
}
[data-theme="light"] .auth-aurora{
  background:
    radial-gradient(circle at 25% 20%, rgba(147,197,253,.65), transparent 55%),
    radial-gradient(circle at 75% 25%, rgba(216,180,254,.6), transparent 55%),
    radial-gradient(circle at 50% 85%, rgba(196,181,253,.55), transparent 60%);
  opacity: .8;
}
@media (prefers-reduced-motion: no-preference){
  .auth-aurora{ animation: authAuroraShift 16s ease-in-out infinite; }
  @keyframes authAuroraShift{
    0%,100%{ transform: translate(0,0) scale(1); }
    33%{ transform: translate(3%, -4%) scale(1.06); }
    66%{ transform: translate(-4%, 3%) scale(1.04); }
  }
}

/* Moving light beams — thin diagonal streaks that slowly sweep across
   the panel. Purely decorative, GPU-accelerated (transform + opacity). */
.auth-beams{ position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.auth-beam{
  position: absolute;
  top: -30%;
  width: 2px;
  height: 160%;
  filter: blur(1px);
  transform: rotate(14deg);
  will-change: transform, opacity;
}
[data-theme="dark"] .auth-beam{ background: linear-gradient(180deg, transparent, rgba(255,255,255,.5), transparent); }
[data-theme="light"] .auth-beam{ background: linear-gradient(180deg, transparent, rgba(99,102,241,.4), transparent); }
.auth-beam-a{ left: 16%; }
.auth-beam-b{ left: 52%; }
.auth-beam-c{ left: 84%; }
@media (prefers-reduced-motion: no-preference){
  .auth-beam-a{ animation: authBeamSweep 9s ease-in-out infinite; }
  .auth-beam-b{ animation: authBeamSweep 12s ease-in-out infinite 2.2s; }
  .auth-beam-c{ animation: authBeamSweep 10.5s ease-in-out infinite 4.4s; }
  @keyframes authBeamSweep{
    0%,100%{ transform: rotate(14deg) translateX(0); opacity: .18; }
    50%{ transform: rotate(14deg) translateX(36px); opacity: .55; }
  }
}

/* Floating glow shapes — small drifting orbs for extra depth. */
.auth-orbs{ position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.auth-orb{ position: absolute; border-radius: 50%; filter: blur(1px); }
[data-theme="dark"] .auth-orb{ box-shadow: 0 0 16px 2px currentColor; }
[data-theme="light"] .auth-orb{ box-shadow: 0 0 12px 1px currentColor; }
.auth-orb-a{ width: 10px; height: 10px; top: 16%; left: 10%; background: currentColor; color: rgba(255,255,255,.55); }
[data-theme="light"] .auth-orb-a{ color: rgba(99,102,241,.4); }
.auth-orb-b{ width: 7px; height: 7px; top: 62%; left: 20%; background: currentColor; color: rgba(168,85,247,.65); }
.auth-orb-c{ width: 6px; height: 6px; top: 30%; left: 88%; background: currentColor; color: rgba(59,130,246,.7); }
.auth-orb-d{ width: 12px; height: 12px; top: 78%; left: 78%; background: currentColor; color: rgba(216,180,254,.55); }
[data-theme="light"] .auth-orb-d{ color: rgba(168,85,247,.35); }
@media (prefers-reduced-motion: no-preference){
  .auth-orb-a{ animation: authOrbFloat 7s ease-in-out infinite; }
  .auth-orb-b{ animation: authOrbFloat 9s ease-in-out infinite 1.4s; }
  .auth-orb-c{ animation: authOrbFloat 8s ease-in-out infinite .7s; }
  .auth-orb-d{ animation: authOrbFloat 10s ease-in-out infinite 2.8s; }
  @keyframes authOrbFloat{
    0%,100%{ transform: translateY(0) scale(1); opacity: .55; }
    50%{ transform: translateY(-20px) scale(1.35); opacity: 1; }
  }
}

.auth-visual-inner{ position: relative; z-index: 1; max-width: 520px; margin: 0 auto; width: 100%; }

/* ══════════════ Premium Split Hero ══════════════
   Headline (left) + auto-rotating illustration (right). Stacked on
   mobile/tablet; becomes a true side-by-side split from desktop up. */
.auth-hero-split{ display: flex; flex-direction: column; gap: 36px; }
.auth-hero-left{ min-width: 0; }

/* ── Rotating headline — fade + slide, infinite loop, no typing/cursor.
   GPU-accelerated: only opacity + transform animate. ── */
.auth-hero-rotator{
  position: relative;
  min-height: 84px;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin: 0 0 14px;
}
@media (min-width: 640px){
  .auth-hero-rotator{ min-height: 96px; }
}
.auth-hero-rotator-text{
  font-family: 'Manrope', sans-serif;
  font-size: clamp(26px, 5.6vw, 38px);
  font-weight: 800;
  line-height: 1.18;
  margin: 0;
  max-width: 440px;
  transform: translate3d(0, 0, 0);
  opacity: 1;
  will-change: transform, opacity;
  transition: opacity .45s cubic-bezier(.4,0,.2,1), transform .45s cubic-bezier(.4,0,.2,1);
}
[data-theme="dark"] .auth-hero-rotator-text{
  background: linear-gradient(100deg, #ffffff 0%, #d9d1ff 55%, #b9a6ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-theme="light"] .auth-hero-rotator-text{
  background: linear-gradient(100deg, #171730 0%, #4338ca 55%, #7c3aed 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Sliding out (up) + fading, before the next phrase swaps in */
.auth-hero-rotator-text.auth-hero-rotator-out{
  opacity: 0;
  transform: translate3d(0, -18px, 0);
}
/* Next phrase jumps below the baseline with transitions suppressed,
   then the class is removed on the following frame so it animates
   back up into place — giving the continuous "slide + fade" loop. */
.auth-hero-rotator-text.auth-hero-rotator-jump{
  transition: none;
  opacity: 0;
  transform: translate3d(0, 18px, 0);
}

.auth-hero-tagline{ font-size: 15px; line-height: 1.6; max-width: 400px; margin: 0; }
[data-theme="dark"] .auth-hero-tagline{ color: rgba(245,245,255,.72); }
[data-theme="light"] .auth-hero-tagline{ color: rgba(20,20,31,.68); }

/* ── Rotating illustration stage — auto-switches between premium
   glass icon cards every few seconds via a simple opacity + scale
   crossfade (auth.js). Lightweight SVG, no external assets. ── */
.auth-hero-right{ display: flex; justify-content: center; }
.auth-illust-stage{
  position: relative;
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1 / 1;
}
.auth-illust-glow{ position: absolute; inset: 8%; border-radius: 50%; filter: blur(30px); z-index: 0; will-change: transform, opacity; }
[data-theme="dark"] .auth-illust-glow{ background: radial-gradient(circle, rgba(124,58,237,.45), transparent 70%); }
[data-theme="light"] .auth-illust-glow{ background: radial-gradient(circle, rgba(99,102,241,.3), transparent 70%); }
@media (prefers-reduced-motion: no-preference){
  .auth-illust-glow{ animation: authGlowPulse 5s ease-in-out infinite; }
  @keyframes authGlowPulse{ 0%,100%{ transform: scale(1); opacity: .9; } 50%{ transform: scale(1.12); opacity: 1; } }
}

.auth-illust-item{
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  opacity: 0;
  transform: scale(.88) translateY(6px);
  transition: opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.34,1.56,.64,1);
  will-change: opacity, transform;
  pointer-events: none;
}
.auth-illust-item.is-active{ opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; }

.auth-illust-card{
  position: relative;
  width: 92px; height: 92px;
  border-radius: 26px;
  display: grid; place-items: center;
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}
[data-theme="dark"] .auth-illust-card{ background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 20px 46px -14px rgba(0,0,0,.5); }
[data-theme="light"] .auth-illust-card{ background: rgba(255,255,255,.78); border: 1px solid rgba(99,102,241,.18); box-shadow: 0 20px 40px -16px rgba(76,29,149,.22); }

.auth-illust-icon{ width: 40px; height: 40px; }
[data-theme="dark"] .auth-illust-icon{ color: #ffffff; }
[data-theme="light"] .auth-illust-icon{ color: #4338ca; }

.auth-illust-ring{ position: absolute; inset: -13px; border-radius: 32px; border: 1px solid; will-change: transform, opacity; }
[data-theme="dark"] .auth-illust-ring{ border-color: rgba(168,85,247,.5); }
[data-theme="light"] .auth-illust-ring{ border-color: rgba(99,102,241,.35); }
.auth-illust-ring-b{ inset: -24px; }
@media (prefers-reduced-motion: no-preference){
  .auth-illust-ring{ animation: authRingPulse 3.6s ease-in-out infinite; }
  .auth-illust-ring-b{ animation-delay: .6s; }
  @keyframes authRingPulse{ 0%,100%{ transform: scale(1); opacity: .5; } 50%{ transform: scale(1.07); opacity: .12; } }
}

.auth-illust-label{ font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 13.5px; text-align: center; letter-spacing: .01em; }
[data-theme="dark"] .auth-illust-label{ color: rgba(245,245,255,.85); }
[data-theme="light"] .auth-illust-label{ color: rgba(20,20,31,.78); }

/* ══════════════ Right — Premium Glass Login Card ══════════════ */
.auth-form-side{
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px 56px;
  background: var(--auth-bg);
  overflow: hidden;
  width: 100%;
}
.auth-form-side .auth-shape{
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .35; z-index: 0; pointer-events: none;
}
[data-theme="dark"] .auth-form-side .auth-shape{ opacity: .16; }
.auth-form-side .auth-shape-a{ width: 320px; height: 320px; background: radial-gradient(circle, #93c5fd, transparent 70%); top: -80px; right: -80px; }
.auth-form-side .auth-shape-b{ width: 280px; height: 280px; background: radial-gradient(circle, #d8b4fe, transparent 70%); bottom: -60px; left: -60px; }

.auth-card{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  background: var(--auth-glass);
  backdrop-filter: blur(var(--auth-glass-blur)) saturate(var(--auth-glass-sat));
  -webkit-backdrop-filter: blur(var(--auth-glass-blur)) saturate(var(--auth-glass-sat));
  border: 1px solid var(--auth-line);
  border-radius: var(--auth-radius-lg);
  box-shadow: var(--auth-shadow-lg);
  padding: 32px 26px;
  transition: box-shadow .3s ease, border-color .3s ease, transform .3s ease;
}
/* Glass hover effect — a gentle lift, like the card is alive */
.auth-card:hover{
  box-shadow: 0 30px 80px -18px rgba(20,20,40,.4), 0 10px 26px -10px rgba(20,20,40,.2);
  border-color: rgba(124,58,237,.28);
}
[data-theme="dark"] .auth-card:hover{ border-color: rgba(168,85,247,.3); }

/* Theme switching now lives ONLY in the shared main header
   (.lp-theme-toggle) — this row is brand-only. */
.auth-card-top{ display: flex; align-items: center; justify-content: flex-start; margin-bottom: 20px; }
.auth-card-brand{ display: flex; align-items: center; gap: 9px; }
.auth-card-logo{
  width: 36px; height: 36px; border-radius: 11px;
  background: var(--auth-accent); color: var(--auth-accent-inv);
  display: grid; place-items: center;
  font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 16px;
}
.auth-card-brand-text{ font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 17px; }

.auth-card-title{ font-size: 24px; font-weight: 800; margin: 0 0 6px; }
.auth-card-subtitle{ color: var(--auth-text-soft); font-size: 14.5px; margin: 0 0 22px; }

/* Flash message wrapper — flash_html() ships its own inline colors,
   this just gives it consistent spacing/motion inside the new card */
.auth-flash{ margin-bottom: 16px; animation: authFlashIn .3s ease both; }
@keyframes authFlashIn{ from{ opacity: 0; transform: translateY(-4px); } to{ opacity: 1; transform: translateY(0); } }
.auth-flash .flash-msg{ margin-bottom: 0 !important; }

.auth-field{ margin-bottom: 14px; }
.auth-field label{ display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--auth-text); }

.auth-input-wrap{ position: relative; }
.auth-input-wrap svg.auth-input-icon{
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--auth-text-soft); pointer-events: none;
}
.auth-inp{
  width: 100%;
  padding: 13px 15px 13px 41px;
  border: 1.5px solid var(--auth-line);
  border-radius: var(--auth-radius);
  background: var(--auth-bg-soft);
  color: var(--auth-text);
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.auth-inp::placeholder{ color: var(--auth-text-soft); opacity: .7; }
.auth-inp:focus{
  outline: none;
  border-color: var(--auth-grad-2);
  background: var(--auth-card);
  box-shadow: 0 0 0 4px rgba(124,58,237,.14);
}
/* Login's password field has no inline validation-state icon, so it
   only needs to reserve room for the visibility toggle. */
.auth-field-pw-only .auth-inp{ padding-right: 44px; }

/* Premium eye / eye-off toggle — a fixed-size button so the two SVG
   icons can crossfade + scale in place instead of the old emoji swap. */
.auth-pw-toggle{
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; padding: 0;
  color: var(--auth-text-soft);
  border-radius: 8px; transition: background .16s ease, color .16s ease;
}
.auth-pw-toggle:hover{ background: var(--auth-line); color: var(--auth-text); }
.auth-pw-toggle:focus-visible{ outline: 2px solid var(--auth-grad-2); outline-offset: 2px; }
.auth-pw-icon{
  position: absolute;
  width: 18px; height: 18px;
  transition: opacity .2s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
}
.auth-pw-icon-eye{ opacity: 1; transform: scale(1) rotate(0deg); }
.auth-pw-icon-eye-off{ opacity: 0; transform: scale(.5) rotate(-20deg); }
.auth-pw-toggle[aria-pressed="true"] .auth-pw-icon-eye{ opacity: 0; transform: scale(.5) rotate(20deg); }
.auth-pw-toggle[aria-pressed="true"] .auth-pw-icon-eye-off{ opacity: 1; transform: scale(1) rotate(0deg); }
@media (prefers-reduced-motion: reduce){
  .auth-pw-icon{ transition: opacity .12s ease; transform: none !important; }
}

.auth-row-between{
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13.5px; margin-bottom: 18px; flex-wrap: wrap; gap: 10px;
}
.auth-check{ display: flex; align-items: center; gap: 8px; color: var(--auth-text-soft); cursor: pointer; user-select: none; }
.auth-check input{ accent-color: var(--auth-grad-2); width: 16px; height: 16px; cursor: pointer; }
/* Specificity note: ".auth-page a{ color: inherit }" (0,1,1) is more
   specific than a single ".auth-link" class (0,1,0) and would win,
   making links silently inherit whatever muted/soft color their
   parent has instead of their own intended contrast color. Scoping
   as ".auth-page a.auth-link" (0,2,1) restores it correctly in both
   themes without changing layout. */
.auth-page a.auth-link{
  color: var(--auth-text);
  font-weight: 600;
  position: relative;
}
.auth-link::after{
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .22s ease;
}
.auth-link:hover::after{ transform: scaleX(1); transform-origin: left; }

/* ── Premium animated Login button ── */
.auth-btn{
  position: relative;
  width: 100%;
  padding: 14.5px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  border: none;
  border-radius: var(--auth-radius);
  cursor: pointer;
  color: #fff;
  background: linear-gradient(120deg, var(--auth-grad-1), var(--auth-grad-2) 55%, var(--auth-grad-3));
  background-size: 200% 200%;
  background-position: 0% 50%;
  box-shadow: 0 10px 28px -8px rgba(124,58,237,.55);
  transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, background-position .5s ease;
  overflow: hidden;
}
.auth-btn:hover{
  transform: translateY(-2px);
  background-position: 100% 50%;
  box-shadow: 0 16px 40px -10px rgba(124,58,237,.7), 0 0 0 5px rgba(124,58,237,.12);
}
.auth-btn:active{ transform: translateY(0) scale(.98); }
.auth-btn.auth-btn-loading{ pointer-events: none; opacity: .85; }
.auth-btn-spinner{
  display: none;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  margin-right: 8px; vertical-align: -3px;
}
.auth-btn.auth-btn-loading .auth-btn-spinner{ display: inline-block; animation: authSpin .7s linear infinite; }
@keyframes authSpin{ to{ transform: rotate(360deg); } }

.auth-card-foot{ text-align: center; font-size: 14px; color: var(--auth-text-soft); margin-top: 18px; }

/* ══════════════ Tablet (≥ 768px) ══════════════
   Visual panel gains real height and the illustration stage grows;
   form panel gets more breathing room. Still stacked top/bottom. */
@media (min-width: 768px){
  .auth-visual{ padding: 56px 48px 64px; }
  .auth-illust-stage{ max-width: 240px; }
  .auth-form-side{ padding: 48px 40px 64px; }
  .auth-card{ padding: 40px 36px; }
}

/* ══════════════ Desktop (≥ 1024px) ══════════════
   True split-screen layout: left visual panel, right glass card,
   both full viewport height. The hero itself also switches from a
   stacked headline/illustration to a genuine side-by-side split. */
@media (min-width: 1024px){
  .auth-shell{ flex-direction: row; min-height: 100vh; }
  .auth-visual{
    flex: 0 0 46%;
    max-width: 640px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 64px 56px;
  }
  .auth-visual-inner{ margin: 0; }
  .auth-hero-split{ flex-direction: row; align-items: center; gap: 24px; }
  .auth-hero-left{ flex: 1 1 auto; }
  .auth-hero-right{ flex: 0 0 190px; }
  .auth-illust-stage{ max-width: 190px; }
  .auth-form-side{ flex: 1; min-height: 100vh; padding: 40px 56px; }
  .auth-card{ max-width: 460px; }
}

@media (min-width: 1280px){
  .auth-visual{ padding: 72px 72px; }
  .auth-form-side{ padding: 40px 72px; }
}

/* ═══════════════════════════════════════════════════════════════
   Register-page additions (Task 15)
   Layered on the same auth-* foundation built for Login (Task 14)
   — no existing rule above is changed, this only adds what the
   Register card needs on top of it: a responsive field grid, a
   live password-strength meter, a "generate password" action,
   inline real-time validation states and a checkbox-gated submit
   button. Namespacing stays consistent (`auth-` prefix) so both
   auth pages keep sharing one visual language.
   ═══════════════════════════════════════════════════════════════ */

/* Wider card to comfortably fit the extra register fields */
.auth-card.auth-card-register{ max-width: 460px; }
@media (min-width: 1024px){
  .auth-card.auth-card-register{ max-width: 500px; }
}

/* Two-up field grid (Username/Email, Telegram/Referral) — mobile
   stacks to one column, tablet/desktop go two-up. */
.auth-field-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 480px){
  .auth-field-grid{ grid-template-columns: 1fr 1fr; gap: 0 14px; }
}

/* Inline validation state on each input wrapper — a small
   checkmark/cross fades in on the right without shifting layout. */
.auth-input-state{
  position: absolute; right: 13px; top: 50%; transform: translateY(-50%) scale(.6);
  width: 18px; height: 18px;
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.auth-input-state svg{ width: 100%; height: 100%; }
.auth-field.auth-valid .auth-input-state.auth-state-ok{ opacity: 1; transform: translateY(-50%) scale(1); color: var(--auth-success); }
.auth-field.auth-invalid .auth-input-state.auth-state-err{ opacity: 1; transform: translateY(-50%) scale(1); color: var(--auth-error); }
.auth-field.auth-valid .auth-inp{ border-color: var(--auth-success); }
.auth-field.auth-invalid .auth-inp{ border-color: var(--auth-error); }
.auth-field-msg{
  font-size: 12px; margin-top: 5px; min-height: 15px;
  color: var(--auth-text-soft);
  transition: color .18s ease;
}
.auth-field.auth-invalid .auth-field-msg{ color: var(--auth-error); }
.auth-field.auth-valid .auth-field-msg{ color: var(--auth-success); }

/* Password field needs room for both the visibility toggle AND the
   validation state icon */
.auth-field-password .auth-inp{ padding-right: 74px; }
.auth-field-password .auth-pw-toggle{ right: 12px; }
.auth-field-password .auth-input-state{ right: 38px; }

/* ── Password strength meter ── */
.auth-strength{ margin-top: 9px; }
.auth-strength-track{
  height: 6px;
  border-radius: 99px;
  background: var(--auth-line);
  overflow: hidden;
  display: flex;
  gap: 3px;
}
.auth-strength-seg{
  flex: 1;
  height: 100%;
  border-radius: 99px;
  background: transparent;
  transition: background .25s ease, transform .25s ease;
  transform: scaleY(.85);
}
.auth-strength-seg.is-filled{ transform: scaleY(1); }
.auth-strength-row{
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 6px; font-size: 12px; color: var(--auth-text-soft);
}
.auth-strength-label{ font-weight: 700; transition: color .2s ease; }
.auth-strength-label[data-level="weak"]{ color: var(--auth-error); }
.auth-strength-label[data-level="medium"]{ color: #f59e0b; }
.auth-strength-label[data-level="strong"]{ color: #22c55e; }
.auth-strength-label[data-level="very-strong"]{ color: var(--auth-grad-2); }

/* ── Generate Strong Password ── */
.auth-generate-row{ display: flex; justify-content: flex-end; margin: -6px 0 10px; }
.auth-generate-btn{
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  font-size: 12.5px; font-weight: 700;
  color: var(--auth-grad-2);
  padding: 4px 2px;
  transition: color .18s ease, transform .18s ease;
}
.auth-generate-btn svg{ width: 14px; height: 14px; }
.auth-generate-btn:hover{ color: var(--auth-grad-3); transform: translateY(-1px); }
.auth-generate-btn:active{ transform: translateY(0) scale(.96); }
.auth-generate-btn.auth-generate-flash svg{ animation: authGenerateSpin .5s ease; }
@keyframes authGenerateSpin{ from{ transform: rotate(0); } to{ transform: rotate(180deg); } }

/* ── Terms/Privacy checkbox row ── */
.auth-checkbox-row{
  display: flex; align-items: flex-start; gap: 10px;
  margin: 14px 0 18px;
  font-size: 13px;
  color: var(--auth-text-soft);
  line-height: 1.5;
}
.auth-checkbox-row input{ accent-color: var(--auth-grad-2); flex-shrink: 0; margin-top: 3px; width: 16px; height: 16px; cursor: pointer; }

/* Disabled state for the Create Account button — stays disabled
   until the checkbox above is checked. */
.auth-btn:disabled,
.auth-btn[aria-disabled="true"]{
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
  background-position: 0% 50%;
}
.auth-btn:disabled:hover,
.auth-btn[aria-disabled="true"]:hover{
  transform: none;
  box-shadow: none;
}

/* Optional-field hint badge (Telegram / Referral) */
.auth-field-optional{ color: var(--auth-text-soft); font-weight: 500; font-size: 11.5px; }

/* ═══════════════════════════════════════════════════════════════
   2FA / OTP Verification page — Premium redesign
   Reuses every existing --auth-* token, .auth-card / .auth-btn /
   .auth-flash / .auth-link building block from Login & Register so
   all three public auth screens are visually one product. Adds only
   what's unique to this screen: a full-bleed centered "solo" shell
   (no split hero — this flow is a single focused step) with the same
   aurora + orb premium background language, per-digit OTP boxes, and
   a cosmetic countdown that mirrors the existing 10-minute pending-
   session window. No auth/session/verification logic is touched —
   the form still posts the exact same fields to the same endpoint.
   ═══════════════════════════════════════════════════════════════ */

.auth-solo-shell{
  position: relative;
  min-height: 100vh;
  min-height: calc(100vh - var(--lp-header-h, 72px));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  padding: 40px 20px 56px;
  transition: background .3s ease, color .3s ease;
}
[data-theme="dark"] .auth-solo-shell{
  background: linear-gradient(135deg, #0c0a1a 0%, #150c34 45%, #1a0f3d 100%);
}
[data-theme="light"] .auth-solo-shell{
  background: linear-gradient(135deg, #f7f8ff 0%, #f4eeff 45%, #eef2ff 100%);
}

.auth-solo-shell .auth-aurora{ inset: -10%; }
.auth-solo-shell .auth-orb-a{ top: 14%; left: 8%; }
.auth-solo-shell .auth-orb-b{ top: 72%; left: 14%; }
.auth-solo-shell .auth-orb-c{ top: 20%; left: 90%; }
.auth-solo-shell .auth-orb-d{ top: 80%; left: 86%; }
.auth-solo-shell .auth-beam-a{ left: 12%; }
.auth-solo-shell .auth-beam-b{ left: 50%; }
.auth-solo-shell .auth-beam-c{ left: 88%; }

.auth-solo-card{ position: relative; z-index: 1; width: 100%; max-width: 440px; }

.auth-otp-lock{
  width: 58px; height: 58px; border-radius: 18px; margin: 0 auto 18px;
  background: linear-gradient(135deg, var(--auth-grad-1), var(--auth-grad-2) 55%, var(--auth-grad-3));
  display: grid; place-items: center;
  box-shadow: 0 10px 30px rgba(124,58,237,.4), inset 0 1px 0 rgba(255,255,255,.25);
  animation: authOtpGlow 3.2s ease-in-out infinite;
}
@keyframes authOtpGlow{
  0%,100%{ box-shadow: 0 10px 30px rgba(124,58,237,.35), inset 0 1px 0 rgba(255,255,255,.25); }
  50%{ box-shadow: 0 10px 42px rgba(124,58,237,.6), inset 0 1px 0 rgba(255,255,255,.3); }
}

.auth-otp-head{ text-align: center; margin-bottom: 22px; }
.auth-otp-head .auth-card-title{ margin-bottom: 8px; }
.auth-otp-head .auth-card-subtitle{ margin: 0; }
.auth-otp-head .auth-card-subtitle strong{ color: var(--auth-text); }

.auth-otp-group{
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin: 4px 0 6px;
}
.auth-otp-box{
  width: 46px; height: 56px;
  border-radius: var(--auth-radius);
  border: 1.5px solid var(--auth-line);
  background: var(--auth-bg-soft);
  color: var(--auth-text);
  font-family: 'Manrope', sans-serif;
  font-size: 23px; font-weight: 800; text-align: center;
  outline: none; padding: 0;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease;
}
.auth-otp-box:focus{
  border-color: var(--auth-grad-2);
  background: var(--auth-card);
  box-shadow: 0 0 0 4px rgba(124,58,237,.14);
  transform: translateY(-1px);
}
.auth-otp-box.auth-otp-filled{ border-color: rgba(124,58,237,.45); }
.auth-otp-box.auth-invalid{
  border-color: var(--auth-error);
  box-shadow: 0 0 0 4px rgba(239,68,68,.12);
  animation: authOtpShake .32s ease;
}
@keyframes authOtpShake{
  0%,100%{ transform: translateX(0); } 25%{ transform: translateX(-4px); } 75%{ transform: translateX(4px); }
}
@media (max-width: 380px){
  .auth-otp-box{ width: 40px; height: 50px; font-size: 20px; }
  .auth-otp-group{ gap: 7px; }
}

.auth-otp-timer{
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 4px 0 20px; font-size: 13px; font-weight: 600; color: var(--auth-text-soft);
}
.auth-otp-timer strong{ color: var(--auth-text); font-variant-numeric: tabular-nums; }
.auth-otp-timer.auth-otp-timer-low strong{ color: var(--auth-error); }

.auth-btn-ghost{
  width: 100%; text-align: center; display: block;
  padding: 12.5px; font-size: 14px; font-weight: 700;
  border: 1.5px solid var(--auth-line); border-radius: var(--auth-radius);
  background: transparent; color: var(--auth-text-soft);
  cursor: pointer; margin-top: 10px; transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.auth-btn-ghost:hover{ color: var(--auth-text); border-color: var(--auth-text-soft); background: var(--auth-bg-soft); }

.auth-otp-foot{
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 20px; font-size: 11.5px; font-weight: 700; color: var(--auth-text-soft);
}
.auth-otp-foot svg{ width: 12px; height: 12px; flex-shrink: 0; }

@media (min-width: 640px){
  .auth-otp-lock{ width: 64px; height: 64px; }
}

/* ═══════════════════════════════════════════════════════════════
   Premium Centered Login page — single-card layout
   Sits on top of the same .auth-solo-shell backdrop (aurora +
   beams + orbs) already used by the 2FA screen, and reuses every
   existing .auth-card / .auth-inp / .auth-pw-toggle / .auth-btn /
   .auth-check / .auth-link building block. Everything below is
   purely new, additive `auth-login-*` classes scoped to this one
   screen — nothing above this block is modified, so Register and
   2FA are untouched.
   ═══════════════════════════════════════════════════════════════ */

.auth-login-shell{ padding: 32px 20px 64px; }

.auth-login-card{ max-width: 460px; }
.auth-login-card-inner{ text-align: left; }

.auth-login-eyebrow{
  display: inline-block;
  font-family: 'Manrope', sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 12px;
  background: linear-gradient(120deg, var(--auth-grad-1), var(--auth-grad-2) 60%, var(--auth-grad-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.auth-login-title{
  font-size: 30px;
  font-weight: 800;
  margin: 0 0 10px;
  color: var(--auth-text);
}
@media (min-width: 480px){
  .auth-login-title{ font-size: 34px; }
}

.auth-login-subtitle{
  color: var(--auth-text-soft);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0 0 26px;
  max-width: 400px;
}

/* Password label + "Forgot Password?" sit on the same row, mirroring
   the reference layout, while still sharing .auth-field spacing. */
.auth-login-pw-label-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.auth-login-pw-label-row label{ margin-bottom: 0; }
.auth-login-forgot-link{ font-size: 12.5px; font-weight: 600; }

.auth-login-remember{ margin: 4px 0 22px; }

/* Icon riding inside the primary Login button, left of the label */
.auth-login-btn-icon{ width: 17px; height: 17px; vertical-align: -3px; margin-right: 6px; }
.auth-btn.auth-btn-loading .auth-login-btn-icon{ display: none; }

/* Secure-login footer badge — small shield + reassurance line under
   the button, echoing the reference design's SSL notice. */
.auth-login-secure-badge{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 20px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  color: var(--auth-text-soft);
}
.auth-login-secure-badge svg{ width: 14px; height: 14px; flex-shrink: 0; color: var(--auth-success); }

.auth-login-card .auth-card-foot{ margin-top: 22px; }

@media (min-width: 640px){
  .auth-login-card{ max-width: 480px; }
  .auth-login-card-inner{ padding: 44px 40px; }
}

/* ── Register variant — same centered card language as Login, just
   wider to comfortably fit the extra fields (reuses .auth-card-register's
   existing max-width rules already defined earlier in this file). ── */
.auth-register-shell{ padding-top: 28px; }
.auth-register-card{ max-width: 460px; }
@media (min-width: 640px){
  .auth-register-card{ max-width: 500px; }
  .auth-register-card .auth-login-card-inner{ padding: 40px 36px; }
}

/* No subtitle line under the title on Register anymore — give the
   heading its own bottom margin instead so the form doesn't sit too
   close underneath it. */
.auth-register-title{ margin-bottom: 20px !important; }

/* ── Tighter field rhythm — scoped to Register only, so Login's
   spacing is untouched. Cuts down the label/input/message stack so
   consecutive fields sit noticeably closer together. ── */
.auth-register-card .auth-field{ margin-bottom: 6px; }
.auth-register-card .auth-field label{ margin-bottom: 4px; }
.auth-register-card .auth-field-msg{ min-height: 0; margin-top: 2px; line-height: 1.3; }
.auth-register-card .auth-field-msg:empty{ margin-top: 0; }
.auth-register-card .auth-field-grid{ gap: 0; }
.auth-register-card .auth-field-password .auth-strength{ margin-top: 6px; }
.auth-register-card .auth-generate-row{ margin: -2px 0 6px; }
.auth-register-card .auth-checkbox-row{ margin: 10px 0 16px; }

/* ── Collapsible "Have a referral code?" toggle — sits under Confirm
   Password, replacing the old always-visible Telegram/Referral row. ── */
.auth-referral-toggle-row{ margin: 2px 0 4px; }
.auth-referral-toggle-btn{
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: none; cursor: pointer; padding: 4px 2px;
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 700;
  color: var(--auth-grad-2);
  transition: color .18s ease;
}
.auth-referral-toggle-btn:hover{ color: var(--auth-grad-3); }
.auth-referral-toggle-btn svg{ width: 15px; height: 15px; flex-shrink: 0; }
.auth-referral-toggle-caret{ transition: transform .2s ease; }
.auth-referral-toggle-btn[aria-expanded="true"] .auth-referral-toggle-caret{ transform: rotate(180deg); }

.auth-referral-field{
  margin-top: 4px;
  animation: authReferralIn .22s ease both;
}
@keyframes authReferralIn{
  from{ opacity: 0; transform: translateY(-4px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════
   Login / Register combined page — pill tab switcher
   One shared card (views/auth/_auth-tabs.php) now holds both the
   Login and Register panels; this is just the "Login | Register"
   segmented control sitting above them, plus the panel show/hide.
   Reuses --auth-* tokens only — no existing rule above is touched.
   ═══════════════════════════════════════════════════════════════ */

.auth-tabs-card{ max-width: 460px; }
@media (min-width: 640px){
  .auth-tabs-card{ max-width: 500px; }
}

.auth-tabs{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  margin-bottom: 26px;
  border-radius: 999px;
  background: var(--auth-bg-soft);
  border: 1px solid var(--auth-line);
}

.auth-tab-btn{
  position: relative;
  z-index: 1;
  padding: 11px 10px;
  border: none;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: var(--auth-text-soft);
  transition: color .25s ease;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.auth-tab-btn[aria-selected="true"]{ color: var(--auth-accent-inv); }
.auth-tab-btn:focus,
.auth-tab-btn:focus-visible,
.auth-tab-btn:active{ background: transparent; outline: none; }

.auth-tab-indicator{
  position: absolute;
  z-index: 0;
  top: 4px; bottom: 4px; left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: linear-gradient(120deg, var(--auth-grad-1), var(--auth-grad-2) 55%, var(--auth-grad-3));
  box-shadow: 0 6px 18px -6px rgba(124,58,237,.55);
  transition: transform .3s cubic-bezier(.65,0,.35,1);
}
.auth-tab-indicator[data-pos="login"]{ transform: translateX(0); }
.auth-tab-indicator[data-pos="register"]{ transform: translateX(calc(100% + 4px)); }
@media (prefers-reduced-motion: reduce){
  .auth-tab-indicator{ transition: none; }
}

.auth-tab-panel{
  animation: authTabPanelIn .28s cubic-bezier(.4,0,.2,1) both;
}
@keyframes authTabPanelIn{
  from{ opacity: 0; transform: translateY(6px); }
  to{ opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .auth-tab-panel{ animation: none; }
}