/* ==========================================
   @IMPORT — 外部资源引入
   ========================================== */

/* 引入霞鹜文楷网络字库 */
@import url('https://fastly.jsdelivr.net/npm/lxgw-wenkai-webfont@1.1.0/style.css');


/* ==========================================
   GLOBAL — 全局字体与基础排版
   ========================================== */

body,
#article-container {
    font-family: 'LXGW WenKai', sans-serif !important;
}


/* ==========================================
   THEME VARIABLES — 黑夜模式 CSS 变量
   ========================================== */

/* 自定义黑夜模式专用的板块颜色（#252D38） */
[data-theme='dark'] {
    /* 1. 网页大背景层 */
    --background-color: #252D38 !important;

    /* 2. 核心板块底色：包括右侧边栏卡片、首页文章列表卡片、正文主体卡片 */
    --card-bg: #252D38 !important;

    /* 3. 各种按钮、小标签的黑夜背景 */
    --btn-bg: #1e2530 !important;

    /* 4. 针对顶部导航栏 */
    #page-header nav {
        background: #252D38 !important;
    }

    /* ❌ 删掉了原本的第 5 项页脚底色覆盖 */

    /* 6. 侧边栏各个独立小卡片的底色强制纠正 */
    .card-widget {
        background: #252D38 !important;
    }
}


/* ==========================================
   SITE HEADER — 首页标题与副标题
   ========================================== */

/* 自定义首页打字机副标题的文字透明度（保留） */
#site-info #subtitle {
    opacity: 0.75 !important;
}

/* 隐藏大屏幕原本的中央标题，并替换为自定义英文 */
#site-info #site-title {
    visibility: hidden;
    /* 隐藏原本跟着站点名字走的旧标题 */
    position: relative;
}

#site-info #site-title::after {
    content: 'XLCM-Blog';
    /* 👈 在这里填入你梦寐以求的大屏标题 */
    visibility: visible;
    /* 让新标题显示出来 */

    /* 样式微调：确保字体大小和原本的一样霸气 */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;

    /* 如果你想给这个英文换个好看的字体，可以在这里追加 font-family */
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}


/* ==========================================
   RIGHT SIDE — 右下角滚动百分比与返回顶部
   ========================================== */

/* 自定义右下角滚动百分比数字，强行追加 % 号 */
#go-up .scroll-percent::after {
    content: '%' !important;
    /* 1. 在数字后面强行追加 % 符号 */
    font-size: 0.65rem !important;
    /* 2. 适当缩小 % 号的字号，让排版看起来更有主次、更精致 */
    margin-left: 1px !important;
    /* 3. 让 % 号和前面的数字保持 1 像素的优雅微调间距 */
}

/* 让右下角悬浮栏的滚动百分比和进度条更丝滑 */

/* 1. 让圆圈里的百分比数字变化时有丝滑的淡入淡出/位移缓冲 */
#go-up .scroll-percent {
    transition: all 0.3s ease-out !important;
    /* 0.3秒的顺滑过渡 */
}

/* 2. 让包裹在按钮外圈的 SVG 圆形进度条随滚轮流动时像水流一样丝滑 */
#rightside #go-up svg.chia {
    transition: stroke-dashoffset 0.25s linear !important;
    /* 给进度条专属的位移缓冲 */
}

/* 3. 【加码特效】：当鼠标指针悬停在返回顶部按钮上时，
    让整个按钮有一个微微放大并带有影随身动的丝滑交互 */
#go-up:hover {
    transform: scale(1.08) !important;
    /* 微微放大 1.08 倍 */
    transition: transform 0.2s ease-in-out !important;
}


/* ==========================================
   FOOTER — 页面运行时间
   ========================================== */

/* 确保页脚时间文本完美听从我们的颜色指挥 */
#web_runtime {
    display: inline-block;
    margin-top: 5px;
    font-weight: 500;
}


/* ==========================================
   UNIVERSE — 背景宇宙星光
   ========================================== */

/* 背景宇宙星光  */
#universe {
    display: block;
    position: fixed;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}


/* ==========================================
   FOOTER — 全局页脚毛玻璃质感
   ========================================== */

/* 全局页脚（白夜模式通用）：高级毛玻璃质感 */
#footer {
    background: rgba(255, 255, 255, 0.35) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

#footer::before {
    background-color: transparent !important;
}

/* 🎯 精准修正：白天模式下，将页脚全元素的颜色统一为优雅的 #4C4948 */
#footer,
#footer * {
    color: #4C4948 !important;
    text-shadow: none !important;
    /* 彻底拔掉自带的阴影，确保颜色纯正不发虚 */
    box-shadow: none !important;
}

/* 联动：黑夜模式下的毛玻璃自动变深 */
[data-theme='dark'] #footer {
    background: rgba(37, 45, 56, 0.65) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

/* 🎯 黑夜模式保持不变：依旧自动切回温柔的白色 */
[data-theme='dark'] #footer,
[data-theme='dark'] #footer * {
    color: rgba(255, 255, 255, 0.85) !important;
    text-shadow: none !important;
}

/* 🔗 修复：释放页脚链接的鼠标悬停变色特效 */

/* 1. 白天模式下，鼠标放上去变成主题蓝色（或者你喜欢的任意蓝色，如 #49B1F5） */
#footer a:hover {
    color: #49B1F5 !important;
    /* 👈 用 !important 抢回控制权，变回蓝色 */
    text-decoration: none;
    /* 去掉下划线，保持精简 */
    transition: color 0.3s ease;
    /* 让变色过程有一个温柔的过渡动效 */
}

/* 2. 黑夜模式下，鼠标放上去也变成亮眼的蓝色，防止在深色背景下看不清 */
[data-theme='dark'] #footer a:hover {
    color: #00c4b6 !important;
    /* 👈 黑夜模式推荐用极客青蓝，或者继续用 #49B1F5 */
}


/* ==========================================
   BOOK SHELF — 微信读书书架：网格流与卡片
   ========================================== */

/* 1. 最外层大网格容器（控制多列并排响应式） */
.wechat-reading-shelf {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    padding: 15px 0;
}

/* ==================================================================
   2. 单个书本卡片主体（白天模式：进一步加深的高级莫兰迪靛蓝底色）
   ================================================================== */
.book-card {
    display: flex;

    /* ☀️ 白天模式不变 */
    background: #d2e9f7 !important;
    border-radius: 12px;
    padding: 0 !important;
    overflow: hidden;

    border: 1px solid rgba(73, 177, 245, 0.4);
    box-shadow:
        0 10px 35px rgba(73, 177, 245, 0.15),
        0 4px 14px rgba(0, 0, 0, 0.08),
        0 2px 4px rgba(0, 0, 0, 0.05);

    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    height: 180px;
}

/* 🌙 黑夜模式：彻底放轻阴影，注入现代暗黑微光质感 */
[data-theme='dark'] .book-card {
    background: #182232 !important;

    /* 🎯 关键修改 1：微调了极客青的边框，稍微提高一点边界感 */
    border: 1px solid rgba(0, 196, 182, 0.2) !important;

    /* 🎯 关键修改 2：删掉之前 0.65 和 0.45 的恐怖重阴影，换成一层极淡的纯黑发散阴影 */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

/* 🖱️ 白天模式悬停交互（保持不变） */
.book-card:hover {
    transform: translateY(-6px);
    background: #bfe0f5 !important;
    border-color: #49B1F5;
    box-shadow:
        0 18px 40px rgba(73, 177, 245, 0.28),
        0 8px 22px rgba(0, 0, 0, 0.15);
}

/* 🖱️ 黑夜模式悬停交互 */
[data-theme='dark'] .book-card:hover {
    transform: translateY(-6px);
    background: #1d2b3e !important;

    /* 🎯 关键修改 3：悬停变亮时，阴影也控制在舒适范围内，不发乌 */
    border-color: #00c4b6;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}

/* 3. 封面链接容器 */
.book-cover-link {
    display: block;
    height: 100%;
    flex-shrink: 0;
}

.book-cover {
    width: 140px;
    height: 100%;
}

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

/* ==========================================
   4. 右侧文字区域布局（已完美整合右上角双制评分）
   ========================================== */
.book-info {
    position: relative;
    /* 👈 核心修改：作为右上角评分的绝对定位基准 */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 18px 20px;
    flex-grow: 1;
    overflow: hidden;
}

/* --- 评分标签样式（绝对定位到右上角） --- */
.book-rating {
    position: absolute;
    top: 16px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    /* 星星和分数的间距 */
    font-family: 'PingFang SC', sans-serif;
    pointer-events: none;
    /* 确保不影响任何底层点击 */
}

/* 经典豆瓣金黄色星星 */
.book-rating .stars {
    color: #ffb400 !important;
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-shadow: 0 1px 3px rgba(255, 180, 0, 0.15);
}

/* 醒目的评分文字 */
.book-rating .score {
    font-size: 0.85rem;
    font-weight: 600;
    color: #e67e22 !important;
    /* 白天莫兰迪蓝底色下的舒适深橙 */
}

/* 🌙 联动：黑夜模式下的评分微调 */
[data-theme='dark'] .book-rating .stars {
    text-shadow: 0 0 6px rgba(255, 180, 0, 0.4);
    /* 黑夜给星星来一点点荧光 */
}

[data-theme='dark'] .book-rating .score {
    color: #ff9f43 !important;
    /* 黑夜下切换为高亮柔和橙，更显眼 */
}

/* --- 标题链接与悬停动效 --- */
.book-title-link {
    text-decoration: none !important;
    display: inline-block;
    margin-bottom: 6px;
}

/* 优化书名样式，允许长书名正常换行，并给上方留出舒适的间距 */
.book-card .book-title {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin-top: 5px !important; /* 代替原本星级行带来的间距 */
    margin-bottom: 8px !important;
    color: var(--text-highlight-color) !important;

    /* 强保长书名展示：如果书名实在太长，最多显示2行，超出部分省略号 */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    white-space: normal !important; /* 确保长书名可以正常折行，不被强制单行截断 */
}

/* 悬停在标题或封面链接上时，标题变色互动 */
.book-title-link:hover .book-title,
.book-cover-link:hover+.book-info .book-title {
    color: #49B1F5 !important;
}

[data-theme='dark'] .book-title-link:hover .book-title,
[data-theme='dark'] .book-cover-link:hover+.book-info .book-title {
    color: #00c4b6 !important;
}

/* --- 作者与简介排版 --- */
.book-author {
    font-size: 0.85rem;
    color: #858585;
    margin-bottom: 10px;
}

.book-desc {
    font-size: 0.88rem;
    color: var(--text-color);
    opacity: 0.75;
    line-height: 1.5;

    /* 1. 终极兼容：同时写入标准属性与老版盒子属性 */
    overflow: hidden;
    text-overflow: ellipsis;
    line-clamp: 3;

    /* 2. 依然保留的各类老版本 / 现行主流浏览器内核实现 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}


/* ==========================================
   SIDEBAR — 自定义侧边栏导航样式
   ========================================== */

/* 自定义侧边栏：公告栏融合版导航样式 */
.aside-list-navigation {
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* 导航项垂直间距 */
    padding-top: 4px;
}

/* 单个导航行基础外观 */
.nav-item-link {
    display: flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 8px;
    color: var(--text-color) !important;
    text-decoration: none !important;
    background: rgba(0, 0, 0, 0.02);
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 导航图标设置 */
.nav-item-link i {
    width: 22px;
    font-size: 0.95rem;
    color: #49B1F5;
    /* 白天莫兰迪经典蓝 */
    margin-right: 12px !important;
    transition: transform 0.25s ease;
}

/* 导航文本 */
.nav-item-link span {
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

/* ☀️ 白天模式：鼠标悬停（Hover）丝滑右滑、变色效果 */
.nav-item-link:hover {
    background: #d2e9f7 !important;
    /* 深度联动你的莫兰迪书单底色 */
    transform: translateX(5px);
    /* 优雅右移微动效 */
}

.nav-item-link:hover i {
    transform: scale(1.15);
    /* 图标灵动放大 */
}

/* 🌙 黑夜模式：无缝自适应微调 */
[data-theme='dark'] .nav-item-link {
    background: rgba(255, 255, 255, 0.03);
}

[data-theme='dark'] .nav-item-link i {
    color: #00c4b6;
    /* 切换为酷炫的极客青 */
}

[data-theme='dark'] .nav-item-link:hover {
    background: #1d2b3e !important;
    /* 深度联动黑夜卡片悬停色 */
}

/* ==========================================
   A-Z INDEX — A-Z 拼音字母索引页面美化样式（标准 CSS 版）
   ========================================== */

#abc-index {
    margin: 30px auto;
    padding: 10px;
}

#abc-index .letters-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 40px;
    padding: 15px;
    background: var(--light-grey, #f0f2f5);
    border-radius: 12px;
}

#abc-index .letters-nav .nav-letter-btn {
    display: inline-block;
    min-width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    font-weight: bold;
    color: var(--font-color, #333);
    background: var(--card-bg, #fff);
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    text-decoration: none !important;
    transition: all 0.3s ease;
}

#abc-index .letters-nav .nav-letter-btn:hover {
    background: #49b1f5 !important;
    color: #fff !important;
    transform: translateY(-3px);
    box-shadow: 0 5px 10px rgba(73, 177, 245, 0.4);
}

#abc-index .letters-nav .nav-letter-btn.disabled {
    opacity: 0.25;
    pointer-events: none;
    box-shadow: none;
    background: transparent !important;
}

#abc-index .letter-group {
    margin-bottom: 35px;
    background: var(--card-bg, #fff);
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
    scroll-margin-top: 90px;
}

#abc-index .letter-group .letter-title {
    font-size: 22px;
    font-weight: 700;
    color: #49b1f5;
    margin: 0 0 18px 5px;
    padding-bottom: 8px;
    border-bottom: 2px dashed rgba(73, 177, 245, 0.2);
}

#abc-index .letter-group .letter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* 优雅的彩色标签框基础样式 */
#abc-index .letter-group .letter-tags .tag-item {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    font-size: 14px !important;
    border: 1px solid transparent;
    /* 边框颜色由 JS 注入控制 */
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
    text-decoration: none !important;
    transition: all 0.2s ease-in-out;
}

#abc-index .letter-group .letter-tags .tag-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.12);
}

/* 黑夜模式兼容 */
[data-theme='dark'] #abc-index .letters-nav {
    background: #1e2530 !important;
}

[data-theme='dark'] #abc-index .letter-group .letter-title {
    color: #00c4b6;
    border-bottom-color: rgba(0, 196, 182, 0.2);
}

#shelf-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 25px;
    padding: 16px 20px;
    background: rgba(73, 177, 245, 0.08);
    border: 1px solid rgba(73, 177, 245, 0.2);
    border-radius: 12px;
}

#shelf-controls .search-wrapper {
    position: relative;
    flex: 2;
    /* 让搜索框占宽大头 */
    min-width: 260px;
}

#shelf-controls .search-wrapper .search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #49B1F5;
    font-size: 0.95rem;
    pointer-events: none;
}

#shelf-controls #shelf-search-input {
    width: 100%;
    padding: 10px 16px 10px 38px;
    font-size: 0.9rem;
    color: var(--font-color, #4c4948);
    background: var(--card-bg, #fff) !important;
    border: 1px solid rgba(73, 177, 245, 0.3);
    border-radius: 30px;
    outline: none;
    transition: all 0.3s ease;
}

#shelf-controls .filter-wrapper {
    display: flex;
    flex-wrap: wrap;
    /* 装不下时自动往下排 */
    align-items: center;
    gap: 12px;
    flex: 3;
    justify-content: flex-end;
}

#shelf-controls .filter-group-inline {
    display: flex;
    align-items: center;
    gap: 6px;
}

#shelf-controls .filter-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--font-color, #4c4948);
    white-space: nowrap;
}

#shelf-controls #shelf-score-filter,
#shelf-controls #shelf-status-filter,
#shelf-controls #shelf-sort-order {
    padding: 8px 14px;
    font-size: 0.85rem;
    color: var(--font-color, #4c4948);
    background: var(--card-bg, #fff) !important;
    border: 1px solid rgba(73, 177, 245, 0.25);
    border-radius: 20px;
    outline: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

#shelf-controls #shelf-score-filter:hover,
#shelf-controls #shelf-status-filter:hover,
#shelf-controls #shelf-sort-order:hover {
    border-color: #49B1F5;
}

/* 暗黑联动 */
[data-theme='dark'] #shelf-controls .search-wrapper .search-icon {
    color: #00c4b6;
}

[data-theme='dark'] #shelf-controls #shelf-search-input:focus,
[data-theme='dark'] #shelf-controls #shelf-score-filter:hover,
[data-theme='dark'] #shelf-controls #shelf-status-filter:hover,
[data-theme='dark'] #shelf-controls #shelf-sort-order:hover {
    border-color: #00c4b6 !important;
    box-shadow: 0 0 8px rgba(0, 196, 182, 0.3) !important;
}

/* ==========================================
   FIX & ALIGN — 完美形态：元素置顶紧凑对齐，简介自动吃满空间
   ========================================== */

/* 1. 卡片总高度保持 210px */
.book-card {
    height: 210px !important;
}

/* 2. 核心修正：改为 flex-start（置顶对齐），让短内容的元素之间不再被迫拉开断层 */
.book-info {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    /* 👈 关键：所有文字向上紧凑靠拢 */
    padding: 16px 18px !important;
    flex-grow: 1;
    overflow: hidden;
}

/* 3. 标题：长短随缘，但最多两行，取消任何多余的死板固定高度 */
.book-card .book-title {
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    margin-top: 0 !important;
    margin-bottom: 6px !important;
    /* 统一给一个舒适的下边距 */

    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    white-space: normal !important;
    max-height: 2.7rem !important;
}

/* 4. 作者栏：紧凑排列 */
.book-author {
    font-size: 0.85rem;
    color: #858585;
    margin-top: 0 !important;
    margin-bottom: 5px !important;

    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
}

/* 5. 上传时间栏：紧凑排列 */
.book-card .book-date {
    font-size: 0.78rem;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    line-height: 1.2 !important;
}

/* 6. 简介部分：加入 flex-grow: 1，让它化身“空间海绵”，自动吸纳下方所有的剩余空白！ */
.book-card .book-desc {
    margin-top: 0 !important;
    flex-grow: 1 !important;
    /* 👈 关键：自动吃掉卡片下方空出来的所有地盘 */

    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 4 !important;
    /* 空间充足时，最多仍可以展示4行 */
    line-clamp: 4 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 0.83rem !important;
    line-height: 1.4 !important;
    opacity: 0.75;
}

/* ==========================================
   DUAL COLUMN CATEGORIES — 双栏联动小说风分类样式
   ========================================== */

#dual-category-box {
    display: flex;
    background: var(--card-bg, #fff);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    min-height: 550px;
    margin: 20px auto;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* 1. 左侧大分类固定侧边栏样式 */
#dual-category-box .category-sidebar {
    width: 140px;
    background: var(--light-grey, #f6f8fa);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    border-right: 1px solid rgba(0, 0, 0, 0.06);
    padding: 10px 0;
}

#dual-category-box .category-sidebar .sidebar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 10px;
    font-size: 0.92rem;
    color: var(--font-color, #4c4948);
    text-decoration: none !important;
    border-left: 3px solid transparent;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

/* 左侧激活/高亮状态（模仿小说标签的亮色） */
#dual-category-box .category-sidebar .sidebar-item.active {
    background: var(--card-bg, #fff);
    color: #49B1F5 !important;
    font-weight: 600;
    border-left-color: #49B1F5;
}

#dual-category-box .category-sidebar .sidebar-item .sidebar-count {
    font-size: 0.75rem;
    opacity: 0.6;
    margin-top: 2px;
}

/* 2. 右侧小分类展示面板 */
#dual-category-box .category-content-panels {
    flex-grow: 1;
    padding: 24px 28px;
    background: var(--card-bg, #fff);
    overflow-y: auto;
}

#dual-category-box .panel-section {
    margin-bottom: 28px;
}

#dual-category-box .section-title {
    font-size: 0.85rem !important;
    font-weight: 600;
    color: #858585;
    margin: 0 0 14px 2px !important;
    letter-spacing: 0.5px;
}

/* 3. 右侧小分类精美卡片网格流 */
#dual-category-box .panel-tags-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
}

#dual-category-box .sub-tag-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    font-size: 0.85rem;
    background: var(--light-grey, #f0f2f5);
    color: var(--font-color, #333) !important;
    border-radius: 6px;
    text-align: center;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

#dual-category-box .sub-tag-item:hover {
    background: #49B1F5 !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(73, 177, 245, 0.25);
}

/* 4. 下方文章列表展示 */
#dual-category-box .panel-posts-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#dual-category-box .panel-post-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.01);
    border-radius: 6px;
    color: var(--text-color) !important;
    text-decoration: none !important;
    transition: background 0.2s;
}

#dual-category-box .panel-post-item i {
    color: #49B1F5;
    font-size: 0.85rem;
}

#dual-category-box .panel-post-item:hover {
    background: rgba(73, 177, 245, 0.08);
    color: #49B1F5 !important;
}

/* ==========================================
   DARK MODE — 暗黑模式联动适配
   ========================================== */
[data-theme='dark'] #dual-category-box {
    border-color: rgba(255, 255, 255, 0.05);
}

[data-theme='dark'] #dual-category-box .category-sidebar {
    background: #1e2530 !important;
    border-right-color: rgba(255, 255, 255, 0.05);
}

[data-theme='dark'] #dual-category-box .category-sidebar .sidebar-item.active {
    color: #00c4b6 !important;
    border-left-color: #00c4b6;
}

[data-theme='dark'] #dual-category-box .sub-tag-item {
    background: #1e2530 !important;
}

[data-theme='dark'] #dual-category-box .sub-tag-item:hover {
    background: #00c4b6 !important;
    box-shadow: 0 4px 8px rgba(0, 196, 182, 0.25);
}

[data-theme='dark'] #dual-category-box .panel-post-item:hover {
    background: rgba(0, 196, 182, 0.08);
    color: #00c4b6 !important;
}

[data-theme='dark'] #dual-category-box .panel-post-item i {
    color: #00c4b6;
}

/* ==========================================
   SUB-CATEGORIES BAR — 二级小分类按钮条样式
   ========================================== */

#dual-category-box .sub-categories-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
}

#dual-category-box .sub-categories-bar .filter-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--font-color, #4c4948);
}

#dual-category-box .sub-cat-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* 小分类按键常规状态 */
#dual-category-box .sub-cat-btn {
    padding: 6px 14px;
    font-size: 0.85rem;
    background: var(--light-grey, #f0f2f5);
    color: var(--font-color, #4c4948);
    border: 1px solid transparent;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

/* 小分类被选中时的激活样式（高亮显示） */
#dual-category-box .sub-cat-btn.active {
    background: rgba(73, 177, 245, 0.1) !important;
    color: #49B1F5 !important;
    border-color: rgba(73, 177, 245, 0.4);
    font-weight: 600;
}

#dual-category-box .sub-cat-btn:hover {
    border-color: #49B1F5;
}

/* 🌙 暗黑模式联动 */
[data-theme='dark'] #dual-category-box .sub-categories-bar {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme='dark'] #dual-category-box .sub-cat-btn {
    background: #1e2530 !important;
}

[data-theme='dark'] #dual-category-box .sub-cat-btn.active {
    background: rgba(0, 196, 182, 0.15) !important;
    color: #00c4b6 !important;
    border-color: rgba(0, 196, 182, 0.4);
}

[data-theme='dark'] #dual-category-box .sub-cat-btn:hover {
    border-color: #00c4b6;
}

/* ==========================================
   PANEL POST ITEM TIME — 相关文章列表右侧时间微调
   ========================================== */

/* 1. 让整行支持两端对齐 */
#dual-category-box .panel-post-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    /* 👈 关键：把标题挤到左边，时间挤到右边 */
    padding: 8px 14px !important;
}

/* 2. 左侧包裹区：图标和文字紧凑对齐 */
#dual-category-box .panel-post-item .post-item-left {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 3. 右侧时间标签：优雅的岩灰色，稍微缩小字号 */
#dual-category-box .panel-post-item .post-item-date {
    font-size: 0.8rem;
    color: #999;
    /* 浅灰色，不抢标题风头 */
    font-weight: 400;
    flex-shrink: 0;
    /* 确保时间不会因为标题太长而被挤压变形 */
    margin-left: 15px;
}

/* 🌙 暗黑模式联动微调 */
[data-theme='dark'] #dual-category-box .panel-post-item .post-item-date {
    color: #708090 !important;
    /* 暗黑模式下变成更柔和的灰蓝色 */
}

/* ==========================================
   DYNAMIC COLLAPSE — 子分类与标签栏动态折叠收起
   ========================================== */

/* 1. 声明折叠宿主：当被 JS 认定超过两行时，开启裁剪 */
#dual-category-box .sub-cat-buttons.collapsed,
#dual-category-box .panel-tags-grid.collapsed {
    max-height: 72px !important;
    /* 👈 精准锁定大约 2 行的高度 */
    overflow: hidden !important;
    transition: max-height 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 2. 展开状态 */
#dual-category-box .sub-cat-buttons.expanded,
#dual-category-box .panel-tags-grid.expanded {
    max-height: 1000px !important;
    /* 给一个极大的过渡高度上限 */
    transition: max-height 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 3. 动态生成的【展开/收起】按钮美化 */
#dual-category-box .toggle-expand-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    color: #49B1F5;
    cursor: pointer;
    margin-top: 10px;
    margin-left: 2px;
    padding: 4px 10px;
    background: rgba(73, 177, 245, 0.05);
    border-radius: 12px;
    user-select: none;
    transition: all 0.2s ease;
}

#dual-category-box .toggle-expand-btn:hover {
    background: rgba(73, 177, 245, 0.12);
    transform: translateY(-1px);
}

#dual-category-box .toggle-expand-btn i {
    font-size: 0.82rem;
    transition: transform 0.2s;
}

/* 🌙 暗黑模式联动 */
[data-theme='dark'] #dual-category-box .toggle-expand-btn {
    color: #00c4b6;
    background: rgba(0, 196, 182, 0.08);
}

[data-theme='dark'] #dual-category-box .toggle-expand-btn:hover {
    background: rgba(0, 196, 182, 0.15);
}

/* ==========================================
   RESPONSIVE DESIGN — 手机移动端完美自适应流式布局
   ========================================== */

@media screen and (max-width: 768px) {

    /* 1. 外层容器由“左右并排”改为“上下堆叠” */
    #dual-category-box {
        flex-direction: column !important;
        min-height: auto !important;
        border-radius: 8px !important;
    }

    /* 2. 左侧栏化身顶部“横向滚动导航条” */
    #dual-category-box .category-sidebar {
        width: 100% !important;
        flex-direction: row !important;
        /* 改为横向排布 */
        overflow-x: auto !important;
        /* 开启横向溢出滚动 */
        overflow-y: hidden !important;
        white-space: nowrap !important;
        /* 强制不换行 */
        padding: 5px 10px !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;

        /* 隐藏手机端难看的滚动条，保持精致 */
        -webkit-overflow-scrolling: touch;
    }

    #dual-category-box .category-sidebar::-webkit-scrollbar {
        display: none !important;
    }

    /* 3. 顶部大分类按钮微调：变成小巧的横向标签 */
    #dual-category-box .category-sidebar .sidebar-item {
        display: inline-flex !important;
        flex-direction: row !important;
        /* 文字和数字横着排 */
        align-items: center !important;
        gap: 4px;
        padding: 10px 16px !important;
        border-left: none !important;
        border-bottom: 3px solid transparent;
        /* 高亮线改到下面 */
    }

    /* 顶部大分类激活状态 */
    #dual-category-box .category-sidebar .sidebar-item.active {
        border-left-color: transparent !important;
        border-bottom-color: #49B1F5 !important;
    }

    [data-theme='dark'] #dual-category-box .category-sidebar .sidebar-item.active {
        border-bottom-color: #00c4b6 !important;
    }

    /* 4. 右侧内容区铺满屏幕 */
    #dual-category-box .category-content-panels {
        padding: 16px 14px !important;
        /* 缩减手机端留白，增大视野 */
    }

    /* 5. 子分类控制条优化 */
    #dual-category-box .sub-categories-bar {
        flex-direction: column !important;
        /* 子分类标签和按钮上下排 */
        align-items: flex-start !important;
        gap: 8px !important;
    }

    /* 6. 热门标签卡片变成手机端更舒适的 3 列排布 */
    #dual-category-box .panel-tags-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) !important;
        gap: 8px !important;
    }

    #dual-category-box .sub-tag-item {
        padding: 8px 4px !important;
        font-size: 0.8rem !important;
    }

    /* 7. 相关文章列表的文字与时间缩减大小 */
    #dual-category-box .panel-post-item {
        padding: 10px !important;
    }

    #dual-category-box .panel-post-item .post-item-title {
        font-size: 0.85rem !important;
    }

    #dual-category-box .panel-post-item .post-item-date {
        font-size: 0.75rem !important;
        margin-left: 8px !important;
    }

    /* ==========================================
        CORRECTION — 强效修复手机端卡片左侧圆角消失/露尖
        ========================================== */

    /* 1. 强行在移动端激活卡片主体的硬性裁剪，把顶破圆角的尖角直接切掉 */
    .book-card {
        overflow: hidden !important;
        border-radius: 12px !important;
        /* 确保移动端也是圆润的 12px 圆角 */
    }

    /* 2. 核心补丁：因为移动端封面图可能独占上层，强行让图片本身也继承父级的圆角逻辑 */
    .book-cover,
    .book-cover img {
        border-top-left-radius: 12px !important;
        border-bottom-left-radius: 0px !important;
        /* 如果上下堆叠，左下角可以放开 */

        /* 针对部分老旧安卓/iOS浏览器的防露尖黑科技 */
        -webkit-transform: rotate(0deg);
    }
        
}

/* ==========================================
   POST LEAD CARD — 文章导读卡片美化
   ========================================== */
.post-lead-card-wrapper {
    background: var(--card-bg, #ffffff);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease;
}

[data-theme='dark'] .post-lead-card-wrapper {
    border-color: rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* 顶部徽章条 */
.lead-badge-bar {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.lead-badge-bar .badge-text {
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: var(--btn-bg, #f3f4f6);
    color: #4b5563;
    padding: 3px 10px;
    border-radius: 20px;
}

[data-theme='dark'] .lead-badge-bar .badge-text {
    color: #9ca3af;
}

.lead-badge-bar .badge-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.08), transparent);
    margin-left: 10px;
}

[data-theme='dark'] .lead-badge-bar .badge-line {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.08), transparent);
}

/* 主卡片双栏横排布局 */
.lead-main-card {
    display: table;
    width: 100%;
}

.lead-cover-area {
    display: table-cell;
    width: 100px;
    vertical-align: top;
}

.lead-cover-area img {
    width: 100px;
    height: 140px;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

.lead-info-area {
    display: table-cell;
    vertical-align: top;
    padding-left: 20px;
}

/* 标题与评分 */
.lead-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.lead-title {
    margin: 0 !important;
    font-size: 1.25rem !important;
    font-weight: 700;
    color: var(--text-main-color, #1f2937);
}

.lead-score-badge {
    font-size: 0.85rem;
    font-weight: bold;
    color: #ffffff;
    background: linear-gradient(135deg, #ff9800, #f57c00);
    padding: 2px 8px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(245, 124, 0, 0.3);
}

/* 元数据（作者与日期） */
.lead-meta-row {
    font-size: 0.8rem;
    color: #6b7280;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

[data-theme='dark'] .lead-meta-row {
    color: #9ca3af;
}

.lead-splitter {
    color: rgba(0, 0, 0, 0.15);
}

[data-theme='dark'] .lead-splitter {
    color: rgba(255, 255, 255, 0.15);
}

/* 优雅的导读摘录框 */
.lead-quote-desc {
    position: relative;
    background: rgba(0, 0, 0, 0.02);
    border-left: 3px solid #4b5563;
    padding: 10px 14px;
    border-radius: 0 6px 6px 0;
}

[data-theme='dark'] .lead-quote-desc {
    background: rgba(255, 255, 255, 0.02);
    border-left-color: #9ca3af;
}

.lead-quote-desc .quote-icon {
    position: absolute;
    left: 6px;
    top: -6px;
    font-size: 1.8rem;
    font-family: Georgia, serif;
    color: rgba(0, 0, 0, 0.08);
    line-height: 1;
}

[data-theme='dark'] .lead-quote-desc .quote-icon {
    color: rgba(255, 255, 255, 0.08);
}

.lead-quote-desc .desc-text {
    margin: 0 !important;
    font-size: 0.88rem;
    line-height: 1.6;
    color: #4b5563;
    text-align: justify;
}

[data-theme='dark'] .lead-quote-desc .desc-text {
    color: #d1d5db;
}

/* 底部阅读引导线 */
.lead-footer-line {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    font-size: 0.65rem;
    letter-spacing: 2px;
    color: rgba(0, 0, 0, 0.15);
}

[data-theme='dark'] .lead-footer-line {
    color: rgba(255, 255, 255, 0.15);
}

.lead-footer-line::before,
.lead-footer-line::after {
    content: '';
    flex: 1;
    height: 1px;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
    margin: 0 10px;
}

[data-theme='dark'] .lead-footer-line::before,
[data-theme='dark'] .lead-footer-line::after {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* 📱 手机端自适应响应式微调 */
@media screen and (max-width: 568px) {
    .lead-main-card {
        display: block;
        /* 手机上取消表格布局，转为上下排 */
    }

    .lead-cover-area {
        display: block;
        width: 100%;
        text-align: center;
        margin-bottom: 15px;
    }

    .lead-cover-area img {
        width: 85px;
        height: 120px;
    }

    .lead-info-area {
        display: block;
        width: 100%;
        padding-left: 0;
    }

    .lead-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .lead-score-badge {
        align-self: flex-start;
    }
}

/* ==========================================
   🎯 强效修复：黑夜模式下导读卡片标题看不清的问题
   ========================================== */
[data-theme='dark'] .lead-title {
    color: #00C4B6 !important;
    /* 🌟 在黑夜模式下将标题强制修改为高亮青色，清晰夺目 */
}

[data-theme='dark'] .post-lead-card-wrapper {
    background: #252D38 !important;
    /* 完美融合：这里改成了与你网页大背景完全一致的底色 */
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ==========================================
   HOME TILES — 首页分类专栏磁贴样式
   ========================================== */

.home-tiles-container {
    background: var(--card-bg, #ffffff);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

/* 网格布局：一行两栏 */
.home-tiles-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

/* 单个磁贴基础样式 */
.tile-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.03);
    border-radius: 8px;
    text-decoration: none !important;
    color: var(--font-color, #4c4948) !important;
    transition: all 0.25s ease-in-out;
}

.tile-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tile-icon {
    font-size: 1.1rem;
}

.tile-name {
    font-weight: 600;
    font-size: 0.95rem;
}

.tile-count {
    font-size: 0.85rem;
    opacity: 0.6;
}

.tile-arrow {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.2);
    transition: all 0.25s ease;
}

/* 鼠标悬停动效：背景变色，箭头右移或变深 */
.tile-item:hover {
    background: #d2e9f7 !important;
    /* 深度联动你的莫兰迪蓝色系 */
    border-color: rgba(73, 177, 245, 0.4);
    transform: translateY(-1px);
}

.tile-item:hover .tile-arrow {
    color: #49B1F5;
    transform: scale(1.1);
}

/* 底部“查看更多” */
.tiles-more {
    text-align: center;
    margin-top: 12px;
    font-size: 0.85rem;
}

.tiles-more a {
    color: #858585 !important;
    text-decoration: none !important;
    opacity: 0.8;
    transition: color 0.2s;
}

.tiles-more a:hover {
    color: #49B1F5 !important;
}

/* ==========================================
   DARK MODE — 磁贴暗黑模式自适应
   ========================================== */
[data-theme='dark'] .home-tiles-container {
    background: #252D38 !important;
    /* 完美融合你的暗黑板块底色 */
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme='dark'] .tile-item {
    background: rgba(255, 255, 255, 0.03);
    border-color: transparent;
    color: rgba(255, 255, 255, 0.85) !important;
}

[data-theme='dark'] .tile-arrow {
    color: rgba(255, 255, 255, 0.2);
}

/* 🌙 暗黑模式下的悬停高亮（联动你的极客青色） */
[data-theme='dark'] .tile-item:hover {
    background: rgba(0, 196, 182, 0.15) !important;
    /* 对应图上选中的青蓝色半透明质感 */
    border-color: rgba(0, 196, 182, 0.4);
}

[data-theme='dark'] .tile-item:hover .tile-arrow {
    color: #00c4b6;
}

[data-theme='dark'] .tiles-more a:hover {
    color: #00c4b6 !important;
}

/* 📱 手机移动端自适应：降级为单栏排列 */
@media screen and (max-width: 568px) {
    .home-tiles-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .tile-item {
        padding: 10px 14px;
    }
}

/* ==========================================
   POST SWIPER — 首页置顶文章轮播图样式
   ========================================== */

.home-swiper-container {
    background: var(--card-bg, #ffffff);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
    height: 160px;
    display: flex;
    transition: all 0.3s ease;
}

.home-swiper-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
}

.swiper-slide-item {
    display: none;
    width: 100%;
    height: 100%;
    align-items: center;
    gap: 20px;
    text-decoration: none !important;
    animation: swiperFadeIn 0.5s ease-in-out forwards;
}

.swiper-slide-item.active {
    display: flex;
}

/* 左侧封面图 */
.swiper-cover-img {
    width: 180px;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

/* 右侧文本区 */
.swiper-info-box {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 30px;
    /* 留出右侧指示器的空间 */
    overflow: hidden;
}

.swiper-post-date {
    font-size: 0.8rem;
    color: #858585;
    margin-bottom: 8px;
}

.swiper-post-title {
    font-size: 1.2rem !important;
    font-weight: 700;
    color: var(--text-highlight-color, #1f2937) !important;
    margin-bottom: 8px !important;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
}

.swiper-slide-item:hover .swiper-post-title {
    color: #49B1F5 !important;
}

.swiper-post-desc {
    font-size: 0.85rem;
    color: var(--text-color);
    opacity: 0.75;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 右侧小圆点指示器 */
.swiper-dots-nav {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 10;
}

.swiper-dot {
    width: 6px;
    height: 6px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.swiper-dot.active {
    background: #49B1F5;
    height: 16px;
    /* 变成胶囊状 */
    border-radius: 4px;
}

@keyframes swiperFadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

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

/* ==========================================
   DARK MODE — 轮播图黑夜模式自适应
   ========================================== */
[data-theme='dark'] .home-swiper-container {
    background: #252D38 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme='dark'] .swiper-dot {
    background: rgba(255, 255, 255, 0.2);
}

[data-theme='dark'] .swiper-dot.active {
    background: #00c4b6;
}

[data-theme='dark'] .swiper-slide-item:hover .swiper-post-title {
    color: #00c4b6 !important;
}

/* 📱 手机移动端微调：隐藏简介和缩小封面 */
@media screen and (max-width: 768px) {
    .home-swiper-container {
        height: 120px;
        padding: 10px;
    }

    .swiper-cover-img {
        width: 120px;
    }

    .swiper-post-title {
        font-size: 1rem !important;
    }

    .swiper-post-desc {
        display: none;
    }
}

/* ==========================================
   A-Z INDEX COUNT — 标签文章数微调样式
   ========================================= */

#abc-index .letter-group .letter-tags .tag-item {
    gap: 8px !important;
    /* 让标签名和数字之间保持优雅的间距 */
    align-items: center !important;
}

/* 标签内数字的基础样式 */
#abc-index .letter-group .letter-tags .tag-count {
    font-size: 0.72rem !important;
    padding: 1px 6px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    display: inline-block !important;
    transition: all 0.2s ease !important;
}