@media (max-width: 768px) {
    body {
        --header-height: 56px;
        --layout-width: 100%;
        --page-width: 100%;
        --body-background-color: #ebedf0;
    }
    body.mode-2018 {
        --module-border-radius: 6px!important;
        --tooltip-border-radius: 8px!important;
        --button-border-radius: 6px!important;
    }
    body * {
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }
    body .really_text, body span.text, body .lyrics, body .video_info_title {
        user-select: text;
    }
    .mobileonly {
        display: block !important;
    }
    .nomobile {
        display: none!important;
    }
    .page_header {
        display: none !important;
    }
    .layout,
    .page_body,
    .wrap1,
    .wrap2,
    .page_content,
    .wide_column,
    .wide_column_wrap,
    #auth,
    .crp-list,
    .messenger-app {
        width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        box-sizing: border-box;
        position: static;
    }
    .wide_column_left .wide_column_wrap,
    .wide_column_right .wide_column_wrap {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    .narrow_column_wrap,.narrow_column {
        width: 100% !important;
    }
    .toTop {
        display: none !important;
    }
    .page_body {
        margin-top: var(--header-height)
    }
    svg {
        text-align: center;
    }

    /* appbar */
    .appbar {
        display: flex;
        align-items: center;
        height: var(--header-height);
        background-color: var(--accent-color);
        color: var(--accent-text-color);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 198;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        padding: 0 16px;
        box-sizing: border-box;
        --appbar-bg-alpha: 1;
    }
    .appbar svg, .appbat .appbar-title {
        transition: 250ms;
    }
    .dark-mode .appbar {
        --accent-color: var(--module-header-background-color);
        --accent-text-color: var(--text-color);
    }
    .appbar .hamburger {
        width: 24px;
        height: 24px;
        margin-right: 20px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    .appbar .hamburger svg {
        fill: var(--accent-text-color);
    }
    .appbar .hamburger-badge {
        position: absolute;
        top: -4px;
        right: -4px;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 9px;
        background-color: var(--sidebar-count-color);
        color: var(--sidebar-count-text-color);
        font-size: 11px;
        font-weight: 700;
        line-height: 18px;
        text-align: center;
        box-sizing: border-box;
        pointer-events: none;
        z-index: 1;
        display: none;
        align-items: center;
        justify-content: center;
    }
    .appbar .hamburger-badge:not(:empty) {
        display: flex;
    }
    .appbar .appbar-title {
        font-size: 20px;
        font-weight: 500;
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .appbar .appbar-extra {
        display: flex;
        align-items: center;
    }
    .appbar-extra-btn,#__feed_settings_link.appbar-extra-btn {
        background: none;
        border: none;
        cursor: pointer;
        padding: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--accent-text-color);
    }
    .appbar-extra-btn svg {
        fill: var(--accent-text-color);
    }
    .appbar--transparent {
        background-color: transparent !important;
        box-shadow: none !important;
    }
    .appbar:not(.appbar--transparent):not(.appbar--scrolled) {
        background-color: color-mix(in srgb, var(--accent-color) calc(var(--appbar-bg-alpha) * 100%), transparent) !important;
        box-shadow: none !important;
    }
    .appbar--transparent .hamburger svg,
    .appbar--transparent .appbar-title,
    .appbar--extra-btn svg,
    .appbar--transparent .appbar-extra-btn svg {
        fill: #fff !important;
        color: #fff !important;
    }
    .appbar--transparent .appbar-title {
        color: #fff !important;
        text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    }
    .appbar--transparent .hamburger svg,
    .appbar--transparent .appbar-extra-btn svg {
        filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
    }
    .appbar--scrolled {
        background-color: var(--accent-color) !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
    }

    /* sidebar drawer */
    .sidebar {
        position: fixed;
        left: -85vw;
        top: 0;
        bottom: 0;
        display: block !important;
        padding-top: 0;
        width: 85vw !important;
        background-color: var(--module-background-color);
        transition: left 0.3s ease;
        overflow-y: auto;
        margin: 0 !important;
        z-index: 201;
    }
    .sidebar_inner {
        width: 100%;
    }
    .sidebar_inner .link {
        height: 48px;
        line-height: 48px;
        padding: 0 16px 0 8px;
        color: var(--text-color);
    }
    .sidebar_inner .link * {
        font-size: .875rem;
    }
    .sidebar_inner .link .link_icon {
	    transform: scale(1.2) translateX(4px);
        filter: grayscale(1) brightness(0.7);
        width: 50px;
    }
    .sidebar_inner .link span {
        margin-top: 1px;
        max-width: calc(100% - 50px);
    }
    .sidebar .sidebar_inner .link object[type="internal/link"] {
        right: 16px;
        margin-top: 12px;
        padding: 5px 8px;
        border-radius: var(--module-border-radius);
        height: fit-content;
        line-height: .875rem;
        font-size: .875rem;
    }
    .menu_divider {
        background: var(--border-color);
        margin: 4px 0!important;
    }
    .left_menu_nav_wrap {
        padding: 7px 16px 16px;
    }
    body.menu-expanded .sidebar {
        left: 0;
        box-shadow: 2px 0 5px rgba(0,0,0,0.2);
    }
    body.menu-expanded {
        overflow: hidden;
    }
    .home_button {
        width: 100%;
        padding: 8px 16px;
        margin-bottom: 8px;
        height: fit-content;
        box-sizing: border-box;
    }
    .home_button .home_button_bg {
        margin: 0;
    }

    #votesBalance, #news {
        background: none;
        border: 0;
        border-top: 1px solid var(--border-color);
        margin: 8px 0 0;
        padding: 16px;
        text-align: start;
    }
    #news b {
        font-size: .875rem
    }

    /* mobile-exclusive sidebar items */

    /* sidebar profile bar */
    .mobile-profile-bar {
        display: block;
        width: 100%;
        height: 158px;
        overflow: hidden;
        text-decoration: none;
        box-sizing: border-box;
        z-index: 1;
        position: relative;
    }
    .mobile-profile-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        filter: blur(10px) brightness(.75);
        transform: scale(1.3);
        z-index: 1;
    }
    .mobile-profile-avatar-wrap {
        position: absolute;
        top: 16px;
        left: 16px;
        z-index: 2;
    }
    #mobileProfileAvatar {
        width: 4.125rem;
        height: 4.125rem;
        border-radius: 50%;
        object-fit: cover;
        display: block;
    }
    .mobile-profile-info {
        position: absolute;
        bottom: 16px;
        left: 16px;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        max-width: calc(100% - 32px);
    }
    .mobile-profile-name {
        font-size: 1rem;
        font-weight: 500;
        color: var(--white);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .mobile-profile-status {
        font-size: .875rem;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.85);
        margin-top: .25rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .mobile-profile-bar-wrap {
        position: relative;
        display: block;
    }
    .mobile-profile-logout {
        position: absolute;
        top: 8px;
        right: 8px;
        z-index: 3;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 255, 255, 0.9);
    }
    .mobile-profile-logout svg {
        width: 24px;
        height: 24px;
    }
    .mobile-profile-logout:active {
        opacity: 0.7;
    }

    /* sidebar audio player */
    .sidebar_audio_player.mobileonly {
        display: none!important;
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        align-items: center;
        height: 56px;
        padding: 0 8px;
        box-sizing: border-box;
        overflow: hidden;
        background-color: var(--module-background-color);
        border-top: 1px solid var(--border-color);
        gap: 8px;
        z-index: 10;
    }
    .sidebar_audio_player.mobileonly.sidebar_audio_player_active {
        display: flex!important;
    }
    .sidebar_audio_player svg {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        fill: var(--accent-color);
    }
    .sidebar_ap_play_btn {
        flex-shrink: 0;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border-radius: 50%;
        transition: background-color 80ms;
    }
    .sidebar_ap_play_btn:active {
        background-color: var(--hover-background-color);
    }
    .sidebar_ap_play_btn svg {
        display: none;
    }
    .sidebar_ap_play_btn .sidebar_ap_play_icon {
        display: block;
    }
    .sidebar_audio_player.sidebar_audio_player_playing .sidebar_ap_play_icon {
        display: none;
    }
    .sidebar_audio_player.sidebar_audio_player_playing .sidebar_ap_pause_icon {
        display: block;
    }
    .sidebar_ap_track_info {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 1px;
        cursor: pointer;
    }
    .sidebar_ap_track_name {
        font-size: 13px;
        font-weight: 600;
        color: var(--text-color);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: opacity 80ms linear;
    }
    .sidebar_ap_track_performer {
        font-size: 13px;
        font-weight: 400;
        color: var(--muted-text-color-2);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        opacity: 0.75;
        transition: opacity 80ms linear;
    }
    .sidebar_ap_right_btn:active {
        background-color: var(--hover-background-color);
    }
    .sidebar_ap_right_btn svg {
        display: none;
    }
    .sidebar_ap_next_icon {
        display: block !important;
    }
    .sidebar_audio_player:not(.sidebar_audio_player_playing) .sidebar_ap_next_icon {
        display: none !important;
    }
    .sidebar_audio_player:not(.sidebar_audio_player_playing) .sidebar_ap_cancel_icon {
        display: block !important;
    }

    /* page structure */

    h2.page_block_h2,.page_block_header {
        min-height: unset;
    }
    .page_block_header {
        background-color: var(--module-background-color);
        color: var(--muted-text-color-2);
        border: 0;
        font-size: 13px;
        text-transform: uppercase;
        font-weight: 500;
        padding: 16px 16px 0;
    }
    .page_block_header_count {
        font-size: 13px;
        margin-top: 0;
    }
    .page_block_header .button {
        text-transform: none;
    }
    .crumb_header .ui_crumb_sep, .crumb_header .page_block_header_inner .ui_crumb:not(:last-child) {
        display: none;
    }
    .page_block {
        margin-bottom: 8px;
        box-shadow: none;
    }
    .page_block + .page_block.comments {
        margin-top: -8px;
    }
    .page_block.postFeedWrapperMicroblog,
    .wall_posts .post:first-child, .insertThere .post:first-child,
    .page_block.wall_posts_tabs + .page_block,
    .page_body:has(.mobile-rmenu-wrap):not(:has(.narrow_column .module)):not(:has(.postFeedWrapperMicroblog)) .wide_column .page_block:first-child,
    .mobile-rmenu-wrap-but-actually + .page_block {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    .page_block_h2:not(.tabs_header) + .ui_search {
        border-top: 1px solid var(--border-color);
        margin-top: 12px;
    }
    .app-play-block {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }
    #appFrame {
        width: 100vw;
        height: 600px;
        display: block;
        margin: 16px auto;
    }
    .page_block_sub_header, .page_padding, #auth.page_block, .audios_padding, .deactivated, #fastLogin {
        padding: 16px!important;
    }
    .messagebox-content-header, .mb_tabs {
        margin: -16px -16px 0;
        padding: 16px;
    }
    .settings_padding,.settings_block_msg,.audio_pl_edit_box .ape_header {
        padding-block: 16px;
    }
    .form_group,.post_full_like_wrap {
        margin-inline: 16px;
    }
    .page_padding .form_group {
        margin-inline: 0;
    }
    .settings_block_msg,.post .wall_text,.post_replies_header,.audio_pl_edit_box .box_controls,.audio_pl_edit_box .ape_item_list,.audio_pl_edit_box .ape_header {
        padding-inline: 16px;
    }
    .post .post_header {
        padding: 16px 16px 0;
    }
    .post-nsfw .post-content::after, .deleted_content .content_page_error {
        margin: 0 16px;
        width: calc(100% - 32px);
    }
    .post_view_page .comments {
        border-top: 1px solid var(--border-color)!important;
    }

    .model_content_textarea textarea {
        margin-left: 44px;
        width: calc(100% - 44px);
    }
    .post_field_user_link {
        left: 16px;
    }
    .model_content_textarea:not(.shown) #wallAttachmentMenu {
        padding: 15px 16px;
    }
    .model_content_textarea.shown .post-bottom-acts {
        padding: 16px;
    }

    /* buttons */
    .button, input[class="button"], .profile_link {
        padding: 7px 16px 9px;
        min-height: 32px;
        font-weight: 500;
        font-size: 13px;
    }
    .button:not(.profile_more_btn):active, input[class="button"]:active {
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .action_links .button {
        padding: 7px 16px 8px
    }

    /* forms */
    .form_group .form_field,.game_edit {
        flex-direction: column;
        width: 100%;
    }
    .form_field:not(:last-child) {
        margin-bottom: 16px;
    }
    .form_group .form_label {
        width: 100%;
        padding: 2px 0 8px;
        font-size: 13px;
        color: var(--muted-text-color);
        font-weight: 500;
    }
    .form_group .form_label:empty {
        display: none;
    }
    .form_group .form_data,.ovk-diag-body .module_body {
        font-size: 14px;
        line-height: 22px;
        margin-left: 0;
    }
    #login_form, .form_field input:not([type="submit"], [type="checkbox"], [type="radio"], [type="button"]), .form_field:not(.settings_privacy_row) select, .form_field textarea {
        width: 100%;
    }
    .label_end .form_label {
        text-align: start;
    }
    .form_field.settings_privacy_row {
        padding-top: 0;
    }
    .form_group.game_edit {
        margin: 0;
    }

    .tickets_header {
        padding: 12px 16px;
        margin-top: 12px;
        border-top: 1px solid var(--border-color);
    }
    .tickets_content .reply,.reply {
        padding: 0 16px;
    }

    /* dialogs: MD1 centered dialog by default; .ovk-msg-sheet and
       .ovk-msg-fullscreen opt into other presentations */
    .ovk-diag-cont {
        width: min(560px, calc(100vw - 80px))!important;
        min-width: min(280px, calc(100vw - 80px));
        height: auto!important;
        top: 50%;
        bottom: auto;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
        animation: mdDialogIn 0.2s ease-out;
        background-color: transparent !important;
    }
    .ovk-diag-cont .ovk-diag {
        width: 100% !important;
        margin: 0;
        border: none;
        border-radius: 2px;
        box-shadow: 0 11px 15px -7px rgba(0,0,0,0.2), 0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12);
    }
    /* 24dp min margin top/bottom; body scrolls inside the flex column */
    .ovk-diag-cont:not(.ovk-msg-sheet):not(.ovk-msg-fullscreen) .ovk-diag {
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 48px);
    }
    .ovk-diag-cont:not(.ovk-msg-sheet):not(.ovk-msg-fullscreen) .ovk-diag-head {
        background: none;
        color: var(--text-color);
        height: auto;
        font-size: 20px;
        line-height: 28px;
        font-weight: 500;
        padding: 24px 24px 20px;
        border-radius: 0;
        flex: none;
    }
    .ovk-diag-cont:not(.ovk-msg-sheet):not(.ovk-msg-fullscreen) .ovk-diag-head a {
        color: var(--accent-color);
    }
    .ovk-diag-cont:not(.ovk-msg-sheet):not(.ovk-msg-fullscreen) .ovk-diag-head-close {
        display: none;
    }
    .ovk-diag-cont.ovk-diag-no-title:not(.ovk-msg-sheet):not(.ovk-msg-fullscreen) .ovk-diag-head {
        display: none;
    }
    .ovk-diag-cont.ovk-diag-no-title:not(.ovk-msg-sheet):not(.ovk-msg-fullscreen) .ovk-diag-body {
        padding-top: 24px;
    }
    .ovk-diag-body {
        height: auto !important;
        padding: 0 24px 24px!important;
    }
    .ovk-diag-cont:not(.ovk-msg-sheet):not(.ovk-msg-fullscreen) .ovk-diag-body {
        font-size: 16px;
        min-height: 0;
        flex: 0 1 auto;
        overflow-y: auto;
    }
    .ovk-diag-cont:not(.ovk-msg-sheet):not(.ovk-msg-fullscreen) .ovk-diag-action {
        display: flex;
        justify-content: flex-end;
        gap: 0;
        padding: 8px;
        white-space: nowrap;
        background: none;
        flex: none;
    }
    .ovk-diag-cont:not(.ovk-msg-sheet):not(.ovk-msg-fullscreen) .ovk-diag-action > .button,
    .ovk-diag-cont:not(.ovk-msg-sheet):not(.ovk-msg-fullscreen) .ovk-diag-action > button,
    .ovk-diag-cont:not(.ovk-msg-sheet):not(.ovk-msg-fullscreen) .ovk-diag-action > input[type="button"],
    .ovk-diag-cont:not(.ovk-msg-sheet):not(.ovk-msg-fullscreen) .ovk-diag-action > input[type="submit"] {
        width: auto;
        min-width: 64px;
        min-height: 36px;
        height: 36px;
        margin: 0 0 0 8px;
        padding: 0 8px !important;
        background: none;
        border: none;
        box-shadow: none;
        color: var(--accent-color);
        font-size: 14px;
        text-transform: uppercase;
        font-weight: 500;
        border-radius: 2px;
    }
    /* labels exceeding max button width stack full-width, 48dp targets */
    .ovk-diag-cont.ovk-diag-stacked:not(.ovk-msg-sheet):not(.ovk-msg-fullscreen) .ovk-diag-action {
        flex-direction: column;
        align-items: stretch;
        row-gap: 4px;
    }
    .ovk-diag-cont.ovk-diag-stacked:not(.ovk-msg-sheet):not(.ovk-msg-fullscreen) .ovk-diag-action > .button,
    .ovk-diag-cont.ovk-diag-stacked:not(.ovk-msg-sheet):not(.ovk-msg-fullscreen) .ovk-diag-action > button,
    .ovk-diag-cont.ovk-diag-stacked:not(.ovk-msg-sheet):not(.ovk-msg-fullscreen) .ovk-diag-action > input[type="button"],
    .ovk-diag-cont.ovk-diag-stacked:not(.ovk-msg-sheet):not(.ovk-msg-fullscreen) .ovk-diag-action > input[type="submit"] {
        width: 100%;
        min-height: 48px;
        height: 48px;
        margin: 0;
        padding: 0 16px !important;
        justify-content: flex-end;
    }
    .ovk-diag-cont:not(.ovk-msg-sheet):not(.ovk-msg-fullscreen) .ovk-diag-action > .button:hover,
    .ovk-diag-cont:not(.ovk-msg-sheet):not(.ovk-msg-fullscreen) .ovk-diag-action > button:hover,
    .ovk-diag-cont:not(.ovk-msg-sheet):not(.ovk-msg-fullscreen) .ovk-diag-action > input[type="button"]:hover,
    .ovk-diag-cont:not(.ovk-msg-sheet):not(.ovk-msg-fullscreen) .ovk-diag-action > input[type="submit"]:hover,
    .ovk-diag-cont:not(.ovk-msg-sheet):not(.ovk-msg-fullscreen) .ovk-diag-action > .button:active,
    .ovk-diag-cont:not(.ovk-msg-sheet):not(.ovk-msg-fullscreen) .ovk-diag-action > button:active,
    .ovk-diag-cont:not(.ovk-msg-sheet):not(.ovk-msg-fullscreen) .ovk-diag-action > input[type="button"]:active,
    .ovk-diag-cont:not(.ovk-msg-sheet):not(.ovk-msg-fullscreen) .ovk-diag-action > input[type="submit"]:active {
        background-color: color-mix(in srgb, var(--accent-color) 12%, transparent);
        color: var(--accent-color);
    }

    /* bottom-sheet opt-in */
    .ovk-diag-cont.ovk-msg-sheet {
        width: 100%!important;
        max-width: none;
        top: auto;
        bottom: 0;
        left: 0;
        margin-right: 0;
        transform: translateY(0);
        animation: slideUpBottomSheet 0.3s ease-out forwards !important;
    }
    /* MD1 modal bottom sheet */
    .ovk-msg-sheet .ovk-diag {
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - var(--header-height) - 8px);
        border-radius: 0;
        box-shadow: 0 -8px 10px -5px rgba(0,0,0,0.2),
                    0 -16px 24px 2px rgba(0,0,0,0.14),
                    0 -6px 30px 5px rgba(0,0,0,0.12);
        will-change: transform;
    }
    .ovk-msg-sheet .ovk-diag-body {
        overscroll-behavior-y: contain;
    }
    /* portrait: peek stays below the 16:9 keyline until expanded */
    @media (orientation: portrait) {
        .ovk-diag-cont.ovk-msg-sheet:not(.ovk-msg-sheet--expanded) .ovk-diag {
            max-height: calc(100vh - 56.25vw);
        }
    }
    .ovk-diag-cont.ovk-msg-sheet--dragging .ovk-diag {
        max-height: none !important;
    }
    body.dimmed.ovk-sheet-dim > .dimmer {
        opacity: 0.2;
    }
    .ovk-msg-sheet .ovk-diag-head {
        display: flex;
        align-items: center;
        flex: none;
        height: 56px;
        line-height: normal;
        padding: 0 4px;
        background-color: var(--module-background-color);
        color: var(--muted-text-color-2);
        font-size: 16px;
        font-weight: 400;
        border-radius: 0;
        border-bottom: 1px solid var(--border-color);
    }
    .ovk-diag-cont.ovk-diag-no-title.ovk-msg-sheet .ovk-diag-head {
        display: none;
    }
    .ovk-msg-sheet .ovk-diag-head a {
        color: var(--muted-text-color-2);
    }
    .ovk-msg-sheet .ovk-diag-head-close {
        float: none;
        order: -1;
        flex: none;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        padding: 0;
        margin-right: 4px;
        background: none;
        color: var(--muted-text-color-2);
    }
    .ovk-msg-sheet .ovk-diag-head-close-icon {
        display: block;
    }
    .ovk-msg-sheet .ovk-diag-head-apply {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 48px;
        height: 48px;
        margin-left: auto;
        padding: 0;
        background: none;
        border: none;
        color: var(--accent-color);
        cursor: pointer;
    }
    .ovk-msg-sheet .ovk-diag-body {
        flex: 1;
        min-height: 0 !important;
        height: auto !important;
        padding: 8px 16px !important;
        overflow-y: auto;
        font-size: 16px;
        line-height: 20px;
    }
    /* list-style rows: 48dp, 24dp icons, 72dp text keyline */
    .ovk-msg-sheet .mobile-info-row {
        min-height: 48px;
        align-items: center;
        gap: 32px;
        font-size: 16px;
    }
    .ovk-msg-sheet .mobile-info-row .mir-icon {
        width: 24px;
        height: 24px;
        margin-top: 0;
    }
    .ovk-msg-sheet .mobile-info-row .mir-text {
        margin-top: 0;
        font-size: 16px;
    }
    .ovk-msg-sheet .ovk-diag-action {
        display: flex;
        flex: none;
        gap: 8px;
        padding: 8px 16px;
        white-space: nowrap;
    }
    /* a lone action is always the dismissive one — the X/scrim cover it */
    .ovk-msg-sheet .ovk-diag-action:has(> :only-child) {
        display: none;
    }

    /* audio/notes attachment sheets: tap row to attach, check circle up front */
    .ovk-msg-sheet .audio_attachment_header,
    .ovk-msg-sheet .notesInsert ._content {
        align-items: center;
        cursor: pointer;
    }
    .ovk-msg-sheet .audio_attachment_header .media_check_btn_wrap,
    .ovk-msg-sheet .notesInsert .media_check_btn_wrap {
        display: block;
        position: static;
        flex: none;
        padding: 8px 12px 8px 0;
    }
    .ovk-msg-sheet .audio_attachment_header .player_part,
    .ovk-msg-sheet .notesInsert .notes_titles {
        flex: 1;
        width: auto !important;
        min-width: 0;
    }
    .ovk-msg-sheet .audio_attachment_header .attachAudio,
    .ovk-msg-sheet .notesInsert .attachAudio {
        display: none;
    }
    .ovk-msg-sheet .ovk-diag-action > .button,
    .ovk-msg-sheet .ovk-diag-action > button,
    .ovk-msg-sheet .ovk-diag-action > input[type="button"],
    .ovk-msg-sheet .ovk-diag-action > input[type="submit"] {
        width: 100%;
        margin: 0;
        box-sizing: border-box;
    }

    /* full-screen dialog opt-in (MD1): app-bar head, X left, tick right */
    .ovk-diag-cont.ovk-msg-fullscreen {
        width: 100%!important;
        height: 100%!important;
        min-width: 0;
        max-width: none;
        top: 0;
        bottom: auto;
        left: 0;
        margin-right: 0;
        transform: none;
        animation: fullscreenDialogIn 0.2s ease-out !important;
    }
    .ovk-msg-fullscreen .ovk-diag {
        display: flex;
        flex-direction: column;
        height: 100%;
        border-radius: 0;
        box-shadow: none;
    }
    .ovk-msg-fullscreen .ovk-diag-head {
        display: flex;
        align-items: center;
        flex: none;
        height: var(--header-height);
        line-height: normal;
        padding: 0 4px;
        background-color: var(--accent-color);
        color: var(--accent-text-color);
        font-size: 20px;
        font-weight: 500;
        letter-spacing: 0.0125em;
        border-radius: 0;
    }
    .dark-mode .ovk-msg-fullscreen .ovk-diag-head {
        --accent-color: var(--module-header-background-color);
        --accent-text-color: var(--text-color);
    }
    .ovk-msg-fullscreen .ovk-diag-head-title,
    .ovk-msg-sheet .ovk-diag-head-title {
        flex: 1;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .ovk-msg-fullscreen .ovk-diag-head-close {
        float: none;
        order: -1;
        flex: none;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        box-sizing: border-box;
        padding: 0;
        margin-right: 4px;
        background: none;
        opacity: 1;
        color: var(--accent-text-color);
    }
    .ovk-msg-fullscreen .ovk-diag-head-close-icon {
        display: block;
    }
    .ovk-msg-fullscreen .ovk-diag-head-apply {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 48px;
        height: 48px;
        margin-left: auto;
        padding: 0;
        background: none;
        border: none;
        color: var(--accent-text-color);
        cursor: pointer;
    }
    .ovk-msg-fullscreen .ovk-diag-body {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0 !important;
        height: auto !important;
        padding-top: 16px !important;
        overflow-y: auto;
    }
    .ovk-msg-fullscreen .ovk-diag-action {
        display: none;
    }
    /* tab strip pinned under the header, content scrolls */
    .ovk-msg-fullscreen #_feed_settings_container,
    .ovk-msg-fullscreen #_fast_video_upload,
    .ovk-msg-sheet #_feed_settings_container {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        width: 100%;
    }
    .ovk-msg-fullscreen #_feed_settings_container #_tabs,
    .ovk-msg-fullscreen #_fast_video_upload #_tabs,
    .ovk-msg-sheet #_feed_settings_container #_tabs {
        flex: none;
    }
    .ovk-msg-fullscreen #_feed_settings_container #__content,
    .ovk-msg-fullscreen #_fast_video_upload #__content,
    .ovk-msg-sheet #_feed_settings_container #__content {
        flex: 1;
        min-height: 0;
        height: auto;
        overflow-y: auto;
        padding: 16px;
    }
    /* the header tick button replaces the in-body Apply button */
    .ovk-msg-fullscreen #_feed_settings_container #__content input[type='button'].button,
    .ovk-msg-sheet #_feed_settings_container #__content input[type='button'].button {
        display: none;
    }

    /* footer divider only while the body can scroll further down */
    .ovk-diag-cont .ovk-diag-action {
        border-top-color: transparent;
    }
    .ovk-diag-cont.ovk-diag-can-scroll .ovk-diag-action {
        border-top-color: var(--border-color);
    }
    .ovk-diag .language_column {
        width: 100%;
        margin: 0;
    }
    .language_column a, .language_column b {
        padding: 8px;
    }


    .ovk-diag-body.vkify-graffiti-body {
        height: 420px!important
    }

    /* search */
    .ui_search_reset {
        right: 0;
    }
    .ui_tabs_search_opened .ui_tab_search_wrap .ui_search {
        padding: 0;
    }
    .ui_tabs_search_opened .ui_search .ui_search_input_block {
        border-radius: 0;
        background-color: var(--module-background-color);
    }
    .tabs_header:not(.mobile-rmenu-tabs) .ui_tabs.ui_tabs_search_opened {
        overflow: hidden;
    }

    /* attachments */
    .attachments_b {
        width: 100% !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    .attachments_b .attachment {
        width: 100% !important;
        height: auto !important;
        float: none !important;
    }
    .attachments_b .attachment img.media_makima {
        width: 100% !important;
        height: auto !important;
        max-height: 70vh !important;
        object-fit: contain !important;
    }
    .attachments_b .attachment .compact_video {
        width: 100% !important;
        height: auto !important;
    }

    /* upload / picker / photos */
    .choose_upload_area {
        margin: -16px -16px 8px;
        padding: 13px 16px 14px;
    }
    .attachment_selector {
        margin: 0 -8px;
    }
    .attachment_selector .choose_upload_area {
        margin: -16px -8px 8px;
    }
    #albums_content {
        margin-bottom: 16px;
    }
    .show_more {
        margin-top: 8px;
    }
    .photos_choose_album_rows .page_album_row, .photos_choose_album_rows .page_album_thumb {
        width: 100%;
        height: auto;
        aspect-ratio: 3/2;
    }
    .picker-items > .document_attachment_header {
        margin: 0 -16px;
    }
    .docListViewItem a {
        max-width: 220px;
    }
    .page_photos_module {
        height: auto;
        padding: 4px 16px 16px;
    }
    .module_header .header_top {
        margin-bottom: 5px;
    }
    .wide_column .module_header .header_top {
        padding: 2px 16px 0;
    }
    .module + .module {
        border: 0;
    }

    /* list views / search rows */
    .list_view {
        padding: 0 16px 16px;
    }
    .list_view.video_items_list {
        padding-top: 8px;
    }
    .blist_last .info .labeled.name {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .search_row .img {
        width: 60px;
        height: 60px;
    }
    .search_row .controls {
        width: fit-content;
    }
    .picker-title-text {
        vertical-align: top;
    }
    .toggle_link {
        display: inline-block;
        height: 100%;
    }
    .toggle_link .divider {
        vertical-align: top;
    }
    .toggle_link a {
        white-space: nowrap;
        max-width: 170px;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* tabs */
    .mobile-rmenu-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .mobile-rmenu-tabs::-webkit-scrollbar {
        display: none;
    }
    .mobile-rmenu-tabs .ui_tabs {
        flex-wrap: nowrap;
        display: flex;
        width: max-content;
        min-width: 100%;
        padding: 0 0 0 6px;
    }
    .mobile-rmenu-tabs .ui_tab {
        white-space: nowrap;
        display: flex;
        align-items: center;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mobile-rmenu-tabs .ui_tab_extra_item {
        display: inline-flex;
        align-items: center;
        margin-left: 6px;
        font-size: 11px;
        color: var(--muted-text-color);
        float: none;
        opacity: 0.8;
        flex-shrink: 0;
    }
    .ui_tab_icon--avatar {
        border-radius: 50%;
        width: 22px;
        height: 22px;
        object-fit: cover;
        margin-right: 5px;
        flex-shrink: 0;
    }
    .tabs_header:not(.mobile-rmenu-tabs) {
        overflow: hidden;
    }
    .tabs_header:not(.mobile-rmenu-tabs) .ui_tabs {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        width: 100%;
        max-width: 100%;
        padding: 0 10px 0 6px;
        box-sizing: border-box;
    }
    .tabs_header:not(.mobile-rmenu-tabs) .ui_tabs::-webkit-scrollbar {
        display: none;
    }
    .tabs_header:not(.mobile-rmenu-tabs) .ui_tabs::after {
        display: none;
    }
    .tabs_header:not(.mobile-rmenu-tabs) .ui_tabs > li {
        flex-shrink: 0;
        min-width: max-content;
    }
    .tabs_header:not(.mobile-rmenu-tabs) .ui_tabs .ui_tab,
    .tabs_header:not(.mobile-rmenu-tabs) .ui_tabs .ui_tab_plain {
        float: none;
    }
    .tabs_header:not(.mobile-rmenu-tabs) .ui_tabs_extra {
        margin-left: auto;
        flex-shrink: 0;
    }

    /* make all tabs plain and remove the tab slider offset */
    .ui_tabs_header {
        background-color: var(--module-background-color);
    }
    .ui_tab, .ui_tab_plain,.ui_tabs_header .ui_tab, .ui_tabs_header .ui_tab_plain, .ui_tabs_header .ui_tab_sel {
        padding: 16px 6px;
        margin: 0 4px;
    }
    .ui_tab_sel, .ui_tab_sel:hover, .ui_tabs .ui_tab_sel, .ui_tabs .ui_tab_sel:hover {
        padding-bottom: 14px;
    }
    .ui_tab:hover, .ui_tabs .ui_tab:hover {
        padding-bottom: 14px;
    }
    .ui_tabs.ui_tabs_sliding .ui_tabs_slider {
        bottom: 0;
    }

    /* tooltips / context menu */
    .tippy-box[data-theme~="vk"], #ctx_menu {
        border: 0;
        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 16px 16px rgba(0, 0, 0, 0.16);
    }
    #ctx_menu a {
        padding: 8px 16px;
        height: unset;
        font-size: 16px;
        color: var(--text-color);
    }
    .tippy-box[data-theme~="light"] .tippy-arrow {
        color: var(--module-background-color);
    }
    .profile_actions_split [data-tippy-root], .profile_actions_standalone [data-tippy-root] {
        width: 100%;
    }
    .profile_actions_split .tippy-box[data-theme~="vk"],
    .profile_actions_standalone .tippy-box[data-theme~="vk"] {
        max-width: 100%!important;
    }

    /* video */
    .video_block_layout {
        padding: 8px 16px 0;
    }
    .ovk-diag-body .video_block_layout {
        margin: 0;
    }
    .video_block_layout .video_items_list {
        padding-top: 0;
    }
    .video_item {
        width: 100%!important;
        height: unset!important;
        box-sizing: border-box;
        padding: 0;
    }
    .ovk-diag-body .video_item {
        margin-bottom: 16px;
    }
    .video_item .video_item_thumb_wrap {
        width: 100%;
        aspect-ratio: 16/9;
    }
    .video_item .video_item_thumb {
        width: 100%!important;
        height: 100%!important;
    }

    /* audio page */
    .audiosDiv {
        padding: 8px 6px!important;
    }
    .bigPlayer:not(.tidy) {
        width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box;
    }
    .bigPlayer .bigPlayerWrapper {
        grid-template-columns: auto 1fr auto;
        padding: 0 10px;
        align-items: center;
    }
    .bigPlayer,
    .bigPlayer .bigPlayerWrapper {
        height: unset;
    }
    .bigPlayer .trackPanel,
    .wide_column .bigPlayer .trackPanel {
        width: auto !important;
        flex: 1;
        min-width: 0;
        margin-left: 8px;
    }
    .bigPlayer .trackInfo .timer span:not(.time),
    .bigPlayer .volumePanel,
    .bigPlayer .additionalButtons .deviceButton {
        display: none !important;
    }
    .bigPlayer .additionalButtons {
        gap: 10px;
        height: 100%;
    }
    .bigPlayer .playButtons .playButton {
        width: 34px;
        height: 34px;
        margin: 9px 0;
    }
    .bigPlayer .playButtons .playButton .playIcon {
        width: 34px;
        height: 34px;
        background-size: 34px auto;
    }
    .bigPlayer .playButtons .playButton.pause .playIcon {
        background-size: 34px auto;
        background-position: 0px -67px;
    }
    .musfooter {
        width: 100% !important;
        left: 0;
        box-sizing: border-box;
        bottom: calc(var(--header-height) * 2);
    }
    .playlistContainer {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .list_view.playlistContainer {
        padding: 12px 16px;
    }
    .audio_pl__title,
    .audio_pl__subtitle {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    ._playlist_page_content_block {
        margin-top: 0;
    }
    .AudioPlaylistSnippet {
        flex-direction: column !important;
        padding: 16px !important;
    }
    .AudioPlaylistSnippet__left {
        width: 100% !important;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .AudioPlaylistSnippet__covers {
        width: 160px !important;
        height: 160px !important;
    }
    .AudioPlaylistSnippet__cover {
        width: 160px !important;
        height: 160px !important;
    }
    .AudioPlaylistSnippet__right {
        width: 100% !important;
        max-width: 100% !important;
        margin: 12px 0 0 0 !important;
    }
    .AudioPlaylistSnippet__actions {
        flex-wrap: wrap;
        gap: 4px;
    }

    /* notifications */
    .notifications_global_wrap {
        margin: 8px 8px 0;
        padding: 0;
        box-sizing: border-box;
        pointer-events: none;
        width: calc(100% - 16px);
    }
    .notification_ballon {
        width: 100%;
        min-height: 48px;
        background-color: #333333;
        box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2), 
                    0px 6px 10px 0px rgba(0,0,0,0.14), 
                    0px 1px 18px 0px rgba(0,0,0,0.12);
        display: flex;
        flex-direction: row-reverse;
        align-items: stretch;
        justify-content: center;
        margin: 0 0 8px 0;
        min-height: unset;
        pointer-events: auto;
        transform: scale(0.8);
        opacity: 0;
        animation: notification_snackbar_open 150ms 0ms cubic-bezier(0, 0, 0.2, 1) forwards;
    }
    .notification_ballon.disappears {
        transform: scale(1);
        animation: notification_snackbar_close 75ms 0ms cubic-bezier(0.4, 0, 1, 1);
    }
    .notification_ballon * {
        box-sizing: border-box;
    }
    .notification_ballon notification_title {
        padding: 0;
        font-size: 0;
        line-height: 0;
    }
    .notification_ballon notification_title .close {
        width: 36px;
        height: 100%;
        padding: 9px;
        margin: 0;
        opacity: 0.87;
    }
    .notification_ballon notification_title .close::before {
        height: 100%;
        background-position: center;
    }
    .notification_ballon wrap {
        padding: 14px 16px;
        align-items: flex-start;
    }
    .notification_ballon wrap avatar {
        display: none;
    }
    .notification_ballon wrap content {
        font-size: 0.875rem;
        line-height: 1.25rem;
        letter-spacing: 0.0178571429em;
        flex-grow: 1;
    }
    .notification_ballon wrap content .nobold {
        opacity: 0.7;
    }
    @keyframes notification_snackbar_open {
        0% {
            opacity: 0;
            transform: scale(0.8);
        }
        100% {
            opacity: 1;
            transform: scale(1);
        }
    }
    @keyframes notification_snackbar_close {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }

    /* mobile rmenu (sticky profile/group nav bar) */
    .mobile-rmenu-wrap {
        position: sticky;
        top: var(--header-height);
        z-index: 10;
        background: var(--module-background-color);
    }
    .mobile-rmenu-owner {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 14px;
        border-bottom: 1px solid var(--border-color);
        text-decoration: none;
        color: var(--text-color);
        font-size: 14px;
        font-weight: 500;
    }
    .mobile-rmenu-owner-img {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
    }

    /* profile hero */
    .mobile-profile-hero {
        position: relative;
        width: 100%;
        overflow: hidden;
        margin-top: calc(-1 * var(--header-height));
    }
    .mobile-hero-img-wrap {
        position: relative;
        width: 100%;
    }
    .mobile-hero-img-wrap.has-avatar-photo {
        cursor: pointer;
    }
    .mobile-hero-img {
        width: 100%;
        height: 65vw;
        min-height: 260px;
        max-height: 420px;
        object-fit: cover;
        display: block;
        border-radius: 0;
    }
    .mobile-hero-gradient {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 65%;
        background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
        pointer-events: none;
    }
    .mobile-hero-info {
        position: absolute;
        bottom: 14px;
        left: 16px;
        right: 16px;
        color: #fff;
    }
    .mobile-hero-name {
        color: #fff !important;
        font-size: 22px;
        font-weight: 600;
        margin: 0 0 2px;
        line-height: 1.2;
        text-shadow: 0 1px 4px rgba(0,0,0,0.5);
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        display: flex;
        align-items: last baseline;
    }
    .mobile-hero-name .page_verified {
        max-width: 16px;
        width: 100%;
    }
    .mobile-hero-status {
        font-size: 15px;
        color: rgba(255,255,255,0.88);
        text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    }
    .mobile-hero-avatar-edit {
        position: absolute;
        top: calc(var(--header-height) + 8px);
        right: 16px;
        z-index: 5;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        border-radius: 16px;
        background: rgba(0, 0, 0, 0.45);
        color: #fff;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.2;
        text-decoration: none;
        text-shadow: 0 1px 3px rgba(0,0,0,0.5);
        backdrop-filter: blur(2px);
        user-select: none;
        pointer-events: auto;
    }
    .mobile-hero-avatar-edit:active {
        background: rgba(0, 0, 0, 0.65);
    }

    /* profile actions */
    .mobile-actions-wrap {
        padding: 16px 16px 8px!important;
    }
    .mobile_profile_actions {
        display: flex !important;
        gap: 8px;
        width: 100%;
        box-sizing: border-box;
        position: relative;
        min-height: 32px;
    }
    .mobile_profile_action_primary {
        flex: 1 1 50%;
    }
    .mobile_profile_action_secondary {
        flex: 1 1 50%;
    }
    .mobile_profile_action_secondary form {
        width: 100%;
    }
    .mobile_profile_action_full {
        flex: 1 1 100%;
    }
    .mobile_profile_action_btn {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        display: block;
    }
    .mobile_profile_actions .button_wide {
        width: 100%;
    }
    .guest_actions {
        padding-bottom: 8px;
    }

    .mobile_profile_actions .profile_sub_wrapper {
        width: 100%;
    }

    .profile_sub_wrapper.ui_actions_menu_wrap.shown .ui_actions_menu {
        max-width: unset;
    }

    /* profile info rows */
    .mobile-info-rows {
        padding: 8px 0;
    }
    .mobile-actions-wrap + .mobile-info-rows {
        padding-top: 0;
    }
    .mobile-info-row {
        display: flex;
        align-items: flex-start;
        padding: 6px 16px;
        gap: 14px;
        font-size: 14px;
        color: var(--text-color);
        line-height: 1.4;
    }
    a.mobile-info-row:visited,
    a.mobile-info-row:hover {
        color: var(--text-color);
        text-decoration: none;
    }
    a.mobile-info-row.mir-link div {
        color: var(--link-color)
    }
    .mobile-info-row .divider {
        margin-left: 4px;
    }
    .mir-icon {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        margin-top: 1px;
        color: var(--muted-text-color);
        fill: currentColor;
    }
    .mir-text {
        flex: 1;
        font-size: 14px;
        color: var(--text-color);
        margin-top: 2px;
    }
    .mir-text a {
        color: var(--text-color);
        text-decoration: none;
    }
    .mir-text-muted {
        color: var(--muted-text-color-2);
    }
    .mobile-info-row-more {
        cursor: pointer;
    }
    .mobile-info-row-more .mir-icon {
        color: var(--accent-color);
    }
    .mobile-info-row-more .mir-text {
        color: var(--accent-color) !important;
        cursor: pointer;
    }
    .mobile-more-sep {
        margin: 8px 0;
    }

    /* scroll modules */
    .mobile-scroll-modules {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 0;
    }
    .mobile-scroll-modules::-webkit-scrollbar {
        display: none;
    }
    .mobile-scroll-card {
        flex-shrink: 0;
        width: 165px;
        padding: 0 16px 16px;
        box-sizing: border-box;
    }

    .mobile-scroll-card:not(:last-child) {
        margin-right: -16px;
    }
    .mobile-scroll-card .module_body {
        width: 100%;
        height: 89px;
        padding: 0;
        overflow: hidden;
        position: relative;
        display: block;
        color: inherit;
        text-decoration: none;
    }
    .mobile-scroll-card .module_header .header_top {
        padding: 0;
    }
    a.msm-grid__cell {
        display: block;
        color: inherit;
        text-decoration: none;
    }
    .video_module .video {
        width: 100%;
        height: 100%;
    }

    .msm-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
        width: 100%;
        height: auto;
    }
    .msm-grid__cell {
        aspect-ratio: 1;
        overflow: hidden;
        position: relative;
    }
    .msm-grid__cell img {
        width: 100%;
        height: 100%;
        border-radius: 0;
        object-fit: cover;
        object-position: center;
    }
    a.msm-doc-cell {
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--module-background-color--secondary);
        color: inherit;
        text-decoration: none;
    }
    .msm-doc-cell img {
        object-fit: cover;
    }
    .msm-doc-ext {
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        color: var(--muted-text-color);
        line-height: 1;
    }
    .mobile-scroll-card .doc_icon.page_doc_icon {
        display: block;
        width: 30px;
        height: 30px;
        border-radius: 3px;
        background: url(../icons/doc_icons.png) no-repeat;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        box-sizing: border-box;
    }
    .mobile-scroll-card .doc_icon.page_doc_icon_mp3,
    .mobile-scroll-card .doc_icon.page_doc_icon_flac {
        background-position: left -90px;
    }
    .mobile-scroll-card .doc_icon.page_doc_icon_zip,
    .mobile-scroll-card .doc_icon.page_doc_icon_7z,
    .mobile-scroll-card .doc_icon.page_doc_icon_rar {
        background-position: left -30px;
    }
    .mobile-scroll-card .doc_icon.page_doc_icon_webm,
    .mobile-scroll-card .doc_icon.page_doc_icon_mp4,
    .mobile-scroll-card .doc_icon.page_doc_icon_avi {
        background-position: left -120px;
    }
    .mobile-scroll-card .doc_icon.page_doc_icon_djvu,
    .mobile-scroll-card .doc_icon.page_doc_icon_ps,
    .mobile-scroll-card .doc_icon.page_doc_icon_pdf,
    .mobile-scroll-card .doc_icon.page_doc_icon_fb2 {
        background-position: left -150px;
    }
    .msm-album-cover {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .mobile-scroll-card .module_body.msm-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        background: var(--module-background-color--secondary);
        box-sizing: border-box;
        color: var(--link-color);
        text-decoration: none;
    }
    .msm-placeholder svg {
        display: block;
        opacity: 0.55;
    }
    .msm-placeholder-label {
        font-size: 11px;
        line-height: 1.2;
        text-align: center;
        padding: 0 4px;
    }

    .ovk-diag-body .module_header .header_top {
        line-height: inherit;
        height: unset;
        padding: 2px 0;
        font-size: 13px;
        color: var(--muted-text-color);
    }
    .ovk-diag-body .module_header .header_top .header_label {
        font-weight: 500;
    }
    .ovk-diag-body .module_body {
        padding: 8px 0 0;
    }
    .ovk-diag-body .page_list_module .line_cell .info {
        width: unset;
    }
    .ovk-diag-body .mobile-info-row {
        margin: 0 -16px;
    }

    /* photo viewer (fullscreen modal) */
    .ovk-photo-view-window {
        min-width: 0 !important;
        max-width: 100vw !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        margin: 0 !important;
        top: 0 !important;
        transform: none !important;
        background: #000;
    }
    .mobile-photo-modal {
        position: absolute;
        background: none;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        z-index: 2000;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .mobile-photo-header {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 16px;
        background: linear-gradient(to bottom, rgba(0,0,0,0.6), transparent);
        z-index: 10;
        box-sizing: border-box;
        transition: opacity 0.25s ease;
    }
    .mobile-photo-header .mph-left {
        display: flex;
        align-items: center;
        flex: 1;
        overflow: hidden;
    }
    .mobile-photo-header .pv_title_group {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .mobile-photo-header .pv_album_name {
        color: #fff;
        font-size: 17px;
        font-weight: 500;
        text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mobile-photo-header .pv_counter {
        color: #fff;
        font-size: 13px;
        font-weight: 400;
        text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    }
    .mobile-photo-header .pv_title_group.pv-no-album .pv_album_name {
        display: none;
    }
    .mobile-photo-header .pv_title_group.pv-no-album .pv_counter {
        font-size: 17px;
        font-weight: 500;
        opacity: 1;
    }
    .mobile-photo-header .mph-right {
        display: flex;
        align-items: center;
    }
    .mobile-photo-header .pv_back_btn {
        display: flex;
        align-items: center;
        margin-right: 20px;
        flex-shrink: 0;
    }
    .mobile-photo-header svg {
        color: #fff;
        filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
    }
    .mobile-photo-body {
        flex: 1;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .mobile-photo-body img {
        max-width: 100vw;
        max-height: 100vh;
        max-height: 100dvh;
        object-fit: contain;
    }
    .mobile-photo-footer {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
        padding-top: 40px;
        padding-bottom: env(safe-area-inset-bottom, 0);
        z-index: 10;
        box-sizing: border-box;
        transition: opacity 0.25s ease;
    }
    .mobile-photo-header.pv-ui-hidden,
    .mobile-photo-footer.pv-ui-hidden {
        opacity: 0;
        pointer-events: none;
    }
    .mobile-photo-footer .pv_desc {
        color: #fff!important;
        padding: 0 15px;
        margin-inline: 0;
        font-size: 14px;
        text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        max-height: 100px;
        overflow-y: auto;
    }
    .mobile-photo-footer .pv_desc .pv_can_edit,.mobile-photo-footer .pv_no_description {
        color: #fff;
    }
    .mobile-photo-footer .pv_can_edit:hover {
	    background: rgba(122,122,122,.1);
    }
    .mobile-photo-footer .mobile-photo-actions {
        padding: 10px 15px;
        display: flex;
        align-items: center;
        white-space: nowrap;
    }
    .mobile-photo-footer .mobile-photo-actions .post_full_like {
        flex: 1 1 0;
    }
    .mobile-photo-footer .mobile-photo-actions .action_button,.mobile-photo-footer .mobile-photo-actions a {
        color: #fff !important;
        text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        text-decoration: none;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    body:not(.mode-2018) .mobile-photo-footer .mobile-photo-actions .action_button:hover {
        background: rgba(122,122,122,.25)
    }
    .mobile-photo-footer .mobile-photo-actions .action_count {
	    color: rgba(255,255,255,.5)!important;
    }
    body:not(.mode-2018) .mobile-photo-footer .mobile-photo-actions .action_button .action_icon {
        filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)) brightness(0) invert(1);
    }
    body.mode-2018 .mobile-photo-footer .mobile-photo-actions .action_button:not(.my_like) .action_icon {
        filter: brightness(1.2) grayscale(1);
    }

    /* photo viewer (inline / standalone page) */
    .action_button.mobileonly {
        display: flex!important
    }
    .page_content .action_button.mobileonly {
        display: none!important;
    }
    .pv_wrapper:not(.mobile-photo-modal) {
        display: block;
        max-height: unset;
        min-height: unset;
        border-radius:  0 var(--module-border-radius) var(--module-border-radius);
        background: var(--module-background-color);
        padding-top: 16px;
    }
    .pv_wrapper:not(.mobile-photo-modal) .pv_left {
        width: 100%;
        max-height: none;
        float: none;
    }
    .pv_wrapper:not(.mobile-photo-modal) .pv_photo {
        min-height: 0;
        height: auto;
        max-height: 80vw;
    }
    .pv_wrapper:not(.mobile-photo-modal) .pv_photo img {
        height: auto;
        max-height: 80vw;
    }
    .pv_wrapper:not(.mobile-photo-modal) .pv_bottom_info {
        padding: 16px;
    }
    .pv_wrapper:not(.mobile-photo-modal) .pv_left .pv_bottom_actions {
        float: none;
    }
    .pv_wrapper:not(.mobile-photo-modal) .pv_right {
        width: 100%;
        max-height: unset;
        float: none;
        border-left: none;
        border-top: 1px solid var(--border-color);
        flex: 1;
        min-height: 500px;
        display: block;
    }
    .pv_wrapper:not(.mobile-photo-modal) .pv_right .scroll_container {
        height: auto;
        overflow-y: visible;
    }
    .pv_wrapper:not(.mobile-photo-modal) .pv_author_block {
        border-radius: 0;
    }
    .pv_wrapper:not(.mobile-photo-modal) .pv_right .post_full_like_wrap {
        padding: 10px 16px;
    }
    .pv_wrapper:not(.mobile-photo-modal) .pv_desc {
        max-height: none;
        overflow-y: visible;
    }
    .pv_album_name, .pv_left .pv_bottom_actions > a, .pv_left .pv_bottom_actions > button, .pv_left .pv_bottom_actions > span, .pv_left .pv_bottom_actions > .pv_actions_more {
        color: var(--text-color);
    }
    .pv_wrapper:not(.mobile-photo-modal) :is(.pv_nav_left, .pv_nav_right) {
        display: none !important;
    }
    .pv_wrapper .pv_comments {
        display: block;
    }
    .pv_comments #standaloneCommentBox {
        position: sticky;
    }

    /* video modal */
    .ovk-modal-video-window .video_block_layout {
        padding: 16px 16px 0
    }
    .video_info {
        margin: 0 16px;
    }

    /* messages */
    .messenger-app--messages---message {
        position: relative;
        padding: 16px 8px 13px;
    }
    .messenger-app--messages---message .time {
        width: fit-content;
        position: absolute;
        right: 8px;
        top: 16px;
    }
    .messenger-app--messages---message ._content > a {
        width: calc(100% - 80px)
    }

    /* notes */

    #noteFactory .post_full_like_wrap {
        flex-direction: column-reverse;
    }
    #noteFactory .post_full_like_wrap .reply_link_wrap {
        align-self: end;
    }

    /* Album list (AlbumList.latte) */
    .photo_items_list {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        margin: 0;
        padding: 0 4px;
    }

    .photo_items_list .page_album_row {
        width: auto !important;
        height: auto !important;
        margin: 0;
        display: block;
        border-radius: var(--module-border-radius);
        overflow: hidden;
    }

    .photo_items_list .page_album_thumb_wrap {
        aspect-ratio: 3 / 2;
        overflow: hidden;
    }

    .photo_items_list .page_album_thumb {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .photo_items_list .page_album_nocover {
        width: auto !important;
        height: auto !important;
        aspect-ratio: 3 / 2;
    }

    .photo_items_list .page_album_description {
        display: none;
    }

    .photos-skeleton {
        padding: 10px;
    }
    .photos-skeleton-item {
        width: calc(50% - 5px);
    }

    .archive_actions_button {
        margin: 0;
    }


    /* mobile hover effects */
    .mobile-info-row, .mobile-scroll-card,.ui_tabs .ui_tab,.sidebar_inner .link,
    #ctx_menu a {
        transition: background-color 250ms;
    }
    .mobile-info-row:hover,.mobile-scroll-card:hover,.ui_tabs .ui_tab:hover,.sidebar_inner .link:hover,
    #ctx_menu a:hover,
    .ui_actions_menu a.appbar-tabs-menu-item--active {
        background-color: rgba(122,122,122,.1);
    }
    .mobile-info-row:active,.mobile-scroll-card:active,.ui_tabs .ui_tab:active,.sidebar_inner .link:active,
    #ctx_menu a:active {
        background-color: rgba(122,122,122,.2);
    }

    /* action menu */
    .ui_actions_menu {
        --ui-actions-menu-distance: 12px;
        min-width: 112px;
        max-width: 280px;
        padding: 1px 0;
        border: 1px solid var(--border-color-2);
        border-radius: 2px;
        z-index: 10;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.09),
            0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12), 0 5px 5px -3px rgba(0,0,0,.2);
    }

    .ui_actions_menu:before,
    .ui_actions_menu:after {
        display: none !important;
    }

    .ui_actions_menu a,
    .ui_actions_menu .ui_actions_menu_item,
    .ui_actions_menu form button,
    .ui_actions_menu label {
        display: flex;
        align-items: center;
        padding: 0 16px;
        font-size: 16px;
        line-height: 44px;
        height: 44px;
        transition: none;
        box-sizing: border-box;
    }

    .ui_actions_menu a:hover,
    .ui_actions_menu .ui_actions_menu_item:hover,
    .ui_actions_menu form button:hover,
    .ui_actions_menu label:hover {
        background-color: color-mix(in srgb, currentColor 4%, transparent);
    }

    .ui_actions_menu:not(.dark) a {
        color: var(--text-color);
    }

    .ui_actions_menu a.delete,
    .ui_actions_menu button.delete,
    .ui_actions_menu .ui_actions_menu_item.delete,
    .ui_actions_menu form button.delete {
        color: #ED330A;
    }
    body.dark-mode .ui_actions_menu a.delete,
    body.dark-mode .ui_actions_menu button.delete,
    body.dark-mode .ui_actions_menu .ui_actions_menu_item.delete,
    body.dark-mode .ui_actions_menu form button.delete {
        color: #ff5c5c;
    }

    .ui_actions_menu .separator,
    .ui_actions_menu .ui_actions_menu_sep {
        border-top: 1px solid var(--border-color);
        margin: 0;
    }

    /* Material Design 2 touch ripples (surface set up from mobile.js) */
    /* keep in sync with RIPPLE_*_SELECTOR in res/js/features/mobile.js */
    .button, .button *, .profile_link, .profile_link *,
    .ui_actions_menu a, .ui_actions_menu button, .ui_actions_menu input,
    .ui_actions_menu label, .ui_actions_menu .ui_actions_menu_item, .ui_actions_menu *,
    .ui_tab, .ui_tab *, .ui_tab_plain, .ui_tab_plain *,
    .sidebar_inner .link, .sidebar_inner .link *,
    .mobile-info-row, .mobile-info-row *, .mobile-scroll-card, .mobile-scroll-card *,
    .appbar .hamburger, .appbar .hamburger *, .appbar-extra-btn, .appbar-extra-btn *,
    .ovk-msg-fullscreen .ovk-diag-head-close, .ovk-msg-fullscreen .ovk-diag-head-close *,
    .ovk-msg-fullscreen .ovk-diag-head-apply, .ovk-msg-fullscreen .ovk-diag-head-apply *,
    .ovk-msg-sheet .ovk-diag-head-close, .ovk-msg-sheet .ovk-diag-head-close *,
    .ovk-msg-sheet .ovk-diag-head-apply, .ovk-msg-sheet .ovk-diag-head-apply * {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
    .md-ripple {
        position: relative;
        overflow: hidden;
    }
    .md-ripple--unbounded {
        overflow: visible;
    }
    .md-ripple-ink {
        position: absolute;
        display: block;
        border-radius: 50%;
        background: currentColor;
        opacity: 0;
        pointer-events: none;
        transition: transform 225ms cubic-bezier(0, 0, 0.2, 1), opacity 75ms linear;
    }
    .md-ripple-ink-clip {
        position: absolute;
        overflow: hidden;
        pointer-events: none;
    }
}
/* shown only inside .ovk-msg-fullscreen / .ovk-msg-sheet headers on mobile */
.ovk-diag-head-close-icon,
.ovk-diag-head-apply {
    display: none;
}

@keyframes fullscreenDialogIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes slideUpBottomSheet {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}
@keyframes mdDialogIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@media (min-width: 769px) {
    .appbar,
    .mobileonly {
        display: none !important;
    }
}