/* 会员中心页面专属样式（User/Index/index）
 *
 * 背景：css.css 中 #wrapper 为固定 1200px 宽度，窄屏下会横向溢出。
 * 本文件在会员中心页面（body.page-user-center）内按视口宽度做响应式覆盖，
 * 作用域限定在会员中心，不影响其它模块。
 */

@media (max-width: 1240px) {
    .page-user-center #wrapper {
        width: 100%;
        max-width: 1200px;
        padding-left: 12px;
        padding-right: 12px;
        box-sizing: border-box;
    }
}

/* 窄屏：资料卡与主区纵向堆叠 */
@media (max-width: 900px) {
    .page-user-center .main {
        width: 100%;
    }
    /* 顶部导航在窄屏放不下，改为可横向滚动 */
    .page-user-center #topnav {
        width: 100%;
        flex-wrap: wrap;
    }
    .page-user-center #topnav .left_top {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .page-user-center #topnav .menu-home_-container {
        width: 100%;
    }
    .page-user-center #topnav #nav_box {
        white-space: nowrap;
    }
    .page-user-center #searchbar {
        width: 100%;
        margin-top: 8px;
    }
    .page-user-center .user-center .uc__aside {
        width: 100%;
        flex: 1 1 auto;
    }
    .page-user-center .user-center .uc__layout {
        flex-direction: column;
    }
    .page-user-center .user-center .uc__levelbar {
        gap: 16px;
        padding: 14px 16px;
    }
    /* 记录表格允许横向滚动，避免列被压扁 */
    .page-user-center .user-center .ur__wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .page-user-center .user-center .ur__table {
        min-width: 560px;
    }
    .page-user-center .user-center .ug__figure img {
        max-height: 160px;
    }
}

/* 弹窗在小屏下贴边并可滚动 */
@media (max-width: 640px) {
    .uam,
    .upm,
    .ugm,
    .urm {
        width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
    }
    .urm__grid,
    .ugm__grid {
        grid-template-columns: 1fr;
    }
    .upm__label {
        flex: 0 0 76px;
    }
}