.auth-wrap {
  min-height: calc(100vh - 180px);
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
}

.auth-card {
  width: min(100%, 480px);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--color-surface) 94%, var(--color-bg) 6%) 0%, var(--color-surface) 100%);
  box-shadow: 0 22px 46px color-mix(in srgb, var(--color-foreground) 10%, transparent);
  padding: 1.5rem;
}

.auth-eyebrow {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: .4rem;
}

.auth-card h1 {
  margin: 0;
  font-size: clamp(1.5rem, 3.5vw, 2rem);
}

.auth-subtitle {
  color: var(--color-muted);
  margin: .45rem 0 1.2rem;
}

.auth-form {
  display: grid;
  gap: .9rem;
}

.auth-field {
  display: grid;
  gap: .35rem;
}

.auth-label {
  font-weight: 600;
  font-size: .92rem;
}

.auth-hint {
  margin: 0;
  color: var(--color-muted);
  font-size: .82rem;
}

.auth-password-row {
  position: relative;
}

.auth-password-row .input {
  padding-right: 6.4rem;
}

.password-toggle {
  position: absolute;
  right: .35rem;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-foreground);
  border-radius: 10px;
  font-size: .78rem;
  font-weight: 700;
  padding: .34rem .58rem;
  cursor: pointer;
}

.password-toggle:hover { opacity: .9; }

.auth-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .8rem;
  margin-top: .3rem;
}

.auth-inline-link {
  font-size: .9rem;
  color: var(--color-muted);
}

.auth-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 1.2rem 0 .95rem;
}

.auth-providers-title {
  margin: 0 0 .65rem;
  color: var(--color-muted);
  font-size: .9rem;
}

@media (max-width: 540px) {
  .auth-card {
    border-radius: 16px;
    padding: 1rem;
  }
}

/* ── Auth Modal ─────────────────────────────────────────────────────────── */

#auth-modal {
  border: none;
  border-radius: 20px;
  padding: 0;
  max-width: min(480px, 92vw);
  width: 100%;
  background: transparent;
  overflow: visible;
  color: inherit;
  /* Center the dialog — CSS reset removes UA default margin: auto */
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
}

#auth-modal::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: authBackdropIn 180ms ease forwards;
}

@keyframes authBackdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#auth-modal .auth-card {
  animation: authModalIn 220ms cubic-bezier(.22, .68, 0, 1.2) forwards;
}

@keyframes authModalIn {
  from { opacity: 0; transform: translateY(-10px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)      scale(1);  }
}

.auth-modal-close {
  position: absolute;
  top: .7rem;
  right: .7rem;
  background: none;
  border: 1px solid var(--color-border);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-muted);
  cursor: pointer;
  line-height: 1;
  padding: .25rem .5rem;
  border-radius: 8px;
  transition: color .15s, border-color .15s;
}
.auth-modal-close:hover {
  color: var(--color-foreground);
  border-color: var(--color-foreground);
}

/* Tab switcher */
.auth-modal-tabs {
  display: flex;
  gap: 1.2rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: .6rem;
}

.auth-modal-tab {
  background: none;
  border: none;
  font-size: .95rem;
  font-weight: 600;
  color: var(--color-muted);
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: color .15s;
}

.auth-modal-tab::after {
  content: '';
  position: absolute;
  bottom: -.64rem;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-accent, #3b82f6);
  transform: scaleX(0);
  transition: transform .2s;
}

.auth-modal-tab.active {
  color: var(--color-foreground);
}

.auth-modal-tab.active::after {
  transform: scaleX(1);
}

.auth-modal-panel {
  display: none;
}

.auth-modal-panel.active {
  display: block;
}

.auth-modal-title {
  margin: 0 0 .9rem;
  font-size: clamp(1.3rem, 3vw, 1.7rem);
}

/* ══════════════════════════════════════════════════════
   OAUTH BUTTON IMPROVEMENTS — Brand icons & hover effects
══════════════════════════════════════════════════════ */

/* OAuth button base — pill-shaped with brand feel */
.auth-providers {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.oauth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
  border: none;
  color: #fff;
  flex: 1;
  min-width: 100px;
  text-align: center;
}
.oauth-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.oauth-btn:active {
  transform: scale(0.97);
}
/* VK brand — inline SVG icon before text */
.oauth-vk {
  background: #0077ff;
}
.oauth-vk::before {
  content: '';
  display: inline-block;
  width: 20px; height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M15.07 2H8.93C3.33 2 2 3.33 2 8.93v6.14C2 20.67 3.33 22 8.93 22h6.14C20.67 22 22 20.67 22 15.07V8.93C22 3.33 20.67 2 15.07 2zm3.08 14.27h-1.69c-.64 0-.83-.51-1.97-1.67-1-.96-1.44-1.09-1.69-1.09-.35 0-.45.1-.45.58v1.52c0 .41-.13.66-1.22.66-1.8 0-3.8-1.09-5.21-3.13C3.85 10.47 3.4 8.57 3.4 8.12c0-.25.1-.48.58-.48h1.69c.43 0 .6.19.76.66.84 2.42 2.24 4.54 2.82 4.54.21 0 .31-.1.31-.64V10.2c-.06-1.16-.68-1.26-.68-1.67 0-.19.16-.39.42-.39h2.66c.36 0 .49.19.49.63v3.44c0 .36.16.49.26.49.21 0 .39-.13.79-.53 1.22-1.37 2.1-3.47 2.1-3.47.12-.25.31-.48.74-.48h1.69c.51 0 .62.26.51.63-.21.94-2.22 3.81-2.22 3.81-.18.29-.24.41 0 .74.18.24.76.74 1.15 1.19.72.83 1.27 1.52 1.42 2 .15.48-.08.74-.56.74z'/%3E%3C/svg%3E") no-repeat center/contain;
  flex-shrink: 0;
}
/* Yandex brand */
.oauth-yandex {
  background: #fc3f1d;
}
.oauth-yandex::before {
  content: '';
  display: inline-block;
  width: 20px; height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M13.32 21.634h2.408V2.366h-3.267c-3.836 0-5.864 2.163-5.864 5.293 0 2.555 1.25 4.112 3.572 5.702l-4.073 8.273h2.605l4.376-9.05-.963-.638c-1.908-1.282-2.883-2.466-2.883-4.5 0-2.035 1.282-3.44 3.43-3.44h.66v17.628z'/%3E%3C/svg%3E") no-repeat center/contain;
  flex-shrink: 0;
}
/* MAX brand */
.oauth-max {
  background: #1a1a1a;
}
.oauth-max::before {
  content: 'M';
  font-weight: 800;
  font-size: 1rem;
}

/* ══════════════════════════════════════════════════════
   REGISTER FORM — Password strength improvements
══════════════════════════════════════════════════════ */
.pw-requirements {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 6px;
}
.pw-req {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s;
}
.pw-req.met { color: var(--color-success, #0c8e64); }
.pw-req.met::before { content: '✓'; font-weight: 700; }
.pw-req:not(.met)::before { content: '○'; }

/* ══════════════════════════════════════════════════════
   AUTH CARD ENTRANCE ANIMATION
══════════════════════════════════════════════════════ */
.auth-card {
  animation: auth-slide-in 0.4s ease forwards;
}
@keyframes auth-slide-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}