/**
 * StarRiver 星河模板 - 主样式（方案 B · 卡片杂志墙）
 * 设计语言：暖灰白底 + 纯白卡片 + 发丝描边 + 单一强调色
 * 版本：2.0.0
 */

/* ========== 设计令牌 ========== */
:root {
    color-scheme: light;
    --ink-rgb: 29, 27, 34;
    --ink: #1d1b22;              /* 主文字 */
    --ink-soft: #57535f;         /* 次要文字 */
    --ink-mute: #6e6b7c;         /* 说明文字 */
    --gray: #87838f;             /* 元信息 */
    --gray-light: #a29fb0;       /* 占位 / 最浅（日期、URL、空状态线稿） */
    --ink-body: #3c3944;         /* 正文（原设计稿正文色） */
    --line: #edeae6;             /* 描边 */
    --panel: #f7f5f1;            /* 页面底色 */
    --paper: #ffffff;            /* 卡片 / 浮层底色 */
    --paper-rgb: 255, 255, 255;  /* 纸色三通道：用于「底色 + 纸色遮罩」的透明叠加 */
    --accent: #c2643f;
    --accent-tint: #fbeee8;
    --accent-wash: #fdf6f2;
    --accent-soft: rgba(194, 100, 63, .12);
    --accent-shadow: rgba(194, 100, 63, .28);
    --c1: #3f8f63; --c2: #c2643f; --c3: #3b6fb5; --c4: #8a5cb8;
    --c5: #a5813a; --c6: #4a8c8c; --c7: #7a6cc4; --c8: #b1593a;
    --radius: 14px;
    --radius-sm: 8px;
    --radius-lg: 16px;
    --shadow: 0 1px 2px rgba(var(--ink-rgb),.03), 0 8px 20px rgba(var(--ink-rgb),.05);
    --shadow-hover: 0 4px 8px rgba(var(--ink-rgb),.05), 0 18px 40px rgba(var(--ink-rgb),.12);
    /* 标签云基色（六色相，与分类色系同源）——
     * 贴纸实际颜色由文件下方 @supports 用 color-mix 从基色派生：
     * 底色混入卡片底色、文字混入正文色，深浅模式自动适应；
     * 选到马卡龙主题色时由 JS 给 <html> 打 data-tg-tone="pastel"，
     * 基色切换成马卡龙六色相（见下方选择器），六个标签依旧各不相同 */
    --tg-c0: #3f8f63; --tg-c1: #c2643f; --tg-c2: #3b6fb5;
    --tg-c3: #8a5cb8; --tg-c4: #a5813a; --tg-c5: #4a8c8c;
    /* 兜底（不支持 color-mix 的旧浏览器）：沿用原固定六色贴纸 */
    --tg0-bg: #eaf4ee; --tg0-fg: #3f8f63;
    --tg1-bg: #fbeee8; --tg1-fg: #c2643f;
    --tg2-bg: #eaf0f9; --tg2-fg: #3b6fb5;
    --tg3-bg: #f3ecfa; --tg3-fg: #8a5cb8;
    --tg4-bg: #fdf4e0; --tg4-fg: #a5813a;
    --tg5-bg: #e6f2f2; --tg5-fg: #4a8c8c;
    --code-bg: #f3efe9;   /* 行内代码底色 */
    --code-fg: #b1593a;   /* 行内代码文字 */
    --cover-fade: rgba(255, 255, 255, .78);   /* 文章封面底部的过渡色（浅色=白，融入卡片） */
    /* 字体令牌三级：`*-base` 是系统默认栈，模板设置换字体时**不动它们**；
     * `--font` / `--font-head` / `--font-code` 才是最终生效值，
     * 由 core/fonts.php 按「后台 → 模板 → 设置 → 字体」的槽位覆盖成
     * `"所选字体", var(--…-base)`，所以不配置时与升级前完全一致。 */
    --font-base: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
            "Noto Sans SC", "Source Han Sans SC", sans-serif;
    --font-code-base: ui-monospace, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
    --font: var(--font-base);
    --font-head: var(--font);             /* 标题默认跟随正文字体 */
    --font-code: var(--font-code-base);   /* 代码默认走等宽栈 */
    --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", Georgia, serif;
    --container-w: 1180px;
}

/* 马卡龙主题：标签云六色相整体换成马卡龙家族（依旧六色各异）——
 * 由 js（main.js / sr-theme-init.js）按所选主题色是否马卡龙预设打 data-tg-tone */
html[data-tg-tone="pastel"] {
    /* 标签云六色相换成马卡龙家族 */
    --tg-c0: #d96f8a; --tg-c1: #5e93ab; --tg-c2: #35a074;
    --tg-c3: #7c89cc; --tg-c4: #b99a2c; --tg-c5: #d67445;
    /* 分类八色（列表徽章 / 侧栏分类圆点 / 分类胶囊图标 / 评论头像兜底）同步换成
     * 马卡龙家族，与标签云同一套柔和调；实心底 + 白字，对比 3.1~4.0 仍可读 */
    --c1: #2a9a70; --c2: #d5617f; --c3: #56889f; --c4: #7381c6;
    --c5: #ac9024; --c6: #489c9c; --c7: #8b70cb; --c8: #ce6c3c;
}

/* 标签云六档贴纸：基色混入卡片底色 / 正文色（深浅模式自动适应）——
 * 放进 @supports，旧浏览器自动跳过，沿用上方 :root 里的固定贴纸兜底 */
@supports (color: color-mix(in srgb, red 50%, blue)) {
    :root {
        --tg0-bg: color-mix(in srgb, var(--tg-c0) 12%, var(--paper));
        --tg0-fg: color-mix(in srgb, var(--tg-c0) 80%, var(--ink));
        --tg1-bg: color-mix(in srgb, var(--tg-c1) 12%, var(--paper));
        --tg1-fg: color-mix(in srgb, var(--tg-c1) 80%, var(--ink));
        --tg2-bg: color-mix(in srgb, var(--tg-c2) 12%, var(--paper));
        --tg2-fg: color-mix(in srgb, var(--tg-c2) 80%, var(--ink));
        --tg3-bg: color-mix(in srgb, var(--tg-c3) 12%, var(--paper));
        --tg3-fg: color-mix(in srgb, var(--tg-c3) 80%, var(--ink));
        --tg4-bg: color-mix(in srgb, var(--tg-c4) 12%, var(--paper));
        --tg4-fg: color-mix(in srgb, var(--tg-c4) 80%, var(--ink));
        --tg5-bg: color-mix(in srgb, var(--tg-c5) 12%, var(--paper));
        --tg5-fg: color-mix(in srgb, var(--tg-c5) 80%, var(--ink));
    }
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body {
    margin: 0;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.75;
    color: var(--ink);
    background: var(--panel);
    /* 长链接 / 长英文单词不断行时的横向溢出兜底（可继承） */
    overflow-wrap: break-word;
}
/* 标题统一走 --font-head：默认 = var(--font)，即跟随正文字体（与升级前完全一致）；
 * 后台「字体」设置里单独选了标题字体时才产生差异。
 * 品牌名 / 小工具标题 / 列表区标题不是 <h*>，一并列上，否则只有一半标题会换字体 */
h1, h2, h3, h4, h5, h6, .brand, .wg-st, .list-hd .tt { font-family: var(--font-head); }
a { color: inherit; text-decoration: none; transition: color .2s; }
a:hover { color: var(--accent); }
img { display: block; max-width: 100%; height: auto; }   /* height:auto：有 width/height 属性 + max-width 时防止等比失效被拉伸 */
/* 加载失败的兜底图（js/main.js 换成内联 SVG）：灰色画布让 letterbox 区域无缝融入 */
img.img-failed { background: #ecebf0; }
.banner img, .p .img img { width: 100%; }
button { font-family: inherit; }
/* 所有页面主容器的统一留白（顶 16 与首页 .layout 一致；改这里全站生效） */
.container { max-width: var(--container-w); margin: 0 auto; padding: 16px 20px 40px; }

/* ========== 表单聚焦态（统一） ==========
 * 一层强调色描边 + 一圈柔和光晕，代替浏览器原生 outline：
 * 原生 outline 与各输入框自己的 border 会叠成「双框」，
 * 且文本输入框聚焦时必定命中 :focus-visible（自动聚焦也会出现）。
 */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ========== 顶栏 ========== */
.top { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 100; }
.top .in { max-width: var(--container-w); margin: 0 auto; padding: 0 20px; height: 64px; display: flex; align-items: center; gap: 24px; }
.brand { font-weight: 800; font-size: 1.18rem; }
.brand em { color: var(--accent); font-style: normal; }
.nav { display: flex; gap: 6px; font-size: .9rem; }
.nav a { padding: 6px 13px; border-radius: 8px; color: var(--ink-soft); }
.nav a:hover { background: var(--panel); color: var(--ink); }
.nav a.on { background: var(--accent-tint); color: var(--accent); font-weight: 700; }

/* ========== 导航子级（下拉菜单） ==========
 * 桌面：悬停 / 键盘聚焦展开；移动端（下方媒体查询）改为内联横向展开，
 * 因为移动端 .nav 是横向滚动容器，绝对定位的下拉会被裁切。
 */
.nav-item { position: relative; }
.nav-link.has-down { display: inline-flex; align-items: center; gap: 4px; }
.nav-link.has-down svg { width: 12px; height: 12px; stroke: currentColor; opacity: .55; transition: transform .2s ease; }
.nav-item:hover .nav-link.has-down svg,
.nav-item:focus-within .nav-link.has-down svg { transform: rotate(180deg); }
.nav-item.on > .nav-link { background: var(--accent-tint); color: var(--accent); font-weight: 700; }

.nav-sub {
    position: absolute; top: calc(100% + 8px); left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 136px; padding: 6px; display: flex; flex-direction: column; gap: 2px;
    background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: var(--shadow-hover); z-index: 30;
    opacity: 0; visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
/* 悬停桥接：鼠标从父项移向子菜单的间隙不丢焦点 */
.nav-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
/* 展开：鼠标悬停（CSS）或键盘聚焦（JS 加 .sub-open，见 main.js initNavSub）
 * 注意：仅靠 :focus-within 不行 —— visibility:hidden 容器内的链接无法获得焦点，
 * 必须先展开才能把焦点移进去（键盘 Tab 会先聚焦父链接 → 加类展开 → 再进子项）。 */
.nav-item:hover .nav-sub,
.nav-item:focus-within .nav-sub,
.nav-item.sub-open .nav-sub { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-sub a { padding: 7px 12px; border-radius: 8px; font-size: .86rem; white-space: nowrap; }
.nav-sub a.on { background: var(--accent-tint); color: var(--accent); font-weight: 700; }
.top .r { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.top input.search-k { width: 170px; padding: 8px 14px; border-radius: 20px; border: 1px solid var(--line); background: var(--panel); outline: none; font-size: .86rem; font-family: inherit; }
.top input.search-k:focus { border-color: var(--accent); background: var(--paper); }
/* 降级态（关闭「搜索面板」）的普通搜索框：前置放大镜图标（绝对定位，不占 flex 位）
   注意 sr_icon 的 svg 无描边色，必须显式给 stroke: currentColor，否则图标不可见 */
.top .search-k-form { position: relative; display: inline-flex; align-items: center; }
.top .search-k-form > svg {
    position: absolute;
    left: 12px;
    width: 15px;
    height: 15px;
    color: var(--gray);
    stroke: currentColor;
    pointer-events: none;   /* 点图标也聚焦到输入框 */
}
.top .search-k-form input.search-k { padding-left: 34px; }
.top .search-k-form:focus-within > svg { color: var(--accent); }
.btn { padding: 8px 18px; border-radius: 20px; border: none; cursor: pointer; background: var(--accent); color: #fff !important; font-size: .86rem; font-weight: 700; white-space: nowrap; }
/* 次级按钮（幽灵按钮）：与主按钮同尺寸，纸底 + 发丝描边 —— 访问弹窗的「按钮 2」、用户中心快捷操作等共用。
 * color 需要 !important：.btn 本身用 !important 定了白字，不用同样权重压不过去 */
.btn.ghost { background: var(--paper); border: 1px solid var(--line); color: var(--ink-soft) !important; }
.btn.ghost:hover { border-color: var(--accent-tint); color: var(--accent) !important; }

/* 已登录用户：头像 + 悬停下拉 */
.user { position: relative; }
.user-btn { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 20px; border: 1px solid var(--line); background: var(--paper); cursor: pointer; transition: border-color .2s, box-shadow .2s; white-space: nowrap; }
.user-btn img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.user-btn .nm { font-size: .86rem; font-weight: 600; color: var(--ink-soft); max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user:hover .user-btn { border-color: var(--accent-tint); box-shadow: 0 4px 12px rgba(var(--ink-rgb),.06); }
.user-menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 176px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 2px 4px rgba(var(--ink-rgb),.04), 0 14px 34px rgba(var(--ink-rgb),.12); padding: 7px; z-index: 30; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility .18s; }
.user::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }
.user:hover .user-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.user-menu a { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 8px; font-size: .86rem; color: var(--ink-soft); }
.user-menu a:hover { background: var(--panel); color: var(--accent); }
.user-menu a svg { width: 15px; height: 15px; stroke: currentColor; opacity: .75; }
.user-menu .div { height: 1px; background: var(--line); margin: 6px 4px; }
.user-menu a.out { color: #b1593a; }
.user-menu a.out:hover { background: var(--accent-tint); }

/* 主题色切换器 */
.theme { position: relative; }
.theme-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); cursor: pointer; background: var(--paper); color: var(--ink); display: grid; place-items: center; transition: color .2s, border-color .2s, box-shadow .2s; }
.theme-btn svg { width: 18px; height: 18px; stroke: currentColor; }
.theme-btn:hover { color: var(--accent); border-color: var(--accent-tint); box-shadow: 0 4px 12px rgba(var(--ink-rgb),.10); }

/* 登录：与主题按钮同尺寸的实心圆形图标按钮（保留 CTA 强调感） */
.btn-login {
    width: 36px;
    height: 36px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent);
    color: #fff !important;
    transition: transform .18s cubic-bezier(.22, .61, .36, 1), box-shadow .18s cubic-bezier(.22, .61, .36, 1);
}
.btn-login svg { width: 18px; height: 18px; stroke: currentColor; }
.btn-login:hover {
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px var(--accent-shadow);
}

/* 外观模式切换按钮：只显示「当前生效模式」的图标 */
.mode-btn .mi { display: none; place-items: center; }
.mode-btn .mi svg { width: 17px; height: 17px; }
html[data-mode="light"] .mode-btn .mi-light,
html[data-mode="dark"]  .mode-btn .mi-dark { display: grid; }
/* 后台设为「跟随系统」时，按系统偏好显示对应图标（纯 CSS，不依赖 JS） */
@media (prefers-color-scheme: light) {
    html[data-mode="auto"] .mode-btn .mi-light { display: grid; }
}
@media (prefers-color-scheme: dark) {
    html[data-mode="auto"] .mode-btn .mi-dark { display: grid; }
}
.theme-pop { position: absolute; top: calc(100% + 10px); right: 0; display: none; grid-template-columns: repeat(6, 1fr); gap: 9px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 2px 4px rgba(var(--ink-rgb),.04), 0 14px 34px rgba(var(--ink-rgb),.12); padding: 12px; z-index: 40; }
.theme.pop-open .theme-pop { display: grid; }
.theme-pop button { width: 28px; height: 28px; border-radius: 8px; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); cursor: pointer; transition: transform .15s; }
.theme-pop button:hover { transform: scale(1.12); }
.theme-pop button.on { box-shadow: 0 0 0 2px var(--ink); }

/* ========== 深色模式 ==========
 * html[data-mode="dark"] 为访客/后台指定的深色；
 * html[data-mode="auto"] 交给系统偏好（下方媒体查询）。
 * 只覆盖令牌，组件样式全部自动适配。
 */
html[data-mode="dark"] {
    color-scheme: dark;
    --ink-rgb: 0, 0, 0;
    --ink: #e9e6f0;
    --ink-soft: #bab6c7;
    --ink-mute: #9c98aa;
    --ink-body: #d8d4e2;
    --gray: #8c8899;
    --gray-light: #6e6b7c;
    --line: #302d3b;
    --panel: #14121a;
    --paper: #1c1a24;
    --paper-rgb: 28, 26, 36;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 24px rgba(0,0,0,.32);
    --shadow-hover: 0 6px 14px rgba(0,0,0,.42), 0 22px 48px rgba(0,0,0,.5);
    /* 强调色派生（访客选了颜色时由 JS 按当前底色重算覆盖） */
    --accent-tint: #302327;
    --accent-wash: #261e26;
    --accent-soft: rgba(194, 100, 63, .18);
    --accent-shadow: rgba(194, 100, 63, .34);
    --code-bg: #262330;
    --code-fg: #e8a88c;
    /* 代码块（.codeblock）深色档：底色取 paper 与 line 之间的抬升层，
     * 与站内深色同一紫调，不再用固定 #2b2830 发灰 */
    --cb-bg: #232030;
    --cb-border: #302d3b;
    /* 封面过渡深色档：不再发白，直接往卡片底色压过去（浅色标题才有对比度） */
    --cover-fade: rgba(28, 26, 36, .82);
}

@media (prefers-color-scheme: dark) {
    html[data-mode="auto"] {
        color-scheme: dark;
        --ink-rgb: 0, 0, 0;
        --ink: #e9e6f0;
        --ink-soft: #bab6c7;
        --ink-mute: #9c98aa;
    --ink-body: #d8d4e2;
        --gray: #8c8899;
        --gray-light: #6e6b7c;
        --line: #302d3b;
        --panel: #14121a;
        --paper: #1c1a24;
        --paper-rgb: 28, 26, 36;
        --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 24px rgba(0,0,0,.32);
        --shadow-hover: 0 6px 14px rgba(0,0,0,.42), 0 22px 48px rgba(0,0,0,.5);
        /* 强调色派生（访客选了颜色时由 JS 按当前底色重算覆盖） */
        --accent-tint: #302327;
        --accent-wash: #261e26;
        --accent-soft: rgba(194, 100, 63, .18);
        --accent-shadow: rgba(194, 100, 63, .34);
    --code-bg: #262330;
    --code-fg: #e8a88c;
    --cb-bg: #232030;
    --cb-border: #302d3b;
    --cover-fade: rgba(28, 26, 36, .82);
    }
}

/* 切换瞬间的柔和过渡（JS 临时加 .mode-anim，避免常驻全局过渡拖慢交互） */
html.mode-anim,
html.mode-anim * {
    transition: background-color .28s ease, border-color .28s ease,
                color .28s ease, box-shadow .28s ease !important;
}

/* ========== 布局与卡片 ========== */
.layout { max-width: var(--container-w); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.main-column { min-width: 0; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }

/* 头条横幅 */
.banner { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: 0 10px 30px rgba(var(--ink-rgb),.10); margin-bottom: 16px; }
.banner img { width: 100%; height: 300px; object-fit: cover; }
.banner .ov { position: absolute; inset: 0; padding: 26px 28px; background: linear-gradient(90deg, rgba(12,10,16,.88) 8%, rgba(12,10,16,.45) 55%, rgba(12,10,16,.08)); display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; color: #fff; overflow: hidden; }
.banner .rib { align-self: flex-start; font-size: .76rem; font-weight: 700; padding: 3px 11px; border-radius: 6px 6px 6px 0; color: #fff; }
/* 标题固定单行：超出用省略号截断，保证文字层高度恒定（按钮位置不漂移） */
.banner h2 { margin: 0; font-size: 1.42rem; line-height: 1.4; max-width: 78%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 摘要固定两行高度：无摘要或摘要很短时同样占位，保证下方元素位置不变 */
.banner .ex { margin: 0; max-width: 72%; color: rgba(255,255,255,.76); font-size: .84rem; line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: calc(2 * 1.6em); }
.banner .m { display: flex; align-items: center; gap: 14px; font-size: .78rem; color: rgba(255,255,255,.7); }
.banner .m .mi svg { opacity: .7; }
.banner .m .au { display: inline-flex; align-items: center; gap: 7px; }
.banner .m .av { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; border: 1.5px solid rgba(255,255,255,.6); }
.banner .go { align-self: flex-start; margin-top: 4px; background: #fff; color: var(--ink) !important; padding: 8px 18px; border-radius: 22px; font-size: .86rem; font-weight: 700; }
.banner.nocv { background: linear-gradient(135deg, var(--accent-wash), var(--paper) 70%); min-height: 200px; display: flex; }
.banner.nocv .ov { position: static; background: none; color: var(--ink); padding: 34px 32px; }
.banner.nocv h2 { color: var(--ink); max-width: 100%; }
.banner.nocv .ex { color: var(--gray); max-width: 100%; }
.banner.nocv .m { color: var(--gray); }

/* 分类色带 */
.tabs { display: flex; gap: 10px; margin: 0 0 18px; flex-wrap: wrap; }
.tabs a { padding: 5px 14px; border-radius: 8px; font-size: .84rem; font-weight: 600; background: var(--paper); border: 1px solid var(--line); color: var(--ink-soft); }
.tabs a.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.tabs a:hover { color: var(--accent); border-color: var(--accent-tint); }
.tabs a.on:hover { color: #fff; }

/* 文章卡片网格 */
.post-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.post-grid + .pager { margin-top: 28px; }

/* ========== 首页文章布局（模板设置 → 首页 → 首页文章布局） ==========
 * 一份标记 + 一个布局类：列出 / 双列 / 三列只切换网格列数与卡片形态，卡片标记完全一致
 *   .cols-list   单列：卡片横置（左封面 + 右内容），适合摘要较长的阅读型站点
 *   .cols-two    双列：默认形态，无需额外规则
 *   .cols-three  三列：紧凑卡片（隐藏作者名与标签，给元信息留出空间）
 * ⚠️ 选择器权重是 `.post-grid.cols-*`（两个类），高于响应式段里的 `.post-grid`（一个类），
 *    所以窄屏降档必须在本段内显式写回，不能依赖后面那个媒体查询。 */
.post-grid.cols-list { grid-template-columns: minmax(0, 1fr); gap: 16px; }
/* 单列只在 ≥981px 才是「横向大卡片」（左封面 + 右内容）；窄屏就用基础纵向卡片，无需额外覆盖 */
@media (min-width: 981px) {
    /* 卡片最矮高度 = 标题两行 + 摘要两行 + 底行（标签 + 元信息）。
     * 关键点：**不给标题预留空行** —— 标题只有一行时多出的空间由「贴底」吸收，
     * 落在底行上方（和双列一个道理），而不是夹在标题与摘要之间（那是最难看的位置）。 */
    .post-grid.cols-list .p { flex-direction: row; min-height: 178px; }
    .post-grid.cols-list .p .img { flex: 0 0 268px; }
    /* 封面绝对定位铺满左侧：若只写 height:100%，flex 计算行的交叉尺寸时仍会拿图片的
     * 固有高度（4:3 封面在 268px 宽下约 201px）当基准，卡片就又比别的卡高一截 */
    .post-grid.cols-list .p .img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    /* 正文区改网格：标题 / 摘要各占一行，**标签与元信息合到同一行**（单列宽度够，
     * 合并后整整矮一行）；末行 1fr 吃掉余量，两格内容各自贴底对齐。
     * 底行左右分列：**元信息靠左、标签靠右**（想对调就换 areas 里 "ft tg" 的顺序并互换两格的 justify-self） */
    .post-grid.cols-list .p .bd {
        padding: 15px 18px 14px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, auto);
        /* 末行用 minmax(0,1fr)：默认的 1fr 最小值是 auto，
         * 会被「标签容器换行后堆叠的高度」顶起来 —— 带标签的卡片就比别的卡高出一截 */
        grid-template-rows: auto auto minmax(0, 1fr);
        grid-template-areas: "h3 h3" "ex ex" "ft tg";
    }
    .post-grid.cols-list .p .bd > h3 { grid-area: h3; font-size: 1.18rem; }
    .post-grid.cols-list .p .bd > .ex { grid-area: ex; }
    /* 元信息整块靠左：justify-self 让它按内容收缩 —— 否则在 1fr 格子里，
     * .sp（阅读 / 评论）会被 margin-left:auto 推到最右、贴着标签，看着像被拆成两截 */
    .post-grid.cols-list .p .bd > .ft { grid-area: ft; justify-self: start; align-self: end; margin: 0; padding-top: 0; border-top: none; }
    /* 标签一行排到底（超长横向裁切），换行会让卡片高度不再统一 */
    .post-grid.cols-list .p .bd > .tg { grid-area: tg; justify-self: end; align-self: end; margin: 0 0 0 14px; flex-wrap: nowrap; overflow: hidden; }
}
/* ⚠️ 上面这个 } 是 @media (min-width: 981px) 的闭合：丢了它，后面整份样式表
 * （含全部 ≤980/≤560 响应式规则）都会被吞进这个块，窄屏直接退化成桌面布局 */

.post-grid.cols-three { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
/* 卡片最矮高度 = 封面 136 + 标题两行 + 摘要两行 + 元信息；同样不给标题预留空行，
 * 余量由 .ft 的 margin-top:auto 吸收到元信息上方 */
.post-grid.cols-three .p { min-height: 296px; }
.post-grid.cols-three .p .img img { height: 136px; }
/* 三列卡片小，分类色带也收一档，别喧宾夺主 */
.post-grid.cols-three .p .img .rib { left: 10px; top: 10px; font-size: .68rem; padding: 2px 8px; border-radius: 5px; }
.post-grid.cols-three .p .bd { padding: 12px 14px 10px; }
.post-grid.cols-three .p h3 { font-size: .96rem; }
.post-grid.cols-three .p .ex { font-size: .8rem; }
/* 三列卡片窄（约 280px）：只隐藏标签行（标签改由分类色带 / 文章页承接），
 * 头像 + 作者名 + 发布时间照常完整显示 */
.post-grid.cols-three .p .tg { display: none; }
/* 标签被隐藏后，把「贴底」的任务交给元信息行（原来靠 .tg 的 margin-top:auto），
 * 否则卡片虽被网格拉伸到等高，元信息却停在摘要下方，卡片底部看起来参差不齐 */
.post-grid.cols-three .p .ft { gap: 8px; font-size: .72rem; margin-top: auto; white-space: nowrap; }
/* 卡片只有约 280px 宽，元信息会从「2026-9-」处断成两行（一处日期两行、一处一行，高度又不一样）；
 * nowrap 让每段文字不被拆开、只在「整块」之间换行（.sp 被挤下来时也只是礼貌降级） */
.post-grid.cols-three .p .ft .sp { gap: 4px; }
/* 作者名：三列也要完整显示（早期为省宽度被隐藏）。给它收缩 + 省略号，
 * 名字特别长时才截断，不会把右侧的阅读 / 评论挤出去 */
.post-grid.cols-three .p .ft > span:not(.mi):not(.sp) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* 「阅读 212 · 评论 19」已简化为「图标 + 数字」，中间的分隔点可以去掉省宽度（图标本身分得清） */
.post-grid.cols-three .p .ft .sep { display: none; }

/* 三列 → 双列（侧栏仍在，三列会挤） */
@media (max-width: 1140px) {
    .post-grid.cols-three { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ≤980px：与全站列表一致降为单列（单列的横向卡片也在此退回基础纵向卡片） */
@media (max-width: 980px) {
    .post-grid.cols-three { grid-template-columns: minmax(0, 1fr); }
}

/* ========== PJAX 局部刷新：加载态 + 切换动画 ========== */
.list-region { position: relative; }
.list-region.pjax-loading { pointer-events: none; }
/* 顶部细进度条（斜向流光） */
.list-region.pjax-loading::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    background-size: 40% 100%;
    background-repeat: no-repeat;
    animation: srPjaxBar .9s ease-in-out infinite;
    z-index: 3;
}
@keyframes srPjaxBar {
    0%   { background-position: -40% 0; }
    100% { background-position: 140% 0; }
}

/* ---- 离场（替换前）：由容器 data-anim 决定效果 ---- */
.list-region[data-anim="fade"].pjax-out {
    opacity: 0;
    transition: opacity .18s ease;
}
.list-region[data-anim="slide"].pjax-out {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .18s ease, transform .18s ease;
}
.list-region[data-anim="zoom"].pjax-out {
    opacity: 0;
    transform: scale(.985);
    transition: opacity .18s ease, transform .18s ease;
}
.list-region[data-anim="blur"].pjax-out {
    opacity: .25;
    filter: blur(5px);
    transition: opacity .18s ease, filter .18s ease;
}
/* data-anim="none"：无离场动画，仅保留进度条 */

/* ---- 入场（替换后） ---- */
.list-region.pjax-in[data-anim="fade"] { animation: srPjaxFade .3s ease both; }
.list-region.pjax-in[data-anim="slide"] { animation: srPjaxSlide .34s cubic-bezier(.22, .61, .36, 1) both; }
.list-region.pjax-in[data-anim="zoom"] { animation: srPjaxZoom .32s cubic-bezier(.22, .61, .36, 1) both; }
.list-region.pjax-in[data-anim="blur"] { animation: srPjaxBlur .34s ease both; }

@keyframes srPjaxFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes srPjaxSlide {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
@keyframes srPjaxZoom {
    from { opacity: 0; transform: scale(.985); }
    to   { opacity: 1; transform: none; }
}
@keyframes srPjaxBlur {
    from { opacity: 0; filter: blur(6px); }
    to   { opacity: 1; filter: blur(0); }
}

/* 系统开启「减少动态效果」时：只保留轻微淡出，不位移/缩放/模糊 */
@media (prefers-reduced-motion: reduce) {
    .list-region.pjax-loading::before { animation: none; background-position: 50% 0; }
    .list-region.pjax-out {
        transform: none !important;
        filter: none !important;
        opacity: .6 !important;
        transition: none !important;
    }
    .list-region.pjax-in { animation: none !important; }
}
.p { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .18s, box-shadow .18s; display: flex; flex-direction: column; }
.p:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.p .img { position: relative; display: block; }
.p .img img { width: 100%; height: 172px; object-fit: cover; }
.p .img .rib { position: absolute; left: 14px; top: 14px; font-size: .74rem; font-weight: 700; color: #fff; padding: 3px 10px; border-radius: 6px; }
.p .bd { padding: 15px 17px 13px; display: flex; flex-direction: column; flex: 1; }
.p h3 { margin: 0 0 7px; font-size: 1.05rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.p .ex { margin: 0 0 9px; font-size: .84rem; line-height: 1.75; min-height: 3.5em; color: var(--ink-mute); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* 摘要「固定两行」：display:-webkit-box + line-clamp 只是最多两行，摘要短时盒子只有一行高，
 * 卡片高度就会随摘要长短变化。故显式写死行高并按 2 行（2 × 1.75em = 3.5em）预留高度，
 * 内容不足也占位。各布局若改了摘要行数，务必同步改这里的 min-height（改第几行就乘几倍）。 */
/* 搜索关键词高亮：搜索结果页的标题/摘要（服务端 sr_hl()）与搜索面板的实时结果（JS）共用同一标记。
 * 放在始终加载的 style.css 里 —— search.css 只在「搜索面板」开启时加载，不能依赖它。 */
mark.kw { background: transparent; color: var(--accent); font-weight: 700; }

.p .tg { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.p .tg a { font-size: .72rem; padding: 2px 9px; border-radius: 5px; background: var(--panel); color: var(--ink-mute); }
.p .tg a:hover { background: var(--accent-tint); color: var(--accent); }
.p .ft { display: flex; align-items: center; gap: 12px; font-size: .76rem; color: var(--gray); padding-top: 9px; border-top: 1px solid var(--line); margin-top: 8px; }
.p .ft .av { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--line); }
.p .ft .sp { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }

/* 分类徽章色 */
.rib { color: #fff; }
.rib.s0 { background: var(--c1); } .rib.s1 { background: var(--c2); }
.rib.s2 { background: var(--c3); } .rib.s3 { background: var(--c4); }
.rib.s4 { background: var(--c5); } .rib.s5 { background: var(--c6); }
.rib.s6 { background: var(--c7); } .rib.s7 { background: var(--c8); }

/* 分页 */
.pager { text-align: center; }
.pager a, .pager span.pg { display: inline-block; min-width: 40px; padding: 8px 15px; margin: 0 5px; border-radius: 22px; background: var(--paper); border: 1px solid var(--line); color: var(--ink-soft); font-size: .88rem; font-weight: 600; transition: transform .15s, background .15s, color .15s, border-color .15s; }
.pager a:hover { transform: translateY(-2px); color: var(--accent); border-color: var(--accent-tint); }
.pager a.cur, .pager span.cur { background: var(--accent); border-color: var(--accent); color: #fff; }
.pager .info { display: block; margin-top: 14px; font-size: .78rem; color: var(--gray); }

/* ========== 侧栏 ========== */
.side-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.side-card + .side-card { margin-top: 16px; }
.wg-st { padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: .92rem; font-weight: 700; display: flex; align-items: center; gap: 9px; }
/* 标题前图标：替代原先的彩色小方块，沿用原配色节奏（accent / c3 交替）
 * 用 color + currentColor 同时兼容两种图标：线性图标靠 stroke 着色，
 * 填充图标（如「最新文章」火焰，fill="currentColor"）靠 fill 着色 */
.wg-st svg { width: 16px; height: 16px; color: var(--accent); stroke: currentColor; flex-shrink: 0; }
.wg-st.alt svg { color: var(--c3); }
/* 填充风格图标比线性图标视觉更重，缩小 1px 做光学平衡 */
.wg-st svg[fill="currentColor"] { width: 15px; height: 15px; }

/* 博主卡 */
.me { text-align: center; padding: 22px 18px 18px; background: linear-gradient(180deg, var(--accent-wash), var(--paper) 62%); }
.me img { width: 74px; height: 74px; border-radius: 50%; margin: 0 auto 10px; object-fit: cover; border: 3px solid #fff; box-shadow: 0 6px 16px rgba(var(--ink-rgb),.10); }
.me b { font-size: 1.06rem; }
.me p { margin: 6px 0 0; font-size: .8rem; color: var(--gray); }
.me .nums { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 14px; }
.me .nums div b { display: block; font-size: 1.02rem; }
.me .nums div span { font-size: .72rem; color: var(--gray); }
.me .socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }
.me .socials a { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--line); color: var(--ink-mute); font-size: .74rem; font-weight: 700; transition: all .2s; }
.me .socials a:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-2px); }
.me .socials a svg { width: 16px; height: 16px; stroke: currentColor; }
.me .socials a svg[fill="currentColor"] { width: 15px; height: 15px; stroke: currentColor; }

/* 排行榜列表 */
.rank { margin: 0; padding: 0; list-style: none; }
.rank li { display: flex; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: .86rem; }
.rank li:last-child { border-bottom: none; }
.rank .no { width: 18px; flex-shrink: 0; font-weight: 800; font-style: italic; color: #d9d5de; }
.rank li:nth-child(1) .no { color: var(--accent); }
.rank li:nth-child(2) .no { color: #e0a03c; }
.rank li:nth-child(3) .no { color: var(--c1); }
.rank a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rank .dt { display: block; margin-top: 3px; font-size: .74rem; color: var(--gray); font-weight: 400; }

/* 侧栏撑满与正文等高的列高 —— 目录吸附组（.side-sticky）才有足够的 sticky 行程 */
.side-bar { position: relative; align-self: stretch; }

/* 吸附组：目录卡 + 其后所有卡片。滚过博主卡后整组吸附在顶栏下方，
 * 目录始终可见；到侧栏区域结束（正文/评论区到底）后随页面恢复滚动。
 * 比视口高时组内滚动，保证所有卡片都够得着。窄屏堆叠时不吸附。 */
.side-sticky {
    position: sticky; top: 65px;   /* = 顶栏高度：卡片自带 margin-top 20px 提供间距，与初始态一致不叠加 */
    /* 高度不超过视口；超出部分直接裁掉，**不做内部滚动**：
     *   · 一旦可滚动，鼠标滚轮悬停在侧栏上会先滚它 —— 目录卡被滚上去就会露出空隙；
     *   · 也顺带避开了滚动条（自定义 webkit 滚动条在 macOS 上会从浮层变成占位条，
     *     把组内卡片挤窄，和博主卡宽度不一致）。 */
    max-height: calc(100vh - 85px);
    overflow: hidden;
}
/* 目录卡与其上一张卡片（博主卡）的间距，与其它卡片间 20px 保持一致
 * （原本靠 .side-card + .side-card 相邻选择器，被本容器隔断后需补回） */
.side-sticky > .side-card:first-child { margin-top: 16px; }
/* 内容被裁切时（JS 打标记）底部渐隐，提示下面还有卡片，避免硬切断的观感 */
.side-sticky.is-clipped {
    -webkit-mask-image: linear-gradient(#000 calc(100% - 26px), rgba(0, 0, 0, .15));
    mask-image: linear-gradient(#000 calc(100% - 26px), rgba(0, 0, 0, .15));
}

/* ---------- 文章目录（TOC，文章详情页的侧栏组件，见 js/toc.js） ---------- */
/* 设计参考 StarRiver 主题的 ArticleTOC：归一化层级 + 深层折叠 + H 徽标；
 * 点击目录后平滑滚动：用 scroll-margin-top 给顶栏留位。92px 只是无 JS 兜底，
 * 实际值由模板设置「标题吸顶距离」经 toc.js 动态覆盖（与高亮判定线共用） */
.body h2, .body h3, .body h4, .body h5, .body h6 { scroll-margin-top: 92px; }

/* 卡片内滚动（长目录不撑爆侧栏），细滚动条；左右内边距让目录不贴边 */
.toc {
    max-height: 400px; overflow-y: auto; overflow-x: hidden;
    /* overflow-x 必须显式 hidden：overflow-y:auto 会让 x 方向也变 auto，
     * 激活项 scale(1.08) 的视觉溢出会被算进滚动区域 → 卡片底部冒出横向滚动条 */
    padding: 2px 12px 10px;
    font-size: 13px; line-height: 1.5;
    scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.toc::-webkit-scrollbar { width: 4px; }
.toc::-webkit-scrollbar-track { background: transparent; }
.toc::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }
.toc::-webkit-scrollbar-thumb:hover { background: var(--gray); }

.toc ul { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 0; padding: 0; }
.toc a {
    position: relative; display: block;
    padding: 5px 6px 5px 34px;      /* 左侧 34px 为「H2/H3」徽标留出的固定凹槽 */
    color: var(--ink-mute); text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    border-radius: 6px;
    transform-origin: left center;  /* 激活放大从左侧长出，贴着缩进不跑偏 */
    transition: color .22s ease, background .22s ease, transform .22s ease;
}
/* 徽标：显示**原始**标题级别（H2/H3/H4…），所有层级对齐在同一竖向凹槽里 */
.toc a::before {
    content: "H" attr(data-original-level);
    position: absolute; top: 50%; left: 4px; transform: translateY(-50%);
    padding: 1px 3px; border: 1px solid var(--line); border-radius: 3px;
    background: var(--paper); color: var(--gray);
    font-size: 9px; font-weight: 400; line-height: 1.2; letter-spacing: .02em;
    opacity: .7; pointer-events: none;
}
.toc a:hover { color: var(--accent); background: var(--accent-wash); }
/* 激活项：变色 + 整行 scale 放大（transform 不占布局，不会把相邻行挤跳动） */
.toc a.active { color: var(--accent); transform: scale(1.08); }
.toc a.active::before { color: var(--accent); border-color: var(--accent-tint); opacity: 1; }

/* 层级：全部统一为 13px / 600（恢复原字号档位 + 全粗体），
 * 层级感只靠子列表缩进与「H2/H3」徽标区分，不再用字号字重做差异 */
.toc .toc-h1, .toc .toc-h2, .toc .toc-h3,
.toc .toc-h4, .toc .toc-h5, .toc .toc-h6 { font-size: 13px; font-weight: 600; }

/* 子列表：折叠用 max-height/opacity 过渡（JS 切换 .toc-collapsed 并做动画） */
.toc .toc-children { margin: 0; padding: 0; overflow: hidden; }
.toc .toc-children.toc-collapsed { max-height: 0; opacity: 0; overflow: hidden; }
.toc .toc-h1 + .toc-children { margin-left: 12px; }

/* 带子目录的项：右侧一枚箭头（收起 ↓ 展开），点击同时切换折叠 + 跳转 */
.toc .toc-toggle { padding-right: 22px; cursor: pointer; }
.toc .toc-toggle::after {
    content: ""; position: absolute; top: 50%; right: 8px; margin-top: -3px;
    width: 5px; height: 5px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);            /* 默认指右 = 子目录收起 */
    transition: transform .2s ease; opacity: .55;
}
.toc .toc-toggle.expanded::after { transform: rotate(45deg); }   /* 展开 = 指向下 */

/* 模板设置「目录折叠图标 = 隐藏」：只去掉箭头与预留的内边距，
 * .toc-toggle 类仍在 —— 点击标题折叠/展开、滚动自动展开分支的行为不受影响 */
.toc[data-toc-noicon] .toc-toggle { padding-right: 0; }
.toc[data-toc-noicon] .toc-toggle::after { display: none; }

/* ---- 带缩略图的最新文章（.rank.thumbed） ---- */
.rank.thumbed li { padding: 10px 18px; align-items: center; }
.rank.thumbed a { display: flex; align-items: center; gap: 11px; -webkit-line-clamp: none; overflow: visible; width: 100%; }
.rank .th {
    flex: 0 0 64px; width: 64px; height: 48px; border-radius: 8px; overflow: hidden;
    background: linear-gradient(135deg, var(--accent-wash), var(--accent-tint));
    display: flex; align-items: center; justify-content: center; color: var(--accent);
}
.rank .th img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .32s ease; }
.rank.thumbed a:hover .th img { transform: scale(1.06); }
.rank .th.nocv svg { width: 19px; height: 19px; stroke: currentColor; opacity: .5; }
.rank .tx { flex: 1; min-width: 0; }
.rank .tt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 标签云 */
.wg-tags { display: flex; flex-wrap: wrap; gap: 9px; padding: 16px 18px; }
.wg-tags a { font-size: .78rem; padding: 4px 12px; border-radius: 7px; font-weight: 600; }
.tg0 { background: var(--tg0-bg); color: var(--tg0-fg); } .tg1 { background: var(--tg1-bg); color: var(--tg1-fg); }
.tg2 { background: var(--tg2-bg); color: var(--tg2-fg); } .tg3 { background: var(--tg3-bg); color: var(--tg3-fg); }
.tg4 { background: var(--tg4-bg); color: var(--tg4-fg); } .tg5 { background: var(--tg5-bg); color: var(--tg5-fg); }

/* 分类行 */
.wg-cats { padding: 4px 0; }
.wg-cats .li { display: flex; align-items: center; gap: 10px; padding: 10px 18px; font-size: .88rem; }
.wg-cats .li:hover { background: var(--panel); }
.wg-cats .li i { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.wg-cats .li span.n { margin-left: auto; color: var(--gray); font-size: .78rem; }
.wg-cats .li.child { padding-left: 36px; }

/* 搜索/归档/评论/链接/微语/自定义小工具 */
.wg-search { padding: 16px 18px; display: flex; gap: 8px; }
.wg-search input { flex: 1; min-width: 0; padding: 9px 13px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); font-size: .84rem; font-family: inherit; outline: none; }
.wg-search input:focus { border-color: var(--accent); background: var(--paper); }
.wg-search button { padding: 8px 15px; border-radius: 9px; border: none; background: var(--accent); color: #fff; font-weight: 700; cursor: pointer; }
.wg-archive { padding: 14px 18px; }
.wg-archive select { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); font-family: inherit; font-size: .86rem; color: var(--ink); outline: none; }
.wg-cmt, .wg-tw { padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: .84rem; }
.wg-cmt:last-child, .wg-tw:last-child { border-bottom: none; }
.wg-cmt .who, .wg-tw .who { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.wg-cmt .who b, .wg-tw .who b { font-size: .84rem; }
.wg-cmt .who time, .wg-tw .who time { margin-left: auto; font-size: .72rem; color: var(--gray); }

/* ========== 微语图片：固定尺寸 + 宫格 ==========
 * 展示点三处：微语页（.tw-bd）、侧栏「最新微语」（.wg-tw）、用户中心微语（.uc-tw）。
 * 图片由 module.php 的 sr_tw_split_images() / sr_tw_gallery() 从正文里抽出来拼成 .tw-imgs，
 * data-count 决定列数：1 张 → 单张大图；2 / 4 张 → 两列；其余 → 三列小方块。
 * 尺寸全由 CSS 定死（编辑器带进来的 width/height/内联样式都会被丢掉），同一批图不会大小不一；
 * 各展示点只改 --tw-tile / --tw-tile-lg 两个变量。 */
.tw-imgs {
    --tw-tile: 132px;
    --tw-tile-lg: 232px;
    display: grid;
    grid-template-columns: repeat(3, var(--tw-tile));
    gap: 6px;
    margin: 10px 0 0;
    width: max-content;      /* 方块多大就占多宽，不把整行撑满 */
    max-width: 100%;
}
.tw-imgs[data-count="2"], .tw-imgs[data-count="4"] { grid-template-columns: repeat(2, var(--tw-tile)); }
.tw-imgs[data-count="1"] { grid-template-columns: var(--tw-tile-lg); }
.tw-imgs img { display: block; width: 100%; height: var(--tw-tile); object-fit: cover; border-radius: 8px; }
.tw-imgs[data-count="1"] img { height: calc(var(--tw-tile-lg) * .75); }   /* 单图不裁成方块 */
.tw-imgs a { display: block; line-height: 0; }
/* 与文字混排、没被抽成宫格的零散图片：也收成固定小方块 */
.tw-bd img:not(.sr-sticker),
.wg-tw p img:not(.sr-sticker),
.uc-tw .bd img:not(.sr-sticker) {
    display: inline-block; vertical-align: top;
    width: 132px; height: 132px; object-fit: cover;
    border-radius: 8px; margin: 6px 6px 0 0;
}
/* 侧栏小工具窄（约 230px）：方块收小一档 */
.wg-tw .tw-imgs { --tw-tile: 64px; --tw-tile-lg: 132px; gap: 4px; margin-top: 6px; }
.wg-tw p img:not(.sr-sticker) { width: 64px; height: 64px; margin: 4px 4px 0 0; }

@media (max-width: 560px) {
    .tw-imgs { --tw-tile: 104px; --tw-tile-lg: 200px; gap: 4px; }
    .tw-bd img:not(.sr-sticker),
    .uc-tw .bd img:not(.sr-sticker) { width: 104px; height: 104px; }
}
.wg-cmt .avc, .wg-tw .avc { width: 22px; height: 22px; border-radius: 50%; background: var(--panel); display: grid; place-items: center; font-size: .7rem; color: var(--ink-mute); }
/* 真实头像（与上面的首字母色块同尺寸、同位置） */
.wg-cmt .who img.av, .wg-tw .who img.av { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 0 1px var(--line); }
.wg-cmt p, .wg-tw p { margin: 0; color: var(--ink-mute); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wg-cmt p a:hover, .wg-tw p a:hover { color: var(--accent); }
.wg-links { padding: 6px 0; }
.wg-links .li { display: flex; align-items: center; gap: 8px; padding: 9px 18px; font-size: .86rem; }
.wg-links .li:hover { background: var(--panel); }
.wg-links .li img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.wg-custom { padding: 14px 18px; font-size: .86rem; }

/* ========== 文章详情页 ========== */
/* 单栏版式（文章页关闭侧边栏 / 独立页面） */
.post-single { max-width: 860px; margin: 0 auto; }

/* 封面：底部渐隐融入卡片，标题区上压在浅色区之上 */
.card > .cover { position: relative; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; }
.card > .cover img { width: 100%; height: 320px; object-fit: cover; display: block; }
.card > .cover::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(18,16,22,.55) 0%, rgba(18,16,22,.16) 36%, var(--cover-fade) 70%, var(--paper) 92%);
}
.card > .cover .rib { position: absolute; left: 18px; top: 18px; z-index: 1; font-size: .76rem; font-weight: 700; color: #fff; padding: 3px 11px; border-radius: 6px; }

.head { padding: 8px 32px 20px; border-bottom: 1px solid var(--line); position: relative; z-index: 1; }
/* 有封面时标题区上移，压在封面底部浅色区上（无封面则不加，避免顶到卡片外） */
.card.has-cover .head { margin-top: -100px; }
.head h1 { margin: 0 0 14px; font-size: 1.72rem; line-height: 1.4; }
.head .meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; font-size: .82rem; color: var(--gray); }
/* 头像发丝描边：白底头像（如透明底 PNG 垫白）在白卡片上会「融」进背景，
 * 一圈 1px 浅线勾出边界；非白底头像几乎无感。深色模式 --line 自动变深。 */
.head .meta .av { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--line); margin-right: -6px; }
.head .meta b { color: var(--ink); font-weight: 600; }
/* 评论计数不是强调对象：跟「阅读 545」一样保持常规字重与灰色 */
.head .meta b[data-count-num] { color: inherit; font-weight: 400; font-variant-numeric: tabular-nums; }
/* 编辑入口：规格与其它元信息项（阅读/评论）完全一致 —— 13px 图标 + 文字、灰色，悬停亮强调色 */
.head .meta .edit-link { color: var(--gray); display: inline-flex; align-items: center; gap: 5px; transition: color .18s ease; }
.head .meta .edit-link svg { width: 13px; height: 13px; stroke: currentColor; opacity: .82; flex-shrink: 0; }
.head .meta .edit-link:hover { color: var(--accent); opacity: 1; }
.head .meta .sp { margin-left: auto; display: flex; gap: 14px; align-items: center; }
/* 日期邮戳：做成「印章」观感 —— 外圈粗环 + 内圈齿孔虚线 + 印泥般的半透明墨色，
 * 再加一点倾斜（盖章很少端端正正）。日号用衬线体居中，年月两级排版。
 * 排版约束：圆形下缘的可用宽度是「弦宽」而非直径（越靠下越窄），
 * 因此固定 60px 圆 + 收紧行距/年月字号，让整块文字落在圆的内切区域内，
 * 「2026.09」不会顶到描边（原 52px 圆 + .62rem 时文字会压线）。 */
.head .meta .date-stamp {
    position: relative;
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    width: 60px; height: 60px; flex: 0 0 60px;
    border: 2px solid var(--accent); border-radius: 50%;
    color: var(--accent); opacity: .88; transform: rotate(-7deg);
    line-height: 1; gap: 2px; user-select: none;
}
/* 内圈：细虚线环，模拟邮戳/印章的齿孔圈 */
.head .meta .date-stamp::before {
    content: ""; position: absolute; inset: 3px;
    border: 1px dashed var(--accent); border-radius: 50%;
    opacity: .65; pointer-events: none;
}
.head .meta .date-stamp b {
    color: inherit;   /* 印章是同色墨：日号跟随邮戳的强调色，不被 .meta b 的深色规则盖掉 */
    font-family: var(--font-serif); font-size: 1.24rem; line-height: .92;
    font-variant-numeric: tabular-nums;
}
/* 年月：小字号 + 等宽数字 + 600 字重，小尺寸下依旧清晰且不撑宽 */
.head .meta .date-stamp span {
    font-size: .52rem; line-height: 1.1; letter-spacing: .01em; white-space: nowrap;
    font-variant-numeric: tabular-nums; font-weight: 600; opacity: .95;
}
/* 正文排版：字号与全站基准一致（1rem / 16px）、行高 1.8，中文长段落更透气；
 * letter-spacing 给汉字留一丝空隙；break-word 防长英文串/链接顶破容器 */
.body { padding: 26px 32px; font-size: 1rem; line-height: 1.8; letter-spacing: .01em; word-break: break-word; }
.body h2 { font-size: 1.28rem; margin: 1.7em 0 .7em; padding-left: 12px; border-left: 4px solid var(--accent); line-height: 1.4; }
.body h3 { font-size: 1.1rem; margin: 1.5em 0 .6em; }
.body p { margin: 1em 0; color: var(--ink-body); }
/* ---- 正文图片：插图式排版 ----
 * 全局 img 已是 display:block + max-width:100% + height:auto，这里补三件事：
 *  1) margin auto 水平居中 —— 小图（如 200px 头像图）不再顶在左边；
 *  2) 上下各留 1.4em，与文字隔开，图文不打架；
 *  3) 统一圆角 + 柔和投影，和站内卡片一个视觉语言 */
.body img { margin: 1.4em auto; border-radius: 10px; box-shadow: var(--shadow); }
/* 窄屏：26/32 的正文内边距在手机上太奢侈，收紧一档；字号已随根字号（15px）自动缩小 */
@media (max-width: 560px) {
    .body { padding: 18px 16px; }
    .body img { margin: 1.2em auto; }
}
.body ul, .body ol { padding-left: 1.4em; margin: .9em 0; }
.body li { margin: .3em 0; }
.body li::marker { color: var(--accent); }
.body blockquote { margin: 1.2em 0; padding: 13px 18px; border-radius: 10px; background: var(--accent-wash); border-left: 4px solid var(--accent); color: #6b5f58; }
.body blockquote p { margin: 0; }
.body code { font-family: var(--font-code); }
.body :not(pre) > code { background: var(--code-bg); color: var(--code-fg); padding: 2px 7px; border-radius: 5px; font-size: .84em; }
/* pre 也要显式指定：浏览器默认给 pre 套的是 UA 等宽字体，不写就跟不上「代码字体」设置 */
.body pre { background: #2b2830; color: #e8e4f0; border-radius: 10px; padding: 16px 18px; overflow-x: auto; font-family: var(--font-code); font-size: .84rem; line-height: 1.7; }
.body pre code { background: none; padding: 0; }

/* ---- 代码块增强（highlight.js + 行号 + 复制，见 js/sr-codeblock.js） ----
 * .codeblock 是增强后的容器：工具条（语言/复制）+ 行号列 + 代码；
 * 未被增强的 pre（设置关闭 / 库缺失 / 纯 pre 无 code）沿用上面的兜底样式 */
/* 底色走令牌：浅色模式固定 #2b2830，深色模式由 --cb-bg 换成与站内深色同调的抬升层；
 * 深色下再补一圈 --cb-border 细边，与卡片同款描边语言（主题 t-* 类在元素上自带 --cb-bg，不受影响） */
.body .codeblock { background: var(--cb-bg, #2b2830); border: 1px solid var(--cb-border, transparent); border-radius: 10px; overflow: hidden; margin: 1.2em 0; }

/* 各主题的容器底色（与 highlight.js 官方主题的 .hljs 背景一致，行号列/工具条贴合同一底色） */
.body .codeblock.t-atom-one-dark { --cb-bg: #282c34; }
.body .codeblock.t-nord { --cb-bg: #2e3440; }
.body .codeblock.t-github-dark { --cb-bg: #0d1117; }
.body .codeblock.t-github { --cb-bg: #ffffff; }

/* 浅色主题（GitHub Light）：整块底变白，工具条/行号/滚动条从「浅白字」反转为深灰字 */
.body .codeblock.t-github .cb-bar { background: rgba(0, 0, 0, .04); border-bottom-color: rgba(0, 0, 0, .08); }
.body .codeblock.t-github .cb-lang,
.body .codeblock.t-github .cb-copy { color: #6a737d; }
.body .codeblock.t-github .cb-copy:hover { color: #24292f; background: rgba(0, 0, 0, .06); }
.body .codeblock.t-github .cb-copy.ok { color: #1a7f37; }
.body .codeblock.t-github .cb-ln { color: #8c959f; border-right-color: rgba(0, 0, 0, .08); }
.body .codeblock.t-github .cb-body pre { scrollbar-color: rgba(0, 0, 0, .25) transparent; }
.body .codeblock.t-github .cb-body pre::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .22); }
.body .codeblock.t-github .cb-body pre::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, .38); }
/* 增强块里的 pre 自身不带任何盒样式（内边距/底色/圆角都交给行号列与 code），
 * 否则会与兜底 .body pre 的 16px 18px 叠加 —— 行号和代码之间多出一截空白 */
.body .codeblock pre { margin: 0; padding: 0; background: none; border-radius: 0; overflow: visible; }

/* 工具条：左语言标签 / 右复制按钮，压在深底上的一层浅白 */
.body .cb-bar { display: flex; align-items: center; justify-content: space-between; padding: 7px 14px; background: rgba(255, 255, 255, .055); border-bottom: 1px solid rgba(255, 255, 255, .07); }
.body .cb-lang { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(232, 228, 240, .55); font-family: var(--font-code); }
.body .cb-copy { border: none; background: transparent; color: rgba(232, 228, 240, .65); font-size: .74rem; font-family: inherit; cursor: pointer; padding: 2px 6px; border-radius: 5px; transition: color .18s ease, background .18s ease; }
.body .cb-copy:hover { color: #fff; background: rgba(255, 255, 255, .09); }
.body .cb-copy.ok { color: #9fd8a8; }

/* 主体：行号列 + 代码。行号与代码共用同一 font/line-height，靠行高逐行对齐；
 * 代码横向滚动（.cb-body pre 自己滚）时行号列固定不动 */
.body .cb-body { display: flex; align-items: stretch; font-size: .84rem; line-height: 1.7; }
.body .cb-ln { flex-shrink: 0; padding: 16px 12px 16px 16px; text-align: right; color: rgba(232, 228, 240, .26); font-family: var(--font-code); user-select: none; white-space: pre; border-right: 1px solid rgba(255, 255, 255, .07); }
.body .cb-body pre { flex: 1; min-width: 0; overflow-x: auto; }
.body .cb-body pre code { display: block; padding: 16px 18px; white-space: pre; }

/* 横向滚动条美化：极细（6px）+ 半透明白色圆角滑块，悬停变亮，轨道透明贴住块底色；
 * WebKit 走 ::-webkit-scrollbar，Firefox 走 scrollbar-width/color —— 不再是系统默认的粗灰条 */
.body .cb-body pre { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .22) transparent; }
.body .cb-body pre::-webkit-scrollbar { height: 6px; }
.body .cb-body pre::-webkit-scrollbar-track { background: transparent; }
.body .cb-body pre::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); border-radius: 3px; }
.body .cb-body pre::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .38); }

/* highlight.js 令牌配色（在 #2b2830 深底上手工调校，取自模板强调色系：
 * 粉=关键字、绿=字符串、琥珀=数字、蓝=函数名、青=类型、紫=属性、灰=注释） */
.hljs-comment, .hljs-quote { color: #857f93; font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-doctag, .hljs-formula { color: #f2a1b8; }
.hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute { color: #b5d6a7; }
.hljs-number, .hljs-symbol, .hljs-bullet, .hljs-link, .hljs-meta { color: #e8c08a; }
.hljs-title, .hljs-title.function_, .hljs-section, .hljs-name, .hljs-selector-id, .hljs-selector-class { color: #9ecbf2; }
.hljs-type, .hljs-class .hljs-title, .hljs-built_in, .hljs-builtin-name { color: #7fd4c1; }
.hljs-attr, .hljs-variable, .hljs-template-variable, .hljs-params { color: #d8c9f0; }
.hljs-deletion { color: #f28b82; }
.hljs-strong { font-weight: 700; }
.hljs-emphasis { font-style: italic; }
.body img { border-radius: 12px; }
/* 灯箱锚点（js/sr-lightbox.js 包出来）：块级化消除行内基线空隙，圆角仍由图片自身承担 */
.body a.sr-lb { display: block; }

/* ========== 文章内下载块（短码 [dl …] → module.php 的 sr_dl_render()） ==========
 * 结构：.dl-list > .dl（每项）> .dl-a（主链接）+ .dl-ft（访问码 / 复制按钮）
 * 图标颜色走每项内联的 --pan（品牌色），底色 / 描边 / 文字色全部取设计令牌，深色模式自动跟随 */
.dl-list {
    margin: 1.4em 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.dl {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.dl:hover { border-color: var(--accent-soft); box-shadow: var(--shadow); }
/* 主链接行：图标 + 名称/元信息 + 右侧动作
 * 注意：正文区有 `.body a { text-decoration: underline }`（正文链接的下划线约定），
 * 这里必须显式去掉，否则名称与元信息会被整行加下划线（文字装饰会传播到子元素）。 */
.dl-a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    color: inherit;
    text-decoration: none !important;
}
.dl-a:hover { text-decoration: none !important; }
.dl-ic {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pan, var(--accent));
}
/* sr_icon 输出的线稿图标是 fill="none" + 无描边色，必须显式给 stroke: currentColor
 * （按属性的选择器，与模板既有约定一致：see .cat-pill .ico svg[fill="none"]）。
 * 只对线稿生效 —— 站长自备的多色 logo 不能被强行改成单色描边。 */
.dl-ic svg { width: 100%; height: 100%; }
.dl-ic svg[fill="none"], .pan-logo svg[fill="none"] { stroke: currentColor; }
.dl-ic .pan-logo { display: block; width: 100%; height: 100%; }
/* 兜底品牌徽标（纯 HTML/CSS，不用 SVG <text>，见 module.php 的 sr_pan_icon()） */
.dl-ic .dl-bg {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--pan, var(--accent));
    color: #fff;
    font-style: normal;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
}
.dl-ic .dl-bg.is-wide { font-size: .62rem; letter-spacing: .02em; }
.dl-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dl-nm {
    font-size: .94rem;
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dl-mt { font-size: .76rem; color: var(--gray); }
.dl-go {
    flex-shrink: 0;
    font-size: .8rem;
    font-weight: 600;
    color: var(--accent);
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--accent-tint);
    border: none;
    font-family: inherit;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}
.dl-a:hover .dl-go { background: var(--accent); color: #fff; }
/* 底部行：访问码徽章 + 复制按钮（只有存在访问码 / 需要复制时才有内容） */
.dl-ft {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 9px 16px;
    border-top: 1px dashed var(--line);
    background: var(--panel);
}
.dl-code {
    font-size: .78rem;
    color: var(--ink-mute);
}
.dl-code b {
    font-family: var(--font-code);
    font-size: .82rem;
    letter-spacing: .06em;
    color: var(--accent);
    background: var(--accent-tint);
    padding: 2px 8px;
    border-radius: 5px;
    margin-left: 2px;
}
.dl-cp {
    margin-left: auto;
    font-size: .76rem;
    font-family: inherit;
    color: var(--ink-mute);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 3px 11px;
    cursor: pointer;
    text-decoration: none;
    transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.dl-cp + .dl-cp { margin-left: 0; }
.dl-cp:hover { color: var(--accent); border-color: var(--accent-soft); background: var(--accent-tint); }
/* 锁定态（登录可见 / 评论后可见）：整体降饱和，动作按钮沿用主题按钮风格 */
.dl-locked {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border-style: dashed;
    background: var(--panel);
}
.dl-locked .dl-ic { color: var(--gray-light); }
.dl-locked .dl-nm { color: var(--ink-soft); }
/* 锁定卡片的按钮复用 .btn-login 只是为了触发前台登录弹窗（js/main.js 按类名委托），
 * 而 .btn-login 本体是顶栏那个 36px 圆形图标按钮，这里整块覆盖回文字胶囊
 * （同 user.css 里「立即登录」的处理） */
.dl-locked .dl-go {
    width: auto;
    height: auto;
    padding: 7px 18px;
    display: inline-flex;
    place-items: initial;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-weight: 600;
}
.dl-locked .dl-go:hover { background: var(--accent); color: #fff; opacity: .88; transform: none; box-shadow: none; }

/* ========== 文章内关联文章卡片（短码 [post id=…] → module.php 的 sr_post_render()） ==========
 * 视觉沿用侧栏「最新文章」那套（缩略图 64×48 + 标题两行 + 元信息），保持站内一致；
 * 同样要显式 text-decoration: none —— 正文区 `.body a` 给所有链接加了下划线。 */
.pc-list {
    margin: 1.4em 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pc {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    color: inherit;
    text-decoration: none !important;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.pc:hover { border-color: var(--accent-soft); box-shadow: var(--shadow); transform: translateY(-1px); }
.pc-cv {
    flex: 0 0 64px;
    width: 64px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--accent-wash), var(--accent-tint));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
}
/* 正文区 `.body img` 会给所有图片加 margin / 圆角 / 阴影 —— 不重置的话，
 * 缩略图会变成「渐变底上浮着一张带阴影的小图」，看起来很怪；
 * 用 .pc .pc-cv img 提高优先级，避免与 .body img 同权重时受源码顺序影响 */
.pc .pc-cv img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    transition: transform .32s ease;
}
.pc:hover .pc-cv img { transform: scale(1.06); }
.pc-cv.nocv svg { width: 19px; height: 19px; stroke: currentColor; opacity: .5; }
.pc-tx { flex: 1; min-width: 0; }
.pc-nm {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .94rem;
    font-weight: 600;
    color: var(--ink);
}
.pc:hover .pc-nm { color: var(--accent); }
.pc-ex {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 3px;
    font-size: .8rem;
    line-height: 1.6;
    color: var(--ink-mute);
}
.pc-mt { display: block; margin-top: 4px; font-size: .72rem; color: var(--gray); }

/* 全站图片懒加载（lazysizes）：占位图**始终可见**（它是「加载中的视觉填充」，
 * 不能让 opacity:0 藏起来，否则未加载区域就是一片空白——上线实测踩过）；
 * 真图到达（.lazyloaded）时做一次轻微的淡入，避免生硬跳变 */
img.lazyload, img.lazyloading { background: var(--code-bg); }
img.lazyloaded { animation: sr-lazy-in .35s ease; }
@keyframes sr-lazy-in {
    from { opacity: .4; }
    to   { opacity: 1; }
}

/* 灯箱缩略图预览条：挂进 .glightbox-container 底部，一排小图、当前张强调色描边；
 * 单张图不挂（<2 张无意义）。半透明深底 + 毛玻璃，深浅色下都成立 */
.sr-lb-thumbs {
    position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
    display: flex; gap: 8px; max-width: 82vw; overflow-x: auto;
    padding: 7px; background: rgba(18, 16, 22, .6); border-radius: 10px;
    z-index: 10000; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    scrollbar-width: none;
}
.sr-lb-thumbs::-webkit-scrollbar { display: none; }
.sr-lb-th {
    flex: 0 0 auto; width: 58px; height: 40px; padding: 0;
    border: 2px solid transparent; border-radius: 6px; overflow: hidden;
    cursor: pointer; background: none; opacity: .5;
    transition: opacity .18s ease, border-color .18s ease;
}
.sr-lb-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sr-lb-th:hover { opacity: .85; }
.sr-lb-th.on { opacity: 1; border-color: var(--accent); }

/* 缩略图条挂出后，预览图让出底部空间：
 * glightbox 默认 img max-height 97vh，压到「视口 − 150px」——
 * 图片垂直居中后，下方留白 ≥75px，恰好容纳条（约 54px + 18px 边距）互不遮挡 */
.glightbox-container.sr-lb-has-thumbs .gslide-image img { max-height: calc(100vh - 150px); }
@media (max-width: 768px) {
    .glightbox-container.sr-lb-has-thumbs .gslide-image img { max-height: calc(100vh - 130px); }
}
/* 表情包图片（服务端打上 .sr-sticker）：按「表情尺寸」内联渲染
 * 表情原图通常是 96~200px，不约束会按原图撑高整行；这里统一成 1.9em 小图 */
img.sr-sticker {
    display: inline-block;            /* 顶掉全局 img{display:block}，否则表情独占一行 */
    max-width: 1.9em; max-height: 1.9em; width: auto; height: auto;
    vertical-align: text-bottom; margin: 0 2px; border-radius: 0;
}
.body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.body table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: .86rem; }
.body th { background: var(--panel); text-align: left; }
.body th, .body td { padding: 9px 13px; border-bottom: 1px solid var(--line); }
.body hr { border: none; border-top: 1px solid var(--line); margin: 1.6em 0; }
/* ---- 底部第一行：左「标签」＋ 右「分享/操作图标行」 ---- */
.post-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 0 32px 22px; }
.post-tags { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 0; }
/* 标签药丸：浅强调色底 + 强调色字（悬停转为实心），与设计稿的浅色药丸一致 */
.post-tags a { font-size: .76rem; padding: 3px 11px; border-radius: 6px; background: var(--accent-tint); color: var(--accent); transition: background .18s ease, color .18s ease; }
.post-tags a:hover { background: var(--accent); color: #fff; }
.share-icons { display: flex; gap: 8px; flex-shrink: 0; }
.share-icons .ic {
    width: 34px; height: 34px; padding: 0; border-radius: 10px; cursor: pointer;
    display: grid; place-items: center; appearance: none;
    background: var(--panel); border: 1px solid var(--line); color: var(--ink-mute);
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
/* 线性图标靠 stroke: currentColor 着色（sr_icon 输出不含 stroke 属性） */
.share-icons .ic svg { width: 16px; height: 16px; stroke: currentColor; }
/* 填充风格图标（QQ / 微信 / 微博）视觉更重，默认缩小 1px 做光学平衡；
 * 再按实测墨量逐个配平：企鹅剪影最重（缩小到 14px）、微博带细信号波（放大到 16px） */
.share-icons .ic svg[fill="currentColor"] { width: 15px; height: 15px; }
.share-icons .ic[data-icon="qq"] svg { width: 14px; height: 14px; }
.share-icons .ic[data-icon="weibo"] svg { width: 16px; height: 16px; }
.share-icons .ic:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-2px); }
.share-icons .ic:active { transform: translateY(0); }

/* 上下篇 */
.pn { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 16px 0 0; }
/* 卡片：内容区 + 外侧箭头（上一篇箭头在左、下一篇在右） */
.pn .pn-prev, .pn .pn-next {
    position: relative; display: flex; align-items: center; gap: 12px; min-height: 96px;
    padding: 15px 18px; border-radius: 12px; overflow: hidden;
    background: var(--paper); border: 1px solid var(--line);
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.pn a:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(var(--ink-rgb),.08); color: inherit; }
.pn .pn-next { text-align: right; }   /* 箭头在右：靠 DOM 顺序（文字在前、图标在后）即可 */
.pn > span { opacity: .82; }
.pn svg { width: 20px; height: 20px; stroke: var(--accent); flex-shrink: 0; }
.pn .tx { min-width: 0; flex: 1; }
.pn .dir { font-size: .74rem; color: var(--accent); font-weight: 700; display: block; margin-bottom: 5px; }
/* 标题不加粗：正文字重，靠字号与行距区分层级 */
.pn .t { font-size: .92rem; font-weight: 400; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* 空态：没有相邻文章时弱化显示「没有更多了」 */
.pn > span.is-empty { background: transparent; border-style: dashed; }
.pn > span.is-empty .dir, .pn > span.is-empty .t { color: var(--gray); font-weight: 400; }
.pn > span.is-empty svg { stroke: var(--gray); opacity: .6; }
/* 带封面（上一篇 / 下一篇都可能）：封面作背景 + 深色遮罩，文字转白
 * 遮罩方向与文字对齐方向一致：上一篇文字在左 → 左深右浅；下一篇反之 */
.pn a.has-cover { border-color: transparent; color: #fff; text-shadow: 0 1px 3px rgba(18,16,22,.45); }
.pn a.has-cover::before {
    content: ""; position: absolute; inset: 0;
    background-image: var(--pn-cover); background-size: cover; background-position: center;
    transition: transform .35s ease;
}
.pn a.has-cover::after { content: ""; position: absolute; inset: 0; }
/* 标题已不加粗，遮罩加强一档保证封面上的可读性 */
.pn a.pn-prev.has-cover::after { background: linear-gradient(90deg, rgba(18,16,22,.84) 0%, rgba(18,16,22,.52) 58%, rgba(18,16,22,.26) 100%); }
.pn a.pn-next.has-cover::after { background: linear-gradient(270deg, rgba(18,16,22,.84) 0%, rgba(18,16,22,.52) 58%, rgba(18,16,22,.26) 100%); }
.pn a.has-cover .tx, .pn a.has-cover svg { position: relative; z-index: 1; }
.pn a.has-cover .dir { color: #fff; opacity: .88; }
.pn a.has-cover svg { stroke: #fff; }
.pn a.has-cover:hover::before { transform: scale(1.05); }

/* ========== 版权 / 许可卡片（文章底部） ==========
 * 版式：淡强调色底；原创徽章 + 标题 + 原文链接（点击复制）+ 元信息 + 声明
 */
.license {
    position: relative; overflow: hidden;
    margin: 0 32px 26px; padding: 20px 22px;
    border-radius: var(--radius);
    background: linear-gradient(100deg, var(--accent-wash) 0%, var(--accent-tint) 100%);
}
.license .lt { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; position: relative; }
.license .badge {
    flex-shrink: 0; font-size: .72rem; font-weight: 700; line-height: 1.7;
    padding: 0 9px; border-radius: 6px; background: var(--accent); color: #fff;
}
.license .lt b { font-size: 1.04rem; line-height: 1.5; }
.license .src { margin: 0 0 10px; font-size: .82rem; color: var(--gray); position: relative; word-break: break-all; }
/* 原文链接：点击即复制（js/sr-clipboard.js），用 pointer + 悬停下划线给出可点提示 */
.license .src a { color: var(--accent); cursor: pointer; }
.license .src a:hover { text-decoration: underline; text-underline-offset: 3px; }
.license .meta { display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: .8rem; color: var(--gray); position: relative; }
.license .meta i { font-style: normal; color: var(--ink); font-weight: 600; }
.license .note { margin: 12px 0 0; font-size: .82rem; color: var(--ink-soft); position: relative; }

/* ========== 页脚 ========== */
.foot { background: var(--paper); border-top: 1px solid var(--line); color: var(--gray); margin-top: 46px; }
.foot .cols { max-width: 980px; margin: 0 auto; padding: 38px 20px 30px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: center; }
.foot h4 { margin: 0 0 8px; color: var(--ink); font-size: .92rem; display: flex; align-items: center; gap: 8px; }
.foot h4::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--accent); }
.foot .about p { margin: 12px 0 16px; font-size: .84rem; line-height: 1.8; }
.foot .brand2 { font-weight: 800; font-size: 1.1rem; color: var(--ink); }
.foot .brand2 em { color: var(--accent); font-style: normal; }
.foot .socials { display: flex; gap: 10px; }
.foot .socials a { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--line); color: var(--ink-mute); transition: all .2s; }
.foot .socials a:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-2px); }
.foot .socials a svg { width: 16px; height: 16px; stroke: currentColor; }
.foot .socials a svg[fill="currentColor"] { width: 15px; height: 15px; stroke: currentColor; }
/* 友链列布局：每列固定 3 条，超出按列排（column 流向） */
.foot .flink { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, auto); column-gap: 32px; align-items: start; }
.foot .flink li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.foot .flink li:nth-last-child(-n+3) { border-bottom: none; }
.foot .flink a { color: var(--ink); font-weight: 600; font-size: .86rem; }
.foot .flink a:hover { color: var(--accent); }
.foot .flink span { font-size: .76rem; color: var(--gray-light); }
.foot .swap { margin: 12px 0 0; font-size: .76rem; color: var(--gray-light); }
.foot .bar { border-top: 1px solid var(--line); max-width: 1180px; margin: 0 auto; padding: 16px 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: .76rem; }
.foot .bar a { color: var(--gray); }
/* 底部信息条右侧分组：备案 / 网安 / 自定义（项与项之间自动加「·」分隔） */
.foot .bar .right { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-left: auto; }
.foot .bar .right > span + span::before {
    content: "·";
    margin-right: 14px;
    color: var(--gray-light);
    opacity: .8;
}
/* 窄屏：友链退回单列，避免三列过挤 */
@media (max-width: 768px) {
    .foot .flink { grid-auto-flow: row; grid-template-rows: none; }
}
.foot .bar a:hover { color: var(--accent); }

/* ========== 页面横幅（友链/工具/单页通用） ========== */
.page-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; background: linear-gradient(135deg, var(--accent-wash), var(--paper) 62%); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 30px; margin-bottom: 24px; }
.page-hero .rib { display: inline-block; font-size: .74rem; font-weight: 700; color: #fff; background: var(--accent); padding: 2px 11px; border-radius: 6px; margin-bottom: 10px; }
.page-hero h1 { margin: 0 0 6px; font-size: 1.6rem; }
.page-hero .sub { margin: 0; color: var(--gray); font-size: .88rem; }
.page-hero .stats { display: flex; gap: 12px; flex-shrink: 0; }
/* 统计框：虚线描边（手帐风）。
 * 分类 / 标签 / 归档 / 友链 / 工具箱 / 用户中心 的 hero 统计框统一走这一条，
 * 不再逐页写 .lk-hero .stat 之类的特例 —— 各页 hero 只有配色语气不同，统计框观感应一致 */
.page-hero .stat { background: var(--paper); border: 1px dashed var(--line); border-radius: 12px; padding: 12px 20px; text-align: center; }
.page-hero .stat b { display: block; font-size: 1.3rem; color: var(--accent); line-height: 1.3; }
.page-hero .stat span { font-size: .74rem; color: var(--gray); }

/* ========== 友链/工具页 ========== */
.lk-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.lk { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; gap: 13px; transition: transform .16s, box-shadow .16s, border-color .16s; }
.lk:hover { transform: translateY(-3px); border-color: var(--accent-tint); box-shadow: var(--shadow-hover); }
.lk .ico { width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0; object-fit: cover; }
.lk .ico.t { display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 1.1rem; }
.lk .bd { min-width: 0; }
.lk b { display: block; font-size: .96rem; margin-bottom: 3px; }
/* 描述单行截断（配合无描述时服务端填充「暂无描述」）：卡片紧凑且全部等高，不再预留空白 */
.lk p { margin: 0 0 4px; font-size: .8rem; line-height: 1.4; min-height: 1.4em; color: var(--gray); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.lk p.none { color: var(--gray-light); opacity: .72; }
.lk .u { font-size: .74rem; color: var(--gray-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ========== 文章点赞 + 赞助（echo_log.php 文末胶囊 + js/sr-like.js） ========== */
/* 上下等距：上方是 .post-foot 的 22px 底内边距，版权卡无上边距——
   上边距 8 + 22 = 30、下边距 30 + 0 = 30，两侧恰好相等 */
.post-like { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 8px 0 30px; }
.like-btn, .sponsor-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink-body);
    font-family: inherit;
    font-size: .88rem;
    cursor: pointer;
    transition: color .18s, border-color .18s, background-color .18s, transform .12s;
}
.like-btn:hover, .sponsor-btn:hover { color: var(--accent); border-color: var(--accent-tint); background: var(--accent-wash); }
.like-btn:active, .sponsor-btn:active { transform: scale(.97); }
.like-btn[disabled] { opacity: .6; cursor: default; }
.like-btn .i-heart, .sponsor-btn .i-cup { width: 17px; height: 17px; transition: fill .18s, transform .18s; }
.like-btn .i-heart { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.like-btn b { font-variant-numeric: tabular-nums; }
/* 已点赞：实心心形 + 强调色描边 */
.like-btn.is-on { color: var(--accent); border-color: var(--accent); background: var(--accent-wash); }
.like-btn.is-on .i-heart { fill: var(--accent); }
/* 点击心跳（类由 JS 添加并重播） */
.like-btn.is-pop .i-heart { animation: sr-heart-pop .5s ease; }
@keyframes sr-heart-pop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.35); }
    60%  { transform: scale(.92); }
    100% { transform: scale(1); }
}

/* 赞助面板：遮罩 + 居中卡片（开合由 js/sr-like.js，Esc/遮罩/关闭键均可关） */
.sponsor-mask {
    position: fixed;
    inset: 0;
    z-index: 1300;              /* 高于音乐播放器(1200)，低于登录弹窗/灯箱(10000) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(38, 32, 42, .38);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .18s ease;
}
/* display:flex 会盖过 hidden 属性的 UA display:none，必须显式压回，否则遮罩常驻挡住整页 */
.sponsor-mask[hidden] { display: none; }
.sponsor-mask.is-open { opacity: 1; }
.sponsor-panel {
    position: relative;
    width: min(320px, 100%);
    padding: 28px 24px 22px;
    border-radius: var(--radius);
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: 0 18px 50px rgba(38, 32, 42, .22);
    text-align: center;
    transform: translateY(10px) scale(.97);
    transition: transform .18s ease;
}
.sponsor-mask.is-open .sponsor-panel { transform: translateY(0) scale(1); }
.sponsor-tt { display: block; margin-bottom: 16px; font-size: 1rem; color: var(--ink); }
/* 收款码区：一张居中（240px），两张并排（各占一半）；标签在上方 */
.sponsor-codes { display: flex; justify-content: center; align-items: flex-start; gap: 16px; }
.sponsor-code { flex: 0 1 240px; min-width: 0; margin: 0; }
.sponsor-panel[data-codes="2"] { width: min(440px, 100%); }     /* 两张时面板加宽 */
.sponsor-panel[data-codes="2"] .sponsor-code { flex-basis: 50%; }
.sponsor-clabel { margin-bottom: 8px; font-size: .78rem; font-weight: 700; color: var(--accent); letter-spacing: .04em; }
.sponsor-qr {
    display: block;
    width: 100%;
    margin: 0 auto;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: #fff;           /* 收款码一律白底衬，深色模式下也保证可扫 */
}
.sponsor-note { margin: 14px 0 0; font-size: .8rem; color: var(--gray); }
.sponsor-x {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--gray);
    cursor: pointer;
    transition: color .15s, background-color .15s;
}
.sponsor-x:hover { color: var(--ink); background: var(--panel); }
.sponsor-x svg { width: 15px; height: 15px; }
/* 面板打开时锁定页面滚动（类由 JS 加在 body 上） */
body.sr-modal-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .like-btn.is-pop .i-heart { animation: none; }
    .sponsor-mask, .sponsor-panel { transition: none; }
}
@media (max-width: 560px) {
    .post-like { margin: 4px 0 24px; }
    .like-btn, .sponsor-btn { padding: 9px 18px; font-size: .84rem; }
    .sponsor-codes { gap: 12px; }
    .sponsor-clabel { font-size: .74rem; }
}
/* 超窄屏：两张收款码改为纵向排列，保证码面够大能扫 */
@media (max-width: 400px) {
    .sponsor-panel[data-codes="2"] .sponsor-codes { flex-direction: column; align-items: center; }
    .sponsor-panel[data-codes="2"] .sponsor-code { flex-basis: auto; width: min(240px, 100%); }
}

/* 友链页（.lk-page）：一行 4 个，卡片比例相应收小；工具箱页的 .lk-grid 仍为 3 个不受影响 */
.lk-page .lk-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.lk-page .lk { padding: 14px; gap: 11px; }
.lk-page .lk .ico { width: 40px; height: 40px; border-radius: 10px; }
.apply { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); margin-top: 26px; overflow: hidden; }
.apply h2 { margin: 0; padding: 16px 24px; border-bottom: 1px solid var(--line); font-size: 1.02rem; display: flex; align-items: center; gap: 9px; }
.apply h2::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--accent); }
.apply .in { padding: 22px 24px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.apply ul { margin: 0; padding-left: 1.3em; font-size: .88rem; color: var(--ink-body); }
.apply li { margin: .35em 0; }
.apply li::marker { color: var(--accent); }
.apply .info { background: var(--panel); border-radius: 12px; padding: 16px 18px; font-size: .84rem; }
.apply .info div { display: flex; gap: 10px; padding: 5px 0; }
.apply .info .k { color: var(--gray); width: 48px; flex-shrink: 0; }
.apply .info .v { color: var(--ink); word-break: break-all; cursor: pointer; border-radius: 6px; padding: 1px 6px; margin: -1px -6px; transition: color .15s, background-color .15s; }
.apply .info .v:hover { color: var(--accent); background: var(--accent-wash); }
.apply .info .v:active { opacity: .7; }
.apply .copy { display: inline-block; margin-top: 12px; padding: 7px 16px; border: none; border-radius: 18px; background: var(--accent); color: #fff !important; font-size: .8rem; font-weight: 700; font-family: inherit; cursor: pointer; transition: opacity .15s, transform .15s; }
.apply .copy:hover { opacity: .88; }
.apply .copy:active { transform: scale(.97); }

/* ========== 关于页（page_about.php，整合原设计稿「方案 B」） ========== */
/* 技能标签五色（浅色）；深色模式在下方用同名变量翻转 */
:root {
    --sk1-bg: #eaf4ee; --sk1-fg: #3f8f63;
    --sk2-bg: #fbeee8; --sk2-fg: #c2643f;
    --sk3-bg: #eaf0f9; --sk3-fg: #3b6fb5;
    --sk4-bg: #f3ecfa; --sk4-fg: #8a5cb8;
    --sk5-bg: #fdf4e0; --sk5-fg: #a5813a;
}
html[data-mode="dark"] {
    --sk1-bg: rgba(63, 143, 99, .2);  --sk1-fg: #86cfa6;
    --sk2-bg: rgba(194, 100, 63, .2); --sk2-fg: #e8a184;
    --sk3-bg: rgba(59, 111, 181, .22); --sk3-fg: #8fb5e8;
    --sk4-bg: rgba(138, 92, 184, .2); --sk4-fg: #c39be0;
    --sk5-bg: rgba(165, 129, 58, .22); --sk5-fg: #d9bd7a;
}
@media (prefers-color-scheme: dark) {
    html[data-mode="auto"] {
        --sk1-bg: rgba(63, 143, 99, .2);  --sk1-fg: #86cfa6;
        --sk2-bg: rgba(194, 100, 63, .2); --sk2-fg: #e8a184;
        --sk3-bg: rgba(59, 111, 181, .22); --sk3-fg: #8fb5e8;
        --sk4-bg: rgba(138, 92, 184, .2); --sk4-fg: #c39be0;
        --sk5-bg: rgba(165, 129, 58, .22); --sk5-fg: #d9bd7a;
    }
}
/* 单张整卡：居中头部 + 正文（原设计稿结构） */
.about-page { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.about-head {
    padding: 38px 34px 30px;
    text-align: center;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, var(--accent-wash), var(--paper) 72%);
}
.about-avatar {
    display: block;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    margin: 0 auto 14px;
    object-fit: cover;
    border: 3px solid var(--paper);
    box-shadow: var(--shadow-hover);
}
.about-head h1 { margin: 0 0 6px; font-size: 1.62rem; }
.about-role { color: var(--accent); font-size: .84rem; font-weight: 700; letter-spacing: .04em; }
.about-bio { margin: 10px auto 0; max-width: 520px; color: var(--gray); font-size: .88rem; }
.about-chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.about-chips span {
    font-size: .78rem;
    padding: 4px 12px;
    border-radius: 7px;
    background: var(--panel);
    border: 1px solid var(--line);
    color: var(--ink-body);
}
.about-body { padding: 28px 34px 34px; }
.about-p { margin: .9em 0; font-size: .92rem; line-height: 1.9; color: var(--ink-body); }
/* 小节标题：左侧强调色竖条（原设计稿样式） */
.about-h2 {
    font-size: 1.24rem;
    margin: 1.8em 0 .7em;
    padding-left: 12px;
    border-left: 4px solid var(--accent);
    line-height: 1.4;
}
/* 我在做什么：三栏卡片 */
.about-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 1.3em 0; }
.about-cards div {
    background: var(--panel);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    transition: transform .16s, box-shadow .16s;
}
.about-cards div:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.about-cards b { display: block; font-size: 1rem; margin-bottom: 4px; }
/* 卡片图标：模板 sr_icon 有实心（fill=currentColor）与线条（fill=none + stroke）两种风格，
 * 用属性选择器分别上色，避免 CSS 覆盖掉线条图标的 fill="none" */
.about-cards b svg {
    width: 16px;
    height: 16px;
    color: var(--accent);       /* 替代 emoji，跟随主题强调色 */
    vertical-align: -3px;
    margin-right: 6px;
}
.about-cards b svg[fill="currentColor"] { fill: currentColor; }
.about-cards b svg[fill="none"] { stroke: currentColor; }
.about-cards small { color: var(--gray); font-size: .78rem; }
/* 建站历程：左连线 + 圆点（时间加粗块、描述灰） */
.about-tl { list-style: none; margin: 1em 0; padding: 0 0 0 4px; border-left: 2px solid var(--line); }
.about-tl li { position: relative; padding: 0 0 16px 20px; }
.about-tl li:last-child { padding-bottom: 4px; }
.about-tl li::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--paper);
    box-shadow: 0 0 0 1px var(--line);
}
.about-tl .y { display: block; font-weight: 700; color: var(--ink); }
.about-tl .t { font-size: .84rem; color: var(--gray); }
/* 技能标签：五色 pastel 循环 */
.about-skills { display: flex; flex-wrap: wrap; gap: 9px; }
.about-skills span { font-size: .78rem; padding: 4px 12px; border-radius: 7px; font-weight: 600; }
.about-skills .sk1 { background: var(--sk1-bg); color: var(--sk1-fg); }
.about-skills .sk2 { background: var(--sk2-bg); color: var(--sk2-fg); }
.about-skills .sk3 { background: var(--sk3-bg); color: var(--sk3-fg); }
.about-skills .sk4 { background: var(--sk4-bg); color: var(--sk4-fg); }
.about-skills .sk5 { background: var(--sk5-bg); color: var(--sk5-fg); }
/* 联系方式行 */
.about-contact div { display: flex; gap: 12px; padding: 6px 0; font-size: .88rem; }
.about-contact .k { color: var(--gray); width: 76px; flex-shrink: 0; }
.about-contact .v { min-width: 0; word-break: break-all; }
.about-contact .v a { color: var(--accent); font-weight: 600; }
/* 站点统计收尾行 */
.about-stat { margin: 1.8em 0 0; padding-top: 14px; border-top: 1px dashed var(--line); font-size: .85rem; color: var(--gray); }
.about-stat b { color: var(--accent); font-variant-numeric: tabular-nums; }

/* ========== 分类页（page_sort.php：横向分类轨道 + 就地列表） ========== */
/* 轨道容器：两端渐隐提示还有更多（滚动到头自动隐藏） */
.cat-rail-wrap { position: relative; }
.cat-rail-wrap::before,
.cat-rail-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 28px;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s;
}
.cat-rail-wrap::before { left: 0; background: linear-gradient(90deg, var(--paper), transparent); }
.cat-rail-wrap::after { right: 0; background: linear-gradient(-90deg, var(--paper), transparent); }
.cat-rail-wrap.is-left::before { opacity: 1; }
.cat-rail-wrap.is-right::after { opacity: 1; }
/* 轨道本体：一行横向滚动；隐藏滚动条，鼠标可拖拽（拖拽中禁止选中文字）
 * ⚠️ overflow-x: auto 会连带裁掉纵向溢出，胶囊 hover 上移 2px 会被削顶 ——
 *    故容器内留出上下内边距（负外边距抵消，保持与页面其他区块的间距不变），
 *    左右同理留 2px，避免首尾胶囊的描边被裁 */
.cat-rail {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    user-select: none;
    cursor: grab;
    padding: 8px 2px 6px;
    margin: -8px -2px 0;
}
.cat-rail::-webkit-scrollbar { display: none; }
.cat-rail.is-drag { cursor: grabbing; }
/* 分类胶囊：色点图标 + 名称 + 篇数（紧凑，贴合整体 Tab 语言） */
.cat-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 7px 14px 7px 8px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 999px;
    transition: border-color .15s, background-color .15s, transform .15s;
}
.cat-pill:hover { transform: translateY(-2px); border-color: var(--accent-tint); }
.cat-pill.on { border-color: var(--accent); background: var(--accent-wash); }
.cat-pill .ico {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    flex-shrink: 0;
}
.cat-pill .ico svg { width: 13px; height: 13px; }
.cat-pill .ico svg[fill="currentColor"] { fill: currentColor; }
.cat-pill .ico svg[fill="none"] { stroke: currentColor; }
.cat-pill b { font-size: .88rem; color: var(--ink); }
.cat-pill .n { font-size: .74rem; color: var(--gray); font-variant-numeric: tabular-nums; }
.cat-pill.on .n { color: var(--accent); }
/* 子分类数据随胶囊携带，默认隐藏（选中时注入下方 chips 行） */
.cat-pill .subs { display: none; }
/* 子分类 chips 行 */
.cat-subs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.cat-subs .sub {
    font-size: .76rem;
    padding: 3px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--ink-body);
    transition: color .15s, border-color .15s, background-color .15s;
}
.cat-subs .sub:hover { color: var(--accent); border-color: var(--accent-tint); }
.cat-subs .sub.on { color: var(--accent); border-color: var(--accent); background: var(--accent-wash); }
/* 当前分类标题行（常驻，切换分类时由 JS 更新） */
.list-hd {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 26px 0 14px;
}
.list-hd .tt { font-size: 1.15rem; }
.list-hd .cnt { font-size: .8rem; color: var(--gray); }
.list-hd .back { margin-left: auto; font-size: .8rem; color: var(--accent); font-weight: 600; }

/* 搜索结果提示栏（log_list.php，搜索语境下出现；样式独立于「搜索面板」开关，故放这里） */
.search-hd .tt {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;               /* 允许收缩，超长关键词走省略号 */
}
.search-hd .tt svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--accent); stroke: currentColor; }
.search-hd .tt .kw { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-hd .cnt { flex-shrink: 0; }

/* ========== 归档页（page_archive.php，年份可折叠） ========== */
.arch-card { padding: 6px 22px 16px; }
/* summary 即年份折叠头：去掉原生三角，自绘箭头随开合旋转 */
.arch-group summary {
    list-style: none;
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 1.3rem;
    margin: 26px 0 10px;
    cursor: pointer;
    border-radius: 8px;
    transition: color .15s;
}
.arch-group summary::-webkit-details-marker { display: none; }
.arch-group summary:hover { color: var(--accent); }
.arch-group:first-child summary { margin-top: 14px; }
.arch-year span { font-size: .8rem; color: var(--gray); font-weight: 400; }
.arch-chev {
    width: 16px;
    height: 16px;
    margin-left: auto;
    align-self: center;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: var(--gray);
    transition: transform .2s;
}
.arch-group[open] .arch-chev { transform: rotate(180deg); }
.arch-list { list-style: none; margin: 0; padding: 0; }
.arch-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 8px;
    transition: background-color .15s;
}
.arch-list li:hover { background: var(--panel); }
.arch-list .d {
    color: var(--gray-light);
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.arch-list a {
    color: var(--ink-body);
    font-size: .92rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color .15s;
}
.arch-list a:hover { color: var(--accent); }
.arch-list .v {
    margin-left: auto;
    color: var(--gray-light);
    font-size: .76rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}
.arch-list .v svg { width: 13px; height: 13px; }
@media (max-width: 560px) {
    .arch-card { padding: 4px 14px 12px; }
    .arch-list .v { display: none; }   /* 窄屏隐藏阅读量，给标题让位 */
}
@media (max-width: 560px) {
    .about-head { padding: 28px 20px 24px; }
    .about-body { padding: 22px 20px 26px; }
    .about-cards { grid-template-columns: 1fr; }
}
.tool-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; transition: transform .16s, box-shadow .16s, border-color .16s; }
.tool-card:hover { transform: translateY(-3px); border-color: #d7e2ef; box-shadow: var(--shadow-hover); }
.tool-card .top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.tool-card .ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; flex-shrink: 0; background: var(--panel); overflow: hidden; }
.tool-card .ico img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tool-card b { font-size: .98rem; }
.tool-card .ft { display: flex; align-items: center; justify-content: space-between; font-size: .78rem; color: var(--gray); padding-top: 12px; border-top: 1px dashed var(--line); margin-top: auto; }
.tool-card .ft a { color: var(--accent); font-weight: 600; }

/* ========== 返回顶部 / 空状态 / 404 ========== */
.back-top { position: fixed; right: 24px; bottom: 30px; width: 44px; height: 44px; display: none; align-items: center; justify-content: center; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-hover); cursor: pointer; color: var(--ink); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 90; }
.back-top.is-visible { display: flex; opacity: 1; pointer-events: auto; }
.back-top:hover { transform: translateY(-3px); color: var(--accent); }
.back-top svg { width: 18px; height: 18px; stroke: currentColor; }
/* 空状态组件（module.php sr_empty）：手绘线稿插画 + 文案，全站空内容处统一使用 */
.sr-empty { padding: 46px 20px 42px; text-align: center; }
.sr-empty svg {
    width: 110px;
    height: 110px;
    fill: none;
    stroke: var(--gray-light);
    stroke-width: 1.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.sr-empty svg .acc { stroke: var(--accent); }
.sr-empty svg .acc[stroke="none"] { fill: var(--accent); }
.sr-empty svg circle.acc { fill: var(--accent); stroke: none; }
.sr-empty p { margin: 14px 0 0; color: var(--gray); font-size: .88rem; }
.err-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 46px 20px; }
.err-wrap { max-width: 860px; width: 100%; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-hover); padding: 46px 40px; text-align: center; display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 30px; align-items: center; }
.err-wrap .art svg { width: 100%; height: auto; }
.err-code { font-size: 4.4rem; font-weight: 800; line-height: 1; color: var(--accent); letter-spacing: .02em; }
.err-code small { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .3em; color: var(--gray-light); margin-top: 6px; }
.err-wrap h1 { font-size: 1.3rem; margin: 14px 0 8px; }
.err-msg { margin: 0 0 22px; color: var(--gray); font-size: .9rem; }
.err-search { display: flex; gap: 10px; max-width: 360px; margin: 0 auto 18px; }
.err-search input { flex: 1; min-width: 0; padding: 10px 15px; border-radius: 20px; border: 1px solid var(--line); background: var(--panel); font-size: .86rem; outline: none; font-family: inherit; }
.err-acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.err-acts a { padding: 9px 22px; border-radius: 20px; font-size: .86rem; font-weight: 700; }
.err-acts .home { background: var(--accent); color: #fff !important; box-shadow: 0 6px 16px var(--accent-shadow); }
.err-acts .back { background: var(--panel); color: var(--ink-soft); border: 1px solid var(--line); }
.err-acts .back:hover { color: var(--accent); border-color: var(--accent-tint); }

/* ========== 响应式 ========== */
@media (max-width: 980px) {
    .layout { grid-template-columns: 1fr; }
    .post-grid { grid-template-columns: 1fr; }
    .top .in { height: auto; padding: 12px 16px; flex-wrap: wrap; gap: 12px; }
    .top .r { margin-left: 0; width: 100%; }
    .top .r form { flex: 1 1 auto; min-width: 0; }
    .top input.search-k { width: 100%; }
    .nav { order: 3; flex-basis: 100%; overflow-x: auto; padding-bottom: 4px; }
    /* 移动端：子级改为内联展开（下拉会被横向滚动容器裁切） */
    .nav-item { display: flex; align-items: center; }
    .nav-sub {
        position: static; transform: none; opacity: 1; visibility: visible;
        display: flex; flex-direction: row; gap: 2px;
        min-width: 0; padding: 0; margin-left: 2px;
        background: none; border: none; box-shadow: none;
    }
    .nav-sub::before { display: none; }
    .nav-sub a { padding: 5px 10px; font-size: .82rem; opacity: .85; }
    .nav-item .nav-link.has-down svg { display: none; }
    .banner img { height: 210px; }
    .banner h2 { font-size: 1.12rem; max-width: 100%; }
    .banner .ex { max-width: 100%; }
    .head, .body, .post-foot { padding-left: 20px; padding-right: 20px; }
    .license { margin-left: 20px; margin-right: 20px; }
    .card > .cover img { height: 210px; }
    .head h1 { font-size: 1.4rem; }
    /* 小屏先把日期邮戳改小，更窄时再隐藏（见 560px 断点） */
    .head .meta .date-stamp { width: 48px; height: 48px; flex-basis: 48px; }
    .head .meta .date-stamp b { font-size: 1.14rem; }
    .head .meta .date-stamp span { font-size: .5rem; }
    .pn { grid-template-columns: 1fr; }
    .lk-grid { grid-template-columns: 1fr; }
    .lk-page .lk-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .apply .in { grid-template-columns: 1fr; gap: 18px; }
    .page-hero { flex-direction: column; align-items: flex-start; }
    .err-wrap { grid-template-columns: 1fr; padding: 34px 24px; }
    .err-wrap .art { max-width: 240px; margin: 0 auto; }
    .foot .cols { grid-template-columns: 1fr; }
}

/* ========== 小屏精修（手机） ==========
 * 980px 断点负责整体降为单栏；这里处理窄屏下的挤压与溢出细节
 */
@media (max-width: 560px) {
    .container { padding-left: 14px; padding-right: 14px; }   /* 只收窄左右，保留统一上下留白 */
    .lk-page .lk-grid { grid-template-columns: 1fr; }
    .top .in { padding: 10px 14px; gap: 10px; }
    .top .r { gap: 8px; }
    /* 搜索框允许收缩：真正的 flex 子项是包裹 input 的 form，
       否则会把右侧按钮挤出屏幕（320px 机型） */
    .top .r form { flex: 1 1 auto; min-width: 0; }
    .top input.search-k { width: 100%; min-width: 0; padding: 7px 12px; font-size: .82rem; }
    .btn { padding: 7px 13px; font-size: .8rem; }
    .theme-btn { width: 32px; height: 32px; }
    .theme-btn svg { width: 16px; height: 16px; }
    .btn-login { width: 32px; height: 32px; }
    .btn-login svg { width: 16px; height: 16px; }
    .brand { font-size: 1.05rem; }
    .nav { font-size: .84rem; }
    .nav a { padding: 5px 10px; }

    .banner img { height: 180px; }
    .banner h2 { font-size: 1.04rem; }
    .banner .go { padding: 6px 14px; font-size: .8rem; }
    .head, .body, .post-foot { padding-left: 15px; padding-right: 15px; }
    .license { margin-left: 15px; margin-right: 15px; padding: 16px; }
    .pn svg { width: 17px; height: 17px; }
    .head h1 { font-size: 1.24rem; }
    .card > .cover img { height: 170px; }
    .head .meta .date-stamp { display: none; }
    .tabs { gap: 8px; }
    .tabs a { padding: 4px 11px; font-size: .8rem; }

    /* 正文表格列多时横向滚动，避免挤成一团 */
    .body table { display: block; max-width: 100%; overflow-x: auto; }
    .body pre { font-size: .78rem; padding: 13px 14px; }

    .err-code { font-size: 3.2rem; }
    .err-wrap { padding: 26px 18px; }
    .foot .cols { gap: 18px; }
    .back-top { right: 14px; bottom: 18px; width: 40px; height: 40px; }
}

/* ========== 前台登录弹窗 ========== */
html.login-open { overflow: hidden; }
html.login-open body { padding-right: var(--login-sbw, 0); }

.login-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: 20px;
}
/* 必须显式覆盖：上面的 display 会盖掉 [hidden] 的 display:none，
   否则遮罩会一直铺在页面上、拦截所有点击 */
.login-modal[hidden] { display: none; }
.login-mask {
    position: absolute;
    inset: 0;
    background: rgba(var(--ink-rgb), .5);
    opacity: 0;
    transition: opacity .2s ease;
}
.login-card {
    position: relative;
    width: min(100%, 360px);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-hover);
    padding: 26px 24px 22px;
    opacity: 0;
    transform: translateY(8px) scale(.98);
    transition: opacity .2s ease, transform .2s ease;
}
.login-modal.is-open .login-mask { opacity: 1; }
.login-modal.is-open .login-card { opacity: 1; transform: none; }

.login-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 30px;
    height: 30px;
    border: none;
    background: none;
    color: var(--gray);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 8px;
    transition: background .18s ease, color .18s ease;
}
.login-close:hover { background: var(--panel); color: var(--ink); }

.login-title { margin: 0; font-size: 1.16rem; }
.login-desc { margin: 6px 0 16px; font-size: .82rem; color: var(--gray); }

.login-alert {
    margin-bottom: 12px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    background: rgba(194, 100, 63, .1);
    color: #b1593a;
    font-size: .82rem;
}
html[data-mode="dark"] .login-alert { background: rgba(194, 100, 63, .18); color: #e79f7f; }

.login-field { margin-bottom: 12px; }
.login-field input {
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--ink);
    font-size: .88rem;
    font-family: inherit;
    outline: none;
    transition: border-color .18s ease, background .18s ease;
}
.login-field input:focus { border-color: var(--accent); background: var(--paper); }
/* 与全局表单聚焦态一致：描边 + 光晕，不再叠加浏览器原生 outline */
.login-field input:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.login-field-code { display: flex; gap: 10px; }
.login-field-code input { flex: 1; }
.login-captcha {
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--line);
    cursor: pointer;
    background: var(--paper);
}

.login-remember {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 2px 0 16px;
    font-size: .82rem;
    color: var(--ink-soft);
    cursor: pointer;
}
.login-remember input { accent-color: var(--accent); }

.login-submit {
    width: 100%;
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    background: var(--accent);
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: opacity .18s ease, transform .18s ease;
}
.login-submit:hover { opacity: .92; }
.login-submit:active { transform: scale(.99); }
.login-submit[disabled] { opacity: .7; cursor: default; }

@media (prefers-reduced-motion: reduce) {
    .login-mask, .login-card { transition: none; }
    .login-card { transform: none; }
}

/* ========== 置顶标识（标题前内联小标签） ==========
 * 说明：原先用绝对定位做角标，放在列表卡片里会以 #sr-list 为定位父级
 * 漂到整个列表区右上角；改为内联标签，紧跟标题文字之前，随标题折行。
 */
.sticker {
    display: inline-block; vertical-align: 2px;
    font-size: .68rem; font-weight: 700; line-height: 1.65;
    padding: 0 8px; margin-right: 7px;
    border-radius: 5px; background: var(--accent); color: #fff;
    white-space: nowrap;
}

/* ========== 元信息图标（日期 / 阅读 / 评论等） ==========
 * 用法：<span class="mi"><?= sr_icon('eye') ?>阅读 6</span>
 * 图标继承文字颜色，尺寸固定 13px，不参与压缩
 */
.mi { display: inline-flex; align-items: center; gap: 5px; }
.mi svg { width: 13px; height: 13px; stroke: currentColor; opacity: .82; flex-shrink: 0; }
.mi .sep, .sep { opacity: .5; }

/* ========== 头条轮播 ========== */
.slideshow { position: relative; overflow: hidden; }
.slideshow .slideshow-track { display: flex; will-change: transform; transition: transform .45s ease; }
.slideshow.dragging .slideshow-track { transition: none; }
.slideshow-item { position: relative; flex: 0 0 100%; min-height: 200px; display: block; color: #fff; cursor: pointer; }
.slideshow-item:hover, .slideshow-item:visited { color: #fff; }
.slideshow-item .go { transition: transform .18s, box-shadow .18s; }
.slideshow-item:hover .go { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.22); }
.slideshow-item img { width: 100%; height: 300px; object-fit: cover;
    -webkit-user-drag: none; user-select: none; pointer-events: none; }
.slideshow-item.nocv { background: linear-gradient(135deg, var(--accent-wash), var(--paper) 70%); }
.slideshow-item.nocv h2 { color: var(--ink); max-width: 100%; }
.slideshow-item.nocv .ex { color: var(--gray); max-width: 100%; }
.slideshow-item.nocv .m { color: var(--gray); }
.slideshow-item.nocv .ov { position: static; background: none; color: var(--ink); padding: 34px 32px; }

/* 左右切换按钮：悬停才出现
 * 按钮底色恒为白色半透明，图标必须用固定的深色（不能用 var(--ink)，
 * 深色模式下 --ink 变浅会导致图标与白底同色而看不见） */
.banner-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(255,255,255,.68); color: #2a2733;
    font-size: 1.3rem; line-height: 1; display: grid; place-items: center;
    opacity: 0; transition: opacity .2s, color .2s, background .2s; }
.slideshow:hover .banner-nav { opacity: 1; }
/* 模板设置「切换箭头常显」：不受悬停影响 */
.banner-nav.always { opacity: 1; }
.banner-nav:hover { background: #fff; color: var(--accent); }
.banner-nav.prev { left: 14px; }
.banner-nav.next { right: 14px; }

/* 指示器（模板设置 → 轮播 → 指示器样式 / 位置）
 * 基础只给「绝对定位 + 横排」，具体坐标交给下面的 .pos-*；位置与样式全在类名上，
 * 圆点仍由 js/main.js 生成并绑定点击，三种样式共用同一份 DOM。 */
.banner-dots { position: absolute; z-index: 2; display: flex; gap: 8px; }
.banner-dots .dot { width: 8px; height: 8px; border-radius: 50%;
    background: rgba(255,255,255,.5); cursor: pointer; transition: background .2s, width .2s; }
.banner-dots .dot.on { background: #fff; width: 20px; border-radius: 4px; }

/* 位置：右下（默认）/ 底部居中 / 左下 / 右上 —— 左右箭头固定在两侧垂直居中，互不干扰 */
.banner-dots.pos-br { right: 20px; bottom: 20px; }
.banner-dots.pos-bc { left: 50%; transform: translateX(-50%); bottom: 20px; }
.banner-dots.pos-bl { left: 20px; bottom: 20px; }
.banner-dots.pos-tr { right: 20px; top: 20px; }
/* 指示器落在下缘（左下 / 底部居中）时，文字层多留一条 54px 的底带：
 * 否则指示器会压住左下角的「作者 + 日期 + 阅读 + 评论」那一行（实测会糊成一团）。
 * 右下的默认位置不需要，因为文字层本来就靠左、右下是空的。 */
.banner.dots-bl .ov, .banner.dots-bc .ov { padding-bottom: 54px; }

/* 样式 · 短线：细长条，当前项更长更亮 */
.banner-dots.style-bar { gap: 6px; align-items: center; }
.banner-dots.style-bar .dot { width: 18px; height: 4px; border-radius: 2px; }
.banner-dots.style-bar .dot.on { width: 30px; border-radius: 2px; }

/* 样式 · 数字：圆点变成「1 / 2 / 3…」小圆牌。序号由 CSS 计数器给出（counter-increment 作用在兄弟节点上），
 * 所以不需要改 JS；当前项白底深字，在任何底色上都醒目 */
.banner-dots.style-num { gap: 6px; counter-reset: srDot; align-items: center; }
.banner-dots.style-num .dot {
    counter-increment: srDot;
    width: 22px; height: 22px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(20,18,24,.34); color: #fff;
    font-size: .7rem; font-weight: 700; line-height: 1;
    transition: background .2s, color .2s, transform .2s;
}
.banner-dots.style-num .dot::after { content: counter(srDot); }
.banner-dots.style-num .dot.on { background: #fff; color: var(--ink); transform: scale(1.06); }