.duelo-toast-container {
  position: fixed;
  z-index: 1200;
  top: 18px;
  right: 18px;
  width: min(360px, calc(100vw - 36px));
  display: grid;
  gap: 9px;
  pointer-events: none;
}

.duelo-toast {
  min-height: 54px;
  padding: 12px 10px 12px 13px;
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 11px;
  color: #f5f2ee;
  border: 1px solid #3b3530;
  border-radius: 7px;
  background: rgb(24 21 19 / 96%);
  box-shadow: 0 16px 42px rgb(0 0 0 / 38%);
  backdrop-filter: blur(12px);
  pointer-events: auto;
  animation: duelo-toast-enter 180ms ease-out both;
}

.duelo-toast.leaving { animation: duelo-toast-leave 180ms ease-in both; }
.duelo-toast-marker { width: 4px; height: 30px; border-radius: 4px; background: #9ca3af; }
.duelo-toast.error .duelo-toast-marker { background: #ef6464; }
.duelo-toast.warning .duelo-toast-marker { background: #f59e0b; }
.duelo-toast.success .duelo-toast-marker { background: #65b96e; }
.duelo-toast.info .duelo-toast-marker { background: #6f9ed6; }
.duelo-toast p { margin: 0; font-size: 11px; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.duelo-toast-close { width: 30px; height: 30px; padding: 0; color: #9f9892; border: 0; border-radius: 5px; background: transparent; font: inherit; font-size: 20px; cursor: pointer; }
.duelo-toast-close:hover { color: #fff; background: rgb(255 255 255 / 6%); }
.duelo-toast-close:focus-visible { outline: 2px solid #f97316; outline-offset: 1px; }

@keyframes duelo-toast-enter { from { opacity: 0; transform: translateY(-8px) translateX(12px); } }
@keyframes duelo-toast-leave { to { opacity: 0; transform: translateX(18px); } }

@media (max-width: 560px) {
  .duelo-toast-container { top: 10px; right: 10px; width: calc(100vw - 20px); }
  .duelo-toast { min-height: 50px; }
}

@media (prefers-reduced-motion: reduce) {
  .duelo-toast, .duelo-toast.leaving { animation-duration: 1ms; }
}