/**
*
* 全局 PJAX加载动画
*
*/
.mobile-loader-overlay {
    display: none; /* 默认不显示 */
    position: fixed; /* 固定定位，相对于视口 */
    top: 0;
    left: 0;
    width: 100%; /* 宽度为整个视口宽度 */
    height: 100%; /* 高度为整个视口高度 */
    background: rgba(0, 0, 0, 0);  /*半透明背景 */
    z-index: 9999; /* 高层级确保覆盖其他内容 */
}
.mobile-loader {
    display: none; /* 默认不显示 */
    position: fixed;
    top: 45%;
    left: 50%;
    /* 使用-webkit-前缀以确保兼容性 */
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 10000; /* 比遮罩层层级更高，确保在遮罩层之上 */
}
.mobile-loader span{
    width:20px;
    height:20px;
    border-radius:50%;
    display:inline-block;
    position:absolute;
    left:50%;
    margin-left:-16px;
    -webkit-animation:3s infinite linear;
    -moz-animation:3s infinite linear;
    -o-animation:3s infinite linear;

}
.mobile-loader span:nth-child(1){
    background:#E84C3D;
    -webkit-animation:kiri 1.2s infinite linear;
    -moz-animation:kiri 1.2s infinite linear;
    -o-animation:kiri 1.2s infinite linear;
}
.mobile-loader span:nth-child(2){
    background:#F1C40F;
    z-index:100;
}
.mobile-loader span:nth-child(3){
    background:#2FCC71;
    -webkit-animation:kanan 1.2s infinite linear;
    -moz-animation:kanan 1.2s infinite linear;
    -o-animation:kanan 1.2s infinite linear;
}
@-webkit-keyframes kanan {
    0% {-webkit-transform:translateX(25px);
    }

    50%{-webkit-transform:translateX(-25px);
    }

    100%{-webkit-transform:translateX(25px);
        z-index:200;
    }
}
@-moz-keyframes kanan {
    0% {-moz-transform:translateX(25px);
    }

    50%{-moz-transform:translateX(-25px);
    }

    100%{-moz-transform:translateX(25px);
        z-index:200;
    }
}
@-o-keyframes kanan {
    0% {-o-transform:translateX(25px);
    }

    50%{-o-transform:translateX(-25px);
    }

    100%{-o-transform:translateX(25px);
        z-index:200;
    }
}
@-webkit-keyframes kiri {
    0% {-webkit-transform:translateX(-25px);
        z-index:200;
    }
    50%{-webkit-transform:translateX(25px);
    }
    100%{-webkit-transform:translateX(-25px);
    }
}

@-moz-keyframes kiri {
    0% {-moz-transform:translateX(-25px);
        z-index:200;
    }
    50%{-moz-transform:translateX(25px);
    }
    100%{-moz-transform:translateX(-25px);
    }
}
@-o-keyframes kiri {
    0% {-o-transform:translateX(-25px);
        z-index:200;
    }
    50%{-o-transform:translateX(25px);
    }
    100%{-o-transform:translateX(-25px);
    }
}

/**
*
*   iPad适配宽度
*/
.max-ipad{
    width: 100%;
    max-width: 450px;
}
/* 搜索框 */
.iosipa-display-none{
    display:none;
}
.iosipa-display-block{
    display:block;
}

/**
*
*   搜索框
*/
.mdui-appbar-with-searchbar {
    padding-top: 64px;
}
.search-bar {
    display: flex;
    margin: 6px 6px 6px;
    height: 40px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .24);
    background: #FAFAFA;
    align-items: center;
    border-radius: 13px;
}
.search-bar > input {
    flex: 1 1;
    height: 100%;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    font-family: Roboto;
    font-size: 14px;
    line-height: 100%;
    margin: 0 0px;
    outline: none;
    color: rgba(0, 0, 0, .87);
}
.search-bar > input::placeholder {
    color: rgba(0, 0, 0, .54);
}
.search-bar > .mdui-icon {
    margin: 0 16px;
}
.search-bar > .mdui-btn-icon {
    margin: auto 11px;
}

/**
*
*   暗色模式支持
*/
.mdui-theme-layout-dark .search-bar {
    background: #424242;
}
.mdui-theme-layout-dark .search-bar > input {
    color: white;
}
.mdui-theme-layout-dark .search-bar > input::placeholder {
    color: rgba(255, 255, 255, .70);
}

/**
*
*  底部bar
*
* */
.mobile-bottom-nav{
    backdrop-filter:saturate(150%) blur(18px);
    -webkit-backdrop-filter:saturate(150%) blur(18px);
    background-color:rgba(255,255,255,0.8);
}
.mdui-theme-layout-dark .mobile-bottom-nav{
    background-color:rgba(0,0,0,0.7);
}


/**
*
* 登陆界面样式
*
*/
.mobile-login-body {
    padding: 100px 8px;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width:420px){
    .mobile-login-body {
        padding: 50px 8px;
    }
}

@media screen and (max-width:320px){
    .mobile-login-body {
        padding: 30px 8px;
    }
}

.mobile-login-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 300px;
}
.mobile-login-container h2 {
    margin-bottom: 35px;
    text-align: center;
}
.mobile-login-container input {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box;
}
.mobile-login-container button {
    width: 100%;
    padding: 10px;
    border: none;
    background-color: #007bff;
    color: #fff;
    cursor: pointer;
    border-radius: 15px;
}
.mobile-login-container .register-link {
    margin-top: 10px;
    font-size: 14px;
}
.mobile-login-container .register-link a{
    color: #007bff;
}

.mobile-login-input-container {
    display: flex;
}
.mobile-login-input-container input {
    height: 38px;
    max-width: 200px;
}
.mobile-login-input-container button {
    margin-left: 5px;
    height: 38px;
    max-width: 100px;
}

@media screen and (max-width:420px){
    .mobile-login-input-container input {
        height: 38px;
        max-width: 200px;
    }
}

@media screen and (max-width:350px){
    .mobile-login-input-container input {
        height: 38px;
        max-width: 140px;
    }
}



/*
 *  深色模式适配 登陆界面
 */
.mdui-theme-layout-dark .mobile-login-container {
    background-color: #616161;
    color: #E0E0E0;
}
.mdui-theme-layout-dark .mobile-login-container input{
    background-color: #616161;
    color: #E0E0E0;
}
.mdui-theme-layout-dark .mobile-login-container  input::placeholder {
    color: #E0E0E0;
}

/*
 *  深色模式适配 弹窗
 */
.mdui-theme-layout-dark .layui-layer{
    background-color: #212121;
}
.mdui-theme-layout-dark .layui-layer-title{
    color: #ffffff;
}
.mdui-theme-layout-dark .layui-layer-close{
    background-color: #ffffff!important;
}

/* 弹窗的圆角 */
.layui-layer{
    border-radius: 15px;
}
/* 按钮的圆角 */
.layui-layer-btn a {
    border-radius: 5px;
}

/**
*
*   Pro用户、金币 等 圈圈
*
* */
.iosipa-pro-circle {
    -webkit-border-radius: 0.4rem;
    border-radius: 0.4rem;
    padding: 0 0.5rem;
    border: 1px solid;
}

/**
*
*   手机端应用程序模糊效果
*
* */
.application-overflow {
    position: relative;
    overflow: hidden; /* 保证模糊背景不超出父元素 */
}
.application-blur-background {
    content: "";
    position: absolute;
    top: -10px; /* 增加模糊边缘 */
    bottom: -10px;
    left: -10px;
    right: -10px;
    background-size: cover;
    background-repeat: no-repeat;
}

.application-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.05); /* 调整这个值以改变模糊效果 */
}
.mdui-theme-layout-dark .application-overlay {
    background-color:rgba(0,0,0,0.5);
}



/**
*
*   评论评分界面
*
* */
.mobile-score {
    width: 100%;
    padding: 5px 0;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.mobile-score .left {
    text-align: center;
    padding-left: 0.6rem;
}
.mobile-score .left b {
    font-size: 3.8rem;
    color: #4c4c50;
    line-height: 1.3;
}

/*深色模式适配*/
.mdui-theme-layout-dark .mobile-score .left b {
    color: #FAFAFA;
}


.mobile-score .left p {
    font-size: 1.28rem;
    color: #8e8e93;
    font-weight: bold;
}

/*深色模式适配*/
.mdui-theme-layout-dark .mobile-score .left p {
    color: #FAFAFA;
}

.mobile-score .right {
    -webkit-box-flex: 0.9;
    -webkit-flex-grow: 0.9;
    -ms-flex-positive: 0.9;
    flex-grow: 0.9;
}
.mobile-score .right p {
    font-size: 0.8rem;
    color: #8e8e93;
    line-height: 1.4;
    text-align: right;
}

.mobile-score .right .star_row {
    width: 100%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    white-space:nowrap;

}

.mobile-score .star_row i {
    font-size: 16px!important;
}


.mobile-score .right .star_row span {
    width: 0.5rem;
    height: 1.4rem;
    display: inline-block;
    text-align: right;
}
.mobile-score .right .star_row .lineBox {
    width: 60%;
    height: 0.5rem;
    -webkit-border-radius: 0.3rem;
    border-radius: 0.3rem;
    background-color: #e5e5e5;
    overflow: hidden;
}
.mobile-score .right .star_row .lineBoxs{
    content: ""; /* 伪元素用于创建蓝色进度条 */
    /*position: absolute;  设置绝对定位，与背景进度条叠加
    background-color: #007bff;   设置蓝色进度条的颜色 */
    height: 0.5rem;
    -webkit-border-radius: 0.3rem;
    border-radius: 0.3rem;
    overflow: hidden;
}


/**
*
*   签到界面
*
* */
.user-sign-button {
    padding: 54px 45px;
    font-size: 30px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}

.user-sign-button:hover {
    background-color: #009688;
}
.user-sign-button:disabled{
    padding: 65px 40px;
    background-color: #C8E6C9;
}

/**
*   分页样式
*/

/* 分页容器 */
.app-page {
    text-align: center;
    padding: 10px 0;
}

/* 分页列表 */
.pagination {
    display: block; /* 改为块级显示 */
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 0; /* 消除inline-block元素之间的空格 */
    text-align: center;
}

/* 分页项 */
.pagination li {
    display: inline-block; /* 使用inline-block代替flex */
    vertical-align: middle;
    margin: 2px;
    font-size: 14px; /* 重置字体大小 */
}

/* 分页链接 */
.pagination li a,
.pagination li span {
    display: inline-block;
    padding: 8px 12px;
    color: #333;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    -webkit-transition: all 0.3s ease; /* 添加webkit前缀 */
    transition: all 0.3s ease;
}

/** 深色模式适配 */
.mdui-theme-layout-dark .pagination li a,
.mdui-theme-layout-dark .pagination li span {
    color: #ffffff;
    background-color: #303030;
    border-color: #424242;
}

/* 鼠标悬停效果 */
.pagination li a:hover {
    background-color: #f5f5f5;
    border-color: #ddd;
}

/* 当前激活页 */
.pagination li.active span {
    color: #fff;
    background-color: #1a73e8;
    border-color: #1a73e8;
    cursor: default;
}

/* 响应式布局 */
@media (max-width: 576px) {
    .pagination li a,
    .pagination li span {
        padding: 6px 10px;
        font-size: 14px;
    }

    /* 在小屏幕上确保项目不会挤在一起 */
    .pagination li {
        margin: 2px;
    }
}





/**
*
*   服务器状态不同颜色的方块
*
* */
.iosipa-order-state-1{
    background: #4CAF50;
    color: #ffffff;
    width: 50px;
    padding: 2px;
    border-radius: 4px;
    text-align: center;
}
.iosipa-order-state-2{
    background: #795548;
    color: #ffffff;
    width: 55px;
    padding: 2px;
    border-radius: 4px;
    text-align: center;
}
.iosipa-order-state-3{
    background: #3F51B5;
    color: #ffffff;
    width: 50px;
    padding: 2px;
    border-radius: 4px;
    text-align: center;
}
.iosipa-order-state-4{
    background: #FF9800;
    color: #ffffff;
    width: 50px;
    padding: 2px;
    border-radius: 4px;
    text-align: center;
}

/*
    软件列表适应不同屏幕
    2024/11/30
*/
.is-app-category-title {
    width: 220px;
}
@media screen and (max-width:380px){
    .is-app-category-title {
        width: 200px;
    }
}
@media screen and (max-width:360px){
    .is-app-category-title {
        width: 180px;
    }
}
@media screen and (max-width:340px){
    .is-app-category-title {
        width: 170px;
    }
}
@media screen and (max-width:320px){
    .is-app-category-title {
        width: 160px;
    }
}
@media screen and (max-width:310px){
    .is-app-category-title {
        width: 150px;
    }
}




/**
  评论卡片样式
*/
.comment-card-region .app-page{
    padding-bottom: 10px;
}
.comment-card .device-info {
    font-size: 12px;
    margin-left: 4px;
}

.comment-card .user-rating {
    margin-top: 4px;
    font-size: 16px;
}

.comment-card .user-rating i {
    color: #ffd700;
    font-size: 16px;
}


.comment-card .comment-text {
    line-height: 1.6;
}

.comment-card .mdui-card {
    border-radius: 15px;
}

.comment-card .comment-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

.comment-card .vote-actions {
    display: flex;
    align-items: center;
}

.comment-card .vote-count {
    font-size: 14px;
    margin: 0 4px;
}

/* 调整点赞按钮大小 */
.comment-card .vote-btn {
    min-width: 24px !important;
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
}

/* 调整点赞按钮大小 */
.comment-card .vote-icon {
    font-size: 16px !important;
}

.comment-card .mdui-btn-dense {
    min-width: 32px;
    width: 32px;
    height: 32px;
}

.comment-card .other-elements-text-color {
    font-size: 12px;
    color: #757575;
}

/* 深色模式适配 */
.mdui-theme-layout-dark .comment-card .other-elements-text-color {
    color: #BDBDBD;
}


/**
 * 评论输入框样式
 */
.comment-input {
}

.comment-input .rating-star {
    cursor: pointer;
    font-size: 24px;
    color: #ffd700;
}

.comment-input .rating-star:hover,
.comment-input .rating-star.active {
    color: #ffd700;
}

.button-group {
    display: flex;
    gap: 12px;
}

.button-group button {
    border-radius: 15px;
}

.comment-textarea {
    resize: none;
    width: 95%;
    padding: 5px;
    border: 1px solid #e0e0e0;
    border-radius: 15px;

    font-size: 14px;
    line-height: 1.5;
}

.mdui-theme-layout-dark .comment-textarea {
    background-color: #303030;
    border-color: #424242;
    color: white;
}



/* 应用递交后 编辑界面样式 */

.iosipa-edit-form-group {
    margin-bottom: 20px;
}

.iosipa-edit-label {
    display: block;
    margin-bottom: 8px;
    color: #333;
    font-size: 16px;
}

.iosipa-edit-input[type="text"],
.iosipa-edit-textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
}

.iosipa-edit-textarea {
    resize: vertical;
}

.iosipa-edit-radio-group {
    display: block;
}

.iosipa-edit-custom-radio {
    display: inline-block;
    position: relative;
    padding-left: 30px;
    margin-right: 20px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.iosipa-edit-custom-radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.iosipa-edit-checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

.iosipa-edit-custom-radio:hover input ~ .iosipa-edit-checkmark {
    border-color: #007AFF;
}

.iosipa-edit-custom-radio input:checked ~ .iosipa-edit-checkmark {
    background-color: #007AFF;
    border-color: #007AFF;
}

.iosipa-edit-checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.iosipa-edit-custom-radio input:checked ~ .iosipa-edit-checkmark:after {
    display: block;
}

.iosipa-edit-label-text {
    vertical-align: middle;
    line-height: 20px;
}

.iosipa-edit-submit-btn {
    width: 100%;
    padding: 12px;
    background: #007AFF;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
}

.iosipa-edit-submit-btn:hover {
    background: #0056b3;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .iosipa-edit-custom-radio {
        display: inline-block;
    }
    .iosipa-edit-checkmark {
        -webkit-border-radius: 2px;
    }
    .iosipa-edit-checkmark:after {
        -webkit-transform: rotate(45deg);
    }
}

.iosipa-edit-input[type="text"],
.iosipa-edit-textarea,
.iosipa-edit-submit-btn {
    -webkit-appearance: none;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

/* 应用递交后 列表界面样式 */

/* 应用卡片样式 */
.iosipa-app-list-app-card {
    background: #fff;
    border-radius: 12px;
    margin-bottom: 15px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* 审核状态样式 */
.iosipa-app-list-app-status {
    padding: 8px 15px;
    color: #fff;
    font-size: 14px;
}

.iosipa-app-list-approved {
    background-color: #4CAF50; /* Green */
}

.iosipa-app-list-pending {
    background-color: #FF9800; /* Orange */
}

/* 应用主体内容样式 */
.iosipa-app-list-app-main {
    padding: 15px;
    display: flex;
    align-items: center;
    position: relative;
    flex-wrap: wrap; /* 允许按钮换行 */
}

/* 应用图标样式 */
.iosipa-app-list-app-icon {
    width: 60px;
    height: 60px;
    margin-right: 15px;
    border-radius: 12px;
    overflow: hidden;
}

.iosipa-app-list-app-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 应用信息样式 */
.iosipa-app-list-app-info {
    flex: 1;
    margin-right: 10px;
}

.iosipa-app-list-app-name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
    /* 默认颜色为黑色，深色模式下需要修改 */
}

.iosipa-app-list-app-details {
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
}

.iosipa-app-list-app-details span {
    margin-right: 15px;
}

.iosipa-app-list-upload-time {
    font-size: 12px;
    color: #999;
}

/* 按钮容器 */
.iosipa-app-list-button-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
    margin-left: auto;
}

/* 编辑按钮样式修改 */
.iosipa-app-list-edit-btn {
    margin: 1px;
    padding: 8px 15px;
    background-color: #007AFF; /* Blue */
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* 删除按钮样式 */
.iosipa-app-list-button-delete {
    background-color: #FF3B30; /* Red */
}

/* 按钮悬停效果 */
.iosipa-app-list-edit-btn:hover:not(.disabled) {
    opacity: 0.8;
}

/* 按钮按下效果 */
.iosipa-app-list-edit-btn:active:not(.disabled) {
    transform: scale(0.95);
}

/* 禁用状态样式 */
.iosipa-app-list-edit-btn.disabled {
    background-color: #cccccc;
    color: #888888;
    cursor: not-allowed;
    opacity: 0.7;
}


/* --- 深色模式 (Dark Mode) --- */
.mdui-theme-layout-dark .iosipa-app-list-app-card {
    background: #424242; /* MDUI Grey 800, a common card color in dark themes */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); /* Darker, more pronounced shadow for dark bg */
}

/* 审核状态的文字颜色已经是白色，背景色通常在深色模式下可以保持不变，
   如果觉得太亮可以微调，例如：
.mdui-theme-layout-dark .iosipa-app-list-approved {
    background-color: #388E3C;
}
.mdui-theme-layout-dark .iosipa-app-list-pending {
    background-color: #F57C00;
}
   但通常这些强调色可以保持不变。
*/

.mdui-theme-layout-dark .iosipa-app-list-app-name {
    color: rgba(255, 255, 255, 0.87); /* Standard primary text color for dark themes */
}

.mdui-theme-layout-dark .iosipa-app-list-app-details {
    color: rgba(255, 255, 255, 0.7); /* Secondary text color */
}

.mdui-theme-layout-dark .iosipa-app-list-upload-time {
    color: rgba(255, 255, 255, 0.54); /* Hint/disabled text color */
}

/* 按钮颜色通常可以保持，因为它们是强调色，并且文字已经是白色。
   如果需要，也可以微调按钮背景色，但通常不需要。
.mdui-theme-layout-dark .iosipa-app-list-edit-btn {
    background-color: #2979FF;
}
.mdui-theme-layout-dark .iosipa-app-list-button-delete {
    background-color: #D32F2F;
}
*/

.mdui-theme-layout-dark .iosipa-app-list-edit-btn.disabled {
    background-color: rgba(255, 255, 255, 0.12); /* MDUI standard disabled background on dark */
    color: rgba(255, 255, 255, 0.3); /* MDUI standard disabled text on dark */
    opacity: 1; /* MDUI disabled buttons often don't use opacity, but rely on color */
}

/* 如果按钮悬停效果在深色模式下不明显，可以调整 */
.mdui-theme-layout-dark .iosipa-app-list-edit-btn:hover:not(.disabled) {
    opacity: 0.85; /* 稍微调整，或者使用 filter: brightness(120%); */
}


/**
 *
 * 修改密码界面样式
 *
 */


/* 用于将输入框和按钮放在一行的样式 */
.change-password-form-group-inline {
    /* 使用 font-size: 0; 技巧可以消除 inline-block 元素之间因换行产生的间隙 */
    font-size: 0;
    /* 让容器宽度为100%，撑满父元素 */
    width: 100%;
}

.change-password-form-group-inline input,
.change-password-form-group-inline button {
    /* 关键属性：让元素表现为行内块元素，可以并排显示 */
    display: inline-block;

    /* 关键属性：确保输入框和按钮垂直居中对齐，看起来更美观 */
    vertical-align: middle;

    /* 恢复容器中被设为0的字体大小 */
    font-size: 16px; /* 或者你需要的字体大小 */

    /* 使用 border-box 模型，这样宽度计算会包含 padding 和 border，布局更容易 */
    -webkit-box-sizing: border-box; /* 兼容旧版浏览器 */
    -moz-box-sizing: border-box;    /* 兼容旧版浏览器 */
    box-sizing: border-box;

    /* 移除MDUI可能添加的默认margin，以实现紧密排列 */
    margin: 0;
}

.change-password-form-group-inline button {
    /* 取消圆角 */
    border-radius: 2px;
}

/* 分配输入框的宽度 */
.change-password-form-group-inline input {
    /* 宽度可以根据你的需要调整，这里设置为65% */
    width: 65%;
    /* 为了美观，让输入框右边框不显示圆角 */
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* 分配按钮的宽度 */
.change-password-form-group-inline button {
    /* 宽度设置为剩下的一部分，这里是35% */
    width: 35%;
    /* 按钮左边框不显示圆角，和输入框拼接在一起 */
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}