:root{
  --xny-toast-bg:#ffffff;
  --xny-toast-fg:#111827;
  --xny-toast-muted:#6b7280;
  --xny-toast-shadow: 0 14px 40px rgba(0,0,0,.16);
  --xny-toast-radius: 16px;
  --xny-toast-border:#f0c48a;
  --xny-toast-success:#10b981;
  --xny-toast-error:#ef4444;
  --xny-toast-info:#3b82f6;
}

.xny-toast-wrap{
  position: fixed;
  right: 28px;
  bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 99999;
  pointer-events: none;
}

.xny-toast{
  min-width: 280px;
  max-width: 520px;
  background: var(--xny-toast-bg);
  color: var(--xny-toast-fg);
  border-radius: var(--xny-toast-radius);
  box-shadow: var(--xny-toast-shadow);
  border: 1px solid var(--xny-toast-border);
  padding: 14px 16px;
  pointer-events: auto;
}

.xny-toast.is-success{ border-color: rgba(16,185,129,.55); }
.xny-toast.is-error{ border-color: rgba(239,68,68,.55); }
.xny-toast.is-info{ border-color: rgba(59,130,246,.55); }
.xny-toast.is-warn{ border-color: rgba(245,158,11,.6); }

.xny-toast .row{
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.xny-toast .ico{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin-top: 1px;
  flex: 0 0 auto;
}
.xny-toast.is-success .ico{ background: rgba(16,185,129,.12); color: var(--xny-toast-success); }
.xny-toast.is-error .ico{ background: rgba(239,68,68,.12); color: var(--xny-toast-error); }
.xny-toast.is-info .ico{ background: rgba(59,130,246,.12); color: var(--xny-toast-info); }
.xny-toast.is-warn .ico{ background: rgba(245,158,11,.12); color: #f59e0b; }

.xny-toast .main{ flex: 1 1 auto; min-width: 0; }
.xny-toast .msg{ font-size: 14px; line-height: 1.45; word-break: break-word; }
.xny-toast .sub{ font-size: 12px; color: var(--xny-toast-muted); margin-top: 4px; }

.xny-toast .close{
  cursor: pointer;
  user-select: none;
  border: 0;
  background: transparent;
  color: var(--xny-toast-muted);
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
}
.xny-toast .close:hover{ color: #111827; }

@media (max-width: 768px){
  .xny-toast-wrap{ left: 12px; right: 12px; bottom: 14px; }
  .xny-toast{ min-width: 0; width: 100%; }
}