body {
            background-color: #f8fafc;
        }

        .card-in {
            animation: cardIn 0.4s ease both;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        @media (hover: hover) {
            .card-in:hover {
                transform: perspective(900px) translateY(-4px) rotateX(1.5deg);
                box-shadow: 0 18px 40px -12px rgba(33, 67, 149, 0.28);
            }
        }

        @keyframes cardIn {
            from {
                opacity: 0;
                transform: translateY(8px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

.swal2-confirm{background-color:#214395 !important}
.swal2-confirm:focus{box-shadow:0 0 0 3px rgba(33,67,149,.4) !important}
.swal2-popup{border-radius:1rem !important;font-family:"Plus Jakarta Sans",sans-serif !important}

        @view-transition {
            navigation: auto;
        }

        ::view-transition-old(root),
        ::view-transition-new(root) {
            animation-duration: 0.34s;
            animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        }

        @keyframes mlxPageIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @supports not (view-transition-name: none) {
            body {
                animation: mlxPageIn 0.3s ease both;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            body { animation: none; }
            ::view-transition-old(root),
            ::view-transition-new(root) { animation: none; }
        }