/* Toast Notification */ .toast-container { position: fixed; top: 24px; right: 24px; z-index: 2000; display: flex; flex-direction: column; gap: 12px; } .toast { background: white; padding: 16px 24px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); display: flex; align-items: center; gap: 12px; min-width: 300px; animation: slideInRight 0.3s ease; border-left: 4px solid var(--primary-color); } .toast.success { border-left-color: #10b981; } .toast.error { border-left-color: #ef4444; } .toast.info { border-left-color: #3b82f6; } .toast-message { font-size: 0.95rem; color: var(--text-color); } @keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes fadeOut { to { opacity: 0; transform: translateY(-10px); } } /* Custom Confirm Dialog */ .confirm-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(2px); z-index: 3000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.2s; } .confirm-overlay.active { opacity: 1; pointer-events: auto; } .confirm-box { background: white; padding: 24px; border-radius: 12px; width: 400px; max-width: 90%; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); transform: scale(0.95); transition: transform 0.2s; } .confirm-overlay.active .confirm-box { transform: scale(1); } .confirm-title { font-size: 1.2rem; font-weight: 600; margin-bottom: 12px; color: var(--heading-color); } .confirm-message { color: var(--text-muted); margin-bottom: 24px; line-height: 1.5; } .confirm-actions { display: flex; justify-content: flex-end; gap: 12px; } .btn-cancel { background: #f1f5f9; color: var(--text-color); padding: 8px 16px; border: none; border-radius: 6px; cursor: pointer; font-weight: 500; } .btn-cancel:hover { background: #e2e8f0; } .btn.primary { background: var(--primary-color, #3b82f6); color: white; padding: 8px 20px; border: none; border-radius: 6px; cursor: pointer; font-weight: 500; transition: background 0.2s; min-width: 80px; /* 防止按钮太窄 */ display: inline-flex; align-items: center; justify-content: center; } .btn.primary:hover { background: var(--primary-hover, #2563eb); }