/* CSS Variables for easy theming */
        :root {
            --loader-bg: rgba(255, 255, 255, 0.95);
            --loader-color: #ff6b35;
            --loader-color-light: rgba(255, 107, 53, 0.3);
            --transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            --content-max-width: 800px;
        }

        /* Reset and base styles */
        * { box-sizing: border-box; }
        body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

        /* Loader overlay - optimized for performance */
        #loader {
            position: fixed;
            inset: 0;
            background: var(--loader-bg);
            backdrop-filter: blur(2px);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            opacity: 1;
            visibility: visible;
            transition: opacity var(--transition), visibility var(--transition);
            scale: 2;
        }

        #loader.hide {
            opacity: 0;
            visibility: hidden;
        }

        /* Optimized spinner - only transform animations for better performance */
        .spinner {
            position: relative;
            width: 50px;
            height: 50px;
        }

        .spinner::before,
        .spinner::after {
            content: '';
            position: absolute;
            inset: 0;
            border: 3px solid transparent;
            border-radius: 50%;
            border-top-color: var(--loader-color);
            animation: spin 1s linear infinite;
            will-change: transform;
        }

        .spinner::after {
            border-top-color: var(--loader-color-light);
            animation-duration: 2s;
            animation-direction: reverse;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* Content styles */
        #content {
            opacity: 0;
            visibility: hidden;
            transition: opacity var(--transition), visibility var(--transition);
            min-height: 100vh;
            padding: 2rem 1rem;
        }

        #content.show {
            opacity: 1;
            visibility: visible;
        }