.toast-container{ position: fixed; top: 1rem; right: 1rem; z-index: 10000; display: flex; flex-direction: column; align-items: stretch; gap: 0.6rem; pointer-events: none; width: min(360px, calc(100vw - 2rem));} .toast{ pointer-events: none; position: relative; display: flex; align-items: center; gap: 0.65rem; padding: 0.85rem 1rem 0.95rem; border-radius: 14px; background: rgba(13, 27, 29, 0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4); color: #e8f6f3; font-size: 0.9rem; overflow: hidden;} .toast-success{ border-inline-start: 3px solid #34d399;} .toast-error{ border-inline-start: 3px solid #f87171;} .toast-info{ border-inline-start: 3px solid #38bdf8;} .toast-warn{ border-inline-start: 3px solid #fbbf24;} .toast-icon{ width: 1.15rem; height: 1.15rem; flex-shrink: 0;} .toast-success .toast-icon{ color: #34d399;} .toast-error .toast-icon{ color: #f87171;} .toast-info .toast-icon{ color: #38bdf8;} .toast-warn .toast-icon{ color: #fbbf24;} .toast-msg{ flex: 1; line-height: 1.55; word-break: break-word;} .toast-close{ pointer-events: auto; background: none; border: none; color: rgba(255, 255, 255, 0.5); cursor: pointer; padding: 0.35rem; border-radius: 50%; line-height: 1; flex-shrink: 0; transition: color 0.2s, background 0.2s;} .toast-close svg{ display: block; width: 0.75rem; height: 0.75rem;} .toast-close:hover{ color: #fff; background: rgba(255, 255, 255, 0.14);} .toast-progress{ position: absolute; bottom: 0; left: 0; height: 3px; border-radius: 0 0 0 14px; background: linear-gradient(90deg, #34d399, #38bdf8); animation-name: toast-progress; animation-timing-function: linear; animation-fill-mode: forwards;} .toast-error .toast-progress{ background: linear-gradient(90deg, #f87171, #fbbf24);} .toast-warn .toast-progress{ background: linear-gradient(90deg, #fbbf24, #f59e0b);} @keyframes toast-progress{ from{ width: 100%;} to{ width: 0;}}