@layer components {

  .toasts {
    position: fixed;
    top: var(--s-4);
    right: var(--s-4);
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    width: min(22rem, calc(100vw - var(--s-8)));
    pointer-events: none;
  }

  .toast {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--s-3);
    align-items: start;
    padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    background: rgb(37 27 49 / 0.94);
    backdrop-filter: blur(12px);
    box-shadow: 0 18px 40px -16px rgb(0 0 0 / 0.7);
    pointer-events: auto;
    animation: toast-in 260ms var(--ease);
  }

  .toast[data-leaving="true"] {
    animation: toast-out 200ms var(--ease) forwards;
  }

  /* Кружечок стану прибрано: колір рамки і так показує тон. */
  .toast__icon { display: none; }

  .toast[data-tone="ok"] { border-color: rgb(86 214 160 / 0.4); }

  .toast[data-tone="error"] { border-color: rgb(255 107 138 / 0.4); }

  .toast__text {
    font-size: var(--t-sm);
    line-height: 1.45;
    color: var(--c-text);
  }

  .toast__close {
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--r-sm);
    font-size: 1.1rem;
    line-height: 1;
    color: var(--c-text-dim);
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
  }

  .toast__close:hover {
    color: var(--c-text);
    background: rgb(207 190 245 / 0.1);
  }

  @keyframes toast-in {
    from { opacity: 0; transform: translateX(1.5rem) scale(0.97); }
    to   { opacity: 1; transform: none; }
  }

  @keyframes toast-out {
    to { opacity: 0; transform: translateX(1rem) scale(0.98); }
  }

  @media (max-width: 30rem) {
    .toasts {
      top: var(--s-3);
      right: var(--s-3);
      left: var(--s-3);
      width: auto;
    }
  }
}