:root{
  --toast-bg: #0b0f1a;
  --toast-surface: rgba(17,25,40,.9);
  --toast-border: rgba(99,102,241,.6);
  --toast-text: #e5e7eb;
  --toast-success: #10b981;
  --toast-error: #ef4444;
  --toast-warning: #f59e0b;
  --toast-info: #60a5fa;
  --toast-shadow: 0 10px 25px rgba(0,0,0,.35), inset 0 0 12px rgba(99,102,241,.25);
}
.toast-container{ position: fixed; z-index: 9999; display: grid; gap: 10px; padding: 12px; }
.toast-container.pos-top-right{ top: 0; right: 0; }
.toast-container.pos-top-left{ top: 0; left: 0; }
.toast-container.pos-bottom-right{ bottom: 0; right: 0; }
.toast-container.pos-bottom-left{ bottom: 0; left: 0; }

.toast{
  display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 12px;
  background: var(--toast-surface); color: var(--toast-text);
  border: 1px solid var(--toast-border); border-radius: 14px; padding: 12px 14px;
  box-shadow: var(--toast-shadow);
  transform: translateY(8px) scale(.98); opacity: 0;
  animation: toastIn .25s ease forwards;
}
.toast.show{ opacity: 1; transform: translateY(0) scale(1); }
.toast.hide{ animation: toastOut .2s ease forwards; }
.toast-icon{ font-size: 18px; filter: drop-shadow(0 0 6px rgba(99,102,241,.55)); }
.toast-body{ font: 500 14px/1.3 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell; letter-spacing:.2px; }
.toast-close{ appearance:none; border:0; background:transparent; color:var(--toast-text); font-size:20px; cursor:pointer; padding:0 6px; opacity:.75; }
.toast-close:hover{ opacity:1; }

.toast-success{ border-color: var(--toast-success); box-shadow: 0 10px 25px rgba(16,185,129,.15), inset 0 0 12px rgba(16,185,129,.25); }
.toast-error{ border-color: var(--toast-error); box-shadow: 0 10px 25px rgba(239,68,68,.15), inset 0 0 12px rgba(239,68,68,.25); }
.toast-warning{ border-color: var(--toast-warning); box-shadow: 0 10px 25px rgba(245,158,11,.15), inset 0 0 12px rgba(245,158,11,.25); }
.toast-info{ border-color: var(--toast-info); box-shadow: 0 10px 25px rgba(96,165,250,.15), inset 0 0 12px rgba(96,165,250,.25); }

@keyframes toastIn{ from{ opacity:0; transform: translateY(8px) scale(.98);} to{ opacity:1; transform: translateY(0) scale(1);} }
@keyframes toastOut{ from{ opacity:1; transform: translateY(0) scale(1);} to{ opacity:0; transform: translateY(-4px) scale(.98);} }