:root {
    --r2r-app-blue: #202486;
    --r2r-app-purple: #5a1f79;
    --r2r-app-pink: #e40868;
    --r2r-app-surface: rgba(255, 255, 255, 0.94);
    --r2r-app-text: #101828;
}

.r2r-app-profile-fab,
.r2r-app-bottom-nav {
    display: none;
}

html.r2r-app-shell-enabled body {
    padding-bottom: calc(
        88px + env(safe-area-inset-bottom)
    ) !important;
}

html.r2r-app-shell-enabled .r2r-app-profile-fab {
    position: fixed;
    top: calc(14px + env(safe-area-inset-top));
    right: 14px;
    z-index: 9998;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    color: #fff;
    background:
        linear-gradient(
            135deg,
            var(--r2r-app-blue),
            var(--r2r-app-pink)
        );
    border: 2px solid rgba(255, 255, 255, 0.86);
    box-shadow:
        0 12px 28px rgba(17, 24, 39, 0.24),
        0 2px 8px rgba(17, 24, 39, 0.14);
    text-decoration: none;
}

.r2r-app-profile-fab svg {
    width: 23px;
    height: 23px;
    fill: currentColor;
}

html.r2r-app-shell-enabled .r2r-app-bottom-nav {
    position: fixed;
    left: 50%;
    bottom: calc(10px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 9997;
    display: grid;
    /* R2R_APP_SHELL_CORE_FIVE_V1 */
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: min(430px, calc(100vw - 20px));
    min-height: 68px;
    padding: 7px;
    border-radius: 24px;
    background: var(--r2r-app-surface);
    border: 1px solid rgba(16, 24, 40, 0.09);
    box-shadow:
        0 20px 45px rgba(17, 24, 39, 0.22),
        0 3px 10px rgba(17, 24, 39, 0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.r2r-app-nav-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 54px;
    border-radius: 18px;
    color: rgba(16, 24, 40, 0.58);
    text-decoration: none;
    font-family: "DM Sans", sans-serif;
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
    transition:
        background 160ms ease,
        color 160ms ease,
        transform 160ms ease;
}

.r2r-app-nav-item svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.r2r-app-nav-item.is-active {
    color: #fff;
    background:
        linear-gradient(
            135deg,
            var(--r2r-app-blue),
            var(--r2r-app-pink)
        );
    box-shadow:
        0 8px 18px rgba(91, 31, 121, 0.24);
}

.r2r-app-nav-item:active {
    transform: scale(0.96);
}

@media (min-width: 900px) {
    html.r2r-app-shell-enabled body {
        padding-bottom: 104px !important;
    }

    html.r2r-app-shell-enabled .r2r-app-bottom-nav {
        width: 420px;
    }
}

@media (display-mode: standalone) {
    html.r2r-app-shell-enabled .r2r-app-bottom-nav {
        bottom: calc(8px + env(safe-area-inset-bottom));
    }
}

/* R2R_APP_ACTIVE_ICON_WHITE_V1 */
html.r2r-app-shell-enabled .r2r-app-nav-item.is-active,
html.r2r-app-shell-enabled .r2r-app-nav-item.is-active svg,
html.r2r-app-shell-enabled .r2r-app-nav-item.is-active svg *,
html.r2r-app-shell-enabled .r2r-app-nav-item.is-active span {
    color: #ffffff !important;
    fill: currentColor !important;
    stroke: currentColor !important;
    opacity: 1 !important;
}


/* R2R_GLOBAL_APP_SPINNER_CSS_V2 */
.r2r-global-app-spinner[hidden]{display:none!important}
.r2r-global-app-spinner{
    position:fixed;
    inset:0;
    z-index:2147482500;
    display:grid;
    place-items:center;
}
.r2r-global-app-spinner-backdrop{
    position:absolute;
    inset:0;
    background:rgba(8,20,34,.34);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
}
.r2r-global-app-spinner-wheel{
    position:relative;
    z-index:1;
    width:58px;
    height:58px;
    border:6px solid rgba(255,255,255,.42);
    border-top-color:#F58025;
    border-right-color:#1C4775;
    border-radius:50%;
    box-shadow:0 10px 28px rgba(8,20,34,.22);
    animation:r2r-global-spinner-rotate .72s linear infinite;
}
html.r2r-app-is-loading,
html.r2r-app-is-loading body{overflow:hidden!important}
@keyframes r2r-global-spinner-rotate{to{transform:rotate(360deg)}}


/* R2R_RANKING_NAV_BODY_ROOT_CSS_V4 */
body > .r2r-app-bottom-nav{
    display:grid!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    position:fixed!important;
    left:50%!important;
    bottom:calc(10px + env(safe-area-inset-bottom))!important;
    transform:translateX(-50%)!important;
    z-index:2147482000!important;
}

html.r2r-app-shell-enabled body{
    padding-bottom:
        calc(
            96px
            + env(safe-area-inset-bottom)
        )!important;
}

@media(display-mode:standalone){
    body > .r2r-app-bottom-nav{
        bottom:
            calc(
                8px
                + env(safe-area-inset-bottom)
            )!important;
    }
}