/* Desktop nav bar */
#nav {
    background: rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-radius: 100px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Ссылки с иконкой — flex row */
#nav ul.links li a.nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    color: rgba(255, 255, 255, 0.82) !important;
    text-shadow: none !important;
    padding: 0 1.4rem !important;
    transition: color 0.2s ease, background 0.2s ease !important;
    text-transform: uppercase !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.07em !important;
    font-weight: 900 !important;
}

#nav ul.links li a.nav-link:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    text-shadow: none !important;
}

/* Иконки в nav — фиксированная ширина чтобы все выровнялись */
#nav ul.links li a .nav-icon {
    font-size: 0.85rem !important;
    opacity: 0.75;
    flex-shrink: 0;
    line-height: 1 !important;
    width: 1em !important;
    text-align: center !important;
    display: inline-block !important;
}

#nav ul.links li a:hover .nav-icon {
    opacity: 1;
}

/* Активный пункт */
#nav ul.links li.active {
    background-color: rgba(255, 255, 255, 0.15) !important;
}

#nav ul.links li.active a {
    color: #ffffff !important;
}

#nav ul.links li.active a .nav-icon {
    opacity: 1;
}

/* Иконки соцсетей */
#nav ul.icons li a {
    color: rgba(255, 255, 255, 0.75) !important;
    text-shadow: none !important;
    transition: color 0.2s ease !important;
}

#nav ul.icons li a:hover {
    color: #ffffff !important;
}

/* Мобильная панель — иконки + текст в строку */
#navPanel .links li a.nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    padding: 0.85rem 0 !important;
}

#navPanel .links li a .nav-icon {
    font-size: 1rem !important;
    opacity: 0.7;
    flex-shrink: 0;
    width: 1.2rem;
    text-align: center;
}

#navPanel .links li a:hover .nav-icon {
    opacity: 1;
}