.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }

.auth-hero {
  position: relative; overflow: hidden; display: flex; align-items: center; padding: 48px;
  color: #fff;
  background:
    radial-gradient(900px 500px at 10% -10%, rgba(155, 92, 246, 0.55), transparent 60%),
    radial-gradient(700px 500px at 110% 110%, rgba(0, 168, 132, 0.45), transparent 60%),
    linear-gradient(160deg, #1b1a4b 0%, #111127 100%);
}
.auth-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.hero-inner { position: relative; z-index: 1; max-width: 520px; margin: 0 auto; }
.hero-brand { color: #fff; margin-bottom: 48px; }
.auth-hero h1 { font-size: 34px; line-height: 1.15; letter-spacing: -0.025em; font-weight: 700; }
.hero-sub { margin-top: 14px; font-size: 15.5px; color: rgba(255, 255, 255, 0.72); max-width: 460px; }
.hero-points { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 12px; }
.hero-points li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: rgba(255, 255, 255, 0.88); }
.hero-points .pt-icon { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.1); }
.hero-points .icon { width: 16px; height: 16px; }

.hero-preview {
  margin-top: 40px; padding: 18px; border-radius: 16px; max-width: 360px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex; flex-direction: column; gap: 8px;
}
.bubble-demo { max-width: 78%; padding: 8px 12px; border-radius: 12px; font-size: 13px; line-height: 1.4; }
.bubble-demo.in { background: rgba(255, 255, 255, 0.95); color: #111b21; border-top-left-radius: 4px; }
.bubble-demo.out { align-self: flex-end; background: #d9fdd3; color: #111b21; border-top-right-radius: 4px; }
.demo-btns { display: flex; gap: 6px; margin-top: 8px; }
.demo-btns span { flex: 1; text-align: center; padding: 5px; border-radius: 7px; background: #f0f2f5; color: #008069; font-weight: 600; font-size: 12px; }

.auth-panel { display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: var(--surface); }
.auth-card { width: 100%; max-width: 380px; }
.auth-card h2 { font-size: 26px; letter-spacing: -0.02em; }
.auth-card > .muted { margin: 6px 0 28px; }
.mobile-brand { display: none; margin-bottom: 32px; }

.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 64px; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: none; background: none; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; padding: 6px 8px; border-radius: 5px;
}
.pw-toggle:hover { color: var(--text); background: var(--surface-2); }

.form-error { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--danger-soft); color: var(--danger); font-size: 13px; font-weight: 500; }
.switch-mode { margin-top: 22px; text-align: center; color: var(--muted); font-size: 13.5px; }
.switch-mode a { font-weight: 600; }
.secure-note { margin-top: 28px; display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--faint); font-size: 12px; }
.secure-note .icon { width: 13px; height: 13px; }

@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth-hero { display: none; }
  .mobile-brand { display: flex; }
}