.layui-form-required:before { /* 给红色的必填项打红色星号（文字后）如果打前面用before*/
    content: ' *';
    color: red;
}

.tip {
    font-size: 12px; /* 提示文字大小 */
    color: #999; /* 提示文字颜色 */
}

.register-container {
    max-width: 800px; /* 最大宽度 */
    margin: 60px auto 20px; /* 居中 */

    padding: 20px; /* 内边距 */
    background-color: #f9f9f9; /* 背景颜色 */
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

.register-title {
    text-align: center; /* 标题居中 */
    font-size: 28px; /* 标题字体大小 */
    margin-bottom: 20px; /* 下边距 */
    color: #333; /* 标题颜色 */
}

.form-group {
    margin-bottom: 15px; /* 下边距 */
}

.layui-form-label {
    width: 120px; /* 标签宽度 */
    text-align: right; /* 标签右对齐 */
    color: #555; /* 标签颜色 */
}

.layui-input {
    border: 1px solid #ccc; /* 边框 */
    border-radius: 4px; /* 圆角 */
    transition: border-color 0.3s; /* 边框颜色变化效果 */
}

.layui-input:focus {
    border-color: #007bff; /* 聚焦时的边框颜色 */
    outline: none; /* 去掉默认的轮廓 */
}

.layui-btn {
    border-radius: 4px; /* 按钮圆角 */
    transition: background-color 0.3s; /* 背景颜色变化效果 */
}

.layui-btn-normal {
    background-color: #007bff; /* 主按钮颜色 */
    color: white; /* 字体颜色 */
}

.layui-btn-normal:hover {
    background-color: #0056b3; /* 悬停时的颜色 */
}

.layui-btn-primary {
    background-color: #6c757d; /* 次按钮颜色 */
    color: white; /* 字体颜色 */
}

.layui-btn-primary:hover {
    background-color: #5a6268; /* 悬停时的颜色 */
}

.registration-header {
    display: flex;
    justify-content: space-between; /* 使用 space-between 使标题居中，按钮靠右 */
    align-items: center;
    margin-bottom: 20px;
}

.registration-title {
    font-weight: bold;
    color: #007bff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    flex-grow: 1; /* 使标题占据可用空间以居中 */
    text-align: center; /* 标题文本居中 */
}

.toggle-button {
    font-size: 16px;
    border-radius: 25px;
    background: #f0f0f0; /* 更柔和的背景色 */
    color: #333; /* 更深的文字颜色 */
    border: 1px solid #ccc; /* 添加边框 */
    padding: 8px 16px; /* 调整内边距 */
    box-shadow: none; /* 移除阴影效果 */
    transition: background 0.3s, color 0.3s; /* 添加颜色变化的过渡效果 */
}

.toggle-button:hover {
    background: #e0e0e0; /* 悬停时的背景色变化 */
    color: #007bff; /* 悬停时的文字颜色变化 */
}

/* 添加注册选项卡样式 */
.register-toggle-buttons {
    display: flex;
    margin-top: 15px;
    justify-content: center;
}

.toggle-button {
    padding: 8px 15px;
    margin: 0 5px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 14px;
    color: #666;
}

.toggle-button:hover {
    background-color: #e6e6e6;
    color: #333;
}

.toggle-button-active {
    background-color: #1E9FFF;
    color: white;
    border-color: #1E9FFF;
}

@media (max-width: 768px) {
    .register-container {
        margin: 0 auto !important;
    }
}