/* Here is your custom css styles. */
pre {
    background-color: #0b1020 !important;
}

/* ==================================================================
   暗色 · 霓虹 主题（背景 / 面板 / 文字皮肤）
   参考风格：近黑蓝底 + 斜向光泽 + 青色-蓝-紫渐变强调色 +
            深色玻璃面板（1px 渐变描边、内高光、外发光）
   只覆盖颜色、背景、描边、阴影，不改动主题结构和布局。
   所有取值集中在下面的变量里，想换配色只改这里即可。
   ================================================================== */
:root {
    --bg-0: #04060d;
    /* 最底层深色 */
    --panel: rgba(13, 20, 38, .72);
    /* 玻璃面板底色 */
    --panel-solid: #0a1020;
    /* 不透明面板（侧边栏、搜索框） */
    --line: rgba(126, 166, 255, .16);
    /* 细描边 */
    --line-strong: rgba(140, 190, 255, .32);
    /* 强调描边 */
    --text: #e7eef9;
    /* 正文 */
    --text-dim: #a6b6cd;
    /* 次级文字 / 元信息 */
    --text-mute: #74869e;
    /* 最弱文字 */
    --cyan: #22d3ee;
    --blue: #3b82f6;
    --violet: #a855f7;
    --grad: linear-gradient(100deg, #22d3ee 0%, #3b82f6 46%, #a855f7 100%);
    --glow-cyan: 0 0 24px -6px rgba(34, 211, 238, .55);
    --glow-violet: 0 0 30px -8px rgba(168, 85, 247, .45);
    --shadow-panel: 0 24px 55px -30px rgba(0, 0, 0, .95), 0 2px 10px rgba(0, 0, 0, .35);
}

/* ---------- 1. 页面背景：近黑蓝底 + 两处斜向光泽 + 一片品牌色雾 ---------- */
html {
    background-color: var(--bg-0);
}

body {
    color: var(--text);
    background-color: var(--bg-0);
    background-image:
        /* 左上、右下两道很淡的斜向“反光”，对应参考图的高级质感 */
        linear-gradient(135deg, rgba(120, 170, 255, .075) 0%, rgba(120, 170, 255, 0) 34%),
        linear-gradient(315deg, rgba(120, 170, 255, .055) 0%, rgba(120, 170, 255, 0) 30%),
        /* 顶部中央的青色冷光 */
        radial-gradient(1200px 700px at 50% -18%, rgba(56, 189, 248, .16), rgba(56, 189, 248, 0) 62%),
        radial-gradient(900px 620px at 6% 8%, rgba(139, 92, 246, .14), rgba(139, 92, 246, 0) 60%),
        radial-gradient(900px 620px at 98% 12%, rgba(34, 211, 238, .10), rgba(34, 211, 238, 0) 58%),
        linear-gradient(180deg, #060a14 0%, #04060d 55%, #05070f 100%);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

/* 缓慢漂移的光斑（纯 CSS，不依赖外部 CDN；原主题的 canvas-nest 来自已失效的 CDN） */
body::before {
    content: "";
    position: fixed;
    inset: -20vh -20vw;
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(closest-side, rgba(34, 211, 238, .20), rgba(34, 211, 238, 0)),
        radial-gradient(closest-side, rgba(139, 92, 246, .18), rgba(139, 92, 246, 0));
    background-repeat: no-repeat;
    background-position: 10% 22%, 88% 74%;
    background-size: 48vw 48vw, 42vw 42vw;
    filter: blur(28px);
    will-change: transform;
    animation: bg-drift 40s ease-in-out infinite alternate;
}

@keyframes bg-drift {
    from {
        transform: translate3d(-2.5%, -2%, 0) scale(1);
    }

    to {
        transform: translate3d(2.5%, 2.5%, 0) scale(1.08);
    }
}

/* 小屏上 fixed 背景性能较差，回退成跟随滚动 */
@media only screen and (max-width: 992px) {
    body {
        background-attachment: scroll;
    }

    body::before {
        animation: none;
    }
}

::selection {
    background: rgba(56, 189, 248, .32);
    color: #fff;
}

/* 暗色滚动条 */
* {
    scrollbar-color: rgba(126, 166, 255, .28) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(126, 166, 255, .22);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(126, 166, 255, .38);
}

/* ---------- 2. 面板：卡片 = 深色玻璃 + 渐变描边 ---------- */
.card,
.recommend .post-card {
    background-color: transparent;
    background-image:
        linear-gradient(165deg, rgba(15, 23, 44, .92) 0%, rgba(8, 12, 24, .94) 100%),
        linear-gradient(140deg, rgba(56, 189, 248, .40) 0%, rgba(139, 92, 246, .22) 45%, rgba(255, 255, 255, .05) 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border: 1px solid transparent;
    box-shadow: var(--shadow-panel), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}

.card .card-image img {
    border-radius: 9px 9px 0 0;
}

.card .card-action,
.card .card-content {
    background: transparent;
    border-top-color: var(--line);
}

.card .card-title,
.recommend .title,
.dream .title,
.music-player .title,
.video-player .title,
.chip-container .tag-title,
.profile .author .title,
.my-projects .info .info-title,
.my-projects .info .info-title a {
    /* 参考图里的渐变标题字 */
    background-image: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.recommend .post-card:before {
    background-color: rgba(4, 6, 13, .55);
}

.recommend .post-card {
    color: #fff;
    background-image:
        linear-gradient(165deg, rgba(9, 14, 28, .45) 0%, rgba(4, 6, 13, .65) 100%),
        linear-gradient(140deg, rgba(56, 189, 248, .35) 0%, rgba(139, 92, 246, .2) 50%, rgba(255, 255, 255, .04) 100%);
}

/* 列表 / 归档 / 标签页里的浅色文字统一成亮色 */
article a,
.paging .page-info,
.post-statis .statis .name,
.profile .author .career,
#aboutme .introduction,
.my-projects .info .info-desc,
#artDetail .post-info,
#artDetail .post-info .post-category,
#artDetail .post-info .post-date,
#artDetail .post-info .post-read,
.chip-container .chip-default {
    color: var(--text-dim);
}

.chip-container .chip-default .tag-length,
.chip-default .tag-length {
    color: var(--cyan);
}

/* ---------- 3. 正文内容 ---------- */
#articleContent h1,
#articleContent h2,
#articleContent h3,
#articleContent h4,
#articleContent h5,
#articleContent h6,
.card-title,
.card-content {
    color: var(--text);
}

#articleContent h2 {
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--line);
}

#articleContent a,
#artDetail .reprint a,
#artDetail .post-cate a,
.post-statis .statis .count a,
#articleContent a.headerlink {
    color: var(--cyan);
}

#articleContent a:hover {
    color: #7dd3fc;
}

#articleContent blockquote,
blockquote {
    color: var(--text-dim);
    background-color: rgba(56, 189, 248, .07);
    border-left: 3px solid var(--cyan);
    border-radius: 0 8px 8px 0;
}

/* 行内代码（避开代码块里的 code，防止覆盖高亮配色） */
p code,
li code,
td code,
h1 code,
h2 code,
h3 code,
h4 code,
blockquote code {
    color: #7dd3fc;
    background-color: rgba(56, 189, 248, .14);
    border: 1px solid rgba(56, 189, 248, .2);
    border-radius: 5px;
    padding: 0 .3em;
}

/* 表格 */
#articleContent table th,
table th {
    background-color: rgba(126, 166, 255, .10);
    color: var(--text);
}

#articleContent table td,
table td,
table tr:nth-child(2n),
thead {
    background-color: rgba(255, 255, 255, .025);
    color: var(--text);
}

#articleContent table,
th,
td {
    border: 1px solid var(--line);
}

hr {
    border-top: 1px solid var(--line);
}

mark {
    background-color: rgba(250, 204, 21, .22);
    color: #fde68a;
}

#artDetail .reprint {
    border: 1px solid var(--line);
    border-radius: 10px;
    background-color: rgba(255, 255, 255, .03);
}

/* ---------- 4. 顶部导航：未滚动仍全透明，滚动后深色玻璃 + 青色发丝线 ---------- */
#headNav.bg-color:not(.nav-transparent) {
    opacity: 1;
    background-color: rgba(6, 10, 20, .72);
    background-image: none;
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow: inset 0 -1px 0 rgba(56, 189, 248, .22), 0 12px 30px -18px rgba(0, 0, 0, .95);
}

header nav .brand-span,
header nav .nav-menu a {
    text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}

/* 移动端侧边栏 */
#mobile-nav.side-nav.sidenav {
    background-color: var(--panel-solid);
    border-right: 1px solid var(--line);
}

#mobile-nav .menu-list a,
#mobile-nav .mobile-menu-list a i,
header .side-nav .menu-list a {
    color: var(--text) !important;
}

#mobile-nav .mobile-head .logo-desc {
    color: var(--text-mute);
}

.sidenav-overlay {
    background-color: rgba(4, 6, 13, .72);
}

/* ---------- 5. 搜索弹窗 ---------- */
#searchModal {
    background-color: rgba(10, 16, 32, .96);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-panel), inset 0 1px 0 rgba(255, 255, 255, .05);
}

#searchModal .search-header .title,
#searchModal input {
    color: var(--text);
}

#searchModal input::placeholder {
    color: var(--text-mute);
}

#searchResult .search-result-list {
    color: var(--text-dim);
}

.search-result-list li {
    border-bottom: 1px solid var(--line);
}

.search-result-list .search-result-title {
    color: var(--cyan);
}

.search-result-list .search-keyword,
.search-keyword {
    color: #fde047;
    background-color: rgba(250, 204, 21, .16);
}

/* ---------- 6. 标签 / 分类 / 分页 / 按钮 ---------- */
.chip.bg-color {
    opacity: .92;
    box-shadow: var(--glow-cyan);
}

/* 标签/分类页里每个标签的浅色底（浅粉、浅绿…）是主题直接写在 HTML 内联样式里的，
   只能用 !important 盖掉，统一成深色胶囊 + 霓虹描边 */
.chip-container .chip,
.chip-container .chip-default,
.chip[style*="background-color"] {
    background-color: rgba(255, 255, 255, .05) !important;
    border: 1px solid var(--line-strong);
    color: var(--text-dim) !important;
    box-shadow: none;
}

.chip-container .chip-active {
    background: linear-gradient(135deg, #22d3ee 0%, #3b82f6 55%, #a855f7 100%) !important;
    color: #04121a !important;
    box-shadow: var(--glow-cyan) !important;
}

.chip-container .chip-active .tag-length {
    color: #04121a;
}

#artDetail .tag_share .article-tag .chip {
    color: var(--cyan);
    background: rgba(56, 189, 248, .10);
    border-color: var(--line-strong);
}

#artDetail .tag_share .article-tag .chip:hover {
    color: #041018;
    background: var(--cyan);
}

.chip-container .chip:hover {
    background: linear-gradient(to right, #22d3ee 0%, #3b82f6 100%) !important;
    color: #04121a !important;
    border-color: transparent;
    box-shadow: var(--glow-cyan);
}

.paging .disabled {
    background-color: rgba(255, 255, 255, .10) !important;
}

.paging .disabled i {
    color: var(--text-mute) !important;
}

.prev-next .article-badge {
    background-color: rgba(255, 255, 255, .06);
    color: var(--text);
}

.other-skills .chip {
    background-color: rgba(56, 189, 248, .10);
    border: 1px solid var(--line-strong);
    color: var(--text);
}

/* ---------- 7. 页脚 ---------- */
footer.page-footer.bg-color {
    opacity: 1;
    background-color: #05070f;
    background-image:
        radial-gradient(900px 340px at 10% 0%, rgba(34, 211, 238, .22), rgba(34, 211, 238, 0) 70%),
        radial-gradient(900px 340px at 90% 6%, rgba(139, 92, 246, .24), rgba(139, 92, 246, 0) 70%),
        linear-gradient(180deg, #070c18 0%, #04060d 100%);
    border-top: 1px solid var(--line);
}

footer.page-footer.bg-color .copy-right {
    color: rgba(255, 255, 255, .62);
}

/* ---------- 8. Banner 遮罩：去掉主题里 60s 循环的彩虹动画 ---------- */
.bg-cover:before,
.bg-cover:after {
    animation: none !important;
    background: none;
    pointer-events: none;
}

.bg-cover:before {
    background-image: linear-gradient(to bottom,
            rgba(3, 5, 12, .70) 0%,
            rgba(3, 5, 12, .34) 38%,
            rgba(3, 5, 12, .38) 68%,
            rgba(3, 5, 12, .74) 100%);
}

.bg-cover:after {
    background-image: linear-gradient(115deg,
            rgba(34, 211, 238, .22) 0%,
            rgba(59, 130, 246, .14) 46%,
            rgba(168, 85, 247, .26) 100%);
}

.index-cover .indicators .indicator-item {
    background-color: rgba(255, 255, 255, .35);
}

.index-cover .indicators .indicator-item.active {
    background-color: var(--cyan);
    box-shadow: var(--glow-cyan);
}

/* ---------- 9. 首页小挂件 ---------- */
.profile .author .career,
#aboutme .introduction {
    color: var(--text-dim);
}

.my-skills .skillbar {
    background: rgba(255, 255, 255, .08);
}

.my-skills .skillbar .skill-bar-percent {
    color: var(--text);
}

.jqcloud a {
    text-shadow: none !important;
}

/* ECharts 文章日历的配色写在每个页面的内联脚本里，无法用 CSS 改；
   这里给这张卡片保留浅色内衬，保证图表可读 */
.card:has(#post-calendar) {
    background-color: #eef2f8;
    background-image: none;
}

/* ---------- 10. Logo 与标签的细节修正 ---------- */
header .brand-logo a,
header .brand-logo .logo-span {
    color: #fff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}

/* 标签默认自带一层浅灰底色，改成让渐变透出来 */
.chip.bg-color {
    background-color: transparent;
}

/* ---------- 11. 归档时间轴：竖线、年份/月份/日期标记改成霓虹色 ---------- */
.cd-timeline-content {
    background: transparent;
    box-shadow: none !important;
}

#cd-timeline::before {
    background: linear-gradient(180deg, #22d3ee 0%, #3b82f6 50%, #a855f7 100%);
    box-shadow: 0 0 18px -2px rgba(34, 211, 238, .6);
}

#cd-timeline .year,
#cd-timeline .month,
#cd-timeline .day {
    background-color: var(--panel-solid);
    background-image: none;
    border-radius: 8px;
}

#cd-timeline .year {
    color: #7dd3fc;
    box-shadow: 0 0 0 2px rgba(34, 211, 238, .85), var(--glow-cyan);
}

#cd-timeline .month {
    color: #bfdbfe;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, .85), 0 0 22px -6px rgba(59, 130, 246, .6);
}

#cd-timeline .day {
    color: #e9d5ff;
    box-shadow: 0 0 0 2px rgba(168, 85, 247, .85), var(--glow-violet);
}

.cd-timeline-img {
    background-color: var(--panel-solid);
    box-shadow: 0 0 0 4px #05070f, 0 0 20px -2px rgba(34, 211, 238, .55);
}

/* ---------- 12. 评论区（Valine）：组件自带的浅色面板改深色 ----------
   组件样式由 JS 运行时注入、页面里还有内联样式，这里用 html body #vcomments
   提高权重，保证覆盖顺序无关。 */
html body #vcomments .vwrap,
html body #vcomments .vcard {
    background: transparent;
    border-color: var(--line);
}

html body #vcomments textarea,
html body #vcomments .veditor {
    background: rgba(255, 255, 255, .03);
    color: var(--text);
    border-radius: 8px;
}

html body #vcomments textarea::placeholder,
html body #vcomments .veditor::placeholder,
html body #vcomments .vinput::placeholder {
    color: var(--text-mute);
}

html body #vcomments .vinput,
html body #vcomments input {
    color: var(--text);
    border-bottom-color: var(--line-strong);
}

html body #vcomments a,
html body #vcomments .vnick {
    color: var(--cyan);
}

html body #vcomments .vtime,
html body #vcomments .vempty,
html body #vcomments .vmore {
    color: var(--text-mute);
}

html body #vcomments .vcontent,
html body #vcomments .vcontent p,
html body #vcomments .vtext {
    color: var(--text);
}

html body #vcomments .vquote {
    color: var(--text-dim);
    border-left-color: var(--line-strong);
}

html body #vcomments .vsys,
html body #vcomments .vcode {
    background: rgba(255, 255, 255, .08);
    color: var(--text-dim);
}

html body #vcomments .vbtn {
    color: var(--text);
    background: rgba(255, 255, 255, .08);
    border-color: var(--line);
}

html body #vcomments .vbtn:hover {
    background: rgba(255, 255, 255, .14);
}

html body #vcomments .vsubmit.vbtn,
html body #vcomments .vsure.vbtn {
    color: #04121a;
    background: linear-gradient(100deg, #22d3ee 0%, #3b82f6 100%);
    border-color: transparent;
    box-shadow: var(--glow-cyan);
}

html body #vcomments .vsubmit.vbtn:hover,
html body #vcomments .vsure.vbtn:hover {
    color: #04121a;
    background: linear-gradient(100deg, #67e8f9 0%, #60a5fa 100%);
}

html body #vcomments .vemoji-btn,
html body #vcomments .vpreview-btn {
    color: var(--text-dim);
}

html body #vcomments .vemojis,
html body #vcomments .vpreview,
html body #vcomments .vpage {
    background: rgba(10, 16, 32, .98);
    border: 1px solid var(--line);
    color: var(--text);
}

/* Valine 把预览/校验遮罩画成白底黑字，一并改深 */
html body #vcomments .vmark {
    background: rgba(4, 6, 13, .86);
}

/* ---------- 13. 音乐播放器（APlayer）----------
   组件默认是白色皮肤，这里换成深色玻璃配色；
   歌词功能已停用（meting lrc-type=0），这里再兜底隐藏歌词栏 */
html body .aplayer .aplayer-lrc {
    display: none !important;
}
html body .aplayer,
html body .aplayer .aplayer-body,
html body .aplayer.aplayer-fixed .aplayer-body {
    background-color: var(--panel-solid) !important;
    border-radius: 12px;
}

html body .aplayer {
    border: 1px solid var(--line);
    box-shadow: var(--shadow-panel);
}

html body .aplayer .aplayer-info,
html body .aplayer.aplayer-withlist .aplayer-info {
    border-bottom-color: var(--line);
    border-top-color: var(--line);
}

html body .aplayer .aplayer-music .aplayer-title {
    color: var(--text);
}

html body .aplayer .aplayer-music .aplayer-author,
html body .aplayer .aplayer-time {
    color: var(--text-mute);
}

html body .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path {
    fill: var(--text-dim);
}

html body .aplayer .aplayer-list ol li {
    color: var(--text-dim);
    border-top-color: var(--line);
}

html body .aplayer .aplayer-list ol li:hover {
    background: rgba(56, 189, 248, .12);
}

html body .aplayer .aplayer-list ol li.aplayer-list-light {
    background: rgba(56, 189, 248, .18);
    color: #fff;
}

html body .aplayer .aplayer-list ol li .aplayer-list-index,
html body .aplayer .aplayer-list ol li .aplayer-list-author {
    color: var(--text-mute) !important;
}

html body .aplayer .aplayer-list-cur,
html body .aplayer .aplayer-played {
    background: var(--cyan) !important;
}

html body .aplayer .aplayer-bar-wrap .aplayer-bar {
    background: rgba(255, 255, 255, .14);
}

html body .aplayer .aplayer-bar-wrap .aplayer-bar .aplayer-loaded {
    background: rgba(255, 255, 255, .26);
}

html body .aplayer .aplayer-lrc p {
    color: var(--text-mute);
}

html body .aplayer .aplayer-lrc p.aplayer-lrc-current {
    color: var(--cyan) !important;
}

/* 歌词上下淡出用的白色渐变，深色下要改成透明 */
html body .aplayer .aplayer-lrc:before,
html body .aplayer .aplayer-lrc:after {
    background: none;
}

html body .aplayer .aplayer-miniswitcher {
    background: rgba(255, 255, 255, .10);
}

html body .aplayer .aplayer-miniswitcher .aplayer-icon path {
    fill: var(--text-dim);
}

html body .aplayer .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar {
    background: rgba(255, 255, 255, .14);
}

html body .aplayer .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar .aplayer-volume {
    background: var(--cyan);
}

html body .aplayer .aplayer-notice {
    background-color: rgba(10, 16, 32, .95);
    border: 1px solid var(--line);
    color: var(--text);
}

/* ---------- 14. 品牌渐变统一成参考图的「青 → 蓝 → 紫」----------
   原来 .bg-color 是 品红→青 的渐变且整体 opacity:.7（连文字一起变淡），
   这里换成霓虹三色渐变并去掉全局透明。想恢复旧色只改这一行即可。 */
.bg-color {
    background-image: linear-gradient(120deg, #22d3ee 0%, #3b82f6 55%, #a855f7 100%);
    opacity: 1;
}

/* 阅读进度条 */
.progress-bar {
    background: linear-gradient(to right, #22d3ee 0%, #3b82f6 50%, #a855f7 100%);
    box-shadow: var(--glow-cyan);
}

/* 返回顶部 / 悬浮按钮 */
.btn-floating.bg-color {
    box-shadow: var(--glow-cyan);
}

/* ---------- 15. 尊重「减弱动态效果」 ---------- */
@media (prefers-reduced-motion: reduce) {

    body::before,
    .bg-cover:before,
    .bg-cover:after {
        animation: none !important;
    }
}

/* ==================================================================
   17. 社交图标：放大 + 每个平台一个鲜艳渐变徽章
   作用范围：首页横幅（.cover-social-link）与页脚（.social-statis）
   ================================================================== */
.cover-social-link,
.social-statis {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.cover-social-link a,
.social-statis a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin: 6px;
    border-radius: 50%;
    color: #fff !important;
    text-shadow: none !important;
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

.cover-social-link a i,
.social-statis a i {
    font-size: 1.4rem;
    line-height: 1;
}

/* 按平台分配鲜艳渐变（第 1~6 个：GitHub / 邮箱 / Facebook / QQ / 微博 / RSS） */
.cover-social-link a:nth-child(1),
.social-statis a:nth-child(1) {
    background: linear-gradient(135deg, #a78bfa 0%, #6d28d9 100%);
    box-shadow: 0 6px 20px -6px rgba(139, 92, 246, .85);
}

.cover-social-link a:nth-child(2),
.social-statis a:nth-child(2) {
    background: linear-gradient(135deg, #fb923c 0%, #f43f5e 100%);
    box-shadow: 0 6px 20px -6px rgba(244, 63, 94, .85);
}

.cover-social-link a:nth-child(3),
.social-statis a:nth-child(3) {
    background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%);
    box-shadow: 0 6px 20px -6px rgba(37, 99, 235, .85);
}

.cover-social-link a:nth-child(4),
.social-statis a:nth-child(4) {
    background: linear-gradient(135deg, #22d3ee 0%, #0284c7 100%);
    box-shadow: 0 6px 20px -6px rgba(34, 211, 238, .85);
}

.cover-social-link a:nth-child(5),
.social-statis a:nth-child(5) {
    background: linear-gradient(135deg, #fb7185 0%, #e11d48 100%);
    box-shadow: 0 6px 20px -6px rgba(225, 29, 72, .85);
}

.cover-social-link a:nth-child(6),
.social-statis a:nth-child(6) {
    background: linear-gradient(135deg, #fbbf24 0%, #f97316 100%);
    box-shadow: 0 6px 20px -6px rgba(249, 115, 22, .85);
}

/* 悬停：放大 + 高亮 */
.cover-social-link a:hover,
.social-statis a:hover {
    transform: translateY(-4px) scale(1.1);
    filter: brightness(1.15);
}

@media (prefers-reduced-motion: reduce) {

    .cover-social-link a,
    .social-statis a {
        transition: none !important;
    }
}

/* ==================================================================
   16. 顶部导航栏精修
   透明态加暗色纱保证可读性；品牌区圆形徽章 + 渐变站名；
   导航项胶囊悬停 + 渐变下划线；下拉菜单深色玻璃化；搜索圆钮。
   ================================================================== */

/* 16.1 透明态（覆盖在 banner 上）：加一层向下淡出的暗色纱，文字不再发飘 */
header #headNav.nav-transparent {
    background-color: transparent !important;
    background-image: linear-gradient(180deg,
            rgba(3, 6, 14, .66) 0%, rgba(3, 6, 14, .34) 58%, rgba(3, 6, 14, 0) 100%);
    box-shadow: none;
}

/* 16.2 滚动后的玻璃态：更深的模糊 + 发丝线 + 底部投影 */
#headNav.bg-color:not(.nav-transparent) {
    background-color: rgba(6, 10, 20, .78);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    box-shadow:
        inset 0 -1px 0 rgba(56, 189, 248, .25),
        0 12px 34px -18px rgba(0, 0, 0, .95);
}

/* 16.3 品牌区：logo 与站名垂直居中，圆形徽章 + 悬停微动 */
header .brand-logo a {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    height: 64px;
    vertical-align: top;
}

header .brand-logo .logo-img {
    height: 38px;
    width: 38px;
    padding-bottom: 0;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid rgba(125, 211, 252, .38);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, .10), 0 2px 12px rgba(0, 0, 0, .45);
    transition: transform .35s ease, box-shadow .35s ease;
}

header .brand-logo a:hover .logo-img {
    transform: scale(1.08) rotate(6deg);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, .22), var(--glow-cyan);
}

/* 站名：浅蓝→淡紫的文字渐变，代替纯白 */
header .brand-logo .logo-span {
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #e0f2fe;
    background: linear-gradient(100deg, #f0f9ff 0%, #7dd3fc 52%, #c4b5fd 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}

/* 16.4 导航项：胶囊底 + 渐变下划线滑入 */
header nav .nav-menu > li > a {
    position: relative;
    margin: 0 2px;
    padding: 0 14px;
    border-radius: 10px;
    transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}

header nav .nav-menu > li > a > i {
    color: #9fc3e8;
    transition: color .25s ease;
}

header nav .nav-menu > li > a::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 13px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #22d3ee, #3b82f6, #a855f7);
    box-shadow: var(--glow-cyan);
    opacity: 0;
    transition: left .28s ease, right .28s ease, opacity .28s ease;
}

header nav .nav-menu > li > a:hover {
    background: rgba(125, 211, 252, .10);
    text-shadow: none;
}

header nav .nav-menu > li > a:hover > i {
    color: #22d3ee;
}

header nav .nav-menu > li > a:hover::after {
    left: 14px;
    right: 14px;
    opacity: 1;
}

/* 「媒体 ▼」的箭头随悬停翻转 */
header nav .nav-menu > li > a .fa-chevron-down {
    transition: transform .3s ease;
}

header nav .nav-menu > li:hover > a .fa-chevron-down {
    transform: rotate(180deg);
}

/* 16.5 下拉菜单：白色面板换成深色玻璃 + 霓虹悬停 */
header nav .nav-menu li .sub-nav.menus_item_child {
    top: 60px;
    margin-left: 0;
    padding: 8px;
    min-width: 150px;
    background-color: rgba(10, 16, 32, .96);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-panel), inset 0 1px 0 rgba(255, 255, 255, .05);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

header nav .nav-menu li .sub-nav.menus_item_child::before {
    border-color: transparent transparent rgba(10, 16, 32, .96);
}

header nav .nav-menu li .sub-nav.menus_item_child li {
    width: auto;
    height: auto;
    line-height: 1;
}

header nav .nav-menu li .sub-nav.menus_item_child li a {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding: 0 14px;
    border-radius: 9px;
    color: var(--text-dim);
    text-align: left;
    transition: background-color .2s ease, color .2s ease;
}

/* 覆盖模板里写死的 margin-top:-20px，让图标回到垂直居中 */
header nav .nav-menu li .sub-nav.menus_item_child li a i {
    margin: 0 !important;
    width: 14px;
    text-align: center;
}

header nav .nav-menu li .sub-nav.menus_item_child li a:hover {
    color: #7dd3fc;
    background: rgba(56, 189, 248, .12);
}

/* 16.6 搜索按钮：圆形玻璃钮，悬停发光 */
header nav .nav-menu li a.modal-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    border-radius: 50%;
}

#searchIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(125, 211, 252, .10);
    border: 1px solid var(--line-strong);
    color: #bfe3ff !important;
    transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

header nav .nav-menu li a.modal-trigger:hover #searchIcon {
    background: rgba(34, 211, 238, .18);
    box-shadow: var(--glow-cyan);
    transform: scale(1.06);
}

/* 16.7 减弱动态效果时关闭导航的过渡动画 */
@media (prefers-reduced-motion: reduce) {

    header .brand-logo .logo-img,
    header nav .nav-menu > li > a,
    header nav .nav-menu > li > a::after,
    header nav .nav-menu > li > a .fa-chevron-down,
    #searchIcon {
        transition: none !important;
    }
}