/* ==========================================================================
   niRvana-diy 右侧边栏
   - 配色对齐主题：浅色 主色 #20a0ff / 正文 #657487 / 标题 #475669 / 次要 #99a9bf
     深色 卡片 #28374a / 边框 #3b4b67 / 正文 #99a9bf / 强调 #c0ccda / 次要 #738192
   - 所有文字/链接规则都带 .ni-right-aside 前缀，避免被主题全局 a[href]{color:#20a0ff}
     和 a:hover 覆盖（尤其深色模式下整片文字偏亮、与正文不统一）。
   - 只在 head.php 判断「边栏总开关」开启时加载；关闭时本文件完全不引入。
   - grid 只作用于带 .ni-aside-layout 的内容容器，aside 固定在第 2 列，
     其余子元素统一在第 1 列， banner / coverflow 头图在容器之外不受影响。
   ========================================================================== */

#main .container.ni-aside-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--ni-aside-w, 300px);
    padding-top: 0px;
    grid-auto-flow: row dense;
    column-gap: 24px;
    align-items: start;
}

#main .container.ni-aside-layout > *:not(.ni-right-aside) {
    grid-column: 1;
    order: 1;
    min-width: 0;
}
#main .container.ni-aside-layout > .ni-right-aside {
    grid-column: 2;
    order: 2;
    min-width: 0;
    align-self: start;
    position: sticky;
    top: 76px;
}

/* ---------- 让边栏第一张卡片与第一篇文章顶边齐平 ----------
   首页 / 归档 / 分类 / 标签 / 搜索页的正文列顶部有一条分类导航条
   （.categoryNav-wrapper：高 56px，navigation 上下各留 5px 间距），它把文章列表
   整体压低了 66px；而边栏是 grid 的第 2 列、从容器顶边开始排，于是边栏比文章高出
   一个导航条，视觉上「边栏冒头」。
   这里在**存在导航条**的页面把边栏整体下移同样高度，两者顶边对齐（实测 515 → 581，
   差值 0，1201~1920px 恒定）。文章页 / 独立页面没有这条导航，`:has()` 不命中，
   边栏仍从容器顶边开始，维持原样。
   为什么用固定值而不是让它自动跟随：导航条是一行横向滚动的 tab（pandaTab），
   任何宽度下高度都是 56px，不会换行；sticky 定位也不受 margin 影响。
   注意：这 66px 只是首屏兜底。实际对齐全靠 footer.php 里的 __niAsideAlignSync——
   运行时按「首个可见内容块的顶边 − 边栏顶边」把差值写进内联 margin-top，
   导航条高度 / 容器内边距在不同机器上差几像素时也能对齐（写死值会差一截）。 */
body:has(#main .categoryNav-wrapper) #main .container.ni-aside-layout > .ni-right-aside {
    margin-top: 66px;
}

/* 微语页标题栏（「微言微语」/「微语详情」+ 发布动态按钮）横跨两列。
   模板已把它从 .page-microblog-wrap 里挪出来，成为内容容器的直接子元素，
   这样才能吃到 grid：order:0 排最前，grid-column 1/-1 占满整行。
   效果：发布动态按钮落到整行最右侧，标题栏不再只占左列、右上不再留 300px 空白，
   边栏自然从「第一条微语卡片」那一行开始。 */
#main .container.ni-aside-layout > .page-microblog-head {
    grid-column: 1 / -1;
    order: 0;
    /* 左右 auto 外边距会让 grid 子项不再 stretch，必须显式给宽度；
       同时锁 border-box，避免 1px 边框把宽度撑出 2px 产生横向滚动。 */
    width: 100%;
    box-sizing: border-box;
    /* 与 .page-microblog-wrap 的 1260px 上限对齐，站点宽度调到 1260 以上时不会超宽 */
    max-width: 1260px;
    margin-left: auto;
    margin-right: auto;
}

/* 微语页标题栏已经跨行，边栏和卡片的起点只差 .page-microblog-wrap 的 padding-top。
   这个 20px 只是 JS 测量前的一帧兜底，footer.php 的 __niAsideAlignSync 会覆盖。 */
body:has(#main .page-microblog-card) #main .container.ni-aside-layout > .ni-right-aside,
body:has(#main .page-microblog-card-m) #main .container.ni-aside-layout > .ni-right-aside {
    margin-top: 5px;
}

/* ---------- 列表分页：跨两列、整页居中，胶囊骑在 footer 边线上 ----------
   1) 位置：分页条原先嵌在左侧正文列内部、跟着文章列表走。加右侧边栏后边栏明显
      高于正文，文章少时分页条就悬在页面中部，而且只在左列内居中、相对整页中心
      偏左（"错位"）。模板已把 pagenav.php 提升为 .ni-aside-layout 的直接子元素，
      这里用 order 让它最后放置并跨两列：位置钉在内容区底部、与整页中心对齐，
      不再随文章数量漂移。
   2) 压边：主题原有 .pagenav{margin-bottom:-20px} 就是让 40px 高的胶囊**半压**
      在 footer 边线上（`.pagenav+#footer{padding-top:40px}` 负责补偿）。分页条挪出
      正文列后这条相邻选择器不再命中，所以这里显式保留 -20px 压边，见下方 footer
      补白规则。恢复成 +32px 会让胶囊浮在内容区里、离开边线，与设计不符。
   边栏总开关关闭时容器不是 grid，分页条退回普通块级元素，压边效果不变。 */
#main .container.ni-aside-layout > .pagenav.page-microblog-pagi {
    grid-column: 1 / -1;
    order: 3;
    margin: 24px auto -20px;
}

/* 微语页的分页条只有 .page-microblog-pagi 一个类（没有 .pagenav），
   上面那条规则命中不了它，它就被当成普通子元素放在第 1 列 —— 宽度只有正文列，
   胶囊在左列内居中，相对整页中心偏左 162px（= (边栏 300 + 间距 24) / 2）。
   这里同样让它跨两列、最后放置，居中就交给内部 ul 的 margin:auto。
   压边不用在这里补：微语页的 -20px 写在 .home-pagination 自己的 margin 里。 */
#main .container.ni-aside-layout > .page-microblog-pagi:not(.pagenav) {
    grid-column: 1 / -1;
    order: 3;
    margin: 0;
}

/* 分页条向下压了 20px 到 footer 里，footer 需要多让出这段高度，
   否则版权文字会贴着胶囊下沿。列表页与微语页都要（两页胶囊压边方式不同，
   但需要的补白一致），仅在存在分页条的页面生效。 */
body:has(#main .page-microblog-pagi) #footer {
    padding-top: 50px;
}

/* ---------- 兜底：分页条还没挪到容器末尾时，也要在整页居中 ----------
   旧版模板把 pagenav.php 留在左侧正文列里，它只会在正文列内居中，
   相对整页中心固定偏左「半个边栏宽 + 半条间距」= (300+24)/2 = 162px。
   这里用左右等量的正负外边距把整个盒子右移 162px、宽度不变，胶囊就落到整页中线。
   选择器带 :not(:has(> .pagenav))，一旦模板更新（分页条成为容器直接子元素）就自动失效，
   不会与上面的 grid 居中叠加。窄屏（≤1200px）边栏收起、正文本来就是满宽，故不套用。 */
@media (min-width: 1201px) {
    #main .container.ni-aside-layout:not(:has(> .pagenav.page-microblog-pagi)) .pagenav.page-microblog-pagi {
        margin-left: calc((var(--ni-aside-w, 300px) + 24px) / 2);
        margin-right: calc((var(--ni-aside-w, 300px) + 24px) / -2);
    }
    /* 微语页同理：分页条还被包在正文列里时也右移 162px（判据改成看直接子元素是否有它） */
    #main .container.ni-aside-layout:not(:has(> .page-microblog-pagi)) .page-microblog-pagi:not(.pagenav) {
        margin-left: calc((var(--ni-aside-w, 300px) + 24px) / 2);
        margin-right: calc((var(--ni-aside-w, 300px) + 24px) / -2);
    }
}

/* 页面宽度：不再覆盖容器的 width / max-width。
   容器宽度完全由 head.php 依据后台「全局宽度」输出，边栏只占用容器内部的 300px，
   整站宽度始终受后台设置控制，不会出现加了边栏就整页变宽 / 横向溢出的情况。 */

.ni-right-aside {
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-size: 13px;
    line-height: 1.6;
    color: #657487;
}
.ni-aside-card {
    background: #fff;
    border: 1px solid #e9edf3;
    border-radius: 12px;
    box-shadow: 0 3px 14px rgba(31, 45, 61, .06);
    padding: 16px 18px;
    overflow: hidden;
}
/* ---------- 板块标题：沿用关于页 .ni-ab-section-head 的下划线滑动动画 ----------
   蓝色渐变短条 left:30px / 宽 40px，hover 展开到 67px；图标与文字同时变色。
   主题全局 article h2 的橙色下边框与 :before 锚点空块在这里一并清掉。 */
.ni-right-aside .ni-aside-title {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    padding: 0 0 7px;
    border: 0 !important;
    border-bottom: 1px solid #d8e0ea;
    color: #738192;
    font-size: 16px;
    font-weight: normal;
    line-height: 1.4;
    -webkit-box-shadow: 0 1px rgba(255, 255, 255, .5);
    box-shadow: 0 1px rgba(255, 255, 255, .5);
    -webkit-transition: .25s;

  
 


}
.ni-right-aside .ni-aside-title::before { content: none !important; display: none !important; }
.ni-right-aside .ni-aside-title::after {
    content: "";
    position: absolute;
    left: 30px;
    bottom: -1px;
    width: 40px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(#58b7ff 30%, #20a0ff 70%);
    box-shadow: 0 3px 3px rgba(32, 160, 255, .4);
    z-index: 1;
    transition: width .25s;
}
.ni-right-aside .ni-aside-title:hover { color: #20a0ff; }
.ni-right-aside .ni-aside-title:hover::after { width: 67px; }
.ni-aside-title-ico { width: 20px; height: 20px; flex: none; color: #20a0ff; transition: color .25s; }
/* 后台「自定义图标」填的三种形态（iconfont 类名 / emoji / 自绘 SVG），
   尺寸与颜色对齐上面的默认图标，标题是 flex 行所以只需 flex:none 不被压缩 */
.ni-right-aside .ni-aside-title > .icon,
.ni-right-aside .ni-aside-title > .ni-aside-title-emoji {
    flex: none;
    font-size: 18px;
    line-height: 1;
    color: #20a0ff;
    transition: color .25s;
}
.ni-right-aside .ni-aside-title > svg { width: 20px; height: 20px; flex: none; color: #20a0ff; }

/* ---------- 标题行 PREV / NEXT 翻页（对齐 zhoutian.com 侧栏） ----------
   后台填的是总条数，每页条数由各自板块的「XX 每页条数」决定。
   nav 绝对定位在标题右侧，h2 的下边框与蓝色滑动下划线仍贯穿整行、不受影响。 */
.ni-aside-card-head { position: relative; }
.ni-aside-card-head .ni-aside-title { padding-right: 132px; }
.ni-aside-pager {
    position: absolute;
    right: 0;
    top: -3px;
    display: inline-flex;
    align-items: stretch;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(31, 45, 61, .05);
}
.ni-aside-pager-btn {
    appearance: none;
    margin: 0;
    border: 0;
    background: transparent;
    padding: 5px 9px;
    color: #738192;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.3;
    white-space: nowrap;
    cursor: pointer;
    transition: color .2s ease, background .2s ease;
}
.ni-aside-pager-btn + .ni-aside-pager-btn { border-left: 1px solid #eef1f5; }
.ni-aside-pager-btn span { font-size: 13px; line-height: 0; margin: 0 2px; }
.ni-aside-pager-btn:not(:disabled):hover { color: #20a0ff; background: #f0f7ff; }
.ni-aside-pager-btn:disabled { color: #c0ccda; cursor: default; }
.ni-aside-pager-btn:focus-visible { outline: 2px solid #20a0ff; outline-offset: -2px; }

/* 分页隐藏的条目：li 本身有 display:flex / padding，必须显式覆盖 hidden */
.ni-aside-paginated > li[hidden] { display: none !important; }
.ni-aside-paginated > li.ni-aside-page-first { padding-top: 0 !important; }
.ni-aside-paginated > li.ni-aside-page-last { border-bottom: 0 !important; padding-bottom: 0 !important; }

/* ---------- 个人资料卡：横向「方形圆角头像 + 名称/简介」 ----------
   配色对齐 niRvana：其余小工具都是白底 + #e9edf3 细边框，资料卡也用同一套底，
   只在顶部叠一层极淡的主色冷调（#f7faff → #fff）做层次，不再用整块蓝渐变，
   避免它在一列白卡片里跳出来；蓝色只留在头像描边半径、悬停态这些点缀上。 */
.ni-aside-profile {
    padding: 18px 18px 16px;
    /* --page-card 只定义在 page_microblog.css（微语页专属），而该样式表带
       data-pjax-page，PJAX 换到首页时会被移除；变量一消失背景就整块失效。
       这里补 #fff 兜底，资料卡底色不再依赖微语页是否加载。深色模式由下方
       html[data-dark="1"] 的渐变规则覆盖，不受影响。 */
    background: var(--page-card, #fff);
    border-color: #e9edf3;
}
.ni-aside-profile-main { display: flex; align-items: center; gap: 14px; }
.ni-aside-profile-avatar { flex: none; width: 64px; height: 64px; }
.ni-aside-avatar {
    display: block;
    width: 64px; height: 64px;
    /* 主题全局有 img{border-radius:10px!important}，必须同样加 !important 才能生效 */
    border-radius: 19px !important;
    object-fit: cover;
    background: #edf3fb;
    box-shadow: 0 2px 8px rgba(31, 45, 61, .12);
}
/* 没配头像时的首字占位 */
.ni-aside-avatar-letter {
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 700; line-height: 1;
    color: #fff; text-transform: uppercase; user-select: none;
    background: linear-gradient(135deg, #5cb6ff, #20a0ff);
}
/* 有真实头像时藏起占位，加载失败时 footer 脚本会翻上来 */
.ni-aside-profile-avatar img.ni-aside-avatar + .ni-aside-avatar-letter { display: none; }
.ni-aside-profile-text { flex: 1; min-width: 0; }
.ni-right-aside .ni-aside-name {
    /* 取主题标题色 #475669，与各板块标题同一层级 */
    font-size: 19px; font-weight: 700; color: #475669; line-height: 1.35;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ni-right-aside .ni-aside-bio {
    margin: 3px 0 0;
    font-size: 12.5px; line-height: 1.5; color: #738192;
    /* 简介最多两行，超出省略，卡片高度不会因长简介被撑高 */
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden;
}
/* ---------- 热评文章 / 热门文章（共用列表结构） ---------- */
.ni-aside-hot-list { list-style: none; margin: 0; padding: 0; }
.ni-aside-hot-list li {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 0;
    border-bottom: 1px dashed #eef1f5;
}
/* 仅热评文章、热门文章两个板块：鼠标悬停时只让标题文字右移 7px，
   前边的数字排名（.ni-aside-rank）与后边的计数（.ni-aside-count）保持不动。 */
.ni-aside-hover-shift .ni-aside-hot-list li:hover a { transform: translateX(7px); }
.ni-aside-hot-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.ni-aside-rank {
    flex: none; width: 20px; height: 20px;
    border-radius: 6px; background: #f0f2f7; color: #738192;
    font-size: 11px; line-height: 20px; text-align: center;
}
.ni-aside-rank.top { background: linear-gradient(135deg, #20a0ff, #2f8cf0); color: #fff; }
/* 随机文章本身没有排名含义：序号一律不套底色，1/2/3 与 4/5/6 完全同款（同样的灰字），
   既不要蓝色渐变块，也不要特殊文字色 / 加粗。
   作用域限定在 .ni-aside-random，热评文章 / 热门文章的名次样式保持不变。 */
.ni-aside-random .ni-aside-rank,
.ni-aside-random .ni-aside-rank.top { background: none; color: #738192; }
.ni-right-aside .ni-aside-hot-list a {
    flex: 1; min-width: 0;
    /* 预留 7px：hover 右移后右边界刚好回到原位，不会压到后面的「N 评 / N 阅」 */
    padding-right: 7px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: #657487; text-decoration: none;
    transition: transform .22s ease, color .22s ease;
}
.ni-right-aside .ni-aside-hot-list a:hover { color: #20a0ff; }
.ni-right-aside .ni-aside-count { flex: none; font-size: 11px; color: #99a9bf; }

/* ---------- 最新评论（对齐参考站：圆形头像 + 昵称/日期 + 内容气泡 + [文章] 来源） ---------- */
.ni-aside-comment-list { list-style: none; margin: 0; padding: 0; }
.ni-aside-comment { padding: 9px 0; border-bottom: 1px dashed #eef1f5; }
.ni-aside-comment:first-child { padding-top: 0; }
.ni-aside-comment:last-child { border-bottom: 0; padding-bottom: 0; }
.ni-right-aside .ni-aside-comment-head { display: flex; align-items: center; gap: 8px; }
.ni-right-aside .ni-aside-comment-avatar {
    flex: none; width: 24px; height: 24px;
    /* 覆盖主题全局 img{border-radius:10px!important}，保持圆形头像 */
    border-radius: 50% !important; object-fit: cover; background: #f0f2f7;
}
.ni-right-aside .ni-aside-comment-avatar-fallback {
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 12px; font-weight: 600;
    background: linear-gradient(135deg, #20a0ff, #2f8cf0);
}
/* 有真实头像时把首字占位藏起来；图片加载失败时 footer 脚本会隐藏 <img> 并显示它 */
.ni-aside-comment-head img.ni-aside-comment-avatar + .ni-aside-comment-avatar-fallback { display: none; }
.ni-right-aside .ni-aside-comment-author {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: 600; color: var(--page-heading);
}
.ni-right-aside .ni-aside-comment-head time { flex: none; font-size: 11px; color: #99a9bf; }
/* 气泡小箭头：从气泡上边缘顶出一个小三角，指向头像。
   不能挂在 .ni-aside-comment-text 上 —— 它为了 -webkit-line-clamp 必须 overflow:hidden，
   绝对定位的伪元素会被裁掉，所以改挂在头像那一行（.ni-aside-comment-head）的下沿。 */
.ni-right-aside .ni-aside-comment-head { position: relative; }
.ni-right-aside .ni-aside-comment-head::after {
    content: ""; position: absolute;
    left: 10px; top: 100%;
    width: 10px; height: 7px;
    background: #f7f8fa;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    transition: background .2s ease;
    pointer-events: none;
}
/* 没有正文气泡（纯表情/空评论）时不要留一个孤零零的箭头 */
.ni-aside-comment:not(:has(.ni-aside-comment-text)) .ni-aside-comment-head::after { display: none; }
/* 箭头颜色跟着气泡走：悬停气泡时一起变蓝底 */
.ni-aside-comment:has(.ni-aside-comment-text:hover) .ni-aside-comment-head::after { background: #eef5ff; }
.ni-right-aside .ni-aside-comment-text {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
    margin: 7px 0 5px; padding: 9px 11px;
    border-radius: 10px; background: #f7f8fa;
    color: #657487; font-size: 12px; line-height: 1.7; text-decoration: none;
    transition: background .2s ease, color .2s ease;
}
.ni-right-aside .ni-aside-comment-text:hover { background: #eef5ff; color: #20a0ff; }
.ni-right-aside .ni-aside-comment-from {
    display: block; font-size: 11px; color: #738192;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none;
}
.ni-right-aside .ni-aside-comment-from:hover { color: #20a0ff; }
.ni-right-aside .ni-aside-comment-from-tag { color: #20a0ff; font-weight: 600; }

/* ---------- 热门标签：三列等宽网格铺满整张卡片，不再右侧留空 ---------- */
.ni-right-aside .ni-aside-tags {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}
.ni-right-aside .ni-aside-tag {
    display: flex; align-items: center; justify-content: center; gap: 3px;
    min-width: 0; padding: 5px 4px;
    border: 1px solid #e6ebf2; border-radius: 6px;
    background: #f8fafc; color: #657487; font-size: 12px;
    text-decoration: none; transition: all .18s ease;
}
.ni-right-aside .ni-aside-tag-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ni-right-aside .ni-aside-tag-num { flex: none; color: #99a9bf; font-size: 11px; }
.ni-right-aside .ni-aside-tag:hover { color: #fff; background: #20a0ff; border-color: #20a0ff; }
.ni-right-aside .ni-aside-tag:hover .ni-aside-tag-num { color: rgba(255, 255, 255, .8); }

/* ---------- 网站统计 ---------- */
.ni-aside-stats { list-style: none; margin: 0; padding: 0; }
.ni-aside-stats li {
    display: flex; align-items: center; justify-content: space-between;
    padding: 7px 0; border-bottom: 1px dashed #eef1f5;
}
.ni-aside-stats li:last-child { border-bottom: 0; padding-bottom: 0; }
.ni-right-aside .ni-aside-stats span { color: #738192; }
.ni-right-aside .ni-aside-stats strong { color: #475669; font-size: 14px; font-weight: 600; }

/* ---------- 深色模式：全部取主题 niRvana_dark.css 的卡片/文字色 ---------- */
html[data-dark="1"] .ni-right-aside { color: #99a9bf; }
html[data-dark="1"] .ni-aside-card { background: #28374a; border-color: #3b4b67; box-shadow: 0 3px 14px rgba(0, 0, 0, .28); }
html[data-dark="1"] .ni-right-aside .ni-aside-title { color: #c0ccda; border-bottom-color: #3b4b67 !important; }
html[data-dark="1"] .ni-right-aside .ni-aside-title:hover { color: #20a0ff; }
html[data-dark="1"] .ni-aside-pager { background: #1f2d3d; border-color: #3b4b67; box-shadow: none; }
html[data-dark="1"] .ni-aside-pager-btn { color: #738192; }
html[data-dark="1"] .ni-aside-pager-btn + .ni-aside-pager-btn { border-left-color: #3b4b67; }
html[data-dark="1"] .ni-aside-pager-btn:not(:disabled):hover { color: #20a0ff; background: #34425a; }
html[data-dark="1"] .ni-aside-pager-btn:disabled { color: #556477; }
html[data-dark="1"] .ni-aside-avatar { border-color: #28374a; background: #1f2d3d; }
html[data-dark="1"] .ni-right-aside .ni-aside-name { color: #c0ccda; }
html[data-dark="1"] .ni-right-aside .ni-aside-bio { color: #738192; }
/* 资料卡：深色下与其余卡片同一块 #28374a，只在顶部留一层极轻的提亮，
   不再用整块偏蓝的深渐变 */
html[data-dark="1"] .ni-aside-profile {
    background: linear-gradient(180deg, #2e3f57 0%, #28374a 64%);
    border-color: #3b4b67;
}
html[data-dark="1"] .ni-aside-avatar { box-shadow: 0 2px 8px rgba(0, 0, 0, .32); }
html[data-dark="1"] .ni-aside-avatar-letter { background: linear-gradient(135deg, #2f8cf0, #1f7cd8); }
html[data-dark="1"] .ni-aside-hot-list li,
html[data-dark="1"] .ni-aside-comment,
html[data-dark="1"] .ni-aside-stats li { border-bottom-color: #3b4b67; }
html[data-dark="1"] .ni-aside-rank { background: #34425a; color: #99a9bf; }
/* 前三名：深色下用更深的蓝色渐变 + 白字，和普通名次明显区分（之前被上面的规则盖成灰色） */
html[data-dark="1"] .ni-aside-rank.top {
    background: linear-gradient(135deg, #1f8ae0, #1769bf);
    color: #fff;
}
/* 随机文章：深色下同样无底色，1/2/3 与 4/5/6 沿用同一灰字 */
html[data-dark="1"] .ni-aside-random .ni-aside-rank,
html[data-dark="1"] .ni-aside-random .ni-aside-rank.top { background: none; color: #99a9bf; }
html[data-dark="1"] .ni-right-aside .ni-aside-hot-list a,
html[data-dark="1"] .ni-right-aside .ni-aside-comment-text { color: #99a9bf; }
html[data-dark="1"] .ni-right-aside .ni-aside-hot-list a:hover { color: #20a0ff; }
html[data-dark="1"] .ni-right-aside .ni-aside-count { color: #738192; }
html[data-dark="1"] .ni-right-aside .ni-aside-comment-author { color: #c0ccda; }
html[data-dark="1"] .ni-right-aside .ni-aside-comment-head time { color: #738192; }
html[data-dark="1"] .ni-right-aside .ni-aside-comment-text { background: #1f2d3d; }
html[data-dark="1"] .ni-right-aside .ni-aside-comment-text:hover { background: #34425a; color: #20a0ff; }
html[data-dark="1"] .ni-right-aside .ni-aside-comment-head::after { background: #1f2d3d; }
html[data-dark="1"] .ni-aside-comment:has(.ni-aside-comment-text:hover) .ni-aside-comment-head::after { background: #34425a; }
html[data-dark="1"] .ni-right-aside .ni-aside-comment-from { color: #738192; }
html[data-dark="1"] .ni-right-aside .ni-aside-comment-from:hover { color: #20a0ff; }
html[data-dark="1"] .ni-right-aside .ni-aside-tag { background: #1f2d3d; border-color: #3b4b67; color: #99a9bf; }
html[data-dark="1"] .ni-right-aside .ni-aside-tag-num { color: #738192; }
html[data-dark="1"] .ni-right-aside .ni-aside-tag:hover { background: #20a0ff; border-color: #20a0ff; color: #fff; }
html[data-dark="1"] .ni-right-aside .ni-aside-stats span { color: #738192; }
html[data-dark="1"] .ni-right-aside .ni-aside-stats strong { color: #c0ccda; }

/* ---------- 友情链接：32px 圆标（logo / 首字）+ 名称 + 简介，虚线分隔 ----------
   logo 复用 .ni-aside-avatar / .ni-aside-avatar-letter 两个类名，
   让 footer 里已有的边栏头像兜底脚本自动接管加载失败的图，不新增 JS。 */
.ni-aside-link-list { list-style: none; margin: 0; padding: 0; }
.ni-aside-link-list li { border-bottom: 1px dashed #eef1f5; }
.ni-aside-link-list li:last-child { border-bottom: 0; }
.ni-right-aside .ni-aside-link {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0; text-decoration: none; color: inherit;
}
.ni-right-aside .ni-aside-link:hover { text-decoration: none; }
.ni-aside-link-logo { position: relative; flex: none; width: 32px; height: 32px; }
.ni-right-aside .ni-aside-link-logo .ni-aside-avatar,
.ni-right-aside .ni-aside-link-logo .ni-aside-avatar-letter {
    width: 32px; height: 32px;
    border-radius: 50% !important;
    box-shadow: none;
    font-size: 14px;
}
/* 有真实 logo 时藏起首字；加载失败由 footer 脚本翻上来 */
.ni-aside-link-logo img.ni-aside-avatar + .ni-aside-avatar-letter { display: none; }
.ni-aside-link-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ni-right-aside .ni-aside-link-name {
    font-size: 13px; font-weight: 600; color: #475669; line-height: 1.4;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    transition: color .18s ease, transform .18s ease;
}
.ni-right-aside .ni-aside-link-desc {
    font-size: 11px; color: #99a9bf; line-height: 1.4;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ni-aside-link-arrow {
    flex: none; width: 14px; height: 14px; color: #c3ccd8;
    transition: color .18s ease, transform .18s ease;
}
.ni-right-aside .ni-aside-link:hover .ni-aside-link-name { color: #20a0ff; transform: translateX(3px); }
.ni-right-aside .ni-aside-link:hover .ni-aside-link-arrow { color: #20a0ff; transform: translateX(2px); }

html[data-dark="1"] .ni-aside-link-list li { border-bottom-color: #3b4b67; }
html[data-dark="1"] .ni-right-aside .ni-aside-link-name { color: #c0ccda; }
html[data-dark="1"] .ni-right-aside .ni-aside-link-desc { color: #738192; }
html[data-dark="1"] .ni-aside-link-arrow { color: #5b6c85; }

/* ---------- 窄屏：收起边栏，内容恢复整幅 ---------- */
@media (max-width: 1200px) {
    #main .container.ni-aside-layout { display: block; }
    #main .container.ni-aside-layout > .ni-right-aside { display: none; }
}