/* PostZenly auth pages — premium split-screen.
   Scoped to login/signup only. Do not import into app styles. */

:root {
  --az-indigo: #4f46e5;
  --az-violet: #7c3aed;
  --az-ink: #111827;
  --az-sub: #6b7280;
  --az-line: #e5e7eb;
  --az-bg: #f8fafc;
  --az-card: #ffffff;
}

* { box-sizing: border-box; }

.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--az-ink);
  background: var(--az-bg);
  margin: 0;
}

/* ---------- brand panel ---------- */
.auth-brand {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #312e81 0%, var(--az-indigo) 45%, var(--az-violet) 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem 4.5rem;
}

.auth-brand::before {
  content: "";
  position: absolute;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.14), transparent 65%);
  top: -140px; right: -140px;
}

.auth-brand::after {
  content: "";
  position: absolute;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.09), transparent 65%);
  bottom: -120px; left: -100px;
}

.auth-brand-inner { position: relative; z-index: 1; max-width: 420px; }

.auth-logo {
  display: flex; align-items: center; gap: .8rem;
  margin-bottom: 2.75rem;
}

.auth-logo-mark {
  width: 44px; height: 44px; border-radius: 14px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.28);
  display: grid; place-items: center;
  backdrop-filter: blur(6px);
}

.auth-logo-mark svg { width: 24px; height: 24px; stroke: #fff; }

.auth-logo-name { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }

.auth-tagline { font-size: 1.9rem; font-weight: 800; line-height: 1.22; letter-spacing: -0.025em; margin: 0 0 .9rem; }

.auth-tagline-sub { font-size: 1rem; color: rgba(255,255,255,.78); line-height: 1.6; margin: 0 0 2.25rem; }

.auth-points { list-style: none; margin: 0 0 2.5rem; padding: 0; display: grid; gap: 1.15rem; }

.auth-points li { display: flex; align-items: flex-start; gap: .85rem; }

.auth-point-icon {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  display: grid; place-items: center;
}

.auth-point-icon svg { width: 17px; height: 17px; stroke: #fff; }

.auth-points strong { display: block; font-size: .95rem; font-weight: 700; }
.auth-points span { font-size: .85rem; color: rgba(255,255,255,.72); }

/* decorative scheduled-post mock */
.auth-mock {
  position: relative; z-index: 1;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 16px;
  padding: 1rem 1.15rem;
  backdrop-filter: blur(8px);
  max-width: 340px;
}

.auth-mock-row { display: flex; align-items: center; gap: .7rem; }

.auth-mock-dot { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #f0abfc, #818cf8); flex: none; }

.auth-mock-title { font-size: .85rem; font-weight: 700; }
.auth-mock-sub { font-size: .75rem; color: rgba(255,255,255,.7); }

.auth-mock-pill {
  margin-top: .85rem;
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .75rem; font-weight: 700;
  background: #10b981; color: #062e24;
  border-radius: 999px; padding: .32rem .8rem;
}

.auth-mock-pill svg { width: 13px; height: 13px; stroke: currentColor; }

/* ---------- form panel ---------- */
.auth-form-wrap {
  display: flex; align-items: center; justify-content: center;
  padding: 3rem 2rem;
}

.auth-card { width: 100%; max-width: 400px; }

.auth-card h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 .4rem; }

.auth-card .auth-sub { color: var(--az-sub); font-size: .95rem; margin: 0 0 1.75rem; }

.auth-plan {
  font-size: .85rem; line-height: 1.55;
  background: #eef2ff; border: 1px solid #e0e7ff; color: #3730a3;
  border-radius: 12px; padding: .8rem 1rem; margin: 0 0 1.4rem;
}

.flash {
  font-size: .85rem; border-radius: 12px; padding: .8rem 1rem; margin: 0 0 1.2rem;
}
.flash-error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.flash-ok { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; }

.auth-field { margin-bottom: 1.1rem; }

.auth-field label {
  display: block; font-size: .82rem; font-weight: 700; margin-bottom: .4rem; color: #374151;
}

.auth-input {
  width: 100%; font: inherit; font-size: .95rem;
  border: 1px solid var(--az-line); border-radius: 12px;
  padding: .75rem 1rem; background: var(--az-card);
  transition: border-color .15s, box-shadow .15s;
}

.auth-input:focus {
  outline: none; border-color: var(--az-indigo);
  box-shadow: 0 0 0 3px rgba(79,70,229,.14);
}

.auth-hint { font-size: .78rem; color: var(--az-sub); margin-top: .35rem; }

.auth-submit {
  width: 100%; font: inherit; font-weight: 700; font-size: .95rem;
  color: #fff; background: var(--az-indigo);
  border: none; border-radius: 12px; padding: .8rem;
  cursor: pointer; margin-top: .35rem;
  transition: background .15s, transform .05s;
}

.auth-submit:hover { background: #4338ca; }
.auth-submit:active { transform: scale(.99); }

.auth-alt {
  text-align: center; font-size: .88rem; color: var(--az-sub); margin-top: 1.6rem;
}

.auth-alt a { color: var(--az-indigo); font-weight: 700; text-decoration: none; }
.auth-alt a:hover { text-decoration: underline; }

.auth-foot { margin-top: 2.5rem; text-align: center; font-size: .76rem; color: #9ca3af; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }

  .auth-brand {
    padding: 1.6rem 1.75rem;
    justify-content: flex-start;
  }

  .auth-brand-inner > *:not(.auth-logo) { display: none; }
  .auth-logo { margin-bottom: 0; }
  .auth-logo-name { font-size: 1.1rem; }

  .auth-form-wrap { padding: 2.5rem 1.5rem; align-items: flex-start; }
}

/* ---- social auth: Google + magic link (2026-09-28) ---- */
.auth-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 13px; margin-bottom: 4px;
  background: #fff; border: 1.5px solid #dde1f0; border-radius: 14px;
  font: inherit; font-weight: 700; font-size: 15px; color: #1a1d33;
  text-decoration: none; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.auth-google:hover { border-color: #b9c0e4; box-shadow: 0 8px 20px -10px rgba(20,22,43,.25); }
.auth-google:active { transform: scale(.99); }
.auth-google svg { width: 20px; height: 20px; flex: none; }
.auth-div {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0; color: #8b91b8; font-size: 12.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
}
.auth-div::before, .auth-div::after {
  content: ""; flex: 1; height: 1px; background: #e6e9f5;
}
.auth-magic-btn {
  width: 100%; padding: 12px; border-radius: 14px;
  border: 1.5px solid #dde1f0; background: #f6f7fd;
  font: inherit; font-weight: 700; font-size: 14.5px; color: #3c4190;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.auth-magic-btn:hover { background: #eef0fc; border-color: #b9c0e4; }