:root {
    --bg-0: #111827;
    --bg-1: #1a1d23;
    --bg-2: #2a2d35;
    --bg-3: #374151;

    --brand: #d97706;
    --brand-2: #f59e0b;

    --fs-xxl: 1.75rem;
    --fs-xl:  1.5rem;
    --fs-lg:  1.25rem;
    --fs-md:  1rem;
    --fs-sm:  0.875rem;
    --fs-xs:  0.75rem;

    --g-start: #14161b;
    --g-mid:   #1b1f26;
    --g-end:   #171e21;
}

body { 
    background: var(--bg-0); 
}

.hidden {
    display: none !important;
}

@media (max-width: 768px) {
    .desktop-nav,
    .desktop-user-menu {
        display: none !important;
    }
    
    .mobile-menu-button {
        display: block !important;
    }
    
    .header-brand-text {
        font-size: 18px !important;
    }

    .page-container {
        margin: 0 !important;
        padding: 1rem !important;
        border-radius: 0 !important;
        min-height: 100vh !important;
    }

    main {
        padding: 0 !important;
    }

    .audio-player-section {
        border-radius: 0 !important;
    }

    .card-item {
        border-radius: 0 !important;
    }
}

@media (max-width: 480px) {
    .header-brand-text {
        font-size: 16px !important;
    }
}