/**
 * 关键页面移动端 UI 补充（E7-10）
 * 在 mobile.css 之后加载，统一 --mk-* touch 与 safe-area。
 */
@media screen and (max-width: 768px) {
    :root {
        --mk-gap: 12px;
        --mk-radius: 6px;
    }

    .mk-login.login-container,
    .mk-confirm-pay.confirm-pay-container,
    .mk-pay-vip.pay-vip-container {
        padding: var(--mk-gap);
    }

    .mk-account .account-page-left.account-mobile-hidden,
    .mk-account .account-page-right.account-mobile-hidden {
        display: none;
    }

    .mk-account .account-header .account-profile .left-user-info {
        margin-top: -40px;
    }

    .mk-account .account-header .account-profile .user-avatar {
        --avatar-size: 84px;
    }

    .modal-dialog {
        max-width: calc(100vw - 20px);
        margin: 10px auto;
    }

    .mk-circle .circle-editor-simple .simple-text-input {
        min-height: 40px;
        font-size: 14px;
    }

    .mk-single .single-article {
        padding: var(--mk-gap);
        margin-bottom: var(--mk-gap);
    }

    .footer-mobile-tabbar {
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .mk-pay .pay-qrcode img {
        max-width: min(220px, 70vw);
        height: auto;
    }

    button,
    .button,
    .form-container .form-button button,
    .pay-button button,
    .vip-pay-btn {
        min-height: 44px;
    }
}

@media screen and (max-width: 480px) {
    .mk-account .back-warp .page-title {
        font-size: 16px;
    }

    .mk-circle .circle-tab-nav,
    .mk-circle .circle-list-tab {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
}