/* Define custom brand colors and utility classes */
        :root {
            --primary-purple: #5c35a8;
            --secondary-pink: #d946ef;
        }

        /* Set Inter font */
        html { font-family: 'Inter', sans-serif; }

        /* Custom gradient for header and primary elements */
        .bg-rets-gradient {
            background: linear-gradient(135deg, var(--primary-purple), var(--secondary-pink));
        }
        
        /* Custom text gradient */
        .text-rets-gradient {
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-image: linear-gradient(90deg, var(--primary-purple), var(--secondary-pink));
        }

        /* Utility class for card backgrounds */
        .card-bg {
            background-color: white;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
        }

        /* Ensure the main container fills the viewport height on mobile */
        #app-container {
            min-height: 100vh;
        }

        /* Style for loading spinner */
        .loader {
            width: 18px;
            height: 18px;
            border: 2px solid #FFF;
            border-bottom-color: transparent;
            border-radius: 50%;
            display: inline-block;
            box-sizing: border-box;
            animation: rotation 1s linear infinite;
        }

        @keyframes rotation {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }