.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 10;

    display: flex;
    justify-content: center;

    padding: 0 14px;
    pointer-events: none;
}

.nav-shell {
    position: relative;

    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: center;

    width: min(100%, 420px);
    height: var(--nav-height);
    padding: 8px;

    overflow: hidden;
    pointer-events: auto;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;

    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.18),
            rgba(255, 255, 255, 0.06));

    backdrop-filter:
        blur(26px) saturate(190%) brightness(1.08);

    -webkit-backdrop-filter:
        blur(26px) saturate(190%) brightness(1.08);

    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 -1px 0 rgba(255, 255, 255, 0.05);

    isolation: isolate;
}

.nav-item {
    position: relative;
    z-index: 2;

    display: grid;
    place-items: center;

    min-width: 0;
    height: 56px;

    border: 0;
    border-radius: 999px;

    background: transparent;
    color: color-mix(in srgb, var(--text) 48%, transparent);

    cursor: pointer;

    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.35s ease,
        opacity 0.35s ease;
}

.nav-item:active {
    transform: scale(0.9);
}

.nav-item.is-active {
    color: var(--text);
    transform: translateY(-2px);
}

.nav-icon {
    width: 25px;
    height: 25px;

    pointer-events: none;

    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.35s ease;
}

.nav-item.is-active .nav-icon {
    transform: scale(1.12);

    filter:
        drop-shadow(0 3px 12px rgba(255, 255, 255, 0.3));
}

.nav-badge {
    position: absolute;
    top: 11px;
    right: calc(50% - 20px);

    min-width: 8px;
    height: 8px;

    border-radius: 999px;
    background: var(--accent-3);

    box-shadow:
        0 0 0 2px var(--glass-fallback-bg);
}

.nav-item.is-pressed {
    transform: scale(0.88);
}

.nav-item.is-active.is-pressed {
    transform: translateY(-2px) scale(0.88);
}