/* ============================================================
 * 文件：tailwind/css/puresuck-layout.css
 * 所属层级：【主题层】（themes/tailwind）
 * 来源：栅格比例与视觉语言取自用户提供的 PureSuck 主题资源
 *       （C:\Users\YSH\Downloads\PureSuck-theme-main，Typecho 版）
 *       原版栅格：≥1183px → 299px | 1fr | 299px
 *                 ≥1400px → 315px | 1fr | 365px
 * 章节地图：
 *   ① 主题变量（亮/暗两套配色）   ② 背景图层（+②-b 内滚动架构）
 *   ③ 页面外壳（+③-b 滚动条贴边 / ③-c 页头固定）   ④ 三栏栅格
 *   ⑤ 卡片与磨砂玻璃   ⑥ 站点头部吸附   ⑦ 左栏   ⑧ 右栏小工具
 *   ⑨ 主色对齐   ⑩ 其余页面适配   ⑪ 列表页文章卡片   ⑫ 面板内边距复位
 *   ⑬ 音乐播放器（v8.9）   ⑭ 说说 / Moments（v11.0）
 *   ⑮ 文章详情页对标首页（v12.0）   ⑯ 时间线（v12.0）
 *   ⑰ 文件库（v12.0）   ⑱ 友链（v12.0）
 *   ⑲ 前台「写文章」面板（v12.0.7）
 * 说明：本文件在 style.css 之后加载，且不修改 tailwind.css（构建产物）。
 *       所有配色集中在 ① 节的 CSS 变量中，改这一处即可换主色。
 * ============================================================ */

/* ---------- ① 主题变量（亮色） ---------- */
:root {
	/* 主色沿用 PureSuck 默认粉色系 */
	--ps-accent: #ea868f;
	--ps-accent-hover: #d1606e;
	--ps-accent-soft: rgba(234, 134, 143, .16);
	/* 边框、卡片底色与阴影
	   【本轮改进】卡片底色的 alpha 改为可配置：--ps-card-opacity-light / -dark
	   由后台「栏目不透明度」两项设置注入（layout.html.php 的内联 style），
	   未设置时回退到原来的 0.74 / 0.62，外观与之前完全一致。 */
	--ps-border: rgba(15, 23, 42, .08);
	--ps-card: rgba(255, 255, 255, var(--ps-card-opacity-light, .74));
	--ps-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 30px -22px rgba(15, 23, 42, .35);
	--ps-muted: #64748b;
	--ps-radius: 18px;
}

/* ---------- 主题变量（暗色，html.dark 由主题切换按钮控制） ---------- */
html.dark {
	--ps-accent: #bf677a;
	--ps-accent-hover: #d6728a;
	--ps-accent-soft: rgba(191, 103, 122, .22);
	--ps-border: rgba(255, 255, 255, .08);
	--ps-card: rgba(17, 24, 39, var(--ps-card-opacity-dark, .62));
	--ps-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -22px rgba(0, 0, 0, .8);
	--ps-muted: #9aa5b4;
}

/* ============================================================
 * ② 背景图层
 *    页面里由 layout.html.php 输出三个固定定位的空层：
 *    .ps-bg-light / .ps-bg-dark（两张背景图，交叉淡入淡出）
 *    .ps-bg-mask（可调浓度的遮罩，保证正文可读性）
 *    具体图片地址、不透明度、模糊半径由 head 里的动态 CSS 注入。
 * ============================================================ */
.ps-bg-layer {
	position: fixed;
	inset: 0;
	z-index: -2;                 /* 位于内容之下、页面底色之上 */
	pointer-events: none;        /* 不拦截鼠标事件 */
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	transition: opacity .5s ease; /* 主题切换时平滑过渡 */
	transform: translateZ(0);     /* 触发 GPU 合成，滚动更顺滑 */
	will-change: opacity;
}

/* 遮罩层：叠在背景图之上、内容之下 */
.ps-bg-mask {
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-color: #ffffff;    /* 亮色模式：白色遮罩 */
	opacity: var(--ps-bg-mask-light, 0);
	transition: opacity .5s ease, background-color .5s ease;
}

html.dark .ps-bg-mask {
	background-color: #05070d;    /* 暗色模式：近黑遮罩 */
	opacity: var(--ps-bg-mask-dark, 0);
}

/* 昼夜互斥：亮色模式隐藏暗色层，暗色模式隐藏亮色层 */
html.light .ps-bg-dark {
	opacity: 0;
}

html.dark .ps-bg-light {
	opacity: 0;
}

/* 关闭「背景固定」后：背景层改为随页面滚动（absolute + 背景不固定） */
body.ps-bg-static {
	position: relative;
}

body.ps-bg-static .ps-bg-layer {
	position: absolute;
	background-attachment: scroll;
}

/* ============================================================
 * ②-b 「只有正文滚动」滚动架构（本轮新增）
 *      需求：向下滚动时背景图完全不动，只有正文区域滚动，页头保持固定。
 *
 *      原理：背景层 .ps-bg-layer / .ps-bg-mask 是挂在 <body> 上的
 *            position:fixed 元素。只要 <body> 本身永不滚动，它们就纹丝不动。
 *            所以把页面外壳限制为一屏高并让其内部滚动：
 *              body.ps-free-body  → 禁止 body 滚动（overflow:hidden）
 *              .ps-free-scroll    → 一屏高的内滚动容器（overflow-y:auto）
 *            滚动只发生在内层，body 不动 → 背景不动。
 *
 *      为什么要 overscroll-behavior:contain：
 *            否则内滚动容器滚到底后，继续滚动会把滚动"传递"给 body，
 *            body 一移动，fixed 定位的背景会被浏览器重新合成、出现拖影/位移。
 *            加 contain 后滚到底就停住，背景绝对不会被拖动。
 *
 *      单栏模式（后台布局选 classic）不会输出 .ps-free-body / .ps-free-scroll，
 *      两条规则不生效，页面保持原来的整页滚动。
 * ============================================================ */
body.ps-free-body {
	overflow: hidden;
	/* 内滚动容器接管滚动，body 不滚动 → 背景层（fixed）保持静止 */
}

.ps-free-scroll {
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	/* 一屏高：h-screen 已经给出高度，这里只负责把滚动收进容器内部 */
	-webkit-overflow-scrolling: touch;
}

/* 内滚动容器下的滚动条：贴着浏览器右缘，尽量弱化存在感——
   6px 细条、透明轨道、半透明滑块，鼠标悬停在滑块上才加深。 */
.ps-free-scroll {
	scrollbar-width: thin;
	scrollbar-color: rgba(100, 116, 139, .26) transparent;
}

.ps-free-scroll::-webkit-scrollbar {
	width: 6px;
}

.ps-free-scroll::-webkit-scrollbar-thumb {
	border-radius: 999px;
	background: rgba(100, 116, 139, .22);
}

.ps-free-scroll::-webkit-scrollbar-thumb:hover {
	background: rgba(100, 116, 139, .48);
}

.ps-free-scroll::-webkit-scrollbar-track {
	background: transparent;
}

/* 可增长区域：吃掉容器剩余高度，并把自然高度传给壳层，
   保证内容超出时内滚动容器产生正确长度的滚动条。 */
.ps-scroll-body {
	flex: 1 0 auto;
}

/* 内滚动架构下页脚改为「接在正文后面」而不是贴底，
   否则页脚会一直占住一屏底部、把正文的可视高度压掉一截。 */
.ps-free-scroll .ps-scroll-footer {
	flex: 0 0 auto;
}

/* 内滚动架构下页头保持固定：基础样式 header.ps-site-header 本就是
   position: sticky; top: 0（相对最近的滚动容器生效），在 .ps-free-scroll
   内部同样适用——页头钉在壳层可视区顶部，只有正文与页脚滚走。
   这里仅保留 flex 声明，防止页头在纵向 flex 中被压缩。 */
.ps-free-scroll header.ps-site-header {
	flex: 0 0 auto;
}

/* 侧栏吸附沿用基础规则的 88px：页头仍固定在滚动区顶部（约 64px 高 +
   12px 外边距），侧栏需要留在它下方，24px 会被页头盖住。 */

/* 返回顶部按钮：内滚动架构下它改挂到滚动容器内部，
   position:fixed 仍相对视口定位，视觉位置不变。 */
.ps-free-scroll .ps-scroll-top {
	position: fixed;
}

/* 窄屏（<1183px）时三栏退化为纵向流，内滚动容器同样生效，
   背景依旧固定不动。此断点下侧栏不再吸附。 */
@media (max-width: 1182px) {
	.ps-free-scroll .ps-col-left .ps-sticky,
	.ps-free-scroll .ps-col-right .ps-sticky {
		position: static;
		max-height: none;
		overflow: visible;
	}
}

/* ============================================================
 * ③ 页面外壳：三栏模式需要更宽的容器
 *    .ps-shell 加在 layout 的 <section> 上；
 *    .ps-shell-wide 仅在首页/列表页输出（见 layout.html.php）。
 *    【本轮调整】max-width 由 1360px 再放宽到 1520px，中栏继续加宽：
 *    两侧栏宽度始终不变（299/315/365），只有中栏吸收多出来的宽度。
 *      ≥1400px 视口：中栏 632px → 792px（+25%）
 *      1183~1399px 视口：中栏随视口线性变化，最宽 714px → 774px
 * ============================================================ */
.ps-shell-wide {
	max-width: 1520px;
	padding-left: 24px;
	padding-right: 24px;
}

/* ============================================================
 * ③-b 滚动条贴边（【v8.4 修改】用户反馈：滚动条未靠在浏览器右边缘）
 *      原因：内滚动容器 .ps-free-scroll 位于限宽居中的 <section class="… ps-shell ps-shell-wide">
 *      内部，滚动条只能贴在「内容容器」右缘（视口 ≥1520px 时距窗口右缘 51px）。
 *
 *      修法（纯 CSS，不改 DOM 结构）：
 *        ① 三栏模式下把外壳 section 撑满整窗（取消限宽与左右 padding），
 *           滚动容器随之占满视口宽度 → 滚动条贴到浏览器窗口右缘；
 *        ② 原本由 section 承担的「限宽 + 居中 + 24px 留白」职责，
 *           下沉到滚动容器的三个直接子元素（页头 / 主内容 / 页脚）：
 *           页头与页脚限宽 1472px（=1520 - 48，与原页头卡片同宽，仍与中栏面板对齐），
 *           主内容限宽 1520px 并自带 24px 内边距（面板宽度与原来一致）。
 *      视觉上所有元素位置与改前完全相同，只有滚动条挪到了窗口边缘。
 *      单栏模式（classic / three-cols-list 的文章页）不输出 ps-free-body，
 *      以下规则全部不生效，仍是原版整页滚动（滚动条本来就在窗口边缘）。
 * ============================================================ */
body.ps-free-body > section.ps-shell {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

body.ps-free-body .ps-free-scroll > header.ps-site-header {
	width: 100%;
	max-width: 1472px;      /* 原页头盒宽 = 1520 外壳 - 48 左右 padding */
	margin-left: auto;
	margin-right: auto;
}

/* ============================================================
 * ③-c 页头「完全固定」不再跳动（【v8.5 修改】用户反馈：滑动滚轮时顶栏会跳动）
 *      原因：页头用的是 position:sticky + margin-top:12px。
 *        ① sticky 元素在滚动区顶部有 12px 外边距，滚到吸附点前它随内容一起上移，
 *           到吸附点后再停住 —— 视觉上就是"先动一下、再吸住"，即用户看到的跳动；
 *        ② 页头（带 backdrop-filter 磨砂）在 sticky 滚动中每帧都要重新做背景模糊合成，
 *           在部分显卡/缩略图页面上会掉帧，表现为轻微抖动；
 *        ③ 命中 html.ps-scrolled 时投影会突变（0 → 26px），滚动到阈值处会有一次跳动。
 *
 *      修法（仅作用于三栏内滚动模式，纯 CSS，不动 DOM 结构）：
 *        ① 滚动容器改为纵向 flex 布局，页头固定高度、主内容自己滚动：
 *             .ps-free-scroll { overflow:hidden; display:flex; flex-direction:column; }
 *             header           { flex:0 0 auto; position:relative; top:auto }  ← 不再 sticky/不再位移
 *             main.ps-scroll-body { flex:1 1 auto; overflow-y:auto }           ← 滚动条仍贴窗口右缘
 *          页头完全脱离滚动流，任何滚动量下都不会位移 → 彻底不跳。
 *        ② 滚动条：原来由 .ps-free-scroll 承担，现在交给 main，把弱化样式一并转移过去，
 *           并给 .ps-free-scroll 加 scrollbar-gutter:stable 之外的兜底（main 占满宽度）。
 *        ③ 投影过渡改为平滑渐变，避免阈值处突变造成的跳动。
 *      注意：页头吸附时原本盖住滚动内容的效果由 z-index 维持；main 内的侧栏
 *      .ps-sticky 仍相对 main 生效（吸附位置由 88px 调整为 12px，见下方）。
 * ============================================================ */
body.ps-free-body .ps-free-scroll {
	overflow: hidden;                 /* 容器自身不再滚动 */
	display: flex;
	flex-direction: column;
}

body.ps-free-body .ps-free-scroll > header.ps-site-header {
	position: relative;               /* 取消 sticky：页头不再进入滚动流 */
	top: auto;
	flex: 0 0 auto;
	transition: box-shadow .25s ease; /* 投影变化改为平滑过渡，避免阈值处跳动 */
}

body.ps-free-body .ps-free-scroll > main.ps-scroll-body {
	flex: 1 1 auto;
	min-height: 0;                    /* flex 子项默认 min-height:auto，会被内容撑破导致滚动条失效 */
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	/* 滚动条弱化：与原 .ps-free-scroll 规则一致（细条 + 透明轨道 + 半透明滑块） */
	scrollbar-width: thin;
	scrollbar-color: rgba(100, 116, 139, .26) transparent;
}

/* 页头已固定在 main 之外，侧栏吸附基准从 88px（给吸附页头让位）降回 12px */
body.ps-free-body .ps-free-scroll > main.ps-scroll-body .ps-col-left .ps-sticky,
body.ps-free-body .ps-free-scroll > main.ps-scroll-body .ps-col-right .ps-sticky {
	top: 12px;
}

body.ps-free-body .ps-free-scroll > main.ps-scroll-body::-webkit-scrollbar {
	width: 6px;
}

body.ps-free-body .ps-free-scroll > main.ps-scroll-body::-webkit-scrollbar-thumb {
	border-radius: 999px;
	background: rgba(100, 116, 139, .22);
}

body.ps-free-body .ps-free-scroll > main.ps-scroll-body::-webkit-scrollbar-thumb:hover {
	background: rgba(100, 116, 139, .48);
}

body.ps-free-body .ps-free-scroll > main.ps-scroll-body::-webkit-scrollbar-track {
	background: transparent;
}

/* 【v8.5 修正】滚动条从 .ps-free-scroll 转移到 main 后，main 必须自己撑满视口宽度，
   否则滚动条会被"限宽"拉回内容右缘（v8.4 的贴边效果丢失）。
   做法：main 占满整宽（滚动条贴窗口右缘），限宽 + 24px 留白下沉到它内部的
   .ps-layout 容器上 —— 页头/页脚维持 1472px，视觉与 v8.4 完全一致。

   【v8.6 修正】限宽选择器由直接子代（main > .ps-layout）改为后代选择器（main .ps-layout）。
   原因：首页/作者页走 layout.html.php 的 is_index()/profile 分支时，content() 外面还包着
   一层 <div class="divide-y …">，.ps-layout 是 main 的"孙子"，直接子代选择器不命中，
   导致 .ps-layout 失去 1520px 限宽、三栏栅格撑满整个视口（部署站首页过宽的根因）。
   content() 每页只输出一个 .ps-layout（无嵌套），后代选择器对
   静态首页（直接子代）与文章列表（隔 divide-y 一层）两种结构都能命中。 */
body.ps-free-body .ps-free-scroll > main.ps-scroll-body {
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}

body.ps-free-body .ps-free-scroll > main.ps-scroll-body .ps-layout {
	width: 100%;
	max-width: 1520px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

body.ps-free-body .ps-free-scroll > footer.ps-scroll-footer {
	width: 100%;
	max-width: 1472px;
	margin-left: auto;
	margin-right: auto;
}

/* ============================================================
 * ④ 三栏栅格（沿用 PureSuck 断点与列宽）
 *    栅格只在 .ps-layout.ps-three 上生效 —— 后台把「主页布局」切回
 *    classic 时，模板不会输出该 class，页面即恢复原版单栏。
 *    窄屏（<1183px）退化为单栏：左栏 → 正文 → 右栏 依次纵向排列。
 * ============================================================ */
.ps-layout {
	display: block;
}

/* 【v8.7 新增】三栏统一顶部留白：让中栏与左右栏距页头一样远
   —— 问题：左右栏卡片因为 .ps-sticky { top: 12px } 的吸附基准，天然落在
      页头下方 12px；而中栏 .ps-panel 是栅格的第一个子元素，紧贴布局顶边（0px），
      于是中栏（含文章页的面板）看起来"顶到页头"、和左右栏不齐。
   —— 修法：给栅格整体加 12px 上内边距。三栏的可视顶边因此统一为"布局顶边 + 12px"：
        · 中栏 .ps-panel          → 95px
        · 左右栏 .ps-sticky 自然位 → 95px（= 吸附阈值，静止/滚动位置一致，不产生跳动）
   —— 覆盖面：所有使用 .ps-layout.ps-three 的页面（首页、文章页、静态页、标签/分类/
      归档/搜索/404，以及后续新增的同类页面）自动生效，无需逐页调整。
   —— 注：只在三栏模式下加；classic 单栏模式由内容自身 pt-6 留白，维持原样。 */
.ps-layout.ps-three {
	padding-top: 12px;
}

.ps-col {
	min-width: 0;                /* 防止 grid 子项被内容撑破 */
}

@media (min-width: 1183px) {
	.ps-layout.ps-three {
		display: grid;
		grid-template-columns: 299px minmax(0, 1fr) 299px;
		/* 【本轮调整】start → stretch：列盒子高度等于整行高度，
		   侧栏内的 .ps-sticky 才有吸附行程（否则侧栏随页面一起滚走，
		   右栏的搜索栏无法固定）。卡片自身高度不受影响。 */
		align-items: stretch;
	}

	/* 只保留两栏时的栅格回退 */
	.ps-layout.ps-three.ps-no-left {
		grid-template-columns: minmax(0, 1fr) 299px;
	}

	.ps-layout.ps-three.ps-no-right {
		grid-template-columns: 299px minmax(0, 1fr);
	}

	.ps-layout.ps-three.ps-no-left.ps-no-right {
		grid-template-columns: minmax(0, 1fr);
	}

	.ps-col-left {
		padding-right: 30px;
	}

	.ps-col-right {
		padding-left: 26px;
	}

	/* 侧栏吸附：页面滚动时侧栏（含右栏搜索栏）一像素不动。
	   【v9.0 重做】（用户反馈：左栏"变成滑动了"）
	   旧版两个病灶：
	   ① overflow-y:auto 内部滚动 —— 侧栏内容超过限高时，滚轮悬停在侧栏上
	      滚的是侧栏自己，观感就是"栏在动"；
	   ② 限高 calc(100vh - 104px) 过松 —— 侧栏盒高（被限高后的）可能反过来
	      成为栅格行高的决定者，吸附行程归零，整栏跟着页面一起滑。
	   【v9.3 再修限高】（用户反馈：更换背景图之后左栏又会滑动）
	   v9.0 把限高改成写死的 calc(100vh - 260px)，其中 260px 是按
	   "无背景图时的页头 77px + 页脚 156px" 估算的。开启背景图后页头/页脚
	   升级成磨砂卡片（页头 71px + 上边距 12px，页脚约 214px），主区可视
	   高度被压到约 563px，侧栏盒 600px 反而比可视区还高 —— 吸附行程
	   （中栏高 - 侧栏盒高）覆盖不住滚动距离，滚过行程后整栏随页面上移。
	   滑动量有精确公式（页脚在 main 之外时）：
	     滑动 = 侧栏盒高 + 12px 吸附基准 - 主区可视高度
	   【v9.2.1 修法】不再估算铬高：layout.html.php 的内联脚本实测主区
	   （main.ps-scroll-body）可视高度，减去 24px 余量后写入 CSS 变量
	   --ps-side-h；限高直接引用变量。无论有无背景图、页头页脚多高、
	   窗口多矮，侧栏盒恒不超过可视区 → 吸附行程永远覆盖全部滚动距离
	   → 一像素不滑。变量随 resize / 字体加载 / 页头页脚尺寸变化自动重算，
	   并在 0/200/600/1500/3000ms 各补算一次（资源陆续加载导致铬高变化时兜底）。
	   JS 被禁用时回退 calc(100vh - 360px)（保守值，宁小勿大，只多裁不滑；
	   线上实测页头 83 + 页脚 214 = 297px 铬高，留足余量）。
	   overflow:hidden 维持 v9.0 的决定：不做内部滚动，超出限高的内容裁掉
	   不画（左栏菜单与顶栏导航本就重复；矮窗口想看全右栏可后台关掉
	   部分小工具，或把播放器切「精简模式」）。 */
	.ps-col-left .ps-sticky,
	.ps-col-right .ps-sticky {
		position: sticky;
		top: 88px;
		max-height: var(--ps-side-h, calc(100vh - 360px));
		overflow: hidden;
	}
}

@media (min-width: 1400px) {
	.ps-layout.ps-three {
		grid-template-columns: 315px minmax(0, 1fr) 365px;
	}

	.ps-layout.ps-three.ps-no-left {
		grid-template-columns: minmax(0, 1fr) 365px;
	}

	.ps-layout.ps-three.ps-no-right {
		grid-template-columns: 315px minmax(0, 1fr);
	}
}

/* 窄屏下左栏与右栏之间的间距 */
@media (max-width: 1182px) {
	.ps-col-left {
		margin-bottom: 22px;
	}

	.ps-col-right {
		margin-top: 22px;
	}
}

/* ============================================================
 * ⑤ 卡片与磨砂玻璃
 * ============================================================ */
.ps-card,
.ps-panel {
	background: var(--ps-card);
	border: 1px solid var(--ps-border);
	border-radius: var(--ps-radius);
	box-shadow: var(--ps-shadow);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	backdrop-filter: blur(16px) saturate(140%);
}

/* 中栏：文章列表 + 分页所在的磨砂面板（仅三栏模式下套卡片） */
.ps-layout.ps-three .ps-panel {
	border-radius: 20px;
	padding: 6px 26px 18px;
}

/* 文章列表项在面板内的上下留白收紧一点 */
.ps-layout.ps-three .ps-panel > ul > li {
	padding-top: 28px;
	padding-bottom: 28px;
}

/* ============================================================
 * ⑥ 站点头部：滚动时吸附固定在顶部
 *    向下滚动页面时，页头（含顶部导航菜单与搜索按钮）始终吸附在窗口顶部，
 *    不再随页面上滚而消失。
 *    两个前提缺一不可：
 *      ① 外层 flex 容器由 h-screen 改为 min-h-screen（见 layout.html.php），
 *         否则 sticky 的可吸附范围只有一屏高，滚过一屏后依然会消失；
 *      ② 祖先元素不能有 overflow:hidden/auto（当前模板没有）。
 * ============================================================ */
header.ps-site-header {
	position: sticky;
	top: 0;
	z-index: 40;                 /* 高于背景层（-2/-1），低于搜索遮罩（50） */
	margin-top: 12px;
	padding: 12px 22px;
}

/* 开启了背景图：页头做成磨砂卡片，避免文字直接压在图片上 */
body.ps-has-bg header.ps-site-header {
	background: var(--ps-card);
	border: 1px solid var(--ps-border);
	border-radius: 18px;
	box-shadow: var(--ps-shadow);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	backdrop-filter: blur(16px) saturate(140%);
}

/* 未开启背景图：用与页面底色接近的半透明背景，滚动时不与正文文字重叠 */
body:not(.ps-has-bg) header.ps-site-header {
	padding: 10px 6px;
	background: rgba(255, 255, 255, .88);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

html.dark body:not(.ps-has-bg) header.ps-site-header {
	background: rgba(3, 7, 18, .88);
}

/* 页面已滚动（html.ps-scrolled 由 layout 底部脚本切换）时加强投影，强化层级 */
html.ps-scrolled header.ps-site-header {
	box-shadow: 0 8px 26px -16px rgba(15, 23, 42, .5);
}

html.dark.ps-scrolled header.ps-site-header {
	box-shadow: 0 8px 26px -16px rgba(0, 0, 0, .8);
}

body.ps-has-bg footer > div {
	margin-bottom: 24px;
	padding: 18px 22px 14px;
	background: var(--ps-card);
	border: 1px solid var(--ps-border);
	border-radius: 18px;
	box-shadow: var(--ps-shadow);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	backdrop-filter: blur(16px) saturate(140%);
}

/* ============================================================
 * ⑦ 左栏：个人卡 + 音乐盒 + 导航
 *    （「分类」与「按月归档」已先后移入右栏，见 ⑧ 节；左栏样式集中在
 *      个人卡 .ps-profile、头像登录入口 .ps-avatar-* 与导航 .ps-nav-*）
 * ============================================================ */
.ps-profile {
	padding: 24px 18px 20px;
	margin-bottom: 18px;
	text-align: center;
}

/* 【v10.0】头像从静态图片改为「可点击入口」：
   · 未登录 → 点击进入登录页，登录成功跳回首页；
   · 已登录 → 头像换成「账号头像」（后台可配），点击进后台，
              悬停 / 键盘聚焦时浮出账号菜单（后台管理 / 退出登录）。
   全部交互用纯 CSS（:hover + :focus-within）实现，不依赖 JS。 */
.ps-avatar-wrap {
	position: relative;
	display: inline-block;
	margin: 0 auto 12px;
}

.ps-avatar-link {
	position: relative;
	display: block;
	width: 78px;
	height: 78px;
	border-radius: 50%;
	outline-offset: 4px;
	-webkit-tap-highlight-color: transparent;
}

.ps-profile .ps-avatar {
	display: block;
	width: 78px;
	height: 78px;
	margin: 0;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 4px rgba(255, 255, 255, .65), 0 6px 18px -12px rgba(15, 23, 42, .6);
	transition: transform .22s ease, box-shadow .22s ease;
}

html.dark .ps-profile .ps-avatar {
	box-shadow: 0 0 0 4px rgba(255, 255, 255, .08), 0 6px 18px -12px rgba(0, 0, 0, .9);
}

/* 悬停 / 聚焦：轻微放大并换成主色描边，同时浮出「点击登录 · 进入后台」小标签 */
.ps-avatar-link:hover .ps-avatar,
.ps-avatar-link:focus-visible .ps-avatar {
	transform: scale(1.05);
	box-shadow: 0 0 0 3px var(--ps-accent), 0 10px 22px -12px rgba(15, 23, 42, .7);
}

.ps-avatar-hint {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
	margin: 0 auto;
	width: max-content;
	max-width: 100%;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 11px;
	line-height: 1.6;
	white-space: nowrap;
	color: #fff;
	background: rgba(15, 23, 42, .66);
	opacity: 0;
	transform: translateY(4px);
	transition: opacity .2s ease, transform .2s ease;
	pointer-events: none;
}

.ps-avatar-link:hover .ps-avatar-hint,
.ps-avatar-link:focus-visible .ps-avatar-hint {
	opacity: 1;
	transform: translateY(0);
}

/* 已登录：外圈常驻主色描边 + 右下角状态点 */
.ps-avatar-wrap.is-logged .ps-avatar-link .ps-avatar {
	box-shadow: 0 0 0 3px var(--ps-accent), 0 6px 18px -12px rgba(15, 23, 42, .6);
}

.ps-avatar-dot {
	position: absolute;
	right: 2px;
	bottom: 4px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--ps-accent);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .92);
}

html.dark .ps-avatar-dot {
	box-shadow: 0 0 0 2px rgba(17, 24, 39, .92);
}

/* 账号菜单（仅登录后渲染）：默认隐藏，悬停头像或键盘聚焦时展开 */
.ps-avatar-menu {
	position: absolute;
	left: 50%;
	top: calc(100% + 10px);
	z-index: 30;
	min-width: 136px;
	padding: 8px;
	border-radius: 12px;
	border: 1px solid var(--ps-border);
	background: #fff;
	box-shadow: 0 14px 32px -18px rgba(15, 23, 42, .5);
	text-align: center;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, -6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

html.dark .ps-avatar-menu {
	background: #1b2334;
}

.ps-avatar-wrap.is-logged:hover .ps-avatar-menu,
.ps-avatar-wrap.is-logged:focus-within .ps-avatar-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.ps-avatar-menu-user {
	display: block;
	margin-bottom: 6px;
	padding: 2px 6px 6px;
	border-bottom: 1px solid var(--ps-border);
	font-size: 12px;
	color: var(--ps-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ps-avatar-menu a {
	display: block;
	padding: 7px 10px;
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.5;
	color: inherit;
	text-decoration: none;
	transition: background .18s ease, color .18s ease;
}

.ps-avatar-menu a:hover {
	background: var(--ps-accent-soft);
	color: var(--ps-accent-hover);
}

/* 退出登录：悬停时给一点警示色，避免误点 */
.ps-avatar-menu a.ps-avatar-menu-out:hover {
	background: rgba(185, 28, 28, .08);
	color: #b91c1c;
}

html.dark .ps-avatar-menu a.ps-avatar-menu-out:hover {
	background: rgba(248, 113, 113, .12);
	color: #fca5a5;
}

.ps-profile .ps-name {
	margin: 0 0 6px;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: .01em;
}

.ps-profile .ps-intro {
	margin: 0;
	font-size: 13px;
	line-height: 1.7;
	color: var(--ps-muted);
	/* 【v10.1】标语可能来自「个人信息」里的描述，长度不可控：
	   长单词/长网址强制断行，最多显示 3 行（约 45 字，与 PHP 侧截断口径一致），
	   避免把左栏用户卡顶高、挤掉下方音乐盒与菜单 */
	overflow-wrap: anywhere;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

/* 个人卡下方的社交图标 */
.ps-profile .ps-social {
	margin-top: 14px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
}

.ps-profile .ps-social a {
	color: var(--ps-muted);
	transition: color .2s ease, transform .2s ease;
}

.ps-profile .ps-social a:hover {
	color: var(--ps-accent);
	transform: translateY(-2px);
}

/* 【v8 新增】个人卡的「收藏 / 关注 / 邮件」快捷按钮：
   胶囊样式，主色浅底；悬停变主色实底。后台不填链接则整行不渲染。 */
.ps-user-links {
	margin-top: 12px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
}

.ps-user-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--ps-accent-soft);
	color: var(--ps-accent);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background .2s ease, color .2s ease, transform .2s ease;
}

.ps-user-link:hover {
	background: var(--ps-accent);
	color: #fff;
	transform: translateY(-1px);
}

/* 【v12.0.5 新增】点「邮件」按钮后弹出的提示条（显示完整邮箱 + 复制结果）。
   固定在窗口底部居中；深色底浅色字，暗色模式反过来。文字可选中复制。 */
.ps-mail-toast {
	position: fixed;
	left: 50%;
	bottom: 32px;
	z-index: 9999;
	max-width: min(92vw, 440px);
	margin: 0;
	padding: 10px 16px;
	border-radius: 12px;
	background: rgba(17, 24, 39, .94);
	color: #fff;
	font-size: 13px;
	line-height: 1.55;
	word-break: break-all;
	box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .5);
	opacity: 0;
	transform: translateX(-50%) translateY(8px);
	transition: opacity .25s ease, transform .25s ease;
	/* 地址要能用鼠标选中，所以放开文本选择 */
	-webkit-user-select: text;
	user-select: text;
}

.ps-mail-toast.is-in {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.ps-mail-toast.is-out {
	opacity: 0;
	transform: translateX(-50%) translateY(6px);
}

html.dark .ps-mail-toast {
	background: rgba(243, 244, 246, .96);
	color: #111827;
}

/* 左栏导航（menu('ps-nav-list') 输出 <ul class="ps-nav-list">） */
.ps-widget .ps-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ps-widget .ps-nav-list li {
	display: block;
	margin: 0;
	padding: 0;
	border-bottom: 0;
}

.ps-widget .ps-nav-list > li > a {
	display: block;
	padding: 9px 12px;
	border-radius: 10px;
	font-size: 14.5px;
	font-weight: 600;
	color: inherit;
	text-decoration: none;
	transition: background .2s ease, color .2s ease, padding-left .2s ease;
}

.ps-widget .ps-nav-list > li > a:hover,
.ps-widget .ps-nav-list > li.active > a {
	padding-left: 18px;
	background: var(--ps-accent-soft);
	color: var(--ps-accent);
}

/* 左栏导航里的二级菜单默认收起，悬停展开 */
.ps-widget .ps-nav-list ul {
	list-style: none;
	margin: 4px 0 6px 10px;
	padding: 0;
	display: none;
}

.ps-widget .ps-nav-list li:hover > ul {
	display: block;
}

.ps-widget .ps-nav-list ul a {
	display: block;
	padding: 6px 10px;
	font-size: 13.5px;
	border-radius: 8px;
	text-decoration: none;
	color: var(--ps-muted);
}

.ps-widget .ps-nav-list ul a:hover {
	color: var(--ps-accent);
	background: var(--ps-accent-soft);
}

/* ============================================================
 * ⑧ 侧栏小工具（右栏）：标题 + 列表 + 标签云 + 搜索 + 分类 + 归档
 * ============================================================ */
.ps-widget {
	padding: 16px 18px 14px;
	margin-bottom: 18px;
}

.ps-widget-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ps-muted);
}

/* 标题左侧的小色条（沿用 PureSuck 的标题装饰） */
.ps-widget-title:before {
	content: '';
	display: inline-block;
	width: 3px;
	height: 14px;
	border-radius: 2px;
	background: var(--ps-accent);
}

.ps-widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ps-widget li {
	padding: 7px 0;
	font-size: 14px;
	line-height: 1.55;
	border-bottom: 1px dashed var(--ps-border);
}

.ps-widget li:last-child {
	border-bottom: 0;
	padding-bottom: 2px;
}

.ps-widget a {
	color: inherit;
	text-decoration: none;
	transition: color .2s ease, padding-left .2s ease;
}

.ps-widget li > a:hover {
	padding-left: 3px;
	color: var(--ps-accent);
}

/* 标签云：tag_cloud() 输出一串 .tag-cloud-link（自带 font-size） */
.ps-tagcloud {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	line-height: 1.9;
}

.ps-tagcloud .tag-cloud-link {
	display: inline-block;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--ps-accent-soft);
	color: var(--ps-accent);
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}

.ps-tagcloud .tag-cloud-link:hover {
	background: var(--ps-accent);
	color: #fff;
}

/* 分类胶囊（category_list() 输出 ul > li > a + span(数量)） */
.ps-chips ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ps-chips li {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 4px 12px;
	font-size: 13px;
	border-radius: 999px;
	border-bottom: 0;              /* 覆盖 .ps-widget li 的虚线下边框 */
	background: var(--ps-accent-soft);
	border: 1px solid transparent;
	transition: background .2s ease, border-color .2s ease;
}

.ps-chips li:hover {
	background: var(--ps-accent);
}

.ps-chips li:hover a,
.ps-chips li:hover span {
	color: #fff;
}

.ps-chips a {
	color: inherit;
	text-decoration: none;
}

.ps-chips span {
	font-size: 12px;
	opacity: .65;
}

/* 右栏搜索框（GET ?search=，HTMLy 会重定向到 /search/关键词） */
.ps-search {
	display: flex;
	align-items: center;
	border: 1px solid var(--ps-border);
	border-radius: 12px;
	background: rgba(255, 255, 255, .5);
	padding: 2px 4px 2px 12px;
}

html.dark .ps-search {
	background: rgba(255, 255, 255, .06);
}

.ps-search input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 9px 0;
	font-size: 14px;
	color: inherit;
	outline: none;
}

.ps-search button {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: var(--ps-muted);
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}

.ps-search button:hover {
	background: var(--ps-accent-soft);
	color: var(--ps-accent);
}

/* RSS 订阅按钮 */
.ps-rss {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--ps-accent-soft);
	color: var(--ps-accent);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}

.ps-rss:hover {
	background: var(--ps-accent);
	color: #fff;
}

/* ---------- 昼夜切换按钮图标（layout.html.php 顶部导航） ----------
   图标表示「当前所处状态」：现在是白天显示太阳、现在是夜间显示月亮。
   【v12.0.17 修正】此前写反了（白天显示月亮、夜间显示太阳），容易让人以为点错了方向。
   【本轮说明】这组规则同时在 layout.html.php 的 head 内联样式里输出一份，
   并由内联样式优先生效 —— 外链 css 若被浏览器缓存成旧版本，按钮也不会因此失去尺寸而“消失”。
   此处保留同名规则作为兜底，两边保持一致。 */
.ps-theme-icon-moon,
.ps-theme-icon-sun {
	width: 24px;
	height: 24px;
	color: #111827;
}

html.dark .ps-theme-icon-moon,
html.dark .ps-theme-icon-sun {
	color: #f3f4f6;
}

/* 默认（亮色 / 白天）显示太阳，隐藏月亮 */
.ps-theme-icon-moon {
	display: none;
}

/* 夜间显示月亮，隐藏太阳 */
html.dark .ps-theme-icon-moon {
	display: block;
}

html.dark .ps-theme-icon-sun {
	display: none;
}

/* 主题切换按钮本体（尺寸/悬停底色同样以 head 内联样式为准） */
.ps-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	cursor: pointer;
	transition: background .2s ease;
}

.ps-theme-toggle:hover {
	background: var(--ps-accent-soft);
}

/* ============================================================
 * ⑨ 主色对齐：三栏区域内的强调色统一走 --ps-accent
 *    （Tailwind 构建产物里的 primary-500 是另一个粉色，此处仅在三栏内覆盖）
 * ============================================================ */
.ps-layout .text-primary-500 {
	color: var(--ps-accent);
}

.ps-layout .text-primary-500:hover {
	color: var(--ps-accent-hover);
}

/* 列表页标题在背景图上增加一点投影，保证可读性 */
body.ps-has-bg .ps-has-title {
	text-shadow: 0 1px 12px rgba(255, 255, 255, .55);
}

html.dark body.ps-has-bg .ps-has-title {
	text-shadow: 0 1px 14px rgba(0, 0, 0, .75);
}

/* ============================================================
 * ⑩ 其余页面适配（文章详情 / 静态页 / 作者页 / 404 / 搜索无结果 / 无文章）
 *    这些页面与首页共用 .ps-layout 三栏外壳，中栏统一是 .ps-panel。
 *    但它们各自原有的内层容器宽度与栅格是按「整页宽度」设计的，
 *    放进中栏后需要重新适配，否则会出现正文被挤到 1/4 宽、图片溢出等问题。
 * ============================================================ */

/* 文章页：原版在 xl 断点把「作者信息 + 正文」排成 4 列栅格，
   中栏宽度不足以并排，改为纵向单列（仅真正三栏时生效，单栏不受影响）。 */
@media (min-width: 1183px) {
	.ps-layout.ps-three .ps-post-grid {
		display: block;
	}

	.ps-layout.ps-three .ps-post-grid > dl {
		padding-top: 26px;
		padding-bottom: 2px;
	}

	/* 作者信息条在中栏里改为横向排列，避免占掉一大块高度 */
	.ps-layout.ps-three .ps-post-grid > dl > dd > ul {
		display: flex;
		justify-content: flex-start;
	}
}

/* 中栏面板内的媒体元素不溢出；长英文/链接允许换行 */
.ps-layout.ps-three .ps-panel img,
.ps-layout.ps-three .ps-panel iframe,
.ps-layout.ps-three .ps-panel video {
	max-width: 100%;
}

.ps-layout.ps-three .ps-panel a {
	word-break: break-word;
}

/* 面板首个/末个直接子元素的外边距收紧，避免上下出现双倍留白 */
.ps-layout.ps-three .ps-panel > :first-child {
	margin-top: 0;
}

.ps-layout.ps-three .ps-panel > :last-child {
	margin-bottom: 0;
}

/* 404 / 搜索无结果 / 无文章这类短内容页：给中栏一点最小高度，
   避免面板被压成一条细长的卡片 */
.ps-layout.ps-three .ps-panel-short {
	min-height: 220px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* 短内容页里的搜索框宽度跟随中栏，不再固定 max-w-lg */
.ps-layout.ps-three .ps-panel-short .max-w-lg {
	max-width: 100%;
}

/* ============================================================
 * ⑪ 列表页文章卡片（本轮新增）
 *    版面参照用户提供的 shufeicat-typecho 主题的首页卡片：
 *      有缩略图 → 大图卡：图片作卡片背景 + 自下而上深色渐变 + 浅色文字
 *      无缩略图 → 普通卡：卡片底色 + 左侧主色竖条 + 常规深色文字
 *    结构由 ps_post_card() 输出（themes/tailwind/functions.php）：
 *      article.ps-card2[.ps-card2-img|.ps-card2-plain]
 *        └ a.ps-card-link            ← 覆盖整卡的透明链接
 *        └ div.ps-card-overlay
 *            └ h2.ps-card-title
 *            └ p.ps-card-excerpt
 *            └ div.ps-card-footer
 *                └ ul.ps-card-meta（作者/日期/分类/标签）
 *                └ a.ps-card-more（阅读全文）
 * ============================================================ */

/* 卡片列表容器：卡片之间留出间距 */
.ps-card-list {
	display: flow-root;
}

/* ---------- 卡片本体 ---------- */
.ps-card2 {
	position: relative;
	margin-bottom: 22px;
	border-radius: 14px;
	overflow: hidden;
	background: var(--ps-card);
	border: 1px solid var(--ps-border);
	box-shadow: var(--ps-shadow);
	transition: transform .35s cubic-bezier(.4, 0, .2, 1),
	            box-shadow .35s cubic-bezier(.4, 0, .2, 1);
}

.ps-card2:last-child {
	margin-bottom: 0;
}

.ps-card2:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 34px -18px rgba(15, 23, 42, .55);
}

/* 有图卡片：图片来自内联 style 的 background-image（ps_post_card 输出） */
.ps-card2-img {
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	min-height: 250px;
	display: flex;
	align-items: flex-end;
}

/* 无图卡片：底色改为不透明一点的卡片色 + 左侧主色竖条 */
.ps-card2-plain {
	border-left: 4px solid var(--ps-accent-soft);
}

.ps-card2-plain:hover {
	border-left-color: var(--ps-accent);
}

/* 覆盖整张卡片的透明链接（参考主题 .post-link 的做法） */
.ps-card-link {
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: inherit;
}

/* 内容层：有图时压在渐变之上 */
.ps-card-overlay {
	position: relative;
	z-index: 4;
	width: 100%;
	padding: 26px 26px 22px;
}

.ps-card2-img .ps-card-overlay {
	/* 自下而上的渐变遮罩，保证浅色文字在任意图片上都清晰可读 */
	background: linear-gradient(to bottom,
		rgba(0, 0, 0, .06) 0%,
		rgba(0, 0, 0, .42) 46%,
		rgba(0, 0, 0, .74) 100%);
	min-height: 250px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

/* ---------- 标题 ---------- */
.ps-card-title {
	margin: 0 0 10px;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: -.01em;
}

.ps-card-title a {
	color: inherit;
	text-decoration: none;
	transition: color .25s ease;
}

.ps-card-title a:hover {
	color: var(--ps-accent);
}

/* 有图卡片：标题改浅色并加投影，压图才读得清 */
.ps-card2-img .ps-card-title {
	font-size: 23px;
}

.ps-card2-img .ps-card-title a {
	color: #fff;
	text-shadow: 0 2px 6px rgba(0, 0, 0, .45);
}

.ps-card2-img .ps-card-title a:hover {
	color: #fff;
	opacity: .88;
}

/* ---------- 摘要 ---------- */
.ps-card-excerpt {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.78;
	color: var(--ps-muted);
	/* 最多两行，超出省略（与参考主题一致） */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ps-card2-img .ps-card-excerpt {
	color: rgba(255, 255, 255, .9);
	text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

/* ---------- 底部：元信息 + 阅读全文 ---------- */
.ps-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: 14px;
	padding-top: 13px;
	border-top: 1px solid var(--ps-border);
}

.ps-card2-img .ps-card-footer {
	border-top-color: rgba(255, 255, 255, .24);
}

/* 元信息行：作者 / 日期 / 分类 / 标签 */
.ps-card-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 16px;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 12.5px;
	color: var(--ps-muted);
}

.ps-card-meta li {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}

/* 元信息里的图标与主色一致，弱化显示 */
.ps-card-meta li > svg {
	flex: 0 0 auto;
	opacity: .7;
	color: var(--ps-accent);
}

.ps-card-meta a {
	color: inherit;
	text-decoration: none;
}

.ps-card-meta a:hover {
	color: var(--ps-accent);
}

/* 浅色文字版本（有图卡片） */
.ps-card-meta-dark {
	color: rgba(255, 255, 255, .82);
}

.ps-card-meta-dark li > svg {
	color: rgba(255, 255, 255, .82);
	opacity: .9;
}

.ps-card-meta-dark a:hover {
	color: #fff;
}

/* 标签小胶囊 */
.ps-meta-tag {
	display: inline-block;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--ps-accent-soft);
	color: var(--ps-accent);
	font-size: 12px;
}

.ps-card-meta-dark .ps-meta-tag {
	background: rgba(255, 255, 255, .2);
	color: #fff;
}

/* 胶囊内是核心拼好的 <a> 锚点：继承胶囊配色，避免 hover 变主色后与浅底混在一起 */
.ps-meta-tag a {
	color: inherit;
	text-decoration: none;
}

.ps-meta-tag a:hover {
	color: inherit;
	opacity: .78;
}

/* 阅读全文按钮 */
.ps-card-more {
	position: relative;
	z-index: 5;              /* 高于整卡透明链接，可单独点击 */
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	padding: 7px 16px;
	border-radius: 999px;
	background: var(--ps-accent);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: background .25s ease, gap .25s ease, transform .25s ease;
}

.ps-card-more:hover {
	background: var(--ps-accent-hover);
	gap: 10px;
	transform: translateY(-1px);
}

/* 有图卡片：默认做成磨砂半透明，悬停再上主色 */
.ps-card2-img .ps-card-more {
	background: rgba(255, 255, 255, .18);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: #fff;
}

.ps-card2-img .ps-card-more:hover {
	background: var(--ps-accent);
}

/* 卡片内元信息与按钮的可点区域提升到透明链接之上 */
.ps-card-meta a,
.ps-card-meta .ps-meta-tag {
	position: relative;
	z-index: 5;
}

/* ---------- 移动端收敛留白与字号 ---------- */
@media (max-width: 640px) {
	.ps-card-overlay {
		padding: 20px 18px 18px;
	}

	.ps-card-title,
	.ps-card2-img .ps-card-title {
		font-size: 18px;
	}

	.ps-card-footer {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
}

/* ============================================================
 * ⑫ 中栏面板在「卡片列表」下的内边距复位
 *     卡片自带圆角与边框，面板不必再给一层左右内边距，
 *     否则卡片会显得被"夹"在中间、可用宽度变窄。
 * ============================================================ */
.ps-layout.ps-three .ps-panel > .ps-card-list {
	margin-left: -6px;
	margin-right: -6px;
}

/* ============================================================
 * ⑬ 左栏 MP3 音乐播放器（【v8.9 新增】）
 *     位置：左栏「头像卡」之下、「菜单」之上（见 functions.php 的 ps_sidebar_left()）。
 *     结构：封面 + 曲名/歌手 + 进度条 + 控制按钮 + 播放列表 + 隐藏的 <audio>。
 *     配色全部走 ① 节的 CSS 变量，因此昼夜模式、主色更换都自动跟随。
 *     进度/音量的拖动比例统一由 CSS 变量 --ps-bar 驱动
 *     （js/ps-music.js 只改这一个变量，填充与圆点都读它）。
 * ============================================================ */

/* 进度条轨道底色：亮色用浅灰、暗色用浅白，避免在磨砂卡片上看不见 */
.ps-music {
	--ps-track: rgba(15, 23, 42, .12);
	--ps-bar: 0%;
}

html.dark .ps-music {
	--ps-track: rgba(255, 255, 255, .16);
}

/* ---------- 空状态（v8.9.1）：歌单为空时显示引导文案 ---------- */
.ps-music-empty {
	padding: 10px 2px 2px;
	font-size: 12px;
	line-height: 1.7;
	color: var(--ps-muted);
}

.ps-music-empty b {
	font-weight: 600;
	color: inherit;
}

/* 播放器的 [hidden] 一律强制隐藏：
   下面给 img / ol 设了 display:block，会盖掉 hidden 属性的 UA 样式，
   这里统一兜住，保证「隐藏」这件事永远有效。 */
.ps-music [hidden],
.ps-music[hidden] {
	display: none !important;
}

.ps-music-box {
	display: block;
}

/* ---------- 头部：封面 + 文字 ---------- */
.ps-music-head {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ps-music-cover {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;          /* 圆形封面：播放时缓慢旋转，像唱片 */
	overflow: hidden;
	background: var(--ps-accent-soft);
	cursor: pointer;
	box-shadow: 0 4px 12px -8px rgba(15, 23, 42, .55);
}

.ps-music-cover-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ps-music-note {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ps-accent);
}

.ps-music-note svg {
	width: 22px;
	height: 22px;
}

.ps-music-meta {
	flex: 1 1 auto;
	min-width: 0;                /* 让下面的省略号生效 */
}

.ps-music-song {
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ps-music-artist {
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--ps-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 「精简显示模式」下才出现的展开箭头 */
.ps-music-expand {
	display: none;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--ps-muted);
	cursor: pointer;
	transition: background .18s ease, color .18s ease, transform .18s ease;
}

.ps-music-expand svg {
	width: 18px;
	height: 18px;
	display: block;
}

.ps-music-expand:hover {
	background: var(--ps-accent-soft);
	color: var(--ps-accent);
}

/* ---------- 进度条 ---------- */
.ps-music-progress {
	position: relative;
	width: 100%;
	height: 16px;
	margin-top: 10px;
	cursor: pointer;
	touch-action: none;          /* 触摸拖动时不要连带滚动页面 */
}

.ps-music-progress:before,
.ps-music-progress-fill {
	position: absolute;
	top: 50%;
	left: 0;
	height: 4px;
	margin-top: -2px;
	border-radius: 2px;
}

.ps-music-progress:before {
	content: '';
	right: 0;
	background: var(--ps-track);
}

.ps-music-progress-fill {
	width: var(--ps-bar, 0%);
	background: var(--ps-accent);
	pointer-events: none;
}

/* 拖动圆点：平时隐藏，悬停或拖动时出现 */
.ps-music-progress:after {
	content: '';
	position: absolute;
	top: 50%;
	left: var(--ps-bar, 0%);
	width: 10px;
	height: 10px;
	margin: -5px 0 0 -5px;
	border-radius: 50%;
	background: var(--ps-accent);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .28);
	opacity: 0;
	transition: opacity .15s ease;
	pointer-events: none;
}

.ps-music-progress:hover:after,
.ps-music-progress.is-dragging:after,
.ps-music-progress:focus-visible:after {
	opacity: 1;
}

.ps-music-times {
	display: flex;
	justify-content: space-between;
	margin-top: -2px;
	font-size: 10.5px;
	color: var(--ps-muted);
	font-variant-numeric: tabular-nums;
}

/* ---------- 控制按钮 ---------- */
.ps-music-ctrl {
	display: flex;
	align-items: center;
	gap: 1px;
	margin-top: 6px;
}

.ps-music-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: var(--ps-muted);
	cursor: pointer;
	transition: background .18s ease, color .18s ease, transform .18s ease;
}

.ps-music-btn svg {
	width: 17px;
	height: 17px;
	display: block;
}

.ps-music-btn:hover {
	background: var(--ps-accent-soft);
	color: var(--ps-accent);
}

.ps-music-btn:active {
	transform: scale(.94);
}

.ps-music-btn:focus-visible,
.ps-music-progress:focus-visible,
.ps-music-volbar:focus-visible {
	outline: 2px solid var(--ps-accent);
	outline-offset: 2px;
}

/* 播放/暂停是主按钮：主色实心圆 */
.ps-music-play {
	width: 34px;
	height: 34px;
	margin: 0 2px;
	border-radius: 50%;
	background: var(--ps-accent);
	color: #fff;
}

.ps-music-play:hover {
	background: var(--ps-accent-hover);
	color: #fff;
}

/* 播放/暂停图标随播放状态切换。
   注意：下面这些「默认隐藏」的规则必须写成 .ps-music .ps-music-ic-xxx（两级类名），
   因为上面的 .ps-music-btn svg 是「类 + 元素」选择器，优先级(0,1,1) 高于单个类(0,1,0)，
   只写 .ps-music-ic-xxx 会被它盖掉，导致几个图标同时显示（曾出现此问题）。 */
.ps-music .ps-music-ic-pause {
	display: none;
}

.ps-music.is-playing .ps-music-ic-play {
	display: none;
}

.ps-music.is-playing .ps-music-ic-pause {
	display: block;
}

/* 播放模式图标：默认「列表循环」，按 data-mode 切换 */
.ps-music .ps-music-ic-one,
.ps-music .ps-music-ic-random {
	display: none;
}

.ps-music-loop[data-mode="one"] .ps-music-ic-loop,
.ps-music-loop[data-mode="random"] .ps-music-ic-loop {
	display: none;
}

.ps-music-loop[data-mode="one"] .ps-music-ic-one,
.ps-music-loop[data-mode="random"] .ps-music-ic-random {
	display: block;
}

/* 非列表循环模式时按钮点亮，提示当前不是默认模式 */
.ps-music-loop:not([data-mode="list"]) {
	color: var(--ps-accent);
}

/* ---------- 音量 ---------- */
.ps-music-vol {
	display: flex;
	align-items: center;
	gap: 2px;
	margin-left: auto;           /* 音量与列表按钮靠右 */
}

.ps-music-volbar {
	position: relative;
	width: 44px;
	height: 16px;
	cursor: pointer;
	touch-action: none;
}

.ps-music-volbar:before,
.ps-music-volfill {
	position: absolute;
	top: 50%;
	left: 0;
	height: 3px;
	margin-top: -1.5px;
	border-radius: 2px;
}

.ps-music-volbar:before {
	content: '';
	right: 0;
	background: var(--ps-track);
}

.ps-music-volfill {
	width: var(--ps-bar, 100%);
	background: var(--ps-accent);
	pointer-events: none;
}

/* 静音状态：隐藏音量波纹图标、显示带叉图标
   （默认隐藏同样要带 .ps-music 前缀，原因见上方播放图标的说明） */
.ps-music .ps-music-ic-mute {
	display: none;
}

.ps-music.is-muted .ps-music-ic-vol {
	display: none;
}

.ps-music.is-muted .ps-music-ic-mute {
	display: block;
}

/* ---------- 播放列表 ---------- */
.ps-music-list {
	display: block;
	max-height: 176px;
	overflow-y: auto;
	overscroll-behavior: contain;
	margin: 10px 0 0;
	padding: 6px 0 0;
	list-style: none;
	border-top: 1px dashed var(--ps-border);
	scrollbar-width: thin;
}

.ps-music-list::-webkit-scrollbar {
	width: 4px;
}

.ps-music-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 6px;
	border-radius: 8px;
	font-size: 12.5px;
	line-height: 1.5;
	cursor: pointer;
	transition: background .16s ease, color .16s ease;
}

.ps-music-item:hover {
	background: var(--ps-accent-soft);
}

.ps-music-item.is-active {
	background: var(--ps-accent-soft);
	color: var(--ps-accent);
	font-weight: 600;
}

.ps-music-item-i {
	flex: 0 0 auto;
	width: 16px;
	text-align: right;
	font-size: 10.5px;
	color: var(--ps-muted);
	font-variant-numeric: tabular-nums;
}

.ps-music-item-t {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ps-music-item-a {
	flex: 0 0 auto;
	max-width: 42%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 11px;
	color: var(--ps-muted);
}

/* 隐藏的原生 audio 元素（播放能力仍完整可用） */
.ps-music-audio {
	display: none;
}

/* ---------- 精简显示模式（后台「显示模式」选 mini 时） ---------- */
.ps-music--mini .ps-music-expand {
	display: inline-flex;
}

.ps-music--mini .ps-music-progress,
.ps-music--mini .ps-music-times,
.ps-music--mini .ps-music-ctrl,
.ps-music--mini .ps-music-list {
	display: none;
}

.ps-music--mini.ps-music--open .ps-music-progress,
.ps-music--mini.ps-music--open .ps-music-times,
.ps-music--mini.ps-music--open .ps-music-ctrl,
.ps-music--mini.ps-music--open .ps-music-list {
	display: block;
}

.ps-music--mini.ps-music--open .ps-music-ctrl {
	display: flex;
}

.ps-music--mini .ps-music-expand svg {
	transform: rotate(-90deg);
	transition: transform .18s ease;
}

.ps-music--mini.ps-music--open .ps-music-expand svg {
	transform: rotate(0deg);
}

/* ---------- 动效 ---------- */
/* 播放中封面缓慢旋转（唱片感）；尊重系统「减弱动态效果」设置 */
@keyframes ps-music-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

.ps-music.is-playing .ps-music-cover {
	animation: ps-music-spin 14s linear infinite;
}

/* 浏览器拦截自动播放时，播放键轻微脉动三下作为提示 */
@keyframes ps-music-nudge {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.12); }
}

.ps-music.is-blocked .ps-music-play {
	animation: ps-music-nudge 1.1s ease-in-out 3;
}

@media (prefers-reduced-motion: reduce) {
	.ps-music.is-playing .ps-music-cover,
	.ps-music.is-blocked .ps-music-play {
		animation: none;
	}
}

/* ============================================================
 * ⑭ 说说 / Moments（【v11.0 新增】）
 *     页面：默认 /shuoshuo，地址与名字可在后台自定义，
 *           也可以整页绑定到新建的静态页（【v11.1】）
 *     视图：themes/tailwind/shuoshuo.html.php
 *     结构：页头（名字 + 说明）→ 提示条 → 发布框（仅登录）→ 时间线 → 分页
 *     配色沿用 ① 节的 CSS 变量，昼夜模式自动跟随。
 *     配图规则与 QQ 空间一致：1 张单图、2 张两列、3 张一行三列、4 张 2×2、5~9 张三列。
 * ============================================================ */

/* ---------- 页头（说说 / 时间线 / 文件 / 友链 四页共用） ---------- */
.ps-moments-head {
	padding: 22px 2px 16px;
}

.ps-moments-title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: .5px;
	color: inherit;
}

/* 标题前的竖向渐变色条（v12.0.4 视觉优化） */
.ps-moments-title::before {
	content: "";
	flex: 0 0 auto;
	width: 5px;
	height: 24px;
	border-radius: 999px;
	background: linear-gradient(180deg, var(--ps-accent), var(--ps-accent-hover));
	box-shadow: 0 2px 10px -2px var(--ps-accent);
}

.ps-moments-sub {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin: 10px 0 0;
	font-size: 13px;
	color: var(--ps-muted);
}

.ps-moments-count {
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--ps-accent-soft);
	color: var(--ps-accent-hover);
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* 说说页绑定到静态页时，静态页里写的正文会显示在这里当页面说明
   （【v11.1】）；没绑定或静态页没写正文时整块不输出 */
.ps-moments-intro {
	margin: 12px 0 0;
	padding: 12px 16px;
	border-radius: 12px;
	border-left: 3px solid var(--ps-accent);
	background: var(--ps-accent-soft);
	font-size: 14px;
	line-height: 1.75;
}

.ps-moments-intro > :first-child {
	margin-top: 0;
}

.ps-moments-intro > :last-child {
	margin-bottom: 0;
}

/* ---------- 结果提示条 ---------- */
.ps-moment-notice {
	margin: 0 0 14px;
	padding: 9px 14px;
	border-radius: 12px;
	font-size: 13px;
	line-height: 1.6;
	animation: ps-notice-in .25s ease;
}

@keyframes ps-notice-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: none; }
}

.ps-moment-notice.is-ok {
	background: rgba(16, 185, 129, .14);
	color: #047857;
}

.ps-moment-notice.is-warn {
	background: var(--ps-accent-soft);
	color: var(--ps-accent-hover);
}

html.dark .ps-moment-notice.is-ok {
	background: rgba(16, 185, 129, .18);
	color: #6ee7b7;
}

/* ---------- 访客提示（未登录时替代发布框） ---------- */
.ps-moment-guest {
	margin-bottom: 18px;
	padding: 12px 16px;
	border: 1px dashed var(--ps-border);
	border-radius: 14px;
	font-size: 13px;
	color: var(--ps-muted);
}

.ps-moment-guest a {
	color: var(--ps-accent-hover);
	font-weight: 600;
}

/* ---------- 发布框 ---------- */
.ps-moment-form {
	position: relative;
	margin-bottom: 18px;
	padding: 14px;
	transition: border-color .2s ease;
}

.ps-moment-form.is-dragover {
	border-color: var(--ps-accent);
}

.ps-moment-compose {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.ps-moment-avatar {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--ps-accent-soft);
}

.ps-moment-compose textarea {
	flex: 1 1 auto;
	min-height: 64px;
	max-height: 340px;
	padding: 9px 12px;
	font: inherit;
	font-size: 14px;
	line-height: 1.75;
	color: inherit;
	background: transparent;
	border: 1px solid var(--ps-border);
	border-radius: 12px;
	outline: none;
	resize: vertical;
	transition: border-color .2s ease;
}

.ps-moment-compose textarea:focus {
	border-color: var(--ps-accent);
	box-shadow: 0 0 0 3px var(--ps-accent-soft);
}

.ps-moment-compose textarea::placeholder {
	color: var(--ps-muted);
}

/* 已选图片的缩略图条 */
.ps-moment-thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
	gap: 8px;
	margin-top: 10px;
}

.ps-moment-thumbs:empty {
	display: none;
}

.ps-moment-thumb {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border: 1px solid var(--ps-border);
	border-radius: 10px;
	background: var(--ps-accent-soft);
}

.ps-moment-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	cursor: zoom-in;
}

.ps-moment-thumb button {
	position: absolute;
	top: 3px;
	right: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(15, 23, 42, .62);
	color: #fff;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	transition: background .2s ease;
}

.ps-moment-thumb button:hover {
	background: rgba(190, 18, 60, .9);
}

/* 工具行：图片按钮 / 提示 / 字数 / 发表 */
.ps-moment-tools {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px dashed var(--ps-border);
}

.ps-moment-pick {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border-radius: 10px;
	font-size: 13px;
	color: var(--ps-muted);
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}

.ps-moment-pick:hover {
	background: var(--ps-accent-soft);
	color: var(--ps-accent-hover);
}

.ps-moment-pick-num,
.ps-moment-counter {
	font-variant-numeric: tabular-nums;
}

.ps-moment-tip {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 12px;
	color: var(--ps-muted);
}

.ps-moment-tip.is-warn {
	color: var(--ps-accent-hover);
}

.ps-moment-counter {
	font-size: 12px;
	color: var(--ps-muted);
}

.ps-moment-submit {
	padding: 7px 20px;
	border: 0;
	border-radius: 999px;
	background: var(--ps-accent);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background .2s ease, opacity .2s ease;
}

.ps-moment-submit:hover {
	background: var(--ps-accent-hover);
}

.ps-moment-submit[disabled] {
	opacity: .6;
	cursor: default;
}

/* ---------- 时间线 ---------- */
.ps-moment-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ps-moment-item {
	padding: 16px 16px 15px;
	border: 1px solid var(--ps-border);
	border-radius: var(--ps-radius);
	background: var(--ps-card);
	box-shadow: var(--ps-shadow);
	transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.ps-moment-item:hover {
	transform: translateY(-2px);
	border-color: var(--ps-accent);
	box-shadow: 0 12px 28px -10px rgba(15, 23, 42, .18);
}

html.dark .ps-moment-item:hover {
	box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .55);
}

.ps-moment-head {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* 卡片头像带主色环（v12.0.4），不影响发布框里的头像 */
.ps-moment-item .ps-moment-avatar {
	width: 42px;
	height: 42px;
	box-shadow: 0 0 0 2px var(--ps-card), 0 0 0 4px var(--ps-accent-soft);
}

.ps-moment-who {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ps-moment-name {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}

.ps-moment-time {
	font-size: 12px;
	line-height: 1.3;
	color: var(--ps-muted);
	font-variant-numeric: tabular-nums;
}

.ps-moment-del {
	margin-left: auto;
}

.ps-moment-del button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: var(--ps-muted);
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}

.ps-moment-del button:hover {
	background: var(--ps-accent-soft);
	color: var(--ps-accent-hover);
}

/* 正文：Markdown 渲染结果（含 .prose 排版），长单词 / 长网址强制断行 */
.ps-moment-text {
	margin-top: 10px;
	font-size: 15px;
	line-height: 1.85;
	overflow-wrap: anywhere;
}

.ps-moment-text > *:first-child {
	margin-top: 0;
}

.ps-moment-text > *:last-child {
	margin-bottom: 0;
}

.ps-moment-text img {
	max-width: 100%;
	border-radius: 12px;
}

/* ---------- 配图九宫格 ---------- */
.ps-moment-gallery {
	display: grid;
	gap: 6px;
	margin-top: 10px;
}

.ps-moment-gallery.ps-mg-col1 {
	grid-template-columns: 1fr;
	max-width: 420px;
}

.ps-moment-gallery.ps-mg-col2 {
	grid-template-columns: repeat(2, 1fr);
	max-width: 420px;
}

.ps-moment-gallery.ps-mg-col3 {
	grid-template-columns: repeat(3, 1fr);
	max-width: 528px;
}

.ps-moment-photo {
	display: block;
	overflow: hidden;
	border: 1px solid var(--ps-border);
	border-radius: 14px;
	background: var(--ps-accent-soft);
	box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
	transition: border-color .2s ease, box-shadow .2s ease;
}

.ps-moment-photo:hover {
	border-color: var(--ps-accent);
	box-shadow: 0 6px 16px -6px rgba(15, 23, 42, .22);
}

.ps-mg-col1 .ps-moment-photo {
	aspect-ratio: 4 / 3;
}

.ps-mg-col2 .ps-moment-photo,
.ps-mg-col3 .ps-moment-photo {
	aspect-ratio: 1 / 1;
}

.ps-moment-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .45s ease;
}

.ps-moment-photo:hover img {
	transform: scale(1.05);
}

/* ---------- 图片灯箱 ---------- */
.ps-lightbox {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(15, 23, 42, .88);
	cursor: zoom-out;
}

.ps-lightbox[hidden] {
	display: none !important;
}

.ps-lightbox img {
	max-width: 100%;
	max-height: 100%;
	border-radius: 12px;
	box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}

/* ---------- 分页与空状态 ---------- */
.ps-moment-pager {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 20px;
	font-size: 13px;
}

.ps-moment-pager a,
.ps-moment-pager .is-disabled {
	padding: 7px 16px;
	border-radius: 999px;
	text-decoration: none;
	transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

.ps-moment-pager a {
	background: var(--ps-accent-soft);
	color: var(--ps-accent-hover);
	font-weight: 600;
}

.ps-moment-pager a:hover {
	background: var(--ps-accent);
	color: #fff;
	box-shadow: 0 4px 12px -4px var(--ps-accent);
}

.ps-moment-pager .is-disabled {
	color: var(--ps-muted);
	opacity: .5;
}

.ps-moment-pager-num {
	font-size: 12px;
	color: var(--ps-muted);
	font-variant-numeric: tabular-nums;
}

.ps-moment-empty {
	padding: 40px 4px;
	border: 1.5px dashed var(--ps-border);
	border-radius: 14px;
	text-align: center;
	font-size: 13px;
	color: var(--ps-muted);
}

/* ---------- 窄屏适配 ---------- */
@media (max-width: 640px) {
	.ps-moment-tools {
		flex-wrap: wrap;
	}

	.ps-moment-tip {
		order: 10;
		flex: 1 0 100%;
	}

	.ps-moment-submit {
		flex: 1 1 auto;
	}

	.ps-moment-gallery.ps-mg-col2,
	.ps-moment-gallery.ps-mg-col3 {
		max-width: none;
	}

	.ps-moments-title {
		font-size: 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ps-moment-photo img {
		transition: none;
	}

	.ps-moment-photo:hover img {
		transform: none;
	}
}
/* ============================================================
 * ⑮ 文章详情页对标首页卡片格式（【v12.0 新增】）
 *    结构（post.html.php）：
 *      article.ps-post2
 *        ├ header.ps-post2-head      = ul.ps-card-meta.ps-post2-meta（首页卡片同款元信息行）+ h1.ps-post2-title
 *        ├ div.ps-post2-body         = 全宽正文（prose）
 *        └ footer.ps-post2-foot      = 标签胶囊 + 上一篇/下一篇小卡片 + 相关文章 + 评论 + 返回链接
 *    配色全部走 ① 节变量，昼夜模式自动跟随。
 * ============================================================ */

/* 头部：【v12.0.13】标题在最上面（与首页卡片读序一致，元信息行已移到正文之后），
   所以这里不再画底部那根分隔线 —— 标题与正文之间只留呼吸感。
   卡片外壳的内边距（第 ㉒ 节）已经负责顶部留白，这里只补标题自身的上下间距。 */
.ps-post2-head {
	padding: 24px 0 14px;
	border-bottom: 0;
}

/* 元信息行（现在位于正文之后）：上方一条分隔线，与首页卡片 footer 的分隔线同款 */
.ps-post2-meta-bar {
	margin-top: 8px;
	padding-top: 14px;
	border-top: 1px solid var(--ps-border);
}

.ps-post2-meta {
	margin: 0;
}

/* 元信息里的作者头像（列表卡片用图标，详情页有位置放头像） */
.ps-meta-avatar {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}

.ps-post2-title {
	margin: 0;
	font-size: 30px;
	font-weight: 800;
	line-height: 1.32;
	letter-spacing: .3px;
	color: inherit;
	overflow-wrap: anywhere;
}

.ps-post2-title a {
	color: inherit;
	text-decoration: none;
}

.ps-post2-title a:hover {
	color: var(--ps-accent);
}

.ps-post2-title svg {
	color: var(--ps-accent);
	vertical-align: -3px;
}

/* 正文区：上下留白；首图与标题之间保留呼吸感 */
.ps-post2-body {
	padding: 22px 0 6px;
}

/* ---------- 底部 ---------- */
.ps-post2-foot {
	padding: 6px 0 10px;
}

/* 标签胶囊行（【v12.0.13】标签已并入元信息行，本规则保留给旧缓存页面兜底） */
.ps-post2-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 14px 0 4px;
}

.ps-post2-tags .ps-meta-tag {
	font-size: 12.5px;
	padding: 3px 12px;
}

/* 元信息行里的标签：与首页卡片 .ps-meta-tag 完全同款，不额外放大 */
.ps-post2-meta .ps-meta-tag {
	font-size: 12px;
	padding: 1px 8px;
}

/* 上一篇 / 下一篇：首页普通卡片风格的小卡片 */
.ps-post2-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	padding: 16px 0 4px;
}

.ps-post2-navitem {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 16px;
	border-radius: 14px;
	background: var(--ps-card);
	border: 1px solid var(--ps-border);
	box-shadow: var(--ps-shadow);
	text-decoration: none;
	transition: transform .2s ease, border-color .2s ease;
}

.ps-post2-navitem:not(.is-empty):hover {
	transform: translateY(-2px);
	border-color: var(--ps-accent);
}

.ps-post2-navitem.is-next {
	text-align: right;
	align-items: flex-end;
}

.ps-post2-navlabel {
	font-size: 12px;
	color: var(--ps-muted);
}

.ps-post2-navtitle {
	font-size: 14px;
	font-weight: 600;
	color: inherit;
	overflow-wrap: anywhere;
}

.ps-post2-navitem:not(.is-empty):hover .ps-post2-navtitle {
	color: var(--ps-accent);
}

/* 小标题（相关文章等） */
.ps-post2-subtitle {
	margin: 0 0 10px;
	font-size: 16px;
	font-weight: 700;
	color: inherit;
}

/* 相关文章 / 评论区与相邻区块之间拉开距离 */
.ps-post2-related {
	padding: 18px 0 4px;
}

.ps-post2-comments {
	padding: 18px 0 6px;
}

/* 返回链接 */
.ps-post2-back {
	padding: 14px 0 8px;
	font-size: 14px;
}

.ps-post2-back a {
	color: var(--ps-accent);
	text-decoration: none;
}

.ps-post2-back a:hover {
	color: var(--ps-accent-hover);
}

/* ---------- 移动端 ---------- */
@media (max-width: 640px) {
	.ps-post2-title {
		font-size: 24px;
	}

	.ps-post2-nav {
		grid-template-columns: 1fr;
	}

	.ps-post2-navitem.is-next {
		text-align: left;
		align-items: flex-start;
	}
}

/* ============================================================
 * ⑯ 时间线（【v12.0 新增】文章 + 说说 合并的竖向时间轴）
 *    结构（timeline.html.php）：
 *      div.ps-timeline
 *        └ div.ps-tl-item.is-post / .is-moment
 *            ├ span.ps-tl-dot          （轴线上的圆点）
 *            ├ div.ps-tl-time          （日期，压在轴线上方）
 *            └ div.ps-tl-card          （卡片：文章 / 说说两种版式）
 *    轴线画在 .ps-timeline 的 ::before 上。
 * ============================================================ */

.ps-timeline {
	position: relative;
	margin: 6px 0 0;
	padding: 4px 0 8px 22px;
}

/* 竖向轴线 */
.ps-timeline::before {
	content: "";
	position: absolute;
	left: 7px;
	top: 10px;
	bottom: 14px;
	width: 2px;
	border-radius: 2px;
	background: linear-gradient(to bottom,
		var(--ps-accent) 0%,
		var(--ps-border) 60%,
		transparent 100%);
}

.ps-tl-item {
	position: relative;
	margin: 0 0 18px;
}

/* ------------------------------------------------------------
 * 【v12.0.5 新增】条目分隔线（后台「时间线 → 条目分隔线 / 分隔线颜色」）
 *   三种样式：细实线 ps-tld-solid / 虚线 ps-tld-dashed / 波浪线 ps-tld-wavy
 *   颜色统一走 CSS 变量 --ps-tl-div：
 *     · 后台填了颜色 → 由 .ps-timeline 的行内 style 写入该变量；
 *     · 没填 → 回退 var(--ps-border)，自动跟随昼夜模式。
 *   波浪线用一条「重复的正弦波 SVG」当遮罩（mask），
 *   因此线的颜色仍然由 background-color 决定，改颜色不用重生成图片。
 * ------------------------------------------------------------ */
.ps-timeline.ps-tld-solid .ps-tl-item:not(:last-child)::after,
.ps-timeline.ps-tld-dashed .ps-tl-item:not(:last-child)::after,
.ps-timeline.ps-tld-wavy .ps-tl-item:not(:last-child)::after {
	content: "";
	display: block;
	margin: 15px 0 0;
	height: 1px;
	border-radius: 1px;
	background: var(--ps-tl-div, var(--ps-border));
	opacity: .85;
}

/* 虚线：用 repeating-linear-gradient 画，颜色可控（border 的 dashed 颜色跟随 border-color，不够灵活） */
.ps-timeline.ps-tld-dashed .ps-tl-item:not(:last-child)::after {
	background: none;
	background-image: repeating-linear-gradient(to right,
		var(--ps-tl-div, var(--ps-border)) 0 6px,
		transparent 6px 12px);
}

/* 波浪线：6px 高的重复正弦波 */
.ps-timeline.ps-tld-wavy .ps-tl-item:not(:last-child)::after {
	height: 6px;
	opacity: 1;
	background: none;
	background-color: var(--ps-tl-div, var(--ps-border));
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6' viewBox='0 0 12 6'%3E%3Cpath d='M0 3 Q3 0 6 3 T12 3' fill='none' stroke='%23fff' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
	-webkit-mask-repeat: repeat-x;
	-webkit-mask-position: 0 center;
	-webkit-mask-size: 12px 6px;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6' viewBox='0 0 12 6'%3E%3Cpath d='M0 3 Q3 0 6 3 T12 3' fill='none' stroke='%23fff' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
	mask-repeat: repeat-x;
	mask-position: 0 center;
	mask-size: 12px 6px;
}

/* 带分隔线时把条目间距收紧一点，整条时间线不会显得太散 */
.ps-timeline.ps-tld-solid .ps-tl-item,
.ps-timeline.ps-tld-dashed .ps-tl-item,
.ps-timeline.ps-tld-wavy .ps-tl-item {
	margin-bottom: 14px;
}

/* 轴上的圆点：文章用主色实心，说说用描边 */
.ps-tl-dot {
	position: absolute;
	left: -22px;
	top: 8px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--ps-accent), var(--ps-accent-hover));
	box-shadow: 0 0 0 3px var(--ps-accent-soft);
	transition: transform .2s ease, box-shadow .2s ease;
}

.ps-tl-item:hover .ps-tl-dot {
	transform: scale(1.25);
	box-shadow: 0 0 0 4px var(--ps-accent-soft);
}

.ps-tl-item.is-moment .ps-tl-dot {
	background: var(--ps-card);
	border: 2px solid var(--ps-accent);
	box-shadow: none;
	width: 11px;
	height: 11px;
}

/* 日期：压在轴线上方的胶囊（v12.0.4） */
.ps-tl-time {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 8px;
	padding: 3px 12px;
	border-radius: 999px;
	background: var(--ps-accent-soft);
	color: var(--ps-accent-hover);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .5px;
	font-variant-numeric: tabular-nums;
}

/* 卡片：磨砂玻璃，与右栏小工具一致 */
.ps-tl-card {
	position: relative;
	border-radius: 14px;
	background: var(--ps-card);
	border: 1px solid var(--ps-border);
	box-shadow: var(--ps-shadow);
	padding: 14px 16px;
	transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.ps-tl-item:hover .ps-tl-card {
	transform: translateY(-2px);
	border-color: var(--ps-accent);
	box-shadow: 0 12px 28px -10px rgba(15, 23, 42, .18);
}

html.dark .ps-tl-item:hover .ps-tl-card {
	box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .55);
}

/* 类型徽标：文章 = 主色渐变实底，说说 = 描边（v12.0.4） */
.ps-tl-badge {
	display: inline-block;
	margin: 0 0 8px;
	padding: 2px 10px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--ps-accent), var(--ps-accent-hover));
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .5px;
	box-shadow: 0 2px 8px -2px var(--ps-accent);
}

.ps-tl-item.is-moment .ps-tl-badge {
	background: transparent;
	border: 1px dashed var(--ps-border);
	color: var(--ps-muted);
	box-shadow: none;
}

/* 文章条目 */
.ps-tl-title {
	margin: 0 0 6px;
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.4;
}

.ps-tl-title a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(var(--ps-accent), var(--ps-accent));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1.5px;
	transition: background-size .25s ease, color .2s ease;
}

.ps-tl-title a:hover {
	color: var(--ps-accent);
	background-size: 100% 1.5px;
}

.ps-tl-excerpt {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.75;
	color: var(--ps-muted);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}

/* 文章缩略图（可选）：卡片右上角的小方图 */
.ps-tl-thumb {
	float: right;
	width: 74px;
	height: 74px;
	margin: 0 0 8px 12px;
	border-radius: 12px;
	background-size: cover;
	background-position: center;
	border: 1px solid var(--ps-border);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.ps-tl-thumb:hover {
	transform: scale(1.05) rotate(1deg);
	border-color: var(--ps-accent);
	box-shadow: 0 8px 18px -8px rgba(15, 23, 42, .3);
}

.ps-tl-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 10px 0 0;
	font-size: 12px;
	color: var(--ps-muted);
}

.ps-tl-meta a {
	display: inline-block;
	padding: 1px 10px;
	border-radius: 999px;
	background: var(--ps-accent-soft);
	color: var(--ps-accent-hover);
	font-weight: 600;
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}

.ps-tl-meta a:hover {
	background: var(--ps-accent);
	color: #fff;
}

/* 说说条目：徽标与头像同行（v12.0.4），比旧版独占一行更紧凑 */
.ps-tl-mhead {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
}

.ps-tl-mhead .ps-tl-badge {
	flex: 0 0 auto;
	margin: 0;
}

.ps-tl-mavatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
	box-shadow: 0 0 0 2px var(--ps-card), 0 0 0 3.5px var(--ps-accent-soft);
}

.ps-tl-mname {
	font-size: 13px;
	font-weight: 700;
	color: inherit;
}

.ps-tl-mtime {
	font-size: 12px;
	color: var(--ps-muted);
}

.ps-tl-mtext {
	font-size: 13.5px;
	line-height: 1.75;
	overflow-wrap: anywhere;
}

.ps-tl-mtext p {
	margin: 0 0 4px;
}

/* 【v12.0.5】说说条目改为纯文本摘要（不再整段渲染正文）后的收尾样式：
   .ps-tl-mtext-clip 沿用 .ps-tl-excerpt 的 3 行截断，这里只补溢出的三点省略；
   .ps-tl-more 是「查看全文 →」入口，跟随主色。 */
.ps-tl-mtext-clip {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ps-tl-more {
	color: var(--ps-accent);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.ps-tl-more:hover {
	text-decoration: underline;
}

/* 说说配图小条（最多 3 张，点击进说说页看大图） */
.ps-tl-mimgs {
	display: flex;
	gap: 6px;
	margin: 8px 0 0;
}

.ps-tl-mimg {
	width: 64px;
	height: 64px;
	border-radius: 10px;
	object-fit: cover;
	border: 1px solid var(--ps-border);
	display: block;
	transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.ps-tl-mimg:hover {
	transform: scale(1.06);
	border-color: var(--ps-accent);
	box-shadow: 0 8px 18px -8px rgba(15, 23, 42, .3);
}

/* 空状态（时间线还没有任何内容） */
.ps-tl-guest {
	padding: 40px 4px;
	border: 1.5px dashed var(--ps-border);
	border-radius: 14px;
	text-align: center;
	font-size: 13px;
	color: var(--ps-muted);
}

/* ---------- 移动端 ---------- */
@media (max-width: 640px) {
	.ps-timeline {
		padding-left: 18px;
	}

	.ps-timeline::before {
		left: 5px;
	}

	.ps-tl-dot {
		left: -18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ps-post2-navitem,
	.ps-post2-navitem:not(.is-empty):hover {
		transition: none;
		transform: none;
	}
}

/* ============================================================
 * ⑰ 文件库（【v12.0 新增】上传 / 检索 / 下载 / 删除）
 *    结构（files.html.php）：
 *      form.ps-file-form
 *        ├ div.ps-file-drop        （拖拽区 + 选择按钮）
 *        ├ div.ps-file-progress    （上传进度条）
 *        └ div.ps-file-tip         （结果提示）
 *      form.ps-file-search         （文件名检索）
 *      div.ps-file-list > div.ps-file-row（图标 + 名称/大小/时间 + 下载 + 删除）
 * ============================================================ */

/* ---------- 上传框 ---------- */
.ps-file-form {
	margin: 0 0 16px;
}

.ps-file-drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 26px 16px;
	border: 1.5px dashed var(--ps-border);
	border-radius: 14px;
	text-align: center;
	color: var(--ps-muted);
	font-size: 13px;
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease;
}

.ps-file-drop:hover,
.ps-file-drop.is-drag {
	border-color: var(--ps-accent);
	background: var(--ps-accent-soft);
	color: var(--ps-accent-hover);
}

.ps-file-drop svg {
	width: 30px;
	height: 30px;
	opacity: .8;
}

.ps-file-drop .ps-file-btn {
	display: inline-block;
	margin-top: 2px;
	padding: 5px 16px;
	border-radius: 999px;
	background: var(--ps-accent);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	pointer-events: none;
}

/* 进度条 */
.ps-file-progress {
	margin: 12px 0 0;
	height: 8px;
	border-radius: 999px;
	background: var(--ps-border);
	overflow: hidden;
}

.ps-file-bar {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: var(--ps-accent);
	transition: width .2s ease;
}

.ps-file-num {
	margin: 6px 0 0;
	font-size: 12px;
	color: var(--ps-muted);
	text-align: right;
}

/* 结果提示（成功/失败共用一条） */
.ps-file-tip {
	margin: 10px 0 0;
	font-size: 13px;
	color: var(--ps-muted);
	min-height: 1em;
}

.ps-file-tip.is-ok {
	color: #16a34a;
}

.ps-file-tip.is-err {
	color: #dc2626;
}

/* ---------- 检索框 ---------- */
.ps-file-search {
	display: flex;
	gap: 8px;
	margin: 0 0 14px;
}

.ps-file-search input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 9px 14px 9px 40px;
	border-radius: 999px;
	border: 1px solid var(--ps-border);
	background-color: var(--ps-card);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 14px center;
	background-size: 16px 16px;
	color: inherit;
	font-size: 13.5px;
	outline: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.ps-file-search input:focus {
	border-color: var(--ps-accent);
	box-shadow: 0 0 0 3px var(--ps-accent-soft);
}

.ps-file-search button {
	flex: 0 0 auto;
	padding: 9px 20px;
	border: 0;
	border-radius: 999px;
	background: var(--ps-accent);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background .2s ease, box-shadow .2s ease;
}

.ps-file-search button:hover {
	background: var(--ps-accent-hover);
	box-shadow: 0 4px 12px -4px var(--ps-accent);
}

/* ---------- 文件列表 ---------- */
.ps-file-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ps-file-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-radius: 14px;
	background: var(--ps-card);
	border: 1px solid var(--ps-border);
	box-shadow: var(--ps-shadow);
	transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.ps-file-row:hover {
	transform: translateX(3px);
	border-color: var(--ps-accent);
	box-shadow: 0 8px 22px -10px rgba(15, 23, 42, .2);
}

html.dark .ps-file-row:hover {
	box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .55);
}

/* 类型图标：按扩展名着色的渐变小方块（v12.0.4） */
.ps-file-ico {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(135deg, #94a3b8, #64748b);
	letter-spacing: .3px;
	overflow: hidden;
	box-shadow: 0 3px 8px -2px rgba(15, 23, 42, .25), inset 0 1px 0 rgba(255, 255, 255, .25);
}

.ps-file-ico.is-img  { background: linear-gradient(135deg, #38bdf8, #0284c7); }
.ps-file-ico.is-audio{ background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.ps-file-ico.is-video{ background: linear-gradient(135deg, #fb7185, #e11d48); }
.ps-file-ico.is-doc  { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.ps-file-ico.is-zip  { background: linear-gradient(135deg, #fbbf24, #d97706); }
.ps-file-ico.is-txt  { background: linear-gradient(135deg, #34d399, #059669); }

.ps-file-ico img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ps-file-info {
	flex: 1 1 auto;
	min-width: 0;
}

.ps-file-name {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: inherit;
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: color .2s ease;
}

.ps-file-name:hover {
	color: var(--ps-accent);
}

.ps-file-sub {
	display: block;
	margin: 3px 0 0;
	font-size: 12px;
	color: var(--ps-muted);
	font-variant-numeric: tabular-nums;
}

/* 下载按钮：描边胶囊，hover 填充（v12.0.4） */
.ps-file-dl {
	flex: 0 0 auto;
	padding: 6px 16px;
	border: 1px solid var(--ps-accent);
	border-radius: 999px;
	background: transparent;
	color: var(--ps-accent-hover);
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
	transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

.ps-file-dl:hover {
	background: var(--ps-accent);
	color: #fff;
	box-shadow: 0 4px 12px -4px var(--ps-accent);
}

/* 删除按钮（仅管理员可见） */
.ps-file-del {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--ps-muted);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s ease, color .2s ease, transform .2s ease;
}

.ps-file-del:hover {
	background: rgba(220, 38, 38, .12);
	color: #dc2626;
	transform: scale(1.08);
}

/* 空状态 */
.ps-file-empty {
	padding: 40px 10px;
	border: 1.5px dashed var(--ps-border);
	border-radius: 14px;
	text-align: center;
	font-size: 13.5px;
	color: var(--ps-muted);
}

/* ---------- 移动端 ---------- */
@media (max-width: 640px) {
	.ps-file-row {
		flex-wrap: wrap;
	}

	.ps-file-info {
		flex: 1 0 calc(100% - 110px);
	}
}

/* ============================================================
 * ⑱ 友链（【v12.0.14 重做】横向卡片：左方形图标 + 右名称/小字信息）
 *    需求来源：用户给的参考图 —— 每格一条友链，左侧图标、右侧上为名称、
 *    下为一行灰色小字（域名 / 简介），整块浅色底 + 圆角，悬停轻微浮起。
 *
 *    结构（links.html.php）：
 *      div.ps-links-grid
 *        └ a.ps-link-card
 *            ├ span.ps-link-ava > img / span.ps-link-letter（首字母色块兜底）
 *            └ span.ps-link-body
 *                ├ span.ps-link-name
 *                └ span.ps-link-sub > .ps-link-host / .ps-link-desc
 * ============================================================ */

.ps-links-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 12px;
	padding: 4px 0 10px;
}

/* 每张卡通过 markup 注入 --lk（站点主色）与 --lk-glow（同色半透明），
   悬停时描边 / 发光用它（v12.0.4 的配色约定保留） */
.ps-link-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	min-height: 68px;
	border-radius: 14px;
	background: var(--ps-card);
	border: 1px solid var(--ps-border);
	box-shadow: var(--ps-shadow);
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

/* 悬停时右上角的小箭头（保留原有「可跳转」暗示，但更轻） */
.ps-link-card::after {
	content: "↗";
	position: absolute;
	top: 8px;
	right: 10px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	color: var(--lk, var(--ps-accent));
	opacity: 0;
	transform: translate(-4px, 4px);
	transition: opacity .2s ease, transform .2s ease;
}

.ps-link-card:hover {
	transform: translateY(-3px);
	border-color: var(--lk, var(--ps-accent));
	box-shadow: 0 12px 24px -12px var(--lk-glow, rgba(15, 23, 42, .22));
}

.ps-link-card:hover::after {
	opacity: .85;
	transform: translate(0, 0);
}

/* 左侧图标：方形圆角（参考图里是方的，不是圆的） */
.ps-link-ava {
	position: relative;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--ps-accent-soft);
	box-shadow: 0 2px 8px -3px var(--lk-glow, rgba(15, 23, 42, .18));
	transition: box-shadow .22s ease;
}

.ps-link-card:hover .ps-link-ava {
	box-shadow: 0 4px 12px -3px var(--lk-glow, rgba(15, 23, 42, .3));
}

.ps-link-ava img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	padding: 4px;          /* favicon 多数带白边，留点内缩更好看 */
	background: #fff;
}

/* favicon 拉取失败时的首字母色块兜底 */
.ps-link-letter {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 19px;
	font-weight: 700;
	font-style: normal;
	color: #fff;
}

/* 右侧文字区：名称一行、信息一行，超长省略 */
.ps-link-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;          /* 关键：让子元素能正常省略，不被撑开 */
	flex: 1 1 auto;
}

.ps-link-name {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: inherit;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color .2s ease;
}

.ps-link-card:hover .ps-link-name {
	color: var(--lk, var(--ps-accent));
}

.ps-link-sub {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	font-size: 12px;
	line-height: 1.4;
	color: var(--ps-muted);
}

.ps-link-host,
.ps-link-desc {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

.ps-link-host {
	flex: 0 1 auto;
}

/* 有描述时，描述占剩余宽度；两者之间用一个小圆点分隔 */
.ps-link-desc {
	flex: 1 1 auto;
}

.ps-link-desc::before {
	content: "·";
	margin-right: 8px;
	opacity: .6;
}

/* 空状态（一条友链都没配） */
.ps-links-empty {
	padding: 40px 10px;
	border: 1.5px dashed var(--ps-border);
	border-radius: 14px;
	text-align: center;
	font-size: 13.5px;
	color: var(--ps-muted);
}

/* ---------- 移动端 ---------- */
@media (max-width: 900px) {
	.ps-links-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	.ps-link-card {
		min-height: 60px;
		padding: 10px 12px;
		gap: 10px;
	}

	.ps-link-ava {
		width: 38px;
		height: 38px;
		border-radius: 9px;
	}

	.ps-link-name {
		font-size: 14px;
	}
}

@media (max-width: 480px) {
	/* 窄屏下两列太挤，退回单列（参考图宽度足够时是 4 列，窄屏单列最易读） */
	.ps-links-grid {
		grid-template-columns: 1fr;
	}

	/* 只显示域名，描述在手机上省掉，避免一行塞满 */
	.ps-link-desc {
		display: none;
	}
}

/* ---------- 动效降级 ---------- */
@media (prefers-reduced-motion: reduce) {
	.ps-moment-item,
	.ps-tl-item:hover .ps-tl-card,
	.ps-tl-dot,
	.ps-tl-thumb,
	.ps-tl-mimg,
	.ps-file-row,
	.ps-file-del,
	.ps-link-card,
	.ps-link-card::after,
	.ps-link-ava,
	.ps-mail-toast,
	.ps-toast,
	.ps-composer-fab,
	.ps-composer-panel {
		transition: none;
	}

	.ps-moment-item:hover,
	.ps-tl-item:hover .ps-tl-card,
	.ps-file-row:hover,
	.ps-tl-thumb:hover,
	.ps-tl-mimg:hover,
	.ps-link-card:hover,
	.ps-composer-fab:hover {
		transform: none;
	}
}

/* ============================================================
 * ⑲ 前台「写文章」面板（【v12.0.7 新增】）
 *    配套：themes/tailwind/functions.php 的 ps_post_composer()
 *          themes/tailwind/js/composer.js
 *    结构：
 *      .ps-composer                容器（本身不占位，子元素全是 fixed）
 *        ├ button.ps-composer-fab  右下角浮动按钮（仅登录后输出）
 *        ├ .ps-composer-mask       遮罩（点击关闭）
 *        ├ .ps-composer-panel      发布面板（表单卡片）
 *        └ .ps-toast               发布成功提示条
 *    .ps-composer.is-open 时遮罩与面板才显示（默认 display:none，
 *    不用 hidden 属性，避免被本节的 display 规则覆盖）。
 * ============================================================ */

/* 面板打开时锁住页面滚动（三栏布局滚的是 .ps-free-scroll，要一起锁） */
html.ps-composer-open,
html.ps-composer-open .ps-free-scroll {
	overflow: hidden;
}

/* ---------- 右下角浮动按钮 ---------- */
.ps-composer-fab {
	position: fixed;
	right: 32px;
	bottom: 84px;            /* 比「返回顶部」按钮（bottom:32px）高一档，两者不打架 */
	z-index: 9980;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 18px 10px 15px;
	border: 0;
	border-radius: 999px;
	background: var(--ps-accent);
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 12px 26px -10px rgba(234, 134, 143, .75), 0 2px 6px rgba(15, 23, 42, .18);
	transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.ps-composer-fab svg {
	display: block;
	flex: 0 0 auto;
}

.ps-composer-fab:hover {
	background: var(--ps-accent-hover);
	transform: translateY(-2px);
}

.ps-composer-fab:focus-visible {
	outline: 2px solid var(--ps-accent);
	outline-offset: 3px;
}

/* ---------- 遮罩 ---------- */
.ps-composer-mask {
	position: fixed;
	inset: 0;
	z-index: 9990;
	display: none;
	background: rgba(15, 23, 42, .46);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

.ps-composer.is-open .ps-composer-mask {
	display: block;
}

/* ---------- 面板本体 ---------- */
.ps-composer-panel {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 9991;
	display: none;
	width: min(92vw, 720px);
	max-height: 88vh;
	overflow: auto;
	border: 1px solid var(--ps-border);
	border-radius: var(--ps-radius);
	background: rgba(255, 255, 255, .97);
	color: #111827;
	box-shadow: 0 30px 70px -24px rgba(15, 23, 42, .55);
}

.ps-composer.is-open .ps-composer-panel {
	display: block;
}

html.dark .ps-composer-panel {
	background: rgba(17, 24, 39, .97);
	color: #f3f4f6;
	box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .85);
}

/* ---------- 面板头部 ---------- */
.ps-composer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 15px 20px;
	border-bottom: 1px solid var(--ps-border);
}

.ps-composer-head h3 {
	margin: 0;
	padding: 0;
	font-size: 15.5px;
	font-weight: 700;
}

.ps-composer-close {
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: var(--ps-muted);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background .18s ease, color .18s ease;
}

.ps-composer-close:hover {
	background: var(--ps-accent-soft);
	color: var(--ps-accent);
}

/* ---------- 表单区 ---------- */
.ps-composer-body {
	padding: 16px 20px 4px;
}

.ps-composer-label {
	display: block;
	margin: 0 0 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ps-muted);
}

.ps-req {
	color: #e11d48;
}

.ps-composer-input {
	display: block;
	width: 100%;
	margin: 0 0 14px;
	padding: 9px 12px;
	border: 1px solid var(--ps-border);
	border-radius: 11px;
	background: rgba(255, 255, 255, .75);
	color: inherit;
	font-size: 14px;
	line-height: 1.55;
	transition: border-color .18s ease, box-shadow .18s ease;
}

html.dark .ps-composer-input {
	background: rgba(15, 23, 42, .55);
	border-color: rgba(255, 255, 255, .1);
}

.ps-composer-input:focus {
	outline: 0;
	border-color: var(--ps-accent);
	box-shadow: 0 0 0 3px var(--ps-accent-soft);
}

.ps-composer-textarea {
	min-height: 210px;
	resize: vertical;
	font-family: inherit;
}

.ps-composer-textarea.is-dragover {
	border-color: var(--ps-accent);
	box-shadow: 0 0 0 3px var(--ps-accent-soft);
}

/* 分类 + 标签并排 */
.ps-composer-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px 14px;
}

/* ---------- 上传缩略图条 ---------- */
.ps-composer-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ps-composer-thumbs:empty {
	display: none;
	margin: 0;
}

.ps-composer-thumb {
	width: 66px;
	height: 66px;
	object-fit: cover;
	border: 1px solid var(--ps-border);
	border-radius: 11px;
	cursor: pointer;
}

/* ---------- 面板底部工具行 ---------- */
.ps-composer-foot {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 20px 16px;
	border-top: 1px solid var(--ps-border);
}

.ps-composer-pick {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	border: 1px dashed var(--ps-border);
	border-radius: 11px;
	color: var(--ps-muted);
	font-size: 12.5px;
	cursor: pointer;
	transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.ps-composer-pick:hover {
	border-color: var(--ps-accent);
	color: var(--ps-accent);
	background: var(--ps-accent-soft);
}

.ps-composer-tip {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ps-muted);
	word-break: break-all;
}

.ps-composer-tip.is-warn {
	color: #e11d48;
}

html.dark .ps-composer-tip.is-warn {
	color: #fb7185;
}

.ps-composer-submit {
	flex: 0 0 auto;
	padding: 9px 24px;
	border: 0;
	border-radius: 11px;
	background: var(--ps-accent);
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background .18s ease;
}

.ps-composer-submit:hover {
	background: var(--ps-accent-hover);
}

.ps-composer-submit:disabled {
	opacity: .6;
	cursor: default;
}

/* ---------- 发布成功提示条（沿用邮件提示条的观感） ---------- */
.ps-toast {
	position: fixed;
	left: 50%;
	bottom: 32px;
	z-index: 9999;
	max-width: min(92vw, 440px);
	padding: 10px 16px;
	border-radius: 12px;
	background: rgba(17, 24, 39, .94);
	color: #fff;
	font-size: 13px;
	line-height: 1.55;
	box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .5);
	opacity: 0;
	pointer-events: none;
	transform: translateX(-50%) translateY(8px);
	transition: opacity .25s ease, transform .25s ease;
}

.ps-toast.is-show {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.ps-toast.is-warn {
	background: rgba(190, 18, 60, .95);
}

html.dark .ps-toast {
	background: rgba(243, 244, 246, .96);
	color: #111827;
}

html.dark .ps-toast.is-warn {
	background: rgba(159, 18, 57, .96);
	color: #fff;
}

/* ---------- 窄屏：面板贴底铺满 ---------- */
@media (max-width: 640px) {
	.ps-composer-fab {
		right: 16px;
		bottom: 76px;
		padding: 10px 14px;
	}

	.ps-composer-panel {
		width: 100vw;
		max-height: 92vh;
		top: auto;
		bottom: 0;
		transform: translate(-50%, 0);
		border-radius: var(--ps-radius) var(--ps-radius) 0 0;
	}

	.ps-composer-row {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
 * ⑳ 静态页标题区「编辑」入口（【v12.0.10 新增】）
 *
 * 背景：静态页（碎碎念 / 文章 / 时间线 等）在登录且获授权时，
 *   模板会在大标题后追加一个没有任何 class 的裸 <span><a>编辑</a></span>。
 *   它落在 space-y-2 容器里会独占一行、以正文字号出现在 md:text-6xl
 *   的大标题正下方，把标题区撑开 —— 这正是「登录后中栏排版与未登录不一致」
 *   的根因（首页 / 时间线 / 友链页没有这个裸节点，所以那几页两态一致）。
 *
 * 修法：给入口主题化样式，并绝对定位到标题区右上角，脱离文档流。
 *   登录 / 未登录两态的中栏布局完全一致，编辑功能不丢。
 * ============================================================ */
.ps-page-head {
	position: relative;
}

.ps-page-edit {
	position: absolute;
	top: 4px;
	right: 0;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 12px;
	border: 1px solid var(--ps-border);
	border-radius: 999px;
	background: rgba(127, 127, 127, .08);
	color: var(--ps-muted);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
	opacity: .8;
	transition: opacity .15s ease, color .15s ease, border-color .15s ease;
}

.ps-page-edit:hover {
	opacity: 1;
	color: var(--ps-accent);
	border-color: var(--ps-accent);
}

.ps-page-edit:focus-visible {
	outline: 2px solid var(--ps-accent);
	outline-offset: 2px;
}

/* 窄屏：入口收小并贴紧右上角，尽量不压到长标题 */
@media (max-width: 640px) {
	.ps-page-edit {
		top: 2px;
		padding: 3px 9px;
		font-size: 12px;
	}
}

/* ============================================================
 * ㉑ 文件库「上传」悬浮按钮与浮层面板（【v12.0.11 新增】）
 *
 * 背景：文件页的上传框只有登录后才输出，原本是块级卡片占着中栏顶部，
 *   导致「未登录 / 已登录」两态版面对不齐（用户反馈的差异点）。
 * v12.0.11 起改成与前台「写文章」面板（⑲ 节）同一套形态：
 *   · 右下角悬浮按钮（position: fixed）→ 完全脱离文档流，不占任何高度；
 *   · 点开后是居中浮层面板（遮罩 + 面板），关闭即恢复。
 * 于是两态的版面完全一致，上传入口对登录用户依旧一键可达。
 * 按钮纵向排布：返回顶部 bottom:32px → 写文章 bottom:84px → 上传 bottom:136px。
 * ============================================================ */

/* 外壳本身不产生任何盒子：内部三个子元素（按钮 / 遮罩 / 面板）全部 position:fixed，
 * display:contents 让这个容器连「空块级元素」都不生成 —— 对文档流的高度贡献恒为 0。
 * 这是「登录 / 未登录两态版面完全一致」的关键保证。 */
.ps-fileup {
	display: contents;
}

/* 面板打开时锁住背景滚动（与写文章面板同一套做法） */
html.ps-fileup-open,
html.ps-fileup-open .ps-free-scroll {
	overflow: hidden;
}

/* ---------- 右下角浮动按钮 ---------- */
.ps-fileup-fab {
	position: fixed;
	right: 32px;
	bottom: 136px;
	z-index: 9980;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 18px 10px 15px;
	border: 0;
	border-radius: 999px;
	background: var(--ps-accent);
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 12px 26px -10px rgba(234, 134, 143, .75), 0 2px 6px rgba(15, 23, 42, .18);
	transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.ps-fileup-fab svg {
	display: block;
	flex: 0 0 auto;
}

.ps-fileup-fab:hover {
	background: var(--ps-accent-hover);
	transform: translateY(-2px);
}

.ps-fileup-fab:focus-visible {
	outline: 2px solid var(--ps-accent);
	outline-offset: 3px;
}

/* ---------- 遮罩 ---------- */
.ps-fileup-mask {
	position: fixed;
	inset: 0;
	z-index: 9990;
	display: none;
	background: rgba(15, 23, 42, .46);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

.ps-fileup.is-open .ps-fileup-mask {
	display: block;
}

/* ---------- 面板本体 ---------- */
.ps-fileup-panel {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 9991;
	display: none;
	width: min(92vw, 560px);
	max-height: 88vh;
	overflow: auto;
	border: 1px solid var(--ps-border);
	border-radius: var(--ps-radius);
	background: rgba(255, 255, 255, .97);
	color: #111827;
	box-shadow: 0 30px 70px -24px rgba(15, 23, 42, .55);
}

.ps-fileup.is-open .ps-fileup-panel {
	display: block;
}

html.dark .ps-fileup-panel {
	background: rgba(17, 24, 39, .97);
	color: #f3f4f6;
	box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .85);
}

/* ---------- 面板头部 ---------- */
.ps-fileup-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 15px 20px;
	border-bottom: 1px solid var(--ps-border);
}

.ps-fileup-head h3 {
	margin: 0;
	font-size: 15.5px;
	font-weight: 700;
}

.ps-fileup-close {
	border: 0;
	background: transparent;
	color: var(--ps-muted);
	font-size: 22px;
	line-height: 1;
	padding: 2px 6px;
	border-radius: 8px;
	cursor: pointer;
}

.ps-fileup-close:hover {
	color: var(--ps-accent);
	background: rgba(127, 127, 127, .12);
}

/* ---------- 面板内容 ---------- */
.ps-fileup-body {
	padding: 18px 20px 20px;
}

/* 面板里不再需要卡片外框与底部留白（原来是顶部独立卡片） */
.ps-fileup-body .ps-file-form {
	margin: 0;
}

.ps-fileup-hint {
	margin: 12px 0 0;
	font-size: 12.5px;
	color: var(--ps-muted);
}

/* 窄屏：按钮再收小一点，避免和返回顶部挤在一起 */
@media (max-width: 640px) {
	.ps-fileup-fab {
		right: 18px;
		bottom: 128px;
		padding: 9px 15px 9px 13px;
		font-size: 13px;
	}
}

/* ============================================================
 * ㉒ 文章详情页中栏与首页卡片外观对齐（【v12.0.12 新增】）
 *    首页每篇文章都是一张 article.ps-card2（卡片底 + 描边 + 圆角 + 阴影 +
 *    左侧主色竖条），而详情页的 article.ps-post2 是直接贴在磨砂面板上的裸文本，
 *    两页并排看时「一个是卡片、一个是白板」，观感不一致。
 *    这里只给详情页补一层与首页同款的卡片外壳，不改动内部任何结构；
 *    配色仍走 ① 节变量，昼夜模式自动跟随。
 * ============================================================ */

/* 中栏面板：给卡片留出与首页同等的上下呼吸位（首页默认 6px 上边距偏挤） */
.ps-layout.ps-three .ps-panel.ps-panel-post {
	padding: 18px 26px 18px;
}

/* 卡片外壳：与 .ps-card2 的无图版 .ps-card2-plain 完全同款 */
article.ps-post2 {
	background: var(--ps-card);
	border: 1px solid var(--ps-border);
	border-left: 4px solid var(--ps-accent-soft);
	border-radius: 14px;
	box-shadow: var(--ps-shadow);
	padding: 0 26px 22px;
}

/* 窄屏：卡片内边距收紧，避免正文被竖条和留白挤成一条 */
@media (max-width: 640px) {
	article.ps-post2 {
		padding: 0 16px 18px;
		border-left-width: 3px;
	}

	.ps-layout.ps-three .ps-panel.ps-panel-post {
		padding: 14px 14px 14px;
	}
}