body { font-family: 'Inter', sans-serif; background-color: #f8fafc; }
    .sidebar-transition { transition: width 0.3s ease-in-out, transform 0.3s ease-in-out; }
    .content-transition { transition: margin-left 0.3s ease-in-out; }
    
    /* Приховане у згорнутому стані */
    .sidebar-collapsed .text-label, 
    .sidebar-collapsed .logo-text, 
    .sidebar-collapsed .social-expanded, 
    .sidebar-collapsed .badge-count { display: none !important; }
    
    /* Відображення у згорнутому стані */
    .sidebar-collapsed .logo-icon, 
    .sidebar-collapsed .social-collapsed { display: flex !important; }
    .sidebar-collapsed .logo-icon { margin: 0 auto; }
    
    /* Стилі меню для згорнутого стану */
    .sidebar-collapsed nav a { justify-content: center !important; padding-left: 0 !important; padding-right: 0 !important; }
    .sidebar-collapsed nav a .icon-trigger { margin: 0 !important; }
    .sidebar-collapsed nav { overflow: visible !important; }

    /* Відображення у розгорнутому стані */
    /* ВАЖЛИВО: тут flex, щоб іконки центрувались */
    .sidebar-expanded .text-label, 
    .sidebar-expanded .logo-text { display: block !important; animation: fadeIn 0.3s; }
    .sidebar-expanded .social-expanded { display: flex !important; animation: fadeIn 0.3s; }
    
    /* Приховане у розгорнутому стані */
    .sidebar-expanded .logo-icon, 
    .sidebar-expanded .social-collapsed,
    .sidebar-expanded .custom-tooltip { display: none !important; }

    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    .custom-scroll::-webkit-scrollbar { width: 0; }
    .input-error { border-color: #ef4444 !important; background-color: #fef2f2 !important; }
    .error-text { display: none; color: #ef4444; font-size: 0.75rem; margin-top: 4px; font-weight: bold; }
    .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .animate-fade-in-up { animation: fadeInUp 0.2s ease-out; }
    @keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    
    .badge-count { display: flex; align-items: center; justify-content: center; background-color: #6366f1; color: white; font-size: 0.7rem; font-weight: bold; padding: 0 6px; height: 18px; border-radius: 9px; margin-left: auto; transition: all 0.3s; box-shadow: 0 2px 4px rgba(99, 102, 241, 0.3); }
    .sidebar-collapsed .badge-count { position: absolute; top: 8px; right: 8px; margin: 0; min-width: 16px; height: 16px; font-size: 0.6rem; padding: 0 4px; z-index: 10; border: 2px solid white; }