.bottom-nav-container {
    position: fixed;
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    pointer-events: none;
    padding: 0 1rem;
}

#nav-glass-surface {
    pointer-events: auto;
    width: 320px;
    height: 76px;
    border-radius: 38px;
    max-width: calc(100vw - 1.5rem);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

#nav-glass-surface:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 0 3px 1.5px light-dark(color-mix(in oklch, black, transparent 80%), color-mix(in oklch, white, transparent 60%))
          inset,
        0 0 14px 5px light-dark(color-mix(in oklch, black, transparent 86%), color-mix(in oklch, white, transparent 78%))
          inset,
        0px 8px 24px rgba(17, 17, 26, 0.08),
        0px 12px 32px rgba(17, 17, 26, 0.06),
        0px 20px 65px rgba(17, 17, 26, 0.05),
        0px 5px 14px rgba(17, 17, 26, 0.1) inset,
        0px 10px 24px rgba(17, 17, 26, 0.08) inset,
        0px 16px 55px rgba(17, 17, 26, 0.06) inset;
}

nav.bottom-nav {
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    padding: 0;
    width: 100%;
    height: 100%;
}

nav.bottom-nav ul {
    display: flex;
    list-style: none;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
}

nav.bottom-nav ul li {
    margin: 0;
}

nav.bottom-nav ul li a {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro", "Inter", sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    position: relative;
    padding: 0.42rem 0.68rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 26px;
    transition: background 0.22s cubic-bezier(0.16, 1, 0.3, 1), color 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease;
    color: rgba(0, 0, 0, 0.75);
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    min-height: 40px;
    letter-spacing: -0.01em;
}

nav.bottom-nav ul li a svg {
    width: 19px;
    height: 19px;
    fill: currentColor;
    flex-shrink: 0;
    transition: transform 0.22s ease;
    opacity: 0.82;
}

nav.bottom-nav ul li a:hover {
    background: rgba(255, 255, 255, 0.45);
    color: #000000;
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 2px 6px rgba(0, 0, 0, 0.04);
}

nav.bottom-nav ul li a:hover svg {
    transform: scale(1.08);
    opacity: 1;
}

nav.bottom-nav ul li a.active {
    background: rgba(0, 0, 0, 0.08);
    color: #000000;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 3px rgba(0, 0, 0, 0.05);
}

nav.bottom-nav ul li a.active svg {
    opacity: 1;
}

nav.bottom-nav ul li a::after {
    display: none;
}

@media (max-width: 520px) {
    .bottom-nav-container {
        bottom: calc(0.8rem + env(safe-area-inset-bottom, 0px));
        padding: 0 0.5rem;
    }

    #nav-glass-surface {
        width: 320px;
        max-width: calc(100vw - 1rem);
    }

    nav.bottom-nav ul {
        gap: 0.2rem;
    }

    nav.bottom-nav ul li a {
        padding: 0.38rem 0.55rem;
        font-size: 0.78rem;
        gap: 0.28rem;
    }

    nav.bottom-nav ul li a svg {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 340px) {
    nav.bottom-nav ul li a {
        padding: 0.32rem 0.45rem;
        font-size: 0.72rem;
        gap: 0.22rem;
    }
}