/* 用户中心页面 - 移动端响应式样式 */
/* 统一管理 4 个用户中心页面的移动端样式 */

@media (max-width: 768px) {
    /* 标签栏 - 图标在上，文字在下，4列等宽 */
    .member-container { padding: 15px; }
    .tabs-wrapper { padding: 0 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tabs-nav { 
        display: flex; 
        width: max-content;
        min-width: 100%;
    }
    .tab-link { 
        padding: 8px 12px; 
        font-size: 12px; 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        justify-content: center;
        line-height: 1.2; 
        text-align: center;
        white-space: nowrap;
    }
    .tab-link .icon { 
        display: block;
        font-size: 16px; 
        margin-bottom: 2px;
        line-height: 1;
    }
    
    /* 用户信息区块 */
    .user-section { flex-direction: column; gap: 20px; text-align: center; }
    .user-section-left { flex-direction: column; }
    .user-info-card { margin-bottom: 20px; }
    .user-name-row { flex-direction: column; align-items: flex-start; }
    
    /* 会员相关 */
    .user-summary-content { flex-direction: column; text-align: center; }
    .vip-status { text-align: center; margin-top: 15px; }
    
    /* 订单表格 */
    .orders-table { font-size: 12px; }
    .orders-table th, .orders-table td { padding: 8px 10px; }
    
    /* 套餐卡片 - 单列布局 */
    .packages-grid { grid-template-columns: 1fr !important; gap: 15px; }
    .package-card { padding: 20px 15px; }
    .package-name { font-size: 18px; }
    .package-price { font-size: 28px; }
    
    /* 充值相关 */
    .info-grid { grid-template-columns: 1fr; gap: 10px; }
    .info-item { padding: 15px; }
    .quick-amounts { grid-template-columns: repeat(2, 1fr); }
    .btn, .btn-recharge { width: 100%; }
}