/* Modal Transitions */
        .modal-overlay { opacity: 0; pointer-events: none; transition: all 0.3s ease; }
        .modal-active { opacity: 1; pointer-events: auto; }
        .modal-container { transform: scale(0.9); transition: all 0.3s ease; }
        .modal-active .modal-container { transform: scale(1); }

        /* Success/Failure Animations */
        .checkmark, .crossmark { width: 80px; height: 80px; border-radius: 50%; display: block; stroke-width: 2; stroke: #fff; margin: 0 auto; }
        .checkmark { box-shadow: inset 0px 0px 0px #22c55e; animation: fillGreen .4s ease-in-out forwards; }
        .crossmark { box-shadow: inset 0px 0px 0px #ef4444; animation: fillRed .4s ease-in-out forwards; }
        @keyframes fillGreen { 100% { box-shadow: inset 0px 0px 0px 40px #22c55e; } }
        @keyframes fillRed { 100% { box-shadow: inset 0px 0px 0px 40px #ef4444; } }