/* ── Toast Customization (vue3-toastify) ── */ :root { --toastify-color-light: #efe9de; --toastify-color-dark: #181715; --toastify-color-info: #5db8a6; --toastify-color-success: #5db872; --toastify-color-warning: #e8a55a; --toastify-color-error: #c64545; --toastify-text-color-light: #141413; --toastify-text-color-dark: #faf9f5; --toastify-text-color-info: #ffffff; --toastify-text-color-success: #ffffff; --toastify-text-color-warning: #ffffff; --toastify-text-color-error: #ffffff; --toastify-font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .Toastify__toast-container { font-family: var(--font-body); padding: 0; display: flex; flex-direction: column; gap: 8px; } .Toastify__toast { border-radius: 10px; box-shadow: 0 1px 3px rgba(20, 20, 19, 0.06), 0 4px 12px rgba(20, 20, 19, 0.04); min-height: 48px; padding: 12px 14px; border: 1px solid #e6dfd8; margin: 0; } .Toastify__toast--default { background: #efe9de; color: #141413; border-color: #e6dfd8; } .Toastify__toast--info { background: #5db8a6; color: #ffffff; border-color: #4da396; } .Toastify__toast--success { background: #5db872; color: #ffffff; border-color: #4da362; } .Toastify__toast--warning { background: #e8a55a; color: #ffffff; border-color: #d8944b; } .Toastify__toast--error { background: #c64545; color: #ffffff; border-color: #b53d3d; } .Toastify__toast-body { font-family: var(--font-body); font-size: 14px; color: inherit; padding: 0 4px; } .Toastify__toast-icon { width: 16px; height: 16px; flex-shrink: 0; margin-right: 10px; } .Toastify__close-button { color: inherit; opacity: 0.4; border-radius: 4px; padding: 2px 6px; margin-left: 10px; transition: opacity 0.2s ease; align-self: center; font-size: 18px; line-height: 1; } .Toastify__close-button:hover { opacity: 0.8; } .Toastify__progress-bar { height: 2px; border-radius: 0 0 8px 8px; opacity: 0.5; } .Toastify__progress-bar--info { background: rgba(255, 255, 255, 0.5); } .Toastify__progress-bar--success { background: rgba(255, 255, 255, 0.5); } .Toastify__progress-bar--warning { background: rgba(255, 255, 255, 0.5); } .Toastify__progress-bar--error { background: rgba(255, 255, 255, 0.5); } .Toastify__progress-bar--default { background: rgba(20, 20, 19, 0.12); } /* Slide animation - gentler */ .Toastify__slide-enter--top-right, .Toastify__slide-enter--bottom-right { animation-name: Toastify__slideInRight; } @keyframes Toastify__slideInRight { from { transform: translateX(110%); } to { transform: translateX(0); } } /* Loading toast - dark style */ .Toastify__toast--loading { background: #181715; color: #faf9f5; border-color: #252320; min-width: 260px; }