.bottom-nav {
    position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 100%; max-width: var(--max-width);
    height: var(--bottom-nav-height);
    display: flex; align-items: stretch;
    background-size: 100% 100%;
    background-repeat: no-repeat; background-position: center;
    background-color: transparent;
    z-index: 100;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.bottom-nav-item {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: 5px 2px 5px;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    text-decoration: none; background: transparent; border: none; color: inherit;
    transition: opacity var(--transition);
}

.bottom-nav-item:active { opacity: .7; }

.bottom-nav-icon {
    width: 30px; height: 30px; position: relative; flex-shrink: 0;
}

.bottom-nav-icon img {
    width: 100%; height: 100%; object-fit: contain;
    position: absolute; top: 0; left: 0;
}

.bottom-nav-label {
    font-size: 0.5625rem; font-weight: 500;
    color: #5faafe; line-height: 1; white-space: nowrap;
}

.bottom-nav-item.active .bottom-nav-label {
    color: #0160eb; font-weight: 700;
}

.hidden { display: none !important; }