body { background-color: #FDFBF7; }
h1, h2, h3, h4, h5, h6 { font-family: 'Outfit', sans-serif; }
.glass { background: rgba(253, 251, 247, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid #D8D2C5; }
.glass-nav { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(12px); border-top: 1px solid #D8D2C5; }
.sidebar-desktop { width: 260px; background-color: #ffffff; border: 1px solid #D8D2C5; border-radius: 24px; margin: 24px; height: calc(100vh - 48px); box-shadow: 0 15px 35px -5px rgba(0,0,0,0.05); }
.main-container-responsive { margin-left: 0; }
@media (min-width: 768px) {
    .main-container-responsive { margin-left: 308px; } /* 260 + 24 + 24 */
}
.btn-scale:active { transform: scale(0.95); }
.nav-link-item { display: flex; align-items: center; padding: 12px 24px; margin: 4px 16px; border-radius: 16px; transition: all 0.3s ease; font-weight: 500; }
.mobile-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; transition: all 0.3s; }
.animate-fade-in { animation: fadeIn 0.8s ease-out forwards; opacity: 0; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
html { scroll-behavior: smooth; }

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 12px)); }
}
.animate-marquee {
    animation: marquee 20s linear infinite;
    width: max-content;
}
.hover-pause:hover {
    animation-play-state: paused;
}
.modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.3s; backdrop-filter: blur(5px);
}
.modal-overlay.active { opacity: 1; pointer-events: auto; }
.modal-img { max-width: 90%; max-height: 90%; border-radius: 12px; transform: scale(0.9); transition: transform 0.3s; }
.modal-overlay.active .modal-img { transform: scale(1); }

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Make sidebar fit on small laptop screens */
@media (max-height: 768px) and (min-width: 768px) {
    .sidebar-desktop { margin: 16px; height: calc(100vh - 32px); padding-top: 1rem !important; padding-bottom: 1rem !important; }
    .main-container-responsive { margin-left: 292px; } /* 260 + 16 + 16 */
    
    .profile-section { margin-bottom: 1rem !important; }
    .profile-image { width: 4rem !important; height: 4rem !important; margin-bottom: 0.5rem !important; }
    .profile-name { font-size: 1.25rem !important; }
    
    .nav-link-item { padding: 16px 20px; margin: 2px 12px; }
    .nav-link-item .w-8 { width: 1.5rem; height: 1.5rem; }
    
    .sidebar-footer { padding-top: 0.75rem !important; }
    .sidebar-footer .mb-4 { margin-bottom: 0.5rem !important; }
}