#chapzi-qr {
    position: relative;
    max-width: 414px;
    margin: 0 auto;
    overflow: hidden;
    height: 100%;
    padding: 1em 15px;

    .profile {
        display: flex;
        align-items: center;
        gap: 8px;

        img {
            width: 80px;
            object-fit: cover;
            aspect-ratio: 1/1;
            border-radius: 10px;
        }

        h1 {
            font-size: 20px;
        }

        h2 {
            font-size: 13px;
            font-weight: 400;
        }
    }

    .banner {
        margin-top: 1em;
        border-radius: 10px;
        overflow: hidden;

        img,
        video {
            width: 100%;
            aspect-ratio: 16/9;
        }
    }

    .tabs {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-top: 1em;

        button {
            background-color: #E4E4E4;
            border-radius: 7px;
            border: none;
            color: #A7A7A7;
            flex: 1 33%;
            cursor: pointer;
            font-weight: 200;

            &.active {
                background-color: #A7A7A7;
                color: #fff;
            }
        }
    }

    .chapzi-section {
        margin-top: 1em;
        display: none;

        &.active {
            display: block;
        }

        .chapzi-items {
            display: flex;
            gap: 8px;
            align-items: center;
            flex-wrap: wrap;

            .chapzi-item {
                flex: 1 40%;

                a {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    padding: 15px 10px;
                    border-radius: 10px;
                    justify-content: center;
                    color: #1e1f26;
                    font-size: 18px;
                    white-space: nowrap;

                    img {
                        width: 20px;
                        aspect-ratio: 1/1;
                        border-radius: 3px;
                    }
                }
            }
        }
    }

    #addresses {
        margin-top: 1em;
        display: none;

        &.active {
            display: block;
        }

        .chapzi-items {
            display: flex;
            flex-direction: column;
            gap: 8px;
            align-items: center;
            flex-wrap: wrap;

            .chapzi-item {
                flex: 1;
                width: 100%;

                a,
                p {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    padding: 15px;
                    border-radius: 10px;
                    justify-content: center;
                    color: #1e1f26;
                    font-size: 18px;
                    white-space: nowrap;

                    img {
                        width: 20px;
                        aspect-ratio: 1/1;
                        border-radius: 3px;
                    }
                }

                p {
                    text-align: center;
                    padding: 0;
                    flex: 1;
                    width: 100%;
                    white-space: wrap;

                    img {
                        align-self: flex-start;
                    }
                }
            }
        }
    }

    .footer {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
        color: #A7A7A7;

        a {
            color: #0a7aff;
        }
    }
}