/* ── AUTH LAYOUT ── */
.auth-page { min-height:100vh; display:flex; }

.auth-left {
  flex:1;
  background:linear-gradient(145deg,#0d1526 0%,#111827 50%,#0A0E1A 100%);
  display:flex; flex-direction:column; justify-content:center;
  padding:60px; position:relative; overflow:hidden;
}
.auth-left::before {
  content:''; position:absolute;
  width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle,rgba(79,142,247,.15) 0%,transparent 70%);
  top:-80px; left:-80px; pointer-events:none;
}
.auth-left::after {
  content:''; position:absolute;
  width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle,rgba(124,92,252,.12) 0%,transparent 70%);
  bottom:40px; right:-60px; pointer-events:none;
}
.auth-left-inner { position:relative; z-index:1; }

.auth-right {
  width:460px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  padding:40px 36px; background:var(--surface); border-left:1px solid var(--border);
}
.auth-form { width:100%; max-width:360px; }
.auth-form-title { font-family:'Syne',sans-serif; font-weight:800; font-size:26px; margin-bottom:6px; }
.auth-form-sub   { color:var(--muted); font-size:14px; margin-bottom:28px; }
.auth-link { color:var(--accent); cursor:pointer; text-decoration:underline; }

/* ── HERO ── */
.hero-tag {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px; border-radius:99px;
  background:rgba(79,142,247,.12); border:1px solid rgba(79,142,247,.25);
  color:var(--accent); font-size:12px; font-weight:600; margin-bottom:24px;
}
.hero-title {
  font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(28px,3.5vw,44px);
  line-height:1.15; margin-bottom:20px;
}
.hero-title span {
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero-desc { color:var(--muted); font-size:15px; line-height:1.7; max-width:400px; margin-bottom:32px; }

.feature-list { display:flex; flex-direction:column; gap:12px; }
.feature-item { display:flex; align-items:center; gap:12px; font-size:14px; }
.feature-dot  { width:8px; height:8px; border-radius:50%; background:var(--accent3); flex-shrink:0; }

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */

/* Tablet: reduce left panel */
@media (max-width:900px) {
  .auth-left { padding:48px 40px; }
  .auth-right { width:400px; padding:32px 28px; }
  .hero-title { font-size:clamp(24px,3vw,36px); }
}

/* Mobile: stack vertically, left panel on top as header */
@media (max-width:640px) {
  .auth-page { flex-direction:column; }

  .auth-left {
    flex:none;
    padding:32px 24px 28px;
    min-height:auto;
  }
  .auth-left::before { width:200px; height:200px; }
  .auth-left::after  { width:150px; height:150px; }

  .hero-title { font-size:24px; margin-bottom:12px; }
  .hero-desc  { font-size:13px; margin-bottom:0; }
  .feature-list { display:none; } /* hide on small screens to save space */
  .hero-tag { font-size:11px; margin-bottom:14px; }

  .auth-right {
    width:100%; flex:1;
    border-left:none; border-top:1px solid var(--border);
    padding:28px 20px 32px;
    align-items:flex-start;
  }
  .auth-form { max-width:100%; }
  .auth-form-title { font-size:22px; }
}