.ui-success-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--color-bg-overlay); z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: 0 var(--spacing-6); } .ui-success { width: 100%; max-width: 600rpx; background: var(--color-bg-card); border-radius: var(--radius-lg); padding: var(--spacing-6) var(--spacing-4) var(--spacing-4); text-align: center; box-shadow: var(--shadow-popup); animation: ui-success-in var(--motion-normal) var(--ease-standard); } @keyframes ui-success-in { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } } .ui-success__heart { width: 120rpx; height: 120rpx; margin: 0 auto var(--spacing-3); background: var(--color-primary-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .ui-success__heart-icon { width: 56rpx; height: 56rpx; background: var(--color-primary); clip-path: polygon(50% 100%, 0 38%, 18% 18%, 50% 38%, 82% 18%, 100% 38%); } .ui-success__title { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin-bottom: var(--spacing-2); } .ui-success__content { font-size: var(--font-size-md); color: var(--color-text-secondary); line-height: var(--line-height-relaxed); margin-bottom: var(--spacing-2); } .ui-success__expires { font-size: var(--font-size-xs); color: var(--color-warning); margin-bottom: var(--spacing-4); } .ui-success__actions { display: flex; gap: var(--spacing-2); } .ui-success__btn { flex: 1; }