:root {
            --color-dark: #0f0f0f;
            --color-light: #fcfcfc;
            --color-accent: #e5e5e5;
        }
        body {
            background-color: var(--color-light);
            color: var(--color-dark);
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
        }
        
        
        .hide-scrollbar::-webkit-scrollbar {
            display: none;
        }
        .hide-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        
        .bg-img-container {
            position: relative;
            overflow: hidden;
            z-index: 0;
            background-color: var(--color-accent);
        }
        .bg-img-container > img.bg-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -1;
        }

        
        #mobile-menu {
            transition: transform 0.3s ease-in-out;
            transform: translateY(-100%);
        }
        #mobile-menu.open {
            transform: translateY(0);
        }

        
        .border-solid-dark { border-color: var(--color-dark); }

        
        #auth-modal {
            transition: opacity 0.3s ease-in-out;
            pointer-events: none;
            opacity: 0;
        }
        #auth-modal.open {
            pointer-events: auto;
            opacity: 1;
        }

        
        #toast-container {
            position: fixed;
            top: 100px;
            right: 20px;
            z-index: 1000;
        }
        .toast {
            background: black;
            color: white;
            padding: 12px 24px;
            margin-bottom: 10px;
            border: 2px solid white;
            box-shadow: 4px 4px 0px 0px rgba(0,0,0,1);
            font-weight: bold;
            text-transform: uppercase;
            font-size: 12px;
            animation: slideIn 0.3s ease-out;
        }
        @keyframes slideIn {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }