/* ── Auth page styles ── */
html, body { overflow: auto; height: auto; }

.auth-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding-top: 48px; padding-bottom: 48px;
}
.auth-card {
  width: 380px; background: var(--bg-2); border-radius: var(--radius);
  padding: 40px; box-shadow: var(--shadow-lg); border: 1px solid var(--border);
}
.auth-logo {
  font-weight: 700; font-size: 18px; text-align: center; margin-bottom: 8px;
  color: var(--text); letter-spacing: -0.3px;
}
.auth-title {
  font-size: 15px; font-weight: 500; text-align: center; color: var(--text-2);
  margin-bottom: 28px;
}
.auth-input {
  display: block; width: 100%; padding: 10px 14px; margin-bottom: 14px;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: rgba(255,255,255,.45); color: var(--text);
  font-family: var(--font); font-size: 13px; outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.auth-input::placeholder { color: var(--text-3); }
.auth-input:focus { border-color: var(--border-2); background: rgba(255,255,255,.65); }
.auth-btn {
  display: block; width: 100%; padding: 11px; margin-top: 6px;
  border-radius: 980px; border: none; cursor: pointer;
  background: var(--text); color: #fff; font-family: var(--font);
  font-size: 14px; font-weight: 500; transition: opacity .2s;
}
.auth-btn:hover { opacity: .85; }
.auth-error {
  display: none; text-align: center; color: #d73a49; font-size: 12px;
  margin-bottom: 12px; padding: 8px; background: rgba(215,58,73,.06);
  border-radius: var(--radius-sm);
}
.auth-error.show { display: block; }
.auth-link {
  text-align: center; margin-top: 20px; font-size: 12px; color: var(--text-3);
}
.auth-link a { color: var(--text); text-decoration: none; font-weight: 500; }
.auth-link a:hover { text-decoration: underline; }

@media (max-width: 420px) {
  .auth-card { width: calc(100% - 32px); padding: 28px 20px; }
}