/* 整体布局 */
#main {
    font-family: Arial, sans-serif;
    margin: 0 auto;
    max-width: 600px; /* 限制页面主体的最大宽度 */
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center; /* 水平居中对齐 */
    justify-content: center; /* 垂直方向居中 */
    min-height: 100vh; /* 保证在可视窗口内垂直居中 */
    border-radius: 8px; /* 圆角效果 */
}

/* 标题样式 */
#main .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-size: 20px; /* 调整字体大小 */
    font-weight: bold;
    color: #333;
    margin-bottom: 20px; /* 增加下方间距 */
}

#main .title a {
    font-size: 14px;
    color: #fec31d; /* 主体颜色 */
    text-decoration: none;
}

#main .title a:hover {
    text-decoration: underline; /* 鼠标悬停时显示下划线 */
}

/* 背景图片 */
#main .bgPic img {
    width: 100%;
    height: auto;
    border-radius: 8px; /* 背景图片添加圆角 */
    margin-bottom: 20px; /* 增加与下方内容的间距 */
}

/* 表单容器 */
#main .register {
    width: 100%;
    max-width: 500px; /* 限制表单最大宽度 */
    background-color: #fff; /* 背景白色 */
    border: 1px solid #ddd; /* 外边框颜色 */
    border-radius: 8px; /* 表单容器圆角 */
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 添加柔和阴影 */
}

/* 输入框部分 */
#main .default {
    margin-bottom: 15px; /* 表单项之间的间距 */
}

#main .default p {
    font-size: 14px; /* 提示文字的大小 */
    color: #666;
    margin-bottom: 8px;
}

#main .default input {
    width: 100%; /* 输入框宽度适应父容器 */
    padding: 10px; /* 内边距增加点击区域 */
    font-size: 14px; /* 字体大小适中 */
    border: 1px solid #ccc; /* 默认边框颜色 */
    border-radius: 5px; /* 输入框圆角 */
    outline: none; /* 去掉默认聚焦框 */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* 添加平滑的聚焦动画 */
}

#main .default input:focus {
    border-color: #fec31d; /* 聚焦时的边框颜色 */
    box-shadow: 0 0 6px rgba(254, 195, 29, 0.5); /* 聚焦的阴影效果 */
}

/* 提交按钮部分 */
#main .submit {
    text-align: center; /* 内容居中 */
    margin-top: 20px; /* 与上方表单的间距 */
}

#main .submit .notice {
    display: block; /* 提示文字换行 */
    font-size: 12px; /* 提示文字字体较小 */
    color: #666; /* 提示文字颜色 */
    margin-bottom: 10px; /* 提示文字与按钮间距 */
}

#main .submit .notice a {
    color: #fec31d; /* 链接文字颜色 */
    text-decoration: none;
}

#main .submit .notice a:hover {
    text-decoration: underline; /* 悬停时的下划线效果 */
}

#main .submit button {
    background-color: #fec31d; /* 按钮主色调 */
    color: #fff; /* 按钮文字颜色 */
    font-size: 16px; /* 按钮文字大小 */
    font-weight: bold;
    padding: 10px 20px; /* 按钮内边距 */
    border: none; /* 去除边框 */
    border-radius: 5px; /* 按钮圆角 */
    cursor: pointer; /* 鼠标样式变为点击手势 */
    transition: background-color 0.3s, transform 0.2s ease-in-out;
    box-shadow: 0 4px 10px rgba(254, 195, 29, 0.3); /* 按钮阴影效果 */
}

#main .submit button:hover {
    background-color: #d9a217; /* 悬停时的背景颜色 */
    transform: translateY(-2px); /* 悬停时轻微向上移动 */
}

#main .submit button:active {
    transform: translateY(1px); /* 按下时的轻微下压效果 */
}

/* 响应式设计：针对小屏幕优化 */
@media (max-width: 768px) {
    #main {
        padding: 15px;
    }
    #main .register {
        padding: 15px;
    }
    #main .title {
        font-size: 18px;
    }
}