.fade-toast { position: fixed; right: 24px; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 300; display: grid; gap: 5px; width: min(380px, calc(100% - 32px)); padding: 16px 20px 17px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; color: #f4f3f6; background: #0c0c0f; box-shadow: 0 22px 60px rgba(0,0,0,.55); font-family: Inter, ui-sans-serif, system-ui, sans-serif; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .25s ease, transform .3s cubic-bezier(.2,.8,.2,1); }
.fade-toast.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.fade-toast strong { display: flex; align-items: center; gap: 9px; font-size: .95rem; font-weight: 700; letter-spacing: -.01em; }
.fade-toast strong::before { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #23a55a; box-shadow: 0 0 10px rgba(35,165,90,.6); content: ""; }
.fade-toast[data-kind="error"] strong::before { background: #f23f43; box-shadow: 0 0 10px rgba(242,63,67,.6); }
.fade-toast[data-kind="info"] strong::before { background: #ff7c30; box-shadow: 0 0 10px rgba(255,124,48,.6); }
.fade-toast span { padding-left: 17px; color: #c7c5cf; font-size: .84rem; line-height: 1.45; }
@media (max-width: 560px) { .fade-toast { right: 16px; left: 16px; width: auto; } }
@media (prefers-reduced-motion: reduce) { .fade-toast { transition: none; } }