.global-confirm-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); display: none; align-items: center; justify-content: center; z-index: 99999999; backdrop-filter: blur(4px); } .global-confirm-overlay.show { display: flex; animation: overlayFadeIn 0.3s ease-out; } @keyframes overlayFadeIn { from { background: rgba(0, 0, 0, 0); backdrop-filter: blur(0); } to { background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); } } .global-confirm-dialog { background: white; border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.05); min-width: 420px; max-width: 520px; animation: confirmSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes confirmSlideIn { from { opacity: 0; transform: translateY(-30px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .confirm-content { padding: 36px 32px 24px; } .confirm-message { font-size: 17px; line-height: 1.7; color: #1f2937; white-space: pre-wrap; font-weight: 400; letter-spacing: 0.2px; } .confirm-actions { padding: 0 32px 32px; display: flex; gap: 12px; justify-content: flex-end; } .confirm-btn { padding: 12px 28px; border: none; border-radius: 8px; font-size: 15px; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); font-weight: 500; letter-spacing: 0.3px; min-width: 90px; } .confirm-cancel { background: #f3f4f6; color: #6b7280; border: 1px solid #e5e7eb; } .confirm-cancel:hover { background: #e5e7eb; color: #4b5563; border-color: #d1d5db; } .confirm-cancel:active { transform: scale(0.98); } .confirm-ok { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); } .confirm-ok:hover { box-shadow: 0 6px 16px rgba(102, 126, 234, 0.5); transform: translateY(-1px); } .confirm-ok:active { transform: translateY(0) scale(0.98); }