/* === Flash Notification System === */
#flashes-host {
  position: fixed;
  bottom: 4vh;
  right: 4vh;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 10px;
  z-index: 9999;
}

.flash-message {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 200px;
  width: fit-content;
  padding: 12px 18px;
  border-radius: 10px;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  opacity: 0;
  transform: translateY(-20px);
  border: 1px solid transparent;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  cursor: pointer;
  user-select: none;
}

.flash-message.success { background: #0a992f; border-color: #58e584; }
.flash-message.error { background: #d32f2f; border-color: #ff8a80; }
.flash-message.warning { background: #f1c40f; color: #111; border-color: #ffe97d; }
.flash-message.info { background: #1d3fa6; border-color: #5a78ff; }
.flash-message.achievement { background: #7843e6; border-color: #c29aff; }

.flash-message i { font-size: 1.1rem; }

@keyframes fadeIn {
  0% { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes fadeOut {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(20px); }
}