:root {
    --asel-pwa-nav-height: 72px;
}

.asel-mobile-bottom-nav,
.asel-pwa-public-install {
    display: none;
}

@media (max-width: 768px) {
    body:has(.asel-mobile-bottom-nav) {
        padding-bottom: calc(
            var(--asel-pwa-nav-height)
            + env(safe-area-inset-bottom)
        );
    }

    .asel-mobile-bottom-nav {
        position: fixed;
        right: 10px;
        bottom: calc(8px + env(safe-area-inset-bottom));
        left: 10px;
        z-index: 90;
        display: grid;
        grid-template-columns: repeat(
            var(--asel-mobile-nav-columns, 5),
            minmax(0, 1fr)
        );
        min-height: 64px;
        overflow: hidden;
        border: 1px solid rgba(148, 163, 184, .22);
        border-radius: 20px;
        background:
            linear-gradient(
                180deg,
                rgba(8, 24, 49, .96),
                rgba(5, 17, 36, .98)
            );
        box-shadow:
            0 18px 45px rgba(2, 8, 23, .36),
            inset 0 1px 0 rgba(255, 255, 255, .06);
        backdrop-filter: blur(18px);
    }

    .asel-mobile-bottom-nav__item {
        position: relative;
        display: flex;
        min-width: 0;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 4px;
        padding: 8px 3px 7px;
        color: #94a3b8;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    .asel-mobile-bottom-nav__item::before {
        position: absolute;
        top: 0;
        left: 50%;
        width: 28px;
        height: 3px;
        border-radius: 0 0 5px 5px;
        background: transparent;
        content: "";
        transform: translateX(-50%);
    }

    .asel-mobile-bottom-nav__item.is-active { color: #5ecbff; }

    .asel-mobile-bottom-nav__item.is-active::before {
        background: linear-gradient(90deg, #33b8ff, #2876ff);
        box-shadow: 0 3px 13px rgba(51, 184, 255, .55);
    }

    .asel-mobile-bottom-nav__icon {
        display: inline-flex;
        width: 23px;
        height: 23px;
        align-items: center;
        justify-content: center;
    }

    .asel-mobile-bottom-nav__icon svg {
        display: block;
        width: 22px;
        height: 22px;
    }

    .asel-mobile-bottom-nav__label {
        max-width: 100%;
        overflow: hidden;
        font-size: 10px;
        font-weight: 700;
        line-height: 1.2;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .asel-pwa-public-install {
        position: fixed;
        right: 14px;
        bottom: calc(
            var(--asel-pwa-nav-height)
            + 18px
            + env(safe-area-inset-bottom)
        );
        left: 14px;
        z-index: 89;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        border: 1px solid rgba(51, 184, 255, .28);
        border-radius: 15px;
        background: rgba(7, 26, 51, .96);
        padding: 11px 12px;
        color: #ffffff;
        box-shadow: 0 14px 38px rgba(2, 8, 23, .3);
        backdrop-filter: blur(15px);
    }

    .asel-pwa-public-install[data-visible="1"] { display: flex; }
    .asel-pwa-public-install div { min-width: 0; }
    .asel-pwa-public-install strong { display:block; font-size:13px; line-height:1.35; }
    .asel-pwa-public-install span { display:block; margin-top:2px; color:#cbd5e1; font-size:10px; line-height:1.4; }
    .asel-pwa-public-install button {
        flex:0 0 auto; border:0; border-radius:10px;
        background:linear-gradient(135deg,#33b8ff,#2876ff);
        padding:9px 11px; color:#fff; cursor:pointer;
        font:inherit; font-size:11px; font-weight:800;
    }
}