/* ════════════════════════════════════════════════════════════════════════
   Impeerium — auth pages (login / register / forgot / reset)
   One shared sheet for every layouts/auth page, replacing the three
   near-identical per-page files (login.css, register.css, unustasidparooli.css).

   Same medieval-market language as the shop and the emails: forest ground with
   a living scene behind, a parchment plaque with gold rule + corner brackets,
   chunky bevel buttons. Theme-aware via [data-bs-theme].
   ════════════════════════════════════════════════════════════════════════ */

:root{
  --a-forest:#0e2818; --a-canopy:#18382a;
  --a-parch:#fffdf6;  --a-parch-2:#f5f1e3;
  --a-gold:#f59e0b;   --a-gold-soft:#fcd34d; --a-gold-deep:#b45309;
  --a-rule:#cba24c;   --a-bracket:#d9a93c;
  --a-green:#16a34a;  --a-green-lt:#22b85c;  --a-green-dk:#0f7a3c;
  --a-ink:#1c3d2a;    --a-body:#3f5145;      --a-muted:#7b8a7f;
  --a-field:#f4f7f2;  --a-field-br:#cfdcd0;
}
[data-bs-theme=dark]{
  --a-parch:#173a26; --a-parch-2:#12301f;
  --a-ink:#eafff1;   --a-body:#cfe9d8;  --a-muted:#9fc7bb;
  --a-field:#0b2115; --a-field-br:#43764f;
}

/* ── Page ground + living scene (replaces 150 <img> crowns) ─────────────── */
.auth-layout, .page-center{ position:relative; }
body.auth-layout-fix{
  background:#eef6ef;
  min-height:100vh;
}
[data-bs-theme=dark] body.auth-layout-fix{ background:var(--a-forest); }

/* Same diagonal ground as the maintenance screen so the two feel like one
   place — it has far more depth than the flat vertical gradient this replaced. */
.imp-authscene{
  position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  background:linear-gradient(135deg,#eef9ef 0%,#e6f5e9 40%,#dceee1 70%,#d3e9d9 100%);
}
[data-bs-theme=dark] .imp-authscene{
  background:linear-gradient(135deg,#0a1a10 0%,#0f2d18 40%,#0a2414 70%,#071510 100%);
}
/* Breathing glow behind the card — the maintenance page's pulseGlow. */
.imp-authscene::after{
  content:''; position:absolute; top:50%; left:50%;
  width:min(900px,120vw); height:min(900px,120vh);
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(22,163,74,.20) 0%, rgba(34,197,94,.07) 40%, transparent 70%);
  animation:impAuthPulse 4s ease-in-out infinite;
  pointer-events:none;
}
[data-bs-theme=light] .imp-authscene::after{
  background:radial-gradient(circle, rgba(252,211,77,.22) 0%, rgba(34,197,94,.08) 42%, transparent 70%);
}
@keyframes impAuthPulse{
  0%,100%{ transform:translate(-50%,-50%) scale(1);    opacity:1;  }
  50%    { transform:translate(-50%,-50%) scale(1.15); opacity:.7; }
}
/* Mist: taller and much softer than before — as two 150px bands they read as
   flat horizontal stripes on an otherwise empty page. */
.imp-authscene__mist{
  position:absolute; left:-30%; width:160%; height:46vh;
  background:radial-gradient(60% 100% at 50% 50%, rgba(255,255,255,.30), transparent 78%);
  animation:impAuthMist 38s ease-in-out infinite alternate;
}
[data-bs-theme=dark] .imp-authscene__mist{
  background:radial-gradient(60% 100% at 50% 50%, rgba(134,239,172,.07), transparent 78%);
}
.imp-authscene__mist--a{ top:-6%; }
.imp-authscene__mist--b{ top:56%; animation-duration:47s; animation-direction:alternate-reverse; }
@keyframes impAuthMist{ from{transform:translateX(-6%)} to{transform:translateX(6%)} }

.imp-authspark{
  position:absolute; bottom:-4vh; width:var(--s,7px); height:var(--s,7px);
  animation:impAuthRise var(--d,15s) linear var(--dl,0s) infinite; opacity:0;
}
.imp-authspark.g{ background:#fbbf24; box-shadow:0 0 10px 2px rgba(251,191,36,.5); }
.imp-authspark.l{ background:#4ade80; box-shadow:0 0 10px 2px rgba(74,222,128,.45); }
@keyframes impAuthRise{
  0%{transform:translate(0,0) rotate(45deg); opacity:0;}
  10%{opacity:.85;} 50%{transform:translate(16px,-55vh) rotate(225deg); opacity:.65;}
  90%{opacity:.35;} 100%{transform:translate(-12px,-110vh) rotate(405deg); opacity:0;}
}
@media (prefers-reduced-motion: reduce){
  .imp-authscene__mist,.imp-authspark,.imp-authscene::after{ animation:none; }
}

/* ── Floating crowns (partials/auth-crowns) ─────────────────────────────
   Three parallax layers: far = small/faint/blurred, near = large/sharper.
   Each drifts on its own duration+delay so the field never pulses in sync. */
/* z-index 1: the scene gradient (z-0) is painted later in the DOM, so the
   crowns need to sit above it or they get covered. Content sits at z-2. */
.imp-crowns{ position:fixed; inset:0; z-index:1; overflow:hidden; pointer-events:none; }
.imp-crown{
  position:absolute; display:block; height:auto; user-select:none;
  animation:floatCrown var(--d,12s) linear var(--dl,0s) infinite alternate;
  will-change:transform;
}
.imp-crown--far { opacity:.20; filter:blur(1.1px); }
.imp-crown--mid { opacity:.32; filter:blur(.3px); }
.imp-crown--near{ opacity:.44; }
/* On the dark ground the crowns carry a soft green glow so they read as depth
   rather than noise — brighter than light mode, which already has contrast. */
/* Same brightness/saturate lift the maintenance screen uses, so the crowns read
   as the same vivid green in both places instead of looking washed out here. */
[data-bs-theme=dark] .imp-crown--far {
  opacity:.34; filter:brightness(1.15) saturate(1.5) blur(1.5px); }
[data-bs-theme=dark] .imp-crown--mid {
  opacity:.50; filter:brightness(1.3) saturate(1.7) blur(.5px); }
[data-bs-theme=dark] .imp-crown--near{
  opacity:.66; filter:brightness(1.45) saturate(1.9) hue-rotate(10deg) drop-shadow(0 0 12px rgba(74,222,128,.35)); }
/* Same travel as the maintenance screen (hooldus.css) so the crowns drift and
   tumble identically across the site instead of barely nudging. */
@keyframes floatCrown{
  0%   { transform: translate(0,0)        rotate(0deg)   scale(1);    }
  25%  { transform: translate(4vw,8vh)    rotate(30deg)  scale(1.05); }
  50%  { transform: translate(-20px,-40px) rotate(70deg)  scale(.95); }
  75%  { transform: translate(60px,-20px) rotate(140deg) scale(1.08); }
  100% { transform: translate(-30px,50px) rotate(280deg) scale(1);    }
}
@media (prefers-reduced-motion: reduce){ .imp-crown{ animation:none; } }
/* the old inline crown field — dead if any cached view still emits it */
.crown-container,.crown{ display:none !important; }

/* ── Logo above the card ────────────────────────────────────────────────── */
.auth-layout .container-tight{ position:relative; z-index:2; }
.auth-logo{
  height:78px; width:auto;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.28));
}

/* ── The plaque ─────────────────────────────────────────────────────────── */
.card-login, .auth-layout .card{
  position:relative; z-index:2;
  width:100%; max-width:430px; margin:0 auto;
  background:var(--a-parch) !important;
  border:2px solid var(--a-rule) !important;
  border-radius:16px;
  box-shadow:8px 8px 0 rgba(15,60,35,.13), 0 24px 50px rgba(0,0,0,.16);
  overflow:hidden;
}
[data-bs-theme=dark] .card-login,
[data-bs-theme=dark] .auth-layout .card{
  box-shadow:8px 8px 0 rgba(0,0,0,.40), 0 24px 50px rgba(0,0,0,.45);
}
/* gold corner brackets */
.card-login::before,.card-login::after,
.auth-layout .card::before,.auth-layout .card::after{
  content:''; position:absolute; width:18px; height:18px;
  border:3px solid var(--a-bracket); pointer-events:none; z-index:3;
}
.card-login::before,.auth-layout .card::before{
  top:10px; left:10px; border-right:0; border-bottom:0; border-top-left-radius:6px;
}
.card-login::after,.auth-layout .card::after{
  bottom:10px; right:10px; border-left:0; border-top:0; border-bottom-right-radius:6px;
}
.card-login-body, .auth-layout .card-body{
  padding:2.4rem 2.1rem 2rem !important;
  background:transparent !important;
}

/* ── Title ──────────────────────────────────────────────────────────────── */
.card-login-body h2, .auth-layout .card-body h2{
  position:relative;
  font-weight:900; font-size:1.45rem; letter-spacing:.02em;
  color:var(--a-ink) !important; text-align:center;
  margin:0 0 .5rem; padding-bottom:.85rem;
}
.card-login-body h2::after, .auth-layout .card-body h2::after{
  content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:58px; height:3px; border-radius:2px;
  background:linear-gradient(90deg,var(--a-gold-soft),var(--a-gold));
}
.card-login-body > p.text-muted, .auth-layout .card-body > p.text-muted{
  color:var(--a-muted) !important; text-align:center;
  font-size:.88rem; line-height:1.55; margin:0 0 1.5rem;
}
.card-login-body h2 + form{ margin-top:1.6rem; }

/* ── Fields ─────────────────────────────────────────────────────────────── */
.input-wrapper{ position:relative; margin-bottom:1rem; }
.input-field,
.auth-layout .form-control{
  width:100%; display:block;
  background:var(--a-field) !important;
  border:2px solid var(--a-field-br) !important;
  border-radius:11px !important;
  padding:.85rem 1rem !important;
  font-size:.95rem; color:var(--a-ink) !important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.05);
  transition:border-color .15s, box-shadow .15s, background .15s;
  margin-bottom:1rem;
}
.input-wrapper .input-field{ margin-bottom:0; }
.input-field::placeholder, .auth-layout .form-control::placeholder{
  color:var(--a-muted); opacity:.8;
}
.input-field:focus, .auth-layout .form-control:focus{
  outline:none;
  border-color:var(--a-green) !important;
  box-shadow:0 0 0 4px rgba(34,197,94,.18) !important;
}
.auth-layout .form-label{
  font-weight:700; font-size:.85rem; color:var(--a-ink); margin-bottom:.4rem;
}
.auth-layout .input-group-flat .input-group-text{
  background:var(--a-field) !important; border:2px solid var(--a-field-br) !important;
  border-left:0 !important; border-radius:0 11px 11px 0 !important;
}
.auth-layout .input-group-flat .form-control{ border-right:0 !important; border-radius:11px 0 0 11px !important; }

/* "forgot password" / eye toggle sitting inside the field */
.forgot-password{
  position:absolute; right:.9rem; top:50%; transform:translateY(-50%);
  font-size:.78rem; font-weight:700; color:var(--a-muted);
  text-decoration:none; transition:color .15s;
}
.forgot-password:hover{ color:var(--a-gold); }

.remember-me{
  display:flex; align-items:center; gap:.55rem;
  font-size:.86rem; font-weight:600; color:var(--a-body);
  margin:.15rem 0 1.35rem; cursor:pointer; user-select:none;
}
.remember-me input{ width:1.05rem; height:1.05rem; accent-color:var(--a-green); cursor:pointer; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn-login,
.auth-layout .btn-primary{
  display:flex; align-items:center; justify-content:center;
  width:100%; padding:.95rem 1rem !important;
  border:none !important; border-radius:12px !important; cursor:pointer;
  background:linear-gradient(180deg,var(--a-green-lt),var(--a-green)) !important;
  color:#fff !important;
  font-weight:900; font-size:.92rem; letter-spacing:.13em; text-transform:uppercase;
  box-shadow:0 5px 0 var(--a-green-dk), 0 10px 20px rgba(15,90,45,.22) !important;
  transition:filter .15s, transform .1s, box-shadow .1s;
}
.btn-login:hover, .auth-layout .btn-primary:hover{ filter:brightness(1.06); color:#fff !important; }
.btn-login:active, .auth-layout .btn-primary:active{
  transform:translateY(4px);
  box-shadow:0 1px 0 var(--a-green-dk), 0 5px 12px rgba(15,90,45,.18) !important;
}

/* ── "or" divider ───────────────────────────────────────────────────────── */
.hr-text{
  display:flex; align-items:center; gap:.9rem;
  margin:1.5rem 0 1.2rem;
  font-size:.72rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--a-muted);
}
.hr-text::before,.hr-text::after{
  content:''; flex:1; height:2px; border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--a-rule));
}
.hr-text::after{ background:linear-gradient(90deg,var(--a-rule),transparent); }

/* ── Discord / OAuth button ─────────────────────────────────────────────── */
.btn-provider{
  display:flex !important; align-items:center; justify-content:center; gap:.6rem;
  width:100%; padding:.85rem 1rem;
  border-radius:12px; text-decoration:none;
  background:linear-gradient(180deg,#6b7cf0,#5865F2); color:#fff !important;
  font-weight:800; font-size:.9rem; letter-spacing:.02em;
  box-shadow:0 4px 0 #3c46b8, 0 9px 18px rgba(60,70,184,.25);
  transition:filter .15s, transform .1s, box-shadow .1s;
}
.btn-provider:hover{ filter:brightness(1.07); color:#fff !important; }
.btn-provider:active{ transform:translateY(3px); box-shadow:0 1px 0 #3c46b8, 0 5px 10px rgba(60,70,184,.2); }
/* The provider SVG ships filled #5865F2 — the same blurple as this button, so
   it vanished into it. Force it white. */
.btn-provider img{ width:20px; height:20px; filter:brightness(0) invert(1); }

/* ── Footer link ────────────────────────────────────────────────────────── */
.register-link,
.auth-layout .text-secondary{
  text-align:center; font-size:.87rem; color:var(--a-muted) !important;
  margin:1.3rem 0 0;
}
.register-link a, .auth-layout .text-secondary a{
  color:var(--a-green) !important; font-weight:800; text-decoration:none;
}
[data-bs-theme=dark] .register-link a,
[data-bs-theme=dark] .auth-layout .text-secondary a{ color:var(--a-gold-soft) !important; }
.register-link a:hover, .auth-layout .text-secondary a:hover{ text-decoration:underline; }

/* ── Email verification ────────────────────────────────────────────────── */
.verify-email-card .card-login-body{ text-align:center; }
.verify-email-icon{
  display:grid; place-items:center;
  width:68px; height:68px; margin:0 auto 1.1rem;
  border:2px solid var(--a-rule); border-radius:18px;
  background:
    radial-gradient(circle at 35% 25%,rgba(252,211,77,.34),transparent 48%),
    linear-gradient(145deg,var(--a-field),var(--a-parch-2));
  color:var(--a-green);
  box-shadow:inset 0 0 0 4px rgba(203,162,76,.12),0 8px 20px rgba(15,90,45,.12);
}
.verify-email-icon i{ font-size:2rem; stroke-width:1.8; }
[data-bs-theme=dark] .verify-email-icon{
  color:var(--a-gold-soft);
  box-shadow:inset 0 0 0 4px rgba(252,211,77,.08),0 8px 22px rgba(0,0,0,.28);
}
.verify-email-lead{
  margin:1.35rem 0 .75rem;
  color:var(--a-body); font-size:.96rem; line-height:1.6;
}
.verify-email-lead strong{
  display:block; margin-top:.45rem;
  color:var(--a-ink); font-weight:900; overflow-wrap:anywhere;
}
.verify-email-help{
  margin:0 0 1.55rem;
  color:var(--a-muted); font-size:.87rem; line-height:1.6;
}
.verify-email-resend{ margin:0; }
.verify-email-resend .btn-login{ gap:.55rem; }
.verify-email-resend .btn-login i{ font-size:1.15rem; }
.verify-email-note{
  display:flex; align-items:flex-start; justify-content:center; gap:.35rem;
  margin:1.25rem 0 0;
  color:var(--a-muted); font-size:.78rem; line-height:1.5;
}
.verify-email-note i{ flex:0 0 auto; margin-top:.12rem; color:var(--a-gold-deep); }

/* Keep the managed Turnstile widget centred and visually separated from the
   fields on every Impeerium auth form. */
.auth-layout .cf-turnstile{
  display:flex; justify-content:center;
  min-height:65px; margin:.25rem auto 1.2rem;
}

/* ── Flash messages sit above the card, not stretched full-bleed ────────── */
.auth-layout .alert{
  position:relative; z-index:2;
  max-width:430px; margin:0 auto 1.1rem;
  border-width:2px; border-radius:12px;
}

@media (max-width:480px){
  .card-login-body, .auth-layout .card-body{ padding:1.9rem 1.4rem 1.6rem !important; }
  .auth-logo{ height:64px; }
}