/* ====== Toaster (Pro / Clear / Modern) ====== */
.toast-stack{
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(420px, calc(100vw - 32px));
}
html[dir="ltr"] .toast-stack{ right:auto; left:16px; }

.toast-pro{
  position: relative;
  background: #ffffff;                 /* ✅ Light */
  color: #0f172a;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 12px 12px;
  box-shadow: 0 16px 45px rgba(0,0,0,.12);
  display: grid;
  grid-template-columns: 34px 1fr 32px;
  gap: 10px;
  overflow: hidden;
  transform: translateY(-6px);
  opacity: 0;
  animation: toastIn .18s ease forwards;
}

/* left color bar */
.toast-pro::before{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:0;
  width: 4px;
  background: #3b82f6; /* default info */
}
html[dir="rtl"] .toast-pro::before{ left:auto; right:0; }

@keyframes toastIn{ to { transform: translateY(0); opacity: 1; } }
@keyframes toastOut{ to { transform: translateY(-6px); opacity: 0; } }

.toast-pro .t-ico{
  width: 34px; height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #f1f5f9;
  border: 1px solid #e5e7eb;
  color: #334155;
}

.toast-pro .t-body{ min-width: 0; }
.toast-pro .t-title{
  font-weight: 800;
  font-size: 13px;
  line-height: 1.25;
  margin: 0;
  color: #0f172a;
}
.toast-pro .t-msg{
  font-size: 12.5px;
  line-height: 1.35;
  color: #334155;
  margin-top: 2px;
  word-break: break-word;
}

.toast-pro .t-close{
  width: 32px; height: 32px;
  border-radius: 10px;
  border: 0;
  background: #f8fafc;
  color: #334155;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: .15s ease;
}
.toast-pro .t-close:hover{ background: #eef2ff; color:#0f172a; }

.toast-pro .t-bar{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: #f1f5f9;
}
.toast-pro .t-bar > span{
  display:block;
  height:100%;
  width:100%;
  transform-origin: left;
  background: #94a3b8;
  animation: toastBar linear forwards;
}
@keyframes toastBar{ to{ transform: scaleX(0); } }

/* Types */
.toast-pro.success::before{ background: #22c55e; }
.toast-pro.success .t-ico{ background: #ecfdf5; border-color:#bbf7d0; color:#16a34a; }
.toast-pro.success .t-bar > span{ background: #22c55e; }

.toast-pro.error::before{ background: #ef4444; }
.toast-pro.error .t-ico{ background: #fef2f2; border-color:#fecaca; color:#dc2626; }
.toast-pro.error .t-bar > span{ background: #ef4444; }

.toast-pro.warn::before{ background: #f59e0b; }
.toast-pro.warn .t-ico{ background: #fffbeb; border-color:#fde68a; color:#d97706; }
.toast-pro.warn .t-bar > span{ background: #f59e0b; }

.toast-pro.info::before{ background: #3b82f6; }
.toast-pro.info .t-ico{ background: #eff6ff; border-color:#bfdbfe; color:#2563eb; }
.toast-pro.info .t-bar > span{ background: #3b82f6; }

@media (max-width: 576px){
  .toast-stack{ top: 12px; right: 12px; width: calc(100vw - 24px); }
  html[dir="ltr"] .toast-stack{ left:12px; }
}