/* ═══════════════════════════════════════════
   Boxing Vision — Auth Pages
   Dark dominant. B&W base. Lime = whisper.
   ═══════════════════════════════════════════ */

/* ── Tokens ── */
:root {
  --auth-bg: #0B0D0F;
  --auth-text: #E8E8E4;
  --auth-text-2: #7A7D83;
  --auth-text-3: #4A4D52;
  --auth-border: #1E2025;
  --auth-border-focus: #8FA012;
  --auth-input-bg: #131518;
  --auth-btn-bg: #E8E8E4;
  --auth-btn-text: #0B0D0F;
  --auth-btn-hover: #D0D0CC;
  --auth-btn-disabled-bg: #181A1E;
  --auth-btn-disabled-text: #3A3D42;
  --auth-error: #DC4444;
  --auth-error-bg: #1A1214;
  --auth-error-border: #2D1E1E;
  --auth-accent: #B8CC3E;
  --auth-footer: #5E6166;
  --auth-focus-shadow: 0 0 0 1px rgba(143, 160, 18, 0.22), 0 0 6px rgba(143, 160, 18, 0.04);
  --auth-logo-bg: #E8E8E4;
  --auth-logo-fg: #0B0D0F;
  --auth-forgot: #4A4D52;
}

/* ── Reset ── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ── Page ── */
.auth-page {
  min-height: 100vh;
  width: 100%;
  background-color: var(--auth-bg);
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Main ── */
.auth-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}

/* ── Card ── */
.auth-card {
  width: 100%;
  max-width: 380px;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 280ms ease, transform 280ms ease;
}
.auth-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Header ── */
.auth-header {
  text-align: center;
  margin-bottom: 44px;
}

.auth-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background-color: var(--auth-logo-bg);
  color: var(--auth-logo-fg);
  margin-bottom: 28px;
}

.auth-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--auth-text);
  letter-spacing: -0.035em;
  line-height: 1.3;
  margin-bottom: 8px;
}

.auth-subtitle {
  font-size: 15px;
  color: var(--auth-text-2);
  letter-spacing: -0.005em;
  line-height: 1.5;
  font-weight: 400;
}

/* ── Form ── */
.auth-form {
  display: flex;
  flex-direction: column;
}

.auth-field {
  margin-bottom: 20px;
}

.auth-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--auth-text-2);
  letter-spacing: -0.01em;
  line-height: 16px;
  margin-bottom: 6px;
}

.auth-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 16px;
  margin-bottom: 6px;
}
.auth-label-row .auth-label {
  margin-bottom: 0;
}

/* ── Forgot ── */
.auth-forgot {
  font-size: 13px;
  font-weight: 500;
  color: var(--auth-forgot);
  text-decoration: none;
  opacity: 0.7;
  letter-spacing: -0.005em;
  line-height: 16px;
  transition: opacity 150ms ease, color 150ms ease;
}
.auth-forgot:hover {
  opacity: 1;
  color: var(--auth-accent);
}

/* ── Inputs ── */
.auth-input {
  width: 100%;
  padding: 11px 14px;
  font-size: 15px;
  font-family: inherit;
  font-weight: 400;
  color: var(--auth-text);
  background-color: var(--auth-input-bg);
  border: 1px solid var(--auth-border);
  border-radius: 10px;
  outline: none;
  letter-spacing: -0.01em;
  line-height: 22px;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.auth-input::placeholder {
  color: var(--auth-text-3);
  opacity: 1;
}
.auth-input:focus {
  border-color: var(--auth-border-focus);
  box-shadow: var(--auth-focus-shadow);
}
.auth-input.has-error {
  border-color: var(--auth-error);
}

/* Input wrap for password + eye */
.auth-input-wrap {
  position: relative;
}
.auth-input-wrap .auth-input {
  padding-right: 42px;
}

/* ── Eye toggle ── */
.auth-eye {
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px;
  display: flex;
  align-items: center;
  color: var(--auth-text);
  opacity: 0.25;
  transition: opacity 180ms ease;
}
.auth-eye:hover {
  opacity: 0.75;
}
.auth-eye.is-visible {
  opacity: 0.6;
}

/* ── Errors ── */
.auth-error {
  margin-top: -4px;
  margin-bottom: 20px;
  padding: 10px 14px;
  background-color: var(--auth-error-bg);
  border: 1px solid var(--auth-error-border);
  border-radius: 10px;
  font-size: 13px;
  color: var(--auth-error);
  line-height: 1.5;
  letter-spacing: -0.005em;
  font-weight: 400;
}

.auth-field-error {
  margin-top: 6px;
  font-size: 13px;
  color: var(--auth-error);
  line-height: 1.4;
  letter-spacing: -0.005em;
}

/* ── Button ── */
.auth-btn {
  width: 100%;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: -0.01em;
  line-height: 1;
  border-radius: 10px;
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 150ms ease;
  color: var(--auth-btn-disabled-text);
  background-color: var(--auth-btn-disabled-bg);
  border: 1px solid var(--auth-border);
}

.auth-btn.is-active {
  color: var(--auth-btn-text);
  background-color: var(--auth-btn-bg);
  border: 1px solid transparent;
  cursor: pointer;
}
.auth-btn.is-active:hover {
  background-color: var(--auth-btn-hover);
}
.auth-btn.is-active:active {
  transform: scale(0.982);
}

.auth-btn__spinner svg {
  animation: bv-spin 0.6s linear infinite;
}
@keyframes bv-spin {
  to { transform: rotate(360deg); }
}

/* ── Switch ── */
.auth-switch {
  text-align: center;
  margin-top: 32px;
  font-size: 14px;
  color: var(--auth-text-2);
  letter-spacing: -0.005em;
  font-weight: 400;
}
.auth-switch__link {
  color: var(--auth-accent);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  letter-spacing: -0.005em;
  border-bottom: 1px solid transparent;
  transition: border-color 150ms ease;
}
.auth-switch__link:hover {
  border-bottom-color: var(--auth-accent);
}

/* ── Footer ── */
.auth-footer {
  padding: 14px 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  opacity: 0;
  transition: opacity 600ms ease 350ms;
}
.auth-footer.is-visible {
  opacity: 0.45;
}

.auth-footer__secure {
  font-size: 11px;
  color: var(--auth-footer);
  display: inline-flex;
  align-items: center;
  letter-spacing: 0.01em;
}

.auth-footer__sep {
  font-size: 9px;
  color: var(--auth-border);
}

.auth-footer__link {
  font-size: 11px;
  color: var(--auth-footer);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 150ms ease;
}
.auth-footer__link:hover {
  color: var(--auth-text-2);
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .auth-main {
    padding: 40px 20px;
  }
  .auth-card {
    max-width: 100%;
  }
}