/* ==========================================================================
   Pagina di login (usa i token e i componenti del resto della UI)
   ========================================================================== */
.auth-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
}

.auth-card {
  width: min(430px, 100%);
  animation: fade-up 0.7s var(--ease) backwards;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}
.auth-brand .brand-mark { width: 40px; height: 40px; filter: none; }

.auth-title { font-size: clamp(1.8rem, 6vw, 2.3rem); letter-spacing: -0.015em; }
.auth-sub { margin: 8px 0 24px; font-size: 0.95rem; }

.auth-hint { margin: 6px 0 8px; font-weight: 400; color: var(--text-2); }
.auth-code {
  display: block;
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  overflow-wrap: anywhere;
}

.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 52px; }
.pw-toggle { position: absolute; top: 9px; right: 9px; }
.pw-toggle svg { width: 16px; height: 16px; }

.check {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 22px;
  color: var(--text-2);
  font-size: 0.9rem;
  cursor: pointer;
  user-select: none;
}
.check input { width: 18px; height: 18px; flex: none; accent-color: var(--accent); cursor: pointer; }
.check small { color: var(--text-3); }

.auth-submit { width: 100%; height: 52px; font-size: 1rem; }
.input:disabled, .auth-submit:disabled { opacity: 0.55; cursor: not-allowed; }