/* ==========================================================================
   GitHub 个人页风格主题 - 主样式
   设计基准：GitHub Primer Design System
   亮色：canvas #ffffff / subtle #f6f8fa / border #d0d7de / fg #1f2328
   暗色：canvas #0d1117 / subtle #161b22 / border #30363d / fg #e6edf3
   ========================================================================== */

/* ---------- Design Tokens ---------- */
:root {
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    /* light (default) */
    --canvas-default: #ffffff;
    --canvas-subtle: #f6f8fa;
    --canvas-soft: #fbfcfd;
    --canvas-inset: #eff2f5;
    --border-default: #d0d7de;
    --border-muted: #d8dee4;
    --fg-default: #1f2328;
    --fg-muted: #59636e;
    --fg-subtle: #6e7781;
    --fg-onEmphasis: #ffffff;
    --accent-fg: #0969da;
    --accent-emphasis: #0969da;
    --accent-subtle: #ddf4ff;
    --success-fg: #1a7f37;
    --success-emphasis: #1f883d;
    --success-subtle: #dafbe1;
    --attention-subtle: #fff8c5;
    --attention-fg: #9a6700;
    --danger-fg: #d1242f;
    --header-bg: #010409;
    --header-fg: #f0f6fc;
    --header-search-bg: rgba(110, 118, 129, 0.4);
    --header-search-border: rgba(240, 246, 252, 0.125);
    --btn-bg: #f6f8fa;
    --btn-hover-bg: #f3f4f6;
    --btn-active-bg: #ebecf0;
    --btn-border: rgba(31, 35, 40, 0.15);
    --counter-bg: rgba(129, 139, 152, 0.12);
    --shadow-sm: 0 1px 0 rgba(31, 35, 40, 0.04);
    --shadow-md: 0 8px 24px rgba(140, 149, 159, 0.2);
    --shadow-xs: 0 1px 2px rgba(31, 35, 40, 0.06);
    --shadow-lift: 0 3px 8px rgba(140, 149, 159, 0.18);
    --ease-out: cubic-bezier(0.3, 0, 0.2, 1);
    --dur: 120ms;
    --focus-ring: rgba(9, 105, 218, 0.3);
    /* heatmap */
    --hm-l0: #ebedf0;
    --hm-l1: #9be9a8;
    --hm-l2: #40c463;
    --hm-l3: #30a142;
    --hm-l4: #216e39;
    --hm-cell-border: transparent;
    /* misc */
    --topic-bg: #ddf4ff;
    --topic-fg: #0969da;
    --topic-hover-bg: #0969da;
    --tab-underline: #fd8c73;
    --star-active: #eac54f;
    --overlay-bg: rgba(31, 35, 40, 0.5);
    --avatar-ring: rgba(31, 35, 40, 0.15) 0 0 0 1px;
    --selection-bg: #b6d7f7;
}

[data-theme="dark"] {
    --canvas-default: #0d1117;
    --canvas-subtle: #161b22;
    --canvas-soft: #10161d;
    --canvas-inset: #010409;
    --border-default: #30363d;
    --border-muted: #21262d;
    --fg-default: #e6edf3;
    --fg-muted: #8b949e;
    --fg-subtle: #6e7681;
    --fg-onEmphasis: #ffffff;
    --accent-fg: #58a6ff;
    --accent-emphasis: #1f6feb;
    --accent-subtle: rgba(56, 139, 253, 0.15);
    --success-fg: #3fb950;
    --success-emphasis: #238636;
    --success-subtle: rgba(46, 160, 67, 0.15);
    --attention-subtle: rgba(187, 128, 9, 0.15);
    --attention-fg: #d29922;
    --danger-fg: #f85149;
    --header-bg: #010409;
    --header-fg: #f0f6fc;
    --header-search-bg: rgba(110, 118, 129, 0.4);
    --header-search-border: rgba(240, 246, 252, 0.125);
    --btn-bg: #21262d;
    --btn-hover-bg: #30363d;
    --btn-active-bg: #282e33;
    --btn-border: rgba(240, 246, 252, 0.1);
    --counter-bg: rgba(110, 118, 129, 0.4);
    --shadow-sm: 0 0 transparent;
    --shadow-md: 0 8px 24px rgba(1, 4, 9, 0.7);
    --shadow-xs: 0 1px 2px rgba(1, 4, 9, 0.5);
    --shadow-lift: 0 3px 10px rgba(1, 4, 9, 0.5);
    --focus-ring: rgba(31, 111, 235, 0.4);
    --hm-l0: #161b22;
    --hm-l1: #0e4429;
    --hm-l2: #006d32;
    --hm-l3: #26a641;
    --hm-l4: #39d353;
    --hm-cell-border: rgba(240, 246, 252, 0.06);
    --topic-bg: rgba(56, 139, 253, 0.15);
    --topic-fg: #58a6ff;
    --topic-hover-bg: #1f6feb;
    --tab-underline: #fd8c73;
    --star-active: #e3b341;
    --overlay-bg: rgba(1, 4, 9, 0.6);
    --avatar-ring: rgba(240, 246, 252, 0.15) 0 0 0 1px;
    --selection-bg: rgba(56, 139, 253, 0.4);
}

/* ---------- Reset & Base ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

/* 文本选中色对齐 GitHub Primer（明暗双 token） */
::selection {
    background-color: var(--selection-bg);
    color: inherit;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    color: var(--fg-default);
    background-color: var(--canvas-default);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body > .gh-layout {
    flex: 1;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

/* 数字排版：计数器等宽对齐，避免跳动 */
.gh-counter,
.gh-stat-num,
#likeNum,
.gh-repos-count {
    font-variant-numeric: tabular-nums;
}

p {
    margin: 0;
}

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

a {
    color: var(--accent-fg);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

img {
    max-width: 100%;
    border-style: none;
}

button {
    font-family: inherit;
}

svg.gh-icon {
    flex-shrink: 0;
    vertical-align: text-bottom;
}

.gh-text-muted {
    color: var(--fg-muted);
}

.gh-ml-2 {
    margin-left: 8px;
}

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

/* Skip link：默认 sr-only，键盘聚焦时浮现于左上角（z-index 高于顶栏） */
.gh-skip-link {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.gh-skip-link:focus {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 200;
    width: auto;
    height: auto;
    margin: 0;
    padding: 8px 16px;
    clip: auto;
    clip-path: none;
    overflow: visible;
    font-size: 14px;
    color: #ffffff;
    background-color: var(--header-bg);
    border: 1px solid var(--border-default);
    border-radius: 6px;
    outline: 2px solid var(--accent-fg);
    outline-offset: 2px;
    text-decoration: none;
}

/* 锚点跳转补偿：跳过 sticky 顶栏遮挡 */
#gh-main {
    scroll-margin-top: 80px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* 明暗切换过渡：JS 切换 data-theme 瞬间挂 gh-theme-anim 类，
   仅过渡底/边/文字色，220ms 后移除，避免整页瞬闪 */
@media (prefers-reduced-motion: no-preference) {
    html.gh-theme-anim,
    html.gh-theme-anim *,
    html.gh-theme-anim *::before,
    html.gh-theme-anim *::after {
        transition: background-color 220ms ease,
                    border-color 220ms ease,
                    color 220ms ease,
                    fill 220ms ease !important;
    }
}

/* ---------- Header（GitHub 黑色顶栏） ---------- */
.gh-header {
    background-color: var(--header-bg);
    color: var(--header-fg);
    position: sticky;
    top: 0;
    z-index: 20;
}

.gh-header-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.gh-header-toggle {
    display: none;
    background: none;
    border: 0;
    color: var(--header-fg);
    padding: 6px;
    cursor: pointer;
    border-radius: 6px;
}

.gh-logo {
    color: var(--header-fg);
    display: inline-flex;
    flex-shrink: 0;
}

.gh-logo:hover {
    color: rgba(240, 246, 252, 0.7);
    text-decoration: none;
}

/* 自定义品牌图标：明/暗两套图随 data-theme 切换 */
.gh-brand-img {
    vertical-align: middle;
    flex-shrink: 0;
}

.gh-brand-dark {
    display: none;
}

[data-theme="dark"] .gh-brand-light.gh-brand-pair {
    display: none;
}

[data-theme="dark"] .gh-brand-dark {
    display: inline-block;
}

/* 页脚/信息页的自定义图标套圆形底，复刻内置 GitHub 圆标的观感 */
.gh-footer-logo .gh-brand-img,
.gh-msg-logo .gh-brand-img {
    border-radius: 50%;
    background-color: var(--canvas-default);
    border: 1px solid var(--border-default);
}

.gh-header-search {
    flex: 0 1 264px;
    position: relative;
}

/* v2.0.0：顶栏搜索框右侧 / 快捷键提示（GitHub 签名细节）。
   聚焦或已输入时隐藏（纯 CSS 兄弟选择器）；指针事件穿透 */
.gh-search-kbd {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    padding: 2px 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.4;
    color: #7d8590;
    border: 1px solid var(--header-search-border);
    border-radius: 4px;
    pointer-events: none;
}

.gh-header-search .gh-search-input:focus ~ .gh-search-kbd,
.gh-header-search .gh-search-input:not(:placeholder-shown) ~ .gh-search-kbd {
    display: none;
}

.gh-header-search .gh-search-input {
    width: 100%;
    background-color: var(--header-search-bg);
    border: 1px solid var(--header-search-border);
    color: var(--header-fg);
    font-size: 14px;
    line-height: 20px;
    padding: 5px 30px 5px 12px;
    border-radius: 6px;
}

.gh-header-search .gh-search-input::placeholder {
    color: #7d8590;
}

.gh-header-search .gh-search-input:focus {
    background-color: var(--canvas-inset);
    border-color: var(--accent-emphasis);
    box-shadow: none;
    outline: none;
    color: var(--fg-default);
}

.gh-header-search .gh-search-input:focus::placeholder {
    color: var(--fg-subtle);
}

.gh-header-nav {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.gh-header-nav::-webkit-scrollbar {
    display: none;
}

.gh-nav-link {
    color: var(--header-fg);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.gh-nav-link:hover {
    color: rgba(240, 246, 252, 0.7);
    text-decoration: none;
}

.gh-nav-link.gh-nav-active {
    color: var(--header-fg);
}

.gh-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}

.gh-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 6px;
    color: var(--header-fg);
    cursor: pointer;
    transition: background-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

.gh-icon-btn:hover {
    background-color: rgba(110, 118, 129, 0.4);
    color: var(--header-fg);
    text-decoration: none;
}

.gh-icon-btn:active {
    transform: scale(0.92);
}

/* v2.3.0 F2：主题三态切换图标——显示当前模式图标（亮色=sun / 暗色=moon / 跟随系统=desktop） */
.gh-theme-sun,
.gh-theme-moon,
.gh-theme-desktop {
    display: none;
}

[data-theme-mode="light"] .gh-theme-sun,
[data-theme-mode="dark"] .gh-theme-moon,
[data-theme-mode="auto"] .gh-theme-desktop {
    display: block;
}

/* v2.3.0 F6：页脚 RSS 订阅入口 */
.gh-footer-rss {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--fg-muted);
    text-decoration: none;
}

.gh-footer-rss:hover {
    color: var(--accent-fg);
    text-decoration: none;
}

/* ---------- Layout ---------- */
.gh-layout {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 16px 40px;
    display: grid;
    grid-template-columns: 296px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

/* 单栏页（404 / 提示 / 密码页）：不套侧栏网格，子内容独占整行并居中 */
.gh-layout-solo {
    grid-template-columns: minmax(0, 1fr);
}

.gh-sidebar {
    min-width: 0;
}

.gh-main {
    min-width: 0;
}

/* ---------- 沉浸式阅读布局（文章详情页） ---------- */
.gh-layout-reading {
    max-width: 1024px;
    grid-template-columns: minmax(0, 1fr);
}

.gh-layout-reading .gh-breadcrumb,
.gh-layout-reading .gh-article,
.gh-layout-reading .gh-detail-col {
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* 面包屑：清晰的位置感与返回上一级入口 */
.gh-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--fg-muted);
}

.gh-crumb {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--fg-muted);
    white-space: nowrap;
    transition: color var(--dur) var(--ease-out);
}

a.gh-crumb:hover {
    color: var(--accent-fg);
    text-decoration: none;
}

.gh-crumb .gh-icon {
    color: currentColor;
}

.gh-crumb-sep {
    color: var(--fg-subtle);
    user-select: none;
}

.gh-crumb-current {
    color: var(--fg-default);
    font-weight: 600;
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 图标与标题同行守卫：图标永不缩、不换行，文本侧收缩省略 */
.gh-card-title .gh-icon,
.gh-section-title .gh-icon,
.gh-comments-header .gh-icon,
.gh-search-context .gh-icon,
.gh-profile-follow .gh-icon,
.gh-tab .gh-icon,
.gh-meta-item .gh-icon,
.gh-article-title-main .gh-icon {
    flex-shrink: 0;
}

.gh-card-title,
.gh-section-title,
.gh-comments-header,
.gh-article-title-main {
    flex-wrap: nowrap;
}

.gh-search-context > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.gh-meta-item {
    white-space: nowrap;
}

/* ---------- 右侧悬浮互动栏（点赞/评论） ---------- */
.gh-float-rail {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 800px;
    margin: 16px auto 0;
}

.gh-rail-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 48px;
    padding: 8px 0;
    background-color: var(--canvas-default);
    border: 1px solid var(--border-default);
    border-radius: 6px;
    color: var(--fg-muted);
    cursor: pointer;
    box-shadow: var(--shadow-xs);
    transition: color var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-out);
}

a.gh-rail-btn:hover {
    color: var(--accent-fg);
    border-color: var(--border-default);
    box-shadow: var(--shadow-lift);
    transform: translateY(-1px);
    text-decoration: none;
}

button.gh-rail-btn:hover:not(:disabled) {
    color: var(--fg-default);
    box-shadow: var(--shadow-lift);
    transform: translateY(-1px);
}

.gh-rail-btn:active:not(:disabled) {
    transform: translateY(0) scale(0.96);
}

.gh-rail-btn:disabled {
    cursor: default;
}

.gh-rail-num {
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: inherit;
    font-variant-numeric: tabular-nums;
}

.gh-rail-btn.liked {
    border-color: rgba(212, 167, 44, 0.5);
    color: var(--star-active);
}

/* 桌面宽屏：右列 sticky 跟随，固定可见不遮正文。
   阶段 20：≥1200px 恒四列网格——目录列（232px）无论文章有无目录都保留占位，
   有/无目录文章之间切换时正文宽度与位置零重排；无目录时该列空置（内容隐藏、列宽不变）。 */
@media (min-width: 1200px) {
    .gh-layout-reading {
        max-width: 1280px;
    }

    .gh-layout-reading .gh-main {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr) 48px 232px;
        column-gap: 16px;
    }

    .gh-layout-reading .gh-main > * {
        grid-column: 2;
        width: 100%;
    }

    .gh-layout-reading .gh-float-rail {
        grid-column: 3;
        grid-row: 2;
        position: sticky;
        /* 视口垂直居中展示 */
        top: 50%;
        transform: translateY(-50%);
        align-self: start;
        justify-self: center;
        flex-direction: column;
        width: auto;
        max-width: none;
        margin: 0;
    }

    /* 目录列恒占第 4 列：有目录放 sticky 目录，无目录空置占位 */
    .gh-layout-reading .gh-toc-rail {
        grid-column: 4;
        grid-row: 2;
        /* 默认 stretch 撑满整行，为内部 sticky 提供滚动行程 */
    }

    /* 无目录时仅隐藏内容：容器盒与 232px 列占位保留，切换文章零重排 */
    .gh-layout-reading .gh-toc-rail[hidden] {
        display: block;
        visibility: hidden;
    }
}

/* ---------- 阶段 18：目录 sticky 侧边栏 ---------- */
.gh-toc-rail {
    min-width: 0;
}

.gh-toc-rail .gh-toc {
    position: sticky;
    top: 24px;
    margin: 0;
    background-color: transparent;
}

.gh-toc-rail .gh-toc-head {
    padding: 4px 8px 4px 0;
}

.gh-toc-rail .gh-toc-body {
    max-height: calc(100vh - 72px);
    padding: 4px 0 12px;
}

.gh-toc-rail .gh-toc-link {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* 阅读排版：更大字号与更松行高 */
.gh-layout-reading .gh-article-body.markdown {
    font-size: 17px;
    line-height: 1.75;
}

.gh-layout-reading .gh-article-title {
    font-size: 28px;
    line-height: 1.35;
}

.gh-layout-reading .gh-article-header {
    padding: 24px 32px;
}

.gh-layout-reading .gh-article-body {
    padding: 28px 32px 8px;
}

.gh-layout-reading .gh-article-cover {
    padding: 28px 32px 0;
}

.gh-layout-reading .gh-article-topics {
    padding: 8px 32px 20px;
}

/* 标题层次：与段落拉开距离 */
.gh-layout-reading .gh-article-body.markdown h1,
.gh-layout-reading .gh-article-body.markdown h2 {
    margin-top: 40px;
    margin-bottom: 20px;
}

.gh-layout-reading .gh-article-body.markdown h3 {
    margin-top: 32px;
    margin-bottom: 16px;
}

.gh-layout-reading .gh-article-body.markdown p {
    margin-bottom: 20px;
}

/* 图片：居中 + 圆角边框 */
.gh-layout-reading .gh-article-body.markdown img {
    display: block;
    margin: 28px auto;
    border: 1px solid var(--border-muted);
    border-radius: 8px;
    box-shadow: var(--shadow-xs);
}

/* 代码块：加边框提升边界感 */
.gh-layout-reading .gh-article-body.markdown pre {
    border: 1px solid var(--border-muted);
    border-radius: 8px;
    line-height: 1.6;
}

/* 引用：去底色去圆角（GitHub 原生风）。负 margin + padding 抵消缩进，
   引用文字与正文严格左对齐（净偏移 = -1em + 3px + (1em - 3px) = 0，字号档位切换仍成立） */
.gh-layout-reading .gh-article-body.markdown blockquote {
    margin-left: -1em;
    padding: 2px 0 2px calc(1em - 3px);
    border-left: 3px solid var(--border-default);
    border-radius: 0;
    background: none;
    color: var(--fg-muted);
}

.gh-layout-reading .gh-article-body.markdown blockquote blockquote {
    margin-left: 0;
}

/* ---------- Profile 卡片 ---------- */
.gh-avatar-link {
    display: block;
}

.gh-avatar {
    width: 100%;
    max-width: 296px;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid var(--border-muted);
    box-shadow: var(--avatar-ring);
    background-color: var(--canvas-subtle);
}

.gh-profile-name {
    margin-top: 16px;
    font-size: 32px;
    font-weight: 600;
    line-height: 32px;
    overflow-wrap: break-word;
}

.gh-profile-username {
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: 24px;
    color: var(--fg-muted);
    overflow-wrap: break-word;
}

.gh-profile-bio {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: break-word;
}

.gh-profile-card .gh-btn-block {
    margin-top: 16px;
}

.gh-profile-follow {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 16px;
    font-size: 14px;
    color: var(--fg-muted);
}

.gh-profile-follow .gh-icon {
    color: var(--fg-muted);
    margin-right: 2px;
}

.gh-profile-follow b {
    color: var(--fg-default);
    font-weight: 600;
}

.gh-profile-details {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gh-profile-details li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 21px;
    overflow-wrap: break-word;
}

.gh-profile-details li > .gh-icon {
    color: var(--fg-muted);
    flex-shrink: 0;
}

/* 站点统计 */
.gh-profile-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 16px;
    border: 1px solid var(--border-default);
    border-radius: 6px;
    overflow: hidden;
}

.gh-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 12px 8px;
    background-color: var(--canvas-subtle);
    color: var(--fg-default);
    border-right: 1px solid var(--border-default);
    transition: background-color var(--dur) var(--ease-out);
}

.gh-stat:last-child {
    border-right: 0;
}

.gh-stat:hover {
    background-color: var(--canvas-inset);
    text-decoration: none;
}

.gh-stat-num {
    font-size: 16px;
    font-weight: 600;
}

.gh-stat-label {
    font-size: 12px;
    color: var(--fg-muted);
}

/* ---------- Buttons ---------- */
.gh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 5px 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
    color: var(--fg-default);
    background-color: var(--btn-bg);
    border: 1px solid var(--btn-border);
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    transition: background-color var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-out);
}

.gh-btn:hover {
    background-color: var(--btn-hover-bg);
    text-decoration: none;
}

.gh-btn:active {
    background-color: var(--btn-active-bg);
    transform: scale(0.97);
}

.gh-btn-primary {
    color: var(--fg-onEmphasis);
    background-color: var(--success-emphasis);
    border-color: rgba(31, 35, 40, 0.15);
}

.gh-btn-primary:hover {
    background-color: #1a7f37;
}

[data-theme="dark"] .gh-btn-primary:hover {
    background-color: #2ea043;
}

.gh-btn-block {
    display: flex;
    width: 100%;
}

/* 点赞按钮双态：off=未赞 on=已赞 unlike=登录用户 hover 提示取消 */
.gh-like-icon,
.gh-like-label {
    display: none;
}

.gh-like-icon-off,
.gh-like-label-off {
    display: inline-flex;
}

.gh-like-btn.liked .gh-like-icon-off,
.gh-like-btn.liked .gh-like-label-off {
    display: none;
}

.gh-like-btn.liked .gh-like-icon-on,
.gh-like-btn.liked .gh-like-label-on {
    display: inline-flex;
}

/* 点赞瞬间黄星弹出动效 */
.gh-like-btn.liked .gh-like-icon-on {
    animation: gh-star-pop 320ms var(--ease-out);
}

@keyframes gh-star-pop {
    0% {
        transform: scale(0.3) rotate(-40deg);
        opacity: 0;
    }
    60% {
        transform: scale(1.18) rotate(6deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

.gh-like-btn.liked[data-can-unlike]:hover .gh-like-label-on,
.gh-like-btn.liked[data-can-unlike]:hover .gh-like-label-unlike {
    display: none;
}

.gh-like-btn.liked[data-can-unlike]:hover .gh-like-label-unlike {
    display: inline-flex;
}

.gh-like-btn.liked {
    border-color: rgba(212, 167, 44, 0.5);
}

.gh-like-btn.liked[data-can-unlike]:hover {
    border-color: var(--border-default);
}

.gh-like-btn.liked .gh-icon {
    color: var(--star-active);
}

.gh-like-btn:disabled {
    cursor: default;
}

/* ---------- Forms ---------- */
.gh-input {
    padding: 5px 12px;
    font-family: inherit;
    font-size: 14px;
    line-height: 20px;
    color: var(--fg-default);
    background-color: var(--canvas-default);
    border: 1px solid var(--border-default);
    border-radius: 6px;
    outline: none;
    transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}

.gh-input::placeholder {
    color: var(--fg-subtle);
}

.gh-input:hover:not(:focus) {
    border-color: var(--fg-subtle);
}

.gh-input:focus {
    border-color: var(--accent-emphasis);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

textarea.gh-textarea {
    width: 100%;
    resize: vertical;
    min-height: 120px;
    line-height: 1.5;
}

/* ---------- Tabs（GitHub UnderlineNav） ---------- */
.gh-tabs {
    border-bottom: 1px solid var(--border-default);
    margin-bottom: 12px;
}

.gh-tabs-inner {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

.gh-tabs-inner::-webkit-scrollbar {
    display: none;
}

.gh-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--fg-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    border-radius: 6px 6px 0 0;
    transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}

.gh-tab:hover {
    color: var(--fg-default);
    border-bottom-color: var(--border-default);
    text-decoration: none;
}

.gh-tab .gh-icon {
    color: var(--fg-muted);
}

.gh-tab-active,
.gh-tab-active:hover {
    color: var(--fg-default);
    font-weight: 600;
    border-bottom-color: var(--tab-underline);
}

.gh-tab-active .gh-icon {
    color: var(--fg-default);
}

.gh-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    color: var(--fg-default);
    background-color: var(--counter-bg);
    border-radius: 2em;
}

/* ---------- 分类页头部 ---------- */
.gh-sort-head {
    padding: 16px 0;
    border-bottom: 1px solid var(--border-default);
    margin-bottom: 16px;
}

.gh-sort-head-main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.gh-sort-head-main > .gh-icon {
    color: var(--fg-muted);
    flex-shrink: 0;
}

.gh-sort-head-name {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--fg-default);
    line-height: 1.3;
    word-break: break-word;
}

.gh-sort-head-parent {
    font-size: 13px;
}

.gh-sort-head-parent a {
    color: var(--fg-muted);
}

.gh-sort-head-parent a:hover {
    color: var(--accent-fg);
    text-decoration: underline;
}

.gh-sort-head-count {
    margin-left: auto;
}

.gh-sort-head-desc {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.6;
    max-width: 72ch;
}

/* ---------- Cards / Section 标题 ---------- */
.gh-card {
    padding: 16px 0;
}

.gh-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
}

.gh-card-title .gh-icon {
    color: var(--fg-muted);
}

.gh-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 20px 0 12px;
}

.gh-section-title .gh-icon {
    color: var(--fg-muted);
}

.gh-section-sub {
    font-size: 12px;
}

/* ---------- 贡献热力图 ---------- */
.gh-heatmap-card {
    border-bottom: 1px solid var(--border-muted);
}

.gh-heatmap-scroll {
    overflow-x: auto;
    padding-bottom: 4px;
}

.gh-heatmap {
    --hm-sz: 10px;
    --hm-gap: 3px;
    --hm-week: 28px;
    --hm-body: 8px;
    --hm-left: calc(var(--hm-week) + var(--hm-body));
    min-width: 560px;
    font-size: 12px;
}

.gh-hm-months {
    position: relative;
    height: 15px;
    margin-left: var(--hm-left);
    margin-bottom: 4px;
}

.gh-hm-months span {
    position: absolute;
    top: 0;
    font-size: 12px;
    color: var(--fg-muted);
}

.gh-hm-body {
    display: flex;
    gap: var(--hm-body);
}

.gh-hm-weekdays {
    display: flex;
    flex-direction: column;
    gap: var(--hm-gap);
    width: var(--hm-week);
    flex-shrink: 0;
}

.gh-hm-weekdays span {
    height: var(--hm-sz);
    font-size: 10px;
    line-height: var(--hm-sz);
    color: var(--fg-muted);
    overflow: hidden;
}

.gh-hm-grid {
    display: flex;
    gap: var(--hm-gap);
    flex: 1;
}

.gh-hm-col {
    display: flex;
    flex-direction: column;
    gap: var(--hm-gap);
    flex: 1 1 0;
    min-width: 0;
}

.gh-hm-day {
    width: var(--hm-sz);
    height: var(--hm-sz);
    border-radius: 2px;
    background-color: var(--hm-l0);
    box-shadow: inset 0 0 0 1px var(--hm-cell-border);
}

.gh-hm-day {
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.gh-hm-day:hover {
    box-shadow: inset 0 0 0 1px var(--fg-muted);
    transform: scale(1.35);
}

.gh-hm-l1 { background-color: var(--hm-l1); }
.gh-hm-l2 { background-color: var(--hm-l2); }
.gh-hm-l3 { background-color: var(--hm-l3); }
.gh-hm-l4 { background-color: var(--hm-l4); }

.gh-hm-empty {
    visibility: hidden;
}

.gh-hm-footer {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 8px;
    font-size: 12px;
    justify-content: flex-end;
}

.gh-hm-footer .gh-text-muted:first-child {
    margin-right: 4px;
}

/* ---------- Pinned（置顶文章） ---------- */
.gh-pinned {
    margin-bottom: 8px;
}

.gh-pinned-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

/* 置顶 > 2 条：水平滑动浏览（移动端手势 + 桌面端拖拽/滚轮，snap 对齐防错位） */
.gh-pinned-scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    cursor: grab;
    scrollbar-width: thin;
    scrollbar-color: var(--border-default) transparent;
}

.gh-pinned-scroll::-webkit-scrollbar {
    height: 6px;
}

.gh-pinned-scroll::-webkit-scrollbar-thumb {
    background-color: var(--border-default);
    border-radius: 3px;
}

.gh-pinned-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.gh-pinned-scroll.gh-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
}

.gh-pinned-scroll.gh-dragging .gh-pinned-item {
    pointer-events: none;
}

.gh-pinned-scroll > .gh-pinned-item {
    flex: 0 0 calc((100% - 16px) / 2);
    scroll-snap-align: start;
}

.gh-pinned-scroll:focus-visible {
    outline: 2px solid var(--accent-fg);
    outline-offset: 2px;
    border-radius: 6px;
}

.gh-pinned-item {
    padding: 16px;
    border: 1px solid var(--border-default);
    border-radius: 6px;
    background-color: var(--canvas-default);
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    transition: border-color var(--dur) var(--ease-out),
                background-color var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out);
}

.gh-pinned-item:hover {
    border-color: var(--fg-subtle);
    box-shadow: var(--shadow-xs);
}

.gh-pinned-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.gh-pinned-head .gh-icon {
    color: var(--fg-muted);
    flex-shrink: 0;
}

.gh-pinned-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--accent-fg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gh-pinned-title:hover {
    text-decoration: underline;
}

.gh-pinned-desc {
    font-size: 12px;
    line-height: 18px;
    color: var(--fg-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gh-pinned-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: auto;
    font-size: 12px;
    color: var(--fg-muted);
}

/* ---------- 搜索上下文提示 ---------- */
.gh-search-context {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 16px;
    font-size: 14px;
    color: var(--fg-muted);
    background-color: var(--canvas-subtle);
    border: 1px solid var(--border-muted);
    border-radius: 6px;
}

.gh-search-context b {
    color: var(--fg-default);
    font-weight: 600;
}

.gh-search-context .gh-icon {
    color: var(--fg-muted);
    flex-shrink: 0;
}

.gh-search-clear {
    margin-left: auto;
    font-size: 12px;
    color: var(--accent-fg);
    text-decoration: none;
    white-space: nowrap;
}

.gh-search-clear:hover {
    text-decoration: underline;
}

/* ---------- 文章列表（Repositories 风格） ---------- */
.gh-repos-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
    padding: 16px 0;
}

.gh-repos-filter {
    flex: 0 1 320px;
}

.gh-repos-filter .gh-input {
    width: 100%;
}

.gh-repos-count {
    font-size: 14px;
    white-space: nowrap;
    margin-left: auto;
}

.gh-repo-list {
    border-top: 1px solid var(--border-muted);
}

.gh-repo-item {
    padding: 24px 0;
    border-bottom: 1px solid var(--border-muted);
}

.gh-repo-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.gh-repo-head > .gh-icon {
    color: var(--fg-muted);
    flex-shrink: 0;
    /* 与两行标题的首行文字光学对齐：顶部对齐 + 首行行高半差补偿 */
    align-self: flex-start;
    margin-top: 6px;
}

.gh-repo-title {
    flex: 1;
    min-width: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--accent-fg);
    overflow-wrap: anywhere;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gh-repo-title:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.gh-repo-desc {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--fg-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.gh-repo-topics {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    gap: 8px;
    margin-top: 8px;
}

.gh-repo-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--fg-muted);
}

.gh-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.gh-meta-item .gh-icon {
    color: var(--fg-muted);
}

/* 徽章 */
.gh-badge {
    display: inline-block;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    border-radius: 2em;
    border: 1px solid transparent;
    white-space: nowrap;
}

.gh-badge-green {
    color: var(--success-fg);
    border-color: var(--success-fg);
}

.gh-visibility {
    display: inline-block;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    color: var(--fg-muted);
    border: 1px solid var(--border-default);
    border-radius: 2em;
    white-space: nowrap;
}

/* v2.0.0：卡片行 hover 显出 View 提示按钮（GitHub repo 行签名交互）。
   纯视觉反馈——标题 a 才是真链接，span 无交互语义（axe 不计控件）。
   默认 display:none 不占位（与官网一致：hover 时 View 出现在行尾，Public 左移）；
   触屏无 hover 不显；键盘 focus-within 时同步显出（a11y） */
.gh-view-btn {
    display: none;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    color: var(--fg-muted);
    border: 1px solid var(--border-default);
    border-radius: 6px;
    white-space: nowrap;
}

@media (hover: hover) {
    .gh-repo-item:hover .gh-view-btn {
        display: inline-block;
    }
}

.gh-repo-head:focus-within .gh-view-btn {
    display: inline-block;
}

/* 语言点（分类） */
.gh-lang {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--fg-muted);
}

.gh-lang:hover {
    color: var(--accent-fg);
    text-decoration: none;
}

.gh-lang-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--fg-subtle);
    flex-shrink: 0;
}

/* topic 标签 */
.gh-topic {
    display: inline-block;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    color: var(--topic-fg);
    background-color: var(--topic-bg);
    border-radius: 2em;
    white-space: nowrap;
}

.gh-topic:hover {
    color: var(--fg-onEmphasis);
    background-color: var(--topic-hover-bg);
    text-decoration: none;
}

/* 空状态 */
.gh-empty {
    padding: 72px 0;
    text-align: center;
    color: var(--fg-muted);
}

.gh-empty .gh-icon {
    color: var(--border-default);
    margin-bottom: 12px;
}

.gh-empty p + p {
    margin-top: 4px;
}

.gh-empty p {
    margin: 4px 0;
}

.gh-empty b {
    color: var(--fg-default);
    font-weight: 600;
}

.gh-empty-hint {
    font-size: 12px;
}

.gh-empty-hint a {
    color: var(--accent-fg);
    text-decoration: none;
}

.gh-empty-hint a:hover {
    text-decoration: underline;
}

/* ---------- 分页 ---------- */
.gh-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 24px 0;
    font-size: 14px;
}

.gh-pagination a,
.gh-pagination span,
.gh-pagination em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    border-radius: 6px;
    font-style: normal;
    line-height: 1;
    transition: background-color var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-out);
}

.gh-pagination a {
    color: var(--fg-default);
    border: 1px solid var(--border-default);
    background-color: var(--canvas-default);
}

.gh-pagination a:hover {
    background-color: var(--btn-hover-bg);
    border-color: var(--fg-subtle);
    text-decoration: none;
}

.gh-pagination a:active {
    transform: scale(0.94);
}

.gh-pagination span {
    color: var(--fg-onEmphasis);
    background-color: var(--accent-emphasis);
    border: 1px solid var(--accent-emphasis);
    font-weight: 500;
}

.gh-pagination em {
    color: var(--fg-muted);
    border: 0;
}

/* ---------- 文章详情 ---------- */
.gh-article {
    border: 1px solid var(--border-default);
    border-radius: 8px;
    margin-top: 0;
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}

/* 无面包屑场景（page.php）：与 tabs 保持 16px 节奏 */
.gh-layout:not(.gh-layout-reading) .gh-article {
    margin-top: 4px;
}

.gh-article-header {
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-default);
    background-color: var(--canvas-default);
    border-radius: 6px 6px 0 0;
}

.gh-article-title-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}

/* 行内徽章/编辑按钮与首行标题光学对齐 */
.gh-article-title-row > .gh-visibility,
.gh-article-title-row > .gh-edit-link {
    margin-top: 4px;
}

/* 图标+标题同行包裹层：内部永不换行，徽章可折行到下一行 */
.gh-article-title-main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
}

.gh-article-title-main > .gh-icon {
    color: var(--fg-muted);
    flex-shrink: 0;
    /* 顶部对齐 + 首行行高半差补偿（24px 标题行高 1.3，图标 20px） */
    margin-top: 6px;
}

.gh-article-title {
    font-size: 24px;
    font-weight: 600;
    overflow-wrap: anywhere;
    min-width: 0;
}

.gh-edit-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--fg-default);
    background-color: var(--btn-bg);
    border: 1px solid var(--btn-border);
    border-radius: 6px;
}

.gh-edit-link:hover {
    background-color: var(--btn-hover-bg);
    text-decoration: none;
}

.gh-article-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 12px;
    font-size: 12px;
    color: var(--fg-muted);
}

.gh-article-cover {
    padding: 24px 24px 0;
}

.gh-article-cover img {
    border-radius: 6px;
    border: 1px solid var(--border-muted);
}

.gh-article-body {
    padding: 24px;
}

.gh-article-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 24px 20px;
}

.gh-article-topics:empty {
    display: none;
}


/* 上一篇 / 下一篇 */
.gh-neighbor {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.gh-neighbor-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    border: 1px solid var(--border-default);
    border-radius: 6px;
    color: var(--fg-default);
    min-width: 0;
    transition: border-color var(--dur) var(--ease-out),
                background-color var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out);
}

.gh-neighbor-item:hover {
    border-color: var(--accent-fg);
    box-shadow: var(--shadow-xs);
    text-decoration: none;
}

.gh-neighbor-item strong {
    font-size: 14px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gh-neighbor-next {
    text-align: right;
}

/* ---------- 评论区（Discussion 风格） ---------- */
.gh-comments {
    margin-top: 24px;
}

.gh-comments-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    font-size: 14px;
    color: var(--fg-muted);
}

.gh-comments-header b {
    color: var(--fg-default);
}

.gh-comments-header .gh-icon {
    color: var(--fg-muted);
}

.gh-comment {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.gh-comment-avatar {
    position: relative;
    flex-shrink: 0;
}

.gh-comment-avatar img {
    position: relative;
    z-index: 1;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border-muted);
    object-fit: cover;
    background-color: var(--canvas-subtle);
}

/* 头像加载失败时显示内置占位人形 */
.gh-comment-avatar img.gh-avatar-broken {
    visibility: hidden;
}

.gh-comment-avatar::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-color: var(--canvas-subtle);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%239198a1' d='M8 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6ZM2.5 13.5a5.5 5.5 0 0 1 11 0 .75.75 0 0 1-.75.75h-9.5a.75.75 0 0 1-.75-.75Z'/%3E%3C/svg%3E");
    background-size: 70% 70%;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 80ms ease-in;
}

.gh-comment-avatar:has(img.gh-avatar-broken)::after {
    opacity: 1;
}

/* v2.1.0 C2：评论扁平布局层级缩进——子评论为兄弟节点，用 margin 表达层级，
   封顶 3 级（与核心 level>4 挂平口径衔接），宽度不再逐级收窄。
   深层头像缩小以强化层级感 */
.gh-cl-1 {
    margin-left: 28px;
}

.gh-cl-2 {
    margin-left: 48px;
}

.gh-cl-3 {
    margin-left: 64px;
}

.gh-cl-1 .gh-comment-avatar img,
.gh-cl-2 .gh-comment-avatar img,
.gh-cl-3 .gh-comment-avatar img {
    width: 32px;
    height: 32px;
}

.gh-comment-body {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--border-default);
    border-radius: 6px;
    position: relative;
}

/* 指向头像的小三角 */
.gh-comment-body::before {
    content: "";
    position: absolute;
    top: 14px;
    left: -8px;
    width: 14px;
    height: 14px;
    background-color: var(--canvas-soft);
    border-left: 1px solid var(--border-default);
    border-bottom: 1px solid var(--border-default);
    transform: rotate(45deg);
}

.gh-comment-body::after {
    content: "";
    position: absolute;
    top: 12px;
    left: -2px;
    width: 18px;
    height: 18px;
    background-color: var(--canvas-soft);
    z-index: 0;
}

.gh-comment-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 16px;
    font-size: 14px;
    background-color: var(--canvas-soft);
    border-bottom: 1px solid var(--border-default);
    border-radius: 6px 6px 0 0;
}

.gh-comment-head .gh-text-muted {
    font-size: 12px;
    font-weight: 400;
}

.gh-reply-btn {
    margin-left: auto;
    font-size: 12px;
    color: var(--fg-muted);
    cursor: pointer;
    user-select: none;
}

.gh-reply-btn:hover {
    color: var(--accent-fg);
}

/* v2.1.0 C1：评论删除按钮（仅对有权限者渲染）。幽灵图标按钮，hover 变红 */
.gh-del-com {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    margin-left: auto;
    color: var(--fg-subtle);
    background: transparent;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    transition: color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}

/* 有删除按钮时回复按钮不再独占右缘 */
.gh-reply-btn + .gh-del-com {
    margin-left: 0;
}

.gh-del-com:hover {
    color: var(--danger-fg);
    background-color: var(--danger-subtle, rgba(209, 36, 47, 0.1));
}

.gh-del-com:disabled {
    opacity: 0.5;
    cursor: default;
}

.gh-comment-content {
    position: relative;
    z-index: 1;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.6;
    overflow-wrap: break-word;
}

.gh-comment-content p {
    margin-bottom: 8px;
}

.gh-comment-content p:last-child {
    margin-bottom: 0;
}

/* 评论表单 */
.gh-comment-form {
    margin-top: 16px;
    border: 1px solid var(--border-default);
    border-radius: 6px;
}

/* 回复表单：整行换到评论下方，与评论主体左对齐 */
.gh-comment .gh-comment-form {
    flex: 1 1 100%;
    margin-top: 0;
    margin-left: 52px;
}

.gh-comment-form-head {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    background-color: var(--canvas-soft);
    border-bottom: 1px solid var(--border-default);
    border-radius: 6px 6px 0 0;
}

.gh-comment-form form {
    padding: 16px;
}

.gh-comment-fields {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 12px;
}

.gh-comment-fields .gh-input {
    width: 100%;
}

.gh-comment-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 12px;
}

/* 验证码弹窗 */
.gh-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999;
    opacity: 0;
    transition: opacity 150ms ease-out; /* M3：fadeToggle → CSS 过渡 */
}

/* M3：开关状态类（theme.js viewModal 切换） */
.gh-modal-open {
    display: block;
}

.gh-modal-visible {
    opacity: 1;
}

.gh-modal-box {
    position: relative;
    z-index: 2;
    width: 320px;
    max-width: calc(100vw - 32px);
    margin: 20vh auto 0;
    padding: 24px;
    background-color: var(--canvas-default);
    border: 1px solid var(--border-default);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    text-align: center;
}

.gh-modal-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
}

.gh-modal-box img,
.gh-modal-box .captcha {
    display: block;
    margin: 0 auto 12px;
    max-height: 60px;
    cursor: pointer;
    border-radius: 6px;
}

.gh-modal-box .gh-input,
.gh-modal-box .captcha_input {
    width: 100%;
    margin-bottom: 16px;
    text-align: center;
}

.gh-modal-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.gh-modal-mask {
    position: fixed;
    inset: 0;
    z-index: 1;
    background-color: var(--overlay-bg);
}

/* ---------- 侧边栏 Widgets ---------- */
.gh-side-widgets {
    margin-top: 16px;
}

.gh-widget {
    padding: 16px 0;
    border-top: 1px solid var(--border-muted);
}

.gh-widget:first-child {
    border-top: 0;
    padding-top: 8px;
}

.gh-widget-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

.gh-widget-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
}

.gh-widget-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    line-height: 1.5;
}

.gh-widget-list li a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--fg-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.gh-widget-list li a:hover {
    color: var(--accent-fg);
    text-decoration: none;
}

.gh-widget-list li a .gh-icon {
    color: var(--fg-muted);
}

.gh-widget-list .gh-counter {
    margin-left: auto;
    flex-shrink: 0;
}

.gh-widget-child {
    padding-left: 20px;
}

/* v2.1.0 C3：侧栏分类子分类默认收起。父行 = 链接 + 计数 + 展开按钮；
   子列表 hidden 属性控制（无 JS 时按钮不生效，但 hidden 初始即收起——
   服务端对当前页子树直接不输出 hidden，保证关键路径不依赖 JS） */
.gh-sort-list li.gh-sort-top {
    display: block;
}

.gh-sort-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.gh-sort-row > a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--fg-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.gh-sort-row > a:hover {
    color: var(--accent-fg);
    text-decoration: none;
}

.gh-sort-row > a .gh-icon {
    color: var(--fg-muted);
}

.gh-sort-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    flex-shrink: 0;
    color: var(--fg-subtle);
    background: transparent;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}

.gh-sort-toggle .gh-icon {
    transition: transform var(--dur) var(--ease-out);
}

.gh-sort-toggle:hover {
    color: var(--fg-default);
}

.gh-sort-toggle.open .gh-icon {
    transform: rotate(180deg);
}

/* v2.1.3：作者 display 规则会覆盖 UA 的 [hidden]{display:none}，使 hidden 属性失效
（侧栏子分类「依旧没收起」的真根因）。全局兜底，保证 hidden 语义优先。 */
[hidden] {
    display: none !important;
}

.gh-sort-children {
    list-style: none;
    margin: 4px 0 2px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gh-sort-children .gh-widget-child {
    padding-left: 20px;
}

.gh-sort-children .gh-widget-child.active > a {
    color: var(--accent-fg);
    font-weight: 600;
}

.gh-widget-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.gh-widget-comments li {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.gh-widget-comments li a {
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 评论数超过 5 条：固定可视高度并垂直滚动（细滚动条与整体风格统一） */
.gh-widget-comments.gh-widget-scroll {
    /* 5 条 × 67px + 4 间隙 × 6px ≈ 360px */
    max-height: 360px;
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-default) transparent;
}

.gh-widget-comments.gh-widget-scroll::-webkit-scrollbar {
    width: 6px;
}

.gh-widget-comments.gh-widget-scroll::-webkit-scrollbar-thumb {
    background-color: var(--border-default);
    border-radius: 3px;
}

.gh-widget-comments.gh-widget-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.gh-widget-comments.gh-widget-scroll:focus-visible {
    outline: 2px solid var(--accent-fg);
    outline-offset: 2px;
    border-radius: 4px;
}

.gh-widget-custom {
    font-size: 14px;
    color: var(--fg-muted);
    overflow-wrap: break-word;
}

.gh-search-form {
    display: flex;
    gap: 8px;
}

.gh-search-form .gh-input {
    flex: 1;
    min-width: 0;
}

/* 日历组件 */
.gh-widget #calendar table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    text-align: center;
}

.gh-widget #calendar td {
    padding: 4px 2px;
}

table.calendartop {
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--fg-default);
}

table.calendartop td {
    padding: 0 6px;
}

table.calendartop a {
    padding: 0 4px;
    font-weight: 400;
    color: var(--fg-muted);
}

table.calendartop a:hover {
    color: var(--accent-fg);
    text-decoration: none;
}

table.calendar .week,
table.calendar .sun {
    color: var(--fg-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--border-muted);
}

table.calendar td {
    padding: 4px 2px;
}

table.calendar .day a,
table.calendar .day2 a {
    font-weight: 600;
    color: var(--fg-default);
}

table.calendar .day a:hover {
    color: var(--accent-fg);
    text-decoration: none;
}

/* 有文章日期的高亮块：背景放在内层 a 而非 td——td 自身 padding 形成间隔，
   连续日期的背景不再连成一片（border-collapse 下相邻 td 无缝，旧写法会粘连） */
table.calendar .day2 a {
    display: block;
    padding: 3px 0;
    border-radius: 6px;
    background-color: var(--accent-subtle);
    color: var(--accent-fg);
    text-decoration: none;
}

table.calendar .day2 a:hover {
    color: var(--accent-fg);
    text-decoration: none;
    opacity: 0.85;
}

/* ---------- Footer ---------- */
.gh-footer {
    border-top: 1px solid var(--border-default);
    background-color: var(--canvas-default);
}

.gh-footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 16px 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-size: 12px;
    color: var(--fg-muted);
}

.gh-footer-logo {
    color: var(--fg-muted);
    display: inline-flex;
}

.gh-footer-link a,
.gh-footer-power a,
.gh-footer-extra a {
    color: var(--fg-muted);
}

.gh-footer-link a:hover,
.gh-footer-power a:hover,
.gh-footer-extra a:hover {
    color: var(--accent-fg);
    text-decoration: none;
}

.gh-footer-extra {
    display: inline-flex;
}

.gh-footer-custom {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.gh-footer-custom a {
    color: var(--fg-muted);
}

.gh-footer-custom a:hover {
    color: var(--accent-fg);
    text-decoration: none;
}

/* ---------- 提示 / 404 / 密码页（阶段 19：共用页眉页脚的消息卡） ---------- */
.gh-msg-card {
    max-width: 480px;
    min-width: min(320px, 100%);
    margin: 64px auto;
    padding: 40px 32px;
    text-align: center;
    background-color: var(--canvas-default);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    box-shadow: var(--shadow-lift);
}

.gh-msg-logo,
.gh-msg-card > svg {
    display: inline-block;
    color: var(--border-default);
    margin-bottom: 12px;
}

.gh-msg-title {
    margin: 0 0 8px;
    font-size: 32px;
    font-weight: 600;
    color: var(--fg-default);
}

.gh-msg-text {
    margin: 0 0 24px;
    font-size: 14px;
    color: var(--fg-muted);
    word-break: break-word;
}

.gh-msg-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.gh-msg-card .gh-pw-form {
    display: flex;
    justify-content: center;
    gap: 8px;
}

/* ---------- 阶段 19：阅读宽度变体 ---------- */
.gh-layout-reading.gh-reading-narrow,
.gh-layout-reading.gh-reading-narrow .gh-breadcrumb,
.gh-layout-reading.gh-reading-narrow .gh-article,
.gh-layout-reading.gh-reading-narrow .gh-detail-col {
    max-width: 720px;
}

.gh-layout-reading.gh-reading-narrow .gh-breadcrumb,
.gh-layout-reading.gh-reading-narrow .gh-article,
.gh-layout-reading.gh-reading-narrow .gh-detail-col {
    width: 100%;
}

.gh-layout-reading.gh-reading-wide,
.gh-layout-reading.gh-reading-wide .gh-breadcrumb,
.gh-layout-reading.gh-reading-wide .gh-article,
.gh-layout-reading.gh-reading-wide .gh-detail-col {
    max-width: 900px;
}

.gh-layout-reading.gh-reading-wide .gh-breadcrumb,
.gh-layout-reading.gh-reading-wide .gh-article,
.gh-layout-reading.gh-reading-wide .gh-detail-col {
    width: 100%;
}

.gh-pw-form {
    display: flex;
    gap: 8px;
}

.gh-pw-form .gh-input {
    width: 220px;
}

.gh-back-home {
    margin-top: 8px;
    font-size: 14px;
}

/* ---------- 正文内下载按钮（plugins.php 注入） ---------- */
.gh-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--fg-default) !important;
    background-color: var(--btn-bg);
    border: 1px solid var(--btn-border);
    border-radius: 6px;
    text-decoration: none !important;
    transition: background-color var(--dur) var(--ease-out);
}

.gh-download-btn:hover {
    background-color: var(--btn-hover-bg);
}

/* ==========================================================================
   响应式
   ========================================================================== */

/* 平板：侧栏收窄 */
@media (max-width: 1011px) {
    .gh-layout {
        grid-template-columns: 256px minmax(0, 1fr);
    }
}

/* 移动端 */
@media (max-width: 767px) {
    /* 触屏无 / 快捷键，隐藏 kbd 提示 */
    .gh-search-kbd {
        display: none;
    }

    /* v2.1.0 C2：窄屏层级缩进收窄，保住正文宽度 */
    .gh-cl-1 {
        margin-left: 12px;
    }

    .gh-cl-2 {
        margin-left: 20px;
    }

    .gh-cl-3 {
        margin-left: 28px;
    }

    .gh-header-inner {
        flex-wrap: wrap;
        row-gap: 12px;
        padding: 16px;
    }

    .gh-header-toggle {
        display: inline-flex;
        order: 0;
    }

    /* 移动端触控目标 ≥44px（命中区扩大，视觉不变） */
    .gh-header-toggle,
    .gh-header-actions .gh-icon-btn {
        min-width: 44px;
        min-height: 44px;
    }

    .gh-header-nav .gh-nav-link {
        min-height: 44px;
    }

    .gh-logo {
        order: 1;
    }

    .gh-header-actions {
        order: 2;
    }

    .gh-header-search {
        order: 3;
        flex: 1 1 100%;
    }

    .gh-header-nav {
        display: none;
        order: 4;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        overflow: visible;
        padding-bottom: 8px;
    }

    body.gh-nav-open .gh-header-nav {
        display: flex;
        animation: gh-nav-down 160ms cubic-bezier(0.3, 0, 0.2, 1);
    }

    @keyframes gh-nav-down {
        from {
            opacity: 0;
            transform: translateY(-6px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .gh-nav-link {
        padding: 10px 4px;
        border-top: 1px solid rgba(240, 246, 252, 0.1);
    }

    .gh-layout {
        grid-template-columns: minmax(0, 1fr);
        padding-top: 16px;
    }

    /* 信息流优先：移动端文章列表置于个人简介之后、小部件之前。
       侧栏打散（display:contents）参与主网格排序，DOM 与桌面布局零变化；
       profile 卡(1) → 统计(2) → 文章流(3) → 小部件组(4，文档序保持)。 */
    .gh-sidebar {
        display: contents;
    }

    .gh-profile-card {
        order: 1;
    }

    .gh-profile-stats {
        order: 2;
        margin-top: 0;
    }

    .gh-main {
        order: 3;
    }

    .gh-side-widgets {
        display: contents;
        margin-top: 0;
    }

    .gh-side-widgets > * {
        order: 4;
    }

    /* profile 卡横向排列（对齐官网移动端：60px 头像 + 右侧 32px 名字） */
    .gh-profile-card {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr);
        column-gap: 16px;
    }

    .gh-profile-card .gh-avatar-link {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .gh-avatar {
        max-width: 64px;
    }

    .gh-profile-name {
        grid-column: 2;
        margin-top: 0;
        font-size: 24px;
        line-height: 1.25;
    }

    .gh-profile-username {
        grid-column: 2;
        font-size: 20px;
        line-height: 24px;
    }

    .gh-profile-bio,
    .gh-profile-follow,
    .gh-profile-details {
        grid-column: 1 / -1;
    }

    .gh-profile-bio {
        margin-top: 12px;
        font-size: 14px;
    }

    .gh-tab {
        padding: 8px 10px;
    }

    .gh-sort-head {
        padding: 10px 0 12px;
        margin-bottom: 12px;
    }

    .gh-sort-head-name {
        font-size: 18px;
    }

    .gh-sort-head-count {
        margin-left: 0;
    }

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

    .gh-pinned-scroll {
        display: flex;
    }

    .gh-pinned-scroll > .gh-pinned-item {
        flex: 0 0 100%;
    }

    .gh-repos-header {
        flex-wrap: wrap;
    }

    .gh-repos-filter {
        flex: 1 1 100%;
    }

    .gh-repo-title {
        font-size: 16px;
    }

    .gh-article-title {
        font-size: 20px;
    }

    .gh-article-title-main > .gh-icon {
        margin-top: 4px;
    }

    .gh-article-header,
    .gh-article-body,
    .gh-article-topics {
        padding-left: 16px;
        padding-right: 16px;
    }

    .gh-article-cover {
        padding: 16px 16px 0;
    }

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

    .gh-comment {
        gap: 8px;
    }

    .gh-comment-avatar img {
        width: 32px;
        height: 32px;
    }

    .gh-comment-child {
        margin-left: 24px;
    }

    .gh-comment-child .gh-comment-avatar img {
        width: 28px;
        height: 28px;
    }

    .gh-comment-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .gh-heatmap {
        --hm-week: 24px;
    }

    /* F6：系列页移动端收紧 */
    .gh-series {
        padding: 4px 12px 20px;
    }

    .gh-series-title {
        font-size: 18px;
    }

    .gh-series-meta {
        gap: 12px;
    }

    .gh-series-item {
        padding: 12px;
        gap: 10px;
    }

    .gh-series-item-title {
        font-size: 14px;
    }

    /* 详情页系列徽章：窄屏允许换行（meta 行 flex-wrap 已生效） */
    .gh-series-badge {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 系列内上下篇：窄屏改纵向堆叠（与全局上下篇一致由 grid 控制） */
    .gh-series-neighbor {
        margin-top: 16px;
    }
}

/* ---------- 返回顶部 ---------- */
.gh-backtop {
    position: fixed;
    right: 24px;
    bottom: 32px;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    color: var(--fg-muted);
    background-color: var(--canvas-default);
    border: 1px solid var(--border-default);
    border-radius: 6px;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out), visibility 150ms;
}

.gh-backtop.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.gh-backtop:hover {
    color: var(--fg-default);
    border-color: var(--border-default);
    background-color: var(--canvas-subtle);
}

/* ---------- 图片放大 Lightbox ---------- */
.gh-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 32px;
    background-color: rgba(31, 35, 40, 0.82);
    cursor: zoom-out;
    opacity: 0;
    visibility: hidden;
    transition: opacity 150ms var(--ease-out), visibility 150ms;
}

.gh-lightbox.open {
    opacity: 1;
    visibility: visible;
}

.gh-lb-figure {
    margin: 0;
    min-width: 0;
    max-width: calc(100vw - 140px);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.gh-lightbox img {
    max-width: 100%;
    max-height: calc(100vh - 110px);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(1, 4, 9, 0.35);
    transition: transform 120ms var(--ease-out);
    touch-action: none; /* 拖拽平移时屏蔽浏览器手势 */
}

.gh-lightbox img.zoomed {
    transition: none; /* 拖拽/缩放期间关掉过渡，跟手 */
    box-shadow: 0 12px 36px rgba(1, 4, 9, 0.5);
}

/* 灯箱图注 + 计数 meta 行（v1.8.0：caption 主色，count 弱化） */
.gh-lb-meta {
    display: flex;
    align-items: baseline;
    gap: 10px;
    max-width: 100%;
    min-height: 18px;
}

.gh-lb-caption {
    font-size: 13px;
    color: #f0f6fc;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    user-select: none;
}

.gh-lb-caption:empty {
    display: none;
}

.gh-lb-count {
    font-size: 13px;
    color: #8b949e;
    font-variant-numeric: tabular-nums;
    user-select: none;
    flex-shrink: 0;
}

/* F4：相邻导航按钮 */
.gh-lb-btn {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    line-height: 1;
    color: #d1d7e0;
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
    transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.gh-lb-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.gh-lb-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* 放大态：导航按钮移到边缘，避免遮挡 */
.gh-lightbox.gh-lb-zoomed {
    cursor: default;
}

.gh-lightbox.gh-lb-zoomed img {
    cursor: grab;
}

body.gh-no-scroll {
    overflow: hidden;
}

.gh-article-body.markdown img {
    cursor: zoom-in;
}

/* ---------- 阅读布局响应式 ---------- */
@media (max-width: 767px) {
    .gh-layout-reading .gh-article-header {
        padding: 20px;
    }

    .gh-layout-reading .gh-article-body {
        padding: 20px 20px 8px;
    }

    .gh-lightbox {
        padding: 16px;
        gap: 8px;
    }

    .gh-lb-figure {
        max-width: calc(100vw - 96px);
    }

    .gh-lb-btn {
        width: 38px;
        height: 38px;
        font-size: 22px;
    }

    .gh-layout-reading .gh-article-cover {
        padding: 20px 20px 0;
    }

    .gh-layout-reading .gh-article-topics {
        padding: 8px 20px 16px;
    }

    .gh-layout-reading .gh-article-title {
        font-size: 24px;
    }

    .gh-layout-reading .gh-article-body.markdown {
        font-size: 16px;
        line-height: 1.7;
    }

    .gh-layout-reading .gh-article-body.markdown img {
        margin: 20px auto;
    }

    .gh-layout-reading .gh-toc {
        margin: 16px 20px 0;
    }

    .gh-layout-reading .gh-fs-btn {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ---------- 阶段 17：阅读进度条 ---------- */
.gh-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--accent-fg);
    transform-origin: 0 50%;
    transform: scaleX(0);
    z-index: 150;
    pointer-events: none;
}

/* ---------- 阶段 17/19：目录 TOC（GitHub Docs 风格，无外框、缩进分层） ---------- */
.gh-toc {
    margin: 20px 32px 0;
}

.gh-toc-head {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 4px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--fg-muted);
    background: none;
    border: 0;
    cursor: pointer;
}

.gh-toc-head:hover {
    color: var(--fg-default);
}

.gh-toc-caret {
    margin-left: auto;
    transition: transform var(--dur, 120ms) cubic-bezier(0.3, 0, 0.2, 1);
}

.gh-toc.gh-collapsed .gh-toc-caret {
    transform: rotate(-90deg);
}

.gh-toc.gh-collapsed .gh-toc-body {
    display: none;
}

.gh-toc-body {
    padding: 4px 0 8px;
    max-height: 320px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-default) transparent;
}

/* 树状结构：纯缩进表达层级，无竖线堆叠 */
.gh-toc-tree,
.gh-toc-tree ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gh-toc-tree ul {
    padding-left: 16px;
}

/* 目录条目：无底色、无外框，靠缩进与文字深浅表达层级；
   active 态只用左侧 2px 细条 + 深色文字（GitHub Docs 风） */
.gh-toc-link {
    display: block;
    padding: 2px 8px 2px 10px;
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--fg-muted);
    text-decoration: none;
    border-radius: 0;
    border-left: 2px solid transparent;
    transition: color 120ms ease, border-color 120ms ease;
}

.gh-toc-link:hover {
    color: var(--fg-default);
}

.gh-toc-link.gh-active {
    color: var(--fg-default);
    font-weight: 600;
    border-left-color: var(--accent-fg);
}

/* 标题锚点滚动补偿：sticky 顶栏高约 72px，留 84px 呼吸 */
.gh-article-body.markdown h1,
.gh-article-body.markdown h2,
.gh-article-body.markdown h3,
.gh-article-body.markdown h4,
.gh-article-body.markdown h5,
.gh-article-body.markdown h6 {
    scroll-margin-top: 84px;
}

/* ---------- 阶段 17：字号三档 ---------- */
.gh-fs-control {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.gh-fs-btn {
    min-width: 28px;
    height: 24px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--fg-muted);
    background-color: transparent;
    border: 1px solid var(--border-default);
    border-radius: 4px;
    cursor: pointer;
}

.gh-fs-btn:hover:not(:disabled) {
    color: var(--fg-default);
    border-color: var(--fg-subtle);
    background-color: var(--canvas-inset);
}

.gh-fs-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.gh-fs-state {
    min-width: 28px;
    text-align: center;
    font-size: 12px;
    color: var(--fg-muted);
}

html[data-fs="s"] .gh-layout-reading .gh-article-body.markdown {
    font-size: 16px;
    line-height: 1.7;
}

html[data-fs="l"] .gh-layout-reading .gh-article-body.markdown {
    font-size: 18px;
    line-height: 1.8;
}

/* ---------- 阶段 17：toast 反馈 ---------- */
.gh-toast-host {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 210;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.gh-toast {
    padding: 8px 16px;
    font-size: 13px;
    color: var(--fg-default);
    background-color: var(--canvas-default);
    border: 1px solid var(--border-default);
    border-left: 3px solid var(--accent-fg);
    border-radius: 6px;
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 200ms ease, transform 200ms ease;
}

.gh-toast-success {
    border-left-color: var(--success-fg);
}

.gh-toast-danger {
    border-left-color: var(--danger-fg);
}

.gh-toast-show {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- F6：系列/专题聚合 ---------- */
/* 落地页容器：单栏内容列，宽度与阅读页正文相当 */
.gh-series {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    padding: 8px 16px 24px;
}

.gh-series .gh-breadcrumb {
    margin-bottom: 12px;
}

/* 系列头：名称 + 进度/最近更新，复用 gh-sort-head 的分隔节奏 */
.gh-series-head {
    padding: 16px 0;
    border-bottom: 1px solid var(--border-default);
    margin-bottom: 16px;
}

.gh-series-head-main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.gh-series-head-main > .gh-icon {
    color: var(--fg-muted);
    flex-shrink: 0;
}

.gh-series-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--fg-default);
    line-height: 1.3;
    word-break: break-word;
}

.gh-series-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 8px;
    font-size: 13px;
}

/* 连载列表：GitHub Issues/PR 列表式卡片，序号 + 标题 + 元信息 */
.gh-series-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-default);
    border-radius: 6px;
    background-color: var(--canvas-default);
    overflow: hidden;
}

.gh-series-item {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 14px 16px;
    background-color: var(--canvas-default);
    transition: background-color var(--dur) var(--ease-out);
}

.gh-series-item + .gh-series-item {
    border-top: 1px solid var(--border-muted);
}

.gh-series-item:hover {
    background-color: var(--canvas-subtle);
}

/* 连载序号：等宽数字，弱化的次要标识 */
.gh-series-no {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--fg-muted);
    background-color: var(--canvas-subtle);
    border: 1px solid var(--border-muted);
    border-radius: 2em;
    padding: 1px 8px;
    line-height: 16px;
}

.gh-series-item:hover .gh-series-no {
    background-color: var(--canvas-inset);
}

.gh-series-item-main {
    min-width: 0;
    flex: 1;
}

.gh-series-item-title {
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--fg-default);
    word-break: break-word;
}

.gh-series-item-title:hover {
    color: var(--accent-fg);
    text-decoration: none;
}

.gh-series-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
    font-size: 12px;
}

/* 系列分页：复用 gh-pagination 外观，居内排列 */
.gh-series-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

/* ---------- F6：详情页系列徽章 + 系列内上下篇 ---------- */
/* 徽章：与 .gh-visibility 同高的胶囊，accent 描边突出系列归属 */
.gh-series-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    color: var(--accent-fg);
    border: 1px solid var(--accent-emphasis);
    border-radius: 2em;
    white-space: nowrap;
    transition: background-color var(--dur) var(--ease-out),
                color var(--dur) var(--ease-out);
}

.gh-series-badge:hover {
    background-color: var(--accent-emphasis);
    color: var(--fg-onEmphasis);
    text-decoration: none;
}

.gh-series-badge .gh-icon {
    flex-shrink: 0;
}

/* 系列内上下篇：与全局上下篇同构，间距收紧并加系列前缀提示 */
.gh-series-neighbor {
    margin-top: 24px;
}

/* ---------- F7：搜索词高亮 ---------- */
/* 复用 attention 令牌（light #fff8c5 / dark 半透明橙），与 GitHub 搜索高亮同色 */
.gh-mark {
    padding: 1px 2px;
    margin: 0 -1px;
    background-color: var(--attention-subtle);
    color: inherit;
    border-radius: 3px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* ---------- 阶段 17：评论字数 ---------- */
.gh-comment-count {
    margin-right: auto;
    font-size: 12px;
    color: var(--fg-muted);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   v2.2.0：时间线页面（仿 GitHub 竖线时间轴）
   结构：.gh-timeline > 面包屑 + .gh-timeline-head(卡片) + .gh-timeline-body(连续轴线)
   轴线：body 左侧竖条；年份圆点/节点圆点以页面底色遮罩轴线形成「节点」
   ========================================================================== */
.gh-timeline {
    max-width: 860px;
    margin: 0 auto;
}

.gh-timeline-head {
    padding: 16px 20px;
    margin-bottom: 24px;
}

.gh-timeline-head-main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.gh-timeline-head-main > .gh-icon {
    color: var(--fg-muted);
    flex-shrink: 0;
}

.gh-timeline-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--fg-default);
    line-height: 1.3;
}

.gh-timeline-sub {
    font-size: 13px;
}

.gh-timeline-stats {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-left: auto; /* 与标题同一排：统计条贴右；窄屏 flex-wrap 自然换行 */
    font-size: 13px;
}

/* 年份锚点导航（chip 组，仅多年时显示） */
.gh-timeline-years {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border-muted);
}

.gh-timeline-year-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--fg-default);
    background-color: var(--canvas-subtle);
    border: 1px solid var(--border-default);
    border-radius: 999px;
    text-decoration: none;
    transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}

.gh-timeline-year-chip:hover,
.gh-timeline-year-chip:focus-visible {
    color: var(--fg-onEmphasis);
    background-color: var(--accent-emphasis);
    border-color: var(--accent-emphasis);
}

.gh-timeline-year-chip .gh-counter {
    background-color: var(--counter-bg);
}

/* 轴线容器：左侧贯穿竖线 */
.gh-timeline-body {
    position: relative;
    padding-left: 28px;
}

.gh-timeline-body::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background-color: var(--border-default);
    border-radius: 1px;
}

/* 年份分组头：sticky 在顶栏下方（桌面端），圆点骑在轴线上 */
.gh-timeline-year {
    scroll-margin-top: 84px;
}

.gh-timeline-year-head {
    position: sticky;
    top: 64px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* 轴线中心在 body 坐标 8px；圆点视觉宽 16px（border-box），左缘需落 0，
       内容左缘 28px，负外边距 28px 让圆点骑上轴线（pill 圆角吞掉左侧露出） */
    margin: 0 0 12px -28px;
    padding: 4px 12px 4px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--fg-default);
    background-color: var(--canvas-default);
    border-radius: 999px;
}

.gh-timeline-year-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--canvas-default);
    border: 2px solid var(--accent-emphasis);
    flex-shrink: 0;
}

.gh-timeline-list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}

/* 单条：节点圆点 + 内容卡片 */
.gh-timeline-item {
    position: relative;
    margin-bottom: 12px;
    padding-left: 2px;
}

.gh-timeline-item:last-child {
    margin-bottom: 0;
}

.gh-timeline-node {
    position: absolute;
    left: -27px; /* 视觉中心 = 28-27+7(含border) = 8 = 轴线中心 */
    top: 14px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--canvas-default);
    border: 2px solid var(--fg-muted);
    box-sizing: content-box;
}

.gh-timeline-item:hover .gh-timeline-node,
.gh-timeline-item:focus-within .gh-timeline-node {
    border-color: var(--accent-emphasis);
}

.gh-timeline-card {
    padding: 12px 16px;
    background-color: var(--canvas-default);
    border: 1px solid var(--border-default);
    border-radius: 6px;
    transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.gh-timeline-card:hover {
    border-color: var(--accent-fg);
    box-shadow: var(--shadow-lift);
}

.gh-timeline-date {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--fg-muted);
    font-variant-numeric: tabular-nums;
    margin-bottom: 4px;
}

.gh-timeline-item-title {
    display: inline;
    font-size: 15px;
    font-weight: 600;
    color: var(--fg-default);
    text-decoration: none;
    line-height: 1.4;
    word-break: break-word;
}

.gh-timeline-item-title:hover {
    color: var(--accent-fg);
    text-decoration: underline;
}

.gh-tl-pin {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 8px;
    padding: 1px 7px;
    font-size: 11px;
    color: var(--attention-fg);
    background-color: var(--attention-subtle);
    border-radius: 999px;
    vertical-align: middle;
    white-space: nowrap;
}

.gh-timeline-excerpt {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--fg-muted);
    line-height: 1.6;
    word-break: break-word;
}

.gh-timeline-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 10px;
    font-size: 12px;
    color: var(--fg-muted);
}

/* 空态 */
.gh-timeline-empty {
    padding: 48px 24px;
    text-align: center;
    color: var(--fg-muted);
}

.gh-timeline-empty > .gh-icon {
    color: var(--fg-subtle);
    margin-bottom: 12px;
}

.gh-timeline-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 24px 0 8px;
    font-size: 12px;
}

/* 移动端：轴线收窄，sticky 年份头关闭（避免顶栏遮挡） */
@media (max-width: 767px) {
    .gh-timeline {
        max-width: 100%;
    }

    .gh-timeline-body {
        padding-left: 20px;
    }

    .gh-timeline-body::before {
        left: 5px;
    }

    .gh-timeline-node {
        left: -20px; /* 移动端视觉中心 = 20-20+6 = 6 = 轴线中心 */
        width: 8px;
        height: 8px;
    }

    .gh-timeline-year-head {
        position: static;
        padding-left: 0;
        margin-left: -22px; /* 移动端内容左缘 20px，圆点左缘需落 -2px */
    }
}

/* ---------- v2.3.0：标签聚合页（仿 GitHub Topics） ---------- */
.gh-tags-head-main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.gh-tags-head-main > .gh-icon {
    color: var(--fg-muted);
    flex-shrink: 0;
}

.gh-tags-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

.gh-tags-sub {
    font-size: 13px;
}

.gh-tags-stats {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-left: auto; /* 与标题同一排：统计贴右；窄屏 flex-wrap 自然换行 */
    font-size: 13px;
}

.gh-tags-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.gh-tag-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background-color: var(--canvas-default);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    color: var(--fg-default);
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease;
}

.gh-tag-card:hover,
.gh-tag-card:focus-visible {
    border-color: var(--accent-fg);
    background-color: var(--canvas-subtle);
    text-decoration: none;
}

.gh-tag-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 6px;
    color: var(--topic-fg);
    background-color: var(--topic-bg);
}

.gh-tag-card-name {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gh-tag-card-num {
    flex-shrink: 0;
}

.gh-tags-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 24px;
    text-align: center;
    color: var(--fg-muted);
}

.gh-tags-empty > .gh-icon {
    color: var(--fg-subtle);
}

.gh-tags-foot {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    font-size: 12px;
}

@media (max-width: 767px) {
    .gh-tags-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 8px;
    }

    .gh-tag-card {
        padding: 10px 12px;
    }
}

/* ---------- v2.4.0：系列枢纽页（仿 GitHub repositories 列表） ---------- */
.gh-serieslist-head-main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.gh-serieslist-head-main > .gh-icon {
    color: var(--fg-muted);
    flex-shrink: 0;
}

.gh-serieslist-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

.gh-serieslist-sub {
    font-size: 13px;
}

.gh-serieslist-stats {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-left: auto; /* 与标题同一排：统计贴右；窄屏 flex-wrap 自然换行 */
    font-size: 13px;
}

.gh-serieslist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.gh-series-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    background-color: var(--canvas-default);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    color: var(--fg-default);
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease;
}

.gh-series-card:hover,
.gh-series-card:focus-visible {
    border-color: var(--accent-fg);
    background-color: var(--canvas-subtle);
    text-decoration: none;
}

.gh-series-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: var(--topic-fg);
    background-color: var(--topic-bg);
    flex-shrink: 0;
}

.gh-series-card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.gh-series-card-name {
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gh-series-card:hover .gh-series-card-name {
    color: var(--accent-fg);
}

.gh-series-card-last {
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gh-series-card-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: auto;
    font-size: 12px;
    color: var(--fg-muted);
}

.gh-serieslist-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 24px;
    text-align: center;
    color: var(--fg-muted);
}

.gh-serieslist-empty > .gh-icon {
    color: var(--fg-subtle);
}

.gh-serieslist-foot {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    font-size: 12px;
}

@media (max-width: 767px) {
    .gh-serieslist-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* ---------- v2.4.0：归档总览页（仿 GitHub contributions 汇总视图） ---------- */
.gh-archive-head-main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.gh-archive-head-main > .gh-icon {
    color: var(--fg-muted);
    flex-shrink: 0;
}

.gh-archive-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

.gh-archive-sub {
    font-size: 13px;
}

.gh-archive-stats {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-left: auto; /* 与标题同一排：统计贴右；窄屏 flex-wrap 自然换行 */
    font-size: 13px;
}

.gh-archive-years {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
}

.gh-archive-year {
    padding: 16px 18px;
    background-color: var(--canvas-default);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    scroll-margin-top: 84px; /* sticky 顶栏锚点补偿（markdown.css [id] 同契约） */
}

.gh-archive-year-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 14px;
}

.gh-archive-year-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.gh-archive-year-count {
    font-size: 13px;
}

.gh-archive-months {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 96px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.gh-archive-month {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex: 1 0 36px;
    height: 100%;
    color: var(--fg-default);
    text-decoration: none;
    border-radius: 6px;
    padding: 4px 2px;
}

.gh-archive-month:hover,
.gh-archive-month:focus-visible {
    background-color: var(--canvas-subtle);
    text-decoration: none;
}

.gh-archive-bar {
    width: 18px;
    min-height: 4px;
    border-radius: 3px 3px 0 0;
    background-color: var(--topic-bg);
    border: 1px solid var(--topic-fg);
    border-bottom: none;
    flex-shrink: 0;
    transition: background-color .15s ease;
}

.gh-archive-month:hover .gh-archive-bar {
    background-color: var(--topic-fg);
}

.gh-archive-month-label {
    font-size: 11px;
    color: var(--fg-muted);
    line-height: 1;
}

.gh-archive-month-num {
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.gh-archive-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 24px;
    text-align: center;
    color: var(--fg-muted);
}

.gh-archive-empty > .gh-icon {
    color: var(--fg-subtle);
}

.gh-archive-foot {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    font-size: 12px;
}

@media (max-width: 767px) {
    .gh-archive-year {
        padding: 12px 14px;
    }

    .gh-archive-months {
        height: 80px;
        gap: 6px;
    }
}

/* ---------- 关于页（v2.5.0，仿 GitHub profile 首页） ---------- */
.gh-about-grid {
    display: grid;
    grid-template-columns: 296px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.gh-about-profile {
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
}

/* 关于页头像：与首页侧栏一致的大头像，但脱离卡片容器独立呼吸 */
.gh-about-avatar {
    width: 100%;
    max-width: 296px;
}

.gh-about-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.gh-about-h2 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.gh-about-h2 .gh-icon {
    color: var(--fg-muted);
}

.gh-about-more {
    margin-left: auto;
    font-size: 12px;
    font-weight: 400;
    color: var(--accent-fg);
}

/* 统计卡：四宫格，仿 GitHub overview 数字块 */
.gh-about-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.gh-about-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 8px;
    text-align: center;
    color: var(--fg-default);
    background-color: var(--canvas-subtle);
    border: 1px solid var(--border-muted);
    border-radius: 6px;
    transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

a.gh-about-stat:hover {
    text-decoration: none;
    border-color: var(--border-default);
    transform: translateY(-1px);
}

.gh-about-stat .gh-icon {
    color: var(--fg-muted);
}

.gh-about-stat b {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.gh-about-stat span {
    font-size: 12px;
    color: var(--fg-muted);
}

/* 里程碑 */
.gh-about-mile-row {
    display: flex;
    gap: 12px;
    padding: 6px 0;
    font-size: 14px;
    line-height: 21px;
}

.gh-about-mile-row + .gh-about-mile-row {
    border-top: 1px solid var(--border-muted);
}

.gh-about-mile-when {
    flex-shrink: 0;
    width: 120px;
    font-variant-numeric: tabular-nums;
}

/* 热门标签：topic pill + 计数后缀 */
.gh-about-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gh-about-tag-num {
    margin-left: 4px;
    font-size: 11px;
}

/* 最新发文 */
.gh-about-recent-list {
    display: flex;
    flex-direction: column;
}

.gh-about-recent-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    font-size: 14px;
    line-height: 21px;
}

.gh-about-recent-list li + li {
    border-top: 1px solid var(--border-muted);
}

.gh-about-recent-list a {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gh-about-recent-date {
    flex-shrink: 0;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

/* 窄屏：档案卡与主体纵向堆叠，头像缩至 128px 横排信息 */
@media (max-width: 767px) {
    .gh-about-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .gh-about-avatar {
        max-width: 128px;
    }

    .gh-about-profile {
        display: grid;
        grid-template-columns: 128px minmax(0, 1fr);
        column-gap: 16px;
        align-items: start;
    }

    .gh-about-profile .gh-avatar {
        grid-row: 1 / span 5;
    }

    .gh-about-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .gh-about-mile-row {
        flex-direction: column;
        gap: 2px;
    }

    .gh-about-mile-when {
        width: auto;
    }

    .gh-about-recent-list li {
        flex-direction: column;
        gap: 2px;
        /* 桌面规则残留 align-items: baseline，纵向排列下不再拉伸子项，
           超长标题会按内容撑宽 → 显式 stretch，让 a 的 ellipsis 约束生效 */
        align-items: stretch;
    }
}

/* ---------- v2.6.0：友链页（仿 GitHub Topics 卡片网格） ---------- */
.gh-links-head-main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.gh-links-head-main > .gh-icon {
    color: var(--fg-muted);
    flex-shrink: 0;
}

.gh-links-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

.gh-links-sub {
    font-size: 13px;
}

.gh-links-stats {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-left: auto;
    font-size: 13px;
}

.gh-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.gh-link-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background-color: var(--canvas-default);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    color: var(--fg-default);
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}

.gh-link-card:hover,
.gh-link-card:focus-visible {
    border-color: var(--accent-fg);
    background-color: var(--canvas-subtle);
    text-decoration: none;
    transform: translateY(-1px);
}

.gh-link-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 8px;
    color: var(--topic-fg);
    background-color: var(--topic-bg);
    overflow: hidden;
}

.gh-link-card-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.gh-link-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gh-link-card-name {
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gh-link-card-des {
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gh-link-card-ext {
    flex-shrink: 0;
    color: var(--fg-muted);
    opacity: 0;
    transition: opacity .15s ease;
}

.gh-link-card:hover .gh-link-card-ext,
.gh-link-card:focus-visible .gh-link-card-ext {
    opacity: 1;
}

.gh-links-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 24px;
    text-align: center;
    color: var(--fg-muted);
}

.gh-links-empty > .gh-icon {
    color: var(--fg-subtle);
}

.gh-links-foot {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    font-size: 12px;
}

@media (max-width: 767px) {
    .gh-links-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .gh-link-card {
        padding: 12px 14px;
    }
}

/* ---------- v2.6.0：搜索即时下拉（仿 GitHub command palette） ---------- */
.gh-search-drop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 60;
    max-height: 360px;
    overflow-y: auto;
    background-color: var(--canvas-overlay, var(--canvas-default));
    border: 1px solid var(--border-default);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    padding: 4px;
}

.gh-search-drop-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 6px;
    color: var(--fg-default);
    text-decoration: none;
    cursor: pointer;
}

.gh-search-drop-item:hover,
.gh-search-drop-item.gh-search-drop-active {
    background-color: var(--canvas-subtle);
    text-decoration: none;
}

.gh-search-drop-item.gh-search-drop-active .gh-search-drop-title {
    color: var(--accent-fg);
}

.gh-search-drop-title {
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gh-search-drop-meta {
    font-size: 11px;
}

.gh-search-drop-empty {
    padding: 10px;
    font-size: 12px;
    color: var(--fg-muted);
    text-align: center;
}

@media (max-width: 767px) {
    .gh-search-drop {
        max-height: 300px;
    }
}

/* ---------- v2.7.0 F1：书签按钮（文章页悬浮栏，图标明暗态切换） ---------- */
#gh-bookmark .gh-rail-icon {
    display: none;
}

#gh-bookmark .gh-rail-icon-off {
    display: inline-flex;
}

#gh-bookmark.marked .gh-rail-icon-off {
    display: none;
}

#gh-bookmark.marked .gh-rail-icon-on {
    display: inline-flex;
    animation: gh-bookmark-pop 320ms var(--ease-out);
}

#gh-bookmark.marked {
    color: var(--accent-fg);
    border-color: var(--accent-emphasis);
}

@keyframes gh-bookmark-pop {
    0% {
        transform: scale(0.4);
        opacity: 0;
    }
    60% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    #gh-bookmark.marked .gh-rail-icon-on {
        animation: none;
    }
}

/* ---------- v2.7.0 F1：关于页最近阅读卡（双 tab + 书签删除） ---------- */
.gh-history-tabs {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    background-color: var(--canvas-subtle);
    border-radius: 6px;
}

.gh-history-tab {
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    color: var(--fg-muted);
    background: transparent;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.gh-history-tab:hover {
    color: var(--fg-default);
}

.gh-history-tab-active {
    color: var(--fg-default);
    background-color: var(--canvas-default);
    box-shadow: var(--shadow-xs);
}

.gh-about-history-hint {
    margin-left: auto;
    font-size: 11px;
    font-weight: 400;
}

.gh-about-history-empty {
    padding: 12px 0 4px;
    font-size: 13px;
    color: var(--fg-muted);
}

.gh-about-recent-list li .gh-history-del {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    padding: 0;
    font-size: 14px;
    line-height: 1;
    color: var(--fg-subtle);
    background: transparent;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    transition: color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}

.gh-about-recent-list li .gh-history-del:hover {
    color: var(--danger-fg);
    background-color: var(--canvas-subtle);
}

/* ---------- v2.7.0 F2：列表排序栏 ---------- */
.gh-sortbar {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gh-sortbar-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--fg-muted);
    white-space: nowrap;
    cursor: pointer;
}

.gh-sort-select {
    width: auto;
    min-width: 112px;
    padding: 4px 28px 4px 10px;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%236e7781' d='M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

.gh-sortbar-loading {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 150ms ease;
}

@media (max-width: 767px) {
    .gh-sortbar {
        flex: 1;
        justify-content: flex-end;
    }

    .gh-sortbar-label {
        display: none;
    }

    .gh-sort-select {
        min-width: 0;
        flex: 0 1 auto;
    }

    .gh-about-history-hint {
        display: none;
    }
}