.toast-stack {
  position: fixed; top: 18px; right: 18px; z-index: 1000;
  display: flex; flex-direction: column; gap: 10px;
  width: min(380px, calc(100vw - 36px));
}

.toast {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--r-l);
  border: 1px solid var(--line); background: var(--panel);
  box-shadow: var(--sh-m); animation: toast-in .18s ease-out;
}
.toast.leaving { opacity: 0; transform: translateX(10px); transition: opacity .25s ease, transform .25s ease; }

.toast .t-icon {
  width: 22px; height: 22px; border-radius: 50%; flex: none; margin-top: 1px;
  display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff;
}
.toast .t-body { flex: 1; min-width: 0; }
.toast .t-title { font-weight: 650; font-size: 13.5px; color: var(--ink); }
.toast .t-msg { font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.toast .t-close {
  background: none; border: none; color: var(--ink-3); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 2px; flex: none;
}
.toast .t-close:hover { color: var(--ink); }

.toast.success { border-color: var(--ok-line); background: var(--ok-soft); }
.toast.success .t-icon { background: var(--ok); }

.toast.error { border-color: var(--bad-line); background: var(--bad-soft); }
.toast.error .t-icon { background: var(--bad); }

.toast.warning { border-color: var(--warn-line); background: var(--warn-soft); }
.toast.warning .t-icon { background: var(--warn); }

.toast.info { border-color: var(--info-line); background: var(--info-soft); }
.toast.info .t-icon { background: var(--info); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}