/* Страница входа/регистрации */

/* Переключатель темы — в правом верхнем углу, как на остальных экранах */
.auth-corner { position: fixed; top: 14px; right: 14px; z-index: 10; }

.auth-wrap {
  min-height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; padding: 40px 16px;
  background:
    radial-gradient(800px 400px at 85% -10%, var(--primary-50), transparent 60%),
    var(--surface-50);
}

.auth-card { width: 100%; max-width: 400px; padding: 28px; }

.auth-title { font-size: 20px; line-height: 26px; }
.auth-sub { margin-top: 4px; margin-bottom: 18px; font-size: 13.5px; color: var(--surface-500); }

.auth-tabs {
  display: flex; gap: 4px; padding: 4px; margin-bottom: 20px;
  background: var(--surface-100); border-radius: var(--radius-md);
}
.auth-tab {
  flex: 1; padding: 7px 0; border: none; border-radius: var(--radius);
  background: transparent; color: var(--surface-500); font-size: 14px; font-weight: 500;
  cursor: pointer; transition: background .12s, color .12s;
}
.auth-tab.active { background: var(--surface-0); color: var(--primary-600); box-shadow: var(--shadow-1); }

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form .field input { padding: 10px 12px; }
.auth-form .btn { margin-top: 4px; padding: 10px 14px; font-size: 15px; }
.optional { color: var(--muted); font-weight: 400; }

/* Пароль с глазком */
.input-wrap { position: relative; }
.field .input-wrap input { padding-right: 42px; }
.eye-btn {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: none; border-radius: var(--radius);
  background: transparent; color: var(--surface-500); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.eye-btn:hover { color: var(--surface-800); background: var(--surface-100); }
.eye-btn .eye-closed { display: none; }
.eye-btn.revealed .eye-open { display: none; }
.eye-btn.revealed .eye-closed { display: block; }
.eye-btn.revealed { color: var(--primary-600); }

.caps-hint { font-size: 12px; color: var(--warn-700); }

.auth-alt { text-align: center; font-size: 13px; color: var(--surface-500); }
.auth-note { text-align: center; font-size: 12.5px; color: var(--surface-500); }

.auth-foot { font-size: 13px; color: var(--surface-500); }

#authError { margin-bottom: 14px; }

@media (max-width: 480px) {
  .auth-card { padding: 20px; }
}

/* Тёмная тема: активная вкладка и «глазок» — светлый оттенок синего из схемы */
:root[data-theme='dark'] .auth-tab.active,
:root[data-theme='dark'] .eye-btn.revealed { color: #a78bfa; }