/* === layout-auth (uses design-system classes from 08-design-system.css) === */
.layout-auth {
  max-width: none;
  margin: 0;
  padding: var(--ducky-space-lg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ducky-color-light);
}

.layout-auth .alert,
.layout-auth .ducky-flash {
  animation: ducky-auth-in var(--ducky-transition-normal);
}

@keyframes ducky-auth-in {
  from { opacity: 0; transform: translateY(-0.625rem); }
  to { opacity: 1; transform: translateY(0); }
}

.layout-auth .input-group label {
  top: 50%;
  transform: translateY(-50%);
}

.layout-auth .input-group input:not(:placeholder-shown) ~ label {
  transform: translateY(-50%) scale(0.95);
}

.layout-auth .input-group--password input {
  padding-right: 4.5rem;
}

.layout-auth .pw-toggle {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-family: var(--ducky-font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ducky-color-textMuted);
  cursor: pointer;
  padding: 0.375rem 0.625rem;
  border-radius: var(--ducky-radius-sm);
  transition: all var(--ducky-transition-fast);
  z-index: 2;
}

.layout-auth .pw-toggle:hover {
  color: var(--ducky-color-textStrong);
  background: var(--ducky-color-inputBgHover);
}

.layout-auth .auth-form .btn {
  width: 100%;
  margin-top: var(--ducky-space-sm);
}

.auth-content {
  width: 100%;
  display: flex;
  justify-content: center;
}

.auth-card--exit {
  animation: auth-card-out var(--ducky-transition-normal) forwards;
}

.auth-card--enter {
  animation: auth-card-in var(--ducky-transition-normal) forwards;
}

@keyframes auth-card-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-0.75rem) scale(0.98); }
}

@keyframes auth-card-in {
  from { opacity: 0; transform: translateY(0.75rem) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}