@charset "UTF-8";
/**
 * EL9拼好题 — Twitter 版式 × Apple 规范
 *
 * 栅格：8pt。字号：11 / 13 / 15 / 17 / 20 / 23 / 28 / 34。
 * 动效：cubic-bezier(.4, 0, .2, 1)，时长 180ms。
 * 点击区：不小于 44×44（iOS HIG）。
 *
 * @package EL9拼好题
 * @author Ayiya
 * @version 0.8.33
 */

/* ==========================================================================
   1. Design Tokens
   ========================================================================== */

:root {
    /*
     * 告诉浏览器本站是浅色的 —— 深色模式下滚动条、<select>、自动填充底色、
     * textarea 右下角那个拖拽角才会跟着变。少了这一行它们永远是白的。
     */
    color-scheme: light;
    /* 强调色分三级，别只有一个蓝：
       accent        —— 图标、边框、进度条这类非文字元素（3:1 就够）
       accent-text   —— 正文里的链接、小字号强调（白底 5.01:1，AA 达标）
       accent-strong —— 实心按钮底色（配白字 5.01:1，AA 达标） */
    --el9-accent: #1d9bf0;
    --el9-accent-text: #1674b4;
    --el9-accent-strong: #1674b4;
    --el9-accent-soft: rgba(29, 155, 240, .1);
    --el9-accent-contrast: #fff;
    --el9-danger: #f4212e;
    --el9-danger-text: #c81e28;

    --el9-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro SC", "SF Pro Text", "PingFang SC",
        "Segoe UI Variable Text", "Segoe UI", "Hiragino Sans GB", "Microsoft YaHei",
        "Noto Sans SC", sans-serif;
    --el9-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        "Liberation Mono", "Courier New", monospace;

    /* 8pt spacing scale */
    --el9-1: 4px;
    --el9-2: 8px;
    --el9-3: 12px;
    --el9-4: 16px;
    --el9-5: 20px;
    --el9-6: 24px;
    --el9-8: 32px;
    --el9-10: 40px;

    --el9-r-sm: 8px;
    --el9-r-md: 12px;
    --el9-r-lg: 16px;
    --el9-r-xl: 20px;
    --el9-r-full: 999px;

    --el9-ease: cubic-bezier(.4, 0, .2, 1);
    --el9-dur: 180ms;

    /*
     * 页面四周的留白（内容到窗口边）。
     *
     * 左右和顶部共用这一个值 —— 视觉上「四周一样宽」靠的就是它，
     * 以前左右是 shell 的 padding、顶部是 layout 的 padding，两个数各改各的，
     * 很容易一处 24 一处 12。导航条那条通栏背景也靠它算负边距，别单独写死数字。
     */
    --el9-bleed: 12px;

    /*
     * 右下角那两颗悬浮钮（手机「菜单」、电脑「返回顶部」）平时的透明度。
     *
     * 它们压在正文上，一直是实心的就显突兀 —— 尤其文章页正文是浅底的时候，
     * 两颗圆钮像贴了张膏药。0.7 是「看得见但不抢内容」的档；
     * 指针移上去回到 1，手感上就是「靠近才亮起来」。
     *
     * 两颗钮共用这一个值，别分开写，不然一个淡一个浓。
     */
    --el9-fab-alpha: .7;

    /* 侧栏盒宽（含靠内侧那 12px 内边距，卡片实际宽度要减掉它） */
    --el9-side-w: 280px;
    --el9-main-w: 720px;

    /*
     * 整页容器的宽度 = 侧栏 + 中间的缝 + 主栏 + 两侧留白。
     *
     * 以前这个值由 PHP 的 el9ShellWidth() 算好、内联写进 <head>，
     * 算的是「侧栏 296 + 内边距 24」，可 CSS 里侧栏实际只有 280 ——
     * 于是一直多让出 52px：后台设 720，主栏实际被撑到 772，
     * 右边空出一条谁也说不清的带子。
     *
     * 现在只在 CSS 里算一次，而且全部引用同一个变量：
     * 改侧栏宽、改缝宽、改断点，都不会再出现「PHP 和 CSS 各算一套」。
     */
    --el9-shell-w: calc(
        var(--el9-side-w) + var(--el9-side-gap) + var(--el9-main-w) + var(--el9-bleed) * 2
    );
    /*
     * 主栏左右内边距。
     *
     * ⚠️ 这里必须是 0，别再给 28。
     * 原因：信息流卡片靠负 margin（-main-pad）把自己撑到主栏盒边，
     * 但轮播、标签栏这些没有负 margin —— 一旦 main-pad 不是 0，
     * 它们就会比卡片两边各缩进 28px，「内容区右侧和侧栏对不齐」就是这么来的。
     * 归零之后，主栏里所有元素的宽度和左右边完全一致，缝也就恒定了。
     *
     * 留白交给 .el9-shell 的 padding 和卡片自己的 padding，文章页另有 .is-post 规则。
     */
    --el9-main-pad: 0;

    /*
     * 内容区和侧栏之间的缝，**总宽 25**，中间那条竖线把它劈成两半：
     * 12 + 1（线）+ 12。所以这里的 gap 只管线的左半边，右半边是下面的
     * --el9-side-pad —— 线两侧到内容、到侧栏卡片的距离一样，看着才是「居中」的。
     *
     * 所有断点共用这两个值，不再按宽度分档：
     * 缝在视觉上是否「大」，取决于主栏里的元素有没有对齐（见上面 --el9-main-pad），
     * 不是靠改 gap 能调出来的 —— 之前几版来回改的就是这个弯路。
     */
    --el9-side-gap: 12px;

    /* 竖线到侧栏卡片的那半边缝（另一半是上面的 gap） */
    --el9-side-pad: 12px;

    /* 顶部导航条的高度（内容 38 + 上下内边距 8×2）。
       侧栏和目录的 sticky 都要错开这个值，否则会被导航条盖住 */
    --el9-nav-h: 55px;

    /* Light */
    --el9-bg: #ffffff;
    --el9-bg-soft: #f7f9f9;
    --el9-bg-blur: rgba(255, 255, 255, .82);
    --el9-bg-hover: rgba(15, 20, 25, .055);
    --el9-bg-press: rgba(15, 20, 25, .1);
    --el9-text: #0f1419;
    --el9-text-2: #536471;
    /* 原 #8b98a5 在白底只有 2.94:1，达不到 WCAG AA（正文要 4.5:1）。
       这个色用在时间戳、简介、友链说明这些地方，读不清就是功能缺陷 */
    --el9-text-3: #68727d;
    --el9-border: #eff3f4;
    --el9-border-strong: #cfd9de;
    --el9-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 16px rgba(0, 0, 0, .04);
    --el9-skeleton: rgba(15, 20, 25, .06);

    /*
     * 提示框的五个语义色。每个色给两份：
     *   -c-xxx      原色，只当装饰用（1px 描边、5% 淡底）
     *   -c-xxx-ink  文字色，压暗过，保证白底 4.5:1
     * 别把原色直接给文字：#ff9500 在白底只有 2.20:1，#2080F0 也只有 3.88:1，
     * 当色块可以，当正文色不达标。
     */
    --el9-c-note: #2080f0;
    --el9-c-note-ink: #175cad;
    --el9-c-tip: #18a058;
    --el9-c-tip-ink: #11733f;
    --el9-c-warning: #ff9500;
    --el9-c-warning-ink: #a35f00;
    --el9-c-caution: #d03050;
    --el9-c-caution-ink: #96233a;
}

/*
 * 本主题只有亮色。
 *
 * 深色模式在 0.7.x 下线之后，这里还留着两套没用的色板：
 * 一套 @media (prefers-color-scheme: dark) + [data-theme="auto"]，
 * 一套 [data-theme="dark"]。它们不但没用，还会跟首屏那段前置脚本
 * 串起来出 bug —— 系统是深色的访客先看到黑底，脚本再把它掰回白色。
 * 现在连脚本带两套色板一起删了，:root 的 color-scheme 固定 light。
 */

/* ==========================================================================
   2. Base
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* 页面高度变化时滚动条出现/消失会让整页左右晃，先把坑占住 */
    scrollbar-gutter: stable;
}

/* 不支持的浏览器（旧 Safari）用常驻滚动条兜底 */
@supports not (scrollbar-gutter: stable) {
    html {
        overflow-y: scroll;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    margin: 0;
    background: var(--el9-bg);
    color: var(--el9-text);
    font-family: var(--el9-font-sans);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

a {
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

img,
svg {
    display: block;
    max-width: 100%;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

h1, h2, h3, h4 {
    margin: 0;
    font-weight: 700;
    letter-spacing: -.01em;
}

p {
    margin: 0;
}

/* 手机点按时的灰色高亮块去掉，点击反馈交给各控件自己的 hover/active */
* {
    -webkit-tap-highlight-color: transparent;
}

/*
 * 防止 iOS 上拉到底部时的橡皮筋把整页弹动（连吸顶栏一起晃）。
 * contain 只拦纵向链式滚动，不影响内部横向图条。
 */
body {
    overscroll-behavior-y: contain;
}

/* 全站统一焦点环。用 accent-text 更深一点，在白底上也看得清；
   不写死圆角，让焦点环贴着元素本来的形状 */
:focus-visible {
    outline: 2px solid var(--el9-accent-text);
    outline-offset: 2px;
}


/* 老浏览器没有 :focus-visible 时，退回 :focus（键盘鼠标都显示，宁可啰嗦） */
@supports not selector(:focus-visible) {
    :focus {
        outline: 2px solid var(--el9-accent-text);
        outline-offset: 2px;
    }
}

::selection {
    background: var(--el9-accent);
    color: var(--el9-accent-contrast);
}

.el9-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.el9-skip {
    position: absolute;
    top: -60px;
    left: var(--el9-3);
    z-index: 200;
    padding: 10px 16px;
    border-radius: var(--el9-r-full);
    background: var(--el9-accent);
    color: var(--el9-accent-contrast);
    font-size: 15px;
    font-weight: 600;
    transition: top var(--el9-dur) var(--el9-ease);
}

.el9-skip:focus {
    top: var(--el9-3);
}

/* ==========================================================================
   3. 通用组件
   ========================================================================== */

.el9-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: var(--el9-r-full);
    object-fit: cover;
    background: var(--el9-bg-soft);
}

.el9-avatar--text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(140deg, var(--el9-accent), color-mix(in srgb, var(--el9-accent) 60%, #7c4dff));
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0;
}

.el9-avatar--sm {
    width: 28px;
    height: 28px;
    min-width: 28px;
    font-size: 13px;
}

.el9-badge {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 var(--el9-2);
    border-radius: var(--el9-r-sm);
    background: var(--el9-accent-soft);
    color: var(--el9-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
}

.el9-dot {
    color: var(--el9-text-3);
}

.el9-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--el9-2);
    height: 40px;
    padding: 0 var(--el9-5);
    border: 1px solid var(--el9-border-strong);
    border-radius: var(--el9-r-full);
    background: transparent;
    color: var(--el9-text);
    font-size: 15px;
    font-weight: 600;
    transition: background var(--el9-dur) var(--el9-ease), border-color var(--el9-dur) var(--el9-ease),
        transform var(--el9-dur) var(--el9-ease);
}

.el9-btn:hover {
    background: var(--el9-bg-hover);
}

.el9-btn:active {
    transform: scale(.98);
}

/*
 * 实心按钮用 accent 原色，不用 accent-strong（压暗过的那档）。
 *
 * 后者配白字对比度更高（5.01:1），但跟「发表评论」那种主按钮不是一个颜色，
 * 同一个主题色在一页里出现深浅两种蓝，看着就是没跟上后台设置。
 * 统一用原色：15px/600 按大文本算，3:1 达标。
 */
.el9-btn--primary {
    background: var(--el9-accent);
    border-color: transparent;
    color: var(--el9-accent-contrast);
}

.el9-btn--primary:hover {
    filter: brightness(1.1);
}

.el9-input,
.el9-textarea {
    width: 100%;
    padding: 10px var(--el9-3);
    border: 1px solid var(--el9-border);
    border-radius: var(--el9-r-sm);
    background: var(--el9-bg);
    color: var(--el9-text);
    font-family: inherit;
    font-size: 15px;
    transition: border-color var(--el9-dur) var(--el9-ease), box-shadow var(--el9-dur) var(--el9-ease);
}

.el9-input:focus,
.el9-textarea:focus {
    outline: none;
    border-color: var(--el9-accent);
    box-shadow: 0 0 0 3px var(--el9-accent-soft);
}

.el9-icon {
    flex: none;
}

.el9-search {
    display: flex;
    align-items: center;
    gap: var(--el9-2);
    height: 44px;
    padding: 0 var(--el9-4);
    border: 1px solid transparent;
    border-radius: var(--el9-r-full);
    background: var(--el9-bg-soft);
    color: var(--el9-text-2);
    transition: background var(--el9-dur) var(--el9-ease), border-color var(--el9-dur) var(--el9-ease);
}

.el9-search:focus-within {
    background: var(--el9-bg);
    border-color: var(--el9-accent);
    color: var(--el9-accent);
}

.el9-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    color: var(--el9-text);
    font: inherit;
    font-size: 15px;
}

.el9-search input:focus {
    outline: none;
}

.el9-search--wide {
    max-width: 420px;
    margin: var(--el9-5) auto var(--el9-4);
    gap: var(--el9-3);
}

/* ==========================================================================
   4. 布局
   ========================================================================== */

.el9-shell {
    /* 跟着「内容区宽度」设置走，不然主栏会被 flex 压回去，后台调了也白调 */
    max-width: var(--el9-shell-w, 1248px);
    margin: 0 auto;
    padding: 0 var(--el9-bleed);
}

.el9-layout {
    display: flex;
    align-items: flex-start;
    /*
     * 两栏之间这条缝由布局自己给（gap），不再靠侧栏的 padding 挤出来。
     *
     * 注意别按主栏的 padding 去「补差」：信息流卡片带着负 margin，
     * 会把主栏那 28px 内边距整个吃掉，卡片右边缘正好落在主栏的盒边上。
     * 所以 gap 是多少，内容就到侧栏多少，各断点都别再调。
     */
    gap: var(--el9-side-gap);

    /*
     * 顶部留白放在这里，而不是各给主栏和侧栏一份 ——
     * 两栏都从这条线开始，**顶部必然齐平**，不管第一块是轮播、搜索头还是公告条。
     * 之前分开写，主栏那块的上边距一变（`:first-child` 归零、或某个断点把
     * main 的 padding-top 归零），两边就差一截，靠 JS 补是治标。
     *
     * 和左右共用 --el9-bleed，四周同一个量。
     */
    padding-top: var(--el9-bleed);
}

/* 底部栏和抽屉遮罩默认不出：宽屏靠侧栏和顶部导航，用不上它们 */
.el9-tabbar,
.el9-drawer-backdrop {
    display: none;
}

/* ---- 搜索浮层（顶栏 / 横幅按钮唤出） ---- */

.el9-searchbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh var(--el9-4) var(--el9-4);
}

.el9-searchbox[hidden] {
    display: none;
}

/* ---- 发布说说弹层（顶部「发布」按钮唤起） ---- */
.el9-composerbox {
    position: fixed;
    inset: 0;
    z-index: 210;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6vh var(--el9-4);
}

.el9-composerbox[hidden] {
    display: none;
}

.el9-composerbox-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 620px;
    max-height: 88vh;
    overflow-y: auto;
    border-radius: var(--el9-r-lg);
    background: var(--el9-bg);
    box-shadow: 0 24px 60px rgba(16, 24, 40, .18);
    -webkit-overflow-scrolling: touch;
}

.el9-composerbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 24, 40, .42);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.el9-composerbox-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: var(--el9-r-full);
    background: transparent;
    color: var(--el9-text-3);
    cursor: pointer;
}

.el9-composerbox-close:hover {
    background: var(--el9-bg-hover);
    color: var(--el9-text);
}

/* 弹层里的发布框去掉自己的卡片外观，外面那层已经是卡片了 */
.el9-composerbox .el9-composer {
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* 弹层打开时锁住页面滚动 */
body.is-composer-open {
    overflow: hidden;
}

/* 手机：从底部上滑 */
@media (max-width: 699px) {
    .el9-composerbox {
        align-items: flex-end;
        padding: 0;
    }

    .el9-composerbox-inner {
        max-width: none;
        max-height: 92vh;
        border-radius: var(--el9-r-lg) var(--el9-r-lg) 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}

.el9-searchbox-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--el9-3);
    width: min(620px, 100%);
    padding: 0 var(--el9-4);
    height: 58px;
    border: 1px solid var(--el9-border);
    border-radius: var(--el9-r-full);
    background: var(--el9-bg-blur);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .18);
    animation: el9-search-in 180ms var(--el9-ease);
}

@keyframes el9-search-in {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(.98);
    }
}

.el9-searchbox-inner > .el9-icon {
    flex: none;
    color: var(--el9-text-3);
}

.el9-searchbox-inner form {
    flex: 1;
    min-width: 0;
}

.el9-searchbox-inner input {
    width: 100%;
    height: 56px;
    border: 0;
    background: none;
    color: var(--el9-text);
    font-family: inherit;
    font-size: 16px;
    outline: none;
}

.el9-searchbox-inner input::placeholder {
    color: var(--el9-text-3);
}

.el9-searchbox-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: none;
    border: 0;
    border-radius: var(--el9-r-full);
    background: var(--el9-bg-hover);
    color: var(--el9-text-2);
    cursor: pointer;
    transition: background var(--el9-dur) var(--el9-ease), color var(--el9-dur) var(--el9-ease);
}

.el9-searchbox-close:hover {
    background: var(--el9-accent-soft);
    color: var(--el9-accent);
}

.el9-searchbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .34);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: el9-fade-in 180ms var(--el9-ease);
}

@keyframes el9-fade-in {
    from {
        opacity: 0;
    }
}

/* 浮层打开时锁滚动 */
body.is-search-open {
    overflow: hidden;
}

/* ---- 左栏（导航 + 挂件，合并为一条） ---- */

/* ---- 顶部轮播（首页 / 说说归档页）----
   用 transform 平移切换，不用 scroll-snap：
   scroll-snap 在末端往回拖一点就会被弹回去，而且跟 JS 改 scrollLeft 会打架 */
.el9-carousel {
    position: relative;
    margin: var(--el9-4) 0 0;
    border: 1px solid var(--el9-border);
    border-radius: var(--el9-r-lg);
    overflow: hidden;
    background: var(--el9-bg-soft);
}

/*
 * 轮播是内容区第一块时（首页最常见），它上面的 16px 外边距是多余的 ——
 * 主栏自己已经有 padding-top，两层叠起来就是 40px，看着一大条缝。
 * 只有前面还有公告条 / 归档标题时，这 16px 才是它跟上一块的呼吸，保留。
 */
.el9-main > .el9-carousel:first-child,
.el9-feed > .el9-carousel:first-child {
    margin-top: 0;
}

/*
 * 轮播前面有公告条时，两者之间只需要一个间距（公告自己带 16px 上边距）。
 * 不加这条的话，公告 16px + 轮播 16px 会叠出 32px。
 */
.el9-notice + .el9-carousel {
    margin-top: var(--el9-3);
}

.el9-carousel-track {
    display: flex;
    /* 每张铺满整条，靠 translateX 整屏地推 */
    transition: transform 420ms var(--el9-ease);
    will-change: transform;
}

.el9-carousel-slide {
    flex: 0 0 100%;
    min-width: 0;
}

.el9-carousel-link {
    position: relative;
    display: block;
    aspect-ratio: 21 / 9;
    text-decoration: none;
    color: #fff;
}

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

/* 没配图时的占位，跟网格卡片的空态一个路数 */
.el9-carousel-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, var(--el9-accent) 0%, #8b5cf6 60%, #ec4899 100%);
    color: rgba(255, 255, 255, .82);
}

/* 标题压在底部，加一层暗角保证白字读得清 */
.el9-carousel-cap {
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--el9-10) var(--el9-5) var(--el9-4);
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .55) 100%);
    pointer-events: none;
}

.el9-carousel-title {
    display: block;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -.01em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 左右箭头：跟说说横滑条那两颗用同一套长相 —— 浅色半透明圆 + 深色尖角 + 一层轻阴影 */
.el9-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    /*
     * 深色圆角块：压在封面上，白尖角比浅底深角更稳。
     * 浅底那版遇到白墙、天空这类浅封面时，按钮边界几乎看不出来。
     */
    border-radius: var(--el9-r-full);
    background: rgba(0, 0, 0, .5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
    /*
     * .55 常显，指针移上来才实体。
     *
     * 跟 .el9-img-strip-next / -prev 一模一样的数字 —— 这两处都是「压在图上的翻张钮」，
     * 数字不统一就会出现一种感觉：说说里的轻，轮播里的闷。
     *
     * 之前轮播用深底白箭头，单看没问题，但跟说说摆在一个页面里就是两套配色。
     * 长箭头换成尖角之后，浅底这一版已经不吃图了 —— 当初觉得突兀是因为那是一根
     * 14px 的实心横线压在封面上。
     */
    opacity: .8;
    transition: opacity var(--el9-dur) var(--el9-ease), background var(--el9-dur) var(--el9-ease);
}

.el9-carousel-btn.is-prev {
    left: var(--el9-3);
}

.el9-carousel-btn.is-next {
    right: var(--el9-3);
}

/*
 * 视觉上是 44px 的圆，但触摸目标要够 48px。
 * 用一个透明伪元素把命中区撑开，外观不变。
 */
.el9-carousel-btn::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
}

.el9-carousel-btn:hover,
.el9-carousel-btn:focus-visible {
    opacity: 1;
    background: rgba(0, 0, 0, .66);
}

/* 圆点 */
.el9-carousel-dots {
    position: absolute;
    inset: auto 0 var(--el9-3) 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.el9-carousel-dot {
    position: relative;
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: var(--el9-r-full);
    /* 半透明白在浅色图片上几乎看不见，加一圈暗描边托底 */
    background: rgba(255, 255, 255, .85);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .3);
    cursor: pointer;
    transition: background var(--el9-dur) var(--el9-ease), width var(--el9-dur) var(--el9-ease);
}

/*
 * 圆点本身只有 8px，指头点不准。
 * 用伪元素把可点区域撑到 44px 高（横向留 6px，避免相邻圆点互相压）。
 */
.el9-carousel-dot::after {
    content: '';
    position: absolute;
    inset: -18px -6px;
}

.el9-carousel-dot.is-active {
    width: 20px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
}

/* 有标题时圆点上移一点，别压在字上 */
.el9-carousel:has(.el9-carousel-cap) .el9-carousel-dots {
    bottom: var(--el9-2);
}

.el9-carousel.is-solo .el9-carousel-link {
    aspect-ratio: 16 / 7;
}

@media (max-width: 999px) {

    /*
     * 窄屏没有顶部导航条，但顶部不能贴屏幕上沿 ——
     * 和左右一样留 12，四周才是同一个量。
     */
    .el9-layout {
        padding-top: var(--el9-bleed);
    }

    /*
     * 单栏：轮播图按宽度撑满、高度跟着原图走，不裁切。
     *
     * 原来固定 16/10 + object-fit: cover，图片比例一不对就把两侧切掉 ——
     * 手机上最常见的就是封面上的标题被切掉半截。
     *
     * ⚠️ 必须同时给 min-height。
     * 高度一旦完全交给图片，图没加载出来（地址失效、外链慢、断网）时
     * img 的高度是 0 —— 整条轮播会塌成一条线，看着像「轮播没了」。
     * 180px 是兜底值：正常图片按原比例撑开，远高于它，不影响观感。
     */
    .el9-carousel-link {
        aspect-ratio: auto;
        min-height: 180px;
    }

    .el9-carousel-img {
        height: auto;
        min-height: 180px;
    }

    /* 没有图时那层渐变占位同样要撑住（它的 height:100% 在自适应容器里算不出来） */
    .el9-carousel-ph {
        min-height: 180px;
    }

    /* 单栏不摆左右箭头：手指直接划，箭头只会挡住图 */
    .el9-carousel-btn {
        display: none;
    }

    .el9-carousel-title {
        font-size: 15px;
    }
}

/* 系统开了减弱动效就不自动播、切换也不做位移动画 */
/*
 * 轮播是内容区第一块时（首页最常见），它上面的 16px 外边距是多余的 ——
 * 顶部那 12px 由 .el9-layout 给，两层叠起来就是一道大缝。
 * 只有前面还有公告条时，这 16px 才是它跟上一块的呼吸。
 *
 * ⚠️ 这两条原来被写在 `@media (prefers-reduced-motion: reduce)` 里面
 * （大概是某次改动把新增规则插进了媒体查询块中段），于是**只有开了
 * 「减弱动态效果」的系统才生效** —— 大多数设备上轮播首块照样带 16px。
 */
.el9-main > .el9-carousel:first-child,
.el9-feed > .el9-carousel:first-child {
    margin-top: 0;
}

.el9-notice + .el9-carousel {
    margin-top: var(--el9-3);
}

/* 系统开了减弱动效就不做位移动画（只留这一条在这个媒体查询里） */
@media (prefers-reduced-motion: reduce) {
    .el9-carousel-track {
        transition: none;
    }
}

/* ---- 侧栏：最新评论 ---- */

.el9-panel-empty {
    margin: 0;
    font-size: 13px;
    color: var(--el9-text-3);
}

.el9-comment-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    /* 12px 时两条评论糊在一起，头像几乎挨着上一段正文 */
    gap: var(--el9-4);
}

.el9-comment-item {
    display: flex;
    gap: var(--el9-2);
    align-items: flex-start;
}

.el9-comment-avatar {
    flex: none;
    line-height: 0;
}

.el9-comment-main {
    min-width: 0;
    flex: 1;
}

.el9-comment-link {
    display: block;
    text-decoration: none;
    color: var(--el9-text);
}

.el9-comment-link:hover .el9-comment-text {
    color: var(--el9-text);
}

.el9-comment-author {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--el9-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 名字和时间同一行，时间靠右（参考主流站点的评论列表） */
.el9-comment-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--el9-2);
}

/* 中间多了个身份标：auto 外边距吃掉剩余空间，时间还是贴右边，
   名字和标紧挨着 —— 光靠 space-between 会把标摆到正中间 */
.el9-comment-head .el9-comment-time {
    margin-left: auto;
}

/* 名字长了要能缩，不缩就把标和时间挤出侧栏 */
.el9-comment-head .el9-comment-author {
    min-width: 0;
    flex: 0 1 auto;
}

/* 侧栏比正文窄，标跟着小一号，否则「神秘人」三个字会顶掉时间 */
.el9-comment-head .el9-cmt-badge {
    flex: none;
    font-size: 10px;
    padding: 2px 6px;
    /* 基线对齐会让小标浮在名字上方，改成跟着字面走 */
    align-self: center;
}

.el9-comment-time {
    flex: none;
    font-size: 11px;
    color: var(--el9-text-3);
}

.el9-comment-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
    margin-top: 2px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--el9-text-2);
    overflow-wrap: break-word;
    word-break: break-word;
}

/* 摘要里的表情：跟着 12.5px 的字走，别把两行的高度撑开 */
.el9-comment-text .el9-emoji {
    height: 1.15em;
    max-width: 2.2em;
    margin: 0 1px;
    vertical-align: -0.18em;
}


/* ---- 返回顶部悬浮按钮 ----
   只在电脑端出现；手机端在 999px 断点里整颗关掉（底部有固定导航条，
   右下角再飘一个按钮既挤又挡内容）。 */
.el9-backtop {
    position: fixed;
    right: var(--el9-5);
    bottom: var(--el9-8);
    z-index: 50;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--el9-border);
    border-radius: var(--el9-r-full);
    background: var(--el9-bg-blur);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--el9-text-2);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--el9-dur) var(--el9-ease), transform var(--el9-dur) var(--el9-ease),
        background var(--el9-dur) var(--el9-ease), visibility var(--el9-dur);
}

.el9-backtop.is-show {
    /* 显示时也只到「半透明」这一档，指针移上去才回到完全实心 */
    opacity: var(--el9-fab-alpha);
    visibility: visible;
    transform: translateY(0);
}

.el9-backtop:hover {
    opacity: 1;
    background: var(--el9-bg);
    color: var(--el9-accent-text);
}

/* 箭头（↑ 用 icon 画） */
.el9-backtop::before {
    content: '';
    width: 14px;
    height: 14px;
    border-left: 2px solid currentColor;
    border-top: 2px solid currentColor;
    transform: rotate(45deg) translate(2px, 2px);
}

/* 视觉 40px，命中区撑到 44px */
.el9-backtop::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
}

/* ---- 手机端呼出菜单的悬浮钮 ----
   桌面端用不上（顶部有整条站点导航），只在 ≤999 出现；
   点它打开抽屉，抽屉里第一块是「导航菜单」配的那几项（见 header.php）。 */
.el9-fab {
    display: none;
}

@media (max-width: 999px) {
    .el9-fab {
        position: fixed;
        /* 和返回顶部那颗右对齐，两颗钮排在同一条竖线上 */
        right: var(--el9-5);
        /* 底部栏 52 + iPhone 那条横条 + 一点呼吸 */
        bottom: calc(52px + env(safe-area-inset-bottom, 0px) + var(--el9-3));
        z-index: 50;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: 1px solid var(--el9-border);
        border-radius: var(--el9-r-full);
        background: var(--el9-bg-blur);
        backdrop-filter: saturate(180%) blur(10px);
        -webkit-backdrop-filter: saturate(180%) blur(10px);
        color: var(--el9-text-2);
        box-shadow: var(--el9-shadow);
        cursor: pointer;
        /* 和返回顶部那颗同一个透明度档（见 :root 的 --el9-fab-alpha） */
        opacity: var(--el9-fab-alpha);
        transition: transform var(--el9-dur) var(--el9-ease),
            color var(--el9-dur) var(--el9-ease),
            opacity var(--el9-dur) var(--el9-ease);
    }

    .el9-fab:active {
        /* 触屏没有 hover，按下这一下就拉到实心，给个「点到了」的反馈 */
        opacity: 1;
        transform: scale(.96);
    }

    .el9-fab:hover {
        opacity: 1;
        color: var(--el9-text);
    }
}

/* ---- 抽屉里的站点导航 ----
   桌面端这条导航在页面顶部，抽屉里再摆一遍是重复的，所以默认不显示。 */
.el9-sidenav {
    display: none;
}

@media (max-width: 999px) {
    /*
     * 抽屉里只放导航菜单。
     *
     * 侧栏那些挂件（名片、最新评论、热门标签、分类）在手机上没人滑开抽屉去看 ——
     * 底部栏和内容区已经够用，抽屉里塞一堆只会让人多点两下。
     */
    .el9-side .el9-rail {
        display: none;
    }

    .el9-sidenav {
        display: block;
    }

    /* 小标题：给这列东西一个名字，别让人以为是挂件 */
    .el9-sidenav-title {
        margin: 0 0 var(--el9-2);
        padding: 0 10px;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .08em;
        color: var(--el9-text-3);
    }

    .el9-sidenav-list {
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .el9-sidenav-list a {
        display: flex;
        align-items: center;
        gap: var(--el9-3);
        padding: 12px 10px;
        border-radius: var(--el9-r-sm);
        color: var(--el9-text);
        font-size: 16px;
        text-decoration: none;
        transition: background var(--el9-dur) var(--el9-ease),
            color var(--el9-dur) var(--el9-ease);
    }

    .el9-sidenav-list a:hover,
    .el9-sidenav-list a:active {
        background: var(--el9-bg-hover);
    }

    /* 当前页：底色 + 强调色文字，扫一眼就知道自己在哪儿 */
    .el9-sidenav-list a.is-active {
        background: var(--el9-bg-hover);
        color: var(--el9-accent-text);
        font-weight: 600;
    }

    .el9-sidenav-list .el9-icon {
        flex: none;
        color: var(--el9-text-3);
    }

    .el9-sidenav-list a.is-active .el9-icon {
        color: var(--el9-accent-text);
    }
}

.el9-backtop:focus-visible {
    outline: 2px solid var(--el9-accent-text);
    outline-offset: 2px;
}

/* ---- 站点导航（顶部横条，原来在侧边栏）---- */

.el9-sitenav {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: var(--el9-4);
    margin: 0 calc(var(--el9-bleed) * -1);
    padding: var(--el9-2) var(--el9-bleed);
    border-bottom: 1px solid var(--el9-border);
    /* 浅色底 + 毛玻璃：滚起来时下面的内容会从底下透过去，不显脏 */
    background: var(--el9-bg-blur);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
}

/* el9Nav() 原本是给侧栏写的：.el9-nav-inner 是纵向 flex + 16px 间距，
   里面还挂着 .el9-nav-foot（主题切换 / RSS / 登录）。搬到顶部必须整个掰成横排，
   否则导航项和下面那排图标会竖着堆起来，导航条高度直接爆掉 */
.el9-sitenav .el9-nav {
    min-width: 0;
    flex: 1;
    padding: 0;
}

.el9-sitenav .el9-nav-inner {
    flex-direction: row;
    align-items: center;
    gap: 0;
    min-width: 0;
}

/* 侧栏里是竖排，顶部改成横排 */
.el9-sitenav .el9-nav-list {
    display: flex;
    /* 必须显式写 row：基础规则里 .el9-nav-list 自带 flex-direction: column，
       只写 display:flex 覆盖不掉它，导航项照样竖着排 */
    flex-direction: row;
    align-items: center;
    gap: var(--el9-1);
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}

.el9-sitenav .el9-nav-list::-webkit-scrollbar {
    display: none;
}

/* 顶部右侧已经有自己的一排工具图标了，侧栏那套（带分隔线的）不再重复摆 */
.el9-sitenav .el9-nav-foot {
    display: none;
}

.el9-sitenav .el9-nav-item {
    flex: none;
    height: 38px;
    padding: 0 var(--el9-3);
    white-space: nowrap;
}

/* 横排时文字按内容宽度走，别撑开 */
.el9-sitenav .el9-nav-item span {
    flex: none;
}

.el9-sitenav-tools {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--el9-1);
}

.el9-sitenav-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: var(--el9-r-full);
    background: transparent;
    color: var(--el9-text-2);
    cursor: pointer;
    transition: background var(--el9-dur) var(--el9-ease), color var(--el9-dur) var(--el9-ease);
}

.el9-sitenav-tool:hover {
    background: var(--el9-bg-hover);
    color: var(--el9-text);
}

/* 汉堡（头像按钮）：桌面端不需要，手机端导航走的是底部栏 —— 所以现在两头都不露，
   只在以后想把导航搬回顶部时才有用。别看到 display:none 就以为是 bug */
.el9-sitenav-tool--menu {
    display: none;
}

.el9-sitenav-tool:focus-visible {
    outline: 2px solid var(--el9-accent-text);
    outline-offset: 2px;
}

/*
 * 导航按钮里每个只放一个图标（图标是实心的，颜色跟着 color 走）。
 * 这里原来有一套「深浅两个图标只显示一个」的规则（.el9-icon:first-child / :last-child
 * 配 :root[data-theme=dark]），现在已经没有双图标的按钮了 —— 留着反而危险：
 * 哪天某个按钮里的图标不是首个子元素，就会被 display:none 吃掉，图标凭空消失。
 */

/* ---- 名片挪进侧边栏后的尺寸适配 ----
   原来在主栏（880px 宽），现在只有 296px，头像和横幅都得收 */
.el9-rail .el9-banner {
    /* 外边距归零：侧栏是 flex 列，兄弟之间本来就有 gap(16)。
       再给一个 margin-bottom 就是双份间距，名片和下面那块被撑开一大截 */
    margin-bottom: 0;
    border: 1px solid var(--el9-border);
    border-radius: var(--el9-r-lg);
    overflow: hidden;
    background: var(--el9-bg);
}

/* 横幅按固定高度，不按比例：侧栏内宽只有 248px，3:1 换算出来才 83px 高，
   头像压上去几乎顶满，看着就错位。118px 比之前 96 再放宽一点，头像和文字都不那么挤 */
.el9-rail .el9-banner-cover {
    height: 118px;
}

/* 顶部导航条已经有搜索 / 邮件 / RSS 了，名片右上角这排按钮收起来，
   不然两个 36px 的圆按钮要挤掉窄横幅三分之一的宽度 */
.el9-rail .el9-banner-tools {
    display: none;
}

.el9-rail .el9-banner-body {
    /* 左右留 16；底部从 20 收到 12 —— 统计条下面空一大块，
       名片看着像没写完，标题下面就直接断在半空 */
    padding: 0 var(--el9-4) var(--el9-3);
    /* 居中排布：头像左对齐时右边空一大块，名片看着像没做完 */
    text-align: center;
}

/* 侧栏名片头像 76px，上移 41px ≈ 自身一半（含 3px 白边），正好骑在横幅下沿。
   原来是 64px，在 300px 宽的侧栏里只占两成，显得局促 */
.el9-rail .el9-banner-avatar {
    width: 76px;
    height: 76px;
    /* 上下照旧（骑在封面上），左右 auto 让它水平居中 */
    margin: -41px auto var(--el9-3);
    border-width: 3px;
}

.el9-rail .el9-banner-avatar-link {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--el9-r-full);
    text-decoration: none;
}

.el9-rail .el9-banner-avatar-link:focus-visible {
    outline: 2px solid var(--el9-accent-text);
    outline-offset: 2px;
}

.el9-rail .el9-banner-avatar.el9-avatar--text,
.el9-rail .el9-banner-avatar .el9-avatar--text {
    font-size: 22px;
}

.el9-rail .el9-banner-name strong {
    font-size: 17px;
}

.el9-rail .el9-banner-name span {
    font-size: 12.5px;
}

.el9-rail .el9-banner-bio {
    margin-top: var(--el9-3);
    font-size: 13px;
    line-height: 1.65;
}

/* 统计三列均分，用一条细线跟上面的签名隔开 —— 侧栏窄，靠间距分不开层次。
   上下各留 14，比之前宽松 */
.el9-rail .el9-banner-stat {
    gap: 0;
    margin: var(--el9-4) 0 0;
    padding-top: var(--el9-3);
    border-top: 1px solid var(--el9-border);
}

.el9-rail .el9-banner-stat li {
    flex: 1;
    padding: 0;
    justify-content: center;
    text-align: center;
}

.el9-rail .el9-banner-stat strong {
    font-size: 15px;
}

.el9-rail .el9-banner-stat span {
    font-size: 10.5px;
}

/* ---- 侧栏「我们的故事」入口 ----
   挂在名片下面，认得出访客才出现。按他的意思**不做成按钮**：
   名片下面再来一个带框的方块，整块侧栏就太"重"了，
   一行「👋 昵称 你好呀 →」读起来像招呼，点点就进去 */
.el9-myentry {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    /* 不加内边距，跟名片底部留出的那点气口对齐 */
    padding: 0;
    border: 0;
    background: none;
    color: var(--el9-text-2);
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
    transition: color .18s ease;
}

.el9-myentry:hover {
    color: var(--el9-accent-text);
}

.el9-myentry:focus-visible {
    outline: 2px solid var(--el9-accent-text);
    outline-offset: 3px;
    border-radius: var(--el9-r-sm);
}

/* 名字可能很长（有人昵称就是一串英文），截断别把箭头挤出去 */
.el9-myentry-text {
    min-width: 0;
    max-width: 13em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.el9-myentry-hi {
    color: var(--el9-text-3);
}

/* 右边这个小箭头是「能点进去」的唯一暗示 —— 文字换成了名字，
   光看名字谁也想不到它是个入口 */
.el9-myentry-go {
    display: inline-flex;
    align-items: center;
    color: var(--el9-text-3);
    transition: transform .18s ease, color .18s ease;
}

.el9-myentry:hover .el9-myentry-go {
    color: var(--el9-accent-text);
    transform: translateX(2px);
}

/*
 * 挥手的 👋
 *
 * emoji 是字体字形，默认绕自身中心转 —— 看着像在原地打圈。
 * transform-origin 挪到右下角（手腕位置）才像在挥手。
 *
 * 节奏：前 1.3 秒摆几下，然后停到 2.8 秒再摆 —— 一直高频抖动很吵。
 * 侧栏入口和「我们的故事」页抬头共用这一个类。
 */
.el9-wave {
    display: inline-block;
    transform-origin: 70% 85%;
    animation: el9-wave 2.8s ease-in-out infinite;
}

.el9-myentry-wave {
    font-size: 15px;
    line-height: 1;
}

@keyframes el9-wave {
    0%   { transform: rotate(0deg); }
    8%   { transform: rotate(14deg); }
    16%  { transform: rotate(-6deg); }
    24%  { transform: rotate(12deg); }
    32%  { transform: rotate(-4deg); }
    40%  { transform: rotate(9deg); }
    48%  { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}

/* 关了动效的机器（前庭功能敏感 / 省电模式）就别摆了 */
@media (prefers-reduced-motion: reduce) {
    .el9-wave {
        animation: none;
    }
}

.el9-side {
    flex: 0 0 var(--el9-side-w);
    width: var(--el9-side-w);
    /* 缝的左半边由 .el9-layout 的 gap 给，右半边在这里；竖线正好落在两半中间 */
    padding: 0 var(--el9-side-pad) var(--el9-8) 0;
    border-right: 1px solid var(--el9-border);
}

@media (min-width: 1000px) {
    /*
     * 侧栏：先跟随页面滚，内容全部露出后钉住。
     *
     * 关键在 top 值 = 视口高 − 侧栏高（侧栏高度由 JS 写进 --el9-side-h，
     * 只在尺寸变化时更新一次，滚动时不跑 JS）。
     * 侧栏比视口高时这个值是负数，sticky 允许元素顶边顶到视口上方那么多，
     * 于是滚过那段距离后它就停住 —— 正好是「露出底部后钉住」。
     *
     * 之前用 JS 在滚动里读 getBoundingClientRect + 写 transform，
     * 每帧强制同步布局，结果一滚就抖。交给原生 sticky 就不抖了。
     * 兜底：变量没值的时候 top = 0，退化成常规的顶部吸附。
     */
    .el9-side {
        position: sticky;
        top: calc(100vh - var(--el9-side-h, 100vh));
    }
}

/* ---- 侧栏挪到右边（后台「侧栏位置」选了右边）----
   用 row-reverse 而不是改 DOM 顺序：源文件里侧栏在前面，
   键盘和读屏的浏览顺序还是「导航 → 正文」，这才是合理的顺序 */
@media (min-width: 1000px) {
    body.is-side-right .el9-layout {
        flex-direction: row-reverse;
    }

    /* 侧栏挪到右边时，竖线和内边距一起换到左边，缝的算法不变 */
    body.is-side-right .el9-side {
        padding: 0 0 var(--el9-8) var(--el9-side-pad);
        border-right: 0;
        border-left: 1px solid var(--el9-border);
    }
}

.el9-side::-webkit-scrollbar {
    width: 6px;
}

.el9-side::-webkit-scrollbar-thumb {
    background: var(--el9-border-strong);
    border-radius: 3px;
}

.el9-side::-webkit-scrollbar-track {
    background: transparent;
}

.el9-link {
    display: flex;
    align-items: center;
    gap: var(--el9-3);
    padding: var(--el9-2);
    border-radius: var(--el9-r-sm);
    color: var(--el9-text);
    text-decoration: none;
    transition: background var(--el9-dur) var(--el9-ease);
}

.el9-link:hover {
    background: var(--el9-bg-hover);
}

.el9-link-logo {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: var(--el9-r-sm);
    border: 1px solid var(--el9-border);
    background: var(--el9-bg-soft);
    overflow: hidden;
    line-height: 0;
}

.el9-link-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 拿不到 logo 时用站点名首字 */
.el9-link-logo b {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 15px;
    font-weight: 700;
    color: var(--el9-text-3);
}

.el9-link-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.el9-link-text strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--el9-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.el9-link-text span {
    font-size: 12px;
    color: var(--el9-text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.el9-link:hover .el9-link-text strong {
    color: var(--el9-accent);
}

/* ---- 友情链接独立页（page-links.php，版式参考 pix） ---- */

.el9-links-total {
    font-size: 13px;
    font-weight: 600;
    color: var(--el9-text-3);
    background: var(--el9-bg-soft);
    border-radius: var(--el9-r-full);
    padding: 3px 10px;
}

.el9-links-page {
    margin-top: var(--el9-4);
}

.el9-links-group + .el9-links-group {
    margin-top: var(--el9-6);
}

.el9-links-group-title {
    display: flex;
    align-items: center;
    gap: var(--el9-1);
    margin: 0 0 var(--el9-3);
    font-size: 14px;
    font-weight: 700;
    color: var(--el9-text-2);
}

.el9-links-group-title em {
    font-style: normal;
    font-size: 12px;
    font-weight: 600;
    color: var(--el9-text-3);
    background: var(--el9-bg-soft);
    border-radius: var(--el9-r-full);
    padding: 1px 8px;
}

/* 两列卡片，窄屏自动掉成一列 */
.el9-links-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--el9-2);
}

.el9-links-card {
    position: relative;
    display: flex;
    align-items: center;
    padding: var(--el9-2);
    border-radius: var(--el9-r-md);
    border: 1px solid var(--el9-border);
    background: var(--el9-bg);
    transition: border-color var(--el9-dur) var(--el9-ease),
                background var(--el9-dur) var(--el9-ease);
}

.el9-links-card:hover {
    border-color: var(--el9-border-strong);
    background: var(--el9-bg-soft);
}

.el9-links-card-main {
    display: flex;
    align-items: center;
    gap: var(--el9-3);
    min-width: 0;
    flex: 1 1 auto;
    color: var(--el9-text);
    text-decoration: none;
}

.el9-links-avatar {
    flex: none;
    position: relative;      /* 给右下角的在线状态点当定位参照 */
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--el9-r-sm);
    border: 1px solid var(--el9-border);
    background: var(--el9-bg);
    /*
     * 这里**不能** overflow: hidden —— 状态点故意压出头像边缘 2px，
     * 一裁就只剩个月牙。要裁的是里面的图，交给 img 自己的圆角。
     */
    overflow: visible;
    font-size: 18px;
    font-weight: 700;
    color: var(--el9-text-3);
}

/*
 * 在线状态点：绿 = 站点正常，红 = 已失效。
 * 数据来自 Links 插件的 state 字段（1 正常 / 2 失效），不用额外表。
 */
.el9-links-avatar::after {
    content: '';
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 11px;
    height: 11px;
    border-radius: var(--el9-r-full);
    border: 2px solid var(--el9-bg);
    background: #0cd07e;
    box-shadow: 0 0 0 1px rgba(12, 208, 126, .28);
}

.el9-links-card.is-off .el9-links-avatar::after {
    background: #ff5c77;
    box-shadow: 0 0 0 1px rgba(255, 92, 119, .28);
}

/* 失效的友链：整体压低，别跟正常站点抢注意力 */
.el9-links-card.is-off {
    background: var(--el9-bg-soft);
}

.el9-links-card.is-off .el9-links-card-main {
    cursor: default;
}

.el9-links-card.is-off .el9-links-avatar img,
.el9-links-card.is-off .el9-links-name {
    opacity: .55;
}

.el9-links-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 父级改成 overflow: visible 之后，圆角得由图片自己裁 */
    border-radius: inherit;
}

.el9-links-info {
    display: grid;
    min-width: 0;
}

.el9-links-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--el9-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color var(--el9-dur) var(--el9-ease);
}

.el9-links-desc {
    font-size: 12px;
    color: var(--el9-text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.el9-links-go {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: var(--el9-1);
    border-radius: var(--el9-r-full);
    background: var(--el9-bg);
    color: var(--el9-text-3);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity var(--el9-dur) var(--el9-ease),
                transform var(--el9-dur) var(--el9-ease),
                color var(--el9-dur) var(--el9-ease);
}

.el9-links-card:hover .el9-links-go {
    opacity: 1;
    transform: translateX(0);
    color: var(--el9-text);
}

.el9-links-apply {
    display: flex;
    align-items: center;
    gap: var(--el9-2);
    margin: var(--el9-8) 0 0;
    font-size: 13px;
    color: var(--el9-text-3);
}

@media (max-width: 640px) {
    .el9-links-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* 触屏没有 hover，直接常显，免得看不出能点 */
    .el9-links-go {
        opacity: 1;
        transform: none;
    }
}

/*
 * 侧栏两块之间的间距 —— 这里**不能**用 `.el9-side > * + *` 那种写法。
 *
 * ⚠️ 结构选择器（`+`、`~`、`:first-child`）**不看 display**。
 * 侧栏第一个孩子是手机抽屉的导航 nav（桌面 display:none），
 * 但它照样算「前一个兄弟」，于是名片卡被凭空推下 20 —— 主栏顶部齐、侧栏低 20，
 * 就是「距离还是不对」的全部原因。改成 `+ .el9-rail` 也没用，一样会匹配。
 *
 * 手机上那个 nav 和名片卡本来就不会同时出现（≤999 时名片卡整块隐藏），
 * 这条间距没有存在的必要，删掉。
 */

/* ---- 主页横幅 ---- */

.el9-banner {
    border: 1px solid var(--el9-border);
    border-radius: var(--el9-r-lg);
    background: var(--el9-bg-soft);
    overflow: hidden;
}

.el9-banner-cover {
    position: relative;
    height: 220px;
    background: var(--el9-skeleton);
}

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

.el9-banner-cover.is-fallback {
    background: linear-gradient(120deg, var(--el9-accent) 0%, #8b5cf6 55%, #ec4899 100%);
}

.el9-banner-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.08) 0%, transparent 40%, rgba(0,0,0,.22) 100%);
    pointer-events: none;
}

.el9-banner-tools {
    position: absolute;
    top: var(--el9-3);
    right: var(--el9-3);
    z-index: 2;
    display: flex;
    gap: var(--el9-2);
}

.el9-banner-tool {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--el9-r-full);
    border: 1px solid rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    transition: background var(--el9-dur) var(--el9-ease);
}

.el9-banner-tool:hover {
    background: rgba(255, 255, 255, .32);
    color: #fff;
}

.el9-banner-body {
    position: relative;
    padding: 0 var(--el9-5) var(--el9-5);
}

/* 退出登录：名片主体右上角那颗小圆按钮（只有登录后才有）
   放这儿而不是 .el9-banner-tools —— 那个区块在侧栏是 display:none 的。 */
.el9-banner-out {
    position: absolute;
    top: 2px;
    right: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--el9-border);
    background: var(--el9-bg);
    color: var(--el9-text-3);
    text-decoration: none;
    transition: color var(--el9-dur) var(--el9-ease),
                border-color var(--el9-dur) var(--el9-ease),
                background var(--el9-dur) var(--el9-ease);
}

.el9-banner-out:hover {
    color: var(--el9-c-caution-ink);
    border-color: color-mix(in srgb, var(--el9-c-caution) 45%, var(--el9-border));
    background: color-mix(in srgb, var(--el9-c-caution) 7%, var(--el9-bg));
}

.el9-banner-out .el9-icon {
    display: block;
    pointer-events: none;
}

.el9-banner-avatar {
    position: relative;
    z-index: 3;
    width: 88px;
    height: 88px;
    margin-top: -44px;
    margin-bottom: var(--el9-3);
    border-radius: var(--el9-r-full);
    border: 4px solid var(--el9-bg);
    background: var(--el9-bg);
    /*
     * 这里**不能**用 overflow: hidden。
     * 它配 border-radius: 100% 等于给容器套了个圆形裁切，
     * 而右下角那个在线绿点是故意超出容器 3px 的（要压在头像边缘上），
     * 一裁就只剩个绿色小月牙。头像图自己已经有 border-radius 收圆了，
     * 文字头像在下面也单独补了，不需要容器再裁。
     */
    overflow: visible;
    line-height: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
}

.el9-banner-avatar .el9-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--el9-r-full);
}


.el9-banner-avatar.el9-avatar--text,
.el9-banner-avatar .el9-avatar--text {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    /* 容器不再 overflow: hidden（要给在线绿点留出口），文字头像得自己收圆 */
    border-radius: var(--el9-r-full);
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    background: var(--el9-accent);
    line-height: 1;
}

.el9-banner-name {
    display: flex;
    align-items: baseline;
    gap: var(--el9-2);
    color: inherit;
}

/* 侧栏名片里的站名也居中（它是 flex，光靠 text-align 管不到） */
.el9-rail .el9-banner-name {
    justify-content: center;
}

.el9-banner-name strong {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.el9-banner-name span {
    font-size: 14px;
    color: var(--el9-text-2);
}

.el9-banner-bio {
    margin: var(--el9-2) 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--el9-text-2);
}

.el9-banner-stat {
    display: flex;
    gap: var(--el9-6, 32px);
    margin: var(--el9-4) 0 0;
    padding: 0;
    list-style: none;
}

.el9-banner-stat li {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.el9-banner-stat strong {
    font-size: 19px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--el9-text);
}

.el9-banner-stat span {
    font-size: 13px;
    color: var(--el9-text-2);
}

/* ---- 主页公告条 ---- */

/* 公告条：摆在内容页顶部、轮播上方。
   早先它在侧边栏里，做成胶囊形；现在横跨整个内容区，改回圆角矩形更顺眼 */
.el9-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--el9-2);
    /*
     * 顶部不留外边距：这一条常常是列表页的第一块，
     * 上方那 12px 由 .el9-layout 统一给。原来这里还有 margin-top: 16，
     * 叠上去就是 28 —— 开了常驻公告，顶部就比别的页面宽一截。
     */
    margin: 0;
    padding: var(--el9-3) var(--el9-4);
    border-radius: var(--el9-r-md);
    border: 1px solid color-mix(in srgb, var(--el9-accent) 22%, transparent);
    background: color-mix(in srgb, var(--el9-accent) 8%, var(--el9-bg-soft));
    color: var(--el9-text);
}

.el9-notice p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    overflow-wrap: break-word;
    word-break: break-word;
}

.el9-notice .el9-icon {
    flex: 0 0 auto;
    color: var(--el9-accent);
}

/* ---- 站点标识与导航 ---- */

.el9-nav-inner {
    display: flex;
    flex-direction: column;
    gap: var(--el9-4);
}

.el9-nav-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.el9-nav-item {
    display: flex;
    align-items: center;
    gap: var(--el9-3);
    height: 40px;
    padding: 0 var(--el9-3);
    border-radius: var(--el9-r-sm);
    font-size: 15px;
    /* 菜单是导航主干，字重给够才有层级（500 在侧栏里跟正文混在一起） */
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--el9-text);
    transition: background var(--el9-dur) var(--el9-ease), color var(--el9-dur) var(--el9-ease);
}

.el9-nav-item > .el9-icon {
    color: var(--el9-text-2);
    transition: color var(--el9-dur) var(--el9-ease);
}

.el9-nav-item span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.el9-nav-item:hover {
    background: var(--el9-bg-hover);
}

.el9-nav-item:hover > .el9-icon,
.el9-nav-item.is-active > .el9-icon {
    color: var(--el9-accent);
}

.el9-nav-item.is-active {
    background: var(--el9-accent-soft);
    color: var(--el9-accent);
    font-weight: 700;
}

.el9-nav-count {
    flex: none;
    font-size: 12px;
    font-weight: 500;
    color: var(--el9-text-3);
    font-variant-numeric: tabular-nums;
}

.el9-nav-item.is-active .el9-nav-count {
    color: var(--el9-accent);
}

.el9-compose {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--el9-2);
    height: 44px;
    border-radius: var(--el9-r-sm);
    background: var(--el9-accent);
    color: var(--el9-accent-contrast);
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
    transition: filter var(--el9-dur) var(--el9-ease), transform var(--el9-dur) var(--el9-ease);
}

.el9-compose:hover {
    filter: brightness(1.06);
}

.el9-compose:active {
    transform: scale(.985);
}

/*
 * 抽屉底栏的小工具按钮（RSS）。
 * 原来和深浅色切换共用一组样式（.el9-theme-toggle, .el9-nav-mini），
 * 切换下线清理废弃样式时差点把这组一起带走 —— 这里单独留给它。
 */
.el9-nav-mini {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--el9-r-sm);
    color: var(--el9-text-2);
    transition: background var(--el9-dur) var(--el9-ease), color var(--el9-dur) var(--el9-ease);
}

.el9-nav-mini:hover {
    background: var(--el9-bg-hover);
    color: var(--el9-accent);
}

.el9-nav-foot {
    display: flex;
    align-items: center;
    gap: var(--el9-1);
    margin-top: 0;
    padding-top: var(--el9-3);
    border-top: 1px solid var(--el9-border);
}

/* ---- 主栏 ---- */

.el9-main {
    flex: 1 1 var(--el9-main-w);
    min-width: 0;
    padding: 0 var(--el9-main-pad) var(--el9-8);
    min-height: 100vh;
}

/*
 * 主内容区不画焦点环。
 *
 * 它挂着 tabindex="-1"，只为让「跳到主内容」那个锚点能把焦点送过来，
 * 本身不是可交互元素 —— 给它画框没有意义。
 *
 * 而 Edge 在这里有个额外动作：点开图片看大图、再按 Esc 关闭时，
 * 焦点会甩到最近的带 tabindex 的元素上（就是这一块），
 * 又因为最后一下是键盘，:focus-visible 成立，于是整个内容区被一个
 * 2px 蓝框圈住，看着像「整页被选中了」。
 */
.el9-main:focus,
.el9-main:focus-visible {
    outline: none;
}

.is-post .el9-main,
.is-page .el9-main,
.is-404 .el9-main {
    /* 左右留白同样只认 shell 那一层 */
    padding-left: 0;
    padding-right: 0;
}

/* 文章页顶部留白给足：之前 24px，标题几乎是贴着页面顶的，
   进来没有「进入一篇长文」的准备感 */
.is-post .el9-main,
.is-page .el9-main {
    /*
     * 顶部留白同样只认 .el9-layout 那一层。
     * 这里原来是「补到 40」，结果文章页和个人中心是 40、首页是 12，
     * 一换页就跳一下 —— 统一之后所有页面顶部都是 12。
     */
    padding-top: 0;
}

/* ---- 左栏挂件 ---- */

.el9-rail-inner {
    display: flex;
    flex-direction: column;
    gap: var(--el9-4);
}

.el9-rail .el9-search {
    height: 40px;
    border-color: var(--el9-border);
    border-radius: var(--el9-r-sm);
    background: var(--el9-bg);
}

.el9-panel {
    padding: var(--el9-4);
    border: 1px solid var(--el9-border);
    border-radius: var(--el9-r-md);
    background: var(--el9-bg-soft);
}

/* 不要外面那层框和底色，只留里面一个个标签（热门标签用） */
.el9-panel--plain {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.el9-panel--plain .el9-panel-title {
    padding-left: var(--el9-1);
    /* 侧栏这堆面板全是 --plain，这条比下面那条更具体，会盖掉它的 margin。
       原来这里是 8px，标题和内容贴得太近 —— 密集感有一半来自这儿 */
    margin-bottom: var(--el9-3);
}

.el9-panel-title {
    display: flex;
    align-items: center;
    gap: var(--el9-2);
    margin-bottom: var(--el9-3);
    color: var(--el9-text-2);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
}

.el9-panel-title::before {
    content: "";
    width: 3px;
    height: 12px;
    border-radius: 2px;
    background: var(--el9-accent);
    opacity: .85;
}

.el9-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    /* 6px 时上下两行几乎贴在一起，看着糊成一团 */
    gap: 8px;
}

.el9-tag-cloud a {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--el9-border);
    border-radius: var(--el9-r-full);
    background: var(--el9-bg);
    color: var(--el9-text-2);
    font-size: 13px;
    transition: color var(--el9-dur) var(--el9-ease), border-color var(--el9-dur) var(--el9-ease),
        background var(--el9-dur) var(--el9-ease);
}

.el9-tag-cloud a:hover {
    color: var(--el9-accent);
    border-color: var(--el9-accent);
    background: var(--el9-accent-soft);
}

.el9-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 calc(-1 * var(--el9-2));
}

.el9-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--el9-3);
    padding: 9px var(--el9-2);
    border-radius: var(--el9-r-sm);
    font-size: 14px;
    transition: background var(--el9-dur) var(--el9-ease), color var(--el9-dur) var(--el9-ease);
}

.el9-list a:hover {
    background: var(--el9-bg);
    color: var(--el9-accent);
}

.el9-count {
    flex: none;
    font-size: 12px;
    color: var(--el9-text-3);
    font-variant-numeric: tabular-nums;
}

.el9-rail-foot {
    padding-top: var(--el9-3);
    border-top: 1px solid var(--el9-border);
    color: var(--el9-text-3);
    font-size: 12px;
    line-height: 1.8;
}

.el9-rail-foot p {
    margin: 0;
}

.el9-rail-foot a {
    color: var(--el9-accent);
    text-decoration: none;
}

.el9-rail-foot a:hover {
    text-decoration: none;
}

.el9-rail-foot-extra {
    margin: 4px 0;
}

.el9-rail-foot-extra a {
    color: var(--el9-accent);
}

/* ==========================================================================
   5. 信息流
   ========================================================================== */

.el9-feedbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: var(--el9-2);
    margin: 0;
    padding: var(--el9-2) var(--el9-main-pad);
    background: var(--el9-bg-blur);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--el9-border);
}

.el9-feedbar--flow {
    margin-top: var(--el9-5);
}

.el9-feedbar .el9-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 var(--el9-3);
    border-radius: var(--el9-r-sm);
    font-size: 15px;
    font-weight: 600;
    color: var(--el9-text-2);
    transition: color var(--el9-dur) var(--el9-ease), background var(--el9-dur) var(--el9-ease);
}

.el9-feedbar .el9-tab:hover {
    color: var(--el9-text);
    background: var(--el9-bg-hover);
}

.el9-feedbar .el9-tab.is-active {
    color: var(--el9-text);
    font-weight: 700;
}

.el9-feedbar .el9-tab.is-active::after {
    content: "";
    position: absolute;
    left: var(--el9-3);
    right: var(--el9-3);
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: var(--el9-accent);
}

.el9-feedbar-title {
    flex: 1;
    min-width: 0;
    font-size: 20px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.el9-search--bar {
    display: none;
}

/* ---- 前台说说发布框 ---- */

.el9-composer {
    margin-top: var(--el9-5);
    padding: var(--el9-4) var(--el9-5);
    border: 1px solid var(--el9-border);
    border-radius: var(--el9-r-lg);
    background: var(--el9-bg);
}

.el9-composer textarea {
    display: block;
    width: 100%;
    min-height: 72px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--el9-text);
    font: inherit;
    font-size: 16px;
    line-height: 1.65;
    resize: vertical;
}

.el9-composer textarea:focus {
    outline: none;
}

.el9-composer-previews {
    display: grid;
    grid-template-columns: repeat(auto-fill, 72px);
    gap: var(--el9-2);
    margin-top: var(--el9-3);
}

.el9-composer-preview {
    position: relative;
    width: 72px;
    height: 72px;
    border: 1px solid var(--el9-border);
    border-radius: var(--el9-r-sm);
    overflow: hidden;
    /*
     * 预览图不许被选中 / 拖走。
     *
     * 选完图之后焦点还在弹层里，鼠标残留的位置又正好压在缩略图上 —— 按 Esc 关弹层时
     * 很容易带出一个图片选区（浏览器给 img 画的那种蓝框），看着就像「整个框被选中了」。
     * 缩略图本来也不是拿来复制或拖拽的。
     */
    user-select: none;
    -webkit-user-select: none;
}

.el9-composer-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 同上：缩略图不参与选中和拖拽，免得 Esc 关弹层时留下一圈图片选区 */
    pointer-events: none;
    -webkit-user-drag: none;
}

.el9-composer-remove {
    position: absolute;
    top: 3px;
    right: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: var(--el9-r-full);
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.el9-composer-remove:hover {
    background: rgba(0, 0, 0, .75);
}

.el9-composer-error {
    margin-top: var(--el9-2);
    font-size: 13px;
    color: var(--el9-danger);
}

/* 提示而非报错（比如「没拿到定位权限，已按 IP 填了城市」）：位置其实填上了，别用红字吓人 */
.el9-composer-error.is-hint {
    color: var(--el9-text-3);
}

.el9-composer-foot {
    display: flex;
    flex-direction: column;
    gap: var(--el9-2);
    margin-top: var(--el9-3);
    padding-top: var(--el9-3);
    border-top: 1px solid var(--el9-border);
}

/* 第一行：图片 / 图片链接 + 发布（发布靠右） */
.el9-composer-tools {
    display: flex;
    align-items: center;
    gap: var(--el9-2);
}

.el9-composer-tools .el9-composer-submit {
    margin-left: auto;
}

/* 第二行：定位按钮 + 位置输入，整行铺开 */
.el9-composer-place {
    display: flex;
    align-items: center;
    gap: var(--el9-2);
}

.el9-composer-mood {
    flex: 0 1 34%;
    min-width: 96px;
    height: 36px;
    padding: 0 var(--el9-3);
    border: 1px solid var(--el9-border);
    border-radius: var(--el9-r-full);
    background: var(--el9-bg);
    color: var(--el9-text);
    font: inherit;
    font-size: 13px;
}

.el9-composer-mood:focus {
    outline: 0;
    border-color: var(--el9-accent);
}

.el9-composer-place .el9-composer-location {
    flex: 1 1 auto;
    min-width: 0;
}

.el9-composer-add--url {
    /* 跟「上传图片」按钮同款方块，只是图标不同 */
    cursor: pointer;
}

.el9-composer-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    margin: 0;
    border-radius: var(--el9-r-full);
    color: var(--el9-text-2);
    cursor: pointer;
    transition: color var(--el9-dur) var(--el9-ease), background var(--el9-dur) var(--el9-ease);
}

.el9-composer-add:hover {
    color: var(--el9-accent);
    background: var(--el9-accent-soft);
}

.el9-composer-locate {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: none;
    height: 30px;
    padding: 0 10px 0 7px;
    border: 1px solid var(--el9-border);
    border-radius: var(--el9-r-full);
    background: transparent;
    color: var(--el9-text-2);
    font-size: 13px;
    cursor: pointer;
    transition: color var(--el9-dur) var(--el9-ease),
                background var(--el9-dur) var(--el9-ease),
                border-color var(--el9-dur) var(--el9-ease);
}

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

.el9-composer-locate:disabled {
    opacity: .55;
    cursor: default;
}

.el9-composer-locate:disabled:hover {
    color: var(--el9-text-2);
    background: transparent;
    border-color: var(--el9-border);
}

.el9-composer-note {
    margin: 8px 2px 0;
    color: var(--el9-text-3);
    font-size: 12px;
    line-height: 1.6;
}

/*
 * 内容遮罩：一行开关 + 展开后的两个范围选项。
 * 高度跟 location/mood 那一行对齐（36px），视觉上是一条完整的工具带。
 */
.el9-composer-mask {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: var(--el9-2);
    padding-top: var(--el9-2);
    border-top: 1px solid var(--el9-border);
}

.el9-composer-mask-on,
.el9-composer-maskopts label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--el9-text-3);
    cursor: pointer;
    user-select: none;
    transition: color var(--el9-dur) var(--el9-ease);
}

.el9-composer-mask-on:hover,
.el9-composer-maskopts label:hover {
    color: var(--el9-text-2);
}

.el9-composer-mask-on input,
.el9-composer-maskopts input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--el9-accent);
    cursor: pointer;
}

.el9-composer-mask-on:has(input:checked) {
    color: var(--el9-accent-text);
}

.el9-composer-maskopts {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.el9-composer-maskhint {
    font-size: 12px;
    color: var(--el9-text-3);
    opacity: .8;
}

/*
 * 编辑模式下不摆「加图」那几个按钮。
 * 编辑只动正文和位置/心情/遮罩，传上来的新图没人接（服务端 doEdit 不处理上传），
 * 摆着只会让人以为能换图，白传一趟。
 */
/*
 * 编辑模式跟发布共用同一排按钮：补图、贴链接、B 站、表情都能用。
 * 补的图由服务端追加到正文末尾，用户可以在正文框里再挪。
 */

/* 编辑时正文常带图床链接，一行放不下会缩成一格，给个台阶 */
.el9-composer[data-mode="edit"] textarea {
    min-height: 128px;
}

.el9-composer-location {
    flex: 1;
    min-width: 0;
    height: 36px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--el9-text);
    font-size: 13px;
}

.el9-composer-location:focus {
    outline: none;
}

.el9-composer-location::placeholder {
    color: var(--el9-text-3);
}

.el9-composer-submit {
    flex: none;
    height: 36px;
    padding: 0 20px;
    border: 0;
    border-radius: var(--el9-r-full);
    background: var(--el9-accent);
    color: var(--el9-accent-contrast);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity var(--el9-dur) var(--el9-ease), transform var(--el9-dur) var(--el9-ease);
}

.el9-composer-submit:hover {
    opacity: .9;
}

.el9-composer-submit:active {
    transform: scale(.96);
}

.el9-composer-submit:disabled {
    opacity: .55;
    cursor: default;
}

.el9-feed {
    display: flex;
    flex-direction: column;
    gap: var(--el9-4);
    padding-top: var(--el9-4);
}

/*
 * 首页 / 分类 / 搜索：条目之间不留空隙，靠一条贯穿整栏的细线分隔 ——
 * 这样才是连续的时间线，跟手机端看到的是同一套版式。
 *
 * 为什么用负 margin：卡片的 padding 是 24px，分隔线只会画在 padding-box 里，
 * 两头会各短 24px。往左右各撑出一个主栏内边距的量（--el9-main-pad），
 * 线就顶到主栏边缘了；文字位置不变，因为卡片自己的 padding 还在。
 *
 * ⚠️ 说说时间线（.el9-feed--timeline）要排除：它有一条绝对定位的竖线（left: 39px），
 * 卡片一左移竖线就跟头像错开了。
 */
.el9-feed:not(.el9-feed--timeline) {
    gap: 0;
}

.el9-feed:not(.el9-feed--timeline) > .el9-card {
    margin-left: calc(-1 * var(--el9-main-pad));
    margin-right: calc(-1 * var(--el9-main-pad));
}

/* gap 归零后，顶部轮播会跟第一条贴在一起，补回原来的那段距离 */
.el9-feed:not(.el9-feed--timeline) > .el9-carousel {
    margin-bottom: var(--el9-4);
}

.el9-card {
    display: flex;
    gap: var(--el9-4);
    padding: var(--el9-5) var(--el9-6);
    border: 1px solid var(--el9-border);
    border-radius: var(--el9-r-md);
    background: var(--el9-bg);
    transition: border-color var(--el9-dur) var(--el9-ease);
}

/* hover 只轻微加深描边，不再加投影 —— 卡片太重会压过内容 */
.el9-card:hover {
    border-color: var(--el9-border-strong);
}

/* ---- 信息流（首页 / 分类 / 说说 / 搜索）----
   不用框把每条围起来，靠一条细线分隔 —— 时间线本来就该是连续的，
   一格一格的框会把视线切碎。鼠标移上去时整条铺一层底色。

   ⚠️ 这条是信息流卡片 padding 的唯一生效来源（0,2,0）。
   下面几处媒体查询里的 `.el9-card { padding: … }` 是（0,1,0），权重压不过它，
   写了也不生效 —— 要调手机端的卡片间距，改这里或加同等以上权重。 */
.el9-feed .el9-card {
    padding: var(--el9-5) var(--el9-6);
    border: 0;
    border-bottom: 1px solid var(--el9-border);
    border-radius: 0;
    background: transparent;
}

/* 整块 hover 铺底色会把每条都染一遍，扫列表时很吵。
   改成只在真正能点的东西上给反馈：标题、时间这些链接自己变色 */
.el9-feed .el9-card:hover {
    box-shadow: none;
}

.el9-feed .el9-card a:hover {
    color: var(--el9-accent-text);
}

.el9-feed .el9-card:last-child {
    border-bottom: 0;
}

/* ---- 搜索结果：一屏要多看几条 ---- */
.el9-card.is-compact {
    gap: var(--el9-3);
    padding: var(--el9-3) var(--el9-6);
}

/* 头像和动作栏收掉，只留「标题 + 一行摘要 + 出处」 */
.el9-card.is-compact .el9-card-avatar,
.el9-card.is-compact .el9-card-actions {
    display: none;
}

.el9-card.is-compact .el9-card-title {
    margin-bottom: 2px;
    font-size: 16px;
    line-height: 1.45;
}

.el9-card.is-compact .el9-card-text {
    font-size: 14px;
    line-height: 1.6;
    /* 最多两行，超出的省略 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}

/* 出处（分类 / 说说标记 / 时间）挪到标题下面一行，比挤在头部更清楚 */
.el9-card.is-compact .el9-card-head {
    margin-bottom: 0;
    flex-wrap: wrap;
}

.el9-card.is-compact .el9-card-name,
.el9-card.is-compact .el9-card-handle,
.el9-card.is-compact .el9-card-place {
    display: none;
}

.el9-card-main {
    flex: 1;
    min-width: 0;
}

.el9-card-head {
    display: flex;
    align-items: baseline;
    /* 第一行只有名字和 @handle，一行放得下，不再 wrap */
    gap: var(--el9-1);
    min-width: 0;   /* 允许子元素收缩，名字过长时走省略号而不是撑破 */
    font-size: 15px;
    line-height: 20px;
}

/*
 * 卡片第二行：日期 + 说说徽章 + 位置。
 * 之前这些全挤在第一行，元素一多就乱换行。
 */
/* 第二行里的分类：小字 + 文件夹图标，跟说说徽章同等视觉重量 */
.el9-card-cat {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--el9-text-2);
}

.el9-card-cat a {
    color: inherit;
    text-decoration: none;
}

.el9-card-cat a:hover {
    color: var(--el9-accent-text);
}

.el9-card-cat .el9-icon {
    flex: none;
    opacity: 0.75;
}

.el9-card-sub {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--el9-1);
    margin-top: 1px;
    color: var(--el9-text-2);
    font-size: 13px;
    line-height: 18px;
}

.el9-card-name {
    font-weight: 700;
    color: var(--el9-text);
    /* 名字过长时省略：第一行现在不 wrap，撑破容器就难看了 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.el9-card-handle,
.el9-card-time {
    color: var(--el9-text-2);
    font-size: 15px;
}

.el9-card-time:hover {
    text-decoration: none;
}

.el9-card-place {
    display: inline-flex;
    align-items: center;
    gap: var(--el9-1);
    /* 紧跟前一个元素（说说徽章 / 日期），不推到行尾 —— PC 和手机表现一致 */
    margin-left: 0;
    color: var(--el9-text-3);
    font-size: 13px;
}

.el9-card-title {
    margin: var(--el9-2) 0 var(--el9-2);
    font-size: 19px;
    /* 列表标题 700 够分量；再粗就往正文里抢注意力了 */
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -.01em;
    text-wrap: pretty;
}

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

.el9-card-text {
    font-size: 15px;
    /* 摘要最多三行，行高压到 1.65 更紧凑，跟 19px 的标题拉开对比 */
    line-height: 1.65;
    color: var(--el9-text);
    overflow-wrap: break-word;
    word-break: break-word;
}

.el9-card:not(.is-talk) .el9-card-text {
    color: var(--el9-text-2);
}

.el9-card-text p {
    margin: 0;
}

.el9-card-text img,
.el9-card-text pre {
    margin: var(--el9-2) 0;
}

.is-talk .el9-card-text {
    font-size: 17px;
    line-height: 1.65;
}

.is-talk .el9-card-text p {
    margin: 0 0 var(--el9-2);
}

.is-talk .el9-card-text p:last-child {
    margin-bottom: 0;
}

.el9-card-media {
    display: block;
    margin-top: var(--el9-3);
    border: 1px solid var(--el9-border);
    border-radius: var(--el9-r-md);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--el9-skeleton);
}

.el9-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 320ms var(--el9-ease);
}

.el9-card-media:hover img {
    transform: scale(1.02);
}

/*
 * 大图下面紧跟动作栏时，给一点呼吸。
 *
 * 原来这里靠的是 0 —— 图标直接贴在图的下边框上。而说说卡片里，正文和动作栏
 * 之间还留着行高余下的那几 px，于是同一条时间线上：文章那条挤，说说那条松。
 *
 * 只用相邻选择器，不动 .el9-card-media 自己的 margin-bottom —— 搜索结果那种
 * 没有动作栏的卡片，下面多出来的空白会变成一条莫名其妙的空隙。
 */
.el9-card-media + .el9-card-actions {
    margin-top: var(--el9-2);
}

/*
 * 编辑那支笔：规格跟分享按钮完全对齐（32 宽、padding 0、左右 margin 0）。
 *
 * .el9-act 默认带 margin-left: -8px（那是给「图标+文字」那种按钮留的贴边补偿），
 * 纯图标按钮不吃这套 —— 不覆盖的话它跟隔壁只隔 4px，而别处是 12px，一眼就看出来歪。
 */
.el9-card-actions .el9-act--edit {
    flex: none;
    position: relative;
    justify-content: center;
    width: 32px;
    padding: 0;
    margin-left: 0;
    margin-right: 0;
}

/* 动作栏：去掉上方那条横线 —— 图片/文字下面直接跟动作图标，
   中间隔一条线会把一张卡片切成两截（推文的惯例就是不加这条线） */
.el9-card-actions,
.el9-article-actions {
    display: flex;
    align-items: center;
    gap: var(--el9-3);
    /*
     * 标签已经独占一行了，换行间距交给 .el9-article-foot 的 gap，
     * 这里再加 20px 会空出一大条。
     */
    margin-top: 0;
}

.el9-act {
    display: inline-flex;
    align-items: center;
    position: relative;   /* 给下面的命中区伪元素当定位参照 */
    gap: 6px;
    height: 32px;
    padding: 0 var(--el9-2);
    margin-left: calc(-1 * var(--el9-2));
    border-radius: var(--el9-r-sm);
    color: var(--el9-text-3);
    font-size: 13px;
    /* 「3 分钟」「阅读全文」这类短词组不许在中间断行 ——
       手机上一窄就会拆成「3 分 / 钟」，很难看 */
    white-space: nowrap;
    transition: color var(--el9-dur) var(--el9-ease), background var(--el9-dur) var(--el9-ease);
}

.el9-act:hover {
    color: var(--el9-accent);
    background: var(--el9-accent-soft);
}

.el9-act.is-static {
    cursor: default;
}

.el9-act.is-static:hover {
    color: var(--el9-text-3);
    background: none;
}

.el9-act--category {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.el9-act--more {
    margin-left: auto;
    /*
     * 右边距归零 + 去掉右内边距：让箭头正好落在内容区右边缘。
     * 原来是 margin-right: -8px 把「盒子」顶出去 8px —— 文字看着贴边了，
     * 但整张卡右边只剩 16px，左边（头像那一侧）是 24px，两头不齐。
     */
    margin-right: 0;
    padding-right: 0;
    color: var(--el9-accent);
    font-weight: 600;
}

/*
 * 分享按钮：只留图标，做成正方形点击区。
 * 复制成功的反馈用按钮上方飘出的小气泡，不占布局宽度。
 */
.el9-act--share {
    flex: none;
    position: relative;
    justify-content: center;
    width: 32px;
    padding: 0;
    /* 紧跟评论数（不再 auto 推到最右），让「阅读全文」独占右端 */
    margin-left: 0;
    margin-right: 0;
    color: var(--el9-text-3);
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
}

/* 复制成功的气泡：绝对定位在按钮上方，不挤占动作栏 */
.el9-share-tip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 3px 8px;
    border-radius: var(--el9-r-sm);
    background: var(--el9-text);
    color: var(--el9-bg);
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms var(--el9-ease), transform 160ms var(--el9-ease);
}

.el9-act--share.is-copied .el9-share-tip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.el9-act--share:hover {
    color: var(--el9-accent);
}

.el9-act--share.is-copied {
    color: var(--el9-accent);
}



.el9-act--more:hover {
    color: var(--el9-accent);
    background: var(--el9-accent-soft);
}

.el9-act--more .el9-icon {
    transition: transform var(--el9-dur) var(--el9-ease);
}

.el9-act--more:hover .el9-icon {
    transform: translateX(2px);
}

/* ---- 说说时间线 ---- */

.el9-feed--timeline {
    position: relative;
    gap: var(--el9-1);
    padding-top: var(--el9-2);
}

.el9-feed--timeline::before {
    content: "";
    position: absolute;
    left: 39px;
    top: 20px;
    bottom: 20px;
    width: 2px;
    border-radius: 1px;
    background: var(--el9-border);
}

.el9-feed--timeline .el9-card {
    padding: var(--el9-3) var(--el9-3) var(--el9-3) var(--el9-5);
    border-color: transparent;
}

/* 说说时间线的卡片同样不整块变色（跟首页信息流一致） */
.el9-feed--timeline .el9-card:hover {
    border-color: transparent;
    box-shadow: none;
    background: transparent;
}

.el9-feed--timeline .el9-card-actions {
    border-top-color: var(--el9-border);
}

.el9-card-avatar {
    flex: none;
    position: relative;
    z-index: 1;
}

.el9-feed--timeline .el9-avatar {
    box-shadow: 0 0 0 4px var(--el9-bg);
}

.el9-timeline-sep {
    position: relative;
    display: flex;
    align-items: center;
    height: 48px;
    padding-left: 60px;
    color: var(--el9-text-2);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
}

.el9-timeline-sep::before {
    content: "";
    position: absolute;
    left: 34px;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    border-radius: var(--el9-r-full);
    background: var(--el9-bg);
    border: 3px solid var(--el9-accent);
}

/* ---- 长文目录 ---- */

/* 窄屏：正文顶部一张折叠卡 */
.el9-toc-inline {
    /* 页头是卡片了，目录跟它之间要留出「两张卡」的距离，8px 会粘在一起 */
    margin: var(--el9-4) 0 var(--el9-4);
    padding: var(--el9-3) var(--el9-4);
    border: 1px solid var(--el9-border);
    border-radius: var(--el9-r-md);
    background: var(--el9-bg-soft);
}

.el9-toc-inline[hidden],
.el9-toc-rail[hidden] {
    display: none;
}

.el9-toc-inline > summary {
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    color: var(--el9-text-2);
    user-select: none;
}

.el9-toc-inline > summary:hover {
    color: var(--el9-accent);
}

.el9-toc-inline-list,
.el9-toc-rail-list {
    display: flex;
    flex-direction: column;
    margin-top: var(--el9-2);
}

.el9-toc-link {
    display: block;
    padding: 5px 10px;
    border-radius: var(--el9-r-sm);
    border-left: 2px solid transparent;
    color: var(--el9-text-2);
    font-size: 13px;
    line-height: 1.5;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color var(--el9-dur) var(--el9-ease), background var(--el9-dur) var(--el9-ease);
}

.el9-toc-link.is-h3 {
    font-size: 12.5px;
    color: var(--el9-text-3);
}

.el9-toc-link:hover {
    background: var(--el9-bg-hover);
    color: var(--el9-text);
}

.el9-toc-link.is-current {
    border-left-color: var(--el9-accent);
    background: var(--el9-accent-soft);
    color: var(--el9-accent);
    font-weight: 600;
}

/* 宽屏：右侧悬浮那一条（屏幕够宽才摆得下） */
.el9-toc-rail {
    display: none;
    position: fixed;
    top: calc(var(--el9-nav-h) + 40px);
    right: 20px;
    z-index: 40;
    width: 208px;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--el9-3) var(--el9-2);
    border: 1px solid var(--el9-border);
    border-radius: var(--el9-r-md);
    background: var(--el9-bg);
    box-shadow: var(--el9-shadow);
}

.el9-toc-title {
    margin: 0 0 var(--el9-2);
    padding: 0 var(--el9-2);
    font-size: 12px;
    font-weight: 700;
    color: var(--el9-text-3);
    letter-spacing: .04em;
}

/* 摆得下才显示右侧目录（JS 按实际宽度算，宽度设置改了也不会撞上正文） */
body.has-toc-rail .el9-toc-rail {
    display: block;
}

/* 右侧有目录了，顶部折叠卡就别重复摆 */
body.has-toc-rail .el9-toc-inline {
    display: none;
}

/* 侧栏在右边时，目录挂到内容的左侧，别跟侧栏打架 */
body.is-side-right .el9-toc-rail {
    left: 20px;
    right: auto;
}

/* 没有 JS 时的兜底：很宽的屏才摆悬浮目录，窄了就用折叠卡 */
@media (min-width: 1600px) {
}

/* ---- 网格卡片归档（资源仓库这类分类，后台「网格卡片分类」里挂） ---- */

.el9-grid-feed {
    display: flex;
    flex-wrap: wrap;
    margin: var(--el9-2) calc(var(--el9-2) * -1) 0;
}

.el9-grid-card {
    position: relative;
    width: calc(33.333% - var(--el9-4));
    margin: var(--el9-2);
    border: 1px solid var(--el9-border);
    border-radius: var(--el9-r-md);
    background: var(--el9-bg);
    overflow: hidden;
    box-sizing: border-box;
    transition: border-color var(--el9-dur) var(--el9-ease),
        box-shadow var(--el9-dur) var(--el9-ease),
        transform var(--el9-dur) var(--el9-ease);
}

/* 整卡可点：把标题那根链接的命中区撑满卡片。
   这样语义上还是「标题链接」，但不占额外一行、鼠标点哪都进得去 */
.el9-grid-link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: var(--el9-r-md);
}

.el9-grid-card:hover {
    border-color: var(--el9-border-strong);
    box-shadow: var(--el9-shadow);
    transform: translateY(-2px);
}

/* 16:9 封面，图铺满 */
.el9-grid-cover {
    display: block;
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: var(--el9-skeleton);
    overflow: hidden;
}

.el9-grid-cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
    border: 0;
    border-radius: 0;
}

.el9-grid-cover-ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--el9-text-3);
    opacity: .5;
}

.el9-grid-body {
    padding: var(--el9-3) var(--el9-4) var(--el9-4);
}

.el9-grid-title {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.55;
    /* 最多两行，多出来的省略 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
    min-height: 2.9em;
}

.el9-grid-title a {
    color: var(--el9-text);
    text-decoration: none;
}

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

/* 卡片右下角的小箭头，只在鼠标移上去时出现 ——
   没有那行「立即获取」了，得留一点「这里可以点」的暗示 */
.el9-grid-go {
    position: absolute;
    right: var(--el9-3);
    bottom: var(--el9-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--el9-r-full);
    background: var(--el9-bg-blur);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--el9-text-2);
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity var(--el9-dur) var(--el9-ease), transform var(--el9-dur) var(--el9-ease);
    pointer-events: none;
}

.el9-grid-card:hover .el9-grid-go {
    opacity: 1;
    transform: translateX(0);
    color: var(--el9-accent-text);
}

@media (max-width: 1200px) {
    .el9-grid-card {
        width: calc(50% - var(--el9-4));
    }
}

@media (max-width: 640px) {
    /*
     * 手机上保持两列，不要退成一列。
     * 原来这里写的是 100%，所以 390px 屏幕上一行只放得下一张卡，
     * 单独一张大卡反而更占屏、翻起来更慢。
     */
    .el9-grid-card {
        width: calc(50% - var(--el9-4));
    }
}

/* ---- 分页 ---- */

.el9-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--el9-1);
    padding: var(--el9-5) var(--el9-4) var(--el9-8);
}

/* nav 包 li 时浏览器还会画圆点，关掉 */
.el9-pager li {
    list-style: none;
}

.el9-pager li a,
.el9-pager li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 var(--el9-2);
    border: 0;
    border-radius: var(--el9-r-full);
    background: transparent;
    color: var(--el9-text-2);
    font-size: 15px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    transition: background var(--el9-dur) var(--el9-ease),
        color var(--el9-dur) var(--el9-ease);
}

.el9-pager li a:hover {
    background: var(--el9-bg-hover);
    color: var(--el9-text);
}

.el9-pager li.is-current a,
.el9-pager li.is-current span {
    background: var(--el9-accent);
    color: var(--el9-accent-contrast);
    font-weight: 700;
}

.el9-pager li.is-prev a,
.el9-pager li.is-next a {
    min-width: 0;
    padding: 0 var(--el9-4);
    border: 1px solid var(--el9-border);
    background: var(--el9-bg);
    color: var(--el9-text);
    font-weight: 600;
}

.el9-pager li.is-prev a:hover,
.el9-pager li.is-next a:hover {
    border-color: var(--el9-border-strong);
    background: var(--el9-bg-soft);
    color: var(--el9-text);
}

/* 无限加载指示器 */

/*
 * 往下追加的两种模式都把分页条藏起来，列表底部只留一个入口：
 * 「加载更多」靠按钮、自动加载靠滚动。
 * JS 拿不到下一页地址时会自己把这两个类摘掉，分页条就亮回来了。
 */
.el9-pager.is-infinite,
.el9-pager.is-button {
    display: none;
}

.el9-pager.is-fallback {
    display: flex;
}

/* ---- 「加载更多」按钮：细线框、透明底，不抢内容的注意力 ---- */

.el9-loadmore {
    display: flex;
    justify-content: center;
    padding: var(--el9-5) 0 var(--el9-8);
}

.el9-loadmore[hidden] {
    display: none;
}

.el9-loadmore-btn {
    min-width: 140px;
    /* 44px 是触摸目标的下限，线框按钮这个高度在桌面上也不显笨 */
    height: 44px;
    padding: 0 var(--el9-5);
    border: 1px solid var(--el9-border);
    border-radius: var(--el9-r-full);
    background: transparent;
    color: var(--el9-text-2);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: border-color var(--el9-dur) var(--el9-ease),
        background var(--el9-dur) var(--el9-ease),
        color var(--el9-dur) var(--el9-ease);
}

.el9-loadmore-btn:hover {
    border-color: var(--el9-border-strong);
    background: var(--el9-bg-soft);
    color: var(--el9-text);
}

/* 加载中 / 已经到底了 / 加载失败：都不可再点，只是文案不同。
   「已经到底了」这时候它已经不是按钮，只是一行状态文字 —— 去掉线框和外边距，
   别让人以为还能点 */
.el9-loadmore-btn[disabled] {
    min-width: 0;
    border-color: transparent;
    background: transparent;
    color: var(--el9-text-3);
    cursor: default;
}

/*
 * 「已经到底了，没有更多内容」。
 *
 * 这段是纯文本，不是按钮：到底了这个状态跟「列表加载方式」无关，
 * 自动加载和点击加载两种模式看到的应该是同一行字。
 * 样式跟 .el9-loadmore-btn[disabled] 对齐，视觉上跟「加载到最后一页」时
 * 按钮变灰的样子完全一致，不会跳一下。
 */
.el9-loadmore-end {
    margin: 0;
    color: var(--el9-text-3);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
}

@media (max-width: 999px) {
    /*
     * 手机端不点按钮了 —— 继续往下滑就自动加载（见 app.js 里的 syncTrigger）。
     * 这里把那颗 44px 的线框按钮压成一行灰字，只当状态提示，尽量少占屏。
     * 底部要让开固定导航条（52px）+ 安全区，再多留 10px 呼吸。
     */
    .el9-loadmore {
        padding: 10px 0 calc(10px + 52px + env(safe-area-inset-bottom, 0px));
    }

    .el9-loadmore-btn,
    .el9-loadmore-btn:hover {
        min-width: 0;
        height: auto;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--el9-text-3);
        font-size: 12.5px;
        font-weight: 500;
        cursor: default;
    }

    /*
     * 已经滑到最底：提示加深一档，跟「还在往下滑的路上」区分开。
     * 这是「到底了」的唯一视觉信号，别再加重别的装饰。
     */
    .el9-loadmore.is-bottom .el9-loadmore-btn {
        color: var(--el9-text-2);
    }

    /* 到底那行字跟手机端按钮文案保持同样字号，两者不会一粗一细 */
    .el9-loadmore-end {
        font-size: 12.5px;
    }
}

.el9-loader {
    display: flex;
    justify-content: center;
    padding: var(--el9-5) 0 var(--el9-8);
}

.el9-loader[hidden] {
    display: none;
}

.el9-spinner {
    width: 22px;
    height: 22px;
    border-radius: var(--el9-r-full);
    border: 2px solid var(--el9-border);
    border-top-color: var(--el9-accent);
    animation: el9-spin .7s linear infinite;
}

@keyframes el9-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .el9-spinner {
        animation-duration: 1.6s;
    }
}

/* ==========================================================================
   6. 文章页
   ========================================================================== */

.el9-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 90;
    height: 2px;
    background: transparent;
}

.el9-progress span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--el9-accent);
    transition: width 80ms linear;
}

.el9-article {
    /* 左右留白交给 .el9-shell 的 --el9-bleed，这里不再叠一层 ——
       不然「内容到窗口」会变成 12 + 24 + 16 = 52，和首页对不上。
       顶部也不再留 8px：首块（页头卡片）要跟首页标签栏、独立页标题
       落在同一条线上 —— 那条线的位置由 .el9-layout 的 --el9-bleed 决定 */
    padding: 0 0 var(--el9-8);
}

/*
 * 页头卡片：标题 + 作者 + 日期收进一张卡里。
 *
 * 原来这些内容直接铺在白底上，标题和作者行之间靠一条通栏细线分隔，
 * 视觉上没有边界 —— 往下滚的时候也分不清「头部」到哪儿结束。
 * 现在给它自己的边界：底色、描边、圆角、一层很浅的投影。
 * 卡片顶部仍然落在 67px 那条线上（--el9-bleed 给的 12px），跟首页标签栏对齐。
 */
.el9-article-head {
    padding: var(--el9-5);
    border-radius: var(--el9-r-lg);
    /*
     * 白底上的白卡：只留一圈最浅的描边（--el9-border，跟信息流卡片同一条线），
     * 不加投影 —— 文章页这块面积大，一有影子就显得「浮起来」，反而抢标题。
     */
    background: var(--el9-bg);
    border: 1px solid var(--el9-border);
}

/* 文章大标题：字重从 800 降到 700 —— 中文笔画密，34px 上 800 会糊成一团。
   字号 34 → 32，配合 1.25 行高，标题更从容也不失分量 */
.el9-article-title {
    /* 上面那 12px 由 .el9-layout 统一给，这里再叠一层就比别的页高出一截 */
    margin: 0 0 var(--el9-5);
    font-size: 32px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -.02em;
    text-wrap: balance;
}

/* 说说详情页没有标题，卡片里只剩作者一行，上下留 20 会显得空 */
.is-talk-single .el9-article-head {
    padding-top: var(--el9-4);
    padding-bottom: var(--el9-4);
}

.el9-article-meta {
    display: flex;
    align-items: center;
    gap: var(--el9-3);
    /* 标题 → 作者信息：16。下面不再补通栏线 —— 卡片自己的边和投影
       已经把「头部到这儿结束」交代清楚了 */
    margin-top: var(--el9-4);
}

.el9-article-meta-text {
    display: flex;
    flex-direction: column;
}

.el9-article-meta-side {
    display: flex;
    align-items: center;
    gap: var(--el9-1);
    margin-left: auto;
    color: var(--el9-text-2);
    font-size: 13px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.el9-article-cover {
    margin: var(--el9-4) 0 0;
    border: 1px solid var(--el9-border);
    border-radius: var(--el9-r-lg);
    overflow: hidden;
    background: var(--el9-skeleton);
}

/* 封面在卡片里时，外框已经有一层了，再描一圈会显脏 */
.el9-article-head .el9-article-cover {
    border: 0;
    border-radius: var(--el9-r-md);
}

.el9-article-cover img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.el9-article-foot {
    display: flex;
    align-items: center;
    gap: var(--el9-3);
    flex-wrap: wrap;
    padding-top: var(--el9-5);
    margin-top: var(--el9-6);
    border-top: 1px solid var(--el9-border);
}

/*
 * 分类 + 标签占一整行。
 * 原来标签和「评论数 / 浏览量 / 分享」这几个图标挤在同一条线上，
 * 图标那排看着像最后一个标签的附属物，读起来分不清哪块是分类哪块是操作。
 */
.el9-article-foot .el9-postmeta {
    flex: 0 0 100%;
}

.el9-postmeta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--el9-2);
}

.el9-catline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--el9-2);
}

/*
 * 分类胶囊：跟标签同高，但用主题色描边——同一行里要能一眼分出
 * 「这是分类（可点进同类）」和「这是标签」。
 */
.el9-catline a {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--el9-accent);
    border-radius: var(--el9-r-full);
    color: var(--el9-accent);
    font-size: 12.5px;
    font-weight: 600;
    transition: background var(--el9-dur) var(--el9-ease), color var(--el9-dur) var(--el9-ease);
}

.el9-catline a:hover {
    background: var(--el9-accent);
    color: #fff;
}

.el9-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--el9-2);
}

/*
 * 标签：细描边的小胶囊，不再是实心浅蓝块。
 *
 * 实心块（accent-soft 底 + accent 字）在文章末尾太抢眼，跟旁边的评论数、
 * 浏览量、分享摆在一起时，颜色分量压过了那排操作按钮。
 * 改成描边版：默认是次要文字色，hover 才亮成主题色。
 */
.el9-tags a {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--el9-border);
    border-radius: var(--el9-r-full);
    background: transparent;
    color: var(--el9-text-2);
    font-size: 12.5px;
    font-weight: 500;
    transition: border-color var(--el9-dur) var(--el9-ease), color var(--el9-dur) var(--el9-ease);
}

.el9-tags a:hover {
    border-color: var(--el9-accent);
    color: var(--el9-accent);
}

.el9-edit {
    display: inline-flex;
    align-items: center;
    gap: var(--el9-1);
    margin-left: auto;
    color: var(--el9-text-2);
    font-size: 13px;
}

/* 说说的「编辑」是 <button>（走前台弹层），按钮默认样式要抹掉 */
button.el9-edit {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.el9-edit:hover {
    color: var(--el9-accent);
}

.el9-near {
    padding: 0 0 var(--el9-6);
}

.el9-near-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--el9-3);
}

.el9-near-item {
    padding: var(--el9-3) var(--el9-4);
    border: 1px solid var(--el9-border);
    border-radius: var(--el9-r-md);
    font-size: 15px;
    transition: border-color var(--el9-dur) var(--el9-ease), background var(--el9-dur) var(--el9-ease);
}

.el9-near-item:hover {
    border-color: var(--el9-border-strong);
    background: var(--el9-bg-hover);
}

.el9-near-item.is-next {
    text-align: right;
}

.el9-near-label {
    display: block;
    margin-bottom: var(--el9-1);
    color: var(--el9-text-2);
    font-size: 13px;
}

.el9-page {
    /* 同 .el9-article：顶部留白只认 .el9-layout，页面里不再叠 8px。
       之前「关于 / 友链」的标题比首页、文章页低 16px，就是这 8px 加标题的 8px */
    padding: 0 0 var(--el9-6);
}

.el9-page-head {
    display: flex;
    align-items: baseline;
    gap: var(--el9-3);
}

.el9-page-title {
    margin: 0 0 var(--el9-4);
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.02em;
}

/*
 * 「我们的故事」不输出标题，正文直接从顶上开始 —— 所以不要 .el9-page 那 8px 顶内边距。
 *
 * 这里原来还有一条 `margin-top: calc(12px - 40px)` 的负 margin，本意是抵掉
 * 「主栏给文章页的 40px 顶留白」。可那条 40px 后来为了「所有页面顶部都是 12」
 * 被归零了（见 .is-page .el9-main），负 margin 却留在原地 —— 于是它把整块
 * 往上拽了 28px，实测导航底到说明框只剩 8px，比右栏名片的 12px 还高出一截，
 * 顶上那排东西是斜的。补偿值只对当初那个数有效，前提一变就得一起删。
 *
 * 现在不加任何补偿：顶留白全交给 .el9-layout 的 --el9-bleed（12px），
 * 和侧栏名片落在同一条线上。
 */
.el9-page--mycomments {
    padding-top: 0;
}

/*
 * 首块归零上边距，让三种分支（正常 / 认不出人 / 没评论）都从同一条线开始。
 *
 * 说明框本来吃 `.el9-content > *:first-child` 的归零，但 .el9-content 自己
 * 带着 24px 上边距（那是给「页面标题 → 正文」留的），没有标题时就成了凭空的 24px。
 * 只归零首块、不动 .el9-content 本体：这一页以后要加标题，把标题插到前面，
 * 正文和标题之间的 24px 还在。
 */
.el9-page--mycomments > :first-child {
    margin-top: 0;
}

.el9-talks-more {
    padding: var(--el9-5) 0;
    text-align: center;
}

/* ==========================================================================
   7. 正文排版
   ========================================================================== */

/* 正文与上方元信息之间留一段，别让正文贴着分隔线 */
.el9-content {
    margin-top: var(--el9-6);
    font-size: 17px;
    /* 行长收到 40em 左右之后，行高 1.8 刚好：长行需要更大的行高才不串行 */
    line-height: 1.8;
    color: var(--el9-text);
    /*
     * 换行规则（中英混排的关键）：
     * - word-break: normal —— 英文单词保持完整，不在词内随意断
     * - overflow-wrap: break-word —— 只有当单词长到一行放不下时才强制断开（兜底）
     * - line-break: strict —— 按中文标点规则断行，避免「（」「「」这类标点孤零零落在行尾/行首
     * - text-wrap: pretty —— 支持的浏览器会优化最后几行的断法，少出现孤字
     * 之前写的是 word-break: break-word，长英文词遇到行尾就整词跳到下一行，
     * 上一行留一大块白，每行长度参差不齐。
     */
    word-break: normal;
    overflow-wrap: break-word;
    line-break: strict;
    /* 中文正文：字距放开一点点，密排会糊 */
    letter-spacing: .01em;
}

.el9-content > *:first-child {
    margin-top: 0;
}

.el9-content p {
    margin: 0 0 1.1em;
}

/* ---- 正文宽度：跟着主栏走，不再单独收一道 ----
 *
 * 这里原来给正文所有子块加了 max-width: 680px。问题有两个：
 *   1. 主栏实际是 720/772，正文 680 —— 右边永远空出一条几十像素的死带，
 *      文字、图片、代码块一齐缩在左边，看着像「没铺满」；
 *   2. 注释写的是「只收文字，媒体照常铺开」，可选器里 pre / figure /
 *      表格 / 图片网格全在，媒体根本没铺开。代码和注释早就对不上了。
 *
 * 现在宽度只有一个来源：主栏宽度（后台「内容区宽度」，默认 720）。
 * 想窄一点就把后台那个值调小（600–1400 可调），别在 CSS 里再写死第二个数 ——
 * 两个数一打架，右边缘就永远对不齐。
 */

/* 标题：字重从 800 降到 700/600 —— 中文笔画密，800 会糊成一团黑。
   层级靠「字号 + 字重 + 上方留白」三重拉开，不靠加粗硬怼 */
/* 标题间距改用固定值：原来写 2em 是相对标题自己的字号，
   结果 h1 上方 60px、h4 上方 36px，节奏乱。现在按层级给固定的垂直节奏 */
.el9-content h1,
.el9-content h2,
.el9-content h3,
.el9-content h4 {
    text-wrap: balance;
}

/*
 * 标题层级：比例照 oyiso（正文的 1.50 / 1.25 / 1.06 / 1.00 倍），
 * 基准保持我们自己的正文 17px —— 于是 17×比例 = 26 / 21 / 18 / 17。
 *
 * 之前是 28 / 24 / 20 / 18（1.65 / 1.41 / 1.18 / 1.06），层级拉得太开，
 * 一篇文章里 h3 和 h4 看着像两个不相干的字号。收紧之后靠「字号 + 字重 +
 * 上方留白」三层区分，节奏反而更稳 —— 这也是 Apple 那套的做法。
 */
.el9-content h1 {
    margin: 44px 0 18px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.015em;
}

.el9-content h2 {
    margin: 40px 0 16px;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -.012em;
}

.el9-content h3 {
    margin: 32px 0 14px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: -.01em;
}

.el9-content h4 {
    margin: 28px 0 12px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -.005em;
}

/* h5/h6 跟正文同字号，只靠字重区分（oyiso 也是这么处理的） */
.el9-content h5 {
    margin: 24px 0 10px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: 0;
}

.el9-content h6 {
    margin: 22px 0 8px;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: 0;
    color: var(--el9-text-2);
}

/*
 * 标题左侧竖条：给层级一个「不靠字号也能一眼看见」的抓手。
 *
 * 之前层级全靠字号 + 字重 + 上方留白。字号收紧到 1.50/1.25/1.06 之后
 * （见上面那段注释），h2 和 h3 只差 3px，长文里翻着翻着就分不清哪是章节、
 * 哪是小节了。加一条竖线，扫一眼就知道层级在哪。
 *
 * 只挂 h2 / h3：h4 往下字号已经跟正文贴住，再加线，一段话里会全是竖条。
 *
 * 用 ::before 而不是 border-left —— border 的高度跟着整行盒子走（含行高留白），
 * 视觉上比字高一截，像贴了张标签；伪元素的上下各收 .16em，长短才跟字号对得上。
 */
.el9-content h2,
.el9-content h3 {
    position: relative;
    padding-left: 14px;
}

.el9-content h2::before,
.el9-content h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: .16em;
    bottom: .16em;
    border-radius: 2px;
    background: var(--el9-accent);
}

.el9-content h2::before {
    width: 4px;
}

/* h3 细一档、淡一档：紧挨着 h2 的时候，一眼能看出「这是下一级」而不是又一个章节。
   淡到这个程度就够了，再淡白底上会像没加载出来的边框 */
.el9-content h3 {
    padding-left: 12px;
}

.el9-content h3::before {
    width: 3px;
    border-radius: 1.5px;
    opacity: .55;
}

/* 紧跟在标题后面的段落别再顶一大块留白 */
.el9-content h1 + p,
.el9-content h2 + p,
.el9-content h3 + p,
.el9-content h4 + p {
    margin-top: -4px;
}

/* 目录锚点跳转时，标题别贴着视口顶 */
.el9-content h2[id],
.el9-content h3[id] {
    scroll-margin-top: calc(var(--el9-nav-h) + 34px);
}

/*
 * 正文链接：下划线改成「从左展开、向右收起」
 *
 * 常显的 text-decoration 换成一层渐变背景线：收起时贴在右边、宽度 0（看不见），
 * 鼠标移上去位置瞬间跳到左边再展开 —— 看着是从左往右长出来；
 * 移开时位置瞬间回右边再收缩，看着是往右滑走。
 *
 * 三个细节：
 *   ① background-position 过渡写 0s —— 位置要「瞬移」。宽 100% 时左右端点重合，
 *      瞬移看不出来；真给它加过渡反而能看到线在横着滑动。
 *   ② box-decoration-break: clone —— 链接跨行时每行各画自己那一段，
 *      不然整条线只会出现在最后一行。
 *   ③ 排除图片链接（灯箱那种）：线画在图片底下很奇怪。
 */
.el9-content a:not(.el9-zoomable):not(:has(img)) {
    color: var(--el9-accent-text);
    text-decoration: none;
    padding-bottom: 2px;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 0 1px;
    transition: background-size .28s var(--el9-ease), background-position 0s;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.el9-content a:not(.el9-zoomable):not(:has(img)):hover,
.el9-content a:not(.el9-zoomable):not(:has(img)):focus-visible {
    background-position: left bottom;
    background-size: 100% 1px;
}

.el9-content a:hover {
    text-decoration-thickness: 2px;
}

/*
 * 站外链接的小箭头
 *
 * 用 mask 画而不是插一个 <svg> 或写个 ↗ 字符：
 *   - 字符在不同系统里字形差很多，而且会被一起复制走；
 *   - inline svg 每加一个链接就多一段标签，正文里几十个外链就多几十个节点。
 * mask 版的颜色取自 currentColor，深色模式不用另写一套。
 */
.el9-content a.el9-ext::after {
    content: "";
    display: inline-block;
    width: .58em;
    height: .58em;
    margin-left: .2em;
    vertical-align: .02em;
    background-color: currentColor;
    opacity: .5;
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4 10 14'/%3E%3Cpath d='M18 13v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4 10 14'/%3E%3Cpath d='M18 13v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6'/%3E%3C/svg%3E") no-repeat center / contain;
}

.el9-content a.el9-ext:hover::after { opacity: .85; }

/* 打印时不画（纸上看不到「新窗口打开」这件事，箭头只会碍事） */
@media print {
    .el9-content a.el9-ext::after { display: none; }

    /* 浏览器默认不打印背景色，竖条出不来 —— 那就把缩进一起归零，
       否则纸上标题会莫名往右偏一截 */
    .el9-content h2,
    .el9-content h3 {
        padding-left: 0;
    }
}

.el9-content ul,
.el9-content ol {
    margin: 0 0 1.15em;
    padding-left: 1.5em;
    list-style: revert;
}

.el9-content li {
    margin: .45em 0;
    line-height: 1.75;
}

/* 列表项里的段落别再撑开间距 */
.el9-content li p {
    margin: 0 0 .4em;
}

.el9-content li > p:last-child {
    margin-bottom: 0;
}

.el9-content li > ul,
.el9-content li > ol {
    margin: .3em 0;
}

/* 引用：做成一张带左侧色条的卡片，不再是光秃秃一条竖线 */
.el9-content blockquote {
    margin: 1.6em 0;
    padding: var(--el9-3) var(--el9-4);
    border-left: 3px solid var(--el9-border-strong);
    border-radius: 0 var(--el9-r-md) var(--el9-r-md) 0;
    background: var(--el9-bg-soft);
    color: var(--el9-text-2);
}

.el9-content blockquote p:last-child {
    margin-bottom: 0;
}

/* ---- 提示框（callout）：> [!TIP] / [!NOTE] / [!WARNING] ---- */

/*
 * 提示框（方角卡）
 *
 * 版式照 oyiso 的 shortcode-tip：「图标 + 标签」占一行小标题，下面接正文，
 * 整体一张 10px 圆角的淡色卡 —— 1px 半透明描边 + 5% 淡底，不用左边那条粗彩条。
 *
 * 每个变体只定两个变量：--co（装饰原色）和 --co-ink（文字色）。
 * 描边、淡底都由 --co 派生，所以换语义只要改这两行。
 */
.el9-callout {
    --co: var(--el9-accent);
    --co-ink: var(--el9-accent-text);

    margin: 1.6em 0;
    padding: var(--el9-4);
    border: 1px solid color-mix(in srgb, var(--co) 45%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--co) 5%, var(--el9-bg));
}

.el9-callout-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--co-ink);
}

.el9-callout-icon {
    display: inline-flex;
    flex: none;
    color: var(--co-ink);
}

.el9-callout-icon svg {
    display: block;
}

.el9-callout-body {
    margin-top: var(--el9-2);
    color: var(--el9-text);
    font-size: 14px;
    /* 卡里的正文比大正文紧凑一档，14px 配 1.65 刚好不挤 */
    line-height: 1.65;
}

.el9-callout-body p {
    margin: var(--el9-2) 0;
}

.el9-callout-body > *:first-child {
    margin-top: 0;
}

.el9-callout-body > *:last-child {
    margin-bottom: 0;
}

/* 五种语义只换变量 */
.el9-callout--note      { --co: var(--el9-c-note);    --co-ink: var(--el9-c-note-ink); }
.el9-callout--tip       { --co: var(--el9-c-tip);     --co-ink: var(--el9-c-tip-ink); }
.el9-callout--important { --co: var(--el9-accent);    --co-ink: var(--el9-accent-text); }
.el9-callout--warning   { --co: var(--el9-c-warning); --co-ink: var(--el9-c-warning-ink); }
.el9-callout--caution   { --co: var(--el9-c-caution); --co-ink: var(--el9-c-caution-ink); }

/* 旧浏览器没有 color-mix：退回中性底 + 左侧彩条，至少语义色还在 */
@supports not (background: color-mix(in srgb, red 10%, blue)) {
    .el9-callout {
        border-color: var(--el9-border);
        border-left: 3px solid var(--co);
        background: var(--el9-bg-soft);
    }
}

/*
 * 折叠面板：[details=标题] 内容 [/details]
 *
 * 结构由 el9RenderDetails() 输出，样式跟提示卡同一套规格（10px 圆角、
 * 主题色 45% 描边、5% 淡底），只是标题行可点、带一个会转的小箭头。
 */
.el9-fold {
    margin: 1.6em 0;
    padding: var(--el9-4);
    border: 1px solid color-mix(in srgb, var(--el9-accent) 45%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--el9-accent) 5%, var(--el9-bg));
}

.el9-fold > summary {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--el9-accent-text);
    cursor: pointer;
    user-select: none;
    list-style: none;
}

/* 去掉浏览器自带的小三角，换成自己的箭头 */
.el9-fold > summary::-webkit-details-marker {
    display: none;
}

.el9-fold > summary::before {
    content: '';
    flex: none;
    width: 7px;
    height: 7px;
    margin-right: 2px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform var(--el9-dur) var(--el9-ease);
}

.el9-fold[open] > summary::before {
    transform: rotate(45deg);
}

/* 标题为空时（作者只写了 [details]）兜一句默认文案 */
.el9-fold > summary:empty::after {
    content: '点击展开';
}

.el9-fold-body {
    margin-top: var(--el9-3);
}

.el9-fold-body > *:first-child {
    margin-top: 0;
}

.el9-fold-body > *:last-child {
    margin-bottom: 0;
}

@supports not (background: color-mix(in srgb, red 10%, blue)) {
    .el9-fold {
        border-color: var(--el9-border);
        background: var(--el9-bg-soft);
    }
}

.el9-content hr {
    height: 0;
    margin: 2em 0;
    border: 0;
    border-top: 1px solid var(--el9-border);
}

.el9-content img {
    max-width: 100%;
    height: auto;
    margin: 1.4em auto;
    border: 1px solid var(--el9-border);
    border-radius: var(--el9-r-md);
}

.el9-content code {
    padding: .12em .4em;
    border-radius: var(--el9-r-sm);
    background: var(--el9-bg-soft);
    font-family: var(--el9-font-mono);
    font-size: .875em;
}

/* B 站视频：16:9 自适应，圆角跟图片一致 */
.el9-bili {
    position: relative;
    margin: 1.4em 0;
    padding-top: 56.25%;
    border: 1px solid var(--el9-border);
    border-radius: var(--el9-r-md);
    overflow: hidden;
    background: #000;
}

.el9-bili iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.el9-card-text .el9-bili {
    margin: var(--el9-2) 0 0;
}

.el9-content pre {
    position: relative;
    margin: 1.4em 0;
    padding: var(--el9-4);
    border: 1px solid var(--el9-border);
    border-radius: var(--el9-r-md);
    background: var(--el9-bg-soft);
    overflow-x: auto;
    font-size: 14px;
    line-height: 1.7;
}

.el9-content pre code {
    padding: 0;
    background: none;
    font-size: inherit;
}

/* ---- 代码高亮（highlight.js token 配色，跟随深浅色） ---- */

.hljs {
    color: var(--el9-text);
    background: transparent;
}

.hljs-comment,
.hljs-quote {
    color: var(--el9-text-3);
    font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-doctag,
.hljs-name,
.hljs-strong {
    color: #d73a49;
}

.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-meta .hljs-string {
    color: #0a7d34;
}

.hljs-number,
.hljs-variable,
.hljs-template-variable,
.hljs-selector-attr,
.hljs-selector-pseudo {
    color: #b8561f;
}

.hljs-title,
.hljs-title.class_,
.hljs-title.function_,
.hljs-section {
    color: #6f42c1;
    font-weight: 600;
}

.hljs-attr,
.hljs-attribute,
.hljs-symbol,
.hljs-bullet,
.hljs-link {
    color: #005cc5;
}

.hljs-built_in,
.hljs-type,
.hljs-class .hljs-title {
    color: #c2410c;
}

.hljs-deletion {
    color: #b31d28;
}

.hljs-emphasis {
    font-style: italic;
}

/* 表格：外壳负责圆角和横向滚动，表格本身只管格子 */
.el9-table-wrap {
    margin: 1.6em 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    border: 1px solid var(--el9-border);
    border-radius: var(--el9-r-md);
    background: var(--el9-bg);
    -webkit-overflow-scrolling: touch;
}

.el9-table-wrap:focus-visible {
    outline: 2px solid var(--el9-accent-text);
    outline-offset: 2px;
}

.el9-content table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 15px;
}

.el9-content th,
.el9-content td {
    padding: 11px var(--el9-4);
    border-bottom: 1px solid var(--el9-border);
    text-align: left;
    vertical-align: top;
    line-height: 1.6;
}

/* 最后一排不留线，圆角才干净 */
.el9-content tbody tr:last-child td {
    border-bottom: 0;
}

.el9-content th {
    background: var(--el9-bg-soft);
    font-size: 13px;
    font-weight: 600;
    color: var(--el9-text-2);
    letter-spacing: .02em;
    white-space: nowrap;
    /* 表头下面的线加重一点，跟数据行区分开 */
    box-shadow: inset 0 -1px 0 var(--el9-border-strong);
}

.el9-content tbody tr:hover td {
    background: var(--el9-bg-hover);
}

/* 首列当行标题时稍微强调 */
.el9-content td:first-child {
    font-weight: 500;
}

.el9-content iframe,
.el9-content video {
    max-width: 100%;
    border-radius: var(--el9-r-md);
}

/* ---- 回复可见 [hide] ---- */

/* 锁住时：一张柔和的卡片，顶部一条提示条 + 下面糊掉的占位 */
.el9-secret {
    position: relative;
    margin: 1.6em 0;
    border: 1px solid var(--el9-border);
    border-radius: var(--el9-r-md);
    background: var(--el9-bg-soft);
    overflow: hidden;
}

/* 解锁后：去掉底纹，只留一圈淡边框把这段框出来 */
.el9-secret.is-open {
    border-color: var(--el9-border);
    background: none;
    padding: 0 var(--el9-4) 2px;
}

.el9-secret.is-open > *:first-child {
    margin-top: 0;
}

.el9-secret.is-open > *:last-child {
    margin-bottom: 0;
}

.el9-secret-tip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px var(--el9-4);
    border-bottom: 1px solid var(--el9-border);
    background: var(--el9-bg);
}

/* 锁图标：放进浅色圆底，跟提示框/标题图标一个路数 */
.el9-secret-tip .el9-icon {
    flex: none;
    width: 18px;
    height: 18px;
    padding: 5px;
    box-sizing: content-box;
    border-radius: var(--el9-r-full);
    background: var(--el9-accent-soft);
    color: var(--el9-accent-text);
}

.el9-secret-tip p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--el9-text-2);
}

/* 「回复」做成小按钮，比光一个链接更像个动作 */
.el9-secret-tip a {
    display: inline-block;
    margin: 0 2px;
    padding: 1px 8px;
    border-radius: var(--el9-r-full);
    background: var(--el9-accent-soft);
    color: var(--el9-accent-text);
    font-weight: 600;
    text-decoration: none;
}

.el9-secret-tip a:hover {
    background: color-mix(in srgb, var(--el9-accent) 18%, transparent);
    text-decoration: none;
}

/* 管理员看到的判定依据：低调地贴在锁定框底部，不抢正文注意力 */
.el9-secret-hint {
    margin: 0;
    padding: var(--el9-2) var(--el9-4);
    border-top: 1px dashed var(--el9-border);
    font-size: 11.5px;
    line-height: 1.7;
    color: var(--el9-text-3);
}

.el9-secret-hint code {
    padding: 1px 5px;
    border-radius: 5px;
    background: var(--el9-bg-soft);
    border: 1px solid var(--el9-border);
    font-family: var(--el9-font-mono);
    font-size: 11px;
    color: var(--el9-text-2);
}

/* 未回复时把原文糊掉：只留一点存在感，不让内容被选中/复制 */
.el9-secret-fog {
    position: relative;
    max-height: 88px;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    filter: blur(5px);
    opacity: .5;
    pointer-events: none;
}

.el9-secret-fog::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, var(--el9-bg-soft) 92%);
}

.el9-secret-fog > *:first-child {
    margin-top: 0;
}

.el9-secret-fog > *:last-child {
    margin-bottom: 0;
}

.el9-secret-fog img {
    max-height: 88px;
    object-fit: cover;
}

/* 多图网格（由 JS 包装） */
.el9-img-grid {
    display: grid;
    gap: var(--el9-1);
    margin: 1.4em 0;
    border-radius: var(--el9-r-md);
    overflow: hidden;
}

.el9-img-grid[data-count="2"] { grid-template-columns: 1fr 1fr; }
.el9-img-grid[data-count="3"] { grid-template-columns: repeat(3, 1fr); }

/* 九宫格：9 张排 3×3，跟三列同一套列宽 */
.el9-img-grid[data-count="9"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.el9-img-grid[data-count="4"] { grid-template-columns: 1fr 1fr; }

.el9-img-grid img {
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    object-fit: cover;
    aspect-ratio: 1 / 1;
}

.el9-img-grid[data-count="2"] img,
.el9-img-grid[data-count="3"] img {
    aspect-ratio: 3 / 4;
}

/* ---- 说说多图：横向滑动条 ---- */

.el9-img-strip {
    position: relative;
    margin: var(--el9-2) 0 var(--el9-1);
}

.el9-img-strip-track {
    position: relative;
    display: flex;
    gap: var(--el9-2);
    overflow-x: auto;
    /* 这里刻意不用 scroll-snap：吸附会在松手那一刻把位置拽回最近的图，
       从最右往回拖一点点就被弹回去，看着像「滑不回来了」；
       而且它跟 JS 直改 scrollLeft 也打架，手感一顿一顿。自由滑动最省心。 */
    scrollbar-width: none;
    padding-bottom: 2px;
    cursor: grab;
}

.el9-img-strip-track.is-dragging {
    cursor: grabbing;
    user-select: none;
    overscroll-behavior-x: contain;
}

/* 注意：拖拽时不要给 img 加 pointer-events:none ——
   is-dragging 是按下那一刻就加上的，一旦图片失去命中能力，
   mouseup 的落点会变成轨道，click 就被派发到图上做不到，灯箱打不开。
   防拖拽交给 img 上的 -webkit-user-drag:none 和 JS 的 draggable=false。 */
.el9-img-strip-track.is-dragging img {
    -webkit-user-drag: none;
}

.el9-img-strip-track::-webkit-scrollbar {
    display: none;
}

.el9-img-strip-track img {
    flex: 0 0 auto;
    /*
     * 宽度按原图比例走，但要给一个最小宽度：
     * 竖长截图（比如手机长截屏，宽高比 1:4）在固定高度下算出来的宽度只有 50 多像素，
     * 缩成一根细条很难看。min-width 兜底，超出的部分由 object-fit: cover 裁掉，
     * 想看全图点开灯箱。
     */
    width: auto;
    min-width: clamp(88px, 26vw, 132px);
    height: clamp(150px, 30vw, 216px);
    margin: 0;
    border: 1px solid var(--el9-border);
    border-radius: var(--el9-r-md);
    object-fit: cover;
    cursor: zoom-in;
    user-select: none;
    -webkit-user-drag: none;
}

/* ---- 说说单图：限高裁切，点击看全图 ---- */

/*
 * 说说单图：高度跟「多图横滑条」里的图一个量（clamp 那串数字是一模一样的），
 * 宽度按各自比例走 —— 长图就窄、宽图就宽，不再一律撑满正文。
 *
 * 这样一条说说里无论一张还是九张，图的高度都是同一条线，
 * 上下滚的时候不会一张占半屏、下一张只有一小条。
 * 想看大的点开灯箱（高度 216 只是列表里的显示尺寸，原图没动）。
 */
.el9-card-text .el9-img-solo,
.is-talk-single .el9-content .el9-img-solo {
    display: block;
    width: auto;
    max-width: 100%;
    height: clamp(150px, 30vw, 216px);
    /*
     * 跟横滑条里那条一模一样的下限：长图按比例算出来可能只有 100 出头，
     * 缩成一根牙签就什么都看不出了。给个底，超出的部分由 cover 裁。
     */
    min-width: clamp(88px, 26vw, 132px);
    object-fit: cover;
    object-position: center top;
    margin: var(--el9-2) 0;
    border: 1px solid var(--el9-border);
    border-radius: var(--el9-r-md);
    cursor: zoom-in;
    user-select: none;
    -webkit-user-drag: none;
}

/*
 * 说说单图里「原图本来就不宽」的那批：按原尺寸摆，不放大也不裁。
 *
 * 上面那条 width:100% + 限高裁切是给大图定的（横图撑满、竖图裁一截）。
 * 一张 300px 的图拉到 600 多再裁一刀，只是插值糊出来的残图，不如按原样放。
 * 这个 class 由 app.js 的 markSoloScale() 按 naturalWidth 判断后挂上。
 */
.el9-card-text .el9-img-solo.el9-img-solo-small,
.is-talk-single .el9-content .el9-img-solo.el9-img-solo-small {
    width: auto;
    max-width: 100%;
    height: auto;
    /* 高度照样封顶：原图本来就窄，再让它撑到五百多高，一条卡片就只剩图了 */
    max-height: min(340px, 45vh);
    object-fit: contain;
}

/* ---- 图片点击放大（文章正文 / 说说通用） ---- */

.el9-zoomable {
    cursor: zoom-in;
    -webkit-user-drag: none;
}

.el9-content img.el9-zoomable,
.el9-card-text img.el9-zoomable {
    border-radius: var(--el9-r-md);
    transition: box-shadow .18s ease, opacity .18s ease;
}

.el9-content img.el9-zoomable:hover,
.el9-card-text img.el9-zoomable:hover {
    box-shadow: 0 0 0 2px var(--el9-accent);
}

.el9-img-grid img.el9-zoomable:hover,
.el9-img-strip-track img.el9-zoomable:hover {
    box-shadow: none;
    opacity: .92;
}

.el9-img-strip-next {
    position: absolute;
    top: 50%;
    right: var(--el9-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: var(--el9-r-full);
    background: rgba(0, 0, 0, .5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%);
    transition: opacity 200ms var(--el9-ease), transform 200ms var(--el9-ease);
}

.el9-img-strip.is-scrollable .el9-img-strip-next {
    /* 同上：半透明常显，指针移上来才实体 */
    opacity: .8;
    pointer-events: auto;
}

.el9-img-strip.is-scrollable.is-end .el9-img-strip-next {
    opacity: 0;
    pointer-events: none;
}

.el9-img-strip-next:hover,
.el9-img-strip-prev:hover {
    opacity: 1;
}

.el9-img-strip-next:hover {
    transform: translateY(-50%) scale(1.08);
}

/* 往左翻：跟右边那个对称，滑到开头就藏起来 */
.el9-img-strip-prev {
    position: absolute;
    top: 50%;
    left: var(--el9-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: var(--el9-r-full);
    background: rgba(0, 0, 0, .5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%);
    transition: opacity 200ms var(--el9-ease), transform 200ms var(--el9-ease);
}

.el9-img-strip.is-scrollable .el9-img-strip-prev {
    opacity: .8;
    pointer-events: auto;
}

.el9-img-strip.is-scrollable.is-start .el9-img-strip-prev {
    opacity: 0;
    pointer-events: none;
}

.el9-img-strip-prev:hover {
    transform: translateY(-50%) scale(1.08);
}

/* 指示点：放不下才需要，全都能看见时就别摆一排点了 */
.el9-img-strip-dots {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: var(--el9-2);
}

.el9-img-strip.is-scrollable .el9-img-strip-dots {
    display: flex;
}

.el9-img-strip-dots button {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: var(--el9-r-full);
    background: var(--el9-border);
    cursor: pointer;
    transition: background var(--el9-dur) var(--el9-ease), width var(--el9-dur) var(--el9-ease);
}

.el9-img-strip-dots button.is-active {
    width: 14px;
    background: var(--el9-accent);
}

/* ---- 灯箱 ---- */

.el9-lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--el9-4);
    background: rgba(0, 0, 0, .9);
    cursor: zoom-out;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms var(--el9-ease);
}

.el9-lightbox.is-open {
    opacity: 1;
    pointer-events: auto;
}

.el9-lightbox img {
    max-width: 94vw;
    max-height: 94vh;
    border-radius: var(--el9-r-md);
    box-shadow: 0 12px 48px rgba(0, 0, 0, .5);
}

.el9-lightbox-btn {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    /*
     * 形状、常显透明度跟轮播 / 说说横滑条那两处翻页钮统一。
     * 只有底色不一样 —— 灯箱底下是一整块黑，用同一套深色底等于没有按钮。
     */
    border-radius: var(--el9-r-full);
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    opacity: .8;
    cursor: pointer;
    transition: background var(--el9-dur) var(--el9-ease), transform var(--el9-dur) var(--el9-ease),
        opacity var(--el9-dur) var(--el9-ease);
}

.el9-lightbox-btn:hover {
    background: rgba(255, 255, 255, .24);
    opacity: 1;
}

.el9-lightbox-close {
    top: var(--el9-4);
    right: var(--el9-4);
}

.el9-lightbox-prev,
.el9-lightbox-next {
    top: 50%;
    transform: translateY(-50%);
}

.el9-lightbox-prev {
    left: var(--el9-4);
}

.el9-lightbox-next {
    right: var(--el9-4);
}

.el9-lightbox.is-single .el9-lightbox-prev,
.el9-lightbox.is-single .el9-lightbox-next,
.el9-lightbox.is-single .el9-lightbox-count {
    display: none;
}

.el9-lightbox-count {
    position: absolute;
    left: 50%;
    bottom: var(--el9-5);
    transform: translateX(-50%);
    padding: 4px 12px;
    border-radius: var(--el9-r-full);
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
    .el9-lightbox-prev {
        left: var(--el9-2);
    }

    .el9-lightbox-next {
        right: var(--el9-2);
    }
}

.el9-code-copy {
    position: absolute;
    top: var(--el9-2);
    right: var(--el9-2);
    height: 28px;
    padding: 0 var(--el9-3);
    border-radius: var(--el9-r-sm);
    background: var(--el9-bg);
    border: 1px solid var(--el9-border);
    color: var(--el9-text-2);
    font-size: 12px;
    font-weight: 600;
    opacity: 0;
    transition: opacity var(--el9-dur) var(--el9-ease), color var(--el9-dur) var(--el9-ease);
}

.el9-content pre:hover .el9-code-copy,
.el9-code-copy:focus-visible {
    opacity: 1;
}

.el9-code-copy:hover {
    color: var(--el9-accent);
}

/* ==========================================================================
   8. 评论
   ========================================================================== */

/*
 * 评论区的左右留白必须跟正文、上下篇一样（基础 16px，窄屏由下面媒体查询统一改小）。
 * 原来这里是 0 —— 评论框比正文多外突 16px，PC 上看就是「评论没跟正文对齐」。
 */
.el9-comments {
    padding: var(--el9-4) 0 var(--el9-2);
    border-top: 1px solid var(--el9-border);
}

.el9-comments-head {
    display: flex;
    align-items: center;
    gap: var(--el9-2);
    margin-bottom: var(--el9-4);
}

.el9-comments-head .el9-icon {
    color: var(--el9-text);
}

.el9-section-title {
    display: flex;
    align-items: center;
    gap: var(--el9-2);
    margin: 0;
    font-size: 20px;
    font-weight: 800;
}

.el9-comment-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    /* 卡片之间的间距 */
    gap: var(--el9-2);
}

/* 评论卡片 */

.el9-cmt {
    display: flex;
    /* 头像和内容一律顶部对齐，不被 stretch 拉伸，拍平后每条的头像都在同一列 */
    align-items: flex-start;
    /* 子回复换行到下一行占满整宽（见 .el9-cmt-children），必须允许 wrap */
    flex-wrap: wrap;
    gap: var(--el9-3);
    /*
     * 评论改成列表行：不再一条一个卡片。
     * 上下留 18px 让每条之间有呼吸，左右保持原样（头像不贴边），
     * 条目之间用一条很淡的横线分隔（见下面的相邻选择器）。
     */
    padding: 18px var(--el9-5);
}

.el9-cmt-avatar .el9-avatar {
    display: block;
    width: 44px;
    height: 44px;
    border-radius: var(--el9-r-full);
    object-fit: cover;
}

.el9-cmt-avatar .el9-avatar--text {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    background: var(--el9-accent);
    line-height: 1;
}

.el9-cmt-main {
    flex: 1;
    min-width: 0;
}

/*
 * 评论头：两行两列。
 *
 *   昵称 + 身份标                      回复
 *   时间 · 回复 @某人
 *
 * 原来全挤在一行里靠 flex-wrap 换行 —— 名字一长就把时间挤到下一行，
 * 短名字又把「回复 @某人」拽上来，同一条评论列表里每条的断行位置都不一样。
 * 改成 grid 固定成两行，谁长谁短都在自己那格待着。
 */
.el9-cmt-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--el9-3);
    row-gap: 3px;
}

.el9-cmt-who,
.el9-cmt-sub {
    display: flex;
    align-items: center;
    gap: var(--el9-2);
    flex-wrap: wrap;
    min-width: 0;
}

.el9-cmt-who {
    grid-column: 1;
    grid-row: 1;
}

.el9-cmt-sub {
    grid-column: 1;
    grid-row: 2;
    gap: 6px;
}

/* 「回复」跟昵称同一水平线，靠右 —— 不再是压在底部标签行末尾 */
.el9-cmt-head .el9-cmt-act {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
}

.el9-cmt-name {
    font-weight: 600;
    font-size: 15px;
    color: inherit;
    text-decoration: none;
}

/*
 * 休眠链接：这个人已经很久没来留言了，他以前留的网址不再往外跳。
 *
 * 颜色压到次要文字那一档，加一条虚点下划线（表示「本来是个链接」），
 * 鼠标显示帮助光标 —— 点下去不跳转，只弹一句提示。
 * 不做成禁用灰：那样看着像坏链，这里传达的是「暂时不跳」而不是「坏了」。
 */
.el9-cmt-name.is-dormant {
    color: var(--el9-text-3);
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    cursor: help;
}

.el9-cmt-name.is-dormant:hover {
    color: var(--el9-text-2);
}

.el9-cmt-badge {
    font-size: 11px;
    line-height: 1;
    padding: 3px 8px;
    border-radius: var(--el9-r-full);
    border: 1px solid var(--el9-border);
    color: var(--el9-text-2);
}

/* 好友：邮箱命中友链邮箱的评论者。用橙色跟博主的蓝色区分开 */
.el9-cmt-badge--friend {
    border-color: color-mix(in srgb, #f59e0b 40%, transparent);
    color: #b45309;
    background: color-mix(in srgb, #f59e0b 10%, transparent);
}

.el9-cmt-badge--owner {
    border-color: color-mix(in srgb, var(--el9-accent) 40%, transparent);
    color: var(--el9-accent);
    background: color-mix(in srgb, var(--el9-accent) 8%, transparent);
}

/*
 * 神秘人：点匿名按钮发的、或者没填昵称的访客。
 * 用中性灰 —— 博主是蓝、好友是橙，这个要是再抢色，「博主」就不显眼了。
 */
.el9-cmt-badge--guest {
    border-color: var(--el9-border-strong);
    color: var(--el9-text-2);
    background: var(--el9-bg-soft);
}

.el9-cmt-time a {
    font-size: 12px;
    color: var(--el9-text-3);
    text-decoration: none;
}

.el9-cmt-time a:hover {
    color: var(--el9-accent);
}

/* 评论拍平后，这条「回复 @某人」是判断层级关系的唯一线索，
   给它一点主题色，扫一眼就能看出在回复谁 */
.el9-cmt-replyto {
    font-size: 12px;
    font-weight: 500;
    color: var(--el9-accent-text);
}

.el9-cmt-pending {
    margin: var(--el9-2) 0 0;
    font-size: 12px;
    color: #d97706;
}

/*
 * 正文和底部标签行都顶到「头像的左边缘」，昵称和时间留在头像右侧。
 *
 * 这是这套版式的关键：内容不能缩在头像后面。缩进去的话，每条评论的正文
 * 都从头像宽 + 栏间距那儿起笔，一屏看下来左边缘参差不齐，而且正文可用宽度
 * 白白少 56px —— 短句刚够换行的地方被挤成两行。
 *
 * 负 margin 的数值正好等于「头像 44 + 栏间距 12」，所以左边顶到 li 的内边缘为止，
 * 右边靠 width 同步加回来，不会溢出卡片。头像尺寸或间距改了，这里跟着走。
 */
.el9-cmt-text,
.el9-cmt-meta {
    margin-left: calc(-1 * (44px + var(--el9-3)));
    width: calc(100% + 44px + var(--el9-3));
}

.el9-cmt-text {
    margin-top: var(--el9-2);
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--el9-text);
    overflow-wrap: break-word;
}

.el9-cmt-text p {
    margin: 0 0 var(--el9-2);
}

.el9-cmt-text p:last-child {
    margin-bottom: 0;
}

.el9-cmt-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--el9-3);
    flex-wrap: wrap;
    /* 左边顶到头像左边缘 —— 跟正文用同一条规则，见上面的 .el9-cmt-text 那段 */
}

.el9-cmt-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    line-height: 1;
    padding: 4px 9px;
    border-radius: var(--el9-r-full);
    border: 1px solid var(--el9-border);
    color: var(--el9-text-3);
    background: var(--el9-bg);
}

.el9-cmt-chip .el9-icon {
    color: var(--el9-accent);
}

.el9-cmt-act {
    /* 位置交给 .el9-cmt-head 的 grid 定，这里不再自己顶到行尾 */
    white-space: nowrap;
}

.el9-cmt-act a {
    font-size: 12px;
    color: var(--el9-text-3);
    text-decoration: none;
}

.el9-cmt-act a:hover {
    color: var(--el9-accent);
}

/* 子评论：左竖线缩进 */

.el9-cmt-children {
    /*
     * 子回复：换行到评论下方、占满整宽，不再缩进。
     * 它在 <li> 的直接子级，父级 .el9-cmt 是 flex-wrap，
     * flex: 0 0 100% 让它独占一行，起点和顶层评论的头像对齐。
     * 层级关系只靠每条的「回复 @某人」表达。
     */
    flex: 0 0 100%;
    width: 100%;
    margin-top: 0;   /* 换行后的间距交给父级 .el9-cmt 的 gap，不然会翻倍 */
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
    display: flex;
    flex-direction: column;
    gap: var(--el9-4);
}

.el9-cmt-children .el9-comment-list {
    gap: var(--el9-4);
}

/*
 * 一个顶层评论 + 它下面所有回复 = 一个对话 = 一张卡片。
 * 顶层评论不带 --child，回复都带 —— 所以这里只给顶层套卡片外观，
 * 回复在卡片内部保持透明（见下面的 --child 规则），靠缩进和留白分层。
 */
.el9-cmt:not(.el9-cmt--child) {
    background: var(--el9-bg);
    border: 1px solid var(--el9-border);
    border-radius: var(--el9-r-lg);
    padding: 16px 18px;
}

/*
 * 子回复：去掉卡片外观和内边距，视觉上跟顶层完全同构。
 * 用双类提高权重 —— 只写 .el9-cmt--child 的话，
 * 后面 @media 里的 .el9-cmt { padding: ... } 会把它覆盖掉
 * （同一个 li 同时匹配这两个选择器，后写的赢），
 * 结果手机上子回复凭空多出一圈内边距，看着像缩进了。
 */
.el9-cmt.el9-cmt--child {
    /*
     * 子回复：同一个对话内部，不画分隔线，只靠上下留白把层次拉开。
     * 左右保持 0（它已经在父评论的内边距里，再给就缩进了）。
     */
    border: 0;
    padding: 14px 0 0;
    background: transparent;
}

/* 拍平后子评论和顶层完全同构，头像尺寸也跟着统一 */

/* 回复时被挪进评论里的发布框 */

.el9-cmt .el9-respond {
    /*
     * 必须独占一行。
     *
     * .el9-cmt 是 flex-wrap 容器，子元素依次是「头像 44px / 内容 / 子回复」。
     * 表单被挪进来时如果没有这条，它会被当成下一个 flex item 排到头像右边 ——
     * 结果就是输入框左边空出 56px（头像列 + gap），右边一路顶到卡片边缘，
     * 窄屏上看着就像「莫名其妙缩进了一大块」，底下的按钮也跟着被挤散。
     */
    flex: 0 0 100%;
    /* 上下间距交给 .el9-cmt 的 gap，别再叠一层 12px */
    margin: 0;
}

/* 评论表单 */

/*
 * 蜜罐字段：挪出视口，不要用 display:none ——
 * 有些脚本会跳过所有隐藏的输入框，那样就白设了。
 * 用「看得见但不在屏幕上」的写法，脚本照填不误。
 */
.el9-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/*
 * 评论框保持「输入框自己带边框」的样子，不做卡片化。
 *
 * 唯一动过的是字号：一律 16px —— iOS Safari 对 font-size < 16px 的输入框，
 * 聚焦时会强制放大整个页面。原来 .el9-respond-fields .el9-input 写 13.5px，
 * 权重比媒体查询里那条 16px 补丁高，补丁一直没生效。
 */
.el9-respond {
    margin: 0 0 var(--el9-5);
}

.el9-respond .el9-textarea {
    width: 100%;
    min-height: 120px;
    padding: var(--el9-3) var(--el9-4);
    border: 1px solid var(--el9-border);
    border-radius: var(--el9-r-lg);
    background: var(--el9-bg-soft);
    font: inherit;
    font-size: 16px;
    line-height: 1.6;
    color: var(--el9-text);
    resize: vertical;
    transition: border-color var(--el9-dur) var(--el9-ease), box-shadow var(--el9-dur) var(--el9-ease);
}

.el9-respond .el9-textarea:focus {
    outline: none;
    border-color: var(--el9-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--el9-accent) 18%, transparent);
}

.el9-respond-fields {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--el9-2);
    margin-top: var(--el9-2);
}

.el9-respond-fields .el9-input {
    width: 100%;
    padding: 9px var(--el9-3);
    border: 1px solid var(--el9-border);
    border-radius: var(--el9-r-md);
    background: var(--el9-bg-soft);
    font: inherit;
    font-size: 16px;
    color: var(--el9-text);
    transition: border-color var(--el9-dur) var(--el9-ease);
}

.el9-respond-fields .el9-input:focus {
    outline: none;
    border-color: var(--el9-accent);
}

.el9-respond-fields[hidden] {
    display: none;
}

/* ---- 昵称/邮箱面板：手机从底部弹出，跟「发布说说」同一套手感 ---- */
.el9-fieldbox {
    position: fixed;
    inset: 0;
    z-index: 220;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6vh var(--el9-4);
}

.el9-fieldbox[hidden] {
    display: none;
}

.el9-fieldbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 24, 40, .42);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.el9-fieldbox-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    padding: var(--el9-4);
    border-radius: var(--el9-r-lg);
    background: var(--el9-bg);
    box-shadow: 0 24px 60px rgba(16, 24, 40, .18);
}

.el9-fieldbox-head {
    display: flex;
    align-items: center;
    gap: var(--el9-3);
    margin-bottom: var(--el9-2);
}

.el9-fieldbox-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--el9-text);
}

.el9-fieldbox-close {
    margin-left: auto;
    padding: 4px 10px;
    border: 0;
    border-radius: var(--el9-r-full);
    background: transparent;
    color: var(--el9-text-2);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.el9-fieldbox-close:hover {
    background: var(--el9-bg-hover);
    color: var(--el9-text);
}

.el9-fieldbox-tip {
    margin: 0 0 var(--el9-3);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--el9-text-3);
}

/* 面板里三个字段一律竖排，别挤成三列 */
.el9-fieldbox .el9-respond-fields {
    grid-template-columns: 1fr;
}

.el9-fieldbox-done {
    width: 100%;
    margin-top: var(--el9-4);
}

/* 面板打开时锁住页面滚动 */
body.is-fieldbox-open {
    overflow: hidden;
}

/* 手机：从底部上滑 */
@media (max-width: 699px) {
    .el9-fieldbox {
        align-items: flex-end;
        padding: 0;
    }

    .el9-fieldbox-inner {
        max-width: none;
        padding-bottom: calc(var(--el9-4) + env(safe-area-inset-bottom, 0px));
        border-radius: var(--el9-r-lg) var(--el9-r-lg) 0 0;
    }
}

/*
 * 宽屏：这个壳降级成透明容器 —— 桌面不为了三个输入框弹窗，
 * 字段照旧就地展开（显隐由按钮控制），三列并排。
 */
@media (min-width: 700px) {
    .el9-fieldbox {
        position: static;
        display: block;
        padding: 0;
    }

    .el9-fieldbox-backdrop,
    .el9-fieldbox-head,
    .el9-fieldbox-tip,
    .el9-fieldbox-done {
        display: none;
    }

    .el9-fieldbox-inner {
        max-width: none;
        padding: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .el9-fieldbox .el9-respond-fields {
        grid-template-columns: repeat(3, 1fr);
    }
}

/*
 * 「填写昵称和邮箱」/「匿名」跟「发表评论」并排站一行，高度必须一样
 * （原来是 34 vs 40，看着像没对齐）。
 */
.el9-anon-btn {
    height: 40px;
    padding: 0 var(--el9-4);
    font-size: 13px;
    font-weight: 500;
    /*
     * 跟着后台主题色走。
     *
     * 原来这颗是灰字灰框，旁边「发表评论」是实心主题色 —— 一个彩色一个中性，
     * 后台改主题色时只有一半跟着变，看着像两套配色。
     *
     * 现在改成同色系的主次两级：实心 / 描边，而不是彩色 / 灰色。
     * 文字用 accent-text 而不是 accent —— 13px 属于正文级小字，要 4.5:1，
     * accent 原色在白底只有 3:1，压暗过的 accent-text 才够（5.01:1）。
     */
    border-color: color-mix(in srgb, var(--el9-accent) 42%, transparent);
    color: var(--el9-accent-text);
}

.el9-anon-btn:hover {
    border-color: var(--el9-accent);
    color: var(--el9-accent-text);
    background: color-mix(in srgb, var(--el9-accent) 8%, transparent);
}

/*
 * 身份行：压在输入框内部的右下角，跟左下角的表情 / 私密同一条底带。
 * 单独占一行摆在框外面，会让整个表单看着像「还差一块没填完」。
 */
.el9-respond-user {
    position: absolute;
    right: 12px;
    bottom: 10px;
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--el9-text-3);
    z-index: 1;
}

.el9-respond-user a {
    color: var(--el9-accent);
    text-decoration: none;
}

/* 回复框里不再放头像（0.5.18），输入框直接占满整行 */
.el9-respond-main {
    display: flex;
    align-items: flex-start;
}

.el9-respond-main .el9-textarea {
    flex: 1;
    min-width: 0;
}

.el9-respond-foot {
    display: flex;
    align-items: center;
    /* 「取消回复」占满一行（flex-basis 100%），不允许 wrap 的话它会把旁边两颗挤扁 */
    flex-wrap: wrap;
    gap: var(--el9-3);
    margin-top: var(--el9-2);
}

/*
 * 发表评论按钮（纸飞机 + 文字）
 *
 * 这里原来挂着一整套 hover 动效：纸飞机往右上飞出去、转 45°、上下扇动，
 * 文字跟着滑出右边（靠 overflow: hidden 把飞出去的部分裁掉）。
 * 老卢 2026-10-25 要求取消 —— 这套主题整体走「去动效」路线，按钮抖一下反而跳。
 * 现在悬停只把底色压暗一档，没有任何位移和缩放，触摸设备也没有落差。
 */
.el9-submit {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 18px 0 15px;
    border: 0;
    border-radius: var(--el9-r-full);
    /*
     * 底色用 accent，不是 accent-strong —— 后者是压暗过的，跟后台设的主题色对不上。
     * 白字压在 accent 上是 3.1:1，但 15px/600 算「大文本」，门槛是 3:1，达标。
     */
    background: var(--el9-accent);
    color: var(--el9-accent-contrast);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    transition: filter var(--el9-dur) var(--el9-ease);
}

/* 悬停只压暗一档，不做任何位移 */
.el9-submit:hover {
    filter: brightness(.93);
}

.el9-submit-ico {
    display: flex;
    flex: none;
}

.el9-submit-ico svg {
    display: block;
}

/* 系统开了「减弱动态效果」：连底色变化也省掉 */
@media (prefers-reduced-motion: reduce) {
    .el9-submit {
        transition: none;
    }
}

.el9-respond-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--el9-3);
}

/* 「取消回复」只在回复某条评论时才露出来（app.js 里加 / 摘 is-on），
   平时没有回复对象，摆着只会让人以为按了会清空输入框 */
.el9-cancel-reply {
    display: none;
}

.el9-cancel-reply.is-on {
    display: flex;
    /* 独占一行：它是「退出回复」，跟「发表评论」挨着放太容易误点 */
    flex: 0 0 100%;
    margin: 0 0 2px;
}

.el9-cancel-reply a {
    font-size: 13px;
    color: var(--el9-text-3);
    text-decoration: none;
}

.el9-cancel-reply a:hover {
    color: var(--el9-accent);
}

.el9-comments-closed {
    padding: var(--el9-4) 0;
    color: var(--el9-text-2);
    font-size: 15px;
}

.el9-comment-pager {
    margin-top: var(--el9-4);
    font-size: 14px;
}

.el9-comment-pager a {
    color: var(--el9-accent);
    text-decoration: none;
    font-weight: 600;
}
/* ==========================================================================
   9. 空状态 / 404
   ========================================================================== */

/* ---- 搜索结果头部 ----
   只解决「我在搜什么、有多少条、怎么换词」这三件事，别再加装饰。
   样式跟列表卡片同源：同样的描边、圆角、底色。 */
/*
 * 搜索页头部：不做成卡片，就是一条细线 ——
 * 下面紧跟着结果列表，再套一层框会显得两块东西在抢。
 */
.el9-searchhead {
    display: flex;
    align-items: center;
    gap: var(--el9-3);
    position: relative;
    margin-bottom: var(--el9-2);
    padding: 0 0 var(--el9-3);
    border-bottom: 1px solid var(--el9-border);
}

.el9-searchhead-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--el9-text-3);
}

/* 「搜索」两个字是给屏幕阅读器和老浏览器留的语义，视觉上不占位置 */
.el9-searchhead-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* min-width: 0 是必须的：flex 子项默认 min-width:auto，
   关键词很长时会把右边那一组挤出去，而不是自己省略 */
.el9-searchhead-main {
    flex: 1 1 auto;
    min-width: 0;
}

.el9-searchhead-label {
    margin: 0;
    color: var(--el9-text-3);
    font-size: 12px;
    line-height: 1.5;
}

.el9-searchhead-word {
    margin: 0;
    color: var(--el9-text);
    font-size: 18px;
    font-weight: 650;
    line-height: 1.45;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.el9-searchhead-side {
    display: flex;
    align-items: center;
    gap: var(--el9-3);
    flex: 0 0 auto;
}

.el9-searchhead-count {
    color: var(--el9-text-3);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.el9-searchhead-again {
    height: 32px;
    padding: 0 var(--el9-3);
    border: 1px solid var(--el9-border);
    border-radius: var(--el9-r-full);
    background: transparent;
    color: var(--el9-text-2);
    font-family: inherit;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--el9-dur) var(--el9-ease),
        background var(--el9-dur) var(--el9-ease),
        color var(--el9-dur) var(--el9-ease);
}

.el9-searchhead-again:hover {
    border-color: var(--el9-border-strong);
    background: var(--el9-bg-soft);
    color: var(--el9-text);
}

/* ---- 搜索结果的版式：一律线条，不加框 ---- */

/* 搜索页那一行「包含关键字 X 的文章」和上面的头部重复，藏掉；搜索框留着 */
.is-search .el9-feedbar-title {
    display: none;
}

/* 命中的词标一下。底色克制，只做定位用，不做高亮块 */
.el9-hl {
    padding: 0 1px;
    border-radius: 2px;
    background: rgba(255, 205, 60, .42);
    color: inherit;
}


/*
 * 结果条目：一张张只有线条的卡片，条与条之间留缝。
 *
 * 和首页信息流刻意不一样 —— 那边是通栏细线（连续时间线），
 * 这边一条一个框（待挑选的清单）。全是线条，不加底色和阴影。
 */
.is-search .el9-feed {
    gap: var(--el9-3);
    padding-top: var(--el9-3);
}

.is-search .el9-feed .el9-card {
    padding: var(--el9-4) var(--el9-5);
    border: 1px solid var(--el9-border);
    border-radius: var(--el9-r-md);
    background: var(--el9-bg);
    transition: border-color var(--el9-dur) var(--el9-ease);
}

.is-search .el9-feed .el9-card:last-child {
    border-bottom: 1px solid var(--el9-border);
}

.is-search .el9-feed .el9-card:hover {
    border-color: var(--el9-border-strong);
}

/* 出处那一行（分类 / 时间）：比正文小一号，颜色退到第三级 */
.is-search .el9-card-sub {
    font-size: 12px;
    color: var(--el9-text-3);
}

/* 结果标题比首页卡片略小一点，一屏能多一条 */
.is-search .el9-card.is-compact .el9-card-title {
    margin-bottom: 3px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
}

.is-search .el9-card.is-compact .el9-card-text {
    color: var(--el9-text-2);
    line-height: 1.65;
}

.el9-empty {
    padding: 64px var(--el9-5);
    text-align: center;
}

.el9-empty--404 {
    padding-top: 96px;
}

.el9-404-code {
    font-size: 64px;
    font-weight: 800;
    letter-spacing: -.04em;
    color: var(--el9-accent);
    line-height: 1;
}

.el9-empty-title {
    margin-top: var(--el9-3);
    font-size: 23px;
    font-weight: 800;
}

.el9-empty-text {
    margin-top: var(--el9-2);
    color: var(--el9-text-2);
    font-size: 15px;
}

.el9-empty .el9-btn {
    margin-top: var(--el9-5);
}

/* ==========================================================================
   10. 响应式
   ========================================================================== */

@media (max-width: 1200px) {
    /*
     * 信息流通栏列表：卡片占满整宽、去边框圆角、条目之间用细线分隔。
     * 放在 1200 而不是 999/699 —— 只要不是大屏桌面就一律通栏，
     * 免得设备实际视口落在两个断点之间时「怎么改都不生效」。
     */
    :root {
        --el9-main-pad: 0;
    }

    .el9-feed {
        gap: 0;
    }

    .el9-card {
        padding: 12px;
        border: 0;
        border-bottom: 1px solid var(--el9-border);
        border-radius: 0;
        background: transparent;
    }

    .el9-card:last-child {
        border-bottom: 0;
    }

    .el9-card:hover {
        border-color: transparent;
        border-bottom-color: var(--el9-border);
    }

    /*
     * 窄屏正文不限行宽：所有块级子元素统一铺满。
     * 之前只对 p/ul/ol 等一部分元素放开，漏了 h1（基础规则里它有 40em 上限），
     * 结果标题比正文窄一截，看着参差不齐。
     * 窄屏容器本来就不宽，一行 30~40 字，不需要再限宽。
     */
    /*
     * 解除正文行宽限制。
     * 必须用跟基础区完全一样的选择器列表，并且加 !important：
     * 基础区写的是 `.el9-content > p`（权重 0,1,1），
     * 之前这里图省事写成 `.el9-content > *`（0,1,0）——权重更低，根本没覆盖掉，
     * 所以手机上正文右侧一直空着一块，怎么调都没变化。
     */
    .el9-content > p,
    .el9-content > h1,
    .el9-content > h2,
    .el9-content > h3,
    .el9-content > h4,
    .el9-content > h5,
    .el9-content > h6,
    .el9-content > ul,
    .el9-content > ol,
    .el9-content > blockquote,
    .el9-content > .el9-callout,
    .el9-content > .el9-fold,
    .el9-content > pre,
    .el9-content > .el9-table-wrap,
    .el9-content > figure,
    .el9-content > .el9-img-grid,
    .el9-content > .el9-img-strip,
    .el9-content > .el9-secret {
        max-width: 100% !important;
    }

    /*
     * 说说时间线整套跟着左移，三个位置必须一起算，否则线、点、头像会各走各的：
     *   头像左边缘 = 4px 内边距，头像 44px → 中心 26px
     *   竖线 left   = 26 - 1（线宽 2px 的一半）= 25px
     *   蓝点 left   = 26 - 6（点直径 12px 的一半）= 20px
     *   日期文字    = 26 + 10 = 36px（在点右侧留 10px）
     * 上一版就是漏改了蓝点（还停在 34px），所以看着「有一点位移」。
     */
    .el9-feed--timeline .el9-card {
        padding-left: 4px;
    }

    .el9-feed--timeline::before {
        left: 25px;
    }

    .el9-timeline-sep::before {
        left: 20px;
    }

    .el9-timeline-sep {
        padding-left: 36px;
    }

    /*
     * 兜底强制贴边。
     * 前面已经按常规层叠把 padding 设成 0 / 4px，但如果还有别的规则
     * （不同断点、更高权重变体、第三方样式）在覆盖，视觉上就会「怎么改都不动」。
     * 这里用 !important 一次性压住，只针对左右，不影响上下间距。
     */
    .el9-main {
        padding-left: 0 !important;
        padding-right: 0 !important;
        /*
         * 顶部也归零：手机上没有顶部导航条，轮播/信息流应该直接顶到屏幕上沿。
         * 原来留了 8px，轮播上方看着就有一条白带。
         * 文章页不受影响 —— 正文容器的 .el9-article 自带 8px 上内边距。
         */
        padding-top: 0 !important;
    }

    .el9-card {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    /*
     * 负 margin 要跟着卡片内边距一起收。
     * 动作按钮和侧栏列表原本用 -8px 负 margin 抵消自己的 8px 内边距，
     * 好让文字贴齐卡片边缘；但卡片左右现在只剩 4px，-8px 会顶出去 4px，
     * 于是整页多出一条横向滚动条。这里统一收到 -4px。
     */
    .el9-act {
        margin-left: -4px;
    }

    /*
     * 🔴 上面那条 `.el9-act`（0,1,0）写在 .el9-act--more 的 `margin-left: auto` 后面，
     * 权重相同 → 后写的赢，把「阅读全文」的靠右挤掉了，手机上它会贴着分享图标。
     * 下面两条必须留着，把语义还回去：分享是正方形按钮不吃负 margin，
     * 阅读全文靠 margin-left:auto 顶到右端。
     */
    .el9-act--share {
        margin-left: 0;
    }

    .el9-act--more {
        margin-left: auto;
        margin-right: 0;
        padding-right: 0;
    }

    .el9-list {
        margin-left: -4px;
        margin-right: -4px;
    }

    /*
     * 这里原来有一条「正文里带背景的块（目录 / 提示框）通栏」的规则：
     * 负 margin 各 -16px，把背景铺到屏幕边、去掉圆角和左右描边。
     *
     * 现在不能这么干了 —— 所有块都跟正文同宽（max-width: 100%），
     * 负 margin 只会把卡片整体左移 16px：左边顶出容器、右边缩回 32px，
     * 右边缘就跟段落对不上。要保持「块和文字一条共同边界」，
     * 就让它们老老实实待在内容区里，靠圆角和描边区分。
     */

    /*
     * 网格卡片归档改成 CSS Grid。
     * 原来用 flex + margin：容器有 -8px 负 margin（卡片贴屏幕边），
     * 每张卡又各带 8px margin → 左右贴边、中间却空 16px，很难看。
     * Grid 用 gap 统一管间距，容器不再需要负 margin。
     */
    .el9-grid-feed {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--el9-2);
        margin: var(--el9-2) 0 0;
    }

    .el9-grid-card {
        width: auto;
        margin: 0;
    }

    /*
     * 文章页三块（正文容器 / 上下篇 / 评论）共用同一层左右留白。
     *
     * 原来上下篇是「撑满不跟着正文留边」、评论压根没有左右 padding，
     * 结果手机上这两个块直接贴屏幕边（量出来 left=0），只有正文有 16px，
     * 三块参差、评论的输入框和按钮还紧贴着边。
     *
     * 留白只做在这一层：主栏（.el9-main）在窄屏归零，别叠两层。
     */
    .is-post .el9-article,
    .is-page .el9-article,
    .is-post .el9-near,
    .is-post .el9-comments,
    .is-page .el9-comments {
        padding-left: 0;
        padding-right: 0;
    }
/*
 * iOS Safari 对 font-size < 16px 的输入框，聚焦时会强制放大整个页面。
 * 这是移动端最烦人的体验问题之一（点一下评论框，页面「跳大」）。
 * 触屏设备统一 16px，桌面保持 15px 不动。
 */
.el9-textarea,
.el9-composer textarea,
.el9-respond .el9-textarea,
.el9-searchbox input,
.el9-respond input {
    font-size: 16px;
}

/*
 * 通栏列表的条目上下留白：12 → 14。
 * 条目之间只靠一条细线分隔，12px 会让相邻两条挤在一起。
 */
.el9-card {
    padding: 14px 4px;
}
}

@media (max-width: 1149px) {
    .el9-shell {
        /* 跟桌面同一个量：四周留白不按断点分档，换设备才不会「一半 16 一半 12」 */
        padding: 0 var(--el9-bleed);
    }
}

@media (max-width: 1099px) {
    :root {
        /* iPad 这一档（1000–1099）主栏左右 padding 归零，
           缝沿用 1200 断点那套「12 + 竖线 + 12」 */
        --el9-side-w: 264px;
        --el9-main-pad: 0;
    }

    /*
     * 文章页 / 独立页的左右留白只做一层，见上面 1200 断点里那段
     * （.el9-article / .el9-near / .el9-comments 统一 20px）。
     * 主栏必须归零，否则两层叠起来变成 36px，比桌面还宽。
     */
    .is-post .el9-main,
    .is-page .el9-main,
    .is-404 .el9-main {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 999px) {
    /*
     * 窄屏：顶部那条站点导航整条收起，导航交给底部栏 + 抽屉。
     *
     * 所以「发布」入口不能只挂在站点导航里 —— 它在手机端会跟着一起消失。
     * 手机端的入口是底部栏那一项（footer.php 里的 #composer / 默认项「发布」），
     * 跟搜索一样唤起同一个弹层。改这块之前先想清楚移动端从哪里点得到。
     */

    /* 侧栏那个搜索框在窄屏收掉：顶部导航条上已经有搜索图标了，
       抽屉里再放一个既重复又占地方 */
    .el9-rail .el9-search,
    .el9-search--bar {
        display: none;
    }

    /*
     * 触摸目标补齐 44px：这些控件视觉上只有 32~40px，
     * 手指点不准。用透明伪元素把可点区域撑到 44，外观不变。
     */
    .el9-act::after,
    .el9-nav-mini::after,
    .el9-banner-tool::after,
    .el9-icon-btn::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
    }

    /*
     * 手机上动作栏一行摆不下四个项，允许换行：
     * 配合 .el9-act 的 nowrap，永远不会出现「3 分 / 钟」这种断法。
     */
    .el9-card-actions {
        flex-wrap: wrap;
        row-gap: 2px;
        gap: var(--el9-2) var(--el9-3);
    }

    /*
     * 左右留白收紧：main-pad 之外卡片自己还有 24px 内边距，
     * 叠起来 40px，375px 的屏幕内容只剩 295px。
     * 卡片内边距收到 16，窄屏 main-pad 再降到 12，内容宽出约 30px。
     */

    /*
     * 评论表单的动作行手机上放不下四个元素，允许换行：
     * 「填写昵称邮箱」占一行，按钮组靠右到下一行。
     * 按钮本体锁 nowrap + flex:none，不然会被压成「匿 / 名」竖排。
     */
    /*
    /*
     * 文章页 / 独立页的左右边距要跟着一起收。
     * 这两页有自己的规则：主栏 24px + .el9-article 16px = 每侧 40px，
     * 之前只改了列表页的 main-pad 和卡片内边距，文章页一直没动，
     * 所以看文章时「怎么改都没变化」。现在跟列表页统一成 12px。
     */
    /*
     * 文章页 / 独立页要保住阅读边距：列表页通栏了，但长文贴边没法读。
     * 这里写死 12px，不跟 --el9-main-pad 走（那个已经是 0）。
     */
    /*
     * 文章页的左右留白只设一层：主栏归零，留白交给
     * .el9-article / .el9-near / .el9-comments 三个兄弟块（1200 断点里统一 20px）。
     * 之前是「主栏 16px + 文章容器 0」，而本文目录、引用块、图片这些
     * 都在文章容器里、边距算法不一样，视觉上就出现了「正文比别人窄」。
     */
    .is-post .el9-main,
    .is-page .el9-main,
    .is-404 .el9-main {
        padding-left: 0;
        padding-right: 0;
    }

    /*
     * 评论已经全端拍平了（见 .el9-cmt-children 的基础样式），
     * 这里不用再给缩进和头像做手机特调 —— 头像统一 44px 反而更整齐。
     */


    /*
     * 说说多图的左右箭头在手机上收掉：手指直接横滑就行，
     * 箭头挡在图上有 36px 的圆，反而遮内容。
     */
    .el9-img-strip-prev,
    .el9-img-strip-next {
        display: none;
    }

    /*
     * 回复框底部那排按钮：小一号、一行排开。
     *
     *   取消回复                            ← 自己占一行（见基础样式）
     *   填写昵称和邮箱 ……… 匿名 发表评论     ← 辅助的在左，两个主操作在右
     *
     * 40px 高、15px 字、满宽的蓝色大按钮在手机上像条横幅，比输入框还抢；
     * 这里统一压到 34px / 13px。昵称按钮靠 margin-right:auto 把右边那组顶过去，
     * 万一窄到换行（320 以下），右边那组也是从左边接着排，不会一边齐一边不齐。
     */
    .el9-respond-foot {
        flex-wrap: wrap;
        gap: 6px;
    }

    .el9-respond-foot > .el9-btn {
        flex: 0 0 auto;
        height: 34px;
        margin-right: auto;
        padding: 0 11px;
        font-size: 13px;
        white-space: nowrap;
    }

    .el9-cancel-reply a {
        font-size: 12.5px;
    }

    .el9-respond-actions {
        display: flex;
        align-items: center;
        gap: 6px;
        flex: 0 1 auto;
        margin-left: 0;
        min-width: 0;
    }

    /* 匿名：跟发表评论同款小尺寸，图标和文字之间留 5px */
    .el9-respond-actions .el9-btn {
        height: 34px;
        gap: 5px;
        padding: 0 10px;
        font-size: 13px;
    }

    /* 发表评论：小一号，图标和文字居中，别拉通栏 */
    .el9-respond-actions .el9-submit {
        flex: 0 0 auto;
        gap: 6px;
        height: 34px;
        padding: 0 12px 0 10px;
        font-size: 13px;
        justify-content: center;
    }

    /*
     * 手机上把层级拉开一点：
     * meta 行（名字 / 时间）降到 14，跟 15px 的正文区分开；
     * 卡片标题 19 → 18，手机上 19 有点抢。
     */
    .el9-card-head {
        font-size: 14px;
        line-height: 20px;
    }

    .el9-card-title {
        font-size: 18px;
    }

    .el9-carousel {
        margin-top: var(--el9-2);
    }

    /*
     * 位置标签的 margin-left:auto 是给「一行摆得下」时用的（推到最右）；
     * 手机上摆不下换到第二行，再右对齐就是孤零零挂在右边，改回靠左。
     */
    /*
     * 返回顶部的定位要抬到手机底部导航之上。
     * 底栏 z-index 60、最小高 52px（还有安全区），不抬的话按钮会压在
     * 导航条底下点不到。这里只抬高度，不再给别的东西让位 ——
     * 右下角现在只有它自己（发布那颗挪到栏中间去了）。
     */
    .el9-backtop {
        /*
         * 抬到「菜单悬浮钮」上面去。
         * 右下角现在是两颗钮竖着排：菜单在下（贴底栏），返回顶部在它上面 ——
         * 都写死 52+14 的话两颗会重叠成一坨，点哪个都点不准。
         */
        bottom: calc(52px + 14px + env(safe-area-inset-bottom, 0px) + 52px);
        z-index: 55;
    }

    /*
     * 手机端顶部导航整条取消：导航走底部 tabbar 的「菜单」抽屉，
     * 顶部不再占一行，内容更早出现。
     * nav-h 归零，feedbar / 返回顶部这些吸顶位置跟着上移。
     */
    :root {
        --el9-nav-h: 0px;
    }

    /*
     * 留白收紧：桌面上 shell 左右各 24px + 主栏各 28px，手机上太占地方。
     * 这里 shell 收到 12、主栏由 --el9-main-pad 管（699 以下 12），
     * 375 的屏能多出约 24px 给内容。
     */
    /*
     * 手机端四周留白同样是 12（--el9-bleed），和桌面一个量。
     *
     * 这里原来写的是 `padding: 0` —— 那套的前提是「留白交给 main 的 padding」，
     * 但 --el9-main-pad 后来为了对齐问题被归成 0 了，两处一归零，
     * 卡片就只剩自己那 4px 内边距，看起来就是「四周的距离全没了」。
     */
    .el9-shell {
        padding: 0 var(--el9-bleed);
    }

    /*
     * 轮播通栏：占满屏幕宽（像 App 的 banner），圆角和左右描边去掉。
     *
     * 抵消的是 `.el9-shell` 那一层 12px（`--el9-bleed`），不是 `--el9-main-pad` ——
     * 后者早就是 0 了，负它等于没负，轮播两侧会各留 12，看着像「没撑满」。
     */
    .el9-carousel {
        margin-left: calc(-1 * var(--el9-bleed));
        margin-right: calc(-1 * var(--el9-bleed));
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }

    /*
     * 防横向滚动：用 clip 而不是 hidden ——
     * hidden 会让内部所有 position: sticky 失效（feedbar 就靠 sticky 吸顶）。
     * 老浏览器不认 clip 会退化成 visible，没有副作用。
     */
    body {
        overflow-x: clip;
    }

    /* 顶部站点导航在窄屏整体隐藏，里面那些针对窄屏的微调（汉堡按钮、
       邮件/RSS 收起、导航项高度）就没有意义了 —— 一并删掉，省得以后
       看着这些规则以为手机端顶部还有东西 */
    .el9-sitenav {
        display: none;
    }

    /*
     * 窄屏顶栏整条收起来了，`--el9-bleed` 那 12px 顶部留白就变成一条凭空的白边 ——
     * 轮播（或第一张卡片）本该直接顶到状态栏下面。左右留白不动。
     */
    .el9-layout {
        padding-top: 0;
    }

    .el9-icon-btn {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: var(--el9-r-full);
        color: var(--el9-text);
        transition: background var(--el9-dur) var(--el9-ease);
    }

    .el9-icon-btn:hover {
        background: var(--el9-bg-hover);
    }

    .el9-side {
        /*
         * 手机上是抽屉：position: fixed 已经脱离文档流、不占布局位。
         * 再显式把 flex 相关尺寸归零：万一哪条规则把它留在 flex 流里，
         * 它就会顶着 300px 把主栏挤到右边，页面还能左右滑。
         */
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 80;
        width: 300px;
        flex: 0 0 auto;
        min-width: 0;
        max-height: none;
        height: 100%;
        padding: var(--el9-4);
        background: var(--el9-bg);
        border-right: 1px solid var(--el9-border);
        overflow-y: auto;
        transform: translate3d(-100%, 0, 0);
        transition: transform 240ms var(--el9-ease);
        visibility: hidden;
    }

    body.is-drawer-open .el9-side {
        transform: translate3d(0, 0, 0);
        visibility: visible;
    }

    .el9-drawer-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 70;
        background: rgba(0, 0, 0, .4);
        opacity: 0;
        pointer-events: none;
        transition: opacity 240ms var(--el9-ease);
    }

    body.is-drawer-open .el9-drawer-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .el9-tabbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
        display: flex;
        align-items: stretch;
        background: var(--el9-bg-blur);
        backdrop-filter: saturate(180%) blur(12px);
        -webkit-backdrop-filter: saturate(180%) blur(12px);
        border-top: 1px solid var(--el9-border);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .el9-tabbar-item {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: 52px;
        color: var(--el9-text-2);
        font-size: 11px;
        font-weight: 600;
    }

    .el9-tabbar-item.is-active {
        color: var(--el9-accent);
    }

    /*
     * 左右两组各占一半（flex:1），中间那颗按钮 flex:0 0 auto ——
     * 所以不管左右各配了几项，发布按钮永远钉在正中。
     */
    .el9-tabbar-side {
        display: flex;
        flex: 1 1 0;
        min-width: 0;
    }

    /* 两组各自靠向中间，四项目时左右间距才显得均匀 */
    .el9-tabbar-side--left {
        justify-content: flex-end;
    }

    .el9-tabbar-side--right {
        justify-content: flex-start;
    }

    /*
     * 中间那颗发布按钮：圆形、凸出栏顶一截。
     *
     * margin-top 给负值把它顶上去；align-self: flex-start 是必须的 ——
     * 父级是 align-items: stretch，不写的话它会被拉成一条填满整栏。
     * 那圈边框取的是页面底色，等于在栏顶挖了个缺口，
     * 栏顶那条 1px 分隔线就不会横穿按钮。
     */
    .el9-tabbar-compose {
        position: relative;
        z-index: 1;
        display: inline-flex;
        flex: 0 0 auto;
        align-self: flex-start;
        align-items: center;
        justify-content: center;
        width: 54px;
        height: 54px;
        margin: -18px 4px 0;
        padding: 0;
        border: 3px solid var(--el9-bg);
        border-radius: var(--el9-r-full);
        /*
         * 渐变：底色是主题色，上面压一层「左上提亮 → 右下压暗」的柔光。
         *
         * 不用 --el9-accent / --el9-accent-strong 两个变量去拼渐变 ——
         * 深色模式里 strong 就等于 accent，那样渐变直接看不见了。
         * 用半透明遮罩既能保住层次，又永远跟着后台设的主题色走。
         *
         * 渐变是静态的，不动。底部常驻的东西自己在动会一直勾眼睛，
         * 之前那版 7 秒一个来回的流动就去掉了。
         */
        background-color: var(--el9-accent);
        background-image: linear-gradient(140deg,
            rgba(255, 255, 255, .26) 0%,
            rgba(255, 255, 255, 0) 46%,
            rgba(0, 0, 0, .18) 100%);
        color: #fff;
        /* 投影压小：底部常驻的东西，影子太大显得脏 */
        box-shadow: 0 2px 6px rgba(16, 24, 40, .14);
        cursor: pointer;
        transition: transform var(--el9-dur) var(--el9-ease),
            box-shadow var(--el9-dur) var(--el9-ease);
    }

    .el9-tabbar-compose:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 10px rgba(16, 24, 40, .18);
    }

    .el9-tabbar-compose:active {
        transform: translateY(0) scale(.96);
    }

    /* 入口关掉时的占位：宽度照占，什么都不画 */
    .el9-tabbar-compose--blank {
        background: transparent;
        border-color: transparent;
        box-shadow: none;
    }

    /*
     * 搜索头部：手机上省掉那圈图标，宽度全留给关键词和「换个词」。
     * 40px 的图标在窄屏是纯占地方，关键词反而被压成省略号。
     */
    .el9-searchhead {
        padding: var(--el9-3);
        gap: var(--el9-2);
        margin-bottom: var(--el9-2);
    }

    .el9-searchhead-icon {
        display: none;
    }

    .el9-searchhead-word {
        font-size: 16px;
    }

    .el9-searchhead-side {
        gap: var(--el9-2);
    }

    .el9-main {
        /* 顶部只留 8px（原来是 12px），轮播更靠近屏幕上沿 */
        /* 顶部留白只认 .el9-layout 那 12，这里再加 8 就成 20 了 */
        padding-top: 0;
        /*
         * 底部要给固定底栏让位：52px 是栏高，safe-area 是 iPhone 底部那条横条，
         * 再留 20px 呼吸。原来写死 72px —— 在带刘海的机型上 52+34=86 已经超过它，
         * 文章最后一屏会被底栏压住一截。
         */
        padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px) + 20px);
    }

    /* feedbar 吸顶位置跟着新导航条的高度走（旧的 52px 是已删除顶栏的高度） */
    .el9-feedbar {
        top: var(--el9-nav-h);
        /*
         * 这里原来是负 margin（-12px），本来是为了抵消主栏顶部内边距让 feedbar 贴顶。
         * 但轮播挪到它上面之后，这 -12px 就把它顶到轮播底边上了，
         * 配合半透明磨砂背景，看起来就是「轮播被盖住一截」。
         * 改成正常间距，轮播和它之间留 8px。
         */
        margin-top: var(--el9-2);
    }

    /* 搜索框在窄屏隐藏（见上面 .el9-rail .el9-search 那条）——
       这里曾经有一条 display:flex 把它顶回来，是旧顶栏时代的遗留，已删 */

    .el9-feedbar .el9-tab {
        display: none;
    }
}

@media (max-width: 699px) {
    /*
     * 窄屏表格：4 列在 390 屏上每列只剩 50px 左右，「说明」「主题色」这种两字词
     * 就对半断开变竖排。真正把列吃光的是 td 左右各 16px 的内边距 —— 收到 8px，
     * 再给每列一个下限，撑不下就让 .el9-table-wrap 横向滚。
     *
     * ⚠️ 这段必须待在基础样式（.el9-content th/td）之后：同权重，后写的赢。
     */
    .el9-content table {
        font-size: 14px;
    }

    .el9-content th,
    .el9-content td {
        padding-left: var(--el9-2);
        padding-right: var(--el9-2);
        min-width: 4.2em;
    }

    :root {
        --el9-main-pad: 0;
    }

    .el9-cmt {
        padding: var(--el9-3);
        gap: var(--el9-2);
    }

    .el9-cmt-act {
        margin-left: 0;
    }

    .el9-banner-cover {
        height: 150px;
    }

    .el9-banner-avatar {
        width: 72px;
        height: 72px;
        margin-top: -36px;
    }

    .el9-banner-name strong {
        font-size: 18px;
    }

    .el9-banner-stat {
        gap: var(--el9-5);
    }

    .el9-shell {
        /* 同 ≤999 那档，四周留白不按屏幕尺寸缩水 */
        padding: 0 var(--el9-bleed);
    }

    .el9-article-title {
        font-size: 26px;
    }

    /* 窄屏卡片内边距收一档，正文能多出 8px 宽 */
    .el9-article-head {
        padding: var(--el9-4);
    }

    /*
     * 手机上的信息流改成通栏列表：卡片占满整宽、去掉圆角边框和卡片间距，
     * 条目之间只用一条细线分隔（类似 App 的列表样式）。
     * 内容左右留 12px，避免文字贴屏幕边。
     */
    .el9-feed {
        gap: 0;
    }

    .el9-card {
        /* 左右收到 8px：近乎贴边，又不会把圆头像切掉 */
        padding: 14px 4px;
        gap: var(--el9-2);
        border: 0;
        border-bottom: 1px solid var(--el9-border);
        border-radius: 0;
        background: transparent;
    }

    .el9-card:last-child {
        border-bottom: 0;
    }

    /* 触摸设备没有 hover，去掉悬停时的描边变化 */
    .el9-card:hover {
        border-color: transparent;
        border-bottom-color: var(--el9-border);
    }

    .el9-card-media {
        aspect-ratio: 4 / 3;
    }

    .el9-article-meta {
        flex-wrap: wrap;
    }

    /*
     * 手机上日期和评论数留在右侧（跟作者名同一行），不再单独换行。
     * 这样头部少一行、首屏能多露正文。
     */
    .el9-article-meta-side {
        margin-left: auto;
        flex-shrink: 0;
        font-size: 12px;
    }

    .el9-respond-fields {
        grid-template-columns: 1fr;
    }

    .el9-near-inner {
        grid-template-columns: 1fr;
    }

    .el9-near-item.is-next {
        text-align: left;
    }

    .el9-content {
        font-size: 16px;
    }

    .el9-search--wide {
        flex-direction: row;
    }
}

/* ==========================================================================
   11. 无障碍 / 打印
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

@media print {
    .el9-side,
    .el9-topbar,
    .el9-tabbar,
    .el9-comments,
    .el9-feedbar,
    .el9-pager,
    .el9-loadmore,
    .el9-near {
        display: none !important;
    }

    .el9-main {
        max-width: 100%;
        border: 0;
    }

    body {
        background: #fff;
        color: #000;
    }
}


/* ==========================================================================
   表情
   ========================================================================== */

/*
 * 行内表情：跟着文字字号走。
 *
 * 写死 px 的话，正文（17px）和说说卡片（15px）里表情的大小关系是反的 ——
 * 小字配大表情，看着突兀。用 em 就是「文字多大，表情按比例多大」。
 *
 * 选择器要写到 img.el9-emoji 这个粒度：.el9-content img / .el9-card-text img
 * 那两条是给正文配图写的（margin: 1.4em auto、height: auto、还有边框和圆角），
 * 权重 (0,1,1) 比光秃秃的 .el9-emoji (0,1,0) 高 —— 不写具体点，
 * 表情会被套上 1.4em 的上下外边距，下方凭空多出一大块空白，还带个边框。
 */
.el9-emoji,
.el9-content img.el9-emoji,
.el9-card-text img.el9-emoji,
.el9-cmt-text img.el9-emoji {
    display: inline-block;
    width: auto;
    height: 1.2em;
    max-width: 2.4em;
    margin: 0 .08em;
    border: 0;
    border-radius: 0;
    vertical-align: -0.22em;
}

/* ---- 评论框左下角那颗按钮 ---- */
.el9-respond-main {
    position: relative;
}

.el9-emoji-btn {
    position: absolute;
    left: 6px;
    bottom: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--el9-r-full);
    background: transparent;
    color: var(--el9-text-3);
    cursor: pointer;
    transition: color var(--el9-dur) var(--el9-ease), background var(--el9-dur) var(--el9-ease);
}

.el9-emoji-btn:hover,
.el9-emoji-btn:focus-visible {
    background: var(--el9-bg-hover);
    color: var(--el9-accent);
}

/*
 * 给按钮腾出位置：不加这段，最后一行字会被那颗笑脸压住。
 * min-height 一并从 120 提到 136，内容区还是三行的样子。
 */
.el9-respond .el9-textarea {
    min-height: 136px;
    padding-bottom: 46px;
}

/* ---- 表情面板 ---- */
.el9-emojibox {
    position: fixed;
    inset: 0;
    z-index: 215;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6vh var(--el9-4);
}

.el9-emojibox[hidden] {
    display: none;
}

.el9-emojibox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 24, 40, .42);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.el9-emojibox-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 440px;
    max-height: 62vh;
    border-radius: var(--el9-r-lg);
    background: var(--el9-bg);
    box-shadow: 0 24px 60px rgba(16, 24, 40, .18);
}

.el9-emojibox-head {
    display: flex;
    align-items: center;
    gap: var(--el9-3);
    flex: none;
    padding: var(--el9-4) var(--el9-4) var(--el9-2);
}

.el9-emojibox-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--el9-text);
}

.el9-emojibox-close {
    margin-left: auto;
    padding: 4px 10px;
    border: 0;
    border-radius: var(--el9-r-full);
    background: transparent;
    color: var(--el9-text-2);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.el9-emojibox-close:hover {
    background: var(--el9-bg-hover);
    color: var(--el9-text);
}

.el9-emojibox-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
    gap: 2px;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 var(--el9-3) var(--el9-4);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.el9-emojibox-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 0;
    border: 0;
    border-radius: var(--el9-r-md);
    background: transparent;
    cursor: pointer;
}

.el9-emojibox-item:hover,
.el9-emojibox-item:focus-visible {
    background: var(--el9-bg-hover);
}

.el9-emojibox-item img {
    display: block;
    width: auto;
    height: 28px;
}

/* 面板打开时锁住页面滚动 */
body.is-emojibox-open {
    overflow: hidden;
}

/* 手机：从底部滑上来，跟发布说说、昵称面板同一套手感 */
@media (max-width: 699px) {
    .el9-emojibox {
        align-items: flex-end;
        padding: 0;
    }

    .el9-emojibox-inner {
        max-width: none;
        max-height: 56vh;
        border-radius: var(--el9-r-lg) var(--el9-r-lg) 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .el9-emojibox-list {
        grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
    }
}

/* ==========================================================================
   「我们的故事」页面
   ========================================================================== */

/* 顶上那段招呼语：👋 + 首次相遇 + 相遇天数，再跟一个小节标题 */
.el9-myc-hi {
    margin: 0 0 var(--el9-4);
}

.el9-myc-hi-text {
    margin: 0;
    font-size: 15px;
    line-height: 1.75;
    color: var(--el9-text);
}

.el9-myc-hi strong { font-weight: 600; }

/* 挥手的那只手要跟后面的名字留一点缝，旋转的时候才蹭不上 */
.el9-myc-hi-emoji { margin-right: 3px; }

/* 「您近期在本站的消息」跟「随机文章推荐」是同一档小节标题，
   只把上边距收掉 —— 它紧跟在招呼语下面，不该有 24px 的段落间距 */
.el9-myc-sub--caption {
    margin: var(--el9-2) 0 var(--el9-3);
}

/* ---- 卡片列表 ---- */
/* 一整组装在一个框里，行与行之间靠细线分开 ——
   不再一条一个灰底块。之前那种「每条一张卡」的排法，一屏五张卡
   加上卡片自身 10px 的外间距，整页全是灰块，看不出哪几行是同一组 */
.el9-myc-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--el9-border);
    border-radius: var(--el9-r-md);
    background: var(--el9-bg);
    /* 圆角裁一下，首尾行的白底才不会从角上溢出 */
    overflow: hidden;
}

.el9-myc-card {
    padding: 11px 14px;
    border: 0;
    border-radius: 0;
    background: none;
}

/* 除第一行，每条都带一条上边线 */
.el9-myc-card + .el9-myc-card {
    border-top: 1px solid var(--el9-border);
}

/* 「查看更多」收进来的卡片：显式写死，别指望浏览器对 hidden 的处理到处一致 */
.el9-myc-card[hidden] {
    display: none;
}

/* ---- 查看更多 ----
   居中一颗小胶囊。用带框的样式而不是裸文字：这是页面的操作按钮，
   跟侧栏那种「顺带一提」的入口不是一回事 */
.el9-myc-morebox {
    margin-top: var(--el9-3);
    text-align: center;
}

.el9-myc-more {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 8px 18px;
    border: 1px solid var(--el9-border);
    border-radius: var(--el9-r-full);
    background: var(--el9-bg);
    color: var(--el9-text-2);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.el9-myc-more:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--el9-accent) 45%, var(--el9-border));
    background: color-mix(in srgb, var(--el9-accent) 6%, var(--el9-bg));
    color: var(--el9-accent-text);
}

.el9-myc-more:focus-visible {
    outline: 2px solid var(--el9-accent-text);
    outline-offset: 2px;
}

/* 到底了：别再让人点，但按钮留在原位，不然列表末尾会突然空一块 */
.el9-myc-more.is-done {
    cursor: default;
    border-style: dashed;
    color: var(--el9-text-3);
    background: none;
}

.el9-myc-more-num {
    font-weight: 400;
    font-size: 12px;
    color: var(--el9-text-3);
}

.el9-myc-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 行首图标：描边 SVG，跟主题其它图标同一套（原来是 📄 / ↗ 两个 emoji，
   在 14px 下糊成一团，颜色也不受控） */
.el9-myc-card-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    color: var(--el9-text-3);
}

.el9-myc-card-title {
    min-width: 0;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--el9-text);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color var(--el9-dur) var(--el9-ease);
}

.el9-myc-card-title:hover { color: var(--el9-accent-text); }

.el9-myc-card-title.is-gone {
    font-weight: 400;
    color: var(--el9-text-3);
}

.el9-myc-card-time {
    margin-left: auto;
    flex: none;
    font-size: 12px;
    color: var(--el9-text-3);
}

/* 引文从图标那条线起（不跟标题文字对齐）—— 参考的是「图标在左、两行文字分别
   顶格」的排法，跟标题一起缩进 23px 会让第二行看着像掉进去一块 */
.el9-myc-card-quote {
    margin: 5px 0 0;
    font-size: 13px;
    line-height: 1.65;
    color: var(--el9-text-2);
    overflow-wrap: break-word;
}

.el9-myc-card-quote span { color: var(--el9-text-3); }

/* ---- 最近看过 ----
   跟评论列表共用同一套卡片，每行只有「图标 + 标题 + 时间」。
   单独一节是因为它来自 localStorage（本地），不是数据库里的东西 */
.el9-myc-hist {
    margin: 0 0 var(--el9-4);
}

/* hidden 显式写：这页的区块都带 display 相关的规则，
   一旦哪天给它加了 display，HTML 的 hidden 就会被无声盖掉 */
.el9-myc-hist[hidden] {
    display: none;
}

/* 清空按钮靠右、小字、无边框 —— 它是「顺手擦掉」的动作，
   不该长成一个跟内容抢注意力的按钮 */
.el9-myc-hist-foot {
    margin-top: var(--el9-2);
    text-align: right;
}

.el9-myc-hist-clear {
    padding: 4px 2px;
    border: 0;
    background: none;
    color: var(--el9-text-3);
    font-size: 12px;
    line-height: 1.4;
    cursor: pointer;
    transition: color var(--el9-dur) var(--el9-ease);
}

.el9-myc-hist-clear:hover {
    color: var(--el9-accent-text);
}

.el9-myc-hist-clear:focus-visible {
    outline: 2px solid var(--el9-accent-text);
    outline-offset: 2px;
}

/* 「随机文章推荐」小标题 */
.el9-myc-sub {
    margin: var(--el9-6) 0 var(--el9-3);
    font-size: 14px;
    font-weight: 600;
    color: var(--el9-text);
}

/* 只有一行标题的那种（随机文章推荐），上下比带引用的行收一点 */
.el9-myc-card--link { padding: 10px 14px; }

/* ==========================================================================
   时间线 / 计划表（[timeline] / [plan] 短代码）
   ========================================================================== */

.el9-tl,
.el9-plan {
    margin: 1.5em 0;
    padding: var(--el9-5) var(--el9-6) var(--el9-3);
    border: 1px solid var(--el9-border);
    border-radius: var(--el9-r-md);
    background: var(--el9-bg);
}

.el9-tl-title,
.el9-plan-title {
    margin: 0 0 var(--el9-4);
    font-size: 15px;
    font-weight: 600;
    color: var(--el9-text);
}

/* 时间线 ------------------------------------------------------------------ */
.el9-tl-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.el9-tl-item {
    position: relative;
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: var(--el9-3);
    padding: 0 0 var(--el9-5) 20px;
}

/* 节点与竖线都用伪元素：不在正文里多插节点，复制正文时也不会带上 */
.el9-tl-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--el9-accent);
}

.el9-tl-item::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 21px;
    bottom: 2px;
    width: 1px;
    background: var(--el9-border-strong);
}

.el9-tl-item:last-child { padding-bottom: 2px; }
.el9-tl-item:last-child::after { display: none; }

.el9-tl-time {
    font-size: 13px;
    line-height: 1.6;
    color: var(--el9-text-3);
    font-variant-numeric: tabular-nums;
}

.el9-tl-text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--el9-text);
    overflow-wrap: break-word;
}

/* 手机端两列挤不下，日期挪到内容上面一行 */
@media (max-width: 699px) {
    .el9-tl-item {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

/* 计划表 ------------------------------------------------------------------ */
.el9-plan-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.el9-plan-item { margin-bottom: var(--el9-5); }
.el9-plan-item:last-child { margin-bottom: var(--el9-3); }

.el9-plan-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--el9-3);
    font-size: 15px;
}

.el9-plan-name {
    color: var(--el9-text);
    overflow-wrap: break-word;
}

.el9-plan-pct {
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--el9-text-3);
    font-variant-numeric: tabular-nums;
}

.el9-plan-bar {
    height: 6px;
    margin-top: 8px;
    border-radius: 999px;
    background: var(--el9-skeleton);
    overflow: hidden;
}

.el9-plan-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--el9-accent);
}

.el9-plan-note {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--el9-text-2);
}

/* ==========================================================================
   文章密码（Typecho 自带的 contents.password 表单）
   ========================================================================== */

.el9-content.is-locked {
    display: block;
    margin: 1.6em 0;
    padding: 40px 24px 34px;
    border: 1px solid var(--el9-border);
    border-radius: 20px;
    background:
        radial-gradient(120% 80% at 50% -20%, var(--el9-accent-soft), transparent 60%),
        var(--el9-bg);
    text-align: center;
    overflow: hidden;
}

.el9-content.is-locked .el9-lock-head {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 正文的段落样式会渗进来，这里逐条压掉 */
.el9-content.is-locked .el9-lock-kicker,
.el9-content.is-locked .el9-lock-title,
.el9-content.is-locked .el9-lock-tip {
    margin: 0 0 8px;
    text-align: center;
}

.el9-content.is-locked .el9-lock-tip { margin-bottom: 22px; }

/* Typecho 那个表单自己带盒子和内边距，这里全撤掉，只留控件 */
.el9-content.is-locked .protected {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: center;
}

/* 「请输入密码访问」—— 上面的标题已经说过了，藏掉 */
.el9-content.is-locked .protected .word {
    display: none;
}

.el9-content.is-locked .protected p:last-child {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 340px;
    margin: 0;
}

@media (max-width: 480px) {
    .el9-content.is-locked {
        padding: 32px 18px 26px;
        border-radius: 16px;
    }

    .el9-content.is-locked .protected p:last-child {
        flex-direction: column;
    }

    .el9-content.is-locked .protected input[type="submit"] {
        width: 100%;
        margin-left: 0;
    }
}

/* ==========================================================================
   私密评论
   ========================================================================== */

/*
 * 勾选框排在表情按钮右边，共用 textarea 底部那条 46px 的留白带。
 * 不去挤输入框的 padding-left —— 那会让每一行文字都往里缩。
 */
.el9-secret-opt {
    position: absolute;
    left: 44px;
    bottom: 6px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding-right: 4px;
    font-size: 13px;
    color: var(--el9-text-3);
    cursor: pointer;
    user-select: none;
    transition: color var(--el9-dur) var(--el9-ease);
}

.el9-secret-opt:hover { color: var(--el9-text-2); }

.el9-secret-opt input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--el9-accent);
    cursor: pointer;
}

/* 勾上之后整块变强调色，一眼看出「这条会私密」 */
.el9-secret-opt:has(input:checked) { color: var(--el9-accent-text); }

/* 评论列表里的私密段 */
.el9-cmt-secret {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 6px 0;
    padding: 9px 12px;
    border: 1px dashed var(--el9-border-strong);
    border-radius: var(--el9-r-sm);
    background: var(--el9-bg-soft);
    font-size: 13px;
    color: var(--el9-text-2);
}

.el9-cmt-secret .el9-icon {
    flex: 0 0 auto;
    color: var(--el9-text-3);
}

/* 有权看到的人：去掉盒子，当普通正文排版 */
.el9-cmt-secret.is-open {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 15px;
    line-height: 1.75;
    color: var(--el9-text);
}

/* ==========================================================================
   分类密码
   ========================================================================== */

/* ==========================================================================
   密码锁
   分类加密和文章加密共用一套外观：上面一个浮动的锁，中间标题说明，下面一行输入。
   文章那边是 Typecho 自带的表单，结构改不了，只能把它的盒子剥掉、控件接过来。
   ========================================================================== */

.el9-lock {
    position: relative;
    margin: var(--el9-6) 0;
    padding: 40px 24px 34px;
    border: 1px solid var(--el9-border);
    border-radius: 20px;
    background:
        radial-gradient(120% 80% at 50% -20%, var(--el9-accent-soft), transparent 60%),
        var(--el9-bg);
    text-align: center;
    overflow: hidden;
}

/* 顶上一条淡的渐变亮线，卡片边缘不至于死板 */
.el9-lock::before {
    content: '';
    position: absolute;
    top: 0;
    left: 14%;
    right: 14%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--el9-accent), transparent);
    opacity: .5;
}

.el9-lock-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 16px;
    border: 1px solid color-mix(in srgb, var(--el9-accent) 24%, var(--el9-border));
    border-radius: 50%;
    background: var(--el9-bg);
    color: var(--el9-accent-text);
    box-shadow:
        0 10px 24px -12px color-mix(in srgb, var(--el9-accent) 70%, transparent),
        0 0 0 7px color-mix(in srgb, var(--el9-accent) 6%, transparent);
    animation: el9-lock-float 5s ease-in-out infinite;
}

@keyframes el9-lock-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

.el9-lock-kicker {
    margin: 0 0 7px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--el9-accent-text);
}

.el9-lock-title {
    margin: 0 0 8px;
    font-size: 19px;
    font-weight: 650;
    line-height: 1.4;
    color: var(--el9-text);
}

.el9-lock-tip {
    max-width: 30em;
    margin: 0 auto 22px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--el9-text-2);
}

.el9-lock-form {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
}

/* 输入框：原生表单那个也归到这一条 */
.el9-lock-input,
.el9-content.is-locked .protected input[type="password"] {
    flex: 1;
    width: auto;
    min-width: 0;
    max-width: none;
    height: 46px;
    padding: 0 16px;
    /* 16px 是下限：iOS Safari 对更小的输入框会放大整页 */
    font-size: 16px;
    color: var(--el9-text);
    background: var(--el9-bg);
    border: 1px solid var(--el9-border-strong);
    border-radius: 12px;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .05);
    outline: none;
    transition: border-color var(--el9-dur) var(--el9-ease),
                box-shadow var(--el9-dur) var(--el9-ease);
}

.el9-lock-input::placeholder { color: var(--el9-text-3); }

.el9-lock-input:focus,
.el9-content.is-locked .protected input[type="password"]:focus {
    border-color: var(--el9-accent);
    box-shadow: 0 0 0 4px var(--el9-accent-soft);
}

/* 按钮：原生表单那个也归到这一条 */
.el9-lock-btn,
.el9-content.is-locked .protected input[type="submit"] {
    flex: 0 0 auto;
    width: auto;
    height: 46px;
    margin: 0;
    padding: 0 24px;
    font-size: 15px;
    font-weight: 600;
    color: var(--el9-accent-contrast);
    background: var(--el9-accent);
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--el9-accent) 80%, transparent);
    transition: transform var(--el9-dur) var(--el9-ease),
                box-shadow var(--el9-dur) var(--el9-ease);
}

.el9-lock-btn:hover,
.el9-content.is-locked .protected input[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 22px -10px color-mix(in srgb, var(--el9-accent) 80%, transparent);
}

.el9-lock-btn:active,
.el9-content.is-locked .protected input[type="submit"]:active {
    transform: translateY(0);
}

.el9-lock-err {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--el9-c-caution);
}

/* 密码错了：抖一下 + 输入框描红，比单纯加一行字更抓眼睛 */
.el9-lock.is-error {
    animation: el9-lock-shake .4s ease-in-out;
}

.el9-lock.is-error .el9-lock-input {
    border-color: var(--el9-c-caution);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--el9-c-caution) 12%, transparent);
}

@keyframes el9-lock-shake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-5px); }
    40%      { transform: translateX(4px); }
    60%      { transform: translateX(-3px); }
    80%      { transform: translateX(2px); }
}

@media (prefers-reduced-motion: reduce) {
    .el9-lock-ico { animation: none; }
    .el9-lock.is-error { animation: none; }
}

@media (max-width: 480px) {
    .el9-lock {
        padding: 32px 18px 26px;
        border-radius: 16px;
    }

    .el9-lock-title { font-size: 17px; }
    .el9-lock-form { flex-direction: column; }
    .el9-lock-btn { width: 100%; }
}

/* ==========================================================================
   PJAX 换页进度条
   ========================================================================== */

.el9-pjax-bar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 260;
    width: 0;
    height: 2px;
    background: var(--el9-accent);
    opacity: 0;
    pointer-events: none;
    transition: width .25s cubic-bezier(.4, 0, .2, 1), opacity .2s linear;
}

.el9-pjax-bar.is-on {
    width: 72%;
    opacity: 1;
}

.el9-pjax-bar.is-done {
    width: 100%;
    opacity: 0;
    transition: width .18s linear, opacity .24s linear .06s;
}

/* QQ 图标（顶部导航那颗，尺寸由 el9QqIcon() 的入参决定） */
.el9-qq-ico { flex: 0 0 auto; }

/* ==========================================================================
   归档（page-archive.php）
   按年份分块，每年一个标题 + 一串条目。说说不进这张表（见模板里的排除逻辑）。
   ========================================================================== */

.el9-arch {
    max-width: 780px;
}

.el9-arch-head {
    margin-bottom: var(--el9-5);
}

.el9-arch-title {
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 650;
    line-height: 1.35;
    color: var(--el9-text);
}

/* 顶部统计卡：篇数 + 年份跨度 + 全站字数 */
.el9-arch-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: var(--el9-4);
    padding: var(--el9-4) var(--el9-5);
    border: 1px solid var(--el9-border);
    border-radius: var(--el9-r-md);
    background: var(--el9-bg-soft);
}

.el9-arch-stat .el9-arch-meta,
.el9-arch-stat .el9-arch-words {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--el9-text-2);
}

.el9-arch-stat strong {
    font-weight: 650;
    color: var(--el9-text);
    font-variant-numeric: tabular-nums;
}

/* 两行之间那条细线，比卡片边框更淡，不抢视线 */
.el9-arch-stat .el9-arch-words {
    padding-top: 6px;
    border-top: 1px dashed var(--el9-border);
}

.el9-arch-meta {
    margin: 0;
    font-size: 13px;
    color: var(--el9-text-3);
}

.el9-arch-words {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--el9-text-3);
}

.el9-arch-intro {
    margin-top: var(--el9-4);
}

.el9-arch-year + .el9-arch-year {
    margin-top: var(--el9-5);
}

.el9-arch-y {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 4px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--el9-border);
    font-size: 15px;
    font-weight: 650;
    color: var(--el9-text);
    /* 年份是 details 的 summary：整行可点，自己画箭头，摘掉系统那个三角 */
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: color var(--el9-dur) var(--el9-ease);
}

.el9-arch-y::-webkit-details-marker {
    display: none;
}

.el9-arch-y:hover {
    color: var(--el9-accent-text);
}

/* 箭头贴在篇数后面，不甩到整行最右 —— 那样会看着像另一个按钮 */
.el9-arch-y::after {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    margin-left: -2px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    opacity: .55;
    transform: rotate(45deg) translate(-1px, -1px);
    transition: transform var(--el9-dur) var(--el9-ease);
}

.el9-arch-year[open] .el9-arch-y::after {
    transform: rotate(-135deg) translate(-1px, -1px);
}

/* 年份右边那个小数字：这一年有多少篇 */
.el9-arch-y em {
    font-style: normal;
    font-size: 12px;
    font-weight: 500;
    color: var(--el9-text-3);
    font-variant-numeric: tabular-nums;
}

.el9-arch-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.el9-arch-list li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--el9-border);
}

.el9-arch-list li:last-child {
    border-bottom: 0;
}

.el9-arch-list a {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
    color: var(--el9-text);
    text-decoration: none;
    transition: color var(--el9-dur) var(--el9-ease);
}

.el9-arch-list a:hover {
    color: var(--el9-accent-text);
}

.el9-arch-list time {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--el9-text-3);
    font-variant-numeric: tabular-nums;
}

/* 标题太长就省略，不要把时间挤走 */
.el9-arch-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.el9-arch-cmt {
    flex: 0 0 auto;
    font-style: normal;
    font-size: 12px;
    color: var(--el9-text-3);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 699px) {
    .el9-arch-title { font-size: 22px; }
    .el9-arch-list a { gap: 8px; }
}

/* ==========================================================================
   注册（page-register.php）
   ========================================================================== */

/*
 * 注册页：单栏，只有一张卡片。
 *
 * 摆侧栏的时候这一页是「左挂件 + 右表单」，表单被挤在中间，还要先读一堆说明。
 * 仿 Typecho 官方注册页的做法：侧栏收掉、卡片居中、只剩字段和按钮。
 * 用 :has() 认页面 —— 老浏览器不认也没关系，退化成普通双栏，卡片照样居中。
 */
body:has(.el9-reg) .el9-side {
    display: none;
}

body:has(.el9-reg) .el9-layout {
    justify-content: center;
}

.el9-reg {
    max-width: 400px;
    /* 往下压一点，别贴着头顶，接近官方那种「竖着摆在页面中间」的位置 */
    margin: 5vh auto 0;
    padding: var(--el9-6) var(--el9-6) var(--el9-5);
    border: 1px solid var(--el9-border);
    border-radius: var(--el9-r-lg);
    background: var(--el9-bg);
}

/* 标题居中，和官方那页一致 */
.el9-reg-head {
    text-align: center;
}

.el9-reg-head .el9-reg-title {
    margin-bottom: var(--el9-5);
}

/* 按钮撑满整行，一眼知道下一步点哪儿 */
.el9-reg-submit {
    width: 100%;
}

/* 卡片底部的「已有账号？去登录」 */
.el9-reg-alt {
    margin: var(--el9-4) 0 0;
    text-align: center;
    font-size: 13px;
    color: var(--el9-text-3);
}

.el9-reg-alt a {
    color: var(--el9-accent-text);
    text-decoration: none;
}

.el9-reg-alt a:hover {
    text-decoration: none;
}

@media (max-width: 699px) {
    /* 手机上贴满整宽，卡片壳去掉 —— 小屏再套一层框很挤 */
    .el9-reg {
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }
}

.el9-reg-head {
    margin-bottom: var(--el9-5);
}

.el9-reg-title {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 650;
    line-height: 1.35;
    color: var(--el9-text);
}

.el9-reg-sub {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--el9-text-2);
}

.el9-reg-note {
    margin: 0 0 var(--el9-4);
    padding: 11px 15px;
    border-radius: var(--el9-r-sm);
    font-size: 13px;
    line-height: 1.7;
    border: 1px solid var(--el9-border);
    background: var(--el9-bg-soft);
    color: var(--el9-text-2);
}

.el9-reg-note.is-ok {
    border-color: color-mix(in srgb, var(--el9-c-tip) 30%, var(--el9-border));
    background: color-mix(in srgb, var(--el9-c-tip) 8%, var(--el9-bg));
    color: var(--el9-c-tip-ink);
}

.el9-reg-note.is-err {
    border-color: color-mix(in srgb, var(--el9-c-caution) 30%, var(--el9-border));
    background: color-mix(in srgb, var(--el9-c-caution) 7%, var(--el9-bg));
    color: var(--el9-c-caution-ink);
}

.el9-reg-form {
    display: flex;
    flex-direction: column;
    gap: var(--el9-4);
}

.el9-reg-field {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.el9-reg-field label {
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--el9-text-2);
}

.el9-reg-form {
    gap: var(--el9-4);
}

.el9-reg-field .el9-input {
    width: 100%;
}

.el9-reg-hint {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--el9-text-3);
}

.el9-reg-hint b {
    font-weight: 600;
    color: var(--el9-text-2);
}

/* 「不可修改」这条单独标红，别让人填完才后悔 */
.el9-reg-hint b.is-warn {
    color: var(--el9-c-caution-ink);
}

.el9-reg-actions {
    display: flex;
    align-items: center;
    gap: var(--el9-4);
    flex-wrap: wrap;
    margin: var(--el9-2) 0 0;
}

.el9-reg-login {
    font-size: 13px;
    color: var(--el9-text-2);
    text-decoration: none;
    border-bottom: 1px solid var(--el9-border-strong);
}

.el9-reg-login:hover {
    color: var(--el9-accent-text);
    border-bottom-color: var(--el9-accent);
}

.el9-reg-closed {
    padding: 32px 24px;
    border: 1px dashed var(--el9-border-strong);
    border-radius: var(--el9-r-md);
    background: var(--el9-bg-soft);
    text-align: center;
    font-size: 14px;
    color: var(--el9-text-2);
}

.el9-reg-closed p { margin: 0; }

.el9-reg-extra {
    margin-top: var(--el9-6);
    padding-top: var(--el9-4);
    border-top: 1px solid var(--el9-border);
}

/* ==========================================================================
   个人中心（page-user.php）
   ========================================================================== */

.el9-uc {
    display: flex;
    flex-direction: column;
    gap: var(--el9-4);
}

/* ---- 顶部信息：头像 + 名字 ----
   就是一张带边框的横条，没有封面图 —— 头像和名字叠在照片上会互相打架 */

.el9-uc-head {
    display: flex;
    align-items: center;
    gap: var(--el9-4);
    padding: var(--el9-5);
    border: 1px solid var(--el9-border);
    border-radius: var(--el9-r-md);
    background: var(--el9-bg);
}

.el9-uc-avatar {
    flex: 0 0 auto;
    line-height: 0;
}

.el9-uc-avatar .el9-avatar {
    display: block;
    border-radius: 50%;
}

.el9-uc-id {
    min-width: 0;
}

.el9-uc-name {
    margin: 0 0 3px;
    font-size: 20px;
    font-weight: 650;
    line-height: 1.3;
    color: var(--el9-text);
    overflow-wrap: break-word;
}

.el9-uc-sub {
    margin: 0;
    font-size: 13px;
    color: var(--el9-text-3);
}

/* ---- 后台快捷入口 ----
   管理员 / 编辑 / 贡献者才看得见，靠 margin-left:auto 顶到右边缘。
   刻意做得比正文轻：这是「顺手去写点东西」的快捷方式，不是这一页的主角。 */

.el9-uc-tools {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.el9-uc-admin {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--el9-border);
    border-radius: 10px;
    background: var(--el9-bg);
    color: var(--el9-text-3);
    text-decoration: none;
    transition: color var(--el9-dur) var(--el9-ease),
                border-color var(--el9-dur) var(--el9-ease),
                background var(--el9-dur) var(--el9-ease),
                transform var(--el9-dur) var(--el9-ease);
}

.el9-uc-admin:hover {
    color: var(--el9-accent-text);
    border-color: color-mix(in srgb, var(--el9-accent) 42%, var(--el9-border));
    background: var(--el9-accent-soft);
    transform: translateY(-1px);
}

.el9-uc-admin:focus-visible {
    outline: 2px solid var(--el9-accent);
    outline-offset: 2px;
}

/* 图标本身不吃点击（不然 hover 会断开） */
.el9-uc-admin .el9-icon {
    display: block;
    pointer-events: none;
}

/* ---- 数据条 ---- */

.el9-uc-stats {
    display: flex;
    border: 1px solid var(--el9-border);
    border-radius: var(--el9-r-md);
    background: var(--el9-bg);
    overflow: hidden;
}

.el9-uc-stats > div {
    flex: 1;
    padding: 12px 8px;
    text-align: center;
}

.el9-uc-stats > div + div {
    border-left: 1px solid var(--el9-border);
}

.el9-uc-stats b {
    display: block;
    font-size: 18px;
    font-weight: 650;
    line-height: 1.3;
    color: var(--el9-text);
    font-variant-numeric: tabular-nums;
}

.el9-uc-stats span {
    display: block;
    margin-top: 1px;
    font-size: 12px;
    color: var(--el9-text-3);
}

/* ---- 标签页 ----
   默认不启用「只显示一个」：没有 JS 时所有内容照常铺开，
   JS 跑起来才在容器上加 data-tabs="on"，切成单页显示。 */

.el9-uc-tabs {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    border-bottom: 1px solid var(--el9-border);
    scrollbar-width: none;
}

.el9-uc-tabs::-webkit-scrollbar { display: none; }

.el9-uc-tab {
    position: relative;
    flex: 0 0 auto;
    padding: 10px 14px;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: 14px;
    line-height: 1.5;
    color: var(--el9-text-2);
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--el9-dur) var(--el9-ease);
}

.el9-uc-tab:hover { color: var(--el9-text); }

.el9-uc-tab::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: transparent;
    transition: background var(--el9-dur) var(--el9-ease);
}

.el9-uc-tab.is-on {
    color: var(--el9-text);
    font-weight: 600;
}

.el9-uc-tab.is-on::after { background: var(--el9-accent); }

.el9-uc-tab em {
    margin-left: 5px;
    font-style: normal;
    font-size: 11px;
    font-weight: 500;
    color: var(--el9-text-3);
    font-variant-numeric: tabular-nums;
}

.el9-uc-panes {
    display: flex;
    flex-direction: column;
    gap: var(--el9-4);
}

.el9-uc-pane {
    display: flex;
    flex-direction: column;
    gap: var(--el9-4);
}

.el9-uc[data-tabs="on"] .el9-uc-pane { display: none; }
.el9-uc[data-tabs="on"] .el9-uc-pane.is-on { display: flex; }

/* 标签页里的卡片不再单独描边 —— 一屏里三层框会显得碎 */
.el9-uc[data-tabs="on"] .el9-uc-pane .el9-uc-card {
    padding-left: 0;
    padding-right: 0;
    border-left: 0;
    border-right: 0;
    background: none;
}

.el9-uc-sub .el9-dot { margin: 0 5px; }

/* 提示条 */
.el9-uc-note {
    margin: 0;
    padding: 10px 14px;
    border-radius: var(--el9-r-sm);
    font-size: 14px;
    line-height: 1.6;
}

.el9-uc-note.is-ok {
    background: color-mix(in srgb, var(--el9-c-tip) 8%, var(--el9-bg));
    border: 1px solid color-mix(in srgb, var(--el9-c-tip) 32%, transparent);
    color: var(--el9-c-tip-ink);
}

.el9-uc-note.is-err {
    background: color-mix(in srgb, var(--el9-c-caution) 7%, var(--el9-bg));
    border: 1px solid color-mix(in srgb, var(--el9-c-caution) 30%, transparent);
    color: var(--el9-c-caution-ink);
}

.el9-uc-note.is-warn {
    background: color-mix(in srgb, var(--el9-c-warning) 9%, var(--el9-bg));
    border: 1px solid color-mix(in srgb, var(--el9-c-warning) 34%, transparent);
    color: var(--el9-c-warning-ink);
}

/* 卡片 */
.el9-uc-card {
    padding: var(--el9-5) var(--el9-6);
    border: 1px solid var(--el9-border);
    border-radius: var(--el9-r-md);
    background: var(--el9-bg);
}

.el9-uc-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 var(--el9-4);
    font-size: 15px;
    font-weight: 600;
    color: var(--el9-text);
}

.el9-uc-title small {
    font-size: 12px;
    font-weight: 400;
    color: var(--el9-text-3);
}

/* 表单 */
.el9-uc-form p { margin: 0 0 var(--el9-4); }

.el9-uc-form label,
.el9-uc-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--el9-text-2);
}

/* 用户名那一行：不做成输入框，免得让人以为能改。
   虚线框 + 灰底，一眼就知道是「只读信息」 */
.el9-uc-readonly {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border: 1px dashed var(--el9-border-strong);
    border-radius: var(--el9-r-sm);
    background: var(--el9-bg-soft);
    font-size: 15px;
    color: var(--el9-text-2);
    overflow-wrap: break-word;
}

.el9-uc-readonly em {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 1px 8px;
    border: 1px solid var(--el9-border);
    border-radius: 999px;
    background: var(--el9-bg);
    font-style: normal;
    font-size: 11px;
    line-height: 1.7;
    color: var(--el9-text-3);
    white-space: nowrap;
}

.el9-uc-form .el9-input { width: 100%; }

.el9-uc-form .el9-uc-actions { margin-bottom: 0; }

.el9-uc-hint {
    margin: 0 0 var(--el9-4);
    font-size: 14px;
    line-height: 1.7;
    color: var(--el9-text-2);
}

.el9-uc-card > p:last-child { margin-bottom: 0; }

/* QQ 行 */
.el9-uc-qq {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--el9-3);
    padding: 10px 14px;
    border: 1px solid var(--el9-border);
    border-radius: var(--el9-r-sm);
    background: var(--el9-bg-soft);
    font-size: 14px;
}

.el9-uc-qq-info {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: var(--el9-text-2);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.el9-uc-qq-info .el9-qq-ico { color: var(--el9-accent-text); }

.el9-uc-qq form { margin: 0; }

.el9-uc-linkbtn {
    padding: 4px 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--el9-text-3);
    font-size: 13px;
    cursor: pointer;
    transition: background var(--el9-dur) var(--el9-ease), color var(--el9-dur) var(--el9-ease);
}

.el9-uc-linkbtn:hover {
    background: var(--el9-bg-hover);
    color: var(--el9-danger-text);
}

/* 列表 */
.el9-uc-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.el9-uc-list li {
    padding: 10px 0;
    border-bottom: 1px solid var(--el9-border);
}

.el9-uc-list li:first-child { padding-top: 0; }
.el9-uc-list li:last-child { padding-bottom: 0; border-bottom: 0; }

.el9-uc-list a {
    display: block;
    color: var(--el9-text);
    font-size: 15px;
    line-height: 1.55;
    text-decoration: none;
    overflow-wrap: break-word;
}

.el9-uc-list a:hover { color: var(--el9-accent-text); }

.el9-uc-meta {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: var(--el9-text-3);
}

.el9-uc-list--cmt a { color: var(--el9-text-2); font-size: 14px; }

/* 头像做成按钮：能点，但看起来还是张头像 */
.el9-uc-avatar-btn {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    border-radius: 50%;
    transition: transform var(--el9-dur) var(--el9-ease);
}

.el9-uc-avatar-btn:hover { transform: scale(1.04); }

.el9-uc-avatar-btn:focus-visible {
    outline: 2px solid var(--el9-accent);
    outline-offset: 3px;
}

/* ---- 头像弹窗 ---- */

.el9-avbox {
    position: fixed;
    inset: 0;
    z-index: 220;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--el9-4);
}

.el9-avbox[hidden] { display: none; }

.el9-avbox-mask {
    position: absolute;
    inset: 0;
    background: rgba(15, 20, 25, .48);
    backdrop-filter: blur(2px);
}

.el9-avbox-panel {
    position: relative;
    width: 100%;
    max-width: 540px;
    max-height: 88vh;
    overflow-y: auto;
    border-radius: var(--el9-r-md);
    background: var(--el9-bg);
    box-shadow: 0 24px 60px -20px rgba(15, 23, 42, .4);
}

.el9-avbox-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--el9-4) var(--el9-5);
    border-bottom: 1px solid var(--el9-border);
}

.el9-avbox-head h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 650;
    color: var(--el9-text);
}

.el9-avbox-x {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    color: var(--el9-text-3);
    cursor: pointer;
}

.el9-avbox-x:hover {
    background: var(--el9-bg-hover);
    color: var(--el9-text);
}

.el9-avbox-body {
    padding: var(--el9-5);
}

/* ---- 加载更多 ---- */

.el9-uc-more {
    margin: var(--el9-4) 0 0;
    text-align: center;
}

.el9-uc-more .el9-btn {
    min-width: 140px;
}

/* 未验证邮箱那条提示，带一个重发按钮 */
.el9-uc-verify {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--el9-4);
    flex-wrap: wrap;
}

.el9-uc-verify p { margin: 0; }

/* ---- 头像 ---- */

.el9-uc-av {
    display: flex;
    align-items: flex-start;
    gap: var(--el9-5);
    margin-bottom: var(--el9-4);
}

.el9-uc-av-now {
    flex: 0 0 auto;
    line-height: 0;
}

.el9-uc-av-now .el9-avatar {
    display: block;
    border: 1px solid var(--el9-border);
    border-radius: 50%;
}

.el9-uc-av-body {
    flex: 1 1 auto;
    min-width: 0;
}

.el9-uc-av-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* 地址输入框：跟按钮并排，窄屏时自己掉到下一行 */
.el9-uc-av-url {
    flex: 1 1 200px;
    min-width: 0;
    font-size: 13px;
}

/* 这颗按钮别被 flex 拉长，跟输入框等高就行 */
.el9-uc-av-form .el9-btn {
    flex: 0 0 auto;
    padding: 9px 18px;
}

.el9-uc-av-src {
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--el9-text-2);
}

.el9-uc-av-meta {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--el9-text-3);
}

.el9-uc-av-rule {
    padding: var(--el9-4);
    border-radius: var(--el9-r-sm);
    background: var(--el9-bg-soft);
    font-size: 13px;
    line-height: 1.7;
    color: var(--el9-text-2);
}

.el9-uc-av-rule p { margin: 0 0 6px; }
.el9-uc-av-rule p:last-child { margin-bottom: 0; }

.el9-uc-av-rule ol {
    margin: 0 0 8px;
    padding-left: 20px;
}

.el9-uc-av-rule li { margin: 2px 0; }

@media (max-width: 699px) {
    .el9-uc-card { padding: var(--el9-4); }
    .el9-uc-name { font-size: 18px; }
    .el9-uc-av { gap: var(--el9-4); }

    .el9-uc-head { gap: var(--el9-3); padding: var(--el9-4); }
    .el9-uc-stats b { font-size: 16px; }
    .el9-uc-tab { padding: 10px 11px; font-size: 13px; }

    /* 手机上一排四颗 38px 会把名字挤没，缩一圈 */
    .el9-uc-tools { gap: 5px; }
    .el9-uc-admin { width: 34px; height: 34px; border-radius: 9px; }
}

/* 没绑邮箱时的评论区提示 */
.el9-needmail {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: var(--el9-4) 0;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--el9-c-warning) 34%, transparent);
    border-radius: var(--el9-r-sm);
    background: color-mix(in srgb, var(--el9-c-warning) 9%, var(--el9-bg));
    font-size: 14px;
    line-height: 1.7;
    color: var(--el9-c-warning-ink);
}

.el9-needmail .el9-icon {
    flex: 0 0 auto;
    margin-top: 2px;
}

.el9-needmail p { margin: 0; }

.el9-needmail a {
    color: inherit;
    font-weight: 600;
    text-decoration: none;
}

/* -------------------------------------------------------------------------
 * 轻提示（点了休眠链接时的那句话）
 *
 * 固定在屏幕下方中间浮一条，1.6 秒自己消失。
 *
 * **一行显示完，不折行**：折成两行会盖住上面一行字，看着也像报错框；
 * 这句话也就二十来个字，宽度够装。
 * ---------------------------------------------------------------------- */
.el9-tip {
    position: fixed;
    left: 50%;
    bottom: 96px;
    z-index: 120;
    display: flex;
    align-items: center;
    gap: 7px;
    width: max-content;
    max-width: calc(100vw - 20px);
    padding: 7px 12px 7px 10px;
    border: 1px solid var(--el9-border);
    border-radius: 10px;
    background: var(--el9-bg);
    color: var(--el9-text);
    font-size: 12.5px;
    line-height: 1.5;
    white-space: nowrap;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .1);
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, 10px);
    transition: opacity .16s var(--el9-ease), transform .16s var(--el9-ease);
}

.el9-tip.is-on {
    opacity: 1;
    transform: translate(-50%, 0);
}

/*
 * 前面那个橙底感叹号。
 * 只是句提醒，不用红色 —— 红色留给「出错了」，链接打不开还没到那个级别。
 */
.el9-tip-ico {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #e8a33d;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
}

@media (max-width: 700px) {
    .el9-tip {
        bottom: 80px;
    }
}

/* 窄到装不下一整行时，宁可字号小一档，也不要折行 */
@media (max-width: 400px) {
    .el9-tip {
        font-size: 11.5px;
        padding: 6px 10px 6px 9px;
        gap: 6px;
    }
}

/* -------------------------------------------------------------------------
 * 站外链接确认
 *
 * 正文和评论里点了别人的链接，先拦一下 —— 不直接跳走，弹一张卡片问一句。
 * 目的是让人看清「要去哪个域名」，不是拦着他不让去。
 *
 * 线条卡片：同色底 + 1px 细边 + 轻阴影，不铺满屏、不用大圆角黑按钮。
 * 只在 .el9-content / .el9-cmt 范围内生效：导航和友链那种目录性质的链接
 * 拦了只会烦人。
 * ---------------------------------------------------------------------- */
.el9-extcheck {
    position: fixed;
    inset: 0;
    z-index: 130;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 20, 25, .34);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s var(--el9-ease), visibility .18s var(--el9-ease);
}

.el9-extcheck.is-open {
    opacity: 1;
    visibility: visible;
}

.el9-extcheck-card {
    width: 100%;
    max-width: 392px;
    padding: 22px 22px 20px;
    border: 1px solid var(--el9-border);
    border-radius: 14px;
    background: var(--el9-bg);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .16);
    transform: translateY(10px) scale(.985);
    transition: transform .2s var(--el9-ease);
}

.el9-extcheck.is-open .el9-extcheck-card {
    transform: none;
}

.el9-extcheck-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--el9-text);
}

.el9-extcheck-head svg {
    flex: 0 0 auto;
    color: var(--el9-text-3);
}

.el9-extcheck-tip {
    margin: 8px 0 14px;
    font-size: 13px;
    line-height: 1.65;
    color: var(--el9-text-2);
}

.el9-extcheck-url {
    display: block;
    padding: 9px 12px;
    border: 1px solid var(--el9-border);
    border-radius: 8px;
    background: var(--el9-bg-soft);
    color: var(--el9-text-2);
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.el9-extcheck-acts {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.el9-extcheck-acts .el9-btn {
    flex: 1;
    height: 40px;
}


/* -------------------------------------------------------------------------
 * 下划线动效（hover 才出现的那几处）
 *
 * 跟正文链接同一套：鼠标移上去从左展开，移开往右收起。
 * 单独抽一条规则，省得四个地方各写一份渐变背景。
 * ---------------------------------------------------------------------- */
.el9-rail-foot a,
.el9-card-time,
.el9-reg-alt a,
.el9-needmail a {
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 0 1px;
    padding-bottom: 2px;
    transition: background-size .28s var(--el9-ease), background-position 0s;
}

.el9-rail-foot a:hover,
.el9-card-time:hover,
.el9-reg-alt a:hover,
.el9-needmail a:hover {
    background-position: left bottom;
    background-size: 100% 1px;
}

/* 这两处本来就是「贴住底边」的小字，多出来的 2px 内边距会把行高撑开一点，收回 */
.el9-card-time {
    padding-bottom: 0;
}

/* -------------------------------------------------------------------------
 * 站内公告（弹窗）
 *
 * 进首页弹一次，关掉后按内容指纹记到 localStorage，内容不变就不再弹。
 * 层级比灯箱（120）和站外确认（130）都高：它是「进门先说一句」，该在最上面。
 * ---------------------------------------------------------------------- */
.el9-gnotice {
    position: fixed;
    inset: 0;
    z-index: 140;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.el9-gnotice[hidden] {
    display: none;
}

.el9-gnotice-mask {
    position: absolute;
    inset: 0;
    background: rgba(15, 20, 25, .36);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.el9-gnotice-card {
    position: relative;
    width: 100%;
    max-width: 400px;
    padding: 20px 22px 18px;
    border: 1px solid var(--el9-border);
    border-radius: 14px;
    background: var(--el9-bg);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .18);
    animation: el9-gnotice-in .22s var(--el9-ease);
}

@keyframes el9-gnotice-in {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

.el9-gnotice-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--el9-text);
}

.el9-gnotice-title .el9-icon {
    color: var(--el9-accent);
}

.el9-gnotice-text {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.75;
    color: var(--el9-text-2);
}

.el9-gnotice-ok {
    width: 100%;
    height: 40px;
}

/* -------------------------------------------------------------------------
 * 内容遮罩（说说）
 *
 * 两种范围共用一套「点一下揭晓」：
 *   all   → .el9-mask 包住整段，模糊加在 .el9-mask-body 这一层
 *   image → 每张图包一层 .el9-mask-shot，图自己挂 .el9-mask-img，点中哪张揭哪张
 *
 * 模糊要加在一层容器上而不是逐个子元素：逐个子元素的话，段与段之间的
 * 空白不会被糊，看上去像一排排独立的模糊块，不是「整块内容被蒙住」。
 *
 * 强度按他给的那张参考图来：糊到只剩色块，再压一层半透明的纱。
 * 只靠 blur 的话，大色块的图还是能看出轮廓。
 * ---------------------------------------------------------------------- */
.el9-mask {
    position: relative;
    /*
     * 顶部这 6px 是补「字形留白」的。
     *
     * 普通段落的 p 顶边和遮罩块一样都紧贴上一行，但文字的字形是从行高里
     * 那半截 leading 之后才开始的，凭空多出五六像素呼吸感；遮罩是一整块色，
     * 没有这层留白，直接切在时间行下沿，看着就顶上了。
     *
     * 底部同理：里面的 p 自带 8px margin-bottom，被 overflow:hidden 裁掉了，
     * 遮罩底边直接顶着动作栏。上下各补一段，跟普通卡片的呼吸对得上。
     */
    margin: 6px 0 8px;
    overflow: hidden;
    border-radius: var(--el9-r-sm);
}

.el9-mask-body {
    transition: filter .34s var(--el9-ease), transform .34s var(--el9-ease);
}

/* 放大 1.04 是给模糊留出血位 —— 不放大，四周会透出一圈没糊到的边 */
.el9-mask:not(.is-open) .el9-mask-body {
    filter: blur(22px);
    transform: scale(1.04);
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.el9-mask-veil {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0;
    border: 0;
    background: rgba(255, 255, 255, .58);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.el9-mask.is-open .el9-mask-veil {
    display: none;
}

/* 图标 + 「内容已遮罩」/「点击查看」两行，竖着排 */
.el9-mask-veil-in,
.el9-mask-shot-tip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-align: center;
    transition: color var(--el9-dur) var(--el9-ease);
}

.el9-mask-veil-in .el9-icon,
.el9-mask-shot-tip .el9-icon {
    flex: 0 0 auto;
    margin-bottom: 3px;
    color: var(--el9-text-2);
    opacity: .8;
}

.el9-mask-veil-in b,
.el9-mask-shot-tip b {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--el9-text);
}

.el9-mask-veil-in i,
.el9-mask-shot-tip i {
    font-size: 12.5px;
    font-style: normal;
    line-height: 1.4;
    color: var(--el9-text-3);
}

.el9-mask-veil:hover .el9-mask-veil-in b {
    color: var(--el9-accent-text);
}

/* 只糊图：不遮表情（那是正文的一部分），也不遮已经揭开的 */
/*
 * 被遮的图外面那层。
 *
 * 宽度必须跟着图走 —— 用 block 撑满整行的话，提示会飘到图右边的空白里，
 * 看着像「整块区域都被蒙住了」，人自然会去点那些其实点不动的空白。
 * inline-block 的 shrink-to-fit 就贴着图，图多大提示层多大。
 *
 * 这一层同时负责 overflow:hidden，把 blur 往外洇的那几像素裁掉。
 */
.el9-mask-shot {
    position: relative;
    /*
     * 收缩到图的宽度而不是撑满 —— 提示层贴着图，图小它小。
     *
     * 用 block 不用 inline-block：inline-block 不参与 margin collapse，
     * 它自己的 margin 会和上面段落那一截叠起来，图文之间凭空多出一倍距离。
     * fit-content 让 block 也能「按内容收缩」。
     */
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 1.4em 0;
    overflow: hidden;
    line-height: 0;
}

/* 说说里图片的上下间距跟正文不是一个量 */
.el9-card-text .el9-mask-shot {
    margin: var(--el9-2) 0;
}

/*
 * 说说单图那种「撑满正文宽度 + 限高裁切」的，外层也得撑满 ——
 * 里面的 img 是 width:100%，父级没有确定宽度的话这个 100% 没参照物。
 */
.el9-mask-shot:has(> .el9-img-solo:not(.el9-img-solo-small)) {
    display: block;
    width: 100%;
}

/* 网格：占满格子，列宽由 grid 说了算 */
.el9-img-grid > .el9-mask-shot {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
}

/* 横滑条：跟里面的图同高，宽度交给图的宽高比 */
.el9-img-strip-track > .el9-mask-shot {
    flex: 0 0 auto;
    height: clamp(150px, 30vw, 216px);
    margin: 0;
}

.el9-img-strip-track > .el9-mask-shot img {
    height: 100%;
    width: auto;
}

/*
 * 间距交给外面那层，免得提示层的白纱盖出一条比图还大的边。
 *
 * 选择器要压过 `.el9-content img` / `.el9-card-text .el9-img-solo` 那两条 ——
 * 它们的优先级比 `.el9-mask-shot img` 高，光写后者归不了零，
 * 结果就是外层 8px + 图自己 8px = 16px，比普通图多一倍。
 */
.el9-content .el9-mask-shot img,
.el9-card-text .el9-mask-shot img,
.is-talk-single .el9-content .el9-mask-shot img {
    margin: 0;
    line-height: normal;
    transition: filter .3s var(--el9-ease), transform .3s var(--el9-ease);
}

.el9-mask-img {
    filter: blur(16px);
    transform: scale(1.06);
    cursor: zoom-in;
}

/* 提示层不吃点击 —— 事件照旧落到下面的图上，由 app.js 的委托统一处理 */
.el9-mask-shot-tip {
    position: absolute;
    inset: 0;
    z-index: 2;
    justify-content: center;
    padding: 8px;
    background: rgba(255, 255, 255, .52);
    pointer-events: none;
}

.el9-mask-shot.is-open .el9-mask-shot-tip {
    display: none;
}

/* -------------------------------------------------------------------------
 * 404 围人小游戏
 *
 * 单栏：这一页没有「阅读」这回事，右边那栏热门标签 / 分类全是干扰，
 * 还会把本来就窄的正文挤成竖着一条 —— 所以桌面端直接不要侧栏。
 * 主栏让出宽度之后，卡片才能做到 860，棋盘才摆得开。
 *
 * 版式：404 与「标题 / 说明」并排在顶部（中间一条主题色竖线），
 * 下来是「状态 —— 战绩 · 重置」的 HUD 条，再往下棋盘，
 * 最后一条按钮带（左边两个按钮、右边站点域名）。
 *
 * 棋盘尺寸由 JS 按格子算出来写进 canvas 的 width/height，
 * 这里只负责别把手机撑破：max-width 100% + height auto。
 * ---------------------------------------------------------------------- */

/* 只在桌面藏侧栏：手机端侧栏是抽屉，那是导航入口，藏了顶栏的按钮会落空 */
@media (min-width: 1000px) {
    body:has(.el9-g404) .el9-side {
        display: none;
    }

    body:has(.el9-g404) .el9-layout {
        justify-content: center;
    }
}

.el9-g404 {
    max-width: 760px;
    margin: 0 auto;
    padding: 28px 20px 44px;
}

/* 细边卡片：跟站内其它盒子（外链确认、公告弹窗）同一套语言 */
.el9-g404-card {
    padding: 26px 30px 20px;
    border: 1px solid var(--el9-border);
    border-radius: 16px;
    background: var(--el9-bg);
    box-shadow: 0 2px 14px rgba(0, 0, 0, .04);
}

/* 顶部：大号 404 立左边，标题和说明贴着它，用主题色竖线分一下 */
.el9-g404-head {
    display: flex;
    align-items: center;
    gap: 20px;
}

.el9-g404-code {
    flex: 0 0 auto;
    margin: 0;
    font-size: 52px;
    font-weight: 800;
    line-height: .9;
    letter-spacing: -.04em;
    color: var(--el9-text);
}

.el9-g404-copy {
    min-width: 0;
    padding-left: 20px;
    border-left: 2px solid var(--el9-accent);
}

.el9-g404-title {
    margin: 0;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--el9-text);
}

.el9-g404-desc {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--el9-text-2);
}

/* HUD：状态占左边，战绩贴右，重置收在最后 */
.el9-g404-hud {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 18px 0 12px;
    padding-top: 16px;
    border-top: 1px solid var(--el9-border);
}

.el9-g404-status {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--el9-text);
    transition: color .2s var(--el9-ease);
}

.el9-g404-status.is-win   { color: #28a745; }
.el9-g404-status.is-lose  { color: var(--el9-accent-text); }
.el9-g404-status.is-warn  { color: #d97706; }
.el9-g404-status.is-trap  { color: #9c27b0; }
.el9-g404-status.is-event { color: #d48806; }

/* 一个可以围的人都没有时，这行字单独站出来 */
.el9-g404-status.is-empty {
    margin: 18px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--el9-border);
    font-size: 14px;
    font-weight: 400;
    color: var(--el9-text-2);
}

.el9-g404-score {
    margin: 0 0 0 auto;
    font-size: 12.5px;
    color: var(--el9-text-3);
    white-space: nowrap;
}

.el9-g404-score b {
    color: var(--el9-text);
    font-weight: 600;
}

.el9-g404-dot {
    margin: 0 4px;
    color: var(--el9-text-3);
}

.el9-g404-reset {
    flex: 0 0 auto;
    height: 30px;
    padding: 0 13px;
    border: 1px solid var(--el9-border-strong);
    border-radius: var(--el9-r-full);
    background: none;
    color: var(--el9-text-2);
    font-size: 12.5px;
    line-height: 1;
    cursor: pointer;
    transition: color var(--el9-dur) var(--el9-ease), border-color var(--el9-dur) var(--el9-ease);
}

.el9-g404-reset:hover {
    color: var(--el9-accent-text);
    border-color: var(--el9-accent);
}

/* 棋盘装在浅底框里：几十个圆点直接浮在白卡上会显得散 */
.el9-g404-board {
    /* 框宽度跟着棋盘走，别一路顶到卡片边上 —— 两侧空出八十多像素反而像没摆满 */
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 14px;
    border: 1px solid var(--el9-border);
    border-radius: var(--el9-r-md);
    background: var(--el9-bg-soft);
}

/*
 * JS 会把格子算出来的尺寸直接写成 canvas 的内联 style.width/height。
 * 窄屏要等比缩，就得压住这两个内联值 —— 光写 max-width 只会把宽度缩掉，
 * 高度还是原来那个像素数，棋盘会被拉成一竖条。所以 height 必须 !important。
 */
.el9-g404-board canvas {
    display: block;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* 颜色图例：跟棋盘上那四色一一对应（色值见 404.php 那段注释） */
.el9-g404-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 16px;
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--el9-text-3);
}

.el9-g404-legend span {
    display: inline-flex;
    align-items: center;
}

.el9-g404-legend i {
    width: 9px;
    height: 9px;
    margin-right: 5px;
    border-radius: 50%;
    background: #b3d9ff;
}

.el9-g404-legend .is-wall { background: #34495e; }
.el9-g404-legend .is-trap { background: #ce93d8; }
.el9-g404-legend .is-lucky { background: #ffd700; }

/* 棋盘下面那行玩法说明：小字、压淡，看完就可以忽略 */
.el9-g404-howto {
    margin: 10px 2px 0;
    font-size: 12px;
    line-height: 1.65;
    text-align: center;
    color: var(--el9-text-3);
}

/* 按钮带：按钮靠左排，域名收到最右 */
.el9-g404-acts {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--el9-border);
}

.el9-g404-acts .el9-btn {
    min-width: 128px;
    height: 40px;
    border-radius: 10px;
}

.el9-g404-site {
    margin-left: auto;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 12.5px;
    color: var(--el9-text-3);
}

@media (max-width: 700px) {
    .el9-g404 {
        padding: 18px 12px 44px;
    }

    .el9-g404-card {
        padding: 22px 16px 18px;
        border-radius: 14px;
    }

    .el9-g404-head {
        gap: 14px;
    }

    .el9-g404-code {
        font-size: 44px;
    }

    .el9-g404-copy {
        padding-left: 14px;
    }

    .el9-g404-title {
        font-size: 17px;
    }

    .el9-g404-desc {
        font-size: 13px;
    }

    .el9-g404-hud {
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 20px;
    }

    /* 战绩到手机上另起一行，不然跟状态挤在一起谁都读不顺 */
    .el9-g404-score {
        flex: 1 0 100%;
        margin-left: 0;
        order: 3;
    }

    .el9-g404-reset {
        margin-left: auto;
        order: 2;
    }

    .el9-g404-board {
        padding: 10px;
    }

    .el9-g404-acts {
        flex-wrap: wrap;
    }

    .el9-g404-acts .el9-btn {
        flex: 1;
        min-width: 0;
    }

    .el9-g404-site {
        flex: 1 0 100%;
        margin-left: 0;
        text-align: center;
    }
}

/* 「我们的故事」页里的战绩小条 */
.el9-myc-game {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 14px 0 4px;
    padding: 10px 14px;
    border: 1px solid var(--el9-border);
    border-radius: 10px;
    background: var(--el9-bg-soft);
    font-size: 13px;
    color: var(--el9-text-2);
}

.el9-myc-game .el9-icon {
    color: var(--el9-accent);
}

.el9-myc-game b {
    color: var(--el9-text);
    font-weight: 600;
}