/* ============================================================
   MODERN-UI.CSS - 核心现代布局 (强制覆盖旧版冲突)
   ============================================================ */

:root {
    --primary-color: #3498db;
    --text-main: #2c3e50;
    --text-muted: #64748b;
    --bg-body: #f8fafc;
    --bg-card: #ffffff;
    --radius-lg: 12px;
    --radius-sm: 8px;
    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* 1. 强制重置 base.css 和 m.css 的干扰项 */
/* 针对你图片中出现的灰色方块和错位进行清理 */
.blogs_list,
.blogs_list i,
.blogs_list h2,
.blogs_base,
.blogs_base span,
.blogs_base a {
    background-image: none !important; /* 彻底移除旧的 icon_time.png 等背景图 */
    background-color: transparent !important;
    width: auto !important;
    height: auto !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: static !important;
    border: none !important;
    text-indent: 0 !important; /* 移除旧版的 text-indent */
}

/* 2. 主容器布局 (Flex) */
.main-container {
    display: flex !important;
    gap: 30px;
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 15px;
    align-items: flex-start;
}

.content-area {
    flex: 1 !important;
    min-width: 0;
}

#sideBar {
    flex: 0 0 300px !important;
    display: block !important; /* 覆盖 m.css 可能的 display:none */
}

/* 3. 新闻/文章列表重构 (解决图片中的报错样式) */
.blogs_list {
    display: flex !important;
    background: var(--bg-card) !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    gap: 20px !important;
    transition: transform 0.3s ease;
}

.blogs_list:hover {
    transform: translateY(-3px);
}

/* 图片容器修复 */
.blogs_list > i {
    flex: 0 0 220px !important;
    height: 140px !important;
    display: block !important;
    border-radius: var(--radius-sm) !important;
    overflow: hidden !important;
    background: #e2e8f0 !important; /* 占位色 */
}

.blogs_list > i img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* 文字内容重构 */
.blog-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.blog-content h2 {
    font-size: 1.7rem !important;
    color: var(--text-main) !important;
    margin-bottom: 8px !important;
    font-weight: 600 !important;
    white-space: normal !important; /* 允许标题换行 */
}

.blog-content .summary {
    color: var(--text-muted) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 12px !important;
}

/* 4. 底部元数据 (时间/点击) - 解决图标重叠问题 */
.blogs_base {
    display: flex !important;
    gap: 15px !important;
    align-items: center !important;
}

.blogs_base span {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    color: #94a3b8 !important;
    font-size: 13px !important;
}

/* 强制使用 FontAwesome 图标，不使用旧背景图 */
.blogs_base i {
    color: var(--primary-color) !important;
    font-size: 14px !important;
    display: inline-block !important;
}

/* 5. 小说/专题网格 (Grid) */
.section-novel {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-sm);
}

.novel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 15px;
}

.novel-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    border-radius: var(--radius-sm);
    text-decoration: none !important;
    transition: all 0.2s;
}

.novel-card:hover {
    filter: brightness(0.9);
    transform: scale(1.02);
}

/* 6. 响应式适配 (覆盖 m.css) */
@media (max-width: 992px) {
    .main-container {
        flex-direction: column;
    }
    #sideBar {
        display: none !important; /* <--- 改这里：强制在平板和手机端隐藏侧边栏 */
    }

}

@media (max-width: 640px) {
    .blogs_list {
        flex-direction: column !important;
    }
    .blogs_list > i {
        width: 100% !important;
        height: 180px !important;
    }
    .novel-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
/* 1. 统一全局容器，消除 m.css 的百分比干扰 */
.box, .main-container {
    display: flex !important;
    flex-wrap: wrap; /* 允许必要时换行 */
    width: 100% !important;
    max-width: 1300px !important; /* 设置为你需要的 1300px */
    margin: 0 auto !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
}

/* 2. 修正左侧内容区：强制取消 m.css 中的 68% 或 70% 设置 */
.content-area, .blogs {
    flex: 1 !important; /* 自动占据除侧边栏外的所有剩余宽度 */
    width: auto !important; /* 覆盖旧的百分比宽度 */
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 3. 修正侧边栏：给它一个固定宽度，不再随比例变动 */
#sideBar, .rbox {
    flex: 0 0 300px !important; /* 侧边栏固定 300px */
    width: 300px !important;
    margin-left: 30px !important; /* 与左侧内容的间距 */
    display: block ;
}

/* 4. 确保上方的小说网格容器与下方 Blog 容器完全对齐 */
.section-novel {
    width: 100% !important;
    margin-bottom: 30px !important;
    box-sizing: border-box !important;
}

/* 5. 针对 1300px 以上的大屏幕优化 */
@media screen and (min-width: 1300px) {
    .main-container {
        padding: 0 !important; /* 大屏下取消内边距，让边缘更整齐 */
    }
}
/* 1. 定义统一的对齐标准 */
.header-inner,
.nav-inner,
.main-container {
    width: 100% !important;
    max-width: 1300px !important; /* 统一设为 1300px */
    margin: 0 auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

/* 2. 修复 Header 的原始背景和间距 */
header {
    width: 100% !important;
    height: auto !important; /* 让高度随内容自适应 */
    padding: 20px 0 0 0 !important;
    background: #fff !important;
}

/* 3. 修复导航栏 Nav */
nav {
    margin-top: 20px !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important; /* 确保内容居中 */
}

.nav-inner {
    padding: 0 !important; /* 导航内部通常不需要额外 padding */
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 4. 彻底解决“动态宽度”错位 */
/* 强制左侧内容区域不使用百分比 */
.content-area, .blogs {
    flex: 1 !important;
    width: auto !important;
}

/* 侧边栏保持固定，不参与动态比例计算 */
#sideBar {
    flex: 0 0 300px !important;
    margin-left: 30px !important;
}
/* 1. 强制隐藏模态框，直到被触发 */
.modal {
    display: none !important;
}
.modal.in, .modal.show {
    display: block !important;
}

/* 2. 宽度对齐补丁 */
.header-inner, .nav-container, .main-container {
    max-width: 1300px !important;
    margin: 0 auto !important;
    width: 100% !important;
}

/* 3. 解决 top.html 里的 search 图标不显示的问题 */
.is-search i {
    font-size: 20px;
    color: #fff;
    line-height: 60px;
}
@media only screen and (max-width: 959px) {
    /* 强制显示移动端按钮 */
    #mnavh {
        display: block !important;
        z-index: 1001;
        cursor: pointer;
    }

    /* 初始隐藏菜单列表，等待点击后由 JS 控制显示 */
    #starlist {
        display: none;
        position: absolute;
        top: 40px; /* 根据 header 高度调整 */
        left: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.95);
        z-index: 1000;
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    }

    /* 当按钮处于 open 状态时的样式修正 */
    #mnavh.open .navicon {
        background: none !important;
    }
}

/* ============================================================
   MODERN-UI.CSS - 小说热度排行榜样式
   ============================================================ */

.novel-card {
    position: relative;
    overflow: hidden;
    padding: 20px 10px 15px !important;
    border: 1px solid #edf2f7 !important;
}

/* 热度条基础样式 */
.heat-bar {
    margin-top: 12px;
    font-size: 12px;
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.1);
    padding: 2px 10px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}

/* 🏆 Top 3 专属标识 (通过 JS 动态添加类名) */
.novel-card.is-hot::before {
    content: "HOT";
    position: absolute;
    top: 0;
    right: 0;
    background: #e74c3c;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 8px;
    border-bottom-left-radius: 8px;
    z-index: 2;
}

/* 第一名：流光金 */
.novel-card.top-1 {
    background: linear-gradient(135deg, #fffbf0 0%, #fff2c2 100%) !important;
    border-color: #ffd700 !important;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.2) !important;
}
.novel-card.top-1::after {
    content: "👑";
    position: absolute;
    top: 5px;
    left: 8px;
    font-size: 18px;
}
.novel-card.top-1 .heat-bar { background: #ffeaa7; color: #d35400; }

/* 第二名：质感银 */
.novel-card.top-2 {
    background: linear-gradient(135deg, #f8f9fa 0%, #e2e8f0 100%) !important;
    border-color: #cbd5e1 !important;
}
.novel-card.top-2::after {
    content: "🥈";
    position: absolute;
    top: 5px;
    left: 8px;
    font-size: 18px;
}

/* 第三名：典雅铜 */
.novel-card.top-3 {
    background: linear-gradient(135deg, #fff5f0 0%, #ffedd5 100%) !important;
    border-color: #fdba74 !important;
}
.novel-card.top-3::after {
    content: "🥉";
    position: absolute;
    top: 5px;
    left: 8px;
    font-size: 18px;
}

/* ============================================================
   MODERN-UI.CSS - 小说/盐选版块 (精致紧凑版)
   ============================================================ */

/* 1. 容器：缩小内边距和下边距 */
.section-novel {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    /* 缩小间距 */
    padding: 15px !important; /* 原为 24px */
    margin-bottom: 20px !important; /* 原为 30px */
    box-shadow: var(--shadow-sm);
}

/* 2. 头部：缩小字体和间距 */
.section-header {
    margin-bottom: 12px !important; /* 原为 20px */
    padding-left: 10px !important; /* 原为 15px */
    border-left-width: 3px !important; /* 装饰线条变细 */
}

.section-header .h_title {
    font-size: 1.1rem !important; /* 原为 1.4rem */
    font-weight: 700;
}

.section-header .section-subtitle {
    font-size: 0.8rem !important; /* 原为 0.95rem */
    color: var(--text-muted);
}

/* 3. 网格：缩小卡片最小宽度，让一行容纳更多，缩小间距 */
.novel-grid {
    display: grid;
    /* 卡片最小宽度从 130px 缩至 100px，间距缩至 10px */
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
    gap: 10px !important;
}

/* 4. 卡片基础：缩小内边距 */
.novel-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none !important;
    transition: all 0.2s ease;
    border-radius: var(--radius-sm);
    border: 1px solid #edf2f7;
    /* 核心：显著缩小内边距 */
    padding: 12px 6px 8px !important; /* 顶部/左右/底部 */
}

/* 5. 卡片内元素缩小 */
.novel-icon {
    font-size: 18px !important; /* 原为 24px */
    margin-bottom: 4px !important; /* 原为 8px */
}

.novel-name {
    font-size: 0.85rem !important; /* 原为 0.95rem */
    color: var(--text-main);
    font-weight: 600;
    line-height: 1.2;
    /* 限制两行，防止过长撑大卡片 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 6. 热度条缩小 (保留排行榜功能) */
.heat-bar {
    margin-top: 6px !important; /* 原为 12px */
    font-size: 10px !important; /* 原为 12px */
    padding: 1px 6px !important; /* 变窄 */
    border-radius: 10px;
    gap: 2px !important;
}

/* 🏆 Top 3 专属装饰缩小 */
/* HOT 角标缩小 */
.novel-card.is-hot::before {
    font-size: 9px !important; /* 原为 10px */
    padding: 1px 6px !important; /* 原为 2px 8px */
    border-bottom-left-radius: 6px;
}

/* 皇冠/奖牌图标缩小并调整位置 */
.novel-card.top-1::after,
.novel-card.top-2::after,
.novel-card.top-3::after {
    top: 2px !important; /* 原为 5px */
    left: 4px !important; /* 原为 8px */
    font-size: 14px !important; /* 原为 18px */
}

/* ============================================================
   MODERN-UI.CSS - 侧边栏“人气点击”修复
   ============================================================ */

/* 1. 修复人气点击外层容器 */
.hot_news {
    background: var(--bg-card) !important;
    border-radius: var(--radius-lg) !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
    box-shadow: var(--shadow-sm) !important;
}

/* 2. 重置列表，禁用原生序号，改用伪元素自定义序号 */
.hot_news ol {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important; /* 关掉自带的 1. 2. 3. */
    counter-reset: hot-rank; /* 开启自定义计数器 */
}

/* 3. 每一行使用 Flex 布局 */
.hot_news li {
    display: flex !important;
    justify-content: space-between !important; /* 左右两端对齐 */
    align-items: center !important;
    padding: 12px 0 !important;
    border-bottom: 1px dashed #edf2f7 !important;
    float: none !important;
}

.hot_news li:last-child {
    border-bottom: none !important;
}

/* 4. 左侧链接与标题处理 */
.hot_news li a {
    display: flex !important;
    align-items: center !important;
    flex: 1 !important;
    min-width: 0 !important; /* 这一句极其关键：允许 flex 子元素内部文字截断 */
    text-decoration: none !important;
    color: var(--text-main) !important;
}

/* 强制清除 p 标签带来的多余换行和浮动 */
.hot_news li a p {
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    white-space: nowrap !important; /* 强制不换行 */
    overflow: hidden !important; /* 溢出隐藏 */
    text-overflow: ellipsis !important; /* 显示省略号 */
    font-size: 14px !important;
}

/* 5. 自定义序号前缀 (排版更整齐) */
.hot_news li a::before {
    counter-increment: hot-rank;
    content: counter(hot-rank) "."; /* 输出 1. 2. 3. */
    margin-right: 12px !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    min-width: 18px !important; /* 保证 10以后的数字也对齐 */
    text-align: right !important;
}

/* 6. 右侧点击量数字 */
.hot_news li > span {
    margin-left: 15px !important;
    font-size: 13px !important;
    color: #94a3b8 !important;
    white-space: nowrap !important;
    float: none !important;
}

/* 7. 🏆 前三名专属高亮 (数字和点击量颜色) */
.hot_news li:nth-child(1) a::before,
.hot_news li:nth-child(1) > span {
    color: #e74c3c !important; /* 第一名 红色 */
    font-weight: bold !important;
}

.hot_news li:nth-child(2) a::before,
.hot_news li:nth-child(2) > span {
    color: #f39c12 !important; /* 第二名 橙色 */
    font-weight: bold !important;
}

.hot_news li:nth-child(3) a::before,
.hot_news li:nth-child(3) > span {
    color: #f1c40f !important; /* 第三名 黄色 */
    font-weight: bold !important;
}

/* ============================================================
   MODERN-UI.CSS - 小说版块 (大卡片 + 展开功能版)
   ============================================================ */

/* 1. 网格：增大卡片最小宽度，这样一行排的个数就少了 */
.novel-grid {
    display: grid;
    /* 从原来的 100px 增大到 150px，一行显示的卡片就会变少 */
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    gap: 15px !important;
}

/* 2. 卡片基础：增大内边距，撑大框体 */
.novel-card {
    position: relative !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none !important;
    border-radius: var(--radius-sm);
    border: 1px solid #edf2f7;
    /* 核心：增大内边距和高度 */
    padding: 20px 15px 25px !important;
    min-height: 90px !important;
    transition: all 0.2s ease;
}

/* 3. 放大字体和图标 */
.novel-name {
    font-size: 14px !important; /* 字体放大 */
    font-weight: 700 !important;
    color: #1e293b !important;
    line-height: 1.4 !important;
    width: 100%;
    margin: 0 !important;
}

.heat-bar {
    position: absolute !important;
    bottom: 6px !important;
    right: 10px !important;
    font-size: 12px !important; /* 热度字体稍微放大一点点 */
    color: #94a3b8 !important;
    background: transparent !important;
}

/* 4. 隐藏多余卡片的辅助类 */
.hidden-card {
    display: none !important;
}

/* 5. 展开按钮样式 */
.expand-novel-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px 0;
    margin-top: 15px;
    color: #3498db;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s;
}

.expand-novel-btn:hover {
    background: #eff6ff;
    border-color: #3498db;
    color: #2563eb;
}

/* 3. 弱化热度条：变小、去背景、移至右下角 */
.heat-bar {
    position: absolute !important;
    bottom: 4px !important;
    right: 8px !important;
    font-size: 11px !important; /* 字体缩小 */
    font-weight: 400 !important; /* 取消加粗 */
    color: #94a3b8 !important; /* 变成低调的灰色 */
    background: transparent !important; /* 移除彩色背景块 */
    padding: 0 !important;
    margin: 0 !important;
}

/* 4. 前三名的热度稍微保留一点颜色，但依旧低调 */
.novel-card.top-1 .heat-bar { color: #e67e22 !important; }
.novel-card.top-2 .heat-bar { color: #7f8c8d !important; }
.novel-card.top-3 .heat-bar { color: #d35400 !important; }

/* 5. 弱化右上角的 HOT 标签 */
.novel-card.is-hot::before {
    font-size: 9px !important;
    padding: 1px 5px !important;
    border-bottom-left-radius: 4px !important;
    opacity: 0.7 !important; /* 增加透明度，不抢风头 */
}
/* ============================================================
   MODERN-UI.CSS - 底部 Footer 重构与错位修复
   ============================================================ */

footer {
    background: #fff !important;
    padding: 40px 0 20px !important;
    margin-top: 40px !important;
    box-shadow: 0 -4px 10px rgba(0,0,0,0.02) !important;
    clear: both !important;
}

/* 1. 限制内容宽度并居中，与上方 1300px 严格对齐 */
footer .links,
footer .box {
    width: 100% !important;
    max-width: 1300px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    display: block !important; /* 极其关键：覆盖全局 .box 的 flex 属性，防止版权信息错位 */
}

/* 2. 友情链接区域重排 */
footer .links {
    margin-bottom: 30px !important;
}

footer .links .h_title {
    font-size: 18px !important;
    color: var(--text-main) !important;
    margin-bottom: 20px !important;
    text-align: left !important;
    border-bottom: 2px solid #f1f5f9 !important;
    padding-bottom: 12px !important;
}

/* 使用 Flexbox 自动排布链接，淘汰旧的 float 浮动 */
footer .links ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    margin: 0 !important;
    padding: 0 !important;
}

footer .links li {
    width: auto !important; /* 取消旧版 base.css 的 16.66% 固定宽度 */
    float: none !important;
    margin: 0 !important;
}

/* 友情链接按钮现代化 */
footer .links a {
    display: inline-block !important;
    padding: 8px 18px !important;
    background: #f8fafc !important;
    color: var(--text-muted) !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    border: 1px solid transparent !important;
}

footer .links a:hover {
    background: #fff !important;
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 4px 10px rgba(52, 152, 219, 0.1) !important;
    transform: translateY(-2px);
}

/* 3. 版权信息区域重排 */
footer .copyright {
    border-top: 1px solid #e2e8f0 !important;
    padding-top: 25px !important;
    text-align: center !important;
    color: #94a3b8 !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
}

footer .copyright p {
    margin: 0 !important;
}
/* ============================================================
   MODERN-UI.CSS - 强化版“加载更多”动画
   ============================================================ */

/* 1. 美化按钮本体 */
.more-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    height: 48px;
    background: var(--bg-card) !important;
    border: 2px solid var(--primary-color) !important;
    border-radius: 25px !important;
    color: var(--primary-color) !important;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    position: relative;
    overflow: hidden;
}

.more-link:hover {
    background: var(--primary-color) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3) !important;
    transform: translateY(-2px);
}

/* 2. 按钮加载中的呼吸光效 */
.more-link.is-loading {
    background: var(--primary-color) !important;
    color: transparent !important; /* 隐藏原本的文字 */
    pointer-events: none;
    animation: pulse-shadow 1.5s infinite;
}

/* 3. 现代的三点跳动动画 (取代旋转圈) */
.typing-loader {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 6px;
    left: 50%;
    transform: translateX(-50%);
}

.typing-loader span {
    width: 8px;
    height: 8px;
    background-color: #fff;
    border-radius: 50%;
    animation: typing 1.4s infinite ease-in-out both;
}

.typing-loader span:nth-child(1) { animation-delay: -0.32s; }
.typing-loader span:nth-child(2) { animation-delay: -0.16s; }

@keyframes typing {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

@keyframes pulse-shadow {
    0% { box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.5); }
    70% { box-shadow: 0 0 0 12px rgba(52, 152, 219, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 152, 219, 0); }
}

/* 4. 新文章加载时的平滑浮现动画 */
.blogs ul .blogs_list.fade-in-up {
    animation: fadeInUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    opacity: 0; /* 初始透明 */
    transform: translateY(30px); /* 初始偏下 */
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   MODERN-UI.CSS - 深度统一与质感打磨 (导航、分页、标签云)
   ============================================================ */



#starlist li a {
    font-weight: 500 !important;
    letter-spacing: 0.5px;
    transition: all 0.3s ease !important;
}

#starlist li a:hover {
    color: #cbd5e1 !important; /* 鼠标悬浮文字变浅灰 */
}

/* 2. 彻底修复底部“分页栏”结构差异导致的变形 */
/* 强制重置分页容器 */
.navbottom, .epages, .pagination-container, .pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important; /* 关键：解决被异常拉高的问题 */
    flex-wrap: wrap !important;
    gap: 8px !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 40px auto !important;
    padding: 0 !important;
    border: none !important;
}

/* 统一所有页码按钮（适配 a, span, b 等各种标签） */
.epages a, .epages span, .epages b,
.pagination > li > a, .pagination > li > span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 38px !important; /* 保证按钮够宽 */
    height: 38px !important;    /* 强制固定高度，防止拉伸 */
    padding: 0 12px !important;
    margin: 0 !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    color: var(--text-main) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    box-shadow: var(--shadow-soft) !important;
    transition: var(--transition) !important;
    float: none !important;
    box-sizing: border-box !important;
}

/* 鼠标悬浮动画 */
.epages a:hover,
.pagination > li > a:hover {
    transform: translateY(-2px) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

/* 🏆 当前激活的页码 (高亮) */
/* 你的模板当前页可能是 <b> 或者带 .active 的标签 */
.epages b,
.epages span.current,
.pagination > .active > a,
.pagination > .active > span {
    background: var(--primary) !important;
    color: #83858f !important;
    border-color: var(--primary) !important;
    box-shadow: 0 4px 10px rgba(52, 152, 219, 0.4) !important;
    transform: none !important;
}

/* 修复旧版 base.css 可能强制隐藏第一个页码的 bug */
.epages a:nth-child(1) {
    display: inline-flex !important;
}
/* 3. 侧边栏 - 标签云 (Tag Cloud) 统一性净化 */
.tagsclous ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 15px 0 5px 0 !important;
}

/* 干掉底层的 8n 随机配色，统一为高级灰 */
.tagsclous a {
    background: var(--bg-body) !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    margin: 0 !important;
    font-size: 13px !important;
    transition: var(--transition) !important;
    line-height: 1.5 !important;
}

.tagsclous a:hover {
    background: var(--primary-light) !important;
    color: var(--primary) !important;
    border-color: var(--primary) !important;
    transform: translateY(-2px);
}

/* 4. 小说卡片 HOT 角标精致化 (不再是死板的大红块) */
.novel-card.is-hot::before {
    background: linear-gradient(135deg, #ff4757, #ff6b81) !important; /* 珊瑚红渐变 */
    border-radius: 0 var(--radius-sm) 0 var(--radius-sm) !important;
    padding: 3px 10px !important;
    font-size: 10px !important;
    letter-spacing: 1px;
    box-shadow: -2px 2px 10px rgba(255, 71, 87, 0.2) !important;
    border: none !important;
}

/* 5. 移动端防错位修补 */
@media (max-width: 959px) {
    nav {
        border-radius: 0 !important; /* 手机端导航栏恢复直角贴边，防止漏缝 */
        margin-top: 0 !important;
    }

    /* 1. 修复移动端白底白字问题，强制改回深色 */
    #starlist li a {
        color: #1e293b !important; /* 深蓝灰色文字 */
        text-shadow: none !important;
        padding: 12px 20px !important;
        display: block !important;
    }



    /* 2. 隐藏额外生成的伪元素，防止出现双箭头 */
    #starlist .menu > a::after {
        display: none !important;
    }

    /* 3. 接管 HTML 里自带的箭头 (通常是 i 标签)，让它靠右并加上动画 */
    #starlist .menu > a i {
        float: right !important;
        transition: transform 0.3s ease !important;
        margin-top: 2px !important;
        color: #94a3b8 !important;
    }

    /* 4. 菜单展开时，让你原本的箭头旋转 180 度朝上 */
    #starlist .menu.open > a i {
        transform: rotate(180deg) !important;
        color: var(--primary) !important;
    }

    /* 2. 鼠标悬浮/点击时的颜色 */
    #starlist li a:hover {
        color: var(--primary) !important;
        background-color: #f8fafc !important;
    }

    /* 3. 移动端下拉菜单外框排版优化 */
    #starlist {
        background: #ffffff !important;
        border-top: 1px solid #e2e8f0 !important;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
        padding: 0 !important;
    }

    /* 4. 给每个一级菜单加上淡灰色分割线 */
    #starlist > li {
        border-bottom: 1px solid #f1f5f9 !important;
        margin: 0 !important;
    }

    #starlist > li:last-child {
        border-bottom: none !important;
    }

    /* 5. 展开的二级子菜单样式区分 */
    #starlist .sub {
        background: #f8fafc !important; /* 二级菜单底色稍微变灰一点以示区分 */
        box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.02) !important;
    }

    #starlist .sub li a {
        color: #64748b !important; /* 二级菜单文字颜色变浅 */
        padding-left: 40px !important; /* 二级菜单向右缩进 */
        font-size: 14px !important;
    }

     /* 1. 初始隐藏二级菜单 */
    #starlist .sub {
        display: none;!important; /* 关键：默认隐藏 */
        background: #f8fafc !important;
        box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.02) !important;

    }

}