/* Bottom Navigation */
		:root {
             --primary: #6C63FF;
             --primary-dark: #5752D4;
             --primary-light: #8B85FF;
             --secondary: #00D4AA;
             --secondary-dark: #00B894;
             --accent: #FF6584;
             --accent-light: #FF8FA3;
             --success: #36D7B7;
             --warning: #FFB74D;
             --danger: #FF6B6B;
             
             --dark: #1A1D29;
             --dark-gray: #2D3340;
             --medium-gray: #4A5164;
             --light-gray: #E8EAF2;
             --light: #FFFFFF;
             --background: #F8FAFF;
             
             --gradient-primary: linear-gradient(135deg, #6C63FF, #8B85FF);
             --gradient-secondary: linear-gradient(135deg, #00D4AA, #36D7B7);
             --gradient-accent: linear-gradient(135deg, #FF6584, #FF8FA3);
             --gradient-dark: linear-gradient(135deg, #1A1D29, #2D3340);
             
             --shadow-sm: 0 2px 12px rgba(108, 99, 255, 0.08);
             --shadow-md: 0 4px 24px rgba(108, 99, 255, 0.12);
             --shadow-lg: 0 8px 32px rgba(108, 99, 255, 0.16);
             --shadow-inner: inset 0 2px 8px rgba(0, 0, 0, 0.06);
             
             --radius-sm: 12px;
             --radius-md: 18px;
             --radius-lg: 24px;
             --radius-xl: 32px;
             
             --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
             --transition-fast: all 0.2s ease;
             
             --safe-area-top: env(safe-area-inset-top);
             --safe-area-bottom: env(safe-area-inset-bottom);
         }
        .bottom-nav {
			background: white !important;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: var(--light);
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            border-top: 1px solid var(--light-gray);
            box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.05);
            z-index: 1000;
			border-radius: 40px 40px 0 0;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            text-decoration: none;
            padding: 8px 16px;
            border-radius: var(--radius-md);
            transition: var(--transition);
        }
        
        .nav-item.active {
            background: #7ae7e7;
        }
        
        .nav-icon {
            font-size: 20px;
            color: var(--medium-gray);
            transition: var(--transition);
        }
        
        .nav-item.active .nav-icon {
            color: var(--primary);
        }
        
        .nav-label {
            font-size: 12px;
            color: var(--medium-gray);
            font-weight: 600;
            transition: var(--transition);
        }
        
        .nav-item.active .nav-label {
            color: var(--primary);
        }