body {
    font-family: 'Roboto', sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

/* 主容器样式 */
.main-container {
    width: 90%;
    margin: 0 auto;
    padding: 15px;
}

/* 头部、表单容器和表格容器宽度一致 */
.header,
.form-container,
.table-container {
    width: 100%;
}

/* 头部样式 */
.header {
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 10px;
    text-align: center;
    margin-bottom: 15px;
}

/* 表单容器样式 */
.form-container {
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-bottom: 15px;
    border-radius: 8px;
}

/* PC 端表单样式 */
.pc-form {
    display: flex;
    flex-wrap: wrap;
    gap: 5px; /* 调小间距 */
    align-items: center;
    width: 100%;
    padding: 15px 0 0 15px;
}

    /* 表单内元素布局 */
    .pc-form .el-form {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* 表单元素自适应宽度 */
    .pc-form .el-form-item {
        flex: 0 0 auto;
        min-width: auto;
    }

        /* 输入框最大宽度 */
        .pc-form .el-form-item .el-input {
            max-width: 120px;
        }

            /* 特定输入框更窄 */
            .pc-form .el-form-item .el-input[placeholder="从"],
            .pc-form .el-form-item .el-input[placeholder="到"],
            .pc-form .el-form-item .el-input[placeholder="亿"] {
                max-width: 80px;
            }

        /* 增大征途角色名输入框的宽度 */
        .pc-form .el-form-item label[for="roleName"] + .el-input {
            max-width: 200px;
        }

        /* 按钮稍宽 */
        .pc-form .el-form-item .el-button {
            min-width: 80px;
        }

/* 表格容器样式 */
.table-container {
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 15px;
    position: relative;
    border-radius: 8px;
}

/* 加载图标样式 */
.loading-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 1;
}

/* 历史记录样式 */
.recent-role-names {
    margin-top: 3px;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
}

.clear-icon {
    margin-left: 10px;
    cursor: pointer;
    color: #999;
}

    .clear-icon:hover {
        color: #333;
    }
/* 设置对话框样式 */
.el-dialog {
    height: 95%;
    top: 2.5%; /* 从顶部开始显示 */
    margin-top: 0 !important;
    width: 88%
}

.el-dialog__body {
    height: calc(100% - 60px); /* 减去标题和底部的高度 */
    padding: 0;
}

iframe {
    width: 100%;
    height: 100%;
    border: none;
}
/* 新增 QQ 联系链接样式 */
.QQContact {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    vertical-align: middle; /* 新增，使链接垂直居中对齐 */
}

    .QQContact img {
        width: 1.1em;
        height: 1.1em;
        fill: currentColor;
    }