.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-deep);
  overflow: hidden;
}

.auth-screen[data-state="hidden"] {
  display: none;
}

.app-shell[data-auth="hidden"] {
  display: none;
}

.auth-bg {
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(ellipse 80% 60% at 30% 70%, rgba(12,91,99,.25), transparent 60%),
    radial-gradient(ellipse 50% 50% at 70% 30%, rgba(214,167,108,.08), transparent 50%),
    radial-gradient(ellipse 70% 40% at 50% 100%, rgba(6,50,55,.3), transparent 50%),
    radial-gradient(ellipse 60% 50% at 20% 20%, rgba(143,214,210,.06), transparent 50%),
    linear-gradient(180deg, #050a0c 0%, #0a1a1e 30%, #0d2a2e 50%, #0a1a1e 70%, #050a0c 100%);
  animation: authBgMove 20s ease-in-out infinite;
}

@keyframes authBgMove {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-2%, 1%) scale(1.02); }
  66% { transform: translate(2%, -1%) scale(1.01); }
}

.auth-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.auth-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.3) 0%, transparent 40%, transparent 60%, rgba(0,0,0,.4) 100%);
  pointer-events: none;
  z-index: 2;
}

.auth-card {
  position: relative;
  z-index: 3;
  width: min(420px, 88vw);
  padding: 40px 36px 32px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    linear-gradient(135deg, rgba(103,185,181,.08), transparent 50%),
    var(--color-panel-strong);
  border: 1px solid var(--color-border);
  box-shadow:
    0 24px 64px rgba(0,0,0,.3),
    0 0 0 1px rgba(103,185,181,.06);
  text-align: center;
}

.auth-header {
  margin-bottom: 28px;
}

.auth-logo {
  width: 110px;
  height: 110px;
  margin: 0 auto 16px;
  border-radius: 16px;
  object-fit: cover;
}

.auth-title {
  font-size: clamp(1.6rem, 1.3rem + 0.8vw, 2.2rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  margin: 0 0 4px;
  line-height: 1.05;
}

.auth-sub {
  font-size: 0.92rem;
  color: var(--color-muted);
  margin: 0 0 6px;
  font-weight: 500;
}

.auth-note {
  font-size: 0.72rem;
  color: var(--color-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
  margin: 0 0 16px;
}

.auth-body {
  text-align: left;
}

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

.auth-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: rgba(255,255,255,.03);
  outline: none;
  font-size: 0.9rem;
  color: var(--color-text);
  transition: border-color var(--transition);
}

.auth-field input:focus {
  border-color: rgba(103,185,181,.4);
}

.auth-field input::placeholder {
  color: var(--color-muted);
}

.auth-error {
  font-size: 0.78rem;
  color: #d4766a;
  margin-bottom: 10px;
  min-height: 0;
  opacity: 0;
  transition: opacity var(--transition);
}

.auth-error.visible {
  opacity: 1;
}

.auth-btn {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  color: #fff;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.12), transparent 32%),
    linear-gradient(135deg, var(--color-primary), var(--color-primary-2));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 10px 18px rgba(35,96,98,.18);
  transition:
    transform var(--transition),
    box-shadow var(--transition);
}

.auth-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 14px 24px rgba(35,96,98,.22);
}

.auth-btn:active {
  transform: translateY(0);
}

.auth-link {
  display: block;
  width: 100%;
  margin-top: 14px;
  background: none;
  border: none;
  font-size: 0.82rem;
  color: var(--color-muted);
  cursor: pointer;
  text-align: center;
  padding: 6px;
  transition: color var(--transition);
}

.auth-link:hover {
  color: var(--color-text);
}

/* Forgot password mode */
.auth-mode-forgot {
  display: block;
}

/* Register mode - step 1 */
.auth-mode-register {
  display: block;
}

/* Verify mode - step 2 */
.auth-mode-verify {
  display: block;
}

.auth-resend {
  margin-top: 12px;
}

/* Register step switching */
.auth-card[data-step="register"] .auth-mode-verify {
  display: none;
}

.auth-card[data-step="verify"] .auth-mode-register {
  display: none;
}

/* Reset password mode - step 2 */
.auth-mode-reset {
  display: block;
}

/* Forgot password step switching */
.auth-card[data-step="forgot"] .auth-mode-reset {
  display: none;
}

.auth-card[data-step="reset"] .auth-mode-forgot {
  display: none;
}

/* Hint for login field */
.auth-hint {
  display: block;
  margin-top: 4px;
  font-size: 0.72rem;
  color: #d4766a;
}

/* Footer links */
.auth-footer {
  margin-top: 20px;
  text-align: center;
}

.auth-footer .auth-link {
  display: inline-block;
  width: auto;
  margin: 0 8px;
  padding: 4px 0;
}

@media (max-width: 640px) {
  .auth-card {
    padding: 32px 24px 28px;
  }

  .auth-mark {
    width: 40px;
    height: 40px;
    margin-bottom: 12px;
  }
}