/*
 * xhs.css — 小红书式宽屏布局
 *
 * 只做两件事，全部靠覆盖，不改主题任何文件：
 *   1. 瀑布流桌面端 3 列 → 5 列（平板与手机端一律不动，还是主题原来的 2 列）；
 *      论坛首页把侧栏做成「抽屉」：侧栏展开时 4 列、收起时 5 列（见文件第三节）
 *   2. 论坛首页的页面容器由「居中 + 限宽」改成「贴左 + 加宽」，
 *      左侧栏目与内容不再被居中的空白推开（原先 --mian-max-width 默认 1200px，
 *      宽屏上左右各留一大片空白，看起来就是「左边没靠左」）。
 *
 * 可调变量（在后台「外观 → 自定义 → 额外 CSS」里写一条即可覆盖）：
 *   --mugcxpb-xhs-max-width   页面容器最大宽度，默认 1680px
 *   --mugcxpb-xhs-grid-max    瀑布流网格最大宽度，默认 1400px（防止超宽屏卡片被拉成巨幅）
 *   --mugcxpb-xhs-gutter      容器左右内边距，默认 20px
 *
 * 想整体关掉：把 includes/class-mugcxpb-frontend.php 里 enqueue_runtime() 中的
 * wp_enqueue_style('mugcxpb-xhs'); 一行删掉即可。
 */

/* ============================================================
   一、瀑布流列数
   写在明确的区间里。选择器都锚在插件容器上（.mugcxpb-posts-section /
   .mugcxpb-first-layout-skeleton），特异性高于 frontend.min.css 的基础列数，
   即使被合并工具重排了样式顺序，覆盖关系也不会变。

   首屏骨架屏（.mugcxpb-initial-skeleton-grid）是服务端直出的静态 DOM，
   列数写死在 PHP 里（当前 5 列），窄一档的区间靠 nth-child 把多余的列藏掉。
   改列数时这里和 class-mugcxpb-frontend.php 的 skeleton_html() 要一起改，
   否则宽屏上会出现「骨架几列 → 真图几列」的跳一下。
   ============================================================ */

/* 桌面大屏：5 列 */
@media (min-width: 1200px) {
    .mugcxpb-posts-section .mugcxpb-masonry,
    .mugcxpb-first-layout-skeleton .mugcxpb-initial-skeleton-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        max-width: var(--mugcxpb-xhs-grid-max, 1400px);
    }

    /* 论坛首页 + 侧栏展开（占位 326px）时：网格让出侧栏，退回 4 列。
       侧栏收起（html 上有 .mugcxpb-sidebar-collapsed）时回落上面的全局 5 列；
       侧栏一个小工具都没有时（:has 不成立）本来就回收了占位，也保持 5 列。 */
    html:not(.mugcxpb-sidebar-collapsed) body.mugcxpb-xhs-layout #forum .container:has(.sidebar > *) .mugcxpb-masonry,
    html:not(.mugcxpb-sidebar-collapsed) body.mugcxpb-xhs-layout #forum .container:has(.sidebar > *) .mugcxpb-initial-skeleton-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* 服务端骨架是 5 列，侧栏展开时这一档只有 4 列，藏掉第 5 列对齐 */
    html:not(.mugcxpb-sidebar-collapsed) body.mugcxpb-xhs-layout #forum .container:has(.sidebar > *) .mugcxpb-initial-skeleton-grid .mugcxpb-initial-skeleton-column:nth-child(n+5) {
        display: none;
    }
}

/* :has() 兜底（Firefox<121 / Chrome<105 等不支持 :has 的浏览器）：
   论坛首页拿不到「侧栏有没有内容」的判断，展开时统一按 4 列排，
   代价是侧栏恰好为空时不再自动升 5 列（现代浏览器不受影响）。 */
@supports not selector(:has(*)) {
    @media (min-width: 1200px) {
        html:not(.mugcxpb-sidebar-collapsed) body.mugcxpb-xhs-layout #forum .mugcxpb-posts-section .mugcxpb-masonry,
        html:not(.mugcxpb-sidebar-collapsed) body.mugcxpb-xhs-layout #forum .mugcxpb-first-layout-skeleton .mugcxpb-initial-skeleton-grid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
    }
}

/* 桌面小屏：3 列（宽度不够，塞 5 列会把卡片挤成细条） */
@media (min-width: 992px) and (max-width: 1199px) {
    .mugcxpb-posts-section .mugcxpb-masonry,
    .mugcxpb-first-layout-skeleton .mugcxpb-initial-skeleton-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* 服务端骨架是 5 列，这一档网格只有 3 列，把第 4、5 列藏掉对齐 */
    .mugcxpb-initial-skeleton-grid .mugcxpb-initial-skeleton-column:nth-child(n+4) {
        display: none;
    }
}

/* 平板与手机：保持主题原有的 2 列，本插件一个字都不改 */
@media (max-width: 991px) {
    .mugcxpb-posts-section .mugcxpb-masonry,
    .mugcxpb-first-layout-skeleton .mugcxpb-initial-skeleton-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* 侧栏抽屉把手只在桌面出现，平板与手机上不渲染 */
    .mugcxpb-sidebar-toggle {
        display: none;
    }
}

/* ============================================================
   二、论坛首页容器：加宽 + 贴左
   body 上的 .mugcxpb-xhs-layout 由插件按页面判断后输出，
   所以这里的规则不会影响文章页、商城页等其它模板。

   断点取 992px：桌面（≥992px，3~5 列）才动布局，
   平板和手机（≤991px，仍然是主题原来的 2 列）完全不受影响。
   ============================================================ */
@media (min-width: 992px) {
    /* 页面最大宽度：主题默认读 --mian-max-width（后台布局设置，默认 1200px），
       靠它撑不出 5 列，这里在论坛页把它换掉。
       container-header / container-footer 都按 calc(--mian-max-width + 180px) 算宽，
       所以一起跟着变宽，头部与内容不会脱节。 */
    body.mugcxpb-xhs-layout {
        --mian-max-width: var(--mugcxpb-xhs-max-width, 1680px);
    }

    /* 容器改为左侧对齐：左边贴住屏幕，右侧留白交给浏览器。
       原来 margin-left/right:auto 是居中，宽屏上左右各空一大块。 */
    body.mugcxpb-xhs-layout .container,
    body.mugcxpb-xhs-layout .container-header,
    body.mugcxpb-xhs-layout .container-footer {
        margin-left: 0;
        margin-right: auto;
    }

    /* 贴左之后需要一点呼吸位，否则内容会贴到屏幕边缘 */
    body.mugcxpb-xhs-layout #forum > .container {
        padding-left: var(--mugcxpb-xhs-gutter, 20px);
        padding-right: var(--mugcxpb-xhs-gutter, 20px);
    }

    /* 论坛首页的侧栏如果一个小工具都没放（动态侧栏没输出任何元素），
       它仍然会占住内容区右侧 326px。这种情况直接把这块空间还给瀑布流，
       让 5 列铺开；侧栏里有内容时这条不生效，原样保留。 */
    body.mugcxpb-xhs-layout #forum .container:not(:has(.sidebar > *)) .content-layout {
        margin-right: 0;
    }
}

/* ============================================================
   三、论坛首页侧栏抽屉：收起 → 5 列 / 展开 → 4 列

   主题里侧栏的占位机制是：
     .site-layout-2 .content-layout { margin-right: calc(311px + 15px) }
     .site-layout-2 .sidebar { float:left; margin-left:-311px; width:311px }
   所以「收起抽屉」= 把 content-layout 的 margin-right 过渡到 0，
   326px 归还给瀑布流（列数由第一节按 html 上的 .mugcxpb-sidebar-collapsed
   类切换，5 列时卡片不会挤），侧栏本体淡出并把指针事件让给下面的卡片。

   侧栏不能把宽度改成 0：它是 float + 负 margin 的竖条，宽度收窄会让里面的
   文字折行、把整列撑高几倍，页面底部多出一大段空白（把手贴附也随之错乱）。
   淡出 + 内容滑过去铺满，同样有抽屉收起的效果，而且布局零重排。
   状态由 frontend.js 存 localStorage；防刷新闪烁的类在 <head> 里由 PHP 内联脚本
   提前补上（见 class-mugcxpb-frontend.php 的 mugcxpb-drawer-state）。
   ============================================================ */
@media (min-width: 992px) {
    /* 内容区让位宽度的过渡：展开 326px ↔ 收起 0 */
    body.mugcxpb-xhs-layout #forum .container .content-layout {
        transition: margin-right 0.3s ease;
    }

    /* 侧栏本体只淡出，宽度不动，避免折行把整列撑高 */
    body.mugcxpb-xhs-layout #forum .container .sidebar {
        transition: opacity 0.3s ease;
    }

    html.mugcxpb-sidebar-collapsed body.mugcxpb-xhs-layout #forum .container .content-layout {
        margin-right: 0;
    }

    html.mugcxpb-sidebar-collapsed body.mugcxpb-xhs-layout #forum .container .sidebar {
        opacity: 0;
        pointer-events: none;
    }

    /* 抽屉把手：贴在内容区右边缘 + 随滚动贴附的悬浮小竖条。
       位置全部由 JS 计算（横向贴内容与侧栏的交界线，收起/展开过渡期间由 rAF 每帧跟随，
       不写 CSS 过渡，避免与 margin 过渡的时机对不齐而抽搐；纵向复刻主题侧栏 affix 的手感：
       平时贴着侧栏顶边随页面上移，越过头部后吸在头部下方，滚到底部时让位）。
       这里只给一个初始 top，避免首帧闪到屏幕左上角。 */
    .mugcxpb-sidebar-toggle {
        position: fixed;
        top: 96px;
        z-index: 999;
        width: 30px;
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: var(--muted-2-color, #999);
        background: var(--main-bg-color, #fff);
        border: 1px solid var(--main-border-color, rgba(50, 50, 50, 0.06));
        border-right: 0;
        border-radius: var(--main-radius, 8px) 0 0 var(--main-radius, 8px);
        box-shadow: 0 1px 8px var(--main-shadow, rgba(116, 116, 116, 0.08));
        transition: color 0.2s ease, background 0.2s ease;
    }

    .mugcxpb-sidebar-toggle:hover {
        color: var(--focus-color, #f04494);
    }

    .mugcxpb-sidebar-toggle svg {
        width: 14px;
        height: 14px;
        transition: transform 0.3s ease;
    }

    /* 收起后箭头反向，暗示「点这里展开」 */
    html.mugcxpb-sidebar-collapsed .mugcxpb-sidebar-toggle svg {
        transform: scaleX(-1);
    }
}

/* ============================================================
   四、减少动态效果偏好：抽屉的过渡对「系统减少动画」用户直接关掉
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    body.mugcxpb-xhs-layout #forum .container .content-layout,
    body.mugcxpb-xhs-layout #forum .container .sidebar,
    .mugcxpb-sidebar-toggle svg {
        transition: none;
    }
}

/* ============================================================
   五、弹窗动效与细节（列表一侧不做任何美化）
   ------------------------------------------------------------
   需求方定稿：**帖子列表保持主题原本的样子**。所以这一节只保留弹窗内的动效：
   封面淡入、评论条目悬停、内容分区浮现、细滚动条、按钮回弹。
   （列表曾有过的悬停浮起 / 底边光扫 / 新帖标记点 / 仿玻璃 / 图片淡入 / 错峰入场 /
     10px 圆角，已按需求全部移除 —— 不要再加回来。）
   ============================================================ */

/* 5.1 弹窗封面淡入：JS 给加载完的图加 .mugcxpb-img-in */
html.mugcxpb-js .mugcxpb-modal-cover img {
    opacity: 0;
    transition: opacity .38s ease;
}

html.mugcxpb-js .mugcxpb-modal-cover img.mugcxpb-img-in {
    opacity: 1;
}

/* 5.2 弹窗评论条目：悬停一层淡底 */
@media (hover: hover) and (pointer: fine) {
    .mugcxpb-modal-comments .comment {
        border-radius: 10px;
        transition: background-color .2s ease;
    }

    .mugcxpb-modal-comments .comment:hover {
        background-color: rgba(125, 125, 125, .05);
    }
}
/* 5.3 内容分区依次浮现（不改变布局，只做视觉层次） */
@keyframes mugcxpb-modal-rise {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.mugcxpb-modal-main-content > * {
    animation: mugcxpb-modal-rise .3s cubic-bezier(.22, .61, .36, 1) both;
}

.mugcxpb-modal-main-content > :nth-child(2) { animation-delay: .04s; }
.mugcxpb-modal-main-content > :nth-child(3) { animation-delay: .08s; }
.mugcxpb-modal-main-content > :nth-child(4) { animation-delay: .12s; }
.mugcxpb-modal-main-content > :nth-child(5) { animation-delay: .16s; }
.mugcxpb-modal-main-content > :nth-child(n+6) { animation-delay: .2s; }

/* 弹窗右栏滚动条：细一点、安静一点 */
.mugcxpb-modal-main-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(125, 125, 125, .3) transparent;
}

.mugcxpb-modal-main-scroll::-webkit-scrollbar {
    width: 8px;
}

.mugcxpb-modal-main-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.mugcxpb-modal-main-scroll::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: rgba(125, 125, 125, .3);
    background-clip: content-box;
}

.mugcxpb-modal-main-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(125, 125, 125, .5);
    background-clip: content-box;
}

/* 弹窗里的按钮：按下有一点点回弹（只作用于本插件弹窗内部） */
.mugcxpb-modal .but {
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.mugcxpb-modal .but:active {
    transform: scale(.97);
}

/* 5.4 手机端与「减少动态效果」：只针对弹窗里的动效 */
@media (max-width: 991px) {
    .mugcxpb-modal-main-content > * {
        animation-duration: .24s;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.mugcxpb-js .mugcxpb-modal-cover img {
        opacity: 1 !important;
        transition: none !important;
    }

    .mugcxpb-modal-main-content > * {
        animation: none !important;
    }

    .mugcxpb-modal .but:active {
        transform: none !important;
        transition: none !important;
    }
}
/* 5.5 切换帖子（弹窗已经开着，又点了另一条）：**不重放动画**，内容直接替换。
   原因：把整块巨型对话框（含全部图片）再做一次 clip-path + 缩放过渡，快速连点时这些动画
   会叠加，桌面 Chrome 需要逐帧重新栅格化整块区域 —— 这是"连点几条就卡死"的主要来源。
   （不做 origin 动画时，对话框直接用基础状态，圆角由第六节的基础 clip-path 负责。） */
.mugcxpb-modal.mugcxpb-modal-swapping .mugcxpb-modal-dialog,
.mugcxpb-modal.mugcxpb-modal-swapping .mugcxpb-modal-loading-preview {
    transition: none !important;
    animation: none !important;
}

.mugcxpb-modal.mugcxpb-modal-swapping .mugcxpb-modal-main-content > * {
    animation: none !important;
}
/* 5.5b 切换帖子时内容做一次很短的淡入。
   大块内容"啪"地整块替换观感很硬；140ms 的淡入足够柔，又只有一次合成开销。
   只在切换时加（首次打开本来就有"分区依次浮现"动画，不需要叠加）。*/
@keyframes mugcxpb-modal-content-in {
    from {
        opacity: .55;
    }
    to {
        opacity: 1;
    }
}

.mugcxpb-modal-body.mugcxpb-modal-content-in {
    animation: mugcxpb-modal-content-in .14s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
    .mugcxpb-modal-body.mugcxpb-modal-content-in {
        animation: none !important;
    }
}
/* 5.6 弹窗整层默认**不吃点击** —— 只有"真的有内容"时才接管鼠标。
   ------------------------------------------------------------
   原因（真实事故）：对话框 .mugcxpb-modal-dialog 的背景是 background:0 0（**透明**，
   白色是里面的内容给的），尺寸却是 112vh × min(90vh,880px)、几乎铺满屏幕。
   一旦里面**没有内容**，它就是一个"看不见、却吃掉所有点击"的方块；
   再叠上 body 的滚动锁，用户看到的就是「页面照常显示，点什么都划不动」。
   所以把"有没有真实内容"作为**唯一开关**：
     · 没内容（加载中 / 内容为空 / 请求被丢弃）→ 整层点击穿透，页面照常可点可滚；
     · 有内容（服务端渲染出 .mugcxpb-modal-main-pane，或 JS 加上 mugcxpb-modal-has-content）
       → 对话框与遮罩恢复交互，点空白处关闭弹窗，和以前完全一样。
   两个开关都给上（JS 类 + :has()）是为了**不依赖 JS 版本**：哪怕浏览器缓存里是旧 JS，
   也不至于把页面锁死。关闭键则永远可点（只要能看见），用户总能关掉弹窗。 */
.mugcxpb-modal,
.mugcxpb-modal.mugcxpb-is-visible,
.mugcxpb-modal.mugcxpb-is-closing,
.mugcxpb-modal .mugcxpb-modal-dialog,
.mugcxpb-modal .mugcxpb-modal-backdrop {
    pointer-events: none;
}

.mugcxpb-modal.mugcxpb-modal-has-content .mugcxpb-modal-dialog,
.mugcxpb-modal.mugcxpb-modal-has-content .mugcxpb-modal-backdrop,
.mugcxpb-modal:has(.mugcxpb-modal-main-pane) .mugcxpb-modal-dialog,
.mugcxpb-modal:has(.mugcxpb-modal-main-pane) .mugcxpb-modal-backdrop {
    pointer-events: auto;
}

.mugcxpb-modal.mugcxpb-is-visible .mugcxpb-modal-close {
    pointer-events: auto;
}
/* ============================================================
   六、圆润角与整体质感
   ------------------------------------------------------------
   圆角是"最便宜"的美化：纯 CSS、不动布局、没有任何运行时代价，也不会有
   悬停时的重绘（本节完全没有动画）。统一三处：
     · 卡片与骨架 6px → 10px（封面顶角、骨架块都跟着同一个变量走）
     · 帖子弹窗 4px → 18px（裁切在 body、动画在 dialog 的 clip-path，两个值必须一致）
     · 窄屏：主题把弹窗做成"底部升起的抽屉"，只圆上面两个角
   ============================================================ */

/* 6.2 帖子弹窗：外面这层负责裁切（overflow:hidden + border-radius），
   dialog 的 clip-path 负责展开/收起动画的形状 —— 两者不一致时动画中圆角会跳一下 */
.mugcxpb-modal-dialog {
    border-radius: 18px;
    clip-path: inset(0 0 0 0 round 18px);
}

.mugcxpb-modal-body {
    border-radius: 18px;
    /* 窗口边缘：极细的一道中性描边（浅色下是淡淡的深灰，深色下是极淡的白）。
       不用纯白亮边：现在遮罩很透，白边在浅色背景上起不到分离作用 */
    outline: 1px solid rgba(0, 0, 0, .08);
    outline-offset: -1px;
}

.mugcxpb-modal-article {
    border-radius: inherit;
}

/* 7.2b 「从卡片展开」的那套动画里也硬编码了 round 4px（frontend.min.css 的
   .mugcxpb-has-origin 规则），不一起改的话，正常点卡片打开弹窗时圆角会跳回 4px。
   选择器与媒体查询都与主题保持一致，只改圆角数值。 */
@media (min-width: 696px) {
    .mugcxpb-modal.mugcxpb-has-origin .mugcxpb-modal-dialog {
        clip-path: inset(0 var(--mugcxpb-modal-start-clip-right) 0 0 round 18px);
    }

    .mugcxpb-modal.mugcxpb-has-origin.mugcxpb-is-visible .mugcxpb-modal-dialog {
        clip-path: inset(0 0 0 0 round 18px);
    }
}

/* 6.3 窄屏（主题的底部抽屉形态，断点与主题一致）：只圆上面两角，下面贴屏幕底边 */
@media (max-width: 575px) {
    .mugcxpb-modal-dialog {
        border-radius: 20px 20px 0 0;
        clip-path: inset(0 0 0 0 round 20px 20px 0 0);
    }

    .mugcxpb-modal-body {
        border-radius: 20px 20px 0 0;
    }
}

/* 6.5 数字细节：浏览/评论数用等宽数字 —— 数字变化（点赞后 +1）时不会左右抖一下 */
.mugcxpb-engagement-count {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ============================================================
   七、窗口观感 + 小控件毛玻璃（按需求定稿，别再改回去）
   ------------------------------------------------------------
   需求方定死的两件事：
     · **窗口本身必须实底**：不做半透明。半透明会让正文区透出背后的颜色、
       白底文字区发灰发暗（1.4.19 就是这么翻的车）。
     · **窗口背后必须完全透明**：像小红书那样，背后那一页原样可见 ——
       不压暗、也不加模糊（模糊也算"处理过"，要的是完全透明）。
   所以窗口靠「实底 + 极细描边 + 圆角」与背景分离，背后不加任何遮罩效果。

   真正的 backdrop-filter 只留在**小控件**上（面积小、且不在滚动流里）：
   图片计数器、播放角标、抽屉手柄、「说点什么吧～」胶囊。
   滚动中的卡片一律只用"仿玻璃"（半透明底 + 亮边，不加模糊）。
   ============================================================ */

/* 7.1 遮罩：完全透明 —— 清掉主题原有的深色蒙版与模糊 */
.mugcxpb-modal-backdrop {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* 主题在「灯箱已备好」状态下用 !important 把模糊写死成 blur(10px)
   （frontend.min.css:741）。不覆盖这条，点卡片打开弹窗时背后会忽然变糊 ——
   这正是"完全透明"最容易漏掉的一处。 */
body.mugcxpb-modal-open.mugcxpb-modal-imgbox-prepared .mugcxpb-modal-backdrop {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* 7.2 窗口：实底。
   两侧面板 / 底部操作条都保持主题原本的不透明底色（这里不再写任何背景覆盖，
   留这段注释是为了防止以后有人又给窗口加透明度）。 */
.mugcxpb-modal-body {
    background: transparent;
}

/* 7.3 小控件毛玻璃 */
/* 视频卡的播放角标：玻璃圆片（面积小，与卡片上的版块胶囊同一量级） */
.mugcxpb-card-play {
    color: rgba(255, 255, 255, .96);
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .38);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 18px -8px rgba(0, 0, 0, .45);
    -webkit-backdrop-filter: blur(6px) saturate(140%);
    backdrop-filter: blur(6px) saturate(140%);
}

/* 图片计数器：玻璃胶囊 */
.mugcxpb-modal-swiper-counter {
    background: rgba(22, 24, 28, .38);
    border: 1px solid rgba(255, 255, 255, .22);
    -webkit-backdrop-filter: blur(8px) saturate(150%);
    backdrop-filter: blur(8px) saturate(150%);
}

/* 底部「说点什么吧～」胶囊 */
.mugcxpb-modal-actions .mugcxpb-modal-comment-jump {
    background: rgba(125, 125, 125, .10);
    border: 1px solid rgba(125, 125, 125, .10);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    backdrop-filter: blur(10px) saturate(150%);
}

/* 侧栏抽屉手柄：悬浮的玻璃片（只有 30×64，滚动中也很轻） */
.mugcxpb-sidebar-toggle {
    background: rgba(255, 255, 255, .58);
    border-color: rgba(255, 255, 255, .55);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 8px 22px -12px rgba(34, 36, 38, .45);
}

/* 7.5 深色模式 */
.dark-theme .mugcxpb-modal-body {
    outline-color: rgba(255, 255, 255, .16);
}

.dark-theme .mugcxpb-sidebar-toggle {
    background: rgba(41, 43, 46, .60);
    border-color: rgba(255, 255, 255, .16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 8px 22px -12px rgba(0, 0, 0, .6);
}

.dark-theme .mugcxpb-modal-actions .mugcxpb-modal-comment-jump {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .12);
}


/* 7.6 降级：不支持 backdrop-filter 时，抽屉手柄直接用实底（其余控件不依赖模糊） */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .mugcxpb-sidebar-toggle {
        background: var(--main-bg-color, #fff);
    }
}

/* ============================================================
   八、其他细节美化（全部静态，零运行时代价）
   ============================================================ */

/* 8.1 选中文字用主题色（只作用于弹窗内部，列表不做美化） */
.mugcxpb-modal ::selection {
    background: var(--focus-color, #f04494);
    color: #fff;
}

/* 8.2a 弹窗加载失败时的错误态：多给一个「打开原帖」出口 + 失败原因小字 */
.mugcxpb-modal-state .mugcxpb-modal-state-why {
    display: inline-block;
    margin-top: 4px;
    font-size: 12px;
    opacity: .7;
}

.mugcxpb-modal-state .mugcxpb-modal-open-post {
    margin-left: 8px;
}
/* 8.2 抽屉手柄：悬停时箭头朝"点下去会移动的方向"挪 2px */
.mugcxpb-sidebar-toggle:hover svg {
    transform: translateX(2px);
}

html.mugcxpb-sidebar-collapsed .mugcxpb-sidebar-toggle:hover svg {
    transform: translateX(-2px) scaleX(-1);
}

/* 8.4 弹窗底部操作按钮：悬停有一层淡底，比只变色更容易看出可点 */
.mugcxpb-modal-actions .mugcxpb-modal-action:hover,
.mugcxpb-modal-actions-default > a:hover {
    background: rgba(125, 125, 125, .08);
}

.dark-theme .mugcxpb-modal-actions .mugcxpb-modal-action:hover,
.dark-theme .mugcxpb-modal-actions-default > a:hover {
    background: rgba(255, 255, 255, .08);
}

/* 8.5 弹窗标题：加一点点字距，长标题更耐看 */
.mugcxpb-modal-title {
    letter-spacing: .01em;
}

/* ============================================================
   九、图集翻页箭头（像小红书：悬停才出现）+ 图集底色
   ------------------------------------------------------------
   需求：箭头不要常显、不要"卡在一半"；鼠标移到图片上再淡入；
   用干净的圆形按钮 + 16px 细箭头（Swiper 自带字体图标已弃用）。
   ============================================================ */

/* 9.1 图集底色：浅色模式下不再用近黑 —— 那是"打开弹窗黑闪一下"的来源。
   弹窗先显示浅色的加载封面，再切成近黑图集底，然后图片才解码出来 → 就是那一帧黑。
   深色模式保持深底（面板本身就是深色，不存在对比闪）。 */
.mugcxpb-modal-gallery {
    background: rgba(125, 125, 125, .08);
}

.dark-theme .mugcxpb-modal-gallery {
    background: #17181a;
}

/* 9.2 去掉 Swiper 自带的字体图标，只用插件自己的内联 SVG */
.mugcxpb-modal-gallery .swiper-button-prev::after,
.mugcxpb-modal-gallery .swiper-button-next::after {
    display: none;
}

/* 9.3 圆形按钮：玻璃白底 + 细箭头。
   出现/消失都带"方向"：左箭头从左边滑进来、右箭头从右边滑进来；
   隐藏时反向滑出去再消失（visibility 延迟到淡出结束才切，避免提前消失） */
.mugcxpb-modal-gallery .swiper-button-prev,
.mugcxpb-modal-gallery .swiper-button-next {
    width: 34px;
    height: 34px;
    margin-top: -17px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .84);
    color: #2b2f33;
    box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .6);
    -webkit-backdrop-filter: blur(8px) saturate(150%);
    backdrop-filter: blur(8px) saturate(150%);
    opacity: 0;
    visibility: hidden;
    will-change: opacity, transform;
    transition:
        opacity .2s cubic-bezier(.22, .61, .36, 1),
        transform .28s cubic-bezier(.22, .61, .36, 1),
        background-color .18s ease,
        visibility 0s linear .28s;
}

.mugcxpb-modal-gallery .swiper-button-prev {
    left: 14px;
    transform: translateX(-10px) scale(.9);
}

.mugcxpb-modal-gallery .swiper-button-next {
    right: 14px;
    transform: translateX(10px) scale(.9);
}

.mugcxpb-swiper-arrow {
    display: block;
    pointer-events: none;
}

/* 9.4 鼠标移到图片区：淡入 + 滑回本位 + 恢复大小。
   左右各错开 30ms，视觉上像"两侧同时拉开"，比整齐一起出现更有节奏 */
.mugcxpb-modal-cover-pane:hover .mugcxpb-modal-gallery .swiper-button-prev,
.mugcxpb-modal-gallery:focus-within .swiper-button-prev {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s, 0s, 0s, 0s;
}

.mugcxpb-modal-cover-pane:hover .mugcxpb-modal-gallery .swiper-button-next,
.mugcxpb-modal-gallery:focus-within .swiper-button-next {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: .03s, .03s, 0s, 0s;
}

/* 9.5 悬停按钮本身：更亮 + 再放大一点（此时 translate 已归零，只叠 scale） */
.mugcxpb-modal-gallery .swiper-button-prev:hover,
.mugcxpb-modal-gallery .swiper-button-next:hover {
    background: #fff;
    transform: scale(1.07);
}

.mugcxpb-modal-gallery .swiper-button-prev:active,
.mugcxpb-modal-gallery .swiper-button-next:active {
    transform: scale(.96);
}

/* 9.6 到第一张 / 最后一张：这个方向的箭头直接不出现（能翻才有箭头，与小红书一致） */
.mugcxpb-modal-gallery .swiper-button-disabled {
    opacity: 0 !important;
    visibility: hidden !important;
    cursor: default;
}

/* 9.7 触屏设备没有"悬停"：箭头常显（半透明），否则根本翻不了页 */
@media (hover: none) {
    .mugcxpb-modal-gallery .swiper-button-prev,
    .mugcxpb-modal-gallery .swiper-button-next {
        opacity: .6;
        visibility: visible;
        transform: none;
    }
}

/* 9.8 系统「减少动态效果」：只做淡入淡出，不做位移与缩放 */
@media (prefers-reduced-motion: reduce) {
    .mugcxpb-modal-gallery .swiper-button-prev,
    .mugcxpb-modal-gallery .swiper-button-next {
        transform: none !important;
        transition: opacity .12s linear, visibility 0s;
    }

    .mugcxpb-modal-gallery .swiper-button-prev:hover,
    .mugcxpb-modal-gallery .swiper-button-next:hover,
    .mugcxpb-modal-gallery .swiper-button-prev:active,
    .mugcxpb-modal-gallery .swiper-button-next:active {
        transform: none;
    }
}


/* ============================================================
   5.7 没有"卡片来源"的弹窗：进场/退场也要有明确动作
   ------------------------------------------------------------
   症状（需求方反馈）：**刷新后**（深链打开）的窗口关掉时没有收回动画，像是"直接消失"；
   而从卡片点开的窗口关掉时是正常的"收回卡片"。

   原因在 frontend.min.css：退场动画只写给了 .mugcxpb-has-origin 的弹窗
   （从卡片收回），没有来源的窗口退场只剩基础态那点 14px / 0.985 的位移 —— 肉眼看不出来。

   ★★★ 桌面端（≥696px）的对话框是 position:absolute + **靠 transform 里的
   `--mugcxpb-modal-left` / `--mugcxpb-modal-top` 两个变量居中**的（由 JS 的
   layoutModal() 写入元素自身）。所以这里改写 transform 时**必须把这两个变量带上**：
   写成 `transform: none` 或 `translate3d(0, …, 0)` 会直接把窗口甩到左上角。
   （1.5.9 的第一版就是漏了这一步，需求方立刻看到"窗口错位到左上角"。）
   窄屏 ≤695px 的居中靠 flex 完成，**不带变量才是对的**，所以下面分两段写。
   ============================================================ */

/* --- 窄屏（居中靠 flex）：进场自下而上浮起，退场下滑 + 缩小 + 淡出 --- */
.mugcxpb-modal:not(.mugcxpb-has-origin) .mugcxpb-modal-dialog {
    transform: translate3d(0, 26px, 0) scale(.965);
    transition: transform 320ms cubic-bezier(.2, .8, .2, 1), opacity 240ms ease-out;
}

/* "准备中"阶段不许有过渡，否则会先看到一次跳动 */
.mugcxpb-modal:not(.mugcxpb-has-origin).mugcxpb-is-preparing .mugcxpb-modal-dialog {
    transition: none;
}

.mugcxpb-modal:not(.mugcxpb-has-origin).mugcxpb-is-visible .mugcxpb-modal-dialog {
    opacity: 1;
    transform: none;
}

.mugcxpb-modal:not(.mugcxpb-has-origin).mugcxpb-is-closing .mugcxpb-modal-dialog {
    opacity: 0;
    transform: translate3d(0, 22px, 0) scale(.955);
    transition: transform 300ms cubic-bezier(.4, 0, .2, 1), opacity 220ms ease-out 80ms;
}

/* --- 桌面端：同样的动作，但 transform 必须带上居中的两个变量（★ 别删） --- */
@media (min-width: 696px) {
    .mugcxpb-modal:not(.mugcxpb-has-origin) .mugcxpb-modal-dialog {
        transform: translate3d(var(--mugcxpb-modal-left, 0), calc(var(--mugcxpb-modal-top, 0) + 26px), 0) scale(.965);
    }

    .mugcxpb-modal:not(.mugcxpb-has-origin).mugcxpb-is-visible .mugcxpb-modal-dialog {
        transform: translate3d(var(--mugcxpb-modal-left, 0), var(--mugcxpb-modal-top, 0), 0) scale(1);
    }

    .mugcxpb-modal:not(.mugcxpb-has-origin).mugcxpb-is-closing .mugcxpb-modal-dialog {
        transform: translate3d(var(--mugcxpb-modal-left, 0), calc(var(--mugcxpb-modal-top, 0) + 22px), 0) scale(.955);
    }
}

/* --- 系统「减少动态效果」：不缩不滑，只淡出（同样要保留居中变量） --- */
@media (prefers-reduced-motion: reduce) {
    .mugcxpb-modal:not(.mugcxpb-has-origin) .mugcxpb-modal-dialog,
    .mugcxpb-modal:not(.mugcxpb-has-origin).mugcxpb-is-visible .mugcxpb-modal-dialog,
    .mugcxpb-modal:not(.mugcxpb-has-origin).mugcxpb-is-closing .mugcxpb-modal-dialog {
        transform: translate3d(0, 0, 0) scale(1) !important;
        transition: opacity 160ms linear !important;
    }
}

@media (prefers-reduced-motion: reduce) and (min-width: 696px) {
    .mugcxpb-modal:not(.mugcxpb-has-origin) .mugcxpb-modal-dialog,
    .mugcxpb-modal:not(.mugcxpb-has-origin).mugcxpb-is-visible .mugcxpb-modal-dialog,
    .mugcxpb-modal:not(.mugcxpb-has-origin).mugcxpb-is-closing .mugcxpb-modal-dialog {
        transform: translate3d(var(--mugcxpb-modal-left, 0), var(--mugcxpb-modal-top, 0), 0) scale(1) !important;
    }
}

/* ============================================================
   十、抽屉把手的首次访问指引（1.8.4）
   ------------------------------------------------------------
   需求：第一次访问的人要能看见右侧「收起/展开」把手，但不能影响站点整体观感。
   做法：一个贴在手柄左侧的小气泡 + 手柄两次轻微呼吸，6 秒后自动消失、只出现一次。
   视觉全部沿用主题变量（--main-bg-color / --main-border-color / --focus-color），
   所以浅色与深色模式都跟站点一致，不引入新的配色。
   ============================================================ */
.mugcxpb-sidebar-hint {
    position: fixed;
    z-index: 1000;
    max-width: 190px;
    padding: 9px 11px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--muted-2-color, #888);
    background: var(--main-bg-color, #fff);
    border: 1px solid var(--main-border-color, rgba(50, 50, 50, 0.06));
    border-radius: var(--main-radius, 8px);
    box-shadow: 0 6px 22px var(--main-shadow, rgba(116, 116, 116, 0.14));
    opacity: 0;
    transform: translateX(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}
.mugcxpb-sidebar-hint.is-in {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
.mugcxpb-sidebar-hint-t {
    flex: 1 1 auto;
}
.mugcxpb-sidebar-hint-x {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 12px;
    line-height: 1;
    padding: 2px 3px;
    cursor: pointer;
    opacity: 0.55;
}
.mugcxpb-sidebar-hint-x:hover {
    opacity: 1;
}

/* 手柄的"看我一眼"：只呼吸两次，不是常驻动画 */
@keyframes mugcxpb-hint-pulse {
    0%, 100% {
        box-shadow: 0 1px 8px var(--main-shadow, rgba(116, 116, 116, 0.08));
    }
    50% {
        box-shadow: 0 0 0 6px rgba(240, 68, 148, 0.12), 0 1px 8px var(--main-shadow, rgba(116, 116, 116, 0.08));
    }
}
.mugcxpb-sidebar-toggle-hint {
    color: var(--focus-color, #f04494);
    animation: mugcxpb-hint-pulse 1.7s ease-in-out 2;
}

/* 窄屏（手机上侧栏是抽屉，手柄本来就不出现）不显示指引 */
@media (max-width: 1199px) {
    .mugcxpb-sidebar-hint {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mugcxpb-sidebar-toggle-hint {
        animation: none;
    }
    .mugcxpb-sidebar-hint {
        transition: none;
    }
}

/* ============================================================
   十之一、指引改版（1.8.5）：把手自身高亮，不再用浮层气泡
   ------------------------------------------------------------
   上一版把气泡贴在把手**左侧**，那里正是帖子网格 → 需求方反馈"挡住了帖子"。
   这一版让指引与把手**完全重合**（同宽同高同位置）：不新增任何占位，
   所以绝不可能盖住帖子；同时把手临时换成强调色 + 竖排"收起侧栏" + 尖角，
   显眼程度远高于原来的浅灰小箭头。6 秒后自动还原成常态把手。
   ============================================================ */
.mugcxpb-sidebar-hint {
    position: fixed;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 0;
    color: #fff;
    background: var(--focus-color, #f04494);
    border: 1px solid var(--focus-color, #f04494);
    border-right: 0;
    border-radius: var(--main-radius, 8px) 0 0 var(--main-radius, 8px);
    box-shadow: 0 4px 18px rgba(240, 68, 148, 0.28);
    cursor: pointer;
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.25s ease;
}
/* 指向帖子的尖角：提示"点这里，内容会往这边让出位置" */
.mugcxpb-sidebar-hint::after {
    content: '';
    position: absolute;
    left: -6px;
    top: 50%;
    margin-top: -5px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 6px 5px 0;
    border-color: transparent var(--focus-color, #f04494) transparent transparent;
}
.mugcxpb-sidebar-hint.is-in {
    opacity: 1;
}
.mugcxpb-sidebar-hint-t {
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 3px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
}
.mugcxpb-sidebar-hint-x {
    flex: 0 0 auto;
    border: 0;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 10px;
    line-height: 1;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    padding: 0;
    cursor: pointer;
}
.mugcxpb-sidebar-hint-x:hover {
    background: rgba(255, 255, 255, 0.32);
}
/* 把手本体也一起变成强调色（浮层与把手重合时看不出接缝） */
.mugcxpb-sidebar-toggle-hint {
    color: transparent;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    animation: none;
    pointer-events: none;
}
/* 浮层出现时把手仍要能被"点空白处也算点过一次"的逻辑收掉：由 JS 的 btn click 负责 */

/* 极轻的一次呼吸（两声心跳就停），reduced-motion 下不动 */
@keyframes mugcxpb-hint-pulse2 {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}
.mugcxpb-sidebar-hint {
    animation: mugcxpb-hint-pulse2 0.9s ease-in-out 2;
}

@media (prefers-reduced-motion: reduce) {
    .mugcxpb-sidebar-hint {
        animation: none;
        transition: none;
    }
}

/* ============================================================
   十之二、指引加强（1.8.6）：把手临时变高变亮 —— 只加高度，宽度不变（不增加遮挡）
   ============================================================ */
.mugcxpb-sidebar-toggle-hint { height: 128px; }
.mugcxpb-sidebar-hint { box-shadow: 0 6px 26px rgba(240, 68, 148, 0.42); }
.mugcxpb-sidebar-hint-t { font-size: 13px; letter-spacing: 4px; }
.mugcxpb-sidebar-hint::after { border-width: 7px 8px 7px 0; margin-top: -7px; }
@keyframes mugcxpb-hint-pulse3 {
    0%, 100% { transform: scale(1); box-shadow: 0 6px 26px rgba(240, 68, 148, 0.42); }
    50% { transform: scale(1.08); box-shadow: 0 8px 34px rgba(240, 68, 148, 0.62); }
}
.mugcxpb-sidebar-hint { animation: mugcxpb-hint-pulse3 1s ease-in-out 3; }
@media (prefers-reduced-motion: reduce) {
    .mugcxpb-sidebar-hint { animation: none; }
}

/* ============================================================
   十、栏目条首次指引（1.9.7 定稿：**只留一个框**）
   ------------------------------------------------------------
   需求方定稿意见："手机端只留框，并且刚才的美化去除"。
   所以这里把 1.8.7–1.9.6 期间试过的所有装饰**全部删掉**（荧光笔填充、扫光、
   外发光、整格放大、文字标签、呼吸动画），只保留一件事：
       **把「版块」两个字用一个框框起来**（颜色跟随子比主题全局色）。
   为什么这样最稳：不写 background / color / font / padding / transform，
   所以不可能和主题的字体、选中态、Swiper 布局打架 —— 前面几版的问题都出在这些属性上。
   仍保留的节奏：最多出现 3 次、9 秒后自动消失、点过即永久关闭（逻辑在 JS 里，未改）。
   ============================================================ */
ul.tab-nav-theme li.mugcxpb-tabnav-hint > a,
div.swiper-tab-nav li.mugcxpb-tabnav-hint > a,
ul.swiper-wrapper li.mugcxpb-tabnav-hint > a,
div.swiper-wrapper li.mugcxpb-tabnav-hint > a,
.swiper-slide.mugcxpb-tabnav-hint > a {
    /* ★ 1.9.9 关键修复：原来的 `border: … !important` 是简写、且带 !important，
       在 CSS 级联里 **!important 的静态声明会压过 @keyframes**，所以 border-color 永远不会变
       → 手机上"框不呼吸"就是这个原因。改成：宽度/样式用 !important（保证框存在），
       **颜色刻意不加 !important**，把 border-color 交给下面的呼吸动画去驱动。 */
    border-width: 2px !important;
    border-style: solid !important;
    border-color: var(--focus-color, #f04494);
    border-radius: 8px !important;
}

/* 手机：格子窄（Swiper 每格约 1/3 屏），框收紧一点，绝不溢出到相邻格 */
@media (max-width: 900px) {
    ul.tab-nav-theme li.mugcxpb-tabnav-hint > a,
    div.swiper-tab-nav li.mugcxpb-tabnav-hint > a,
    ul.swiper-wrapper li.mugcxpb-tabnav-hint > a,
    div.swiper-wrapper li.mugcxpb-tabnav-hint > a,
    .swiper-slide.mugcxpb-tabnav-hint > a {
        border-width: 2px !important;
        border-radius: 6px !important;
    }
}
/* 深色模式：主题色在暗底上已经够亮，不加任何额外修饰 */
/* ============================================================
   十一、微动效签名（1.9.5）
   ------------------------------------------------------------
   做法：全站"我们自己的交互控件"统一成**一套时长 + 一条缓动 + 一种按下反馈**，
   靠一致性产生"贵"的手感，不加任何装饰。
     · 缓动：cubic-bezier(.2,.8,.2,1)（先快后缓，收得干净）
     · 时长：常态 200ms；按下 120ms（按下更快、回弹更慢 = 有实体感）
     · 按下：2% 微缩（图集箭头 6%，像"咬合"到位）
     · 焦点：统一的 focus-visible 描边（顺带把键盘可达性补上）
   **边界**：只动控件（把手指引/弹窗按钮/图集箭头/错误态按钮/指引 ✕）。
   列表卡片**不加 hover 抬升、不加过渡** —— 1.4.25 已按需求把列表侧美化全部移除，
   这条线不越。纯 CSS、只走合成层，无 JS、无 hover-JS。
   ============================================================ */
body {
    --mugcxpb-ease: cubic-bezier(.2, .8, .2, 1);
    --mugcxpb-dur: 200ms;
    --mugcxpb-dur-fast: 120ms;
}

/* ① 统一缓动与时长 */
.mugcxpb-sidebar-toggle,
.mugcxpb-sidebar-hint,
.mugcxpb-sidebar-hint-x,
.mugcxpb-modal-actions a,
.mugcxpb-modal-actions button,
.mugcxpb-modal-state a,
.mugcxpb-modal-state button,
.mugcxpb-modal-gallery a,
.mugcxpb-modal-gallery button,
.mugcxpb-modal-gallery [class*="arrow"],
.mugcxpb-tabnav-hint > a {
    transition-timing-function: var(--mugcxpb-ease);
    transition-duration: var(--mugcxpb-dur);
}

/* ② 按下反馈：控件 2% 微缩（只影响 transform，合成层，不重排） */
.mugcxpb-sidebar-toggle:active,
.mugcxpb-modal-actions a:active,
.mugcxpb-modal-actions button:active,
.mugcxpb-modal-state a:active,
.mugcxpb-modal-state button:active,
.mugcxpb-sidebar-hint-x:active {
    transform: scale(0.98);
    transition-duration: var(--mugcxpb-dur-fast);
}

/* ③ 图集箭头"咬合"：按下缩得更明显（像卡进齿槽） */
.mugcxpb-modal-gallery [class*="arrow"]:active,
.mugcxpb-modal-gallery button:active {
    transform: scale(0.94);
    transition-duration: var(--mugcxpb-dur-fast);
}

/* ④ 焦点环：统一的键盘可见焦点（可达性） */
.mugcxpb-sidebar-toggle:focus-visible,
.mugcxpb-modal-actions a:focus-visible,
.mugcxpb-modal-actions button:focus-visible,
.mugcxpb-modal-state a:focus-visible,
.mugcxpb-modal-state button:focus-visible,
.mugcxpb-modal-gallery a:focus-visible,
.mugcxpb-modal-gallery button:focus-visible {
    outline: 2px solid var(--focus-color, #f04494);
    outline-offset: 2px;
}

/* ⑤ 系统"减少动画"时：一动都不动（含按下微缩） */
@media (prefers-reduced-motion: reduce) {
    .mugcxpb-sidebar-toggle:active,
    .mugcxpb-modal-actions a:active,
    .mugcxpb-modal-actions button:active,
    .mugcxpb-modal-state a:active,
    .mugcxpb-modal-state button:active,
    .mugcxpb-sidebar-hint-x:active,
    .mugcxpb-modal-gallery [class*="arrow"]:active,
    .mugcxpb-modal-gallery button:active {
        transform: none;
    }
    .mugcxpb-sidebar-toggle,
    .mugcxpb-sidebar-hint,
    .mugcxpb-sidebar-hint-x,
    .mugcxpb-modal-actions a,
    .mugcxpb-modal-actions button,
    .mugcxpb-modal-state a,
    .mugcxpb-modal-state button,
    .mugcxpb-modal-gallery a,
    .mugcxpb-modal-gallery button,
    .mugcxpb-modal-gallery [class*="arrow"],
    .mugcxpb-tabnav-hint > a {
        transition-duration: 0ms;
    }
}

/* ============================================================
   十之十一、手机端修复（1.9.6）
   ------------------------------------------------------------
   需求方反馈：手机端「版块 / 综合」看着像"乱码"。
   原因：1.9.2 起我在高亮格右侧挂了一个**绝对定位的文字标签**（「按分类找资料」/「找资料」）。
        桌面栏目条宽、放到右邻格上还看得过去；**手机上是 Swiper，每格只有 1/3 屏宽**，
         标签正好压在"热门"那一格上，两组汉字叠在一起 → 肉眼就是乱码。
   修法（只动手机断点，桌面不受影响）：
     ① **手机端彻底不显示那个文字标签**（只保留亮框 + 高亮，本身已经够醒目）；
     ② 恢复主题原本的内边距（我加的 12px 会在固定宽度格子里挤字）；
     ③ 高亮层的内缩减小，避免溢出到相邻格；
     ④ 手机端用更明显的描边/发光来补足醒目度（不靠文字）。
   ============================================================ */
@media (max-width: 900px) {
    /* ① 不要文字标签（桌面保留） */
    ul.tab-nav-theme li.mugcxpb-tabnav-hint > a::after,
    div.swiper-tab-nav li.mugcxpb-tabnav-hint > a::after,
    ul.swiper-wrapper li.mugcxpb-tabnav-hint > a::after,
    div.swiper-wrapper li.mugcxpb-tabnav-hint > a::after,
    .swiper-slide.mugcxpb-tabnav-hint > a::after {
        content: none !important;
        display: none !important;
    }
    /* ② 恢复主题原来的内边距（不挤字） */
    ul.tab-nav-theme li.mugcxpb-tabnav-hint > a,
    div.swiper-tab-nav li.mugcxpb-tabnav-hint > a,
    ul.swiper-wrapper li.mugcxpb-tabnav-hint > a,
    div.swiper-wrapper li.mugcxpb-tabnav-hint > a,
    .swiper-slide.mugcxpb-tabnav-hint > a {
        padding: revert !important;
    }
    /* ③ 高亮/亮框收紧在格子内部，绝不溢出到邻居 */
    ul.tab-nav-theme li.mugcxpb-tabnav-hint > a::before,
    div.swiper-tab-nav li.mugcxpb-tabnav-hint > a::before,
    ul.swiper-wrapper li.mugcxpb-tabnav-hint > a::before,
    div.swiper-wrapper li.mugcxpb-tabnav-hint > a::before,
    .swiper-slide.mugcxpb-tabnav-hint > a::before {
        inset: -3px -5px !important;
    }
    /* ④ 用描边和发光补醒目度 */
    ul.tab-nav-theme li.mugcxpb-tabnav-hint > a::before,
    div.swiper-tab-nav li.mugcxpb-tabnav-hint > a::before,
    ul.swiper-wrapper li.mugcxpb-tabnav-hint > a::before,
    div.swiper-wrapper li.mugcxpb-tabnav-hint > a::before,
    .swiper-slide.mugcxpb-tabnav-hint > a::before {
        border-width: 2px !important;
        box-shadow:
            inset 0 0 0 2px rgba(255, 255, 255, 0.85),
            0 0 0 1.5px rgba(255, 255, 255, 0.95),
            0 0 0 3px var(--focus-color-opacity3, rgba(240, 68, 148, 0.3)),
            0 0 20px 6px var(--focus-color-opacity6, rgba(240, 68, 148, 0.5)) !important;
    }
    /* 整格不再放大（手机上放大容易和邻居挤在一起） */
    ul.tab-nav-theme li.mugcxpb-tabnav-hint,
    div.swiper-tab-nav li.mugcxpb-tabnav-hint,
    ul.swiper-wrapper li.mugcxpb-tabnav-hint,
    div.swiper-wrapper li.mugcxpb-tabnav-hint,
    .swiper-slide.mugcxpb-tabnav-hint {
        animation: none !important;
        transform: none !important;
    }
}

/* ============================================================
   十之一、呼吸框（1.9.8）
   ------------------------------------------------------------
   需求方："手机端框应该像呼吸一样缓慢闪烁"。做法：
     · 只让**边框颜色 + 外圈光晕**在"主题色 ⇄ 40% 主题色"之间来回（3.2 秒一个来回，无限循环，
       但指引本身 9 秒后就消失，所以它是**有终点的呼吸**，不会在页面上一直动）；
     · **不动尺寸、不动位置、不动文字** —— 不用 transform，所以手机上不会和相邻格子挤；
     · 桌面与手机同一套节奏（桌面本来也是同一个框）；
     · 系统开"减少动态效果"时 = 静态实框，不呼吸。
   ============================================================ */
@keyframes mugcxpb-tabnav-breath {
    0%, 100% {
        border-color: var(--focus-color, #f04494);
        box-shadow: 0 0 0 0 var(--focus-color-opacity3, rgba(240, 68, 148, 0.3));
    }
    50% {
        border-color: var(--focus-color-opacity3, rgba(240, 68, 148, 0.3));
        box-shadow: 0 0 0 5px var(--focus-color-opacity3, rgba(240, 68, 148, 0.3));
    }
}
ul.tab-nav-theme li.mugcxpb-tabnav-hint > a,
div.swiper-tab-nav li.mugcxpb-tabnav-hint > a,
ul.swiper-wrapper li.mugcxpb-tabnav-hint > a,
div.swiper-wrapper li.mugcxpb-tabnav-hint > a,
.swiper-slide.mugcxpb-tabnav-hint > a {
    animation: mugcxpb-tabnav-breath 3.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    ul.tab-nav-theme li.mugcxpb-tabnav-hint > a,
    div.swiper-tab-nav li.mugcxpb-tabnav-hint > a,
    ul.swiper-wrapper li.mugcxpb-tabnav-hint > a,
    div.swiper-wrapper li.mugcxpb-tabnav-hint > a,
    .swiper-slide.mugcxpb-tabnav-hint > a {
        animation: none !important;
        border-color: var(--focus-color, #f04494) !important;
    }
}

/* ============================================================
   十三、瀑布流错开 v3（1.9.16）
   ------------------------------------------------------------
   需求方："在保证不冲突的情况下再错开一点，但上下间距不要太多。"
   ★ 关键换法：错开从 **margin** 换成 **transform: translateY(20px)** ——
     · margin 会把"错开幅度"加进每行高度（错开 22px = 每行多高 22px = 上下间距变大）；
     · transform 是纯视觉位移，**不占布局空间**：行高不变、上下间距保持 16px，
       却能把错开加到 20px；
     · 与 FLIP **天然不冲突**：FLIP 按 getBoundingClientRect 计算位移（矩形里已含这 20px），
       动画期间的内联 transform 覆盖 CSS 的，结束时清除、CSS 的自动恢复 —— 不会有跳变；
     · 同一列上下都是奇位、都下移 20px → 相对间隙不变，**不会互相覆盖**；
       墙底给 24px 内边距，避免最后一行的下移被裁。
   仍保留：第一行平行（5 列从第 6 张、4 列第 5 张、3 列第 4 张、2 列第 3 张）、
   上下 16px / 左右 9px、行底齐平（默认 stretch、无洞）。
   ============================================================ */
.mugcxpb-posts-section .mugcxpb-masonry {
    row-gap: 16px;
    column-gap: 9px;
    padding-bottom: 24px;
}
/* 桌面大屏：5 列 —— 第一行 1–5 平行 */
@media (min-width: 1200px) {
    .mugcxpb-posts-section .mugcxpb-masonry > *:nth-child(n+6):nth-child(odd) {
        transform: translateY(20px);
    }
    /* 侧栏展开 → 4 列：第一行 1–4 平行 */
    html:not(.mugcxpb-sidebar-collapsed) body.mugcxpb-xhs-layout #forum .container:has(.sidebar > *) .mugcxpb-masonry > *:nth-child(n+5):nth-child(odd) {
        transform: translateY(20px);
    }
}
/* 桌面小屏：3 列 —— 第一行 1–3 平行 */
@media (min-width: 992px) and (max-width: 1199px) {
    .mugcxpb-posts-section .mugcxpb-masonry > *:nth-child(n+4):nth-child(odd) {
        transform: translateY(20px);
    }
}
/* 平板与手机：2 列 —— 第一行 1–2 平行 */
@media (max-width: 991px) {
    .mugcxpb-posts-section .mugcxpb-masonry > *:nth-child(n+3):nth-child(odd) {
        transform: translateY(20px);
    }
}