.signin {
  min-height: 100vh;
  max-width: 420px; margin: 0 auto;
  padding: var(--space-3) var(--space-3) var(--space-5);
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-3);
}
.signin__card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-5) var(--space-4); }
.signin__title { font-size: 1.6rem; font-weight: 900; }
.signin__tagline { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.signin__google { width: 100%; min-height: 52px; margin-top: var(--space-3); background: var(--color-google-bg); color: var(--color-google-ink); border-color: var(--color-border); font-size: 1rem; }
.signin__google:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); }
.signin__g { width: 20px; height: 20px; flex: none; }
.signin__note { text-align: center; color: var(--color-muted); font-size: 0.85rem; }
.signin__or { width: 100%; display: flex; align-items: center; gap: var(--space-2); color: var(--color-muted); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.signin__or::before, .signin__or::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }
.signin__form { width: 100%; display: flex; flex-direction: column; gap: var(--space-3); text-align: left; }
.signin__form .btn--ghost { align-self: center; }