.vesta-auth-layout { min-height: 100vh; display:grid; grid-template-columns: 1.1fr .9fr; background: var(--vesta-app-bg); }
.vesta-auth-layout__visual { position:relative; display:flex; align-items:center; justify-content:center; padding:48px; background: radial-gradient(circle at top left, rgba(201,120,50,.15), transparent 45%), linear-gradient(180deg,#151515 0%,#222 100%); color:#fff; }
.vesta-auth-layout__visual::before { content:''; position:absolute; inset:0; background-image: var(--vesta-auth-bg, none); background-size: cover; background-position: center; opacity: .18; }
.vesta-auth-layout__visual-inner { position:relative; max-width:520px; }
.vesta-auth-layout__visual h1 { font-size:36px; line-height:1.15; margin: 12px 0; }
.vesta-auth-layout__visual p { color: rgba(255,255,255,.82); font-size:15px; line-height:1.7; }
.vesta-auth-hero-label { display:inline-flex; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); border-radius:999px; padding:8px 12px; font-size:12px; }
.vesta-auth-layout__panel { display:flex; align-items:center; justify-content:center; padding:40px 24px; }
.vesta-auth-card { width:min(460px, 100%); background:#fff; border:1px solid var(--vesta-border); border-radius:20px; padding:28px; box-shadow:0 12px 40px rgba(0,0,0,.04); }
.vesta-auth-card__brand { display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.vesta-auth-card__header h2 { margin:0 0 8px; font-size:26px; }
.vesta-auth-card__header p { margin:0 0 20px; color:var(--vesta-text-2); }
.vesta-auth-card__footer { margin-top:18px; color:var(--vesta-muted); font-size:12px; text-align:center; }
.vesta-auth-links { margin-top:16px; display:flex; justify-content:center; gap:10px; color:var(--vesta-text-2); font-size:13px; flex-wrap:wrap; }
.vesta-alert { border-radius:12px; padding:12px 14px; margin-bottom:16px; font-size:14px; }
.vesta-alert--error { background:#fff0f0; color:#8a2626; border:1px solid #f5caca; }
.vesta-alert--success { background:#edf9f2; color:#187344; border:1px solid #bae4cb; }
@media (max-width: 1023px) {
  .vesta-auth-layout { grid-template-columns: 1fr; }
  .vesta-auth-layout__visual { min-height: 240px; padding: 32px 24px; }
}
@media (max-width: 767px) {
  .vesta-auth-layout__visual { min-height: 180px; padding: 24px 18px; }
  .vesta-auth-layout__visual h1 { font-size: 28px; }
  .vesta-auth-layout__panel { padding: 18px 12px 24px; }
  .vesta-auth-card { padding: 20px 16px; border-radius: 16px; }
  .vesta-auth-card__header h2 { font-size: 22px; }
}