/* Auth pages — theme aligned with pages/choose_level.css
   Goal: keep existing layout/classes, only re-skin (colors, glass, motion). */

:root[data-theme="dark"],
body[data-theme="dark"]{
  /* Choose-level palette (dark auth skin) */
  --auth-bg: #020617;
  --auth-bg-image:
    radial-gradient(ellipse at top, color-mix(in oklab, #8b5cf6 16%, transparent), transparent 55%),
    radial-gradient(ellipse at bottom, color-mix(in oklab, #06b6d4 16%, transparent), transparent 55%);
  --auth-bg-size: auto;
  --auth-bg-anim: none;
  --auth-text: #f8fafc;
  --auth-muted: #94a3b8;
  --auth-primary: #06b6d4;
  --auth-primary-strong: #0891b2;
  --auth-accent: #8b5cf6;
  --auth-danger: #f43f5e;

  --auth-surface: rgba(30,41,59,.42);
  --auth-surface-weak: rgba(30,41,59,.28);
  --auth-surface-strong: rgba(15,23,42,.72);
  --auth-border: rgba(255,255,255,.10);
  --auth-border-strong: rgba(255,255,255,.18);
  --auth-separator: rgba(148,163,184,.9);

  --auth-input-bg: rgba(2,6,23,.55);
  --auth-input-border: rgba(255,255,255,.10);
  --auth-input-text: var(--auth-text);
  --auth-input-placeholder: rgba(148,163,184,.75);

  --auth-shadow: 0 18px 60px rgba(0,0,0,.45);
  --auth-shadow-hover: 0 22px 70px rgba(0,0,0,.55);

  --radius-12: 16px;
  --radius-18: 24px;

  --auth-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --auth-ease-smooth: cubic-bezier(.4, 0, .2, 1);
}

html, body{
  min-height:100%;
  color:var(--auth-text);
  background-color:var(--auth-bg);
  background-image:var(--auth-bg-image);
  background-size:var(--auth-bg-size);
  background-attachment:fixed;
  animation:var(--auth-bg-anim); /* override core.css bg-pan */
  font-family: var(--font-primary);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body{ position:relative; }

/* Ambient orbs (CSS-only, no DOM required) */
body[data-theme="dark"]::before,
body[data-theme="dark"]::after{
  content:"";
  position:fixed;
  width:62vmax; height:62vmax;
  border-radius:999px;
  filter:blur(100px);
  opacity:.28;
  pointer-events:none;
  z-index:0;
  transform:translate3d(0,0,0);
  animation:breathe 11s infinite alternate ease-in-out;
}
body[data-theme="dark"]::before{
  top:-22vmax; left:-18vmax;
  background:var(--auth-accent);
}
body[data-theme="dark"]::after{
  bottom:-24vmax; right:-18vmax;
  background:var(--auth-primary);
  animation-duration:13s;
  animation-direction:alternate-reverse;
}

@keyframes breathe{
  0%{ transform:scale(1); opacity:.22; }
  100%{ transform:scale(1.08); opacity:.34; }
}

@media (prefers-reduced-motion: reduce){
  body[data-theme="dark"]::before,
  body[data-theme="dark"]::after{ animation:none; }
}

.container{ position:relative; z-index:1; gap:18px; padding:clamp(14px, 3vw, 28px); }

/* Glass panels */
.left-panel,
.form-container{
  background:var(--auth-surface);
  border:1px solid var(--auth-border);
  border-radius:var(--radius-18);
  box-shadow:var(--shadow-card);
  backdrop-filter:blur(24px) saturate(120%);
  -webkit-backdrop-filter:blur(24px) saturate(120%);
}

@media (prefers-reduced-motion: no-preference){
  .left-panel,
  .form-container{
    animation:auth-in .65s var(--auth-ease-smooth) both;
  }
}
@keyframes auth-in{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}

.left-panel{
  overflow:hidden;
  position:relative;
}

.left-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(900px 420px at 20% 0%, color-mix(in oklab, var(--auth-primary) 18%, transparent), transparent 55%),
             radial-gradient(720px 360px at 90% 20%, color-mix(in oklab, var(--auth-accent) 18%, transparent), transparent 55%);
  opacity:.9;
}

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

.right-panel{ position:relative; z-index:1; }

.intro-content{
  background:var(--auth-surface-strong);
  border:1px solid var(--auth-border);
  box-shadow:none;
}

.branding p,
.intro-content p,
.ml-hook{ color:var(--auth-muted); }

.branding h1,
.intro-content h2,
.form-header h2,
.form-container h2{
  color:var(--auth-text);
  text-shadow:0 0 26px rgba(255,255,255,.08);
}

.branding h1{
  font-size:clamp(1.75rem, 3.8vw, 2.9rem);
  font-weight:800;
  letter-spacing:-0.03em;
  margin:0 0 10px;
  white-space:nowrap;
  background:linear-gradient(135deg, var(--app-accent-green) 0%, var(--auth-primary) 50%, var(--app-accent-cyan) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  text-shadow:0 0 40px rgba(16, 185, 129, 0.25);
}

.branding p{ margin-top:0; }

.branding .brand-logo{ filter:drop-shadow(0 12px 26px rgba(0,0,0,.35)); }
.intro-image{ box-shadow:0 14px 40px rgba(0,0,0,.35); }

/* Floating symbols: cooler + subtler */
.floating-symbols .fs span{
  color:color-mix(in oklab, var(--auth-text) 18%, transparent);
  text-shadow:0 0 18px color-mix(in oklab, var(--auth-text) 10%, transparent);
}

/* Inputs / labels */
.form-group label{ color:color-mix(in oklab, var(--auth-text) 88%, transparent); }

.form-group input,
.referral-row input,
.error-alert__input{
  background:var(--auth-input-bg);
  color:var(--auth-input-text);
  border:1px solid var(--auth-input-border);
}
.form-group input::placeholder,
.referral-row input::placeholder,
.error-alert__input::placeholder{ color:var(--auth-input-placeholder); }

.form-group input:focus,
.referral-row input:focus,
.error-alert__input:focus{
  border-color:color-mix(in oklab, var(--auth-primary) 60%, transparent);
  box-shadow:0 0 0 4px var(--auth-focus-ring);
}

.toggle-pw-visibility{
  color:var(--auth-input-text);
  opacity:.85;
}
.toggle-pw-visibility:hover{ opacity:1; }
.toggle-pw-visibility img{
  width:20px;
  height:20px;
  display:block;
  filter:brightness(0) invert(1);
  opacity:.9;
}

/* Buttons */
.btn-login,
.btn-register,
.btn-reset{
  background:linear-gradient(135deg, var(--auth-primary), var(--auth-accent));
  box-shadow:
    0 16px 44px color-mix(in oklab, var(--auth-primary) 35%, transparent),
    0 16px 44px color-mix(in oklab, var(--auth-accent) 28%, transparent);
  transition:transform .16s var(--auth-ease-spring), filter .2s ease, box-shadow .2s ease;
}
.btn-login:hover,
.btn-register:hover,
.btn-reset:hover{
  filter:brightness(1.04);
  box-shadow:
    0 22px 64px color-mix(in oklab, var(--auth-primary) 40%, transparent),
    0 22px 64px color-mix(in oklab, var(--auth-accent) 32%, transparent);
  transform:translateY(-1px);
}
.btn-login:active,
.btn-register:active,
.btn-reset:active{ transform:translateY(0); }

/* Links */
.register-link a,
.login-link a,
.error-alert a{
  color:color-mix(in oklab, var(--auth-primary) 92%, transparent);
}
.register-link a:hover,
.login-link a:hover,
.error-alert a:hover{ text-decoration:underline; }

/* Separator */
.or-separator{ color:var(--auth-separator); }
.or-separator span{
  background:var(--auth-surface-strong);
  border:1px solid var(--auth-border);
}
.or-separator::before{ background:var(--auth-border-strong); }

/* Error alert */
.error-alert{
  --err-bg1:color-mix(in oklab, var(--auth-danger) 18%, transparent);
  --err-bg2:color-mix(in oklab, var(--auth-danger) 10%, transparent);
  --err-border:color-mix(in oklab, var(--auth-danger) 40%, transparent);
  --err-text:color-mix(in oklab, var(--auth-danger) 80%, var(--auth-text));
  box-shadow:0 14px 40px rgba(0,0,0,.35);
}
.error-alert::before{
  background:radial-gradient(45% 45% at 50% 40%, color-mix(in oklab, var(--auth-danger) 30%, transparent), color-mix(in oklab, var(--auth-danger) 18%, transparent));
  color:color-mix(in oklab, var(--auth-danger) 85%, var(--auth-text));
}

.form-container.has-error{
  border-color:color-mix(in oklab, var(--auth-danger) 45%, transparent);
  box-shadow:
    0 0 0 4px color-mix(in oklab, var(--auth-danger) 18%, transparent),
    var(--shadow-card);
}

/* Social buttons */
.social-btn{
  background:color-mix(in oklab, var(--auth-input-bg) 80%, transparent);
  border:1px solid var(--auth-input-border);
  color:var(--auth-input-text);
}
.social-btn:hover{ box-shadow:0 18px 48px rgba(0,0,0,.45); }

/* Upgrade-note modal: keep layout, match dark theme */
.modal__content.upgrade-note__content{
  background:color-mix(in oklab, var(--auth-surface-strong) 85%, transparent);
  border:1px solid var(--auth-border);
  box-shadow:var(--auth-shadow-hover);
  backdrop-filter:blur(18px) saturate(120%);
  -webkit-backdrop-filter:blur(18px) saturate(120%);
}
.upgrade-note__copy{ color:color-mix(in oklab, var(--auth-text) 92%, transparent); }
.upgrade-note__copy h3,
.upgrade-note__copy .modal-title{ color:var(--auth-text); }
.upgrade-note__hint{ color:color-mix(in oklab, var(--auth-muted) 92%, transparent); }
.upgrade-note__content .badge{
  background:color-mix(in oklab, var(--auth-primary) 18%, transparent);
  color:color-mix(in oklab, var(--auth-primary) 92%, var(--auth-text));
}

/* Responsive: keep dark theme, avoid core.css mobile override */
@media (width <= 768px){
  html, body{
    background-color:var(--auth-bg);
    background-image:var(--auth-bg-image);
    background-size:var(--auth-bg-size);
  }
  .left-panel, .right-panel{ margin:0; border-radius:0; box-shadow:none; }
  .form-container{ border-radius:var(--radius-12); }
}