/* ====================================================== */
/* 全局样式重置 · 作用：统一所有浏览器默认样式，避免错位 */
/* ====================================================== */
* {
    margin: 0;                /* 清除所有标签默认外边距 */
    padding: 0;               /* 清除所有标签默认内边距 */
    box-sizing: border-box;   /* 内减盒模型 · padding不会撑大盒子 */
    font-family: "Microsoft YaHei", sans-serif; /* 全局统一字体：微软雅黑 */
}

/* body 页面整体样式 */
body {
    background-color: #f5f7fa; /* 设置页面全局背景色：浅灰色 */
    line-height: 1.5;          /* 设置文字行高 · 让阅读更舒服 */
}

/* 页面顶部蓝色标题栏 · 所有页面共用 */
header {
    background: #409eff;    /* 设置头部背景色：主题蓝色 */
    color: #fff;            /* 设置头部文字颜色：白色 */
    padding: 1.8rem;        /* 设置内边距 · 控制头部高度 */
    text-align: center;     /* 让头部文字水平居中 */
}

/* 顶部日期展示区域 · 所有页面共用 */
.time-outside {
    text-align: center;     /* 日期文字居中 */
    margin: 20px 0;         /* 上下外边距20px · 与其他区域拉开距离 */
    font-size: 16px;        /* 日期文字大小16px */
    color: #666;            /* 日期文字颜色：柔和灰色 */
}

/* ====================================================== */
/* 首页左侧卡片样式 · 系统介绍、常见故障模块使用 */
/* ====================================================== */
.left-card {
    background: #ffffff;                    /* 卡片背景色：白色 */
    border-radius: 14px;                    /* 卡片圆角：14px */
    padding: 28px;                          /* 卡片内部留白 */
    border: 1px solid #e8f1fb;              /* 卡片淡蓝色细边框 */
    box-shadow: 0 6px 18px rgba(64,158,255,0.08); /* 卡片轻微阴影 */
    transition: all 0.3s ease;              /* 鼠标悬浮过渡动画0.3秒 */
    margin-bottom: 24px;                    /* 卡片底部间距 */
}

/* 左侧卡片标题样式 —— 已缩小字号、缩减间距 */
.left-card h2 {
    font-size: 18px;         /* 标题字体再缩小 */
    color: #2c3e50;                         /* 标题颜色：深灰色 */
    border-left: 4px solid #409eff;         /* 标题左侧蓝色竖线装饰 */
    padding-left: 12px;                     /* 标题左边内边距 */
    margin-bottom: 8px;    /* 标题与列表间距大幅缩小 */
    display: inline-block;                  /* 让标题可与按钮在同一行 */
    margin-right: 15px;                     /* 标题与按钮之间的距离 */
}

/* 卡片列表样式 */
.left-card ul {
    margin: 10px 25px;                      /* 列表整体外边距缩小 */
}

/* 卡片列表每一行的样式 —— 已缩小字体、收紧行间距 */
.left-card li {
    font-size: 13px;         /* 字体继续缩小 */
    color: #555;                            /* 列表文字颜色：中灰色 */
    line-height: 1.5;       /* 行高极度收紧 */
    list-style: none;                       /* 去掉默认小圆点 */
    position: relative;                     /* 相对定位 · 用于自定义圆点 */
    padding-left: 18px;                     /* 左边留出空位放圆点 */
    margin-bottom: 1px;     /* 条目之间间距缩到最小 */
}

/* 自定义列表前的蓝色小圆点 */
.left-card li::before {
    content: "•";                           /* 显示圆点符号 */
    color: #409eff;                        /* 圆点颜色：主题蓝 */
    font-weight: bold;                      /* 圆点加粗 */
    position: absolute;                     /* 绝对定位 */
    left: 0;                                /* 放在最左侧 */
}

/* 首页常见故障标题（可点击）—— 缩小字体、缩减间距 */
.left-card .faq-question {
    font-weight: 600;                       /* 文字加粗 */
    color: #2c3e50;                         /* 文字颜色：深灰 */
    margin-bottom: 2px;     /* 间距缩到最小 */
    display: inline-block;                  /* 可与时间同行显示 */
    cursor: pointer;                        /* 鼠标放上去变成手型 */
    text-decoration: none;                  /* 去掉下划线 */
    max-width: 70%;                         /* 最大宽度70% · 避免与时间重叠 */
    font-size: 13px;          /* 字体缩小 */
}

/* 鼠标悬浮在故障标题上时 */
.left-card .faq-question:hover {
    color: #409eff;                        /* 文字变蓝色 */
    text-decoration: underline;             /* 显示下划线 */
}

/* 故障录入时间样式 —— 缩小字号、收紧间距 */
.faq-time {
    font-size: 10px;         /* 时间字体最小化 */
    color: #999;                            /* 时间文字颜色：浅灰 */
    margin-left: 18px;                     /* 与标题左边距离 */
    margin-bottom: 2px;     /* 底部间距缩到最小 */
    display: inline-block;                  /* 可与标题同行 */
    float: right;                           /* 向右对齐 */

}

/* 卡片内普通段落文字 */
.left-card p {
    color: #666;                            /* 文字颜色：灰色 */
    margin-top: 20px;                       /* 顶部距离 */
    line-height: 1.8;                       /* 行高 */
    display: block;                         /* 独占一行 */
    clear: both;                            /* 清除浮动 · 防止错位 */
}

/* 数据库错误提示框样式 */
.db-error {
    color: #f56c6c;                        /* 错误文字：红色 */
    background: #fef0f0;                    /* 错误背景：浅红色 */
    padding: 10px;                          /* 内边距 */
    border-radius: 8px;                     /* 圆角 */
    margin-bottom: 15px;                    /* 底部距离 */
    font-size: 14px;                        /* 文字大小 */
    text-align: center;                     /* 文字居中 */
    border: 1px solid #f56c6c;              /* 红色边框 */
    clear: both;                            /* 清除浮动 */
}

/* ====================================================== */
/* 通用按钮样式 · 跳转、返回按钮共用 */
/* ====================================================== */
.jump-btn, .back-btn {
    display: inline-block;                  /* 行内块 · 可设置宽高 */
    padding: 10px 20px;                     /* 按钮内边距 */
    background: linear-gradient(135deg,#409eff,#66b1ff); /* 按钮渐变背景 */
    color: #fff;                            /* 文字白色 */
    border: none;                           /* 去掉边框 */
    border-radius: 10px;                    /* 按钮圆角 */
    cursor: pointer;                        /* 鼠标变手型 */
    font-size: 14px;                        /* 文字大小 */
    font-weight: 500;                       /* 文字加粗 */
    text-decoration: none;                  /* 去掉下划线 */
    transition: all 0.3s;                   /* 过渡动画0.3秒 */
}

/* 新增：故障信息录入按钮 靠右对齐 */
.left-card .jump-btn {
    float: right;           /* 按钮整体右浮动靠右 */
    margin-top: 5px;        /* 顶部微调间距，和标题对齐 */
}

/* 按钮悬浮效果 */
.jump-btn:hover, .back-btn:hover {
    background: linear-gradient(135deg,#338eef,#55a4f8); /* 加深渐变 */
    box-shadow: 0 4px 12px rgba(64,158,255,0.2); /* 悬浮阴影 */
}

/* ====================================================== */
/* 搜索框模块样式 · 首页专用 */
/* ====================================================== */
.search-container {
    margin: 20px 0 25px;                     /* 搜索框上下距离 */
    clear: both;                            /* 清除浮动 */
    display: flex;                          /* 弹性布局 · 一行排列 */
    gap: 12px;                              /* 输入框与按钮间距 */
    align-items: center;                     /* 垂直居中 */
    width: 100%;                            /* 宽度100% */
}

/* 搜索输入框 */
.search-input {
    flex: 1;                                /* 自动占满剩余宽度 */
    padding: 12px 18px;                     /* 内边距 */
    border: 1px solid #e1e6eb;              /* 灰色边框 */
    border-radius: 12px;                    /* 圆角 */
    font-size: 14px;                        /* 文字大小 */
    outline: none;                          /* 去掉选中时的外框 */
    transition: all 0.3s ease;              /* 过渡动画 */
    background-color: #f8f9fa;              /* 浅灰色背景 */
}

/* 搜索框获得焦点时 */
.search-input:focus {
    border-color: #409eff;                  /* 边框变蓝色 */
    box-shadow: 0 0 0 4px rgba(64,158,255,0.12); /* 蓝色光晕 */
    background-color: #fff;                 /* 背景变白 */
}

/* 搜索按钮 */
.search-btn {
    padding: 12px 22px;                     /* 内边距 */
    background: linear-gradient(135deg,#409eff,#66b1ff); /* 渐变背景 */
    color: #fff;                            /* 文字白色 */
    border: none;                           /* 无边框 */
    border-radius: 12px;                    /* 圆角 */
    cursor: pointer;                        /* 手型 */
    font-size: 14px;                        /* 文字大小 */
    font-weight: 500;                       /* 加粗 */
    transition: all 0.3s ease;              /* 动画 */
    display: flex;                          /* 弹性布局 */
    align-items: center;                     /* 垂直居中 */
    justify-content: center;                /* 水平居中 */
    gap: 6px;                               /* 图标与文字间距 */
}

/* 搜索按钮悬浮 */
.search-btn:hover {
    background: linear-gradient(135deg,#338eef,#55a4f8); /* 加深渐变 */
    box-shadow: 0 4px 12px rgba(64,158,255,0.2); /* 阴影 */
    transform: translateY(-1px);            /* 向上轻微浮动 */
}

/* 搜索提示文字 */
.search-tip {
    color: #666;                            /* 灰色 */
    font-size: 13px;                        /* 13px字号 */
    margin-bottom: 15px;                    /* 底部距离 */
    text-align: left;                       /* 左对齐 */
    padding-left: 4px;                      /* 左内边距 */
}

/* 清空搜索按钮 */
.clear-btn {
    padding: 12px 18px;                     /* 内边距 */
    background-color: #f8f9fa;              /* 浅灰背景 */
    color: #666;                            /* 灰色文字 */
    border: 1px solid #e1e6eb;              /* 灰色边框 */
    border-radius: 12px;                    /* 圆角 */
    cursor: pointer;                        /* 手型 */
    font-size: 14px;                        /* 字号 */
    transition: all 0.3s ease;              /* 动画 */
}

/* 清空按钮悬浮效果 */
.clear-btn:hover {
    background-color: #f1f3f5;              /* 背景加深 */
    border-color: #dde3ec;                  /* 边框加深 */
    color: #333;                            /* 文字变深 */
}

/* 输入框占位符统一样式 */
::-webkit-input-placeholder { color:#999; font-size:13px; }
:-moz-placeholder { color:#999; font-size:13px; opacity:1; }
::-moz-placeholder { color:#999; font-size:13px; opacity:1; }
:-ms-input-placeholder { color:#999; font-size:13px; }

/* ====================================================== */
/* 页面底部 · 页脚样式 */
/* ====================================================== */
footer {
    background: #409eff;                    /* 背景：主题蓝 */
    color: #fff !important;                 /* 文字：白色 */
    text-align: center;                     /* 居中 */
    padding: 1.0rem;                        /* 内边距 */
    margin-top: 30px;                       /* 顶部距离 */
}

/* 底部文字 & 链接 */
footer p, footer a {
    color: #fff !important;                 /* 强制白色 */
    text-decoration: none;                  /* 无下划线 */
    font-size: 12px;                        /* 字号12px */
    line-height: 1.0;                       /* 行高 */
}

/* 底部链接悬浮 */
footer a:hover {
    text-decoration: underline;             /* 显示下划线 */
}

/* ====================================================== */
/* 首页左右布局 */
/* ====================================================== */
.content-row {
    display: flex;                          /* 弹性布局 · 一行排列左右 */
    gap: 30px;                              /* 左右间距30px */
    max-width: 1200px;                      /* 页面最大宽度 */
    margin: 0 auto;                         /* 页面居中 */
    padding: 0 20px;                        /* 左右留白 */
}

/* 左侧内容区 */
.left-area {
    flex: 2;                                /* 占2份宽度 */
}

/* 右侧内容区 */
.right-area {
    flex: 1;                                /* 占1份宽度 */
    display: flex;                          /* 内部垂直排列 */
    flex-direction: column;                 /* 纵向布局 */
    gap: 40px;                              /* 卡片间距 */
}

/* ====================================================== */
/* 管理员登录卡片 */
/* ====================================================== */
.login-card {
    background:#fff;                        /* 白色背景 */
    padding: 22px 20px;                     /* 内边距 */
    border-radius:16px;                    /* 圆角 */
    box-shadow:0 8px 25px rgba(64,158,255,0.12); /* 阴影 */
    border:1px solid #edf4fc;              /* 淡蓝边框 */
}

/* 登录标题 */
.login-card .title {
    font-size: 20px;                        /* 字号20px */
    font-weight: bold;                      /* 加粗 */
    color:#2c3e50;                         /* 深灰文字 */
    text-align: center;                     /* 居中 */
    margin-bottom:18px;                    /* 底部距离 */
    position:relative;                     /* 相对定位 */
}

/* 登录标题下方蓝色横线 */
.login-card .title::after {
    content:"";                            /* 空内容 */
    width:50px;                            /* 横线宽度 */
    height:3px;                            /* 横线高度 */
    background:#409eff;                    /* 蓝色 */
    position:absolute;                     /* 绝对定位 */
    left:50%;                              /* 水平居中 */
    transform:translateX(-50%);            /* 居中修正 */
    bottom:-6px;                           /* 放在文字下方 */
    border-radius:2px;                     /* 圆角 */
}

/* 登录输入框 */
.login-card input {
    width:100%;                            /* 宽度100% */
    padding:11px 14px;                     /* 内边距 */
    margin:10px 0;                         /* 上下距离 */
    border:1px solid #dde3ec;              /* 灰色边框 */
    border-radius:10px;                    /* 圆角 */
    font-size:14px;                        /* 字号 */
    transition:all 0.3s;                   /* 动画 */
    outline:none;                          /* 无外框 */
}

/* 输入框焦点 */
.login-card input:focus {
    border-color:#409eff;                  /* 蓝色边框 */
    box-shadow:0 0 0 3px rgba(64,158,255,0.15); /* 光晕 */
}

/* 登录按钮 */
.login-card button {
    width:100%;                            /* 宽度100% */
    padding:11px;                          /* 内边距 */
    margin-top:8px;                        /* 顶部距离 */
    background:linear-gradient(135deg,#409eff,#66b1ff); /* 渐变 */
    color:#fff;                            /* 白色文字 */
    border:none;                           /* 无边框 */
    border-radius:10px;                    /* 圆角 */
    cursor:pointer;                        /* 手型 */
    font-size:15px;                        /* 字号 */
    font-weight:500;                       /* 加粗 */
    transition:all 0.3s;                   /* 动画 */
}

/* 登录按钮悬浮 */
.login-card button:hover {
    background:linear-gradient(135deg,#338eef,#55a4f8); /* 加深渐变 */
    box-shadow:0 6px 15px rgba(64,158,255,0.25); /* 阴影 */
}

/* 登录错误提示 */
.login-error {
    color:#f56c6c;                         /* 红色文字 */
    text-align:center;                     /* 居中 */
    font-size:13px;                        /* 字号 */
    background:#fef0f0;                    /* 浅红背景 */
    padding:6px;                           /* 内边距 */
    border-radius:8px;                     /* 圆角 */
    margin-bottom:12px;                    /* 底部距离 */
}

/* ====================================================== */
/* 右侧公告卡片 */
/* ====================================================== */
.right-card {
    background:#fff;                        /* 白色背景 */
    padding:25px;                          /* 内边距 */
    border-radius:16px;                    /* 圆角 */
    box-shadow:0 8px 25px rgba(64,158,255,0.12); /* 阴影 */
    border:1px solid #edf4fc;              /* 边框 */
}

/* 公告标题 */
.right-card .title {
    font-size:20px;                        /* 字号 */
    font-weight:bold;                      /* 加粗 */
    margin-bottom:20px;                    /* 底部距离 */
    text-align:center;                     /* 居中 */
    color:#2c3e50;                         /* 深灰 */
}

/* 公告列表行 */
.notice-list li {
    list-style:none;                       /* 无默认点 */
    line-height:2.2;                       /* 行高 */
    border-bottom:1px dashed #eee;         /* 底部虚线 */
	font-size:13px;                        /* 字号 */
}

/* ====================================================== */
/* 故障录入页面卡片 */
/* ====================================================== */
.input-card {
    background:#fff;                       /* 白色背景 */
    border-radius:14px;                    /* 圆角 */
    padding:28px;                          /* 内边距 */
    border:1px solid #e8f1fb;              /* 边框 */
    box-shadow:0 6px 18px rgba(64,158,255,0.08); /* 阴影 */
    max-width:800px;                       /* 最大宽度 */
    margin:20px 20px 0 auto;               /* 靠右显示 */
}

/* 录入页标题 */
.input-card h2 {
    font-size:22px;                        /* 字号 */
    color:#2c3e50;                         /* 深灰 */
    border-left:4px solid #409eff;         /* 左侧蓝线 */
    padding-left:12px;                     /* 左内边距 */
    margin-bottom:18px;                    /* 底部距离 */
    text-align:left;                       /* 左对齐 */
}

/* 录入页说明文字 */
.input-card p {
    color:#666;                            /* 灰色 */
    margin-bottom:20px;                    /* 底部距离 */
    line-height:1.8;                       /* 行高 */
}

/* 数据库提示框 */
.db-table-desc {
    background:#f8f9fa;                    /* 浅灰背景 */
    padding:15px;                          /* 内边距 */
    border-radius:10px;                    /* 圆角 */
    margin-bottom:25px;                    /* 底部距离 */
    border:1px solid #e6e9ed;              /* 边框 */
}

/* 提示框标题 */
.db-table-desc h3 {
    color:#2c3e50;                         /* 深灰 */
    font-size:18px;                        /* 字号 */
    margin-bottom:10px;                    /* 底部距离 */
}

/* 提示框文字 */
.db-table-desc p {
    margin-bottom:8px;                     /* 底部距离 */
    font-size:14px;                        /* 字号 */
    color:#555;                            /* 灰色 */
}

/* 代码块样式 */
pre {
    background:#f5f5f5;                    /* 背景 */
    padding:12px;                          /* 内边距 */
    border-radius:8px;                     /* 圆角 */
    overflow-x:auto;                       /* 横向滚动 */
    font-size:13px;                        /* 字号 */
    color:#333;                            /* 颜色 */
    margin:10px 0;                         /* 上下距离 */
}

/* ====================================================== */
/* 录入表单样式 */
/* ====================================================== */
.input-form {
    width:100%;                            /* 宽度100% */
}

/* 表单项间距 */
.form-group {
    margin-bottom:20px;                    /* 底部距离 */
}

/* 表单标签 */
.form-group label {
    display:block;                         /* 独占一行 */
    margin-bottom:8px;                     /* 底部距离 */
    font-size:15px;                        /* 字号 */
    color:#333;                            /* 颜色 */
    font-weight:500;                       /* 加粗 */
}

/* 输入框 & 文本域 */
.form-group input,
.form-group textarea {
    width:100%;                            /* 宽度100% */
    padding:12px 15px;                     /* 内边距 */
    border:1px solid #dde3ec;              /* 边框 */
    border-radius:10px;                    /* 圆角 */
    font-size:14px;                        /* 字号 */
    transition:all 0.3s;                   /* 动画 */
    outline:none;                          /* 无外框 */
}

/* 输入框焦点 */
.form-group input:focus,
.form-group textarea:focus {
    border-color:#409eff;                  /* 蓝色边框 */
    box-shadow:0 0 0 3px rgba(64,158,255,0.15); /* 光晕 */
}

/* 文本域 */
.form-group textarea {
    min-height:120px;                      /* 最小高度 */
    resize:vertical;                       /* 仅允许垂直拉伸 */
    line-height:1.6;                       /* 行高 */
}

/* 上传按钮 */
.form-group .upload-btn {
    display:inline-block;                  /* 行内块 */
    padding:10px 18px;                     /* 内边距 */
    background:#f2f2f2;                    /* 背景 */
    color:#333;                            /* 颜色 */
    border:1px solid #dde3ec;              /* 边框 */
    border-radius:8px;                     /* 圆角 */
    cursor:pointer;                        /* 手型 */
    font-size:14px;                        /* 字号 */
    margin-top:8px;                        /* 顶部距离 */
}

/* 上传按钮悬浮 */
.form-group .upload-btn:hover {
    background:#e5e7eb;                    /* 背景加深 */
}

/* 上传提示文字 */
.form-group .upload-tip {
    font-size:12px;                        /* 字号 */
    color:#999;                            /* 浅灰 */
    margin-top:8px;                        /* 顶部距离 */
    display:block;                         /* 独占一行 */
}

/* 提交按钮 */
.input-btn {
    flex:1;                                /* 自动宽度 */
    padding:12px;                          /* 内边距 */
    background:linear-gradient(135deg,#409eff,#66b1ff); /* 渐变 */
    color:#fff;                            /* 白色文字 */
    border:none;                           /* 无边框 */
    border-radius:10px;                    /* 圆角 */
    cursor:pointer;                        /* 手型 */
    font-size:15px;                        /* 字号 */
    font-weight:500;                       /* 加粗 */
    transition:all 0.3s;                   /* 动画 */
}

/* 提交按钮悬浮 */
.input-btn:hover {
    background:linear-gradient(135deg,#338eef,#55a4f8); /* 渐变加深 */
    box-shadow:0 6px 15px rgba(64,158,255,0.25); /* 阴影 */
}

/* 按钮组 */
.btn-group {
    display:flex;                          /* 一行排列 */
    gap:15px;                              /* 按钮间距 */
    margin-top:10px;                       /* 顶部距离 */
}

/* 提交提示信息 */
.input-msg {
    text-align:center;                     /* 居中 */
    margin-top:15px;                       /* 顶部距离 */
    font-size:14px;                        /* 字号 */
    padding:8px;                           /* 内边距 */
    border-radius:8px;                     /* 圆角 */
}

/* 成功提示 */
.msg-success {
    color:#67c23a;                         /* 绿色文字 */
    background:#f0f9eb;                    /* 绿色背景 */
}

/* 失败提示 */
.msg-error {
    color:#f56c6c;                         /* 红色文字 */
    background:#fef0f0;                    /* 红色背景 */
}

/* ====================================================== */
/* 故障详情页样式 */
/* ====================================================== */
.detail-card {
    background:#fff;                       /* 白色背景 */
    border-radius:14px;                    /* 圆角 */
    padding:30px;                          /* 内边距 */
    border:1px solid #e8f1fb;              /* 边框 */
    box-shadow:0 6px 18px rgba(64,158,255,0.08); /* 阴影 */
    max-width:800px;                       /* 最大宽度 */
    margin:0 auto;                         /* 居中 */
}

/* 详情页标题 */
.detail-card h2 {
    font-size:24px;                        /* 字号 */
    color:#2c3e50;                         /* 深灰 */
    text-align:center;                     /* 居中 */
    margin-bottom:20px;                    /* 底部距离 */
    padding-bottom:15px;                   /* 底部内边距 */
    border-bottom:1px solid #eee;          /* 底部横线 */
}

/* 详情内容区 */
.detail-content {
    margin:20px 0;                         /* 上下距离 */
}

/* 问题标题 */
.detail-question {
    font-size:18px;                        /* 字号 */
    color:#2c3e50;                         /* 深灰 */
    font-weight:600;                       /* 加粗 */
    margin-bottom:15px;                    /* 底部距离 */
}

/* 答案内容 */
.detail-answer {
    font-size:15px;                        /* 字号 */
    color:#555;                            /* 灰色 */
    line-height:1.8;                       /* 行高 */
    margin-bottom:20px;                    /* 底部距离 */
    text-indent:2em;                       /* 首行缩进2字符 */
}

/* 详情页图片自适应 · 保证图片不超出屏幕 */
.detail-answer img {
    max-width:100%;                        /* 最大宽度100% */
    height:auto;                           /* 高度自动等比 */
}

/* 无图片提示 */
.no-image {
    font-size:14px;                        /* 字号 */
    color:#999;                            /* 浅灰 */
    margin:15px 0;                         /* 上下距离 */
}

/* 返回按钮容器 */
.detail-btn {
    text-align:center;                     /* 居中 */
    margin-top:30px;                       /* 顶部距离 */
}

/* ====================================================== */
/* 首页故障列表 · 极致紧凑缩小版 */
/* ====================================================== */
.faq-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1px;    /* 间距缩到最小 */
    padding: 0;
    border-bottom: 1px dashed #eee;
    font-size: 10px;
    line-height: 1.0;
}

/* ====================================================== */
/* 移动端响应式 · 手机自动适配 */
/* ====================================================== */
@media (max-width:768px) {
    .content-row {
        flex-direction:column;             /* 手机上下排列 */
    }
    .left-card .jump-btn {
        display:block;                     /* 按钮独占一行 */
        margin-top:10px;                   /* 顶部距离 */
        margin-left:auto;                  /* 靠右 */
        margin-right:0;                    /* 靠右 */
        width:fit-content;                 /* 宽度自适应 */
        float:none;                        /* 清除浮动 */
    }
    .search-container {
        flex-direction:column;             /* 搜索框上下排列 */
        align-items:stretch;                /* 宽度100% */
        gap:10px;                          /* 间距 */
    }
    .search-btn, .clear-btn {
        width:100%;                        /* 按钮宽度100% */
    }
    .btn-group {
        flex-direction:column;             /* 录入页按钮上下 */
        gap:10px;                          /* 间距 */
    }
    .input-card {
        padding:20px;                      /* 内边距缩小 */
        margin:20px auto 0;                /* 居中 */
    }
    .detail-card {
        padding:20px;                      /* 内边距缩小 */
    }
    footer p, footer a {
        font-size:11px;                    /* 底部字号缩小 */
    }
    .left-card .faq-question {
        display:block;                     /* 标题一行 */
        max-width:100%;                    /* 宽度100% */
        margin-bottom:4px;                 /* 底部距离 */
    }
    .faq-time {
        float:none;                        /* 清除右浮动 */
        margin-left:18px;                  /* 左边距离 */
    }
}

/* 无数据时提示样式 */
.no-data {
    text-align:center;                     /* 居中 */
    color:#999;                            /* 浅灰 */
    padding:50px 0;                        /* 上下内边距 */
    font-size:16px;                        /* 字号 */
}

/* 提示框3秒自动消失样式 */
.tip {
    padding: 12px 15px;
    border-radius: 4px;
    margin: 15px 0;
    transition: all 0.6s ease;
    opacity: 1;
}
.tip.fade-out {
    opacity: 0;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.tip-success {
    background: #e6ffed;
    color: #2e7d32;
    border: 1px solid #cff2d8;
}
.tip-error {
    background: #fff1f0;
    color: #f56c6c;
    border: 1px solid #ffd2ce;
}
.msg-tip {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 24px;
    background: #333;
    color: #fff;
    border-radius: 6px;
    z-index: 9999;
    display: none;
}
.msg-tip.success {background: #67c23a;}
.msg-tip.error {background: #f56c6c;}