.mobile-app-topbar,
.mobile-app-nav,
.mobile-more-sheet {
    display: none;
}

@media (max-width: 767px) {
    body.mobile-navigation-enabled {
        padding-bottom: calc(78px + env(safe-area-inset-bottom));
    }

    body.mobile-navigation-enabled > .site-header,
    body.mobile-navigation-enabled > .product-breadcrumbs {
        display: none !important;
    }

    .mobile-app-topbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        gap: 8px;
        min-height: 56px;
        padding: max(8px, env(safe-area-inset-top)) 16px 8px;
        border-bottom: 1px solid rgba(84, 147, 188, .2);
        background: linear-gradient(100deg, #090a1a, #101d35 70%, #050b19);
        color: #d6edff;
    }

    .mobile-app-brand {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        color: #eefaff;
        font-size: 16px;
        font-weight: 900;
        text-decoration: none;
    }

    .mobile-app-brand img {
        width: 32px;
        height: 32px;
        object-fit: contain;
    }

    .mobile-app-brand span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-app-topbar-area {
        min-width: 0;
        color: #7ddbe6;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: .04em;
        white-space: nowrap;
    }

    .mobile-app-profile {
        justify-self: end;
    }

    .mobile-app-nav {
        position: fixed;
        z-index: 90;
        right: 0;
        bottom: 0;
        left: 0;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        box-sizing: border-box;
        width: 100vw;
        max-width: 100vw;
        min-height: 68px;
        margin: 0;
        padding: 6px max(5px, env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(5px, env(safe-area-inset-left));
        border-top: 1px solid #2d5877;
        border-radius: 15px 15px 0 0;
        background: rgba(5, 18, 37, .97);
        box-shadow: 0 -8px 24px rgba(0, 0, 0, .38);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        overflow: visible;
    }

    .mobile-app-nav-item,
    .mobile-app-nav-item:visited {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-width: 0;
        min-height: 54px;
        padding: 2px 1px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: #a6bddb;
        font: inherit;
        font-size: 10px;
        font-weight: 650;
        line-height: 1.1;
        text-align: center;
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-app-nav-item i {
        display: grid;
        place-items: center;
        width: 34px;
        height: 28px;
        color: inherit;
        font-size: 19px;
        line-height: 1;
    }

    .mobile-app-nav-item.is-active,
    .mobile-app-nav-item[aria-expanded="true"] {
        color: #e7ffff;
        background: rgba(26, 134, 157, .22);
    }

    .mobile-app-nav-item.is-active::before,
    .mobile-app-nav-item[aria-expanded="true"]::before {
        content: "";
        position: absolute;
        top: -6px;
        width: 24px;
        height: 2px;
        border-radius: 2px;
        background: #58cedc;
        box-shadow: 0 0 9px #2dbdcc99;
    }

    .mobile-app-nav-item--primary i {
        width: 39px;
        height: 32px;
        border: 1px solid #3da2b4;
        border-radius: 10px;
        background: linear-gradient(145deg, #135c73, #0c405a);
        color: #e9ffff;
        box-shadow: 0 2px 8px #0005;
    }

    .mobile-app-nav-item--primary.is-active i {
        border-color: #7bdddf;
        background: linear-gradient(145deg, #21899c, #13647d);
    }

    .mobile-more-sheet[open] {
        position: fixed;
        inset: auto 0 0;
        display: block;
        width: min(100%, 520px);
        max-width: 100%;
        max-height: min(82dvh, 760px);
        margin: 0 auto;
        padding: 0;
        border: 1px solid #386784;
        border-bottom: 0;
        border-radius: 22px 22px 0 0;
        background: #07172c;
        color: #e7f4ff;
        box-shadow: 0 -16px 50px #000a;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .mobile-more-sheet::backdrop {
        background: rgba(0, 7, 20, .7);
        backdrop-filter: blur(3px);
    }

    .mobile-more-inner {
        padding: 18px 16px calc(22px + env(safe-area-inset-bottom));
    }

    .mobile-more-heading {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 17px;
    }

    .mobile-more-heading span {
        color: #5cdbdf;
        font-size: 10px;
        font-weight: 900;
        letter-spacing: .12em;
    }

    .mobile-more-heading h2,
    body.light .mobile-more-heading h2 {
        margin: 3px 0 0;
        color: #fff !important;
        font-size: 26px;
        font-weight: 900;
        line-height: 1;
    }

    .mobile-more-close {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border: 1px solid #3e6887;
        border-radius: 12px;
        background: #132c44;
        color: #d8edff;
        font-size: 18px;
    }

    .mobile-more-content {
        display: grid;
        gap: 17px;
    }

    .mobile-more-content h3,
    body.light .mobile-more-content h3 {
        margin: 0 0 7px;
        color: #80d8e6 !important;
        font-size: 11px;
        font-weight: 900;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .mobile-more-links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .mobile-more-links a,
    .mobile-more-links button,
    .mobile-more-logout button {
        min-width: 0;
        min-height: 45px;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        border: 1px solid #315370;
        border-radius: 11px;
        background: #10273e;
        color: #e0efff;
        font: inherit;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.2;
        text-align: left;
        text-decoration: none;
        cursor: pointer;
    }

    .mobile-more-links i,
    .mobile-more-logout i {
        flex: 0 0 17px;
        color: #7cdae8;
        text-align: center;
        font-size: 15px;
    }

    .mobile-more-languages {
        display: flex;
        align-items: center;
        gap: 7px;
        margin-top: 12px;
    }

    .mobile-more-languages > span {
        margin-right: auto;
        color: #b4cce6;
        font-size: 12px;
    }

    .mobile-more-languages a {
        display: grid;
        place-items: center;
        min-width: 42px;
        min-height: 38px;
        border: 1px solid #315370;
        border-radius: 9px;
        color: #c6dff3;
        font-size: 12px;
        font-weight: 800;
        text-decoration: none;
    }

    .mobile-more-languages a.is-active {
        border-color: #62c4d2;
        background: #17475b;
        color: #fff;
    }

    .mobile-more-logout {
        margin-top: 13px;
    }

    .mobile-more-logout button {
        width: 100%;
        justify-content: center;
        background: #18273d;
    }

    .mobile-app-nav a:focus-visible,
    .mobile-app-nav button:focus-visible,
    .mobile-more-sheet a:focus-visible,
    .mobile-more-sheet button:focus-visible {
        outline: 2px solid #8ee9e7;
        outline-offset: 2px;
    }

    body.mobile-navigation-enabled .onboarding-replay-button {
        display: none !important;
    }

    body.mobile-navigation-enabled .onboarding-tooltip {
        bottom: calc(82px + env(safe-area-inset-bottom)) !important;
        max-height: calc(100dvh - 100px - env(safe-area-inset-bottom));
    }

    body.dashboard-page .mobile-app-topbar {
        display: none;
    }

    body.dashboard-page.mobile-navigation-enabled {
        padding-bottom: 0;
    }
}

@media (max-width: 370px) {
    .mobile-app-nav-item {
        font-size: 9px;
    }

    .mobile-app-nav {
        padding-right: max(2px, env(safe-area-inset-right));
        padding-left: max(2px, env(safe-area-inset-left));
    }
}

@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
    [data-mobile-pwa-install] {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .mobile-app-topbar--section {
        position: relative;
        z-index: 120;
        grid-template-columns: auto minmax(0, 1fr) 34px 34px;
        gap: 9px;
        min-height: 48px;
        padding: max(6px, env(safe-area-inset-top)) 11px 6px;
        background: linear-gradient(100deg, #090a1a, #101d35 70%, #050b19);
        border-bottom-color: #14405a;
    }

    .mobile-app-topbar--section .mobile-app-brand {
        gap: 5px;
        font-size: 12px;
        letter-spacing: -.02em;
    }

    .mobile-app-topbar--section .mobile-app-brand img {
        width: 27px;
        height: 27px;
    }

    .mobile-section-location {
        min-width: 0;
        padding-left: 9px;
        border-left: 1px solid #55758a66;
        line-height: 1.1;
    }

    .mobile-section-location strong {
        display: block;
        overflow: hidden;
        color: #f0f5ff;
        font-size: 12px;
        font-weight: 800;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-section-location nav {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-top: 3px;
        color: #9bacc9;
        font-size: 9px;
        white-space: nowrap;
    }

    .mobile-section-location nav a {
        color: #b8c8e5;
        text-decoration: none;
    }

    .mobile-section-location nav [aria-current] {
        overflow: hidden;
        color: #57cde7;
        text-overflow: ellipsis;
    }

    .mobile-section-menu {
        position: static;
    }

    .mobile-section-menu summary {
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border: 1px solid #25bad4;
        border-radius: 50%;
        background: #092037;
        box-shadow: 0 0 9px #16c7e677, inset 0 0 8px #14b8d455;
        color: #71ebfb;
        cursor: pointer;
        list-style: none;
    }

    .mobile-section-menu summary::-webkit-details-marker {
        display: none;
    }

    .mobile-section-menu[open] summary {
        background: #0d3a51;
    }

    .mobile-app-topbar--section .mobile-app-profile {
        width: 34px;
        height: 34px;
        border-width: 1px;
        box-shadow: 0 0 8px #25cfe966;
    }

    .mobile-app-topbar--section .mobile-app-profile i {
        font-size: 16px;
    }

    .mobile-section-menu-panel {
        position: absolute;
        top: calc(100% - 1px);
        right: 16px;
        left: 16px;
        max-height: calc(100dvh - 70px - env(safe-area-inset-top));
        overflow-y: auto;
        padding: 18px 11px 15px;
        border: 1px solid #169cbd;
        border-radius: 19px;
        background: radial-gradient(ellipse at 50% 0, #123c58, #071628 66%, #061222);
        box-shadow: 0 15px 35px #000b, inset 0 0 25px #10b7d51c, 0 0 15px #0acbe74d;
        color: #eaf7ff;
    }

    .mobile-section-menu-handle {
        display: block;
        width: 24px;
        height: 4px;
        margin: -11px auto 10px;
        border-radius: 4px;
        background: #8cb4cc;
    }

    .mobile-section-menu-group + .mobile-section-menu-group {
        margin-top: 12px;
    }

    .mobile-section-menu-group h2 {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0 2px 8px;
        color: var(--gg-secondary);
        font-size: 12px !important;
        font-weight: 850;
        letter-spacing: .07em;
        line-height: 1.3 !important;
        text-transform: uppercase;
    }

    .mobile-section-menu-group h2::after {
        content: '';
        flex: 1;
        height: 1px;
        background: #20607a;
    }

    .mobile-section-menu-group h2 i {
        flex: none;
        font-size: 14px;
        letter-spacing: 0;
    }

    .mobile-section-menu-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px 8px;
    }

    .mobile-section-menu-grid a {
        display: flex;
        align-items: center;
        gap: 7px;
        min-width: 0;
        min-height: 38px;
        padding: 7px 9px;
        border: 1px solid #245f7b;
        border-radius: 9px;
        background: linear-gradient(180deg, #102b42, #0d2339);
        box-shadow: inset 0 1px #ffffff13;
        color: var(--gg-text);
        font-size: 11px;
        font-weight: 700;
        line-height: 1.2;
        text-decoration: none;
    }

    .mobile-section-menu-grid a > i:first-child {
        flex: 0 0 16px;
        color: var(--gg-warning);
        text-align: center;
        font-size: 12px;
    }

    .mobile-section-menu-grid a > span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-section-menu-grid--general a > span {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .mobile-section-menu-grid a > i:last-child {
        margin-left: auto;
        color: var(--gg-secondary-light);
        font-size: 9px;
    }

    .mobile-section-menu-grid a[aria-current='page'],
    .mobile-section-menu-grid a:hover {
        border-color: #36c4dd;
        background: #12435b;
    }

    .mobile-section-menu summary:focus-visible,
    .mobile-section-menu-grid a:focus-visible,
    .mobile-section-location a:focus-visible {
        outline: 2px solid #9af5ff;
        outline-offset: 2px;
    }

    body.mobile-navigation-enabled .section-links[aria-label='Разделы тренировок'] {
        display: none;
    }

    body.workout-create-page .workout-mobile-topbar {
        justify-content: flex-end;
        margin-bottom: 0;
        padding-top: 0;
    }

    body.workout-create-page .workout-mobile-topbar > a,
    body.workout-create-page .workout-mobile-topbar > span {
        display: none;
    }

    body.light .mobile-section-location strong {
        color: #263b56;
    }

    body.light .mobile-section-location nav a {
        color: #58708c;
    }

    body.light .mobile-section-location nav [aria-current] {
        color: #397f99;
    }

    body.light .mobile-section-menu summary {
        border-color: #82bdd1;
        background: #e7f3ff;
        box-shadow: 0 0 9px #397f9940;
        color: #397f99;
    }

    body.light .mobile-section-menu[open] summary {
        background: #d9edf8;
    }

    body.light .mobile-section-menu-panel {
        border-color: #7fc9df;
        background: linear-gradient(#f7fcff, #e6f3fb);
        color: #263b56;
        box-shadow: 0 15px 35px #29455c33;
    }

    body.light .mobile-section-menu-group h2 {
        color: #317b96 !important;
    }

    body.light .mobile-section-menu-group h2::after {
        background: #bfd7ed;
    }

    body.light .mobile-section-menu-grid a > i:first-child {
        color: #8a5b1b;
    }

    body.light .mobile-section-menu-grid a > i:last-child {
        color: #397f99;
    }

    body.light .mobile-section-menu-grid a {
        border-color: #b4d7e9;
        background: #fff;
        color: #263b56;
    }

    body.light .mobile-section-menu-grid a:hover,
    body.light .mobile-section-menu-grid a[aria-current='page'] {
        border-color: #45b4d0;
        background: #dff3fb;
    }
}

@media (max-width: 360px) {
    .mobile-app-topbar--section {
        grid-template-columns: auto minmax(0, 1fr) 32px 32px;
        gap: 5px;
        padding-inline: 7px;
    }

    .mobile-app-topbar--section .mobile-app-brand {
        font-size: 11px;
    }

    .mobile-section-location {
        padding-left: 6px;
    }
}