/* === Account page styles === */

/* The auth page wrapper sits above the overlay */
.auth-main {
  position: relative;
  z-index: var(--z-content);      /* 10 */
}
/* Cards + shared UI */
.card {
  background: var(--color-secondary-bg, #121538);
  border: 1px solid var(--color-border, rgba(160,118,249,.3));
  border-radius: 12px;
  padding: var(--spacing-l);
  box-shadow: var(--box-shadow-glow-soft, 0 0 15px rgba(160,118,249,.3));
}
.card.soft { background: rgba(18,21,56,.65); }

.stack > * + * { margin-top: var(--spacing-m); }

label { display: flex; flex-direction: column; gap: 6px; }

.meta  { font-size: .9rem; color: var(--color-text-muted, #979fcd); }
.legal { margin-top: var(--spacing-xl); color: var(--color-text-muted, #979fcd); }

/* Inputs */
input {
  background: #0b0f27;
  color: var(--color-text-main, #e0e7ff);
  border: 1px solid var(--color-border, rgba(160,118,249,.3));
  border-radius: 8px;
  padding: .65rem .75rem;
  width: 100%;
}
input::placeholder { color: #aab5dd; }

/* Buttons */
.btn {
  padding: .75rem 1rem;
  border: 1px solid var(--color-border, rgba(160,118,249,.3));
  background: transparent;
  color: var(--color-text-main, #e0e7ff);
  cursor: pointer;
  border-radius: 8px;
}
.btn.primary { background: var(--color-accent-glow, #A076F9); color: #0a0c20; border-color: transparent; }
.btn:disabled { opacity: .6; cursor: not-allowed; }

/* Link-look buttons (flip triggers) */
.linklike {
  appearance: none; background: none; border: 0; padding: 0; margin: 0;
  color: var(--color-highlight-cyber, #00E5FF); cursor: pointer;
  text-decoration: underline; font: inherit;
}
.flip-link { margin-top: var(--spacing-m); }

/* === Flip card === */
.flip-wrap {
  display: grid;
  place-items: center;
  margin: var(--spacing-xl) 0;
  perspective: 1200px;
}

.auth-card {
  width: min(520px, 100%);
  min-height: 380px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .6s ease-in-out;
}

.auth-card.flip-active { transform: rotateY(180deg); }

.auth-face {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  backface-visibility: hidden;
  border-radius: 12px;
  padding: var(--spacing-l);
}
.auth-face.front { transform: rotateY(0deg); }
.auth-face.back  { transform: rotateY(180deg); }

@media (max-width: 480px) {
  .auth-card { min-height: 420px; }
}