/* 导航栏样式 */
#nav {
    background: var(--xyx-glass-bg) !important;
    backdrop-filter: blur(var(--xyx-glass-blur)) !important;
    -webkit-backdrop-filter: blur(var(--xyx-glass-blur)) !important;
    border-right: 1px solid var(--xyx-glass-border) !important;
    transition: var(--xyx-glass-transition) !important;
}

.nav-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    border-bottom: 1px solid var(--xyx-glass-border) !important;
    text-align: center !important;
}

.nav-brand img {
    max-height: 40px !important;
    margin: 0 auto !important;
}

.nav {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.nav > li {
    position: relative !important;
}

.nav > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 20px !important;
    color: var(--xyx-text-color) !important;
    text-decoration: none !important;
    transition: var(--xyx-glass-transition) !important;
    border-left: 3px solid transparent !important;
    text-align: center !important;
}

.nav > li > a:hover {
    background: var(--xyx-glass-bg-hover) !important;
    color: var(--xyx-accent-color) !important;
    border-left-color: var(--xyx-accent-color) !important;
}

.nav > li.active > a {
    background: var(--xyx-glass-bg-hover) !important;
    color: var(--xyx-accent-color) !important;
    border-left-color: var(--xyx-accent-color) !important;
    font-weight: 500 !important;
}

.nav > li > a i {
    margin-right: 10px !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
}