.confirm-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 16px; animation: confirm-fade-in 0.15s ease-out; } .confirm-dialog { width: 100%; max-width: 420px; background: var(--bg-primary, #ffffff); border: 1px solid var(--border-primary, #e5e7eb); border-radius: 16px; box-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.35); padding: 28px 28px 20px; text-align: center; animation: confirm-scale-in 0.18s cubic-bezier(0.4, 0, 0.2, 1); } [data-theme="dark"] .confirm-dialog { box-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.65); } .confirm-icon { width: 48px; height: 48px; border-radius: 12px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; background: var(--bg-secondary, #f3f4f6); color: var(--text-secondary, #6b7280); } .confirm-icon.danger { background: rgba(239, 68, 68, 0.12); color: #ef4444; } [data-theme="dark"] .confirm-icon.danger { background: rgba(239, 68, 68, 0.18); color: #f87171; } .confirm-title { font-size: 18px; font-weight: 700; color: var(--text-primary, #111827); margin: 0 0 8px 0; letter-spacing: -0.01em; } .confirm-message { font-size: 14px; line-height: 1.5; color: var(--text-secondary, #6b7280); margin: 0 0 24px 0; } .confirm-actions { display: flex; gap: 10px; justify-content: center; } .confirm-btn { flex: 1; padding: 10px 18px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; transition: transform 0.12s ease, background 0.15s ease, box-shadow 0.15s ease; border: 1px solid transparent; } .confirm-btn:active { transform: translateY(1px); } .confirm-btn-cancel { background: var(--bg-secondary, #f3f4f6); color: var(--text-primary, #111827); border-color: var(--border-primary, #e5e7eb); } .confirm-btn-cancel:hover { background: var(--bg-tertiary, #e5e7eb); } [data-theme="dark"] .confirm-btn-cancel { background: var(--bg-secondary-dark, #374151); color: var(--text-primary-dark, #f9fafb); border-color: var(--border-dark, #4b5563); } [data-theme="dark"] .confirm-btn-cancel:hover { background: var(--bg-tertiary-dark, #4b5563); } .confirm-btn-primary { background: var(--accent-primary, #2663eb); color: #ffffff; } .confirm-btn-primary:hover { background: var(--accent-secondary, #1d4fc4); box-shadow: 0 4px 12px -2px rgba(38, 99, 235, 0.45); } .confirm-btn-danger { background: #ef4444; color: #ffffff; } .confirm-btn-danger:hover { background: #dc2626; box-shadow: 0 4px 12px -2px rgba(239, 68, 68, 0.45); } @keyframes confirm-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes confirm-scale-in { from { opacity: 0; transform: scale(0.96) translateY(4px); } to { opacity: 1; transform: scale(1) translateY(0); } }