.auth-shell {
  min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr;
}
@media (max-width: 980px){ .auth-shell { grid-template-columns: 1fr; } }
.auth-side {
  background:
    radial-gradient(80% 60% at 80% 20%, rgba(255,255,255,.15), transparent 60%),
    linear-gradient(160deg, var(--c-brand-600), var(--c-brand-400) 60%, var(--c-accent-500));
  color: #fff; padding: var(--s-9); display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
@media (max-width: 980px){ .auth-side { display: none; } }
.auth-side h2 { color: #fff; font-size: var(--fs-2xl); }
.auth-side .quote {
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(8px); padding: var(--s-5); border-radius: var(--r-lg); margin-top: var(--s-4);
}
.auth-side .quote .who { margin-top: var(--s-3); opacity: .9; font-size: var(--fs-sm); }
.auth-side .preview-mini {
  border-radius: var(--r-xl); background: rgba(255,255,255,.1); padding: var(--s-4);
  border: 1px solid rgba(255,255,255,.18); display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.auth-side .preview-mini .tile {
  aspect-ratio: 16/10; border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(255,255,255,.4), rgba(255,255,255,.18));
}

.auth-main { display: flex; align-items: center; justify-content: center; padding: var(--s-7); }
.auth-card { width: 100%; max-width: 400px; }
.auth-card h2 { margin-bottom: 8px; }
.auth-divider {
  display: flex; align-items: center; gap: 12px; margin: var(--s-5) 0; color: var(--c-text-mute); font-size: var(--fs-xs);
}
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--c-line); }
.google-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 12px; border: 1px solid var(--c-line);
  border-radius: var(--r-md); background: var(--c-surface); color: var(--c-text);
  font-weight: 600; cursor: pointer; transition: background var(--t-fast);
}
.google-btn:hover { background: var(--c-surface-2); }
.google-g {
  width: 18px; height: 18px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path fill='%23FFC107' d='M43.6 20.5h-1.9V20H24v8h11.3c-1.6 4.7-6 8-11.3 8-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.9 1.2 8 3.1l5.7-5.7C34.5 6.1 29.5 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20 20-8.9 20-20c0-1.2-.1-2.4-.4-3.5z'/><path fill='%23FF3D00' d='M6.3 14.7l6.6 4.8C14.6 16 19 13 24 13c3.1 0 5.9 1.2 8 3.1l5.7-5.7C34.5 7.1 29.5 5 24 5 16.1 5 9.3 9.4 6.3 14.7z'/><path fill='%234CAF50' d='M24 43c5.4 0 10.3-2.1 14-5.5l-6.5-5.5c-2 1.5-4.7 2.4-7.5 2.4-5.3 0-9.7-3.3-11.3-8l-6.5 5C9.1 38.8 16 43 24 43z'/><path fill='%231976D2' d='M43.6 20.5H24v8h11.3c-.8 2.3-2.3 4.2-4.3 5.5l6.5 5.5c-.5.4 7-5 7-15.5 0-1.2-.1-2.4-.4-3.5z'/></svg>") center/contain no-repeat;
}
.tab-row { display: flex; gap: 8px; padding: 4px; background: var(--c-surface-2); border-radius: var(--r-pill); margin-bottom: var(--s-5); }
.tab-row button {
  flex: 1; padding: 8px; border-radius: var(--r-pill); border: 0; background: transparent; cursor: pointer;
  color: var(--c-text-soft); font-weight: 600;
}
.tab-row button.active { background: var(--c-surface); color: var(--c-text); box-shadow: var(--sh-1); }