/* maoc_three 主题自补：原版 custom.js 负责 headex->inhead / fdbox->inbox 的类切换与淡入，
   本主题直接写入终态类名，这里补上淡入动效（视觉与原站一致）。 */
@keyframes mcFadeIn{from{opacity:0}to{opacity:1}}
@keyframes mcFadeInUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
/* 注意：.main-post/.main-single 是 #sidebar-left（position:fixed 吸顶）的祖先，
   若在这里留下 transform（哪怕动画终态是 identity matrix），会成为 fixed 的包含块，
   导致左栏吸顶失效、随页面一起滚走。因此容器层只用纯透明度淡入。 */
.header.inhead{animation:mcFadeIn .45s ease both}
.main-post.inbox,.main-single.inbox{animation:mcFadeIn .45s ease both}
.widget{animation:mcFadeInUp .45s ease both}

/* 列表/标签/搜索页：首卡与面包屑融合。
   原站 inject.css 的 `.inbox .post.index:first-child{border-radius:10px}` 会把首卡四角全变圆，
   而 .place（面包屑）是 `border-radius:10px 10px 0 0` + margin-bottom:0，设计上直接压在首卡上，
   于是中间出现一条带圆角的空隙。这里用更高优先级把首卡顶部改回直角（文章页 .post-single
   本来就是 `0 0 10px 10px`，行为对齐）。移动端另有 `border-radius:0!important` 兜底，不受影响。 */
.place + .divMain > li.post.index:first-child{border-radius:0 0 10px 10px}

/* 幻灯片caption标题：长标题单行截断（原站 caption 均为短标题，此处防御长标题撑高容器） */
.slider__caption h3{font-size:16px;font-weight:500;color:#fff;margin:0;padding:0 20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== DedeBIZ {dede:pagelist} 实际输出为 <span>/<a class='br sb page-numbers'> 序列
   （本版本并未输出 Bootstrap 的 ul.pagination），原站 .pagelist 的胶囊样式由 inject.css 提供，
   但原站当前页用 <b>、本站用 <span class='... current'>，"首页/末页/条数信息" 也是 span，
   因此这里补齐 span 形态的药丸与当前页高亮 ===== */
.pagelist span.page-numbers{display:inline-block;min-width:34px;height:34px;margin:0 0 10px 5px;padding:0 12px;border-radius:10px;box-shadow:0 1px 10px rgba(151,164,175,.1);background:#fff;color:#666;font-size:14px;line-height:34px;text-align:center;text-decoration:none;box-sizing:border-box}
.pagelist span.page-numbers.current{background:#364cc6;color:#fff}
.pagelist .next span.page-numbers,.pagelist .prev span.page-numbers{padding:0 14px}
/* 条数信息（原为 <li class='page-item disabled'><span class='page-link'>33页322条</span></li>，
   现已统一改为 <span class='page-item disabled'> —— .pagelist 的父级是 <div>，
   <li> 放在 <div> 下是非法结构）按纯文本展示 */
.pagelist .page-item{list-style:none;display:inline}
.pagelist .page-item.disabled .page-link{display:inline;background:none;box-shadow:none;color:#999;font-size:13px;padding:0 0 0 6px}

/* ===== 兼容：若某些页面输出 Bootstrap 分页结构（ul.pagination > li.page-item > a.page-link），
   本站未引入 Bootstrap，此处对齐原站 .pagelist 药丸样式 ===== */
.pagination{display:flex;flex-wrap:wrap;justify-content:center;list-style:none;margin:20px 0;padding:0;width:100%;clear:both}
.pagination .page-item{margin:0;display:inline-block}
.pagination .page-link{display:inline-block;min-width:34px;height:34px;margin:0 0 10px 5px;padding:0 12px;border:none;border-radius:10px;box-shadow:0 1px 10px rgba(151,164,175,.1);background:#fff;color:#666;font-size:14px;line-height:34px;text-align:center;text-decoration:none}
.pagination .page-link:hover{color:#19585d}
.pagination .page-item.active .page-link{background:#364cc6;color:#fff}
.pagination .page-item.disabled .page-link{color:#bbb;background:#fff;cursor:default}

/* ===== 文章页「相关文章」：改为复用列表页卡片（ul.divMain > li.post，样式由 inject.css 的
   `.inbox .post` 统一提供），这里只留一个轻量小标题，并清掉原来四列缩略图栅格遗留的间距 ===== */
.mc-related{margin:0 0 20px}
.mc-related > .psbo-title{margin:0 20px 12px;padding:0 0 0 10px;border:0;border-left:3px solid #364cc6;font-size:16px;font-weight:600;line-height:1.3;color:#292929}
.mc-related ul.divMain{margin:0;padding:0;list-style:none}

/* ===== 文章页评论表单：昵称(50%) + 验证码(50%) 一行，textarea 独占一行，
   「匿名评论」勾选与提交按钮同一行。勾选框样式自绘（inject.css 已全局
   `button,input,textarea{-webkit-appearance:none!important}`，原生勾选框不可见） ===== */
.comment-form-any{float:left;height:42px;margin-top:5px;line-height:42px;color:#666;font-size:14px;-webkit-user-select:none;user-select:none}
.comment-form-any label{display:inline-flex;align-items:center;cursor:pointer;margin:0}
.comment-form-any input[type=checkbox]{-webkit-appearance:none;appearance:none;width:16px;height:16px;margin:0 6px 0 0;padding:0;border:1px solid #d0d0d0;border-radius:4px;background:#fff;position:relative;cursor:pointer;vertical-align:-3px;flex:0 0 auto;box-sizing:border-box}
.comment-form-any input[type=checkbox]:checked{background:#364cc6;border-color:#364cc6}
.comment-form-any input[type=checkbox]:checked::after{content:"";position:absolute;left:4px;top:0;width:5px;height:9px;border:2px solid #fff;border-top:0;border-left:0;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
.comment-form-any:hover{color:#364cc6}

/* ===== 回复评论：表单被整体搬到被回复评论下方时，缩进对齐该评论正文 ===== */
ul.msg li.msgreply{list-style-type:none;padding:0;margin:0}
li.msgreply .comment-respond{padding:12px 0 0 65px;overflow:visible}
li.msgreply .comment-reply-title{font-size:16px;margin:0 0 12px}
li.msgreply .comment-reply-title small a{color:#364cc6;font-size:12px}
@media screen and (max-width:767px){li.msgreply .comment-respond{padding-left:0}}

/* ===== 首页「加载更多」：原样式是 43px 高的浅灰通栏，看起来像一条分割线、又紧贴最后一张卡片，
   点击目标也不明显。改成居中的描边胶囊按钮（hover 填充主色），「没有更多内容」改为低调灰字 ===== */
.pageload{height:auto;padding:0;margin:8px 20px 34px;text-align:center;clear:both}
.pageload .view-more-button{position:static;display:inline-block;width:auto;padding:0;background:#fff;color:#364cc6;border:1px solid #364cc6;border-radius:22px;box-shadow:0 2px 10px rgba(54,76,198,.16);transition:background-color .25s,color .25s,box-shadow .25s}
.pageload .view-more-button p{margin:0;padding:11px 38px;font-size:14px;font-weight:500;letter-spacing:1px;line-height:1.4;color:inherit}
.pageload .view-more-button:hover{background:#364cc6;color:#fff;box-shadow:0 4px 14px rgba(54,76,198,.32)}
.pageload .view-more-button.is-loading{opacity:.6;cursor:default;box-shadow:none}
.pageload .view-more-button.is-loading:hover{background:#fff;color:#364cc6}
.pageload .page-load-status p{position:static;display:block;width:auto;padding:0;background:none;color:#9ca0ad;font-size:13px;letter-spacing:0}
@media screen and (max-width:767px){.pageload{margin:4px 0 24px}.pageload .view-more-button p{padding:10px 30px}}

/* ===== 卡片底部右侧「阅读数 / 评论数」：原来两个 span 紧贴（只靠图标的 6px 右外边距），
   这里补 12px 间距，避免数字和图标糊在一起 ===== */
.inbox .post .post-footer .meta .info-right .date + .date{margin-left:12px}

/* ===== 关于站长：bilibili -> Telegram（字体里没有该字形，用内联 SVG），github -> Email（mico-mail），
   微博 -> 用户登录（mico-account-circle，链到 /user/login.php）。
   .sidebar-navigation .sns-icon 的兜底色是 #fff（inject.css），白底上看不见，
   所以每个渠道都要像下面这样显式给色；不给色就是"图标不显示"的样子。 ===== */
.sidebar-navigation .telegram{color:#229ED9}
.sidebar-navigation .mail{color:#d44638}
.sidebar-navigation .user{color:#364cc6}
.sidebar-navigation .sns-svg{width:20px;height:20px;display:inline-block;vertical-align:-4px}

/* ===== 文章正文常用 HTML 标签 =====
   正文来自后台编辑器，标签没有任何 class，只能按标签名兜底。
   全部用 .post-page 前缀：列表卡片里也有 .post-content（RenderMaocItem 输出），
   不加前缀会把列表页卡片的摘要行一起改了。
   基线：style/style.css 里 p{font-size:16px;line-height:1.9em;color:#393e46;word-break:break-all}，
   列表/引用/表格需要向它看齐，否则正文里字号行高忽大忽小。 */

/* 小标题 */
.post-page .post-content h1,
.post-page .post-content h2,
.post-page .post-content h3,
.post-page .post-content h4,
.post-page .post-content h5,
.post-page .post-content h6{font-weight:600;color:#222831;line-height:1.5;margin:26px 0 12px;padding:0;word-break:break-word}
.post-page .post-content h1{font-size:22px}
.post-page .post-content h2{font-size:20px;line-height:1.4;padding-left:12px;border-left:4px solid #364cc6}
.post-page .post-content h3{font-size:18px}
.post-page .post-content h4{font-size:16px}
.post-page .post-content h5,
.post-page .post-content h6{font-size:15px;color:#4a5260}
.post-page .post-content > h1:first-child,
.post-page .post-content > h2:first-child,
.post-page .post-content > h3:first-child{margin-top:0}

/* 段落 */
.post-page .post-content p{margin:0 0 12px}

/* 列表：全局 *{margin:0;padding:0} 把缩进清成了 0，圆点/序号会跑到框外被裁掉，必须补回 */
.post-page .post-content ul,
.post-page .post-content ol{margin:0 0 12px;padding-left:24px}
.post-page .post-content ul{list-style:disc outside}
.post-page .post-content ol{list-style:decimal outside}
.post-page .post-content li{margin:0 0 6px;font-size:16px;line-height:1.9;color:#393e46}
.post-page .post-content li:last-child{margin-bottom:0}
.post-page .post-content ul ul{list-style:circle;margin:6px 0 0}
.post-page .post-content ul ol,
.post-page .post-content ol ol{list-style:lower-alpha;margin:6px 0 0}

/* 引用块：原来 margin/padding/border 全为 0，和普通段落一模一样，完全看不出是引用 */
.post-page .post-content blockquote{margin:18px 0;padding:14px 18px;background:#f7f8fa;border-left:4px solid #364cc6;border-radius:0 8px 8px 0;color:#5b6472;font-size:16px;line-height:1.9}
.post-page .post-content blockquote p:last-child{margin-bottom:0}
.post-page .post-content blockquote cite{display:block;margin-top:8px;font-size:13px;line-height:1.6;color:#9ca0ad;font-style:normal}

/* 表格：当前是 border-collapse:separate + 单元格 0 padding，表格被压成几像素宽、内容贴成一坨。
   这里先修表格模型，再补分隔线与斑马纹。 */
.post-page .post-content table{width:100%;max-width:100%;margin:16px 0;border-collapse:collapse;border-spacing:0;font-size:15px;line-height:1.7;background:#fff;table-layout:auto}
.post-page .post-content th,
.post-page .post-content td{padding:9px 12px;border:1px solid #e8eaf0;text-align:left;vertical-align:top;color:#393e46;word-break:break-word;overflow-wrap:anywhere}
.post-page .post-content thead th{background:#f4f5f9;font-weight:600;color:#222831}
.post-page .post-content tbody tr:nth-child(even){background:#fafbfc}
.post-page .post-content tbody tr:hover{background:#f5f7ff}
.post-page .post-content table caption{margin-bottom:8px;font-size:13px;color:#9ca0ad;text-align:left}

/* 图片拼版表：站内大量 <table> 只是拿 1 行 2 列并排摆 app 截图，不是数据表
   （没有 thead/th）。这类表必须保持无边框、2px 缝隙，否则截图四周会多出一圈白框。
   用 :has(th) 区分：没有表头单元格的按拼版表处理（Chrome/Edge/Safari/Firefox 121+ 均支持）。 */
.post-page .post-content table:not(:has(th)){border-collapse:separate;border-spacing:2px;margin:0}
.post-page .post-content table:not(:has(th)) td{border:0;padding:0;background:transparent}
.post-page .post-content table:not(:has(th)) td p{margin:0}
.post-page .post-content table:not(:has(th)) td img{display:block;width:100%}
.post-page .post-content table:not(:has(th)) tr:hover td{background:transparent}

/* 图片 / 视频 / 图注 */
.post-page .post-content img{max-width:100%!important;height:auto!important}
.post-page .post-content figure{margin:16px 0}
.post-page .post-content figcaption{margin-top:6px;font-size:13px;line-height:1.6;color:#9ca0ad;text-align:center}
.post-page .post-content iframe{max-width:100%;border:0}

/* 分隔线（原来只有浏览器默认的那条凹槽线，深浅不一的灰） */
.post-page .post-content hr{height:1px;margin:24px 0;border:0;background:#eceef3}

/* 代码 */
.post-page .post-content code{padding:2px 6px;border-radius:4px;background:#f4f5f9;color:#d6336c;font-size:.92em;font-family:Consolas,Monaco,"Courier New",monospace;word-break:break-all}
.post-page .post-content pre{margin:16px 0;padding:14px 16px;border-radius:10px;background:#2b2f3a;color:#e6e6e6;font-size:13px;line-height:1.7;overflow:auto;-webkit-overflow-scrolling:touch}
.post-page .post-content pre code{padding:0;background:none;color:inherit;font-size:inherit;word-break:normal;white-space:pre}

/* 链接 */
.post-page .post-content a{color:#364cc6;text-decoration:none;border-bottom:1px solid rgba(54,76,198,.3)}
.post-page .post-content a:hover{color:#25349a;border-bottom-color:#25349a}

/* 定义列表 */
.post-page .post-content dl{margin:0 0 12px}
.post-page .post-content dt{margin-top:10px;font-size:16px;line-height:1.9;font-weight:600;color:#222831}
.post-page .post-content dd{margin:4px 0 0 20px;font-size:16px;line-height:1.9;color:#5b6472}

/* 其它行内标签 */
.post-page .post-content strong,
.post-page .post-content b{font-weight:600;color:#222831}
.post-page .post-content mark{padding:0 2px;background:#fff3bf;color:inherit}
.post-page .post-content sup,
.post-page .post-content sub{font-size:.75em;line-height:0}
.post-page .post-content small{font-size:13px;color:#9ca0ad}

/* 移动端：宽表格改为容器内横向滚动，不再硬挤成一行几个字 */
@media screen and (max-width:767px){
  .post-page .post-content table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .post-page .post-content th,
  .post-page .post-content td{min-width:88px;padding:8px 10px;font-size:14px}
  .post-page .post-content ul,
  .post-page .post-content ol{padding-left:20px}
  .post-page .post-content blockquote{margin:14px 0;padding:12px 14px}
  .post-page .post-content h2{font-size:18px}
  .post-page .post-content h3{font-size:17px}
}

/* ===== 文章页「相关文章」卡片：与列表页 .post-list 卡片完全对齐 =====
   列表页摘要样式写在 `.post-list p` 上（15px/1.7 #868695 + 3 行截断），
   相关板块不在 .post-list 内，反而落进了上面 `.post-page .post-content p` 的正文规则
   （16px/1.9 #393e46，无截断）→ 卡片被撑成 4 行、字号偏大、颜色偏深。
   这里按列表页的口径重新声明一遍，选择器权重相同但位置在后，所以能覆盖正文规则。 */
.mc-related .post-content p{margin:20px 0 0;font-size:15px;line-height:1.7;color:#868695;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;
  -webkit-box-orient:vertical;position:relative;white-space:normal;word-break:break-all}
.mc-related .post-content .p_part{margin:0;padding:0}
@media screen and (max-width:767px){
  .mc-related .post-content p{margin-top:10px;-webkit-line-clamp:2}
}

/* ===== 面包屑 nav.place > ol > li =====
   inject.css 只给 `.place` 容器写了样式（白底 / 45px 行高 / 上圆角），
   没有重置容器里的列表。模板用 <nav class="place"><ol><li>…</li></ol></nav> 之后，
   ol 保留 UA 默认的 `list-style:outside decimal`、li 保留 `display:list-item`，
   页面就渲染成「1. 网站首页」「2. 全部标签」两行带序号的列表（面包屑高度 90px），
   而文章页的面包屑是 div.place 直接放 <a>（无列表）→ 单行正常。两处不一致。
   这里还原成单行「网站首页 > 全部标签」，分隔符与文章页的 `&gt;` 保持一致；
   当前页（li[aria-current]）保持继承色（灰），与文章页末尾的「正文」同口径。 */
.place ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center}
.place ol li{display:block;list-style:none;margin:0;padding:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.place ol li + li::before{content:"\003E";display:inline-block;margin:0 .5em;color:inherit}

/* ===== 标签聚合页（tag.htm /tags）：标签云卡片 =====
   作用域必须是 `.post-list` 里的 #divTags。#sidebar-right 也位于 .main-post 之内，
   早先写成 `.main-post .widget#divTags` 会把侧栏的「标签列表」widget 一起命中：
   margin 从 `0 0 20px` 变成 `0 20px 20px`、padding 从 0 变成 `18px 20px 4px`、
   border-radius 被改成 `0 0 10px 10px`（顶部圆角被抹掉）—— 侧栏那张卡片于是窄 40px、
   整体下缩 20px、h3 文字比其它 widget 右缩 40px、底部只剩 4px。 */
.post-list .widget#divTags{margin:0 20px 20px;width:auto;border-radius:0 0 10px 10px;padding:20px 20px 16px}
/* .widget ul 自带 padding:0 1.5em 1rem 1.5rem，会让胶囊比标题再右缩 24px；
   inject.css 的 #divTags ul 又用 margin:-5px 抵消胶囊的 4px 外边距。
   这里 padding 归零、负边距收到 -4px，胶囊左缘正好与标题对齐。 */
.post-list .widget#divTags ul{margin:-4px;padding:0}

/* 主区这个 widget 的标题用 h1（页面主标题，利于 SEO），但 inject.css 只写了
   `.widget h3.function_t`，h1 于是落到全局 `h1{color:#9ca0ad;font-size:30px}`：
   灰色 30px 粗体，行高还被 body 的 24px 拽着（30px 的字挤在 24px 行高里），
   与侧栏卡片标题（#222831 / 18px / 500）完全不同口径。这里对齐侧栏口径，
   但不带 `.widget h3.function_t:before` 的三色彩点 —— 那是 right:56px 绝对定位，
   放到 730px 宽的大卡片上会飘成孤立的装饰点。 */
.post-list .widget#divTags h1.function_t{
  font-size:18px;font-weight:500;color:#222831;line-height:1.4;
  margin:0;padding:0 0 15px;border-bottom:1px solid #f3f3f3}
/* 「共 N 个标签，点击进入…」被 inject.css 的 `.post-list p`（0,1,1）接管成
   margin-top:20px / 15px / 灰色正文 / display:-webkit-box，与上面的小标题分家了。 */
.post-list .widget#divTags p.tag-count{
  margin:14px 0;font-size:13px;color:#888;line-height:1.7;position:static;display:block}

@media screen and (max-width:1024px){
  .post-list .widget#divTags{margin-left:0}
}
@media screen and (max-width:960px){
  .post-list .widget#divTags{margin:0 0 20px;padding:16px 16px 16px}
}

/* ===== 标签胶囊的触摸尺寸与悬停反馈 =====
   inject.css 的 `#divTags li a{padding:2px 10px}`（(1,0,1)）在 13px 字号下只有 30px 高，
   低于 44px 的触摸目标推荐值，移动端相邻胶囊间距仅 4px，容易误触。
   同时 `#divTags li a{color:#fff!important}` 把 `.widget ul li a:hover{color:#364cc6!important}`
   完全压死 —— 悬停/聚焦没有任何反馈。这里用 (1,1,1) 权重补上尺寸与反馈。 */
.widget#divTags ul li a{padding:5px 12px;margin:5px;transition:all .25s}
.widget#divTags ul li a:hover,
.widget#divTags ul li a:focus-visible{opacity:.85;transform:translateY(-1px)}
@media screen and (max-width:960px){
  .widget#divTags ul li a{padding:6px 13px;margin:5px}
}

/* ===== 页脚「全部标签」入口：全站唯一的标签聚合页入口（<960px 侧栏隐藏后
   移动端只能靠这里进入 /tags），并保持与版权行同样的低调灰 ===== */
.inbox #footer .footer-links{margin:8px 0 0}
.inbox #footer .footer-links a{color:#6b7280;text-decoration:none;transition:color .2s}
.inbox #footer .footer-links a:hover{color:#364cc6}

/* ===== 侧栏「标签列表」底部的「查看全部标签」链接 =====
   .widget ul 自带 margin-bottom:-10px，链接需要自带上间距把负边距吃掉 */
.widget#divTags p.tag-more{margin:0;padding:12px 20px 16px;font-size:13px;line-height:1.4;text-align:right}
.widget#divTags p.tag-more a{color:#6b7280;text-decoration:none;transition:color .2s}
.widget#divTags p.tag-more a:hover{color:#364cc6}

/* ===== 文章页正文标签：inject.css 的 `.tags a{padding:2px 8px;font-size:14px}` 只有 28px 高，
   低于 44px 的触摸目标推荐值；补到 36px 并拉开间距（与标签云口径一致） ===== */
.post-page .tags a{padding:6px 12px;margin:6px 8px 6px 0}

/* ===== 键盘可达性：补回可见焦点 =====
   inject.css（原主题）里有 3 处 outline:0，把浏览器的焦点环抹掉了，
   键盘 Tab 时完全看不出当前焦点在哪。这里只对「键盘导航」生效
   （:focus-visible），鼠标点击不会出现轮廓，视觉与原站保持一致。 */
:focus-visible{outline:2px solid #364cc6;outline-offset:2px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,
[tabindex]:focus-visible{outline:2px solid #364cc6;outline-offset:2px}