/* ========== TOAST (wspólna baza) ========== */
:root{
  /* domyślnie: SUCCESS */
  --toast-bg: #0f172a;          /* tło */
  --toast-fg: #e2fbe8;          /* tekst */
  --toast-accent: #22c55e;      /* akcent/progress/icon */
  --toast-border: #1e293b;      /* obramowanie */
  --toast-glow: rgba(34,197,94,.08); /* poświata w tle */
  --shadow: 0 12px 30px rgba(0,0,0,.35);
}

/* kontener */
.toast{
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .75rem;
  align-items: start;
  max-width: 360px;
  padding: .9rem 1rem;
  border: 1px solid var(--toast-border);
  border-radius: 14px;
  background:
    radial-gradient(1200px 200px at 80% 120%, var(--toast-glow), transparent 40%),
    var(--toast-bg);
  color: var(--toast-fg);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(10px) scale(.98);
  pointer-events: none;
}

/* pokazanie */
.toast.show{
  animation: toast-in .35s ease forwards, toast-out .35s ease 4.65s forwards;
  pointer-events: auto;
}

/* elementy */
.toast__icon{
  color: var(--toast-accent);
  display: grid; place-items: center;
  width: 28px; height: 28px;
}

.toast__title{
  font-size: .95rem;
  font-weight: 700;
  margin-bottom: .15rem;
}

.toast__text{
  font-size: .9rem; opacity: .9;
}

.toast__close{
  appearance: none; border: 0; background: transparent;
  color: #94a3b8; font-size: 1.2rem; line-height: 1;
  padding: .1rem .2rem; border-radius: 8px; cursor: pointer;
}
.toast__close:hover{ color:#cbd5e1; background: rgba(148,163,184,.12); }

/* pasek postępu */
.toast__progress{
  position: relative; height: 3px; margin-top: .6rem; border-radius: 999px;
  background: rgba(255,255,255,.12); overflow: hidden;
}
.toast__progress::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, var(--toast-accent), #86efac);
  transform-origin: left;
  transform: scaleX(0);
}
.toast.show .toast__progress::after{
  animation: progress 4.3s linear forwards;
}

/* animacje */
@keyframes toast-in{
  to{ opacity:1; transform: translateY(0) scale(1); }
}
@keyframes toast-out{
  to{ opacity:0; transform: translateY(6px) scale(.98); }
}
@keyframes progress{
  to{ transform: scaleX(1); }
}

/* preferencje dostępności */
@media (prefers-reduced-motion: reduce){
  .toast, .toast.show, .toast__progress::after{
    animation: none !important; transform:none !important; opacity:1 !important;
  }
}

/* ========== WARIANTY (tylko nadpisują zmienne) ========== */

/* Success (jeśli chcesz jawnie używać klasy modyfikatora) */
.toast--success{
  --toast-bg: #0f172a;
  --toast-fg: #e2fbe8;
  --toast-accent: #22c55e;
  --toast-border: #1e293b;
  --toast-glow: rgba(34,197,94,.08);
}

/* Error (czerwony) */
.toast--error{
  --toast-bg: #7f1d1d;           /* ciemne czerwone tło */
  --toast-fg: #fee2e2;           /* jasny tekst */
  --toast-accent: #ef4444;       /* czerwony akcent */
  --toast-border: #b91c1c;       /* obramowanie */
  --toast-glow: rgba(239,68,68,.10); /* delikatna czerwona poświata */
}

#toastSuccess{
  --toast-bg: #062e1b;
  --toast-fg: #e9fff2;
  --toast-accent: #22c55e;
  --toast-border: #14532d;
  --toast-glow: rgba(34,197,94,.12);
}
#toastError{
  --toast-bg: #7f1d1d;
  --toast-fg: #fee2e2;
  --toast-accent: #ef4444;
  --toast-border: #b91c1c;
  --toast-glow: rgba(239,68,68,.10);
}