/* toast.css – lightweight, no deps */
:root{
  --toast-bg:#111827; --toast-ink:#fff; --toast-line:#0000001a;
  --toast-ok:#10b981; --toast-warn:#f59e0b; --toast-err:#ef4444; --toast-info:#3b82f6;
}
#toasts{
  position:fixed; right:16px; bottom:16px; z-index:9999;
  display:flex; flex-direction:column; gap:10px; pointer-events:none;
}
.toast{
  min-width:240px; max-width:520px; background:#fff; color:#111827;
  border:1px solid var(--toast-line); border-radius:10px; box-shadow:0 10px 30px #0000001a;
  display:flex; align-items:flex-start; gap:10px; padding:12px 14px; pointer-events:auto;
  transform:translateY(20px); opacity:0; animation:toast-in .2s ease forwards;
}
.toast--info{ border-left:6px solid var(--toast-info); }
.toast--success{ border-left:6px solid var(--toast-ok); }
.toast--warn{ border-left:6px solid var(--toast-warn); }
.toast--error{ border-left:6px solid var(--toast-err); }
.toast__icon{ font-size:18px; line-height:1; margin-top:2px }
.toast__msg{ flex:1; }
.toast__close{ background:transparent; border:0; cursor:pointer; font-size:16px; opacity:.6 }
.toast__close:hover{ opacity:1 }
@keyframes toast-in{ to{ transform:translateY(0); opacity:1 } }
@media (max-width:560px){
  #toasts{ left:16px; right:16px; bottom:12px }
  .toast{ width:100%; max-width:none }
}