/* Password change reminder banner - auto fades after 5 seconds */
body::before {
  content: "⚠️ Please change your temporary password! Settings (⚙️) → Change Password";
  display: block;
  background: linear-gradient(135deg, #ff6b6b, #ffa500);
  color: white;
  text-align: center;
  padding: 12px;
  font-weight: bold;
  font-size: 14px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  animation: fadeOut 5s forwards;
  animation-delay: 3s;
}

@keyframes fadeOut {
  0% { opacity: 1; transform: translateY(0); }
  80% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-100%); pointer-events: none; }
}

/* Push content down initially, then restore */
#app {
  animation: restoreMargin 8s forwards;
}

@keyframes restoreMargin {
  0% { margin-top: 50px; }
  60% { margin-top: 50px; }
  100% { margin-top: 0; }
}