/* 基础重置：统一浏览器默认样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body {
    background-color: #f0f2f5;
    color: #333;
    line-height: 1.6;
    font-size: 14px; /* 移动端基础字体大小 */
}


	/* 补充按钮基础样式 */
.bg-blue-600 { background-color: #2563eb; }
.text-white { color: #ffffff; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.rounded-md { border-radius: 0.375rem; }
.hover\:bg-blue-700:hover { background-color: #1d4ed8; }
.transition { transition: background-color 0.2s; }


/* 容器：适配所有屏幕宽度 */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 12px; /* 移动端缩小内边距，增加可用空间 */
}

/* 头部样式：适配移动端垂直布局 */
header {
    background-color: #165dff;
    color: white;
    padding: 12px 0; /* 移动端减少上下padding，避免过高 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-content {
    display: flex;
    flex-direction: column; /* 移动端默认垂直排列 */
    align-items: flex-start; /* 标题居左，符合移动端阅读习惯 */
    gap: 8px; /* 标题与版本信息间距 */
}

/* 桌面端头部恢复水平布局 */
@media (min-width: 768px) {
    .header-content {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 0;
    }
}

.header-content h1 {
    font-size: 18px; /* 移动端缩小标题字体 */
    font-weight: 600;
    display: flex;
    align-items: center;
}

/* 桌面端标题放大 */
@media (min-width: 768px) {
    .header-content h1 {
        font-size: 22px;
    }
}

.header-content i {
    margin-right: 8px; /* 移动端缩小图标与文字间距 */
    font-size: 18px; /* 移动端图标缩小 */
}

/* 桌面端图标放大 */
@media (min-width: 768px) {
    .header-content i {
        margin-right: 10px;
        font-size: 20px;
    }
}

/* 版本信息：适配移动端 */
.version-info {
    text-align: left; /* 移动端居左，避免右侧留白 */
    font-size: 12px; /* 移动端进一步缩小版本字体 */
    color: rgba(255, 255, 255, 0.9); /* 稍微降低亮度，不抢标题焦点 */
    line-height: 1.4;
}

/* 桌面端版本信息居右 */
@media (min-width: 768px) {
    .version-info {
        text-align: right;
        font-size: 0.875rem;
        color: #ffffff;
    }
}

.version-info span {
    display: inline-block; /* 移动端同行显示，节省空间 */
    margin-right: 8px; /* 同行间距 */
}

/* 桌面端版本信息分行 */
@media (min-width: 768px) {
    .version-info span {
        display: block;
        margin-right: 0;
    }
}

/* 主内容区：移动端调整内边距 */
main {
    padding: 18px 0; /* 移动端减少上下padding */
}

/* 桌面端增加内边距 */
@media (min-width: 768px) {
    main {
        padding: 25px 0;
    }
}

/* 页脚样式：适配移动端 */
footer {
    background-color: #1d2129;
    color: #c9cdD4;
    text-align: center;
    padding: 15px 0; /* 移动端减少padding */
    margin-top: 30px; /* 移动端缩小与主内容间距 */
    font-size: 12px; /* 移动端缩小字体 */
}

/* 桌面端页脚恢复 */
@media (min-width: 768px) {
    footer {
        padding: 20px 0;
        margin-top: 40px;
        font-size: 14px;
    }
}

/* 通用卡片容器：移动端优化 */
.card {
    background: white;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    padding: 15px; /* 移动端减少内边距 */
    margin-bottom: 15px; /* 移动端缩小卡片间距 */
}

/* 桌面端卡片恢复 */
@media (min-width: 768px) {
    .card {
        padding: 20px;
        margin-bottom: 20px;
    }
}

/* 搜索区域：移动端垂直堆叠 */
.search-box h2 {
    font-size: 24px; /* 移动端缩小标题 */
    margin-bottom: 12px; /* 移动端减少间距 */
    color: #1d2129;
    text-align: center; /* 移动端标题居中，更醒目 */
}

/* 桌面端搜索标题恢复 */
@media (min-width: 768px) {
    .search-box h2 {
        font-size: 36px;
        margin-bottom: 15px;
        text-align: left;
    }
}

.search-form {
    display: flex;
    flex-direction: column; /* 移动端垂直排列表单元素 */
    gap: 10px; /* 元素间距统一 */
    align-items: stretch; /* 移动端表单元素占满宽度 */
}

/* 桌面端搜索表单水平排列 */
@media (min-width: 768px) {
    .search-form {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }
}

.search-input {
    flex: 1;
    min-width: 100%; /* 移动端输入框占满宽度 */
    padding: 10px 12px; /* 增加输入框高度，方便手机点击 */
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    font-size: 14px;
}

/* 桌面端输入框最小宽度限制 */
@media (min-width: 768px) {
    .search-input {
        min-width: 240px;
    }
}

.search-input:focus {
    outline: none;
    border-color: #165dff;
    box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.2);
}

/* 搜索类型下拉框：移动端优化点击区域 */
.search-type-select {
    height: 42px; /* 增加高度，方便手机点击 */
    padding: 0 32px 0 12px;
    font-size: 14px;
    color: #333;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 4px;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* 自定义箭头：适配移动端尺寸 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%236c757d' d='M207 381.5L12.7 187.1c-9.4-9.4-9.4-24.6 0-33.9l22.7-22.7c9.4-9.4 24.5-9.4 33.9 0l154.7 154 154.7-154c9.4-9.4 24.5-9.4 33.9 0l22.7 22.7c9.4 9.4 9.4 24.6 0 33.9L241 381.5c-9.4 9.3-24.6 9.3-34 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px; /* 移动端箭头稍大，更易识别 */
    transition: border-color .2s, box-shadow .2s;
}

/* 按钮样式：移动端放大点击区域 */
.btn {
    padding: 11px 18px; /* 增加按钮高度，方便手机点击 */
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center; /* 按钮文字居中 */
    gap: 6px;
    transition: background-color 0.2s;
}

/* 桌面端按钮恢复 */
@media (min-width: 768px) {
    .btn {
        padding: 9px 18px;
    }
}

.btn-primary {
    background-color: #165dff;
    color: white;
}

.btn-primary:hover {
    background-color: #0e42d2;
}

.btn-secondary {
    background-color: #f2f3f5;
    color: #4e5969;
}

.btn-secondary:hover {
    background-color: #e5e6eb;
}

/* 搜索结果信息：移动端优化 */
.search-stats {
    margin-top: 10px;
    font-size: 12px; /* 移动端缩小字体 */
    color: #86909c;
    text-align: center; /* 移动端居中显示 */
}

/* 桌面端搜索统计居左 */
@media (min-width: 768px) {
    .search-stats {
        margin-top: 12px;
        font-size: 14px;
        text-align: left;
    }
}

/* 表格容器：确保移动端横向滚动 */
.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* 移动端平滑滚动 */
    margin-bottom: 10px;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px; /* 确保小屏幕可滚动，不挤压内容 */
}

.data-table th,
.data-table td {
    padding: 10px 12px; /* 移动端减少单元格内边距 */
    text-align: left;
    border-bottom: 1px solid #f2f3f5;
}

/* 桌面端表格恢复 */
@media (min-width: 768px) {
    .data-table th,
    .data-table td {
        padding: 11px 15px;
    }
}

.data-table th {
    background-color: #f7f8fa;
    font-weight: 600;
    font-size: 12px; /* 移动端表头字体缩小 */
    color: #4e5969;
}

/* 桌面端表头字体恢复 */
@media (min-width: 768px) {
    .data-table th {
        font-size: 13px;
    }
}

.data-table tbody tr:nth-child(even) {
    background-color: #f7f8fa;
}

.data-table tbody tr:hover {
    background-color: #f0f7ff;
}

.data-table td {
    font-size: 12px; /* 移动端表格内容字体缩小 */
    max-width: 150px; /* 移动端减少单元格最大宽度，避免文字溢出 */
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* 桌面端表格内容恢复 */
@media (min-width: 768px) {
    .data-table td {
        font-size: 14px;
        max-width: 220px;
    }
}

/* 分页样式：移动端优化 */
.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* 移动端分页居中 */
    align-items: center;
    padding: 10px 12px; /* 移动端减少内边距 */
    background-color: #f7f8fa;
    border-top: 1px solid #f2f3f5;
    margin-top: 5px;
    gap: 8px; /* 分页元素间距 */
}

/* 桌面端分页居左右 */
@media (min-width: 768px) {
    .pagination {
        justify-content: space-between;
        padding: 12px 15px;
        gap: 0;
    }
}

.pagination-info {
    font-size: 12px; /* 移动端缩小字体 */
    color: #86909c;
    margin-bottom: 8px; /* 移动端信息区下移，避免遮挡 */
}

/* 桌面端分页信息恢复 */
@media (min-width: 768px) {
    .pagination-info {
        font-size: 13px;
        margin-bottom: 0;
    }
}

.pagination-links {
    display: flex;
    gap: 5px;
}

.page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; /* 移动端放大页码按钮，方便点击 */
    height: 32px; /* 与宽度一致，保持圆形 */
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    text-decoration: none;
    color: #4e5969;
    font-size: 13px;
}

/* 桌面端页码按钮恢复 */
@media (min-width: 768px) {
    .page-link {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }
}

.page-link:hover {
    border-color: #165dff;
    color: #165dff;
}

.page-link.active {
    background-color: #165dff;
    color: white;
    border-color: #165dff;
}

.page-link.disabled {
    color: #c9cdD4;
    cursor: not-allowed;
}

.page-link.disabled:hover {
    border-color: #d9d9d9;
    color: #c9cdD4;
}

/* 无数据提示：移动端优化 */
.no-data {
    text-align: center;
    padding: 30px 15px; /* 移动端减少内边距 */
    color: #86909c;
}

/* 桌面端无数据提示恢复 */
@media (min-width: 768px) {
    .no-data {
        padding: 40px 20px;
    }
}

.no-data i {
    font-size: 36px; /* 移动端缩小图标 */
    margin-bottom: 12px; /* 移动端减少间距 */
    opacity: 0.7;
}

/* 桌面端图标恢复 */
@media (min-width: 768px) {
    .no-data i {
        font-size: 48px;
        margin-bottom: 15px;
    }
}

.no-data h3 {
    font-size: 16px; /* 移动端缩小标题 */
    margin-bottom: 6px; /* 移动端减少间距 */
    color: #1d2129;
}

/* 桌面端标题恢复 */
@media (min-width: 768px) {
    .no-data h3 {
        font-size: 17px;
        margin-bottom: 8px;
    }
}

/* 居中更新提示：适配移动端 */
.update-notice-container {
    display: flex;
    justify-content: center;
    margin: 15px 0; /* 移动端减少上下间距 */
    padding: 0 12px; /* 移动端增加左右内边距，避免提示框贴边 */
}

.update-notice {
    background-color: #fff3cd;
    border-left: 4px solid #ffc107;
    padding: 10px 15px; /* 移动端减少内边距 */
    border-radius: 4
}

/* ---------------------- Flag标题链接美化 ---------------------- */
.flag-title-link {
    /* 基础样式：蓝色主色调，符合链接认知 */
    color: #165dff;
    text-decoration: none; /* 移除默认下划线，hover时显示 */
    font-weight: 500; /* 标题加粗，突出可点击性 */
    padding: 2px 0; /* 增加点击区域高度 */
    position: relative; /* 用于自定义下划线定位 */
    transition: all 0.25s ease; /* 所有动画统一过渡，更流畅 */
    display: inline-block; /* 确保padding生效，且支持换行 */
    max-width: 100%; /* 适应单元格宽度 */
/*     word-break: break-all; 极端长标题强制换行，避免撑破表格 */
}

/* 1. 鼠标hover效果：颜色加深 + 下划线 + 轻微上浮 */
.flag-title-link:hover {
    color: #0e42d2; /* 深蓝色，比默认色深20%，增强交互反馈 */
    transform: translateY(-1px); /* 轻微上浮，模拟"抬起"效果 */
}

/* 2. 自定义下划线：hover时从左到右渐显（比默认下划线更精致） */
.flag-title-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0; /* 初始宽度0，hover时展开 */
    height: 1.5px; /* 下划线粗细，比默认细，更精致 */
    background-color: #165dff; /* 下划线颜色与文字一致 */
    transition: width 0.25s ease; /* 下划线展开动画 */
}

.flag-title-link:hover::after {
    width: 100%; /* hover时下划线展开为100%宽度 */
}

/* 3. 点击激活状态：避免重复点击误操作 */
.flag-title-link:active {
    transform: translateY(0); /* 点击时回落，模拟"按下"反馈 */
    color: #0a36a8; /* 颜色进一步加深，区分hover和active */
}

/* 4. 移动端适配：调整字体大小和截断长度 */
@media (max-width: 600px) {
    .flag-title-link {
        font-size: 13px; /* 移动端字体缩小，节省空间 */
    }
    /* 移动端表格内标题截断更短，避免换行过多 */
    .flag-title-link,
    .flag-title-link span {
        display: -webkit-box;
        -webkit-line-clamp: 5; /* 最多显示2行 */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal; /* 允许换行，显示2行 */
    }
}

/* 5. 表格hover时同步高亮标题链接（增强行感知） */
.data-table tbody tr:hover .flag-title-link {
    color: #0e42d2; /* 行hover时，标题提前变深 */
}
.data-table tbody tr:hover .flag-title-link::after {
    width: 100%; /* 行hover时，下划线提前展开 */
}

/* ---------------------- 辅助：字段截断统一样式 ---------------------- */
/* 确保所有字段超长内容截断样式一致，避免布局混乱 */
.data-table td {
    /* 原有样式保留，新增以下内容 */
    vertical-align: middle; /* 内容垂直居中，对齐标题链接 */
}


/* 详情表格标题样式 - 分散对齐 */
.detail-table th.detail-label {
	text-align: justify;          /* 文本分散对齐 */
	text-justify: distribute-all-lines; /* 所有行都分散对齐 */
	text-align-last: justify;     /* 最后一行也分散对齐 */
	width: 120px;                 /* 固定宽度有助于对齐效果 */
	padding: 8px 12px;            /* 适当内边距 */
}

/* 链接和地址显示样式 */
.writeup-content a {
	color: #2563eb;
	text-decoration: underline;
}

.link-url {
	display: block;
	font-size: 0.875em;
	color: #64748b;
	margin: 0.25em 0 0.5em 1em;
	word-break: break-all;
}

/* 页面URL链接样式 */
.page-url-link {
	color: #2563eb;
	text-decoration: underline;
}

.page-url-link:hover {
	color: #1d4ed8;
	text-decoration: none;
}