@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, #a7b9fc 0%, #d4e0ff 100%); /* Softer gradient background */
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            overflow: hidden; /* Prevent scrollbar from animation */
            position: relative;
        }

        /* Animated background particles */
        .background-particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: hidden;
            z-index: -1; /* Behind everything */
        }
        .particle {
            position: absolute;
            background-color: rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            opacity: 0;
            animation: particleAnimation linear infinite;
        }

        @keyframes particleAnimation {
            0% { transform: translateY(0) translateX(0) scale(0); opacity: 0; }
            20% { opacity: 1; }
            100% { transform: translateY(-100vh) translateX(50px) scale(1); opacity: 0; }
        }

        /* --- Loader Styles --- */
        .loader-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7); /* Dark semi-transparent background */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 1000; /* Ensure it's on top of everything */
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
        }

        .loader-overlay.show {
            opacity: 1;
            visibility: visible;
        }

        .loader-content {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px; /* Space between dots */
            margin-bottom: 20px;
        }

        .dot {
            width: 15px;
            height: 15px;
            background-color: #fff;
            border-radius: 50%;
            animation: bounceDot 1.4s infinite ease-in-out both;
        }

        .dot:nth-child(1) { animation-delay: -0.32s; }
        .dot:nth-child(2) { animation-delay: -0.16s; }
        .dot:nth-child(3) { animation-delay: 0s; }

        @keyframes bounceDot {
            0%, 80%, 100% { transform: scale(0); }
            40% { transform: scale(1); }
        }

        .loader-text {
            color: #fff;
            font-size: 1.2rem;
            font-weight: 500;
            animation: pulseText 2s infinite ease-in-out;
        }

        @keyframes pulseText {
            0% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.8; transform: scale(1.05); }
            100% { opacity: 1; transform: scale(1); }
        }

        /* --- Card Styles with Refined Glass Feel --- */
        .card {
            background-color: rgba(255, 255, 255, 0.15); /* Slightly less opaque for better glass effect */
            backdrop-filter: blur(12px); /* Increased blur for stronger frosted effect */
            -webkit-backdrop-filter: blur(12px); /* Safari support */
            border: 1px solid rgba(255, 255, 255, 0.25); /* More subtle border for realism */
            border-radius: 1.5rem; /* Consistent, modern rounded corners */
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* Stronger shadow */
            padding: 3rem; /* Increased padding */
            max-width: 30rem; /* Wider card */
            text-align: center;
            width: 90%; /* Responsive width */
            transition: all 0.5s ease-in-out;
            animation: fadeInScale 0.8s ease-out forwards; /* Card entrance animation */
            position: relative; /* For pseudo-elements */
            overflow: hidden;
            z-index: 1; /* Ensure card is above background particles */
        }

        /* Subtle background pattern for the card */
        .card::before {
            content: '';
            position: absolute;
            top: -20%;
            left: -20%;
            width: 140%;
            height: 140%;
            background: radial-gradient(circle at 50% 50%, rgba(200, 200, 255, 0.1) 0%, transparent 70%);
            animation: rotateBackground 30s linear infinite;
            z-index: 0;
        }

        .card > * {
            position: relative;
            z-index: 1; /* Ensure content is above background pattern */
        }

        @keyframes fadeInScale {
            from {
                opacity: 0;
                transform: scale(0.9) translateY(20px);
            }
            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        @keyframes rotateBackground {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .card-title {
            animation: slideInLeft 0.7s ease-out forwards;
            opacity: 0;
            margin-bottom: 1rem; /* Adjust margin if needed */
        }
        .card-title .fas {
            animation: pulseIcon 2s infinite ease-in-out; /* Pulsing icon animation */
            display: inline-block;
        }

        @keyframes slideInLeft {
            from { opacity: 0; transform: translateX(-20px); }
            to { opacity: 1; transform: translateX(0); }
        }
        @keyframes pulseIcon {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }

        .card-subtitle {
            animation: slideInRight 0.7s ease-out forwards;
            opacity: 0;
            animation-delay: 0.2s; /* Delay for staggered effect */
            margin-bottom: 2rem; /* Adjust margin if needed */
        }

        @keyframes slideInRight {
            from { opacity: 0; transform: translateX(20px); }
            to { opacity: 1; transform: translateX(0); }
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 1rem 2rem; /* Even larger padding */
            border-radius: 9999px; /* Pill-shaped button */
            font-weight: 700; /* Bolder text */
            font-size: 1.2rem; /* Larger text */
            transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease, color 0.3s ease;
            cursor: pointer;
            border: none;
            outline: none;
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); /* Enhanced shadow */
            position: relative;
            overflow: hidden;
            animation: fadeInButton 0.8s ease-out forwards;
            animation-delay: 0.4s; /* Delay for staggered effect */
            opacity: 0;
        }
        @keyframes fadeInButton {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .btn:hover:not(:disabled) {
            transform: translateY(-4px); /* More pronounced lift */
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); /* Stronger shadow on hover */
        }
        .btn:active:not(:disabled) {
            transform: translateY(0);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        /* Ripple effect on button click */
        .btn::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
            background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
            background-repeat: no-repeat;
            background-position: 50%;
            transform: scale(10, 10);
            opacity: 0;
            transition: transform 0.6s, opacity 0.8s;
        }
        .btn:not(:disabled):active::after {
            transform: scale(0, 0);
            opacity: 0.3;
            transition: 0s;
        }

        /* Button hover shine effect */
        .btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 50%;
            height: 100%;
            background: rgba(255, 255, 255, 0.3);
            transform: skewX(-20deg);
            transition: all 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
            z-index: 1;
        }
        .btn:hover:not(:disabled)::before {
            left: 120%;
        }


        .btn-primary {
            background: linear-gradient(135deg, #4f46e5 0%, #8b5cf6 100%); /* Richer primary gradient */
            color: white;
        }
        .btn-primary:hover:not(:disabled) {
            background: linear-gradient(135deg, #4338ca 0%, #7c3aed 100%);
        }
        .btn-success {
            background: linear-gradient(135deg, #16a34a 0%, #059669 100%); /* Stronger green gradient */
            color: white;
            cursor: default;
        }
        .btn-success:hover {
            transform: none; /* No lift on success */
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); /* Maintain shadow */
        }
        .btn-error {
            background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); /* Stronger red gradient */
            color: white;
        }
        .btn-error:hover:not(:disabled) {
            background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); /* Keep red on hover for error */
        }
        .btn:disabled {
            opacity: 0.5; /* Slightly more opaque disabled state */
            cursor: not-allowed;
            box-shadow: none;
            transform: none;
        }
        .spinner { /* This spinner is removed from button, but kept for reference */
            border: 4px solid rgba(255, 255, 255, 0.3);
            border-top: 4px solid #fff;
            border-radius: 50%;
            width: 1.5rem;
            height: 1.5rem;
            animation: spin 0.8s linear infinite; /* Faster spin */
            margin-right: 0.75rem; /* More space */
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .message {
            margin-top: 2rem; /* More space above message */
            padding: 1rem 1.5rem; /* Larger padding */
            border-radius: 1rem; /* More rounded message box */
            font-size: 1rem; /* Slightly larger font */
            font-weight: 600;
            animation: fadeInMessage 0.5s ease-out forwards; /* Message entrance animation */
            transition: all 0.3s ease-in-out;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        @keyframes fadeInMessage {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .message.success {
            background-color: #dcfce7; /* Lighter green */
            color: #15803d; /* Darker green */
            border: 1px solid #86efac; /* Subtle border */
        }
        .message.error {
            background-color: #fee2e2; /* Lighter red */
            color: #b91c1c; /* Darker red */
            border: 1px solid #fca5a5; /* Subtle border */
        }
        .message-icon {
            margin-right: 0.75rem;
            animation: bounceIn 0.6s ease-out;
        }
        @keyframes bounceIn {
            0% { transform: scale(0.3); opacity: 0; }
            50% { transform: scale(1.1); opacity: 1; }
            70% { transform: scale(0.9); }
            100% { transform: scale(1); }
        }
        .icon-small {
            margin-right: 0.6rem; /* More space between icon and text */
        }
        .text-4xl {
            font-size: 2.5rem; /* Adjust title size for better balance */
        }