:root{
  --auth-primary: #0ea5a4; /* teal-500 */
  --auth-secondary: #6366f1; /* indigo-500 */
  --auth-accent: #06b6d4;
  --auth-card-bg: rgba(255,255,255,0.85);
  --auth-backdrop: rgba(255,255,255,0.35);
}

/* Premium auth styles */
body.auth-authpage { font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; }

.auth-hero {
  background: linear-gradient(135deg, rgba(99,102,241,0.12) 0%, rgba(14,165,164,0.06) 40%, rgba(14,165,164,0.04) 100%);
}

.auth-left-panel{
  padding: 48px 32px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:20px;
}
.auth-left-panel h2{ font-size:28px; font-weight:700; color: #0f172a; }
.auth-left-panel p{ color: #334155; }

.auth-card {
  background: var(--auth-card-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(15,23,42,0.04);
}

.auth-cta-gradient {
  background: linear-gradient(90deg, var(--auth-primary), var(--auth-secondary));
}

.auth-input:focus{ box-shadow: 0 6px 18px rgba(14,165,164,0.12); border-color: var(--auth-primary); }

.brand-badge{ display:inline-flex; align-items:center; gap:10px; }
.brand-badge img{ width:46px; height:46px; }

@media (min-width: 768px){
  .auth-left-panel { padding:64px 56px; }
}

/* subtle floating circle decorations */
.auth-deco-circle { position: absolute; border-radius: 9999px; filter: blur(34px); opacity: 0.12; }
.auth-deco-a { width: 260px; height: 260px; right: -80px; top: -60px; background: linear-gradient(45deg, var(--auth-secondary), var(--auth-primary)); }
.auth-deco-b { width: 160px; height: 160px; left: -40px; bottom: -30px; background: linear-gradient(45deg, rgba(6,182,212,0.9), rgba(99,102,241,0.85)); }