/* ==========================================================================
   NexuAttend — Login page (login.css)
   Premium light marketing hero (soft lavender/blue gradient) on the left with a
   large glossy 3D-glass treatment of the EXISTING logo and floating glass
   feature cards, against a floating white sign-in card on the right.

   SCOPING: the blue→indigo login theme is applied ONLY inside the `.auth` scope
   (brand custom-property overrides + locally-scoped rules), so the rest of the
   product (dashboard/employees/devices/attendance) is untouched. tokens.css is
   never edited. The brand logo above the sign-in form is NEVER altered — the
   hero only reuses the same image, enlarged and lit.
   ========================================================================== */

.auth {
  /* ---- Login-only brand override (scoped; does NOT leak to other pages) ---- */
  --brand:        #2563EB; /* blue-600 */
  --brand-hover:  #1D4ED8; /* blue-700 */
  --brand-soft:   #3B82F6;
  --brand-tint:   #EFF6FF;
  --brand-tint-2: #DBEAFE;
  --accent:       #06B6D4;
  --ring: 0 0 0 3px rgba(37, 99, 235, 0.18);

  min-height: 100vh;
  display: grid;
  grid-template-columns: 60fr 40fr;
  background: #EEF1FB;
  animation: authIn 0.6s var(--ease) both;
}

/* ==========================================================================
   LEFT — light premium hero
   ========================================================================== */
.auth-brand {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--text);
  padding: var(--sp-12);
  /* Soft lavender → blue → violet luxury gradient (purple richer top-right) */
  background:
    radial-gradient(75% 70% at 86% 16%, rgba(124, 58, 237, 0.20), transparent 60%),
    radial-gradient(60% 60% at 70% 64%, rgba(99, 102, 241, 0.14), transparent 60%),
    radial-gradient(60% 60% at 10% 6%, rgba(37, 99, 235, 0.10), transparent 60%),
    linear-gradient(145deg, #EEF2FF 0%, #E6ECFF 36%, #DCE6FF 62%, #E7DEFB 100%);
}

/* ---- Decorative atmosphere ---- */
.hero-fx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.aurora { position: absolute; border-radius: 50%; filter: blur(70px); will-change: transform; }
.aurora-1 {
  width: 560px; height: 560px; left: -140px; top: -120px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.28), transparent 70%);
  animation: auroraDrift1 26s ease-in-out infinite;
}
.aurora-2 {
  width: 520px; height: 520px; right: -120px; top: 6%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.24), transparent 70%);
  animation: auroraDrift2 32s ease-in-out infinite;
}
.aurora-3 {
  width: 600px; height: 600px; left: 18%; bottom: -260px;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.22), transparent 70%);
  animation: auroraDrift3 29s ease-in-out infinite;
}
/* Faint sweeping background arcs (upper-right) */
.bg-arc { position: absolute; border-radius: 50%; border: 1px solid rgba(99, 102, 241, 0.12); }
.arc-1 { width: 920px; height: 920px; right: -300px; top: -380px; }
.arc-2 { width: 1240px; height: 1240px; right: -360px; top: -470px; border-color: rgba(124, 58, 237, 0.09); }

/* Sparkles — tiny twinkling dots + a few 4-point glints */
.sparkles { position: absolute; inset: 0; }
.sparkles i { position: absolute; opacity: 0; animation: twinkle ease-in-out infinite; }
.sparkles i.sp {
  width: 4px; height: 4px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 10px rgba(124, 58, 237, 0.5);
}
/* 4-point glint */
.sparkles i.glint {
  width: 16px; height: 16px; background: transparent; box-shadow: none;
}
.sparkles i.glint::before, .sparkles i.glint::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0.95), rgba(255,255,255,0));
}
.sparkles i.glint::before { width: 1.5px; height: 16px; }
.sparkles i.glint::after  { width: 16px; height: 1.5px; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.95), rgba(255,255,255,0)); }
.sparkles i:nth-child(1)  { left: 22%; top: 14%; animation-duration: 5s;  animation-delay: 0s; }
.sparkles i:nth-child(2)  { left: 38%; top: 9%;  animation-duration: 6s;  animation-delay: 1.4s; }
.sparkles i:nth-child(3)  { left: 54%; top: 18%; animation-duration: 4.5s;animation-delay: 0.6s; }
.sparkles i:nth-child(4)  { left: 68%; top: 11%; animation-duration: 6.5s;animation-delay: 2.2s; }
.sparkles i:nth-child(5)  { left: 80%; top: 22%; animation-duration: 5.2s;animation-delay: 3s; }
.sparkles i:nth-child(6)  { left: 31%; top: 30%; animation-duration: 5.8s;animation-delay: 1s; }
.sparkles i:nth-child(7)  { left: 63%; top: 33%; animation-duration: 4.8s;animation-delay: 2.6s; }
.sparkles i:nth-child(8)  { left: 88%; top: 40%; animation-duration: 6.2s;animation-delay: 0.3s; }
.sparkles i:nth-child(9)  { left: 75%; top: 52%; animation-duration: 5.5s;animation-delay: 1.8s; }
.sparkles i:nth-child(10) { left: 46%; top: 13%; animation-duration: 7s;  animation-delay: 0.8s; }
.sparkles i:nth-child(11) { left: 70%; top: 26%; animation-duration: 8s;  animation-delay: 2.4s; }
.sparkles i:nth-child(12) { left: 84%; top: 46%; animation-duration: 7.5s;animation-delay: 1.2s; }
.sparkles i:nth-child(13) { left: 58%; top: 8%;  animation-duration: 8.5s;animation-delay: 3.4s; }

/* ---- Headline (top-left) ---- */
.auth-brand-copy { position: relative; z-index: 2; max-width: 440px; }
.auth-brand-copy .eyebrow { color: var(--brand); }
.auth-brand-copy h1 {
  color: var(--text); font-size: 3rem; line-height: 1.04;
  letter-spacing: -0.035em; margin-top: var(--sp-3); font-weight: var(--fw-semibold);
}
.auth-brand-copy h1 .grad {
  background: linear-gradient(100deg, #2563EB 0%, #06B6D4 46%, #7C3AED 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.auth-brand-copy p {
  margin-top: var(--sp-4); color: var(--text-2);
  font-size: var(--fs-base); font-weight: var(--fw-medium); line-height: var(--lh-snug);
  max-width: 360px;
}

/* ---- Giant glossy 3D-glass logo (lower-left, reuses the existing image) ---- */
.hero-logo {
  position: absolute; z-index: 1;
  left: -3%; bottom: 24%; width: 560px; height: 390px;
}
/* NEXUNOVA wordmark — text, multi-colour gradient (blue · purple · white) */
.hero-wordmark {
  position: absolute; z-index: 2; left: -3%; bottom: 25%; width: 560px;
  text-align: center; pointer-events: none;
}
.hero-wordmark .hw-name {
  display: block; font-size: 2.85rem; font-weight: 800; line-height: 1;
  letter-spacing: 0.22em; text-indent: 0.22em;
  background: linear-gradient(100deg, #38BDF8 0%, #2563EB 34%, #6D28D9 68%, #9333EA 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero-wordmark .hw-tag {
  display: block; margin-top: 13px;
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.42em; text-indent: 0.42em;
  text-transform: uppercase; color: var(--text-4);
}
/* Floor ring-ripples — concentric perspective ellipses radiating from the base
   so the logo reads as standing on a luminous surface (reference look). */
.hero-logo .hl-floor {
  display: none;
  position: absolute; left: 48%; top: 74%; z-index: 0;
  width: 620px; height: 390px;
  transform: translate(-50%, -50%) perspective(620px) rotateX(74deg);
  transform-origin: center;
  border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle at center, rgba(129, 140, 248, 0.22), transparent 46%),
    repeating-radial-gradient(circle at center,
      rgba(99, 102, 241, 0) 0px, rgba(99, 102, 241, 0) 62px,
      rgba(99, 102, 241, 0.34) 63px, rgba(129, 140, 248, 0.10) 65px, rgba(99, 102, 241, 0) 68px);
  -webkit-mask-image: radial-gradient(circle at center, #000 6%, transparent 62%);
          mask-image: radial-gradient(circle at center, #000 6%, transparent 62%);
}
/* Defined ground contact shadow — logo reads as a 3D object sitting on the floor */
.hero-logo .hl-glow {
  display: none;
  position: absolute; left: 48%; top: 262px; width: 300px; height: 48px; z-index: 0;
  transform: translate(-50%, 0);
  border-radius: 50%; filter: blur(22px);
  background: radial-gradient(circle, rgba(15, 23, 42, 0.30), rgba(15, 23, 42, 0.10) 46%, transparent 72%);
}
/* The 3D glass logo render: its white background is dropped via multiply blend
   so it melts into the hero; subtle static tilt + soft depth shadow. */
.hero-logo .hl-img {
  position: absolute; left: 0; top: 0; width: 560px; height: 374px; z-index: 1;
  object-fit: contain; object-position: center;
  mix-blend-mode: multiply;
  /* left forward (rotateY+), right edge up / left edge down (rotateZ−) */
  transform: perspective(1400px) rotateY(20deg) rotateZ(-9deg);
  transform-origin: 50% 70%;
  filter: drop-shadow(0 24px 28px rgba(15, 23, 42, 0.14));
}
.hero-logo .hl-reflect { display: none; }

/* ---- Floating glass feature cards — overlapping the logo (in front), with
   only the GLASS PANEL fading into the background on the right (text stays crisp). ---- */
.auth-features {
  position: absolute; z-index: 3;
  left: 57%; top: 50%; transform: translateY(-50%);
  width: 282px; display: flex; flex-direction: column; gap: var(--sp-3);
}
.auth-feature {
  position: relative;
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: 14px var(--sp-4);
  border-radius: 16px;
  transform: perspective(1100px) rotateY(-11deg) rotateX(2deg);
  transform-origin: 100% 50%;
  transition: transform 0.34s var(--ease), box-shadow 0.34s var(--ease);
  will-change: transform;
}
/* clean solid premium glass PANEL (no right-edge fade) in ::before so the
   icon/text stay crisp above it (z-index 1). */
.auth-feature::before {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 16px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 14px 32px rgba(30, 41, 90, 0.10);
  transition: background 0.28s var(--ease), box-shadow 0.28s var(--ease);
}
.auth-feature > * { position: relative; z-index: 1; }
.auth-feature:nth-child(1) { animation-delay: 0.12s; }
.auth-feature:nth-child(2) { animation-delay: 0.20s; }
.auth-feature:nth-child(3) { animation-delay: 0.28s; }
.auth-feature:hover {
  transform: perspective(1100px) rotateY(0deg) translateY(-6px) scale(1.025);
  z-index: 4;
}
.auth-feature:hover::before {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 1) inset, 0 28px 56px rgba(30, 41, 90, 0.22);
}
.auth-feature .fi {
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, #FFFFFF, #EEF3FF);
  border: 1px solid rgba(37, 99, 235, 0.14);
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.12);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.auth-feature .fi [data-lucide] { width: 18px; height: 18px; transition: color 0.3s var(--ease); }
.auth-feature:nth-child(1) .fi [data-lucide] { color: #2563EB; }
.auth-feature:nth-child(2) .fi [data-lucide] { color: #7C3AED; }
.auth-feature:nth-child(3) .fi [data-lucide] { color: #0D9488; }
/* hover: icon chip fills with its colour, icon turns white (premium pop) */
.auth-feature:hover .fi { border-color: transparent; transform: scale(1.06); }
.auth-feature:hover .fi [data-lucide] { color: #fff; }
.auth-feature:nth-child(1):hover .fi { background: linear-gradient(140deg, #2563EB, #06B6D4); box-shadow: 0 10px 22px rgba(37, 99, 235, 0.38); }
.auth-feature:nth-child(2):hover .fi { background: linear-gradient(140deg, #7C3AED, #4F46E5); box-shadow: 0 10px 22px rgba(124, 58, 237, 0.38); }
.auth-feature:nth-child(3):hover .fi { background: linear-gradient(140deg, #0D9488, #06B6D4); box-shadow: 0 10px 22px rgba(13, 148, 136, 0.38); }
.auth-feature .ft { display: flex; flex-direction: column; min-width: 0; }
.auth-feature .ft-h { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text); line-height: 1.3; letter-spacing: -0.01em; }
.auth-feature .ft-s { font-size: 0.6875rem; color: var(--text-3); font-weight: var(--fw-normal); margin-top: 2px; line-height: 1.4; }
/* hover callout: a connector line draws out to the left, then a glass text box appears */
/* premium in-card reveal: detail slides open inside the card on hover */
.auth-feature .ft-d {
  display: grid; grid-template-rows: 0fr; margin-top: 0;
  transition: grid-template-rows 0.4s var(--ease), margin-top 0.4s var(--ease);
}
.auth-feature .ft-d > span {
  overflow: hidden; font-size: 0.6875rem; line-height: 1.5; color: var(--text-2);
  opacity: 0; transform: translateY(4px);
  transition: opacity 0.34s var(--ease), transform 0.34s var(--ease);
}
.auth-feature:hover .ft-d { grid-template-rows: 1fr; margin-top: 7px; }
.auth-feature:hover .ft-d > span { opacity: 1; transform: translateY(0); transition-delay: 0.08s; }

/* corner arrow appears on hover */
.auth-feature .ft-arrow {
  position: absolute; top: 12px; right: 12px; width: 15px; height: 15px; stroke-width: 2.2;
  color: var(--text-4); opacity: 0; transform: translate(-3px, 3px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), color 0.3s var(--ease);
}
.auth-feature:hover .ft-arrow { opacity: 1; transform: translate(0, 0); }
.auth-feature:nth-child(1):hover .ft-arrow { color: #2563EB; }
.auth-feature:nth-child(2):hover .ft-arrow { color: #7C3AED; }
.auth-feature:nth-child(3):hover .ft-arrow { color: #0D9488; }

/* per-card colour glow on hover (card pops with its own hue) */
.auth-feature:nth-child(1):hover::before { box-shadow: 0 1px 0 rgba(255,255,255,1) inset, 0 26px 54px rgba(37, 99, 235, 0.26); border-color: rgba(37, 99, 235, 0.28); }
.auth-feature:nth-child(2):hover::before { box-shadow: 0 1px 0 rgba(255,255,255,1) inset, 0 26px 54px rgba(124, 58, 237, 0.26); border-color: rgba(124, 58, 237, 0.28); }
.auth-feature:nth-child(3):hover::before { box-shadow: 0 1px 0 rgba(255,255,255,1) inset, 0 26px 54px rgba(13, 148, 136, 0.26); border-color: rgba(13, 148, 136, 0.28); }

/* hover glass sheen across the card */
.auth-feature::after {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 16px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 44%);
  opacity: 0; transition: opacity 0.3s var(--ease);
}
.auth-feature:hover::after { opacity: 1; }

/* ---- Footer (bottom-left) ---- */
.auth-brand-foot {
  position: absolute; z-index: 2; left: var(--sp-12); bottom: var(--sp-8);
  display: flex; flex-direction: column; gap: 2px;
}
.auth-brand-foot .tagline { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-2); }
.auth-brand-foot .copy { font-size: var(--fs-xs); color: var(--text-3); }

/* ==========================================================================
   RIGHT — floating white sign-in card
   ========================================================================== */
.auth-form-wrap {
  position: relative; z-index: 1;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-10) var(--sp-8);
}
.auth-form {
  position: relative;
  width: 100%; max-width: 416px;
  padding: var(--sp-10);
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 28px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 30px 70px rgba(2, 6, 23, 0.18),
    0 4px 14px rgba(2, 6, 23, 0.06);
  animation: cardIn 0.6s var(--ease) both;
}

/* Decorative theme indicator (visual only) */
.theme-toggle {
  position: absolute; top: var(--sp-6); right: var(--sp-6);
  width: 36px; height: 36px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-2); border: 1px solid var(--border); color: var(--text-3);
  cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.theme-toggle:hover { background: #fff; color: var(--brand); border-color: var(--brand-tint-2); }
.theme-toggle [data-lucide] { width: 18px; height: 18px; }

/* Brand (logo + wordmark) — UNCHANGED brand identity */
.brandmark { display: inline-flex; align-items: center; gap: var(--sp-3); }
.brandmark .mark {
  width: 84px; height: 84px;
  display: inline-flex; align-items: center; justify-content: center;
}
.brandmark .mark img { width: 100%; height: 100%; object-fit: contain; image-rendering: -webkit-optimize-contrast; }
.brandmark .wordmark { font-size: var(--fs-2xl); font-weight: var(--fw-semibold); letter-spacing: -0.02em; color: var(--text); }
.brandmark .wordmark b { font-weight: var(--fw-semibold); }
.brandmark .wordmark .thin { color: var(--text-3); font-weight: var(--fw-medium); }
.auth-form .brandmark-top { display: inline-flex; margin-bottom: var(--sp-5); }

.auth-head { margin-bottom: var(--sp-6); }
.auth-head h2 { font-size: var(--fs-2xl); }
.auth-head p { margin-top: var(--sp-2); color: var(--text-3); font-weight: var(--fw-medium); }

.auth-form form { display: flex; flex-direction: column; gap: var(--sp-5); }
.auth-row-between { display: flex; align-items: center; justify-content: space-between; }
.auth-forgot { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }

#auth-alert { display: none; }
#auth-alert.show { display: flex; }

/* Divider */
.auth-divider {
  display: flex; align-items: center; text-align: center;
  margin: var(--sp-5) 0; color: var(--text-4); font-size: var(--fs-sm); font-weight: var(--fw-medium);
}
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.auth-divider span { padding: 0 var(--sp-3); }

.auth-foot {
  margin-top: var(--sp-6); padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm); color: var(--text-3); text-align: center;
}

/* ---- Login-scoped premium input + buttons (does NOT affect other pages) ---- */
.auth .input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16), 0 6px 18px rgba(37, 99, 235, 0.14);
}
.btn-ico { width: 18px; height: 18px; }
.auth .btn-primary {
  background: linear-gradient(135deg, #2563EB 0%, #4F46E5 100%);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.28);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.auth .btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #1D4ED8 0%, #4338CA 100%);
  box-shadow: 0 12px 30px rgba(79, 70, 229, 0.42), 0 0 0 1px rgba(99, 102, 241, 0.35);
  transform: translateY(-2px);
}
.auth .btn-primary:active:not(:disabled) { transform: translateY(0); }
.auth .btn-secondary { background: #fff; color: var(--text); border-color: var(--border-2); }
.auth .btn-secondary:hover:not(:disabled) { background: var(--bg-2); border-color: var(--brand-soft); color: var(--brand); }

/* ==========================================================================
   Keyframes
   ========================================================================== */
@keyframes authIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes cardIn { from { opacity: 0; transform: translateY(14px) scale(0.99); } to { opacity: 1; transform: none; } }
@keyframes heroIn { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes heroFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-16px) rotate(1.5deg); } }
/* 3D-tilted glass logo gently bobbing above its grounded shadow */
@keyframes floatTilt {
  0%, 100% { transform: perspective(1200px) translateY(0)     rotateX(9deg) rotateY(-7deg) rotateZ(-1deg); }
  50%      { transform: perspective(1200px) translateY(-12px) rotateX(9deg) rotateY(-7deg) rotateZ(-1deg); }
}
/* ground shadow tightens/lightens slightly as the logo lifts */
@keyframes shadowBreathe {
  0%, 100% { transform: translate(-50%, 0) scale(1);    opacity: 1; }
  50%      { transform: translate(-50%, 0) scale(0.9);  opacity: 0.7; }
}
@keyframes heroFloatR { 0%, 100% { transform: scaleY(-1) translateY(0) rotate(0deg); } 50% { transform: scaleY(-1) translateY(16px) rotate(-1.5deg); } }
@keyframes glowPulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; } 50% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; } }
@keyframes auroraDrift1 { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(42px, 30px) scale(1.08); } }
@keyframes auroraDrift2 { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-38px, 26px) scale(1.1); } }
@keyframes auroraDrift3 { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(32px, -36px) scale(1.06); } }
@keyframes particleFloat {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  15%  { opacity: 0.7; }
  85%  { opacity: 0.7; }
  100% { transform: translateY(-60px) translateX(16px); opacity: 0; }
}
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(0.6); }
  50%      { opacity: 0.9; transform: scale(1); }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px) {
  .auth { grid-template-columns: 56fr 44fr; }
  .hero-logo { width: 410px; height: 320px; left: 0; bottom: 10%; }
  .hero-logo .hl-img { width: 410px; height: 280px; }
  .hero-logo .hl-glow { width: 300px; top: 266px; }
  .auth-features { width: 262px; left: 50%; }
  .auth-brand-copy h1 { font-size: 2.625rem; }
}

@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; background: var(--bg); }
  .auth-brand { display: none; }                 /* brand lives in the form card */
  .auth-form-wrap { padding: var(--sp-8) var(--sp-5); align-items: flex-start; }
  .auth-form { margin-top: var(--sp-6); padding: var(--sp-8) var(--sp-6); }
}

@media (max-width: 420px) {
  .auth-form-wrap { padding: var(--sp-6) var(--sp-4); }
  .auth-form { padding: var(--sp-6) var(--sp-5); border-radius: 22px; }
  .auth-head h2 { font-size: var(--fs-xl); }
}

/* Respect reduced-motion: stop decorative motion */
@media (prefers-reduced-motion: reduce) {
  .auth, .auth-form, .hero-logo, .hl-img, .hl-reflect, .hl-glow,
  .aurora, .sparkles i, .auth-feature { animation: none !important; }
  .sparkles i { opacity: 0.7; }
}