.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;
        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-location a:focus-visible {
        outline: 2px solid #9af5ff;
        outline-offset: 2px;
    }

    .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;
    }

    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;
    }


}

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

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

    .mobile-section-location {
        padding-left: 6px;
    }
}
.mobile-app-shell { display: none; }
@media (max-width: 767px) {
    body.mobile-navigation-enabled { padding-bottom: calc(132px + env(safe-area-inset-bottom)) !important; }
    body.dashboard-page.mobile-navigation-enabled { padding-bottom: calc(132px + env(safe-area-inset-bottom)) !important; }
    .mobile-app-shell {
        position: fixed; z-index: 90; inset: auto 0 0; display: block;
        box-sizing: border-box; width: 100%; max-width: 100vw;
        padding: 7px max(6px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(6px, 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);
    }
    .mobile-space-switch {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 3px; width: min(290px, 100%); margin: 0 auto 5px;
        padding: 3px; border: 1px solid #315370; border-radius: 12px; background: #0d253c;
    }
    .mobile-space-switch form { min-width: 0; margin: 0; }
    .mobile-space-switch button {
        width: 100%; min-height: 32px; padding: 4px 6px; border: 0; border-radius: 9px;
        background: transparent; color: #acc6da; font: inherit; font-size: 12px; font-weight: 800;
        cursor: pointer;
    }
    .mobile-space-switch button.is-active, .mobile-space-switch button[aria-selected="true"] {
        background: #145168; color: #e7ffff; box-shadow: inset 0 0 0 1px #55c6d8;
    }
    .mobile-app-shell .mobile-app-nav {
        position: static; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
        width: 100%; max-width: none; min-height: 0; margin: 0; padding: 0;
        border: 0; border-radius: 0; background: transparent; box-shadow: none;
        backdrop-filter: none; -webkit-backdrop-filter: none;
    }
    .mobile-app-shell .mobile-app-nav-item { min-height: 52px; white-space: normal; overflow-wrap: anywhere; }
    .mobile-app-shell .mobile-app-nav-item i { height: 25px; font-size: 18px; }
    .mobile-app-shell .mobile-app-nav-item.is-active::before { top: 0; }
    .mobile-space-switch button:focus-visible, .mobile-app-shell a:focus-visible {
        outline: 2px solid #8ee9e7; outline-offset: 2px;
    }
    body.mobile-navigation-enabled .onboarding-tooltip { bottom: calc(136px + env(safe-area-inset-bottom)) !important; }
}
@media (max-width: 350px) {
    .mobile-app-shell .mobile-app-nav-item { font-size: 9px; }
    .mobile-app-shell .mobile-app-nav-item i { font-size: 16px; }
}

body.light .mobile-app-shell { background: rgba(245, 249, 253, .97); border-color: #8db9c9; }
body.light .mobile-space-switch { background: #e5f1f7; border-color: #9fc4d1; }
body.light .mobile-space-switch button { color: #426078; }
body.light .mobile-space-switch button.is-active { background: #d6edf5; color: #1d5369; }
@media (max-width: 767px) {
    body.mobile-keyboard-active .mobile-app-shell { display: none; }
    body.mobile-keyboard-active.mobile-navigation-enabled { padding-bottom: env(safe-area-inset-bottom) !important; }
}