/*!
 * 山果 ShanGuo · 令牌层（tokens.css）— 照 X 复刻（第 169b）
 *
 * 全部数值来自 **登录态 X @1440×900 的 getComputedStyle 实测**，
 * 不是印象、不是推测。数值来自对目标站的一次性实测采集（采集脚本见仓库 tools/ 说明）。
 *
 * X 实测色板（亮色）：
 *   body bg      rgb(255,255,255)     text        rgb(15,20,25)
 *   muted        rgb(83,100,113)      border      rgb(239,243,244)
 *   hover bg     rgb(247,249,249)     box bg      rgb(247,249,249)
 *   accent       rgb(29,155,240)      like        rgb(249,24,128)
 *
 * X 实测排版：
 *   body        15px / 20px 行高
 *   名字        15px / 700
 *   handle      15px / 400 / muted
 *   正文        15px / 20px
 *   右栏标题    20px / 800
 *
 * 编码：UTF-8 无 BOM。
 */

/* ==========================================================================
 * 1. 亮色令牌（X 精确取色）
 * ========================================================================== */

:root {
    /* 1.1 主色：X 蓝（指示条实测 rgb(29,155,240)） */
    --sg-accent: #1d9bf0;
    --sg-accent-soft: #e8f5fd;
    --sg-accent-strong: #0c7abf;
    --sg-accent-rgb: 29 155 240;
    --sg-accent-2: #1d9bf0;
    --sg-accent-3: #1d9bf0;

    /* 1.2 底与面（全部实测） */
    --sg-bg: #ffffff;
    --sg-bg-sub: #f7f9f9;          /* hover 行 */
    --sg-bg-soft: #eff1f1;         /* hover 导航项 */
    --sg-surface: #ffffff;
    --sg-surface-2: #f7f9f9;       /* 右栏盒子 */
    --sg-border: #eff3f4;          /* 实测 rgb(239,243,244) */
    --sg-border-strong: #cfd9de;
    --sg-glass: rgba(255, 255, 255, 0.85);

    /* 1.3 墨色阶（实测 rgb(15,20,25) / rgb(83,100,113)） */
    --sg-text: #0f1419;
    --sg-text-sub: #536471;
    --sg-text-mute: #536471;
    --sg-text-strong: #0f1419;
    --sg-text-invert: #ffffff;

    /* 1.4 语义色 */
    --sg-ok: #00ba7c;
    --sg-warn-soft: #fdf3d0;
    --sg-danger: #f91880;

    /* 1.5 互动色（X 四件套） */

    /* 1.6 分类色（保留，用于区分） */

    /* 1.7 字体族（X 用 TwitterChirp，回落系统；零 webfont 是铁律 6） */
    --sg-font-sans: "TwitterChirp", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Helvetica, Arial,
        sans-serif;
    --sg-font-serif: "Songti SC", "Noto Serif SC", "STSong", "SimSun", Georgia, serif;
    --sg-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    --sg-font-prose: var(--sg-font-sans);
    --sg-font-display: var(--sg-font-sans);

    /* 1.8 字号（实测 15px 为主） */
    --sg-fs-xs: 0.75rem;      /* 12 */
    --sg-fs-sm: 0.8125rem;    /* 13 */
    --sg-fs-base: 0.9375rem;  /* 15  ← X 的正文 */
    --sg-fs-md: 1rem;         /* 16 */
    --sg-fs-lg: 1.125rem;     /* 18 */
          /* 20  ← 右栏标题 */
         /* 20  ← 吸顶头标题 */
       /* 23  ← 详情页标题 */
       /* 15  ← 时间线标题 */

    /* 1.9 行高（实测 20px / 15px = 1.333） */
    --sg-lh-snug: 1.333;
    --sg-lh-loose: 1.5;

    /* 1.10 间距 */
    --sg-space-1: 0.25rem;
    --sg-space-2: 0.5rem;
    --sg-space-3: 0.75rem;
    --sg-space-4: 1rem;
    --sg-space-5: 1.25rem;
    --sg-space-6: 1.5rem;
    --sg-space-7: 2rem;
    --sg-space-8: 3rem;

    /* 1.11 圆角（X：胶囊 9999 / 盒子 16 / 媒体 16） */
    --sg-radius-sm: 4px;
    --sg-radius: 16px;
    --sg-radius-lg: 16px;
    --sg-radius-pill: 9999px;

    /* 1.12 边框 */
    --sg-rule: var(--sg-border);

    /* 1.13 阴影（X 几乎不用，只给浮层） */
    --sg-shadow-sm: 0 0 15px rgb(101 119 134 / 20%);
    --sg-shadow-md: 0 0 15px rgb(101 119 134 / 20%), 0 0 3px 1px rgb(101 119 134 / 15%);
    --sg-shadow-lg: 0 0 20px rgb(101 119 134 / 25%);

    /* 1.14 布局尺寸（X 实测：355 + 600 + 350 = 1305） */
    --sg-width-content: 40rem;
    --sg-nav-h: 53px;
    --sg-sticky-top: 0px;

    /* 1.15 噪点（X 无纹理） */
    --sg-noise: 0;

    /* 1.16 背景层兜底 */
    --sg-bg-alpha: 1;
    --sg-bg-c1: #ffffff;
    --sg-bg-c2: #ffffff;
    --sg-bg-c3: transparent;
    --sg-bg-c4: transparent;
    --sg-bg-angle: 160deg;
    --sg-bg-grad: #ffffff 0%,#ffffff 100%;
    --sg-bg-img: none;
    --sg-bg-size: cover;
    --sg-bg-dim: 0;
    --sg-bg-tint: 29 155 240;

    /* 1.17 命中高亮 */
    --sg-hit-bg: #d6ecfb;
    --sg-hit-ink: #0f1419;
    --sg-hit-bg-dark: #1c3d54;
    --sg-hit-ink-dark: #e7e9ea;

    /*
     * 1.18 动效（第 195 轮）
     *
     * 原来 --sg-ease 的值就是 CSS 默认的 `ease`（cubic-bezier(.25,.1,.25,1)），
     * 起步慢、收尾也慢，在 100~140ms 这种短时长上几乎读不出"响应"，
     * 点下去像没动。全站的 transition 都引用这个令牌，改它一处就都跟着变。
     *
     * 换成 ease-out-quart（.22,1,.36,1）：起步快、收尾软，同样的时长体感更利落。
     * 时长保持 X 的 100ms（--sg-dur-fast），另给一个 140ms 用于需要看清变化的场合。
     */
    --sg-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --sg-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --sg-dur: 140ms;
    --sg-dur-fast: 100ms;

    /* 1.19 层级 */

    /* 1.20 衬线开关 */
    --sg-font-serif-on: 0;

    /* 1.21 封面比例 */

    /* 1.22 吸顶偏移 */
}

/* ==========================================================================
 * 2. 深色令牌（X lights-out：纯黑 + #2f3336 线）
 * ========================================================================== */

:root[data-sg-scheme="dark"],
:root[data-sg-theme="dark"] {
    --sg-bg: #000000;
    --sg-bg-sub: #16181c;
    --sg-bg-soft: #16181c;
    --sg-surface: #000000;
    --sg-surface-2: #16181c;
    --sg-border: #2f3336;
    --sg-border-strong: #3f4448;
    --sg-glass: rgba(0, 0, 0, 0.65);

    --sg-text: #e7e9ea;
    --sg-text-sub: #71767b;
    --sg-text-mute: #71767b;
    --sg-text-strong: #e7e9ea;
    --sg-text-invert: #000000;

    --sg-ok: #00ba7c;
    --sg-warn-soft: #2e2a0f;
    --sg-danger: #f91880;

    --sg-accent: #1d9bf0;
    --sg-accent-soft: #0b2a3f;
    --sg-accent-strong: #4db5f5;
    --sg-accent-rgb: 29 155 240;

    --sg-rule: var(--sg-border);

    --sg-bg-c1: #000000;
    --sg-bg-c2: #000000;
    --sg-bg-grad: #000000 0%,#000000 100%;

    --sg-hit-bg: #1c3d54;
    --sg-hit-ink: #e7e9ea;

    --sg-shadow-sm: 0 0 15px rgb(255 255 255 / 10%);
    --sg-shadow-md: 0 0 15px rgb(255 255 255 / 12%);
    --sg-shadow-lg: 0 0 20px rgb(255 255 255 / 15%);
}

@media (prefers-color-scheme: dark) {
    :root[data-sg-scheme="auto"]:not([data-sg-theme]) {
        --sg-bg: #000000;
        --sg-bg-sub: #16181c;
        --sg-bg-soft: #16181c;
        --sg-surface: #000000;
        --sg-surface-2: #16181c;
        --sg-border: #2f3336;
        --sg-border-strong: #3f4448;

        --sg-text: #e7e9ea;
        --sg-text-sub: #71767b;
        --sg-text-mute: #71767b;
        --sg-text-strong: #e7e9ea;
        --sg-text-invert: #000000;

        --sg-ok: #00ba7c;
        --sg-warn-soft: #2e2a0f;
        --sg-danger: #f91880;

        --sg-accent: #1d9bf0;
        --sg-accent-soft: #0b2a3f;
        --sg-accent-strong: #4db5f5;

        --sg-rule: var(--sg-border);

        --sg-bg-c1: #000000;
        --sg-bg-c2: #000000;
        --sg-bg-grad: #000000 0%,#000000 100%;

        --sg-hit-bg: #1c3d54;
        --sg-hit-ink: #e7e9ea;
    }
}

:root[data-sg-scheme="light"],
:root[data-sg-theme="light"] { color-scheme: light; }

:root[data-sg-scheme="dark"],
:root[data-sg-theme="dark"] { color-scheme: dark; }

/* ==========================================================================
 * 3. 宽度档位
 * ========================================================================== */

:root[data-sg-width="narrow"] { --sg-width-content: 34rem; }
:root[data-sg-width="normal"] { --sg-width-content: 40rem; }
:root[data-sg-width="wide"]   { --sg-width-content: 52rem; }
:root[data-sg-width="full"]   { --sg-width-content: 100%; }

/* ==========================================================================
 * 4. 密度
 * ========================================================================== */

:root[data-sg-density="compact"] {
    --sg-nav-h: 48px;
}

/* ==========================================================================
 * 5. 阴影 / 描边 / 容器
 * ========================================================================== */

:root[data-sg-shadow="none"] {
    --sg-shadow-sm: none;
    --sg-shadow-md: none;
    --sg-shadow-lg: none;
}

:root[data-sg-shadow="deep"] {
    --sg-shadow-sm: 0 0 15px rgb(101 119 134 / 30%);
    --sg-shadow-md: 0 0 20px rgb(101 119 134 / 35%);
    --sg-shadow-lg: 0 0 30px rgb(101 119 134 / 40%);
}

:root[data-sg-border="none"] {
    --sg-rule: transparent;
}

:root[data-sg-border="bold"] {
    --sg-rule: var(--sg-border-strong);
}

:root[data-sg-contain="plain"] {
    --sg-surface: transparent;
    --sg-surface-2: transparent;
    --sg-shadow-sm: none;
    --sg-shadow-md: none;
    --sg-shadow-lg: none;
}

/* ==========================================================================
 * 6. 圆角档位
 * ========================================================================== */

:root[data-sg-rounded="none"] {
    --sg-radius-sm: 0px;
    --sg-radius: 0px;
    --sg-radius-lg: 0px;
}

:root[data-sg-rounded="sm"] {
    --sg-radius-sm: 4px;
    --sg-radius: 8px;
    --sg-radius-lg: 8px;
}

:root[data-sg-rounded="md"] {
    --sg-radius-sm: 8px;
    --sg-radius: 12px;
    --sg-radius-lg: 12px;
}

:root[data-sg-rounded="lg"] {
    --sg-radius-sm: 12px;
    --sg-radius: 20px;
    --sg-radius-lg: 20px;
}

/* ==========================================================================
 * 7. 封面比例
 * ========================================================================== */

/* ==========================================================================
 * 8. 噪点强度
 * ========================================================================== */

:root[data-sg-noise="0"] { --sg-noise: 0; }
:root[data-sg-noise="1"] { --sg-noise: 0.18; }
:root[data-sg-noise="2"] { --sg-noise: 0.34; }
:root[data-sg-noise="3"] { --sg-noise: 0.55; }

/* ==========================================================================
 * 9. 背景浓度
 * ========================================================================== */

/*
 * 这里原本是两条悬空选择器：
 *   :root[data-sg-scheme="dark"],
 *   :root[data-sg-scheme="light"],
 * 后面直接跟了两个空的 @media —— 选择器列表里不能出现 @media，
 * 整段被 CSS 的错误恢复机制丢弃。它们本来也没有任何声明，
 * 纯粹是早期写残的骨架，第 215 轮清掉。
 */

/* ==========================================================================
 * 10. 衬线开关
 * ========================================================================== */

:root[data-sg-serif="1"] {
    --sg-font-prose: var(--sg-font-serif);
    --sg-font-serif-on: 1;
}

:root:not([data-sg-serif="1"]) {
    --sg-font-prose: var(--sg-font-sans);
}

/* ==========================================================================
 * 11. 打印令牌
 * ========================================================================== */

@media print {
    :root {
        --sg-bg: #ffffff;
        --sg-bg-sub: #ffffff;
        --sg-bg-soft: #f2f2f2;
        --sg-surface: #ffffff;
        --sg-surface-2: #ffffff;
        --sg-border: #cccccc;
        --sg-border-strong: #999999;
        --sg-rule: #dddddd;
        --sg-text: #000000;
        --sg-text-sub: #333333;
        --sg-text-mute: #666666;
        --sg-text-strong: #000000;
        --sg-text-invert: #ffffff;
        --sg-shadow-sm: none;
        --sg-shadow-md: none;
        --sg-shadow-lg: none;
        --sg-print-link: #555555;
    }
}

/* ==========================================================================
 * 12. 根基线
 * ========================================================================== */

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

html {
    color-scheme: light dark;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    tab-size: 4;
    /*
     * 用 clip 而不是 hidden：`overflow-x: hidden` 会让 html/body 变成滚动容器，
     * 所有 position: sticky 都相对它而不是视口吸顶（第 11 轮查了五轮）。
     */
    overflow-x: clip;
    scroll-behavior: smooth;
    background-color: var(--sg-bg);
}

body.sg-body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 17% 23%, rgb(0 0 0 / calc(var(--sg-noise) * 0.05)) 0 1px, transparent 1px),
        radial-gradient(circle at 63% 71%, rgb(0 0 0 / calc(var(--sg-noise) * 0.04)) 0 1px, transparent 1px),
        radial-gradient(circle at 41% 88%, rgb(0 0 0 / calc(var(--sg-noise) * 0.035)) 0 1px, transparent 1px),
        radial-gradient(circle at 87% 39%, rgb(0 0 0 / calc(var(--sg-noise) * 0.03)) 0 1px, transparent 1px);
    background-size: 9px 9px, 13px 13px, 17px 17px, 23px 23px;
}

body.sg-body {
    margin: 0;
    min-height: 100vh;
    background: var(--sg-bg);
    color: var(--sg-text);
    font-family: var(--sg-font-sans);
    font-size: 15px;
    line-height: 20px;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-kerning: normal;
    text-rendering: optimizeLegibility;
}

body.sg-body img,
body.sg-body svg,
body.sg-body video {
    max-width: 100%;
    height: auto;
}

body.sg-body p,
body.sg-body li {
    text-wrap: pretty;
}

body.sg-body h1,
body.sg-body h2,
body.sg-body h3 {
    text-wrap: balance;
}

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

body.sg-body :focus-visible {
    outline: 2px solid var(--sg-accent);
    outline-offset: 2px;
    border-radius: 4px;
}
/* ==========================================================================
 * 31. 暗色改用 X 的「微暗（Dim）」配色（第 181 轮）
 *
 * 纯黑（#000000）是 X 的「熄灯 Lights out」档，视觉上过于硬。
 * X 的默认暗色是「微暗 Dim」：
 *
 *   background      #15202b
 *   hover / raised  #1c2733
 *   surface-2       #1e2732
 *   border          #38444d
 *   text            #f7f9f9
 *   text-secondary  #8b98a5
 *
 * 保留 [data-sg-dark="lots"] 作为纯黑档的开关（不占后台配置项）。
 * ========================================================================== */

:root[data-sg-scheme="dark"],
:root[data-sg-theme="dark"] {
    --sg-bg: #15202b;
    --sg-bg-sub: #1c2733;
    --sg-bg-soft: #1c2733;
    --sg-surface: #15202b;
    --sg-surface-2: #1e2732;
    --sg-border: #38444d;
    --sg-border-strong: #4a5a6a;

    --sg-text: #f7f9f9;
    --sg-text-sub: #8b98a5;
    --sg-text-mute: #8b98a5;
    --sg-text-strong: #f7f9f9;
    --sg-text-invert: #15202b;

    --sg-ok: #00ba7c;
    --sg-warn-soft: #2e2a0f;
    --sg-danger: #f91880;

    --sg-accent: #1d9bf0;
    --sg-accent-soft: #0b2a3f;
    --sg-accent-strong: #4db5f5;
    --sg-accent-rgb: 29 155 240;

    --sg-rule: var(--sg-border);

    --sg-bg-c1: #15202b;
    --sg-bg-c2: #15202b;
    --sg-bg-grad: #15202b 0%,#15202b 100%;

    --sg-hit-bg: #1c3d54;
    --sg-hit-ink: #f7f9f9;

    --sg-glass: rgba(21, 32, 43, 0.85);

    --sg-shadow-sm: 0 0 15px rgb(0 0 0 / 45%);
    --sg-shadow-md: 0 0 15px rgb(0 0 0 / 50%);
    --sg-shadow-lg: 0 0 20px rgb(0 0 0 / 55%);
}

@media (prefers-color-scheme: dark) {
    :root[data-sg-scheme="auto"]:not([data-sg-theme]) {
        --sg-bg: #15202b;
        --sg-bg-sub: #1c2733;
        --sg-bg-soft: #1c2733;
        --sg-surface: #15202b;
        --sg-surface-2: #1e2732;
        --sg-border: #38444d;
        --sg-border-strong: #4a5a6a;

        --sg-text: #f7f9f9;
        --sg-text-sub: #8b98a5;
        --sg-text-mute: #8b98a5;
        --sg-text-strong: #f7f9f9;
        --sg-text-invert: #15202b;

        --sg-ok: #00ba7c;
        --sg-warn-soft: #2e2a0f;
        --sg-danger: #f91880;

        --sg-accent: #1d9bf0;
        --sg-accent-soft: #0b2a3f;
        --sg-accent-strong: #4db5f5;

        --sg-rule: var(--sg-border);

        --sg-bg-c1: #15202b;
        --sg-bg-c2: #15202b;
        --sg-bg-grad: #15202b 0%,#15202b 100%;

        --sg-hit-bg: #1c3d54;
        --sg-hit-ink: #f7f9f9;

        --sg-glass: rgba(21, 32, 43, 0.85);
    }
}

/* --------------------------------------------------------------------------
 * 「熄灯」纯黑档（可选）：<html data-sg-dark="lots">
 * -------------------------------------------------------------------------- */

:root[data-sg-dark="lots"][data-sg-scheme="dark"],
:root[data-sg-dark="lots"][data-sg-theme="dark"] {
    --sg-bg: #000000;
    --sg-bg-sub: #16181c;
    --sg-bg-soft: #16181c;
    --sg-surface: #000000;
    --sg-surface-2: #16181c;
    --sg-border: #2f3336;
    --sg-border-strong: #3f4448;
    --sg-text: #e7e9ea;
    --sg-text-sub: #71767b;
    --sg-text-mute: #71767b;
    --sg-text-strong: #e7e9ea;
    --sg-text-invert: #000000;
    --sg-glass: rgba(0, 0, 0, 0.65);
    --sg-bg-c1: #000000;
    --sg-bg-c2: #000000;
}
/*!
 * 山果 ShanGuo · 组件层（components.css）— 照 X 复刻（第 169b）
 *
 * 全部数值来自登录态 X @1440×900 的实测，不是推测：
 *   header/primary/sidebar = 355/600/350
 *   条目 padding 0 16px，头像 40，名字 15/700，正文 15/20px
 *   操作行 margin-top 12，max-width 600，space-between
 *   页签高 53，指示条 60×4
 *
 * 三栏尺寸、字号、行高、间距、颜色全部按实测写死；
 * 只有用户可配的部分（主色、圆角、密度）走令牌。
 */

/* ==========================================================================
 * 2. 外壳（按 X 实测 · 第 169b）
 *
 * X @1440 的实测：
 *
 *   header[role=banner]     x=0    w=355   ← 外层容器（含 80px 左留白）
 *     └ 内层                x=80   w=275   ← 真正的导航宽度
 *   primaryColumn           x=355  w=600
 *   sidebarColumn           x=985  w=350
 *
 * 即：355 + 600 + 350 = 1305，左侧 80px 是「居中留出来的」。
 * 整页 1440，左右各留 (1440-1305-355+355)/2 … 实际是 header 自己吃掉 80，
 * 让三栏整体居中：355+600+350=1305，1440-1305=135，左边 80 + 右边 55 不均等 ——
 * 因为 X 的 header 宽度是「内容宽度 + 内部留白」，不是固定 275。
 *
 * 简化实现：外壳 1305 居中，左栏 355（内含 80 左 padding）、中 600、右 350。
 * 这样在 1440 下与 X 视觉一致。
 *
 * 左导航每一项实测：
 *   a          259 宽 × 58 高，padding 4px 0，无 border-radius
 *   内部       图标 26.25px + 间距 20px + 文字 15px
 *   发帖按钮   233 × 52，背景 rgb(15,20,25)，圆角 9999
 *   账号条     259 × 65，padding 12px，圆角 9999
 *
 * 页签实测：
 *   tablist h=53，tab 273 宽，indicator 60 × 4，圆角 9999，色 rgb(29,155,240)
 * ========================================================================== */

/*
 * 外壳定位（第 170 轮修正，按 X 实测）
 *
 * X @1440 实测：
 *   header  x=0    w=355   ← **贴左边界**
 *   primary x=355  w=600
 *   sidebar x=985  w=350
 *
 * 我之前用 max-width:1305 + margin:auto 居中 → 整块右移 60px，
 * 导致 header.x=60 / primary.x=415 / navItem.x=148，全部对不上。
 *
 * X 不是「整块居中」，而是「把剩余空间全部留给**右边**」：
 *   1305 宽的三栏贴在左侧，右边空出 135px（1440-1305）。
 *   左栏内部再用 80px 左留白把导航推到 x=88。
 *
 * 所以：不要居中，直接贴左。
 * 但在超宽屏（X 自己会居中）—— 实测 1920 时 header.x=0 仍然贴左，
 * header 宽度自己长到 595（吃掉多余空间）。说明 X 的外壳是
 * `justify-content: flex-start` + header 弹性变宽。
 */
.sg-shell {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    max-inline-size: 1305px;
    margin-inline: 0;
    padding: 0;
    min-block-size: 100vh;
}

/* --------------------------------------------------------------------------
 * 2.1 左导航
 * -------------------------------------------------------------------------- */

.sg-nav-pane {
    position: sticky;
    inset-block-start: 0;
    display: flex;
    flex-direction: column;
    flex: 0 0 355px;
    inline-size: 355px;
    block-size: 100vh;
    /*
     * X 实测：header x=0 w=355，导航项 x=88 w=259
     *
     *   88 = 左留白
     *   259 = 355 - 88 - 8   → 左 88 + 右 8
     *
     * 上一版写 padding: 0 8px 0 80px（左 80），导航项落在 x=80 w=267。
     * 差 8px。改成左 88。
     */
    padding: 0 8px 0 88px;
    overflow-y: auto;
    scrollbar-width: none;
}

.sg-nav-pane::-webkit-scrollbar { display: none; }

/* 内层：真正的 275 宽导航列 */
.sg-nav-pane__inner {
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    block-size: 100%;
    padding-inline: 0;
}

/* 品牌 X：52×52 的圆形热区，图标 30px */
.sg-nav-pane__brand {
    display: grid;
    place-items: center;
    inline-size: 52px;
    block-size: 52px;
    margin-block: 2px;
    border-radius: 9999px;
    color: var(--sg-text);
    text-decoration: none;
    transition: background-color 100ms var(--sg-ease);
}

.sg-nav-pane__brand:hover {
    background: var(--sg-bg-soft);
}/* 导航项：X 是 58px 高，图标 26，间距 20，字号 15 */
.sg-nav-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * 导航项（第 170 轮按 X 实测改）
 *
 * X 实测：259×58，padding 4px 0，**铺满整列宽度**，border-radius 0（不是胶囊）
 * 我的旧版：inline-size: max-content → 只有 96 宽（文字那么宽）。
 * 差距：悬停底色只有文字一小块、点击区域很小，和 X 完全不是一回事。
 *
 * X 的胶囊效果只出现在「图标那个圆」上，不是整行 —— 整行是矩形铺满。
 * 但 X 的行内有一层 52×52 的圆形 hover（图标区），行本身 hover 时
 * 只有左侧图标区变灰圆。这里用内层 span 做圆。
 */
.sg-nav-link {
    display: flex;
    align-items: center;
    gap: 20px;
    inline-size: 100%;
    max-inline-size: 100%;
    min-block-size: 58px;
    padding: 4px 0;
    border-radius: 0;
    color: var(--sg-text);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    transition: color 100ms var(--sg-ease);
}

/*
 * hover 只在图标区出圆（X 的做法）：把 svg 包一层不可见的圆。
 * 用 padding 撑出 52×52 圆，背景色在 hover 时出现。
 */
.sg-nav-link svg {
    flex: 0 0 auto;
    inline-size: 26px;
    block-size: 26px;
    padding: 12px;
    margin-inline-start: -12px;
    box-sizing: content-box;
    border-radius: 9999px;
    transition: background-color 100ms var(--sg-ease);
}

.sg-nav-link:hover svg {
    background: var(--sg-bg-soft);
}

/* 整行没有底色（X 只在图标区出圆） */

.sg-nav-link.is-active,
.sg-nav-link[aria-current="page"] {
    font-weight: 700;
}

.sg-nav-link__text {
    padding-inline-end: 8px;
}

/* 发帖按钮：233×52，深色胶囊 */
.sg-nav-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 233px;
    min-block-size: 52px;
    margin-block-start: 16px;
    padding-inline: 16px;
    border: 0;
    border-radius: 9999px;
    background: var(--sg-text);
    color: var(--sg-text-invert);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 100ms var(--sg-ease);
}

.sg-nav-cta:hover {
    background: var(--sg-bg-soft);
}

/* 账号条：259×65，padding 12，圆角 9999 */
.sg-nav-account {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-block-start: auto;
    margin-block-end: 12px;
    padding: 12px;
    border-radius: 9999px;
    color: inherit;
    text-decoration: none;
    transition: background-color 100ms var(--sg-ease);
}

.sg-nav-account:hover {
    background: var(--sg-bg-soft);
}

.sg-nav-account__avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    inline-size: 40px;
    block-size: 40px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--sg-border-strong);
    color: var(--sg-text-sub);
    font-size: 15px;
    font-weight: 700;
}

.sg-nav-account__avatar img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.sg-nav-account__text {
    min-inline-size: 0;
    line-height: 20px;
}

.sg-nav-account__name {
    display: block;
    overflow: hidden;
    color: var(--sg-text);
    font-size: 15px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sg-nav-account__handle {
    display: block;
    overflow: hidden;
    color: var(--sg-text-sub);
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
 * 2.2 中栏：600px
 *
 * X 的 primaryColumn 左右各 1px 边框（实测 0.667px solid rgb(239,243,244)），
 * 内容背景纯白。
 * -------------------------------------------------------------------------- */

.sg-main {
    display: flex;
    flex-direction: column;
    flex: 0 0 600px;
    inline-size: 600px;
    max-inline-size: 600px;
    min-inline-size: 0;
    min-block-size: 100vh;
    border-inline: 1px solid var(--sg-border);
    background: var(--sg-bg);
}/* 页签：tablist h=53，tab 273 宽，indicator 60×4 圆角 */
.sg-tabs {
    display: flex;
    border-block-end: 1px solid var(--sg-border);
}

.sg-tab {
    position: relative;
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    min-block-size: 53px;
    padding-inline: 16px;
    color: var(--sg-text-sub);
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    text-decoration: none;
    transition: background-color 100ms var(--sg-ease);
}

.sg-tab:hover {
    background: var(--sg-bg-sub);
}

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

/* 指示条：X 是 60×4（不是满宽），圆角，主色 */
.sg-tab.is-active::after {
    content: "";
    position: absolute;
    inset-inline: 50%;
    inset-block-end: 0;
    inline-size: 60px;
    block-size: 4px;
    margin-inline-start: -30px;
    border-radius: 9999px;
    background: var(--sg-accent);
}

.sg-flow {
    flex: 1 1 auto;
    min-inline-size: 0;
}

.sg-page {
    min-inline-size: 0;
}

/* --------------------------------------------------------------------------
 * 2.3 右栏：350px
 *
 * X 的 sidebarColumn：350 宽，无背景。
 * 内部：搜索框 319×40（圆角胶囊、灰底），下面是若干圆角盒子。
 * 盒子实测：圆角 16，背景 rgb(247,249,249)，无边框。
 * -------------------------------------------------------------------------- */

.sg-rail-pane {
    position: sticky;
    inset-block-start: 0;
    display: flex;
    flex-direction: column;
    flex: 0 0 350px;
    inline-size: 350px;
    block-size: 100vh;
    padding: 0 0 0 0;
    overflow-y: auto;
    scrollbar-width: none;
}

.sg-rail-pane::-webkit-scrollbar { display: none; }

/* 搜索框：319×40，X 的 y=9 */
.sg-search-box {
    position: sticky;
    inset-block-start: 0;
    z-index: 5;
    padding: 6px 16px 2px 29px;
    background: var(--sg-bg);
}

.sg-topsearch {
    display: flex;
    align-items: center;
    gap: 8px;
    inline-size: 319px;
    block-size: 42px;
    padding-inline: 16px 4px;
    border: 1px solid transparent;
    border-radius: 9999px;
    background: var(--sg-bg-soft);
    transition: border-color 100ms var(--sg-ease), background-color 100ms var(--sg-ease);
}

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

.sg-topsearch__icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--sg-text-sub);
}

.sg-topsearch__input {
    flex: 1 1 auto;
    min-inline-size: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--sg-text);
    font-family: inherit;
    font-size: 15px;
    line-height: 20px;
    appearance: none;
}

.sg-topsearch__input::placeholder {
    color: var(--sg-text-sub);
    opacity: 1;
}

.sg-topsearch__input:focus { outline: none; }

.sg-topsearch__input::-webkit-search-decoration,
.sg-topsearch__input::-webkit-search-cancel-button {
    appearance: none;
}

/* 右栏盒子：圆角 16，灰底 */
.sg-rail-box {
    margin: 16px 29px 0;
    overflow: hidden;
    border: 0;
    border-radius: 16px;
    background: var(--sg-bg-sub);
}

.sg-rail-pane .sg-rail__block {
    display: block;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* 盒子标题：X 的 h2 是 20px/800 */
.sg-rail-pane .sg-rail__title {
    margin: 0;
    padding: 12px 16px;
    color: var(--sg-text);
    font-size: 20px;
    font-weight: 800;
    line-height: 24px;
}

.sg-rail-pane .sg-rail__list {
    margin: 0;
    padding: 0 0 4px;
    list-style: none;
}

.sg-rail-pane .sg-rail__list > li {
    padding: 12px 16px;
    color: var(--sg-text-sub);
    font-size: 13px;
    line-height: 16px;
    transition: background-color 100ms var(--sg-ease);
}

.sg-rail-pane .sg-rail__list > li:hover {
    background: var(--sg-bg-soft);
}

.sg-rail-pane .sg-rail__list a {
    display: block;
    color: var(--sg-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    text-decoration: none;
}

.sg-rail-pane .sg-rail__list a:hover {
    text-decoration: underline;
}

.sg-rail-pane .sg-rail__list--siteinfo > li,
.sg-rail-pane .sg-rail__list--stats > li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.sg-rail-pane .sg-rail__label {
    color: var(--sg-text-sub);
    font-size: 13px;
}

.sg-rail-pane .sg-rail__value {
    color: var(--sg-text);
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}.sg-rail-pane .sg-rail__list--tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 4px 16px 12px;
}

.sg-rail-pane .sg-rail__list--tags > li {
    padding: 0;
}

.sg-rail-pane .sg-rail__list--tags > li:hover { background: transparent; }

.sg-rail-pane .sg-rail__list--tags a {
    display: inline-flex;
    padding: 0;
    color: var(--sg-accent);
    font-size: 13px;
    font-weight: 400;
}

.sg-rail-pane .sg-rail__count {
    margin-inline-start: 4px;
    color: var(--sg-text-sub);
    font-size: 13px;
    font-weight: 400;
}.sg-rail-pane .sg-rail__text {
    margin: 2px 0 0;
    color: var(--sg-text-sub);
    font-size: 13px;
    font-weight: 400;
    line-height: 16px;
}/* 右栏底部小字 */
.sg-rail-foot {
    padding: 16px 29px 32px;
    color: var(--sg-text-sub);
    font-size: 13px;
    line-height: 20px;
}

.sg-rail-foot a {
    margin-inline-end: 12px;
    color: var(--sg-text-sub);
    text-decoration: none;
}

.sg-rail-foot a:hover { text-decoration: underline; }

/* ==========================================================================
 * 3. 时间线条目（按 X 实测重写 · 第 169b）
 *
 * X 的实测值（1440×900，登录态）：
 *
 *   article        599 宽，padding 0 16px，**borderBottom 0**（没有分隔线！）
 *   avatar         40×40，x=372（相对 article 左 16px）
 *   头像到正文     420 - 412 = 8px 间隙 → 名字起点 420
 *   名字           15px / 700 / rgb(15,20,25)
 *   handle         15px / 400 / rgb(83,100,113)
 *   名字行高       20px，y=187（article y=175，+12）
 *   正文           15px / 20px 行高 / 宽 519（= 599 - 16*2 - 40 - 8）
 *   正文起点 y=209（名字行底 207 + 2）
 *   操作行         margin-top 12px，justify-content: space-between，max-width 600
 *   操作按钮       高 20，颜色 rgb(15,20,25)，无 padding
 *
 * 最关键的差异：**X 的条目之间没有 border-bottom**。
 * 我第一版每条都画了一根线，看起来像「表格」而不是「时间线」。
 * X 靠的是「条目内部有 padding、相邻条目的头像对齐」形成的节奏，
 * 分隔线只在「这一条结束、下一条开始」明显时才有（比如 cellInnerDiv 之间）。
 * → 改成：条目本身无边框，只在视觉需要时用极淡的线（hover 时出现）。
 * ========================================================================== */

.sg-flow-list {
    display: block;
    min-inline-size: 0;
}

.sg-row {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border: 0;
    background: transparent;
    transition: background-color 100ms var(--sg-ease);
}

.sg-row:hover {
    background: var(--sg-bg-sub);
}

/* 头像：40×40，圆形（X 的 img 有 border-radius: 50%，容器是 0） */
.sg-row__avatar {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    inline-size: 40px;
    block-size: 40px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--sg-border-strong);
    color: var(--sg-text-sub);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}

.sg-row__avatar img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

/* 正文列 */
.sg-row__body {
    flex: 1 1 auto;
    min-inline-size: 0;
}

/* ---- 署名行：名字 · handle · · 时间，一行 ---- */
.sg-row__head {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 0 4px;
    margin: 0;
    overflow: hidden;
    font-size: 15px;
    line-height: 20px;
    white-space: nowrap;
}

.sg-row__name {
    flex: 0 1 auto;
    overflow: hidden;
    color: var(--sg-text);
    font-size: 15px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sg-row__sep {
    flex: 0 0 auto;
    color: var(--sg-text-sub);
}

/* handle 保留但不显示（博客没有多用户） */
.sg-row__handle {
    display: none;
}

.sg-row__time {
    flex: 0 0 auto;
    color: var(--sg-text-sub);
    font-size: 15px;
    font-weight: 400;
}

/* ---- 标题：X 的 post 没有标题，这里让标题当「正文第一行」----
 * 不加 fontSize，只加 weight —— 和 X 的 bold 行内文字同规格。
 */
.sg-row__title {
    margin: 0;
    color: var(--sg-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: normal;
}

.sg-row__title a {
    color: inherit;
    text-decoration: none;
}

.sg-row__title a:hover {
    text-decoration: underline;
}

/* ---- 摘要：15px / 20px 行高，宽 519 ---- */
.sg-row__excerpt {
    display: -webkit-box;
    margin: 2px 0 0;
    overflow: hidden;
    color: var(--sg-text);
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow-wrap: break-word;
    white-space: pre-wrap;
}

.sg-row__excerpt a {
    color: var(--sg-accent);
    text-decoration: none;
}

.sg-row__excerpt a:hover {
    text-decoration: underline;
}

/* ---- 封面：圆角 16，宽度满栏 ---- */
.sg-row__cover {
    display: block;
    overflow: hidden;
    margin-block-start: 12px;
    border: 0;
    border-radius: 16px;
    background: var(--sg-bg-soft);
}

.sg-row__cover img,
.sg-row__cover .sg-gen {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

/* ---- 操作行：margin-top 12px，space-between，无 padding ---- */
.sg-row__acts {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-inline-size: 600px;
    margin-block-start: 12px;
    color: var(--sg-text);
}

.sg-act {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--sg-text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    text-decoration: none;
    cursor: pointer;
    transition: color 100ms var(--sg-ease);
}

.sg-act svg {
    inline-size: 18px;
    block-size: 18px;
    color: var(--sg-text-sub);
    transition: color 100ms var(--sg-ease);
}

.sg-act span {
    color: var(--sg-text-sub);
    font-variant-numeric: tabular-nums;
}

.sg-act:hover svg { color: var(--sg-accent); }
.sg-act:hover span { color: var(--sg-accent); }

/*
 * 已赞状态（第 229 轮）
 *
 * Sango.react 点赞成功时 toggle 的是 is-mine，而这里只写了 is-on ——
 * 于是「赞过了」没有任何视觉反馈。两种写法都认。
 */
.sg-act--like:hover svg,
.sg-act--like.is-on svg,
.sg-act--like.is-mine svg { color: var(--sg-danger); }
.sg-act--like:hover span { color: var(--sg-danger); }

.sg-act--view:hover svg { color: var(--sg-accent); }.sg-dot { color: var(--sg-text-sub); user-select: none; }.sg-views { color: inherit; }

/* ==========================================================================
 * 4. 形态（只改密度）
 * ========================================================================== */

/* lead：首条给更多正文行 */
.sg-row--lead .sg-row__excerpt {
    -webkit-line-clamp: 5;
}

/* plate：封面通栏、去圆角（X 的全宽媒体） */
.sg-row--plate .sg-row__cover {
    margin-inline: -16px;
    border-radius: 0;
}

/* grid：两列（归档页） */
.sg-flow-list[data-sg-list="grid"] .sg-row {
    padding-block: 8px;
}

/* compact：只有标题与元信息 */
.sg-flow-list[data-sg-list="compact"] .sg-row__excerpt,
.sg-flow-list[data-sg-list="compact"] .sg-row__cover {
    display: none;
}

.sg-flow-list[data-sg-list="compact"] .sg-row {
    padding-block: 8px;
}

/* ==========================================================================
 * 5. 装饰开关
 * ========================================================================== */

:root[data-sg-deco-hover="0"] .sg-row:hover {
    background: transparent;
}

:root[data-sg-deco-line="0"] .sg-row {
    border-block-end-color: transparent;
}

:root[data-sg-deco-zoom="1"] .sg-row__cover img {
    transition: scale 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

:root[data-sg-deco-zoom="1"] .sg-row:hover .sg-row__cover img {
    scale: 1.02;
}

:root[data-sg-deco-tape="1"] .sg-row__avatar {
    box-shadow: 0 0 0 2px var(--sg-bg), 0 0 0 3px var(--sg-accent);
}

/* ==========================================================================
 * 7. 详情页（照 X 的 post 详情 · 第 169b）
 *
 * X 的详情页实测结构：
 *   吸顶条（← + 标题 + 计数）h=53
 *   作者行（40 头像 + 名字 15/700 + handle 15/400 muted）
 *   正文 17px / 1.35（详情页比时间线大一号）
 *   时间行（muted 15px）+ 一根线
 *   统计条（转推 / 引用 / 喜欢 / 收藏）
 *   操作行（4 个按钮，各占 25%）
 *   回复列表（同时间线条目）
 * ========================================================================== */

.sg-post {
    display: block;
    min-inline-size: 0;
}

/* 吸顶返回条 */
.sg-post-bar {
    position: sticky;
    inset-block-start: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 20px;
    min-block-size: 53px;
    padding-inline: 8px 16px;
    background: var(--sg-glass);
    backdrop-filter: blur(12px);
    border-block-end: 1px solid var(--sg-border);
}

.sg-post-bar__back {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    inline-size: 34px;
    block-size: 34px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--sg-text);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 100ms var(--sg-ease);
}

.sg-post-bar__back:hover {
    background: var(--sg-bg-soft);
}

.sg-post-bar__text {
    min-inline-size: 0;
}

.sg-post-bar__title {
    margin: 0;
    overflow: hidden;
    color: var(--sg-text);
    font-size: 20px;
    font-weight: 800;
    line-height: 24px;
    text-overflow: ellipsis;
    white-space: nowrap;
}/* 作者行 */
.sg-post-author {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px 0;
}

.sg-post-author__avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    inline-size: 40px;
    block-size: 40px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--sg-border-strong);
    color: var(--sg-text-sub);
    font-size: 15px;
    font-weight: 700;
}

.sg-post-author__avatar img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.sg-post-author__text {
    min-inline-size: 0;
    line-height: 20px;
}

.sg-post-author__name {
    margin: 0;
    color: var(--sg-text);
    font-size: 15px;
    font-weight: 700;
}

.sg-post-author__handle {
    margin: 0;
    color: var(--sg-text-sub);
    font-size: 15px;
    font-weight: 400;
}

/* 标题：详情页 23px */
.sg-post__title {
    margin: 8px 16px 0;
    color: var(--sg-text);
    font-size: 23px;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: normal;
    text-wrap: balance;
}

/* 正文：17px / 1.35 */
.sg-post__body {
    padding: 4px 16px 0;
    color: var(--sg-text);
    font-size: 17px;
    line-height: 1.35;
    overflow-wrap: break-word;
}

/* 元信息行 */
.sg-post__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: 16px 16px 0;
    padding-block-end: 16px;
    border-block-end: 1px solid var(--sg-border);
    color: var(--sg-text-sub);
    font-size: 15px;
    line-height: 20px;
}

.sg-post__meta a {
    color: var(--sg-text-sub);
    text-decoration: none;
}

.sg-post__meta a:hover {
    text-decoration: underline;
}

/* 统计条 */
.sg-post__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 0 16px;
    padding-block: 16px;
    border-block-end: 1px solid var(--sg-border);
    color: var(--sg-text-sub);
    font-size: 15px;
    line-height: 20px;
}

.sg-post__stats b {
    color: var(--sg-text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* 操作行：4 个按钮均分 */
.sg-post__acts {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 4px 16px;
    border-block-end: 1px solid var(--sg-border);
}

.sg-post__acts .sg-act svg {
    inline-size: 22px;
    block-size: 22px;
}

/* 标签 */
.sg-post__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 12px 16px;
    border-block-end: 1px solid var(--sg-border);
}

.sg-tag {
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 9999px;
    background: var(--sg-bg-soft);
    color: var(--sg-text);
    font-size: 13px;
    line-height: 26px;
    text-decoration: none;
    transition: background-color 100ms var(--sg-ease);
}

.sg-tag:hover {
    background: var(--sg-bg-soft);
}

.sg-tag::before {
    content: "#";
    margin-inline-end: 1px;
    color: var(--sg-text-sub);
}

/* 上下篇 */
.sg-post__nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-block-end: 1px solid var(--sg-border);
}

/* 每个方向一个固定格子：链接与「没有更早的文章」都有盒子（第 191 轮） */
.sg-post__nav-cell {
    min-inline-size: 0;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 20px;
    color: var(--sg-text-sub);
}

.sg-post__nav-cell + .sg-post__nav-cell {
    border-inline-start: 1px solid var(--sg-border);
}

.sg-post__nav a {
    display: block;
    padding: 0;
    color: var(--sg-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    text-decoration: none;
    transition: color 100ms var(--sg-ease);
}

.sg-post__nav a:hover {
    color: var(--sg-accent);
    text-decoration: none;
}

.sg-post__nav a:hover {
    background: var(--sg-bg-sub);
}

.sg-post__nav a + a {
    border-inline-start: 1px solid var(--sg-border);
}

/* 独立页 */
.sg-page-doc {
    display: block;
    min-inline-size: 0;
}

.sg-page-doc__head {
    padding: 16px 16px 0;
}

.sg-page-doc__title {
    margin: 0;
    color: var(--sg-text);
    font-size: 23px;
    font-weight: 700;
    line-height: 28px;
}

.sg-page-doc__body {
    padding: 8px 16px 32px;
    color: var(--sg-text);
    font-size: 17px;
    line-height: 1.35;
}

/* ==========================================================================
 * 8. 正文排版（sg-prose）
 * ========================================================================== */

/*
 * 正文基础排版（第 200 轮）
 *
 * 原来 .sg-prose 没有自己的字号与行高，一路继承下来是
 * 17px / 22.95px —— 行高比只有 1.35。
 * 那是 X 短帖的密度，放在一篇中文长文上会明显发挤：
 * 汉字是方块字，行距不足时上下两行会「粘」在一起，读久了累。
 *
 * 中文正文的舒适区在 1.7~1.8，这里取 1.78（17px → 30.3px）。
 * 字宽保持 567px 不变（约 33 个汉字一行，正在 30~40 的理想区间）。
 *
 * text-wrap: pretty 让浏览器避免段末孤字（最后一行只剩一两个字）。
 */
.sg-prose {
    font-size: 17px;
    line-height: 1.78;
    text-wrap: pretty;
}

.sg-prose > *:first-child { margin-block-start: 0; }
.sg-prose > *:last-child { margin-block-end: 0; }

/* 段间距：行高变大后，1em 显得略挤，放到 1.05em 让段落更好分 */
.sg-prose p { margin: 0 0 1.05em; }

/*
 * 正文标题阶梯（第 208 轮）
 *
 * 改之前实测：正文 17px、h3 17px、h4 15px。
 * 也就是说 **h3 和正文一样大、h4 比正文还小**，层级全靠字重硬撑。
 * 短帖看不出来，但这是一篇篇长文 —— 扫读时找不到结构，
 * 读者只能一行行读下去。
 *
 * 现在的阶梯（对正文 17px 的倍数）：
 *   h2  24px  ×1.41  节与节的分界
 *   h3  20px  ×1.18  节内小节
 *   h4  17px  ×1.00  与正文同号，靠字重区分（这是通行做法，不是偷懒）
 *
 * 行高从固定 px 改成倍数，字号再调也不会挤在一起。
 */
.sg-prose h2 {
    margin: 1.7em 0 0.5em;
    color: var(--sg-text);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.35;
}

.sg-prose h3 {
    margin: 1.5em 0 0.45em;
    color: var(--sg-text);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
}

.sg-prose h4 {
    margin: 1.3em 0 0.4em;
    color: var(--sg-text);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
}

.sg-prose a {
    color: var(--sg-accent);
    text-decoration: none;
}

.sg-prose a:hover { text-decoration: underline; }

.sg-prose strong { font-weight: 700; }

.sg-prose ul,
.sg-prose ol {
    margin: 0 0 1em;
    padding-inline-start: 1.4em;
}

.sg-prose li { margin-block: 0.3em; }

/*
 * 引言块（第 200 轮改版）
 *
 * 原来是一条 3px 的主色竖线贴在左边 —— 那是「引用」最常见的偷懒做法：
 * 一根彩色侧条本身不表达任何信息，只是把内容往里推了一点。
 * 换成整块淡底 + 圆角：边界清楚、和正文区分明显，也不靠一根线撑场面。
 * 正文内的引用不需要引号符号，读者从版面就能认出来。
 */
.sg-prose blockquote {
    margin: 0 0 1.1em;
    padding: 0.85em 1.05em;
    border: 0;
    border-radius: 12px;
    background: var(--sg-bg-soft);
    color: var(--sg-text-sub);
}

.sg-prose blockquote > *:first-child { margin-block-start: 0; }
.sg-prose blockquote > *:last-child { margin-block-end: 0; }

.sg-prose hr {
    height: 1px;
    margin: 1.8em 0;
    border: 0;
    background: var(--sg-bg-soft);
}

.sg-prose img {
    display: block;
    max-inline-size: 100%;
    margin: 1em 0;
    border-radius: 16px;
}

.sg-prose table {
    display: block;
    max-inline-size: 100%;
    margin: 0 0 1em;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 15px;
}

.sg-prose th,
.sg-prose td {
    padding: 8px 12px;
    border: 1px solid var(--sg-border);
    text-align: start;
}

.sg-prose th {
    background: var(--sg-bg-sub);
    font-weight: 700;
}

.sg-prose :not(pre) > code {
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--sg-bg-soft);
    color: var(--sg-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
}

/* ==========================================================================
 * 9. 评论（X 的回复列表）
 * ========================================================================== */

.sg-comments {
    display: block;
    min-inline-size: 0;
    border-block-start: 1px solid var(--sg-border);
}

.sg-comments__title {
    margin: 0;
    padding: 16px;
    color: var(--sg-text);
    font-size: 20px;
    font-weight: 800;
    line-height: 24px;
}

.sg-comment-list {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sg-comment-list > li {
    display: block;
    padding: 0;
    border-block-start: 1px solid var(--sg-border);
}

.sg-comment {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    transition: background-color 100ms var(--sg-ease);
}

.sg-comment:hover {
    background: var(--sg-bg-sub);
}

.sg-comment__avatar {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    inline-size: 40px;
    block-size: 40px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--sg-border-strong);
    color: var(--sg-text-sub);
    font-size: 15px;
    font-weight: 700;
}

.sg-comment__avatar img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.sg-comment__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 4px;
    color: var(--sg-text-sub);
    font-size: 15px;
    line-height: 20px;
}

.sg-comment__author {
    color: var(--sg-text);
    font-weight: 700;
    text-decoration: none;
}

.sg-comment__time {
    color: var(--sg-text-sub);
    font-size: 15px;
}

.sg-comment__body {
    margin: 2px 0 0;
    color: var(--sg-text);
    font-size: 15px;
    line-height: 20px;
}

.sg-comment__foot {
    display: flex;
    gap: 16px;
    margin-block-start: 4px;
}

.sg-comment__foot a,
.sg-comment__foot button {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--sg-text-sub);
    font-family: inherit;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
}

.sg-comment__foot a:hover,
.sg-comment__foot button:hover {
    color: var(--sg-accent);
}

.sg-comment__children {
    margin: 8px 0 0;
    padding-inline-start: 24px;
    list-style: none;
}

.sg-comment__pending {
    margin: 8px 0 0;
    padding: 6px 10px;
    border-radius: 4px;
    background: var(--sg-warn-soft);
    color: var(--sg-text-sub);
    font-size: 13px;
}

/*
 * 空状态 / 已关闭（第 218 轮）
 *
 * 原来是 text-align: center —— 但上面的标题、正文、列表、元信息
 * 全是左对齐，整页只有这两句居中，视觉上是断开的。
 * 关闭评论时尤其明显：标题「暂无评论」靠左，下面「评论已关闭」居中，
 * 中间空一大片，看着像两段不相干的内容。
 *
 * 改成左对齐，与标题共用同一个 16px 左内边。
 */
.sg-comments__empty,
.sg-comments__closed {
    margin: 0;
    padding: 14px 16px 18px;
    color: var(--sg-text-sub);
    font-size: 15px;
    text-align: left;
}

/* 回复表单 */
.sg-respond {
    padding: 16px;
    border-block-start: 1px solid var(--sg-border);
}

.sg-respond__title {
    margin: 0 0 12px;
    color: var(--sg-text);
    font-size: 20px;
    font-weight: 800;
}

.sg-form__row {
    margin-block-end: 12px;
}

.sg-form__row label {
    display: block;
    margin-block-end: 4px;
    color: var(--sg-text-sub);
    font-size: 13px;
}

.sg-form input[type="text"],
.sg-form input[type="email"],
.sg-form input[type="url"],
.sg-form input[type="password"],
.sg-form textarea {
    inline-size: 100%;
    padding: 10px 12px;
    border: 1px solid var(--sg-border-strong);
    border-radius: 4px;
    background: var(--sg-bg);
    color: var(--sg-text);
    font-family: inherit;
    font-size: 15px;
    line-height: 20px;
}

.sg-form input:focus,
.sg-form textarea:focus {
    border-color: var(--sg-accent);
    outline: none;
}

.sg-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* 按钮 */
.sg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 36px;
    padding-inline: 16px;
    border: 1px solid var(--sg-border-strong);
    border-radius: 9999px;
    background: transparent;
    color: var(--sg-text);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 100ms var(--sg-ease);
}

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

.sg-btn--primary {
    border-color: transparent;
    background: var(--sg-text);
    color: var(--sg-text-invert);
}

.sg-btn--primary:hover {
    background: var(--sg-bg-soft);
    opacity: 1;
}/* ==========================================================================
 * 10. 分页 / 空状态 / 面包屑
 * ========================================================================== */

.sg-pager {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 0;
    padding: 16px 16px 32px;
    list-style: none;
}

.sg-pager a,
.sg-pager span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 36px;
    min-block-size: 36px;
    padding-inline: 10px;
    border-radius: 9999px;
    color: var(--sg-accent);
    font-size: 15px;
    text-decoration: none;
}

.sg-pager a:hover {
    background: var(--sg-accent-soft);
}

.sg-pager .current > a,
.sg-pager .current > span {
    background: var(--sg-text);
    color: var(--sg-text-invert);
    font-weight: 700;
}

.sg-empty {
    padding: 32px 16px;
    text-align: center;
}

.sg-empty__title {
    margin: 0 0 8px;
    color: var(--sg-text);
    font-size: 20px;
    font-weight: 800;
}

.sg-empty__desc {
    margin: 0 auto 16px;
    max-inline-size: 34ch;
    color: var(--sg-text-sub);
    font-size: 15px;
    line-height: 20px;
}

.sg-empty__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

/* 面包屑 */
.sg-crumbs {
    padding: 8px 16px;
    border-block-end: 1px solid var(--sg-border);
    font-size: 13px;
}

.sg-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sg-crumbs li {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--sg-text-sub);
}

.sg-crumbs li + li::before {
    content: "/";
    color: var(--sg-border-strong);
}

.sg-crumbs a {
    color: var(--sg-accent);
    text-decoration: none;
}

.sg-crumbs a:hover { text-decoration: underline; }

.sg-crumbs [aria-current="page"] { color: var(--sg-text-sub); }

/* 归档头 */
.sg-archive-head {
    padding: 16px 16px 12px;
    border-block-end: 1px solid var(--sg-border);
}

.sg-archive-head__title {
    margin: 0;
    color: var(--sg-text);
    font-size: 20px;
    font-weight: 800;
    line-height: 24px;
}

.sg-archive-head__meta {
    margin: 0;
    color: var(--sg-text-sub);
    font-size: 13px;
    line-height: 16px;
}

/* ==========================================================================
 * 11. 其余组件（在 X 的语汇下重画）
 * ========================================================================== */

/* ---------------------------------------------------------------- 11.1 跳转 */
.sg-skip {
    position: absolute;
    inset-inline-start: -9999px;
    inset-block-start: 0;
    z-index: 400;
    padding: 8px 14px;
    background: var(--sg-bg);
    color: var(--sg-text);
    outline: 2px solid var(--sg-accent);
    outline-offset: 2px;
}

.sg-skip:focus-visible {
    inset-inline-start: 12px;
    inset-block-start: 12px;
}

/* ---------------------------------------------------------------- 11.2 抽屉 */
/*
 * 抽屉遮罩（第 196 轮）
 *
 * 原来用 display: none → block 开关，display 不参与过渡，
 * 遮罩是「啪」一下出现的。改成 opacity + visibility：
 * 淡入 140ms，关闭时把 visibility 延迟到淡出结束再切，
 * 既保留了「不可见就不可点」的行为，也能过渡。
 */
.sg-drawer-mask {
    position: fixed;
    inset: 0;
    z-index: 199;
    background: rgb(91 112 131 / 40%);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--sg-dur) var(--sg-ease),
                visibility 0s linear var(--sg-dur);
}

body.sg-drawer-open .sg-drawer-mask {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--sg-dur) var(--sg-ease),
                visibility 0s;
}

/* 窄屏：左导航变抽屉 */
@media (max-width: 1059.98px) {
    .sg-nav-pane {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        z-index: 200;
        inline-size: 280px;
        max-inline-size: 85vw;
        block-size: 100vh;
        padding: 0 12px;
        overflow-y: auto;
        background: var(--sg-bg);
        box-shadow: 0 0 20px rgb(101 119 134 / 25%);
        transform: translateX(-100%);
        /*
         * 滑动过渡（第 196 轮）
         *
         * 原来只有 translateX(-100%) → 0 的位置变化，没有 transition，
         * 抽屉是瞬间出现的。140ms 从右侧滑入，和遮罩淡入同时开始。
         */
        transition: transform var(--sg-dur) var(--sg-ease);
        transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    .sg-nav-pane__inner {
        inline-size: auto;
        padding-inline: 0;
    }

    body.sg-drawer-open .sg-nav-pane {
        transform: translateX(0);
    }
}

/* ---------------------------------------------------------------- 11.3 顶栏（窄屏） */
.sg-topbar {
    position: sticky;
    inset-block-start: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 12px;
    min-block-size: 53px;
    padding-inline: 8px;
    background: var(--sg-glass);
    backdrop-filter: blur(12px);
    border-block-end: 1px solid var(--sg-border);
}

.sg-topbar__grid {
    display: flex;
    align-items: center;
    gap: 8px;
    inline-size: 100%;
}

.sg-brand {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-inline-size: 0;
    padding: 6px;
    border-radius: 9999px;
    color: var(--sg-text);
    text-decoration: none;
}

.sg-brand__mark {
    display: inline-block;
    inline-size: 18px;
    block-size: 18px;
    background: currentColor;
    rotate: 45deg;
}

.sg-brand__text {
    display: none;
}

.sg-topbar__tools {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-inline-start: auto;
}

.sg-ibtn {
    display: inline-grid;
    place-items: center;
    inline-size: 36px;
    block-size: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--sg-text);
    cursor: pointer;
    transition: background-color 100ms var(--sg-ease);
}

.sg-ibtn:hover {
    background: var(--sg-bg-soft);
}

.sg-topbar__enter {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 9999px;
    background: var(--sg-text);
    color: var(--sg-text-invert);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.sg-drawer-btn {
    display: inline-grid;
}

/* ---------------------------------------------------------------- 11.4 搜索浮层 */
.sg-search {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: none;
    background: rgb(91 112 131 / 40%);
}

.sg-search.is-open { display: block; }.sg-search__input {
    inline-size: 100%;
    padding: 16px 20px;
    border: 0;
    border-block-end: 1px solid var(--sg-border);
    background: transparent;
    color: var(--sg-text);
    font-family: inherit;
    font-size: 18px;
}/* ---------------------------------------------------------------- 11.5 灯箱 */
.sg-lightbox {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: none;
    place-items: center;
    padding: 32px;
    background: rgb(0 0 0 / 85%);
    /* 遮罩自身不吃触摸手势，避免背后页面跟着滑（第 227 轮） */
    touch-action: none;
}

/*
 * 灯箱显示条件（第 227 轮修）
 *
 * CSS 原来只认 .is-open，而 ui.js 的 lightbox.open() 设的是
 * data-sg-open="1" 属性 —— 两边对不上，灯箱永远不会显示。
 * 实查：CSS 里 data-sg-open 命中 0 处，.is-open 命中 2 处。
 *
 * 这里让 CSS 同时响应属性（JS 不动，风险最小）。
 */
.sg-lightbox.is-open,
.sg-lightbox[data-sg-open="1"] { display: grid; }

/*
 * 灯箱打开时锁住背景滚动（第 227 轮补）
 *
 * ui.js 会给 body 加 sg-lightbox-open，但样式表里从来没有它的规则。
 * 全屏遮罩下还能滚动后面的页面，是很明显的毛病。
 *
 * 不用 overflow: hidden —— 那会让 html/body 变成滚动容器，
 * 破坏 position: sticky（第 11 轮踩过）。改为在遮罩上吃掉滚轮与触摸移动。
 */
body.sg-lightbox-open {
    overscroll-behavior: contain;
}

.sg-lightbox img {
    max-inline-size: 100%;
    max-block-size: 90vh;
    border-radius: 4px;
}

/* ---------------------------------------------------------------- 11.6 图标显隐 */
.sg-icon-moon { display: none; }

:root[data-sg-scheme="dark"] .sg-icon-sun,
:root[data-sg-theme="dark"] .sg-icon-sun { display: none; }

:root[data-sg-scheme="dark"] .sg-icon-moon,
:root[data-sg-theme="dark"] .sg-icon-moon { display: inline; }

@media (prefers-color-scheme: dark) {
    :root[data-sg-scheme="auto"]:not([data-sg-theme]) .sg-icon-sun { display: none; }
    :root[data-sg-scheme="auto"]:not([data-sg-theme]) .sg-icon-moon { display: inline; }
}

/* ---------------------------------------------------------------- 11.7 进度条 */
.sg-progress {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 400;
    block-size: 2px;
    background: var(--sg-accent);
    transform: scaleX(0);
    transform-origin: 0 50%;
    pointer-events: none;
}

/* ---------------------------------------------------------------- 11.8 回到顶部 */
.sg-top {
    position: fixed;
    inset-inline-end: 24px;
    inset-block-end: 24px;
    z-index: 400;
    display: inline-grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--sg-accent);
    color: var(--sg-text-invert);
    box-shadow: 0 0 15px rgb(101 119 134 / 25%);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms var(--sg-ease);
}

.sg-top.is-on {
    opacity: 1;
    pointer-events: auto;
}

/* ---------------------------------------------------------------- 11.9 命中高亮 */
.sg-hit {
    padding: 0 1px;
    border-radius: 2px;
    background: var(--sg-hit-bg);
    color: var(--sg-text);
}

/* ---------------------------------------------------------------- 11.10 代码块 */
.sg-code {
    position: relative;
    margin: 0 0 1em;
    overflow: hidden;
    border-radius: 16px;
    background: var(--sg-surface-2);
    color: #e7e9ea;
}

.sg-code__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-block-end: 1px solid rgb(255 255 255 / 8%);
}

.sg-code__bar i {
    display: block;
    inline-size: 10px;
    block-size: 10px;
    border-radius: 50%;
    background: rgb(255 255 255 / 20%);
}

.sg-code__lang {
    margin-inline-start: auto;
    color: rgb(255 255 255 / 45%);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.sg-code__copy {
    padding: 2px 8px;
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 9999px;
    background: transparent;
    color: rgb(255 255 255 / 70%);
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
}

.sg-code__copy:hover {
    background: rgb(255 255 255 / 10%);
    color: var(--sg-text-invert);
}

.sg-code pre {
    margin: 0;
    padding: 16px;
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.65;
    tab-size: 4;
}

.sg-code code {
    font-family: inherit;
    font-size: inherit;
}

.sg-tok-k { color: #c792ea; font-weight: 600; }
.sg-tok-s { color: #a5e075; }
.sg-tok-c { color: #6b7788; font-style: italic; }
.sg-tok-n { color: #f78c6c; }
.sg-tok-f { color: #82aaff; }
.sg-tok-t { color: #ff6b8a; }

/* ---------------------------------------------------------------- 11.11 目录 */
/*
 * 目录视觉重做（第 194 轮）
 *
 * 原来用的是「每条一个 8px 上下留白的大行 + hover 灰底 + 当前项亮蓝加粗」，
 * 7 条就占掉 250px，而且整块像一串按钮，读起来没有「这是文档结构」的感觉。
 *
 * 改成本文导航的常见形态（Medium / VuePress 那一类）：
 *   · 标题与列表之间加一条分隔线，把「块标题」和「条目」分开
 *   · 左边一条 2px 的竖轨，串起全部条目，层级靠缩进表达
 *   · 当前项不用亮蓝加粗（太抢），改成深色 + 竖轨上的一段强调色
 *   · 行距收紧到 14px/20px，hover 只换文字颜色，不再铺灰底
 * 结构不变（ol/li/a + is-active），只换观感。
 */
.sg-toc { display: block; }

/* 标题：与右栏其他块同字号，但用一条细线把标题区和条目区切开 */
.sg-toc .sg-rail__title {
    padding-block-end: 10px;
    border-block-end: 1px solid var(--sg-border);
}

.sg-toc__list {
    position: relative;
    margin: 0;
    padding: 8px 0 10px;
    list-style: none;
}

/*
 * 竖轨已移除（第 209 轮）
 *
 * 原来这里有一条 2px 灰轨，当前项再在轨上盖一段主色条 ——
 * 等于同一个位置叠了两个指示器；而且轨的上下端（10px / 14px）
 * 跟首末条目的基线都对不齐，看起来是悬空的。
 *
 * 现在由「内嵌胶囊」单独承担定位，见下面的 .sg-toc__link。
 */

.sg-toc__item {
    position: relative;
    padding: 0;
}

/*
 * 目录条目 = 内嵌胶囊（第 209 轮重做）
 *
 * 改之前的三个问题：
 *   ① 高亮底左右通栏、贴到卡片边缘，而且 border-radius 写的是
 *      `0 8px 8px 0` —— 左方右圆，看起来像没写完，不像设计；
 *   ② 主色竖条压在这块淡底里面，同一个位置两个指示器；
 *   ③ 竖轨上下悬空，跟首末条目对不齐。
 *
 * 现在：条目左右各内缩 8px、自身 8px 圆角，形成一个规整的胶囊。
 * 悬停淡灰、当前项淡主色 + 字重 600，只用一个指示器。
 */
.sg-toc__link {
    display: block;
    margin-inline: 8px;
    /* 内边 8 + 外部内缩 8 = 16，正好等于块标题的左内边 —— 文字左缘对齐 */
    padding: 5px 8px;
    border-radius: 8px;
    color: var(--sg-text-sub);
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
    transition: color 120ms var(--sg-ease), background-color 120ms var(--sg-ease);
}

.sg-toc__link:hover {
    background: var(--sg-bg-soft);
    color: var(--sg-text);
}

/*
 * 当前项：文字转深、字重 600，并在竖轨上盖一段强调色。
 * 竖条挂在 li 上（li 左边界就是卡片内容左缘），所以 left 取 16px 正好压在轨道上。
 */
.sg-toc__link.is-active {
    color: var(--sg-text);
    font-weight: 600;
}

/*
 * 当前项：淡主色胶囊
 *
 * 底色挂在 <a> 上而不是 <li> 上 —— <li> 是通栏的，挂 li 就又会贴边。
 * 用主题已有的 --sg-accent-soft（亮色 #e8f5fd / 暗色 #0b2a3f），
 * 不用 color-mix()：老浏览器不认会直接没有底色。
 */
.sg-toc__link.is-active {
    background: var(--sg-accent-soft);
}

/* 层级：h3 缩进一档，h4 再缩一档（原来只有 .sg-toc__sub 一种） */
/* 缩进按胶囊内边重算：外层 8px + 内层 10px = 18px 起 */
.sg-toc__item[data-sg-toc-level="3"] .sg-toc__link {
    padding-inline-start: 24px;
    font-size: 13px;
}

.sg-toc__item[data-sg-toc-level="4"] .sg-toc__link {
    padding-inline-start: 36px;
    font-size: 13px;
}

/* 兼容旧的 .sg-toc__sub 包裹写法 */
.sg-toc__sub .sg-toc__link {
    padding-inline-start: 40px;
    font-size: 13px;
}

/* ---------------------------------------------------------------- 11.13 友链 */
.sg-friends { padding: 16px; }

.sg-friends__title {
    margin: 0 0 12px;
    color: var(--sg-text);
    font-size: 20px;
    font-weight: 800;
}

.sg-friends__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 12px;
}

.sg-friends__item {
    display: flex;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--sg-border);
    border-radius: 16px;
    transition: background-color 100ms var(--sg-ease);
}

.sg-friends__item:hover { background: var(--sg-bg-sub); }

.sg-friend__avatar {
    flex: 0 0 auto;
    inline-size: 40px;
    block-size: 40px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--sg-bg-soft);
}

.sg-friend__avatar img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.sg-friend__name {
    margin: 0;
    color: var(--sg-text);
    font-size: 15px;
    font-weight: 700;
}

.sg-friend__name a {
    color: inherit;
    text-decoration: none;
}

.sg-friend__desc {
    margin: 2px 0 0;
    color: var(--sg-text-sub);
    font-size: 13px;
    line-height: 16px;
}

.sg-linkform {
    padding: 16px;
    border-block-start: 1px solid var(--sg-border);
}

.sg-linkform__title {
    margin: 0 0 12px;
    color: var(--sg-text);
    font-size: 20px;
    font-weight: 800;
}

.sg-linkform__form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.sg-linkform__row { display: block; }

.sg-linkform__row label {
    display: block;
    margin-block-end: 4px;
    color: var(--sg-text-sub);
    font-size: 13px;
}

.sg-linkform__status {
    margin: 8px 0 0;
    color: var(--sg-text-sub);
    font-size: 13px;
}

/* ---------------------------------------------------------------- 11.14 受控内容 */
.sg-gated {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 16px 0;
    padding: 16px;
    border: 1px dashed var(--sg-border-strong);
    border-radius: 16px;
    color: var(--sg-text-sub);
    font-size: 13px;
    text-align: center;
}

.sg-gated__text {
    margin: 0;
    color: var(--sg-text);
    font-weight: 700;
}

.sg-gated__len {
    margin: 0;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- 11.15 AI 速览 */
.sg-summary {
    display: flex;
    gap: 12px;
    margin: 12px 16px;
    padding: 12px;
    border-radius: 16px;
    background: var(--sg-bg-sub);
}

.sg-summary__badge {
    flex: 0 0 auto;
    align-self: flex-start;
    padding: 1px 8px;
    border-radius: 9999px;
    background: var(--sg-accent-soft);
    color: var(--sg-accent-strong);
    font-size: 12px;
    font-weight: 700;
}

.sg-summary__body { min-inline-size: 0; }

.sg-summary__title {
    margin: 0 0 4px;
    color: var(--sg-text);
    font-size: 15px;
    font-weight: 700;
}

.sg-summary__text {
    margin: 0;
    color: var(--sg-text-sub);
    font-size: 13px;
    line-height: 18px;
}

/* ---------------------------------------------------------------- 11.16 短代码 */
.sg-test {
    margin: 0 0 1em;
    padding: 16px;
    border: 1px solid var(--sg-border);
    border-radius: 16px;
}

.sg-test__title {
    margin: 0 0 6px;
    color: var(--sg-text);
    font-size: 15px;
    font-weight: 700;
}

.sg-test__body > *:first-child { margin-block-start: 0; }
.sg-test__body > *:last-child { margin-block-end: 0; }

/* ---------------------------------------------------------------- 11.17 错误页 */
.sg-error {
    padding: 48px 20px;
    text-align: center;
}

.sg-error__code {
    margin: 0;
    color: var(--sg-text);
    font-size: 56px;
    font-weight: 800;
    line-height: 1;
}

.sg-error__title {
    margin: 12px 0 0;
    color: var(--sg-text);
    font-size: 20px;
    font-weight: 700;
}

.sg-error__desc {
    margin: 8px auto 20px;
    max-inline-size: 34ch;
    color: var(--sg-text-sub);
    font-size: 15px;
    line-height: 20px;
}

.sg-error__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

/* ---------------------------------------------------------------- 11.18 工具 */
.sg-sr {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------------------------------------------------------------- 11.19 背景层 */
.sg-backdrop {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

/* ---------------------------------------------------------------- 11.20 页脚 */
.sg-footer {
    display: none;
    padding: 20px 16px;
    color: var(--sg-text-sub);
    font-size: 13px;
    text-align: center;
}

/*
 * 兜底页脚的断点必须跟「右栏隐藏」对齐（第 207 轮）
 *
 * 右栏在 1264px 以下整列 display:none —— 而版权与 ICP 备案号原本只写在
 * 右栏的 .sg-rail-foot 里。兜底页脚却是到 1059px 才出现，
 * 于是 1060~1264px 这一段（平板横屏、小笔记本、分屏窗口）
 * 页面上**既没有右栏页脚、也没有兜底页脚 —— 版权与备案号完全消失**。
 *
 * 对国内站点这是合规问题，不是审美问题。断点改成与右栏一致。
 */
@media (max-width: 1264.98px) {
    .sg-footer { display: block; }
}

/* 站点数据行（第 225 轮）：与版权行同字号、居中，数值加粗一档 */
.sg-footer__stats {
    margin: 0 0 6px;
    color: var(--sg-text-sub);
}

.sg-footer__num {
    color: var(--sg-text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/*
 * 分隔点要留出空隙
 *
 * statsLine() 是直接 implode 出来的，元素之间没有换行，
 * HTML 的空白折叠帮不上忙 —— 不给边距就会粘成「6·评论」。
 */
.sg-footer__stats .sg-dot {
    margin-inline: 8px;
}

.sg-footer__copy { margin: 0; }

.sg-footer__copy a {
    color: var(--sg-text-sub);
    text-decoration: none;
}

.sg-footer__copy a:hover { text-decoration: underline; }

.sg-footer__text { margin: 8px 0 0; }/* 页签自己吸顶（X 的做法：tablist 与 header 在同一个 sticky 容器里） */
.sg-tabs {
    position: sticky;
    inset-block-start: 0;
    z-index: 10;
    background: var(--sg-glass);
    backdrop-filter: blur(12px);
}

/*
 * 封面：X 的媒体实测 361×209（ratio 1.73），但那是「一条配图 post」里的小图。
 * 我们的封面是文章主图，按中栏宽度给更合适：满栏 566 宽，16:9 = 318 高。
 * 之前 block-size 12rem 在这里没生效（因为 .sg-row__cover 有 aspect-ratio）。
 * 统一：宽度满栏，高度按 16:9，但封顶 380px。
 */
.sg-row__cover {
    block-size: auto;
    max-block-size: 380px;
    aspect-ratio: 16 / 9;
}

.sg-row--lead .sg-row__cover {
    max-block-size: 420px;
}

/* 左导航的「切换外观」按钮：X 里没有这一项，做成不占导航行的轻量项 */

/* 发帖按钮在未登录时不显示 —— X 也一样。已登录（admin bar）时才出 */
.sg-nav-cta:empty {
    display: none;
}

/*
 * 页签吸顶头（第 169b 最终）
 *
 * X 的首页顶部没有「Hello World」这种标题 —— 只有两个 tab。
 * 我保留了站点名当标题，它把 tab 推到了 y=32。
 * 现在标题在归档页由 .sg-archive-head 承担，首页直接用 tab 当顶部。
 * tab 自己 sticky 贴在 y=0。
 */
.sg-tabs {
    position: sticky;
    inset-block-start: 0;
    z-index: 10;
    background: var(--sg-glass);
    backdrop-filter: blur(12px);
    border-block-end: 1px solid var(--sg-border);
}

/*
 * 中栏顶部 32px padding（第 169b 最终修正）
 *
 * 来源是 responsive.css 里旧版的 `.sg-main { padding-block: var(--sg-space-6) ... }`，
 * 按 X 实测 tablist 必须贴 y=0。这里显式归零，并让 .sg-tabs 自己吸顶。
 */
.sg-main {
    padding: 0;
}

@media (max-width: 699.98px) {
    .sg-main {
        padding: 0;
    }
}

/*
 * 封面高度（第 169b 最终）
 *
 * 实测 X 的一条配图 post：媒体 361×209（在 599 宽的 article 里），
 * 也就是「宽度不满栏、按原图比例」。博客封面统一满栏时，
 * 16:9 在 566 宽下 = 318 高 —— 一条就占掉半屏。
 *
 * X 处理大图的做法是 max-height: 510px 且宽度满栏，
 * 但它的信息流里配图比例多样。我们统一裁成 5:2（566×226），
 * 更接近 X 里「横幅图」的观感，也不会把第二条挤到屏幕外。
 */
.sg-row__cover {
    block-size: auto;
    max-block-size: none;
    aspect-ratio: 5 / 2;
}

.sg-row--lead .sg-row__cover {
    aspect-ratio: 16 / 9;
    max-block-size: 400px;
}

.sg-row--plate .sg-row__cover {
    aspect-ratio: 16 / 9;
    max-block-size: 400px;
}

/* ==========================================================================
 * 16. 补齐 X 有、我漏掉的四块（第 170 轮，全部按实测）
 *
 * 对照截图发现的差距：
 *   ① 中栏顶部没有「发帖框」        ← 整块缺失
 *   ② 页签是 4 个，X 是 2 个 + 右侧«+»
 *   ③ 右栏 1 个盒子，X 是 4 个
 *   ④ 条目署名少了 @handle
 * ========================================================================== */

/* ==========================================================================
 * 16.1 发帖框（composer）
 *
 * X 实测：
 *   整块   519 宽（= 599 - 16*2 - 40 - 8），顶 y=58
 *   头像   40×40，x=928（= article 左 16）
 *   占位   15px / rgb(15,20,25)，y=62，宽 519
 *   文字框 514×28
 *   toolbar 519×48，y=118
 *   发帖按钮 63×36，背景 rgb(15,20,25)，圆角 9999，opacity .5
 *   分隔线：整块下方 1px rgb(239,243,244)
 * ========================================================================== */

.sg-composer {
    display: block;
    padding: 4px 16px 0;
    border-block-end: 1px solid var(--sg-border);
}

.sg-composer__row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.sg-composer__avatar {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    inline-size: 40px;
    block-size: 40px;
    margin-block-start: 4px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--sg-border-strong);
    color: var(--sg-text-sub);
    font-size: 15px;
    font-weight: 700;
}

/* 占位文字：X 是 15px 正常色，不是灰 */
.sg-composer__input {
    flex: 1 1 auto;
    min-inline-size: 0;
    padding: 12px 0 4px;
    color: var(--sg-text);
    font-size: 15px;
    line-height: 24px;
    text-decoration: none;
}

.sg-composer__input:hover {
    color: var(--sg-text-sub);
}

/* 工具行：7 个图标 + 右侧发帖按钮 */
.sg-composer__bar {
    display: flex;
    align-items: center;
    gap: 4px;
    min-block-size: 48px;
    margin-inline-start: 48px;
    padding-block-end: 4px;
}/* 发帖按钮：63×36，禁用态 opacity .5 */
.sg-composer__post {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 63px;
    min-block-size: 36px;
    margin-inline-start: auto;
    padding-inline: 16px;
    border: 0;
    border-radius: 9999px;
    background: var(--sg-text);
    color: var(--sg-text-invert);
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    text-decoration: none;
    opacity: 0.5;
    transition: opacity 100ms var(--sg-ease);
}

.sg-composer__post:hover {
    opacity: 1;
}

/* 主题按钮等杂项：X 没有，退出左栏 */
.sg-nav-link[data-sg-theme-toggle] {
    display: none !important;
}

/* ==========================================================================
 * 16.2 页签：X 只有 2 个 + 右侧一个「+」
 *
 * X 实测：tab 各 273×53，整条 546 宽（599 - 16*2 - 40 - 8 = 519，但 tablist 是 546）
 * 「+」在 tablist 之外，右上角。
 * ========================================================================== */

.sg-tabs {
    position: relative;
    display: flex;
    border-block-end: 1px solid var(--sg-border);
}

/* 第 3 个及之后的页签隐藏（X 只有两个主 tab）；保留数据但不出现在视觉里 */
.sg-tab:nth-child(n+3) {
    display: none;
}/* ==========================================================================
 * 16.3 右栏：每个模块独立成盒（X 是 4 个盒子）
 *
 * X 实测：盒子 350 宽（左右各 0? 实际 sidebar 350，盒子也 350 —— 贴边）
 * 圆角 16，背景 rgb(247,249,249)，盒间距 16
 * 标题 20px / 800，padding 12px 16px
 * ========================================================================== */

.sg-rail-box {
    margin: 16px 0 0;
    overflow: hidden;
    border: 0;
    border-radius: 16px;
    background: var(--sg-bg-sub);
}

/* 取消旧的「一个盒子装全部」 */
.sg-rail-box > .sg-rail__block + .sg-rail__block {
    border-block-start: 1px solid var(--sg-border);
}

/* 每个 block 自己当盒子 */
.sg-rail-pane .sg-rail__block {
    display: block;
    margin: 0;
    padding: 0;
    border-radius: 16px;
    background: var(--sg-bg-sub);
}

.sg-rail-pane .sg-rail__block + .sg-rail__block {
    margin-block-start: 16px;
}

/* 搜索框：319×40，左缩进 29（= (350-319)/2 ≈ 15.5，但 X 是 29 左 + 2 右） */
.sg-search-box {
    padding: 9px 16px 0 15px;
}

.sg-topsearch {
    inline-size: 319px;
    block-size: 40px;
    padding-inline: 16px 8px;
    border-radius: 9999px;
    background: var(--sg-bg-soft);
}

/* ==========================================================================
 * 16.4 署名行：名字（700）+ @handle（400 / muted）+ · + 时间
 * ========================================================================== */

.sg-row__name {
    color: var(--sg-text);
    font-weight: 700;
}

.sg-row__handle {
    display: inline !important;
    flex: 0 0 auto;
    color: var(--sg-text-sub);
    font-size: 15px;
    font-weight: 400;
}

.sg-row__sep {
    color: var(--sg-text-sub);
    font-size: 15px;
    font-weight: 400;
}

.sg-row__time {
    color: var(--sg-text-sub);
    font-size: 15px;
    font-weight: 400;
}

/* ==========================================================================
 * 16.5 操作行：5 个按钮，间距按 X 的 117px 节奏
 *
 * X 实测：reply x=976 / retweet x=1093 / like x=1210 / views … / bookmark 靠右
 * 即前四个均分，最后两个（收藏 + 分享）一起靠右。
 * ========================================================================== */

.sg-row__acts {
    display: flex;
    align-items: center;
    max-inline-size: none;
    margin-block-start: 12px;
}

.sg-act {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--sg-text-sub);
    font-size: 13px;
    line-height: 20px;
    cursor: pointer;
}

.sg-act svg {
    inline-size: 18.75px;
    block-size: 18.75px;
    color: var(--sg-text-sub);
}

/*
 * 操作行布局（第 170 轮修正）
 *
 * X 的 6 个按钮不是等分的：
 *   评论 / 转发 / 喜欢 / 浏览 —— 前四个按 117px 节奏等距铺开（占左侧 3/4）
 *   收藏 / 分享 —— 两个贴最右
 * 第一版给前四个 flex:0 0 25%，把后两个挤出容器（实测只剩 4 个可见）。
 * 改成：前四个 flex:1 均分，后两个 flex:0 定宽靠右。
 */
.sg-row__acts {
    display: flex;
    align-items: center;
    gap: 0;
    max-inline-size: none;
    margin-block-start: 12px;
}

.sg-row__acts > .sg-act {
    flex: 1 1 0;
    min-inline-size: 0;
}

.sg-row__acts > .sg-act:nth-last-child(2),
.sg-row__acts > .sg-act:nth-last-child(1) {
    flex: 0 0 auto;
    inline-size: 34px;
}

.sg-row__acts > .sg-act:nth-last-child(2) {
    margin-inline-start: auto;
}

.sg-act:hover svg,
.sg-act:hover {
    color: var(--sg-accent);
}

.sg-act--like:hover svg,
.sg-act--like:hover {
    color: var(--sg-danger);
}

/*
 * 右栏多盒子容器（第 170 轮）
 *
 * X：4 个独立盒子，每个圆角 16、背景 rgb(247,249,249)、间距 16、贴 sidebar 两边。
 */
.sg-rail-boxes {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 0 0;
}

.sg-rail-boxes .sg-rail__block {
    display: block;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 16px;
    background: var(--sg-bg-sub);
}

/* 盒子标题：X 是 20px / 800 */
.sg-rail-boxes .sg-rail__title {
    margin: 0;
    padding: 12px 16px;
    color: var(--sg-text);
    font-size: 20px;
    font-weight: 800;
    line-height: 24px;
}

.sg-rail-boxes .sg-rail__title svg {
    display: none;
}

.sg-rail-boxes .sg-rail__list {
    margin: 0;
    padding: 0 0 4px;
    list-style: none;
}

/*
 * 右栏列表条目：整行可点（第 205 轮）
 *
 * 原来这里有两个「看着能点、其实不能」的信号：
 *   ① 整行 hover 会变灰底 —— 但只有里面那个 <a> 能点，行本身不可点；
 *   ② 行右端一个「⋯」图标还带 cursor:pointer，点了毫无反应。
 *
 * 现在把「整行可点」做成真的：给 <a> 加一层 inset:0 的伪元素，
 * 把点击热区铺满整行。于是 hover 变灰是有依据的，
 * 点击目标也从「只有一行字」变成整个 336×80 的区块 —— 触摸设备上尤其明显。
 * 「⋯」已从模板里删掉。
 */
.sg-rail-boxes .sg-rail__list > li {
    position: relative;
    padding: 11px 16px;
    color: var(--sg-text-sub);
    font-size: 13px;
    line-height: 16px;
    transition: background-color 100ms var(--sg-ease);
}

.sg-rail-boxes .sg-rail__list > li:hover {
    background: var(--sg-bg-soft);
}

/* 把 <a> 的点击热区铺满整行 */
.sg-rail-boxes .sg-rail__list > li > a::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* 悬停时整行给一点点强调，指明「这一整块都能点」 */
.sg-rail-boxes .sg-rail__list > li:hover a {
    text-decoration: underline;
}

.sg-rail-boxes .sg-rail__list a {
    display: block;
    color: var(--sg-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    text-decoration: none;
}

.sg-rail-boxes .sg-rail__list a:hover {
    text-decoration: underline;
}

.sg-rail-boxes .sg-rail__list--siteinfo > li,
.sg-rail-boxes .sg-rail__list--stats > li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.sg-rail-boxes .sg-rail__label { color: var(--sg-text-sub); font-size: 13px; }
.sg-rail-boxes .sg-rail__value { color: var(--sg-text); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }.sg-rail-boxes .sg-rail__list--tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 4px 16px 12px;
}

.sg-rail-boxes .sg-rail__list--tags > li { padding: 0; }
.sg-rail-boxes .sg-rail__list--tags > li:hover { background: transparent; }
.sg-rail-boxes .sg-rail__list--tags a { display: inline-flex; color: var(--sg-accent); font-size: 13px; font-weight: 400; }
.sg-rail-boxes .sg-rail__count { margin-inline-start: 4px; color: var(--sg-text-sub); font-size: 13px; font-weight: 400; }.sg-rail-boxes .sg-rail__text { margin: 2px 0 0; color: var(--sg-text-sub); font-size: 13px; font-weight: 400; line-height: 16px; }/*
 * 外壳 padding 归零（第 170c）
 *
 * 追溯 DOM 链发现 .sg-shell 上有 padding-left: 20px（早期响应式遗留），
 * 把三栏整体推右 20px：header.x=20 而 X 是 0。
 * 这里显式归零，覆盖所有断点。
 */
.sg-shell {
    padding-inline: 0;
}

/*
 * 右栏左侧 30px 间隙（第 170d，X 实测）
 *
 * X @1440：
 *   header  x=0    w=355   → 右边 355
 *   primary x=355  w=600   → 右边 955
 *   sidebar x=985  w=350   → 右边 1335   ← 这里比 primary 右边多 30
 *   scrollW 1425                          ← 右边再空 90
 *
 * 所以 X 的布局不是「355+600+350=1305 紧贴」，
 * 而是 primary 和 sidebar 之间有 **30px 空隙**，右侧再留 90 自然余量。
 * 我按 1305 紧贴算，sidebar 落在 955，差 30。
 */
.sg-rail-pane {
    margin-inline-start: 30px;
}

/* 外壳宽度按真实结构：355 + 600 + 30 + 350 = 1335 */
.sg-shell {
    max-inline-size: 1335px;
}

@media (min-width: 1265px) {
    .sg-shell {
        max-inline-size: 1335px;
    }
}

/* ==========================================================================
 * 17. 第 171 轮：按 1:1 截图逐项校正（全部来自实测）
 *
 * 对照方法：同视口 1440×900 截图 → 裁同区域 1:1 并排 → 逐项量 computed style。
 *
 * 实测差异表：
 *   ① .sg-row flex-direction 是 column（应 row）→ 正文掉到头像下方，宽 567 而非 519
 *   ② 左栏导航文字 X 是 20px/700/行高24，我 15px/700/行高21
 *   ③ 左栏图标 X 的 svg 无 padding（26.25px），我加了 12px padding 撑成 50px
 *   ④ 左栏品牌 X 是 X 字形 51×30，我是 37×37 菱形
 *   ⑤ 左栏缺发帖按钮 233×52
 *   ⑥ 发帖框占位文字 X 是 20px/灰(83,100,113)，我 15px/黑
 *   ⑦ 发帖框图标 X 是 9 个 20×20，我 4 个 34×34
 *   ⑧ 页签 X 每格 273 宽（整条 546）+ 右侧「+」占位，我每格 299 铺满 599
 *   ⑨ 页签非活动字重 X 是 500，我 400
 * ========================================================================== */

/* ---------------------------------------------------------------- ① 条目布局 */
/*
 * 最关键的一条：.sg-row 必须是 flex row。
 * 之前某轮遗留的 flex-direction: column 让 .sg-row__body 掉到头像下面，
 * 于是正文从 x=372 开始、宽 567；X 是 x=420、宽 519（= 599-16*2-40-8）。
 */
.sg-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 16px;
    border: 0;
    background: transparent;
}

/* ---------------------------------------------------------------- ② 导航项文字 */
/*
 * X 实测：<a> 是 15px（容器），内层 span 是 20px/700/行高24。
 * 只量 <a> 会以为 15px，实际看到的字是 20px —— 这是「看起来小」的根因。
 */
.sg-nav-link {
    display: flex;
    align-items: center;
    gap: 20px;
    inline-size: 100%;
    max-inline-size: 100%;
    min-block-size: 58px;
    padding: 4px 0;
    border-radius: 9999px;
    color: var(--sg-text);
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 100ms var(--sg-ease);
}

.sg-nav-link:hover {
    background: var(--sg-bg-soft);
}

.sg-nav-link.is-active,
.sg-nav-link[aria-current="page"] {
    font-weight: 700;
}

.sg-nav-link__text {
    padding-inline-end: 8px;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
}

/* ---------------------------------------------------------------- ③ 导航图标 */
/*
 * X 的 svg 是 26.25×26.25 且 padding 0，没有圆形背底。
 * 我之前加了 padding:12px 把热区撑到 50px，反而让图标视觉变小、行变高。
 */
.sg-nav-link svg {
    flex: 0 0 auto;
    inline-size: 26px;
    block-size: 26px;
    padding: 0;
    margin: 0;
    border-radius: 0;
    background: none;
}

.sg-nav-link:hover svg {
    background: none;
}

/* ---------------------------------------------------------------- ④ 品牌字形 */
.sg-nav-pane__brand {
    display: grid;
    place-items: center;
    inline-size: 52px;
    block-size: 52px;
    margin-block: 2px;
    border-radius: 9999px;
    color: var(--sg-text);
    text-decoration: none;
    transition: background-color 100ms var(--sg-ease);
}

.sg-nav-pane__brand:hover {
    background: var(--sg-bg-soft);
}.sg-nav-pane__brand svg {
    inline-size: 26px;
    block-size: 26px;
    fill: currentColor;
}

/* ---------------------------------------------------------------- ⑤ 发帖按钮 */
/*
 * X 实测 233×52，背景 rgb(15,20,25)，圆角 9999，文字 15px。
 */
.sg-nav-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 233px;
    min-block-size: 52px;
    margin-block-start: 16px;
    padding-inline: 16px;
    border: 0;
    border-radius: 9999px;
    background: var(--sg-text);
    color: var(--sg-text-invert);
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    line-height: 20px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 100ms var(--sg-ease);
}

.sg-nav-cta:hover {
    background: var(--sg-bg-soft);
}

/* ---------------------------------------------------------------- ⑥ 发帖框占位 */
/*
 * X 实测：占位文字 20px / 行高 24 / 色 rgb(83,100,113)。
 * 我原来是 15px 黑色 —— 看起来像「一行小字」，X 是「一大行提示」。
 */
.sg-composer__input {
    flex: 1 1 auto;
    min-inline-size: 0;
    padding: 8px 0 4px;
    color: var(--sg-text-sub);
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    text-decoration: none;
}

.sg-composer__input:hover {
    color: var(--sg-text-sub);
}/* ---------------------------------------------------------------- ⑧ 页签宽度 */
/*
 * X：tablist 546 宽，每格 273；右侧「+」单独占位。
 * 我这里让页签各占 (100% - 53px) / 2，把右侧 53px 留给「+」。
 */
.sg-tabs {
    position: relative;
    display: flex;
    border-block-end: 1px solid var(--sg-border);
}

.sg-tab {
    flex: 0 0 calc((100% - 53px) / 2);
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: 53px;
    padding-inline: 16px;
    color: var(--sg-text-sub);
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
    text-decoration: none;
    transition: background-color 100ms var(--sg-ease);
}

.sg-tab:hover {
    background: var(--sg-bg-sub);
}

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

/* 指示条：X 是 60×4 圆角，居中在 tab 下方 */
.sg-tab.is-active::after {
    content: "";
    position: absolute;
    inset-inline: 50%;
    inset-block-end: 0;
    inline-size: 60px;
    block-size: 4px;
    margin-inline-start: -30px;
    border-radius: 9999px;
    background: var(--sg-accent);
}/* ---------------------------------------------------------------- ⑨ 媒体尺寸 */
/*
 * X 的媒体圆角 16，宽度不满栏时按原图比例，最大宽 100%、最大高 510。
 */
.sg-row__cover {
    display: block;
    overflow: hidden;
    margin-block-start: 12px;
    border: 0;
    border-radius: 16px;
    background: var(--sg-bg-soft);
    block-size: auto;
    max-block-size: 510px;
    aspect-ratio: auto;
}

.sg-row__cover img,
.sg-row__cover .sg-gen {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

/* ---------------------------------------------------------------- ⑩ 右栏搜索框 */
/*
 * X：搜索框贴 sidebar 两侧，宽约 349（= 350 - 1px 边框）。
 */
.sg-search-box {
    position: sticky;
    inset-block-start: 0;
    z-index: 5;
    padding: 7px 8px 2px;
    background: var(--sg-bg);
}

.sg-topsearch {
    display: flex;
    align-items: center;
    gap: 8px;
    inline-size: 100%;
    block-size: 42px;
    padding-inline: 16px 8px;
    border: 1px solid transparent;
    border-radius: 9999px;
    background: var(--sg-bg-soft);
    transition: border-color 100ms var(--sg-ease), background-color 100ms var(--sg-ease);
}

/* ---------------------------------------------------------------- ⑪ 右栏盒子贴边 */
.sg-rail-boxes {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 4px 0 0;
}

/* ==========================================================================
 * 18. 第 172 轮：1:1 截图对比后的最后一批差异
 *
 * 新发现（裁图 1:1 看出来的）：
 *   ⑫ X 每一条右上角有「⟳ ⋯」两个图标，我没有
 *   ⑬ X 发帖框图标是 7 个（不是 9），间距更松
 *   ⑭ X 发帖框总高 122px（我 96px）
 *   ⑮ X 左栏 11 项，我 6 项
 *   ⑯ X 账号条右侧有「⋯」
 * ========================================================================== */

/* ---------------------------------------------------------------- ⑫ 条目右上角图标 */
/*
 * X 每条的署名行右端有「⟳（转发入口）」和「⋯（更多）」，是行内右上角的小按钮。
 * 少了这两个，每条右边空一截，整体节奏就不对。
 */
.sg-row__body {
    position: relative;
}/* 署名行要给右上角图标让位 */
.sg-row__head {
    padding-inline-end: 76px;
}

/* ---------------------------------------------------------------- ⑬ 发帖框图标 */
/*
 * X 实测：可见 7 个图标（图片 / GIF / 投票 / 表情 / 时间 / 位置 / 标记），
 * 图标 svg 20×20，热区 34×34，彼此紧贴。
 */
.sg-composer__bar {
    display: flex;
    align-items: center;
    gap: 2px;
    min-block-size: 48px;
    margin-inline-start: 48px;
    padding-block: 2px 8px;
}/* ---------------------------------------------------------------- ⑭ 发帖框高度 */
/*
 * X 实测：页签底 53 → 第一条顶 175，发帖框总高 **122px**。
 * 我原来 96px（占位 15px 改 20px 后仍差 26px）。
 * 拆解：上留白 25 + 占位行 24 + 间距 34 + 工具行 20 + 下留白 19。
 */
.sg-composer {
    display: block;
    padding: 12px 16px 0;
    border-block-end: 1px solid var(--sg-border);
}

.sg-composer__row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding-block-start: 8px;
}

.sg-composer__avatar {
    margin-block-start: 0;
}

.sg-composer__input {
    padding: 2px 0 0;
}

.sg-composer__bar {
    margin-block-start: 14px;
}

/* ---------------------------------------------------------------- ⑯ 账号条「···」 */
.sg-nav-account__more {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    inline-size: 24px;
    block-size: 24px;
    margin-inline-start: auto;
    color: var(--sg-text);
}

.sg-nav-account__more svg {
    inline-size: 18px;
    block-size: 18px;
}

/* 账号条文字列不要被「···」挤掉 */
.sg-nav-account__text {
    flex: 1 1 auto;
    min-inline-size: 0;
}

/* ---------------------------------------------------------------- ⑰ 左栏图标略粗 */
/*
 * X 的导航图标 stroke 看起来更实。图标本身是 SVG 描边，统一调到 2。
 */
.sg-nav-link svg {
    stroke-width: 2;
}

/* ==========================================================================
 * 19. 左栏收尾（第 172 轮）
 * ========================================================================== */

/* 把「切换外观」放出来：X 有 11 项，我需要补密度，这项是真实功能 */
.sg-nav-link[data-sg-theme-toggle] {
    display: flex !important;
}

/*
 * 账号条钉在左栏底部
 *
 * X 实测：账号条 y=823，视口 900 → 距底 12px，是钉底的。
 * .sg-nav-pane 现在是 block-size:100vh 的 sticky 容器，
 * margin-block-start:auto 会把账号条推到容器底部 = 视口底部。正确。
 */
.sg-nav-account {
    margin-block-start: auto;
    margin-block-end: 12px;
}

/* ==========================================================================
 * 20. 左栏按钮与图标收尾（第 172 轮）
 * ========================================================================== */

/*
 * 「切换外观」是 <button>，浏览器默认给灰底。
 * 它带着 .sg-nav-link 类，必须显式清掉 background/border 才和链接一致。
 */
button.sg-nav-link {
    border: 0;
    background: transparent;
    font-family: inherit;
    text-align: start;
    cursor: pointer;
}

button.sg-nav-link:hover {
    background: var(--sg-bg-soft);
}

/* 账号条「⋯」：三个圆点用 fill 画，不用描边（描边会把 0 长度路径画成方块） */
.sg-nav-account__more svg {
    fill: currentColor;
    stroke: none;
}/* ==========================================================================
 * 21. 发帖框图标间距（第 172 轮）
 *
 * X 实测：7 个图标，相邻中心距 42px（热区 34 + 间隙 8）。
 * 我原来 gap: 2px → 30px 一格，整行明显更挤。
 * ========================================================================== */

.sg-composer__bar {
    gap: 8px;
}.sg-nav-account__more svg {
    fill: currentColor;
    stroke: none;
}

/* ==========================================================================
 * 22. 发帖框图标最终对齐（第 173 轮，X 实测）
 *
 * X：
 *   svg 23×23，热区 34.67×34.67，圆角 0
 *   相邻中心距 40px（420 → 460 → 500 …）
 *   颜色 rgb(130,154,171) —— 输入框为空时的「禁用蓝」，不是纯蓝
 *   fill 是 currentColor、stroke 是 none（实心图标）
 * ========================================================================== */

.sg-composer__bar {
    gap: 6px;
    margin-inline-start: 48px;
}/* ==========================================================================
 * 24. 宽屏增长规则（第 174 轮，X 实测 6 个宽度）
 *
 * 之前我写死「三栏 1305 贴左」，宽屏时右侧空一大片 —— 这就是「放大就不行」。
 *
 * X 实测：
 *   vw     header.w  primary.x  navItem.x  右侧留白
 *   1280   275       275        8          25
 *   1440   355       355        88         105
 *   1600   435       435        168        185
 *   1920   595       595        328        345
 *   2200   735       735        468        485
 *   2560   915       915        648        665
 *
 * 两条规律：
 *   ① 左栏宽 = 275 + (vw - 1280) / 2        → 0.5vw - 365
 *   ② 导航内容右对齐，距左栏右边缘固定 267px（259 + 8）
 *
 * 实现：左栏 flex:1 吃掉多余宽度，右侧用 padding 把剩余部分还回去。
 *   padding-right = 0.5vw - 615   （vw=1280 时 25，vw=2560 时 665）
 * ========================================================================== */

.sg-shell {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    max-inline-size: none;
    margin-inline: 0;
    padding: 0 max(0px, calc(50vw - 615px)) 0 0;
    min-block-size: 100vh;
}

.sg-nav-pane {
    flex: 1 1 auto;
    inline-size: auto;
    min-inline-size: 275px;
    max-inline-size: none;
    /* 导航内容右对齐，右侧留 8px */
    padding: 0 8px 0 0;
    align-items: flex-end;
}

.sg-nav-pane__inner {
    inline-size: 259px;
    max-inline-size: 100%;
    padding-inline: 0;
}

.sg-main {
    flex: 0 0 600px;
    inline-size: 600px;
    max-inline-size: 600px;
}

.sg-rail-pane {
    flex: 0 0 350px;
    inline-size: 350px;
    max-inline-size: 350px;
    margin-inline-start: 30px;
}

/* 品牌与发帖按钮也要跟着右对齐 */
.sg-nav-pane__brand {
    margin-inline-end: 0;
}

.sg-nav-cta {
    align-self: flex-end;
}

/* ≥1265 的旧宽度约束全部让位给增长规则 */
@media (min-width: 1265px) {
    .sg-shell {
        max-inline-size: none;
        margin-inline: 0;
        padding-inline-end: max(0px, calc(50vw - 615px));
        justify-content: flex-start;
    }
}

/* 1265 以下是图标列，回到定宽 */
@media (max-width: 1264.98px) {
    .sg-shell {
        padding-inline-end: 0;
    }

    .sg-nav-pane {
        flex: 0 0 88px;
        min-inline-size: 88px;
        align-items: center;
        padding: 0;
    }

    .sg-nav-pane__inner {
        inline-size: 88px;
        align-items: center;
    }
}

/* ==================================================================
 * 图形块（第 191 轮）
 *
 * mermaid / graphviz / markmap / echarts 的产物由 prose.js 从 <pre>
 * 升到 <div class="sg-diagram"> 里 —— <pre> 的 white-space: pre 会把
 * SVG 内嵌的 <style> 当文本显示，也会让 echarts 量到 0×0。
 *
 * 这里只负责容器几何，不碰图本身的配色（图由各运行时按明暗模式自绘）。
 * ================================================================ */

.sg-diagram {
    margin: 18px 0;
    padding: 0;
    inline-size: 100%;
    max-inline-size: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    background: transparent;
    border: 0;
    text-align: center;
    line-height: normal;
    white-space: normal;
}

.sg-diagram > svg {
    max-inline-size: 100%;
    block-size: auto;
    display: inline-block;
}

/* markmap 自带一个包裹层，撑满宽度才能画布居中 */
.sg-diagram > [class*="markmap"],
.sg-diagram > div > svg {
    inline-size: 100%;
    max-inline-size: 100%;
    block-size: auto;
}

/*
 * echarts 的内联样式写死了 width:0;height:0（它在 <pre> 里量出来的），
 * 内联声明只能被 !important 覆盖，这一处是必要的。
 */
.sg-diagram > code[_echarts_instance_] {
    display: block;
    inline-size: 100%;
    block-size: 380px;
    padding: 0;
    border: 0;
    background: none;
    white-space: normal;
}

.sg-diagram > code[_echarts_instance_] > div {
    inline-size: 100% !important;
    block-size: 380px !important;
}

/* 公式块：KaTeX 自己管排版，这里只保证不溢出 */
.sg-prose .katex-display {
    margin: 18px 0;
    overflow-x: auto;
    overflow-y: hidden;
}

.sg-prose .katex {
    font-size: 1.05em;
}

/* ==================================================================
 * 评论区补全（第 191 轮）
 *
 * 第 169 轮重做列表页时评论区没跟着走，留下四处「浏览器默认样式」：
 *   · 评论者名字链接是 #0000ee + 下划线（浏览器默认的未访问链接）
 *   · 表情面板是 24 个 2px outset 原生按钮，直接铺成一坨
 *   · 表单提示用正文字号与正文色，和提交按钮挤在同一行
 *   · 取消回复链接没有任何视觉，和标题糊在一起
 * 这里只补这几处 + 把输入框统一成 X 的填充式，不改已有布局。
 * ================================================================ */

/* 评论者名字 / 时间 / 站点：一律继承正文字色，去掉默认下划线 */
.sg-comment__head a,
.sg-comment__site,
.sg-comment__time,
.sg-comment__foot a {
    color: var(--sg-text-sub);
    text-decoration: none;
}

.sg-comment__head a {
    color: var(--sg-text-strong);
    font-weight: 700;
}

.sg-comment__head a:hover,
.sg-comment__site:hover,
.sg-comment__foot a:hover {
    text-decoration: underline;
}

.sg-comment__site {
    margin-inline-start: 6px;
    font-size: 13px;
}

/* 评论正文里的链接必须能看出来，保留强调色 */
.sg-comment__body a {
    color: var(--sg-accent);
    text-decoration: none;
}

.sg-comment__body a:hover {
    text-decoration: underline;
}

/* 表单提示：13px 弱化，不再和按钮抢视线 */
.sg-form__hint {
    font-size: 13px;
    line-height: 18px;
    color: var(--sg-text-sub);
}

/* 取消回复：默认是空段落，有回复对象时才有内容 */
.sg-respond__cancel {
    margin: 0;
    font-size: 13px;
    line-height: 18px;
    color: var(--sg-text-sub);
}

.sg-respond__cancel a {
    color: var(--sg-accent);
    text-decoration: none;
}

.sg-respond__cancel a:hover {
    text-decoration: underline;
}

/* 表情面板：flex 换行，按钮去掉原生边框 */
.sg-emoji {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: 0 0 12px;
    padding: 6px;
    border-radius: var(--sg-radius);
    background: var(--sg-bg-soft);
}

.sg-emoji__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 32px;
    block-size: 32px;
    padding: 0;
    font-size: 17px;
    line-height: 1;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    appearance: none;
    transition: background-color 120ms var(--sg-ease);
}

.sg-emoji__btn:hover {
    background: var(--sg-bg);
}

.sg-emoji__btn:focus-visible {
    outline: 2px solid var(--sg-accent);
    outline-offset: 1px;
}

/* 输入框统一成填充式：默认无边框，聚焦才描边（X 的做法） */
.sg-form textarea,
.sg-form input[type="text"],
.sg-form input[type="email"],
.sg-form input[type="url"] {
    inline-size: 100%;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 15px;
    line-height: 20px;
    color: var(--sg-text);
    background: var(--sg-bg-soft);
    border: 1px solid transparent;
    border-radius: var(--sg-radius);
    transition: background-color 120ms var(--sg-ease), border-color 120ms var(--sg-ease);
}

.sg-form textarea {
    min-block-size: 104px;
    resize: vertical;
}

.sg-form textarea:focus,
.sg-form input[type="text"]:focus,
.sg-form input[type="email"]:focus,
.sg-form input[type="url"]:focus {
    outline: none;
    background: var(--sg-bg);
    border-color: var(--sg-accent);
}

/* 单条评论：X 的回复靠留白分层，不用分割线 */
.sg-comment {
    padding: 12px 16px;
}

.sg-comment__body {
    margin-top: 4px;
}

/* 提交行：按钮与提示对齐到一条基线 */
.sg-form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

/* 分享成功后按钮自身闪一下强调色（第 191 轮） */
.sg-act.is-copied {
    color: var(--sg-accent);
}

.sg-act.is-copied .sg-icon,
.sg-act.is-copied svg {
    color: var(--sg-accent);
}

/* ==================================================================
 * 操作行几何收口（第 191 轮）
 *
 * 历史上这条规则被写过三遍（807 / 2687 / 2722 行），最后一遍是
 *   .sg-row__acts > .sg-act { flex: 1 1 0 }
 * 于是「评论」和「分类」被拉成各 223px，一行四个图标散得开开的，
 * 中间大片空白。X 的作法是每个动作只占内容宽度、彼此固定间距。
 *
 * 这里统一覆盖三处旧规则：内容宽度 + 固定间距，不再拉伸。
 * ================================================================ */

.sg-row__acts,
.sg-post__acts {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 52px;
    max-inline-size: none;
    margin-block-start: 12px;
}

.sg-row__acts > .sg-act,
.sg-row__acts > .sg-act:nth-last-child(2),
.sg-row__acts > .sg-act:nth-last-child(1),
.sg-post__acts > .sg-act,
.sg-post__acts > .sg-act:nth-last-child(2),
.sg-post__acts > .sg-act:nth-last-child(1) {
    flex: 0 0 auto;
    inline-size: auto;
    min-inline-size: 0;
    margin-inline-start: 0;
    padding: 0;
    border: 0;
    background: none;
}

/* 窄屏收紧，避免 4 个动作挤不下 */
@media (max-width: 700px) {
    .sg-row__acts,
    .sg-post__acts {
        gap: 32px;
    }
}

/* 提交按钮不要再被压窄（第 191 轮：出现过「提交评...」） */
.sg-form__actions .sg-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}
/*
 * mermaid 把它的样式表以 <style> 塞进 <svg> 里。
 * SVG 命名空间下 <style> 的 display 默认是 inline（HTML 里是 none），
 * 于是那段 CSS 会被当正文画出来 —— 实测切到暗色重绘后，
 * 整块「#sg-mermaid-0-xxx{font-family:...}」铺满一千多像素。
 * display:none 只去掉盒子，不影响样式表本身继续生效。
 */
.sg-diagram style,
.sg-diagram svg style {
    display: none;
}

/* ==================================================================
 * 封面两档（第 191 轮）
 *
 * 真实配图（有 <img> 的）保持原样：按原比例铺满，最高 510px。
 * 生成封面是占位图，不是文章配图，所以收成一条色带，
 * 让时间线读起来是「文字为主」，而不是六张抽象几何大图。
 * ================================================================ */

.sg-row__cover img {
    max-block-size: 510px;
    object-fit: cover;
}

/* 几何封面：132px 色带 */
.sg-row__cover--gen {
    block-size: 132px;
    border-radius: 12px;
}

.sg-row__cover--gen .sg-gen {
    block-size: 132px;
    inline-size: 100%;
}

/* 纯色块：更矮一档，只有渐变 */
.sg-row__cover--color {
    block-size: 88px;
    border-radius: 12px;
    background-image: linear-gradient(135deg, var(--sg-gen-from), var(--sg-gen-to));
}

/* ==================================================================
 * 搜索框图标内缩（第 193 轮）
 *
 * 原来药丸里没有任何内边距，图标贴着左边框只有 7px，
 * 视觉上像被切掉了一半。X 的搜索框图标离边约 12px。
 * 只加图标自身的外边距，输入框起点跟着右移，整块几何不变。
 * ================================================================ */

.sg-topsearch__icon {
    margin-inline-start: 11px;
}

/* ==================================================================
 * 右栏内容可滚（第 193 轮）
 *
 * .sg-rail-pane 是 position:sticky + block-size:100vh —— 高度被钉死在一屏。
 * 文章目录长起来之后，超出 100vh 的那截既不会撑开容器、也没有滚动条，
 * 于是「目录滑不到底，看不到最下面」。
 *
 * 让中间的模块区自己滚：搜索框和页脚保持不动，只有 boxes 区滚动。
 * overscroll-behavior: contain 防止滚到底继续带动整页。
 * ================================================================ */

.sg-rail-boxes {
    flex: 1 1 auto;
    min-block-size: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--sg-border-strong) transparent;
    /* 右侧留出滚动条宽度，避免它压住最后一行的圆角 */
    padding-inline-end: 4px;
}

.sg-rail-boxes::-webkit-scrollbar {
    inline-size: 8px;
}

.sg-rail-boxes::-webkit-scrollbar-thumb {
    background: var(--sg-border-strong);
    border-radius: 999px;
}

.sg-rail-boxes::-webkit-scrollbar-track {
    background: transparent;
}

/*
 * 右栏模块不许被压扁（第 193 轮）
 *
 * .sg-rail-boxes 是 flex 容器（继承自 .sg-rail-pane 的纵向布局），
 * 子项默认 flex-shrink: 1 —— 内容比一屏高时，浏览器把每个模块**压缩**
 * 到装得下为止，而不是让它溢出成滚动条。
 * 表现就是「目录长的时候每一行都挤在一起，而且怎么滚都到底」。
 * 固定为不收缩，溢出的部分交给上一条 overflow-y: auto 去滚。
 */
.sg-rail-boxes > * {
    flex: 0 0 auto;
}

/*
 * 真实配图预留版面（第 193 轮）
 *
 * 列表里的 <img> 只有 src，没有 width/height —— 图片下载完之前浏览器
 * 不知道它多高，加载完就把下面所有内容顶下去（CLS）。
 * 给容器一个固定比例，先把版面钉住；图片本身 object-fit: cover 填满，
 * 视觉上与原来一致，但不再跳动。
 */
.sg-row__cover:not(.sg-row__cover--gen):not(.sg-row__cover--color) {
    aspect-ratio: 16 / 10;
    max-block-size: 510px;
}

.sg-row__cover:not(.sg-row__cover--gen):not(.sg-row__cover--color) img {
    block-size: 100%;
    inline-size: 100%;
    object-fit: cover;
}

/* ==================================================================
 * 操作图标的圆形反馈（第 195 轮）
 *
 * 原来操作行只有「图标和数字变蓝」，鼠标移上去几乎没有反馈感 ——
 * 19px 的小图标变个色，很容易看不出发生了什么。
 *
 * X 的做法是：hover 时在图标背后浮出一圈淡主色圆底。
 * 这里用 box-shadow 的扩散实现，不新增元素、不改布局、
 * 也不影响图标自身的点击区域（box-shadow 不占位）。
 * ================================================================ */

.sg-act svg {
    border-radius: 9999px;
    transition: background-color var(--sg-dur-fast) var(--sg-ease),
                box-shadow var(--sg-dur-fast) var(--sg-ease),
                color var(--sg-dur-fast) var(--sg-ease);
}

.sg-act:hover svg {
    background: var(--sg-accent-soft);
    box-shadow: 0 0 0 6px var(--sg-accent-soft);
}

/* 键盘聚焦也给同样的提示，但用描边而不是填充，避免和 hover 混淆 */
.sg-act:focus-visible {
    outline: none;
}

.sg-act:focus-visible svg {
    box-shadow: 0 0 0 3px var(--sg-accent);
}

/* 点赞位：hover 用暖色，和主色区分开 */
.sg-act--like:hover svg {
    background: rgba(249, 24, 128, 0.12);
    box-shadow: 0 0 0 6px rgba(249, 24, 128, 0.12);
}

/* ==================================================================
 * 明暗切换的颜色过渡（第 196 轮）
 *
 * 切换主题是直接改 data-sg-theme，所有颜色瞬间跳变 —— 眼睛会"闪"一下。
 * JS 在切换瞬间给 <html> 挂 260ms 的 .sg-theme-switching，
 * 这段时间里让颜色走过渡，结束后立刻摘掉（常驻会拖慢所有交互）。
 *
 * 只在 prefers-reduced-motion: no-preference 下生效：
 * 开了减弱动效的用户仍然得到瞬间切换。
 * ================================================================ */

@media (prefers-reduced-motion: no-preference) {
    .sg-theme-switching,
    .sg-theme-switching *,
    .sg-theme-switching *::before,
    .sg-theme-switching *::after {
        transition: background-color 200ms var(--sg-ease),
                    color 200ms var(--sg-ease),
                    border-color 200ms var(--sg-ease),
                    fill 200ms var(--sg-ease),
                    stroke 200ms var(--sg-ease),
                    box-shadow 200ms var(--sg-ease) !important;
    }
}

/* ==================================================================
 * 首屏与右栏的轻入场（第 197 轮）
 *
 * 页面现在是「一次性全部出现」，读起来有点硬。加一层极轻的淡入上浮：
 * 240ms、位移 6px、最多错开 90ms —— 短到不会等，长到能感觉到。
 *
 * 三条安全线：
 *   ① 全程包在 prefers-reduced-motion: no-preference 里，
 *      开了减弱动效的用户完全看不到动画；
 *   ② animation-fill-mode 用 backwards 而不是 both —— 动画结束后
 *      元素回到自己的自然样式，不会被动画状态"锁住"；
 *   ③ 不依赖 JS、不依赖 IntersectionObserver：动画在元素进入文档时就跑，
 *      pjax 换页插入新节点也会自然重放。JS 失效时内容照常显示。
 *
 * 为什么只有前 4 条错峰：列表可能很长，越往后延迟越久会显得"加载不完"。
 * 前 4 条错开 0/30/60/90ms，之后全部 0 延迟。
 * ================================================================ */

@keyframes sg-enter {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .sg-flow-list > .sg-row,
    .sg-rail-boxes > * {
        animation: sg-enter 240ms var(--sg-ease) backwards;
    }

    .sg-flow-list > .sg-row:nth-child(1) { animation-delay: 0ms; }
    .sg-flow-list > .sg-row:nth-child(2) { animation-delay: 30ms; }
    .sg-flow-list > .sg-row:nth-child(3) { animation-delay: 60ms; }
    .sg-flow-list > .sg-row:nth-child(4) { animation-delay: 90ms; }
    .sg-flow-list > .sg-row:nth-child(n + 5) { animation-delay: 90ms; }

    .sg-rail-boxes > *:nth-child(1) { animation-delay: 0ms; }
    .sg-rail-boxes > *:nth-child(2) { animation-delay: 50ms; }
    .sg-rail-boxes > *:nth-child(n + 3) { animation-delay: 100ms; }
}

/*
 * 图形块里的 <code> 不是行内代码（第 200 轮）
 *
 * prose 里有一条 `.sg-prose :not(pre) > code` 给行内代码加灰底和内边距。
 * 图形块升壳成 <div> 之后，里面的 <code class="language-echarts"> 就不再
 * 处于 <pre> 之下，于是被那条规则命中 —— 图表容器会被套上一层灰底。
 * 这里把图形块内的 code 还原成纯容器。
 */
.sg-diagram code {
    padding: 0;
    background: none;
    border-radius: 0;
    font-size: inherit;
    color: inherit;
}

/* ==================================================================
 * 程序化封面配色（第 206 轮）
 *
 * PHP 现在只内联一个色相（--sg-gen-hue / --sg-gen-hue2），
 * 三个颜色全部在这里按主题派生 —— 这是关键：
 *
 *   原来颜色是内联在 <svg style="..."> 上的，内联声明优先级最高，
 *   CSS 里写什么都没法在暗色下改它。结果是深色页面上挂着一块
 *   发光的浅色横条。当时的代码注释还写着「components.css 里按
 *   data-sg-theme 覆盖这三个变量」—— 那三处覆盖根本不存在。
 *
 * 现在同一篇文章在两个模式下仍是同一个色相，但亮度各自成立：
 *   亮色 → 高明度底 + 深色墨
 *   暗色 → 低明度底 + 浅色墨
 * ================================================================ */

.sg-gen,
.sg-row__cover--color {
    --sg-gen-from: hsl(var(--sg-gen-hue) 58% 80%);
    --sg-gen-to:   hsl(var(--sg-gen-hue2) 52% 66%);
    --sg-gen-ink:  hsl(var(--sg-gen-hue) 48% 26%);
    --sg-gen-ink2: hsl(var(--sg-gen-hue2) 58% 44%);
}

:root[data-sg-theme="dark"] .sg-gen,
:root[data-sg-theme="dark"] .sg-row__cover--color {
    --sg-gen-from: hsl(var(--sg-gen-hue) 28% 19%);
    --sg-gen-to:   hsl(var(--sg-gen-hue2) 26% 14%);
    --sg-gen-ink:  hsl(var(--sg-gen-hue) 34% 76%);
    --sg-gen-ink2: hsl(var(--sg-gen-hue2) 40% 64%);
}

@media (prefers-color-scheme: dark) {
    :root[data-sg-scheme="auto"]:not([data-sg-theme]) .sg-gen,
    :root[data-sg-scheme="auto"]:not([data-sg-theme]) .sg-row__cover--color {
        --sg-gen-from: hsl(var(--sg-gen-hue) 28% 19%);
        --sg-gen-to:   hsl(var(--sg-gen-hue2) 26% 14%);
        --sg-gen-ink:  hsl(var(--sg-gen-hue) 34% 76%);
        --sg-gen-ink2: hsl(var(--sg-gen-hue2) 40% 64%);
    }
}

/* ==================================================================
 * 右栏内滚的底部渐隐（第 222 轮）
 *
 * 三块内容合计约 890px，900px 高的窗口里可视区只有 780px ——
 * 不滚就看到「站点信息」。8px 的细滚动条不足以提示这件事。
 *
 * is-scrollable：底部 28px 渐隐，暗示「下面还有」
 * is-at-end    ：滚到底后撤掉，避免永远压暗最后一块
 *
 * 用 mask 而不是叠一个渐变层：mask 不影响点击热区，也不引入额外元素。
 * ================================================================ */
.sg-rail-boxes.is-scrollable {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
}

.sg-rail-boxes.is-at-end {
    -webkit-mask-image: none;
    mask-image: none;
}

/* ==================================================================
 * 换页时的载入光标（第 228 轮补）
 *
 * 规格第 409 行写着：「载入指示器 —— 八种形态全被否，只留 cursor: progress」。
 * pjax.js 也确实在请求开始时给 body 加 .is-pjaxing、结束时摘掉。
 *
 * 但样式表里 cursor: progress 一处都没有 —— 于是换页期间完全没有任何反馈：
 * 点了链接，页面上什么都不会变，直到新内容到达。慢网下尤其像卡死。
 *
 * 这是当初定下的唯一保留形态，补回来即可，不需要加任何元件。
 * ================================================================ */
body.is-pjaxing,
body.is-pjaxing a,
body.is-pjaxing button {
    cursor: progress;
}

/* ==================================================================
 * 吸顶开关（第 230 轮接通）
 *
 * View.php 会给 body 输出 data-sg-nav-sticky / data-sg-rail-sticky，
 * 取值来自后台的「导航吸顶」「右栏吸顶」两个开关；注释里甚至写着
 * 「components.css 里用 [data-sg-rail-sticky="1"] 选择器决定要不要 sticky」——
 * 但那两个选择器在样式表里根本不存在，于是关掉开关页面毫无变化。
 *
 * 现在补上关闭时的分支。默认值是 1（sticky），所以这一条只影响
 * 主动关掉的人，不影响任何现有站点。
 * ================================================================ */
/*
 * 注意选择器是 :root 不是 body ——
 * 这些属性由 View.php 输出在 <html> 上（实测 html 标签带
 * data-sg-rail / data-sg-nav-sticky / data-sg-rail-sticky 等），
 * 写成 body[...] 永远不会命中。
 */
:root[data-sg-nav-sticky="0"] .sg-nav-pane,
:root[data-sg-rail-sticky="0"] .sg-rail-pane {
    position: static;
    block-size: auto;
}

/* ==================================================================
 * 字标头像的文字对比度（第 232 轮）
 *
 * 头像底是 --sg-border-strong，字是 --sg-text-sub。
 * 亮色下 #cfd9de / #536471 = 4.05:1，15px 粗体够用；
 * 暗色下 #3f4448 / #8b98a5 只有 **2.41:1** —— 低于 3:1 的下限。
 *
 * 用令牌分流：亮色保持原来的次级灰（视觉上是「水印字」），
 * 暗色提到正文亮度，保证可读。
 * ================================================================ */
:root {
    --sg-avatar-ink: var(--sg-text-sub);
}

:root[data-sg-theme="dark"] {
    --sg-avatar-ink: var(--sg-text);
}

@media (prefers-color-scheme: dark) {
    :root[data-sg-scheme="auto"]:not([data-sg-theme]) {
        --sg-avatar-ink: var(--sg-text);
    }
}

.sg-row__avatar,
.sg-post-author__avatar,
.sg-comment__avatar {
    color: var(--sg-avatar-ink);
}

/* ==================================================================
 * 图形块里泄漏的 <style>（第 234 轮）
 *
 * mermaid / graphviz 渲染时会把一段 CSS 连同样式表一起塞进容器。
 * prose.js 会在升壳时把它搬到 <head> 并删除原元素 —— 但那是**延迟执行**的
 * （0 / 300 / 900 / 1800 / 3200ms 五次补跑），中间态里这段 CSS 会以正文形式
 * 显示出来，还会把正文列撑出横向滚动条。
 *
 * 实测截图：文章页「Mermaid 流程图」下方出现过一整行
 *   #sg-mermaid-0-xxxx{font-family:"trebuchet ms",verdana,...}
 *
 * 这里兜一层：只要 <style> 成了图形块的直接子元素（即已经在 SVG 之外），
 * 就不让它显示。SVG **内部**的 <style> 不受影响（它们不在选择器范围内，
 * 而且 display:none 对它们本来也无效）。
 * ================================================================ */
.sg-diagram > style,
.sg-prose > style {
    display: none;
}

/* ==================================================================
 * 右栏不再显示拖动条（第 235 轮，按操作者要求）
 *
 * 操作者原话：「不要在右侧栏再加一个那个拖动条，我要的是固定在屏幕上的一个目录，
 * 就是能够随文章往下滑」。
 *
 * 右栏本来就是 position: sticky + top: 0 —— 它已经跟着文章停在那里了。
 * 多出来的那条 8px 滚动条是内层 .sg-rail-boxes 的 overflow 造成的，
 * 视觉上像「又加了一根拖动条」。
 *
 * 处理：滚动能力保留（内容真的超出时仍可滚），但**不显示滚动条**。
 * 底部渐隐（.is-scrollable）继续充当「下面还有」的提示。
 * ================================================================ */
.sg-rail-boxes {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.sg-rail-boxes::-webkit-scrollbar {
    inline-size: 0;
    block-size: 0;
    display: none;
}
/*!
 * 山果 ShanGuo · 响应式层（responsive.css）— 照 X 复刻（第 169b）
 *
 * X 的真实断点（实测 1440 / 1100 / 900 / 390）：
 *
 *   ≥1265   三栏全开：355 + 600 + 350 = 1305
 *   1000-1264  左导航折叠成图标列（约 88px），中栏 600，右栏隐藏
 *   700-999    只有中栏 600，居中
 *   <700       中栏满宽 + 顶栏
 *
 * 实测依据：
 *   @1440  header 355（内含 80 左留白） / primary 600 / sidebar 350
 *   @1100  header 88（折叠）/ primary 600 / sidebar 隐藏
 *
 * 编码：UTF-8 无 BOM。
 */

/* ==========================================================================
 * 1. 极窄（< 700px）：中栏满宽 + 顶栏
 * ========================================================================== */

@media (max-width: 699.98px) {
    :root {
        --sg-nav-h: 53px;
    }

    .sg-shell {
        display: block;
        max-inline-size: 100%;
    }

    .sg-main {
        display: flex;
        inline-size: 100%;
        max-inline-size: 100%;
        min-inline-size: 0;
        border-inline: 0;
    }

    /* 右栏与左栏都不出现（左栏已变抽屉） */
    .sg-rail-pane {
        display: none;
    }

    .sg-row {
        gap: 8px;
        padding: 12px;
    }

    .sg-row__avatar {
        flex: 0 0 40px;
        inline-size: 40px;
        block-size: 40px;
    }

    .sg-row__excerpt {
        -webkit-line-clamp: 5;
    }

    .sg-row--lead .sg-row__excerpt {
        -webkit-line-clamp: 8;
    }

    .sg-row__acts {
        max-inline-size: none;
    }    .sg-post__title,
    .sg-page-doc__title {
        font-size: 20px;
        line-height: 24px;
    }

    .sg-post__body,
    .sg-page-doc__body {
        font-size: 17px;
    }

    .sg-post__nav {
        grid-template-columns: minmax(0, 1fr);
    }

    .sg-post__nav a + a {
        border-inline-start: 0;
        border-block-start: 1px solid var(--sg-border);
    }

    .sg-linkform__form {
        grid-template-columns: minmax(0, 1fr);
    }

    .sg-friends__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* 搜索框字号 ≥16px，否则 iOS 聚焦时自动放大 */
    .sg-topsearch__input {
        font-size: 16px;
    }

    .sg-top {
        inset-inline-end: 16px;
        inset-block-end: 16px;
        inline-size: 40px;
        block-size: 40px;
    }
}

/* ==========================================================================
 * 2. 700–1059：只有中栏 600，居中
 * ========================================================================== */

@media (min-width: 700px) and (max-width: 1059.98px) {
    /* 这个区间只剩中栏，X 让它整体居中 */
    .sg-shell {
        justify-content: center;
        max-inline-size: 100%;
        margin-inline: auto;
    }

    .sg-main {
        flex: 0 0 600px;
        inline-size: 600px;
        max-inline-size: 600px;
    }

    .sg-rail-pane {
        display: none;
    }
}

/* ==========================================================================
 * 3. 1060–1264：左导航折叠成图标列（88px），中栏 600，右栏隐藏
 *
 * X 在这个宽度只保留图标导航 + 时间线。
 * ========================================================================== */

/* 下界从 1060 放到 1024：实测 1059px 时图标栏还是 88px 列，
 * 而原先的规则从 1060 才开始生效，于是 1030~1059 这一段仍有 356px 右侧空白。 */
@media (min-width: 1060px) and (max-width: 1264.98px) {
        /*
     * 这一档（1060~1264px）右栏整列隐藏，外壳宽度收成 88 + 600 = 688。
     *
     * 原来写的是 margin-inline: 0 + flex-start —— 整块贴在视口左边，
     * 右边空出 372~576px。1060 宽时右侧空白比正文列还宽，
     * 看着像布局没做完。
     *
     * 改成 auto：688 的块在视口里居中，左右留白相等。
     */
    .sg-shell {
        max-inline-size: 688px;
        margin-inline: auto;
        justify-content: flex-start;
    }

    .sg-nav-pane {
        flex: 0 0 88px;
        inline-size: 88px;
        padding: 0;
        align-items: center;
    }

    .sg-nav-pane__inner {
        inline-size: 88px;
        align-items: center;
        padding-inline: 0;
    }

    .sg-nav-link {
        justify-content: center;
        inline-size: 50px;
        min-block-size: 50px;
        padding: 12px;
    }.sg-nav-link__text {
        display: none;
    }

    .sg-nav-cta {
        inline-size: 50px;
        min-block-size: 50px;
        padding-inline: 0;
        font-size: 0;
    }

    .sg-nav-cta::before {
        content: "+";
        font-size: 22px;
        font-weight: 400;
        line-height: 1;
    }

    .sg-nav-account {
        justify-content: center;
        padding: 6px;
    }

    .sg-nav-account__text {
        display: none;
    }

    .sg-rail-pane {
        display: none;
    }
}

/* ==========================================================================
 * 4. ≥1265：三栏全开
 * ========================================================================== */

@media (min-width: 1265px) {
    /*
     * X @1440 / @1920 实测 header.x 都是 0 —— 三栏贴左，不居中。
     * 上一版写了 justify-content: center，整块右移，与 X 差 20~60px。
     */
    .sg-shell {
        max-inline-size: 1305px;
        margin-inline: 0;
        padding: 0;
        justify-content: flex-start;
    }

    .sg-nav-pane {
        display: flex;
    }

    .sg-rail-pane {
        display: flex;
    }

    .sg-topbar {
        display: none;
    }
}

/* ==========================================================================
 * 5. 打印
 * ========================================================================== */

@media print {
    .sg-nav-pane,
    .sg-rail-pane,
    .sg-topbar,
    .sg-top,
    .sg-progress,
    .sg-search,
    .sg-lightbox,
    .sg-drawer-mask,
    .sg-skip,
    .sg-pager,
    .sg-respond,
    .sg-post__nav,
    .sg-post__acts,
    .sg-post__stats,
    .sg-row__acts,
    .sg-row__avatar,
    .sg-crumbs,
    .sg-tabs {
        display: none !important;
    }

    .sg-shell {
        display: block;
        max-inline-size: 100%;
    }

    .sg-main {
        display: block;
        inline-size: 100%;
        max-inline-size: 100%;
        border: 0;
    }

    .sg-row {
        display: block;
        padding-inline: 0;
    }

    .sg-row__cover {
        display: none !important;
    }

    .sg-prose {
        font-size: 11pt;
        line-height: 1.6;
    }

    .sg-prose h2,
    .sg-prose h3 {
        break-after: avoid;
        page-break-after: avoid;
    }

    .sg-prose img,
    .sg-prose pre,
    .sg-prose blockquote,
    .sg-prose table {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .sg-prose a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        color: var(--sg-print-link);
        word-break: break-all;
    }
}

/* ==========================================================================
 * 6. 段评：窄屏改成底部面板
 * ========================================================================== */


/* ==========================================================================
 * 7. AI 速览 / 友链 窄屏
 * ========================================================================== */

@media (max-width: 599px) {
    .sg-summary {
        flex-direction: column;
        gap: 4px;
    }

    .sg-linkform__form {
        grid-template-columns: minmax(0, 1fr);
    }

    .sg-friends__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================================
 * 8. 内容宽度档位（只影响详情页正文）
 * ========================================================================== */

@media (min-width: 700px) {
    :root[data-sg-width="narrow"] .sg-post__body,
    :root[data-sg-width="narrow"] .sg-page-doc__body {
        max-inline-size: 34rem;
        margin-inline: auto;
    }

    :root[data-sg-width="wide"] .sg-post__body,
    :root[data-sg-width="wide"] .sg-page-doc__body {
        max-inline-size: 52rem;
        margin-inline: auto;
    }

    :root[data-sg-width="full"] .sg-post__body,
    :root[data-sg-width="full"] .sg-page-doc__body {
        max-inline-size: 100%;
    }
}

/* ==========================================================================
 * 9. 宽屏增长规则（第 174 轮 · 本文件排在 components.css 之后，所以权威在这里）
 *
 * X 实测 6 个宽度：
 *   vw     header.w  navItem.x  右侧留白
 *   1280   275       8          25
 *   1440   355       88         105
 *   1600   435       168        185
 *   1920   595       328        345
 *   2200   735       468        485
 *   2560   915       648        665
 *
 * 规律：左栏 = 0.5*vw - 365，右侧留白 = 0.5*vw - 615
 *      导航内容右对齐，距左栏右边缘固定 267px
 * ========================================================================== */

@media (min-width: 1265px) {
    .sg-shell {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        max-inline-size: none;
        margin-inline: 0;
        padding: 0 max(0px, calc(50vw - 615px)) 0 0;
        min-block-size: 100vh;
    }

    .sg-nav-pane {
        flex: 1 1 auto;
        inline-size: auto;
        min-inline-size: 275px;
        max-inline-size: none;
        padding: 0 8px 0 0;
        align-items: flex-end;
    }

    .sg-nav-pane__inner {
        inline-size: 259px;
        max-inline-size: 100%;
        padding-inline: 0;
        align-items: stretch;
    }

    .sg-main {
        flex: 0 0 600px;
        inline-size: 600px;
        max-inline-size: 600px;
    }

    .sg-rail-pane {
        flex: 0 0 350px;
        inline-size: 350px;
        max-inline-size: 350px;
        margin-inline-start: 30px;
    }

    .sg-nav-cta {
        align-self: flex-end;
    }
}

/* 1265 以下：左栏收成图标列，不参与增长 */
@media (max-width: 1264.98px) {
    .sg-shell {
        max-inline-size: 100%;
        margin-inline: 0;
        padding-inline: 0;
    }

    .sg-nav-pane {
        flex: 0 0 88px;
        inline-size: 88px;
        min-inline-size: 88px;
        max-inline-size: 88px;
        align-items: center;
        padding: 0;
    }

    .sg-nav-pane__inner {
        inline-size: 88px;
        align-items: center;
    }
}

/*
 * 增长公式修正（第 174b）
 *
 * 上一版用 50vw，但 vw 含滚动条（1440），实际布局宽只有 1425，
 * 结果每档都少 15px。改用百分比：padding 的 % 按包含块（body）宽度算，
 * 正好是不含滚动条的布局宽度。
 *
 *   padding-right = 0.5 * 布局宽 - 622.5
 *   → 布局宽 1425 时 = 90；左栏 = 1425 - 90 - 980 = 355 ✓
 *   → 布局宽 1265 时 = 10；左栏 = 1265 - 10 - 980 = 275 ✓
 */
@media (min-width: 1265px) {
    .sg-shell {
        padding: 0 max(0px, calc(50% - 622.5px)) 0 0;
    }
}
/* ==========================================================================
 * 25. 精确差异修正（第 175 轮 · 由程序化 diff 得出，不是目测）
 *
 * 定位方法：两边跑同一套 60 项属性测量 → JSON 落盘 → Python 逐字段 diff。
 * 忽略噪音（不同选择器命中的不同元素），只修确定的：
 *
 *   左栏
 *   ├─ 导航项缺 12px 左内边距 → 图标应在 x=100（不是 88），文字在 x=146（不是 134）
 *   ├─ 发帖按钮 x=114（应 88）：align-self 改成 flex-start
 *   ├─ 发帖按钮字号 17/700（应 15/400）、padding 0 16（应 0 32）
 *   └─ 品牌 logo 26×26（应 30×30）
 *
 *   中栏
 *   ├─ 页签条宽 599（应 546，右侧 53 留给「+」）
 *   ├─ 发帖框总高 96（应 122）
 *   └─ 发帖按钮文字色应同背景（X 的禁用态，整颗半透明）
 * ========================================================================== */

/* ---------------------------------------------------------------- 左栏 */

/* 导航项：左内边距 12px（X: 项 x=88 → 图标 x=100 → 文字 x=146） */
.sg-nav-link {
    padding: 4px 12px 4px 12px;
    gap: 20px;
}

/* 图标 26px，和 X 一致 */
.sg-nav-link svg {
    inline-size: 26px;
    block-size: 26px;
}

/* 发帖按钮：左对齐（x=88）、15px/400、左右 32px 内边距 */
.sg-nav-cta {
    align-self: flex-start;
    inline-size: 233px;
    min-block-size: 52px;
    padding-inline: 32px;
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
}

/* 品牌 logo：30×30（X 实测 svg 50.67×30，是宽高比 1.7 的 X 字形） */
.sg-nav-pane__brand svg {
    inline-size: 30px;
    block-size: 30px;
}

/* ---------------------------------------------------------------- 中栏 */

/*
 * 页签条：X 宽 546（= 599 - 53），右侧 53px 是「+」的位置。
 * 之前整条 599，两个 tab 各 299，比 X 宽。
 */
.sg-tabs {
    inline-size: calc(100% - 53px);
    background: transparent;
}

.sg-tab {
    flex: 0 0 50%;
    font-size: 15px;
}

.sg-tab.is-active {
    font-weight: 700;
}

.sg-tab:not(.is-active) {
    font-weight: 500;
}/* ---------------------------------------------------------------- 发帖框高度 */

/*
 * X 实测：页签底 53 → 第一条顶 175 = 122px
 *   上留白 25 / 占位行 24 / 间距 16 / 工具行 48 / 下留白 9
 *
 * 我之前 96px。这里按 X 的分段重排。
 */
.sg-composer {
    padding: 12px 16px 9px;
    border-block-end: 1px solid var(--sg-border);
}

.sg-composer__row {
    padding-block-start: 0;
}

.sg-composer__input {
    padding: 6px 0 0;
    font-size: 20px;
    line-height: 24px;
    color: var(--sg-text-sub);
}

.sg-composer__bar {
    min-block-size: 48px;
    margin-block-start: 6px;
    margin-inline-start: 48px;
    padding-block: 0;
    gap: 6px;
    justify-content: flex-start;
}

/* 发帖按钮：X 的禁用态是「背景色 = 文字色 + 整体 opacity .5」 */
.sg-composer__post {
    min-inline-size: 63px;
    min-block-size: 36px;
    margin-inline-start: auto;
    padding-inline: 16px;
    background: var(--sg-text);
    color: var(--sg-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    opacity: 0.5;
}

.sg-composer__post:hover {
    opacity: 1;
    color: var(--sg-text-invert);
}

/* ---------------------------------------------------------------- 条目上边距 */
/*
 * X 的 article padding 是 0 16px，垂直留白来自内层。
 * 我用 padding 12px 16px 达到同样视觉，但把 gap 去掉（X 的 gap 是 normal，
 * 头像和正文之间靠 margin 12px）。
 */
.sg-row {
    gap: 12px;
    padding: 12px 16px;
    align-items: flex-start;
}

.sg-row__head {
    padding-inline-end: 76px;
    align-items: center;
}

/*
 * 发帖框垂直节奏（第 175b）
 *
 * 目标：页签底 53 → 第一条顶 175，即 122px。
 * 结构：上留白 25 + 占位行 24 + 间距 16 + 工具行 48 + 下留白 9
 */
.sg-composer {
    padding: 18px 16px 15px;
}

.sg-composer__input {
    padding: 0;
}

.sg-composer__bar {
    margin-block-start: 0;
    min-block-size: 48px;
}

/*
 * 发帖按钮文字色（第 175c）
 *
 * 上一版把 color 设成和 background 一样，整颗变成纯灰色块、文字完全看不见。
 * X 的观感是「浅灰底 + 更浅的白字」，所以文字必须是白色，整体 opacity .5。
 */
.sg-composer__post {
    background: var(--sg-text);
    color: var(--sg-text-invert);
    opacity: 0.5;
}

.sg-composer__post:hover {
    opacity: 1;
    color: var(--sg-text-invert);
}

/* ==========================================================================
 * 26. 右栏盒子 + 当前页图标（第 176 轮，实测）
 *
 * X 实测：
 *   盒子  background rgb(255,255,255)  ← **白底**
 *         border   0.667px solid rgb(239,243,244)   ← **有边框**
 *         border-radius 16px
 *         margin-bottom 16px
 *   标题  20px / 700~800 / 行高 24
 *
 * 我原来是灰底（#f7f9f9）无边框 —— 和 X 完全不是一回事。
 * ========================================================================== */

.sg-rail-boxes .sg-rail__block {
    background: var(--sg-bg);
    border: 1px solid var(--sg-border);
    border-radius: 16px;
    margin-block-end: 16px;
}

.sg-rail-boxes {
    gap: 0;
}

.sg-rail-boxes .sg-rail__title {
    padding: 12px 16px;
    color: var(--sg-text);
    font-size: 20px;
    font-weight: 800;
    line-height: 24px;
}

/* 列表项：X 的行内上下留白 12，hover 走 #f7f9f9 */
.sg-rail-boxes .sg-rail__list > li {
    padding: 12px 16px;
}

.sg-rail-boxes .sg-rail__list > li:hover {
    background: var(--sg-bg-sub);
}

/* 当前页图标：实心（fill），不走描边 */
.sg-nav-link.is-active svg,
.sg-nav-link[aria-current="page"] svg {
    fill: currentColor;
    stroke: none;
}

/* 非当前项保持描边 */
.sg-nav-link:not(.is-active):not([aria-current="page"]) svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
}

/* ==========================================================================
 * 27. 右栏搜索框（第 176 轮，X 实测）
 *
 * X：
 *   药丸  x=985（= 侧栏左边缘） w=350（满宽） h=43
 *         background rgb(255,255,255)  ← **白底**
 *         border     0.667px solid rgb(207,217,222)  ← **1px 浅灰边框**
 *         border-radius 9999px
 *   输入框 相对药丸左 29px
 *
 * 我原来是 334 宽、灰底、无边框。
 * ========================================================================== */

.sg-search-box {
    position: sticky;
    inset-block-start: 0;
    z-index: 5;
    padding: 7px 0 0;
    background: var(--sg-bg);
}

.sg-topsearch {
    display: flex;
    align-items: center;
    gap: 8px;
    inline-size: 100%;
    block-size: 43px;
    padding-inline: 16px 8px;
    border: 1px solid var(--sg-border-strong);
    border-radius: 9999px;
    background: var(--sg-bg);
    transition: border-color 100ms var(--sg-ease), background-color 100ms var(--sg-ease);
}

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

.sg-topsearch__icon {
    color: var(--sg-text-sub);
}

.sg-topsearch__input {
    color: var(--sg-text);
    font-size: 15px;
    line-height: 20px;
}

.sg-topsearch__input::placeholder {
    color: var(--sg-text-sub);
}

/* 第一个盒子距搜索框 15px（X：药丸底 50 → 盒子顶 65） */
.sg-rail-boxes {
    padding-block-start: 15px;
    gap: 0;
}

/* ==========================================================================
 * 28. 右栏列表双行（第 177 轮，照 X）
 *
 * X 实测：
 *   小标题  13px / 400 / rgb(83,100,113)
 *   主标题  15px / 700 / rgb(15,20,25) / 行高 20
 *   右侧「⋯」    18px，muted
 *   盒底「显示更多」 15px / 400 / #1d9bf0，左内边距 16
 * ========================================================================== */

/*
 * 右栏列表条目（第 205 轮）
 *
 * 这条是本文件里真正生效的那份（components.css 里也有一份，
 * 但本文件后加载，一直覆盖它 —— 之前改错过一次）。
 *
 * 改动：
 *   ① 右内边距 40px → 16px。那 40px 是给「⋯」图标留的位，
 *      图标已从模板删除，留着只会让标题白白窄掉一截；
 *   ② cursor: pointer 保留 —— 整行确实可点了（<a> 的 ::after 铺满整行）；
 *   ③ 纵向 12 → 11px，六条省 12px。
 */
/*
 * 右栏列表条目：与目录用同一套「内嵌胶囊」行样式（第 209 轮）
 *
 * 目录已经改成左右内缩 8px 的胶囊，而这里还是通栏高亮 ——
 * 同一栏里两块内容用两种行样式，并排看着就是不齐。
 * 统一成同一套几何：左右各缩 8px、8px 圆角。
 */
.sg-rail-boxes .sg-rail__list > li {
    position: relative;
    margin-inline: 8px;
    /* 内边 8 + 外部内缩 8 = 16，与块标题左内边对齐 */
    padding: 11px 8px;
    border-radius: 8px;
    cursor: pointer;
}

.sg-rail-boxes .sg-rail__kicker {
    display: block;
    color: var(--sg-text-sub);
    font-size: 13px;
    font-weight: 400;
    line-height: 16px;
}

.sg-rail-boxes .sg-rail__list a {
    display: block;
    color: var(--sg-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    text-decoration: none;
}

/* hover 用下划线做反馈：整行可点，但视觉焦点落在标题上 */
.sg-rail-boxes .sg-rail__list > li:hover a {
    text-decoration: underline;
}

/* 盒底「显示更多」 */
.sg-rail-boxes .sg-rail__more {
    display: block;
    /* 与列表条目同一套几何：左右内缩 8px、8px 圆角（第 209 轮） */
    margin-inline: 8px;
    padding: 12px 8px;
    border-radius: 8px;
    border-block-start: 0;
    color: var(--sg-accent);
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    text-decoration: none;
    transition: background-color 100ms var(--sg-ease);
}

.sg-rail-boxes .sg-rail__more:hover {
    background: var(--sg-bg-sub);
}/* ==========================================================================
 * 29. 导航悬停胶囊（第 178 轮，X 实测结构）
 *
 * X 的结构（实测）：
 *
 *   <a>  259×58  x=88    ← 整行都是点击区，但**没有背景**
 *     └ div 126×50 x=88  ← 悬停胶囊，border-radius 9999
 *          ├ icon 26×26  x=100   （左内边距 12）
 *          └ text 40×24  x=146   （图标间距 20）
 *
 *   126 = 12（左内边距）+ 26（图标）+ 20（间距）+ 40（文字）+ 28（右内边距）
 *
 * 我之前把 hover 背景挂在 <a> 上，铺满 259 —— 胶囊变成了整行长条。
 * 正确做法：胶囊在内层 span 上，宽度 max-content。
 * ========================================================================== */

.sg-nav-link {
    display: flex;
    align-items: center;
    inline-size: 100%;
    max-inline-size: 100%;
    min-block-size: 58px;
    padding: 4px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--sg-text);
    font-family: inherit;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: none;
}

/* 整行不再有背景 */
.sg-nav-link:hover {
    background: transparent;
}

/* 悬停胶囊：包住图标 + 文字 */
.sg-nav-link__inner {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    inline-size: max-content;
    max-inline-size: 100%;
    block-size: 50px;
    padding: 0 28px 0 12px;
    border-radius: 9999px;
    background: transparent;
    transition: background-color 100ms var(--sg-ease);
}

.sg-nav-link:hover .sg-nav-link__inner {
    background: var(--sg-bg-soft);
}

/* 图标：26px，不填充不描边由状态决定 */
.sg-nav-link svg {
    flex: 0 0 auto;
    inline-size: 26px;
    block-size: 26px;
    padding: 0;
    margin: 0;
    border-radius: 0;
    background: none;
}

.sg-nav-link__text {
    padding-inline-end: 0;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
}

/* 当前项：文字 700、图标实心 */
.sg-nav-link.is-active,
.sg-nav-link[aria-current="page"] {
    font-weight: 700;
}

.sg-nav-link.is-active .sg-nav-link__inner,
.sg-nav-link[aria-current="page"] .sg-nav-link__inner {
    font-weight: 700;
}

.sg-nav-link.is-active .sg-nav-link__text,
.sg-nav-link[aria-current="page"] .sg-nav-link__text {
    font-weight: 700;
}

.sg-nav-link.is-active svg,
.sg-nav-link[aria-current="page"] svg {
    fill: currentColor;
    stroke: none;
}

.sg-nav-link:not(.is-active):not([aria-current="page"]) svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
}

/* 折叠态（图标列）下不要胶囊内边距 */
@media (max-width: 1264.98px) {
    .sg-nav-link__inner {
        padding: 0;
        block-size: 50px;
        inline-size: 50px;
        justify-content: center;
    }

    .sg-nav-link__text {
        display: none;
    }
}
/* ==========================================================================
 * 29. 导航悬停胶囊（第 178 轮，X 实测结构）
 *
 * X 的结构（实测）：
 *
 *   <a>  259×58  x=88    ← 整行都是点击区，但**没有背景**
 *     └ div 126×50 x=88  ← 悬停胶囊，border-radius 9999
 *          ├ icon 26×26  x=100   （左内边距 12）
 *          └ text 40×24  x=146   （图标间距 20）
 *
 *   126 = 12（左内边距）+ 26（图标）+ 20（间距）+ 40（文字）+ 28（右内边距）
 *
 * 我之前把 hover 背景挂在 <a> 上，铺满 259 —— 胶囊变成了整行长条。
 * 正确做法：胶囊在内层 span 上，宽度 max-content。
 * ========================================================================== */

.sg-nav-link {
    display: flex;
    align-items: center;
    inline-size: 100%;
    max-inline-size: 100%;
    min-block-size: 58px;
    padding: 4px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--sg-text);
    font-family: inherit;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: none;
}

/* 整行不再有背景 */
.sg-nav-link:hover {
    background: transparent;
}

/* 悬停胶囊：包住图标 + 文字 */
.sg-nav-link__inner {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    inline-size: max-content;
    max-inline-size: 100%;
    block-size: 50px;
    padding: 0 28px 0 12px;
    border-radius: 9999px;
    background: transparent;
    transition: background-color 100ms var(--sg-ease);
}

.sg-nav-link:hover .sg-nav-link__inner {
    background: var(--sg-bg-soft);
}

/* 图标：26px，不填充不描边由状态决定 */
.sg-nav-link svg {
    flex: 0 0 auto;
    inline-size: 26px;
    block-size: 26px;
    padding: 0;
    margin: 0;
    border-radius: 0;
    background: none;
}

.sg-nav-link__text {
    padding-inline-end: 0;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
}

/* 当前项：文字 700、图标实心 */
.sg-nav-link.is-active,
.sg-nav-link[aria-current="page"] {
    font-weight: 700;
}

.sg-nav-link.is-active .sg-nav-link__inner,
.sg-nav-link[aria-current="page"] .sg-nav-link__inner {
    font-weight: 700;
}

.sg-nav-link.is-active .sg-nav-link__text,
.sg-nav-link[aria-current="page"] .sg-nav-link__text {
    font-weight: 700;
}

.sg-nav-link.is-active svg,
.sg-nav-link[aria-current="page"] svg {
    fill: currentColor;
    stroke: none;
}

.sg-nav-link:not(.is-active):not([aria-current="page"]) svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
}

/* 折叠态（图标列）下不要胶囊内边距 */
@media (max-width: 1264.98px) {
    .sg-nav-link__inner {
        padding: 0;
        block-size: 50px;
        inline-size: 50px;
        justify-content: center;
    }

    .sg-nav-link__text {
        display: none;
    }
}

/*
 * 抽屉态修正（第 178c）
 *
 * 上面 @media (max-width:1264.98px) 把左栏定成 88px 图标列，
 * 它排在 components.css 的抽屉规则之后，把抽屉也覆盖了 ——
 * 结果 390 手机宽度下左栏仍然固定显示 88px，而不是收进抽屉。
 * 这里在最后把 ≤1059 的抽屉行为重新声明一遍。
 */
@media (max-width: 1059.98px) {
    .sg-nav-pane {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        z-index: 200;
        flex: 0 0 auto;
        inline-size: 280px;
        max-inline-size: 85vw;
        min-inline-size: 0;
        block-size: 100vh;
        padding: 0 12px;
        overflow-y: auto;
        background: var(--sg-bg);
        box-shadow: 0 0 20px rgb(101 119 134 / 25%);
        transform: translateX(-100%);
        transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
        align-items: stretch;
    }

    .sg-nav-pane__inner {
        inline-size: 100%;
        align-items: stretch;
    }

    /* 抽屉里文字要显示出来 */
    .sg-nav-link__inner {
        inline-size: max-content;
        max-inline-size: 100%;
        padding: 0 24px 0 12px;
        justify-content: flex-start;
    }

    .sg-nav-link__text {
        display: block;
    }

    body.sg-drawer-open .sg-nav-pane {
        transform: translateX(0);
    }
}
/* ==========================================================================
 * 30. 搜索框精确对齐（第 179 轮，X 实测）
 *
 * X：
 *   pill   x=985 w=350 h=43  bg #fff  border 1px #cfd9de  radius 9999  **padding 0**
 *   icon   x=986（贴左 1px）  28×16  实心 fill rgb(83,100,113)
 *   input  x=1014（距 pill 左 29）  w=319 h=40
 *          font-size **14px** / line-height 16px / padding 0 16px 0 4px
 *
 * 我：padding 0 8 0 16 → 图标被推进 16px，输入框 15px、起始 1027
 * ========================================================================== */

.sg-topsearch {
    display: flex;
    align-items: center;
    gap: 0;
    inline-size: 100%;
    block-size: 43px;
    padding: 0;
    border: 1px solid var(--sg-border-strong);
    border-radius: 9999px;
    background: var(--sg-bg);
}

/* 图标：贴左边缘，占据 29px 槽位，使输入框从 +29 开始 */
.sg-topsearch__icon {
    display: grid;
    place-items: center;
    flex: 0 0 29px;
    inline-size: 29px;
    block-size: 40px;
    margin: 0;
    color: var(--sg-text-sub);
}

.sg-topsearch__icon svg {
    inline-size: 17px;
    block-size: 17px;
}

.sg-topsearch__input {
    flex: 1 1 auto;
    min-inline-size: 0;
    padding: 0 16px 0 0;
    border: 0;
    background: transparent;
    color: var(--sg-text);
    font-family: inherit;
    font-size: 14px;
    line-height: 16px;
    appearance: none;
}

.sg-topsearch__input::placeholder {
    color: var(--sg-text-sub);
    opacity: 1;
}

/*
 * 搜索图标贴左（第 179c）
 *
 * X 的图标 svg 盒子在 x=986（药丸左边缘 +1），我居中在 29px 槽里 → 992。
 * 改成左对齐，差 6px。
 */
.sg-topsearch__icon {
    display: grid;
    place-items: center start;
    flex: 0 0 29px;
    inline-size: 29px;
    block-size: 40px;
    padding-inline-start: 1px;
}
/* ==========================================================================
 * 32. 搜索框：图标改实心 + 聚焦态（第 182 轮，X 实测）
 *
 * X 实测
 *   默认  pill 985/7/350/43  border 0.667px #cfd9de  bg #fff
 *          icon x=986 28×16，**fill rgb(83,100,113)、stroke none**（实心字形）
 *          input x=1014 14px/16px
 *   聚焦  pill h **44**（44 = 内容 40 + 边框 2×2）
 *          border **2px solid rgb(29,155,240)**
 *          icon x=987（内容内缩 1px）
 *          input x=1015
 *
 * 我原来：
 *   icon 是描边圆形（stroke 1.7），只有 17×17 —— 形状完全不对
 *   聚焦只改 border-color，宽度仍是 1px，颜色还是主题色（朱砂红）
 * ========================================================================== */

/* 图标换成实心放大镜（X 的原始 path，24×24 viewBox） */
.sg-topsearch__icon svg {
    inline-size: 17px;
    block-size: 17px;
    fill: currentColor;
    stroke: none;
}

/* 默认边框：1px 浅灰 */
.sg-topsearch {
    block-size: 43px;
    border: 1px solid var(--sg-border-strong);
    border-radius: 9999px;
    background: var(--sg-bg);
    /*
     * 不要过渡 border-width（第 195 轮）
     *
     * 聚焦时边框 1→2px 会让药丸高度 43→44，整行右栏跟着重排 ——
     * 一次聚焦触发一次 layout，是最典型的"看着卡一下"。
     * 改成内阴影描边：视觉厚度一样，但盒子尺寸不变。
     */
    transition: box-shadow var(--sg-dur-fast) var(--sg-ease), background-color var(--sg-dur-fast) var(--sg-ease);
}

/* 聚焦：边框加到 2px 主色，整体高度 +1（与 X 的 43 → 44 一致） */
.sg-topsearch:focus-within {
    block-size: 44px;
    border: 2px solid var(--sg-accent);
    background: var(--sg-bg);
}

/* 聚焦时图标右移 1px（边框变粗把内容推进去） */
.sg-topsearch:focus-within .sg-topsearch__icon {
    padding-inline-start: 2px;
}

/*
 * 搜索输入框不要自带 focus 描边（第 182b）
 *
 * 全局规则 `body.sg-body :focus-visible { outline: 2px solid var(--sg-accent) }`
 * 打到了 input 上 —— 聚焦时框里多出一圈蓝色矩形，X 没有这个。
 * X 的聚焦反馈只有「药丸边框加粗到 2px 并变蓝」，输入框本身无描边。
 */
.sg-topsearch__input:focus,
.sg-topsearch__input:focus-visible,
.sg-topsearch__input:active {
    outline: none;
    box-shadow: none;
}

/* 聚焦时占位文字保持灰色（X 的行为） */
.sg-topsearch:focus-within .sg-topsearch__input::placeholder {
    color: var(--sg-text-sub);
    opacity: 1;
}

/*
 * 搜索输入框去掉 focus 描边（第 182c）
 *
 * 上一版写 `.sg-topsearch__input:focus-visible`（0,2,0），
 * 但全局规则是 `body.sg-body :focus-visible`（0,2,1）—— 特异性更高，赢了。
 * 用 `body.sg-body .sg-topsearch__input:...`（0,3,1）压过去。
 */
body.sg-body .sg-topsearch__input:focus,
body.sg-body .sg-topsearch__input:focus-visible,
body.sg-body .sg-topsearch__input:active,
body.sg-body .sg-topsearch .sg-topsearch__input {
    outline: 0 none;
    outline-offset: 0;
    box-shadow: none;
    border: 0;
}

/* 聚焦时占位仍是灰色 */
body.sg-body .sg-topsearch:focus-within .sg-topsearch__input::placeholder {
    color: var(--sg-text-sub);
    opacity: 1;
}

/*
 * 搜索占位文字与图标微调（第 182d，实测）
 *
 * X 的 ::placeholder 是 rgb(117,117,117) = #757575（浏览器默认值，X 没改）
 * 我写的是 var(--sg-text-sub) = #536471，更深，视觉上显得字更大更粗。
 *
 * 图标：X 的 svg 盒子 28×16，24×24 viewBox 按 meet 缩放后实际字形 16×16；
 * 我给的 17×17 略大。
 */
.sg-topsearch__input::placeholder {
    color: #757575;
    opacity: 1;
}

.sg-topsearch:focus-within .sg-topsearch__input::placeholder {
    color: #757575;
}

.sg-topsearch__icon svg {
    inline-size: 16px;
    block-size: 16px;
}

/* 暗色下占位用 X 的暗色值 */
:root[data-sg-theme="dark"] .sg-topsearch__input::placeholder,
:root[data-sg-scheme="dark"] .sg-topsearch__input::placeholder {
    color: #8b98a5;
}
/* ==========================================================================
 * 33. 搜索框下拉面板 + 图标位置（第 183 轮，X 实测）
 *
 * X 点击搜索框后：
 *   药丸   边框变 2px 蓝，高 43→44
 *   面板   position:absolute
 *          起点 x=985（药丸左）、y=51（药丸底 +1）
 *          350×100，background #fff，border-radius **8px**
 *          box-shadow: rgba(101,119,134,.2) 0 0 15px 0,
 *                      rgba(101,119,134,.15) 0 0 3px 1px
 *   首行   padding 20px 12px 12px
 *   提示   15px / rgb(83,100,113) 居中
 *
 * 图标位置：
 *   X 的 svg 盒子 28 宽、字形 16 宽 → 居中后字形落在 x=992，输入框从 1014 开始
 *   我把图标左对齐在 29px 槽里 → 字形在 987，比 X 靠左 5px
 * ========================================================================== */

/* 图标：28px 槽内居中（字形落到 992） */
.sg-topsearch__icon {
    display: grid;
    place-items: center;
    flex: 0 0 28px;
    inline-size: 28px;
    block-size: 40px;
    padding: 0;
    color: var(--sg-text-sub);
}

/* 面板挂在 .sg-search-box 上（它本身是 sticky，已经是定位祖先） */
.sg-search-box {
    position: sticky;
    inset-block-start: 0;
    z-index: 6;
}

.sg-topsearch-panel {
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    display: block;
    block-size: 100px;
    overflow: hidden;
    border-radius: 8px;
    background: var(--sg-bg);
    box-shadow:
        0 0 15px 0 rgb(101 119 134 / 20%),
        0 0 3px 1px rgb(101 119 134 / 15%);
}

.sg-topsearch-panel[hidden] {
    display: none;
}

.sg-topsearch-panel__row {
    margin: 0;
    padding: 20px 12px 12px;
    color: var(--sg-text-sub);
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
}

/* 聚焦时图标右移 1px（边框 1→2 把内容推进去） */
.sg-topsearch:focus-within .sg-topsearch__icon {
    padding-inline-start: 1px;
}
/* ==========================================================================
 * 34. 搜索面板：真结果 + 阴影不被裁 + 行结构（第 184 轮）
 *
 * X 实测结构：
 *   面板 350 宽，y=51，白色，radius 8
 *   空态   高 100，一行 15px 灰提示居中（padding 20 12 12）
 *   有结果 高随内容增长（实测 667 = 3 + 64 + 64 + 1 + 9×65）
 *   建议行 64 高；结果行 65 高
 *   结果行 = 40×40 圆头像 + 标题 15/700 rgb(15,20,25) + 副行 15/400 rgb(83,100,113)
 * ========================================================================== */

/*
 * 阴影裁切修复
 *
 * X 的侧栏 overflow 是 visible，所以面板的双层阴影能溢出到中栏一侧。
 * 我的是 overflow-y: auto（滚动容器自带裁剪），左右两侧阴影被切掉。
 */
.sg-rail-pane {
    overflow: visible;
}

@media (max-width: 1264.98px) {
    .sg-rail-pane {
        overflow: visible;
    }
}

/* 面板：空态 100，有内容按行撑开 */
.sg-topsearch-panel {
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    z-index: 8;
    display: block;
    max-block-size: 70vh;
    overflow-y: auto;
    border-radius: 8px;
    background: var(--sg-bg);
    box-shadow:
        0 0 15px 0 rgb(101 119 134 / 20%),
        0 0 3px 1px rgb(101 119 134 / 15%);
}

.sg-topsearch-panel[hidden] {
    display: none;
}

/* 空态提示 */
.sg-topsearch-panel__row {
    margin: 0;
    padding: 20px 12px 12px;
    color: var(--sg-text-sub);
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
}

.sg-topsearch-panel__row[hidden] {
    display: none;
}

/* 结果列表 */
.sg-topsearch-panel__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sg-topsearch-panel__list[hidden] {
    display: none;
}

.sg-topsearch-panel__item {
    margin: 0;
    padding: 0;
    border-block-end: 1px solid var(--sg-border);
}

.sg-topsearch-panel__item:last-child {
    border-block-end: 0;
}

.sg-topsearch-panel__item > a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    min-block-size: 65px;
    color: inherit;
    text-decoration: none;
    transition: background-color 100ms var(--sg-ease);
}

.sg-topsearch-panel__item > a:hover {
    background: var(--sg-bg-sub);
}

/* 头像：40 圆，字母兜底 */
.sg-topsearch-panel__avatar {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    inline-size: 40px;
    block-size: 40px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--sg-border);
    color: var(--sg-text-sub);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}

.sg-topsearch-panel__text {
    display: block;
    min-inline-size: 0;
    line-height: 20px;
}

.sg-topsearch-panel__title {
    display: block;
    overflow: hidden;
    color: var(--sg-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sg-topsearch-panel__sub {
    display: block;
    overflow: hidden;
    color: var(--sg-text-sub);
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sg-topsearch-panel__empty {
    padding: 20px 12px;
    color: var(--sg-text-sub);
    font-size: 15px;
    line-height: 20px;
    text-align: center;
}

/*
 * 面板高度按内容走（第 184b）
 *
 * 第 183 轮写死了 block-size: 100px（空态正好），
 * 有结果时被卡在 100，列表溢出滚动。
 */
.sg-topsearch-panel {
    block-size: auto;
    max-block-size: 70vh;
}

/* 侧栏不裁剪阴影（覆盖 scroll 容器自带的 clip） */
.sg-rail-pane {
    overflow: visible;
}

/* 空态面板 100 高（X 实测：提示行下面还留一段空白） */
.sg-topsearch-panel:not([data-sg-mode]),
.sg-topsearch-panel[data-sg-mode="empty"] {
    min-block-size: 100px;
}

/* ==================================================================
 * 搜索框几何定稿（第 193 轮）
 *
 * 这条文件里 `.sg-topsearch` 被写过三次（734 / 1157 / 1243），
 * 其中 1157 那条把 `padding: 0` 打了上去，把前面 16px 的左内边距清掉，
 * 于是图标字形贴左边框只剩 7px，看着像被切掉一角。
 *
 * 下面这条在本文件末尾，优先级最高，专门把几何钉住：
 *   左内边距 12px → 图标 16px → 间距 8px → 输入框从 36px 开始
 * 只改内边距与图标尺寸，药丸外框（350×43 / 圆角 / 聚焦描边）不动。
 * ================================================================ */

.sg-topsearch {
    gap: 8px;
    padding-inline: 12px;
}

.sg-topsearch__icon {
    flex: 0 0 16px;
    inline-size: 16px;
    block-size: 16px;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0;
}

.sg-topsearch__icon svg {
    inline-size: 16px;
    block-size: 16px;
}

.sg-topsearch__input {
    padding-inline: 0;
}

/* ==================================================================
 * 搜索面板入场（第 196 轮）
 *
 * 面板靠 toggleAttribute('hidden') 开关 —— display: none 不参与过渡，
 * 所以点搜索框一直是「啪」一下弹出来。
 *
 * @starting-style 让元素从 display:none 变成渲染的那一刻有个起始状态，
 * 于是能过渡出「从上方 6px 落下 + 轻微放大」的入场感。
 * 关闭仍然是瞬时（hidden 直接生效），和 X 的下拉行为一致。
 *
 * 支持度：Chrome/Edge 117+、Safari 17.5+。老浏览器只是没有入场动画，
 * 面板照样正常显示与关闭，不影响功能。
 * ================================================================ */

.sg-topsearch-panel {
    transform-origin: top center;
    transition: opacity 160ms var(--sg-ease),
                transform 160ms var(--sg-ease);
}

@starting-style {
    .sg-topsearch-panel {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }
}

/* ==================================================================
 * 交互动效统一（第 210 轮）
 *
 * 量出来的情况：全站只有四处带过渡（目录、右栏列表、搜索框、操作行文字），
 * 而这四处是**硬切**的：
 *   · 导航图标圈      hover 换背景，无过渡
 *   · 分页按钮        hover 换背景，无过渡
 *   · 操作图标里的 svg  hover 换颜色 —— 过渡写在父级 <a> 上，
 *                        管不到 svg 自己的 color，所以图标是瞬间变色
 *   · 「显示更多」    hover 换背景，无过渡
 *
 * 这里统一补上。曲线用 --sg-ease（cubic-bezier(0.22,1,0.36,1)，即 easeOutQuint），
 * 时长 120ms：比 100ms 略缓，肉眼能感觉到「过去了」，但不会拖。
 *
 * 只过渡颜色类属性，不碰 layout —— 布局属性动画会掉帧。
 * ================================================================ */

.sg-nav-link svg,
.sg-nav-account__more,
.sg-pager a,
.sg-rail__more,
.sg-act svg,
.sg-act span {
    transition:
        background-color 120ms var(--sg-ease),
        color 120ms var(--sg-ease),
        border-color 120ms var(--sg-ease),
        box-shadow 160ms var(--sg-ease);
}

/* ==================================================================
 * 1060~1264 居中（第 213 轮）
 *
 * 这一档右栏整列隐藏，外壳收成 88（图标栏）+ 600（正文列）= 688。
 *
 * 但文件里后面那条 @media (max-width:1264.98px) 把 .sg-shell 定成
 * max-inline-size:100% + margin-inline:0 —— 于是 688 的块贴在左边，
 * 1060 宽时右侧空出 372px，比正文列还宽，看着像布局没做完。
 *
 * 这条放在文件末尾，靠加载顺序压过上面那条（同优先级、后写者胜）。
 * 只在 1060 以上生效，更窄的宽度仍旧满宽，不影响手机端。
 * ================================================================ */
@media (min-width: 1024px) and (max-width: 1264.98px) {
    /*
     * 先把外壳放开（抵消上面那条 max-inline-size:100% / margin-inline:0），
     * 然后只让正文列在「图标栏右侧的剩余空间」里居中 ——
     * 图标栏留在视口左缘不动。
     *
     * 一开始我把整个 688 的外壳居中，结果图标栏也漂到了页面中间，
     * 悬浮在那儿没有落点，比原来的右侧空白更怪。
     */
    .sg-shell {
        max-inline-size: none;
        margin-inline: 0;
    }

    .sg-main {
        margin-inline: auto;
    }
}

/* ≤699：外壳变成 block 之后，正文列若被 600 上限卡住会靠左（第 214 轮）
 * 实测 699px 时 main 是 [0,600]，右侧空 99px。居中一句兜住；
 * 若正文列本来就是满宽，auto 边距不产生任何效果。 */
@media (max-width: 699.98px) {
    /*
     * 这一档正文列被 600 上限卡住，宽度小于视口时靠左（实测 699 时 左0 / 右99）。
     *
     * 先试过 margin-inline: auto —— 实测在这个元素上不生效（计算值始终 0），
     * 机理没查清。改用显式计算：剩余空间的一半作为左内边；
     * 正文列本来就满宽时（如 390 / 600）算出负数，用 max(0px, …) 兜成 0。
     */
    .sg-main {
        margin-inline-start: max(0px, calc((100% - 600px) / 2));
    }
}

/* ==================================================================
 * 站点信息压成一行（第 223 轮）
 *
 * 原来三行（文章 / 评论 / 天数），块高 169px —— 三个数字占掉这么多高度，
 * 在文章页上正好把右栏顶出可视区。
 *
 * 改成一行三项，保留 <ul>/<li> 的列表语义（屏幕阅读器仍能按列表读），
 * 只把排版压平：li 变成行内 flex，去掉块级的上下内边与悬停底色。
 * ================================================================ */
.sg-rail-boxes .sg-rail__list--stats {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 16px;
    margin: 0;
    padding: 6px 16px 14px;
    list-style: none;
}

.sg-rail-boxes .sg-rail__list--stats > li {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    cursor: default;
}

.sg-rail-boxes .sg-rail__list--stats > li:hover {
    background: none;
}

/* ==========================================================================
 * 42. 右栏（第 248 轮：换形态）
 *
 * 前四版一直在同一张图上调 padding / radius / 颜色，所以看来看去是同一堆小字。
 * 这一版动的是形态：卡片改成清晰边界、子项不再是灰字墙、站点信息压成脚注、
 * 最近更新去掉日期列。取值依据仍来自 Butterfly（blog.zhheo.com 实测）
 * 与 AnZhiYu（anzhiyu-c/hexo-theme-anzhiyu 的 aside.styl），但不再逐像素抄，
 * 因为它们的美感来自「内容有主次」，不是来自某几个数值。
 * ========================================================================== */

/* ---------------------------------------------------------- 42.1 卡片 */
.sg-rail-boxes {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 12px;
    padding: 2px 0 0;
    /*
     * components.css 里还留着一条老的 `.sg-rail-boxes { min-block-size: 0;
     * overflow-y: auto }` —— 只覆盖 flex 是不够的：它仍然是「可收缩的滚动容器」，
     * 会把内容裁掉几像素（实测 clientH 840 / scrollH 846，差 6px），
     * 于是 railscroll 判定「有溢出」，给整块加上底部渐隐遮罩，
     * 最后一张卡的下沿被压暗。这里显式交还给内容：不收缩、不裁切。
     */
    min-block-size: auto;
    overflow: visible;
}

/*
 * 白底 + 1px 边框，不用阴影。
 * 前四版用柔阴影，在白色页面上几乎看不见 —— 卡片轮廓要靠猜，
 * 整栏就像一段没有排版的文字。一条 1px 的浅灰线反而把边界说清楚。
 * （边框与阴影不同时上，那是幽灵卡片。）
 */
.sg-rail-boxes .sg-rail__block {
    position: relative;
    display: block;
    margin: 0;
    padding: 14px 0 8px;
    background: var(--sg-bg);
    /*
     * 边框统一成 --sg-border-strong（#cfd9de）：
     * 搜索框本来就用它，而卡片用 --sg-border（#eff3f4）——
     * 同一栏里两个框用两种强度的边，看着像没对齐。第 250 轮统一。
     */
    border: 1px solid var(--sg-border-strong);
    border-radius: 12px;
    box-shadow: none;
}

/* 暗色：同样的边框在深色下已经够，只是底色换面板色 */
:root[data-sg-theme="dark"] .sg-rail-boxes .sg-rail__block,
:root[data-sg-scheme="dark"] .sg-rail-boxes .sg-rail__block {
    background: var(--sg-bg-sub);
}

/* ---------------------------------------------------------- 42.2 标题 */
/*
 * 标题退成「块标签」：12px/600 次级灰、字距 0.04em。
 * 内容（15px 正文色）比标签大 —— 这是层级的关键：
 * 反过来写（标题 16/700 + 内容 13）就是前四版的样子，满眼都是标题。
 */
.sg-rail-boxes .sg-rail__title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    padding: 0 16px;
    border: 0;
    color: var(--sg-text-sub);
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: 0.04em;
}

/* components.css 里 `.sg-rail__title svg { display: none }` 还留着 */
.sg-rail-boxes .sg-rail__title > svg {
    display: block;
    flex: 0 0 auto;
    inline-size: 14px;
    block-size: 14px;
    color: var(--sg-text-sub);
}

.sg-rail-boxes .sg-rail__title > span {
    flex: 1 1 auto;
    min-inline-size: 0;
}

/*
 * 站点信息不再占一张卡片（第 256 轮）
 *
 * 它只有一行字（文章 6 · 评论 1 · 天数 371），做成 73px 的卡片夹在两张大卡下面，
 * 看着像一只没装满的盒子。改成不描边、不铺底的一行脚注，紧贴落款上方 ——
 * 位置、字号、颜色都说明它本来就是脚注。
 */
.sg-rail-boxes .sg-rail__block[data-sg-block="stats"] {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

/*
 * 「站点信息」这个标签在脚注形态下是多余的：一行「文章 6 · 评论 1 · 天数 371」
 * 自己说明了自己，上面再顶一个块标题反而像两个标题叠在一起。
 * 但它仍是这一段的标题（读屏器靠它把这段读成有名字的区域），所以只做视觉隐藏，
 * 不 display:none。
 */
.sg-rail-boxes .sg-rail__block[data-sg-block="stats"] .sg-rail__title {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------- 42.3 通栏行 */
.sg-rail-boxes .sg-rail__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sg-rail-boxes .sg-rail__list > li {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
    cursor: default;
}

.sg-rail-boxes .sg-rail__list > li::marker {
    content: none;
}

/*
 * 行：15px / 行高 22 / 纵向 7px → 一行 36px。
 * 通栏（左右 16px 内缩），底色能铺满整张卡片。
 */
.sg-rail-boxes .sg-rail__list a {
    display: flex;
    /* 有 52px 缩略图，改为顶对齐 */
    align-items: center;
    gap: 10px;
    padding: 7px 16px;
    border-radius: 0;
    color: var(--sg-text);
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    transition: background-color var(--sg-dur-fast) var(--sg-ease),
                color var(--sg-dur-fast) var(--sg-ease);
}

/*
 * 悬停只让「标题」变主色并加下划线（第 255 轮强制 hover 截图发现）
 *
 * 原来把 color 和 text-decoration 挂在 <a> 上，而 <time> 在 <a> 里面 ——
 * 于是日期也跟着变蓝、也跟着划线，看着像日期也是个链接。
 * 而且 text-decoration 会往下传播，子元素写 none 也去不掉，
 * 所以改成：<a> 自身不变色不划线，效果挂在标题 span 上。
 */
.sg-rail-boxes .sg-rail__list a:hover {
    background: var(--sg-bg-soft);
    color: var(--sg-text);
    text-decoration: none;
}

.sg-rail-boxes .sg-rail__list a:hover .sg-rail__entry {
    color: var(--sg-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.sg-rail-boxes .sg-rail__list a:hover .sg-rail__date {
    color: var(--sg-text-sub);
}

/*
 * 缩略图（第 250 轮）
 *
 * Template::cover 输出的是 400×104 的横条，preserveAspectRatio=slice
 * 会按宽度铺满再裁上下；缩到 52×52 的方框里剩下中间一段抽象图形，
 * 每篇颜色与母题都不同 —— 这一栏因此有了色块，不再是一整片灰字。
 */
.sg-rail-boxes .sg-rail__thumb {
    position: relative;
    display: block;
    flex: 0 0 52px;
    inline-size: 52px;
    block-size: 52px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--sg-bg-soft);
}

.sg-rail-boxes .sg-rail__thumb .sg-gen {
    display: block;
    /*
     * 100% / 100%，不加负边距（第 254 轮 2 倍截图发现的问题）：
     * 原来写的是 104×52 + margin-left:-26px，是按「横条比方框宽」推的；
     * 但别的规则把 svg 的宽度定成了 52，负边距于是把整张图推出方框左外 ——
     * 方块右边 26px 露出底色的空白，缩略图看着像被切了一半。
     * 现在尺寸交给方框，preserveAspectRatio=slice 自己按高度铺满再裁宽。
     */
    inline-size: 100%;
    block-size: 100%;
    margin-inline-start: 0;
}

.sg-rail-boxes .sg-rail__textcol {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-inline-size: 0;
    /*
     * 固定 58px = 两行标题 40 + 间距 2 + 日期 16。
     * 一开始写 56，第二行会被压掉 2px（实测第一行的「导图」被裁）。
     */
    block-size: 58px;
}

/* 两行标题：有缩略图时行高本来就不齐，干脆允许换行 */
.sg-rail-boxes .sg-rail__entry {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 14px;
    line-height: 20px;
}

/* 日期那行（缩略图版） */
.sg-rail-boxes .sg-rail__date {
    color: var(--sg-text-sub);
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}

/* 最近更新不再输出日期，样式留作兜底 */
.sg-rail-boxes .sg-rail__date {
    flex: 0 0 auto;
    color: var(--sg-text-sub);
    font-size: 11px;
    line-height: 22px;
    font-variant-numeric: tabular-nums;
}

.sg-rail-boxes .sg-rail__more {
    display: block;
    /*
     * 一条 1px 把「列表」和「动作」分开（第 257 轮）
     *
     * 原来它紧贴最后一行，视觉上像第六行内容；加一条通栏细线之后，
     * 它读作「这条列表的出口」，位置关系就清楚了。
     */
    margin: 4px 0 0;
    border-block-start: 1px solid var(--sg-border);
    padding: 9px 16px 7px;
    border: 0;
    border-radius: 0;
    color: var(--sg-accent);
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    text-decoration: none;
}

.sg-rail-boxes .sg-rail__more:hover {
    background: var(--sg-bg-soft);
    text-decoration: none;
}

/* ---------------------------------------------------------- 42.4 站点信息 */
/*
 * 三个 20px 大数字 → 一行 12px 脚注。
 * 「6 文章 1 评论 371 天数」在阅读栏里不是仪表盘，是脚注；
 * 把它做小，右栏就少了一块抢戏的东西。
 */
.sg-rail-boxes .sg-rail__list--stats {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 0;
    margin: 0;
    padding: 0 16px 4px;
    list-style: none;
}

.sg-rail-boxes .sg-rail__list--stats > li {
    display: inline-flex;
    /*
     * 不用 row-reverse：flex 反向后，`> li + li::before` 那个间隔点
     * 会被排到行尾去（实测显示成「6 文章1 评论 371 天数 ·」）。
     * 中文习惯本来就是「名称 数值」，DOM 顺序不动即可。
     */
    align-items: baseline;
    gap: 4px;
    margin: 0;
    padding: 0;
    color: var(--sg-text-sub);
    font-size: 12px;
    line-height: 20px;
}

/* 项之间用间隔点分开，不靠容器宽度 */
.sg-rail-boxes .sg-rail__list--stats > li + li::before {
    content: "·";
    margin: 0 6px;
    color: var(--sg-border-strong);
}

.sg-rail-boxes .sg-rail__list--stats .sg-rail__value {
    color: var(--sg-text);
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    font-variant-numeric: tabular-nums;
}

.sg-rail-boxes .sg-rail__list--stats .sg-rail__label {
    color: var(--sg-text-sub);
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
}

.sg-rail-boxes .sg-rail__list--siteinfo {
    padding: 0 0 4px;
}

.sg-rail-boxes .sg-rail__list--siteinfo > li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 16px;
}

.sg-rail-boxes .sg-rail__label {
    color: var(--sg-text-sub);
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
}

.sg-rail-boxes .sg-rail__value {
    color: var(--sg-text);
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    font-variant-numeric: tabular-nums;
}

.sg-rail-boxes .sg-rail__text {
    margin: 0;
    padding: 0 16px;
    color: var(--sg-text-sub);
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
}

/*
 * 分类项的计数靠右（第 265 轮）
 *
 * `renderRailCategory` 输出 `<a>名称<span class="sg-rail__count">N</span></a>`，
 * 而 `.sg-rail__list a` 是 flex —— 文本节点变成匿名 flex 项，计数紧跟其后，
 * 实测右边缘离行右边缘还有 256px，看着像「名称后面粘了个数字」而不是目录式的页码。
 * 给计数 auto 左外边距，它就被推到行尾。
 */
.sg-rail-boxes .sg-rail__list > li > a > .sg-rail__count {
    flex: 0 0 auto;
    margin-inline-start: auto;
}

/* ---------------------------------------------------------- 42.5 标签 */
.sg-rail-boxes .sg-rail__list--tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    padding: 4px 16px 8px;
}

.sg-rail-boxes .sg-rail__list--tags > li {
    padding: 0;
}

.sg-rail-boxes .sg-rail__list--tags a {
    display: inline-flex;
    gap: 4px;
    padding: 4px 11px;
    border-radius: 9999px;
    background: var(--sg-bg-soft);
    color: var(--sg-text);
    font-size: 13px;
    line-height: 20px;
}

.sg-rail-boxes .sg-rail__list--tags a:hover {
    background: var(--sg-bg-sub);
    color: var(--sg-accent);
}

.sg-rail-boxes .sg-rail__list--tags > li:hover {
    background: transparent;
}

.sg-rail-boxes .sg-rail__count {
    margin: 0;
    color: var(--sg-text-sub);
    font-size: 12px;
    font-weight: 400;
}

/* ---------------------------------------------------------- 42.6 落款 */
.sg-rail-foot {
    margin-block-start: 2px;
    padding: 8px 16px 18px;
    border: 0;
    color: var(--sg-text-sub);
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 0.01em;
}

.sg-rail-foot a {
    margin-inline-end: 10px;
    color: var(--sg-text-sub);
    font-size: 12px;
    text-decoration: none;
    transition: color var(--sg-dur-fast) var(--sg-ease);
}

.sg-rail-foot a:hover {
    color: var(--sg-accent);
}

/* ---------------------------------------------------------- 42.6b 搜索下拉 */
/*
 * 下拉面板原来用 `0 0 15px rgba(101,119,134,.2)` —— 四面等量的光晕，
 * 在白底上几乎看不出边界，面板像是把下面的卡片「切」了一刀。
 * 改成向下偏移的两层投影：面板浮在卡片之上这件事才成立。
 * 圆角也从 8 提到 12，与卡片同一档。
 */
.sg-search-box .sg-topsearch-panel:not([hidden]) {
    border-radius: 12px;
    /*
     * 投影用的是亮色墨色 rgb(15 20 25)。暗色下等于「黑在近黑上」——
     * 下拉面板的悬浮感完全消失。所以暗色改给一条边框 + 更强的黑投影，
     * 与卡片的处理方式保持一致（亮色靠投影，暗色靠边框）。
     */
    box-shadow: 0 12px 28px -10px rgb(15 20 25 / 22%),
                0 2px 6px rgb(15 20 25 / 6%);
}

:root[data-sg-theme="dark"] .sg-search-box .sg-topsearch-panel:not([hidden]),
:root[data-sg-scheme="dark"] .sg-search-box .sg-topsearch-panel:not([hidden]) {
    border: 1px solid var(--sg-border);
    box-shadow: 0 14px 32px -12px rgb(0 0 0 / 70%),
                0 2px 8px rgb(0 0 0 / 40%);
}

/* ---------------------------------------------------------- 42.6c 无 JS 时藏起折叠钮 */
/*
 * 折叠箭头与子项数是服务端输出的，但行为要靠 JS 绑定
 * （ui.js 绑好之后会给 nav 加 data-sg-toc-foldable="1"）。
 * 关掉 JS 时它们就在页面上、点了没反应 —— 正是产品文档里
 * 「看着能点其实不能」那一类。这里用属性选择器把它们收起来：
 * 没有 JS 时目录仍然全展开可读，有 JS 才出现折叠控件。
 */
.sg-toc .sg-toc__fold,
.sg-toc .sg-toc__count {
    display: none;
}

.sg-toc[data-sg-toc-foldable] .sg-toc__fold {
    display: inline-grid;
}

.sg-toc[data-sg-toc-foldable] .sg-toc__item[data-sg-toc-open="0"] > .sg-toc__row > .sg-toc__count {
    display: block;
}

/* ---------------------------------------------------------- 42.7 目录 */
/*
 * 照 blog.anheyu.com 现版（CDP 实测）：
 *   卡片     #fff + 1px solid rgb(227,232,247) + radius 12      → 用 --sg-border-strong
 *   容器     内部滚动，左边留 4px 给指示条
 *   一级行   14.5px/21.6  padding 8px 12px 8px 22px  radius 8
 *   二级行   13.5px/20.4  padding 8px 12px 8px 34px
 *   文字色   统一次级灰；当前项 5% 主色淡底 + 正文色 + 600 + radius 8
 *   指示条   4×18、radius 4、主色实心、贴着左缘随当前项滑动
 */
.sg-toc {
    border-color: var(--sg-border-strong);
}

/* 滚动容器：position: relative 是给指示条做定位基准的 */
.sg-toc .sg-toc__body {
    position: relative;
    /*
     * 目录的高度上限（第 258 轮）
     *
     * 原来写死 `100vh - 220px`：1000px 高的窗口能长到 780 ——
     * 目录一旦真的长起来，会把「最近更新」整块顶出视口，读者要滚右栏才看得到。
     * 改成 clamp(240, 100vh-560, 780)：
     *   1000px 窗口 → 440（当前内容 306，不触发滚动）
     *    800px 窗口 → 240（下限，目录仍可用，下面两块还在）
     * 目录再长也只在框内滚，不会把别的块挤走。
     */
    max-block-size: clamp(240px, calc(100vh - 600px), 760px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    /*
     * 不再留通道：指示条改到行自己的左内边里（见下）。
     * 之前这里 10px + 行内 22px = 32，而卡片标题是 16+14+7=37，
     * 于是目录文字比标题左 4px（2 倍截图量出来的）。
     */
    padding-inline-start: 0;
}

.sg-toc .sg-toc__body::-webkit-scrollbar {
    inline-size: 0;
    block-size: 0;
    display: none;
}

/* 滑动指示条 */
.sg-toc__indicator {
    position: absolute;
    inset-inline-start: 6px;
    inset-block-start: 0;
    /*
     * z-index: 1 是必须的（第 254 轮 2 倍截图发现）：
     * 指示条是 body 的绝对子元素、写在 <ol> 之前；每个 li 也都是 position: relative，
     * 同属「定位层」，绘制顺序按 DOM —— 后出现的 li（带淡主色底）会盖住指示条。
     * 1 倍截图里它正好落在行的淡底外面所以看得见，挪进 6px 之后就被盖没了。
     */
    z-index: 1;
    inline-size: 4px;
    block-size: 18px;
    border-radius: 4px;
    background: var(--sg-accent);
    /* 只有 top 参与动画；用主题的 ease-out，不弹 */
    transition: top 260ms var(--sg-ease-out), opacity 160ms var(--sg-ease);
    pointer-events: none;
}

.sg-toc__indicator[hidden] {
    display: block;
    opacity: 0;
}

.sg-toc__list,
.sg-toc__sub {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sg-toc__item {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sg-toc__item::marker {
    content: none;
}

.sg-toc__row {
    position: relative;
    display: block;
}

/* 一级行 */
.sg-toc__link {
    display: block;
    margin: 1px 0;
    /* 37 = 16（卡片内边）+ 14（图标列）+ 7（间距）：与卡片标题文字同一条竖线 */
    padding: 8px 30px 8px 37px;
    border-radius: 8px;
    color: var(--sg-text-sub);
    font-size: 14.5px;
    font-weight: 400;
    line-height: 21.5px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color var(--sg-dur-fast) var(--sg-ease),
                color var(--sg-dur-fast) var(--sg-ease);
}

.sg-toc__link:hover {
    background: var(--sg-bg-soft);
    color: var(--sg-text);
}

.sg-toc__list > .sg-toc__item > .sg-toc__row > .sg-toc__link {
    color: var(--sg-text-sub);
    font-weight: 500;
}

/*
 * 当前项：主色淡底 + 正文色 + 600 + 8px 圆角。
 * 参照物用「品牌色字」，本站主色是亮蓝（对白底 4.30:1），
 * 14.5px 够不到 4.5 —— 所以字留正文色，颜色交给淡底和左侧指示条。
 */
.sg-toc__link.is-active,
.sg-toc__link.is-active:hover,
.sg-toc__list > .sg-toc__item > .sg-toc__row > .sg-toc__link.is-active,
.sg-toc__list > .sg-toc__item > .sg-toc__row > .sg-toc__link.is-active:hover {
    background: var(--sg-accent-soft);
    color: var(--sg-text);
    font-weight: 600;
}

/* 二级行：缩进到 34px，字号降 1px */
.sg-toc__sub {
    margin: 0;
    padding: 0;
}

/*
 * 二级行的缩进要压过 components.css 里那条 (0,3,0) 的老规则：
 *   `.sg-toc__item[data-sg-toc-level="3"] .sg-toc__link { padding-inline-start: 24px }`
 * 它只改左内边，所以二级行实际缩进是 24px —— 比一级的 37px **还小**，
 * 视觉上子项比父项更靠左，层级是反的（实测：一级文字 x=1023、二级 x=1010）。
 * 这里用 (0,4,0) 的选择器把内边拿回来。
 */
.sg-toc__sub .sg-toc__item[data-sg-toc-level] > .sg-toc__link {
    padding: 7px 30px 7px 49px;
    color: var(--sg-text-sub);
    font-size: 13.5px;
    line-height: 20.5px;
}

.sg-toc__sub .sg-toc__link.is-active {
    background: var(--sg-accent-soft);
    color: var(--sg-text);
    font-weight: 600;
}

.sg-toc__link:focus-visible,
.sg-toc__fold:focus-visible {
    outline: 2px solid var(--sg-accent);
    outline-offset: -2px;
}

/*
 * 子项数量：只在收起时出现，紧挨箭头左侧。
 * 箭头是绝对定位，数量也是 —— 两者都不参与行内排版，
 * 所以展开/收起时文字不会横向跳动。
 */
.sg-toc__count {
    position: absolute;
    inset-inline-end: 30px;
    inset-block-start: 50%;
    display: none;
    margin-block-start: -9px;
    padding: 1px 6px;
    border-radius: 9999px;
    background: var(--sg-bg-soft);
    color: var(--sg-text-sub);
    font-size: 11px;
    font-weight: 500;
    line-height: 16px;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.sg-toc__item[data-sg-toc-open="0"] > .sg-toc__row > .sg-toc__count {
    display: block;
}

/*
 * 暗色下的两处补丁（第 252 轮，看截图发现的）
 *
 * ① 数量胶囊：亮色用 --sg-bg-soft（比白卡片深一档，看得出形状），
 *    暗色下 --sg-bg-soft 与卡片的 --sg-bg-sub 是同一个色（#16181c），
 *    胶囊就只剩一个数字、没有底 —— 暗色改用 --sg-bg（比卡片更深）。
 * ② 缩略图：暗色 token 是 hsl(hue 28% 19%)，在 #16181c 的卡片上几乎是黑的，
 *    四张排下来像四个暗块。这里把这一处的明度抬到 30%/24%，
 *    色相不变（仍然是每篇自己的颜色），但看得出是「一张图」。
 */
:root[data-sg-theme="dark"] .sg-toc__count,
:root[data-sg-scheme="dark"] .sg-toc__count {
    background: var(--sg-bg);
}

:root[data-sg-theme="dark"] .sg-rail-boxes .sg-rail__thumb .sg-gen,
:root[data-sg-scheme="dark"] .sg-rail-boxes .sg-rail__thumb .sg-gen {
    --sg-gen-from: hsl(var(--sg-gen-hue) 36% 30%);
    --sg-gen-to:   hsl(var(--sg-gen-hue2) 44% 24%);
}

/* 折叠箭头：绝对定位在行右端 */
.sg-toc__fold {
    position: absolute;
    inset-inline-end: 6px;
    inset-block-start: 50%;
    display: inline-grid;
    place-items: center;
    inline-size: 22px;
    block-size: 22px;
    margin: 0;
    margin-block-start: -11px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--sg-text-sub);
    opacity: 0.55;
    cursor: pointer;
    transition: opacity var(--sg-dur-fast) var(--sg-ease),
                color var(--sg-dur-fast) var(--sg-ease);
}

.sg-toc__fold:hover {
    opacity: 1;
    color: var(--sg-text);
}

.sg-toc__fold svg {
    transform: rotate(90deg);
    transition: transform 160ms var(--sg-ease-out);
}

.sg-toc__item[data-sg-toc-open="0"] > .sg-toc__row .sg-toc__fold svg {
    transform: rotate(0deg);
}

.sg-toc__item[data-sg-toc-open="0"] > .sg-toc__sub {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .sg-toc__indicator,
    .sg-toc__fold svg,
    .sg-toc__fold {
        transition: none;
    }
}

/* ==========================================================================
 * 44. 右栏容器收口（第 263 轮）
 *
 * components.css 里留着一条早期规则 `.sg-rail-boxes { flex: 1 1 auto;
 * min-block-size: 0; overflow-y: auto }`（右栏自己的滚动时代）。
 * 第 251 轮把落款改成跟随内容之后，这条规则仍然把容器压成
 * 「填满剩余空间」：容器 840px、内容 846px，差 6px ——
 * railscroll 判定有溢出，给整块加上 28px 的底部渐隐，
 * 最后一张卡的下沿被压暗，而页面上并没有可滚的东西。
 *
 * 这里用双类选择器 + 文件末尾双重保险：不收缩、不裁切、不内部滚动。
 * ========================================================================== */
.sg-rail-pane .sg-rail-boxes {
    flex: 0 0 auto;
    block-size: auto;
    min-block-size: 0;
    overflow: visible;
    /*
     * 间距只由 gap 表达。实测子项还带着一条老的
     * `.sg-rail__block + .sg-rail__block { margin-block-start: 16px }`，
     * 与 gap: 12 叠成 28px；而容器 scrollHeight 比 clientHeight 多出 6px，
     * railscroll 就判「有溢出」并加底部渐隐 —— 页面上根本没有可滚的东西。
     * 这里把 margin 归零、gap 改成 28，视觉间距不变，容器不再溢出。
     */
    gap: 28px;
}

/*
 * 必须用三类的选择器：老规则是
 * `.sg-rail-pane .sg-rail__block + .sg-rail__block { margin-block-start: 16px }`（0,3,0），
 * 两类的 `> *` 压不住它（实测 margin 仍是 16px，与 gap 叠成 44px）。
 */
.sg-rail-pane .sg-rail-boxes > .sg-rail__block {
    margin-block: 0;
}