/**
 * 前台「帖子详情页」专用样式
 * 设计基准：test/前台页面定稿/thread-01-classic.html
 *
 * 加载顺序：tabler-icons → pg/pg-ui.css → statics/css/home.css → 本文件
 * 复用 home.css 的：wrap / panel / panel-hd / avt / tag / tabsbar / tab / pager / subtle / m-hide-sm
 * 本文件只写详情页专有部分（面包屑 / 帖子头 / 正文 / 楼层 / 回复框 / 侧栏 / 本页目录）
 */

/* ============================ 骨架 ============================ */
.page-head{padding:16px 0 4px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.crumb{font-size:13px;color:var(--text-3);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.crumb a:hover{color:var(--primary)}
.crumb i{font-size:14px;opacity:.6}

.pg-main{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;padding:18px 0 36px;align-items:start}
.thread-panel{margin-bottom:16px}
.thread-side{display:flex;flex-direction:column;gap:16px}
/* 电脑端右栏顺序：作者卡片在上、本页目录在下。
   目录面板的 DOM 位置不能动 —— thread.js 的 relocate() 会按视口宽度在「正文列」和「.thread-side」之间
   搬它，≤760 的抽屉/FAB/遮罩也要跟它成组，所以这里只用 order 换视觉。
   align-self:stretch 是必需的：.pg-main 是 align-items:start，右栏默认只有内容那么高，
   目录换成视觉末尾后它的 sticky 行程就变成 0（滚一下就跟着走）；撑到整行高才吸得住。 */
.thread-side{align-self:stretch}
.thread-side > .toc{order:2}

/* ============================ 帖子头 ============================ */
.thread-hd{padding:16px 18px 14px;border-bottom:1px solid var(--border-soft)}
/* 标记组跟在标题后面（h1 内的行内盒）：inline-flex + vertical-align 让它跟 21px 标题文字对齐，
   整组放不下时才整体折到下一行 */
.thread-badges{display:inline-flex;gap:6px;flex-wrap:wrap;align-items:center;vertical-align:middle;
    margin-left:6px;font-weight:400}   /* 在 h1 里会被 700 继承，标记要回到常规字重 */
.thread-badges .tag{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:20px;font-size:11.5px}
/* 标记配色：每个 key 只声明「字色 + 底色」两个局部变量，标题行徽章与弹窗瓦片共用同一组。
   暗色只改变量、不复制规则（深底上低饱和的深色字看不清，办法同 v1.9.34 个人卡）。
   --danger / --primary-dark 本身就是随主题切换的变量，所以只有写死色值的精华需要补暗色。 */
.mk-digest{--mk-c:#b45309;--mk-bg:rgba(245,158,11,.14)}
.mk-top{--mk-c:var(--danger);--mk-bg:rgba(239,68,68,.1)}
.mk-ann{--mk-c:var(--primary-dark);--mk-bg:rgba(var(--primary-rgb),.12)}
[data-theme="dark"] .mk-digest{--mk-c:#fbbf24}
.thread-badges .tag.mk{background:var(--mk-bg);color:var(--mk-c)}
/* 状态徽章在标题「前面」：插槽常年在，thread.js 只换它的内容，空内容时 :empty 整块收起不留空隙。
   行内盒要跟 21px 标题基线对齐，所以用 em 级 vertical-align 而不是 middle（21px 文字下 middle 会偏高）。 */
.thread-status{display:inline-block;vertical-align:.14em;margin-right:8px;font-weight:400;line-height:1}
.thread-status:empty{display:none}
.thread-status .tag{font-size:12px;padding:2px 10px}
.thread-title{font-size:21px;font-weight:700;line-height:1.45;margin:0 0 10px}
.thread-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--text-3)}
.thread-meta .avt{width:22px;height:22px;font-size:11px}
.thread-meta b{color:var(--text-2);font-weight:500}
/* 作者名换成可点进主页的 <a>（v2.0.65）：字重与颜色沿用上面 <b> 的那套，只有悬停才变主色 */
.thread-meta .u-name{color:var(--text-2);font-weight:500}
.thread-meta .u-name:hover{color:var(--primary)}
.thread-meta .th-act{margin:0 0 0 auto;flex-shrink:0;flex-wrap:nowrap}
.dotline{flex:1;height:1px;background:var(--border-soft);min-width:20px}

/* ============================ 代码配色（行内 vs 代码块） ============================ */
/* 行内 `code` 走本站唯一的强调色（青绿小胶囊），围栏代码块 ``` 走 --code-bg（整块加深）。
 * 两条配色必须一眼可辨，否则代码块会被误读成「一大段行内代码」。 */
:root{--code-bg:#e7edf3;--code-bar:var(--primary);--code-line:rgba(var(--primary-rgb),.20);
    /* 行内代码字色：直接用 --primary-dark(#0b7f74) 落在 --primary-light 胶囊上实测只有 4.30:1，
       13px 属小字、AA 门槛 4.5:1，所以同色相再压暗一档到 #0a6b62（实测 5.62:1）。
       暗色档不需要压：--primary-dark 在那里是提亮过的 #5adacc，对同一胶囊底有 8.83:1。 */
    --code-fg:#0a6b62}          /* 亮：比页底 --bg 深一档 */
[data-theme="dark"]{--code-bg:#0d131a;--code-bar:var(--primary);--code-line:rgba(var(--primary-rgb),.34);--code-fg:var(--primary-dark)}  /* 暗：比页底 --bg 再深一档 */

/* ============================ 正文 ============================ */
.thread-panel > .post-content{padding:18px}
.post-content{font-size:15px;line-height:1.85;color:var(--text);overflow-wrap:break-word}
.post-content p{margin:0 0 12px}
.post-content p:last-child{margin-bottom:0}
/* 标题阶梯：正文 15px → h4 15 → h3 16 → h2 18 → h1 21。
 * h1/h2 以前在这里没有显式字号，一路落到 statics/vender/pg/pg-ui.css 那套响应式标题
 * （≥1200px 时是 2.5rem / 2rem = 40px / 32px），跟 16px 的 h3 之间差了一整档，站长点的就是这一跳。 */
.post-content h1{font-size:21px;line-height:1.5;margin:24px 0 12px;font-weight:700}
.post-content h2{font-size:18px;line-height:1.5;margin:22px 0 10px;font-weight:700}
.post-content h3{font-size:16px;margin:18px 0 10px;font-weight:600}
.post-content h4{font-size:15px;margin:16px 0 8px;font-weight:600;color:var(--text-2)}
.post-content h1,.post-content h2,.post-content h3,.post-content h4{scroll-margin-top:80px}
.post-content h1:first-child,.post-content h2:first-child{margin-top:0}
.post-content img{border-radius:8px;display:block;margin:10px 0}
/* 正文里的 markdown 产物（视频 / 表格 / 网盘文件卡）：
   这些类定义在 statics/vender/markdown/markdown.css（详情页已引入），此处做两点补充：
   ① 本地兜底，万一 markdown.css 未加载，视频容器仍是 16:9 自适应 ——
      否则内部 absolute 的 iframe 会以视口为定位基准，直接撑破帖子宽度；
   ② 深色主题下把 markdown.css 里的硬编码浅色换成站点变量。 */
.post-content .md-video-wrap{position:relative;width:100%;max-width:100%;padding-top:56.25%;
    margin:12px 0;border-radius:8px;overflow:hidden;background:#000}
.post-content .md-video-wrap video,.post-content .md-video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
[data-theme="dark"] .post-content .md-table-wrap th,
[data-theme="dark"] .post-content .md-table-wrap td{border-color:var(--border)}
[data-theme="dark"] .post-content .md-table-wrap th{background:var(--bg)}
[data-theme="dark"] .post-content .md-file-card{background:var(--card);border-color:var(--border)}
[data-theme="dark"] .post-content .md-file-title{color:var(--text)}
[data-theme="dark"] .post-content .md-file-ext{background:var(--bg);color:var(--text-2)}
.post-content ul,.post-content ol{padding-left:20px;margin:0 0 12px}
.post-content li{margin-bottom:5px}
.post-content blockquote{margin:12px 0;padding:10px 14px;border-left:3px solid var(--primary);
    background:var(--primary-light);color:var(--text-2);border-radius:0 6px 6px 0;font-size:14px}
/* 引用块有 padding，子元素的外边距不穿出去、直接算进块内高度。上面那条 h1/h2:first-child
   是后代选择器，伸进引用块把顶部边距抹了，底部却没人管（只有 p:last-child 抹），
   于是「> ## 标题」下面凭空多一行空白。子元素首尾各自抹一次，四种形状才都等宽。 */
.post-content blockquote>:first-child{margin-top:0}
.post-content blockquote>:last-child{margin-bottom:0}
.post-content a{color:var(--primary);text-decoration:underline}
/* 「引用」插入的是 Markdown 锚点行（> [@张三](#pid-210)：原文），渲染出来必须和
   上面 .q-hd 一样是个能点着跳楼层的显性链接。a:hover 要重申 color —— pg-ui 的库规则权重更高。 */
.post-content a.fl-jump{color:var(--primary-dark);font-weight:700;text-decoration:none;
    border-bottom:1px solid rgba(var(--primary-rgb),.45)}
.post-content a.fl-jump:hover{color:var(--primary-dark);border-bottom-color:var(--primary);
    text-decoration:none;background:var(--primary-light)}
/* ---- 行内代码：紧贴文字的青绿小胶囊，不占整行 ----
 * 亮暗都只取本站已有的强调色族（--primary-light 底 / --code-fg 字），不往正文里新增色相。
 * 暗色下 --primary-light(#0f2b28) 和卡片 #1a222b 只差一档，光靠底色描不出胶囊轮廓，
 * 所以两个主题都带一圈 --code-line 描边（inline 元素的边框不参与行高计算，不会把行顶开）。 */
.post-content code{padding:1px 5px;border:1px solid var(--code-line);border-radius:4px;
    background:var(--primary-light);font-size:13px;color:var(--code-fg);
    font-family:var(--pg-ui-font-mono,ui-monospace,Menlo,Consolas,monospace)}
/* ---- 围栏代码块（``` 渲染成 <pre><code class="language-x">）：整块加深的「代码面板」 ----
 * ⚠️ 上面那条 `.post-content code` 是后代选择器，会穿透命中 <pre> 内部的 <code>，
 *    于是代码块也吃上「灰底 + 1px 5px padding + 4px 圆角」，和行内代码长得一模一样。
 *    所以这里必须先把整块撑起来（内边距 / 边框 / 左边强调条 / 横向滚动），
 *    再把内部 code 复位掉，两者才算真正分层。 */
.post-content pre{margin:14px 0;padding:12px 16px;
    border:1px solid var(--border);border-left:3px solid var(--code-bar);border-radius:8px;
    background:var(--code-bg);color:var(--text);
    font-size:13.5px;line-height:1.7;tab-size:4;
    overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
    scrollbar-width:thin}
.post-content pre::-webkit-scrollbar{height:8px}
.post-content pre::-webkit-scrollbar-track{background:transparent}
.post-content pre::-webkit-scrollbar-thumb{border-radius:4px;background:var(--border)}
/* 复位：pre 内的 code 不再裹一层胶囊，直接铺满整块并跟随 pre 的排版 */
.post-content pre code{display:block;padding:0;margin:0;border:0;border-radius:0;
    background:transparent;color:inherit;font-family:inherit;font-size:inherit;
    line-height:inherit;white-space:pre;word-break:normal;overflow-wrap:normal}
/* ---- 代码块一键复制（thread.js 检测到 pre>code 才动态包 .code-wrap，无代码块不注入） ----
 * 按钮挂在包裹层而非 pre 内：pre 是横向滚动容器，内部绝对定位会跟着代码一起滚走。 */
.code-wrap{position:relative;margin:14px 0}
.code-wrap pre{margin:0}
.code-copy{position:absolute;top:8px;right:8px;z-index:1;display:inline-flex;align-items:center;gap:4px;
    padding:3px 10px;font-size:12px;line-height:1.5;border:1px solid var(--border);border-radius:6px;
    background:var(--card);color:var(--text-2);cursor:pointer;opacity:.85;
    transition:opacity .15s,color .15s,border-color .15s}
.code-copy:hover{opacity:1;color:var(--primary);border-color:var(--primary)}
.code-copy.ok{opacity:1;color:var(--primary);border-color:var(--primary)}
/* 演示用的图片占位块（接入真实图片后直接换成 img 即可） */
.imgs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.imgs .ph{aspect-ratio:4/3;border-radius:8px}

.post-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 18px;
    border-top:1px solid var(--border-soft);font-size:13px}
/* 操作行（赞/收藏/分享/标记/状态/举报）整体收小一档：按钮从 34px 降到 30px、字号 13→12.5。
   只作用于 .post-foot 内的 .btn-ghost —— .btn-ghost 还被编辑/删除、回复框、发帖页等多处共用，
   改基规则会把那些地方一起拖小。 */
.post-foot .btn-ghost{height:30px;padding:0 11px;gap:5px;font-size:12.5px;border-radius:7px}
.post-foot .btn-ghost .ti{font-size:15px}

/* ============================ 楼层 ============================
 * v1.9.103 按 B 站评论区重排：扁平列表 + 发丝线分隔，
 * 一条评论 = 头像 + 昵称行 + 正文 + 底栏（时间·楼号 后面直接跟 👍/回复/引用，全靠左对齐）。
 * 相比 v1.9.57 的卡片流，这版拆掉了三层叠加留白（卡片边框 + 卡内边距 + 卡间距）。
 * 两个被否掉的方向都别退回去：操作簇右对齐（时间行顶到行尾）在窄屏会把按钮推到视口外，
 * 且读起来像后台表格而不像评论区；楼层之间只留白不画线，八条回复会糊成一堵墙。
 * 数据口径没动：楼号仍从 1 楼起（v1.9.60）、服务端整帖倒序 + 软删墓碑占号（v1.9.62）。
 * markup 见 app/home/views/thread/detail.php 的 thread_floor()。 */
.thread-panel [data-pane]{padding:24px 18px 10px;background:var(--card)}
/* 页签条和回复面板头部用同一档浅底，两个面板才有共同的「头部」语言。
   .tabsbar 是公共类（首页也在用），必须带 .thread-panel 限定。 */
.thread-panel .tabsbar{background:color-mix(in srgb, var(--bg) 50%, var(--card))}
/* v1.9.60：回复区只剩「全部回复」标签 + 右侧排序两个控件，375 宽也必须在同一行放下，
   所以这里覆盖公共类的 flex-wrap:wrap。标签不可点，去掉页签的手型和 hover 反馈。 */
.thread-panel .tabsbar{flex-wrap:nowrap}
.thread-panel .tabsbar .tab{cursor:default;font-weight:600;color:var(--text)}
.thread-panel .tabsbar .tab:hover{background:none}
.thread-panel .tabsbar .mini a{white-space:nowrap}

/* 一楼层 = 头像列 + 内容列，底边一条发丝线，线上下各留 18px：
   线把「谁说的」切开，留白让线不至于把两条评论粘在一起。 */
.floor{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:12px;
    padding:0 0 18px;margin-bottom:18px;border-bottom:1px solid var(--border-soft)}
.floor:last-child{padding-bottom:4px;margin-bottom:0;border-bottom:0}
/* 楼主：身份挂在头像描边上。本帖回复可能全是楼主，
   所以只描边、不给整条加色底 —— 强调重复出现就不再是强调了。 */
.floor.is-lz .fl-rail .avt{box-shadow:0 0 0 2px var(--card),0 0 0 3.5px rgba(var(--primary-rgb),.5)}
/* 最佳回复：整条套一层浅底色带，向上/向外各挤出一点，读起来像 B 站的置顶条。
   底色一律 color-mix，不能用 rgba(255,255,255,.x) —— 暗色下会变成一块白斑。 */
.floor.is-best{margin:-6px -12px 12px;padding:20px 12px 18px;border-radius:12px;
    background:color-mix(in srgb, var(--warn) 7%, var(--card))}
.floor.is-best .fl-rail .avt{box-shadow:0 0 0 2px var(--card),0 0 0 3.5px rgba(245,158,11,.6)}
/* 回复成功 / #pid 锚点直达：同一条底色带换成主色，动画保留。
   写在 .is-best 之后，两者同时命中时锚点高亮压过最佳回复的底色。 */
.floor:target{margin:-6px -12px 12px;padding:20px 12px 18px;border-radius:12px;
    background:color-mix(in srgb, var(--primary) 8%, var(--card));animation:flPop .9s ease-out}
/* 色带本身已经是一条分隔，不再叠发丝线：圆角色带底下压一条直边线会看成两张卡。 */
.floor.is-best,.floor:target{border-bottom:0}
@keyframes flPop{from{opacity:.35;transform:translateY(6px)}to{opacity:1;transform:none}}

.fl-rail{padding-top:1px}
.fl-rail .avt{width:40px;height:40px;font-size:16px}
.fl-main{min-width:0}
/* 昵称行：只有作者和身份徽章，时间挪到底栏去（B 站就是这两段分开放）。
   v1.9.103 站长要求去掉楼层号，页面上不再出现「N 楼」，所以这里也没有楼号那一支了。 */
.fl-hd{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-height:22px;margin-bottom:3px}
.fl-name{font-size:14.5px;font-weight:600;color:var(--text)}
.fl-chip{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:5px;
    font-size:11px;line-height:1;background:var(--bg);color:var(--text-3)}
.fl-chip.lz{background:var(--primary-light);color:var(--primary-dark);font-weight:600}
/* 用户组名退成普通小灰字：一行里三个灰盒子叠成八遍，比正文还抢眼 */
.fl-chip.lvl{padding:0;background:none;color:var(--text-3);font-size:11.5px}
.fl-chip.seat{background:rgba(245,158,11,.14);color:#b45309;font-weight:600}
[data-theme="dark"] .fl-chip.seat{color:var(--warn)}
.fl-best{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:600;color:#b45309}
.fl-best .ti{font-size:14px}
[data-theme="dark"] .fl-best{color:var(--warn)}
/* 底栏：时间在先，操作簇紧跟其后，整行靠左（B 站评论底部就是这一行）。
   v1.9.103 去掉楼号以后这一行只剩时间 + 设备，楼序只用来算席位徽章。
   分隔点用 inherit + 半透明：写死 var(--border) 在浅色下几乎看不见，暗色下又太重 */
.fl-when{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:0;
    font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums}
.fl-when>*+*{margin-left:8px}
.fl-when>*+*::before{content:'·';margin-right:8px;color:inherit;opacity:.55}
.fl-time,.fl-dev{font-variant-numeric:tabular-nums}
/* 正文排版统一按「楼层内部」划范围，不按 .fl-body 划：
   子评论（楼中楼）不在 .fl-body 里，跟着父楼走同一套图片缩略位和引用底色，
   用 .floor 当前缀一次覆盖两层，省得每加一条规则都写两个选择器。 */
.floor .post-content{font-size:15px;line-height:1.75}
/* 楼层里的图片：固定尺寸小方图、横向排开、放不下再换行，点开才看大图（B 站评论区就是这样）。
   原来继承的是正文规则（display:block + 全宽），一条回帖两张图就撑满两屏，
   评论区变成相册，下面的人说了什么根本读不到。
   object-fit:cover 会裁掉长图的上下边缘 —— 这是有意的，缩略位要的是对齐不是完整，
   完整图交给灯箱（statics/vender/lightbox.js 按 .post-content 分组，点任意一张都能整层翻页）。 */
.floor .post-content img{display:inline-block;vertical-align:top;
    width:140px;height:140px;object-fit:cover;border-radius:8px;margin:0 8px 8px 0}
/* 引用块：头部那一行必须把「回复几楼」讲清楚，整行可点直接跳到被引楼层。
   只写「作者：原文」的话，读者对不上引用的是哪一层。
   v1.9.103 底色从主色淡底退成中性灰（B 站的引用就是灰块），左侧竖条同色，
   免得一条评论里「引用」比正文还抢眼。
   a:hover 必须在这里重申 color —— pg-ui 的 a:hover 权重更高，否则 hover 会变链接蓝。 */
.fl-body .quote{margin:0 0 10px;padding:8px 12px;border-radius:0 8px 8px 0;
    border-left:3px solid var(--border);
    background:color-mix(in srgb, var(--text-3) 7%, var(--card))}
.fl-body .q-hd{display:flex;align-items:center;gap:5px;font-size:12px;line-height:1.5;
    color:var(--text-2);text-decoration:none}
.fl-body .q-hd .ti{flex:0 0 auto;font-size:13px;color:var(--text-3)}
.fl-body .q-floor{font-weight:600}
.fl-body .q-name{min-width:0;color:var(--text-3);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.fl-body a.q-hd:hover{color:var(--primary-dark)}
.fl-body a.q-hd:hover .q-floor,.fl-body a.q-hd:hover .q-name{text-decoration:underline}
.fl-body .q-txt{margin-top:1px;padding-left:18px;color:var(--text-3);font-size:12.5px;line-height:1.6;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* 「引用」按钮走的是另一条路：插入 Markdown 引用行，渲染成 .post-content 里的 blockquote。
   两条路必须长一样，所以楼层内的 blockquote 也退成中性灰（正文里那条仍跟主题色）。
   .floor 这一层类比上面全局的 .post-content blockquote 多一类，压得过它。 */
.floor .post-content blockquote{margin:0 0 10px;padding:8px 12px;
    border-left:3px solid var(--border);background:color-mix(in srgb, var(--text-3) 7%, var(--card));
    color:var(--text-3);font-size:13.5px}
/* 楼层里的「@张三」是可点回跳的锚点，颜色跟着上面的灰走，
   但必须留住下划线 —— 灰成一片看不出能点，就违背了 v1.9.57 定下的「显性链接」口径。 */
.floor .post-content a.fl-jump{color:var(--text-2);border-bottom-color:var(--border)}
.floor .post-content a.fl-jump:hover{color:var(--primary-dark);border-bottom-color:var(--primary)}
/* 底栏：整行靠左排，窄屏处在一行放不下时换行，而不是把按钮挤扁或裁掉 */
.fl-ft{display:flex;align-items:center;gap:4px 10px;flex-wrap:wrap;margin-top:6px}
.reply-act{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.reply-act .ra{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 8px;border-radius:7px;
    font-size:12.5px;color:var(--text-3);cursor:pointer;user-select:none;transition:color .15s,background .15s}
.reply-act .ra .ti{font-size:15px}
.reply-act .ra:hover{color:var(--text-2);background:color-mix(in srgb, var(--text-3) 10%, transparent)}
.reply-act .ra.on{color:var(--primary);background:var(--primary-light)}
/* 删除：红色系 hover（.ra.rep-del 三个类，权重压过上面 .ra:hover） */
.reply-act .ra.rep-del:hover{color:var(--danger);background:rgba(239,68,68,.1)}
/* ---------- 楼中楼：一条评论底下的子评论（v1.9.103） ----------
 * 站长定的口径：只有顶层楼占楼序（页面已不显示楼号），子评论跟着父楼走。
 * v1.9.104 改成 B 站的「摊开前 3 条」：最早要求整块折叠，看到实际版式后改口 ——
 * 两三条对话点一次才看见反而别扭，折叠只该用在「多到刷屏」的第 4 条起（条数在视图 thread_kids() 里定）。
 * 展开只是给 .kids-list 加一个 is-open 类，被收的那几条始终在 HTML 里，
 * #pid-N 锚点、Ctrl+F、爬虫照样命中；不切 hidden 也不发请求（钩子是 [data-kids]，见 thread.js）。
 * 缩进不靠「再来一层卡片」—— 卡片流是 v1.9.57 被退回的方向（边框 + 卡内边距 + 卡间距
 * 三层留白叠加，正文缩进 38px 显得虚胖）。这里只有一条 2px 竖线 + 14px 左距：
 * 父子关系看得见，子评论的正文还剩整列宽度。
 * .fl-kids 在 .fl-main 里面，所以它跟着楼层正文那一列缩进，不会盖到父楼头像上。 */
.fl-kids{margin-top:10px}
/* 展开按钮是一行文字而不是按钮壳：B 站的「展开更多 N 条回复」就是主色文字，
   给它描边框会让一条评论底部凭空多出一枚控件（配色走 --primary-dark，暗色下那个值是浅薄荷） */
.kids-toggle{display:inline-flex;align-items:center;gap:3px;height:24px;padding:0;
    border:0;background:none;font-size:13px;font-weight:600;color:var(--primary-dark);
    cursor:pointer;transition:color .15s}
.kids-toggle:hover{color:var(--primary)}
.kids-toggle .ti{font-size:14px;transition:transform .2s}
.kids-toggle.open .ti{transform:rotate(180deg)}
/* 没展开时只藏起第 4 条起（is-more），前三条一直摊着 —— 用 :not() 藏而不是给展开态补一堆显示规则，
   .kid 自己的 display:grid 和窄屏那几档压尺寸的规则就都不用再抄一遍 */
.kids-list{margin-top:6px;padding:2px 0 0 14px;border-left:2px solid var(--border-soft)}
.kids-list:not(.is-open) .kid.is-more{display:none}
.kid{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:10px;padding-bottom:12px}
.kid:last-child{padding-bottom:2px}
.kd-rail{padding-top:2px}
.kd-rail .avt{width:28px;height:28px;font-size:12px}
.kd-main{min-width:0}
/* 子评论整体矮一档：昵称、正文、操作簇各收一号，读起来才是「附属于上面那条」，
   而不是又起了一层楼。楼层那套类名照用（.fl-name/.fl-ft/.reply-act），只在这里压尺寸。
   v1.9.104：子评论不再有 .fl-hd 那一行 —— 昵称、楼主标、「回复 @某人」和正文全挤在第一行，
   昵称也就不是 flex 子项了，改自己留右距（.fl-hd 的 gap 在这里够不着）。 */
.kid .fl-name{font-size:13.5px;margin-right:5px}
.kid .fl-chip{margin-right:5px}
.kid .kd-body{font-size:14px;line-height:1.7}
.kid .fl-ft{gap:2px 8px;margin-top:2px}
.kid .reply-act .ra{height:24px;padding:0 6px;font-size:12px}
.kid .reply-act .ra .ti{font-size:14px}
/* 「回复 @某人」：正文行首的主色链接（v1.9.104 从昵称行挪进来，照 B 站的排版），
   和昵称、被回那句话挤在同一行，超宽才正常换行 —— 所以正文的第一个 <p> 要收成 inline。
   用 :first-of-type 而不是 :first-child：昵称和链接才是头两个子元素，:first-child 永远轮不到 <p>
   （第一版就踩了这个，版式测试当场红了）。正文若以列表 / 代码块开头，第一个 <p> 落在块后面，
   浏览器照样给它另起一行，不会把列表拽进句子里。
   hover 必须自己重申 color：pg-ui 的 a:hover（权重 0,1,1）会把它刷成库的链接色，
   这里写成 .kd-body a.kd-to:hover（0,2,2）才压得住。
   行首那枚 ↩ 图标站长圈掉了一枚（v1.9.104）：昵称、@、正文三样已经挤在一行，箭头纯属凑热闹。
   所以这里用普通 inline 而不是 inline-flex —— 后者是整块不可断行的，遇到长昵称会把一行撑爆。 */
.kid .kd-body>p:first-of-type{display:inline}
.kd-body a.kd-to{margin:0 4px;font-size:13px;font-weight:600;
    color:var(--primary-dark);text-decoration:none}
.kd-body a.kd-to:hover{color:var(--primary);text-decoration:underline}
/* 锚点直达子评论：底色带只铺在它自己的内容列上 —— 铺满整行会把头像和竖线一起吃掉，
   看上去像隔壁那层楼被选中了。全局 border-box，padding 在列宽内长，不会撑出容器。 */
.kid:target .kd-main{padding:6px 8px;border-radius:10px;
    background:color-mix(in srgb, var(--primary) 9%, var(--card));animation:flPop .9s ease-out}
/* ---------- 已删回复留下的空壳（v1.9.106） ----------
 * 已删除的回复本身不再渲染（站长点名「该回复已被删除」这种占位不要，直接不显示），
 * 但它底下的子评论不能跟着蒸发，所以那一层只剩楼中楼这一块：
 * 左列继续留 40px 空位（.floor 是 grid，抽掉轨道会让子评论比别的层更靠左），
 * .fl-kids 的 10px 顶距是给「父楼正文和它之间」留的，这里上面没东西，归零。 */
.floor.is-orphan .fl-kids{margin-top:0}
/* 空列表：[data-pane] 自己已带 24px 顶距和左右 18px，这里只补下面和左右各留一点 */
.fl-empty{padding:6px 0 34px;text-align:center}
.fl-empty i{display:block;margin-bottom:8px;font-size:26px;color:rgba(var(--primary-rgb),.4)}
.fl-empty b{display:block;font-size:13.5px;font-weight:600;color:var(--text-2)}
.fl-empty span{display:block;margin-top:4px;font-size:12px;color:var(--text-3)}

/* ============================ 发表回复 ============================
 * 编辑区由 markdown 组件渲染（.md-editor-field = 工具条 + textarea），取色全走 markdown.css
 * 的 --md-* 变量（home.css 已把前台主题色桥接过去，暗色自动跟随）。
 * 这里只做四件事：面板头部、不可回复时灰显并盖遮罩、引用条排版、发送区与字数计数。 */
.rp-hd{display:flex;align-items:center;gap:10px;padding:11px 16px;
    background:color-mix(in srgb, var(--bg) 50%, var(--card))}
.rp-ic{flex:0 0 auto;width:28px;height:28px;border-radius:8px;display:flex;align-items:center;
    justify-content:center;background:var(--primary-light);color:var(--primary-dark);font-size:15px}
.rp-title{display:block;font-size:13.5px;font-weight:600;color:var(--text)}
.rp-sub{display:block;margin-top:1px;font-size:11.5px;color:var(--text-3)}
.reply-box{padding:13px 16px;background:var(--card)}
.reply-editor{position:relative}
/* 编辑器本来只有一条外框：thread.css 给 .md-editor-field 加过边框，markdown.css 又给
   工具条和 textarea 各画一条，叠成 2px 双线，看着像两个框套在一起。
   外框留给 .md-editor-field（它带聚焦描边），内侧只留工具条与输入区之间那条分隔线。 */
.reply-box .md-editor-field{margin:0}
.reply-box .md-editor-toolbar{border:0;border-radius:0;background:color-mix(in srgb, var(--bg) 45%, var(--card));
    box-shadow:inset 0 -1px 0 var(--border-soft)}
.reply-box .md-editor-textarea{min-height:132px;border:0;border-radius:0}
/* 组件自带的两条聚焦描边（markdown.css 的 `.md-editor-textarea:focus` 主色圈、
   `:focus-within .md-editor-toolbar` 主色边）在回帖框里要按住 —— 「编辑时不要有边框颜色」。
   markdown.css 排在本文件之后，同权重会被组件压回去，所以这里必须多写一层 .reply-box 提权。
   两行都重写 `border:0`（不是只改颜色）：上面那两条 border:0 让边框色回到 currentColor，
   只掐颜色的话聚焦瞬间仍会从 currentColor 跳到主色。 */
.reply-box .md-editor-textarea:focus{border:0;box-shadow:none}
.reply-box .md-editor-field:focus-within .md-editor-toolbar{border:0}
/* 不可回复（未登录 / 已关闭 / 表未就绪）：textarea 已由服务端渲染成 disabled，
   工具条整排灰掉并禁点，配合下面遮罩说明原因 */
.reply-box.is-lock .md-editor-toolbar,
.reply-box.is-lock .md-editor-textarea{opacity:.55}
.reply-box.is-lock .md-editor-toolbar button{cursor:not-allowed;pointer-events:none}
.reply-box.is-lock .md-editor-textarea{cursor:not-allowed}
.reply-lock{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
    flex-wrap:wrap;gap:8px;padding:10px;border-radius:8px;text-align:center;
    font-size:13px;color:var(--text-2);background:color-mix(in srgb, var(--card) 82%, transparent)}
.reply-lock i{font-size:16px;color:var(--primary)}
/* .btn-ghost 是全站共用类，缩小只作用于遮罩内这一处 */
.reply-lock .btn-ghost{height:28px;padding:0 10px;font-size:12.5px}
/* 引用条：点楼层「回复 / 引用」出现，× 取消，提交时作为 quotepid 发给接口 */
.quote-bar{display:flex;align-items:center;gap:8px;margin-top:10px;padding:7px 10px 7px 12px;
    border:1px dashed var(--primary);border-radius:8px;color:var(--text-2);font-size:12.5px;
    background:color-mix(in srgb, var(--primary) 7%, var(--bg))}
.quote-bar > i{color:var(--primary);font-size:14px}
.quote-bar .qb-text{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.quote-bar .qb-text b{color:var(--primary-dark);font-weight:700}
.quote-bar .qb-close{flex:0 0 auto;width:22px;height:22px;display:inline-flex;align-items:center;
    justify-content:center;border:0;border-radius:6px;background:none;color:var(--text-3);
    font-size:14px;cursor:pointer}
.quote-bar .qb-close:hover{background:var(--primary-light);color:var(--primary)}
/* 编辑条：复用 .quote-bar 的排版，但语义是「正在改一条旧回帖」，
   所以描边换成中性灰，避免和引用条看起来是同一件事。 */
.quote-bar.rp-edit{border-color:var(--text-3);color:var(--text-2);
    background:color-mix(in srgb, var(--text-3) 8%, var(--bg))}
.quote-bar.rp-edit > i{color:var(--text-2)}
.quote-bar.rp-edit .qb-text b{color:var(--text)}
.quote-bar.rp-edit .qb-close:hover{background:color-mix(in srgb, var(--text-3) 16%, var(--bg));color:var(--text)}
.reply-box-foot{display:flex;align-items:center;gap:10px;margin-top:11px;flex-wrap:wrap}
/* 新用户待审提示：常驻在编辑器与操作行之间，不用提交后才知情。
   --warn 随主题切换，底色用 color-mix 掺进 --card，暗色下不会出现白斑。 */
.rp-audit-tip{display:flex;align-items:flex-start;gap:7px;margin-top:10px;padding:7px 10px;
    border-radius:8px;font-size:12.5px;line-height:1.5;color:var(--text-2);
    background:color-mix(in srgb, var(--warn) 9%, var(--card))}
.rp-audit-tip > i{flex:0 0 auto;margin-top:1px;font-size:14px;color:var(--warn)}
.quick-em{display:flex;gap:4px;flex-wrap:wrap}
.quick-em span{cursor:pointer;width:26px;height:26px;display:flex;align-items:center;justify-content:center;
    border-radius:7px;font-size:15px;background:none;border:1px solid var(--border-soft);user-select:none;
    transition:border-color .15s,background .15s,transform .15s}
.quick-em span:hover{border-color:var(--primary);background:var(--primary-light);transform:translateY(-1px)}
/* 字数计数：thread.js 在 input 时刷新 #replyCount —— 达到最小字数转主色，超出上限标红 */
.rp-count{font-size:11.5px;color:var(--text-3);font-variant-numeric:tabular-nums;transition:color .15s}
.rp-count.ok{color:var(--primary)}
.rp-count.over{color:var(--danger)}
/* 发送键比全站基准按钮大一档：它是这一屏唯一的主动作 */
#replySend{height:36px;padding:0 18px;border-radius:9px;font-size:13.5px}
/* 原本这里有一条 `#replyPanel:focus-within{…}` —— 整个面板一聚焦就描一圈主色。
   v1.9.96 站长要求「编辑时不要有边框颜色」，整栏级别的描边同属这一类效果，已删。 */

/* ============================ 按钮 ============================ */
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 14px;
    border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--text-2);
    font-size:13px;cursor:pointer;font-family:inherit}
.btn-ghost:hover{color:var(--primary);border-color:var(--primary);background:var(--primary-light)}
.btn-ghost.on{color:var(--primary);border-color:var(--primary)}
.btn-primary2{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 16px;
    border-radius:8px;border:0;background:linear-gradient(120deg,var(--primary),var(--primary-dark));
    color:#fff;font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit}
/* 显式 color:#fff —— 否则被 pg-ui.css 的 a:hover{color:#0a58ca} 覆盖，hover 时白字变蓝 */
.btn-primary2:hover{filter:brightness(1.08);color:#fff}

/* ============================ 详情页管理操作（编辑 / 删除） ============================ */
.th-act{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
.th-act .btn-ghost{height:32px;padding:0 12px;font-size:13px}
.th-act .th-del:hover{color:#ef4444;border-color:#ef4444;background:rgba(239,68,68,.1)}

/* 删除确认弹窗（复用 .pv-mask 的遮罩过渡约定：hidden 隐藏、.pv-on 触发淡入） */
.cf-mask{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;
    padding:24px 16px;background:rgba(15,23,32,.5);opacity:0;transition:opacity .18s ease}
.cf-mask[hidden]{display:none}
.cf-mask.pv-on{opacity:1}
.cf-box{width:100%;max-width:380px;padding:26px 24px 22px;text-align:center;
    background:var(--card);border:1px solid var(--border);border-radius:16px;
    box-shadow:0 24px 64px rgba(16,32,48,.3);transform:translateY(10px) scale(.98);transition:transform .18s ease}
.cf-mask.pv-on .cf-box{transform:none}
.cf-ic{width:56px;height:56px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;
    border-radius:50%;background:rgba(239,68,68,.12);color:#ef4444;font-size:28px}
.cf-box h3{margin:0 0 6px;font-size:17px;color:var(--text)}
.cf-box p{margin:0 0 18px;font-size:13px;color:var(--text-3);line-height:1.6}
.cf-act{display:flex;gap:10px;justify-content:center}
.cf-act .btn-ghost,.cf-act .btn-primary2{margin-left:0;flex:1;justify-content:center}

/* ============================ 分享弹窗（thread.js 首次点击动态生成 .sh-mask） ============================
 * 渐变头 + 拍立得式二维码白卡；二维码底固定白色，暗色模式下扫码对比度不受主题影响 */
.sh-mask{position:fixed;inset:0;z-index:140;display:flex;align-items:center;justify-content:center;
    padding:24px 16px;background:rgba(15,23,32,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    opacity:0;transition:opacity .2s ease}
.sh-mask[hidden]{display:none}
.sh-mask.sh-on{opacity:1}
.sh-card{width:100%;max-width:400px;overflow:hidden;background:var(--card);
    border:1px solid var(--border);border-radius:18px;box-shadow:0 30px 80px rgba(16,32,48,.4);
    transform:translateY(14px) scale(.96);transition:transform .24s cubic-bezier(.2,.8,.25,1)}
.sh-mask.sh-on .sh-card{transform:none}
.sh-hd{position:relative;display:flex;align-items:center;justify-content:space-between;padding:15px 18px;
    background:linear-gradient(120deg,var(--primary),var(--primary-dark));color:#fff}
.sh-hd:before{content:"";position:absolute;right:-34px;top:-64px;width:170px;height:170px;border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.28),rgba(255,255,255,0) 70%);pointer-events:none}
.sh-hd-t{font-size:15px;font-weight:700;letter-spacing:.5px;display:inline-flex;align-items:center;gap:7px}
.sh-x{width:30px;height:30px;border:0;border-radius:8px;background:rgba(255,255,255,.16);color:#fff;
    font-size:16px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .15s}
.sh-x:hover{background:rgba(255,255,255,.3)}
.sh-body{padding:20px 22px 18px}
.sh-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    font-size:16.5px;font-weight:700;line-height:1.5;color:var(--text);text-align:center}
.sh-meta{margin:6px 0 16px;font-size:12.5px;color:var(--text-3);text-align:center;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-qr{display:flex;flex-direction:column;align-items:center;gap:10px}
.sh-qr-box{padding:14px;background:#fff;border:1px solid var(--border);border-radius:14px;
    box-shadow:0 10px 30px rgba(15,157,143,.16);line-height:0}
.sh-qr-box img,.sh-qr-box canvas{display:block}
.sh-qr-tip{font-size:12px;color:var(--text-3);display:inline-flex;align-items:center;gap:4px}
.sh-qr-off{width:168px;height:168px;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:4px;font-size:12.5px;color:var(--text-3);line-height:1.7}
.sh-link{display:flex;align-items:center;gap:8px;margin-top:16px;padding:9px 10px 9px 12px;
    background:var(--bg);border:1px dashed var(--border);border-radius:10px}
.sh-link-t{flex:1;min-width:0;font-size:12px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-family:var(--pg-ui-font-mono,ui-monospace,Menlo,Consolas,monospace)}
.sh-copy{flex:none;display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 12px;border:0;border-radius:8px;
    background:var(--primary);color:#fff;font-size:12.5px;cursor:pointer;transition:background .15s,transform .1s}
.sh-copy:hover{background:var(--primary-dark);color:#fff}
.sh-copy:active{transform:scale(.96)}
.sh-copy.ok{background:var(--primary-dark)}
.sh-ft{padding:0 22px 16px;text-align:center}

/* 选择弹窗通用外壳（标记 / 状态弹窗共用，约定同 .sh-mask） */
.sp-mask{position:fixed;inset:0;z-index:140;display:flex;align-items:center;justify-content:center;
    padding:24px 16px;background:rgba(15,23,32,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    opacity:0;transition:opacity .2s ease}
.sp-mask[hidden]{display:none}
.sp-mask.sp-on{opacity:1}
.sp-card{width:100%;max-width:560px;max-height:86vh;display:flex;flex-direction:column;overflow:hidden;
    background:var(--card);border:1px solid var(--border);border-radius:18px;box-shadow:0 30px 80px rgba(16,32,48,.4);
    transform:translateY(14px) scale(.96);transition:transform .24s cubic-bezier(.2,.8,.25,1)}
.sp-mask.sp-on .sp-card{transform:none}
.sp-hd{position:relative;display:flex;align-items:center;justify-content:space-between;padding:15px 18px;
    background:linear-gradient(120deg,var(--primary),var(--primary-dark));color:#fff}
.sp-hd-t{font-size:15px;font-weight:700;letter-spacing:.5px;display:inline-flex;align-items:center;gap:7px}
.sp-x{width:30px;height:30px;border:0;border-radius:8px;background:rgba(255,255,255,.16);color:#fff;
    font-size:16px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .15s}
.sp-x:hover{background:rgba(255,255,255,.3);color:#fff}
.sp-body{flex:1;min-height:120px;overflow:auto;padding:18px}
.sp-loading,.sp-empty{padding:26px 10px;text-align:center;font-size:13px;line-height:1.9;color:var(--text-3)}
.sp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:12px}
.sp-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 8px;cursor:pointer;
    border:1px solid var(--border);border-radius:12px;background:var(--bg);color:var(--text-2);font-family:inherit}
.sp-item img{width:100%;max-width:84px;height:72px;object-fit:contain}
.sp-item:hover{border-color:var(--primary)}
.sp-item.on{border-color:var(--primary);background:var(--primary-light);box-shadow:0 0 0 2px var(--primary-light) inset}
.sp-name{font-size:12px;line-height:1.4;text-align:center;word-break:break-all}
/* 标记弹窗：复用上面 .sp-* 的弹窗外壳，只把瓦片内容从图片换成图标 */
.sp-tip{margin:-4px 0 12px;font-size:12.5px;line-height:1.7;color:var(--text-3)}
.mk-item{gap:8px;padding:14px 8px}
.mk-item .mk{font-size:26px;line-height:1;color:var(--mk-c)}
/* 状态弹窗：同样复用 .sp-* 外壳，单选瓦片。颜色用后台配置的 --st-c（原色）与 --st-fg（压暗后可读色），
   写在这几条规则里而不是 .sp-item.on 之前，选中态才会盖掉通用的主色描边。 */
.st-grid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
.st-item{gap:7px;padding:14px 10px}
.st-item .st-dot{width:14px;height:14px;box-shadow:0 0 0 4px color-mix(in srgb, var(--st-c) 16%, transparent)}
.st-item .sp-name{color:var(--st-fg);font-weight:600}
.st-item:hover{border-color:var(--st-c)}
.st-item.on{border-color:var(--st-c);background:color-mix(in srgb, var(--st-c) 10%, transparent);
    box-shadow:0 0 0 2px color-mix(in srgb, var(--st-c) 24%, transparent) inset}
.st-gift{display:inline-flex;align-items:center;gap:3px;font-size:11px;line-height:1.5;font-style:normal;color:var(--text-3)}
.st-gift.plus{color:#0d8a5f}
.st-gift.minus{color:var(--danger)}
[data-theme="dark"] .st-item .sp-name{color:color-mix(in srgb, var(--st-c) 55%, #fff)}
[data-theme="dark"] .st-gift.plus{color:#34d399}
.sp-ft{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;
    border-top:1px solid var(--border)}
.sp-ft .sp-cancel{color:var(--text-3)}
.sp-ft .sp-cancel:hover{color:#ef4444;border-color:#ef4444;background:rgba(239,68,68,.1)}

/* ============================ 右栏 ============================ */
/* 作者卡首行：头像 + 昵称 + 关注 并排，签名在下面独占一行（.su-bio）。
   卡片只有 300px 宽，昵称必须自己吃掉剩余宽度并省略号，不能把关注按钮挤出去。 */
.side-user{padding:12px 14px;border-bottom:1px solid var(--border-soft)}
.su-top{display:flex;align-items:center;gap:10px}
.su-top .avt{width:44px;height:44px;font-size:17px}
.su-name{flex:1;min-width:0;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 按钮比 .btn-ghost 默认矮一档（口径同 .post-foot .btn-ghost），44px 头像旁边不显笨重 */
.su-follow{flex:0 0 auto;height:30px;padding:0 11px;gap:5px;font-size:12.5px;border-radius:7px}
.su-bio{margin-top:8px;font-size:12px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 数字行是卡片末行：.panel 有 border 且 overflow:hidden，这里再描一条底边会贴着卡片边框出现双线 */
.side-num{display:flex;text-align:center}
.side-num>div{flex:1;padding:10px 0}
.side-num>div+div{border-left:1px solid var(--border-soft)}
.side-num b{display:block;font-size:15px;color:var(--primary);font-variant-numeric:tabular-nums}
.side-num span{font-size:11px;color:var(--text-3)}

/* ---------- 本页目录 ----------
 * 仅当正文存在带 id 的 h3/h4 小标题时才由模板渲染整块；无目录时不输出该面板。 */
.toc{position:sticky;top:74px}
.toc-hd .num{font-size:11px;color:var(--text-3);font-weight:400;margin-left:auto}
.toc-links{padding:8px 0 10px;max-height:62vh;overflow:auto}
/* 目录条目一律单行，超出用省略号收（站长：多行换行不友好）。
   全文靠模板上的 title 悬停给出，所以这里截断不许改成换行或 -webkit-line-clamp。 */
.toc-links a{display:block;padding:6px 14px;font-size:13px;line-height:1.5;color:var(--text-2);border-left:2px solid transparent;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toc-links a:hover,.toc-links a.on{color:var(--primary);border-left-color:var(--primary);background:var(--primary-light)}
.toc-links a.lv2{padding-left:28px;font-size:12.5px;color:var(--text-3)}
.toc-links a.lv2.on{color:var(--primary)}
/* 抽屉三件套：宽屏全部不出现，≤760px 才启用（见文末响应式段） */
.toc-close,.toc-fab,.toc-mask{display:none}

/* ============================ 空态 ============================ */
.empty-page{padding:56px 18px;text-align:center;color:var(--text-3)}
.empty-page i{font-size:44px;opacity:.5}
.empty-page p{font-size:15px;margin:12px 0 18px}
.empty-hint{display:block;font-size:12px;color:var(--text-3);margin-bottom:18px;line-height:1.6}
.empty-hint code{display:inline-block;padding:1px 6px;margin:0 2px;background:var(--bg);border:1px solid var(--border);border-radius:4px;font-family:var(--font-mono, monospace);font-size:11px;color:var(--pg-primary,#0f9d8f)}

/* ============================ 404 页（帖子不存在 / 表未初始化） ============================
 * 路由：/thread-detail-{tid}.html 取不到帖子时渲染，居中卡片 + 倒计时自动回首页
 * 配色全走 --primary / --card / --text-* 变量，明暗主题自动适配
 * ======================================================================================== */
.nf-wrap{display:flex;justify-content:center;padding:46px 18px 68px}
.nf-card{position:relative;width:100%;max-width:520px;padding:34px 30px 26px;text-align:center;
    background:var(--card);border:1px solid var(--border);border-radius:18px;
    box-shadow:0 14px 44px rgba(16,32,48,.09);overflow:hidden}
/* 顶部柔和光晕：纯装饰，不拦截点击 */
.nf-card:before{content:"";position:absolute;left:50%;top:-90px;width:260px;height:260px;
    transform:translateX(-50%);background:radial-gradient(circle,var(--primary-light),rgba(255,255,255,0) 70%);pointer-events:none}
.nf-code{position:relative;font-size:78px;line-height:1;font-weight:800;letter-spacing:4px;
    background:linear-gradient(120deg,var(--primary),var(--primary-dark));
    -webkit-background-clip:text;background-clip:text;color:transparent}
.nf-ill{position:relative;margin:8px 0 2px;font-size:34px;color:var(--text-3)}
.nf-title{position:relative;margin:8px 0 10px;font-size:19px;font-weight:700;color:var(--text)}
.nf-desc{position:relative;margin:0 0 22px;font-size:13.5px;line-height:1.75;color:var(--text-3)}
.nf-desc b{color:var(--text-2);font-variant-numeric:tabular-nums}
.nf-desc code{display:inline-block;padding:1px 6px;margin:0 2px;background:var(--bg);
    border:1px solid var(--border);border-radius:4px;font-size:11.5px;color:var(--pg-primary,#0f9d8f)}
.nf-count{position:relative;font-size:13px;color:var(--text-2)}
.nf-sec{display:inline-block;min-width:22px;font-weight:700;color:var(--primary);font-variant-numeric:tabular-nums}
.nf-bar{position:relative;height:4px;max-width:260px;margin:12px auto 22px;border-radius:99px;
    background:var(--border-soft);overflow:hidden}
.nf-bar>i{display:block;width:100%;height:100%;border-radius:99px;
    background:linear-gradient(120deg,var(--primary),var(--primary-dark));transition:width .95s linear}
.nf-act{position:relative;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.nf-tip{position:relative;margin-top:16px;font-size:12px;color:var(--text-3)}

/* 通用轻提示样式在 home.css（公共层已包含），此处不重复定义 */

/* ============================ 发表帖子页 ============================
 * 路由 /thread-create.html，编辑器来自 phpGrace/tools/markdown.php
 * 说明：编辑器的结构样式由 statics/vender/markdown/markdown.css 提供，
 *       这里只做「与本站点主题（明暗两套）对齐」和本页布局部分。
 * ==================================================================== */
.pg-main-create [hidden]{display:none !important}   /* panel 的 display:block 会盖掉 hidden */

/* 未登录提示条 */
.notice-login{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding:12px 16px;
    border:1px solid var(--border);border-left:3px solid #f59e0b;background:var(--card);font-size:13px}
.notice-login>div{flex:1;min-width:0}
.notice-login>div span{display:block;color:var(--text-3);margin-top:2px}
.notice-login>i{font-size:20px;color:#f59e0b}

.login-wall{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:40px 20px;background:var(--bg)}
.lw-card{width:100%;max-width:420px;text-align:center;
    background:var(--card);border:1px solid var(--border-soft);border-radius:20px;
    padding:48px 36px 40px;box-shadow:var(--shadow-lg, 0 8px 30px rgba(0,0,0,.08));position:relative;overflow:hidden}
.lw-card::before{content:'';position:absolute;top:-40%;left:50%;transform:translateX(-50%);width:120%;height:180px;
    background:radial-gradient(ellipse at center, rgba(15,157,143,.08) 0%, transparent 70%);pointer-events:none}

/* 锁图标 + 涟漪 */
.lw-icon{position:relative;width:72px;height:72px;margin:0 auto 22px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,rgba(15,157,143,.08),rgba(59,130,246,.08));z-index:1}
.lw-icon>i{font-size:28px;color:var(--pg-primary,#0f9d8f);position:relative;z-index:2}
.lw-pulse{position:absolute;inset:0;border-radius:50%;border:2px solid var(--pg-primary,#0f9d8f);opacity:0;
    animation:lwPulse 2s ease-out infinite}
@keyframes lwPulse{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.6);opacity:0}}

/* 标题 */
.lw-title{font-size:22px;font-weight:700;color:var(--text-1);margin:0 0 8px;position:relative;z-index:1}
.lw-sub{font-size:14px;color:var(--text-3);margin:0 0 28px;line-height:1.6;position:relative;z-index:1}

/* 倒计时 */
.lw-countdown{margin-bottom:18px;display:flex;align-items:baseline;justify-content:center;gap:6px;z-index:1;position:relative}
.lw-num{font-size:40px;font-weight:800;color:var(--pg-primary,#0f9d8f);line-height:1;font-variant-numeric:tabular-nums;
    display:inline-block;min-width:40px;text-align:center}
.lw-tip{font-size:13px;color:var(--text-3)}

/* 进度条 */
.lw-bar{height:4px;border-radius:4px;background:var(--border-soft);margin:0 auto 28px;width:100%;max-width:200px;overflow:hidden;z-index:1;position:relative}
.lw-bar>i{display:block;height:100%;width:0%;border-radius:4px;
    background:linear-gradient(90deg,var(--pg-primary,#0f9d8f),#3b82f6);transition:width 1s linear}

/* 按钮 */
.lw-btns{display:flex;gap:12px;justify-content:center;margin-bottom:18px;z-index:1;position:relative}
.lw-btn-primary,.lw-btn-sign{display:inline-flex;align-items:center;gap:7px;
    font-size:14px;font-weight:600;border-radius:10px;padding:11px 24px;
    text-decoration:none;cursor:pointer;border:1px solid transparent;
    transition:transform .15s,box-shadow .2s,background .2s,color .2s}
.lw-btn-primary{background:var(--pg-primary,#0f9d8f);color:#fff;box-shadow:0 2px 8px rgba(15,157,143,.25)}
.lw-btn-primary:hover{background:#0d8a7e;color:#fff;transform:translateY(-1px);box-shadow:0 4px 14px rgba(15,157,143,.35)}
.lw-btn-sign{background:var(--card);color:var(--text-2);border-color:var(--border)}
.lw-btn-sign:hover{background:var(--bg-hover, var(--bg));color:var(--text-1);border-color:var(--text-3);transform:translateY(-1px)}

/* 返回首页 */
.lw-back{display:inline-block;font-size:13px;color:var(--text-3);text-decoration:none;transition:color .2s;z-index:1;position:relative}
.lw-back:hover{color:var(--pg-primary,#0f9d8f)}

/* 通用输入 / 勾选（.field / .field-lb 等旧版带标签的表单行已于 v1.7.8 移除） */
.ipt{width:100%;height:38px;padding:0 12px;border:1px solid var(--border);border-radius:8px;
    background:var(--card);color:var(--text);font:inherit;font-size:14px;outline:none}
.ipt:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(var(--primary-rgb),.1)}
.chk{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-2);cursor:pointer;user-select:none}
.chk input{width:15px;height:15px;accent-color:var(--primary)}

/* ============================ 板块级联选择器（多级联动） ============================
 * 逐列下钻：点分区展开下一列，点末级（可发帖）板块即选中；窄屏只显示当前列 + 面包屑
 * ================================================================================== */
.cas{position:relative;max-width:460px}
.cas-trigger{display:flex;align-items:center;gap:8px;width:100%;height:40px;padding:0 12px;
    border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--text);
    font:inherit;font-size:14px;cursor:pointer;text-align:left;
    transition:border-color .15s,box-shadow .15s,background .15s}
.cas-trigger:hover{border-color:var(--primary)}
.cas-trigger[aria-expanded="true"]{border-color:var(--primary);box-shadow:0 0 0 3px rgba(var(--primary-rgb),.1)}
.cas-trigger.picked{background:var(--primary-light);border-color:var(--primary);color:var(--primary);font-weight:600}
.cas-trigger>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cas-trigger>i:first-child{color:var(--primary);font-size:17px}
.cas-trigger.picked>i:first-child{color:var(--primary)}
.cas-trigger>i:last-child{color:var(--text-3);font-size:15px;transition:transform .18s ease}
.cas-trigger[aria-expanded="true"]>i:last-child{transform:rotate(180deg)}

.cas-panel{position:absolute;top:46px;left:0;z-index:60;min-width:100%;width:max-content;
    max-width:min(560px,92vw);padding:10px;border:1px solid var(--border);border-radius:12px;
    background:var(--card);box-shadow:0 18px 44px rgba(16,32,48,.18);
    opacity:0;transform:translateY(-4px);transition:opacity .16s ease,transform .16s ease}
.cas-panel.show{opacity:1;transform:none}
.cas-crumb{display:flex;align-items:center;flex-wrap:wrap;gap:2px;padding:2px 4px 8px;font-size:12px;color:var(--text-3)}
.cas-crumb button{border:0;background:none;padding:2px 5px;border-radius:6px;color:var(--text-3);
    font:inherit;font-size:12px;cursor:pointer}
.cas-crumb button:hover{color:var(--primary);background:var(--primary-light)}
.cas-crumb .cur{color:var(--text);font-weight:600}
.cas-crumb .sep{opacity:.45}
.cas-cols{display:flex;align-items:stretch;max-height:268px;overflow:auto}
.cas-col{flex:0 0 auto;width:160px;max-height:260px;overflow:auto;padding:2px 6px 2px 2px;
    border-right:1px solid var(--border-soft)}
.cas-col:last-child{border-right:0}
.cas-item{display:flex;align-items:center;gap:6px;width:100%;padding:7px 9px;border:0;border-radius:8px;
    background:none;color:var(--text-2);font:inherit;font-size:13.5px;text-align:left;cursor:pointer}
.cas-item:hover{background:var(--primary-light);color:var(--primary)}
.cas-item.on{background:var(--primary-light);color:var(--primary);font-weight:600}
.cas-item>i{flex:0 0 auto;font-size:15px;color:var(--text-3)}
.cas-item:hover>i,.cas-item.on>i{color:var(--primary)}
.cas-item .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cas-item .cnt{flex:0 0 auto;font-size:11px;color:var(--text-3);font-variant-numeric:tabular-nums}
.cas-item.on .cnt{color:var(--primary)}
/* 分区（type=1）且无下级：只作分组标题，不可选 */
.cas-item.dis{cursor:default;color:var(--text-3)}
.cas-item.dis:hover{background:none;color:var(--text-3)}
.cas-empty{padding:16px 8px;text-align:center;font-size:13px;color:var(--text-3)}
.cas-tip{margin-top:8px;padding-top:8px;border-top:1px solid var(--border-soft);
    font-size:11.5px;color:var(--text-3);text-align:center}

/* ============================ 发帖卡片（去字段标签版） ============================
 * 不再出现「发布板块 / 标题 / 正文」这类标签文字，全部改用图标 + placeholder 引导
 * ================================================================================ */
.pg-main.pg-main-create{grid-template-columns:minmax(0,1fr)}   /* 右栏已移除，强制单列 */

/* 草稿提示条：检测到本机草稿时显示，恢复 / 丢弃由用户点（脚本不做自动回填） */
.draft-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px;
    padding:11px 16px;border:1px solid var(--primary);border-radius:var(--radius);
    background:var(--primary-light)}
.draft-bar .db-txt{display:flex;align-items:center;gap:8px;flex:1;min-width:0;
    font-size:13px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.draft-bar .db-txt>i{flex:0 0 auto;font-size:17px;color:var(--primary)}
.draft-bar .db-act{display:flex;align-items:center;gap:8px;margin-left:auto}
.draft-bar .btn-ghost,.draft-bar .btn-primary2{height:32px;padding:0 12px;font-size:12.5px;margin-left:0}

.create-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding-bottom:0}
.create-top{display:flex;align-items:center;padding:16px 18px 2px}
.create-top .cas{flex:0 1 340px;max-width:100%}

/* 代发选择器（v2.0.57）：后台名单为空时这段 DOM 压根不画；换板块时由 JS 收/放（hidden 属性） */
.create-as{display:flex;align-items:center;gap:8px;padding:10px 18px 0;font-size:13px;color:var(--text-2)}
.create-as[hidden]{display:none}
.create-as>i{flex:0 0 auto;font-size:16px;color:var(--text-3)}
.create-as-sel{flex:0 1 auto;min-width:0;max-width:230px;height:32px;padding:0 8px;border:1px solid var(--border);
    border-radius:8px;background:var(--card);color:var(--text);font:inherit;font-size:13px;outline:none;
    transition:border-color .15s}
.create-as-sel:hover,.create-as-sel:focus{border-color:var(--primary)}
.create-as-tip{font-size:12px;color:var(--text-3)}

/* 标题：无框大字号输入 + 左侧铅笔图标，聚焦时才出现下划线（像「文章标题」而不是表单项） */
.create-title-wrap{display:flex;align-items:center;gap:10px;padding:8px 18px 12px}
.create-title-wrap>i{flex:0 0 auto;font-size:19px;color:var(--text-3);transition:color .15s}
.create-title-wrap:focus-within>i{color:var(--primary)}
.create-title{display:block;flex:1;min-width:0;padding:8px 0;border:0;border-bottom:1px solid transparent;
    background:transparent;color:var(--text);font:inherit;font-size:19px;font-weight:700;outline:none;border-bottom-color:var(--primary)}
.create-title::placeholder{font-size:15px;font-weight:400;color:var(--text-3);}
.create-count{flex:0 0 auto;font-size:11.5px;color:var(--text-3);font-variant-numeric:tabular-nums}

.create-body{padding:0 18px}
.create-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;
    padding:12px 18px 16px;border-top:1px solid var(--border-soft)}
.create-hint{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex:1;min-width:0;font-size:12px;color:var(--text-3)}
.create-hint .dot{opacity:.5}
.create-hint .draft-tip,.create-hint .form-msg{color:var(--primary)}
.create-act{display:flex;align-items:center;gap:8px;margin-left:auto}

/* ============================ 预览弹窗 ============================ */
.pv-mask{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
    padding:32px 16px;background:rgba(15,23,32,.48);opacity:0;transition:opacity .18s ease}
.pv-box{display:flex;flex-direction:column;width:100%;max-width:820px;max-height:84vh;
    background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;
    box-shadow:0 24px 64px rgba(16,32,48,.3);transform:translateY(10px) scale(.98);transition:transform .18s ease}
.pv-mask.pv-on{opacity:1}
.pv-mask.pv-on .pv-box{transform:none}
.pv-hd{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--border-soft)}
.pv-hd>i{font-size:17px;color:var(--primary)}
.pv-hd b{font-size:14px;color:var(--text)}
.pv-hd .subtle{font-size:11.5px}
.pv-x{margin-left:auto;width:28px;height:28px;display:flex;align-items:center;justify-content:center;
    border:0;border-radius:7px;background:transparent;color:var(--text-3);font-size:16px;cursor:pointer}
.pv-x:hover{background:var(--bg);color:var(--text)}
.pv-bd{position:relative;flex:1;overflow:auto;padding:20px 24px 28px}
.pv-title{margin-bottom:14px}
.pv-title h1{font-size:22px;line-height:1.45;margin:0;color:var(--text)}
.pv-title .subtle{font-size:12.5px}
.pv-body-empty{font-size:13px;color:var(--text-3)}
.pv-loading{display:none;padding:30px 0;text-align:center;font-size:13px;color:var(--text-3)}
.pv-loading i{display:inline-block;margin-right:6px;animation:pvSpin .9s linear infinite}
@keyframes pvSpin{to{transform:rotate(360deg)}}
.pv-mask.pv-loading-on .pv-loading{display:block}
.pv-ft{display:flex;align-items:center;gap:8px;padding:12px 16px;border-top:1px solid var(--border-soft);background:var(--bg)}
.pv-ft .pv-len{flex:1;font-size:12px}
.pv-ft .btn-primary2{margin-left:0}
.md-preview-body{padding:14px 18px 18px}

/* ============================ 离开确认弹窗 ============================ */
/* 替代浏览器原生 beforeunload 弹窗（文案与样式均无法定制）；
   配色沿用 --card / --text-* / --primary 变量，明暗主题自动适配 */
.lv-mask .lv-box{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
    width:100%;max-width:400px;padding:30px 26px 22px;
    background:var(--card);border:1px solid var(--border);border-radius:16px;
    box-shadow:0 24px 64px rgba(16,32,48,.3);transform:translateY(10px) scale(.98);transition:transform .18s ease}
.lv-mask.pv-on .lv-box{transform:none}
.lv-mask .pv-x{position:absolute;top:10px;right:10px;margin-left:0}
.lv-icon{width:60px;height:60px;margin-bottom:14px;display:flex;align-items:center;justify-content:center;
    border-radius:50%;background:var(--primary-light);color:var(--primary);font-size:28px}
.lv-title{margin:0 0 6px;font-size:17px;font-weight:600;color:var(--text);line-height:1.4}
.lv-sub{margin:0 0 20px;font-size:13px;line-height:1.7;color:var(--text-2)}
.lv-btns{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;width:100%}
.lv-btns>*{margin-left:0}
/* 危险操作按钮：描边式弱化，避免和主按钮抢焦点 */
.btn-danger-ghost{display:inline-flex;align-items:center;gap:5px;padding:8px 14px;border-radius:8px;
    border:1px solid var(--border);background:transparent;color:var(--danger);font-size:13px;cursor:pointer;
    font-family:inherit;transition:all .15s ease}
.btn-danger-ghost:hover{border-color:var(--danger);background:rgba(239,68,68,.08)}
@media(max-width:480px){
    .lv-btns{flex-direction:column-reverse;align-items:stretch}
    .lv-btns>*{justify-content:center}
}

/* ============================ 发布成功弹窗 ============================ */
/* 复用 .pv-mask 的遮罩与开合过渡，卡片本体单独一套居中窄卡 */
.ok-mask .ok-box{display:flex;flex-direction:column;align-items:center;text-align:center;
    width:100%;max-width:380px;padding:30px 26px 24px;
    background:var(--card);border:1px solid var(--border);border-radius:16px;
    box-shadow:0 24px 64px rgba(16,32,48,.3);transform:translateY(10px) scale(.98);transition:transform .18s ease}
.ok-mask.pv-on .ok-box{transform:none}
.ok-icon{width:68px;height:68px;margin-bottom:14px;display:flex;align-items:center;justify-content:center;
    border-radius:50%;background:var(--primary-light)}
.ok-icon svg{width:52px;height:52px}
.ok-icon .ok-circle{fill:none;stroke:var(--primary);stroke-width:3;stroke-linecap:round;
    stroke-dasharray:152;stroke-dashoffset:152}
.ok-icon .ok-check{fill:none;stroke:var(--primary);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;
    stroke-dasharray:44;stroke-dashoffset:44}
/* 动画只在卡片可见（去掉 hidden）后才播放，重复打开也会重新播放 */
.ok-mask.pv-on .ok-icon .ok-circle{animation:okCircle .5s ease forwards}
.ok-mask.pv-on .ok-icon .ok-check{animation:okCheck .34s .42s ease forwards}
@keyframes okCircle{to{stroke-dashoffset:0}}
@keyframes okCheck{to{stroke-dashoffset:0}}
.ok-title{margin:0;font-size:19px;font-weight:700;color:var(--text)}
.ok-sub{margin:8px 0 0;font-size:13px;color:var(--text-2)}
.ok-thread{margin:6px 0 0;max-width:100%;font-size:12.5px;color:var(--text-3);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-all}
/* 允许换行：窄屏下「N 秒后自动跳转到帖子详情…」不会顶出卡片 */
.ok-countdown{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:5px;
    max-width:100%;margin-top:18px;font-size:12.5px;color:var(--text-3);text-align:center;line-height:1.5}
.ok-countdown .ok-num{display:inline-block;min-width:16px;font-size:15px;font-weight:700;
    color:var(--primary);font-variant-numeric:tabular-nums}
.ok-bar{width:100%;height:3px;margin-top:10px;border-radius:999px;background:var(--border-soft);overflow:hidden}
.ok-bar>i{display:block;width:100%;height:100%;border-radius:999px;background:var(--primary)}
.ok-btns{margin-top:20px;width:100%}
.ok-btn{display:flex;align-items:center;justify-content:center;gap:6px;height:40px;width:100%;
    border:0;border-radius:10px;background:var(--primary);color:#fff;font-size:14px;font-weight:600;
    cursor:pointer;text-decoration:none;transition:filter .15s}
.ok-btn:hover{filter:brightness(1.07);color:#fff}

/* 右栏须知 */
.tip-list{list-style:none;padding:8px 14px 12px}
.tip-list li{display:flex;gap:8px;padding:6px 0;font-size:12.5px;color:var(--text-2);line-height:1.7}
.tip-list i{color:var(--primary);flex:0 0 auto;font-size:15px;margin-top:2px}
.md-cheat{width:100%;border-collapse:collapse;font-size:12px}
.md-cheat td{padding:6px 14px;border-bottom:1px solid var(--border-soft);vertical-align:top;line-height:1.6}
.md-cheat tr:last-child td{border-bottom:0}
.md-cheat td:first-child{color:var(--primary);white-space:nowrap;font-family:ui-monospace,Menlo,Consolas,monospace}
.md-cheat td:last-child{color:var(--text-3)}
.md-cheat code{padding:1px 4px;border-radius:4px;background:var(--bg);font-size:11.5px}

/* ---- markdown 编辑器贴合站点主题（外置 markdown.css 之后的微调） ---- */
.md-editor-field{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--card)}
/* 「编辑内容的时候不要有边框颜色」（v1.9.96 站长圈的）：这里原本有一条
   `.md-editor-field:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px …}`，
   一敲键盘整圈外框变绿。前台三处编辑器（回帖框 / 发帖页 / 编辑页）共用这条规则，删掉即三处一起安静。
   编辑态靠光标（caret 走主色）和常驻工具条表达，不靠描边。回归见 node test/_ui_editor_focus.js。 */
/* 输入区：拉丁字符继续走等宽（正文里贴代码要靠等宽对齐缩进），中文单独点名微软雅黑。
 * 前面这串等宽字体全都不含汉字，中文只能落到栈尾的 generic monospace 由浏览器按脚本兜底：
 * 本机 CDP 实测兜到 Noto Sans SC（笔画细、全角标点挤成窄格），换机器/换浏览器就可能是宋体。
 * 兜底档必须插在 monospace **之前**（放后面永远轮不到）：拉丁仍命中栈首等宽，只有中文换了字面。
 * 字体清单照 pg-ui 的 --pg-ui-font-mono 抄全 —— var() 展开后没法往列表中间插一档。
 * 改这类字体规则用 node test/_fontprobe.js 取证，量字宽判不出字面归属。 */
.md-editor-field.md-front .md-editor-textarea{min-height:340px;font-size:14.5px;line-height:1.8;
    font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New","Microsoft YaHei","微软雅黑",monospace;tab-size:4}

/* 去掉 markdown.css 里那套 Bootstrap 蓝（#0d6efd）聚焦描边，聚焦反馈统一交给外框的主题色。
 * ⚠️ 选择器权重必须高于 markdown.css（它在 thread.css 之后加载）：这里一律带 .md-front 前缀。 */
.md-editor-field.md-front .md-editor-textarea:focus{border-color:var(--border);box-shadow:none}
.md-editor-field.md-front:focus-within .md-editor-toolbar{border-color:var(--border)}
.md-editor-field.md-front .md-editor-toolbar button:focus-visible{
    outline:2px solid var(--primary);outline-offset:1px}
/* 编辑器弹窗（图片 / 视频 / 网盘）里的输入框同理 */
.md-editor-dialog .md-editor-dialog-field input:focus,
.md-editor-dialog .md-video-form select:focus,
.md-editor-dialog .md-image-form select:focus,
.md-editor-dialog .md-image-custom-size:focus,
.md-editor-dialog .md-netdisk-form select:focus,
.md-editor-dialog .md-netdisk-form textarea:focus{
    border-color:var(--primary);box-shadow:0 0 0 3px rgba(var(--primary-rgb),.12)}

/* ============================ 响应式 ============================ */
@media(max-width:1000px){
    .pg-main{grid-template-columns:minmax(0,1fr)}
    /* 单列时右栏（目录 / 作者卡）整体移到正文下方 */
    .thread-side{order:2;align-self:auto}
    /* 平板档目录是排在卡片上方的吸顶横条：把 order 改回默认，否则横条变成末位、sticky 行程归零 */
    .thread-side > .toc{order:0}
    /* 小屏：目录面板整体吸顶（面板本身 sticky，横向条随面板一起固定），
       正文滚动时目录始终可点，避免被排在长正文之后够不到。 */
    .toc{position:sticky;top:64px;z-index:30}
    .toc-links{display:flex;gap:6px;overflow-x:auto;max-height:none;padding:10px 12px}
    /* flex:0 0 auto 是必须的：胶囊一旦允许收缩，11 条会挤成每条 68px、全部只剩省略号。
       横排条的本意就是「保持自然宽度、整条横向滚动」。 */
    .toc-links a{padding:5px 11px;border:1px solid var(--border);border-radius:999px;white-space:nowrap;
        flex:0 0 auto;max-width:46vw;overflow:hidden;text-overflow:ellipsis}
    .toc-links a.lv2{padding-left:11px}
    .toc-links a:hover,.toc-links a.on{border-color:var(--primary);border-left:1px solid var(--primary);background:var(--primary-light)}
}
@media(max-width:760px){
    /* 发帖页：标签改到输入框上方，给正文留出宽度 */
/* 发帖卡片：窄屏收紧内边距，按钮换行铺满 */
/* 草稿提示条：窄屏文案换行、按钮铺满一行 */
.draft-bar{padding:10px 12px;gap:8px}
.draft-bar .db-txt{flex:1 1 100%;white-space:normal}
.draft-bar .db-act{flex:1 1 100%;margin-left:0}
.draft-bar .db-act .btn-ghost,.draft-bar .db-act .btn-primary2{flex:1 1 0;justify-content:center}
.create-top{padding:12px 14px 2px}
.create-top .cas{flex:1 1 100%;max-width:100%}
.create-as{padding:10px 14px 0;flex-wrap:wrap}
.create-as-sel{max-width:none;flex:1 1 160px}
.create-as-tip{flex:1 1 100%;padding-left:24px}
.create-title-wrap{padding:6px 14px 12px;gap:8px}
.create-title{font-size:17px}
.create-body{padding:0 14px}
.create-foot{padding:12px 14px 16px}
.create-act{margin-left:0;width:100%;flex-wrap:wrap}
.create-act .btn-ghost,.create-act .btn-primary2{flex:1 1 auto;justify-content:center}
/* 预览弹窗：窄屏几乎全屏 */
.pv-mask{padding:14px 10px}
.pv-box{max-height:92vh;border-radius:12px}
.pv-bd{padding:16px 16px 22px}
.pv-ft{flex-wrap:wrap}
.pv-ft .pv-len{flex:1 1 100%;margin-bottom:4px}
/* 发布成功弹窗：窄屏收紧 */
.ok-mask{padding:16px 14px}
.ok-box{padding:26px 20px 20px;border-radius:14px}
.ok-icon{width:60px;height:60px;margin-bottom:12px}
.ok-icon svg{width:46px;height:46px}
.ok-title{font-size:18px}
.notice-login{flex-wrap:wrap}
.login-wall{padding:24px 14px}
.lw-card{padding:34px 22px 30px;border-radius:16px}
.lw-icon{width:56px;height:56px;margin-bottom:16px}
.lw-icon>i{font-size:22px}
.lw-title{font-size:18px}
.lw-sub{font-size:13px;margin-bottom:22px}
.lw-num{font-size:32px;min-width:32px}
.lw-btns{flex-direction:column;gap:10px}
.lw-btn-primary,.lw-btn-sign{width:100%;justify-content:center}
/* 窄屏：头像和留白各收一档，底栏一行放不下就让操作簇整块换到第二行，
   不许把面板撑出横向滚动。分隔线保留，间距跟着收。 */
.thread-panel [data-pane]{padding:18px 12px 8px}
.floor{grid-template-columns:34px minmax(0,1fr);column-gap:10px;padding-bottom:16px;margin-bottom:16px}
.fl-rail .avt{width:34px;height:34px;font-size:14px}
.fl-name{font-size:14px}
.fl-chip.lvl,.fl-chip.seat{display:none}
.fl-dev{display:none}
/* 底色带在窄屏挤出 12px 面板留白会顶到边框，收到 8px */
.floor.is-best,.floor:target{margin:-4px -8px 12px;padding:16px 8px 16px}
.floor .post-content{font-size:14.5px}
/* 缩略图跟着收档：375 的内容列放不下 140px 方图两列还留缝。
   前缀跟桌面段保持一致（.floor），子评论里的图才跟着一起收。 */
.floor .post-content img{width:104px;height:104px;margin:0 6px 6px 0}
/* 楼中楼在窄屏再收一档：竖线左侧留白、头像、字号都压小，
   否则子评论的正文列只剩百来像素，一行放不下几个字 */
.kids-list{padding-left:10px}
.kid{grid-template-columns:24px minmax(0,1fr);column-gap:8px;padding-bottom:10px}
.kd-rail .avt{width:24px;height:24px;font-size:11px}
.kid .fl-name{font-size:13px}
.kid .kd-body{font-size:13.5px}
.kid .reply-act .ra{height:22px;padding:0 5px}
.reply-act .ra{padding:0 7px}
.fl-empty{padding:4px 0 28px}
    .thread-title{font-size:18px}
    .thread-panel > .post-content{padding:14px}
    .post-foot{gap:6px;padding:10px 12px}
    .post-foot .dotline{display:none}
    .reply-box{padding:12px 14px}
    .reply-lock{font-size:12.5px;gap:6px}

    /* ---------- 本页目录 → 右侧居中图标 + 左抽屉 ----------
     * 平板档（761~1000px）仍是吸顶横条，手机端改成抽屉：一条横排胶囊在小屏放不下几个，
     * 而且吸顶会一直占掉正文上方空间。以下规则要压过上面 @media(max-width:1000px) 的同权重规则，
     * 必须写在它后面。开合状态由 body.toc-open 驱动（thread.js）。 */
    .toc{position:fixed;left:0;top:0;bottom:0;width:min(80vw,300px);z-index:80;
        display:flex;flex-direction:column;border-radius:0;border-width:0 1px 0 0;
        transform:translateX(-100%);transition:transform .22s ease;overflow:hidden}
    body.toc-open .toc{transform:none;box-shadow:14px 0 40px rgba(16,32,48,.28)}
    body.toc-open{overflow:hidden}
    .toc-hd{flex:0 0 auto}
    .toc-close{display:inline-flex;align-items:center;justify-content:center;
        width:26px;height:26px;margin-left:6px;border:0;border-radius:6px;background:transparent;
        color:var(--text-3);font-size:16px;cursor:pointer}
    .toc-close:hover{background:var(--bg);color:var(--text-1)}
    .toc-links{flex:1 1 auto;display:block;gap:0;overflow-y:auto;max-height:none;padding:6px 0 14px}
    .toc-links a{border:0;border-radius:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
        padding:9px 16px;border-left:2px solid transparent;font-size:13.5px}
    .toc-links a.lv2{padding-left:30px;font-size:12.5px}
    .toc-links a:hover,.toc-links a.on{border:0;border-left:2px solid var(--primary);
        background:var(--primary-light);color:var(--primary)}
    /* fixed 定位：不随页面滚动移动；右侧垂直居中（top:50% + translateY 自己回中） */
    .toc-fab{display:flex;align-items:center;justify-content:center;position:fixed;
        right:14px;top:50%;transform:translateY(-50%);z-index:82;
        width:46px;height:46px;border:0;border-radius:50%;cursor:pointer;
        background:linear-gradient(120deg,var(--primary),var(--primary-dark));color:#fff;
        font-size:20px;box-shadow:0 8px 22px rgba(16,32,48,.26)}
    /* active 态必须把 translateY 一起写上，否则按下去图标会跳回原位再缩放 */
    .toc-fab:active{transform:translateY(-50%) scale(.94)}
    .toc-mask{display:block;position:fixed;inset:0;z-index:78;background:rgba(16,32,48,.42);
        opacity:0;pointer-events:none;transition:opacity .22s ease}
    body.toc-open .toc-mask{opacity:1;pointer-events:auto}
}
@media(max-width:560px){
    /* 选择器必须与上面同权重（.md-editor-field.md-front），否则窄屏规则被宽屏规则压过 */
    .md-editor-field.md-front .md-editor-textarea{min-height:280px}
    /* 代码块：窄屏收紧内边距（横向滚动已由 .post-content pre 提供，不换行不裁字） */
    .post-content pre{padding:10px 12px;font-size:12.5px}
    /* 标题阶梯手机档再收一档（19/17/16）：21px 的 h1 在 375 宽上会撞行，读起来像压着正文 */
    .post-content h1{font-size:19px;margin:20px 0 10px}
    .post-content h2{font-size:17px;margin:18px 0 9px}
    /* 级联选择器：窄屏改为「单列 + 面包屑下钻」，多列横向排布会挤出屏幕 */
    .cas-panel{left:0;right:0;width:auto;max-width:none}
    .cas-col:not(:last-child){display:none}
    .cas-col{width:100%;max-height:240px;border-right:0;padding-right:2px}
    /* 404 卡片：手机端收紧留白与字号，按钮改为等宽铺满 */
    .nf-wrap{padding:26px 12px 44px}
    .nf-card{padding:26px 18px 22px;border-radius:16px}
    .nf-code{font-size:60px;letter-spacing:2px}
    .nf-title{font-size:17px}
    .nf-act{flex-direction:column;gap:8px}
    .nf-act .btn-primary2,.nf-act .btn-ghost{width:100%;justify-content:center}
    /* 分享弹窗：手机端收紧留白，二维码卡片保持完整不裁切 */
    .sh-mask{padding:14px}
    .sh-body{padding:18px 16px 14px}
    .sh-title{font-size:15.5px}
    .sh-link{flex-wrap:wrap}
    .sh-link-t{flex:1 1 100%;order:2}
    .sh-copy{margin-left:auto}
}