/* Hérite des variables globales : --brand, --ink, --muted, --line, --surface, --surface-2, etc. */

.auth { padding: 3.2rem 0 4rem; }
.auth-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 2px);
  box-shadow: 0 10px 24px rgba(2,12,27,.06);
  padding: clamp(1rem, 2.5vw, 2rem);
  max-width: 720px;
}
.auth-title {
  margin: 0 0 1rem;
  font-size: clamp(1.4rem, 3.2vw, 2rem);
  font-weight: 800;
}
.auth-form { display: grid; gap: .7rem; margin-top: .6rem; }
.field { display:flex; align-items:center; gap:.6rem; background:#fff; border:1px solid var(--line); border-radius:12px; padding:.7rem .9rem; }
.field input { border:0; outline:0; width:100%; font-size:1rem; background:transparent; color:var(--ink); }
.checkbox { display:flex; align-items:flex-start; gap:.55rem; color:var(--ink); line-height:1.35; }
.checkbox input { margin-top:.2rem; width:18px; height:18px; }
.auth-actions { display:flex; justify-content:flex-end; margin:.15rem 0 .4rem; }
.link { color: var(--brand); text-decoration: none; font-weight: 600; }
.link:hover { text-decoration: underline; }
.auth-alt { margin-top: .9rem; color: var(--muted); }
.small { font-size: .875rem; }
.muted { color: var(--muted); }
.line { margin:.2rem 0 1rem; }
.remember { margin-top:.2rem; }

.back-link { display:inline-block; margin-bottom:.2rem; color:var(--muted); text-decoration:none; }
.back-link:hover { color:var(--ink); }

.resend { margin-top:.6rem; display:flex; }
.resend .btn { width: 100%; }

@media (max-width: 720px) {
  .auth-card { padding: 1rem; }
}