@media (max-width: 991px) {

    /* MOBILE BOTTOM NAV */
    .mobile-bottom-nav {
        position: fixed;
        bottom: env(safe-area-inset-bottom);
        left: 0;
        right: 0;

        height: 64px;
        background: #000000;

        display: flex;
        justify-content: space-around;
        align-items: center;

        border-top: 1px solid #1f1f1f;
        z-index: 1050;
    }

    /* ITEM */
    .mobile-bottom-item {
        flex: 1;
        height: 100%;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        text-decoration: none;
        color: #bdbdbd;

        font-size: 11px;
        font-weight: 500;

        transition: color .15s ease, transform .1s ease;
        position: relative;
    }

    .mobile-bottom-item i {
        font-size: 18px;
        margin-bottom: 4px;
        color: #bdbdbd;
    }

    /* AVATAR */
    .mobile-avatar {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        object-fit: cover;
        margin-bottom: 4px;
        border: 2px solid transparent;
    }

    /* ACTIVE STATE */
    .mobile-bottom-item.active {
        color: #ffffff;
        font-weight: 600;
    }

    .mobile-bottom-item.active i {
        color: #ffffff;
    }

    .mobile-bottom-item.active .mobile-avatar {
        border-color: #ffffff;
    }

    /* HIGHLIGHT (REGISTER) */
    .mobile-bottom-item.highlight {
        color: #DC3545;
        font-weight: 600;
    }

    .mobile-bottom-item.highlight i {
        color: #DC3545;
    }

    /* BADGE */
    .mobile-badge {
        position: absolute;
        top: 8px;
        right: 22px;

        min-width: 16px;
        height: 16px;

        background: #DC3545;
        color: #ffffff;

        font-size: 10px;
        font-weight: 700;

        border-radius: 999px;
        padding: 0 4px;

        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* CONTENT SPACING */
    body {
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }
    .mobile-bottom-item:active {
    transform: scale(0.96);
}

}