/* ============================================================
天眼技术社区 - CSDN 1:1 复刻层（第四阶段）
------------------------------------------------------------
数据来源：真实 CSDN 页面抓取（tools/csdn_probe.py）+ CSDN UED 官方规范
· 主色（主要提示按钮）#FC5531，白字
· 标题字 #222226 / 辅助文案 #999AAA / 次要文案 #CCCCD8 / 次级文字 #555666
· 线框 #F0F0F2
· 字体栈 "PingFang SC","Hiragino Sans GB",Arial,"Microsoft YaHei",Verdana,Roboto,Noto,"Helvetica Neue",sans-serif
· 顶部工具栏 48px 纯白（无黑色顶栏、无蓝色导航条）
· 去掉灰底分区与卡片阴影，改用细线框 + 大留白（UED 2022 视觉升级）
· 信息流标题 18px / 行高 28px / 字重 500；摘要 14px / 行高 22px
· 栅格：左导航 216 + 内容自适应 + 右侧 252（间距 24，8 的倍数）
本文件必须排在 main.css → ui.css 之后加载：
基础规则写在前面，所有响应式覆盖统一放在文件末尾的「响应式收尾」区，
否则会被同优先级的媒体查询反向覆盖（main.css 已踩过这个坑）。
回滚方式：删除本文件 + main.php 中对应 ，并将 main.css 的 :root 还原。
============================================================ */
/* ============================================================
1. 设计令牌（CSDN 规范值）—— ⭐ 全站前台唯一视觉真相源
------------------------------------------------------------
本文件排在 main.css / ui.css 之后加载，同优先级下后加载者胜出，
因此本 :root 中的令牌会覆盖前面两个文件的同名令牌（共 28 个，见 tools/_tokenguard.py）。
→ 改配色 / 圆角 / 阴影 / header 高度 / 容器宽度，一律改这里。
→ main.css 的同名令牌只是 layout/blank（blog/edit）的兜底，不要在那里改视觉。
→ 媒体查询同样必须写在文件末尾「响应式收尾」区。
============================================================ */
:root {
/* 主色：CSDN 橙红（主要提示按钮 / 选中态 / 关键数字） */
--primary: #FC5531;
--primary-600: #E8451F;
--primary-700: #D23A16;
--primary-050: #FFF1ED;
--primary-100: #FFE1D8;
--primary-200: #FFC9B8;
--grad-primary: linear-gradient(#FC5531, #FC5531);
--grad-primary-soft: linear-gradient(#FFF8F6, #FFF1ED);
--sh-primary: 0 2px 8px rgba(252, 85, 49, .22);
--csdn-pill: 100px;
/* 文字四级灰阶（UED 规范） */
--text-1: #222226; /* 标题 / 正文主色 */
--text-2: #555666; /* 次级文字 / 导航未选中 */
--text-3: #999AAA; /* 辅助文案 / 摘要 / meta */
--text-4: #CCCCD8; /* 占位 / 最弱提示 / 浅描边 */
/* 线与面 */
--border: #F0F0F2;
--border-2: #F0F0F2;
--bg-1: #FFFFFF;
--bg-2: #FFFFFF; /* 页面底色：白（CSDN 不再用灰底分区） */
--bg-3: #F5F6F7; /* 悬浮底色 / 搜索框 / 未选中胶囊 */
--bg-4: #F5F6F7;
/* 形状：小圆角（图片/卡片），胶囊留给按钮 */
--r-xs: 2px;
--r-sm: 4px;
--r-md: 4px;
--r-lg: 4px;
--r-xl: 6px;
--r-full: 999px;
/* 阴影：CSDN 常态无阴影，仅浮层使用 */
--sh-1: none;
--sh-2: 0 2px 8px rgba(0, 0, 0, .06);
--sh-3: 0 6px 16px rgba(0, 0, 0, .08);
--topbar-h: 0px; /* 黑色顶栏已取消，body 不再留白 */
--header-h: 48px;
--csdn-font: "PingFang SC", "Hiragino Sans GB", Arial, "Microsoft YaHei", Verdana, Roboto, Noto, "Helvetica Neue", sans-serif;
--radius: var(--r-md);
--radius-sm: var(--r-sm);
--radius-lg: var(--r-lg);
--primary-light: var(--primary-050);
}
html[data-theme="dark"] {
--primary: #FF6B48;
--primary-600: #FC5531;
--primary-700: #E8451F;
--primary-050: #33201A;
--primary-100: #3E2620;
--primary-200: #552F26;
--grad-primary: linear-gradient(#FF6B48, #FF6B48);
--grad-primary-soft: linear-gradient(#241C1A, #2C201C);
--text-1: #E9EAEC;
--text-2: #B4B8C0;
--text-3: #8A8F99;
--text-4: #5F636B;
--border: #2A2C31;
--border-2: #2A2C31;
--bg-1: #1B1C20;
--bg-2: #131417;
--bg-3: #26272C;
--bg-4: #26272C;
--sh-1: none;
--sh-2: 0 2px 8px rgba(0, 0, 0, .4);
--sh-3: 0 6px 18px rgba(0, 0, 0, .5);
}
/* ============================================================
2. 基础排版（CSDN 字体栈 + 行高节奏）
============================================================ */
body {
padding-top: 0;
font-family: var(--csdn-font);
font-size: 14px;
line-height: 22px;
color: var(--text-1);
background: var(--bg-2);
}
h1, h2, h3, h4, h5, h6 { color: var(--text-1); font-weight: 600; }
a:hover { color: var(--primary); }
::selection { background: var(--primary); color: #fff; }
/* 8px 为最小单位的间距节奏 */
.main { padding: 16px 0 40px; }
/* ============================================================
3. 顶部工具栏（CSDN 48px 纯白单栏）
合并原「30px 黑色顶栏 + 56px 蓝色主导航」为一条白色栏
============================================================ */
.topbar { display: none !important; } /* 旧黑栏结构已并入 .header */
.header {
position: sticky; top: 0; z-index: 1000;
height: var(--header-h); box-sizing: border-box; /* 1px 下边框算进 48px 内，与 CSDN 实测一致 */
background: #fff;
border-bottom: 1px solid var(--border);
box-shadow: none;
}
html[data-theme="dark"] .header { background: var(--bg-1); }
.header::after { display: none; }
.header .container,
.header .header-inner {
display: flex; align-items: center;
height: var(--header-h); gap: 20px;
}
/* 3.1 LOGO：主色图标 + 深色字标（CSDN 字标为深色，图标为主色） */
.logo {
display: flex; align-items: center; gap: 8px;
font-size: 20px; font-weight: 700; letter-spacing: -.2px;
color: var(--text-1); flex-shrink: 0;
}
.logo span {
color: var(--text-1); -webkit-text-fill-color: var(--text-1);
background: none; -webkit-background-clip: border-box; background-clip: border-box;
white-space: nowrap;
}
/* LOGO 全称 / 短品牌名：两段都在 DOM 里（layout/main.php），窄屏由断点切换到短名，
避免超长站名把 header 整行挤爆。默认显示全称。 */
.logo-short { display: none; }
.logo svg { width: 28px; height: 28px; border-radius: 7px; box-shadow: none; flex-shrink: 0; }
.logo-img { height: 28px; max-height: 28px; max-width: 160px; }
.logo:hover, .logo:hover span { color: var(--primary); }
/* 3.2 横向主菜单（非首页/窄屏时承载全站模块入口） */
.nav { display: flex; gap: 2px; flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a {
display: inline-flex; align-items: center; height: 32px; padding: 0 12px;
border-radius: var(--r-sm);
color: var(--text-2); font-size: 14px; font-weight: 400;
transition: background .18s, color .18s;
}
.nav a:hover { background: var(--bg-3); color: var(--primary); }
.nav a.active { background: var(--bg-3); color: var(--text-1); font-weight: 600; }
/* 3.3 全站导航下拉（原黑栏内容迁入白栏） */
.nav-drop { position: relative; flex-shrink: 0; }
.nav-drop-toggle {
display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px;
border-radius: var(--r-sm); color: var(--text-2); font-size: 14px; cursor: pointer;
transition: background .18s, color .18s; white-space: nowrap;
}
.nav-drop-toggle:hover { background: var(--bg-3); color: var(--primary); }
.nav-caret {
width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
border-top: 4px solid currentColor; transition: transform .2s; margin-top: 2px;
}
.nav-drop:hover .nav-caret { transform: rotate(180deg); }
.nav-drop-menu {
position: absolute; left: 0; top: 40px; min-width: 148px; padding: 6px;
background: var(--bg-1); border: 1px solid var(--border);
border-radius: var(--r-md); box-shadow: var(--sh-3);
display: none; z-index: 200;
}
.nav-drop:hover .nav-drop-menu { display: block; }
.nav-drop-menu a {
display: block; padding: 8px 12px; border-radius: var(--r-sm);
font-size: 14px; color: var(--text-2);
}
.nav-drop-menu a:hover { background: var(--bg-3); color: var(--primary); }
.nav-drop-menu .divider { height: 1px; background: var(--border); margin: 6px 4px; }
/* 3.4 搜索：灰色胶囊输入 + 独立橙红胶囊按钮 */
.header-search {
position: relative; width: auto;
margin-left: 0; margin-right: auto; /* CSDN：搜索框紧贴 LOGO 之后，操作区靠右 */
flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
}
.header-search form {
display: flex; align-items: center; gap: 8px;
width: 320px; max-width: 100%; flex-shrink: 1;
}
.hs-pill {
flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px;
height: 36px; padding: 0 14px;
/* CSDN 现网实测（2026-09-26）：默认 border 1px #E8E8ED + 底 #F5F6F7；
聚焦只换边框色 →#FC5531，底色不变，且 input 无 outline（单框线）。
我们原先是「透明边框 + 聚焦变白底」，再加 ui.css 的全局焦点环 → 双框线。 */
background: var(--bg-3); border: 1px solid #E8E8ED;
/* CSDN 现网实测 = 16px（圆角矩形，不是全胶囊；--csdn-pill 100px 太圆） */
border-radius: 16px;
transition: background .18s, border-color .18s;
}
.hs-pill svg { flex-shrink: 0; color: var(--text-3); }
.hs-pill input {
flex: 1; min-width: 0; height: 34px; padding: 0; border: none;
background: transparent; color: var(--text-1); font-size: 14px;
}
.hs-pill input::placeholder { color: var(--text-3); }
/* 焦点反馈只由外层胶囊给一条边框色变化（对齐 CSDN）；
input 自身必须彻底禁掉 outline/border/box-shadow，否则会叠出第二条框线。 */
.hs-pill input:focus,
.hs-pill input:focus-visible {
background: transparent; box-shadow: none; border: none; outline: none;
}
/* 底色保持不变（CSDN 聚焦后仍是 #F5F6F7，不发白） */
.hs-pill:focus-within { border-color: var(--primary); }
html[data-theme="dark"] .hs-pill { border-color: var(--border); }
html[data-theme="dark"] .hs-pill:focus-within { border-color: var(--primary); }
/* 无 .hs-pill 包裹时的兜底：窄屏旧结构直接给 input 上样式 */
.header-search input:not(.hs-pill input) {
width: 100%; height: 36px; padding: 0 14px 0 34px;
border: 1px solid transparent; border-radius: var(--csdn-pill);
background: var(--bg-3); color: var(--text-1);
}
.header-search .btn-search {
position: static; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
/* main.css 给过 width:26px（图标按钮），这里必须显式还原，否则文字会溢出胶囊 */
width: auto; min-width: 0;
height: 36px; padding: 0 20px; border: none; border-radius: var(--csdn-pill);
background: var(--primary); color: #fff; font-size: 14px;
transition: background .18s;
}
.header-search .btn-search:hover { background: var(--primary-600); color: #fff; }
.header-search .btn-search svg { display: none; } /* 用文字按钮，图标位置让给文字 */
.suggest-box {
position: absolute; top: 46px; left: 0; right: 0;
background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r-md);
box-shadow: var(--sh-3); max-height: 320px; overflow-y: auto;
display: none; z-index: 300; padding: 6px;
}
.suggest-box a { display: block; padding: 8px 12px; border-radius: var(--r-sm); font-size: 14px; color: var(--text-2); }
.suggest-box a:hover { background: var(--bg-3); color: var(--primary); }
/* 3.5 右侧操作区 */
.header-right, .hd-right { display: flex; align-items: center; gap: 18px; flex-shrink: 0; margin-left: 0; }
.hd-right { margin-left: 0; }
.hr-btn, .hd-link, .tb-link {
position: relative; /* .badge-dot 绝对定位的定位父级 */
display: inline-flex; align-items: center; gap: 4px;
color: var(--text-2); font-size: 14px; white-space: nowrap;
transition: color .18s;
}
.hr-btn:hover, .hd-link:hover, .tb-link:hover { color: var(--primary); }
.tb-link-strong { color: var(--text-1); font-weight: 500; }
/* 「创作」主色胶囊按钮（CSDN 右上角标志性按钮） */
.btn-write, .btn-create {
display: inline-flex; align-items: center; gap: 5px;
height: 32px; padding: 0 16px; border-radius: var(--csdn-pill);
background: var(--primary); color: #fff !important;
font-size: 14px; font-weight: 400; box-shadow: none;
transition: background .18s;
}
.btn-write:hover, .btn-create:hover {
background: var(--primary-600); color: #fff !important;
transform: none; box-shadow: none;
}
.theme-toggle {
width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
border-radius: 50%; color: var(--text-2); font-size: 16px; transition: all .18s;
}
.theme-toggle:hover { background: var(--bg-3); color: var(--primary); }
.user-menu { position: relative; }
.user-menu .avatar-sm { width: 30px; height: 30px; border: 1px solid var(--border); }
.user-menu:hover .avatar-sm { border-color: var(--primary); }
.dropdown {
top: 42px; min-width: 160px; padding: 6px;
background: var(--bg-1); border: 1px solid var(--border);
border-radius: var(--r-md); box-shadow: var(--sh-3);
}
.dropdown a { padding: 8px 12px; font-size: 14px; color: var(--text-2); }
.dropdown a:hover { background: var(--bg-3); color: var(--primary); }
.badge-dot {
position: absolute; top: -7px; right: -4px; min-width: 15px; height: 15px;
background: var(--primary); color: #fff; border-radius: 8px; font-size: 11px;
line-height: 15px; text-align: center; padding: 0 4px;
border: 1.5px solid var(--bg-1);
}
/* 带角标的入口必须预留右侧内边距，否则红点会压住「消息」最后两个字 */
.hd-link, .hr-btn { padding-right: 14px; }
/* ============================================================
4. 左侧竖向导航（CSDN 门户标志性结构，仅首页渲染）
============================================================ */
.col-rail, .sidenav { width: auto; min-width: 0; }
.sidenav { position: sticky; top: 64px; }
.sidenav-group { padding: 8px 0; border-bottom: 1px solid var(--border); }
.sidenav-group:first-child { padding-top: 0; }
.sidenav-group:last-child { border-bottom: none; }
.sidenav-item {
display: flex; align-items: center; gap: 12px;
height: 40px; padding: 0 12px; border-radius: var(--r-sm);
font-size: 14px; color: var(--text-2);
transition: background .18s, color .18s;
}
.sidenav-item svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .9; }
.sidenav-item:hover { background: var(--bg-3); color: var(--primary); }
.sidenav-item.on {
background: var(--bg-3); color: var(--text-1); font-weight: 600;
}
.sidenav-item.on svg { color: var(--primary); opacity: 1; }
.sidenav-badge {
margin-left: auto; flex-shrink: 0;
font-size: 11px; line-height: 16px; padding: 0 5px;
border-radius: 2px; background: var(--primary-050); color: var(--primary);
}
.sidenav-badge.solid { background: var(--primary); color: #fff; }
.sidenav-foot {
padding: 12px 12px 0; font-size: 12px; line-height: 20px; color: var(--text-3);
}
.sidenav-foot a { color: var(--text-3); }
.sidenav-foot a:hover { color: var(--primary); }
/* 首页三栏栅格：216 | 内容自适应 | 252（CSDN 栅格比例） */
.layout-csdn {
display: grid;
grid-template-columns: 216px minmax(0, 1fr) 252px;
gap: 24px;
align-items: start;
}
/* 覆盖 main.css 的 span 9 / span 3，否则会在三栏栅格中产生隐性列 */
.layout-csdn .col-main,
.layout-csdn .col-side,
.layout-csdn .col-rail { grid-column: auto; min-width: 0; }
.layout-csdn .col-rail { width: auto; }
/* ============================================================
5. 卡片 / 面板：去阴影、细线框、小圆角
============================================================ */
.card {
background: var(--bg-1);
border: 1px solid var(--border);
border-radius: var(--r-md);
box-shadow: none;
padding: 16px;
margin-bottom: 16px;
transition: none;
}
.card:hover { transform: none; box-shadow: none; }
.card-title {
display: flex; align-items: center; gap: 8px;
font-size: 16px; font-weight: 600; color: var(--text-1);
margin-bottom: 12px; padding-bottom: 0; border-bottom: none;
}
.card-title::before { display: none; } /* CSDN 标题不用左侧色条 */
.card-title .more { font-size: 14px; font-weight: 400; color: var(--text-3); }
.panel {
background: var(--bg-1); border: 1px solid var(--border);
border-radius: var(--r-md); box-shadow: none;
}
.panel-head { padding: 16px; border-bottom: 1px solid var(--border); }
.panel-head h3 { font-size: 16px; }
.panel-body { padding: 16px; }
/* ============================================================
6. 按钮：胶囊 + 主色面性 / 浅描边线性
============================================================ */
.btn {
padding: 8px 20px; border: 1px solid var(--text-4); border-radius: var(--csdn-pill);
background: var(--bg-1); color: var(--text-2); font-size: 14px;
transition: all .18s var(--ease);
}
.btn:hover { border-color: var(--primary); color: var(--primary); background: var(--bg-1); }
.btn-primary, .btn.primary {
background: var(--primary); border-color: var(--primary); color: #fff;
box-shadow: none; font-weight: 400;
}
.btn-primary:hover, .btn.primary:hover {
background: var(--primary-600); border-color: var(--primary-600);
color: #fff; transform: none; box-shadow: none;
}
.btn-danger, .btn.danger { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-lg { padding: 10px 32px; font-size: 15px; border-radius: var(--csdn-pill); }
.btn-sm { padding: 5px 14px; font-size: 13px; border-radius: var(--csdn-pill); }
.btn-mini {
padding: 3px 12px; font-size: 12px; border-radius: var(--csdn-pill);
border: 1px solid var(--border); background: var(--bg-1); color: var(--text-2);
}
.btn-mini:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-050); }
.btn.active { background: var(--bg-3); border-color: var(--border); color: var(--text-2); }
.btn-download {
padding: 10px 32px; border-radius: var(--csdn-pill);
background: var(--primary); color: #fff; font-size: 15px; font-weight: 400;
box-shadow: none;
}
.btn-download:hover { background: var(--primary-600); color: #fff; transform: none; box-shadow: none; }
/* 资源评分（download/view.php）：星星可 hover 预览、点击打分 */
.dl-score {
display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
padding: 14px 0 2px; margin-top: 4px;
border-top: 1px solid var(--border);
}
.dl-score-label { font-size: 13px; color: var(--text-2); }
.dl-score .star-group { display: inline-flex; gap: 2px; }
.dl-score .star {
font-size: 22px; line-height: 1; color: var(--text-4);
cursor: pointer; transition: color .15s, transform .15s;
user-select: none; -webkit-user-select: none;
}
.dl-score .star:hover { transform: scale(1.12); }
.dl-score .star.on { color: #FFA000; }
/* 这里不要用 CSS :hover 统一改色 —— 它的优先级高于 .star.on，会把 JS 点亮的
hover 预览覆盖掉。预览/回退全部由 common.js 的 dlStarHover/dlStarOut 处理。 */
.dl-score[data-locked="1"] .star { cursor: default; }
.dl-score[data-locked="1"] .star:hover { transform: none; }
.dl-score-txt { font-size: 12.5px; color: var(--text-3); }
.dl-report {
margin-left: auto; font-size: 12.5px; color: var(--text-3);
}
.dl-report:hover { color: var(--danger, #E34D59); }
/* ------------------------------------------------------------------
前台弹窗（举报 / 通用表单）
showModal() 在 common.js 里，但 .mb-head / .mb-body / .mb-foot / .adm-btn
只定义在 admin.css，前台不加载 → 弹窗会是个没样式的裸框。
这里给前台补一套，全部限定在 .modal-box 作用域内，避免污染其它页面。
后台走 admin.css，两套互不干扰（后台 layout 不引 csdn.css）。
------------------------------------------------------------------ */
.modal-box .mb-head {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.modal-box .mb-head h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-1); }
.modal-box .mb-close {
cursor: pointer; font-size: 20px; line-height: 1; color: var(--text-3); padding: 0 4px;
}
.modal-box .mb-close:hover { color: var(--text-1); }
.modal-box .mb-body { padding: 16px 18px 6px; max-height: 60vh; overflow-y: auto; }
.modal-box .mb-foot {
display: flex; justify-content: flex-end; gap: 10px;
padding: 12px 18px 16px;
}
.modal-box .adm-btn {
height: 32px; padding: 0 16px; border-radius: var(--r-sm);
border: 1px solid var(--border); background: var(--bg-2);
color: var(--text-2); font-size: 13px; cursor: pointer;
}
.modal-box .adm-btn:hover { border-color: var(--primary); color: var(--primary); }
.modal-box .adm-btn.primary {
background: var(--primary); border-color: var(--primary); color: #fff;
}
.modal-box .adm-btn.primary:hover { background: var(--primary-600); color: #fff; }
/* 弹窗内的输入框：原先只对 .rp-form 生效，收藏夹弹窗（#fpNew / #ffInput）用同一个类
却拿不到样式，这里提到 .modal-box 作用域——后台走 admin.css，不受影响 */
.modal-box .adm-input {
width: 100%; padding: 7px 10px; font-size: 13.5px; color: var(--text-1);
background: var(--bg-2); border: 1px solid var(--border);
border-radius: var(--r-sm); outline: none; font-family: inherit;
}
.modal-box .adm-input:focus { border-color: var(--primary); }
/* 举报表单（common.js showReport 生成的 .rp-form） */
.rp-form .af-row { display: flex; gap: 10px; margin-bottom: 14px; align-items: flex-start; }
.rp-form .af-row > label {
flex-shrink: 0; width: 76px; padding-top: 7px;
font-size: 13px; color: var(--text-2); text-align: right;
}
.rp-form .af-input { flex: 1; min-width: 0; }
.rp-form .adm-input {
width: 100%; padding: 7px 10px; font-size: 13.5px; color: var(--text-1);
background: var(--bg-2); border: 1px solid var(--border);
border-radius: var(--r-sm); outline: none; font-family: inherit;
}
.rp-form textarea.adm-input { line-height: 1.6; resize: vertical; }
.rp-form .adm-input:focus { border-color: var(--primary); }
.rp-form .af-display { padding: 7px 0; font-size: 13.5px; color: var(--text-3); }
.rp-reasons { display: flex; flex-direction: column; gap: 8px; }
.rp-reason { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--text-1); cursor: pointer; }
.rp-reason input { margin: 0; accent-color: var(--primary); }
.rp-reason:hover span { color: var(--primary); }
/* 关注按钮：线性浅描边（UED 规范 #CCCCD8 / #555666） */
.btn-follow {
padding: 5px 16px; font-size: 13px; border-radius: var(--csdn-pill);
border: 1px solid var(--text-4); color: var(--text-2); background: var(--bg-1);
}
.btn-follow:hover, .btn-follow.on {
background: var(--primary); border-color: var(--primary); color: #fff;
}
/* ============================================================
7. 表单
============================================================ */
.form-control, .input {
padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r-sm);
background: var(--bg-1); color: var(--text-1);
}
.form-control:focus, .input:focus { border-color: var(--primary); box-shadow: none; }
.form-control::placeholder, .input::placeholder { color: var(--text-3); }
.form-label, .form-row > label { font-size: 14px; color: var(--text-2); font-weight: 400; }
.form-box { border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: none; padding: 24px; }
/* ============================================================
8. 分页：方形小按钮，当前页主色实心
============================================================ */
.pagination { gap: 8px; padding: 24px 0; }
.page-link {
min-width: 32px; height: 32px; padding: 0 10px;
display: inline-flex; align-items: center; justify-content: center;
border: none; border-radius: var(--r-sm);
background: var(--bg-3); color: var(--text-2); font-size: 14px;
}
.page-link:hover { background: var(--primary-050); color: var(--primary); }
.page-link.current {
background: var(--primary); border-color: transparent; color: #fff;
font-weight: 400; box-shadow: none;
}
.page-total, .page-ellipsis { color: var(--text-3); }
/* ============================================================
9. 一级 tab 胶囊 / 二级分类文字行
============================================================ */
.feed-tabs {
display: flex; gap: 8px; padding: 0; margin-bottom: 12px;
border-bottom: none; overflow-x: auto; scrollbar-width: none;
}
.feed-tabs::-webkit-scrollbar { display: none; }
.feed-tabs a {
flex-shrink: 0; display: inline-flex; align-items: center;
height: 32px; padding: 0 16px; border-radius: var(--csdn-pill);
background: var(--bg-3); color: var(--text-2); font-size: 14px; position: static;
transition: background .18s, color .18s;
}
.feed-tabs a:hover { color: var(--primary); }
.feed-tabs a.active {
background: #222226; color: #fff; font-weight: 400;
}
html[data-theme="dark"] .feed-tabs a.active { background: #3A3D44; }
.feed-tabs a.active::after { display: none; }
/* 文章类型筛选（原创 / 转载 / 翻译 / 随笔）—— 排在排序 Tab 下方，视觉更轻一档 */
.feed-types {
display: flex; gap: 6px; flex-wrap: wrap;
padding: 0 0 12px; margin-bottom: 12px;
border-bottom: 1px solid var(--border);
}
.feed-types a {
flex-shrink: 0; display: inline-flex; align-items: center;
height: 26px; padding: 0 12px; border-radius: var(--csdn-pill);
background: transparent; color: var(--text-3); font-size: 13px;
border: 1px solid var(--border);
transition: color .18s, border-color .18s, background .18s;
}
.feed-types a:hover { color: var(--primary); border-color: var(--primary); }
.feed-types a.active {
background: var(--primary); border-color: var(--primary);
color: #fff; font-weight: 400;
}
.cat-bar {
display: flex; gap: 0; padding: 0 0 4px; margin-bottom: 4px;
border-bottom: 1px solid var(--border);
overflow-x: auto; scrollbar-width: none;
}
.cat-bar a {
flex-shrink: 0; display: inline-flex; align-items: center; height: 32px;
padding: 0 14px; border: none; background: none; border-radius: 0;
color: var(--text-2); font-size: 14px;
}
.cat-bar a:hover { color: var(--primary); background: none; border: none; }
.cat-bar a.active { color: var(--primary); font-weight: 500; background: none; border: none; }
/* ============================================================
10. 信息流（CSDN 列表规范：无卡框、无分隔线、靠留白分区）
============================================================ */
.feed-list {
background: transparent; border: none; border-radius: 0;
box-shadow: none; overflow: visible;
}
.feed-item {
display: flex; gap: 16px; padding: 20px 0;
border-bottom: none; transition: none; align-items: flex-start;
}
.feed-item:hover { transform: none; box-shadow: none; }
.feed-item:first-child { padding-top: 4px; }
.feed-item .fi-body { flex: 1; min-width: 0; }
/* 标题 18px / 行高 28px / 500（UED 规范）
必须带 .feed-item .fi-title（0,2,0）才能压过 main.css 11b 区的同选择器规则 */
.feed-item .fi-title, .feed-item h3, .fi-title {
font-size: 18px; line-height: 28px; font-weight: 500;
color: var(--text-1); margin-bottom: 4px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.feed-item .fi-title a, .feed-item h3 a { color: inherit; }
.feed-item .fi-title a:hover, .feed-item h3 a:hover { color: var(--primary); }
/* 摘要 14px / 行高 22px / #999AAA */
.feed-item .fi-summary {
color: var(--text-3); font-size: 14px; line-height: 22px;
margin-bottom: 8px; -webkit-line-clamp: 2;
}
.feed-item .fi-meta {
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
color: var(--text-3); font-size: 13px;
}
.feed-item .fi-meta .tag { color: var(--text-3); }
.feed-item .fi-meta .tag:hover { color: var(--primary); }
.feed-author, .feed-item .fi-author { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); }
.fi-avatar, .feed-item .fi-avatar { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
/* 作者行：CSDN 列表项的第一行（头像 + 昵称），排在标题之前 */
.feed-author-line { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; min-height: 20px; }
.feed-author-line .fi-avatar { width: 20px; height: 20px; }
.feed-author-line a { font-size: 14px; color: var(--text-2); }
.feed-author-line a:hover { color: var(--primary); }
/* meta 行：小图标 + 数字（阅读 / 点赞 / 评论）
内联 svg 不带 width/height，缺了这条规则会撑成整行宽度 */
.feed-item .fi-meta .m { display: inline-flex; align-items: center; gap: 4px; }
.feed-item .fi-meta .m svg { width: 14px; height: 14px; opacity: .85; flex-shrink: 0; }
.feed-cover {
width: 120px; height: 68px; border-radius: var(--r-sm);
object-fit: cover; flex-shrink: 0; background: var(--bg-3);
}
/* 标签：浅底小圆角 */
.tag-mini {
display: inline-flex; align-items: center; height: 18px; padding: 0 6px;
font-size: 12px; border-radius: 2px; font-weight: 400; margin-right: 6px;
}
.tag-top { background: var(--primary-050); color: var(--primary); }
.tag-original { background: var(--primary-050); color: var(--primary); }
.tag { font-size: 13px; color: var(--text-3); }
.tag:hover { color: var(--primary); }
/* ============================================================
11. 首页模块（轮播 / 公告 / 每日精选 / 技术专区）
============================================================ */
.slider {
border-radius: var(--r-md); height: 220px; margin-bottom: 16px;
box-shadow: none; background: var(--bg-3);
}
.slider-dots span { width: 6px; height: 6px; background: rgba(255, 255, 255, .6); }
.slider-dots span.active { width: 20px; background: #fff; }
.announce-bar { padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 16px; }
.announce-bar .ab-item { font-size: 14px; color: var(--text-2); }
.daily-pick .dp-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dp-cover { border-radius: var(--r-sm); aspect-ratio: 16 / 9; }
.dp-title { font-size: 14px; line-height: 22px; color: var(--text-1); margin-top: 8px; }
.dp-index { border-radius: 2px; }
/* 无封面时，绝对定位于左上角的序号徽标会正好压住标题首行
（实测 1440：徽标与标题同在 y=483，把「Docker」盖成「.er」）。
改为徽标与标题同行排列。老浏览器不支持 :has()，
由 ui.js 的 initDailyPick 补 .dp-no-cover 兜底。 */
.dp-item:not(:has(.dp-cover)),
.dp-item.dp-no-cover { display: flex; align-items: flex-start; gap: 6px; }
.dp-item:not(:has(.dp-cover)) .dp-index,
.dp-item.dp-no-cover .dp-index { position: static; flex-shrink: 0; }
.dp-item:not(:has(.dp-cover)) .dp-title,
.dp-item.dp-no-cover .dp-title { margin-top: 0; flex: 1 1 auto; min-width: 0; }
.cat-entry .ce-grid { grid-template-columns: repeat(6, 1fr); gap: 8px; }
.ce-item { padding: 12px 4px; border-radius: var(--r-sm); gap: 8px; }
.ce-item:hover { background: var(--bg-3); }
.ce-icon { width: 40px; height: 40px; border-radius: var(--r-sm); font-size: 20px; background: var(--bg-3); }
.ce-name { font-size: 13px; color: var(--text-2); }
/* ============================================================
12. 侧栏组件
============================================================ */
.side-create { background: var(--grad-primary-soft); border-color: transparent; }
.side-create .card-title { font-size: 15px; }
.side-create p { margin: 0; }
.side-create a { font-size: 14px; color: var(--text-2); line-height: 28px; }
.side-create a:hover { color: var(--primary); }
.rank-list li { padding: 8px 0; gap: 10px; }
.rank-list .rk-no {
min-width: 18px; height: 18px; border-radius: 2px; background: var(--bg-3);
color: var(--text-3); font-size: 12px; font-weight: 400;
}
.rank-list li:nth-child(1) .rk-no,
.rank-list li:nth-child(2) .rk-no,
.rank-list li:nth-child(3) .rk-no { background: var(--primary); color: #fff; }
.rank-list .rk-title { font-size: 14px; line-height: 22px; color: var(--text-1); }
.rank-list .rk-num { color: var(--text-3); font-size: 12px; }
.user-item { padding: 8px 0; gap: 10px; }
.user-item img { width: 36px; height: 36px; }
.user-item .ui-name { font-size: 14px; font-weight: 400; color: var(--text-1); }
.user-item .ui-desc { font-size: 12px; color: var(--text-3); }
.tag-cloud a {
padding: 4px 10px; border-radius: var(--r-sm); font-size: 13px;
background: var(--bg-3); color: var(--text-2);
}
.tag-cloud a:hover { background: var(--primary-050); color: var(--primary); }
.cat-num { background: var(--bg-3); color: var(--text-3); }
.ad-item img { border-radius: var(--r-sm); }
/* ============================================================
13. 页脚：白底细线，灰字
============================================================ */
.footer {
background: var(--bg-1); border-top: 1px solid var(--border);
padding: 32px 0 24px; margin-top: 24px;
}
.footer-cols { border-bottom: 1px solid var(--border); padding-bottom: 24px; }
.fcol h4 { font-size: 14px; color: var(--text-1); margin-bottom: 10px; }
.fcol a { font-size: 13px; color: var(--text-3); line-height: 2; }
.footer-copy { color: var(--text-3); font-size: 12px; padding-top: 20px; }
.footer-links a { color: var(--text-2); font-size: 14px; }
/* ============================================================
14. 空状态 / 提示
============================================================ */
.empty { padding: 48px 20px; color: var(--text-3); }
.empty .e-icon { font-size: 40px; opacity: .35; }
.toast { background: rgba(34, 34, 38, .92); border-radius: var(--r-sm); }
/* ============================================================
15. 移动端底栏 / 悬浮按钮
============================================================ */
.mobile-tabbar {
background: var(--bg-1); border-top: 1px solid var(--border);
box-shadow: none; padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
}
.mobile-tabbar a { color: var(--text-3); font-size: 11px; }
.mobile-tabbar a.on { color: var(--primary); }
.fab-write {
background: var(--primary); box-shadow: 0 4px 14px rgba(252, 85, 49, .34);
}
.back-top {
border-radius: 50% !important;
background: var(--bg-1); border: 1px solid var(--border); color: var(--text-2);
box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}
.back-top:hover { color: var(--primary); border-color: var(--primary); }
/* ---- 作者卡片（文章页：正文与 CC 之后，相关推荐之前） ---- */
.author-card { padding: 16px 20px; }
.ac-main { display: flex; align-items: flex-start; gap: 12px; }
.ac-avatar { flex: 0 0 auto; display: block; width: 48px; height: 48px; }
.ac-avatar img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: block; }
.ac-info { flex: 1 1 auto; min-width: 0; }
.ac-name {
display: inline-block; font-size: 16px; font-weight: 600; color: var(--text-1);
line-height: 24px; text-decoration: none;
}
.ac-name:hover { color: var(--primary); }
.ac-meta {
margin-top: 4px; font-size: 12px; line-height: 20px; color: var(--text-3);
display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.ac-lv, .ac-vip {
display: inline-block; padding: 0 6px; border-radius: 2px; font-size: 12px; line-height: 18px;
}
.ac-lv { background: var(--primary-050); color: var(--primary); }
.ac-vip { background: #FFF7E6; color: #D48806; }
.ac-desc {
margin: 6px 0 0; font-size: 13px; line-height: 20px; color: var(--text-2);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ac-follow {
flex: 0 0 auto; height: 30px; padding: 0 16px; border: 1px solid var(--primary);
border-radius: var(--csdn-pill); background: var(--primary); color: #fff;
font-size: 13px; cursor: pointer; transition: background .18s, color .18s;
}
.ac-follow:hover { background: var(--primary-600); }
.ac-follow.active { background: transparent; color: var(--text-3); border-color: var(--border); }
.ac-stats {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--border);
list-style: none;
}
.ac-stats li { text-align: center; }
.ac-stats b { display: block; font-size: 16px; font-weight: 600; color: var(--text-1); line-height: 24px; }
.ac-stats span { display: block; font-size: 12px; color: var(--text-3); line-height: 18px; }
/* ============================================================
16. 响应式收尾（必须位于文件末尾）
注意：本文件排在 main.css 之后，基础规则会反向覆盖 main.css 末尾的
媒体查询，所以头部 / 导航 / 搜索 / 栅格的窄屏折叠必须在这里重新声明。
============================================================ */
/* 首页渲染左导航时（body.has-rail），≥1200 隐藏顶部横向主菜单，
把模块入口完全交给左侧竖导航 —— 与 CSDN 门户一致 */
@media (min-width: 1200px) {
body.has-rail .nav { display: none; }
body.has-rail .nav-drop { display: none; }
.slider { height: 260px; }
/* 缩略图沿用基础值 120×68（CSDN 实测），此处不再放大 */
}
/* 宽屏布局 —— 按真实 CSDN 门户校准（Playwright 实测 csdn.net）：
1440 → 左导航 256 / 右栏 240 / 主区 1184
1660 → 左导航 256 / 右栏 320 / 主区 1404
1920 → 左导航 256 / 右栏 320 / 主区 1664
CSDN 门户不是居中容器，而是「左导航固定贴边 + 内容区流式铺满」：
header 左右各留 24，内容区右侧留 32。只对带左导航的首页生效，
其余页面（博客列表等）仍走居中容器，避免单栏正文被拉得过宽。 */
@media (min-width: 1440px) {
:root { --max-w: 1360px; }
body.has-rail .container { max-width: none; }
body.has-rail .header .container,
body.has-rail .footer .container { padding-left: 24px; padding-right: 24px; }
body.has-rail .main > .container { padding-left: 0; padding-right: 32px; }
body.has-rail .layout-csdn { grid-template-columns: 256px minmax(0, 1fr) 240px; }
.card { padding: 20px; }
.feed-item { padding: 24px 0; }
}
@media (min-width: 1660px) {
:root { --max-w: 1520px; }
body.has-rail .layout-csdn { grid-template-columns: 256px minmax(0, 1fr) 320px; }
}
/* 992–1199：左导航收起，首页退化为「内容 + 右侧栏」两栏 */
@media (max-width: 1199px) {
.layout-csdn { grid-template-columns: minmax(0, 1fr) 252px; }
.layout-csdn .col-rail { display: none; }
.nav { flex: 1 1 auto; }
.header-search { margin-left: auto; }
}
/* 注意：≥1200 无需再声明 —— 上面「4. 左侧竖向导航」区的基础值就是 216/252，
而 ≥1440 会由上面的宽屏段覆盖为 256/240（≥1660 为 256/320）。
这里再写一遍会因顺序在后把宽屏值压回去。 */
/* 文章详情页（全站唯一没有频道胶囊条的页面）：header 里「LOGO + 主菜单 + 全站导航 +
搜索 + 操作区」全挤在一行。实测全称 LOGO 达 401px，1024 视口下整行 1067px → 溢出 43px。
对策：≤1439 换成短品牌名（省 ~285px）保住主菜单；≤1199 进一步收起主菜单，
入口全部交给「全站导航」下拉（其菜单项已与 $_navs 同源，不丢入口）。 */
body.page-article .logo-full { display: none; }
body.page-article .logo-short { display: inline-flex; }
/* 让位顺序：主菜单先让（shrink 100），LOGO 只在行宽还不够时才省略号收缩 —— 兜底，
避免超长站名把右侧操作区顶出视口（1024 实测过溢出 43px）。
⚠️ 只在 ≥1200 生效：≤1199 时本页主菜单已被 display:none 收起（见下方断点），
行内根本没有可让位的元素，此时 shrink:100 会把搜索框一路压到 0——
实测 390 视口输入区仅 19px、375 仅 4px、360 直接 0px（占位文字被截断且无法输入）。 */
@media (min-width: 1200px) {
body.page-article .nav { flex-shrink: 100; }
/* 搜索框同样优先让位，LOGO 只在行宽还不够时才省略号收缩 —— 兜底，
避免超长站名把右侧操作区顶出视口（1024 实测过溢出 43px） */
body.page-article .header-search { flex-shrink: 100; }
}
body.page-article .logo { min-width: 0; flex-shrink: 1; }
body.page-article .logo span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1199px) {
body.page-article .nav { display: none; }
}
/* ≤1100：搜索框收窄 */
@media (max-width: 1100px) {
.header-search form { width: 240px; }
.hd-right, .header-right { gap: 14px; }
}
/* ≤991：双栏折叠为单栏，侧栏下沉 */
@media (max-width: 991px) {
.layout-csdn { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.layout-csdn .col-main,
.layout-csdn .col-side { grid-column: 1 / -1; }
.layout-csdn .col-side { display: block; }
.sidenav { position: static; }
}
/* ≤900：横向主菜单会与搜索框互相挤压（实测 768px 处菜单被压成半个字），
改为收起主菜单、保留「全站导航」下拉承载全部入口 —— 与 CSDN 移动端一致 */
@media (max-width: 900px) {
.header .container { gap: 12px; }
.nav { display: none; }
.nav-drop { display: block; }
.nav-drop-toggle { padding: 0 10px; font-size: 13px; }
.header-search form { width: 200px; }
}
@media (max-width: 768px) {
.header-search form { width: 100%; }
.header-search { flex: 1 1 auto; min-width: 0; }
.header-search .btn-search { padding: 0 14px; }
.main { padding: 12px 0 24px; }
.feed-item { padding: 16px 0; }
.feed-item .fi-title, .feed-item h3, .fi-title { font-size: 17px; line-height: 26px; }
/* 窄屏轮播：改为等比完整显示。cover 会按高度撑满、把横幅两侧的文案裁掉
（375 宽下 4:1 的图要放大到 748px 宽才够高），改用 contain + 比例盒 */
.slider { height: auto; aspect-ratio: 4 / 1; min-height: 92px; }
.slider-item img, .slider-item svg { object-fit: contain; background: var(--bg-3); }
.cat-entry .ce-grid { grid-template-columns: repeat(3, 1fr); }
.hd-right, .header-right { gap: 10px; }
}
/* ≤640：隐藏主菜单，仅留 LOGO + 搜索 + 头像 */
@media (max-width: 640px) {
.nav { display: none; }
/* 覆盖 main.css 472 行的 .slider{height:160px}，保持等比盒 */
.slider { height: auto; aspect-ratio: 4 / 1; min-height: 88px; }
.logo { font-size: 17px; gap: 6px; }
/* ≤640 全站统一「只留 LOGO 图标」（main.css 1672 行的 .logo span{display:none}）。
文章页上面那条 .logo-short{display:inline-flex} 优先级更高会把它顶回来，
这里按同断点再收一次，保持与首页/列表页一致。 */
body.page-article .logo-short { display: none; }
.logo svg { width: 24px; height: 24px; }
.logo-img { max-width: 110px; height: 24px; }
.header-search .btn-search { display: none; } /* 用回车搜索，给输入框让宽度 */
.theme-toggle { display: none; }
/* 「创作」只留图标：640~768 之间宽度够，保留文字（CSDN 也是带文字的） */
.btn-create span, .btn-write span { display: none; }
.btn-create, .btn-write { padding: 0 12px; }
.feed-cover { display: none; }
.dp-grid { grid-template-columns: repeat(2, 1fr); }
.copyright-text a { white-space: normal; word-break: break-all; }
}
@media (max-width: 480px) {
.daily-pick .dp-grid { grid-template-columns: 1fr; }
.ce-grid, .cat-entry .ce-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ============================================================
17. 文章详情页（CSDN 1:1，依据 blog.csdn.net 实测）
实测值（1440 视口，blogdevteam/article/details/126135357）：
body 底 #F5F6F7 ｜ 容器 1318（左右边距 61）
左栏 300 ｜ 间距 8 ｜ 主内容 1010（内 padding 0 24px → 正文 962）
标题 32px/600/#1A1A1A ｜ meta 12px/#999999/高 32 ｜ 收录标签高 24
正文 16px/25.14px/#333 ；p 16/24/#4D4D4D/margin 0 0 16
h2 22/32/600/#4F4F4F（margin 24 0 8）｜ h3 20/30/600 ｜ li margin 8 0 0 32
左栏卡片 白底/radius 2px/margin-bottom 8 ｜ 标题高 38（padding 16 16 0）
右侧固定工具条 44px 贴右
============================================================ */
/* ---- 页面底色与容器宽度（首页仍是纯白，只有文章页转浅灰） ---- */
body.page-article { background: #F5F6F7; }
body.page-article .container { max-width: 1318px; padding-left: 0; padding-right: 0; }
body.page-article .main { padding: 22px 0 40px; }
/* ---- 三栏栅格：300 | 1fr（=1010）；右侧工具条为 fixed，不占列 ---- */
.layout-article {
display: grid;
grid-template-columns: 300px minmax(0, 1fr);
gap: 8px;
align-items: start;
}
.art-rail { position: sticky; top: 64px; min-width: 0; }
.art-main { min-width: 0; }
/* ---- 左栏卡片（CSDN .aside-box） ---- */
.art-card {
background: var(--bg-1);
border: none;
border-radius: 2px;
box-shadow: none;
padding: 0;
margin-bottom: 8px;
}
.art-card-title {
font-size: 14px; font-weight: 500; color: var(--text-1);
line-height: 22px; padding: 16px 16px 0; margin: 0;
}
.art-card-title::before { display: none; }
.art-card-body { padding: 12px 16px 16px; }
/* ---- 作者卡（CSDN .profile-intro + rank-information + 操作按钮） ---- */
.author-box { padding: 0 0 10px; }
.ab-top { display: flex; align-items: flex-start; padding: 16px 16px 0; }
.ab-avatar { flex: 0 0 auto; width: 50px; height: 50px; }
.ab-avatar img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; display: block; }
.ab-info { margin-left: 8px; min-width: 0; flex: 1 1 auto; }
.ab-name { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 500; line-height: 22px; }
.ab-name a { color: var(--text-1); }
.ab-name a:hover { color: var(--primary); }
.ab-sub { font-size: 12px; line-height: 20px; color: var(--text-3); margin-top: 2px; }
.ab-sign {
margin: 6px 16px 0; font-size: 12px; line-height: 20px; color: var(--text-2);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ab-rank {
display: grid; grid-template-columns: repeat(4, 1fr);
background: #FAFAFA; border-radius: 2px;
margin: 10px 16px 0; padding: 14px 0; /* CSDN 实测该块高 76px */
}
.ab-rank dl { margin: 0; text-align: center; }
.ab-rank dt { font-size: 12px; line-height: 20px; color: var(--text-3); font-weight: 400; }
.ab-rank dd { font-size: 14px; line-height: 24px; color: var(--text-1); font-weight: 600; margin: 2px 0 0; }
.ab-actions { display: flex; justify-content: space-between; padding: 8px 16px 0; }
.ab-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 120px; height: 28px; border-radius: 14px;
font-size: 12px; line-height: 1; cursor: pointer;
background: var(--bg-1); color: var(--text-2); border: 1px solid var(--border);
transition: all .18s;
}
.ab-btn:hover { color: var(--primary); border-color: var(--primary); }
.ab-btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.ab-btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
.ab-btn-primary.followed { background: var(--bg-1); color: var(--text-3); border-color: var(--border); }
.ab-actions .ab-btn:only-child { flex: 1 1 auto; }
/* ---- 左栏列表（热门文章 / 作者其他文章） ---- */
.hotArticle-list { list-style: none; margin: 0; padding: 0; }
.hotArticle-list li {
display: flex; align-items: flex-start; gap: 8px;
font-size: 14px; line-height: 22px; padding: 6px 0;
}
.hotArticle-list li + li { border-top: 1px solid var(--border); }
.ha-no {
flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px;
border-radius: 2px; font-size: 11px; font-style: normal; line-height: 16px;
text-align: center; background: #C2C6CC; color: #fff;
}
.ha-no.top { background: var(--primary); }
.ha-title {
flex: 1 1 auto; min-width: 0; color: var(--text-2);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ha-title:hover { color: var(--primary); }
.ha-count { flex: 0 0 auto; font-size: 12px; color: var(--text-3); }
.hotArticle-list.plain li { padding: 7px 0; }
/* ---- 目录（左栏） ---- */
.toc-box .art-card-body { max-height: 340px; overflow-y: auto; }
/* main.css 的折叠规则是 .toc-box.collapsed > a，新结构多了一层 .art-card-body，需要补上 */
.toc-box.collapsed .art-card-body { display: none; }
/* 折叠按钮靠右（common.js 注入到 .card-title 内） */
.toc-box .card-title .toc-toggle { margin-left: auto; }
.toc-box a {
display: block; font-size: 13px; line-height: 20px; color: var(--text-2);
padding: 5px 0; border-left: 2px solid transparent; padding-left: 10px; margin-left: -2px;
}
.toc-box a:hover { color: var(--primary); }
.toc-box a.active { color: var(--primary); border-left-color: var(--primary); background: var(--primary-050); }
.toc-box a.lv3 { padding-left: 24px; font-size: 12px; }
/* ---- 主内容白卡（CSDN .blog-content-box） ---- */
.blog-content-box {
background: var(--bg-1);
border-radius: 2px 2px 0 0;
padding: 0 24px 16px;
}
.blog-content-box .breadcrumb { padding: 14px 0 0; margin: 0; font-size: 12px; line-height: 20px; }
.blog-content-box .breadcrumb .bc-cur { color: var(--text-3); }
.article-header-box { padding: 8px 0 0; }
.title-article {
font-size: 32px; line-height: 42px; font-weight: 600; color: #1A1A1A;
margin: 6px 0 12px; word-break: break-word;
}
/* 元信息行：12px / #999999 / 高 32
注意用 min-height 而非固定 height —— 窄屏放不下会换行，固定高度会让
第二行溢出并压住下方的「收录于」标签行（390 视口实测重叠）。 */
.article-info-box { display: flex; align-items: center; }
.article-bar-top {
display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
min-height: 32px; font-size: 12px; line-height: 32px; color: #999999;
}
.article-bar-top .abt-tag {
display: inline-block; height: 18px; line-height: 18px; padding: 0 6px;
border-radius: 2px; font-size: 12px;
}
.article-bar-top .abt-tag.original { color: var(--primary); border: 1px solid var(--primary-200); }
.article-bar-top .abt-tag.reprint { color: #E6A23C; border: 1px solid #F5DAB1; }
.article-bar-top .abt-tag.top { color: #fff; background: var(--primary); }
.article-bar-top .abt-dot { color: #DDD; }
/* 收录标签行：高 24 */
.blog-tags-box {
display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
min-height: 24px; margin: 8px 0 0;
}
.blog-tags-box .bt-label { font-size: 14px; color: var(--text-3); }
.blog-tags-box .tag-link {
display: inline-block; height: 24px; line-height: 24px; padding: 0 4px;
font-size: 14px; color: var(--text-2);
}
.blog-tags-box .tag-link:hover { color: var(--primary); }
/* ---- 正文排版（⇔ CSDN #content_views / .htmledit_views） ---- */
.article-content {
/* ⚠️ 2026-09-26 复核（blog.csdn.net/blogdevteam/article/details/126135357）：
CSDN 文章页正文有**两层**，同页嵌套、内容完全相同，只有字号不同，极易混淆——
#article_content 外层包裹 14px / 22px ← 旧基线误测的就是它
#content_views 真正正文 16px / 25.1429px #333333 ← 本类必须对齐的目标
#content_views p 16px / 24px #4D4D4D（下面单独覆盖）
#content_views li / blockquote 16px / 25.1429px #333333
取 #content_views 而不是外层包裹，原因：正文里存在「没有被 包住的裸文本节点」
（Markdown 转换产物，如本文首段），它们直接继承本容器字号。若按 14px 渲染，
就会出现「同一篇文章里裸文本 14px、p/li 16px」的大小不一致，且与 CSDN 不符。 */
font-size: 16px;
line-height: 25.14px;
color: #333333;
font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
margin-top: 12px;
word-break: break-word;
}
.article-content p {
font-size: 16px; line-height: 24px; color: #4D4D4D; margin: 0 0 16px;
}
/* 显式清掉 main.css 给 h2 加的左侧主色竖条（padding-left:12 + border-left:3px），
CSDN 的 h2 只有一条下划线 */
.article-content h2 {
font-size: 22px; line-height: 32px; font-weight: 600; color: #4F4F4F;
margin: 24px 0 8px; padding: 0 0 8px;
border: none; border-bottom: 1px solid #EEEEEE;
}
.article-content h3 {
font-size: 20px; line-height: 30px; font-weight: 600; color: #4F4F4F;
margin: 24px 0 8px;
}
.article-content h4 {
font-size: 18px; line-height: 28px; font-weight: 600; color: #4F4F4F;
margin: 20px 0 8px;
}
/* CSDN 实测 li 宽 930 = 容器 962 − 32，缩进全部来自 li 的 margin-left；
故 ul/ol 的 padding-left（main.css 给了 26px）必须清零，否则叠成 58px */
.article-content ul, .article-content ol { margin: 0 0 16px; padding-left: 0; }
.article-content li { font-size: 16px; line-height: 25.14px; color: #333333; margin: 8px 0 0 32px; }
/* 清掉 main.css 的图片阴影（CSDN 正文图无阴影） */
.article-content img { max-width: 100%; height: auto; border-radius: 2px; margin: 16px 0; box-shadow: none; }
.article-content blockquote {
margin: 16px 0; padding: 8px 16px; background: #FAFAFA;
border-left: 3px solid var(--primary); color: #666;
}
.article-content a { color: var(--primary); text-decoration: none; }
.article-content a:hover { text-decoration: underline; }
.article-content table { font-size: 14px; }
.article-content code {
background: #F5F6F7; border-radius: 2px; padding: 1px 5px;
font-size: 14px; color: #D6336C;
}
.article-content pre {
background: #F7F7F9; border-radius: 4px; padding: 12px 16px;
overflow-x: auto; margin: 0 0 16px; font-size: 13px; line-height: 22px;
}
.article-content pre code { background: none; color: #333; padding: 0; }
.article-from { font-size: 14px; line-height: 22px; color: var(--text-3); margin: 16px 0 0; }
/* ---- 底部操作条（CSDN .tool-box） ---- */
.blog-content-box .av-actions {
display: flex; align-items: center; justify-content: center; gap: 24px;
margin: 24px 0 0; padding: 16px 0; border-top: 1px solid var(--border);
}
.blog-content-box .av-act {
display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
background: none; border: none; cursor: pointer;
font-size: 12px; line-height: 18px; color: var(--text-3);
}
.blog-content-box .av-act .icon { font-size: 18px; line-height: 22px; }
.blog-content-box .av-act .num { font-size: 12px; color: var(--text-3); }
.blog-content-box .av-act:hover, .blog-content-box .av-act.active { color: var(--primary); }
.blog-content-box .av-act.active .icon { filter: none; }
/* ---- CC 版权（CSDN 正文后） ---- */
.blog-content-box .article-copyright {
display: flex; gap: 12px; align-items: flex-start;
background: #FAFAFA; border-radius: 2px; padding: 12px 16px; margin-top: 16px;
}
.blog-content-box .article-copyright .copyright-icon { flex: 0 0 auto; color: var(--text-2); }
.blog-content-box .article-copyright .copyright-text { font-size: 12px; line-height: 20px; color: var(--text-3); }
.blog-content-box .article-copyright .copyright-text a { color: var(--text-2); }
.blog-content-box .article-copyright .copyright-text a:hover { color: var(--primary); }
/* ---- 主内容下方的推荐 / 评论卡（白底 2px 圆角） ---- */
.art-main > .art-card { margin-top: 8px; }
.comment-box .cm-item { padding: 14px 0; }
.comment-box .cm-avatar { width: 36px; height: 36px; }
/* ---- 右侧固定工具条（CSDN .csdn-side-toolbar，44px 贴右） ---- */
.art-toolbar {
position: fixed; right: 1px; top: 50%; transform: translateY(-50%);
z-index: 900; display: flex; flex-direction: column; gap: 8px;
width: 44px; box-sizing: border-box;
}
.art-btn {
display: flex; flex-direction: column; align-items: center; justify-content: center;
box-sizing: border-box; width: 44px; min-width: 44px; max-width: 44px; min-height: 44px; padding: 6px 0;
background: var(--bg-1); border: 1px solid var(--border); border-radius: 50%;
color: var(--text-2); cursor: pointer; text-align: center;
box-shadow: 0 1px 4px rgba(0, 0, 0, .04); transition: all .18s;
}
.art-btn .at-ico { font-size: 16px; line-height: 18px; }
.art-btn .at-num { font-size: 11px; line-height: 14px; font-style: normal; color: var(--text-3); }
.art-btn:hover { border-color: var(--primary); color: var(--primary); }
.art-btn:hover .at-num { color: var(--primary); }
.art-btn.active { border-color: var(--primary); background: var(--primary-050); color: var(--primary); }
.art-btn.active .at-num { color: var(--primary); }
/* ---- 响应式（按断点降序） ---- */
@media (max-width: 1380px) {
body.page-article .container { padding-left: 16px; padding-right: 16px; }
}
/* 左栏收窄，主内容让位 */
@media (max-width: 1200px) {
.layout-article { grid-template-columns: 260px minmax(0, 1fr); }
.ab-btn { width: 100px; }
.art-toolbar { display: none; }
}
/* 单栏：左栏下沉到正文之后（CSDN 移动端行为） */
@media (max-width: 991px) {
.layout-article { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.art-rail { position: static; order: 2; }
.art-main { order: 1; }
.ab-btn { width: 48%; }
}
@media (max-width: 768px) {
body.page-article .main { padding: 12px 0 24px; }
.blog-content-box { padding: 0 16px 12px; border-radius: 2px; }
/* meta 行换行后压缩行高，避免两行 32px 过高 */
.article-bar-top { line-height: 22px; row-gap: 4px; padding: 5px 0; }
.title-article { font-size: 24px; line-height: 34px; }
/* 原先这里有一条 `.article-content{font-size:16px;line-height:24px}`，
2026-09-26 删除：基础规则已修正为 16px/25.14px（对齐 CSDN #content_views），
且 CSDN 在 390 视口实测同样是 16px/25.1429px —— 正文排版本就不该有断点差异，
留着只会变成第二个真相源。 */
/* 作者卡片：窄屏四联数据改两列，避免挤成一团 */
.author-card { padding: 14px 16px; }
.ac-stats { grid-template-columns: repeat(2, 1fr); gap: 12px 8px; }
.article-content h2 { font-size: 19px; line-height: 28px; }
.article-content h3 { font-size: 17px; line-height: 26px; }
.article-content pre { font-size: 12px; line-height: 20px; padding: 10px 12px; }
.blog-content-box .av-actions { gap: 16px; }
}
@media (max-width: 480px) {
.title-article { font-size: 21px; line-height: 30px; }
.blog-content-box .av-actions { gap: 12px; }
}
/* 打印 */
@media print {
.header, .footer, .mobile-tabbar, .fab-write, .back-top, .sidenav,
.art-toolbar, .art-rail { display: none !important; }
}
/* ==========================================================================
18. 通用内容页三栏（博客列表 / 专栏 / 标签 / 排行榜 / 论坛 / 问答 / 下载 /
动态 / 会员 / 单页 / 站点地图 / 个人中心 …）
由 layout/main.php 统一注入 common/rail.php，模板内部的 .layout-2col
继续提供「主内容 + 右栏」，因此这里只需把右栏改成 CSDN 的固定宽度。
========================================================================== */
.layout-page { display: grid; grid-template-columns: 256px minmax(0, 1fr); gap: 24px; align-items: start; }
.page-body { min-width: 0; }
@media (min-width: 1200px) {
/* 左导航接管模块入口，顶部横向菜单与「全站导航」下拉收起（与首页一致） */
body.has-page-rail .nav { display: none; }
body.has-page-rail .nav-drop { display: none; }
/* 与首页同样的「左导航贴边 + 内容流式铺满」 */
body.has-page-rail .container { max-width: none; }
body.has-page-rail .header .container,
body.has-page-rail .footer .container { padding-left: 24px; padding-right: 24px; }
body.has-page-rail .main > .container { padding-left: 0; padding-right: 32px; }
/* 右栏改为 CSDN 固定宽度，不再按 12 栅格的 3/12 算。
必须显式指定 grid-column：部分模板的 aside 在 DOM 里排在 col-main 之前，
自动排布会把侧栏放到第 1 列。 */
body.has-page-rail .layout-2col { grid-template-columns: minmax(0, 1fr) 240px; }
body.has-page-rail .layout-2col .col-main { grid-column: 1; }
body.has-page-rail .layout-2col .col-side { grid-column: 2; width: 240px; }
}
@media (min-width: 1660px) {
body.has-page-rail .layout-2col { grid-template-columns: minmax(0, 1fr) 320px; }
body.has-page-rail .layout-2col .col-side { width: 320px; }
}
/* ---- 响应式（按断点降序） ---- */
@media (max-width: 1380px) {
body.has-page-rail .main > .container { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 1200px) {
.layout-page { grid-template-columns: 216px minmax(0, 1fr); gap: 16px; }
}
/* ≤991：左导航下沉，页面退回单栏（与 main.css 的 layout-2col 单栏规则一致） */
@media (max-width: 991px) {
.layout-page { grid-template-columns: minmax(0, 1fr); }
.layout-page .col-rail.sidenav { display: none; }
}
/* ---- 长文型单栏页收窄阅读宽度（专栏 / 归档 / 单页）----
加左导航后正文可用宽达 1128px，单栏长文一行过长会伤可读性；
CSDN 专栏页正文同样收在 ~1010px（与文章页内容卡同宽）。 */
body.page-narrow .page-body { max-width: 1010px; }
/* ---- 动态（blink）----
main.css 把整段动态正文包在 里且给了 --info 蓝，看起来整段都是超链接。
CSDN 的动态正文是深色、整块可点，只有 hover 才变色。 */
.bi-content a, .blink-body a { color: var(--text-1); text-decoration: none; }
.bi-content a:hover, .blink-body a:hover { color: var(--primary); }
/* CSDN 卡片常态与 hover 都不带阴影；hover 用浅底代替 */
.blink-item:hover { box-shadow: none; background: var(--bg-3); }
/* ==========================================================================
19. 频道胶囊条 —— CSDN 首页 `.home_box_nav` 1:1 复刻
──────────────────────────────────────────────────────────────────────────
为什么要有它：原先全站模块入口放在 48px header 内部的 .nav 里，而 ≥1200
为了给左导航让位把 .nav 隐藏了，结果用户看到「顶部菜单导航没有了」。
实测 csdn.net（1440）：header 正下方 y=48 处有一条 height=50 的纯白横条
（.home_box_nav），里面是一排胶囊；博客频道页同样有（.home_box_nav 56px）。
文章详情页实测没有这条横条，故 body.page-article 不渲染（见 main.php）。
实测取值：胶囊 font-size 14px / padding 6px 12px / border-radius 8px /
height≈28 / 项间距 16px；未选中底 #F5F6F7（UED 规范值），选中 #222226 实心白字。
渲染位置＝内容栏第一行，所以左边界天然与内容对齐，不需要任何偏移计算。
========================================================================== */
.chan-nav { background: var(--bg-1); padding: 12px 0; }
.chan-list {
display: flex; align-items: center; gap: 8px;
height: 31px; margin: 0; padding: 0; list-style: none;
overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.chan-list::-webkit-scrollbar { display: none; }
.chan-list > li { flex: 0 0 auto; }
.chan-item {
display: inline-flex; align-items: center;
height: 28px; padding: 0 12px; box-sizing: border-box;
border-radius: 8px;
background: var(--bg-3); color: var(--text-2);
font-size: 14px; font-weight: 400; line-height: 1; white-space: nowrap;
text-decoration: none;
transition: background .18s, color .18s;
}
.chan-item:hover { background: #ECEDEF; color: var(--text-1); }
/* 选中态：CSDN 为 #222226 实心 + 白字（我们的 --text-1 正是 #222226） */
.chan-item.on { background: var(--text-1); color: #fff; font-weight: 500; }
.chan-item.on:hover { background: var(--text-1); color: #fff; }
html[data-theme="dark"] .chan-item { background: var(--bg-3); color: var(--text-2); }
html[data-theme="dark"] .chan-item:hover { background: var(--bg-4); color: var(--text-1); }
html[data-theme="dark"] .chan-item.on { background: var(--primary); color: #fff; }
/* 有胶囊条时：
1) 横条紧贴 header 下沿（CSDN 实测 bar.top = 48），所以 .main 的上内距归零；
2) header 里的横向主菜单与「全站导航」下拉全部收起 —— 同一批入口只保留一处，
CSDN 的 header 本身也不含横向菜单；
3) 左导航吸顶位置同步到 header 高度。 */
body.has-chan .main { padding-top: 0; }
body.has-chan .header .nav,
body.has-chan .header .nav-drop { display: none; }
body.has-chan .sidenav { top: var(--header-h); }
/* 左导航首项与胶囊条同一水平基线：CSDN 实测 rail 首项 top=60 / 胶囊 top=62 */
body.has-chan .sidenav-group:first-child { padding-top: 12px; }
/* ≤991 左导航下沉后，胶囊条成为唯一的横向入口，保留横向滚动 */
@media (max-width: 991px) {
.chan-nav { padding: 10px 0; }
.chan-list { height: 30px; gap: 6px; }
.chan-item { height: 28px; padding: 0 10px; font-size: 13px; }
}
/* ==========================================================================
20. 状态码页 + 外链跳转中间页 —— CSDN 1:1 复刻
──────────────────────────────────────────────────────────────────────────
两块一起放在本节，因为它们的取值来自同两次实测：
① 状态码页 = www.csdn.net 404 左卡片 `.new_404`
width 300 / 白底 / 无圆角无边框无阴影 / padding 0 0 24px / 文字居中
.head padding 25px 0 0（高 185 = 25 + 图 160）
img 180x160, display block, margin 0 60px（300-120=180 正好占满）
.e_text 14px/20px #222226, padding-left 32, margin 13 0 10, 左对齐
.e_text_tip 14px/24px #555666, padding-left 32, margin 0 0 24, 左对齐, a #277CCC
.goto_feed flex space-between, padding 0 32（110+16+110 = 236 = 300-64 正好占满）
a 110x32 border-box, line-height 32, 14px, #555666,
1px solid #CCCCD8, border-radius 16
插画不用 CSDN 的图片（版权 + 外链依赖），改为等价尺寸的内联 SVG，
取色全部走变量，深浅色主题各一套。
② 外链跳转中间页 = link.csdn.net（1440）
body #F3F4F5
.content width 450 / 水平居中 / padding-top 220
.loading-item 白底 / 1px solid #E1E1E1 / radius 12 / padding 24
.loading-tip #FDF5E6 / radius 4 / padding 12 / 下间距 16 / flex 居中
图标 24x24，文字 16px/600 #222226 左边距 12
.loading-topic 14px #222226 / 下间距 24，目标地址 #FC5531
.loading-btn #FC5531 / 1px 描边 / radius 18 / padding 6px 18px / 14px / 右对齐
========================================================================== */
:root {
--err-page-bg: #F5F6F7; /* CSDN 404 body 底色 */
--err-card-bg: #FFFFFF;
--err-text-1: #222226;
--err-text-2: #555666;
--err-link: #277CCC; /* CSDN 404 正文里「建议专区」的蓝 */
--err-illo-bg: #F5F6F7;
--err-illo-face: #E8E8ED;
--err-illo-line: #DCDCE2;
--err-accent: #FC5531;
--link-page-bg: #F3F4F5; /* CSDN 中间页 body 底色 */
--link-card-bg: #FFFFFF;
--link-card-bd: #E1E1E1;
--link-tip-bg: #FDF5E6; /* 浅琥珀警告条 */
}
html[data-theme="dark"] {
--err-page-bg: #131417;
--err-card-bg: #1B1C20;
--err-text-1: #E9EAEC;
--err-text-2: #B4B8C0;
--err-link: #6BB0F0;
--err-illo-bg: #26272C;
--err-illo-face: #2F3138;
--err-illo-line: #3A3D44;
--err-accent: #FF6B48;
--link-page-bg: #131417;
--link-card-bg: #1B1C20;
--link-card-bd: #2A2C31;
--link-tip-bg: #3A2A12;
}
/* ---- ① 状态码页 ---- */
body.has-err,
body.has-err .main { background: var(--err-page-bg); }
.err-wrap { padding: 20px 16px 60px; }
.err-card {
width: 300px;
max-width: 100%;
margin: 0 auto 10px;
background: var(--err-card-bg);
padding: 0 0 24px;
text-align: center;
box-sizing: border-box;
/* CSDN 原卡片无圆角、无边框、无阴影，这里保持一致 */
}
.err-head { padding: 25px 0 0; }
.err-illo {
display: block;
width: 180px;
height: 160px;
margin: 0 auto; /* CSDN 是 margin 0 60px（300-120=180），居中等价 */
}
.err-title {
font-size: 14px;
line-height: 20px;
font-weight: 400;
color: var(--err-text-1);
text-align: left;
padding: 0 0 0 32px;
margin: 13px 0 10px;
word-break: break-word;
}
.err-tips {
font-size: 14px;
line-height: 24px;
font-weight: 400;
color: var(--err-text-2);
text-align: left;
padding: 0 0 0 32px;
margin: 0 0 24px;
word-break: break-word;
}
.err-tips a { color: var(--err-link); text-decoration: none; }
.err-tips a:hover { text-decoration: underline; }
.err-acts {
display: flex;
justify-content: space-between;
padding: 0 32px;
}
.err-btn {
display: block;
width: 110px;
height: 32px;
box-sizing: border-box;
line-height: 32px;
font-size: 14px;
color: var(--err-text-2);
background: transparent;
border: 1px solid #CCCCD8;
border-radius: 16px;
text-align: center;
text-decoration: none;
white-space: nowrap;
transition: color .18s, border-color .18s, background .18s;
}
.err-btn:hover { color: var(--primary); border-color: var(--primary); }
.err-btn.is-primary { color: #fff; background: var(--primary); border-color: var(--primary); }
.err-btn.is-primary:hover { background: var(--primary-700); border-color: var(--primary-700); color: #fff; }
/* ---- ② 外链跳转中间页 ---- */
body.page-plain { background: var(--link-page-bg); }
.link-page { padding: 0 16px; }
.link-content {
width: 450px;
max-width: 100%;
margin: 0 auto;
padding: 220px 0 60px; /* CSDN 实测 padding-top 220 */
box-sizing: border-box;
}
/* CSDN 的 logo 图是 175x48，这一行固定 48 高；本站是 icon+站名组合，同样撑满
—— 卡片顶边 = 220 + 48 + 16 = 284，与 CSDN 实测的 .loading-item top 完全一致 */
.link-logo { display: flex; justify-content: center; align-items: center; height: 48px; margin: 0 0 16px; }
.link-logo a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.link-logo img { display: block; width: auto; max-height: 48px; }
/* 保护：站名若仍是长串，不能撑破 450 宽的卡片 */
.link-logo-text {
color: var(--text-1); font-size: 20px; font-weight: 600;
max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.link-item {
background: var(--link-card-bg);
border: 1px solid var(--link-card-bd);
border-radius: 12px;
padding: 24px;
box-sizing: border-box;
}
.link-tip {
display: flex;
align-items: center;
background: var(--link-tip-bg);
border-radius: 4px;
padding: 12px;
margin: 0 0 16px;
}
.link-tip-icon { flex: 0 0 auto; width: 24px; height: 24px; }
.link-tip-text {
margin-left: 12px;
font-size: 16px;
font-weight: 600;
line-height: 22px;
color: var(--text-1);
}
.link-topic {
font-size: 14px;
line-height: 24px;
color: var(--text-1);
margin: 0 0 24px;
word-break: break-all;
}
.link-target { color: var(--primary); text-decoration: none; }
.link-target:hover { text-decoration: underline; }
.link-actions { display: flex; justify-content: flex-end; }
/* CSDN 实测：66x33 / padding 6px 18px / radius 18 / 1px #FC5531 / 14px */
.link-btn {
display: inline-block;
padding: 6px 18px;
border: 1px solid var(--primary);
border-radius: 18px;
font-size: 14px;
line-height: 19px;
color: var(--primary);
text-decoration: none;
transition: background .18s, color .18s;
}
.link-btn:hover { background: var(--primary); color: #fff; }
/* 站内动作回执（common/message.php）：同一张卡片，但内嵌在带 header 的页面里，
不需要 link.csdn.net 那 220px 的首屏留白 */
.link-content.is-msg { padding-top: 60px; }
.link-count { color: var(--text-3); }
/* 外链中间页地址必须允许任意位置断行：
rawurlencode 之后把 :// 变成 %3A%2F%2F，整体比原始 URL 长约 1.5 倍，
例如文章页版权声明那条 57 字符的 CC 协议链接会变成 86 字符，
在 1024 这类中间宽度下会把正文容器撑出横向滚动条（实测溢出 43px）。
只针对 /goto?... 生效，不改变其它链接的换行行为。 */
a[href^="/goto?"] { word-break: break-all; overflow-wrap: anywhere; }
/* GEO IP 属地小标（评论昵称后 / 作者栏 / 论坛楼层 / 个人主页）
格式「・广东」，灰色 12px，与昵称同行不换行；无法识别时前端输出「・未知」 */
.geo-loc {
display: inline-block;
margin-left: 6px;
font-size: 12px;
line-height: 1.2;
font-weight: 400;
color: var(--text-3);
vertical-align: baseline;
white-space: nowrap;
}
@media (max-width: 768px) {
.err-wrap { padding: 16px 12px 40px; }
.link-content { padding: 120px 0 48px; }
.link-item { padding: 16px; }
.link-tip-text { font-size: 15px; }
}
/* ============================================================
主导航二级下拉菜单（后台「导航菜单 → 前台主导航」配置子级后自动出现）
悬停展开，样式沿用 nav-drop-menu 的卡片规格，避免视觉割裂
============================================================ */
.nav .nav-item { position: relative; display: inline-flex; flex: 0 0 auto; }
.nav .nav-item > .nav-item-a {
display: flex; align-items: center; gap: 3px;
}
.nav-sub-caret {
width: 0; height: 0; margin-left: 2px; opacity: .55;
border-left: 3.5px solid transparent;
border-right: 3.5px solid transparent;
border-top: 4px solid currentColor;
}
.nav .nav-item .nav-sub {
display: none;
position: absolute; top: 100%; left: 0; z-index: 260;
min-width: 138px; padding: 4px;
background: #fff;
border: 1px solid var(--border);
border-radius: 6px;
box-shadow: 0 6px 18px rgba(0, 0, 0, .09);
}
.nav .nav-item:hover .nav-sub { display: block; }
.nav .nav-item .nav-sub a {
display: block; padding: 7px 12px;
font-size: 13px; font-weight: 400; color: var(--text-2);
border-radius: 4px; white-space: nowrap;
}
.nav .nav-item .nav-sub a:hover { background: var(--bg-3); color: var(--primary); }
/* ============================================================
17. 论坛/问答模块（2026-09-24 由 static/css/_t4.css 合并进来，原文件已删）
类名前缀 fb- / thd- / op- / fl- / fm-，并复用 .cm-* 楼层样式
============================================================ */
/* ==========================================================================
_t4.css — 论坛 / 问答 / 帖子详情 模板改造专用样式（新增，不改动既有 CSS）
--------------------------------------------------------------------------
作用范围：template/default/forum/*.php（index / board / ask / post / my）
template/default/thread/*.php（view / post_item）
依赖：main.css + csdn.css 提供的设计令牌
--primary / --primary-050 / --primary-600 / --text-1/2/3 / --border
--bg-1/3 / --csdn-pill / --r-xs/md / --success / --warning / --danger
复用的既有类：.card .card-title .btn .btn-primary .feed-tabs .tag-mini
.rank-list .user-item .tag-cloud .cm-item .cm-avatar .cm-body
.cm-name .cm-text .cm-meta .cm-act .cm-child .article-content
本文件只「新增类」与「在新增父容器内限定既有类」，不覆写既有全局类。
命名前缀：fb- 论坛版块 / thd- 帖子与列表 / op- 楼主区 / fl- 楼层区 / fm- 表单页
========================================================================== */
/* ---------- 1. 通用：醒目主色「发帖 / 提问」按钮 ---------- */
.btn-post {
display: inline-flex; align-items: center; justify-content: center; gap: 4px;
height: 34px; padding: 0 18px;
border: 1px solid var(--primary); border-radius: var(--csdn-pill);
background: var(--primary); color: #fff;
font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap;
box-shadow: 0 2px 8px rgba(0, 0, 0, .10);
transition: background .18s var(--ease), box-shadow .18s var(--ease);
}
.btn-post:hover,
.btn-post:focus {
background: var(--primary-600); border-color: var(--primary-600);
color: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .16);
}
.btn-post .bp-plus { font-size: 17px; line-height: 1; margin-top: -1px; }
.btn-post-sm { height: 30px; padding: 0 14px; font-size: 13px; }
.btn-post-sm .bp-plus { font-size: 15px; }
/* ---------- 2. 论坛页头（概览 / 版块头） ---------- */
.fb-hero {
display: flex; align-items: center; gap: 14px;
}
.fb-hero-icon {
width: 52px; height: 52px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
border-radius: 10px; color: #fff; font-size: 24px; font-weight: 600;
}
.fb-hero-main { flex: 1; min-width: 0; }
.fb-hero-title { font-size: 20px; font-weight: 600; color: var(--text-1); line-height: 1.4; }
.fb-hero-desc { font-size: 13px; color: var(--text-3); margin-top: 4px; }
.fb-hero-meta {
display: flex; flex-wrap: wrap; gap: 14px;
font-size: 13px; color: var(--text-3); margin-top: 6px;
}
.fb-hero-act { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* 概览统计条 */
.fb-stat {
display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 12px;
}
.fb-stat-item { display: inline-flex; align-items: baseline; gap: 5px; }
.fb-stat-num { font-size: 18px; font-weight: 600; color: var(--text-1); line-height: 1.2; }
.fb-stat-label { font-size: 12px; color: var(--text-3); }
/* ---------- 3. 版块分区与卡片网格 ---------- */
.fb-sec-stat { font-size: 13px; font-weight: 400; color: var(--text-3); margin-left: auto; }
.fb-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
gap: 12px;
}
.fb-card {
display: flex; align-items: flex-start; gap: 12px;
padding: 14px; border: 1px solid var(--border); border-radius: var(--r-md);
background: var(--bg-1);
transition: border-color .18s var(--ease), background .18s var(--ease);
}
.fb-card:hover { border-color: var(--primary); background: var(--bg-3); }
.fb-card-icon {
width: 40px; height: 40px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
border-radius: 9px; color: #fff; font-size: 18px; font-weight: 600; line-height: 1;
}
.fb-card-body { flex: 1; min-width: 0; display: block; }
.fb-card-name {
display: block; font-size: 15px; font-weight: 600; color: var(--text-1);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fb-card-desc {
display: block; font-size: 12px; color: var(--text-3); margin-top: 4px; line-height: 20px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fb-card-meta { display: block; font-size: 12px; color: var(--text-3); margin-top: 6px; }
/* ---------- 4. 列表工具条（筛选 tab + 右侧发帖按钮） ---------- */
.fb-toolbar {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
/* 工具条内的 tab 不再自带内缩与下划线，交给 .fb-toolbar 统一 */
.fb-toolbar .feed-tabs { padding: 0; border-bottom: none; margin-bottom: 0; gap: 18px; }
.fb-toolbar .feed-tabs a { padding: 8px 0; }
/* ---------- 5. 帖子列表项 ---------- */
.thd-item {
display: flex; align-items: center; gap: 12px;
padding: 14px 0; border-bottom: 1px solid var(--border);
transition: background .18s var(--ease);
}
.thd-item:last-child { border-bottom: none; }
.thd-item:hover { background: var(--bg-3); }
.thd-avatar { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.thd-main { flex: 1; min-width: 0; }
.thd-title {
font-size: 15px; font-weight: 500; color: var(--text-1); line-height: 22px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.thd-title a:hover { color: var(--primary); }
.thd-meta {
display: flex; flex-wrap: wrap; gap: 4px 14px;
font-size: 12px; color: var(--text-3); margin-top: 4px;
}
.thd-right { flex-shrink: 0; min-width: 68px; text-align: right; }
.thd-count { font-size: 16px; font-weight: 600; color: var(--text-2); }
.thd-count-label { font-size: 12px; color: var(--text-3); margin-left: 3px; }
.thd-views { display: block; font-size: 12px; color: var(--text-3); margin-top: 2px; }
/* 问答列表：左侧回答数 */
.thd-ans { width: 58px; flex-shrink: 0; text-align: center; }
.thd-ans-num { display: block; font-size: 18px; font-weight: 600; color: var(--success); line-height: 1.3; }
.thd-ans-label { display: block; font-size: 12px; color: var(--text-3); }
.thd-ans .tag-mini { margin: 4px 0 0; }
/* ---------- 6. 帖子详情：标题区 ---------- */
.thd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.thd-head-main { flex: 1; min-width: 0; }
.thd-head-title { font-size: 22px; font-weight: 600; color: var(--text-1); line-height: 1.45; }
.thd-head-meta {
display: flex; flex-wrap: wrap; gap: 6px 16px;
font-size: 13px; color: var(--text-3); margin-top: 10px;
}
.thd-reward { color: var(--warning); }
.thd-head-act { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.thd-head-act .act-btn { padding: 6px 12px; }
/* ---------- 7. 帖子详情：楼主区（与楼层视觉分离） ---------- */
.op-box { border-top: 2px solid var(--primary); }
.op-head {
display: flex; align-items: center; gap: 12px;
padding-bottom: 14px; border-bottom: 1px dashed var(--border);
}
.op-avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.op-author { flex: 1; min-width: 0; }
.op-name {
display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
font-size: 15px; font-weight: 600; color: var(--text-1);
}
.op-badge {
padding: 1px 8px; border-radius: var(--csdn-pill);
background: var(--primary-050); color: var(--primary);
font-size: 12px; font-weight: 500; line-height: 1.6;
}
.op-lv { font-size: 12px; font-weight: 500; color: var(--text-3); }
.op-sub {
display: flex; flex-wrap: wrap; gap: 4px 14px;
font-size: 12px; color: var(--text-3); margin-top: 4px;
}
/* 正文：14px / 22px */
.op-body {
padding: 16px 0; font-size: 14px; line-height: 22px; color: var(--text-1);
word-break: break-word;
}
.op-body img { max-width: 100%; }
.op-tags { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 14px; }
.op-tag {
display: inline-block; padding: 3px 12px; border-radius: var(--csdn-pill);
background: var(--bg-3); color: var(--text-2); font-size: 12px; line-height: 1.6;
border: 1px solid transparent; transition: all .18s var(--ease);
}
.op-tag:hover { color: var(--primary); border-color: var(--primary); }
.op-tag-top { background: var(--danger-bg); color: var(--danger); }
.op-tag-essence { background: var(--success-bg); color: var(--success); }
.op-tag-ask { background: #f0edff; color: var(--purple); }
.op-tag-reward { background: var(--warning-bg); color: var(--warning); }
.op-foot {
display: flex; flex-wrap: wrap; gap: 18px;
padding-top: 12px; border-top: 1px solid var(--border);
}
/* ---------- 8. 帖子详情：楼层回复区 ---------- */
.fl-sec .card-title { margin-bottom: 4px; }
.fl-empty { padding: 32px 20px; }
.cm-floor { padding: 16px 0; border-bottom: 1px solid var(--border); }
.cm-floor:last-child { border-bottom: none; }
.cm-floor .cm-avatar { width: 40px; height: 40px; }
.cm-floor .cm-name {
display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
}
.cm-floor .cm-text {
font-size: 14px; line-height: 22px; color: var(--text-1); word-break: break-word;
}
.cm-floor .cm-text img { max-width: 100%; }
.cm-floor .cm-meta { align-items: center; }
.cm-lv {
padding: 0 6px; border-radius: var(--r-xs);
background: var(--bg-3); color: var(--text-3); font-size: 12px; line-height: 18px;
}
.cm-badge-best {
padding: 1px 8px; border-radius: var(--csdn-pill);
background: var(--success-bg); color: var(--success);
font-size: 12px; font-weight: 500; line-height: 1.6;
}
.cm-best {
background: var(--success-bg); border-radius: var(--r-md);
padding: 14px; border-bottom: none; margin: 8px 0;
}
.cm-act-row { gap: 18px; margin-top: 8px; }
.cm-act-adopt, .cm-act-adopt:hover { color: var(--success); }
/* 嵌套回复：子楼层不再重复底部分割线 */
.cm-child { padding: 12px 0 4px; }
.cm-child .cm-item { padding: 12px 0; }
.cm-child .cm-item:last-child { border-bottom: none; }
.cm-child .cm-avatar { width: 32px; height: 32px; }
/* ---------- 9. 快速回复 ---------- */
.reply-submit { margin-top: 12px; text-align: right; }
/* ---------- 10. 发帖 / 编辑 / 我的帖子 ---------- */
.fm-card { padding-bottom: 20px; }
.fm-select { width: auto; min-width: 240px; }
.fm-input-num { width: 160px; }
.fm-foot { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
.fb-my-switch { display: flex; gap: 4px; margin-left: auto; }
.fb-my-tab {
padding: 4px 12px; border-radius: var(--csdn-pill);
font-size: 13px; color: var(--text-3); transition: all .18s var(--ease);
}
.fb-my-tab:hover { color: var(--primary); }
.fb-my-tab.active { background: var(--primary-050); color: var(--primary); font-weight: 600; }
.fb-side-btn { display: block; text-align: center; margin-top: 10px; }
.fb-side-btn:first-of-type { margin-top: 0; }
/* ==========================================================================
11. 响应式（断点升序：≤991 → ≤768 → ≤480）
========================================================================== */
@media (max-width: 991px) {
.fb-grid { grid-template-columns: repeat(2, 1fr); }
.fb-hero-title { font-size: 18px; }
.thd-head-title { font-size: 20px; }
}
@media (max-width: 768px) {
.fb-hero { flex-wrap: wrap; }
.fb-hero-act { width: 100%; justify-content: flex-end; }
.fb-hero-icon { width: 44px; height: 44px; font-size: 20px; }
.fb-grid { grid-template-columns: 1fr; }
.fb-toolbar { flex-wrap: wrap; }
.fb-toolbar .feed-tabs { width: 100%; overflow-x: auto; }
.thd-head { flex-direction: column; align-items: stretch; }
.thd-head-act { justify-content: flex-start; }
.thd-item { padding: 12px 0; }
.thd-avatar { width: 32px; height: 32px; }
.thd-title { font-size: 14px; }
.thd-right { min-width: 56px; }
.thd-ans { width: 48px; }
.op-avatar { width: 38px; height: 38px; }
.cm-child { margin-left: 24px; padding-left: 10px; }
}
@media (max-width: 480px) {
.fb-stat { gap: 6px 16px; }
.fb-stat-num { font-size: 16px; }
.fb-hero-title { font-size: 17px; }
.fb-card { padding: 12px; }
.fb-card-icon { width: 34px; height: 34px; font-size: 16px; }
.thd-head-title { font-size: 18px; }
.thd-item { gap: 10px; }
.thd-avatar { display: none; }
.thd-ans { width: 42px; }
.thd-ans-num { font-size: 16px; }
.thd-right { min-width: 48px; }
.op-body { font-size: 14px; line-height: 22px; }
.op-foot { gap: 14px; }
.cm-floor .cm-avatar { width: 32px; height: 32px; }
.cm-child { margin-left: 14px; padding-left: 8px; }
.btn-post { padding: 0 14px; }
.fm-select, .fm-input-num { width: 100%; min-width: 0; }
}
/* ============================================================
18. 搜索结果页 + 会员中心（2026-09-24 由 static/css/_t5.css 合并进来，原文件已删）
类名前缀 sr- / pc- / vip- / vm- / plan-，另有通用 .hl 与 .empty-state
============================================================ */
/* ==========================================================================
_t5.css —— 搜索结果页 + 会员中心 增量样式（T5 改造）
--------------------------------------------------------------------------
用途：为两个页面补齐 CSDN 版式所需的「侧栏 / 筛选 / 卡片 / 空状态」样式。
约定：
1) 只新增 .sr-*（搜索页）、.vip-* / .vm-* / .pc-*（会员中心）、.empty-state
（两页共用空状态）等新类，不改写 main.css / csdn.css / ui.css 里任何已有类；
2) 本文件由 layout/main.php 排在 csdn.css 之后加载（或合并到尾部），
同优先级下后加载者胜出；需要覆盖旧规则处已提高选择器权重；
3) 配色统一走令牌：主色 var(--primary)、文字 var(--text-1/2/3)、
线 var(--border)、胶囊圆角 var(--csdn-pill)、底色 var(--bg-3)；
4) 响应式收尾放在文件末尾，断点升序：≤991 → ≤768 → ≤480。
========================================================================== */
/* ---------- 共用：空状态 ---------- */
.empty-state {
padding: 40px 20px;
text-align: center;
color: var(--text-3);
}
.empty-state .es-icon {
font-size: 40px;
line-height: 1;
margin-bottom: 12px;
opacity: .5;
}
.empty-state .es-title {
font-size: 15px;
font-weight: 600;
color: var(--text-2);
margin-bottom: 6px;
}
.empty-state .es-desc {
font-size: 13px;
line-height: 22px;
margin-bottom: 14px;
}
.empty-state .es-action {
display: inline-block;
padding: 6px 18px;
font-size: 13px;
color: var(--primary);
border: 1px solid var(--primary-200, var(--primary));
border-radius: var(--csdn-pill);
background: var(--primary-050, transparent);
transition: all .18s ease;
}
.empty-state .es-action:hover {
color: #fff;
background: var(--primary);
border-color: var(--primary);
}
/* ---------- 共用：关键词高亮（highlightKey() 输出 ） ---------- */
.hl {
font-style: normal;
color: var(--primary);
font-weight: 600;
}
/* ==========================================================================
一、搜索结果页（template/default/home/search.php）
========================================================================== */
/* 顶部搜索条 */
.sr-search { padding: 16px; margin-bottom: 16px; }
.sr-search .form-inline { margin: 0; }
/* 结果统计行 */
.sr-stat {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
padding: 14px 16px;
margin-bottom: 16px;
font-size: 14px;
color: var(--text-2);
}
.sr-stat .sr-stat-num b { color: var(--primary); font-size: 16px; padding: 0 2px; }
.sr-stat .sr-kw { color: var(--text-1); font-weight: 600; }
.sr-stat .sr-stat-sub { font-size: 13px; color: var(--text-3); }
/* 结果分组卡片 */
.sr-group { margin-bottom: 16px; }
.sr-group .card-title { display: flex; align-items: center; gap: 8px; }
.sr-group .sr-count {
font-size: 12px;
font-weight: 400;
color: var(--text-3);
padding: 1px 8px;
border-radius: var(--csdn-pill);
background: var(--bg-3);
}
.sr-group .feed-list,
.sr-group .thread-list { margin-top: 4px; }
.sr-item { position: relative; }
/* 用户结果列表（原有 .user-item 是横向条目，这里补一层容器间距） */
.sr-ulist { display: block; }
.sr-ulist .user-item + .user-item { border-top: 1px solid var(--border); }
/* 前端筛选：被过滤掉的条目 / 空分组 */
.sr-hide { display: none !important; }
/* ---------- 右侧筛选栏 ---------- */
.sr-filter { padding: 16px; }
.sr-fblock { padding: 12px 0; border-top: 1px solid var(--border); }
.sr-filter .sr-fblock:first-of-type { padding-top: 4px; border-top: none; }
.sr-flabel {
font-size: 13px;
font-weight: 600;
color: var(--text-1);
margin-bottom: 10px;
}
.sr-fopts { display: flex; flex-wrap: wrap; gap: 8px; }
.sr-pill {
display: inline-block;
padding: 5px 14px;
font-size: 13px;
line-height: 20px;
color: var(--text-2);
background: var(--bg-3);
border: 1px solid transparent;
border-radius: var(--csdn-pill);
transition: all .18s ease;
}
.sr-pill:hover { color: var(--primary); background: var(--primary-050, #FFF1ED); }
.sr-pill.on {
color: #fff;
background: var(--primary);
border-color: var(--primary);
font-weight: 500;
}
.sr-ftip {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--border);
font-size: 12px;
line-height: 20px;
color: var(--text-3);
}
/* ---------- 右侧热搜榜 ---------- */
.sr-hot { padding: 16px; margin-top: 16px; }
.sr-hot-list { margin: 0; padding: 0; list-style: none; }
.sr-hot-list li {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 0;
font-size: 14px;
line-height: 22px;
}
.sr-hot-list li a {
flex: 1;
min-width: 0;
color: var(--text-1);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sr-hot-list li a:hover { color: var(--primary); }
.sr-hot-no {
flex: 0 0 18px;
width: 18px;
height: 18px;
line-height: 18px;
text-align: center;
font-size: 12px;
font-weight: 600;
color: var(--text-3);
background: var(--bg-3);
border-radius: var(--r-sm);
}
.sr-hot-no.top { color: #fff; background: var(--primary); }
/* ==========================================================================
二、会员中心（template/default/vip/*.php）
统一骨架：.layout-2col > aside.col-side.col-side-nav.nav-btnlist + .col-main
（与账号中心 account/setting.php 完全一致）
========================================================================== */
/* ---------- 左侧导航 ---------- */
.vip-nav { padding: 8px; }
.vip-nav .btn {
justify-content: flex-start;
width: 100%;
margin: 0 0 2px;
padding: 9px 14px;
font-size: 14px;
font-weight: 400;
color: var(--text-2);
background: transparent;
border: none;
border-radius: var(--r-sm);
transition: all .18s ease;
}
.vip-nav .btn:hover { color: var(--primary); background: var(--primary-050, #FFF1ED); }
.vip-nav .btn.on,
.vip-nav .btn.active {
color: var(--primary);
font-weight: 600;
background: var(--primary-050, #FFF1ED);
box-shadow: inset 2px 0 0 var(--primary);
}
/* ---------- 会员状态卡（沿用 .vip-my / .vm-* 既有结构） ---------- */
.vip-my .vm-expire { font-size: 13px; opacity: .9; line-height: 22px; }
.vip-my .vm-expire a { color: #fff; text-decoration: underline; }
.vip-my .vm-expire b { font-weight: 700; }
/* .vms-item 原为渐变底上的半透明白，放在白色卡片里会看不见，这里改为浅灰底 */
.vip-my .vms-item {
background: var(--bg-3);
border: 1px solid var(--border);
}
.vip-my .vms-item b { color: var(--text-1); }
.vip-my .vms-item span { color: var(--text-3); opacity: 1; }
.vip-my .vm-quick { margin: 14px 0 0; }
.vip-my .vm-head .btn-primary { flex-shrink: 0; }
/* 普通用户徽标置灰 */
.vip-badge.gray { background: var(--bg-3); color: var(--text-3); border: 1px solid var(--border); }
/* ---------- 订单 / 记录表格 ---------- */
.vip-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.vip-table th {
padding: 10px 12px;
text-align: left;
font-weight: 600;
font-size: 13px;
color: var(--text-2);
background: var(--bg-3);
border-bottom: 1px solid var(--border);
white-space: nowrap;
}
.vip-table td {
padding: 11px 12px;
color: var(--text-1);
border-bottom: 1px solid var(--border);
vertical-align: middle;
}
.vip-table tbody tr:hover td { background: var(--bg-3); }
.vip-table .vip-td-sub { font-size: 12px; color: var(--text-3); }
.vip-more { padding: 12px 0 0; text-align: right; font-size: 13px; }
.vip-more a { color: var(--primary); }
/* ---------- 套餐卡（开通页选择器 + 首页套餐列表共用视觉） ---------- */
.plan-picker { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.plan-card {
align-items: stretch !important;
justify-content: flex-start !important;
gap: 6px !important;
padding: 16px 14px !important;
text-align: left !important;
}
.plan-card .pc-name {
font-size: 16px;
font-weight: 600;
color: var(--lv-color, var(--primary));
}
.plan-card .pc-price { display: flex; align-items: baseline; gap: 2px; color: var(--lv-color, var(--primary)); }
.plan-card .pc-price .p-sym { font-size: 14px; }
.plan-card .pc-price .p-num { font-size: 26px; font-weight: 700; line-height: 1.1; }
.plan-card .pc-price .p-unit { font-size: 13px; color: var(--text-3); }
.plan-card .pc-sub { font-size: 12px; color: var(--text-3); }
.plan-card .pc-desc {
font-size: 13px;
color: var(--text-2);
line-height: 20px;
min-height: 40px;
}
.plan-card .pc-rights {
margin: 4px 0 0;
padding: 0;
list-style: none;
font-size: 12.5px;
color: var(--text-2);
}
.plan-card .pc-rights li { padding: 2px 0 2px 16px; position: relative; line-height: 20px; }
.plan-card .pc-rights li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--lv-color, var(--primary));
font-weight: 700;
}
/* ---------- 会员首页热门内容 ---------- */
.vip-hot-list { margin: 0; padding: 0; list-style: none; }
.vip-hot-list li {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 0;
font-size: 14px;
line-height: 22px;
border-bottom: 1px solid var(--border);
}
.vip-hot-list li:last-child { border-bottom: none; }
.vip-hot-list li a {
flex: 1;
min-width: 0;
color: var(--text-1);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.vip-hot-list li a:hover { color: var(--primary); }
.vip-hot-list li span { flex-shrink: 0; font-size: 12px; color: var(--text-3); }
/* ==========================================================================
三、响应式收尾（断点升序）
========================================================================== */
/* ≤991px：侧栏下沉为通栏，左导航转横向滑动胶囊（与账号中心窄屏表现一致） */
@media (max-width: 991px) {
.sr-stat { padding: 12px 14px; }
.vip-nav {
display: flex;
gap: 8px;
overflow-x: auto;
padding: 10px !important;
scrollbar-width: none;
}
.vip-nav::-webkit-scrollbar { display: none; }
.vip-nav .btn {
width: auto;
flex-shrink: 0;
white-space: nowrap;
margin: 0;
padding: 6px 14px !important;
font-size: 13px;
border: 1px solid var(--border) !important;
border-radius: var(--csdn-pill) !important;
background: var(--bg-3) !important;
}
.vip-nav .btn.on,
.vip-nav .btn.active {
color: #fff !important;
background: var(--primary) !important;
border-color: var(--primary) !important;
box-shadow: none;
}
.vip-my .vm-head { padding: 20px; gap: 14px; }
.plan-picker { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}
/* ≤768px：统计行与表格收紧 */
@media (max-width: 768px) {
.sr-stat { flex-direction: column; align-items: flex-start; gap: 6px; }
.sr-filter { padding: 14px; }
.sr-fopts { gap: 6px; }
.sr-pill { padding: 4px 12px; font-size: 12.5px; }
.vip-my .vm-head { flex-direction: column; align-items: flex-start; padding: 18px; }
.vip-my .vm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vip-table th, .vip-table td { padding: 9px 10px; font-size: 13px; }
.empty-state { padding: 30px 14px; }
}
/* ≤480px：单列铺满，套餐卡一屏一张 */
@media (max-width: 480px) {
.sr-stat .sr-stat-num { font-size: 14px; }
.vip-my .vm-stats { grid-template-columns: minmax(0, 1fr); }
.vip-my .vm-quick a { padding: 6px 12px; font-size: 12.5px; }
.plan-picker { grid-template-columns: minmax(0, 1fr); }
.plan-card .pc-desc { min-height: 0; }
.sr-hot { margin-top: 12px; }
}
/* ==========================================================================
21. 内容管理 / 创作中心（template/default/blog/manage.php）
──────────────────────────────────────────────────────────────────────────
骨架沿用 §18 的 .layout-2col + .col-side /.col-main；左侧导航与 .vip-nav
完全同款（同类页面同一表现，避免会员中心和内容管理两套左导航长得不一样）。
列表区按 CSDN 内容管理做：过滤 tab 条 + 封面缩略图行 + 右侧操作。
⚠️ 本节自带响应式收尾，必须留在文件末尾（见 §16 说明）。
========================================================================== */
.mng-nav { padding: 8px; }
.mng-nav .btn {
justify-content: flex-start;
width: 100%;
margin: 0 0 2px;
padding: 9px 14px;
font-size: 14px;
font-weight: 400;
color: var(--text-2);
background: transparent;
border: none;
border-radius: var(--r-sm);
transition: all .18s ease;
}
.mng-nav .btn:hover { color: var(--primary); background: var(--primary-050, #FFF1ED); }
.mng-nav .btn.on,
.mng-nav .btn.active {
color: var(--primary);
font-weight: 600;
background: var(--primary-050, #FFF1ED);
}
.mng-page { padding-bottom: 8px; }
.mng-list { padding: 0 20px 16px; }
.mng-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-bottom: 1px solid var(--border);
margin-bottom: 4px;
}
.mng-tabs { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; }
.mng-tabs::-webkit-scrollbar { display: none; }
.mng-tab {
position: relative;
flex-shrink: 0;
padding: 14px 0 12px;
font-size: 15px;
color: var(--text-2);
white-space: nowrap;
border-bottom: 2px solid transparent;
}
.mng-tab:hover { color: var(--primary); }
.mng-tab.on { color: var(--primary); font-weight: 600; border-bottom-color: var(--primary); }
.mng-write { flex-shrink: 0; }
.mng-item {
/* 显式写出行向与顶端对齐：main.css 里已有 .lp-item/.mp-item/.pp-item/.ap-item
一套同名组件（column + center），本项目前缀改用 mng- 避开，这里再显式声明一次做双保险 */
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 14px;
padding: 16px 0;
border-bottom: 1px solid var(--border);
}
.mng-item:last-child { border-bottom: none; }
.mng-cover {
flex-shrink: 0;
width: 132px;
height: 76px;
border-radius: var(--r-sm);
overflow: hidden;
background: var(--bg-3);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.mng-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mng-cover-empty { color: var(--text-4); }
.mng-body { flex: 1; min-width: 0; }
.mng-title {
display: block;
font-size: 16px;
font-weight: 600;
line-height: 1.5;
color: var(--text-1);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mng-title:hover { color: var(--primary); }
.mng-sum {
margin-top: 5px;
font-size: 13px;
line-height: 1.6;
color: var(--text-3);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.mng-meta {
margin-top: 8px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
font-size: 12.5px;
color: var(--text-3);
}
.mng-type { color: var(--primary); }
.mng-ops { flex-shrink: 0; display: flex; align-items: center; gap: 14px; font-size: 13px; }
.mng-ops a { color: var(--text-2); }
.mng-ops a:hover { color: var(--primary); }
.mng-ops a.danger { color: #E34D59; }
.mng-ops a.danger:hover { color: #C9353F; }
/* 专栏新建 / 编辑表单（blog/mycolumn.php）
字段少，用「定宽 label + 弹性输入区」两栏，和后台 af-row 视觉对齐但走前台 token */
.mng-colform { padding: 18px 0 6px; }
.mng-form-row {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 16px;
}
.mng-form-row > label {
flex-shrink: 0;
width: 72px;
padding-top: 8px;
font-size: 13.5px;
color: var(--text-2);
text-align: right;
}
.mng-form-row > input,
.mng-form-row > textarea {
flex: 1;
min-width: 0;
padding: 8px 10px;
font-size: 14px;
color: var(--text-1);
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
outline: none;
font-family: inherit;
}
.mng-form-row > textarea { line-height: 1.6; resize: vertical; }
.mng-form-row > input:focus,
.mng-form-row > textarea:focus { border-color: var(--primary); }
.mng-foot { padding: 14px 0 0; font-size: 12.5px; color: var(--text-3); }
/* ≤991px：侧栏下沉，左导航转横向滑动胶囊（与会员中心完全同款） */
@media (max-width: 991px) {
.mng-nav {
display: flex;
gap: 8px;
overflow-x: auto;
padding: 10px !important;
scrollbar-width: none;
}
.mng-nav::-webkit-scrollbar { display: none; }
.mng-nav .btn {
width: auto;
flex-shrink: 0;
white-space: nowrap;
margin: 0;
padding: 6px 14px !important;
font-size: 13px;
border: 1px solid var(--border) !important;
border-radius: var(--csdn-pill) !important;
background: var(--bg-3) !important;
}
.mng-nav .btn.on,
.mng-nav .btn.active {
color: #fff !important;
background: var(--primary) !important;
border-color: var(--primary) !important;
box-shadow: none;
}
.mng-list { padding: 0 14px 12px; }
}
/* ≤640px：封面缩为左侧小图，操作整行右对齐 */
@media (max-width: 640px) {
.mng-item { flex-wrap: wrap; gap: 10px; }
.mng-cover { width: 96px; height: 56px; font-size: 20px; }
.mng-title {
font-size: 15px;
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.mng-ops { width: 100%; justify-content: flex-end; gap: 18px; padding-top: 2px; }
/* 窄屏：label 不再单独占一列，改为上下堆叠 */
.mng-form-row { flex-direction: column; gap: 6px; margin-bottom: 14px; }
.mng-form-row > label { width: auto; padding-top: 0; text-align: left; }
.mng-form-row > input,
.mng-form-row > textarea { width: 100%; }
}
/* ≤640px：举报弹窗表单上下堆叠（与上一条 mng-form-row 同断点，合并写在末尾） */
@media (max-width: 640px) {
.rp-form .af-row { flex-direction: column; gap: 5px; }
.rp-form .af-row > label { width: auto; padding-top: 0; text-align: left; }
.modal-box .mb-body { max-height: 66vh; }
}
/* ---------------------------------------------------------------------------
* 收藏夹分组（第三梯队-1）
* .fav-folders 收藏列表页顶部的收藏夹 bar
* .fp-* 详情页「收藏到」弹窗里的收藏夹列表
* 依赖 common.js 里 favFolder* / doFavPick 生成的 .modal-mask / .modal-box 结构
* ------------------------------------------------------------------------- */
.fav-folders {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
padding: 10px 24px;
border-bottom: 1px solid var(--border);
}
.ff-item {
display: inline-flex;
align-items: center;
gap: 2px;
font-size: 13px;
color: var(--text-2);
background: var(--bg-3);
border: 1px solid transparent;
border-radius: 14px;
padding: 0 6px 0 12px;
line-height: 26px;
max-width: 220px;
}
.ff-item.on { color: var(--primary); background: var(--primary-050, #FFF1ED); border-color: var(--primary); }
.ff-link { color: inherit; display: inline-flex; align-items: center; gap: 4px; }
.ff-item em { font-style: normal; font-size: 12px; opacity: .7; }
.ff-ops { display: inline-flex; align-items: center; gap: 4px; opacity: 0; transition: opacity .15s; }
.ff-item:hover .ff-ops { opacity: 1; }
.ff-ops a { color: var(--text-3); font-size: 13px; line-height: 1; padding: 0 2px; }
.ff-ops a:hover { color: var(--primary); }
.ff-add {
font-size: 13px;
color: var(--primary);
padding: 0 12px;
line-height: 26px;
border: 1px dashed var(--border);
border-radius: 14px;
}
.ff-add:hover { border-color: var(--primary); }
.fp-list { max-height: 240px; overflow-y: auto; margin: -4px 0 10px; }
.fp-item {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 8px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
color: var(--text-1);
}
.fp-item:hover { background: var(--bg-3); }
.fp-item.on { color: var(--primary); }
.fp-item input { margin: 0; accent-color: var(--primary); }
.fp-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-num { font-size: 12px; color: var(--text-3); }
/* ≤640px：收藏夹 bar 换行铺满，操作常显（触屏没有 hover） */
@media (max-width: 640px) {
.fav-folders { padding: 8px 14px; }
.ff-item { max-width: none; }
.ff-ops { opacity: 1; }
}
/* ============================================================
* §19 打赏（reward）
*
* 覆盖两块：① 文章页正文后的 .reward-box（打赏区 + 打赏者头像墙）
* ② 打赏弹窗内的金额选择 .rw-amounts / .rw-amt
* 弹窗外壳沿用 §17 的 .modal-mask / .modal-box / .mb-*，不重复定义。
* 配色全部走 csdn.css 的令牌，随主题切换自动生效。
* ============================================================ */
.reward-box {
margin: 20px 0 0;
padding: 16px 20px 18px;
background: var(--bg-2, #fff);
border: 1px solid var(--border, #F0F0F2);
border-radius: 4px;
}
.rw-head {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
}
.rw-head b { font-size: 15px; font-weight: 600; color: var(--text-1, #222226); }
.rw-sub { font-size: 13px; color: var(--text-3, #999AAA); }
.rw-sub i { font-style: normal; color: var(--primary); font-weight: 600; }
.rw-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 12px 0 0;
}
.rw-face {
width: 32px;
height: 32px;
border-radius: 50%;
overflow: hidden;
background: var(--bg-3, #F5F6F7);
display: block;
}
.rw-face img { width: 100%; height: 100%; display: block; object-fit: cover; }
.rw-act {
display: flex;
align-items: center;
gap: 14px;
margin: 14px 0 0;
}
.rw-more { font-size: 13px; color: var(--text-3, #999AAA); }
.rw-more:hover { color: var(--primary); }
/* 弹窗：金额档位 */
.rw-amounts {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 12px;
}
.rw-amt {
position: relative;
min-width: 62px;
padding: 0 12px;
height: 34px;
line-height: 32px;
text-align: center;
font-size: 14px;
color: var(--text-1, #222226);
border: 1px solid var(--border, #F0F0F2);
border-radius: 4px;
cursor: pointer;
user-select: none;
}
.rw-amt:hover { border-color: var(--primary); color: var(--primary); }
.rw-amt.on {
color: var(--primary);
border-color: var(--primary);
background: var(--primary-050, #FFF1ED);
}
/* radio 隐藏但保留可访问性：靠 .on 表现选中态 */
.rw-amt input[type=radio] {
position: absolute;
left: -9999px;
width: 0;
height: 0;
}
.rw-amt.rw-custom {
min-width: 96px;
padding: 0 8px;
display: inline-flex;
align-items: center;
}
.rw-inp {
width: 74px;
height: 26px;
padding: 0 6px;
border: 0;
border-radius: 0;
font-size: 13px;
background: transparent;
}
.rw-inp:focus { border: 0; box-shadow: none; }
.rw-msg {
width: 100%;
min-height: 62px;
padding: 8px 10px;
font-size: 13px;
line-height: 1.6;
resize: vertical;
}
.rw-tip {
margin: 8px 0 0;
font-size: 12px;
color: var(--text-3, #999AAA);
}
/* 「我的打赏」列表 */
.rw-tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--border, #F0F0F2); margin-bottom: 14px; }
.rw-tabs a { padding: 0 0 10px; font-size: 15px; color: var(--text-2, #555666); border-bottom: 2px solid transparent; }
.rw-tabs a.on { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.rw-sum {
display: flex;
gap: 24px;
padding: 12px 0 14px;
margin-bottom: 6px;
border-bottom: 1px dashed var(--border, #F0F0F2);
}
.rw-sum div { font-size: 13px; color: var(--text-3, #999AAA); }
.rw-sum b { display: block; font-size: 18px; color: var(--text-1, #222226); margin-top: 2px; }
.rw-row {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 0;
border-bottom: 1px solid var(--border, #F0F0F2);
}
.rw-row:last-child { border-bottom: 0; }
.rw-main { flex: 1; min-width: 0; }
.rw-title { font-size: 14px; color: var(--text-1, #222226); display: block; }
.rw-title:hover { color: var(--primary); }
.rw-meta { font-size: 12px; color: var(--text-3, #999AAA); margin-top: 3px; }
.rw-amount { font-size: 15px; font-weight: 600; color: var(--primary); white-space: nowrap; }
.rw-msg-text { font-size: 13px; color: var(--text-2, #555666); margin-top: 4px; }
/* ≤640px：档位每行三个，头像墙收紧 */
@media (max-width: 640px) {
.reward-box { padding: 14px; }
.rw-amt { min-width: 0; flex: 1 1 28%; }
.rw-amt.rw-custom { flex: 1 1 100%; }
.rw-inp { width: 100%; }
.rw-sum { gap: 14px; }
}
/* ============================================================
* §20 付费文章（paid）—— 正文截断 + 付费墙
*
* 结构（blog/view.php）：
* .article-content.is-locked → 只渲染前 N 字，底部叠渐变遮罩
* .paid-wall → 购买卡片（图标 / 标题 / 价格 / 已购人数 / 按钮）
* 配色全走令牌，随主题切换自动生效。
* ============================================================ */
.article-content.is-locked {
position: relative;
max-height: 460px;
overflow: hidden;
}
.article-content.is-locked::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 180px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--bg-2, #fff) 92%);
pointer-events: none;
}
.paid-wall {
margin: 18px 0 0;
padding: 26px 20px 24px;
text-align: center;
background: var(--bg-2, #fff);
border: 1px solid var(--border, #F0F0F2);
border-radius: 4px;
}
.pw-icon { font-size: 28px; line-height: 1; }
.pw-title { margin: 10px 0 4px; font-size: 17px; font-weight: 600; color: var(--text-1, #222226); }
.pw-sub { font-size: 13px; color: var(--text-3, #999AAA); }
.pw-price {
margin: 14px 0 6px;
font-size: 26px;
font-weight: 700;
color: var(--primary);
line-height: 1.2;
}
.pw-meta {
display: flex;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
font-size: 12px;
color: var(--text-3, #999AAA);
}
.pw-acts {
display: flex;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
margin: 18px 0 0;
}
.pw-acts .btn { min-width: 120px; justify-content: center; }
/* 列表 / 搜索结果的「付费」角标 */
.tag-paid {
display: inline-block;
padding: 0 6px;
margin-left: 6px;
font-size: 11px;
line-height: 17px;
color: var(--primary);
background: var(--primary-050, #FFF1ED);
border: 1px solid var(--primary);
border-radius: 2px;
vertical-align: 1px;
}
.tag-paid.vipfree { color: #B8860B; background: #FFF8E6; border-color: #E8C46A; }
/* 后台：文章编辑页付费设置区 */
.pf-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
/* ≤640px：卡片收紧，价格与按钮不换行挤压 */
@media (max-width: 640px) {
.paid-wall { padding: 20px 14px; }
.pw-price { font-size: 22px; }
.pw-acts .btn { min-width: 0; flex: 1 1 100%; }
.pf-grid { grid-template-columns: 1fr; }
}
/* ==========================================================================
§21 定时发布
========================================================================== */
/* 编辑器工具条的时间选择（与 .btn 同高，视觉上并排） */
.ed-schedule {
height: 32px;
padding: 0 8px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
font-size: 13px;
color: var(--text-1);
background: var(--bg-2);
vertical-align: middle;
}
.ed-schedule:focus { border-color: var(--primary); outline: none; }
/* 文章详情页：定时未到点时的提示条（仅作者本人 / 管理员可见） */
.sch-tip {
display: flex; align-items: center; gap: 8px;
margin: 16px 24px 0; padding: 10px 14px;
border: 1px solid #FFE0B2; border-radius: var(--r-sm);
background: #FFF8E1; color: #8A5A00; font-size: 13px; line-height: 20px;
}
.sch-tip .sch-ico { font-size: 15px; }
.sch-tip b { color: #E8710A; font-weight: 600; }
.sch-tip .sch-edit { margin-left: auto; color: var(--primary); font-size: 13px; }
.sch-tip .sch-edit:hover { text-decoration: underline; }
/* ==========================================================================
§22 全站窄屏 LOGO 短名（修横向溢出）
========================================================================== */
/* 实测（2026-09-26）：首页在 769~860 视口横向溢出 17~108px（页面出现横向滚动条），
700 时搜索框被挤到 21px 基本不可用。
根因：LOGO 用全称站名「天涯网络_专业开发者社区 - 个人技术分享」实测 401px，
而 ≤900 主菜单已收起、行内没有可让位的元素。与文章页同因同解：窄屏切短品牌名（省 ~285px）。
⚠️ 刻意用低优先级的 .logo-short / .logo-full（不带 .logo 前缀、不用 !important），
这样 ≤640 时仍会被 main.css 的 `.logo span{display:none}`（只留图标）正常压制，
文章页也有自己的 body.page-article 规则兜着。 */
@media (max-width: 1199px) {
.logo-full { display: none; }
.logo-short { display: inline-flex; }
}
@media (max-width: 640px) {
.sch-tip { margin: 12px 14px 0; }
}
/* ==========================================================================
§23 文章页底部作者卡（.author-card）错位修复
========================================================================== */
/* 实测（2026-09-26，1440 视口）：卡片被渲染成「左右并排」——.ac-main 383px 在左、
.ac-stats 232px 挤在右侧，四联数据每格只剩 52px，`.ac-stats` 的 border-top 变成
从 x=768 起的一小截横线，关注按钮悬在卡片中部 → 报「显示错位」。
根因是三层历史包袱叠加（本卡是 main.css 旧版「一行式」卡片之后重写过的）：
1) main.css `.author-card{display:flex;align-items:center;gap:16px}` —— 旧版是
「头像+信息+关注+数据」排成一行；新版模板改成 `.ac-main`(上) + `.ac-stats`(下)
两段式，少了一条 display 复位。
2) main.css `.ac-stats span{margin-right:16px}` —— 旧版是行内小字数据；新版是网格
居中，这 16px 右边距会让「文章/总阅读/获赞/粉丝」比上方数字左偏 8px。
3) 本文件 §左栏卡片 的 `.art-card{padding:0}`（源序在 `.author-card{padding:16px 20px}`
之后）静默吃掉了卡片内边距。
设计意图见 docs/tasks.md T3「桌面 4 列 / ≤768 两列」= 数据区整宽。
故用双类选择器（0,0,2,0）收口，窄屏按同优先级重述。 */
.art-card.author-card {
display: block; /* 复位 main.css 的 flex → 恢复上下两段式 */
padding: 16px 20px; /* 压过 .art-card{padding:0} */
}
.author-card .ac-stats span { margin-right: 0; } /* 压过 main.css 的 16px 左偏 */
@media (max-width: 768px) {
.art-card.author-card { padding: 14px 16px; }
}
/* ==========================================================================
§24 窄屏 header 搜索框可用性 + 首页轮播横向溢出
========================================================================== */
/* 【问题 1】≤430 视口下搜索胶囊里的占位文字被拦腰截断（390 只剩「搜」+ 半个字），
首页输入区 127px、别的页更窄。文章页最严重：它比别的页多一个「全站导航」占 84+12=96px。
而 ≤640 底部已有 .mobile-tabbar（main.css ≤768 display:flex，含 首页/论坛/资源/会员/我的）
承接导航，所以这里与有频道胶囊条的页面保持一致 —— body.has-chan 页在所有宽度都隐藏它 ——
把宽度让给搜索框。（占位文字已同步缩成「搜+品牌短名」，见 layout/main.php） */
@media (max-width: 640px) {
body:not(.has-chan) .nav-drop { display: none; }
}
/* 【问题 2】首页轮播 320/360 视口横向溢出 42/2px。
根因：≤640 断点给 .slider 的是 height:auto + aspect-ratio:4/1 + min-height:88px，
而「min-height 定出高度 + 宽度 auto」会让浏览器按比例反推宽度 = 4×88 = 352px，
于是 352 成了实际宽度，窄于 352 的视口就溢出。
修法：显式给宽度断掉这条推导链，比例盒自然收缩（320 时 288×72）。 */
@media (max-width: 400px) {
.slider { width: 100%; min-height: 0; }
}
/* ==========================================================================
§25 课程（course）—— 列表 / 详情 / 学习页
前缀 crs-（列表·详情）crl-（学习页）crc-（章节）crf-（筛选条）
建前已查重：main.css / ui.css / csdn.css / video.css 均无这四个前缀
========================================================================== */
/* ---------- 筛选条 ---------- */
.crs-count { margin-left: 8px; font-size: 13px; font-weight: 400; color: var(--text-3); }
.crs-filter { padding: 2px 0 14px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.crf-row { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; flex-wrap: wrap; }
.crf-label { flex: 0 0 auto; font-size: 13px; color: var(--text-3); line-height: 28px; }
.crf-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.crf-pill {
display: inline-block; padding: 4px 12px; border-radius: 14px; font-size: 13px;
background: var(--bg-3); color: var(--text-2); text-decoration: none; line-height: 20px;
}
.crf-pill:hover { color: var(--primary); }
.crf-pill.active { background: var(--primary-050, #FFF1ED); color: var(--primary); font-weight: 500; }
/* ---------- 列表卡片网格 ---------- */
.crs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.crs-card {
display: block; border: 1px solid var(--border); border-radius: 4px; overflow: hidden;
background: var(--bg-2, #FFF); text-decoration: none; transition: box-shadow .18s, transform .18s;
}
.crs-card:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .08); transform: translateY(-2px); }
.crs-cover { position: relative; width: 100%; padding-top: 56.25%; background: var(--bg-3); overflow: hidden; }
.crs-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.crs-cover-empty {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
font-size: 34px; color: var(--text-3);
}
.crs-badge {
position: absolute; left: 8px; top: 8px; padding: 2px 8px; border-radius: 4px;
font-size: 12px; color: #FFF; background: rgba(0, 0, 0, .5);
}
.crs-badge.vip { background: linear-gradient(135deg, #F5A623, #F57C00); }
.crs-body { padding: 10px 12px 12px; }
.crs-title {
font-size: 15px; font-weight: 600; color: var(--text-1, #222226); line-height: 22px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
min-height: 44px;
}
.crs-sum { margin-top: 4px; font-size: 12px; color: var(--text-3); line-height: 18px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.crs-meta { margin-top: 8px; display: flex; gap: 10px; font-size: 12px; color: var(--text-3); flex-wrap: wrap; }
.crs-price { margin-top: 8px; font-size: 16px; font-weight: 700; }
.crs-price.paid { color: var(--primary); }
.crs-price.free { color: #2EA44F; }
/* ---------- 详情页 hero ---------- */
.crs-detail { padding: 16px 20px 20px; }
.crs-hero { display: flex; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.crs-hero-cover {
position: relative; flex: 0 0 240px; width: 240px; height: 135px; border-radius: 4px;
overflow: hidden; background: var(--bg-3);
}
.crs-hero-cover img { width: 100%; height: 100%; object-fit: cover; }
.crs-hero-body { flex: 1; min-width: 0; }
.crs-h1 { margin: 0 0 8px; font-size: 22px; line-height: 30px; font-weight: 600; color: var(--text-1, #222226); }
.crs-hero-sum { font-size: 14px; color: var(--text-3); line-height: 22px; }
.crs-hero-meta { margin-top: 10px; display: flex; gap: 16px; font-size: 13px; color: var(--text-3); flex-wrap: wrap; }
.crs-hero-meta b { font-weight: 500; color: var(--text-2); }
.crs-hero-price { margin-top: 12px; display: flex; align-items: center; gap: 10px; }
.crs-hero-price b { font-size: 24px; font-weight: 700; }
.crs-paid { color: var(--primary); }
.crs-vip { color: #F57C00; font-size: 20px !important; }
.crs-free { color: #2EA44F; }
.crs-hero-act { margin-top: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.crs-lock { font-size: 13px; color: var(--text-3); }
/* ---------- 课程介绍正文 ---------- */
.crs-desc { padding: 4px 0 16px; font-size: 15px; line-height: 26px; color: #4D4D4D; }
.crs-desc img { max-width: 100%; }
.crs-desc pre { overflow-x: auto; }
/* ---------- 目录 ---------- */
.crs-catalog { padding-bottom: 8px; }
.crs-chapter { margin-bottom: 6px; }
.crc-title {
padding: 10px 12px; background: var(--bg-3); border-radius: 4px;
font-size: 14px; font-weight: 600; color: var(--text-1, #222226);
}
.crs-lesson {
display: flex; align-items: center; gap: 8px; padding: 10px 12px;
font-size: 14px; color: var(--text-2); text-decoration: none; border-radius: 4px;
}
.crs-lesson:hover { background: var(--bg-3); color: var(--primary); }
.crs-lesson.locked { color: var(--text-3); }
.crs-lesson.cur { background: var(--primary-050, #FFF1ED); color: var(--primary); font-weight: 500; }
.crl-ico { flex: 0 0 auto; width: 18px; text-align: center; font-size: 13px; }
.crl-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crl-dur { flex: 0 0 auto; font-size: 12px; color: var(--text-3); }
/* ---------- 侧栏 ---------- */
.crs-side-item {
display: flex; justify-content: space-between; gap: 10px; padding: 8px 0;
font-size: 13px; color: var(--text-2); text-decoration: none; border-bottom: 1px solid var(--border);
}
.crs-side-item:hover { color: var(--primary); }
.crs-side-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crs-side-price { flex: 0 0 auto; color: var(--primary); }
/* ---------- 学习页 ---------- */
.crs-learn { padding: 14px 18px 20px; }
.crl-head {
display: flex; justify-content: space-between; align-items: center; gap: 16px;
padding-bottom: 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.crl-head-l { min-width: 0; }
.crl-back { font-size: 13px; color: var(--text-3); text-decoration: none; }
.crl-back:hover { color: var(--primary); }
.crl-cur { margin-top: 2px; font-size: 16px; font-weight: 600; color: var(--text-1, #222226);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crl-head-r { display: flex; align-items: center; gap: 10px; }
.crl-bar { width: 180px; height: 6px; border-radius: 3px; background: var(--bg-3); overflow: hidden; }
.crl-bar i { display: block; height: 100%; background: var(--primary); border-radius: 3px; transition: width .3s; }
.crl-pct { font-size: 12px; color: var(--text-3); }
.crl-wrap { display: flex; gap: 20px; padding-top: 16px; align-items: flex-start; }
.crl-catalog {
flex: 0 0 260px; width: 260px; max-height: 70vh; overflow-y: auto;
border: 1px solid var(--border); border-radius: 4px; padding: 8px; background: var(--bg-2, #FFF);
}
.crl-cat-title { padding: 4px 6px 8px; font-size: 14px; font-weight: 600; color: var(--text-1, #222226); }
.crl-main { flex: 1; min-width: 0; }
.crl-title-h { margin: 0 0 14px; font-size: 20px; line-height: 28px; font-weight: 600; color: var(--text-1, #222226); }
.crl-video { margin-bottom: 8px; }
.crl-content { font-size: 16px; line-height: 26px; color: #4D4D4D; }
.crl-content img { max-width: 100%; }
.crl-content pre { overflow-x: auto; }
.crl-foot {
margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border);
display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
/* ---------- 响应式（升序，必须留在本节末尾） ---------- */
@media (max-width: 1199px) {
.crs-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
.crs-grid { grid-template-columns: repeat(2, 1fr); }
.crs-hero { flex-direction: column; }
.crs-hero-cover { flex: 0 0 auto; width: 100%; height: auto; padding-top: 56.25%; }
.crs-hero-cover img { position: absolute; inset: 0; }
.crl-wrap { flex-direction: column; }
.crl-catalog { flex: 0 0 auto; width: 100%; max-height: 320px; }
}
@media (max-width: 640px) {
.crs-detail { padding: 12px 14px 16px; }
.crs-learn { padding: 10px 12px 16px; }
.crs-grid { grid-template-columns: 1fr; }
.crs-h1 { font-size: 18px; line-height: 26px; }
.crl-head-r { width: 100%; }
.crl-bar { flex: 1; width: auto; }
.crl-title-h { font-size: 17px; line-height: 24px; }
}
/* ============================================================
26. 论坛板块 / 问答页「工具条内」的筛选 tab（纯文字，不是胶囊）
------------------------------------------------------------
现象：选中项是一个「文字贴边的黑色胶囊」（宽度 == 文字宽度，圆角 100px）。
根因（跨文件残留属性 again）：
§9 把 .feed-tabs 定义成「一级 tab 胶囊」——height:32 / padding:0 16px /
radius:100px / background:var(--bg-3) / .active{background:#222226;color:#fff}；
§19 的 .fb-toolbar 只补了 `padding: 8px 0`，横向内距被压成 0，
但胶囊底色与圆角仍从 §9 继承 → 黑色药丸贴住文字。
为何应是纯文字：
① §19 自己的注释已写明「工具条内的 tab 不再自带内缩与下划线，交给 .fb-toolbar 统一」，
且工具条自带 border-bottom（胶囊不需要基准线，§9 正是因此把 .feed-tabs 的下边框去掉了）；
§19 的 gap:18px 也是文字行的间距，胶囊用的是 8px。
② CSDN 现网同类控件实测（ask.csdn.net 问答列表筛选条）为纯文字：
未选中 #777788 / 500；选中 #222226 / 800 + 短下划线；两者均无底色。
============================================================ */
.fb-toolbar .feed-tabs { gap: 22px; }
.fb-toolbar .feed-tabs a {
height: auto; padding: 11px 0; border-radius: 0;
background: transparent; color: var(--text-2);
position: relative; transition: color .18s;
}
.fb-toolbar .feed-tabs a:hover { color: var(--primary); }
.fb-toolbar .feed-tabs a.active {
background: transparent; color: var(--primary); font-weight: 600;
}
/* 选中态：压在 .fb-toolbar 基准线上的短下划线（§9 曾把它 display:none）
用 bottom:0 而不是 -1px —— .feed-tabs 带 overflow-x:auto，溢出 1px 会被裁掉 */
.fb-toolbar .feed-tabs a.active::after {
content: ''; display: block; position: absolute; left: 0; right: 0; bottom: 0;
height: 2px; background: var(--primary); border-radius: 2px;
}
/* ---------- 响应式（升序，必须留在本节末尾） ---------- */
@media (max-width: 768px) {
/* 窄屏工具条换行：tab 独占一行，基准线跟着 tab 走，避免下划线悬空；
换行后「发帖」按钮独占第二行，沿用桌面「筛选居左 / 按钮居右」的约定 */
.fb-toolbar { border-bottom: none; justify-content: flex-end; }
.fb-toolbar .feed-tabs { border-bottom: 1px solid var(--border); }
.fb-toolbar .feed-tabs a { padding: 8px 0; }
}
/* =================================================================
§26 课程评价 + 讲师前台管理（2026-09-26）
前缀：crv-（课程评价 review）/ crs-mrow、crs-mact（讲师列表）/ crs-ls-（课时管理）
建前已查重：main.css / ui.css / csdn.css / video.css 全 0 命中
⚠️ 响应式必须写在**本节末尾**且按断点升序，写中间会被后面的基础规则覆盖
================================================================= */
/* ---------- 评价概览：左均分 + 右分布 ---------- */
.crv-box {
display: flex; align-items: center; gap: 24px;
padding: 16px 0; border-bottom: 1px solid var(--border); margin-bottom: 12px;
}
.crv-sum { flex: 0 0 120px; text-align: center; }
.crv-score { font-size: 32px; line-height: 1; font-weight: 600; color: var(--primary); }
.crv-stars { font-size: 14px; color: #FF9A2E; letter-spacing: 2px; margin-top: 6px; }
.crv-sum-txt { font-size: 12px; color: var(--text-3, #999AAA); margin-top: 4px; }
.crv-dist { flex: 1 1 auto; min-width: 0; }
.crv-dist-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.crv-dl { flex: 0 0 34px; font-size: 12px; color: #555666; }
.crv-dbar { flex: 1 1 auto; height: 6px; background: #F5F6F7; border-radius: 3px; overflow: hidden; }
.crv-dbar i { display: block; height: 100%; background: #FF9A2E; border-radius: 3px; }
.crv-dn { flex: 0 0 28px; font-size: 12px; color: #999AAA; text-align: right; }
/* ---------- 我的评价表单 ---------- */
.crv-form {
background: #F5F6F7; border-radius: 4px; padding: 12px; margin-bottom: 14px;
}
.crv-form-tip { font-size: 13px; color: #555666; margin-bottom: 8px; }
.crv-pick { display: flex; align-items: center; gap: 2px; margin-bottom: 8px; }
.crv-star {
font-size: 22px; line-height: 1; color: #DDD; cursor: pointer;
user-select: none; transition: color .12s;
}
.crv-star.on, .crv-star.hover { color: #FF9A2E; }
.crv-pick-txt { font-size: 12px; color: #999AAA; margin-left: 8px; }
.crv-form .adm-input {
width: 100%; box-sizing: border-box; padding: 8px 10px;
border: 1px solid var(--border); border-radius: 4px; font-size: 14px;
background: #FFF; color: #222226; resize: vertical;
}
/* ⚠️ 输入控件的焦点反馈只用 border-color，不给 outline
—— :focus-visible 对 textarea 的鼠标点击也生效，加了会「点一下套一圈框」 */
.crv-form .adm-input:focus { border-color: var(--primary); outline: none; }
.crv-form-act { margin-top: 8px; display: flex; gap: 8px; }
.crv-hint { font-size: 12px; color: #999AAA; margin-left: 8px; }
.crv-check { font-size: 13px; color: #555666; display: inline-flex; align-items: center; gap: 4px; }
.crv-tip { font-size: 13px; color: #999AAA; padding: 10px 0; }
.crv-tip a { color: var(--primary); }
/* ---------- 评价列表 ---------- */
.crv-list { border-top: 1px solid var(--border); }
.crv-item { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.crv-item:last-child { border-bottom: none; }
.crv-avatar { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.crv-body { flex: 1 1 auto; min-width: 0; }
.crv-head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.crv-name { color: #222226; font-weight: 500; }
.crv-stars-mini { color: #FF9A2E; font-size: 12px; letter-spacing: 1px; }
.crv-time { color: #999AAA; font-size: 12px; margin-left: auto; }
.crv-text { font-size: 14px; line-height: 22px; color: #555666; margin-top: 4px; word-break: break-word; }
/* ---------- 讲师「我创建的课程」 ---------- */
.crv-newbtn { float: right; font-size: 13px; font-weight: 400; color: var(--primary); }
.crs-mrow { align-items: center; }
.crs-mact { flex: 0 0 auto; display: flex; gap: 6px; }
.crs-mact .btn { white-space: nowrap; }
/* ---------- 课时管理 ---------- */
.crs-ls-chap { border: 1px solid var(--border); border-radius: 4px; padding: 10px 12px; margin-bottom: 10px; }
.crs-ls-chap-t { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #222226; }
.crs-ls-chap-t b { font-weight: 600; }
.crs-ls-empty { font-size: 13px; color: #999AAA; padding: 6px 0; }
.crs-ls-item {
display: flex; align-items: center; gap: 8px;
padding: 6px 0; border-top: 1px dashed var(--border); font-size: 14px;
}
.crs-ls-act { margin-left: auto; display: flex; gap: 6px; }
.crs-ls-add { display: flex; gap: 8px; margin-top: 12px; }
.crs-ls-add input {
flex: 1 1 auto; min-width: 0; padding: 6px 10px;
border: 1px solid var(--border); border-radius: 4px; font-size: 14px; background: #FFF; color: #222226;
}
.crs-ls-add input:focus { border-color: var(--primary); outline: none; }
/* 弹窗 .modal-box / .mb-head / .mb-body / .mb-foot / .adm-btn 已在 §19 补过一套，
这里只补 §19 没有的 .adm-row 表单行（前台不加载 admin.css） */
.modal-box .adm-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.modal-box .adm-row > label { flex: 0 0 76px; font-size: 13px; color: #555666; padding-top: 6px; }
.modal-box .adm-row input[type=text],
.modal-box .adm-row input[type=number],
.modal-box .adm-row select,
.modal-box .adm-row textarea {
flex: 1 1 auto; min-width: 0; box-sizing: border-box; padding: 6px 10px;
border: 1px solid var(--border); border-radius: 4px; font-size: 14px; background: #FFF; color: #222226;
}
.modal-box .adm-row textarea { resize: vertical; }
.modal-box .adm-row input:focus,
.modal-box .adm-row select:focus,
.modal-box .adm-row textarea:focus { border-color: var(--primary); outline: none; }
/* .adm-btn 已在 §19 定义，不重复 */
.btn-xs { padding: 2px 8px; font-size: 12px; line-height: 18px; }
/* ---------- 响应式（升序，必须留在文件最末尾） ---------- */
@media (max-width: 900px) {
.crv-box { flex-direction: column; align-items: stretch; gap: 12px; }
.crv-sum { flex: none; display: flex; align-items: center; gap: 12px; text-align: left; }
.crv-stars, .crv-sum-txt { margin-top: 0; }
}
@media (max-width: 640px) {
.crs-mrow { flex-direction: column; align-items: flex-start; gap: 8px; }
.crs-mact { width: 100%; }
.crs-ls-chap-t { flex-wrap: wrap; }
.modal-box { width: 96vw; }
.modal-box .adm-row { flex-direction: column; gap: 4px; }
.modal-box .adm-row > label { flex: none; padding-top: 0; }
}
/* ==========================================================================
27. 顶部 / 左侧栏 / 文章分类栏 —— 按 CSDN 现网实测「重新排列」（2026-09-26）
实测对象 blog.csdn.net（1440 视口，tools/_probe_3zones_pair.py 复现）：
顶部 LOGO 80px；搜索区 720 = 输入 620(#F5F6F7 + 1px #E8E8ED + r16) + 间隙 16 + 按钮 84×32(r16)
左栏 .layout-menus padding 12px；项 [12,y,232,36] padding 0 12px 圆角 8px；
选中 background #F2F2F2，文字仍是 #000（不换主色、不加粗）
分类栏 .menus-view_content 项高 19（纯文字）padding 0 行间距 16 无边框；
未选中 #999999 / 选中 #1A1A1A 且 font-weight 600
本站原状与偏差：
顶部 LOGO 全称 401px → 搜索框被挤到 192px；胶囊 6px 圆角、按钮 100px 圆角
左栏 项 [0,y,256,40]（贴死视口左缘，比 CSDN 少 12px 内距），选中变主色
分类栏 每项被套成 56×32 的按钮块（padding 0 14px），且整体被 .card 内距推右 31px
========================================================================== */
/* ---------- 27.1 顶部：LOGO 只留「图标 + 短品牌名」（CSDN logo 实测 80px） ----------
⚠️ 刻意用低优先级的 .logo-short（不带 .logo 前缀、不用 !important）：
这样 ≤640 时仍会被 main.css 的 `.logo span{display:none}`（特异性 0,1,1 > 0,1,0）
正常压制为「只留图标」。改这两行前先想清楚优先级。 */
.logo-full { display: none; }
.logo-short { display: inline-flex; }
/* ---------- 27.2 顶部：搜索区几何（胶囊 32px / r16，按钮 84×32 / r16） ---------- */
.hs-pill { height: 32px; border-radius: 16px; }
.hs-pill input { height: 30px; }
.header-search .btn-search {
height: 32px; border-radius: 16px;
min-width: 84px; padding: 0 12px;
}
@media (min-width: 1200px) {
/* CSDN：搜索区 720px 封顶（输入 620 + 16 + 按钮 84），右侧操作区靠 auto 外边距钉在行尾 */
.header-search { flex: 1 1 auto; min-width: 0; max-width: 720px; margin-right: auto; }
.header-search form { width: 100%; gap: 16px; }
/* 文章页仍有横向主菜单同行，溢出时搜索与菜单一起让位（原策略保留） */
body.page-article .header-search { flex-shrink: 100; }
}
/* ---------- 27.3 左侧栏：12px 左右内距 + 项 232×36 + 圆角 8px + 选中灰底黑字 ----------
CSDN 的 .layout-menus 是 padding:12px，项在其中再 padding:0 12px
→ 项盒 [12,y,232,36]、图标起点 x=24。本站原先项盒 [0,y,256,40] 直接贴死视口左缘。
垂直方向不动：body.has-chan 的 .sidenav-group:first-child{padding-top:12px} 已让首项落在 y=60，
与 CSDN 完全一致；这里只补左右内距，避免叠加成 24px。 */
.col-rail.sidenav { padding-left: 12px; padding-right: 12px; }
.sidenav-item { height: 36px; border-radius: 8px; }
.sidenav-item:hover { background: #F2F2F2; color: var(--text-1); }
.sidenav-item.on { background: #F2F2F2; color: var(--text-1); font-weight: 400; }
.sidenav-item.on svg { color: inherit; opacity: 1; }
html[data-theme="dark"] .sidenav-item:hover,
html[data-theme="dark"] .sidenav-item.on { background: var(--bg-3); }
/* ---------- 27.4 文章分类栏：纯文字（去按钮块 + 左基线对齐内容栏） ----------
行高 19 / padding 0 / 项间距 16 / 无边框，未选中 #999999、选中 #1A1A1A + 600。
水平留白 0 是为了让「全部」的文字与上下的胶囊条、tab 行落在同一条左基线上
（CSDN 频道条、分类栏、子标签行三者左边界完全相同，本站原先差 31px）。 */
.cat-bar {
padding: 16px 0 12px; margin-bottom: 0; gap: 16px;
border-bottom: none; align-items: center;
}
.cat-bar a {
height: auto; padding: 0; border: none; background: none; border-radius: 0;
font-size: 14px; font-weight: 400; line-height: 19px; color: #999999;
}
.cat-bar a:hover { color: var(--text-1); background: none; border: none; }
.cat-bar a.active { color: #1A1A1A; font-weight: 600; background: none; border: none; }
html[data-theme="dark"] .cat-bar a { color: var(--text-3); }
html[data-theme="dark"] .cat-bar a:hover,
html[data-theme="dark"] .cat-bar a.active { color: var(--text-1); }
/* ---------- 27.5 频道胶囊条：按 CSDN `.home_box_nav` 实测收口 ----------
CSDN 实测：条 top=48 h=60（内距 16/12）；项 32px 高、间距 12、圆角 8、内距 0 12px；
未选中底 #F2F2F2 + 黑字，选中底 #000000 + 白字 + fw600。
本站原为 28px 高 / 间距 8 / #F5F6F7 / 选中 #222226，且条高 55px
→ 收口后「频道条 48~108、分类栏首行 124」与 CSDN 逐像素一致（排列对齐的关键）。 */
.chan-nav { padding: 16px 0 12px; }
.chan-list { height: 32px; gap: 12px; }
.chan-item { height: 32px; background: #F2F2F2; color: #000; }
.chan-item:hover { background: #ECEDEF; color: #000; }
.chan-item.on { background: #000; color: #fff; font-weight: 600; }
.chan-item.on:hover { background: #000; color: #fff; }
@media (max-width: 768px) {
/* 窄屏保持紧凑，不与 CSDN 的桌面几何冲突 */
.chan-nav { padding: 10px 0; }
.chan-list { height: 30px; gap: 8px; }
.chan-item { height: 28px; padding: 0 10px; font-size: 13px; }
}
/* ==========================================================================
§28 顶部行：频道胶囊条 -> 文章分类条（2026-09-26）
背景：blog.csdn.net 顶栏可见行 = 38 项文章分类（a.nav-item，纯文字，y=124）；
本站原来这一行放的是 CSDN 折叠下拉 `.nav-drop-menu` 里的 11 项站点频道
（会员/动态/下载/视频/论坛/问答/博客/首页/热门标签/排行榜/网站地图）。
按要求把这一行改成「文章分类调用」——点哪个分类出哪个分类的文章。
数据来源与高亮规则见 template/default/common/chan.php。
========================================================================== */
/* 28.1 外层 .chan-nav 退化为纯容器：内距 / 背景全部交给里面的 .cat-bar
（.cat-bar 真值 16px 0 12px 见 §27.4；若这里不归零，两者会叠加成 32/24） */
.chan-nav { padding: 0; background: transparent; }
.chan-nav .cat-bar { margin-bottom: 0; }
/* 注：§27.5 的 .chan-list / .chan-item（胶囊）已随内容下线，规则保留但不再命中元素；
≤768 的 .chan-nav{padding:10px 0} 被上面这条（同优先级、位置在后）压过。 */
/* 28.2 模块入口兜底 —— 顶部那行不再放站点频道，而左栏只在
「≥1200 且本页有左栏（has-rail / has-page-rail）」时才存在：
① ≤1199 —— 左栏被 .col-rail{display:none} 收起
② ≥1200 无左栏 —— 账户/创作中心/会员中心等 .page-body 都不存在的页面
这两种情况把 header 的「全站导航」下拉露出来（菜单项与 $_navs 同源，不丢入口）。
⚠️ 选择器必须写到 `body.has-chan .header .nav-drop`（0,3,1）才压得过 §1354 的
`body.has-chan .header .nav-drop{display:none}`(0,3,1) —— 靠位置在后取胜；
少写一段 `.header` 就只剩 (0,2,1)，源序再后也无济于事。 */
@media (max-width: 1199px) {
body.has-chan .header .nav-drop { display: block; }
}
@media (min-width: 1200px) {
body.has-chan:not(.has-rail):not(.has-page-rail) .header .nav-drop { display: block; }
}
/* ============================================================
§29 文章编辑器（CSDN 发文页 1:1）
前缀：ced-（csdn editor），查重 4 个 CSS 文件全 0 命中
============================================================ */
/* 重置 body 在编辑页状态下的默认 padding，全屏沉浸 */
.ced-body {
padding-top: 0 !important;
padding-bottom: 0 !important;
margin: 0;
height: 100vh;
overflow: hidden;
background: var(--bg-2);
color: var(--text-1);
display: flex;
flex-direction: column;
min-width: 320px;
}
.ced-body *, .ced-body *::before, .ced-body *::after {
box-sizing: border-box;
}
/* ---------- 29.1 顶部栏 ---------- */
.ced-header {
flex-shrink: 0;
height: 56px;
background: var(--bg-1);
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
gap: 12px;
position: relative;
z-index: 50;
}
.ced-header-left,
.ced-header-right { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.ced-header-center { flex: 1; display: flex; justify-content: center; min-width: 0; }
.ced-back {
color: var(--text-3); font-size: 14px; text-decoration: none;
white-space: nowrap; padding: 6px 8px; border-radius: var(--r-sm);
transition: background .18s, color .18s;
}
.ced-back:hover { background: var(--bg-3); color: var(--text-1); }
.ced-title-input {
width: 320px; max-width: 40vw; min-width: 160px;
height: 36px; padding: 0 12px; border: 1px solid transparent;
border-radius: var(--r-sm); background: transparent;
font-size: 15px; color: var(--text-1);
outline: none;
}
.ced-title-input::placeholder { color: var(--text-3); }
.ced-title-input:focus { border-color: var(--primary); background: var(--bg-1); }
.ced-mode-tabs {
display: inline-flex; align-items: center;
border: 1px solid var(--border); border-radius: var(--r-sm);
overflow: hidden; background: var(--bg-2);
}
.ced-mode-tabs button {
border: none; background: transparent; padding: 7px 18px;
font-size: 13px; color: var(--text-3); cursor: pointer;
border-right: 1px solid var(--border); white-space: nowrap;
transition: color .18s, background .18s;
}
.ced-mode-tabs button:last-child { border-right: none; }
.ced-mode-tabs button:hover { color: var(--text-1); background: var(--bg-3); }
.ced-mode-tabs button.active { color: #fff; background: #222226; }
.ced-btn {
display: inline-flex; align-items: center; gap: 4px;
height: 34px; padding: 0 16px; border: 1px solid var(--border);
border-radius: var(--r-sm); background: var(--bg-1); color: var(--text-2);
font-size: 13px; cursor: pointer; white-space: nowrap;
transition: border-color .18s, color .18s, background .18s;
}
.ced-btn:hover { border-color: var(--primary); color: var(--primary); }
.ced-btn.ced-publish-btn { background: var(--primary); border-color: var(--primary); color: #fff; }
.ced-btn.ced-publish-btn:hover { background: #e8451f; border-color: #e8451f; }
.ced-schedule {
height: 34px; padding: 0 10px; border: 1px solid var(--border);
border-radius: var(--r-sm); background: var(--bg-1); color: var(--text-1);
font-size: 13px; outline: none;
}
.ced-schedule:focus { border-color: var(--primary); }
/* ---------- 29.2 主体三栏 ---------- */
.ced-main-wrap {
flex: 1; min-height: 0;
display: flex;
overflow: hidden;
}
/* 左侧边栏 */
.ced-leftbar {
width: 64px; flex-shrink: 0;
background: var(--bg-1); border-right: 1px solid var(--border);
display: flex; flex-direction: column; align-items: center;
padding: 12px 0; gap: 8px; overflow-y: auto;
}
.ced-leftbar a {
display: flex; flex-direction: column; align-items: center; justify-content: center;
width: 52px; height: 56px; border-radius: var(--r-sm);
color: var(--text-3); text-decoration: none; font-size: 11px;
transition: background .18s, color .18s;
}
.ced-leftbar a:hover, .ced-leftbar a.active { background: var(--bg-3); color: var(--primary); }
.ced-leftbar a i { font-style: normal; }
/* 中间编辑区 */
.ced-editor {
flex: 1; min-width: 0;
display: flex; flex-direction: column;
background: var(--bg-1);
}
/* 工具栏 */
.ced-toolbar {
flex-shrink: 0;
display: flex; align-items: center; gap: 4px;
padding: 8px 14px; border-bottom: 1px solid var(--border);
background: var(--bg-3); overflow-x: auto;
}
.ced-toolbar::-webkit-scrollbar { height: 4px; }
.ced-toolbar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.ced-toolbar-rt { gap: 8px; }
.ced-tool-group {
display: flex; align-items: center; gap: 2px;
padding-right: 8px; border-right: 1px solid var(--border);
}
.ced-tool-group:last-child { border-right: none; padding-right: 0; }
.ced-toolbar button {
display: inline-flex; align-items: center; justify-content: center;
height: 30px; min-width: 30px; padding: 0 8px;
border: 1px solid transparent; border-radius: var(--r-sm);
background: transparent; color: var(--text-2);
font-size: 13px; cursor: pointer;
transition: border-color .18s, color .18s, background .18s;
white-space: nowrap;
}
.ced-toolbar button:hover { background: var(--bg-2); border-color: var(--border); color: var(--primary); }
.ced-toolbar button i { font-style: normal; font-size: 14px; }
.ced-toolbar-rt button { padding: 0 10px; }
.ced-has-menu { position: relative; }
.ced-has-menu::after {
content: '▼'; font-size: 9px; margin-left: 4px; opacity: .6;
}
/* 编辑区 */
.ced-edit-box {
flex: 1; min-height: 0;
display: flex; flex-direction: column;
position: relative; overflow: hidden;
}
.ced-textarea {
flex: 1; min-height: 0;
width: 100%; border: none; outline: none; resize: none;
padding: 22px 28px; font-size: 15px; line-height: 1.8;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', monospace;
color: var(--text-1); background: var(--bg-1);
white-space: pre-wrap; word-break: break-word;
}
.ced-rt-editor {
flex: 1; min-height: 0;
overflow-y: auto;
padding: 22px 28px; font-size: 15px; line-height: 1.8;
color: var(--text-1); background: var(--bg-1);
outline: none; word-break: break-word;
}
.ced-rt-editor:empty::before {
content: attr(placeholder); color: var(--text-3); pointer-events: none;
}
.ced-rt-editor img { max-width: 100%; }
.ced-rt-editor table { border-collapse: collapse; width: 100%; margin: 12px 0; }
.ced-rt-editor td, .ced-rt-editor th { border: 1px solid var(--border); padding: 8px 12px; }
.ced-rt-editor blockquote { border-left: 4px solid var(--primary); padding-left: 14px; color: var(--text-2); margin: 12px 0; }
.ced-rt-editor pre { background: var(--bg-3); padding: 12px; border-radius: var(--r-sm); overflow-x: auto; }
.ced-rt-editor code { background: var(--bg-3); padding: 2px 5px; border-radius: 3px; font-family: monospace; }
.ced-drop-mask {
position: absolute; inset: 0;
display: none; align-items: center; justify-content: center;
background: rgba(252, 85, 49, .08); border: 2px dashed var(--primary);
color: var(--primary); font-size: 16px; font-weight: 500; z-index: 20;
}
/* 预览 / 比对 */
.ced-preview-box { background: var(--bg-2); }
.ced-preview {
flex: 1; min-height: 0; overflow-y: auto;
padding: 24px 32px; max-width: 900px; margin: 0 auto; width: 100%;
background: var(--bg-1); min-height: 100%;
}
.ced-diff-box { background: var(--bg-2); }
.ced-empty-state {
flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
color: var(--text-3); font-size: 14px;
}
.ced-empty-icon { font-size: 42px; opacity: .35; margin-bottom: 10px; }
/* 右侧 AI 助手 */
.ced-rightbar {
width: 300px; flex-shrink: 0;
background: var(--bg-1); border-left: 1px solid var(--border);
display: flex; flex-direction: column;
transition: margin-right .2s ease;
}
.ced-rightbar.ced-hidden { margin-right: -300px; }
.ced-ai-head {
flex-shrink: 0; height: 48px; padding: 0 14px;
display: flex; align-items: center; gap: 8px;
border-bottom: 1px solid var(--border); font-size: 15px; font-weight: 500;
}
.ced-ai-tabs { margin-left: auto; display: flex; gap: 8px; }
.ced-ai-tabs b { font-size: 12px; color: var(--text-3); cursor: pointer; font-weight: normal; }
.ced-ai-tabs b.active { color: var(--primary); font-weight: 600; }
.ced-ai-close {
border: none; background: transparent; color: var(--text-3); font-size: 20px;
cursor: pointer; line-height: 1; padding: 0 4px;
}
.ced-ai-close:hover { color: var(--text-1); }
.ced-ai-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; }
.ced-ai-hello {
background: var(--bg-3); border-radius: var(--r-sm); padding: 12px;
font-size: 13px; color: var(--text-2); line-height: 1.7; margin-bottom: 16px;
}
.ced-ai-section { margin-bottom: 18px; }
.ced-ai-title { font-size: 13px; color: var(--text-2); font-weight: 600; margin-bottom: 10px; }
.ced-ai-cards { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.ced-ai-card {
display: block; padding: 10px 12px; border: 1px solid var(--border);
border-radius: var(--r-sm); background: var(--bg-1); color: var(--text-2);
text-decoration: none; font-size: 13px; cursor: pointer;
transition: border-color .18s, background .18s;
}
.ced-ai-card:hover { border-color: var(--primary); background: var(--primary-050); }
.ced-ai-refresh {
border: 1px solid var(--border); background: var(--bg-1); color: var(--text-3);
border-radius: var(--r-sm); padding: 4px 10px; font-size: 12px; cursor: pointer;
}
.ced-ai-refresh:hover { color: var(--primary); border-color: var(--primary); }
.ced-ai-tips { margin: 0; padding-left: 16px; color: var(--text-3); font-size: 13px; line-height: 1.9; }
.ced-ai-foot {
flex-shrink: 0; border-top: 1px solid var(--border); padding: 12px;
}
.ced-ai-tools {
display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap;
}
.ced-ai-tools button {
display: inline-flex; align-items: center; gap: 4px;
border: 1px solid var(--border); background: var(--bg-2); color: var(--text-3);
border-radius: var(--r-sm); padding: 5px 10px; font-size: 12px; cursor: pointer;
}
.ced-ai-tools button:hover { border-color: var(--primary); color: var(--primary); }
.ced-ai-input {
display: flex; gap: 6px; margin-bottom: 6px;
}
.ced-ai-input input {
flex: 1; height: 34px; padding: 0 10px; border: 1px solid var(--border);
border-radius: var(--r-sm); background: var(--bg-2); color: var(--text-1);
outline: none; font-size: 13px;
}
.ced-ai-input input:focus { border-color: var(--primary); }
.ced-ai-input button {
width: 34px; height: 34px; border: none; border-radius: var(--r-sm);
background: var(--primary); color: #fff; cursor: pointer;
}
.ced-ai-input button:hover { background: #e8451f; }
.ced-ai-hint { margin: 0; font-size: 11px; color: var(--text-3); text-align: center; }
/* ---------- 29.3 底部栏 ---------- */
.ced-footer {
flex-shrink: 0; height: 48px;
background: var(--bg-1); border-top: 1px solid var(--border);
display: flex; align-items: center; justify-content: space-between;
padding: 0 16px; gap: 12px; font-size: 13px;
}
.ced-footer-left, .ced-footer-right { display: flex; align-items: center; gap: 14px; }
.ced-footer-center { flex: 1; text-align: center; }
.ced-stat { color: var(--text-3); }
.ced-stat em { color: var(--text-1); font-style: normal; font-weight: 600; }
.ced-autosave-tip { color: var(--text-3); font-size: 12px; }
.ced-schedule-wrap { display: inline-flex; align-items: center; gap: 6px; }
/* ---------- 29.4 模板库弹窗 ---------- */
.ced-modal {
position: fixed; inset: 0; z-index: 100;
display: none; align-items: center; justify-content: center;
background: rgba(0, 0, 0, .45);
}
.ced-modal-box {
width: min(820px, 92vw); max-height: 82vh;
background: var(--bg-1); border-radius: var(--r-md);
box-shadow: 0 10px 40px rgba(0,0,0,.18);
display: flex; flex-direction: column; overflow: hidden;
}
.ced-modal-head {
flex-shrink: 0; height: 52px; padding: 0 18px;
display: flex; align-items: center; justify-content: space-between;
border-bottom: 1px solid var(--border);
}
.ced-modal-tabs { display: flex; gap: 20px; height: 100%; }
.ced-modal-tabs button {
border: none; background: transparent; color: var(--text-3);
font-size: 15px; cursor: pointer; height: 100%;
border-bottom: 2px solid transparent;
}
.ced-modal-tabs button.active { color: var(--text-1); border-bottom-color: var(--primary); }
.ced-modal-close { border: none; background: transparent; color: var(--text-3); font-size: 22px; cursor: pointer; }
.ced-modal-close:hover { color: var(--text-1); }
.ced-modal-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px; }
.ced-tpl-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px;
}
.ced-tpl-card {
border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px;
background: var(--bg-1); transition: border-color .18s, box-shadow .18s;
}
.ced-tpl-card:hover { border-color: var(--primary); box-shadow: 0 4px 14px rgba(252,85,49,.08); }
.ced-tpl-name { font-size: 15px; font-weight: 600; color: var(--text-1); margin-bottom: 8px; }
.ced-tpl-tags { display: flex; gap: 6px; margin-bottom: 12px; }
.ced-tpl-tags span { font-size: 11px; color: var(--text-3); background: var(--bg-3); padding: 2px 8px; border-radius: 100px; }
.ced-tpl-use {
width: 100%; border: 1px solid var(--primary); background: transparent;
color: var(--primary); border-radius: var(--r-sm); padding: 7px 0; font-size: 13px; cursor: pointer;
transition: background .18s, color .18s;
}
.ced-tpl-use:hover { background: var(--primary); color: #fff; }
/* ---------- 29.5 响应式 ---------- */
@media (max-width: 1200px) {
.ced-rightbar { width: 260px; }
.ced-rightbar.ced-hidden { margin-right: -260px; }
.ced-title-input { width: 220px; max-width: 28vw; }
.ced-toolbar-rt .ced-tool-group { padding-right: 6px; }
.ced-toolbar-rt button { padding: 0 8px; font-size: 12px; }
}
@media (max-width: 768px) {
.ced-leftbar { display: none; }
.ced-rightbar {
position: fixed; top: 56px; right: 0; bottom: 48px; width: 260px;
margin-right: -260px; z-index: 40;
}
.ced-rightbar.ced-hidden { margin-right: -260px; }
.ced-rightbar:not(.ced-hidden) { margin-right: 0; }
.ced-title-input { display: none; }
.ced-mode-tabs button { padding: 7px 12px; font-size: 12px; }
.ced-header-right .ced-rtswitch,
.ced-header-right .ced-draft-btn { display: none; }
.ced-textarea, .ced-rt-editor { padding: 16px 18px; }
}
@media (max-width: 480px) {
.ced-mode-tabs { display: none; }
.ced-header-right .ced-ai-toggle { display: none; }
.ced-schedule-wrap { display: none; }
.ced-footer-left { gap: 8px; font-size: 12px; }
.ced-toolbar button { min-width: 28px; height: 28px; padding: 0 6px; }
}
/* ---------- 29.6 文章设置面板（保留原编辑页全部字段） ---------- */
.ced-setting-panel {
position: fixed; top: 56px; left: 0; right: 0; bottom: 48px;
background: var(--bg-1); z-index: 45;
display: flex; flex-direction: column;
border-bottom: 1px solid var(--border);
}
.ced-setting-head {
flex-shrink: 0; height: 48px; padding: 0 18px;
display: flex; align-items: center; justify-content: space-between;
border-bottom: 1px solid var(--border); font-weight: 600;
}
.ced-setting-close {
border: none; background: transparent; color: var(--text-3); font-size: 24px; cursor: pointer;
}
.ced-setting-close:hover { color: var(--text-1); }
.ced-setting-body {
flex: 1; min-height: 0; overflow-y: auto;
padding: 18px 24px; max-width: 900px; margin: 0 auto; width: 100%;
display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px;
}
.ced-setting-row {
display: flex; flex-direction: column; gap: 6px;
}
.ced-setting-row label { font-size: 13px; color: var(--text-2); }
.ced-setting-row select,
.ced-setting-row input[type="text"] {
height: 36px; padding: 0 10px; border: 1px solid var(--border);
border-radius: var(--r-sm); background: var(--bg-2); color: var(--text-1);
outline: none; font-size: 13px;
}
.ced-setting-row select:focus,
.ced-setting-row input[type="text"]:focus { border-color: var(--primary); }
.ced-setting-row .ced-check {
display: inline-flex; align-items: center; gap: 6px; color: var(--text-2);
cursor: pointer;
}
.ced-setting-row .ced-check input { margin: 0; }
/* ---------- 29.5 工具条图标（ced-icon-*）----------
设计图：Markdown/富文本工具条均有完整 SVG 图标按钮（加粗/斜体/引用/列表/代码/链接等）
当前模板只有空 ，需要 SVG 内联填充 */
.ced-toolbar button i.ced-icon-h { font-family: Georgia, serif; font-weight: 700; font-style: normal; font-size: 15px; }
.ced-toolbar button i.ced-icon-b { font-family: Georgia, serif; font-weight: 900; font-style: normal; font-size: 14px; }
.ced-toolbar button i.ced-icon-i { font-style: italic; font-size: 15px; }
.ced-toolbar button i.ced-icon-s { text-decoration: line-through; font-size: 15px; }
.ced-toolbar button i.ced-icon-ul { font-size: 17px; line-height: 1; letter-spacing: -1px; }
.ced-toolbar button i.ced-icon-ol { font-size: 12px; font-weight: 700; font-family: monospace; letter-spacing: -.5px; }
.ced-toolbar button i.ced-icon-quote { font-style: italic; font-size: 18px; line-height: 1; }
.ced-toolbar button i.ced-icon-hr { font-size: 17px; }
.ced-toolbar button i.ced-icon-code1 { font-size: 12px; font-family: Consolas, monospace; letter-spacing: -1px; }
.ced-toolbar button i.ced-icon-code2 { font-size: 11px; font-family: Consolas, monospace; letter-spacing: -1px; }
.ced-toolbar button i.ced-icon-img { font-size: 15px; }
.ced-toolbar button i.ced-icon-link { font-size: 14px; }
.ced-toolbar button i.ced-icon-math { font-size: 16px; font-family: Georgia, serif; }
.ced-toolbar button i.ced-icon-table { font-size: 15px; }
.ced-toolbar button i.ced-icon-tpl { font-size: 15px; }
.ced-toolbar button i.ced-icon-more { font-size: 18px; letter-spacing: 2px; }
.ced-toolbar button i.ced-icon-undo { font-size: 16px; }
.ced-toolbar button i.ced-icon-redo { font-size: 16px; }
.ced-toolbar button i.ced-icon-history { font-size: 14px; }
.ced-toolbar button i.ced-icon-align { font-size: 17px; }
.ced-toolbar button i.ced-icon-attach { font-size: 14px; }
.ced-toolbar button i.ced-icon-video1 { font-size: 14px; }
.ced-toolbar button i.ced-icon-toc { font-size: 15px; }
.ced-toolbar button i.ced-icon-wide { font-size: 15px; }
/* 左侧边栏图标 */
.ced-leftbar a i { font-size: 20px; line-height: 1; display: block; }
.ced-leftbar .ced-icon-article::before { content: '📝'; }
.ced-leftbar .ced-icon-resource::before { content: '📤'; }
.ced-leftbar .ced-icon-code::before { content: '💻'; }
.ced-leftbar .ced-icon-ask::before { content: '❓'; }
.ced-leftbar .ced-icon-video::before { content: '🎬'; }
.ced-leftbar .ced-icon-mark::before { content: '✏️'; }
.ced-leftbar .ced-icon-translate::before { content: '🌐'; }
/* ---------- 29.6 代码块标题栏（语言标签 + 复制按钮）----------
设计图：富文本模式下代码块有深色标题栏（黑色背景）+ 语言名标签 + "复制"按钮
纯 Markdown 预览时同样渲染，pre 标签内部嵌入 .ced-code-header */
.ced-rt-editor pre,
.ced-preview pre,
.ced-textarea ~ .ced-code-block pre {
position: relative;
margin: 16px 0;
border-radius: 6px;
background: #1e1e1e;
padding: 0;
overflow: hidden;
}
.ced-rt-editor pre .ced-code-header,
.ced-preview pre .ced-code-header {
display: flex; align-items: center; justify-content: space-between;
padding: 8px 14px;
background: #2d2d2d;
border-bottom: 1px solid #3a3a3a;
}
.ced-rt-editor pre .ced-code-lang,
.ced-preview pre .ced-code-lang {
font-size: 12px; color: #aaa;
font-family: 'SF Mono', Consolas, monospace;
}
.ced-rt-editor pre .ced-code-copy,
.ced-preview pre .ced-code-copy {
font-size: 12px; color: #888; cursor: pointer; padding: 2px 10px;
border: 1px solid #444; border-radius: 4px; background: transparent;
transition: color .18s, border-color .18s;
}
.ced-rt-editor pre .ced-code-copy:hover,
.ced-preview pre .ced-code-copy:hover {
color: #fff; border-color: #666;
}
.ced-rt-editor pre .ced-code-body,
.ced-preview pre .ced-code-body {
padding: 14px 16px;
overflow-x: auto;
color: #d4d4d4;
font-family: 'SF Mono', Consolas, 'Courier New', monospace;
font-size: 13.5px;
line-height: 1.65;
}
.ced-rt-editor pre code,
.ced-preview pre code {
background: transparent; padding: 0; border-radius: 0;
color: inherit; font-size: inherit;
}
/* ---------- 29.7 AI 助手面板完善 ----------
设计图：右侧栏有 "Agent Chat" 子标签、创作热点推荐卡片、AI 工具按钮、输入区 */
.ced-ai-tabs b { font-size: 12px; color: var(--text-3); cursor: pointer; font-weight: normal; }
.ced-ai-tabs b.active { color: var(--primary); font-weight: 600; }
.ced-ai-hello {
font-size: 13px; color: var(--text-3); line-height: 1.6;
padding: 14px; background: var(--bg-2); border-radius: 8px;
margin-bottom: 18px;
}
.ced-ai-cards { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.ced-ai-card {
padding: 10px 12px; border: 1px solid var(--border);
border-radius: var(--r-sm); font-size: 13px; color: var(--text-2);
cursor: pointer; transition: border-color .18s, background .18s;
}
.ced-ai-card:hover { border-color: var(--primary); background: var(--primary-050); }
.ced-ai-refresh {
display: inline-block; font-size: 12px; color: var(--text-3);
cursor: pointer; padding: 4px 8px; border: 1px solid var(--border);
border-radius: var(--r-sm); margin-bottom: 10px;
}
.ced-ai-refresh:hover { color: var(--primary); border-color: var(--primary); }
.ced-ai-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ced-ai-tools button {
padding: 6px 12px; font-size: 12.5px; color: var(--text-2);
border: 1px solid var(--border); border-radius: var(--r-sm);
background: transparent; cursor: pointer;
transition: border-color .18s, color .18s;
}
.ced-ai-tools button:hover { border-color: var(--primary); color: var(--primary); }
.ced-ai-input { display: flex; gap: 8px; align-items: flex-end; }
.ced-ai-input input {
flex: 1; padding: 8px 12px; border: 1px solid var(--border);
border-radius: var(--r-sm); font-size: 13px; outline: none;
background: var(--bg-2); color: var(--text-1);
}
.ced-ai-input input:focus { border-color: var(--primary); }
.ced-ai-input button {
width: 36px; height: 36px; flex-shrink: 0;
background: var(--primary); border: none; border-radius: var(--r-sm);
color: #fff; cursor: pointer; font-size: 16px;
display: flex; align-items: center; justify-content: center;
}
.ced-ai-input button:hover { background: #e8451f; }
.ced-ai-hint { margin: 0; font-size: 11px; color: var(--text-3); text-align: center; }
/* ---------- 29.8 底部状态栏完善 ----------
设计图：状态栏有"共 N 字符 / N 行 / 当前行 N"（数字加粗），右侧操作按钮 */
.ced-footer { flex-shrink: 0; height: 38px; background: var(--bg-3); border-top: 1px solid var(--border); display: flex; align-items: center; padding: 0 16px; }
.ced-footer-left, .ced-footer-right { display: flex; align-items: center; gap: 14px; }
.ced-footer-center { flex: 1; text-align: center; }
.ced-stat { color: var(--text-3); font-size: 12.5px; }
.ced-stat em { color: var(--text-1); font-style: normal; font-weight: 600; }
.ced-autosave-tip { color: var(--text-3); font-size: 12px; }
/* ---------- 29.9 模板库模态框完善 ----------
设计图：模板库有"模板库/我的模板"tab、2行3列卡片网格、每个卡片有标签 + "使用"按钮 */
.ced-tpl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ced-tpl-card { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 16px; cursor: pointer; transition: border-color .18s, box-shadow .18s; }
.ced-tpl-card:hover { border-color: var(--primary); box-shadow: 0 4px 14px rgba(252,85,49,.08); }
.ced-tpl-name { font-size: 15px; font-weight: 600; color: var(--text-1); margin-bottom: 8px; }
.ced-tpl-tags { display: flex; gap: 6px; margin-bottom: 12px; }
.ced-tpl-tags span { font-size: 11px; color: var(--text-3); background: var(--bg-3); padding: 2px 8px; border-radius: 100px; }
.ced-tpl-use { display: inline-block; padding: 5px 14px; font-size: 12.5px; color: var(--primary); border: 1px solid var(--primary); border-radius: var(--r-sm); cursor: pointer; transition: background .18s, color .18s; }
.ced-tpl-use:hover { background: var(--primary); color: #fff; }
/* ---------- 29.10 设置面板完善 ----------
设计图：设置面板两列布局，字段标签 + 输入框/下拉框，底部有保存按钮 */
.ced-setting-panel { position: fixed; top: 56px; right: 0; bottom: 38px; width: 520px; background: var(--bg-1); border-left: 1px solid var(--border); z-index: 100; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .22s; }
.ced-setting-panel.ced-hidden { pointer-events: none; transform: translateX(100%); }
.ced-setting-panel:not(.ced-hidden) { transform: translateX(0); pointer-events: auto; }
.ced-setting-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.ced-setting-head h3 { font-size: 15px; font-weight: 600; color: var(--text-1); margin: 0; }
.ced-setting-close { border: none; background: transparent; color: var(--text-3); font-size: 22px; cursor: pointer; padding: 0; line-height: 1; }
.ced-setting-close:hover { color: var(--text-1); }
.ced-setting-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 16px; }
.ced-setting-row { display: flex; align-items: flex-start; gap: 12px; }
.ced-setting-row label { font-size: 13px; color: var(--text-2); min-width: 72px; padding-top: 7px; }
.ced-setting-row select, .ced-setting-row input[type="text"] { flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--r-sm); font-size: 13px; outline: none; background: var(--bg-2); color: var(--text-1); font-family: inherit; }
.ced-setting-row select:focus, .ced-setting-row input[type="text"]:focus { border-color: var(--primary); }
.ced-setting-row .ced-check { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); cursor: pointer; font-size: 13px; }
.ced-setting-row .ced-check input { margin: 0; }
.ced-setting-row select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M2 4l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; cursor: pointer; }
/* ---------- 29.11 模式 tab 切换按钮 ----------
设计图："使用 Markdown 编辑器" / "使用富文本编辑器" 是右侧辅助文字 */
.ced-header-right .ced-rtswitch { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.ced-header-right .ced-draft-btn { font-size: 12.5px; color: var(--text-2); padding: 0 12px; }
/* ---------- 29.12 AI 助手右侧栏动画 ----------
设计图：右侧栏可折叠/展开（margin-right 动画） */
.ced-rightbar { width: 300px; flex-shrink: 0; background: var(--bg-2); border-left: 1px solid var(--border); display: flex; flex-direction: column; transition: margin-right .22s; }
.ced-rightbar.ced-hidden { margin-right: -300px; }
.ced-ai-head { display: flex; align-items: center; padding: 14px 14px 10px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.ced-ai-head strong { font-size: 14px; font-weight: 600; color: var(--text-1); }
.ced-ai-tabs { margin-left: auto; display: flex; gap: 8px; }
.ced-ai-close { border: none; background: transparent; color: var(--text-3); font-size: 22px; cursor: pointer; margin-left: 8px; line-height: 1; }
.ced-ai-close:hover { color: var(--text-1); }
.ced-ai-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; }
.ced-ai-section { margin-bottom: 18px; }
.ced-ai-title { font-size: 13px; color: var(--text-2); font-weight: 600; margin-bottom: 10px; }
/* ---------- 29.13 模态框遮罩 + 居中动画 ----------
设计图：模板库/设置面板弹出时背景有半透明遮罩 */
.ced-modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 200; display: flex; align-items: center; justify-content: center; }
.ced-modal-box { background: var(--bg-1); border-radius: var(--r-lg); box-shadow: var(--sh-3); width: 680px; max-width: 90vw; max-height: 80vh; display: flex; flex-direction: column; }
.ced-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.ced-modal-tabs { display: flex; gap: 20px; height: 100%; }
.ced-modal-tabs button { border: none; background: transparent; padding: 6px 0; font-size: 14px; color: var(--text-3); cursor: pointer; border-bottom: 2px solid transparent; transition: color .18s, border-color .18s; }
.ced-modal-tabs button.active { color: var(--text-1); border-bottom-color: var(--primary); }
.ced-modal-close { border: none; background: transparent; color: var(--text-3); font-size: 22px; cursor: pointer; }
.ced-modal-close:hover { color: var(--text-1); }
.ced-modal-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px; }
/* ---------- 29.14 工具条按钮激活态 ----------
设计图：工具条按钮点击后有 active 态（深色背景 + 白字） */
.ced-toolbar button[data-active="true"],
.ced-toolbar button.ced-active {
background: var(--text-1); color: #fff; border-color: var(--text-1);
}
/* ---------- 29.15 Markdown 预览样式对齐 ----------
设计图：Markdown 预览内容样式（h1-h6/blockquote/列表/代码块）应与正文页一致 */
.ced-preview h1, .ced-preview h2, .ced-preview h3 { margin: 20px 0 10px; font-weight: 600; }
.ced-preview h1 { font-size: 22px; }
.ced-preview h2 { font-size: 19px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.ced-preview h3 { font-size: 16px; }
.ced-preview p { margin: 0 0 14px; line-height: 1.8; }
.ced-preview blockquote { border-left: 4px solid var(--primary); padding: 10px 16px; color: var(--text-2); background: var(--primary-050); margin: 14px 0; border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.ced-preview ul, .ced-preview ol { padding-left: 24px; margin: 10px 0 14px; }
.ced-preview li { margin: 4px 0; line-height: 1.7; }
.ced-preview a { color: var(--primary); }
.ced-preview .article-content table { border-collapse: collapse; width: 100%; margin: 14px 0; }
.ced-preview .article-content td, .ced-preview .article-content th { border: 1px solid var(--border); padding: 8px 12px; }
.ced-preview .article-content th { background: var(--bg-3); font-weight: 600; }
/* ---------- 29.16 编辑器 textarea placeholder ----------
设计图：textarea 有 placeholder 文字提示 */
.ced-textarea::placeholder { color: var(--text-4); }
/* ---------- 29.17 AI 助手切换按钮 ----------
设计图：顶部有 "AI 助手" 文字按钮，点击展开/收起右侧栏 */
.ced-header-right .ced-ai-toggle { font-size: 13px; color: var(--text-2); cursor: pointer; padding: 6px 12px; border-radius: var(--r-sm); transition: background .18s; }
.ced-header-right .ced-ai-toggle:hover { background: var(--bg-3); color: var(--text-1); }
.ced-header-right .ced-ai-toggle.ced-ai-on { color: var(--primary); }
/* ---------- 29.18 编辑器提示信息（红竖线引用块）----------
设计图：富文本模式下有红色竖线提示框 */
.ced-rt-editor blockquote[data-type="tip"] {
border-left: 3px solid #fc5531;
padding: 8px 14px;
background: #fff8f6;
color: var(--text-2);
border-radius: 0 var(--r-sm) var(--r-sm) 0;
margin: 12px 0;
}
/* ============================================================
§30 文章分类条：横向滚动 + 左右按钮（CSDN `.menus-view` 1:1）
真值（blog.csdn.net @1440）：`.menus-view`(relative, [288,124,1120,19])
> `.menus-view_prev` / `.menus-view_next`
position:absolute; width:48px; height:100%; z-index:1; cursor:pointer;
display:flex、内放一张箭头 img；
next 背景 linear-gradient(90deg, rgba(255,255,255,0), #FFF 52px)
prev 背景 linear-gradient(270deg, rgba(255,255,255,0), #FFF 32px)
起点：prev display:none / next display:flex；滚到端点的一侧隐藏。
本站把「内容位移」换成原生 overflow-x 滚动（触摸板/拖拽也能横滚），
按钮几何、渐变遮罩、显隐语义与 CSDN 保持一致。
前缀 cat-scroll-（main/ui/csdn/video 四个 CSS 文件查重 0 命中）。
============================================================ */
/* ---------- 30.1 滚动容器 ----------
⚠️ 容器必须无 padding / border：内距会把 .cat-bar 左基线推右，
与 §27.4 记录过的 `.card` 陷阱同一类（分类栏左边界 == 内容栏左边界）。 */
.cat-scroll { position: relative; }
/* ---------- 30.2 左右按钮：48px 渐变遮罩 + 箭头 ---------- */
.cat-scroll-btn {
position: absolute; top: 0; bottom: 0; width: 48px; z-index: 2;
display: flex; align-items: center; justify-content: center;
/* padding-top 4px 把箭头中心对齐到文字行：
.cat-bar 上内距 16 + 行高 19/2 = 25.5；按钮高 47、可用高 43 → 4 + 21.5 = 25.5 */
padding: 4px 0 0;
margin: 0; border: 0; font: inherit; cursor: pointer;
color: #999999; background: transparent;
-webkit-tap-highlight-color: transparent;
transition: color .2s ease;
}
/* 作者样式会盖过 UA 的 [hidden]{display:none}，必须显式补一条 */
.cat-scroll-btn[hidden] { display: none; }
.cat-scroll-btn svg { width: 16px; height: 16px; display: block; }
.cat-scroll-btn:hover { color: #1A1A1A; }
.cat-scroll-prev {
left: 0;
background: linear-gradient(270deg, rgba(255,255,255,0), var(--bg-2) 40px);
}
.cat-scroll-next {
right: 0;
background: linear-gradient(90deg, rgba(255,255,255,0), var(--bg-2) 40px);
}
/* 分类项不被 flex 压缩（否则 38 项会被挤进容器而不产生溢出） */
.cat-scroll .cat-bar > a { flex: 0 0 auto; }
/* 暗色主题：渐变透明端改用 rgba(0,0,0,0)，避免在深色面板上泛白雾 */
html[data-theme="dark"] .cat-scroll-btn { color: var(--text-3); }
html[data-theme="dark"] .cat-scroll-btn:hover { color: var(--text-1); }
html[data-theme="dark"] .cat-scroll-prev {
background: linear-gradient(270deg, rgba(0,0,0,0), var(--bg-2) 40px);
}
html[data-theme="dark"] .cat-scroll-next {
background: linear-gradient(90deg, rgba(0,0,0,0), var(--bg-2) 40px);
}
/* ---------- 30.3 窄屏收窄（CSDN 无对照，纯可用性：把可视宽度还给分类） ---------- */
@media (max-width: 768px) {
.cat-scroll-btn { width: 36px; }
.cat-scroll-prev { background: linear-gradient(270deg, rgba(255,255,255,0), var(--bg-2) 30px); }
.cat-scroll-next { background: linear-gradient(90deg, rgba(255,255,255,0), var(--bg-2) 30px); }
}
/* ============================================================
§31 动态发表框：自适应容器宽度（.blink-publisher）
──────────────────────────────────────────────────────────
病因：main.css 只给 .form-control / textarea.form-control / .comment-form /
.comment-editor / .editor-pane 下的 textarea 兜底过宽度，
`.blink-publisher textarea` 不在任何一条里 → **零覆盖**，走浏览器原生
`cols=20` 默认宽。实测线上 `#blinkContent` = **161×54px**（卡片内容宽 836px），
且带原生外观：border 1px solid rgb(118,118,118) / border-radius 0 /
padding 2px / resize:both —— 所以看起来像 2005 年的表单控件。
无对照基线：CSDN 未登录不渲染动态发布框（blog.csdn.net/nav/feeds 实测
textarea 数 = 0），blink.csdn.net 在本机 DNS 不可达 → 见 baseline §4.4。
取值沿用站内最成熟的输入规范（main.css `.comment-form textarea`：
100% / padding 11px 14px / 1px var(--border) / r-md / line-height 1.7 /
focus 主色边 + 3px --primary-050 光晕），仅底色改为 --bg-2：
下方 .bp-bar 已是 --bg-3 灰底，输入区同为灰会与工具条糊成一片。
令牌对照（亮/暗）：--bg-1 #FFFFFF/#1B1C20 卡片、--bg-2 #FFFFFF/#131417 输入区
→ 两种主题下输入区与卡片均保持一层浅/深差，不会失去边界。
⚠️ 选择器只用 `.blink-publisher textarea`，**不能写 `#blinkContent`**：
完整发布页（blink/publish.php）用的是同一个 id 但带 .input class、宽度本就
100%，id 选择器（1,0,0）会盖过 .input（0,1,0），把我这里的 min-height 88px
强加到它的 rows="5"（实测 98px）上，反而把它改矮。
============================================================ */
/* ---------- 31.1 发表框：撑满卡片内容宽 ---------- */
.blink-publisher textarea {
display: block; /* inline-block 会在下方留基线空隙 */
width: 100%; /* ← 修根因：跟随容器宽度自适应 */
box-sizing: border-box; /* 防 padding 把 100% 撑破卡片 */
min-height: 88px; /* ≈ 3 行，与模板 rows="3" 语义一致 */
padding: 11px 14px;
border: 1px solid var(--border);
border-radius: var(--r-md);
background: var(--bg-2);
color: var(--text-1);
font-family: inherit;
font-size: 14px;
line-height: 1.7;
resize: vertical; /* 只许纵向：横向拖拽会把卡片撑变形 */
outline: none; /* 焦点反馈交给 border-color（见 §18 约定） */
transition: border-color .18s, box-shadow .18s;
}
.blink-publisher textarea::placeholder { color: var(--text-3); }
.blink-publisher textarea:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--primary-050);
}
/* ---------- 31.2 工具条改为贴卡片底 ----------
原 .bp-bar{margin-bottom:14px} 是「作为最后一个元素」的底部间距，
叠在卡片 18px 内距之上 → 卡片底部比左右多出 14px 空白。 */
.bp-bar { margin: 12px 0 0; }
/* ---------- 31.3 完整发布页 textarea.input 收口 ----------
宽度本就是 100%（.input 定义），只缺纵向约束与行高。 */
.form-box textarea.input { min-height: 120px; line-height: 1.7; resize: vertical; }
/* ---------- 31.4 窄屏（媒体查询置文件末尾、断点升序） ---------- */
@media (max-width: 640px) {
.blink-publisher textarea { min-height: 76px; padding: 10px 12px; }
.bp-bar { padding: 10px 12px; gap: 8px; }
}
/* ============================================================
§32 个人空间首页：按 CSDN blog.csdn.net/[用户名] 重排（`sp-` 前缀）
──────────────────────────────────────────────────────────
真值（2026-09-26 实测 @1440，见 docs/csdn_baseline.md §5）：
.user-profile-head [0,48,1440,297]
.user-profile-head-info [60,148,1320,197]
.user-profile-avatar [76,136,102,102] 头像 102×102 圆形
.user-profile-head-name [194,168,250,24] 22px / 500 / #222226
.user-profile-operate-btn [1106,164,250,32] 右侧，两颗 96×32 r20
.user-profile-head-info-b-r [194,300,1162,45] 统计：总访问/原创/排名/粉丝/关注
.navList [408,355,972,48] ⚠️ Tab 在**右栏顶部**
.user-profile-body-left [60,355,338,3076] ← 左窄
.user-profile-body-right [408,355,972,3076] ← 右宽（gap 10）
.blog-list-box [408,403,972,149] 标题18 / 摘要14×2行 / meta
原文案：CSDN 该页**没有全站左栏**，是页面自带左右两栏；
本站原先叠了全站左栏 → 内容被挤到 x=280 只剩 1128，且左右还反了
（我们主宽+右窄栏，CSDN 左338信息+右972内容）。已把 mod=user&act=space
加进 main.php 的 $_noRail，本页走自带两栏。
⚠️ 「代码仓」一项本站无对应模块，Tab 做 6 项；帖子/动态/归档/粉丝
收进左栏「更多」，入口一个不丢。
============================================================ */
/* 32.1 个人空间头部：封面 banner + 头像骑在封面下沿 + 名字 22 + 按钮 96×32 r20 + 统计 5 项 */
/* CSDN banner 蓝色渐变（截图确认） */
.space-header {
position: relative;
margin-bottom: 10px;
overflow: hidden;
background: linear-gradient(135deg, #4f8ef7 0%, #2d6cdf 50%, #1a4bb8 100%);
height: 200px;
}
/* 封面背景图占满整个 space-header，改为 CSDN 纯蓝风格 */
.space-cover {
position: absolute; inset: 0;
z-index: 0;
background: linear-gradient(135deg, #1d7dfc 0%, #1a6cd8 50%, #1558b0 100%);
background-blend-mode: normal;
}
.space-info {
position: absolute; bottom: 0; left: 0; right: 0;
z-index: 2;
display: flex; align-items: flex-end;
padding: 0 26px 18px;
gap: 20px;
}
/* 头像压在封面下沿：110=102+8px 露出，border 白 4px */
.space-avatar {
width: 102px; height: 102px;
border: 4px solid #fff;
border-radius: 50%;
position: relative; z-index: 3;
flex-shrink: 0;
vertical-align: bottom;
box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.space-detail { min-width: 0; }
.space-detail h2 { font-size: 22px; font-weight: 500; margin-bottom: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
/* 名字行：左名字 / 右操作按钮（CSDN .user-profile-head-info-r-t） */
.sp-name-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sp-codeage { font-size: 13px; font-weight: 400; color: var(--text-3); }
/* 操作按钮：96×32 / 圆角 20px（CSDN .user-profile-operate-btn 内两颗 96×32 r20） */
.sp-operate { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.sp-btn {
display: inline-flex; align-items: center; justify-content: center;
min-width: 96px; height: 32px; padding: 0 14px;
border: 1px solid var(--border); border-radius: 20px;
background: var(--bg-1); color: var(--text-2);
font-size: 14px; line-height: 1; cursor: pointer; text-decoration: none;
transition: border-color .18s, color .18s, background-color .18s;
}
.sp-btn:hover { border-color: var(--primary); color: var(--primary); }
.sp-btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.sp-btn-primary:hover { background: var(--primary); border-color: var(--primary); color: #fff; opacity: .9; }
/* 签名 + IP属地/加入时间（CSDN .user-profile-head-info-r-c / -b） */
.sp-sign { margin-top: 8px; font-size: 14px; color: var(--text-2); line-height: 22px; }
.sp-meta { margin-top: 6px; display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--text-3); }
/* 统计 5 项：数字 17/700 黑 + 标签 13 灰（CSDN 口径 总访问量/原创/排名/粉丝/关注） */
.space-stats { margin-top: 12px; gap: 28px; font-size: 13px; }
.space-stats b { font-size: 17px; font-weight: 700; color: var(--text-1); margin-right: 4px; }
/* 32.2 两栏骨架：左 338 + 右自适应，gap 10（CSDN 338 + 10 + 972） */
.sp-body { display: grid; grid-template-columns: 338px minmax(0, 1fr); gap: 10px; align-items: start; }
.sp-left { display: flex; flex-direction: column; gap: 10px; }
.sp-right { min-width: 0; }
.sp-left .card { margin-bottom: 0; }
/* 32.3 Tab：在右栏顶部，48 高、16px、选中 #222226（**不加粗**，CSDN fw 400）
border-bottom 已移至 .sp-right-toolbar，tab 只留顶边圆角 */
.sp-tabs {
display: flex; align-items: stretch; gap: 0;
height: 48px; padding: 0 16px;
background: var(--bg-1); border-radius: 2px 2px 0 0;
overflow-x: auto; scrollbar-width: none;
}
.sp-tabs::-webkit-scrollbar { display: none; }
.sp-tabs a {
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 0 16px; flex: 0 0 auto;
font-size: 16px; line-height: 20px; color: var(--text-2);
text-decoration: none; white-space: nowrap;
transition: color .18s;
}
.sp-tabs a:hover { color: var(--text-1); }
.sp-tabs a.active { color: #222226; font-weight: 400; }
/* 计数小字（数量改到标签右侧同行显示） */
.sp-tabs a em { display: inline; font-style: normal; font-size: 12px; color: var(--text-3); margin-left: 4px; vertical-align: middle; }
.sp-tab-num { display: inline; font-size: 12px; color: var(--text-3); margin-left: 4px; vertical-align: middle; }
.sp-content { background: var(--bg-1); border-radius: 0 0 2px 2px; padding: 0 24px 24px; }
.sp-subfilter { padding: 14px 0 0; }
/* 32.4 文章项：149 高 = 标题 18 + 摘要 2 行 14 + meta 14（CSDN .blog-list-box） */
.sp-art { padding: 24px 0; border-bottom: 1px solid var(--border-2); }
.sp-art-title {
display: block; font-size: 18px; font-weight: 500; line-height: 24px;
color: var(--text-1); text-decoration: none;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sp-art-title:hover { color: var(--primary); }
.sp-art-summary {
margin-top: 8px; font-size: 14px; line-height: 19px; color: var(--text-2);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.sp-art-meta { margin-top: 12px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; color: var(--text-2); line-height: 20px; }
/* 类型标签：原创为红（CSDN rgb(227,62,51)），其余灰 */
.sp-art-type { font-size: 12px; line-height: 20px; color: var(--text-2); }
.sp-art-type.type-0 { color: #E33E33; }
/* 32.5 左栏组件 */
.sp-info-list { font-size: 14px; line-height: 26px; color: var(--text-1); }
.sp-info-list span { display: inline-block; width: 48px; color: var(--text-3); font-size: 13px; }
.sp-tag-row { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.sp-tag-row a { font-size: 12px; color: var(--primary); background: var(--primary-050); border-radius: 10px; padding: 2px 10px; text-decoration: none; }
.sp-stat-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px 8px; font-size: 13px; color: var(--text-3); }
.sp-stat-grid b { display: block; font-size: 16px; color: var(--text-1); font-weight: 700; }
.sp-vip-card { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; }
.sp-vip-name { font-weight: 600; font-size: 15px; }
.sp-vip-exp { margin-top: 4px; font-size: 13px; opacity: .9; }
.sp-more-links { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 14px; }
.sp-more-links a { color: var(--text-2); text-decoration: none; }
.sp-more-links a:hover, .sp-more-links a.active { color: var(--primary); }
.sp-user-list { display: block; }
.sp-user-list .user-item { padding: 14px 0; border-bottom: 1px solid var(--border-2); }
.sp-user-stat { font-size: 12px; color: var(--text-3); flex: 0 0 auto; }
.sp-archive-ym { margin: 18px 0 8px; font-size: 16px; }
/* 32.6 暗色：Tab/文章项跟随主题令牌，仅「原创红」与激活色保持 CSDN 原值 */
html[data-theme="dark"] .sp-tabs a.active { color: #E8E8ED; }
html[data-theme="dark"] .sp-art-type.type-0 { color: #F2695C; }
@media (max-width: 1199px) {
.sp-body { grid-template-columns: minmax(0, 1fr); }
.sp-left { order: 2; }
.sp-right { order: 1; }
}
@media (max-width: 768px) {
.space-info { padding: 0 16px 14px; gap: 14px; flex-wrap: wrap; }
.space-avatar { width: 76px; height: 76px; }
.space-detail { padding-top: 0; }
.space-detail h2 { font-size: 18px; }
.space-stats { gap: 16px; }
.sp-operate { gap: 10px; }
.sp-btn { min-width: 80px; height: 30px; font-size: 13px; }
.sp-tabs { height: 44px; padding: 0 8px; }
.sp-tabs a { font-size: 15px; padding: 0 12px; }
.sp-content { padding: 0 16px 16px; }
.sp-art { padding: 18px 0; }
.sp-art-title { font-size: 16px; white-space: normal; }
}
/* §33 个人空间对齐 CSDN 截图（2026-09-26）：左栏三卡 + 搜索框 + 头部文案调整 */
.sp-right { display: flex; flex-direction: column; min-width: 0; }
/* ③ 右栏顶部搜索区 */
.sp-right-header { padding: 12px 16px 0; display: flex; align-items: center; }
.sp-search-box { display: flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--bg-2); width: 100%; max-width: 360px; }
.sp-search-input { flex: 1; border: none; background: transparent; padding: 7px 12px; font-size: 14px; color: var(--text); outline: none; min-width: 0; }
.sp-search-input::placeholder { color: var(--text-light); }
.sp-search-btn { border: none; background: transparent; padding: 0 10px; cursor: pointer; font-size: 16px; color: var(--text-light); line-height: 1; }
/* ① 个人成就卡 */
.sp-achieve-card { padding: 14px 16px; }
.sp-achieve-list { display: flex; flex-direction: column; gap: 8px; }
.sp-achieve-item { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text); }
.sp-achieve-icon { font-size: 14px; color: var(--primary); width: 16px; text-align: center; flex-shrink: 0; }
.sp-achieve-label { color: var(--text-light); }
.sp-achieve-num { font-weight: 600; color: var(--primary); }
/* ② 潜力等级卡 */
.sp-level-card { padding: 14px 16px; }
.sp-level-box { margin-top: 8px; }
.sp-level-name { font-size: 13px; color: var(--text); margin-bottom: 8px; font-weight: 500; }
.sp-level-bar-wrap { position: relative; height: 10px; background: var(--bg-2); border-radius: 5px; overflow: hidden; }
.sp-level-bar { position: absolute; inset: 0; }
.sp-level-fill { height: 100%; background: linear-gradient(90deg, #ed4085, #8f2eaa); border-radius: 5px; transition: width .4s; }
.sp-level-nums { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; color: var(--text-light); }
.sp-level-nums b { color: var(--primary); font-weight: 600; }
/* ③ TA 关注卡 */
.sp-follow-card { padding: 14px 16px; }
.sp-follow-list { display: flex; flex-direction: column; gap: 0; }
.sp-follow-item { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; font-size: 13px; color: var(--text); border-bottom: 1px solid var(--border-light); cursor: pointer; text-decoration: none; }
.sp-follow-item:last-child { border-bottom: none; }
.sp-follow-item:hover { color: var(--primary); }
.sp-follow-num { color: var(--text-light); font-size: 12px; }
/* 头部 meta 行 */
.sp-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: rgba(255,255,255,0.9); margin-top: 4px; }
/* 头部码龄改为 CSDN 风格 */
.sp-codeage { font-size: 12px; font-weight: 400; color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.15); padding: 2px 6px; border-radius: 4px; margin-left: 8px; }
/* 头部统计行（CSDN 截图：浏览量/访问量/排名/粉丝/关注，白字横排）
紧贴名字行下方，gap 拉开到 20px */
.sp-stats-row { display: flex; gap: 20px; font-size: 13px; color: rgba(255,255,255,0.92); margin-top: 8px; }
.sp-stats-row b { font-weight: 600; }
.sp-stat-item { white-space: nowrap; }
.sp-stat-item b { margin-left: 4px; }
/* 签名行间距 */
.space-info .sp-sign { margin-top: 6px; }
/* meta 行在 banner 上，文字用白色 */
.sp-meta { color: rgba(255,255,255,0.9); }
/* banner 内文字全部白色 */
.space-info .sp-sign,
.space-info .sp-meta { color: rgba(255,255,255,0.9); }
.space-info .sp-meta span { color: rgba(255,255,255,0.9); }
/* §34 个人空间：左栏「更多」卡（恢复帖子/动态/归档/粉丝四个入口） ===== */
/* 缘由：csdn35 重写时删掉了「更多」卡，而这 4 个 do 分支不在 Tab 里
→ 站内无任何链接指向，只能手敲 URL。现补回底部工具卡。 */
.sp-more-card { padding: 14px 16px; }
.sp-more-card .sp-more-links { gap: 8px 18px; }
.sp-more-links a.active { font-weight: 600; }
/* ===== §35 个人空间对齐 CSDN 截图（2026-09-27）：banner 改蓝 + 认证标签 + 排序 + RSS ===== */
/* banner 背景：改 CSDN 纯蓝风格，220px 足够容纳 5 行内容（名字/统计/签名/IP/操作按钮） */
.space-header {
background: linear-gradient(135deg, #1d7dfc 0%, #1a6cd8 50%, #1558b0 100%);
height: 220px;
}
/* 认证标签（蓝底白字，与 CSDN 一致） */
.sp-cert-badge {
display: inline-block;
font-size: 12px;
font-weight: 500;
color: #fff;
background: #1677ff;
border-radius: 4px;
padding: 2px 8px;
margin-left: 8px;
vertical-align: middle;
}
/* 右栏排序 + RSS 工具栏：padding-top=0 与 banner 区对齐，内容垂直居中 */
.sp-right-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
height: 48px;
gap: 12px;
border-bottom: 1px solid var(--border-2);
}
/* 排序下拉 */
.sp-sort-wrap { position: relative; }
.sp-sort-btn {
display: flex;
align-items: center;
gap: 6px;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--bg-2);
color: var(--text);
font-size: 13px;
padding: 6px 12px;
cursor: pointer;
outline: none;
}
.sp-sort-btn:hover { border-color: var(--primary); color: var(--primary); }
.sp-sort-arrow { font-size: 10px; }
.sp-sort-dropdown {
display: none;
position: absolute;
top: calc(100% + 4px);
left: 0;
min-width: 140px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-md);
box-shadow: 0 4px 12px rgba(0,0,0,.12);
z-index: 100;
overflow: hidden;
}
.sp-sort-item {
display: block;
padding: 8px 14px;
font-size: 13px;
color: var(--text);
text-decoration: none;
cursor: pointer;
}
.sp-sort-item:hover { background: var(--bg-2); color: var(--primary); }
.sp-sort-item.active { color: var(--primary); font-weight: 600; background: rgba(22,119,255,.06); }
/* RSS 按钮 */
.sp-rss-btn {
display: flex;
align-items: center;
gap: 5px;
font-size: 13px;
color: var(--text-light);
text-decoration: none;
padding: 6px 10px;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--bg-2);
transition: all .2s;
}
.sp-rss-btn:hover { color: #ff8c00; border-color: #ff8c00; background: #fff7ee; }
.sp-rss-btn svg { flex-shrink: 0; }
/* 隐藏旧搜索框区（已替换为工具栏） */
.sp-right-header { display: none; }