/* ==================== ?? ????? ????????? ?????? (?? 480px) ==================== */
@media (max-width: 480px) {
    
    /* --- 1. ????? ? ????????? --- */
    .header-inner {
        padding: 0 12px;
    }
    .logo {
        font-size: 20px;
    }
    .search {
        display: none; /* ???????? ?????, ????????? ?????? ????????? ??? ???????? ????? */
    }
    .menu-toggle {
        display: flex;
        margin-left: auto;
    }

    /* --- 2. ???????? ??????? --- */
    .content {
        padding: 12px;
        padding-top: calc(var(--header-height, 56px) + 12px);
    }

    /* --- 3. ????? --- */
    .vk-footer {
        padding: 20px 16px;
    }
    .footer-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
    }
    .footer-links {
        justify-content: center;
        gap: 10px 16px;
    }
    .footer-copy {
        margin-top: 8px;
        font-size: 11px;
    }

    /* --- 4. ??????? --- */
    .profile-content {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .profile-avatar img {        width: 110px; /* ????????? ??? ???????? ?????, 140px ???? ??????? ????? */
        height: 110px;
        border-width: 3px;
        margin-top: -55px; /* ????? ???????? ?????? ??? ?????????? ????????????? ?? ??????? */
    }
    .online-status {
        bottom: 10px; /* ??????????? ???????????? ???????, ? ?? ???????? ???????????? */
        right: 10px;
        width: 16px;
        height: 16px;
        border-width: 2px;
    }
    .profile-stats {
        padding: 12px 0;
    }
    .stat-number {
        font-size: 22px;
    }

    /* --- 5. ????? --- */
    .post {
        padding: 12px;
        border-radius: 10px;
    }
    .post-header {
        gap: 10px;
    }
    .post-avatar {
        width: 40px;
        height: 40px;
    }

    /* --- 6. ????????? ? ??? --- */
    .messages-page {
        max-width: 100%;
        padding: 0 10px;
    }
    .dialogs-list {
        border-radius: 10px;
    }
    .dialog-item {
        padding: 12px;
    }
    .dialog-avatar {
        width: 44px;
        height: 44px;
    }
    .conversation-page {
        height: calc(100vh - 120px);
        padding: 0 8px;    }
    .conversation-header {
        padding: 10px 12px;
    }
    .partner-avatar {
        width: 36px;
        height: 36px;
    }
    .partner-info h2 {
        font-size: 15px;
    }
    .messages-container {
        padding: 12px 8px;
    }
    .message {
        max-width: 88%;
    }
    .message-content {
        padding: 8px 12px;
        font-size: 14px;
    }
    .message-avatar {
        width: 28px;
        height: 28px;
    }
    .message-audio audio {
        width: 100%;
        max-width: 200px;
        height: 32px;
    }

    /* --- 7. ?????? ?????? (????? 7 ? ??? ??? ???????? ??????? ???????) --- */
    .emoji-panel {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 4px;
        padding: 8px;
    }
    .emoji-btn {
        font-size: 20px;
        padding: 6px;
    }

    /* --- 8. ?????? ? ????? --- */
    .friends-grid {
        grid-template-columns: 1fr; /* ???? ??????? ??? ???????? ??????, ????? ????? ?? ??????????? */
    }
    .friend-card {
        padding: 12px;
    }    .friend-avatar {
        width: 50px;
        height: 50px;
    }

    /* --- 9. ???? ? ??????? --- */
    .albums-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .photos-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    /* --- 10. ?????-?????? --- */
    .admin-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .stat-card {
        padding: 15px 10px;
    }
    .stat-card .number {
        font-size: 24px;
    }

    /* --- 11. ??????????? ????? (?????????????? ?????????) --- */
    .track-item {
        grid-template-columns: 28px 40px 1fr auto;
        gap: 8px;
        padding: 8px;
    }
    .track-art {
        width: 40px;
        height: 40px;
    }
    .track-title {
        font-size: 13px;
    }
    .track-artist {
        font-size: 11px;
    }