body {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    font-family: Arial, sans-serif;
    margin: 0; /* 清除默认外边距 */
    padding: 0; /* 清除默认内边距 */
    background-color: whitesmoke;
    overflow-x: auto; /* 启用横向滚动条 */
    overflow-y: auto; /* 启用纵向滚动条 */
    box-sizing: border-box; /* 确保宽度计算正确 */

}

/* 导航栏样式 */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px; /* 设置导航栏高度 */
    background-color: #1a1a1a;
    color: white;
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    padding: 0 20px;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* LOGO和标题的容器 */
.navbar-content {
    display: flex; /* 使用flex布局 */
    align-items: center; /* 垂直居中 */
    gap: 80px; /* LOGO 和标题之间的间距 */
}

/* 标题样式 */
.navbar-title {
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    margin: 0; /* 去掉默认外边距 */
}

.navbar-link {
    text-decoration: none;
    color: white;
}

/* Logo 样式 */
.logo {
    width: 80px;
    height: 80px;
    background: url(../images/logo.png) no-repeat center center;
    background-size: contain;
    margin-left: -80px;
}

/* 欢迎栏样式 */
.welcome-bar {
    display: flex; /* 使用 flex 布局 */
    align-items: center; /* 垂直居中 */
    justify-content: space-between; /* 在左右两侧对齐 */
    background-color: darkgray; /* 设置背景色，与导航栏一致 */
    color: white; /* 文本颜色 */
    padding: 20px 20px; /* 设置内边距 */
    height: 40px; /* 固定高度 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

/* 欢迎文字样式 */
.welcome-text {
    font-size: 16px; /* 调整字体大小 */
    margin-top: 7px; /* 去掉默认外边距 */
}

.quick-nav {
    padding-top: 20px;
    padding-left: 35px;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    top: 130px; /* 调整此值以适应你的布局需求 */
    height: 40px;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: fixed; /* 添加此行以固定位置 */
    z-index: 999; /* 确保它位于大多数内容之上 */
}

.quick-nav-link {
    text-decoration: none;
    color: darkgrey;
    font-size: 1em;
}

.quick-nav-link:hover {
    color: #006f8b;
    transition-duration: 1s;
}
/* 退出按钮样式 */
.logout-btn {
    margin-top: 8px;
    background-color: #d9534f; /* 设置按钮背景颜色为红色 */
    color: white; /* 按钮文字颜色 */
    border: none; /* 去掉边框 */
    padding: 8px 15px; /* 设置内边距 */
    border-radius: 4px; /* 圆角 */
    cursor: pointer; /* 鼠标悬停效果 */
    font-size: 14px; /* 按钮字体大小 */
    font-weight: bold; /* 按钮文字加粗 */
}

.logout-btn:hover {
    background-color: #c9302c; /* 鼠标悬停时更深的红色 */
}


h1 {
    color: whitesmoke;
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    padding: 20px;
    margin-top: 200px; /* 避免内容被标题遮挡 */
    width: 100%; /* 保证主内容填满宽度 */
    box-sizing: border-box; /* 确保内边距和宽度不冲突 */
}

.login-container {
    margin: 40% auto;
    text-align: left;
    width: 400px;
    min-width: 400px; /* 限制表单宽度 */
    max-height: fit-content;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    background-color: #ffffff; /* 表单背景颜色 */
    border-radius: 10px; /* 圆角边框 */
}

h2 {
    text-align: center; /* 标题居中 */
    margin-bottom: 20px; /* 标题与表单间距 */
    font-size: 24px;
}

.form-group {
    margin-bottom: 20px; /* 表单项之间的间距 */
}

.form-group input {
    width: 100%; /* 输入框宽度 */
    padding: 15px; /* 输入框内边距 */
    border: 1px solid #ccc; /* 边框颜色 */
    border-radius: 5px; /* 圆角输入框 */
    font-size: 16px; /* 字体大小 */
    box-sizing: border-box; /* 包括内边距和边框 */
}

.form-group input:focus {
    border-color: darkcyan; /* 聚焦时边框颜色 */
    outline: none; /* 去除默认聚焦样式 */
    box-shadow: 0 0 5px rgba(0, 139, 139, 0.5); /* 聚焦时添加阴影 */
}

.login-btn {
    width: 100%; /* 按钮宽度 */
    padding: 15px; /* 按钮内边距 */
    background-color: darkcyan;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    cursor: pointer;
}

.login-btn:hover {
    background-color: lightseagreen;
}

/* 消息容器样式 */
.flash-messages {
    position: fixed; /* 固定定位 */
    top: 10%; /* 距顶部10px */
    left: 50%; /* 居中对齐 */
    transform: translateX(-50%); /* 水平居中 */
    z-index: 9999; /* 确保在所有内容之上 */
    max-width: 90%; /* 防止消息过宽 */
    text-align: center; /* 居中文本 */
}

.flash-message {
    display: inline-block;
    padding: 10px 20px;
    margin-bottom: 5px;
    border-radius: 5px;
    color: #fff;
    background-color: #333; /* 默认背景色 */
    opacity: 0.9; /* 半透明效果 */
    transition: opacity 1s ease, transform 2s ease; /* 添加渐隐效果 */
}

.flash-message.fade-out {
    opacity: 0; /* 渐隐 */
    visibility: hidden; /* 隐藏消息 */
}

/* 成功消息样式 */
.flash-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

/* 错误消息样式 */
.flash-message.danger {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* 警告消息样式 */
.flash-message.warning {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}

/* 信息消息样式 */
.flash-message.info {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

.flash-message.persistent {
    font-weight: bold;
    background-color: #ffc107; /* 黄色背景 */
    color: #856404; /* 深黄色字体 */
    border: 1px solid #ffeeba; /* 黄色边框 */
}

.flash-message:not(.persistent) {
    transition: opacity 1s;
    opacity: 1;
}

/* 提示信息的样式 */
.alert {
    padding: 10px 20px;
    margin-bottom: 10px;
    border-radius: 5px;
    font-size: 14px;
    line-height: 1.5;
    background-color: #f8f9fa;
    color: #212529;
    border: 1px solid #dee2e6;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    opacity: 1;
    transition: opacity 1s ease, transform 1s ease; /* 动画效果 */
}

/* 成功消息样式 */
.alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}


.alert-logout {
    background-color: lightgray;
    color: #004085;
    border: 1px solid #b8daff;
}

/* 错误消息样式 */
.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}


/* 渐隐效果 */
.alert.fade-out {
    opacity: 0; /* 渐隐 */
    visibility: hidden; /* 隐藏消息 */
}

.register-link a {
    margin-top: 20px; /* 与登录按钮的间距 */
    text-align: center;
    color: #007BFF;
    text-decoration: none;
    font-weight: bold;
}

.register-link a:hover {
    text-decoration: underline;
}

.reg-form-group {
    position: relative;
    margin-bottom: 15px;
}

.validation-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 10px;
    vertical-align: middle;
    background-size: cover;
    background-repeat: no-repeat;
    visibility: hidden; /* 默认隐藏 */
}

.validation-icon.valid {
    background-image: url('data:image/svg+xml;base64,<绿勾svg>');
    visibility: visible;
}

.validation-icon.invalid {
    background-image: url('data:image/svg+xml;base64,<红叉svg>');
    visibility: visible;
}


#submit-button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.error-message {
    color: orange;
    font-size: 12px;
}

.rgb-container {
    margin-top: 30%;
    margin-bottom: 20%;
    text-align: left;
    min-width: 400px; /* 限制表单宽度 */
    max-height: fit-content;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    background-color: #ffffff; /* 表单背景颜色 */
    border-radius: 10px; /* 圆角边框 */
}

.reg-btn {
    width: 100%; /* 按钮宽度 */
    padding: 15px; /* 按钮内边距 */
    background-color: lightslategrey;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    cursor: pointer;
}

.help-block ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.help-block li {
    font-size: 14px;
    color: #555;
}

.help-block li.completed {
    text-decoration: line-through;
    color: green; /* 符合要求时显示为绿色并添加删除线 */
}

/* 调整密码要求列表的样式 */
#password-requirements {
    margin-top: 0; /* 控制与输入框之间的距离 */
    margin-bottom: 0; /* 防止多余的底部间距 */
    padding-left: 20px; /* 可选：设置列表的左侧缩进 */
    font-size: 14px; /* 可选：调整字体大小，使其与表单一致 */
    color: red; /* 默认显示为红色，未满足时 */
}

#password-requirements .requirement {
    margin: 2px 0; /* 控制每一行之间的间距 */
}

/* 满足要求时样式 */
#password-requirements .requirement.valid {
    text-decoration: line-through;
    color: green; /* 满足时显示绿色 */
}

.requirement {
    margin: 5px 0;
    font-size: 14px;
    color: red; /* 初始状态为红色 */
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

.requirement.valid {
    text-decoration: line-through; /* 满足要求时添加删除线 */
    color: green; /* 满足要求时显示绿色 */
}

.reg-btn:hover {
    background-color: darkgrey;
}

.welcome-bar {
    background-color: #444;
    color: #ddd;
    display: flex;
    justify-content: space-between; /* 左右对齐 */
    align-items: center; /* 垂直居中 */
    padding: 10px 20px;
    position: fixed;
    top: 70px; /* 紧贴标题栏底部 */
    left: 0;
    right: 0;
    z-index: 999;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

.process_area {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    max-height: fit-content;
    min-width: 400px;
    margin: 20% auto;

}

.custom-file-upload {
    display: flex;
    flex-direction: column; /* 标签和按钮垂直排列 */
    align-items: center; /* 水平方向居中 */
    margin-bottom: 30px; /* 每个步骤之间的间距增大 */
}

.label_upload {
    font-size: 14px; /* 标签字体大小 */
    color: lightslategrey; /* 标签颜色 */
    margin-bottom: 30px; /* 标签和按钮之间的间距 */
    line-height: 2; /* 标签的行间距 */
}

.loans-container {
    display: flex;
    flex-direction: column; /* 保证内容按列排列 */
    justify-content: center; /* 垂直居中 */
    align-items: center; /* 水平居中 */
    margin: 0 auto; /* 移除 margin 的其他方向，确保居中由 flex 控制 */
    height: 80vh; /* 设置容器高度为视窗高度 */
    text-align: center;
}

.custom-file-wrapper {
    display: flex;
    align-items: center;
    position: relative; /* 确保内部布局固定 */
    gap: 10px;
}

.custom-file-button {
    background-color: cadetblue;
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 5px;
    flex-shrink: 0; /* 按钮宽度固定 */
    text-align: center;
    width: 140px;

}

.custom-file-name {
    display: block;
    width: 250px; /* 固定宽度，避免文件名过长撑开 */
    white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 超出部分用省略号表示 */
    color: #555;
}

input[type="file"] {
    display: none; /* 隐藏默认文件选择框 */
}

.button_upload {
    background-color: #ccc;
    color: white;
    padding: 15px 30px;
    font-size: 18px;
    border: none;
    border-radius: 5px;
    cursor: not-allowed;
    margin-top: 60px;
    width: 100%;

}

.button_upload:hover {
    cursor: pointer;
    background-color: cadetblue;
}

.result-links {
    width: 100%;
    padding: 15px;
    font-size: 14px;
    color: lightslategrey;
    line-height: 3;

}

#countdown {
    color: orangered;
}

.result-links a {
    color: dodgerblue;
    text-decoration: none;
}


.register-link {
    display: flex;
    justify-content: space-between; /* 左右对齐 */
    align-items: center; /* 垂直居中 */
    padding: 10px 0; /* 可选：上下内边距 */
}

.left-link {
    text-align: left;
}

.right-link {
    text-align: right;
}

.button-container {
    display: flex; /* 使用 flex 布局 */
    gap: 10px; /* 按钮之间的间距 */
    justify-content: space-evenly; /* 使按钮居中显示 */
}

button {
    background-color: #006f8b;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    width: 130px;

}

button.sec_btn {
    padding: 10px;
    background-color: #006f8b;
    color: white;
    border: none;
    border-radius: 5px;
    width: 130px;
    text-align: center;
}

button.sec_btn:hover {
    background-color: #258193;
}

button:hover {
    background-color: #258297;
}

footer {
    width: 100%;
    text-align: center;
    color: gray;
    background-color: #f1f1f1;
    padding: 10px 0;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999; /* 确保位于最底层 */
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    font-size: 11px;
    line-height: 2;
}

footer a {
    color: gray;
    text-decoration: none;
    transition: color 0.3s ease-in;
}

footer a:hover {
    color: dimgray;
}