.app-toast-container { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; max-width: min(420px, calc(100vw - 32px)); } .app-toast { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; background: rgba(22, 22, 22, 0.95); backdrop-filter: blur(8px); font-size: 13px; color: var(--text-primary, #e5e5e5); pointer-events: auto; animation: toast-in 220ms ease-out; border: 1px solid rgba(255, 255, 255, 0.08); } .app-toast--success { border-color: rgba(16, 185, 129, 0.3); } .app-toast--error { border-color: rgba(239, 68, 68, 0.3); } .app-toast__icon { flex-shrink: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 11px; font-weight: 700; } .app-toast--success .app-toast__icon { background: rgba(16, 185, 129, 0.2); color: #10b981; } .app-toast--error .app-toast__icon { background: rgba(239, 68, 68, 0.2); color: #ef4444; } .app-toast--info .app-toast__icon { background: rgba(99, 102, 241, 0.2); color: #818cf8; } .app-toast__msg { flex: 1; line-height: 1.4; } .app-toast__retry { flex-shrink: 0; padding: 3px 10px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 6px; background: transparent; color: var(--text-primary, #e5e5e5); font-size: 12px; cursor: pointer; transition: background 0.15s; } .app-toast__retry:hover { background: rgba(255, 255, 255, 0.08); } .app-toast__close { flex-shrink: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: transparent; color: var(--text-tertiary, #888); font-size: 14px; cursor: pointer; transition: color 0.15s; } .app-toast__close:hover { color: var(--text-primary, #e5e5e5); } @keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }